@lt-three/love3 0.0.0 → 0.1.1

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
+/**
+* A confirmation/editing dialog shown at the center of the screen. Corresponds to the web `layout/modal`.
+* The shell is an overlay surface (surface radius, shadow-lg; no border), and only the body scrolls.
+*
+* The heading is the dialog's name (`aria-labelledby`), and the supplementary text is its description (`aria-describedby`).
+* The role (`role="dialog"`, `aria-modal`), focus trapping, and Esc are handled by `Modal`.
+* The web `layout/modal` takes open/close through `dialog` (`DialogController`), whereas native uses `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 = {
+  /** Display text. This is a shared package, so the caller owns it. */
+  labels: {
+    title: string;
+    back: string;
+  };
+  onBack: () => void;
+};
+/**
+ * The screen shown when something is not found.
+ *
+ * Web calls `history.back()` with `action="previous-page"`, but native's back destination
+ * depends on the navigation stack, so it receives `onBack` (`router.back()`, etc.) from the caller.
+ */
+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
+/**
+* The screen shown when something is not found.
+*
+* Web calls `history.back()` with `action="previous-page"`, but native's back destination
+* depends on the navigation stack, so it receives `onBack` (`router.back()`, etc.) from the caller.
+*/
+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 = {
+  /** Header heading (the screen title; `role="heading"` `aria-level=1`). */
+  title: string;
+  /** Right end of the header (buttons such as back, settings, user). */
+  trailing?: ReactNode;
+  children: ReactNode;
+  /** Footer below the body (copyright, links, etc.). */
+  footer?: ReactNode;
+  /** Navigation pinned at the bottom (`layout/tab-bar`). The body scrolls above it. */
+  nav?: ReactNode;
+  /** Extra classes for the body (the scrolling area). */
+  contentClassName?: string;
+  className?: string;
+};
+/**
+ * The screen skeleton. Corresponds to `@lt-three/love3/web/layout/page-frame.tsx` (header, main, footer, nav).
+ * A header (banner) at the top, a scrolling body (main) in the middle, a footer (contentinfo) below it, and navigation (`TabBar`) at the very bottom.
+ * The top and bottom safe areas are the app's responsibility (an outer `SafeAreaView`, or `pt-*` in `className`).
+ */
+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
+/**
+* The screen skeleton. Corresponds to `@lt-three/love3/web/layout/page-frame.tsx` (header, main, footer, nav).
+* A header (banner) at the top, a scrolling body (main) in the middle, a footer (contentinfo) below it, and navigation (`TabBar`) at the very bottom.
+* The top and bottom safe areas are the app's responsibility (an outer `SafeAreaView`, or `pt-*` in `className`).
+*/
+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;
+};
+/**
+ * A content surface. Same shell as the web Card (surface radius, a very faint 1px rule, raised surface; no shadow).
+ * The inner padding is up to the caller.
+ *
+ * The rule uses `border-line` rather than `border-border`. `--border` is declared only once
+ * in the stylesheet, so react-native-css folds it into a single value at build time
+ * and it no longer switches under `.dark`.
+ */
+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
+/**
+* A content surface. Same shell as the web Card (surface radius, a very faint 1px rule, raised surface; no shadow).
+* The inner padding is up to the caller.
+*
+* The rule uses `border-line` rather than `border-border`. `--border` is declared only once
+* in the stylesheet, so react-native-css folds it into a single value at build time
+* and it no longer switches under `.dark`.
+*/
+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;
+  /**
+   * Grabs the row and starts dragging. **Pass it to the row's own `Pressable` `onLongPress`.**
+   * If attached to a wrapper `Pressable`, a `Pressable` inside the row (one that opens details on tap, etc.)
+   * takes the responder and the long press never reaches the outer one, so dragging does not start.
+   */
+  drag: () => void;
+  /** Whether the row is currently grabbed. Make the grabbed row look clearly different. */
+  active: boolean;
+};
+export type ReorderableListProps<T> = {
+  data: T[];
+  keyExtractor: (item: T) => string;
+  renderItem: (info: ReorderableRenderInfo<T>) => ReactNode;
+  /** Receives the reordered array. Persistence is up to the caller. */
+  onReorder: (next: T[]) => void;
+  /** While false, dragging is not accepted (for example while filtering). */
+  dragEnabled?: boolean;
+  ListHeaderComponent?: ReactElement | null;
+  ListFooterComponent?: ReactElement | null;
+  ListEmptyComponent?: ReactElement | null;
+  contentContainerClassName?: string;
+};
+/**
+ * A list reordered by long-press and drag. **Runs on the same implementation for iOS and Android.**
+ *
+ * SwiftUI's `List.ForEach onMove` works only on iOS, which would leave
+ * "reordering works everywhere except Android". This builds on Reanimated + Gesture Handler's
+ * `react-native-reorderable-list` so the implementation does not split by platform.
+ *
+ * **A `GestureHandlerRootView` is required at the app's root** (Android). Without it no exception is thrown,
+ * and dragging and swiping silently stop working.
+ *
+ * The reorder is committed by a single `onReorder` call. During a drag only the display moves internally,
+ * so do not hit an API with intermediate states.
+ */
+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
+/**
+* A list reordered by long-press and drag. **Runs on the same implementation for iOS and Android.**
+*
+* SwiftUI's `List.ForEach onMove` works only on iOS, which would leave
+* "reordering works everywhere except Android". This builds on Reanimated + Gesture Handler's
+* `react-native-reorderable-list` so the implementation does not split by platform.
+*
+* **A `GestureHandlerRootView` is required at the app's root** (Android). Without it no exception is thrown,
+* and dragging and swiping silently stop working.
+*
+* The reorder is committed by a single `onReorder` call. During a drag only the display moves internally,
+* so do not hit an API with intermediate states.
+*/
+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
+	});
+}
+/**
+* Renders a row. `useReorderableDrag` / `useIsActive` **can only be called inside a list item**,
+* so they are called here and handed to the caller.
+*/
+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;
+  /** Heading. Becomes the dialog's name (required so the dialog is never nameless; same as the web `layout/sheet`). */
+  title: ReactNode;
+  description?: ReactNode;
+  content: ReactNode;
+  footer?: ReactNode;
+  /** Whether tapping the backdrop closes it (default true). */
+  dismissOnBackdropPress?: boolean;
+  /** Spoken name of the close button (default "閉じる", i.e. "Close"). */
+  closeLabel?: string;
+  /** Whether to pad the content (default true). Use false for row lists that run edge to edge. */
+  padded?: boolean;
+  /** Maximum height as a ratio of the screen height (default 0.85). */
+  maxHeightRatio?: number;
+  /** Called after it has fully closed. **Open the next sheet here** (see `base/sheet`). */
+  onClosed?: () => void;
+};
+/**
+ * A sheet that slides up from the bottom. Corresponds to the web `layout/sheet` (a panel that slides in from a screen edge).
+ * On native the standard convention is to slide up from the bottom rather than from an edge, so only the position is reinterpreted (there is no web `side`).
+ *
+ * How the surface appears, the scrim, safe-area, and keyboard avoidance belong to `base/sheet`.
+ * The heading is the dialog's name (`aria-labelledby`), and the supplementary text is its description (`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
+/**
+* A sheet that slides up from the bottom. Corresponds to the web `layout/sheet` (a panel that slides in from a screen edge).
+* On native the standard convention is to slide up from the bottom rather than from an edge, so only the position is reinterpreted (there is no web `side`).
+*
+* How the surface appears, the scrim, safe-area, and keyboard avoidance belong to `base/sheet`.
+* The heading is the dialog's name (`aria-labelledby`), and the supplementary text is its description (`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;
+  /** Spoken name of the close button (default "閉じる", i.e. "Close"). */
+  closeLabel?: string;
+};
+/**
+ * A lightweight dialog with only a title and a body. Corresponds to the web `layout/simple-dialog`.
+ * Use `Modal` directly if you need a footer or a description.
+ */
+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
+/**
+* A lightweight dialog with only a title and a body. Corresponds to the web `layout/simple-dialog`.
+* Use `Modal` directly if you need a footer or a description.
+*/
+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
+/**
+ * A declarative data table with thin rules. Just pass columns / data.
+ * It takes the same column definitions and the same prop names (`onRowClick`, `hideBelow`) as the web `layout/simple-table`.
+ *
+ * The header is a pale frame surface, and row rules are very faint 1px lines.
+ * Numeric columns use mono + tabular + right alignment.
+ */
+export type SimpleColumn<T> = {
+  /** Column key (unique within a row). */
+  key: string;
+  header: ReactNode;
+  /** Alignment of cells / header (default left). */
+  align?: "left" | "right" | "center";
+  /** Monospace + tabular (for numbers and IDs). */
+  mono?: boolean;
+  /** Emphasis (font-medium). */
+  strong?: boolean;
+  /**
+   * Hides the whole column when narrower than this width (same breakpoints as Tailwind: sm 640, md 768, lg 1024 px; judged by the **screen width**).
+   * Collapses unimportant columns (ID, notes, etc.) on narrow screens (same as web's `hideBelow`). Always shown when unspecified.
+   */
+  hideBelow?: Breakpoint;
+  /** Column width (px). Divided equally when omitted. */
+  width?: number;
+  /** Extra classes for the cell (View). */
+  cellClassName?: string;
+  /** Extra classes for the header cell (View). */
+  headClassName?: string;
+  /** Renders the cell. Shows row[key] when unspecified. */
+  render?: (row: T) => ReactNode;
+};
+export type SimpleTableProps<T> = {
+  columns: SimpleColumn<T>[];
+  data: T[];
+  /** Derives the row key. Uses the index when unspecified. */
+  getRowKey?: (row: T, index: number) => string;
+  /**
+   * Pressing a row (same name as web's `onRowClick`). When passed, each row becomes a button (focusable, and pressable with Enter and Space),
+   * and focus is shown with an opaque outline.
+   */
+  onRowClick?: (row: T) => void;
+  className?: string;
+  /** Scrolls horizontally when the columns do not fit the screen width. */
+  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"
+};
+/** Default rendering for a column without `render`. Shows the row's `key` value only when it is text, a number, or an element. */
+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 = {
+  /** Selection value (unique). */
+  value: string;
+  /** Text label. Never use an icon alone (for the spoken name and clarity). */
+  label: string;
+  /**
+   * Icon. It receives the color (`color`) matching the selection state, for use as `Symbol`'s `tintColor` and the like.
+   * Omit it if text alone is enough.
+   */
+  icon?: (state: {
+    active: boolean;
+    color: string;
+  }) => ReactNode;
+};
+export type TabBarProps = {
+  items: readonly TabBarItem[];
+  /** The selected value. */
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Spoken name (distinguishes landmarks when there are several). Defaults to "メイン" ("Main"). */
+  accessibilityLabel?: string;
+  className?: string;
+};
+/**
+ * Switcher for top-level destinations placed at the bottom of the screen (3 to 5 items). Distinct from `layout/tabs` (underlined tabs that switch the body).
+ * The selected item uses `text-action-ink` (AA even on dark surfaces), and the selected state is shown by weight (`font-semibold`) as well as color.
+ * Each item's press target is at least 56px tall (above the 44pt real-device guideline). **The bottom safe area (home indicator) is the app's responsibility**
+ * (pass `pb-*` in `className`, or place it inside an outer `SafeAreaView`).
+ */
+export declare function TabBar({ items, value, onValueChange, accessibilityLabel, className }: TabBarProps): import("react").JSX.Element;
+//#endregion