tembro 2.0.5 → 2.1.0

package/packages/cli/vendor/src/components/navigation/pagination.tsx

@@ -20,15 +20,21 @@ export type PaginationLabels = {
   page?: (page: number) => string
 }
 
-export type PaginationProps = Omit<React.ComponentProps<"nav">, "onChange"> & {
-  page: number
-  pageCount: number
-  onPageChange: (page: number) => void
-  siblingCount?: number
-  showEdges?: boolean
-  disabled?: boolean
-  labels?: PaginationLabels
-}
+export type PaginationProps = Omit<React.ComponentProps<"nav">, "onChange"> & {
+  page: number
+  pageCount: number
+  onPageChange: (page: number) => void
+  siblingCount?: number
+  showEdges?: boolean
+  disabled?: boolean
+  labels?: PaginationLabels
+  compact?: boolean
+  totalCount?: number
+  pageSize?: number
+  pageSizeOptions?: number[]
+  onPageSizeChange?: (pageSize: number) => void
+  showSummary?: boolean
+}
 
 function range(start: number, end: number) {
   const length = Math.max(end - start + 1, 0)
@@ -71,11 +77,17 @@ function Pagination({
   pageCount,
   onPageChange,
   siblingCount = 1,
-  showEdges = true,
-  disabled = false,
-  labels,
-  ...props
-}: PaginationProps) {
+  showEdges = true,
+  disabled = false,
+  labels,
+  compact = false,
+  totalCount,
+  pageSize,
+  pageSizeOptions,
+  onPageSizeChange,
+  showSummary = false,
+  ...props
+}: PaginationProps) {
   const safePageCount = Math.max(pageCount, 1)
   const currentPage = Math.min(Math.max(page, 1), safePageCount)
   const items = getPaginationItems(currentPage, safePageCount, siblingCount)
@@ -88,21 +100,26 @@ function Pagination({
     }
   }
 
-  return (
+  return (
     <nav
       data-slot="pagination"
       aria-label="Pagination"
       className={cn(
-        "flex items-center justify-center gap-1 rounded-full border border-border/70 bg-background/76 p-1 shadow-none backdrop-blur",
+        "flex flex-wrap items-center justify-center gap-1 rounded-full border border-border/70 bg-background/76 p-1 shadow-none backdrop-blur",
         className
       )}
       {...props}
     >
-      {showEdges && (
-        <Button
+      {showSummary && totalCount !== undefined && pageSize ? (
+        <div className="px-2 text-xs text-muted-foreground">
+          {Math.min((currentPage - 1) * pageSize + 1, totalCount)}-{Math.min(currentPage * pageSize, totalCount)} of {totalCount}
+        </div>
+      ) : null}
+      {showEdges && (
+        <Button
           type="button"
-          variant="outline"
-          size="icon-sm"
+          variant="outline"
+          size={compact ? "icon-xs" : "icon-sm"}
           disabled={disabled || currentPage <= 1}
           aria-label={labels?.first ?? "First page"}
           onClick={() => goToPage(1)}
@@ -113,8 +130,8 @@ function Pagination({
 
       <Button
         type="button"
-        variant="outline"
-        size="icon-sm"
+        variant="outline"
+        size={compact ? "icon-xs" : "icon-sm"}
         disabled={disabled || currentPage <= 1}
         aria-label={labels?.previous ?? "Previous page"}
         onClick={() => goToPage(currentPage - 1)}
@@ -141,7 +158,7 @@ function Pagination({
             key={item}
             type="button"
             variant={item === currentPage ? "default" : "outline"}
-            size="icon-sm"
+            size={compact ? "icon-xs" : "icon-sm"}
             disabled={disabled}
             aria-current={item === currentPage ? "page" : undefined}
             aria-label={labels?.page?.(item) ?? `Page ${item}`}
@@ -155,8 +172,8 @@ function Pagination({
 
       <Button
         type="button"
-        variant="outline"
-        size="icon-sm"
+        variant="outline"
+        size={compact ? "icon-xs" : "icon-sm"}
         disabled={disabled || currentPage >= safePageCount}
         aria-label={labels?.next ?? "Next page"}
         onClick={() => goToPage(currentPage + 1)}
@@ -167,17 +184,34 @@ function Pagination({
       {showEdges && (
         <Button
           type="button"
-          variant="outline"
-          size="icon-sm"
+          variant="outline"
+          size={compact ? "icon-xs" : "icon-sm"}
           disabled={disabled || currentPage >= safePageCount}
           aria-label={labels?.last ?? "Last page"}
           onClick={() => goToPage(safePageCount)}
         >
           <ChevronLastIcon />
         </Button>
-      )}
-    </nav>
-  )
-}
+      )}
+      {pageSizeOptions && pageSize && onPageSizeChange ? (
+        <label className="ml-1 inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/90 px-3 py-1 text-xs text-muted-foreground">
+          <span>Rows</span>
+          <select
+            className="bg-transparent text-foreground outline-none"
+            value={pageSize}
+            onChange={(event) => onPageSizeChange(Number(event.target.value))}
+            disabled={disabled}
+          >
+            {pageSizeOptions.map((option) => (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            ))}
+          </select>
+        </label>
+      ) : null}
+    </nav>
+  )
+}
 
 export { Pagination, getPaginationItems }

package/packages/cli/vendor/src/components/notifications/notification-center.tsx

@@ -11,11 +11,13 @@ export type NotificationItem = {
   description?: React.ReactNode
   time?: React.ReactNode
   read?: boolean
+  group?: React.ReactNode
 }
 
 export type NotificationCenterProps = React.ComponentProps<"div"> & {
   notifications: NotificationItem[]
   onMarkAllRead?: () => void
+  onClearAll?: () => void
   onNotificationClick?: (notification: NotificationItem) => void
   emptyLabel?: React.ReactNode
   title?: React.ReactNode
@@ -24,6 +26,7 @@ export type NotificationCenterProps = React.ComponentProps<"div"> & {
 function NotificationCenter({
   notifications,
   onMarkAllRead,
+  onClearAll,
   onNotificationClick,
   emptyLabel = "No new notifications",
   title = "Notifications",
@@ -31,6 +34,11 @@ function NotificationCenter({
   ...props
 }: NotificationCenterProps) {
   const unreadCount = notifications.filter((n) => !n.read).length
+  const groupedNotifications = notifications.reduce<Record<string, NotificationItem[]>>((accumulator, notification) => {
+    const key = String(notification.group ?? "Recent")
+    accumulator[key] = [...(accumulator[key] ?? []), notification]
+    return accumulator
+  }, {})
 
   return (
     <div data-slot="notification-center" className={className} {...props}>
@@ -60,16 +68,28 @@ function NotificationCenter({
                 {unreadCount > 0 ? `${unreadCount} unread update${unreadCount > 1 ? "s" : ""}` : "You're all caught up"}
               </span>
             </div>
-            {unreadCount > 0 && onMarkAllRead && (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground"
-                onClick={onMarkAllRead}
-              >
-                Mark all read
-              </Button>
-            )}
+            <div className="flex items-center gap-2">
+              {unreadCount > 0 && onMarkAllRead ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground"
+                  onClick={onMarkAllRead}
+                >
+                  Mark all read
+                </Button>
+              ) : null}
+              {notifications.length > 0 && onClearAll ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 rounded-full border border-[color:var(--aui-surface-border)] px-3 text-xs font-semibold text-muted-foreground hover:bg-[color:var(--aui-page-bg)] hover:text-foreground"
+                  onClick={onClearAll}
+                >
+                  Clear all
+                </Button>
+              ) : null}
+            </div>
           </div>
           <div className="max-h-[400px] overflow-y-auto bg-[color:var(--aui-page-bg)] p-2">
             {notifications.length === 0 ? (
@@ -77,35 +97,40 @@ function NotificationCenter({
                 {emptyLabel}
               </div>
             ) : (
-              <div className="flex flex-col">
-                {notifications.map((notification) => (
-                  <button
-                    key={notification.id}
-                    className={cn(
-                      "flex flex-col gap-1 rounded-2xl border border-transparent px-4 py-3 text-left transition hover:border-[color:var(--aui-surface-border)] hover:bg-[color:var(--aui-control-bg)]",
-                      !notification.read && "border-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,var(--aui-surface-border))] bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_8%,var(--aui-control-bg))]"
-                    )}
-                    onClick={() => onNotificationClick?.(notification)}
-                  >
-                    <div className="flex w-full items-start justify-between gap-2">
-                      <span className="text-sm font-semibold leading-tight text-foreground">
-                        {notification.title}
-                      </span>
-                      {!notification.read && (
-                        <span className="mt-1 flex size-2 shrink-0 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)]" />
-                      )}
-                    </div>
-                    {notification.description && (
-                      <span className="line-clamp-2 text-xs leading-5 text-muted-foreground">
-                        {notification.description}
-                      </span>
-                    )}
-                    {notification.time && (
-                      <span className="mt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/80">
-                        {notification.time}
-                      </span>
-                    )}
-                  </button>
+              <div className="flex flex-col gap-3">
+                {Object.entries(groupedNotifications).map(([group, groupItems]) => (
+                  <div key={group} className="grid gap-2">
+                    <div className="px-2 pt-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">{group}</div>
+                    {groupItems.map((notification) => (
+                      <button
+                        key={notification.id}
+                        className={cn(
+                          "flex flex-col gap-1 rounded-2xl border border-transparent px-4 py-3 text-left transition hover:border-[color:var(--aui-surface-border)] hover:bg-[color:var(--aui-control-bg)]",
+                          !notification.read && "border-[color:color-mix(in_srgb,var(--aui-brand-strong)_16%,var(--aui-surface-border))] bg-[color:color-mix(in_srgb,var(--aui-brand-strong)_8%,var(--aui-control-bg))]"
+                        )}
+                        onClick={() => onNotificationClick?.(notification)}
+                      >
+                        <div className="flex w-full items-start justify-between gap-2">
+                          <span className="text-sm font-semibold leading-tight text-foreground">
+                            {notification.title}
+                          </span>
+                          {!notification.read && (
+                            <span className="mt-1 flex size-2 shrink-0 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)]" />
+                          )}
+                        </div>
+                        {notification.description && (
+                          <span className="line-clamp-2 text-xs leading-5 text-muted-foreground">
+                            {notification.description}
+                          </span>
+                        )}
+                        {notification.time && (
+                          <span className="mt-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/80">
+                            {notification.time}
+                          </span>
+                        )}
+                      </button>
+                    ))}
+                  </div>
                 ))}
               </div>
             )}

package/packages/cli/vendor/src/components/notifications/toast.tsx

@@ -6,15 +6,16 @@ import { cn } from "@/lib/utils"
 
 export type ToastTone = "default" | "success" | "info" | "warning" | "danger" | "loading"
 
-export type ToastItem = {
+export type ToastItem = {
   id: string
   title?: React.ReactNode
   description?: React.ReactNode
   tone?: ToastTone
   action?: React.ReactNode
   duration?: number
-  dismissible?: boolean
-}
+  dismissible?: boolean
+  group?: React.ReactNode
+}
 
 export type CreateToastInput = Omit<ToastItem, "id"> & {
   id?: string
@@ -39,8 +40,8 @@ export type ToastContextValue = {
   warning: (toast: ToastShortcutInput) => string
   error: (toast: ToastShortcutInput) => string
   loading: (toast: ToastShortcutInput) => string
-  promise: <TData>(promise: Promise<TData>, messages: ToastPromiseMessages<TData>) => Promise<TData>
-}
+  promise: <TData>(promise: Promise<TData>, messages: ToastPromiseMessages<TData>) => Promise<TData>
+}
 
 const ToastContext = React.createContext<ToastContextValue | null>(null)
 
@@ -187,17 +188,17 @@ function ToastProvider({
   return (
     <ToastContext.Provider value={value}>
       {children}
-      <div
-        data-slot="toast-viewport"
-        className={cn("fixed z-[100] flex w-[min(100%-2rem,24rem)] flex-col gap-2", positionClassName[position])}
-      >
-        {toasts.map((toast) => (
-          <ToastCard key={toast.id} toast={toast} pauseOnHover={pauseOnHover} onDismiss={dismissToast} />
-        ))}
-      </div>
-    </ToastContext.Provider>
-  )
-}
+      <div
+        data-slot="toast-viewport"
+        className={cn("fixed z-[100] flex w-[min(100%-2rem,24rem)] flex-col gap-2", positionClassName[position])}
+      >
+        {toasts.map((toast) => (
+          <ToastCard key={toast.id} toast={toast} pauseOnHover={pauseOnHover} onDismiss={dismissToast} />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  )
+}
 
 function ToastCard({
   toast,
@@ -231,11 +232,12 @@ function ToastCard({
       onMouseLeave={() => setHovered(false)}
     >
       <div className="mt-0.5 shrink-0">{toneIcon[tone]}</div>
-      <div className="min-w-0 flex-1 space-y-1">
-        {toast.title && <div className="text-sm font-medium leading-none">{toast.title}</div>}
-        {toast.description && <div className="text-sm text-muted-foreground">{toast.description}</div>}
-        {toast.action && <div className="pt-1">{toast.action}</div>}
-      </div>
+      <div className="min-w-0 flex-1 space-y-1">
+        {toast.group ? <div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">{toast.group}</div> : null}
+        {toast.title && <div className="text-sm font-medium leading-none">{toast.title}</div>}
+        {toast.description && <div className="text-sm text-muted-foreground">{toast.description}</div>}
+        {toast.action && <div className="pt-1">{toast.action}</div>}
+      </div>
       {toast.dismissible !== false && (
         <Button type="button" variant="ghost" size="icon-xs" onClick={() => onDismiss(toast.id)}>
           <XIcon />

package/packages/cli/vendor/src/components/overlay/alert-dialog.tsx

@@ -174,7 +174,7 @@ function AlertDialog({
             type="button"
             variant={actionTone === "destructive" ? "destructive" : "default"}
             loading={resolvedLoading}
-            disabled={!canConfirm && !resolvedLoading}
+            disabled={!canConfirm || resolvedLoading}
             onClick={() => void handleAction()}
             {...actionButtonProps}
           >

package/packages/cli/vendor/src/components/overlay/confirm-dialog.tsx

@@ -11,25 +11,32 @@ type ConfirmDialogProps = Omit<ModalShellProps, "footer"> & {
   confirmVariant?: ConfirmVariant
   confirmDisabled?: boolean
   cancelDisabled?: boolean
-  isLoading?: boolean
-  onCancel?: () => void
-  onConfirm?: () => void
-}
+  isLoading?: boolean
+  closeOnConfirm?: boolean
+  onConfirmError?: (error: unknown) => void
+  onCancel?: () => void
+  onConfirm?: () => void | Promise<void>
+}
 
 function ConfirmDialog({
   cancelText = "Cancel",
   confirmText = "Confirm",
   confirmVariant = "default",
   confirmDisabled = false,
-  cancelDisabled = false,
-  isLoading = false,
-  onCancel,
-  onConfirm,
-  onOpenChange,
-  ...props
+  cancelDisabled = false,
+  isLoading = false,
+  closeOnConfirm = true,
+  onConfirmError,
+  onCancel,
+  onConfirm,
+  onOpenChange,
+  ...props
 }: ConfirmDialogProps) {
+  const [pending, setPending] = React.useState(false)
+  const resolvedLoading = isLoading || pending
+
   const handleOpenChange = (open: boolean) => {
-    if (isLoading && open === false) {
+    if (resolvedLoading && open === false) {
       return
     }
 
@@ -38,31 +45,47 @@ function ConfirmDialog({
 
   const handleCancel = () => {
     onCancel?.()
-    if (!isLoading) {
+    if (!resolvedLoading) {
       onOpenChange?.(false)
     }
   }
 
+  const handleConfirm = async () => {
+    if (confirmDisabled || resolvedLoading) return
+
+    try {
+      setPending(true)
+      await onConfirm?.()
+      if (closeOnConfirm) {
+        onOpenChange?.(false)
+      }
+    } catch (error) {
+      onConfirmError?.(error)
+    } finally {
+      setPending(false)
+    }
+  }
+
   return (
     <ModalShell
-      showCloseButton={!isLoading}
+      showCloseButton={!resolvedLoading}
       onOpenChange={handleOpenChange}
       footer={
         <DialogActions>
           <DialogActionButton
-            type="button"
-            variant="outline"
-            disabled={cancelDisabled || isLoading}
-            onClick={handleCancel}
-          >
-            {cancelText}
+            type="button"
+            variant="outline"
+            disabled={cancelDisabled || resolvedLoading}
+            onClick={handleCancel}
+          >
+            {cancelText}
           </DialogActionButton>
           <DialogActionButton
             type="button"
             variant={confirmVariant}
-            disabled={confirmDisabled || isLoading}
-            isLoading={isLoading}
-            onClick={onConfirm}
+            disabled={confirmDisabled || resolvedLoading}
+            isLoading={resolvedLoading}
+            onClick={() => void handleConfirm()}
           >
             {confirmText}
           </DialogActionButton>

package/packages/cli/vendor/src/components/overlay/drawer.tsx

@@ -12,13 +12,15 @@ import {
 } from "@/components/ui/dialog"
 import { cn } from "@/lib/utils"
 
-export type DrawerSide = "left" | "right" | "top" | "bottom"
+export type DrawerSide = "left" | "right" | "top" | "bottom"
+export type DrawerWidth = "sm" | "md" | "lg" | "xl" | "full"
 
 export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
   trigger?: React.ReactNode
   title?: React.ReactNode
   description?: React.ReactNode
   side?: DrawerSide
+  width?: DrawerWidth
   footer?: React.ReactNode
   headerClassName?: string
   bodyClassName?: string
@@ -29,17 +31,26 @@ export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children">
 }
 
 const sideClassName: Record<DrawerSide, string> = {
-  right: "left-auto right-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] data-open:slide-in-from-right data-closed:slide-out-to-right sm:max-w-lg",
-  left: "left-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] data-open:slide-in-from-left data-closed:slide-out-to-left sm:max-w-lg",
+  right: "left-auto right-0 top-0 h-dvh max-h-dvh w-full translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] data-open:slide-in-from-right data-closed:slide-out-to-right",
+  left: "left-0 top-0 h-dvh max-h-dvh w-full translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] data-open:slide-in-from-left data-closed:slide-out-to-left",
   top: "left-0 top-0 h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-b-[var(--radius-3xl)] data-open:slide-in-from-top data-closed:slide-out-to-top",
   bottom: "bottom-0 left-0 top-auto h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-t-[var(--radius-3xl)] data-open:slide-in-from-bottom data-closed:slide-out-to-bottom",
 }
+
+const widthClassName: Record<DrawerWidth, string> = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-2xl",
+  full: "max-w-none sm:max-w-[min(100vw,72rem)]",
+}
 
 function Drawer({
   trigger,
-  title,
+  title,
   description,
   side = "right",
+  width = "lg",
   footer,
   headerClassName,
   bodyClassName,
@@ -55,7 +66,9 @@ function Drawer({
       <DialogContent
         size="full"
         showCloseButton={showCloseButton}
-        className={cn("fixed grid grid-rows-[auto_minmax(0,1fr)_auto] gap-0 p-0", sideClassName[side], contentClassName)}
+        data-side={side}
+        data-width={width}
+        className={cn("fixed grid grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overscroll-contain p-0", sideClassName[side], (side === "left" || side === "right") && widthClassName[width], contentClassName)}
       >
         {(title || description) && (
           <DialogHeader className={cn("border-b border-border/70 p-6", headerClassName)}>

package/packages/cli/vendor/src/components/ui/accordion/index.tsx

@@ -17,6 +17,10 @@ export type AccordionRootProps = CollapseProps
 export type AccordionTriggerProps = CollapseTriggerProps
 export type AccordionContentProps = React.ComponentProps<"div">
 
+/**
+ * Accordion is the grouped disclosure API. Use CollapseRoot/CollapseTrigger/CollapseContent
+ * for a single standalone disclosure.
+ */
 function Accordion(props: AccordionProps) {
   return <CollapseGroup data-slot="accordion" {...props} />
 }

package/packages/cli/vendor/src/components/ui/badge/index.tsx

@@ -17,6 +17,7 @@ const badgeVariants = cva(
           "border-[color:color-mix(in_oklch,var(--border),var(--foreground)_10%)] bg-[color:color-mix(in_oklch,var(--muted),var(--background)_8%)] text-foreground",
         destructive:
           "border-[color:color-mix(in_oklch,var(--destructive),transparent_52%)] bg-[color:color-mix(in_oklch,var(--destructive),transparent_82%)] text-[color:color-mix(in_oklch,var(--destructive),black_16%)] dark:text-[color:color-mix(in_oklch,var(--destructive),white_38%)]",
+        soft: "border-transparent bg-[color:color-mix(in_oklch,var(--muted),transparent_38%)] text-foreground shadow-none",
         outline: "bg-[color:color-mix(in_oklch,var(--background),var(--muted)_6%)] text-foreground shadow-none",
         ghost: "border-transparent bg-[color:color-mix(in_oklch,var(--muted),transparent_76%)] text-muted-foreground shadow-none",
         link: "border-transparent bg-transparent p-0 text-primary shadow-none underline-offset-4",
@@ -115,7 +116,7 @@ function Badge({
                   event.stopPropagation()
                   onRemove?.()
                 }}
-                className="inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-[color:color-mix(in_oklch,currentColor,transparent_90%)] opacity-80 transition hover:opacity-100"
+                className="inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-[color:color-mix(in_oklch,currentColor,transparent_90%)] opacity-80 transition hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/35"
               >
                 <XIcon className="size-3" />
               </button>

package/packages/cli/vendor/src/components/ui/button/index.tsx

@@ -46,6 +46,7 @@ export type ButtonProps = ButtonPrimitive.Props &
     loadingLabel?: string
     leftIcon?: React.ReactNode
     rightIcon?: React.ReactNode
+    iconOnly?: boolean
     fullWidth?: boolean
     pressed?: boolean
   }
@@ -59,25 +60,30 @@ function Button({
   loadingLabel = "Loading",
   leftIcon,
   rightIcon,
+  iconOnly = false,
   fullWidth = false,
   pressed = false,
   children,
+  "aria-label": ariaLabel,
   ...props
 }: ButtonProps) {
-  const isDisabled = disabled || loading
-
-  return (
+  const isDisabled = disabled || loading
+  const resolvedSize = iconOnly && (size === "default" || size === "md") ? "icon" : size
+
+  return (
     <ButtonPrimitive
       data-slot="button"
       data-variant={variant ?? "default"}
-      data-size={size ?? "default"}
+      data-size={resolvedSize ?? "default"}
+      data-icon-only={iconOnly || undefined}
       data-loading={loading || undefined}
       data-pressed={pressed || undefined}
       disabled={isDisabled}
       aria-busy={loading || undefined}
       aria-pressed={pressed || undefined}
+      aria-label={ariaLabel}
       className={cn(
-        buttonVariants({ variant, size, className }),
+        buttonVariants({ variant, size: resolvedSize, className }),
         fullWidth && "w-full",
         pressed && "shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring))]"
       )}