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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+import { Control, FieldValues, Path } from 'react-hook-form';
+import { type RenderableLabel } from '../../../components/form/renderable-label.js';
+export type RadioGroupFieldOption = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+};
+type RadioGroupFieldOwnProps<T extends FieldValues = FieldValues> = {
+    control: Control<T>;
+    name: Path<T>;
+    options: RadioGroupFieldOption[];
+    description?: ReactNode;
+    tooltip?: string;
+    required?: boolean;
+    disabled?: boolean;
+};
+/**
+ * A control with no accessible name is invisible to screen readers, so the type
+ * makes one mandatory: either a visible `label`, or an `aria-label` when the
+ * design calls for a bare radio group.
+ */
+export type RadioGroupFieldProps<T extends FieldValues = FieldValues> = RadioGroupFieldOwnProps<T> & ({
+    label: RenderableLabel;
+    'aria-label'?: string;
+} | {
+    label?: never;
+    'aria-label': string;
+});
+export declare const RadioGroupField: <T extends FieldValues = FieldValues>({ control, name, options, label, description, tooltip, required, disabled, "aria-label": ariaLabelProp }: RadioGroupFieldProps<T>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/radio-group-field/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAa5D,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,oCAAoC,CAAA;AAE3C,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,KAAK,uBAAuB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAClE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAA;IACb,OAAO,EAAE,qBAAqB,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAClE,uBAAuB,CAAC,CAAC,CAAC,GACxB,CACI;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAC1C,CAAA;AAEL,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,0GAUlE,oBAAoB,CAAC,CAAC,CAAC,gCA4EzB,CAAA"}

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

@@ -0,0 +1,32 @@
+'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 })] })) }));
+};

package/dist/esm/components/form/renderable-label.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+/**
+ * A label that actually renders an element. `null`, `undefined` and booleans
+ * are valid ReactNode but produce nothing, so a control typed on bare ReactNode
+ * can satisfy a field's props union and still end up nameless.
+ *
+ * Two cases the type cannot exclude, both caught at runtime by
+ * `hasRenderableLabel`: the empty string (`Exclude<string, ''>` is still
+ * `string`) and a portal (a `ReactPortal` is a perfectly good `ReactNode`).
+ */
+export type RenderableLabel = Exclude<ReactNode, null | undefined | boolean>;
+/**
+ * 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 declare function hasRenderableLabel(label: ReactNode): boolean;
+//# sourceMappingURL=renderable-label.d.ts.map

package/dist/esm/components/form/renderable-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderable-label.d.ts","sourceRoot":"","sources":["../../../../src/components/form/renderable-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE1E;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,CAAA;AAE5E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CA6B5D"}

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

@@ -0,0 +1,54 @@
+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));
+}

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

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+export type SelectFieldProps<T extends FieldValues = FieldValues> = PropsWithChildren & {
+    name: string;
+    label?: ReactNode;
+    tooltip?: string;
+    labelExtra?: React.ReactNode;
+    description?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    control: Control<T>;
+    multi?: boolean;
+    required?: boolean;
+    emptyMessage?: string;
+    onChange?: (value: string | string[]) => void;
+    'data-testid'?: string;
+};
+export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, children, emptyMessage, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,2JAgB9D,gBAAgB,CAAC,CAAC,CAAC,sBAmErB,CAAA"}

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

@@ -0,0 +1,16 @@
+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 { 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, children, emptyMessage = 'No options found.', onChange, ...others }) => {
+    return (_jsx(FormField, { name: name, control: control, ...others, render: ({ field }) => {
+            return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? (_jsxs(MultipleSelect, { onValueChange: (value) => {
+                            field.onChange(value);
+                            onChange?.(value);
+                        }, disabled: disabled, ...field, children: [_jsx(MultipleSelectTrigger, { readOnly: readOnly, children: _jsx(MultipleSelectValue, { placeholder: placeholder }) }), _jsx(MultipleSelectContent, { children: children })] })) : (_jsxs(Select, { onValueChange: (value) => {
+                            field.onChange(value);
+                            onChange?.(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: _jsx(SelectValue, { placeholder: placeholder }) }) }), _jsxs(SelectContent, { children: [_jsx(SelectEmpty, { children: emptyMessage }), children] })] })), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
+        } }));
+};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import { SelectFieldProps } from '../select-field/index.js';
+export type StateFieldProps<T extends FieldValues = FieldValues> = Omit<SelectFieldProps<T>, 'children'> & {
+    countryName?: string;
+    emptyMessage?: string;
+    readOnly?: boolean;
+};
+export declare const StateField: <T extends FieldValues = FieldValues>({ countryName, label, placeholder, emptyMessage, required, readOnly, ...others }: StateFieldProps<T>) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/state-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAsHlD,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI,IAAI,CACrE,gBAAgB,CAAC,CAAC,CAAC,EACnB,UAAU,CACX,GAAG;IACF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,kFAQ7D,eAAe,CAAC,CAAC,CAAC,sBAoBpB,CAAA"}

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

@@ -0,0 +1,35 @@
+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, {})] })) }));
+};

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { Control, FieldValues } from 'react-hook-form';
+export type SwitchFieldProps<T extends FieldValues = FieldValues> = {
+    label?: string;
+    name: string;
+    control: Control<T>;
+    labelExtra?: ReactNode;
+    tooltip?: string;
+    required?: boolean;
+    disabled?: boolean;
+    disabledTooltip?: string;
+    'data-testid'?: string;
+};
+export declare const SwitchField: <T extends FieldValues = FieldValues>({ label, name, control, labelExtra, tooltip, required, disabled, disabledTooltip, "data-testid": dataTestId }: SwitchFieldProps<T>) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/switch-field/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,+GAU9D,gBAAgB,CAAC,CAAC,CAAC,gCAiDrB,CAAA"}

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

@@ -0,0 +1,7 @@
+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, TooltipProvider, 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 }) => (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsx("div", { className: "relative", children: _jsx(FormControl, { children: disabled && disabledTooltip ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "inline-flex w-auto", children: _jsx(Switch, { checked: field.value, onCheckedChange: field.onChange, disabled: disabled }) }) }), _jsx(TooltipContent, { children: disabledTooltip })] }) })) : (_jsx(Switch, { checked: field.value, onCheckedChange: field.onChange, disabled: disabled, "data-testid": dataTestId })) }) }), _jsx(FormMessage, {})] })) }));
+};

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

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { Control, FieldValues, Path } from 'react-hook-form';
+import { type RenderableLabel } from '../../../components/form/renderable-label.js';
+type TextareaFieldOwnProps<T extends FieldValues = FieldValues> = {
+    control: Control<T>;
+    name: Path<T>;
+    description?: ReactNode;
+    placeholder?: string;
+    tooltip?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    rows?: number;
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * A control with no accessible name is invisible to screen readers, so the type
+ * makes one mandatory: either a visible `label`, or an `aria-label` when the
+ * design calls for a bare textarea.
+ */
+export type TextareaFieldProps<T extends FieldValues = FieldValues> = TextareaFieldOwnProps<T> & ({
+    label: RenderableLabel;
+    'aria-label'?: string;
+} | {
+    label?: never;
+    'aria-label': string;
+});
+export declare const TextareaField: <T extends FieldValues = FieldValues>({ control, name, label, description, placeholder, tooltip, required, disabled, readOnly, rows, className, "data-testid": dataTestId, "aria-label": ariaLabelProp }: TextareaFieldProps<T>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/textarea-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAY5D,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,oCAAoC,CAAA;AAE3C,KAAK,qBAAqB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAChE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAChE,qBAAqB,CAAC,CAAC,CAAC,GACtB,CACI;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAC1C,CAAA;AAEL,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,oKAchE,kBAAkB,CAAC,CAAC,CAAC,gCAkDvB,CAAA"}

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

@@ -0,0 +1,19 @@
+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 })] })) }));
+};

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

@@ -0,0 +1,4 @@
+export declare function PageRoot({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+export declare function PageView({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+export declare function PageContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page/index.tsx"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ5E;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B"}

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

@@ -0,0 +1,11 @@
+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, ...props }) {
+    return (_jsx("div", { "data-slot": "page-content", className: cn('flex grow flex-col overflow-y-auto p-16', className), ...props }));
+}

package/dist/esm/components/page-header/index.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export declare function PageHeaderActionButtons({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+export declare function PageHeaderWrapper({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
+type PageHeaderProps = {
+    children: ReactNode;
+    className?: string;
+};
+export declare function PageHeader({ children, className }: PageHeaderProps): import("react").JSX.Element;
+export type PageHeaderInfoTitleProps = {
+    title: string;
+    subtitle?: string;
+    subtitleCopyToClipboard?: boolean;
+    className?: string;
+    children?: ReactNode;
+};
+export declare function PageHeaderInfoTitle({ title, subtitle, className, children }: PageHeaderInfoTitleProps): import("react").JSX.Element;
+export type PageHeaderInfoTooltipProps = {
+    subtitle: string;
+};
+export declare function PageHeaderInfoTooltip({ subtitle }: PageHeaderInfoTooltipProps): import("react").JSX.Element;
+export type PageHeaderCollapsibleInfoTriggerProps = {
+    question: string;
+};
+export declare function PageHeaderCollapsibleInfoTrigger({ question }: PageHeaderCollapsibleInfoTriggerProps): import("react").JSX.Element;
+export type PageHeaderCollapsibleInfoProps = {
+    question?: string;
+    answer?: string;
+    seeMore?: string;
+    href?: string;
+};
+export declare function PageHeaderCollapsibleInfo({ question, answer, seeMore, href }: PageHeaderCollapsibleInfoProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/page-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAA;AAmBtE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAc7B;AAED,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,+BAgBlE;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,wBAAwB,+BAmB1B;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACT,EAAE,0BAA0B,+BA8B5B;AAED,MAAM,MAAM,qCAAqC,GAAG;IAClD,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,gCAAgC,CAAC,EAC/C,QAAQ,EACT,EAAE,qCAAqC,+BAavC;AAED,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACL,EAAE,8BAA8B,+BAyChC"}