@lerianstudio/sindarian-ui 2.0.0-beta.25 → 2.0.0-beta.26

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

@@ -1,74 +1 @@
-'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';
-import { enUS } from 'react-day-picker/locale';
-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', locale = enUS, 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-input-border 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, locale: locale, 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 })] }));
-        } }));
-};
+"use client";import{jsx as r,jsxs as m}from"react/jsx-runtime";import{Button as O}from"../../../components/ui/button/index.js";import{Calendar as H}from"../../../components/ui/calendar/index.js";import{FormControl as V,FormDescription as _,FormField as q,FormItem as B,FormLabel as E,FormMessage as K,FormTooltip as L}from"../../../components/ui/form.js";import{Popover as R,PopoverContent as U,PopoverTrigger as X}from"../../../components/ui/popover/index.js";import{TimePicker as A}from"../../../components/ui/time-picker/index.js";import{cn as C}from"../../../lib/utils.js";import u from"dayjs";import{CalendarIcon as G,XIcon as J}from"lucide-react";import*as Q from"react";import{enUS as W}from"react-day-picker/locale";export const DateTimePickerField=({name:N,label:d,tooltip:c,labelExtra:F,description:f,placeholder:D="Select date and time...",disabled:s,readOnly:a,control:S,required:k,dateFormat:w="MMM DD, YYYY HH:mm",align:j="start",locale:I=W,minDate:h,maxDate:p,defaultTime:P="00:00",...T})=>{const[g,b]=Q.useState(false);const y=t=>{const[o,i]=t.split(":").map(Number);return{hour:Number.isFinite(o)&&o>=0&&o<=23?o:0,minute:Number.isFinite(i)&&i>=0&&i<=59?i:0}};return r(q,{name:N,control:S,render:({field:t})=>{const o=t.value?u(t.value):null;const i=o?.isValid()??false;const e=i?o:null;const M=n=>{if(!n)return;const l=e?{hour:e.hour(),minute:e.minute()}:y(P);const z=u(n).hour(l.hour).minute(l.minute).second(0).millisecond(0);t.onChange(z.toISOString())};const Y=n=>{if(!e)return;const l=e.hour(n.hour).minute(n.minute).second(0).millisecond(0);t.onChange(l.toISOString())};const v=n=>{n.stopPropagation();t.onChange("");b(false)};const x=!!t.value&&!a&&!s;return m(B,{required:k,children:[d&&r(E,{extra:c?r(L,{children:c}):F,children:d}),m(R,{open:g,onOpenChange:b,children:[m("div",{className:"relative w-full",children:[r(X,{asChild:true,children:r(V,{children:r(O,{variant:"outline",disabled:s,className:C("bg-input hover:bg-input border-input-border text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal",a&&"pointer-events-none",x&&"pr-8",g&&"ring-ring ring-2 ring-offset-0"),"data-testid":T["data-testid"],icon:r(G,{className:"size-4"}),children:r("span",{className:C("text-foreground flex-1 text-left",e&&"font-bold"),children:e?e.format(w):D})})})}),x&&r("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:v,onKeyDown:n=>{if(n.key==="Enter"||n.key===" "){n.preventDefault();v(n)}},children:r(J,{className:"size-4"})})]}),r(U,{className:"w-auto p-0",align:j,children:m("div",{className:"flex flex-col sm:flex-row sm:items-stretch",children:[r(H,{mode:"single",defaultMonth:e?e.toDate():void 0,selected:e?e.toDate():void 0,onSelect:M,locale:I,disabled:n=>{if(s||a)return true;if(h&&n<u(h).startOf("day").toDate())return true;if(p&&n>u(p).endOf("day").toDate())return true;return false}}),r("div",{className:"bg-border hidden w-px self-stretch sm:block"}),r("div",{className:"border-border border-t sm:hidden"}),r(A,{hour:e?e.hour():void 0,minute:e?e.minute():void 0,onChange:Y,disabled:s||a||!e})]})})]}),r(K,{}),f&&r(_,{children:f})]})}})};

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

@@ -1,65 +1 @@
-'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, labels, onError, 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, labels: labels, accept: accept, maxSizeBytes: maxSizeBytes, disabled: disabled, className: className, value: shown, onSelect: (result) => {
-                                setLocalValue(result);
-                                field.onChange(result?.text ?? '');
-                                onSelect?.(result);
-                            }, onError: (error) => {
-                                setLocalValue(null);
-                                field.onChange('');
-                                onSelect?.(null);
-                                onError?.(error);
-                            } }) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
-        } }));
-};
+"use client";import{jsx as e,jsxs as v}from"react/jsx-runtime";import{useState as B}from"react";import{FormControl as C,FormDescription as E,FormField as N,FormItem as U,FormLabel as V,FormMessage as _,FormTooltip as w}from"../../../components/ui/form.js";import{FileUpload as y}from"../../../components/ui/file-upload/index.js";import{hasRenderableLabel as D}from"../../../components/form/renderable-label.js";export const FileUploadField=({control:p,name:l,label:n,description:s,tooltip:t,required:F,accept:h,maxSizeBytes:b,disabled:x,className:f,labels:j,onError:L,onSelect:m,"aria-label":i})=>{const[a,c]=B(null);const u=D(n);const d=i?.trim()?i:void 0;if(process.env.NODE_ENV!=="production"&&!u&&!d){console.error(`FileUploadField "${l}" has no accessible name: pass a non-empty label or aria-label.`)}return e(N,{control:p,name:l,render:({field:r})=>{const g=a&&r.value===a.text?a:null;return v(U,{required:F,children:[u&&e(V,{extra:t?e(w,{children:t}):void 0,children:n}),e(C,{children:e(y,{ref:r.ref,name:r.name,onBlur:r.onBlur,"aria-label":d,labels:j,accept:h,maxSizeBytes:b,disabled:x,className:f,value:g,onSelect:o=>{c(o);r.onChange(o?.text??"");m?.(o)},onError:o=>{c(null);r.onChange("");m?.(null);L?.(o)}})}),e(_,{}),s&&e(E,{children:s})]})}})};

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

@@ -1,15 +1 @@
-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';
+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.js

@@ -1,92 +1 @@
-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';
-import { useMemo, useRef } from 'react';
-/**
- * Fan one node out to several refs. React hands a node to ONE ref, so a
- * consumer ref and react-hook-form's `field.ref` cannot both be passed
- * directly — one silently wins. Only used when the consumer actually supplied
- * a ref, so a field without one keeps `field.ref`'s own identity and React
- * never re-attaches it.
- */
-function fanOutRef(...refs) {
-    return (node) => {
-        const cleanups = [];
-        for (const ref of refs) {
-            if (typeof ref === 'function') {
-                const cleanup = ref(node);
-                cleanups.push(typeof cleanup === 'function' ? cleanup : () => ref(null));
-            }
-            else if (ref) {
-                ;
-                ref.current = node;
-                cleanups.push(() => {
-                    ;
-                    ref.current = null;
-                });
-            }
-        }
-        return () => cleanups.forEach((cleanup) => cleanup());
-    };
-}
-export const InputField = ({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, value, onChange, min, max, step, maxLength, autoComplete, inputMode, pattern, autoFocus, ref, 'aria-invalid': ariaInvalid, ...others }) => {
-    // OR with the form's error, expressed through the Slot merge rather than by
-    // reading the form: FormControl already injects `aria-invalid={!!error}`, and
-    // a child prop only wins that merge when the KEY is present. So emit the key
-    // only for an explicit `true`, and let FormControl answer for every other
-    // case. `true || error` is true; `false || error` is whatever the form says,
-    // which is the whole point — an explicit `false` cannot mute a live error.
-    // With no `control` there is no error to OR against, so FormControl injects
-    // `false` and today's behaviour is unchanged.
-    const ariaInvalidProp = ariaInvalid ? { 'aria-invalid': true } : undefined;
-    const formRef = useRef(undefined);
-    const composedRef = useMemo(() => ref ? fanOutRef((node) => formRef.current?.(node), ref) : ref, 
-    // `others.name` belongs here, and leaving it out is not a lint nit.
-    // react-hook-form hands a fresh `field.ref` for every name, and that ref
-    // only receives the element when React reattaches, which it does only when
-    // this callback's identity changes. Memoised on `ref` alone, one identity
-    // survived a name change, the new field never got its element, and
-    // `form.setFocus(newName)` then found nothing to focus and said nothing.
-    [ref, others.name]);
-    const renderItem = (binding) => (_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, maxLength: maxLength, autoComplete: autoComplete, inputMode: inputMode, autoFocus: autoFocus, "data-testid": others['data-testid'], ...ariaInvalidProp, ...binding })) : (_jsx(Input, { className: className, type: type, placeholder: placeholder, readOnly: readOnly, startAdornment: startAdornment, endAdornment: endAdornment, 
-                    // Bounds belong to the single-line control only: `min`/`max`/`step`
-                    // mean nothing on a textarea and would render as invalid markup.
-                    min: min, max: max, step: step, maxLength: maxLength, autoComplete: autoComplete, inputMode: inputMode, 
-                    // Single-line only: `<textarea pattern>` is not a thing.
-                    pattern: pattern, autoFocus: autoFocus, "data-testid": others['data-testid'], ...ariaInvalidProp, ...binding })) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
-    if (!others.control) {
-        return renderItem({
-            name: others.name,
-            disabled: others.disabled,
-            // Controlled when the caller holds the value, uncontrolled when it only
-            // seeds one — supplying both is what React warns about.
-            ...(value !== undefined ? { value } : { defaultValue }),
-            onChange: (e) => onChange?.(e),
-            // Nothing else claims the node on this branch, so the consumer ref goes
-            // straight through. Without it there was no node to focus at all.
-            ref: ref
-        });
-    }
-    return (_jsx(FormField, { ...others, name: others.name, 
-        // The seed goes through react-hook-form, never straight to the DOM: a
-        // value painted on the box only makes the field LOOK filled while the
-        // form still submits nothing for that name. Controller seeds its own
-        // state from this, so `field.value` carries the seed on both branches.
-        defaultValue: defaultValue, render: ({ field }) => {
-            formRef.current = field.ref;
-            return renderItem({
-                ...field,
-                // Controlled from mount. react-hook-form hands `undefined` for any
-                // name the form declares no default for; React then mounts the box
-                // uncontrolled and flips it on the first keystroke, losing that
-                // character.
-                value: field.value ?? '',
-                onChange: (e) => {
-                    field.onChange(e);
-                    onChange?.(e);
-                },
-                ref: (ref ? composedRef : field.ref)
-            });
-        } }));
-};
+import{jsx as t,jsxs as D}from"react/jsx-runtime";import{AutosizeTextarea as E}from"../../../components/ui/autosize-textarea/index.js";import{FormControl as N,FormDescription as P,FormField as k,FormItem as w,FormLabel as B,FormMessage as G,FormTooltip as J}from"../../../components/ui/form.js";import{Input as K}from"../../../components/ui/input/index.js";import{useMemo as Q,useRef as S}from"react";function U(...i){return m=>{const a=[];for(const n of i){if(typeof n==="function"){const u=n(m);a.push(typeof u==="function"?u:()=>n(null))}else if(n){;n.current=m;a.push(()=>{;n.current=null})}}return()=>a.forEach(n=>n())}}export const InputField=({className:i,type:m,label:a,tooltip:n,labelExtra:u,placeholder:d,description:s,startAdornment:C,endAdornment:R,required:A,readOnly:c,minHeight:M,maxHeight:H,textArea:L,defaultValue:l,value:p,onChange:f,min:O,max:T,step:_,maxLength:x,autoComplete:F,inputMode:h,pattern:b,autoFocus:g,ref:o,"aria-invalid":q,...r})=>{const I=q?{"aria-invalid":true}:void 0;const j=S(void 0);const z=Q(()=>o?U(e=>j.current?.(e),o):o,[o,r.name]);const v=e=>D(w,{required:A,children:[a&&t(B,{extra:n?t(J,{children:n}):u,children:a}),t(N,{children:L?t(E,{className:i,placeholder:d,readOnly:c,minHeight:M,maxHeight:H,maxLength:x,autoComplete:F,inputMode:h,autoFocus:g,"data-testid":r["data-testid"],...I,...e}):t(K,{className:i,type:m,placeholder:d,readOnly:c,startAdornment:C,endAdornment:R,min:O,max:T,step:_,maxLength:x,autoComplete:F,inputMode:h,pattern:b,autoFocus:g,"data-testid":r["data-testid"],...I,...e})}),t(G,{}),s&&t(P,{children:s})]});if(!r.control){return v({name:r.name,disabled:r.disabled,...p!==void 0?{value:p}:{defaultValue:l},onChange:e=>f?.(e),ref:o})}return t(k,{...r,name:r.name,defaultValue:l,render:({field:e})=>{j.current=e.ref;return v({...e,value:e.value??"",onChange:y=>{e.onChange(y);f?.(y)},ref:o?z:e.ref})}})};

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

@@ -1,15 +1 @@
-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 })] })) }));
-};
+import{jsx as r,Fragment as g,jsxs as u}from"react/jsx-runtime";import{FormControl as I,FormDescription as O,FormField as T,FormItem as j,FormLabel as P,FormMessage as y,FormTooltip as A}from"../../../components/ui/form.js";import{InputOTP as C,InputOTPGroup as i,InputOTPSlot as l,InputOTPSeparator as G}from"../../../components/ui/otp-input/index.js";export const OtpField=({name:p,label:s,tooltip:m,labelExtra:F,description:c,maxLength:n=6,pattern:h,separator:f=false,...t})=>{const a=Math.floor(n/2);const x=()=>{if(f&&n>1){const e=Array.from({length:a},(_,o)=>r(l,{index:o},o));const d=Array.from({length:n-a},(_,o)=>r(l,{index:a+o},a+o));return u(g,{children:[r(i,{children:e}),r(G,{}),r(i,{children:d})]})}return r(i,{children:Array.from({length:n},(e,d)=>r(l,{index:d},d))})};return r(T,{...t,name:p,render:({field:e})=>u(j,{required:t.required,children:[s&&r(P,{extra:m?r(A,{children:m}):F,children:s}),r(I,{children:r(C,{maxLength:n,pattern:h,value:e.value??"",onChange:e.onChange,onBlur:e.onBlur,ref:e.ref,name:e.name,disabled:t.disabled,"data-testid":t["data-testid"],children:x()})}),r(y,{}),c&&r(O,{children:c})]})})};

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

@@ -1,6 +1 @@
-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))) })] }));
-};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{SelectField as n}from"../select-field/index.js";import{SelectItem as o}from"../../../components/ui/select/index.js";export const PaginationLimitField=({options:i=[10,50,100],label:r="Items per page",control:m,["data-testid"]:s})=>{return a("div",{className:"flex items-center gap-4",children:[e("p",{className:"text-muted-foreground text-sm font-medium whitespace-nowrap",children:r}),e(n,{name:"limit",control:m,"data-testid":s,children:i.map(t=>e(o,{value:String(t),children:t},t))})]})};

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

@@ -1,10 +1 @@
-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, showPasswordLabel = 'Show password', hidePasswordLabel = 'Hide password' }) {
-    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, "aria-label": show ? hidePasswordLabel : showPasswordLabel, onClick: () => setShow(!show), children: show ? _jsx(EyeOff, { "aria-hidden": true }) : _jsx(Eye, { "aria-hidden": true }) }) }), disabled: disabled, "data-testid": dataTestId }) }), _jsx(FormMessage, {})] })) }));
-}
+import{jsx as e,jsxs as f}from"react/jsx-runtime";import h from"react";import{FormControl as F,FormField as w,FormItem as x,FormLabel as b,FormMessage as j,FormTooltip as y}from"../../../components/ui/form.js";import{Input as I,InputAdornment as S}from"../../../components/ui/input/index.js";import{Eye as A,EyeOff as C}from"lucide-react";import{IconButton as E}from"../../../components/ui/icon-button/index.js";export function PasswordField({name:t,label:d,tooltip:o,placeholder:n,control:i,required:a=false,disabled:s=false,"data-testid":m,showPasswordLabel:l="Show password",hidePasswordLabel:p="Hide password"}){const[r,u]=h.useState(false);return e(w,{control:i,name:t,render:({field:c})=>f(x,{required:a,children:[e(b,{extra:o?e(y,{children:o}):void 0,children:d}),e(F,{children:e(I,{...c,type:r?"text":"password",placeholder:n,endAdornment:e(S,{position:"end",children:e(E,{type:"button",variant:"outline",rounded:true,"aria-label":r?p:l,onClick:()=>u(!r),children:r?e(C,{"aria-hidden":true}):e(A,{"aria-hidden":true})})}),disabled:s,"data-testid":m})}),e(j,{})]})})}

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

@@ -1,32 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
-import { Label } from '../../../components/ui/label/index.js';
-import { RadioGroup, RadioGroupItem } from '../../../components/ui/radio-group/index.js';
-import { hasRenderableLabel } from '../../../components/form/renderable-label.js';
-export const RadioGroupField = ({ control, name, options, label, description, tooltip, required, disabled, 'aria-label': ariaLabelProp }) => {
-    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;
-    // `FormLabel` names its control through `htmlFor`, which only works on a
-    // labelable element — and the Radix radiogroup root is a plain div. So the
-    // visible label reached nobody: a screen-reader user landing on the group
-    // heard the options and no field name. The group points BACK at the label
-    // instead, via aria-labelledby on a stable generated id.
-    const labelId = useId();
-    // 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(`RadioGroupField "${name}" has no accessible name: pass a non-empty label or aria-label.`);
-    }
-    // `setFocus(name)` / focus-on-error needs a ref to something focusable. The
-    // RadioGroup root is a plain div, so the ref goes on the first option a user
-    // could actually reach — a disabled radio is not focusable.
-    const focusTargetIndex = options.findIndex((option) => !option.disabled);
-    return (_jsx(FormField, { control: control, name: name, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [showLabel && (_jsx(FormLabel, { id: labelId, extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : undefined, children: label })), _jsx(FormControl, { children: _jsx(RadioGroup, { name: field.name, value: field.value ?? '', onValueChange: field.onChange, onBlur: field.onBlur, disabled: disabled, "aria-labelledby": showLabel ? labelId : undefined, "aria-label": showLabel ? undefined : ariaLabel, className: "gap-2", children: options.map((option, index) => {
-                            const id = `${name}-${option.value}`;
-                            return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(RadioGroupItem, { ref: index === focusTargetIndex ? field.ref : undefined, value: option.value, id: id, disabled: option.disabled }), _jsx(Label, { htmlFor: id, className: "font-normal", children: option.label })] }, option.value));
-                        }) }) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] })) }));
-};
+"use client";import{jsx as e,jsxs as b}from"react/jsx-runtime";import{useId as v}from"react";import{FormControl as g,FormDescription as I,FormField as N,FormItem as R,FormLabel as j,FormMessage as G,FormTooltip as L}from"../../../components/ui/form.js";import{Label as C}from"../../../components/ui/label/index.js";import{RadioGroup as _,RadioGroupItem as $}from"../../../components/ui/radio-group/index.js";import{hasRenderableLabel as y}from"../../../components/form/renderable-label.js";export const RadioGroupField=({control:f,name:n,options:o,label:d,description:s,tooltip:i,required:h,disabled:p,"aria-label":m})=>{const l=y(d);const c=m?.trim()?m:void 0;const u=v();if(process.env.NODE_ENV!=="production"&&!l&&!c){console.error(`RadioGroupField "${n}" has no accessible name: pass a non-empty label or aria-label.`)}const F=o.findIndex(r=>!r.disabled);return e(N,{control:f,name:n,render:({field:r})=>b(R,{required:h,children:[l&&e(j,{id:u,extra:i?e(L,{children:i}):void 0,children:d}),e(g,{children:e(_,{name:r.name,value:r.value??"",onValueChange:r.onChange,onBlur:r.onBlur,disabled:p,"aria-labelledby":l?u:void 0,"aria-label":l?void 0:c,className:"gap-2",children:o.map((a,x)=>{const t=`${n}-${a.value}`;return b("div",{className:"flex items-center gap-2",children:[e($,{ref:x===F?r.ref:void 0,value:a.value,id:t,disabled:a.disabled}),e(C,{htmlFor:t,className:"font-normal",children:a.label})]},a.value)})})}),e(G,{}),s&&e(I,{children:s})]})})};

package/dist/esm/components/form/renderable-label.js

@@ -1,54 +1 @@
-import { Children, Fragment, isValidElement } from 'react';
-/**
- * Does this label put readable content INSIDE the label element — i.e. does it
- * give the control an accessible name?
- *
- * Ceiling, on purpose: a non-fragment element always counts, even an empty one.
- * We cannot render a component to find out whether it emits text, so
- * `label={<EmptyThing />}` is accepted. Fragments ARE unwrapped, since they add
- * no markup of their own and `<></>` is a plausible way to say "no label".
- *
- * A PORTAL DOES NOT COUNT. It is the one node that renders its content
- * somewhere else in the DOM — by definition outside the label subtree — so the
- * label element itself stays empty and names nothing. The content is visible on
- * screen, which is exactly what makes this worth guarding: it looks labelled
- * and is silent to a screen reader. Pass `aria-label` when the visible text
- * lives in a portal.
- *
- * BRANCH ORDER IS LOAD-BEARING — element before portal before collection:
- * `Children.toArray` hands a portal straight back unchanged, so reaching the
- * collection branch with one would recurse forever. The portal branch is the
- * crash guard as much as the verdict. Every field in this directory shares this
- * one copy precisely so that ordering cannot drift.
- */
-export function hasRenderableLabel(label) {
-    if (label === null || label === undefined || typeof label === 'boolean') {
-        return false;
-    }
-    // Empty AND whitespace-only strings render a label box with nothing to
-    // announce, so both count as absent. A number (`0`) is a real label.
-    if (typeof label === 'string')
-        return label.trim() !== '';
-    if (typeof label === 'number' || typeof label === 'bigint')
-        return true;
-    if (isValidElement(label)) {
-        return label.type === Fragment
-            ? hasRenderableLabel(label.props?.children ?? null)
-            : true;
-    }
-    // Portals and any other React-internal node that is not an element: their
-    // content lands outside this subtree (or is unknowable), so it cannot name
-    // the control. Must stay ABOVE the collection branch: isValidElement is false
-    // for a portal and Children.toArray hands the identical node straight back,
-    // so recursing on it would never terminate.
-    if (typeof label === 'object' && '$$typeof' in label)
-        return false;
-    const children = Children.toArray(label);
-    // Belt for anything else toArray cannot break down: no progress left to make,
-    // and nothing we can confirm renders in place, so treat it as absent rather
-    // than recurse forever.
-    if (children.length === 1 && children[0] === label)
-        return false;
-    // Arrays and other iterables: renderable only if some child is.
-    return children.some((child) => hasRenderableLabel(child));
-}
+import{Children as e,Fragment as i,isValidElement as f}from"react";export function hasRenderableLabel(r){if(r===null||r===void 0||typeof r==="boolean"){return false}if(typeof r==="string")return r.trim()!=="";if(typeof r==="number"||typeof r==="bigint")return true;if(f(r)){return r.type===i?hasRenderableLabel(r.props?.children??null):true}if(typeof r==="object"&&"$$typeof"in r)return false;const t=e.toArray(r);if(t.length===1&&t[0]===r)return false;return t.some(n=>hasRenderableLabel(n))}

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

@@ -1,64 +1 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
-import { MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue } from '../../../components/ui/multiple-select/index.js';
-import { Select, SelectContent, SelectEmpty, SelectTrigger, SelectValue } from '../../../components/ui/select/index.js';
-import { cn } from '../../../lib/utils.js';
-export const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', leadingIcon, className, onChange, ...others }) => {
-    // The props union already pairs `multi` with the callback shape that branch
-    // emits, but destructuring an intersection loses that correlation — TS sees
-    // two unrelated callbacks. Both branches report through this one seam, each
-    // with the payload its own union member declared.
-    const emitChange = onChange;
-    /**
-     * ⛔ THE GLYPH AND THE VALUE ARE ONE FLEX CHILD, NEVER TWO.
-     *
-     * `.select-trigger` is `flex w-full items-center justify-between`, so a
-     * third child makes it split the free space into TWO gaps: on any trigger
-     * wider than its content — which is every filter bar — the selected value
-     * drifted to the middle of the box instead of sitting beside the glyph.
-     * Wrapped, the trigger is back to two children, content and chevron,
-     * whatever the caller passes.
-     *
-     * `min-w-0` keeps the value truncating: the wrapper is the flex item now,
-     * and a flex item never shrinks below its own min-content width. The
-     * trigger's `VALUE_OVERFLOW_CLASS` reaches through it by descendant
-     * selector.
-     *
-     * No `gap`: the prop's contract is that spacing is the caller's (the Tracer
-     * filter bars carry their own `mr-2`), and a kit gap would double with it.
-     *
-     * The MULTI trigger needs none of this — it already renders its children
-     * inside one `flex grow flex-wrap` box, so the icon already shares a parent
-     * with the value and the trigger root already has exactly two children.
-     * Wrapping there would put the selected-value badges in a non-wrapping row
-     * and stop the trigger growing to a second line.
-     */
-    const withLeadingIcon = (value) => leadingIcon ? (_jsxs("span", { className: "flex min-w-0 items-center", children: [leadingIcon, value] })) : (value);
-    const renderItem = (field) => {
-        return (_jsxs(FormItem, { required: required, className: className, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? (_jsxs(MultipleSelect, { onValueChange: (value) => {
-                        field.onChange(value);
-                        emitChange?.(value);
-                    }, disabled: disabled, ...field, children: [_jsxs(MultipleSelectTrigger, { readOnly: readOnly, children: [leadingIcon, _jsx(MultipleSelectValue, { placeholder: placeholder })] }), _jsx(MultipleSelectContent, { children: children })] })) : (_jsxs(Select, { onValueChange: (value) => {
-                        field.onChange(value);
-                        emitChange?.(value);
-                    }, value: field.value, disabled: disabled, open: readOnly ? false : undefined, onOpenChange: readOnly ? () => { } : undefined, children: [_jsx(FormControl, { children: _jsx(SelectTrigger, { className: cn(disabled && 'bg-shadcn-100'), readOnly: readOnly, "data-testid": others['data-testid'], children: withLeadingIcon(_jsx(SelectValue, { placeholder: placeholder })) }) }), _jsxs(SelectContent, { children: [_jsx(SelectEmpty, { children: emptyMessage }), children] })] })), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
-    };
-    if (!control) {
-        // `value` undefined leaves Radix to keep its own state, so an uncontrolled
-        // standalone select still opens and picks; `onChange` reports either way.
-        // The caller's own `onChange` is invoked by the body, so this is a no-op.
-        return renderItem({
-            name,
-            value,
-            onChange: () => { },
-            onBlur: () => { },
-            ref: () => { },
-            disabled
-        });
-    }
-    return (_jsx(FormField, { name: name, control: control, ...others, 
-        // An unset field falls back to the EMPTY value of its own shape: `''`
-        // for the single select, `[]` for the multi one. Falling back to `''`
-        // for both handed MultipleSelect a string it silently discarded.
-        render: ({ field }) => renderItem({ ...field, value: field.value ?? (multi ? [] : '') }) }));
-};
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{FormControl as T,FormDescription as w,FormField as L,FormItem as _,FormLabel as q,FormMessage as v,FormTooltip as B}from"../../../components/ui/form.js";import{MultipleSelect as D,MultipleSelectContent as E,MultipleSelectTrigger as I,MultipleSelectValue as b}from"../../../components/ui/multiple-select/index.js";import{Select as k,SelectContent as y,SelectEmpty as z,SelectTrigger as A,SelectValue as G}from"../../../components/ui/select/index.js";import{cn as H}from"../../../lib/utils.js";export const SelectField=({name:i,label:a,tooltip:m,labelExtra:F,required:f,placeholder:s,description:h,disabled:o,readOnly:l,multi:d,control:p,value:x,children:u,emptyMessage:M="No options found.",leadingIcon:c,className:j,onChange:N,...g})=>{const C=N;const V=n=>c?r("span",{className:"flex min-w-0 items-center",children:[c,n]}):n;const S=n=>{return r(_,{required:f,className:j,children:[a&&e(q,{extra:m?e(B,{children:m}):F,children:a}),d?r(D,{onValueChange:t=>{n.onChange(t);C?.(t)},disabled:o,...n,children:[r(I,{readOnly:l,children:[c,e(b,{placeholder:s})]}),e(E,{children:u})]}):r(k,{onValueChange:t=>{n.onChange(t);C?.(t)},value:n.value,disabled:o,open:l?false:void 0,onOpenChange:l?()=>{}:void 0,children:[e(T,{children:e(A,{className:H(o&&"bg-shadcn-100"),readOnly:l,"data-testid":g["data-testid"],children:V(e(G,{placeholder:s}))})}),r(y,{children:[e(z,{children:M}),u]})]}),e(v,{}),h&&e(w,{children:h})]})};if(!p){return S({name:i,value:x,onChange:()=>{},onBlur:()=>{},ref:()=>{},disabled:o})}return e(L,{name:i,control:p,...g,render:({field:n})=>S({...n,value:n.value??(d?[]:"")})})};

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

@@ -1,35 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { getStateCountry } from '../../../utils/country-utils.js';
-import { useFormContext } from 'react-hook-form';
-import { FormField, FormItem, FormLabel, FormMessage } from '../../../components/ui/form.js';
-import { Button } from '../../../components/ui/button/index.js';
-import { cn } from '../../../lib/utils.js';
-import { Popover, PopoverTrigger, PopoverContent } from '../../../components/ui/popover/index.js';
-import { ChevronsUpDown } from 'lucide-react';
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../../../components/ui/command/index.js';
-function StateComboBox({ value, placeholder, onChange, countryName, emptyMessage, readOnly }) {
-    const [open, setOpen] = React.useState(false);
-    const form = useFormContext();
-    const country = form.watch(countryName);
-    const options = React.useMemo(() => {
-        const states = getStateCountry(country)?.map((state) => ({
-            value: state.code,
-            label: state.name
-        }));
-        if (!states) {
-            onChange?.('');
-        }
-        return states ?? [];
-    }, [country, onChange]);
-    const getDisplayValue = React.useCallback((value) => {
-        return options.find((option) => option.value === value)?.label ?? null;
-    }, [options]);
-    return (_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', !value && 'text-muted-foreground'), children: [getDisplayValue(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: options.map((option) => (_jsx(CommandItem, { value: option.value, keywords: [option.label], onSelect: (currentValue) => {
-                                            onChange?.(value !== currentValue ? currentValue : '');
-                                            setOpen(false);
-                                        }, children: option.label }, option.value))) })] })] }) })] }));
-}
-export const StateField = ({ countryName = 'address.country', label, placeholder, emptyMessage, required, readOnly, ...others }) => {
-    return (_jsx(FormField, { ...others, name: others.name, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [label && _jsx(FormLabel, { children: label }), _jsx(StateComboBox, { countryName: countryName, placeholder: placeholder, emptyMessage: emptyMessage, readOnly: readOnly, ...field }), _jsx(FormMessage, {})] })) }));
-};
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import u from"react";import{getStateCountry as x}from"../../../utils/country-utils.js";import{useFormContext as g}from"react-hook-form";import{FormField as C,FormItem as v,FormLabel as y,FormMessage as w}from"../../../components/ui/form.js";import{Button as F}from"../../../components/ui/button/index.js";import{cn as j}from"../../../lib/utils.js";import{Popover as S,PopoverTrigger as I,PopoverContent as N}from"../../../components/ui/popover/index.js";import{ChevronsUpDown as k}from"lucide-react";import{Command as M,CommandEmpty as P,CommandGroup as B,CommandInput as D,CommandItem as L,CommandList as _}from"../../../components/ui/command/index.js";function q({value:n,placeholder:m,onChange:a,countryName:d,emptyMessage:c,readOnly:r}){const[s,i]=u.useState(false);const h=g();const f=h.watch(d);const p=u.useMemo(()=>{const o=x(f)?.map(t=>({value:t.code,label:t.name}));if(!o){a?.("")}return o??[]},[f,a]);const b=u.useCallback(o=>{return p.find(t=>t.value===o)?.label??null},[p]);return l(S,{open:r?false:s,onOpenChange:r?()=>{}:i,children:[e(I,{asChild:true,children:l(F,{variant:"outline",role:"combobox","aria-expanded":r?false:s,readOnly:r,tabIndex:0,className:j("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",!n&&"text-muted-foreground"),children:[b(n)??m,!r&&e(k,{className:"ml-2 h-4 w-4 shrink-0 opacity-50"})]})}),e(N,{className:"w-(--radix-popover-trigger-width) p-0",children:l(M,{children:[e(D,{placeholder:m}),l(_,{children:[e(P,{children:c}),e(B,{children:p.map(o=>e(L,{value:o.value,keywords:[o.label],onSelect:t=>{a?.(n!==t?t:"");i(false)},children:o.label},o.value))})]})]})})]})}export const StateField=({countryName:n="address.country",label:m,placeholder:a,emptyMessage:d,required:c,readOnly:r,...s})=>{return e(C,{...s,name:s.name,render:({field:i})=>l(v,{required:c,children:[m&&e(y,{children:m}),e(q,{countryName:n,placeholder:a,emptyMessage:d,readOnly:r,...i}),e(w,{})]})})};

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

@@ -1,12 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
-import { Switch } from '../../../components/ui/switch/index.js';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../../../components/ui/tooltip/index.js';
-export const SwitchField = ({ label, name, control, labelExtra, tooltip, required, disabled, disabledTooltip, 'data-testid': dataTestId }) => {
-    return (_jsx(FormField, { name: name, control: control, render: ({ field }) => {
-            // FormControl stamps the id the label points at on its direct child,
-            // so it must wrap the Switch itself, never the tooltip around it.
-            const control = (_jsx(FormControl, { children: _jsx(Switch, { checked: field.value, onCheckedChange: field.onChange, disabled: disabled, "data-testid": dataTestId }) }));
-            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsx("div", { className: "relative", children: disabled && disabledTooltip ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "inline-flex w-auto", children: control }) }), _jsx(TooltipContent, { children: disabledTooltip })] })) : (control) }), _jsx(FormMessage, {})] }));
-        } }));
-};
+import{jsx as r,jsxs as l}from"react/jsx-runtime";import{FormControl as F,FormField as p,FormItem as x,FormLabel as u,FormMessage as C,FormTooltip as g}from"../../../components/ui/form.js";import{Switch as f}from"../../../components/ui/switch/index.js";import{Tooltip as j,TooltipContent as v,TooltipTrigger as T}from"../../../components/ui/tooltip/index.js";export const SwitchField=({label:e,name:d,control:a,labelExtra:m,tooltip:o,required:s,disabled:t,disabledTooltip:i,"data-testid":h})=>{return r(p,{name:d,control:a,render:({field:n})=>{const c=r(F,{children:r(f,{checked:n.value,onCheckedChange:n.onChange,disabled:t,"data-testid":h})});return l(x,{required:s,children:[e&&r(u,{extra:o?r(g,{children:o}):m,children:e}),r("div",{className:"relative",children:t&&i?l(j,{children:[r(T,{asChild:true,children:r("div",{className:"inline-flex w-auto",children:c})}),r(v,{children:i})]}):c}),r(C,{})]})}})};

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

@@ -1,19 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
-import { Textarea } from '../../../components/ui/textarea/index.js';
-import { hasRenderableLabel } from '../../../components/form/renderable-label.js';
-export const TextareaField = ({ control, name, label, description, placeholder, tooltip, required, disabled, readOnly, rows, className, 'data-testid': dataTestId, 'aria-label': ariaLabelProp }) => {
-    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(`TextareaField "${name}" has no accessible name: pass a non-empty label or aria-label.`);
-    }
-    return (_jsx(FormField, { control: control, name: name, 
-        // Controller-level, not just on the element: this is what keeps a
-        // disabled field out of the submitted values.
-        disabled: disabled, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [showLabel && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : undefined, children: label })), _jsx(FormControl, { children: _jsx(Textarea, { placeholder: placeholder, readOnly: readOnly, rows: rows, className: className, "data-testid": dataTestId, "aria-label": ariaLabel, ...field }) }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] })) }));
-};
+import{jsx as e,jsxs as f}from"react/jsx-runtime";import{FormControl as u,FormDescription as j,FormField as T,FormItem as L,FormLabel as N,FormMessage as _,FormTooltip as w}from"../../../components/ui/form.js";import{Textarea as y}from"../../../components/ui/textarea/index.js";import{hasRenderableLabel as D}from"../../../components/form/renderable-label.js";export const TextareaField=({control:t,name:r,label:a,description:o,placeholder:d,tooltip:s,required:m,disabled:c,readOnly:F,rows:b,className:h,"data-testid":p,"aria-label":l})=>{const i=D(a);const n=l?.trim()?l:void 0;if(process.env.NODE_ENV!=="production"&&!i&&!n){console.error(`TextareaField "${r}" has no accessible name: pass a non-empty label or aria-label.`)}return e(T,{control:t,name:r,disabled:c,render:({field:x})=>f(L,{required:m,children:[i&&e(N,{extra:s?e(w,{children:s}):void 0,children:a}),e(u,{children:e(y,{placeholder:d,readOnly:F,rows:b,className:h,"data-testid":p,"aria-label":n,...x})}),e(_,{}),o&&e(j,{children:o})]})})};

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

@@ -1,15 +1 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../lib/utils.js';
-export function PageRoot({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "page-root", className: cn('text-foreground bg-body-surface flex h-screen min-h-screen w-full flex-col overflow-y-auto', className), ...props }));
-}
-export function PageView({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "page-view", className: cn('flex min-h-0 flex-1', className), ...props }));
-}
-export function PageContent({ className, padding = 'default', ...props }) {
-    return (_jsx("div", { "data-slot": "page-content", 
-        // Order is the contract, not a style: `className` last is what lets a
-        // caller's `p-0` beat `p-16` and a caller's `max-sm:p-0` replace the
-        // compact rule instead of stacking with it.
-        className: cn('flex grow flex-col overflow-y-auto p-16', padding === 'compact' && 'max-sm:p-4', className), ...props }));
-}
+import{jsx as t}from"react/jsx-runtime";import{cn as a}from"../../lib/utils.js";export function PageRoot({className:e,...o}){return t("div",{"data-slot":"page-root",className:a("text-foreground bg-body-surface flex h-screen min-h-screen w-full flex-col overflow-y-auto",e),...o})}export function PageView({className:e,...o}){return t("div",{"data-slot":"page-view",className:a("flex min-h-0 flex-1",e),...o})}export function PageContent({className:e,padding:o="default",...r}){return t("div",{"data-slot":"page-content",className:a("flex grow flex-col overflow-y-auto p-16",o==="compact"&&"max-sm:p-4",e),...r})}