@innovui/react-native 0.0.0-stage → 0.1.0

package/dist/components/stack/stack.js

@@ -0,0 +1,60 @@
+import { cn } from "../../utils/cn.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/stack/stack.tsx
+const stackVariants = cva("", {
+	variants: {
+		direction: {
+			column: "flex-col",
+			row: "flex-row"
+		},
+		gap: {
+			0: "gap-0",
+			1: "gap-1",
+			2: "gap-2",
+			3: "gap-3",
+			4: "gap-4",
+			6: "gap-6",
+			8: "gap-8"
+		},
+		align: {
+			start: "items-start",
+			center: "items-center",
+			end: "items-end",
+			stretch: "items-stretch"
+		},
+		justify: {
+			start: "justify-start",
+			center: "justify-center",
+			end: "justify-end",
+			between: "justify-between"
+		},
+		wrap: {
+			true: "flex-wrap",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		direction: "column",
+		gap: 4,
+		wrap: false
+	}
+});
+/** Empilha filhos numa direção com espaçamento uniforme (flexbox + a escala de gap do DS). */
+function Stack({ className, direction, gap, align, justify, wrap, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: cn(stackVariants({
+			direction,
+			gap,
+			align,
+			justify,
+			wrap
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Stack };
+
+//# sourceMappingURL=stack.js.map

package/dist/components/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","names":[],"sources":["../../../src/components/stack/stack.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\n\n// gap segue a escala de espaçamento do DS (base 4): 1=4px … 8=32px\nconst stackVariants = cva('', {\n  variants: {\n    direction: { column: 'flex-col', row: 'flex-row' },\n    gap: {\n      0: 'gap-0',\n      1: 'gap-1',\n      2: 'gap-2',\n      3: 'gap-3',\n      4: 'gap-4',\n      6: 'gap-6',\n      8: 'gap-8',\n    },\n    align: {\n      start: 'items-start',\n      center: 'items-center',\n      end: 'items-end',\n      stretch: 'items-stretch',\n    },\n    justify: {\n      start: 'justify-start',\n      center: 'justify-center',\n      end: 'justify-end',\n      between: 'justify-between',\n    },\n    wrap: { true: 'flex-wrap', false: '' },\n  },\n  defaultVariants: { direction: 'column', gap: 4, wrap: false },\n})\n\nexport type StackProps = ViewProps & VariantProps<typeof stackVariants> & { className?: string }\n\n/** Empilha filhos numa direção com espaçamento uniforme (flexbox + a escala de gap do DS). */\nexport function Stack({ className, direction, gap, align, justify, wrap, ...props }: StackProps) {\n  return (\n    <View\n      className={cn(stackVariants({ direction, gap, align, justify, wrap }), className)}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;AAOA,MAAM,gBAAgB,IAAI,IAAI;CAC5B,UAAU;EACR,WAAW;GAAE,QAAQ;GAAY,KAAK;EAAW;EACjD,KAAK;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;EACL;EACA,OAAO;GACL,OAAO;GACP,QAAQ;GACR,KAAK;GACL,SAAS;EACX;EACA,SAAS;GACP,OAAO;GACP,QAAQ;GACR,KAAK;GACL,SAAS;EACX;EACA,MAAM;GAAE,MAAM;GAAa,OAAO;EAAG;CACvC;CACA,iBAAiB;EAAE,WAAW;EAAU,KAAK;EAAG,MAAM;CAAM;AAC9D,CAAC;;AAKD,SAAgB,MAAM,EAAE,WAAW,WAAW,KAAK,OAAO,SAAS,MAAM,GAAG,SAAqB;CAC/F,OACE,oBAAC,MAAD;EACE,WAAW,GAAG,cAAc;GAAE;GAAW;GAAK;GAAO;GAAS;EAAK,CAAC,GAAG,SAAS;EAChF,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,2 @@
+import { Step, StepProps, Stepper, StepperProps } from "./stepper.js";
+export { Step, type StepProps, Stepper, type StepperProps };

package/dist/components/stepper/stepper.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import { ViewProps } from "react-native";
+//#region src/components/stepper/stepper.d.ts
+export type StepperProps = ViewProps & {
+  className?: string;
+  /** Índice (a partir de 0) do passo atual: os anteriores ficam concluídos, os seguintes pendentes. */
+  current: number;
+};
+/** Progresso de um fluxo de 2–7 etapas (checkout, onboarding). O estado de cada `Step` vem de `current`. */
+export declare function Stepper({ className, current, children, ...props }: StepperProps): import("react").JSX.Element;
+export type StepProps = ViewProps & {
+  className?: string;
+  /** Complemento lido em passos concluídos (o web usa texto só para leitor de tela). */
+  completedLabel?: string;
+  children?: ReactNode;
+};
+/** Um passo do `Stepper`: o rótulo vai como `children`; o número vem da posição. */
+export declare function Step({ className, completedLabel, children, accessibilityLabel, accessibilityState, ...props }: StepProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/stepper/stepper.js

@@ -0,0 +1,61 @@
+import { cn } from "../../utils/cn.js";
+import { CheckIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { Children, createContext, useContext } from "react";
+import { Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/stepper/stepper.tsx
+const StepContext = createContext({
+	state: "upcoming",
+	number: 1
+});
+/** Progresso de um fluxo de 2–7 etapas (checkout, onboarding). O estado de cada `Step` vem de `current`. */
+function Stepper({ className, current, children, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: cn("flex-row flex-wrap items-center gap-8", className),
+		...props,
+		children: Children.toArray(children).map((child, index) => /* @__PURE__ */ jsx(StepContext.Provider, {
+			value: {
+				number: index + 1,
+				state: index < current ? "completed" : index === current ? "active" : "upcoming"
+			},
+			children: child
+		}, index))
+	});
+}
+const indicator = {
+	completed: "bg-bg-success-emphasis",
+	active: "bg-interactive-primary",
+	upcoming: "bg-interactive-disabled"
+};
+/** Um passo do `Stepper`: o rótulo vai como `children`; o número vem da posição. */
+function Step({ className, completedLabel = "concluído", children, accessibilityLabel, accessibilityState, ...props }) {
+	const { state, number } = useContext(StepContext);
+	const checkColor = useToken("--color-text-inverse");
+	const label = accessibilityLabel ?? (typeof children === "string" && state === "completed" ? `${children} (${completedLabel})` : void 0);
+	return /* @__PURE__ */ jsxs(View, {
+		accessible: true,
+		accessibilityLabel: label,
+		accessibilityState: {
+			...accessibilityState,
+			selected: state === "active"
+		},
+		className: cn("flex-row items-center gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(View, {
+			importantForAccessibility: "no-hide-descendants",
+			className: cn("size-7 shrink-0 items-center justify-center rounded-full", indicator[state]),
+			children: state === "completed" ? /* @__PURE__ */ jsx(CheckIcon, { color: checkColor }) : /* @__PURE__ */ jsx(Text, {
+				className: "text-[13px] font-bold text-text-inverse",
+				children: number
+			})
+		}), typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
+			className: cn("text-sm font-medium", state === "upcoming" ? "text-text-tertiary" : "text-text-primary"),
+			children
+		}) : children]
+	});
+}
+//#endregion
+export { Step, Stepper };
+
+//# sourceMappingURL=stepper.js.map

package/dist/components/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","names":[],"sources":["../../../src/components/stepper/stepper.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { Children, createContext, type ReactNode, useContext } from 'react'\nimport { Text, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { CheckIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\n\ntype StepState = 'completed' | 'active' | 'upcoming'\n\nconst StepContext = createContext<{ state: StepState; number: number }>({\n  state: 'upcoming',\n  number: 1,\n})\n\nexport type StepperProps = ViewProps & {\n  className?: string\n  /** Índice (a partir de 0) do passo atual: os anteriores ficam concluídos, os seguintes pendentes. */\n  current: number\n}\n\n/** Progresso de um fluxo de 2–7 etapas (checkout, onboarding). O estado de cada `Step` vem de `current`. */\nexport function Stepper({ className, current, children, ...props }: StepperProps) {\n  return (\n    <View className={cn('flex-row flex-wrap items-center gap-8', className)} {...props}>\n      {Children.toArray(children).map((child, index) => (\n        <StepContext.Provider\n          // biome-ignore lint/suspicious/noArrayIndexKey: a posição do passo é a identidade dele\n          key={index}\n          value={{\n            number: index + 1,\n            state: index < current ? 'completed' : index === current ? 'active' : 'upcoming',\n          }}\n        >\n          {child}\n        </StepContext.Provider>\n      ))}\n    </View>\n  )\n}\n\nconst indicator: Record<StepState, string> = {\n  completed: 'bg-bg-success-emphasis',\n  active: 'bg-interactive-primary',\n  upcoming: 'bg-interactive-disabled',\n}\n\nexport type StepProps = ViewProps & {\n  className?: string\n  /** Complemento lido em passos concluídos (o web usa texto só para leitor de tela). */\n  completedLabel?: string\n  children?: ReactNode\n}\n\n/** Um passo do `Stepper`: o rótulo vai como `children`; o número vem da posição. */\nexport function Step({\n  className,\n  completedLabel = 'concluído',\n  children,\n  accessibilityLabel,\n  accessibilityState,\n  ...props\n}: StepProps) {\n  const { state, number } = useContext(StepContext)\n  const checkColor = useToken('--color-text-inverse')\n  // Um único elemento acessível por passo; o label só é montado quando o rótulo é texto.\n  const label =\n    accessibilityLabel ??\n    (typeof children === 'string' && state === 'completed'\n      ? `${children} (${completedLabel})`\n      : undefined)\n\n  return (\n    <View\n      accessible\n      accessibilityLabel={label}\n      // RN não tem aria-current: o passo atual vai como `selected`.\n      accessibilityState={{ ...accessibilityState, selected: state === 'active' }}\n      className={cn('flex-row items-center gap-2', className)}\n      {...props}\n    >\n      <View\n        importantForAccessibility=\"no-hide-descendants\"\n        className={cn('size-7 shrink-0 items-center justify-center rounded-full', indicator[state])}\n      >\n        {state === 'completed' ? (\n          <CheckIcon color={checkColor} />\n        ) : (\n          <Text className=\"text-[13px] font-bold text-text-inverse\">{number}</Text>\n        )}\n      </View>\n      {typeof children === 'string' ? (\n        <Text\n          className={cn(\n            'text-sm font-medium',\n            state === 'upcoming' ? 'text-text-tertiary' : 'text-text-primary',\n          )}\n        >\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n    </View>\n  )\n}\n"],"mappings":";;;;;;;AAUA,MAAM,cAAc,cAAoD;CACtE,OAAO;CACP,QAAQ;AACV,CAAC;;AASD,SAAgB,QAAQ,EAAE,WAAW,SAAS,UAAU,GAAG,SAAuB;CAChF,OACE,oBAAC,MAAD;EAAM,WAAW,GAAG,yCAAyC,SAAS;EAAG,GAAI;EAC1E,UAAA,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,OAAO,UACtC,oBAAC,YAAY,UAAb;GAGE,OAAO;IACL,QAAQ,QAAQ;IAChB,OAAO,QAAQ,UAAU,cAAc,UAAU,UAAU,WAAW;GACxE;GAEC,UAAA;EACmB,GAPf,KAOe,CACvB;CACG,CAAA;AAEV;AAEA,MAAM,YAAuC;CAC3C,WAAW;CACX,QAAQ;CACR,UAAU;AACZ;;AAUA,SAAgB,KAAK,EACnB,WACA,iBAAiB,aACjB,UACA,oBACA,oBACA,GAAG,SACS;CACZ,MAAM,EAAE,OAAO,WAAW,WAAW,WAAW;CAChD,MAAM,aAAa,SAAS,sBAAsB;CAElD,MAAM,QACJ,uBACC,OAAO,aAAa,YAAY,UAAU,cACvC,GAAG,SAAS,IAAI,eAAe,KAC/B,KAAA;CAEN,OACE,qBAAC,MAAD;EACE,YAAA;EACA,oBAAoB;EAEpB,oBAAoB;GAAE,GAAG;GAAoB,UAAU,UAAU;EAAS;EAC1E,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;EANN,UAAA,CAQE,oBAAC,MAAD;GACE,2BAA0B;GAC1B,WAAW,GAAG,4DAA4D,UAAU,MAAM;GAEzF,UAAA,UAAU,cACT,oBAAC,WAAD,EAAW,OAAO,WAAa,CAAA,IAE/B,oBAAC,MAAD;IAAM,WAAU;IAA2C,UAAA;GAAa,CAAA;EAEtE,CAAA,GACL,OAAO,aAAa,WACnB,oBAAC,MAAD;GACE,WAAW,GACT,uBACA,UAAU,aAAa,uBAAuB,mBAChD;GAEC;EACG,CAAA,IAEN,QAEE;;AAEV"}

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

@@ -0,0 +1,2 @@
+import { Switch, SwitchProps } from "./switch.js";
+export { Switch, type SwitchProps };

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { PressableProps } from "react-native";
+//#region src/components/switch/switch.d.ts
+export type SwitchProps = Omit<PressableProps, 'children' | 'style' | 'onPress'> & {
+  className?: string;
+  label?: ReactNode;
+  /** Controlado. Sem ele, o componente guarda o próprio estado (começa em `defaultChecked`). */
+  checked?: boolean;
+  defaultChecked?: boolean;
+  /** Chamado com o novo valor a cada toque, com efeito imediato (sem submit). */
+  onCheckedChange?: (checked: boolean) => void;
+};
+export declare function Switch({ label, checked, defaultChecked, onCheckedChange, disabled, className, accessibilityState, ...props }: SwitchProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/switch/switch.js

@@ -0,0 +1,51 @@
+import { cn } from "../../utils/cn.js";
+import { useEffect, useRef, useState } from "react";
+import { Animated, Pressable, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/switch/switch.tsx
+const TRAVEL = 20;
+function Switch({ label, checked, defaultChecked = false, onCheckedChange, disabled, className, accessibilityState, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+	const isChecked = checked ?? uncontrolled;
+	const isDisabled = Boolean(disabled);
+	const position = useRef(new Animated.Value(isChecked ? TRAVEL : 0)).current;
+	useEffect(() => {
+		Animated.timing(position, {
+			toValue: isChecked ? TRAVEL : 0,
+			duration: 150,
+			useNativeDriver: true
+		}).start();
+	}, [isChecked, position]);
+	return /* @__PURE__ */ jsxs(Pressable, {
+		accessibilityRole: "switch",
+		accessibilityState: {
+			...accessibilityState,
+			checked: isChecked,
+			disabled: isDisabled
+		},
+		disabled: isDisabled,
+		onPress: () => {
+			setUncontrolled(!isChecked);
+			onCheckedChange?.(!isChecked);
+		},
+		className: cn("min-h-11 flex-row items-center gap-2.5 self-start", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(View, {
+			className: cn("h-6 w-11 justify-center rounded-full bg-selection-toggle-track-off", isChecked && "bg-selection-bg-selected", isDisabled && "bg-selection-bg-disabled"),
+			children: /* @__PURE__ */ jsx(Animated.View, {
+				style: {
+					marginLeft: 2,
+					transform: [{ translateX: position }]
+				},
+				children: /* @__PURE__ */ jsx(View, { className: "size-5 rounded-full bg-selection-indicator-selected" })
+			})
+		}), typeof label === "string" ? /* @__PURE__ */ jsx(Text, {
+			className: cn("text-sm font-medium text-selection-text-label", isDisabled && "text-selection-text-disabled"),
+			children: label
+		}) : label]
+	});
+}
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { type ReactNode, useEffect, useRef, useState } from 'react'\nimport { Animated, Pressable, type PressableProps, Text, View } from 'react-native'\nimport { cn } from '../../utils/cn'\n\nexport type SwitchProps = Omit<PressableProps, 'children' | 'style' | 'onPress'> & {\n  className?: string\n  label?: ReactNode\n  /** Controlado. Sem ele, o componente guarda o próprio estado (começa em `defaultChecked`). */\n  checked?: boolean\n  defaultChecked?: boolean\n  /** Chamado com o novo valor a cada toque, com efeito imediato (sem submit). */\n  onCheckedChange?: (checked: boolean) => void\n}\n\n// Trilho de 44x24 e polegar de 20 com 2 de folga: curso de 20px.\nconst TRAVEL = 20\n\nexport function Switch({\n  label,\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  disabled,\n  className,\n  accessibilityState,\n  ...props\n}: SwitchProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultChecked)\n  const isChecked = checked ?? uncontrolled\n  const isDisabled = Boolean(disabled)\n  const position = useRef(new Animated.Value(isChecked ? TRAVEL : 0)).current\n\n  useEffect(() => {\n    Animated.timing(position, {\n      toValue: isChecked ? TRAVEL : 0,\n      duration: 150,\n      useNativeDriver: true,\n    }).start()\n  }, [isChecked, position])\n\n  return (\n    <Pressable\n      accessibilityRole=\"switch\"\n      accessibilityState={{ ...accessibilityState, checked: isChecked, disabled: isDisabled }}\n      disabled={isDisabled}\n      onPress={() => {\n        setUncontrolled(!isChecked)\n        onCheckedChange?.(!isChecked)\n      }}\n      className={cn('min-h-11 flex-row items-center gap-2.5 self-start', className)}\n      {...props}\n    >\n      <View\n        className={cn(\n          'h-6 w-11 justify-center rounded-full bg-selection-toggle-track-off',\n          isChecked && 'bg-selection-bg-selected',\n          isDisabled && 'bg-selection-bg-disabled',\n        )}\n      >\n        <Animated.View style={{ marginLeft: 2, transform: [{ translateX: position }] }}>\n          <View className=\"size-5 rounded-full bg-selection-indicator-selected\" />\n        </Animated.View>\n      </View>\n      {typeof label === 'string' ? (\n        <Text\n          className={cn(\n            'text-sm font-medium text-selection-text-label',\n            isDisabled && 'text-selection-text-disabled',\n          )}\n        >\n          {label}\n        </Text>\n      ) : (\n        label\n      )}\n    </Pressable>\n  )\n}\n"],"mappings":";;;;;AAiBA,MAAM,SAAS;AAEf,SAAgB,OAAO,EACrB,OACA,SACA,iBAAiB,OACjB,iBACA,UACA,WACA,oBACA,GAAG,SACW;CACd,MAAM,CAAC,cAAc,mBAAmB,SAAS,cAAc;CAC/D,MAAM,YAAY,WAAW;CAC7B,MAAM,aAAa,QAAQ,QAAQ;CACnC,MAAM,WAAW,OAAO,IAAI,SAAS,MAAM,YAAY,SAAS,CAAC,CAAC,CAAC,CAAC;CAEpE,gBAAgB;EACd,SAAS,OAAO,UAAU;GACxB,SAAS,YAAY,SAAS;GAC9B,UAAU;GACV,iBAAiB;EACnB,CAAC,CAAC,CAAC,MAAM;CACX,GAAG,CAAC,WAAW,QAAQ,CAAC;CAExB,OACE,qBAAC,WAAD;EACE,mBAAkB;EAClB,oBAAoB;GAAE,GAAG;GAAoB,SAAS;GAAW,UAAU;EAAW;EACtF,UAAU;EACV,eAAe;GACb,gBAAgB,CAAC,SAAS;GAC1B,kBAAkB,CAAC,SAAS;EAC9B;EACA,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;EATN,UAAA,CAWE,oBAAC,MAAD;GACE,WAAW,GACT,sEACA,aAAa,4BACb,cAAc,0BAChB;GAEA,UAAA,oBAAC,SAAS,MAAV;IAAe,OAAO;KAAE,YAAY;KAAG,WAAW,CAAC,EAAE,YAAY,SAAS,CAAC;IAAE;IAC3E,UAAA,oBAAC,MAAD,EAAM,WAAU,sDAAuD,CAAA;GAC1D,CAAA;EACX,CAAA,GACL,OAAO,UAAU,WAChB,oBAAC,MAAD;GACE,WAAW,GACT,iDACA,cAAc,8BAChB;GAEC,UAAA;EACG,CAAA,IAEN,KAEO;;AAEf"}

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

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from "./table.js";
+export { Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps };

package/dist/components/table/table.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from "react";
+import { ViewProps } from "react-native";
+//#region src/components/table/table.d.ts
+export type TableProps = ViewProps & {
+  className?: string;
+};
+/**
+ * Tabela de dados. Em telas estreitas a tabela rola na horizontal, sem estourar o layout.
+ * Dê um `TableCaption` (ou `accessibilityLabel`) para nomear a tabela.
+ */
+export declare function Table({ className, ...props }: TableProps): import("react").JSX.Element;
+export type TableCaptionProps = Omit<ViewProps, 'children'> & {
+  className?: string;
+  children?: ReactNode;
+};
+/** Nome e descrição da tabela, lidos antes do conteúdo por leitores de tela. */
+export declare function TableCaption({ className, children, ...props }: TableCaptionProps): import("react").JSX.Element;
+export type TableHeaderProps = ViewProps & {
+  className?: string;
+};
+export declare function TableHeader({ className, ...props }: TableHeaderProps): import("react").JSX.Element;
+export type TableBodyProps = ViewProps & {
+  className?: string;
+};
+export declare function TableBody({ className, ...props }: TableBodyProps): import("react").JSX.Element;
+export type TableRowProps = ViewProps & {
+  className?: string;
+};
+export declare function TableRow({ className, ...props }: TableRowProps): import("react").JSX.Element;
+export type TableHeadProps = Omit<ViewProps, 'children'> & {
+  className?: string;
+  children?: ReactNode;
+};
+/** Célula de cabeçalho. RN não tem `aria-sort`: indique a ordenação no próprio conteúdo. */
+export declare function TableHead({ className, children, ...props }: TableHeadProps): import("react").JSX.Element;
+export type TableCellProps = Omit<ViewProps, 'children'> & {
+  className?: string;
+  children?: ReactNode;
+};
+export declare function TableCell({ className, children, ...props }: TableCellProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=table.d.ts.map

package/dist/components/table/table.js

@@ -0,0 +1,83 @@
+import { cn } from "../../utils/cn.js";
+import { ScrollView, Text, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/table/table.tsx
+/** Texto puro vira `Text` estilizado; qualquer outro nó é renderizado como veio. */
+function CellContent({ children, className }) {
+	return typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, {
+		className,
+		children
+	}) : children;
+}
+/**
+* Tabela de dados. Em telas estreitas a tabela rola na horizontal, sem estourar o layout.
+* Dê um `TableCaption` (ou `accessibilityLabel`) para nomear a tabela.
+*/
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollView, {
+		horizontal: true,
+		showsHorizontalScrollIndicator: false,
+		className: "w-full grow-0",
+		children: /* @__PURE__ */ jsx(View, {
+			role: "grid",
+			className: cn("min-w-full", className),
+			...props
+		})
+	});
+}
+/** Nome e descrição da tabela, lidos antes do conteúdo por leitores de tela. */
+function TableCaption({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: cn("pb-3", className),
+		...props,
+		children: /* @__PURE__ */ jsx(CellContent, {
+			className: "text-sm text-text-secondary",
+			children
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: cn("bg-bg-secondary", className),
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		className,
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: cn("flex-row border-b border-border-default", className),
+		...props
+	});
+}
+/** Célula de cabeçalho. RN não tem `aria-sort`: indique a ordenação no próprio conteúdo. */
+function TableHead({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		accessible: true,
+		accessibilityRole: "header",
+		className: cn("min-w-24 flex-1 px-4 py-3", className),
+		...props,
+		children: /* @__PURE__ */ jsx(CellContent, {
+			className: "text-xs font-medium text-text-secondary",
+			children
+		})
+	});
+}
+function TableCell({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		className: cn("min-w-24 flex-1 px-4 py-3", className),
+		...props,
+		children: /* @__PURE__ */ jsx(CellContent, {
+			className: "text-sm text-text-primary",
+			children
+		})
+	});
+}
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow };
+
+//# sourceMappingURL=table.js.map

package/dist/components/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../../../src/components/table/table.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport type { ReactNode } from 'react'\nimport { ScrollView, Text, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\n\n// RN não tem colunas automáticas: cada célula é `flex-1` com largura mínima, e a tabela rola na\n// horizontal quando as colunas não cabem. Ajuste a largura de uma coluna com `className`\n// (ex.: `w-40 flex-none`) em TODAS as células dela.\n\n/** Texto puro vira `Text` estilizado; qualquer outro nó é renderizado como veio. */\nfunction CellContent({ children, className }: { children: ReactNode; className: string }) {\n  return typeof children === 'string' || typeof children === 'number' ? (\n    <Text className={className}>{children}</Text>\n  ) : (\n    children\n  )\n}\n\nexport type TableProps = ViewProps & {\n  className?: string\n}\n\n/**\n * Tabela de dados. Em telas estreitas a tabela rola na horizontal, sem estourar o layout.\n * Dê um `TableCaption` (ou `accessibilityLabel`) para nomear a tabela.\n */\nexport function Table({ className, ...props }: TableProps) {\n  return (\n    <ScrollView horizontal showsHorizontalScrollIndicator={false} className=\"w-full grow-0\">\n      <View role=\"grid\" className={cn('min-w-full', className)} {...props} />\n    </ScrollView>\n  )\n}\n\nexport type TableCaptionProps = Omit<ViewProps, 'children'> & {\n  className?: string\n  children?: ReactNode\n}\n\n/** Nome e descrição da tabela, lidos antes do conteúdo por leitores de tela. */\nexport function TableCaption({ className, children, ...props }: TableCaptionProps) {\n  return (\n    <View className={cn('pb-3', className)} {...props}>\n      <CellContent className=\"text-sm text-text-secondary\">{children}</CellContent>\n    </View>\n  )\n}\n\nexport type TableHeaderProps = ViewProps & { className?: string }\n\nexport function TableHeader({ className, ...props }: TableHeaderProps) {\n  return <View className={cn('bg-bg-secondary', className)} {...props} />\n}\n\nexport type TableBodyProps = ViewProps & { className?: string }\n\nexport function TableBody({ className, ...props }: TableBodyProps) {\n  return <View className={className} {...props} />\n}\n\nexport type TableRowProps = ViewProps & { className?: string }\n\nexport function TableRow({ className, ...props }: TableRowProps) {\n  return <View className={cn('flex-row border-b border-border-default', className)} {...props} />\n}\n\nexport type TableHeadProps = Omit<ViewProps, 'children'> & {\n  className?: string\n  children?: ReactNode\n}\n\n/** Célula de cabeçalho. RN não tem `aria-sort`: indique a ordenação no próprio conteúdo. */\nexport function TableHead({ className, children, ...props }: TableHeadProps) {\n  return (\n    <View\n      accessible\n      accessibilityRole=\"header\"\n      className={cn('min-w-24 flex-1 px-4 py-3', className)}\n      {...props}\n    >\n      <CellContent className=\"text-xs font-medium text-text-secondary\">{children}</CellContent>\n    </View>\n  )\n}\n\nexport type TableCellProps = Omit<ViewProps, 'children'> & {\n  className?: string\n  children?: ReactNode\n}\n\nexport function TableCell({ className, children, ...props }: TableCellProps) {\n  return (\n    <View className={cn('min-w-24 flex-1 px-4 py-3', className)} {...props}>\n      <CellContent className=\"text-sm text-text-primary\">{children}</CellContent>\n    </View>\n  )\n}\n"],"mappings":";;;;;AAWA,SAAS,YAAY,EAAE,UAAU,aAAyD;CACxF,OAAO,OAAO,aAAa,YAAY,OAAO,aAAa,WACzD,oBAAC,MAAD;EAAiB;EAAY;CAAe,CAAA,IAE5C;AAEJ;;;;;AAUA,SAAgB,MAAM,EAAE,WAAW,GAAG,SAAqB;CACzD,OACE,oBAAC,YAAD;EAAY,YAAA;EAAW,gCAAgC;EAAO,WAAU;EACtE,UAAA,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAW,GAAG,cAAc,SAAS;GAAG,GAAI;EAAQ,CAAA;CAC5D,CAAA;AAEhB;;AAQA,SAAgB,aAAa,EAAE,WAAW,UAAU,GAAG,SAA4B;CACjF,OACE,oBAAC,MAAD;EAAM,WAAW,GAAG,QAAQ,SAAS;EAAG,GAAI;EAC1C,UAAA,oBAAC,aAAD;GAAa,WAAU;GAA+B;EAAsB,CAAA;CACxE,CAAA;AAEV;AAIA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OAAO,oBAAC,MAAD;EAAM,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxE;AAIA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;CACjE,OAAO,oBAAC,MAAD;EAAiB;EAAW,GAAI;CAAQ,CAAA;AACjD;AAIA,SAAgB,SAAS,EAAE,WAAW,GAAG,SAAwB;CAC/D,OAAO,oBAAC,MAAD;EAAM,WAAW,GAAG,2CAA2C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChG;;AAQA,SAAgB,UAAU,EAAE,WAAW,UAAU,GAAG,SAAyB;CAC3E,OACE,oBAAC,MAAD;EACE,YAAA;EACA,mBAAkB;EAClB,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;EAEJ,UAAA,oBAAC,aAAD;GAAa,WAAU;GAA2C;EAAsB,CAAA;CACpF,CAAA;AAEV;AAOA,SAAgB,UAAU,EAAE,WAAW,UAAU,GAAG,SAAyB;CAC3E,OACE,oBAAC,MAAD;EAAM,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;EAC/D,UAAA,oBAAC,aAAD;GAAa,WAAU;GAA6B;EAAsB,CAAA;CACtE,CAAA;AAEV"}

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

@@ -0,0 +1,2 @@
+import { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps } from "./tabs.js";
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { PressableProps, ScrollViewProps, ViewProps } from "react-native";
+//#region src/components/tabs/tabs.d.ts
+export type TabsProps = ViewProps & {
+  className?: string;
+  /** Aba ativa (controlado). */
+  value?: string;
+  /** Aba ativa inicial (não controlado). */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+/** Raiz das abas: controla qual `Tab` está ativa (`value`/`defaultValue`/`onValueChange`). */
+export declare function Tabs({ className, value, defaultValue, onValueChange, ...props }: TabsProps): import("react").JSX.Element;
+export type TabListProps = Omit<ScrollViewProps, 'horizontal' | 'style'> & {
+  className?: string;
+};
+/** Lista de gatilhos. Rola na horizontal quando as abas não cabem na tela. */
+export declare function TabList({ className, ...props }: TabListProps): import("react").JSX.Element;
+export type TabProps = Omit<PressableProps, 'children' | 'style'> & {
+  className?: string;
+  /** Valor que liga a aba ao `TabPanel` de mesmo `value`. */
+  value: string;
+  /** Ícone à esquerda do rótulo (ex.: um ícone SVG de 24px). */
+  icon?: ReactNode;
+  children?: ReactNode;
+};
+export declare function Tab({ className, value, icon, children, disabled, onPress, accessibilityState, ...props }: TabProps): import("react").JSX.Element;
+export type TabPanelProps = ViewProps & {
+  className?: string;
+  value: string;
+};
+/** Painel da aba: só é montado enquanto a aba de mesmo `value` está ativa (igual ao web). */
+export declare function TabPanel({ className, value, ...props }: TabPanelProps): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs/tabs.js

@@ -0,0 +1,82 @@
+import { cn } from "../../utils/cn.js";
+import { createContext, useContext, useMemo, useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tabs/tabs.tsx
+const TabsContext = createContext({
+	value: void 0,
+	setValue: () => {}
+});
+/** Raiz das abas: controla qual `Tab` está ativa (`value`/`defaultValue`/`onValueChange`). */
+function Tabs({ className, value, defaultValue, onValueChange, ...props }) {
+	const [internal, setInternal] = useState(defaultValue);
+	const current = value !== void 0 ? value : internal;
+	const context = useMemo(() => ({
+		value: current,
+		setValue: (next) => {
+			if (value === void 0) setInternal(next);
+			onValueChange?.(next);
+		}
+	}), [
+		current,
+		value,
+		onValueChange
+	]);
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(View, {
+			className,
+			...props
+		})
+	});
+}
+/** Lista de gatilhos. Rola na horizontal quando as abas não cabem na tela. */
+function TabList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollView, {
+		horizontal: true,
+		showsHorizontalScrollIndicator: false,
+		accessibilityRole: "tablist",
+		className: cn("grow-0", className),
+		contentContainerClassName: "items-start",
+		...props
+	});
+}
+function Tab({ className, value, icon, children, disabled, onPress, accessibilityState, ...props }) {
+	const { value: active, setValue } = useContext(TabsContext);
+	const selected = active === value;
+	return /* @__PURE__ */ jsxs(Pressable, {
+		accessibilityRole: "tab",
+		accessibilityState: {
+			...accessibilityState,
+			selected,
+			disabled: Boolean(disabled)
+		},
+		disabled,
+		onPress: (event) => {
+			setValue(value);
+			onPress?.(event);
+		},
+		className: cn("items-start gap-[6px] px-3 pt-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs(View, {
+			className: "flex-row items-center gap-1",
+			children: [icon, typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
+				className: cn("text-sm text-text-secondary", selected && "font-medium text-text-brand", disabled && "text-text-disabled"),
+				children
+			}) : children]
+		}), /* @__PURE__ */ jsx(View, { className: cn("h-0.5 self-stretch bg-transparent", selected && "bg-interactive-primary") })]
+	});
+}
+/** Painel da aba: só é montado enquanto a aba de mesmo `value` está ativa (igual ao web). */
+function TabPanel({ className, value, ...props }) {
+	const { value: active } = useContext(TabsContext);
+	if (active !== value) return null;
+	return /* @__PURE__ */ jsx(View, {
+		className,
+		...props
+	});
+}
+//#endregion
+export { Tab, TabList, TabPanel, Tabs };
+
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { createContext, type ReactNode, useContext, useMemo, useState } from 'react'\nimport {\n  Pressable,\n  type PressableProps,\n  ScrollView,\n  type ScrollViewProps,\n  Text,\n  View,\n  type ViewProps,\n} from 'react-native'\nimport { cn } from '../../utils/cn'\n\ntype TabsContextValue = { value: string | undefined; setValue: (value: string) => void }\n\nconst TabsContext = createContext<TabsContextValue>({ value: undefined, setValue: () => {} })\n\nexport type TabsProps = ViewProps & {\n  className?: string\n  /** Aba ativa (controlado). */\n  value?: string\n  /** Aba ativa inicial (não controlado). */\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\n/** Raiz das abas: controla qual `Tab` está ativa (`value`/`defaultValue`/`onValueChange`). */\nexport function Tabs({ className, value, defaultValue, onValueChange, ...props }: TabsProps) {\n  const [internal, setInternal] = useState(defaultValue)\n  const current = value !== undefined ? value : internal\n\n  const context = useMemo(\n    () => ({\n      value: current,\n      setValue: (next: string) => {\n        if (value === undefined) setInternal(next)\n        onValueChange?.(next)\n      },\n    }),\n    [current, value, onValueChange],\n  )\n\n  return (\n    <TabsContext.Provider value={context}>\n      <View className={className} {...props} />\n    </TabsContext.Provider>\n  )\n}\n\nexport type TabListProps = Omit<ScrollViewProps, 'horizontal' | 'style'> & {\n  className?: string\n}\n\n/** Lista de gatilhos. Rola na horizontal quando as abas não cabem na tela. */\nexport function TabList({ className, ...props }: TabListProps) {\n  return (\n    <ScrollView\n      horizontal\n      showsHorizontalScrollIndicator={false}\n      accessibilityRole=\"tablist\"\n      className={cn('grow-0', className)}\n      contentContainerClassName=\"items-start\"\n      {...props}\n    />\n  )\n}\n\nexport type TabProps = Omit<PressableProps, 'children' | 'style'> & {\n  className?: string\n  /** Valor que liga a aba ao `TabPanel` de mesmo `value`. */\n  value: string\n  /** Ícone à esquerda do rótulo (ex.: um ícone SVG de 24px). */\n  icon?: ReactNode\n  children?: ReactNode\n}\n\nexport function Tab({\n  className,\n  value,\n  icon,\n  children,\n  disabled,\n  onPress,\n  accessibilityState,\n  ...props\n}: TabProps) {\n  const { value: active, setValue } = useContext(TabsContext)\n  const selected = active === value\n\n  return (\n    <Pressable\n      accessibilityRole=\"tab\"\n      accessibilityState={{ ...accessibilityState, selected, disabled: Boolean(disabled) }}\n      disabled={disabled}\n      onPress={(event) => {\n        setValue(value)\n        onPress?.(event)\n      }}\n      className={cn('items-start gap-[6px] px-3 pt-2', className)}\n      {...props}\n    >\n      <View className=\"flex-row items-center gap-1\">\n        {icon}\n        {typeof children === 'string' ? (\n          <Text\n            className={cn(\n              'text-sm text-text-secondary',\n              selected && 'font-medium text-text-brand',\n              disabled && 'text-text-disabled',\n            )}\n          >\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </View>\n      <View\n        className={cn('h-0.5 self-stretch bg-transparent', selected && 'bg-interactive-primary')}\n      />\n    </Pressable>\n  )\n}\n\nexport type TabPanelProps = ViewProps & {\n  className?: string\n  value: string\n}\n\n/** Painel da aba: só é montado enquanto a aba de mesmo `value` está ativa (igual ao web). */\nexport function TabPanel({ className, value, ...props }: TabPanelProps) {\n  const { value: active } = useContext(TabsContext)\n  if (active !== value) return null\n  return <View className={className} {...props} />\n}\n"],"mappings":";;;;;AAgBA,MAAM,cAAc,cAAgC;CAAE,OAAO,KAAA;CAAW,gBAAgB,CAAC;AAAE,CAAC;;AAY5F,SAAgB,KAAK,EAAE,WAAW,OAAO,cAAc,eAAe,GAAG,SAAoB;CAC3F,MAAM,CAAC,UAAU,eAAe,SAAS,YAAY;CACrD,MAAM,UAAU,UAAU,KAAA,IAAY,QAAQ;CAE9C,MAAM,UAAU,eACP;EACL,OAAO;EACP,WAAW,SAAiB;GAC1B,IAAI,UAAU,KAAA,GAAW,YAAY,IAAI;GACzC,gBAAgB,IAAI;EACtB;CACF,IACA;EAAC;EAAS;EAAO;CAAa,CAChC;CAEA,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;EAC3B,UAAA,oBAAC,MAAD;GAAiB;GAAW,GAAI;EAAQ,CAAA;CACpB,CAAA;AAE1B;;AAOA,SAAgB,QAAQ,EAAE,WAAW,GAAG,SAAuB;CAC7D,OACE,oBAAC,YAAD;EACE,YAAA;EACA,gCAAgC;EAChC,mBAAkB;EAClB,WAAW,GAAG,UAAU,SAAS;EACjC,2BAA0B;EAC1B,GAAI;CACL,CAAA;AAEL;AAWA,SAAgB,IAAI,EAClB,WACA,OACA,MACA,UACA,UACA,SACA,oBACA,GAAG,SACQ;CACX,MAAM,EAAE,OAAO,QAAQ,aAAa,WAAW,WAAW;CAC1D,MAAM,WAAW,WAAW;CAE5B,OACE,qBAAC,WAAD;EACE,mBAAkB;EAClB,oBAAoB;GAAE,GAAG;GAAoB;GAAU,UAAU,QAAQ,QAAQ;EAAE;EACzE;EACV,UAAU,UAAU;GAClB,SAAS,KAAK;GACd,UAAU,KAAK;EACjB;EACA,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;EATN,UAAA,CAWE,qBAAC,MAAD;GAAM,WAAU;GAAhB,UAAA,CACG,MACA,OAAO,aAAa,WACnB,oBAAC,MAAD;IACE,WAAW,GACT,+BACA,YAAY,+BACZ,YAAY,oBACd;IAEC;GACG,CAAA,IAEN,QAEE;EACN,CAAA,GAAA,oBAAC,MAAD,EACE,WAAW,GAAG,qCAAqC,YAAY,wBAAwB,EACxF,CAAA,CACQ;;AAEf;;AAQA,SAAgB,SAAS,EAAE,WAAW,OAAO,GAAG,SAAwB;CACtE,MAAM,EAAE,OAAO,WAAW,WAAW,WAAW;CAChD,IAAI,WAAW,OAAO,OAAO;CAC7B,OAAO,oBAAC,MAAD;EAAiB;EAAW,GAAI;CAAQ,CAAA;AACjD"}

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

@@ -0,0 +1,2 @@
+import { Tag, TagProps } from "./tag.js";
+export { Tag, type TagProps };

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,18 @@
+import { ViewProps } from "react-native";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/tag/tag.d.ts
+declare const tagVariants: (props?: ({
+  variant?: "filled" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TagProps = Omit<ViewProps, 'children'> & VariantProps<typeof tagVariants> & {
+  className?: string;
+  children: string;
+  /** Mostra o botão de remoção (×) e o chama ao tocar. Sem ele, a Tag não é removível. */
+  onDismiss?: () => void;
+  /** Nome acessível do botão de remoção. */
+  dismissLabel?: string;
+};
+/** Rótulo de categoria ou filtro, opcionalmente removível. Para status, use Badge. */
+export declare function Tag({ className, variant, onDismiss, dismissLabel, children, ...props }: TagProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=tag.d.ts.map

package/dist/components/tag/tag.js

@@ -0,0 +1,37 @@
+import { cn } from "../../utils/cn.js";
+import { CloseIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { Pressable, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/tag/tag.tsx
+const tagVariants = cva("flex-row items-center gap-1 self-start rounded-sm px-2 py-0.5", {
+	variants: { variant: {
+		filled: "bg-bg-secondary",
+		outline: "border border-border-default"
+	} },
+	defaultVariants: { variant: "filled" }
+});
+/** Rótulo de categoria ou filtro, opcionalmente removível. Para status, use Badge. */
+function Tag({ className, variant, onDismiss, dismissLabel = "Remover", children, ...props }) {
+	const iconColor = useToken("--color-text-secondary");
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn(tagVariants({ variant }), className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Text, {
+			className: "text-xs font-medium leading-4 text-text-primary",
+			children
+		}), onDismiss && /* @__PURE__ */ jsx(Pressable, {
+			accessibilityRole: "button",
+			accessibilityLabel: dismissLabel,
+			onPress: onDismiss,
+			hitSlop: 8,
+			className: "size-4 shrink-0 items-center justify-center rounded-sm",
+			children: /* @__PURE__ */ jsx(CloseIcon, { color: iconColor })
+		})]
+	});
+}
+//#endregion
+export { Tag };
+
+//# sourceMappingURL=tag.js.map

package/dist/components/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","names":[],"sources":["../../../src/components/tag/tag.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Pressable, Text, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { CloseIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\n\nconst tagVariants = cva('flex-row items-center gap-1 self-start rounded-sm px-2 py-0.5', {\n  variants: {\n    variant: {\n      filled: 'bg-bg-secondary',\n      outline: 'border border-border-default',\n    },\n  },\n  defaultVariants: { variant: 'filled' },\n})\n\nexport type TagProps = Omit<ViewProps, 'children'> &\n  VariantProps<typeof tagVariants> & {\n    className?: string\n    children: string\n    /** Mostra o botão de remoção (×) e o chama ao tocar. Sem ele, a Tag não é removível. */\n    onDismiss?: () => void\n    /** Nome acessível do botão de remoção. */\n    dismissLabel?: string\n  }\n\n/** Rótulo de categoria ou filtro, opcionalmente removível. Para status, use Badge. */\nexport function Tag({\n  className,\n  variant,\n  onDismiss,\n  dismissLabel = 'Remover',\n  children,\n  ...props\n}: TagProps) {\n  const iconColor = useToken('--color-text-secondary')\n\n  return (\n    <View className={cn(tagVariants({ variant }), className)} {...props}>\n      <Text className=\"text-xs font-medium leading-4 text-text-primary\">{children}</Text>\n      {onDismiss && (\n        <Pressable\n          accessibilityRole=\"button\"\n          accessibilityLabel={dismissLabel}\n          onPress={onDismiss}\n          hitSlop={8}\n          className=\"size-4 shrink-0 items-center justify-center rounded-sm\"\n        >\n          <CloseIcon color={iconColor} />\n        </Pressable>\n      )}\n    </View>\n  )\n}\n"],"mappings":";;;;;;;AAQA,MAAM,cAAc,IAAI,iEAAiE;CACvF,UAAU,EACR,SAAS;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,SAAS;AACvC,CAAC;;AAaD,SAAgB,IAAI,EAClB,WACA,SACA,WACA,eAAe,WACf,UACA,GAAG,SACQ;CACX,MAAM,YAAY,SAAS,wBAAwB;CAEnD,OACE,qBAAC,MAAD;EAAM,WAAW,GAAG,YAAY,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;EAA9D,UAAA,CACE,oBAAC,MAAD;GAAM,WAAU;GAAmD;EAAe,CAAA,GACjF,aACC,oBAAC,WAAD;GACE,mBAAkB;GAClB,oBAAoB;GACpB,SAAS;GACT,SAAS;GACT,WAAU;GAEV,UAAA,oBAAC,WAAD,EAAW,OAAO,UAAY,CAAA;EACrB,CAAA,CAET;;AAEV"}

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

@@ -0,0 +1,2 @@
+import { Textarea, TextareaProps } from "./textarea.js";
+export { Textarea, type TextareaProps };

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,16 @@
+import { TextInputProps } from "react-native";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/textarea/textarea.d.ts
+declare const textareaVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+  error?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TextareaProps = Omit<TextInputProps, 'style' | 'editable' | 'multiline'> & Omit<VariantProps<typeof textareaVariants>, 'error'> & {
+  className?: string;
+  /** Borda e foco em vermelho. */
+  error?: boolean;
+  disabled?: boolean;
+};
+export declare function Textarea({ className, size, error, disabled, readOnly, accessibilityState, ...props }: TextareaProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=textarea.d.ts.map