@wealthx/shadcn 0.0.1 → 1.0.0

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

@@ -0,0 +1,239 @@
+/**
+ * AlertDialog — WealthX DS overrides (shadcn / \@base-ui alert-dialog)
+ *
+ * Changes from shadcn default:
+ *   - AlertDialogOverlay:     `bg-black/50` → `bg-foreground/50` — DS foreground token (matches Figma)
+ *   - AlertDialogContent:     `rounded-lg` removed — sharp corners per Figma
+ *   - AlertDialogContent:     `shadow-lg` removed — flat panels per Figma
+ *   - AlertDialogFooter:      always row, right-aligned; `border-t border-border pt-4` separator
+ *   - AlertDialogMedia:       borderless icon slot — `size-10` default, `size-8` sm
+ */
+import { type ReactElement } from "react"
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import { cn } from "@/lib/utils"
+import { useThemeVars } from "@/lib/theme-provider"
+import { buttonVariants } from "@/components/ui/button"
+
+export type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>
+
+function AlertDialog({
+  ...props
+}: AlertDialogProps): ReactElement {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+export type AlertDialogTriggerProps = React.ComponentProps<typeof AlertDialogPrimitive.Trigger>
+
+function AlertDialogTrigger({
+  ...props
+}: AlertDialogTriggerProps): ReactElement {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+export type AlertDialogPortalProps = React.ComponentProps<typeof AlertDialogPrimitive.Portal>
+
+function AlertDialogPortal({
+  ...props
+}: AlertDialogPortalProps): ReactElement {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+export type AlertDialogOverlayProps = React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogOverlayProps): ReactElement {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      className={cn(
+        // WealthX: foreground/50 scrim — matches Figma foreground token at 50% opacity
+        "fixed inset-0 z-50 bg-foreground/50 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0",
+        className
+      )}
+      data-slot="alert-dialog-overlay"
+      {...props}
+    />
+  )
+}
+
+export type AlertDialogContentProps = React.ComponentProps<typeof AlertDialogPrimitive.Popup> & {
+  size?: "default" | "sm"
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  style,
+  ...props
+}: AlertDialogContentProps): ReactElement {
+  const themeVars = useThemeVars();
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        className={cn(
+          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels)
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 data-[size=sm]:max-w-xs data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          className
+        )}
+        data-size={size}
+        data-slot="alert-dialog-content"
+        style={{ ...themeVars, ...style } as React.CSSProperties}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+export type AlertDialogHeaderProps = React.ComponentProps<"div">
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: AlertDialogHeaderProps): ReactElement {
+  return (
+    <div
+      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] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      data-slot="alert-dialog-header"
+      {...props}
+    />
+  )
+}
+
+export type AlertDialogFooterProps = React.ComponentProps<"div">
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: AlertDialogFooterProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        // WealthX: always row, right-aligned, separator above footer (matches Figma)
+        "flex flex-row justify-end gap-2 border-t border-border pt-4",
+        className
+      )}
+      data-slot="alert-dialog-footer"
+      {...props}
+    />
+  )
+}
+
+export type AlertDialogTitleProps = React.ComponentProps<typeof AlertDialogPrimitive.Title>
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: AlertDialogTitleProps): ReactElement {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn(
+        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      data-slot="alert-dialog-title"
+      {...props}
+    />
+  )
+}
+
+export type AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialogPrimitive.Description>
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogDescriptionProps): ReactElement {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn(
+        "text-sm text-muted-foreground sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      data-slot="alert-dialog-description"
+      {...props}
+    />
+  )
+}
+
+export type AlertDialogMediaProps = React.ComponentProps<"div">
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: AlertDialogMediaProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        // WealthX: borderless icon slot — size-10 default, size-8 sm
+        "mb-2 inline-flex size-10 items-center justify-center group-data-[size=sm]/alert-dialog-content:size-8 sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-5",
+        className
+      )}
+      data-slot="alert-dialog-media"
+      {...props}
+    />
+  )
+}
+
+export type AlertDialogActionProps = React.ComponentProps<typeof AlertDialogPrimitive.Close> & {
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
+  size?: "default" | "sm" | "lg" | "xs" | "icon"
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: AlertDialogActionProps): ReactElement {
+  return (
+    <AlertDialogPrimitive.Close
+      className={cn(buttonVariants({ variant, size }), className)}
+      data-slot="alert-dialog-action"
+      {...props}
+    />
+  )
+}
+
+export type AlertDialogCancelProps = React.ComponentProps<typeof AlertDialogPrimitive.Close> & {
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
+  size?: "default" | "sm" | "lg" | "xs" | "icon"
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogCancelProps): ReactElement {
+  return (
+    <AlertDialogPrimitive.Close
+      className={cn(buttonVariants({ variant, size }), className)}
+      data-slot="alert-dialog-cancel"
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,81 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+/**
+ * Alert — WealthX Design System
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=72-2633
+ *
+ * Base: official shadcn alert (npx shadcn\@latest add alert)
+ * WealthX overrides: sharp corners (no rounded-lg), added warning/success/info variants
+ */
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default:     "border-border bg-card text-card-foreground",
+        destructive: "border-destructive/40 bg-destructive/10 text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-destructive",
+        warning:     "border-warning/40 bg-warning/10 text-warning *:data-[slot=alert-description]:text-warning/90 [&>svg]:text-warning",
+        success:     "border-success/40 bg-success/10 text-success *:data-[slot=alert-description]:text-success/90 [&>svg]:text-success",
+        info:        "border-info/40 bg-info/10 text-info *:data-[slot=alert-description]:text-info/90 [&>svg]:text-info",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants>
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: AlertProps): ReactElement {
+  return (
+    <div
+      className={cn(alertVariants({ variant }), className)}
+      data-slot="alert"
+      role="alert"
+      {...props}
+    />
+  )
+}
+
+export type AlertTitleProps = React.ComponentProps<"div">
+
+function AlertTitle({ className, ...props }: AlertTitleProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      data-slot="alert-title"
+      {...props}
+    />
+  )
+}
+
+export type AlertDescriptionProps = React.ComponentProps<"div">
+
+function AlertDescription({
+  className,
+  ...props
+}: AlertDescriptionProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className
+      )}
+      data-slot="alert-description"
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/avatar.tsx

@@ -0,0 +1,130 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+import { cn } from "@/lib/utils"
+
+/**
+ * Avatar — shadcn/WealthX
+ * Base: npx shadcn\@latest add avatar (latest)
+ * Figma: Design-System---shadcn?node-id=72-2717
+ *
+ * WealthX:
+ * - Removed overflow-hidden from Avatar root → moved to AvatarImage/AvatarFallback
+ *   so AvatarBadge (absolute positioned) is not clipped by the parent.
+ * - Added font-sans to AvatarFallback for consistent typography.
+ */
+
+export type AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarProps): ReactElement {
+  return (
+    <AvatarPrimitive.Root
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      data-size={size}
+      data-slot="avatar"
+      {...props}
+    />
+  )
+}
+
+export type AvatarImageProps = React.ComponentProps<typeof AvatarPrimitive.Image>
+
+function AvatarImage({
+  className,
+  ...props
+}: AvatarImageProps): ReactElement {
+  return (
+    <AvatarPrimitive.Image
+      className={cn("aspect-square size-full rounded-full", className)}
+      data-slot="avatar-image"
+      {...props}
+    />
+  )
+}
+
+export type AvatarFallbackProps = React.ComponentProps<typeof AvatarPrimitive.Fallback>
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarFallbackProps): ReactElement {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        "flex size-full items-center justify-center rounded-full overflow-hidden bg-muted text-sm font-sans text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      data-slot="avatar-fallback"
+      {...props}
+    />
+  )
+}
+
+export type AvatarBadgeProps = React.ComponentProps<"span">
+
+function AvatarBadge({ className, ...props }: AvatarBadgeProps): ReactElement {
+  return (
+    <span
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      data-slot="avatar-badge"
+      {...props}
+    />
+  )
+}
+
+export type AvatarGroupProps = React.ComponentProps<"div">
+
+function AvatarGroup({ className, ...props }: AvatarGroupProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      data-slot="avatar-group"
+      {...props}
+    />
+  )
+}
+
+export type AvatarGroupCountProps = React.ComponentProps<"div">
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: AvatarGroupCountProps): ReactElement {
+  return (
+    <div
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      data-slot="avatar-group-count"
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,57 @@
+import { type ReactElement } from "react"
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+import { Slot } from "@/lib/slot"
+
+/**
+ * Badge — shadcn/WealthX
+ * Base: npx shadcn\@latest add badge (latest)
+ * Figma: Design-System---shadcn?node-id=665-2024
+ *
+ * WealthX: added font-sans. All 6 shadcn variants preserved.
+ */
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium font-sans whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-muted text-muted-foreground [a&]:hover:bg-muted/80",
+        destructive:
+          "bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export type BadgeProps = React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: BadgeProps): ReactElement {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      className={cn(badgeVariants({ variant }), className)}
+      data-slot="badge"
+      data-variant={variant}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -1,37 +1,47 @@
-import * as React from "react"
+import { type ReactElement, type ComponentProps, forwardRef } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from "../../lib/utils"
+import { Loader2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Slot } from "@/lib/slot"
 
+/**
+ * Button — WealthX Design System
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=72-2719
+ *
+ * Base: official shadcn new-york button (npx shadcn\@latest add button)
+ * WealthX overrides: variants, square corners, font-sans, loading state
+ */
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 font-sans text-sm font-medium whitespace-nowrap transition-all active:scale-[0.98] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost:
-          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+          "bg-brand-secondary text-brand-secondary-foreground shadow-xs hover:bg-brand-secondary/80 focus-visible:ring-brand-secondary/30",
         destructive:
-          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline",
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        "outline-primary":
+          "border border-primary text-foreground bg-transparent shadow-xs hover:bg-primary/5 focus-visible:ring-primary/50",
+        "outline-secondary":
+          "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:ring-brand-secondary/30",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground hover:shadow-xs dark:hover:bg-accent/50",
+        link:
+          "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default:
-          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        icon: "size-8",
-        "icon-xs":
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
+        default:    "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs:         "h-6 gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm:         "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg:         "h-10 px-6 has-[>svg]:px-4",
+        icon:       "size-9",
+        "icon-xs":  "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":  "size-8",
+        "icon-lg":  "size-10",
       },
     },
     defaultVariants: {
@@ -41,27 +51,49 @@ const buttonVariants = cva(
   }
 )
 
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
+export type ButtonProps = ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot.Root : "button"
+    /** Shows spinner and disables the button. Icon-only sizes hide the icon. */
+    loading?: boolean
+  }
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading = false,
+    disabled,
+    children,
+    ...props
+  },
+  ref
+): ReactElement {
+  const Comp = asChild ? Slot : "button"
+  const isIconOnly = size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg"
 
   return (
     <Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      data-size={size}
       data-slot="button"
       data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
+      disabled={loading || disabled}
+      ref={ref}
       {...props}
-    />
+    >
+      {loading ? (
+        <>
+          <Loader2 aria-hidden="true" className="animate-spin" />
+          {!isIconOnly && children}
+        </>
+      ) : (
+        children
+      )}
+    </Comp>
   )
-}
+})
 
 export { Button, buttonVariants }