@strategicos/ui 0.7.0 → 0.9.0

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/multi-select.tsx

@@ -7,6 +7,7 @@ import { cn } from "../lib/utils.js"
 import { Badge } from "./badge.js"
 import { useFieldControl } from "./field.js"
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js"
+import { selectTriggerVariants } from "./select.js"
 
 export type MultiSelectOption = {
   value: string
@@ -111,7 +112,8 @@ function MultiSelect({
           data-size={size}
           {...controlProps}
           className={cn(
-            "flex w-full min-w-0 cursor-pointer items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent pr-2.5 pl-3 text-left text-sm transition-colors outline-none focus-visible:border-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive data-[size=default]:h-9 data-[size=sm]:h-7.5 data-[state=open]:border-ring dark:bg-input/30",
+            selectTriggerVariants({ size }),
+            "w-full min-w-0 cursor-pointer text-left",
             className
           )}
         >

package/src/components/select.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import { Select as SelectPrimitive } from "radix-ui"
+import { cva } from "class-variance-authority"
 
 import { cn } from "../lib/utils.js"
 import { useFieldControl } from "./field.js"
@@ -32,6 +33,31 @@ function SelectValue({
   return <SelectPrimitive.Value data-slot="select-value" {...props} />
 }
 
+/**
+ * Visual do gatilho de seleção: borda, foco, aberto, desabilitado, erro e
+ * tamanhos. É o mesmo do SelectTrigger, exportado para os gatilhos que não são
+ * o Select do Radix (MultiSelect, Combobox, DatePicker ou um Popover próprio)
+ * não precisarem copiar as classes — cópia que fica para trás quando o kit
+ * muda.
+ *
+ * Placeholder: marque o gatilho com `data-placeholder` enquanto estiver vazio,
+ * como o Radix faz.
+ *
+ *   <button className={cn(selectTriggerVariants({ size }), "w-full")} …>
+ */
+const selectTriggerVariants = cva(
+  "flex items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent pr-2.5 pl-3 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring data-[state=open]:border-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      size: {
+        default: "h-9",
+        sm: "h-7.5 rounded-[min(var(--radius-md),10px)]",
+      },
+    },
+    defaultVariants: { size: "default" },
+  }
+)
+
 function SelectTrigger({
   className,
   size = "default",
@@ -45,7 +71,8 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2.5 pl-3 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring data-[state=open]:border-ring disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-7.5 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        selectTriggerVariants({ size }),
+        "w-fit py-2 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5",
         className
       )}
       {...useFieldControl(props, { withRequired: false })}
@@ -206,4 +233,5 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  selectTriggerVariants,
 }

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 }