@krizaka/ui 3.22.0 → 3.23.0

package/dist/native.js

@@ -208,7 +208,7 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "borderStrong": "rgba(255,255,255,0.16)",
   "textPrimary": "#f5f5f5",
   "textSecondary": "#a0a0a7",
-  "textMuted": "#73737d",
+  "textMuted": "#92929b",
   "textOnMedia": "#ffffff",
   "accent": "#196df5",
   "accentHover": "#0e5bd8",
@@ -251,8 +251,8 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "borderDefault": "rgba(0,0,0,0.1)",
   "borderStrong": "rgba(0,0,0,0.16)",
   "textPrimary": "#18181b",
-  "textSecondary": "#64646d",
-  "textMuted": "#808089",
+  "textSecondary": "#56565d",
+  "textMuted": "#64646d",
   "textOnMedia": "#ffffff",
   "accent": "#0a64f5",
   "accentHover": "#0d55c9",
@@ -708,7 +708,7 @@ function useMarkMotion(size, animated, spinMs = 3e4) {
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function AkinazaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, AKINAZA.motion.spin * 1e3);
+  const { Animated: Animated29, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, AKINAZA.motion.spin * 1e3);
   const id = useSvgId("akm");
   const viewBox = size < 48 ? AKINAZA.croppedViewBox : AKINAZA.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -724,11 +724,11 @@ function AkinazaMark({ size = 48, animated = true, title, neutral }) {
       /* @__PURE__ */ jsx5(Path, { d: AKINAZA.cut, fill: AKINAZA.copper }),
       AKINAZA.rings.r.map((r) => /* @__PURE__ */ jsx5(Circle, { cx: AKINAZA.rings.cx, cy: AKINAZA.rings.cy, r, stroke: AKINAZA.highlight, strokeOpacity: AKINAZA.rings.opacity, strokeWidth: AKINAZA.rings.width, fill: "none" }, r))
     ] }),
-    /* @__PURE__ */ jsx5(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs3(Svg, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx5(Animated29.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs3(Svg, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx5(Circle, { cx: AKINAZA.center, cy: AKINAZA.center, r: AKINAZA.orbit.r, stroke, strokeWidth: AKINAZA.orbit.width, strokeDasharray: AKINAZA.orbit.dash, opacity: 0.6, fill: "none" }),
       /* @__PURE__ */ jsx5(Circle, { cx: AKINAZA.node.at[0], cy: AKINAZA.node.at[1], r: AKINAZA.node.r, fill: AKINAZA.copper })
     ] }) }),
-    /* @__PURE__ */ jsx5(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs3(Svg, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx5(Animated29.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs3(Svg, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx5(Circle, { cx: AKINAZA.heart.cx, cy: AKINAZA.heart.cy, r: AKINAZA.heart.r, fill: AKINAZA.copper }),
       /* @__PURE__ */ jsx5(Circle, { cx: AKINAZA.heart.cx, cy: AKINAZA.heart.cy, r: AKINAZA.heart.inner, fill: AKINAZA.highlight })
     ] }) })
@@ -2904,7 +2904,7 @@ var KACHIZAKA = {
 import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 function KachizakaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, KACHIZAKA.motion.spin * 1e3);
+  const { Animated: Animated29, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, KACHIZAKA.motion.spin * 1e3);
   const id = useSvgId("kcm");
   const viewBox = size < 48 ? KACHIZAKA.croppedViewBox : KACHIZAKA.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -2920,11 +2920,11 @@ function KachizakaMark({ size = 48, animated = true, title, neutral }) {
       /* @__PURE__ */ jsx27(Path7, { d: KACHIZAKA.steps.first, fill: KACHIZAKA.gold }),
       /* @__PURE__ */ jsx27(Path7, { d: KACHIZAKA.steps.third, fill: KACHIZAKA.cobalt })
     ] }),
-    /* @__PURE__ */ jsx27(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs24(Svg9, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx27(Animated29.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs24(Svg9, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx27(Circle3, { cx: KACHIZAKA.center, cy: KACHIZAKA.center, r: KACHIZAKA.orbit.r, stroke, strokeWidth: KACHIZAKA.orbit.width, strokeDasharray: KACHIZAKA.orbit.dash, opacity: 0.6, fill: "none" }),
       /* @__PURE__ */ jsx27(Circle3, { cx: KACHIZAKA.ball.at[0], cy: KACHIZAKA.ball.at[1], r: KACHIZAKA.ball.r, fill: KACHIZAKA.gold })
     ] }) }),
-    /* @__PURE__ */ jsx27(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs24(Svg9, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx27(Animated29.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs24(Svg9, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx27(Path7, { d: KACHIZAKA.node.d, fill: KACHIZAKA.gold, stroke: KACHIZAKA.gold, strokeWidth: KACHIZAKA.node.soften, strokeLinejoin: "round" }),
       /* @__PURE__ */ jsx27(Path7, { d: KACHIZAKA.node.light, fill: KACHIZAKA.highlight })
     ] }) })
@@ -2958,7 +2958,7 @@ var KRIZAKA = {
 import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function KrizakaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated29, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
   const id = useSvgId("kzm");
   const viewBox = size < 48 ? KRIZAKA.croppedViewBox : KRIZAKA.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -2984,8 +2984,8 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
       /* @__PURE__ */ jsx28(Circle4, { cx: 200, cy: 200, r: KRIZAKA.ring.r, stroke, strokeWidth: KRIZAKA.ring.width, opacity: 0.35, fill: "none" }),
       /* @__PURE__ */ jsx28(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: /* @__PURE__ */ jsx28(Path8, { d: KRIZAKA.shield, stroke: `url(#${id}i)`, strokeWidth: KRIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })
     ] }),
-    /* @__PURE__ */ jsx28(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx28(Svg10, { viewBox, style: layer, children: /* @__PURE__ */ jsx28(Circle4, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
-    /* @__PURE__ */ jsx28(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs25(Svg10, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx28(Animated29.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx28(Svg10, { viewBox, style: layer, children: /* @__PURE__ */ jsx28(Circle4, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
+    /* @__PURE__ */ jsx28(Animated29.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs25(Svg10, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx28(Defs5, { children: blue }),
       /* @__PURE__ */ jsxs25(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
         dot(KRIZAKA.node),
@@ -3034,7 +3034,7 @@ var ORAZAKA = {
 import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 function OrazakaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated29, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
   const id = useSvgId("ozm");
   const viewBox = size < 48 ? ORAZAKA.croppedViewBox : ORAZAKA.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -3050,11 +3050,11 @@ function OrazakaMark({ size = 48, animated = true, title, neutral }) {
       /* @__PURE__ */ jsx29(Circle5, { 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__ */ jsx29(Circle5, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
     ] }),
-    /* @__PURE__ */ jsx29(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs26(Svg11, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx29(Animated29.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs26(Svg11, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx29(Defs6, { children: gradient }),
       ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx29(Path9, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
     ] }) }),
-    /* @__PURE__ */ jsx29(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs26(Svg11, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx29(Animated29.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs26(Svg11, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx29(Defs6, { children: gradient }),
       /* @__PURE__ */ jsx29(Circle5, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
       /* @__PURE__ */ jsx29(Circle5, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
@@ -3189,7 +3189,7 @@ var YASAKIA = {
 import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
 function YasakiaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, YASAKIA.motion.spin * 1e3);
+  const { Animated: Animated29, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, YASAKIA.motion.spin * 1e3);
   const id = useSvgId("yzm");
   const viewBox = size < 48 ? YASAKIA.croppedViewBox : YASAKIA.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -3209,12 +3209,12 @@ function YasakiaMark({ size = 48, animated = true, title, neutral }) {
       /* @__PURE__ */ jsx31(Circle7, { cx: YASAKIA.bubble.cx, cy: YASAKIA.bubble.cy, r: YASAKIA.bubble.r, fill }),
       /* @__PURE__ */ jsx31(Path11, { d: YASAKIA.tails.join(" "), fill })
     ] }),
-    /* @__PURE__ */ jsx31(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs28(Svg13, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx31(Animated29.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs28(Svg13, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx31(Defs8, { children: gradient }),
       /* @__PURE__ */ jsx31(Circle7, { cx: YASAKIA.center, cy: YASAKIA.center, r: YASAKIA.orbit.r, stroke, strokeWidth: YASAKIA.orbit.width, strokeDasharray: YASAKIA.orbit.dash, opacity: 0.6, fill: "none" }),
       /* @__PURE__ */ jsx31(Circle7, { cx: YASAKIA.node.at[0], cy: YASAKIA.node.at[1], r: YASAKIA.node.r, fill })
     ] }) }),
-    /* @__PURE__ */ jsx31(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsx31(Svg13, { viewBox, style: layer, children: /* @__PURE__ */ jsx31(Path11, { d: YASAKIA.spark.d, fill: YASAKIA.highlight, stroke: YASAKIA.highlight, strokeWidth: YASAKIA.spark.soften, strokeLinejoin: "round" }) }) })
+    /* @__PURE__ */ jsx31(Animated29.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsx31(Svg13, { viewBox, style: layer, children: /* @__PURE__ */ jsx31(Path11, { d: YASAKIA.spark.d, fill: YASAKIA.highlight, stroke: YASAKIA.highlight, strokeWidth: YASAKIA.spark.soften, strokeLinejoin: "round" }) }) })
   ] });
 }
 var YazakiaMark = YasakiaMark;
@@ -3258,7 +3258,7 @@ var YOMIZAKA = {
 import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
 function YomizakaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, YOMIZAKA.motion.spin * 1e3);
+  const { Animated: Animated29, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, YOMIZAKA.motion.spin * 1e3);
   const id = useSvgId("ymm");
   const viewBox = size < 48 ? YOMIZAKA.croppedViewBox : YOMIZAKA.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -3278,12 +3278,12 @@ function YomizakaMark({ size = 48, animated = true, title, neutral }) {
       /* @__PURE__ */ jsx32(Path12, { d: YOMIZAKA.brow, stroke: fill, strokeWidth: YOMIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
       YOMIZAKA.lenses.map((l) => /* @__PURE__ */ jsx32(Circle8, { cx: l.cx, cy: l.cy, r: l.r, stroke: fill, strokeWidth: YOMIZAKA.stroke, fill: "none" }, l.cx))
     ] }),
-    /* @__PURE__ */ jsx32(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs29(Svg14, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx32(Animated29.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs29(Svg14, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx32(Defs9, { children: gradient }),
       /* @__PURE__ */ jsx32(Circle8, { cx: YOMIZAKA.center, cy: YOMIZAKA.center, r: YOMIZAKA.orbit.r, stroke, strokeWidth: YOMIZAKA.orbit.width, strokeDasharray: YOMIZAKA.orbit.dash, opacity: 0.6, fill: "none" }),
       /* @__PURE__ */ jsx32(Circle8, { cx: YOMIZAKA.node.at[0], cy: YOMIZAKA.node.at[1], r: YOMIZAKA.node.r, fill })
     ] }) }),
-    /* @__PURE__ */ jsx32(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs29(Svg14, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx32(Animated29.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs29(Svg14, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx32(Defs9, { children: gradient }),
       YOMIZAKA.pupils.map((p) => /* @__PURE__ */ jsxs29(React21.Fragment, { children: [
         /* @__PURE__ */ jsx32(Circle8, { cx: p.cx, cy: p.cy, r: p.r, fill }),
@@ -3326,7 +3326,7 @@ var YORORIS = {
 import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
 function YororisMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, YORORIS.motion.spin * 1e3);
+  const { Animated: Animated29, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, YORORIS.motion.spin * 1e3);
   const id = useSvgId("yrm");
   const viewBox = size < 48 ? YORORIS.croppedViewBox : YORORIS.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -3340,11 +3340,11 @@ function YororisMark({ size = 48, animated = true, title, neutral }) {
       /* @__PURE__ */ jsx33(Circle9, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.ring.r, stroke, strokeWidth: YORORIS.ring.width, opacity: 0.35, fill: "none" }),
       /* @__PURE__ */ jsx33(Path13, { d: YORORIS.hands, stroke: YORORIS.sage, strokeWidth: YORORIS.stroke, strokeLinecap: "round", fill: "none" })
     ] }),
-    /* @__PURE__ */ jsx33(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs30(Svg15, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx33(Animated29.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs30(Svg15, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx33(Circle9, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.orbit.r, stroke, strokeWidth: YORORIS.orbit.width, strokeDasharray: YORORIS.orbit.dash, opacity: 0.6, fill: "none" }),
       /* @__PURE__ */ jsx33(Circle9, { cx: YORORIS.node.at[0], cy: YORORIS.node.at[1], r: YORORIS.node.r, fill: YORORIS.sage })
     ] }) }),
-    /* @__PURE__ */ jsx33(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs30(Svg15, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx33(Animated29.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs30(Svg15, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx33(Circle9, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.r, fill: YORORIS.sand }),
       /* @__PURE__ */ jsx33(Circle9, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.inner, fill: YORORIS.highlight })
     ] }) })
@@ -5974,6 +5974,86 @@ function VerifiedBadge({ label, showLabel, size = 16, on = "surface" }) {
   ] });
 }
 var styles55 = StyleSheet55.create({ row: { flexDirection: "row", alignItems: "center", gap: 4 }, text: { fontWeight: "700" } });
+
+// src/native/waveform.tsx
+import * as React45 from "react";
+import { Animated as Animated28, AppState as AppState2, Easing as Easing14, StyleSheet as StyleSheet56, View as View64 } from "react-native";
+
+// src/waveform/bars.ts
+function resamplePeaks(peaks, count) {
+  if (peaks.length === 0) return Array.from({ length: count }, () => 0.15);
+  const out = Array.from({ length: count }, (_, i) => {
+    const from = Math.floor(i / count * peaks.length);
+    const to = Math.max(from + 1, Math.floor((i + 1) / count * peaks.length));
+    return Math.max(...peaks.slice(from, to).map(Math.abs));
+  });
+  const loudest = Math.max(...out, 1e-4);
+  return out.map((v) => Math.max(0.08, v / loudest));
+}
+
+// src/native/waveform.tsx
+import { jsx as jsx72 } from "react/jsx-runtime";
+var HEIGHT = { sm: 24, md: 40, lg: 64 };
+function Waveform({ peaks, bars = 32, size = "md", tone: tone3 = "accent", playing = false, label, style, ...props }) {
+  const { theme } = useTheme();
+  const reduce = useReducedMotion();
+  const [active, setActive] = React45.useState(() => AppState2.currentState === "active");
+  React45.useEffect(() => {
+    const subscription = AppState2.addEventListener("change", (state) => setActive(state === "active"));
+    return () => subscription.remove();
+  }, []);
+  const shape = React45.useMemo(() => resamplePeaks(peaks ?? [], bars), [peaks, bars]);
+  const values = React45.useMemo(() => shape.map(() => new Animated28.Value(1)), [shape]);
+  const moving = playing && !reduce && active;
+  React45.useEffect(() => {
+    if (!moving) {
+      values.forEach((value) => value.setValue(1));
+      return;
+    }
+    const loops = values.map((value, i) => {
+      value.setValue(i * 7 % 11 / 11);
+      const loop = Animated28.loop(
+        Animated28.sequence([
+          Animated28.timing(value, { toValue: 1, duration: 800, easing: Easing14.inOut(Easing14.ease), useNativeDriver: true }),
+          Animated28.timing(value, { toValue: 0, duration: 800, easing: Easing14.inOut(Easing14.ease), useNativeDriver: true })
+        ])
+      );
+      loop.start();
+      return loop;
+    });
+    return () => loops.forEach((loop) => loop.stop());
+  }, [moving, values]);
+  const named = label !== void 0;
+  const barColour = tone3 === "neutral" ? theme.borderStrong : theme.accent;
+  return /* @__PURE__ */ jsx72(
+    View64,
+    {
+      ...props,
+      accessible: named,
+      accessibilityRole: named ? "image" : void 0,
+      accessibilityLabel: label,
+      "aria-hidden": named ? void 0 : true,
+      importantForAccessibility: named ? "yes" : "no-hide-descendants",
+      style: [styles56.root, { height: HEIGHT[size] }, style],
+      children: shape.map((peak, i) => /* @__PURE__ */ jsx72(
+        Animated28.View,
+        {
+          testID: "waveform-bar",
+          style: [
+            styles56.bar,
+            { height: `${Math.round(peak * 100)}%`, backgroundColor: barColour },
+            { transform: [{ scaleY: values[i].interpolate({ inputRange: [0, 1], outputRange: [0.45, 1] }) }] }
+          ]
+        },
+        i
+      ))
+    }
+  );
+}
+var styles56 = StyleSheet56.create({
+  root: { width: "100%", flexDirection: "row", alignItems: "center", justifyContent: "center", columnGap: 2 },
+  bar: { flex: 1, minWidth: 2, borderRadius: 9999 }
+});
 export {
   ActionSheet,
   ActivityFeed,
@@ -6067,6 +6147,7 @@ export {
   TypingIndicator,
   UpdatePrompt,
   VerifiedBadge,
+  Waveform,
   WelcomeState,
   Wheel,
   WheelDivider,