@lt-three/love3 0.0.0 → 0.1.0

package/dist/native/atom/switch.d.ts

@@ -0,0 +1,18 @@
+import { ControlA11yProps } from "../lib/control.js";
+//#region src/native/atom/switch.d.ts
+export type SwitchProps = ControlA11yProps & {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+  /** 読み上げ用の名前。スイッチ単体には文字が無いので、隣にラベルを置く使い方では必ず渡す。 */
+  accessibilityLabel?: string;
+  className?: string;
+};
+/**
+ * `@lt-three/web` の base/switch と同じ丸いスイッチ（on はインディゴ塗り、off は wash 面 + line-control の枠）。
+ *
+ * OS 標準のスイッチが要る場合は `base/` の `@expo/ui` 側を使う。ここは
+ * 「web と同じ見た目を優先する」方針に沿った RN 実装。
+ */
+export declare function Switch({ checked, onCheckedChange, disabled, accessibilityLabel, accessibilityHint, className, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }: SwitchProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/switch.js

@@ -0,0 +1,52 @@
+import { cn } from "../lib/utils.js";
+import { activateOnSpace } from "../lib/keyboard.js";
+import { useEffect, useRef } from "react";
+import { Animated, Platform, Pressable } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/atom/switch.tsx
+const TRACK_PADDING = 1;
+const KNOB_TRAVEL = 19;
+/**
+* `@lt-three/web` の base/switch と同じ丸いスイッチ（on はインディゴ塗り、off は wash 面 + line-control の枠）。
+*
+* OS 標準のスイッチが要る場合は `base/` の `@expo/ui` 側を使う。ここは
+* 「web と同じ見た目を優先する」方針に沿った RN 実装。
+*/
+function Switch({ checked, onCheckedChange, disabled, accessibilityLabel, accessibilityHint, className, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }) {
+	const progress = useRef(new Animated.Value(checked ? 1 : 0)).current;
+	useEffect(() => {
+		Animated.timing(progress, {
+			toValue: checked ? 1 : 0,
+			duration: 150,
+			useNativeDriver: Platform.OS !== "web"
+		}).start();
+	}, [checked, progress]);
+	const translateX = progress.interpolate({
+		inputRange: [0, 1],
+		outputRange: [TRACK_PADDING, KNOB_TRAVEL]
+	});
+	return /* @__PURE__ */ jsx(Pressable, {
+		accessibilityRole: "switch",
+		accessibilityLabel,
+		accessibilityHint,
+		id,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid,
+		"aria-checked": checked,
+		"aria-disabled": disabled,
+		onPress: () => onCheckedChange(!checked),
+		onKeyDown: activateOnSpace(() => onCheckedChange(!checked), disabled),
+		disabled,
+		hitSlop: 12,
+		className: cn("h-5 w-9 shrink-0 justify-center rounded-full border", checked ? "border-action bg-action" : "border-line-control bg-wash", disabled && "opacity-50", className),
+		children: /* @__PURE__ */ jsx(Animated.View, {
+			style: { transform: [{ translateX }] },
+			className: "h-3.5 w-3.5 rounded-full bg-white shadow-xs"
+		})
+	});
+}
+
+//#endregion
+export { Switch };

package/dist/native/atom/symbol.d.ts

@@ -0,0 +1,16 @@
+import { SymbolProps } from "./symbol.types.js";
+//#region src/native/atom/symbol.d.ts
+/**
+ * アイコン。iOS は SF Symbols、Android は Material Symbols で描く。
+ *
+ * **`SymbolView` に SF 名を文字列で渡すと Android では何も描かれない。**
+ * 例外も警告も出ないのでアイコンだけが無言で消える（実際に Android では検索欄の虫眼鏡・
+ * 設定の歯車・行の `>`・空状態のアイコンが全部消えていた）。`{ ios, android }` の形で
+ * 渡したときだけ Android 実装が動くので、**アプリからは必ずこのコンポーネントを使う**。
+ *
+ * 読み替え表は `symbol.types.ts`。表に無い SF 名は Android で描かれないため、
+ * `fallback` に薄い丸を出して「アイコンがあるべき場所」を残す（詰めた見た目にしない）。
+ */
+export declare function Symbol({ name, size, tintColor, accessibilityLabel, className, style }: SymbolProps): import("react").JSX.Element;
+//#endregion
+export type { SymbolProps };

package/dist/native/atom/symbol.js

@@ -0,0 +1,38 @@
+import { SF_TO_ANDROID } from "./symbol.types.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { SymbolView } from "expo-symbols";
+
+//#region src/native/atom/symbol.tsx
+/**
+* アイコン。iOS は SF Symbols、Android は Material Symbols で描く。
+*
+* **`SymbolView` に SF 名を文字列で渡すと Android では何も描かれない。**
+* 例外も警告も出ないのでアイコンだけが無言で消える（実際に Android では検索欄の虫眼鏡・
+* 設定の歯車・行の `>`・空状態のアイコンが全部消えていた）。`{ ios, android }` の形で
+* 渡したときだけ Android 実装が動くので、**アプリからは必ずこのコンポーネントを使う**。
+*
+* 読み替え表は `symbol.types.ts`。表に無い SF 名は Android で描かれないため、
+* `fallback` に薄い丸を出して「アイコンがあるべき場所」を残す（詰めた見た目にしない）。
+*/
+function Symbol({ name, size = 20, tintColor, accessibilityLabel, className, style }) {
+	const android = SF_TO_ANDROID[name];
+	return /* @__PURE__ */ jsx(SymbolView, {
+		name: android ? {
+			ios: name,
+			android
+		} : name,
+		size,
+		tintColor,
+		accessibilityLabel,
+		style,
+		className,
+		fallback: /* @__PURE__ */ jsx(View, { style: {
+			width: size,
+			height: size
+		} })
+	});
+}
+
+//#endregion
+export { Symbol };

package/dist/native/atom/symbol.types.d.ts

@@ -0,0 +1,25 @@
+import { StyleProp, ViewStyle } from "react-native";
+import { AndroidSymbol, SFSymbol } from "expo-symbols";
+//#region src/native/atom/symbol.types.d.ts
+export type SymbolProps = {
+  /** SF Symbol の名前。Android は `SF_TO_ANDROID` で Material Symbols に読み替える。 */
+  name: SFSymbol;
+  size?: number;
+  tintColor?: string;
+  accessibilityLabel?: string;
+  className?: string;
+  style?: StyleProp<ViewStyle>;
+};
+/**
+ * SF Symbol → Material Symbols（Android）の読み替え表。
+ *
+ * **`SymbolView` は `name` を文字列で渡すと Android では何も描かない。**
+ * `{ ios, android }` の形で渡したときだけ Android 実装（Material Symbols のフォント）が動く。
+ * 実際、アプリ全体が SF 名の文字列を渡していたため、Android では検索欄の虫眼鏡・設定の歯車・
+ * 行の `>`・空状態のアイコンが**例外も警告も無く全部消えていた**。
+ *
+ * **fill の有無を潰さない。** SF は `circle` / `circle.fill` の差だけで選択状態や
+ * チェック済みを表している箇所があるので、Android 側も別のアイコンに割り当てる。
+ */
+export declare const SF_TO_ANDROID: Record<string, AndroidSymbol>;
+//#endregion

package/dist/native/atom/symbol.types.js

@@ -0,0 +1,49 @@
+//#region src/native/atom/symbol.types.ts
+/**
+* SF Symbol → Material Symbols（Android）の読み替え表。
+*
+* **`SymbolView` は `name` を文字列で渡すと Android では何も描かない。**
+* `{ ios, android }` の形で渡したときだけ Android 実装（Material Symbols のフォント）が動く。
+* 実際、アプリ全体が SF 名の文字列を渡していたため、Android では検索欄の虫眼鏡・設定の歯車・
+* 行の `>`・空状態のアイコンが**例外も警告も無く全部消えていた**。
+*
+* **fill の有無を潰さない。** SF は `circle` / `circle.fill` の差だけで選択状態や
+* チェック済みを表している箇所があるので、Android 側も別のアイコンに割り当てる。
+*/
+const SF_TO_ANDROID = {
+	archivebox: "archive",
+	book: "book",
+	"book.fill": "menu_book",
+	calendar: "calendar_month",
+	"chart.bar": "bar_chart",
+	"chart.pie": "pie_chart_outline",
+	"chart.pie.fill": "pie_chart",
+	checkmark: "check",
+	"checkmark.circle.fill": "check_circle",
+	"chevron.left": "chevron_left",
+	"chevron.right": "chevron_right",
+	circle: "circle",
+	"circle.fill": "brightness_1",
+	"doc.on.doc": "content_copy",
+	gearshape: "settings",
+	"info.circle": "info",
+	"line.3.horizontal.decrease": "filter_list",
+	"line.3.horizontal.decrease.circle.fill": "filter_alt",
+	link: "link",
+	"link.badge.plus": "add_link",
+	lock: "lock_open",
+	"lock.fill": "lock",
+	magnifyingglass: "search",
+	"note.text": "note",
+	pencil: "edit",
+	"square.and.arrow.up": "ios_share",
+	"square.stack": "stack",
+	"square.stack.3d.up": "stack_group",
+	"square.stack.fill": "layers",
+	tray: "inbox",
+	"tray.and.arrow.up": "unarchive",
+	xmark: "close"
+};
+
+//#endregion
+export { SF_TO_ANDROID };

package/dist/native/atom/text-field.d.ts

@@ -0,0 +1,49 @@
+import { ControlA11yProps } from "../lib/control.js";
+import { AutoComplete } from "../lib/autocomplete.js";
+//#region src/native/atom/text-field.d.ts
+export type TextFieldType = "text" | "number" | "password" | "email" | "tel";
+export type TextFieldProps = ControlA11yProps & {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  type?: TextFieldType;
+  disabled?: boolean;
+  /** エラー。罫線が destructive になり、`aria-invalid` が付く（フォームの中では `FormControl` が渡す）。 */
+  invalid?: boolean;
+  /**
+   * 自動入力の種類（web の `TextInput.autoComplete` と同じ意味の語。`email`・`current-password`・`one-time-code` など）。
+   * RN の `autoComplete` にそのまま渡り、iOS では `textContentType` にも読み替えて渡す（`lib/autocomplete.ts`）。
+   * web より型が狭い（RN が受ける語だけ）。
+   */
+  autoComplete?: AutoComplete;
+  autoCapitalize?: "none" | "sentences" | "words" | "characters";
+  /** `false` で自動修正（スマート引用符への置き換えなど）を切る。JSON・コード・ID を打たせる欄に使う。 */
+  autoCorrect?: boolean;
+  /** フォーカスが外れたとき（入力中の文字を確定する・破棄するのに使う）。 */
+  onBlur?: () => void;
+  multiline?: boolean;
+  /** 複数行のときの行数目安（`multiline` と併用する）。 */
+  numberOfLines?: number;
+  onSubmitEditing?: () => void;
+  returnKeyType?: "done" | "go" | "next" | "search" | "send";
+  accessibilityLabel?: string;
+  /**
+   * E2E から一意に掴むための識別子（iOS では accessibilityIdentifier になる）。
+   *
+   * ラベルと入力欄が同じ文言を持つフォームでは、テキスト一致だと**見出しの方に当たって
+   * 入力が消える**（Maestro で実際に踏んだ）。掴ませたい入力欄には付けること。
+   */
+  testID?: string;
+  className?: string;
+};
+export declare const textFieldClass = "min-h-9 w-full rounded-control border border-line-strong bg-raised px-3 py-1.5 text-sm text-foreground";
+/**
+ * 素のテキスト入力。`@lt-three/web` の base/input に対応する入力枠で、
+ * TanStack Form を使わない画面（ログイン・設定・メモ欄など）から直接使う。
+ *
+ * `base/input` は `@expo/ui` の OS ネイティブ TextField なので**トークンで塗れない**。
+ * web と同じ見た目にしたい入力はこちらを使うこと。フォーム統合が要るときは
+ * `form/text-input`（これを内側で使っている）。
+ */
+export declare function TextField({ value, onChangeText, placeholder, type, disabled, invalid, autoComplete, autoCapitalize, autoCorrect, onBlur, multiline, numberOfLines, onSubmitEditing, returnKeyType, accessibilityLabel, accessibilityHint, testID, className, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }: TextFieldProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/text-field.js

@@ -0,0 +1,56 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { textContentTypeOf } from "../lib/autocomplete.js";
+import { TextInput } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/atom/text-field.tsx
+const textFieldClass = "min-h-9 w-full rounded-control border border-line-strong bg-raised px-3 py-1.5 text-sm text-foreground";
+const KEYBOARD = {
+	text: "default",
+	number: "decimal-pad",
+	password: "default",
+	email: "email-address",
+	tel: "phone-pad"
+};
+/**
+* 素のテキスト入力。`@lt-three/web` の base/input に対応する入力枠で、
+* TanStack Form を使わない画面（ログイン・設定・メモ欄など）から直接使う。
+*
+* `base/input` は `@expo/ui` の OS ネイティブ TextField なので**トークンで塗れない**。
+* web と同じ見た目にしたい入力はこちらを使うこと。フォーム統合が要るときは
+* `form/text-input`（これを内側で使っている）。
+*/
+function TextField({ value, onChangeText, placeholder, type = "text", disabled, invalid, autoComplete, autoCapitalize, autoCorrect, onBlur, multiline, numberOfLines, onSubmitEditing, returnKeyType, accessibilityLabel, accessibilityHint, testID, className, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }) {
+	const mutedInk = useTokenColor("--ink-500");
+	const isInvalid = invalid ?? ariaInvalid;
+	return /* @__PURE__ */ jsx(TextInput, {
+		value,
+		onChangeText,
+		placeholder,
+		placeholderTextColor: mutedInk,
+		editable: !disabled,
+		secureTextEntry: type === "password",
+		keyboardType: KEYBOARD[type],
+		autoComplete,
+		textContentType: textContentTypeOf(autoComplete),
+		autoCapitalize: autoCapitalize ?? (type === "email" ? "none" : void 0),
+		autoCorrect: autoCorrect ?? (type === "email" ? false : void 0),
+		onBlur,
+		multiline,
+		numberOfLines,
+		onSubmitEditing,
+		returnKeyType,
+		accessibilityLabel,
+		accessibilityHint,
+		id,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": isInvalid,
+		testID,
+		className: cn(textFieldClass, multiline && "min-h-[72px] py-2", isInvalid && "border-destructive", disabled && "opacity-50", className)
+	});
+}
+
+//#endregion
+export { TextField, textFieldClass };

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

@@ -0,0 +1,2 @@
+import { Text, TextClassContext } from "../base/text.js";
+export { Text, TextClassContext };

package/dist/native/atom/text.js

@@ -0,0 +1,3 @@
+import { Text, TextClassContext } from "../base/text.js";
+
+export { Text, TextClassContext };

package/dist/native/atom/theme-toggle.d.ts

@@ -0,0 +1,21 @@
+import { ActiveScheme } from "../lib/scheme.js";
+import "../lib/theme.js";
+//#region src/native/atom/theme-toggle.d.ts
+export type ThemeToggleProps = {
+  /** 切り替えたいテーマ（`light` / `dark`）を受け取る。保存先（AsyncStorage・jotai など）はアプリが持つ。 */
+  onSchemeChange: (scheme: ActiveScheme) => void;
+  /** いまのテーマ。省略すると `useActiveScheme()`（`ThemeRoot`、無ければ端末の設定）に従う。 */
+  scheme?: ActiveScheme;
+  /** スクリーンリーダー向けのラベル。 */
+  accessibilityLabel?: string;
+  className?: string;
+};
+/**
+ * ライト / ダークを 1 タップで入れ替える。
+ * 「システム追従」を含む 3 択が要るなら、アプリが `ThemeRoot` の `preference` を直接持つ。
+ *
+ * 移植元は jotai の `themePreferenceAtom` を直接書き換えていた。love3 はテーマの保存先を持たない（`ThemeRoot` は
+ * `preference` を props で受ける）ので、`onSchemeChange` で次のテーマを渡す形にした。
+ */
+export declare function ThemeToggle({ onSchemeChange, scheme: schemeProp, accessibilityLabel, className }: ThemeToggleProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/theme-toggle.js

@@ -0,0 +1,36 @@
+import { useActiveScheme } from "../lib/theme.js";
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Platform, Pressable } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+
+//#region src/native/atom/theme-toggle.tsx
+/**
+* ライト / ダークを 1 タップで入れ替える。
+* 「システム追従」を含む 3 択が要るなら、アプリが `ThemeRoot` の `preference` を直接持つ。
+*
+* 移植元は jotai の `themePreferenceAtom` を直接書き換えていた。love3 はテーマの保存先を持たない（`ThemeRoot` は
+* `preference` を props で受ける）ので、`onSchemeChange` で次のテーマを渡す形にした。
+*/
+function ThemeToggle({ onSchemeChange, scheme: schemeProp, accessibilityLabel = "テーマ切り替え", className }) {
+	const active = useActiveScheme();
+	const scheme = schemeProp ?? active;
+	const ink = useTokenColor("--ink-500");
+	return /* @__PURE__ */ jsx(Pressable, {
+		accessibilityRole: "button",
+		accessibilityLabel,
+		onPress: () => onSchemeChange(scheme === "dark" ? "light" : "dark"),
+		...Platform.OS === "web" ? { "aria-pressed": scheme === "dark" } : { "aria-selected": scheme === "dark" },
+		hitSlop: 12,
+		className: cn("h-8 w-8 items-center justify-center rounded-control", className),
+		children: /* @__PURE__ */ jsx(Feather, {
+			name: scheme === "dark" ? "sun" : "moon",
+			size: 16,
+			color: ink
+		})
+	});
+}
+
+//#endregion
+export { ThemeToggle };

package/dist/native/atom/timezone-select.d.ts

@@ -0,0 +1,16 @@
+import { SelectProps } from "./select.js";
+//#region src/native/atom/timezone-select.d.ts
+export type TimezoneSelectProps = Pick<SelectProps, "label" | "description" | "placeholder" | "disabled" | "size" | "className" | "wrapperClassName" | "sheetTitle" | "closeLabel" | "accessibilityLabel"> & {
+  /** 選択中の IANA タイムゾーン。空文字は「まだ決まっていない」（placeholder を出す）。 */
+  value: string;
+  onValueChange: (zone: string) => void;
+};
+/**
+ * タイムゾーン（IANA 文字列）を選ぶ Select。`@lt-three/web` の atom/timezone-select と同じ名前・同じ props。
+ *
+ * 選択肢は主要な都市の固定リストに、この端末のタイムゾーンと選択中の値を足したもの（`lib/timezone.ts`）。
+ * Hermes に `Intl.supportedValuesOf` が無いので固定リストにしている。
+ * 下から出るシートで選ぶので、`closeLabel` は呼び出し側の言語で渡すこと（既定は日本語）。
+ */
+export declare function TimezoneSelect({ value, onValueChange, ...props }: TimezoneSelectProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/timezone-select.js

@@ -0,0 +1,28 @@
+import { Select } from "./select.js";
+import { formatTimeZoneLabel, getDeviceTimeZone, timeZoneOptions } from "../lib/timezone.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/atom/timezone-select.tsx
+/**
+* タイムゾーン（IANA 文字列）を選ぶ Select。`@lt-three/web` の atom/timezone-select と同じ名前・同じ props。
+*
+* 選択肢は主要な都市の固定リストに、この端末のタイムゾーンと選択中の値を足したもの（`lib/timezone.ts`）。
+* Hermes に `Intl.supportedValuesOf` が無いので固定リストにしている。
+* 下から出るシートで選ぶので、`closeLabel` は呼び出し側の言語で渡すこと（既定は日本語）。
+*/
+function TimezoneSelect({ value, onValueChange, ...props }) {
+	const options = useMemo(() => timeZoneOptions(getDeviceTimeZone(), value).map((zone) => ({
+		value: zone,
+		label: formatTimeZoneLabel(zone)
+	})), [value]);
+	return /* @__PURE__ */ jsx(Select, {
+		...props,
+		value,
+		onValueChange,
+		options
+	});
+}
+
+//#endregion
+export { TimezoneSelect };

package/dist/native/atom/typography.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+//#region src/native/atom/typography.d.ts
+export type SectionTitleProps = {
+  children: ReactNode;
+  description?: string;
+  className?: string;
+};
+/**
+ * セクション見出し。`@lt-three/web` の atom/typography の SectionTitle に対応する。
+ * 左端の 2px インディゴのバー + 太字の見出し + 任意の説明という同じ構成。
+ */
+export declare function SectionTitle({ children, description, className }: SectionTitleProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/typography.js

@@ -0,0 +1,28 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/atom/typography.tsx
+/**
+* セクション見出し。`@lt-three/web` の atom/typography の SectionTitle に対応する。
+* 左端の 2px インディゴのバー + 太字の見出し + 任意の説明という同じ構成。
+*/
+function SectionTitle({ children, description, className }) {
+	return /* @__PURE__ */ jsxs(View, {
+		className: "gap-0.5",
+		children: [/* @__PURE__ */ jsxs(View, {
+			className: "flex-row items-center py-2 pl-3",
+			children: [/* @__PURE__ */ jsx(View, { className: "absolute inset-y-2 left-1 w-0.5 bg-action/70" }), /* @__PURE__ */ jsx(Text$1, {
+				className: cn("text-sm font-semibold", className),
+				children
+			})]
+		}), description ? /* @__PURE__ */ jsx(Text$1, {
+			className: "text-muted-foreground text-sm",
+			children: description
+		}) : null]
+	});
+}
+
+//#endregion
+export { SectionTitle };

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

@@ -0,0 +1,61 @@
+import { ButtonVariant } from "../../shared/button.js";
+import { ReactNode } from "react";
+import { ViewStyle } from "react-native";
+//#region src/native/base/button.d.ts
+/**
+ * ボタンの見た目バリアント。**`atom/button`（と web の Button）と同じ名前**（`@lt-three/love3/shared` の `ButtonVariant`）に、
+ * iOS 26 の Liquid Glass だけの `glass` を足したもの。
+ * - `glass`: iOS 26 の Liquid Glass ボタン（主要アクション向け。iOS 26 未満・Android では塗りつぶしに落ちる）
+ * - ほかは `atom/button` と同じ意味。OS のコントロールが持つ 3 つの形（塗り・枠・文字だけ）に写す（下の表）
+ */
+export type NativeButtonVariant = ButtonVariant | "glass";
+declare const IOS_BUTTON_STYLE: {
+  readonly default: "borderedProminent";
+  readonly destructive: "borderedProminent";
+  readonly outline: "bordered";
+  readonly secondary: "bordered";
+  readonly ghost: "plain";
+  readonly link: "plain";
+  readonly plate: "bordered";
+  readonly "<3": "borderedProminent";
+  readonly glass: "glassProminent";
+};
+declare const UNIVERSAL_VARIANT: {
+  readonly default: "filled";
+  readonly destructive: "filled";
+  readonly outline: "outlined";
+  readonly secondary: "filled";
+  readonly ghost: "text";
+  readonly link: "text";
+  readonly plate: "outlined";
+  readonly "<3": "filled";
+  readonly glass: "filled";
+};
+type ButtonProps = {
+  children?: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+  variant?: NativeButtonVariant;
+  /**
+   * アクセント色（iOS の SwiftUI `.tint()`）。省略すると、variant に合わせたトークンの色
+   * （`default` は主操作のインディゴ、`destructive` は destructive-solid、`<3` はブランド色）。
+   */
+  tintColor?: string;
+  /**
+   * ラベル文字色（iOS の SwiftUI `.foregroundStyle()`）。省略すると、塗りの上で読める組のトークンの色。
+   * prominent 系は既定でラベルが白のため、明るい tint と組み合わせると読めなくなる（反転する面でも同じ）。
+   */
+  labelColor?: string;
+  /** Host コンテナ（RN View）に適用するスタイル。幅・余白の調整に使う。 */
+  style?: ViewStyle;
+};
+/**
+ * ネイティブボタン（OS のコントロールの層）。iOS は SwiftUI の `Button`、Android は Jetpack Compose の
+ * `Button` を描画する（`@expo/ui` universal 経由）。iOS 26 では `glass` が Liquid Glass になる。
+ *
+ * `atom/button`（RN の `Pressable`。トークンで塗るボタン）に対する、**OS ネイティブ版の base 層**。
+ * web と同じ見た目にしたい場所は `atom/button`、OS の標準の見た目・触感がほしい場所はこちら。
+ */
+declare function Button({ children, onPress, disabled, variant, tintColor, labelColor, style }: ButtonProps): import("react").JSX.Element;
+//#endregion
+export { Button, type ButtonProps, IOS_BUTTON_STYLE, UNIVERSAL_VARIANT };

package/dist/native/base/button.js

@@ -0,0 +1,92 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { Platform } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { Button as Button$1, Host } from "@expo/ui";
+import { buttonStyle, foregroundStyle, tint } from "@expo/ui/swift-ui/modifiers";
+
+//#region src/native/base/button.tsx
+const IOS_BUTTON_STYLE = {
+	default: "borderedProminent",
+	destructive: "borderedProminent",
+	outline: "bordered",
+	secondary: "bordered",
+	ghost: "plain",
+	link: "plain",
+	plate: "bordered",
+	"<3": "borderedProminent",
+	glass: "glassProminent"
+};
+const UNIVERSAL_VARIANT = {
+	default: "filled",
+	destructive: "filled",
+	outline: "outlined",
+	secondary: "filled",
+	ghost: "text",
+	link: "text",
+	plate: "outlined",
+	"<3": "filled",
+	glass: "filled"
+};
+/**
+* ネイティブボタン（OS のコントロールの層）。iOS は SwiftUI の `Button`、Android は Jetpack Compose の
+* `Button` を描画する（`@expo/ui` universal 経由）。iOS 26 では `glass` が Liquid Glass になる。
+*
+* `atom/button`（RN の `Pressable`。トークンで塗るボタン）に対する、**OS ネイティブ版の base 層**。
+* web と同じ見た目にしたい場所は `atom/button`、OS の標準の見た目・触感がほしい場所はこちら。
+*/
+function Button({ children, onPress, disabled, variant = "default", tintColor, labelColor, style }) {
+	const primary = useTokenColor("--primary");
+	const primaryForeground = useTokenColor("--primary-foreground");
+	const destructive = useTokenColor("--destructive-solid");
+	const destructiveForeground = useTokenColor("--destructive-solid-foreground");
+	const actionInk = useTokenColor("--action-ink");
+	const brand = useTokenColor("--lt-three");
+	const brandForeground = useTokenColor("--lt-three-foreground");
+	const foreground = useTokenColor("--foreground");
+	const defaults = {
+		default: {
+			tint: primary,
+			label: primaryForeground
+		},
+		destructive: {
+			tint: destructive,
+			label: destructiveForeground
+		},
+		outline: { tint: foreground },
+		secondary: { tint: foreground },
+		ghost: { tint: foreground },
+		link: { tint: actionInk },
+		plate: { tint: foreground },
+		"<3": {
+			tint: brand,
+			label: brandForeground
+		},
+		glass: {
+			tint: primary,
+			label: primaryForeground
+		}
+	};
+	const label = typeof children === "string" ? children : void 0;
+	const tintValue = tintColor ?? defaults[variant].tint;
+	const labelValue = labelColor ?? defaults[variant].label;
+	const modifiers = Platform.OS === "ios" ? [
+		buttonStyle(IOS_BUTTON_STYLE[variant]),
+		...tintValue ? [tint(tintValue)] : [],
+		...labelValue ? [foregroundStyle(labelValue)] : []
+	] : void 0;
+	return /* @__PURE__ */ jsx(Host, {
+		matchContents: true,
+		style,
+		children: /* @__PURE__ */ jsx(Button$1, {
+			label,
+			onPress,
+			disabled,
+			variant: UNIVERSAL_VARIANT[variant],
+			modifiers,
+			children: label ? void 0 : children
+		})
+	});
+}
+
+//#endregion
+export { Button, IOS_BUTTON_STYLE, UNIVERSAL_VARIANT };