@moldable-ai/ui 0.2.21 → 0.2.24

package/dist/components/ui/button.js

@@ -1,26 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../lib/utils';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+import { Spinner } from './spinner.js';
 import { cva } from 'class-variance-authority';
-const buttonVariants = cva("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-[>svg]:px-3',
-            xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-            lg: 'h-10 rounded-md px-6 has-[>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: {
@@ -28,8 +30,38 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
         size: 'default',
     },
 });
-function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+function ButtonContent({ children, loading, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "button-content", className: cn('inline-flex items-center justify-center [gap:inherit]', loading && 'opacity-0'), children: children }), loading ? (_jsx("span", { "data-slot": "button-loading-indicator", "aria-hidden": "true", className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx(Spinner, { "aria-hidden": "true" }) })) : null] }));
+}
+function blockLoadingInteraction(event) {
+    event.preventDefault();
+    event.stopPropagation();
+}
+function Button({ 'aria-busy': ariaBusy, children, className, disabled, loading = false, onClick, onKeyDown, variant = 'default', size = 'default', asChild = false, ...props }) {
     const Comp = asChild ? Slot : 'button';
-    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+    const buttonChildren = (_jsx(ButtonContent, { loading: loading, children: children }));
+    const renderedChildren = asChild && React.isValidElement(children)
+        ? React.cloneElement(React.Children.only(children), loading
+            ? {
+                onClick: blockLoadingInteraction,
+                onKeyDown: blockLoadingInteraction,
+            }
+            : undefined, _jsx(ButtonContent, { loading: loading, children: children.props.children }))
+        : buttonChildren;
+    const handleClick = (event) => {
+        if (loading) {
+            blockLoadingInteraction(event);
+            return;
+        }
+        onClick?.(event);
+    };
+    const handleKeyDown = (event) => {
+        if (loading) {
+            blockLoadingInteraction(event);
+            return;
+        }
+        onKeyDown?.(event);
+    };
+    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, "data-loading": loading || undefined, "aria-busy": loading || ariaBusy || undefined, disabled: disabled || loading, className: cn(buttonVariants({ variant, size, className })), onClick: handleClick, onKeyDown: handleKeyDown, ...props, children: renderedChildren }));
 }
 export { Button, buttonVariants };

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

package/dist/components/ui/calendar.js

@@ -3,8 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react';
 import * as React from 'react';
 import { DayPicker, getDefaultClassNames, } from 'react-day-picker';
-import { cn } from '../../lib/utils';
-import { Button, buttonVariants } from './button';
+import { cn } from '../../lib/utils.js';
+import { Button, buttonVariants } from './button.js';
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
     return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent', String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
@@ -18,25 +18,25 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             button_previous: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous),
             button_next: cn(buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next),
             month_caption: cn('flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption),
-            dropdowns: cn('w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns),
-            dropdown_root: cn('relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root),
+            dropdowns: cn('w-full flex items-center text-ui-body font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns),
+            dropdown_root: cn('relative has-[:focus-visible]:border-ring has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-ring rounded-control border border-input shadow-xs', defaultClassNames.dropdown_root),
             dropdown: cn('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
             caption_label: cn('select-none font-medium', captionLayout === 'label'
-                ? 'text-sm'
-                : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label),
+                ? 'text-ui-body'
+                : 'rounded-control pl-2 pr-1 flex items-center gap-1 text-ui-body h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label),
             table: 'w-full border-collapse',
             weekdays: cn('flex', defaultClassNames.weekdays),
-            weekday: cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday),
+            weekday: cn('text-muted-foreground rounded-control flex-1 font-normal text-ui-body select-none', defaultClassNames.weekday),
             week: cn('flex w-full mt-2', defaultClassNames.week),
             week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
-            week_number: cn('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
-            day: cn('relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', props.showWeekNumber
-                ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md'
-                : '[&:first-child[data-selected=true]_button]:rounded-l-md', defaultClassNames.day),
-            range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
+            week_number: cn('text-ui-body select-none text-muted-foreground', defaultClassNames.week_number),
+            day: cn('relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-control group/day aspect-square select-none', props.showWeekNumber
+                ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-control'
+                : '[&:first-child[data-selected=true]_button]:rounded-l-control', defaultClassNames.day),
+            range_start: cn('rounded-l-control bg-accent', defaultClassNames.range_start),
             range_middle: cn('rounded-none', defaultClassNames.range_middle),
-            range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
-            today: cn('bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today),
+            range_end: cn('rounded-r-control bg-accent', defaultClassNames.range_end),
+            today: cn('bg-accent text-accent-foreground rounded-control data-[selected=true]:rounded-none', defaultClassNames.today),
             outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
             disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
             hidden: cn('invisible', defaultClassNames.hidden),
@@ -71,6 +71,6 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
     return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
             !modifiers.range_start &&
             !modifiers.range_end &&
-            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground min-w-(--cell-size) flex aspect-square size-auto w-full flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-start=true]:rounded-l-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground dark:hover:text-accent-foreground min-w-(--cell-size) data-[range-end=true]:rounded-control data-[range-start=true]:rounded-control data-[range-end=true]:rounded-r-control data-[range-start=true]:rounded-l-control [&>span]:text-ui-caption flex aspect-square size-auto w-full flex-col gap-1 font-normal leading-none focus-visible:relative focus-visible:z-10 data-[range-middle=true]:rounded-none [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
 }
 export { Calendar, CalendarDayButton };

package/dist/components/ui/card.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Card({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card", className: cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className), ...props }));
+    return (_jsx("div", { "data-slot": "card", className: cn('bg-card text-card-foreground rounded-card flex flex-col gap-6 border py-6 shadow-sm', className), ...props }));
 }
 function CardHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-header", className: cn('@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6', className), ...props }));
@@ -10,7 +10,7 @@ function CardTitle({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-title", className: cn('font-semibold leading-none', className), ...props }));
 }
 function CardDescription({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+    return (_jsx("div", { "data-slot": "card-description", className: cn('text-muted-foreground text-ui-body', className), ...props }));
 }
 function CardAction({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-action", className: cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className), ...props }));

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

@@ -1,6 +1,6 @@
 import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
 import * as React from 'react';
-import { Button } from './button';
+import { Button } from './button.js';
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];

package/dist/components/ui/carousel.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useEmblaCarousel from 'embla-carousel-react';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { Button } from './button';
+import { cn } from '../../lib/utils.js';
+import { Button } from './button.js';
 const CarouselContext = React.createContext(null);
 function useCarousel() {
     const context = React.useContext(CarouselContext);
@@ -78,13 +78,13 @@ function CarouselItem({ className, ...props }) {
 }
 function CarouselPrevious({ className, variant = 'outline', size = 'icon', ...props }) {
     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-    return (_jsxs(Button, { "data-slot": "carousel-previous", variant: variant, size: size, className: cn('absolute size-8 rounded-full', orientation === 'horizontal'
+    return (_jsxs(Button, { "data-slot": "carousel-previous", variant: variant, size: size, className: cn('rounded-pill absolute size-8', orientation === 'horizontal'
             ? '-left-12 top-1/2 -translate-y-1/2'
             : '-top-12 left-1/2 -translate-x-1/2 rotate-90', className), disabled: !canScrollPrev, onClick: scrollPrev, ...props, children: [_jsx(ArrowLeft, {}), _jsx("span", { className: "sr-only", children: "Previous slide" })] }));
 }
 function CarouselNext({ className, variant = 'outline', size = 'icon', ...props }) {
     const { orientation, scrollNext, canScrollNext } = useCarousel();
-    return (_jsxs(Button, { "data-slot": "carousel-next", variant: variant, size: size, className: cn('absolute size-8 rounded-full', orientation === 'horizontal'
+    return (_jsxs(Button, { "data-slot": "carousel-next", variant: variant, size: size, className: cn('rounded-pill absolute size-8', orientation === 'horizontal'
             ? '-right-12 top-1/2 -translate-y-1/2'
             : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90', className), disabled: !canScrollNext, onClick: scrollNext, ...props, children: [_jsx(ArrowRight, {}), _jsx("span", { className: "sr-only", children: "Next slide" })] }));
 }

package/dist/components/ui/chart.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import * as RechartsPrimitive from 'recharts';
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: '', dark: '.dark' };
@@ -16,7 +16,7 @@ function useChart() {
 function ChartContainer({ id, className, children, config, ...props }) {
     const uniqueId = React.useId();
     const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
-    return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-sector[stroke='#fff']]:stroke-transparent", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
+    return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden text-ui-caption flex aspect-video justify-center [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-sector[stroke='#fff']]:stroke-transparent", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
 }
 const ChartStyle = ({ id, config }) => {
     const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
@@ -72,13 +72,13 @@ function ChartTooltipContent({ active, payload, className, indicator = 'dot', hi
         return null;
     }
     const nestLabel = payload.length === 1 && indicator !== 'dot';
-    return (_jsxs("div", { className: cn('border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl', className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
+    return (_jsxs("div", { className: cn('border-border/50 bg-background rounded-overlay text-ui-caption shadow-overlay grid min-w-[8rem] items-start gap-1.5 border px-2.5 py-1.5', className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
                     .filter((item) => item.type !== 'none')
                     .map((item, index) => {
                     const key = `${nameKey || item.name || item.dataKey || 'value'}`;
                     const itemConfig = getPayloadConfigFromPayload(config, item, key);
                     const indicatorColor = color || item.payload.fill || item.color;
-                    return (_jsx("div", { className: cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5', indicator === 'dot' && 'items-center'), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn('border-(--color-border) bg-(--color-bg) shrink-0 rounded-[2px]', {
+                    return (_jsx("div", { className: cn('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5', indicator === 'dot' && 'items-center'), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn('border-(--color-border) bg-(--color-bg) rounded-control shrink-0', {
                                         'h-2.5 w-2.5': indicator === 'dot',
                                         'w-1': indicator === 'line',
                                         'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
@@ -100,7 +100,7 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
             .map((item) => {
             const key = `${nameKey || item.dataKey || 'value'}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            return (_jsxs("div", { className: cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+            return (_jsxs("div", { className: cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "rounded-control h-2 w-2 shrink-0", style: {
                             backgroundColor: item.color,
                         } })), itemConfig?.label] }, item.value));
         }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,2CAkBrD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,2CAmBrD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/checkbox.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer size-4 shrink-0 rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('group/checkbox text-primary-foreground focus-visible:border-ring focus-visible:ring-ring aria-invalid:before:border-destructive rounded-checkbox peer relative size-control-xs shrink-0 cursor-pointer border border-transparent bg-transparent p-1 outline-none transition-shadow before:pointer-events-none before:absolute before:left-1/2 before:top-1/2 before:size-4 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-checkbox before:border before:border-input before:bg-transparent before:shadow-xs data-[state=checked]:before:border-primary data-[state=checked]:before:bg-primary dark:before:bg-input/30 dark:data-[state=checked]:before:bg-primary focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { forceMount: true, "data-slot": "checkbox-indicator", className: "pointer-events-none absolute left-1/2 top-1/2 z-10 grid size-4 -translate-x-1/2 -translate-y-1/2 place-content-center text-current transition-none group-data-[state=unchecked]/checkbox:opacity-0", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
 }
 export { Checkbox };

package/dist/components/ui/collapsible.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { ChevronRightIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 function Collapsible({ ...props }) {
     return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
@@ -16,9 +16,9 @@ function CollapsibleSection({ className, ...props }) {
     return (_jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible-section", className: cn('border-border/60 rounded-container overflow-hidden border', className), ...props }));
 }
 function CollapsibleSectionTrigger({ className, children, ...props }) {
-    return (_jsxs(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-section-trigger", className: cn('hover:bg-control-hover focus-visible:ring-ring/50 flex min-h-8 w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-left text-sm font-medium outline-none transition-[background-color,color] focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&[data-state=open]>svg]:rotate-90', className), ...props, children: [_jsx(ChevronRightIcon, { "aria-hidden": "true", className: "text-muted-foreground duration-(--motion-duration-normal) ease-(--motion-ease-standard) size-3.5 shrink-0 transition-transform" }), _jsx("span", { className: "min-w-0 flex-1", children: children })] }));
+    return (_jsxs(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-section-trigger", className: cn('hover:bg-control-hover focus-visible:ring-ring text-ui-body flex min-h-row w-full cursor-pointer items-center gap-control-gap px-control-inline py-1 text-left font-medium outline-none transition-[background-color,color] focus-visible:ring-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 [&[data-state=open]>svg]:rotate-90', className), ...props, children: [_jsx(ChevronRightIcon, { "aria-hidden": "true", className: "text-muted-foreground duration-(--motion-duration-normal) ease-(--motion-ease-standard) size-3.5 shrink-0 transition-transform" }), _jsx("span", { className: "min-w-0 flex-1", children: children })] }));
 }
 function CollapsibleSectionContent({ className, contentClassName, children, motion = 'default', ...props }) {
-    return (_jsx(CollapsiblePrimitive.Content, { "data-slot": "collapsible-section-content", "data-motion": motion, className: cn('data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1 overflow-hidden text-sm data-[motion=none]:animate-none', className), ...props, children: _jsx("div", { "data-slot": "collapsible-section-content-inner", className: cn('border-border/60 border-t px-3 py-2.5', contentClassName), children: children }) }));
+    return (_jsx(CollapsiblePrimitive.Content, { "data-slot": "collapsible-section-content", "data-motion": motion, className: cn('data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1 text-ui-body overflow-hidden data-[motion=none]:animate-none', className), ...props, children: _jsx("div", { "data-slot": "collapsible-section-content-inner", className: cn('border-border/60 border-t px-3 py-2.5', contentClassName), children: children }) }));
 }
 export { Collapsible, CollapsibleContent, CollapsibleSection, CollapsibleSectionContent, CollapsibleSectionTrigger, CollapsibleTrigger, };

package/dist/components/ui/color-well.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import { cva } from 'class-variance-authority';
-const colorWellVariants = cva('border-border has-[:focus-visible]:ring-ring/50 relative inline-flex shrink-0 overflow-hidden rounded-md border shadow-xs outline-none has-[:focus-visible]:ring-[3px]', {
+const colorWellVariants = cva('border-border has-[:focus-visible]:ring-ring relative inline-flex shrink-0 overflow-hidden rounded-control border shadow-xs outline-none has-[:focus-visible]:ring-1', {
     variants: {
         size: {
             sm: 'size-6',

package/dist/components/ui/combobox.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { Button } from './button';
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from './input-group';
+import { cn } from '../../lib/utils.js';
+import { Button } from './button.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from './input-group.js';
 const Combobox = ComboboxPrimitive.Root;
 function ComboboxValue({ ...props }) {
     return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
@@ -20,34 +20,34 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
     return (_jsxs(InputGroup, { className: cn('w-auto', className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", asChild: true, "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled, children: _jsx(ComboboxTrigger, {}) })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
 }
 function ComboboxContent({ className, side = 'bottom', sideOffset = 6, align = 'start', alignOffset = 0, anchor, ...props }) {
-    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width) relative max-h-96 min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none', className), ...props }) }) }));
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width) rounded-overlay shadow-overlay relative max-h-96 min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none', className), ...props }) }) }));
 }
 function ComboboxList({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn('data-empty:p-0 max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1', className), ...props }));
 }
 function ComboboxItem({ className, children, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground outline-hidden relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { "data-slot": "combobox-item-indicator", render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-coarse:size-5 pointer-events-none size-4" }) })] }));
+    return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground focus-visible:bg-control-hover focus-visible:text-foreground outline-hidden rounded-control text-ui-body relative flex w-full cursor-default select-none items-center gap-2 py-1.5 pl-2 pr-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { "data-slot": "combobox-item-indicator", render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-coarse:size-5 pointer-events-none size-4" }) })] }));
 }
 function ComboboxGroup({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props }));
 }
 function ComboboxLabel({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn('text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm px-2 py-1.5 text-xs', className), ...props }));
+    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn('text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-ui-body text-ui-caption px-2 py-1.5', className), ...props }));
 }
 function ComboboxCollection({ ...props }) {
     return (_jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props }));
 }
 function ComboboxEmpty({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn('text-muted-foreground group-data-empty/combobox-content:flex hidden w-full justify-center py-2 text-center text-sm', className), ...props }));
+    return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn('text-muted-foreground group-data-empty/combobox-content:flex text-ui-body hidden w-full justify-center py-2 text-center', className), ...props }));
 }
 function ComboboxSeparator({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn('bg-border -mx-1 my-1 h-px', className), ...props }));
 }
 function ComboboxChips({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn('dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 shadow-xs has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm transition-[color,box-shadow] focus-within:ring-[3px]', className), ...props }));
+    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn('dark:bg-input/30 border-input has-[:focus-visible]:border-ring has-[:focus-visible]:ring-ring has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 shadow-xs has-data-[slot=combobox-chip]:px-1.5 rounded-control text-ui-body flex min-h-control-md flex-wrap items-center gap-control-gap border bg-transparent bg-clip-padding px-control-inline py-1 transition-[color,box-shadow] has-[:focus-visible]:ring-1', className), ...props }));
 }
 function ComboboxChip({ className, children, showRemove = true, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn('bg-muted text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 whitespace-nowrap rounded-sm px-1.5 text-xs font-medium', className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
+    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn('bg-muted text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 rounded-control text-ui-caption flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 whitespace-nowrap px-1.5 font-medium', className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
 }
 function ComboboxChipsInput({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn('min-w-16 flex-1 outline-none', className), ...props }));

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Dialog } from './dialog';
+import { Dialog } from './dialog.js';
 import { Command as CommandPrimitive } from 'cmdk';
 declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
 declare function CommandDialog({ title, description, children, className, showCloseButton, filter, ...props }: React.ComponentProps<typeof Dialog> & {

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

@@ -1 +1 @@
-{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../src/components/ui/command.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,MAAM,EAKP,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAA;AAElD,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAW/C;AAED,iBAAS,aAAa,CAAC,EACrB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAsB,EACtB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAAA;CACjE,2CAoBA;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAiBrD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAWpD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAQrD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAWrD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,2CAQzD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAWpD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,aAAa,EAAE,UAAiB,EAChC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAY9B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAQ9B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAQ9B;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAQ9B;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW9B;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,gBAAgB,GACjB,CAAA"}
+{"version":3,"file":"command.d.ts","sourceRoot":"","sources":["../../../src/components/ui/command.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,MAAM,EAKP,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAA;AAElD,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,2CAW/C;AAED,iBAAS,aAAa,CAAC,EACrB,KAAyB,EACzB,WAA8C,EAC9C,QAAQ,EACR,SAAS,EACT,eAAsB,EACtB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAAA;CACjE,2CAoBA;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAiBrD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAWpD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAQrD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAWrD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,SAAS,CAAC,2CAQzD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAWpD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,aAAa,EAAE,UAAiB,EAChC,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAY9B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAQ9B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAQ9B;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW9B;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW9B;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,gBAAgB,GACjB,CAAA"}

package/dist/components/ui/command.js

@@ -1,32 +1,32 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SearchIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from './dialog';
+import { cn } from '../../lib/utils.js';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from './dialog.js';
 import { Command as CommandPrimitive } from 'cmdk';
 function Command({ className, ...props }) {
-    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', className), ...props }));
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn('bg-popover text-popover-foreground rounded-control flex h-full w-full flex-col overflow-hidden', className), ...props }));
 }
 function CommandDialog({ title = 'Command Palette', description = 'Search for a command to run...', children, className, showCloseButton = true, filter, ...props }) {
     return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn('overflow-hidden p-0', className), showCloseButton: showCloseButton, children: _jsx(Command, { filter: filter, className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: children }) })] }));
 }
 function CommandInput({ className, ...props }) {
-    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3", children: [_jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('placeholder:text-muted-foreground outline-hidden flex h-10 w-full rounded-md bg-transparent py-3 text-sm disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] }));
+    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-control-md items-center gap-control-gap border-b px-control-inline", children: [_jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('placeholder:text-muted-foreground outline-hidden rounded-control text-ui-body flex h-control-md w-full bg-transparent disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] }));
 }
 function CommandList({ className, ...props }) {
     return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn('max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden', className), ...props }));
 }
 function CommandEmpty({ ...props }) {
-    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: "py-6 text-center text-sm", ...props }));
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: "text-ui-body py-6 text-center", ...props }));
 }
 function CommandGroup({ className, ...props }) {
-    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn('text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium', className), ...props }));
+    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn('text-foreground [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-ui-caption overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium', className), ...props }));
 }
 function CommandSeparator({ className, ...props }) {
     return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn('bg-border -mx-1 h-px', className), ...props }));
 }
 function CommandItem({ className, ...props }) {
-    return (_jsx(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props }));
+    return (_jsx(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden rounded-control text-ui-body relative flex cursor-default select-none items-center gap-2 px-2 py-1.5 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props }));
 }
 function CommandItemIcon({ className, 'aria-hidden': ariaHidden = true, ...props }) {
     return (_jsx("span", { "data-slot": "command-item-icon", "aria-hidden": ariaHidden, className: cn("flex size-5 shrink-0 items-center justify-center [&_img]:size-4 [&_img]:object-contain [&_svg:not([class*='size-'])]:size-4", className), ...props }));
@@ -38,9 +38,9 @@ function CommandItemTitle({ className, ...props }) {
     return (_jsx("span", { "data-slot": "command-item-title", className: cn('flex min-w-0 items-center gap-2 truncate', className), ...props }));
 }
 function CommandItemDescription({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "command-item-description", className: cn('text-muted-foreground truncate text-xs', className), ...props }));
+    return (_jsx("span", { "data-slot": "command-item-description", className: cn('text-muted-foreground text-ui-caption truncate', className), ...props }));
 }
 function CommandShortcut({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "command-shortcut", className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className), ...props }));
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn('text-muted-foreground text-ui-caption ml-auto tracking-widest', className), ...props }));
 }
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandItemContent, CommandItemDescription, CommandItemIcon, CommandItemTitle, CommandShortcut, CommandSeparator, };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AlertDialog } from './alert-dialog';
+import { AlertDialog } from './alert-dialog.js';
 interface ConfirmDialogProps extends Omit<React.ComponentProps<typeof AlertDialog>, 'children' | 'onOpenChange'> {
     title: React.ReactNode;
     description: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/confirm-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,WAAW,EASZ,MAAM,gBAAgB,CAAA;AAEvB,UAAU,kBACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,UAAU,GAAG,cAAc,CAC5B;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACrC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;CACtD;AAED,iBAAS,aAAa,CAAC,EACrB,WAAsB,EACtB,YAAwB,EACxB,WAAmB,EACnB,WAAW,EACX,eAAe,EACf,SAAS,EACT,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,YAAyB,EACzB,IAAgB,EAChB,KAAK,EACL,OAAO,EACP,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAgFpB;AAED,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/confirm-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,WAAW,EASZ,MAAM,gBAAgB,CAAA;AAEvB,UAAU,kBACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,UAAU,GAAG,cAAc,CAC5B;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACrC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACzC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;CACtD;AAED,iBAAS,aAAa,CAAC,EACrB,WAAsB,EACtB,YAAwB,EACxB,WAAmB,EACnB,WAAW,EACX,eAAe,EACf,SAAS,EACT,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,YAAyB,EACzB,IAAgB,EAChB,KAAK,EACL,OAAO,EACP,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAiFpB;AAED,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,CAAA"}

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from './alert-dialog';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from './alert-dialog.js';
 function ConfirmDialog({ cancelLabel = 'Cancel', confirmLabel = 'Confirm', defaultOpen = false, description, getErrorMessage, onConfirm, onConfirmError, onOpenChange, open, pendingLabel = 'Working…', size = 'default', title, trigger, variant = 'default', ...props }) {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
     const [pending, setPending] = React.useState(false);
@@ -40,6 +40,6 @@ function ConfirmDialog({ cancelLabel = 'Cancel', confirmLabel = 'Confirm', defau
             onConfirmError?.(confirmError);
         }
     }, [getErrorMessage, onConfirm, onConfirmError, onOpenChange, open]);
-    return (_jsxs(AlertDialog, { open: resolvedOpen, onOpenChange: updateOpen, ...props, children: [trigger ? (_jsx(AlertDialogTrigger, { asChild: true, children: trigger })) : null, _jsxs(AlertDialogContent, { size: size, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), error ? (_jsx("p", { "data-slot": "confirm-dialog-error", role: "alert", className: "text-destructive text-sm", children: error })) : null, _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: pending, children: cancelLabel }), _jsx(AlertDialogAction, { variant: variant, pending: pending, pendingLabel: pendingLabel, onClick: handleConfirm, children: confirmLabel })] })] })] }));
+    return (_jsxs(AlertDialog, { open: resolvedOpen, onOpenChange: updateOpen, ...props, children: [trigger ? (_jsx(AlertDialogTrigger, { asChild: true, children: trigger })) : null, _jsxs(AlertDialogContent, { size: size, children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: title }), _jsx(AlertDialogDescription, { children: description })] }), error ? (_jsx("p", { "data-slot": "confirm-dialog-error", role: "alert", className: "text-destructive text-ui-body", children: error })) : null, _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: pending, children: cancelLabel }), _jsx(AlertDialogAction, { primary: true, variant: variant, pending: pending, pendingLabel: pendingLabel, onClick: handleConfirm, children: confirmLabel })] })] })] }));
 }
 export { ConfirmDialog };

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

@@ -1,13 +1,19 @@
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as React from 'react';
-declare function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+import type { MenuItems } from '../../lib/host-native-menu.js';
+type ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root> & {
+    items?: MenuItems[];
+    onSelectItem?: (id: string) => void;
+};
+declare function ContextMenu(props: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuTrigger({ onContextMenu, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
-declare function ContextMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+declare function ContextMenuSubTrigger({ className, inset, children, variant, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean;
+    variant?: 'default' | 'destructive';
 }): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
@@ -15,12 +21,17 @@ declare function ContextMenuItem({ className, inset, variant, ...props }: React.
     inset?: boolean;
     variant?: 'default' | 'destructive';
 }): import("react/jsx-runtime").JSX.Element;
-declare function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
-declare function ContextMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, variant, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+    variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuRadioItem({ className, children, variant, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+    variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
     inset?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
 declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export type { MenuItems } from '../../lib/host-native-menu.js';
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
 //# sourceMappingURL=context-menu.d.ts.map