@moldable-ai/ui 0.2.22 → 0.2.24

package/dist/components/rich-media-player.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FastForward, Pause, Play, Rewind, Volume2, VolumeX, } from 'lucide-react';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { cn } from '../lib/utils';
+import { cn } from '../lib/utils.js';
 const PLAYBACK_RATES = [0.75, 1, 1.25, 1.5, 2];
 function formatTime(value) {
     if (!Number.isFinite(value) || value < 0)
@@ -96,8 +96,8 @@ export function RichMediaPlayer({ className, kind, src, title, }) {
     };
     const controls = (_jsxs("div", { className: cn('flex flex-col gap-2 text-white', isAudio
             ? 'p-3'
-            : 'bg-gradient-to-b from-transparent via-black/65 to-neutral-950 px-3 pb-3 pt-10'), children: [_jsx("input", { "aria-label": "Seek", className: "h-2 w-full cursor-pointer accent-white disabled:cursor-default disabled:opacity-50", disabled: !canSeek, max: durationValue, min: 0, onChange: (event) => seekTo(Number(event.currentTarget.value)), step: 0.1, type: "range", value: Math.min(currentTime, durationValue) }), _jsxs("div", { className: "flex h-10 items-center gap-3 px-1", children: [_jsx("button", { "aria-label": isPlaying ? 'Pause' : 'Play', className: "hover:text-primary cursor-pointer rounded-full p-1 text-white transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white", onClick: togglePlayback, type: "button", children: isPlaying ? (_jsx(Pause, { className: "size-6" })) : (_jsx(Play, { className: "size-6" })) }), _jsx("button", { "aria-label": "Rewind 10 seconds", className: "cursor-pointer rounded-full p-1 text-white/85 transition-colors hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white", onClick: () => seekBy(-10), type: "button", children: _jsx(Rewind, { className: "size-5" }) }), _jsx("button", { "aria-label": "Forward 10 seconds", className: "cursor-pointer rounded-full p-1 text-white/85 transition-colors hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white", onClick: () => seekBy(10), type: "button", children: _jsx(FastForward, { className: "size-5" }) }), _jsxs("div", { className: "group/volume flex items-center gap-2", children: [_jsx("button", { "aria-label": isMuted ? 'Unmute' : 'Mute', className: "cursor-pointer rounded-full p-1 text-white/85 transition-colors hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white", onClick: toggleMuted, type: "button", children: isMuted || volume === 0 ? (_jsx(VolumeX, { className: "size-5" })) : (_jsx(Volume2, { className: "size-5" })) }), _jsx("input", { "aria-label": "Volume", className: "h-2 w-0 cursor-pointer accent-white opacity-0 transition-all focus:w-20 focus:opacity-100 group-hover/volume:w-20 group-hover/volume:opacity-100", max: 1, min: 0, onChange: (event) => changeVolume(Number(event.currentTarget.value)), step: 0.05, type: "range", value: isMuted ? 0 : volume })] }), _jsxs("span", { className: "ml-auto min-w-28 text-right font-mono text-xs text-white/80", children: [formatTime(currentTime), " / ", formatTime(durationValue)] }), _jsxs("button", { "aria-label": "Change playback speed", className: "cursor-pointer rounded px-2 py-1 font-mono text-xs text-white/85 transition-colors hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white", onClick: cyclePlaybackRate, type: "button", children: [playbackRate, "x"] })] })] }));
-    return (_jsx("div", { className: cn('not-prose overflow-hidden rounded-lg border border-black/5 bg-neutral-950 text-white shadow-sm dark:border-white/10', className), ref: containerRef, children: _jsxs("div", { className: cn('group/mediaplayer relative w-full overflow-hidden', !isAudio && 'bg-black'), children: [isAudio ? (_jsx("audio", { "aria-label": mediaTitle, onDurationChange: (event) => setDuration(event.currentTarget.duration), onEnded: () => setIsPlaying(false), onLoadedMetadata: (event) => setDuration(event.currentTarget.duration), onPause: () => setIsPlaying(false), onPlay: () => setIsPlaying(true), onTimeUpdate: (event) => setCurrentTime(event.currentTarget.currentTime), preload: "metadata", ref: setMediaElement, src: src })) : (_jsx("video", { className: "h-auto max-h-[600px] min-h-[225px] w-full bg-black object-contain", onClick: togglePlayback, onDurationChange: (event) => setDuration(event.currentTarget.duration), onEnded: () => setIsPlaying(false), onLoadedMetadata: (event) => setDuration(event.currentTarget.duration), onPause: () => setIsPlaying(false), onPlay: () => setIsPlaying(true), onTimeUpdate: (event) => setCurrentTime(event.currentTarget.currentTime), playsInline: true, preload: "metadata", ref: setMediaElement, src: src })), _jsx("div", { className: cn(isAudio
+            : 'bg-gradient-to-b from-transparent via-black/65 to-neutral-950 px-3 pb-3 pt-10'), children: [_jsx("input", { "aria-label": "Seek", className: "h-2 w-full cursor-pointer accent-white disabled:cursor-default disabled:opacity-50", disabled: !canSeek, max: durationValue, min: 0, onChange: (event) => seekTo(Number(event.currentTarget.value)), step: 0.1, type: "range", value: Math.min(currentTime, durationValue) }), _jsxs("div", { className: "flex h-toolbar items-center gap-control-gap px-1", children: [_jsx("button", { "aria-label": isPlaying ? 'Pause' : 'Play', className: "hover:text-primary focus-visible:ring-terminal-foreground/70 rounded-pill cursor-pointer p-1 text-white transition-colors focus-visible:outline-none focus-visible:ring-1", onClick: togglePlayback, type: "button", children: isPlaying ? (_jsx(Pause, { className: "size-6" })) : (_jsx(Play, { className: "size-6" })) }), _jsx("button", { "aria-label": "Rewind 10 seconds", className: "focus-visible:ring-terminal-foreground/70 rounded-pill cursor-pointer p-1 text-white/85 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-1", onClick: () => seekBy(-10), type: "button", children: _jsx(Rewind, { className: "size-5" }) }), _jsx("button", { "aria-label": "Forward 10 seconds", className: "focus-visible:ring-terminal-foreground/70 rounded-pill cursor-pointer p-1 text-white/85 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-1", onClick: () => seekBy(10), type: "button", children: _jsx(FastForward, { className: "size-5" }) }), _jsxs("div", { className: "group/volume flex items-center gap-2", children: [_jsx("button", { "aria-label": isMuted ? 'Unmute' : 'Mute', className: "focus-visible:ring-terminal-foreground/70 rounded-pill cursor-pointer p-1 text-white/85 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-1", onClick: toggleMuted, type: "button", children: isMuted || volume === 0 ? (_jsx(VolumeX, { className: "size-5" })) : (_jsx(Volume2, { className: "size-5" })) }), _jsx("input", { "aria-label": "Volume", className: "h-2 w-0 cursor-pointer accent-white opacity-0 transition-all focus:w-20 focus:opacity-100 group-hover/volume:w-20 group-hover/volume:opacity-100", max: 1, min: 0, onChange: (event) => changeVolume(Number(event.currentTarget.value)), step: 0.05, type: "range", value: isMuted ? 0 : volume })] }), _jsxs("span", { className: "text-ui-caption ml-auto min-w-28 text-right font-mono text-white/80", children: [formatTime(currentTime), " / ", formatTime(durationValue)] }), _jsxs("button", { "aria-label": "Change playback speed", className: "text-ui-caption focus-visible:ring-terminal-foreground/70 rounded-control cursor-pointer px-2 py-1 font-mono text-white/85 transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-1", onClick: cyclePlaybackRate, type: "button", children: [playbackRate, "x"] })] })] }));
+    return (_jsx("div", { className: cn('not-prose rounded-container overflow-hidden border border-black/5 bg-neutral-950 text-white shadow-sm dark:border-white/10', className), ref: containerRef, children: _jsxs("div", { className: cn('group/mediaplayer relative w-full overflow-hidden', !isAudio && 'bg-black'), children: [isAudio ? (_jsx("audio", { "aria-label": mediaTitle, onDurationChange: (event) => setDuration(event.currentTarget.duration), onEnded: () => setIsPlaying(false), onLoadedMetadata: (event) => setDuration(event.currentTarget.duration), onPause: () => setIsPlaying(false), onPlay: () => setIsPlaying(true), onTimeUpdate: (event) => setCurrentTime(event.currentTarget.currentTime), preload: "metadata", ref: setMediaElement, src: src })) : (_jsx("video", { className: "h-auto max-h-[600px] min-h-[225px] w-full bg-black object-contain", onClick: togglePlayback, onDurationChange: (event) => setDuration(event.currentTarget.duration), onEnded: () => setIsPlaying(false), onLoadedMetadata: (event) => setDuration(event.currentTarget.duration), onPause: () => setIsPlaying(false), onPlay: () => setIsPlaying(true), onTimeUpdate: (event) => setCurrentTime(event.currentTarget.currentTime), playsInline: true, preload: "metadata", ref: setMediaElement, src: src })), _jsx("div", { className: cn(isAudio
                         ? 'bg-neutral-950'
                         : 'absolute bottom-0 left-0 right-0 transition-transform duration-300', !isAudio &&
                         isPlaying &&

package/dist/components/ui/accordion.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDownIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Accordion({ ...props }) {
     return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
 }
@@ -10,9 +10,9 @@ function AccordionItem({ className, ...props }) {
     return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn('border-b last:border-b-0', className), ...props }));
 }
 function AccordionTrigger({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })] }) }));
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('focus-visible:border-ring focus-visible:ring-ring rounded-control text-ui-body flex flex-1 items-start justify-between gap-4 py-4 text-left font-medium outline-none transition-all hover:underline focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })] }) }));
 }
 function AccordionContent({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn('pb-4 pt-0', className), children: children }) }));
+    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-ui-body overflow-hidden", ...props, children: _jsx("div", { className: cn('pb-4 pt-0', className), children: children }) }));
 }
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/ui/alert-dialog.d.ts

@@ -1,11 +1,11 @@
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as React from 'react';
-import { Button } from './button';
+import { Button } from './button.js';
 declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogContent({ className, onKeyDown, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+declare function AlertDialogContent({ className, onKeyDown, onOpenAutoFocus, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
     size?: 'sm' | 'default' | 'lg';
 }): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/alert-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert-dialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAIjC,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAI3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAI1D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAW3D;AASD,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,SAAS,EACT,eAAe,EACf,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG;IAC7D,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;CAC/B,2CA6BA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW5E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CAWzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAQ/D;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,OAAe,EACf,YAAY,EACZ,OAAe,EACf,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,GAAG;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,2CAsBF;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,GACzD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,2CAU9D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAA"}

package/dist/components/ui/alert-dialog.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import { cn } from '../../lib/utils';
-import { Button } from './button';
-import { handleDialogPrimaryActionKeyDown } from './dialog-primary-action';
-import { Spinner } from './spinner';
+import { cn } from '../../lib/utils.js';
+import { Button } from './button.js';
+import { handleDialogPrimaryActionKeyDown } from './dialog-primary-action.js';
+import { Spinner } from './spinner.js';
 function AlertDialog({ ...props }) {
     return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
 }
@@ -17,11 +17,17 @@ function AlertDialogPortal({ ...props }) {
 function AlertDialogOverlay({ className, ...props }) {
     return (_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className), ...props }));
 }
-function AlertDialogContent({ className, onKeyDown, size = 'default', ...props }) {
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx("div", { "data-slot": "alert-dialog-positioner", className: "pointer-events-none fixed bottom-[max(var(--window-content-inset-bottom),var(--chat-safe-padding),1rem)] left-[max(var(--window-content-inset-inline-start),1rem)] right-[max(var(--window-content-inset-inline-end),1rem)] top-[max(var(--window-content-inset-top),1rem)] z-50 grid place-items-center", children: _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", "data-size": size, className: cn('bg-background group/alert-dialog-content rounded-overlay border-separator shadow-overlay pointer-events-auto relative grid max-h-full min-h-0 w-full gap-4 overflow-hidden border p-6 outline-none', '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', 'duration-[var(--motion-duration-normal)]', 'data-[size=default]:max-w-lg data-[size=lg]:max-w-2xl data-[size=sm]:max-w-xs', className), onKeyDown: (event) => {
+function focusAlertDialogContentOnOpen(event) {
+    event.preventDefault();
+    if (event.currentTarget instanceof HTMLElement) {
+        event.currentTarget.focus({ preventScroll: true });
+    }
+}
+function AlertDialogContent({ className, onKeyDown, onOpenAutoFocus, size = 'default', ...props }) {
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx("div", { "data-slot": "alert-dialog-positioner", className: "pointer-events-none fixed bottom-[max(var(--window-content-inset-bottom),var(--chat-safe-padding),1rem)] left-[max(var(--window-content-inset-inline-start),1rem)] right-[max(var(--window-content-inset-inline-end),1rem)] top-[max(var(--window-content-inset-top),1rem)] z-50 grid place-items-center", children: _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", "data-size": size, tabIndex: -1, className: cn('bg-background group/alert-dialog-content border-separator shadow-dialog rounded-dialog pointer-events-auto relative grid max-h-full min-h-0 w-full gap-4 overflow-hidden border p-6 outline-none', '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', 'duration-[var(--motion-duration-normal)]', 'data-[size=default]:max-w-lg data-[size=lg]:max-w-2xl data-[size=sm]:max-w-xs', className), onKeyDown: (event) => {
                         onKeyDown?.(event);
                         handleDialogPrimaryActionKeyDown(event);
-                    }, ...props }) })] }));
+                    }, onOpenAutoFocus: onOpenAutoFocus ?? focusAlertDialogContentOnOpen, ...props }) })] }));
 }
 function AlertDialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn('has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left', className), ...props }));
@@ -33,13 +39,13 @@ function AlertDialogBody({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-dialog-body", className: cn('min-h-0 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]', className), ...props }));
 }
 function AlertDialogTitle({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn('sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 text-lg font-semibold', className), ...props }));
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn('text-ui-heading sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2', className), ...props }));
 }
 function AlertDialogDescription({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn('text-text-secondary text-ui-body', className), ...props }));
 }
 function AlertDialogMedia({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-media", className: cn("bg-muted *:[svg:not([class*='size-'])]:size-8 mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2", className), ...props }));
+    return (_jsx("div", { "data-slot": "alert-dialog-media", className: cn("bg-muted rounded-container *:[svg:not([class*='size-'])]:size-8 mb-2 inline-flex size-16 items-center justify-center sm:group-data-[size=default]/alert-dialog-content:row-span-2", className), ...props }));
 }
 function AlertDialogAction({ className, children, disabled, loading = false, pending = false, pendingLabel, primary = false, variant = 'default', size = 'default', ...props }) {
     return (_jsx(Button, { variant: variant, size: size, disabled: disabled || pending, loading: loading, "aria-busy": pending || undefined, asChild: true, children: _jsxs(AlertDialogPrimitive.Action, { "data-slot": "alert-dialog-action", "data-dialog-primary-action": primary || undefined, "data-pending": pending || undefined, className: cn(className), ...props, children: [pending ? _jsx(Spinner, { "aria-hidden": "true" }) : null, pending && pendingLabel !== undefined ? pendingLabel : children] }) }));

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type IconButtonProps } from './icon-button';
+import { type IconButtonProps } from './icon-button.js';
 import { type VariantProps } from 'class-variance-authority';
 declare const alertVariants: (props?: ({
     tone?: "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,aAAa;;;8EAwBlB,CAAA;AAED,KAAK,SAAS,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AACxE,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;AAE9E,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,EAC/C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAA;CACtB;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,UAAU,2CAcZ;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,UAAU,iBACR,SAAQ,IAAI,CACV,eAAe,EACf,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CACpD;IACD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CActE;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,aAAa,EACb,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,SAAS,GACf,CAAA"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,aAAa;;;8EAyBlB,CAAA;AAED,KAAK,SAAS,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AACxE,KAAK,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;AAE9E,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,EAC/C,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAA;CACtB;AAED,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAmB,EACnB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,UAAU,2CAcZ;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,UAAU,iBACR,SAAQ,IAAI,CACV,eAAe,EACf,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CACpD;IACD,KAAK,EAAE,MAAM,CAAA;CACd;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CActE;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,aAAa,EACb,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,SAAS,GACf,CAAA"}

package/dist/components/ui/alert.js

@@ -1,21 +1,21 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { XIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
-import { IconButton } from './icon-button';
+import { cn } from '../../lib/utils.js';
+import { IconButton } from './icon-button.js';
 import { cva } from 'class-variance-authority';
-const alertVariants = cva('relative grid w-full items-start rounded-container border text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 has-[>[data-slot=alert-dismiss]]:pr-10 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', {
+const alertVariants = cva('text-ui-body relative grid w-full grid-cols-[0_1fr] items-start rounded-container border has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 has-[>[data-slot=alert-dismiss]]:pr-10 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', {
     variants: {
         tone: {
-            neutral: 'border-border bg-card text-card-foreground',
-            info: 'border-ring/35 bg-ring/8 text-foreground [&>svg]:text-ring',
-            success: 'border-success/35 bg-success/10 text-foreground [&>svg]:text-success',
-            warning: 'border-warning/40 bg-warning/12 text-foreground [&>svg]:text-warning',
-            danger: 'border-destructive/35 bg-destructive/8 text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+            neutral: 'border-neutral/35 bg-neutral/8 text-neutral-foreground [&>svg]:text-neutral',
+            info: 'border-info/35 bg-info/8 text-info-foreground [&>svg]:text-info',
+            success: 'border-success/35 bg-success/10 text-success-foreground [&>svg]:text-success',
+            warning: 'border-warning/40 bg-warning/12 text-warning-foreground [&>svg]:text-warning',
+            danger: 'border-destructive/35 bg-destructive/8 text-destructive [&>svg]:text-current',
         },
         density: {
-            compact: 'gap-y-0 px-3 py-2 text-xs',
-            default: 'gap-y-0.5 px-4 py-3 text-sm',
+            compact: 'text-ui-caption gap-y-0 px-3 py-2',
+            default: 'text-ui-body gap-y-0.5 px-4 py-3',
         },
     },
     defaultVariants: {
@@ -31,7 +31,7 @@ function AlertTitle({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-title", className: cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className), ...props }));
 }
 function AlertDescription({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-description", className: cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', className), ...props }));
+    return (_jsx("div", { "data-slot": "alert-description", className: cn('col-start-2 grid justify-items-start gap-1 text-current [&_p]:leading-relaxed', className), ...props }));
 }
 function AlertActions({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-actions", className: cn('col-start-2 mt-2 flex flex-wrap items-center gap-1.5', className), ...props }));

package/dist/components/ui/app-frame.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MaterialVariant } from './material';
+import type { MaterialVariant } from './material.js';
 export type AppFrameMode = 'auto' | 'embedded' | 'window';
 declare function resolveAppFrameMode(mode: AppFrameMode): Exclude<AppFrameMode, 'auto'>;
 export interface AppFrameProps extends React.ComponentProps<'div'> {
@@ -9,6 +9,12 @@ export interface AppFrameProps extends React.ComponentProps<'div'> {
      */
     mode?: AppFrameMode;
 }
+interface AppFrameRuntimeContextValue {
+    mode: Exclude<AppFrameMode, 'auto'>;
+    sidebarMaterialAvailable: boolean;
+    sidebarMaterialRegionId: string | null;
+}
+export declare function useAppFrameRuntime(): AppFrameRuntimeContextValue | null;
 declare function AppFrame({ mode, className, style, ...props }: AppFrameProps): import("react/jsx-runtime").JSX.Element;
 export interface AppFrameTitlebarProps extends React.ComponentPropsWithoutRef<'header'> {
     material?: MaterialVariant | 'none';

package/dist/components/ui/app-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/app-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAEjD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzD,iBAAS,mBAAmB,CAC1B,IAAI,EAAE,YAAY,GACjB,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAM/B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,iBAAS,QAAQ,CAAC,EAChB,IAAa,EACb,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,2CA+Bf;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAiCD,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAoB,EACpB,aAAa,EACb,aAAa,EACb,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA4CvB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAWvC;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,eAAe,CAAC,EACvB,UAAiB,EACjB,QAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAoBtB;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAoB,EACpB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmBxB;AAED,OAAO,EACL,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,CAAA"}
+{"version":3,"file":"app-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/app-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAEjD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAA;AAEzD,iBAAS,mBAAmB,CAC1B,IAAI,EAAE,YAAY,GACjB,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAM/B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,2BAA2B;IACnC,IAAI,EAAE,OAAO,CAAC,YAAY,EAAE,MAAM,CAAC,CAAA;IACnC,wBAAwB,EAAE,OAAO,CAAA;IACjC,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAA;CACvC;AAKD,wBAAgB,kBAAkB,IAAI,2BAA2B,GAAG,IAAI,CAEvE;AAsBD,iBAAS,QAAQ,CAAC,EAChB,IAAa,EACb,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,2CAoEf;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAiCD,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAoB,EACpB,aAAa,EACb,aAAa,EACb,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA4CvB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAWvC;AAED,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,eAAe,CAAC,EACvB,UAAiB,EACjB,QAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAoBtB;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,GAAG,MAAM,CAAA;CACpC;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAoB,EACpB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmBxB;AAED,OAAO,EACL,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,CAAA"}

package/dist/components/ui/app-frame.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { cn } from '../../lib/utils';
+import { MOLDABLE_MATERIAL_REGION_CHANGE_EVENT } from '../../lib/frame-lifecycle.js';
+import { cn } from '../../lib/utils.js';
 function resolveAppFrameMode(mode) {
     if (mode !== 'auto')
         return mode;
@@ -12,21 +13,56 @@ function resolveAppFrameMode(mode) {
         return hostMode;
     return window.parent === window ? 'window' : 'embedded';
 }
+const AppFrameRuntimeContext = React.createContext(null);
+export function useAppFrameRuntime() {
+    return React.useContext(AppFrameRuntimeContext);
+}
+function activeSidebarMaterialRegionId() {
+    if (typeof document === 'undefined' ||
+        document.documentElement.dataset.moldableMaterialRegionSidebar !== 'active') {
+        return null;
+    }
+    return (document.documentElement.dataset.moldableMaterialRegionSidebarId ?? null);
+}
+function sidebarMaterialAvailable() {
+    return (typeof document !== 'undefined' &&
+        document.documentElement.dataset.moldableNativeMaterialSidebar ===
+            'available');
+}
 function AppFrame({ mode = 'auto', className, style, ...props }) {
     const [resolvedMode, setResolvedMode] = React.useState(() => resolveAppFrameMode(mode));
+    const [sidebarMaterialRegionId, setSidebarMaterialRegionId] = React.useState(activeSidebarMaterialRegionId);
+    const [nativeSidebarMaterialAvailable, setNativeSidebarMaterialAvailable] = React.useState(sidebarMaterialAvailable);
     React.useEffect(() => {
-        setResolvedMode(resolveAppFrameMode(mode));
-        if (mode !== 'auto')
-            return;
-        const updateMode = () => setResolvedMode(resolveAppFrameMode('auto'));
+        const updateHostState = () => {
+            setResolvedMode(resolveAppFrameMode(mode));
+            setNativeSidebarMaterialAvailable(sidebarMaterialAvailable());
+            setSidebarMaterialRegionId(activeSidebarMaterialRegionId());
+        };
+        updateHostState();
+        const updateMode = updateHostState;
         window.addEventListener('moldable:host-context-change', updateMode);
-        return () => window.removeEventListener('moldable:host-context-change', updateMode);
+        window.addEventListener(MOLDABLE_MATERIAL_REGION_CHANGE_EVENT, updateHostState);
+        return () => {
+            window.removeEventListener('moldable:host-context-change', updateMode);
+            window.removeEventListener(MOLDABLE_MATERIAL_REGION_CHANGE_EVENT, updateHostState);
+        };
     }, [mode]);
-    return (_jsx("div", { "data-slot": "app-frame", "data-mode": resolvedMode, className: cn('text-foreground flex h-dvh min-h-0 min-w-0 flex-col overflow-hidden bg-[var(--surface-canvas,var(--background))]', className), style: {
-            paddingInlineStart: 'var(--window-safe-area-inline-start, 0px)',
-            paddingInlineEnd: 'var(--window-safe-area-inline-end, 0px)',
-            ...style,
-        }, ...props }));
+    const sidebarMaterialActive = resolvedMode === 'window' && sidebarMaterialRegionId !== null;
+    return (_jsx(AppFrameRuntimeContext.Provider, { value: {
+            mode: resolvedMode,
+            sidebarMaterialAvailable: nativeSidebarMaterialAvailable,
+            sidebarMaterialRegionId,
+        }, children: _jsx("div", { "data-slot": "app-frame", "data-mode": resolvedMode, "data-native-material-sidebar": sidebarMaterialActive ? 'active' : undefined, className: cn('text-foreground flex h-dvh min-h-0 min-w-0 flex-col overflow-hidden bg-[var(--surface-canvas,var(--background))]', className), style: {
+                paddingInlineStart: 'var(--window-safe-area-inline-start, 0px)',
+                paddingInlineEnd: 'var(--window-safe-area-inline-end, 0px)',
+                ...style,
+                ...(sidebarMaterialActive
+                    ? {
+                        background: 'linear-gradient(to right, transparent 0 var(--moldable-material-region-sidebar-width), var(--surface-canvas, var(--background)) var(--moldable-material-region-sidebar-width) 100%)',
+                    }
+                    : {}),
+            }, ...props }) }));
 }
 const WINDOW_TITLEBAR_INTERACTIVE_SELECTOR = [
     'a',
@@ -54,9 +90,9 @@ function postWindowTitlebarMessage(type) {
 }
 function AppFrameTitlebar({ className, material = 'regular', onDoubleClick, onPointerDown, style, ...props }) {
     return (_jsx("header", { "data-slot": "app-frame-titlebar", "data-material": material === 'none' ? undefined : material, "data-material-elevation": material === 'none' ? undefined : 'none', className: cn('border-border/70 flex shrink-0 items-center gap-2 border-b', material !== 'none' && 'moldable-material', className), style: {
-            minHeight: 'max(var(--density-toolbar-height, 2.5rem), var(--window-titlebar-height, 0px))',
-            paddingInlineStart: 'max(var(--density-pane-padding, 0.75rem), var(--window-control-inset-inline-start, 0px))',
-            paddingInlineEnd: 'max(var(--density-pane-padding, 0.75rem), var(--window-control-inset-inline-end, 0px))',
+            minHeight: 'max(var(--density-toolbar-height, 2.375rem), var(--window-titlebar-height, 0px))',
+            paddingInlineStart: 'max(var(--density-pane-padding, 0.625rem), var(--window-control-inset-inline-start, 0px))',
+            paddingInlineEnd: 'max(var(--density-pane-padding, 0.625rem), var(--window-control-inset-inline-end, 0px))',
             ...style,
         }, onPointerDown: (event) => {
             onPointerDown?.(event);
@@ -76,7 +112,7 @@ function AppFrameTitlebar({ className, material = 'regular', onDoubleClick, onPo
         }, ...props }));
 }
 function AppFrameToolbar({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "app-frame-toolbar", className: cn('flex min-h-9 min-w-0 flex-1 items-center gap-2 px-3 py-1.5', className), ...props }));
+    return (_jsx("div", { "data-slot": "app-frame-toolbar", className: cn('flex min-h-row min-w-0 flex-1 items-center gap-control-gap px-control-inline py-1', className), ...props }));
 }
 function AppFrameContent({ scrollable = true, chatSafe = true, className, style, ...props }) {
     return (_jsx("main", { "data-slot": "app-frame-content", "data-scrollable": scrollable, "data-chat-safe": chatSafe, className: cn('min-h-0 min-w-0 flex-1', scrollable ? 'overflow-auto' : 'overflow-hidden', className), style: {
@@ -87,7 +123,7 @@ function AppFrameContent({ scrollable = true, chatSafe = true, className, style,
         }, ...props }));
 }
 function AppFrameStatusbar({ className, material = 'regular', style, ...props }) {
-    return (_jsx("footer", { "data-slot": "app-frame-statusbar", "data-material": material === 'none' ? undefined : material, "data-material-elevation": material === 'none' ? undefined : 'none', className: cn('border-border/70 text-muted-foreground flex min-h-7 shrink-0 items-center gap-2 border-t px-3 py-1 text-xs', material !== 'none' && 'moldable-material', className), style: {
+    return (_jsx("footer", { "data-slot": "app-frame-statusbar", "data-material": material === 'none' ? undefined : material, "data-material-elevation": material === 'none' ? undefined : 'none', className: cn('border-border/70 text-muted-foreground text-ui-caption flex min-h-7 shrink-0 items-center gap-2 border-t px-3 py-1', material !== 'none' && 'moldable-material', className), style: {
             paddingBlockEnd: 'calc(var(--window-content-inset-bottom, 0px) + 0.25rem)',
             ...style,
         }, ...props }));

package/dist/components/ui/avatar.js

@@ -1,23 +1,23 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Avatar({ className, size = 'default', ...props }) {
-    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn('group/avatar relative flex size-8 shrink-0 select-none overflow-hidden rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6', className), ...props }));
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn('group/avatar rounded-pill relative flex size-8 shrink-0 select-none overflow-hidden data-[size=lg]:size-10 data-[size=sm]:size-6', className), ...props }));
 }
 function AvatarImage({ className, ...props }) {
     return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full', className), ...props }));
 }
 function AvatarFallback({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs', className), ...props }));
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('bg-muted text-muted-foreground rounded-pill text-ui-body group-data-[size=sm]/avatar:text-ui-caption flex size-full items-center justify-center', className), ...props }));
 }
 function AvatarBadge({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "avatar-badge", className: cn('bg-primary text-primary-foreground ring-background absolute bottom-0 right-0 z-10 inline-flex select-none items-center justify-center rounded-full ring-2', 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden', 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2', 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2', className), ...props }));
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn('bg-primary text-primary-foreground ring-background rounded-pill absolute bottom-0 right-0 z-10 inline-flex select-none items-center justify-center ring-2', 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden', 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2', 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2', className), ...props }));
 }
 function AvatarGroup({ className, ...props }) {
     return (_jsx("div", { "data-slot": "avatar-group", className: cn('*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2', className), ...props }));
 }
 function AvatarGroupCount({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn('bg-muted text-muted-foreground ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 [&>svg]:size-4', className), ...props }));
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn('bg-muted text-muted-foreground ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 rounded-pill text-ui-body relative flex size-8 shrink-0 items-center justify-center ring-2 [&>svg]:size-4', className), ...props }));
 }
 export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount, };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/ui/badge.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 badgeVariants = cva('inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none 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 transition-[color,box-shadow] overflow-hidden', {
+const badgeVariants = cva('text-ui-caption inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-pill border border-transparent px-2 py-0.5 font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring aria-invalid:border-destructive [&>svg]:pointer-events-none [&>svg]:size-3', {
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-            secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-            destructive: 'bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+            secondary: 'bg-neutral/12 text-neutral-foreground [a&]:hover:bg-neutral/18',
+            destructive: 'bg-destructive text-white [a&]:hover:bg-destructive/90 dark:bg-destructive/60',
             outline: 'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
             ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
             link: 'text-primary underline-offset-4 [a&]:hover:underline',

package/dist/components/ui/breadcrumb.js

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { ChevronRight, MoreHorizontal } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Breadcrumb({ ...props }) {
     return _jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
 }
 function BreadcrumbList({ className, ...props }) {
-    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn('text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5', className), ...props }));
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn('text-muted-foreground text-ui-body flex flex-wrap items-center gap-1.5 break-words sm:gap-2.5', className), ...props }));
 }
 function BreadcrumbItem({ className, ...props }) {
     return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn('inline-flex items-center gap-1.5', className), ...props }));

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

@@ -1,4 +1,4 @@
-import { Separator } from './separator';
+import { Separator } from './separator.js';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonGroupVariants: (props?: ({
     orientation?: "vertical" | "horizontal" | null | undefined;

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

@@ -1,10 +1,10 @@
 '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';
-const buttonGroupVariants = cva("flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2", {
+const buttonGroupVariants = cva("flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-control has-[>[data-slot=button-group]]:gap-2", {
     variants: {
         orientation: {
             horizontal: '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
@@ -20,7 +20,7 @@ function ButtonGroup({ className, orientation, ...props }) {
 }
 function ButtonGroupText({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'div';
-    return (_jsx(Comp, { className: cn("bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className), ...props }));
+    return (_jsx(Comp, { className: cn("bg-muted shadow-xs rounded-control text-ui-body flex items-center gap-control-gap border px-control-inline font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className), ...props }));
 }
 function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }) {
     return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn('bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto', className), ...props }));

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "icon" | "xs" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;;8EAgCnB,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AA4CH,iBAAS,MAAM,CAAC,EACd,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAqDb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,cAAc;;;8EAmCnB,CAAA;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AA4CH,iBAAS,MAAM,CAAC,EACd,WAAW,EAAE,QAAQ,EACrB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAe,EACf,OAAO,EACP,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAqDb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/button.js

@@ -1,28 +1,28 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { Spinner } from './spinner';
+import { cn } from '../../lib/utils.js';
+import { Spinner } from './spinner.js';
 import { cva } from 'class-variance-authority';
-const buttonVariants = cva("relative inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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", {
+const buttonVariants = cva("text-ui-body relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-control font-medium whitespace-nowrap outline-none transition-all focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring aria-invalid:border-destructive disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
-            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-            destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-            outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+            default: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80',
+            destructive: 'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80 dark:bg-destructive/60',
+            outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground active:bg-control-pressed dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:active:bg-control-pressed',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/65',
+            ghost: 'hover:bg-accent hover:text-accent-foreground active:bg-control-pressed dark:hover:bg-accent/50 dark:active:bg-control-pressed',
             link: 'text-primary underline-offset-4 hover:underline',
         },
         size: {
-            default: 'h-9 px-4 py-2 has-[>[data-slot=button-content]>svg]:px-3',
-            xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>[data-slot=button-content]>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: 'h-8 rounded-md gap-1.5 px-3 has-[>[data-slot=button-content]>svg]:px-2.5',
-            lg: 'h-10 rounded-md px-6 has-[>[data-slot=button-content]>svg]:px-4',
-            icon: 'size-9',
-            'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-            'icon-sm': 'size-8',
-            'icon-lg': 'size-10',
+            default: 'h-control-md px-control-inline has-[>[data-slot=button-content]>svg]:px-control-inline',
+            xs: "text-ui-caption h-control-xs gap-1 px-2 has-[>[data-slot=button-content]>svg]:px-2 [&_svg:not([class*='size-'])]:size-3",
+            sm: 'h-control-sm gap-1.5 px-control-inline has-[>[data-slot=button-content]>svg]:px-control-inline',
+            lg: 'h-control-lg px-[calc(var(--density-control-padding-inline)+0.25rem)] has-[>[data-slot=button-content]>svg]:px-control-inline',
+            icon: 'size-control-md',
+            'icon-xs': "size-control-xs [&_svg:not([class*='size-'])]:size-3",
+            'icon-sm': 'size-control-sm',
+            'icon-lg': 'size-control-lg',
         },
     },
     defaultVariants: {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/calendar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,KAAK,SAAS,EACd,SAAS,EAEV,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAkB,MAAM,UAAU,CAAA;AAEjD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,2CAuJA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CA+BxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/calendar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,KAAK,SAAS,EACd,SAAS,EAEV,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAkB,MAAM,UAAU,CAAA;AAEjD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,2CA0JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CA+BxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}