luan-ui 0.5.2 → 0.6.0

package/dist/components/select/select.js

@@ -1,65 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
 import { useFormContext } from "../form-field/form-field-context";
 import { Icon } from "../icon/icon";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, } from "@radix-ui/react-icons";
 import { cn } from "../../utilities/cn/cn";
-import { Select as SelectPrimitive } from "radix-ui";
-import { forwardRef, } from "react";
-/**
- * Select
- */
-const Select = ({ disabled: initialDisabled, required: initialRequired, ...props }) => {
+function Select({ disabled: initialDisabled, required: initialRequired, ...props }) {
     const { disabled, required } = useFormContext({
         disabled: initialDisabled,
         required: initialRequired,
     });
     return (_jsx(SelectPrimitive.Root, { disabled: disabled, required: required, ...props }));
-};
+}
 /**
  * SelectGroup
  */
 const SelectGroup = SelectPrimitive.Group;
-/**
- * SelectValue
- */
-const SelectValue = SelectPrimitive.Value;
-/**
- * SelectTrigger
- */
-const SelectTrigger = forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-400 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-gray-500 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(Icon, { asChild: true, size: "small", className: "opacity-50", children: _jsx(ChevronDownIcon, {}) }) })] })));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-/**
- * SelectScrollUpButton
- */
-const SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(Icon, { asChild: true, size: "small", className: "opacity-50", children: _jsx(ChevronUpIcon, {}) }) })));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-/**
- * SelectScrollDownButton
- */
-const SelectScrollDownButton = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(Icon, { asChild: true, size: "small", className: "opacity-50", children: _jsx(ChevronDownIcon, {}) }) })));
-SelectScrollDownButton.displayName =
-    SelectPrimitive.ScrollDownButton.displayName;
-/**
- * SelectContent
- */
-const SelectContent = forwardRef(({ className, children, position = "popper", ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn("data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] origin-[--radix-select-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-md border border-gray-400 bg-white text-gray-700 shadow-md data-[state=closed]:animate-fade-out data-[state=closed]:animate-out data-[state=open]:animate-fade-in data-[state=open]:animate-in", position === "popper" &&
-            "data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
-                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-/**
- * SelectLabel
- */
-const SelectLabel = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 font-semibold text-sm", className), ...props })));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-/**
- * SelectItem
- */
-const SelectItem = forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus-visible:bg-gray-700 focus-visible:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { asChild: true, size: "small", children: _jsx(CheckIcon, {}) }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-/**
- * SelectSeparator
- */
-const SelectSeparator = forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("my-2 h-px bg-gray-200", className), ...props })));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
+function SelectValue({ ref, ...props }) {
+    return _jsx(SelectPrimitive.Value, { ref: ref, ...props });
+}
+function SelectTrigger({ className, children, ref, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-400 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-gray-500 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(Icon, { size: "small", className: "opacity-50", children: _jsx(ChevronDownIcon, {}) }) })] }));
+}
+function SelectScrollUpArrow({ className, ref, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpArrow, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(Icon, { size: "small", className: "opacity-50", children: _jsx(ChevronUpIcon, {}) }) }));
+}
+function SelectScrollDownArrow({ className, ref, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownArrow, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(Icon, { size: "small", className: "opacity-50", children: _jsx(ChevronDownIcon, {}) }) }));
+}
+function SelectContent({ className, children, sideOffset = 4, ref, ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Positioner, { sideOffset: sideOffset, alignItemWithTrigger: false, children: [_jsx(SelectScrollUpArrow, {}), _jsx(SelectPrimitive.Popup, { ref: ref, className: cn("data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:fade-out data-closed:zoom-out-95 data-open:fade-in data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md border border-gray-400 bg-white text-gray-700 shadow-md transition-all data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-closed:animate-out data-open:animate-in", className), ...props, children: _jsx(SelectPrimitive.List, { className: "w-full min-w-(--anchor-width) p-1", children: children }) }), _jsx(SelectScrollDownArrow, {})] }) }));
+}
+function SelectLabel({ className, ref, ...props }) {
+    return (_jsx(SelectPrimitive.GroupLabel, { ref: ref, className: cn("px-2 py-1.5 font-semibold text-sm", className), ...props }));
+}
+function SelectItem({ className, children, ref, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-disabled:pointer-events-none data-highlighted:bg-gray-700 data-highlighted:text-white data-disabled:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { size: "small", children: _jsx(CheckIcon, {}) }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+}
+function SelectSeparator({ className, ref, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("my-2 h-px bg-gray-200", className), ...props }));
+}
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpArrow, SelectScrollDownArrow, };
 //# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"/","sources":["components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport { Icon } from \"@components/icon/icon\";\nimport {\n\tCheckIcon,\n\tChevronDownIcon,\n\tChevronUpIcon,\n} from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\n/**\n * Select\n */\n\nconst Select = ({\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\t...props\n}: ComponentPropsWithoutRef<typeof SelectPrimitive.Root>) => {\n\tconst { disabled, required } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t<SelectPrimitive.Root disabled={disabled} required={required} {...props} />\n\t);\n};\n\n/**\n * SelectGroup\n */\n\nconst SelectGroup = SelectPrimitive.Group;\n\n/**\n * SelectValue\n */\n\nconst SelectValue = SelectPrimitive.Value;\n\n/**\n * SelectTrigger\n */\n\nconst SelectTrigger = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Trigger>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-400 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-gray-500 [&>span]:line-clamp-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t\t<SelectPrimitive.Icon asChild>\n\t\t\t<Icon asChild size=\"small\" className=\"opacity-50\">\n\t\t\t\t<ChevronDownIcon />\n\t\t\t</Icon>\n\t\t</SelectPrimitive.Icon>\n\t</SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\n/**\n * SelectScrollUpButton\n */\n\nconst SelectScrollUpButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<Icon asChild size=\"small\" className=\"opacity-50\">\n\t\t\t<ChevronUpIcon />\n\t\t</Icon>\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\n/**\n * SelectScrollDownButton\n */\n\nconst SelectScrollDownButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<Icon asChild size=\"small\" className=\"opacity-50\">\n\t\t\t<ChevronDownIcon />\n\t\t</Icon>\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n\tSelectPrimitive.ScrollDownButton.displayName;\n\n/**\n * SelectContent\n */\n\nconst SelectContent = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n\t<SelectPrimitive.Portal>\n\t\t<SelectPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] origin-[--radix-select-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-md border border-gray-400 bg-white text-gray-700 shadow-md data-[state=closed]:animate-fade-out data-[state=closed]:animate-out data-[state=open]:animate-fade-in data-[state=open]:animate-in\",\n\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\"data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tposition={position}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SelectScrollUpButton />\n\t\t\t<SelectPrimitive.Viewport\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"p-1\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SelectPrimitive.Viewport>\n\t\t\t<SelectScrollDownButton />\n\t\t</SelectPrimitive.Content>\n\t</SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\n/**\n * SelectLabel\n */\n\nconst SelectLabel = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cn(\"px-2 py-1.5 font-semibold text-sm\", className)}\n\t\t{...props}\n\t/>\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\n/**\n * SelectItem\n */\n\nconst SelectItem = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus-visible:bg-gray-700 focus-visible:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<SelectPrimitive.ItemIndicator>\n\t\t\t\t<Icon asChild size=\"small\">\n\t\t\t\t\t<CheckIcon />\n\t\t\t\t</Icon>\n\t\t\t</SelectPrimitive.ItemIndicator>\n\t\t</span>\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\n/**\n * SelectSeparator\n */\n\nconst SelectSeparator = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Separator>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Separator\n\t\tref={ref}\n\t\tclassName={cn(\"my-2 h-px bg-gray-200\", className)}\n\t\t{...props}\n\t/>\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n\tSelect,\n\tSelectGroup,\n\tSelectValue,\n\tSelectTrigger,\n\tSelectContent,\n\tSelectLabel,\n\tSelectItem,\n\tSelectSeparator,\n\tSelectScrollUpButton,\n\tSelectScrollDownButton,\n};\n"]}
+{"version":3,"file":"select.js","sourceRoot":"/","sources":["components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport { Icon } from \"@components/icon/icon\";\nimport {\n\tCheckIcon,\n\tChevronDownIcon,\n\tChevronUpIcon,\n} from \"@radix-ui/react-icons\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * Select\n */\n\nexport type SelectProps = ComponentProps<typeof SelectPrimitive.Root>;\n\nfunction Select({\n\tdisabled: initialDisabled,\n\trequired: initialRequired,\n\t...props\n}: SelectProps) {\n\tconst { disabled, required } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\trequired: initialRequired,\n\t});\n\treturn (\n\t\t<SelectPrimitive.Root disabled={disabled} required={required} {...props} />\n\t);\n}\n\n/**\n * SelectGroup\n */\n\nconst SelectGroup = SelectPrimitive.Group;\n\n/**\n * SelectValue\n */\n\nexport type SelectValueProps = ComponentProps<typeof SelectPrimitive.Value>;\n\nfunction SelectValue({ ref, ...props }: SelectValueProps) {\n\treturn <SelectPrimitive.Value ref={ref} {...props} />;\n}\n\n/**\n * SelectTrigger\n */\n\nexport type SelectTriggerProps = ComponentProps<typeof SelectPrimitive.Trigger>;\n\nfunction SelectTrigger({\n\tclassName,\n\tchildren,\n\tref,\n\t...props\n}: SelectTriggerProps) {\n\treturn (\n\t\t<SelectPrimitive.Trigger\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-gray-400 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-placeholder:text-gray-500 [&>span]:line-clamp-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<SelectPrimitive.Icon\n\t\t\t\trender={\n\t\t\t\t\t<Icon size=\"small\" className=\"opacity-50\">\n\t\t\t\t\t\t<ChevronDownIcon />\n\t\t\t\t\t</Icon>\n\t\t\t\t}\n\t\t\t/>\n\t\t</SelectPrimitive.Trigger>\n\t);\n}\n\n/**\n * SelectScrollUpArrow\n */\n\nexport type SelectScrollUpArrowProps = ComponentProps<\n\ttypeof SelectPrimitive.ScrollUpArrow\n>;\n\nfunction SelectScrollUpArrow({\n\tclassName,\n\tref,\n\t...props\n}: SelectScrollUpArrowProps) {\n\treturn (\n\t\t<SelectPrimitive.ScrollUpArrow\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Icon size=\"small\" className=\"opacity-50\">\n\t\t\t\t<ChevronUpIcon />\n\t\t\t</Icon>\n\t\t</SelectPrimitive.ScrollUpArrow>\n\t);\n}\n\n/**\n * SelectScrollDownArrow\n */\n\nexport type SelectScrollDownArrowProps = ComponentProps<\n\ttypeof SelectPrimitive.ScrollDownArrow\n>;\n\nfunction SelectScrollDownArrow({\n\tclassName,\n\tref,\n\t...props\n}: SelectScrollDownArrowProps) {\n\treturn (\n\t\t<SelectPrimitive.ScrollDownArrow\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Icon size=\"small\" className=\"opacity-50\">\n\t\t\t\t<ChevronDownIcon />\n\t\t\t</Icon>\n\t\t</SelectPrimitive.ScrollDownArrow>\n\t);\n}\n\n/**\n * SelectContent\n */\n\nexport type SelectContentProps = ComponentProps<\n\ttypeof SelectPrimitive.Popup\n> & {\n\tsideOffset?: number;\n};\n\nfunction SelectContent({\n\tclassName,\n\tchildren,\n\tsideOffset = 4,\n\tref,\n\t...props\n}: SelectContentProps) {\n\treturn (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Positioner\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\talignItemWithTrigger={false}\n\t\t\t>\n\t\t\t\t<SelectScrollUpArrow />\n\t\t\t\t<SelectPrimitive.Popup\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:fade-out data-closed:zoom-out-95 data-open:fade-in data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md border border-gray-400 bg-white text-gray-700 shadow-md transition-all data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-closed:animate-out data-open:animate-in\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<SelectPrimitive.List className=\"w-full min-w-(--anchor-width) p-1\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</SelectPrimitive.List>\n\t\t\t\t</SelectPrimitive.Popup>\n\t\t\t\t<SelectScrollDownArrow />\n\t\t\t</SelectPrimitive.Positioner>\n\t\t</SelectPrimitive.Portal>\n\t);\n}\n\n/**\n * SelectLabel\n */\n\nexport type SelectLabelProps = ComponentProps<\n\ttypeof SelectPrimitive.GroupLabel\n>;\n\nfunction SelectLabel({ className, ref, ...props }: SelectLabelProps) {\n\treturn (\n\t\t<SelectPrimitive.GroupLabel\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"px-2 py-1.5 font-semibold text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * SelectItem\n */\n\nexport type SelectItemProps = ComponentProps<typeof SelectPrimitive.Item>;\n\nfunction SelectItem({ className, children, ref, ...props }: SelectItemProps) {\n\treturn (\n\t\t<SelectPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-disabled:pointer-events-none data-highlighted:bg-gray-700 data-highlighted:text-white data-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t\t<SelectPrimitive.ItemIndicator>\n\t\t\t\t\t<Icon size=\"small\">\n\t\t\t\t\t\t<CheckIcon />\n\t\t\t\t\t</Icon>\n\t\t\t\t</SelectPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t</SelectPrimitive.Item>\n\t);\n}\n\n/**\n * SelectSeparator\n */\n\nexport type SelectSeparatorProps = ComponentProps<\n\ttypeof SelectPrimitive.Separator\n>;\n\nfunction SelectSeparator({ className, ref, ...props }: SelectSeparatorProps) {\n\treturn (\n\t\t<SelectPrimitive.Separator\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"my-2 h-px bg-gray-200\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tSelect,\n\tSelectGroup,\n\tSelectValue,\n\tSelectTrigger,\n\tSelectContent,\n\tSelectLabel,\n\tSelectItem,\n\tSelectSeparator,\n\tSelectScrollUpArrow,\n\tSelectScrollDownArrow,\n};\n"]}

package/dist/components/skeleton/skeleton.d.ts

@@ -1,5 +1,7 @@
+import type { ComponentProps } from "react";
 /**
  * Skeleton
  */
-declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type SkeletonProps = ComponentProps<"div">;
+declare function Skeleton({ className, ref, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
 export { Skeleton };

package/dist/components/skeleton/skeleton.js

@@ -1,10 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../utilities/cn/cn";
-import { forwardRef, } from "react";
-/**
- * Skeleton
- */
-const Skeleton = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("animate-pulse rounded-md bg-gray-200", className), ...props })));
-Skeleton.displayName = "Skeleton";
+function Skeleton({ className, ref, ...props }) {
+    return (_jsx("div", { ref: ref, className: cn("animate-pulse rounded-md bg-gray-200", className), ...props }));
+}
 export { Skeleton };
 //# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sourceRoot":"/","sources":["components/skeleton/skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAGN,UAAU,GACV,MAAM,OAAO,CAAC;AAEf;;GAEG;AAEH,MAAM,QAAQ,GAAG,UAAU,CAGzB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,sCAAsC,EAAE,SAAS,CAAC,KAC5D,KAAK,GACR,CACF,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import { cn } from \"@utilities/cn/cn\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n} from \"react\";\n\n/**\n * Skeleton\n */\n\nconst Skeleton = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\tclassName={cn(\"animate-pulse rounded-md bg-gray-200\", className)}\n\t\t{...props}\n\t/>\n));\nSkeleton.displayName = \"Skeleton\";\n\nexport { Skeleton };\n"]}
+{"version":3,"file":"skeleton.js","sourceRoot":"/","sources":["components/skeleton/skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAStC,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAiB;IAC5D,OAAO,CACN,cACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,sCAAsC,EAAE,SAAS,CAAC,KAC5D,KAAK,GACR,CACF,CAAC;AACH,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * Skeleton\n */\n\nexport type SkeletonProps = ComponentProps<\"div\">;\n\nfunction Skeleton({ className, ref, ...props }: SkeletonProps) {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"animate-pulse rounded-md bg-gray-200\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Skeleton };\n"]}

package/dist/components/slider/slider.d.ts

@@ -1,6 +1,6 @@
-import { Slider as RadixSlider } from "radix-ui";
-import { type ComponentPropsWithoutRef } from "react";
-export type SliderProps = ComponentPropsWithoutRef<typeof RadixSlider.Root> & {
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import type { ComponentProps } from "react";
+export type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {
     /**
      * Whether to show the minimum and maximum values below the slider
      * @default true
@@ -8,32 +8,25 @@ export type SliderProps = ComponentPropsWithoutRef<typeof RadixSlider.Root> & {
     showMinMax?: boolean;
 };
 /**
- * A customizable slider component built on top of Radix UI's slider primitive.
+ * A customizable slider component built on top of Base UI's slider primitive.
  *
  * @example
  * ```tsx
  * <Slider
  *   min={0}
  *   max={100}
- *   defaultValue={[50]}
+ *   defaultValue={50}
  *   showMinMax={true}
  * />
  * ```
  *
  * @param {Object} props - The props for the Slider component
- * @param {number[]} [props.defaultValue] - The initial value of the slider
+ * @param {number | number[]} [props.defaultValue] - The initial value of the slider
  * @param {number} [props.min=0] - The minimum value of the slider
  * @param {number} [props.max=100] - The maximum value of the slider
  * @param {boolean} [props.showMinMax=true] - Whether to show min/max values below the slider
  * @param {string} [props.className] - Additional CSS classes to apply to the slider
- * @param {React.Ref<ComponentRef<typeof RadixSlider.Root>>} ref - Forwarded ref for the slider root element
  * @returns {JSX.Element} A slider component with optional tooltips and min/max display
  */
-declare const Slider: import("react").ForwardRefExoticComponent<Omit<RadixSlider.SliderProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
-    /**
-     * Whether to show the minimum and maximum values below the slider
-     * @default true
-     */
-    showMinMax?: boolean;
-} & import("react").RefAttributes<HTMLSpanElement>>;
+declare function Slider({ className, defaultValue, min, max, showMinMax, disabled: initialDisabled, onValueChange, ref, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
 export { Slider };

package/dist/components/slider/slider.js

@@ -1,40 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
 import { useFormContext } from "../form-field/form-field-context";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../tooltip/tooltip";
 import { cn } from "../../utilities/cn/cn";
-import { Slider as RadixSlider } from "radix-ui";
-import { forwardRef, useState, } from "react";
+import { useState } from "react";
 /**
- * A customizable slider component built on top of Radix UI's slider primitive.
+ * A customizable slider component built on top of Base UI's slider primitive.
  *
  * @example
  * ```tsx
  * <Slider
  *   min={0}
  *   max={100}
- *   defaultValue={[50]}
+ *   defaultValue={50}
  *   showMinMax={true}
  * />
  * ```
  *
  * @param {Object} props - The props for the Slider component
- * @param {number[]} [props.defaultValue] - The initial value of the slider
+ * @param {number | number[]} [props.defaultValue] - The initial value of the slider
  * @param {number} [props.min=0] - The minimum value of the slider
  * @param {number} [props.max=100] - The maximum value of the slider
  * @param {boolean} [props.showMinMax=true] - Whether to show min/max values below the slider
  * @param {string} [props.className] - Additional CSS classes to apply to the slider
- * @param {React.Ref<ComponentRef<typeof RadixSlider.Root>>} ref - Forwarded ref for the slider root element
  * @returns {JSX.Element} A slider component with optional tooltips and min/max display
  */
-const Slider = forwardRef(({ className, defaultValue, min, max, showMinMax = true, disabled: initialDisabled, ...props }, ref) => {
-    const [value, setValue] = useState(defaultValue ?? []);
+function Slider({ className, defaultValue, min = 0, max = 100, showMinMax = true, disabled: initialDisabled, onValueChange, ref, ...props }) {
+    const normalizedDefault = Array.isArray(defaultValue)
+        ? defaultValue
+        : defaultValue !== undefined
+            ? [defaultValue]
+            : [0];
+    const [value, setValue] = useState(normalizedDefault);
     const { disabled } = useFormContext({
         disabled: initialDisabled,
     });
-    return (_jsxs(_Fragment, { children: [_jsxs(RadixSlider.Root, { ref: ref, value: value, onValueChange: setValue, className: cn("relative flex w-full touch-none select-none items-center", className), disabled: disabled, ...props, children: [_jsx(RadixSlider.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-gray-700/20 data-[disabled]:opacity-50", children: _jsx(RadixSlider.Range, { className: "absolute h-full bg-gray-700" }) }), value.map((thumbValue, index) => (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: <only index is available>
-                    _jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(RadixSlider.Thumb, { className: "block h-4 w-4 rounded-full border border-gray-700 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-700 data-[disabled]:pointer-events-none" }) }), _jsx(TooltipContent, { children: _jsx("p", { children: thumbValue }) })] }, index)))] }), showMinMax && (_jsxs("div", { className: "mt-2 flex w-full flex-row justify-between", children: [_jsx("p", { children: min }), _jsx("p", { children: max })] }))] }));
-});
-Slider.displayName = RadixSlider.Root.displayName;
+    const handleValueChange = (newValue, event) => {
+        const normalizedValue = Array.isArray(newValue)
+            ? [...newValue]
+            : [newValue];
+        setValue(normalizedValue);
+        onValueChange?.(newValue, event);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(SliderPrimitive.Root, { ref: ref, value: value, onValueChange: handleValueChange, className: cn("relative flex w-full touch-none select-none flex-col items-center", className), disabled: disabled, min: min, max: max, ...props, children: _jsx(SliderPrimitive.Control, { className: "flex w-full items-center", children: _jsxs(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow rounded-full bg-gray-700/20 data-disabled:opacity-50", children: [_jsx(SliderPrimitive.Indicator, { className: "absolute h-full bg-gray-700" }), value.map((thumbValue, index) => (
+                            // biome-ignore lint/suspicious/noArrayIndexKey: index is the only stable identifier for thumbs
+                            _jsxs(Tooltip, { delayDuration: 0, children: [_jsx(TooltipTrigger, { render: _jsx(SliderPrimitive.Thumb, { index: index, className: "block h-4 w-4 rounded-full border border-gray-700 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-700 data-disabled:pointer-events-none" }) }), _jsx(TooltipContent, { children: _jsx("p", { children: thumbValue }) })] }, index)))] }) }) }), showMinMax && (_jsxs("div", { className: "mt-2 flex w-full flex-row justify-between", children: [_jsx("p", { children: min }), _jsx("p", { children: max })] }))] }));
+}
 export { Slider };
 //# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"/","sources":["components/slider/slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EACN,OAAO,EACP,cAAc,EACd,cAAc,GACd,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAGN,UAAU,EACV,QAAQ,GACR,MAAM,OAAO,CAAC;AAUf;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,GAAG,UAAU,CACxB,CACC,EACC,SAAS,EACT,YAAY,EACZ,GAAG,EACH,GAAG,EACH,UAAU,GAAG,IAAI,EACjB,QAAQ,EAAE,eAAe,EACzB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,YAAY,IAAI,EAAE,CAAC,CAAC;IACjE,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QACnC,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACN,8BACC,MAAC,WAAW,CAAC,IAAI,IAChB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,EAAE,CACZ,0DAA0D,EAC1D,SAAS,CACT,EACD,QAAQ,EAAE,QAAQ,KACd,KAAK,aAET,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAC,mGAAmG,YAC/H,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAC,6BAA6B,GAAG,GAC1C,EACnB,KAAK,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC;oBACjC,0EAA0E;oBAC1E,MAAC,OAAO,IAAa,aAAa,EAAE,CAAC,aACpC,KAAC,cAAc,IAAC,OAAO,kBACtB,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAC,qMAAqM,GAAG,GACrN,EACjB,KAAC,cAAc,cACd,sBAAI,UAAU,GAAK,GACH,KANJ,KAAK,CAOT,CACV,CAAC,IACgB,EAClB,UAAU,IAAI,CACd,eAAK,SAAS,EAAC,2CAA2C,aACzD,sBAAI,GAAG,GAAK,EACZ,sBAAI,GAAG,GAAK,IACP,CACN,IACC,CACH,CAAC;AACH,CAAC,CACD,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@components/tooltip/tooltip\";\nimport { cn } from \"@utilities/cn/cn\";\nimport { Slider as RadixSlider } from \"radix-ui\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tforwardRef,\n\tuseState,\n} from \"react\";\n\nexport type SliderProps = ComponentPropsWithoutRef<typeof RadixSlider.Root> & {\n\t/**\n\t * Whether to show the minimum and maximum values below the slider\n\t * @default true\n\t */\n\tshowMinMax?: boolean;\n};\n\n/**\n * A customizable slider component built on top of Radix UI's slider primitive.\n *\n * @example\n * ```tsx\n * <Slider\n *   min={0}\n *   max={100}\n *   defaultValue={[50]}\n *   showMinMax={true}\n * />\n * ```\n *\n * @param {Object} props - The props for the Slider component\n * @param {number[]} [props.defaultValue] - The initial value of the slider\n * @param {number} [props.min=0] - The minimum value of the slider\n * @param {number} [props.max=100] - The maximum value of the slider\n * @param {boolean} [props.showMinMax=true] - Whether to show min/max values below the slider\n * @param {string} [props.className] - Additional CSS classes to apply to the slider\n * @param {React.Ref<ComponentRef<typeof RadixSlider.Root>>} ref - Forwarded ref for the slider root element\n * @returns {JSX.Element} A slider component with optional tooltips and min/max display\n */\nconst Slider = forwardRef<ComponentRef<typeof RadixSlider.Root>, SliderProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdefaultValue,\n\t\t\tmin,\n\t\t\tmax,\n\t\t\tshowMinMax = true,\n\t\t\tdisabled: initialDisabled,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [value, setValue] = useState<number[]>(defaultValue ?? []);\n\t\tconst { disabled } = useFormContext({\n\t\t\tdisabled: initialDisabled,\n\t\t});\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<RadixSlider.Root\n\t\t\t\t\tref={ref}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tonValueChange={setValue}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"relative flex w-full touch-none select-none items-center\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<RadixSlider.Track className=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-gray-700/20 data-[disabled]:opacity-50\">\n\t\t\t\t\t\t<RadixSlider.Range className=\"absolute h-full bg-gray-700\" />\n\t\t\t\t\t</RadixSlider.Track>\n\t\t\t\t\t{value.map((thumbValue, index) => (\n\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: <only index is available>\n\t\t\t\t\t\t<Tooltip key={index} delayDuration={0}>\n\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t<RadixSlider.Thumb className=\"block h-4 w-4 rounded-full border border-gray-700 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-700 data-[disabled]:pointer-events-none\" />\n\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t\t<p>{thumbValue}</p>\n\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t))}\n\t\t\t\t</RadixSlider.Root>\n\t\t\t\t{showMinMax && (\n\t\t\t\t\t<div className=\"mt-2 flex w-full flex-row justify-between\">\n\t\t\t\t\t\t<p>{min}</p>\n\t\t\t\t\t\t<p>{max}</p>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t},\n);\nSlider.displayName = RadixSlider.Root.displayName;\n\nexport { Slider };\n"]}
+{"version":3,"file":"slider.js","sourceRoot":"/","sources":["components/slider/slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EACN,OAAO,EACP,cAAc,EACd,cAAc,GACd,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUjC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,MAAM,CAAC,EACf,SAAS,EACT,YAAY,EACZ,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,UAAU,GAAG,IAAI,EACjB,QAAQ,EAAE,eAAe,EACzB,aAAa,EACb,GAAG,EACH,GAAG,KAAK,EACK;IACb,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;QACpD,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,YAAY,KAAK,SAAS;YAC3B,CAAC,CAAC,CAAC,YAAY,CAAC;YAChB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAER,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,iBAAiB,CAAC,CAAC;IAChE,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;QACnC,QAAQ,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CACzB,QAAoC,EACpC,KAA8C,EAC7C,EAAE;QACH,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;YAC9C,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC;YACf,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QACd,QAAQ,CAAC,eAAe,CAAC,CAAC;QAC1B,aAAa,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACN,8BACC,KAAC,eAAe,CAAC,IAAI,IACpB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,iBAAiB,EAChC,SAAS,EAAE,EAAE,CACZ,mEAAmE,EACnE,SAAS,CACT,EACD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,KACJ,KAAK,YAET,KAAC,eAAe,CAAC,OAAO,IAAC,SAAS,EAAC,0BAA0B,YAC5D,MAAC,eAAe,CAAC,KAAK,IAAC,SAAS,EAAC,iFAAiF,aACjH,KAAC,eAAe,CAAC,SAAS,IAAC,SAAS,EAAC,6BAA6B,GAAG,EACpE,KAAK,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC;4BACjC,+FAA+F;4BAC/F,MAAC,OAAO,IAAa,aAAa,EAAE,CAAC,aACpC,KAAC,cAAc,IACd,MAAM,EACL,KAAC,eAAe,CAAC,KAAK,IACrB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,mMAAmM,GAC5M,GAEF,EACF,KAAC,cAAc,cACd,sBAAI,UAAU,GAAK,GACH,KAXJ,KAAK,CAYT,CACV,CAAC,IACqB,GACC,GACJ,EACtB,UAAU,IAAI,CACd,eAAK,SAAS,EAAC,2CAA2C,aACzD,sBAAI,GAAG,GAAK,EACZ,sBAAI,GAAG,GAAK,IACP,CACN,IACC,CACH,CAAC;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC","sourcesContent":["import { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipTrigger,\n} from \"@components/tooltip/tooltip\";\nimport { cn } from \"@utilities/cn/cn\";\nimport type { ComponentProps } from \"react\";\nimport { useState } from \"react\";\n\nexport type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {\n\t/**\n\t * Whether to show the minimum and maximum values below the slider\n\t * @default true\n\t */\n\tshowMinMax?: boolean;\n};\n\n/**\n * A customizable slider component built on top of Base UI's slider primitive.\n *\n * @example\n * ```tsx\n * <Slider\n *   min={0}\n *   max={100}\n *   defaultValue={50}\n *   showMinMax={true}\n * />\n * ```\n *\n * @param {Object} props - The props for the Slider component\n * @param {number | number[]} [props.defaultValue] - The initial value of the slider\n * @param {number} [props.min=0] - The minimum value of the slider\n * @param {number} [props.max=100] - The maximum value of the slider\n * @param {boolean} [props.showMinMax=true] - Whether to show min/max values below the slider\n * @param {string} [props.className] - Additional CSS classes to apply to the slider\n * @returns {JSX.Element} A slider component with optional tooltips and min/max display\n */\nfunction Slider({\n\tclassName,\n\tdefaultValue,\n\tmin = 0,\n\tmax = 100,\n\tshowMinMax = true,\n\tdisabled: initialDisabled,\n\tonValueChange,\n\tref,\n\t...props\n}: SliderProps) {\n\tconst normalizedDefault = Array.isArray(defaultValue)\n\t\t? defaultValue\n\t\t: defaultValue !== undefined\n\t\t\t? [defaultValue]\n\t\t\t: [0];\n\n\tconst [value, setValue] = useState<number[]>(normalizedDefault);\n\tconst { disabled } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t});\n\n\tconst handleValueChange = (\n\t\tnewValue: number | readonly number[],\n\t\tevent: SliderPrimitive.Root.ChangeEventDetails,\n\t) => {\n\t\tconst normalizedValue = Array.isArray(newValue)\n\t\t\t? [...newValue]\n\t\t\t: [newValue];\n\t\tsetValue(normalizedValue);\n\t\tonValueChange?.(newValue, event);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SliderPrimitive.Root\n\t\t\t\tref={ref}\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative flex w-full touch-none select-none flex-col items-center\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tmin={min}\n\t\t\t\tmax={max}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SliderPrimitive.Control className=\"flex w-full items-center\">\n\t\t\t\t\t<SliderPrimitive.Track className=\"relative h-1.5 w-full grow rounded-full bg-gray-700/20 data-disabled:opacity-50\">\n\t\t\t\t\t\t<SliderPrimitive.Indicator className=\"absolute h-full bg-gray-700\" />\n\t\t\t\t\t\t{value.map((thumbValue, index) => (\n\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: index is the only stable identifier for thumbs\n\t\t\t\t\t\t\t<Tooltip key={index} delayDuration={0}>\n\t\t\t\t\t\t\t\t<TooltipTrigger\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<SliderPrimitive.Thumb\n\t\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block h-4 w-4 rounded-full border border-gray-700 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-700 data-disabled:pointer-events-none\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t\t\t<p>{thumbValue}</p>\n\t\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</SliderPrimitive.Track>\n\t\t\t\t</SliderPrimitive.Control>\n\t\t\t</SliderPrimitive.Root>\n\t\t\t{showMinMax && (\n\t\t\t\t<div className=\"mt-2 flex w-full flex-row justify-between\">\n\t\t\t\t\t<p>{min}</p>\n\t\t\t\t\t<p>{max}</p>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport { Slider };\n"]}

package/dist/components/switch/switch.d.ts

@@ -1,12 +1,15 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import type { ResponsiveValue } from "../../utilities/responsive/responsive";
-import { Switch as RadixSwitch } from "radix-ui";
-export type SwitchProps = RadixSwitch.SwitchProps & {
+import type { Ref } from "react";
+export type SwitchProps = Omit<SwitchPrimitive.Root.Props, "className"> & {
     size?: ResponsiveValue<"small" | "medium" | "large">;
     error?: boolean;
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
 };
 /**
  * A switch component that toggles between on and off states.
- * Built on top of Radix UI's Switch primitive.
+ * Built on top of Base UI's Switch primitive.
  *
  * @param {SwitchProps} props - The props for the Switch component
  * @param {ResponsiveValue<"small" | "medium" | "large">} [props.size="medium"] - The size of the switch
@@ -35,7 +38,4 @@ export type SwitchProps = RadixSwitch.SwitchProps & {
  * @param {boolean} [props.disabled] - Whether the switch is disabled
  * @param {string} [props.className] - Additional CSS classes to apply
  */
-export declare const Switch: import("react").ForwardRefExoticComponent<RadixSwitch.SwitchProps & {
-    size?: ResponsiveValue<"small" | "medium" | "large">;
-    error?: boolean;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function Switch({ className, disabled: initialDisabled, size, error: initialError, ref, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/switch/switch.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 import { useFormContext } from "../form-field/form-field-context";
 import { getVariants } from "../../utilities/responsive/responsive";
-import { Switch as RadixSwitch } from "radix-ui";
-import { forwardRef } from "react";
 const thumbStyles = getVariants({
     slots: {
-        root: "relative flex cursor-pointer appearance-none items-center rounded-full bg-gray-500 transition-colors duration-500 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-light-blue-300 data-[state=checked]:bg-green-500",
-        thumb: "absolute left-1 h-5 w-5 rounded-full transition-transform duration-500 ease-out data-[state=checked]:translate-x-[1.125rem]",
+        root: "relative flex cursor-pointer appearance-none items-center rounded-full bg-gray-500 transition-colors duration-500 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-light-blue-300 data-[checked]:bg-green-500",
+        thumb: "absolute left-1 h-5 w-5 rounded-full transition-transform duration-500 ease-out data-[checked]:translate-x-[1.125rem]",
     },
     variants: {
         disabled: {
@@ -21,7 +20,7 @@ const thumbStyles = getVariants({
         },
         error: {
             true: {
-                root: "bg-red-600 data-[state=checked]:bg-red-600",
+                root: "bg-red-600 data-[checked]:bg-red-600",
                 thumb: "bg-red-600",
             },
         },
@@ -41,10 +40,10 @@ const thumbStyles = getVariants({
         },
     },
 });
-const { root, thumb } = thumbStyles;
+const { root, thumb } = thumbStyles();
 /**
  * A switch component that toggles between on and off states.
- * Built on top of Radix UI's Switch primitive.
+ * Built on top of Base UI's Switch primitive.
  *
  * @param {SwitchProps} props - The props for the Switch component
  * @param {ResponsiveValue<"small" | "medium" | "large">} [props.size="medium"] - The size of the switch
@@ -73,12 +72,11 @@ const { root, thumb } = thumbStyles;
  * @param {boolean} [props.disabled] - Whether the switch is disabled
  * @param {string} [props.className] - Additional CSS classes to apply
  */
-export const Switch = forwardRef(({ className, disabled: initialDisabled, size = "medium", error: initialError, ...props }, ref) => {
+export function Switch({ className, disabled: initialDisabled, size = "medium", error: initialError, ref, ...props }) {
     const { disabled, error } = useFormContext({
         disabled: initialDisabled,
         error: initialError,
     });
-    return (_jsx(RadixSwitch.Root, { className: root({ disabled, size, error, className }), disabled: disabled, ...props, ref: ref, children: _jsx(RadixSwitch.Thumb, { className: thumb({ disabled, size }) }) }));
-});
-Switch.displayName = "Switch";
+    return (_jsx(SwitchPrimitive.Root, { className: root({ disabled, size, error, className }), disabled: disabled, ...props, ref: ref, children: _jsx(SwitchPrimitive.Thumb, { className: thumb({ disabled, size }) }) }));
+}
 //# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"/","sources":["components/switch/switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAE3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAqB,UAAU,EAAE,MAAM,OAAO,CAAC;AAOtD,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,KAAK,EAAE;QACN,IAAI,EAAE,wOAAwO;QAC9O,KAAK,EACJ,6HAA6H;KAC9H;IACD,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,IAAI,EAAE,+BAA+B;gBACrC,KAAK,EAAE,aAAa;aACpB;YACD,KAAK,EAAE;gBACN,IAAI,EAAE,4BAA4B;gBAClC,KAAK,EAAE,UAAU;aACjB;SACD;QACD,KAAK,EAAE;YACN,IAAI,EAAE;gBACL,IAAI,EAAE,4CAA4C;gBAClD,KAAK,EAAE,YAAY;aACnB;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;aAChB;YACD,MAAM,EAAE;gBACP,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;aAChB;YACD,KAAK,EAAE;gBACN,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;aAChB;SACD;KACD;CACD,CAAC,CAAC;AAEH,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAI/B,CACC,EACC,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,IAAI,GAAG,QAAQ,EACf,KAAK,EAAE,YAAY,EACnB,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC;QAC1C,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,YAAY;KACnB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,WAAW,CAAC,IAAI,IAChB,SAAS,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACrD,QAAQ,EAAE,QAAQ,KACd,KAAK,EACT,GAAG,EAAE,GAAG,YAER,KAAC,WAAW,CAAC,KAAK,IAAC,SAAS,EAAE,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,GAAI,GACzC,CACnB,CAAC;AACH,CAAC,CACD,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import { useFormContext } from \"@components/form-field/form-field-context\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport { Switch as RadixSwitch } from \"radix-ui\";\nimport { type ComponentRef, forwardRef } from \"react\";\n\nexport type SwitchProps = RadixSwitch.SwitchProps & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\terror?: boolean;\n};\n\nconst thumbStyles = getVariants({\n\tslots: {\n\t\troot: \"relative flex cursor-pointer appearance-none items-center rounded-full bg-gray-500 transition-colors duration-500 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-light-blue-300 data-[state=checked]:bg-green-500\",\n\t\tthumb:\n\t\t\t\"absolute left-1 h-5 w-5 rounded-full transition-transform duration-500 ease-out data-[state=checked]:translate-x-[1.125rem]\",\n\t},\n\tvariants: {\n\t\tdisabled: {\n\t\t\ttrue: {\n\t\t\t\troot: \"cursor-not-allowed opacity-50\",\n\t\t\t\tthumb: \"bg-gray-300\",\n\t\t\t},\n\t\t\tfalse: {\n\t\t\t\troot: \"cursor-pointer opacity-100\",\n\t\t\t\tthumb: \"bg-white\",\n\t\t\t},\n\t\t},\n\t\terror: {\n\t\t\ttrue: {\n\t\t\t\troot: \"bg-red-600 data-[state=checked]:bg-red-600\",\n\t\t\t\tthumb: \"bg-red-600\",\n\t\t\t},\n\t\t},\n\t\tsize: {\n\t\t\tsmall: {\n\t\t\t\troot: \"h-5 w-10\",\n\t\t\t\tthumb: \"h-3 w-3\",\n\t\t\t},\n\t\t\tmedium: {\n\t\t\t\troot: \"h-7 w-12\",\n\t\t\t\tthumb: \"h-5 w-5\",\n\t\t\t},\n\t\t\tlarge: {\n\t\t\t\troot: \"h-9 w-14\",\n\t\t\t\tthumb: \"h-7 w-7\",\n\t\t\t},\n\t\t},\n\t},\n});\n\nconst { root, thumb } = thumbStyles;\n\n/**\n * A switch component that toggles between on and off states.\n * Built on top of Radix UI's Switch primitive.\n *\n * @param {SwitchProps} props - The props for the Switch component\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the switch\n * @param {boolean} [props.disabled] - Whether the switch is disabled\n * @param {string} [props.className] - Additional CSS classes to apply\n *\n * @example\n * // Basic usage\n * <Switch />\n *\n * @example\n * // With different sizes\n * <Switch size=\"small\" />\n * <Switch size=\"medium\" />\n * <Switch size=\"large\" />\n *\n * @example\n * // Disabled state\n * <Switch disabled />\n *\n * @example\n * // With onChange handler\n * <Switch onCheckedChange={(checked) => console.log(checked)} />\n *\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the switch\n * @param {boolean} [props.disabled] - Whether the switch is disabled\n * @param {string} [props.className] - Additional CSS classes to apply\n */\nexport const Switch = forwardRef<\n\tComponentRef<typeof RadixSwitch.Root>,\n\tSwitchProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdisabled: initialDisabled,\n\t\t\tsize = \"medium\",\n\t\t\terror: initialError,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst { disabled, error } = useFormContext({\n\t\t\tdisabled: initialDisabled,\n\t\t\terror: initialError,\n\t\t});\n\t\treturn (\n\t\t\t<RadixSwitch.Root\n\t\t\t\tclassName={root({ disabled, size, error, className })}\n\t\t\t\tdisabled={disabled}\n\t\t\t\t{...props}\n\t\t\t\tref={ref}\n\t\t\t>\n\t\t\t\t<RadixSwitch.Thumb className={thumb({ disabled, size })} />\n\t\t\t</RadixSwitch.Root>\n\t\t);\n\t},\n);\n\nSwitch.displayName = \"Switch\";\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"/","sources":["components/switch/switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAE3E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAU/D,MAAM,WAAW,GAAG,WAAW,CAAC;IAC/B,KAAK,EAAE;QACN,IAAI,EAAE,kOAAkO;QACxO,KAAK,EACJ,uHAAuH;KACxH;IACD,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE;gBACL,IAAI,EAAE,+BAA+B;gBACrC,KAAK,EAAE,aAAa;aACpB;YACD,KAAK,EAAE;gBACN,IAAI,EAAE,4BAA4B;gBAClC,KAAK,EAAE,UAAU;aACjB;SACD;QACD,KAAK,EAAE;YACN,IAAI,EAAE;gBACL,IAAI,EAAE,sCAAsC;gBAC5C,KAAK,EAAE,YAAY;aACnB;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;aAChB;YACD,MAAM,EAAE;gBACP,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;aAChB;YACD,KAAK,EAAE;gBACN,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;aAChB;SACD;KACD;CACD,CAAC,CAAC;AAEH,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,MAAM,CAAC,EACtB,SAAS,EACT,QAAQ,EAAE,eAAe,EACzB,IAAI,GAAG,QAAQ,EACf,KAAK,EAAE,YAAY,EACnB,GAAG,EACH,GAAG,KAAK,EACK;IACb,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC;QAC1C,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,YAAY;KACnB,CAAC,CAAC;IACH,OAAO,CACN,KAAC,eAAe,CAAC,IAAI,IACpB,SAAS,EAAE,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EACrD,QAAQ,EAAE,QAAQ,KACd,KAAK,EACT,GAAG,EAAE,GAAG,YAER,KAAC,eAAe,CAAC,KAAK,IAAC,SAAS,EAAE,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,GAAI,GACzC,CACvB,CAAC;AACH,CAAC","sourcesContent":["import { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\nimport { useFormContext } from \"@components/form-field/form-field-context\";\nimport type { ResponsiveValue } from \"@utilities/responsive/responsive\";\nimport { getVariants } from \"@utilities/responsive/responsive\";\nimport type { Ref } from \"react\";\n\nexport type SwitchProps = Omit<SwitchPrimitive.Root.Props, \"className\"> & {\n\tsize?: ResponsiveValue<\"small\" | \"medium\" | \"large\">;\n\terror?: boolean;\n\tclassName?: string;\n\tref?: Ref<HTMLButtonElement>;\n};\n\nconst thumbStyles = getVariants({\n\tslots: {\n\t\troot: \"relative flex cursor-pointer appearance-none items-center rounded-full bg-gray-500 transition-colors duration-500 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-light-blue-300 data-[checked]:bg-green-500\",\n\t\tthumb:\n\t\t\t\"absolute left-1 h-5 w-5 rounded-full transition-transform duration-500 ease-out data-[checked]:translate-x-[1.125rem]\",\n\t},\n\tvariants: {\n\t\tdisabled: {\n\t\t\ttrue: {\n\t\t\t\troot: \"cursor-not-allowed opacity-50\",\n\t\t\t\tthumb: \"bg-gray-300\",\n\t\t\t},\n\t\t\tfalse: {\n\t\t\t\troot: \"cursor-pointer opacity-100\",\n\t\t\t\tthumb: \"bg-white\",\n\t\t\t},\n\t\t},\n\t\terror: {\n\t\t\ttrue: {\n\t\t\t\troot: \"bg-red-600 data-[checked]:bg-red-600\",\n\t\t\t\tthumb: \"bg-red-600\",\n\t\t\t},\n\t\t},\n\t\tsize: {\n\t\t\tsmall: {\n\t\t\t\troot: \"h-5 w-10\",\n\t\t\t\tthumb: \"h-3 w-3\",\n\t\t\t},\n\t\t\tmedium: {\n\t\t\t\troot: \"h-7 w-12\",\n\t\t\t\tthumb: \"h-5 w-5\",\n\t\t\t},\n\t\t\tlarge: {\n\t\t\t\troot: \"h-9 w-14\",\n\t\t\t\tthumb: \"h-7 w-7\",\n\t\t\t},\n\t\t},\n\t},\n});\n\nconst { root, thumb } = thumbStyles();\n\n/**\n * A switch component that toggles between on and off states.\n * Built on top of Base UI's Switch primitive.\n *\n * @param {SwitchProps} props - The props for the Switch component\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the switch\n * @param {boolean} [props.disabled] - Whether the switch is disabled\n * @param {string} [props.className] - Additional CSS classes to apply\n *\n * @example\n * // Basic usage\n * <Switch />\n *\n * @example\n * // With different sizes\n * <Switch size=\"small\" />\n * <Switch size=\"medium\" />\n * <Switch size=\"large\" />\n *\n * @example\n * // Disabled state\n * <Switch disabled />\n *\n * @example\n * // With onChange handler\n * <Switch onCheckedChange={(checked) => console.log(checked)} />\n *\n * @param {ResponsiveValue<\"small\" | \"medium\" | \"large\">} [props.size=\"medium\"] - The size of the switch\n * @param {boolean} [props.disabled] - Whether the switch is disabled\n * @param {string} [props.className] - Additional CSS classes to apply\n */\nexport function Switch({\n\tclassName,\n\tdisabled: initialDisabled,\n\tsize = \"medium\",\n\terror: initialError,\n\tref,\n\t...props\n}: SwitchProps) {\n\tconst { disabled, error } = useFormContext({\n\t\tdisabled: initialDisabled,\n\t\terror: initialError,\n\t});\n\treturn (\n\t\t<SwitchPrimitive.Root\n\t\t\tclassName={root({ disabled, size, error, className })}\n\t\t\tdisabled={disabled}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t<SwitchPrimitive.Thumb className={thumb({ disabled, size })} />\n\t\t</SwitchPrimitive.Root>\n\t);\n}\n"]}

package/dist/components/table/table.d.ts

@@ -1,33 +1,42 @@
+import type { ComponentProps } from "react";
 /**
  * Table
  */
-declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
+export type TableProps = ComponentProps<"table">;
+declare function Table({ className, ref, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TableHeader
  */
-declare const TableHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export type TableHeaderProps = ComponentProps<"thead">;
+declare function TableHeader({ className, ref, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TableBody
  */
-declare const TableBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export type TableBodyProps = ComponentProps<"tbody">;
+declare function TableBody({ className, ref, ...props }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TableFooter
  */
-declare const TableFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export type TableFooterProps = ComponentProps<"tfoot">;
+declare function TableFooter({ className, ref, ...props }: TableFooterProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TableRow
  */
-declare const TableRow: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
+export type TableRowProps = ComponentProps<"tr">;
+declare function TableRow({ className, ref, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TableHead
  */
-declare const TableHead: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & import("react").RefAttributes<HTMLTableHeaderCellElement>>;
+export type TableHeadProps = ComponentProps<"th">;
+declare function TableHead({ className, ref, ...props }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TableCell
  */
-declare const TableCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & import("react").RefAttributes<HTMLTableDataCellElement>>;
+export type TableCellProps = ComponentProps<"td">;
+declare function TableCell({ className, ref, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TableCaption
  */
-declare const TableCaption: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export type TableCaptionProps = ComponentProps<"caption">;
+declare function TableCaption({ className, ref, ...props }: TableCaptionProps): import("react/jsx-runtime").JSX.Element;
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/components/table/table.js

@@ -1,45 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../utilities/cn/cn";
-import { forwardRef } from "react";
-/**
- * Table
- */
-const Table = forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", { ref: ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })));
-Table.displayName = "Table";
-/**
- * TableHeader
- */
-const TableHeader = forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("[&_tr]:border-b [&_tr]:bg-gray-700! [&_tr]:text-white [&_tr]:hover:bg-gray-700! [&_tr]:hover:text-white!", className), ...props })));
-TableHeader.displayName = "TableHeader";
-/**
- * TableBody
- */
-const TableBody = forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn("[&_tr:last-child]:border-0", className), ...props })));
-TableBody.displayName = "TableBody";
-/**
- * TableFooter
- */
-const TableFooter = forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn("border-t bg-gray-100 font-medium [&>tr]:bg-gray-100! [&>tr]:text-gray-700! [&>tr]:last:border-b-0", className), ...props })));
-TableFooter.displayName = "TableFooter";
-/**
- * TableRow
- */
-const TableRow = forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b transition-colors hover:bg-gray-400 hover:text-white data-[state=selected]:bg-gray-500 data-[state=selected]:text-white", className), ...props })));
-TableRow.displayName = "TableRow";
-/**
- * TableHead
- */
-const TableHead = forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props })));
-TableHead.displayName = "TableHead";
-/**
- * TableCell
- */
-const TableCell = forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props })));
-TableCell.displayName = "TableCell";
-/**
- * TableCaption
- */
-const TableCaption = forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn("mt-4 text-start text-gray-500 text-sm", className), ...props })));
-TableCaption.displayName = "TableCaption";
+function Table({ className, ref, ...props }) {
+    return (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", { ref: ref, className: cn("w-full caption-bottom text-sm", className), ...props }) }));
+}
+function TableHeader({ className, ref, ...props }) {
+    return (_jsx("thead", { ref: ref, className: cn("[&_tr]:border-b [&_tr]:bg-gray-700! [&_tr]:text-white [&_tr]:hover:bg-gray-700! [&_tr]:hover:text-white!", className), ...props }));
+}
+function TableBody({ className, ref, ...props }) {
+    return (_jsx("tbody", { ref: ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+}
+function TableFooter({ className, ref, ...props }) {
+    return (_jsx("tfoot", { ref: ref, className: cn("border-t bg-gray-100 font-medium [&>tr]:bg-gray-100! [&>tr]:text-gray-700! [&>tr]:last:border-b-0", className), ...props }));
+}
+function TableRow({ className, ref, ...props }) {
+    return (_jsx("tr", { ref: ref, className: cn("border-b transition-colors hover:bg-gray-400 hover:text-white data-[state=selected]:bg-gray-500 data-[state=selected]:text-white", className), ...props }));
+}
+function TableHead({ className, ref, ...props }) {
+    return (_jsx("th", { ref: ref, className: cn("h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+}
+function TableCell({ className, ref, ...props }) {
+    return (_jsx("td", { ref: ref, className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+}
+function TableCaption({ className, ref, ...props }) {
+    return (_jsx("caption", { ref: ref, className: cn("mt-4 text-start text-gray-500 text-sm", className), ...props }));
+}
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
 //# sourceMappingURL=table.js.map