@moldable-ai/ui 0.2.22 → 0.2.24

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.js

@@ -1,7 +1,7 @@
 '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 motion-reduce:animate-none', className), ...props }));
 }

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"}

package/dist/components/ui/status.js

@@ -1,24 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
-const statusVariants = cva('inline-flex min-w-0 items-center gap-1.5 text-xs font-medium leading-4', {
+const statusVariants = cva('text-ui-caption inline-flex min-w-0 items-center gap-1.5 font-medium', {
     variants: {
         variant: {
-            neutral: 'text-muted-foreground',
-            success: 'text-success',
-            warning: 'text-warning-foreground',
-            error: 'text-destructive',
-            running: 'text-status-running',
-            pending: 'text-status-pending',
+            info: 'text-info-foreground [&_[data-slot=status-indicator]]:bg-info',
+            neutral: 'text-neutral-foreground [&_[data-slot=status-indicator]]:bg-neutral',
+            success: 'text-success-foreground [&_[data-slot=status-indicator]]:bg-success',
+            warning: 'text-warning-foreground [&_[data-slot=status-indicator]]:bg-warning',
+            error: 'text-destructive [&_[data-slot=status-indicator]]:bg-destructive',
+            running: 'text-success-foreground [&_[data-slot=status-indicator]]:bg-status-running',
+            pending: 'text-pending-foreground [&_[data-slot=status-indicator]]:bg-status-pending',
         },
     },
     defaultVariants: {
         variant: 'neutral',
     },
 });
-const statusDotVariants = cva('size-1.5 shrink-0 rounded-full bg-current', {
+const statusDotVariants = cva('size-1.5 shrink-0 rounded-pill bg-current', {
     variants: {
         animated: {
             true: 'motion-safe:animate-pulse',

package/dist/components/ui/switch.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Switch({ className, size = 'default', ...props }) {
-    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn('data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch shadow-xs peer inline-flex shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=sm]:h-3.5 data-[size=default]:w-8 data-[size=sm]:w-6', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn('bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3') }) }));
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn('focus-visible:border-ring focus-visible:ring-ring group/switch rounded-pill peer relative inline-flex h-control-xs shrink-0 cursor-pointer items-center border border-transparent bg-transparent outline-none transition-all before:pointer-events-none before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:rounded-pill before:border before:border-transparent before:shadow-xs data-[state=checked]:before:bg-primary data-[state=unchecked]:before:bg-input dark:data-[state=unchecked]:before:bg-input/80 focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:w-8 data-[size=default]:before:h-[1.15rem] data-[size=default]:before:w-8 data-[size=sm]:w-6 data-[size=sm]:before:h-3.5 data-[size=sm]:before:w-6', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn('bg-background border-separator-strong shadow-xs dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground rounded-pill pointer-events-none relative z-10 block border ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3') }) }));
 }
 export { Switch };

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

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/ui/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;AAIhE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IAC/D,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,iBAAS,KAAK,CAAC,EAAE,OAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAgBtE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAQ1E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAW1E;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,eAAe,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;CAChD;AAED,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,QAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,2CA+Cf;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAgBrE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAgBrE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,2CAQjC;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,CAAA"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/ui/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;AAIhE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IAC/D,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,iBAAS,KAAK,CAAC,EAAE,OAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAgBtE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAQ1E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAW1E;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,eAAe,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;CAChD;AAED,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,QAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,2CA+Cf;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAerE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAgBrE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,2CAQjC;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,CAAA"}

package/dist/components/ui/table.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { isInteractiveDescendant } from './collection-navigation';
+import { cn } from '../../lib/utils.js';
+import { isInteractiveDescendant } from './collection-navigation.js';
 const TableDensityContext = React.createContext('default');
 function Table({ density = 'default', className, ...props }) {
-    return (_jsx(TableDensityContext.Provider, { value: density, children: _jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", "data-density": density, className: cn('w-full caption-bottom text-sm', className), ...props }) }) }));
+    return (_jsx(TableDensityContext.Provider, { value: density, children: _jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", "data-density": density, className: cn('text-ui-body w-full caption-bottom', className), ...props }) }) }));
 }
 function TableHeader({ className, ...props }) {
     return (_jsx("thead", { "data-slot": "table-header", className: cn('[&_tr]:border-b', className), ...props }));
@@ -23,7 +23,7 @@ function TableRow({ selected, disabled = false, onSelectionChange, onClick, onKe
             onSelectionChange?.(!selected);
     };
     return (_jsx("tr", { "data-slot": "table-row", "data-state": selected ? 'selected' : undefined, "data-disabled": disabled ? '' : undefined, "aria-selected": selectable ? Boolean(selected) : undefined, "aria-disabled": disabled || undefined, tabIndex: selectable && !disabled ? 0 : undefined, className: cn('hover:bg-muted/50 data-[state=selected]:bg-accent data-[state=selected]:text-accent-foreground border-b transition-colors', selectable &&
-            'focus-visible:ring-ring/50 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-inset', disabled && 'pointer-events-none cursor-not-allowed opacity-50', className), onClick: (event) => {
+            'focus-visible:ring-ring cursor-pointer outline-none focus-visible:ring-1 focus-visible:ring-inset', disabled && 'pointer-events-none cursor-not-allowed opacity-50', className), onClick: (event) => {
             onClick?.(event);
             if (!event.defaultPrevented &&
                 selectable &&
@@ -43,13 +43,13 @@ function TableRow({ selected, disabled = false, onSelectionChange, onClick, onKe
 }
 function TableHead({ className, ...props }) {
     const density = React.useContext(TableDensityContext);
-    return (_jsx("th", { "data-slot": "table-head", className: cn('text-foreground whitespace-nowrap px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', density === 'compact' && 'h-7 text-xs', density === 'default' && 'h-10', density === 'comfortable' && 'h-12 px-3', className), ...props }));
+    return (_jsx("th", { "data-slot": "table-head", className: cn('text-foreground h-row whitespace-nowrap px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', density === 'compact' && 'text-ui-caption', density === 'comfortable' && 'px-control-inline', className), ...props }));
 }
 function TableCell({ className, ...props }) {
     const density = React.useContext(TableDensityContext);
-    return (_jsx("td", { "data-slot": "table-cell", className: cn('whitespace-nowrap align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', density === 'compact' && 'px-2 py-1 text-xs', density === 'default' && 'p-2', density === 'comfortable' && 'px-3 py-3', className), ...props }));
+    return (_jsx("td", { "data-slot": "table-cell", className: cn('h-row whitespace-nowrap align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', density === 'compact' && 'text-ui-caption px-2 py-1', density === 'default' && 'p-2', density === 'comfortable' && 'px-control-inline py-3', className), ...props }));
 }
 function TableCaption({ className, ...props }) {
-    return (_jsx("caption", { "data-slot": "table-caption", className: cn('text-muted-foreground mt-4 text-sm', className), ...props }));
+    return (_jsx("caption", { "data-slot": "table-caption", className: cn('text-muted-foreground text-ui-body mt-4', className), ...props }));
 }
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/components/ui/tabs.js

@@ -1,12 +1,12 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
 function Tabs({ className, orientation = 'horizontal', ...props }) {
     return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, orientation: orientation, className: cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className), ...props }));
 }
-const tabsListVariants = cva('rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col', {
+const tabsListVariants = cva('rounded-group p-[3px] group-data-[orientation=horizontal]/tabs:h-control-md data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col', {
     variants: {
         variant: {
             default: 'bg-muted',
@@ -21,7 +21,7 @@ function TabsList({ className, variant = 'default', ...props }) {
     return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
 }
 function TabsTrigger({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-all focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", 'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent', 'data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground', 'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100', className), ...props }));
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("focus-visible:border-ring focus-visible:ring-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground rounded-control text-ui-body relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap border border-transparent px-2 py-1 font-medium transition-all focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", 'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent', 'data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground', 'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100', className), ...props }));
 }
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn('flex-1 outline-none', className), ...props }));

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const textVariants: (props?: ({
-    variant?: "small" | "strong" | "large" | "heading1" | "heading2" | "large-strong" | "regular" | "small-strong" | "mini" | "mini-strong" | "mono" | "mono-strong" | "small-mono" | null | undefined;
-    color?: "link" | "destructive" | "secondary" | "inherit" | "disabled" | "success" | "warning" | "primary" | "tertiary" | "accent" | null | undefined;
+    variant?: "small" | "strong" | "regular" | "heading1" | "heading2" | "large" | "large-strong" | "small-strong" | "mini" | "mini-strong" | "mono" | "mono-strong" | "small-mono" | null | undefined;
+    color?: "link" | "disabled" | "destructive" | "secondary" | "inherit" | "success" | "warning" | "primary" | "tertiary" | "accent" | null | undefined;
     align?: "center" | "left" | "right" | null | undefined;
     truncate?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/ui/text.js

@@ -1,34 +1,34 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
 const textVariants = cva('min-w-0 text-foreground', {
     variants: {
         variant: {
-            heading1: 'text-2xl font-semibold leading-tight tracking-tight',
-            heading2: 'text-lg font-semibold leading-tight tracking-tight',
-            large: 'text-base font-normal leading-6',
-            'large-strong': 'text-base font-medium leading-6',
-            regular: 'text-[13px] font-normal leading-5',
-            strong: 'text-[13px] font-medium leading-5',
-            small: 'text-xs font-normal leading-4',
-            'small-strong': 'text-xs font-medium leading-4',
-            mini: 'text-[10px] font-normal leading-3',
-            'mini-strong': 'text-[10px] font-medium leading-3',
-            mono: 'font-mono text-[13px] font-normal leading-5',
-            'mono-strong': 'font-mono text-[13px] font-semibold leading-5',
-            'small-mono': 'font-mono text-xs font-normal leading-4',
+            heading1: 'text-ui-display',
+            heading2: 'text-ui-heading',
+            large: 'text-16 font-normal leading-5',
+            'large-strong': 'text-ui-title',
+            regular: 'text-ui-body font-normal',
+            strong: 'text-ui-body font-medium',
+            small: 'text-ui-caption font-normal',
+            'small-strong': 'text-ui-caption font-medium',
+            mini: 'text-11 font-normal leading-3',
+            'mini-strong': 'text-11 font-medium leading-3',
+            mono: 'text-ui-body font-mono font-normal',
+            'mono-strong': 'text-ui-body font-mono font-semibold',
+            'small-mono': 'text-ui-caption font-mono font-normal',
         },
         color: {
-            primary: 'text-foreground',
-            secondary: 'text-muted-foreground',
-            tertiary: 'text-muted-foreground/70',
-            disabled: 'text-muted-foreground/50',
+            primary: 'text-text-primary',
+            secondary: 'text-text-secondary',
+            tertiary: 'text-text-tertiary',
+            disabled: 'text-text-disabled',
             link: 'text-primary',
             accent: 'text-primary',
             destructive: 'text-destructive',
-            success: 'text-success',
+            success: 'text-success-foreground',
             warning: 'text-warning-foreground',
             inherit: 'text-inherit',
         },

package/dist/components/ui/textarea.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 Textarea({ className, ...props }) {
-    return (_jsx("textarea", { "data-slot": "textarea", className: cn('border-input placeholder: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 field-sizing-content shadow-xs flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', className), ...props }));
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn('border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring aria-invalid:border-destructive dark:bg-input/30 field-sizing-content shadow-xs rounded-control text-16 md:text-ui-body flex min-h-16 w-full border bg-transparent px-3 py-2 outline-none transition-[color,box-shadow] focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
 }
 export { Textarea };

package/dist/components/ui/toggle-group.d.ts

@@ -1,6 +1,6 @@
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as React from 'react';
-import { toggleVariants } from './toggle';
+import { toggleVariants } from './toggle.js';
 import { type VariantProps } from 'class-variance-authority';
 declare function ToggleGroup({ className, variant, size, spacing, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
     spacing?: number;