@moldable-ai/ui 0.2.21 → 0.2.24

package/dist/components/ui/search-field.js

@@ -2,19 +2,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LoaderCircleIcon, SearchIcon, XIcon } from 'lucide-react';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { IconButton } from './icon-button';
+import { cn } from '../../lib/utils.js';
+import { IconButton } from './icon-button.js';
 import { cva } from 'class-variance-authority';
-const searchFieldVariants = cva('group/search-field border-input focus-within:border-ring focus-within:ring-ring/50 flex w-full min-w-0 items-center rounded-md border text-foreground shadow-xs transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', {
+const searchFieldVariants = cva('group/search-field border-input has-[:focus-visible]:border-ring has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-ring flex w-full min-w-0 items-center rounded-control border text-foreground shadow-xs transition-[background-color,border-color,box-shadow] has-[[aria-invalid=true]]:border-destructive', {
     variants: {
         variant: {
             default: 'bg-background',
             filled: 'border-transparent bg-muted/70 shadow-none',
         },
         density: {
-            compact: 'h-7',
-            default: 'h-9',
-            comfortable: 'h-10',
+            compact: 'h-control-sm',
+            default: 'h-control-md',
+            comfortable: 'h-control-md',
         },
     },
     defaultVariants: {
@@ -47,7 +47,7 @@ function SearchField({ className, inputClassName, value, defaultValue = '', onCh
         inputRef.current?.focus();
     }, [commitValue, currentValue, onClear]);
     const iconSize = density === 'compact' ? 'size-3.5' : 'size-4';
-    return (_jsxs("div", { "data-slot": "search-field", "data-density": density, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn(searchFieldVariants({ variant, density }), disabled && 'cursor-not-allowed opacity-50', className), children: [_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground pointer-events-none flex shrink-0 items-center pl-2.5", children: loading ? (_jsx(LoaderCircleIcon, { className: cn(iconSize, 'animate-spin') })) : (_jsx(SearchIcon, { className: iconSize })) }), _jsx("input", { ref: setRefs, "data-slot": "search-field-input", type: "search", value: currentValue, disabled: disabled, readOnly: readOnly, className: cn('placeholder:text-muted-foreground min-w-0 flex-1 appearance-none bg-transparent px-2 text-sm outline-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden', density === 'compact' && 'text-xs', inputClassName), onChange: (event) => {
+    return (_jsxs("div", { "data-slot": "search-field", "data-density": density, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn(searchFieldVariants({ variant, density }), disabled && 'cursor-not-allowed opacity-50', className), children: [_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground pointer-events-none flex shrink-0 items-center pl-2.5", children: loading ? (_jsx(LoaderCircleIcon, { className: cn(iconSize, 'animate-spin') })) : (_jsx(SearchIcon, { className: iconSize })) }), _jsx("input", { ref: setRefs, "data-slot": "search-field-input", type: "search", value: currentValue, disabled: disabled, readOnly: readOnly, className: cn('placeholder:text-muted-foreground text-ui-body min-w-0 flex-1 appearance-none bg-transparent px-2 outline-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden', density === 'compact' && 'text-ui-caption', inputClassName), onChange: (event) => {
                     onChange?.(event);
                     commitValue(event.currentTarget.value);
                 }, onKeyDown: (event) => {

package/dist/components/ui/segmented-control.js

@@ -2,18 +2,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
-const segmentedControlVariants = cva('inline-flex w-fit items-center overflow-x-auto rounded-lg p-0.5 text-muted-foreground', {
+const segmentedControlVariants = cva('inline-flex w-fit items-center overflow-x-auto rounded-group p-0.5 text-muted-foreground', {
     variants: {
         variant: {
             muted: 'bg-muted/70',
             outline: 'border border-border/80 bg-background shadow-xs',
         },
         density: {
-            compact: 'min-h-7',
-            default: 'min-h-8',
-            comfortable: 'min-h-9',
+            compact: 'min-h-control-sm',
+            default: 'min-h-control-md',
+            comfortable: 'min-h-control-sm',
         },
         fullWidth: {
             true: 'flex w-full',
@@ -26,12 +26,12 @@ const segmentedControlVariants = cva('inline-flex w-fit items-center overflow-x-
         fullWidth: false,
     },
 });
-const segmentedControlItemVariants = cva('relative inline-flex cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-md font-medium outline-none transition-[background-color,color,box-shadow] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring/60 data-[state=checked]:bg-background data-[state=checked]:text-foreground data-[state=checked]:shadow-xs [&_svg]:pointer-events-none [&_svg]:shrink-0', {
+const segmentedControlItemVariants = cva('relative inline-flex cursor-pointer select-none items-center justify-center whitespace-nowrap rounded-control font-medium outline-none transition-[background-color,color,box-shadow] hover:bg-control-hover hover:text-foreground active:bg-control-pressed active:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:z-10 focus-visible:ring-1 focus-visible:ring-ring data-[state=checked]:bg-background data-[state=checked]:text-foreground data-[state=checked]:shadow-xs data-[state=checked]:hover:bg-control-hover data-[state=checked]:active:bg-control-pressed [&_svg]:pointer-events-none [&_svg]:shrink-0', {
     variants: {
         density: {
-            compact: 'min-h-6 gap-1 px-2 text-xs [&_svg:not([class*="size-"])]:size-3',
-            default: 'min-h-7 gap-1.5 px-2.5 text-sm [&_svg:not([class*="size-"])]:size-3.5',
-            comfortable: 'min-h-8 gap-1.5 px-3 text-sm [&_svg:not([class*="size-"])]:size-4',
+            compact: 'min-h-6 gap-1 px-2 text-ui-caption [&_svg:not([class*="size-"])]:size-3',
+            default: 'min-h-7 gap-1.5 px-2.5 text-ui-body [&_svg:not([class*="size-"])]:size-3.5',
+            comfortable: 'min-h-8 gap-1.5 px-3 text-ui-body [&_svg:not([class*="size-"])]:size-4',
         },
         fullWidth: {
             true: 'min-w-0 flex-1',

package/dist/components/ui/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAEzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,2CAiBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAyB,EACzB,KAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CA6BtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAqBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,2CAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,2CAa7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,2CAa/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAEzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,2CAiBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAyB,EACzB,KAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CA+BtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAWpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAqBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,2CAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,2CAa7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,2CAa/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAA"}

package/dist/components/ui/select.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
@@ -13,18 +13,18 @@ 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("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 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 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", 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("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs rounded-control text-ui-body flex w-fit items-center justify-between gap-control-gap whitespace-nowrap border bg-transparent px-control-inline outline-none transition-[color,box-shadow] focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-control-md data-[size=sm]:h-control-sm *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-control-gap [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
 }
 function SelectContent({ className, children, position = 'item-aligned', align = 'center', ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn('bg-popover text-popover-foreground 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 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md', 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('bg-popover text-popover-foreground 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 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) rounded-overlay shadow-overlay relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden border', 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, { role: "group", tabIndex: 0, 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('text-muted-foreground px-2 py-1.5 text-xs', className), ...props }));
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn('text-muted-foreground text-ui-caption px-2 py-1.5', className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", 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 })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 rounded-control text-ui-body relative flex w-full cursor-default select-none items-center gap-2 py-1.5 pl-2 pr-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", 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 })] }));
 }
 function SelectSeparator({ className, ...props }) {
     return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn('bg-border pointer-events-none -mx-1 my-1 h-px', className), ...props }));

package/dist/components/ui/separator.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
     return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px', className), ...props }));
 }

package/dist/components/ui/sheet.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Sheet({ ...props }) {
     return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
@@ -23,7 +23,7 @@ function SheetContent({ className, children, side = 'right', size = 'default', s
                     'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right bottom-[max(var(--window-content-inset-bottom),var(--chat-safe-padding))] right-[var(--window-content-inset-inline-end)] top-[var(--window-content-inset-top)] w-[min(90vw,28rem)] border-l data-[size=default]:max-w-sm data-[size=lg]:max-w-lg data-[size=sm]:max-w-xs', side === 'left' &&
                     'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left bottom-[max(var(--window-content-inset-bottom),var(--chat-safe-padding))] left-[var(--window-content-inset-inline-start)] top-[var(--window-content-inset-top)] w-[min(90vw,28rem)] border-r data-[size=default]:max-w-sm data-[size=lg]:max-w-lg data-[size=sm]:max-w-xs', side === 'top' &&
                     'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top left-[var(--window-content-inset-inline-start)] right-[var(--window-content-inset-inline-end)] top-[var(--window-content-inset-top)] max-h-[min(80dvh,calc(100dvh-var(--window-content-inset-top)-max(var(--window-content-inset-bottom),var(--chat-safe-padding))))] border-b', side === 'bottom' &&
-                    'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom bottom-[max(var(--window-content-inset-bottom),var(--chat-safe-padding))] left-[var(--window-content-inset-inline-start)] right-[var(--window-content-inset-inline-end)] max-h-[min(80dvh,calc(100dvh-var(--window-content-inset-top)-max(var(--window-content-inset-bottom),var(--chat-safe-padding))))] border-t', className), ...props, children: [children, showCloseButton && (_jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", "aria-label": "Close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary rounded-control focus:outline-hidden absolute right-4 top-4 inline-flex size-7 cursor-pointer items-center justify-center opacity-70 transition-opacity duration-[var(--motion-duration-fast)] hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed", children: _jsx(XIcon, { "aria-hidden": "true", className: "size-4" }) }))] })] }));
+                    'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom bottom-[max(var(--window-content-inset-bottom),var(--chat-safe-padding))] left-[var(--window-content-inset-inline-start)] right-[var(--window-content-inset-inline-end)] max-h-[min(80dvh,calc(100dvh-var(--window-content-inset-top)-max(var(--window-content-inset-bottom),var(--chat-safe-padding))))] border-t', className), ...props, children: [children, showCloseButton && (_jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", "aria-label": "Close", className: "ring-offset-background data-[state=open]:bg-secondary rounded-control focus-visible:ring-ring absolute right-4 top-4 inline-flex size-7 cursor-pointer items-center justify-center opacity-70 transition-opacity duration-[var(--motion-duration-fast)] hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:cursor-not-allowed", children: _jsx(XIcon, { "aria-hidden": "true", className: "size-4" }) }))] })] }));
 }
 function SheetHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sheet-header", className: cn('flex shrink-0 flex-col gap-1.5 p-4 pr-12', className), ...props }));
@@ -35,9 +35,9 @@ function SheetFooter({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sheet-footer", className: cn('mt-auto flex shrink-0 flex-col gap-2 p-4 sm:flex-row sm:flex-wrap sm:justify-end', className), ...props }));
 }
 function SheetTitle({ className, ...props }) {
-    return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn('text-foreground font-semibold', className), ...props }));
+    return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn('text-ui-title text-foreground', className), ...props }));
 }
 function SheetDescription({ className, ...props }) {
-    return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+    return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn('text-text-secondary text-ui-body', className), ...props }));
 }
 export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetBody, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/dist/components/ui/sidebar.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Button } from './button';
-import { Input } from './input';
-import { Separator } from './separator';
-import { TooltipContent } from './tooltip';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Separator } from './separator.js';
+import { TooltipContent } from './tooltip.js';
 import { type VariantProps } from 'class-variance-authority';
 type SidebarContextProps = {
     state: 'expanded' | 'collapsed';
@@ -19,7 +19,7 @@ declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: se
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;
-declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<'div'> & {
+declare function Sidebar({ side, variant, collapsible, className, children, ref, ...props }: React.ComponentProps<'div'> & {
     side?: 'left' | 'right';
     variant?: 'sidebar' | 'floating' | 'inset';
     collapsible?: 'offcanvas' | 'icon' | 'none';

package/dist/components/ui/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sidebar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sidebar.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/sidebar.js

@@ -3,14 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { PanelLeftIcon } from 'lucide-react';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { useIsMobile } from '../../hooks/use-mobile';
-import { Button } from './button';
-import { Input } from './input';
-import { Separator } from './separator';
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from './sheet';
-import { Skeleton } from './skeleton';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './tooltip';
+import { MOLDABLE_MATERIAL_REGION_MESSAGE_TYPE } from '../../lib/frame-lifecycle.js';
+import { cn } from '../../lib/utils.js';
+import { useIsMobile } from '../../hooks/use-mobile.js';
+import { useAppFrameRuntime } from './app-frame.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Separator } from './separator.js';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from './sheet.js';
+import { Skeleton } from './skeleton.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './tooltip.js';
 import { cva } from 'class-variance-authority';
 const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -18,6 +20,84 @@ const SIDEBAR_WIDTH = '16rem';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const SIDEBAR_MATERIAL_MIN_WIDTH = 120;
+const SIDEBAR_MATERIAL_MAX_WIDTH = 600;
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+function useSidebarMaterialRegion({ enabled, forwardedRef, }) {
+    const appFrame = useAppFrameRuntime();
+    const rawRegionId = React.useId();
+    const regionId = React.useMemo(() => `sidebar-${rawRegionId.replace(/[^a-zA-Z0-9_-]/g, '')}`, [rawRegionId]);
+    const elementRef = React.useRef(null);
+    const declaredRef = React.useRef(false);
+    const widthRef = React.useRef(null);
+    const setElement = React.useCallback((element) => {
+        elementRef.current = element;
+        assignRef(forwardedRef, element);
+    }, [forwardedRef]);
+    const canDeclare = enabled &&
+        appFrame?.mode === 'window' &&
+        appFrame.sidebarMaterialAvailable === true;
+    React.useEffect(() => {
+        const element = elementRef.current;
+        if (!canDeclare || !element || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const post = (action, width) => {
+            window.parent.postMessage({
+                type: MOLDABLE_MATERIAL_REGION_MESSAGE_TYPE,
+                action,
+                regionId,
+                role: 'sidebar',
+                side: 'leading',
+                ...(width === undefined ? {} : { width }),
+            }, '*');
+        };
+        const withdraw = () => {
+            if (!declaredRef.current)
+                return;
+            declaredRef.current = false;
+            widthRef.current = null;
+            post('withdraw');
+        };
+        const measure = () => {
+            const width = element.getBoundingClientRect().width;
+            if (!Number.isFinite(width) ||
+                width < SIDEBAR_MATERIAL_MIN_WIDTH ||
+                width > SIDEBAR_MATERIAL_MAX_WIDTH) {
+                withdraw();
+                return;
+            }
+            if (!declaredRef.current) {
+                declaredRef.current = true;
+                widthRef.current = width;
+                post('declare', width);
+                return;
+            }
+            if (widthRef.current === null ||
+                Math.abs(widthRef.current - width) >= 0.5) {
+                widthRef.current = width;
+                post('update', width);
+            }
+        };
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        measure();
+        return () => {
+            observer.disconnect();
+            withdraw();
+        };
+    }, [canDeclare, regionId]);
+    return {
+        active: appFrame?.sidebarMaterialRegionId === regionId,
+        regionId,
+        setElement,
+    };
+}
 const SidebarContext = React.createContext(null);
 function useSidebar() {
     const context = React.useContext(SidebarContext);
@@ -78,10 +158,17 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
                     ...style,
                 }, className: cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className), ...props, children: children }) }) }));
 }
-function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }) {
+function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ref, ...props }) {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    const materialRegion = useSidebarMaterialRegion({
+        enabled: !isMobile &&
+            side === 'left' &&
+            variant === 'sidebar' &&
+            !(state === 'collapsed' && collapsible === 'offcanvas'),
+        forwardedRef: ref,
+    });
     if (collapsible === 'none') {
-        return (_jsx("div", { "data-slot": "sidebar", className: cn('bg-sidebar text-sidebar-foreground w-(--sidebar-width) flex h-full flex-col', className), ...props, children: children }));
+        return (_jsx("div", { ref: materialRegion.setElement, "data-slot": "sidebar", "data-material-region-id": materialRegion.regionId, "data-native-material": materialRegion.active ? 'sidebar' : undefined, className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'text-sidebar-foreground w-(--sidebar-width) flex flex-col self-stretch', className), ...props, children: children }));
     }
     if (isMobile) {
         return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden", style: {
@@ -90,13 +177,13 @@ function Sidebar({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas'
     }
     return (_jsxs("div", { className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn('w-(--sidebar-width) relative bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
                     ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), _jsx("div", { "data-slot": "sidebar-container", className: cn('w-(--sidebar-width) fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)') }), _jsx("div", { ref: materialRegion.setElement, "data-slot": "sidebar-container", "data-material-region-id": materialRegion.regionId, "data-native-material": materialRegion.active ? 'sidebar' : undefined, className: cn('w-(--sidebar-width) fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
                     ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
                     : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 
                 // Adjust the padding for floating and inset variants.
                 variant === 'floating' || variant === 'inset'
                     ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm", children: children }) })] }));
+                    : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l', className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: cn(materialRegion.active ? 'bg-transparent' : 'bg-sidebar', 'group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-container flex h-full w-full flex-col group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm'), children: children }) })] }));
 }
 function SidebarTrigger({ className, onClick, ...props }) {
     const { toggleSidebar } = useSidebar();
@@ -110,7 +197,7 @@ function SidebarRail({ className, ...props }) {
     return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-pointer transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className), ...props }));
 }
 function SidebarInset({ className, ...props }) {
-    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('bg-background relative flex w-full flex-1 flex-col', 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm', className), ...props }));
+    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('bg-background relative flex w-full flex-1 flex-col', 'md:peer-data-[variant=inset]:rounded-container md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:shadow-sm', className), ...props }));
 }
 function SidebarInput({ className, ...props }) {
     return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn('bg-background h-8 w-full shadow-none', className), ...props }));
@@ -132,16 +219,16 @@ function SidebarGroup({ className, ...props }) {
 }
 function SidebarGroupLabel({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'div';
-    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring outline-hidden flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring outline-hidden rounded-control text-ui-caption flex h-8 shrink-0 items-center px-2 font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className), ...props }));
 }
 function SidebarGroupAction({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'button';
-    return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+    return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden rounded-control absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center p-0 transition-transform focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0', 
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 md:after:hidden', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
 function SidebarGroupContent({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn('w-full text-sm', className), ...props }));
+    return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn('text-ui-body w-full', className), ...props }));
 }
 function SidebarMenu({ className, ...props }) {
     return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-1', className), ...props }));
@@ -149,16 +236,16 @@ function SidebarMenu({ className, ...props }) {
 function SidebarMenuItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn('group/menu-item relative', className), ...props }));
 }
-const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+const sidebarMenuButtonVariants = cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-control p-2 text-left text-ui-body outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-1 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
     variants: {
         variant: {
             default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
             outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
         },
         size: {
-            default: 'h-8 text-sm',
-            sm: 'h-7 text-xs',
-            lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+            default: 'h-8 text-ui-body',
+            sm: 'h-7 text-ui-caption',
+            lg: 'h-12 text-ui-body group-data-[collapsible=icon]:p-0!',
         },
     },
     defaultVariants: {
@@ -182,20 +269,20 @@ function SidebarMenuButton({ asChild = false, isActive = false, variant = 'defau
 }
 function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
     const Comp = asChild ? Slot : 'button';
-    return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground outline-hidden absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground outline-hidden rounded-control absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center p-0 transition-transform focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0', 
         // Increases the hit area of the button on mobile.
         'after:absolute after:-inset-2 md:after:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
             'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', className), ...props }));
 }
 function SidebarMenuBadge({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground rounded-control text-ui-caption pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center px-1 font-medium tabular-nums', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
 function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
     // Random width between 50 to 90%.
     const width = React.useMemo(() => {
         return `${Math.floor(Math.random() * 40) + 50}%`;
     }, []);
-    return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn('flex h-8 items-center gap-2 rounded-md px-2', className), ...props, children: [showIcon && (_jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" })), _jsx(Skeleton, { className: "max-w-(--skeleton-width) h-4 flex-1", "data-sidebar": "menu-skeleton-text", style: {
+    return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn('rounded-control flex h-8 items-center gap-2 px-2', className), ...props, children: [showIcon && (_jsx(Skeleton, { className: "rounded-control size-4", "data-sidebar": "menu-skeleton-icon" })), _jsx(Skeleton, { className: "max-w-(--skeleton-width) h-4 flex-1", "data-sidebar": "menu-skeleton-text", style: {
                     '--skeleton-width': width,
                 } })] }));
 }
@@ -207,6 +294,6 @@ function SidebarMenuSubItem({ className, ...props }) {
 }
 function SidebarMenuSubButton({ asChild = false, size = 'md', isActive = false, className, ...props }) {
     const Comp = asChild ? Slot : 'a';
-    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden rounded-control flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden px-2 focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-ui-caption', size === 'md' && 'text-ui-body', 'group-data-[collapsible=icon]:hidden', className), ...props }));
 }
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };

package/dist/components/ui/skeleton.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Skeleton({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "skeleton", className: cn('bg-accent animate-pulse rounded-md', className), ...props }));
+    return (_jsx("div", { "data-slot": "skeleton", className: cn('bg-accent rounded-control animate-pulse', className), ...props }));
 }
 export { Skeleton };

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

@@ -1,8 +1,10 @@
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as React from 'react';
-declare function Slider({ className, defaultValue, value, min, max, rangeContent, thumbContent, ...props }: React.ComponentProps<typeof SliderPrimitive.Root> & {
+declare function Slider({ className, defaultValue, value, min, max, rangeContent, thumbContent, thumbAriaLabels, ...props }: React.ComponentProps<typeof SliderPrimitive.Root> & {
     rangeContent?: React.ReactNode;
     thumbContent?: React.ReactNode;
+    /** Accessible names for thumbs, in value order. Required for ranges. */
+    thumbAriaLabels?: readonly string[];
 }): import("react/jsx-runtime").JSX.Element;
 export { Slider };
 //# sourceMappingURL=slider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,YAAY,EACZ,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B,2CAkDA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,wEAAwE;IACxE,eAAe,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CACpC,2CAmDA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/slider.js

@@ -2,13 +2,13 @@
 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';
-function Slider({ className, defaultValue, value, min = 0, max = 100, rangeContent, thumbContent, ...props }) {
+import { cn } from '../../lib/utils.js';
+function Slider({ className, defaultValue, value, min = 0, max = 100, rangeContent, thumbContent, thumbAriaLabels, ...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 select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50', className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn('bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5'), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn('bg-primary absolute overflow-hidden rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'), children: rangeContent }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "border-primary ring-ring/50 focus-visible:outline-hidden block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50", children: thumbContent }, index)))] }));
+    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: cn('relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50', className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn('bg-muted rounded-pill relative grow overflow-hidden data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5'), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn('bg-primary rounded-pill absolute overflow-hidden data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'), children: rangeContent }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", "aria-label": thumbAriaLabels?.[index], className: "border-primary ring-ring focus-visible:outline-hidden rounded-pill block size-4 shrink-0 border bg-white shadow-sm transition-[color,box-shadow] focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50", children: thumbContent }, index)))] }));
 }
 export { Slider };

package/dist/components/ui/sonner.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, } from 'lucide-react';
-import { useTheme } from '../../lib/theme';
+import { useTheme } from '../../lib/theme.js';
 import { Toaster as Sonner, toast, } from 'sonner';
 const Toaster = ({ style, ...props }) => {
     const { resolvedTheme } = useTheme();

package/dist/components/ui/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/ui/spinner.tsx"],"names":[],"mappings":"AAKA,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CASpE;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/ui/spinner.tsx"],"names":[],"mappings":"AAKA,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAYpE;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/ui/spinner.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Loader2Icon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Spinner({ className, ...props }) {
-    return (_jsx(Loader2Icon, { role: "status", "aria-label": "Loading", className: cn('size-4 animate-spin', className), ...props }));
+    return (_jsx(Loader2Icon, { role: "status", "aria-label": "Loading", className: cn('size-4 animate-spin motion-reduce:animate-none', className), ...props }));
 }
 export { Spinner };

package/dist/components/ui/split-view.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from './resizable';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from './resizable.js';
 function SplitView({ orientation = 'horizontal', ...props }) {
     return (_jsx(ResizablePanelGroup, { "data-slot": "split-view", orientation: orientation, ...props }));
 }

package/dist/components/ui/status.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const statusVariants: (props?: ({
-    variant?: "error" | "pending" | "running" | "success" | "neutral" | "warning" | null | undefined;
+    variant?: "error" | "neutral" | "info" | "success" | "warning" | "running" | "pending" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface StatusProps extends React.ComponentProps<'span'>, VariantProps<typeof statusVariants> {
     asChild?: boolean;

package/dist/components/ui/status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/components/ui/status.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;8EAiBnB,CAAA;AAcD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAClC,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,MAAM,CAAC,EACd,OAAe,EACf,aAAoB,EACpB,QAAgB,EAChB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAqBb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/components/ui/status.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;8EAwBnB,CAAA;AAcD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAClC,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,MAAM,CAAC,EACd,OAAe,EACf,aAAoB,EACpB,QAAgB,EAChB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAqBb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}