@softize/opus 18.0.1 → 18.1.1

package/src/ui/components/patterns/list.tsx

@@ -103,6 +103,11 @@ import {
 } from "../primitives/input-group.tsx";
 import { Separator } from "../primitives/separator.tsx";
 import { Label } from "../primitives/label.tsx";
+import {
+  FieldGroup,
+  FieldLegend,
+  FieldSet,
+} from "../primitives/field.tsx";
 import { Search } from "lucide-react";
 import { Select, type SelectOption } from "../primitives/select.tsx";
 import {
@@ -145,6 +150,10 @@ function isEmptyValue(v: unknown): boolean {
   );
 }
 
+function filterPlacement(spec: FilterSpec): "inline" | "advanced" | "external" {
+  return spec.placement ?? (spec.advanced === true ? "advanced" : "inline");
+}
+
 // =============================================================================
 // Tipos públicos
 // =============================================================================
@@ -264,6 +273,9 @@ export interface ActionFilterBarProps {
   state: ActionFilterState;
   onStateChange: (next: ActionFilterState) => void;
   filterOptions?: Record<string, SelectOption[]>;
+  /** Composição visual do diálogo de filtros avançados. A largura é derivada
+   *  internamente do número de colunas. */
+  advancedFilters?: AdvancedFiltersLayout;
   onRefresh?: () => Promise<void> | void;
   refreshing?: boolean;
   /** Controles auxiliares, agrupados com o refresh em um ButtonGroup espaçado. */
@@ -272,6 +284,11 @@ export interface ActionFilterBarProps {
   actions?: ReactNode;
 }
 
+export interface AdvancedFiltersLayout {
+  /** Número de colunas dos grupos de filtros. */
+  columns?: 1 | 2 | 3;
+}
+
 /** Uma view alternativa da MESMA listagem (board, galeria, lista, calendário…). A
  *  apresentação é de quem chama; o pattern dá o segment, o estado e os dados. */
 export interface ActionListView<TItem> {
@@ -307,6 +324,8 @@ export interface ActionListProps<TInput, TItem> {
   cells?: Record<string, (item: TItem) => ReactNode>;
   /** Opções de runtime pros filtros select/lookup (chave = nome do filtro). */
   filterOptions?: Record<string, SelectOption[]>;
+  /** Composição visual do diálogo de filtros avançados. Default: uma coluna. */
+  advancedFilters?: AdvancedFiltersLayout;
   /** Views alternativas da mesma listagem — o segment na toolbar alterna entre a
    *  tabela ('table', quando há columns) e estas. Ex.: { board: { label, render } }. */
   views?: Record<string, ActionListView<TItem>>;
@@ -547,9 +566,20 @@ function FilterField({
       />
     );
   }
-  // text · number · date: aplica no blur/Enter (texto) ou no change (date).
-  const type =
-    spec.type === "number" ? "number" : spec.type === "date" ? "date" : "text";
+  if (spec.type === "date") {
+    return (
+      <DateFilterField
+        id={`filter-${name}`}
+        value={(value as string | undefined) ?? ""}
+        placeholder={placeholder}
+        className={cn("w-40", className)}
+        disabled={!enabled}
+        onChange={onChange}
+      />
+    );
+  }
+  // text · number: aplica no blur/Enter.
+  const type = spec.type === "number" ? "number" : "text";
   return (
     <ClearableInput
       id={`filter-${name}`}
@@ -563,6 +593,106 @@ function FilterField({
   );
 }
 
+function parseIsoDay(value: string): Date | undefined {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return undefined;
+  const [year, month, day] = value.split("-").map(Number);
+  const parsed = new Date(year ?? 0, (month ?? 1) - 1, day ?? 1);
+  return parsed.getFullYear() === year &&
+    parsed.getMonth() === (month ?? 1) - 1 &&
+    parsed.getDate() === day
+    ? parsed
+    : undefined;
+}
+
+function isValidDateFilterValue(value: unknown, multiple: boolean): boolean {
+  if (multiple) {
+    return (
+      Array.isArray(value) &&
+      value.length > 0 &&
+      value.every(
+        (item) => typeof item === "string" && parseIsoDay(item) !== undefined,
+      )
+    );
+  }
+  return typeof value === "string" && parseIsoDay(value) !== undefined;
+}
+
+function toIsoDay(date: Date): string {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+
+function DateFilterField({
+  id,
+  value,
+  placeholder,
+  className,
+  disabled,
+  onChange,
+}: {
+  id: string;
+  value: string;
+  placeholder: string;
+  className?: string;
+  disabled: boolean;
+  onChange: (value: unknown) => void;
+}): React.ReactElement {
+  const [open, setOpen] = useState(false);
+  const selected = parseIsoDay(value);
+  const label =
+    selected?.toLocaleDateString("pt-BR", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    }) ?? placeholder;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          className={cn("justify-start gap-2 font-normal", className)}
+          disabled={disabled}
+        >
+          <CalendarIcon className="h-3.5 w-3.5 shrink-0" />
+          <span className={cn("truncate", selected === undefined && "text-muted-foreground")}>
+            {label}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-auto p-0">
+        <Calendar
+          mode="single"
+          defaultMonth={selected}
+          selected={selected}
+          onSelect={(day) => {
+            if (day === undefined) return;
+            onChange(toIsoDay(day));
+            setOpen(false);
+          }}
+        />
+        {selected !== undefined && (
+          <div className="border-t border-border p-2">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="w-full"
+              onClick={() => {
+                onChange("");
+                setOpen(false);
+              }}
+            >
+              Limpar data
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 /** Input com limpar (a receita clearable dos textos): Input/InputGroup são locked, o X
  *  entra por composição — addon à direita, visível só com texto. Uncontrolled (aplica
  *  no blur/Enter, como a busca); o X zera o campo E aplica o vazio. */
@@ -831,6 +961,7 @@ function AdvancedFiltersDialog({
   onApply,
   filterOptions,
   cascade,
+  columns = 1,
 }: {
   open: boolean;
   onOpenChange: (o: boolean) => void;
@@ -838,6 +969,7 @@ function AdvancedFiltersDialog({
   values: Record<string, unknown>;
   onApply: (next: Record<string, unknown>) => void;
   filterOptions?: Record<string, SelectOption[]> | undefined;
+  columns?: 1 | 2 | 3;
   /** A cascata do `depends` do pai — mudar um campo limpa os dependentes no draft. */
   cascade: (
     changed: string,
@@ -850,53 +982,83 @@ function AdvancedFiltersDialog({
     if (open) setDraft(values);
   }, [open, values]);
 
+  const sections = useMemo(() => {
+    const grouped = new Map<string, Array<[string, FilterSpec]>>();
+    for (const entry of specs) {
+      const section = text(entry[1].section, "Outros");
+      const current = grouped.get(section) ?? [];
+      current.push(entry);
+      grouped.set(section, current);
+    }
+    return [...grouped];
+  }, [specs]);
+  const sectioned = specs.some(([, spec]) => spec.section !== undefined);
+  const dialogWidth = {
+    1: "max-w-sm",
+    2: "max-w-2xl",
+    3: "max-w-4xl",
+  }[columns];
+  const gridColumns = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+  }[columns];
+
+  const field = ([name, spec]: [string, FilterSpec]): React.ReactElement => (
+    <div key={name} className="space-y-2">
+      <Label htmlFor={`filter-${name}`}>{text(spec.label, name)}</Label>
+      <FilterField
+        name={name}
+        spec={spec}
+        value={draft[name]}
+        allValues={draft}
+        className="w-full"
+        onChange={(v) => setDraft((d) => cascade(name, { ...d, [name]: v }))}
+        options={optionsFor(name, spec, filterOptions)}
+      />
+    </div>
+  );
+
+  const clear = (): void => {
+    const cleared = { ...draft };
+    for (const [name] of specs) delete cleared[name];
+    onApply(cleared);
+    onOpenChange(false);
+  };
+
+  const apply = (): void => {
+    onApply(draft);
+    onOpenChange(false);
+  };
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      {/* Estreito de propósito (form de filtros, campos em coluna full width); sem
-          subtítulo — o título basta (aria-describedby explícito cala o aviso do Radix). */}
-      <DialogContent className="sm:max-w-sm" aria-describedby={undefined}>
+      <DialogContent className={dialogWidth} aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>Filtros</DialogTitle>
         </DialogHeader>
         <DialogBody className="space-y-4">
-          {specs.map(([name, spec]) => (
-            <div key={name} className="space-y-2">
-              <Label htmlFor={`filter-${name}`}>{text(spec.label, name)}</Label>
-              <FilterField
-                name={name}
-                spec={spec}
-                value={draft[name]}
-                allValues={draft}
-                className="w-full"
-                onChange={(v) =>
-                  setDraft((d) => cascade(name, { ...d, [name]: v }))
-                }
-                options={optionsFor(name, spec, filterOptions)}
-              />
-            </div>
-          ))}
+          {sectioned
+            ? sections.map(([section, entries]) => (
+                <FieldSet key={section}>
+                  <FieldLegend variant="label">{section}</FieldLegend>
+                  <FieldGroup className={cn("grid gap-4", gridColumns)}>
+                    {entries.map(field)}
+                  </FieldGroup>
+                </FieldSet>
+              ))
+            : (
+                <FieldGroup className={cn("grid gap-4", gridColumns)}>
+                  {specs.map(field)}
+                </FieldGroup>
+              )}
         </DialogBody>
         <DialogFooter>
           <ButtonGroup mode="spaced" distribution="equal">
-            <Button
-              variant="outline"
-              onClick={() => {
-                const cleared = { ...draft };
-                for (const [name] of specs) delete cleared[name];
-                onApply(cleared);
-                onOpenChange(false);
-              }}
-            >
+            <Button variant="outline" onClick={clear}>
               Limpar
             </Button>
-            <Button
-              onClick={() => {
-                onApply(draft);
-                onOpenChange(false);
-              }}
-            >
-              Aplicar
-            </Button>
+            <Button onClick={apply}>Aplicar</Button>
           </ButtonGroup>
         </DialogFooter>
       </DialogContent>
@@ -910,6 +1072,7 @@ export function ActionFilterBar({
   state,
   onStateChange,
   filterOptions,
+  advancedFilters,
   onRefresh,
   refreshing = false,
   controls,
@@ -917,7 +1080,12 @@ export function ActionFilterBar({
 }: ActionFilterBarProps): React.ReactElement {
   const dicts = useDicts();
   const filterSpecs = Object.entries(action.filters ?? {});
-  const inlineSpecs = filterSpecs.filter(([, spec]) => spec.advanced !== true);
+  const visibleFilterSpecs = filterSpecs.filter(
+    ([, spec]) => filterPlacement(spec) !== "external",
+  );
+  const inlineSpecs = visibleFilterSpecs.filter(
+    ([, spec]) => filterPlacement(spec) === "inline",
+  );
   const hasSearch = (action.text?.fields.length ?? 0) > 0;
   const periods = action.periods ?? [];
   const defaultPeriod =
@@ -976,9 +1144,9 @@ export function ActionFilterBar({
   const overflowSpecs = Number.isFinite(inlineFit)
     ? inlineSpecs.slice(inlineFit)
     : [];
-  const modalSpecs = filterSpecs.filter(
+  const modalSpecs = visibleFilterSpecs.filter(
     ([name, spec]) =>
-      spec.advanced === true ||
+      filterPlacement(spec) === "advanced" ||
       overflowSpecs.some(([overflowName]) => overflowName === name),
   );
   const setFilter = (name: string, value: unknown): void => {
@@ -1003,7 +1171,7 @@ export function ActionFilterBar({
       };
     });
   const searchFirst =
-    hasSearch && periods.length === 0 && filterSpecs.length === 0;
+    hasSearch && periods.length === 0 && visibleFilterSpecs.length === 0;
   const searchBox = hasSearch ? (
     <ClearableInput
       className="w-64 min-w-36"
@@ -1139,6 +1307,7 @@ export function ActionFilterBar({
             cascade={cascadeClear}
             onApply={(filters) => onStateChange({ ...state, filters })}
             filterOptions={filterOptions}
+            columns={advancedFilters?.columns}
           />
         )}
       </div>
@@ -1182,6 +1351,7 @@ export function ActionList<TInput, TItem>({
   columns,
   cells,
   filterOptions,
+  advancedFilters,
   views,
   batch,
   rowId = (item: TItem) => String((item as { id?: unknown }).id ?? ""),
@@ -1235,7 +1405,9 @@ export function ActionList<TInput, TItem>({
   const setStateResetPage = (next: ActionListState): void =>
     setState({ ...next, page: 1 });
 
-  const filterSpecs = Object.entries(action.filters ?? {});
+  const filterSpecs = Object.entries(action.filters ?? {}).filter(
+    ([, spec]) => filterPlacement(spec) !== "external",
+  );
   const hasSearch = (action.text?.fields.length ?? 0) > 0;
 
   // — Views: 'table' (quando há colunas) + as nomeadas. O segment só existe com 2+. —
@@ -1263,7 +1435,14 @@ export function ActionList<TInput, TItem>({
   const effectiveInput = useMemo(() => {
     const filled: Record<string, unknown> = {};
     for (const [name, v] of Object.entries(state.filters)) {
-      if (!isEmptyValue(v)) filled[name] = v;
+      if (isEmptyValue(v)) continue;
+      const filter = action.filters?.[name];
+      if (
+        filter?.type === "date" &&
+        !isValidDateFilterValue(v, filter.multiple === true)
+      )
+        continue;
+      filled[name] = v;
     }
     // Período: preset materializa AQUI (a URL guarda o preset relativo); custom usa o
     // range. state.period null = o default do contrato (sempre aplicado).
@@ -1438,6 +1617,7 @@ export function ActionList<TInput, TItem>({
         state={state}
         onStateChange={(next) => setStateResetPage({ ...state, ...next })}
         filterOptions={filterOptions}
+        advancedFilters={advancedFilters}
         onRefresh={() => refetch()}
         refreshing={isLoading}
         controls={
@@ -1901,8 +2081,14 @@ export function listParamsToState(
   const filters: Record<string, unknown> = {};
   for (const [name, spec] of Object.entries(action.filters ?? {})) {
     const v = params.get(name);
-    if (v !== null && v !== "")
-      filters[name] = spec.multiple === true ? v.split(",") : v;
+    if (v === null || v === "") continue;
+    const value = spec.multiple === true ? v.split(",") : v;
+    if (
+      spec.type === "date" &&
+      !isValidDateFilterValue(value, spec.multiple === true)
+    )
+      continue;
+    filters[name] = value;
   }
   const cols = params.get("cols");
   const limitParam = Number(params.get("limit") ?? "");
@@ -1945,6 +2131,12 @@ export function listStateToParams(
   }
   for (const [name, value] of Object.entries(state.filters)) {
     if (isEmptyValue(value)) continue;
+    const filter = action.filters?.[name];
+    if (
+      filter?.type === "date" &&
+      !isValidDateFilterValue(value, filter.multiple === true)
+    )
+      continue;
     qs.set(name, Array.isArray(value) ? value.join(",") : String(value));
   }
   if (state.period === "custom") {

package/src/ui/components/patterns/presentation.tsx

@@ -136,7 +136,10 @@ function PresentationFrame({
       {hasBodyFooter ? (
         <span
           ref={setFooterNode}
-          className="contents [&>*]:min-w-0 [&>*]:w-full [&>*]:flex-1"
+          className={cn(
+            "contents",
+            equal && "[&>*]:min-w-0 [&>*]:w-full [&>*]:flex-1",
+          )}
         />
       ) : null}
       {footerActions}
@@ -258,7 +261,7 @@ function PresentationFrame({
           </DialogHeader>
           <DialogBody>{body}</DialogBody>
           {hasFooter ? (
-            <DialogFooter>{renderFooterActions(true)}</DialogFooter>
+            <DialogFooter>{renderFooterActions()}</DialogFooter>
           ) : null}
         </DialogContent>
       </Dialog>
@@ -293,7 +296,7 @@ function PresentationFrame({
         </DrawerHeader>
         <DrawerBody>{body}</DrawerBody>
         {hasFooter ? (
-          <DrawerFooter>{renderFooterActions(true)}</DrawerFooter>
+          <DrawerFooter>{renderFooterActions()}</DrawerFooter>
         ) : null}
       </DrawerContent>
     </Drawer>
@@ -554,7 +557,6 @@ export function Presentation({
           defaultValues={bodyInput}
           submitLabel={definition.body.submitLabel}
           onCancel={invocation.surface === "page" ? undefined : closeSurface}
-          cancelVariant="outline"
           onSuccess={(data) => applyEffects(definition.body.onSuccess, data)}
           disabled={hasSurfaceBlock}
           onLoadingChange={setBodyLoading}
@@ -695,7 +697,7 @@ function PresentationInspectionDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-3xl" aria-describedby={undefined}>
+      <DialogContent className="max-w-3xl" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
         </DialogHeader>

package/src/ui/components/patterns/sidebar.tsx

@@ -94,7 +94,7 @@ export function PaneBody({
   );
 }
 
-/** @deprecated Use PaneBody. Mantido durante a versão 12 para migração gradual. */
+/** @deprecated Use PaneBody. Alias mantido para migração; sai numa próxima versão major. */
 export function PaneContent({
   className,
   children,

package/src/ui/components/patterns/state-surface.tsx

@@ -238,8 +238,8 @@ export function EmptySurface({
       data-frame={frame}
       className={cn(
         frame === 'structural' && 'border-solid',
-        frame === 'bare' && 'border-0 p-0 md:p-0',
-        compact && 'gap-4 p-6 md:p-6',
+        frame === 'bare' && 'border-0 p-0',
+        compact && 'gap-4 p-6',
         className,
       )}
     >

package/src/ui/components/patterns/surface-header.tsx

@@ -28,13 +28,13 @@ export const surfaceHeaderClasses: Record<
     title: "text-3xl font-semibold tracking-tight",
     description: "mt-1 truncate text-sm text-muted-foreground",
     count: "font-mono text-base text-muted-foreground/60",
-    actions: "flex w-full shrink-0 items-center gap-4 sm:w-auto",
+    actions: "flex w-auto shrink-0 items-center gap-4",
   },
   section: {
     title: "text-sm font-semibold",
     description: "mt-0.5 truncate text-xs text-muted-foreground",
     count: "font-mono text-xs text-muted-foreground/60",
-    actions: "flex w-full shrink-0 items-center gap-2 sm:w-auto",
+    actions: "flex w-auto shrink-0 items-center gap-2",
   },
 };
 
@@ -182,7 +182,7 @@ export function SurfaceHeader({
           data-slot={`${slot}-header-row`}
           className={cn(
             actionSlots.length > 0 &&
-              "flex flex-col items-start gap-4 sm:flex-row sm:items-end sm:justify-between",
+              "flex flex-row items-end justify-between gap-4",
           )}
         >
           {heading}
@@ -204,7 +204,7 @@ export function SurfaceHeader({
           leadingPlacement !== "inline" &&
           leading.length === 0 &&
           actionSlots.length > 0 &&
-          "flex flex-col items-start gap-4 sm:flex-row sm:items-end sm:justify-between",
+          "flex flex-row items-end justify-between gap-4",
         className,
       )}
       {...props}

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

@@ -50,7 +50,7 @@ function resolveAlertStyle({ context, variant }: AlertStyleOptions = {}): {
 export function alertVariants(options: AlertStyleOptions = {}): string {
   const resolved = resolveAlertStyle(options);
   return cn(
-    "relative grid w-full grid-cols-[0_minmax(0,1fr)_auto] items-stretch gap-x-0 gap-y-1 rounded-lg border p-4 text-sm has-[>[data-slot=alert-media]]:grid-cols-[3rem_minmax(0,1fr)_auto]",
+    "relative grid w-full grid-cols-[0_minmax(0,1fr)_auto] items-stretch gap-x-0 gap-y-1 rounded-lg border p-3 text-sm has-[>[data-slot=alert-media]]:grid-cols-[3rem_minmax(0,1fr)_auto]",
     resolved.variant === "outline"
       ? semanticOutlineClasses[resolved.context]
       : semanticSubtleClasses[resolved.context],
@@ -282,7 +282,7 @@ export function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "text-sm text-muted-foreground [&>*+*]:mt-1 [&_p]:leading-relaxed",
+        "text-muted-foreground [&>*+*]:mt-1 [&_p]:leading-relaxed",
         className,
       )}
       {...props}

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

@@ -13,7 +13,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
+        "flex flex-wrap items-center gap-2.5 text-sm break-words text-muted-foreground",
         className
       )}
       {...props}

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

@@ -23,7 +23,7 @@ const buttonGroupVariants = cva(
       distribution: {
         content: "",
         equal:
-          "w-full flex-col-reverse gap-2 sm:flex-row [&>*]:min-w-0 [&>*]:w-full [&>*]:flex-1",
+          "w-full gap-2 [&>*]:min-w-0 [&>*]:w-full [&>*]:flex-1",
       },
     },
     compoundVariants: [

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

@@ -56,9 +56,9 @@ const subtleClasses: Record<ButtonContext, string> = {
 }
 
 const outlineClasses: Record<ButtonContext, string> = {
-  neutral: 'border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
-  primary: 'border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
-  danger: 'border border-context-danger-border bg-background text-context-danger-emphasis hover:bg-context-danger-subtle',
+  neutral: 'border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',
+  primary: 'border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',
+  danger: 'border border-context-danger-border bg-transparent text-context-danger-emphasis hover:bg-context-danger-subtle',
 }
 
 const ghostClasses: Record<ButtonContext, string> = {

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

@@ -71,7 +71,7 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "relative flex flex-col gap-4 md:flex-row",
+          "relative flex flex-row gap-4",
           defaultClassNames.months,
         ),
         month: cn("flex w-full flex-col gap-4", defaultClassNames.month),

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

@@ -101,7 +101,7 @@ export function CardBody({
   );
 }
 
-/** @deprecated Use CardBody. Mantido durante a versão 12 para migração gradual. */
+/** @deprecated Use CardBody. Alias mantido para migração; sai numa próxima versão major. */
 export function CardContent({
   className,
   ...props

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { XIcon } from "lucide-react";
+
+import { Button, type ButtonProps } from "./button.tsx";
+
+export type CloseButtonSize = "xs" | "sm";
+
+const buttonSizeByCloseSize = {
+  xs: "icon-xs",
+  sm: "icon-sm",
+} as const;
+
+export interface CloseButtonProps extends Omit<
+  ButtonProps,
+  "busy" | "children" | "context" | "icon" | "shape" | "size" | "type" | "variant"
+> {
+  size?: CloseButtonSize;
+}
+
+export function CloseButton({
+  size = "sm",
+  disabled = false,
+  "aria-label": ariaLabel = "Fechar",
+  ...props
+}: CloseButtonProps): React.ReactElement {
+  return (
+    <Button
+      {...props}
+      type="button"
+      context="neutral"
+      variant="subtle"
+      size={buttonSizeByCloseSize[size]}
+      shape="pill"
+      disabled={disabled}
+      aria-label={ariaLabel}
+    >
+      <XIcon aria-hidden />
+    </Button>
+  );
+}