@lt-three/love3 0.0.0 → 0.1.1

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;
+/**
+* A round switch identical to the web base/switch (on is filled indigo, off is a wash surface with a line-control border).
+*
+* When the OS-standard switch is needed, use the `@expo/ui` one in `base/`. This is
+* an RN implementation that prioritizes looking the same as the web.
+*/
+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
+/**
+ * An icon. Drawn with SF Symbols on iOS and Material Symbols on Android.
+ *
+ * **Passing an SF name to `SymbolView` as a string draws nothing on Android.**
+ * No exception or warning is raised, so the icon silently disappears (for example the search magnifier,
+ * the settings gear, a row's `>` and empty-state icons all vanish). The Android implementation
+ * only runs when the name is passed as `{ ios, android }`, so **apps must always use this component**.
+ *
+ * The mapping table is in `symbol.types.ts`. SF names missing from the table are not drawn on Android,
+ * so `fallback` renders an empty box of the icon's size to keep the space where the icon should be (the layout does not collapse).
+ */
+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
+/**
+* An icon. Drawn with SF Symbols on iOS and Material Symbols on Android.
+*
+* **Passing an SF name to `SymbolView` as a string draws nothing on Android.**
+* No exception or warning is raised, so the icon silently disappears (for example the search magnifier,
+* the settings gear, a row's `>` and empty-state icons all vanish). The Android implementation
+* only runs when the name is passed as `{ ios, android }`, so **apps must always use this component**.
+*
+* The mapping table is in `symbol.types.ts`. SF names missing from the table are not drawn on Android,
+* so `fallback` renders an empty box of the icon's size to keep the space where the icon should be (the layout does not collapse).
+*/
+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 = {
+  /** The SF Symbol name. On Android it is mapped to Material Symbols via `SF_TO_ANDROID`. */
+  name: SFSymbol;
+  size?: number;
+  tintColor?: string;
+  accessibilityLabel?: string;
+  className?: string;
+  style?: StyleProp<ViewStyle>;
+};
+/**
+ * Mapping table from SF Symbol to Material Symbols (Android).
+ *
+ * **`SymbolView` draws nothing on Android when `name` is passed as a string.**
+ * The Android implementation (the Material Symbols font) only runs when `name` is passed as `{ ios, android }`.
+ * Passing SF names as plain strings makes icons such as the search magnifier, the settings gear,
+ * a row's `>` and empty-state icons **disappear on Android without any exception or warning**.
+ *
+ * **Do not collapse the fill distinction.** SF sometimes expresses selected or
+ * checked state only through `circle` vs `circle.fill`, so the Android side maps them to different icons.
+ */
+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
+/**
+* Mapping table from SF Symbol to Material Symbols (Android).
+*
+* **`SymbolView` draws nothing on Android when `name` is passed as a string.**
+* The Android implementation (the Material Symbols font) only runs when `name` is passed as `{ ios, android }`.
+* Passing SF names as plain strings makes icons such as the search magnifier, the settings gear,
+* a row's `>` and empty-state icons **disappear on Android without any exception or warning**.
+*
+* **Do not collapse the fill distinction.** SF sometimes expresses selected or
+* checked state only through `circle` vs `circle.fill`, so the Android side maps them to different icons.
+*/
+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;
+  /** Error state. The border becomes destructive and `aria-invalid` is set (inside a form, `FormControl` passes it). */
+  invalid?: boolean;
+  /**
+   * The kind of autofill (the same terms as the web `TextInput.autoComplete`: `email`, `current-password`, `one-time-code`, etc.).
+   * Passed straight to RN's `autoComplete`, and on iOS also mapped to `textContentType` (`lib/autocomplete.ts`).
+   * The type is narrower than the web's (only the terms RN accepts).
+   */
+  autoComplete?: AutoComplete;
+  autoCapitalize?: "none" | "sentences" | "words" | "characters";
+  /** `false` turns off autocorrection (such as smart-quote replacement). Use it for fields where JSON, code or IDs are typed. */
+  autoCorrect?: boolean;
+  /** Called when focus leaves the field (used to commit or discard the text being typed). */
+  onBlur?: () => void;
+  multiline?: boolean;
+  /** Approximate number of lines when multiline (use together with `multiline`). */
+  numberOfLines?: number;
+  onSubmitEditing?: () => void;
+  returnKeyType?: "done" | "go" | "next" | "search" | "send";
+  accessibilityLabel?: string;
+  /**
+   * An identifier for targeting the field uniquely from E2E (becomes accessibilityIdentifier on iOS).
+   *
+   * In a form where the label and the input share the same text, matching by text **hits the heading
+   * and the input gets cleared** (observed with Maestro). Set it on any input that must be targeted.
+   */
+  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";
+/**
+ * A plain text input. The input frame corresponding to the web base/input,
+ * used directly on screens that do not use TanStack Form (login, settings, memo fields, etc.).
+ *
+ * `base/input` is the OS-native TextField from `@expo/ui`, so it **cannot be painted with tokens**.
+ * Use this one for inputs that should look the same as the web. When form integration is needed,
+ * use `form/text-input` (which uses this one internally).
+ */
+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"
+};
+/**
+* A plain text input. The input frame corresponding to the web base/input,
+* used directly on screens that do not use TanStack Form (login, settings, memo fields, etc.).
+*
+* `base/input` is the OS-native TextField from `@expo/ui`, so it **cannot be painted with tokens**.
+* Use this one for inputs that should look the same as the web. When form integration is needed,
+* use `form/text-input` (which uses this one internally).
+*/
+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 = {
+  /** Receives the theme to switch to (`light` / `dark`). Where it is stored (AsyncStorage, jotai, etc.) is up to the app. */
+  onSchemeChange: (scheme: ActiveScheme) => void;
+  /** The current theme. When omitted, follows `useActiveScheme()` (`ThemeRoot`, or the device setting if there is none). */
+  scheme?: ActiveScheme;
+  /** Label for screen readers. */
+  accessibilityLabel?: string;
+  className?: string;
+};
+/**
+ * Switches between light and dark with a single tap.
+ * If a three-way choice including "follow system" is needed, the app owns the `ThemeRoot` `preference` directly.
+ *
+ * love3 has no place to store the theme (`ThemeRoot` receives
+ * `preference` via props), so the next theme is handed over through `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
+/**
+* Switches between light and dark with a single tap.
+* If a three-way choice including "follow system" is needed, the app owns the `ThemeRoot` `preference` directly.
+*
+* love3 has no place to store the theme (`ThemeRoot` receives
+* `preference` via props), so the next theme is handed over through `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"> & {
+  /** The selected IANA time zone. An empty string means "not decided yet" (the placeholder is shown). */
+  value: string;
+  onValueChange: (zone: string) => void;
+};
+/**
+ * A Select for choosing a time zone (IANA string). Same name and props as the web atom/timezone-select.
+ *
+ * The options are a fixed list of major cities plus this device's time zone and the selected value (`lib/timezone.ts`).
+ * The list is fixed because Hermes has no `Intl.supportedValuesOf`.
+ * It is chosen in a bottom sheet, so pass `closeLabel` in the caller's language (the default is Japanese).
+ */
+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
+/**
+* A Select for choosing a time zone (IANA string). Same name and props as the web atom/timezone-select.
+*
+* The options are a fixed list of major cities plus this device's time zone and the selected value (`lib/timezone.ts`).
+* The list is fixed because Hermes has no `Intl.supportedValuesOf`.
+* It is chosen in a bottom sheet, so pass `closeLabel` in the caller's language (the default is Japanese).
+*/
+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;
+};
+/**
+ * A section heading. Mirrors SectionTitle of the web atom/typography.
+ * Same structure: a 2px indigo bar on the left edge + a bold heading + an optional description.
+ */
+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
+/**
+* A section heading. Mirrors SectionTitle of the web atom/typography.
+* Same structure: a 2px indigo bar on the left edge + a bold heading + an optional description.
+*/
+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
+/**
+ * The button's appearance variants. **The same names as `atom/button` (and the web Button)** (`ButtonVariant` from `@lt-three/love3/shared`),
+ * plus `glass`, which exists only for iOS 26 Liquid Glass.
+ * - `glass`: the iOS 26 Liquid Glass button (for primary actions; falls back to a filled button below iOS 26 and on Android)
+ * - The others mean the same as in `atom/button`. They are mapped onto the three shapes the OS control has (filled, outlined, text only) (see the tables below)
+ */
+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;
+  /**
+   * The accent color (SwiftUI `.tint()` on iOS). When omitted, the token color matching the variant
+   * (`default` is the primary action's indigo, `destructive` is destructive-solid, `<3` is the brand color).
+   */
+  tintColor?: string;
+  /**
+   * The label text color (SwiftUI `.foregroundStyle()` on iOS). When omitted, the token color paired to be readable on the fill.
+   * Prominent styles default to a white label, so combining them with a light tint makes the label unreadable (the same applies on surfaces that invert).
+   */
+  labelColor?: string;
+  /** Style applied to the Host container (an RN View). Used to adjust width and margins. */
+  style?: ViewStyle;
+};
+/**
+ * The native button (the OS control layer). Renders SwiftUI's `Button` on iOS and Jetpack Compose's
+ * `Button` on Android (via `@expo/ui` universal). On iOS 26, `glass` becomes Liquid Glass.
+ *
+ * The **OS-native base layer** counterpart of `atom/button` (an RN `Pressable`, a button painted with tokens).
+ * Use `atom/button` where it should look the same as the web, and this one where the OS's standard look and feel is wanted.
+ */
+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"
+};
+/**
+* The native button (the OS control layer). Renders SwiftUI's `Button` on iOS and Jetpack Compose's
+* `Button` on Android (via `@expo/ui` universal). On iOS 26, `glass` becomes Liquid Glass.
+*
+* The **OS-native base layer** counterpart of `atom/button` (an RN `Pressable`, a button painted with tokens).
+* Use `atom/button` where it should look the same as the web, and this one where the OS's standard look and feel is wanted.
+*/
+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 };