@krizaka/ui 2.0.0-beta.3 → 2.0.0-beta.5

package/dist/native.js

@@ -1,7 +1,871 @@
+// src/countdown/core.ts
+import { useSyncExternalStore } from "react";
+var listeners = /* @__PURE__ */ new Set();
+var timer = null;
+function subscribe(listener) {
+  listeners.add(listener);
+  timer ??= setInterval(() => listeners.forEach((l) => l()), 1e3);
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  };
+}
+var nowSecond = () => Math.floor(Date.now() / 1e3) * 1e3;
+function useCountdown(target, skewMs = 0) {
+  const now = useSyncExternalStore(subscribe, nowSecond, nowSecond);
+  return Math.max(0, new Date(target).getTime() - (now + skewMs));
+}
+function splitDuration(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  return { d: Math.floor(total / 86400), h: Math.floor(total % 86400 / 3600), m: Math.floor(total % 3600 / 60), s: total % 60 };
+}
+function countdownParts(ms, units) {
+  const { d, h, m, s } = splitDuration(ms);
+  return d > 0 ? [[d, units.d], [h, units.h], [m, units.m]] : [[h, units.h], [m, units.m], [s, units.s]];
+}
+
+// src/native/avatar.tsx
+import * as React2 from "react";
+import { Image, StyleSheet, Text, View } from "react-native";
+
+// ../tokens/dist/native.js
+var themes = Object.freeze({ dark: Object.freeze({
+  "surface0": "#0c0c0e",
+  "surface1": "#161618",
+  "surface2": "#1f1f23",
+  "surface3": "#2a2a2d",
+  "media": "#1b1b1d",
+  "borderSubtle": "rgba(255,255,255,0.06)",
+  "borderDefault": "rgba(255,255,255,0.1)",
+  "borderStrong": "rgba(255,255,255,0.16)",
+  "textPrimary": "#f5f5f5",
+  "textSecondary": "#a0a0a7",
+  "textMuted": "#73737d",
+  "textOnMedia": "#ffffff",
+  "accent": "#196df5",
+  "accentHover": "#0e5bd8",
+  "accentSoft": "rgba(25,109,245,0.1)",
+  "accentText": "#629cf8",
+  "accent2": "#196df5",
+  "onAccent": "#ffffff",
+  "ring": "#196df5",
+  "brandGradientFrom": "#0e1525",
+  "brandGradientVia": "#0e0f16",
+  "brandGradientTo": "#0c0c0e",
+  "success": "#10b77f",
+  "warning": "#f59f0a",
+  "danger": "#ef4343",
+  "info": "#196df5",
+  "scrim": "rgba(0,0,0,0.6)",
+  "scrimStrong": "rgba(0,0,0,0.8)",
+  "overlay": "rgba(0,0,0,0.7)"
+}), light: Object.freeze({
+  "surface0": "#fafafa",
+  "surface1": "#ffffff",
+  "surface2": "#f1f1f3",
+  "surface3": "#e4e4e7",
+  "media": "#e9e9ec",
+  "borderSubtle": "rgba(0,0,0,0.06)",
+  "borderDefault": "rgba(0,0,0,0.1)",
+  "borderStrong": "rgba(0,0,0,0.16)",
+  "textPrimary": "#18181b",
+  "textSecondary": "#64646d",
+  "textMuted": "#808089",
+  "textOnMedia": "#ffffff",
+  "accent": "#0a64f5",
+  "accentHover": "#0d55c9",
+  "accentSoft": "rgba(10,100,245,0.08)",
+  "accentText": "#0954ce",
+  "accent2": "#0a64f5",
+  "onAccent": "#ffffff",
+  "ring": "#0a64f5",
+  "brandGradientFrom": "#dcebfe",
+  "brandGradientVia": "#f3f6fc",
+  "brandGradientTo": "#fafafa",
+  "success": "#10b77f",
+  "warning": "#f59f0a",
+  "danger": "#ef4343",
+  "info": "#0a64f5",
+  "scrim": "rgba(0,0,0,0.6)",
+  "scrimStrong": "rgba(0,0,0,0.8)",
+  "overlay": "rgba(0,0,0,0.7)"
+}) });
+var radius = Object.freeze({
+  "sm": 8,
+  "md": 12,
+  "lg": 16,
+  "xl": 20,
+  "full": 9999
+});
+var typography = Object.freeze({
+  "sans": "Inter",
+  "display": "Inter",
+  "mono": "JetBrains Mono"
+});
+var motion = Object.freeze({ ease: Object.freeze([0.16, 1, 0.3, 1]) });
+var brands = Object.freeze({
+  "krizaka": {
+    "dark": {
+      "accent": "#196df5",
+      "accentHover": "#0e5bd8",
+      "accentSoft": "rgba(25,109,245,0.1)",
+      "accentText": "#629cf8",
+      "accent2": "#196df5",
+      "onAccent": "#ffffff",
+      "ring": "#196df5",
+      "info": "#196df5",
+      "brandGradientFrom": "#0e1525",
+      "brandGradientVia": "#0e0f16",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#0a64f5",
+      "accentHover": "#0d55c9",
+      "accentSoft": "rgba(10,100,245,0.08)",
+      "accentText": "#0954ce",
+      "accent2": "#0a64f5",
+      "onAccent": "#ffffff",
+      "ring": "#0a64f5",
+      "info": "#0a64f5",
+      "brandGradientFrom": "#dcebfe",
+      "brandGradientVia": "#f3f6fc",
+      "brandGradientTo": "#fafafa"
+    }
+  },
+  "orazaka": {
+    "dark": {
+      "accent": "#f67e23",
+      "accentHover": "#f79245",
+      "accentSoft": "rgba(246,126,35,0.12)",
+      "accentText": "#f78c3b",
+      "accent2": "#f59e0b",
+      "onAccent": "#0c0c0e",
+      "ring": "#f67e23",
+      "info": "#3b83f7",
+      "brandGradientFrom": "#28170b",
+      "brandGradientVia": "#17130c",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#b45309",
+      "accentHover": "#964608",
+      "accentSoft": "rgba(180,83,9,0.08)",
+      "accentText": "#9b4808",
+      "accent2": "#a45904",
+      "onAccent": "#ffffff",
+      "ring": "#b45309",
+      "info": "#0a64f5",
+      "brandGradientFrom": "#ffebd6",
+      "brandGradientVia": "#fdf7ed",
+      "brandGradientTo": "#fafafa"
+    }
+  },
+  "orochia": {
+    "dark": {
+      "accent": "#7c3aed",
+      "accentHover": "#6d28d9",
+      "accentSoft": "rgba(139,92,246,0.12)",
+      "accentText": "#a78bfa",
+      "accent2": "#db2777",
+      "onAccent": "#ffffff",
+      "ring": "#a78bfa",
+      "info": "#7c3aed",
+      "brandGradientFrom": "#1a0e2a",
+      "brandGradientVia": "#1c0d17",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#7c3aed",
+      "accentHover": "#6d28d9",
+      "accentSoft": "rgba(124,58,237,0.08)",
+      "accentText": "#6d28d9",
+      "accent2": "#db2777",
+      "onAccent": "#ffffff",
+      "ring": "#7c3aed",
+      "info": "#7c3aed",
+      "brandGradientFrom": "#efe7fe",
+      "brandGradientVia": "#fdedf5",
+      "brandGradientTo": "#fafafa"
+    }
+  }
+});
+
+// src/native/theme.tsx
+import * as React from "react";
+import { AccessibilityInfo, useColorScheme } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var themes2 = themes;
+var radius2 = radius;
+var motion2 = motion;
+var ThemeContext = React.createContext(null);
+function resolve(mode, system) {
+  if (mode === "system") return system === "light" ? "light" : "dark";
+  return mode;
+}
+function ThemeProvider({ children, mode: controlled, defaultMode = "system", onModeChange, overrides, fonts }) {
+  const system = useColorScheme();
+  const [own, setOwn] = React.useState(defaultMode);
+  const mode = controlled ?? own;
+  const setMode = React.useCallback(
+    (next) => {
+      if (controlled === void 0) setOwn(next);
+      onModeChange?.(next);
+    },
+    [controlled, onModeChange]
+  );
+  const scheme = resolve(mode, system);
+  const override = overrides?.[scheme];
+  const theme = React.useMemo(() => override ? { ...themes2[scheme], ...override } : themes2[scheme], [scheme, override]);
+  const value = React.useMemo(
+    () => ({ mode, setMode, scheme, theme, radius: radius2, motion: motion2, fonts: fonts ?? {} }),
+    [mode, setMode, scheme, theme, fonts]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+var noop = () => void 0;
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  const system = useColorScheme();
+  if (context) return context;
+  const scheme = resolve("system", system);
+  return { mode: "system", setMode: noop, scheme, theme: themes2[scheme], radius: radius2, motion: motion2, fonts: {} };
+}
+function useReducedMotion() {
+  const [reduce, setReduce] = React.useState(false);
+  React.useEffect(() => {
+    let alive = true;
+    void AccessibilityInfo.isReduceMotionEnabled().then((value) => {
+      if (alive) setReduce(value);
+    });
+    const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setReduce);
+    return () => {
+      alive = false;
+      subscription.remove();
+    };
+  }, []);
+  return reduce;
+}
+function alpha(color, opacity) {
+  const hex = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color);
+  if (!hex) return color;
+  const [r, g, b] = hex.slice(1).map((part) => parseInt(part, 16));
+  return `rgba(${r},${g},${b},${opacity})`;
+}
+function useSvgId(prefix) {
+  return `${prefix}${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+}
+
+// src/native/avatar.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SIDE = { xs: 20, sm: 32, md: 40, lg: 56, xl: 80 };
+function AvatarRoot({ src, alt = "", fallback, size = "md", style, ...props }) {
+  const { theme } = useTheme();
+  const [failedSrc, setFailedSrc] = React2.useState(null);
+  const failed = Boolean(src) && failedSrc === src;
+  const side = typeof size === "number" ? size : SIDE[size];
+  const initial = alt.trim().charAt(0).toUpperCase();
+  const content = fallback ?? initial;
+  return /* @__PURE__ */ jsx2(
+    View,
+    {
+      accessible: Boolean(alt),
+      role: alt ? "img" : void 0,
+      "aria-label": alt || void 0,
+      ...props,
+      style: [styles.root, { width: side, height: side, borderRadius: side / 2, backgroundColor: theme.surface3 }, style],
+      children: src && !failed ? /* @__PURE__ */ jsx2(Image, { testID: props.testID ? `${props.testID}.image` : void 0, source: { uri: src }, onError: () => setFailedSrc(src), resizeMode: "cover", style: StyleSheet.absoluteFill }) : typeof content === "string" ? /* @__PURE__ */ jsx2(Text, { style: [styles.initial, { color: theme.textSecondary, fontSize: Math.max(9, Math.round(side * 0.4)) }], children: content }) : content
+    }
+  );
+}
+function AvatarGroup({ max, size = "md", style, children, ...props }) {
+  const { theme } = useTheme();
+  const items2 = React2.Children.toArray(children);
+  const shown = max === void 0 ? items2 : items2.slice(0, max);
+  const rest = items2.length - shown.length;
+  const side = typeof size === "number" ? size : SIDE[size];
+  const ring = { borderWidth: 2, borderColor: theme.surface0, marginLeft: -side / 5 };
+  return /* @__PURE__ */ jsxs(View, { ...props, style: [styles.group, { paddingLeft: side / 5 }, style], children: [
+    shown.map((child, i) => /* @__PURE__ */ jsx2(View, { style: [ring, { borderRadius: side }], children: React2.isValidElement(child) ? React2.cloneElement(child, { size }) : child }, i)),
+    rest > 0 ? /* @__PURE__ */ jsx2(View, { style: [ring, { borderRadius: side }], children: /* @__PURE__ */ jsx2(AvatarRoot, { size, fallback: `+${rest}` }) }) : null
+  ] });
+}
+var Avatar = Object.assign(AvatarRoot, { Group: AvatarGroup });
+var styles = StyleSheet.create({
+  root: { overflow: "hidden", alignItems: "center", justifyContent: "center" },
+  initial: { fontWeight: "700" },
+  group: { flexDirection: "row", alignItems: "center" }
+});
+
+// src/native/badge.tsx
+import * as React3 from "react";
+import { Animated, StyleSheet as StyleSheet2, Text as Text2 } from "react-native";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function look(tone2, t) {
+  switch (tone2) {
+    case "accent":
+      return { bg: t.accentSoft, fg: t.textPrimary, border: alpha(t.accent, 0.4), dot: t.accent };
+    case "success":
+    case "warning":
+    case "danger":
+      return { bg: alpha(t[tone2], 0.15), fg: t.textPrimary, border: alpha(t[tone2], 0.4), dot: t[tone2] };
+    case "scrim":
+      return { bg: t.scrim, fg: t.textOnMedia, border: "transparent", dot: t.textOnMedia };
+    default:
+      return { bg: t.surface3, fg: t.textSecondary, border: "transparent", dot: t.textSecondary };
+  }
+}
+function Badge({ tone: tone2 = "neutral", size = "sm", dot, pulse, style, children, ...props }) {
+  const { theme } = useTheme();
+  const colors = look(tone2, theme);
+  const reduce = useReducedMotion();
+  const [opacity] = React3.useState(() => new Animated.Value(1));
+  React3.useEffect(() => {
+    if (!dot || !pulse || reduce) return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 0.35, duration: 800, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 1, duration: 800, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => {
+      loop.stop();
+      opacity.setValue(1);
+    };
+  }, [dot, pulse, reduce, opacity]);
+  return /* @__PURE__ */ jsxs2(
+    Animated.View,
+    {
+      ...props,
+      style: [styles2.root, size === "md" ? styles2.md : styles2.sm, { backgroundColor: colors.bg, borderColor: colors.border }, style],
+      children: [
+        dot ? /* @__PURE__ */ jsx3(Animated.View, { "aria-hidden": true, style: [styles2.dot, { backgroundColor: colors.dot, opacity }] }) : null,
+        typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx3(Text2, { style: [styles2.text, { color: colors.fg, fontSize: size === "md" ? 11 : 10 }], children }) : children
+      ]
+    }
+  );
+}
+var styles2 = StyleSheet2.create({
+  root: { flexDirection: "row", alignItems: "center", alignSelf: "flex-start", gap: 4, borderRadius: 9999, borderWidth: 1 },
+  sm: { paddingHorizontal: 8, paddingVertical: 2 },
+  md: { paddingHorizontal: 10, paddingVertical: 4 },
+  dot: { width: 6, height: 6, borderRadius: 3 },
+  text: { fontWeight: "700", textTransform: "uppercase", letterSpacing: 0.8 }
+});
+
+// src/native/button.tsx
+import { ActivityIndicator, Pressable, StyleSheet as StyleSheet4, View as View2 } from "react-native";
+
+// src/native/txt.tsx
+import { StyleSheet as StyleSheet3, Text as Text3 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TONE = {
+  text: "textPrimary",
+  secondary: "textSecondary",
+  muted: "textMuted",
+  accent: "accentText",
+  success: "success",
+  warning: "warning",
+  danger: "danger",
+  onAccent: "onAccent",
+  onMedia: "textOnMedia"
+};
+function Txt({ variant = "body", tone: tone2 = "text", style, ...props }) {
+  const { theme, fonts } = useTheme();
+  const family = variant === "display" || variant === "title" ? fonts.display : variant === "mono" ? fonts.mono : fonts.sans;
+  return /* @__PURE__ */ jsx4(
+    Text3,
+    {
+      role: variant === "display" || variant === "title" ? "heading" : void 0,
+      ...props,
+      style: [styles3[variant], { color: theme[TONE[tone2]] }, family ? { fontFamily: family } : null, style]
+    }
+  );
+}
+var textStyles = StyleSheet3.create({
+  display: { fontSize: 30, lineHeight: 36, fontWeight: "900", letterSpacing: -0.5 },
+  title: { fontSize: 18, lineHeight: 24, fontWeight: "800" },
+  body: { fontSize: 15, lineHeight: 21 },
+  caption: { fontSize: 12, lineHeight: 16 },
+  label: { fontSize: 14, lineHeight: 18, fontWeight: "700" },
+  mono: { fontSize: 14, lineHeight: 18, fontWeight: "700", fontVariant: ["tabular-nums"] }
+});
+var styles3 = textStyles;
+
+// src/native/button.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function look2(variant, t) {
+  switch (variant) {
+    case "primary":
+      return { bg: t.accent, fg: t.onAccent, border: t.accent };
+    case "outline":
+      return { bg: "transparent", fg: t.textPrimary, border: t.borderDefault };
+    case "ghost":
+      return { bg: "transparent", fg: t.textSecondary, border: "transparent" };
+    case "danger":
+      return { bg: alpha(t.danger, 0.1), fg: t.textPrimary, border: alpha(t.danger, 0.5) };
+    default:
+      return { bg: t.surface2, fg: t.textPrimary, border: t.borderDefault };
+  }
+}
+var HEIGHT = { sm: 32, md: 40, lg: 48 };
+var PADDING = { sm: 12, md: 16, lg: 24 };
+function useButton({ variant = "secondary", size = "md", shape = "rounded", loading, disabled }) {
+  const { theme, radius: radius3 } = useTheme();
+  const colors = look2(variant, theme);
+  const inactive = Boolean(disabled || loading);
+  const frame = (pressed) => ({
+    height: HEIGHT[size],
+    borderRadius: shape === "pill" ? radius3.full : radius3.sm,
+    backgroundColor: colors.bg,
+    borderColor: colors.border,
+    opacity: inactive ? 0.4 : pressed ? 0.85 : 1,
+    transform: [{ scale: pressed ? 0.98 : 1 }]
+  });
+  return { colors, inactive, frame };
+}
+function Button({ label, icon, variant, size = "md", shape, loading = false, disabled, style, ...props }) {
+  const { colors, inactive, frame } = useButton({ variant, size, shape, loading, disabled });
+  return /* @__PURE__ */ jsx5(
+    Pressable,
+    {
+      role: "button",
+      "aria-label": label,
+      "aria-disabled": inactive,
+      "aria-busy": loading,
+      ...props,
+      disabled: inactive,
+      style: ({ pressed }) => [styles4.base, { paddingHorizontal: PADDING[size] }, frame(pressed), style],
+      children: /* @__PURE__ */ jsxs3(View2, { style: styles4.row, children: [
+        loading ? /* @__PURE__ */ jsx5(ActivityIndicator, { "aria-hidden": true, size: "small", color: colors.fg }) : icon,
+        /* @__PURE__ */ jsx5(Txt, { variant: "label", numberOfLines: 1, style: { color: colors.fg, fontSize: size === "sm" ? 12 : 14 }, children: label })
+      ] })
+    }
+  );
+}
+function IconButton({ label, icon, variant, size = "md", shape, loading = false, disabled, style, ...props }) {
+  const { colors, inactive, frame } = useButton({ variant, size, shape, loading, disabled });
+  const side = HEIGHT[size];
+  return /* @__PURE__ */ jsx5(
+    Pressable,
+    {
+      role: "button",
+      "aria-label": label,
+      "aria-disabled": inactive,
+      "aria-busy": loading,
+      hitSlop: side < 44 ? (44 - side) / 2 : void 0,
+      ...props,
+      disabled: inactive,
+      style: ({ pressed }) => [styles4.base, frame(pressed), { width: side }, style],
+      children: loading ? /* @__PURE__ */ jsx5(ActivityIndicator, { "aria-hidden": true, size: "small", color: colors.fg }) : icon
+    }
+  );
+}
+var styles4 = StyleSheet4.create({
+  base: { alignItems: "center", justifyContent: "center", borderWidth: 1 },
+  row: { flexDirection: "row", alignItems: "center", gap: 8 }
+});
+
+// src/native/card.tsx
+import { Image as Image2, Pressable as Pressable2, StyleSheet as StyleSheet5, View as View3 } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function CardRoot({ tone: tone2 = "default", radius: radius3 = "xl", onPress, style, ...props }) {
+  const { theme, radius: r } = useTheme();
+  const frame = [
+    styles5.root,
+    {
+      backgroundColor: tone2 === "elevated" ? theme.surface2 : theme.surface1,
+      borderColor: theme.borderDefault,
+      borderRadius: r[radius3]
+    },
+    tone2 === "elevated" ? [styles5.shadow, { shadowColor: theme.scrimStrong }] : null
+  ];
+  if (!onPress) return /* @__PURE__ */ jsx6(View3, { ...props, style: [frame, style] });
+  return /* @__PURE__ */ jsx6(
+    Pressable2,
+    {
+      role: "button",
+      onPress,
+      ...props,
+      style: ({ pressed }) => [frame, { opacity: pressed ? 0.92 : 1, transform: [{ scale: pressed ? 0.99 : 1 }] }, style]
+    }
+  );
+}
+var ASPECT = { video: 16 / 9, square: 1, portrait: 3 / 4 };
+function CardMedia({ aspect = "video", style, ...props }) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx6(View3, { ...props, style: [styles5.media, { backgroundColor: theme.media }, aspect === "auto" ? null : { aspectRatio: ASPECT[aspect] }, style] });
+}
+function CardImage({ src, fallback, alt, style, ...props }) {
+  const { theme } = useTheme();
+  if (!src) {
+    return /* @__PURE__ */ jsx6(View3, { "aria-hidden": true, style: [StyleSheet5.absoluteFill, styles5.center, { backgroundColor: theme.accentSoft }], children: fallback });
+  }
+  return /* @__PURE__ */ jsx6(Image2, { accessible: Boolean(alt), alt, "aria-label": alt, resizeMode: "cover", ...props, source: { uri: src }, style: [StyleSheet5.absoluteFill, style] });
+}
+var CORNER = {
+  "top-left": { top: 10, left: 10 },
+  "top-right": { top: 10, right: 10 },
+  "bottom-left": { bottom: 10, left: 10 },
+  "bottom-right": { bottom: 10, right: 10 }
+};
+function CardOverlay({ corner = "top-left", style, ...props }) {
+  return /* @__PURE__ */ jsx6(View3, { ...props, style: [styles5.overlay, CORNER[corner], style] });
+}
+var PADDING2 = { none: 0, sm: 12, md: 16, lg: 24 };
+function CardBody({ padding = "md", style, ...props }) {
+  return /* @__PURE__ */ jsx6(View3, { ...props, style: [styles5.body, { padding: PADDING2[padding] }, style] });
+}
+function CardTitle({ numberOfLines = 1, ...props }) {
+  return /* @__PURE__ */ jsx6(Txt, { variant: "label", role: "heading", numberOfLines, ...props });
+}
+function CardDescription({ numberOfLines = 2, ...props }) {
+  return /* @__PURE__ */ jsx6(Txt, { variant: "caption", tone: "secondary", numberOfLines, ...props });
+}
+function CardFooter({ style, ...props }) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx6(View3, { ...props, style: [styles5.footer, { borderTopColor: theme.borderSubtle }, style] });
+}
+var Card = {
+  Root: CardRoot,
+  Media: CardMedia,
+  Image: CardImage,
+  Overlay: CardOverlay,
+  Body: CardBody,
+  Title: CardTitle,
+  Description: CardDescription,
+  Footer: CardFooter
+};
+var styles5 = StyleSheet5.create({
+  root: { overflow: "hidden", borderWidth: StyleSheet5.hairlineWidth },
+  shadow: { shadowOpacity: 0.25, shadowRadius: 12, shadowOffset: { width: 0, height: 6 }, elevation: 4 },
+  media: { position: "relative", overflow: "hidden", width: "100%" },
+  center: { alignItems: "center", justifyContent: "center" },
+  overlay: { position: "absolute", zIndex: 1, flexDirection: "row", alignItems: "center", gap: 6 },
+  body: { gap: 12 },
+  footer: { flexDirection: "row", alignItems: "center", gap: 8, borderTopWidth: StyleSheet5.hairlineWidth, paddingTop: 12, marginTop: "auto" }
+});
+
+// src/native/chip.tsx
+import * as React4 from "react";
+import { Pressable as Pressable3, ScrollView, StyleSheet as StyleSheet6, Text as Text4, View as View4 } from "react-native";
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChipGroupContext = React4.createContext(null);
+function Label({ children, color, size }) {
+  if (typeof children !== "string" && typeof children !== "number") return /* @__PURE__ */ jsx7(Fragment, { children });
+  return /* @__PURE__ */ jsx7(Text4, { style: [styles6.label, { color, fontSize: size === "sm" ? 12 : 13 }], children });
+}
+function ChipBase(props) {
+  const group = React4.useContext(ChipGroupContext);
+  const { theme, radius: radius3 } = useTheme();
+  const [own, setOwn] = React4.useState(props.removable ? false : props.defaultSelected ?? false);
+  const size = props.size ?? group?.size ?? "md";
+  const frame = (on2, pressed) => ({
+    height: size === "sm" ? 28 : 36,
+    borderRadius: radius3.full,
+    borderColor: on2 ? theme.accent : theme.borderDefault,
+    backgroundColor: on2 ? theme.accentSoft : theme.surface1,
+    opacity: pressed ? 0.85 : 1
+  });
+  if (props.removable) {
+    const { removable: _r2, removeLabel, onRemove, disabled: disabled2, size: _s2, style: style2, children: children2, ...rest2 } = props;
+    return /* @__PURE__ */ jsxs4(View4, { ...rest2, style: [styles6.base, frame(false, false), disabled2 ? styles6.disabled : null, style2], children: [
+      /* @__PURE__ */ jsx7(Label, { color: theme.textSecondary, size, children: children2 }),
+      /* @__PURE__ */ jsx7(Pressable3, { role: "button", "aria-label": removeLabel, disabled: disabled2 ?? void 0, hitSlop: 10, onPress: onRemove, style: styles6.remove, children: /* @__PURE__ */ jsx7(Text4, { style: [styles6.cross, { color: theme.textSecondary }], children: "\xD7" }) })
+    ] });
+  }
+  const { removable: _r, value, selected, defaultSelected: _d, onSelectedChange, disabled: ownDisabled, size: _s, style, children, ...rest } = props;
+  if (group && value === void 0) throw new Error("Chip: a chip inside Chip.Group needs a `value`.");
+  const on = group ? group.isSelected(value) : selected ?? own;
+  const disabled = Boolean(ownDisabled || group?.disabled);
+  const press = () => {
+    if (group) return group.toggle(value);
+    if (selected === void 0) setOwn(!on);
+    onSelectedChange?.(!on);
+  };
+  const single = group?.type === "single";
+  return /* @__PURE__ */ jsx7(
+    Pressable3,
+    {
+      role: single ? "radio" : "checkbox",
+      "aria-checked": on,
+      "aria-disabled": disabled,
+      ...rest,
+      disabled,
+      onPress: press,
+      style: ({ pressed }) => [styles6.base, frame(on, pressed), disabled ? styles6.disabled : null, style],
+      children: /* @__PURE__ */ jsx7(Label, { color: on ? theme.textPrimary : theme.textSecondary, size, children })
+    }
+  );
+}
+function ChipGroup(props) {
+  const { size, disabled, scrollable, "aria-label": label, style, children } = props;
+  const initial = props.type === "single" ? props.defaultValue ?? "" : props.defaultValue ?? [];
+  const [own, setOwn] = React4.useState(initial);
+  const current = props.value ?? own;
+  const context = React4.useMemo(() => {
+    const list = Array.isArray(current) ? current : [current];
+    return {
+      type: props.type,
+      size,
+      disabled,
+      isSelected: (v) => list.includes(v),
+      toggle: (v) => {
+        const next = props.type === "single" ? v : list.includes(v) ? list.filter((x) => x !== v) : [...list, v];
+        if (props.value === void 0) setOwn(next);
+        props.onValueChange?.(next);
+      }
+    };
+  }, [current, props.type, props.value, props.onValueChange, size, disabled]);
+  const a11y = { role: props.type === "single" ? "radiogroup" : "group", "aria-label": label };
+  return /* @__PURE__ */ jsx7(ChipGroupContext.Provider, { value: context, children: scrollable ? /* @__PURE__ */ jsx7(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, ...a11y, style, contentContainerStyle: styles6.row, children }) : /* @__PURE__ */ jsx7(View4, { ...a11y, style: [styles6.row, styles6.wrap, style], children }) });
+}
+var Chip = Object.assign(ChipBase, { Group: ChipGroup });
+var styles6 = StyleSheet6.create({
+  base: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6, paddingHorizontal: 14, borderWidth: 1, alignSelf: "flex-start" },
+  label: { fontWeight: "600" },
+  remove: { marginRight: -6, width: 24, height: 24, alignItems: "center", justifyContent: "center" },
+  cross: { fontSize: 16, lineHeight: 18, fontWeight: "700" },
+  disabled: { opacity: 0.4 },
+  row: { flexDirection: "row", alignItems: "center", gap: 8 },
+  wrap: { flexWrap: "wrap" }
+});
+
+// src/native/countdown.tsx
+import * as React5 from "react";
+import { Animated as Animated2, StyleSheet as StyleSheet7, Text as Text5 } from "react-native";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var FONT = { sm: 14, md: 20, lg: 32 };
+function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md", label, style }) {
+  const { theme, fonts } = useTheme();
+  const reduce = useReducedMotion();
+  const ms = useCountdown(target, skewMs);
+  const urgent = ms > 0 && ms < urgentBelowMs;
+  const parts = countdownParts(ms, units);
+  const [opacity] = React5.useState(() => new Animated2.Value(1));
+  React5.useEffect(() => {
+    if (!urgent || reduce) return;
+    const loop = Animated2.loop(
+      Animated2.sequence([
+        Animated2.timing(opacity, { toValue: 0.4, duration: 500, useNativeDriver: true }),
+        Animated2.timing(opacity, { toValue: 1, duration: 500, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => {
+      loop.stop();
+      opacity.setValue(1);
+    };
+  }, [urgent, reduce, opacity]);
+  const color = urgent ? theme.danger : theme.textPrimary;
+  const text = parts.map(([value, unit]) => `${String(value).padStart(2, "0")}${unit}`).join(" ");
+  return /* @__PURE__ */ jsx8(
+    Animated2.View,
+    {
+      accessible: true,
+      role: "timer",
+      "aria-label": `${label} ${text}`,
+      style: [styles7.root, style],
+      children: parts.map(([value, unit], i) => /* @__PURE__ */ jsxs5(Animated2.View, { style: [styles7.segment, urgent && i === parts.length - 1 ? { opacity } : null], children: [
+        /* @__PURE__ */ jsx8(Text5, { style: [styles7.value, { color, fontSize: FONT[size] }, fonts.display ? { fontFamily: fonts.display } : null], children: String(value).padStart(2, "0") }),
+        /* @__PURE__ */ jsx8(Text5, { style: [styles7.unit, { color: theme.textSecondary, fontSize: Math.round(FONT[size] / 2) }], children: unit })
+      ] }, unit))
+    }
+  );
+}
+var styles7 = StyleSheet7.create({
+  root: { flexDirection: "row", alignItems: "baseline", gap: 6 },
+  segment: { flexDirection: "row", alignItems: "baseline" },
+  value: { fontWeight: "900", fontVariant: ["tabular-nums"], letterSpacing: -0.3 },
+  unit: { marginLeft: 2, fontWeight: "700", textTransform: "uppercase" }
+});
+
+// src/native/empty-state.tsx
+import { StyleSheet as StyleSheet8, View as View5 } from "react-native";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action, style, ...props }) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsxs6(View5, { ...props, style: [styles8.root, style], children: [
+    icon ? /* @__PURE__ */ jsx9(View5, { "aria-hidden": true, style: [styles8.icon, { backgroundColor: theme.surface2 }], children: icon }) : null,
+    /* @__PURE__ */ jsx9(Txt, { variant: "label", role: "heading", style: styles8.center, children: title }),
+    description ? /* @__PURE__ */ jsx9(Txt, { tone: "secondary", style: styles8.center, children: description }) : null,
+    action ? /* @__PURE__ */ jsx9(View5, { style: styles8.action, children: action }) : null
+  ] });
+}
+var styles8 = StyleSheet8.create({
+  root: { alignItems: "center", justifyContent: "center", gap: 8, paddingVertical: 40, paddingHorizontal: 24 },
+  icon: { width: 48, height: 48, borderRadius: 24, alignItems: "center", justifyContent: "center", marginBottom: 4 },
+  center: { textAlign: "center", maxWidth: 360 },
+  action: { marginTop: 8, flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: 8 }
+});
+
+// src/native/KrizakaMark.tsx
+import { View as View6 } from "react-native";
+import Svg, { Circle, Defs, G as Group, LinearGradient, Path, RadialGradient, Stop } from "react-native-svg";
+
+// src/marks/krizaka-geometry.ts
+var KRIZAKA = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "86 82 228 228",
+  offset: 20,
+  /** The shield: a pointy-top hexagon (r 92 around 180,180), open at its upper-right edge. */
+  shield: "M259.7,134 L259.7,226 L180,272 L100.3,226 L100.3,134 L180,88 L212,106.5",
+  stroke: 22,
+  ink: { x1: 70, y1: 290, x2: 290, y2: 70 },
+  blue: { x1: 180, y1: 180, x2: 300, y2: 60, stops: [["0%", "#196df5"], ["100%", "#629cf8"]] },
+  /** The vertex where the shield opens: a node (the serpent's head in Orochia's grammar). */
+  node: { cx: 259.7, cy: 134, r: 19, inner: 6 },
+  core: { cx: 180, cy: 180, r: 24, inner: 8 },
+  highlight: "#dbeafe",
+  glow: { color: "#196df5", opacity: 0.16 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 }
+};
+
+// src/native/mark-motion.ts
+import { useEffect as useEffect4, useState as useState6 } from "react";
+import { AccessibilityInfo as AccessibilityInfo2, Animated as Animated3, Easing } from "react-native";
+var markA11y = (title) => title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
+function useMarkMotion(size, animated, spinMs = 3e4) {
+  const [spin] = useState6(() => new Animated3.Value(0));
+  const [pulse] = useState6(() => new Animated3.Value(0));
+  useEffect4(() => {
+    if (!animated) return;
+    let loops = [];
+    let cancelled = false;
+    void AccessibilityInfo2.isReduceMotionEnabled().then((reduce) => {
+      if (reduce || cancelled) return;
+      loops = [
+        Animated3.loop(Animated3.timing(spin, { toValue: 1, duration: spinMs, easing: Easing.linear, useNativeDriver: true })),
+        Animated3.loop(
+          Animated3.sequence([
+            Animated3.timing(pulse, { toValue: 1, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
+            Animated3.timing(pulse, { toValue: 0, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true })
+          ])
+        )
+      ];
+      loops.forEach((l) => l.start());
+    });
+    return () => {
+      cancelled = true;
+      loops.forEach((l) => l.stop());
+    };
+  }, [animated, spin, pulse, spinMs]);
+  return {
+    Animated: Animated3,
+    layer: { position: "absolute", width: size, height: size },
+    spinStyle: { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] },
+    pulseStyle: { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }
+  };
+}
+
+// src/native/KrizakaMark.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function KrizakaMark({ size = 48, animated = true, title, neutral }) {
+  const { theme } = useTheme();
+  const { Animated: Animated8, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const id = useSvgId("kzm");
+  const viewBox = size < 48 ? KRIZAKA.croppedViewBox : KRIZAKA.viewBox;
+  const stroke = neutral ?? theme.textMuted;
+  const blue = /* @__PURE__ */ jsx10(LinearGradient, { id: `${id}b`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.blue.x1 + KRIZAKA.offset, y1: KRIZAKA.blue.y1 + KRIZAKA.offset, x2: KRIZAKA.blue.x2 + KRIZAKA.offset, y2: KRIZAKA.blue.y2 + KRIZAKA.offset, children: KRIZAKA.blue.stops.map(([offset, color]) => /* @__PURE__ */ jsx10(Stop, { offset, stopColor: color }, offset)) });
+  const dot = (c) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx10(Circle, { cx: c.cx, cy: c.cy, r: c.r, fill: `url(#${id}b)` }),
+    /* @__PURE__ */ jsx10(Circle, { cx: c.cx, cy: c.cy, r: c.inner, fill: KRIZAKA.highlight })
+  ] });
+  return /* @__PURE__ */ jsxs7(View6, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs7(Svg, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsxs7(Defs, { children: [
+        /* @__PURE__ */ jsxs7(RadialGradient, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx10(Stop, { offset: "0%", stopColor: KRIZAKA.glow.color, stopOpacity: KRIZAKA.glow.opacity }),
+          /* @__PURE__ */ jsx10(Stop, { offset: "100%", stopColor: KRIZAKA.glow.color, stopOpacity: 0 })
+        ] }),
+        /* @__PURE__ */ jsxs7(LinearGradient, { id: `${id}i`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.ink.x1 + KRIZAKA.offset, y1: KRIZAKA.ink.y1 + KRIZAKA.offset, x2: KRIZAKA.ink.x2 + KRIZAKA.offset, y2: KRIZAKA.ink.y2 + KRIZAKA.offset, children: [
+          /* @__PURE__ */ jsx10(Stop, { offset: "0%", stopColor: theme.textSecondary }),
+          /* @__PURE__ */ jsx10(Stop, { offset: "100%", stopColor: theme.textPrimary })
+        ] }),
+        blue
+      ] }),
+      size >= 48 ? /* @__PURE__ */ jsx10(Circle, { cx: 200, cy: 200, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx10(Circle, { cx: 200, cy: 200, r: KRIZAKA.ring.r, stroke, strokeWidth: KRIZAKA.ring.width, opacity: 0.35, fill: "none" }),
+      /* @__PURE__ */ jsx10(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: /* @__PURE__ */ jsx10(Path, { d: KRIZAKA.shield, stroke: `url(#${id}i)`, strokeWidth: KRIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })
+    ] }),
+    /* @__PURE__ */ jsx10(Animated8.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx10(Svg, { viewBox, style: layer, children: /* @__PURE__ */ jsx10(Circle, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
+    /* @__PURE__ */ jsx10(Animated8.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs7(Svg, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx10(Defs, { children: blue }),
+      /* @__PURE__ */ jsxs7(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
+        dot(KRIZAKA.node),
+        dot(KRIZAKA.core)
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/native/OrazakaMark.tsx
+import { View as View7 } from "react-native";
+import Svg2, { Circle as Circle2, Defs as Defs2, LinearGradient as LinearGradient2, Path as Path2, RadialGradient as RadialGradient2, Stop as Stop2 } from "react-native-svg";
+
+// src/marks/orazaka-geometry.ts
+var ORAZAKA = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "76 76 248 248",
+  center: 200,
+  /**
+   * The three shards — a hexagon's cap (from the original 132-unit drawing), scaled ×1.9 around the centre and turned
+   * 0°, 120°, 240° — in view-box coordinates, so that one gradient runs across all three.
+   */
+  shards: [
+    "M154.4,121.2 L200,94.7 L245.6,121.2 L245.6,154.4 L226.6,165.4 L226.6,132.2 L200,116.8 L173.4,132.2 L173.4,165.4 L154.4,154.4 Z",
+    "M291.1,199.9 L291.2,252.6 L245.5,278.9 L216.7,262.3 L216.6,240.3 L245.4,257 L272.1,241.6 L272,210.9 L243.2,194.3 L262.3,183.3 Z",
+    "M154.5,278.9 L108.8,252.6 L108.9,199.9 L137.7,183.3 L156.8,194.3 L128,210.9 L127.9,241.6 L154.6,257 L183.4,240.3 L183.3,262.3 Z"
+  ],
+  shardStroke: 5.7,
+  amber: { x1: 90, y1: 310, x2: 310, y2: 90, stops: [["0%", "#b45309"], ["100%", "#f59e0b"]] },
+  core: { r: 21, inner: 7.6 },
+  highlight: "#fffbeb",
+  glow: { color: "#f59e0b", opacity: 0.16 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 }
+};
+
+// src/native/OrazakaMark.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function OrazakaMark({ size = 48, animated = true, title, neutral }) {
+  const { theme } = useTheme();
+  const { Animated: Animated8, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const id = useSvgId("ozm");
+  const viewBox = size < 48 ? ORAZAKA.croppedViewBox : ORAZAKA.viewBox;
+  const stroke = neutral ?? theme.textMuted;
+  const amber = /* @__PURE__ */ jsx11(LinearGradient2, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: ORAZAKA.amber.x1, y1: ORAZAKA.amber.y1, x2: ORAZAKA.amber.x2, y2: ORAZAKA.amber.y2, children: ORAZAKA.amber.stops.map(([offset, color]) => /* @__PURE__ */ jsx11(Stop2, { offset, stopColor: color }, offset)) });
+  const fill = `url(#${id}a)`;
+  return /* @__PURE__ */ jsxs8(View7, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs8(Svg2, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx11(Defs2, { children: /* @__PURE__ */ jsxs8(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx11(Stop2, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
+        /* @__PURE__ */ jsx11(Stop2, { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: 0 })
+      ] }) }),
+      size >= 48 ? /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.orbit.r, stroke, strokeWidth: ORAZAKA.orbit.width, strokeDasharray: ORAZAKA.orbit.dash, opacity: 0.6, fill: "none" }),
+      /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
+    ] }),
+    /* @__PURE__ */ jsx11(Animated8.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs8(Svg2, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx11(Defs2, { children: amber }),
+      ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx11(Path2, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
+    ] }) }),
+    /* @__PURE__ */ jsx11(Animated8.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs8(Svg2, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx11(Defs2, { children: amber }),
+      /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
+      /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
+    ] }) })
+  ] });
+}
+
 // src/native/OrochiaMark.tsx
-import { useEffect, useState } from "react";
-import { AccessibilityInfo, Animated, Easing, View } from "react-native";
-import Svg, { Circle, Defs, Ellipse, G as Group, LinearGradient, Path, RadialGradient, Stop } from "react-native-svg";
+import { useEffect as useEffect5, useState as useState7 } from "react";
+import { AccessibilityInfo as AccessibilityInfo3, Animated as Animated4, Easing as Easing2, View as View8 } from "react-native";
+import Svg3, { Circle as Circle3, Defs as Defs3, Ellipse, G as Group2, LinearGradient as LinearGradient3, Path as Path3, RadialGradient as RadialGradient3, Stop as Stop3 } from "react-native-svg";
 
 // src/marks/orochia-geometry.ts
 var OROCHIA = {
@@ -28,23 +892,25 @@ var OROCHIA = {
 };
 
 // src/native/OrochiaMark.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var CENTER = OROCHIA.offset + 180;
-function OrochiaMark({ size = 48, animated = true, title, neutral = "rgba(255,255,255,0.35)" }) {
-  const [spin] = useState(() => new Animated.Value(0));
-  const [pulse] = useState(() => new Animated.Value(0));
-  useEffect(() => {
+function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }) {
+  const { theme } = useTheme();
+  const neutral = neutralProp ?? theme.textMuted;
+  const [spin] = useState7(() => new Animated4.Value(0));
+  const [pulse] = useState7(() => new Animated4.Value(0));
+  useEffect5(() => {
     if (!animated) return;
     let loops = [];
     let cancelled = false;
-    void AccessibilityInfo.isReduceMotionEnabled().then((reduce) => {
+    void AccessibilityInfo3.isReduceMotionEnabled().then((reduce) => {
       if (reduce || cancelled) return;
       loops = [
-        Animated.loop(Animated.timing(spin, { toValue: 1, duration: 3e4, easing: Easing.linear, useNativeDriver: true })),
-        Animated.loop(
-          Animated.sequence([
-            Animated.timing(pulse, { toValue: 1, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
-            Animated.timing(pulse, { toValue: 0, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true })
+        Animated4.loop(Animated4.timing(spin, { toValue: 1, duration: 3e4, easing: Easing2.linear, useNativeDriver: true })),
+        Animated4.loop(
+          Animated4.sequence([
+            Animated4.timing(pulse, { toValue: 1, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true }),
+            Animated4.timing(pulse, { toValue: 0, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true })
           ])
         )
       ];
@@ -58,38 +924,408 @@ function OrochiaMark({ size = 48, animated = true, title, neutral = "rgba(255,25
   const viewBox = size < 48 ? OROCHIA.croppedViewBox : OROCHIA.viewBox;
   const layer = { position: "absolute", width: size, height: size };
   const a11y = title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
-  const bodyGradient = /* @__PURE__ */ jsx(LinearGradient, { id: "body", gradientUnits: "userSpaceOnUse", x1: OROCHIA.body.x1 + OROCHIA.offset, y1: OROCHIA.body.y1 + OROCHIA.offset, x2: OROCHIA.body.x2 + OROCHIA.offset, y2: OROCHIA.body.y2 + OROCHIA.offset, children: OROCHIA.body.stops.map(([offset, color]) => /* @__PURE__ */ jsx(Stop, { offset, stopColor: color }, offset)) });
-  return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size }, ...a11y, children: [
-    /* @__PURE__ */ jsxs(Svg, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(RadialGradient, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
-        /* @__PURE__ */ jsx(Stop, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
-        /* @__PURE__ */ jsx(Stop, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
+  const bodyGradient = /* @__PURE__ */ jsx12(LinearGradient3, { id: "body", gradientUnits: "userSpaceOnUse", x1: OROCHIA.body.x1 + OROCHIA.offset, y1: OROCHIA.body.y1 + OROCHIA.offset, x2: OROCHIA.body.x2 + OROCHIA.offset, y2: OROCHIA.body.y2 + OROCHIA.offset, children: OROCHIA.body.stops.map(([offset, color]) => /* @__PURE__ */ jsx12(Stop3, { offset, stopColor: color }, offset)) });
+  return /* @__PURE__ */ jsxs9(View8, { style: { width: size, height: size }, ...a11y, children: [
+    /* @__PURE__ */ jsxs9(Svg3, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx12(Defs3, { children: /* @__PURE__ */ jsxs9(RadialGradient3, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx12(Stop3, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
+        /* @__PURE__ */ jsx12(Stop3, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
       ] }) }),
-      /* @__PURE__ */ jsx(Circle, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
-      /* @__PURE__ */ jsx(Circle, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
+      /* @__PURE__ */ jsx12(Circle3, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
+      /* @__PURE__ */ jsx12(Circle3, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
     ] }),
-    /* @__PURE__ */ jsx(Animated.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx(Svg, { viewBox, style: layer, children: /* @__PURE__ */ jsx(Circle, { cx: CENTER, cy: CENTER, r: OROCHIA.orbit.r, stroke: neutral, strokeWidth: OROCHIA.orbit.width, strokeDasharray: OROCHIA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
-    /* @__PURE__ */ jsxs(Svg, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx(Defs, { children: bodyGradient }),
-      /* @__PURE__ */ jsxs(Group, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
-        /* @__PURE__ */ jsx(Path, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx(Path, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
-        /* @__PURE__ */ jsx(Path, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx(Path, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx(Ellipse, { cx: OROCHIA.head.cx, cy: OROCHIA.head.cy, rx: OROCHIA.head.rx, ry: OROCHIA.head.ry, rotation: OROCHIA.head.rotate, origin: `${OROCHIA.head.cx}, ${OROCHIA.head.cy}`, fill: "url(#body)" }),
-        /* @__PURE__ */ jsx(Path, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
+    /* @__PURE__ */ jsx12(Animated4.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx12(Svg3, { viewBox, style: layer, children: /* @__PURE__ */ jsx12(Circle3, { cx: CENTER, cy: CENTER, r: OROCHIA.orbit.r, stroke: neutral, strokeWidth: OROCHIA.orbit.width, strokeDasharray: OROCHIA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
+    /* @__PURE__ */ jsxs9(Svg3, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx12(Defs3, { children: bodyGradient }),
+      /* @__PURE__ */ jsxs9(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx12(Ellipse, { cx: OROCHIA.head.cx, cy: OROCHIA.head.cy, rx: OROCHIA.head.rx, ry: OROCHIA.head.ry, rotation: OROCHIA.head.rotate, origin: `${OROCHIA.head.cx}, ${OROCHIA.head.cy}`, fill: "url(#body)" }),
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(Animated.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs(Svg, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsx(LinearGradient, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx(Stop, { offset, stopColor: color }, offset)) }) }),
-      /* @__PURE__ */ jsxs(Group, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
-        /* @__PURE__ */ jsx(Circle, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
-        /* @__PURE__ */ jsx(Path, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
+    /* @__PURE__ */ jsx12(Animated4.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs9(Svg3, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx12(Defs3, { children: /* @__PURE__ */ jsx12(LinearGradient3, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx12(Stop3, { offset, stopColor: color }, offset)) }) }),
+      /* @__PURE__ */ jsxs9(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx12(Circle3, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
+        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
       ] })
     ] }) })
   ] });
 }
+
+// src/native/ProductMark.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function ProductMark({ id, ...props }) {
+  if (id === "krizaka") return /* @__PURE__ */ jsx13(KrizakaMark, { ...props });
+  if (id === "orazaka") return /* @__PURE__ */ jsx13(OrazakaMark, { ...props });
+  return /* @__PURE__ */ jsx13(OrochiaMark, { ...props });
+}
+
+// src/native/progress.tsx
+import * as React7 from "react";
+import { Animated as Animated5, Easing as Easing3, StyleSheet as StyleSheet9, View as View9 } from "react-native";
+import Svg4, { Circle as Circle4, Defs as Defs4, LinearGradient as LinearGradient4, Rect, Stop as Stop4 } from "react-native-svg";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var AnimatedCircle = Animated5.createAnimatedComponent(Circle4);
+var BAR = { sm: 4, md: 8, lg: 12 };
+var RING = { sm: 40, md: 80, lg: 144 };
+var STROKE = { sm: 12, md: 9, lg: 7 };
+function Progress({ variant = "bar", size = "md", value, max = 100, label, valueText, children, style }) {
+  const { theme } = useTheme();
+  const reduce = useReducedMotion();
+  const id = useSvgId("kz-progress-");
+  const known = typeof value === "number" && Number.isFinite(value);
+  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;
+  const percent = Math.round(ratio * 100);
+  const [progress] = React7.useState(() => new Animated5.Value(ratio));
+  const [spin] = React7.useState(() => new Animated5.Value(0));
+  const [track, setTrack] = React7.useState(0);
+  React7.useEffect(() => {
+    if (reduce) {
+      progress.setValue(ratio);
+      return;
+    }
+    const animation = Animated5.timing(progress, { toValue: ratio, duration: 700, easing: Easing3.out(Easing3.cubic), useNativeDriver: false });
+    animation.start();
+    return () => animation.stop();
+  }, [ratio, reduce, progress]);
+  React7.useEffect(() => {
+    if (known || reduce) return;
+    const loop = Animated5.loop(Animated5.timing(spin, { toValue: 1, duration: 1200, easing: Easing3.linear, useNativeDriver: true }));
+    loop.start();
+    return () => {
+      loop.stop();
+      spin.setValue(0);
+    };
+  }, [known, reduce, spin]);
+  const a11y = {
+    accessible: true,
+    role: "progressbar",
+    "aria-label": label,
+    "aria-valuemin": known ? 0 : void 0,
+    "aria-valuemax": known ? max : void 0,
+    "aria-valuenow": known ? Math.min(max, Math.max(0, value)) : void 0,
+    "aria-valuetext": known ? valueText ?? `${percent}%` : valueText
+  };
+  const gradient = /* @__PURE__ */ jsx14(Defs4, { children: /* @__PURE__ */ jsxs10(LinearGradient4, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
+    /* @__PURE__ */ jsx14(Stop4, { offset: "0", stopColor: theme.accent }),
+    /* @__PURE__ */ jsx14(Stop4, { offset: "1", stopColor: theme.accent2 })
+  ] }) });
+  if (variant === "ring") {
+    const side = RING[size];
+    const stroke = STROKE[size];
+    const r = 50 - stroke / 2;
+    const circumference = 2 * Math.PI * r;
+    const offset = known ? progress.interpolate({ inputRange: [0, 1], outputRange: [circumference, 0] }) : circumference * 0.75;
+    const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
+    return /* @__PURE__ */ jsxs10(View9, { ...a11y, style: [styles9.ring, { width: side, height: side }, style], children: [
+      /* @__PURE__ */ jsx14(Animated5.View, { style: [StyleSheet9.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs10(Svg4, { width: side, height: side, viewBox: "0 0 100 100", children: [
+        gradient,
+        /* @__PURE__ */ jsx14(Circle4, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
+        /* @__PURE__ */ jsx14(
+          AnimatedCircle,
+          {
+            cx: 50,
+            cy: 50,
+            r,
+            fill: "none",
+            stroke: `url(#${id})`,
+            strokeWidth: stroke,
+            strokeLinecap: "round",
+            strokeDasharray: `${circumference} ${circumference}`,
+            strokeDashoffset: offset
+          }
+        )
+      ] }) }),
+      children
+    ] });
+  }
+  const width = known ? progress.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] }) : "40%";
+  const translate = spin.interpolate({ inputRange: [0, 1], outputRange: [-0.4 * track, track] });
+  return /* @__PURE__ */ jsx14(
+    View9,
+    {
+      ...a11y,
+      onLayout: known ? void 0 : (event) => setTrack(event.nativeEvent.layout.width),
+      style: [styles9.bar, { height: BAR[size], backgroundColor: theme.surface3 }, style],
+      children: /* @__PURE__ */ jsx14(Animated5.View, { style: [styles9.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs10(Svg4, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
+        gradient,
+        /* @__PURE__ */ jsx14(Rect, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
+      ] }) })
+    }
+  );
+}
+var styles9 = StyleSheet9.create({
+  ring: { alignItems: "center", justifyContent: "center" },
+  bar: { width: "100%", overflow: "hidden", borderRadius: 9999 },
+  fill: { height: "100%", overflow: "hidden", borderRadius: 9999 }
+});
+
+// src/native/segmented.tsx
+import { Pressable as Pressable4, StyleSheet as StyleSheet10, Text as Text6, View as View10 } from "react-native";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Segmented({ options, value, onValueChange, size = "md", "aria-label": label, style }) {
+  const { theme, radius: radius3 } = useTheme();
+  return /* @__PURE__ */ jsx15(
+    View10,
+    {
+      role: "tablist",
+      "aria-label": label,
+      style: [styles10.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md, height: size === "sm" ? 32 : 40 }, style],
+      children: options.map((option) => {
+        const selected = option.value === value;
+        return /* @__PURE__ */ jsx15(
+          Pressable4,
+          {
+            role: "tab",
+            "aria-selected": selected,
+            "aria-disabled": option.disabled,
+            disabled: option.disabled,
+            onPress: () => {
+              if (!selected) onValueChange(option.value);
+            },
+            style: [
+              styles10.segment,
+              { borderRadius: radius3.sm },
+              selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null,
+              option.disabled ? styles10.disabled : null
+            ],
+            children: /* @__PURE__ */ jsx15(Text6, { numberOfLines: 1, style: [styles10.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+var styles10 = StyleSheet10.create({
+  track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet10.hairlineWidth },
+  segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet10.hairlineWidth, borderColor: "transparent" },
+  label: { fontWeight: "600" },
+  disabled: { opacity: 0.4 }
+});
+
+// src/native/skeleton.tsx
+import * as React8 from "react";
+import { Animated as Animated6 } from "react-native";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var SHAPE = {
+  text: { width: "100%", height: 12, radius: 4 },
+  circle: { width: 40, height: 40, radius: 9999 },
+  rect: { width: "100%", height: 96, radius: 12 }
+};
+function Skeleton({ shape = "text", width, height, style, testID }) {
+  const { theme } = useTheme();
+  const reduce = useReducedMotion();
+  const [opacity] = React8.useState(() => new Animated6.Value(1));
+  React8.useEffect(() => {
+    if (reduce) return;
+    const loop = Animated6.loop(
+      Animated6.sequence([
+        Animated6.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
+        Animated6.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => {
+      loop.stop();
+      opacity.setValue(1);
+    };
+  }, [reduce, opacity]);
+  const s = SHAPE[shape];
+  const side = shape === "circle" ? width ?? height ?? s.width : void 0;
+  return /* @__PURE__ */ jsx16(
+    Animated6.View,
+    {
+      testID,
+      "aria-hidden": true,
+      style: [
+        { width: side ?? width ?? s.width, height: side ?? height ?? s.height, borderRadius: s.radius, backgroundColor: theme.surface3, opacity },
+        style
+      ]
+    }
+  );
+}
+
+// src/native/spinner.tsx
+import { ActivityIndicator as ActivityIndicator2 } from "react-native";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function Spinner({ label, size = "md", ...props }) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx17(
+    ActivityIndicator2,
+    {
+      accessible: true,
+      role: "progressbar",
+      "aria-label": label,
+      ...props,
+      size: size === "lg" ? "large" : "small",
+      color: theme.accent,
+      style: [size === "sm" ? { transform: [{ scale: 0.75 }] } : null, props.style]
+    }
+  );
+}
+
+// src/native/toast.tsx
+import * as React9 from "react";
+import { AccessibilityInfo as AccessibilityInfo4, Animated as Animated7, Pressable as Pressable5, StyleSheet as StyleSheet11, Text as Text7, View as View11 } from "react-native";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var items = [];
+var listeners2 = /* @__PURE__ */ new Set();
+var counter = 0;
+var emit = () => listeners2.forEach((listener) => listener());
+var subscribe2 = (listener) => {
+  listeners2.add(listener);
+  return () => listeners2.delete(listener);
+};
+var snapshot = () => items;
+function show(title, options = {}) {
+  const id = options.id ?? `kz-toast-${++counter}`;
+  const item = { ...options, id, title };
+  items = items.some((t) => t.id === id) ? items.map((t) => t.id === id ? item : t) : [...items, item];
+  emit();
+  return id;
+}
+function dismiss(id) {
+  const gone = items.filter((t) => id === void 0 || t.id === id);
+  if (gone.length === 0) return;
+  items = id === void 0 ? [] : items.filter((t) => t.id !== id);
+  emit();
+  gone.forEach((t) => t.onDismiss?.());
+}
+var tone = (name) => (title, options) => show(title, { ...options, tone: name });
+var toast = Object.assign(show, {
+  success: tone("success"),
+  warning: tone("warning"),
+  error: tone("error"),
+  info: tone("info"),
+  dismiss
+});
+function ToastView({ item, closeLabel, duration }) {
+  const { theme, radius: radius3 } = useTheme();
+  const reduce = useReducedMotion();
+  const [enter] = React9.useState(() => new Animated7.Value(reduce ? 1 : 0));
+  React9.useEffect(() => {
+    if (reduce) enter.setValue(1);
+    else Animated7.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
+  }, [enter, reduce]);
+  React9.useEffect(() => {
+    AccessibilityInfo4.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
+  }, [item.title, item.description]);
+  const ms = item.duration ?? duration;
+  React9.useEffect(() => {
+    if (!Number.isFinite(ms)) return;
+    const timer2 = setTimeout(() => dismiss(item.id), ms);
+    return () => clearTimeout(timer2);
+  }, [item.id, ms]);
+  const edge = { success: theme.success, warning: theme.warning, error: theme.danger, info: theme.info, default: theme.borderDefault }[item.tone ?? "default"];
+  const text = /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    item.icon ? /* @__PURE__ */ jsx18(View11, { "aria-hidden": true, children: item.icon }) : null,
+    /* @__PURE__ */ jsxs11(View11, { style: styles11.content, children: [
+      /* @__PURE__ */ jsx18(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
+      item.description ? /* @__PURE__ */ jsx18(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
+    ] })
+  ] });
+  const body = /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    item.onPress ? /* @__PURE__ */ jsx18(
+      Pressable5,
+      {
+        role: "button",
+        onPress: () => {
+          item.onPress?.();
+          dismiss(item.id);
+        },
+        style: ({ pressed }) => [styles11.main, { opacity: pressed ? 0.8 : 1 }],
+        children: text
+      }
+    ) : /* @__PURE__ */ jsx18(View11, { style: styles11.main, children: text }),
+    item.action ? /* @__PURE__ */ jsx18(
+      Pressable5,
+      {
+        role: "button",
+        onPress: () => {
+          item.action?.onPress();
+          dismiss(item.id);
+        },
+        style: [styles11.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
+        children: /* @__PURE__ */ jsx18(Text7, { style: [styles11.actionLabel, { color: theme.onAccent }], children: item.action.label })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx18(Pressable5, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles11.close, children: /* @__PURE__ */ jsx18(Text7, { style: [styles11.cross, { color: theme.textSecondary }], children: "\xD7" }) })
+  ] });
+  const frame = [
+    styles11.toast,
+    { backgroundColor: theme.surface2, borderColor: theme.borderDefault, borderLeftColor: edge, borderRadius: radius3.lg, shadowColor: theme.scrimStrong }
+  ];
+  const motion3 = { transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }] };
+  return /* @__PURE__ */ jsx18(Animated7.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx18(View11, { style: frame, children: body }) });
+}
+function Toaster({ closeLabel, position = "top", offset = 12, duration = 6e3, max = 3 }) {
+  const all = React9.useSyncExternalStore(subscribe2, snapshot, snapshot);
+  const shown = all.slice(-max);
+  if (shown.length === 0) return null;
+  return /* @__PURE__ */ jsx18(View11, { pointerEvents: "box-none", style: [styles11.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx18(ToastView, { item, closeLabel, duration }, item.id)) });
+}
+var styles11 = StyleSheet11.create({
+  stack: { position: "absolute", left: 12, right: 12, gap: 8, zIndex: 100 },
+  toast: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    padding: 12,
+    borderWidth: StyleSheet11.hairlineWidth,
+    borderLeftWidth: 4,
+    shadowOpacity: 0.3,
+    shadowRadius: 16,
+    shadowOffset: { width: 0, height: 8 },
+    elevation: 8
+  },
+  main: { flex: 1, flexDirection: "row", alignItems: "center", gap: 10 },
+  content: { flex: 1, gap: 2 },
+  action: { paddingHorizontal: 12, paddingVertical: 6 },
+  actionLabel: { fontSize: 12, fontWeight: "700" },
+  close: { width: 28, height: 28, alignItems: "center", justifyContent: "center" },
+  cross: { fontSize: 18, lineHeight: 20, fontWeight: "700" }
+});
 export {
-  OrochiaMark
+  Avatar,
+  AvatarGroup,
+  AvatarRoot,
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  CardDescription,
+  CardFooter,
+  CardImage,
+  CardMedia,
+  CardOverlay,
+  CardRoot,
+  CardTitle,
+  Chip,
+  Countdown,
+  EmptyState,
+  IconButton,
+  KrizakaMark,
+  OrazakaMark,
+  OrochiaMark,
+  ProductMark,
+  Progress,
+  Segmented,
+  Skeleton,
+  Spinner,
+  ThemeProvider,
+  Toaster,
+  Txt,
+  alpha,
+  splitDuration,
+  textStyles,
+  toast,
+  useCountdown,
+  useReducedMotion,
+  useTheme
 };
 //# sourceMappingURL=native.js.map