@moldable-ai/ui 0.2.21 → 0.2.24

package/dist/components/ui/menu-items.js

@@ -0,0 +1,111 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { toNativeMenuItems, useHostNativeMenu, } from '../../lib/host-native-menu.js';
+import { Kbd } from './kbd.js';
+const SHORTCUT_MODIFIER_LABELS = {
+    cmd: '⌘',
+    shift: '⇧',
+    alt: '⌥',
+    ctrl: '⌃',
+};
+export function useDeclarativeMenuState({ items, onSelectItem, open, defaultOpen, onOpenChange, onFallback, }) {
+    const { available: nativeAvailable, open: openNativeMenu } = useHostNativeMenu();
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+    const [nativeOpen, setNativeOpen] = React.useState(false);
+    const nativeOpenRef = React.useRef(false);
+    const onPortableOpenChange = React.useCallback((nextOpen) => {
+        if (open === undefined)
+            setUncontrolledOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }, [onOpenChange, open]);
+    const requestNativeMenu = React.useCallback((options) => {
+        if (!items || !nativeAvailable)
+            return false;
+        if (nativeOpenRef.current)
+            return true;
+        nativeOpenRef.current = true;
+        setNativeOpen(true);
+        if (open === undefined)
+            setUncontrolledOpen(false);
+        else if (open)
+            onOpenChange?.(false);
+        void openNativeMenu(toNativeMenuItems(items), options)
+            .then((result) => {
+            if (result.status === 'completed') {
+                onSelectItem?.(result.selectedId);
+            }
+            else if (result.status === 'fallback') {
+                if (onFallback)
+                    onFallback();
+                else
+                    onPortableOpenChange(true);
+            }
+        })
+            .catch((error) => {
+            console.error('Native menu request failed; opening portable menu.', error);
+            if (onFallback)
+                onFallback();
+            else
+                onPortableOpenChange(true);
+        })
+            .finally(() => {
+            nativeOpenRef.current = false;
+            setNativeOpen(false);
+        });
+        return true;
+    }, [
+        items,
+        nativeAvailable,
+        onOpenChange,
+        onFallback,
+        onPortableOpenChange,
+        onSelectItem,
+        openNativeMenu,
+        open,
+    ]);
+    return {
+        nativeOpen,
+        portableOpen: nativeOpen ? false : (open ?? uncontrolledOpen),
+        onPortableOpenChange,
+        requestNativeMenu,
+    };
+}
+export function formatMenuShortcut(shortcut) {
+    if (!shortcut)
+        return null;
+    const modifiers = shortcut.modifiers
+        ?.map((modifier) => SHORTCUT_MODIFIER_LABELS[modifier])
+        .join('');
+    const key = shortcut.key.length === 1 ? shortcut.key.toUpperCase() : shortcut.key;
+    return `${modifiers ?? ''}${key}`;
+}
+export function MenuItemContents({ item, shortcutSlot, }) {
+    const Icon = item.icon;
+    const shortcut = formatMenuShortcut(item.shortcut);
+    return (_jsxs(_Fragment, { children: [Icon ? _jsx(Icon, { "aria-hidden": "true" }) : null, _jsx("span", { children: item.label }), shortcut ? (_jsx("span", { "data-slot": shortcutSlot, className: "text-muted-foreground text-ui-caption ml-auto tracking-widest", children: _jsx(Kbd, { children: shortcut }) })) : null] }));
+}
+export function hasMenuContentChild(children, contentType) {
+    return React.Children.toArray(children).some((child) => {
+        if (!React.isValidElement(child))
+            return false;
+        if (child.type === contentType)
+            return true;
+        if (child.type !== React.Fragment)
+            return false;
+        return hasMenuContentChild(child.props.children, contentType);
+    });
+}
+export function withoutMenuContentChild(children, contentType) {
+    return React.Children.map(children, (child) => {
+        if (!React.isValidElement(child))
+            return child;
+        if (child.type === contentType)
+            return null;
+        if (child.type !== React.Fragment)
+            return child;
+        const fragmentChildren = child.props
+            .children;
+        return React.cloneElement(child, undefined, withoutMenuContentChild(fragmentChildren, contentType));
+    });
+}

package/dist/components/ui/menubar.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as MenubarPrimitive from '@radix-ui/react-menubar';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Menubar({ className, ...props }) {
-    return (_jsx(MenubarPrimitive.Root, { "data-slot": "menubar", className: cn('bg-background shadow-xs flex h-9 items-center gap-1 rounded-md border p-1', className), ...props }));
+    return (_jsx(MenubarPrimitive.Root, { "data-slot": "menubar", className: cn('bg-background shadow-xs rounded-group flex h-control-md items-center gap-control-gap border p-1', className), ...props }));
 }
 function MenubarMenu({ ...props }) {
     return _jsx(MenubarPrimitive.Menu, { "data-slot": "menubar-menu", ...props });
@@ -19,36 +19,36 @@ function MenubarRadioGroup({ ...props }) {
     return (_jsx(MenubarPrimitive.RadioGroup, { "data-slot": "menubar-radio-group", ...props }));
 }
 function MenubarTrigger({ className, ...props }) {
-    return (_jsx(MenubarPrimitive.Trigger, { "data-slot": "menubar-trigger", className: cn('focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex select-none items-center rounded-sm px-2 py-1 text-sm font-medium', className), ...props }));
+    return (_jsx(MenubarPrimitive.Trigger, { "data-slot": "menubar-trigger", className: cn('focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden rounded-control text-ui-body flex select-none items-center px-2 py-1 font-medium', className), ...props }));
 }
 function MenubarContent({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }) {
-    return (_jsx(MenubarPortal, { children: _jsx(MenubarPrimitive.Content, { "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in 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 origin-(--radix-menubar-content-transform-origin) z-50 min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-md', className), ...props }) }));
+    return (_jsx(MenubarPortal, { children: _jsx(MenubarPrimitive.Content, { "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in 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 origin-(--radix-menubar-content-transform-origin) rounded-overlay shadow-overlay z-50 min-w-[12rem] overflow-hidden border p-1', className), ...props }) }));
 }
 function MenubarItem({ className, inset, variant = 'default', ...props }) {
-    return (_jsx(MenubarPrimitive.Item, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props }));
+    return (_jsx(MenubarPrimitive.Item, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden rounded-control text-ui-body relative flex cursor-default select-none items-center gap-2 px-2 py-1.5 data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props }));
 }
 function MenubarCheckboxItem({ className, children, checked, ...props }) {
-    return (_jsxs(MenubarPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", className: cn("focus:bg-accent focus:text-accent-foreground rounded-xs outline-hidden relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 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), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
+    return (_jsxs(MenubarPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", className: cn("focus:bg-accent focus:text-accent-foreground rounded-control outline-hidden text-ui-body relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
 }
 function MenubarRadioItem({ className, children, ...props }) {
-    return (_jsxs(MenubarPrimitive.RadioItem, { "data-slot": "menubar-radio-item", className: cn("focus:bg-accent focus:text-accent-foreground rounded-xs outline-hidden relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 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", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
+    return (_jsxs(MenubarPrimitive.RadioItem, { "data-slot": "menubar-radio-item", className: cn("focus:bg-accent focus:text-accent-foreground rounded-control outline-hidden text-ui-body relative flex cursor-default select-none items-center gap-2 py-1.5 pl-8 pr-2 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", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
 }
 function MenubarLabel({ className, inset, ...props }) {
-    return (_jsx(MenubarPrimitive.Label, { "data-slot": "menubar-label", "data-inset": inset, className: cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className), ...props }));
+    return (_jsx(MenubarPrimitive.Label, { "data-slot": "menubar-label", "data-inset": inset, className: cn('text-ui-body px-2 py-1.5 font-medium data-[inset]:pl-8', className), ...props }));
 }
 function MenubarSeparator({ className, ...props }) {
     return (_jsx(MenubarPrimitive.Separator, { "data-slot": "menubar-separator", className: cn('bg-border -mx-1 my-1 h-px', className), ...props }));
 }
 function MenubarShortcut({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "menubar-shortcut", className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className), ...props }));
+    return (_jsx("span", { "data-slot": "menubar-shortcut", className: cn('text-muted-foreground text-ui-caption ml-auto tracking-widest', className), ...props }));
 }
 function MenubarSub({ ...props }) {
     return _jsx(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
 }
 function MenubarSubTrigger({ className, inset, children, ...props }) {
-    return (_jsxs(MenubarPrimitive.SubTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset, className: cn('focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[inset]:pl-8', className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })] }));
+    return (_jsxs(MenubarPrimitive.SubTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset, className: cn('focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground rounded-control text-ui-body flex cursor-default select-none items-center px-2 py-1.5 outline-none data-[inset]:pl-8', className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })] }));
 }
 function MenubarSubContent({ className, ...props }) {
-    return (_jsx(MenubarPrimitive.SubContent, { "data-slot": "menubar-sub-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 origin-(--radix-menubar-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg', className), ...props }));
+    return (_jsx(MenubarPrimitive.SubContent, { "data-slot": "menubar-sub-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 origin-(--radix-menubar-content-transform-origin) rounded-overlay shadow-overlay z-50 min-w-[8rem] overflow-hidden border p-1', className), ...props }));
 }
 export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };

package/dist/components/ui/message-scroller-controller.d.ts

@@ -1,4 +1,4 @@
-import { MessageScrollerPolicy } from './message-scroller-policy';
+import { MessageScrollerPolicy } from './message-scroller-policy.js';
 export type MessageScrollerDefaultScrollPosition = 'start' | 'end' | 'last-anchor';
 export type MessageScrollerScrollAlign = 'start' | 'center' | 'end' | 'nearest';
 export type MessageScrollerScrollOptions = {

package/dist/components/ui/message-scroller-controller.js

@@ -1,4 +1,4 @@
-import { MessageScrollerPolicy } from './message-scroller-policy';
+import { MessageScrollerPolicy } from './message-scroller-policy.js';
 const READING_LEAF_SELECTOR = '[data-message-scroll-anchor]';
 const POSITION_EPSILON_PX = 0.5;
 const WARMUP_BATCH_SIZE = 3;

package/dist/components/ui/message-scroller-primitive.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MessageScrollerDefaultScrollPosition, type MessageScrollerScrollAlign, type MessageScrollerScrollOptions, type MessageScrollerScrollable, type MessageScrollerVisibilityState } from './message-scroller-controller';
+import { type MessageScrollerDefaultScrollPosition, type MessageScrollerScrollAlign, type MessageScrollerScrollOptions, type MessageScrollerScrollable, type MessageScrollerVisibilityState } from './message-scroller-controller.js';
 type MessageScrollerProviderProps = {
     children?: React.ReactNode;
     autoScroll?: boolean;

package/dist/components/ui/message-scroller-primitive.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { MessageScrollerController, } from './message-scroller-controller';
+import { MessageScrollerController, } from './message-scroller-controller.js';
 /**
  * The transcript scroller primitive, owned in-repo. Drop-in compatible with
  * the `@shadcn/react/message-scroller` surface it replaces, but built around

package/dist/components/ui/message-scroller.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Button } from './button';
-import { MessageScroller as MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from './message-scroller-primitive';
+import { Button } from './button.js';
+import { MessageScroller as MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from './message-scroller-primitive.js';
 declare function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
 declare function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function MessageScrollerViewport({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/message-scroller.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown } from 'lucide-react';
-import { cn } from '../../lib/utils';
-import { Button } from './button';
-import { MessageScroller as MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, } from './message-scroller-primitive';
+import { cn } from '../../lib/utils.js';
+import { Button } from './button.js';
+import { MessageScroller as MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, } from './message-scroller-primitive.js';
 function MessageScrollerProvider(props) {
     return _jsx(MessageScrollerPrimitive.Provider, { ...props });
 }

package/dist/components/ui/navigation-button-group.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ButtonGroup } from './button-group';
-import { type IconButtonProps, type IconButtonSize } from './icon-button';
+import { ButtonGroup } from './button-group.js';
+import { type IconButtonProps, type IconButtonSize } from './icon-button.js';
 export interface NavigationButtonGroupProps extends Omit<React.ComponentProps<typeof ButtonGroup>, 'children' | 'orientation'> {
     canGoBack?: boolean;
     canGoForward?: boolean;

package/dist/components/ui/navigation-button-group.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
-import { ButtonGroup } from './button-group';
-import { IconButton, } from './icon-button';
+import { ButtonGroup } from './button-group.js';
+import { IconButton, } from './icon-button.js';
 function NavigationButtonGroup({ canGoBack = true, canGoForward = true, onBack, onForward, backLabel = 'Go back', forwardLabel = 'Go forward', size = 'sm', variant = 'ghost', 'aria-label': ariaLabel = 'Navigation', ...props }) {
     return (_jsxs(ButtonGroup, { "aria-label": ariaLabel, orientation: "horizontal", ...props, children: [_jsx(IconButton, { label: backLabel, tooltip: true, size: size, variant: variant, disabled: !canGoBack, onClick: onBack, children: _jsx(ChevronLeftIcon, {}) }), _jsx(IconButton, { label: forwardLabel, tooltip: true, size: size, variant: variant, disabled: !canGoForward, onClick: onForward, children: _jsx(ChevronRightIcon, {}) })] }));
 }

package/dist/components/ui/navigation-menu.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { ChevronDownIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
 function NavigationMenu({ className, children, viewport = true, ...props }) {
     return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", "data-viewport": viewport, className: cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className), ...props, children: [children, viewport && _jsx(NavigationMenuViewport, {})] }));
@@ -13,20 +13,20 @@ function NavigationMenuList({ className, ...props }) {
 function NavigationMenuItem({ className, ...props }) {
     return (_jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn('relative', className), ...props }));
 }
-const navigationMenuTriggerStyle = cva('group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1');
+const navigationMenuTriggerStyle = cva('group inline-flex h-control-md w-max items-center justify-center rounded-control bg-background px-control-inline text-ui-body font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring outline-none transition-[color,box-shadow] focus-visible:ring-1');
 function NavigationMenuTrigger({ className, children, ...props }) {
     return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), 'group', className), ...props, children: [children, ' ', _jsx(ChevronDownIcon, { className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] }));
 }
 function NavigationMenuContent({ className, ...props }) {
-    return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn('data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full p-2 pr-2.5 md:absolute md:w-auto', 'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200', className), ...props }));
+    return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn('data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full p-2 pr-2.5 md:absolute md:w-auto', 'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-overlay group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:rounded-overlay group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:duration-200', className), ...props }));
 }
 function NavigationMenuViewport({ className, ...props }) {
-    return (_jsx("div", { className: cn('absolute left-0 top-full isolate z-50 flex justify-center'), children: _jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn('origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]', className), ...props }) }));
+    return (_jsx("div", { className: cn('absolute left-0 top-full isolate z-50 flex justify-center'), children: _jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn('origin-top-center bg-popover text-popover-foreground shadow-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 rounded-overlay relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden border md:w-[var(--radix-navigation-menu-viewport-width)]', className), ...props }) }));
 }
 function NavigationMenuLink({ className, ...props }) {
-    return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm outline-none transition-all focus-visible:outline-1 focus-visible:ring-[3px] [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+    return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring [&_svg:not([class*='text-'])]:text-muted-foreground rounded-control text-ui-body flex flex-col gap-1 p-2 outline-none transition-all focus-visible:ring-1 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
 function NavigationMenuIndicator({ className, ...props }) {
-    return (_jsx(NavigationMenuPrimitive.Indicator, { "data-slot": "navigation-menu-indicator", className: cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', className), ...props, children: _jsx("div", { className: "bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" }) }));
+    return (_jsx(NavigationMenuPrimitive.Indicator, { "data-slot": "navigation-menu-indicator", className: cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', className), ...props, children: _jsx("div", { className: "bg-border rounded-tl-control relative top-[60%] h-2 w-2 rotate-45 shadow-md" }) }));
 }
 export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };

package/dist/components/ui/notification-dot.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 NotificationDot({ className, ...props }) {
-    return (_jsx("span", { "aria-hidden": "true", "data-slot": "notification-dot", className: cn('bg-primary inline-block size-1.5 shrink-0 rounded-full', className), ...props }));
+    return (_jsx("span", { "aria-hidden": "true", "data-slot": "notification-dot", className: cn('bg-info rounded-pill inline-block size-1.5 shrink-0', className), ...props }));
 }
 export { NotificationDot };

package/dist/components/ui/number-input.js

@@ -2,19 +2,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { Button } from './button';
+import { cn } from '../../lib/utils.js';
+import { Button } from './button.js';
 import { cva } from 'class-variance-authority';
-const numberInputVariants = cva('border-input bg-transparent focus-within:border-ring focus-within:ring-ring/50 flex items-stretch overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', {
+const numberInputVariants = cva('border-input bg-transparent has-[:focus-visible]:border-ring has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-ring flex items-stretch overflow-hidden rounded-control border shadow-xs transition-[color,box-shadow] has-[[aria-invalid=true]]:border-destructive', {
     variants: {
         variant: {
             default: 'bg-background',
             filled: 'bg-muted/60 border-transparent shadow-none',
         },
         size: {
-            sm: 'h-8',
-            default: 'h-9',
-            lg: 'h-10',
+            sm: 'h-control-sm',
+            default: 'h-control-md',
+            lg: 'h-control-lg',
         },
     },
     defaultVariants: {
@@ -46,11 +46,11 @@ function NumberInput({ className, value, defaultValue, onValueChange, unit, step
         }
         commitValue(nextValue);
     }, [commitValue, currentValue, max, min, step]);
-    return (_jsxs("div", { "data-slot": "number-input", "data-size": size ?? 'default', "data-variant": variant ?? 'default', className: cn(numberInputVariants({ variant, size }), className), children: [_jsx("input", { "data-slot": "number-input-field", type: "number", value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, className: "placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent px-3 text-sm outline-none disabled:cursor-not-allowed", onChange: (event) => {
+    return (_jsxs("div", { "data-slot": "number-input", "data-size": size ?? 'default', "data-variant": variant ?? 'default', className: cn(numberInputVariants({ variant, size }), className), children: [_jsx("input", { "data-slot": "number-input-field", type: "number", value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, className: "placeholder:text-muted-foreground text-ui-body min-w-0 flex-1 bg-transparent px-control-inline outline-none disabled:cursor-not-allowed", onChange: (event) => {
                     const nextValue = event.currentTarget.value === ''
                         ? null
                         : event.currentTarget.valueAsNumber;
                     commitValue(Number.isNaN(nextValue) ? null : nextValue);
-                }, ...props }), unit ? (_jsx("span", { "data-slot": "number-input-unit", className: "text-muted-foreground flex shrink-0 items-center pr-2 text-xs", children: unit })) : null, steppers ? (_jsxs("span", { "data-slot": "number-input-steppers", className: "border-border/70 flex w-6 shrink-0 flex-col border-l", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", disabled: disabled, "aria-label": "Increase value", className: "h-1/2 min-h-0 w-full rounded-none border-b", onClick: () => changeByStep(1), children: _jsx(ChevronUpIcon, {}) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", disabled: disabled, "aria-label": "Decrease value", className: "h-1/2 min-h-0 w-full rounded-none", onClick: () => changeByStep(-1), children: _jsx(ChevronDownIcon, {}) })] })) : null] }));
+                }, ...props }), unit ? (_jsx("span", { "data-slot": "number-input-unit", className: "text-muted-foreground text-ui-caption flex shrink-0 items-center pr-2", children: unit })) : null, steppers ? (_jsxs("span", { "data-slot": "number-input-steppers", className: "border-border/70 flex shrink-0 items-center border-l px-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", disabled: disabled, "aria-label": "Increase value", className: "rounded-none", onClick: () => changeByStep(1), children: _jsx(ChevronUpIcon, {}) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", disabled: disabled, "aria-label": "Decrease value", className: "rounded-none", onClick: () => changeByStep(-1), children: _jsx(ChevronDownIcon, {}) })] })) : null] }));
 }
 export { NumberInput, numberInputVariants };

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

@@ -1,5 +1,5 @@
 import * 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/dist/components/ui/pagination.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon, } from 'lucide-react';
-import { cn } from '../../lib/utils';
-import { buttonVariants } from './button';
+import { cn } from '../../lib/utils.js';
+import { buttonVariants } from './button.js';
 function Pagination({ className, ...props }) {
     return (_jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn('mx-auto flex w-full justify-center', className), ...props }));
 }

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const panelVariants: (props?: ({
-    surface?: "default" | "transparent" | "muted" | "sidebar" | null | undefined;
+    surface?: "default" | "muted" | "sidebar" | "transparent" | null | undefined;
     border?: "all" | "none" | "inline" | "block" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface PanelGroupProps extends React.ComponentProps<'div'> {

package/dist/components/ui/panel.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
 const panelVariants = cva('flex min-h-0 min-w-0 flex-col overflow-hidden', {
     variants: {
@@ -29,12 +29,12 @@ function Panel({ surface, border, className, ...props }) {
     return (_jsx("section", { "data-slot": "panel", "data-surface": surface ?? 'default', className: cn(panelVariants({ surface, border }), className), ...props }));
 }
 function PanelHeader({ className, ...props }) {
-    return (_jsx("header", { "data-slot": "panel-header", className: cn('border-border/70 flex min-h-9 shrink-0 items-center gap-2 border-b px-3 py-1.5', className), ...props }));
+    return (_jsx("header", { "data-slot": "panel-header", className: cn('border-border/70 flex min-h-row shrink-0 items-center gap-control-gap border-b px-control-inline py-1', className), ...props }));
 }
 function PanelContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "panel-content", className: cn('min-h-0 min-w-0 flex-1 overflow-auto', className), ...props }));
 }
 function PanelFooter({ className, ...props }) {
-    return (_jsx("footer", { "data-slot": "panel-footer", className: cn('border-border/70 flex shrink-0 items-center gap-2 border-t px-3 py-2', className), ...props }));
+    return (_jsx("footer", { "data-slot": "panel-footer", className: cn('border-border/70 flex min-h-row shrink-0 items-center gap-control-gap border-t px-control-inline py-1', className), ...props }));
 }
 export { Panel, PanelContent, PanelFooter, PanelGroup, PanelHeader, panelVariants, };

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

@@ -1,6 +1,6 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as React from 'react';
-import { type MaterialVariant } from './material';
+import { type MaterialVariant } from './material.js';
 declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverPortal({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/popover.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { cn } from '../../lib/utils';
-import { Material } from './material';
+import { cn } from '../../lib/utils.js';
+import { Material } from './material.js';
 function Popover({ ...props }) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
@@ -22,7 +22,7 @@ function PopoverAnchor({ ...props }) {
     return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "popover-header", className: cn('flex flex-col gap-1 text-sm', className), ...props }));
+    return (_jsx("div", { "data-slot": "popover-header", className: cn('text-ui-body flex flex-col gap-1', className), ...props }));
 }
 function PopoverTitle({ className, ...props }) {
     return (_jsx("h2", { "data-slot": "popover-title", className: cn('font-medium', className), ...props }));

package/dist/components/ui/progress.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as ProgressPrimitive from '@radix-ui/react-progress';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Progress({ className, value, ...props }) {
-    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "bg-primary h-full w-full flex-1 transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn('bg-primary/20 rounded-pill relative h-2 w-full overflow-hidden', className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "bg-primary h-full w-full flex-1 transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
 }
 export { Progress };

package/dist/components/ui/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAQvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAkBvD;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAQvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAmBvD;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/radio-group.js

@@ -2,11 +2,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { CircleIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function RadioGroup({ className, ...props }) {
     return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn('grid gap-3', className), ...props }));
 }
 function RadioGroupItem({ className, ...props }) {
-    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn('border-input text-primary 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 shadow-xs aspect-square size-4 shrink-0 rounded-full border outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(CircleIcon, { className: "fill-primary absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn('group/radio text-primary focus-visible:border-ring focus-visible:ring-ring aria-invalid:before:border-destructive rounded-pill relative size-control-xs shrink-0 cursor-pointer border border-transparent bg-transparent p-1 outline-none transition-[color,box-shadow] before:pointer-events-none before:absolute before:left-1/2 before:top-1/2 before:size-4 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-pill before:border before:border-input before:bg-transparent before:shadow-xs dark:before:bg-input/30 focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { forceMount: true, "data-slot": "radio-group-indicator", className: "pointer-events-none absolute left-1/2 top-1/2 z-10 flex size-4 -translate-x-1/2 -translate-y-1/2 items-center justify-center group-data-[state=unchecked]/radio:opacity-0", children: _jsx(CircleIcon, { className: "fill-primary absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
 }
 export { RadioGroup, RadioGroupItem };

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

@@ -1,5 +1,5 @@
 import { type GroupProps, type PanelProps, type SeparatorProps } from 'react-resizable-panels';
-declare function ResizablePanelGroup({ className, ...props }: GroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ResizablePanelGroup({ className, elementRef, ...props }: GroupProps): import("react/jsx-runtime").JSX.Element;
 type ResizablePanelProps = PanelProps & {
     groupResizeBehavior?: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,UAAU,EAEf,KAAK,UAAU,EAEf,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAA;AAG/B,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAW/D;AAED,KAAK,mBAAmB,GAAG,UAAU,GAAG;IACtC,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AAED,iBAAS,cAAc,CAAC,EACtB,mBAAmB,EAAE,oBAAoB,EACzC,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAErB;AAED,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,GAAG;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,2CAiBA;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,UAAU,EAEf,KAAK,UAAU,EAEf,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAA;AAG/B,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAwB3E;AAED,KAAK,mBAAmB,GAAG,UAAU,GAAG;IACtC,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AAED,iBAAS,cAAc,CAAC,EACtB,mBAAmB,EAAE,oBAAoB,EACzC,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAErB;AAED,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,GAAG;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,2CAiBA;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/resizable.js

@@ -1,15 +1,26 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GripVerticalIcon } from 'lucide-react';
+import * as React from 'react';
 import { Group, Panel, Separator, } from 'react-resizable-panels';
-import { cn } from '../../lib/utils';
-function ResizablePanelGroup({ className, ...props }) {
-    return (_jsx(Group, { "data-slot": "resizable-panel-group", className: cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className), ...props }));
+import { cn } from '../../lib/utils.js';
+function ResizablePanelGroup({ className, elementRef, ...props }) {
+    const setElementRef = React.useCallback((element) => {
+        // react-resizable-panels 4.4.1 emits aria-orientation on a generic
+        // container, where the attribute is invalid. Orientation belongs on
+        // the focusable separator rendered by ResizableHandle.
+        element?.removeAttribute('aria-orientation');
+        if (typeof elementRef === 'function')
+            elementRef(element);
+        else if (elementRef)
+            elementRef.current = element;
+    }, [elementRef]);
+    return (_jsx(Group, { "data-slot": "resizable-panel-group", elementRef: setElementRef, className: cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className), ...props }));
 }
 function ResizablePanel({ groupResizeBehavior: _groupResizeBehavior, ...props }) {
     return _jsx(Panel, { "data-slot": "resizable-panel", ...props });
 }
 function ResizableHandle({ withHandle, className, ...props }) {
-    return (_jsx(Separator, { "data-slot": "resizable-handle", className: cn('bg-border focus-visible:ring-ring focus-visible:outline-hidden relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90', className), ...props, children: withHandle && (_jsx("div", { className: "bg-border rounded-xs z-10 flex h-4 w-3 items-center justify-center border", children: _jsx(GripVerticalIcon, { className: "size-2.5" }) })) }));
+    return (_jsx(Separator, { "data-slot": "resizable-handle", className: cn('bg-border focus-visible:ring-ring focus-visible:outline-hidden relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90', className), ...props, children: withHandle && (_jsx("div", { className: "bg-border rounded-control z-10 flex h-4 w-3 items-center justify-center border", children: _jsx(GripVerticalIcon, { className: "size-2.5" }) })) }));
 }
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/dist/components/ui/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,oBAAoB,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,CAAA;AAEvE,UAAU,eACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IACvE,UAAU,CAAC,EAAE,oBAAoB,CAAA;IACjC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,QAAA,MAAM,UAAU,wFA8Cf,CAAA;AAGD,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,mBAAmB,CAAC,2CAqBtE;AAED,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,oBAAoB,GAC1B,CAAA"}
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,oBAAoB,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,CAAA;AAEvE,UAAU,eACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IACvE,UAAU,CAAC,EAAE,oBAAoB,CAAA;IACjC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,QAAA,MAAM,UAAU,wFA+Cf,CAAA;AAGD,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,mBAAmB,CAAC,2CAqBtE;AAED,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,oBAAoB,GAC1B,CAAA"}

package/dist/components/ui/scroll-area.js

@@ -2,17 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 const ScrollArea = React.forwardRef(({ className, children, safeBottom = false, scrollbars = 'vertical', viewportClassName, ...props }, ref) => {
     const hasVertical = scrollbars === 'vertical' || scrollbars === 'both';
     const hasHorizontal = scrollbars === 'horizontal' || scrollbars === 'both';
-    return (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, "data-slot": "scroll-area", "data-scrollbars": scrollbars, className: cn('relative', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", "data-safe-bottom": safeBottom || undefined, className: cn('focus-visible:ring-ring/50 size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px]', safeBottom &&
+    return (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, "data-slot": "scroll-area", "data-scrollbars": scrollbars, className: cn('relative', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", "data-safe-bottom": safeBottom || undefined, tabIndex: 0, className: cn('focus-visible:ring-ring size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:ring-1', safeBottom &&
                     'pb-[calc(var(--chat-safe-padding,0px)+var(--density-pane-padding))]', viewportClassName), children: children }), hasVertical ? _jsx(ScrollBar, { orientation: "vertical" }) : null, hasHorizontal ? _jsx(ScrollBar, { orientation: "horizontal" }) : null, hasVertical && hasHorizontal ? (_jsx(ScrollAreaPrimitive.Corner, { "data-slot": "scroll-area-corner" })) : null] }));
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 function ScrollBar({ className, orientation = 'vertical', ...props }) {
     return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn('flex touch-none select-none p-px transition-colors', orientation === 'vertical' &&
             'h-full w-2.5 border-l border-l-transparent', orientation === 'horizontal' &&
-            'h-2.5 flex-col border-t border-t-transparent', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-border relative flex-1 rounded-full" }) }));
+            'h-2.5 flex-col border-t border-t-transparent', className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-border rounded-pill relative flex-1" }) }));
 }
 export { ScrollArea, ScrollBar, };