@moldable-ai/ui 0.2.19 → 0.2.20

package/dist/components/ui/date-field.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDaysIcon, XIcon } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { IconButton } from './icon-button';
+import { cva } from 'class-variance-authority';
+const dateFieldVariants = cva('group/date-field border-input focus-within:border-ring focus-within:ring-ring/50 flex w-full min-w-0 items-center rounded-md border text-foreground shadow-xs transition-[background-color,border-color,box-shadow] focus-within:ring-[3px] has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', {
+    variants: {
+        variant: {
+            default: 'bg-background',
+            filled: 'border-transparent bg-muted/70 shadow-none',
+        },
+        density: {
+            compact: 'h-7',
+            default: 'h-9',
+            comfortable: 'h-10',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        density: 'default',
+    },
+});
+function DateField({ className, inputClassName, value, defaultValue = '', onChange, onValueChange, onClear, clearable = false, clearLabel = 'Clear date', variant = 'default', density = 'default', disabled, readOnly, ref, ...props }) {
+    const controlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const inputRef = React.useRef(null);
+    const currentValue = controlled ? value : internalValue;
+    const setRefs = React.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const commitValue = React.useCallback((nextValue) => {
+        if (!controlled)
+            setInternalValue(nextValue);
+        onValueChange?.(nextValue);
+    }, [controlled, onValueChange]);
+    const clear = React.useCallback(() => {
+        if (!currentValue)
+            return;
+        commitValue('');
+        onClear?.();
+        inputRef.current?.focus();
+    }, [commitValue, currentValue, onClear]);
+    return (_jsxs("div", { "data-slot": "date-field", "data-density": density, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, className: cn(dateFieldVariants({ variant, density }), disabled && 'cursor-not-allowed opacity-50', className), children: [_jsx(CalendarDaysIcon, { "aria-hidden": "true", className: cn('text-muted-foreground pointer-events-none ml-2.5 shrink-0', density === 'compact' ? 'size-3.5' : 'size-4') }), _jsx("input", { ref: setRefs, "data-slot": "date-field-input", type: "date", value: currentValue, disabled: disabled, readOnly: readOnly, className: cn('min-w-0 flex-1 bg-transparent px-2 text-sm outline-none dark:[color-scheme:dark] [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 [&::-webkit-calendar-picker-indicator]:hover:opacity-100', density === 'compact' && 'text-xs', inputClassName), onChange: (event) => {
+                    onChange?.(event);
+                    commitValue(event.currentTarget.value);
+                }, ...props }), clearable && currentValue && !readOnly ? (_jsx(IconButton, { label: clearLabel, size: "xs", variant: "ghost", disabled: disabled, className: "mr-0.5 shrink-0", onClick: clear, children: _jsx(XIcon, {}) })) : null] }));
+}
+export { DateField, dateFieldVariants };

package/dist/components/ui/edge-fade.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const edgeFadeVariants: (props?: ({
+    edge?: "bottom" | "left" | "right" | "top" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface EdgeFadeProps extends React.ComponentProps<'div'>, VariantProps<typeof edgeFadeVariants> {
+}
+declare function EdgeFade({ edge, size, className, ...props }: EdgeFadeProps): import("react/jsx-runtime").JSX.Element;
+export { EdgeFade, edgeFadeVariants };
+//# sourceMappingURL=edge-fade.d.ts.map

package/dist/components/ui/edge-fade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edge-fade.d.ts","sourceRoot":"","sources":["../../../src/components/ui/edge-fade.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,gBAAgB;;;8EAmCrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,YAAY,CAAC,OAAO,gBAAgB,CAAC;CAAG;AAE5C,iBAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAUnE;AAED,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/edge-fade.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { cva } from 'class-variance-authority';
+const edgeFadeVariants = cva('from-background pointer-events-none absolute z-10', {
+    variants: {
+        edge: {
+            top: 'inset-x-0 top-0 bg-gradient-to-b to-transparent',
+            bottom: 'inset-x-0 bottom-0 bg-gradient-to-t to-transparent',
+            left: 'inset-y-0 left-0 bg-gradient-to-r to-transparent',
+            right: 'inset-y-0 right-0 bg-gradient-to-l to-transparent',
+        },
+        size: {
+            sm: '',
+            default: '',
+            lg: '',
+        },
+    },
+    compoundVariants: [
+        { edge: 'top', size: 'sm', className: 'h-4' },
+        { edge: 'top', size: 'default', className: 'h-8' },
+        { edge: 'top', size: 'lg', className: 'h-12' },
+        { edge: 'bottom', size: 'sm', className: 'h-4' },
+        { edge: 'bottom', size: 'default', className: 'h-8' },
+        { edge: 'bottom', size: 'lg', className: 'h-12' },
+        { edge: 'left', size: 'sm', className: 'w-4' },
+        { edge: 'left', size: 'default', className: 'w-8' },
+        { edge: 'left', size: 'lg', className: 'w-12' },
+        { edge: 'right', size: 'sm', className: 'w-4' },
+        { edge: 'right', size: 'default', className: 'w-8' },
+        { edge: 'right', size: 'lg', className: 'w-12' },
+    ],
+    defaultVariants: {
+        edge: 'bottom',
+        size: 'default',
+    },
+});
+function EdgeFade({ edge, size, className, ...props }) {
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": "edge-fade", "data-edge": edge ?? 'bottom', className: cn(edgeFadeVariants({ edge, size }), className), ...props }));
+}
+export { EdgeFade, edgeFadeVariants };

package/dist/components/ui/empty.js

@@ -26,7 +26,7 @@ function EmptyTitle({ className, ...props }) {
     return (_jsx("div", { "data-slot": "empty-title", className: cn('text-lg font-medium tracking-tight', className), ...props }));
 }
 function EmptyDescription({ className, ...props }) {
-    return (_jsx("div", { "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 [&>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 }));

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

@@ -6,7 +6,7 @@ declare function FieldLegend({ className, variant, ...props }: React.ComponentPr
 }): import("react/jsx-runtime").JSX.Element;
 declare function FieldGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const fieldVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+    orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Field({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
 declare function FieldContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+type GridSelectionMode = 'none' | 'single' | 'multiple';
+type GridProps = Omit<React.ComponentProps<'div'>, 'defaultValue' | 'onChange'> & {
+    columns?: number;
+    selectionMode?: GridSelectionMode;
+    selectedValues?: Iterable<string>;
+    defaultSelectedValues?: Iterable<string>;
+    onSelectionChange?: (values: ReadonlySet<string>) => void;
+    onAction?: (value: string) => void;
+    loop?: boolean;
+    disabled?: boolean;
+};
+declare function Grid({ className, children, columns, selectionMode, selectedValues, defaultSelectedValues, onSelectionChange, onAction, loop, disabled, onKeyDown, style, ref, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
+type GridItemProps = Omit<React.ComponentProps<'div'>, 'value'> & {
+    value: string;
+    disabled?: boolean;
+};
+declare function GridItem({ className, children, value, disabled, onClick, onDoubleClick, onFocus, ref, ...props }: GridItemProps): import("react/jsx-runtime").JSX.Element;
+declare function GridItemMedia({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function GridItemContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function GridItemTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function GridItemDescription({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+export { Grid, GridItem, GridItemContent, GridItemDescription, GridItemMedia, GridItemTitle, type GridProps, type GridSelectionMode, };
+//# sourceMappingURL=grid.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/ui/grid.js

@@ -0,0 +1,234 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const GridContext = React.createContext(null);
+function useGridContext(component) {
+    const context = React.useContext(GridContext);
+    if (!context) {
+        throw new Error(`${component} must be used inside Grid`);
+    }
+    return context;
+}
+function toSelection(values) {
+    return new Set(values ?? []);
+}
+function sameSelection(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const value of a) {
+        if (!b.has(value))
+            return false;
+    }
+    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);
+    const [uncontrolledSelection, setUncontrolledSelection] = React.useState(() => toSelection(defaultSelectedValues));
+    const controlledSelection = React.useMemo(() => selectedValues === undefined ? undefined : toSelection(selectedValues), [selectedValues]);
+    const selection = controlledSelection ?? uncontrolledSelection;
+    const safeColumns = Math.max(1, Math.floor(columns));
+    const childItems = React.Children.toArray(children);
+    const rows = Array.from({ length: Math.ceil(childItems.length / safeColumns) }, (_, index) => childItems.slice(index * safeColumns, (index + 1) * safeColumns));
+    const registerItem = React.useCallback((value, node, itemDisabled) => {
+        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);
+            });
+        };
+    }, [disabled]);
+    const setActiveValue = React.useCallback((value) => {
+        const item = itemsRef.current.get(value);
+        if (item && !item.disabled)
+            setActiveValueState(value);
+    }, []);
+    const commitSelection = React.useCallback((next) => {
+        if (sameSelection(selection, next))
+            return;
+        if (controlledSelection === undefined)
+            setUncontrolledSelection(next);
+        onSelectionChange?.(next);
+    }, [controlledSelection, onSelectionChange, selection]);
+    const select = React.useCallback((value) => {
+        if (disabled || selectionMode === 'none')
+            return;
+        const item = itemsRef.current.get(value);
+        if (!item || item.disabled)
+            return;
+        if (selectionMode === 'single') {
+            commitSelection(new Set([value]));
+            return;
+        }
+        const next = new Set(selection);
+        if (next.has(value))
+            next.delete(value);
+        else
+            next.add(value);
+        commitSelection(next);
+    }, [commitSelection, disabled, selection, selectionMode]);
+    const activate = React.useCallback((value) => {
+        if (disabled || itemsRef.current.get(value)?.disabled)
+            return;
+        onAction?.(value);
+    }, [disabled, onAction]);
+    const moveFocus = React.useCallback((offset) => {
+        const entries = [...itemsRef.current.entries()];
+        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;
+        }
+        else {
+            nextIndex = Math.min(entries.length - 1, Math.max(0, nextIndex));
+        }
+        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 (nextIndex < 0 || nextIndex >= entries.length) {
+                return;
+            }
+            attempts += 1;
+        }
+        const [value, item] = entries[nextIndex];
+        setActiveValueState(value);
+        item.node.focus();
+    }, [activeValue, disabled, loop]);
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || disabled)
+            return;
+        const target = event.target;
+        if (target.dataset.slot !== 'grid-item')
+            return;
+        const movement = {
+            ArrowLeft: -1,
+            ArrowRight: 1,
+            ArrowUp: -safeColumns,
+            ArrowDown: safeColumns,
+        };
+        const offset = movement[event.key];
+        if (offset !== undefined) {
+            event.preventDefault();
+            moveFocus(offset);
+        }
+        else if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+            moveFocus(event.key === 'Home' ? 'first' : 'last');
+        }
+        else if (event.key === ' ') {
+            event.preventDefault();
+            if (activeValue)
+                select(activeValue);
+        }
+        else if (event.key === 'Enter' && activeValue) {
+            event.preventDefault();
+            if (selectionMode !== 'none')
+                select(activeValue);
+            activate(activeValue);
+        }
+    };
+    const context = React.useMemo(() => ({
+        activeValue,
+        disabled,
+        isSelected: (value) => selection.has(value),
+        registerItem,
+        select,
+        selectionMode,
+        setActiveValue,
+        activate,
+    }), [
+        activeValue,
+        activate,
+        disabled,
+        registerItem,
+        select,
+        selection,
+        selectionMode,
+        setActiveValue,
+    ]);
+    return (_jsx(GridContext.Provider, { value: context, children: _jsx("div", { ref: ref, role: "grid", "aria-colcount": safeColumns, "aria-rowcount": rows.length, "aria-disabled": disabled || undefined, "aria-multiselectable": selectionMode === 'multiple' ? true : undefined, "data-slot": "grid", "data-columns": safeColumns, "data-disabled": disabled || undefined, "data-selection-mode": selectionMode, style: {
+                '--grid-columns': safeColumns,
+                ...style,
+            }, className: cn('grid min-w-0 grid-cols-[repeat(var(--grid-columns),minmax(0,1fr))] gap-2 outline-none', className), onKeyDown: handleKeyDown, ...props, children: rows.map((row, index) => (_jsx("div", { role: "row", className: "col-span-full grid grid-cols-subgrid gap-[inherit]", children: row }, `grid-row-${index}`))) }) }));
+}
+function GridItem({ className, children, value, disabled = false, onClick, onDoubleClick, onFocus, ref, ...props }) {
+    const context = useGridContext('GridItem');
+    const { registerItem } = context;
+    const itemRef = React.useRef(null);
+    const isDisabled = context.disabled || disabled;
+    const isSelected = context.isSelected(value);
+    const isActive = context.activeValue === value;
+    const setRef = React.useCallback((node) => {
+        itemRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            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) => {
+            onClick?.(event);
+            if (event.defaultPrevented ||
+                isDisabled ||
+                isInteractiveDescendant(event.target, event.currentTarget)) {
+                return;
+            }
+            context.setActiveValue(value);
+            event.currentTarget.focus();
+            context.select(value);
+        }, onDoubleClick: (event) => {
+            onDoubleClick?.(event);
+            if (event.defaultPrevented ||
+                isDisabled ||
+                isInteractiveDescendant(event.target, event.currentTarget)) {
+                return;
+            }
+            context.activate(value);
+        }, onFocus: (event) => {
+            onFocus?.(event);
+            if (!event.defaultPrevented && !isDisabled) {
+                context.setActiveValue(value);
+            }
+        }, ...props, children: children }));
+}
+function GridItemMedia({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "grid-item-media", className: cn('bg-muted aspect-[4/3] overflow-hidden [&>img]:size-full [&>img]:object-cover', className), ...props }));
+}
+function GridItemContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "grid-item-content", className: cn('min-w-0 p-3', className), ...props }));
+}
+function GridItemTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "grid-item-title", className: cn('truncate text-sm font-medium', className), ...props }));
+}
+function GridItemDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "grid-item-description", className: cn('text-muted-foreground mt-0.5 truncate text-xs', className), ...props }));
+}
+export { Grid, GridItem, GridItemContent, GridItemDescription, GridItemMedia, GridItemTitle, };

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Button } from './button';
+type IconButtonSize = 'xs' | 'sm' | 'default' | 'lg';
+interface IconButtonProps extends Omit<React.ComponentProps<typeof Button>, 'aria-label' | 'asChild' | 'size'> {
+    /** Required accessible name for the icon-only control. */
+    label: string;
+    size?: IconButtonSize;
+    shape?: 'rounded' | 'circle';
+    loading?: boolean;
+    /** Adds a native hover hint. Prefer a shared Tooltip in dense toolbars. */
+    tooltip?: string | boolean;
+}
+declare function IconButton({ children, className, disabled, label, loading, shape, size, tooltip, type, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export { IconButton, type IconButtonProps, type IconButtonSize };
+//# sourceMappingURL=icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icon-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;AASpD,UAAU,eACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EACnC,YAAY,GAAG,SAAS,GAAG,MAAM,CAClC;IACD,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B;AAED,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,OAAe,EACf,KAAiB,EACjB,IAAgB,EAChB,OAAO,EACP,IAAe,EACf,GAAG,KAAK,EACT,EAAE,eAAe,2CAqBjB;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,CAAA"}

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LoaderCircleIcon } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+const buttonSizeByIconSize = {
+    xs: 'icon-xs',
+    sm: 'icon-sm',
+    default: 'icon',
+    lg: 'icon-lg',
+};
+function IconButton({ children, className, disabled, label, loading = false, shape = 'rounded', size = 'default', tooltip, type = 'button', ...props }) {
+    return (_jsx(Button, { "data-slot": "icon-button", "data-loading": loading || undefined, "aria-busy": loading || undefined, "aria-label": label, title: tooltip === true ? label : tooltip || undefined, type: type, size: buttonSizeByIconSize[size], disabled: disabled || loading, className: cn(shape === 'circle' && 'rounded-full', className), ...props, children: loading ? (_jsx(LoaderCircleIcon, { "aria-hidden": "true", className: "animate-spin" })) : (children) }));
+}
+export { IconButton };

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

@@ -1,6 +1,7 @@
 export * from './accordion';
 export * from './alert';
 export * from './alert-dialog';
+export * from './app-frame';
 export * from './aspect-ratio';
 export * from './avatar';
 export * from './badge';
@@ -13,42 +14,60 @@ export * from './carousel';
 export * from './chart';
 export * from './checkbox';
 export * from './collapsible';
+export * from './color-well';
+export * from './combobox';
 export * from './command';
 export * from './context-menu';
 export * from './dialog';
 export * from './drawer';
 export * from './dropdown-menu';
+export * from './date-field';
 export * from './empty';
+export * from './edge-fade';
 export * from './field';
 export * from './form';
+export * from './grid';
 export * from './hover-card';
+export * from './icon-button';
 export * from './input';
 export * from './input-group';
 export * from './input-otp';
+export * from './inspector';
 export * from './item';
 export * from './kbd';
 export * from './label';
+export * from './list';
 export * from './menubar';
+export * from './message-scroller';
 export * from './navigation-menu';
+export * from './notification-dot';
+export * from './number-input';
 export * from './pagination';
+export * from './panel';
 export * from './popover';
 export * from './progress';
 export * from './radio-group';
 export * from './resizable';
 export * from './scroll-area';
+export * from './search-field';
 export * from './select';
+export * from './segmented-control';
 export * from './separator';
 export * from './sheet';
 export * from './sidebar';
 export * from './skeleton';
 export * from './slider';
 export * from './sonner';
+export * from './split-view';
 export * from './spinner';
+export * from './status';
 export * from './switch';
 export * from './table';
 export * from './tabs';
 export * from './textarea';
+export * from './text';
 export * from './toggle';
 export * from './toggle-group';
+export * from './toolbar';
 export * from './tooltip';
 //# sourceMappingURL=index.d.ts.map

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,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,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,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,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,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,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"}

package/dist/components/ui/index.js

@@ -1,6 +1,7 @@
 export * from './accordion';
 export * from './alert';
 export * from './alert-dialog';
+export * from './app-frame';
 export * from './aspect-ratio';
 export * from './avatar';
 export * from './badge';
@@ -13,41 +14,59 @@ export * from './carousel';
 export * from './chart';
 export * from './checkbox';
 export * from './collapsible';
+export * from './color-well';
+export * from './combobox';
 export * from './command';
 export * from './context-menu';
 export * from './dialog';
 export * from './drawer';
 export * from './dropdown-menu';
+export * from './date-field';
 export * from './empty';
+export * from './edge-fade';
 export * from './field';
 export * from './form';
+export * from './grid';
 export * from './hover-card';
+export * from './icon-button';
 export * from './input';
 export * from './input-group';
 export * from './input-otp';
+export * from './inspector';
 export * from './item';
 export * from './kbd';
 export * from './label';
+export * from './list';
 export * from './menubar';
+export * from './message-scroller';
 export * from './navigation-menu';
+export * from './notification-dot';
+export * from './number-input';
 export * from './pagination';
+export * from './panel';
 export * from './popover';
 export * from './progress';
 export * from './radio-group';
 export * from './resizable';
 export * from './scroll-area';
+export * from './search-field';
 export * from './select';
+export * from './segmented-control';
 export * from './separator';
 export * from './sheet';
 export * from './sidebar';
 export * from './skeleton';
 export * from './slider';
 export * from './sonner';
+export * from './split-view';
 export * from './spinner';
+export * from './status';
 export * from './switch';
 export * from './table';
 export * from './tabs';
 export * from './textarea';
+export * from './text';
 export * from './toggle';
 export * from './toggle-group';
+export * from './toolbar';
 export * from './tooltip';

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

@@ -3,7 +3,7 @@ import { Button } from './button';
 import { type VariantProps } from 'class-variance-authority';
 declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-start" | "block-end" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Text } from './text';
+declare function Inspector({ className, ...props }: React.ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element;
+declare function InspectorHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function InspectorContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export interface InspectorSectionProps extends Omit<React.ComponentProps<'section'>, 'title'> {
+    title?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+declare function InspectorSection({ title, actions, className, children, ...props }: InspectorSectionProps): import("react/jsx-runtime").JSX.Element;
+declare function InspectorRow({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function InspectorLabel({ className, ...props }: React.ComponentProps<typeof Text>): import("react/jsx-runtime").JSX.Element;
+declare function InspectorValue({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Inspector, InspectorContent, InspectorHeader, InspectorLabel, InspectorRow, InspectorSection, InspectorValue, };
+//# sourceMappingURL=inspector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../../src/components/ui/inspector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAWxE;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,KAAK,CAAC,2CAW7B;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAqCvB;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAWnC;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ3E;AAED,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,cAAc,GACf,CAAA"}