@uipath/apollo-wind 2.69.0 → 2.71.0

package/dist/components/ui/chat-hero.js

@@ -0,0 +1,189 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { createContext, forwardRef, isValidElement, useContext, useMemo } from "react";
+import { cn } from "../../lib/index.js";
+const ChatHeroContext = /*#__PURE__*/ createContext({
+    layout: 'centered',
+    density: 'comfortable'
+});
+const chatHeroVariants = cva('flex w-full min-w-0 flex-1 flex-col', {
+    variants: {
+        layout: {
+            centered: 'mx-auto max-w-[800px] items-center justify-center',
+            docked: 'justify-end gap-6 text-start'
+        },
+        density: {
+            comfortable: '',
+            compact: ''
+        }
+    },
+    compoundVariants: [
+        {
+            layout: 'centered',
+            density: 'comfortable',
+            className: 'gap-8'
+        },
+        {
+            layout: 'centered',
+            density: 'compact',
+            className: 'gap-6'
+        }
+    ],
+    defaultVariants: {
+        layout: 'centered',
+        density: 'comfortable'
+    }
+});
+const ChatHero = /*#__PURE__*/ forwardRef(({ className, layout, density, ...props }, ref)=>{
+    const context = useMemo(()=>({
+            layout: layout ?? 'centered',
+            density: density ?? 'comfortable'
+        }), [
+        layout,
+        density
+    ]);
+    return /*#__PURE__*/ jsx(ChatHeroContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            "data-slot": "chat-hero",
+            "data-layout": context.layout,
+            "data-density": context.density,
+            className: cn(chatHeroVariants({
+                layout: context.layout,
+                density: context.density
+            }), className),
+            ...props
+        })
+    });
+});
+ChatHero.displayName = 'ChatHero';
+const ChatHeroHeader = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    const { layout } = useContext(ChatHeroContext);
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "chat-hero-header",
+        className: cn('flex w-full min-w-0 flex-col empty:hidden', 'centered' === layout ? 'items-center gap-1 text-center' : 'items-start gap-2 text-start', className),
+        ...props
+    });
+});
+ChatHeroHeader.displayName = 'ChatHeroHeader';
+const ChatHeroLogo = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "chat-hero-logo",
+        className: cn('mb-3 flex shrink-0 items-center justify-center', className),
+        ...props
+    }));
+ChatHeroLogo.displayName = 'ChatHeroLogo';
+function isEmptyContent(children) {
+    return null == children || false === children || '' === children;
+}
+function isEmptyTitle(children, asChild) {
+    if (isEmptyContent(children)) return true;
+    if (!asChild || !/*#__PURE__*/ isValidElement(children)) return false;
+    return isEmptyContent(children.props.children);
+}
+const chatHeroTitleVariants = cva('min-w-0 text-foreground', {
+    variants: {
+        layout: {
+            centered: 'font-bold tracking-tight',
+            docked: 'font-semibold tracking-tight'
+        },
+        density: {
+            comfortable: '',
+            compact: ''
+        }
+    },
+    compoundVariants: [
+        {
+            layout: 'centered',
+            density: 'comfortable',
+            className: 'text-4xl leading-10'
+        },
+        {
+            layout: 'centered',
+            density: 'compact',
+            className: 'text-2xl leading-8'
+        },
+        {
+            layout: 'docked',
+            className: 'text-xl leading-6'
+        }
+    ],
+    defaultVariants: {
+        layout: 'centered',
+        density: 'comfortable'
+    }
+});
+const ChatHeroTitle = /*#__PURE__*/ forwardRef(({ className, asChild = false, children, ...props }, ref)=>{
+    const { layout, density } = useContext(ChatHeroContext);
+    if (isEmptyTitle(children, asChild)) return null;
+    const Comp = asChild ? Slot : 'h2';
+    return /*#__PURE__*/ jsx(Comp, {
+        ref: ref,
+        "data-slot": "chat-hero-title",
+        className: cn(chatHeroTitleVariants({
+            layout,
+            density
+        }), className),
+        ...props,
+        children: children
+    });
+});
+ChatHeroTitle.displayName = 'ChatHeroTitle';
+const chatHeroDescriptionVariants = cva('min-w-0 text-muted-foreground', {
+    variants: {
+        layout: {
+            centered: '',
+            docked: ''
+        },
+        density: {
+            comfortable: '',
+            compact: ''
+        }
+    },
+    compoundVariants: [
+        {
+            layout: 'centered',
+            density: 'comfortable',
+            className: 'text-base'
+        },
+        {
+            layout: 'centered',
+            density: 'compact',
+            className: 'text-sm'
+        },
+        {
+            layout: 'docked',
+            density: 'comfortable',
+            className: 'text-sm leading-5'
+        },
+        {
+            layout: 'docked',
+            density: 'compact',
+            className: 'text-xs leading-4'
+        }
+    ],
+    defaultVariants: {
+        layout: 'centered',
+        density: 'comfortable'
+    }
+});
+const ChatHeroDescription = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>{
+    const { layout, density } = useContext(ChatHeroContext);
+    if (isEmptyContent(children)) return null;
+    return /*#__PURE__*/ jsx("p", {
+        ref: ref,
+        "data-slot": "chat-hero-description",
+        className: cn(chatHeroDescriptionVariants({
+            layout,
+            density
+        }), className),
+        ...props,
+        children: children
+    });
+});
+ChatHeroDescription.displayName = "ChatHeroDescription";
+export { ChatHero, ChatHeroDescription, ChatHeroHeader, ChatHeroLogo, ChatHeroTitle, chatHeroDescriptionVariants, chatHeroTitleVariants, chatHeroVariants };

package/dist/components/ui/citation.cjs

@@ -0,0 +1,188 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Citation: ()=>Citation,
+    citationVariants: ()=>citationVariants,
+    DEFAULT_CITATION_STRINGS: ()=>DEFAULT_CITATION_STRINGS
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_class_variance_authority_namespaceObject = require("class-variance-authority");
+const external_react_namespaceObject = require("react");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const external_hover_card_cjs_namespaceObject = require("./hover-card.cjs");
+const DEFAULT_CITATION_STRINGS = {
+    label: (index, title)=>title ? `Citation ${index}: ${title}` : `Citation ${index}`
+};
+const citationVariants = (0, external_class_variance_authority_namespaceObject.cva)('mx-0.5 inline-flex cursor-pointer items-center justify-center rounded-full bg-muted align-text-top font-medium leading-none text-muted-foreground tabular-nums transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', {
+    variants: {
+        size: {
+            default: 'h-4.5 min-w-4.5 px-1.5 text-[11px]',
+            sm: 'h-4 min-w-4 px-1 text-[10px]',
+            lg: 'h-5 min-w-5 px-1.5 text-xs'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+const Citation = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, size = 'default', index, title, snippet, source, href, onSelect, onClick, onFocus, onBlur, onPointerEnter, onPointerLeave, preview = true, previewSide = 'top', onActiveChange, strings, 'aria-label': ariaLabel, children, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_CITATION_STRINGS,
+        ...strings
+    };
+    const [open, setOpen] = external_react_namespaceObject.useState(false);
+    const activity = external_react_namespaceObject.useRef({
+        hovered: false,
+        focused: false,
+        previewOpen: false
+    });
+    const active = external_react_namespaceObject.useRef(false);
+    const onActiveChangeRef = external_react_namespaceObject.useRef(onActiveChange);
+    onActiveChangeRef.current = onActiveChange;
+    const updateActivity = (patch)=>{
+        Object.assign(activity.current, patch);
+        const { hovered, focused, previewOpen } = activity.current;
+        const next = hovered || focused || previewOpen;
+        if (next === active.current) return;
+        active.current = next;
+        onActiveChangeRef.current?.(next);
+    };
+    const dismissed = external_react_namespaceObject.useRef(false);
+    const setPreviewOpen = (next)=>{
+        if (next && dismissed.current) return;
+        setOpen(next);
+        updateActivity({
+            previewOpen: next
+        });
+    };
+    external_react_namespaceObject.useEffect(()=>()=>{
+            if (active.current) onActiveChangeRef.current?.(false);
+        }, []);
+    const name = ariaLabel ?? text.label(String(index), title || void 0);
+    const hasPreview = preview && Boolean(title || snippet || source);
+    const button = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+        ref: ref,
+        type: "button",
+        "data-slot": "citation",
+        "data-size": size,
+        "aria-label": name,
+        className: (0, index_cjs_namespaceObject.cn)(citationVariants({
+            size
+        }), className),
+        onClick: (event)=>{
+            onClick?.(event);
+            if (hasPreview) {
+                dismissed.current = true;
+                setPreviewOpen(false);
+            }
+            if (!event.defaultPrevented) onSelect?.({
+                index,
+                title,
+                snippet,
+                source,
+                href: (0, index_cjs_namespaceObject.safeHref)(href)
+            }, event);
+        },
+        onFocus: (event)=>{
+            onFocus?.(event);
+            if (!event.currentTarget.matches(':focus-visible')) return;
+            updateActivity({
+                focused: true
+            });
+            if (hasPreview) setPreviewOpen(true);
+        },
+        onBlur: (event)=>{
+            onBlur?.(event);
+            dismissed.current = false;
+            updateActivity({
+                focused: false
+            });
+        },
+        onPointerEnter: (event)=>{
+            onPointerEnter?.(event);
+            updateActivity({
+                hovered: true
+            });
+        },
+        onPointerLeave: (event)=>{
+            onPointerLeave?.(event);
+            dismissed.current = false;
+            updateActivity({
+                hovered: false
+            });
+        },
+        ...props,
+        children: children ?? index
+    });
+    if (!hasPreview) return button;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_hover_card_cjs_namespaceObject.HoverCard, {
+        open: open,
+        onOpenChange: setPreviewOpen,
+        openDelay: 300,
+        closeDelay: 150,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_hover_card_cjs_namespaceObject.HoverCardTrigger, {
+                asChild: true,
+                children: button
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_hover_card_cjs_namespaceObject.HoverCardContent, {
+                "data-slot": "citation-preview",
+                side: previewSide,
+                className: "flex w-72 flex-col gap-1 p-3 text-sm",
+                children: [
+                    source && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        "data-slot": "citation-source",
+                        className: "truncate text-xs text-muted-foreground",
+                        children: source
+                    }),
+                    title && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        "data-slot": "citation-title",
+                        className: "line-clamp-2 font-medium",
+                        children: title
+                    }),
+                    snippet && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        "data-slot": "citation-snippet",
+                        className: "line-clamp-3 text-xs leading-relaxed text-muted-foreground",
+                        children: snippet
+                    })
+                ]
+            })
+        ]
+    });
+});
+Citation.displayName = 'Citation';
+exports.Citation = __webpack_exports__.Citation;
+exports.DEFAULT_CITATION_STRINGS = __webpack_exports__.DEFAULT_CITATION_STRINGS;
+exports.citationVariants = __webpack_exports__.citationVariants;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "Citation",
+    "DEFAULT_CITATION_STRINGS",
+    "citationVariants"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,42 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { HoverCardContent } from './hover-card';
+/**
+ * An inline citation marker for chat prose, with a hover and focus preview of the source. It does
+ * not navigate on its own: `onSelect` receives the citation and the event, so a host can run its
+ * `citation-click` pre-hook and decide whether to open `href`. The payload drops an `href` that is
+ * not http(s), mailto, tel or relative, so it is safe to open.
+ */
+export interface CitationData {
+    /** The source number, usually 1-based. Shown in the pill unless `children` are given. */
+    index: number | string;
+    title?: string;
+    snippet?: string;
+    /** Where it came from: a domain, a file name or a page reference. */
+    source?: string;
+    href?: string;
+}
+export interface CitationStrings {
+    /** Accessible name of the pill. */
+    label: (index: string, title?: string) => string;
+}
+export declare const DEFAULT_CITATION_STRINGS: CitationStrings;
+declare const citationVariants: (props?: ({
+    size?: "default" | "lg" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CitationProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect' | 'title'>, CitationData, VariantProps<typeof citationVariants> {
+    onSelect?: (citation: CitationData, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Set false to skip the preview card even when there is content for it. */
+    preview?: boolean;
+    previewSide?: React.ComponentPropsWithoutRef<typeof HoverCardContent>['side'];
+    /**
+     * Called when the citation becomes active or inactive, so a host can mark the cited text. It
+     * activates at once on hover or keyboard focus, and deactivates once neither applies and its
+     * preview, if shown, has closed. The preview's close delay means one citation can deactivate after the next
+     * activates. Also called with `false` if it unmounts active.
+     */
+    onActiveChange?: (active: boolean) => void;
+    strings?: Partial<CitationStrings>;
+}
+declare const Citation: React.ForwardRefExoticComponent<CitationProps & React.RefAttributes<HTMLButtonElement>>;
+export { Citation, citationVariants };

package/dist/components/ui/citation.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { cn, safeHref } from "../../lib/index.js";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card.js";
+const DEFAULT_CITATION_STRINGS = {
+    label: (index, title)=>title ? `Citation ${index}: ${title}` : `Citation ${index}`
+};
+const citationVariants = cva('mx-0.5 inline-flex cursor-pointer items-center justify-center rounded-full bg-muted align-text-top font-medium leading-none text-muted-foreground tabular-nums transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', {
+    variants: {
+        size: {
+            default: 'h-4.5 min-w-4.5 px-1.5 text-[11px]',
+            sm: 'h-4 min-w-4 px-1 text-[10px]',
+            lg: 'h-5 min-w-5 px-1.5 text-xs'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+const Citation = /*#__PURE__*/ forwardRef(({ className, size = 'default', index, title, snippet, source, href, onSelect, onClick, onFocus, onBlur, onPointerEnter, onPointerLeave, preview = true, previewSide = 'top', onActiveChange, strings, 'aria-label': ariaLabel, children, ...props }, ref)=>{
+    const text = {
+        ...DEFAULT_CITATION_STRINGS,
+        ...strings
+    };
+    const [open, setOpen] = useState(false);
+    const activity = useRef({
+        hovered: false,
+        focused: false,
+        previewOpen: false
+    });
+    const active = useRef(false);
+    const onActiveChangeRef = useRef(onActiveChange);
+    onActiveChangeRef.current = onActiveChange;
+    const updateActivity = (patch)=>{
+        Object.assign(activity.current, patch);
+        const { hovered, focused, previewOpen } = activity.current;
+        const next = hovered || focused || previewOpen;
+        if (next === active.current) return;
+        active.current = next;
+        onActiveChangeRef.current?.(next);
+    };
+    const dismissed = useRef(false);
+    const setPreviewOpen = (next)=>{
+        if (next && dismissed.current) return;
+        setOpen(next);
+        updateActivity({
+            previewOpen: next
+        });
+    };
+    useEffect(()=>()=>{
+            if (active.current) onActiveChangeRef.current?.(false);
+        }, []);
+    const name = ariaLabel ?? text.label(String(index), title || void 0);
+    const hasPreview = preview && Boolean(title || snippet || source);
+    const button = /*#__PURE__*/ jsx("button", {
+        ref: ref,
+        type: "button",
+        "data-slot": "citation",
+        "data-size": size,
+        "aria-label": name,
+        className: cn(citationVariants({
+            size
+        }), className),
+        onClick: (event)=>{
+            onClick?.(event);
+            if (hasPreview) {
+                dismissed.current = true;
+                setPreviewOpen(false);
+            }
+            if (!event.defaultPrevented) onSelect?.({
+                index,
+                title,
+                snippet,
+                source,
+                href: safeHref(href)
+            }, event);
+        },
+        onFocus: (event)=>{
+            onFocus?.(event);
+            if (!event.currentTarget.matches(':focus-visible')) return;
+            updateActivity({
+                focused: true
+            });
+            if (hasPreview) setPreviewOpen(true);
+        },
+        onBlur: (event)=>{
+            onBlur?.(event);
+            dismissed.current = false;
+            updateActivity({
+                focused: false
+            });
+        },
+        onPointerEnter: (event)=>{
+            onPointerEnter?.(event);
+            updateActivity({
+                hovered: true
+            });
+        },
+        onPointerLeave: (event)=>{
+            onPointerLeave?.(event);
+            dismissed.current = false;
+            updateActivity({
+                hovered: false
+            });
+        },
+        ...props,
+        children: children ?? index
+    });
+    if (!hasPreview) return button;
+    return /*#__PURE__*/ jsxs(HoverCard, {
+        open: open,
+        onOpenChange: setPreviewOpen,
+        openDelay: 300,
+        closeDelay: 150,
+        children: [
+            /*#__PURE__*/ jsx(HoverCardTrigger, {
+                asChild: true,
+                children: button
+            }),
+            /*#__PURE__*/ jsxs(HoverCardContent, {
+                "data-slot": "citation-preview",
+                side: previewSide,
+                className: "flex w-72 flex-col gap-1 p-3 text-sm",
+                children: [
+                    source && /*#__PURE__*/ jsx("span", {
+                        "data-slot": "citation-source",
+                        className: "truncate text-xs text-muted-foreground",
+                        children: source
+                    }),
+                    title && /*#__PURE__*/ jsx("span", {
+                        "data-slot": "citation-title",
+                        className: "line-clamp-2 font-medium",
+                        children: title
+                    }),
+                    snippet && /*#__PURE__*/ jsx("span", {
+                        "data-slot": "citation-snippet",
+                        className: "line-clamp-3 text-xs leading-relaxed text-muted-foreground",
+                        children: snippet
+                    })
+                ]
+            })
+        ]
+    });
+});
+Citation.displayName = 'Citation';
+export { Citation, DEFAULT_CITATION_STRINGS, citationVariants };

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

@@ -42,6 +42,7 @@ const external_input_group_context_cjs_namespaceObject = require("./input-group-
 const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = external_react_namespaceObject.useId();
     const validationId = errorId ?? `${id ?? `date-picker-${generatedId.replace(/:/g, '')}`}-error`;
+    const date = value instanceof Date && (0, external_date_fns_namespaceObject.isValid)(value) ? value : void 0;
     const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
     const grouped = group.inGroup;
     const validation = (0, external_input_group_context_cjs_namespaceObject.useControlValidation)(group, {
@@ -53,7 +54,7 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
     });
     const triggerProps = {
         id,
-        'aria-label': id || ariaLabelledBy ? void 0 : value ? `Selected date: ${(0, external_date_fns_namespaceObject.format)(value, 'PPP')}` : placeholder,
+        'aria-label': id || ariaLabelledBy ? void 0 : date ? `Selected date: ${(0, external_date_fns_namespaceObject.format)(date, 'PPP')}` : placeholder,
         'aria-labelledby': ariaLabelledBy,
         ...validation.aria,
         disabled: disabled || group.disabled
@@ -68,9 +69,9 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
                         ...triggerProps,
                         className: className,
                         placeholder: placeholder,
-                        children: value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        children: date && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                             className: "truncate",
-                            children: (0, external_date_fns_namespaceObject.format)(value, 'PPP')
+                            children: (0, external_date_fns_namespaceObject.format)(date, 'PPP')
                         })
                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                         asChild: true,
@@ -81,7 +82,7 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
                             className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                             children: [
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
-                                value ? (0, external_date_fns_namespaceObject.format)(value, 'PPP') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                date ? (0, external_date_fns_namespaceObject.format)(date, 'PPP') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                     className: "text-foreground-muted",
                                     children: placeholder
                                 })
@@ -93,7 +94,7 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
                         align: grouped ? 'start' : void 0,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
                             mode: "single",
-                            selected: value,
+                            selected: date,
                             onSelect: onValueChange,
                             initialFocus: true,
                             ...calendarProps

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

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { format } from "date-fns";
+import { format, isValid } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { forwardRef, useId } from "react";
 import { Button } from "./button.js";
@@ -13,6 +13,7 @@ import { useControlValidation, useInputGroup } from "./input-group-context.js";
 const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `date-picker-${generatedId.replace(/:/g, '')}`}-error`;
+    const date = value instanceof Date && isValid(value) ? value : void 0;
     const group = useInputGroup();
     const grouped = group.inGroup;
     const validation = useControlValidation(group, {
@@ -24,7 +25,7 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
     });
     const triggerProps = {
         id,
-        'aria-label': id || ariaLabelledBy ? void 0 : value ? `Selected date: ${format(value, 'PPP')}` : placeholder,
+        'aria-label': id || ariaLabelledBy ? void 0 : date ? `Selected date: ${format(date, 'PPP')}` : placeholder,
         'aria-labelledby': ariaLabelledBy,
         ...validation.aria,
         disabled: disabled || group.disabled
@@ -39,9 +40,9 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
                         ...triggerProps,
                         className: className,
                         placeholder: placeholder,
-                        children: value && /*#__PURE__*/ jsx("span", {
+                        children: date && /*#__PURE__*/ jsx("span", {
                             className: "truncate",
-                            children: format(value, 'PPP')
+                            children: format(date, 'PPP')
                         })
                     }) : /*#__PURE__*/ jsx(PopoverTrigger, {
                         asChild: true,
@@ -52,7 +53,7 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
                             className: cn('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
                             children: [
                                 /*#__PURE__*/ jsx(CalendarIcon, {}),
-                                value ? format(value, 'PPP') : /*#__PURE__*/ jsx("span", {
+                                date ? format(date, 'PPP') : /*#__PURE__*/ jsx("span", {
                                     className: "text-foreground-muted",
                                     children: placeholder
                                 })
@@ -64,7 +65,7 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
                         align: grouped ? 'start' : void 0,
                         children: /*#__PURE__*/ jsx(Calendar, {
                             mode: "single",
-                            selected: value,
+                            selected: date,
                             onSelect: onValueChange,
                             initialFocus: true,
                             ...calendarProps