@softize/opus 12.10.0 → 13.0.0

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

@@ -9,6 +9,7 @@
 import type { ReactNode } from 'react'
 import type { ViewAction } from '../../../core/index.ts'
 import { useViewAction } from '../../drivers/react.tsx'
+import { Alert } from '../primitives/alert.tsx'
 import { Skeleton } from '../primitives/skeleton.tsx'
 import { Button } from '../primitives/button.tsx'
 
@@ -61,17 +62,12 @@ export function ActionView<TInput, TData>({
       return <div data-action={action.name}>{error(err, refetch)}</div>
     }
     return (
-      <div
-        data-action={action.name}
-        className="rounded-md border border-destructive/50 bg-destructive/10 p-4 text-sm space-y-3"
-      >
-        <div>
-          <strong className="text-destructive">{err.code}</strong>
-          <p className="text-destructive">{err.message}</p>
-        </div>
-        <Button variant="outline" size="sm" onClick={() => void refetch()}>
-          Tentar de novo
-        </Button>
+      <div data-action={action.name}>
+        <Alert context="danger" title={err.code} description={err.message}>
+          <Button variant="outline" size="sm" onClick={() => void refetch()}>
+            Tentar de novo
+          </Button>
+        </Alert>
       </div>
     )
   }

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

@@ -1,146 +1,334 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../../lib/cn.ts'
-
-/**
- * Variantes do alert (cva). COM ícone o componente abre uma coluna de realce tonal;
- * sem ícone é bloco comum. `destructive`, `success` e `warning` mantêm superfície
- * tonalizada + borda (divergência da casa — o shadcn rebaixou destructive pra bg-card,
- * nós preservamos o realce).
- */
-export const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm has-[>svg]:grid has-[>svg]:grid-cols-[1rem_minmax(0,1fr)] has-[>svg]:items-start has-[>svg]:gap-x-3 has-[>svg]:gap-y-1 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
-  {
-    variants: {
-      variant: {
-        default: 'bg-card text-card-foreground',
-        destructive:
-          'border-destructive/50 bg-destructive/5 text-destructive *:data-[slot=alert-description]:text-destructive/90',
-        success:
-          'border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 *:data-[slot=alert-description]:text-emerald-700/90 dark:*:data-[slot=alert-description]:text-emerald-400/90',
-        warning:
-          'border-amber-500/40 bg-amber-500/10 text-foreground *:data-[slot=alert-description]:text-muted-foreground',
-      },
-    },
-    defaultVariants: { variant: 'default' },
-  },
-)
-
-const alertIconVariants = cva(
-  'flex size-9 shrink-0 items-center justify-center rounded-md [&_svg]:size-5',
-  {
-    variants: {
-      variant: {
-        default: 'bg-muted text-muted-foreground',
-        destructive: 'bg-destructive/10 text-destructive',
-        success: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-300',
-        warning: 'bg-amber-500/15 text-amber-700 dark:text-amber-300',
-      },
-    },
-    defaultVariants: { variant: 'default' },
-  },
-)
-
-/** `title` aqui é o TÍTULO do alert, não o atributo nativo do `<div>` (que é tooltip de
- *  browser — banido na casa em favor do `Tooltip`). Por isso o Omit. */
+import * as React from "react";
+import type { UiContext } from "../../../core/ui-context.ts";
+import { cn } from "../../lib/cn.ts";
+import {
+  semanticOutlineClasses,
+  semanticSubtleClasses,
+} from "../../lib/semantic-context.ts";
+
+export type AlertContext = Exclude<UiContext, "primary">;
+export type AlertVariant = "subtle" | "outline";
+export type LegacyAlertVariant =
+  "default" | "destructive" | "success" | "warning" | "info" | "danger";
+
+interface AlertStyleOptions {
+  context?: AlertContext | null;
+  variant?: AlertVariant | LegacyAlertVariant | null;
+}
+
+interface AlertRootContextValue {
+  context: AlertContext;
+}
+
+const AlertRootContext = React.createContext<AlertRootContextValue | null>(
+  null,
+);
+const AlertHeaderContext = React.createContext(false);
+
+function requiredContext<T>(
+  value: T | null,
+  component: string,
+  parent: string,
+): T {
+  if (value === null)
+    throw new Error(`${component} deve estar dentro de ${parent}.`);
+  return value;
+}
+
+function requireParent(
+  inside: boolean,
+  component: string,
+  parent: string,
+): void {
+  if (!inside) throw new Error(`${component} deve estar dentro de ${parent}.`);
+}
+
+function resolveAlertStyle({ context, variant }: AlertStyleOptions = {}): {
+  context: AlertContext;
+  variant: AlertVariant;
+} {
+  const legacy =
+    variant === "default" ||
+    variant === "destructive" ||
+    variant === "success" ||
+    variant === "warning" ||
+    variant === "info" ||
+    variant === "danger";
+  if (context != null && legacy) {
+    throw new Error(
+      "Alert não permite combinar context com uma variante semântica legada.",
+    );
+  }
+  if (variant === "default") return { context: "neutral", variant: "subtle" };
+  if (variant === "destructive")
+    return { context: "danger", variant: "subtle" };
+  if (
+    variant === "success" ||
+    variant === "warning" ||
+    variant === "info" ||
+    variant === "danger"
+  ) {
+    return { context: variant, variant: "subtle" };
+  }
+  return { context: context ?? "neutral", variant: variant ?? "subtle" };
+}
+
+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]",
+    resolved.variant === "outline"
+      ? semanticOutlineClasses[resolved.context]
+      : semanticSubtleClasses[resolved.context],
+  );
+}
+
+function alertMediaClasses(context: AlertContext): string {
+  const textClasses: Record<AlertContext, string> = {
+    neutral: "text-context-neutral-emphasis",
+    info: "text-context-info-emphasis",
+    success: "text-context-success-emphasis",
+    warning: "text-context-warning-emphasis",
+    danger: "text-context-danger-emphasis",
+  };
+  return cn(
+    "col-start-1 row-start-1 flex size-9 self-start items-center justify-center rounded-md bg-current/10 [&_svg]:size-5",
+    textClasses[context],
+  );
+}
+
+const alertHeaderClasses =
+  "col-start-2 row-start-1 flex min-w-0 flex-col justify-center gap-1";
+
+/** `title` é o título do alerta, não o atributo HTML homônimo. */
 export interface AlertProps
-  extends Omit<React.ComponentProps<'div'>, 'title'>,
-    VariantProps<typeof alertVariants> {
-  /** Forma CURTA: com `title` (e/ou `description`) o alert se monta sozinho — o caso
-   *  comum é uma linha só. Sem eles, vale a composição (`AlertTitle`/`AlertDescription`),
-   *  que segue existindo pro conteúdo rico (lista, link, botão). */
-  title?: React.ReactNode
-  description?: React.ReactNode
-  /** Ícone à esquerda (a 1ª coluna do grid). Decorativo — quem nomeia é o título. */
-  icon?: React.ReactNode
+  extends Omit<React.ComponentProps<"div">, "title">, AlertStyleOptions {
+  /** Forma curta: título e descrição materializam um AlertHeader. */
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  /** Forma curta: materializa AlertMedia. */
+  icon?: React.ReactNode;
 }
 
 export function Alert({
   className,
+  context,
   variant,
   title,
   description,
   icon,
   children,
-  style,
   ...props
 }: AlertProps): React.ReactElement {
-  const short = title !== undefined || description !== undefined
-  const hasIcon = icon !== undefined && icon !== null
-  // Texto CRU como filho (`<Alert>Sincronizado.</Alert>`) vira descrição: no layout com
-  // ícone ele cairia na coluna do ícone, espremido. Assim o atalho de sempre continua
-  // valendo e cai no slot certo.
-  const raw = typeof children === 'string' || typeof children === 'number'
-  const body = raw ? <AlertDescription>{children}</AlertDescription> : children
+  const raw = typeof children === "string" || typeof children === "number";
+  const shorthand = title !== undefined || description !== undefined || raw;
+  const resolved = resolveAlertStyle({ context, variant });
+  const nodes = React.Children.toArray(children);
+  const hasExplicitSlot = nodes.some(
+    (node) =>
+      React.isValidElement(node) &&
+      (node.type === AlertMedia ||
+        node.type === AlertHeader ||
+        node.type === AlertActions),
+  );
+  const legacyComposition = !shorthand && !hasExplicitSlot;
+
+  if (shorthand && hasExplicitSlot) {
+    throw new Error(
+      "Alert não permite misturar propriedades de shorthand com slots explícitos.",
+    );
+  }
+
+  if (!shorthand && !legacyComposition) {
+    if (icon !== undefined && icon !== null) {
+      throw new Error(
+        "Alert explícito usa AlertMedia; a propriedade icon pertence somente ao shorthand.",
+      );
+    }
+    const headers = nodes.filter(
+      (node) => React.isValidElement(node) && node.type === AlertHeader,
+    );
+    const media = nodes.filter(
+      (node) => React.isValidElement(node) && node.type === AlertMedia,
+    );
+    const actions = nodes.filter(
+      (node) => React.isValidElement(node) && node.type === AlertActions,
+    );
+    if (
+      headers.length !== 1 ||
+      media.length > 1 ||
+      actions.length > 1 ||
+      headers.length + media.length + actions.length !== nodes.length
+    ) {
+      throw new Error(
+        "Alert explícito exige um AlertHeader e aceita no máximo um AlertMedia e um AlertActions como filhos diretos.",
+      );
+    }
+  }
+
+  const action = raw ? undefined : children;
+  return (
+    <AlertRootContext.Provider value={{ context: resolved.context }}>
+      <div
+        data-slot="alert"
+        data-context={resolved.context}
+        data-variant={resolved.variant}
+        role="alert"
+        className={cn(alertVariants(resolved), className)}
+        {...props}
+      >
+        {shorthand ? (
+          <>
+            {icon !== undefined && icon !== null && (
+              <AlertMedia>{icon}</AlertMedia>
+            )}
+            <AlertHeader>
+              {title !== undefined && <AlertTitle>{title}</AlertTitle>}
+              {(description !== undefined || raw) && (
+                <AlertDescription>
+                  {raw ? children : description}
+                </AlertDescription>
+              )}
+            </AlertHeader>
+            {action !== undefined && action !== null && (
+              <AlertActions>{action}</AlertActions>
+            )}
+          </>
+        ) : legacyComposition ? (
+          <>
+            {icon !== undefined && icon !== null && (
+              <AlertMedia>{icon}</AlertMedia>
+            )}
+            <AlertHeaderContext.Provider value>
+              <div data-slot="alert-header" className={alertHeaderClasses}>
+                {children}
+              </div>
+            </AlertHeaderContext.Provider>
+          </>
+        ) : (
+          children
+        )}
+      </div>
+    </AlertRootContext.Provider>
+  );
+}
+
+export function AlertMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  const root = requiredContext(useAlertRoot(), "AlertMedia", "Alert");
   return (
     <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), hasIcon && 'grid items-start', className)}
-      style={hasIcon ? {
-        gridTemplateColumns: '2.25rem minmax(0, 1fr)',
-        columnGap: '0.75rem',
-        rowGap: '0.25rem',
-        ...style,
-      } : style}
+      data-slot="alert-media"
+      aria-hidden="true"
+      className={cn(alertMediaClasses(root.context), className)}
       {...props}
-    >
-      {hasIcon && (
-        <span
-          data-slot="alert-icon"
-          aria-hidden="true"
-          className={alertIconVariants({ variant })}
-          style={{ gridRow: '1 / span 2' }}
-        >
-          {icon}
-        </span>
-      )}
-      {short ? (
-        <>
-          {title !== undefined && <AlertTitle>{title}</AlertTitle>}
-          {description !== undefined && <AlertDescription>{description}</AlertDescription>}
-          {/* A ação (children DEPOIS da frase) precisa da coluna 2: sem `col-start-2`
-              ela cai na coluna do ícone e é espremida pra esquerda. O
-              `col-start-2` é inócuo sem o grid (forma curta sem ícone). */}
-          {children !== undefined && children !== null && (
-            <div data-slot="alert-actions" className="col-start-2 mt-1">
-              {body}
-            </div>
-          )}
-        </>
-      ) : (
-        body
-      )}
-    </div>
-  )
+    />
+  );
+}
+
+function useAlertRoot(): AlertRootContextValue | null {
+  return React.useContext(AlertRootContext);
 }
 
-export function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
+export function AlertHeader({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  requiredContext(useAlertRoot(), "AlertHeader", "Alert");
+  const nodes = React.Children.toArray(children);
+  const titles = nodes.filter(
+    (node) => React.isValidElement(node) && node.type === AlertTitle,
+  );
+  const descriptions = nodes.filter(
+    (node) => React.isValidElement(node) && node.type === AlertDescription,
+  );
+  const nativeChildren = nodes.filter(
+    (node) => React.isValidElement(node) && typeof node.type === "string",
+  );
+  if (
+    nodes.length === 0 ||
+    titles.length > 1 ||
+    descriptions.length > 1 ||
+    nativeChildren.length > 0
+  ) {
+    throw new Error(
+      "AlertHeader aceita no máximo um AlertTitle e um AlertDescription; wrappers reutilizáveis também são permitidos.",
+    );
+  }
+  return (
+    <AlertHeaderContext.Provider value>
+      <div
+        data-slot="alert-header"
+        className={cn(
+          alertHeaderClasses,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </AlertHeaderContext.Provider>
+  );
+}
+
+export function AlertTitle({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  requireParent(
+    React.useContext(AlertHeaderContext),
+    "AlertTitle",
+    "AlertHeader",
+  );
   return (
     <div
       data-slot="alert-title"
-      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+      className={cn(
+        "line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
       {...props}
     />
-  )
+  );
 }
 
 export function AlertDescription({
   className,
   ...props
-}: React.ComponentProps<'div'>): React.ReactElement {
+}: React.ComponentProps<"div">): React.ReactElement {
+  requireParent(
+    React.useContext(AlertHeaderContext),
+    "AlertDescription",
+    "AlertHeader",
+  );
   return (
     <div
       data-slot="alert-description"
       className={cn(
-        // NÃO é grid (era, no shadcn): num grid TODO nó filho vira item empilhado, então
-        // uma frase com interpolação — `Workspace {cliente} {nome} sincronizado.` — saía
-        // uma palavra por linha. Texto inline flui; o espaço entre BLOCOS filhos (p, ul,
-        // ação) continua vindo do `*+*`.
-        'col-start-2 text-sm text-muted-foreground [&>*+*]:mt-1 [&_p]:leading-relaxed',
+        "text-sm text-muted-foreground [&>*+*]:mt-1 [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AlertActions({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  requiredContext(useAlertRoot(), "AlertActions", "Alert");
+  return (
+    <div
+      data-slot="alert-actions"
+      className={cn(
+        "col-start-3 row-start-1 ms-3 flex self-center items-center gap-2",
         className,
       )}
       {...props}
     />
-  )
+  );
 }

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

@@ -115,7 +115,8 @@ export function Ask({
                           type="button"
                           size="sm"
                           shape="pill"
-                          variant={selected ? 'secondary' : 'outline'}
+                          context={selected ? 'neutral' : 'primary'}
+                          variant={selected ? 'solid' : 'outline'}
                           role={question.multiSelect ? undefined : 'radio'}
                           aria-checked={question.multiSelect ? undefined : selected}
                           aria-pressed={question.multiSelect ? selected : undefined}

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

@@ -1,40 +1,101 @@
 import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
+
+import type { UiContext } from '../../../core/ui-context.ts'
 import { cn } from '../../lib/cn.ts'
+import {
+  semanticOutlineClasses,
+  semanticSolidClasses,
+  semanticSubtleClasses,
+} from '../../lib/semantic-context.ts'
+
+export type BadgeContext = UiContext
+export type BadgeVariant = 'solid' | 'subtle' | 'outline'
+export type LegacyBadgeVariant =
+  | 'default'
+  | 'secondary'
+  | 'destructive'
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'danger'
+
+export interface BadgeStyleOptions {
+  context?: BadgeContext | null
+  variant?: BadgeVariant | LegacyBadgeVariant | null
+}
+
+const baseClasses =
+  'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 [&>svg]:pointer-events-none [&>svg]:size-3'
+
+export function resolveBadgeStyle({
+  context,
+  variant,
+}: BadgeStyleOptions = {}): { context: BadgeContext; variant: BadgeVariant } {
+  const legacy =
+    variant === 'default' ||
+    variant === 'secondary' ||
+    variant === 'destructive' ||
+    variant === 'success' ||
+    variant === 'warning' ||
+    variant === 'info' ||
+    variant === 'danger'
+  if (context != null && legacy) {
+    throw new Error('Badge não permite combinar context com uma variante semântica legada.')
+  }
+  switch (variant) {
+    case 'default':
+      return { context: 'primary', variant: 'solid' }
+    case 'secondary':
+      return { context: 'neutral', variant: 'solid' }
+    case 'destructive':
+      return { context: 'danger', variant: 'solid' }
+    case 'success':
+    case 'warning':
+    case 'info':
+    case 'danger':
+      return { context: variant, variant: 'subtle' }
+    default:
+      return {
+        context: context ?? 'neutral',
+        variant: variant ?? 'subtle',
+      }
+  }
+}
+
+/** Classes do Badge. Contexto seleciona significado; variante seleciona o tratamento visual. */
+export function badgeVariants(options: BadgeStyleOptions = {}): string {
+  const resolved = resolveBadgeStyle(options)
+  const classes =
+    resolved.variant === 'solid'
+      ? semanticSolidClasses[resolved.context]
+      : resolved.variant === 'outline'
+        ? semanticOutlineClasses[resolved.context]
+        : semanticSubtleClasses[resolved.context]
+  return cn(baseClasses, classes)
+}
 
-export const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-        destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
-        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-        // Tons de status (fill tingido + borda translúcida) — convenção da casa pra
-        // estado semântico, igual ao KindBadge do maestro. Não-interativos.
-        success: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
-        warning: 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-400',
-        info: 'border-blue-500/30 bg-blue-500/10 text-blue-700 dark:text-blue-400',
-        // `danger` é o tom tonal da família (status/estágio em `DictionaryValue`);
-        // `destructive` continua sólido, reservado a alerta/ação.
-        danger: 'border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-400',
-      },
-    },
-    defaultVariants: { variant: 'default' },
-  },
-)
-
-export interface BadgeProps
-  extends React.ComponentProps<'span'>,
-    VariantProps<typeof badgeVariants> {
+export interface BadgeProps extends React.ComponentProps<'span'>, BadgeStyleOptions {
   /** Renderiza como o filho (Radix Slot) — ex.: um <a> com cara de badge. */
   asChild?: boolean
 }
 
-export function Badge({ className, variant, asChild = false, ...props }: BadgeProps): React.ReactElement {
+export function Badge({
+  className,
+  context,
+  variant,
+  asChild = false,
+  ...props
+}: BadgeProps): React.ReactElement {
   const Comp = asChild ? Slot : 'span'
-  return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+  const resolved = resolveBadgeStyle({ context, variant })
+  return (
+    <Comp
+      data-slot="badge"
+      data-context={resolved.context}
+      data-variant={resolved.variant}
+      className={cn(badgeVariants(resolved), className)}
+      {...props}
+    />
+  )
 }