@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/dist/native.js

@@ -30,6 +30,7 @@ function countdownParts(ms, units) {
 // src/native/avatar.tsx
 import * as React2 from "react";
 import { Image, StyleSheet, Text, View } from "react-native";
+import { SvgUri } from "react-native-svg";
 
 // ../tokens/dist/native.js
 var themes = Object.freeze({ dark: Object.freeze({
@@ -56,9 +57,13 @@ var themes = Object.freeze({ dark: Object.freeze({
   "brandGradientVia": "#0e0f16",
   "brandGradientTo": "#0c0c0e",
   "success": "#10b77f",
+  "successText": "#36d399",
   "warning": "#f59f0a",
+  "warningText": "#f6a823",
   "danger": "#ef4343",
+  "dangerText": "#f87272",
   "info": "#196df5",
+  "infoText": "#629cf8",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)"
@@ -86,9 +91,13 @@ var themes = Object.freeze({ dark: Object.freeze({
   "brandGradientVia": "#f3f6fc",
   "brandGradientTo": "#fafafa",
   "success": "#10b77f",
+  "successText": "#0a714e",
   "warning": "#f59f0a",
+  "warningText": "#955104",
   "danger": "#ef4343",
+  "dangerText": "#af1d1d",
   "info": "#0a64f5",
+  "infoText": "#0954ce",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)"
@@ -117,6 +126,7 @@ var brands = Object.freeze({
       "onAccent": "#ffffff",
       "ring": "#196df5",
       "info": "#196df5",
+      "infoText": "#629cf8",
       "brandGradientFrom": "#0e1525",
       "brandGradientVia": "#0e0f16",
       "brandGradientTo": "#0c0c0e"
@@ -130,6 +140,7 @@ var brands = Object.freeze({
       "onAccent": "#ffffff",
       "ring": "#0a64f5",
       "info": "#0a64f5",
+      "infoText": "#0954ce",
       "brandGradientFrom": "#dcebfe",
       "brandGradientVia": "#f3f6fc",
       "brandGradientTo": "#fafafa"
@@ -145,6 +156,7 @@ var brands = Object.freeze({
       "onAccent": "#0c0c0e",
       "ring": "#f67e23",
       "info": "#3b83f7",
+      "infoText": "#629cf8",
       "brandGradientFrom": "#28170b",
       "brandGradientVia": "#17130c",
       "brandGradientTo": "#0c0c0e"
@@ -158,6 +170,7 @@ var brands = Object.freeze({
       "onAccent": "#ffffff",
       "ring": "#b45309",
       "info": "#0a64f5",
+      "infoText": "#0954ce",
       "brandGradientFrom": "#ffebd6",
       "brandGradientVia": "#fdf7ed",
       "brandGradientTo": "#fafafa"
@@ -173,6 +186,7 @@ var brands = Object.freeze({
       "onAccent": "#ffffff",
       "ring": "#a78bfa",
       "info": "#7c3aed",
+      "infoText": "#a78bfa",
       "brandGradientFrom": "#1a0e2a",
       "brandGradientVia": "#1c0d17",
       "brandGradientTo": "#0c0c0e"
@@ -186,6 +200,7 @@ var brands = Object.freeze({
       "onAccent": "#ffffff",
       "ring": "#7c3aed",
       "info": "#7c3aed",
+      "infoText": "#6d28d9",
       "brandGradientFrom": "#efe7fe",
       "brandGradientVia": "#fdedf5",
       "brandGradientTo": "#fafafa"
@@ -261,7 +276,10 @@ function useSvgId(prefix) {
 // 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 }) {
+function isSvgUri(uri) {
+  return /^data:image\/svg\+xml[;,]/i.test(uri) || /\.svg(?:[?#]|$)/i.test(uri);
+}
+function AvatarRoot({ src, svg, alt = "", fallback, size = "md", style, ...props }) {
   const { theme } = useTheme();
   const [failedSrc, setFailedSrc] = React2.useState(null);
   const failed = Boolean(src) && failedSrc === src;
@@ -276,7 +294,7 @@ function AvatarRoot({ src, alt = "", fallback, size = "md", style, ...props }) {
       "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
+      children: src && !failed && (svg || isSvgUri(src)) ? /* @__PURE__ */ jsx2(View, { style: StyleSheet.absoluteFill, pointerEvents: "none", children: /* @__PURE__ */ jsx2(SvgUri, { testID: props.testID ? `${props.testID}.svg` : void 0, uri: src, width: "100%", height: "100%", preserveAspectRatio: "xMidYMid slice", onError: () => setFailedSrc(src) }) }) : 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
     }
   );
 }
@@ -357,7 +375,9 @@ var styles2 = StyleSheet2.create({
 });
 
 // src/native/button.tsx
+import * as React4 from "react";
 import { ActivityIndicator, Pressable, StyleSheet as StyleSheet4, View as View2 } from "react-native";
+import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
 
 // src/native/txt.tsx
 import { StyleSheet as StyleSheet3, Text as Text3 } from "react-native";
@@ -367,9 +387,9 @@ var TONE = {
   secondary: "textSecondary",
   muted: "textMuted",
   accent: "accentText",
-  success: "success",
-  warning: "warning",
-  danger: "danger",
+  success: "successText",
+  warning: "warningText",
+  danger: "dangerText",
   onAccent: "onAccent",
   onMedia: "textOnMedia"
 };
@@ -401,6 +421,8 @@ function look2(variant, t) {
   switch (variant) {
     case "primary":
       return { bg: t.accent, fg: t.onAccent, border: t.accent };
+    case "gradient":
+      return { bg: t.accent, fg: t.onAccent, border: "transparent", gradient: [t.accent, t.accent2] };
     case "outline":
       return { bg: "transparent", fg: t.textPrimary, border: t.borderDefault };
     case "ghost":
@@ -427,9 +449,20 @@ function useButton({ variant = "secondary", size = "md", shape = "rounded", load
   });
   return { colors, inactive, frame };
 }
+function Fill({ colors, id }) {
+  if (!colors.gradient) return null;
+  return /* @__PURE__ */ jsxs3(Svg, { "aria-hidden": true, pointerEvents: "none", style: StyleSheet4.absoluteFill, width: "100%", height: "100%", children: [
+    /* @__PURE__ */ jsx5(Defs, { children: /* @__PURE__ */ jsxs3(LinearGradient, { id, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+      /* @__PURE__ */ jsx5(Stop, { offset: "0", stopColor: colors.gradient[0] }),
+      /* @__PURE__ */ jsx5(Stop, { offset: "1", stopColor: colors.gradient[1] })
+    ] }) }),
+    /* @__PURE__ */ jsx5(Rect, { width: "100%", height: "100%", fill: `url(#${id})` })
+  ] });
+}
 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(
+  const gradientId = `kz-button-${React4.useId().replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsxs3(
     Pressable,
     {
       role: "button",
@@ -439,17 +472,21 @@ function Button({ label, icon, variant, size = "md", shape, loading = false, dis
       ...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 })
-      ] })
+      children: [
+        /* @__PURE__ */ jsx5(Fill, { colors, id: gradientId }),
+        /* @__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 gradientId = `kz-button-${React4.useId().replace(/:/g, "")}`;
   const side = HEIGHT[size];
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs3(
     Pressable,
     {
       role: "button",
@@ -460,12 +497,15 @@ function IconButton({ label, icon, variant, size = "md", shape, loading = false,
       ...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
+      children: [
+        /* @__PURE__ */ jsx5(Fill, { colors, id: gradientId }),
+        loading ? /* @__PURE__ */ jsx5(ActivityIndicator, { "aria-hidden": true, size: "small", color: colors.fg }) : icon
+      ]
     }
   );
 }
 var styles4 = StyleSheet4.create({
-  base: { alignItems: "center", justifyContent: "center", borderWidth: 1 },
+  base: { alignItems: "center", justifyContent: "center", borderWidth: 1, overflow: "hidden" },
   row: { flexDirection: "row", alignItems: "center", gap: 8 }
 });
 
@@ -550,18 +590,18 @@ var styles5 = StyleSheet5.create({
 });
 
 // src/native/chip.tsx
-import * as React4 from "react";
+import * as React5 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);
+var ChipGroupContext = React5.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 group = React5.useContext(ChipGroupContext);
   const { theme, radius: radius3 } = useTheme();
-  const [own, setOwn] = React4.useState(props.removable ? false : props.defaultSelected ?? false);
+  const [own, setOwn] = React5.useState(props.removable ? false : props.defaultSelected ?? false);
   const size = props.size ?? group?.size ?? "md";
   const frame = (on2, pressed) => ({
     height: size === "sm" ? 28 : 36,
@@ -604,9 +644,9 @@ function ChipBase(props) {
 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 [own, setOwn] = React5.useState(initial);
   const current = props.value ?? own;
-  const context = React4.useMemo(() => {
+  const context = React5.useMemo(() => {
     const list = Array.isArray(current) ? current : [current];
     return {
       type: props.type,
@@ -635,18 +675,18 @@ var styles6 = StyleSheet6.create({
 });
 
 // src/native/countdown.tsx
-import * as React5 from "react";
+import * as React6 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 }) {
+function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md", label, showLabel = false, 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(() => {
+  const [opacity] = React6.useState(() => new Animated2.Value(1));
+  React6.useEffect(() => {
     if (!urgent || reduce) return;
     const loop = Animated2.loop(
       Animated2.sequence([
@@ -660,19 +700,22 @@ function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md"
       opacity.setValue(1);
     };
   }, [urgent, reduce, opacity]);
-  const color = urgent ? theme.danger : theme.textPrimary;
+  const color = urgent ? theme.dangerText : theme.textPrimary;
   const text = parts.map(([value, unit]) => `${String(value).padStart(2, "0")}${unit}`).join(" ");
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs5(
     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))
+      children: [
+        showLabel ? /* @__PURE__ */ jsx8(Text5, { style: [styles7.label, { color: theme.textSecondary, fontSize: Math.max(11, Math.round(FONT[size] * 0.6)) }], children: label }) : null,
+        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))
+      ]
     }
   );
 }
@@ -680,7 +723,8 @@ 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" }
+  unit: { marginLeft: 2, fontWeight: "700", textTransform: "uppercase" },
+  label: { fontWeight: "600", marginRight: 2 }
 });
 
 // src/native/empty-state.tsx
@@ -704,7 +748,7 @@ var styles8 = StyleSheet8.create({
 
 // 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";
+import Svg2, { Circle, Defs as Defs2, G as Group, LinearGradient as LinearGradient2, Path, RadialGradient, Stop as Stop2 } from "react-native-svg";
 
 // src/marks/krizaka-geometry.ts
 var KRIZAKA = {
@@ -770,21 +814,21 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
   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 blue = /* @__PURE__ */ jsx10(LinearGradient2, { 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(Stop2, { 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(Svg2, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsxs7(Defs2, { 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__ */ jsx10(Stop2, { offset: "0%", stopColor: KRIZAKA.glow.color, stopOpacity: KRIZAKA.glow.opacity }),
+          /* @__PURE__ */ jsx10(Stop2, { 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 })
+        /* @__PURE__ */ jsxs7(LinearGradient2, { 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(Stop2, { offset: "0%", stopColor: theme.textSecondary }),
+          /* @__PURE__ */ jsx10(Stop2, { offset: "100%", stopColor: theme.textPrimary })
         ] }),
         blue
       ] }),
@@ -792,9 +836,9 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
       /* @__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__ */ jsx10(Animated8.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx10(Svg2, { 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(Svg2, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx10(Defs2, { children: blue }),
       /* @__PURE__ */ jsxs7(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
         dot(KRIZAKA.node),
         dot(KRIZAKA.core)
@@ -805,7 +849,7 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
 
 // 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";
+import Svg3, { Circle as Circle2, Defs as Defs3, LinearGradient as LinearGradient3, Path as Path2, RadialGradient as RadialGradient2, Stop as Stop3 } from "react-native-svg";
 
 // src/marks/orazaka-geometry.ts
 var ORAZAKA = {
@@ -838,24 +882,24 @@ function OrazakaMark({ size = 48, animated = true, title, neutral }) {
   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 amber = /* @__PURE__ */ jsx11(LinearGradient3, { 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(Stop3, { 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 })
+    /* @__PURE__ */ jsxs8(Svg3, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx11(Defs3, { children: /* @__PURE__ */ jsxs8(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx11(Stop3, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
+        /* @__PURE__ */ jsx11(Stop3, { 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 }),
+    /* @__PURE__ */ jsx11(Animated8.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs8(Svg3, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx11(Defs3, { 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(Animated8.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs8(Svg3, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx11(Defs3, { 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 })
     ] }) })
@@ -865,7 +909,7 @@ function OrazakaMark({ size = 48, animated = true, title, neutral }) {
 // src/native/OrochiaMark.tsx
 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";
+import Svg4, { Circle as Circle3, Defs as Defs4, Ellipse, G as Group2, LinearGradient as LinearGradient4, Path as Path3, RadialGradient as RadialGradient3, Stop as Stop4 } from "react-native-svg";
 
 // src/marks/orochia-geometry.ts
 var OROCHIA = {
@@ -924,19 +968,19 @@ function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }
   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__ */ 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)) });
+  const bodyGradient = /* @__PURE__ */ jsx12(LinearGradient4, { 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(Stop4, { 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__ */ jsxs9(Svg4, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx12(Defs4, { children: /* @__PURE__ */ jsxs9(RadialGradient3, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx12(Stop4, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
+        /* @__PURE__ */ jsx12(Stop4, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
       ] }) }),
       /* @__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__ */ 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__ */ jsx12(Animated4.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx12(Svg4, { 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(Svg4, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx12(Defs4, { 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" }),
@@ -946,8 +990,8 @@ function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }
         /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
       ] })
     ] }),
-    /* @__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__ */ jsx12(Animated4.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs9(Svg4, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx12(Defs4, { children: /* @__PURE__ */ jsx12(LinearGradient4, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx12(Stop4, { 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)" })
@@ -965,9 +1009,9 @@ function ProductMark({ id, ...props }) {
 }
 
 // src/native/progress.tsx
-import * as React7 from "react";
+import * as React8 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 Svg5, { Circle as Circle4, Defs as Defs5, LinearGradient as LinearGradient5, Rect as Rect2, Stop as Stop5 } 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 };
@@ -980,10 +1024,10 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
   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(() => {
+  const [progress] = React8.useState(() => new Animated5.Value(ratio));
+  const [spin] = React8.useState(() => new Animated5.Value(0));
+  const [track, setTrack] = React8.useState(0);
+  React8.useEffect(() => {
     if (reduce) {
       progress.setValue(ratio);
       return;
@@ -992,7 +1036,7 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     animation.start();
     return () => animation.stop();
   }, [ratio, reduce, progress]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (known || reduce) return;
     const loop = Animated5.loop(Animated5.timing(spin, { toValue: 1, duration: 1200, easing: Easing3.linear, useNativeDriver: true }));
     loop.start();
@@ -1010,9 +1054,9 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     "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 })
+  const gradient = /* @__PURE__ */ jsx14(Defs5, { children: /* @__PURE__ */ jsxs10(LinearGradient5, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
+    /* @__PURE__ */ jsx14(Stop5, { offset: "0", stopColor: theme.accent }),
+    /* @__PURE__ */ jsx14(Stop5, { offset: "1", stopColor: theme.accent2 })
   ] }) });
   if (variant === "ring") {
     const side = RING[size];
@@ -1022,7 +1066,7 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     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: [
+      /* @__PURE__ */ jsx14(Animated5.View, { style: [StyleSheet9.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs10(Svg5, { 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(
@@ -1051,9 +1095,9 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
       ...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: [
+      children: /* @__PURE__ */ jsx14(Animated5.View, { style: [styles9.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs10(Svg5, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
         gradient,
-        /* @__PURE__ */ jsx14(Rect, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
+        /* @__PURE__ */ jsx14(Rect2, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
       ] }) })
     }
   );
@@ -1109,7 +1153,7 @@ var styles10 = StyleSheet10.create({
 });
 
 // src/native/skeleton.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { Animated as Animated6 } from "react-native";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var SHAPE = {
@@ -1120,8 +1164,8 @@ var SHAPE = {
 function Skeleton({ shape = "text", width, height, style, testID }) {
   const { theme } = useTheme();
   const reduce = useReducedMotion();
-  const [opacity] = React8.useState(() => new Animated6.Value(1));
-  React8.useEffect(() => {
+  const [opacity] = React9.useState(() => new Animated6.Value(1));
+  React9.useEffect(() => {
     if (reduce) return;
     const loop = Animated6.loop(
       Animated6.sequence([
@@ -1170,7 +1214,7 @@ function Spinner({ label, size = "md", ...props }) {
 }
 
 // src/native/toast.tsx
-import * as React9 from "react";
+import * as React10 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 = [];
@@ -1207,16 +1251,16 @@ var toast = Object.assign(show, {
 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(() => {
+  const [enter] = React10.useState(() => new Animated7.Value(reduce ? 1 : 0));
+  React10.useEffect(() => {
     if (reduce) enter.setValue(1);
     else Animated7.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
   }, [enter, reduce]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     AccessibilityInfo4.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
   }, [item.title, item.description]);
   const ms = item.duration ?? duration;
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!Number.isFinite(ms)) return;
     const timer2 = setTimeout(() => dismiss(item.id), ms);
     return () => clearTimeout(timer2);
@@ -1264,7 +1308,7 @@ function ToastView({ item, closeLabel, duration }) {
   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 all = React10.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)) });