@lt-three/love3 0.0.0-stage → 0.1.0

package/dist/native/analytics/single-number.d.ts

@@ -0,0 +1,19 @@
+//#region src/native/analytics/single-number.d.ts
+export type SingleNumberProps = {
+  title: string;
+  subTitle?: string;
+  value: number | null;
+  unit?: string;
+  /** 比較対象の値。渡すと差分と増減率を併記する。 */
+  compareValue?: number;
+  compareTitle?: string;
+  /** 増が悪い指標（コスト等）で色を反転する。 */
+  reverseColor?: boolean;
+  className?: string;
+};
+/**
+ * raised 面（surface 角丸・1px の極薄の罫線）に大きな数値を載せる指標。
+ * `@lt-three/web` の analytics/single-number に対応する。増減は state の色（面が反転しないので、同じテーマの値でよい）。
+ */
+export declare function SingleNumber({ title, subTitle, value, unit, compareValue, compareTitle, reverseColor, className }: SingleNumberProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/single-number.js

@@ -0,0 +1,101 @@
+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 { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+
+//#region src/native/analytics/single-number.tsx
+/**
+* raised 面（surface 角丸・1px の極薄の罫線）に大きな数値を載せる指標。
+* `@lt-three/web` の analytics/single-number に対応する。増減は state の色（面が反転しないので、同じテーマの値でよい）。
+*/
+function SingleNumber({ title, subTitle, value, unit, compareValue, compareTitle, reverseColor, className }) {
+	const up = useTokenColor("--state-success");
+	const down = useTokenColor("--state-error");
+	const diff = typeof compareValue === "number" ? (value ?? 0) - compareValue : 0;
+	const diffPercent = (1 - (value ?? 0) / (compareValue ?? 0)) * -100;
+	const diffColor = reverseColor ? diff < 0 ? up : down : diff < 0 ? down : up;
+	const iconName = diff < 0 ? "chevron-down" : "chevron-up";
+	const showCompare = typeof value === "number" && typeof compareValue === "number";
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("gap-3 rounded-surface border border-line bg-card p-3", className),
+		children: [
+			/* @__PURE__ */ jsxs(View, {
+				className: "flex-row items-end gap-2",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					className: "text-card-foreground text-lg font-bold",
+					children: title
+				}), subTitle ? /* @__PURE__ */ jsx(Text$1, {
+					className: "text-muted-foreground text-xs",
+					children: subTitle
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				className: "flex-row items-end",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					style: tabularNums,
+					className: "text-card-foreground font-mono text-3xl leading-none",
+					children: value
+				}), unit ? /* @__PURE__ */ jsx(Text$1, {
+					className: "text-card-foreground ml-1 text-base",
+					children: unit
+				}) : null]
+			}),
+			showCompare ? /* @__PURE__ */ jsxs(View, {
+				className: "flex-row items-end gap-2",
+				children: [
+					/* @__PURE__ */ jsxs(View, {
+						className: "flex-row items-center",
+						children: [
+							/* @__PURE__ */ jsx(Feather, {
+								name: iconName,
+								size: 14,
+								color: diffColor
+							}),
+							/* @__PURE__ */ jsx(Text$1, {
+								style: [tabularNums, { color: diffColor }],
+								className: "font-mono text-lg leading-none",
+								children: diff
+							}),
+							unit ? /* @__PURE__ */ jsx(Text$1, {
+								style: { color: diffColor },
+								className: "ml-1 text-xs",
+								children: unit
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ jsxs(View, {
+						className: "flex-row items-center",
+						children: [
+							/* @__PURE__ */ jsx(Feather, {
+								name: iconName,
+								size: 14,
+								color: diffColor
+							}),
+							/* @__PURE__ */ jsx(Text$1, {
+								style: [tabularNums, { color: diffColor }],
+								className: "font-mono text-lg leading-none",
+								children: Number.isNaN(diffPercent) ? 0 : !Number.isFinite(diffPercent) ? 100 : diffPercent.toFixed(2)
+							}),
+							/* @__PURE__ */ jsx(Text$1, {
+								style: { color: diffColor },
+								className: "ml-1 text-xs",
+								children: "%"
+							})
+						]
+					}),
+					compareTitle ? /* @__PURE__ */ jsx(Text$1, {
+						style: { color: diffColor },
+						className: "text-xs",
+						children: compareTitle
+					}) : null
+				]
+			}) : null
+		]
+	});
+}
+
+//#endregion
+export { SingleNumber };

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

@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+//#region src/native/atom/avatar.d.ts
+export type AvatarProps = {
+  src?: string;
+  /** 画像の代替テキスト。既定は空（飾り。隣に名前が出ている前提）。名前の無い単独の顔なら、人の名前を渡す（web と同じ） */
+  alt?: string;
+  /**
+   * 画像が無い / 失敗したときに出すもの（イニシャル等）。文字列は Text で包む。**省略・空文字は人物アイコン**
+   * （web は空文字だと何も出さない）。数値は受けない（RN は View の直下の文字を描けない。文字列にして渡す）。
+   */
+  fallback?: string | ReactElement;
+  /** 一辺の px。既定は web の `size-6` と同じ 24。 */
+  size?: number;
+  className?: string;
+};
+/**
+ * `@lt-three/web` の atom/avatar と同じ構成（画像 + フォールバック）。
+ * web の Avatar と同じ円（`rounded-full`）で描く。
+ */
+export declare function Avatar({ src, alt, fallback, size, className }: AvatarProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/avatar.js

@@ -0,0 +1,46 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { useState } from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+import { Image } from "expo-image";
+
+//#region src/native/atom/avatar.tsx
+/**
+* `@lt-three/web` の atom/avatar と同じ構成（画像 + フォールバック）。
+* web の Avatar と同じ円（`rounded-full`）で描く。
+*/
+function Avatar({ src, alt = "", fallback, size = 24, className }) {
+	const [failed, setFailed] = useState(false);
+	const wash = useTokenColor("--wash");
+	const showImage = !!src && !failed;
+	return /* @__PURE__ */ jsx(View, {
+		style: {
+			width: size,
+			height: size
+		},
+		className: cn("items-center justify-center overflow-hidden rounded-full bg-ink-500", className),
+		children: showImage ? /* @__PURE__ */ jsx(Image, {
+			source: { uri: src },
+			accessibilityLabel: alt,
+			style: {
+				width: size,
+				height: size
+			},
+			onError: () => setFailed(true)
+		}) : fallback === void 0 || fallback === "" ? /* @__PURE__ */ jsx(Feather, {
+			name: "user",
+			size: size * .6,
+			color: wash
+		}) : typeof fallback === "string" ? /* @__PURE__ */ jsx(Text$1, {
+			style: { fontSize: size * .45 },
+			className: "text-wash font-medium",
+			children: fallback
+		}) : fallback
+	});
+}
+
+//#endregion
+export { Avatar };

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

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/native/atom/badge.d.ts
+declare const badgeVariants: (props?: ({
+  variant?: "<3" | "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeVariants = VariantProps<typeof badgeVariants>["variant"];
+export type BadgeProps = {
+  children: ReactNode;
+  variant?: BadgeVariants;
+  /**
+   * タップ可能にする（フィルタチップ等）。web の Badge には無い native 固有の追加で、
+   * 見た目は変えずに `hitSlop` で 44pt 相当のタップ領域を確保する。
+   */
+  onPress?: () => void;
+  /**
+   * 読み上げ・E2E 用の名前。同じ文言のチップが軸をまたいで並ぶとき
+   * （どの軸の「すべて」なのか）に必ず渡す。
+   */
+  accessibilityLabel?: string;
+  /** 選択中のチップであることを読み上げ・E2E に伝える。 */
+  selected?: boolean;
+  className?: string;
+  textClassName?: string;
+};
+export declare function Badge({ children, variant, onPress, accessibilityLabel, selected, className, textClassName }: BadgeProps): import("react").JSX.Element;
+//#endregion
+export { badgeVariants };

package/dist/native/atom/badge.js

@@ -0,0 +1,51 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { tabularNums } from "../lib/typography.js";
+import { Platform, Pressable, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/native/atom/badge.tsx
+const badgeVariants = cva("h-5 flex-row items-center justify-center gap-1 self-start rounded-control border px-1.5", {
+	variants: { variant: {
+		default: "border-transparent bg-action",
+		secondary: "border-transparent bg-secondary",
+		destructive: "border-state-error/30 bg-state-error/5",
+		outline: "border-line-strong",
+		"<3": "border-transparent bg-lt-three"
+	} },
+	defaultVariants: { variant: "default" }
+});
+const badgeTextVariants = cva("font-mono text-xs font-medium tracking-[0.01em]", {
+	variants: { variant: {
+		default: "text-action-foreground",
+		secondary: "text-secondary-foreground",
+		destructive: "text-state-error",
+		outline: "text-foreground",
+		"<3": "text-lt-three-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ children, variant, onPress, accessibilityLabel, selected, className, textClassName }) {
+	const badge = /* @__PURE__ */ jsx(View, {
+		className: cn(badgeVariants({ variant }), className),
+		children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text$1, {
+			style: tabularNums,
+			className: cn(badgeTextVariants({ variant }), textClassName),
+			children
+		}) : children
+	});
+	if (!onPress) return badge;
+	return /* @__PURE__ */ jsx(Pressable, {
+		accessibilityRole: "button",
+		accessibilityLabel,
+		...Platform.OS === "web" ? { "aria-pressed": selected } : { "aria-selected": selected },
+		onPress,
+		hitSlop: 12,
+		className: "self-start",
+		children: badge
+	});
+}
+
+//#endregion
+export { Badge, badgeVariants };

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

@@ -0,0 +1,46 @@
+import { ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/native/atom/button.d.ts
+/**
+ * `@lt-three/web` の base/button と同じバリアント・同じ見た目（インディゴの主操作・raised 面＋薄い枠・control 角丸）を持つボタン。
+ * 高さだけは、指で押す前提で web より大きい（既定 36）。
+ *
+ * `base/button`（`@expo/ui`）が OS ネイティブのボタン（iOS 26 の Liquid Glass 等）を出すのに対し、
+ * こちらは RN の `Pressable` なのでトークンで塗れる。**web と同じ見た目にしたい場所はこちらを使う。**
+ *
+ * web の `hover:` は RN に無いので、押下中の `pressed` に読み替えてある。
+ *
+ * web の Button は `inline-flex` なので内容幅に縮む。RN の `Pressable` は親の cross axis
+ * いっぱいに伸びるため `self-start` で同じ挙動にする。画面幅いっぱいの CTA にしたいときは
+ * 使用側で `className="self-stretch"` を渡す。
+ */
+declare const buttonVariants: (props?: ({
+  variant?: "<3" | "default" | "destructive" | "ghost" | "link" | "outline" | "plate" | "secondary" | null | undefined;
+  size?: "default" | "icon" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const buttonTextVariants: (props?: ({
+  variant?: "<3" | "default" | "destructive" | "ghost" | "link" | "outline" | "plate" | "secondary" | null | undefined;
+  size?: "default" | "icon" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+export type ButtonProps = ButtonVariants & {
+  children?: ReactNode;
+  onPress?: () => void;
+  disabled?: boolean;
+  /**
+   * ラベルの左右に置く要素。web は lucide のコンポーネント型を取るが、native は
+   * `@expo/vector-icons` / `expo-symbols` など描画系がまちまちなので描画済みの要素を受け取る。
+   */
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  /**
+   * 読み上げ・E2E 用の名前。**一覧の中で同じ文言のボタンが並ぶとき（行ごとの「削除」等）は
+   * 必ず渡す。** 付けないと VoiceOver でどの行のボタンか分からず、E2E も掴み分けられない。
+   */
+  accessibilityLabel?: string;
+  className?: string;
+  textClassName?: string;
+};
+export declare function Button({ children, onPress, disabled, variant, size, iconLeft, iconRight, accessibilityLabel, className, textClassName }: ButtonProps): import("react").JSX.Element;
+//#endregion
+export { buttonTextVariants, buttonVariants };

package/dist/native/atom/button.js

@@ -0,0 +1,109 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1, TextClassContext } from "../base/text.js";
+import { useState } from "react";
+import { Pressable } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/native/atom/button.tsx
+/**
+* `@lt-three/web` の base/button と同じバリアント・同じ見た目（インディゴの主操作・raised 面＋薄い枠・control 角丸）を持つボタン。
+* 高さだけは、指で押す前提で web より大きい（既定 36）。
+*
+* `base/button`（`@expo/ui`）が OS ネイティブのボタン（iOS 26 の Liquid Glass 等）を出すのに対し、
+* こちらは RN の `Pressable` なのでトークンで塗れる。**web と同じ見た目にしたい場所はこちらを使う。**
+*
+* web の `hover:` は RN に無いので、押下中の `pressed` に読み替えてある。
+*
+* web の Button は `inline-flex` なので内容幅に縮む。RN の `Pressable` は親の cross axis
+* いっぱいに伸びるため `self-start` で同じ挙動にする。画面幅いっぱいの CTA にしたいときは
+* 使用側で `className="self-stretch"` を渡す。
+*/
+const buttonVariants = cva("flex-row items-center justify-center gap-2 self-start rounded-control border border-transparent", {
+	variants: {
+		variant: {
+			default: "bg-action",
+			destructive: "bg-destructive-solid",
+			outline: "border-line-strong bg-raised",
+			secondary: "border-line-strong bg-raised",
+			ghost: "",
+			link: "",
+			plate: "border-black bg-white",
+			"<3": "bg-lt-three"
+		},
+		size: {
+			default: "h-9 px-4",
+			xs: "h-7 gap-1 px-2",
+			sm: "h-8 gap-1.5 px-3",
+			lg: "h-10 px-6",
+			xl: "h-12 px-6",
+			icon: "h-8 w-8",
+			"icon-xs": "h-7 w-7"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const buttonTextVariants = cva("font-medium", {
+	variants: {
+		variant: {
+			default: "text-action-foreground",
+			destructive: "text-destructive-solid-foreground",
+			outline: "text-foreground",
+			secondary: "text-secondary-foreground",
+			ghost: "text-foreground",
+			link: "text-action-ink underline",
+			plate: "font-normal text-black",
+			"<3": "text-lt-three-foreground"
+		},
+		size: {
+			default: "text-sm",
+			xs: "text-xs",
+			sm: "text-sm",
+			lg: "text-sm",
+			xl: "text-sm",
+			icon: "text-sm",
+			"icon-xs": "text-xs"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Button({ children, onPress, disabled, variant, size, iconLeft, iconRight, accessibilityLabel, className, textClassName }) {
+	const textClass = cn(buttonTextVariants({
+		variant,
+		size
+	}), textClassName);
+	const [pressed, setPressed] = useState(false);
+	return /* @__PURE__ */ jsx(Pressable, {
+		onPress,
+		onPressIn: () => setPressed(true),
+		onPressOut: () => setPressed(false),
+		disabled,
+		accessibilityRole: "button",
+		"aria-disabled": disabled,
+		accessibilityLabel,
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), pressed && "opacity-70", disabled && "opacity-50", className),
+		children: /* @__PURE__ */ jsxs(TextClassContext.Provider, {
+			value: textClass,
+			children: [
+				iconLeft,
+				typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text$1, {
+					className: textClass,
+					children
+				}) : children,
+				iconRight
+			]
+		})
+	});
+}
+
+//#endregion
+export { Button, buttonTextVariants, buttonVariants };

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

@@ -0,0 +1,21 @@
+import { NamedControlA11yProps } from "../lib/control.js";
+import { ReactNode } from "react";
+//#region src/native/atom/checkbox.d.ts
+export type CheckboxProps = NamedControlA11yProps & {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  /** チェックボックスの右に表示するラベル。タップ領域に含まれる。 */
+  label?: ReactNode;
+  /** 読み上げ名。ラベルが文字列ならそれを使うので、ラベルが無い・文字列でないときに渡す。 */
+  accessibilityLabel?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  className?: string;
+  wrapperClassName?: string;
+};
+/**
+ * `@lt-three/web` の base/checkbox と同じ 16px の control 角丸の四角。
+ * 未選択は raised 面 + line-control の枠（3:1）、チェック時はインディゴ塗り + 白のチェック。
+ */
+export declare function Checkbox({ checked, onCheckedChange, label, accessibilityLabel, disabled, invalid, className, wrapperClassName, accessibilityHint, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }: CheckboxProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/checkbox.js

@@ -0,0 +1,47 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { activateOnSpace } from "../lib/keyboard.js";
+import { Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+
+//#region src/native/atom/checkbox.tsx
+/**
+* `@lt-three/web` の base/checkbox と同じ 16px の control 角丸の四角。
+* 未選択は raised 面 + line-control の枠（3:1）、チェック時はインディゴ塗り + 白のチェック。
+*/
+function Checkbox({ checked, onCheckedChange, label, accessibilityLabel, disabled, invalid, className, wrapperClassName, accessibilityHint, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid }) {
+	const isInvalid = invalid ?? ariaInvalid;
+	const checkColor = useTokenColor("--action-foreground");
+	const box = /* @__PURE__ */ jsx(View, {
+		className: cn("h-4 w-4 shrink-0 items-center justify-center rounded-control border", checked ? "border-action bg-action" : "border-line-control bg-raised", isInvalid && "border-destructive", disabled && "opacity-50", className),
+		children: checked ? /* @__PURE__ */ jsx(Feather, {
+			name: "check",
+			size: 12,
+			color: checkColor
+		}) : null
+	});
+	return /* @__PURE__ */ jsxs(Pressable, {
+		accessibilityRole: "checkbox",
+		accessibilityLabel: accessibilityLabel ?? (typeof label === "string" ? label : void 0),
+		"aria-checked": checked,
+		"aria-disabled": disabled,
+		"aria-invalid": isInvalid,
+		"aria-describedby": ariaDescribedBy,
+		accessibilityHint,
+		id,
+		onPress: () => onCheckedChange(!checked),
+		onKeyDown: activateOnSpace(() => onCheckedChange(!checked), disabled),
+		disabled,
+		hitSlop: 12,
+		className: cn("flex-row items-center gap-1.5 self-start", wrapperClassName),
+		children: [box, label === void 0 ? null : typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsx(Text$1, {
+			className: "text-sm font-medium leading-none",
+			children: label
+		}) : label]
+	});
+}
+
+//#endregion
+export { Checkbox };

package/dist/native/atom/colored-value.d.ts

@@ -0,0 +1,12 @@
+import { ColoredValueSharedProps } from "../../shared/analytics.js";
+import { ReactNode } from "react";
+//#region src/native/atom/colored-value.d.ts
+export type ColoredValueProps<TValue> = ColoredValueSharedProps<TValue>;
+/**
+ * 符号で色が変わる数値。web の atom/colored-value（love3）と同じ API（`shared/analytics.ts`）。
+ * 既定色は Tailwind の固定パレット（green-500 / red-500）でなく、トークンの `state-success` / `state-error`
+ * （ダークでも 4.5:1 を保つ）。
+ * 数値なので等幅（タブラー）で描く。
+ */
+export declare function ColoredValue<TValue>({ value, format, isPositive, isNegative, positiveColor, negativeColor, className }: ColoredValueProps<TValue>): ReactNode;
+//#endregion

package/dist/native/atom/colored-value.js

@@ -0,0 +1,24 @@
+import { cn } from "../lib/utils.js";
+import { Text } from "../base/text.js";
+import { tabularNums } from "../lib/typography.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/atom/colored-value.tsx
+/**
+* 符号で色が変わる数値。web の atom/colored-value（love3）と同じ API（`shared/analytics.ts`）。
+* 既定色は Tailwind の固定パレット（green-500 / red-500）でなく、トークンの `state-success` / `state-error`
+* （ダークでも 4.5:1 を保つ）。
+* 数値なので等幅（タブラー）で描く。
+*/
+function ColoredValue({ value, format, isPositive, isNegative, positiveColor = "text-state-success", negativeColor = "text-state-error", className }) {
+	const formatted = format ? format(value) : String(value);
+	const toneClass = isPositive?.(value) ? positiveColor : isNegative?.(value) ? negativeColor : void 0;
+	return /* @__PURE__ */ jsx(Text, {
+		style: tabularNums,
+		className: cn("font-mono", toneClass, className),
+		children: formatted
+	});
+}
+
+//#endregion
+export { ColoredValue };

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

@@ -0,0 +1,21 @@
+//#region src/native/atom/image.d.ts
+export type ImageWithLoaderProps = {
+  src: string;
+  /** スクリーンリーダー向けの説明。web の `alt` に対応する。 */
+  alt: string;
+  /** タップで全画面表示にする（既定 true）。 */
+  expandable?: boolean;
+  /** 読み込み失敗時に出す文言。共有パッケージなので文言は使用側が持つ。 */
+  errorText?: string;
+  /** 拡大するボタンの読み上げ名。 */
+  expandLabel?: string;
+  /** 拡大表示を閉じるボタンの読み上げ名。 */
+  closeLabel?: string;
+  className?: string;
+};
+/**
+ * 読み込み中はスケルトン、失敗時はプレースホルダを出す画像。
+ * `@lt-three/web` の atom/image（ImageWithLoader）に対応する。
+ */
+export declare function ImageWithLoader({ src, alt, expandable, errorText, expandLabel, closeLabel, className }: ImageWithLoaderProps): import("react").JSX.Element;
+//#endregion

package/dist/native/atom/image.js

@@ -0,0 +1,72 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { Skeleton } from "./skeleton.js";
+import { useState } from "react";
+import { Modal, Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Image } from "expo-image";
+
+//#region src/native/atom/image.tsx
+/**
+* 読み込み中はスケルトン、失敗時はプレースホルダを出す画像。
+* `@lt-three/web` の atom/image（ImageWithLoader）に対応する。
+*/
+function ImageWithLoader({ src, alt, expandable = true, errorText = "画像の読み込みに失敗しました", expandLabel = "画像を拡大する", closeLabel = "閉じる", className }) {
+	const [status, setStatus] = useState("loading");
+	const [expanded, setExpanded] = useState(false);
+	if (status === "error") return /* @__PURE__ */ jsx(View, {
+		className: cn("items-center justify-center bg-muted p-5", className),
+		children: /* @__PURE__ */ jsx(Text$1, {
+			className: "text-muted-foreground text-sm",
+			children: errorText
+		})
+	});
+	const image = /* @__PURE__ */ jsx(Image, {
+		source: { uri: src },
+		accessibilityLabel: alt,
+		contentFit: "cover",
+		style: {
+			width: "100%",
+			height: "100%"
+		},
+		onLoad: () => setStatus("loaded"),
+		onError: () => setStatus("error")
+	});
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("overflow-hidden", className),
+		children: [
+			status === "loading" ? /* @__PURE__ */ jsx(Skeleton, { className: "absolute inset-0" }) : null,
+			expandable ? /* @__PURE__ */ jsx(Pressable, {
+				accessibilityRole: "button",
+				accessibilityLabel: alt === "" ? expandLabel : `${alt}（${expandLabel}）`,
+				className: "h-full w-full",
+				onPress: () => setExpanded(true),
+				children: image
+			}) : image,
+			/* @__PURE__ */ jsx(Modal, {
+				visible: expanded,
+				transparent: true,
+				animationType: "fade",
+				onRequestClose: () => setExpanded(false),
+				children: /* @__PURE__ */ jsx(Pressable, {
+					accessibilityRole: "button",
+					accessibilityLabel: closeLabel,
+					className: "flex-1 items-center justify-center bg-scrim p-4",
+					onPress: () => setExpanded(false),
+					children: /* @__PURE__ */ jsx(Image, {
+						source: { uri: src },
+						accessibilityLabel: alt,
+						contentFit: "contain",
+						style: {
+							flex: 1,
+							width: "100%"
+						}
+					})
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { ImageWithLoader };

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+//#region src/native/atom/label.d.ts
+export type LabelProps = {
+  children: ReactNode;
+  /** 必須マーク（`*`）を付ける。 */
+  required?: boolean;
+  /** ラベルの右に添える補足。 */
+  helpText?: ReactNode;
+  className?: string;
+  /** 文字の部分の `id`。入力の `aria-labelledby` から指す（必須の `*` と補足は名前に含めない）。 */
+  id?: string;
+};
+/**
+ * `@lt-three/web` の base/label と同じ見た目のラベル。
+ * web の `htmlFor` に相当するものは RN に無いので、タップでの入力フォーカス連動は持たない。
+ */
+export declare function Label({ children, required, helpText, className, id }: LabelProps): import("react").JSX.Element;
+//#endregion