@lt-three/love3 0.0.0-stage → 0.1.0

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
+/**
+* TanStack Form 統合の Checkbox。web の `form/checkbox` と同じく
+* `value` / `onValueChange` を渡せば制御モード（field を使わない）、省略すれば 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;
+  /** 表示の整形。省略時はロケール既定の日付表記。 */
+  format?: (value: Date) => string;
+};
+/**
+ * TanStack Form 統合の日付・時刻入力。web の `form/date-picker` に対応する。
+ *
+ * web は react-day-picker のカレンダーをポップオーバーに出すが、native は
+ * OS 標準のピッカー（`@react-native-community/datetimepicker`）を使う。
+ * iOS は常設のスピナー（inline）、Android はタップでダイアログという OS ごとの作法に従う。
+ * react-native-web（preview・vitest）は、このライブラリに web 実装が無いので、`<input type="date">` などの差し替え
+ * （`web/datetimepicker.tsx`）で描く（下に「OK」を出す iOS と同じ作法）。
+ *
+ * 値は field context から取る（制御モードは持たない。移植元は型だけ `value` / `onValueChange` を受けて無視していた）。
+ * トリガーは、押すとピッカーが開く**ボタン**で、名前は「ラベル、現在の値」（`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
+/** 日付・時刻の入力が名前を持たないとき（`label` が要素のときなど）に、ピッカーに付ける名前。 */
+const PICKER_LABEL = {
+	date: "日付",
+	time: "時刻",
+	datetime: "日時"
+};
+/**
+* TanStack Form 統合の日付・時刻入力。web の `form/date-picker` に対応する。
+*
+* web は react-day-picker のカレンダーをポップオーバーに出すが、native は
+* OS 標準のピッカー（`@react-native-community/datetimepicker`）を使う。
+* iOS は常設のスピナー（inline）、Android はタップでダイアログという OS ごとの作法に従う。
+* react-native-web（preview・vitest）は、このライブラリに web 実装が無いので、`<input type="date">` などの差し替え
+* （`web/datetimepicker.tsx`）で描く（下に「OK」を出す iOS と同じ作法）。
+*
+* 値は field context から取る（制御モードは持たない。移植元は型だけ `value` / `onValueChange` を受けて無視していた）。
+* トリガーは、押すとピッカーが開く**ボタン**で、名前は「ラベル、現在の値」（`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,23 @@
+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;
+  /** 初期値のままでも送信を許可する。 */
+  allowDefaultValue?: boolean;
+};
+/**
+ * フォームの送信ボタン。送信中・未変更・バリデーション不通過を同じ条件で無効化する
+ * （`createFormHook` の `formComponents` に載せて `form.SubmitButton` として使う）。
+ * web の love3 にはまだ対応する部品が無い（`@lt-three/web` の `form/form` の `SubmitButton` に対応）。
+ */
+export declare function SubmitButton({ disabled, allowDefaultValue, children, ...props }: SubmitButtonProps): import("react").JSX.Element;
+/**
+ * 配列フィールドの外装（ラベル・子・補足・エラー。`@lt-three/web` の `form/form` の `ArrayFields` に対応する）。
+ * 移植元は `description` を受け取るだけで描かなかったので、描くようにした。
+ */
+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,45 @@
+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
+/**
+* フォームの送信ボタン。送信中・未変更・バリデーション不通過を同じ条件で無効化する
+* （`createFormHook` の `formComponents` に載せて `form.SubmitButton` として使う）。
+* web の love3 にはまだ対応する部品が無い（`@lt-three/web` の `form/form` の `SubmitButton` に対応）。
+*/
+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
+		})
+	});
+}
+/**
+* 配列フィールドの外装（ラベル・子・補足・エラー。`@lt-three/web` の `form/form` の `ArrayFields` に対応する）。
+* 移植元は `description` を受け取るだけで描かなかったので、描くようにした。
+*/
+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` は縦積み、`box` は 1px 枠付きの横並び。web と同じ 2 形態。 */
+  type?: "list" | "box";
+};
+/**
+ * TanStack Form 統合のラジオグループ。web の `form/radio-group` に対応する。
+ *
+ * つまみは 16px の**円**（web と同じ。`rounded-full`）で、未選択は line-control の枠、選択時はインディゴの枠と中心の点が入る。
+ *
+ * グループは `radiogroup` で、ラベルが名前になる（`aria-labelledby`）。選択肢は `radio`（名前は選択肢の `label`）で、
+ * 説明とエラーを各選択肢が指す（同じ field に入力が複数あるので、id は選択肢ごとに分ける）。
+ */
+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
+/**
+* TanStack Form 統合のラジオグループ。web の `form/radio-group` に対応する。
+*
+* つまみは 16px の**円**（web と同じ。`rounded-full`）で、未選択は line-control の枠、選択時はインディゴの枠と中心の点が入る。
+*
+* グループは `radiogroup` で、ラベルが名前になる（`aria-labelledby`）。選択肢は `radio`（名前は選択肢の `label`）で、
+* 説明とエラーを各選択肢が指す（同じ field に入力が複数あるので、id は選択肢ごとに分ける）。
+*/
+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)[];
+};
+/**
+ * TanStack Form 統合の Select。web の `form/select` と同じ props（制御モードは持たない。制御版は `atom/select`）。
+ * 値は field context から取る。placeholder の既定は web と同じ「選択してください」。
+ */
+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
+/**
+* TanStack Form 統合の Select。web の `form/select` と同じ props（制御モードは持たない。制御版は `atom/select`）。
+* 値は field context から取る。placeholder の既定は web と同じ「選択してください」。
+*/
+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;
+};
+/**
+ * TanStack Form 統合の Slider。web の `form/slider` に対応する（単一値のみ。範囲は native に無い）。
+ * ラベルと現在値の行は `atom/slider` が持つ。制御版が必要なら `atom/slider` を使う。
+ */
+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
+/**
+* TanStack Form 統合の Slider。web の `form/slider` に対応する（単一値のみ。範囲は native に無い）。
+* ラベルと現在値の行は `atom/slider` が持つ。制御版が必要なら `atom/slider` を使う。
+*/
+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>;
+/**
+ * TanStack Form 統合の Switch。web の `form/switch` と同じく「ラベル左・スイッチ右」の 1 行で並べる。
+ * `value` / `onValueChange` を渡せば制御モード（field を使わない）、省略すれば 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
+/**
+* TanStack Form 統合の Switch。web の `form/switch` と同じく「ラベル左・スイッチ右」の 1 行で並べる。
+* `value` / `onValueChange` を渡せば制御モード（field を使わない）、省略すれば 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 & {
+  /** 表示行数の目安（既定 5 行 ≒ web の min-h-[200px]）。 */
+  numberOfLines?: number;
+};
+/**
+ * TanStack Form 統合の複数行入力。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
+/**
+* TanStack Form 統合の複数行入力。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` は数値キーボード + 数値としての格納に切り替える（空にすると null）。 */
+  type?: TextFieldType;
+  /** 自動入力の種類（web の `TextInput.autoComplete` と同じ意味。`atom/text-field` と同じ型）。 */
+  autoComplete?: TextFieldProps["autoComplete"];
+  autoCapitalize?: "none" | "sentences" | "words" | "characters";
+  multiline?: boolean;
+};
+/**
+ * TanStack Form 統合のテキスト入力。web の `form/text-input` に対応する。
+ * 値は field context から取り、`debounce` の扱いも共通の `useFieldValue` に委ねる。
+ * 入力枠そのものは `atom/text-field`（web の `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