@softize/opus 12.10.0 → 13.0.0

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

@@ -81,10 +81,10 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
   )
 }
 
-function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+function EmptyActions({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      data-slot="empty-content"
+      data-slot="empty-actions"
       className={cn(
         "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
         className
@@ -99,6 +99,6 @@ export {
   EmptyHeader,
   EmptyTitle,
   EmptyDescription,
-  EmptyContent,
+  EmptyActions,
   EmptyMedia,
 }

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

@@ -1,24 +1,35 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from '../../lib/cn.ts'
-import { Separator } from './separator.tsx'
-
-const itemGroupVariants = cva("group/item-group @container/item-group flex flex-col", {
-  variants: {
-    variant: {
-      plain: "",
-      framed:
-        "overflow-hidden rounded-xl border border-border bg-card text-card-foreground [&>[data-slot=item]]:rounded-none [&>[data-slot=item-container]>[data-slot=item]]:rounded-none",
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "../../lib/cn.ts";
+import { Separator } from "./separator.tsx";
+
+const itemGroupVariants = cva(
+  "group/item-group @container/item-group flex flex-col",
+  {
+    variants: {
+      variant: {
+        plain: "",
+        framed:
+          "overflow-hidden rounded-xl border border-border bg-card text-card-foreground [&>[data-slot=item]]:rounded-none [&>[data-slot=item-container]>[data-slot=item]]:rounded-none",
+      },
     },
+    defaultVariants: { variant: "plain" },
   },
-  defaultVariants: {
-    variant: "plain",
-  },
-})
+);
+
+const ItemGroupContext = React.createContext(false);
+const ItemContext = React.createContext(false);
+const ItemHeaderContext = React.createContext(false);
 
-const ItemGroupContext = React.createContext(false)
+function requireParent(
+  inside: boolean,
+  component: string,
+  parent: string,
+): void {
+  if (!inside) throw new Error(`${component} deve estar dentro de ${parent}.`);
+}
 
 function ItemGroup({
   className,
@@ -35,7 +46,7 @@ function ItemGroup({
         {...props}
       />
     </ItemGroupContext.Provider>
-  )
+  );
 }
 
 function ItemSeparator({
@@ -49,7 +60,7 @@ function ItemSeparator({
       className={cn("my-0", className)}
       {...props}
     />
-  )
+  );
 }
 
 const itemVariants = cva(
@@ -66,12 +77,9 @@ const itemVariants = cva(
         sm: "gap-2.5 px-4 py-3",
       },
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+    defaultVariants: { variant: "default", size: "default" },
+  },
+);
 
 function Item({
   className,
@@ -82,9 +90,8 @@ function Item({
   ...props
 }: React.ComponentProps<"div"> &
   VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const grouped = React.useContext(ItemGroupContext)
-  const Comp = asChild ? Slot.Root : "div"
-
+  const grouped = React.useContext(ItemGroupContext);
+  const Comp = asChild ? Slot.Root : "div";
   const content = (
     <Comp
       role={role ?? (!asChild && grouped ? "listitem" : undefined)}
@@ -94,23 +101,22 @@ function Item({
       className={cn(itemVariants({ variant, size, className }))}
       {...props}
     />
-  )
-
-  if (asChild && grouped) {
-    return (
-      <div role="listitem" data-slot="item-container">
-        {content}
-      </div>
-    )
-  }
-
+  );
   return (
-    content
-  )
+    <ItemContext.Provider value>
+      {asChild && grouped ? (
+        <div role="listitem" data-slot="item-container">
+          {content}
+        </div>
+      ) : (
+        content
+      )}
+    </ItemContext.Provider>
+  );
 }
 
 const itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  "flex shrink-0 self-start items-center justify-center gap-2 [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
@@ -120,17 +126,16 @@ const itemMediaVariants = cva(
           "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
       },
     },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
+    defaultVariants: { variant: "default" },
+  },
+);
 
 function ItemMedia({
   className,
   variant = "default",
   ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  requireParent(React.useContext(ItemContext), "ItemMedia", "Item");
   return (
     <div
       data-slot="item-media"
@@ -138,94 +143,145 @@ function ItemMedia({
       className={cn(itemMediaVariants({ variant, className }))}
       {...props}
     />
-  )
+  );
+}
+
+function ItemHeader({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  requireParent(React.useContext(ItemContext), "ItemHeader", "Item");
+  const nodes = React.Children.toArray(children);
+  const titles = nodes.filter(
+    (node) => React.isValidElement(node) && node.type === ItemTitle,
+  );
+  const descriptions = nodes.filter(
+    (node) => React.isValidElement(node) && node.type === ItemDescription,
+  );
+  const canonical =
+    titles.length === 1 &&
+    descriptions.length <= 1 &&
+    titles.length + descriptions.length === nodes.length;
+  return (
+    <ItemHeaderContext.Provider value>
+      <div
+        data-slot="item-header"
+        className={cn(
+          canonical
+            ? "flex min-w-0 flex-1 flex-col justify-center gap-1"
+            : "flex basis-full items-center justify-between gap-2",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </ItemHeaderContext.Provider>
+  );
 }
 
-function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+function ItemBody({ className, ...props }: React.ComponentProps<"div">) {
+  requireParent(React.useContext(ItemContext), "ItemBody", "Item");
   return (
     <div
-      data-slot="item-content"
-      className={cn(
-        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
-        className
-      )}
+      data-slot="item-body"
+      className={cn("flex min-w-0 flex-none flex-col gap-1", className)}
       {...props}
     />
-  )
+  );
+}
+
+/** @deprecated Use ItemHeader para título/descrição e ItemBody para o conteúdo restante. */
+function ItemContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
+  requireParent(React.useContext(ItemContext), "ItemContent", "Item");
+  return (
+    <ItemHeaderContext.Provider value>
+      <div
+        data-slot="item-content"
+        className={cn(
+          "flex min-w-0 flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </ItemHeaderContext.Provider>
+  );
 }
 
 function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  requireParent(React.useContext(ItemHeaderContext), "ItemTitle", "ItemHeader");
   return (
     <div
       data-slot="item-title"
       className={cn(
         "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  requireParent(
+    React.useContext(ItemHeaderContext),
+    "ItemDescription",
+    "ItemHeader",
+  );
   return (
     <p
       data-slot="item-description"
       className={cn(
-        "line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground",
-        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-        className
+        "line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  requireParent(React.useContext(ItemContext), "ItemActions", "Item");
   return (
     <div
       data-slot="item-actions"
       className={cn("flex items-center gap-2", className)}
       {...props}
     />
-  )
-}
-
-function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="item-header"
-      className={cn(
-        "flex basis-full items-center justify-between gap-2",
-        className
-      )}
-      {...props}
-    />
-  )
+  );
 }
 
 function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  requireParent(React.useContext(ItemContext), "ItemFooter", "Item");
   return (
     <div
       data-slot="item-footer"
       className={cn(
         "flex basis-full items-center justify-between gap-2",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
   Item,
   ItemMedia,
+  ItemHeader,
+  ItemBody,
   ItemContent,
   ItemActions,
   ItemGroup,
   ItemSeparator,
   ItemTitle,
   ItemDescription,
-  ItemHeader,
   ItemFooter,
-}
+};

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

@@ -1,4 +1,5 @@
 import * as React from "react"
+import type { UiContext } from '../../../core/ui-context.ts'
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import { DropdownMenu as MenuPrimitive } from "radix-ui"
 
@@ -65,19 +66,26 @@ function MenuGroup({
 function MenuItem({
   className,
   inset,
-  variant = "default",
+  context,
+  variant,
   ...props
 }: React.ComponentProps<typeof MenuPrimitive.Item> & {
   inset?: boolean
+  context?: Extract<UiContext, 'neutral' | 'danger'>
+  /** @deprecated Use `context="danger"`. */
   variant?: "default" | "destructive"
 }) {
+  if (context !== undefined && variant !== undefined) {
+    throw new Error('MenuItem não permite combinar context com uma variante semântica legada.')
+  }
+  const resolvedContext = context ?? (variant === 'destructive' ? 'danger' : 'neutral')
   return (
     <MenuPrimitive.Item
       data-slot="menu-item"
       data-inset={inset}
-      data-variant={variant}
+      data-context={resolvedContext}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:focus:*:[svg]:text-destructive!",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[context=danger]:focus:bg-context-danger-subtle data-[context=danger]:focus:text-context-danger-emphasis [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[context=danger]:focus:*:[svg]:text-context-danger-emphasis!",
         className
       )}
       {...props}

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

@@ -0,0 +1,133 @@
+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'
+
+/** @deprecated Use `MetricCardContext`. */
+export type MetricCardTone = 'default' | 'warning'
+export type MetricCardContext = Exclude<UiContext, 'primary'>
+
+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',
+}
+
+interface MetricCardBaseProps extends Omit<React.ComponentProps<typeof Card>, 'children'> {
+  /** Controle complementar exibido ao lado do rótulo, como uma explicação em tooltip. */
+  labelAction?: React.ReactNode
+  /** Contexto que explica recorte, proporção ou significado do valor. */
+  description?: React.ReactNode
+  /** Ícone decorativo que identifica a natureza da medida. */
+  icon?: React.ReactNode
+  /** Contexto semântico do ícone; não altera a superfície do card. */
+  context?: MetricCardContext
+  /** @deprecated Use `context`. Compatibilidade temporária da ADR 0006. */
+  tone?: MetricCardTone
+  /** Ação relacionada diretamente à medida. */
+  action?: React.ReactNode
+}
+
+export type MetricCardProps = MetricCardBaseProps &
+  (
+    | {
+        /** Nome curto da medida apresentada. */
+        label: React.ReactNode
+        /** Valor já formatado pelo consumidor. */
+        value: React.ReactNode
+        loading?: false
+      }
+    | {
+        /** O rótulo pode ser omitido porque o placeholder ocupa toda a composição. */
+        label?: React.ReactNode
+        /** O valor ainda não está disponível durante o carregamento. */
+        value?: React.ReactNode
+        /** Substitui o conteúdo por placeholders preservando a geometria do card. */
+        loading: true
+      }
+  )
+
+/**
+ * MetricCard apresenta uma medida resumida. Formatação, cálculo e carregamento dos dados
+ * continuam sob responsabilidade do consumidor; o componente padroniza apenas a composição.
+ */
+export function MetricCard({
+  label,
+  labelAction,
+  value,
+  description,
+  icon,
+  context,
+  tone,
+  action,
+  loading = false,
+  className,
+  ...props
+}: MetricCardProps): React.ReactElement {
+  if (context !== undefined && tone !== undefined) {
+    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')
+
+  return (
+    <Card
+      data-slot="metric-card"
+      aria-busy={loading || undefined}
+      className={cn('min-w-0 p-4', className)}
+      {...props}
+    >
+      {loading ? (
+        <div className="space-y-3">
+          <Skeleton className="h-4 w-28" />
+          <Skeleton className="h-8 w-20" />
+          <Skeleton className="h-3 w-full" />
+        </div>
+      ) : (
+        <>
+          <div className="flex items-start justify-between gap-3">
+            <div className="flex min-w-0 items-center gap-1.5">
+              <div data-slot="metric-card-label" className="min-w-0 truncate text-sm font-medium text-muted-foreground">
+                {label}
+              </div>
+              {labelAction !== undefined && (
+                <div data-slot="metric-card-label-action" className="shrink-0">
+                  {labelAction}
+                </div>
+              )}
+            </div>
+            {hasIcon && (
+              <span
+                data-slot="metric-card-icon"
+                data-context={resolvedContext}
+                aria-hidden="true"
+                className={cn(
+                  'flex size-8 shrink-0 items-center justify-center rounded-md [&_svg]:size-4',
+                  iconContextClasses[resolvedContext],
+                )}
+              >
+                {icon}
+              </span>
+            )}
+          </div>
+          <div data-slot="metric-card-value" className="mt-3 text-2xl font-semibold tracking-tight tabular-nums">
+            {value}
+          </div>
+          {description !== undefined && (
+            <div data-slot="metric-card-description" className="mt-1 text-xs text-muted-foreground">
+              {description}
+            </div>
+          )}
+          {action !== undefined && (
+            <div data-slot="metric-card-action" className="mt-3">
+              {action}
+            </div>
+          )}
+        </>
+      )}
+    </Card>
+  )
+}