@softize/opus 27.0.0 → 28.0.0

package/src/ui/components/primitives/icon-picker.tsx

@@ -7,10 +7,10 @@ import {
   Briefcase,
   Building2,
   Calendar,
+  Car,
   ChartBar,
   ChartLine,
   ChartPie,
-  Check,
   ChevronsUpDown,
   ClipboardList,
   Clock,
@@ -71,6 +71,7 @@ export const iconPickerIcons: Record<string, LucideIcon> = {
   briefcase: Briefcase,
   building: Building2,
   calendar: Calendar,
+  car: Car,
   "chart-bar": ChartBar,
   "chart-line": ChartLine,
   "chart-pie": ChartPie,
@@ -110,12 +111,111 @@ export const iconPickerIcons: Record<string, LucideIcon> = {
   zap: Zap,
 };
 
+/** Rótulos e termos de busca separados dos identificadores persistidos. */
+export const iconPickerSearch: Record<
+  string,
+  { label: string; keywords: string[] }
+> = {
+  car: { label: "Carro", keywords: ["veículo", "automóvel", "vendas"] },
+  activity: { label: "Atividade", keywords: ["pulso", "saúde"] },
+  banknote: { label: "Dinheiro", keywords: ["nota", "pagamento", "valor"] },
+  bell: { label: "Sino", keywords: ["alerta", "notificação"] },
+  box: { label: "Caixa", keywords: ["estoque", "produto"] },
+  briefcase: { label: "Maleta", keywords: ["trabalho", "negócio"] },
+  building: { label: "Edifício", keywords: ["empresa", "unidade", "prédio"] },
+  calendar: { label: "Calendário", keywords: ["agenda", "data", "evento"] },
+  "chart-bar": {
+    label: "Gráfico de barras",
+    keywords: ["relatório", "análise"],
+  },
+  "chart-line": {
+    label: "Gráfico de linhas",
+    keywords: ["evolução", "relatório"],
+  },
+  "chart-pie": {
+    label: "Gráfico de pizza",
+    keywords: ["percentual", "relatório"],
+  },
+  "clipboard-list": {
+    label: "Prancheta",
+    keywords: ["tarefas", "lista", "checklist"],
+  },
+  clock: { label: "Relógio", keywords: ["hora", "tempo", "prazo"] },
+  "credit-card": { label: "Cartão", keywords: ["crédito", "pagamento"] },
+  database: { label: "Banco de dados", keywords: ["base", "registros"] },
+  "file-text": { label: "Documento", keywords: ["página", "texto", "arquivo"] },
+  flag: { label: "Bandeira", keywords: ["marco", "sinalização"] },
+  folder: { label: "Pasta", keywords: ["diretório", "arquivos"] },
+  gauge: { label: "Medidor", keywords: ["velocidade", "desempenho"] },
+  globe: { label: "Globo", keywords: ["mundo", "público", "internet"] },
+  heart: { label: "Coração", keywords: ["favorito", "saúde"] },
+  layers: { label: "Camadas", keywords: ["coleção", "conjunto"] },
+  "layout-grid": { label: "Grade", keywords: ["cartões", "painel"] },
+  lightbulb: { label: "Lâmpada", keywords: ["ideia", "sugestão"] },
+  mail: {
+    label: "Envelope",
+    keywords: ["email", "e-mail", "correio", "mensagem"],
+  },
+  "map-pin": { label: "Localização", keywords: ["endereço", "mapa", "lugar"] },
+  "message-circle": {
+    label: "Conversa",
+    keywords: ["chat", "mensagem", "atendimento"],
+  },
+  "message-square": { label: "Mensagem", keywords: ["chat", "comentário"] },
+  package: { label: "Pacote", keywords: ["entrega", "produto", "encomenda"] },
+  phone: { label: "Telefone", keywords: ["ligação", "contato"] },
+  rocket: { label: "Foguete", keywords: ["lançamento", "inovação"] },
+  settings: { label: "Configurações", keywords: ["ajustes", "engrenagem"] },
+  "shopping-cart": { label: "Carrinho", keywords: ["compra", "venda"] },
+  star: { label: "Estrela", keywords: ["favorito", "destaque"] },
+  store: { label: "Loja", keywords: ["comércio", "unidade"] },
+  table: { label: "Tabela", keywords: ["planilha", "catálogo"] },
+  target: { label: "Alvo", keywords: ["meta", "objetivo"] },
+  "trending-down": { label: "Queda", keywords: ["redução", "tendência"] },
+  "trending-up": { label: "Crescimento", keywords: ["aumento", "tendência"] },
+  truck: {
+    label: "Caminhão",
+    keywords: ["transporte", "veículo", "logística"],
+  },
+  user: { label: "Pessoa", keywords: ["usuário", "cliente"] },
+  users: { label: "Pessoas", keywords: ["equipe", "grupo", "clientes"] },
+  wallet: { label: "Carteira", keywords: ["saldo", "financeiro"] },
+  wrench: { label: "Ferramenta", keywords: ["chave", "manutenção", "serviço"] },
+  zap: { label: "Raio", keywords: ["automação", "energia", "fluxo"] },
+};
+
+export interface IconCatalogEntry {
+  name: string;
+  label: string;
+  keywords: string[];
+}
+export interface IconCatalog {
+  load: () => Promise<IconCatalogEntry[]>;
+  render: (name: string, className: string) => React.ReactNode;
+}
+const IconCatalogContext = React.createContext<IconCatalog | null>(null);
+export function IconCatalogProvider({
+  catalog,
+  children,
+}: {
+  catalog: IconCatalog;
+  children: React.ReactNode;
+}) {
+  return (
+    <IconCatalogContext.Provider value={catalog}>
+      {children}
+    </IconCatalogContext.Provider>
+  );
+}
+
 export interface IconPickerProps {
   /** Nome do ícone selecionado (chave da paleta) — '' = nenhum. */
   value: string;
   onChange: (name: string) => void;
   /** Paleta nome → componente. Default: `iconPickerIcons` (curada). */
   icons?: Record<string, LucideIcon>;
+  /** Rótulos e sinônimos para busca; não alteram o valor persistido. */
+  searchTerms?: typeof iconPickerSearch;
   placeholder?: string;
   disabled?: boolean;
   className?: string;
@@ -133,7 +233,8 @@ export interface IconPickerProps {
 export function IconPicker({
   value,
   onChange,
-  icons = iconPickerIcons,
+  icons: providedIcons,
+  searchTerms = iconPickerSearch,
   placeholder = "Selecione um ícone…",
   disabled,
   className,
@@ -141,11 +242,80 @@ export function IconPicker({
   "aria-invalid": ariaInvalid,
   "aria-describedby": ariaDescribedBy,
 }: IconPickerProps): React.ReactElement {
+  const contextCatalog = React.useContext(IconCatalogContext);
+  const catalog = providedIcons ? null : contextCatalog;
+  const icons = providedIcons ?? iconPickerIcons;
+  const [entries, setEntries] = React.useState<IconCatalogEntry[] | null>(null);
+  const [loadError, setLoadError] = React.useState(false);
+  const [attempt, setAttempt] = React.useState(0);
+  const [query, setQuery] = React.useState("");
+  const [limit, setLimit] = React.useState(64);
+  const listRef = React.useRef<HTMLDivElement>(null);
   const [open, setOpen] = React.useState(false);
-  const Current = value !== "" ? icons[value] : undefined;
+  const Current = Object.hasOwn(icons, value) ? icons[value] : undefined;
+  const [active, setActive] = React.useState("");
+  const loadedCatalog = React.useRef<typeof catalog>(null);
+  React.useEffect(() => {
+    if (!open || !catalog || loadedCatalog.current === catalog) return;
+    setEntries(null);
+    let cancelled = false;
+    setLoadError(false);
+    catalog
+      .load()
+      .then((items) => {
+        if (!cancelled) {
+          loadedCatalog.current = catalog;
+          setEntries(items);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setLoadError(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, catalog, attempt]);
+  const normalize = (text: string) =>
+    text
+      .normalize("NFD")
+      .replace(/\p{Diacritic}/gu, "")
+      .toLocaleLowerCase("pt-BR");
+  const available = catalog
+    ? loadedCatalog.current === catalog
+      ? (entries ?? [])
+      : []
+    : Object.keys(icons).map((name) => ({
+        name,
+        label: searchTerms[name]?.label ?? name,
+        keywords: searchTerms[name]?.keywords ?? [],
+      }));
+  const filtered = available.filter((entry) =>
+    normalize(query)
+      .trim()
+      .split(/\s+/)
+      .every((term) =>
+        normalize(
+          [entry.name, entry.label, ...entry.keywords].join(" "),
+        ).includes(term),
+      ),
+  );
+  const renderIcon = (name: string, className: string) => {
+    if (catalog) return catalog.render(name, className);
+    const Icon = Object.hasOwn(icons, name) ? icons[name] : undefined;
+    return Icon ? <Icon className={className} aria-hidden="true" /> : null;
+  };
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (next) {
+          setQuery("");
+          setLimit(64);
+        }
+      }}
+    >
       <PopoverTrigger asChild>
         <button
           type="button"
@@ -164,11 +334,13 @@ export function IconPicker({
             className,
           )}
         >
-          {Current !== undefined ? (
+          {(catalog && value) || Current !== undefined ? (
             <>
-              <Current className="size-4 shrink-0" />
-              <span data-slot="icon-picker-value" className="truncate">
-                {value}
+              {renderIcon(value, "size-4 shrink-0")}
+              <span data-slot="icon-picker-value" className="sr-only">
+                {available.find((entry) => entry.name === value)?.label ??
+                  searchTerms[value]?.label ??
+                  "Ícone selecionado"}
               </span>
             </>
           ) : (
@@ -179,33 +351,98 @@ export function IconPicker({
       </PopoverTrigger>
       <PopoverContent
         align="start"
-        className="pointer-events-auto w-(--radix-popover-trigger-width) p-0"
+        className="pointer-events-auto w-96 max-w-[calc(100vw-2rem)] p-0"
+        onWheel={(event) => event.stopPropagation()}
+        onTouchMove={(event) => event.stopPropagation()}
       >
-        <Command>
-          <CommandInput placeholder="Buscar ícone…" />
-          <CommandList data-slot="icon-picker-list" className="max-h-60">
-            <CommandEmpty>Nada encontrado.</CommandEmpty>
-            <CommandGroup>
-              {Object.entries(icons).map(([name, Icon]) => (
-                <CommandItem
-                  key={name}
-                  data-slot="icon-picker-item"
-                  value={name}
-                  onSelect={() => {
-                    onChange(name === value ? "" : name);
-                    setOpen(false);
-                  }}
-                >
-                  <Icon className="size-4" />
-                  <span className="truncate">{name}</span>
-                  <Check
-                    className={cn(
-                      "ml-auto size-4 shrink-0",
-                      value === name ? "opacity-100" : "opacity-0",
-                    )}
-                  />
-                </CommandItem>
-              ))}
+        <Command
+          shouldFilter={false}
+          value={active}
+          onValueChange={setActive}
+          onKeyDown={(event) => {
+            const step =
+              event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+            if (!step) return;
+            event.preventDefault();
+            const items = Array.from(
+              event.currentTarget.querySelectorAll<HTMLElement>(
+                "[cmdk-item]:not([hidden])",
+              ),
+            );
+            const index = items.findIndex(
+              (item) => item.dataset.value === active,
+            );
+            const next =
+              items[Math.max(0, Math.min(items.length - 1, index + step))];
+            if (next) {
+              setActive(next.dataset.value ?? "");
+              next.scrollIntoView({ block: "nearest" });
+            }
+          }}
+        >
+          <CommandInput
+            placeholder="Buscar ícone…"
+            value={query}
+            onValueChange={(next) => {
+              if (listRef.current) listRef.current.scrollTop = 0;
+              setQuery(next);
+              setLimit(64);
+            }}
+          />
+          {catalog && !entries && !loadError ? (
+            <div role="status" className="p-4 text-sm">
+              Carregando ícones…
+            </div>
+          ) : loadError ? (
+            <div role="alert" className="p-4 text-sm">
+              Não foi possível carregar os ícones.{" "}
+              <button
+                type="button"
+                className="underline"
+                onClick={() => setAttempt((value) => value + 1)}
+              >
+                Tentar novamente
+              </button>
+            </div>
+          ) : null}
+          <CommandList
+            ref={listRef}
+            onScroll={(event) => {
+              const list = event.currentTarget;
+              if (
+                list.scrollHeight - list.scrollTop - list.clientHeight <=
+                list.clientHeight / 2
+              ) {
+                setLimit((count) => Math.min(count + 64, filtered.length));
+              }
+            }}
+            data-slot="icon-picker-list"
+            className="max-h-60 overscroll-contain"
+          >
+            {!loadError && (!catalog || entries) ? (
+              <CommandEmpty>Nada encontrado.</CommandEmpty>
+            ) : null}
+            <CommandGroup className="[&_[cmdk-group-items]]:grid [&_[cmdk-group-items]]:grid-cols-8 [&_[cmdk-group-items]]:gap-1">
+              {filtered.slice(0, limit).map(({ name, label }) => {
+                return (
+                  <CommandItem
+                    key={name}
+                    data-slot="icon-picker-item"
+                    value={name}
+                    aria-label={label}
+                    data-current={name === value}
+                    className="h-10 justify-center p-0 data-[current=true]:ring-1 data-[current=true]:ring-inset data-[current=true]:ring-primary"
+                    onSelect={() => {
+                      onChange(name === value ? "" : name);
+                      setOpen(false);
+                    }}
+                  >
+                    <span className="flex h-full w-full items-center justify-center">
+                      {renderIcon(name, "size-5")}
+                    </span>
+                  </CommandItem>
+                );
+              })}
             </CommandGroup>
           </CommandList>
         </Command>

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

@@ -3,7 +3,7 @@ import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-re
 
 import { cn } from '../../lib/cn.ts'
 import { buttonVariants, type ButtonProps } from './button.tsx'
-import { controlSquare, type ControlIconSize } from './control.ts'
+import { controlBase, controlSquare, type ControlIconSize } from './control.ts'
 
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
@@ -46,12 +46,13 @@ export interface PaginationLinkProps extends Omit<React.ComponentProps<'a'>, 'ch
 
 /**
  * Um link de página. Altura fixa, largura mínima quadrada e largura que cresce com o
- * número (`min-w-9 w-auto px-2`, dígitos tabulares): 5726 e 5727 nunca se sobrepõem. Com
+ * número (largura mínima igual à altura do tamanho escolhido, dígitos tabulares): 5726 e 5727 nunca se sobrepõem. Com
  * `href` é `<a>`; sem `href` é `<button type="button">`, que preserva foco e teclado no
- * modo controlado. Ajuste a escala por `className` (ex.: `h-7 min-w-7 text-xs`).
+ * modo controlado. Ajuste a escala por `size`; a largura mínima acompanha a altura do degrau.
  */
 function PaginationLink({ className, isActive, page, disabled, href, size = 'default', children, ...props }: PaginationLinkProps) {
   const square = typeof size === 'string' && size.startsWith('icon')
+  const minWidth = { xs: 'min-w-6', sm: 'min-w-8', default: 'min-w-9', lg: 'min-w-10' }[controlBase(size)]
   const shared = {
     'aria-current': isActive ? ('page' as const) : undefined,
     'aria-label': props['aria-label'] ?? (page !== undefined ? `Página ${page}` : undefined),
@@ -61,7 +62,7 @@ function PaginationLink({ className, isActive, page, disabled, href, size = 'def
       buttonVariants({ variant: isActive ? 'outline' : 'ghost', size }),
       // Número: a largura mínima é quadrada e o conteúdo manda no resto. Escala `icon*`
       // fica quadrada de verdade (sem `has-[>svg]:px-*` do `default`).
-      !square && 'h-9 w-auto min-w-9 px-2 tabular-nums',
+      !square && cn('w-auto px-2 tabular-nums', minWidth),
       className,
     ),
   }

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

@@ -2,6 +2,10 @@ import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 
 import { cn } from "../../lib/cn.ts";
+import {
+  structuralBodyRhythm,
+  structuralRegionGap,
+} from "../patterns/surface-anatomy.ts";
 import { controlHeight, type ControlSize } from "./control.ts";
 
 // Divergência da casa (ejetado): o Tabs ganhou `size` — Button e Select têm `sm`, o Tabs
@@ -45,8 +49,10 @@ function Tabs({
               data-framed={framed}
               orientation={orientation}
               className={cn(
-                "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+                "group/tabs flex data-[orientation=horizontal]:flex-col",
+                structuralRegionGap,
                 framed && "overflow-hidden rounded-xl border",
+                framed && orientation === "vertical" && "p-4",
                 className,
               )}
               {...props}
@@ -192,10 +198,17 @@ function TabsPanel({
   className,
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  const framed = React.useContext(TabsFramedContext);
+  const orientation = React.useContext(TabsOrientationContext);
   return (
     <TabsPrimitive.Content
       data-slot="tabs-panel"
-      className={cn("flex-1 outline-none", className)}
+      className={cn(
+        "flex-1 outline-none data-[state=inactive]:hidden",
+        structuralBodyRhythm,
+        framed && orientation === "horizontal" && "px-4 pb-4",
+        className,
+      )}
       {...props}
     />
   );

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

@@ -19,7 +19,7 @@ const toggleVariants = cva(
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent text-muted-foreground hover:bg-interaction-hover hover:text-foreground active:bg-interaction-pressed data-[state=on]:bg-interaction-selected data-[state=on]:text-foreground",
+          "border border-input bg-transparent text-muted-foreground hover:bg-interaction-hover/50 hover:text-foreground active:bg-interaction-pressed data-[state=on]:bg-interaction-selected/50 data-[state=on]:text-foreground",
       },
       // Alturas da escala de control.ts (`sm` = o mesmo h-8 de Button e Select).
       size: {