@softize/opus 12.11.0 → 13.0.0

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

@@ -1,35 +1,134 @@
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui'
 import { XIcon } from 'lucide-react'
 import { cn } from '../../lib/cn.ts'
 
-export function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+export type DialogMode = 'default' | 'alert'
+
+interface DialogContextValue {
+  mode: DialogMode
+  onResult?: (result: string) => void
+}
+
+const DialogContext = React.createContext<DialogContextValue>({ mode: 'default' })
+
+function useDialogContext(): DialogContextValue {
+  return React.useContext(DialogContext)
+}
+
+export interface DialogProps
+  extends React.ComponentProps<typeof DialogPrimitive.Root> {
+  /** `alert` exige uma resposta explícita e deriva `role="alertdialog"`. */
+  mode?: DialogMode
+  /** Recebe o `result` do `DialogClose` acionado. */
+  onResult?: (result: string) => void
+}
+
+export function Dialog({
+  mode = 'default',
+  onResult,
+  modal,
+  ...props
+}: DialogProps) {
+  const context = React.useMemo(() => ({ mode, onResult }), [mode, onResult])
+
+  return (
+    <DialogContext.Provider value={context}>
+      {mode === 'alert' ? (
+        <AlertDialogPrimitive.Root data-slot="dialog" {...props} />
+      ) : (
+        <DialogPrimitive.Root data-slot="dialog" modal={modal} {...props} />
+      )}
+    </DialogContext.Provider>
+  )
+}
+
+export function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  const { mode } = useDialogContext()
+  return mode === 'alert' ? (
+    <AlertDialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  ) : (
+    <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  )
 }
 
-export function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+export function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  const { mode } = useDialogContext()
+  return mode === 'alert' ? (
+    <AlertDialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  ) : (
+    <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  )
 }
 
-export function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+export interface DialogCloseProps
+  extends React.ComponentProps<typeof DialogPrimitive.Close> {
+  /** No modo `alert`, registra este controle como destino inicial seguro do foco. */
+  initialFocus?: boolean
+  /** Resposta entregue a `Dialog.onResult` antes do fechamento. */
+  result?: string
 }
 
-export function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+export function DialogClose({
+  initialFocus = false,
+  result,
+  onClick,
+  ...props
+}: DialogCloseProps) {
+  const root = useDialogContext()
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    onClick?.(event)
+    if (!event.defaultPrevented && result !== undefined) root.onResult?.(result)
+  }
+
+  if (root.mode === 'alert') {
+    const ClosePrimitive = initialFocus
+      ? AlertDialogPrimitive.Cancel
+      : AlertDialogPrimitive.Action
+    return (
+      <ClosePrimitive
+        data-slot="dialog-close"
+        data-initial-focus={initialFocus || undefined}
+        onClick={handleClick}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <DialogPrimitive.Close
+      data-slot="dialog-close"
+      data-initial-focus={initialFocus || undefined}
+      onClick={handleClick}
+      {...props}
+    />
+  )
 }
 
 export function DialogOverlay({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
+  const { mode } = useDialogContext()
+  const overlayClasses = 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,
+  )
+  return mode === 'alert' ? (
+    <AlertDialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={overlayClasses}
+      {...props}
+    />
+  ) : (
     <DialogPrimitive.Overlay
       data-slot="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,
-      )}
+      className={overlayClasses}
       {...props}
     />
   )
@@ -38,29 +137,48 @@ export function DialogOverlay({
 export function DialogContent({
   className,
   children,
-  showCloseButton = true,
+  showCloseButton,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  /** Mostra o "X" de fechar no canto. Desligue pra um modal que exige ação explícita. */
+  /** Mostra o “X” no modo padrão. O modo `alert` exige uma resposta identificável. */
   showCloseButton?: boolean
 }) {
+  const { mode } = useDialogContext()
+  const showClose = showCloseButton ?? mode !== 'alert'
+  const contentClasses =
+    'fixed left-[50%] top-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-clip rounded-xl border border-border bg-background text-foreground shadow-lg duration-200 outline-none 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'
+
+  if (mode === 'alert') {
+    return (
+      <DialogPortal>
+        <DialogOverlay />
+        <AlertDialogPrimitive.Content
+          data-slot="dialog-content"
+          data-mode="alert"
+          className={cn(contentClasses, 'grid max-w-xs gap-4 p-6', className)}
+          {...props}
+        >
+          {children}
+        </AlertDialogPrimitive.Content>
+      </DialogPortal>
+    )
+  }
+
   return (
     <DialogPortal>
       <DialogOverlay />
-      {/* Superfície elevada: mantemos bg-card (divergência da casa; o shadcn usa bg-background). */}
       <DialogPrimitive.Content
         data-slot="dialog-content"
+        data-mode="default"
         className={cn(
-          // Superfície PURA: só a casca (bg/raio/sombra) + coluna flex com teto de
-          // altura. O padding mora nos SLOTS (Header/Body/Footer), não aqui — assim ninguém
-          // precisa negar margem pra escapar de um p-6 embutido.
-          "fixed left-[50%] top-[50%] z-50 flex max-h-[85vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col overflow-clip rounded-xl bg-card text-card-foreground shadow-lg duration-200 outline-none 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 sm:max-w-lg",
+          contentClasses,
+          'flex max-h-[85vh] flex-col sm:max-w-lg',
           className,
         )}
         {...props}
       >
         {children}
-        {showCloseButton && (
+        {showClose && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
             className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
@@ -74,17 +192,18 @@ export function DialogContent({
   )
 }
 
-export function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+export function DialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const { mode } = useDialogContext()
   return (
     <div
       data-slot="dialog-header"
-      // Fixo (shrink-0), com divisor embaixo (border-b). p-5: padding igual nos quatro
-      // lados, casando com o body. O :has tira o divisor quando o header é seguido
-      // DIRETO pelo footer (confirm sem body) — senão o border-b dele encostaria no
-      // A compensação coincide com a soma das hairlines; o divisor fica no footer.
       className={cn(
-        'flex shrink-0 flex-col gap-2 border-b p-5 text-center sm:text-left',
-        '[&:has(+[data-slot=dialog-footer])]:border-b-0',
+        mode === 'alert'
+          ? 'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=dialog-media]:grid-rows-[auto_auto_1fr]'
+          : 'flex shrink-0 flex-col gap-2 border-b p-5 text-center sm:text-left [&:has(+[data-slot=dialog-footer])]:border-b-0',
         className,
       )}
       {...props}
@@ -92,27 +211,51 @@ export function DialogHeader({ className, ...props }: React.ComponentProps<'div'
   )
 }
 
-export function DialogBody({ className, ...props }: React.ComponentProps<'div'>) {
+export function DialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="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}
+    />
+  )
+}
+
+export function DialogBody({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const { mode } = useDialogContext()
   return (
     <div
       data-slot="dialog-body"
-      // O miolo que ROLA: cresce, scrolla e padda a si mesmo. Pra corpo edge-to-edge
-      // (cmdk, iframe de lente) passe `className` zerando o padding.
-      className={cn('min-h-0 flex-1 overflow-y-auto p-5', className)}
+      className={cn(
+        mode === 'alert' ? 'min-w-0' : 'min-h-0 flex-1 overflow-y-auto p-5',
+        className,
+      )}
       {...props}
     />
   )
 }
 
-export function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+export function DialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const { mode } = useDialogContext()
   return (
     <div
       data-slot="dialog-footer"
-      // Faixa destacada (divergência da casa, ao estilo do site do shadcn): borda em cima
-      // + fundo muted. Sangra até as bordas sozinha — o content não tem padding, então não
-      // há -mx pra compensar; o recorte do content arredonda o canto de baixo.
       className={cn(
-        'flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end',
+        mode === 'alert'
+          ? 'grid grid-cols-2 gap-2 [&>*:only-child]:col-span-full'
+          : 'flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end',
         className,
       )}
       {...props}
@@ -124,7 +267,14 @@ export function DialogTitle({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
+  const { mode } = useDialogContext()
+  return mode === 'alert' ? (
+    <AlertDialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg font-semibold', className)}
+      {...props}
+    />
+  ) : (
     <DialogPrimitive.Title
       data-slot="dialog-title"
       className={cn('text-lg font-semibold leading-none', className)}
@@ -137,7 +287,14 @@ export function DialogDescription({
   className,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
+  const { mode } = useDialogContext()
+  return mode === 'alert' ? (
+    <AlertDialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  ) : (
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn('text-sm text-muted-foreground', className)}

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

@@ -60,7 +60,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
+          "fixed z-50 flex flex-col bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
           side === "right" &&
             "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
           side === "left" &&
@@ -89,7 +89,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
+      className={cn("flex shrink-0 flex-col gap-2 border-b p-5", className)}
       {...props}
     />
   );
@@ -99,7 +99,7 @@ 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)}
+      className={cn("min-h-0 flex-1 overflow-y-auto p-5", className)}
       {...props}
     />
   );
@@ -109,7 +109,10 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      className={cn(
+        "mt-auto flex shrink-0 flex-col-reverse gap-2 border-t bg-muted/30 px-5 py-4 sm:flex-row sm:justify-end",
+        className,
+      )}
       {...props}
     />
   );
@@ -122,7 +125,7 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("font-semibold text-foreground", className)}
+      className={cn("text-lg font-semibold leading-none text-foreground", className)}
       {...props}
     />
   );

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

@@ -116,14 +116,14 @@ function Item({
 }
 
 const itemMediaVariants = cva(
-  "flex shrink-0 self-stretch items-center justify-center gap-2 [&_svg]:pointer-events-none",
+  "flex shrink-0 self-start items-center justify-center gap-2 [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "min-h-8 w-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
+        icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
         image:
-          "min-h-10 w-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+          "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
       },
     },
     defaultVariants: { variant: "default" },

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

@@ -6,7 +6,149 @@ import {
   OctagonXIcon,
   TriangleAlertIcon,
 } from 'lucide-react'
-import { Toaster as Sonner, toast, type ToasterProps } from 'sonner'
+import {
+  Toaster as Sonner,
+  toast as sonnerToast,
+  type ExternalToast,
+  type ToasterProps,
+} from 'sonner'
+import { cn } from '../../lib/cn.ts'
+import {
+  Button,
+  type ButtonContext,
+  type ButtonVariant,
+} from './button.tsx'
+
+type ToastId = string | number
+type ToastMessage = React.ReactNode | (() => React.ReactNode)
+
+export interface ToastAction {
+  key?: React.Key
+  label: React.ReactNode
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void
+  context?: ButtonContext
+  variant?: ButtonVariant
+  disabled?: boolean
+}
+
+export interface ToastOptions extends Omit<ExternalToast, 'action' | 'cancel'> {
+  actions?: readonly ToastAction[]
+}
+
+interface ToastApi {
+  (message: ToastMessage, options?: ToastOptions): ToastId
+  success: (message: ToastMessage, options?: ToastOptions) => ToastId
+  info: (message: ToastMessage, options?: ToastOptions) => ToastId
+  warning: (message: ToastMessage, options?: ToastOptions) => ToastId
+  error: (message: ToastMessage, options?: ToastOptions) => ToastId
+  message: (message: ToastMessage, options?: ToastOptions) => ToastId
+  loading: (message: ToastMessage, options?: ToastOptions) => ToastId
+  custom: typeof sonnerToast.custom
+  promise: typeof sonnerToast.promise
+  dismiss: typeof sonnerToast.dismiss
+  getHistory: typeof sonnerToast.getHistory
+  getToasts: typeof sonnerToast.getToasts
+}
+
+interface ToastMediaProps {
+  children: React.ReactNode
+  className: string
+}
+
+function ToastMedia({ children, className }: ToastMediaProps): React.ReactElement {
+  return (
+    <span
+      className={cn(
+        'flex size-9 items-center justify-center rounded-md bg-current/10 [&_svg]:size-5',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+interface ToastActionsProps {
+  actions: readonly ToastAction[]
+  getToastId: () => ToastId | undefined
+}
+
+function ToastActions({ actions, getToastId }: ToastActionsProps): React.ReactElement {
+  return (
+    <div data-slot="toast-actions" className="ms-auto flex shrink-0 items-center gap-2">
+      {actions.map((action, index) => {
+        const primary = index === actions.length - 1
+        return (
+          <Button
+            key={action.key ?? index}
+            type="button"
+            size="sm"
+            context={action.context ?? (primary ? 'primary' : 'neutral')}
+            variant={action.variant ?? (primary ? 'solid' : 'ghost')}
+            disabled={action.disabled}
+            onClick={(event) => {
+              action.onClick(event)
+              if (!event.defaultPrevented) {
+                const toastId = getToastId()
+                if (toastId !== undefined) sonnerToast.dismiss(toastId)
+              }
+            }}
+          >
+            {action.label}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}
+
+function toSonnerOptions(
+  options: ToastOptions | undefined,
+  getToastId: () => ToastId | undefined,
+): ExternalToast | undefined {
+  if (options === undefined) return undefined
+  const { actions, ...rest } = options
+  if (actions === undefined) return rest
+  return {
+    ...rest,
+    action: actions.length > 0 ? <ToastActions actions={actions} getToastId={getToastId} /> : undefined,
+  }
+}
+
+type SonnerToastMethod = (message: ToastMessage, options?: ExternalToast) => ToastId
+
+function dispatchToast(
+  method: SonnerToastMethod,
+  message: ToastMessage,
+  options?: ToastOptions,
+): ToastId {
+  let toastId: ToastId | undefined
+  toastId = method(message, toSonnerOptions(options, () => toastId))
+  return toastId
+}
+
+const toast: ToastApi = Object.assign(
+  (message: ToastMessage, options?: ToastOptions) => dispatchToast(sonnerToast, message, options),
+  {
+    success: (message: ToastMessage, options?: ToastOptions) =>
+      dispatchToast(sonnerToast.success, message, options),
+    info: (message: ToastMessage, options?: ToastOptions) =>
+      dispatchToast(sonnerToast.info, message, options),
+    warning: (message: ToastMessage, options?: ToastOptions) =>
+      dispatchToast(sonnerToast.warning, message, options),
+    error: (message: ToastMessage, options?: ToastOptions) =>
+      dispatchToast(sonnerToast.error, message, options),
+    message: (message: ToastMessage, options?: ToastOptions) =>
+      dispatchToast(sonnerToast.message, message, options),
+    loading: (message: ToastMessage, options?: ToastOptions) =>
+      dispatchToast(sonnerToast.loading, message, options),
+    custom: sonnerToast.custom,
+    promise: sonnerToast.promise,
+    dismiss: sonnerToast.dismiss,
+    getHistory: sonnerToast.getHistory,
+    getToasts: sonnerToast.getToasts,
+  },
+)
 
 /**
  * Toaster temático (sonner) — monte 1x no root do app. Os toasts saem estilizados
@@ -17,18 +159,54 @@ import { Toaster as Sonner, toast, type ToasterProps } from 'sonner'
  * usamos next-themes — passe `theme` por prop se precisar forçar (default 'system').
  * Elevação dark preservada: `--normal-bg` aponta pro popover (não pro background).
  */
-export function Toaster({ ...props }: ToasterProps): React.ReactElement {
+export function Toaster({
+  className,
+  icons,
+  style,
+  toastOptions,
+  ...props
+}: ToasterProps): React.ReactElement {
   return (
     <Sonner
       data-slot="toaster"
       theme="system"
-      className="toaster group"
+      className={cn('toaster group', className)}
       icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
+        success: (
+          <ToastMedia className="text-context-success-emphasis">
+            <CircleCheckIcon />
+          </ToastMedia>
+        ),
+        info: (
+          <ToastMedia className="text-context-info-emphasis">
+            <InfoIcon />
+          </ToastMedia>
+        ),
+        warning: (
+          <ToastMedia className="text-context-warning-emphasis">
+            <TriangleAlertIcon />
+          </ToastMedia>
+        ),
+        error: (
+          <ToastMedia className="text-context-danger-emphasis">
+            <OctagonXIcon />
+          </ToastMedia>
+        ),
+        loading: (
+          <ToastMedia className="text-context-neutral-emphasis">
+            <Loader2Icon className="animate-spin" />
+          </ToastMedia>
+        ),
+        ...icons,
+      }}
+      toastOptions={{
+        ...toastOptions,
+        classNames: {
+          ...toastOptions?.classNames,
+          toast: cn('opus-toast', toastOptions?.classNames?.toast),
+          icon: cn('opus-toast-icon', toastOptions?.classNames?.icon),
+          closeButton: cn('opus-toast-close', toastOptions?.classNames?.closeButton),
+        },
       }}
       style={
         {
@@ -36,6 +214,7 @@ export function Toaster({ ...props }: ToasterProps): React.ReactElement {
           '--normal-text': 'var(--popover-foreground)',
           '--normal-border': 'var(--border)',
           '--border-radius': 'var(--radius)',
+          ...style,
         } as React.CSSProperties
       }
       {...props}