@softize/opus 12.9.0 → 12.11.0

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

@@ -1,38 +1,91 @@
 import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
+
+import type { UiContext } from '../../../core/ui-context.ts'
 import { cn } from '../../lib/cn.ts'
 
-export const dotVariants = cva('inline-block size-1.5 shrink-0 rounded-full', {
-  variants: {
-    variant: {
-      default: 'bg-primary',
-      secondary: 'bg-muted-foreground/45',
-      destructive: 'bg-destructive',
-      outline: 'border border-border bg-transparent',
-      success: 'bg-emerald-500',
-      warning: 'bg-amber-500',
-      info: 'bg-blue-500',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-})
-
-export interface DotProps extends React.ComponentProps<'span'>, VariantProps<typeof dotVariants> {
+export type DotContext = UiContext
+export type DotVariant = 'solid' | 'outline'
+export type LegacyDotVariant =
+  | 'default'
+  | 'secondary'
+  | 'destructive'
+  | 'success'
+  | 'warning'
+  | 'info'
+
+interface DotStyleOptions {
+  context?: DotContext | null
+  variant?: DotVariant | LegacyDotVariant | null
+}
+
+const solidClasses: Record<DotContext, string> = {
+  neutral: 'bg-context-neutral-emphasis',
+  primary: 'bg-context-primary',
+  info: 'bg-context-info',
+  success: 'bg-context-success',
+  warning: 'bg-context-warning',
+  danger: 'bg-context-danger',
+}
+
+const outlineClasses: Record<DotContext, string> = {
+  neutral: 'border border-context-neutral-border bg-transparent',
+  primary: 'border border-context-primary bg-transparent',
+  info: 'border border-context-info bg-transparent',
+  success: 'border border-context-success bg-transparent',
+  warning: 'border border-context-warning bg-transparent',
+  danger: 'border border-context-danger bg-transparent',
+}
+
+export function resolveDotStyle({ context, variant }: DotStyleOptions = {}): {
+  context: DotContext
+  variant: DotVariant
+} {
+  const legacy =
+    variant === 'default' ||
+    variant === 'secondary' ||
+    variant === 'destructive' ||
+    variant === 'success' ||
+    variant === 'warning' ||
+    variant === 'info'
+  if (context != null && legacy) {
+    throw new Error('Dot não permite combinar context com uma variante semântica legada.')
+  }
+  if (variant === 'default') return { context: 'primary', variant: 'solid' }
+  if (variant === 'secondary') return { context: 'neutral', variant: 'solid' }
+  if (variant === 'destructive') return { context: 'danger', variant: 'solid' }
+  if (variant === 'success' || variant === 'warning' || variant === 'info') {
+    return { context: variant, variant: 'solid' }
+  }
+  return { context: context ?? 'neutral', variant: variant ?? 'solid' }
+}
+
+export function dotVariants(options: DotStyleOptions = {}): string {
+  const resolved = resolveDotStyle(options)
+  return cn(
+    'inline-block size-1.5 shrink-0 rounded-full',
+    resolved.variant === 'outline'
+      ? outlineClasses[resolved.context]
+      : solidClasses[resolved.context],
+  )
+}
+
+export interface DotProps extends React.ComponentProps<'span'>, DotStyleOptions {
   /** Nome acessível quando a cor comunica estado; sem label, o ponto é decorativo. */
   label?: string
 }
 
 /** Indicador compacto de estado; use Badge quando o texto precisar permanecer visível. */
-export function Dot({ className, variant, label, ...props }: DotProps): React.ReactElement {
+export function Dot({ className, context, variant, label, ...props }: DotProps): React.ReactElement {
+  const resolved = resolveDotStyle({ context, variant })
   return (
     <span
       data-slot="dot"
+      data-context={resolved.context}
+      data-variant={resolved.variant}
       role={label === undefined ? undefined : 'img'}
       aria-label={label}
       aria-hidden={label === undefined ? true : undefined}
-      className={cn(dotVariants({ variant }), className)}
+      className={cn(dotVariants(resolved), className)}
       {...props}
     />
   )

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

@@ -1,29 +1,31 @@
-import * as React from "react"
-import { XIcon } from "lucide-react"
-import { Dialog as DrawerPrimitive } from "radix-ui"
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { Dialog as DrawerPrimitive } from "radix-ui";
 
-import { cn } from '../../lib/cn.ts'
+import { cn } from "../../lib/cn.ts";
 
-function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
 }
 
 function DrawerTrigger({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }
 
 function DrawerClose({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }
 
 function DrawerPortal({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
 }
 
 function DrawerOverlay({
@@ -35,11 +37,11 @@ function DrawerOverlay({
       data-slot="drawer-overlay"
       className={cn(
         "fixed inset-0 z-50 bg-black/30 backdrop-blur-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerContent({
@@ -49,8 +51,8 @@ function DrawerContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left"
-  showCloseButton?: boolean
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
 }) {
   return (
     <DrawerPortal>
@@ -67,7 +69,7 @@ function DrawerContent({
             "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
           side === "bottom" &&
             "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-          className
+          className,
         )}
         {...props}
       >
@@ -80,7 +82,7 @@ function DrawerContent({
         )}
       </DrawerPrimitive.Content>
     </DrawerPortal>
-  )
+  );
 }
 
 function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -90,7 +92,17 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-1.5 p-4", className)}
       {...props}
     />
-  )
+  );
+}
+
+function DrawerBody({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-body"
+      className={cn("min-h-0 flex-1 overflow-y-auto p-4", className)}
+      {...props}
+    />
+  );
 }
 
 function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -100,7 +112,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerTitle({
@@ -113,7 +125,7 @@ function DrawerTitle({
       className={cn("font-semibold text-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerDescription({
@@ -126,7 +138,7 @@ function DrawerDescription({
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -135,7 +147,8 @@ export {
   DrawerClose,
   DrawerContent,
   DrawerHeader,
+  DrawerBody,
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};

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

@@ -57,14 +57,14 @@ const fieldVariants = cva(
   {
     variants: {
       orientation: {
-        vertical: ["flex-col gap-2 [&>*]:w-full [&>.sr-only]:w-auto"],
+        vertical: ["flex-col gap-1.5 [&>*]:w-full [&>.sr-only]:w-auto"],
         horizontal: [
           "flex-row items-center gap-3",
           "[&>[data-slot=field-label]]:flex-auto",
           "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         ],
         responsive: [
-          "flex-col gap-2 @md/field-group:flex-row @md/field-group:items-center @md/field-group:gap-3 [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+          "flex-col gap-1.5 @md/field-group:flex-row @md/field-group:items-center @md/field-group:gap-3 [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
           "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
           "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         ],
@@ -113,9 +113,9 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "group/field-label peer/field-label flex w-fit gap-2 text-xs leading-snug font-medium text-muted-foreground group-data-[invalid=true]/field:text-destructive group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
-        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        "has-[>[data-slot=field]]:has-data-[state=checked]:border-primary has-[>[data-slot=field]]:has-data-[state=checked]:bg-primary/5 dark:has-[>[data-slot=field]]:has-data-[state=checked]:bg-primary/10",
         className
       )}
       {...props}

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,43 +101,41 @@ 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-stretch items-center justify-center gap-2 [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
+        icon: "min-h-8 w-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
         image:
-          "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+          "min-h-10 w-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}