@innovui/react-native 0.0.0-stage → 0.1.0

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,64 @@
+import { cn } from "../../utils/cn.js";
+import { useToken } from "../_shared/use-token.js";
+import { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/checkbox/checkbox.tsx
+function Checkbox({ label, checked, defaultChecked = false, onCheckedChange, indeterminate = false, error, disabled, className, accessibilityState, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+	const isChecked = checked ?? uncontrolled;
+	const isDisabled = Boolean(disabled);
+	const filled = isChecked || indeterminate;
+	const indicator = useToken("--color-selection-indicator-selected");
+	return /* @__PURE__ */ jsxs(Pressable, {
+		accessibilityRole: "checkbox",
+		accessibilityState: {
+			...accessibilityState,
+			checked: indeterminate ? "mixed" : isChecked,
+			disabled: isDisabled
+		},
+		disabled: isDisabled,
+		onPress: () => {
+			const next = indeterminate ? true : !isChecked;
+			setUncontrolled(next);
+			onCheckedChange?.(next);
+		},
+		className: cn("min-h-11 flex-row items-center gap-3 self-start", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(View, {
+			className: cn("size-5 items-center justify-center rounded border-2 border-selection-border-unselected bg-selection-bg-unselected", filled && "border-selection-border-selected bg-selection-bg-selected", isDisabled && "border-selection-border-disabled bg-selection-bg-disabled", error && "border-status-error-border"),
+			children: indeterminate ? /* @__PURE__ */ jsx(Svg, {
+				width: 14,
+				height: 14,
+				viewBox: "0 0 16 16",
+				children: /* @__PURE__ */ jsx(Path, {
+					d: "M3 8h10",
+					stroke: indicator,
+					strokeWidth: 2,
+					strokeLinecap: "round",
+					fill: "none"
+				})
+			}) : isChecked ? /* @__PURE__ */ jsx(Svg, {
+				width: 14,
+				height: 14,
+				viewBox: "0 0 16 16",
+				children: /* @__PURE__ */ jsx(Path, {
+					d: "M3 8.5 6.5 12 13 4.5",
+					stroke: indicator,
+					strokeWidth: 2,
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					fill: "none"
+				})
+			}) : null
+		}), typeof label === "string" ? /* @__PURE__ */ jsx(Text, {
+			className: cn("text-sm font-medium text-selection-text-label", isDisabled && "text-selection-text-disabled"),
+			children: label
+		}) : label]
+	});
+}
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { type ReactNode, useState } from 'react'\nimport { Pressable, type PressableProps, Text, View } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\nimport { cn } from '../../utils/cn'\nimport { useToken } from '../_shared/use-token'\n\nexport type CheckboxProps = Omit<PressableProps, 'children' | 'style' | 'onPress'> & {\n  className?: string\n  label?: ReactNode\n  /** Controlado. Sem ele, o componente guarda o próprio estado (começa em `defaultChecked`). */\n  checked?: boolean\n  defaultChecked?: boolean\n  /** Chamado com o novo valor a cada toque. */\n  onCheckedChange?: (checked: boolean) => void\n  /** Seleção parcial: aparece com o traço e é anunciada como \"misto\". */\n  indeterminate?: boolean\n  error?: boolean\n}\n\nexport function Checkbox({\n  label,\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  indeterminate = false,\n  error,\n  disabled,\n  className,\n  accessibilityState,\n  ...props\n}: CheckboxProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultChecked)\n  const isChecked = checked ?? uncontrolled\n  const isDisabled = Boolean(disabled)\n  const filled = isChecked || indeterminate\n  const indicator = useToken('--color-selection-indicator-selected')\n\n  return (\n    <Pressable\n      accessibilityRole=\"checkbox\"\n      accessibilityState={{\n        ...accessibilityState,\n        checked: indeterminate ? 'mixed' : isChecked,\n        disabled: isDisabled,\n      }}\n      disabled={isDisabled}\n      onPress={() => {\n        // Em indeterminate, o toque marca (como no input nativo).\n        const next = indeterminate ? true : !isChecked\n        setUncontrolled(next)\n        onCheckedChange?.(next)\n      }}\n      className={cn('min-h-11 flex-row items-center gap-3 self-start', className)}\n      {...props}\n    >\n      <View\n        className={cn(\n          'size-5 items-center justify-center rounded border-2 border-selection-border-unselected bg-selection-bg-unselected',\n          filled && 'border-selection-border-selected bg-selection-bg-selected',\n          isDisabled && 'border-selection-border-disabled bg-selection-bg-disabled',\n          error && 'border-status-error-border',\n        )}\n      >\n        {indeterminate ? (\n          <Svg width={14} height={14} viewBox=\"0 0 16 16\">\n            <Path\n              d=\"M3 8h10\"\n              stroke={indicator}\n              strokeWidth={2}\n              strokeLinecap=\"round\"\n              fill=\"none\"\n            />\n          </Svg>\n        ) : isChecked ? (\n          <Svg width={14} height={14} viewBox=\"0 0 16 16\">\n            <Path\n              d=\"M3 8.5 6.5 12 13 4.5\"\n              stroke={indicator}\n              strokeWidth={2}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              fill=\"none\"\n            />\n          </Svg>\n        ) : null}\n      </View>\n      {typeof label === 'string' ? (\n        <Text\n          className={cn(\n            'text-sm font-medium text-selection-text-label',\n            isDisabled && 'text-selection-text-disabled',\n          )}\n        >\n          {label}\n        </Text>\n      ) : (\n        label\n      )}\n    </Pressable>\n  )\n}\n"],"mappings":";;;;;;;AAqBA,SAAgB,SAAS,EACvB,OACA,SACA,iBAAiB,OACjB,iBACA,gBAAgB,OAChB,OACA,UACA,WACA,oBACA,GAAG,SACa;CAChB,MAAM,CAAC,cAAc,mBAAmB,SAAS,cAAc;CAC/D,MAAM,YAAY,WAAW;CAC7B,MAAM,aAAa,QAAQ,QAAQ;CACnC,MAAM,SAAS,aAAa;CAC5B,MAAM,YAAY,SAAS,sCAAsC;CAEjE,OACE,qBAAC,WAAD;EACE,mBAAkB;EAClB,oBAAoB;GAClB,GAAG;GACH,SAAS,gBAAgB,UAAU;GACnC,UAAU;EACZ;EACA,UAAU;EACV,eAAe;GAEb,MAAM,OAAO,gBAAgB,OAAO,CAAC;GACrC,gBAAgB,IAAI;GACpB,kBAAkB,IAAI;EACxB;EACA,WAAW,GAAG,mDAAmD,SAAS;EAC1E,GAAI;EAfN,UAAA,CAiBE,oBAAC,MAAD;GACE,WAAW,GACT,qHACA,UAAU,6DACV,cAAc,6DACd,SAAS,4BACX;GAEC,UAAA,gBACC,oBAAC,KAAD;IAAK,OAAO;IAAI,QAAQ;IAAI,SAAQ;IAClC,UAAA,oBAAC,MAAD;KACE,GAAE;KACF,QAAQ;KACR,aAAa;KACb,eAAc;KACd,MAAK;IACN,CAAA;GACE,CAAA,IACH,YACF,oBAAC,KAAD;IAAK,OAAO;IAAI,QAAQ;IAAI,SAAQ;IAClC,UAAA,oBAAC,MAAD;KACE,GAAE;KACF,QAAQ;KACR,aAAa;KACb,eAAc;KACd,gBAAe;KACf,MAAK;IACN,CAAA;GACE,CAAA,IACH;EACA,CAAA,GACL,OAAO,UAAU,WAChB,oBAAC,MAAD;GACE,WAAW,GACT,iDACA,cAAc,8BAChB;GAEC,UAAA;EACG,CAAA,IAEN,KAEO;;AAEf"}

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

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxProps } from "./checkbox.js";
+export { Checkbox, type CheckboxProps };

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,40 @@
+import { FieldSize } from "../select/field-trigger.js";
+//#region src/components/combobox/combobox.d.ts
+export type ComboboxOption = {
+  /** Valor guardado e devolvido em `onValueChange`. */
+  value: string;
+  /** Texto mostrado na lista e no gatilho; também é onde a busca procura. */
+  label: string;
+  disabled?: boolean;
+};
+export type ComboboxProps = {
+  options: ComboboxOption[];
+  /** Valor selecionado (modo controlado). */
+  value?: string;
+  defaultValue?: string;
+  /** Chamado com o `value` da opção escolhida. */
+  onValueChange?: (value: string) => void;
+  /** Texto do gatilho sem valor. */
+  placeholder?: string;
+  /** Placeholder do campo de busca dentro da lista. */
+  searchPlaceholder?: string;
+  /** Texto quando a busca não acha nada. */
+  emptyMessage?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: boolean;
+  size?: FieldSize;
+  className?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  testID?: string;
+};
+/**
+ * Campo de escolha com busca. No native o gatilho é um botão (como o Select) e a busca fica num
+ * TextInput no topo da lista, que abre já focado: digitar no próprio gatilho não funciona com a
+ * lista numa camada acima dele. Diferenças do web: sem navegação por teclado e sem limpar o valor
+ * apagando o texto (`onValueChange` só recebe valores de opções).
+ */
+export declare function Combobox({ options, value, defaultValue, onValueChange, placeholder, searchPlaceholder, emptyMessage, size, error, disabled, readOnly, className, accessibilityLabel, accessibilityHint, testID }: ComboboxProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox/combobox.js

@@ -0,0 +1,101 @@
+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 "../select/field-trigger.js";
+import { useState } from "react";
+import { Pressable, ScrollView, Text, TextInput, View } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/combobox/combobox.tsx
+const fold = (text) => text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+/**
+* Campo de escolha com busca. No native o gatilho é um botão (como o Select) e a busca fica num
+* TextInput no topo da lista, que abre já focado: digitar no próprio gatilho não funciona com a
+* lista numa camada acima dele. Diferenças do web: sem navegação por teclado e sem limpar o valor
+* apagando o texto (`onValueChange` só recebe valores de opções).
+*/
+function Combobox({ options, value, defaultValue = "", onValueChange, placeholder = "Selecione...", searchPlaceholder = "Buscar...", emptyMessage = "Nenhum resultado", size, error, disabled, readOnly, className, accessibilityLabel, accessibilityHint, testID }) {
+	const [inner, setInner] = useState(defaultValue);
+	const [query, setQuery] = useState("");
+	const anchor = useAnchor();
+	const placeholderColor = useToken("--color-field-text-placeholder");
+	const checkColor = useToken("--color-select-option-text");
+	const selected = value ?? inner;
+	const selectedLabel = options.find((o) => o.value === selected)?.label;
+	const open = anchor.visible && !disabled && !readOnly;
+	const shown = query ? options.filter((o) => fold(o.label).includes(fold(query))) : options;
+	function close() {
+		anchor.close();
+		setQuery("");
+	}
+	function choose(option) {
+		if (value === void 0) setInner(option.value);
+		onValueChange?.(option.value);
+		close();
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FieldTrigger, {
+		anchorRef: anchor.ref,
+		icon: "chevron",
+		text: selectedLabel,
+		placeholder,
+		size,
+		error,
+		open,
+		disabled,
+		readOnly,
+		onPress: anchor.open,
+		className,
+		accessibilityLabel,
+		accessibilityHint,
+		testID
+	}), /* @__PURE__ */ jsxs(AnchoredOverlay, {
+		visible: open,
+		rect: anchor.rect,
+		onRequestClose: close,
+		matchAnchorWidth: true,
+		testID: testID ? `${testID}-list` : void 0,
+		className: "overflow-hidden rounded-md border border-select-dropdown-border bg-select-dropdown-bg shadow-md",
+		children: [/* @__PURE__ */ jsx(TextInput, {
+			autoFocus: true,
+			autoCorrect: false,
+			autoCapitalize: "none",
+			value: query,
+			onChangeText: setQuery,
+			placeholder: searchPlaceholder,
+			placeholderTextColor: placeholderColor,
+			accessibilityLabel: searchPlaceholder,
+			className: "h-11 border-b border-select-dropdown-border px-3 text-base text-field-text"
+		}), /* @__PURE__ */ jsx(ScrollView, {
+			className: "max-h-60 p-1",
+			keyboardShouldPersistTaps: "handled",
+			children: shown.length === 0 ? /* @__PURE__ */ jsx(Text, {
+				className: "px-3 py-2 text-base text-text-secondary",
+				children: emptyMessage
+			}) : shown.map((option) => {
+				const isSelected = option.value === selected;
+				return /* @__PURE__ */ jsxs(Pressable, {
+					role: "option",
+					accessibilityLabel: option.label,
+					accessibilityState: {
+						selected: isSelected,
+						disabled: Boolean(option.disabled)
+					},
+					disabled: option.disabled,
+					onPress: () => choose(option),
+					className: cn("flex-row items-center gap-2 rounded-sm px-3 py-2 active:bg-select-option-bg-hover", isSelected && "bg-select-option-bg-selected"),
+					children: [/* @__PURE__ */ jsx(Text, {
+						className: cn("flex-1 text-base text-select-option-text", option.disabled && "text-select-option-text-disabled"),
+						children: option.label
+					}), isSelected ? /* @__PURE__ */ jsx(View, {
+						className: "size-4 items-center justify-center",
+						children: /* @__PURE__ */ jsx(CheckIcon, { color: checkColor })
+					}) : null]
+				}, option.value);
+			})
+		})]
+	})] });
+}
+//#endregion
+export { Combobox };
+
+//# sourceMappingURL=combobox.js.map

package/dist/components/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":[],"sources":["../../../src/components/combobox/combobox.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { useState } from 'react'\nimport { Pressable, ScrollView, Text, TextInput, 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 '../select/field-trigger'\n\nexport type ComboboxOption = {\n  /** Valor guardado e devolvido em `onValueChange`. */\n  value: string\n  /** Texto mostrado na lista e no gatilho; também é onde a busca procura. */\n  label: string\n  disabled?: boolean\n}\n\nexport type ComboboxProps = {\n  options: ComboboxOption[]\n  /** Valor selecionado (modo controlado). */\n  value?: string\n  defaultValue?: string\n  /** Chamado com o `value` da opção escolhida. */\n  onValueChange?: (value: string) => void\n  /** Texto do gatilho sem valor. */\n  placeholder?: string\n  /** Placeholder do campo de busca dentro da lista. */\n  searchPlaceholder?: string\n  /** Texto quando a busca não acha nada. */\n  emptyMessage?: string\n  disabled?: boolean\n  readOnly?: boolean\n  error?: boolean\n  size?: FieldSize\n  className?: string\n  accessibilityLabel?: string\n  accessibilityHint?: string\n  testID?: string\n}\n\n// busca sem distinguir maiúsculas nem acentos: \"sao\" acha \"São Paulo\"\nconst fold = (text: string) => text.normalize('NFD').replace(/\\p{M}/gu, '').toLowerCase()\n\n/**\n * Campo de escolha com busca. No native o gatilho é um botão (como o Select) e a busca fica num\n * TextInput no topo da lista, que abre já focado: digitar no próprio gatilho não funciona com a\n * lista numa camada acima dele. Diferenças do web: sem navegação por teclado e sem limpar o valor\n * apagando o texto (`onValueChange` só recebe valores de opções).\n */\nexport function Combobox({\n  options,\n  value,\n  defaultValue = '',\n  onValueChange,\n  placeholder = 'Selecione...',\n  searchPlaceholder = 'Buscar...',\n  emptyMessage = 'Nenhum resultado',\n  size,\n  error,\n  disabled,\n  readOnly,\n  className,\n  accessibilityLabel,\n  accessibilityHint,\n  testID,\n}: ComboboxProps) {\n  const [inner, setInner] = useState(defaultValue)\n  const [query, setQuery] = useState('')\n  const anchor = useAnchor()\n  const placeholderColor = useToken('--color-field-text-placeholder')\n  const checkColor = useToken('--color-select-option-text')\n  const selected = value ?? inner\n  const selectedLabel = options.find((o) => o.value === selected)?.label\n  const open = anchor.visible && !disabled && !readOnly\n  const shown = query ? options.filter((o) => fold(o.label).includes(fold(query))) : options\n\n  function close() {\n    anchor.close()\n    setQuery('')\n  }\n\n  function choose(option: ComboboxOption) {\n    if (value === undefined) setInner(option.value)\n    onValueChange?.(option.value)\n    close()\n  }\n\n  return (\n    <>\n      <FieldTrigger\n        anchorRef={anchor.ref}\n        icon=\"chevron\"\n        text={selectedLabel}\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={close}\n        matchAnchorWidth\n        testID={testID ? `${testID}-list` : undefined}\n        className=\"overflow-hidden rounded-md border border-select-dropdown-border bg-select-dropdown-bg shadow-md\"\n      >\n        <TextInput\n          autoFocus\n          autoCorrect={false}\n          autoCapitalize=\"none\"\n          value={query}\n          onChangeText={setQuery}\n          placeholder={searchPlaceholder}\n          placeholderTextColor={placeholderColor}\n          accessibilityLabel={searchPlaceholder}\n          className=\"h-11 border-b border-select-dropdown-border px-3 text-base text-field-text\"\n        />\n        <ScrollView className=\"max-h-60 p-1\" keyboardShouldPersistTaps=\"handled\">\n          {shown.length === 0 ? (\n            <Text className=\"px-3 py-2 text-base text-text-secondary\">{emptyMessage}</Text>\n          ) : (\n            shown.map((option) => {\n              const isSelected = option.value === selected\n              return (\n                <Pressable\n                  key={option.value}\n                  role=\"option\"\n                  accessibilityLabel={option.label}\n                  accessibilityState={{ selected: isSelected, disabled: Boolean(option.disabled) }}\n                  disabled={option.disabled}\n                  onPress={() => choose(option)}\n                  className={cn(\n                    'flex-row items-center gap-2 rounded-sm px-3 py-2 active:bg-select-option-bg-hover',\n                    isSelected && 'bg-select-option-bg-selected',\n                  )}\n                >\n                  <Text\n                    className={cn(\n                      'flex-1 text-base text-select-option-text',\n                      option.disabled && 'text-select-option-text-disabled',\n                    )}\n                  >\n                    {option.label}\n                  </Text>\n                  {isSelected ? (\n                    <View className=\"size-4 items-center justify-center\">\n                      <CheckIcon color={checkColor} />\n                    </View>\n                  ) : null}\n                </Pressable>\n              )\n            })\n          )}\n        </ScrollView>\n      </AnchoredOverlay>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AA0CA,MAAM,QAAQ,SAAiB,KAAK,UAAU,KAAK,CAAC,CAAC,QAAQ,WAAW,EAAE,CAAC,CAAC,YAAY;;;;;;;AAQxF,SAAgB,SAAS,EACvB,SACA,OACA,eAAe,IACf,eACA,cAAc,gBACd,oBAAoB,aACpB,eAAe,oBACf,MACA,OACA,UACA,UACA,WACA,oBACA,mBACA,UACgB;CAChB,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CACrC,MAAM,SAAS,UAAU;CACzB,MAAM,mBAAmB,SAAS,gCAAgC;CAClE,MAAM,aAAa,SAAS,4BAA4B;CACxD,MAAM,WAAW,SAAS;CAC1B,MAAM,gBAAgB,QAAQ,MAAM,MAAM,EAAE,UAAU,QAAQ,CAAC,EAAE;CACjE,MAAM,OAAO,OAAO,WAAW,CAAC,YAAY,CAAC;CAC7C,MAAM,QAAQ,QAAQ,QAAQ,QAAQ,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,IAAI;CAEnF,SAAS,QAAQ;EACf,OAAO,MAAM;EACb,SAAS,EAAE;CACb;CAEA,SAAS,OAAO,QAAwB;EACtC,IAAI,UAAU,KAAA,GAAW,SAAS,OAAO,KAAK;EAC9C,gBAAgB,OAAO,KAAK;EAC5B,MAAM;CACR;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD;EACE,WAAW,OAAO;EAClB,MAAK;EACL,MAAM;EACO;EACP;EACC;EACD;EACI;EACA;EACV,SAAS,OAAO;EACL;EACS;EACD;EACX;CACT,CAAA,GACD,qBAAC,iBAAD;EACE,SAAS;EACT,MAAM,OAAO;EACb,gBAAgB;EAChB,kBAAA;EACA,QAAQ,SAAS,GAAG,OAAO,SAAS,KAAA;EACpC,WAAU;EANZ,UAAA,CAQE,oBAAC,WAAD;GACE,WAAA;GACA,aAAa;GACb,gBAAe;GACf,OAAO;GACP,cAAc;GACd,aAAa;GACb,sBAAsB;GACtB,oBAAoB;GACpB,WAAU;EACX,CAAA,GACD,oBAAC,YAAD;GAAY,WAAU;GAAe,2BAA0B;GAC5D,UAAA,MAAM,WAAW,IAChB,oBAAC,MAAD;IAAM,WAAU;IAA2C,UAAA;GAAmB,CAAA,IAE9E,MAAM,KAAK,WAAW;IACpB,MAAM,aAAa,OAAO,UAAU;IACpC,OACE,qBAAC,WAAD;KAEE,MAAK;KACL,oBAAoB,OAAO;KAC3B,oBAAoB;MAAE,UAAU;MAAY,UAAU,QAAQ,OAAO,QAAQ;KAAE;KAC/E,UAAU,OAAO;KACjB,eAAe,OAAO,MAAM;KAC5B,WAAW,GACT,qFACA,cAAc,8BAChB;KAVF,UAAA,CAYE,oBAAC,MAAD;MACE,WAAW,GACT,4CACA,OAAO,YAAY,kCACrB;MAEC,UAAA,OAAO;KACJ,CAAA,GACL,aACC,oBAAC,MAAD;MAAM,WAAU;MACd,UAAA,oBAAC,WAAD,EAAW,OAAO,WAAa,CAAA;KAC3B,CAAA,IACJ,IACK;IAxBJ,GAAA,OAAO,KAwBH;GAEf,CAAC;EAEO,CAAA,CACG;CACjB,CAAA,CAAA,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,2 @@
+import { Combobox, ComboboxOption, ComboboxProps } from "./combobox.js";
+export { Combobox, type ComboboxOption, type ComboboxProps };

package/dist/components/container/container.d.ts

@@ -0,0 +1,17 @@
+import { ViewProps } from "react-native";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/container/container.d.ts
+declare const containerVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+  tablet?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ContainerProps = ViewProps & Pick<VariantProps<typeof containerVariants>, 'size'> & {
+  className?: string;
+};
+/**
+ * Centraliza o conteúdo com largura máxima e margem lateral (16px no mobile, 24px a partir de
+ * 768px de largura de janela).
+ */
+export declare function Container({ className, size, ...props }: ContainerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=container.d.ts.map

package/dist/components/container/container.js

@@ -0,0 +1,42 @@
+import { cn } from "../../utils/cn.js";
+import { View, useWindowDimensions } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/container/container.tsx
+const TABLET_MIN_WIDTH = 768;
+const containerVariants = cva("mx-auto w-full", {
+	variants: {
+		size: {
+			sm: "max-w-[640px]",
+			md: "max-w-[960px]",
+			lg: "max-w-[1200px]",
+			xl: "max-w-[1440px]"
+		},
+		tablet: {
+			true: "px-6",
+			false: "px-4"
+		}
+	},
+	defaultVariants: {
+		size: "lg",
+		tablet: false
+	}
+});
+/**
+* Centraliza o conteúdo com largura máxima e margem lateral (16px no mobile, 24px a partir de
+* 768px de largura de janela).
+*/
+function Container({ className, size, ...props }) {
+	const { width } = useWindowDimensions();
+	return /* @__PURE__ */ jsx(View, {
+		className: cn(containerVariants({
+			size,
+			tablet: width >= TABLET_MIN_WIDTH
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Container };
+
+//# sourceMappingURL=container.js.map

package/dist/components/container/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","names":[],"sources":["../../../src/components/container/container.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { useWindowDimensions, View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\n\nconst TABLET_MIN_WIDTH = 768\n\nconst containerVariants = cva('mx-auto w-full', {\n  variants: {\n    size: {\n      sm: 'max-w-[640px]',\n      md: 'max-w-[960px]',\n      lg: 'max-w-[1200px]',\n      xl: 'max-w-[1440px]',\n    },\n    // sem variante `tablet:` no Uniwind: o breakpoint vem de useWindowDimensions\n    tablet: { true: 'px-6', false: 'px-4' },\n  },\n  defaultVariants: { size: 'lg', tablet: false },\n})\n\nexport type ContainerProps = ViewProps &\n  Pick<VariantProps<typeof containerVariants>, 'size'> & { className?: string }\n\n/**\n * Centraliza o conteúdo com largura máxima e margem lateral (16px no mobile, 24px a partir de\n * 768px de largura de janela).\n */\nexport function Container({ className, size, ...props }: ContainerProps) {\n  const { width } = useWindowDimensions()\n\n  return (\n    <View\n      className={cn(containerVariants({ size, tablet: width >= TABLET_MIN_WIDTH }), className)}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;AAMA,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB,IAAI,kBAAkB;CAC9C,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAEA,QAAQ;GAAE,MAAM;GAAQ,OAAO;EAAO;CACxC;CACA,iBAAiB;EAAE,MAAM;EAAM,QAAQ;CAAM;AAC/C,CAAC;;;;;AASD,SAAgB,UAAU,EAAE,WAAW,MAAM,GAAG,SAAyB;CACvE,MAAM,EAAE,UAAU,oBAAoB;CAEtC,OACE,oBAAC,MAAD;EACE,WAAW,GAAG,kBAAkB;GAAE;GAAM,QAAQ,SAAS;EAAiB,CAAC,GAAG,SAAS;EACvF,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,2 @@
+import { Container, ContainerProps } from "./container.js";
+export { Container, type ContainerProps };

package/dist/components/date-picker/calendar.d.ts

@@ -0,0 +1,38 @@
+import { DateRange } from "./dates.js";
+//#region src/components/date-picker/calendar.d.ts
+type CalendarCommon = {
+  /** Primeiro dia que pode ser escolhido. */
+  minDate?: Date;
+  /** Último dia que pode ser escolhido. */
+  maxDate?: Date;
+  /** Idioma dos nomes de mês e dia (BCP 47). */
+  locale?: string;
+  /** Primeiro dia da semana: 0 = domingo (padrão), 1 = segunda. */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  previousMonthLabel?: string;
+  nextMonthLabel?: string;
+  className?: string;
+  testID?: string;
+};
+export type CalendarProps = CalendarCommon & ({
+  /** `single` (padrão) escolhe um dia; `range` escolhe um período (início e fim). */
+  mode?: 'single';
+  /** Dia selecionado (modo controlado). */
+  value?: Date;
+  defaultValue?: Date;
+  onValueChange?: (date: Date) => void;
+} | {
+  mode: 'range';
+  /** Período selecionado (modo controlado). Sem `to`, só o início foi escolhido. */
+  value?: DateRange;
+  defaultValue?: DateRange;
+  /** Chamado a cada toque: primeiro com só o início, depois com o período completo. */
+  onValueChange?: (range: DateRange) => void;
+});
+/**
+ * Calendário de um mês para escolher um dia ou um período, em RN puro (sem dependência nativa).
+ * Sem navegação por teclado nem `autoFocus` (não se aplicam ao native).
+ */
+export declare function Calendar({ minDate, maxDate, locale, weekStartsOn, previousMonthLabel, nextMonthLabel, className, testID, ...selection }: CalendarProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=calendar.d.ts.map

package/dist/components/date-picker/calendar.js

@@ -0,0 +1,137 @@
+import { cn } from "../../utils/cn.js";
+import { ChevronRightIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { addDays, addMonths, clamp, isSameDay, monthWeeks, pickRange, startOfDay, toISODate } from "./dates.js";
+import { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/date-picker/calendar.tsx
+/**
+* Calendário de um mês para escolher um dia ou um período, em RN puro (sem dependência nativa).
+* Sem navegação por teclado nem `autoFocus` (não se aplicam ao native).
+*/
+function Calendar({ minDate, maxDate, locale = "pt-BR", weekStartsOn = 0, previousMonthLabel = "Mês anterior", nextMonthLabel = "Próximo mês", className, testID, ...selection }) {
+	const [inner, setInner] = useState(selection.defaultValue);
+	const current = selection.value ?? inner;
+	const isRange = selection.mode === "range";
+	const range = isRange ? current : void 0;
+	const from = isRange ? range?.from : current;
+	const to = isRange ? range?.to : from;
+	const today = startOfDay(/* @__PURE__ */ new Date());
+	const [cursor, setCursor] = useState(() => clamp(startOfDay(from ?? today), minDate, maxDate));
+	const chevronColor = useToken("--color-text-primary");
+	const monthTitle = new Intl.DateTimeFormat(locale, {
+		month: "long",
+		year: "numeric"
+	}).format(cursor);
+	const fullDate = new Intl.DateTimeFormat(locale, {
+		weekday: "long",
+		day: "numeric",
+		month: "long",
+		year: "numeric"
+	});
+	const weekdayShort = new Intl.DateTimeFormat(locale, { weekday: "short" });
+	const weeks = monthWeeks(cursor.getFullYear(), cursor.getMonth(), weekStartsOn);
+	const headings = (weeks[0] ?? []).map((_, i) => {
+		const day = addDays(new Date(2023, 0, 1), weekStartsOn + i);
+		return weekdayShort.format(day);
+	});
+	const isDisabled = (d) => minDate !== void 0 && d < startOfDay(minDate) || maxDate !== void 0 && d > startOfDay(maxDate);
+	const canGoPrevious = !minDate || new Date(cursor.getFullYear(), cursor.getMonth(), 0) >= startOfDay(minDate);
+	const canGoNext = !maxDate || new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1) <= startOfDay(maxDate);
+	function choose(day) {
+		if (selection.mode === "range") {
+			const next = pickRange(range, day);
+			if (selection.value === void 0) setInner(next);
+			selection.onValueChange?.(next);
+		} else {
+			if (selection.value === void 0) setInner(day);
+			selection.onValueChange?.(day);
+		}
+	}
+	const isEdge = (day, edge) => edge !== void 0 && isSameDay(day, edge);
+	const hasSpan = isRange && from !== void 0 && to !== void 0 && !isSameDay(from, to);
+	const inBand = (day) => from !== void 0 && to !== void 0 && day > from && day < to;
+	return /* @__PURE__ */ jsxs(View, {
+		testID,
+		className: cn("w-70", className),
+		children: [
+			/* @__PURE__ */ jsxs(View, {
+				className: "mb-2 flex-row items-center justify-between",
+				children: [
+					/* @__PURE__ */ jsx(Pressable, {
+						accessibilityRole: "button",
+						accessibilityLabel: previousMonthLabel,
+						accessibilityState: { disabled: !canGoPrevious },
+						disabled: !canGoPrevious,
+						onPress: () => setCursor(clamp(addMonths(cursor, -1), minDate, maxDate)),
+						className: "size-9 items-center justify-center rounded-full active:bg-button-secondary-bg-hover disabled:opacity-40",
+						children: /* @__PURE__ */ jsx(View, {
+							className: "rotate-180",
+							children: /* @__PURE__ */ jsx(ChevronRightIcon, { color: chevronColor })
+						})
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						accessibilityRole: "header",
+						accessibilityLiveRegion: "polite",
+						className: "text-sm font-medium capitalize text-text-primary",
+						children: monthTitle
+					}),
+					/* @__PURE__ */ jsx(Pressable, {
+						accessibilityRole: "button",
+						accessibilityLabel: nextMonthLabel,
+						accessibilityState: { disabled: !canGoNext },
+						disabled: !canGoNext,
+						onPress: () => setCursor(clamp(addMonths(cursor, 1), minDate, maxDate)),
+						className: "size-9 items-center justify-center rounded-full active:bg-button-secondary-bg-hover disabled:opacity-40",
+						children: /* @__PURE__ */ jsx(ChevronRightIcon, { color: chevronColor })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(View, {
+				className: "flex-row",
+				children: headings.map((heading, i) => /* @__PURE__ */ jsx(View, {
+					accessible: false,
+					className: "h-8 flex-1 items-center justify-center",
+					children: /* @__PURE__ */ jsx(Text, {
+						className: "text-xs font-medium capitalize text-text-secondary",
+						children: heading
+					})
+				}, i))
+			}),
+			weeks.map((week) => /* @__PURE__ */ jsx(View, {
+				className: "flex-row",
+				children: week.map((day, i) => {
+					if (!day) return /* @__PURE__ */ jsx(View, { className: "h-9 flex-1" }, `empty-${i}`);
+					const isFrom = isEdge(day, from);
+					const isTo = isEdge(day, to);
+					const edge = isFrom || isTo;
+					const isToday = isSameDay(day, today);
+					const disabled = isDisabled(day);
+					return /* @__PURE__ */ jsx(View, {
+						className: cn("h-9 flex-1 items-center", hasSpan && (inBand(day) || edge) && "bg-button-secondary-bg", hasSpan && isFrom && "rounded-l-full", hasSpan && isTo && "rounded-r-full"),
+						children: /* @__PURE__ */ jsx(Pressable, {
+							accessibilityRole: "button",
+							accessibilityLabel: fullDate.format(day),
+							accessibilityState: {
+								selected: edge || inBand(day),
+								disabled
+							},
+							disabled,
+							onPress: () => choose(day),
+							className: cn("size-9 items-center justify-center rounded-full active:bg-bg-tertiary", inBand(day) && "active:bg-button-secondary-bg-hover", edge && "bg-button-primary-bg active:bg-button-primary-bg-active"),
+							children: /* @__PURE__ */ jsx(Text, {
+								className: cn("text-sm text-text-primary", isToday && "font-semibold text-text-brand", edge && "font-medium text-button-primary-text", disabled && "text-text-disabled"),
+								children: day.getDate()
+							})
+						})
+					}, toISODate(day));
+				})
+			}, toISODate(week.find((d) => d) ?? cursor)))
+		]
+	});
+}
+//#endregion
+export { Calendar };
+
+//# sourceMappingURL=calendar.js.map

package/dist/components/date-picker/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","names":[],"sources":["../../../src/components/date-picker/calendar.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { useState } from 'react'\nimport { Pressable, Text, View } from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { ChevronRightIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\nimport {\n  addDays,\n  addMonths,\n  clamp,\n  type DateRange,\n  isSameDay,\n  monthWeeks,\n  pickRange,\n  startOfDay,\n  toISODate,\n} from './dates'\n\ntype CalendarCommon = {\n  /** Primeiro dia que pode ser escolhido. */\n  minDate?: Date\n  /** Último dia que pode ser escolhido. */\n  maxDate?: Date\n  /** Idioma dos nomes de mês e dia (BCP 47). */\n  locale?: string\n  /** Primeiro dia da semana: 0 = domingo (padrão), 1 = segunda. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  previousMonthLabel?: string\n  nextMonthLabel?: string\n  className?: string\n  testID?: string\n}\n\nexport type CalendarProps = CalendarCommon &\n  (\n    | {\n        /** `single` (padrão) escolhe um dia; `range` escolhe um período (início e fim). */\n        mode?: 'single'\n        /** Dia selecionado (modo controlado). */\n        value?: Date\n        defaultValue?: Date\n        onValueChange?: (date: Date) => void\n      }\n    | {\n        mode: 'range'\n        /** Período selecionado (modo controlado). Sem `to`, só o início foi escolhido. */\n        value?: DateRange\n        defaultValue?: DateRange\n        /** Chamado a cada toque: primeiro com só o início, depois com o período completo. */\n        onValueChange?: (range: DateRange) => void\n      }\n  )\n\n/**\n * Calendário de um mês para escolher um dia ou um período, em RN puro (sem dependência nativa).\n * Sem navegação por teclado nem `autoFocus` (não se aplicam ao native).\n */\nexport function Calendar({\n  minDate,\n  maxDate,\n  locale = 'pt-BR',\n  weekStartsOn = 0,\n  previousMonthLabel = 'Mês anterior',\n  nextMonthLabel = 'Próximo mês',\n  className,\n  testID,\n  ...selection\n}: CalendarProps) {\n  const [inner, setInner] = useState(selection.defaultValue)\n  const current = selection.value ?? inner\n  const isRange = selection.mode === 'range'\n  const range = isRange ? (current as DateRange | undefined) : undefined\n  const from = isRange ? range?.from : (current as Date | undefined)\n  const to = isRange ? range?.to : from\n  const today = startOfDay(new Date())\n  // o mês exibido: começa no valor (ou hoje) e muda pelas setas\n  const [cursor, setCursor] = useState(() => clamp(startOfDay(from ?? today), minDate, maxDate))\n  const chevronColor = useToken('--color-text-primary')\n\n  const monthTitle = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(\n    cursor,\n  )\n  // equivale a dateStyle: 'full', mas com opções explícitas (mais compatível com o Hermes)\n  const fullDate = new Intl.DateTimeFormat(locale, {\n    weekday: 'long',\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  })\n  const weekdayShort = new Intl.DateTimeFormat(locale, { weekday: 'short' })\n  const weeks = monthWeeks(cursor.getFullYear(), cursor.getMonth(), weekStartsOn)\n  const headings = (weeks[0] ?? []).map((_, i) => {\n    const day = addDays(new Date(2023, 0, 1), weekStartsOn + i) // 1/jan/2023 foi domingo\n    return weekdayShort.format(day)\n  })\n\n  const isDisabled = (d: Date) =>\n    (minDate !== undefined && d < startOfDay(minDate)) ||\n    (maxDate !== undefined && d > startOfDay(maxDate))\n  const canGoPrevious =\n    !minDate || new Date(cursor.getFullYear(), cursor.getMonth(), 0) >= startOfDay(minDate)\n  const canGoNext =\n    !maxDate || new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1) <= startOfDay(maxDate)\n\n  function choose(day: Date) {\n    if (selection.mode === 'range') {\n      const next = pickRange(range, day)\n      if (selection.value === undefined) setInner(next)\n      selection.onValueChange?.(next)\n    } else {\n      if (selection.value === undefined) setInner(day)\n      selection.onValueChange?.(day)\n    }\n  }\n\n  const isEdge = (day: Date, edge?: Date) => edge !== undefined && isSameDay(day, edge)\n  // período com mais de um dia: só nele há faixa (um dia só fica como um círculo)\n  const hasSpan = isRange && from !== undefined && to !== undefined && !isSameDay(from, to)\n  const inBand = (day: Date) => from !== undefined && to !== undefined && day > from && day < to\n\n  return (\n    <View testID={testID} className={cn('w-70', className)}>\n      <View className=\"mb-2 flex-row items-center justify-between\">\n        <Pressable\n          accessibilityRole=\"button\"\n          accessibilityLabel={previousMonthLabel}\n          accessibilityState={{ disabled: !canGoPrevious }}\n          disabled={!canGoPrevious}\n          onPress={() => setCursor(clamp(addMonths(cursor, -1), minDate, maxDate))}\n          className=\"size-9 items-center justify-center rounded-full active:bg-button-secondary-bg-hover disabled:opacity-40\"\n        >\n          <View className=\"rotate-180\">\n            <ChevronRightIcon color={chevronColor} />\n          </View>\n        </Pressable>\n        <Text\n          accessibilityRole=\"header\"\n          accessibilityLiveRegion=\"polite\"\n          className=\"text-sm font-medium capitalize text-text-primary\"\n        >\n          {monthTitle}\n        </Text>\n        <Pressable\n          accessibilityRole=\"button\"\n          accessibilityLabel={nextMonthLabel}\n          accessibilityState={{ disabled: !canGoNext }}\n          disabled={!canGoNext}\n          onPress={() => setCursor(clamp(addMonths(cursor, 1), minDate, maxDate))}\n          className=\"size-9 items-center justify-center rounded-full active:bg-button-secondary-bg-hover disabled:opacity-40\"\n        >\n          <ChevronRightIcon color={chevronColor} />\n        </Pressable>\n      </View>\n      <View className=\"flex-row\">\n        {headings.map((heading, i) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: a posição na semana é a identidade\n          <View key={i} accessible={false} className=\"h-8 flex-1 items-center justify-center\">\n            <Text className=\"text-xs font-medium capitalize text-text-secondary\">{heading}</Text>\n          </View>\n        ))}\n      </View>\n      {weeks.map((week) => (\n        <View key={toISODate(week.find((d) => d) ?? cursor)} className=\"flex-row\">\n          {week.map((day, i) => {\n            if (!day) {\n              // biome-ignore lint/suspicious/noArrayIndexKey: células vazias não têm identidade\n              return <View key={`empty-${i}`} className=\"h-9 flex-1\" />\n            }\n            const isFrom = isEdge(day, from)\n            const isTo = isEdge(day, to)\n            const edge = isFrom || isTo\n            const isToday = isSameDay(day, today)\n            const disabled = isDisabled(day)\n            return (\n              <View\n                key={toISODate(day)}\n                className={cn(\n                  'h-9 flex-1 items-center',\n                  // faixa contínua entre o início e o fim, com as pontas arredondadas\n                  hasSpan && (inBand(day) || edge) && 'bg-button-secondary-bg',\n                  hasSpan && isFrom && 'rounded-l-full',\n                  hasSpan && isTo && 'rounded-r-full',\n                )}\n              >\n                <Pressable\n                  accessibilityRole=\"button\"\n                  accessibilityLabel={fullDate.format(day)}\n                  accessibilityState={{\n                    selected: edge || inBand(day),\n                    disabled,\n                  }}\n                  disabled={disabled}\n                  onPress={() => choose(day)}\n                  className={cn(\n                    'size-9 items-center justify-center rounded-full active:bg-bg-tertiary',\n                    inBand(day) && 'active:bg-button-secondary-bg-hover',\n                    edge && 'bg-button-primary-bg active:bg-button-primary-bg-active',\n                  )}\n                >\n                  <Text\n                    className={cn(\n                      'text-sm text-text-primary',\n                      isToday && 'font-semibold text-text-brand',\n                      edge && 'font-medium text-button-primary-text',\n                      disabled && 'text-text-disabled',\n                    )}\n                  >\n                    {day.getDate()}\n                  </Text>\n                </Pressable>\n              </View>\n            )\n          })}\n        </View>\n      ))}\n    </View>\n  )\n}\n"],"mappings":"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"}

package/dist/components/date-picker/date-picker.d.ts

@@ -0,0 +1,24 @@
+import { FieldSize } from "../select/field-trigger.js";
+import { CalendarProps } from "./calendar.js";
+//#region src/components/date-picker/date-picker.d.ts
+export type DatePickerProps = Pick<CalendarProps, 'minDate' | 'maxDate' | 'locale' | 'weekStartsOn'> & {
+  /** Dia selecionado (modo controlado). */
+  value?: Date;
+  defaultValue?: Date;
+  /** Chamado com o dia escolhido. */
+  onValueChange?: (date: Date) => void;
+  placeholder?: string;
+  size?: FieldSize;
+  disabled?: boolean;
+  /** Mostra a data mas não deixa trocar. */
+  readOnly?: boolean;
+  error?: boolean;
+  className?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  testID?: string;
+};
+/** Campo de data: um gatilho que mostra o dia escolhido e abre um Calendar num painel modal. */
+export declare function DatePicker({ value, defaultValue, onValueChange, minDate, maxDate, locale, weekStartsOn, placeholder, size, error, disabled, readOnly, className, accessibilityLabel, accessibilityHint, testID }: DatePickerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,52 @@
+import { Calendar } from "./calendar.js";
+import { DateSheet } from "./date-sheet.js";
+import { DateTrigger } from "./date-trigger.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/date-picker/date-picker.tsx
+/** Campo de data: um gatilho que mostra o dia escolhido e abre um Calendar num painel modal. */
+function DatePicker({ value, defaultValue, onValueChange, minDate, maxDate, locale = "pt-BR", weekStartsOn, placeholder = "dd/mm/aaaa", size, error, disabled, readOnly, className, accessibilityLabel, accessibilityHint, testID }) {
+	const [inner, setInner] = useState(defaultValue);
+	const [open, setOpen] = useState(false);
+	const selected = value ?? inner;
+	const text = selected ? new Intl.DateTimeFormat(locale, {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	}).format(selected) : void 0;
+	const visible = open && !readOnly && !disabled;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DateTrigger, {
+		text,
+		placeholder,
+		size,
+		error,
+		open: visible,
+		disabled,
+		readOnly,
+		onPress: () => setOpen(true),
+		className,
+		accessibilityLabel,
+		accessibilityHint,
+		testID
+	}), /* @__PURE__ */ jsx(DateSheet, {
+		visible,
+		onRequestClose: () => setOpen(false),
+		testID: testID ? `${testID}-sheet` : void 0,
+		children: /* @__PURE__ */ jsx(Calendar, {
+			value: selected,
+			minDate,
+			maxDate,
+			locale,
+			weekStartsOn,
+			onValueChange: (day) => {
+				if (value === void 0) setInner(day);
+				onValueChange?.(day);
+				setOpen(false);
+			}
+		})
+	})] });
+}
+//#endregion
+export { DatePicker };
+
+//# sourceMappingURL=date-picker.js.map

package/dist/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":[],"sources":["../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { FieldSize } from '../select/field-trigger'\nimport { Calendar, type CalendarProps } from './calendar'\nimport { DateSheet } from './date-sheet'\nimport { DateTrigger } from './date-trigger'\n\nexport type DatePickerProps = Pick<\n  CalendarProps,\n  'minDate' | 'maxDate' | 'locale' | 'weekStartsOn'\n> & {\n  /** Dia selecionado (modo controlado). */\n  value?: Date\n  defaultValue?: Date\n  /** Chamado com o dia escolhido. */\n  onValueChange?: (date: Date) => void\n  placeholder?: string\n  size?: FieldSize\n  disabled?: boolean\n  /** Mostra a data mas não deixa trocar. */\n  readOnly?: boolean\n  error?: boolean\n  className?: string\n  accessibilityLabel?: string\n  accessibilityHint?: string\n  testID?: string\n}\n\n/** Campo de data: um gatilho que mostra o dia escolhido e abre um Calendar num painel modal. */\nexport function DatePicker({\n  value,\n  defaultValue,\n  onValueChange,\n  minDate,\n  maxDate,\n  locale = 'pt-BR',\n  weekStartsOn,\n  placeholder = 'dd/mm/aaaa',\n  size,\n  error,\n  disabled,\n  readOnly,\n  className,\n  accessibilityLabel,\n  accessibilityHint,\n  testID,\n}: DatePickerProps) {\n  const [inner, setInner] = useState(defaultValue)\n  const [open, setOpen] = useState(false)\n  const selected = value ?? inner\n  const text = selected\n    ? new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit', year: 'numeric' }).format(\n        selected,\n      )\n    : undefined\n  const visible = open && !readOnly && !disabled\n\n  return (\n    <>\n      <DateTrigger\n        text={text}\n        placeholder={placeholder}\n        size={size}\n        error={error}\n        open={visible}\n        disabled={disabled}\n        readOnly={readOnly}\n        onPress={() => setOpen(true)}\n        className={className}\n        accessibilityLabel={accessibilityLabel}\n        accessibilityHint={accessibilityHint}\n        testID={testID}\n      />\n      <DateSheet\n        visible={visible}\n        onRequestClose={() => setOpen(false)}\n        testID={testID ? `${testID}-sheet` : undefined}\n      >\n        <Calendar\n          value={selected}\n          minDate={minDate}\n          maxDate={maxDate}\n          locale={locale}\n          weekStartsOn={weekStartsOn}\n          onValueChange={(day) => {\n            if (value === undefined) setInner(day)\n            onValueChange?.(day)\n            setOpen(false)\n          }}\n        />\n      </DateSheet>\n    </>\n  )\n}\n"],"mappings":";;;;;;;AA4BA,SAAgB,WAAW,EACzB,OACA,cACA,eACA,SACA,SACA,SAAS,SACT,cACA,cAAc,cACd,MACA,OACA,UACA,UACA,WACA,oBACA,mBACA,UACkB;CAClB,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,WAAW,SAAS;CAC1B,MAAM,OAAO,WACT,IAAI,KAAK,eAAe,QAAQ;EAAE,KAAK;EAAW,OAAO;EAAW,MAAM;CAAU,CAAC,CAAC,CAAC,OACrF,QACF,IACA,KAAA;CACJ,MAAM,UAAU,QAAQ,CAAC,YAAY,CAAC;CAEtC,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,aAAD;EACQ;EACO;EACP;EACC;EACP,MAAM;EACI;EACA;EACV,eAAe,QAAQ,IAAI;EAChB;EACS;EACD;EACX;CACT,CAAA,GACD,oBAAC,WAAD;EACW;EACT,sBAAsB,QAAQ,KAAK;EACnC,QAAQ,SAAS,GAAG,OAAO,UAAU,KAAA;EAErC,UAAA,oBAAC,UAAD;GACE,OAAO;GACE;GACA;GACD;GACM;GACd,gBAAgB,QAAQ;IACtB,IAAI,UAAU,KAAA,GAAW,SAAS,GAAG;IACrC,gBAAgB,GAAG;IACnB,QAAQ,KAAK;GACf;EACD,CAAA;CACQ,CAAA,CACX,EAAA,CAAA;AAEN"}

package/dist/components/date-picker/date-presets.d.ts

@@ -0,0 +1,15 @@
+import { DateRange } from "./dates.js";
+//#region src/components/date-picker/date-presets.d.ts
+export type DatePreset = {
+  /** Texto do atalho. */
+  label: string;
+  /** Período que o atalho escolhe, com início e fim. */
+  range: Required<DateRange>;
+};
+/**
+ * Atalhos comuns de período, contados a partir de `today`: hoje, últimos 7 e 30 dias (incluindo
+ * hoje), este mês e mês passado. Passe só os que quiser, ou monte os seus, em `presets`.
+ */
+export declare function getDatePresets(today?: Date): DatePreset[];
+//#endregion
+//# sourceMappingURL=date-presets.d.ts.map