@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.3

package/components/ui/admin-dialog.js

@@ -22,10 +22,10 @@ export function AdminMonoMeta({ className, ...props }) {
     return (_jsx("span", { className: cn("text-2xs font-mono text-muted/70", className), ...props }));
 }
 export const AdminInput = forwardRef(function AdminInput({ className, ...props }, ref) {
-    return (_jsx(Input, { ref: ref, className: cn("h-10 w-full rounded-sm border border-border bg-card px-3 text-sm font-mono text-txt transition-colors placeholder:text-muted/60 focus-visible:ring-accent", className), ...props }));
+    return (_jsx(Input, { ref: ref, className: cn("h-10 w-full rounded-sm border border-border bg-card px-3 text-sm font-mono text-txt transition-colors placeholder:text-muted/60 ", className), ...props }));
 });
 export function AdminCodeEditor({ className, ...props }) {
-    return (_jsx("textarea", { className: cn("h-full w-full resize-none border-0 bg-bg-hover p-5 font-mono text-sm leading-relaxed text-txt focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-inset", className), ...props }));
+    return (_jsx("textarea", { className: cn("h-full w-full resize-none border-0 bg-bg-hover p-5 font-mono text-sm leading-relaxed text-txt    ", className), ...props }));
 }
 export function AdminSegmentedTabList({ className, ...props }) {
     return _jsx("div", { className: cn("flex bg-bg-accent/35", className), ...props });

package/components/ui/badge.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
-const badgeVariants = cva("inline-flex items-center rounded-sm border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+const badgeVariants = cva("inline-flex items-center rounded-sm border px-2.5 py-0.5 text-xs font-semibold transition-colors    ", {
     variants: {
         variant: {
             default: "border-transparent bg-primary text-primary-fg hover:bg-primary/80",

package/components/ui/button.js

@@ -3,7 +3,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium ring-offset-bg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium  transition-colors     disabled:pointer-events-none disabled:opacity-50 cursor-pointer [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
     variants: {
         variant: {
             default: "bg-accent text-accent-fg hover:bg-accent-hover",

package/components/ui/calendar.d.ts

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

package/components/ui/calendar.js

@@ -23,7 +23,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next),
             month_caption: cn("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption),
             dropdowns: cn("w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns),
-            dropdown_root: cn("relative has-focus:border-ring border border-input has-focus:ring-ring/50 has-focus:ring-[3px] rounded-sm", defaultClassNames.dropdown_root),
+            dropdown_root: cn("relative  border border-input   rounded-sm", defaultClassNames.dropdown_root),
             dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
             caption_label: cn("select-none font-medium", captionLayout === "label"
                 ? "text-sm"
@@ -70,9 +70,9 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
         if (modifiers.focused)
             ref.current?.focus();
     }, [modifiers.focused]);
-    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString("en-US"), "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("data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground 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-[3px] data-[range-end=true]:rounded-sm data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-sm data-[range-start=true]:rounded-l-md [&>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("data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring  dark:hover:text-accent-foreground 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  data-[range-end=true]:rounded-sm data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-sm data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
 }
 export { Calendar, CalendarDayButton };

package/components/ui/carousel.d.ts

@@ -4,7 +4,7 @@
  */
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
 import * as React from "react";
-import { Button } from "./button";
+import { Button } from "./button.js";
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];

package/components/ui/chart.js

@@ -93,7 +93,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
                                     }), style: {
                                         "--color-bg": indicatorColor,
                                         "--color-border": indicatorColor,
-                                    } }))), _jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value && (_jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() }))] })] })) }, item.dataKey));
+                                    } }))), _jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })] }), item.value && (_jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString("en-US") }))] })] })) }, item.dataKey));
                 }) })] }));
 }
 const ChartLegend = RechartsPrimitive.Legend;

package/components/ui/checkbox.js

@@ -3,6 +3,6 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const Checkbox = React.forwardRef(({ className, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-fg", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(Check, { className: "h-4 w-4" }) }) })));
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary      disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-fg", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(Check, { className: "h-4 w-4" }) }) })));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export { Checkbox };

package/components/ui/code-block.js

@@ -16,6 +16,6 @@ export const CodeBlock = React.forwardRef(function CodeBlock({ value, children,
     if (variant === "inline") {
         return (_jsx("code", { ref: ref, className: cn(baseClassName, "px-1.5 py-0.5", className), ...props, children: content }));
     }
-    return (_jsxs("div", { className: "relative", children: [_jsx("pre", { ref: ref, className: cn(baseClassName, "m-0 overflow-auto p-3 text-txt", wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre", copyValue !== null ? "pr-10" : undefined, className), ...props, children: content }), copyValue !== null ? (_jsx(CopyButton, { value: copyValue, className: "absolute right-1.5 top-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/35" })) : null] }));
+    return (_jsxs("div", { className: "relative", children: [_jsx("pre", { ref: ref, className: cn(baseClassName, "m-0 overflow-auto p-3 text-txt", wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre", copyValue !== null ? "pr-10" : undefined, className), ...props, children: content }), copyValue !== null ? (_jsx(CopyButton, { value: copyValue, className: "absolute right-1.5 top-1.5   " })) : null] }));
 });
 CodeBlock.displayName = "CodeBlock";

package/components/ui/confirm-dialog.hooks.d.ts

@@ -1,4 +1,4 @@
-import type { ConfirmDialogProps, ConfirmOptions, PromptDialogProps, PromptOptions } from "./confirm-dialog";
+import type { ConfirmDialogProps, ConfirmOptions, PromptDialogProps, PromptOptions } from "./confirm-dialog.js";
 export declare function useConfirm(): {
     confirm: (opts: ConfirmOptions) => Promise<boolean>;
     modalProps: ConfirmDialogProps;

package/components/ui/connection-status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connection-status.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/connection-status.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,cAAc,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,KAAK,EAAE,eAAe,CAAC;IACvB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,8FA2D5B,CAAC"}
+{"version":3,"file":"connection-status.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/connection-status.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,cAAc,GAAG,OAAO,CAAC;AAErE,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,KAAK,EAAE,eAAe,CAAC;IACvB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,8FA4D5B,CAAC"}

package/components/ui/connection-status.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 export const ConnectionStatus = React.forwardRef(({ state, label, connectedLabel, disconnectedLabel, errorLabel, className, role, "aria-live": ariaLive, ...props }, ref) => {
-    const overrideLabels = {
-        connected: connectedLabel,
-        disconnected: disconnectedLabel,
-        error: errorLabel,
-    };
+    const overrideLabel = state === "connected"
+        ? connectedLabel
+        : state === "disconnected"
+            ? disconnectedLabel
+            : errorLabel;
     const defaultLabel = state === "connected"
         ? "Connected"
         : state === "disconnected"
@@ -20,6 +20,6 @@ export const ConnectionStatus = React.forwardRef(({ state, label, connectedLabel
                     ? "bg-ok"
                     : state === "disconnected"
                         ? "bg-muted"
-                        : "bg-destructive") }), label ?? overrideLabels[state] ?? defaultLabel] }));
+                        : "bg-destructive") }), label ?? overrideLabel ?? defaultLabel] }));
 });
 ConnectionStatus.displayName = "ConnectionStatus";

package/components/ui/copy-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/copy-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IACtE,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2FAwDtB,CAAC"}
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/copy-button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IACtE,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2FAwEtB,CAAC"}

package/components/ui/copy-button.js

@@ -4,6 +4,12 @@ import * as React from "react";
 import { cn } from "../../lib/utils.js";
 export const CopyButton = React.forwardRef(({ value, feedbackDuration = 2000, copyLabel = "Copy", copiedLabel = "Copied", className, children, ...props }, ref) => {
     const [copied, setCopied] = React.useState(false);
+    const timerRef = React.useRef(null);
+    React.useEffect(() => () => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+    }, []);
     const handleCopy = React.useCallback(() => {
         // No clipboard API (insecure context / unsupported): nothing copied,
         // so do not show success feedback.
@@ -13,7 +19,10 @@ export const CopyButton = React.forwardRef(({ value, feedbackDuration = 2000, co
         }
         navigator.clipboard.writeText(value).then(() => {
             setCopied(true);
-            setTimeout(() => setCopied(false), feedbackDuration);
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+            timerRef.current = setTimeout(() => setCopied(false), feedbackDuration);
         }, () => {
             // Write rejected (denied permission): leave the button in its
             // default state rather than showing false success.

package/components/ui/dialog.js

@@ -17,7 +17,7 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-[160] bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, container, showCloseButton = true, ...props }, ref) => (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-[170] grid w-[min(calc(100vw_-_1.5rem),42rem)] max-h-[min(calc(100dvh_-_1.5rem_-_var(--safe-area-top,0px)_-_var(--safe-area-bottom,0px)),44rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-hidden rounded-sm border border-border bg-bg p-5 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:p-6", "max-sm:left-1/2 max-sm:top-auto max-sm:bottom-[max(0.75rem,var(--safe-area-bottom,0px))] max-sm:max-h-[min(calc(100dvh_-_1rem_-_var(--safe-area-top,0px)_-_var(--safe-area-bottom,0px)),42rem)] max-sm:w-[min(calc(100vw_-_1rem),42rem)] max-sm:translate-y-0 max-sm:rounded-sm max-sm:data-[state=closed]:slide-out-to-bottom-6 max-sm:data-[state=open]:slide-in-from-bottom-6", className), ...props, children: [children, showCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-bg transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-accent-fg", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] })));
+const DialogContent = React.forwardRef(({ className, children, container, showCloseButton = true, ...props }, ref) => (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-[170] grid w-[min(calc(100vw_-_1.5rem),42rem)] max-h-[min(calc(100dvh_-_1.5rem_-_var(--safe-area-top,0px)_-_var(--safe-area-bottom,0px)),44rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-hidden rounded-sm border border-border bg-bg p-5 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:p-6", "max-sm:left-1/2 max-sm:top-auto max-sm:bottom-[max(0.75rem,var(--safe-area-bottom,0px))] max-sm:max-h-[min(calc(100dvh_-_1rem_-_var(--safe-area-top,0px)_-_var(--safe-area-bottom,0px)),42rem)] max-sm:w-[min(calc(100vw_-_1rem),42rem)] max-sm:translate-y-0 max-sm:rounded-sm max-sm:data-[state=closed]:slide-out-to-bottom-6 max-sm:data-[state=open]:slide-in-from-bottom-6", className), ...props, children: [children, showCloseButton ? (_jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70  transition-opacity hover:opacity-100     disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-accent-fg", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
 DialogHeader.displayName = "DialogHeader";

package/components/ui/dropdown-menu.js

@@ -9,7 +9,7 @@ const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-fg data-[state=open]:bg-accent data-[state=open]:text-accent-fg", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] })));
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none   data-[state=open]:bg-accent data-[state=open]:text-accent-fg", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto h-4 w-4" })] })));
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-txt data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 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", className), ...props })));
@@ -17,12 +17,12 @@ DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-sm border border-border bg-card p-1 text-txt data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 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", className), ...props }) })));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors   data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors   data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), children] })));
 DropdownMenuCheckboxItem.displayName =
     DropdownMenuPrimitive.CheckboxItem.displayName;
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors   data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }), children] })));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;

package/components/ui/field-switch.js

@@ -6,5 +6,5 @@ export const FieldSwitch = React.forwardRef(({ checked, className, disabled, lab
         if (event.defaultPrevented || disabled)
             return;
         onCheckedChange?.(!checked);
-    }, className: cn("inline-flex h-10 w-full cursor-pointer select-none items-center gap-3 rounded-sm border border-border/50 bg-bg/50 px-4 py-2 text-sm text-txt transition-[border-color,background-color,box-shadow] hover:border-accent/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:cursor-not-allowed disabled:opacity-50", className), children: [_jsx("span", { "aria-hidden": "true", className: cn("relative inline-flex h-[24px] w-[44px] shrink-0 items-center rounded-sm border-2 border-transparent bg-input transition-colors", checked && "bg-ok"), children: _jsx("span", { className: cn("pointer-events-none block h-5 w-5 rounded-sm bg-white transition-transform", checked ? "translate-x-5" : "translate-x-0") }) }), _jsx("span", { className: "pointer-events-none text-left", children: label })] })));
+    }, className: cn("inline-flex h-10 w-full cursor-pointer select-none items-center gap-3 rounded-sm border border-border/50 bg-bg/50 px-4 py-2 text-sm text-txt transition-[border-color,background-color,box-shadow] hover:border-accent/40    disabled:cursor-not-allowed disabled:opacity-50", className), children: [_jsx("span", { "aria-hidden": "true", className: cn("relative inline-flex h-[24px] w-[44px] shrink-0 items-center rounded-sm border-2 border-transparent bg-input transition-colors", checked && "bg-ok"), children: _jsx("span", { className: cn("pointer-events-none block h-5 w-5 rounded-sm bg-white transition-transform", checked ? "translate-x-5" : "translate-x-0") }) }), _jsx("span", { className: "pointer-events-none text-left", children: label })] })));
 FieldSwitch.displayName = "FieldSwitch";

package/components/ui/form-select.d.ts

@@ -1,6 +1,6 @@
 import type * as SelectPrimitive from "@radix-ui/react-select";
 import * as React from "react";
-import { Select } from "./select";
+import { Select } from "./select.js";
 export interface FormSelectProps extends React.ComponentProps<typeof Select> {
     children: React.ReactNode;
     placeholder?: string;

package/components/ui/form-select.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "./select.js";
 export function FormSelect({ children, contentClassName, placeholder, triggerClassName, ...props }) {
-    return (_jsxs(Select, { ...props, children: [_jsx(SelectTrigger, { className: cn("h-11 w-full rounded-sm border border-border bg-bg px-4 py-2 text-sm text-txt outline-none transition-colors focus:border-accent focus-visible:border-accent data-[placeholder]:text-muted", triggerClassName), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { className: cn("rounded-sm border border-border bg-card p-1 ", contentClassName), children: children })] }));
+    return (_jsxs(Select, { ...props, children: [_jsx(SelectTrigger, { className: cn("h-11 w-full rounded-sm border border-border bg-bg px-4 py-2 text-sm text-txt outline-none transition-colors   data-[placeholder]:text-muted", triggerClassName), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { className: cn("rounded-sm border border-border bg-card p-1 ", contentClassName), children: children })] }));
 }
-export const FormSelectItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectItem, { ref: ref, className: cn("min-h-[2.75rem] rounded-sm px-3 py-2.5 text-sm text-txt outline-none transition-colors focus:bg-accent-subtle focus:text-txt-strong data-[state=checked]:bg-accent-subtle data-[state=checked]:text-txt-strong", className), ...props })));
+export const FormSelectItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectItem, { ref: ref, className: cn("min-h-[2.75rem] rounded-sm px-3 py-2.5 text-sm text-txt outline-none transition-colors   data-[state=checked]:bg-accent-subtle data-[state=checked]:text-txt-strong", className), ...props })));
 FormSelectItem.displayName = "FormSelectItem";

package/components/ui/grid.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const gridVariants: (props?: ({
-    columns?: 2 | 1 | 3 | 6 | 12 | 4 | null | undefined;
+    columns?: 2 | 1 | 12 | 3 | 6 | 4 | null | undefined;
     spacing?: "none" | "sm" | "lg" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {

package/components/ui/input-group.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-import { type ButtonProps } from "./button";
+import { type ButtonProps } from "./button.js";
 declare const inputGroupVariants: (props?: ({
     density?: "default" | "compact" | "relaxed" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/components/ui/input-group.js

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { Button } from "./button.js";
-const inputGroupVariants = cva("group/input-group relative flex w-full items-stretch rounded-sm border border-input bg-bg text-sm transition-[border-color,box-shadow] focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-bg", {
+const inputGroupVariants = cva("group/input-group relative flex w-full items-stretch rounded-sm border border-input bg-bg text-sm transition-[border-color,box-shadow]     ", {
     variants: {
         density: {
             default: "min-h-10",
@@ -15,7 +15,7 @@ const inputGroupVariants = cva("group/input-group relative flex w-full items-str
     defaultVariants: { density: "default" },
 });
 const InputGroup = React.forwardRef(({ className, density, hasError, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "input-group", "data-error": hasError ? "true" : undefined, className: cn(inputGroupVariants({ density }), hasError &&
-        "border-destructive focus-within:ring-destructive bg-[color-mix(in_srgb,var(--destructive)_3%,var(--card))]", "data-[align*=block]:flex-col", className), ...props })));
+        "border-destructive  bg-[color-mix(in_srgb,var(--destructive)_3%,var(--card))]", "data-[align*=block]:flex-col", className), ...props })));
 InputGroup.displayName = "InputGroup";
 const inputGroupAddonVariants = cva("flex shrink-0 select-none items-center gap-1.5 px-3 text-muted [&_svg]:size-4 [&_svg]:shrink-0", {
     variants: {
@@ -32,9 +32,9 @@ const InputGroupAddon = React.forwardRef(({ className, align, ...props }, ref) =
 InputGroupAddon.displayName = "InputGroupAddon";
 const InputGroupText = React.forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, "data-slot": "input-group-text", className: cn("text-sm text-muted leading-none", className), ...props })));
 InputGroupText.displayName = "InputGroupText";
-const InputGroupInput = React.forwardRef(({ className, type, ...props }, ref) => (_jsx("input", { ref: ref, type: type, "data-slot": "input-group-input", className: cn("min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-txt placeholder:text-muted focus:outline-none disabled:cursor-not-allowed disabled:opacity-50", className), ...props })));
+const InputGroupInput = React.forwardRef(({ className, type, ...props }, ref) => (_jsx("input", { ref: ref, type: type, "data-slot": "input-group-input", className: cn("min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-txt placeholder:text-muted  disabled:cursor-not-allowed disabled:opacity-50", className), ...props })));
 InputGroupInput.displayName = "InputGroupInput";
-const InputGroupTextarea = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-slot": "input-group-textarea", className: cn("min-w-0 flex-1 resize-none bg-transparent px-3 py-2 text-sm text-txt placeholder:text-muted focus:outline-none disabled:cursor-not-allowed disabled:opacity-50", className), ...props })));
+const InputGroupTextarea = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-slot": "input-group-textarea", className: cn("min-w-0 flex-1 resize-none bg-transparent px-3 py-2 text-sm text-txt placeholder:text-muted  disabled:cursor-not-allowed disabled:opacity-50", className), ...props })));
 InputGroupTextarea.displayName = "InputGroupTextarea";
 const InputGroupButton = React.forwardRef(({ className, asChild, ...props }, ref) => {
     const Comp = asChild ? Slot : Button;

package/components/ui/input.js

@@ -5,9 +5,9 @@ import { cn } from "../../lib/utils.js";
 const inputVariants = cva("w-full border text-sm transition-[border-color,box-shadow,background-color] disabled:cursor-not-allowed disabled:opacity-50", {
     variants: {
         variant: {
-            default: "flex rounded-sm border-input bg-bg px-3 py-2 ring-offset-bg file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            form: "rounded-sm border-border bg-bg px-4 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            config: "border-border bg-card font-[var(--mono)] placeholder:text-muted placeholder:opacity-60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            default: "flex rounded-sm border-input bg-bg px-3 py-2  file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted    ",
+            form: "rounded-sm border-border bg-bg px-4 py-2    ",
+            config: "border-border bg-card font-[var(--mono)] placeholder:text-muted placeholder:opacity-60    ",
         },
         density: {
             default: "h-10",

package/components/ui/new-action-button.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type ButtonProps } from "./button";
+import { type ButtonProps } from "./button.js";
 export interface NewActionButtonProps extends Omit<ButtonProps, "variant"> {
 }
 declare const NewActionButton: React.ForwardRefExoticComponent<NewActionButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/ui/pagination.d.ts

@@ -3,7 +3,7 @@
  * Provides previous/next navigation, page numbers, and ellipsis for large page counts.
  */
 import type * as React from "react";
-import { type Button } from "./button";
+import { type Button } from "./button.js";
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
 declare function PaginationItem({ ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;

package/components/ui/scroll-area.js

@@ -7,7 +7,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils.js";
 function ScrollArea({ className, children, viewportClassName, ...props }) {
-    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: cn("focus-visible:ring-ring/50 h-full w-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1", viewportClassName), children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: cn(" h-full w-full rounded-[inherit] transition-[color,box-shadow] outline-none  ", viewportClassName), children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
 }
 function ScrollBar({ className, orientation = "vertical", ...props }) {
     return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" &&

package/components/ui/select.js

@@ -7,7 +7,7 @@ import { cn } from "../../lib/utils.js";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-10 w-full items-center justify-between rounded-sm border border-input bg-bg px-3 py-2 text-sm ring-offset-bg placeholder:text-muted focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-10 w-full items-center justify-between rounded-sm border border-input bg-bg px-3 py-2 text-sm  placeholder:text-muted      disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -20,7 +20,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("py-1.5 pl-2 pr-2 text-sm font-semibold", className), ...props })));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("flex w-full cursor-default select-none items-center gap-1.5 rounded-sm py-1.5 pl-2 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "min-w-0 flex-1", children: children }), _jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-3 w-3" }) }) })] })));
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("flex w-full cursor-default select-none items-center gap-1.5 rounded-sm py-1.5 pl-2 pr-2 text-sm outline-none   data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "min-w-0 flex-1", children: children }), _jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-3 w-3" }) }) })] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/components/ui/settings-controls.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { FieldDescription, FieldLabel } from "./field";
-import { type InputProps } from "./input";
-import { SelectTrigger } from "./select";
-import { type TextareaProps } from "./textarea";
+import { FieldDescription, FieldLabel } from "./field.js";
+import { type InputProps } from "./input.js";
+import { SelectTrigger } from "./select.js";
+import { type TextareaProps } from "./textarea.js";
 export type SettingsSelectTriggerVariant = "compact" | "filter" | "soft" | "toolbar" | "touch";
 export type SettingsInputVariant = "compact" | "filter" | "touch";
 export interface SettingsSelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectTrigger> {
@@ -20,7 +20,7 @@ export interface SettingsTextareaProps extends TextareaProps {
 export declare const SettingsTextarea: React.ForwardRefExoticComponent<SettingsTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export interface SettingsSegmentedGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-export declare function SettingsSegmentedGroup({ className, ...props }: SettingsSegmentedGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const SettingsSegmentedGroup: React.ForwardRefExoticComponent<SettingsSegmentedGroupProps & React.RefAttributes<HTMLDivElement>>;
 export interface SettingsMutedTextProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 export declare function SettingsMutedText({ className, ...props }: SettingsMutedTextProps): import("react/jsx-runtime").JSX.Element;
@@ -31,7 +31,7 @@ export declare const SettingsControls: {
     Input: React.ForwardRefExoticComponent<SettingsInputProps & React.RefAttributes<HTMLInputElement>>;
     SelectTrigger: React.ForwardRefExoticComponent<SettingsSelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     Textarea: React.ForwardRefExoticComponent<SettingsTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-    SegmentedGroup: typeof SettingsSegmentedGroup;
+    SegmentedGroup: React.ForwardRefExoticComponent<SettingsSegmentedGroupProps & React.RefAttributes<HTMLDivElement>>;
     MutedText: typeof SettingsMutedText;
     Field: typeof SettingsField;
     FieldLabel: typeof SettingsFieldLabel;

package/components/ui/settings-controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-controls.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/settings-controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAS,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC9D,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,4BAA4B,GACpC,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AAEZ,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAoClE,MAAM,WAAW,0BACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC;IAC5D,OAAO,CAAC,EAAE,4BAA4B,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,qBAAqB,sGAchC,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAED,eAAO,MAAM,aAAa,6FAWxB,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,aAAa;CAAG;AAE/D,eAAO,MAAM,gBAAgB,mGAc3B,CAAC;AAEH,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAU7B;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAIxB;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAEtC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,UAAU,CAAC,2CAOnD;AAED,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,2CAOzD;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;CAS5B,CAAC"}
+{"version":3,"file":"settings-controls.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/settings-controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAS,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC9D,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,4BAA4B,GACpC,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AAEZ,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAoClE,MAAM,WAAW,0BACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC;IAC5D,OAAO,CAAC,EAAE,4BAA4B,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,qBAAqB,sGAchC,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAED,eAAO,MAAM,aAAa,6FAWxB,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,aAAa;CAAG;AAE/D,eAAO,MAAM,gBAAgB,mGAc3B,CAAC;AAEH,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,eAAO,MAAM,sBAAsB,oGAcjC,CAAC;AAEH,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAIxB;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAEtC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,UAAU,CAAC,2CAOnD;AAED,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,2CAOzD;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;CAS5B,CAAC"}

package/components/ui/settings-controls.js

@@ -8,19 +8,19 @@ import { Textarea } from "./textarea.js";
 // 44px-tall, finger-friendly control. This is the default vocabulary for the
 // redesigned settings surface — every editable control inside a SettingsRow
 // uses the "touch" variant so mobile editing has real tap targets.
-const TOUCH_CONTROL_CLASS = "h-11 rounded-md border border-border bg-card px-3.5 text-sm text-txt transition-[border-color,box-shadow,background-color] focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent";
+const TOUCH_CONTROL_CLASS = "h-11 rounded-md border border-border bg-card px-3.5 text-sm text-txt transition-[border-color,box-shadow,background-color]   ";
 function settingsSelectTriggerClassName(variant) {
     switch (variant) {
         case "touch":
             return `${TOUCH_CONTROL_CLASS} text-left`;
         case "filter":
-            return "h-10 rounded-sm border border-border/50 bg-bg/80 px-3 py-2 text-left text-sm text-txt transition-[border-color,box-shadow,background-color] focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent";
+            return "h-10 rounded-sm border border-border/50 bg-bg/80 px-3 py-2 text-left text-sm text-txt transition-[border-color,box-shadow,background-color]   ";
         case "soft":
-            return "rounded-sm border border-border bg-bg px-2.5 py-1.5 text-xs transition-[border-color,box-shadow,background-color] focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent";
+            return "rounded-sm border border-border bg-bg px-2.5 py-1.5 text-xs transition-[border-color,box-shadow,background-color]   ";
         case "toolbar":
             return "h-11 rounded-sm border-border/60 bg-bg/70 text-left ";
         default:
-            return "h-9 rounded-sm border border-border bg-card px-2.5 py-1.5 text-xs transition-[border-color,box-shadow,background-color] focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent";
+            return "h-9 rounded-sm border border-border bg-card px-2.5 py-1.5 text-xs transition-[border-color,box-shadow,background-color]   ";
     }
 }
 function settingsInputClassName(variant) {
@@ -30,7 +30,7 @@ function settingsInputClassName(variant) {
         case "filter":
             return "h-10 rounded-sm border-border/50 bg-bg/80 text-sm text-txt ";
         default:
-            return "h-9 rounded-sm border border-border bg-card px-3 py-2 text-xs transition-[border-color,box-shadow,background-color] focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent";
+            return "h-9 rounded-sm border border-border bg-card px-3 py-2 text-xs transition-[border-color,box-shadow,background-color]   ";
     }
 }
 export const SettingsSelectTrigger = React.forwardRef(function SettingsSelectTrigger({ className, variant = "compact", ...props }, ref) {
@@ -40,11 +40,11 @@ export const SettingsInput = React.forwardRef(function SettingsInput({ className
     return (_jsx(Input, { ref: ref, className: cn(settingsInputClassName(variant), className), ...props }));
 });
 export const SettingsTextarea = React.forwardRef(function SettingsTextarea({ className, ...props }, ref) {
-    return (_jsx(Textarea, { ref: ref, className: cn("w-full rounded-sm border border-border/60 bg-bg/55 px-3 py-2 text-xs-tight font-mono transition-[border-color,box-shadow,background-color] focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent", className), ...props }));
+    return (_jsx(Textarea, { ref: ref, className: cn("w-full rounded-sm border border-border/60 bg-bg/55 px-3 py-2 text-xs-tight font-mono transition-[border-color,box-shadow,background-color]   ", className), ...props }));
+});
+export const SettingsSegmentedGroup = React.forwardRef(function SettingsSegmentedGroup({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cn("flex shrink-0 gap-1 rounded-sm border border-border bg-card/50 p-1", className), ...props }));
 });
-export function SettingsSegmentedGroup({ className, ...props }) {
-    return (_jsx("div", { className: cn("flex shrink-0 gap-1 rounded-sm border border-border bg-card/50 p-1", className), ...props }));
-}
 export function SettingsMutedText({ className, ...props }) {
     return (_jsx("div", { className: cn("text-xs-tight text-muted", className), ...props }));
 }

package/components/ui/slider.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const Slider = React.forwardRef(({ className, ...props }, ref) => (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-sm bg-input", children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }), _jsx(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-sm border-2 border-primary bg-bg ring-offset-bg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })] })));
+const Slider = React.forwardRef(({ className, ...props }, ref) => (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-sm bg-input", children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }), _jsx(SliderPrimitive.Thumb, { className: "block h-5 w-5 rounded-sm border-2 border-primary bg-bg  transition-colors     disabled:pointer-events-none disabled:opacity-50" })] })));
 Slider.displayName = SliderPrimitive.Root.displayName;
 export { Slider };

package/components/ui/stack.d.ts

@@ -1,9 +1,9 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const stackVariants: (props?: ({
-    direction?: "col" | "row" | null | undefined;
+    direction?: "row" | "col" | null | undefined;
     align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
-    justify?: "start" | "center" | "between" | "end" | null | undefined;
+    justify?: "start" | "center" | "end" | "between" | null | undefined;
     spacing?: "none" | "sm" | "lg" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface StackProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {

package/components/ui/status-badge.helpers.d.ts

@@ -1,4 +1,4 @@
-import type { StatusVariant } from "./status-badge";
+import type { StatusVariant } from "./status-badge.js";
 export declare function statusToneForBoolean(condition: boolean, onTone?: StatusVariant, offTone?: StatusVariant): StatusVariant;
 export declare function statusToneForState(status: string): StatusVariant;
 export declare function statusLabelForState(status: string): string;

package/components/ui/switch.js

@@ -16,7 +16,7 @@ const Switch = React.forwardRef(({ className, children, checked, defaultChecked
         }
         onCheckedChange?.(next);
     }, [active, disabled, isControlled, onCheckedChange, onClick]);
-    return (_jsxs("button", { className: cn("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-sm border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=unchecked]:bg-input", className), ...props, "aria-checked": active, "data-state": state, disabled: disabled, onClick: handleClick, ref: ref, role: "switch", type: type ?? "button", children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none block h-5 w-5 rounded-sm bg-card ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0", "data-state": state }), children] }));
+    return (_jsxs("button", { className: cn("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-sm border-2 border-transparent transition-colors      disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=unchecked]:bg-input", className), ...props, "aria-checked": active, "data-state": state, disabled: disabled, onClick: handleClick, ref: ref, role: "switch", type: type ?? "button", children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none block h-5 w-5 rounded-sm bg-card  transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0", "data-state": state }), children] }));
 });
 Switch.displayName = "Switch";
 export { Switch };

package/components/ui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,IAAI,gGAAqB,CAAC;AAEhC,QAAA,MAAM,QAAQ,uJAYZ,CAAC;AAGH,QAAA,MAAM,WAAW,gKAYf,CAAC;AAGH,QAAA,MAAM,WAAW,0JAYf,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,IAAI,gGAAqB,CAAC;AAEhC,QAAA,MAAM,QAAQ,uJAYZ,CAAC;AAGH,QAAA,MAAM,WAAW,gKAYf,CAAC;AAGH,QAAA,MAAM,WAAW,0JASf,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}

package/components/ui/tabs.js

@@ -5,8 +5,8 @@ import { cn } from "../../lib/utils.js";
 const Tabs = TabsPrimitive.Root;
 const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-10 items-center justify-center rounded-sm bg-bg-accent p-1 text-muted", className), ...props })));
 TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-bg transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bg data-[state=active]:text-txt data-", className), ...props })));
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium  transition-all     disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bg data-[state=active]:text-txt data-", className), ...props })));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("mt-2 ring-offset-bg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), ...props })));
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("mt-2     ", className), ...props })));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 export { Tabs, TabsContent, TabsList, TabsTrigger };

package/components/ui/textarea.js

@@ -5,9 +5,9 @@ import { cn } from "../../lib/utils.js";
 const textareaVariants = cva("w-full border text-sm resize-y transition-[border-color,box-shadow,background-color] disabled:cursor-not-allowed disabled:opacity-50", {
     variants: {
         variant: {
-            default: "flex rounded-sm border-input bg-bg px-3 py-2 ring-offset-bg placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            form: "rounded-sm border-border bg-bg px-4 py-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            config: "border-border bg-card font-[var(--mono)] placeholder:text-muted placeholder:opacity-60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            default: "flex rounded-sm border-input bg-bg px-3 py-2  placeholder:text-muted    ",
+            form: "rounded-sm border-border bg-bg px-4 py-3    ",
+            config: "border-border bg-card font-[var(--mono)] placeholder:text-muted placeholder:opacity-60    ",
         },
         density: {
             default: "min-h-[80px]",

package/components/ui/toggle.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
-const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-sm text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0    outline-none transition-[color,box-shadow]   aria-invalid:border-destructive whitespace-nowrap", {
     variants: {
         variant: {
             default: "bg-transparent",