@lt-three/love3 0.0.0-stage → 0.1.0

package/dist/native/atom/label.js

@@ -0,0 +1,33 @@
+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/label.tsx
+/**
+* `@lt-three/web` の base/label と同じ見た目のラベル。
+* web の `htmlFor` に相当するものは RN に無いので、タップでの入力フォーカス連動は持たない。
+*/
+function Label({ children, required, helpText, className, id }) {
+	return /* @__PURE__ */ jsxs(View, {
+		className: "flex-row items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx(Text$1, {
+				id,
+				className: cn("text-sm font-medium leading-none", className),
+				children
+			}),
+			required ? /* @__PURE__ */ jsx(Text$1, {
+				className: "text-destructive text-sm",
+				children: "*"
+			}) : null,
+			helpText ? /* @__PURE__ */ jsx(Text$1, {
+				className: "text-muted-foreground text-xs font-normal",
+				children: helpText
+			}) : null
+		]
+	});
+}
+
+//#endregion
+export { Label };

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;
+};
+/**
+ * expo-router の `Link` にスタイルを当てたもの。`@lt-three/web` の atom/link
+ * （TanStack Router の `Link` をラップ）に対応する。`href` の型はルーター側のものを保つ。
+ *
+ * 文字色は `text-foreground`（移植元は色を持たず、親が色を渡さないとダークで黒のまま背景に沈む）。className で上書きできる。
+ *
+ * expo-router のナビゲーションツリーの中でしか描画できないため、実機では story を持たない
+ * （`base/` を Storybook から外しているのと同じ理由）。preview・vitest は `<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
+/**
+* expo-router の `Link` にスタイルを当てたもの。`@lt-three/web` の atom/link
+* （TanStack Router の `Link` をラップ）に対応する。`href` の型はルーター側のものを保つ。
+*
+* 文字色は `text-foreground`（移植元は色を持たず、親が色を渡さないとダークで黒のまま背景に沈む）。className で上書きできる。
+*
+* expo-router のナビゲーションツリーの中でしか描画できないため、実機では story を持たない
+* （`base/` を Storybook から外しているのと同じ理由）。preview・vitest は `<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 = {
+  /** オールキャップスのメトリクス名（例: NET PROFIT）。 */
+  label: string;
+  value: string;
+  /**
+   * 数値の色。損益の gain/loss のように**テーマ非依存で意味が固定された色**を
+   * 呼び出し側が渡す用途に限る。未指定なら `text-foreground`。
+   */
+  valueColor?: string;
+  sub?: string;
+  /** 大型（詳細ヘッダ用）か通常か。 */
+  size?: "md" | "lg";
+  className?: string;
+};
+/**
+ * 計器的な読み取り値。`@lt-three/web` の MetricCard の内側に揃えた
+ * 「オールキャップスのミュートラベル + 大型の太字数値 + 補助テキスト」の 3 段構成。
+ * 数値は等幅（Geist Mono + タブラー）にして桁を揃える。
+ */
+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
+/**
+* 計器的な読み取り値。`@lt-three/web` の MetricCard の内側に揃えた
+* 「オールキャップスのミュートラベル + 大型の太字数値 + 補助テキスト」の 3 段構成。
+* 数値は等幅（Geist Mono + タブラー）にして桁を揃える。
+*/
+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;
+};
+/**
+ * 検索入力。`@lt-three/web` の SearchInput に合わせ、control 角丸・ソフトな面・
+ * 先頭の検索アイコンという同じ構成にする（Liquid Glass のカプセルは使わない）。
+ */
+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
+/**
+* 検索入力。`@lt-three/web` の SearchInput に合わせ、control 角丸・ソフトな面・
+* 先頭の検索アイコンという同じ構成にする（Liquid Glass のカプセルは使わない）。
+*/
+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;
+  /** エラー。トリガーの罫線が destructive になり、`aria-invalid` が付く（フォームの中では `FormControl` が渡す `aria-invalid` でも同じ）。 */
+  invalid?: boolean;
+  size?: "xs" | "sm" | "default";
+  /** 開閉の制御（省略時は内部状態）。 */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** ピッカーの見出し（省略時は `label`、無ければ `placeholder`）。ダイアログの名前になる。 */
+  sheetTitle?: ReactNode;
+  /** ピッカーの閉じるボタンの読み上げ名（既定は「閉じる」）。 */
+  closeLabel?: string;
+  /**
+   * トリガーの名前（可視のラベルが無いとき。`label` が文字列ならそれが既定）。読み上げは「名前、現在の値」になる
+   * （トリガーは押すとシートが開くボタンなので、値も名前に含めて読ませる）。
+   */
+  accessibilityLabel?: string;
+  /** form 側でエラーを差し込むためのスロット。 */
+  errorSlot?: ReactNode;
+  className?: string;
+  wrapperClassName?: string;
+};
+/**
+ * 制御専用の Select。`@lt-three/web` の atom/select と同じ API（フラット / グループのオプション、
+ * ラベル・説明・エラースロット・`open` / `onOpenChange`）を持つ。検索は web にも移植元にも無い。
+ *
+ * web は Radix のポップオーバーだが、native は下から出るシート（`Modal`）で選ばせる。
+ * トリガーの見た目は web の入力枠（control 角丸・1px の line-strong 枠・raised 面）に揃えてある。
+ *
+ * アクセシビリティ: トリガーは `button`（`aria-expanded`）で、web の `combobox` ではない（押すと**ダイアログ**が開くため）。
+ * 名前は「ラベル 現在の値」。シートはダイアログで、見出し（`sheetTitle`）が名前。選択肢は `radiogroup` の `radio`
+ * （`aria-checked`。グループは見出しで名前を付けた radiogroup）。
+ */
+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]);
+}
+/** グループでない選択肢の連続を 1 つの塊にする（それぞれを 1 つの 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;
+}
+/**
+* 制御専用の Select。`@lt-three/web` の atom/select と同じ API（フラット / グループのオプション、
+* ラベル・説明・エラースロット・`open` / `onOpenChange`）を持つ。検索は web にも移植元にも無い。
+*
+* web は Radix のポップオーバーだが、native は下から出るシート（`Modal`）で選ばせる。
+* トリガーの見た目は web の入力枠（control 角丸・1px の line-strong 枠・raised 面）に揃えてある。
+*
+* アクセシビリティ: トリガーは `button`（`aria-expanded`）で、web の `combobox` ではない（押すと**ダイアログ**が開くため）。
+* 名前は「ラベル 現在の値」。シートはダイアログで、見出し（`sheetTitle`）が名前。選択肢は `radiogroup` の `radio`
+* （`aria-checked`。グループは見出しで名前を付けた radiogroup）。
+*/
+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,13 @@
+//#region src/native/atom/separator.d.ts
+export type SeparatorProps = {
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+};
+/**
+ * 1px の区切り線。`@lt-three/web` の base/separator と同じ役割。
+ *
+ * 色は `bg-border` ではなく `bg-line` を使う（`--border` は畳み込みでダークに追従しないことがある。
+ * `.claude/rules/packages/ts/index.md` 参照）。
+ */
+export declare function Separator({ orientation, className }: SeparatorProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/separator.js

@@ -0,0 +1,17 @@
+import { cn } from "../lib/utils.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/atom/separator.tsx
+/**
+* 1px の区切り線。`@lt-three/web` の base/separator と同じ役割。
+*
+* 色は `bg-border` ではなく `bg-line` を使う（`--border` は畳み込みでダークに追従しないことがある。
+* `.claude/rules/packages/ts/index.md` 参照）。
+*/
+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;
+};
+/**
+ * 読み込み中のプレースホルダ。`@lt-three/web` の base/skeleton と同じ薄い面 + 明滅。
+ *
+ * web は `animate-pulse`（CSS アニメーション）だが、native は CSS アニメーションの対応状況に
+ * 依存させたくないので `Animated` で同じ 2 秒周期の明滅を作る。
+ */
+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
+/**
+* 読み込み中のプレースホルダ。`@lt-three/web` の base/skeleton と同じ薄い面 + 明滅。
+*
+* web は `animate-pulse`（CSS アニメーション）だが、native は CSS アニメーションの対応状況に
+* 依存させたくないので `Animated` で同じ 2 秒周期の明滅を作る。
+*/
+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;
+  /** 値の右側に表示する整形済み文字列。省略時は生の数値。 */
+  formattedValue?: string;
+  /** 読み上げ名。`label` が文字列ならそれを使うので、文字列でないときだけ渡す。 */
+  accessibilityLabel?: string;
+  className?: string;
+  /** ラベルの文字のクラス（フォームがエラーのとき destructive にする）。 */
+  labelClassName?: string;
+  wrapperClassName?: string;
+  errorSlot?: ReactNode;
+};
+/**
+ * 制御専用の Slider。`@lt-three/web` の atom/slider と同じ「ラベル行 + 右端に現在値」の構成。
+ *
+ * web は Radix の内部表現に合わせて範囲（`number[]`）も取れるが、
+ * `@react-native-community/slider` は単一つまみのみなので native は単一値だけを扱う。
+ */
+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
+/**
+* 制御専用の Slider。`@lt-three/web` の atom/slider と同じ「ラベル行 + 右端に現在値」の構成。
+*
+* web は Radix の内部表現に合わせて範囲（`number[]`）も取れるが、
+* `@react-native-community/slider` は単一つまみのみなので native は単一値だけを扱う。
+*/
+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 = {
+  /** 親いっぱいに広げて中央寄せする。 */
+  full?: boolean;
+  size?: "small" | "large";
+  /** 読み上げ名。既定は「読み込み中」。 */
+  label?: string;
+  className?: string;
+};
+/**
+ * 読み込みインジケータ。`@lt-three/web` の atom/spinner と同じ `full` の振る舞いを持つ。
+ * 見た目は OS 標準のスピナー（web の lucide の回転アイコンに対応する native の作法）。
+ */
+export declare function Spinner({ full, size, label, className }: SpinnerProps): import("react").JSX.Element;
+//#endregion