@lt-three/love3 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,90 @@
+import { useFieldValue } from "../../shared/form.js";
+import { NUMBER_INVALID_LABEL } from "../lib/labels.js";
+import { TextField } from "../atom/text-field.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/form/text-input.tsx
+const DECIMAL = /^[+-]?(?:\d+\.?\d*|\.\d+)$/;
+/**
+* 数値欄の入力中の文字を読む。
+* - 前後の空白は無視し、空（`" "` を含む）は「値なし」（null）
+* - 全角の数字・記号は半角にそろえる（`１２．５` → `12.5`）。`,` は小数点として受ける（`1,5` → 1.5。ロケール）。
+*   千の区切り（`1,000`）は区別できない（1 として読む）。桁の区切りは入れない前提
+* - 読めない文字（`abc`・`-`・`0x10`・`Infinity`・桁あふれ）は `ok: false`
+*/
+function parseNumber(text) {
+	const normalized = text.normalize("NFKC").replaceAll("−", "-").replace(",", ".").trim();
+	if (normalized === "") return {
+		ok: true,
+		value: null
+	};
+	if (!DECIMAL.test(normalized)) return { ok: false };
+	const parsed = Number(normalized);
+	return Number.isFinite(parsed) ? {
+		ok: true,
+		value: parsed
+	} : { ok: false };
+}
+/**
+* TanStack Form 統合のテキスト入力。web の `form/text-input` に対応する。
+* 値は field context から取り、`debounce` の扱いも共通の `useFieldValue` に委ねる。
+* 入力枠そのものは `atom/text-field`（web の `base/input` に相当）を使う。
+*/
+function TextInput({ label, required, description, helpText, placeholder, disabled, debounce, className, wrapperClassName, type = "text", autoComplete, autoCapitalize, multiline, "data-testid": testID }) {
+	const [value, setValue, field] = useFieldValue({ debounce });
+	const [draft, setDraft] = useState(null);
+	const parsed = draft === null ? null : parseNumber(draft);
+	const draftValue = parsed === null ? void 0 : parsed.ok ? parsed.value : null;
+	const touched = field.state.meta.isTouched;
+	const [wasTouched, setWasTouched] = useState(touched);
+	if (touched !== wasTouched) {
+		setWasTouched(touched);
+		if (!touched && draft !== null) setDraft(null);
+	}
+	const draftActive = draft !== null && draftValue === (value ?? null);
+	if (draft !== null && !draftActive) setDraft(null);
+	const numberUnreadable = type === "number" && draftActive && parsed !== null && !parsed.ok;
+	const shown = type === "number" && draftActive ? draft : value === null || value === void 0 ? "" : String(value);
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		errors: numberUnreadable ? [NUMBER_INVALID_LABEL] : void 0,
+		children: [
+			label ? /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsx(FormControl, {
+				labelled: Boolean(label),
+				described: Boolean(description),
+				children: (control) => /* @__PURE__ */ jsx(TextField, {
+					...control,
+					accessibilityLabel: typeof label === "string" ? label : void 0,
+					accessibilityHint: description,
+					value: shown,
+					onChangeText: (text) => {
+						if (type !== "number") return setValue(text);
+						setDraft(text);
+						const next = parseNumber(text);
+						setValue(next.ok ? next.value : null);
+					},
+					placeholder,
+					type,
+					disabled,
+					autoComplete,
+					autoCapitalize,
+					multiline,
+					testID,
+					className
+				})
+			}),
+			description ? /* @__PURE__ */ jsx(FormDescription, { children: description }) : null,
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { TextInput };

package/dist/native/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/native/layout/accordion.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+//#region src/native/layout/accordion.d.ts
+export type AccordionEntry = {
+  /** 項目の識別子。 */
+  value: string;
+  trigger: ReactNode;
+  content: ReactNode;
+};
+export type AccordionProps = {
+  items: AccordionEntry[];
+  /** `single` は 1 つだけ開く、`multiple` は複数同時に開ける。 */
+  type?: "single" | "multiple";
+  defaultValue?: string[];
+  className?: string;
+  itemClassName?: string;
+  /** 開閉の行（トリガー）に付ける追加のクラス。 */
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+/**
+ * `@lt-three/web` の layout/accordion と同じ「items を渡すだけ」のデータ駆動アコーディオン。
+ * 区切りは 1px のヘアラインのみで、開閉のシェブロンだけが動く。
+ */
+export declare function Accordion({ items, type, defaultValue, className, itemClassName, triggerClassName, contentClassName }: AccordionProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/accordion.js

@@ -0,0 +1,54 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { useState } from "react";
+import { LayoutAnimation, Platform, Pressable, UIManager, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+
+//#region src/native/layout/accordion.tsx
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) UIManager.setLayoutAnimationEnabledExperimental(true);
+/**
+* `@lt-three/web` の layout/accordion と同じ「items を渡すだけ」のデータ駆動アコーディオン。
+* 区切りは 1px のヘアラインのみで、開閉のシェブロンだけが動く。
+*/
+function Accordion({ items, type = "single", defaultValue = [], className, itemClassName, triggerClassName, contentClassName }) {
+	const [open, setOpen] = useState(defaultValue);
+	const ink = useTokenColor("--ink-500");
+	const toggle = (value) => {
+		LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+		setOpen((prev) => {
+			if (prev.includes(value)) return prev.filter((v) => v !== value);
+			return type === "single" ? [value] : [...prev, value];
+		});
+	};
+	return /* @__PURE__ */ jsx(View, {
+		className,
+		children: items.map((item) => {
+			const isOpen = open.includes(item.value);
+			return /* @__PURE__ */ jsxs(View, {
+				className: cn("border-b border-line", itemClassName),
+				children: [/* @__PURE__ */ jsxs(Pressable, {
+					accessibilityRole: "button",
+					"aria-expanded": isOpen,
+					onPress: () => toggle(item.value),
+					className: cn("flex-row items-center justify-between gap-2 py-4", triggerClassName),
+					children: [typeof item.trigger === "string" ? /* @__PURE__ */ jsx(Text$1, {
+						className: "text-sm font-medium",
+						children: item.trigger
+					}) : item.trigger, /* @__PURE__ */ jsx(Feather, {
+						name: isOpen ? "chevron-up" : "chevron-down",
+						size: 16,
+						color: ink
+					})]
+				}), isOpen ? /* @__PURE__ */ jsx(View, {
+					className: cn("pb-4", contentClassName),
+					children: item.content
+				}) : null]
+			}, item.value);
+		})
+	});
+}
+
+//#endregion
+export { Accordion };

package/dist/native/layout/card.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+//#region src/native/layout/card.d.ts
+/** 文字・数字のアクション（それ自体が読み上げ名になる）。 */
+type TextAction = string | number;
+/**
+ * ヘッダー右端のアクション。**タップできるアクション（`actionOnPress`）が文字でない（アイコンなど）ときは、
+ * 読み上げ名（`actionLabel`）が必須**（名前の無いボタンになるため）。
+ */
+type CardActionProps = {
+  action?: undefined;
+  actionOnPress?: undefined;
+  actionLabel?: undefined;
+} | {
+  action: ReactNode;
+  actionOnPress?: undefined;
+  actionLabel?: string;
+} | {
+  action: TextAction;
+  actionOnPress: () => void;
+  actionLabel?: string;
+} | {
+  action: Exclude<ReactNode, TextAction | null | undefined>;
+  actionOnPress: () => void;
+  actionLabel: string;
+};
+export type CardProps = CardActionProps & {
+  title?: ReactNode;
+  /**
+   * タイトルを見出しにする（`role="heading"` と `aria-level`）。画面の見出し構造に入れたいときに渡す。
+   * 未指定ならただの文字（web の `headingLevel` と同じ意味）。
+   */
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+  description?: ReactNode;
+  content: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+};
+/**
+ * `@lt-three/web` の layout/card と同じ「タイトル・説明・アクション・本文・フッター」の構成。
+ * 外装（surface 角丸・1px の極薄の罫線・raised 面）は `Panel` が持つ。
+ *
+ * 中身に自前の余白や区切り線を敷きたいだけなら、素の面である `Panel` を直接使う。
+ */
+export declare function Card({ title, headingLevel, description, action, actionOnPress, actionLabel, content, footer, className, contentClassName }: CardProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/native/layout/card.js

@@ -0,0 +1,57 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { Panel } from "./panel.js";
+import { Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/card.tsx
+/**
+* `@lt-three/web` の layout/card と同じ「タイトル・説明・アクション・本文・フッター」の構成。
+* 外装（surface 角丸・1px の極薄の罫線・raised 面）は `Panel` が持つ。
+*
+* 中身に自前の余白や区切り線を敷きたいだけなら、素の面である `Panel` を直接使う。
+*/
+function Card({ title, headingLevel, description, action, actionOnPress, actionLabel, content, footer, className, contentClassName }) {
+	const hasHeader = !!title || !!description || !!action;
+	const actionNode = typeof action === "string" || typeof action === "number" ? /* @__PURE__ */ jsx(Text$1, {
+		className: "text-sm",
+		children: action
+	}) : action;
+	return /* @__PURE__ */ jsxs(Panel, {
+		className,
+		children: [
+			hasHeader ? /* @__PURE__ */ jsxs(View, {
+				className: "flex-row items-start justify-between gap-2 border-b border-line px-4 py-3",
+				children: [/* @__PURE__ */ jsxs(View, {
+					className: "shrink gap-1",
+					children: [title ? /* @__PURE__ */ jsx(Text$1, {
+						role: headingLevel ? "heading" : void 0,
+						"aria-level": headingLevel ? String(headingLevel) : void 0,
+						className: "text-base font-semibold leading-none",
+						children: title
+					}) : null, description ? /* @__PURE__ */ jsx(Text$1, {
+						className: "text-muted-foreground text-sm",
+						children: description
+					}) : null]
+				}), action ? actionOnPress ? /* @__PURE__ */ jsx(Pressable, {
+					accessibilityRole: "button",
+					accessibilityLabel: actionLabel,
+					onPress: actionOnPress,
+					hitSlop: 12,
+					children: actionNode
+				}) : actionNode : null]
+			}) : null,
+			/* @__PURE__ */ jsx(View, {
+				className: cn("grow gap-4 p-4", contentClassName),
+				children: content
+			}),
+			footer ? /* @__PURE__ */ jsx(View, {
+				className: "flex-row justify-end gap-4 border-t border-line px-4 py-3",
+				children: footer
+			}) : null
+		]
+	});
+}
+
+//#endregion
+export { Card };

package/dist/native/layout/description.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+//#region src/native/layout/description.d.ts
+export type DescriptionSection = {
+  title: string;
+  titleIcon?: ReactNode;
+  description: ReactNode;
+};
+export type DescriptionProps = {
+  sections: DescriptionSection[];
+};
+/**
+ * 見出し + 本文のセクションを 1px 罫線で区切って積む。
+ * `@lt-three/web` の layout/description に対応する（利用規約・説明画面など）。
+ */
+export declare function Description({ sections }: DescriptionProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/description.js

@@ -0,0 +1,32 @@
+import { Text as Text$1 } from "../base/text.js";
+import { Separator } from "../atom/separator.js";
+import { Fragment } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/description.tsx
+/**
+* 見出し + 本文のセクションを 1px 罫線で区切って積む。
+* `@lt-three/web` の layout/description に対応する（利用規約・説明画面など）。
+*/
+function Description({ sections }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: "gap-8",
+		children: sections.map((section, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(View, { children: [/* @__PURE__ */ jsxs(View, {
+			className: "mb-2 flex-row items-center gap-2",
+			children: [section.titleIcon, /* @__PURE__ */ jsx(Text$1, {
+				className: "font-bold",
+				children: section.title
+			})]
+		}), /* @__PURE__ */ jsx(View, {
+			className: "gap-4",
+			children: typeof section.description === "string" ? /* @__PURE__ */ jsx(Text$1, {
+				className: "text-sm",
+				children: section.description
+			}) : section.description
+		})] }), index < sections.length - 1 ? /* @__PURE__ */ jsx(Separator, {}) : null] }, section.title))
+	});
+}
+
+//#endregion
+export { Description };

package/dist/native/layout/error.d.ts

@@ -0,0 +1,21 @@
+//#region src/native/layout/error.d.ts
+export type ErrorViewProps = {
+  /** 表示文言。共有パッケージなので使用側が持つ（i18n を持ち込まない）。 */
+  labels: {
+    title: string;
+    description?: string;
+    retry: string;
+  };
+  onRetry: () => void;
+  /**
+   * 既定は画面いっぱいに中央寄せする。スクロール内の一部として差し込むときは
+   * `h-full` が解決できないので、`className` で高さの指定を上書きする。
+   */
+  className?: string;
+};
+/**
+ * エラー時の画面。`@lt-three/web` の layout/error（ErrorComponent）に対応する。
+ * `once/error-boundary` の中身としても使う。
+ */
+export declare function ErrorView({ labels, onRetry, className }: ErrorViewProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/error.js

@@ -0,0 +1,44 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { Button } from "../atom/button.js";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+
+//#region src/native/layout/error.tsx
+/**
+* エラー時の画面。`@lt-three/web` の layout/error（ErrorComponent）に対応する。
+* `once/error-boundary` の中身としても使う。
+*/
+function ErrorView({ labels, onRetry, className }) {
+	const ink = useTokenColor("--ink-1000");
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("h-full w-full items-center justify-center gap-4 p-6", className),
+		children: [
+			/* @__PURE__ */ jsx(Feather, {
+				name: "alert-octagon",
+				size: 20,
+				color: ink
+			}),
+			/* @__PURE__ */ jsx(Text$1, {
+				className: "text-base font-semibold",
+				children: labels.title
+			}),
+			labels.description ? /* @__PURE__ */ jsx(Text$1, {
+				className: "text-muted-foreground text-center text-sm",
+				children: labels.description
+			}) : null,
+			/* @__PURE__ */ jsx(Button, {
+				className: "self-center",
+				variant: "outline",
+				size: "sm",
+				onPress: onRetry,
+				children: labels.retry
+			})
+		]
+	});
+}
+
+//#endregion
+export { ErrorView };

package/dist/native/layout/information.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+//#region src/native/layout/information.d.ts
+export type InformationField = {
+  label: string;
+  value: ReactNode;
+  separator?: never;
+} | {
+  label?: never;
+  value?: never;
+  separator: true;
+};
+export type InformationProps = {
+  fields: InformationField[];
+  /** 値を大きめに出す（詳細画面のヘッダー等）。 */
+  highlighted?: boolean;
+  className?: string;
+};
+/**
+ * ラベルと値を並べる定義リスト。`@lt-three/web` の layout/information に対応する。
+ *
+ * web は画面が広いので複数カラムに分けられるが、native は幅が足りないので
+ * **常に 1 カラム**（ラベル左・値右の行）で描く。
+ */
+export declare function Information({ fields, highlighted, className }: InformationProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/information.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { Separator } from "../atom/separator.js";
+import { Fragment } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/information.tsx
+/**
+* ラベルと値を並べる定義リスト。`@lt-three/web` の layout/information に対応する。
+*
+* web は画面が広いので複数カラムに分けられるが、native は幅が足りないので
+* **常に 1 カラム**（ラベル左・値右の行）で描く。
+*/
+function Information({ fields, highlighted, className }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: cn("gap-3", className),
+		children: fields.map((field, index) => field.separator ? /* @__PURE__ */ jsx(Separator, {}, `separator-${index}`) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(View, {
+			className: "flex-row items-center justify-between gap-4",
+			children: [/* @__PURE__ */ jsx(Text$1, {
+				className: "text-muted-foreground shrink-0 text-xs font-semibold",
+				children: field.label
+			}), /* @__PURE__ */ jsx(View, {
+				className: cn("min-h-7 shrink flex-row items-center justify-end gap-2"),
+				children: typeof field.value === "string" || typeof field.value === "number" ? /* @__PURE__ */ jsx(Text$1, {
+					className: cn(highlighted ? "text-lg" : "text-sm"),
+					children: field.value
+				}) : field.value
+			})]
+		}) }, field.label))
+	});
+}
+
+//#endregion
+export { Information };

package/dist/native/layout/locked.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+//#region src/native/layout/locked.d.ts
+export type LockedProps = {
+  /**
+   * ロックの向こう側にあるものの形。**読ませない前提の見本**を渡す。
+   * 実データを渡してはいけない（覆いは表現であって遮蔽ではない）。
+   */
+  children: ReactNode;
+  /** 面に重ねる短い説明。例:「Pro で見られます」。 */
+  label: string;
+  /** 見本であることの断り書き。例:「見本」。省略すると出さない。 */
+  sampleLabel?: string;
+  /** 面全体を押せるようにする。鍵は押したくなるので、基本は渡す。 */
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  /**
+   * 覆いの下に置く行き先（説明と出口のボタン）。**同じ面の中に入れる**ことで、
+   * 「見えないもの」と「その開け方」が 1 枚に収まる。
+   */
+  footer?: ReactNode;
+  /** 見本の高さ。既定 160。 */
+  height?: number;
+  className?: string;
+};
+/**
+ * ロックされた面。**中身の形は見せて、読めなくする。**
+ *
+ * 中身を丸ごと差し替えると「ロック」ではなく「不在」が伝わり、何が惜しいのか分からない。
+ * 形だけ残して覆うことで、そこに何があるかを示したまま手が届かないことを表す。
+ *
+ * **読み込み中の Skeleton とは別物**として作ってある。Skeleton は「待てば出てくる」を
+ * 意味するので、同じ見た目をロックに使ってはいけない（待っても出ないため）。
+ *
+ * 覆いは iOS 26 以上では `GlassView`（背後をぼかすガラス）、非対応環境（iOS 26 未満・Android・web）ではカード地で覆う。
+ * **見本はダミーなので、覆いの強さに機密性の要件は無い**。表現として選んでよい。
+ */
+export declare function Locked({ children, label, sampleLabel, onPress, accessibilityLabel, footer, height, className }: LockedProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/locked.js

@@ -0,0 +1,94 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { Panel } from "./panel.js";
+import { Pressable, View } from "react-native";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+import { GlassView, isLiquidGlassAvailable } from "expo-glass-effect";
+
+//#region src/native/layout/locked.tsx
+const FILL = {
+	position: "absolute",
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0,
+	alignItems: "center",
+	justifyContent: "center",
+	gap: 8,
+	padding: 16
+};
+/**
+* ロックされた面。**中身の形は見せて、読めなくする。**
+*
+* 中身を丸ごと差し替えると「ロック」ではなく「不在」が伝わり、何が惜しいのか分からない。
+* 形だけ残して覆うことで、そこに何があるかを示したまま手が届かないことを表す。
+*
+* **読み込み中の Skeleton とは別物**として作ってある。Skeleton は「待てば出てくる」を
+* 意味するので、同じ見た目をロックに使ってはいけない（待っても出ないため）。
+*
+* 覆いは iOS 26 以上では `GlassView`（背後をぼかすガラス）、非対応環境（iOS 26 未満・Android・web）ではカード地で覆う。
+* **見本はダミーなので、覆いの強さに機密性の要件は無い**。表現として選んでよい。
+*/
+function Locked({ children, label, sampleLabel, onPress, accessibilityLabel, footer, height = 160, className }) {
+	const ink = useTokenColor("--ink-900");
+	const cover = /* @__PURE__ */ jsxs(View, {
+		style: { height },
+		children: [
+			/* @__PURE__ */ jsx(View, {
+				pointerEvents: "none",
+				style: { height },
+				children
+			}),
+			isLiquidGlassAvailable() ? /* @__PURE__ */ jsx(GlassView, {
+				glassEffectStyle: "regular",
+				style: FILL
+			}) : /* @__PURE__ */ jsx(View, {
+				style: FILL,
+				className: "bg-card/85"
+			}),
+			/* @__PURE__ */ jsx(View, {
+				pointerEvents: "none",
+				style: FILL,
+				children: /* @__PURE__ */ jsx(LockBody, {
+					label,
+					sampleLabel,
+					ink
+				})
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(Panel, {
+		className: cn("overflow-hidden", className),
+		children: [onPress ? /* @__PURE__ */ jsx(Pressable, {
+			onPress,
+			accessible: false,
+			accessibilityLabel: accessibilityLabel ?? label,
+			children: cover
+		}) : cover, footer ? /* @__PURE__ */ jsx(View, {
+			className: "border-t border-line",
+			children: footer
+		}) : null]
+	});
+}
+function LockBody({ label, sampleLabel, ink }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Feather, {
+			name: "lock",
+			size: 20,
+			color: ink
+		}),
+		/* @__PURE__ */ jsx(Text$1, {
+			className: "text-foreground text-center text-[13px] font-semibold leading-[19px]",
+			children: label
+		}),
+		sampleLabel ? /* @__PURE__ */ jsx(Text$1, {
+			className: "text-muted-foreground text-center text-[11px] font-semibold tracking-widest",
+			children: sampleLabel
+		}) : null
+	] });
+}
+
+//#endregion
+export { Locked };

package/dist/native/layout/modal.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+//#region src/native/layout/modal.d.ts
+export type ModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** 見出し。ダイアログの名前になる。 */
+  title: ReactNode;
+  description?: ReactNode;
+  content: ReactNode;
+  footer?: ReactNode;
+  /** 背面タップで閉じるか（既定 false = 明示的に閉じさせる）。Esc・Android の戻る操作では、この設定にかかわらず閉じる。 */
+  dismissOnBackdropPress?: boolean;
+  /** 閉じるボタンの読み上げ名（既定は「閉じる」）。共有パッケージなので、別の言語はここで渡す。 */
+  closeLabel?: string;
+};
+/**
+ * 画面中央に出る確認・編集用のダイアログ。`@lt-three/web` の layout/modal に対応する。
+ * 外装は overlay 面（surface 角丸・shadow-lg。枠は付けない）で、本文だけがスクロールする。
+ *
+ * 見出しがダイアログの名前（`aria-labelledby`）、補足が説明（`aria-describedby`）になる。
+ * 役割（`role="dialog"`・`aria-modal`）・フォーカスの閉じ込め・Esc は `Modal` が持つ。
+ * web の `layout/modal` は `dialog`（`DialogController`）で開閉を受けるが、native は `open` / `onOpenChange`（移植元のまま）。
+ */
+export declare function Modal({ open, onOpenChange, title, description, content, footer, dismissOnBackdropPress, closeLabel }: ModalProps): import("react").JSX.Element;
+//#endregion