@moldable-ai/ui 0.2.22 → 0.2.24

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

@@ -1,20 +1,20 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
-import { Button } from './button';
-import { Input } from './input';
-import { Textarea } from './textarea';
+import { cn } from '../../lib/utils.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Textarea } from './textarea.js';
 import { cva } from 'class-variance-authority';
 function InputGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]', 'h-9 min-w-0 has-[>textarea]:h-auto', 
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('group/input-group border-input dark:bg-input/30 shadow-xs rounded-control relative flex w-full items-center border outline-none transition-[color,box-shadow]', 'h-control-md min-w-0 has-[>textarea]:h-auto', 
         // Variants based on alignment.
         'has-[>[data-align=inline-start]]:[&>input]:pl-2', 'has-[>[data-align=inline-end]]:[&>input]:pr-2', 'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3', 'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3', 
         // Focus state.
-        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]', 
+        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1', 
         // Error state.
-        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40', className), ...props }));
+        'has-[[data-slot][aria-invalid=true]]:border-destructive', className), ...props }));
 }
-const inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", {
+const inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-ui-body font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-control group-data-[disabled=true]/input-group:opacity-50", {
     variants: {
         align: {
             'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
@@ -35,13 +35,13 @@ function InputGroupAddon({ className, align = 'inline-start', ...props }) {
             e.currentTarget.parentElement?.querySelector('input')?.focus();
         }, ...props }));
 }
-const inputGroupButtonVariants = cva('text-sm shadow-none flex gap-2 items-center', {
+const inputGroupButtonVariants = cva('text-ui-body shadow-none flex gap-2 items-center', {
     variants: {
         size: {
-            xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-            sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
-            'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
-            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+            xs: "h-control-xs gap-1 px-2 rounded-control [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+            sm: 'h-control-sm px-control-inline gap-1.5 rounded-control has-[>svg]:px-control-inline',
+            'icon-xs': 'size-control-xs rounded-control p-0 has-[>svg]:p-0',
+            'icon-sm': 'size-control-sm p-0 has-[>svg]:p-0',
         },
     },
     defaultVariants: {
@@ -52,7 +52,7 @@ function InputGroupButton({ className, type = 'button', variant = 'ghost', size
     return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
 }
 function InputGroupText({ className, ...props }) {
-    return (_jsx("span", { className: cn("text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className), ...props }));
+    return (_jsx("span", { className: cn("text-muted-foreground text-ui-body flex items-center gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className), ...props }));
 }
 function InputGroupInput({ className, ...props }) {
     return (_jsx(Input, { "data-slot": "input-group-control", className: cn('flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent', className), ...props }));

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

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

package/dist/components/ui/input.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 Input({ className, type, ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: cn('file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', className), ...props }));
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn('file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs rounded-control text-16 file:text-ui-body md:text-ui-body h-control-md w-full min-w-0 border bg-transparent px-control-inline py-1 outline-none transition-[color,box-shadow] file:inline-flex file:h-control-xs file:border-0 file:bg-transparent file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-1', 'aria-invalid:border-destructive', className), ...props }));
 }
 export { Input };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from './text';
+import { Text } from './text.js';
 declare function Inspector({ className, ...props }: React.ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
 declare function InspectorHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function InspectorContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/inspector.js

@@ -1,21 +1,21 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
-import { Text } from './text';
+import { cn } from '../../lib/utils.js';
+import { Text } from './text.js';
 function Inspector({ className, ...props }) {
     return (_jsx("aside", { "data-slot": "inspector", className: cn('bg-background flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', className), ...props }));
 }
 function InspectorHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "inspector-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("div", { "data-slot": "inspector-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 InspectorContent({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "inspector-content", className: cn('min-h-0 flex-1 overflow-y-auto pb-[calc(var(--chat-safe-padding,0px)+0.75rem)]', className), ...props }));
+    return (_jsx("div", { "data-slot": "inspector-content", className: cn('min-h-0 flex-1 overflow-y-auto pb-[calc(var(--chat-safe-padding,0px)+var(--density-pane-padding))]', className), ...props }));
 }
 function InspectorSection({ title, actions, className, children, ...props }) {
-    return (_jsxs("section", { "data-slot": "inspector-section", className: cn('border-border/60 border-b px-3 py-3 last:border-b-0', className), ...props, children: [title || actions ? (_jsxs("div", { "data-slot": "inspector-section-header", className: "mb-2 flex min-w-0 items-center gap-2", children: [title ? (_jsx(Text, { variant: "small-strong", color: "secondary", truncate: true, className: "uppercase tracking-wide", children: title })) : null, actions ? (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: actions })) : null] })) : null, _jsx("div", { "data-slot": "inspector-section-content", className: "space-y-2", children: children })] }));
+    return (_jsxs("section", { "data-slot": "inspector-section", className: cn('border-border/60 border-b p-pane last:border-b-0', className), ...props, children: [title || actions ? (_jsxs("div", { "data-slot": "inspector-section-header", className: "mb-2 flex min-w-0 items-center gap-2", children: [title ? (_jsx(Text, { variant: "small-strong", color: "secondary", truncate: true, className: "uppercase tracking-wide", children: title })) : null, actions ? (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: actions })) : null] })) : null, _jsx("div", { "data-slot": "inspector-section-content", className: "space-y-2", children: children })] }));
 }
 function InspectorRow({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "inspector-row", className: cn('grid min-h-7 grid-cols-[minmax(5rem,0.8fr)_minmax(0,1.2fr)] items-center gap-3', className), ...props }));
+    return (_jsx("div", { "data-slot": "inspector-row", className: cn('grid min-h-row grid-cols-[minmax(5rem,0.8fr)_minmax(0,1.2fr)] items-center gap-control-gap', className), ...props }));
 }
 function InspectorLabel({ className, ...props }) {
     return (_jsx(Text, { as: "label", variant: "small", color: "secondary", "data-slot": "inspector-label", className: cn('truncate', className), ...props }));

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Separator } from './separator';
+import { Separator } from './separator.js';
 import { type VariantProps } from 'class-variance-authority';
 declare function ItemGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/item.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../lib/utils';
-import { Separator } from './separator';
+import { cn } from '../../lib/utils.js';
+import { Separator } from './separator.js';
 import { cva } from 'class-variance-authority';
 function ItemGroup({ className, ...props }) {
     return (_jsx("div", { role: "list", "data-slot": "item-group", className: cn('group/item-group flex flex-col', className), ...props }));
@@ -10,7 +10,7 @@ function ItemGroup({ className, ...props }) {
 function ItemSeparator({ className, ...props }) {
     return (_jsx(Separator, { "data-slot": "item-separator", orientation: "horizontal", className: cn('my-0', className), ...props }));
 }
-const itemVariants = cva('group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', {
+const itemVariants = cva('group/item flex items-center border border-transparent text-ui-body rounded-control transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-1', {
     variants: {
         variant: {
             default: 'bg-transparent',
@@ -35,8 +35,8 @@ const itemMediaVariants = cva('flex shrink-0 items-center justify-center gap-2 g
     variants: {
         variant: {
             default: 'bg-transparent',
-            icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
-            image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+            icon: "size-8 border rounded-control bg-muted [&_svg:not([class*='size-'])]:size-4",
+            image: 'size-10 rounded-control overflow-hidden [&_img]:size-full [&_img]:object-cover',
         },
     },
     defaultVariants: {
@@ -50,10 +50,10 @@ function ItemContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "item-content", className: cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className), ...props }));
 }
 function ItemTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "item-title", className: cn('flex w-fit items-center gap-2 text-sm font-medium leading-snug', className), ...props }));
+    return (_jsx("div", { "data-slot": "item-title", className: cn('text-ui-body flex w-fit items-center gap-2 font-medium leading-snug', className), ...props }));
 }
 function ItemDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "item-description", className: cn('text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
+    return (_jsx("p", { "data-slot": "item-description", className: cn('text-muted-foreground text-ui-body line-clamp-2 text-balance font-normal leading-normal', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
 }
 function ItemActions({ className, ...props }) {
     return (_jsx("div", { "data-slot": "item-actions", className: cn('flex items-center gap-2', className), ...props }));

package/dist/components/ui/kbd.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Kbd({ className, ...props }) {
-    return (_jsx("kbd", { "data-slot": "kbd", className: cn('bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium', "[&_svg:not([class*='size-'])]:size-3", '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10', className), ...props }));
+    return (_jsx("kbd", { "data-slot": "kbd", className: cn('bg-muted text-muted-foreground rounded-control text-ui-caption pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 px-1 font-sans font-medium', "[&_svg:not([class*='size-'])]:size-3", '[[data-slot=tooltip-content]_&]:bg-foreground/10 [[data-slot=tooltip-content]_&]:text-popover-foreground dark:[[data-slot=tooltip-content]_&]:bg-foreground/15', className), ...props }));
 }
 function KbdGroup({ className, ...props }) {
     return (_jsx("kbd", { "data-slot": "kbd-group", className: cn('inline-flex items-center gap-1', className), ...props }));

package/dist/components/ui/label.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Label({ className, ...props }) {
-    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn('flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', className), ...props }));
+    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn('text-ui-body flex select-none items-center gap-2 font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50', className), ...props }));
 }
 export { Label };

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

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,KAAK,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AA+CvD,KAAK,SAAS,GAAG,IAAI,CACnB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,cAAc,GAAG,UAAU,CAC5B,GAAG;IACF,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,cAAc,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACjC,qBAAqB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACxC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,QAAQ,EACR,aAAsB,EACtB,cAAc,EACd,qBAAqB,EACrB,iBAAiB,EACjB,QAAQ,EACR,WAAwB,EACxB,IAAY,EACZ,QAAgB,EAChB,IAAI,EACJ,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,2CAoMX;AAED,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;AAEjE,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAiBlB;AAED,KAAK,sBAAsB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA;AAErE,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAiBzE;AAED,KAAK,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,OAAO,EACP,aAAa,EACb,OAAO,EACP,GAAG,EACH,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,aAAa,2CA+Ef;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ1E;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAQ3B;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,KAAK,SAAS,EACd,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,GACvB,CAAA"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,KAAK,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AA+CvD,KAAK,SAAS,GAAG,IAAI,CACnB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,cAAc,GAAG,UAAU,CAC5B,GAAG;IACF,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,cAAc,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACjC,qBAAqB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACxC,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,QAAQ,EACR,aAAsB,EACtB,cAAc,EACd,qBAAqB,EACrB,iBAAiB,EACjB,QAAQ,EACR,WAAwB,EACxB,IAAY,EACZ,QAAgB,EAChB,IAAI,EACJ,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,2CAoMX;AAED,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;AAEjE,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAiBlB;AAED,KAAK,sBAAsB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA;AAErE,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAiBzE;AAED,KAAK,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,OAAO,EACP,aAAa,EACb,OAAO,EACP,GAAG,EACH,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,aAAa,2CA+Ef;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ1E;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAW3B;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,KAAK,SAAS,EACd,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,GACvB,CAAA"}

package/dist/components/ui/list.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { getCollectionItemsInDomOrder, isInteractiveDescendant, } from './collection-navigation';
+import { cn } from '../../lib/utils.js';
+import { getCollectionItemsInDomOrder, isInteractiveDescendant, } from './collection-navigation.js';
 const ListContext = React.createContext(null);
 const ListSectionContext = React.createContext(null);
 function useListContext(component) {
@@ -177,7 +177,7 @@ function ListSectionHeader({ className, ...props }) {
     if (!context) {
         throw new Error('ListSectionHeader must be used inside ListSection');
     }
-    return (_jsx("div", { id: context.headerId, "data-slot": "list-section-header", className: cn('text-muted-foreground px-2.5 py-1 text-xs font-medium', className), ...props }));
+    return (_jsx("div", { id: context.headerId, "data-slot": "list-section-header", className: cn('text-muted-foreground text-ui-caption px-2.5 py-1 font-medium', className), ...props }));
 }
 function ListItem({ className, children, value, disabled = false, onClick, onDoubleClick, onFocus, ref, role, ...props }) {
     const context = useListContext('ListItem');
@@ -195,7 +195,7 @@ function ListItem({ className, children, value, disabled = false, onClick, onDou
     }, [ref]);
     React.useLayoutEffect(() => registerItem(value, itemRef.current, isDisabled), [isDisabled, registerItem, value]);
     const resolvedRole = role ?? (context.selectionMode === 'none' ? 'listitem' : 'option');
-    return (_jsx("div", { ref: setRef, role: resolvedRole, tabIndex: isDisabled ? -1 : isActive ? 0 : -1, "aria-disabled": isDisabled || undefined, "aria-selected": context.selectionMode === 'none' ? undefined : isSelected, "data-slot": "list-item", "data-active": isActive || undefined, "data-disabled": isDisabled || undefined, "data-selected": context.selectionMode === 'none' ? undefined : isSelected, "data-value": value, className: cn('group/list-item relative flex min-w-0 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm outline-none transition-colors duration-100', 'hover:bg-accent/60 focus-visible:bg-accent focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', className), onClick: (event) => {
+    return (_jsx("div", { ref: setRef, role: resolvedRole, tabIndex: isDisabled ? -1 : isActive ? 0 : -1, "aria-disabled": isDisabled || undefined, "aria-selected": context.selectionMode === 'none' ? undefined : isSelected, "data-slot": "list-item", "data-active": isActive || undefined, "data-disabled": isDisabled || undefined, "data-selected": context.selectionMode === 'none' ? undefined : isSelected, "data-value": value, className: cn('group/list-item rounded-control text-ui-body relative flex min-w-0 cursor-default select-none items-center gap-2 px-2.5 py-2 outline-none transition-colors duration-100', 'hover:bg-accent/60 focus-visible:bg-accent focus-visible:ring-ring focus-visible:ring-1', 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', className), onClick: (event) => {
             onClick?.(event);
             if (event.defaultPrevented ||
                 isDisabled ||
@@ -227,7 +227,7 @@ function ListItemTitle({ className, ...props }) {
     return (_jsx("div", { "data-slot": "list-item-title", className: cn('truncate font-medium', className), ...props }));
 }
 function ListItemDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "list-item-description", className: cn('text-muted-foreground truncate text-xs', className), ...props }));
+    return (_jsx("p", { "data-slot": "list-item-description", className: cn('text-muted-foreground text-ui-caption truncate', className), ...props }));
 }
 function ListItemActions({ className, ...props }) {
     return (_jsx("div", { "data-slot": "list-item-actions", className: cn('ml-auto flex shrink-0 items-center gap-1', className), ...props }));

package/dist/components/ui/material.js

@@ -1,14 +1,14 @@
 '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 materialVariants = cva('moldable-material border text-inherit', {
     variants: {
         shape: {
             rounded: 'rounded-overlay',
-            capsule: 'rounded-full',
-            circle: 'aspect-square rounded-full',
+            capsule: 'rounded-pill',
+            circle: 'aspect-square rounded-pill',
         },
     },
     defaultVariants: {

package/dist/components/ui/menu-items.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type HostNativeMenuOptions, type MenuItems } from '../../lib/host-native-menu.js';
+interface DeclarativeMenuStateOptions {
+    items?: MenuItems[];
+    onSelectItem?: (id: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onFallback?: () => void;
+}
+interface DeclarativeMenuState {
+    nativeOpen: boolean;
+    portableOpen: boolean | undefined;
+    onPortableOpenChange: (open: boolean) => void;
+    requestNativeMenu: (options: HostNativeMenuOptions) => boolean;
+}
+export declare function useDeclarativeMenuState({ items, onSelectItem, open, defaultOpen, onOpenChange, onFallback, }: DeclarativeMenuStateOptions): DeclarativeMenuState;
+export declare function formatMenuShortcut(shortcut: MenuItems['shortcut']): string | null;
+export declare function MenuItemContents({ item, shortcutSlot, }: {
+    item: Exclude<MenuItems, {
+        kind: 'separator';
+    }>;
+    shortcutSlot: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function hasMenuContentChild(children: React.ReactNode, contentType: React.ElementType): boolean;
+export declare function withoutMenuContentChild(children: React.ReactNode, contentType: React.ElementType): React.ReactNode;
+export {};
+//# sourceMappingURL=menu-items.d.ts.map

package/dist/components/ui/menu-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-items.d.ts","sourceRoot":"","sources":["../../../src/components/ui/menu-items.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,SAAS,EAGf,MAAM,4BAA4B,CAAA;AAUnC,UAAU,2BAA2B;IACnC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,UAAU,oBAAoB;IAC5B,UAAU,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,OAAO,GAAG,SAAS,CAAA;IACjC,oBAAoB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7C,iBAAiB,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,OAAO,CAAA;CAC/D;AAED,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,UAAU,GACX,EAAE,2BAA2B,GAAG,oBAAoB,CAqEpD;AAED,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,GAC9B,MAAM,GAAG,IAAI,CAQf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,YAAY,GACb,EAAE;IACD,IAAI,EAAE,OAAO,CAAC,SAAS,EAAE;QAAE,IAAI,EAAE,WAAW,CAAA;KAAE,CAAC,CAAA;IAC/C,YAAY,EAAE,MAAM,CAAA;CACrB,2CAiBA;AAED,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,WAAW,EAAE,KAAK,CAAC,WAAW,GAC7B,OAAO,CAUT;AAED,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,WAAW,EAAE,KAAK,CAAC,WAAW,GAC7B,KAAK,CAAC,SAAS,CAajB"}

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, {}) })] }));
 }