@pickle-ui/react-native 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/components/form/Checkbox.d.ts

@@ -0,0 +1,26 @@
+import { Pressable } from 'react-native';
+export type CheckboxProps = Omit<React.ComponentProps<typeof Pressable>, 'children' | 'disabled'> & {
+    checked?: boolean;
+    /** Class overrides for the row around the box and label, the check and the label. */
+    classNames?: {
+        field?: string;
+        indicator?: string;
+        label?: string;
+    };
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    /** Shows a minus instead of the check, for a partly selected group. */
+    indeterminate?: boolean;
+    /** Marks the value as invalid, like the web's `aria-invalid`. */
+    invalid?: boolean;
+    /** Text next to the box; pressing it toggles the checkbox and names it. */
+    label?: React.ReactNode;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: 'md' | 'sm';
+};
+/**
+ * A checkbox, like `Checkbox` in @pickle-ui/react. Give it a `label`, or an
+ * `accessibilityLabel` when visible text elsewhere names it.
+ */
+export declare function Checkbox({ accessibilityState, checked: checkedProp, className, classNames, defaultChecked, disabled, indeterminate, invalid, label, onCheckedChange, size, ...props }: CheckboxProps): import("react").JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/form/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAsBrD,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,UAAU,GAAG,UAAU,CACxB,GAAG;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qFAAqF;IACrF,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,kBAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,SAAS,EACT,UAAU,EACV,cAAsB,EACtB,QAAgB,EAChB,aAAqB,EACrB,OAAe,EACf,KAAK,EACL,eAAe,EACf,IAAW,EACX,GAAG,KAAK,EACT,EAAE,aAAa,+BAkFf"}

package/dist/components/form/Checkbox.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Text, View } from 'react-native';
+import { cn } from '../../lib/cn';
+import { useControllableState } from '../_internal/useControllableState';
+// Same box sizes as `Checkbox` in @pickle-ui/react. `hitSlop` stretches the
+// box to a 44pt touch target, vertically only when a label already widens it.
+const boxClasses = { md: 'size-4.5', sm: 'size-3.5' };
+const boxHitSlop = { md: 13, sm: 15 };
+const fieldHitSlop = {
+    md: { bottom: 13, top: 13 },
+    sm: { bottom: 15, top: 15 },
+};
+// The web draws Tabler's check and minus icons. Without SVG, the check is the
+// bottom and right borders of a rotated box, and the minus a bar.
+const checkClasses = {
+    md: 'h-[9px] w-[5px] border-b-[1.5px] border-r-[1.5px]',
+    sm: 'h-[7px] w-[4px] border-b-[1.25px] border-r-[1.25px]',
+};
+const minusClasses = { md: 'h-[1.5px] w-2', sm: 'h-[1.25px] w-1.5' };
+/**
+ * A checkbox, like `Checkbox` in @pickle-ui/react. Give it a `label`, or an
+ * `accessibilityLabel` when visible text elsewhere names it.
+ */
+export function Checkbox({ accessibilityState, checked: checkedProp, className, classNames, defaultChecked = false, disabled = false, indeterminate = false, invalid = false, label, onCheckedChange, size = 'md', ...props }) {
+    const [checked, setChecked] = useControllableState(checkedProp, defaultChecked, onCheckedChange);
+    const filled = checked && !indeterminate;
+    const box = (_jsx(View, { className: cn('items-center justify-center rounded-[4px] border shadow-xs shadow-black/5', boxClasses[size], 
+        // A checked box is filled in both themes, so the dark input
+        // background must not apply to it.
+        filled
+            ? 'border-primary bg-primary'
+            : cn('border-input bg-background dark:bg-input/32', invalid && 'border-destructive/36'), (checked || indeterminate || invalid || disabled) && 'shadow-none', disabled && 'opacity-64', className), children: indeterminate ? (_jsx(View, { className: cn('bg-foreground rounded-full', minusClasses[size], classNames?.indicator) })) : checked ? (_jsx(View, { className: cn('border-primary-foreground -mt-px rotate-45', checkClasses[size], classNames?.indicator) })) : null }));
+    return (_jsxs(Pressable, { accessibilityState: {
+            ...accessibilityState,
+            checked: indeterminate ? 'mixed' : checked,
+            disabled,
+        }, "aria-checked": indeterminate ? 'mixed' : checked, "aria-disabled": disabled, className: label
+            ? cn('flex-row items-center gap-2', classNames?.field)
+            : 'self-start', disabled: disabled, hitSlop: label ? fieldHitSlop[size] : boxHitSlop[size], onPress: () => setChecked(!checked), role: "checkbox", ...props, children: [box, label ? (_jsx(Text, { className: cn('text-foreground text-sm leading-none font-medium', disabled && 'opacity-50', classNames?.label), children: label })) : null] }));
+}
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/form/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/form/Checkbox.tsx"],"names":[],"mappings":"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"}

package/dist/components/form/Form.context.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import { type UseFormReturn } from 'react-hook-form';
+export type FormFieldContextValue = {
+    /** The field's label, used as its control's accessibility label when it is text. */
+    label?: ReactNode;
+    /** The `nativeID` of the field's label, for `aria-labelledby`. */
+    labelId?: string;
+    name?: string;
+    /** Registers the control the label focuses when pressed. */
+    setControl: (control: FocusTarget | null) => void;
+};
+type FocusTarget = {
+    focus: () => void;
+};
+export declare const FormFieldContext: import("react").Context<FormFieldContextValue | null>;
+/** True inside `Form.InputGroup`, where `Form.Input` renders `InputGroup.Input`. */
+export declare const FormInputGroupContext: import("react").Context<boolean>;
+/** Submits the form, like pressing a submit button or Enter on the web. */
+export declare const FormSubmitContext: import("react").Context<() => void>;
+export declare function getErrorMessage(error: unknown): ReactNode;
+/**
+ * React Hook Form tracks field state but has no DOM to label: this maps the
+ * current `Form.Field` onto its control, naming it by the field's label and
+ * marking it `invalid` while the field has an error.
+ */
+export declare function useFormControlProps(): {
+    accessibilityLabel: string | undefined;
+    'aria-labelledby': string | undefined;
+    invalid: boolean;
+};
+export declare function useFormMethods(): UseFormReturn;
+export declare function useRequiredFieldName(name: string | undefined, componentName: string): string;
+export {};
+//# sourceMappingURL=Form.context.d.ts.map

package/dist/components/form/Form.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.context.d.ts","sourceRoot":"","sources":["../../../src/components/form/Form.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAO,MAAM,OAAO,CAAC;AAC3E,OAAO,EAEL,KAAK,aAAa,EAEnB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,qBAAqB,GAAG;IAClC,oFAAoF;IACpF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEzC,eAAO,MAAM,gBAAgB,uDAE5B,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,qBAAqB,kCAAuB,CAAC;AAE1D,2EAA2E;AAC3E,eAAO,MAAM,iBAAiB,gCAAuB,IAAI,CAAW,CAAC;AAErE,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,CAUzD;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB;;;;EAiBlC;AAED,wBAAgB,cAAc,kBAU7B;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,aAAa,EAAE,MAAM,UAWtB"}

package/dist/components/form/Form.context.js

@@ -0,0 +1,53 @@
+import { createContext, isValidElement, use } from 'react';
+import { useFormContext, useFormState, } from 'react-hook-form';
+export const FormFieldContext = createContext(null);
+/** True inside `Form.InputGroup`, where `Form.Input` renders `InputGroup.Input`. */
+export const FormInputGroupContext = createContext(false);
+/** Submits the form, like pressing a submit button or Enter on the web. */
+export const FormSubmitContext = createContext(() => { });
+export function getErrorMessage(error) {
+    if (!error || typeof error !== 'object')
+        return undefined;
+    const message = error.message;
+    return isValidElement(message) ||
+        typeof message === 'string' ||
+        typeof message === 'number'
+        ? message
+        : undefined;
+}
+/**
+ * React Hook Form tracks field state but has no DOM to label: this maps the
+ * current `Form.Field` onto its control, naming it by the field's label and
+ * marking it `invalid` while the field has an error.
+ */
+export function useFormControlProps() {
+    const field = use(FormFieldContext);
+    const { control, getFieldState } = useFormMethods();
+    const name = field?.name;
+    const formState = useFormState({
+        control,
+        disabled: !name,
+        exact: true,
+        name,
+    });
+    return {
+        accessibilityLabel: typeof field?.label === 'string' ? field.label : undefined,
+        'aria-labelledby': field?.labelId,
+        invalid: name ? getFieldState(name, formState).invalid : false,
+    };
+}
+export function useFormMethods() {
+    const methods = useFormContext();
+    if (!methods) {
+        throw new Error('Form components must be rendered inside <Form form={form}>.');
+    }
+    return methods;
+}
+export function useRequiredFieldName(name, componentName) {
+    const fieldName = name ?? use(FormFieldContext)?.name;
+    if (!fieldName) {
+        throw new Error(`${componentName} requires a name prop or a parent <Form.Field name="...">.`);
+    }
+    return fieldName;
+}
+//# sourceMappingURL=Form.context.js.map

package/dist/components/form/Form.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.context.js","sourceRoot":"","sources":["../../../src/components/form/Form.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAkB,GAAG,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EACL,cAAc,EAEd,YAAY,GACb,MAAM,iBAAiB,CAAC;AAczB,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAC3C,IAAI,CACL,CAAC;AAEF,oFAAoF;AACpF,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;AAE1D,2EAA2E;AAC3E,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAa,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;AAErE,MAAM,UAAU,eAAe,CAAC,KAAc;IAC5C,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,SAAS,CAAC;IAE1D,MAAM,OAAO,GAAI,KAA+B,CAAC,OAAO,CAAC;IAEzD,OAAO,cAAc,CAAC,OAAO,CAAC;QAC5B,OAAO,OAAO,KAAK,QAAQ;QAC3B,OAAO,OAAO,KAAK,QAAQ;QAC3B,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,SAAS,CAAC;AAChB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB;IACjC,MAAM,KAAK,GAAG,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACpC,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,cAAc,EAAE,CAAC;IACpD,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,CAAC;IACzB,MAAM,SAAS,GAAG,YAAY,CAAC;QAC7B,OAAO;QACP,QAAQ,EAAE,CAAC,IAAI;QACf,KAAK,EAAE,IAAI;QACX,IAAI;KACL,CAAC,CAAC;IAEH,OAAO;QACL,kBAAkB,EAChB,OAAO,KAAK,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QAC5D,iBAAiB,EAAE,KAAK,EAAE,OAAO;QACjC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;KAC/D,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,MAAM,OAAO,GAAG,cAAc,EAA0B,CAAC;IAEzD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,6DAA6D,CAC9D,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,oBAAoB,CAClC,IAAwB,EACxB,aAAqB;IAErB,MAAM,SAAS,GAAG,IAAI,IAAI,GAAG,CAAC,gBAAgB,CAAC,EAAE,IAAI,CAAC;IAEtD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,MAAM,IAAI,KAAK,CACb,GAAG,aAAa,4DAA4D,CAC7E,CAAC;IACJ,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/components/form/Form.d.ts

@@ -0,0 +1,33 @@
+import { type ButtonProps } from '../Button';
+import { FormCheckbox, type FormCheckboxProps } from './FormCheckbox';
+import { FormDescription, type FormDescriptionProps } from './FormDescription';
+import { FormError, type FormErrorProps } from './FormError';
+import { FormField, type FormFieldProps } from './FormField';
+import { FormInput, type FormInputProps } from './FormInput';
+import { FormInputGroup, type FormInputGroupProps } from './FormInputGroup';
+import { FormLabel, type FormLabelProps } from './FormLabel';
+import { type FormRadioGroupProps } from './FormRadioGroup';
+import { type FormProps, FormRoot } from './FormRoot';
+import { FormTextarea, type FormTextareaProps } from './FormTextarea';
+/**
+ * A `Button` that submits the form when pressed, like the web's submit
+ * button. Pass `onPress` to give it another action.
+ */
+declare function FormButton({ onPress, ...props }: ButtonProps): import("react").JSX.Element;
+declare const Form: typeof FormRoot & {
+    Button: typeof FormButton;
+    Checkbox: typeof FormCheckbox;
+    Description: typeof FormDescription;
+    Error: typeof FormError;
+    Field: typeof FormField;
+    Input: typeof FormInput;
+    InputGroup: typeof FormInputGroup;
+    Label: typeof FormLabel;
+    RadioGroup: (({ name: nameProp, onValueChange, ...props }: FormRadioGroupProps) => import("react").JSX.Element) & {
+        Item: typeof import("./RadioGroup").RadioGroupItem;
+    };
+    Textarea: typeof FormTextarea;
+};
+export { Form };
+export type { FormCheckboxProps, FormDescriptionProps, FormErrorProps, FormFieldProps, FormInputGroupProps, FormInputProps, FormLabelProps, FormProps, FormRadioGroupProps, FormTextareaProps, };
+//# sourceMappingURL=Form.d.ts.map

package/dist/components/form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,KAAK,SAAS,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtE;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAIrD;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAWR,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EACV,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,cAAc,EACd,SAAS,EACT,mBAAmB,EACnB,iBAAiB,GAClB,CAAC"}

package/dist/components/form/Form.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from 'react';
+import { Button } from '../Button';
+import { FormSubmitContext } from './Form.context';
+import { FormCheckbox } from './FormCheckbox';
+import { FormDescription } from './FormDescription';
+import { FormError } from './FormError';
+import { FormField } from './FormField';
+import { FormInput } from './FormInput';
+import { FormInputGroup } from './FormInputGroup';
+import { FormLabel } from './FormLabel';
+import { FormRadioGroup } from './FormRadioGroup';
+import { FormRoot } from './FormRoot';
+import { FormTextarea } from './FormTextarea';
+/**
+ * A `Button` that submits the form when pressed, like the web's submit
+ * button. Pass `onPress` to give it another action.
+ */
+function FormButton({ onPress, ...props }) {
+    const submit = use(FormSubmitContext);
+    return _jsx(Button, { onPress: onPress ?? submit, ...props });
+}
+const Form = Object.assign(FormRoot, {
+    Button: FormButton,
+    Checkbox: FormCheckbox,
+    Description: FormDescription,
+    Error: FormError,
+    Field: FormField,
+    Input: FormInput,
+    InputGroup: FormInputGroup,
+    Label: FormLabel,
+    RadioGroup: FormRadioGroup,
+    Textarea: FormTextarea,
+});
+export { Form };
+//# sourceMappingURL=Form.js.map

package/dist/components/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAoB,MAAM,WAAW,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,cAAc,EAA4B,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,cAAc,EAA4B,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAkB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AAEtE;;;GAGG;AACH,SAAS,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAe;IACpD,MAAM,MAAM,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEtC,OAAO,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,IAAI,MAAM,KAAM,KAAK,GAAI,CAAC;AAC3D,CAAC;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IACnC,MAAM,EAAE,UAAU;IAClB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,eAAe;IAC5B,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,cAAc;IAC1B,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,cAAc;IAC1B,QAAQ,EAAE,YAAY;CACvB,CAAC,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/form/FormCheckbox.d.ts

@@ -0,0 +1,7 @@
+import { type CheckboxProps } from './Checkbox';
+export type FormCheckboxProps = Omit<CheckboxProps, 'checked' | 'invalid'> & {
+    name?: string;
+};
+/** A `Checkbox` bound to the field's boolean value. */
+export declare function FormCheckbox({ name: nameProp, onCheckedChange, ...props }: FormCheckboxProps): import("react").JSX.Element;
+//# sourceMappingURL=FormCheckbox.d.ts.map

package/dist/components/form/FormCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormCheckbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAO1D,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,SAAS,CAAC,GAAG;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,uDAAuD;AACvD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EAAE,QAAQ,EACd,eAAe,EACf,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAuBnB"}

package/dist/components/form/FormCheckbox.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useController } from 'react-hook-form';
+import { Checkbox } from './Checkbox';
+import { useFormControlProps, useFormMethods, useRequiredFieldName, } from './Form.context';
+/** A `Checkbox` bound to the field's boolean value. */
+export function FormCheckbox({ name: nameProp, onCheckedChange, ...props }) {
+    const name = useRequiredFieldName(nameProp, 'Form.Checkbox');
+    const { control } = useFormMethods();
+    const { field } = useController({
+        control,
+        defaultValue: props.defaultChecked ?? false,
+        name,
+    });
+    const { accessibilityLabel, invalid } = useFormControlProps();
+    return (_jsx(Checkbox
+    // A `label` already names the checkbox.
+    , { 
+        // A `label` already names the checkbox.
+        accessibilityLabel: props.label ? undefined : accessibilityLabel, ...props, checked: Boolean(field.value), invalid: invalid, onCheckedChange: (checked) => {
+            field.onChange(checked);
+            onCheckedChange?.(checked);
+        } }));
+}
+//# sourceMappingURL=FormCheckbox.js.map

package/dist/components/form/FormCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormCheckbox.js","sourceRoot":"","sources":["../../../src/components/form/FormCheckbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AAMxB,uDAAuD;AACvD,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,EAAE,QAAQ,EACd,eAAe,EACf,GAAG,KAAK,EACU;IAClB,MAAM,IAAI,GAAG,oBAAoB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;IAC7D,MAAM,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,CAAC;QAC9B,OAAO;QACP,YAAY,EAAE,KAAK,CAAC,cAAc,IAAI,KAAK;QAC3C,IAAI;KACL,CAAC,CAAC;IACH,MAAM,EAAE,kBAAkB,EAAE,OAAO,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAE9D,OAAO,CACL,KAAC,QAAQ;IACP,wCAAwC;;QAAxC,wCAAwC;QACxC,kBAAkB,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,KAC5D,KAAK,EACT,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,EAC7B,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,CAAC,OAAO,EAAE,EAAE;YAC3B,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YACxB,eAAe,EAAE,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC,GACD,CACH,CAAC;AACJ,CAAC"}

package/dist/components/form/FormDescription.d.ts

@@ -0,0 +1,4 @@
+import { Text } from 'react-native';
+export type FormDescriptionProps = React.ComponentProps<typeof Text>;
+export declare function FormDescription({ className, ...props }: FormDescriptionProps): import("react").JSX.Element;
+//# sourceMappingURL=FormDescription.d.ts.map

package/dist/components/form/FormDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDescription.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAErE,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAO5E"}

package/dist/components/form/FormDescription.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'react-native';
+import { cn } from '../../lib/cn';
+export function FormDescription({ className, ...props }) {
+    return (_jsx(Text, { className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+//# sourceMappingURL=FormDescription.js.map

package/dist/components/form/FormDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDescription.js","sourceRoot":"","sources":["../../../src/components/form/FormDescription.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAIlC,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwB;IAC3E,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}

package/dist/components/form/FormError.d.ts

@@ -0,0 +1,5 @@
+import { Text } from 'react-native';
+export type FormErrorProps = React.ComponentProps<typeof Text>;
+/** Announced by screen readers when it appears, like the web's live error. */
+export declare function FormError({ className, ...props }: FormErrorProps): import("react").JSX.Element;
+//# sourceMappingURL=FormError.d.ts.map

package/dist/components/form/FormError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormError.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormError.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAE/D,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAShE"}

package/dist/components/form/FormError.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'react-native';
+import { cn } from '../../lib/cn';
+/** Announced by screen readers when it appears, like the web's live error. */
+export function FormError({ className, ...props }) {
+    return (_jsx(Text, { accessibilityLiveRegion: "polite", className: cn('text-destructive text-sm font-medium', className), role: "alert", ...props }));
+}
+//# sourceMappingURL=FormError.js.map

package/dist/components/form/FormError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormError.js","sourceRoot":"","sources":["../../../src/components/form/FormError.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAIlC,8EAA8E;AAC9E,MAAM,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IAC/D,OAAO,CACL,KAAC,IAAI,IACH,uBAAuB,EAAC,QAAQ,EAChC,SAAS,EAAE,EAAE,CAAC,sCAAsC,EAAE,SAAS,CAAC,EAChE,IAAI,EAAC,OAAO,KACR,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}

package/dist/components/form/FormField.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import { View } from 'react-native';
+export type FormFieldProps = Omit<React.ComponentProps<typeof View>, 'children'> & {
+    children: ReactNode;
+    description?: ReactNode;
+    /** Replaces the error message React Hook Form holds for the field. */
+    error?: ReactNode;
+    /** Names the control and focuses it when pressed, like the web's `<label>`. */
+    label?: ReactNode;
+    name?: string;
+};
+/**
+ * A labelled field bound to `name`, like `Form.Field` in @pickle-ui/react:
+ * the label, the control, then the field's error or its description.
+ */
+export declare function FormField({ children, className, description, error, label, name, ...props }: FormFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=FormField.d.ts.map

package/dist/components/form/FormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA0B,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAYpC,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EACjC,UAAU,CACX,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,+BA0ChB"}

package/dist/components/form/FormField.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef } from 'react';
+import { useFormState } from 'react-hook-form';
+import { View } from 'react-native';
+import { cn } from '../../lib/cn';
+import { FormFieldContext, getErrorMessage, useFormMethods, } from './Form.context';
+import { FormDescription } from './FormDescription';
+import { FormError } from './FormError';
+import { FormLabel } from './FormLabel';
+/**
+ * A labelled field bound to `name`, like `Form.Field` in @pickle-ui/react:
+ * the label, the control, then the field's error or its description.
+ */
+export function FormField({ children, className, description, error, label, name, ...props }) {
+    const { control, getFieldState } = useFormMethods();
+    const formState = useFormState({
+        control,
+        disabled: !name,
+        exact: true,
+        name,
+    });
+    const fieldError = name ? getFieldState(name, formState).error : undefined;
+    const errorMessage = error ?? getErrorMessage(fieldError);
+    const labelId = useId();
+    const controlRef = useRef(null);
+    const context = useMemo(() => ({
+        label,
+        labelId: label ? labelId : undefined,
+        name,
+        setControl: (target) => {
+            controlRef.current = target;
+        },
+    }), [label, labelId, name]);
+    return (_jsxs(View, { className: cn('gap-2.5', className), ...props, children: [label ? (_jsx(FormLabel, { nativeID: labelId, onPress: () => controlRef.current?.focus(), children: label })) : null, _jsx(FormFieldContext, { value: context, children: children }), errorMessage ? (_jsx(FormError, { children: errorMessage })) : description ? (_jsx(FormDescription, { children: description })) : null] }));
+}
+//# sourceMappingURL=FormField.js.map

package/dist/components/form/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/form/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAexC;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACO;IACf,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,cAAc,EAAE,CAAC;IACpD,MAAM,SAAS,GAAG,YAAY,CAAC;QAC7B,OAAO;QACP,QAAQ,EAAE,CAAC,IAAI;QACf,KAAK,EAAE,IAAI;QACX,IAAI;KACL,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3E,MAAM,YAAY,GAAG,KAAK,IAAI,eAAe,CAAC,UAAU,CAAC,CAAC;IAC1D,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,UAAU,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,CAAC;QACL,KAAK;QACL,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QACpC,IAAI;QACJ,UAAU,EAAE,CAAC,MAAoC,EAAE,EAAE;YACnD,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC;QAC9B,CAAC;KACF,CAAC,EACF,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,CACvB,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,KAAK,aACjD,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,SAAS,IACR,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,YAEzC,KAAK,GACI,CACb,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,gBAAgB,IAAC,KAAK,EAAE,OAAO,YAAG,QAAQ,GAAoB,EAC9D,YAAY,CAAC,CAAC,CAAC,CACd,KAAC,SAAS,cAAE,YAAY,GAAa,CACtC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,KAAC,eAAe,cAAE,WAAW,GAAmB,CACjD,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC"}

package/dist/components/form/FormInput.d.ts

@@ -0,0 +1,10 @@
+import { type InputProps } from './Input';
+export type FormInputProps = Omit<InputProps, 'defaultValue' | 'invalid' | 'value'> & {
+    name?: string;
+};
+/**
+ * An `Input` bound to the field's value. The return key submits the form,
+ * like Enter on the web, unless `onSubmitEditing` is set.
+ */
+export declare function FormInput({ name: nameProp, onBlur, onChangeText, onSubmitEditing, ref, ...props }: FormInputProps): import("react").JSX.Element;
+//# sourceMappingURL=FormInput.d.ts.map

package/dist/components/form/FormInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormInput.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormInput.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAGjD,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,UAAU,EACV,cAAc,GAAG,SAAS,GAAG,OAAO,CACrC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAItB;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,eAAe,EACf,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BAoChB"}

package/dist/components/form/FormInput.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use, useImperativeHandle, useRef } from 'react';
+import { useController } from 'react-hook-form';
+import { FormFieldContext, FormInputGroupContext, FormSubmitContext, useFormControlProps, useFormMethods, useRequiredFieldName, } from './Form.context';
+import { Input } from './Input';
+import { InputGroup } from './InputGroup';
+/**
+ * An `Input` bound to the field's value. The return key submits the form,
+ * like Enter on the web, unless `onSubmitEditing` is set.
+ */
+export function FormInput({ name: nameProp, onBlur, onChangeText, onSubmitEditing, ref, ...props }) {
+    const name = useRequiredFieldName(nameProp, 'Form.Input');
+    const { control } = useFormMethods();
+    const { field } = useController({ control, name });
+    const controlProps = useFormControlProps();
+    const fieldContext = use(FormFieldContext);
+    const isInsideInputGroup = use(FormInputGroupContext);
+    const submit = use(FormSubmitContext);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    const InputComponent = isInsideInputGroup ? InputGroup.Input : Input;
+    return (_jsx(InputComponent, { ...controlProps, ...props, onBlur: (event) => {
+            field.onBlur();
+            onBlur?.(event);
+        }, onChangeText: (text) => {
+            field.onChange(text);
+            onChangeText?.(text);
+        }, onSubmitEditing: onSubmitEditing ?? submit, ref: (node) => {
+            inputRef.current = node;
+            // React Hook Form focuses the first invalid field after a submit,
+            // and the field's label focuses its input when pressed.
+            field.ref(node);
+            fieldContext?.setControl(node);
+        }, value: field.value ?? '' }));
+}
+//# sourceMappingURL=FormInput.js.map

package/dist/components/form/FormInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormInput.js","sourceRoot":"","sources":["../../../src/components/form/FormInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,cAAc,EACd,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAS1C;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,eAAe,EACf,GAAG,EACH,GAAG,KAAK,EACO;IACf,MAAM,IAAI,GAAG,oBAAoB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAC1D,MAAM,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,mBAAmB,EAAE,CAAC;IAC3C,MAAM,YAAY,GAAG,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC3C,MAAM,kBAAkB,GAAG,GAAG,CAAC,qBAAqB,CAAC,CAAC;IACtD,MAAM,MAAM,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACxD,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAA4B,CAAC,CAAC;IAEtE,MAAM,cAAc,GAAG,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAErE,OAAO,CACL,KAAC,cAAc,OACT,YAAY,KACZ,KAAK,EACT,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,EACD,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;YACrB,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YACrB,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC,EACD,eAAe,EAAE,eAAe,IAAI,MAAM,EAC1C,GAAG,EAAE,CAAC,IAA8B,EAAE,EAAE;YACtC,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;YACxB,kEAAkE;YAClE,wDAAwD;YACxD,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAChB,YAAY,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,GACxB,CACH,CAAC;AACJ,CAAC"}

package/dist/components/form/FormInputGroup.d.ts

@@ -0,0 +1,8 @@
+import { InputGroup } from './InputGroup';
+export type FormInputGroupProps = React.ComponentProps<typeof InputGroup>;
+/**
+ * An `InputGroup` whose `Form.Input` renders `InputGroup.Input`, framed as
+ * invalid while the field has an error.
+ */
+export declare function FormInputGroup({ children, ...props }: FormInputGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=FormInputGroup.d.ts.map

package/dist/components/form/FormInputGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormInputGroup.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormInputGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAE1E;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,+BAgBzE"}

package/dist/components/form/FormInputGroup.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
+import { FormInputGroupContext, useFormControlProps } from './Form.context';
+import { FormInput } from './FormInput';
+import { InputGroup } from './InputGroup';
+import { InputGroupStateContext } from './InputGroup.context';
+/**
+ * An `InputGroup` whose `Form.Input` renders `InputGroup.Input`, framed as
+ * invalid while the field has an error.
+ */
+export function FormInputGroup({ children, ...props }) {
+    const { invalid } = useFormControlProps();
+    const disabled = Children.toArray(children).some((child) => isValidElement(child) &&
+        child.type === FormInput &&
+        Boolean(child.props.disabled));
+    return (_jsx(FormInputGroupContext, { value: true, children: _jsx(InputGroupStateContext, { value: { disabled, invalid }, children: _jsx(InputGroup, { ...props, children: children }) }) }));
+}
+//# sourceMappingURL=FormInputGroup.js.map

package/dist/components/form/FormInputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormInputGroup.js","sourceRoot":"","sources":["../../../src/components/form/FormInputGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAI9D;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB;IACxE,MAAM,EAAE,OAAO,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAC1C,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC9C,CAAC,KAAK,EAAE,EAAE,CACR,cAAc,CAAiB,KAAK,CAAC;QACrC,KAAK,CAAC,IAAI,KAAK,SAAS;QACxB,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAChC,CAAC;IAEF,OAAO,CACL,KAAC,qBAAqB,IAAC,KAAK,kBAC1B,KAAC,sBAAsB,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,YAClD,KAAC,UAAU,OAAK,KAAK,YAAG,QAAQ,GAAc,GACvB,GACH,CACzB,CAAC;AACJ,CAAC"}

package/dist/components/form/FormLabel.d.ts

@@ -0,0 +1,4 @@
+import { Text } from 'react-native';
+export type FormLabelProps = React.ComponentProps<typeof Text>;
+export declare function FormLabel({ className, ...props }: FormLabelProps): import("react").JSX.Element;
+//# sourceMappingURL=FormLabel.d.ts.map

package/dist/components/form/FormLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAE/D,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAUhE"}

package/dist/components/form/FormLabel.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'react-native';
+import { cn } from '../../lib/cn';
+export function FormLabel({ className, ...props }) {
+    return (_jsx(Text, { className: cn('text-foreground text-sm leading-none font-medium', className), ...props }));
+}
+//# sourceMappingURL=FormLabel.js.map

package/dist/components/form/FormLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormLabel.js","sourceRoot":"","sources":["../../../src/components/form/FormLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAIlC,MAAM,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IAC/D,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,kDAAkD,EAClD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}

package/dist/components/form/FormRadioGroup.d.ts

@@ -0,0 +1,11 @@
+import { type RadioGroupProps } from './RadioGroup';
+export type FormRadioGroupProps = Omit<RadioGroupProps, 'value'> & {
+    name?: string;
+};
+/** A `RadioGroup` bound to the field's value. */
+declare function FormRadioGroupRoot({ name: nameProp, onValueChange, ...props }: FormRadioGroupProps): import("react").JSX.Element;
+declare const FormRadioGroup: typeof FormRadioGroupRoot & {
+    Item: typeof import("./RadioGroup").RadioGroupItem;
+};
+export { FormRadioGroup };
+//# sourceMappingURL=FormRadioGroup.d.ts.map

package/dist/components/form/FormRadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormRadioGroup.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,iDAAiD;AACjD,iBAAS,kBAAkB,CAAC,EAC1B,IAAI,EAAE,QAAQ,EACd,aAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAuBrB;AAED,QAAA,MAAM,cAAc;;CAElB,CAAC;AAEH,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/form/FormRadioGroup.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useController } from 'react-hook-form';
+import { useFormControlProps, useFormMethods, useRequiredFieldName, } from './Form.context';
+import { RadioGroup } from './RadioGroup';
+/** A `RadioGroup` bound to the field's value. */
+function FormRadioGroupRoot({ name: nameProp, onValueChange, ...props }) {
+    const name = useRequiredFieldName(nameProp, 'Form.RadioGroup');
+    const { control } = useFormMethods();
+    const { field } = useController({
+        control,
+        defaultValue: props.defaultValue,
+        name,
+    });
+    const { accessibilityLabel, 'aria-labelledby': labelledBy } = useFormControlProps();
+    return (_jsx(RadioGroup, { accessibilityLabel: accessibilityLabel, "aria-labelledby": labelledBy, ...props, onValueChange: (value) => {
+            field.onChange(value);
+            onValueChange?.(value);
+        }, value: field.value }));
+}
+const FormRadioGroup = Object.assign(FormRadioGroupRoot, {
+    Item: RadioGroup.Item,
+});
+export { FormRadioGroup };
+//# sourceMappingURL=FormRadioGroup.js.map

package/dist/components/form/FormRadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRadioGroup.js","sourceRoot":"","sources":["../../../src/components/form/FormRadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,oBAAoB,GACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAMhE,iDAAiD;AACjD,SAAS,kBAAkB,CAAC,EAC1B,IAAI,EAAE,QAAQ,EACd,aAAa,EACb,GAAG,KAAK,EACY;IACpB,MAAM,IAAI,GAAG,oBAAoB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;IAC/D,MAAM,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,CAAC;QAC9B,OAAO;QACP,YAAY,EAAE,KAAK,CAAC,YAAY;QAChC,IAAI;KACL,CAAC,CAAC;IACH,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,UAAU,EAAE,GACzD,mBAAmB,EAAE,CAAC;IAExB,OAAO,CACL,KAAC,UAAU,IACT,kBAAkB,EAAE,kBAAkB,qBACrB,UAAU,KACvB,KAAK,EACT,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;YACvB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACtB,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,GAClB,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAkB,EAAE;IACvD,IAAI,EAAE,UAAU,CAAC,IAAI;CACtB,CAAC,CAAC;AAEH,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/form/FormRoot.d.ts

@@ -0,0 +1,13 @@
+import { type FieldValues, type SubmitHandler, type UseFormReturn } from 'react-hook-form';
+import { View } from 'react-native';
+export type FormProps<FormValues extends FieldValues = FieldValues> = React.ComponentProps<typeof View> & {
+    form: UseFormReturn<FormValues>;
+    onSubmit?: SubmitHandler<FormValues>;
+};
+/**
+ * React Native has no `<form>`, so the root shares a submit action:
+ * `Form.Button` and the return key in `Form.Input` call it, like a submit
+ * button and Enter on the web.
+ */
+export declare function FormRoot<FormValues extends FieldValues = FieldValues>({ className, form, onSubmit, ...props }: FormProps<FormValues>): import("react").JSX.Element;
+//# sourceMappingURL=FormRoot.d.ts.map

package/dist/components/form/FormRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRoot.d.ts","sourceRoot":"","sources":["../../../src/components/form/FormRoot.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKpC,MAAM,MAAM,SAAS,CAAC,UAAU,SAAS,WAAW,GAAG,WAAW,IAChE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAClC,IAAI,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,CAAC;AAEJ;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,UAAU,SAAS,WAAW,GAAG,WAAW,EAAE,EACrE,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,UAAU,CAAC,+BAYvB"}