@innovui/react-native 0.1.0 → 0.3.0

package/README.md

@@ -39,6 +39,7 @@ export function App() {
 - **Sem `asChild`:** gatilhos de Modal, Drawer, Popover, Menu e Tooltip recebem o elemento clonado com `onPress` (o Tooltip abre no `onLongPress`).
 - **Overlays:** Modal, Drawer, Popover, Menu, Select e Combobox usam o `Modal` nativo do RN. Sem blur no backdrop. Envolva o app em `ToastProvider` para usar `useToast()`.
 - **Upload:** o RN não tem `<input type="file">`. O `Upload` é controlado: o consumidor abre o seletor (ex. `expo-document-picker`) em `onPick` e passa a lista em `files`.
+- **AudioPlayer e VideoPlayer:** o React Native não tem player de mídia embutido, então são cascas controladas: você guarda o estado (por exemplo com `expo-audio` e `expo-video`) e o passa por props (`playing`, `position`, `duration`…), ligando `onPlayPause`, `onSeek` etc. ao player de verdade. A onda do AudioPlayer vem de `waveform` (ou da onda padrão): no native não há extração automática. Gallery, Lightbox e Carousel são completos.
 - **Grid e Table:** feitos com Views e flexbox (sem CSS grid). Breakpoints vêm de `useWindowDimensions`.
 - **Sombras no Android:** `shadow-*` não gera `elevation`.
 

package/dist/components/_shared/anchored-overlay.js

@@ -1,6 +1,7 @@
+import { useTransition } from "./use-transition.js";
 import { useCallback, useRef, useState } from "react";
-import { Modal, Pressable, View, useWindowDimensions } from "react-native";
-import { jsx } from "react/jsx-runtime";
+import { Animated, Modal, Pressable, View, useWindowDimensions } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_shared/anchored-overlay.tsx
 /**
 * Medição de um gatilho para ancorar um overlay (Popover, Menu, Select, Combobox, DatePicker,
@@ -35,17 +36,25 @@ function useAnchor() {
 	};
 }
 /** Overlay transparente, posicionado junto ao gatilho, dentro de um Modal nativo (fica acima de tudo). */
-function AnchoredOverlay({ visible, rect, onRequestClose, children, placement = "bottom", offset = 4, matchAnchorWidth = false, estimatedHeight = 320, dismissOnPressOutside = true, className, testID }) {
+function AnchoredOverlay({ visible, rect, onRequestClose, children, placement = "bottom", offset = 4, matchAnchorWidth = false, estimatedHeight = 320, align = "start", arrowClassName, dismissOnPressOutside = true, className, testID }) {
 	const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+	const { mounted, progress } = useTransition(visible, {
+		duration: 150,
+		exitDuration: 100
+	});
+	const [contentWidth, setContentWidth] = useState(0);
 	if (!rect) return null;
 	const spaceBelow = windowHeight - (rect.y + rect.height);
 	const spaceAbove = rect.y;
 	const goTop = placement === "top" ? spaceAbove >= estimatedHeight || spaceAbove >= spaceBelow : spaceBelow < estimatedHeight && spaceAbove > spaceBelow;
-	const left = Math.max(8, Math.min(rect.x, windowWidth - 8 - (matchAnchorWidth ? rect.width : 0)));
+	const anchorCenter = rect.x + rect.width / 2;
+	const left = align === "center" ? Math.max(8, Math.min(anchorCenter - contentWidth / 2, windowWidth - 8 - contentWidth)) : Math.max(8, Math.min(rect.x, windowWidth - 8 - (matchAnchorWidth ? rect.width : 0)));
+	const measured = align !== "center" || contentWidth > 0;
+	const arrowLeft = Math.max(8, Math.min(anchorCenter - left, Math.max(contentWidth, 16) - 8)) - 3;
 	return /* @__PURE__ */ jsx(Modal, {
 		transparent: true,
-		visible,
-		animationType: "fade",
+		visible: mounted,
+		animationType: "none",
 		onRequestClose,
 		statusBarTranslucent: true,
 		children: /* @__PURE__ */ jsx(Pressable, {
@@ -53,17 +62,33 @@ function AnchoredOverlay({ visible, rect, onRequestClose, children, placement =
 			className: "flex-1",
 			onPress: dismissOnPressOutside ? onRequestClose : void 0,
 			testID: testID ? `${testID}-backdrop` : void 0,
-			children: /* @__PURE__ */ jsx(View, {
-				testID,
-				className,
+			children: /* @__PURE__ */ jsxs(Animated.View, {
 				style: {
 					position: "absolute",
 					left,
 					...goTop ? { bottom: windowHeight - rect.y + offset } : { top: rect.y + rect.height + offset },
-					...matchAnchorWidth ? { width: rect.width } : null
+					...matchAnchorWidth ? { width: rect.width } : null,
+					opacity: measured ? progress : 0,
+					transform: [{ scale: progress.interpolate({
+						inputRange: [0, 1],
+						outputRange: [.96, 1]
+					}) }],
+					transformOrigin: goTop ? "bottom left" : "top left"
 				},
-				onStartShouldSetResponder: () => true,
-				children
+				onLayout: (e) => align === "center" && setContentWidth(e.nativeEvent.layout.width),
+				children: [/* @__PURE__ */ jsx(View, {
+					testID,
+					className,
+					onStartShouldSetResponder: () => true,
+					children
+				}), arrowClassName && /* @__PURE__ */ jsx(View, {
+					pointerEvents: "none",
+					className: `absolute size-1.5 rotate-45 ${arrowClassName}`,
+					style: {
+						left: arrowLeft,
+						...goTop ? { bottom: -3 } : { top: -3 }
+					}
+				})]
 			})
 		})
 	});

package/dist/components/_shared/anchored-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchored-overlay.js","names":[],"sources":["../../../src/components/_shared/anchored-overlay.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { type ReactNode, type RefObject, useCallback, useRef, useState } from 'react'\nimport { Modal, Pressable, useWindowDimensions, View } from 'react-native'\n\nexport type Placement = 'bottom' | 'top'\ntype Rect = { x: number; y: number; width: number; height: number }\n\n/**\n * Medição de um gatilho para ancorar um overlay (Popover, Menu, Select, Combobox, DatePicker,\n * Tooltip). `open()` mede o gatilho na janela e só então abre.\n *\n *   const { ref, rect, visible, open, close } = useAnchor()\n *   <View ref={ref} collapsable={false}> ...gatilho... </View>\n *   <AnchoredOverlay visible={visible} rect={rect} onRequestClose={close}> ... </AnchoredOverlay>\n */\nexport function useAnchor() {\n  const ref = useRef<View>(null)\n  const [rect, setRect] = useState<Rect | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  const open = useCallback(() => {\n    const node = ref.current\n    if (!node) return\n    node.measureInWindow((x, y, width, height) => {\n      setRect({ x, y, width, height })\n      setVisible(true)\n    })\n  }, [])\n  const close = useCallback(() => setVisible(false), [])\n\n  return { ref: ref as RefObject<View>, rect, visible, open, close }\n}\n\nexport type AnchoredOverlayProps = {\n  visible: boolean\n  rect: Rect | null\n  onRequestClose: () => void\n  children: ReactNode\n  /** Lado preferido; inverte se não couber. Padrão: `bottom`. */\n  placement?: Placement\n  /** Distância do gatilho. Padrão: 4. */\n  offset?: number\n  /** Largura do conteúdo: `anchor` iguala à do gatilho (Select, Combobox). Padrão: automática. */\n  matchAnchorWidth?: boolean\n  /** Altura máxima estimada do conteúdo, para decidir a inversão. Padrão: 320. */\n  estimatedHeight?: number\n  /** Toque fora fecha. Padrão: true. */\n  dismissOnPressOutside?: boolean\n  className?: string\n  testID?: string\n}\n\n/** Overlay transparente, posicionado junto ao gatilho, dentro de um Modal nativo (fica acima de tudo). */\nexport function AnchoredOverlay({\n  visible,\n  rect,\n  onRequestClose,\n  children,\n  placement = 'bottom',\n  offset = 4,\n  matchAnchorWidth = false,\n  estimatedHeight = 320,\n  dismissOnPressOutside = true,\n  className,\n  testID,\n}: AnchoredOverlayProps) {\n  const { width: windowWidth, height: windowHeight } = useWindowDimensions()\n  if (!rect) return null\n\n  const spaceBelow = windowHeight - (rect.y + rect.height)\n  const spaceAbove = rect.y\n  const wantsTop = placement === 'top'\n  const goTop = wantsTop\n    ? spaceAbove >= estimatedHeight || spaceAbove >= spaceBelow\n    : spaceBelow < estimatedHeight && spaceAbove > spaceBelow\n\n  const left = Math.max(8, Math.min(rect.x, windowWidth - 8 - (matchAnchorWidth ? rect.width : 0)))\n\n  return (\n    <Modal\n      transparent\n      visible={visible}\n      animationType=\"fade\"\n      onRequestClose={onRequestClose}\n      statusBarTranslucent\n    >\n      <Pressable\n        accessible={false}\n        className=\"flex-1\"\n        onPress={dismissOnPressOutside ? onRequestClose : undefined}\n        testID={testID ? `${testID}-backdrop` : undefined}\n      >\n        <View\n          testID={testID}\n          className={className}\n          style={{\n            position: 'absolute',\n            left,\n            ...(goTop\n              ? { bottom: windowHeight - rect.y + offset }\n              : { top: rect.y + rect.height + offset }),\n            ...(matchAnchorWidth ? { width: rect.width } : null),\n          }}\n          // Toques dentro do conteúdo não chegam ao backdrop.\n          onStartShouldSetResponder={() => true}\n        >\n          {children}\n        </View>\n      </Pressable>\n    </Modal>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,SAAgB,YAAY;CAC1B,MAAM,MAAM,OAAa,IAAI;CAC7B,MAAM,CAAC,MAAM,WAAW,SAAsB,IAAI;CAClD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAY5C,OAAO;EAAO;EAAwB;EAAM;EAAS,MAVxC,kBAAkB;GAC7B,MAAM,OAAO,IAAI;GACjB,IAAI,CAAC,MAAM;GACX,KAAK,iBAAiB,GAAG,GAAG,OAAO,WAAW;IAC5C,QAAQ;KAAE;KAAG;KAAG;KAAO;IAAO,CAAC;IAC/B,WAAW,IAAI;GACjB,CAAC;EACH,GAAG,CAAC,CAGoD;EAAG,OAF7C,kBAAkB,WAAW,KAAK,GAAG,CAAC,CAEW;CAAE;AACnE;;AAsBA,SAAgB,gBAAgB,EAC9B,SACA,MACA,gBACA,UACA,YAAY,UACZ,SAAS,GACT,mBAAmB,OACnB,kBAAkB,KAClB,wBAAwB,MACxB,WACA,UACuB;CACvB,MAAM,EAAE,OAAO,aAAa,QAAQ,iBAAiB,oBAAoB;CACzE,IAAI,CAAC,MAAM,OAAO;CAElB,MAAM,aAAa,gBAAgB,KAAK,IAAI,KAAK;CACjD,MAAM,aAAa,KAAK;CAExB,MAAM,QADW,cAAc,QAE3B,cAAc,mBAAmB,cAAc,aAC/C,aAAa,mBAAmB,aAAa;CAEjD,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,GAAG,cAAc,KAAK,mBAAmB,KAAK,QAAQ,EAAE,CAAC;CAEhG,OACE,oBAAC,OAAD;EACE,aAAA;EACS;EACT,eAAc;EACE;EAChB,sBAAA;EAEA,UAAA,oBAAC,WAAD;GACE,YAAY;GACZ,WAAU;GACV,SAAS,wBAAwB,iBAAiB,KAAA;GAClD,QAAQ,SAAS,GAAG,OAAO,aAAa,KAAA;GAExC,UAAA,oBAAC,MAAD;IACU;IACG;IACX,OAAO;KACL,UAAU;KACV;KACA,GAAI,QACA,EAAE,QAAQ,eAAe,KAAK,IAAI,OAAO,IACzC,EAAE,KAAK,KAAK,IAAI,KAAK,SAAS,OAAO;KACzC,GAAI,mBAAmB,EAAE,OAAO,KAAK,MAAM,IAAI;IACjD;IAEA,iCAAiC;IAEhC;GACG,CAAA;EACG,CAAA;CACN,CAAA;AAEX"}
+{"version":3,"file":"anchored-overlay.js","names":[],"sources":["../../../src/components/_shared/anchored-overlay.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { type ReactNode, type RefObject, useCallback, useRef, useState } from 'react'\nimport { Animated, Modal, Pressable, useWindowDimensions, View } from 'react-native'\nimport { useTransition } from './use-transition'\n\nexport type Placement = 'bottom' | 'top'\ntype Rect = { x: number; y: number; width: number; height: number }\n\n/**\n * Medição de um gatilho para ancorar um overlay (Popover, Menu, Select, Combobox, DatePicker,\n * Tooltip). `open()` mede o gatilho na janela e só então abre.\n *\n *   const { ref, rect, visible, open, close } = useAnchor()\n *   <View ref={ref} collapsable={false}> ...gatilho... </View>\n *   <AnchoredOverlay visible={visible} rect={rect} onRequestClose={close}> ... </AnchoredOverlay>\n */\nexport function useAnchor() {\n  const ref = useRef<View>(null)\n  const [rect, setRect] = useState<Rect | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  const open = useCallback(() => {\n    const node = ref.current\n    if (!node) return\n    node.measureInWindow((x, y, width, height) => {\n      setRect({ x, y, width, height })\n      setVisible(true)\n    })\n  }, [])\n  const close = useCallback(() => setVisible(false), [])\n\n  return { ref: ref as RefObject<View>, rect, visible, open, close }\n}\n\nexport type AnchoredOverlayProps = {\n  visible: boolean\n  rect: Rect | null\n  onRequestClose: () => void\n  children: ReactNode\n  /** Lado preferido; inverte se não couber. Padrão: `bottom`. */\n  placement?: Placement\n  /** Distância do gatilho. Padrão: 4. */\n  offset?: number\n  /** Largura do conteúdo: `anchor` iguala à do gatilho (Select, Combobox). Padrão: automática. */\n  matchAnchorWidth?: boolean\n  /** Altura máxima estimada do conteúdo, para decidir a inversão. Padrão: 320. */\n  estimatedHeight?: number\n  /** Alinhamento com o gatilho: `start` (borda esquerda) ou `center` (centrado, como o Tooltip). */\n  align?: 'start' | 'center'\n  /** Seta apontando para o gatilho (classes do desenho, ex.: a cor do fundo do conteúdo). */\n  arrowClassName?: string\n  /** Toque fora fecha. Padrão: true. */\n  dismissOnPressOutside?: boolean\n  className?: string\n  testID?: string\n}\n\n/** Overlay transparente, posicionado junto ao gatilho, dentro de um Modal nativo (fica acima de tudo). */\nexport function AnchoredOverlay({\n  visible,\n  rect,\n  onRequestClose,\n  children,\n  placement = 'bottom',\n  offset = 4,\n  matchAnchorWidth = false,\n  estimatedHeight = 320,\n  align = 'start',\n  arrowClassName,\n  dismissOnPressOutside = true,\n  className,\n  testID,\n}: AnchoredOverlayProps) {\n  const { width: windowWidth, height: windowHeight } = useWindowDimensions()\n  // Como no web: fade com zoom de 96% a partir do gatilho (o `Modal` nativo só fecha depois da saída)\n  const { mounted, progress } = useTransition(visible, { duration: 150, exitDuration: 100 })\n  // centrado precisa da largura do conteúdo: mede e só então mostra\n  const [contentWidth, setContentWidth] = useState(0)\n  if (!rect) return null\n\n  const spaceBelow = windowHeight - (rect.y + rect.height)\n  const spaceAbove = rect.y\n  const wantsTop = placement === 'top'\n  const goTop = wantsTop\n    ? spaceAbove >= estimatedHeight || spaceAbove >= spaceBelow\n    : spaceBelow < estimatedHeight && spaceAbove > spaceBelow\n\n  const anchorCenter = rect.x + rect.width / 2\n  const left =\n    align === 'center'\n      ? Math.max(8, Math.min(anchorCenter - contentWidth / 2, windowWidth - 8 - contentWidth))\n      : Math.max(8, Math.min(rect.x, windowWidth - 8 - (matchAnchorWidth ? rect.width : 0)))\n  const measured = align !== 'center' || contentWidth > 0\n  // seta de 6px girada 45° (um losango de ~8px de largura e ~4px para fora), sobre a borda do conteúdo\n  const arrowLeft = Math.max(8, Math.min(anchorCenter - left, Math.max(contentWidth, 16) - 8)) - 3\n\n  return (\n    <Modal\n      transparent\n      visible={mounted}\n      animationType=\"none\"\n      onRequestClose={onRequestClose}\n      statusBarTranslucent\n    >\n      <Pressable\n        accessible={false}\n        className=\"flex-1\"\n        onPress={dismissOnPressOutside ? onRequestClose : undefined}\n        testID={testID ? `${testID}-backdrop` : undefined}\n      >\n        <Animated.View\n          style={{\n            position: 'absolute',\n            left,\n            ...(goTop\n              ? { bottom: windowHeight - rect.y + offset }\n              : { top: rect.y + rect.height + offset }),\n            ...(matchAnchorWidth ? { width: rect.width } : null),\n            opacity: measured ? progress : 0,\n            transform: [\n              { scale: progress.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) },\n            ],\n            transformOrigin: goTop ? 'bottom left' : 'top left',\n          }}\n          onLayout={(e) => align === 'center' && setContentWidth(e.nativeEvent.layout.width)}\n        >\n          <View\n            testID={testID}\n            className={className}\n            // Toques dentro do conteúdo não chegam ao backdrop.\n            onStartShouldSetResponder={() => true}\n          >\n            {children}\n          </View>\n          {arrowClassName && (\n            <View\n              pointerEvents=\"none\"\n              className={`absolute size-1.5 rotate-45 ${arrowClassName}`}\n              style={{ left: arrowLeft, ...(goTop ? { bottom: -3 } : { top: -3 }) }}\n            />\n          )}\n        </Animated.View>\n      </Pressable>\n    </Modal>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,YAAY;CAC1B,MAAM,MAAM,OAAa,IAAI;CAC7B,MAAM,CAAC,MAAM,WAAW,SAAsB,IAAI;CAClD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAY5C,OAAO;EAAO;EAAwB;EAAM;EAAS,MAVxC,kBAAkB;GAC7B,MAAM,OAAO,IAAI;GACjB,IAAI,CAAC,MAAM;GACX,KAAK,iBAAiB,GAAG,GAAG,OAAO,WAAW;IAC5C,QAAQ;KAAE;KAAG;KAAG;KAAO;IAAO,CAAC;IAC/B,WAAW,IAAI;GACjB,CAAC;EACH,GAAG,CAAC,CAGoD;EAAG,OAF7C,kBAAkB,WAAW,KAAK,GAAG,CAAC,CAEW;CAAE;AACnE;;AA0BA,SAAgB,gBAAgB,EAC9B,SACA,MACA,gBACA,UACA,YAAY,UACZ,SAAS,GACT,mBAAmB,OACnB,kBAAkB,KAClB,QAAQ,SACR,gBACA,wBAAwB,MACxB,WACA,UACuB;CACvB,MAAM,EAAE,OAAO,aAAa,QAAQ,iBAAiB,oBAAoB;CAEzE,MAAM,EAAE,SAAS,aAAa,cAAc,SAAS;EAAE,UAAU;EAAK,cAAc;CAAI,CAAC;CAEzF,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC;CAClD,IAAI,CAAC,MAAM,OAAO;CAElB,MAAM,aAAa,gBAAgB,KAAK,IAAI,KAAK;CACjD,MAAM,aAAa,KAAK;CAExB,MAAM,QADW,cAAc,QAE3B,cAAc,mBAAmB,cAAc,aAC/C,aAAa,mBAAmB,aAAa;CAEjD,MAAM,eAAe,KAAK,IAAI,KAAK,QAAQ;CAC3C,MAAM,OACJ,UAAU,WACN,KAAK,IAAI,GAAG,KAAK,IAAI,eAAe,eAAe,GAAG,cAAc,IAAI,YAAY,CAAC,IACrF,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,GAAG,cAAc,KAAK,mBAAmB,KAAK,QAAQ,EAAE,CAAC;CACzF,MAAM,WAAW,UAAU,YAAY,eAAe;CAEtD,MAAM,YAAY,KAAK,IAAI,GAAG,KAAK,IAAI,eAAe,MAAM,KAAK,IAAI,cAAc,EAAE,IAAI,CAAC,CAAC,IAAI;CAE/F,OACE,oBAAC,OAAD;EACE,aAAA;EACA,SAAS;EACT,eAAc;EACE;EAChB,sBAAA;EAEA,UAAA,oBAAC,WAAD;GACE,YAAY;GACZ,WAAU;GACV,SAAS,wBAAwB,iBAAiB,KAAA;GAClD,QAAQ,SAAS,GAAG,OAAO,aAAa,KAAA;GAExC,UAAA,qBAAC,SAAS,MAAV;IACE,OAAO;KACL,UAAU;KACV;KACA,GAAI,QACA,EAAE,QAAQ,eAAe,KAAK,IAAI,OAAO,IACzC,EAAE,KAAK,KAAK,IAAI,KAAK,SAAS,OAAO;KACzC,GAAI,mBAAmB,EAAE,OAAO,KAAK,MAAM,IAAI;KAC/C,SAAS,WAAW,WAAW;KAC/B,WAAW,CACT,EAAE,OAAO,SAAS,YAAY;MAAE,YAAY,CAAC,GAAG,CAAC;MAAG,aAAa,CAAC,KAAM,CAAC;KAAE,CAAC,EAAE,CAChF;KACA,iBAAiB,QAAQ,gBAAgB;IAC3C;IACA,WAAW,MAAM,UAAU,YAAY,gBAAgB,EAAE,YAAY,OAAO,KAAK;IAdnF,UAAA,CAgBE,oBAAC,MAAD;KACU;KACG;KAEX,iCAAiC;KAEhC;IACG,CAAA,GACL,kBACC,oBAAC,MAAD;KACE,eAAc;KACd,WAAW,+BAA+B;KAC1C,OAAO;MAAE,MAAM;MAAW,GAAI,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAE,KAAK,GAAG;KAAG;IACrE,CAAA,CAEU;;EACN,CAAA;CACN,CAAA;AAEX"}

package/dist/components/_shared/media-icons.js

@@ -0,0 +1,125 @@
+import Svg, { Path, Rect } from "react-native-svg";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_shared/media-icons.tsx
+const strokeProps = {
+	fill: "none",
+	strokeWidth: 2.4,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+const playPath = "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z";
+const speakerPath = "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z";
+function Icon({ color, size = 20, children, ...props }) {
+	return /* @__PURE__ */ jsx(Svg, {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		stroke: color,
+		...strokeProps,
+		...props,
+		children
+	});
+}
+/** Triângulo de reproduzir; `filled` preenche com `color` (botão central do vídeo). */
+function PlayIcon({ filled, color, ...props }) {
+	return /* @__PURE__ */ jsx(Icon, {
+		color,
+		fill: filled ? color : "none",
+		...props,
+		children: /* @__PURE__ */ jsx(Path, { d: playPath })
+	});
+}
+function PauseIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx(Rect, {
+			x: "14",
+			y: "3",
+			width: "5",
+			height: "18",
+			rx: "1"
+		}), /* @__PURE__ */ jsx(Rect, {
+			x: "5",
+			y: "3",
+			width: "5",
+			height: "18",
+			rx: "1"
+		})]
+	});
+}
+function VolumeIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Path, { d: speakerPath }),
+			/* @__PURE__ */ jsx(Path, { d: "M16 9a5 5 0 0 1 0 6" }),
+			/* @__PURE__ */ jsx(Path, { d: "M19.364 18.364a9 9 0 0 0 0-12.728" })
+		]
+	});
+}
+function VolumeMutedIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Path, { d: speakerPath }),
+			/* @__PURE__ */ jsx(Path, { d: "M22 9l-6 6" }),
+			/* @__PURE__ */ jsx(Path, { d: "M16 9l6 6" })
+		]
+	});
+}
+function MaximizeIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Path, { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+			/* @__PURE__ */ jsx(Path, { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+			/* @__PURE__ */ jsx(Path, { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+			/* @__PURE__ */ jsx(Path, { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+		]
+	});
+}
+function MinimizeIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Path, { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
+			/* @__PURE__ */ jsx(Path, { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
+			/* @__PURE__ */ jsx(Path, { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
+			/* @__PURE__ */ jsx(Path, { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
+		]
+	});
+}
+/** Quatro setas para fora: o ícone de ampliar sobre a miniatura. */
+function ExpandIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Path, { d: "m15 15 6 6" }),
+			/* @__PURE__ */ jsx(Path, { d: "m15 9 6-6" }),
+			/* @__PURE__ */ jsx(Path, { d: "M21 16v5h-5" }),
+			/* @__PURE__ */ jsx(Path, { d: "M21 8V3h-5" }),
+			/* @__PURE__ */ jsx(Path, { d: "M3 16v5h5" }),
+			/* @__PURE__ */ jsx(Path, { d: "m3 21 6-6" }),
+			/* @__PURE__ */ jsx(Path, { d: "M3 8V3h5" }),
+			/* @__PURE__ */ jsx(Path, { d: "M9 9 3 3" })
+		]
+	});
+}
+/** ‹ de 20px (setas do carrossel e do lightbox). */
+function PreviousIcon(props) {
+	return /* @__PURE__ */ jsx(Icon, {
+		...props,
+		children: /* @__PURE__ */ jsx(Path, { d: "m15 18-6-6 6-6" })
+	});
+}
+/** › de 20px (setas do carrossel e do lightbox). */
+function NextIcon(props) {
+	return /* @__PURE__ */ jsx(Icon, {
+		...props,
+		children: /* @__PURE__ */ jsx(Path, { d: "m9 18 6-6-6-6" })
+	});
+}
+//#endregion
+export { ExpandIcon, MaximizeIcon, MinimizeIcon, NextIcon, PauseIcon, PlayIcon, PreviousIcon, VolumeIcon, VolumeMutedIcon };
+
+//# sourceMappingURL=media-icons.js.map

package/dist/components/_shared/media-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-icons.js","names":[],"sources":["../../../src/components/_shared/media-icons.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport Svg, { Path, Rect, type SvgProps } from 'react-native-svg'\n\ntype IconProps = Omit<SvgProps, 'stroke' | 'fill' | 'width' | 'height'> & {\n  color?: string\n  /** Lado em px. Padrão: 20. */\n  size?: number\n}\n\n// Ícones do Lucide (viewBox 24); com traço 2.4 saem com 2px aos 20px, como no Figma.\nconst strokeProps = {\n  fill: 'none',\n  strokeWidth: 2.4,\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round',\n} as const\n\nconst playPath =\n  'M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'\nconst speakerPath =\n  'M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z'\n\nfunction Icon({\n  color,\n  size = 20,\n  children,\n  ...props\n}: IconProps & { fill?: string; children: React.ReactNode }) {\n  return (\n    <Svg width={size} height={size} viewBox=\"0 0 24 24\" stroke={color} {...strokeProps} {...props}>\n      {children}\n    </Svg>\n  )\n}\n\n/** Triângulo de reproduzir; `filled` preenche com `color` (botão central do vídeo). */\nexport function PlayIcon({ filled, color, ...props }: IconProps & { filled?: boolean }) {\n  return (\n    <Icon color={color} fill={filled ? color : 'none'} {...props}>\n      <Path d={playPath} />\n    </Icon>\n  )\n}\n\nexport function PauseIcon(props: IconProps) {\n  return (\n    <Icon {...props}>\n      <Rect x=\"14\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" />\n      <Rect x=\"5\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" />\n    </Icon>\n  )\n}\n\nexport function VolumeIcon(props: IconProps) {\n  return (\n    <Icon {...props}>\n      <Path d={speakerPath} />\n      <Path d=\"M16 9a5 5 0 0 1 0 6\" />\n      <Path d=\"M19.364 18.364a9 9 0 0 0 0-12.728\" />\n    </Icon>\n  )\n}\n\nexport function VolumeMutedIcon(props: IconProps) {\n  return (\n    <Icon {...props}>\n      <Path d={speakerPath} />\n      <Path d=\"M22 9l-6 6\" />\n      <Path d=\"M16 9l6 6\" />\n    </Icon>\n  )\n}\n\nexport function MaximizeIcon(props: IconProps) {\n  return (\n    <Icon {...props}>\n      <Path d=\"M8 3H5a2 2 0 0 0-2 2v3\" />\n      <Path d=\"M21 8V5a2 2 0 0 0-2-2h-3\" />\n      <Path d=\"M3 16v3a2 2 0 0 0 2 2h3\" />\n      <Path d=\"M16 21h3a2 2 0 0 0 2-2v-3\" />\n    </Icon>\n  )\n}\n\nexport function MinimizeIcon(props: IconProps) {\n  return (\n    <Icon {...props}>\n      <Path d=\"M8 3v3a2 2 0 0 1-2 2H3\" />\n      <Path d=\"M21 8h-3a2 2 0 0 1-2-2V3\" />\n      <Path d=\"M3 16h3a2 2 0 0 1 2 2v3\" />\n      <Path d=\"M16 21v-3a2 2 0 0 1 2-2h3\" />\n    </Icon>\n  )\n}\n\n/** Quatro setas para fora: o ícone de ampliar sobre a miniatura. */\nexport function ExpandIcon(props: IconProps) {\n  return (\n    <Icon {...props}>\n      <Path d=\"m15 15 6 6\" />\n      <Path d=\"m15 9 6-6\" />\n      <Path d=\"M21 16v5h-5\" />\n      <Path d=\"M21 8V3h-5\" />\n      <Path d=\"M3 16v5h5\" />\n      <Path d=\"m3 21 6-6\" />\n      <Path d=\"M3 8V3h5\" />\n      <Path d=\"M9 9 3 3\" />\n    </Icon>\n  )\n}\n\n/** ‹ de 20px (setas do carrossel e do lightbox). */\nexport function PreviousIcon(props: IconProps) {\n  return (\n    <Icon {...props}>\n      <Path d=\"m15 18-6-6 6-6\" />\n    </Icon>\n  )\n}\n\n/** › de 20px (setas do carrossel e do lightbox). */\nexport function NextIcon(props: IconProps) {\n  return (\n    <Icon {...props}>\n      <Path d=\"m9 18 6-6-6-6\" />\n    </Icon>\n  )\n}\n"],"mappings":"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"}

package/dist/components/_shared/media.js

@@ -0,0 +1,114 @@
+import { useState } from "react";
+//#region src/components/_shared/media.ts
+/** `83` → `1:23`; com hora, `3725` → `1:02:05`. Valores inválidos viram `0:00`. */
+function formatTime(seconds) {
+	const total = Number.isFinite(seconds) ? Math.max(0, Math.floor(seconds)) : 0;
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const secs = String(total % 60).padStart(2, "0");
+	return hours ? `${hours}:${String(minutes).padStart(2, "0")}:${secs}` : `${minutes}:${secs}`;
+}
+/** Alturas das barras do Figma (6–34px), como picos de 0 a 1. É a onda padrão do AudioPlayer. */
+const DEFAULT_WAVEFORM = [
+	6,
+	18,
+	34,
+	20,
+	12,
+	22,
+	16,
+	26,
+	20,
+	14,
+	28,
+	18,
+	34,
+	22,
+	16,
+	24,
+	20,
+	14,
+	18,
+	26,
+	16,
+	30,
+	22,
+	12,
+	34,
+	18,
+	26,
+	16,
+	10,
+	22,
+	14,
+	20,
+	24,
+	16,
+	28,
+	12,
+	34,
+	18,
+	26,
+	16,
+	10,
+	20,
+	14,
+	18,
+	24,
+	30,
+	22,
+	28,
+	34,
+	16,
+	24,
+	18
+].map((height) => (height - 6) / 28);
+/** Leva uma lista de picos para `bars` barras (pega o maior de cada trecho, ou repete se faltar). */
+function resamplePeaks(peaks, bars) {
+	if (peaks.length === bars || peaks.length === 0) return peaks;
+	return Array.from({ length: bars }, (_, i) => {
+		const start = Math.floor(i * peaks.length / bars);
+		const end = Math.max(Math.floor((i + 1) * peaks.length / bars), start + 1);
+		return Math.max(...peaks.slice(start, end));
+	});
+}
+const SEEK_STEP = 5;
+/**
+* Props de uma barra de posição: tocar e arrastar posicionam, e o leitor de tela ajusta de 5 em
+* 5 segundos (ações increment/decrement, como no Slider). Espalhe numa `View` cujos filhos têm
+* `pointerEvents="none"`, para o `locationX` ser sempre relativo a ela.
+*/
+function useSeek({ position, duration, label, onSeek }) {
+	const [width, setWidth] = useState(0);
+	const clamp = (value) => Math.min(Math.max(value, 0), duration);
+	const at = (x) => width ? clamp(x / width * duration) : 0;
+	return {
+		width,
+		props: {
+			onLayout: (event) => setWidth(event.nativeEvent.layout.width),
+			onStartShouldSetResponder: () => duration > 0,
+			onMoveShouldSetResponder: () => duration > 0,
+			onResponderTerminationRequest: () => false,
+			onResponderGrant: (event) => onSeek?.(at(event.nativeEvent.locationX)),
+			onResponderMove: (event) => onSeek?.(at(event.nativeEvent.locationX)),
+			accessible: true,
+			accessibilityRole: "adjustable",
+			accessibilityLabel: label,
+			accessibilityValue: {
+				min: 0,
+				max: Math.round(duration),
+				now: Math.round(position),
+				text: `${formatTime(position)} de ${formatTime(duration)}`
+			},
+			accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+			onAccessibilityAction: (event) => {
+				const direction = event.nativeEvent.actionName === "increment" ? 1 : -1;
+				onSeek?.(clamp(position + direction * SEEK_STEP));
+			}
+		}
+	};
+}
+//#endregion
+export { DEFAULT_WAVEFORM, formatTime, resamplePeaks, useSeek };
+
+//# sourceMappingURL=media.js.map

package/dist/components/_shared/media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.js","names":[],"sources":["../../../src/components/_shared/media.ts"],"sourcesContent":["import { useState } from 'react'\nimport type {\n  AccessibilityActionEvent,\n  GestureResponderEvent,\n  LayoutChangeEvent,\n} from 'react-native'\n\n/** `83` → `1:23`; com hora, `3725` → `1:02:05`. Valores inválidos viram `0:00`. */\nexport function formatTime(seconds: number) {\n  const total = Number.isFinite(seconds) ? Math.max(0, Math.floor(seconds)) : 0\n  const hours = Math.floor(total / 3600)\n  const minutes = Math.floor((total % 3600) / 60)\n  const secs = String(total % 60).padStart(2, '0')\n  return hours ? `${hours}:${String(minutes).padStart(2, '0')}:${secs}` : `${minutes}:${secs}`\n}\n\n/** Alturas das barras do Figma (6–34px), como picos de 0 a 1. É a onda padrão do AudioPlayer. */\nexport const DEFAULT_WAVEFORM = [\n  6, 18, 34, 20, 12, 22, 16, 26, 20, 14, 28, 18, 34, 22, 16, 24, 20, 14, 18, 26, 16, 30, 22, 12, 34,\n  18, 26, 16, 10, 22, 14, 20, 24, 16, 28, 12, 34, 18, 26, 16, 10, 20, 14, 18, 24, 30, 22, 28, 34,\n  16, 24, 18,\n].map((height) => (height - 6) / 28)\n\n/** Leva uma lista de picos para `bars` barras (pega o maior de cada trecho, ou repete se faltar). */\nexport function resamplePeaks(peaks: number[], bars: number) {\n  if (peaks.length === bars || peaks.length === 0) return peaks\n  return Array.from({ length: bars }, (_, i) => {\n    const start = Math.floor((i * peaks.length) / bars)\n    const end = Math.max(Math.floor(((i + 1) * peaks.length) / bars), start + 1)\n    return Math.max(...peaks.slice(start, end))\n  })\n}\n\nconst SEEK_STEP = 5\n\n/**\n * Props de uma barra de posição: tocar e arrastar posicionam, e o leitor de tela ajusta de 5 em\n * 5 segundos (ações increment/decrement, como no Slider). Espalhe numa `View` cujos filhos têm\n * `pointerEvents=\"none\"`, para o `locationX` ser sempre relativo a ela.\n */\nexport function useSeek({\n  position,\n  duration,\n  label,\n  onSeek,\n}: {\n  position: number\n  duration: number\n  label: string\n  onSeek?: (seconds: number) => void\n}) {\n  const [width, setWidth] = useState(0)\n  const clamp = (value: number) => Math.min(Math.max(value, 0), duration)\n  const at = (x: number) => (width ? clamp((x / width) * duration) : 0)\n\n  return {\n    width,\n    props: {\n      onLayout: (event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width),\n      onStartShouldSetResponder: () => duration > 0,\n      onMoveShouldSetResponder: () => duration > 0,\n      onResponderTerminationRequest: () => false,\n      onResponderGrant: (event: GestureResponderEvent) => onSeek?.(at(event.nativeEvent.locationX)),\n      onResponderMove: (event: GestureResponderEvent) => onSeek?.(at(event.nativeEvent.locationX)),\n      accessible: true,\n      accessibilityRole: 'adjustable' as const,\n      accessibilityLabel: label,\n      accessibilityValue: {\n        min: 0,\n        max: Math.round(duration),\n        now: Math.round(position),\n        text: `${formatTime(position)} de ${formatTime(duration)}`,\n      },\n      accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }],\n      onAccessibilityAction: (event: AccessibilityActionEvent) => {\n        const direction = event.nativeEvent.actionName === 'increment' ? 1 : -1\n        onSeek?.(clamp(position + direction * SEEK_STEP))\n      },\n    },\n  }\n}\n"],"mappings":";;;AAQA,SAAgB,WAAW,SAAiB;CAC1C,MAAM,QAAQ,OAAO,SAAS,OAAO,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,CAAC,IAAI;CAC5E,MAAM,QAAQ,KAAK,MAAM,QAAQ,IAAI;CACrC,MAAM,UAAU,KAAK,MAAO,QAAQ,OAAQ,EAAE;CAC9C,MAAM,OAAO,OAAO,QAAQ,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG;CAC/C,OAAO,QAAQ,GAAG,MAAM,GAAG,OAAO,OAAO,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,SAAS,GAAG,QAAQ,GAAG;AACxF;;AAGA,MAAa,mBAAmB;CAC9B;CAAG;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAC/F;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAAI;CAC5F;CAAI;CAAI;AACV,CAAC,CAAC,KAAK,YAAY,SAAS,KAAK,EAAE;;AAGnC,SAAgB,cAAc,OAAiB,MAAc;CAC3D,IAAI,MAAM,WAAW,QAAQ,MAAM,WAAW,GAAG,OAAO;CACxD,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,MAAM;EAC5C,MAAM,QAAQ,KAAK,MAAO,IAAI,MAAM,SAAU,IAAI;EAClD,MAAM,MAAM,KAAK,IAAI,KAAK,OAAQ,IAAI,KAAK,MAAM,SAAU,IAAI,GAAG,QAAQ,CAAC;EAC3E,OAAO,KAAK,IAAI,GAAG,MAAM,MAAM,OAAO,GAAG,CAAC;CAC5C,CAAC;AACH;AAEA,MAAM,YAAY;;;;;;AAOlB,SAAgB,QAAQ,EACtB,UACA,UACA,OACA,UAMC;CACD,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CACpC,MAAM,SAAS,UAAkB,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,QAAQ;CACtE,MAAM,MAAM,MAAe,QAAQ,MAAO,IAAI,QAAS,QAAQ,IAAI;CAEnE,OAAO;EACL;EACA,OAAO;GACL,WAAW,UAA6B,SAAS,MAAM,YAAY,OAAO,KAAK;GAC/E,iCAAiC,WAAW;GAC5C,gCAAgC,WAAW;GAC3C,qCAAqC;GACrC,mBAAmB,UAAiC,SAAS,GAAG,MAAM,YAAY,SAAS,CAAC;GAC5F,kBAAkB,UAAiC,SAAS,GAAG,MAAM,YAAY,SAAS,CAAC;GAC3F,YAAY;GACZ,mBAAmB;GACnB,oBAAoB;GACpB,oBAAoB;IAClB,KAAK;IACL,KAAK,KAAK,MAAM,QAAQ;IACxB,KAAK,KAAK,MAAM,QAAQ;IACxB,MAAM,GAAG,WAAW,QAAQ,EAAE,MAAM,WAAW,QAAQ;GACzD;GACA,sBAAsB,CAAC,EAAE,MAAM,YAAY,GAAG,EAAE,MAAM,YAAY,CAAC;GACnE,wBAAwB,UAAoC;IAC1D,MAAM,YAAY,MAAM,YAAY,eAAe,cAAc,IAAI;IACrE,SAAS,MAAM,WAAW,YAAY,SAAS,CAAC;GAClD;EACF;CACF;AACF"}

package/dist/components/_shared/sliding-indicator.js

@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AccessibilityInfo, Animated, Easing, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/_shared/sliding-indicator.tsx
+/** Posições medidas (`onLayout`) dos itens de um grupo, por chave. */
+function useItemLayouts() {
+	const [layouts, setLayouts] = useState({});
+	return {
+		layouts,
+		setLayout: useCallback((key, rect) => {
+			setLayouts((current) => {
+				const before = current[key];
+				return before && before.x === rect.x && before.y === rect.y && before.width === rect.width && before.height === rect.height ? current : {
+					...current,
+					[key]: rect
+				};
+			});
+		}, [])
+	};
+}
+/** "Reduzir movimento" do sistema: o indicador pula direto em vez de deslizar. */
+function useReducedMotion() {
+	const [reduced, setReduced] = useState(false);
+	useEffect(() => {
+		let alive = true;
+		AccessibilityInfo.isReduceMotionEnabled?.()?.then((value) => alive && value && setReduced(true));
+		const subscription = AccessibilityInfo.addEventListener?.("reduceMotionChanged", setReduced);
+		return () => {
+			alive = false;
+			subscription?.remove?.();
+		};
+	}, []);
+	return reduced;
+}
+/**
+* Indicador único que desliza e se redimensiona até `target` (o sublinhado das Tabs, o pill do
+* SegmentedControl). Fica no contêiner dos itens, com posição absoluta, e usa as medidas
+* `onLayout` dos itens. Na primeira medição aparece direto no lugar, sem deslizar do canto.
+* A animação é do lado do JS (posição e tamanho são `layout`, que o driver nativo não anima).
+*/
+function SlidingIndicator({ target, className }) {
+	const reduced = useReducedMotion();
+	const values = useRef(null);
+	if (target && !values.current) values.current = {
+		left: new Animated.Value(target.x),
+		top: new Animated.Value(target.y),
+		width: new Animated.Value(target.width),
+		height: new Animated.Value(target.height)
+	};
+	const x = target?.x;
+	const y = target?.y;
+	const width = target?.width;
+	const height = target?.height;
+	useEffect(() => {
+		const current = values.current;
+		if (!current || x === void 0 || y === void 0 || !width || !height) return;
+		const to = {
+			left: x,
+			top: y,
+			width,
+			height
+		};
+		if (reduced) {
+			for (const key of Object.keys(to)) current[key].setValue(to[key]);
+			return;
+		}
+		const animation = Animated.parallel(Object.keys(to).map((key) => Animated.timing(current[key], {
+			toValue: to[key],
+			duration: 200,
+			easing: Easing.out(Easing.cubic),
+			useNativeDriver: false
+		})));
+		animation.start();
+		return () => animation.stop();
+	}, [
+		x,
+		y,
+		width,
+		height,
+		reduced
+	]);
+	if (!target || !values.current) return null;
+	return /* @__PURE__ */ jsx(Animated.View, {
+		pointerEvents: "none",
+		style: {
+			position: "absolute",
+			...values.current
+		},
+		children: /* @__PURE__ */ jsx(View, {
+			className,
+			style: { flex: 1 }
+		})
+	});
+}
+//#endregion
+export { SlidingIndicator, useItemLayouts, useReducedMotion };
+
+//# sourceMappingURL=sliding-indicator.js.map

package/dist/components/_shared/sliding-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sliding-indicator.js","names":[],"sources":["../../../src/components/_shared/sliding-indicator.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { AccessibilityInfo, Animated, Easing, View } from 'react-native'\n\nexport type Rect = { x: number; y: number; width: number; height: number }\n\n/** Posições medidas (`onLayout`) dos itens de um grupo, por chave. */\nexport function useItemLayouts() {\n  const [layouts, setLayouts] = useState<Record<string, Rect>>({})\n  const setLayout = useCallback((key: string, rect: Rect) => {\n    setLayouts((current) => {\n      const before = current[key]\n      const same =\n        before &&\n        before.x === rect.x &&\n        before.y === rect.y &&\n        before.width === rect.width &&\n        before.height === rect.height\n      return same ? current : { ...current, [key]: rect }\n    })\n  }, [])\n  return { layouts, setLayout }\n}\n\n/** \"Reduzir movimento\" do sistema: o indicador pula direto em vez de deslizar. */\nexport function useReducedMotion() {\n  const [reduced, setReduced] = useState(false)\n  useEffect(() => {\n    let alive = true\n    // só ligar quando o sistema pede (o padrão é `false`): evita um render à toa em todo overlay\n    AccessibilityInfo.isReduceMotionEnabled?.()?.then((value) => alive && value && setReduced(true))\n    const subscription = AccessibilityInfo.addEventListener?.('reduceMotionChanged', setReduced)\n    return () => {\n      alive = false\n      subscription?.remove?.()\n    }\n  }, [])\n  return reduced\n}\n\n/**\n * Indicador único que desliza e se redimensiona até `target` (o sublinhado das Tabs, o pill do\n * SegmentedControl). Fica no contêiner dos itens, com posição absoluta, e usa as medidas\n * `onLayout` dos itens. Na primeira medição aparece direto no lugar, sem deslizar do canto.\n * A animação é do lado do JS (posição e tamanho são `layout`, que o driver nativo não anima).\n */\nexport function SlidingIndicator({\n  target,\n  className,\n}: {\n  target: Rect | undefined\n  /** Classes do desenho (cor, raio, sombra) do indicador, que preenche o retângulo. */\n  className?: string\n}) {\n  const reduced = useReducedMotion()\n  const values = useRef<Record<'left' | 'top' | 'width' | 'height', Animated.Value> | null>(null)\n  if (target && !values.current) {\n    values.current = {\n      left: new Animated.Value(target.x),\n      top: new Animated.Value(target.y),\n      width: new Animated.Value(target.width),\n      height: new Animated.Value(target.height),\n    }\n  }\n\n  const x = target?.x\n  const y = target?.y\n  const width = target?.width\n  const height = target?.height\n  useEffect(() => {\n    const current = values.current\n    if (!current || x === undefined || y === undefined || !width || !height) return\n    const to = { left: x, top: y, width, height }\n    if (reduced) {\n      for (const key of Object.keys(to) as (keyof typeof to)[]) current[key].setValue(to[key])\n      return\n    }\n    const animation = Animated.parallel(\n      (Object.keys(to) as (keyof typeof to)[]).map((key) =>\n        Animated.timing(current[key], {\n          toValue: to[key],\n          duration: 200,\n          easing: Easing.out(Easing.cubic),\n          useNativeDriver: false,\n        }),\n      ),\n    )\n    animation.start()\n    return () => animation.stop()\n  }, [x, y, width, height, reduced])\n\n  if (!target || !values.current) return null\n  return (\n    <Animated.View pointerEvents=\"none\" style={{ position: 'absolute', ...values.current }}>\n      <View className={className} style={{ flex: 1 }} />\n    </Animated.View>\n  )\n}\n"],"mappings":";;;;;AAQA,SAAgB,iBAAiB;CAC/B,MAAM,CAAC,SAAS,cAAc,SAA+B,CAAC,CAAC;CAa/D,OAAO;EAAE;EAAS,WAZA,aAAa,KAAa,SAAe;GACzD,YAAY,YAAY;IACtB,MAAM,SAAS,QAAQ;IAOvB,OALE,UACA,OAAO,MAAM,KAAK,KAClB,OAAO,MAAM,KAAK,KAClB,OAAO,UAAU,KAAK,SACtB,OAAO,WAAW,KAAK,SACX,UAAU;KAAE,GAAG;MAAU,MAAM;IAAK;GACpD,CAAC;EACH,GAAG,CAAC,CACsB;CAAE;AAC9B;;AAGA,SAAgB,mBAAmB;CACjC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,gBAAgB;EACd,IAAI,QAAQ;EAEZ,kBAAkB,wBAAwB,CAAC,EAAE,MAAM,UAAU,SAAS,SAAS,WAAW,IAAI,CAAC;EAC/F,MAAM,eAAe,kBAAkB,mBAAmB,uBAAuB,UAAU;EAC3F,aAAa;GACX,QAAQ;GACR,cAAc,SAAS;EACzB;CACF,GAAG,CAAC,CAAC;CACL,OAAO;AACT;;;;;;;AAQA,SAAgB,iBAAiB,EAC/B,QACA,aAKC;CACD,MAAM,UAAU,iBAAiB;CACjC,MAAM,SAAS,OAA2E,IAAI;CAC9F,IAAI,UAAU,CAAC,OAAO,SACpB,OAAO,UAAU;EACf,MAAM,IAAI,SAAS,MAAM,OAAO,CAAC;EACjC,KAAK,IAAI,SAAS,MAAM,OAAO,CAAC;EAChC,OAAO,IAAI,SAAS,MAAM,OAAO,KAAK;EACtC,QAAQ,IAAI,SAAS,MAAM,OAAO,MAAM;CAC1C;CAGF,MAAM,IAAI,QAAQ;CAClB,MAAM,IAAI,QAAQ;CAClB,MAAM,QAAQ,QAAQ;CACtB,MAAM,SAAS,QAAQ;CACvB,gBAAgB;EACd,MAAM,UAAU,OAAO;EACvB,IAAI,CAAC,WAAW,MAAM,KAAA,KAAa,MAAM,KAAA,KAAa,CAAC,SAAS,CAAC,QAAQ;EACzE,MAAM,KAAK;GAAE,MAAM;GAAG,KAAK;GAAG;GAAO;EAAO;EAC5C,IAAI,SAAS;GACX,KAAK,MAAM,OAAO,OAAO,KAAK,EAAE,GAA0B,QAAQ,IAAI,CAAC,SAAS,GAAG,IAAI;GACvF;EACF;EACA,MAAM,YAAY,SAAS,SACxB,OAAO,KAAK,EAAE,CAAC,CAAyB,KAAK,QAC5C,SAAS,OAAO,QAAQ,MAAM;GAC5B,SAAS,GAAG;GACZ,UAAU;GACV,QAAQ,OAAO,IAAI,OAAO,KAAK;GAC/B,iBAAiB;EACnB,CAAC,CACH,CACF;EACA,UAAU,MAAM;EAChB,aAAa,UAAU,KAAK;CAC9B,GAAG;EAAC;EAAG;EAAG;EAAO;EAAQ;CAAO,CAAC;CAEjC,IAAI,CAAC,UAAU,CAAC,OAAO,SAAS,OAAO;CACvC,OACE,oBAAC,SAAS,MAAV;EAAe,eAAc;EAAO,OAAO;GAAE,UAAU;GAAY,GAAG,OAAO;EAAQ;EACnF,UAAA,oBAAC,MAAD;GAAiB;GAAW,OAAO,EAAE,MAAM,EAAE;EAAI,CAAA;CACpC,CAAA;AAEnB"}

package/dist/components/_shared/use-transition.js

@@ -0,0 +1,53 @@
+import { useReducedMotion } from "./sliding-indicator.js";
+import { useEffect, useRef, useState } from "react";
+import { Animated } from "react-native";
+//#region src/components/_shared/use-transition.ts
+/**
+* Entrada e saída de um overlay: `progress` vai de 0 a 1 (nativo, sem passar pelo JS) e `mounted`
+* mantém o conteúdo na tela até a saída terminar (o `Modal` nativo só é fechado depois). Com
+* "Reduzir movimento" ligado no sistema, abre e fecha direto.
+*/
+function useTransition(isOpen, { duration = 200, exitDuration = 150, onClosed } = {}) {
+	const reduced = useReducedMotion();
+	const [mounted, setMounted] = useState(isOpen);
+	const progress = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+	const closed = useRef(onClosed);
+	closed.current = onClosed;
+	useEffect(() => {
+		if (isOpen) setMounted(true);
+		if (reduced) {
+			progress.setValue(isOpen ? 1 : 0);
+			if (!isOpen) {
+				setMounted(false);
+				closed.current?.();
+			}
+			return;
+		}
+		const animation = Animated.timing(progress, {
+			toValue: isOpen ? 1 : 0,
+			duration: isOpen ? duration : exitDuration,
+			useNativeDriver: true
+		});
+		animation.start(({ finished }) => {
+			if (finished && !isOpen) {
+				setMounted(false);
+				closed.current?.();
+			}
+		});
+		return () => animation.stop();
+	}, [
+		isOpen,
+		reduced,
+		duration,
+		exitDuration,
+		progress
+	]);
+	return {
+		mounted,
+		progress
+	};
+}
+//#endregion
+export { useTransition };
+
+//# sourceMappingURL=use-transition.js.map

package/dist/components/_shared/use-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-transition.js","names":[],"sources":["../../../src/components/_shared/use-transition.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { Animated } from 'react-native'\nimport { useReducedMotion } from './sliding-indicator'\n\ntype Options = {\n  /** Duração da entrada (ms). */\n  duration?: number\n  /** Duração da saída (ms). */\n  exitDuration?: number\n  /** Chamado quando a saída termina e o conteúdo é desmontado. */\n  onClosed?: () => void\n}\n\n/**\n * Entrada e saída de um overlay: `progress` vai de 0 a 1 (nativo, sem passar pelo JS) e `mounted`\n * mantém o conteúdo na tela até a saída terminar (o `Modal` nativo só é fechado depois). Com\n * \"Reduzir movimento\" ligado no sistema, abre e fecha direto.\n */\nexport function useTransition(\n  isOpen: boolean,\n  { duration = 200, exitDuration = 150, onClosed }: Options = {},\n) {\n  const reduced = useReducedMotion()\n  const [mounted, setMounted] = useState(isOpen)\n  const progress = useRef(new Animated.Value(isOpen ? 1 : 0)).current\n  const closed = useRef(onClosed)\n  closed.current = onClosed\n\n  useEffect(() => {\n    if (isOpen) setMounted(true)\n    if (reduced) {\n      progress.setValue(isOpen ? 1 : 0)\n      if (!isOpen) {\n        setMounted(false)\n        closed.current?.()\n      }\n      return\n    }\n    const animation = Animated.timing(progress, {\n      toValue: isOpen ? 1 : 0,\n      duration: isOpen ? duration : exitDuration,\n      useNativeDriver: true,\n    })\n    animation.start(({ finished }) => {\n      if (finished && !isOpen) {\n        setMounted(false)\n        closed.current?.()\n      }\n    })\n    return () => animation.stop()\n  }, [isOpen, reduced, duration, exitDuration, progress])\n\n  return { mounted, progress }\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAgB,cACd,QACA,EAAE,WAAW,KAAK,eAAe,KAAK,aAAsB,CAAC,GAC7D;CACA,MAAM,UAAU,iBAAiB;CACjC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,WAAW,OAAO,IAAI,SAAS,MAAM,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC;CAC5D,MAAM,SAAS,OAAO,QAAQ;CAC9B,OAAO,UAAU;CAEjB,gBAAgB;EACd,IAAI,QAAQ,WAAW,IAAI;EAC3B,IAAI,SAAS;GACX,SAAS,SAAS,SAAS,IAAI,CAAC;GAChC,IAAI,CAAC,QAAQ;IACX,WAAW,KAAK;IAChB,OAAO,UAAU;GACnB;GACA;EACF;EACA,MAAM,YAAY,SAAS,OAAO,UAAU;GAC1C,SAAS,SAAS,IAAI;GACtB,UAAU,SAAS,WAAW;GAC9B,iBAAiB;EACnB,CAAC;EACD,UAAU,OAAO,EAAE,eAAe;GAChC,IAAI,YAAY,CAAC,QAAQ;IACvB,WAAW,KAAK;IAChB,OAAO,UAAU;GACnB;EACF,CAAC;EACD,aAAa,UAAU,KAAK;CAC9B,GAAG;EAAC;EAAQ;EAAS;EAAU;EAAc;CAAQ,CAAC;CAEtD,OAAO;EAAE;EAAS;CAAS;AAC7B"}

package/dist/components/audio-player/audio-player.d.ts

@@ -0,0 +1,34 @@
+import { ViewProps } from "react-native";
+//#region src/components/audio-player/audio-player.d.ts
+export type AudioPlayerProps = Omit<ViewProps, 'children' | 'style'> & {
+  className?: string;
+  /** Nome acessível do player. */
+  label?: string;
+  /** Tocando agora: mostra o botão de pausar. */
+  playing?: boolean;
+  /** Posição atual, em segundos. */
+  position?: number;
+  /** Duração total, em segundos. */
+  duration?: number;
+  /** Velocidade atual (controlado). Sem ela, o player guarda a escolhida. */
+  rate?: number;
+  /** Velocidades do botão (cada toque passa para a próxima). Padrão: 1x, 1.5x e 2x. */
+  speeds?: number[];
+  /** Picos da onda, de 0 a 1. Sem eles, usa uma onda padrão. */
+  waveform?: number[];
+  /** Quantidade de barras da onda. Padrão: 52. */
+  bars?: number;
+  onPlayPause?: () => void;
+  /** Chamado com a posição (em segundos) tocada ou arrastada na onda. */
+  onSeek?: (seconds: number) => void;
+  /** Chamado com a nova velocidade quando o botão é tocado. */
+  onRateChange?: (rate: number) => void;
+};
+/**
+ * Casca de player de áudio: botão, onda, tempo e velocidade. Não toca nada: quem usa guarda o
+ * estado (por exemplo com `expo-audio`) e o passa por props, ligando `onPlayPause`, `onSeek` e
+ * `onRateChange` ao player de verdade.
+ */
+export declare function AudioPlayer({ className, label, playing, position, duration, rate, speeds, waveform, bars, onPlayPause, onSeek, onRateChange, ...props }: AudioPlayerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=audio-player.d.ts.map