@innovui/react-native 0.2.0 → 0.3.0

package/dist/components/gallery/gallery.js

@@ -0,0 +1,54 @@
+import { cn } from "../../utils/cn.js";
+import { useToken } from "../_shared/use-token.js";
+import { ExpandIcon } from "../_shared/media-icons.js";
+import { Lightbox } from "../lightbox/lightbox.js";
+import { useState } from "react";
+import { Image, Pressable, View, useWindowDimensions } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/gallery/gallery.tsx
+const GAP = 8;
+const TABLET = 768;
+/** Grade de miniaturas que abre a foto ampliada no `Lightbox`. */
+function Gallery({ className, items, columns, openLabel = (item, i) => `Ampliar foto ${i + 1}: ${item.alt}`, lightboxLabel, ...props }) {
+	const { width: screen } = useWindowDimensions();
+	const [width, setWidth] = useState(0);
+	const [opened, setOpened] = useState(null);
+	const overlayColor = useToken("--color-media-on-surface");
+	const cols = columns ?? (screen >= TABLET ? 3 : 2);
+	const size = (width - GAP * (cols - 1)) / cols;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(View, {
+		className: cn("flex-row flex-wrap gap-2", className),
+		onLayout: (event) => setWidth(event.nativeEvent.layout.width),
+		...props,
+		children: items.map((item, i) => /* @__PURE__ */ jsx(Pressable, {
+			accessibilityRole: "imagebutton",
+			accessibilityLabel: openLabel(item, i),
+			onPress: () => setOpened(i),
+			className: "overflow-hidden rounded-md bg-bg-skeleton",
+			style: {
+				width: size,
+				aspectRatio: 4 / 3
+			},
+			children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Image, {
+				source: { uri: item.thumbSrc ?? item.src },
+				className: "size-full",
+				resizeMode: "cover"
+			}), pressed && /* @__PURE__ */ jsx(View, {
+				pointerEvents: "none",
+				className: "absolute inset-0 items-center justify-center bg-media-surface/50",
+				children: /* @__PURE__ */ jsx(ExpandIcon, { color: overlayColor })
+			})] })
+		}, item.src))
+	}), /* @__PURE__ */ jsx(Lightbox, {
+		items,
+		label: lightboxLabel,
+		open: opened !== null,
+		onOpenChange: (open) => !open && setOpened(null),
+		index: opened ?? 0,
+		onIndexChange: setOpened
+	})] });
+}
+//#endregion
+export { Gallery };
+
+//# sourceMappingURL=gallery.js.map

package/dist/components/gallery/gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.js","names":[],"sources":["../../../src/components/gallery/gallery.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { useState } from 'react'\nimport {\n  Image,\n  type LayoutChangeEvent,\n  Pressable,\n  useWindowDimensions,\n  View,\n  type ViewProps,\n} from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { ExpandIcon } from '../_shared/media-icons'\nimport { useToken } from '../_shared/use-token'\nimport { Lightbox, type LightboxItem } from '../lightbox'\n\nconst GAP = 8\nconst TABLET = 768\n\nexport type GalleryItem = LightboxItem & {\n  /** Imagem menor para a grade; sem ela, a grade usa `src`. */\n  thumbSrc?: string\n}\n\nexport type GalleryProps = Omit<ViewProps, 'children' | 'style'> & {\n  className?: string\n  items: GalleryItem[]\n  /** Colunas da grade. Padrão: 2 no celular e 3 a partir de 768px de tela. */\n  columns?: number\n  /** Nome acessível do botão de cada miniatura. Padrão: \"Ampliar foto N: descrição\". */\n  openLabel?: (item: GalleryItem, index: number) => string\n  /** Nome acessível do visualizador ampliado. */\n  lightboxLabel?: string\n}\n\n/** Grade de miniaturas que abre a foto ampliada no `Lightbox`. */\nexport function Gallery({\n  className,\n  items,\n  columns,\n  openLabel = (item, i) => `Ampliar foto ${i + 1}: ${item.alt}`,\n  lightboxLabel,\n  ...props\n}: GalleryProps) {\n  const { width: screen } = useWindowDimensions()\n  const [width, setWidth] = useState(0)\n  const [opened, setOpened] = useState<number | null>(null)\n  const overlayColor = useToken('--color-media-on-surface')\n  const cols = columns ?? (screen >= TABLET ? 3 : 2)\n  const size = (width - GAP * (cols - 1)) / cols\n\n  return (\n    <>\n      <View\n        className={cn('flex-row flex-wrap gap-2', className)}\n        onLayout={(event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width)}\n        {...props}\n      >\n        {items.map((item, i) => (\n          <Pressable\n            key={item.src}\n            accessibilityRole=\"imagebutton\"\n            accessibilityLabel={openLabel(item, i)}\n            onPress={() => setOpened(i)}\n            className=\"overflow-hidden rounded-md bg-bg-skeleton\"\n            style={{ width: size, aspectRatio: 4 / 3 }}\n          >\n            {({ pressed }) => (\n              <>\n                <Image\n                  source={{ uri: item.thumbSrc ?? item.src }}\n                  className=\"size-full\"\n                  resizeMode=\"cover\"\n                />\n                {pressed && (\n                  <View\n                    pointerEvents=\"none\"\n                    className=\"absolute inset-0 items-center justify-center bg-media-surface/50\"\n                  >\n                    <ExpandIcon color={overlayColor} />\n                  </View>\n                )}\n              </>\n            )}\n          </Pressable>\n        ))}\n      </View>\n      <Lightbox\n        items={items}\n        label={lightboxLabel}\n        open={opened !== null}\n        onOpenChange={(open) => !open && setOpened(null)}\n        index={opened ?? 0}\n        onIndexChange={setOpened}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAgBA,MAAM,MAAM;AACZ,MAAM,SAAS;;AAmBf,SAAgB,QAAQ,EACtB,WACA,OACA,SACA,aAAa,MAAM,MAAM,gBAAgB,IAAI,EAAE,IAAI,KAAK,OACxD,eACA,GAAG,SACY;CACf,MAAM,EAAE,OAAO,WAAW,oBAAoB;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CACpC,MAAM,CAAC,QAAQ,aAAa,SAAwB,IAAI;CACxD,MAAM,eAAe,SAAS,0BAA0B;CACxD,MAAM,OAAO,YAAY,UAAU,SAAS,IAAI;CAChD,MAAM,QAAQ,QAAQ,OAAO,OAAO,MAAM;CAE1C,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD;EACE,WAAW,GAAG,4BAA4B,SAAS;EACnD,WAAW,UAA6B,SAAS,MAAM,YAAY,OAAO,KAAK;EAC/E,GAAI;EAEH,UAAA,MAAM,KAAK,MAAM,MAChB,oBAAC,WAAD;GAEE,mBAAkB;GAClB,oBAAoB,UAAU,MAAM,CAAC;GACrC,eAAe,UAAU,CAAC;GAC1B,WAAU;GACV,OAAO;IAAE,OAAO;IAAM,aAAa,IAAI;GAAE;GAEvC,WAAA,EAAE,cACF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,OAAD;IACE,QAAQ,EAAE,KAAK,KAAK,YAAY,KAAK,IAAI;IACzC,WAAU;IACV,YAAW;GACZ,CAAA,GACA,WACC,oBAAC,MAAD;IACE,eAAc;IACd,WAAU;IAEV,UAAA,oBAAC,YAAD,EAAY,OAAO,aAAe,CAAA;GAC9B,CAAA,CAER,EAAA,CAAA;EAEK,GAxBJ,KAAK,GAwBD,CACZ;CACG,CAAA,GACN,oBAAC,UAAD;EACS;EACP,OAAO;EACP,MAAM,WAAW;EACjB,eAAe,SAAS,CAAC,QAAQ,UAAU,IAAI;EAC/C,OAAO,UAAU;EACjB,eAAe;CAChB,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,2 @@
+import { Gallery, GalleryItem, GalleryProps } from "./gallery.js";
+export { Gallery, type GalleryItem, type GalleryProps };

package/dist/components/lightbox/lightbox.d.ts

@@ -0,0 +1,30 @@
+//#region src/components/lightbox/lightbox.d.ts
+export type LightboxItem = {
+  /** Endereço da imagem ampliada. */
+  src: string;
+  /** Descrição da imagem para leitores de tela. */
+  alt: string;
+};
+export type LightboxProps = {
+  items: LightboxItem[];
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Índice da imagem exibida (modo controlado). */
+  index?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Nome acessível do visualizador. */
+  label?: string;
+  closeLabel?: string;
+  previousLabel?: string;
+  nextLabel?: string;
+  testID?: string;
+};
+/**
+ * Imagem ampliada sobre um fundo escurecido, com contador (`1 / 6`), setas e fechar. Deslize para
+ * os lados para trocar de foto; as setas dão a volta (da última vai para a primeira).
+ */
+export declare function Lightbox({ items, open, defaultOpen, onOpenChange, index, defaultIndex, onIndexChange, label, closeLabel, previousLabel, nextLabel, testID }: LightboxProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=lightbox.d.ts.map

package/dist/components/lightbox/lightbox.js

@@ -0,0 +1,147 @@
+import { CloseIcon } from "../_shared/status.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 { useTransition } from "../_shared/use-transition.js";
+import { Backdrop } from "../_shared/backdrop.js";
+import { useOpenState } from "../_shared/overlay-state.js";
+import { useEffect, useRef, useState } from "react";
+import { Animated, FlatList, Image, Modal, StyleSheet, Text, View, useWindowDimensions } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/lightbox/lightbox.tsx
+const roundButton = "rounded-full border-border-default bg-surface-elevated active:bg-bg-secondary";
+/**
+* Imagem ampliada sobre um fundo escurecido, com contador (`1 / 6`), setas e fechar. Deslize para
+* os lados para trocar de foto; as setas dão a volta (da última vai para a primeira).
+*/
+function Lightbox({ items, open, defaultOpen, onOpenChange, index, defaultIndex = 0, onIndexChange, label = "Visualizador de imagens", closeLabel = "Fechar", previousLabel = "Foto anterior", nextLabel = "Próxima foto", testID }) {
+	const [isOpen, setOpen] = useOpenState({
+		open,
+		defaultOpen,
+		onOpenChange
+	});
+	const { mounted, progress } = useTransition(isOpen);
+	const { width, height } = useWindowDimensions();
+	const iconColor = useToken("--color-text-primary");
+	const list = useRef(null);
+	const [inner, setInner] = useState(defaultIndex);
+	const count = items.length;
+	const current = Math.min(Math.max(index ?? inner, 0), Math.max(count - 1, 0));
+	const shown = useRef(current);
+	function show(next) {
+		shown.current = next;
+		if (index === void 0) setInner(next);
+		onIndexChange?.(next);
+	}
+	function go(next) {
+		const wrapped = (next + count) % count;
+		list.current?.scrollToIndex({
+			index: wrapped,
+			animated: true
+		});
+		show(wrapped);
+	}
+	useEffect(() => {
+		if (!mounted || shown.current === current) return;
+		shown.current = current;
+		list.current?.scrollToIndex({
+			index: current,
+			animated: false
+		});
+	}, [current, mounted]);
+	function onMomentumScrollEnd(event) {
+		const next = Math.round(event.nativeEvent.contentOffset.x / width);
+		if (next !== shown.current && next >= 0 && next < count) show(next);
+	}
+	return /* @__PURE__ */ jsx(Modal, {
+		transparent: true,
+		statusBarTranslucent: true,
+		animationType: "none",
+		visible: mounted,
+		onRequestClose: () => setOpen(false),
+		children: /* @__PURE__ */ jsxs(View, {
+			className: "flex-1",
+			accessibilityViewIsModal: true,
+			accessibilityLabel: label,
+			testID,
+			children: [/* @__PURE__ */ jsx(Animated.View, {
+				pointerEvents: "box-none",
+				style: [StyleSheet.absoluteFill, { opacity: progress }],
+				children: /* @__PURE__ */ jsx(Backdrop, { onPress: () => setOpen(false) })
+			}), /* @__PURE__ */ jsxs(Animated.View, {
+				pointerEvents: "box-none",
+				style: [StyleSheet.absoluteFill, {
+					opacity: progress,
+					justifyContent: "center"
+				}],
+				children: [
+					/* @__PURE__ */ jsx(FlatList, {
+						ref: list,
+						data: items,
+						horizontal: true,
+						pagingEnabled: true,
+						showsHorizontalScrollIndicator: false,
+						keyExtractor: (item) => item.src,
+						initialScrollIndex: current,
+						getItemLayout: (_, i) => ({
+							length: width,
+							offset: width * i,
+							index: i
+						}),
+						onMomentumScrollEnd,
+						renderItem: ({ item }) => /* @__PURE__ */ jsx(View, {
+							style: {
+								width,
+								height: height * .7,
+								paddingHorizontal: 16
+							},
+							children: /* @__PURE__ */ jsx(Image, {
+								source: { uri: item.src },
+								accessibilityLabel: item.alt,
+								resizeMode: "contain",
+								className: "size-full"
+							})
+						})
+					}),
+					count > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(View, {
+						pointerEvents: "box-none",
+						className: "absolute inset-x-3 flex-row justify-between",
+						style: { top: height / 2 - 22 },
+						children: [/* @__PURE__ */ jsx(IconButton, {
+							accessibilityLabel: previousLabel,
+							variant: "tertiary",
+							className: roundButton,
+							onPress: () => go(shown.current - 1),
+							children: /* @__PURE__ */ jsx(PreviousIcon, { color: iconColor })
+						}), /* @__PURE__ */ jsx(IconButton, {
+							accessibilityLabel: nextLabel,
+							variant: "tertiary",
+							className: roundButton,
+							onPress: () => go(shown.current + 1),
+							children: /* @__PURE__ */ jsx(NextIcon, { color: iconColor })
+						})]
+					}), /* @__PURE__ */ jsxs(Text, {
+						accessibilityLiveRegion: "polite",
+						className: "absolute bottom-12 self-center text-sm font-medium leading-5 text-media-on-surface",
+						children: [
+							current + 1,
+							" / ",
+							count
+						]
+					})] }),
+					/* @__PURE__ */ jsx(IconButton, {
+						accessibilityLabel: closeLabel,
+						variant: "tertiary",
+						className: `absolute right-4 top-12 ${roundButton}`,
+						onPress: () => setOpen(false),
+						children: /* @__PURE__ */ jsx(CloseIcon, { color: iconColor })
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { Lightbox };
+
+//# sourceMappingURL=lightbox.js.map

package/dist/components/lightbox/lightbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightbox.js","names":["RNModal"],"sources":["../../../src/components/lightbox/lightbox.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { useEffect, useRef, useState } from 'react'\nimport {\n  Animated,\n  FlatList,\n  Image,\n  type NativeScrollEvent,\n  type NativeSyntheticEvent,\n  Modal as RNModal,\n  StyleSheet,\n  Text,\n  useWindowDimensions,\n  View,\n} from 'react-native'\nimport { Backdrop } from '../_shared/backdrop'\nimport { NextIcon, PreviousIcon } from '../_shared/media-icons'\nimport { useOpenState } from '../_shared/overlay-state'\nimport { CloseIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\nimport { useTransition } from '../_shared/use-transition'\nimport { IconButton } from '../icon-button'\n\nexport type LightboxItem = {\n  /** Endereço da imagem ampliada. */\n  src: string\n  /** Descrição da imagem para leitores de tela. */\n  alt: string\n}\n\nexport type LightboxProps = {\n  items: LightboxItem[]\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Índice da imagem exibida (modo controlado). */\n  index?: number\n  defaultIndex?: number\n  onIndexChange?: (index: number) => void\n  /** Nome acessível do visualizador. */\n  label?: string\n  closeLabel?: string\n  previousLabel?: string\n  nextLabel?: string\n  testID?: string\n}\n\nconst roundButton = 'rounded-full border-border-default bg-surface-elevated active:bg-bg-secondary'\n\n/**\n * Imagem ampliada sobre um fundo escurecido, com contador (`1 / 6`), setas e fechar. Deslize para\n * os lados para trocar de foto; as setas dão a volta (da última vai para a primeira).\n */\nexport function Lightbox({\n  items,\n  open,\n  defaultOpen,\n  onOpenChange,\n  index,\n  defaultIndex = 0,\n  onIndexChange,\n  label = 'Visualizador de imagens',\n  closeLabel = 'Fechar',\n  previousLabel = 'Foto anterior',\n  nextLabel = 'Próxima foto',\n  testID,\n}: LightboxProps) {\n  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange })\n  const { mounted, progress } = useTransition(isOpen)\n  const { width, height } = useWindowDimensions()\n  const iconColor = useToken('--color-text-primary')\n  const list = useRef<FlatList<LightboxItem>>(null)\n  const [inner, setInner] = useState(defaultIndex)\n  const count = items.length\n  const current = Math.min(Math.max(index ?? inner, 0), Math.max(count - 1, 0))\n  // índice em que a lista está de fato, para só rolar quando o pai troca `index` por fora\n  const shown = useRef(current)\n\n  function show(next: number) {\n    shown.current = next\n    if (index === undefined) setInner(next)\n    onIndexChange?.(next)\n  }\n\n  function go(next: number) {\n    const wrapped = (next + count) % count\n    list.current?.scrollToIndex({ index: wrapped, animated: true })\n    show(wrapped)\n  }\n\n  useEffect(() => {\n    if (!mounted || shown.current === current) return\n    shown.current = current\n    list.current?.scrollToIndex({ index: current, animated: false })\n  }, [current, mounted])\n\n  function onMomentumScrollEnd(event: NativeSyntheticEvent<NativeScrollEvent>) {\n    const next = Math.round(event.nativeEvent.contentOffset.x / width)\n    if (next !== shown.current && next >= 0 && next < count) show(next)\n  }\n\n  return (\n    <RNModal\n      transparent\n      statusBarTranslucent\n      animationType=\"none\"\n      visible={mounted}\n      onRequestClose={() => setOpen(false)}\n    >\n      <View className=\"flex-1\" accessibilityViewIsModal accessibilityLabel={label} testID={testID}>\n        <Animated.View\n          pointerEvents=\"box-none\"\n          style={[StyleSheet.absoluteFill, { opacity: progress }]}\n        >\n          <Backdrop onPress={() => setOpen(false)} />\n        </Animated.View>\n        <Animated.View\n          pointerEvents=\"box-none\"\n          style={[StyleSheet.absoluteFill, { opacity: progress, justifyContent: 'center' }]}\n        >\n          <FlatList\n            ref={list}\n            data={items}\n            horizontal\n            pagingEnabled\n            showsHorizontalScrollIndicator={false}\n            keyExtractor={(item) => item.src}\n            initialScrollIndex={current}\n            getItemLayout={(_, i) => ({ length: width, offset: width * i, index: i })}\n            onMomentumScrollEnd={onMomentumScrollEnd}\n            renderItem={({ item }) => (\n              <View style={{ width, height: height * 0.7, paddingHorizontal: 16 }}>\n                <Image\n                  source={{ uri: item.src }}\n                  accessibilityLabel={item.alt}\n                  resizeMode=\"contain\"\n                  className=\"size-full\"\n                />\n              </View>\n            )}\n          />\n          {count > 1 && (\n            <>\n              <View\n                pointerEvents=\"box-none\"\n                className=\"absolute inset-x-3 flex-row justify-between\"\n                style={{ top: height / 2 - 22 }}\n              >\n                <IconButton\n                  accessibilityLabel={previousLabel}\n                  variant=\"tertiary\"\n                  className={roundButton}\n                  onPress={() => go(shown.current - 1)}\n                >\n                  <PreviousIcon color={iconColor} />\n                </IconButton>\n                <IconButton\n                  accessibilityLabel={nextLabel}\n                  variant=\"tertiary\"\n                  className={roundButton}\n                  onPress={() => go(shown.current + 1)}\n                >\n                  <NextIcon color={iconColor} />\n                </IconButton>\n              </View>\n              <Text\n                accessibilityLiveRegion=\"polite\"\n                className=\"absolute bottom-12 self-center text-sm font-medium leading-5 text-media-on-surface\"\n              >\n                {current + 1} / {count}\n              </Text>\n            </>\n          )}\n          <IconButton\n            accessibilityLabel={closeLabel}\n            variant=\"tertiary\"\n            className={`absolute right-4 top-12 ${roundButton}`}\n            onPress={() => setOpen(false)}\n          >\n            <CloseIcon color={iconColor} />\n          </IconButton>\n        </Animated.View>\n      </View>\n    </RNModal>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { VideoPlayer, VideoPlayerProps } from "./video-player.js";
+export { VideoPlayer, type VideoPlayerProps };

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

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+import { ViewProps } from "react-native";
+//#region src/components/video-player/video-player.d.ts
+export type VideoPlayerProps = Omit<ViewProps, 'style'> & {
+  className?: string;
+  /** A superfície de vídeo (ex.: o `VideoView` do `expo-video`), que preenche o player. */
+  children: ReactNode;
+  /** Nome acessível do player. */
+  label?: string;
+  /** Tocando agora: mostra o botão de pausar e esconde o play central. */
+  playing?: boolean;
+  /** Posição atual, em segundos. */
+  position?: number;
+  /** Duração total, em segundos. */
+  duration?: number;
+  /** Sem som: mostra o ícone de volume cortado. */
+  muted?: boolean;
+  /** Em tela cheia: mostra o ícone de sair. Só vale com `onToggleFullscreen`. */
+  fullscreen?: boolean;
+  onPlayPause?: () => void;
+  /** Chamado com a posição (em segundos) tocada ou arrastada na barra. */
+  onSeek?: (seconds: number) => void;
+  onToggleMute?: () => void;
+  /** Sem ele, o botão de tela cheia não aparece. */
+  onToggleFullscreen?: () => void;
+  /** Tempo sem interação, em ms, até esconder os controles durante a reprodução. Padrão: 2500. */
+  hideControlsAfter?: number;
+};
+/**
+ * Casca de player de vídeo: play central, posição, tempo, mudo e tela cheia sobre o seu vídeo.
+ * Não toca nada: quem usa guarda o estado (por exemplo com `expo-video`) e o passa por props,
+ * ligando os `on…` ao player de verdade. Tocar no vídeo alterna play/pause e mostra os controles,
+ * que somem depois de um tempo sem toques enquanto toca (com leitor de tela ligado, ficam).
+ */
+export declare function VideoPlayer({ className, children, label, playing, position, duration, muted, fullscreen, onPlayPause, onSeek, onToggleMute, onToggleFullscreen, hideControlsAfter, ...props }: VideoPlayerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=video-player.d.ts.map

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

@@ -0,0 +1,178 @@
+import { cn } from "../../utils/cn.js";
+import { useToken } from "../_shared/use-token.js";
+import { formatTime, useSeek } from "../_shared/media.js";
+import { MaximizeIcon, MinimizeIcon, PauseIcon, PlayIcon, VolumeIcon, VolumeMutedIcon } from "../_shared/media-icons.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AccessibilityInfo, Pressable, StyleSheet, Text, View } from "react-native";
+import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/video-player/video-player.tsx
+const button = "size-9 shrink-0 items-center justify-center rounded-full active:bg-media-on-surface/15";
+/**
+* Casca de player de vídeo: play central, posição, tempo, mudo e tela cheia sobre o seu vídeo.
+* Não toca nada: quem usa guarda o estado (por exemplo com `expo-video`) e o passa por props,
+* ligando os `on…` ao player de verdade. Tocar no vídeo alterna play/pause e mostra os controles,
+* que somem depois de um tempo sem toques enquanto toca (com leitor de tela ligado, ficam).
+*/
+function VideoPlayer({ className, children, label = "Vídeo", playing = false, position = 0, duration = 0, muted = false, fullscreen = false, onPlayPause, onSeek, onToggleMute, onToggleFullscreen, hideControlsAfter = 2500, ...props }) {
+	const [active, setActive] = useState(true);
+	const [screenReader, setScreenReader] = useState(false);
+	const timer = useRef(void 0);
+	const onSurface = useToken("--color-media-on-surface");
+	const accent = useToken("--color-interactive-primary");
+	const scrim = useToken("--color-media-surface") ?? "#000000";
+	const seek = useSeek({
+		position,
+		duration,
+		label: "Posição do vídeo",
+		onSeek
+	});
+	const visible = active || !playing || screenReader;
+	const progress = duration ? Math.min(position / duration, 1) * 100 : 0;
+	useEffect(() => {
+		AccessibilityInfo.isScreenReaderEnabled().then(setScreenReader);
+		const subscription = AccessibilityInfo.addEventListener("screenReaderChanged", setScreenReader);
+		return () => subscription.remove();
+	}, []);
+	const show = useCallback(() => {
+		setActive(true);
+		clearTimeout(timer.current);
+		timer.current = setTimeout(() => setActive(false), hideControlsAfter);
+	}, [hideControlsAfter]);
+	useEffect(() => {
+		if (playing) show();
+		else setActive(true);
+		return () => clearTimeout(timer.current);
+	}, [playing, show]);
+	return /* @__PURE__ */ jsxs(View, {
+		accessibilityLabel: label,
+		className: cn("aspect-video w-full overflow-hidden rounded-lg bg-media-surface shadow-lg", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(View, {
+				pointerEvents: "none",
+				className: "absolute inset-0",
+				children
+			}),
+			/* @__PURE__ */ jsx(Pressable, {
+				accessible: false,
+				onPress: () => {
+					onPlayPause?.();
+					show();
+				},
+				className: "absolute inset-0",
+				children: !playing && /* @__PURE__ */ jsx(View, {
+					pointerEvents: "none",
+					className: "absolute inset-0 bg-media-surface/30"
+				})
+			}),
+			!playing && /* @__PURE__ */ jsx(View, {
+				pointerEvents: "box-none",
+				className: "absolute inset-0 items-center justify-center",
+				children: /* @__PURE__ */ jsx(Pressable, {
+					accessible: false,
+					importantForAccessibility: "no",
+					onPress: onPlayPause,
+					className: "size-16 items-center justify-center rounded-full bg-media-on-surface shadow-lg",
+					children: /* @__PURE__ */ jsx(PlayIcon, {
+						filled: true,
+						size: 28,
+						color: accent
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				pointerEvents: visible ? "box-none" : "none",
+				importantForAccessibility: visible ? "auto" : "no-hide-descendants",
+				accessibilityElementsHidden: !visible,
+				className: cn("absolute inset-x-0 bottom-0 px-4 pb-3 pt-[30px]", !visible && "opacity-0"),
+				children: [
+					/* @__PURE__ */ jsxs(Svg, {
+						pointerEvents: "none",
+						style: StyleSheet.absoluteFill,
+						preserveAspectRatio: "none",
+						children: [/* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsxs(LinearGradient, {
+							id: "scrim",
+							x1: "0",
+							y1: "1",
+							x2: "0",
+							y2: "0",
+							children: [/* @__PURE__ */ jsx(Stop, {
+								offset: "0",
+								stopColor: scrim,
+								stopOpacity: .65
+							}), /* @__PURE__ */ jsx(Stop, {
+								offset: "1",
+								stopColor: scrim,
+								stopOpacity: 0
+							})]
+						}) }), /* @__PURE__ */ jsx(Rect, {
+							width: "100%",
+							height: "100%",
+							fill: "url(#scrim)"
+						})]
+					}),
+					/* @__PURE__ */ jsx(View, {
+						...seek.props,
+						className: "mb-1 h-4 w-full justify-center",
+						children: /* @__PURE__ */ jsx(View, {
+							pointerEvents: "none",
+							className: "h-1 w-full rounded-full bg-media-on-surface/30",
+							children: /* @__PURE__ */ jsx(View, {
+								className: "h-full rounded-full bg-media-accent",
+								style: { width: `${progress}%` }
+							})
+						})
+					}),
+					/* @__PURE__ */ jsxs(View, {
+						className: "h-9 flex-row items-center justify-between",
+						children: [/* @__PURE__ */ jsxs(View, {
+							className: "flex-row items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Pressable, {
+								accessibilityRole: "button",
+								accessibilityLabel: playing ? "Pausar" : "Reproduzir",
+								onPress: () => {
+									onPlayPause?.();
+									show();
+								},
+								className: button,
+								children: playing ? /* @__PURE__ */ jsx(PauseIcon, { color: onSurface }) : /* @__PURE__ */ jsx(PlayIcon, { color: onSurface })
+							}), /* @__PURE__ */ jsxs(Text, {
+								accessible: false,
+								className: "text-xs font-medium leading-4 text-media-on-surface",
+								style: { fontVariant: ["tabular-nums"] },
+								children: [
+									formatTime(position),
+									" / ",
+									formatTime(duration)
+								]
+							})]
+						}), /* @__PURE__ */ jsxs(View, {
+							className: "flex-row items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Pressable, {
+								accessibilityRole: "button",
+								accessibilityLabel: muted ? "Ativar o som" : "Silenciar",
+								onPress: () => {
+									onToggleMute?.();
+									show();
+								},
+								className: button,
+								children: muted ? /* @__PURE__ */ jsx(VolumeMutedIcon, { color: onSurface }) : /* @__PURE__ */ jsx(VolumeIcon, { color: onSurface })
+							}), onToggleFullscreen && /* @__PURE__ */ jsx(Pressable, {
+								accessibilityRole: "button",
+								accessibilityLabel: fullscreen ? "Sair da tela cheia" : "Tela cheia",
+								onPress: onToggleFullscreen,
+								className: button,
+								children: fullscreen ? /* @__PURE__ */ jsx(MinimizeIcon, { color: onSurface }) : /* @__PURE__ */ jsx(MaximizeIcon, { color: onSurface })
+							})]
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { VideoPlayer };
+
+//# sourceMappingURL=video-player.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"video-player.js","names":[],"sources":["../../../src/components/video-player/video-player.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { type ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport { AccessibilityInfo, Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native'\nimport Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg'\nimport { cn } from '../../utils/cn'\nimport { formatTime, useSeek } from '../_shared/media'\nimport {\n  MaximizeIcon,\n  MinimizeIcon,\n  PauseIcon,\n  PlayIcon,\n  VolumeIcon,\n  VolumeMutedIcon,\n} from '../_shared/media-icons'\nimport { useToken } from '../_shared/use-token'\n\nexport type VideoPlayerProps = Omit<ViewProps, 'style'> & {\n  className?: string\n  /** A superfície de vídeo (ex.: o `VideoView` do `expo-video`), que preenche o player. */\n  children: ReactNode\n  /** Nome acessível do player. */\n  label?: string\n  /** Tocando agora: mostra o botão de pausar e esconde o play central. */\n  playing?: boolean\n  /** Posição atual, em segundos. */\n  position?: number\n  /** Duração total, em segundos. */\n  duration?: number\n  /** Sem som: mostra o ícone de volume cortado. */\n  muted?: boolean\n  /** Em tela cheia: mostra o ícone de sair. Só vale com `onToggleFullscreen`. */\n  fullscreen?: boolean\n  onPlayPause?: () => void\n  /** Chamado com a posição (em segundos) tocada ou arrastada na barra. */\n  onSeek?: (seconds: number) => void\n  onToggleMute?: () => void\n  /** Sem ele, o botão de tela cheia não aparece. */\n  onToggleFullscreen?: () => void\n  /** Tempo sem interação, em ms, até esconder os controles durante a reprodução. Padrão: 2500. */\n  hideControlsAfter?: number\n}\n\nconst button =\n  'size-9 shrink-0 items-center justify-center rounded-full active:bg-media-on-surface/15'\n\n/**\n * Casca de player de vídeo: play central, posição, tempo, mudo e tela cheia sobre o seu vídeo.\n * Não toca nada: quem usa guarda o estado (por exemplo com `expo-video`) e o passa por props,\n * ligando os `on…` ao player de verdade. Tocar no vídeo alterna play/pause e mostra os controles,\n * que somem depois de um tempo sem toques enquanto toca (com leitor de tela ligado, ficam).\n */\nexport function VideoPlayer({\n  className,\n  children,\n  label = 'Vídeo',\n  playing = false,\n  position = 0,\n  duration = 0,\n  muted = false,\n  fullscreen = false,\n  onPlayPause,\n  onSeek,\n  onToggleMute,\n  onToggleFullscreen,\n  hideControlsAfter = 2500,\n  ...props\n}: VideoPlayerProps) {\n  const [active, setActive] = useState(true)\n  const [screenReader, setScreenReader] = useState(false)\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  const onSurface = useToken('--color-media-on-surface')\n  const accent = useToken('--color-interactive-primary')\n  const scrim = useToken('--color-media-surface') ?? '#000000'\n  const seek = useSeek({ position, duration, label: 'Posição do vídeo', onSeek })\n  const visible = active || !playing || screenReader\n  const progress = duration ? Math.min(position / duration, 1) * 100 : 0\n\n  useEffect(() => {\n    AccessibilityInfo.isScreenReaderEnabled().then(setScreenReader)\n    const subscription = AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReader)\n    return () => subscription.remove()\n  }, [])\n\n  const show = useCallback(() => {\n    setActive(true)\n    clearTimeout(timer.current)\n    timer.current = setTimeout(() => setActive(false), hideControlsAfter)\n  }, [hideControlsAfter])\n\n  useEffect(() => {\n    if (playing) show()\n    else setActive(true)\n    return () => clearTimeout(timer.current)\n  }, [playing, show])\n\n  return (\n    <View\n      accessibilityLabel={label}\n      className={cn(\n        'aspect-video w-full overflow-hidden rounded-lg bg-media-surface shadow-lg',\n        className,\n      )}\n      {...props}\n    >\n      <View pointerEvents=\"none\" className=\"absolute inset-0\">\n        {children}\n      </View>\n      <Pressable\n        accessible={false}\n        onPress={() => {\n          onPlayPause?.()\n          show()\n        }}\n        className=\"absolute inset-0\"\n      >\n        {!playing && <View pointerEvents=\"none\" className=\"absolute inset-0 bg-media-surface/30\" />}\n      </Pressable>\n      {!playing && (\n        <View pointerEvents=\"box-none\" className=\"absolute inset-0 items-center justify-center\">\n          <Pressable\n            accessible={false}\n            importantForAccessibility=\"no\"\n            onPress={onPlayPause}\n            className=\"size-16 items-center justify-center rounded-full bg-media-on-surface shadow-lg\"\n          >\n            <PlayIcon filled size={28} color={accent} />\n          </Pressable>\n        </View>\n      )}\n      <View\n        pointerEvents={visible ? 'box-none' : 'none'}\n        importantForAccessibility={visible ? 'auto' : 'no-hide-descendants'}\n        accessibilityElementsHidden={!visible}\n        className={cn('absolute inset-x-0 bottom-0 px-4 pb-3 pt-[30px]', !visible && 'opacity-0')}\n      >\n        <Svg pointerEvents=\"none\" style={StyleSheet.absoluteFill} preserveAspectRatio=\"none\">\n          <Defs>\n            <LinearGradient id=\"scrim\" x1=\"0\" y1=\"1\" x2=\"0\" y2=\"0\">\n              <Stop offset=\"0\" stopColor={scrim} stopOpacity={0.65} />\n              <Stop offset=\"1\" stopColor={scrim} stopOpacity={0} />\n            </LinearGradient>\n          </Defs>\n          <Rect width=\"100%\" height=\"100%\" fill=\"url(#scrim)\" />\n        </Svg>\n        <View {...seek.props} className=\"mb-1 h-4 w-full justify-center\">\n          {/* Filhos ignoram toques para que `locationX` seja sempre relativo à barra. */}\n          <View pointerEvents=\"none\" className=\"h-1 w-full rounded-full bg-media-on-surface/30\">\n            <View\n              className=\"h-full rounded-full bg-media-accent\"\n              style={{ width: `${progress}%` }}\n            />\n          </View>\n        </View>\n        <View className=\"h-9 flex-row items-center justify-between\">\n          <View className=\"flex-row items-center gap-2\">\n            <Pressable\n              accessibilityRole=\"button\"\n              accessibilityLabel={playing ? 'Pausar' : 'Reproduzir'}\n              onPress={() => {\n                onPlayPause?.()\n                show()\n              }}\n              className={button}\n            >\n              {playing ? <PauseIcon color={onSurface} /> : <PlayIcon color={onSurface} />}\n            </Pressable>\n            <Text\n              accessible={false}\n              className=\"text-xs font-medium leading-4 text-media-on-surface\"\n              style={{ fontVariant: ['tabular-nums'] }}\n            >\n              {formatTime(position)} / {formatTime(duration)}\n            </Text>\n          </View>\n          <View className=\"flex-row items-center gap-2\">\n            <Pressable\n              accessibilityRole=\"button\"\n              accessibilityLabel={muted ? 'Ativar o som' : 'Silenciar'}\n              onPress={() => {\n                onToggleMute?.()\n                show()\n              }}\n              className={button}\n            >\n              {muted ? <VolumeMutedIcon color={onSurface} /> : <VolumeIcon color={onSurface} />}\n            </Pressable>\n            {onToggleFullscreen && (\n              <Pressable\n                accessibilityRole=\"button\"\n                accessibilityLabel={fullscreen ? 'Sair da tela cheia' : 'Tela cheia'}\n                onPress={onToggleFullscreen}\n                className={button}\n              >\n                {fullscreen ? (\n                  <MinimizeIcon color={onSurface} />\n                ) : (\n                  <MaximizeIcon color={onSurface} />\n                )}\n              </Pressable>\n            )}\n          </View>\n        </View>\n      </View>\n    </View>\n  )\n}\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import { Accordion, AccordionItem, AccordionItemProps, AccordionProps } from "./
 import "./components/accordion/index.js";
 import { Alert, AlertProps } from "./components/alert/alert.js";
 import "./components/alert/index.js";
+import { AudioPlayer, AudioPlayerProps } from "./components/audio-player/audio-player.js";
+import "./components/audio-player/index.js";
 import { Avatar, AvatarProps } from "./components/avatar/avatar.js";
 import "./components/avatar/index.js";
 import { Badge, BadgeProps } from "./components/badge/badge.js";
@@ -14,6 +16,8 @@ import { Button, ButtonProps } from "./components/button/button.js";
 import "./components/button/index.js";
 import { Card, CardProps } from "./components/card/card.js";
 import "./components/card/index.js";
+import { Carousel, CarouselItem, CarouselProps } from "./components/carousel/carousel.js";
+import "./components/carousel/index.js";
 import { Checkbox, CheckboxProps } from "./components/checkbox/checkbox.js";
 import "./components/checkbox/index.js";
 import { Combobox, ComboboxOption, ComboboxProps } from "./components/combobox/combobox.js";
@@ -32,6 +36,9 @@ import { Drawer, DrawerClose, DrawerProps } from "./components/drawer/drawer.js"
 import "./components/drawer/index.js";
 import { Field, FieldProps } from "./components/field/field.js";
 import "./components/field/index.js";
+import { Lightbox, LightboxItem, LightboxProps } from "./components/lightbox/lightbox.js";
+import { Gallery, GalleryItem, GalleryProps } from "./components/gallery/gallery.js";
+import "./components/gallery/index.js";
 import { Grid, GridItem, GridItemProps, GridProps } from "./components/grid/grid.js";
 import "./components/grid/index.js";
 import { IconButton, IconButtonProps } from "./components/icon-button/icon-button.js";
@@ -82,6 +89,8 @@ import { Tooltip, TooltipProps } from "./components/tooltip/tooltip.js";
 import "./components/tooltip/index.js";
 import { Upload, UploadFile, UploadFileStatus, UploadProps } from "./components/upload/upload.js";
 import "./components/upload/index.js";
+import { VideoPlayer, VideoPlayerProps } from "./components/video-player/video-player.js";
+import "./components/video-player/index.js";
 import { darkColors, lightColors, overlayOpacity, palette, radius, typography } from "./tokens/generated.js";
 import { cn } from "./utils/cn.js";
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, Container, type ContainerProps, DatePicker, type DatePickerProps, type DatePreset, type DateRange, DateRangePicker, type DateRangePickerProps, Divider, type DividerProps, Drawer, DrawerClose, type DrawerProps, Field, type FieldProps, Grid, GridItem, type GridItemProps, type GridProps, IconButton, type IconButtonProps, Input, type InputProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Menu, MenuItem, type MenuItemProps, MenuLabel, type MenuLabelProps, type MenuProps, MenuSeparator, type MenuSeparatorProps, Modal, ModalClose, type ModalProps, Pagination, type PaginationProps, Popover, PopoverClose, type PopoverProps, Radio, type RadioProps, SegmentedControl, type SegmentedControlProps, SegmentedItem, type SegmentedItemProps, Select, SelectOption, type SelectOptionProps, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Step, type StepProps, Stepper, type StepperProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, Upload, type UploadFile, type UploadFileStatus, type UploadProps, cn, darkColors, getDatePresets, lightColors, overlayOpacity, palette, radius, typography, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, type AlertProps, AudioPlayer, type AudioPlayerProps, Avatar, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Carousel, CarouselItem, type CarouselProps, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, Container, type ContainerProps, DatePicker, type DatePickerProps, type DatePreset, type DateRange, DateRangePicker, type DateRangePickerProps, Divider, type DividerProps, Drawer, DrawerClose, type DrawerProps, Field, type FieldProps, Gallery, type GalleryItem, type GalleryProps, Grid, GridItem, type GridItemProps, type GridProps, IconButton, type IconButtonProps, Input, type InputProps, Lightbox, type LightboxItem, type LightboxProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Menu, MenuItem, type MenuItemProps, MenuLabel, type MenuLabelProps, type MenuProps, MenuSeparator, type MenuSeparatorProps, Modal, ModalClose, type ModalProps, Pagination, type PaginationProps, Popover, PopoverClose, type PopoverProps, Radio, type RadioProps, SegmentedControl, type SegmentedControlProps, SegmentedItem, type SegmentedItemProps, Select, SelectOption, type SelectOptionProps, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Step, type StepProps, Stepper, type StepperProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, Upload, type UploadFile, type UploadFileStatus, type UploadProps, VideoPlayer, type VideoPlayerProps, cn, darkColors, getDatePresets, lightColors, overlayOpacity, palette, radius, typography, useToast };

package/dist/index.js

@@ -3,12 +3,14 @@ import { Accordion, AccordionItem } from "./components/accordion/accordion.js";
 import { Spinner } from "./components/spinner/spinner.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
 import { Alert } from "./components/alert/alert.js";
+import { AudioPlayer } from "./components/audio-player/audio-player.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { Badge } from "./components/badge/badge.js";
 import { Banner } from "./components/banner/banner.js";
 import { Breadcrumb, BreadcrumbItem } from "./components/breadcrumb/breadcrumb.js";
 import { Button } from "./components/button/button.js";
 import { Card } from "./components/card/card.js";
+import { Carousel, CarouselItem } from "./components/carousel/carousel.js";
 import { Checkbox } from "./components/checkbox/checkbox.js";
 import { Combobox } from "./components/combobox/combobox.js";
 import { Container } from "./components/container/container.js";
@@ -20,6 +22,8 @@ import { DateRangePicker } from "./components/date-picker/date-range-picker.js";
 import { Divider } from "./components/divider/divider.js";
 import { Drawer, DrawerClose } from "./components/drawer/drawer.js";
 import { Field } from "./components/field/field.js";
+import { Lightbox } from "./components/lightbox/lightbox.js";
+import { Gallery } from "./components/gallery/gallery.js";
 import { Grid, GridItem } from "./components/grid/grid.js";
 import { Input } from "./components/input/input.js";
 import { Link } from "./components/link/link.js";
@@ -43,4 +47,5 @@ import { Textarea } from "./components/textarea/textarea.js";
 import { ToastProvider, useToast } from "./components/toast/toast.js";
 import { Tooltip } from "./components/tooltip/tooltip.js";
 import { Upload } from "./components/upload/upload.js";
-export { Accordion, AccordionItem, Alert, Avatar, Badge, Banner, Breadcrumb, BreadcrumbItem, Button, Calendar, Card, Checkbox, Combobox, Container, DatePicker, DateRangePicker, Divider, Drawer, DrawerClose, Field, Grid, GridItem, IconButton, Input, Link, List, ListItem, Menu, MenuItem, MenuLabel, MenuSeparator, Modal, ModalClose, Pagination, Popover, PopoverClose, Radio, SegmentedControl, SegmentedItem, Select, SelectOption, Skeleton, Slider, Spinner, Stack, Step, Stepper, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, Tag, Textarea, ToastProvider, Tooltip, Upload, cn, darkColors, getDatePresets, lightColors, overlayOpacity, palette, radius, typography, useToast };
+import { VideoPlayer } from "./components/video-player/video-player.js";
+export { Accordion, AccordionItem, Alert, AudioPlayer, Avatar, Badge, Banner, Breadcrumb, BreadcrumbItem, Button, Calendar, Card, Carousel, CarouselItem, Checkbox, Combobox, Container, DatePicker, DateRangePicker, Divider, Drawer, DrawerClose, Field, Gallery, Grid, GridItem, IconButton, Input, Lightbox, Link, List, ListItem, Menu, MenuItem, MenuLabel, MenuSeparator, Modal, ModalClose, Pagination, Popover, PopoverClose, Radio, SegmentedControl, SegmentedItem, Select, SelectOption, Skeleton, Slider, Spinner, Stack, Step, Stepper, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, Tag, Textarea, ToastProvider, Tooltip, Upload, VideoPlayer, cn, darkColors, getDatePresets, lightColors, overlayOpacity, palette, radius, typography, useToast };

package/dist/tokens/generated.d.ts

@@ -172,6 +172,10 @@ export declare const lightColors: {
   readonly selectionToggleTrackOff: "#ccd5e2";
   readonly selectionToggleTrackOffHover: "#96a3b9";
   readonly selectionToggleTrackOnHover: "#7b24d1";
+  readonly mediaWaveRest: "#ccd5e2";
+  readonly mediaSurface: "#000000";
+  readonly mediaOnSurface: "#ffffff";
+  readonly mediaAccent: "#bd84ff";
 };
 export declare const darkColors: {
   readonly textPrimary: "#f8fafc";
@@ -264,6 +268,10 @@ export declare const darkColors: {
   readonly selectionToggleTrackOff: "#49556a";
   readonly selectionToggleTrackOffHover: "#96a3b9";
   readonly selectionToggleTrackOnHover: "#d6b4ff";
+  readonly mediaWaveRest: "#66748c";
+  readonly mediaSurface: "#000000";
+  readonly mediaOnSurface: "#ffffff";
+  readonly mediaAccent: "#bd84ff";
 };
 export declare const radius: {
   readonly none: 0;

package/dist/tokens/generated.js

@@ -171,7 +171,11 @@ const lightColors = {
 	"selectionTextDisabled": "#ccd5e2",
 	"selectionToggleTrackOff": "#ccd5e2",
 	"selectionToggleTrackOffHover": "#96a3b9",
-	"selectionToggleTrackOnHover": "#7b24d1"
+	"selectionToggleTrackOnHover": "#7b24d1",
+	"mediaWaveRest": "#ccd5e2",
+	"mediaSurface": "#000000",
+	"mediaOnSurface": "#ffffff",
+	"mediaAccent": "#bd84ff"
 };
 const darkColors = {
 	"textPrimary": "#f8fafc",
@@ -263,7 +267,11 @@ const darkColors = {
 	"selectionTextDisabled": "#49556a",
 	"selectionToggleTrackOff": "#49556a",
 	"selectionToggleTrackOffHover": "#96a3b9",
-	"selectionToggleTrackOnHover": "#d6b4ff"
+	"selectionToggleTrackOnHover": "#d6b4ff",
+	"mediaWaveRest": "#66748c",
+	"mediaSurface": "#000000",
+	"mediaOnSurface": "#ffffff",
+	"mediaAccent": "#bd84ff"
 };
 const radius = {
 	"none": 0,