@lerianstudio/sindarian-ui 1.2.0 → 1.3.0-beta.2

package/dist/esm/components/dialog/confirmation-dialog/use-confirm-dialog.js

@@ -0,0 +1,49 @@
+import React from 'react';
+/**
+ * A custom hook that manages the state and behavior of a confirmation dialog.
+ *
+ * @template TData - The type of the data associated with the dialog.
+ *
+ * @param {UseConfirmDialog} param0 - An object containing the onConfirm callback.
+ * @param {Function} [param0.onConfirm] - A callback function that is called when the dialog is confirmed.
+ *
+ * @returns {Object} An object containing the dialog state and handlers.
+ * @returns {string} id - The current id associated with the dialog.
+ * @returns {TData | null} data - The current data associated with the dialog.
+ * @returns {Function} handleDialogOpen - A function to open the dialog with a specific id and optional data.
+ * @returns {Object} dialogProps - An object containing the dialog properties and handlers.
+ */
+export function useConfirmDialog({ onConfirm: onConfirmProp }) {
+    const [id, setId] = React.useState('');
+    const [data, setData] = React.useState(null);
+    const [open, setOpen] = React.useState(false);
+    const onOpenChange = (open) => setOpen(open);
+    const handleDialogOpen = (id, data) => {
+        setId(id);
+        setData(data);
+        setOpen(true);
+    };
+    const handleDialogClose = () => setOpen(false);
+    const onCancel = () => {
+        setId('');
+        setData(null);
+        setOpen(false);
+    };
+    const onConfirm = () => {
+        setId('');
+        setData(null);
+        onConfirmProp?.(id);
+    };
+    return {
+        id,
+        data,
+        handleDialogClose,
+        handleDialogOpen,
+        dialogProps: {
+            open,
+            onOpenChange,
+            onCancel,
+            onConfirm
+        }
+    };
+}

package/dist/esm/components/dialog/index.d.ts

@@ -0,0 +1,4 @@
+export * from './confirmation-dialog/index.js';
+export * from './confirmation-dialog/use-confirm-dialog.js';
+export * from './large-dialog/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/index.tsx"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,0CAA0C,CAAA;AACxD,cAAc,gBAAgB,CAAA"}

package/dist/esm/components/dialog/index.js

@@ -0,0 +1,3 @@
+export * from './confirmation-dialog/index.js';
+export * from './confirmation-dialog/use-confirm-dialog.js';
+export * from './large-dialog/index.js';

package/dist/esm/components/dialog/large-dialog/index.d.ts

@@ -0,0 +1,11 @@
+import { DialogContentProps } from '@radix-ui/react-dialog';
+declare function OnboardDialogContent({ className, ...props }: DialogContentProps): import("react").JSX.Element;
+declare function OnboardDialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+export type OnboardDialogTitleProps = React.ComponentProps<'div'> & {
+    upperTitle: string;
+    title: string;
+};
+declare function OnboardDialogTitle({ upperTitle, title, className, ...props }: OnboardDialogTitleProps): import("react").JSX.Element;
+declare function OnboardDialogIcon({ className, children, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+export { OnboardDialogContent, OnboardDialogHeader, OnboardDialogTitle, OnboardDialogIcon };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/dialog/large-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dialog/large-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAYxE;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B;AAED,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAClE,UAAU,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,iBAAS,kBAAkB,CAAC,EAC1B,UAAU,EACV,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,+BAezB;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAU7B;AAED,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EAClB,CAAA"}

package/dist/esm/components/dialog/large-dialog/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils.js';
+import { DialogContent, DialogTitle } from '../../../components/ui/dialog/index.js';
+function OnboardDialogContent({ className, ...props }) {
+    return (_jsx(DialogContent, { "data-slot": "onboard-dialog-content", showCloseButton: false, className: cn('[data-radix-dialog-close] w-full max-w-[640px] p-12 sm:min-w-[640px]', className), ...props }));
+}
+function OnboardDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "onboard-dialog-header", className: cn('flex flex-row justify-between', className), ...props }));
+}
+function OnboardDialogTitle({ upperTitle, title, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "onboard-dialog-title", className: cn('flex flex-col gap-8', className), ...props, children: [_jsx("p", { className: "text-muted-foreground text-base font-medium", children: upperTitle }), _jsx(DialogTitle, { className: "text-muted-foreground text-4xl font-bold", children: title })] }));
+}
+function OnboardDialogIcon({ className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "onboard-dialog-icon", className: cn('flex items-center px-12', className), ...props, children: _jsx("div", { className: "shrink-0", children: children }) }));
+}
+export { OnboardDialogContent, OnboardDialogHeader, OnboardDialogTitle, OnboardDialogIcon };

package/dist/esm/components/entity-box/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
+declare function EntityBox({ className, children, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function EntityBoxCollapsible({ className, ...props }: CollapsibleProps): React.JSX.Element;
+declare function EntityBoxCollapsibleTrigger(props: CollapsibleTriggerProps): React.JSX.Element;
+declare function EntityBoxCollapsibleContent({ children, ...props }: CollapsibleContentProps): React.JSX.Element;
+interface EntityBoxHeaderProps extends React.ComponentProps<'div'> {
+    title: string;
+    subtitle?: string;
+    tooltip?: string;
+    tooltipWidth?: string | number;
+}
+declare function EntityBoxHeaderTitle({ title, subtitle, tooltip, tooltipWidth, className, ...props }: EntityBoxHeaderProps): React.JSX.Element;
+declare function EntityBoxBanner({ className, children, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function EntityBoxActions({ className, children, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { EntityBox, EntityBoxCollapsible, EntityBoxCollapsibleTrigger, EntityBoxCollapsibleContent, EntityBoxHeaderTitle, EntityBoxBanner, EntityBoxActions };
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/entity-box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/entity-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,6BAA6B,CAAA;AAIpC,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAUtE;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,uBAAuB,qBAQlE;AAED,iBAAS,2BAA2B,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAOzB;AAED,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC/B;AAED,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAgCtB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAU7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAED,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EACjB,CAAA"}

package/dist/esm/components/entity-box/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip/index.js';
+import { CircleHelp, Settings2 } from 'lucide-react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/collapsible/index.js';
+import { Button } from '../ui/button/index.js';
+import { Separator } from '../ui/separator/index.js';
+function EntityBox({ className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "entity-box", className: cn('shadow-entity-box bg-card mb-2 flex items-center justify-between rounded-lg p-6', className), ...props, children: children }));
+}
+function EntityBoxCollapsible({ className, ...props }) {
+    return (_jsx(Collapsible, { className: cn('shadow-entity-box bg-card mb-2 flex flex-col rounded-lg', className), ...props }));
+}
+function EntityBoxCollapsibleTrigger(props) {
+    return (_jsx(CollapsibleTrigger, { ...props, asChild: true, children: _jsx(Button, { variant: "secondary", className: "h-[34px] w-[34px] p-2", children: _jsx(Settings2, { size: 16 }) }) }));
+}
+function EntityBoxCollapsibleContent({ children, ...props }) {
+    return (_jsxs(CollapsibleContent, { ...props, children: [_jsx(Separator, { orientation: "horizontal" }), _jsx("div", { className: "grid w-full grid-cols-3 p-6", children: children })] }));
+}
+function EntityBoxHeaderTitle({ title, subtitle, tooltip, tooltipWidth, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "entity-box-header", className: cn('flex flex-col items-start', className), ...props, children: [_jsxs("div", { className: "flex items-center gap-[10px]", children: [_jsx("h1", { className: "text-muted-foreground text-lg font-medium", children: title }), tooltip && (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(CircleHelp, { className: "pointer text-shadcn-400 h-5 w-5" }) }), _jsx(TooltipContent, { side: "right", style: tooltipWidth
+                                        ? { width: tooltipWidth, maxWidth: tooltipWidth }
+                                        : undefined, children: tooltip })] }) }))] }), subtitle && _jsx("p", { className: "text-shadcn-400 text-sm", children: subtitle })] }));
+}
+function EntityBoxBanner({ className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "entity-box-banner", className: cn('grid grid-cols-3 p-6', className), ...props, children: children }));
+}
+function EntityBoxActions({ className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "entity-box-actions", className: cn('col-start-3 flex flex-row items-center justify-end gap-4', className), ...props, children: children }));
+}
+export { EntityBox, EntityBoxCollapsible, EntityBoxCollapsibleTrigger, EntityBoxCollapsibleContent, EntityBoxHeaderTitle, EntityBoxBanner, EntityBoxActions };

package/dist/esm/components/entity-data-table/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Paper } from '../ui/paper/index.js';
+declare function EntityDataTableRoot({ className, ...props }: React.ComponentProps<typeof Paper>): React.JSX.Element;
+declare function EntityDataTableFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function EntityDataTableFooterText({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+export type EntityDataTableFooterLabelProps = React.PropsWithChildren & {
+    label: React.ReactNode;
+    empty?: boolean;
+    emptyLabel?: React.ReactNode;
+};
+export declare const EntityDataTable: {
+    Root: typeof EntityDataTableRoot;
+    Footer: typeof EntityDataTableFooter;
+    FooterText: typeof EntityDataTableFooterText;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/entity-data-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/entity-data-table/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,qBAEpC;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,iBAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ3B;AAED,MAAM,MAAM,+BAA+B,GAAG,KAAK,CAAC,iBAAiB,GAAG;IACtE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,eAAe;;;;CAI3B,CAAA"}

package/dist/esm/components/entity-data-table/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { Paper } from '../ui/paper/index.js';
+function EntityDataTableRoot({ className, ...props }) {
+    return _jsx(Paper, { className: className, ...props });
+}
+function EntityDataTableFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "data-table-footer", className: cn('flex flex-row items-center justify-between px-6 py-3', className), ...props }));
+}
+function EntityDataTableFooterText({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "data-table-footer-text", className: cn('text-shadcn-400 text-sm leading-8 italic', className), ...props }));
+}
+export const EntityDataTable = {
+    Root: EntityDataTableRoot,
+    Footer: EntityDataTableFooter,
+    FooterText: EntityDataTableFooterText
+};

package/dist/esm/components/form/combo-box-field/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+export type ComboBoxFieldProps<T extends FieldValues = FieldValues> = React.PropsWithChildren & {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    emptyMessage?: string;
+    control: Control<T>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+};
+export declare const ComboBoxField: <T extends FieldValues = FieldValues>({ name, label, placeholder, emptyMessage, required, children, readOnly, ...others }: ComboBoxFieldProps<T>) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/combo-box-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/combo-box-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAiB5D,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAChE,KAAK,CAAC,iBAAiB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,qFAShE,kBAAkB,CAAC,CAAC,CAAC,sBA0FvB,CAAA"}

package/dist/esm/components/form/combo-box-field/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { FormField, FormItem, FormLabel, FormMessage } from '../../../components/ui/form.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover/index.js';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandList } from '../../../components/ui/command/index.js';
+import { Button } from '../../../components/ui/button/index.js';
+import { cn } from '../../../lib/utils.js';
+import { ChevronsUpDown } from 'lucide-react';
+export const ComboBoxField = ({ name, label, placeholder, emptyMessage, required, children, readOnly, ...others }) => {
+    const [open, setOpen] = React.useState(false);
+    // with the value and label
+    const options = React.useMemo(() => React.Children.map(React.Children.toArray(children), (child) => React.isValidElement(child) && {
+        value: child.props.value,
+        label: child.props.children
+    }), [children]);
+    const getDisplayValue = React.useCallback((value) => {
+        return options.find((option) => option.value === value)?.label ?? null;
+    }, [options]);
+    return (_jsx(FormField, { name: name, ...others, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [label && _jsx(FormLabel, { children: label }), _jsxs(Popover, { open: readOnly ? false : open, onOpenChange: readOnly ? () => { } : setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": readOnly ? false : open, readOnly: readOnly, tabIndex: 0, className: cn('border-input-border bg-input hover:bg-input text-foreground h-10 w-full justify-between rounded-md border px-4 py-2 pl-6 text-left text-base font-normal focus:ring-2 focus:ring-offset-0 focus:outline-none', !field.value && 'text-muted-foreground'), children: [getDisplayValue(field.value) ?? placeholder, !readOnly && (_jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }))] }) }), _jsx(PopoverContent, { className: "w-(--radix-popover-trigger-width) p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: placeholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), _jsx(CommandGroup, { children: React.Children.map(React.Children.toArray(children), (child) => React.isValidElement(child)
+                                                    ? React.cloneElement(child, {
+                                                        keywords: [child.props.children],
+                                                        onSelect: (value) => {
+                                                            field.onChange(field.value !== value ? value : '');
+                                                            setOpen(false);
+                                                        }
+                                                    })
+                                                    : child) })] })] }) })] }), _jsx(FormMessage, {})] })) }));
+};

package/dist/esm/components/form/country-field/index.d.ts

@@ -0,0 +1,5 @@
+import { FieldValues } from 'react-hook-form';
+import { ComboBoxFieldProps } from '../combo-box-field/index.js';
+export type CountryFieldProps<T extends FieldValues = FieldValues> = Omit<ComboBoxFieldProps<T>, 'children'>;
+export declare const CountryField: <T extends FieldValues = FieldValues>({ ...others }: CountryFieldProps<T>) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/country-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/country-field/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC7C,OAAO,EAAiB,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAGtE,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI,IAAI,CACvE,kBAAkB,CAAC,CAAC,CAAC,EACrB,UAAU,CACX,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,eAE/D,iBAAiB,CAAC,CAAC,CAAC,gCAUtB,CAAA"}

package/dist/esm/components/form/country-field/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CommandItem } from '../../../components/ui/command/index.js';
+import { ComboBoxField } from '../combo-box-field/index.js';
+import { getCountries } from '../../../utils/country-utils.js';
+export const CountryField = ({ ...others }) => {
+    return (_jsx(ComboBoxField, { ...others, children: getCountries().map((country) => (_jsx(CommandItem, { value: country.code, children: country.name }, country.code))) }));
+};

package/dist/esm/components/form/date-picker-field/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
+    name: string;
+    label?: ReactNode;
+    tooltip?: string;
+    labelExtra?: ReactNode;
+    description?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    control: Control<T>;
+    required?: boolean;
+    dateFormat?: string;
+    align?: 'start' | 'center' | 'end';
+    'data-testid'?: string;
+    valueAsString?: boolean;
+};
+export declare const DatePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, valueAsString, ...others }: DatePickerFieldProps<T>) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/date-picker-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-picker-field/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACtE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,oJAelE,oBAAoB,CAAC,CAAC,CAAC,sBA4FzB,CAAA"}

package/dist/esm/components/form/date-picker-field/index.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button/index.js';
+import { Calendar } from '../../../components/ui/calendar/index.js';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover/index.js';
+import { cn } from '../../../lib/utils.js';
+import dayjs from 'dayjs';
+import { CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+export const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY', align = 'start', valueAsString, ...others }) => {
+    const [open, setOpen] = React.useState(false);
+    return (_jsx(FormField, { name: name, control: control, render: ({ field }) => {
+            const convertFieldValueToDate = (fieldValue) => {
+                if (!fieldValue)
+                    return undefined;
+                if (valueAsString) {
+                    const parsed = dayjs(fieldValue);
+                    return parsed.isValid() ? parsed.toDate() : undefined;
+                }
+                return fieldValue;
+            };
+            const convertDateToOutputFormat = (date) => {
+                if (!date)
+                    return undefined;
+                if (valueAsString) {
+                    const parsed = dayjs(date);
+                    return parsed.isValid() ? parsed.format('YYYY-MM-DD') : undefined;
+                }
+                return date;
+            };
+            const value = convertFieldValueToDate(field.value);
+            const handleSelect = (date) => {
+                field.onChange(convertDateToOutputFormat(date));
+            };
+            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: dayjs(value).format(dateFormat) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "single", defaultMonth: value, selected: value, onSelect: handleSelect, disabled: disabled || readOnly }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+        } }));
+};

package/dist/esm/components/form/date-range-field/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
+    name: string;
+    label?: ReactNode;
+    tooltip?: string;
+    labelExtra?: ReactNode;
+    description?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    control: Control<T>;
+    required?: boolean;
+    numberOfMonths?: number;
+    dateFormat?: string;
+    align?: 'start' | 'center' | 'end';
+    'data-testid'?: string;
+};
+export declare const DateRangeField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, ...others }: DateRangeFieldProps<T>) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/date-range-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-range-field/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACrE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,qJAejE,mBAAmB,CAAC,CAAC,CAAC,sBA0ExB,CAAA"}

package/dist/esm/components/form/date-range-field/index.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button/index.js';
+import { Calendar } from '../../../components/ui/calendar/index.js';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover/index.js';
+import { cn } from '../../../lib/utils.js';
+import dayjs from 'dayjs';
+import { CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+export const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths = 2, dateFormat = 'MMM DD, YYYY', align = 'start', ...others }) => {
+    const [open, setOpen] = React.useState(false);
+    return (_jsx(FormField, { name: name, control: control, render: ({ field }) => {
+            const value = field.value;
+            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value?.from ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? (_jsxs(_Fragment, { children: [dayjs(value.from).format(dateFormat), " -", ' ', dayjs(value.to).format(dateFormat)] })) : (dayjs(value.from).format(dateFormat)) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+        } }));
+};

package/dist/esm/components/form/date-time-picker-field/index.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+export type DateTimePickerFieldProps<T extends FieldValues = FieldValues> = {
+    name: string;
+    label?: ReactNode;
+    tooltip?: string;
+    labelExtra?: ReactNode;
+    description?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    control: Control<T>;
+    required?: boolean;
+    dateFormat?: string;
+    align?: 'start' | 'center' | 'end';
+    'data-testid'?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    defaultTime?: string;
+};
+export declare const DateTimePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, minDate, maxDate, defaultTime, ...others }: DateTimePickerFieldProps<T>) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/date-time-picker-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/date-time-picker-field/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC1E,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,oKAiBtE,wBAAwB,CAAC,CAAC,CAAC,sBAgK7B,CAAA"}

package/dist/esm/components/form/date-time-picker-field/index.js

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button/index.js';
+import { Calendar } from '../../../components/ui/calendar/index.js';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../../components/ui/popover/index.js';
+import { TimePicker } from '../../../components/ui/time-picker/index.js';
+import { cn } from '../../../lib/utils.js';
+import dayjs from 'dayjs';
+import { CalendarIcon, XIcon } from 'lucide-react';
+import * as React from 'react';
+export const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, placeholder = 'Select date and time...', disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY HH:mm', align = 'start', minDate, maxDate, defaultTime = '00:00', ...others }) => {
+    const [open, setOpen] = React.useState(false);
+    const parseDefaultTime = (time) => {
+        const [h, m] = time.split(':').map(Number);
+        return {
+            hour: Number.isFinite(h) && h >= 0 && h <= 23 ? h : 0,
+            minute: Number.isFinite(m) && m >= 0 && m <= 59 ? m : 0
+        };
+    };
+    return (_jsx(FormField, { name: name, control: control, render: ({ field }) => {
+            const current = field.value ? dayjs(field.value) : null;
+            const isValid = current?.isValid() ?? false;
+            const validCurrent = isValid ? current : null;
+            const handleDateSelect = (date) => {
+                if (!date)
+                    return;
+                const time = validCurrent
+                    ? { hour: validCurrent.hour(), minute: validCurrent.minute() }
+                    : parseDefaultTime(defaultTime);
+                const combined = dayjs(date)
+                    .hour(time.hour)
+                    .minute(time.minute)
+                    .second(0)
+                    .millisecond(0);
+                field.onChange(combined.toISOString());
+            };
+            const handleTimeChange = (time) => {
+                if (!validCurrent)
+                    return;
+                const updated = validCurrent
+                    .hour(time.hour)
+                    .minute(time.minute)
+                    .second(0)
+                    .millisecond(0);
+                field.onChange(updated.toISOString());
+            };
+            const handleClear = (e) => {
+                e.stopPropagation();
+                field.onChange('');
+                setOpen(false);
+            };
+            const showClear = !!field.value && !readOnly && !disabled;
+            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs("div", { className: "relative w-full", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', showClear && 'pr-8', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: _jsx("span", { className: cn('text-foreground flex-1 text-left', validCurrent && 'font-bold'), children: validCurrent
+                                                        ? validCurrent.format(dateFormat)
+                                                        : placeholder }) }) }) }), showClear && (_jsx("span", { role: "button", tabIndex: 0, "aria-label": "Clear date and time", className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-1/2 right-2 z-10 inline-flex shrink-0 -translate-y-1/2 rounded-sm outline-none focus-visible:ring-2", onClick: handleClear, onKeyDown: (e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault();
+                                                handleClear(e);
+                                            }
+                                        }, children: _jsx(XIcon, { className: "size-4" }) }))] }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-stretch", children: [_jsx(Calendar, { mode: "single", defaultMonth: validCurrent ? validCurrent.toDate() : undefined, selected: validCurrent ? validCurrent.toDate() : undefined, onSelect: handleDateSelect, disabled: (date) => {
+                                                if (disabled || readOnly)
+                                                    return true;
+                                                if (minDate &&
+                                                    date < dayjs(minDate).startOf('day').toDate())
+                                                    return true;
+                                                if (maxDate &&
+                                                    date > dayjs(maxDate).endOf('day').toDate())
+                                                    return true;
+                                                return false;
+                                            } }), _jsx("div", { className: "bg-border hidden w-px self-stretch sm:block" }), _jsx("div", { className: "border-border border-t sm:hidden" }), _jsx(TimePicker, { hour: validCurrent ? validCurrent.hour() : undefined, minute: validCurrent ? validCurrent.minute() : undefined, onChange: handleTimeChange, disabled: disabled || readOnly || !validCurrent })] }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+        } }));
+};

package/dist/esm/components/form/file-upload-field/index.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { Control, FieldPathByValue, FieldValues } from 'react-hook-form';
+import { type FileUploadResult } from '../../../components/ui/file-upload/index.js';
+import { type RenderableLabel } from '../../../components/form/renderable-label.js';
+type FileUploadFieldOwnProps<T extends FieldValues = FieldValues> = {
+    control: Control<T>;
+    /**
+     * Must point at a string-valued field: the adapter writes the file's text, or
+     * `''` when cleared, never a File and never null. `string | undefined` also
+     * matches plain `string` fields, so optional ones are covered by the same type.
+     */
+    name: FieldPathByValue<T, string | undefined>;
+    description?: ReactNode;
+    tooltip?: string;
+    required?: boolean;
+    accept?: string;
+    maxSizeBytes?: number;
+    disabled?: boolean;
+    className?: string;
+    /** Optional escape hatch to also observe the picked File/clear alongside the form's text value. */
+    onSelect?: (result: FileUploadResult | null) => void;
+};
+/**
+ * A control with no accessible name is invisible to screen readers, so the type
+ * makes one mandatory: either a visible `label`, or an `aria-label` when the
+ * design calls for a bare file picker.
+ */
+export type FileUploadFieldProps<T extends FieldValues = FieldValues> = FileUploadFieldOwnProps<T> & ({
+    label: RenderableLabel;
+    'aria-label'?: string;
+} | {
+    label?: never;
+    'aria-label': string;
+});
+/**
+ * FileUploadField — the react-hook-form field for FileUpload.
+ *
+ * The field VALUE is the file's UTF-8 TEXT string (so a Zod `z.string()` PEM
+ * schema validates directly), `''` when cleared — never the File, never null —
+ * so `z.string().min(1)` fires the required error with zero adapter code. The
+ * File metadata for the visible chip lives in field-LOCAL state, since the form
+ * only holds the text. The shown chip is DERIVED from the form field value, so
+ * an external `form.reset()` / `setValue(name, '')` that clears the text also
+ * clears the chip — local state can never linger out of sync with the form. A
+ * rejected pick (size/type/read) clears the form value so it can't pass
+ * validation, while the primitive's own inline `role="alert"` announces the
+ * rejection; on resolver failure the FormMessage announces. Both surfaces are
+ * wired.
+ */
+export declare const FileUploadField: <T extends FieldValues = FieldValues>({ control, name, label, description, tooltip, required, accept, maxSizeBytes, disabled, className, onSelect, "aria-label": ariaLabelProp }: FileUploadFieldProps<T>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/form/file-upload-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/file-upload-field/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAWxE,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAC/E,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,oCAAoC,CAAA;AAE3C,KAAK,uBAAuB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAClE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB;;;;OAIG;IACH,IAAI,EAAE,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IAC7C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAA;CACrD,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAClE,uBAAuB,CAAC,CAAC,CAAC,GACxB,CACI;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAC1C,CAAA;AAEL;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,4IAalE,oBAAoB,CAAC,CAAC,CAAC,gCA8EzB,CAAA"}

package/dist/esm/components/form/file-upload-field/index.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
+import { FileUpload } from '../../../components/ui/file-upload/index.js';
+import { hasRenderableLabel } from '../../../components/form/renderable-label.js';
+/**
+ * FileUploadField — the react-hook-form field for FileUpload.
+ *
+ * The field VALUE is the file's UTF-8 TEXT string (so a Zod `z.string()` PEM
+ * schema validates directly), `''` when cleared — never the File, never null —
+ * so `z.string().min(1)` fires the required error with zero adapter code. The
+ * File metadata for the visible chip lives in field-LOCAL state, since the form
+ * only holds the text. The shown chip is DERIVED from the form field value, so
+ * an external `form.reset()` / `setValue(name, '')` that clears the text also
+ * clears the chip — local state can never linger out of sync with the form. A
+ * rejected pick (size/type/read) clears the form value so it can't pass
+ * validation, while the primitive's own inline `role="alert"` announces the
+ * rejection; on resolver failure the FormMessage announces. Both surfaces are
+ * wired.
+ */
+export const FileUploadField = ({ control, name, label, description, tooltip, required, accept, maxSizeBytes, disabled, className, onSelect, 'aria-label': ariaLabelProp }) => {
+    const [localValue, setLocalValue] = useState(null);
+    const showLabel = hasRenderableLabel(label);
+    // An empty or whitespace-only aria-label is worse than none: it names the
+    // control "". Drop it so the attribute never reaches the DOM.
+    const ariaLabel = ariaLabelProp?.trim() ? ariaLabelProp : undefined;
+    // The type cannot rule out `label=""`, so this is the only signal a developer
+    // gets that the control shipped nameless.
+    if (process.env.NODE_ENV !== 'production' && !showLabel && !ariaLabel) {
+        console.error(`FileUploadField "${name}" has no accessible name: pass a non-empty label or aria-label.`);
+    }
+    return (_jsx(FormField, { control: control, name: name, render: ({ field }) => {
+            // The chip follows the LOCAL selection, reconciled against the form
+            // value — not the form value's truthiness.
+            //
+            // Truthiness cannot tell "no file" from "an accepted EMPTY file": both
+            // store ''. So picking a legitimately empty file hid the chip, the zone
+            // went back to "Choose a file or drag and drop" even though the pick was
+            // accepted, and a `z.string().min(1)` rule then failed the field with
+            // nothing on screen to explain why.
+            //
+            // Comparing against the text we last wrote keeps the external-reset
+            // behaviour that truthiness was there for: after form.reset() or
+            // setValue(name, ''), the stored text no longer matches the selection, so
+            // the stale File metadata still cannot linger.
+            //
+            // ponytail: one residual case is irreducible from the form value alone —
+            // resetting AFTER picking an empty file leaves the chip up, because ''
+            // (reset) and '' (that file's text) are the same string and the form
+            // value carries nothing else to tell them apart. Fix needs a reset epoch
+            // from react-hook-form, or a form value richer than the file text.
+            const shown = localValue && field.value === localValue.text ? localValue : null;
+            return (_jsxs(FormItem, { required: required, children: [showLabel && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : undefined, children: label })), _jsx(FormControl, { children: _jsx(FileUpload, { ref: field.ref, name: field.name, onBlur: field.onBlur, "aria-label": ariaLabel, accept: accept, maxSizeBytes: maxSizeBytes, disabled: disabled, className: className, value: shown, onSelect: (result) => {
+                                setLocalValue(result);
+                                field.onChange(result?.text ?? '');
+                                onSelect?.(result);
+                            }, onError: () => field.onChange('') }) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+        } }));
+};