rl-core-front 0.2.0 → 0.4.0

package/src/components/app-shell.tsx

@@ -46,6 +46,30 @@ interface NavItem {
   perm: string | null;
 }
 
+/**
+ * Item de menu declarado pelo projeto.
+ *
+ * O core não conhece as telas de quem o instala (§14), então elas entram por
+ * aqui em vez de o projeto reescrever o shell.
+ *
+ * ```tsx
+ * <AppShell navItems={[{ label: "nav.tasks", href: "/tarefas", icon: ListTodo }]}>
+ * ```
+ */
+export interface AppNavItem {
+  /**
+   * Chave de i18n (`nav.tasks`) ou o texto pronto (`"Tarefas"`).
+   *
+   * Chave sem tradução cadastrada volta como veio, então as duas formas
+   * funcionam — o projeto só precisa do dicionário quando for bilíngue.
+   */
+  label: string;
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+  /** Permissão exigida para o item aparecer. Ausente, aparece para todos. */
+  permission?: string | null;
+}
+
 const DASHBOARD: NavItem = {
   key: "nav.dashboard",
   href: "/dashboard",
@@ -71,7 +95,13 @@ const ADMIN_CHILDREN: NavItem[] = [
   },
 ];
 
-export function AppShell({ children }: { children: React.ReactNode }): JSX.Element {
+export interface AppShellProps {
+  children: React.ReactNode;
+  /** Telas do projeto no menu, entre o dashboard e o grupo de administração. */
+  navItems?: AppNavItem[];
+}
+
+export function AppShell({ children, navItems }: AppShellProps): JSX.Element {
   const { user, loading, logout, hasPermission } = useAuth();
   const { t } = useI18n();
   const brand = useBrand();
@@ -89,6 +119,22 @@ export function AppShell({ children }: { children: React.ReactNode }): JSX.Eleme
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [user],
   );
+
+  // Os itens do projeto passam pelo mesmo filtro de permissão dos do core: um
+  // menu que mostra o que o usuário não pode abrir só entrega 403.
+  const projectItems = useMemo<NavItem[]>(
+    () =>
+      (navItems ?? [])
+        .filter((item) => !item.permission || hasPermission(item.permission))
+        .map((item) => ({
+          key: item.label,
+          href: item.href,
+          icon: item.icon,
+          perm: item.permission ?? null,
+        })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [user, navItems],
+  );
   const adminActive = adminChildren.some((c) => pathname === c.href);
   const [adminOpen, setAdminOpen] = useState(adminActive);
 
@@ -158,6 +204,10 @@ export function AppShell({ children }: { children: React.ReactNode }): JSX.Eleme
     <div className="flex flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden p-3">
       <NavLink item={DASHBOARD} mini={mini} />
 
+      {projectItems.map((item) => (
+        <NavLink key={item.href} item={item} mini={mini} />
+      ))}
+
       {adminChildren.length > 0 &&
         (mini ? (
           <>

package/src/components/brand-header.tsx

@@ -7,6 +7,12 @@ import { useBrand } from "#core/contexts";
 export interface BrandHeaderProps {
   /** Título do passo ou da tela, exibido sob a marca. */
   title: string;
+  /**
+   * Mostra logo e nome acima do título. Desligue quando a marca já estiver na
+   * tela por outro caminho — é o caso do `BrandPanel` ao lado do formulário,
+   * onde repeti-la no cartão seria dizer a mesma coisa duas vezes.
+   */
+  showBrand?: boolean;
 }
 
 /**
@@ -17,19 +23,28 @@ export interface BrandHeaderProps {
  * ela está. O conteúdo vem do `BrandProvider` do projeto; sem ele, do padrão do
  * core.
  */
-export function BrandHeader({ title }: BrandHeaderProps): JSX.Element {
+export function BrandHeader({
+  title,
+  showBrand = true,
+}: BrandHeaderProps): JSX.Element {
   const brand = useBrand();
 
   return (
     <div className="mb-6 flex flex-col items-center gap-1">
-      <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
-        {brand.logo}
-      </div>
-      <span className="text-lg font-extrabold">{brand.name}</span>
-      {brand.tagline && (
-        <p className="text-sm text-muted-foreground">{brand.tagline}</p>
+      {showBrand && (
+        <>
+          <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+            {brand.logo}
+          </div>
+          <span className="text-lg font-extrabold">{brand.name}</span>
+          {brand.tagline && (
+            <p className="text-sm text-muted-foreground">{brand.tagline}</p>
+          )}
+        </>
       )}
-      <h1 className="mt-2 text-xl font-semibold">{title}</h1>
+      <h1 className={showBrand ? "mt-2 text-xl font-semibold" : "text-xl font-semibold"}>
+        {title}
+      </h1>
     </div>
   );
 }

package/src/components/brand-panel.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { useBrand } from "#core/contexts";
+import { cn } from "#core/lib/utils";
+
+export interface BrandPanelProps {
+  className?: string;
+}
+
+/**
+ * A marca ocupando metade da tela de login, ao lado do formulário.
+ *
+ * É o irmão grande do `BrandHeader`: mesma fonte (o `BrandProvider` do
+ * projeto), espaço diferente. Serve a quem tem logo grande — no cabeçalho do
+ * cartão ela sairia espremida.
+ *
+ * O core não dimensiona a logo: ela é um `ReactNode` do projeto, que sabe se é
+ * um SVG, um `next/image` ou um ícone. Aqui ela só ganha o espaço.
+ */
+export function BrandPanel({ className }: BrandPanelProps): JSX.Element {
+  const brand = useBrand();
+
+  return (
+    <div
+      className={cn(
+        "flex flex-1 flex-col items-center justify-center gap-4 bg-muted/30 p-8 text-center",
+        className,
+      )}
+    >
+      {brand.logo}
+      <span className="text-3xl font-extrabold">{brand.name}</span>
+      {brand.tagline && (
+        <p className="max-w-sm text-sm text-muted-foreground">
+          {brand.tagline}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -1,6 +1,7 @@
 // Barrel da pasta — importe daqui de fora; dentro da pasta use o caminho direto.
 export * from "./app-shell";
 export * from "./brand-header";
+export * from "./brand-panel";
 export * from "./breadcrumbs";
 export * from "./language-selector";
 export * from "./password-field";

package/src/components/ui/button.tsx

@@ -52,6 +52,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        // `<button>` sem `type` nasce `submit`: dentro de um form, um botão que
+        // só abre um modal acabava salvando o registro junto. Quem submete
+        // declara `type="submit"` — o spread abaixo deixa isso sobrescrever.
+        // Com `asChild` o filho pode não ser um `<button>`, então não força.
+        {...(asChild ? {} : { type: "button" as const })}
         {...props}
       />
     );

package/src/components/ui/confirm-dialog.tsx

@@ -43,7 +43,9 @@ export function ConfirmDialog({
 }: ConfirmDialogProps): React.JSX.Element {
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onCancel()}>
-      <DialogContent className="max-w-sm">
+      {/* Sem ampliar: são duas linhas e dois botões, e o tamanho pequeno é
+          parte do recado — esticado só ganharia vazio. */}
+      <DialogContent className="max-w-sm" expandable={false}>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           {description && <DialogDescription>{description}</DialogDescription>}

package/src/components/ui/data-table.tsx

@@ -39,7 +39,6 @@ import {
   ColumnVisibilityModal,
   ColumnVisibilityOption,
 } from "#core/components/ui/column-visibility-modal";
-import { FilterChips } from "#core/components/ui/filter-chips";
 import { FilterSheet } from "#core/components/ui/filter-sheet";
 import { Spinner } from "#core/components/ui/spinner";
 import {
@@ -94,6 +93,16 @@ interface DataTableProps<T extends RowData> {
    * não aparece — listagem sem catálogo continua funcionando igual.
    */
   filters?: FiltersState;
+  /**
+   * Campos que a `toolbar` já controla: somem do painel de filtros e não são
+   * contados no botão "Filtros", para a mesma escolha não existir em dois
+   * lugares.
+   *
+   * Some da interface, não do catálogo — é o catálogo que serializa o filtro,
+   * então o atalho da barra continua funcionando normalmente. O painel também
+   * não os desmarca ao aplicar nem ao limpar: não são dele.
+   */
+  hiddenFilterFields?: string[];
 }
 
 /** Extras que uma coluna pode declarar em `meta`. */
@@ -144,6 +153,7 @@ export function DataTable<T extends RowData>({
   onSortingChange,
   enableSorting = true,
   filters,
+  hiddenFilterFields,
 }: DataTableProps<T>): JSX.Element {
   const { t } = useI18n();
   const [colsOpen, setColsOpen] = useState(false);
@@ -220,7 +230,7 @@ export function DataTable<T extends RowData>({
       ? filters.tree && filters.filter
         ? countConditions(filters.tree)
         : 0
-      : activeFilterCount(filters.values);
+      : activeFilterCount(filters.values, hiddenFilterFields);
 
   return (
     <div>
@@ -257,8 +267,6 @@ export function DataTable<T extends RowData>({
         </div>
       </div>
 
-      {filters && <FilterChips filters={filters} />}
-
       <Card>
         <Table>
           <TableHeader>
@@ -394,6 +402,7 @@ export function DataTable<T extends RowData>({
           open={filtersOpen}
           onOpenChange={setFiltersOpen}
           filters={filters}
+          hiddenFields={hiddenFilterFields}
         />
       )}
     </div>

package/src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import { Maximize2, Minimize2, X } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "#core/lib/utils";
@@ -26,28 +26,127 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+/**
+ * Escala de largura do Tailwind, em ordem. Ampliar anda dois degraus: `md` vira
+ * `xl`, `2xl` vira `4xl`. O modal cresce mantendo a proporção que já tinha, em
+ * vez de saltar para a tela inteira — um formulário de duas colunas esticado a
+ * 100% fica pior, não melhor. Um degrau só passava despercebido.
+ */
+const WIDTH_SCALE: readonly string[] = [
+  "max-w-3xs",
+  "max-w-2xs",
+  "max-w-xs",
+  "max-w-sm",
+  "max-w-md",
+  "max-w-lg",
+  "max-w-xl",
+  "max-w-2xl",
+  "max-w-3xl",
+  "max-w-4xl",
+  "max-w-5xl",
+  "max-w-6xl",
+  "max-w-7xl",
+];
+
+/** Largura de quem não declara nenhuma. */
+const DEFAULT_WIDTH = "max-w-lg";
+
+/** Quantos degraus o botão sobe de uma vez. */
+const EXPAND_STEPS = 2;
+
+/** Só para quem já está no topo da escala: daí não há degrau, resta a tela. */
+const FULL_WIDTH = "max-w-none";
+
+/**
+ * A largura do modal ampliado.
+ *
+ * Lê a **última** `max-w-*` do `className` porque é ela que o `tailwind-merge`
+ * deixa valer. Largura fora da escala (`max-w-[42rem]`) não tem degrau a subir:
+ * amplia para a tela toda.
+ */
+const expandedWidth = (className?: string): string => {
+  const declared = (className ?? "")
+    .split(/\s+/)
+    .filter((item) => item.startsWith("max-w-"));
+  const current = declared[declared.length - 1] ?? DEFAULT_WIDTH;
+  const index = WIDTH_SCALE.indexOf(current);
+  const last = WIDTH_SCALE.length - 1;
+
+  // Fora da escala não há degrau a subir, e chutar um da escala encolheria um
+  // `max-w-[90rem]`. Amplia para a tela, que é o que o botão promete.
+  if (index === -1 || index === last) {
+    return FULL_WIDTH;
+  }
+
+  // Perto do topo, dois degraus passariam do fim: para no último em vez de
+  // cair em tela cheia, que é justamente o salto que a escala evita.
+  return WIDTH_SCALE[Math.min(index + EXPAND_STEPS, last)];
+};
+
+export interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  /**
+   * Botão de ampliar ao lado do fechar.
+   *
+   * Ligado por padrão: ampliar um degrau não atrapalha modal nenhum. Desligue
+   * com `expandable={false}` onde o tamanho é parte do desenho — confirmação
+   * curta, por exemplo, que esticada só fica com mais vazio.
+   */
+  expandable?: boolean;
+}
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg rounded-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-h-[calc(100%-2rem)] overflow-y-auto",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+  DialogContentProps
+>(({ className, children, expandable = true, ...props }, ref) => {
+  // Reinicia a cada montagem: o Radix desmonta o conteúdo ao fechar, então
+  // reabrir traz o modal no tamanho normal — modal pequeno que volta ampliado
+  // surpreende quem o abriu.
+  const [expanded, setExpanded] = React.useState(false);
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 overflow-y-auto",
+          "w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] rounded-xl",
+          DEFAULT_WIDTH,
+          className,
+          // Depois do `className`: é o que faz a largura ampliada vencer a que
+          // o chamador declarou, e só enquanto estiver ampliado.
+          expanded && expandedWidth(className),
+        )}
+        {...props}
+      >
+        {children}
+        <div className="absolute right-4 top-4 flex items-center gap-2">
+          {expandable && (
+            <button
+              type="button"
+              onClick={() => setExpanded((value) => !value)}
+              className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring"
+            >
+              {expanded ? (
+                <Minimize2 className="h-4 w-4" />
+              ) : (
+                <Maximize2 className="h-4 w-4" />
+              )}
+              <span className="sr-only">
+                {expanded ? "Restaurar" : "Ampliar"}
+              </span>
+            </button>
+          )}
+          <DialogPrimitive.Close className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Fechar</span>
+          </DialogPrimitive.Close>
+        </div>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 /**

package/src/components/ui/filter-sheet.tsx

@@ -10,6 +10,7 @@ import { activeFilterCount } from "#core/_utils/filter";
 import { Button } from "#core/components/ui/button";
 import { FilterFieldControl } from "#core/components/ui/filter-field";
 import { FilterGroupBlock } from "#core/components/ui/filter-group";
+import { SegmentedControl } from "#core/components/ui/segmented-control";
 import { Separator } from "#core/components/ui/separator";
 import {
   Sheet,
@@ -29,6 +30,17 @@ export interface FilterSheetProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   filters: FiltersState;
+  /**
+   * Campos que a barra da listagem já controla — somem do modo simples para a
+   * mesma escolha não existir em dois lugares.
+   *
+   * Continuam no catálogo, e isso não é detalhe: é o catálogo que serializa o
+   * filtro (`buildFilter` percorre o schema). Tirá-los de lá faria o atalho da
+   * barra parar de filtrar, sem erro nenhum. O modo avançado também segue com
+   * todos: é a saída de emergência, e esconder campo ali tornaria ilegível um
+   * filtro salvo que o use.
+   */
+  hiddenFields?: string[];
 }
 
 /**
@@ -55,6 +67,7 @@ export function FilterSheet({
   open,
   onOpenChange,
   filters,
+  hiddenFields = [],
 }: FilterSheetProps): JSX.Element {
   const { t } = useI18n();
   const labelFor = useFieldLabel();
@@ -83,6 +96,21 @@ export function FilterSheet({
     }
   };
 
+  /**
+   * O que o painel não mostra, o painel não mexe.
+   *
+   * O desfecho de `/logs` é escolhido na barra e não aparece aqui dentro —
+   * então nem "Aplicar" nem "Limpar" podem desmarcá-lo. Filtrar por rota
+   * enquanto se olha o sucesso é somar uma condição à outra, não trocar de
+   * assunto.
+   */
+  const keepHidden = (): FilterValues =>
+    Object.fromEntries(
+      hiddenFields
+        .filter((field) => values[field])
+        .map((field) => [field, values[field]]),
+    );
+
   const apply = (): void => {
     filters.setMode(draftMode);
     if (draftMode === "advanced") {
@@ -90,18 +118,18 @@ export function FilterSheet({
         filters.setTree(draftTree);
       }
     } else {
-      filters.setValues(draft);
+      filters.setValues({ ...draft, ...keepHidden() });
     }
     onOpenChange(false);
   };
 
   const clear = (): void => {
-    setDraft({});
+    setDraft(keepHidden());
     setDraftTree(initialTree(schema));
     if (draftMode === "advanced") {
       filters.setTree(initialTree(schema));
     } else {
-      filters.setValues({});
+      filters.setValues(keepHidden());
     }
     onOpenChange(false);
   };
@@ -111,13 +139,17 @@ export function FilterSheet({
       ? draftTree
         ? countConditions(draftTree)
         : 0
-      : activeFilterCount(draft);
+      : activeFilterCount(draft, hiddenFields);
 
-  const modes: { id: FilterMode; label: string }[] = [
-    { id: "simple", label: t("filters.simple") },
-    { id: "advanced", label: t("filters.advanced") },
+  const modes = [
+    { value: "simple", label: t("filters.simple") },
+    { value: "advanced", label: t("filters.advanced") },
   ];
 
+  const visibleFields = schema.filter(
+    (field) => !hiddenFields.includes(field.field),
+  );
+
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
@@ -131,23 +163,13 @@ export function FilterSheet({
           </SheetDescription>
         </SheetHeader>
 
-        <div className="inline-flex overflow-hidden rounded-md border border-border">
-          {modes.map((item) => (
-            <button
-              key={item.id}
-              type="button"
-              onClick={() => switchMode(item.id)}
-              className={cn(
-                "px-3 py-1.5 text-sm transition-colors",
-                draftMode === item.id
-                  ? "bg-primary text-primary-foreground"
-                  : "hover:bg-accent",
-              )}
-            >
-              {item.label}
-            </button>
-          ))}
-        </div>
+        <SegmentedControl
+          fullWidth
+          label={t("filters.title")}
+          options={modes}
+          value={draftMode}
+          onValueChange={(value) => switchMode(value as FilterMode)}
+        />
 
         <SheetBody className="-mx-1 space-y-5 px-1">
           {loading && <Spinner className="mx-auto mt-8" />}
@@ -160,7 +182,7 @@ export function FilterSheet({
 
           {!loading && schema.length > 0 && draftMode === "simple" && (
             <>
-              {schema.map((field) => (
+              {visibleFields.map((field) => (
                 <FilterFieldControl
                   key={field.field}
                   field={field}

package/src/components/ui/index.ts

@@ -12,7 +12,6 @@ export * from "./date-range-picker";
 export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./field";
-export * from "./filter-chips";
 export * from "./filter-field";
 export * from "./filter-group";
 export * from "./filter-rule";
@@ -20,6 +19,7 @@ export * from "./filter-sheet";
 export * from "./input";
 export * from "./label";
 export * from "./row-actions";
+export * from "./segmented-control";
 export * from "./select";
 export * from "./separator";
 export * from "./sheet";

package/src/components/ui/segmented-control.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+export interface SegmentedOption {
+  value: string;
+  label: string;
+}
+
+export interface SegmentedControlProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  options: SegmentedOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Rótulo acessível do grupo — o que essas opções escolhem. */
+  label: string;
+  /**
+   * Ocupa a largura toda, com as opções dividindo o espaço em partes iguais.
+   *
+   * Para quando o controle é o cabeçalho de um bloco — duas opções encostadas à
+   * esquerda de um painel largo ficam tortas. Solto, ele mede pelo conteúdo.
+   */
+  fullWidth?: boolean;
+}
+
+/**
+ * Escolha única no formato das abas: uma opção acesa dentro de uma trilha.
+ *
+ * Tem a pele do `Tabs`, mas não é aba: aba troca de painel, isto escolhe um
+ * valor. Por isso são botões de alternância num `role="group"`, e não o
+ * `Tabs` do Radix — que emitiria `role="tablist"` com `aria-controls`
+ * apontando para um painel inexistente.
+ *
+ * Vale quando as opções cabem na linha e são poucas (até ~5). Passando disso,
+ * `Select` — trilha que quebra em duas linhas fica pior que uma lista.
+ */
+export const SegmentedControl = ({
+  options,
+  value,
+  onValueChange,
+  label,
+  fullWidth = false,
+  className,
+  ...props
+}: SegmentedControlProps): React.JSX.Element => (
+  <div
+    role="group"
+    aria-label={label}
+    className={cn(
+      "h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      fullWidth ? "flex w-full" : "inline-flex",
+      className,
+    )}
+    {...props}
+  >
+    {options.map((option) => (
+      <button
+        key={option.value}
+        type="button"
+        aria-pressed={option.value === value}
+        onClick={() => onValueChange(option.value)}
+        className={cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          fullWidth && "flex-1",
+          option.value === value && "bg-card text-foreground shadow-sm",
+        )}
+      >
+        {option.label}
+      </button>
+    ))}
+  </div>
+);