@softize/opus 22.2.0 → 24.0.0

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

@@ -1,83 +1,86 @@
-import * as React from 'react'
-import type { UiContext } from '../../../core/ui-context.ts'
-import { cn } from '../../lib/cn.ts'
-import { Card } from './card.tsx'
-import { Skeleton } from './skeleton.tsx'
+import * as React from "react";
+import type { UiContext } from "../../../core/ui-context.ts";
+import { cn } from "../../lib/cn.ts";
+import { Skeleton } from "./skeleton.tsx";
+import { Surface } from "../patterns/surface.tsx";
 
 /** @deprecated Use `MetricCardContext`. */
-export type MetricCardTone = 'default' | 'warning'
-export type MetricCardContext = Exclude<UiContext, 'primary'>
+export type MetricCardTone = "default" | "warning";
+export type MetricCardContext = Exclude<UiContext, "primary">;
 
 export interface MetricCardSecondaryMetric {
   /** Nome curto da medida complementar. */
-  label: React.ReactNode
+  label: React.ReactNode;
   /** Valor complementar já formatado pelo consumidor. */
-  value: React.ReactNode
+  value: React.ReactNode;
   /** Controle complementar próprio, como uma explicação em tooltip. */
-  labelAction?: React.ReactNode
+  labelAction?: React.ReactNode;
 }
 
 const iconContextClasses: Record<MetricCardContext, string> = {
-  neutral: 'bg-context-neutral-subtle text-context-neutral-emphasis',
-  info: 'bg-context-info-subtle text-context-info-emphasis',
-  success: 'bg-context-success-subtle text-context-success-emphasis',
-  warning: 'bg-context-warning-subtle text-context-warning-emphasis',
-  danger: 'bg-context-danger-subtle text-context-danger-emphasis',
-}
+  neutral: "bg-context-neutral-subtle text-context-neutral-emphasis",
+  info: "bg-context-info-subtle text-context-info-emphasis",
+  success: "bg-context-success-subtle text-context-success-emphasis",
+  warning: "bg-context-warning-subtle text-context-warning-emphasis",
+  danger: "bg-context-danger-subtle text-context-danger-emphasis",
+};
 
-interface MetricCardBaseProps extends Omit<React.ComponentProps<typeof Card>, 'children' | 'asChild'> {
+interface MetricCardBaseProps extends Omit<
+  React.ComponentProps<"div">,
+  "children" | "title"
+> {
   /** Controle complementar exibido ao lado do rótulo, como uma explicação em tooltip. */
-  labelAction?: React.ReactNode
+  labelAction?: React.ReactNode;
   /** Contexto que explica recorte, proporção ou significado do valor. */
-  description?: React.ReactNode
+  description?: React.ReactNode;
   /** Ícone decorativo que identifica a natureza da medida. */
-  icon?: React.ReactNode
+  icon?: React.ReactNode;
   /** Contexto semântico do ícone; não altera a superfície do card. */
-  context?: MetricCardContext
+  context?: MetricCardContext;
   /** @deprecated Use `context`. Compatibilidade temporária da ADR 0006. */
-  tone?: MetricCardTone
+  tone?: MetricCardTone;
   /** Ação relacionada diretamente à medida. */
-  action?: React.ReactNode
+  action?: React.ReactNode;
   /** Medida complementar exibida como uma lâmina posterior sob o card principal. */
-  secondaryMetric?: MetricCardSecondaryMetric
+  secondaryMetric?: MetricCardSecondaryMetric;
 }
 
 type MetricCardActivationProps =
   | {
       /** Indica se a medida controla o recorte atualmente aplicado. */
-      active: boolean
+      active: boolean;
       /** Ativa a medida como recorte ou seleção. */
-      onActivate: () => void
+      onActivate: () => void;
       /** Nome acessível da ativação, como “Filtrar por Agendados”. */
-      activationLabel: string
+      activationLabel: string;
       /** Use `onActivate`; o clique genérico conflita com os controles internos do card. */
-      onClick?: never
+      onClick?: never;
     }
   | {
-      active?: never
-      onActivate?: never
-      activationLabel?: never
-    }
+      active?: never;
+      onActivate?: never;
+      activationLabel?: never;
+    };
 
 export type MetricCardProps = MetricCardBaseProps &
   MetricCardActivationProps &
   (
     | {
         /** Nome curto da medida apresentada. */
-        label: React.ReactNode
+        label: React.ReactNode;
         /** Valor já formatado pelo consumidor. */
-        value: React.ReactNode
-        loading?: false
+        value: React.ReactNode;
+        loading?: false;
       }
     | {
         /** O rótulo pode ser omitido porque o placeholder ocupa toda a composição. */
-        label?: React.ReactNode
+        label?: React.ReactNode;
         /** O valor ainda não está disponível durante o carregamento. */
-        value?: React.ReactNode
+        value?: React.ReactNode;
         /** Substitui o conteúdo por placeholders preservando a geometria do card. */
-        loading: true
+        loading: true;
       }
-  )
+  );
 
 /**
  * MetricCard apresenta uma medida resumida. Formatação, cálculo e carregamento dos dados
@@ -101,19 +104,24 @@ export function MetricCard({
   ...props
 }: MetricCardProps): React.ReactElement {
   if (context !== undefined && tone !== undefined) {
-    throw new Error('MetricCard não permite combinar context com tone legado.')
+    throw new Error("MetricCard não permite combinar context com tone legado.");
   }
-  const hasIcon = icon !== undefined && icon !== null
-  const resolvedContext = context ?? (tone === 'warning' ? 'warning' : 'neutral')
-  const interactive = onActivate !== undefined
+  const hasIcon = icon !== undefined && icon !== null;
+  const resolvedContext =
+    context ?? (tone === "warning" ? "warning" : "neutral");
+  const interactive = onActivate !== undefined;
 
   const primaryCard = (
-    <Card
+    <Surface
+      framed
+      elevation="raised"
       data-slot="metric-card"
-      aria-busy={secondaryMetric === undefined ? loading || undefined : undefined}
+      aria-busy={
+        secondaryMetric === undefined ? loading || undefined : undefined
+      }
       className={cn(
-        'min-w-0 p-4',
-        secondaryMetric !== undefined && 'relative z-10',
+        "min-w-0 p-4",
+        secondaryMetric !== undefined && "relative z-10",
         secondaryMetric === undefined && !interactive && className,
       )}
       {...(secondaryMetric === undefined && !interactive ? props : {})}
@@ -146,7 +154,7 @@ export function MetricCard({
                 data-context={resolvedContext}
                 aria-hidden="true"
                 className={cn(
-                  'flex size-8 shrink-0 items-center justify-center rounded-md [&_svg]:size-4',
+                  "flex size-8 shrink-0 items-center justify-center rounded-md [&_svg]:size-4",
                   iconContextClasses[resolvedContext],
                 )}
               >
@@ -161,7 +169,10 @@ export function MetricCard({
             {value}
           </div>
           {description !== undefined && (
-            <div data-slot="metric-card-description" className="mt-1 text-xs text-muted-foreground">
+            <div
+              data-slot="metric-card-description"
+              className="mt-1 text-xs text-muted-foreground"
+            >
               {description}
             </div>
           )}
@@ -172,8 +183,8 @@ export function MetricCard({
           )}
         </>
       )}
-    </Card>
-  )
+    </Surface>
+  );
 
   const metric =
     secondaryMetric === undefined ? (
@@ -183,10 +194,12 @@ export function MetricCard({
         {...(!interactive ? props : {})}
         data-slot="metric-card-stack"
         aria-busy={loading || undefined}
-        className={cn('relative isolate min-w-0', !interactive && className)}
+        className={cn("relative isolate min-w-0", !interactive && className)}
       >
         {primaryCard}
-        <Card
+        <Surface
+          framed
+          elevation="raised"
           data-slot="metric-card-secondary"
           className="relative z-0 -mt-8 flex w-full min-w-0 items-center gap-1.5 bg-[color-mix(in_oklab,var(--card)_88%,black)] px-4 pt-9 pb-1"
         >
@@ -208,18 +221,21 @@ export function MetricCard({
                   {secondaryMetric.label}
                 </div>
                 {secondaryMetric.labelAction !== undefined && (
-                  <div data-slot="metric-card-secondary-label-action" className="shrink-0">
+                  <div
+                    data-slot="metric-card-secondary-label-action"
+                    className="shrink-0"
+                  >
                     {secondaryMetric.labelAction}
                   </div>
                 )}
               </div>
             </>
           )}
-        </Card>
+        </Surface>
       </div>
-    )
+    );
 
-  if (!interactive) return metric
+  if (!interactive) return metric;
 
   return (
     <div
@@ -230,7 +246,7 @@ export function MetricCard({
         // Ativa = a borda na cor primária, e só. Anel somaria uma segunda linha de
         // outra cor à borda e, pintado para fora, sumiria no primeiro ancestral com
         // `overflow-hidden`.
-        'relative isolate min-w-0 data-[active=true]:[&_[data-slot=metric-card]]:border-primary',
+        "relative isolate min-w-0 data-[active=true]:[&_[data-slot=metric-card]]:border-primary",
         className,
       )}
     >
@@ -247,5 +263,5 @@ export function MetricCard({
         {metric}
       </div>
     </div>
-  )
+  );
 }

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

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { CircleIcon } from "lucide-react"
-import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+import * as React from "react";
+import { CircleIcon } from "lucide-react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
 
-import { cn } from '../../lib/cn.ts'
+import { cn } from "../../lib/cn.ts";
 
 function RadioGroup({
   className,
@@ -14,7 +14,7 @@ function RadioGroup({
       className={cn("grid gap-3", className)}
       {...props}
     />
-  )
+  );
 }
 
 function RadioGroupItem({
@@ -25,8 +25,8 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "peer aspect-square size-4 shrink-0 rounded-full border border-input text-primary transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:bg-input/30 dark:aria-invalid:ring-context-danger/40",
-        className
+        "peer aspect-square size-4 shrink-0 rounded-full border border-input bg-control text-primary transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40",
+        className,
       )}
       {...props}
     >
@@ -37,7 +37,7 @@ function RadioGroupItem({
         <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
+  );
 }
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };