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

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

@@ -1,114 +1 @@
-'use client';
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateTimePickerField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const button_1 = require("../../../components/ui/button");
-const calendar_1 = require("../../../components/ui/calendar");
-const form_1 = require("../../../components/ui/form");
-const popover_1 = require("../../../components/ui/popover");
-const time_picker_1 = require("../../../components/ui/time-picker");
-const utils_1 = require("../../../lib/utils");
-const dayjs_1 = __importDefault(require("dayjs"));
-const lucide_react_1 = require("lucide-react");
-const React = __importStar(require("react"));
-const locale_1 = require("react-day-picker/locale");
-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 = locale_1.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 ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
-            const current = field.value ? (0, dayjs_1.default)(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 = (0, dayjs_1.default)(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 ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-full", children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-foreground flex-1 text-left', validCurrent && 'font-bold'), children: validCurrent
-                                                        ? validCurrent.format(dateFormat)
-                                                        : placeholder }) }) }) }), showClear && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "size-4" }) }))] }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-stretch", children: [(0, jsx_runtime_1.jsx)(calendar_1.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 < (0, dayjs_1.default)(minDate).startOf('day').toDate())
-                                                    return true;
-                                                if (maxDate &&
-                                                    date > (0, dayjs_1.default)(maxDate).endOf('day').toDate())
-                                                    return true;
-                                                return false;
-                                            } }), (0, jsx_runtime_1.jsx)("div", { className: "bg-border hidden w-px self-stretch sm:block" }), (0, jsx_runtime_1.jsx)("div", { className: "border-border border-t sm:hidden" }), (0, jsx_runtime_1.jsx)(time_picker_1.TimePicker, { hour: validCurrent ? validCurrent.hour() : undefined, minute: validCurrent ? validCurrent.minute() : undefined, onChange: handleTimeChange, disabled: disabled || readOnly || !validCurrent })] }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
-        } }));
-};
-exports.DateTimePickerField = DateTimePickerField;
+"use client";"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,e,o,r){if(r===void 0)r=o;var n=Object.getOwnPropertyDescriptor(e,o);if(!n||("get"in n?!e.__esModule:n.writable||n.configurable)){n={enumerable:true,get:function(){return e[o]}}}Object.defineProperty(t,r,n)}):(function(t,e,o,r){if(r===void 0)r=o;t[r]=e[o]}));var __setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:true,value:e})}):function(t,e){t["default"]=e});var __importStar=this&&this.__importStar||(function(){var t=function(e){t=Object.getOwnPropertyNames||function(o){var r=[];for(var n in o)if(Object.prototype.hasOwnProperty.call(o,n))r[r.length]=n;return r};return t(e)};return function(e){if(e&&e.__esModule)return e;var o={};if(e!=null){for(var r=t(e),n=0;n<r.length;n++)if(r[n]!=="default")__createBinding(o,e,r[n])}__setModuleDefault(o,e);return o}})();var __importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{"default":t}};Object.defineProperty(exports,"__esModule",{value:true});exports.DateTimePickerField=void 0;const jsx_runtime_1=require("react/jsx-runtime");const button_1=require("../../../components/ui/button");const calendar_1=require("../../../components/ui/calendar");const form_1=require("../../../components/ui/form");const popover_1=require("../../../components/ui/popover");const time_picker_1=require("../../../components/ui/time-picker");const utils_1=require("../../../lib/utils");const dayjs_1=__importDefault(require("dayjs"));const lucide_react_1=require("lucide-react");const React=__importStar(require("react"));const locale_1=require("react-day-picker/locale");const DateTimePickerField=({name:t,label:e,tooltip:o,labelExtra:r,description:n,placeholder:b="Select date and time...",disabled:c,readOnly:d,control:j,required:v,dateFormat:D="MMM DD, YYYY HH:mm",align:C="start",locale:y=locale_1.enUS,minDate:m,maxDate:h,defaultTime:N="00:00",...O})=>{const[p,x]=React.useState(false);const P=u=>{const[a,l]=u.split(":").map(Number);return{hour:Number.isFinite(a)&&a>=0&&a<=23?a:0,minute:Number.isFinite(l)&&l>=0&&l<=59?l:0}};return(0,jsx_runtime_1.jsx)(form_1.FormField,{name:t,control:j,render:({field:u})=>{const a=u.value?(0,dayjs_1.default)(u.value):null;const l=a?.isValid()??false;const i=l?a:null;const F=s=>{if(!s)return;const f=i?{hour:i.hour(),minute:i.minute()}:P(N);const w=(0,dayjs_1.default)(s).hour(f.hour).minute(f.minute).second(0).millisecond(0);u.onChange(w.toISOString())};const q=s=>{if(!i)return;const f=i.hour(s.hour).minute(s.minute).second(0).millisecond(0);u.onChange(f.toISOString())};const g=s=>{s.stopPropagation();u.onChange("");x(false)};const _=!!u.value&&!d&&!c;return(0,jsx_runtime_1.jsxs)(form_1.FormItem,{required:v,children:[e&&(0,jsx_runtime_1.jsx)(form_1.FormLabel,{extra:o?(0,jsx_runtime_1.jsx)(form_1.FormTooltip,{children:o}):r,children:e}),(0,jsx_runtime_1.jsxs)(popover_1.Popover,{open:p,onOpenChange:x,children:[(0,jsx_runtime_1.jsxs)("div",{className:"relative w-full",children:[(0,jsx_runtime_1.jsx)(popover_1.PopoverTrigger,{asChild:true,children:(0,jsx_runtime_1.jsx)(form_1.FormControl,{children:(0,jsx_runtime_1.jsx)(button_1.Button,{variant:"outline",disabled:c,className:(0,utils_1.cn)("bg-input hover:bg-input border-input-border text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal",d&&"pointer-events-none",_&&"pr-8",p&&"ring-ring ring-2 ring-offset-0"),"data-testid":O["data-testid"],icon:(0,jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon,{className:"size-4"}),children:(0,jsx_runtime_1.jsx)("span",{className:(0,utils_1.cn)("text-foreground flex-1 text-left",i&&"font-bold"),children:i?i.format(D):b})})})}),_&&(0,jsx_runtime_1.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:g,onKeyDown:s=>{if(s.key==="Enter"||s.key===" "){s.preventDefault();g(s)}},children:(0,jsx_runtime_1.jsx)(lucide_react_1.XIcon,{className:"size-4"})})]}),(0,jsx_runtime_1.jsx)(popover_1.PopoverContent,{className:"w-auto p-0",align:C,children:(0,jsx_runtime_1.jsxs)("div",{className:"flex flex-col sm:flex-row sm:items-stretch",children:[(0,jsx_runtime_1.jsx)(calendar_1.Calendar,{mode:"single",defaultMonth:i?i.toDate():void 0,selected:i?i.toDate():void 0,onSelect:F,locale:y,disabled:s=>{if(c||d)return true;if(m&&s<(0,dayjs_1.default)(m).startOf("day").toDate())return true;if(h&&s>(0,dayjs_1.default)(h).endOf("day").toDate())return true;return false}}),(0,jsx_runtime_1.jsx)("div",{className:"bg-border hidden w-px self-stretch sm:block"}),(0,jsx_runtime_1.jsx)("div",{className:"border-border border-t sm:hidden"}),(0,jsx_runtime_1.jsx)(time_picker_1.TimePicker,{hour:i?i.hour():void 0,minute:i?i.minute():void 0,onChange:q,disabled:c||d||!i})]})})]}),(0,jsx_runtime_1.jsx)(form_1.FormMessage,{}),n&&(0,jsx_runtime_1.jsx)(form_1.FormDescription,{children:n})]})}})};exports.DateTimePickerField=DateTimePickerField;

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

@@ -1,69 +1 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileUploadField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const form_1 = require("../../../components/ui/form");
-const file_upload_1 = require("../../../components/ui/file-upload");
-const renderable_label_1 = require("../../../components/form/renderable-label");
-/**
- * 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.
- */
-const FileUploadField = ({ control, name, label, description, tooltip, required, accept, maxSizeBytes, disabled, className, labels, onError, onSelect, 'aria-label': ariaLabelProp }) => {
-    const [localValue, setLocalValue] = (0, react_1.useState)(null);
-    const showLabel = (0, renderable_label_1.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 ((0, jsx_runtime_1.jsx)(form_1.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 ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [showLabel && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : undefined, children: label })), (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(file_upload_1.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);
-                            } }) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
-        } }));
-};
-exports.FileUploadField = FileUploadField;
+"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.FileUploadField=void 0;const jsx_runtime_1=require("react/jsx-runtime");const react_1=require("react");const form_1=require("../../../components/ui/form");const file_upload_1=require("../../../components/ui/file-upload");const renderable_label_1=require("../../../components/form/renderable-label");const FileUploadField=({control:m,name:o,label:n,description:a,tooltip:s,required:p,accept:x,maxSizeBytes:F,disabled:b,className:h,labels:j,onError:_,onSelect:t,"aria-label":i})=>{const[l,c]=(0,react_1.useState)(null);const u=(0,renderable_label_1.hasRenderableLabel)(n);const d=i?.trim()?i:void 0;if(process.env.NODE_ENV!=="production"&&!u&&!d){console.error(`FileUploadField "${o}" has no accessible name: pass a non-empty label or aria-label.`)}return(0,jsx_runtime_1.jsx)(form_1.FormField,{control:m,name:o,render:({field:e})=>{const f=l&&e.value===l.text?l:null;return(0,jsx_runtime_1.jsxs)(form_1.FormItem,{required:p,children:[u&&(0,jsx_runtime_1.jsx)(form_1.FormLabel,{extra:s?(0,jsx_runtime_1.jsx)(form_1.FormTooltip,{children:s}):void 0,children:n}),(0,jsx_runtime_1.jsx)(form_1.FormControl,{children:(0,jsx_runtime_1.jsx)(file_upload_1.FileUpload,{ref:e.ref,name:e.name,onBlur:e.onBlur,"aria-label":d,labels:j,accept:x,maxSizeBytes:F,disabled:b,className:h,value:f,onSelect:r=>{c(r);e.onChange(r?.text??"");t?.(r)},onError:r=>{c(null);e.onChange("");t?.(null);_?.(r)}})}),(0,jsx_runtime_1.jsx)(form_1.FormMessage,{}),a&&(0,jsx_runtime_1.jsx)(form_1.FormDescription,{children:a})]})}})};exports.FileUploadField=FileUploadField;

package/dist/components/form/index.js

@@ -1,31 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./input-field"), exports);
-__exportStar(require("./select-field"), exports);
-__exportStar(require("./switch-field"), exports);
-__exportStar(require("./pagination-limit-field"), exports);
-__exportStar(require("./combo-box-field"), exports);
-__exportStar(require("./country-field"), exports);
-__exportStar(require("./state-field"), exports);
-__exportStar(require("./date-range-field"), exports);
-__exportStar(require("./date-picker-field"), exports);
-__exportStar(require("./date-time-picker-field"), exports);
-__exportStar(require("./otp-field"), exports);
-__exportStar(require("./password-field"), exports);
-__exportStar(require("./file-upload-field"), exports);
-__exportStar(require("./radio-group-field"), exports);
-__exportStar(require("./textarea-field"), exports);
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,r,e,i){if(i===void 0)i=e;var o=Object.getOwnPropertyDescriptor(r,e);if(!o||("get"in o?!r.__esModule:o.writable||o.configurable)){o={enumerable:true,get:function(){return r[e]}}}Object.defineProperty(t,i,o)}):(function(t,r,e,i){if(i===void 0)i=e;t[i]=r[e]}));var __exportStar=this&&this.__exportStar||function(t,r){for(var e in t)if(e!=="default"&&!Object.prototype.hasOwnProperty.call(r,e))__createBinding(r,t,e)};Object.defineProperty(exports,"__esModule",{value:true});__exportStar(require("./input-field"),exports);__exportStar(require("./select-field"),exports);__exportStar(require("./switch-field"),exports);__exportStar(require("./pagination-limit-field"),exports);__exportStar(require("./combo-box-field"),exports);__exportStar(require("./country-field"),exports);__exportStar(require("./state-field"),exports);__exportStar(require("./date-range-field"),exports);__exportStar(require("./date-picker-field"),exports);__exportStar(require("./date-time-picker-field"),exports);__exportStar(require("./otp-field"),exports);__exportStar(require("./password-field"),exports);__exportStar(require("./file-upload-field"),exports);__exportStar(require("./radio-group-field"),exports);__exportStar(require("./textarea-field"),exports);

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

@@ -1,96 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const autosize_textarea_1 = require("../../../components/ui/autosize-textarea");
-const form_1 = require("../../../components/ui/form");
-const input_1 = require("../../../components/ui/input");
-const react_1 = require("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());
-    };
-}
-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 = (0, react_1.useRef)(undefined);
-    const composedRef = (0, react_1.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) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: textArea ? ((0, jsx_runtime_1.jsx)(autosize_textarea_1.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 })) : ((0, jsx_runtime_1.jsx)(input_1.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 })) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.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 ((0, jsx_runtime_1.jsx)(form_1.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)
-            });
-        } }));
-};
-exports.InputField = InputField;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.InputField=void 0;const jsx_runtime_1=require("react/jsx-runtime");const autosize_textarea_1=require("../../../components/ui/autosize-textarea");const form_1=require("../../../components/ui/form");const input_1=require("../../../components/ui/input");const react_1=require("react");function fanOutRef(...o){return u=>{const r=[];for(const n of o){if(typeof n==="function"){const i=n(u);r.push(typeof i==="function"?i:()=>n(null))}else if(n){;n.current=u;r.push(()=>{;n.current=null})}}return()=>r.forEach(n=>n())}}const InputField=({className:o,type:u,label:r,tooltip:n,labelExtra:i,placeholder:s,description:c,startAdornment:v,endAdornment:g,required:y,readOnly:d,minHeight:C,maxHeight:M,textArea:R,defaultValue:m,value:p,onChange:l,min:z,max:A,step:O,maxLength:x,autoComplete:f,inputMode:j,pattern:b,autoFocus:F,ref:a,"aria-invalid":H,...t})=>{const _=H?{"aria-invalid":true}:void 0;const h=(0,react_1.useRef)(void 0);const L=(0,react_1.useMemo)(()=>a?fanOutRef(e=>h.current?.(e),a):a,[a,t.name]);const I=e=>(0,jsx_runtime_1.jsxs)(form_1.FormItem,{required:y,children:[r&&(0,jsx_runtime_1.jsx)(form_1.FormLabel,{extra:n?(0,jsx_runtime_1.jsx)(form_1.FormTooltip,{children:n}):i,children:r}),(0,jsx_runtime_1.jsx)(form_1.FormControl,{children:R?(0,jsx_runtime_1.jsx)(autosize_textarea_1.AutosizeTextarea,{className:o,placeholder:s,readOnly:d,minHeight:C,maxHeight:M,maxLength:x,autoComplete:f,inputMode:j,autoFocus:F,"data-testid":t["data-testid"],..._,...e}):(0,jsx_runtime_1.jsx)(input_1.Input,{className:o,type:u,placeholder:s,readOnly:d,startAdornment:v,endAdornment:g,min:z,max:A,step:O,maxLength:x,autoComplete:f,inputMode:j,pattern:b,autoFocus:F,"data-testid":t["data-testid"],..._,...e})}),(0,jsx_runtime_1.jsx)(form_1.FormMessage,{}),c&&(0,jsx_runtime_1.jsx)(form_1.FormDescription,{children:c})]});if(!t.control){return I({name:t.name,disabled:t.disabled,...p!==void 0?{value:p}:{defaultValue:m},onChange:e=>l?.(e),ref:a})}return(0,jsx_runtime_1.jsx)(form_1.FormField,{...t,name:t.name,defaultValue:m,render:({field:e})=>{h.current=e.ref;return I({...e,value:e.value??"",onChange:q=>{e.onChange(q);l?.(q)},ref:a?L:e.ref})}})};exports.InputField=InputField;

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

@@ -1,19 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OtpField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const form_1 = require("../../../components/ui/form");
-const otp_input_1 = require("../../../components/ui/otp-input");
-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) => ((0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot, { index: i }, i)));
-            const secondGroup = Array.from({ length: maxLength - midpoint }, (_, i) => (0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot, { index: midpoint + i }, midpoint + i));
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup, { children: firstGroup }), (0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSeparator, {}), (0, jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup, { children: secondGroup })] }));
-        }
-        return ((0, jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup, { children: Array.from({ length: maxLength }, (_, i) => ((0, jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot, { index: i }, i))) }));
-    };
-    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { ...others, name: name, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: others.required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(otp_input_1.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() }) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] })) }));
-};
-exports.OtpField = OtpField;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.OtpField=void 0;const jsx_runtime_1=require("react/jsx-runtime");const form_1=require("../../../components/ui/form");const otp_input_1=require("../../../components/ui/otp-input");const OtpField=({name:p,label:u,tooltip:i,labelExtra:l,description:d,maxLength:e=6,pattern:c,separator:a=false,...t})=>{const o=Math.floor(e/2);const x=()=>{if(a&&e>1){const r=Array.from({length:o},(j,n)=>(0,jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot,{index:n},n));const s=Array.from({length:e-o},(j,n)=>(0,jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot,{index:o+n},o+n));return(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup,{children:r}),(0,jsx_runtime_1.jsx)(otp_input_1.InputOTPSeparator,{}),(0,jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup,{children:s})]})}return(0,jsx_runtime_1.jsx)(otp_input_1.InputOTPGroup,{children:Array.from({length:e},(r,s)=>(0,jsx_runtime_1.jsx)(otp_input_1.InputOTPSlot,{index:s},s))})};return(0,jsx_runtime_1.jsx)(form_1.FormField,{...t,name:p,render:({field:r})=>(0,jsx_runtime_1.jsxs)(form_1.FormItem,{required:t.required,children:[u&&(0,jsx_runtime_1.jsx)(form_1.FormLabel,{extra:i?(0,jsx_runtime_1.jsx)(form_1.FormTooltip,{children:i}):l,children:u}),(0,jsx_runtime_1.jsx)(form_1.FormControl,{children:(0,jsx_runtime_1.jsx)(otp_input_1.InputOTP,{maxLength:e,pattern:c,value:r.value??"",onChange:r.onChange,onBlur:r.onBlur,ref:r.ref,name:r.name,disabled:t.disabled,"data-testid":t["data-testid"],children:x()})}),(0,jsx_runtime_1.jsx)(form_1.FormMessage,{}),d&&(0,jsx_runtime_1.jsx)(form_1.FormDescription,{children:d})]})})};exports.OtpField=OtpField;

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

@@ -1,10 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaginationLimitField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const select_field_1 = require("../select-field");
-const select_1 = require("../../../components/ui/select");
-const PaginationLimitField = ({ options = [10, 50, 100], label = 'Items per page', control, ['data-testid']: dataTestId }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground text-sm font-medium whitespace-nowrap", children: label }), (0, jsx_runtime_1.jsx)(select_field_1.SelectField, { name: "limit", control: control, "data-testid": dataTestId, children: options.map((pageSize) => ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: String(pageSize), children: pageSize }, pageSize))) })] }));
-};
-exports.PaginationLimitField = PaginationLimitField;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.PaginationLimitField=void 0;const jsx_runtime_1=require("react/jsx-runtime");const select_field_1=require("../select-field");const select_1=require("../../../components/ui/select");const PaginationLimitField=({options:t=[10,50,100],label:i="Items per page",control:s,["data-testid"]:r})=>{return(0,jsx_runtime_1.jsxs)("div",{className:"flex items-center gap-4",children:[(0,jsx_runtime_1.jsx)("p",{className:"text-muted-foreground text-sm font-medium whitespace-nowrap",children:i}),(0,jsx_runtime_1.jsx)(select_field_1.SelectField,{name:"limit",control:s,"data-testid":r,children:t.map(e=>(0,jsx_runtime_1.jsx)(select_1.SelectItem,{value:String(e),children:e},e))})]})};exports.PaginationLimitField=PaginationLimitField;

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

@@ -1,16 +1 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PasswordField = PasswordField;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const form_1 = require("../../../components/ui/form");
-const input_1 = require("../../../components/ui/input");
-const lucide_react_1 = require("lucide-react");
-const icon_button_1 = require("../../../components/ui/icon-button");
-function PasswordField({ name, label, tooltip, placeholder, control, required = false, disabled = false, 'data-testid': dataTestId, showPasswordLabel = 'Show password', hidePasswordLabel = 'Hide password' }) {
-    const [show, setShow] = react_1.default.useState(false);
-    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { control: control, name: name, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [(0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : undefined, children: label }), (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(input_1.Input, { ...field, type: show ? 'text' : 'password', placeholder: placeholder, endAdornment: (0, jsx_runtime_1.jsx)(input_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "outline", rounded: true, "aria-label": show ? hidePasswordLabel : showPasswordLabel, onClick: () => setShow(!show), children: show ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { "aria-hidden": true }) }) }), disabled: disabled, "data-testid": dataTestId }) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {})] })) }));
-}
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{"default":e}};Object.defineProperty(exports,"__esModule",{value:true});exports.PasswordField=PasswordField;const jsx_runtime_1=require("react/jsx-runtime");const react_1=__importDefault(require("react"));const form_1=require("../../../components/ui/form");const input_1=require("../../../components/ui/input");const lucide_react_1=require("lucide-react");const icon_button_1=require("../../../components/ui/icon-button");function PasswordField({name:e,label:n,tooltip:r,placeholder:o,control:s,required:i=false,disabled:u=false,"data-testid":d,showPasswordLabel:a="Show password",hidePasswordLabel:c="Hide password"}){const[t,l]=react_1.default.useState(false);return(0,jsx_runtime_1.jsx)(form_1.FormField,{control:s,name:e,render:({field:p})=>(0,jsx_runtime_1.jsxs)(form_1.FormItem,{required:i,children:[(0,jsx_runtime_1.jsx)(form_1.FormLabel,{extra:r?(0,jsx_runtime_1.jsx)(form_1.FormTooltip,{children:r}):void 0,children:n}),(0,jsx_runtime_1.jsx)(form_1.FormControl,{children:(0,jsx_runtime_1.jsx)(input_1.Input,{...p,type:t?"text":"password",placeholder:o,endAdornment:(0,jsx_runtime_1.jsx)(input_1.InputAdornment,{position:"end",children:(0,jsx_runtime_1.jsx)(icon_button_1.IconButton,{type:"button",variant:"outline",rounded:true,"aria-label":t?c:a,onClick:()=>l(!t),children:t?(0,jsx_runtime_1.jsx)(lucide_react_1.EyeOff,{"aria-hidden":true}):(0,jsx_runtime_1.jsx)(lucide_react_1.Eye,{"aria-hidden":true})})}),disabled:u,"data-testid":d})}),(0,jsx_runtime_1.jsx)(form_1.FormMessage,{})]})})}

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

@@ -1,36 +1 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioGroupField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const form_1 = require("../../../components/ui/form");
-const label_1 = require("../../../components/ui/label");
-const radio_group_1 = require("../../../components/ui/radio-group");
-const renderable_label_1 = require("../../../components/form/renderable-label");
-const RadioGroupField = ({ control, name, options, label, description, tooltip, required, disabled, 'aria-label': ariaLabelProp }) => {
-    const showLabel = (0, renderable_label_1.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 = (0, react_1.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 ((0, jsx_runtime_1.jsx)(form_1.FormField, { control: control, name: name, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [showLabel && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { id: labelId, extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : undefined, children: label })), (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(radio_group_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { ref: index === focusTargetIndex ? field.ref : undefined, value: option.value, id: id, disabled: option.disabled }), (0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: id, className: "font-normal", children: option.label })] }, option.value));
-                        }) }) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] })) }));
-};
-exports.RadioGroupField = RadioGroupField;
+"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.RadioGroupField=void 0;const jsx_runtime_1=require("react/jsx-runtime");const react_1=require("react");const form_1=require("../../../components/ui/form");const label_1=require("../../../components/ui/label");const radio_group_1=require("../../../components/ui/radio-group");const renderable_label_1=require("../../../components/form/renderable-label");const RadioGroupField=({control:m,name:n,options:l,label:o,description:s,tooltip:d,required:b,disabled:x,"aria-label":i})=>{const a=(0,renderable_label_1.hasRenderableLabel)(o);const u=i?.trim()?i:void 0;const c=(0,react_1.useId)();if(process.env.NODE_ENV!=="production"&&!a&&!u){console.error(`RadioGroupField "${n}" has no accessible name: pass a non-empty label or aria-label.`)}const p=l.findIndex(e=>!e.disabled);return(0,jsx_runtime_1.jsx)(form_1.FormField,{control:m,name:n,render:({field:e})=>(0,jsx_runtime_1.jsxs)(form_1.FormItem,{required:b,children:[a&&(0,jsx_runtime_1.jsx)(form_1.FormLabel,{id:c,extra:d?(0,jsx_runtime_1.jsx)(form_1.FormTooltip,{children:d}):void 0,children:o}),(0,jsx_runtime_1.jsx)(form_1.FormControl,{children:(0,jsx_runtime_1.jsx)(radio_group_1.RadioGroup,{name:e.name,value:e.value??"",onValueChange:e.onChange,onBlur:e.onBlur,disabled:x,"aria-labelledby":a?c:void 0,"aria-label":a?void 0:u,className:"gap-2",children:l.map((r,h)=>{const t=`${n}-${r.value}`;return(0,jsx_runtime_1.jsxs)("div",{className:"flex items-center gap-2",children:[(0,jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem,{ref:h===p?e.ref:void 0,value:r.value,id:t,disabled:r.disabled}),(0,jsx_runtime_1.jsx)(label_1.Label,{htmlFor:t,className:"font-normal",children:r.label})]},r.value)})})}),(0,jsx_runtime_1.jsx)(form_1.FormMessage,{}),s&&(0,jsx_runtime_1.jsx)(form_1.FormDescription,{children:s})]})})};exports.RadioGroupField=RadioGroupField;

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

@@ -1,57 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasRenderableLabel = hasRenderableLabel;
-const react_1 = require("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.
- */
-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 ((0, react_1.isValidElement)(label)) {
-        return label.type === react_1.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 = react_1.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));
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.hasRenderableLabel=hasRenderableLabel;const react_1=require("react");function hasRenderableLabel(e){if(e===null||e===void 0||typeof e==="boolean"){return false}if(typeof e==="string")return e.trim()!=="";if(typeof e==="number"||typeof e==="bigint")return true;if((0,react_1.isValidElement)(e)){return e.type===react_1.Fragment?hasRenderableLabel(e.props?.children??null):true}if(typeof e==="object"&&"$$typeof"in e)return false;const r=react_1.Children.toArray(e);if(r.length===1&&r[0]===e)return false;return r.some(t=>hasRenderableLabel(t))}

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

@@ -1,68 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectField = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const form_1 = require("../../../components/ui/form");
-const multiple_select_1 = require("../../../components/ui/multiple-select");
-const select_1 = require("../../../components/ui/select");
-const utils_1 = require("../../../lib/utils");
-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 ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 items-center", children: [leadingIcon, value] })) : (value);
-    const renderItem = (field) => {
-        return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, className: className, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? ((0, jsx_runtime_1.jsxs)(multiple_select_1.MultipleSelect, { onValueChange: (value) => {
-                        field.onChange(value);
-                        emitChange?.(value);
-                    }, disabled: disabled, ...field, children: [(0, jsx_runtime_1.jsxs)(multiple_select_1.MultipleSelectTrigger, { readOnly: readOnly, children: [leadingIcon, (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectValue, { placeholder: placeholder })] }), (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectContent, { children: children })] })) : ((0, jsx_runtime_1.jsxs)(select_1.Select, { onValueChange: (value) => {
-                        field.onChange(value);
-                        emitChange?.(value);
-                    }, value: field.value, disabled: disabled, open: readOnly ? false : undefined, onOpenChange: readOnly ? () => { } : undefined, children: [(0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { className: (0, utils_1.cn)(disabled && 'bg-shadcn-100'), readOnly: readOnly, "data-testid": others['data-testid'], children: withLeadingIcon((0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: placeholder })) }) }), (0, jsx_runtime_1.jsxs)(select_1.SelectContent, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectEmpty, { children: emptyMessage }), children] })] })), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.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 ((0, jsx_runtime_1.jsx)(form_1.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 ? [] : '') }) }));
-};
-exports.SelectField = SelectField;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.SelectField=void 0;const jsx_runtime_1=require("react/jsx-runtime");const form_1=require("../../../components/ui/form");const multiple_select_1=require("../../../components/ui/multiple-select");const select_1=require("../../../components/ui/select");const utils_1=require("../../../lib/utils");const SelectField=({name:l,label:c,tooltip:o,labelExtra:p,required:g,placeholder:i,description:u,disabled:n,readOnly:s,multi:a,control:d,value:S,children:m,emptyMessage:F="No options found.",leadingIcon:r,className:C,onChange:_,...x})=>{const h=_;const f=e=>r?(0,jsx_runtime_1.jsxs)("span",{className:"flex min-w-0 items-center",children:[r,e]}):e;const j=e=>{return(0,jsx_runtime_1.jsxs)(form_1.FormItem,{required:g,className:C,children:[c&&(0,jsx_runtime_1.jsx)(form_1.FormLabel,{extra:o?(0,jsx_runtime_1.jsx)(form_1.FormTooltip,{children:o}):p,children:c}),a?(0,jsx_runtime_1.jsxs)(multiple_select_1.MultipleSelect,{onValueChange:t=>{e.onChange(t);h?.(t)},disabled:n,...e,children:[(0,jsx_runtime_1.jsxs)(multiple_select_1.MultipleSelectTrigger,{readOnly:s,children:[r,(0,jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectValue,{placeholder:i})]}),(0,jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectContent,{children:m})]}):(0,jsx_runtime_1.jsxs)(select_1.Select,{onValueChange:t=>{e.onChange(t);h?.(t)},value:e.value,disabled:n,open:s?false:void 0,onOpenChange:s?()=>{}:void 0,children:[(0,jsx_runtime_1.jsx)(form_1.FormControl,{children:(0,jsx_runtime_1.jsx)(select_1.SelectTrigger,{className:(0,utils_1.cn)(n&&"bg-shadcn-100"),readOnly:s,"data-testid":x["data-testid"],children:f((0,jsx_runtime_1.jsx)(select_1.SelectValue,{placeholder:i}))})}),(0,jsx_runtime_1.jsxs)(select_1.SelectContent,{children:[(0,jsx_runtime_1.jsx)(select_1.SelectEmpty,{children:F}),m]})]}),(0,jsx_runtime_1.jsx)(form_1.FormMessage,{}),u&&(0,jsx_runtime_1.jsx)(form_1.FormDescription,{children:u})]})};if(!d){return j({name:l,value:S,onChange:()=>{},onBlur:()=>{},ref:()=>{},disabled:n})}return(0,jsx_runtime_1.jsx)(form_1.FormField,{name:l,control:d,...x,render:({field:e})=>j({...e,value:e.value??(a?[]:"")})})};exports.SelectField=SelectField;