@lt-three/love3 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,72 @@
+import { ReactNode } from "react";
+//#region src/native/base/form.d.ts
+/**
+ * 外装の id の組と、エラー。`FormItem` の中で使う。フィールドの外（制御モード）でも落ちない。
+ *
+ * **表示するエラーはここで 1 つに決める**（field のエラー + `FormItem` の `errors`）。`FormLabel` の色・`FormMessage` の文・
+ * `FormControl` の `aria-invalid` / `aria-describedby` は全部これを読むので、文が出ているのに `aria-invalid` が無い、などの食い違いが起きない。
+ */
+export declare function useFormField(): {
+  id: string;
+  formItemId: string;
+  formLabelId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+  errors: readonly unknown[];
+};
+export declare function FormItem({ children, className, errors }: {
+  children: ReactNode;
+  className?: string;
+  /**
+   * field（TanStack Form）のエラーに**足す**エラー。フィールドの外で使うとき、またはフィールドの中でも入力の部品自身が
+   * 持つエラー（数値欄の「数として読めない」など）を出したいときに使う。入力の `aria-invalid` と `aria-describedby`、
+   * ラベルの色、`FormMessage` の表示に同じように効く。空配列を渡しても、field のエラーは隠れない。
+   */
+  errors?: readonly unknown[];
+}): import("react").JSX.Element;
+export declare function FormLabel({ children, required, helpText, className }: {
+  children: ReactNode;
+  required?: boolean;
+  helpText?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/** `FormControl` が入力の部品に渡す props（部品の `ControlA11yProps` と同じ形）。 */
+export type FormControlProps = {
+  id: string;
+  "aria-labelledby": string | undefined;
+  "aria-describedby": string | undefined;
+  "aria-invalid": boolean;
+};
+/**
+ * 入力の部品に `id`・`aria-labelledby`・`aria-describedby`・`aria-invalid` を渡す。子は関数で受ける。
+ *
+ * ```tsx
+ * <FormControl labelled={Boolean(label)} described={Boolean(description)}>
+ *   {control => <TextField {...control} value={value} onChangeText={setValue} />}
+ * </FormControl>
+ * ```
+ *
+ * - `labelled`: `FormLabel` を置いているとき。ラベルの文字を入力の名前にする（`aria-labelledby`）。置いていないときは
+ *   存在しない id を指さないよう付けない。右にラベルを持つ入力（checkbox・radio）は、自分の文字が名前なので付けない
+ * - `described`: `FormDescription` を置いているとき。説明を `aria-describedby` に足す。エラーがあるときは、エラーの文も足す
+ * - `id`: 既定は `formItemId`（1 つの field に入力が 1 つのとき）。**1 つの field に入力が複数あるとき**（radio の選択肢）は、
+ *   同じ id が重ならないよう、選択肢ごとに渡す
+ */
+export declare function FormControl({ children, id, labelled, described }: {
+  children: (control: FormControlProps) => ReactNode;
+  id?: string;
+  labelled?: boolean;
+  described?: boolean;
+}): ReactNode;
+export declare function FormDescription({ children, className }: {
+  children: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * エラーの文。出すエラーは `useFormField` の 1 つだけ（`FormItem` の `errors` で足す）。
+ * web の `FormMessage` にある「このメッセージだけに出すエラー」（`errors`）は持たない（文だけ変えると `aria-invalid` と食い違うため）。
+ */
+export declare function FormMessage({ className }: {
+  className?: string;
+}): import("react").JSX.Element | null;
+//#endregion

package/dist/native/base/form.js

@@ -0,0 +1,113 @@
+import { useOptionalFieldContext } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "./text.js";
+import { createContext, useContext, useId } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/base/form.tsx
+const FormItemContext = createContext({ id: "" });
+/**
+* 外装の id の組と、エラー。`FormItem` の中で使う。フィールドの外（制御モード）でも落ちない。
+*
+* **表示するエラーはここで 1 つに決める**（field のエラー + `FormItem` の `errors`）。`FormLabel` の色・`FormMessage` の文・
+* `FormControl` の `aria-invalid` / `aria-describedby` は全部これを読むので、文が出ているのに `aria-invalid` が無い、などの食い違いが起きない。
+*/
+function useFormField() {
+	const itemContext = useContext(FormItemContext);
+	const errors = [...useOptionalFieldContext()?.state.meta.errors ?? [], ...itemContext.extraErrors ?? []];
+	const { id } = itemContext;
+	return {
+		id,
+		formItemId: `${id}-form-item`,
+		formLabelId: `${id}-form-item-label`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		errors
+	};
+}
+function FormItem({ children, className, errors }) {
+	const id = useId();
+	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
+		value: {
+			id,
+			extraErrors: errors
+		},
+		children: /* @__PURE__ */ jsx(View, {
+			className: cn("gap-2", className),
+			children
+		})
+	});
+}
+function FormLabel({ children, required, helpText, className }) {
+	const { errors, formLabelId } = useFormField();
+	return /* @__PURE__ */ jsxs(View, {
+		className: "flex-row items-center gap-1",
+		children: [
+			/* @__PURE__ */ jsx(Text$1, {
+				id: formLabelId,
+				className: cn("text-xs font-semibold opacity-80", errors.length > 0 && "text-destructive opacity-100", className),
+				children
+			}),
+			required ? /* @__PURE__ */ jsx(Text$1, {
+				className: "text-destructive text-sm",
+				children: "*"
+			}) : null,
+			helpText ? /* @__PURE__ */ jsx(Text$1, {
+				className: "text-muted-foreground text-xs font-normal",
+				children: helpText
+			}) : null
+		]
+	});
+}
+/**
+* 入力の部品に `id`・`aria-labelledby`・`aria-describedby`・`aria-invalid` を渡す。子は関数で受ける。
+*
+* ```tsx
+* <FormControl labelled={Boolean(label)} described={Boolean(description)}>
+*   {control => <TextField {...control} value={value} onChangeText={setValue} />}
+* </FormControl>
+* ```
+*
+* - `labelled`: `FormLabel` を置いているとき。ラベルの文字を入力の名前にする（`aria-labelledby`）。置いていないときは
+*   存在しない id を指さないよう付けない。右にラベルを持つ入力（checkbox・radio）は、自分の文字が名前なので付けない
+* - `described`: `FormDescription` を置いているとき。説明を `aria-describedby` に足す。エラーがあるときは、エラーの文も足す
+* - `id`: 既定は `formItemId`（1 つの field に入力が 1 つのとき）。**1 つの field に入力が複数あるとき**（radio の選択肢）は、
+*   同じ id が重ならないよう、選択肢ごとに渡す
+*/
+function FormControl({ children, id, labelled = false, described = false }) {
+	const { errors, formItemId, formLabelId, formDescriptionId, formMessageId } = useFormField();
+	const invalid = errors.length > 0;
+	const describedBy = [described ? formDescriptionId : void 0, invalid ? formMessageId : void 0].filter(Boolean).join(" ");
+	return children({
+		id: id ?? formItemId,
+		"aria-labelledby": labelled ? formLabelId : void 0,
+		"aria-describedby": describedBy === "" ? void 0 : describedBy,
+		"aria-invalid": invalid
+	});
+}
+function FormDescription({ children, className }) {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx(Text$1, {
+		id: formDescriptionId,
+		className: cn("text-muted-foreground text-sm", className),
+		children
+	});
+}
+/**
+* エラーの文。出すエラーは `useFormField` の 1 つだけ（`FormItem` の `errors` で足す）。
+* web の `FormMessage` にある「このメッセージだけに出すエラー」（`errors`）は持たない（文だけ変えると `aria-invalid` と食い違うため）。
+*/
+function FormMessage({ className }) {
+	const { errors: list, formMessageId } = useFormField();
+	if (list.length === 0) return null;
+	return /* @__PURE__ */ jsx(Text$1, {
+		id: formMessageId,
+		role: "alert",
+		className: cn("text-destructive text-sm", className),
+		children: list.map((error) => String(error)).join("\n")
+	});
+}
+
+//#endregion
+export { FormControl, FormDescription, FormItem, FormLabel, FormMessage, useFormField };

package/dist/native/base/glass-card.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { ViewStyle } from "react-native";
+//#region src/native/base/glass-card.d.ts
+type GlassCardProps = {
+  children: ReactNode;
+  style?: ViewStyle;
+};
+/**
+ * Liquid Glass のカードサーフェス。iOS 26 以上では `GlassView`（`UIGlassEffect`）で
+ * 背後をぼかしたグラス表現になり、非対応環境（iOS 26 未満・Android・web）では枠線付きの通常 View にフォールバックする。
+ * フォールバックの枠線は、トークンの罫線色（`--line`）。移植元は `rgba(…)` の直書きで、トークンから外れていた。
+ */
+declare function GlassCard({ children, style }: GlassCardProps): import("react").JSX.Element;
+//#endregion
+export { GlassCard, type GlassCardProps };

package/dist/native/base/glass-card.js

@@ -0,0 +1,38 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { GlassView, isLiquidGlassAvailable } from "expo-glass-effect";
+
+//#region src/native/base/glass-card.tsx
+const BASE = {
+	borderRadius: 10,
+	padding: 16,
+	overflow: "hidden"
+};
+/**
+* Liquid Glass のカードサーフェス。iOS 26 以上では `GlassView`（`UIGlassEffect`）で
+* 背後をぼかしたグラス表現になり、非対応環境（iOS 26 未満・Android・web）では枠線付きの通常 View にフォールバックする。
+* フォールバックの枠線は、トークンの罫線色（`--line`）。移植元は `rgba(…)` の直書きで、トークンから外れていた。
+*/
+function GlassCard({ children, style }) {
+	const line = useTokenColor("--line");
+	if (isLiquidGlassAvailable()) return /* @__PURE__ */ jsx(GlassView, {
+		glassEffectStyle: "regular",
+		style: [BASE, style],
+		children
+	});
+	return /* @__PURE__ */ jsx(View, {
+		style: [
+			BASE,
+			{
+				borderWidth: 1,
+				borderColor: line
+			},
+			style
+		],
+		children
+	});
+}
+
+//#endregion
+export { GlassCard };

package/dist/native/base/input.d.ts

@@ -0,0 +1,29 @@
+import { KeyboardTypeOptions } from "react-native";
+//#region src/native/base/input.d.ts
+type InputProps = {
+  placeholder?: string;
+  /** 表示する値。外部 state と同期する場合に渡す（内部は非制御で駆動する）。 */
+  value?: string;
+  onChangeText?: (text: string) => void;
+  secureTextEntry?: boolean;
+  editable?: boolean;
+  autoFocus?: boolean;
+  autoCapitalize?: "none" | "sentences" | "words" | "characters";
+  keyboardType?: KeyboardTypeOptions;
+  returnKeyType?: "done" | "go" | "next" | "search" | "send";
+  onSubmitEditing?: (text: string) => void;
+};
+/**
+ * ネイティブテキスト入力（OS のコントロールの層）。iOS は SwiftUI の `TextField` / `SecureField`、
+ * Android は Jetpack Compose の `TextField` を描画する（`@expo/ui` universal 経由）。
+ *
+ * `atom/text-field`（RN の `TextInput`。トークンで塗る入力枠）に対する、**OS ネイティブ版の base 層**。
+ * **トークンで塗れない**ので、web と同じ見た目にしたい入力は `atom/text-field`（フォームなら `form/text-input`）を使う。
+ *
+ * universal の `value` は `ObservableState` 型のため、素の string を扱えるよう
+ * `defaultValue`（非制御）+ `onChangeText` で駆動する。外部 state は
+ * `onChangeText` を通じて同期する。
+ */
+declare function Input({ value, ...props }: InputProps): import("react").JSX.Element;
+//#endregion
+export { Input, type InputProps };

package/dist/native/base/input.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { Host, TextInput } from "@expo/ui";
+
+//#region src/native/base/input.tsx
+/**
+* ネイティブテキスト入力（OS のコントロールの層）。iOS は SwiftUI の `TextField` / `SecureField`、
+* Android は Jetpack Compose の `TextField` を描画する（`@expo/ui` universal 経由）。
+*
+* `atom/text-field`（RN の `TextInput`。トークンで塗る入力枠）に対する、**OS ネイティブ版の base 層**。
+* **トークンで塗れない**ので、web と同じ見た目にしたい入力は `atom/text-field`（フォームなら `form/text-input`）を使う。
+*
+* universal の `value` は `ObservableState` 型のため、素の string を扱えるよう
+* `defaultValue`（非制御）+ `onChangeText` で駆動する。外部 state は
+* `onChangeText` を通じて同期する。
+*/
+function Input({ value, ...props }) {
+	return /* @__PURE__ */ jsx(Host, {
+		style: { minHeight: 44 },
+		children: /* @__PURE__ */ jsx(TextInput, {
+			defaultValue: value,
+			...props
+		})
+	});
+}
+
+//#endregion
+export { Input };

package/dist/native/base/sheet.d.ts

@@ -0,0 +1,71 @@
+import { ReactNode } from "react";
+//#region src/native/base/sheet.d.ts
+export type SheetShellProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** 背面タップで閉じるか（既定 true）。 */
+  dismissOnBackdropPress?: boolean;
+  /** 画面高に対する最大の高さ（既定 0.85）。 */
+  maxHeightRatio?: number;
+  /**
+   * 閉じ切って `Modal` を畳んだ後に**1 度だけ**呼ばれる（開いたことが無いとき・再描画のたびには呼ばれない）。
+   * **次のシートを開くときはここで開くこと。**
+   * `open` を false にした直後に別のシートを開くと、閉じるアニメーションの間だけ `Modal` が
+   * 2 枚並び、iOS は後から出したほうを出さない（何も起きないように見える）。
+   *
+   * **確認ダイアログ（`once/confirm`）も `Modal`。** シートの中から確認を出すときも
+   * 同じ理由でここを使うこと。
+   */
+  onClosed?: () => void;
+  /**
+   * ダイアログの名前になる見出しの `id`（`SheetHeader` の `titleId` と同じ値）。`aria-label` が無いときに必須級
+   * （名前の無いダイアログは支援技術に「ダイアログ」としか伝わらない）。
+   */
+  "aria-labelledby"?: string;
+  /** 見出しが文字列でないとき、または見出しを出さないときの、ダイアログの名前。 */
+  "aria-label"?: string;
+  /** 補足の `id`（`SheetHeader` の `descriptionId` と同じ値）。 */
+  "aria-describedby"?: string;
+  children: ReactNode;
+};
+/**
+ * `Modal` の `animationType="slide"` は使わない。あれは**スクリムごと**競り上がるので、
+ * 暗幕が下から生えてくる安っぽい見え方になる。ここではスクリムのフェードとパネルの
+ * スライドを別々の曲線で動かす。
+ *
+ * ダイアログの役割（`role="dialog"`・`aria-modal`）・フォーカスの閉じ込め・Esc（`onRequestClose`）は `Modal` が持つ
+ * （react-native-web の `Modal` は役割と閉じ込めを出す。名前は持たないので `aria-label(ledby)` を渡す）。
+ */
+export declare function SheetShell({ open, onOpenChange, dismissOnBackdropPress, maxHeightRatio, onClosed, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, children }: SheetShellProps): import("react").JSX.Element | null;
+export type SheetHeaderProps = {
+  title?: ReactNode;
+  description?: ReactNode;
+  /** 閉じるボタンの読み上げ名（既定は「閉じる」）。 */
+  closeLabel?: string;
+  onClose: () => void;
+  /** 見出しの `id`。`SheetShell` の `aria-labelledby` に同じ値を渡すと、見出しがダイアログの名前になる。 */
+  titleId?: string;
+  /** 補足の `id`。`SheetShell` の `aria-describedby` に同じ値を渡す。 */
+  descriptionId?: string;
+};
+/** 掴む合図（グラバー）・見出し・閉じるボタン。 */
+export declare function SheetHeader({ title, description, closeLabel, onClose, titleId, descriptionId }: SheetHeaderProps): import("react").JSX.Element;
+export type SheetScrollProps = {
+  /** 中身に余白を敷くか（既定 true）。端まで敷き詰める行リストでは false。 */
+  padded?: boolean;
+  /** フッターがあるか。無いときは中身の下端で safe-area を吸う。 */
+  hasFooter?: boolean;
+  children: ReactNode;
+};
+/**
+ * シートの本文。
+ *
+ * `contentContainerClassName` は react-native-css で**効かない**（無言で padding が消えて
+ * 文字が端で切れる）。余白は必ず `contentContainerStyle` に書くこと。
+ */
+export declare function SheetScroll({ padded, hasFooter, children }: SheetScrollProps): import("react").JSX.Element;
+/** シートのフッター。ホームインジケータに潜らないよう safe-area を足す。 */
+export declare function SheetFooter({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion

package/dist/native/base/sheet.js

@@ -0,0 +1,187 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { isBlankNode } from "../lib/utils.js";
+import { Text as Text$1 } from "./text.js";
+import { CLOSE_LABEL } from "../lib/labels.js";
+import { useEffect, useRef, useState } from "react";
+import { KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, StyleSheet, View, useWindowDimensions } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+import Animated$1, { Easing as Easing$1, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { scheduleOnRN } from "react-native-worklets";
+
+//#region src/native/base/sheet.tsx
+/**
+* 下から出るシートの素体。`@lt-three/web` の base/sheet（Radix Dialog のラッパー）に対応する。
+*
+* ここに置くのは「面をどう出すか」だけで、見出しや本文の作法は `layout/sheet` が決める。
+* `atom/select` のピッカーのように独自の中身を敷きたいものが `layout/` を経由できない
+* （依存が逆流する）ので、web と同じく素体を base に置いて両方から使う。
+*/
+/** 中身の余白。`padded` が false でも下端の safe-area だけは必ず確保する。 */
+const GUTTER = 16;
+/**
+* `Modal` の `animationType="slide"` は使わない。あれは**スクリムごと**競り上がるので、
+* 暗幕が下から生えてくる安っぽい見え方になる。ここではスクリムのフェードとパネルの
+* スライドを別々の曲線で動かす。
+*
+* ダイアログの役割（`role="dialog"`・`aria-modal`）・フォーカスの閉じ込め・Esc（`onRequestClose`）は `Modal` が持つ
+* （react-native-web の `Modal` は役割と閉じ込めを出す。名前は持たないので `aria-label(ledby)` を渡す）。
+*/
+function SheetShell({ open, onOpenChange, dismissOnBackdropPress = true, maxHeightRatio = .85, onClosed, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, children }) {
+	const { height: windowHeight } = useWindowDimensions();
+	const [mounted, setMounted] = useState(open);
+	const [panelHeight, setPanelHeight] = useState(0);
+	if (open && !mounted) setMounted(true);
+	if (!open && !mounted && panelHeight !== 0) setPanelHeight(0);
+	const progress = useSharedValue(0);
+	useEffect(() => {
+		if (open) return;
+		progress.set(withTiming(0, {
+			duration: 180,
+			easing: Easing$1.in(Easing$1.cubic)
+		}, (finished) => {
+			"worklet";
+			if (finished) scheduleOnRN(setMounted, false);
+		}));
+	}, [open, progress]);
+	useEffect(() => {
+		if (!open || panelHeight === 0) return;
+		progress.set(withSpring(1, {
+			damping: 26,
+			stiffness: 260,
+			mass: .9
+		}));
+	}, [
+		open,
+		panelHeight,
+		progress
+	]);
+	const wasMounted = useRef(false);
+	const onClosedRef = useRef(onClosed);
+	useEffect(() => {
+		onClosedRef.current = onClosed;
+	});
+	useEffect(() => {
+		if (mounted) {
+			wasMounted.current = true;
+			return;
+		}
+		if (!wasMounted.current) return;
+		wasMounted.current = false;
+		onClosedRef.current?.();
+	}, [mounted]);
+	const scrimStyle = useAnimatedStyle(() => ({ opacity: progress.get() }), [progress]);
+	const panelStyle = useAnimatedStyle(() => ({
+		opacity: panelHeight === 0 ? 0 : 1,
+		transform: [{ translateY: (1 - progress.get()) * panelHeight }]
+	}), [progress, panelHeight]);
+	if (!mounted) return null;
+	return /* @__PURE__ */ jsx(Modal, {
+		visible: true,
+		transparent: true,
+		statusBarTranslucent: true,
+		animationType: "none",
+		onRequestClose: () => onOpenChange(false),
+		"aria-labelledby": ariaLabelledBy,
+		"aria-label": ariaLabel,
+		"aria-describedby": ariaDescribedBy,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: { flex: 1 },
+			children: [/* @__PURE__ */ jsx(Animated$1.View, {
+				style: [StyleSheet.absoluteFill, scrimStyle],
+				children: /* @__PURE__ */ jsx(Pressable, {
+					accessible: false,
+					style: StyleSheet.absoluteFill,
+					className: "bg-scrim",
+					onPress: dismissOnBackdropPress ? () => onOpenChange(false) : void 0
+				})
+			}), /* @__PURE__ */ jsx(KeyboardAvoidingView, {
+				style: {
+					flex: 1,
+					justifyContent: "flex-end"
+				},
+				pointerEvents: "box-none",
+				behavior: Platform.OS === "ios" ? "padding" : "height",
+				children: /* @__PURE__ */ jsx(Animated$1.View, {
+					style: panelStyle,
+					onLayout: (event) => setPanelHeight(event.nativeEvent.layout.height),
+					children: /* @__PURE__ */ jsx(View, {
+						className: "rounded-t-surface bg-popover shadow-lg",
+						style: { maxHeight: windowHeight * maxHeightRatio },
+						children: /* @__PURE__ */ jsx(View, {
+							className: "overflow-hidden rounded-t-surface",
+							style: { flexShrink: 1 },
+							children
+						})
+					})
+				})
+			})]
+		})
+	});
+}
+/** 掴む合図（グラバー）・見出し・閉じるボタン。 */
+function SheetHeader({ title, description, closeLabel = CLOSE_LABEL, onClose, titleId, descriptionId }) {
+	const ink = useTokenColor("--ink-500");
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(View, {
+		className: "items-center pt-2 pb-1",
+		children: /* @__PURE__ */ jsx(View, { className: "h-1 w-9 bg-line" })
+	}), /* @__PURE__ */ jsxs(View, {
+		className: "flex-row items-start justify-between gap-2 border-b border-line px-4 pt-1 pb-3",
+		children: [/* @__PURE__ */ jsxs(View, {
+			className: "shrink gap-1",
+			children: [!isBlankNode(title) ? /* @__PURE__ */ jsx(Text$1, {
+				id: titleId,
+				role: "heading",
+				"aria-level": "2",
+				className: "text-base font-semibold",
+				children: title
+			}) : null, !isBlankNode(description) ? /* @__PURE__ */ jsx(Text$1, {
+				id: descriptionId,
+				className: "text-muted-foreground text-sm",
+				children: description
+			}) : null]
+		}), /* @__PURE__ */ jsx(Pressable, {
+			accessibilityRole: "button",
+			accessibilityLabel: closeLabel,
+			hitSlop: 12,
+			onPress: onClose,
+			children: /* @__PURE__ */ jsx(Feather, {
+				name: "x",
+				size: 16,
+				color: ink
+			})
+		})]
+	})] });
+}
+/**
+* シートの本文。
+*
+* `contentContainerClassName` は react-native-css で**効かない**（無言で padding が消えて
+* 文字が端で切れる）。余白は必ず `contentContainerStyle` に書くこと。
+*/
+function SheetScroll({ padded = true, hasFooter = false, children }) {
+	const insets = useSafeAreaInsets();
+	return /* @__PURE__ */ jsx(ScrollView, {
+		style: { flexShrink: 1 },
+		contentContainerStyle: {
+			gap: padded ? GUTTER : 0,
+			paddingHorizontal: padded ? GUTTER : 0,
+			paddingTop: padded ? GUTTER : 0,
+			paddingBottom: (padded ? GUTTER : 0) + (hasFooter ? 0 : insets.bottom)
+		},
+		children
+	});
+}
+/** シートのフッター。ホームインジケータに潜らないよう safe-area を足す。 */
+function SheetFooter({ children }) {
+	const insets = useSafeAreaInsets();
+	return /* @__PURE__ */ jsx(View, {
+		className: "flex-row justify-end gap-2 border-t border-line px-4 pt-3",
+		style: { paddingBottom: 12 + insets.bottom },
+		children
+	});
+}
+
+//#endregion
+export { SheetFooter, SheetHeader, SheetScroll, SheetShell };

package/dist/native/base/text.d.ts

@@ -0,0 +1,14 @@
+import * as React$1 from "react";
+import { Text as Text$1 } from "react-native";
+import { VariantProps } from "class-variance-authority";
+//#region src/native/base/text.d.ts
+declare const textVariants: (props?: ({
+  variant?: "blockquote" | "code" | "default" | "h1" | "h2" | "h3" | "h4" | "large" | "lead" | "muted" | "p" | "small" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextVariantProps = VariantProps<typeof textVariants>;
+declare const TextClassContext: React$1.Context<string | undefined>;
+declare function Text({ className, asChild, variant, ...props }: React$1.ComponentProps<typeof Text$1> & TextVariantProps & React$1.RefAttributes<Text$1> & {
+  asChild?: boolean;
+}): React$1.JSX.Element;
+//#endregion
+export { Text, TextClassContext };

package/dist/native/base/text.js

@@ -0,0 +1,53 @@
+import { cn } from "../lib/utils.js";
+import * as React$1 from "react";
+import { Platform, Text as Text$1 } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import * as Slot from "@rn-primitives/slot";
+import { cva } from "class-variance-authority";
+
+//#region src/native/base/text.tsx
+const textVariants = cva(cn("text-foreground font-sans text-base", Platform.select({ web: "select-text" })), {
+	variants: { variant: {
+		default: "",
+		h1: cn("text-center text-4xl font-extrabold tracking-tight", Platform.select({ web: "scroll-m-20 text-balance" })),
+		h2: cn("border-line border-b pb-2 text-3xl font-semibold tracking-tight", Platform.select({ web: "scroll-m-20 first:mt-0" })),
+		h3: cn("text-2xl font-semibold tracking-tight", Platform.select({ web: "scroll-m-20" })),
+		h4: cn("text-xl font-semibold tracking-tight", Platform.select({ web: "scroll-m-20" })),
+		p: "mt-3 leading-7 sm:mt-6",
+		blockquote: "mt-4 border-l-2 pl-3 italic sm:mt-6 sm:pl-6",
+		code: cn("bg-muted rounded-control relative px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"),
+		lead: "text-muted-foreground text-xl",
+		large: "text-lg font-semibold",
+		small: "text-sm font-medium leading-none",
+		muted: "text-muted-foreground text-sm"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const ROLE = {
+	h1: "heading",
+	h2: "heading",
+	h3: "heading",
+	h4: "heading",
+	blockquote: Platform.select({ web: "blockquote" }),
+	code: Platform.select({ web: "code" })
+};
+const ARIA_LEVEL = {
+	h1: "1",
+	h2: "2",
+	h3: "3",
+	h4: "4"
+};
+const TextClassContext = React$1.createContext(void 0);
+function Text({ className, asChild = false, variant = "default", ...props }) {
+	const textClass = React$1.useContext(TextClassContext);
+	const Component = asChild ? Slot.Text : Text$1;
+	return /* @__PURE__ */ jsx(Component, {
+		className: cn(textVariants({ variant }), textClass, className),
+		role: variant ? ROLE[variant] : void 0,
+		"aria-level": variant ? ARIA_LEVEL[variant] : void 0,
+		...props
+	});
+}
+
+//#endregion
+export { Text, TextClassContext };

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

@@ -0,0 +1,13 @@
+import { BaseInputProps } from "../../shared/form.js";
+import { ReactNode } from "react";
+//#region src/native/form/checkbox.d.ts
+export type CheckboxProps = BaseInputProps<boolean> & {
+  /** チェックボックスの右に置くラベル。フィールドの `label` とは別物（こちらがチェックボックスの名前になる）。 */
+  checkboxLabel: ReactNode;
+};
+/**
+ * TanStack Form 統合の Checkbox。web の `form/checkbox` と同じく
+ * `value` / `onValueChange` を渡せば制御モード（field を使わない）、省略すれば field context から取る。
+ */
+export declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;
+//#endregion