@strategicos/ui 0.8.0 → 0.9.1

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

@@ -0,0 +1,152 @@
+"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 { Calendar } from "./calendar.js"
+import {
+  clampDate, formatDateTime, outOfRange, parseDateValue, toDateValue,
+  PickerFooter, PickerTrigger, type PickerBaseProps,
+} 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
+}: PickerBaseProps & {
+  value: string | null
+  onValueChange: (value: string | null) => void
+  /** Campo de hora com segundos. */
+  withSeconds?: boolean
+  /** "HH:mm" usada quando ainda não há valor. */
+  defaultTime?: string
+}) {
+  const controlProps = useFieldControl(props, { withRequired: false })
+  const [open, setOpen] = React.useState(false)
+  const [draft, setDraft] = React.useState<string | null>(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: boolean) {
+    setOpen(o)
+    if (o) { setDraft(value); setTime(timeOf(value, defaultTime)) }
+    onOpenChange?.(o)
+  }
+
+  function update(v: string) {
+    if (withApplyButton) setDraft(v)
+    else onValueChange(v)
+  }
+
+  // `time` é sempre "HH:mm:ss" (timeOf e changeTime completam).
+  function pickDay(day: Date) {
+    update(`${toDateValue(day)} ${time}`)
+  }
+
+  function changeTime(t: string) {
+    // 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 (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <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}
+      />
+      <PopoverContent align={align} className="w-auto max-w-[calc(100vw-2rem)] p-0" onOpenAutoFocus={e => e.preventDefault()}>
+        <Calendar
+          mode="single"
+          required
+          autoFocus
+          selected={selected}
+          onSelect={pickDay}
+          defaultMonth={selected ?? 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={!draft}
+        >
+          <TimeInput
+            aria-label="Hora"
+            withSeconds={withSeconds}
+            value={withSeconds ? time : time.slice(0, 5)}
+            onChange={e => changeTime(e.target.value)}
+            className="w-32"
+          />
+        </PickerFooter>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+/** "HH:mm:ss" do valor, ou a hora padrão. */
+function timeOf(value: string | null, defaultTime: string) {
+  const t = value && value.length >= 16 ? value.slice(11, 19) : defaultTime
+  return t.length === 5 ? `${t}:00` : t
+}
+
+export { DateTimePicker }

package/src/components/dates.tsx

@@ -0,0 +1,274 @@
+"use client"
+
+// Peças derivadas do DatePicker do Tremor (Apache-2.0) e modificadas pela
+// Strategicos. Ver THIRD_PARTY_NOTICES.md.
+
+import * as React from "react"
+import { CalendarIcon, XIcon } from "lucide-react"
+import type { Matcher } from "react-day-picker"
+
+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: string | null | undefined): Date | undefined {
+  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: number) => String(n).padStart(2, "0")
+
+/** Date → "AAAA-MM-DD" (dia local). */
+function toDateValue(date: Date): string {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+}
+
+/** Date → "AAAA-MM-DD HH:mm:ss" (hora local). */
+function toDateTimeValue(date: Date): string {
+  return `${toDateValue(date)} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+}
+
+/** 15/10/2026 */
+const formatDate = (date: Date) => date.toLocaleDateString("pt-BR")
+
+/** 15/10/2026 14:30 */
+const formatDateTime = (date: Date) => `${formatDate(date)} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+
+// ── Limites ───────────────────────────────────────────────────────────────────
+
+function clampDate(date: Date, min?: Date, max?: Date) {
+  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?: Date, max?: Date): Matcher[] {
+  const m: Matcher[] = []
+  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: string, minDate?: string, maxDate?: string) {
+  const day = value.slice(0, 10)
+  return (!minDate || day >= minDate.slice(0, 10)) && (!maxDate || day <= maxDate.slice(0, 10))
+}
+
+// ── Peças comuns ──────────────────────────────────────────────────────────────
+
+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>. */
+function PickerTrigger({
+  text,
+  placeholder,
+  open,
+  size = "default",
+  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
+}) {
+  const showClear = clearable && !!text && !disabled
+
+  const trigger = (
+    <PopoverTrigger asChild disabled={disabled}>
+      <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
+        )}
+      >
+        <CalendarIcon className="text-muted-foreground" />
+        <span className="min-w-0 flex-1 truncate">{text ?? placeholder}</span>
+      </button>
+    </PopoverTrigger>
+  )
+
+  if (!clearable) return trigger
+  return (
+    <div data-slot={`${slot}-wrapper`} className={cn("relative w-full min-w-0", wrapperClassName)}>
+      {trigger}
+      {showClear && <ClearButton onClick={onClear} />}
+    </div>
+  )
+}
+
+/** 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 }: { onClick: () => void; className?: string }) {
+  return (
+    <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
+      )}
+    >
+      <XIcon className="size-4" />
+    </button>
+  )
+}
+
+/** Atalhos ao lado do calendário (no celular, uma faixa em cima). */
+function PresetList<T>({
+  presets,
+  isActive,
+  isDisabled,
+  onSelect,
+}: {
+  presets: { label: string; value: T }[]
+  isActive: (value: T) => boolean
+  isDisabled: (value: T) => boolean
+  onSelect: (value: T) => void
+}) {
+  return (
+    <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"
+    >
+      {presets.map(p => (
+        <li key={p.label} className="shrink-0">
+          <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"
+          >
+            {p.label}
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+/** 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,
+}: {
+  children?: React.ReactNode
+  onCancel?: () => void
+  onApply?: () => void
+  applyDisabled?: boolean
+}) {
+  return (
+    <div data-slot="date-picker-footer" className="flex flex-wrap items-center gap-2 border-t border-border p-3">
+      <div className="min-w-0 flex-1">{children}</div>
+      {onApply && (
+        <div className="flex shrink-0 gap-2">
+          <Button type="button" variant="ghost" onClick={onCancel}>Cancelar</Button>
+          <Button type="button" onClick={onApply} disabled={applyDisabled}>Aplicar</Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function PickerHint({ children }: { children: React.ReactNode }) {
+  return <span aria-live="polite" className="text-xs text-muted-foreground">{children}</span>
+}
+
+/** 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,
+}

package/src/components/popover.tsx

@@ -23,6 +23,8 @@ function PopoverContent({
   className,
   align = "start",
   sideOffset = 4,
+  onWheel,
+  onTouchMove,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
   return (
@@ -31,6 +33,14 @@ function PopoverContent({
         data-slot="popover-content"
         align={align}
         sideOffset={sideOffset}
+        // Dentro de um Dialog modal, o bloqueio de rolagem dele (react-remove-
+        // scroll) escuta a roda no document e cancela tudo o que está fora do
+        // Dialog — e o popover está num portal, fora. Sem isto, as listas do
+        // Combobox e do MultiSelect não rolam num Dialog. Parar a propagação
+        // aqui não deixa o evento chegar ao document; as listas usam
+        // overscroll-contain para a rolagem não vazar para a página.
+        onWheel={e => { e.stopPropagation(); onWheel?.(e) }}
+        onTouchMove={e => { e.stopPropagation(); onTouchMove?.(e) }}
         className={cn(
           "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-lg bg-popover p-3 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className

package/src/components/time-input.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils.js"
+import { Input, 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).
+ */
+function TimeInput({
+  withSeconds = false,
+  className,
+  ...props
+}: Omit<InputProps, "type"> & {
+  withSeconds?: boolean
+}) {
+  return (
+    <Input
+      type="time"
+      step={withSeconds ? 1 : 60}
+      className={cn("tabular-nums", className)}
+      {...props}
+    />
+  )
+}
+
+export { TimeInput }

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

@@ -1,78 +0,0 @@
-import * as React from "react";
-/** "AAAA-MM-DD" → Date local à meia-noite. Valor vazio ou inválido → undefined. */
-declare function parseDateValue(value: string | null | undefined): Date | undefined;
-/** Date → "AAAA-MM-DD" no dia local. */
-declare function toDateValue(date: Date): string;
-type FieldProps = {
-    id?: string;
-    "aria-label"?: string;
-    "aria-describedby"?: string;
-    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
-};
-type CommonProps = FieldProps & {
-    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;
-    /** Como a data aparece no gatilho. Padrão: dd/mm/aaaa. */
-    formatValue?: (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 type DatePreset = {
-    label: string;
-    value: string;
-};
-/**
- * Escolha de uma data num calendário, como o DatePickerInput do Mantine. Base:
- * o DatePicker do Tremor, no visual do kit (gatilho igual ao do Select).
- *
- *   <Field label="Prazo">
- *     <DatePicker value={prazo} onValueChange={setPrazo} minDate={inicio} clearable />
- *   </Field>
- *
- * O valor é "AAAA-MM-DD" ou `null` (ver `parseDateValue`/`toDateValue`).
- * Escolher o dia já fecha. `presets` põe atalhos ao lado ("Hoje", "Fim do
- * mês"…); os que caem fora de `minDate`/`maxDate` ficam desabilitados.
- *
- * 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.
- */
-declare function DatePicker({ value, onValueChange, placeholder, minDate, maxDate, clearable, presets, formatValue, captionLayout, size, disabled, className, wrapperClassName, align, onOpenChange, ...props }: CommonProps & {
-    value: string | null;
-    onValueChange: (value: string | null) => void;
-    presets?: DatePreset[];
-}): React.JSX.Element;
-export type DateRangeValue = [string | null, string | null];
-export type DateRangePreset = {
-    label: string;
-    value: [string, string];
-};
-/**
- * Escolha de um período (início e fim) num calendário de dois meses — um só no
- * celular. Base: o DateRangePicker do Tremor, no visual do kit.
- *
- *   <DateRangePicker value={[inicio, fim]} onValueChange={([i, f]) => { … }} />
- *
- * O primeiro clique marca o início e o segundo, o fim; aí fecha e grava. Se o
- * segundo dia vier antes do primeiro, os dois trocam de lugar. Fechar no meio
- * descarta o período começado e mantém o anterior.
- */
-declare function DateRangePicker({ value, onValueChange, placeholder, minDate, maxDate, clearable, presets, formatValue, captionLayout, size, disabled, className, wrapperClassName, align, onOpenChange, ...props }: CommonProps & {
-    value: DateRangeValue;
-    onValueChange: (value: DateRangeValue) => void;
-    presets?: DateRangePreset[];
-}): React.JSX.Element;
-export { DatePicker, DateRangePicker, parseDateValue, toDateValue };
-//# sourceMappingURL=date-picker.d.ts.map

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

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