@innovui/react-native 0.0.0-stage → 0.1.0

package/dist/components/field/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cloneElement, type ReactElement, type ReactNode } from 'react'\nimport { Text, View } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { StatusIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\n\nexport type FieldProps = {\n  /** Texto do rótulo. */\n  label: string\n  /** Exibe um asterisco vermelho após o rótulo. */\n  required?: boolean\n  /** Propaga vermelho para rótulo, borda do controle e texto de apoio. */\n  error?: boolean\n  disabled?: boolean\n  /** Propaga somente leitura ao controle. */\n  readOnly?: boolean\n  /** Tamanho do rótulo e do controle (o `sm` usa rótulo de 12px). */\n  size?: 'sm' | 'md' | 'lg'\n  /** Instrução (estado normal) ou mensagem de erro (estado error). */\n  supportingText?: ReactNode\n  /** O controle: Input, Textarea ou Select. Recebe disabled/error/size e o nome acessível. */\n  children: ReactElement<{\n    disabled?: boolean\n    readOnly?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    error?: boolean\n    accessibilityLabel?: string\n    accessibilityHint?: string\n  }>\n  className?: string\n}\n\n/** Combina rótulo + controle + texto de apoio — o jeito certo de montar um campo de formulário. */\nexport function Field({\n  label,\n  required,\n  error,\n  disabled,\n  readOnly,\n  size,\n  supportingText,\n  children,\n  className,\n}: FieldProps) {\n  const errorColor = useToken('--color-status-error-text')\n\n  return (\n    <View className={cn('gap-1', className)}>\n      <Text\n        className={cn(\n          'font-medium text-field-text-label',\n          size === 'sm' ? 'text-xs leading-4' : 'text-sm',\n          error && 'text-status-error-text',\n        )}\n      >\n        {label}\n        {required ? (\n          // Sem `htmlFor` no native: o nome acessível vai por accessibilityLabel no controle,\n          // então o asterisco fica escondido do leitor de tela.\n          <Text\n            className=\"text-status-error-text\"\n            accessibilityElementsHidden\n            importantForAccessibility=\"no\"\n          >\n            {' *'}\n          </Text>\n        ) : null}\n      </Text>\n      {cloneElement(children, {\n        disabled: disabled ?? children.props.disabled,\n        readOnly: readOnly ?? children.props.readOnly,\n        size: size ?? children.props.size,\n        error: error ?? children.props.error,\n        accessibilityLabel: children.props.accessibilityLabel ?? label,\n        accessibilityHint:\n          children.props.accessibilityHint ??\n          (typeof supportingText === 'string' ? supportingText : undefined),\n      })}\n      {supportingText ? (\n        <View\n          className=\"flex-row items-center gap-1\"\n          // Mensagem de erro é anunciada assim que aparece.\n          accessibilityLiveRegion={error ? 'polite' : undefined}\n        >\n          {error ? (\n            <StatusIcon status=\"error\" color={errorColor} style={{ width: 16, height: 16 }} />\n          ) : null}\n          {typeof supportingText === 'string' ? (\n            <Text\n              className={cn(\n                'shrink text-xs leading-4 text-field-text-label',\n                error && 'text-status-error-text',\n              )}\n            >\n              {supportingText}\n            </Text>\n          ) : (\n            supportingText\n          )}\n        </View>\n      ) : null}\n    </View>\n  )\n}\n"],"mappings":";;;;;;;;AAmCA,SAAgB,MAAM,EACpB,OACA,UACA,OACA,UACA,UACA,MACA,gBACA,UACA,aACa;CACb,MAAM,aAAa,SAAS,2BAA2B;CAEvD,OACE,qBAAC,MAAD;EAAM,WAAW,GAAG,SAAS,SAAS;EAAtC,UAAA;GACE,qBAAC,MAAD;IACE,WAAW,GACT,qCACA,SAAS,OAAO,sBAAsB,WACtC,SAAS,wBACX;IALF,UAAA,CAOG,OACA,WAGC,oBAAC,MAAD;KACE,WAAU;KACV,6BAAA;KACA,2BAA0B;KAEzB,UAAA;IACG,CAAA,IACJ,IACA;;GACL,aAAa,UAAU;IACtB,UAAU,YAAY,SAAS,MAAM;IACrC,UAAU,YAAY,SAAS,MAAM;IACrC,MAAM,QAAQ,SAAS,MAAM;IAC7B,OAAO,SAAS,SAAS,MAAM;IAC/B,oBAAoB,SAAS,MAAM,sBAAsB;IACzD,mBACE,SAAS,MAAM,sBACd,OAAO,mBAAmB,WAAW,iBAAiB,KAAA;GAC3D,CAAC;GACA,iBACC,qBAAC,MAAD;IACE,WAAU;IAEV,yBAAyB,QAAQ,WAAW,KAAA;IAH9C,UAAA,CAKG,QACC,oBAAC,YAAD;KAAY,QAAO;KAAQ,OAAO;KAAY,OAAO;MAAE,OAAO;MAAI,QAAQ;KAAG;IAAI,CAAA,IAC/E,MACH,OAAO,mBAAmB,WACzB,oBAAC,MAAD;KACE,WAAW,GACT,kDACA,SAAS,wBACX;KAEC,UAAA;IACG,CAAA,IAEN,cAEE;GACJ,CAAA,IAAA;EACA;;AAEV"}

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

@@ -0,0 +1,2 @@
+import { Field, FieldProps } from "./field.js";
+export { Field, type FieldProps };

package/dist/components/grid/grid.d.ts

@@ -0,0 +1,35 @@
+import { ViewProps } from "react-native";
+//#region src/components/grid/grid.d.ts
+declare const gapPx: {
+  readonly 0: 0;
+  readonly 1: 4;
+  readonly 2: 8;
+  readonly 3: 12;
+  readonly 4: 16;
+  readonly 6: 24;
+  readonly 8: 32;
+};
+type Columns = 'responsive' | 1 | 2 | 3 | 4 | 6 | 12;
+type Gap = keyof typeof gapPx;
+export type GridProps = ViewProps & {
+  className?: string;
+  /** `responsive` segue o grid do DS: 4 colunas, 8 a partir de 768px e 12 a partir de 1440px. */
+  columns?: Columns;
+  /** Espaçamento entre células, na escala do DS (px = valor x 4). */
+  gap?: Gap;
+};
+/**
+ * Grid de colunas iguais. Não há CSS grid no RN: a largura de cada `GridItem` é calculada a
+ * partir da largura medida do Grid (`onLayout`) e as células quebram linha com `flex-wrap`.
+ * Antes da primeira medição, usa porcentagem (sem descontar o gap).
+ */
+export declare function Grid({ className, columns, gap, onLayout, children, ...props }: GridProps): import("react").JSX.Element;
+export type GridItemProps = ViewProps & {
+  className?: string;
+  /** Quantas colunas a célula ocupa (`full` ocupa a linha toda). Padrão: 1. */
+  span?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 'full';
+};
+/** Célula do Grid que ocupa `span` colunas (limitado ao total de colunas atual). */
+export declare function GridItem({ className, span, style, ...props }: GridItemProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=grid.d.ts.map

package/dist/components/grid/grid.js

@@ -0,0 +1,64 @@
+import { cn } from "../../utils/cn.js";
+import { createContext, useContext, useState } from "react";
+import { View, useWindowDimensions } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/grid/grid.tsx
+const TABLET_MIN_WIDTH = 768;
+const DESKTOP_MIN_WIDTH = 1440;
+const gapPx = {
+	0: 0,
+	1: 4,
+	2: 8,
+	3: 12,
+	4: 16,
+	6: 24,
+	8: 32
+};
+const GridContext = createContext({
+	columns: 1,
+	gap: 0,
+	width: 0
+});
+/**
+* Grid de colunas iguais. Não há CSS grid no RN: a largura de cada `GridItem` é calculada a
+* partir da largura medida do Grid (`onLayout`) e as células quebram linha com `flex-wrap`.
+* Antes da primeira medição, usa porcentagem (sem descontar o gap).
+*/
+function Grid({ className, columns = "responsive", gap = 4, onLayout, children, ...props }) {
+	const { width: windowWidth } = useWindowDimensions();
+	const [width, setWidth] = useState(0);
+	const count = columns === "responsive" ? windowWidth >= DESKTOP_MIN_WIDTH ? 12 : windowWidth >= TABLET_MIN_WIDTH ? 8 : 4 : columns;
+	const handleLayout = (event) => {
+		setWidth(event.nativeEvent.layout.width);
+		onLayout?.(event);
+	};
+	return /* @__PURE__ */ jsx(GridContext.Provider, {
+		value: {
+			columns: count,
+			gap: gapPx[gap],
+			width
+		},
+		children: /* @__PURE__ */ jsx(View, {
+			className: cn("flex-row flex-wrap", className),
+			style: { gap: gapPx[gap] },
+			onLayout: handleLayout,
+			...props,
+			children
+		})
+	});
+}
+/** Célula do Grid que ocupa `span` colunas (limitado ao total de colunas atual). */
+function GridItem({ className, span = 1, style, ...props }) {
+	const { columns, gap, width } = useContext(GridContext);
+	const n = span === "full" ? columns : Math.min(span, columns);
+	const itemWidth = width > 0 ? (width - gap * (columns - 1)) * (n / columns) + gap * (n - 1) : `${n / columns * 100}%`;
+	return /* @__PURE__ */ jsx(View, {
+		className: cn(className),
+		style: [{ width: itemWidth }, style],
+		...props
+	});
+}
+//#endregion
+export { Grid, GridItem };
+
+//# sourceMappingURL=grid.js.map

package/dist/components/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","names":[],"sources":["../../../src/components/grid/grid.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { createContext, useContext, useState } from 'react'\nimport { type LayoutChangeEvent, useWindowDimensions, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\n\nconst TABLET_MIN_WIDTH = 768\nconst DESKTOP_MIN_WIDTH = 1440\n\n// escala de gap do DS (base 4): chave -> px\nconst gapPx = { 0: 0, 1: 4, 2: 8, 3: 12, 4: 16, 6: 24, 8: 32 } as const\n\ntype Columns = 'responsive' | 1 | 2 | 3 | 4 | 6 | 12\ntype Gap = keyof typeof gapPx\n\ntype GridContextValue = { columns: number; gap: number; width: number }\nconst GridContext = createContext<GridContextValue>({ columns: 1, gap: 0, width: 0 })\n\nexport type GridProps = ViewProps & {\n  className?: string\n  /** `responsive` segue o grid do DS: 4 colunas, 8 a partir de 768px e 12 a partir de 1440px. */\n  columns?: Columns\n  /** Espaçamento entre células, na escala do DS (px = valor x 4). */\n  gap?: Gap\n}\n\n/**\n * Grid de colunas iguais. Não há CSS grid no RN: a largura de cada `GridItem` é calculada a\n * partir da largura medida do Grid (`onLayout`) e as células quebram linha com `flex-wrap`.\n * Antes da primeira medição, usa porcentagem (sem descontar o gap).\n */\nexport function Grid({\n  className,\n  columns = 'responsive',\n  gap = 4,\n  onLayout,\n  children,\n  ...props\n}: GridProps) {\n  const { width: windowWidth } = useWindowDimensions()\n  const [width, setWidth] = useState(0)\n\n  const count =\n    columns === 'responsive'\n      ? windowWidth >= DESKTOP_MIN_WIDTH\n        ? 12\n        : windowWidth >= TABLET_MIN_WIDTH\n          ? 8\n          : 4\n      : columns\n\n  const handleLayout = (event: LayoutChangeEvent) => {\n    setWidth(event.nativeEvent.layout.width)\n    onLayout?.(event)\n  }\n\n  return (\n    <GridContext.Provider value={{ columns: count, gap: gapPx[gap], width }}>\n      <View\n        className={cn('flex-row flex-wrap', className)}\n        style={{ gap: gapPx[gap] }}\n        onLayout={handleLayout}\n        {...props}\n      >\n        {children}\n      </View>\n    </GridContext.Provider>\n  )\n}\n\nexport type GridItemProps = ViewProps & {\n  className?: string\n  /** Quantas colunas a célula ocupa (`full` ocupa a linha toda). Padrão: 1. */\n  span?: 1 | 2 | 3 | 4 | 6 | 8 | 12 | 'full'\n}\n\n/** Célula do Grid que ocupa `span` colunas (limitado ao total de colunas atual). */\nexport function GridItem({ className, span = 1, style, ...props }: GridItemProps) {\n  const { columns, gap, width } = useContext(GridContext)\n  const n = span === 'full' ? columns : Math.min(span, columns)\n\n  const itemWidth =\n    width > 0\n      ? (width - gap * (columns - 1)) * (n / columns) + gap * (n - 1)\n      : `${(n / columns) * 100}%`\n\n  return (\n    <View className={cn(className)} style={[{ width: itemWidth as number }, style]} {...props} />\n  )\n}\n"],"mappings":";;;;;AAMA,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAG1B,MAAM,QAAQ;CAAE,GAAG;CAAG,GAAG;CAAG,GAAG;CAAG,GAAG;CAAI,GAAG;CAAI,GAAG;CAAI,GAAG;AAAG;AAM7D,MAAM,cAAc,cAAgC;CAAE,SAAS;CAAG,KAAK;CAAG,OAAO;AAAE,CAAC;;;;;;AAepF,SAAgB,KAAK,EACnB,WACA,UAAU,cACV,MAAM,GACN,UACA,UACA,GAAG,SACS;CACZ,MAAM,EAAE,OAAO,gBAAgB,oBAAoB;CACnD,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CAEpC,MAAM,QACJ,YAAY,eACR,eAAe,oBACb,KACA,eAAe,mBACb,IACA,IACJ;CAEN,MAAM,gBAAgB,UAA6B;EACjD,SAAS,MAAM,YAAY,OAAO,KAAK;EACvC,WAAW,KAAK;CAClB;CAEA,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;GAAE,SAAS;GAAO,KAAK,MAAM;GAAM;EAAM;EACpE,UAAA,oBAAC,MAAD;GACE,WAAW,GAAG,sBAAsB,SAAS;GAC7C,OAAO,EAAE,KAAK,MAAM,KAAK;GACzB,UAAU;GACV,GAAI;GAEH;EACG,CAAA;CACc,CAAA;AAE1B;;AASA,SAAgB,SAAS,EAAE,WAAW,OAAO,GAAG,OAAO,GAAG,SAAwB;CAChF,MAAM,EAAE,SAAS,KAAK,UAAU,WAAW,WAAW;CACtD,MAAM,IAAI,SAAS,SAAS,UAAU,KAAK,IAAI,MAAM,OAAO;CAE5D,MAAM,YACJ,QAAQ,KACH,QAAQ,OAAO,UAAU,OAAO,IAAI,WAAW,OAAO,IAAI,KAC3D,GAAI,IAAI,UAAW,IAAI;CAE7B,OACE,oBAAC,MAAD;EAAM,WAAW,GAAG,SAAS;EAAG,OAAO,CAAC,EAAE,OAAO,UAAoB,GAAG,KAAK;EAAG,GAAI;CAAQ,CAAA;AAEhG"}

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

@@ -0,0 +1,2 @@
+import { Grid, GridItem, GridItemProps, GridProps } from "./grid.js";
+export { Grid, GridItem, type GridItemProps, type GridProps };

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { PressableProps } from "react-native";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/icon-button/icon-button.d.ts
+declare const iconButtonVariants: (props?: ({
+  variant?: "destructive" | "ghost" | "primary" | "secondary" | "tertiary" | null | undefined;
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type IconButtonProps = Omit<PressableProps, 'children' | 'style' | 'accessibilityLabel'> & VariantProps<typeof iconButtonVariants> & {
+  className?: string;
+  /** Obrigatório: sem texto visível, é o nome acessível do botão. */
+  accessibilityLabel: string;
+  /**
+   * O ícone. No native a cor não é herdada: passe `color` ao ícone (ex.: lida com `useCSSVariable`, do uniwind).
+   * O tamanho do ícone também fica por conta de quem passa (24/20/16 por `size`).
+   */
+  children: ReactNode;
+  /** Estado de carregamento: troca o ícone por um spinner e desabilita o botão. */
+  loading?: boolean;
+};
+export declare function IconButton({ className, variant, size, loading, disabled, children, accessibilityState, ...props }: IconButtonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/components/icon-button/icon-button.js

@@ -0,0 +1,48 @@
+import { cn } from "../../utils/cn.js";
+import { Spinner } from "../spinner/spinner.js";
+import { Pressable } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/icon-button/icon-button.tsx
+const iconButtonVariants = cva("shrink-0 items-center justify-center rounded-full", {
+	variants: {
+		variant: {
+			primary: "bg-button-primary-bg active:bg-button-primary-bg-active disabled:bg-button-disabled-bg",
+			secondary: "bg-button-secondary-bg active:bg-button-secondary-bg-hover disabled:bg-button-disabled-bg",
+			tertiary: "border border-button-tertiary-border bg-transparent active:bg-bg-secondary",
+			ghost: "bg-transparent active:bg-button-secondary-bg-hover",
+			destructive: "bg-button-destructive-bg active:bg-button-destructive-bg-active disabled:bg-button-disabled-bg"
+		},
+		size: {
+			lg: "size-14",
+			md: "size-11",
+			sm: "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+function IconButton({ className, variant, size, loading = false, disabled, children, accessibilityState, ...props }) {
+	const isDisabled = Boolean(disabled || loading);
+	return /* @__PURE__ */ jsx(Pressable, {
+		accessibilityRole: "button",
+		accessibilityState: {
+			...accessibilityState,
+			disabled: isDisabled,
+			busy: loading
+		},
+		disabled: isDisabled,
+		className: cn(iconButtonVariants({
+			variant,
+			size
+		}), className),
+		...props,
+		children: loading ? /* @__PURE__ */ jsx(Spinner, { size: size ?? "md" }) : children
+	});
+}
+//#endregion
+export { IconButton };
+
+//# sourceMappingURL=icon-button.js.map

package/dist/components/icon-button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../../src/components/icon-button/icon-button.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { Pressable, type PressableProps } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { Spinner } from '../spinner/spinner'\n\n// Mesmos estilos do Button (não exportados de lá). Quadrado 1:1 nas alturas 56/44/36.\nconst iconButtonVariants = cva('shrink-0 items-center justify-center rounded-full', {\n  variants: {\n    variant: {\n      primary:\n        'bg-button-primary-bg active:bg-button-primary-bg-active disabled:bg-button-disabled-bg',\n      secondary:\n        'bg-button-secondary-bg active:bg-button-secondary-bg-hover disabled:bg-button-disabled-bg',\n      tertiary: 'border border-button-tertiary-border bg-transparent active:bg-bg-secondary',\n      ghost: 'bg-transparent active:bg-button-secondary-bg-hover',\n      destructive:\n        'bg-button-destructive-bg active:bg-button-destructive-bg-active disabled:bg-button-disabled-bg',\n    },\n    size: {\n      lg: 'size-14',\n      md: 'size-11',\n      sm: 'size-9',\n    },\n  },\n  defaultVariants: { variant: 'primary', size: 'md' },\n})\n\nexport type IconButtonProps = Omit<PressableProps, 'children' | 'style' | 'accessibilityLabel'> &\n  VariantProps<typeof iconButtonVariants> & {\n    className?: string\n    /** Obrigatório: sem texto visível, é o nome acessível do botão. */\n    accessibilityLabel: string\n    /**\n     * O ícone. No native a cor não é herdada: passe `color` ao ícone (ex.: lida com `useCSSVariable`, do uniwind).\n     * O tamanho do ícone também fica por conta de quem passa (24/20/16 por `size`).\n     */\n    children: ReactNode\n    /** Estado de carregamento: troca o ícone por um spinner e desabilita o botão. */\n    loading?: boolean\n  }\n\nexport function IconButton({\n  className,\n  variant,\n  size,\n  loading = false,\n  disabled,\n  children,\n  accessibilityState,\n  ...props\n}: IconButtonProps) {\n  const isDisabled = Boolean(disabled || loading)\n\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityState={{ ...accessibilityState, disabled: isDisabled, busy: loading }}\n      disabled={isDisabled}\n      className={cn(iconButtonVariants({ variant, size }), className)}\n      {...props}\n    >\n      {loading ? <Spinner size={size ?? 'md'} /> : children}\n    </Pressable>\n  )\n}\n"],"mappings":";;;;;;AASA,MAAM,qBAAqB,IAAI,qDAAqD;CAClF,UAAU;EACR,SAAS;GACP,SACE;GACF,WACE;GACF,UAAU;GACV,OAAO;GACP,aACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAK;AACpD,CAAC;AAgBD,SAAgB,WAAW,EACzB,WACA,SACA,MACA,UAAU,OACV,UACA,UACA,oBACA,GAAG,SACe;CAClB,MAAM,aAAa,QAAQ,YAAY,OAAO;CAE9C,OACE,oBAAC,WAAD;EACE,mBAAkB;EAClB,oBAAoB;GAAE,GAAG;GAAoB,UAAU;GAAY,MAAM;EAAQ;EACjF,UAAU;EACV,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC9D,GAAI;EAEH,UAAA,UAAU,oBAAC,SAAD,EAAS,MAAM,QAAQ,KAAO,CAAA,IAAI;CACpC,CAAA;AAEf"}

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+import { IconButton, IconButtonProps } from "./icon-button.js";
+export { IconButton, type IconButtonProps };

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

@@ -0,0 +1,2 @@
+import { Input, InputProps } from "./input.js";
+export { Input, type InputProps };

package/dist/components/input/input.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { TextInputProps } from "react-native";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/input/input.d.ts
+/** Estilo do campo, compartilhado com o Textarea (não faz parte da API pública). */
+export declare const inputVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+  error?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type InputProps = Omit<TextInputProps, 'style' | 'editable'> & Omit<VariantProps<typeof inputVariants>, 'error'> & {
+  className?: string;
+  /** Borda e foco em vermelho. */
+  error?: boolean;
+  disabled?: boolean;
+  /** Ícone antes do texto (o consumidor define a cor; o slot tem 24px). */
+  leadingIcon?: ReactNode;
+  /** Ícone depois do texto (o consumidor define a cor; o slot tem 24px). */
+  trailingIcon?: ReactNode;
+};
+export declare function Input({ className, size, error, disabled, readOnly, leadingIcon, trailingIcon, accessibilityState, ...props }: InputProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.js

@@ -0,0 +1,86 @@
+import { cn } from "../../utils/cn.js";
+import { useToken } from "../_shared/use-token.js";
+import { TextInput, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/input/input.tsx
+/** Estilo do campo, compartilhado com o Textarea (não faz parte da API pública). */
+const inputVariants = cva("w-full rounded-md border border-field-border bg-field-bg py-0 text-field-text focus:border-field-focus-ring", {
+	variants: {
+		size: {
+			lg: "h-14 px-4 text-base",
+			md: "h-12 px-3 text-base",
+			sm: "h-10 px-2 text-sm"
+		},
+		error: {
+			true: "border-field-border-error focus:border-field-border-error",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		error: false
+	}
+});
+const iconSlot = {
+	lg: {
+		icon: "w-5",
+		left: "left-4",
+		right: "right-4",
+		padL: "pl-11",
+		padR: "pr-11"
+	},
+	md: {
+		icon: "w-6",
+		left: "left-3",
+		right: "right-3",
+		padL: "pl-11",
+		padR: "pr-11"
+	},
+	sm: {
+		icon: "w-6",
+		left: "left-2",
+		right: "right-2",
+		padL: "pl-9",
+		padR: "pr-9"
+	}
+};
+function Input({ className, size, error = false, disabled = false, readOnly = false, leadingIcon, trailingIcon, accessibilityState, ...props }) {
+	const placeholderColor = useToken("--color-field-text-placeholder");
+	const slot = iconSlot[size ?? "md"];
+	const input = /* @__PURE__ */ jsx(TextInput, {
+		editable: !disabled && !readOnly,
+		readOnly,
+		placeholderTextColor: placeholderColor,
+		accessibilityState: {
+			...accessibilityState,
+			disabled
+		},
+		className: cn(inputVariants({
+			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", leadingIcon && slot.padL, trailingIcon && slot.padR, className),
+		...props
+	});
+	if (!leadingIcon && !trailingIcon) return input;
+	return /* @__PURE__ */ jsxs(View, {
+		className: "justify-center",
+		children: [
+			leadingIcon ? /* @__PURE__ */ jsx(View, {
+				pointerEvents: "none",
+				className: cn("absolute inset-y-0 z-10 items-center justify-center", slot.icon, slot.left),
+				children: leadingIcon
+			}) : null,
+			input,
+			trailingIcon ? /* @__PURE__ */ jsx(View, {
+				pointerEvents: "none",
+				className: cn("absolute inset-y-0 z-10 items-center justify-center", slot.icon, slot.right),
+				children: trailingIcon
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Input, inputVariants };
+
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { TextInput, type TextInputProps, View } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { useToken } from '../_shared/use-token'\n\n/** Estilo do campo, compartilhado com o Textarea (não faz parte da API pública). */\nexport const inputVariants = cva(\n  'w-full rounded-md border border-field-border bg-field-bg py-0 text-field-text focus:border-field-focus-ring',\n  {\n    variants: {\n      size: {\n        lg: 'h-14 px-4 text-base',\n        md: 'h-12 px-3 text-base',\n        sm: 'h-10 px-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\n// Posição do ícone e recuo do texto por tamanho (Figma: padding + ícone 24/20/24 + gap 8/8/4).\nconst iconSlot = {\n  lg: { icon: 'w-5', left: 'left-4', right: 'right-4', padL: 'pl-11', padR: 'pr-11' },\n  md: { icon: 'w-6', left: 'left-3', right: 'right-3', padL: 'pl-11', padR: 'pr-11' },\n  sm: { icon: 'w-6', left: 'left-2', right: 'right-2', padL: 'pl-9', padR: 'pr-9' },\n}\n\nexport type InputProps = Omit<TextInputProps, 'style' | 'editable'> &\n  Omit<VariantProps<typeof inputVariants>, 'error'> & {\n    className?: string\n    /** Borda e foco em vermelho. */\n    error?: boolean\n    disabled?: boolean\n    /** Ícone antes do texto (o consumidor define a cor; o slot tem 24px). */\n    leadingIcon?: ReactNode\n    /** Ícone depois do texto (o consumidor define a cor; o slot tem 24px). */\n    trailingIcon?: ReactNode\n  }\n\nexport function Input({\n  className,\n  size,\n  error = false,\n  disabled = false,\n  readOnly = false,\n  leadingIcon,\n  trailingIcon,\n  accessibilityState,\n  ...props\n}: InputProps) {\n  const placeholderColor = useToken('--color-field-text-placeholder')\n  const slot = iconSlot[size ?? 'md']\n\n  const input = (\n    <TextInput\n      editable={!disabled && !readOnly}\n      readOnly={readOnly}\n      placeholderTextColor={placeholderColor}\n      accessibilityState={{ ...accessibilityState, disabled }}\n      className={cn(\n        inputVariants({ 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        leadingIcon && slot.padL,\n        trailingIcon && slot.padR,\n        className,\n      )}\n      {...props}\n    />\n  )\n\n  if (!leadingIcon && !trailingIcon) return input\n\n  return (\n    <View className=\"justify-center\">\n      {leadingIcon ? (\n        <View\n          pointerEvents=\"none\"\n          className={cn(\n            'absolute inset-y-0 z-10 items-center justify-center',\n            slot.icon,\n            slot.left,\n          )}\n        >\n          {leadingIcon}\n        </View>\n      ) : null}\n      {input}\n      {trailingIcon ? (\n        <View\n          pointerEvents=\"none\"\n          className={cn(\n            'absolute inset-y-0 z-10 items-center justify-center',\n            slot.icon,\n            slot.right,\n          )}\n        >\n          {trailingIcon}\n        </View>\n      ) : null}\n    </View>\n  )\n}\n"],"mappings":";;;;;;;AASA,MAAa,gBAAgB,IAC3B,+GACA;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;AAGA,MAAM,WAAW;CACf,IAAI;EAAE,MAAM;EAAO,MAAM;EAAU,OAAO;EAAW,MAAM;EAAS,MAAM;CAAQ;CAClF,IAAI;EAAE,MAAM;EAAO,MAAM;EAAU,OAAO;EAAW,MAAM;EAAS,MAAM;CAAQ;CAClF,IAAI;EAAE,MAAM;EAAO,MAAM;EAAU,OAAO;EAAW,MAAM;EAAQ,MAAM;CAAO;AAClF;AAcA,SAAgB,MAAM,EACpB,WACA,MACA,QAAQ,OACR,WAAW,OACX,WAAW,OACX,aACA,cACA,oBACA,GAAG,SACU;CACb,MAAM,mBAAmB,SAAS,gCAAgC;CAClE,MAAM,OAAO,SAAS,QAAQ;CAE9B,MAAM,QACJ,oBAAC,WAAD;EACE,UAAU,CAAC,YAAY,CAAC;EACd;EACV,sBAAsB;EACtB,oBAAoB;GAAE,GAAG;GAAoB;EAAS;EACtD,WAAW,GACT,cAAc;GAAE;GAAM;EAAM,CAAC,GAC7B,YACE,iHACF,YAAY,CAAC,YAAY,oEACzB,eAAe,KAAK,MACpB,gBAAgB,KAAK,MACrB,SACF;EACA,GAAI;CACL,CAAA;CAGH,IAAI,CAAC,eAAe,CAAC,cAAc,OAAO;CAE1C,OACE,qBAAC,MAAD;EAAM,WAAU;EAAhB,UAAA;GACG,cACC,oBAAC,MAAD;IACE,eAAc;IACd,WAAW,GACT,uDACA,KAAK,MACL,KAAK,IACP;IAEC,UAAA;GACG,CAAA,IACJ;GACH;GACA,eACC,oBAAC,MAAD;IACE,eAAc;IACd,WAAW,GACT,uDACA,KAAK,MACL,KAAK,KACP;IAEC,UAAA;GACG,CAAA,IACJ;EACA;;AAEV"}

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

@@ -0,0 +1,2 @@
+import { Link, LinkProps } from "./link.js";
+export { Link, type LinkProps };

package/dist/components/link/link.d.ts

@@ -0,0 +1,13 @@
+import { TextProps } from "react-native";
+//#region src/components/link/link.d.ts
+export type LinkProps = Omit<TextProps, 'style' | 'onPress'> & {
+  className?: string;
+  /** URL aberta com `Linking.openURL` ao tocar (depois de `onPress`). */
+  href?: string;
+  /** Para navegar com o seu roteador, use só `onPress` (sem `href`). */
+  onPress?: TextProps['onPress'];
+};
+/** Link de texto na cor da marca, sempre sublinhado (a cor sozinha não distingue o link do texto). */
+export declare function Link({ className, href, onPress, ...props }: LinkProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=link.d.ts.map

package/dist/components/link/link.js

@@ -0,0 +1,20 @@
+import { cn } from "../../utils/cn.js";
+import { Linking, Text } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/link/link.tsx
+/** Link de texto na cor da marca, sempre sublinhado (a cor sozinha não distingue o link do texto). */
+function Link({ className, href, onPress, ...props }) {
+	return /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "link",
+		onPress: (event) => {
+			onPress?.(event);
+			if (href) Linking.openURL(href).catch(() => {});
+		},
+		className: cn("text-text-brand underline active:text-interactive-primary-hover", className),
+		...props
+	});
+}
+//#endregion
+export { Link };
+
+//# sourceMappingURL=link.js.map

package/dist/components/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","names":[],"sources":["../../../src/components/link/link.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { Linking, Text, type TextProps } from 'react-native'\nimport { cn } from '../../utils/cn'\n\nexport type LinkProps = Omit<TextProps, 'style' | 'onPress'> & {\n  className?: string\n  /** URL aberta com `Linking.openURL` ao tocar (depois de `onPress`). */\n  href?: string\n  /** Para navegar com o seu roteador, use só `onPress` (sem `href`). */\n  onPress?: TextProps['onPress']\n}\n\n/** Link de texto na cor da marca, sempre sublinhado (a cor sozinha não distingue o link do texto). */\nexport function Link({ className, href, onPress, ...props }: LinkProps) {\n  return (\n    <Text\n      accessibilityRole=\"link\"\n      onPress={(event) => {\n        onPress?.(event)\n        // URL inválida/sem app para abrir não deve virar rejeição não tratada\n        if (href) Linking.openURL(href).catch(() => {})\n      }}\n      className={cn('text-text-brand underline active:text-interactive-primary-hover', className)}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;AAcA,SAAgB,KAAK,EAAE,WAAW,MAAM,SAAS,GAAG,SAAoB;CACtE,OACE,oBAAC,MAAD;EACE,mBAAkB;EAClB,UAAU,UAAU;GAClB,UAAU,KAAK;GAEf,IAAI,MAAM,QAAQ,QAAQ,IAAI,CAAC,CAAC,YAAY,CAAC,CAAC;EAChD;EACA,WAAW,GAAG,mEAAmE,SAAS;EAC1F,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,2 @@
+import { List, ListItem, ListItemProps, ListProps } from "./list.js";
+export { List, ListItem, type ListItemProps, type ListProps };

package/dist/components/list/list.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+import { ViewProps } from "react-native";
+//#region src/components/list/list.d.ts
+export type ListProps = ViewProps & {
+  className?: string;
+  /** Linha entre os itens. */
+  divided?: boolean;
+};
+/** Lista vertical de itens com o mesmo formato (contatos, arquivos, configurações). */
+export declare function List({ className, divided, children, ...props }: ListProps): import("react").JSX.Element;
+export type ListItemProps = Omit<ViewProps, 'children'> & {
+  className?: string;
+  /** Título do item. */
+  title: string;
+  /** Texto de apoio abaixo do título. */
+  description?: string;
+  /** Elemento antes do texto (Avatar, ícone). */
+  leading?: ReactNode;
+  /** Elemento no fim da linha (Badge, Menu, botão). */
+  trailing?: ReactNode;
+  /** Conteúdo extra abaixo da descrição. */
+  children?: ReactNode;
+};
+export declare function ListItem({ className, title, description, leading, trailing, children, ...props }: ListItemProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=list.d.ts.map

package/dist/components/list/list.js

@@ -0,0 +1,45 @@
+import { cn } from "../../utils/cn.js";
+import { Divider } from "../divider/divider.js";
+import { Children, Fragment } from "react";
+import { Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/list/list.tsx
+/** Lista vertical de itens com o mesmo formato (contatos, arquivos, configurações). */
+function List({ className, divided = false, children, ...props }) {
+	const items = Children.toArray(children);
+	return /* @__PURE__ */ jsx(View, {
+		accessibilityRole: "list",
+		className: cn(className),
+		...props,
+		children: divided ? items.map((child, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(Divider, {}), child] }, i)) : children
+	});
+}
+function ListItem({ className, title, description, leading, trailing, children, ...props }) {
+	return /* @__PURE__ */ jsxs(View, {
+		role: "listitem",
+		className: cn("flex-row items-center gap-3 py-3", className),
+		...props,
+		children: [
+			leading,
+			/* @__PURE__ */ jsxs(View, {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						className: "text-sm font-medium leading-5 text-text-primary",
+						children: title
+					}),
+					description ? /* @__PURE__ */ jsx(Text, {
+						className: "text-sm leading-5 text-text-secondary",
+						children: description
+					}) : null,
+					children
+				]
+			}),
+			trailing
+		]
+	});
+}
+//#endregion
+export { List, ListItem };
+
+//# sourceMappingURL=list.js.map

package/dist/components/list/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","names":[],"sources":["../../../src/components/list/list.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { Children, Fragment, type ReactNode } from 'react'\nimport { Text, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { Divider } from '../divider/divider'\n\nexport type ListProps = ViewProps & {\n  className?: string\n  /** Linha entre os itens. */\n  divided?: boolean\n}\n\n/** Lista vertical de itens com o mesmo formato (contatos, arquivos, configurações). */\nexport function List({ className, divided = false, children, ...props }: ListProps) {\n  // sem `divide-y` no native: intercala um Divider entre os filhos\n  const items = Children.toArray(children)\n\n  return (\n    <View accessibilityRole=\"list\" className={cn(className)} {...props}>\n      {divided\n        ? items.map((child, i) => (\n            // biome-ignore lint/suspicious/noArrayIndexKey: lista estática de filhos já com key própria\n            <Fragment key={i}>\n              {i > 0 && <Divider />}\n              {child}\n            </Fragment>\n          ))\n        : children}\n    </View>\n  )\n}\n\nexport type ListItemProps = Omit<ViewProps, 'children'> & {\n  className?: string\n  /** Título do item. */\n  title: string\n  /** Texto de apoio abaixo do título. */\n  description?: string\n  /** Elemento antes do texto (Avatar, ícone). */\n  leading?: ReactNode\n  /** Elemento no fim da linha (Badge, Menu, botão). */\n  trailing?: ReactNode\n  /** Conteúdo extra abaixo da descrição. */\n  children?: ReactNode\n}\n\nexport function ListItem({\n  className,\n  title,\n  description,\n  leading,\n  trailing,\n  children,\n  ...props\n}: ListItemProps) {\n  return (\n    <View role=\"listitem\" className={cn('flex-row items-center gap-3 py-3', className)} {...props}>\n      {leading}\n      <View className=\"min-w-0 flex-1\">\n        <Text className=\"text-sm font-medium leading-5 text-text-primary\">{title}</Text>\n        {description ? (\n          <Text className=\"text-sm leading-5 text-text-secondary\">{description}</Text>\n        ) : null}\n        {children}\n      </View>\n      {trailing}\n    </View>\n  )\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,KAAK,EAAE,WAAW,UAAU,OAAO,UAAU,GAAG,SAAoB;CAElF,MAAM,QAAQ,SAAS,QAAQ,QAAQ;CAEvC,OACE,oBAAC,MAAD;EAAM,mBAAkB;EAAO,WAAW,GAAG,SAAS;EAAG,GAAI;EAC1D,UAAA,UACG,MAAM,KAAK,OAAO,MAEhB,qBAAC,UAAD,EAAA,UAAA,CACG,IAAI,KAAK,oBAAC,SAAD,CAAU,CAAA,GACnB,KACO,EAAA,GAHK,CAGL,CACX,IACD;CACA,CAAA;AAEV;AAgBA,SAAgB,SAAS,EACvB,WACA,OACA,aACA,SACA,UACA,UACA,GAAG,SACa;CAChB,OACE,qBAAC,MAAD;EAAM,MAAK;EAAW,WAAW,GAAG,oCAAoC,SAAS;EAAG,GAAI;EAAxF,UAAA;GACG;GACD,qBAAC,MAAD;IAAM,WAAU;IAAhB,UAAA;KACE,oBAAC,MAAD;MAAM,WAAU;MAAmD,UAAA;KAAY,CAAA;KAC9E,cACC,oBAAC,MAAD;MAAM,WAAU;MAAyC,UAAA;KAAkB,CAAA,IACzE;KACH;IACG;;GACL;EACG;;AAEV"}

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

@@ -0,0 +1,2 @@
+import { Menu, MenuItem, MenuItemProps, MenuLabel, MenuLabelProps, MenuProps, MenuSeparator, MenuSeparatorProps } from "./menu.js";
+export { Menu, MenuItem, type MenuItemProps, MenuLabel, type MenuLabelProps, type MenuProps, MenuSeparator, type MenuSeparatorProps };

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+import { PressableProps } from "react-native";
+//#region src/components/menu/menu.d.ts
+export type MenuProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Lado do gatilho em que o menu abre; inverte se não couber. Padrão: `bottom`. */
+  side?: 'top' | 'bottom';
+  /** Elemento que abre o menu (ex.: um `<Button>`); recebe `onPress`. */
+  trigger: ReactNode;
+  /** Os `MenuItem`, `MenuLabel` e `MenuSeparator` do menu. */
+  children: ReactNode;
+  className?: string;
+  testID?: string;
+};
+/**
+ * Menu de ações aberto por um botão, ancorado nele. Tocar num item o executa e fecha o menu;
+ * tocar fora ou o botão voltar do Android também fecha. Diferenças do web: sem navegação por
+ * teclado, sem `align` (alinha à esquerda do gatilho) e sem lados `left`/`right`.
+ */
+export declare function Menu({ open, defaultOpen, onOpenChange, side, trigger, children, className, testID }: MenuProps): import("react").JSX.Element;
+export type MenuItemProps = Omit<PressableProps, 'children' | 'style'> & {
+  /** Chamado ao escolher o item (antes de o menu fechar). Equivale ao `onSelect` do web. */
+  onSelect?: () => void;
+  /** Ícone à esquerda do rótulo (16px). */
+  icon?: ReactNode;
+  /** Ação que desfaz dados (excluir, remover): texto em vermelho. */
+  destructive?: boolean;
+  children: string;
+  className?: string;
+};
+/** Uma ação do menu. Usa `onSelect` (como o web); `onPress` também é chamado. */
+export declare function MenuItem({ className, icon, destructive, disabled, onSelect, onPress, children, accessibilityState, ...props }: MenuItemProps): import("react").JSX.Element;
+export type MenuLabelProps = {
+  children: string;
+  className?: string;
+};
+/** Título de um grupo de itens. */
+export declare function MenuLabel({ className, children }: MenuLabelProps): import("react").JSX.Element;
+export type MenuSeparatorProps = {
+  className?: string;
+};
+/** Linha entre grupos de itens. */
+export declare function MenuSeparator({ className }: MenuSeparatorProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=menu.d.ts.map

package/dist/components/menu/menu.js

@@ -0,0 +1,81 @@
+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 { createContext, useContext } from "react";
+import { Pressable, Text, View } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/menu/menu.tsx
+const CloseContext = createContext(null);
+/**
+* Menu de ações aberto por um botão, ancorado nele. Tocar num item o executa e fecha o menu;
+* tocar fora ou o botão voltar do Android também fecha. Diferenças do web: sem navegação por
+* teclado, sem `align` (alinha à esquerda do gatilho) e sem lados `left`/`right`.
+*/
+function Menu({ open, defaultOpen, onOpenChange, side = "bottom", trigger, children, className, testID }) {
+	const [isOpen, setOpen] = useOpenState({
+		open,
+		defaultOpen,
+		onOpenChange
+	});
+	const { ref, rect } = useControlledAnchor(isOpen);
+	const close = () => setOpen(false);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AnchorTrigger, {
+		anchorRef: ref,
+		event: "onPress",
+		onTrigger: () => setOpen(!isOpen),
+		children: trigger
+	}), /* @__PURE__ */ jsx(AnchoredOverlay, {
+		visible: isOpen,
+		rect,
+		onRequestClose: close,
+		placement: side,
+		testID,
+		className: cn("min-w-[180px] rounded-md border border-border-default bg-surface-elevated p-1 shadow-md", className),
+		children: /* @__PURE__ */ jsx(CloseContext.Provider, {
+			value: close,
+			children: /* @__PURE__ */ jsx(View, {
+				accessibilityRole: "menu",
+				children
+			})
+		})
+	})] });
+}
+/** Uma ação do menu. Usa `onSelect` (como o web); `onPress` também é chamado. */
+function MenuItem({ className, icon, destructive = false, disabled, onSelect, onPress, children, accessibilityState, ...props }) {
+	const close = useContext(CloseContext);
+	return /* @__PURE__ */ jsxs(Pressable, {
+		accessibilityRole: "menuitem",
+		accessibilityState: {
+			...accessibilityState,
+			disabled: Boolean(disabled)
+		},
+		disabled,
+		onPress: (event) => {
+			onPress?.(event);
+			onSelect?.();
+			close?.();
+		},
+		className: cn("flex-row items-center gap-2 rounded-sm px-3 py-2 active:bg-bg-tertiary", className),
+		...props,
+		children: [icon, /* @__PURE__ */ jsx(Text, {
+			className: cn("text-sm leading-5", disabled ? "text-text-disabled" : destructive ? "text-status-error-text" : "text-text-primary"),
+			children
+		})]
+	});
+}
+/** Título de um grupo de itens. */
+function MenuLabel({ className, children }) {
+	return /* @__PURE__ */ jsx(Text, {
+		className: cn("px-3 py-1.5 text-xs font-medium leading-4 text-text-secondary", className),
+		children
+	});
+}
+/** Linha entre grupos de itens. */
+function MenuSeparator({ className }) {
+	return /* @__PURE__ */ jsx(View, { className: cn("-mx-1 my-1 h-px bg-border-default", className) });
+}
+//#endregion
+export { Menu, MenuItem, MenuLabel, MenuSeparator };
+
+//# sourceMappingURL=menu.js.map

package/dist/components/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":[],"sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { createContext, type ReactNode, useContext } from 'react'\nimport { Pressable, type PressableProps, 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\nconst CloseContext = createContext<(() => void) | null>(null)\n\nexport type MenuProps = {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Lado do gatilho em que o menu abre; inverte se não couber. Padrão: `bottom`. */\n  side?: 'top' | 'bottom'\n  /** Elemento que abre o menu (ex.: um `<Button>`); recebe `onPress`. */\n  trigger: ReactNode\n  /** Os `MenuItem`, `MenuLabel` e `MenuSeparator` do menu. */\n  children: ReactNode\n  className?: string\n  testID?: string\n}\n\n/**\n * Menu de ações aberto por um botão, ancorado nele. Tocar num item o executa e fecha o menu;\n * tocar fora ou o botão voltar do Android também fecha. Diferenças do web: sem navegação por\n * teclado, sem `align` (alinha à esquerda do gatilho) e sem lados `left`/`right`.\n */\nexport function Menu({\n  open,\n  defaultOpen,\n  onOpenChange,\n  side = 'bottom',\n  trigger,\n  children,\n  className,\n  testID,\n}: MenuProps) {\n  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange })\n  const { ref, rect } = useControlledAnchor(isOpen)\n  const close = () => setOpen(false)\n\n  return (\n    <>\n      <AnchorTrigger anchorRef={ref} event=\"onPress\" onTrigger={() => setOpen(!isOpen)}>\n        {trigger}\n      </AnchorTrigger>\n      <AnchoredOverlay\n        visible={isOpen}\n        rect={rect}\n        onRequestClose={close}\n        placement={side}\n        testID={testID}\n        className={cn(\n          'min-w-[180px] rounded-md border border-border-default bg-surface-elevated p-1 shadow-md',\n          className,\n        )}\n      >\n        <CloseContext.Provider value={close}>\n          <View accessibilityRole=\"menu\">{children}</View>\n        </CloseContext.Provider>\n      </AnchoredOverlay>\n    </>\n  )\n}\n\nexport type MenuItemProps = Omit<PressableProps, 'children' | 'style'> & {\n  /** Chamado ao escolher o item (antes de o menu fechar). Equivale ao `onSelect` do web. */\n  onSelect?: () => void\n  /** Ícone à esquerda do rótulo (16px). */\n  icon?: ReactNode\n  /** Ação que desfaz dados (excluir, remover): texto em vermelho. */\n  destructive?: boolean\n  children: string\n  className?: string\n}\n\n/** Uma ação do menu. Usa `onSelect` (como o web); `onPress` também é chamado. */\nexport function MenuItem({\n  className,\n  icon,\n  destructive = false,\n  disabled,\n  onSelect,\n  onPress,\n  children,\n  accessibilityState,\n  ...props\n}: MenuItemProps) {\n  const close = useContext(CloseContext)\n\n  return (\n    <Pressable\n      accessibilityRole=\"menuitem\"\n      accessibilityState={{ ...accessibilityState, disabled: Boolean(disabled) }}\n      disabled={disabled}\n      onPress={(event) => {\n        onPress?.(event)\n        onSelect?.()\n        close?.()\n      }}\n      className={cn(\n        'flex-row items-center gap-2 rounded-sm px-3 py-2 active:bg-bg-tertiary',\n        className,\n      )}\n      {...props}\n    >\n      {icon}\n      <Text\n        className={cn(\n          'text-sm leading-5',\n          disabled\n            ? 'text-text-disabled'\n            : destructive\n              ? 'text-status-error-text'\n              : 'text-text-primary',\n        )}\n      >\n        {children}\n      </Text>\n    </Pressable>\n  )\n}\n\nexport type MenuLabelProps = { children: string; className?: string }\n\n/** Título de um grupo de itens. */\nexport function MenuLabel({ className, children }: MenuLabelProps) {\n  return (\n    <Text\n      className={cn('px-3 py-1.5 text-xs font-medium leading-4 text-text-secondary', className)}\n    >\n      {children}\n    </Text>\n  )\n}\n\nexport type MenuSeparatorProps = { className?: string }\n\n/** Linha entre grupos de itens. */\nexport function MenuSeparator({ className }: MenuSeparatorProps) {\n  return <View className={cn('-mx-1 my-1 h-px bg-border-default', className)} />\n}\n"],"mappings":";;;;;;;;AASA,MAAM,eAAe,cAAmC,IAAI;;;;;;AAqB5D,SAAgB,KAAK,EACnB,MACA,aACA,cACA,OAAO,UACP,SACA,UACA,WACA,UACY;CACZ,MAAM,CAAC,QAAQ,WAAW,aAAa;EAAE;EAAM;EAAa;CAAa,CAAC;CAC1E,MAAM,EAAE,KAAK,SAAS,oBAAoB,MAAM;CAChD,MAAM,cAAc,QAAQ,KAAK;CAEjC,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,eAAD;EAAe,WAAW;EAAK,OAAM;EAAU,iBAAiB,QAAQ,CAAC,MAAM;EAC5E,UAAA;CACY,CAAA,GACf,oBAAC,iBAAD;EACE,SAAS;EACH;EACN,gBAAgB;EAChB,WAAW;EACH;EACR,WAAW,GACT,2FACA,SACF;EAEA,UAAA,oBAAC,aAAa,UAAd;GAAuB,OAAO;GAC5B,UAAA,oBAAC,MAAD;IAAM,mBAAkB;IAAQ;GAAe,CAAA;EAC1B,CAAA;CACR,CAAA,CACjB,EAAA,CAAA;AAEN;;AAcA,SAAgB,SAAS,EACvB,WACA,MACA,cAAc,OACd,UACA,UACA,SACA,UACA,oBACA,GAAG,SACa;CAChB,MAAM,QAAQ,WAAW,YAAY;CAErC,OACE,qBAAC,WAAD;EACE,mBAAkB;EAClB,oBAAoB;GAAE,GAAG;GAAoB,UAAU,QAAQ,QAAQ;EAAE;EAC/D;EACV,UAAU,UAAU;GAClB,UAAU,KAAK;GACf,WAAW;GACX,QAAQ;EACV;EACA,WAAW,GACT,0EACA,SACF;EACA,GAAI;EAbN,UAAA,CAeG,MACD,oBAAC,MAAD;GACE,WAAW,GACT,qBACA,WACI,uBACA,cACE,2BACA,mBACR;GAEC;EACG,CAAA,CACG;;AAEf;;AAKA,SAAgB,UAAU,EAAE,WAAW,YAA4B;CACjE,OACE,oBAAC,MAAD;EACE,WAAW,GAAG,iEAAiE,SAAS;EAEvF;CACG,CAAA;AAEV;;AAKA,SAAgB,cAAc,EAAE,aAAiC;CAC/D,OAAO,oBAAC,MAAD,EAAM,WAAW,GAAG,qCAAqC,SAAS,EAAI,CAAA;AAC/E"}

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

@@ -0,0 +1,2 @@
+import { Modal, ModalClose, ModalProps } from "./modal.js";
+export { Modal, ModalClose, type ModalProps };