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

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 })] }));
+        } }));
+};

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

@@ -0,0 +1,16 @@
+export * from './input-field/index.js';
+export * from './select-field/index.js';
+export * from './switch-field/index.js';
+export * from './pagination-limit-field/index.js';
+export * from './combo-box-field/index.js';
+export * from './country-field/index.js';
+export * from './state-field/index.js';
+export * from './date-range-field/index.js';
+export * from './date-picker-field/index.js';
+export * from './date-time-picker-field/index.js';
+export * from './otp-field/index.js';
+export * from './password-field/index.js';
+export * from './file-upload-field/index.js';
+export * from './radio-group-field/index.js';
+export * from './textarea-field/index.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,0BAA0B,CAAA;AACxC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA"}

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

@@ -0,0 +1,15 @@
+export * from './input-field/index.js';
+export * from './select-field/index.js';
+export * from './switch-field/index.js';
+export * from './pagination-limit-field/index.js';
+export * from './combo-box-field/index.js';
+export * from './country-field/index.js';
+export * from './state-field/index.js';
+export * from './date-range-field/index.js';
+export * from './date-picker-field/index.js';
+export * from './date-time-picker-field/index.js';
+export * from './otp-field/index.js';
+export * from './password-field/index.js';
+export * from './file-upload-field/index.js';
+export * from './radio-group-field/index.js';
+export * from './textarea-field/index.js';

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

@@ -0,0 +1,26 @@
+import { HTMLInputTypeAttribute, ReactNode } from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+export type InputFieldProps<T extends FieldValues = FieldValues> = {
+    className?: string;
+    name: string;
+    type?: HTMLInputTypeAttribute;
+    label?: ReactNode;
+    tooltip?: string;
+    labelExtra?: ReactNode;
+    placeholder?: string;
+    description?: ReactNode;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    control: Control<T>;
+    disabled?: boolean;
+    readOnly?: boolean;
+    minHeight?: number;
+    maxHeight?: number;
+    textArea?: boolean;
+    required?: boolean;
+    defaultValue?: string;
+    'data-testid'?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+};
+export declare const InputField: <T extends FieldValues = FieldValues>({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, onChange, ...others }: InputFieldProps<T>) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/input-field/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACjE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CACT,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KACzD,IAAI,CAAA;CACV,CAAA;AACD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,gMAkB7D,eAAe,CAAC,CAAC,CAAC,gCAmDpB,CAAA"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AutosizeTextarea } from '../../../components/ui/autosize-textarea/index.js';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
+import { Input } from '../../../components/ui/input/index.js';
+export const InputField = ({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, onChange, ...others }) => {
+    return (_jsx(FormField, { ...others, name: others.name, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsx(FormControl, { children: textArea ? (_jsx(AutosizeTextarea, { className: className, placeholder: placeholder, readOnly: readOnly, minHeight: minHeight, maxHeight: maxHeight, defaultValue: defaultValue, "data-testid": others['data-testid'], ...field, onChange: (e) => {
+                            field.onChange(e);
+                            onChange?.(e);
+                        } })) : (_jsx(Input, { className: className, type: type, placeholder: placeholder, readOnly: readOnly, startAdornment: startAdornment, endAdornment: endAdornment, "data-testid": others['data-testid'], ...field })) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] })) }));
+};

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+export type OtpFieldProps<T extends FieldValues = FieldValues> = {
+    name: string;
+    label?: ReactNode;
+    tooltip?: string;
+    labelExtra?: ReactNode;
+    description?: ReactNode;
+    control: Control<T>;
+    disabled?: boolean;
+    required?: boolean;
+    maxLength?: number;
+    pattern?: string;
+    separator?: boolean;
+    'data-testid'?: string;
+};
+export declare const OtpField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, maxLength, pattern, separator, ...others }: OtpFieldProps<T>) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/otp-field/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC/D,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,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6FAU3D,aAAa,CAAC,CAAC,CAAC,gCAmElB,CAAA"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '../../../components/ui/otp-input/index.js';
+export const OtpField = ({ name, label, tooltip, labelExtra, description, maxLength = 6, pattern, separator = false, ...others }) => {
+    const midpoint = Math.floor(maxLength / 2);
+    const renderSlots = () => {
+        if (separator && maxLength > 1) {
+            const firstGroup = Array.from({ length: midpoint }, (_, i) => (_jsx(InputOTPSlot, { index: i }, i)));
+            const secondGroup = Array.from({ length: maxLength - midpoint }, (_, i) => _jsx(InputOTPSlot, { index: midpoint + i }, midpoint + i));
+            return (_jsxs(_Fragment, { children: [_jsx(InputOTPGroup, { children: firstGroup }), _jsx(InputOTPSeparator, {}), _jsx(InputOTPGroup, { children: secondGroup })] }));
+        }
+        return (_jsx(InputOTPGroup, { children: Array.from({ length: maxLength }, (_, i) => (_jsx(InputOTPSlot, { index: i }, i))) }));
+    };
+    return (_jsx(FormField, { ...others, name: name, render: ({ field }) => (_jsxs(FormItem, { required: others.required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsx(FormControl, { children: _jsx(InputOTP, { maxLength: maxLength, pattern: pattern, value: field.value ?? '', onChange: field.onChange, onBlur: field.onBlur, ref: field.ref, name: field.name, disabled: others.disabled, "data-testid": others['data-testid'], children: renderSlots() }) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] })) }));
+};

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

@@ -0,0 +1,9 @@
+import { Control, FieldValues } from 'react-hook-form';
+export type PaginationLimitFieldProps<T extends FieldValues = FieldValues> = {
+    label?: string;
+    options?: number[];
+    control: Control<T>;
+    ['data-testid']?: string;
+};
+export declare const PaginationLimitField: <T extends FieldValues = FieldValues>({ options, label, control, ["data-testid"]: dataTestId }: PaginationLimitFieldProps<T>) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/pagination-limit-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAItD,MAAM,MAAM,yBAAyB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,0DAKvE,yBAAyB,CAAC,CAAC,CAAC,gCAe9B,CAAA"}

package/dist/esm/components/form/pagination-limit-field/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectField } from '../select-field/index.js';
+import { SelectItem } from '../../../components/ui/select/index.js';
+export const PaginationLimitField = ({ options = [10, 50, 100], label = 'Items per page', control, ['data-testid']: dataTestId }) => {
+    return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium whitespace-nowrap", children: label }), _jsx(SelectField, { name: "limit", control: control, "data-testid": dataTestId, children: options.map((pageSize) => (_jsx(SelectItem, { value: String(pageSize), children: pageSize }, pageSize))) })] }));
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Control, FieldPath, FieldValues } from 'react-hook-form';
+export type PasswordFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TName;
+    label: string;
+    tooltip?: string;
+    placeholder?: string;
+    control: Control<TFieldValues>;
+    required?: boolean;
+    disabled?: boolean;
+    'data-testid'?: string;
+};
+export declare function PasswordField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, tooltip, placeholder, control, required, disabled, 'data-testid': dataTestId }: PasswordFieldProps<TFieldValues, TName>): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/password-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAajE,MAAM,MAAM,kBAAkB,CAC5B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAC7D;IACF,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,aAAa,CAC3B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,QAAgB,EAChB,QAAgB,EAChB,aAAa,EAAE,UAAU,EAC1B,EAAE,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,qBA0CzC"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
+import { Input, InputAdornment } from '../../../components/ui/input/index.js';
+import { Eye, EyeOff } from 'lucide-react';
+import { IconButton } from '../../../components/ui/icon-button/index.js';
+export function PasswordField({ name, label, tooltip, placeholder, control, required = false, disabled = false, 'data-testid': dataTestId }) {
+    const [show, setShow] = React.useState(false);
+    return (_jsx(FormField, { control: control, name: name, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : undefined, children: label }), _jsx(FormControl, { children: _jsx(Input, { ...field, type: show ? 'text' : 'password', placeholder: placeholder, endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { type: "button", variant: "outline", rounded: true, onClick: () => setShow(!show), children: show ? _jsx(EyeOff, {}) : _jsx(Eye, {}) }) }), disabled: disabled, className: "pr-10", "data-testid": dataTestId }) }), _jsx(FormMessage, {})] })) }));
+}

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

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+import { Control, FieldValues, Path } from 'react-hook-form';
+import { type RenderableLabel } from '../../../components/form/renderable-label.js';
+export type RadioGroupFieldOption = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+};
+type RadioGroupFieldOwnProps<T extends FieldValues = FieldValues> = {
+    control: Control<T>;
+    name: Path<T>;
+    options: RadioGroupFieldOption[];
+    description?: ReactNode;
+    tooltip?: string;
+    required?: boolean;
+    disabled?: boolean;
+};
+/**
+ * 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 radio group.
+ */
+export type RadioGroupFieldProps<T extends FieldValues = FieldValues> = RadioGroupFieldOwnProps<T> & ({
+    label: RenderableLabel;
+    'aria-label'?: string;
+} | {
+    label?: never;
+    'aria-label': string;
+});
+export declare const RadioGroupField: <T extends FieldValues = FieldValues>({ control, name, options, label, description, tooltip, required, disabled, "aria-label": ariaLabelProp }: RadioGroupFieldProps<T>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map