@lt-three/love3 0.0.0 → 0.1.1

package/dist/native/form/checkbox.js

@@ -0,0 +1,55 @@
+import { useFieldValue } from "../../shared/form.js";
+import { Checkbox as Checkbox$1 } from "../atom/checkbox.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/form/checkbox.tsx
+/**
+* Checkbox integrated with TanStack Form. Like the web `form/checkbox`,
+* pass `value` / `onValueChange` for controlled mode (the field is not used); omit them to read from the field context.
+*/
+function Checkbox(props) {
+	if (props.value !== void 0 && props.onValueChange !== void 0) return /* @__PURE__ */ jsx(Layout, {
+		...props,
+		checked: props.value,
+		onCheckedChange: props.onValueChange
+	});
+	return /* @__PURE__ */ jsx(FieldCheckbox, { ...props });
+}
+function FieldCheckbox(props) {
+	const [value, setValue] = useFieldValue({ debounce: props.debounce });
+	return /* @__PURE__ */ jsx(Layout, {
+		...props,
+		checked: value ?? false,
+		onCheckedChange: setValue
+	});
+}
+function Layout({ label, required, description, helpText, disabled, className, wrapperClassName, checkboxLabel, checked, onCheckedChange }) {
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			label ? /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx(FormControl, {
+				described: Boolean(description),
+				children: (control) => /* @__PURE__ */ jsx(Checkbox$1, {
+					...control,
+					accessibilityHint: description,
+					checked,
+					onCheckedChange,
+					label: checkboxLabel,
+					disabled,
+					className
+				})
+			}),
+			description ? /* @__PURE__ */ jsx(FormDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Checkbox };

package/dist/native/form/date-picker.d.ts

@@ -0,0 +1,23 @@
+import { FieldInputProps } from "../../shared/form.js";
+//#region src/native/form/date-picker.d.ts
+export type DatePickerProps = FieldInputProps & {
+  mode?: "date" | "time" | "datetime";
+  minimumDate?: Date;
+  maximumDate?: Date;
+  /** Formats the displayed value. Defaults to the locale's date notation. */
+  format?: (value: Date) => string;
+};
+/**
+ * Date/time input integrated with TanStack Form. Corresponds to the web `form/date-picker`.
+ *
+ * The web version shows a react-day-picker calendar in a popover, whereas native uses
+ * the OS-standard picker (`@react-native-community/datetimepicker`).
+ * It follows each OS's convention: a persistent inline spinner on iOS, a dialog opened by tapping on Android.
+ * react-native-web (preview, vitest) has no web implementation in that library, so it is rendered by a
+ * substitute such as `<input type="date">` (`web/datetimepicker.tsx`), with an "OK" shown below as on iOS.
+ *
+ * The value comes from the field context (there is no controlled mode).
+ * The trigger is a **button** that opens the picker; its name is "label, current value" (same as `atom/select`).
+ */
+export declare function DatePicker({ label, required, description, helpText, placeholder, disabled, debounce, className, wrapperClassName, mode, minimumDate, maximumDate, format, "data-testid": testID }: DatePickerProps): import("react").JSX.Element;
+//#endregion

package/dist/native/form/date-picker.js

@@ -0,0 +1,119 @@
+import { useFieldValue } from "../../shared/form.js";
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { tabularNums } from "../lib/typography.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { useId, useState } from "react";
+import { Platform, Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+import DateTimePicker from "@react-native-community/datetimepicker";
+
+//#region src/native/form/date-picker.tsx
+/** Name given to the picker when the date/time input has none (for example when `label` is an element). */
+const PICKER_LABEL = {
+	date: "日付",
+	time: "時刻",
+	datetime: "日時"
+};
+/**
+* Date/time input integrated with TanStack Form. Corresponds to the web `form/date-picker`.
+*
+* The web version shows a react-day-picker calendar in a popover, whereas native uses
+* the OS-standard picker (`@react-native-community/datetimepicker`).
+* It follows each OS's convention: a persistent inline spinner on iOS, a dialog opened by tapping on Android.
+* react-native-web (preview, vitest) has no web implementation in that library, so it is rendered by a
+* substitute such as `<input type="date">` (`web/datetimepicker.tsx`), with an "OK" shown below as on iOS.
+*
+* The value comes from the field context (there is no controlled mode).
+* The trigger is a **button** that opens the picker; its name is "label, current value" (same as `atom/select`).
+*/
+function DatePicker({ label, required, description, helpText, placeholder, disabled, debounce, className, wrapperClassName, mode = "date", minimumDate, maximumDate, format, "data-testid": testID }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	const [open, setOpen] = useState(false);
+	const valueId = `${useId()}-value`;
+	const [openedAt, setOpenedAt] = useState(null);
+	const mutedInk = useTokenColor("--ink-500");
+	const display = value ? format ? format(value) : defaultFormat(value, mode) : placeholder ?? "";
+	const nameText = typeof label === "string" ? label : void 0;
+	const triggerName = nameText !== void 0 ? `${nameText}、${display}` : label ? void 0 : display === "" ? PICKER_LABEL[mode] : `${PICKER_LABEL[mode]}、${display}`;
+	const closesOnChange = Platform.OS === "android";
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			label ? /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx(FormControl, {
+				labelled: Boolean(label),
+				described: Boolean(description),
+				children: (control) => /* @__PURE__ */ jsxs(Pressable, {
+					id: control.id,
+					accessibilityRole: "button",
+					accessibilityLabel: triggerName,
+					accessibilityHint: description,
+					"aria-labelledby": control["aria-labelledby"] === void 0 ? void 0 : `${control["aria-labelledby"]} ${valueId}`,
+					"aria-describedby": control["aria-describedby"],
+					"aria-invalid": control["aria-invalid"] ? true : void 0,
+					"aria-expanded": open,
+					"aria-disabled": disabled,
+					testID,
+					onPress: () => {
+						setOpenedAt(/* @__PURE__ */ new Date());
+						setOpen(true);
+					},
+					disabled,
+					className: cn("h-9 w-full flex-row items-center justify-between rounded-control border bg-raised px-3", control["aria-invalid"] ? "border-destructive" : "border-line-strong", disabled && "opacity-50", className),
+					children: [/* @__PURE__ */ jsx(Text$1, {
+						id: valueId,
+						style: tabularNums,
+						className: cn("font-mono text-sm", value ? "text-foreground" : "text-muted-foreground"),
+						children: display
+					}), /* @__PURE__ */ jsx(Feather, {
+						name: "calendar",
+						size: 14,
+						color: mutedInk
+					})]
+				})
+			}),
+			open && openedAt !== null ? /* @__PURE__ */ jsxs(View, { children: [/* @__PURE__ */ jsx(DateTimePicker, {
+				value: value ?? openedAt,
+				mode,
+				display: Platform.OS === "ios" ? "inline" : "default",
+				minimumDate,
+				maximumDate,
+				accessibilityLabel: nameText ?? PICKER_LABEL[mode],
+				onChange: (event, selected) => {
+					if (closesOnChange) setOpen(false);
+					if (event.type === "dismissed") return;
+					if (selected) setValue(selected);
+				}
+			}), closesOnChange ? null : /* @__PURE__ */ jsx(Pressable, {
+				accessibilityRole: "button",
+				onPress: () => setOpen(false),
+				hitSlop: 8,
+				className: "self-end py-2",
+				children: /* @__PURE__ */ jsx(Text$1, {
+					className: "text-action-ink text-sm font-medium",
+					children: "OK"
+				})
+			})] }) : null,
+			description ? /* @__PURE__ */ jsx(FormDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+function defaultFormat(value, mode) {
+	if (mode === "time") return value.toLocaleTimeString(void 0, {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+	if (mode === "datetime") return value.toLocaleString();
+	return value.toLocaleDateString();
+}
+
+//#endregion
+export { DatePicker };

package/dist/native/form/form.d.ts

@@ -0,0 +1,22 @@
+import { ButtonProps } from "../atom/button.js";
+import { FieldInputProps } from "../../shared/form.js";
+import { ReactNode } from "react";
+//#region src/native/form/form.d.ts
+export type SubmitButtonProps = Omit<ButtonProps, "onPress"> & {
+  children: ReactNode;
+  /** Allow submitting even when the value is still the initial one. */
+  allowDefaultValue?: boolean;
+};
+/**
+ * The form's submit button. It is disabled under the same conditions while submitting, unchanged, or failing validation
+ * (register it in `createFormHook`'s `formComponents` and use it as `form.SubmitButton`).
+ * The web side of love3 has no counterpart yet.
+ */
+export declare function SubmitButton({ disabled, allowDefaultValue, children, ...props }: SubmitButtonProps): import("react").JSX.Element;
+/**
+ * Wrapper for array fields (label, children, supplementary text, error). Renders `description` as well.
+ */
+export declare function ArrayFields({ label, required, description, children }: Pick<FieldInputProps, "label" | "required" | "description"> & {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion

package/dist/native/form/form.js

@@ -0,0 +1,44 @@
+import { useFormContext } from "../../shared/form.js";
+import { Button } from "../atom/button.js";
+import { FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/form/form.tsx
+/**
+* The form's submit button. It is disabled under the same conditions while submitting, unchanged, or failing validation
+* (register it in `createFormHook`'s `formComponents` and use it as `form.SubmitButton`).
+* The web side of love3 has no counterpart yet.
+*/
+function SubmitButton({ disabled, allowDefaultValue = false, children, ...props }) {
+	const form = useFormContext();
+	return /* @__PURE__ */ jsx(form.Subscribe, {
+		selector: (state) => [
+			state.isSubmitting,
+			state.canSubmit,
+			state.isDefaultValue
+		],
+		children: ([isSubmitting, canSubmit, isDefaultValue]) => /* @__PURE__ */ jsx(Button, {
+			...props,
+			onPress: () => void form.handleSubmit(),
+			disabled: isSubmitting || !canSubmit || !allowDefaultValue && isDefaultValue || disabled,
+			children
+		})
+	});
+}
+/**
+* Wrapper for array fields (label, children, supplementary text, error). Renders `description` as well.
+*/
+function ArrayFields({ label, required, description, children }) {
+	return /* @__PURE__ */ jsxs(FormItem, { children: [
+		label ? /* @__PURE__ */ jsx(FormLabel, {
+			required,
+			children: label
+		}) : null,
+		children,
+		description ? /* @__PURE__ */ jsx(FormDescription, { children: description }) : null,
+		/* @__PURE__ */ jsx(FormMessage, {})
+	] });
+}
+
+//#endregion
+export { ArrayFields, SubmitButton };

package/dist/native/form/radio-group.d.ts

@@ -0,0 +1,23 @@
+import { FieldInputProps } from "../../shared/form.js";
+import { ReactNode } from "react";
+//#region src/native/form/radio-group.d.ts
+export type RadioOption = {
+  value: string;
+  label: string;
+  content?: ReactNode;
+};
+export type RadioGroupProps = FieldInputProps & {
+  options: RadioOption[];
+  /** `list` stacks vertically; `box` lays out horizontally with a 1px border. The same two forms as web. */
+  type?: "list" | "box";
+};
+/**
+ * Radio group integrated with TanStack Form. Corresponds to the web `form/radio-group`.
+ *
+ * The knob is a 16px **circle** (same as web; `rounded-full`): unselected has a line-control border, selected has an indigo border and a center dot.
+ *
+ * The group is a `radiogroup` named by its label (`aria-labelledby`). Each option is a `radio` (named by the option's `label`),
+ * and each option points to the description and the error (one field holds several inputs, so ids are separated per option).
+ */
+export declare function RadioGroup({ label, required, description, helpText, wrapperClassName, ...rest }: RadioGroupProps): import("react").JSX.Element;
+//#endregion

package/dist/native/form/radio-group.js

@@ -0,0 +1,88 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { activateOnSpace } from "../lib/keyboard.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage, useFormField } from "../base/form.js";
+import { useId } from "react";
+import { Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/form/radio-group.tsx
+/**
+* Radio group integrated with TanStack Form. Corresponds to the web `form/radio-group`.
+*
+* The knob is a 16px **circle** (same as web; `rounded-full`): unselected has a line-control border, selected has an indigo border and a center dot.
+*
+* The group is a `radiogroup` named by its label (`aria-labelledby`). Each option is a `radio` (named by the option's `label`),
+* and each option points to the description and the error (one field holds several inputs, so ids are separated per option).
+*/
+function RadioGroup({ label, required, description, helpText, wrapperClassName, ...rest }) {
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			label ? /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx(RadioGroupBody, {
+				hasLabel: Boolean(label),
+				description,
+				...rest
+			}),
+			description ? /* @__PURE__ */ jsx(FormDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+function RadioGroupBody({ hasLabel, description, options, disabled, debounce, className, type = "list" }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	const { formItemId, formLabelId, errors } = useFormField();
+	return /* @__PURE__ */ jsx(View, {
+		id: formItemId,
+		accessibilityRole: "radiogroup",
+		"aria-labelledby": hasLabel ? formLabelId : void 0,
+		"aria-invalid": errors.length > 0,
+		className: cn(type === "box" ? "flex-row flex-wrap gap-2" : "gap-1", className),
+		children: options.map((option) => /* @__PURE__ */ jsx(RadioOption, {
+			option,
+			type,
+			selected: option.value === value,
+			disabled,
+			description,
+			onSelect: () => setValue(option.value)
+		}, option.value))
+	});
+}
+function RadioOption({ option, type, selected, disabled, description, onSelect }) {
+	const id = useId();
+	return /* @__PURE__ */ jsx(FormControl, {
+		id,
+		described: Boolean(description),
+		children: (control) => /* @__PURE__ */ jsxs(Pressable, {
+			...control,
+			accessibilityRole: "radio",
+			accessibilityLabel: option.label,
+			accessibilityHint: description,
+			"aria-checked": selected,
+			"aria-disabled": disabled,
+			onPress: onSelect,
+			onKeyDown: activateOnSpace(onSelect, disabled),
+			disabled,
+			className: cn("flex-row items-center gap-2 py-1", type === "box" && "rounded-control border px-3", type === "box" && (control["aria-invalid"] ? "border-destructive" : "border-line-strong"), disabled && "opacity-50"),
+			children: [/* @__PURE__ */ jsx(View, {
+				className: cn("h-4 w-4 items-center justify-center rounded-full border bg-raised", selected ? "border-action" : "border-line-control"),
+				children: selected ? /* @__PURE__ */ jsx(View, { className: "h-2 w-2 rounded-full bg-action" }) : null
+			}), /* @__PURE__ */ jsxs(View, {
+				className: "shrink gap-1",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					className: "text-sm font-medium leading-none",
+					children: option.label
+				}), option.content]
+			})]
+		})
+	});
+}
+
+//#endregion
+export { RadioGroup };

package/dist/native/form/select.d.ts

@@ -0,0 +1,13 @@
+import { SelectOption, SelectOptionGroup } from "../atom/select.js";
+import { FieldInputProps } from "../../shared/form.js";
+//#region src/native/form/select.d.ts
+export type SelectProps = FieldInputProps & {
+  options: (SelectOption | SelectOptionGroup)[];
+};
+/**
+ * Select integrated with TanStack Form. Same props as the web `form/select` (no controlled mode; use `atom/select` for a controlled version).
+ * The value comes from the field context. The default placeholder is the same as web's, "選択してください" ("Please select").
+ */
+export declare function Select({ label, required, description, helpText, placeholder, disabled, debounce, options, className, wrapperClassName }: SelectProps): import("react").JSX.Element;
+//#endregion
+export type { SelectOption, SelectOptionGroup };

package/dist/native/form/select.js

@@ -0,0 +1,45 @@
+import { useFieldValue } from "../../shared/form.js";
+import { SELECT_PLACEHOLDER_LABEL } from "../lib/labels.js";
+import { Select as Select$1 } from "../atom/select.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/form/select.tsx
+/**
+* Select integrated with TanStack Form. Same props as the web `form/select` (no controlled mode; use `atom/select` for a controlled version).
+* The value comes from the field context. The default placeholder is the same as web's, "選択してください" ("Please select").
+*/
+function Select({ label, required, description, helpText, placeholder = SELECT_PLACEHOLDER_LABEL, disabled, debounce, options, className, wrapperClassName }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			label ? /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx(FormControl, {
+				labelled: Boolean(label),
+				described: Boolean(description),
+				children: (control) => /* @__PURE__ */ jsx(Select$1, {
+					...control,
+					accessibilityLabel: typeof label === "string" ? label : void 0,
+					accessibilityHint: description,
+					sheetTitle: label,
+					value: value ?? "",
+					onValueChange: setValue,
+					options,
+					placeholder,
+					disabled,
+					className
+				})
+			}),
+			description ? /* @__PURE__ */ jsx(FormDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Select };

package/dist/native/form/slider.d.ts

@@ -0,0 +1,14 @@
+import { FieldInputProps } from "../../shared/form.js";
+//#region src/native/form/slider.d.ts
+export type SliderProps = FieldInputProps & {
+  min?: number;
+  max: number;
+  step?: number;
+  formattedValue?: string;
+};
+/**
+ * Slider integrated with TanStack Form. Corresponds to the web `form/slider` (single value only; ranges do not exist on native).
+ * The label and current-value row belongs to `atom/slider`. Use `atom/slider` if you need a controlled version.
+ */
+export declare function Slider({ label, required, description, helpText, disabled, debounce, min, max, step, formattedValue, className, wrapperClassName }: SliderProps): import("react").JSX.Element;
+//#endregion

package/dist/native/form/slider.js

@@ -0,0 +1,42 @@
+import { useFieldValue } from "../../shared/form.js";
+import { Slider as Slider$1 } from "../atom/slider.js";
+import { FormControl, FormDescription, FormItem, FormMessage } from "../base/form.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/form/slider.tsx
+/**
+* Slider integrated with TanStack Form. Corresponds to the web `form/slider` (single value only; ranges do not exist on native).
+* The label and current-value row belongs to `atom/slider`. Use `atom/slider` if you need a controlled version.
+*/
+function Slider({ label, required, description, helpText, disabled, debounce, min, max, step, formattedValue, className, wrapperClassName }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			/* @__PURE__ */ jsx(FormControl, {
+				described: Boolean(description),
+				children: (control) => /* @__PURE__ */ jsx(Slider$1, {
+					...control,
+					accessibilityHint: description,
+					value: typeof value === "number" ? value : min ?? 0,
+					onValueChange: setValue,
+					label,
+					required,
+					helpText,
+					min,
+					max,
+					step,
+					disabled,
+					formattedValue,
+					labelClassName: control["aria-invalid"] ? "text-destructive opacity-100" : void 0,
+					className
+				})
+			}),
+			description ? /* @__PURE__ */ jsx(FormDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Slider };

package/dist/native/form/switch.d.ts

@@ -0,0 +1,9 @@
+import { BaseInputProps } from "../../shared/form.js";
+//#region src/native/form/switch.d.ts
+export type SwitchProps = BaseInputProps<boolean>;
+/**
+ * Switch integrated with TanStack Form. Like the web `form/switch`, it lays out a single row: label on the left, switch on the right.
+ * Pass `value` / `onValueChange` for controlled mode (the field is not used); omit them to read from the field context.
+ */
+export declare function Switch(props: SwitchProps): import("react").JSX.Element;
+//#endregion

package/dist/native/form/switch.js

@@ -0,0 +1,59 @@
+import { useFieldValue } from "../../shared/form.js";
+import { Switch as Switch$1 } from "../atom/switch.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/form/switch.tsx
+/**
+* Switch integrated with TanStack Form. Like the web `form/switch`, it lays out a single row: label on the left, switch on the right.
+* Pass `value` / `onValueChange` for controlled mode (the field is not used); omit them to read from the field context.
+*/
+function Switch(props) {
+	if (props.value !== void 0 && props.onValueChange !== void 0) return /* @__PURE__ */ jsx(Layout, {
+		...props,
+		checked: props.value,
+		onCheckedChange: props.onValueChange
+	});
+	return /* @__PURE__ */ jsx(FieldSwitch, { ...props });
+}
+function FieldSwitch(props) {
+	const [value, setValue] = useFieldValue({ debounce: props.debounce });
+	return /* @__PURE__ */ jsx(Layout, {
+		...props,
+		checked: value ?? false,
+		onCheckedChange: setValue
+	});
+}
+function Layout({ label, required, description, helpText, disabled, className, wrapperClassName, checked, onCheckedChange }) {
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			/* @__PURE__ */ jsxs(View, {
+				className: "h-9 flex-row items-center justify-between",
+				children: [label ? /* @__PURE__ */ jsx(FormLabel, {
+					required,
+					helpText,
+					children: label
+				}) : /* @__PURE__ */ jsx(View, {}), /* @__PURE__ */ jsx(FormControl, {
+					labelled: Boolean(label),
+					described: Boolean(description),
+					children: (control) => /* @__PURE__ */ jsx(Switch$1, {
+						...control,
+						accessibilityLabel: typeof label === "string" ? label : void 0,
+						accessibilityHint: description,
+						checked,
+						onCheckedChange,
+						disabled,
+						className
+					})
+				})]
+			}),
+			description ? /* @__PURE__ */ jsx(FormDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Switch };

package/dist/native/form/text-area.d.ts

@@ -0,0 +1,11 @@
+import { FieldInputProps } from "../../shared/form.js";
+//#region src/native/form/text-area.d.ts
+export type TextareaProps = FieldInputProps & {
+  /** Approximate number of visible lines (default 5 ≈ web's min-h-[200px]). */
+  numberOfLines?: number;
+};
+/**
+ * Multi-line input integrated with TanStack Form. Corresponds to the web `form/text-area`.
+ */
+export declare function Textarea({ label, required, description, helpText, placeholder, disabled, debounce, className, wrapperClassName, numberOfLines, "data-testid": testID }: TextareaProps): import("react").JSX.Element;
+//#endregion

package/dist/native/form/text-area.js

@@ -0,0 +1,50 @@
+import { useFieldValue } from "../../shared/form.js";
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { TextInput } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/form/text-area.tsx
+/**
+* Multi-line input integrated with TanStack Form. Corresponds to the web `form/text-area`.
+*/
+function Textarea({ label, required, description, helpText, placeholder, disabled, debounce, className, wrapperClassName, numberOfLines = 5, "data-testid": testID }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	const mutedInk = useTokenColor("--ink-500");
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			label ? /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx(FormControl, {
+				labelled: Boolean(label),
+				described: Boolean(description),
+				children: (control) => /* @__PURE__ */ jsx(TextInput, {
+					...control,
+					accessibilityLabel: typeof label === "string" ? label : void 0,
+					accessibilityHint: description,
+					value: value ?? "",
+					onChangeText: setValue,
+					placeholder,
+					placeholderTextColor: mutedInk,
+					editable: !disabled,
+					multiline: true,
+					numberOfLines,
+					textAlignVertical: "top",
+					testID,
+					style: { minHeight: numberOfLines * 22 + 16 },
+					className: cn("w-full rounded-control border border-line-strong bg-raised px-3 py-2 text-sm text-foreground", control["aria-invalid"] && "border-destructive", disabled && "opacity-50", className)
+				})
+			}),
+			description ? /* @__PURE__ */ jsx(FormDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Textarea };

package/dist/native/form/text-input.d.ts

@@ -0,0 +1,18 @@
+import { TextFieldProps, TextFieldType } from "../atom/text-field.js";
+import { FieldInputProps } from "../../shared/form.js";
+//#region src/native/form/text-input.d.ts
+export type TextInputProps = FieldInputProps & {
+  /** `number` switches to the numeric keyboard and stores the value as a number (null when emptied). */
+  type?: TextFieldType;
+  /** Autofill kind (same meaning as web's `TextInput.autoComplete`; same type as `atom/text-field`). */
+  autoComplete?: TextFieldProps["autoComplete"];
+  autoCapitalize?: "none" | "sentences" | "words" | "characters";
+  multiline?: boolean;
+};
+/**
+ * Text input integrated with TanStack Form. Corresponds to the web `form/text-input`.
+ * The value comes from the field context, and `debounce` handling is delegated to the shared `useFieldValue`.
+ * The input frame itself uses `atom/text-field` (the counterpart of web's `base/input`).
+ */
+export declare function TextInput({ label, required, description, helpText, placeholder, disabled, debounce, className, wrapperClassName, type, autoComplete, autoCapitalize, multiline, "data-testid": testID }: TextInputProps): import("react").JSX.Element;
+//#endregion