@lt-three/love3 0.0.0 → 0.1.1

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
+/**
+* A metric showing a large number on a raised surface (surface corner radius, 1px hairline border).
+* Mirrors the web analytics single-number. Increase/decrease uses the state colors (the surface does not invert, so the same theme values work).
+*/
+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;
+  /** Alternative text for the image. Empty by default (decorative; assumes a name is shown next to it). For a standalone face with no name, pass the person's name (same as the web) */
+  alt?: string;
+  /**
+   * What to show when there is no image or loading failed (initials, etc.). A string is wrapped in Text. **Omitted or empty shows a person icon**
+   * (the web shows nothing for an empty string). Numbers are not accepted (RN cannot render text directly under a View; pass a string).
+   */
+  fallback?: string | ReactElement;
+  /** Side length in px. Defaults to 24, the same as the web `size-6`. */
+  size?: number;
+  className?: string;
+};
+/**
+ * Same structure as the web atom/avatar (image + fallback).
+ * Drawn as a circle (`rounded-full`), like the web Avatar.
+ */
+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
+/**
+* Same structure as the web atom/avatar (image + fallback).
+* Drawn as a circle (`rounded-full`), like the web Avatar.
+*/
+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;
+  /**
+   * Makes the badge tappable (filter chips, etc.). A native-only addition not present in the web Badge;
+   * it keeps the look unchanged and secures a tap area equivalent to 44pt via `hitSlop`.
+   */
+  onPress?: () => void;
+  /**
+   * Name for screen readers and E2E. Always pass it when chips with the same text appear
+   * across different axes (to tell which axis a given "All" belongs to).
+   */
+  accessibilityLabel?: string;
+  /** Tells screen readers and E2E that this chip is selected. */
+  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
+/**
+ * A button with the same variants and look as the web base/button (indigo primary action, raised surface + faint border, control corner radius).
+ * Only the height differs: it is larger than the web's (default 36) because it is pressed with a finger.
+ *
+ * Where `base/button` (`@expo/ui`) renders an OS-native button (iOS 26 Liquid Glass, etc.),
+ * this one is an RN `Pressable`, so it can be painted with tokens. **Use this one wherever it should look the same as the web.**
+ *
+ * The web's `hover:` does not exist in RN, so it is mapped to `pressed` while pressed.
+ *
+ * The web Button is `inline-flex`, so it shrinks to its content. An RN `Pressable` stretches across
+ * the parent's cross axis, so `self-start` gives it the same behavior. For a full-width CTA,
+ * pass `className="self-stretch"` from the consumer.
+ */
+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;
+  /**
+   * Elements placed to the left and right of the label. The web takes a lucide component type, but native
+   * icon renderers vary (`@expo/vector-icons`, `expo-symbols`, etc.), so it takes already-rendered elements.
+   */
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  /**
+   * Name for screen readers and E2E. **Always pass it when buttons with the same text appear in a list
+   * (a per-row "Delete", etc.).** Without it VoiceOver cannot tell which row a button belongs to, and E2E cannot target them individually.
+   */
+  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
+/**
+* A button with the same variants and look as the web base/button (indigo primary action, raised surface + faint border, control corner radius).
+* Only the height differs: it is larger than the web's (default 36) because it is pressed with a finger.
+*
+* Where `base/button` (`@expo/ui`) renders an OS-native button (iOS 26 Liquid Glass, etc.),
+* this one is an RN `Pressable`, so it can be painted with tokens. **Use this one wherever it should look the same as the web.**
+*
+* The web's `hover:` does not exist in RN, so it is mapped to `pressed` while pressed.
+*
+* The web Button is `inline-flex`, so it shrinks to its content. An RN `Pressable` stretches across
+* the parent's cross axis, so `self-start` gives it the same behavior. For a full-width CTA,
+* pass `className="self-stretch"` from the consumer.
+*/
+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 shown to the right of the checkbox. It is part of the tap area. */
+  label?: ReactNode;
+  /** Name for screen readers. A string label is used as-is, so pass this when there is no label or it is not a string. */
+  accessibilityLabel?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  className?: string;
+  wrapperClassName?: string;
+};
+/**
+ * A 16px square with the control corner radius, identical to the web base/checkbox.
+ * Unchecked is a raised surface + a line-control border (3:1); checked is an indigo fill + a white check.
+ */
+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
+/**
+* A 16px square with the control corner radius, identical to the web base/checkbox.
+* Unchecked is a raised surface + a line-control border (3:1); checked is an indigo fill + a white check.
+*/
+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>;
+/**
+ * A number whose color changes with its sign. Same API as the web atom/colored-value (`shared/analytics.ts`).
+ * The default colors are the tokens `state-success` / `state-error` rather than Tailwind's fixed palette (green-500 / red-500),
+ * and they keep 4.5:1 contrast in dark mode too.
+ * Being a number, it is drawn monospaced (tabular).
+ */
+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
+/**
+* A number whose color changes with its sign. Same API as the web atom/colored-value (`shared/analytics.ts`).
+* The default colors are the tokens `state-success` / `state-error` rather than Tailwind's fixed palette (green-500 / red-500),
+* and they keep 4.5:1 contrast in dark mode too.
+* Being a number, it is drawn monospaced (tabular).
+*/
+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;
+  /** Description for screen readers. Corresponds to the web `alt`. */
+  alt: string;
+  /** Opens a full-screen view on tap (default true). */
+  expandable?: boolean;
+  /** Text shown when loading fails. This is a shared package, so consumers own the wording. */
+  errorText?: string;
+  /** Screen reader name of the expand button. */
+  expandLabel?: string;
+  /** Screen reader name of the button that closes the expanded view. */
+  closeLabel?: string;
+  className?: string;
+};
+/**
+ * An image that shows a skeleton while loading and a placeholder on failure.
+ * Mirrors the 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
+/**
+* An image that shows a skeleton while loading and a placeholder on failure.
+* Mirrors the 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;
+  /** Adds the required mark (`*`). */
+  required?: boolean;
+  /** Supplementary text placed to the right of the label. */
+  helpText?: ReactNode;
+  className?: string;
+  /** The `id` of the text part. Point to it from the input's `aria-labelledby` (the required `*` and the supplementary text are not part of the name). */
+  id?: string;
+};
+/**
+ * A label that looks the same as the web base/label.
+ * RN has no equivalent of the web's `htmlFor`, so tapping the label does not move focus to the input.
+ */
+export declare function Label({ children, required, helpText, className, id }: LabelProps): import("react").JSX.Element;
+//#endregion

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
+/**
+* A label that looks the same as the web base/label.
+* RN has no equivalent of the web's `htmlFor`, so tapping the label does not move focus to the input.
+*/
+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 };