@moldable-ai/ui 0.2.19 → 0.2.21

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { MaterialVariant } from './material';
+export type AppFrameMode = 'auto' | 'embedded' | 'window';
+declare function resolveAppFrameMode(mode: AppFrameMode): Exclude<AppFrameMode, 'auto'>;
+export interface AppFrameProps extends React.ComponentProps<'div'> {
+    /**
+     * `auto` detects whether the app is hosted in a frame. Set an explicit mode
+     * in catalogs, previews, and tests where the runtime environment is ambiguous.
+     */
+    mode?: AppFrameMode;
+}
+declare function AppFrame({ mode, className, style, ...props }: AppFrameProps): import("react/jsx-runtime").JSX.Element;
+export interface AppFrameTitlebarProps extends React.ComponentPropsWithoutRef<'header'> {
+    material?: MaterialVariant | 'none';
+}
+declare function AppFrameTitlebar({ className, material, onDoubleClick, onPointerDown, style, ...props }: AppFrameTitlebarProps): import("react/jsx-runtime").JSX.Element;
+declare function AppFrameToolbar({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export interface AppFrameContentProps extends React.ComponentPropsWithoutRef<'main'> {
+    scrollable?: boolean;
+    chatSafe?: boolean;
+}
+declare function AppFrameContent({ scrollable, chatSafe, className, style, ...props }: AppFrameContentProps): import("react/jsx-runtime").JSX.Element;
+export interface AppFrameStatusbarProps extends React.ComponentPropsWithoutRef<'footer'> {
+    material?: MaterialVariant | 'none';
+}
+declare function AppFrameStatusbar({ className, material, style, ...props }: AppFrameStatusbarProps): import("react/jsx-runtime").JSX.Element;
+export { AppFrame, AppFrameContent, AppFrameStatusbar, AppFrameTitlebar, AppFrameToolbar, resolveAppFrameMode, };
+//# sourceMappingURL=app-frame.d.ts.map

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

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

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

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+function resolveAppFrameMode(mode) {
+    if (mode !== 'auto')
+        return mode;
+    if (typeof window === 'undefined')
+        return 'window';
+    const hostMode = document.documentElement.dataset.moldableDisplayMode;
+    if (hostMode === 'embedded' || hostMode === 'window')
+        return hostMode;
+    return window.parent === window ? 'window' : 'embedded';
+}
+function AppFrame({ mode = 'auto', className, style, ...props }) {
+    const [resolvedMode, setResolvedMode] = React.useState(() => resolveAppFrameMode(mode));
+    React.useEffect(() => {
+        setResolvedMode(resolveAppFrameMode(mode));
+        if (mode !== 'auto')
+            return;
+        const updateMode = () => setResolvedMode(resolveAppFrameMode('auto'));
+        window.addEventListener('moldable:host-context-change', updateMode);
+        return () => window.removeEventListener('moldable:host-context-change', updateMode);
+    }, [mode]);
+    return (_jsx("div", { "data-slot": "app-frame", "data-mode": resolvedMode, className: cn('text-foreground flex h-dvh min-h-0 min-w-0 flex-col overflow-hidden bg-[var(--surface-canvas,var(--background))]', className), style: {
+            paddingInlineStart: 'var(--window-safe-area-inline-start, 0px)',
+            paddingInlineEnd: 'var(--window-safe-area-inline-end, 0px)',
+            ...style,
+        }, ...props }));
+}
+const WINDOW_TITLEBAR_INTERACTIVE_SELECTOR = [
+    'a',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[role="button"]',
+    '[role="link"]',
+    '[data-moldable-no-window-drag]',
+].join(',');
+function isAppOwnedWindowTitlebar() {
+    return (document.documentElement.dataset.moldableDisplayMode === 'window' &&
+        document.documentElement.dataset.moldableWindowTitlebar === 'app');
+}
+function isInteractiveTitlebarTarget(target) {
+    return (target instanceof Element &&
+        target.closest(WINDOW_TITLEBAR_INTERACTIVE_SELECTOR) !== null);
+}
+function postWindowTitlebarMessage(type) {
+    if (!isAppOwnedWindowTitlebar())
+        return;
+    window.parent.postMessage({ type }, '*');
+}
+function AppFrameTitlebar({ className, material = 'regular', onDoubleClick, onPointerDown, style, ...props }) {
+    return (_jsx("header", { "data-slot": "app-frame-titlebar", "data-material": material === 'none' ? undefined : material, "data-material-elevation": material === 'none' ? undefined : 'none', className: cn('border-border/70 flex shrink-0 items-center gap-2 border-b', material !== 'none' && 'moldable-material', className), style: {
+            minHeight: 'max(var(--density-toolbar-height, 2.5rem), var(--window-titlebar-height, 0px))',
+            paddingInlineStart: 'max(var(--density-pane-padding, 0.75rem), var(--window-control-inset-inline-start, 0px))',
+            paddingInlineEnd: 'max(var(--density-pane-padding, 0.75rem), var(--window-control-inset-inline-end, 0px))',
+            ...style,
+        }, onPointerDown: (event) => {
+            onPointerDown?.(event);
+            if (event.defaultPrevented ||
+                event.button !== 0 ||
+                isInteractiveTitlebarTarget(event.target)) {
+                return;
+            }
+            postWindowTitlebarMessage('startWindowDrag');
+        }, onDoubleClick: (event) => {
+            onDoubleClick?.(event);
+            if (event.defaultPrevented ||
+                isInteractiveTitlebarTarget(event.target)) {
+                return;
+            }
+            postWindowTitlebarMessage('titlebarDoubleClick');
+        }, ...props }));
+}
+function AppFrameToolbar({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "app-frame-toolbar", className: cn('flex min-h-9 min-w-0 flex-1 items-center gap-2 px-3 py-1.5', className), ...props }));
+}
+function AppFrameContent({ scrollable = true, chatSafe = true, className, style, ...props }) {
+    return (_jsx("main", { "data-slot": "app-frame-content", "data-scrollable": scrollable, "data-chat-safe": chatSafe, className: cn('min-h-0 min-w-0 flex-1', scrollable ? 'overflow-auto' : 'overflow-hidden', className), style: {
+            paddingBlockEnd: chatSafe
+                ? 'calc(var(--window-content-inset-bottom, 0px) + var(--chat-safe-padding, 0px))'
+                : 'var(--window-content-inset-bottom, 0px)',
+            ...style,
+        }, ...props }));
+}
+function AppFrameStatusbar({ className, material = 'regular', style, ...props }) {
+    return (_jsx("footer", { "data-slot": "app-frame-statusbar", "data-material": material === 'none' ? undefined : material, "data-material-elevation": material === 'none' ? undefined : 'none', className: cn('border-border/70 text-muted-foreground flex min-h-7 shrink-0 items-center gap-2 border-t px-3 py-1 text-xs', material !== 'none' && 'moldable-material', className), style: {
+            paddingBlockEnd: 'calc(var(--window-content-inset-bottom, 0px) + 0.25rem)',
+            ...style,
+        }, ...props }));
+}
+export { AppFrame, AppFrameContent, AppFrameStatusbar, AppFrameTitlebar, AppFrameToolbar, resolveAppFrameMode, };

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

@@ -1,7 +1,7 @@
 import { Separator } from './separator';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonGroupVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
+    orientation?: "vertical" | "horizontal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
 declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<'div'> & {

package/dist/components/ui/button.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '../../lib/utils';
 import { cva } from 'class-variance-authority';
-const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none 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("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", {
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground hover:bg-primary/90',

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

@@ -1,6 +1,14 @@
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as React from 'react';
 declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
 declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+declare function CollapsibleSection({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleSectionTrigger({ className, children, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+interface CollapsibleSectionContentProps extends React.ComponentProps<typeof CollapsiblePrimitive.Content> {
+    motion?: 'default' | 'none';
+    contentClassName?: string;
+}
+declare function CollapsibleSectionContent({ className, contentClassName, children, motion, ...props }: CollapsibleSectionContentProps): import("react/jsx-runtime").JSX.Element;
+export { Collapsible, CollapsibleContent, CollapsibleSection, CollapsibleSectionContent, CollapsibleSectionTrigger, CollapsibleTrigger, type CollapsibleSectionContentProps, };
 //# sourceMappingURL=collapsible.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/ui/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAEnE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,kBAAkB,CAAC,2CAOtE;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,kBAAkB,CAAC,2CAOtE;AAED,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/ui/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAEnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,kBAAkB,CAAC,2CAOtE;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,kBAAkB,CAAC,2CAOtE;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAWxD;AAED,iBAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAiB3D;AAED,UAAU,8BACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC;IACjE,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,iBAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,MAAkB,EAClB,GAAG,KAAK,EACT,EAAE,8BAA8B,2CAsBhC;AAED,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,yBAAyB,EACzB,yBAAyB,EACzB,kBAAkB,EAClB,KAAK,8BAA8B,GACpC,CAAA"}

package/dist/components/ui/collapsible.js

@@ -1,6 +1,8 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+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';
 function Collapsible({ ...props }) {
     return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
 }
@@ -10,4 +12,13 @@ function CollapsibleTrigger({ ...props }) {
 function CollapsibleContent({ ...props }) {
     return (_jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props }));
 }
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+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 })] }));
+}
+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 }) }));
+}
+export { Collapsible, CollapsibleContent, CollapsibleSection, CollapsibleSectionContent, CollapsibleSectionTrigger, CollapsibleTrigger, };

package/dist/components/ui/collection-navigation.d.ts

@@ -0,0 +1,8 @@
+type CollectionItem<Node extends HTMLElement = HTMLElement> = {
+    node: Node;
+    disabled: boolean;
+};
+declare function getCollectionItemsInDomOrder<Value, Node extends HTMLElement = HTMLElement>(items: ReadonlyMap<Value, CollectionItem<Node>>): [Value, CollectionItem<Node>][];
+declare function isInteractiveDescendant(target: EventTarget | null, currentTarget: HTMLElement): boolean;
+export { getCollectionItemsInDomOrder, isInteractiveDescendant, type CollectionItem, };
+//# sourceMappingURL=collection-navigation.d.ts.map

package/dist/components/ui/collection-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/ui/collection-navigation.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,CAAC,IAAI,SAAS,WAAW,GAAG,WAAW,IAAI;IAC5D,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAWD,iBAAS,4BAA4B,CACnC,KAAK,EACL,IAAI,SAAS,WAAW,GAAG,WAAW,EACtC,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC,mCAIhD;AAED,iBAAS,uBAAuB,CAC9B,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,aAAa,EAAE,WAAW,WAS3B;AAED,OAAO,EACL,4BAA4B,EAC5B,uBAAuB,EACvB,KAAK,cAAc,GACpB,CAAA"}

package/dist/components/ui/collection-navigation.js

@@ -0,0 +1,19 @@
+function compareNodesInDocumentOrder(left, right) {
+    if (left === right)
+        return 0;
+    const position = left.compareDocumentPosition(right);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+        return -1;
+    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+        return 1;
+    return 0;
+}
+function getCollectionItemsInDomOrder(items) {
+    return [...items.entries()].sort(([, left], [, right]) => compareNodesInDocumentOrder(left.node, right.node));
+}
+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"]'));
+}
+export { getCollectionItemsInDomOrder, isInteractiveDescendant, };

package/dist/components/ui/color-well.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const colorWellVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ColorWellProps extends Omit<React.ComponentProps<'input'>, 'onChange' | 'size' | 'type' | 'value'>, VariantProps<typeof colorWellVariants> {
+    value?: string | null;
+    onValueChange?: (value: string) => void;
+    readOnly?: boolean;
+}
+declare function ColorWell({ value, onValueChange, readOnly, size, className, 'aria-label': ariaLabel, disabled, ...props }: ColorWellProps): import("react/jsx-runtime").JSX.Element;
+export { ColorWell, colorWellVariants };
+//# sourceMappingURL=color-well.d.ts.map

package/dist/components/ui/color-well.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-well.d.ts","sourceRoot":"","sources":["../../../src/components/ui/color-well.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,iBAAiB;;8EActB,CAAA;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CACR,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACvC,EACD,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,aAAa,EACb,QAAgB,EAChB,IAAI,EACJ,SAAS,EACT,YAAY,EAAE,SAA0B,EACxC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CAkDhB;AAED,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}

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

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+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]', {
+    variants: {
+        size: {
+            sm: 'size-6',
+            default: 'size-8',
+            lg: 'size-10',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+function ColorWell({ value, onValueChange, readOnly = false, size, className, 'aria-label': ariaLabel = 'Choose color', disabled, ...props }) {
+    const swatch = (_jsx("span", { "aria-hidden": "true", "data-slot": "color-well-swatch", className: "absolute inset-0", style: {
+            backgroundColor: value ?? 'transparent',
+            backgroundImage: value
+                ? undefined
+                : 'conic-gradient(var(--muted) 25%, transparent 0 50%, var(--muted) 0 75%, transparent 0)',
+            backgroundSize: value ? undefined : '8px 8px',
+        } }));
+    if (readOnly) {
+        return (_jsx("span", { "data-slot": "color-well", role: "img", "aria-label": ariaLabel, className: cn(colorWellVariants({ size }), className), children: swatch }));
+    }
+    return (_jsxs("label", { "data-slot": "color-well", className: cn(colorWellVariants({ size }), disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', className), children: [swatch, _jsx("input", { type: "color", value: value ?? '#000000', "aria-label": ariaLabel, disabled: disabled, className: "absolute inset-0 cursor-[inherit] opacity-0", onChange: (event) => onValueChange?.(event.currentTarget.value), ...props })] }));
+}
+export { ColorWell, colorWellVariants };

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

@@ -15,6 +15,10 @@ declare function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandP
 declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
 declare function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItemIcon({ className, 'aria-hidden': ariaHidden, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItemContent({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItemTitle({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItemDescription({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
 declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandItemContent, CommandItemDescription, CommandItemIcon, CommandItemTitle, CommandShortcut, CommandSeparator, };
 //# sourceMappingURL=command.d.ts.map

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

package/dist/components/ui/command.js

@@ -28,7 +28,19 @@ function CommandSeparator({ 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 }));
 }
+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 }));
+}
+function CommandItemContent({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-item-content", className: cn('flex min-w-0 flex-1 flex-col', className), ...props }));
+}
+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 }));
+}
 function CommandShortcut({ className, ...props }) {
     return (_jsx("span", { "data-slot": "command-shortcut", className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className), ...props }));
 }
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandItemContent, CommandItemDescription, CommandItemIcon, CommandItemTitle, CommandShortcut, CommandSeparator, };

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AlertDialog } from './alert-dialog';
+interface ConfirmDialogProps extends Omit<React.ComponentProps<typeof AlertDialog>, 'children' | 'onOpenChange'> {
+    title: React.ReactNode;
+    description: React.ReactNode;
+    trigger?: React.ReactElement;
+    confirmLabel?: React.ReactNode;
+    pendingLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    variant?: 'default' | 'destructive';
+    size?: 'sm' | 'default' | 'lg';
+    onOpenChange?: (open: boolean) => void;
+    onConfirm: () => void | Promise<void>;
+    onConfirmError?: (error: unknown) => void;
+    getErrorMessage?: (error: unknown) => React.ReactNode;
+}
+declare function ConfirmDialog({ cancelLabel, confirmLabel, defaultOpen, description, getErrorMessage, onConfirm, onConfirmError, onOpenChange, open, pendingLabel, size, title, trigger, variant, ...props }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export { ConfirmDialog, type ConfirmDialogProps };
+//# sourceMappingURL=confirm-dialog.d.ts.map

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

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

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

@@ -0,0 +1,45 @@
+'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';
+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);
+    const [error, setError] = React.useState(null);
+    const pendingRef = React.useRef(false);
+    const resolvedOpen = open ?? uncontrolledOpen;
+    const updateOpen = React.useCallback((nextOpen) => {
+        if (pendingRef.current && !nextOpen)
+            return;
+        if (open === undefined)
+            setUncontrolledOpen(nextOpen);
+        if (nextOpen)
+            setError(null);
+        onOpenChange?.(nextOpen);
+    }, [onOpenChange, open]);
+    const handleConfirm = React.useCallback(async (event) => {
+        event.preventDefault();
+        if (pendingRef.current)
+            return;
+        pendingRef.current = true;
+        setPending(true);
+        setError(null);
+        try {
+            await onConfirm();
+            pendingRef.current = false;
+            setPending(false);
+            if (open === undefined)
+                setUncontrolledOpen(false);
+            onOpenChange?.(false);
+        }
+        catch (confirmError) {
+            pendingRef.current = false;
+            setPending(false);
+            setError(getErrorMessage?.(confirmError) ??
+                'Could not complete the action. Please try again.');
+            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 })] })] })] }));
+}
+export { ConfirmDialog };

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const dateFieldVariants: (props?: ({
+    variant?: "default" | "filled" | null | undefined;
+    density?: "compact" | "default" | "comfortable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DateFieldProps extends Omit<React.ComponentProps<'input'>, 'defaultValue' | 'size' | 'type' | 'value'>, VariantProps<typeof dateFieldVariants> {
+    /** ISO calendar date in YYYY-MM-DD form. No timezone conversion is applied. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onClear?: () => void;
+    clearable?: boolean;
+    clearLabel?: string;
+    inputClassName?: string;
+}
+declare function DateField({ className, inputClassName, value, defaultValue, onChange, onValueChange, onClear, clearable, clearLabel, variant, density, disabled, readOnly, ref, ...props }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
+export { DateField, dateFieldVariants, type DateFieldProps };
+//# sourceMappingURL=date-field.d.ts.map

package/dist/components/ui/date-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/date-field.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAEjE,QAAA,MAAM,iBAAiB;;;8EAmBtB,CAAA;AAED,UAAU,cACR,SAAQ,IAAI,CACR,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC7B,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAC3C,EACD,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,cAAc,EACd,KAAK,EACL,YAAiB,EACjB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,SAAiB,EACjB,UAAyB,EACzB,OAAmB,EACnB,OAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,2CAkFhB;AAED,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,cAAc,EAAE,CAAA"}

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/date-picker.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Button } from './button';
+import { Calendar } from './calendar';
+type DatePickerDensity = 'compact' | 'default' | 'comfortable';
+interface DatePickerProps extends Omit<React.ComponentProps<typeof Button>, 'children' | 'defaultValue' | 'size' | 'value'> {
+    /** ISO calendar date in YYYY-MM-DD form. No timezone conversion is applied. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    locale?: React.ComponentProps<typeof Calendar>['locale'];
+    formatValue?: (value: string) => React.ReactNode;
+    clearable?: boolean;
+    clearLabel?: string;
+    density?: DatePickerDensity;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function DatePicker({ className, value, defaultValue, onValueChange, min, max, placeholder, locale, formatValue, clearable, clearLabel, density, open, defaultOpen, onOpenChange, disabled, variant, 'aria-invalid': ariaInvalid, ...buttonProps }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export { DatePicker, type DatePickerDensity, type DatePickerProps };
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/ui/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/ui/date-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAGrC,KAAK,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;AAE9D,UAAU,eACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EACnC,UAAU,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,CAC/C;IACD,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;IACxD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IAChD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAwCD,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,GAAG,EACH,GAAG,EACH,WAA2B,EAC3B,MAAM,EACN,WAAW,EACX,SAAiB,EACjB,UAAyB,EACzB,OAAmB,EACnB,IAAI,EACJ,WAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,OAAmB,EACnB,cAAc,EAAE,WAAW,EAC3B,GAAG,WAAW,EACf,EAAE,eAAe,2CA2GjB;AAED,OAAO,EAAE,UAAU,EAAE,KAAK,iBAAiB,EAAE,KAAK,eAAe,EAAE,CAAA"}

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

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDaysIcon } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+import { Calendar } from './calendar';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+const ISO_CALENDAR_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+function parseCalendarDate(value) {
+    if (!value)
+        return undefined;
+    const match = ISO_CALENDAR_DATE.exec(value);
+    if (!match)
+        return undefined;
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+    const date = new Date(0);
+    date.setHours(0, 0, 0, 0);
+    date.setFullYear(year, month - 1, day);
+    if (date.getFullYear() !== year ||
+        date.getMonth() !== month - 1 ||
+        date.getDate() !== day) {
+        return undefined;
+    }
+    return date;
+}
+function formatCalendarDate(date) {
+    const year = String(date.getFullYear()).padStart(4, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+const densityClasses = {
+    compact: 'h-7 gap-1.5 px-2 text-xs',
+    default: 'h-9 px-3',
+    comfortable: 'h-10 px-3.5',
+};
+function DatePicker({ className, value, defaultValue = '', onValueChange, min, max, placeholder = 'Choose date', locale, formatValue, clearable = false, clearLabel = 'Clear date', density = 'default', open, defaultOpen = false, onOpenChange, disabled, variant = 'outline', 'aria-invalid': ariaInvalid, ...buttonProps }) {
+    const controlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const currentValue = controlled ? value : internalValue;
+    const selectedDate = parseCalendarDate(currentValue);
+    const minDate = parseCalendarDate(min);
+    const maxDate = parseCalendarDate(max);
+    const isOpen = open ?? internalOpen;
+    const invalid = Boolean(currentValue && !selectedDate);
+    const disabledDates = React.useMemo(() => {
+        const matchers = [];
+        if (minDate)
+            matchers.push({ before: minDate });
+        if (maxDate)
+            matchers.push({ after: maxDate });
+        return matchers;
+    }, [maxDate, minDate]);
+    const setOpen = React.useCallback((nextOpen) => {
+        if (open === undefined)
+            setInternalOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    }, [onOpenChange, open]);
+    const commitValue = React.useCallback((nextValue) => {
+        if (!controlled)
+            setInternalValue(nextValue);
+        onValueChange?.(nextValue);
+    }, [controlled, onValueChange]);
+    const displayValue = React.useMemo(() => {
+        if (!currentValue)
+            return null;
+        if (formatValue)
+            return formatValue(currentValue);
+        if (!selectedDate)
+            return currentValue;
+        return new Intl.DateTimeFormat(locale?.code, {
+            dateStyle: 'medium',
+        }).format(selectedDate);
+    }, [currentValue, formatValue, locale?.code, selectedDate]);
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { "data-slot": "date-picker-trigger", "data-density": density, type: "button", variant: variant, disabled: disabled, "aria-invalid": (ariaInvalid ?? invalid) || undefined, className: cn('min-w-0 justify-start font-normal', !displayValue && 'text-muted-foreground', densityClasses[density], className), ...buttonProps, children: [_jsx(CalendarDaysIcon, { "aria-hidden": "true" }), _jsx("span", { className: "min-w-0 truncate", children: displayValue ?? placeholder })] }) }), _jsxs(PopoverContent, { "data-slot": "date-picker-content", align: "start", className: "w-auto p-0", children: [_jsx(Calendar, { mode: "single", locale: locale, selected: selectedDate, defaultMonth: selectedDate ?? minDate, disabled: disabledDates, autoFocus: true, onSelect: (nextDate) => {
+                            if (!nextDate) {
+                                if (clearable)
+                                    commitValue('');
+                                return;
+                            }
+                            commitValue(formatCalendarDate(nextDate));
+                            setOpen(false);
+                        } }), clearable && currentValue ? (_jsx("div", { className: "border-border/60 flex justify-end border-t p-2", children: _jsx(Button, { type: "button", size: "xs", variant: "ghost", onClick: () => {
+                                commitValue('');
+                                setOpen(false);
+                            }, children: clearLabel }) })) : null] })] }));
+}
+export { DatePicker };