@innovui/react-native 0.0.0-stage → 0.1.0

package/dist/components/select/field-trigger.js

@@ -0,0 +1,90 @@
+import { cn } from "../../utils/cn.js";
+import { ChevronRightIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { Pressable, Text, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/select/field-trigger.tsx
+const triggerVariants = cva("w-full flex-row items-center justify-between gap-2 rounded-md border", {
+	variants: {
+		size: {
+			lg: "h-14 px-4",
+			md: "h-12 px-3",
+			sm: "h-10 px-2"
+		},
+		state: {
+			idle: "border-field-border bg-field-bg",
+			open: "border-field-focus-ring bg-field-bg",
+			error: "border-field-border-error bg-field-bg",
+			disabled: "border-field-border-disabled bg-field-bg-disabled",
+			readOnly: "border-transparent bg-field-bg-disabled"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		state: "idle"
+	}
+});
+const textVariants = cva("flex-1 text-base", { variants: { tone: {
+	value: "text-field-text",
+	placeholder: "text-field-text-placeholder",
+	disabled: "text-field-text-disabled"
+} } });
+function CalendarIcon({ color }) {
+	return /* @__PURE__ */ jsx(Svg, {
+		width: 20,
+		height: 20,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: color,
+		strokeWidth: 1.5,
+		children: /* @__PURE__ */ jsx(Path, {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			d: "M8 3v3M16 3v3M4 9h16M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"
+		})
+	});
+}
+/**
+* Gatilho com visual de Input para Select, Combobox, DatePicker e DateRangePicker (uso interno,
+* não faz parte da API pública). Sem hover/focus-visible no native: o estado aberto usa a cor do
+* anel de foco na borda.
+*/
+function FieldTrigger({ anchorRef, text, placeholder, icon, size, error, open, disabled, readOnly, onPress, className, accessibilityLabel, accessibilityHint, testID }) {
+	const iconColor = useToken("--color-field-text-placeholder");
+	const hasText = text !== void 0 && text !== null && text !== "";
+	return /* @__PURE__ */ jsx(View, {
+		ref: anchorRef,
+		collapsable: false,
+		className: "w-full",
+		children: /* @__PURE__ */ jsxs(Pressable, {
+			accessibilityRole: "combobox",
+			accessibilityLabel,
+			accessibilityHint,
+			accessibilityState: {
+				expanded: Boolean(open),
+				disabled: Boolean(disabled)
+			},
+			disabled,
+			onPress: readOnly ? void 0 : onPress,
+			testID,
+			className: cn(triggerVariants({
+				size,
+				state: disabled ? "disabled" : readOnly ? "readOnly" : open ? "open" : error ? "error" : "idle"
+			}), className),
+			children: [/* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				className: textVariants({ tone: disabled ? "disabled" : hasText ? "value" : "placeholder" }),
+				children: hasText ? text : placeholder
+			}), icon === "calendar" ? /* @__PURE__ */ jsx(CalendarIcon, { color: iconColor }) : /* @__PURE__ */ jsx(View, {
+				className: open ? "-rotate-90" : "rotate-90",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, { color: iconColor })
+			})]
+		})
+	});
+}
+//#endregion
+export { FieldTrigger };
+
+//# sourceMappingURL=field-trigger.js.map

package/dist/components/select/field-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-trigger.js","names":[],"sources":["../../../src/components/select/field-trigger.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva } from 'class-variance-authority'\nimport type { ReactNode, RefObject } from 'react'\nimport { Pressable, Text, View } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\nimport { cn } from '../../utils/cn'\nimport { ChevronRightIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\n\nexport type FieldSize = 'sm' | 'md' | 'lg'\n\nconst triggerVariants = cva(\n  'w-full flex-row items-center justify-between gap-2 rounded-md border',\n  {\n    variants: {\n      size: {\n        lg: 'h-14 px-4',\n        md: 'h-12 px-3',\n        sm: 'h-10 px-2',\n      },\n      state: {\n        idle: 'border-field-border bg-field-bg',\n        open: 'border-field-focus-ring bg-field-bg',\n        error: 'border-field-border-error bg-field-bg',\n        disabled: 'border-field-border-disabled bg-field-bg-disabled',\n        readOnly: 'border-transparent bg-field-bg-disabled',\n      },\n    },\n    defaultVariants: { size: 'md', state: 'idle' },\n  },\n)\n\nconst textVariants = cva('flex-1 text-base', {\n  variants: {\n    tone: {\n      value: 'text-field-text',\n      placeholder: 'text-field-text-placeholder',\n      disabled: 'text-field-text-disabled',\n    },\n  },\n})\n\nexport type FieldTriggerProps = {\n  /** Âncora medida por `useAnchor` (a View que envolve o gatilho). */\n  anchorRef?: RefObject<View>\n  /** Texto do valor; sem ele, mostra o placeholder. */\n  text?: ReactNode\n  placeholder: string\n  icon: 'chevron' | 'calendar'\n  size?: FieldSize\n  error?: boolean\n  open?: boolean\n  disabled?: boolean\n  readOnly?: boolean\n  onPress?: () => void\n  className?: string\n  accessibilityLabel?: string\n  accessibilityHint?: string\n  testID?: string\n}\n\nfunction CalendarIcon({ color }: { color?: string }) {\n  return (\n    <Svg width={20} height={20} viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth={1.5}>\n      <Path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M8 3v3M16 3v3M4 9h16M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z\"\n      />\n    </Svg>\n  )\n}\n\n/**\n * Gatilho com visual de Input para Select, Combobox, DatePicker e DateRangePicker (uso interno,\n * não faz parte da API pública). Sem hover/focus-visible no native: o estado aberto usa a cor do\n * anel de foco na borda.\n */\nexport function FieldTrigger({\n  anchorRef,\n  text,\n  placeholder,\n  icon,\n  size,\n  error,\n  open,\n  disabled,\n  readOnly,\n  onPress,\n  className,\n  accessibilityLabel,\n  accessibilityHint,\n  testID,\n}: FieldTriggerProps) {\n  const iconColor = useToken('--color-field-text-placeholder')\n  const hasText = text !== undefined && text !== null && text !== ''\n  const state = disabled\n    ? 'disabled'\n    : readOnly\n      ? 'readOnly'\n      : open\n        ? 'open'\n        : error\n          ? 'error'\n          : 'idle'\n\n  return (\n    <View ref={anchorRef} collapsable={false} className=\"w-full\">\n      <Pressable\n        accessibilityRole=\"combobox\"\n        accessibilityLabel={accessibilityLabel}\n        accessibilityHint={accessibilityHint}\n        accessibilityState={{ expanded: Boolean(open), disabled: Boolean(disabled) }}\n        disabled={disabled}\n        onPress={readOnly ? undefined : onPress}\n        testID={testID}\n        className={cn(triggerVariants({ size, state }), className)}\n      >\n        <Text\n          numberOfLines={1}\n          className={textVariants({\n            tone: disabled ? 'disabled' : hasText ? 'value' : 'placeholder',\n          })}\n        >\n          {hasText ? text : placeholder}\n        </Text>\n        {icon === 'calendar' ? (\n          <CalendarIcon color={iconColor} />\n        ) : (\n          <View className={open ? '-rotate-90' : 'rotate-90'}>\n            <ChevronRightIcon color={iconColor} />\n          </View>\n        )}\n      </Pressable>\n    </View>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,MAAM,kBAAkB,IACtB,wEACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,MAAM;GACN,MAAM;GACN,OAAO;GACP,UAAU;GACV,UAAU;EACZ;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO;CAAO;AAC/C,CACF;AAEA,MAAM,eAAe,IAAI,oBAAoB,EAC3C,UAAU,EACR,MAAM;CACJ,OAAO;CACP,aAAa;CACb,UAAU;AACZ,EACF,EACF,CAAC;AAqBD,SAAS,aAAa,EAAE,SAA6B;CACnD,OACE,oBAAC,KAAD;EAAK,OAAO;EAAI,QAAQ;EAAI,SAAQ;EAAY,MAAK;EAAO,QAAQ;EAAO,aAAa;EACtF,UAAA,oBAAC,MAAD;GACE,eAAc;GACd,gBAAe;GACf,GAAE;EACH,CAAA;CACE,CAAA;AAET;;;;;;AAOA,SAAgB,aAAa,EAC3B,WACA,MACA,aACA,MACA,MACA,OACA,MACA,UACA,UACA,SACA,WACA,oBACA,mBACA,UACoB;CACpB,MAAM,YAAY,SAAS,gCAAgC;CAC3D,MAAM,UAAU,SAAS,KAAA,KAAa,SAAS,QAAQ,SAAS;CAWhE,OACE,oBAAC,MAAD;EAAM,KAAK;EAAW,aAAa;EAAO,WAAU;EAClD,UAAA,qBAAC,WAAD;GACE,mBAAkB;GACE;GACD;GACnB,oBAAoB;IAAE,UAAU,QAAQ,IAAI;IAAG,UAAU,QAAQ,QAAQ;GAAE;GACjE;GACV,SAAS,WAAW,KAAA,IAAY;GACxB;GACR,WAAW,GAAG,gBAAgB;IAAE;IAAM,OApB9B,WACV,aACA,WACE,aACA,OACE,SACA,QACE,UACA;GAYwC,CAAC,GAAG,SAAS;GAR3D,UAAA,CAUE,oBAAC,MAAD;IACE,eAAe;IACf,WAAW,aAAa,EACtB,MAAM,WAAW,aAAa,UAAU,UAAU,cACpD,CAAC;IAEA,UAAA,UAAU,OAAO;GACd,CAAA,GACL,SAAS,aACR,oBAAC,cAAD,EAAc,OAAO,UAAY,CAAA,IAEjC,oBAAC,MAAD;IAAM,WAAW,OAAO,eAAe;IACrC,UAAA,oBAAC,kBAAD,EAAkB,OAAO,UAAY,CAAA;GACjC,CAAA,CAEC;;CACP,CAAA;AAEV"}

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

@@ -0,0 +1,2 @@
+import { Select, SelectOption, SelectOptionProps, SelectProps } from "./select.js";
+export { Select, SelectOption, type SelectOptionProps, type SelectProps };

package/dist/components/select/select.d.ts

@@ -0,0 +1,35 @@
+import { FieldSize } from "./field-trigger.js";
+import { ReactNode } from "react";
+//#region src/components/select/select.d.ts
+export type SelectProps = {
+  /** Opções: um ou mais `<SelectOption>`. */
+  children: ReactNode;
+  placeholder?: string;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  /** Mostra o valor mas nunca abre a lista, como um `<TextInput editable={false}>`. */
+  readOnly?: boolean;
+  error?: boolean;
+  size?: FieldSize;
+  className?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  testID?: string;
+};
+export type SelectOptionProps = {
+  value: string;
+  disabled?: boolean;
+  children: ReactNode;
+};
+/**
+ * Campo de escolha única. Toque no gatilho abre a lista numa camada ancorada (largura do gatilho,
+ * rolável). Diferenças do web: sem navegação por teclado, sem `name`/`required`/`id` (não há
+ * formulário nativo).
+ */
+export declare function Select({ children, placeholder, value, defaultValue, onValueChange, size, error, disabled, readOnly, className, accessibilityLabel, accessibilityHint, testID }: SelectProps): import("react").JSX.Element;
+/** Opção da lista do Select. O `children` é o rótulo mostrado na lista e no gatilho. */
+export declare function SelectOption({ value, disabled, children }: SelectOptionProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=select.d.ts.map

package/dist/components/select/select.js

@@ -0,0 +1,98 @@
+import { cn } from "../../utils/cn.js";
+import { CheckIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { AnchoredOverlay, useAnchor } from "../_shared/anchored-overlay.js";
+import { FieldTrigger } from "./field-trigger.js";
+import { Children, createContext, isValidElement, useContext, useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/select/select.tsx
+const SelectContext = createContext({
+	value: void 0,
+	onSelect: () => {}
+});
+function findLabel(children, value) {
+	for (const child of Children.toArray(children)) {
+		if (!isValidElement(child)) continue;
+		const element = child;
+		if (element.type === SelectOption && element.props.value === value) return element.props.children;
+		const nested = findLabel(element.props.children, value);
+		if (nested !== void 0) return nested;
+	}
+}
+/**
+* Campo de escolha única. Toque no gatilho abre a lista numa camada ancorada (largura do gatilho,
+* rolável). Diferenças do web: sem navegação por teclado, sem `name`/`required`/`id` (não há
+* formulário nativo).
+*/
+function Select({ children, placeholder = "Selecione...", value, defaultValue, onValueChange, size, error, disabled, readOnly = false, className, accessibilityLabel, accessibilityHint, testID }) {
+	const [inner, setInner] = useState(defaultValue);
+	const selected = value ?? inner;
+	const anchor = useAnchor();
+	const open = anchor.visible && !disabled && !readOnly;
+	function onSelect(next) {
+		if (value === void 0) setInner(next);
+		onValueChange?.(next);
+		anchor.close();
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldTrigger, {
+		anchorRef: anchor.ref,
+		icon: "chevron",
+		text: selected === void 0 ? void 0 : findLabel(children, selected),
+		placeholder,
+		size,
+		error,
+		open,
+		disabled,
+		readOnly,
+		onPress: anchor.open,
+		className,
+		accessibilityLabel,
+		accessibilityHint,
+		testID
+	}), /* @__PURE__ */ jsx(AnchoredOverlay, {
+		visible: open,
+		rect: anchor.rect,
+		onRequestClose: anchor.close,
+		matchAnchorWidth: true,
+		testID: testID ? `${testID}-list` : void 0,
+		className: "overflow-hidden rounded-md border border-select-dropdown-border bg-select-dropdown-bg p-1 shadow-md",
+		children: /* @__PURE__ */ jsx(SelectContext.Provider, {
+			value: {
+				value: selected,
+				onSelect
+			},
+			children: /* @__PURE__ */ jsx(ScrollView, {
+				className: "max-h-60",
+				children
+			})
+		})
+	})] });
+}
+/** Opção da lista do Select. O `children` é o rótulo mostrado na lista e no gatilho. */
+function SelectOption({ value, disabled, children }) {
+	const ctx = useContext(SelectContext);
+	const selected = ctx.value === value;
+	const checkColor = useToken("--color-select-option-text");
+	return /* @__PURE__ */ jsxs(Pressable, {
+		role: "option",
+		accessibilityState: {
+			selected,
+			disabled: Boolean(disabled)
+		},
+		disabled,
+		onPress: () => ctx.onSelect(value),
+		className: cn("flex-row items-center gap-2 rounded-sm px-3 py-2 active:bg-select-option-bg-hover", selected && "bg-select-option-bg-selected"),
+		children: [/* @__PURE__ */ jsx(Text, {
+			className: cn("flex-1 text-base text-select-option-text", disabled && "text-select-option-text-disabled"),
+			children
+		}), selected ? /* @__PURE__ */ jsx(View, {
+			className: "size-4 items-center justify-center",
+			children: /* @__PURE__ */ jsx(CheckIcon, { color: checkColor })
+		}) : null]
+	});
+}
+//#endregion
+export { Select, SelectOption };
+
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":[],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from 'react'\nimport { Pressable, ScrollView, Text, View } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { AnchoredOverlay, useAnchor } from '../_shared/anchored-overlay'\nimport { CheckIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\nimport { type FieldSize, FieldTrigger } from './field-trigger'\n\ntype SelectContextValue = { value: string | undefined; onSelect: (value: string) => void }\nconst SelectContext = createContext<SelectContextValue>({ value: undefined, onSelect: () => {} })\n\nexport type SelectProps = {\n  /** Opções: um ou mais `<SelectOption>`. */\n  children: ReactNode\n  placeholder?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n  /** Mostra o valor mas nunca abre a lista, como um `<TextInput editable={false}>`. */\n  readOnly?: boolean\n  error?: boolean\n  size?: FieldSize\n  className?: string\n  accessibilityLabel?: string\n  accessibilityHint?: string\n  testID?: string\n}\n\nexport type SelectOptionProps = {\n  value: string\n  disabled?: boolean\n  children: ReactNode\n}\n\n// Procura o rótulo da opção escolhida nos filhos (inclusive dentro de Fragments).\nfunction findLabel(children: ReactNode, value: string | undefined): ReactNode | undefined {\n  for (const child of Children.toArray(children)) {\n    if (!isValidElement(child)) continue\n    const element = child as ReactElement<{ value?: string; children?: ReactNode }>\n    if (element.type === SelectOption && element.props.value === value)\n      return element.props.children\n    const nested = findLabel(element.props.children, value)\n    if (nested !== undefined) return nested\n  }\n  return undefined\n}\n\n/**\n * Campo de escolha única. Toque no gatilho abre a lista numa camada ancorada (largura do gatilho,\n * rolável). Diferenças do web: sem navegação por teclado, sem `name`/`required`/`id` (não há\n * formulário nativo).\n */\nexport function Select({\n  children,\n  placeholder = 'Selecione...',\n  value,\n  defaultValue,\n  onValueChange,\n  size,\n  error,\n  disabled,\n  readOnly = false,\n  className,\n  accessibilityLabel,\n  accessibilityHint,\n  testID,\n}: SelectProps) {\n  const [inner, setInner] = useState(defaultValue)\n  const selected = value ?? inner\n  const anchor = useAnchor()\n  const open = anchor.visible && !disabled && !readOnly\n\n  function onSelect(next: string) {\n    if (value === undefined) setInner(next)\n    onValueChange?.(next)\n    anchor.close()\n  }\n\n  return (\n    <>\n      <FieldTrigger\n        anchorRef={anchor.ref}\n        icon=\"chevron\"\n        text={selected === undefined ? undefined : findLabel(children, selected)}\n        placeholder={placeholder}\n        size={size}\n        error={error}\n        open={open}\n        disabled={disabled}\n        readOnly={readOnly}\n        onPress={anchor.open}\n        className={className}\n        accessibilityLabel={accessibilityLabel}\n        accessibilityHint={accessibilityHint}\n        testID={testID}\n      />\n      <AnchoredOverlay\n        visible={open}\n        rect={anchor.rect}\n        onRequestClose={anchor.close}\n        matchAnchorWidth\n        testID={testID ? `${testID}-list` : undefined}\n        className=\"overflow-hidden rounded-md border border-select-dropdown-border bg-select-dropdown-bg p-1 shadow-md\"\n      >\n        <SelectContext.Provider value={{ value: selected, onSelect }}>\n          <ScrollView className=\"max-h-60\">{children}</ScrollView>\n        </SelectContext.Provider>\n      </AnchoredOverlay>\n    </>\n  )\n}\n\n/** Opção da lista do Select. O `children` é o rótulo mostrado na lista e no gatilho. */\nexport function SelectOption({ value, disabled, children }: SelectOptionProps) {\n  const ctx = useContext(SelectContext)\n  const selected = ctx.value === value\n  const checkColor = useToken('--color-select-option-text')\n\n  return (\n    <Pressable\n      role=\"option\"\n      accessibilityState={{ selected, disabled: Boolean(disabled) }}\n      disabled={disabled}\n      onPress={() => ctx.onSelect(value)}\n      className={cn(\n        'flex-row items-center gap-2 rounded-sm px-3 py-2 active:bg-select-option-bg-hover',\n        selected && 'bg-select-option-bg-selected',\n      )}\n    >\n      <Text\n        className={cn(\n          'flex-1 text-base text-select-option-text',\n          disabled && 'text-select-option-text-disabled',\n        )}\n      >\n        {children}\n      </Text>\n      {selected ? (\n        <View className=\"size-4 items-center justify-center\">\n          <CheckIcon color={checkColor} />\n        </View>\n      ) : null}\n    </Pressable>\n  )\n}\n"],"mappings":";;;;;;;;;AAmBA,MAAM,gBAAgB,cAAkC;CAAE,OAAO,KAAA;CAAW,gBAAgB,CAAC;AAAE,CAAC;AA2BhG,SAAS,UAAU,UAAqB,OAAkD;CACxF,KAAK,MAAM,SAAS,SAAS,QAAQ,QAAQ,GAAG;EAC9C,IAAI,CAAC,eAAe,KAAK,GAAG;EAC5B,MAAM,UAAU;EAChB,IAAI,QAAQ,SAAS,gBAAgB,QAAQ,MAAM,UAAU,OAC3D,OAAO,QAAQ,MAAM;EACvB,MAAM,SAAS,UAAU,QAAQ,MAAM,UAAU,KAAK;EACtD,IAAI,WAAW,KAAA,GAAW,OAAO;CACnC;AAEF;;;;;;AAOA,SAAgB,OAAO,EACrB,UACA,cAAc,gBACd,OACA,cACA,eACA,MACA,OACA,UACA,WAAW,OACX,WACA,oBACA,mBACA,UACc;CACd,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,WAAW,SAAS;CAC1B,MAAM,SAAS,UAAU;CACzB,MAAM,OAAO,OAAO,WAAW,CAAC,YAAY,CAAC;CAE7C,SAAS,SAAS,MAAc;EAC9B,IAAI,UAAU,KAAA,GAAW,SAAS,IAAI;EACtC,gBAAgB,IAAI;EACpB,OAAO,MAAM;CACf;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACE,WAAW,OAAO;EAClB,MAAK;EACL,MAAM,aAAa,KAAA,IAAY,KAAA,IAAY,UAAU,UAAU,QAAQ;EAC1D;EACP;EACC;EACD;EACI;EACA;EACV,SAAS,OAAO;EACL;EACS;EACD;EACX;CACT,CAAA,GACD,oBAAC,iBAAD;EACE,SAAS;EACT,MAAM,OAAO;EACb,gBAAgB,OAAO;EACvB,kBAAA;EACA,QAAQ,SAAS,GAAG,OAAO,SAAS,KAAA;EACpC,WAAU;EAEV,UAAA,oBAAC,cAAc,UAAf;GAAwB,OAAO;IAAE,OAAO;IAAU;GAAS;GACzD,UAAA,oBAAC,YAAD;IAAY,WAAU;IAAY;GAAqB,CAAA;EACjC,CAAA;CACT,CAAA,CACjB,EAAA,CAAA;AAEN;;AAGA,SAAgB,aAAa,EAAE,OAAO,UAAU,YAA+B;CAC7E,MAAM,MAAM,WAAW,aAAa;CACpC,MAAM,WAAW,IAAI,UAAU;CAC/B,MAAM,aAAa,SAAS,4BAA4B;CAExD,OACE,qBAAC,WAAD;EACE,MAAK;EACL,oBAAoB;GAAE;GAAU,UAAU,QAAQ,QAAQ;EAAE;EAClD;EACV,eAAe,IAAI,SAAS,KAAK;EACjC,WAAW,GACT,qFACA,YAAY,8BACd;EARF,UAAA,CAUE,oBAAC,MAAD;GACE,WAAW,GACT,4CACA,YAAY,kCACd;GAEC;EACG,CAAA,GACL,WACC,oBAAC,MAAD;GAAM,WAAU;GACd,UAAA,oBAAC,WAAD,EAAW,OAAO,WAAa,CAAA;EAC3B,CAAA,IACJ,IACK;;AAEf"}

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

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonProps } from "./skeleton.js";
+export { Skeleton, type SkeletonProps };

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,17 @@
+import { ViewProps } from "react-native";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/skeleton/skeleton.d.ts
+declare const skeletonVariants: (props?: ({
+  variant?: "avatar" | "card" | "rectangle" | "text" | "title" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SkeletonProps = Omit<ViewProps, 'children'> & VariantProps<typeof skeletonVariants> & {
+  className?: string;
+};
+/**
+ * Placeholder de conteúdo em carregamento. É decorativo (escondido do leitor de tela): anuncie o
+ * carregamento no contêiner, com `accessibilityState={{ busy: true }}`. Para ações pontuais, use
+ * Spinner. Não respeita "reduzir movimento" (a web faz via `motion-reduce`).
+ */
+export declare function Skeleton({ className, variant, ...props }: SkeletonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,53 @@
+import { cn } from "../../utils/cn.js";
+import { useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/skeleton/skeleton.tsx
+const skeletonVariants = cva("overflow-hidden", {
+	variants: { variant: {
+		text: "h-3 w-[200px] rounded-sm",
+		title: "h-5 w-[160px] rounded-sm",
+		avatar: "size-10 rounded-full",
+		card: "h-[120px] w-[300px] rounded-md",
+		rectangle: "h-6 w-[200px] rounded-md"
+	} },
+	defaultVariants: { variant: "text" }
+});
+/**
+* Placeholder de conteúdo em carregamento. É decorativo (escondido do leitor de tela): anuncie o
+* carregamento no contêiner, com `accessibilityState={{ busy: true }}`. Para ações pontuais, use
+* Spinner. Não respeita "reduzir movimento" (a web faz via `motion-reduce`).
+*/
+function Skeleton({ className, variant, ...props }) {
+	const opacity = useRef(new Animated.Value(1)).current;
+	useEffect(() => {
+		const loop = Animated.loop(Animated.sequence([Animated.timing(opacity, {
+			toValue: .5,
+			duration: 1e3,
+			easing: Easing.inOut(Easing.ease),
+			useNativeDriver: true
+		}), Animated.timing(opacity, {
+			toValue: 1,
+			duration: 1e3,
+			easing: Easing.inOut(Easing.ease),
+			useNativeDriver: true
+		})]));
+		loop.start();
+		return () => loop.stop();
+	}, [opacity]);
+	return /* @__PURE__ */ jsx(View, {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no-hide-descendants",
+		className: cn(skeletonVariants({ variant }), className),
+		...props,
+		children: /* @__PURE__ */ jsx(Animated.View, {
+			style: [StyleSheet.absoluteFill, { opacity }],
+			children: /* @__PURE__ */ jsx(View, { className: "size-full bg-bg-skeleton" })
+		})
+	});
+}
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { useEffect, useRef } from 'react'\nimport { Animated, Easing, StyleSheet, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\n\n// Dimensões padrão do Figma; sobrescreva com className (ex.: `w-full`) para casar com o conteúdo real.\nconst skeletonVariants = cva('overflow-hidden', {\n  variants: {\n    variant: {\n      text: 'h-3 w-[200px] rounded-sm',\n      title: 'h-5 w-[160px] rounded-sm',\n      avatar: 'size-10 rounded-full',\n      card: 'h-[120px] w-[300px] rounded-md',\n      rectangle: 'h-6 w-[200px] rounded-md',\n    },\n  },\n  defaultVariants: { variant: 'text' },\n})\n\nexport type SkeletonProps = Omit<ViewProps, 'children'> &\n  VariantProps<typeof skeletonVariants> & {\n    className?: string\n  }\n\n/**\n * Placeholder de conteúdo em carregamento. É decorativo (escondido do leitor de tela): anuncie o\n * carregamento no contêiner, com `accessibilityState={{ busy: true }}`. Para ações pontuais, use\n * Spinner. Não respeita \"reduzir movimento\" (a web faz via `motion-reduce`).\n */\nexport function Skeleton({ className, variant, ...props }: SkeletonProps) {\n  const opacity = useRef(new Animated.Value(1)).current\n\n  useEffect(() => {\n    const loop = Animated.loop(\n      Animated.sequence([\n        Animated.timing(opacity, {\n          toValue: 0.5,\n          duration: 1000,\n          easing: Easing.inOut(Easing.ease),\n          useNativeDriver: true,\n        }),\n        Animated.timing(opacity, {\n          toValue: 1,\n          duration: 1000,\n          easing: Easing.inOut(Easing.ease),\n          useNativeDriver: true,\n        }),\n      ]),\n    )\n    loop.start()\n    return () => loop.stop()\n  }, [opacity])\n\n  return (\n    <View\n      accessibilityElementsHidden\n      importantForAccessibility=\"no-hide-descendants\"\n      className={cn(skeletonVariants({ variant }), className)}\n      {...props}\n    >\n      {/* O Animated não recebe className: só pulsa; o visual fica no View de dentro. */}\n      <Animated.View style={[StyleSheet.absoluteFill, { opacity }]}>\n        <View className=\"size-full bg-bg-skeleton\" />\n      </Animated.View>\n    </View>\n  )\n}\n"],"mappings":";;;;;;AAQA,MAAM,mBAAmB,IAAI,mBAAmB;CAC9C,UAAU,EACR,SAAS;EACP,MAAM;EACN,OAAO;EACP,QAAQ;EACR,MAAM;EACN,WAAW;CACb,EACF;CACA,iBAAiB,EAAE,SAAS,OAAO;AACrC,CAAC;;;;;;AAYD,SAAgB,SAAS,EAAE,WAAW,SAAS,GAAG,SAAwB;CACxE,MAAM,UAAU,OAAO,IAAI,SAAS,MAAM,CAAC,CAAC,CAAC,CAAC;CAE9C,gBAAgB;EACd,MAAM,OAAO,SAAS,KACpB,SAAS,SAAS,CAChB,SAAS,OAAO,SAAS;GACvB,SAAS;GACT,UAAU;GACV,QAAQ,OAAO,MAAM,OAAO,IAAI;GAChC,iBAAiB;EACnB,CAAC,GACD,SAAS,OAAO,SAAS;GACvB,SAAS;GACT,UAAU;GACV,QAAQ,OAAO,MAAM,OAAO,IAAI;GAChC,iBAAiB;EACnB,CAAC,CACH,CAAC,CACH;EACA,KAAK,MAAM;EACX,aAAa,KAAK,KAAK;CACzB,GAAG,CAAC,OAAO,CAAC;CAEZ,OACE,oBAAC,MAAD;EACE,6BAAA;EACA,2BAA0B;EAC1B,WAAW,GAAG,iBAAiB,EAAE,QAAQ,CAAC,GAAG,SAAS;EACtD,GAAI;EAGJ,UAAA,oBAAC,SAAS,MAAV;GAAe,OAAO,CAAC,WAAW,cAAc,EAAE,QAAQ,CAAC;GACzD,UAAA,oBAAC,MAAD,EAAM,WAAU,2BAA4B,CAAA;EAC/B,CAAA;CACX,CAAA;AAEV"}

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

@@ -0,0 +1,2 @@
+import { Slider, SliderProps } from "./slider.js";
+export { Slider, type SliderProps };

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,26 @@
+import { ViewProps } from "react-native";
+//#region src/components/slider/slider.d.ts
+export type SliderProps = Omit<ViewProps, 'children' | 'style'> & {
+  className?: string;
+  /** Controlado: `[40]` para um valor, `[20, 80]` para um intervalo. */
+  value?: number[];
+  defaultValue?: number[];
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  /** Chamado durante o arraste, a cada mudança de valor. */
+  onValueChange?: (value: number[]) => void;
+  /** Chamado ao soltar a alça (ou após uma ação de acessibilidade). */
+  onValueCommit?: (value: number[]) => void;
+  /** Nome acessível de cada alça, na ordem. Padrão: `accessibilityLabel` (com o número, se houver várias). */
+  thumbLabels?: string[];
+};
+/**
+ * Escolhe um número (ou um intervalo, com dois valores) arrastando a alça ou tocando na barra.
+ * No native cada alça é um elemento "adjustable": o leitor de tela ajusta com deslizar para
+ * cima/baixo (ações increment/decrement) em vez das setas do teclado.
+ */
+export declare function Slider({ className, value, defaultValue, min, max, step, disabled, onValueChange, onValueCommit, thumbLabels, accessibilityLabel, accessibilityState, ...props }: SliderProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=slider.d.ts.map

package/dist/components/slider/slider.js

@@ -0,0 +1,102 @@
+import { cn } from "../../utils/cn.js";
+import { useRef, useState } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/slider/slider.tsx
+const THUMB = 20;
+const clamp = (n, lo, hi) => Math.min(Math.max(n, lo), hi);
+/**
+* Escolhe um número (ou um intervalo, com dois valores) arrastando a alça ou tocando na barra.
+* No native cada alça é um elemento "adjustable": o leitor de tela ajusta com deslizar para
+* cima/baixo (ações increment/decrement) em vez das setas do teclado.
+*/
+function Slider({ className, value, defaultValue, min = 0, max = 100, step = 1, disabled = false, onValueChange, onValueCommit, thumbLabels, accessibilityLabel, accessibilityState, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue ?? [min]);
+	const values = value ?? uncontrolled;
+	const [width, setWidth] = useState(0);
+	const active = useRef(0);
+	const latest = useRef(values);
+	latest.current = values;
+	const count = values.length;
+	const usable = Math.max(width - THUMB, 1);
+	const range = max - min || 1;
+	const toPos = (v) => (clamp(v, min, max) - min) / range * usable;
+	const snap = (raw) => {
+		const stepped = min + Math.round((raw - min) / step) * step;
+		return clamp(Number(stepped.toFixed(10)), min, max);
+	};
+	const update = (index, raw) => {
+		const current = latest.current;
+		const lo = (index > 0 ? current[index - 1] : void 0) ?? min;
+		const hi = (index < current.length - 1 ? current[index + 1] : void 0) ?? max;
+		const next = clamp(snap(raw), lo, hi);
+		if (next === current[index]) return;
+		const nextValues = current.map((v, i) => i === index ? next : v);
+		latest.current = nextValues;
+		setUncontrolled(nextValues);
+		onValueChange?.(nextValues);
+	};
+	const valueAt = (x) => min + clamp(x - THUMB / 2, 0, usable) / usable * range;
+	const onGrant = (event) => {
+		const raw = valueAt(event.nativeEvent.locationX);
+		const current = latest.current;
+		let nearest = 0;
+		current.forEach((v, i) => {
+			if (Math.abs(v - raw) <= Math.abs((current[nearest] ?? min) - raw)) nearest = i;
+		});
+		active.current = nearest;
+		update(nearest, raw);
+	};
+	const onAction = (index) => (event) => {
+		const dir = event.nativeEvent.actionName === "increment" ? 1 : -1;
+		update(index, (latest.current[index] ?? min) + dir * step);
+		onValueCommit?.(latest.current);
+	};
+	const labelFor = (i) => thumbLabels?.[i] ?? (count > 1 && accessibilityLabel ? `${accessibilityLabel} ${i + 1}` : accessibilityLabel);
+	const start = count > 1 ? toPos(values[0] ?? min) : 0;
+	const end = toPos(values[count - 1] ?? min);
+	return /* @__PURE__ */ jsxs(View, {
+		onLayout: (e) => setWidth(e.nativeEvent.layout.width),
+		onStartShouldSetResponder: () => !disabled,
+		onMoveShouldSetResponder: () => !disabled,
+		onResponderTerminationRequest: () => false,
+		onResponderGrant: onGrant,
+		onResponderMove: (e) => update(active.current, valueAt(e.nativeEvent.locationX)),
+		onResponderRelease: () => onValueCommit?.(latest.current),
+		className: cn("h-11 w-full justify-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(View, {
+			pointerEvents: "none",
+			className: "h-1.5 w-full rounded-full bg-border-default",
+			children: /* @__PURE__ */ jsx(View, {
+				className: cn("absolute h-full rounded-full bg-interactive-primary", disabled && "bg-interactive-disabled"),
+				style: {
+					left: start + THUMB / 2,
+					width: end - start
+				}
+			})
+		}), values.map((v, i) => /* @__PURE__ */ jsx(View, {
+			pointerEvents: "none",
+			accessible: true,
+			accessibilityRole: "adjustable",
+			accessibilityLabel: labelFor(i),
+			accessibilityValue: {
+				min,
+				max,
+				now: v
+			},
+			accessibilityState: {
+				...accessibilityState,
+				disabled
+			},
+			accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+			onAccessibilityAction: disabled ? void 0 : onAction(i),
+			className: cn("absolute top-3 size-5 rounded-full border-2 border-interactive-primary bg-bg-primary shadow-sm", disabled && "border-interactive-disabled"),
+			style: { left: toPos(v) }
+		}, i))]
+	});
+}
+//#endregion
+export { Slider };
+
+//# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":[],"sources":["../../../src/components/slider/slider.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { useRef, useState } from 'react'\nimport {\n  type AccessibilityActionEvent,\n  type GestureResponderEvent,\n  type LayoutChangeEvent,\n  View,\n  type ViewProps,\n} from 'react-native'\nimport { cn } from '../../utils/cn'\n\nexport type SliderProps = Omit<ViewProps, 'children' | 'style'> & {\n  className?: string\n  /** Controlado: `[40]` para um valor, `[20, 80]` para um intervalo. */\n  value?: number[]\n  defaultValue?: number[]\n  min?: number\n  max?: number\n  step?: number\n  disabled?: boolean\n  /** Chamado durante o arraste, a cada mudança de valor. */\n  onValueChange?: (value: number[]) => void\n  /** Chamado ao soltar a alça (ou após uma ação de acessibilidade). */\n  onValueCommit?: (value: number[]) => void\n  /** Nome acessível de cada alça, na ordem. Padrão: `accessibilityLabel` (com o número, se houver várias). */\n  thumbLabels?: string[]\n}\n\nconst THUMB = 20\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi)\n\n/**\n * Escolhe um número (ou um intervalo, com dois valores) arrastando a alça ou tocando na barra.\n * No native cada alça é um elemento \"adjustable\": o leitor de tela ajusta com deslizar para\n * cima/baixo (ações increment/decrement) em vez das setas do teclado.\n */\nexport function Slider({\n  className,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  onValueChange,\n  onValueCommit,\n  thumbLabels,\n  accessibilityLabel,\n  accessibilityState,\n  ...props\n}: SliderProps) {\n  const [uncontrolled, setUncontrolled] = useState<number[]>(defaultValue ?? [min])\n  const values = value ?? uncontrolled\n  const [width, setWidth] = useState(0)\n  const active = useRef(0)\n  // O arraste lê o valor mais recente sem depender de closures antigas.\n  const latest = useRef(values)\n  latest.current = values\n\n  const count = values.length\n  const usable = Math.max(width - THUMB, 1)\n  const range = max - min || 1\n  const toPos = (v: number) => ((clamp(v, min, max) - min) / range) * usable\n\n  const snap = (raw: number) => {\n    const stepped = min + Math.round((raw - min) / step) * step\n    // Evita lixo de ponto flutuante (0.1 + 0.2).\n    return clamp(Number(stepped.toFixed(10)), min, max)\n  }\n\n  const update = (index: number, raw: number) => {\n    const current = latest.current\n    // A alça não passa das vizinhas.\n    const lo = (index > 0 ? current[index - 1] : undefined) ?? min\n    const hi = (index < current.length - 1 ? current[index + 1] : undefined) ?? max\n    const next = clamp(snap(raw), lo, hi)\n    if (next === current[index]) return\n    const nextValues = current.map((v, i) => (i === index ? next : v))\n    latest.current = nextValues\n    setUncontrolled(nextValues)\n    onValueChange?.(nextValues)\n  }\n\n  const valueAt = (x: number) => min + (clamp(x - THUMB / 2, 0, usable) / usable) * range\n\n  const onGrant = (event: GestureResponderEvent) => {\n    const raw = valueAt(event.nativeEvent.locationX)\n    const current = latest.current\n    // Alça mais próxima do toque; em empate, a de cima (permite abrir um intervalo colapsado).\n    let nearest = 0\n    current.forEach((v, i) => {\n      if (Math.abs(v - raw) <= Math.abs((current[nearest] ?? min) - raw)) nearest = i\n    })\n    active.current = nearest\n    update(nearest, raw)\n  }\n\n  const onAction = (index: number) => (event: AccessibilityActionEvent) => {\n    const dir = event.nativeEvent.actionName === 'increment' ? 1 : -1\n    update(index, (latest.current[index] ?? min) + dir * step)\n    onValueCommit?.(latest.current)\n  }\n\n  const labelFor = (i: number) =>\n    thumbLabels?.[i] ??\n    (count > 1 && accessibilityLabel ? `${accessibilityLabel} ${i + 1}` : accessibilityLabel)\n\n  const start = count > 1 ? toPos(values[0] ?? min) : 0\n  const end = toPos(values[count - 1] ?? min)\n\n  return (\n    <View\n      onLayout={(e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width)}\n      onStartShouldSetResponder={() => !disabled}\n      onMoveShouldSetResponder={() => !disabled}\n      onResponderTerminationRequest={() => false}\n      onResponderGrant={onGrant}\n      onResponderMove={(e) => update(active.current, valueAt(e.nativeEvent.locationX))}\n      onResponderRelease={() => onValueCommit?.(latest.current)}\n      className={cn('h-11 w-full justify-center', className)}\n      {...props}\n    >\n      {/* Filhos ignoram toques para que `locationX` seja sempre relativo à raiz. */}\n      <View pointerEvents=\"none\" className=\"h-1.5 w-full rounded-full bg-border-default\">\n        <View\n          className={cn(\n            'absolute h-full rounded-full bg-interactive-primary',\n            disabled && 'bg-interactive-disabled',\n          )}\n          style={{ left: start + THUMB / 2, width: end - start }}\n        />\n      </View>\n      {values.map((v, i) => (\n        <View\n          // biome-ignore lint/suspicious/noArrayIndexKey: as alças são posicionais e a ordem nunca muda\n          key={i}\n          pointerEvents=\"none\"\n          accessible\n          accessibilityRole=\"adjustable\"\n          accessibilityLabel={labelFor(i)}\n          accessibilityValue={{ min, max, now: v }}\n          accessibilityState={{ ...accessibilityState, disabled }}\n          accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}\n          onAccessibilityAction={disabled ? undefined : onAction(i)}\n          className={cn(\n            'absolute top-3 size-5 rounded-full border-2 border-interactive-primary bg-bg-primary shadow-sm',\n            disabled && 'border-interactive-disabled',\n          )}\n          style={{ left: toPos(v) }}\n        />\n      ))}\n    </View>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Spinner, SpinnerProps } from "./spinner.js";
+export { Spinner, type SpinnerProps };

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,13 @@
+import { ViewProps } from "react-native";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/spinner/spinner.d.ts
+declare const spinnerVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SpinnerProps = Omit<ViewProps, 'children'> & VariantProps<typeof spinnerVariants> & {
+  className?: string;
+};
+/** Indicador indeterminado. Para carregamento de tela/seção, prefira um Skeleton. */
+export declare function Spinner({ className, size, accessibilityLabel, ...props }: SpinnerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=spinner.d.ts.map

package/dist/components/spinner/spinner.js

@@ -0,0 +1,47 @@
+import { cn } from "../../utils/cn.js";
+import { useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/spinner/spinner.tsx
+const spinnerVariants = cva("shrink-0", {
+	variants: { size: {
+		lg: "size-6",
+		md: "size-5",
+		sm: "size-4"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Indicador indeterminado. Para carregamento de tela/seção, prefira um Skeleton. */
+function Spinner({ className, size, accessibilityLabel = "Carregando", ...props }) {
+	const rotation = useRef(new Animated.Value(0)).current;
+	useEffect(() => {
+		const loop = Animated.loop(Animated.timing(rotation, {
+			toValue: 1,
+			duration: 800,
+			easing: Easing.linear,
+			useNativeDriver: true
+		}));
+		loop.start();
+		return () => loop.stop();
+	}, [rotation]);
+	const rotate = rotation.interpolate({
+		inputRange: [0, 1],
+		outputRange: ["0deg", "360deg"]
+	});
+	return /* @__PURE__ */ jsxs(View, {
+		accessible: true,
+		accessibilityRole: "progressbar",
+		accessibilityLabel,
+		className: cn(spinnerVariants({ size }), className),
+		...props,
+		children: [/* @__PURE__ */ jsx(View, { className: "absolute inset-0 rounded-full border-2 border-spinner-track opacity-30" }), /* @__PURE__ */ jsx(Animated.View, {
+			style: [StyleSheet.absoluteFill, { transform: [{ rotate }] }],
+			children: /* @__PURE__ */ jsx(View, { className: "size-full rounded-full border-2 border-transparent border-t-spinner-indicator" })
+		})]
+	});
+}
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { useEffect, useRef } from 'react'\nimport { Animated, Easing, StyleSheet, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\n\nconst spinnerVariants = cva('shrink-0', {\n  variants: {\n    size: {\n      lg: 'size-6', // 24px\n      md: 'size-5', // 20px\n      sm: 'size-4', // 16px\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n\nexport type SpinnerProps = Omit<ViewProps, 'children'> &\n  VariantProps<typeof spinnerVariants> & {\n    className?: string\n  }\n\n/** Indicador indeterminado. Para carregamento de tela/seção, prefira um Skeleton. */\nexport function Spinner({\n  className,\n  size,\n  accessibilityLabel = 'Carregando',\n  ...props\n}: SpinnerProps) {\n  const rotation = useRef(new Animated.Value(0)).current\n\n  useEffect(() => {\n    const loop = Animated.loop(\n      Animated.timing(rotation, {\n        toValue: 1,\n        duration: 800,\n        easing: Easing.linear,\n        useNativeDriver: true,\n      }),\n    )\n    loop.start()\n    return () => loop.stop()\n  }, [rotation])\n\n  const rotate = rotation.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] })\n\n  return (\n    <View\n      accessible\n      accessibilityRole=\"progressbar\"\n      accessibilityLabel={accessibilityLabel}\n      className={cn(spinnerVariants({ size }), className)}\n      {...props}\n    >\n      <View className=\"absolute inset-0 rounded-full border-2 border-spinner-track opacity-30\" />\n      {/* O Animated não recebe className: só gira; o visual fica no View de dentro. */}\n      <Animated.View style={[StyleSheet.absoluteFill, { transform: [{ rotate }] }]}>\n        <View className=\"size-full rounded-full border-2 border-transparent border-t-spinner-indicator\" />\n      </Animated.View>\n    </View>\n  )\n}\n"],"mappings":";;;;;;AAOA,MAAM,kBAAkB,IAAI,YAAY;CACtC,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;;AAQD,SAAgB,QAAQ,EACtB,WACA,MACA,qBAAqB,cACrB,GAAG,SACY;CACf,MAAM,WAAW,OAAO,IAAI,SAAS,MAAM,CAAC,CAAC,CAAC,CAAC;CAE/C,gBAAgB;EACd,MAAM,OAAO,SAAS,KACpB,SAAS,OAAO,UAAU;GACxB,SAAS;GACT,UAAU;GACV,QAAQ,OAAO;GACf,iBAAiB;EACnB,CAAC,CACH;EACA,KAAK,MAAM;EACX,aAAa,KAAK,KAAK;CACzB,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,SAAS,SAAS,YAAY;EAAE,YAAY,CAAC,GAAG,CAAC;EAAG,aAAa,CAAC,QAAQ,QAAQ;CAAE,CAAC;CAE3F,OACE,qBAAC,MAAD;EACE,YAAA;EACA,mBAAkB;EACE;EACpB,WAAW,GAAG,gBAAgB,EAAE,KAAK,CAAC,GAAG,SAAS;EAClD,GAAI;EALN,UAAA,CAOE,oBAAC,MAAD,EAAM,WAAU,yEAA0E,CAAA,GAE1F,oBAAC,SAAS,MAAV;GAAe,OAAO,CAAC,WAAW,cAAc,EAAE,WAAW,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC;GACzE,UAAA,oBAAC,MAAD,EAAM,WAAU,gFAAiF,CAAA;EACpF,CAAA,CACX;;AAEV"}

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

@@ -0,0 +1,2 @@
+import { Stack, StackProps } from "./stack.js";
+export { Stack, type StackProps };

package/dist/components/stack/stack.d.ts

@@ -0,0 +1,17 @@
+import { ViewProps } from "react-native";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/stack/stack.d.ts
+declare const stackVariants: (props?: ({
+  direction?: "column" | "row" | null | undefined;
+  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | null | undefined;
+  align?: "center" | "end" | "start" | "stretch" | null | undefined;
+  justify?: "between" | "center" | "end" | "start" | null | undefined;
+  wrap?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type StackProps = ViewProps & VariantProps<typeof stackVariants> & {
+  className?: string;
+};
+/** Empilha filhos numa direção com espaçamento uniforme (flexbox + a escala de gap do DS). */
+export declare function Stack({ className, direction, gap, align, justify, wrap, ...props }: StackProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=stack.d.ts.map