@strategicos/ui 0.8.0 → 0.9.1

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 }

package/src/components/date-picker-input.tsx

@@ -0,0 +1,287 @@
+"use client"
+
+// Derivado do DatePicker do Tremor (Apache-2.0) e modificado pela Strategicos.
+// Ver THIRD_PARTY_NOTICES.md.
+
+import * as React from "react"
+
+import { useIsMobile } from "../hooks/use-mobile.js"
+import { Calendar } from "./calendar.js"
+import {
+  clampDate, formatDate, inRange, outOfRange, parseDateValue, toDateValue,
+  PickerFooter, PickerHint, PickerTrigger, PresetList, type PickerBaseProps,
+} from "./dates.js"
+import { useFieldControl } from "./field.js"
+import { Popover, PopoverContent } from "./popover.js"
+
+export type DatePreset = { label: string; value: string }
+export type DateRangeValue = [string | null, string | null]
+export type DateRangePreset = { label: string; value: [string, string] }
+
+type SingleProps = PickerBaseProps & {
+  type?: "default"
+  value: string | null
+  onValueChange: (value: string | null) => void
+  presets?: DatePreset[]
+}
+
+type RangeProps = PickerBaseProps & {
+  type: "range"
+  value: DateRangeValue
+  onValueChange: (value: DateRangeValue) => void
+  presets?: DateRangePreset[]
+  /** Meses lado a lado (no celular é sempre um). Padrão: 2. */
+  numberOfColumns?: number
+}
+
+const contentCls = "flex w-auto max-w-[calc(100vw-2rem)] flex-col p-0 sm:flex-row"
+
+/**
+ * Campo que abre um calendário para escolher uma data ou um período, como o
+ * DatePickerInput do Mantine. Não se digita nele — para digitar, `DateInput`.
+ *
+ *   <Field label="Prazo">
+ *     <DatePickerInput value={prazo} onValueChange={setPrazo} minDate={inicio} clearable />
+ *   </Field>
+ *
+ *   <DatePickerInput type="range" value={[inicio, fim]} onValueChange={([i, f]) => …} withApplyButton />
+ *
+ * - Valor: "AAAA-MM-DD" (ou `[início, fim]` no `type="range"`), `null` quando vazio.
+ * - `withApplyButton`: a escolha só vale no Aplicar; fechar de outro jeito
+ *   descarta. Sem ele, escolher o dia (ou o fim do período) já grava e fecha.
+ * - `presets`: atalhos ao lado ("Hoje", "Fim do mês"…); os que caem fora de
+ *   `minDate`/`maxDate` ficam desabilitados.
+ * - Período: o primeiro clique marca o início e o segundo, o fim; se o segundo
+ *   vier antes, os dois trocam.
+ *
+ * Teclado: o calendário abre com o foco no dia escolhido (ou hoje); setas
+ * andam pelos dias, PageUp/PageDown pelos meses, Enter escolhe, Esc fecha.
+ */
+function DatePickerInput(props: SingleProps | RangeProps) {
+  return props.type === "range" ? <RangePicker {...props} /> : <SinglePicker {...props} />
+}
+
+function SinglePicker({
+  type: _type,
+  value,
+  onValueChange,
+  placeholder = "Selecione a data",
+  minDate,
+  maxDate,
+  clearable = false,
+  withApplyButton = false,
+  presets,
+  valueFormatter = formatDate,
+  captionLayout,
+  size,
+  disabled,
+  className,
+  wrapperClassName,
+  align = "start",
+  onOpenChange,
+  ...props
+}: SingleProps) {
+  const controlProps = useFieldControl(props, { withRequired: false })
+  const [open, setOpen] = React.useState(false)
+  // Com o Aplicar, a escolha fica aqui até confirmar.
+  const [draft, setDraft] = React.useState<string | null>(value)
+  const shown = withApplyButton ? draft : value
+
+  const selected = parseDateValue(shown)
+  const committed = parseDateValue(value)
+  const min = parseDateValue(minDate)
+  const max = parseDateValue(maxDate)
+
+  function handleOpenChange(o: boolean) {
+    setOpen(o)
+    if (o) setDraft(value)
+    onOpenChange?.(o)
+  }
+
+  function pick(v: string) {
+    if (withApplyButton) { setDraft(v); return }
+    onValueChange(v)
+    handleOpenChange(false)
+  }
+
+  function apply() {
+    if (draft !== value) onValueChange(draft)
+    handleOpenChange(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PickerTrigger
+        slot="date-picker-input"
+        text={committed ? valueFormatter(committed) : null}
+        placeholder={placeholder}
+        open={open}
+        size={size}
+        disabled={disabled}
+        clearable={clearable}
+        onClear={() => onValueChange(null)}
+        className={className}
+        wrapperClassName={wrapperClassName}
+        controlProps={controlProps}
+      />
+      <PopoverContent
+        align={align}
+        className={contentCls}
+        // O foco vai para o dia (autoFocus do calendário), não para o 1º botão.
+        onOpenAutoFocus={e => e.preventDefault()}
+      >
+        {presets && presets.length > 0 && (
+          <PresetList
+            presets={presets}
+            isActive={v => v === shown}
+            isDisabled={v => !inRange(v, minDate, maxDate)}
+            onSelect={pick}
+          />
+        )}
+        <div className="flex flex-col">
+          <Calendar
+            mode="single"
+            required
+            autoFocus
+            selected={selected}
+            onSelect={d => pick(toDateValue(d))}
+            defaultMonth={selected ?? clampDate(new Date(), min, max)}
+            startMonth={min}
+            endMonth={max}
+            disabled={outOfRange(min, max)}
+            captionLayout={captionLayout}
+          />
+          {withApplyButton && (
+            <PickerFooter onCancel={() => handleOpenChange(false)} onApply={apply}>
+              <PickerHint>{selected ? valueFormatter(selected) : "Nenhuma data"}</PickerHint>
+            </PickerFooter>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function RangePicker({
+  type: _type,
+  value,
+  onValueChange,
+  placeholder = "Selecione o período",
+  minDate,
+  maxDate,
+  clearable = false,
+  withApplyButton = false,
+  presets,
+  numberOfColumns = 2,
+  valueFormatter = formatDate,
+  captionLayout,
+  size,
+  disabled,
+  className,
+  wrapperClassName,
+  align = "start",
+  onOpenChange,
+  ...props
+}: RangeProps) {
+  const controlProps = useFieldControl(props, { withRequired: false })
+  const isMobile = useIsMobile()
+  const [open, setOpen] = React.useState(false)
+  const [draft, setDraft] = React.useState<DateRangeValue>(value)
+  // Início escolhido nesta abertura, à espera do fim.
+  const [pendingFrom, setPendingFrom] = React.useState<Date | null>(null)
+  const shown = withApplyButton ? draft : value
+
+  const from = parseDateValue(shown[0])
+  const to = parseDateValue(shown[1])
+  const min = parseDateValue(minDate)
+  const max = parseDateValue(maxDate)
+
+  const format = (range: DateRangeValue) => {
+    const f = parseDateValue(range[0])
+    const t = parseDateValue(range[1])
+    return f ? `${valueFormatter(f)} – ${t ? valueFormatter(t) : "…"}` : null
+  }
+
+  function handleOpenChange(o: boolean) {
+    setOpen(o)
+    setPendingFrom(null)
+    if (o) setDraft(value)
+    onOpenChange?.(o)
+  }
+
+  function commit(range: [string, string]) {
+    if (withApplyButton) { setDraft(range); setPendingFrom(null); return }
+    onValueChange(range)
+    handleOpenChange(false)
+  }
+
+  function pickDay(day: Date) {
+    if (!pendingFrom) { setPendingFrom(day); return }
+    const [s, e] = day < pendingFrom ? [day, pendingFrom] : [pendingFrom, day]
+    commit([toDateValue(s), toDateValue(e)])
+  }
+
+  function apply() {
+    if (draft[0] !== value[0] || draft[1] !== value[1]) onValueChange(draft)
+    handleOpenChange(false)
+  }
+
+  const hint = pendingFrom
+    ? "Agora escolha o último dia."
+    : withApplyButton && from
+      ? format(shown)
+      : "Escolha o primeiro dia."
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PickerTrigger
+        slot="date-picker-input"
+        text={format(value)}
+        placeholder={placeholder}
+        open={open}
+        size={size}
+        disabled={disabled}
+        clearable={clearable}
+        onClear={() => onValueChange([null, null])}
+        className={className}
+        wrapperClassName={wrapperClassName}
+        controlProps={controlProps}
+      />
+      <PopoverContent align={align} className={contentCls} onOpenAutoFocus={e => e.preventDefault()}>
+        {presets && presets.length > 0 && (
+          <PresetList
+            presets={presets}
+            isActive={v => v[0] === shown[0] && v[1] === shown[1]}
+            isDisabled={v => !inRange(v[0], minDate, maxDate) || !inRange(v[1], minDate, maxDate)}
+            onSelect={commit}
+          />
+        )}
+        <div className="flex flex-col">
+          <Calendar
+            mode="range"
+            autoFocus
+            numberOfMonths={isMobile ? 1 : numberOfColumns}
+            // O cálculo do período é nosso (pickDay): o do DayPicker já fecha
+            // um período de um dia no primeiro clique.
+            selected={pendingFrom ? { from: pendingFrom, to: undefined } : { from, to }}
+            onSelect={(_, day) => pickDay(day)}
+            defaultMonth={from ?? clampDate(new Date(), min, max)}
+            startMonth={min}
+            endMonth={max}
+            disabled={outOfRange(min, max)}
+            captionLayout={captionLayout}
+          />
+          <PickerFooter
+            onCancel={withApplyButton ? () => handleOpenChange(false) : undefined}
+            onApply={withApplyButton ? apply : undefined}
+            applyDisabled={!!pendingFrom}
+          >
+            <PickerHint>{hint}</PickerHint>
+          </PickerFooter>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { DatePickerInput }