@krizaka/ui 2.0.0-beta.2 → 2.0.0-beta.4

package/dist/native.js

@@ -1,6 +1,616 @@
+// 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)",
+  "accent2": "#196df5",
+  "onAccent": "#ffffff",
+  "ring": "#196df5",
+  "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)",
+  "accent2": "#0a64f5",
+  "onAccent": "#ffffff",
+  "ring": "#0a64f5",
+  "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]) });
+
+// 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: "accent",
+  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/OrochiaMark.tsx
-import { useEffect, useState } from "react";
-import { AccessibilityInfo, Animated, Easing, View } from "react-native";
+import { useEffect as useEffect4, useState as useState6 } from "react";
+import { AccessibilityInfo as AccessibilityInfo2, Animated as Animated3, Easing, View as View6 } from "react-native";
 import Svg, { Circle, Defs, Ellipse, G as Group, LinearGradient, Path, RadialGradient, Stop } from "react-native-svg";
 
 // src/marks/orochia-geometry.ts
@@ -28,23 +638,23 @@ var OROCHIA = {
 };
 
 // src/native/OrochiaMark.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } 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(() => {
+  const [spin] = useState6(() => new Animated3.Value(0));
+  const [pulse] = useState6(() => new Animated3.Value(0));
+  useEffect4(() => {
     if (!animated) return;
     let loops = [];
     let cancelled = false;
-    void AccessibilityInfo.isReduceMotionEnabled().then((reduce) => {
+    void AccessibilityInfo2.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 })
+        Animated3.loop(Animated3.timing(spin, { toValue: 1, duration: 3e4, 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 })
           ])
         )
       ];
@@ -58,38 +668,397 @@ 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__ */ jsx10(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__ */ jsx10(Stop, { offset, stopColor: color }, offset)) });
+  return /* @__PURE__ */ jsxs7(View6, { style: { width: size, height: size }, ...a11y, children: [
+    /* @__PURE__ */ jsxs7(Svg, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx10(Defs, { children: /* @__PURE__ */ jsxs7(RadialGradient, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx10(Stop, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
+        /* @__PURE__ */ jsx10(Stop, { 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__ */ jsx10(Circle, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
+      /* @__PURE__ */ jsx10(Circle, { 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__ */ jsx10(Animated3.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx10(Svg, { viewBox, style: layer, children: /* @__PURE__ */ jsx10(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__ */ jsxs7(Svg, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx10(Defs, { children: bodyGradient }),
+      /* @__PURE__ */ jsxs7(Group, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx10(Path, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx10(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__ */ jsx10(Path, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx10(Path, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx10(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__ */ jsx10(Path, { 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__ */ jsx10(Animated3.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs7(Svg, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx10(Defs, { children: /* @__PURE__ */ jsx10(LinearGradient, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx10(Stop, { offset, stopColor: color }, offset)) }) }),
+      /* @__PURE__ */ jsxs7(Group, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx10(Circle, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
+        /* @__PURE__ */ jsx10(Path, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
       ] })
     ] }) })
   ] });
 }
+
+// src/native/progress.tsx
+import * as React7 from "react";
+import { Animated as Animated4, Easing as Easing2, StyleSheet as StyleSheet9, View as View7 } from "react-native";
+import Svg2, { Circle as Circle2, Defs as Defs2, LinearGradient as LinearGradient2, Rect, Stop as Stop2 } from "react-native-svg";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var AnimatedCircle = Animated4.createAnimatedComponent(Circle2);
+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 Animated4.Value(ratio));
+  const [spin] = React7.useState(() => new Animated4.Value(0));
+  const [track, setTrack] = React7.useState(0);
+  React7.useEffect(() => {
+    if (reduce) {
+      progress.setValue(ratio);
+      return;
+    }
+    const animation = Animated4.timing(progress, { toValue: ratio, duration: 700, easing: Easing2.out(Easing2.cubic), useNativeDriver: false });
+    animation.start();
+    return () => animation.stop();
+  }, [ratio, reduce, progress]);
+  React7.useEffect(() => {
+    if (known || reduce) return;
+    const loop = Animated4.loop(Animated4.timing(spin, { toValue: 1, duration: 1200, easing: Easing2.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__ */ jsx11(Defs2, { children: /* @__PURE__ */ jsxs8(LinearGradient2, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
+    /* @__PURE__ */ jsx11(Stop2, { offset: "0", stopColor: theme.accent }),
+    /* @__PURE__ */ jsx11(Stop2, { 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__ */ jsxs8(View7, { ...a11y, style: [styles9.ring, { width: side, height: side }, style], children: [
+      /* @__PURE__ */ jsx11(Animated4.View, { style: [StyleSheet9.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs8(Svg2, { width: side, height: side, viewBox: "0 0 100 100", children: [
+        gradient,
+        /* @__PURE__ */ jsx11(Circle2, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
+        /* @__PURE__ */ jsx11(
+          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__ */ jsx11(
+    View7,
+    {
+      ...a11y,
+      onLayout: known ? void 0 : (event) => setTrack(event.nativeEvent.layout.width),
+      style: [styles9.bar, { height: BAR[size], backgroundColor: theme.surface3 }, style],
+      children: /* @__PURE__ */ jsx11(Animated4.View, { style: [styles9.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs8(Svg2, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
+        gradient,
+        /* @__PURE__ */ jsx11(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 View8 } from "react-native";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Segmented({ options, value, onValueChange, size = "md", "aria-label": label, style }) {
+  const { theme, radius: radius3 } = useTheme();
+  return /* @__PURE__ */ jsx12(
+    View8,
+    {
+      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__ */ jsx12(
+          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__ */ jsx12(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 Animated5 } from "react-native";
+import { jsx as jsx13 } 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 Animated5.Value(1));
+  React8.useEffect(() => {
+    if (reduce) return;
+    const loop = Animated5.loop(
+      Animated5.sequence([
+        Animated5.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
+        Animated5.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__ */ jsx13(
+    Animated5.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 jsx14 } from "react/jsx-runtime";
+function Spinner({ label, size = "md", ...props }) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx14(
+    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 AccessibilityInfo3, Animated as Animated6, Pressable as Pressable5, StyleSheet as StyleSheet11, Text as Text7, View as View9 } from "react-native";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs9 } 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 Animated6.Value(reduce ? 1 : 0));
+  React9.useEffect(() => {
+    if (reduce) enter.setValue(1);
+    else Animated6.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
+  }, [enter, reduce]);
+  React9.useEffect(() => {
+    AccessibilityInfo3.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__ */ jsxs9(Fragment2, { children: [
+    item.icon ? /* @__PURE__ */ jsx15(View9, { "aria-hidden": true, children: item.icon }) : null,
+    /* @__PURE__ */ jsxs9(View9, { style: styles11.content, children: [
+      /* @__PURE__ */ jsx15(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
+      item.description ? /* @__PURE__ */ jsx15(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
+    ] })
+  ] });
+  const body = /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    item.onPress ? /* @__PURE__ */ jsx15(
+      Pressable5,
+      {
+        role: "button",
+        onPress: () => {
+          item.onPress?.();
+          dismiss(item.id);
+        },
+        style: ({ pressed }) => [styles11.main, { opacity: pressed ? 0.8 : 1 }],
+        children: text
+      }
+    ) : /* @__PURE__ */ jsx15(View9, { style: styles11.main, children: text }),
+    item.action ? /* @__PURE__ */ jsx15(
+      Pressable5,
+      {
+        role: "button",
+        onPress: () => {
+          item.action?.onPress();
+          dismiss(item.id);
+        },
+        style: [styles11.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
+        children: /* @__PURE__ */ jsx15(Text7, { style: [styles11.actionLabel, { color: theme.onAccent }], children: item.action.label })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx15(Pressable5, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles11.close, children: /* @__PURE__ */ jsx15(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__ */ jsx15(Animated6.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx15(View9, { 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__ */ jsx15(View9, { pointerEvents: "box-none", style: [styles11.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx15(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,
+  OrochiaMark,
+  Progress,
+  Segmented,
+  Skeleton,
+  Spinner,
+  ThemeProvider,
+  Toaster,
+  Txt,
+  alpha,
+  splitDuration,
+  textStyles,
+  toast,
+  useCountdown,
+  useReducedMotion,
+  useTheme
 };
 //# sourceMappingURL=native.js.map