@softize/opus 30.0.0 → 31.1.0

package/src/ui/components/primitives/calendar.tsx

@@ -7,8 +7,10 @@ import {
 import { ptBR } from "date-fns/locale";
 import {
   DayPicker,
+  DateLib,
   getDefaultClassNames,
   type DayButton,
+  type RootProps,
 } from "react-day-picker";
 
 import { cn } from "../../lib/cn.ts";
@@ -16,7 +18,9 @@ import { Button, buttonVariants } from "./button.tsx";
 
 /** Rótulos acessíveis da navegação em pt-BR — o react-day-picker só traduz nomes de mês e
  *  dia pelo `locale`; os aria-labels dos controles continuariam em inglês. */
-const LABELS_PT_BR: NonNullable<React.ComponentProps<typeof DayPicker>["labels"]> = {
+const LABELS_PT_BR: NonNullable<
+  React.ComponentProps<typeof DayPicker>["labels"]
+> = {
   labelPrevious: () => "Mês anterior",
   labelNext: () => "Próximo mês",
   labelMonthDropdown: () => "Escolher o mês",
@@ -34,6 +38,17 @@ const LABELS_PT_BR: NonNullable<React.ComponentProps<typeof DayPicker>["labels"]
   },
 };
 
+function CalendarRoot({ className, rootRef, ...props }: RootProps) {
+  return (
+    <div
+      data-slot="calendar"
+      ref={rootRef}
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
 function Calendar({
   className,
   classNames,
@@ -63,17 +78,27 @@ function Calendar({
       )}
       captionLayout={captionLayout}
       formatters={{
+        formatCaption: (date, options, dateLib) => {
+          const caption = (
+            dateLib ??
+            new DateLib({
+              ...options,
+              locale: { ...ptBR, ...locale, ...options?.locale },
+            })
+          ).format(date, "LLLL/yyyy");
+          return (
+            caption.charAt(0).toLocaleUpperCase(locale.code) + caption.slice(1)
+          );
+        },
         // O dateLib já carrega o `locale` em vigor: o dropdown fala a mesma língua da legenda.
         formatMonthDropdown: (date, dateLib) =>
-          dateLib?.format(date, "LLL") ?? date.toLocaleString("pt-BR", { month: "short" }),
+          dateLib?.format(date, "LLL") ??
+          date.toLocaleString("pt-BR", { month: "short" }),
         ...formatters,
       }}
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "relative flex flex-row gap-4",
-          defaultClassNames.months,
-        ),
+        months: cn("relative flex flex-row gap-4", defaultClassNames.months),
         month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
           "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
@@ -156,16 +181,7 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          );
-        },
+        Root: CalendarRoot,
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
@@ -219,7 +235,12 @@ function CalendarDayButton({
   return (
     <Button
       ref={ref}
-      variant="ghost"
+      context={
+        modifiers.selected && !modifiers.range_middle ? "primary" : "neutral"
+      }
+      variant={
+        modifiers.selected && !modifiers.range_middle ? "solid" : "ghost"
+      }
       size="icon"
       data-day={day.date.toLocaleDateString()}
       data-selected-single={
@@ -232,7 +253,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[0.1875rem] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[0.1875rem] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className,
       )}

package/src/ui/components/primitives/close-button.tsx

@@ -3,22 +3,30 @@ import { XIcon } from "lucide-react";
 
 import { Button, type ButtonProps } from "./button.tsx";
 
-export type CloseButtonSize = "xs" | "sm";
+export type CloseButtonSize = "xs" | "sm" | "default";
 
 const buttonSizeByCloseSize = {
+  default: "icon",
   xs: "icon-xs",
   sm: "icon-sm",
 } as const;
 
 export interface CloseButtonProps extends Omit<
   ButtonProps,
-  "busy" | "children" | "context" | "icon" | "shape" | "size" | "type" | "variant"
+  | "busy"
+  | "children"
+  | "context"
+  | "icon"
+  | "shape"
+  | "size"
+  | "type"
+  | "variant"
 > {
   size?: CloseButtonSize;
 }
 
 export function CloseButton({
-  size = "sm",
+  size = "xs",
   disabled = false,
   "aria-label": ariaLabel = "Fechar",
   ...props

package/src/ui/components/primitives/command.tsx

@@ -38,9 +38,6 @@ function CommandDialog({
   return (
     <Dialog {...props}>
       <DialogContent
-        // A paleta é uma superfície contínua: a lista já separa os grupos, e uma faixa
-        // sob o cabeçalho competiria com ela.
-        layout="continuous"
         className={cn("overflow-hidden p-0", className)}
         showCloseButton={showCloseButton}
         aria-describedby={descriptionId}
@@ -50,11 +47,8 @@ function CommandDialog({
         <p id={descriptionId} className="sr-only">
           {description}
         </p>
-        {/* O recuo e a escala são os da paleta, não os da família: a caixa de busca
-            manda na densidade, e o título aqui é um rótulo acima dela. É a única
-            superfície do SDK que diverge nos dois, e por isso está escrito aqui. */}
-        <DialogHeader className="px-3 py-2">
-          <DialogTitle className="text-sm">{title}</DialogTitle>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
         </DialogHeader>
         <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}

package/src/ui/components/primitives/date-input.tsx

@@ -0,0 +1,276 @@
+import * as React from "react";
+import { CalendarDays } from "lucide-react";
+import { Input, type InputProps } from "./input.tsx";
+import { Calendar } from "./calendar.tsx";
+import { Popover, PopoverAnchor, PopoverContent } from "./popover.tsx";
+
+export interface DateInputProps extends Omit<
+  InputProps,
+  | "type"
+  | "value"
+  | "defaultValue"
+  | "onChange"
+  | "icon"
+  | "trailing"
+  | "min"
+  | "max"
+  | "step"
+> {
+  /** Data civil ISO; durante a digitação, pode conter texto ainda inválido. */
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+function parseDate(value: string): Date | undefined {
+  const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!parts) return undefined;
+  const [, year, month, day] = parts.map(Number);
+  if (year < 1 || month < 1 || month > 12 || day < 1 || day > 31)
+    return undefined;
+  const date = new Date(0);
+  date.setHours(0, 0, 0, 0);
+  date.setFullYear(year, month - 1, day);
+  return date.getFullYear() === year &&
+    date.getMonth() === month - 1 &&
+    date.getDate() === day
+    ? date
+    : undefined;
+}
+
+function serializeDate(date: Date): string {
+  return `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+
+function valueFromText(text: string): string {
+  if (parseDate(text)) return text;
+  const parts =
+    /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(text) ??
+    /^(\d{2})(\d{2})(\d{4})$/.exec(text);
+  if (!parts) return text;
+  const candidate = `${parts[3]}-${parts[2]}-${parts[1]}`;
+  return parseDate(candidate) ? candidate : text;
+}
+
+function maskDate(text: string): string {
+  const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text);
+  const digits = (
+    iso ? `${iso[3]}${iso[2]}${iso[1]}` : text.replace(/\D/g, "")
+  ).slice(0, 8);
+  return (
+    digits.slice(0, 2) +
+    (digits.length >= 2 ? "/" : "") +
+    digits.slice(2, 4) +
+    (digits.length >= 4 ? "/" : "") +
+    digits.slice(4)
+  );
+}
+
+function positionAfterDigits(count: number): number {
+  return count + (count >= 2 ? 1 : 0) + (count >= 4 ? 1 : 0);
+}
+
+export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
+  function DateInput(
+    {
+      value,
+      defaultValue = "",
+      onValueChange,
+      disabled,
+      readOnly,
+      name,
+      form,
+      placeholder = "DD/MM/AAAA",
+      onKeyDown,
+      ...props
+    },
+    ref,
+  ) {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const calendarId = React.useId();
+    const fieldRef = React.useRef<HTMLDivElement>(null);
+    const restoreInputFocus = React.useRef(false);
+    React.useImperativeHandle(ref, () => inputRef.current!);
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const currentValue = value ?? internalValue;
+    const selected = parseDate(currentValue);
+    const text = selected
+      ? currentValue.split("-").reverse().join("/")
+      : currentValue;
+    const [open, setOpen] = React.useState(false);
+    const openRef = React.useRef(open);
+    openRef.current = open;
+    const [focusCalendar, setFocusCalendar] = React.useState(false);
+    const [calendarSession, setCalendarSession] = React.useState(0);
+    const [caret, setCaret] = React.useState<{ position: number }>();
+    const [month, setMonth] = React.useState(() => selected ?? new Date());
+
+    React.useLayoutEffect(() => {
+      const input = inputRef.current;
+      if (caret && input && document.activeElement === input) {
+        input.setSelectionRange(caret.position, caret.position);
+      }
+    }, [caret]);
+
+    React.useEffect(() => {
+      const ownerForm = inputRef.current?.form;
+      if (value !== undefined || !ownerForm) return;
+      const reset = () => setInternalValue(defaultValue);
+      ownerForm.addEventListener("reset", reset);
+      return () => ownerForm.removeEventListener("reset", reset);
+    }, [value, defaultValue, form]);
+
+    const change = (next: string) => {
+      if (value === undefined) setInternalValue(next);
+      onValueChange?.(next);
+    };
+    const changeOpen = (next: boolean) => {
+      if (
+        next &&
+        (disabled || readOnly || inputRef.current?.matches(":disabled"))
+      )
+        return;
+      if (next) {
+        setMonth(selected ?? new Date());
+        if (!open) setCalendarSession((session) => session + 1);
+      }
+      setOpen(next);
+    };
+
+    return (
+      <Popover open={open && !disabled && !readOnly} onOpenChange={changeOpen}>
+        {name && (
+          <input
+            type="hidden"
+            name={name}
+            form={form}
+            value={currentValue}
+            disabled={disabled}
+          />
+        )}
+        <PopoverAnchor asChild>
+          <div
+            ref={fieldRef}
+            onClick={(event) => {
+              if (event.defaultPrevented) return;
+              if (
+                disabled ||
+                readOnly ||
+                inputRef.current?.matches(":disabled")
+              )
+                return;
+              inputRef.current?.focus();
+              setFocusCalendar(false);
+              changeOpen(true);
+            }}
+          >
+            <Input
+              {...props}
+              ref={inputRef}
+              form={form}
+              type="text"
+              inputMode="numeric"
+              value={text}
+              placeholder={placeholder}
+              disabled={disabled}
+              readOnly={readOnly}
+              role="combobox"
+              aria-expanded={open}
+              aria-haspopup="dialog"
+              aria-controls={open ? calendarId : undefined}
+              aria-keyshortcuts="Alt+ArrowDown"
+              onChange={(event) => {
+                const input = event.target;
+                let raw = input.value;
+                let cursor = input.selectionStart ?? raw.length;
+                const inputType = (event.nativeEvent as InputEvent).inputType;
+                // A barra pertence à máscara: apagar junto dela também remove o dígito adjacente,
+                // inclusive em teclados virtuais que não emitem keydown de Backspace ou Delete.
+                if (
+                  raw.length === text.length - 1 &&
+                  raw.replace(/\D/g, "") === text.replace(/\D/g, "")
+                ) {
+                  if (inputType === "deleteContentBackward" && cursor > 0) {
+                    raw = raw.slice(0, cursor - 1) + raw.slice(cursor);
+                    cursor -= 1;
+                  } else if (inputType === "deleteContentForward") {
+                    raw = raw.slice(0, cursor) + raw.slice(cursor + 1);
+                  }
+                }
+                const masked = maskDate(raw);
+                const digitCount = raw
+                  .slice(0, cursor)
+                  .replace(/\D/g, "").length;
+                setCaret({
+                  position: Math.min(
+                    masked.length,
+                    positionAfterDigits(digitCount),
+                  ),
+                });
+                change(valueFromText(masked));
+              }}
+              onKeyDown={(event) => {
+                onKeyDown?.(event);
+                if (event.defaultPrevented) return;
+                if (event.altKey && event.key === "ArrowDown") {
+                  event.preventDefault();
+                  setFocusCalendar(true);
+                  changeOpen(true);
+                }
+              }}
+              trailing={<CalendarDays aria-hidden="true" className="size-4" />}
+            />
+          </div>
+        </PopoverAnchor>
+        <PopoverContent
+          id={calendarId}
+          className="w-auto p-0"
+          align="start"
+          aria-label="Escolher data"
+          onOpenAutoFocus={(event) => {
+            event.preventDefault();
+            if (focusCalendar) {
+              (event.target as HTMLElement)
+                .querySelector<HTMLButtonElement>('[data-day][tabindex="0"]')
+                ?.focus();
+            }
+          }}
+          onInteractOutside={(event) => {
+            if (fieldRef.current?.contains(event.target as Node))
+              event.preventDefault();
+          }}
+          onEscapeKeyDown={() => {
+            restoreInputFocus.current = true;
+          }}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            // O fechamento anterior pode terminar depois de uma reabertura rápida.
+            if (restoreInputFocus.current && !openRef.current) {
+              inputRef.current?.focus();
+            }
+            restoreInputFocus.current = false;
+          }}
+        >
+          <Calendar
+            // DayPicker aplica autoFocus apenas na montagem, inclusive em reaberturas durante a animação.
+            key={`${calendarSession}-${focusCalendar}`}
+            mode="single"
+            required
+            autoFocus={focusCalendar}
+            startMonth={parseDate("0001-01-01")}
+            endMonth={parseDate("9999-12-01")}
+            month={month}
+            onMonthChange={setMonth}
+            selected={selected}
+            onSelect={(date) => {
+              if (inputRef.current?.matches(":disabled")) return;
+              change(serializeDate(date));
+              restoreInputFocus.current = true;
+              setOpen(false);
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);

package/src/ui/components/primitives/detail.tsx

@@ -122,7 +122,7 @@ function DetailField({
         !dividedHorizontalField &&
           "group-data-[orientation=horizontal]/detail-group:grid-cols-[minmax(0,var(--detail-label-width))_minmax(0,1fr)] group-data-[orientation=horizontal]/detail-group:items-baseline group-data-[orientation=horizontal]/detail-group:gap-x-3",
         dividedHorizontalField && "items-stretch gap-x-0",
-        "group-data-[orientation=vertical]/detail-group:gap-y-1",
+        "group-data-[orientation=vertical]/detail-group:gap-y-1.5",
         "group-data-[dividers=true]/detail-group:outline group-data-[dividers=true]/detail-group:outline-1 group-data-[dividers=true]/detail-group:outline-border",
         "group-data-[variant=framed]/detail-group:bg-transparent",
         className,