@lt-three/love3 0.0.0 → 0.1.1

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

@@ -0,0 +1,18 @@
+import { ComponentProps, ReactNode } from "react";
+import { Link as Link$1 } from "expo-router";
+//#region src/native/atom/link.d.ts
+export type LinkProps = ComponentProps<typeof Link$1> & {
+  disabled?: boolean;
+  children: ReactNode;
+};
+/**
+ * A styled expo-router `Link`. Mirrors the web atom/link
+ * (which wraps TanStack Router's `Link`). The `href` type stays the router's own.
+ *
+ * The text color is `text-foreground` (without a color of its own, the link would stay black on a dark background unless the parent passed one). It can be overridden via className.
+ *
+ * It can only render inside an expo-router navigation tree, so it has no story on a device
+ * (the same reason `base/` is excluded from Storybook). Previews and vitest render it by substituting `<a href>` (`web/expo-router.tsx`).
+ */
+export declare function Link({ disabled, className, children, ...props }: LinkProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/link.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Link as Link$1 } from "expo-router";
+
+//#region src/native/atom/link.tsx
+/**
+* A styled expo-router `Link`. Mirrors the web atom/link
+* (which wraps TanStack Router's `Link`). The `href` type stays the router's own.
+*
+* The text color is `text-foreground` (without a color of its own, the link would stay black on a dark background unless the parent passed one). It can be overridden via className.
+*
+* It can only render inside an expo-router navigation tree, so it has no story on a device
+* (the same reason `base/` is excluded from Storybook). Previews and vitest render it by substituting `<a href>` (`web/expo-router.tsx`).
+*/
+function Link({ disabled, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Link$1, {
+		...props,
+		disabled,
+		className: cn("text-foreground text-sm font-bold underline", disabled && "opacity-50", className),
+		children
+	});
+}
+
+//#endregion
+export { Link };

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

@@ -0,0 +1,22 @@
+//#region src/native/atom/readout.d.ts
+export type ReadoutProps = {
+  /** Metric name in all caps (e.g. NET PROFIT). */
+  label: string;
+  value: string;
+  /**
+   * The value color. Reserved for callers passing a **theme-independent color with a fixed meaning**,
+   * such as gain/loss. Defaults to `text-foreground`.
+   */
+  valueColor?: string;
+  sub?: string;
+  /** Large (for detail headers) or regular. */
+  size?: "md" | "lg";
+  className?: string;
+};
+/**
+ * An instrument-style readout, matching the inside of the web MetricCard:
+ * three tiers of an all-caps muted label, a large bold number and secondary text.
+ * The number is monospaced (Geist Mono + tabular) so the digits line up.
+ */
+export declare function Readout({ label, value, valueColor, sub, size, className }: ReadoutProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/readout.js

@@ -0,0 +1,39 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { tabularNums } from "../lib/typography.js";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/atom/readout.tsx
+/**
+* An instrument-style readout, matching the inside of the web MetricCard:
+* three tiers of an all-caps muted label, a large bold number and secondary text.
+* The number is monospaced (Geist Mono + tabular) so the digits line up.
+*/
+function Readout({ label, value, valueColor, sub, size = "md", className }) {
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("gap-1", className),
+		children: [
+			/* @__PURE__ */ jsx(Text$1, {
+				className: "text-sm font-medium uppercase text-muted-foreground",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Text$1, {
+				style: [tabularNums, valueColor ? { color: valueColor } : null],
+				numberOfLines: 1,
+				adjustsFontSizeToFit: true,
+				minimumFontScale: .6,
+				className: cn("font-mono font-bold text-foreground", size === "lg" ? "text-4xl" : "text-2xl"),
+				children: value
+			}),
+			sub ? /* @__PURE__ */ jsx(Text$1, {
+				style: tabularNums,
+				className: "font-mono text-xs text-muted-foreground",
+				children: sub
+			}) : null
+		]
+	});
+}
+
+//#endregion
+export { Readout };

package/dist/native/atom/search-input.d.ts

@@ -0,0 +1,12 @@
+//#region src/native/atom/search-input.d.ts
+export type SearchInputProps = {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder: string;
+};
+/**
+ * A search input. Matches the web SearchInput with the same structure: control corner radius, a soft surface,
+ * and a leading search icon (no Liquid Glass capsule).
+ */
+export declare function SearchInput({ value, onChangeText, placeholder }: SearchInputProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/search-input.js

@@ -0,0 +1,36 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { Symbol } from "./symbol.js";
+import { TextInput, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/atom/search-input.tsx
+/**
+* A search input. Matches the web SearchInput with the same structure: control corner radius, a soft surface,
+* and a leading search icon (no Liquid Glass capsule).
+*/
+function SearchInput({ value, onChangeText, placeholder }) {
+	const mutedInk = useTokenColor("--ink-500");
+	return /* @__PURE__ */ jsxs(View, {
+		className: "relative flex-row items-center",
+		children: [/* @__PURE__ */ jsx(View, {
+			className: "absolute left-3.5 z-10",
+			children: /* @__PURE__ */ jsx(Symbol, {
+				name: "magnifyingglass",
+				size: 16,
+				tintColor: mutedInk
+			})
+		}), /* @__PURE__ */ jsx(TextInput, {
+			placeholder,
+			placeholderTextColor: mutedInk,
+			value,
+			onChangeText,
+			autoCapitalize: "none",
+			autoCorrect: false,
+			clearButtonMode: "while-editing",
+			className: "min-h-9 w-full rounded-control bg-muted/50 py-1.5 pl-10 pr-10 text-sm text-foreground"
+		})]
+	});
+}
+
+//#endregion
+export { SearchInput };

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

@@ -0,0 +1,54 @@
+import { ControlA11yProps } from "../lib/control.js";
+import { ReactNode } from "react";
+//#region src/native/atom/select.d.ts
+export type SelectOption = {
+  value: string;
+  label: string;
+};
+export type SelectOptionGroup = {
+  label: string;
+  options: SelectOption[];
+};
+export type SelectProps = ControlA11yProps & {
+  value: string;
+  onValueChange: (value: string) => void;
+  options: (SelectOption | SelectOptionGroup)[];
+  placeholder?: string;
+  label?: ReactNode;
+  required?: boolean;
+  description?: ReactNode;
+  helpText?: ReactNode;
+  disabled?: boolean;
+  /** Error state. The trigger's border becomes destructive and `aria-invalid` is set (inside a form, the `aria-invalid` passed by `FormControl` has the same effect). */
+  invalid?: boolean;
+  size?: "xs" | "sm" | "default";
+  /** Controls open/closed (internal state when omitted). */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The picker heading (falls back to `label`, then `placeholder`). It becomes the dialog's name. */
+  sheetTitle?: ReactNode;
+  /** Screen reader name of the picker's close button (the default is the Japanese "close" label). */
+  closeLabel?: string;
+  /**
+   * The trigger's name (when there is no visible label; a string `label` is the default). It is read as "name, current value"
+   * (the trigger is a button that opens a sheet, so the value is included in the name).
+   */
+  accessibilityLabel?: string;
+  /** Slot for the form to insert an error. */
+  errorSlot?: ReactNode;
+  className?: string;
+  wrapperClassName?: string;
+};
+/**
+ * A controlled-only Select. It has the same API as the web atom/select (flat / grouped options,
+ * label, description, error slot, `open` / `onOpenChange`). There is no search, just like on the web.
+ *
+ * The web uses a Radix popover, but native lets the user choose in a bottom sheet (`Modal`).
+ * The trigger looks the same as the web input frame (control corner radius, 1px line-strong border, raised surface).
+ *
+ * Accessibility: the trigger is a `button` (`aria-expanded`), not the web's `combobox` (pressing it opens a **dialog**).
+ * Its name is "label, current value". The sheet is a dialog whose name is the heading (`sheetTitle`). The options are `radio`s in a `radiogroup`
+ * (`aria-checked`; each group is a radiogroup named by its heading).
+ */
+export declare function Select({ value, onValueChange, options, placeholder, label, required, description, helpText, disabled, invalid, size, open, onOpenChange, sheetTitle, closeLabel, accessibilityLabel, errorSlot, className, wrapperClassName, id, accessibilityHint, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }: SelectProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/select.js

@@ -0,0 +1,200 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn, isBlankNode } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { activateOnSpace } from "../lib/keyboard.js";
+import { Label } from "./label.js";
+import { SELECT_LABEL } from "../lib/labels.js";
+import { SheetHeader, SheetScroll, SheetShell } from "../base/sheet.js";
+import { useId, useState } from "react";
+import { Pressable, View } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+
+//#region src/native/atom/select.tsx
+const triggerHeight = {
+	xs: "h-7",
+	sm: "h-8",
+	default: "h-9"
+};
+function isOptionGroup(option) {
+	return "options" in option;
+}
+function flatten(options) {
+	return options.flatMap((option) => isOptionGroup(option) ? option.options : [option]);
+}
+/** Groups consecutive non-group options into one segment (so that each becomes a single radiogroup). */
+function toSegments(options) {
+	const segments = [];
+	for (const option of options) {
+		if (isOptionGroup(option)) {
+			segments.push({
+				kind: "labelled",
+				section: option
+			});
+			continue;
+		}
+		const last = segments.at(-1);
+		if (last?.kind === "plain") last.options.push(option);
+		else segments.push({
+			kind: "plain",
+			options: [option]
+		});
+	}
+	return segments;
+}
+/**
+* A controlled-only Select. It has the same API as the web atom/select (flat / grouped options,
+* label, description, error slot, `open` / `onOpenChange`). There is no search, just like on the web.
+*
+* The web uses a Radix popover, but native lets the user choose in a bottom sheet (`Modal`).
+* The trigger looks the same as the web input frame (control corner radius, 1px line-strong border, raised surface).
+*
+* Accessibility: the trigger is a `button` (`aria-expanded`), not the web's `combobox` (pressing it opens a **dialog**).
+* Its name is "label, current value". The sheet is a dialog whose name is the heading (`sheetTitle`). The options are `radio`s in a `radiogroup`
+* (`aria-checked`; each group is a radiogroup named by its heading).
+*/
+function Select({ value, onValueChange, options, placeholder, label, required, description, helpText, disabled, invalid, size = "default", open, onOpenChange, sheetTitle, closeLabel, accessibilityLabel, errorSlot, className, wrapperClassName, id, accessibilityHint, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }) {
+	const [internalOpen, setInternalOpen] = useState(false);
+	const isOpen = open ?? internalOpen;
+	const setOpen = (next) => {
+		onOpenChange?.(next);
+		if (open === void 0) setInternalOpen(next);
+	};
+	const generatedId = useId();
+	const triggerId = id ?? `${generatedId}-trigger`;
+	const labelId = `${generatedId}-label`;
+	const valueId = `${generatedId}-value`;
+	const descriptionId = `${generatedId}-description`;
+	const sheetTitleId = `${generatedId}-sheet-title`;
+	const mutedInk = useTokenColor("--ink-500");
+	const ink = useTokenColor("--ink-1000");
+	const selected = flatten(options).find((option) => option.value === value);
+	const valueText = selected?.label ?? placeholder ?? "";
+	const hasLabel = !isBlankNode(label);
+	const hasDescription = !isBlankNode(description);
+	const resolvedSheetTitle = [
+		sheetTitle,
+		label,
+		placeholder,
+		accessibilityLabel
+	].find((candidate) => !isBlankNode(candidate)) ?? "選択肢";
+	const labelledBy = ariaLabelledBy ?? (hasLabel ? labelId : void 0);
+	const nameText = accessibilityLabel ?? (typeof label === "string" ? label : void 0);
+	const describedBy = ariaDescribedBy ?? (hasDescription ? descriptionId : void 0);
+	const isInvalid = invalid ?? ariaInvalid;
+	const trigger = /* @__PURE__ */ jsxs(Pressable, {
+		id: triggerId,
+		accessibilityRole: "button",
+		accessibilityLabel: nameText === void 0 ? void 0 : `${nameText}、${valueText}`,
+		accessibilityHint,
+		"aria-labelledby": labelledBy === void 0 ? void 0 : `${labelledBy} ${valueId}`,
+		"aria-describedby": describedBy,
+		"aria-invalid": isInvalid ? true : void 0,
+		"aria-expanded": isOpen,
+		"aria-disabled": disabled,
+		onPress: () => setOpen(true),
+		disabled,
+		className: cn("w-full flex-row items-center justify-between gap-2 rounded-control border bg-raised px-3", triggerHeight[size], isInvalid ? "border-destructive" : "border-line-strong", disabled && "opacity-50", className),
+		children: [/* @__PURE__ */ jsx(Text$1, {
+			id: valueId,
+			className: cn("text-sm", selected ? "text-foreground" : "text-muted-foreground"),
+			numberOfLines: 1,
+			children: valueText
+		}), /* @__PURE__ */ jsx(Feather, {
+			name: "chevron-down",
+			size: 14,
+			color: mutedInk
+		})]
+	});
+	const choose = (next) => {
+		onValueChange(next);
+		setOpen(false);
+	};
+	const sheet = /* @__PURE__ */ jsxs(SheetShell, {
+		open: isOpen,
+		onOpenChange: setOpen,
+		maxHeightRatio: .7,
+		"aria-labelledby": sheetTitleId,
+		children: [/* @__PURE__ */ jsx(SheetHeader, {
+			title: resolvedSheetTitle,
+			closeLabel,
+			onClose: () => setOpen(false),
+			titleId: sheetTitleId
+		}), /* @__PURE__ */ jsx(SheetScroll, {
+			padded: false,
+			children: toSegments(options).map((segment, index) => segment.kind === "labelled" ? /* @__PURE__ */ jsx(GroupedRows, {
+				section: segment.section,
+				value,
+				tint: ink,
+				onChoose: choose
+			}, `labelled-${index.toString()}-${segment.section.label}`) : /* @__PURE__ */ jsx(View, {
+				role: "radiogroup",
+				"aria-labelledby": sheetTitleId,
+				children: segment.options.map((option) => /* @__PURE__ */ jsx(Row, {
+					option,
+					selected: option.value === value,
+					tint: ink,
+					onPress: () => choose(option.value)
+				}, option.value))
+			}, `plain-${index.toString()}`))
+		})]
+	});
+	if (!hasLabel && !hasDescription && !errorSlot) return /* @__PURE__ */ jsxs(Fragment$1, { children: [trigger, sheet] });
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("gap-1.5", wrapperClassName),
+		children: [
+			hasLabel ? /* @__PURE__ */ jsx(Label, {
+				id: labelId,
+				required,
+				helpText,
+				className: "text-xs font-semibold opacity-80",
+				children: label
+			}) : null,
+			trigger,
+			hasDescription ? /* @__PURE__ */ jsx(Text$1, {
+				id: descriptionId,
+				className: "text-muted-foreground text-xs",
+				children: description
+			}) : null,
+			errorSlot,
+			sheet
+		]
+	});
+}
+function GroupedRows({ section, value, tint, onChoose }) {
+	const headingId = useId();
+	return /* @__PURE__ */ jsxs(View, {
+		role: "radiogroup",
+		"aria-labelledby": headingId,
+		children: [/* @__PURE__ */ jsx(Text$1, {
+			id: headingId,
+			className: "text-muted-foreground border-b border-line px-4 py-2 text-xs font-semibold uppercase",
+			children: section.label
+		}), section.options.map((option) => /* @__PURE__ */ jsx(Row, {
+			option,
+			selected: option.value === value,
+			tint,
+			onPress: () => onChoose(option.value)
+		}, option.value))]
+	});
+}
+function Row({ option, selected, tint, onPress }) {
+	return /* @__PURE__ */ jsxs(Pressable, {
+		accessibilityRole: "radio",
+		"aria-checked": selected,
+		onPress,
+		onKeyDown: activateOnSpace(onPress),
+		className: cn("flex-row items-center justify-between border-b border-line px-4 py-3", selected && "bg-wash"),
+		children: [/* @__PURE__ */ jsx(Text$1, {
+			className: "text-foreground text-base",
+			children: option.label
+		}), selected ? /* @__PURE__ */ jsx(Feather, {
+			name: "check",
+			size: 16,
+			color: tint
+		}) : null]
+	});
+}
+
+//#endregion
+export { Select };

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

@@ -0,0 +1,12 @@
+//#region src/native/atom/separator.d.ts
+export type SeparatorProps = {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+};
+/**
+ * A 1px divider line. Same role as the web base/separator.
+ *
+ * Use `bg-line` rather than `bg-border` for the color (`--border` can fail to follow dark mode after its value is folded).
+ */
+export declare function Separator({ orientation, className }: SeparatorProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/separator.js

@@ -0,0 +1,16 @@
+import { cn } from "../lib/utils.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/atom/separator.tsx
+/**
+* A 1px divider line. Same role as the web base/separator.
+*
+* Use `bg-line` rather than `bg-border` for the color (`--border` can fail to follow dark mode after its value is folded).
+*/
+function Separator({ orientation = "horizontal", className }) {
+	return /* @__PURE__ */ jsx(View, { className: cn("bg-line shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className) });
+}
+
+//#endregion
+export { Separator };

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

@@ -0,0 +1,12 @@
+//#region src/native/atom/skeleton.d.ts
+export type SkeletonProps = {
+  className?: string;
+};
+/**
+ * A loading placeholder. The same pale surface + pulse as the web base/skeleton.
+ *
+ * The web uses `animate-pulse` (a CSS animation), but native should not depend on
+ * CSS animation support, so `Animated` produces the same 2-second pulse.
+ */
+export declare function Skeleton({ className }: SkeletonProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/skeleton.js

@@ -0,0 +1,39 @@
+import { cn } from "../lib/utils.js";
+import { useEffect, useRef } from "react";
+import { Animated, Easing, Platform } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/atom/skeleton.tsx
+/**
+* A loading placeholder. The same pale surface + pulse as the web base/skeleton.
+*
+* The web uses `animate-pulse` (a CSS animation), but native should not depend on
+* CSS animation support, so `Animated` produces the same 2-second pulse.
+*/
+function Skeleton({ className }) {
+	const opacity = useRef(new Animated.Value(1)).current;
+	useEffect(() => {
+		const useNativeDriver = Platform.OS !== "web";
+		const loop = Animated.loop(Animated.sequence([Animated.timing(opacity, {
+			toValue: .4,
+			duration: 1e3,
+			easing: Easing.inOut((value) => Easing.ease(value)),
+			useNativeDriver
+		}), Animated.timing(opacity, {
+			toValue: 1,
+			duration: 1e3,
+			easing: Easing.inOut((value) => Easing.ease(value)),
+			useNativeDriver
+		})]));
+		loop.start();
+		return () => loop.stop();
+	}, [opacity]);
+	return /* @__PURE__ */ jsx(Animated.View, {
+		"aria-hidden": true,
+		style: { opacity },
+		className: cn("bg-wash rounded-control", className)
+	});
+}
+
+//#endregion
+export { Skeleton };

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

@@ -0,0 +1,32 @@
+import { NamedControlA11yProps } from "../lib/control.js";
+import { ReactNode } from "react";
+//#region src/native/atom/slider.d.ts
+export type SliderProps = NamedControlA11yProps & {
+  value: number;
+  onValueChange: (value: number) => void;
+  min?: number;
+  max: number;
+  step?: number;
+  label?: ReactNode;
+  required?: boolean;
+  description?: ReactNode;
+  helpText?: ReactNode;
+  disabled?: boolean;
+  /** Formatted string shown to the right of the value. Defaults to the raw number. */
+  formattedValue?: string;
+  /** Name for screen readers. A string `label` is used as-is, so pass this only when `label` is not a string. */
+  accessibilityLabel?: string;
+  className?: string;
+  /** Class for the label text (made destructive when the form has an error). */
+  labelClassName?: string;
+  wrapperClassName?: string;
+  errorSlot?: ReactNode;
+};
+/**
+ * A controlled-only Slider. Same layout as the web atom/slider: a label row with the current value at the right end.
+ *
+ * The web also accepts a range (`number[]`) to match Radix's internal representation,
+ * but `@react-native-community/slider` has a single thumb only, so native handles a single value only.
+ */
+export declare function Slider({ value, onValueChange, min, max, step, label, required, description, helpText, disabled, formattedValue, accessibilityLabel, accessibilityHint, className, labelClassName, wrapperClassName, errorSlot, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }: SliderProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/slider.js

@@ -0,0 +1,75 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { tabularNums } from "../lib/typography.js";
+import { Label } from "./label.js";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import SliderPrimitive from "@react-native-community/slider";
+
+//#region src/native/atom/slider.tsx
+/**
+* A controlled-only Slider. Same layout as the web atom/slider: a label row with the current value at the right end.
+*
+* The web also accepts a range (`number[]`) to match Radix's internal representation,
+* but `@react-native-community/slider` has a single thumb only, so native handles a single value only.
+*/
+function Slider({ value, onValueChange, min = 0, max, step, label, required, description, helpText, disabled, formattedValue, accessibilityLabel, accessibilityHint, className, labelClassName, wrapperClassName, errorSlot, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }) {
+	const action = useTokenColor("--action");
+	const track = useTokenColor("--wash");
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("gap-2", wrapperClassName),
+		children: [
+			/* @__PURE__ */ jsxs(View, {
+				className: "flex-row items-baseline justify-between gap-2",
+				children: [label ? /* @__PURE__ */ jsx(Label, {
+					required,
+					helpText,
+					className: cn("text-xs font-semibold opacity-80", labelClassName),
+					children: label
+				}) : /* @__PURE__ */ jsx(View, {}), /* @__PURE__ */ jsx(Text$1, {
+					style: tabularNums,
+					className: "text-muted-foreground font-mono text-sm",
+					children: formattedValue ?? String(value)
+				})]
+			}),
+			/* @__PURE__ */ jsx(View, {
+				className: cn("grow", className),
+				children: /* @__PURE__ */ jsx(SliderPrimitive, {
+					value,
+					onValueChange,
+					minimumValue: min,
+					maximumValue: max,
+					step: step ?? 0,
+					disabled,
+					minimumTrackTintColor: action,
+					maximumTrackTintColor: track,
+					thumbTintColor: action,
+					accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
+					accessibilityHint,
+					id,
+					"aria-describedby": ariaDescribedBy,
+					"aria-invalid": ariaInvalid,
+					"aria-valuemin": min,
+					"aria-valuemax": max,
+					"aria-valuenow": value,
+					"aria-valuetext": formattedValue,
+					accessibilityValue: {
+						min,
+						max,
+						now: value,
+						text: formattedValue
+					}
+				})
+			}),
+			description ? /* @__PURE__ */ jsx(Text$1, {
+				className: "text-muted-foreground text-xs",
+				children: description
+			}) : null,
+			errorSlot
+		]
+	});
+}
+
+//#endregion
+export { Slider };

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

@@ -0,0 +1,15 @@
+//#region src/native/atom/spinner.d.ts
+export type SpinnerProps = {
+  /** Fills the parent and centers the spinner. */
+  full?: boolean;
+  size?: "small" | "large";
+  /** Name for screen readers. Defaults to the "loading" label. */
+  label?: string;
+  className?: string;
+};
+/**
+ * Loading indicator. Its `full` behavior is the same as the web atom/spinner.
+ * It looks like the OS-standard spinner (the native counterpart of the web's rotating lucide icon).
+ */
+export declare function Spinner({ full, size, label, className }: SpinnerProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/spinner.js

@@ -0,0 +1,25 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { LOADING_LABEL } from "../lib/labels.js";
+import { ActivityIndicator, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/atom/spinner.tsx
+/**
+* Loading indicator. Its `full` behavior is the same as the web atom/spinner.
+* It looks like the OS-standard spinner (the native counterpart of the web's rotating lucide icon).
+*/
+function Spinner({ full, size = "small", label = LOADING_LABEL, className }) {
+	const ink = useTokenColor("--ink-1000");
+	return /* @__PURE__ */ jsx(View, {
+		className: cn(full && "h-full w-full grow items-center justify-center", className),
+		children: /* @__PURE__ */ jsx(ActivityIndicator, {
+			size,
+			color: ink,
+			accessibilityLabel: label
+		})
+	});
+}
+
+//#endregion
+export { Spinner };

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;
+  /** Name for screen readers. The switch itself has no text, so always pass it when a label is placed next to it. */
+  accessibilityLabel?: string;
+  className?: string;
+};
+/**
+ * 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.
+ */
+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