@lt-three/love3 0.0.0-stage → 0.1.0

package/dist/native/layout/modal.js

@@ -0,0 +1,93 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { Text as Text$1 } from "../base/text.js";
+import { CLOSE_LABEL } from "../lib/labels.js";
+import { useId } from "react";
+import { Modal as Modal$1, Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+
+//#region src/native/layout/modal.tsx
+/**
+* 画面中央に出る確認・編集用のダイアログ。`@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`（移植元のまま）。
+*/
+function Modal({ open, onOpenChange, title, description, content, footer, dismissOnBackdropPress = false, closeLabel = CLOSE_LABEL }) {
+	const ink = useTokenColor("--ink-500");
+	const id = useId();
+	const titleId = `${id}-title`;
+	const descriptionId = `${id}-description`;
+	return /* @__PURE__ */ jsx(Modal$1, {
+		visible: open,
+		transparent: true,
+		animationType: "fade",
+		onRequestClose: () => onOpenChange(false),
+		"aria-labelledby": titleId,
+		"aria-describedby": description ? descriptionId : void 0,
+		children: /* @__PURE__ */ jsxs(View, {
+			style: { flex: 1 },
+			children: [/* @__PURE__ */ jsx(Pressable, {
+				accessible: false,
+				style: StyleSheet.absoluteFill,
+				className: "bg-scrim",
+				onPress: dismissOnBackdropPress ? () => onOpenChange(false) : void 0
+			}), /* @__PURE__ */ jsx(View, {
+				pointerEvents: "box-none",
+				className: "flex-1 items-center justify-center p-6",
+				children: /* @__PURE__ */ jsx(View, {
+					className: "max-h-[80%] w-full rounded-surface bg-popover shadow-lg",
+					children: /* @__PURE__ */ jsxs(View, {
+						className: "shrink overflow-hidden rounded-surface",
+						children: [
+							/* @__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: [/* @__PURE__ */ jsx(Text$1, {
+										id: titleId,
+										role: "heading",
+										"aria-level": "2",
+										className: "text-base leading-6 font-semibold",
+										children: title
+									}), description ? /* @__PURE__ */ jsx(Text$1, {
+										id: descriptionId,
+										className: "text-muted-foreground text-[13px] leading-5",
+										children: description
+									}) : null]
+								}), /* @__PURE__ */ jsx(Pressable, {
+									accessibilityRole: "button",
+									accessibilityLabel: closeLabel,
+									hitSlop: 12,
+									onPress: () => onOpenChange(false),
+									children: /* @__PURE__ */ jsx(Feather, {
+										name: "x",
+										size: 16,
+										color: ink
+									})
+								})]
+							}),
+							/* @__PURE__ */ jsx(ScrollView, {
+								style: { flexShrink: 1 },
+								contentContainerStyle: {
+									gap: 16,
+									padding: 16
+								},
+								children: content
+							}),
+							footer ? /* @__PURE__ */ jsx(View, {
+								className: "flex-row justify-end gap-2 border-t border-line px-4 py-3",
+								children: footer
+							}) : null
+						]
+					})
+				})
+			})]
+		})
+	});
+}
+
+//#endregion
+export { Modal };

package/dist/native/layout/not-found.d.ts

@@ -0,0 +1,17 @@
+//#region src/native/layout/not-found.d.ts
+export type NotFoundProps = {
+  /** 表示文言。共有パッケージなので使用側が持つ。 */
+  labels: {
+    title: string;
+    back: string;
+  };
+  onBack: () => void;
+};
+/**
+ * 見つからなかった画面。`@lt-three/web` の layout/not-found に対応する。
+ *
+ * web は `action="previous-page"` で `history.back()` を呼ぶが、native の戻り先は
+ * ナビゲーションスタックに依存するので、使用側から `onBack`（`router.back()` 等）を受け取る。
+ */
+export declare function NotFound({ labels, onBack }: NotFoundProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/not-found.js

@@ -0,0 +1,30 @@
+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";
+
+//#region src/native/layout/not-found.tsx
+/**
+* 見つからなかった画面。`@lt-three/web` の layout/not-found に対応する。
+*
+* web は `action="previous-page"` で `history.back()` を呼ぶが、native の戻り先は
+* ナビゲーションスタックに依存するので、使用側から `onBack`（`router.back()` 等）を受け取る。
+*/
+function NotFound({ labels, onBack }) {
+	return /* @__PURE__ */ jsxs(View, {
+		className: "h-full w-full items-center justify-center gap-4 p-6",
+		children: [/* @__PURE__ */ jsx(Text$1, {
+			className: "text-base font-semibold",
+			children: labels.title
+		}), /* @__PURE__ */ jsx(Button, {
+			className: "self-center",
+			variant: "outline",
+			size: "sm",
+			onPress: onBack,
+			children: labels.back
+		})]
+	});
+}
+
+//#endregion
+export { NotFound };

package/dist/native/layout/page-frame.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+//#region src/native/layout/page-frame.d.ts
+export type PageFrameProps = {
+  /** ヘッダの見出し（画面のタイトル。`role="heading"` `aria-level=1`）。 */
+  title: string;
+  /** ヘッダ右端（戻る・設定・ユーザーなどのボタン）。 */
+  trailing?: ReactNode;
+  children: ReactNode;
+  /** 本文の下のフッタ（著作権・リンクなど）。 */
+  footer?: ReactNode;
+  /** 下に固定するナビ（`layout/tab-bar`）。本文はこの上でスクロールする。 */
+  nav?: ReactNode;
+  /** 本文（スクロールする領域）の追加クラス。 */
+  contentClassName?: string;
+  className?: string;
+};
+/**
+ * 画面の骨組み。`@lt-three/love3/web/layout/page-frame.tsx` に対応する（header・main・footer・nav）。
+ * 上にヘッダ（banner）、真ん中にスクロールする本文（main）、その下にフッタ（contentinfo）、最下段にナビ（`TabBar`）。
+ * 上端・下端の安全領域はアプリが持つ（外側の `SafeAreaView` か、`className` の `pt-*`）。
+ */
+export declare function PageFrame({ title, trailing, children, footer, nav, contentClassName, className }: PageFrameProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/page-frame.js

@@ -0,0 +1,46 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { ScrollView, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/page-frame.tsx
+/**
+* 画面の骨組み。`@lt-three/love3/web/layout/page-frame.tsx` に対応する（header・main・footer・nav）。
+* 上にヘッダ（banner）、真ん中にスクロールする本文（main）、その下にフッタ（contentinfo）、最下段にナビ（`TabBar`）。
+* 上端・下端の安全領域はアプリが持つ（外側の `SafeAreaView` か、`className` の `pt-*`）。
+*/
+function PageFrame({ title, trailing, children, footer, nav, contentClassName, className }) {
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("bg-background flex-1", className),
+		children: [
+			/* @__PURE__ */ jsxs(View, {
+				role: "banner",
+				className: "border-line flex-row items-center justify-between gap-2 border-b px-4 py-3",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					role: "heading",
+					"aria-level": "1",
+					numberOfLines: 2,
+					className: "shrink text-lg font-semibold",
+					children: title
+				}), trailing]
+			}),
+			/* @__PURE__ */ jsxs(ScrollView, {
+				className: "flex-1",
+				contentContainerClassName: "gap-4 p-4",
+				children: [/* @__PURE__ */ jsx(View, {
+					role: "main",
+					className: cn("gap-4", contentClassName),
+					children
+				}), footer ? /* @__PURE__ */ jsx(View, {
+					role: "contentinfo",
+					className: "border-line border-t pt-4",
+					children: footer
+				}) : null]
+			}),
+			nav
+		]
+	});
+}
+
+//#endregion
+export { PageFrame };

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { ViewStyle } from "react-native";
+//#region src/native/layout/panel.d.ts
+export type PanelProps = {
+  children: ReactNode;
+  className?: string;
+  style?: ViewStyle;
+};
+/**
+ * 内容面。`@lt-three/web` の Card と同じ外装（surface 角丸・1px の極薄の罫線・raised 面。影は付けない）。
+ * 内側の余白は使用側が決める。
+ *
+ * 罫線は `border-border` ではなく `border-line` を使う。`--border` は
+ * スタイルシート中で 1 度しか宣言されないため react-native-css がビルド時に
+ * 単一値へ畳んでしまい、`.dark` で切り替わらなくなる（`.claude/rules/packages/ts/index.md` 参照）。
+ */
+export declare function Panel({ children, className, style }: PanelProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/panel.js

@@ -0,0 +1,23 @@
+import { cn } from "../lib/utils.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/layout/panel.tsx
+/**
+* 内容面。`@lt-three/web` の Card と同じ外装（surface 角丸・1px の極薄の罫線・raised 面。影は付けない）。
+* 内側の余白は使用側が決める。
+*
+* 罫線は `border-border` ではなく `border-line` を使う。`--border` は
+* スタイルシート中で 1 度しか宣言されないため react-native-css がビルド時に
+* 単一値へ畳んでしまい、`.dark` で切り替わらなくなる（`.claude/rules/packages/ts/index.md` 参照）。
+*/
+function Panel({ children, className, style }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: cn("overflow-hidden rounded-surface border border-line bg-card", className),
+		style,
+		children
+	});
+}
+
+//#endregion
+export { Panel };

package/dist/native/layout/reorderable-list.d.ts

@@ -0,0 +1,42 @@
+import { ReactElement, ReactNode } from "react";
+//#region src/native/layout/reorderable-list.d.ts
+export type ReorderableRenderInfo<T> = {
+  item: T;
+  index: number;
+  /**
+   * 掴んでドラッグを始める。**行自身の `Pressable` の `onLongPress` に渡すこと。**
+   * ラッパーの `Pressable` に付けると、行の内側の `Pressable`（タップで詳細を開く等）が
+   * レスポンダを取ってしまい、長押しが外側まで来ない ＝ ドラッグが始まらない。
+   */
+  drag: () => void;
+  /** その行がいま掴まれているか。掴んだ行は見た目を明確に変えること。 */
+  active: boolean;
+};
+export type ReorderableListProps<T> = {
+  data: T[];
+  keyExtractor: (item: T) => string;
+  renderItem: (info: ReorderableRenderInfo<T>) => ReactNode;
+  /** 並べ替え後の配列を返す。永続化は使用側が行う。 */
+  onReorder: (next: T[]) => void;
+  /** false のあいだはドラッグを受け付けない（絞り込み中など）。 */
+  dragEnabled?: boolean;
+  ListHeaderComponent?: ReactElement | null;
+  ListFooterComponent?: ReactElement | null;
+  ListEmptyComponent?: ReactElement | null;
+  contentContainerClassName?: string;
+};
+/**
+ * 長押しで掴んで並べ替えるリスト。**iOS / Android の同じ実装で動く**。
+ *
+ * SwiftUI の `List.ForEach onMove` は iOS でしか使えず、放っておくと
+ * 「Android だけ並べ替えできない」が生まれる。ここは Reanimated + Gesture Handler の
+ * `react-native-reorderable-list` に寄せて、プラットフォームで実装を分けない。
+ *
+ * **アプリの root に `GestureHandlerRootView` が要る**（Android）。無くても例外は出ず、
+ * ドラッグもスワイプも無言で効かなくなる。
+ *
+ * 並べ替えの確定は `onReorder` の 1 回だけ。ドラッグ中は内部で表示だけ動かすので、
+ * 途中経過で API を叩かない。
+ */
+export declare function ReorderableList<T>({ data, keyExtractor, renderItem, onReorder, dragEnabled, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, contentContainerClassName }: ReorderableListProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/reorderable-list.js

@@ -0,0 +1,52 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import Reorderable, { reorderItems, useIsActive, useReorderableDrag } from "react-native-reorderable-list";
+
+//#region src/native/layout/reorderable-list.tsx
+/**
+* 長押しで掴んで並べ替えるリスト。**iOS / Android の同じ実装で動く**。
+*
+* SwiftUI の `List.ForEach onMove` は iOS でしか使えず、放っておくと
+* 「Android だけ並べ替えできない」が生まれる。ここは Reanimated + Gesture Handler の
+* `react-native-reorderable-list` に寄せて、プラットフォームで実装を分けない。
+*
+* **アプリの root に `GestureHandlerRootView` が要る**（Android）。無くても例外は出ず、
+* ドラッグもスワイプも無言で効かなくなる。
+*
+* 並べ替えの確定は `onReorder` の 1 回だけ。ドラッグ中は内部で表示だけ動かすので、
+* 途中経過で API を叩かない。
+*/
+function ReorderableList({ data, keyExtractor, renderItem, onReorder, dragEnabled = true, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, contentContainerClassName }) {
+	return /* @__PURE__ */ jsx(Reorderable, {
+		data,
+		keyExtractor: (item) => keyExtractor(item),
+		renderItem: ({ item, index }) => /* @__PURE__ */ jsx(Cell, {
+			item,
+			index,
+			render: renderItem
+		}),
+		onReorder: ({ from, to }) => onReorder(reorderItems(data, from, to)),
+		dragEnabled,
+		shouldUpdateActiveItem: true,
+		ListHeaderComponent: ListHeaderComponent ?? void 0,
+		ListFooterComponent: ListFooterComponent ?? void 0,
+		ListEmptyComponent: ListEmptyComponent ?? void 0,
+		contentContainerClassName
+	});
+}
+/**
+* 行の描画。`useReorderableDrag` / `useIsActive` は**リストの item の中でしか呼べない**ので、
+* ここで呼んで使用側へ渡す。
+*/
+function Cell({ item, index, render }) {
+	const drag = useReorderableDrag();
+	const active = useIsActive();
+	return /* @__PURE__ */ jsx(Fragment, { children: render({
+		item,
+		index,
+		drag,
+		active
+	}) });
+}
+
+//#endregion
+export { ReorderableList };

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

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+//#region src/native/layout/sheet.d.ts
+export type SheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** 見出し。ダイアログの名前になる（名前の無いダイアログにしないため、移植元と違って必須。web の `layout/sheet` と同じ）。 */
+  title: ReactNode;
+  description?: ReactNode;
+  content: ReactNode;
+  footer?: ReactNode;
+  /** 背面タップで閉じるか（既定 true）。 */
+  dismissOnBackdropPress?: boolean;
+  /** 閉じるボタンの読み上げ名（既定は「閉じる」）。 */
+  closeLabel?: string;
+  /** 中身に余白を敷くか（既定 true）。端まで敷き詰める行リストでは false。 */
+  padded?: boolean;
+  /** 画面高に対する最大の高さ（既定 0.85）。 */
+  maxHeightRatio?: number;
+  /** 閉じ切った後に呼ばれる。**次のシートを開くときはここで開くこと**（`base/sheet` 参照）。 */
+  onClosed?: () => void;
+};
+/**
+ * 下から出るシート。`@lt-three/web` の layout/sheet（画面端から出るパネル）に対応する。
+ * native では端ではなく下から出すのが標準の作法なので、位置だけ読み替えている（web の `side` は持たない）。
+ *
+ * 面の出し方・スクリム・safe-area・キーボード回避は `base/sheet` が持つ。
+ * 見出しがダイアログの名前（`aria-labelledby`）、補足が説明（`aria-describedby`）になる。
+ */
+export declare function Sheet({ open, onOpenChange, title, description, content, footer, dismissOnBackdropPress, closeLabel, padded, maxHeightRatio, onClosed }: SheetProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/sheet.js

@@ -0,0 +1,46 @@
+import { isBlankNode } from "../lib/utils.js";
+import { SheetFooter, SheetHeader, SheetScroll, SheetShell } from "../base/sheet.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/sheet.tsx
+/**
+* 下から出るシート。`@lt-three/web` の layout/sheet（画面端から出るパネル）に対応する。
+* native では端ではなく下から出すのが標準の作法なので、位置だけ読み替えている（web の `side` は持たない）。
+*
+* 面の出し方・スクリム・safe-area・キーボード回避は `base/sheet` が持つ。
+* 見出しがダイアログの名前（`aria-labelledby`）、補足が説明（`aria-describedby`）になる。
+*/
+function Sheet({ open, onOpenChange, title, description, content, footer, dismissOnBackdropPress = true, closeLabel, padded = true, maxHeightRatio = .85, onClosed }) {
+	const id = useId();
+	const titleId = `${id}-title`;
+	const descriptionId = `${id}-description`;
+	return /* @__PURE__ */ jsxs(SheetShell, {
+		open,
+		onOpenChange,
+		dismissOnBackdropPress,
+		maxHeightRatio,
+		onClosed,
+		"aria-labelledby": isBlankNode(title) ? void 0 : titleId,
+		"aria-describedby": isBlankNode(description) ? void 0 : descriptionId,
+		children: [
+			/* @__PURE__ */ jsx(SheetHeader, {
+				title,
+				description,
+				closeLabel,
+				onClose: () => onOpenChange(false),
+				titleId,
+				descriptionId
+			}),
+			/* @__PURE__ */ jsx(SheetScroll, {
+				padded,
+				hasFooter: !!footer,
+				children: content
+			}),
+			footer ? /* @__PURE__ */ jsx(SheetFooter, { children: footer }) : null
+		]
+	});
+}
+
+//#endregion
+export { Sheet };

package/dist/native/layout/simple-dialog.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+//#region src/native/layout/simple-dialog.d.ts
+export type SimpleDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  children: ReactNode;
+  /** 閉じるボタンの読み上げ名（既定は「閉じる」）。 */
+  closeLabel?: string;
+};
+/**
+ * タイトルと本文だけの軽量なダイアログ。`@lt-three/web` の layout/simple-dialog に対応する。
+ * フッターや説明が要るなら `Modal` を直接使う。
+ */
+export declare function SimpleDialog({ open, onOpenChange, title, children, closeLabel }: SimpleDialogProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/simple-dialog.js

@@ -0,0 +1,20 @@
+import { Modal } from "./modal.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/layout/simple-dialog.tsx
+/**
+* タイトルと本文だけの軽量なダイアログ。`@lt-three/web` の layout/simple-dialog に対応する。
+* フッターや説明が要るなら `Modal` を直接使う。
+*/
+function SimpleDialog({ open, onOpenChange, title, children, closeLabel }) {
+	return /* @__PURE__ */ jsx(Modal, {
+		open,
+		onOpenChange,
+		title,
+		content: children,
+		closeLabel
+	});
+}
+
+//#endregion
+export { SimpleDialog };

package/dist/native/layout/simple-table.d.ts

@@ -0,0 +1,50 @@
+import { Breakpoint } from "../lib/breakpoints.js";
+import { ReactNode } from "react";
+//#region src/native/layout/simple-table.d.ts
+/**
+ * 宣言的な薄い罫線のデータテーブル。columns / data を渡すだけで使える。
+ * `@lt-three/web` の layout/simple-table と同じ列定義・同じ名前の props（`onRowClick`・`hideBelow`）を取る。
+ *
+ * ヘッダは frame の淡い面、行罫線は 1px の極薄の線。
+ * 数値列は mono + タブラー + 右寄せにする。
+ */
+export type SimpleColumn<T> = {
+  /** 列キー（行内で一意）。 */
+  key: string;
+  header: ReactNode;
+  /** セル / ヘッダの揃え（既定 left）。 */
+  align?: "left" | "right" | "center";
+  /** 等幅 + タブラー（数値・ID 向け）。 */
+  mono?: boolean;
+  /** 強調（font-medium）。 */
+  strong?: boolean;
+  /**
+   * この幅（Tailwind と同じブレークポイント: sm 640・md 768・lg 1024 px。**画面の幅**で見る）より狭いときは列ごと隠す。
+   * 狭い画面で重要でない列（ID・補足など）を畳む（web の `hideBelow` と同じ）。未指定なら常に出す。
+   */
+  hideBelow?: Breakpoint;
+  /** 列幅（px）。省略時は等分。 */
+  width?: number;
+  /** セル（View）の追加クラス。 */
+  cellClassName?: string;
+  /** ヘッダのセル（View）の追加クラス。 */
+  headClassName?: string;
+  /** セルの描画。未指定時は row[key] を表示する。 */
+  render?: (row: T) => ReactNode;
+};
+export type SimpleTableProps<T> = {
+  columns: SimpleColumn<T>[];
+  data: T[];
+  /** 行キーの導出。未指定時は index を使う。 */
+  getRowKey?: (row: T, index: number) => string;
+  /**
+   * 行を押す（web の `onRowClick` と同じ名前）。渡すと各行がボタン（フォーカスでき、Enter・Space でも押せる）になり、
+   * フォーカスは不透明の outline で示す。
+   */
+  onRowClick?: (row: T) => void;
+  className?: string;
+  /** 列が画面幅に収まらないとき横スクロールさせる。 */
+  horizontalScroll?: boolean;
+};
+export declare function SimpleTable<T extends object>({ columns: allColumns, data, getRowKey, onRowClick, className, horizontalScroll }: SimpleTableProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/simple-table.js

@@ -0,0 +1,75 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { tabularNums } from "../lib/typography.js";
+import { isShownAtWidth } from "../lib/breakpoints.js";
+import { isValidElement } from "react";
+import { Pressable, ScrollView, View, useWindowDimensions } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/simple-table.tsx
+const alignClass = {
+	left: "text-left",
+	right: "text-right",
+	center: "text-center"
+};
+const justifyClass = {
+	left: "justify-start",
+	right: "justify-end",
+	center: "justify-center"
+};
+/** `render` が無い列の既定の描画。行の `key` の値が、文字・数値・要素のときだけ表示する。 */
+function cellValue(row, key) {
+	const value = Reflect.get(row, key);
+	if (typeof value === "string" || typeof value === "number" || isValidElement(value)) return value;
+	return null;
+}
+function SimpleTable({ columns: allColumns, data, getRowKey, onRowClick, className, horizontalScroll }) {
+	const { width: screenWidth } = useWindowDimensions();
+	const columns = allColumns.filter((col) => isShownAtWidth(col.hideBelow, screenWidth));
+	const table = /* @__PURE__ */ jsxs(View, {
+		className: cn(!horizontalScroll && "w-full", className),
+		children: [/* @__PURE__ */ jsx(View, {
+			className: "flex-row border-b border-line bg-frame",
+			children: columns.map((col) => /* @__PURE__ */ jsx(View, {
+				style: col.width ? { width: col.width } : void 0,
+				className: cn("px-2 py-2", !col.width && "flex-1", justifyClass[col.align ?? "left"], col.headClassName),
+				children: typeof col.header === "string" || typeof col.header === "number" ? /* @__PURE__ */ jsx(Text$1, {
+					className: cn("text-muted-foreground text-xs font-medium", alignClass[col.align ?? "left"]),
+					children: col.header
+				}) : col.header
+			}, col.key))
+		}), data.map((row, index) => {
+			const content = /* @__PURE__ */ jsx(View, {
+				className: "flex-row border-b border-line",
+				children: columns.map((col) => {
+					const cell = col.render ? col.render(row) : cellValue(row, col.key);
+					return /* @__PURE__ */ jsx(View, {
+						style: col.width ? { width: col.width } : void 0,
+						className: cn("px-2 py-2.5", !col.width && "flex-1", justifyClass[col.align ?? "left"], col.cellClassName),
+						children: typeof cell === "string" || typeof cell === "number" ? /* @__PURE__ */ jsx(Text$1, {
+							style: col.mono ? tabularNums : void 0,
+							className: cn("text-sm", alignClass[col.align ?? "left"], col.mono && "font-mono", col.strong && "text-foreground font-medium"),
+							children: cell
+						}) : cell
+					}, col.key);
+				})
+			});
+			const key = getRowKey ? getRowKey(row, index) : String(index);
+			return onRowClick ? /* @__PURE__ */ jsx(Pressable, {
+				accessibilityRole: "button",
+				onPress: () => onRowClick(row),
+				className: "focus:outline-ring focus:outline-2 focus:-outline-offset-2",
+				children: content
+			}, key) : /* @__PURE__ */ jsx(View, { children: content }, key);
+		})]
+	});
+	if (!horizontalScroll) return table;
+	return /* @__PURE__ */ jsx(ScrollView, {
+		horizontal: true,
+		showsHorizontalScrollIndicator: false,
+		children: table
+	});
+}
+
+//#endregion
+export { SimpleTable };

package/dist/native/layout/tab-bar.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+//#region src/native/layout/tab-bar.d.ts
+export type TabBarItem = {
+  /** 選択値（一意）。 */
+  value: string;
+  /** 文字のラベル。アイコンだけにしない（読み上げ名・分かりやすさのため）。 */
+  label: string;
+  /**
+   * アイコン。選択状態に合う色（`color`）を渡すので、`Symbol` の `tintColor` などに使う。
+   * 文字だけで足りるなら省く。
+   */
+  icon?: (state: {
+    active: boolean;
+    color: string;
+  }) => ReactNode;
+};
+export type TabBarProps = {
+  items: readonly TabBarItem[];
+  /** 選択中の値。 */
+  value: string;
+  onValueChange: (value: string) => void;
+  /** 読み上げ名（ランドマークが複数あるとき区別する）。既定は「メイン」。 */
+  accessibilityLabel?: string;
+  className?: string;
+};
+/**
+ * 画面の下に置く、トップレベルの行き先の切り替え（3〜5 件）。`layout/tabs`（本文を切り替える下線タブ）とは別物。
+ * 選択中は `text-action-ink`（暗い面でも AA）で、選択状態は色だけにせず太さ（`font-semibold`）でも示す。
+ * 1 件の押す範囲は高さ 56px 以上（実機の 44pt 基準を上回る）。**下端の安全領域（ホームインジケータ）はアプリが持つ**
+ * （`className` に `pb-*` を渡すか、外側の `SafeAreaView` に置く）。
+ */
+export declare function TabBar({ items, value, onValueChange, accessibilityLabel, className }: TabBarProps): import("react").JSX.Element;
+//#endregion