@strategicos/ui 0.8.0 → 0.9.0

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

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Derivado do DatePicker do Tremor (Apache-2.0) e modificado pela Strategicos.
+// Ver THIRD_PARTY_NOTICES.md.
+import * as React from "react";
+import { Calendar } from "./calendar.js";
+import { clampDate, formatDateTime, outOfRange, parseDateValue, toDateValue, PickerFooter, PickerTrigger, } from "./dates.js";
+import { useFieldControl } from "./field.js";
+import { Popover, PopoverContent } from "./popover.js";
+import { TimeInput } from "./time-input.js";
+/**
+ * Data e hora num calendário com campo de hora, como o DateTimePicker do
+ * Mantine. Para digitar a data e a hora direto, `DateInput withTime`.
+ *
+ *   <Field label="Reunião">
+ *     <DateTimePicker value={inicio} onValueChange={setInicio} />
+ *   </Field>
+ *
+ * - Valor: "AAAA-MM-DD HH:mm:ss" ou `null`.
+ * - `withApplyButton` vem LIGADO (o botão de confirmar do Mantine): escolhe-se
+ *   o dia e a hora e grava-se no Aplicar. Desligado, cada mudança já grava e o
+ *   calendário fica aberto até sair dele.
+ * - `defaultTime`: hora usada quando ainda não há valor. Padrão: 00:00.
+ * - `minDate`/`maxDate` limitam o DIA ("AAAA-MM-DD").
+ */
+function DateTimePicker({ value, onValueChange, placeholder = "Selecione data e hora", minDate, maxDate, clearable = false, withApplyButton = true, withSeconds = false, defaultTime = "00:00", valueFormatter = formatDateTime, captionLayout, size, disabled, className, wrapperClassName, align = "start", onOpenChange, ...props }) {
+    const controlProps = useFieldControl(props, { withRequired: false });
+    const [open, setOpen] = React.useState(false);
+    const [draft, setDraft] = React.useState(value);
+    // A hora existe antes do dia: dá para acertá-la e escolher o dia depois.
+    const [time, setTime] = React.useState(() => timeOf(value, defaultTime));
+    const shown = withApplyButton ? draft : value;
+    const selected = parseDateValue(shown);
+    const committed = parseDateValue(value);
+    const min = parseDateValue(minDate);
+    const max = parseDateValue(maxDate);
+    function handleOpenChange(o) {
+        setOpen(o);
+        if (o) {
+            setDraft(value);
+            setTime(timeOf(value, defaultTime));
+        }
+        onOpenChange?.(o);
+    }
+    function update(v) {
+        if (withApplyButton)
+            setDraft(v);
+        else
+            onValueChange(v);
+    }
+    // `time` é sempre "HH:mm:ss" (timeOf e changeTime completam).
+    function pickDay(day) {
+        update(`${toDateValue(day)} ${time}`);
+    }
+    function changeTime(t) {
+        // O campo nativo devolve "" enquanto a hora está pela metade.
+        if (!/^\d{2}:\d{2}(:\d{2})?$/.test(t))
+            return;
+        const full = t.length === 5 ? `${t}:00` : t;
+        setTime(full);
+        if (shown)
+            update(`${shown.slice(0, 10)} ${full}`);
+    }
+    function apply() {
+        if (draft !== value)
+            onValueChange(draft);
+        handleOpenChange(false);
+    }
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PickerTrigger, { slot: "date-time-picker", text: committed ? valueFormatter(committed) : null, placeholder: placeholder, open: open, size: size, disabled: disabled, clearable: clearable, onClear: () => onValueChange(null), className: className, wrapperClassName: wrapperClassName, controlProps: controlProps }), _jsxs(PopoverContent, { align: align, className: "w-auto max-w-[calc(100vw-2rem)] p-0", onOpenAutoFocus: e => e.preventDefault(), children: [_jsx(Calendar, { mode: "single", required: true, autoFocus: true, selected: selected, onSelect: pickDay, defaultMonth: selected ?? clampDate(new Date(), min, max), startMonth: min, endMonth: max, disabled: outOfRange(min, max), captionLayout: captionLayout }), _jsx(PickerFooter, { onCancel: withApplyButton ? () => handleOpenChange(false) : undefined, onApply: withApplyButton ? apply : undefined, applyDisabled: !draft, children: _jsx(TimeInput, { "aria-label": "Hora", withSeconds: withSeconds, value: withSeconds ? time : time.slice(0, 5), onChange: e => changeTime(e.target.value), className: "w-32" }) })] })] }));
+}
+/** "HH:mm:ss" do valor, ou a hora padrão. */
+function timeOf(value, defaultTime) {
+    const t = value && value.length >= 16 ? value.slice(11, 19) : defaultTime;
+    return t.length === 5 ? `${t}:00` : t;
+}
+export { DateTimePicker };
+//# sourceMappingURL=date-time-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-picker.js","sourceRoot":"","sources":["../../src/components/date-time-picker.tsx"],"names":[],"mappings":"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"}

package/dist/components/dates.d.ts

@@ -0,0 +1,94 @@
+import * as React from "react";
+import type { Matcher } from "react-day-picker";
+/** "AAAA-MM-DD" ou "AAAA-MM-DD HH:mm[:ss]" → Date local. Vazio ou inválido →
+ *  undefined. */
+declare function parseDateValue(value: string | null | undefined): Date | undefined;
+/** Date → "AAAA-MM-DD" (dia local). */
+declare function toDateValue(date: Date): string;
+/** Date → "AAAA-MM-DD HH:mm:ss" (hora local). */
+declare function toDateTimeValue(date: Date): string;
+/** 15/10/2026 */
+declare const formatDate: (date: Date) => string;
+/** 15/10/2026 14:30 */
+declare const formatDateTime: (date: Date) => string;
+declare function clampDate(date: Date, min?: Date, max?: Date): Date;
+/** Dias fora de [min, max] para o `disabled` do Calendar. */
+declare function outOfRange(min?: Date, max?: Date): Matcher[];
+/** Compara só o dia ("AAAA-MM-DD…" ordena como texto). */
+declare function inRange(value: string, minDate?: string, maxDate?: string): boolean;
+type FieldControlProps = {
+    id?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+};
+/** Gatilho dos pickers: o visual do SelectTrigger, com ícone de calendário e,
+ *  opcionalmente, um X para limpar. Vai dentro de um <Popover>. */
+declare function PickerTrigger({ text, placeholder, open, size, disabled, clearable, onClear, className, wrapperClassName, slot, controlProps, }: {
+    text: string | null;
+    placeholder: string;
+    open: boolean;
+    size?: "sm" | "default" | null;
+    disabled?: boolean;
+    clearable?: boolean;
+    onClear: () => void;
+    className?: string;
+    wrapperClassName?: string;
+    slot: string;
+    controlProps: FieldControlProps;
+}): React.JSX.Element;
+/** X de limpar. Fica ao lado do gatilho, não dentro: botão dentro de botão não
+ *  é HTML válido. */
+declare function ClearButton({ onClick, className }: {
+    onClick: () => void;
+    className?: string;
+}): React.JSX.Element;
+/** Atalhos ao lado do calendário (no celular, uma faixa em cima). */
+declare function PresetList<T>({ presets, isActive, isDisabled, onSelect, }: {
+    presets: {
+        label: string;
+        value: T;
+    }[];
+    isActive: (value: T) => boolean;
+    isDisabled: (value: T) => boolean;
+    onSelect: (value: T) => void;
+}): React.JSX.Element;
+/** Rodapé do calendário: algo à esquerda (dica, hora) e, com
+ *  `withApplyButton`, Cancelar e Aplicar à direita. Para texto de dica, use
+ *  <PickerHint>; o rodapé não tinge o que vai nele (a hora é um campo). */
+declare function PickerFooter({ children, onCancel, onApply, applyDisabled, }: {
+    children?: React.ReactNode;
+    onCancel?: () => void;
+    onApply?: () => void;
+    applyDisabled?: boolean;
+}): React.JSX.Element;
+declare function PickerHint({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Props comuns aos pickers (DatePickerInput e DateTimePicker). */
+type PickerBaseProps = FieldControlProps & {
+    placeholder?: string;
+    /** Primeiro dia que pode ser escolhido ("AAAA-MM-DD"). */
+    minDate?: string;
+    /** Último dia que pode ser escolhido ("AAAA-MM-DD"). */
+    maxDate?: string;
+    /** Um X no gatilho limpa o valor. */
+    clearable?: boolean;
+    /** Rodapé com Cancelar e Aplicar: a escolha só vale ao aplicar, e fechar
+     *  de outro jeito descarta. Sem ele, escolher já grava. */
+    withApplyButton?: boolean;
+    /** Como o valor aparece no gatilho. */
+    valueFormatter?: (date: Date) => string;
+    /** "dropdown" troca o título do mês por seletores de mês e ano. */
+    captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+    size?: "sm" | "default";
+    disabled?: boolean;
+    /** Classes do gatilho. */
+    className?: string;
+    /** Classes do invólucro, que só existe com `clearable`. */
+    wrapperClassName?: string;
+    align?: "start" | "center" | "end";
+    onOpenChange?: (open: boolean) => void;
+};
+export { parseDateValue, toDateValue, toDateTimeValue, formatDate, formatDateTime, clampDate, outOfRange, inRange, PickerTrigger, ClearButton, PresetList, PickerFooter, PickerHint, type FieldControlProps, type PickerBaseProps, };
+//# sourceMappingURL=dates.d.ts.map

package/dist/components/dates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../src/components/dates.tsx"],"names":[],"mappings":"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"}

package/dist/components/dates.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarIcon, XIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { PopoverTrigger } from "./popover.js";
+import { selectTriggerVariants } from "./select.js";
+/**
+ * Utilitários dos campos de data (DateInput, DatePickerInput, DateTimePicker).
+ *
+ * Os valores seguem o Mantine 8: texto, nunca `Date`.
+ *   - data:        "AAAA-MM-DD"            (como o <input type="date">)
+ *   - data e hora: "AAAA-MM-DD HH:mm:ss"
+ * Sem fuso: 2026-10-15 é 15/10 em qualquer lugar. Um Date à meia-noite UTC
+ * vira o dia 14 no Brasil.
+ */
+const DATE_RE = /^(\d{4})-(\d{2})-(\d{2})(?:[ T](\d{2}):(\d{2})(?::(\d{2}))?)?$/;
+/** "AAAA-MM-DD" ou "AAAA-MM-DD HH:mm[:ss]" → Date local. Vazio ou inválido →
+ *  undefined. */
+function parseDateValue(value) {
+    const m = value ? DATE_RE.exec(value) : null;
+    if (!m)
+        return undefined;
+    const [y, mo, d, h = "0", mi = "0", s = "0"] = m.slice(1);
+    const date = new Date(Number(y), Number(mo) - 1, Number(d), Number(h), Number(mi), Number(s));
+    // 2026-02-31 não existe: o Date rolaria para março.
+    if (date.getMonth() !== Number(mo) - 1 || Number(h) > 23 || Number(mi) > 59 || Number(s) > 59)
+        return undefined;
+    return date;
+}
+const pad = (n) => String(n).padStart(2, "0");
+/** Date → "AAAA-MM-DD" (dia local). */
+function toDateValue(date) {
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+/** Date → "AAAA-MM-DD HH:mm:ss" (hora local). */
+function toDateTimeValue(date) {
+    return `${toDateValue(date)} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+}
+/** 15/10/2026 */
+const formatDate = (date) => date.toLocaleDateString("pt-BR");
+/** 15/10/2026 14:30 */
+const formatDateTime = (date) => `${formatDate(date)} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+// ── Limites ───────────────────────────────────────────────────────────────────
+function clampDate(date, min, max) {
+    if (min && date < min)
+        return min;
+    if (max && date > max)
+        return max;
+    return date;
+}
+/** Dias fora de [min, max] para o `disabled` do Calendar. */
+function outOfRange(min, max) {
+    const m = [];
+    if (min)
+        m.push({ before: min });
+    if (max)
+        m.push({ after: max });
+    return m;
+}
+/** Compara só o dia ("AAAA-MM-DD…" ordena como texto). */
+function inRange(value, minDate, maxDate) {
+    const day = value.slice(0, 10);
+    return (!minDate || day >= minDate.slice(0, 10)) && (!maxDate || day <= maxDate.slice(0, 10));
+}
+/** Gatilho dos pickers: o visual do SelectTrigger, com ícone de calendário e,
+ *  opcionalmente, um X para limpar. Vai dentro de um <Popover>. */
+function PickerTrigger({ text, placeholder, open, size = "default", disabled, clearable, onClear, className, wrapperClassName, slot, controlProps, }) {
+    const showClear = clearable && !!text && !disabled;
+    const trigger = (_jsx(PopoverTrigger, { asChild: true, disabled: disabled, children: _jsxs("button", { type: "button", "aria-haspopup": "dialog", "aria-expanded": open, "data-slot": slot, "data-size": size ?? "default", "data-placeholder": text ? undefined : "", ...controlProps, className: cn(selectTriggerVariants({ size }), "w-full min-w-0 cursor-pointer justify-start text-left tabular-nums", showClear && "pr-9", className), children: [_jsx(CalendarIcon, { className: "text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: text ?? placeholder })] }) }));
+    if (!clearable)
+        return trigger;
+    return (_jsxs("div", { "data-slot": `${slot}-wrapper`, className: cn("relative w-full min-w-0", wrapperClassName), children: [trigger, showClear && _jsx(ClearButton, { onClick: onClear })] }));
+}
+/** X de limpar. Fica ao lado do gatilho, não dentro: botão dentro de botão não
+ *  é HTML válido. */
+function ClearButton({ onClick, className }) {
+    return (_jsx("button", { type: "button", onClick: onClick, "aria-label": "Limpar data", className: cn("absolute inset-y-0 right-1.5 my-auto flex size-6 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50", className), children: _jsx(XIcon, { className: "size-4" }) }));
+}
+/** Atalhos ao lado do calendário (no celular, uma faixa em cima). */
+function PresetList({ presets, isActive, isDisabled, onSelect, }) {
+    return (_jsx("ul", { "data-slot": "date-picker-presets", className: "flex gap-1 overflow-x-auto border-b border-border p-2 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-b-0", children: presets.map(p => (_jsx("li", { className: "shrink-0", children: _jsx("button", { type: "button", disabled: isDisabled(p.value), "aria-pressed": isActive(p.value), onClick: () => onSelect(p.value), className: "w-full cursor-pointer truncate rounded-md px-2.5 py-1.5 text-left text-sm whitespace-nowrap outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:font-medium", children: p.label }) }, p.label))) }));
+}
+/** Rodapé do calendário: algo à esquerda (dica, hora) e, com
+ *  `withApplyButton`, Cancelar e Aplicar à direita. Para texto de dica, use
+ *  <PickerHint>; o rodapé não tinge o que vai nele (a hora é um campo). */
+function PickerFooter({ children, onCancel, onApply, applyDisabled, }) {
+    return (_jsxs("div", { "data-slot": "date-picker-footer", className: "flex flex-wrap items-center gap-2 border-t border-border p-3", children: [_jsx("div", { className: "min-w-0 flex-1", children: children }), onApply && (_jsxs("div", { className: "flex shrink-0 gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, children: "Cancelar" }), _jsx(Button, { type: "button", onClick: onApply, disabled: applyDisabled, children: "Aplicar" })] }))] }));
+}
+function PickerHint({ children }) {
+    return _jsx("span", { "aria-live": "polite", className: "text-xs text-muted-foreground", children: children });
+}
+export { parseDateValue, toDateValue, toDateTimeValue, formatDate, formatDateTime, clampDate, outOfRange, inRange, PickerTrigger, ClearButton, PresetList, PickerFooter, PickerHint, };
+//# sourceMappingURL=dates.js.map

package/dist/components/dates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dates.js","sourceRoot":"","sources":["../../src/components/dates.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type InputProps } from "./input.js";
+/**
+ * Hora, como o TimeInput do Mantine: o <input type="time"> do navegador, no
+ * visual do Input. O valor é "HH:mm" (ou "HH:mm:ss" com `withSeconds`).
+ *
+ *   <Field label="Horário"><TimeInput value={hora} onChange={e => setHora(e.target.value)} /></Field>
+ *
+ * O formato de 12 ou 24 horas segue o sistema do usuário — no Brasil, 24 horas.
+ * O relógio à direita é o do navegador (abre a lista de horas no Chrome).
+ */
+declare function TimeInput({ withSeconds, className, ...props }: Omit<InputProps, "type"> & {
+    withSeconds?: boolean;
+}): React.JSX.Element;
+export { TimeInput };
+//# sourceMappingURL=time-input.d.ts.map

package/dist/components/time-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../src/components/time-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,YAAY,CAAA;AAEnD;;;;;;;;GAQG;AACH,iBAAS,SAAS,CAAC,EACjB,WAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,qBASA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/time-input.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Input } from "./input.js";
+/**
+ * Hora, como o TimeInput do Mantine: o <input type="time"> do navegador, no
+ * visual do Input. O valor é "HH:mm" (ou "HH:mm:ss" com `withSeconds`).
+ *
+ *   <Field label="Horário"><TimeInput value={hora} onChange={e => setHora(e.target.value)} /></Field>
+ *
+ * O formato de 12 ou 24 horas segue o sistema do usuário — no Brasil, 24 horas.
+ * O relógio à direita é o do navegador (abre a lista de horas no Chrome).
+ */
+function TimeInput({ withSeconds = false, className, ...props }) {
+    return (_jsx(Input, { type: "time", step: withSeconds ? 1 : 60, className: cn("tabular-nums", className), ...props }));
+}
+export { TimeInput };
+//# sourceMappingURL=time-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-input.js","sourceRoot":"","sources":["../../src/components/time-input.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAIZ,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,KAAK,EAAmB,MAAM,YAAY,CAAA;AAEnD;;;;;;;;GAQG;AACH,SAAS,SAAS,CAAC,EACjB,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,GAAG,KAAK,EAGT;IACC,OAAO,CACL,KAAC,KAAK,IACJ,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAC1B,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,KACpC,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strategicos/ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Componentes React da Strategicos (shadcn + Radix + Tailwind v4).",
   "license": "UNLICENSED",
   "repository": {

package/src/components/date-input.tsx

@@ -0,0 +1,287 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+
+import { cn } from "../lib/utils.js"
+import { Calendar } from "./calendar.js"
+import {
+  clampDate, ClearButton, formatDate, formatDateTime, inRange, outOfRange,
+  parseDateValue, toDateValue, type FieldControlProps,
+} from "./dates.js"
+import { Input } from "./input.js"
+import { Popover, PopoverAnchor, PopoverContent } from "./popover.js"
+
+/** Põe as barras (e o espaço e os dois-pontos da hora) entre os dígitos.
+ *  Separador só ENTRE grupos já começados: "15" e não "15/" — assim apagar
+ *  para trás nunca esbarra num separador que volta sozinho. */
+function mask(digits: string, withTime: boolean) {
+  const d = digits.slice(0, withTime ? 12 : 8)
+  let out = d.slice(0, 2)
+  if (d.length > 2) out += "/" + d.slice(2, 4)
+  if (d.length > 4) out += "/" + d.slice(4, 8)
+  if (d.length > 8) out += " " + d.slice(8, 10)
+  if (d.length > 10) out += ":" + d.slice(10, 12)
+  return out
+}
+
+const countDigits = (s: string) => s.replace(/\D/g, "").length
+
+/** Posição do cursor logo depois do n-ésimo dígito do texto mascarado. */
+function caretAfterDigits(masked: string, n: number) {
+  if (n === 0) return 0
+  let seen = 0
+  for (let i = 0; i < masked.length; i++) {
+    if (/\d/.test(masked[i]!) && ++seen === n) return i + 1
+  }
+  return masked.length
+}
+
+/**
+ * Texto digitado → valor. Data completa → "AAAA-MM-DD"; com hora →
+ * "AAAA-MM-DD HH:mm:00". Incompleto ou inexistente (31/02) → undefined.
+ * `dateOnlyOk`: com hora, aceita só a data (hora 00:00) — vale ao sair do
+ * campo, não enquanto se digita (a hora pode estar vindo).
+ */
+function parseTyped(text: string, withTime: boolean, dateOnlyOk: boolean): string | undefined {
+  const d = text.replace(/\D/g, "")
+  if (d.length < 8) return undefined
+  const date = `${d.slice(4, 8)}-${d.slice(2, 4)}-${d.slice(0, 2)}`
+  let v: string
+  if (!withTime) v = date
+  else if (d.length === 12) v = `${date} ${d.slice(8, 10)}:${d.slice(10, 12)}:00`
+  else if (dateOnlyOk && d.length === 8) v = `${date} 00:00:00`
+  else return undefined
+  return parseDateValue(v) ? v : undefined
+}
+
+/**
+ * Data digitada, como o DateInput do Mantine: dd/mm/aaaa com as barras postas
+ * sozinhas, e um calendário que abre no clique (ou ↓) para quem prefere
+ * escolher. `withTime` acrescenta a hora: dd/mm/aaaa hh:mm.
+ *
+ *   <Field label="Início">
+ *     <DateInput value={inicio} onValueChange={setInicio} maxDate={fim} />
+ *   </Field>
+ *
+ * - Valor: "AAAA-MM-DD" (com `withTime`, "AAAA-MM-DD HH:mm:ss") ou `null`.
+ * - Grava assim que o texto vira uma data válida dentro de `minDate`/`maxDate`.
+ *   Ao sair do campo, texto incompleto ou fora dos limites volta ao último
+ *   valor válido; campo vazio grava `null`.
+ * - Colar "2026-10-15" (ISO) também funciona.
+ *
+ * Teclado: ↓ abre o calendário e põe o foco nele; Enter confirma o texto; Esc
+ * fecha o calendário.
+ */
+function DateInput({
+  value,
+  onValueChange,
+  withTime = false,
+  minDate,
+  maxDate,
+  placeholder = withTime ? "dd/mm/aaaa hh:mm" : "dd/mm/aaaa",
+  clearable = false,
+  withCalendar = true,
+  captionLayout,
+  disabled,
+  required,
+  name,
+  className,
+  wrapperClassName,
+  onBlur,
+  "aria-invalid": ariaInvalid,
+  ...props
+}: FieldControlProps & {
+  value: string | null
+  onValueChange: (value: string | null) => void
+  /** Data e hora (dd/mm/aaaa hh:mm). */
+  withTime?: boolean
+  /** Primeiro dia aceito ("AAAA-MM-DD"). */
+  minDate?: string
+  /** Último dia aceito ("AAAA-MM-DD"). */
+  maxDate?: string
+  placeholder?: string
+  /** Um X no campo limpa o valor. */
+  clearable?: boolean
+  /** Calendário no clique. Sem ele, o campo é só de digitar. */
+  withCalendar?: boolean
+  captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years"
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  /** Classes do <input>. */
+  className?: string
+  /** Classes do invólucro (largura e posição no layout). */
+  wrapperClassName?: string
+  onBlur?: React.FocusEventHandler<HTMLInputElement>
+}) {
+  const display = React.useCallback((v: string | null) => {
+    const d = parseDateValue(v)
+    return d ? (withTime ? formatDateTime(d) : formatDate(d)) : ""
+  }, [withTime])
+
+  const [text, setText] = React.useState(() => display(value))
+  const [open, setOpen] = React.useState(false)
+  // Pedido de foco nos dias (↓). Contador, e não booleano: a ↓ com o
+  // calendário já aberto também precisa levar o foco.
+  const [focusRequest, setFocusRequest] = React.useState(0)
+  const [month, setMonth] = React.useState<Date | undefined>(() => parseDateValue(value))
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const anchorRef = React.useRef<HTMLDivElement>(null)
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const caret = React.useRef<number | null>(null)
+
+  // Valor trocado por fora (outro campo, reset do formulário): o texto segue,
+  // a menos que já represente esse valor (é o que se está digitando).
+  const [prevValue, setPrevValue] = React.useState(value)
+  if (value !== prevValue) {
+    setPrevValue(value)
+    if (parseTyped(text, withTime, true) !== value) setText(display(value))
+  }
+
+  // Recoloca o cursor onde estava depois que a máscara reescreveu o texto.
+  React.useLayoutEffect(() => {
+    if (caret.current === null || !inputRef.current) return
+    inputRef.current.setSelectionRange(caret.current, caret.current)
+    caret.current = null
+  }, [text])
+
+  const accepts = (v: string | undefined): v is string => !!v && inRange(v, minDate, maxDate)
+
+  function setTyped(next: string, caretAt: number | null) {
+    caret.current = caretAt
+    setText(next)
+    const v = parseTyped(next, withTime, false)
+    if (accepts(v)) {
+      setMonth(parseDateValue(v))
+      if (v !== value) onValueChange(v)
+    }
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const raw = e.target.value
+    const before = countDigits(raw.slice(0, e.target.selectionStart ?? raw.length))
+    const next = mask(raw.replace(/\D/g, ""), withTime)
+    setTyped(next, caretAfterDigits(next, before))
+  }
+
+  function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
+    // ISO colado ("2026-10-15", "2026-10-15 14:30") vira o texto brasileiro.
+    const d = parseDateValue(e.clipboardData.getData("text").trim())
+    if (!d) return
+    e.preventDefault()
+    setTyped(withTime ? formatDateTime(d) : formatDate(d), null)
+  }
+
+  /** Sair do campo (ou Enter): grava o texto válido ou volta ao último valor. */
+  function settle() {
+    if (!text.trim()) {
+      if (value !== null) onValueChange(null)
+      return
+    }
+    const v = parseTyped(text, withTime, true)
+    if (accepts(v)) {
+      if (v !== value) onValueChange(v)
+      setText(display(v))
+    } else {
+      setText(display(value))
+    }
+  }
+
+  // O dia focável do DayPicker é o único com tabindex=0 (o escolhido ou hoje).
+  React.useEffect(() => {
+    if (!focusRequest) return
+    contentRef.current?.querySelector<HTMLButtonElement>('[role=grid] button[tabindex="0"]')?.focus()
+  }, [focusRequest])
+
+  function openCalendar(focus: boolean) {
+    if (!withCalendar || disabled) return
+    if (!open) setMonth(parseDateValue(value))
+    setOpen(true)
+    if (focus) setFocusRequest(n => n + 1)
+  }
+
+  function pickDay(day: Date) {
+    // Com hora, mantém a hora já digitada (ou a do valor, ou 00:00).
+    const current = parseTyped(text, withTime, true) ?? value
+    const time = current && current.length >= 19 ? current.slice(11, 19) : "00:00:00"
+    const v = withTime ? `${toDateValue(day)} ${time}` : toDateValue(day)
+    onValueChange(v)
+    setText(display(v))
+    setOpen(false)
+    inputRef.current?.focus()
+  }
+
+  // Digitado e completo, mas inválido ou fora dos limites: borda de erro já
+  // enquanto se digita (o Field, se houver, ainda manda no aria-invalid).
+  const typedInvalid = countDigits(text) === (withTime ? 12 : 8) && !accepts(parseTyped(text, withTime, false))
+  const min = parseDateValue(minDate)
+  const max = parseDateValue(maxDate)
+  const selected = parseDateValue(value)
+  const showClear = clearable && !!text && !disabled
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverAnchor asChild>
+        <div ref={anchorRef} data-slot="date-input-wrapper" className={cn("relative w-full min-w-0", wrapperClassName)}>
+          <Input
+            ref={inputRef}
+            data-slot="date-input"
+            value={text}
+            placeholder={placeholder}
+            disabled={disabled}
+            required={required}
+            name={name}
+            inputMode="numeric"
+            autoComplete="off"
+            aria-haspopup={withCalendar ? "dialog" : undefined}
+            aria-expanded={withCalendar ? open : undefined}
+            aria-invalid={ariaInvalid ?? (typedInvalid || undefined)}
+            leftSection={<CalendarIcon />}
+            className={cn("tabular-nums", showClear && "pr-9", className)}
+            onChange={handleChange}
+            onPaste={handlePaste}
+            onClick={() => { if (!open) openCalendar(false) }}
+            onKeyDown={e => {
+              if (e.key === "ArrowDown" && withCalendar) { e.preventDefault(); openCalendar(true) }
+              else if (e.key === "Enter") { e.preventDefault(); settle(); setOpen(false) }
+            }}
+            onBlur={e => { settle(); onBlur?.(e) }}
+            {...props}
+          />
+          {showClear && (
+            <ClearButton onClick={() => { setText(""); onValueChange(null); inputRef.current?.focus() }} />
+          )}
+        </div>
+      </PopoverAnchor>
+
+      {withCalendar && (
+        <PopoverContent
+          ref={contentRef}
+          className="w-auto p-0"
+          // O foco fica no campo: dá para continuar digitando com o calendário
+          // aberto. Só a ↓ leva o foco para os dias.
+          onOpenAutoFocus={e => e.preventDefault()}
+          onCloseAutoFocus={e => e.preventDefault()}
+          // Clicar no próprio campo não conta como "fora".
+          onInteractOutside={e => { if (anchorRef.current?.contains(e.target as Node)) e.preventDefault() }}
+        >
+          <Calendar
+            mode="single"
+            required
+            selected={selected}
+            onSelect={pickDay}
+            month={month ?? clampDate(new Date(), min, max)}
+            onMonthChange={setMonth}
+            startMonth={min}
+            endMonth={max}
+            disabled={outOfRange(min, max)}
+            captionLayout={captionLayout}
+          />
+        </PopoverContent>
+      )}
+    </Popover>
+  )
+}
+
+export { DateInput }