@innovui/react-native 0.0.0-stage → 0.1.0

package/dist/components/textarea/textarea.js

@@ -0,0 +1,46 @@
+import { cn } from "../../utils/cn.js";
+import { useToken } from "../_shared/use-token.js";
+import { TextInput } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/textarea/textarea.tsx
+const textareaVariants = cva("min-h-30 w-full rounded-md border border-field-border bg-field-bg text-field-text focus:border-field-focus-ring", {
+	variants: {
+		size: {
+			lg: "p-4 text-base",
+			md: "p-3 text-base",
+			sm: "p-2 text-sm"
+		},
+		error: {
+			true: "border-field-border-error focus:border-field-border-error",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		error: false
+	}
+});
+function Textarea({ className, size, error = false, disabled = false, readOnly = false, accessibilityState, ...props }) {
+	const placeholderColor = useToken("--color-field-text-placeholder");
+	return /* @__PURE__ */ jsx(TextInput, {
+		multiline: true,
+		textAlignVertical: "top",
+		editable: !disabled && !readOnly,
+		readOnly,
+		placeholderTextColor: placeholderColor,
+		accessibilityState: {
+			...accessibilityState,
+			disabled
+		},
+		className: cn(textareaVariants({
+			size,
+			error
+		}), disabled && "border-field-border-disabled bg-field-bg-disabled text-field-text-disabled focus:border-field-border-disabled", readOnly && !disabled && "border-transparent bg-field-bg-disabled focus:border-transparent", className),
+		...props
+	});
+}
+//#endregion
+export { Textarea };
+
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { TextInput, type TextInputProps } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { useToken } from '../_shared/use-token'\n\nconst textareaVariants = cva(\n  'min-h-30 w-full rounded-md border border-field-border bg-field-bg text-field-text focus:border-field-focus-ring',\n  {\n    variants: {\n      size: {\n        lg: 'p-4 text-base',\n        md: 'p-3 text-base',\n        sm: 'p-2 text-sm',\n      },\n      error: {\n        true: 'border-field-border-error focus:border-field-border-error',\n        false: '',\n      },\n    },\n    defaultVariants: { size: 'md', error: false },\n  },\n)\n\nexport type TextareaProps = Omit<TextInputProps, 'style' | 'editable' | 'multiline'> &\n  Omit<VariantProps<typeof textareaVariants>, 'error'> & {\n    className?: string\n    /** Borda e foco em vermelho. */\n    error?: boolean\n    disabled?: boolean\n  }\n\nexport function Textarea({\n  className,\n  size,\n  error = false,\n  disabled = false,\n  readOnly = false,\n  accessibilityState,\n  ...props\n}: TextareaProps) {\n  const placeholderColor = useToken('--color-field-text-placeholder')\n\n  return (\n    <TextInput\n      multiline\n      textAlignVertical=\"top\"\n      editable={!disabled && !readOnly}\n      readOnly={readOnly}\n      placeholderTextColor={placeholderColor}\n      accessibilityState={{ ...accessibilityState, disabled }}\n      className={cn(\n        textareaVariants({ size, error }),\n        disabled &&\n          'border-field-border-disabled bg-field-bg-disabled text-field-text-disabled focus:border-field-border-disabled',\n        readOnly && !disabled && 'border-transparent bg-field-bg-disabled focus:border-transparent',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;;AAOA,MAAM,mBAAmB,IACvB,mHACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO;CAAM;AAC9C,CACF;AAUA,SAAgB,SAAS,EACvB,WACA,MACA,QAAQ,OACR,WAAW,OACX,WAAW,OACX,oBACA,GAAG,SACa;CAChB,MAAM,mBAAmB,SAAS,gCAAgC;CAElE,OACE,oBAAC,WAAD;EACE,WAAA;EACA,mBAAkB;EAClB,UAAU,CAAC,YAAY,CAAC;EACd;EACV,sBAAsB;EACtB,oBAAoB;GAAE,GAAG;GAAoB;EAAS;EACtD,WAAW,GACT,iBAAiB;GAAE;GAAM;EAAM,CAAC,GAChC,YACE,iHACF,YAAY,CAAC,YAAY,oEACzB,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,2 @@
+import { ToastOptions, ToastProvider, ToastProviderProps, useToast } from "./toast.js";
+export { type ToastOptions, ToastProvider, type ToastProviderProps, useToast };

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,41 @@
+import { Status } from "../_shared/status.js";
+import { ReactNode } from "react";
+//#region src/components/toast/toast.d.ts
+export type ToastOptions = {
+  status?: Status;
+  /** Resumo (opcional). */
+  title?: string;
+  description: string;
+  /** Ação contextual (ex.: "Desfazer"). Tocar nela também fecha o toast. */
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  /** Tempo até fechar sozinho, em ms. `0` não fecha sozinho. Padrão: 5000. */
+  duration?: number;
+  /** Mostra o ícone do status. Padrão: `true`. */
+  showIcon?: boolean;
+  /** Mostra o botão de fechar (×). Sem ele, o toast ainda fecha pelo `duration`. Padrão: `true`. */
+  dismissible?: boolean;
+};
+type ToastContextValue = {
+  /** Exibe um toast e devolve o id, para fechá-lo com `dismiss`. */
+  toast: (options: ToastOptions) => number;
+  dismiss: (id: number) => void;
+};
+export type ToastProviderProps = {
+  children: ReactNode;
+  /** Nome acessível da região de notificações. */
+  label?: string;
+  /** Nome acessível do botão de fechar de cada toast. */
+  dismissLabel?: string;
+  testID?: string;
+};
+/**
+ * Envolva o app uma vez; qualquer componente abaixo dispara toasts com `useToast()`. A pilha fica
+ * no topo da tela, acima do conteúdo do app, mas abaixo de Modal/Drawer (que são janelas nativas).
+ */
+export declare function ToastProvider({ children, label, dismissLabel, testID }: ToastProviderProps): import("react").JSX.Element;
+export declare function useToast(): ToastContextValue;
+//#endregion
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/toast/toast.js

@@ -0,0 +1,167 @@
+import { CloseIcon, StatusIcon, statusRole, statusText, statusTextToken } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { Button } from "../button/button.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Platform, Pressable, StatusBar, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/toast/toast.tsx
+const ToastContext = createContext(null);
+const topInset = Platform.OS === "ios" ? 56 : (StatusBar.currentHeight ?? 24) + 8;
+/**
+* Envolva o app uma vez; qualquer componente abaixo dispara toasts com `useToast()`. A pilha fica
+* no topo da tela, acima do conteúdo do app, mas abaixo de Modal/Drawer (que são janelas nativas).
+*/
+function ToastProvider({ children, label = "Notificações", dismissLabel = "Fechar", testID }) {
+	const [items, setItems] = useState([]);
+	const nextId = useRef(0);
+	const dismiss = useCallback((id) => {
+		setItems((current) => current.map((item) => item.id === id ? {
+			...item,
+			closing: true
+		} : item));
+	}, []);
+	const remove = useCallback((id) => {
+		setItems((current) => current.filter((item) => item.id !== id));
+	}, []);
+	const toast = useCallback((options) => {
+		const id = nextId.current++;
+		setItems((current) => [...current, {
+			...options,
+			id,
+			closing: false
+		}]);
+		return id;
+	}, []);
+	const value = useMemo(() => ({
+		toast,
+		dismiss
+	}), [toast, dismiss]);
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
+		value,
+		children: [children, /* @__PURE__ */ jsx(View, {
+			pointerEvents: "box-none",
+			accessibilityLabel: label,
+			testID,
+			style: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				right: 0,
+				zIndex: 9999,
+				elevation: 9999
+			},
+			children: /* @__PURE__ */ jsx(View, {
+				pointerEvents: "box-none",
+				className: "w-full max-w-[360px] gap-2 self-center px-4",
+				style: { paddingTop: topInset },
+				children: items.map((item) => /* @__PURE__ */ jsx(ToastView, {
+					item,
+					dismissLabel,
+					onDismiss: dismiss,
+					onRemove: remove
+				}, item.id))
+			})
+		})]
+	});
+}
+function ToastView({ item, dismissLabel, onDismiss, onRemove }) {
+	const { id, status = "info", title, description, action, duration = 5e3, showIcon = true, dismissible = true, closing } = item;
+	const progress = useRef(new Animated.Value(0)).current;
+	const iconColor = useToken(statusTextToken[status]);
+	const closeColor = useToken("--color-text-primary");
+	useEffect(() => {
+		if (closing) return;
+		const animation = Animated.timing(progress, {
+			toValue: 1,
+			duration: 200,
+			useNativeDriver: true
+		});
+		animation.start();
+		return () => animation.stop();
+	}, [closing, progress]);
+	useEffect(() => {
+		if (!closing) return;
+		const animation = Animated.timing(progress, {
+			toValue: 0,
+			duration: 150,
+			useNativeDriver: true
+		});
+		animation.start(({ finished }) => finished && onRemove(id));
+		return () => animation.stop();
+	}, [
+		closing,
+		id,
+		onRemove,
+		progress
+	]);
+	useEffect(() => {
+		if (closing || duration <= 0) return;
+		const timer = setTimeout(() => onDismiss(id), duration);
+		return () => clearTimeout(timer);
+	}, [
+		closing,
+		duration,
+		id,
+		onDismiss
+	]);
+	const translateY = progress.interpolate({
+		inputRange: [0, 1],
+		outputRange: [-16, 0]
+	});
+	return /* @__PURE__ */ jsx(Animated.View, {
+		style: {
+			opacity: progress,
+			transform: [{ translateY }]
+		},
+		children: /* @__PURE__ */ jsxs(View, {
+			accessibilityRole: statusRole(status),
+			accessibilityLiveRegion: statusRole(status) ? "assertive" : "polite",
+			className: "flex-row items-start gap-3 rounded-md border border-border-default bg-surface-elevated py-3 pr-3 pl-4 shadow-md",
+			style: { elevation: 6 },
+			children: [
+				showIcon && /* @__PURE__ */ jsx(StatusIcon, {
+					status,
+					color: iconColor
+				}),
+				/* @__PURE__ */ jsxs(View, {
+					className: "min-w-0 flex-1 items-start gap-1",
+					children: [
+						title ? /* @__PURE__ */ jsx(Text, {
+							className: `text-sm font-medium leading-5 ${statusText[status]}`,
+							children: title
+						}) : null,
+						/* @__PURE__ */ jsx(Text, {
+							className: "text-sm leading-5 text-text-primary",
+							children: description
+						}),
+						action && /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							onPress: () => {
+								action.onClick();
+								onDismiss(id);
+							},
+							children: action.label
+						})
+					]
+				}),
+				dismissible && /* @__PURE__ */ jsx(Pressable, {
+					accessibilityRole: "button",
+					accessibilityLabel: dismissLabel,
+					hitSlop: 8,
+					onPress: () => onDismiss(id),
+					className: "size-8 items-center justify-center rounded-full active:bg-button-secondary-bg-hover",
+					children: /* @__PURE__ */ jsx(CloseIcon, { color: closeColor })
+				})
+			]
+		})
+	});
+}
+function useToast() {
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("useToast precisa estar dentro de <ToastProvider>.");
+	return context;
+}
+//#endregion
+export { ToastProvider, useToast };
+
+//# sourceMappingURL=toast.js.map

package/dist/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","names":[],"sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { Animated, Platform, Pressable, StatusBar, Text, View } from 'react-native'\nimport {\n  CloseIcon,\n  type Status,\n  StatusIcon,\n  statusRole,\n  statusText,\n  statusTextToken,\n} from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\nimport { Button } from '../button/button'\n\nexport type ToastOptions = {\n  status?: Status\n  /** Resumo (opcional). */\n  title?: string\n  description: string\n  /** Ação contextual (ex.: \"Desfazer\"). Tocar nela também fecha o toast. */\n  action?: { label: string; onClick: () => void }\n  /** Tempo até fechar sozinho, em ms. `0` não fecha sozinho. Padrão: 5000. */\n  duration?: number\n  /** Mostra o ícone do status. Padrão: `true`. */\n  showIcon?: boolean\n  /** Mostra o botão de fechar (×). Sem ele, o toast ainda fecha pelo `duration`. Padrão: `true`. */\n  dismissible?: boolean\n}\n\ntype ToastItem = ToastOptions & { id: number; closing: boolean }\n\ntype ToastContextValue = {\n  /** Exibe um toast e devolve o id, para fechá-lo com `dismiss`. */\n  toast: (options: ToastOptions) => number\n  dismiss: (id: number) => void\n}\n\nconst ToastContext = createContext<ToastContextValue | null>(null)\n\nexport type ToastProviderProps = {\n  children: ReactNode\n  /** Nome acessível da região de notificações. */\n  label?: string\n  /** Nome acessível do botão de fechar de cada toast. */\n  dismissLabel?: string\n  testID?: string\n}\n\n// Sem react-native-safe-area-context: margem fixa para o notch no iOS e a barra de status no Android.\nconst topInset = Platform.OS === 'ios' ? 56 : (StatusBar.currentHeight ?? 24) + 8\n\n/**\n * Envolva o app uma vez; qualquer componente abaixo dispara toasts com `useToast()`. A pilha fica\n * no topo da tela, acima do conteúdo do app, mas abaixo de Modal/Drawer (que são janelas nativas).\n */\nexport function ToastProvider({\n  children,\n  label = 'Notificações',\n  dismissLabel = 'Fechar',\n  testID,\n}: ToastProviderProps) {\n  const [items, setItems] = useState<ToastItem[]>([])\n  const nextId = useRef(0)\n\n  // Marca como \"closing\"; o próprio toast anima a saída e então chama `remove`.\n  const dismiss = useCallback((id: number) => {\n    setItems((current) =>\n      current.map((item) => (item.id === id ? { ...item, closing: true } : item)),\n    )\n  }, [])\n  const remove = useCallback((id: number) => {\n    setItems((current) => current.filter((item) => item.id !== id))\n  }, [])\n  const toast = useCallback((options: ToastOptions) => {\n    const id = nextId.current++\n    setItems((current) => [...current, { ...options, id, closing: false }])\n    return id\n  }, [])\n  const value = useMemo(() => ({ toast, dismiss }), [toast, dismiss])\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      <View\n        pointerEvents=\"box-none\"\n        accessibilityLabel={label}\n        testID={testID}\n        style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 9999, elevation: 9999 }}\n      >\n        <View\n          pointerEvents=\"box-none\"\n          className=\"w-full max-w-[360px] gap-2 self-center px-4\"\n          style={{ paddingTop: topInset }}\n        >\n          {items.map((item) => (\n            <ToastView\n              key={item.id}\n              item={item}\n              dismissLabel={dismissLabel}\n              onDismiss={dismiss}\n              onRemove={remove}\n            />\n          ))}\n        </View>\n      </View>\n    </ToastContext.Provider>\n  )\n}\n\nfunction ToastView({\n  item,\n  dismissLabel,\n  onDismiss,\n  onRemove,\n}: {\n  item: ToastItem\n  dismissLabel: string\n  onDismiss: (id: number) => void\n  onRemove: (id: number) => void\n}) {\n  const {\n    id,\n    status = 'info',\n    title,\n    description,\n    action,\n    duration = 5000,\n    showIcon = true,\n    dismissible = true,\n    closing,\n  } = item\n  const progress = useRef(new Animated.Value(0)).current\n  const iconColor = useToken(statusTextToken[status])\n  const closeColor = useToken('--color-text-primary')\n\n  useEffect(() => {\n    if (closing) return\n    const animation = Animated.timing(progress, {\n      toValue: 1,\n      duration: 200,\n      useNativeDriver: true,\n    })\n    animation.start()\n    return () => animation.stop()\n  }, [closing, progress])\n\n  useEffect(() => {\n    if (!closing) return\n    const animation = Animated.timing(progress, {\n      toValue: 0,\n      duration: 150,\n      useNativeDriver: true,\n    })\n    animation.start(({ finished }) => finished && onRemove(id))\n    return () => animation.stop()\n  }, [closing, id, onRemove, progress])\n\n  useEffect(() => {\n    if (closing || duration <= 0) return\n    const timer = setTimeout(() => onDismiss(id), duration)\n    return () => clearTimeout(timer)\n  }, [closing, duration, id, onDismiss])\n\n  const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [-16, 0] })\n\n  return (\n    <Animated.View style={{ opacity: progress, transform: [{ translateY }] }}>\n      <View\n        accessibilityRole={statusRole(status)}\n        // Erro e aviso interrompem o leitor de tela; o resto é anunciado com calma.\n        accessibilityLiveRegion={statusRole(status) ? 'assertive' : 'polite'}\n        className=\"flex-row items-start gap-3 rounded-md border border-border-default bg-surface-elevated py-3 pr-3 pl-4 shadow-md\"\n        style={{ elevation: 6 }}\n      >\n        {showIcon && <StatusIcon status={status} color={iconColor} />}\n        <View className=\"min-w-0 flex-1 items-start gap-1\">\n          {title ? (\n            <Text className={`text-sm font-medium leading-5 ${statusText[status]}`}>{title}</Text>\n          ) : null}\n          <Text className=\"text-sm leading-5 text-text-primary\">{description}</Text>\n          {action && (\n            <Button\n              variant=\"ghost\"\n              onPress={() => {\n                action.onClick()\n                onDismiss(id)\n              }}\n            >\n              {action.label}\n            </Button>\n          )}\n        </View>\n        {dismissible && (\n          <Pressable\n            accessibilityRole=\"button\"\n            accessibilityLabel={dismissLabel}\n            hitSlop={8}\n            onPress={() => onDismiss(id)}\n            className=\"size-8 items-center justify-center rounded-full active:bg-button-secondary-bg-hover\"\n          >\n            <CloseIcon color={closeColor} />\n          </Pressable>\n        )}\n      </View>\n    </Animated.View>\n  )\n}\n\nexport function useToast(): ToastContextValue {\n  const context = useContext(ToastContext)\n  if (!context) throw new Error('useToast precisa estar dentro de <ToastProvider>.')\n  return context\n}\n"],"mappings":";;;;;;;AA+CA,MAAM,eAAe,cAAwC,IAAI;AAYjE,MAAM,WAAW,SAAS,OAAO,QAAQ,MAAM,UAAU,iBAAiB,MAAM;;;;;AAMhF,SAAgB,cAAc,EAC5B,UACA,QAAQ,gBACR,eAAe,UACf,UACqB;CACrB,MAAM,CAAC,OAAO,YAAY,SAAsB,CAAC,CAAC;CAClD,MAAM,SAAS,OAAO,CAAC;CAGvB,MAAM,UAAU,aAAa,OAAe;EAC1C,UAAU,YACR,QAAQ,KAAK,SAAU,KAAK,OAAO,KAAK;GAAE,GAAG;GAAM,SAAS;EAAK,IAAI,IAAK,CAC5E;CACF,GAAG,CAAC,CAAC;CACL,MAAM,SAAS,aAAa,OAAe;EACzC,UAAU,YAAY,QAAQ,QAAQ,SAAS,KAAK,OAAO,EAAE,CAAC;CAChE,GAAG,CAAC,CAAC;CACL,MAAM,QAAQ,aAAa,YAA0B;EACnD,MAAM,KAAK,OAAO;EAClB,UAAU,YAAY,CAAC,GAAG,SAAS;GAAE,GAAG;GAAS;GAAI,SAAS;EAAM,CAAC,CAAC;EACtE,OAAO;CACT,GAAG,CAAC,CAAC;CACL,MAAM,QAAQ,eAAe;EAAE;EAAO;CAAQ,IAAI,CAAC,OAAO,OAAO,CAAC;CAElE,OACE,qBAAC,aAAa,UAAd;EAA8B;EAA9B,UAAA,CACG,UACD,oBAAC,MAAD;GACE,eAAc;GACd,oBAAoB;GACZ;GACR,OAAO;IAAE,UAAU;IAAY,KAAK;IAAG,MAAM;IAAG,OAAO;IAAG,QAAQ;IAAM,WAAW;GAAK;GAExF,UAAA,oBAAC,MAAD;IACE,eAAc;IACd,WAAU;IACV,OAAO,EAAE,YAAY,SAAS;IAE7B,UAAA,MAAM,KAAK,SACV,oBAAC,WAAD;KAEQ;KACQ;KACd,WAAW;KACX,UAAU;IACX,GALM,KAAK,EAKX,CACF;GACG,CAAA;EACF,CAAA,CACe;;AAE3B;AAEA,SAAS,UAAU,EACjB,MACA,cACA,WACA,YAMC;CACD,MAAM,EACJ,IACA,SAAS,QACT,OACA,aACA,QACA,WAAW,KACX,WAAW,MACX,cAAc,MACd,YACE;CACJ,MAAM,WAAW,OAAO,IAAI,SAAS,MAAM,CAAC,CAAC,CAAC,CAAC;CAC/C,MAAM,YAAY,SAAS,gBAAgB,OAAO;CAClD,MAAM,aAAa,SAAS,sBAAsB;CAElD,gBAAgB;EACd,IAAI,SAAS;EACb,MAAM,YAAY,SAAS,OAAO,UAAU;GAC1C,SAAS;GACT,UAAU;GACV,iBAAiB;EACnB,CAAC;EACD,UAAU,MAAM;EAChB,aAAa,UAAU,KAAK;CAC9B,GAAG,CAAC,SAAS,QAAQ,CAAC;CAEtB,gBAAgB;EACd,IAAI,CAAC,SAAS;EACd,MAAM,YAAY,SAAS,OAAO,UAAU;GAC1C,SAAS;GACT,UAAU;GACV,iBAAiB;EACnB,CAAC;EACD,UAAU,OAAO,EAAE,eAAe,YAAY,SAAS,EAAE,CAAC;EAC1D,aAAa,UAAU,KAAK;CAC9B,GAAG;EAAC;EAAS;EAAI;EAAU;CAAQ,CAAC;CAEpC,gBAAgB;EACd,IAAI,WAAW,YAAY,GAAG;EAC9B,MAAM,QAAQ,iBAAiB,UAAU,EAAE,GAAG,QAAQ;EACtD,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAS;EAAU;EAAI;CAAS,CAAC;CAErC,MAAM,aAAa,SAAS,YAAY;EAAE,YAAY,CAAC,GAAG,CAAC;EAAG,aAAa,CAAC,KAAK,CAAC;CAAE,CAAC;CAErF,OACE,oBAAC,SAAS,MAAV;EAAe,OAAO;GAAE,SAAS;GAAU,WAAW,CAAC,EAAE,WAAW,CAAC;EAAE;EACrE,UAAA,qBAAC,MAAD;GACE,mBAAmB,WAAW,MAAM;GAEpC,yBAAyB,WAAW,MAAM,IAAI,cAAc;GAC5D,WAAU;GACV,OAAO,EAAE,WAAW,EAAE;GALxB,UAAA;IAOG,YAAY,oBAAC,YAAD;KAAoB;KAAQ,OAAO;IAAY,CAAA;IAC5D,qBAAC,MAAD;KAAM,WAAU;KAAhB,UAAA;MACG,QACC,oBAAC,MAAD;OAAM,WAAW,iCAAiC,WAAW;OAAY,UAAA;MAAY,CAAA,IACnF;MACJ,oBAAC,MAAD;OAAM,WAAU;OAAuC,UAAA;MAAkB,CAAA;MACxE,UACC,oBAAC,QAAD;OACE,SAAQ;OACR,eAAe;QACb,OAAO,QAAQ;QACf,UAAU,EAAE;OACd;OAEC,UAAA,OAAO;MACF,CAAA;KAEN;;IACL,eACC,oBAAC,WAAD;KACE,mBAAkB;KAClB,oBAAoB;KACpB,SAAS;KACT,eAAe,UAAU,EAAE;KAC3B,WAAU;KAEV,UAAA,oBAAC,WAAD,EAAW,OAAO,WAAa,CAAA;IACtB,CAAA;GAET;;CACO,CAAA;AAEnB;AAEA,SAAgB,WAA8B;CAC5C,MAAM,UAAU,WAAW,YAAY;CACvC,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,mDAAmD;CACjF,OAAO;AACT"}

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

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipProps } from "./tooltip.js";
+export { Tooltip, type TooltipProps };

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement, ReactNode } from "react";
+//#region src/components/tooltip/tooltip.d.ts
+export type TooltipProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** O elemento que dispara o tooltip (ex.: um `<Button>`); recebe `onLongPress`. */
+  children: ReactElement;
+  /** O texto principal. */
+  content: ReactNode;
+  /** Título em destaque acima do texto (opcional). */
+  title?: ReactNode;
+  /** Lado do gatilho em que o tooltip aparece; inverte se não couber. Padrão: `top`. */
+  side?: 'top' | 'bottom';
+  /** Fecha sozinho depois deste tempo, em ms. `0` mantém aberto até tocar fora. Padrão: 3000. */
+  duration?: number;
+  className?: string;
+  testID?: string;
+};
+/**
+ * Dica contextual. No toque não há hover: abre ao pressionar e segurar o gatilho (`onLongPress`),
+ * e fecha após `duration` ou ao tocar fora. Como o long press não é óbvio para leitores de tela,
+ * o `content` (se for texto) vira o `accessibilityHint` do gatilho. Diferenças do web: sem
+ * `delayDuration`, sem seta (`showArrow`) e sem lados `left`/`right`.
+ */
+export declare function Tooltip({ open, defaultOpen, onOpenChange, children, content, title, side, duration, className, testID }: TooltipProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,62 @@
+import { cn } from "../../utils/cn.js";
+import { AnchoredOverlay } from "../_shared/anchored-overlay.js";
+import { useOpenState } from "../_shared/overlay-state.js";
+import { AnchorTrigger, useControlledAnchor } from "../_shared/overlay-anchor.js";
+import { useEffect } from "react";
+import { Text, View } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tooltip/tooltip.tsx
+/**
+* Dica contextual. No toque não há hover: abre ao pressionar e segurar o gatilho (`onLongPress`),
+* e fecha após `duration` ou ao tocar fora. Como o long press não é óbvio para leitores de tela,
+* o `content` (se for texto) vira o `accessibilityHint` do gatilho. Diferenças do web: sem
+* `delayDuration`, sem seta (`showArrow`) e sem lados `left`/`right`.
+*/
+function Tooltip({ open, defaultOpen, onOpenChange, children, content, title, side = "top", duration = 3e3, className, testID }) {
+	const [isOpen, setOpen] = useOpenState({
+		open,
+		defaultOpen,
+		onOpenChange
+	});
+	const { ref, rect } = useControlledAnchor(isOpen);
+	const close = () => setOpen(false);
+	useEffect(() => {
+		if (!isOpen || duration <= 0) return;
+		const timer = setTimeout(() => setOpen(false), duration);
+		return () => clearTimeout(timer);
+	}, [
+		isOpen,
+		duration,
+		setOpen
+	]);
+	const hint = typeof content === "string" ? content : void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AnchorTrigger, {
+		anchorRef: ref,
+		event: "onLongPress",
+		onTrigger: () => setOpen(true),
+		extra: hint ? { accessibilityHint: hint } : void 0,
+		children
+	}), /* @__PURE__ */ jsx(AnchoredOverlay, {
+		visible: isOpen,
+		rect,
+		onRequestClose: close,
+		placement: side,
+		estimatedHeight: 80,
+		testID,
+		className: cn("max-w-[240px] gap-1 rounded-sm bg-bg-inverse px-3 py-2", className),
+		children: /* @__PURE__ */ jsxs(View, {
+			accessibilityRole: "text",
+			children: [title && /* @__PURE__ */ jsx(Text, {
+				className: "text-[13px] font-medium leading-4 text-text-inverse",
+				children: title
+			}), /* @__PURE__ */ jsx(Text, {
+				className: "text-xs leading-4 text-text-inverse-secondary",
+				children: content
+			})]
+		})
+	})] });
+}
+//#endregion
+export { Tooltip };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { type ReactElement, type ReactNode, useEffect } from 'react'\nimport { Text, View } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { AnchoredOverlay } from '../_shared/anchored-overlay'\nimport { AnchorTrigger, useControlledAnchor } from '../_shared/overlay-anchor'\nimport { useOpenState } from '../_shared/overlay-state'\n\nexport type TooltipProps = {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** O elemento que dispara o tooltip (ex.: um `<Button>`); recebe `onLongPress`. */\n  children: ReactElement\n  /** O texto principal. */\n  content: ReactNode\n  /** Título em destaque acima do texto (opcional). */\n  title?: ReactNode\n  /** Lado do gatilho em que o tooltip aparece; inverte se não couber. Padrão: `top`. */\n  side?: 'top' | 'bottom'\n  /** Fecha sozinho depois deste tempo, em ms. `0` mantém aberto até tocar fora. Padrão: 3000. */\n  duration?: number\n  className?: string\n  testID?: string\n}\n\n/**\n * Dica contextual. No toque não há hover: abre ao pressionar e segurar o gatilho (`onLongPress`),\n * e fecha após `duration` ou ao tocar fora. Como o long press não é óbvio para leitores de tela,\n * o `content` (se for texto) vira o `accessibilityHint` do gatilho. Diferenças do web: sem\n * `delayDuration`, sem seta (`showArrow`) e sem lados `left`/`right`.\n */\nexport function Tooltip({\n  open,\n  defaultOpen,\n  onOpenChange,\n  children,\n  content,\n  title,\n  side = 'top',\n  duration = 3000,\n  className,\n  testID,\n}: TooltipProps) {\n  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange })\n  const { ref, rect } = useControlledAnchor(isOpen)\n  const close = () => setOpen(false)\n\n  useEffect(() => {\n    if (!isOpen || duration <= 0) return\n    const timer = setTimeout(() => setOpen(false), duration)\n    return () => clearTimeout(timer)\n  }, [isOpen, duration, setOpen])\n\n  const hint = typeof content === 'string' ? content : undefined\n\n  return (\n    <>\n      <AnchorTrigger\n        anchorRef={ref}\n        event=\"onLongPress\"\n        onTrigger={() => setOpen(true)}\n        extra={hint ? { accessibilityHint: hint } : undefined}\n      >\n        {children}\n      </AnchorTrigger>\n      <AnchoredOverlay\n        visible={isOpen}\n        rect={rect}\n        onRequestClose={close}\n        placement={side}\n        estimatedHeight={80}\n        testID={testID}\n        className={cn('max-w-[240px] gap-1 rounded-sm bg-bg-inverse px-3 py-2', className)}\n      >\n        <View accessibilityRole=\"text\">\n          {title && (\n            <Text className=\"text-[13px] font-medium leading-4 text-text-inverse\">{title}</Text>\n          )}\n          <Text className=\"text-xs leading-4 text-text-inverse-secondary\">{content}</Text>\n        </View>\n      </AnchoredOverlay>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAiCA,SAAgB,QAAQ,EACtB,MACA,aACA,cACA,UACA,SACA,OACA,OAAO,OACP,WAAW,KACX,WACA,UACe;CACf,MAAM,CAAC,QAAQ,WAAW,aAAa;EAAE;EAAM;EAAa;CAAa,CAAC;CAC1E,MAAM,EAAE,KAAK,SAAS,oBAAoB,MAAM;CAChD,MAAM,cAAc,QAAQ,KAAK;CAEjC,gBAAgB;EACd,IAAI,CAAC,UAAU,YAAY,GAAG;EAC9B,MAAM,QAAQ,iBAAiB,QAAQ,KAAK,GAAG,QAAQ;EACvD,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAQ;EAAU;CAAO,CAAC;CAE9B,MAAM,OAAO,OAAO,YAAY,WAAW,UAAU,KAAA;CAErD,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,eAAD;EACE,WAAW;EACX,OAAM;EACN,iBAAiB,QAAQ,IAAI;EAC7B,OAAO,OAAO,EAAE,mBAAmB,KAAK,IAAI,KAAA;EAE3C;CACY,CAAA,GACf,oBAAC,iBAAD;EACE,SAAS;EACH;EACN,gBAAgB;EAChB,WAAW;EACX,iBAAiB;EACT;EACR,WAAW,GAAG,0DAA0D,SAAS;EAEjF,UAAA,qBAAC,MAAD;GAAM,mBAAkB;GAAxB,UAAA,CACG,SACC,oBAAC,MAAD;IAAM,WAAU;IAAuD,UAAA;GAAY,CAAA,GAErF,oBAAC,MAAD;IAAM,WAAU;IAAiD,UAAA;GAAc,CAAA,CAC3E;;CACS,CAAA,CACjB,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,2 @@
+import { Upload, UploadFile, UploadFileStatus, UploadProps } from "./upload.js";
+export { Upload, type UploadFile, type UploadFileStatus, type UploadProps };

package/dist/components/upload/upload.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from "react";
+//#region src/components/upload/upload.d.ts
+export type UploadFileStatus = 'uploading' | 'done' | 'error';
+export type UploadFile = {
+  /** Identificador estável do arquivo; volta em `onRemoveFile`. */
+  id: string;
+  name: string;
+  /** Tamanho em bytes; sem ele, nada é mostrado. */
+  size?: number;
+  /** `uploading` mostra a barra de progresso; `done` e `error` mostram o resultado. */
+  status?: UploadFileStatus;
+  /** Progresso de 0 a 100, só para `uploading`. Sem ele, a barra fica em 0. */
+  progress?: number;
+  /** Texto do erro, mostrado no lugar do tamanho quando `status="error"`. */
+  errorMessage?: string;
+};
+export type UploadProps = {
+  /**
+   * Chamado ao tocar na área. O componente não escolhe arquivos: abra o seletor que preferir e
+   * guarde o resultado no estado que alimenta `files`. Com expo-document-picker:
+   *
+   *   import * as DocumentPicker from 'expo-document-picker'
+   *
+   *   async function pick() {
+   *     const result = await DocumentPicker.getDocumentAsync({ multiple: true })
+   *     if (result.canceled) return
+   *     setFiles((prev) => [
+   *       ...prev,
+   *       ...result.assets.map((a) => ({
+   *         id: a.uri,
+   *         name: a.name,
+   *         size: a.size,
+   *         status: 'uploading' as const,
+   *       })),
+   *     ])
+   *   }
+   *   <Upload onPick={pick} files={files} onRemoveFile={(id) => setFiles(...)} />
+   */
+  onPick: () => void;
+  /** Arquivos já escolhidos, listados abaixo da área com tamanho, status e botão de remover. */
+  files?: UploadFile[];
+  /** Chamado ao tocar no × de um arquivo. Sem ele, o botão não aparece. */
+  onRemoveFile?: (id: string) => void;
+  /** Texto principal da área. */
+  title?: ReactNode;
+  /** Texto de apoio (formatos e tamanho aceitos, por exemplo). */
+  description?: ReactNode;
+  /** Borda em vermelho, para quando os arquivos escolhidos têm problema. */
+  error?: boolean;
+  disabled?: boolean;
+  /** Prefixo do rótulo acessível do botão de remover ("Remover contrato.pdf"). */
+  removeLabel?: string;
+  className?: string;
+  accessibilityLabel?: string;
+  testID?: string;
+};
+/**
+ * Área para escolher arquivos tocando, mais a lista dos escolhidos. No native não há dropzone nem
+ * `<input type="file">`, e o seletor depende do app (expo-document-picker, image-picker...): por
+ * isso o componente é controlado e agnóstico. `onPick` abre o seu seletor; `files` e
+ * `onRemoveFile` descrevem a lista. Validar tipo e tamanho e enviar ao servidor ficam com você.
+ */
+export declare function Upload({ onPick, files, onRemoveFile, title, description, error, disabled, removeLabel, className, accessibilityLabel, testID }: UploadProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=upload.d.ts.map

package/dist/components/upload/upload.js

@@ -0,0 +1,130 @@
+import { cn } from "../../utils/cn.js";
+import { CheckIcon, CloseIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { Pressable, Text, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/upload/upload.tsx
+/** "1,5 MB", "230 KB", "12 B". */
+function formatSize(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	const kb = bytes / 1024;
+	if (kb < 1024) return `${Math.round(kb)} KB`;
+	const mb = kb / 1024;
+	return `${(mb < 10 ? Math.round(mb * 10) / 10 : Math.round(mb)).toString().replace(".", ",")} MB`;
+}
+function UploadIcon({ color }) {
+	return /* @__PURE__ */ jsx(Svg, {
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: color,
+		strokeWidth: 1.5,
+		children: /* @__PURE__ */ jsx(Path, {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			d: "M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"
+		})
+	});
+}
+function FileRow({ file, onRemove, removeLabel }) {
+	const successColor = useToken("--color-status-success-text");
+	const iconColor = useToken("--color-text-secondary");
+	const progress = Math.min(100, Math.max(0, file.progress ?? 0));
+	const isError = file.status === "error";
+	const detail = isError && file.errorMessage ? file.errorMessage : void 0;
+	const size = file.size === void 0 ? void 0 : formatSize(file.size);
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("gap-2 rounded-md border bg-field-bg px-3 py-2", isError ? "border-field-border-error" : "border-field-border"),
+		children: [/* @__PURE__ */ jsxs(View, {
+			className: "flex-row items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsxs(View, {
+					className: "flex-1",
+					children: [/* @__PURE__ */ jsx(Text, {
+						numberOfLines: 1,
+						className: "text-sm font-medium text-text-primary",
+						children: file.name
+					}), detail || size ? /* @__PURE__ */ jsx(Text, {
+						className: cn("text-xs", isError ? "text-status-error-text" : "text-text-secondary"),
+						children: detail ?? size
+					}) : null]
+				}),
+				file.status === "done" ? /* @__PURE__ */ jsx(View, {
+					accessible: true,
+					accessibilityLabel: "Concluído",
+					children: /* @__PURE__ */ jsx(CheckIcon, { color: successColor })
+				}) : null,
+				onRemove ? /* @__PURE__ */ jsx(Pressable, {
+					accessibilityRole: "button",
+					accessibilityLabel: `${removeLabel} ${file.name}`,
+					hitSlop: 8,
+					onPress: () => onRemove(file.id),
+					className: "size-8 items-center justify-center rounded-full active:bg-bg-tertiary",
+					children: /* @__PURE__ */ jsx(CloseIcon, { color: iconColor })
+				}) : null
+			]
+		}), file.status === "uploading" ? /* @__PURE__ */ jsx(View, {
+			accessible: true,
+			accessibilityRole: "progressbar",
+			accessibilityLabel: file.name,
+			accessibilityValue: {
+				min: 0,
+				max: 100,
+				now: progress
+			},
+			className: "h-1 overflow-hidden rounded-full bg-bg-tertiary",
+			children: /* @__PURE__ */ jsx(View, {
+				className: "h-full rounded-full bg-interactive-primary",
+				style: { width: `${progress}%` }
+			})
+		}) : null]
+	});
+}
+/**
+* Área para escolher arquivos tocando, mais a lista dos escolhidos. No native não há dropzone nem
+* `<input type="file">`, e o seletor depende do app (expo-document-picker, image-picker...): por
+* isso o componente é controlado e agnóstico. `onPick` abre o seu seletor; `files` e
+* `onRemoveFile` descrevem a lista. Validar tipo e tamanho e enviar ao servidor ficam com você.
+*/
+function Upload({ onPick, files, onRemoveFile, title = "Toque para escolher arquivos", description, error, disabled, removeLabel = "Remover", className, accessibilityLabel, testID }) {
+	const iconColor = useToken("--color-text-secondary");
+	return /* @__PURE__ */ jsxs(View, {
+		className: "gap-2",
+		children: [/* @__PURE__ */ jsxs(Pressable, {
+			accessibilityRole: "button",
+			accessibilityLabel: accessibilityLabel ?? (typeof title === "string" && typeof description === "string" ? `${title}. ${description}` : typeof title === "string" ? title : void 0),
+			accessibilityState: { disabled: Boolean(disabled) },
+			disabled,
+			onPress: onPick,
+			testID,
+			className: cn("items-center gap-1 rounded-md border border-dashed bg-field-bg px-6 py-8", error ? "border-field-border-error" : "border-field-border", "active:border-interactive-primary active:bg-button-secondary-bg", "disabled:border-field-border-disabled disabled:bg-field-bg-disabled", className),
+			children: [
+				/* @__PURE__ */ jsx(View, {
+					className: "mb-1",
+					children: /* @__PURE__ */ jsx(UploadIcon, { color: iconColor })
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					className: cn("text-center text-sm font-medium text-text-primary", disabled && "text-field-text-disabled"),
+					children: title
+				}),
+				description ? /* @__PURE__ */ jsx(Text, {
+					className: cn("text-center text-xs text-text-secondary", disabled && "text-field-text-disabled"),
+					children: description
+				}) : null
+			]
+		}), files && files.length > 0 ? /* @__PURE__ */ jsx(View, {
+			className: "gap-2",
+			children: files.map((file) => /* @__PURE__ */ jsx(FileRow, {
+				file,
+				onRemove: onRemoveFile,
+				removeLabel
+			}, file.id))
+		}) : null]
+	});
+}
+//#endregion
+export { Upload };
+
+//# sourceMappingURL=upload.js.map

package/dist/components/upload/upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.js","names":[],"sources":["../../../src/components/upload/upload.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport type { ReactNode } from 'react'\nimport { Pressable, Text, View } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\nimport { cn } from '../../utils/cn'\nimport { CheckIcon, CloseIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\n\nexport type UploadFileStatus = 'uploading' | 'done' | 'error'\n\nexport type UploadFile = {\n  /** Identificador estável do arquivo; volta em `onRemoveFile`. */\n  id: string\n  name: string\n  /** Tamanho em bytes; sem ele, nada é mostrado. */\n  size?: number\n  /** `uploading` mostra a barra de progresso; `done` e `error` mostram o resultado. */\n  status?: UploadFileStatus\n  /** Progresso de 0 a 100, só para `uploading`. Sem ele, a barra fica em 0. */\n  progress?: number\n  /** Texto do erro, mostrado no lugar do tamanho quando `status=\"error\"`. */\n  errorMessage?: string\n}\n\nexport type UploadProps = {\n  /**\n   * Chamado ao tocar na área. O componente não escolhe arquivos: abra o seletor que preferir e\n   * guarde o resultado no estado que alimenta `files`. Com expo-document-picker:\n   *\n   *   import * as DocumentPicker from 'expo-document-picker'\n   *\n   *   async function pick() {\n   *     const result = await DocumentPicker.getDocumentAsync({ multiple: true })\n   *     if (result.canceled) return\n   *     setFiles((prev) => [\n   *       ...prev,\n   *       ...result.assets.map((a) => ({\n   *         id: a.uri,\n   *         name: a.name,\n   *         size: a.size,\n   *         status: 'uploading' as const,\n   *       })),\n   *     ])\n   *   }\n   *   <Upload onPick={pick} files={files} onRemoveFile={(id) => setFiles(...)} />\n   */\n  onPick: () => void\n  /** Arquivos já escolhidos, listados abaixo da área com tamanho, status e botão de remover. */\n  files?: UploadFile[]\n  /** Chamado ao tocar no × de um arquivo. Sem ele, o botão não aparece. */\n  onRemoveFile?: (id: string) => void\n  /** Texto principal da área. */\n  title?: ReactNode\n  /** Texto de apoio (formatos e tamanho aceitos, por exemplo). */\n  description?: ReactNode\n  /** Borda em vermelho, para quando os arquivos escolhidos têm problema. */\n  error?: boolean\n  disabled?: boolean\n  /** Prefixo do rótulo acessível do botão de remover (\"Remover contrato.pdf\"). */\n  removeLabel?: string\n  className?: string\n  accessibilityLabel?: string\n  testID?: string\n}\n\n/** \"1,5 MB\", \"230 KB\", \"12 B\". */\nfunction formatSize(bytes: number) {\n  if (bytes < 1024) return `${bytes} B`\n  const kb = bytes / 1024\n  if (kb < 1024) return `${Math.round(kb)} KB`\n  const mb = kb / 1024\n  return `${(mb < 10 ? Math.round(mb * 10) / 10 : Math.round(mb)).toString().replace('.', ',')} MB`\n}\n\nfunction UploadIcon({ color }: { color?: string }) {\n  return (\n    <Svg width={24} height={24} viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth={1.5}>\n      <Path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3\"\n      />\n    </Svg>\n  )\n}\n\nfunction FileRow({\n  file,\n  onRemove,\n  removeLabel,\n}: {\n  file: UploadFile\n  onRemove?: (id: string) => void\n  removeLabel: string\n}) {\n  const successColor = useToken('--color-status-success-text')\n  const iconColor = useToken('--color-text-secondary')\n  const progress = Math.min(100, Math.max(0, file.progress ?? 0))\n  const isError = file.status === 'error'\n  const detail = isError && file.errorMessage ? file.errorMessage : undefined\n  const size = file.size === undefined ? undefined : formatSize(file.size)\n\n  return (\n    <View\n      className={cn(\n        'gap-2 rounded-md border bg-field-bg px-3 py-2',\n        isError ? 'border-field-border-error' : 'border-field-border',\n      )}\n    >\n      <View className=\"flex-row items-center gap-2\">\n        <View className=\"flex-1\">\n          <Text numberOfLines={1} className=\"text-sm font-medium text-text-primary\">\n            {file.name}\n          </Text>\n          {detail || size ? (\n            <Text\n              className={cn('text-xs', isError ? 'text-status-error-text' : 'text-text-secondary')}\n            >\n              {detail ?? size}\n            </Text>\n          ) : null}\n        </View>\n        {file.status === 'done' ? (\n          <View accessible accessibilityLabel=\"Concluído\">\n            <CheckIcon color={successColor} />\n          </View>\n        ) : null}\n        {onRemove ? (\n          <Pressable\n            accessibilityRole=\"button\"\n            accessibilityLabel={`${removeLabel} ${file.name}`}\n            hitSlop={8}\n            onPress={() => onRemove(file.id)}\n            className=\"size-8 items-center justify-center rounded-full active:bg-bg-tertiary\"\n          >\n            <CloseIcon color={iconColor} />\n          </Pressable>\n        ) : null}\n      </View>\n      {file.status === 'uploading' ? (\n        <View\n          accessible\n          accessibilityRole=\"progressbar\"\n          accessibilityLabel={file.name}\n          accessibilityValue={{ min: 0, max: 100, now: progress }}\n          className=\"h-1 overflow-hidden rounded-full bg-bg-tertiary\"\n        >\n          <View\n            className=\"h-full rounded-full bg-interactive-primary\"\n            style={{ width: `${progress}%` }}\n          />\n        </View>\n      ) : null}\n    </View>\n  )\n}\n\n/**\n * Área para escolher arquivos tocando, mais a lista dos escolhidos. No native não há dropzone nem\n * `<input type=\"file\">`, e o seletor depende do app (expo-document-picker, image-picker...): por\n * isso o componente é controlado e agnóstico. `onPick` abre o seu seletor; `files` e\n * `onRemoveFile` descrevem a lista. Validar tipo e tamanho e enviar ao servidor ficam com você.\n */\nexport function Upload({\n  onPick,\n  files,\n  onRemoveFile,\n  title = 'Toque para escolher arquivos',\n  description,\n  error,\n  disabled,\n  removeLabel = 'Remover',\n  className,\n  accessibilityLabel,\n  testID,\n}: UploadProps) {\n  const iconColor = useToken('--color-text-secondary')\n\n  return (\n    <View className=\"gap-2\">\n      <Pressable\n        accessibilityRole=\"button\"\n        accessibilityLabel={\n          accessibilityLabel ??\n          (typeof title === 'string' && typeof description === 'string'\n            ? `${title}. ${description}`\n            : typeof title === 'string'\n              ? title\n              : undefined)\n        }\n        accessibilityState={{ disabled: Boolean(disabled) }}\n        disabled={disabled}\n        onPress={onPick}\n        testID={testID}\n        className={cn(\n          'items-center gap-1 rounded-md border border-dashed bg-field-bg px-6 py-8',\n          error ? 'border-field-border-error' : 'border-field-border',\n          'active:border-interactive-primary active:bg-button-secondary-bg',\n          'disabled:border-field-border-disabled disabled:bg-field-bg-disabled',\n          className,\n        )}\n      >\n        <View className=\"mb-1\">\n          <UploadIcon color={iconColor} />\n        </View>\n        <Text\n          className={cn(\n            'text-center text-sm font-medium text-text-primary',\n            disabled && 'text-field-text-disabled',\n          )}\n        >\n          {title}\n        </Text>\n        {description ? (\n          <Text\n            className={cn(\n              'text-center text-xs text-text-secondary',\n              disabled && 'text-field-text-disabled',\n            )}\n          >\n            {description}\n          </Text>\n        ) : null}\n      </Pressable>\n      {files && files.length > 0 ? (\n        <View className=\"gap-2\">\n          {files.map((file) => (\n            <FileRow key={file.id} file={file} onRemove={onRemoveFile} removeLabel={removeLabel} />\n          ))}\n        </View>\n      ) : null}\n    </View>\n  )\n}\n"],"mappings":"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"}