@innovui/react-native 0.2.0 → 0.3.1

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/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/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, onLayout, ...props }: AudioPlayerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=audio-player.d.ts.map

package/dist/components/audio-player/audio-player.js

@@ -0,0 +1,96 @@
+import { cn } from "../../utils/cn.js";
+import { useToken } from "../_shared/use-token.js";
+import { DEFAULT_WAVEFORM, formatTime, resamplePeaks, useSeek } from "../_shared/media.js";
+import { PauseIcon, PlayIcon } from "../_shared/media-icons.js";
+import { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/audio-player/audio-player.tsx
+const BAR_MIN = 6;
+const BAR_RANGE = 28;
+/**
+* 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.
+*/
+function AudioPlayer({ className, label = "Áudio", playing = false, position = 0, duration = 0, rate, speeds = [
+	1,
+	1.5,
+	2
+], waveform, bars = 52, onPlayPause, onSeek, onRateChange, onLayout, ...props }) {
+	const [chosen, setChosen] = useState(speeds[0] ?? 1);
+	const [cardWidth, setCardWidth] = useState(0);
+	const stacked = cardWidth > 0 && cardWidth < 416;
+	const speed = rate ?? chosen;
+	const iconColor = useToken("--color-media-on-surface");
+	const seek = useSeek({
+		position,
+		duration,
+		label: "Posição do áudio",
+		onSeek
+	});
+	const shown = seek.width ? Math.min(bars, Math.max(1, Math.floor((seek.width + 2) / 4))) : bars;
+	const peaks = resamplePeaks(waveform ?? DEFAULT_WAVEFORM, shown);
+	const played = duration ? Math.round(position / duration * shown) : 0;
+	function nextSpeed() {
+		const next = speeds[(speeds.indexOf(speed) + 1) % speeds.length] ?? 1;
+		setChosen(next);
+		onRateChange?.(next);
+	}
+	return /* @__PURE__ */ jsxs(View, {
+		accessibilityLabel: label,
+		onLayout: (event) => {
+			setCardWidth(event.nativeEvent.layout.width);
+			onLayout?.(event);
+		},
+		className: cn("w-full max-w-[480px] flex-row items-center gap-3 rounded-lg border border-border-default bg-surface-elevated p-4 shadow-sm", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Pressable, {
+				accessibilityRole: "button",
+				accessibilityLabel: playing ? "Pausar" : "Reproduzir",
+				onPress: onPlayPause,
+				className: "size-11 shrink-0 items-center justify-center rounded-full bg-button-primary-bg active:bg-button-primary-bg-active",
+				children: playing ? /* @__PURE__ */ jsx(PauseIcon, { color: iconColor }) : /* @__PURE__ */ jsx(PlayIcon, { color: iconColor })
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				className: cn("min-w-0 flex-1", stacked ? "flex-col items-stretch gap-1" : "flex-row items-center gap-2"),
+				children: [/* @__PURE__ */ jsx(View, {
+					...seek.props,
+					className: cn("h-[34px] min-w-0 justify-center", stacked ? "w-full" : "flex-1"),
+					children: /* @__PURE__ */ jsx(View, {
+						pointerEvents: "none",
+						className: "h-full flex-row items-center gap-0.5",
+						children: peaks.map((peak, i) => /* @__PURE__ */ jsx(View, {
+							className: cn("min-w-0.5 flex-1 rounded-full", i < played ? "bg-button-primary-bg" : "bg-media-wave-rest"),
+							style: { height: BAR_MIN + peak * BAR_RANGE }
+						}, i))
+					})
+				}), /* @__PURE__ */ jsxs(Text, {
+					accessible: false,
+					className: "shrink-0 text-xs font-medium leading-4 text-text-secondary",
+					style: { fontVariant: ["tabular-nums"] },
+					children: [
+						formatTime(position),
+						" / ",
+						formatTime(duration)
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(Pressable, {
+				accessibilityRole: "button",
+				accessibilityLabel: `Velocidade de reprodução: ${speed}x`,
+				onPress: nextSpeed,
+				className: "h-8 w-16 shrink-0 items-center justify-center rounded-full border border-border-default bg-surface-elevated active:bg-bg-tertiary",
+				children: /* @__PURE__ */ jsxs(Text, {
+					className: "text-sm font-medium leading-5 text-text-secondary",
+					children: [speed, "x"]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { AudioPlayer };
+
+//# sourceMappingURL=audio-player.js.map

package/dist/components/audio-player/audio-player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-player.js","names":[],"sources":["../../../src/components/audio-player/audio-player.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { useState } from 'react'\nimport { Pressable, Text, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { DEFAULT_WAVEFORM, formatTime, resamplePeaks, useSeek } from '../_shared/media'\nimport { PauseIcon, PlayIcon } from '../_shared/media-icons'\nimport { useToken } from '../_shared/use-token'\n\n// Alturas das barras no Figma: de 6px (silêncio) a 34px (pico).\nconst BAR_MIN = 6\nconst BAR_RANGE = 28\n\nexport type AudioPlayerProps = Omit<ViewProps, 'children' | 'style'> & {\n  className?: string\n  /** Nome acessível do player. */\n  label?: string\n  /** Tocando agora: mostra o botão de pausar. */\n  playing?: boolean\n  /** Posição atual, em segundos. */\n  position?: number\n  /** Duração total, em segundos. */\n  duration?: number\n  /** Velocidade atual (controlado). Sem ela, o player guarda a escolhida. */\n  rate?: number\n  /** Velocidades do botão (cada toque passa para a próxima). Padrão: 1x, 1.5x e 2x. */\n  speeds?: number[]\n  /** Picos da onda, de 0 a 1. Sem eles, usa uma onda padrão. */\n  waveform?: number[]\n  /** Quantidade de barras da onda. Padrão: 52. */\n  bars?: number\n  onPlayPause?: () => void\n  /** Chamado com a posição (em segundos) tocada ou arrastada na onda. */\n  onSeek?: (seconds: number) => void\n  /** Chamado com a nova velocidade quando o botão é tocado. */\n  onRateChange?: (rate: number) => void\n}\n\n/**\n * Casca de player de áudio: botão, onda, tempo e velocidade. Não toca nada: quem usa guarda o\n * estado (por exemplo com `expo-audio`) e o passa por props, ligando `onPlayPause`, `onSeek` e\n * `onRateChange` ao player de verdade.\n */\nexport function AudioPlayer({\n  className,\n  label = 'Áudio',\n  playing = false,\n  position = 0,\n  duration = 0,\n  rate,\n  speeds = [1, 1.5, 2],\n  waveform,\n  bars = 52,\n  onPlayPause,\n  onSeek,\n  onRateChange,\n  onLayout,\n  ...props\n}: AudioPlayerProps) {\n  const [chosen, setChosen] = useState(speeds[0] ?? 1)\n  const [cardWidth, setCardWidth] = useState(0)\n  // abaixo de 416px (26rem) o tempo desce para baixo da onda, que ganha a largura toda\n  const stacked = cardWidth > 0 && cardWidth < 416\n  const speed = rate ?? chosen\n  const iconColor = useToken('--color-media-on-surface')\n  const seek = useSeek({ position, duration, label: 'Posição do áudio', onSeek })\n  // Em telas estreitas a onda perde barras (2px + 2px de espaço), em vez de invadir o tempo.\n  const shown = seek.width ? Math.min(bars, Math.max(1, Math.floor((seek.width + 2) / 4))) : bars\n  const peaks = resamplePeaks(waveform ?? DEFAULT_WAVEFORM, shown)\n  const played = duration ? Math.round((position / duration) * shown) : 0\n\n  function nextSpeed() {\n    const next = speeds[(speeds.indexOf(speed) + 1) % speeds.length] ?? 1\n    setChosen(next)\n    onRateChange?.(next)\n  }\n\n  return (\n    <View\n      accessibilityLabel={label}\n      onLayout={(event) => {\n        setCardWidth(event.nativeEvent.layout.width)\n        onLayout?.(event)\n      }}\n      className={cn(\n        'w-full max-w-[480px] flex-row items-center gap-3 rounded-lg border border-border-default bg-surface-elevated p-4 shadow-sm',\n        className,\n      )}\n      {...props}\n    >\n      <Pressable\n        accessibilityRole=\"button\"\n        accessibilityLabel={playing ? 'Pausar' : 'Reproduzir'}\n        onPress={onPlayPause}\n        className=\"size-11 shrink-0 items-center justify-center rounded-full bg-button-primary-bg active:bg-button-primary-bg-active\"\n      >\n        {playing ? <PauseIcon color={iconColor} /> : <PlayIcon color={iconColor} />}\n      </Pressable>\n      <View\n        className={cn(\n          'min-w-0 flex-1',\n          stacked ? 'flex-col items-stretch gap-1' : 'flex-row items-center gap-2',\n        )}\n      >\n        <View\n          {...seek.props}\n          className={cn('h-[34px] min-w-0 justify-center', stacked ? 'w-full' : 'flex-1')}\n        >\n          {/* Filhos ignoram toques para que `locationX` seja sempre relativo à onda. */}\n          <View pointerEvents=\"none\" className=\"h-full flex-row items-center gap-0.5\">\n            {peaks.map((peak, i) => (\n              <View\n                // biome-ignore lint/suspicious/noArrayIndexKey: as barras são posicionais e fixas\n                key={i}\n                className={cn(\n                  'min-w-0.5 flex-1 rounded-full',\n                  i < played ? 'bg-button-primary-bg' : 'bg-media-wave-rest',\n                )}\n                style={{ height: BAR_MIN + peak * BAR_RANGE }}\n              />\n            ))}\n          </View>\n        </View>\n        <Text\n          accessible={false}\n          className=\"shrink-0 text-xs font-medium leading-4 text-text-secondary\"\n          style={{ fontVariant: ['tabular-nums'] }}\n        >\n          {formatTime(position)} / {formatTime(duration)}\n        </Text>\n      </View>\n      <Pressable\n        accessibilityRole=\"button\"\n        accessibilityLabel={`Velocidade de reprodução: ${speed}x`}\n        onPress={nextSpeed}\n        className=\"h-8 w-16 shrink-0 items-center justify-center rounded-full border border-border-default bg-surface-elevated active:bg-bg-tertiary\"\n      >\n        <Text className=\"text-sm font-medium leading-5 text-text-secondary\">{speed}x</Text>\n      </Pressable>\n    </View>\n  )\n}\n"],"mappings":";;;;;;;;AAUA,MAAM,UAAU;AAChB,MAAM,YAAY;;;;;;AAgClB,SAAgB,YAAY,EAC1B,WACA,QAAQ,SACR,UAAU,OACV,WAAW,GACX,WAAW,GACX,MACA,SAAS;CAAC;CAAG;CAAK;AAAC,GACnB,UACA,OAAO,IACP,aACA,QACA,cACA,UACA,GAAG,SACgB;CACnB,MAAM,CAAC,QAAQ,aAAa,SAAS,OAAO,MAAM,CAAC;CACnD,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC;CAE5C,MAAM,UAAU,YAAY,KAAK,YAAY;CAC7C,MAAM,QAAQ,QAAQ;CACtB,MAAM,YAAY,SAAS,0BAA0B;CACrD,MAAM,OAAO,QAAQ;EAAE;EAAU;EAAU,OAAO;EAAoB;CAAO,CAAC;CAE9E,MAAM,QAAQ,KAAK,QAAQ,KAAK,IAAI,MAAM,KAAK,IAAI,GAAG,KAAK,OAAO,KAAK,QAAQ,KAAK,CAAC,CAAC,CAAC,IAAI;CAC3F,MAAM,QAAQ,cAAc,YAAY,kBAAkB,KAAK;CAC/D,MAAM,SAAS,WAAW,KAAK,MAAO,WAAW,WAAY,KAAK,IAAI;CAEtE,SAAS,YAAY;EACnB,MAAM,OAAO,QAAQ,OAAO,QAAQ,KAAK,IAAI,KAAK,OAAO,WAAW;EACpE,UAAU,IAAI;EACd,eAAe,IAAI;CACrB;CAEA,OACE,qBAAC,MAAD;EACE,oBAAoB;EACpB,WAAW,UAAU;GACnB,aAAa,MAAM,YAAY,OAAO,KAAK;GAC3C,WAAW,KAAK;EAClB;EACA,WAAW,GACT,8HACA,SACF;EACA,GAAI;EAVN,UAAA;GAYE,oBAAC,WAAD;IACE,mBAAkB;IAClB,oBAAoB,UAAU,WAAW;IACzC,SAAS;IACT,WAAU;IAET,UAAA,UAAU,oBAAC,WAAD,EAAW,OAAO,UAAY,CAAA,IAAI,oBAAC,UAAD,EAAU,OAAO,UAAY,CAAA;GACjE,CAAA;GACX,qBAAC,MAAD;IACE,WAAW,GACT,kBACA,UAAU,iCAAiC,6BAC7C;IAJF,UAAA,CAME,oBAAC,MAAD;KACE,GAAI,KAAK;KACT,WAAW,GAAG,mCAAmC,UAAU,WAAW,QAAQ;KAG9E,UAAA,oBAAC,MAAD;MAAM,eAAc;MAAO,WAAU;MAClC,UAAA,MAAM,KAAK,MAAM,MAChB,oBAAC,MAAD;OAGE,WAAW,GACT,iCACA,IAAI,SAAS,yBAAyB,oBACxC;OACA,OAAO,EAAE,QAAQ,UAAU,OAAO,UAAU;MAC7C,GANM,CAMN,CACF;KACG,CAAA;IACF,CAAA,GACN,qBAAC,MAAD;KACE,YAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,CAAC,cAAc,EAAE;KAHzC,UAAA;MAKG,WAAW,QAAQ;MAAE;MAAI,WAAW,QAAQ;KACzC;IACF,CAAA,CAAA;;GACN,oBAAC,WAAD;IACE,mBAAkB;IAClB,oBAAoB,6BAA6B,MAAM;IACvD,SAAS;IACT,WAAU;IAEV,UAAA,qBAAC,MAAD;KAAM,WAAU;KAAhB,UAAA,CAAqE,OAAM,GAAO;;GACzE,CAAA;EACP;;AAEV"}

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

@@ -0,0 +1,2 @@
+import { AudioPlayer, AudioPlayerProps } from "./audio-player.js";
+export { AudioPlayer, type AudioPlayerProps };

package/dist/components/carousel/carousel.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+import { ViewProps } from "react-native";
+//#region src/components/carousel/carousel.d.ts
+export type CarouselProps = Omit<ViewProps, 'children' | 'style'> & {
+  className?: string;
+  /** Nome acessível do carrossel (ex.: "Modelos de mensagem"). */
+  label: string;
+  /** Os itens: use `CarouselItem`. */
+  children: ReactNode;
+  /** Mostra os pontos de posição. Padrão: `true`. */
+  showDots?: boolean;
+  /** Mostra as setas anterior/próximo. Padrão: `true`. */
+  showArrows?: boolean;
+  /** Largura de cada item, de 0 a 1 da largura do carrossel. Padrão: 0.78 no celular e 0.52 a partir de 768px de tela. */
+  itemRatio?: number;
+  /** Chamado com o índice do item em destaque sempre que ele muda. */
+  onIndexChange?: (index: number) => void;
+  previousLabel?: string;
+  nextLabel?: string;
+  /** Monta o nome acessível de cada ponto. Padrão: "Ir para o item N". */
+  dotLabel?: (index: number) => string;
+};
+/**
+ * Fileira de itens que desliza com o dedo e encaixa item a item, com pontos e setas. Mostra um
+ * pedaço do próximo item. O último item "chega ao fim" mesmo que não caiba alinhado à esquerda:
+ * o ponto e a seta refletem isso.
+ */
+export declare function Carousel({ className, label, children, showDots, showArrows, itemRatio, onIndexChange, previousLabel, nextLabel, dotLabel, ...props }: CarouselProps): import("react").JSX.Element;
+/** Um item do `Carousel`. A largura vem do carrossel (`itemRatio`); o item preenche toda a altura. */
+export declare function CarouselItem({ className, ...props }: Omit<ViewProps, 'style'> & {
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=carousel.d.ts.map

package/dist/components/carousel/carousel.js

@@ -0,0 +1,110 @@
+import { cn } from "../../utils/cn.js";
+import { useToken } from "../_shared/use-token.js";
+import { IconButton } from "../icon-button/icon-button.js";
+import { NextIcon, PreviousIcon } from "../_shared/media-icons.js";
+import { Children, useRef, useState } from "react";
+import { Pressable, ScrollView, View, useWindowDimensions } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/carousel/carousel.tsx
+const GAP = 16;
+const TABLET = 768;
+/**
+* Fileira de itens que desliza com o dedo e encaixa item a item, com pontos e setas. Mostra um
+* pedaço do próximo item. O último item "chega ao fim" mesmo que não caiba alinhado à esquerda:
+* o ponto e a seta refletem isso.
+*/
+function Carousel({ className, label, children, showDots = true, showArrows = true, itemRatio, onIndexChange, previousLabel = "Item anterior", nextLabel = "Próximo item", dotLabel = (index) => `Ir para o item ${index + 1}`, ...props }) {
+	const items = Children.toArray(children);
+	const count = items.length;
+	const scroll = useRef(null);
+	const { width: screen } = useWindowDimensions();
+	const [width, setWidth] = useState(0);
+	const [active, setActive] = useState(0);
+	const arrowColor = useToken("--color-text-primary");
+	const arrowDisabled = useToken("--color-button-disabled-text");
+	const itemWidth = width * (itemRatio ?? (screen >= TABLET ? .52 : .78));
+	const step = itemWidth + GAP;
+	const max = Math.max(count * step - GAP - width, 0);
+	const offsets = Array.from({ length: count }, (_, i) => Math.min(i * step, max));
+	function indexAt(x) {
+		if (max > 0 && x >= max - 1) return count - 1;
+		let best = 0;
+		offsets.forEach((offset, i) => {
+			if (Math.abs(offset - x) < Math.abs((offsets[best] ?? 0) - x)) best = i;
+		});
+		return best;
+	}
+	function onScroll(event) {
+		const next = indexAt(event.nativeEvent.contentOffset.x);
+		if (next === active) return;
+		setActive(next);
+		onIndexChange?.(next);
+	}
+	function goTo(index) {
+		const target = Math.min(Math.max(index, 0), count - 1);
+		scroll.current?.scrollTo({
+			x: offsets[target] ?? 0,
+			animated: true
+		});
+	}
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("gap-6", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(ScrollView, {
+			ref: scroll,
+			horizontal: true,
+			accessibilityLabel: label,
+			showsHorizontalScrollIndicator: false,
+			decelerationRate: "fast",
+			snapToOffsets: offsets,
+			scrollEventThrottle: 16,
+			onLayout: (event) => setWidth(event.nativeEvent.layout.width),
+			onScroll,
+			contentContainerClassName: "gap-4",
+			children: items.map((child, i) => /* @__PURE__ */ jsx(View, {
+				accessibilityLabel: `${i + 1} de ${count}`,
+				style: { width: itemWidth },
+				children: child
+			}, i))
+		}), (showDots || showArrows) && count > 0 && /* @__PURE__ */ jsxs(View, {
+			className: "flex-row items-center justify-between",
+			children: [showDots ? /* @__PURE__ */ jsx(View, {
+				className: "flex-row items-center gap-2",
+				children: items.map((_, i) => /* @__PURE__ */ jsx(Pressable, {
+					accessibilityRole: "button",
+					accessibilityLabel: dotLabel(i),
+					accessibilityState: { selected: i === active },
+					onPress: () => goTo(i),
+					className: "h-11 items-center justify-center",
+					children: /* @__PURE__ */ jsx(View, { className: cn("h-2 rounded-full", i === active ? "w-6 bg-interactive-primary" : "w-2 bg-border-strong") })
+				}, i))
+			}) : /* @__PURE__ */ jsx(View, {}), showArrows && /* @__PURE__ */ jsxs(View, {
+				className: "flex-row gap-2",
+				children: [/* @__PURE__ */ jsx(IconButton, {
+					accessibilityLabel: previousLabel,
+					variant: "tertiary",
+					disabled: active <= 0,
+					onPress: () => goTo(active - 1),
+					children: /* @__PURE__ */ jsx(PreviousIcon, { color: active <= 0 ? arrowDisabled : arrowColor })
+				}), /* @__PURE__ */ jsx(IconButton, {
+					accessibilityLabel: nextLabel,
+					variant: "tertiary",
+					disabled: active >= count - 1,
+					onPress: () => goTo(active + 1),
+					children: /* @__PURE__ */ jsx(NextIcon, { color: active >= count - 1 ? arrowDisabled : arrowColor })
+				})]
+			})]
+		})]
+	});
+}
+/** Um item do `Carousel`. A largura vem do carrossel (`itemRatio`); o item preenche toda a altura. */
+function CarouselItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: cn("flex-1", className),
+		...props
+	});
+}
+//#endregion
+export { Carousel, CarouselItem };
+
+//# sourceMappingURL=carousel.js.map

package/dist/components/carousel/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","names":[],"sources":["../../../src/components/carousel/carousel.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { Children, type ReactNode, useRef, useState } from 'react'\nimport {\n  type LayoutChangeEvent,\n  type NativeScrollEvent,\n  type NativeSyntheticEvent,\n  Pressable,\n  ScrollView,\n  useWindowDimensions,\n  View,\n  type ViewProps,\n} from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { NextIcon, PreviousIcon } from '../_shared/media-icons'\nimport { useToken } from '../_shared/use-token'\nimport { IconButton } from '../icon-button'\n\nconst GAP = 16\nconst TABLET = 768\n\nexport type CarouselProps = Omit<ViewProps, 'children' | 'style'> & {\n  className?: string\n  /** Nome acessível do carrossel (ex.: \"Modelos de mensagem\"). */\n  label: string\n  /** Os itens: use `CarouselItem`. */\n  children: ReactNode\n  /** Mostra os pontos de posição. Padrão: `true`. */\n  showDots?: boolean\n  /** Mostra as setas anterior/próximo. Padrão: `true`. */\n  showArrows?: boolean\n  /** Largura de cada item, de 0 a 1 da largura do carrossel. Padrão: 0.78 no celular e 0.52 a partir de 768px de tela. */\n  itemRatio?: number\n  /** Chamado com o índice do item em destaque sempre que ele muda. */\n  onIndexChange?: (index: number) => void\n  previousLabel?: string\n  nextLabel?: string\n  /** Monta o nome acessível de cada ponto. Padrão: \"Ir para o item N\". */\n  dotLabel?: (index: number) => string\n}\n\n/**\n * Fileira de itens que desliza com o dedo e encaixa item a item, com pontos e setas. Mostra um\n * pedaço do próximo item. O último item \"chega ao fim\" mesmo que não caiba alinhado à esquerda:\n * o ponto e a seta refletem isso.\n */\nexport function Carousel({\n  className,\n  label,\n  children,\n  showDots = true,\n  showArrows = true,\n  itemRatio,\n  onIndexChange,\n  previousLabel = 'Item anterior',\n  nextLabel = 'Próximo item',\n  dotLabel = (index) => `Ir para o item ${index + 1}`,\n  ...props\n}: CarouselProps) {\n  const items = Children.toArray(children)\n  const count = items.length\n  const scroll = useRef<ScrollView>(null)\n  const { width: screen } = useWindowDimensions()\n  const [width, setWidth] = useState(0)\n  const [active, setActive] = useState(0)\n  const arrowColor = useToken('--color-text-primary')\n  const arrowDisabled = useToken('--color-button-disabled-text')\n\n  const itemWidth = width * (itemRatio ?? (screen >= TABLET ? 0.52 : 0.78))\n  const step = itemWidth + GAP\n  const max = Math.max(count * step - GAP - width, 0)\n  // o último ponto de encaixe é o fim da rolagem, mesmo que o último item não chegue à esquerda\n  const offsets = Array.from({ length: count }, (_, i) => Math.min(i * step, max))\n\n  function indexAt(x: number) {\n    if (max > 0 && x >= max - 1) return count - 1\n    let best = 0\n    offsets.forEach((offset, i) => {\n      if (Math.abs(offset - x) < Math.abs((offsets[best] ?? 0) - x)) best = i\n    })\n    return best\n  }\n\n  function onScroll(event: NativeSyntheticEvent<NativeScrollEvent>) {\n    const next = indexAt(event.nativeEvent.contentOffset.x)\n    if (next === active) return\n    setActive(next)\n    onIndexChange?.(next)\n  }\n\n  function goTo(index: number) {\n    const target = Math.min(Math.max(index, 0), count - 1)\n    scroll.current?.scrollTo({ x: offsets[target] ?? 0, animated: true })\n  }\n\n  return (\n    <View className={cn('gap-6', className)} {...props}>\n      <ScrollView\n        ref={scroll}\n        horizontal\n        accessibilityLabel={label}\n        showsHorizontalScrollIndicator={false}\n        decelerationRate=\"fast\"\n        snapToOffsets={offsets}\n        scrollEventThrottle={16}\n        onLayout={(event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width)}\n        onScroll={onScroll}\n        contentContainerClassName=\"gap-4\"\n      >\n        {items.map((child, i) => (\n          <View\n            // biome-ignore lint/suspicious/noArrayIndexKey: os itens são posicionais\n            key={i}\n            accessibilityLabel={`${i + 1} de ${count}`}\n            style={{ width: itemWidth }}\n          >\n            {child}\n          </View>\n        ))}\n      </ScrollView>\n      {(showDots || showArrows) && count > 0 && (\n        <View className=\"flex-row items-center justify-between\">\n          {showDots ? (\n            <View className=\"flex-row items-center gap-2\">\n              {items.map((_, i) => (\n                <Pressable\n                  // biome-ignore lint/suspicious/noArrayIndexKey: os pontos são posicionais\n                  key={i}\n                  accessibilityRole=\"button\"\n                  accessibilityLabel={dotLabel(i)}\n                  accessibilityState={{ selected: i === active }}\n                  onPress={() => goTo(i)}\n                  className=\"h-11 items-center justify-center\"\n                >\n                  <View\n                    className={cn(\n                      'h-2 rounded-full',\n                      i === active ? 'w-6 bg-interactive-primary' : 'w-2 bg-border-strong',\n                    )}\n                  />\n                </Pressable>\n              ))}\n            </View>\n          ) : (\n            <View />\n          )}\n          {showArrows && (\n            <View className=\"flex-row gap-2\">\n              <IconButton\n                accessibilityLabel={previousLabel}\n                variant=\"tertiary\"\n                disabled={active <= 0}\n                onPress={() => goTo(active - 1)}\n              >\n                <PreviousIcon color={active <= 0 ? arrowDisabled : arrowColor} />\n              </IconButton>\n              <IconButton\n                accessibilityLabel={nextLabel}\n                variant=\"tertiary\"\n                disabled={active >= count - 1}\n                onPress={() => goTo(active + 1)}\n              >\n                <NextIcon color={active >= count - 1 ? arrowDisabled : arrowColor} />\n              </IconButton>\n            </View>\n          )}\n        </View>\n      )}\n    </View>\n  )\n}\n\n/** Um item do `Carousel`. A largura vem do carrossel (`itemRatio`); o item preenche toda a altura. */\nexport function CarouselItem({\n  className,\n  ...props\n}: Omit<ViewProps, 'style'> & { className?: string }) {\n  return <View className={cn('flex-1', className)} {...props} />\n}\n"],"mappings":"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"}

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,2 @@
+import { Carousel, CarouselItem, CarouselProps } from "./carousel.js";
+export { Carousel, CarouselItem, type CarouselProps };

package/dist/components/gallery/gallery.d.ts

@@ -0,0 +1,21 @@
+import { LightboxItem } from "../lightbox/lightbox.js";
+import { ViewProps } from "react-native";
+//#region src/components/gallery/gallery.d.ts
+export type GalleryItem = LightboxItem & {
+  /** Imagem menor para a grade; sem ela, a grade usa `src`. */
+  thumbSrc?: string;
+};
+export type GalleryProps = Omit<ViewProps, 'children' | 'style'> & {
+  className?: string;
+  items: GalleryItem[];
+  /** Colunas da grade. Padrão: 2 no celular e 3 a partir de 768px de tela. */
+  columns?: number;
+  /** Nome acessível do botão de cada miniatura. Padrão: "Ampliar foto N: descrição". */
+  openLabel?: (item: GalleryItem, index: number) => string;
+  /** Nome acessível do visualizador ampliado. */
+  lightboxLabel?: string;
+};
+/** Grade de miniaturas que abre a foto ampliada no `Lightbox`. */
+export declare function Gallery({ className, items, columns, openLabel, lightboxLabel, ...props }: GalleryProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=gallery.d.ts.map