@softize/opus 8.6.6

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

@@ -0,0 +1,196 @@
+/**
+ * <ActionTrigger action input /> — botão que dispara uma SimpleAction (sem form).
+ *
+ * Use pra mutações sem form: assign, escalate, close, archive, excluir.
+ * - Loading state automático (disabled + "..." enquanto roda).
+ * - Toast em sucesso/erro; cache invalidation via action.invalidates.
+ * - Confirmação opcional via <AlertDialog> (compacto, não fecha no clique fora) antes de disparar.
+ * - `icon` faz o botão virar icon-only com tooltip: é a ação que mora NO item (linha,
+ *   card). Absorveu o antigo DeleteButton, que era este componente com uma lixeira.
+ * Emite `data-action="<action.name>"` na raiz (selector E2E).
+ */
+
+import type { ReactNode } from 'react'
+import { useState } from 'react'
+import type { SimpleContract } from '../../../core/index.ts'
+import { useTriggerAction } from '../../drivers/react.tsx'
+import { toast } from '../primitives/sonner.tsx'
+import { cn } from '../../lib/cn.ts'
+import { Button } from '../primitives/button.tsx'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../primitives/tooltip.tsx'
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../primitives/alert-dialog.tsx'
+
+/** action.messages.* pode ser string ou I18nRef ({ key, default }). Resolve pra texto. */
+function msgText(m: unknown, fallback: string): string {
+  if (typeof m === 'string') return m
+  if (m !== null && typeof m === 'object' && 'default' in m) {
+    const d = (m as { default: unknown }).default
+    if (typeof d === 'string') return d
+  }
+  return fallback
+}
+
+export interface ActionTriggerProps<TInput, TData> {
+  action: SimpleContract<TInput, TData>
+  /** Input enviado pra action. Geralmente { id } ou similar. */
+  input: TInput
+  /** Texto do botão. Default usa action.label. */
+  label?: string
+  /** Variante visual do Button. Default: 'default' (ou 'destructive' se o
+   *  action.confirm declarar destructive). */
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  /** Tamanho do botão. */
+  size?: 'default' | 'sm' | 'lg' | 'icon'
+  /** Desabilita o botão independente de loading. */
+  disabled?: boolean
+  /** Texto do confirm dialog. Default vem do `action.confirm` (ConfirmSpec do
+   *  contrato — declarativo). Sem nenhum dos dois, dispara direto. */
+  confirm?: {
+    title: string
+    description?: string
+    actionLabel?: string
+    cancelLabel?: string
+  }
+  /** Callback adicional pós-sucesso (cache já foi invalidado). */
+  onSuccess?: (data: TData) => void
+  /** Ícone: o botão vira icon-only, com o `label` no tooltip e no aria-label. É a forma
+   *  da ação que mora DENTRO de um item (linha, card) — o clique não vaza pro item. */
+  icon?: ReactNode
+  /** Nome do item na pergunta (ex.: o slug, o nome da unidade) — sai entre aspas, em
+   *  destaque, antes da mensagem do contrato. */
+  itemLabel?: string
+  className?: string
+}
+
+/**
+ * Categorias de erro cuja frase do SERVIDOR vence o rótulo do contrato: "Este agente tem 3
+ * conversas — desabilite em vez de excluir" é acionável; "Falha ao excluir" não. É
+ * ALLOWLIST de propósito — erro inesperado carrega texto técnico cru (uma violação de FK
+ * viraria `violates foreign key constraint "user_unit_id_fkey"` no toast de quem só clicou
+ * no botão), então categoria desconhecida cai no rótulo genérico, o lado seguro de errar.
+ * `authorization` fica de fora: o runtime lança `Forbidden`, pior que a frase em pt-BR.
+ */
+const BUSINESS_ERRORS = ['conflict', 'validation', 'not_found']
+
+export function ActionTrigger<TInput, TData>({
+  action,
+  input,
+  label,
+  variant,
+  size = 'default',
+  disabled = false,
+  confirm: confirmProp,
+  onSuccess,
+  icon,
+  itemLabel,
+  className,
+}: ActionTriggerProps<TInput, TData>) {
+  const [open, setOpen] = useState(false)
+  const { trigger, isLoading } = useTriggerAction(action, {
+    onSuccess: (data) => {
+      toast.success(msgText(action.messages?.success, 'Concluído'))
+      onSuccess?.(data)
+      setOpen(false)
+    },
+    onError: (err) => {
+      const detail = err.message.trim()
+      const speakable = BUSINESS_ERRORS.includes(err.category as string) && detail !== ''
+      toast.error(speakable ? detail : msgText(action.messages?.error, err.message))
+    },
+  })
+
+  const buttonLabel = label ?? (typeof action.label === 'string' ? action.label : action.name)
+
+  // Prop sobrepõe; sem prop, o ConfirmSpec DECLARADO no contrato (action.confirm) vale.
+  const spec = action.confirm
+  const confirm =
+    confirmProp ??
+    (spec !== undefined
+      ? {
+          title: msgText(spec.title, 'Confirmar?'),
+          ...(spec.message !== undefined ? { description: msgText(spec.message, '') } : {}),
+          ...(spec.confirmLabel !== undefined ? { actionLabel: msgText(spec.confirmLabel, buttonLabel) } : {}),
+          ...(spec.cancelLabel !== undefined ? { cancelLabel: msgText(spec.cancelLabel, 'Cancelar') } : {}),
+        }
+      : undefined)
+  const destructive = spec?.destructive === true
+  // Com ícone o botão é chrome do item: fica ghost, e o vermelho aparece no hover — uma
+  // lixeira sólida vermelha em cada linha seria um campo minado visual.
+  const effectiveVariant = variant ?? (icon !== undefined ? 'ghost' : destructive ? 'destructive' : 'default')
+
+  const fire = () => {
+    void trigger(input)
+  }
+
+  /** O gatilho. Com `icon`: icon-only, rótulo no tooltip e no aria-label. O
+   *  stopPropagation é o que permite viver DENTRO de uma linha clicável — sem ele,
+   *  excluir também navegaria pro detalhe do que se está excluindo. */
+  const renderButton = (onClick: () => void): React.ReactElement => {
+    const button = (
+      <Button
+        variant={effectiveVariant}
+        size={icon !== undefined ? 'icon' : size}
+        busy={isLoading}
+        disabled={disabled}
+        aria-label={icon !== undefined ? buttonLabel : undefined}
+        onClick={(e) => {
+          e.stopPropagation()
+          onClick()
+        }}
+        className={cn(
+          icon !== undefined && 'size-7 shrink-0 text-muted-foreground/60',
+          icon !== undefined && destructive && 'hover:bg-destructive/10 hover:text-destructive',
+          className,
+        )}
+        data-action={action.name}
+      >
+        {icon ?? buttonLabel}
+      </Button>
+    )
+    if (icon === undefined) return button
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>{buttonLabel}</TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  if (confirm === undefined) return renderButton(fire)
+
+  return (
+    <>
+      {renderButton(() => setOpen(true))}
+
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogContent data-action={action.name}>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{confirm.title}</AlertDialogTitle>
+            {(itemLabel !== undefined || confirm.description !== undefined) && (
+              <AlertDialogDescription>
+                {itemLabel !== undefined && <span className="font-medium text-foreground">“{itemLabel}”</span>}
+                {itemLabel !== undefined && confirm.description !== undefined ? ' — ' : ''}
+                {confirm.description}
+              </AlertDialogDescription>
+            )}
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <Button variant="outline" onClick={() => setOpen(false)} disabled={isLoading}>
+              {confirm.cancelLabel ?? 'Cancelar'}
+            </Button>
+            <Button variant={effectiveVariant} busy={isLoading} onClick={fire}>
+              {confirm.actionLabel ?? buttonLabel}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}

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

@@ -0,0 +1,84 @@
+/**
+ * <ActionView action input /> — carrega + exibe um recurso via ViewAction.
+ *
+ * Wrapper genérico sobre useViewAction: loading / error / empty states + delega o
+ * "data feliz" pra `children` (render prop `(data, refetch) => nó` — o layout é de quem
+ * compõe). `render` segue como alias. Emite `data-action="<action.name>"` na raiz (E2E).
+ */
+
+import type { ReactNode } from 'react'
+import type { ViewAction } from '../../../core/index.ts'
+import { useViewAction } from '../../drivers/react.tsx'
+import { Skeleton } from '../primitives/skeleton.tsx'
+import { Button } from '../primitives/button.tsx'
+
+export interface ActionViewProps<TInput, TData> {
+  action: ViewAction<TInput, TData>
+  input: TInput
+  /** Renderiza o "tem dado" — o layout é de quem compõe (composição, como no ActionForm). */
+  children?: (data: TData, refetch: () => Promise<void>) => ReactNode
+  /** Alias de children (a API original). Children tem precedência. */
+  render?: (data: TData, refetch: () => Promise<void>) => ReactNode
+  /** Renderiza estado vazio (200 mas sem dado). Default: nada. */
+  empty?: ReactNode
+  /** Renderiza loading. Default: 3 skeletons stackados. */
+  loading?: ReactNode
+  /** Renderiza erro. Default: mensagem + botão "Tentar de novo". */
+  error?: (err: { code: string; message: string }, retry: () => Promise<void>) => ReactNode
+}
+
+export function ActionView<TInput, TData>({
+  action,
+  input,
+  children,
+  render,
+  empty,
+  loading,
+  error,
+}: ActionViewProps<TInput, TData>) {
+  const { data, isLoading, isError, error: err, refetch } = useViewAction<TInput, TData>(action, input)
+  const renderData = children ?? render
+  if (renderData === undefined) {
+    throw new Error('ActionView precisa de children (ou render) pra exibir o dado.')
+  }
+
+  if (isLoading) {
+    return (
+      <div data-action={action.name}>
+        {loading ?? (
+          <div className="space-y-3">
+            <Skeleton className="h-6 w-1/3" />
+            <Skeleton className="h-4 w-2/3" />
+            <Skeleton className="h-4 w-1/2" />
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  if (isError && err !== undefined) {
+    if (error !== undefined) {
+      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>
+    )
+  }
+
+  if (data === undefined) {
+    return <div data-action={action.name}>{empty ?? null}</div>
+  }
+
+  return <div data-action={action.name}>{renderData(data, refetch)}</div>
+}

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

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from '../../lib/cn.ts'
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

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

@@ -0,0 +1,190 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from '../../lib/cn.ts'
+import { Button } from './button.tsx'
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-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
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-xs translate-x-[-50%] translate-y-[-50%] gap-4 rounded-dialog ring-1 ring-edge bg-background p-6 shadow-dialog duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "grid grid-cols-2 gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-lg font-semibold",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

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

@@ -0,0 +1,116 @@
+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 layout é grid (1ª coluna pro `>svg`, 2ª pro
+ * conteúdo, que se ancora em `col-start-2`); sem ícone é bloco comum.
+ * `destructive` e `success` 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(
+  // O grid (coluna do ícone + coluna do conteúdo) só existe QUANDO HÁ ícone. Era fixo, com
+  // a 1ª coluna em `0` — e aí qualquer nó de texto solto virava item anônimo NESSA coluna
+  // de largura zero, saindo uma palavra por linha. Sem ícone, bloco comum: o `col-start-2`
+  // dos slots é inócuo fora de grid.
+  "relative w-full rounded-lg border px-4 py-3 text-sm has-[>svg]:grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:items-start has-[>svg]:gap-x-3 has-[>svg]:gap-y-0.5 [&>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 [&>svg]:text-current',
+        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 [&>svg]:text-current',
+      },
+    },
+    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. */
+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
+}
+
+export function Alert({
+  className,
+  variant,
+  title,
+  description,
+  icon,
+  children,
+  ...props
+}: AlertProps): React.ReactElement {
+  const short = title !== undefined || description !== undefined
+  // 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
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    >
+      {icon}
+      {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 (~1rem) 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>
+  )
+}
+
+export function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): React.ReactElement {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+      {...props}
+    />
+  )
+}
+
+export function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.ReactElement {
+  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',
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/ui/components/primitives/aspect-ratio.tsx

@@ -0,0 +1,9 @@
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }