@innovui/react-native 0.1.0 → 0.3.0

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,

package/dist/tokens/generated.js.map

@@ -1 +1 @@
-{"version":3,"file":"generated.js","names":[],"sources":["../../src/tokens/generated.ts"],"sourcesContent":["// Arquivo gerado por scripts/generate-tokens.ts a partir de packages/react/src/styles/tokens.css.\n// Não edite à mão: rode `pnpm --filter @innovui/react-native generate:tokens`.\n\nexport const palette = {\n  \"gray50\": \"#f8fafc\",\n  \"gray100\": \"#f1f5f9\",\n  \"gray200\": \"#e3e8f0\",\n  \"gray300\": \"#ccd5e2\",\n  \"gray400\": \"#96a3b9\",\n  \"gray500\": \"#66748c\",\n  \"gray600\": \"#49556a\",\n  \"gray700\": \"#354156\",\n  \"gray800\": \"#20293c\",\n  \"gray900\": \"#10172b\",\n  \"purple50\": \"#faf5ff\",\n  \"purple100\": \"#f2e8ff\",\n  \"purple200\": \"#e8d5ff\",\n  \"purple300\": \"#d6b4ff\",\n  \"purple400\": \"#bd84ff\",\n  \"purple500\": \"#a456fb\",\n  \"purple600\": \"#9035ee\",\n  \"purple700\": \"#7b24d1\",\n  \"purple800\": \"#6822ab\",\n  \"purple900\": \"#561d89\",\n  \"blue50\": \"#f0f6ff\",\n  \"blue100\": \"#ddeaff\",\n  \"blue200\": \"#c2dbff\",\n  \"blue300\": \"#9ac5ff\",\n  \"blue400\": \"#6ca6fd\",\n  \"blue500\": \"#4b83f9\",\n  \"blue600\": \"#3664ef\",\n  \"blue700\": \"#2d50db\",\n  \"blue800\": \"#2841b2\",\n  \"blue900\": \"#1e3a8a\",\n  \"green50\": \"#f1fdf4\",\n  \"green100\": \"#dffce6\",\n  \"green200\": \"#c1f7cf\",\n  \"green300\": \"#93efaa\",\n  \"green400\": \"#63de7c\",\n  \"green500\": \"#47c559\",\n  \"green600\": \"#37a345\",\n  \"green700\": \"#2c803a\",\n  \"green800\": \"#256532\",\n  \"green900\": \"#1f532b\",\n  \"yellow50\": \"#fdf9c0\",\n  \"yellow100\": \"#fcf083\",\n  \"yellow200\": \"#f9df34\",\n  \"yellow300\": \"#f5cb00\",\n  \"yellow400\": \"#e5b200\",\n  \"yellow500\": \"#c48900\",\n  \"yellow600\": \"#9c6100\",\n  \"yellow700\": \"#814c01\",\n  \"yellow800\": \"#6d3f0b\",\n  \"yellow900\": \"#402003\",\n  \"orange50\": \"#fef7ed\",\n  \"orange100\": \"#fdedd4\",\n  \"orange200\": \"#fad7a7\",\n  \"orange300\": \"#f7b96f\",\n  \"orange400\": \"#f39130\",\n  \"orange500\": \"#f07200\",\n  \"orange600\": \"#e15600\",\n  \"orange700\": \"#ba3f00\",\n  \"orange800\": \"#943308\",\n  \"orange900\": \"#772c0c\",\n  \"red50\": \"#fdf2f2\",\n  \"red100\": \"#fce2e2\",\n  \"red200\": \"#facac9\",\n  \"red300\": \"#f5a4a4\",\n  \"red400\": \"#ef706f\",\n  \"red500\": \"#e54240\",\n  \"red600\": \"#d3221e\",\n  \"red700\": \"#b11815\",\n  \"red800\": \"#921916\",\n  \"red900\": \"#7a1c1a\",\n  \"pink50\": \"#fcf2f8\",\n  \"pink100\": \"#fae7f3\",\n  \"pink200\": \"#f8cfe9\",\n  \"pink300\": \"#f3a8d5\",\n  \"pink400\": \"#ec71b7\",\n  \"pink500\": \"#e3479a\",\n  \"pink600\": \"#d22477\",\n  \"pink700\": \"#b6145d\",\n  \"pink800\": \"#96154d\",\n  \"pink900\": \"#7d1743\"\n} as const\n\nexport const lightColors = {\n  \"textPrimary\": \"#10172b\",\n  \"textSecondary\": \"#49556a\",\n  \"textTertiary\": \"#96a3b9\",\n  \"textDisabled\": \"#ccd5e2\",\n  \"textInverse\": \"#ffffff\",\n  \"textInverseSecondary\": \"#96a3b9\",\n  \"textBrand\": \"#9035ee\",\n  \"bgPrimary\": \"#ffffff\",\n  \"bgSecondary\": \"#f8fafc\",\n  \"bgTertiary\": \"#f1f5f9\",\n  \"bgInverse\": \"#10172b\",\n  \"bgSkeleton\": \"#e3e8f0\",\n  \"bgSuccessEmphasis\": \"#37a345\",\n  \"borderDefault\": \"#e3e8f0\",\n  \"borderStrong\": \"#96a3b9\",\n  \"borderFocus\": \"#bd84ff\",\n  \"surfacePrimary\": \"#ffffff\",\n  \"surfaceElevated\": \"#ffffff\",\n  \"surfaceOverlay\": \"#10172b\",\n  \"interactivePrimary\": \"#9035ee\",\n  \"interactivePrimaryHover\": \"#7b24d1\",\n  \"interactiveDisabled\": \"#e3e8f0\",\n  \"statusSuccessText\": \"#2c803a\",\n  \"statusSuccessBg\": \"#f1fdf4\",\n  \"statusSuccessBorder\": \"#47c559\",\n  \"statusErrorText\": \"#d3221e\",\n  \"statusErrorBg\": \"#fdf2f2\",\n  \"statusErrorBorder\": \"#e54240\",\n  \"statusWarningText\": \"#9c6100\",\n  \"statusWarningBg\": \"#fdf9c0\",\n  \"statusWarningBorder\": \"#e5b200\",\n  \"statusInfoText\": \"#3664ef\",\n  \"statusInfoBg\": \"#f0f6ff\",\n  \"statusInfoBorder\": \"#4b83f9\",\n  \"statusNeutralText\": \"#49556a\",\n  \"statusNeutralBg\": \"#f8fafc\",\n  \"statusNeutralBorder\": \"#e3e8f0\",\n  \"statusPendingText\": \"#9c6100\",\n  \"statusPendingBg\": \"#fdf9c0\",\n  \"buttonPrimaryText\": \"#ffffff\",\n  \"buttonPrimaryBg\": \"#9035ee\",\n  \"buttonPrimaryBgHover\": \"#7b24d1\",\n  \"buttonPrimaryBgActive\": \"#6822ab\",\n  \"buttonSecondaryText\": \"#9035ee\",\n  \"buttonSecondaryBg\": \"#faf5ff\",\n  \"buttonSecondaryBgHover\": \"#f2e8ff\",\n  \"buttonTertiaryText\": \"#10172b\",\n  \"buttonTertiaryBorder\": \"#ccd5e2\",\n  \"buttonGhostText\": \"#9035ee\",\n  \"buttonGhostBgHover\": \"#faf5ff\",\n  \"buttonDestructiveText\": \"#ffffff\",\n  \"buttonDestructiveBg\": \"#d3221e\",\n  \"buttonDestructiveBgHover\": \"#b11815\",\n  \"buttonDestructiveBgActive\": \"#921916\",\n  \"buttonDisabledBg\": \"#e3e8f0\",\n  \"buttonDisabledText\": \"#96a3b9\",\n  \"buttonDisabledTextDestructive\": \"#ccd5e2\",\n  \"buttonFocusRing\": \"#bd84ff\",\n  \"spinnerTrack\": \"#10172b\",\n  \"spinnerIndicator\": \"#10172b\",\n  \"fieldText\": \"#10172b\",\n  \"fieldTextPlaceholder\": \"#96a3b9\",\n  \"fieldTextLabel\": \"#49556a\",\n  \"fieldTextDisabled\": \"#ccd5e2\",\n  \"fieldBg\": \"#ffffff\",\n  \"fieldBgDisabled\": \"#f8fafc\",\n  \"fieldBorder\": \"#e3e8f0\",\n  \"fieldBorderHover\": \"#96a3b9\",\n  \"fieldBorderError\": \"#e54240\",\n  \"fieldBorderDisabled\": \"#e3e8f0\",\n  \"fieldFocusRing\": \"#bd84ff\",\n  \"selectDropdownBg\": \"#ffffff\",\n  \"selectDropdownBorder\": \"#f1f5f9\",\n  \"selectOptionText\": \"#10172b\",\n  \"selectOptionTextDisabled\": \"#ccd5e2\",\n  \"selectOptionBgHover\": \"#f8fafc\",\n  \"selectOptionBgSelected\": \"#faf5ff\",\n  \"selectionBgUnselected\": \"#ffffff\",\n  \"selectionBorderUnselected\": \"#ccd5e2\",\n  \"selectionTextLabel\": \"#10172b\",\n  \"selectionIndicatorSelected\": \"#ffffff\",\n  \"selectionBgSelected\": \"#9035ee\",\n  \"selectionBorderSelected\": \"#a456fb\",\n  \"selectionFocusRing\": \"#bd84ff\",\n  \"selectionBgDisabled\": \"#e3e8f0\",\n  \"selectionBorderDisabled\": \"#e3e8f0\",\n  \"selectionTextDisabled\": \"#ccd5e2\",\n  \"selectionToggleTrackOff\": \"#ccd5e2\",\n  \"selectionToggleTrackOffHover\": \"#96a3b9\",\n  \"selectionToggleTrackOnHover\": \"#7b24d1\"\n} as const\n\nexport const darkColors = {\n  \"textPrimary\": \"#f8fafc\",\n  \"textSecondary\": \"#ccd5e2\",\n  \"textTertiary\": \"#66748c\",\n  \"textDisabled\": \"#49556a\",\n  \"textInverse\": \"#10172b\",\n  \"textInverseSecondary\": \"#66748c\",\n  \"textBrand\": \"#d6b4ff\",\n  \"bgPrimary\": \"#10172b\",\n  \"bgSecondary\": \"#20293c\",\n  \"bgTertiary\": \"#354156\",\n  \"bgInverse\": \"#ffffff\",\n  \"bgSkeleton\": \"#49556a\",\n  \"bgSuccessEmphasis\": \"#37a345\",\n  \"borderDefault\": \"#66748c\",\n  \"borderStrong\": \"#96a3b9\",\n  \"borderFocus\": \"#bd84ff\",\n  \"surfacePrimary\": \"#20293c\",\n  \"surfaceElevated\": \"#354156\",\n  \"surfaceOverlay\": \"#10172b\",\n  \"interactivePrimary\": \"#bd84ff\",\n  \"interactivePrimaryHover\": \"#d6b4ff\",\n  \"interactiveDisabled\": \"#354156\",\n  \"statusSuccessText\": \"#63de7c\",\n  \"statusSuccessBg\": \"#1f532b\",\n  \"statusSuccessBorder\": \"#63de7c\",\n  \"statusErrorText\": \"#f5a4a4\",\n  \"statusErrorBg\": \"#7a1c1a\",\n  \"statusErrorBorder\": \"#ef706f\",\n  \"statusWarningText\": \"#e5b200\",\n  \"statusWarningBg\": \"#402003\",\n  \"statusWarningBorder\": \"#c48900\",\n  \"statusInfoText\": \"#9ac5ff\",\n  \"statusInfoBg\": \"#1e3a8a\",\n  \"statusInfoBorder\": \"#6ca6fd\",\n  \"statusNeutralText\": \"#ccd5e2\",\n  \"statusNeutralBg\": \"#20293c\",\n  \"statusNeutralBorder\": \"#66748c\",\n  \"statusPendingText\": \"#e5b200\",\n  \"statusPendingBg\": \"#402003\",\n  \"buttonPrimaryText\": \"#10172b\",\n  \"buttonPrimaryBg\": \"#bd84ff\",\n  \"buttonPrimaryBgHover\": \"#d6b4ff\",\n  \"buttonPrimaryBgActive\": \"#e8d5ff\",\n  \"buttonSecondaryText\": \"#d6b4ff\",\n  \"buttonSecondaryBg\": \"#561d89\",\n  \"buttonSecondaryBgHover\": \"#6822ab\",\n  \"buttonTertiaryText\": \"#f8fafc\",\n  \"buttonTertiaryBorder\": \"#49556a\",\n  \"buttonGhostText\": \"#d6b4ff\",\n  \"buttonGhostBgHover\": \"#561d89\",\n  \"buttonDestructiveText\": \"#10172b\",\n  \"buttonDestructiveBg\": \"#ef706f\",\n  \"buttonDestructiveBgHover\": \"#f5a4a4\",\n  \"buttonDestructiveBgActive\": \"#facac9\",\n  \"buttonDisabledBg\": \"#354156\",\n  \"buttonDisabledText\": \"#66748c\",\n  \"buttonDisabledTextDestructive\": \"#49556a\",\n  \"buttonFocusRing\": \"#bd84ff\",\n  \"spinnerTrack\": \"#f8fafc\",\n  \"spinnerIndicator\": \"#f8fafc\",\n  \"fieldText\": \"#f8fafc\",\n  \"fieldTextPlaceholder\": \"#66748c\",\n  \"fieldTextLabel\": \"#ccd5e2\",\n  \"fieldTextDisabled\": \"#49556a\",\n  \"fieldBg\": \"#10172b\",\n  \"fieldBgDisabled\": \"#20293c\",\n  \"fieldBorder\": \"#66748c\",\n  \"fieldBorderHover\": \"#96a3b9\",\n  \"fieldBorderError\": \"#ef706f\",\n  \"fieldBorderDisabled\": \"#66748c\",\n  \"fieldFocusRing\": \"#bd84ff\",\n  \"selectDropdownBg\": \"#354156\",\n  \"selectDropdownBorder\": \"#20293c\",\n  \"selectOptionText\": \"#f8fafc\",\n  \"selectOptionTextDisabled\": \"#49556a\",\n  \"selectOptionBgHover\": \"#20293c\",\n  \"selectOptionBgSelected\": \"#561d89\",\n  \"selectionBgUnselected\": \"#10172b\",\n  \"selectionBorderUnselected\": \"#49556a\",\n  \"selectionTextLabel\": \"#f8fafc\",\n  \"selectionIndicatorSelected\": \"#10172b\",\n  \"selectionBgSelected\": \"#bd84ff\",\n  \"selectionBorderSelected\": \"#bd84ff\",\n  \"selectionFocusRing\": \"#bd84ff\",\n  \"selectionBgDisabled\": \"#354156\",\n  \"selectionBorderDisabled\": \"#66748c\",\n  \"selectionTextDisabled\": \"#49556a\",\n  \"selectionToggleTrackOff\": \"#49556a\",\n  \"selectionToggleTrackOffHover\": \"#96a3b9\",\n  \"selectionToggleTrackOnHover\": \"#d6b4ff\"\n} as const\n\nexport const radius = {\n  \"none\": 0,\n  \"sm\": 4,\n  \"md\": 8,\n  \"lg\": 12,\n  \"xl\": 16,\n  \"2xl\": 24,\n  \"full\": 9999\n} as const\n\n/** Estilos de texto em px. `fontWeight` é numérico; converta para string no StyleSheet. */\nexport const typography = {\n  \"headingH1\": {\n    \"fontSize\": 48,\n    \"lineHeight\": 56,\n    \"letterSpacing\": -1.5,\n    \"fontWeight\": 700\n  },\n  \"headingH2\": {\n    \"fontSize\": 36,\n    \"lineHeight\": 44,\n    \"letterSpacing\": -1,\n    \"fontWeight\": 700\n  },\n  \"headingH3\": {\n    \"fontSize\": 28,\n    \"lineHeight\": 36,\n    \"letterSpacing\": -0.5,\n    \"fontWeight\": 600\n  },\n  \"headingH4\": {\n    \"fontSize\": 22,\n    \"lineHeight\": 28,\n    \"fontWeight\": 600\n  },\n  \"headingH5\": {\n    \"fontSize\": 18,\n    \"lineHeight\": 24,\n    \"fontWeight\": 600\n  },\n  \"headingH6\": {\n    \"fontSize\": 16,\n    \"lineHeight\": 22,\n    \"fontWeight\": 500\n  },\n  \"bodyLg\": {\n    \"fontSize\": 18,\n    \"lineHeight\": 28,\n    \"fontWeight\": 400\n  },\n  \"bodyBase\": {\n    \"fontSize\": 16,\n    \"lineHeight\": 24,\n    \"fontWeight\": 400\n  },\n  \"bodySm\": {\n    \"fontSize\": 14,\n    \"lineHeight\": 20,\n    \"fontWeight\": 400\n  },\n  \"bodyXs\": {\n    \"fontSize\": 12,\n    \"lineHeight\": 16,\n    \"fontWeight\": 400\n  },\n  \"labelLg\": {\n    \"fontSize\": 16,\n    \"lineHeight\": 24,\n    \"fontWeight\": 500\n  },\n  \"labelBase\": {\n    \"fontSize\": 14,\n    \"lineHeight\": 20,\n    \"fontWeight\": 500\n  },\n  \"labelSm\": {\n    \"fontSize\": 12,\n    \"lineHeight\": 16,\n    \"fontWeight\": 500\n  },\n  \"labelXs\": {\n    \"fontSize\": 11,\n    \"lineHeight\": 14,\n    \"letterSpacing\": 0.5,\n    \"fontWeight\": 500\n  },\n  \"utilityCaption\": {\n    \"fontSize\": 12,\n    \"lineHeight\": 16,\n    \"letterSpacing\": 0.2,\n    \"fontWeight\": 400\n  },\n  \"utilityOverline\": {\n    \"fontSize\": 11,\n    \"lineHeight\": 16,\n    \"letterSpacing\": 1.5,\n    \"fontWeight\": 600\n  }\n} as const\n\nexport const overlayOpacity = {\n  \"light\": 0.5,\n  \"dark\": 0.7\n} as const\n"],"mappings":"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"}
+{"version":3,"file":"generated.js","names":[],"sources":["../../src/tokens/generated.ts"],"sourcesContent":["// Arquivo gerado por scripts/generate-tokens.ts a partir de packages/react/src/styles/tokens.css.\n// Não edite à mão: rode `pnpm --filter @innovui/react-native generate:tokens`.\n\nexport const palette = {\n  \"gray50\": \"#f8fafc\",\n  \"gray100\": \"#f1f5f9\",\n  \"gray200\": \"#e3e8f0\",\n  \"gray300\": \"#ccd5e2\",\n  \"gray400\": \"#96a3b9\",\n  \"gray500\": \"#66748c\",\n  \"gray600\": \"#49556a\",\n  \"gray700\": \"#354156\",\n  \"gray800\": \"#20293c\",\n  \"gray900\": \"#10172b\",\n  \"purple50\": \"#faf5ff\",\n  \"purple100\": \"#f2e8ff\",\n  \"purple200\": \"#e8d5ff\",\n  \"purple300\": \"#d6b4ff\",\n  \"purple400\": \"#bd84ff\",\n  \"purple500\": \"#a456fb\",\n  \"purple600\": \"#9035ee\",\n  \"purple700\": \"#7b24d1\",\n  \"purple800\": \"#6822ab\",\n  \"purple900\": \"#561d89\",\n  \"blue50\": \"#f0f6ff\",\n  \"blue100\": \"#ddeaff\",\n  \"blue200\": \"#c2dbff\",\n  \"blue300\": \"#9ac5ff\",\n  \"blue400\": \"#6ca6fd\",\n  \"blue500\": \"#4b83f9\",\n  \"blue600\": \"#3664ef\",\n  \"blue700\": \"#2d50db\",\n  \"blue800\": \"#2841b2\",\n  \"blue900\": \"#1e3a8a\",\n  \"green50\": \"#f1fdf4\",\n  \"green100\": \"#dffce6\",\n  \"green200\": \"#c1f7cf\",\n  \"green300\": \"#93efaa\",\n  \"green400\": \"#63de7c\",\n  \"green500\": \"#47c559\",\n  \"green600\": \"#37a345\",\n  \"green700\": \"#2c803a\",\n  \"green800\": \"#256532\",\n  \"green900\": \"#1f532b\",\n  \"yellow50\": \"#fdf9c0\",\n  \"yellow100\": \"#fcf083\",\n  \"yellow200\": \"#f9df34\",\n  \"yellow300\": \"#f5cb00\",\n  \"yellow400\": \"#e5b200\",\n  \"yellow500\": \"#c48900\",\n  \"yellow600\": \"#9c6100\",\n  \"yellow700\": \"#814c01\",\n  \"yellow800\": \"#6d3f0b\",\n  \"yellow900\": \"#402003\",\n  \"orange50\": \"#fef7ed\",\n  \"orange100\": \"#fdedd4\",\n  \"orange200\": \"#fad7a7\",\n  \"orange300\": \"#f7b96f\",\n  \"orange400\": \"#f39130\",\n  \"orange500\": \"#f07200\",\n  \"orange600\": \"#e15600\",\n  \"orange700\": \"#ba3f00\",\n  \"orange800\": \"#943308\",\n  \"orange900\": \"#772c0c\",\n  \"red50\": \"#fdf2f2\",\n  \"red100\": \"#fce2e2\",\n  \"red200\": \"#facac9\",\n  \"red300\": \"#f5a4a4\",\n  \"red400\": \"#ef706f\",\n  \"red500\": \"#e54240\",\n  \"red600\": \"#d3221e\",\n  \"red700\": \"#b11815\",\n  \"red800\": \"#921916\",\n  \"red900\": \"#7a1c1a\",\n  \"pink50\": \"#fcf2f8\",\n  \"pink100\": \"#fae7f3\",\n  \"pink200\": \"#f8cfe9\",\n  \"pink300\": \"#f3a8d5\",\n  \"pink400\": \"#ec71b7\",\n  \"pink500\": \"#e3479a\",\n  \"pink600\": \"#d22477\",\n  \"pink700\": \"#b6145d\",\n  \"pink800\": \"#96154d\",\n  \"pink900\": \"#7d1743\"\n} as const\n\nexport const lightColors = {\n  \"textPrimary\": \"#10172b\",\n  \"textSecondary\": \"#49556a\",\n  \"textTertiary\": \"#96a3b9\",\n  \"textDisabled\": \"#ccd5e2\",\n  \"textInverse\": \"#ffffff\",\n  \"textInverseSecondary\": \"#96a3b9\",\n  \"textBrand\": \"#9035ee\",\n  \"bgPrimary\": \"#ffffff\",\n  \"bgSecondary\": \"#f8fafc\",\n  \"bgTertiary\": \"#f1f5f9\",\n  \"bgInverse\": \"#10172b\",\n  \"bgSkeleton\": \"#e3e8f0\",\n  \"bgSuccessEmphasis\": \"#37a345\",\n  \"borderDefault\": \"#e3e8f0\",\n  \"borderStrong\": \"#96a3b9\",\n  \"borderFocus\": \"#bd84ff\",\n  \"surfacePrimary\": \"#ffffff\",\n  \"surfaceElevated\": \"#ffffff\",\n  \"surfaceOverlay\": \"#10172b\",\n  \"interactivePrimary\": \"#9035ee\",\n  \"interactivePrimaryHover\": \"#7b24d1\",\n  \"interactiveDisabled\": \"#e3e8f0\",\n  \"statusSuccessText\": \"#2c803a\",\n  \"statusSuccessBg\": \"#f1fdf4\",\n  \"statusSuccessBorder\": \"#47c559\",\n  \"statusErrorText\": \"#d3221e\",\n  \"statusErrorBg\": \"#fdf2f2\",\n  \"statusErrorBorder\": \"#e54240\",\n  \"statusWarningText\": \"#9c6100\",\n  \"statusWarningBg\": \"#fdf9c0\",\n  \"statusWarningBorder\": \"#e5b200\",\n  \"statusInfoText\": \"#3664ef\",\n  \"statusInfoBg\": \"#f0f6ff\",\n  \"statusInfoBorder\": \"#4b83f9\",\n  \"statusNeutralText\": \"#49556a\",\n  \"statusNeutralBg\": \"#f8fafc\",\n  \"statusNeutralBorder\": \"#e3e8f0\",\n  \"statusPendingText\": \"#9c6100\",\n  \"statusPendingBg\": \"#fdf9c0\",\n  \"buttonPrimaryText\": \"#ffffff\",\n  \"buttonPrimaryBg\": \"#9035ee\",\n  \"buttonPrimaryBgHover\": \"#7b24d1\",\n  \"buttonPrimaryBgActive\": \"#6822ab\",\n  \"buttonSecondaryText\": \"#9035ee\",\n  \"buttonSecondaryBg\": \"#faf5ff\",\n  \"buttonSecondaryBgHover\": \"#f2e8ff\",\n  \"buttonTertiaryText\": \"#10172b\",\n  \"buttonTertiaryBorder\": \"#ccd5e2\",\n  \"buttonGhostText\": \"#9035ee\",\n  \"buttonGhostBgHover\": \"#faf5ff\",\n  \"buttonDestructiveText\": \"#ffffff\",\n  \"buttonDestructiveBg\": \"#d3221e\",\n  \"buttonDestructiveBgHover\": \"#b11815\",\n  \"buttonDestructiveBgActive\": \"#921916\",\n  \"buttonDisabledBg\": \"#e3e8f0\",\n  \"buttonDisabledText\": \"#96a3b9\",\n  \"buttonDisabledTextDestructive\": \"#ccd5e2\",\n  \"buttonFocusRing\": \"#bd84ff\",\n  \"spinnerTrack\": \"#10172b\",\n  \"spinnerIndicator\": \"#10172b\",\n  \"fieldText\": \"#10172b\",\n  \"fieldTextPlaceholder\": \"#96a3b9\",\n  \"fieldTextLabel\": \"#49556a\",\n  \"fieldTextDisabled\": \"#ccd5e2\",\n  \"fieldBg\": \"#ffffff\",\n  \"fieldBgDisabled\": \"#f8fafc\",\n  \"fieldBorder\": \"#e3e8f0\",\n  \"fieldBorderHover\": \"#96a3b9\",\n  \"fieldBorderError\": \"#e54240\",\n  \"fieldBorderDisabled\": \"#e3e8f0\",\n  \"fieldFocusRing\": \"#bd84ff\",\n  \"selectDropdownBg\": \"#ffffff\",\n  \"selectDropdownBorder\": \"#f1f5f9\",\n  \"selectOptionText\": \"#10172b\",\n  \"selectOptionTextDisabled\": \"#ccd5e2\",\n  \"selectOptionBgHover\": \"#f8fafc\",\n  \"selectOptionBgSelected\": \"#faf5ff\",\n  \"selectionBgUnselected\": \"#ffffff\",\n  \"selectionBorderUnselected\": \"#ccd5e2\",\n  \"selectionTextLabel\": \"#10172b\",\n  \"selectionIndicatorSelected\": \"#ffffff\",\n  \"selectionBgSelected\": \"#9035ee\",\n  \"selectionBorderSelected\": \"#a456fb\",\n  \"selectionFocusRing\": \"#bd84ff\",\n  \"selectionBgDisabled\": \"#e3e8f0\",\n  \"selectionBorderDisabled\": \"#e3e8f0\",\n  \"selectionTextDisabled\": \"#ccd5e2\",\n  \"selectionToggleTrackOff\": \"#ccd5e2\",\n  \"selectionToggleTrackOffHover\": \"#96a3b9\",\n  \"selectionToggleTrackOnHover\": \"#7b24d1\",\n  \"mediaWaveRest\": \"#ccd5e2\",\n  \"mediaSurface\": \"#000000\",\n  \"mediaOnSurface\": \"#ffffff\",\n  \"mediaAccent\": \"#bd84ff\"\n} as const\n\nexport const darkColors = {\n  \"textPrimary\": \"#f8fafc\",\n  \"textSecondary\": \"#ccd5e2\",\n  \"textTertiary\": \"#66748c\",\n  \"textDisabled\": \"#49556a\",\n  \"textInverse\": \"#10172b\",\n  \"textInverseSecondary\": \"#66748c\",\n  \"textBrand\": \"#d6b4ff\",\n  \"bgPrimary\": \"#10172b\",\n  \"bgSecondary\": \"#20293c\",\n  \"bgTertiary\": \"#354156\",\n  \"bgInverse\": \"#ffffff\",\n  \"bgSkeleton\": \"#49556a\",\n  \"bgSuccessEmphasis\": \"#37a345\",\n  \"borderDefault\": \"#66748c\",\n  \"borderStrong\": \"#96a3b9\",\n  \"borderFocus\": \"#bd84ff\",\n  \"surfacePrimary\": \"#20293c\",\n  \"surfaceElevated\": \"#354156\",\n  \"surfaceOverlay\": \"#10172b\",\n  \"interactivePrimary\": \"#bd84ff\",\n  \"interactivePrimaryHover\": \"#d6b4ff\",\n  \"interactiveDisabled\": \"#354156\",\n  \"statusSuccessText\": \"#63de7c\",\n  \"statusSuccessBg\": \"#1f532b\",\n  \"statusSuccessBorder\": \"#63de7c\",\n  \"statusErrorText\": \"#f5a4a4\",\n  \"statusErrorBg\": \"#7a1c1a\",\n  \"statusErrorBorder\": \"#ef706f\",\n  \"statusWarningText\": \"#e5b200\",\n  \"statusWarningBg\": \"#402003\",\n  \"statusWarningBorder\": \"#c48900\",\n  \"statusInfoText\": \"#9ac5ff\",\n  \"statusInfoBg\": \"#1e3a8a\",\n  \"statusInfoBorder\": \"#6ca6fd\",\n  \"statusNeutralText\": \"#ccd5e2\",\n  \"statusNeutralBg\": \"#20293c\",\n  \"statusNeutralBorder\": \"#66748c\",\n  \"statusPendingText\": \"#e5b200\",\n  \"statusPendingBg\": \"#402003\",\n  \"buttonPrimaryText\": \"#10172b\",\n  \"buttonPrimaryBg\": \"#bd84ff\",\n  \"buttonPrimaryBgHover\": \"#d6b4ff\",\n  \"buttonPrimaryBgActive\": \"#e8d5ff\",\n  \"buttonSecondaryText\": \"#d6b4ff\",\n  \"buttonSecondaryBg\": \"#561d89\",\n  \"buttonSecondaryBgHover\": \"#6822ab\",\n  \"buttonTertiaryText\": \"#f8fafc\",\n  \"buttonTertiaryBorder\": \"#49556a\",\n  \"buttonGhostText\": \"#d6b4ff\",\n  \"buttonGhostBgHover\": \"#561d89\",\n  \"buttonDestructiveText\": \"#10172b\",\n  \"buttonDestructiveBg\": \"#ef706f\",\n  \"buttonDestructiveBgHover\": \"#f5a4a4\",\n  \"buttonDestructiveBgActive\": \"#facac9\",\n  \"buttonDisabledBg\": \"#354156\",\n  \"buttonDisabledText\": \"#66748c\",\n  \"buttonDisabledTextDestructive\": \"#49556a\",\n  \"buttonFocusRing\": \"#bd84ff\",\n  \"spinnerTrack\": \"#f8fafc\",\n  \"spinnerIndicator\": \"#f8fafc\",\n  \"fieldText\": \"#f8fafc\",\n  \"fieldTextPlaceholder\": \"#66748c\",\n  \"fieldTextLabel\": \"#ccd5e2\",\n  \"fieldTextDisabled\": \"#49556a\",\n  \"fieldBg\": \"#10172b\",\n  \"fieldBgDisabled\": \"#20293c\",\n  \"fieldBorder\": \"#66748c\",\n  \"fieldBorderHover\": \"#96a3b9\",\n  \"fieldBorderError\": \"#ef706f\",\n  \"fieldBorderDisabled\": \"#66748c\",\n  \"fieldFocusRing\": \"#bd84ff\",\n  \"selectDropdownBg\": \"#354156\",\n  \"selectDropdownBorder\": \"#20293c\",\n  \"selectOptionText\": \"#f8fafc\",\n  \"selectOptionTextDisabled\": \"#49556a\",\n  \"selectOptionBgHover\": \"#20293c\",\n  \"selectOptionBgSelected\": \"#561d89\",\n  \"selectionBgUnselected\": \"#10172b\",\n  \"selectionBorderUnselected\": \"#49556a\",\n  \"selectionTextLabel\": \"#f8fafc\",\n  \"selectionIndicatorSelected\": \"#10172b\",\n  \"selectionBgSelected\": \"#bd84ff\",\n  \"selectionBorderSelected\": \"#bd84ff\",\n  \"selectionFocusRing\": \"#bd84ff\",\n  \"selectionBgDisabled\": \"#354156\",\n  \"selectionBorderDisabled\": \"#66748c\",\n  \"selectionTextDisabled\": \"#49556a\",\n  \"selectionToggleTrackOff\": \"#49556a\",\n  \"selectionToggleTrackOffHover\": \"#96a3b9\",\n  \"selectionToggleTrackOnHover\": \"#d6b4ff\",\n  \"mediaWaveRest\": \"#66748c\",\n  \"mediaSurface\": \"#000000\",\n  \"mediaOnSurface\": \"#ffffff\",\n  \"mediaAccent\": \"#bd84ff\"\n} as const\n\nexport const radius = {\n  \"none\": 0,\n  \"sm\": 4,\n  \"md\": 8,\n  \"lg\": 12,\n  \"xl\": 16,\n  \"2xl\": 24,\n  \"full\": 9999\n} as const\n\n/** Estilos de texto em px. `fontWeight` é numérico; converta para string no StyleSheet. */\nexport const typography = {\n  \"headingH1\": {\n    \"fontSize\": 48,\n    \"lineHeight\": 56,\n    \"letterSpacing\": -1.5,\n    \"fontWeight\": 700\n  },\n  \"headingH2\": {\n    \"fontSize\": 36,\n    \"lineHeight\": 44,\n    \"letterSpacing\": -1,\n    \"fontWeight\": 700\n  },\n  \"headingH3\": {\n    \"fontSize\": 28,\n    \"lineHeight\": 36,\n    \"letterSpacing\": -0.5,\n    \"fontWeight\": 600\n  },\n  \"headingH4\": {\n    \"fontSize\": 22,\n    \"lineHeight\": 28,\n    \"fontWeight\": 600\n  },\n  \"headingH5\": {\n    \"fontSize\": 18,\n    \"lineHeight\": 24,\n    \"fontWeight\": 600\n  },\n  \"headingH6\": {\n    \"fontSize\": 16,\n    \"lineHeight\": 22,\n    \"fontWeight\": 500\n  },\n  \"bodyLg\": {\n    \"fontSize\": 18,\n    \"lineHeight\": 28,\n    \"fontWeight\": 400\n  },\n  \"bodyBase\": {\n    \"fontSize\": 16,\n    \"lineHeight\": 24,\n    \"fontWeight\": 400\n  },\n  \"bodySm\": {\n    \"fontSize\": 14,\n    \"lineHeight\": 20,\n    \"fontWeight\": 400\n  },\n  \"bodyXs\": {\n    \"fontSize\": 12,\n    \"lineHeight\": 16,\n    \"fontWeight\": 400\n  },\n  \"labelLg\": {\n    \"fontSize\": 16,\n    \"lineHeight\": 24,\n    \"fontWeight\": 500\n  },\n  \"labelBase\": {\n    \"fontSize\": 14,\n    \"lineHeight\": 20,\n    \"fontWeight\": 500\n  },\n  \"labelSm\": {\n    \"fontSize\": 12,\n    \"lineHeight\": 16,\n    \"fontWeight\": 500\n  },\n  \"labelXs\": {\n    \"fontSize\": 11,\n    \"lineHeight\": 14,\n    \"letterSpacing\": 0.5,\n    \"fontWeight\": 500\n  },\n  \"utilityCaption\": {\n    \"fontSize\": 12,\n    \"lineHeight\": 16,\n    \"letterSpacing\": 0.2,\n    \"fontWeight\": 400\n  },\n  \"utilityOverline\": {\n    \"fontSize\": 11,\n    \"lineHeight\": 16,\n    \"letterSpacing\": 1.5,\n    \"fontWeight\": 600\n  }\n} as const\n\nexport const overlayOpacity = {\n  \"light\": 0.5,\n  \"dark\": 0.7\n} as const\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovui/react-native",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Componentes React Native do design system InnovUI.",
   "type": "module",
   "license": "MIT",

package/theme.css

@@ -93,6 +93,10 @@
       --color-selection-toggle-track-off: #ccd5e2;
       --color-selection-toggle-track-off-hover: #96a3b9;
       --color-selection-toggle-track-on-hover: #7b24d1;
+      --color-media-wave-rest: #ccd5e2;
+      --color-media-surface: #000000;
+      --color-media-on-surface: #ffffff;
+      --color-media-accent: #bd84ff;
     }
 
     @variant dark {
@@ -186,6 +190,10 @@
       --color-selection-toggle-track-off: #49556a;
       --color-selection-toggle-track-off-hover: #96a3b9;
       --color-selection-toggle-track-on-hover: #d6b4ff;
+      --color-media-wave-rest: #66748c;
+      --color-media-surface: #000000;
+      --color-media-on-surface: #ffffff;
+      --color-media-accent: #bd84ff;
     }
   }
 }