@locusgraph/components 0.1.0 → 0.2.0

package/dist/display/status/spinner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { InProgress as Loader2Icon } from "@carbon/icons-react";
 import { cn } from "cn";
-import { Loader2Icon } from "lucide-react";
 function Spinner({ className, ...props }) {
     return (_jsx(Loader2Icon, { role: "status", "aria-label": "Loading", className: cn("size-4 animate-spin", className), ...props }));
 }

package/dist/display/table.js

@@ -16,7 +16,7 @@ function TableRow({ className, ...props }) {
     return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors duration-150 ease-out hover:bg-muted/40 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
 }
 function TableHead({ className, ...props }) {
-    return (_jsx("th", { "data-slot": "table-head", className: cn("h-9 px-3 text-left align-middle font-mono sm:px-4 text-[11.5px] font-normal whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+    return (_jsx("th", { "data-slot": "table-head", className: cn("eyebrow h-9 px-3 text-left align-middle font-normal whitespace-nowrap sm:px-4 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
 }
 function TableCell({ className, ...props }) {
     return (_jsx("td", { "data-slot": "table-cell", className: cn("px-3 py-2.5 align-middle whitespace-nowrap tabular-nums sm:px-4 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));

package/dist/feedback/toaster.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
 import { type ToasterProps } from "sonner";
-declare function Toaster({ theme, ...props }: ToasterProps): React.JSX.Element;
+declare function Toaster({ theme, toastOptions, ...props }: ToasterProps): React.JSX.Element;
 export { toast } from "sonner";
 export { Toaster };

package/dist/feedback/toaster.js

@@ -1,26 +1,24 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, } from "lucide-react";
+import { CheckmarkOutline as CircleCheckIcon, Information as InfoIcon, InProgress as Loader2Icon, ErrorOutline as OctagonXIcon, WarningAlt as TriangleAlertIcon, } from "@carbon/icons-react";
 import { Toaster as Sonner } from "sonner";
-function statusColors(type, color) {
-    return {
-        [`--${type}-bg`]: `color-mix(in srgb, var(${color}) 8%, var(--popover))`,
-        [`--${type}-border`]: `color-mix(in srgb, var(${color}) 30%, var(--popover))`,
-        [`--${type}-text`]: `var(${color})`,
-    };
-}
 const toasterColors = {
     "--normal-bg": "var(--popover)",
     "--normal-text": "var(--popover-foreground)",
     "--normal-border": "var(--border)",
     "--border-radius": "var(--radius)",
-    ...statusColors("success", "--good"),
-    ...statusColors("info", "--info"),
-    ...statusColors("warning", "--warn"),
-    ...statusColors("error", "--bad"),
 };
-function Toaster({ theme = "system", ...props }) {
-    return (_jsx(Sonner, { theme: theme, richColors: true, className: "toaster group", icons: {
+const statusRuleClassNames = {
+    success: "border-l-2! border-l-good! [&_[data-icon]]:text-good",
+    info: "border-l-2! border-l-info! [&_[data-icon]]:text-info",
+    warning: "border-l-2! border-l-warn! [&_[data-icon]]:text-warn",
+    error: "border-l-2! border-l-destructive! [&_[data-icon]]:text-destructive",
+};
+function Toaster({ theme = "system", toastOptions, ...props }) {
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", toastOptions: {
+            ...toastOptions,
+            classNames: { ...statusRuleClassNames, ...toastOptions?.classNames },
+        }, icons: {
             success: _jsx(CircleCheckIcon, { className: "size-4" }),
             info: _jsx(InfoIcon, { className: "size-4" }),
             warning: _jsx(TriangleAlertIcon, { className: "size-4" }),

package/dist/form/advanced/calendar-day-button.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "cn";
 import * as React from "react";
 import { getDefaultClassNames } from "react-day-picker";
-import { Button } from "../../action/button";
+import { Button } from "../../action/button.js";
 function CalendarDayButton({ className, day, modifiers, ...props }) {
     const defaultClassNames = getDefaultClassNames();
     const ref = React.useRef(null);
@@ -14,6 +14,6 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
     return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
             !modifiers.range_start &&
             !modifiers.range_end &&
-            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-2 group-data-[focused=true]/day:ring-ring/70 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:rounded-none data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
 }
 export { CalendarDayButton };

package/dist/form/advanced/calendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DayPicker } from "react-day-picker";
-import { Button } from "../../action/button";
+import { Button } from "../../action/button.js";
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }): React.JSX.Element;

package/dist/form/advanced/calendar.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronDown as ChevronDownIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, } from "@carbon/icons-react";
 import { cn } from "cn";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
-import { buttonVariants } from "../../action/button";
-import { CalendarDayButton } from "./calendar-day-button";
+import { buttonVariants } from "../../action/button.js";
+import { CalendarDayButton } from "./calendar-day-button.js";
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
     return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
@@ -19,17 +19,17 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
             month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
             dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
-            dropdown_root: cn("relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50", defaultClassNames.dropdown_root),
+            dropdown_root: cn("relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-1 has-focus:ring-ring", defaultClassNames.dropdown_root),
             dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
             caption_label: cn("font-medium select-none", captionLayout === "label"
                 ? "text-sm"
                 : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
             month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
             weekdays: cn("flex", defaultClassNames.weekdays),
-            weekday: cn("flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+            weekday: cn("flex-1 rounded-md text-xs font-normal text-muted-foreground select-none", defaultClassNames.weekday),
             week: cn("mt-2 flex w-full", defaultClassNames.week),
             week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
-            week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+            week_number: cn("text-xs text-muted-foreground select-none", defaultClassNames.week_number),
             day: cn("group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md", props.showWeekNumber
                 ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
                 : "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),

package/dist/form/advanced/combobox/combobox-chips.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+import { Close as XIcon } from "@carbon/icons-react";
 import { cn } from "cn";
-import { XIcon } from "lucide-react";
 import * as React from "react";
-import { Button } from "../../../action/button";
+import { Button } from "../../../action/button.js";
 function ComboboxChips({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
+    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-1 focus-within:ring-ring has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
 }
 function ComboboxChip({ className, children, showRemove = true, ...props }) {
     return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));

package/dist/form/advanced/combobox/combobox-items.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+import { Checkmark as CheckIcon } from "@carbon/icons-react";
 import { cn } from "cn";
-import { CheckIcon } from "lucide-react";
 function ComboboxItem({ className, children, ...props }) {
     return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { "data-slot": "combobox-item-indicator", render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none size-4 pointer-coarse:size-5" }) })] }));
 }
@@ -10,7 +10,7 @@ function ComboboxGroup({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props }));
 }
 function ComboboxLabel({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm", className), ...props }));
+    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn("eyebrow px-2 pt-2 pb-1 pointer-coarse:px-3", className), ...props }));
 }
 function ComboboxCollection({ ...props }) {
     return _jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });

package/dist/form/advanced/combobox/combobox.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+import { ChevronDown as ChevronDownIcon, Close as XIcon } from "@carbon/icons-react";
 import { cn } from "cn";
-import { ChevronDownIcon, XIcon } from "lucide-react";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../../input-group";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../../input-group.js";
 const Combobox = ComboboxPrimitive.Root;
 function ComboboxValue({ ...props }) {
     return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
@@ -18,7 +18,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
     return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", asChild: true, "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled, children: _jsx(ComboboxTrigger, {}) })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
 }
 function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
-    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) 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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-overlay ring-1 ring-border duration-100 data-[chips=true]:min-w-(--anchor-width) 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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-overlay data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
 }
 function ComboboxList({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0", className), ...props }));

package/dist/form/advanced/input-otp.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Subtract as MinusIcon } from "@carbon/icons-react";
 import { cn } from "cn";
 import { OTPInput, OTPInputContext } from "input-otp";
-import { MinusIcon } from "lucide-react";
 import * as React from "react";
 function InputOTP({ className, containerClassName, ...props }) {
     return (_jsx(OTPInput, { "data-slot": "input-otp", containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName), className: cn("disabled:cursor-not-allowed", className), ...props }));
@@ -13,7 +13,7 @@ function InputOTPGroup({ className, ...props }) {
 function InputOTPSlot({ index, className, ...props }) {
     const inputOTPContext = React.useContext(OTPInputContext);
     const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
-    return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn("relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-[color,background-color,border-color,box-shadow] duration-150 ease-out outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) }))] }));
+    return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn("relative flex h-9 w-9 items-center justify-center border-y border-r border-input font-mono text-base tabular-nums shadow-xs transition-[color,background-color,border-color,box-shadow] duration-150 ease-out outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-1 data-[active=true]:ring-ring data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) }))] }));
 }
 function InputOTPSeparator({ ...props }) {
     return (_jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: _jsx(MinusIcon, {}) }));

package/dist/form/choice/checkbox.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkmark as CheckIcon, Subtract as MinusIcon } from "@carbon/icons-react";
 import { cn } from "cn";
-import { CheckIcon } from "lucide-react";
 import * as CheckboxPrimitive from "radix-ui/checkbox";
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer size-4 shrink-0 rounded-none border border-input shadow-xs transition-shadow outline-none", "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", "focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer size-4 shrink-0 rounded-none border border-input shadow-xs transition-shadow outline-none", "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground", "focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsxs(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "group/indicator flex items-center justify-center text-current", children: [_jsx(CheckIcon, { className: "size-3.5 group-data-[state=indeterminate]/indicator:hidden" }), _jsx(MinusIcon, { className: "hidden size-3.5 group-data-[state=indeterminate]/indicator:block" })] }) }));
 }
 export { Checkbox };

package/dist/form/choice/radio-group.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleSolid as CircleIcon } from "@carbon/icons-react";
 import { cn } from "cn";
-import { CircleIcon } from "lucide-react";
 import * as RadioGroupPrimitive from "radix-ui/radio-group";
 function RadioGroup({ className, ...props }) {
     return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn("grid gap-3", className), ...props }));
 }
 function RadioGroupItem({ className, ...props }) {
-    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn("aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(CircleIcon, { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" }) }) }));
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn("peer aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(CircleIcon, { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" }) }) }));
 }
 export { RadioGroup, RadioGroupItem };

package/dist/form/choice/select.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkmark as CheckIcon, ChevronDown as ChevronDownIcon, ChevronUp as ChevronUpIcon, } from "@carbon/icons-react";
 import { cn } from "cn";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import * as SelectPrimitive from "radix-ui/select";
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
@@ -13,15 +13,15 @@ function SelectValue({ ...props }) {
     return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "size-4 text-muted-foreground" }) })] }));
 }
 function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", position === "popper" &&
-                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-overlay ring-1 ring-border 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", position === "popper" &&
+                "data-[side=bottom]:translate-y-1.5 data-[side=left]:-translate-x-1.5 data-[side=right]:translate-x-1.5 data-[side=top]:-translate-y-1.5", className), position: position, align: align, ...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)] scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("eyebrow px-2 pt-2 pb-1", className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
     return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));

package/dist/form/choice/slider.js

@@ -5,6 +5,6 @@ import * as SliderPrimitive from "radix-ui/slider";
 import * as React from "react";
 function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
     const _values = React.useMemo(() => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]), [value, defaultValue, min, max]);
-    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" }, index)))] }));
+    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("relative grow overflow-hidden rounded-full bg-input data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm transition-[color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" }, index)))] }));
 }
 export { Slider };

package/dist/form/choice/switch.js

@@ -3,6 +3,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "cn";
 import * as SwitchPrimitive from "radix-ui/switch";
 function Switch({ className, ...props }) {
-    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent transition-all outline-none", "data-[state=checked]:bg-primary data-[state=unchecked]:bg-ghost", "focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn("pointer-events-none block size-4 rounded-full bg-surface ring-0 transition-transform", "data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0") }) }));
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent px-px transition-all outline-none", "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", "focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn("pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform", "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0") }) }));
 }
 export { Switch };

package/dist/form/field/field-separator.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "cn";
-import { Separator } from "../../display/separator";
+import { Separator } from "../../display/separator.js";
 function FieldSeparator({ children, className, ...props }) {
     return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
 }

package/dist/form/field/field-text.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import { Label } from "../label";
+import { Label } from "../label.js";
 declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): React.JSX.Element;
 declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;

package/dist/form/field/field-text.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "cn";
-import { Label } from "../label";
+import { Label } from "../label.js";
 function FieldLabel({ className, ...props }) {
     return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10", className), ...props }));
 }

package/dist/form/field/field.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "cn";
-const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+const fieldVariants = cva("group/field flex w-full gap-3", {
     variants: {
         orientation: {
-            vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+            vertical: ["flex-col gap-2 [&>*]:w-full [&>.sr-only]:w-auto"],
             horizontal: [
                 "flex-row items-center",
                 "[&>[data-slot=field-label]]:flex-auto",
                 "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
             ],
             responsive: [
-                "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+                "flex-col gap-2 @md/field-group:flex-row @md/field-group:gap-3 @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
                 "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
                 "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
             ],

package/dist/form/hook-form/form.js

@@ -4,7 +4,7 @@ import { cn } from "cn";
 import * as Slot from "radix-ui/slot";
 import * as React from "react";
 import { Controller, FormProvider, useFormContext, useFormState, } from "react-hook-form";
-import { Label } from "../label";
+import { Label } from "../label.js";
 const Form = FormProvider;
 const FormFieldContext = React.createContext({});
 const FormField = ({ ...props }) => {
@@ -36,7 +36,7 @@ function FormItem({ className, ...props }) {
 }
 function FormLabel({ className, ...props }) {
     const { error, formItemId } = useFormField();
-    return (_jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive", className), htmlFor: formItemId, ...props }));
+    return (_jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: className, htmlFor: formItemId, ...props }));
 }
 function FormControl({ ...props }) {
     const { error, formItemId, formDescriptionId, formMessageId } = useFormField();

package/dist/form/input-group.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-import { Button } from "../action/button";
+import { Button } from "../action/button.js";
 declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;

package/dist/form/input-group.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "cn";
-import { Button } from "../action/button";
-import { Input } from "./input";
-import { Textarea } from "./textarea";
+import { Button } from "../action/button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
 const inputGroupAlignmentClasses = [
     "has-[>[data-align=inline-start]]:[&>input]:pl-2",
     "has-[>[data-align=inline-end]]:[&>input]:pr-2",
@@ -40,10 +40,10 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
     variants: {
         size: {
-            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-            sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-            "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-            "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+            xs: "h-6 gap-1 rounded-full px-2.5 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: "h-8 gap-1.5 rounded-full px-3 has-[>svg]:px-2.5",
+            "icon-xs": "size-6 rounded-full p-0 has-[>svg]:p-0",
+            "icon-sm": "size-8 rounded-full p-0 has-[>svg]:p-0",
         },
     },
     defaultVariants: {

package/dist/form/native-select.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown as ChevronDownIcon } from "@carbon/icons-react";
 import { cn } from "cn";
-import { ChevronDownIcon } from "lucide-react";
 function NativeSelect({ className, size = "default", ...props }) {
-    return (_jsxs("div", { className: "group/native-select relative w-fit has-[select:disabled]:opacity-50", "data-slot": "native-select-wrapper", children: [_jsx("select", { "data-slot": "native-select", "data-size": size, className: cn("h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50", "focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className), ...props }), _jsx(ChevronDownIcon, { className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground opacity-50 select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
+    return (_jsxs("div", { className: "group/native-select relative w-fit has-[select:disabled]:opacity-50", "data-slot": "native-select-wrapper", children: [_jsx("select", { "data-slot": "native-select", "data-size": size, className: cn("h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground has-[option[value='']:checked]:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50", "focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className), ...props }), _jsx(ChevronDownIcon, { className: "pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
 }
 function NativeSelectOption({ className, ...props }) {
     return (_jsx("option", { "data-slot": "native-select-option", className: cn("bg-[Canvas] text-[CanvasText]", className), ...props }));