@innovui/react-native 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 InnovTech Developers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,58 @@
-# Temporary Holding Version
+# @innovui/react-native
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Componentes React Native do design system InnovUI, estilizados com [Uniwind](https://docs.uniwind.dev) (Tailwind v4 para React Native). Os mesmos componentes do `@innovui/react`, adaptados à plataforma.
+
+## Instalação
+
+```bash
+pnpm add @innovui/react-native uniwind tailwindcss react-native-svg
+```
+
+No app, siga o [quickstart do Uniwind](https://docs.uniwind.dev/quickstart) (`withUniwindConfig` no `metro.config.js`) e, no `global.css`, importe os tokens e aponte o Tailwind para as classes da lib:
+
+```css
+@import 'tailwindcss';
+@import 'uniwind';
+@import '@innovui/react-native/theme.css';
+
+@source '../node_modules/@innovui/react-native/dist';
+```
+
+O `@source` é necessário porque o Tailwind só gera as classes que encontra nos arquivos escaneados (num monorepo pnpm, aponte para o caminho real do pacote).
+
+```tsx
+import { Button } from '@innovui/react-native'
+
+export function App() {
+  return <Button onPress={() => {}}>Salvar</Button>
+}
+```
+
+## Tema claro e escuro
+
+`theme.css` define todos os tokens do `tokens.css` como variáveis por tema (`light` e `dark`); cada um vira utilitário (`--color-button-primary-bg` → `bg-button-primary-bg`), inclusive para o seu código. Troque o tema com o Uniwind: `Uniwind.setTheme('light' | 'dark' | 'system')`.
+
+## Diferenças em relação ao `@innovui/react`
+
+- **Texto:** no native o texto não herda cor nem tamanho; os componentes aplicam `Text` por conta própria. Onde o web aceita `ReactNode`, alguns componentes aceitam só `string` (Badge, Tag, Alert `title`, itens de Menu...).
+- **Eventos e acessibilidade:** `onClick` vira `onPress`; `aria-*` vira `accessibility*`. Não existe hover nem foco por teclado.
+- **Sem `asChild`:** gatilhos de Modal, Drawer, Popover, Menu e Tooltip recebem o elemento clonado com `onPress` (o Tooltip abre no `onLongPress`).
+- **Overlays:** Modal, Drawer, Popover, Menu, Select e Combobox usam o `Modal` nativo do RN. Sem blur no backdrop. Envolva o app em `ToastProvider` para usar `useToast()`.
+- **Upload:** o RN não tem `<input type="file">`. O `Upload` é controlado: o consumidor abre o seletor (ex. `expo-document-picker`) em `onPick` e passa a lista em `files`.
+- **Grid e Table:** feitos com Views e flexbox (sem CSS grid). Breakpoints vêm de `useWindowDimensions`.
+- **Sombras no Android:** `shadow-*` não gera `elevation`.
+
+## Decisões
+
+- **Uniwind em vez de `StyleSheet`:** os componentes usam `className`, como no `@innovui/react`, e o consumidor pode sobrescrever classes (`<Button className="h-20" />`, resolvido com `tailwind-merge`). Exige `react-native >= 0.81` e Metro.
+- **Tokens:** `theme.css` e `src/tokens/generated.ts` (para usos fora de `className`) são gerados de `packages/react/src/styles/tokens.css`. Rode `pnpm --filter @innovui/react-native generate:tokens` depois de mudar os tokens; `pnpm test` falha se estiverem defasados.
+- **API:** igual à do `@innovui/react` sempre que possível (`variant`, `size`, `loading`, `leadingIcon`, `trailingIcon`). Diferenças vêm da plataforma (`onPress` no lugar de `onClick`; o hover vira `active:`).
+- **Testes:** o Jest não passa pelo Metro, então os testes conferem as classes aplicadas, não os estilos resolvidos. A geração dos estilos foi verificada com um bundle real do Metro.
+
+## Desenvolvimento
+
+```bash
+pnpm --filter @innovui/react-native test
+pnpm --filter @innovui/react-native typecheck
+pnpm --filter @innovui/react-native build
+```

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

@@ -0,0 +1,74 @@
+import { useCallback, useRef, useState } from "react";
+import { Modal, Pressable, View, useWindowDimensions } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/_shared/anchored-overlay.tsx
+/**
+* Medição de um gatilho para ancorar um overlay (Popover, Menu, Select, Combobox, DatePicker,
+* Tooltip). `open()` mede o gatilho na janela e só então abre.
+*
+*   const { ref, rect, visible, open, close } = useAnchor()
+*   <View ref={ref} collapsable={false}> ...gatilho... </View>
+*   <AnchoredOverlay visible={visible} rect={rect} onRequestClose={close}> ... </AnchoredOverlay>
+*/
+function useAnchor() {
+	const ref = useRef(null);
+	const [rect, setRect] = useState(null);
+	const [visible, setVisible] = useState(false);
+	return {
+		ref,
+		rect,
+		visible,
+		open: useCallback(() => {
+			const node = ref.current;
+			if (!node) return;
+			node.measureInWindow((x, y, width, height) => {
+				setRect({
+					x,
+					y,
+					width,
+					height
+				});
+				setVisible(true);
+			});
+		}, []),
+		close: useCallback(() => setVisible(false), [])
+	};
+}
+/** Overlay transparente, posicionado junto ao gatilho, dentro de um Modal nativo (fica acima de tudo). */
+function AnchoredOverlay({ visible, rect, onRequestClose, children, placement = "bottom", offset = 4, matchAnchorWidth = false, estimatedHeight = 320, dismissOnPressOutside = true, className, testID }) {
+	const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+	if (!rect) return null;
+	const spaceBelow = windowHeight - (rect.y + rect.height);
+	const spaceAbove = rect.y;
+	const goTop = placement === "top" ? spaceAbove >= estimatedHeight || spaceAbove >= spaceBelow : spaceBelow < estimatedHeight && spaceAbove > spaceBelow;
+	const left = Math.max(8, Math.min(rect.x, windowWidth - 8 - (matchAnchorWidth ? rect.width : 0)));
+	return /* @__PURE__ */ jsx(Modal, {
+		transparent: true,
+		visible,
+		animationType: "fade",
+		onRequestClose,
+		statusBarTranslucent: true,
+		children: /* @__PURE__ */ jsx(Pressable, {
+			accessible: false,
+			className: "flex-1",
+			onPress: dismissOnPressOutside ? onRequestClose : void 0,
+			testID: testID ? `${testID}-backdrop` : void 0,
+			children: /* @__PURE__ */ jsx(View, {
+				testID,
+				className,
+				style: {
+					position: "absolute",
+					left,
+					...goTop ? { bottom: windowHeight - rect.y + offset } : { top: rect.y + rect.height + offset },
+					...matchAnchorWidth ? { width: rect.width } : null
+				},
+				onStartShouldSetResponder: () => true,
+				children
+			})
+		})
+	});
+}
+//#endregion
+export { AnchoredOverlay, useAnchor };
+
+//# sourceMappingURL=anchored-overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"anchored-overlay.js","names":[],"sources":["../../../src/components/_shared/anchored-overlay.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { type ReactNode, type RefObject, useCallback, useRef, useState } from 'react'\nimport { Modal, Pressable, useWindowDimensions, View } from 'react-native'\n\nexport type Placement = 'bottom' | 'top'\ntype Rect = { x: number; y: number; width: number; height: number }\n\n/**\n * Medição de um gatilho para ancorar um overlay (Popover, Menu, Select, Combobox, DatePicker,\n * Tooltip). `open()` mede o gatilho na janela e só então abre.\n *\n *   const { ref, rect, visible, open, close } = useAnchor()\n *   <View ref={ref} collapsable={false}> ...gatilho... </View>\n *   <AnchoredOverlay visible={visible} rect={rect} onRequestClose={close}> ... </AnchoredOverlay>\n */\nexport function useAnchor() {\n  const ref = useRef<View>(null)\n  const [rect, setRect] = useState<Rect | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  const open = useCallback(() => {\n    const node = ref.current\n    if (!node) return\n    node.measureInWindow((x, y, width, height) => {\n      setRect({ x, y, width, height })\n      setVisible(true)\n    })\n  }, [])\n  const close = useCallback(() => setVisible(false), [])\n\n  return { ref: ref as RefObject<View>, rect, visible, open, close }\n}\n\nexport type AnchoredOverlayProps = {\n  visible: boolean\n  rect: Rect | null\n  onRequestClose: () => void\n  children: ReactNode\n  /** Lado preferido; inverte se não couber. Padrão: `bottom`. */\n  placement?: Placement\n  /** Distância do gatilho. Padrão: 4. */\n  offset?: number\n  /** Largura do conteúdo: `anchor` iguala à do gatilho (Select, Combobox). Padrão: automática. */\n  matchAnchorWidth?: boolean\n  /** Altura máxima estimada do conteúdo, para decidir a inversão. Padrão: 320. */\n  estimatedHeight?: number\n  /** Toque fora fecha. Padrão: true. */\n  dismissOnPressOutside?: boolean\n  className?: string\n  testID?: string\n}\n\n/** Overlay transparente, posicionado junto ao gatilho, dentro de um Modal nativo (fica acima de tudo). */\nexport function AnchoredOverlay({\n  visible,\n  rect,\n  onRequestClose,\n  children,\n  placement = 'bottom',\n  offset = 4,\n  matchAnchorWidth = false,\n  estimatedHeight = 320,\n  dismissOnPressOutside = true,\n  className,\n  testID,\n}: AnchoredOverlayProps) {\n  const { width: windowWidth, height: windowHeight } = useWindowDimensions()\n  if (!rect) return null\n\n  const spaceBelow = windowHeight - (rect.y + rect.height)\n  const spaceAbove = rect.y\n  const wantsTop = placement === 'top'\n  const goTop = wantsTop\n    ? spaceAbove >= estimatedHeight || spaceAbove >= spaceBelow\n    : spaceBelow < estimatedHeight && spaceAbove > spaceBelow\n\n  const left = Math.max(8, Math.min(rect.x, windowWidth - 8 - (matchAnchorWidth ? rect.width : 0)))\n\n  return (\n    <Modal\n      transparent\n      visible={visible}\n      animationType=\"fade\"\n      onRequestClose={onRequestClose}\n      statusBarTranslucent\n    >\n      <Pressable\n        accessible={false}\n        className=\"flex-1\"\n        onPress={dismissOnPressOutside ? onRequestClose : undefined}\n        testID={testID ? `${testID}-backdrop` : undefined}\n      >\n        <View\n          testID={testID}\n          className={className}\n          style={{\n            position: 'absolute',\n            left,\n            ...(goTop\n              ? { bottom: windowHeight - rect.y + offset }\n              : { top: rect.y + rect.height + offset }),\n            ...(matchAnchorWidth ? { width: rect.width } : null),\n          }}\n          // Toques dentro do conteúdo não chegam ao backdrop.\n          onStartShouldSetResponder={() => true}\n        >\n          {children}\n        </View>\n      </Pressable>\n    </Modal>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,SAAgB,YAAY;CAC1B,MAAM,MAAM,OAAa,IAAI;CAC7B,MAAM,CAAC,MAAM,WAAW,SAAsB,IAAI;CAClD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAY5C,OAAO;EAAO;EAAwB;EAAM;EAAS,MAVxC,kBAAkB;GAC7B,MAAM,OAAO,IAAI;GACjB,IAAI,CAAC,MAAM;GACX,KAAK,iBAAiB,GAAG,GAAG,OAAO,WAAW;IAC5C,QAAQ;KAAE;KAAG;KAAG;KAAO;IAAO,CAAC;IAC/B,WAAW,IAAI;GACjB,CAAC;EACH,GAAG,CAAC,CAGoD;EAAG,OAF7C,kBAAkB,WAAW,KAAK,GAAG,CAAC,CAEW;CAAE;AACnE;;AAsBA,SAAgB,gBAAgB,EAC9B,SACA,MACA,gBACA,UACA,YAAY,UACZ,SAAS,GACT,mBAAmB,OACnB,kBAAkB,KAClB,wBAAwB,MACxB,WACA,UACuB;CACvB,MAAM,EAAE,OAAO,aAAa,QAAQ,iBAAiB,oBAAoB;CACzE,IAAI,CAAC,MAAM,OAAO;CAElB,MAAM,aAAa,gBAAgB,KAAK,IAAI,KAAK;CACjD,MAAM,aAAa,KAAK;CAExB,MAAM,QADW,cAAc,QAE3B,cAAc,mBAAmB,cAAc,aAC/C,aAAa,mBAAmB,aAAa;CAEjD,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,GAAG,cAAc,KAAK,mBAAmB,KAAK,QAAQ,EAAE,CAAC;CAEhG,OACE,oBAAC,OAAD;EACE,aAAA;EACS;EACT,eAAc;EACE;EAChB,sBAAA;EAEA,UAAA,oBAAC,WAAD;GACE,YAAY;GACZ,WAAU;GACV,SAAS,wBAAwB,iBAAiB,KAAA;GAClD,QAAQ,SAAS,GAAG,OAAO,aAAa,KAAA;GAExC,UAAA,oBAAC,MAAD;IACU;IACG;IACX,OAAO;KACL,UAAU;KACV;KACA,GAAI,QACA,EAAE,QAAQ,eAAe,KAAK,IAAI,OAAO,IACzC,EAAE,KAAK,KAAK,IAAI,KAAK,SAAS,OAAO;KACzC,GAAI,mBAAmB,EAAE,OAAO,KAAK,MAAM,IAAI;IACjD;IAEA,iCAAiC;IAEhC;GACG,CAAA;EACG,CAAA;CACN,CAAA;AAEX"}

package/dist/components/_shared/backdrop.js

@@ -0,0 +1,25 @@
+import { overlayOpacity } from "../../tokens/generated.js";
+import { Pressable } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { useUniwind } from "uniwind";
+//#region src/components/_shared/backdrop.tsx
+/**
+* Fundo escurecido de Modal e Drawer: `surface/overlay` na opacidade do tema (50% no claro, 70% no
+* escuro). Sem blur (o React Native não tem backdrop-filter sem dependência nativa extra).
+* Toque no fundo chama `onPress`.
+*/
+function Backdrop({ onPress, testID }) {
+	const { theme } = useUniwind();
+	const opacity = theme === "dark" ? overlayOpacity.dark : overlayOpacity.light;
+	return /* @__PURE__ */ jsx(Pressable, {
+		accessible: false,
+		testID,
+		onPress,
+		className: "absolute inset-0 bg-surface-overlay",
+		style: { opacity }
+	});
+}
+//#endregion
+export { Backdrop };
+
+//# sourceMappingURL=backdrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop.js","names":[],"sources":["../../../src/components/_shared/backdrop.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { Pressable } from 'react-native'\nimport { useUniwind } from 'uniwind'\nimport { overlayOpacity } from '../../tokens/generated'\n\n/**\n * Fundo escurecido de Modal e Drawer: `surface/overlay` na opacidade do tema (50% no claro, 70% no\n * escuro). Sem blur (o React Native não tem backdrop-filter sem dependência nativa extra).\n * Toque no fundo chama `onPress`.\n */\nexport function Backdrop({ onPress, testID }: { onPress?: () => void; testID?: string }) {\n  const { theme } = useUniwind()\n  const opacity = theme === 'dark' ? overlayOpacity.dark : overlayOpacity.light\n  return (\n    <Pressable\n      accessible={false}\n      testID={testID}\n      onPress={onPress}\n      className=\"absolute inset-0 bg-surface-overlay\"\n      style={{ opacity }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,SAAS,EAAE,SAAS,UAAqD;CACvF,MAAM,EAAE,UAAU,WAAW;CAC7B,MAAM,UAAU,UAAU,SAAS,eAAe,OAAO,eAAe;CACxE,OACE,oBAAC,WAAD;EACE,YAAY;EACJ;EACC;EACT,WAAU;EACV,OAAO,EAAE,QAAQ;CAClB,CAAA;AAEL"}

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

@@ -0,0 +1,31 @@
+import { useAnchor } from "./anchored-overlay.js";
+import { injectHandler } from "./overlay-state.js";
+import { useEffect } from "react";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/_shared/overlay-anchor.tsx
+/**
+* Ancoragem controlada (uso interno de Popover, Menu e Tooltip): mede o gatilho sempre que
+* `isOpen` vira `true`, venha a mudança do toque ou da prop `open`.
+*/
+function useControlledAnchor(isOpen) {
+	const anchor = useAnchor();
+	const { open: measure } = anchor;
+	useEffect(() => {
+		if (isOpen) measure();
+	}, [isOpen, measure]);
+	return anchor;
+}
+/** Gatilho medível: `View` sem colapso em volta do filho, que recebe o handler. */
+function AnchorTrigger({ anchorRef, children, event, onTrigger, extra }) {
+	return /* @__PURE__ */ jsx(View, {
+		ref: anchorRef,
+		collapsable: false,
+		className: "self-start",
+		children: injectHandler(children, event, onTrigger, extra)
+	});
+}
+//#endregion
+export { AnchorTrigger, useControlledAnchor };
+
+//# sourceMappingURL=overlay-anchor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-anchor.js","names":[],"sources":["../../../src/components/_shared/overlay-anchor.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { type ReactNode, useEffect } from 'react'\nimport { View } from 'react-native'\nimport { useAnchor } from './anchored-overlay'\nimport { injectHandler } from './overlay-state'\n\n/**\n * Ancoragem controlada (uso interno de Popover, Menu e Tooltip): mede o gatilho sempre que\n * `isOpen` vira `true`, venha a mudança do toque ou da prop `open`.\n */\nexport function useControlledAnchor(isOpen: boolean) {\n  const anchor = useAnchor()\n  const { open: measure } = anchor\n  useEffect(() => {\n    if (isOpen) measure()\n  }, [isOpen, measure])\n  return anchor\n}\n\n/** Gatilho medível: `View` sem colapso em volta do filho, que recebe o handler. */\nexport function AnchorTrigger({\n  anchorRef,\n  children,\n  event,\n  onTrigger,\n  extra,\n}: {\n  anchorRef: ReturnType<typeof useAnchor>['ref']\n  children: ReactNode\n  event: 'onPress' | 'onLongPress'\n  onTrigger: () => void\n  extra?: Record<string, unknown>\n}) {\n  return (\n    <View ref={anchorRef} collapsable={false} className=\"self-start\">\n      {injectHandler(children, event, onTrigger, extra)}\n    </View>\n  )\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,oBAAoB,QAAiB;CACnD,MAAM,SAAS,UAAU;CACzB,MAAM,EAAE,MAAM,YAAY;CAC1B,gBAAgB;EACd,IAAI,QAAQ,QAAQ;CACtB,GAAG,CAAC,QAAQ,OAAO,CAAC;CACpB,OAAO;AACT;;AAGA,SAAgB,cAAc,EAC5B,WACA,UACA,OACA,WACA,SAOC;CACD,OACE,oBAAC,MAAD;EAAM,KAAK;EAAW,aAAa;EAAO,WAAU;EACjD,UAAA,cAAc,UAAU,OAAO,WAAW,KAAK;CAC5C,CAAA;AAEV"}

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

@@ -0,0 +1,31 @@
+import { cloneElement, isValidElement, useCallback, useState } from "react";
+//#region src/components/_shared/overlay-state.ts
+/** Estado aberto/fechado controlado (`open`) ou não (`defaultOpen`), como no Radix do web. */
+function useOpenState({ open, defaultOpen = false, onOpenChange }) {
+	const [inner, setInner] = useState(defaultOpen);
+	const isControlled = open !== void 0;
+	return [isControlled ? open : inner, useCallback((next) => {
+		if (!isControlled) setInner(next);
+		onOpenChange?.(next);
+	}, [isControlled, onOpenChange])];
+}
+/**
+* Equivalente do `asChild` do Radix: injeta um handler (`onPress`/`onLongPress`) no elemento
+* filho, preservando o handler que ele já tinha.
+*/
+function injectHandler(child, name, handler, extra) {
+	if (!isValidElement(child)) return child;
+	const element = child;
+	const original = element.props[name];
+	return cloneElement(element, {
+		...extra,
+		[name]: (...args) => {
+			original?.(...args);
+			handler();
+		}
+	});
+}
+//#endregion
+export { injectHandler, useOpenState };
+
+//# sourceMappingURL=overlay-state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-state.js","names":[],"sources":["../../../src/components/_shared/overlay-state.ts"],"sourcesContent":["import {\n  cloneElement,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useState,\n} from 'react'\n\ntype OpenState = {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n}\n\n/** Estado aberto/fechado controlado (`open`) ou não (`defaultOpen`), como no Radix do web. */\nexport function useOpenState({ open, defaultOpen = false, onOpenChange }: OpenState) {\n  const [inner, setInner] = useState(defaultOpen)\n  const isControlled = open !== undefined\n  const current = isControlled ? open : inner\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInner(next)\n      onOpenChange?.(next)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return [current, setOpen] as const\n}\n\n/**\n * Equivalente do `asChild` do Radix: injeta um handler (`onPress`/`onLongPress`) no elemento\n * filho, preservando o handler que ele já tinha.\n */\nexport function injectHandler(\n  child: ReactNode,\n  name: 'onPress' | 'onLongPress',\n  handler: () => void,\n  extra?: Record<string, unknown>,\n): ReactNode {\n  if (!isValidElement(child)) return child\n  const element = child as ReactElement<Record<string, unknown>>\n  const original = element.props[name] as ((...args: unknown[]) => void) | undefined\n  return cloneElement(element, {\n    ...extra,\n    [name]: (...args: unknown[]) => {\n      original?.(...args)\n      handler()\n    },\n  })\n}\n"],"mappings":";;;AAgBA,SAAgB,aAAa,EAAE,MAAM,cAAc,OAAO,gBAA2B;CACnF,MAAM,CAAC,OAAO,YAAY,SAAS,WAAW;CAC9C,MAAM,eAAe,SAAS,KAAA;CAW9B,OAAO,CAVS,eAAe,OAAO,OAEtB,aACb,SAAkB;EACjB,IAAI,CAAC,cAAc,SAAS,IAAI;EAChC,eAAe,IAAI;CACrB,GACA,CAAC,cAAc,YAAY,CAGN,CAAC;AAC1B;;;;;AAMA,SAAgB,cACd,OACA,MACA,SACA,OACW;CACX,IAAI,CAAC,eAAe,KAAK,GAAG,OAAO;CACnC,MAAM,UAAU;CAChB,MAAM,WAAW,QAAQ,MAAM;CAC/B,OAAO,aAAa,SAAS;EAC3B,GAAG;GACF,QAAQ,GAAG,SAAoB;GAC9B,WAAW,GAAG,IAAI;GAClB,QAAQ;EACV;CACF,CAAC;AACH"}

package/dist/components/_shared/status.d.ts

@@ -0,0 +1,5 @@
+import "react-native-svg";
+//#region src/components/_shared/status.d.ts
+export type Status = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+//#endregion
+//# sourceMappingURL=status.d.ts.map

package/dist/components/_shared/status.js

@@ -0,0 +1,98 @@
+import Svg, { Circle, Path } from "react-native-svg";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_shared/status.tsx
+/** Só a cor de destaque (texto/ícone) por status. */
+const statusText = {
+	success: "text-status-success-text",
+	error: "text-status-error-text",
+	warning: "text-status-warning-text",
+	info: "text-status-info-text",
+	neutral: "text-status-neutral-text"
+};
+/** Fundo por status, compartilhado por Alert e Banner (uso interno). */
+const statusBg = {
+	success: "bg-status-success-bg",
+	error: "bg-status-error-bg",
+	warning: "bg-status-warning-bg",
+	info: "bg-status-info-bg",
+	neutral: "bg-status-neutral-bg"
+};
+/** Nome do token de cor do texto de cada status, para `useToken` (ícones SVG). */
+const statusTextToken = {
+	success: "--color-status-success-text",
+	error: "--color-status-error-text",
+	warning: "--color-status-warning-text",
+	info: "--color-status-info-text",
+	neutral: "--color-status-neutral-text"
+};
+/** Erro e aviso interrompem o leitor de tela (alert); o resto é anunciado com calma. */
+const statusRole = (status) => status === "error" || status === "warning" ? "alert" : void 0;
+const strokeProps = {
+	fill: "none",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+const statusGlyph = {
+	success: "M7.5 10L9.16667 11.6667L12.5 8.33333",
+	error: "M10 6.66667V10M10 13.3333H10.0083",
+	warning: "M10 6.66667V10M10 13.3333H10.0083",
+	info: "M10 10V13.3333M10 6.66667H10.0083",
+	neutral: "M10 10V13.3333M10 6.66667H10.0083"
+};
+/** Ícone semântico de 20px, na cor passada em `color`. */
+function StatusIcon({ status, color, ...props }) {
+	return /* @__PURE__ */ jsxs(Svg, {
+		width: 20,
+		height: 20,
+		viewBox: "0 0 20 20",
+		stroke: color,
+		...strokeProps,
+		...props,
+		children: [/* @__PURE__ */ jsx(Circle, {
+			cx: "10",
+			cy: "10",
+			r: "7.3333"
+		}), /* @__PURE__ */ jsx(Path, { d: statusGlyph[status] })]
+	});
+}
+/** × de 16px. */
+function CloseIcon({ color, ...props }) {
+	return /* @__PURE__ */ jsx(Svg, {
+		width: 16,
+		height: 16,
+		viewBox: "0 0 16 16",
+		stroke: color,
+		...strokeProps,
+		...props,
+		children: /* @__PURE__ */ jsx(Path, { d: "M12 4L4 12M4 4L12 12" })
+	});
+}
+/** ✓ de 16px. */
+function CheckIcon({ color, ...props }) {
+	return /* @__PURE__ */ jsx(Svg, {
+		width: 16,
+		height: 16,
+		viewBox: "0 0 16 16",
+		stroke: color,
+		...strokeProps,
+		...props,
+		children: /* @__PURE__ */ jsx(Path, { d: "M13.3333 4L6 11.3333L2.66667 8" })
+	});
+}
+/** › de 12px. */
+function ChevronRightIcon({ color, ...props }) {
+	return /* @__PURE__ */ jsx(Svg, {
+		width: 12,
+		height: 12,
+		viewBox: "0 0 12 12",
+		stroke: color,
+		...strokeProps,
+		...props,
+		children: /* @__PURE__ */ jsx(Path, { d: "M4.5 9L7.5 6L4.5 3" })
+	});
+}
+//#endregion
+export { CheckIcon, ChevronRightIcon, CloseIcon, StatusIcon, statusBg, statusRole, statusText, statusTextToken };
+
+//# sourceMappingURL=status.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"status.js","names":[],"sources":["../../../src/components/_shared/status.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport Svg, { Circle, Path, type SvgProps } from 'react-native-svg'\n\nexport type Status = 'success' | 'error' | 'warning' | 'info' | 'neutral'\n\n/** Só a cor de destaque (texto/ícone) por status. */\nexport const statusText: Record<Status, string> = {\n  success: 'text-status-success-text',\n  error: 'text-status-error-text',\n  warning: 'text-status-warning-text',\n  info: 'text-status-info-text',\n  neutral: 'text-status-neutral-text',\n}\n\n/** Fundo por status, compartilhado por Alert e Banner (uso interno). */\nexport const statusBg: Record<Status, string> = {\n  success: 'bg-status-success-bg',\n  error: 'bg-status-error-bg',\n  warning: 'bg-status-warning-bg',\n  info: 'bg-status-info-bg',\n  neutral: 'bg-status-neutral-bg',\n}\n\n/** Nome do token de cor do texto de cada status, para `useToken` (ícones SVG). */\nexport const statusTextToken = {\n  success: '--color-status-success-text',\n  error: '--color-status-error-text',\n  warning: '--color-status-warning-text',\n  info: '--color-status-info-text',\n  neutral: '--color-status-neutral-text',\n} as const satisfies Record<Status, `--color-${string}`>\n\n/** Erro e aviso interrompem o leitor de tela (alert); o resto é anunciado com calma. */\nexport const statusRole = (status: Status) =>\n  status === 'error' || status === 'warning' ? 'alert' : undefined\n\ntype IconProps = Omit<SvgProps, 'stroke' | 'fill' | 'width' | 'height'> & { color?: string }\n\nconst strokeProps = {\n  fill: 'none',\n  strokeWidth: 2,\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round',\n} as const\n\nconst statusGlyph: Record<Status, string> = {\n  success: 'M7.5 10L9.16667 11.6667L12.5 8.33333',\n  error: 'M10 6.66667V10M10 13.3333H10.0083',\n  warning: 'M10 6.66667V10M10 13.3333H10.0083',\n  info: 'M10 10V13.3333M10 6.66667H10.0083',\n  neutral: 'M10 10V13.3333M10 6.66667H10.0083',\n}\n\n/** Ícone semântico de 20px, na cor passada em `color`. */\nexport function StatusIcon({ status, color, ...props }: { status: Status } & IconProps) {\n  return (\n    <Svg width={20} height={20} viewBox=\"0 0 20 20\" stroke={color} {...strokeProps} {...props}>\n      <Circle cx=\"10\" cy=\"10\" r=\"7.3333\" />\n      <Path d={statusGlyph[status]} />\n    </Svg>\n  )\n}\n\n/** × de 16px. */\nexport function CloseIcon({ color, ...props }: IconProps) {\n  return (\n    <Svg width={16} height={16} viewBox=\"0 0 16 16\" stroke={color} {...strokeProps} {...props}>\n      <Path d=\"M12 4L4 12M4 4L12 12\" />\n    </Svg>\n  )\n}\n\n/** ✓ de 16px. */\nexport function CheckIcon({ color, ...props }: IconProps) {\n  return (\n    <Svg width={16} height={16} viewBox=\"0 0 16 16\" stroke={color} {...strokeProps} {...props}>\n      <Path d=\"M13.3333 4L6 11.3333L2.66667 8\" />\n    </Svg>\n  )\n}\n\n/** › de 12px. */\nexport function ChevronRightIcon({ color, ...props }: IconProps) {\n  return (\n    <Svg width={12} height={12} viewBox=\"0 0 12 12\" stroke={color} {...strokeProps} {...props}>\n      <Path d=\"M4.5 9L7.5 6L4.5 3\" />\n    </Svg>\n  )\n}\n"],"mappings":";;;;AAOA,MAAa,aAAqC;CAChD,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACN,SAAS;AACX;;AAGA,MAAa,WAAmC;CAC9C,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACN,SAAS;AACX;;AAGA,MAAa,kBAAkB;CAC7B,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACN,SAAS;AACX;;AAGA,MAAa,cAAc,WACzB,WAAW,WAAW,WAAW,YAAY,UAAU,KAAA;AAIzD,MAAM,cAAc;CAClB,MAAM;CACN,aAAa;CACb,eAAe;CACf,gBAAgB;AAClB;AAEA,MAAM,cAAsC;CAC1C,SAAS;CACT,OAAO;CACP,SAAS;CACT,MAAM;CACN,SAAS;AACX;;AAGA,SAAgB,WAAW,EAAE,QAAQ,OAAO,GAAG,SAAyC;CACtF,OACE,qBAAC,KAAD;EAAK,OAAO;EAAI,QAAQ;EAAI,SAAQ;EAAY,QAAQ;EAAO,GAAI;EAAa,GAAI;EAApF,UAAA,CACE,oBAAC,QAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;EAAU,CAAA,GACpC,oBAAC,MAAD,EAAM,GAAG,YAAY,QAAU,CAAA,CAC5B;;AAET;;AAGA,SAAgB,UAAU,EAAE,OAAO,GAAG,SAAoB;CACxD,OACE,oBAAC,KAAD;EAAK,OAAO;EAAI,QAAQ;EAAI,SAAQ;EAAY,QAAQ;EAAO,GAAI;EAAa,GAAI;EAClF,UAAA,oBAAC,MAAD,EAAM,GAAE,uBAAwB,CAAA;CAC7B,CAAA;AAET;;AAGA,SAAgB,UAAU,EAAE,OAAO,GAAG,SAAoB;CACxD,OACE,oBAAC,KAAD;EAAK,OAAO;EAAI,QAAQ;EAAI,SAAQ;EAAY,QAAQ;EAAO,GAAI;EAAa,GAAI;EAClF,UAAA,oBAAC,MAAD,EAAM,GAAE,iCAAkC,CAAA;CACvC,CAAA;AAET;;AAGA,SAAgB,iBAAiB,EAAE,OAAO,GAAG,SAAoB;CAC/D,OACE,oBAAC,KAAD;EAAK,OAAO;EAAI,QAAQ;EAAI,SAAQ;EAAY,QAAQ;EAAO,GAAI;EAAa,GAAI;EAClF,UAAA,oBAAC,MAAD,EAAM,GAAE,qBAAsB,CAAA;CAC3B,CAAA;AAET"}

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

@@ -0,0 +1,15 @@
+import { useCSSVariable } from "uniwind";
+//#region src/components/_shared/use-token.ts
+/**
+* Valor resolvido de um token de cor (ex.: `--color-status-success-text`) no tema atual.
+* Para o que não aceita className: cores de ícone SVG, `placeholderTextColor`, `selectionColor`,
+* `trackColor` do Switch etc. Devolve `undefined` se o token não existir.
+*/
+function useToken(name) {
+	const value = useCSSVariable(name);
+	return typeof value === "string" ? value : void 0;
+}
+//#endregion
+export { useToken };
+
+//# sourceMappingURL=use-token.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-token.js","names":[],"sources":["../../../src/components/_shared/use-token.ts"],"sourcesContent":["import { useCSSVariable } from 'uniwind'\n\n/**\n * Valor resolvido de um token de cor (ex.: `--color-status-success-text`) no tema atual.\n * Para o que não aceita className: cores de ícone SVG, `placeholderTextColor`, `selectionColor`,\n * `trackColor` do Switch etc. Devolve `undefined` se o token não existir.\n */\nexport function useToken(name: `--color-${string}`): string | undefined {\n  const value = useCSSVariable(name)\n  return typeof value === 'string' ? value : undefined\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,SAAS,MAA+C;CACtE,MAAM,QAAQ,eAAe,IAAI;CACjC,OAAO,OAAO,UAAU,WAAW,QAAQ,KAAA;AAC7C"}

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import { PressableProps, ViewProps } from "react-native";
+//#region src/components/accordion/accordion.d.ts
+type AccordionBaseProps = Omit<ViewProps, 'children'> & {
+  className?: string;
+  children?: ReactNode;
+};
+export type AccordionProps = AccordionBaseProps & ({
+  /** Abre uma seção por vez. */
+  type: 'single';
+  /** Permite fechar a seção aberta (todas recolhidas). */
+  collapsible?: boolean;
+  value?: string;
+  defaultValue?: string;
+  /** Recebe o valor aberto, ou `''` quando tudo foi recolhido (igual ao web). */
+  onValueChange?: (value: string) => void;
+} | {
+  /** Permite várias seções abertas. */
+  type: 'multiple';
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+});
+/**
+ * Lista de seções que expandem e recolhem. `type="single"` abre uma por vez (com `collapsible`,
+ * dá para fechar todas); `type="multiple"` permite várias abertas. Controlado (`value`) ou não
+ * (`defaultValue`). A animação usa `LayoutAnimation`.
+ */
+export declare function Accordion(props: AccordionProps): import("react").JSX.Element;
+export type AccordionItemProps = Omit<ViewProps, 'children'> & {
+  className?: string;
+  /** Identifica a seção em `value`/`defaultValue` do `Accordion`. */
+  value: string;
+  /** Texto do cabeçalho: é o botão que expande a seção. */
+  title: ReactNode;
+  disabled?: boolean;
+  /** Repassado ao botão do cabeçalho (ex.: `testID`, `accessibilityLabel`). */
+  triggerProps?: Omit<PressableProps, 'children' | 'style' | 'onPress' | 'disabled'>;
+  children?: ReactNode;
+};
+export declare function AccordionItem({ className, value, title, disabled, triggerProps, children, ...props }: AccordionItemProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion/accordion.js

@@ -0,0 +1,90 @@
+import { cn } from "../../utils/cn.js";
+import { ChevronRightIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { LayoutAnimation, Platform, Pressable, Text, UIManager, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/accordion/accordion.tsx
+if (Platform.OS === "android") UIManager.setLayoutAnimationEnabledExperimental?.(true);
+const AccordionContext = createContext({
+	isOpen: () => false,
+	toggle: () => {}
+});
+const toArray = (value) => value === void 0 || value === "" ? [] : Array.isArray(value) ? value : [value];
+/**
+* Lista de seções que expandem e recolhem. `type="single"` abre uma por vez (com `collapsible`,
+* dá para fechar todas); `type="multiple"` permite várias abertas. Controlado (`value`) ou não
+* (`defaultValue`). A animação usa `LayoutAnimation`.
+*/
+function Accordion(props) {
+	const { className, children, type, value, defaultValue, onValueChange, collapsible: collapsibleProp, ...rest } = props;
+	const collapsible = type === "single" ? Boolean(collapsibleProp) : true;
+	const [internal, setInternal] = useState(() => toArray(defaultValue));
+	const open = value !== void 0 ? toArray(value) : internal;
+	const toggle = useCallback((item) => {
+		let next;
+		if (open.includes(item)) {
+			if (type === "single" && !collapsible) return;
+			next = open.filter((v) => v !== item);
+		} else next = type === "single" ? [item] : [...open, item];
+		LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+		if (value === void 0) setInternal(next);
+		if (type === "single") onValueChange?.(next[0] ?? "");
+		else onValueChange?.(next);
+	}, [
+		open,
+		type,
+		collapsible,
+		value,
+		onValueChange
+	]);
+	const context = useMemo(() => ({
+		isOpen: (v) => open.includes(v),
+		toggle
+	}), [open, toggle]);
+	return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(View, {
+			className: cn("w-full", className),
+			...rest,
+			children
+		})
+	});
+}
+function AccordionItem({ className, value, title, disabled = false, triggerProps, children, ...props }) {
+	const { isOpen, toggle } = useContext(AccordionContext);
+	const open = isOpen(value);
+	const iconColor = useToken("--color-text-secondary");
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("border-b border-border-default", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs(Pressable, {
+			accessibilityRole: "button",
+			accessibilityState: {
+				expanded: open,
+				disabled
+			},
+			disabled,
+			onPress: () => toggle(value),
+			className: "flex-row items-center justify-between gap-4 py-4",
+			...triggerProps,
+			children: [typeof title === "string" ? /* @__PURE__ */ jsx(Text, {
+				className: cn("flex-1 text-sm font-medium text-text-primary", disabled && "text-text-disabled"),
+				children: title
+			}) : title, /* @__PURE__ */ jsx(View, {
+				style: { transform: [{ rotate: open ? "90deg" : "0deg" }] },
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, { color: iconColor })
+			})]
+		}), open ? /* @__PURE__ */ jsx(View, {
+			className: "pb-4",
+			children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
+				className: "text-sm text-text-secondary",
+				children
+			}) : children
+		}) : null]
+	});
+}
+//#endregion
+export { Accordion, AccordionItem };
+
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","names":[],"sources":["../../../src/components/accordion/accordion.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { createContext, type ReactNode, useCallback, useContext, useMemo, useState } from 'react'\nimport {\n  LayoutAnimation,\n  Platform,\n  Pressable,\n  type PressableProps,\n  Text,\n  UIManager,\n  View,\n  type ViewProps,\n} from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { ChevronRightIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\n\n// No Android antigo o LayoutAnimation precisa ser habilitado. Na New Architecture a chamada é no-op.\nif (Platform.OS === 'android') {\n  UIManager.setLayoutAnimationEnabledExperimental?.(true)\n}\n\ntype AccordionContextValue = {\n  isOpen: (value: string) => boolean\n  toggle: (value: string) => void\n}\n\nconst AccordionContext = createContext<AccordionContextValue>({\n  isOpen: () => false,\n  toggle: () => {},\n})\n\ntype AccordionBaseProps = Omit<ViewProps, 'children'> & {\n  className?: string\n  children?: ReactNode\n}\n\nexport type AccordionProps = AccordionBaseProps &\n  (\n    | {\n        /** Abre uma seção por vez. */\n        type: 'single'\n        /** Permite fechar a seção aberta (todas recolhidas). */\n        collapsible?: boolean\n        value?: string\n        defaultValue?: string\n        /** Recebe o valor aberto, ou `''` quando tudo foi recolhido (igual ao web). */\n        onValueChange?: (value: string) => void\n      }\n    | {\n        /** Permite várias seções abertas. */\n        type: 'multiple'\n        value?: string[]\n        defaultValue?: string[]\n        onValueChange?: (value: string[]) => void\n      }\n  )\n\nconst toArray = (value: string | string[] | undefined) =>\n  value === undefined || value === '' ? [] : Array.isArray(value) ? value : [value]\n\n/**\n * Lista de seções que expandem e recolhem. `type=\"single\"` abre uma por vez (com `collapsible`,\n * dá para fechar todas); `type=\"multiple\"` permite várias abertas. Controlado (`value`) ou não\n * (`defaultValue`). A animação usa `LayoutAnimation`.\n */\nexport function Accordion(props: AccordionProps) {\n  // União discriminada alargada: a lógica abaixo trata os dois modos com `string[]`.\n  const {\n    className,\n    children,\n    type,\n    value,\n    defaultValue,\n    onValueChange,\n    collapsible: collapsibleProp,\n    ...rest\n  } = props as AccordionBaseProps & {\n    type: 'single' | 'multiple'\n    collapsible?: boolean\n    value?: string | string[]\n    defaultValue?: string | string[]\n    onValueChange?: (value: never) => void\n  }\n  const collapsible = type === 'single' ? Boolean(collapsibleProp) : true\n\n  const [internal, setInternal] = useState<string[]>(() => toArray(defaultValue))\n  const open = value !== undefined ? toArray(value) : internal\n\n  const toggle = useCallback(\n    (item: string) => {\n      let next: string[]\n      if (open.includes(item)) {\n        if (type === 'single' && !collapsible) return\n        next = open.filter((v) => v !== item)\n      } else {\n        next = type === 'single' ? [item] : [...open, item]\n      }\n      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)\n      if (value === undefined) setInternal(next)\n      if (type === 'single') (onValueChange as ((v: string) => void) | undefined)?.(next[0] ?? '')\n      else (onValueChange as ((v: string[]) => void) | undefined)?.(next)\n    },\n    [open, type, collapsible, value, onValueChange],\n  )\n\n  const context = useMemo(\n    () => ({ isOpen: (v: string) => open.includes(v), toggle }),\n    [open, toggle],\n  )\n\n  return (\n    <AccordionContext.Provider value={context}>\n      <View className={cn('w-full', className)} {...rest}>\n        {children}\n      </View>\n    </AccordionContext.Provider>\n  )\n}\n\nexport type AccordionItemProps = Omit<ViewProps, 'children'> & {\n  className?: string\n  /** Identifica a seção em `value`/`defaultValue` do `Accordion`. */\n  value: string\n  /** Texto do cabeçalho: é o botão que expande a seção. */\n  title: ReactNode\n  disabled?: boolean\n  /** Repassado ao botão do cabeçalho (ex.: `testID`, `accessibilityLabel`). */\n  triggerProps?: Omit<PressableProps, 'children' | 'style' | 'onPress' | 'disabled'>\n  children?: ReactNode\n}\n\nexport function AccordionItem({\n  className,\n  value,\n  title,\n  disabled = false,\n  triggerProps,\n  children,\n  ...props\n}: AccordionItemProps) {\n  const { isOpen, toggle } = useContext(AccordionContext)\n  const open = isOpen(value)\n  const iconColor = useToken('--color-text-secondary')\n\n  return (\n    <View className={cn('border-b border-border-default', className)} {...props}>\n      <Pressable\n        accessibilityRole=\"button\"\n        accessibilityState={{ expanded: open, disabled }}\n        disabled={disabled}\n        onPress={() => toggle(value)}\n        className=\"flex-row items-center justify-between gap-4 py-4\"\n        {...triggerProps}\n      >\n        {typeof title === 'string' ? (\n          <Text\n            className={cn(\n              'flex-1 text-sm font-medium text-text-primary',\n              disabled && 'text-text-disabled',\n            )}\n          >\n            {title}\n          </Text>\n        ) : (\n          title\n        )}\n        {/* Valor dinâmico: a rotação depende do estado. */}\n        <View style={{ transform: [{ rotate: open ? '90deg' : '0deg' }] }}>\n          <ChevronRightIcon color={iconColor} />\n        </View>\n      </Pressable>\n      {open ? (\n        <View className=\"pb-4\">\n          {typeof children === 'string' ? (\n            <Text className=\"text-sm text-text-secondary\">{children}</Text>\n          ) : (\n            children\n          )}\n        </View>\n      ) : null}\n    </View>\n  )\n}\n"],"mappings":";;;;;;;AAkBA,IAAI,SAAS,OAAO,WAClB,UAAU,wCAAwC,IAAI;AAQxD,MAAM,mBAAmB,cAAqC;CAC5D,cAAc;CACd,cAAc,CAAC;AACjB,CAAC;AA4BD,MAAM,WAAW,UACf,UAAU,KAAA,KAAa,UAAU,KAAK,CAAC,IAAI,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;;;;;;AAOlF,SAAgB,UAAU,OAAuB;CAE/C,MAAM,EACJ,WACA,UACA,MACA,OACA,cACA,eACA,aAAa,iBACb,GAAG,SACD;CAOJ,MAAM,cAAc,SAAS,WAAW,QAAQ,eAAe,IAAI;CAEnE,MAAM,CAAC,UAAU,eAAe,eAAyB,QAAQ,YAAY,CAAC;CAC9E,MAAM,OAAO,UAAU,KAAA,IAAY,QAAQ,KAAK,IAAI;CAEpD,MAAM,SAAS,aACZ,SAAiB;EAChB,IAAI;EACJ,IAAI,KAAK,SAAS,IAAI,GAAG;GACvB,IAAI,SAAS,YAAY,CAAC,aAAa;GACvC,OAAO,KAAK,QAAQ,MAAM,MAAM,IAAI;EACtC,OACE,OAAO,SAAS,WAAW,CAAC,IAAI,IAAI,CAAC,GAAG,MAAM,IAAI;EAEpD,gBAAgB,cAAc,gBAAgB,QAAQ,aAAa;EACnE,IAAI,UAAU,KAAA,GAAW,YAAY,IAAI;EACzC,IAAI,SAAS,UAAU,gBAAuD,KAAK,MAAM,EAAE;OACtF,gBAAyD,IAAI;CACpE,GACA;EAAC;EAAM;EAAM;EAAa;EAAO;CAAa,CAChD;CAEA,MAAM,UAAU,eACP;EAAE,SAAS,MAAc,KAAK,SAAS,CAAC;EAAG;CAAO,IACzD,CAAC,MAAM,MAAM,CACf;CAEA,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;EAChC,UAAA,oBAAC,MAAD;GAAM,WAAW,GAAG,UAAU,SAAS;GAAG,GAAI;GAC3C;EACG,CAAA;CACmB,CAAA;AAE/B;AAcA,SAAgB,cAAc,EAC5B,WACA,OACA,OACA,WAAW,OACX,cACA,UACA,GAAG,SACkB;CACrB,MAAM,EAAE,QAAQ,WAAW,WAAW,gBAAgB;CACtD,MAAM,OAAO,OAAO,KAAK;CACzB,MAAM,YAAY,SAAS,wBAAwB;CAEnD,OACE,qBAAC,MAAD;EAAM,WAAW,GAAG,kCAAkC,SAAS;EAAG,GAAI;EAAtE,UAAA,CACE,qBAAC,WAAD;GACE,mBAAkB;GAClB,oBAAoB;IAAE,UAAU;IAAM;GAAS;GACrC;GACV,eAAe,OAAO,KAAK;GAC3B,WAAU;GACV,GAAI;GANN,UAAA,CAQG,OAAO,UAAU,WAChB,oBAAC,MAAD;IACE,WAAW,GACT,gDACA,YAAY,oBACd;IAEC,UAAA;GACG,CAAA,IAEN,OAGF,oBAAC,MAAD;IAAM,OAAO,EAAE,WAAW,CAAC,EAAE,QAAQ,OAAO,UAAU,OAAO,CAAC,EAAE;IAC9D,UAAA,oBAAC,kBAAD,EAAkB,OAAO,UAAY,CAAA;GACjC,CAAA,CACG;EACV,CAAA,GAAA,OACC,oBAAC,MAAD;GAAM,WAAU;GACb,UAAA,OAAO,aAAa,WACnB,oBAAC,MAAD;IAAM,WAAU;IAA+B;GAAe,CAAA,IAE9D;EAEE,CAAA,IACJ,IACA;;AAEV"}

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

@@ -0,0 +1,2 @@
+import { Accordion, AccordionItem, AccordionItemProps, AccordionProps } from "./accordion.js";
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps };

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,25 @@
+import { Status } from "../_shared/status.js";
+import { ReactNode } from "react";
+import { ViewProps } from "react-native";
+//#region src/components/alert/alert.d.ts
+export type AlertProps = ViewProps & {
+  className?: string;
+  status?: Status;
+  /** Resumo do alerta (opcional). */
+  title?: string;
+  /** Mostra o ícone semântico do status. */
+  showIcon?: boolean;
+  /** Ação contextual (ex.: um `<Button variant="ghost">`). */
+  action?: ReactNode;
+  /** Mostra o botão de fechar (×) e o chama ao tocar. */
+  onDismiss?: () => void;
+  /** Nome acessível do botão de fechar. */
+  dismissLabel?: string;
+};
+/**
+ * Mensagem contextual em bloco, persistente. Para avisos temporários use Toast; para globais,
+ * Banner. `children` string vira `Text`; outros nós são renderizados como estão.
+ */
+export declare function Alert({ className, status, title, showIcon, action, onDismiss, dismissLabel, children, ...props }: AlertProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=alert.d.ts.map