@moldable-ai/ui 0.2.20 → 0.2.21

package/dist/components/ui/empty.js

@@ -2,11 +2,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
 import { cva } from 'class-variance-authority';
-function Empty({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty", className: cn('flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12', className), ...props }));
+const emptyVariants = cva('group/empty flex min-w-0 flex-col items-center justify-center text-balance text-center', {
+    variants: {
+        variant: {
+            compact: 'gap-3 p-4',
+            pane: 'flex-1 gap-4 p-6',
+            full: 'min-h-full flex-1 gap-6 p-8 md:p-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'pane',
+    },
+});
+function Empty({ className, safeBottom = false, variant = 'pane', ...props }) {
+    return (_jsx("div", { "data-slot": "empty", "data-safe-bottom": safeBottom || undefined, "data-variant": variant, className: cn(emptyVariants({ variant }), safeBottom &&
+            'pb-[calc(var(--chat-safe-padding,0px)+var(--density-pane-padding))]', className), ...props }));
 }
 function EmptyHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-header", className: cn('flex max-w-sm flex-col items-center gap-2 text-center', className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-header", className: cn('flex max-w-sm flex-col items-center gap-2 text-center group-data-[variant=compact]/empty:gap-1.5', className), ...props }));
 }
 const emptyMediaVariants = cva('flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0', {
     variants: {
@@ -23,12 +36,12 @@ function EmptyMedia({ className, variant = 'default', ...props }) {
     return (_jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn(emptyMediaVariants({ variant, className })), ...props }));
 }
 function EmptyTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-title", className: cn('text-lg font-medium tracking-tight', className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-title", className: cn('font-medium tracking-tight group-data-[variant=compact]/empty:text-sm group-data-[variant=full]/empty:text-lg group-data-[variant=pane]/empty:text-base', className), ...props }));
 }
 function EmptyDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "empty-description", className: cn('text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
+    return (_jsx("p", { "data-slot": "empty-description", className: cn('text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed group-data-[variant=compact]/empty:text-xs/relaxed [&>a]:underline [&>a]:underline-offset-4', className), ...props }));
 }
 function EmptyContent({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "empty-content", className: cn('flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm', className), ...props }));
+    return (_jsx("div", { "data-slot": "empty-content", className: cn('flex w-full min-w-0 max-w-sm flex-col items-center gap-3 text-balance text-sm group-data-[variant=compact]/empty:gap-2', className), ...props }));
 }
-export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, emptyVariants, };

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

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/ui/grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AAmDvD,KAAK,SAAS,GAAG,IAAI,CACnB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,cAAc,GAAG,UAAU,CAC5B,GAAG;IACF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,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,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,QAAQ,EACR,OAAW,EACX,aAAsB,EACtB,cAAc,EACd,qBAAqB,EACrB,iBAAiB,EACjB,QAAQ,EACR,IAAY,EACZ,QAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,2CA6NX;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,GAAG,KAAK,EACT,EAAE,aAAa,2CAgFf;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAQ3B;AAED,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,aAAa,EACb,KAAK,SAAS,EACd,KAAK,iBAAiB,GACvB,CAAA"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/ui/grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,KAAK,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AAuCvD,KAAK,SAAS,GAAG,IAAI,CACnB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,cAAc,GAAG,UAAU,CAC5B,GAAG;IACF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,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,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,QAAQ,EACR,OAAW,EACX,aAAsB,EACtB,cAAc,EACd,qBAAqB,EACrB,iBAAiB,EACjB,QAAQ,EACR,IAAY,EACZ,QAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,2CAsRX;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,GAAG,KAAK,EACT,EAAE,aAAa,2CA4Ef;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW1E;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,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,aAAa,EACb,KAAK,SAAS,EACd,KAAK,iBAAiB,GACvB,CAAA"}

package/dist/components/ui/grid.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { cn } from '../../lib/utils';
+import { getCollectionItemsInDomOrder, isInteractiveDescendant, } from './collection-navigation';
 const GridContext = React.createContext(null);
 function useGridContext(component) {
     const context = React.useContext(GridContext);
@@ -22,11 +23,6 @@ function sameSelection(a, b) {
     }
     return true;
 }
-function isInteractiveDescendant(target, currentTarget) {
-    if (!(target instanceof HTMLElement) || target === currentTarget)
-        return false;
-    return Boolean(target.closest('a,button,input,select,textarea,[contenteditable="true"],[role="button"],[role="link"]'));
-}
 function Grid({ className, children, columns = 1, selectionMode = 'none', selectedValues, defaultSelectedValues, onSelectionChange, onAction, loop = false, disabled = false, onKeyDown, style, ref, ...props }) {
     const itemsRef = React.useRef(new Map());
     const [activeValue, setActiveValueState] = React.useState(null);
@@ -40,18 +36,21 @@ function Grid({ className, children, columns = 1, selectionMode = 'none', select
         if (!node)
             return () => undefined;
         itemsRef.current.set(value, { node, disabled: itemDisabled });
-        if (!disabled && !itemDisabled) {
-            setActiveValueState((current) => current ?? value);
-        }
         return () => {
             itemsRef.current.delete(value);
-            setActiveValueState((current) => {
-                if (current !== value)
-                    return current;
-                return ([...itemsRef.current.entries()].find(([, item]) => !disabled && !item.disabled)?.[0] ?? null);
-            });
+            setActiveValueState((current) => (current === value ? null : current));
         };
-    }, [disabled]);
+    }, []);
+    React.useLayoutEffect(() => {
+        const items = getCollectionItemsInDomOrder(itemsRef.current).filter(([, item]) => !disabled && !item.disabled);
+        setActiveValueState((current) => {
+            if (current && items.some(([value]) => value === current))
+                return current;
+            return (items.find(([value]) => selection.has(value))?.[0] ??
+                items[0]?.[0] ??
+                null);
+        });
+    }, [children, disabled, selection]);
     const setActiveValue = React.useCallback((value) => {
         const item = itemsRef.current.get(value);
         if (item && !item.disabled)
@@ -86,41 +85,61 @@ function Grid({ className, children, columns = 1, selectionMode = 'none', select
             return;
         onAction?.(value);
     }, [disabled, onAction]);
-    const moveFocus = React.useCallback((offset) => {
-        const entries = [...itemsRef.current.entries()];
+    const moveFocus = React.useCallback((direction) => {
+        const entries = getCollectionItemsInDomOrder(itemsRef.current);
         if (entries.length === 0)
             return;
         const currentIndex = entries.findIndex(([value]) => value === activeValue);
         const enabledAt = (index) => entries[index] && !disabled && !entries[index][1].disabled;
-        let nextIndex = offset === 'first'
-            ? 0
-            : offset === 'last'
-                ? entries.length - 1
-                : (currentIndex < 0 ? 0 : currentIndex) + offset;
-        if (loop && typeof offset === 'number') {
-            nextIndex =
-                ((nextIndex % entries.length) + entries.length) % entries.length;
+        const startIndex = currentIndex < 0 ? 0 : currentIndex;
+        const currentRow = Math.floor(startIndex / safeColumns);
+        const currentColumn = startIndex % safeColumns;
+        const rowStart = currentRow * safeColumns;
+        const rowEnd = Math.min(entries.length - 1, rowStart + safeColumns - 1);
+        let candidates = [];
+        if (direction === 'first') {
+            candidates = Array.from({ length: entries.length }, (_, index) => index);
         }
-        else {
-            nextIndex = Math.min(entries.length - 1, Math.max(0, nextIndex));
+        else if (direction === 'last') {
+            candidates = Array.from({ length: entries.length }, (_, index) => entries.length - index - 1);
+        }
+        else if (direction === 'row-first') {
+            candidates = Array.from({ length: rowEnd - rowStart + 1 }, (_, index) => rowStart + index);
         }
-        const direction = offset === 'first' ? 1 : offset === 'last' ? -1 : Math.sign(offset);
-        let attempts = 0;
-        while (!enabledAt(nextIndex) && attempts < entries.length) {
-            nextIndex += direction || 1;
-            if (loop) {
-                nextIndex =
-                    ((nextIndex % entries.length) + entries.length) % entries.length;
+        else if (direction === 'row-last') {
+            candidates = Array.from({ length: rowEnd - rowStart + 1 }, (_, index) => rowEnd - index);
+        }
+        else if (direction === 'left' || direction === 'right') {
+            const step = direction === 'left' ? -1 : 1;
+            for (let index = startIndex + step; index >= rowStart && index <= rowEnd; index += step) {
+                candidates.push(index);
             }
-            else if (nextIndex < 0 || nextIndex >= entries.length) {
-                return;
+            if (loop && candidates.length === 0) {
+                candidates =
+                    direction === 'left'
+                        ? Array.from({ length: entries.length }, (_, index) => (startIndex - index - 1 + entries.length) % entries.length)
+                        : Array.from({ length: entries.length }, (_, index) => (startIndex + index + 1) % entries.length);
             }
-            attempts += 1;
         }
+        else {
+            const step = direction === 'up' ? -safeColumns : safeColumns;
+            for (let index = startIndex + step; index >= 0 && index < entries.length; index += step) {
+                candidates.push(index);
+            }
+            if (loop && candidates.length === 0) {
+                const sameColumn = entries
+                    .map((_, index) => index)
+                    .filter((index) => index % safeColumns === currentColumn);
+                candidates = direction === 'up' ? sameColumn.reverse() : sameColumn;
+            }
+        }
+        const nextIndex = candidates.find(enabledAt);
+        if (nextIndex === undefined || nextIndex === currentIndex)
+            return;
         const [value, item] = entries[nextIndex];
         setActiveValueState(value);
         item.node.focus();
-    }, [activeValue, disabled, loop]);
+    }, [activeValue, disabled, loop, safeColumns]);
     const handleKeyDown = (event) => {
         onKeyDown?.(event);
         if (event.defaultPrevented || disabled)
@@ -129,19 +148,24 @@ function Grid({ className, children, columns = 1, selectionMode = 'none', select
         if (target.dataset.slot !== 'grid-item')
             return;
         const movement = {
-            ArrowLeft: -1,
-            ArrowRight: 1,
-            ArrowUp: -safeColumns,
-            ArrowDown: safeColumns,
+            ArrowLeft: 'left',
+            ArrowRight: 'right',
+            ArrowUp: 'up',
+            ArrowDown: 'down',
         };
-        const offset = movement[event.key];
-        if (offset !== undefined) {
+        const direction = movement[event.key];
+        if (direction !== undefined) {
             event.preventDefault();
-            moveFocus(offset);
+            moveFocus(direction);
         }
         else if (event.key === 'Home' || event.key === 'End') {
             event.preventDefault();
-            moveFocus(event.key === 'Home' ? 'first' : 'last');
+            if (event.ctrlKey || event.metaKey) {
+                moveFocus(event.key === 'Home' ? 'first' : 'last');
+            }
+            else {
+                moveFocus(event.key === 'Home' ? 'row-first' : 'row-last');
+            }
         }
         else if (event.key === ' ') {
             event.preventDefault();
@@ -194,7 +218,7 @@ function GridItem({ className, children, value, disabled = false, onClick, onDou
             ref.current = node;
     }, [ref]);
     React.useLayoutEffect(() => registerItem(value, itemRef.current, isDisabled), [isDisabled, registerItem, value]);
-    return (_jsx("div", { ref: setRef, role: "gridcell", tabIndex: isDisabled ? -1 : isActive ? 0 : -1, "aria-disabled": isDisabled || undefined, "aria-selected": context.selectionMode === 'none' ? undefined : isSelected, "data-slot": "grid-item", "data-active": isActive || undefined, "data-disabled": isDisabled || undefined, "data-selected": context.selectionMode === 'none' ? undefined : isSelected, "data-value": value, className: cn('group/grid-item relative min-w-0 cursor-default select-none overflow-hidden rounded-lg border border-border bg-card text-card-foreground outline-none transition-[background-color,border-color,box-shadow] duration-100', 'hover:bg-accent/40 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'data-[selected=true]:border-ring data-[selected=true]:bg-accent/60', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', className), onClick: (event) => {
+    return (_jsx("div", { ref: setRef, role: "gridcell", tabIndex: isDisabled ? -1 : isActive ? 0 : -1, "aria-disabled": isDisabled || undefined, "aria-selected": context.selectionMode === 'none' ? undefined : isSelected, "data-slot": "grid-item", "data-active": isActive || undefined, "data-disabled": isDisabled || undefined, "data-selected": context.selectionMode === 'none' ? undefined : isSelected, "data-value": value, className: cn('group/grid-item border-border bg-card text-card-foreground relative min-w-0 cursor-default select-none overflow-hidden rounded-lg border outline-none transition-[background-color,border-color,box-shadow] duration-100', 'hover:bg-accent/40 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'data-[selected=true]:border-ring data-[selected=true]:bg-accent/60', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', className), onClick: (event) => {
             onClick?.(event);
             if (event.defaultPrevented ||
                 isDisabled ||

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

@@ -17,11 +17,13 @@ export * from './collapsible';
 export * from './color-well';
 export * from './combobox';
 export * from './command';
+export * from './confirm-dialog';
 export * from './context-menu';
 export * from './dialog';
 export * from './drawer';
 export * from './dropdown-menu';
 export * from './date-field';
+export * from './date-picker';
 export * from './empty';
 export * from './edge-fade';
 export * from './field';
@@ -38,8 +40,10 @@ export * from './kbd';
 export * from './label';
 export * from './list';
 export * from './menubar';
+export * from './material';
 export * from './message-scroller';
 export * from './navigation-menu';
+export * from './navigation-button-group';
 export * from './notification-dot';
 export * from './number-input';
 export * from './pagination';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA;AACzB,cAAc,WAAW,CAAA"}

package/dist/components/ui/index.js

@@ -17,11 +17,13 @@ export * from './collapsible';
 export * from './color-well';
 export * from './combobox';
 export * from './command';
+export * from './confirm-dialog';
 export * from './context-menu';
 export * from './dialog';
 export * from './drawer';
 export * from './dropdown-menu';
 export * from './date-field';
+export * from './date-picker';
 export * from './empty';
 export * from './edge-fade';
 export * from './field';
@@ -38,8 +40,10 @@ export * from './kbd';
 export * from './label';
 export * from './list';
 export * from './menubar';
+export * from './material';
 export * from './message-scroller';
 export * from './navigation-menu';
+export * from './navigation-button-group';
 export * from './notification-dot';
 export * from './number-input';
 export * from './pagination';

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

@@ -11,6 +11,10 @@ type ListProps = Omit<React.ComponentProps<'div'>, 'defaultValue' | 'onChange'>
     disabled?: boolean;
 };
 declare function List({ className, children, selectionMode, selectedValues, defaultSelectedValues, onSelectionChange, onAction, orientation, loop, disabled, role, onKeyDown, ref, ...props }: ListProps): import("react/jsx-runtime").JSX.Element;
+type ListSectionProps = Omit<React.ComponentProps<'div'>, 'role'>;
+declare function ListSection({ className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: ListSectionProps): import("react/jsx-runtime").JSX.Element;
+type ListSectionHeaderProps = Omit<React.ComponentProps<'div'>, 'id'>;
+declare function ListSectionHeader({ className, ...props }: ListSectionHeaderProps): import("react/jsx-runtime").JSX.Element;
 type ListItemProps = Omit<React.ComponentProps<'div'>, 'value'> & {
     value: string;
     disabled?: boolean;
@@ -20,5 +24,5 @@ declare function ListItemContent({ className, ...props }: React.ComponentProps<'
 declare function ListItemTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function ListItemDescription({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
 declare function ListItemActions({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-export { List, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemTitle, type ListProps, type ListSelectionMode, };
+export { List, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemTitle, ListSection, ListSectionHeader, type ListProps, type ListSectionHeaderProps, type ListSectionProps, type ListSelectionMode, };
 //# sourceMappingURL=list.d.ts.map

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;AAG9B,KAAK,iBAAiB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AAmDvD,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,2CAsMX;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,2CAmFf;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAQ3B;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,KAAK,SAAS,EACd,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,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"}

package/dist/components/ui/list.js

@@ -2,7 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { cn } from '../../lib/utils';
+import { getCollectionItemsInDomOrder, isInteractiveDescendant, } from './collection-navigation';
 const ListContext = React.createContext(null);
+const ListSectionContext = React.createContext(null);
 function useListContext(component) {
     const context = React.useContext(ListContext);
     if (!context) {
@@ -22,11 +24,6 @@ function sameSelection(a, b) {
     }
     return true;
 }
-function isInteractiveDescendant(target, currentTarget) {
-    if (!(target instanceof HTMLElement) || target === currentTarget)
-        return false;
-    return Boolean(target.closest('a,button,input,select,textarea,[contenteditable="true"],[role="button"],[role="link"]'));
-}
 function List({ className, children, selectionMode = 'none', selectedValues, defaultSelectedValues, onSelectionChange, onAction, orientation = 'vertical', loop = false, disabled = false, role, onKeyDown, ref, ...props }) {
     const rootRef = React.useRef(null);
     const itemsRef = React.useRef(new Map());
@@ -45,18 +42,21 @@ function List({ className, children, selectionMode = 'none', selectedValues, def
         if (!node)
             return () => undefined;
         itemsRef.current.set(value, { node, disabled: itemDisabled });
-        if (!disabled && !itemDisabled) {
-            setActiveValueState((current) => current ?? value);
-        }
         return () => {
             itemsRef.current.delete(value);
-            setActiveValueState((current) => {
-                if (current !== value)
-                    return current;
-                return ([...itemsRef.current.entries()].find(([, item]) => !disabled && !item.disabled)?.[0] ?? null);
-            });
+            setActiveValueState((current) => (current === value ? null : current));
         };
-    }, [disabled]);
+    }, []);
+    React.useLayoutEffect(() => {
+        const items = getCollectionItemsInDomOrder(itemsRef.current).filter(([, item]) => !disabled && !item.disabled);
+        setActiveValueState((current) => {
+            if (current && items.some(([value]) => value === current))
+                return current;
+            return (items.find(([value]) => selection.has(value))?.[0] ??
+                items[0]?.[0] ??
+                null);
+        });
+    }, [children, disabled, selection]);
     const setActiveValue = React.useCallback((value) => {
         const item = itemsRef.current.get(value);
         if (item && !item.disabled)
@@ -92,7 +92,7 @@ function List({ className, children, selectionMode = 'none', selectedValues, def
         onAction?.(value);
     }, [disabled, onAction]);
     const moveFocus = React.useCallback((direction) => {
-        const items = [...itemsRef.current.entries()].filter(([, item]) => !disabled && !item.disabled);
+        const items = getCollectionItemsInDomOrder(itemsRef.current).filter(([, item]) => !disabled && !item.disabled);
         if (items.length === 0)
             return;
         const currentIndex = items.findIndex(([value]) => value === activeValue);
@@ -168,6 +168,17 @@ function List({ className, children, selectionMode = 'none', selectedValues, def
                 ? 'flex-col gap-0.5'
                 : 'flex-row items-center gap-1', className), onKeyDown: handleKeyDown, ...props, children: children }) }));
 }
+function ListSection({ className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }) {
+    const headerId = React.useId();
+    return (_jsx(ListSectionContext.Provider, { value: { headerId }, children: _jsx("div", { role: "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : (ariaLabelledBy ?? headerId), "data-slot": "list-section", className: cn('flex min-w-0 flex-col gap-0.5', className), ...props, children: children }) }));
+}
+function ListSectionHeader({ className, ...props }) {
+    const context = React.useContext(ListSectionContext);
+    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 }));
+}
 function ListItem({ className, children, value, disabled = false, onClick, onDoubleClick, onFocus, ref, role, ...props }) {
     const context = useListContext('ListItem');
     const { registerItem } = context;
@@ -221,4 +232,4 @@ function ListItemDescription({ 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 }));
 }
-export { List, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemTitle, };
+export { List, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemTitle, ListSection, ListSectionHeader, };

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const materialVariants: (props?: ({
+    shape?: "circle" | "rounded" | "capsule" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type MaterialVariant = 'regular' | 'clear';
+export type MaterialShape = NonNullable<VariantProps<typeof materialVariants>['shape']>;
+export type MaterialElevation = 'none' | 'panel' | 'overlay';
+export interface MaterialProps extends React.ComponentPropsWithoutRef<'div'>, VariantProps<typeof materialVariants> {
+    /**
+     * `regular` is the default for toolbars and control chrome. Reserve `clear`
+     * for compact controls floating above media or a richly colored canvas.
+     */
+    variant?: MaterialVariant;
+    elevation?: MaterialElevation;
+    interactive?: boolean;
+    asChild?: boolean;
+}
+declare function Material({ asChild, className, elevation, interactive, shape, variant, ...props }: MaterialProps): import("react/jsx-runtime").JSX.Element;
+declare const materialGroupSpacing: {
+    readonly compact: "gap-0.5 p-0.5";
+    readonly default: "gap-1 p-1";
+    readonly comfortable: "gap-1.5 p-1.5";
+};
+export interface MaterialGroupProps extends Omit<MaterialProps, 'asChild' | 'interactive'> {
+    spacing?: keyof typeof materialGroupSpacing;
+}
+/**
+ * A single sampled material layer for a related control cluster. Children
+ * should be ordinary transparent or ghost controls, not nested Materials.
+ */
+declare function MaterialGroup({ className, spacing, ...props }: MaterialGroupProps): import("react/jsx-runtime").JSX.Element;
+export { Material, MaterialGroup, materialVariants };
+//# sourceMappingURL=material.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"material.d.ts","sourceRoot":"","sources":["../../../src/components/ui/material.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,gBAAgB;;8EAWpB,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,CAAA;AACjD,MAAM,MAAM,aAAa,GAAG,WAAW,CACrC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAC/C,CAAA;AACD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;AAE5D,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAC3C,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iBAAS,QAAQ,CAAC,EAChB,OAAe,EACf,SAAS,EACT,SAAmB,EACnB,WAAmB,EACnB,KAAK,EACL,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,2CAcf;AAED,QAAA,MAAM,oBAAoB;;;;CAIhB,CAAA;AAEV,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,aAAa,CAAC;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,oBAAoB,CAAA;CAC5C;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAYpB;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/material.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../../lib/utils';
+import { 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',
+        },
+    },
+    defaultVariants: {
+        shape: 'rounded',
+    },
+});
+function Material({ asChild = false, className, elevation = 'panel', interactive = false, shape, variant = 'regular', ...props }) {
+    const Comp = asChild ? Slot : 'div';
+    return (_jsx(Comp, { "data-slot": asChild ? undefined : 'material', "data-material": variant, "data-material-elevation": elevation, "data-material-interactive": interactive || undefined, "data-material-shape": shape ?? 'rounded', className: cn(materialVariants({ shape }), className), ...props }));
+}
+const materialGroupSpacing = {
+    compact: 'gap-0.5 p-0.5',
+    default: 'gap-1 p-1',
+    comfortable: 'gap-1.5 p-1.5',
+};
+/**
+ * A single sampled material layer for a related control cluster. Children
+ * should be ordinary transparent or ghost controls, not nested Materials.
+ */
+function MaterialGroup({ className, spacing = 'default', ...props }) {
+    return (_jsx(Material, { "data-slot": "material-group", className: cn('inline-flex min-w-0 items-center', materialGroupSpacing[spacing], className), ...props }));
+}
+export { Material, MaterialGroup, materialVariants };