@vela-ui/react
Version:
Vela UI React components
210 lines (203 loc) • 6.89 kB
JavaScript
;
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/toggle-button.tsx
var toggle_button_exports = {};
__export(toggle_button_exports, {
ToggleButton: () => ToggleButton,
toggleButtonVariants: () => toggleButtonVariants
});
module.exports = __toCommonJS(toggle_button_exports);
var import_react_aria_components2 = require("react-aria-components");
var import_tailwind_variants3 = require("tailwind-variants");
// src/lib/classes.ts
var import_tailwind_variants = require("tailwind-variants");
var focusRing = (0, import_tailwind_variants.tv)({
base: "outline-hidden",
variants: {
isFocusVisible: {
true: "border-ring ring-ring/50 ring-[3px]"
},
isInvalid: {
true: "ring-destructive/20 dark:ring-destructive/40 border-destructive"
}
}
});
// src/components/toggle-button-group.tsx
var import_react_aria_components = require("react-aria-components");
var import_tailwind_variants2 = require("tailwind-variants");
// src/lib/context.ts
var React = __toESM(require("react"));
function createContext2(options = {}) {
const {
strict = true,
errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
name
} = options;
const Context = React.createContext(void 0);
Context.displayName = name;
function useContext2() {
var _a;
const context = React.useContext(Context);
if (!context && strict) {
const error = new Error(errorMessage);
error.name = "ContextError";
(_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, useContext2);
throw error;
}
return context;
}
return [Context.Provider, useContext2, Context];
}
// src/components/toggle-button-group.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var toggleButtonGroupVariants = (0, import_tailwind_variants2.tv)({
base: "isolate inline-flex items-center",
variants: {
variant: {
default: "gap-1",
ghost: "gap-1",
outline: "[&_button]:rounded-none"
},
orientation: {
horizontal: "flex-row",
vertical: "flex-col [&_button]:w-full"
}
},
compoundVariants: [
{
variant: "outline",
orientation: "horizontal",
className: "[&_button]:first:rounded-s-md [&_button]:last:rounded-e-md [&_button:not(:first-child)]:-ml-px"
},
{
variant: "outline",
orientation: "vertical",
className: "[&_button]:-mt-px [&_button]:first:rounded-t-md [&_button]:last:rounded-b-md"
}
],
defaultVariants: {
variant: "default",
orientation: "horizontal"
}
});
var [ToggleGroupProvider, useToggleGroupContext] = createContext2({
name: "ToggleButtonGroupContext",
strict: false
});
// src/components/toggle-button.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var toggleButtonVariants = (0, import_tailwind_variants3.tv)({
extend: focusRing,
base: "inline-flex shrink-0 items-center justify-center rounded-md font-medium whitespace-nowrap transition-all [&_svg]:pointer-events-none [&_svg]:shrink-0",
variants: {
variant: {
default: "hover:bg-accent hover:text-accent-foreground data-[selected]:bg-primary data-[selected]:text-primary-foreground bg-transparent",
outline: "border-input hover:bg-accent hover:text-accent-foreground data-[selected]:bg-accent data-[selected]:text-accent-foreground border bg-transparent shadow-xs",
ghost: "data-[selected]:bg-accent data-[selected]:text-accent-foreground hover:bg-accent hover:text-accent-foreground bg-transparent"
},
size: {
xs: "size-8 gap-1 text-xs [&_svg:not([class*='size-'])]:size-4",
sm: "size-9 gap-2 text-sm [&_svg:not([class*='size-'])]:size-4",
md: "size-10 gap-2 text-sm [&_svg:not([class*='size-'])]:size-5",
lg: "size-11 gap-2.5 text-base [&_svg:not([class*='size-'])]:size-5",
xl: "size-12 gap-2.5 text-base [&_svg:not([class*='size-'])]:size-5"
},
shape: {
rectangle: "",
square: "",
circle: "rounded-full"
},
isDisabled: {
true: "pointer-events-none opacity-50"
},
isPending: {
true: "pointer-events-none opacity-50"
}
},
compoundVariants: [
{
size: "xs",
shape: "rectangle",
className: "w-auto px-2.5"
},
{
size: "sm",
shape: "rectangle",
className: "w-auto px-3.5"
},
{
size: "md",
shape: "rectangle",
className: "w-auto px-4"
},
{
size: "lg",
shape: "rectangle",
className: "w-auto px-5"
},
{
size: "xl",
shape: "rectangle",
className: "w-auto px-5"
}
],
defaultVariants: {
variant: "default",
size: "md",
shape: "rectangle"
}
});
function ToggleButton(props) {
const contextProps = useToggleGroupContext();
const buttonProps = { ...contextProps, ...props };
const { className, variant, size, shape, ...restProps } = buttonProps;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_aria_components2.ToggleButton,
{
"data-slot": "toggle-button",
className: (0, import_react_aria_components2.composeRenderProps)(
className,
(className2, renderProps) => toggleButtonVariants({
...renderProps,
variant,
size,
shape,
className: className2
})
),
...restProps
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ToggleButton,
toggleButtonVariants
});