@innovui/react-native 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,52 @@
+import { addDays, startOfDay } from "./dates.js";
+//#region src/components/date-picker/date-presets.ts
+/**
+* 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`.
+*/
+function getDatePresets(today = /* @__PURE__ */ new Date()) {
+	const day = startOfDay(today);
+	const year = day.getFullYear();
+	const month = day.getMonth();
+	return [
+		{
+			label: "Hoje",
+			range: {
+				from: day,
+				to: day
+			}
+		},
+		{
+			label: "Últimos 7 dias",
+			range: {
+				from: addDays(day, -6),
+				to: day
+			}
+		},
+		{
+			label: "Últimos 30 dias",
+			range: {
+				from: addDays(day, -29),
+				to: day
+			}
+		},
+		{
+			label: "Este mês",
+			range: {
+				from: new Date(year, month, 1),
+				to: new Date(year, month + 1, 0)
+			}
+		},
+		{
+			label: "Mês passado",
+			range: {
+				from: new Date(year, month - 1, 1),
+				to: new Date(year, month, 0)
+			}
+		}
+	];
+}
+//#endregion
+export { getDatePresets };
+
+//# sourceMappingURL=date-presets.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-presets.js","names":[],"sources":["../../../src/components/date-picker/date-presets.ts"],"sourcesContent":["import type { DateRange } from './dates'\nimport { addDays, startOfDay } from './dates'\n\nexport type DatePreset = {\n  /** Texto do atalho. */\n  label: string\n  /** Período que o atalho escolhe, com início e fim. */\n  range: Required<DateRange>\n}\n\n/**\n * Atalhos comuns de período, contados a partir de `today`: hoje, últimos 7 e 30 dias (incluindo\n * hoje), este mês e mês passado. Passe só os que quiser, ou monte os seus, em `presets`.\n */\nexport function getDatePresets(today: Date = new Date()): DatePreset[] {\n  const day = startOfDay(today)\n  const year = day.getFullYear()\n  const month = day.getMonth()\n  return [\n    { label: 'Hoje', range: { from: day, to: day } },\n    { label: 'Últimos 7 dias', range: { from: addDays(day, -6), to: day } },\n    { label: 'Últimos 30 dias', range: { from: addDays(day, -29), to: day } },\n    {\n      label: 'Este mês',\n      range: { from: new Date(year, month, 1), to: new Date(year, month + 1, 0) },\n    },\n    {\n      label: 'Mês passado',\n      range: { from: new Date(year, month - 1, 1), to: new Date(year, month, 0) },\n    },\n  ]\n}\n"],"mappings":";;;;;;AAcA,SAAgB,eAAe,wBAAc,IAAI,KAAK,GAAiB;CACrE,MAAM,MAAM,WAAW,KAAK;CAC5B,MAAM,OAAO,IAAI,YAAY;CAC7B,MAAM,QAAQ,IAAI,SAAS;CAC3B,OAAO;EACL;GAAE,OAAO;GAAQ,OAAO;IAAE,MAAM;IAAK,IAAI;GAAI;EAAE;EAC/C;GAAE,OAAO;GAAkB,OAAO;IAAE,MAAM,QAAQ,KAAK,EAAE;IAAG,IAAI;GAAI;EAAE;EACtE;GAAE,OAAO;GAAmB,OAAO;IAAE,MAAM,QAAQ,KAAK,GAAG;IAAG,IAAI;GAAI;EAAE;EACxE;GACE,OAAO;GACP,OAAO;IAAE,MAAM,IAAI,KAAK,MAAM,OAAO,CAAC;IAAG,IAAI,IAAI,KAAK,MAAM,QAAQ,GAAG,CAAC;GAAE;EAC5E;EACA;GACE,OAAO;GACP,OAAO;IAAE,MAAM,IAAI,KAAK,MAAM,QAAQ,GAAG,CAAC;IAAG,IAAI,IAAI,KAAK,MAAM,OAAO,CAAC;GAAE;EAC5E;CACF;AACF"}

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

@@ -0,0 +1,24 @@
+import { DateRange } from "./dates.js";
+import { DatePickerProps } from "./date-picker.js";
+import { DatePreset } from "./date-presets.js";
+//#region src/components/date-picker/date-range-picker.d.ts
+export type DateRangePickerProps = Omit<DatePickerProps, 'value' | 'defaultValue' | 'onValueChange' | 'placeholder'> & {
+  /** Período escolhido (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;
+  placeholder?: string;
+  /**
+   * Atalhos de período acima do calendário ("Últimos 7 dias"). `true` usa os padrão de
+   * `getDatePresets()`; ou passe a sua lista. Atalhos fora de `minDate`/`maxDate` ficam desabilitados.
+   */
+  presets?: boolean | DatePreset[];
+};
+/**
+ * Campo de período: um gatilho que mostra o início e o fim e abre um Calendar para escolher os dois
+ * dias. No native os atalhos ficam numa linha quebrável acima do calendário (sem coluna lateral).
+ */
+export declare function DateRangePicker({ value, defaultValue, onValueChange, minDate, maxDate, locale, weekStartsOn, placeholder, presets, size, error, disabled, readOnly, className, accessibilityLabel, accessibilityHint, testID }: DateRangePickerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=date-range-picker.d.ts.map

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

@@ -0,0 +1,78 @@
+import { Button } from "../button/button.js";
+import { isSameDay, startOfDay } from "./dates.js";
+import { Calendar } from "./calendar.js";
+import { DateSheet } from "./date-sheet.js";
+import { DateTrigger } from "./date-trigger.js";
+import { getDatePresets } from "./date-presets.js";
+import { useState } from "react";
+import { View } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/date-picker/date-range-picker.tsx
+/**
+* Campo de período: um gatilho que mostra o início e o fim e abre um Calendar para escolher os dois
+* dias. No native os atalhos ficam numa linha quebrável acima do calendário (sem coluna lateral).
+*/
+function DateRangePicker({ value, defaultValue, onValueChange, minDate, maxDate, locale = "pt-BR", weekStartsOn, placeholder = "dd/mm/aaaa – dd/mm/aaaa", presets, size, error, disabled, readOnly, className, accessibilityLabel, accessibilityHint, testID }) {
+	const [inner, setInner] = useState(defaultValue);
+	const [open, setOpen] = useState(false);
+	const range = value ?? inner;
+	const format = new Intl.DateTimeFormat(locale, {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	});
+	const text = range?.from ? `${format.format(range.from)} – ${range.to ? format.format(range.to) : "…"}` : void 0;
+	const visible = open && !readOnly && !disabled;
+	const shortcuts = presets === true ? getDatePresets() : presets || [];
+	const outOfBounds = ({ range: r }) => minDate !== void 0 && r.from < startOfDay(minDate) || maxDate !== void 0 && r.to > startOfDay(maxDate);
+	const isActive = ({ range: r }) => range?.from !== void 0 && range.to !== void 0 && isSameDay(range.from, r.from) && isSameDay(range.to, r.to);
+	function apply(next, close) {
+		if (value === void 0) setInner(next);
+		onValueChange?.(next);
+		if (close) setOpen(false);
+	}
+	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__ */ jsxs(View, {
+			className: "gap-3",
+			children: [shortcuts.length > 0 && /* @__PURE__ */ jsx(View, {
+				className: "w-70 flex-row flex-wrap gap-1",
+				children: shortcuts.map((preset) => /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: isActive(preset) ? "secondary" : "ghost",
+					accessibilityState: { selected: isActive(preset) },
+					disabled: outOfBounds(preset),
+					onPress: () => apply(preset.range, true),
+					children: preset.label
+				}, preset.label))
+			}), /* @__PURE__ */ jsx(Calendar, {
+				mode: "range",
+				value: range,
+				minDate,
+				maxDate,
+				locale,
+				weekStartsOn,
+				onValueChange: (next) => apply(next, next.to !== void 0)
+			})]
+		})
+	})] });
+}
+//#endregion
+export { DateRangePicker };
+
+//# sourceMappingURL=date-range-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.js","names":[],"sources":["../../../src/components/date-picker/date-range-picker.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { useState } from 'react'\nimport { View } from 'react-native'\nimport { Button } from '../button/button'\nimport { Calendar } from './calendar'\nimport type { DatePickerProps } from './date-picker'\nimport { type DatePreset, getDatePresets } from './date-presets'\nimport { DateSheet } from './date-sheet'\nimport { DateTrigger } from './date-trigger'\nimport { type DateRange, isSameDay, startOfDay } from './dates'\n\nexport type DateRangePickerProps = Omit<\n  DatePickerProps,\n  'value' | 'defaultValue' | 'onValueChange' | 'placeholder'\n> & {\n  /** Período escolhido (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  placeholder?: string\n  /**\n   * Atalhos de período acima do calendário (\"Últimos 7 dias\"). `true` usa os padrão de\n   * `getDatePresets()`; ou passe a sua lista. Atalhos fora de `minDate`/`maxDate` ficam desabilitados.\n   */\n  presets?: boolean | DatePreset[]\n}\n\n/**\n * Campo de período: um gatilho que mostra o início e o fim e abre um Calendar para escolher os dois\n * dias. No native os atalhos ficam numa linha quebrável acima do calendário (sem coluna lateral).\n */\nexport function DateRangePicker({\n  value,\n  defaultValue,\n  onValueChange,\n  minDate,\n  maxDate,\n  locale = 'pt-BR',\n  weekStartsOn,\n  placeholder = 'dd/mm/aaaa – dd/mm/aaaa',\n  presets,\n  size,\n  error,\n  disabled,\n  readOnly,\n  className,\n  accessibilityLabel,\n  accessibilityHint,\n  testID,\n}: DateRangePickerProps) {\n  const [inner, setInner] = useState(defaultValue)\n  const [open, setOpen] = useState(false)\n  const range = value ?? inner\n  const format = new Intl.DateTimeFormat(locale, {\n    day: '2-digit',\n    month: '2-digit',\n    year: 'numeric',\n  })\n  const text = range?.from\n    ? `${format.format(range.from)} – ${range.to ? format.format(range.to) : '…'}`\n    : undefined\n  const visible = open && !readOnly && !disabled\n\n  const shortcuts = presets === true ? getDatePresets() : presets || []\n  const outOfBounds = ({ range: r }: DatePreset) =>\n    (minDate !== undefined && r.from < startOfDay(minDate)) ||\n    (maxDate !== undefined && r.to > startOfDay(maxDate))\n  const isActive = ({ range: r }: DatePreset) =>\n    range?.from !== undefined &&\n    range.to !== undefined &&\n    isSameDay(range.from, r.from) &&\n    isSameDay(range.to, r.to)\n\n  function apply(next: DateRange, close: boolean) {\n    if (value === undefined) setInner(next)\n    onValueChange?.(next)\n    if (close) setOpen(false)\n  }\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        <View className=\"gap-3\">\n          {shortcuts.length > 0 && (\n            <View className=\"w-70 flex-row flex-wrap gap-1\">\n              {shortcuts.map((preset) => (\n                <Button\n                  key={preset.label}\n                  size=\"sm\"\n                  variant={isActive(preset) ? 'secondary' : 'ghost'}\n                  accessibilityState={{ selected: isActive(preset) }}\n                  disabled={outOfBounds(preset)}\n                  onPress={() => apply(preset.range, true)}\n                >\n                  {preset.label}\n                </Button>\n              ))}\n            </View>\n          )}\n          <Calendar\n            mode=\"range\"\n            value={range}\n            minDate={minDate}\n            maxDate={maxDate}\n            locale={locale}\n            weekStartsOn={weekStartsOn}\n            onValueChange={(next) => apply(next, next.to !== undefined)}\n          />\n        </View>\n      </DateSheet>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAiCA,SAAgB,gBAAgB,EAC9B,OACA,cACA,eACA,SACA,SACA,SAAS,SACT,cACA,cAAc,2BACd,SACA,MACA,OACA,UACA,UACA,WACA,oBACA,mBACA,UACuB;CACvB,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,QAAQ,SAAS;CACvB,MAAM,SAAS,IAAI,KAAK,eAAe,QAAQ;EAC7C,KAAK;EACL,OAAO;EACP,MAAM;CACR,CAAC;CACD,MAAM,OAAO,OAAO,OAChB,GAAG,OAAO,OAAO,MAAM,IAAI,EAAE,KAAK,MAAM,KAAK,OAAO,OAAO,MAAM,EAAE,IAAI,QACvE,KAAA;CACJ,MAAM,UAAU,QAAQ,CAAC,YAAY,CAAC;CAEtC,MAAM,YAAY,YAAY,OAAO,eAAe,IAAI,WAAW,CAAC;CACpE,MAAM,eAAe,EAAE,OAAO,QAC3B,YAAY,KAAA,KAAa,EAAE,OAAO,WAAW,OAAO,KACpD,YAAY,KAAA,KAAa,EAAE,KAAK,WAAW,OAAO;CACrD,MAAM,YAAY,EAAE,OAAO,QACzB,OAAO,SAAS,KAAA,KAChB,MAAM,OAAO,KAAA,KACb,UAAU,MAAM,MAAM,EAAE,IAAI,KAC5B,UAAU,MAAM,IAAI,EAAE,EAAE;CAE1B,SAAS,MAAM,MAAiB,OAAgB;EAC9C,IAAI,UAAU,KAAA,GAAW,SAAS,IAAI;EACtC,gBAAgB,IAAI;EACpB,IAAI,OAAO,QAAQ,KAAK;CAC1B;CAEA,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,qBAAC,MAAD;GAAM,WAAU;GAAhB,UAAA,CACG,UAAU,SAAS,KAClB,oBAAC,MAAD;IAAM,WAAU;IACb,UAAA,UAAU,KAAK,WACd,oBAAC,QAAD;KAEE,MAAK;KACL,SAAS,SAAS,MAAM,IAAI,cAAc;KAC1C,oBAAoB,EAAE,UAAU,SAAS,MAAM,EAAE;KACjD,UAAU,YAAY,MAAM;KAC5B,eAAe,MAAM,OAAO,OAAO,IAAI;KAEtC,UAAA,OAAO;IACF,GARD,OAAO,KAQN,CACT;GACG,CAAA,GAER,oBAAC,UAAD;IACE,MAAK;IACL,OAAO;IACE;IACA;IACD;IACM;IACd,gBAAgB,SAAS,MAAM,MAAM,KAAK,OAAO,KAAA,CAAS;GAC3D,CAAA,CACG;;CACG,CAAA,CACX,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,33 @@
+import { Backdrop } from "../_shared/backdrop.js";
+import { Modal, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/date-picker/date-sheet.tsx
+/**
+* Painel do calendário (uso interno). Decisão: Modal nativo centralizado com Backdrop em vez de
+* camada ancorada, porque o calendário (280 de largura, mais os atalhos no período) não cabe de
+* forma previsível junto a gatilhos estreitos ou perto da borda da tela.
+*/
+function DateSheet({ visible, onRequestClose, children, testID }) {
+	return /* @__PURE__ */ jsx(Modal, {
+		transparent: true,
+		visible,
+		animationType: "fade",
+		onRequestClose,
+		statusBarTranslucent: true,
+		children: /* @__PURE__ */ jsxs(View, {
+			className: "flex-1 items-center justify-center p-4",
+			children: [/* @__PURE__ */ jsx(Backdrop, {
+				onPress: onRequestClose,
+				testID: testID ? `${testID}-backdrop` : void 0
+			}), /* @__PURE__ */ jsx(View, {
+				testID,
+				className: "max-w-full rounded-lg border border-border-default bg-surface-elevated p-3 shadow-md",
+				children
+			})]
+		})
+	});
+}
+//#endregion
+export { DateSheet };
+
+//# sourceMappingURL=date-sheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-sheet.js","names":[],"sources":["../../../src/components/date-picker/date-sheet.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport type { ReactNode } from 'react'\nimport { Modal, View } from 'react-native'\nimport { Backdrop } from '../_shared/backdrop'\n\n/**\n * Painel do calendário (uso interno). Decisão: Modal nativo centralizado com Backdrop em vez de\n * camada ancorada, porque o calendário (280 de largura, mais os atalhos no período) não cabe de\n * forma previsível junto a gatilhos estreitos ou perto da borda da tela.\n */\nexport function DateSheet({\n  visible,\n  onRequestClose,\n  children,\n  testID,\n}: {\n  visible: boolean\n  onRequestClose: () => void\n  children: ReactNode\n  testID?: string\n}) {\n  return (\n    <Modal\n      transparent\n      visible={visible}\n      animationType=\"fade\"\n      onRequestClose={onRequestClose}\n      statusBarTranslucent\n    >\n      <View className=\"flex-1 items-center justify-center p-4\">\n        <Backdrop onPress={onRequestClose} testID={testID ? `${testID}-backdrop` : undefined} />\n        <View\n          testID={testID}\n          className=\"max-w-full rounded-lg border border-border-default bg-surface-elevated p-3 shadow-md\"\n        >\n          {children}\n        </View>\n      </View>\n    </Modal>\n  )\n}\n"],"mappings":";;;;;;;;;AAWA,SAAgB,UAAU,EACxB,SACA,gBACA,UACA,UAMC;CACD,OACE,oBAAC,OAAD;EACE,aAAA;EACS;EACT,eAAc;EACE;EAChB,sBAAA;EAEA,UAAA,qBAAC,MAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,UAAD;IAAU,SAAS;IAAgB,QAAQ,SAAS,GAAG,OAAO,aAAa,KAAA;GAAY,CAAA,GACvF,oBAAC,MAAD;IACU;IACR,WAAU;IAET;GACG,CAAA,CACF;;CACD,CAAA;AAEX"}

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

@@ -0,0 +1,14 @@
+import { FieldTrigger } from "../select/field-trigger.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/date-picker/date-trigger.tsx
+/** Gatilho no estilo do Input que mostra a data e abre o calendário (não faz parte da API pública). */
+function DateTrigger(props) {
+	return /* @__PURE__ */ jsx(FieldTrigger, {
+		...props,
+		icon: "calendar"
+	});
+}
+//#endregion
+export { DateTrigger };
+
+//# sourceMappingURL=date-trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-trigger.js","names":[],"sources":["../../../src/components/date-picker/date-trigger.tsx"],"sourcesContent":["import { FieldTrigger, type FieldTriggerProps } from '../select/field-trigger'\n\nexport type DateTriggerProps = Omit<FieldTriggerProps, 'icon'>\n\n/** Gatilho no estilo do Input que mostra a data e abre o calendário (não faz parte da API pública). */\nexport function DateTrigger(props: DateTriggerProps) {\n  return <FieldTrigger {...props} icon=\"calendar\" />\n}\n"],"mappings":";;;;AAKA,SAAgB,YAAY,OAAyB;CACnD,OAAO,oBAAC,cAAD;EAAc,GAAI;EAAO,MAAK;CAAY,CAAA;AACnD"}

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

@@ -0,0 +1,8 @@
+//#region src/components/date-picker/dates.d.ts
+/** Um período: `to` ausente significa que só o início foi escolhido. */
+export type DateRange = {
+  from?: Date;
+  to?: Date;
+};
+//#endregion
+//# sourceMappingURL=dates.d.ts.map

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

@@ -0,0 +1,40 @@
+//#region src/components/date-picker/dates.ts
+/** Funções de data locais (sem fuso): o calendário trabalha com o dia civil, não com instantes. */
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+/** Soma meses mantendo o dia, ou o último dia do mês se ele não existir (31/jan + 1 mês = 28/fev). */
+function addMonths(d, n) {
+	const last = new Date(d.getFullYear(), d.getMonth() + n + 1, 0).getDate();
+	return new Date(d.getFullYear(), d.getMonth() + n, Math.min(d.getDate(), last));
+}
+const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const clamp = (d, min, max) => {
+	if (min && d < startOfDay(min)) return startOfDay(min);
+	if (max && d > startOfDay(max)) return startOfDay(max);
+	return d;
+};
+/** `2026-10-19`, o formato de `<input type="date">` e de formulários. */
+const toISODate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+/** Semanas do mês (linhas de 7 dias, começando em `weekStartsOn`); dias de fora são `null`. */
+function monthWeeks(year, month, weekStartsOn) {
+	const lead = (new Date(year, month, 1).getDay() - weekStartsOn + 7) % 7;
+	const days = new Date(year, month + 1, 0).getDate();
+	const cells = [...Array.from({ length: lead }, () => null), ...Array.from({ length: days }, (_, i) => new Date(year, month, i + 1))];
+	while (cells.length % 7 !== 0) cells.push(null);
+	return Array.from({ length: cells.length / 7 }, (_, w) => cells.slice(w * 7, w * 7 + 7));
+}
+/**
+* Próximo período depois de um clique em `day`: o primeiro clique define o início; o segundo, o fim
+* (um dia anterior ao início recomeça o período); com o período completo, um novo clique recomeça.
+*/
+function pickRange(range, day) {
+	if (range?.from && !range.to && day >= range.from) return {
+		from: range.from,
+		to: day
+	};
+	return { from: day };
+}
+//#endregion
+export { addDays, addMonths, clamp, isSameDay, monthWeeks, pickRange, startOfDay, toISODate };
+
+//# sourceMappingURL=dates.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dates.js","names":[],"sources":["../../../src/components/date-picker/dates.ts"],"sourcesContent":["/** Funções de data locais (sem fuso): o calendário trabalha com o dia civil, não com instantes. */\n\nexport const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate())\n\nexport const addDays = (d: Date, n: number) =>\n  new Date(d.getFullYear(), d.getMonth(), d.getDate() + n)\n\n/** Soma meses mantendo o dia, ou o último dia do mês se ele não existir (31/jan + 1 mês = 28/fev). */\nexport function addMonths(d: Date, n: number) {\n  const last = new Date(d.getFullYear(), d.getMonth() + n + 1, 0).getDate()\n  return new Date(d.getFullYear(), d.getMonth() + n, Math.min(d.getDate(), last))\n}\n\nexport const isSameDay = (a: Date, b: Date) =>\n  a.getFullYear() === b.getFullYear() &&\n  a.getMonth() === b.getMonth() &&\n  a.getDate() === b.getDate()\n\nexport const clamp = (d: Date, min?: Date, max?: Date) => {\n  if (min && d < startOfDay(min)) return startOfDay(min)\n  if (max && d > startOfDay(max)) return startOfDay(max)\n  return d\n}\n\n/** `2026-10-19`, o formato de `<input type=\"date\">` e de formulários. */\nexport const toISODate = (d: Date) =>\n  `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`\n\n/** Semanas do mês (linhas de 7 dias, começando em `weekStartsOn`); dias de fora são `null`. */\nexport function monthWeeks(year: number, month: number, weekStartsOn: number) {\n  const lead = (new Date(year, month, 1).getDay() - weekStartsOn + 7) % 7\n  const days = new Date(year, month + 1, 0).getDate()\n  const cells: (Date | null)[] = [\n    ...Array.from({ length: lead }, () => null),\n    ...Array.from({ length: days }, (_, i) => new Date(year, month, i + 1)),\n  ]\n  while (cells.length % 7 !== 0) cells.push(null)\n  return Array.from({ length: cells.length / 7 }, (_, w) => cells.slice(w * 7, w * 7 + 7))\n}\n\n/** Um período: `to` ausente significa que só o início foi escolhido. */\nexport type DateRange = { from?: Date; to?: Date }\n\n/**\n * Próximo período depois de um clique em `day`: o primeiro clique define o início; o segundo, o fim\n * (um dia anterior ao início recomeça o período); com o período completo, um novo clique recomeça.\n */\nexport function pickRange(range: DateRange | undefined, day: Date): DateRange {\n  if (range?.from && !range.to && day >= range.from) return { from: range.from, to: day }\n  return { from: day }\n}\n"],"mappings":";;AAEA,MAAa,cAAc,MAAY,IAAI,KAAK,EAAE,YAAY,GAAG,EAAE,SAAS,GAAG,EAAE,QAAQ,CAAC;AAE1F,MAAa,WAAW,GAAS,MAC/B,IAAI,KAAK,EAAE,YAAY,GAAG,EAAE,SAAS,GAAG,EAAE,QAAQ,IAAI,CAAC;;AAGzD,SAAgB,UAAU,GAAS,GAAW;CAC5C,MAAM,OAAO,IAAI,KAAK,EAAE,YAAY,GAAG,EAAE,SAAS,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,QAAQ;CACxE,OAAO,IAAI,KAAK,EAAE,YAAY,GAAG,EAAE,SAAS,IAAI,GAAG,KAAK,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;AAChF;AAEA,MAAa,aAAa,GAAS,MACjC,EAAE,YAAY,MAAM,EAAE,YAAY,KAClC,EAAE,SAAS,MAAM,EAAE,SAAS,KAC5B,EAAE,QAAQ,MAAM,EAAE,QAAQ;AAE5B,MAAa,SAAS,GAAS,KAAY,QAAe;CACxD,IAAI,OAAO,IAAI,WAAW,GAAG,GAAG,OAAO,WAAW,GAAG;CACrD,IAAI,OAAO,IAAI,WAAW,GAAG,GAAG,OAAO,WAAW,GAAG;CACrD,OAAO;AACT;;AAGA,MAAa,aAAa,MACxB,GAAG,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG;;AAGxG,SAAgB,WAAW,MAAc,OAAe,cAAsB;CAC5E,MAAM,QAAQ,IAAI,KAAK,MAAM,OAAO,CAAC,CAAC,CAAC,OAAO,IAAI,eAAe,KAAK;CACtE,MAAM,OAAO,IAAI,KAAK,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAC,QAAQ;CAClD,MAAM,QAAyB,CAC7B,GAAG,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,IAAI,GAC1C,GAAG,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,MAAM,IAAI,KAAK,MAAM,OAAO,IAAI,CAAC,CAAC,CACxE;CACA,OAAO,MAAM,SAAS,MAAM,GAAG,MAAM,KAAK,IAAI;CAC9C,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,SAAS,EAAE,IAAI,GAAG,MAAM,MAAM,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,CAAC;AACzF;;;;;AASA,SAAgB,UAAU,OAA8B,KAAsB;CAC5E,IAAI,OAAO,QAAQ,CAAC,MAAM,MAAM,OAAO,MAAM,MAAM,OAAO;EAAE,MAAM,MAAM;EAAM,IAAI;CAAI;CACtF,OAAO,EAAE,MAAM,IAAI;AACrB"}

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

@@ -0,0 +1,6 @@
+import { DateRange } from "./dates.js";
+import { Calendar, CalendarProps } from "./calendar.js";
+import { DatePicker, DatePickerProps } from "./date-picker.js";
+import { DatePreset, getDatePresets } from "./date-presets.js";
+import { DateRangePicker, DateRangePickerProps } from "./date-range-picker.js";
+export { Calendar, type CalendarProps, DatePicker, type DatePickerProps, type DatePreset, type DateRange, DateRangePicker, type DateRangePickerProps, getDatePresets };

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,11 @@
+import { ViewProps } from "react-native";
+//#region src/components/divider/divider.d.ts
+export type DividerProps = Omit<ViewProps, 'children'> & {
+  className?: string;
+  /** `vertical` precisa de um pai em linha (ou altura definida) para ocupar a altura. */
+  orientation?: 'horizontal' | 'vertical';
+};
+/** Linha fina que separa blocos de conteúdo. Usa `border/default`. */
+export declare function Divider({ className, orientation, ...props }: DividerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=divider.d.ts.map

package/dist/components/divider/divider.js

@@ -0,0 +1,16 @@
+import { cn } from "../../utils/cn.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/divider/divider.tsx
+/** Linha fina que separa blocos de conteúdo. Usa `border/default`. */
+function Divider({ className, orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		importantForAccessibility: "no",
+		className: cn("shrink-0 bg-border-default", orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch", className),
+		...props
+	});
+}
+//#endregion
+export { Divider };
+
+//# sourceMappingURL=divider.js.map

package/dist/components/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","names":[],"sources":["../../../src/components/divider/divider.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { View, type ViewProps } from 'react-native'\nimport { cn } from '../../utils/cn'\n\nexport type DividerProps = Omit<ViewProps, 'children'> & {\n  className?: string\n  /** `vertical` precisa de um pai em linha (ou altura definida) para ocupar a altura. */\n  orientation?: 'horizontal' | 'vertical'\n}\n\n/** Linha fina que separa blocos de conteúdo. Usa `border/default`. */\nexport function Divider({ className, orientation = 'horizontal', ...props }: DividerProps) {\n  return (\n    // decorativo: o RN não tem role \"separator\", então some da árvore de acessibilidade\n    <View\n      importantForAccessibility=\"no\"\n      className={cn(\n        'shrink-0 bg-border-default',\n        orientation === 'horizontal' ? 'h-px w-full' : 'w-px self-stretch',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n"],"mappings":";;;;;AAYA,SAAgB,QAAQ,EAAE,WAAW,cAAc,cAAc,GAAG,SAAuB;CACzF,OAEE,oBAAC,MAAD;EACE,2BAA0B;EAC1B,WAAW,GACT,8BACA,gBAAgB,eAAe,gBAAgB,qBAC/C,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,2 @@
+import { Divider, DividerProps } from "./divider.js";
+export { Divider, type DividerProps };

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/drawer/drawer.d.ts
+declare const drawerVariants: (props?: ({
+  side?: "bottom" | "left" | "right" | "top" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type DrawerProps = VariantProps<typeof drawerVariants> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Título do painel; também é o nome acessível dele. */
+  title: ReactNode;
+  /** O corpo do painel. */
+  children: ReactNode;
+  /** Ações do rodapé (primária à direita). Use `DrawerClose` para fechar. Sem ele, não há rodapé. */
+  footer?: ReactNode;
+  /** Elemento que abre o painel (ex.: um `<Button>`); recebe `onPress`. Dispensável no modo controlado. */
+  trigger?: ReactNode;
+  /** Nome acessível do botão de fechar (×). */
+  closeLabel?: string;
+  className?: string;
+  testID?: string;
+};
+/**
+ * Painel colado a uma borda da tela, que desliza ao abrir e fechar. Usa o `Modal` nativo (botão
+ * voltar do Android e toque no fundo fecham). Não há foco preso nem `Esc`.
+ */
+export declare function Drawer({ open, defaultOpen, onOpenChange, title, children, footer, trigger, closeLabel, side, className, testID }: DrawerProps): import("react").JSX.Element;
+/** Fecha o painel ao pressionar. Envolva um `<Button>` do rodapé (injeta `onPress`, como o `asChild`). */
+export declare function DrawerClose({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=drawer.d.ts.map

package/dist/components/drawer/drawer.js

@@ -0,0 +1,144 @@
+import { cn } from "../../utils/cn.js";
+import { CloseIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { Backdrop } from "../_shared/backdrop.js";
+import { injectHandler, useOpenState } from "../_shared/overlay-state.js";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Animated, Modal, Pressable, ScrollView, Text, View, useWindowDimensions } from "react-native";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/drawer/drawer.tsx
+const drawerVariants = cva("overflow-hidden border-border-default bg-surface-elevated shadow-2xl", {
+	variants: { side: {
+		right: "border-l",
+		left: "border-r",
+		top: "border-b",
+		bottom: "border-t"
+	} },
+	defaultVariants: { side: "right" }
+});
+const containerVariants = cva("flex-1", {
+	variants: { side: {
+		right: "flex-row justify-end",
+		left: "flex-row justify-start",
+		top: "justify-start",
+		bottom: "justify-end"
+	} },
+	defaultVariants: { side: "right" }
+});
+const CloseContext = createContext(null);
+/**
+* Painel colado a uma borda da tela, que desliza ao abrir e fechar. Usa o `Modal` nativo (botão
+* voltar do Android e toque no fundo fecham). Não há foco preso nem `Esc`.
+*/
+function Drawer({ open, defaultOpen, onOpenChange, title, children, footer, trigger, closeLabel = "Fechar", side, className, testID }) {
+	const [isOpen, setOpen] = useOpenState({
+		open,
+		defaultOpen,
+		onOpenChange
+	});
+	const close = () => setOpen(false);
+	const iconColor = useToken("--color-text-primary");
+	const { width, height } = useWindowDimensions();
+	const placement = side ?? "right";
+	const horizontal = placement === "left" || placement === "right";
+	const [mounted, setMounted] = useState(isOpen);
+	const progress = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+	useEffect(() => {
+		if (isOpen) setMounted(true);
+		const animation = Animated.timing(progress, {
+			toValue: isOpen ? 1 : 0,
+			duration: 250,
+			useNativeDriver: true
+		});
+		animation.start(({ finished }) => {
+			if (finished && !isOpen) setMounted(false);
+		});
+		return () => animation.stop();
+	}, [isOpen, progress]);
+	const offset = horizontal ? width : height;
+	const sign = placement === "right" || placement === "bottom" ? 1 : -1;
+	const translate = progress.interpolate({
+		inputRange: [0, 1],
+		outputRange: [sign * offset, 0]
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [injectHandler(trigger, "onPress", () => setOpen(true)), /* @__PURE__ */ jsx(Modal, {
+		transparent: true,
+		statusBarTranslucent: true,
+		animationType: "none",
+		visible: mounted,
+		onRequestClose: close,
+		children: /* @__PURE__ */ jsx(CloseContext.Provider, {
+			value: close,
+			children: /* @__PURE__ */ jsxs(View, {
+				className: containerVariants({ side }),
+				accessibilityViewIsModal: true,
+				children: [/* @__PURE__ */ jsx(Animated.View, {
+					pointerEvents: "box-none",
+					style: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						right: 0,
+						bottom: 0,
+						opacity: progress
+					},
+					children: /* @__PURE__ */ jsx(Backdrop, {
+						onPress: close,
+						testID: testID ? `${testID}-backdrop` : void 0
+					})
+				}), /* @__PURE__ */ jsx(Animated.View, {
+					style: [horizontal ? {
+						width: "85%",
+						maxWidth: 400
+					} : {
+						width: "100%",
+						maxHeight: "80%"
+					}, { transform: [horizontal ? { translateX: translate } : { translateY: translate }] }],
+					children: /* @__PURE__ */ jsxs(View, {
+						testID,
+						className: cn(drawerVariants({ side }), horizontal && "flex-1", className),
+						children: [
+							/* @__PURE__ */ jsxs(View, {
+								className: "flex-row items-center gap-4 border-b border-border-default px-6 py-4",
+								children: [/* @__PURE__ */ jsx(Text, {
+									accessibilityRole: "header",
+									className: "flex-1 text-lg font-semibold leading-6 text-text-primary",
+									children: title
+								}), /* @__PURE__ */ jsx(Pressable, {
+									accessibilityRole: "button",
+									accessibilityLabel: closeLabel,
+									hitSlop: 8,
+									onPress: close,
+									className: "size-8 items-center justify-center rounded-full active:bg-button-secondary-bg-hover",
+									children: /* @__PURE__ */ jsx(CloseIcon, { color: iconColor })
+								})]
+							}),
+							/* @__PURE__ */ jsx(ScrollView, {
+								className: "shrink",
+								contentContainerClassName: "gap-4 p-6",
+								children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, {
+									className: "text-sm leading-5 text-text-secondary",
+									children
+								}) : children
+							}),
+							footer && /* @__PURE__ */ jsx(View, {
+								className: "flex-row items-center justify-end gap-2 border-t border-border-default px-6 py-4",
+								children: footer
+							})
+						]
+					})
+				})]
+			})
+		})
+	})] });
+}
+/** Fecha o painel ao pressionar. Envolva um `<Button>` do rodapé (injeta `onPress`, como o `asChild`). */
+function DrawerClose({ children }) {
+	const close = useContext(CloseContext);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: injectHandler(children, "onPress", () => close?.()) });
+}
+//#endregion
+export { Drawer, DrawerClose };
+
+//# sourceMappingURL=drawer.js.map

package/dist/components/drawer/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":["RNModal"],"sources":["../../../src/components/drawer/drawer.tsx"],"sourcesContent":["/// <reference types=\"uniwind/types\" />\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { createContext, type ReactNode, useContext, useEffect, useRef, useState } from 'react'\nimport {\n  Animated,\n  Pressable,\n  Modal as RNModal,\n  ScrollView,\n  Text,\n  useWindowDimensions,\n  View,\n} from 'react-native'\nimport { cn } from '../../utils/cn'\nimport { Backdrop } from '../_shared/backdrop'\nimport { injectHandler, useOpenState } from '../_shared/overlay-state'\nimport { CloseIcon } from '../_shared/status'\nimport { useToken } from '../_shared/use-token'\n\nconst drawerVariants = cva('overflow-hidden border-border-default bg-surface-elevated shadow-2xl', {\n  variants: {\n    side: {\n      right: 'border-l',\n      left: 'border-r',\n      top: 'border-b',\n      bottom: 'border-t',\n    },\n  },\n  defaultVariants: { side: 'right' },\n})\n\nconst containerVariants = cva('flex-1', {\n  variants: {\n    side: {\n      right: 'flex-row justify-end',\n      left: 'flex-row justify-start',\n      top: 'justify-start',\n      bottom: 'justify-end',\n    },\n  },\n  defaultVariants: { side: 'right' },\n})\n\nconst CloseContext = createContext<(() => void) | null>(null)\n\ntype Side = 'right' | 'left' | 'top' | 'bottom'\n\nexport type DrawerProps = VariantProps<typeof drawerVariants> & {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Título do painel; também é o nome acessível dele. */\n  title: ReactNode\n  /** O corpo do painel. */\n  children: ReactNode\n  /** Ações do rodapé (primária à direita). Use `DrawerClose` para fechar. Sem ele, não há rodapé. */\n  footer?: ReactNode\n  /** Elemento que abre o painel (ex.: um `<Button>`); recebe `onPress`. Dispensável no modo controlado. */\n  trigger?: ReactNode\n  /** Nome acessível do botão de fechar (×). */\n  closeLabel?: string\n  className?: string\n  testID?: string\n}\n\n/**\n * Painel colado a uma borda da tela, que desliza ao abrir e fechar. Usa o `Modal` nativo (botão\n * voltar do Android e toque no fundo fecham). Não há foco preso nem `Esc`.\n */\nexport function Drawer({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  children,\n  footer,\n  trigger,\n  closeLabel = 'Fechar',\n  side,\n  className,\n  testID,\n}: DrawerProps) {\n  const [isOpen, setOpen] = useOpenState({ open, defaultOpen, onOpenChange })\n  const close = () => setOpen(false)\n  const iconColor = useToken('--color-text-primary')\n  const { width, height } = useWindowDimensions()\n  const placement: Side = side ?? 'right'\n  const horizontal = placement === 'left' || placement === 'right'\n\n  // O Modal fica montado durante a animação de saída.\n  const [mounted, setMounted] = useState(isOpen)\n  const progress = useRef(new Animated.Value(isOpen ? 1 : 0)).current\n\n  useEffect(() => {\n    if (isOpen) setMounted(true)\n    const animation = Animated.timing(progress, {\n      toValue: isOpen ? 1 : 0,\n      duration: 250,\n      useNativeDriver: true,\n    })\n    animation.start(({ finished }) => {\n      if (finished && !isOpen) setMounted(false)\n    })\n    return () => animation.stop()\n  }, [isOpen, progress])\n\n  const offset = horizontal ? width : height\n  const sign = placement === 'right' || placement === 'bottom' ? 1 : -1\n  const translate = progress.interpolate({ inputRange: [0, 1], outputRange: [sign * offset, 0] })\n\n  return (\n    <>\n      {injectHandler(trigger, 'onPress', () => setOpen(true))}\n      <RNModal\n        transparent\n        statusBarTranslucent\n        animationType=\"none\"\n        visible={mounted}\n        onRequestClose={close}\n      >\n        <CloseContext.Provider value={close}>\n          <View className={containerVariants({ side })} accessibilityViewIsModal>\n            <Animated.View\n              pointerEvents=\"box-none\"\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                right: 0,\n                bottom: 0,\n                opacity: progress,\n              }}\n            >\n              <Backdrop onPress={close} testID={testID ? `${testID}-backdrop` : undefined} />\n            </Animated.View>\n            <Animated.View\n              style={[\n                horizontal ? { width: '85%', maxWidth: 400 } : { width: '100%', maxHeight: '80%' },\n                { transform: [horizontal ? { translateX: translate } : { translateY: translate }] },\n              ]}\n            >\n              <View\n                testID={testID}\n                className={cn(drawerVariants({ side }), horizontal && 'flex-1', className)}\n              >\n                <View className=\"flex-row items-center gap-4 border-b border-border-default px-6 py-4\">\n                  <Text\n                    accessibilityRole=\"header\"\n                    className=\"flex-1 text-lg font-semibold leading-6 text-text-primary\"\n                  >\n                    {title}\n                  </Text>\n                  <Pressable\n                    accessibilityRole=\"button\"\n                    accessibilityLabel={closeLabel}\n                    hitSlop={8}\n                    onPress={close}\n                    className=\"size-8 items-center justify-center rounded-full active:bg-button-secondary-bg-hover\"\n                  >\n                    <CloseIcon color={iconColor} />\n                  </Pressable>\n                </View>\n                <ScrollView className=\"shrink\" contentContainerClassName=\"gap-4 p-6\">\n                  {typeof children === 'string' ? (\n                    <Text className=\"text-sm leading-5 text-text-secondary\">{children}</Text>\n                  ) : (\n                    children\n                  )}\n                </ScrollView>\n                {footer && (\n                  <View className=\"flex-row items-center justify-end gap-2 border-t border-border-default px-6 py-4\">\n                    {footer}\n                  </View>\n                )}\n              </View>\n            </Animated.View>\n          </View>\n        </CloseContext.Provider>\n      </RNModal>\n    </>\n  )\n}\n\n/** Fecha o painel ao pressionar. Envolva um `<Button>` do rodapé (injeta `onPress`, como o `asChild`). */\nexport function DrawerClose({ children }: { children: ReactNode }) {\n  const close = useContext(CloseContext)\n  return <>{injectHandler(children, 'onPress', () => close?.())}</>\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { Drawer, DrawerClose, DrawerProps } from "./drawer.js";
+export { Drawer, DrawerClose, type DrawerProps };

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

@@ -0,0 +1,31 @@
+import { ReactElement, ReactNode } from "react";
+//#region src/components/field/field.d.ts
+export type FieldProps = {
+  /** Texto do rótulo. */
+  label: string;
+  /** Exibe um asterisco vermelho após o rótulo. */
+  required?: boolean;
+  /** Propaga vermelho para rótulo, borda do controle e texto de apoio. */
+  error?: boolean;
+  disabled?: boolean;
+  /** Propaga somente leitura ao controle. */
+  readOnly?: boolean;
+  /** Tamanho do rótulo e do controle (o `sm` usa rótulo de 12px). */
+  size?: 'sm' | 'md' | 'lg';
+  /** Instrução (estado normal) ou mensagem de erro (estado error). */
+  supportingText?: ReactNode;
+  /** O controle: Input, Textarea ou Select. Recebe disabled/error/size e o nome acessível. */
+  children: ReactElement<{
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    error?: boolean;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+  }>;
+  className?: string;
+};
+/** Combina rótulo + controle + texto de apoio — o jeito certo de montar um campo de formulário. */
+export declare function Field({ label, required, error, disabled, readOnly, size, supportingText, children, className }: FieldProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=field.d.ts.map

package/dist/components/field/field.js

@@ -0,0 +1,52 @@
+import { cn } from "../../utils/cn.js";
+import { StatusIcon } from "../_shared/status.js";
+import { useToken } from "../_shared/use-token.js";
+import { cloneElement } from "react";
+import { Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/field/field.tsx
+/** Combina rótulo + controle + texto de apoio — o jeito certo de montar um campo de formulário. */
+function Field({ label, required, error, disabled, readOnly, size, supportingText, children, className }) {
+	const errorColor = useToken("--color-status-error-text");
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn("gap-1", className),
+		children: [
+			/* @__PURE__ */ jsxs(Text, {
+				className: cn("font-medium text-field-text-label", size === "sm" ? "text-xs leading-4" : "text-sm", error && "text-status-error-text"),
+				children: [label, required ? /* @__PURE__ */ jsx(Text, {
+					className: "text-status-error-text",
+					accessibilityElementsHidden: true,
+					importantForAccessibility: "no",
+					children: " *"
+				}) : null]
+			}),
+			cloneElement(children, {
+				disabled: disabled ?? children.props.disabled,
+				readOnly: readOnly ?? children.props.readOnly,
+				size: size ?? children.props.size,
+				error: error ?? children.props.error,
+				accessibilityLabel: children.props.accessibilityLabel ?? label,
+				accessibilityHint: children.props.accessibilityHint ?? (typeof supportingText === "string" ? supportingText : void 0)
+			}),
+			supportingText ? /* @__PURE__ */ jsxs(View, {
+				className: "flex-row items-center gap-1",
+				accessibilityLiveRegion: error ? "polite" : void 0,
+				children: [error ? /* @__PURE__ */ jsx(StatusIcon, {
+					status: "error",
+					color: errorColor,
+					style: {
+						width: 16,
+						height: 16
+					}
+				}) : null, typeof supportingText === "string" ? /* @__PURE__ */ jsx(Text, {
+					className: cn("shrink text-xs leading-4 text-field-text-label", error && "text-status-error-text"),
+					children: supportingText
+				}) : supportingText]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Field };
+
+//# sourceMappingURL=field.js.map