@bearmenu/ui 0.5.2 → 0.6.1

package/src/components/avatar.tsx

@@ -2,20 +2,42 @@
 
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
+const avatarVariants = cva(
+  "relative flex shrink-0 overflow-hidden rounded-full bg-muted",
+  {
+    variants: {
+      size: {
+        xs: "size-6 text-[10px]",
+        sm: "size-8 text-xs",
+        default: "size-10 text-sm",
+        lg: "size-12 text-base",
+        xl: "size-16 text-lg",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+const AvatarContext = React.createContext<VariantProps<typeof avatarVariants>["size"]>("default");
+
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border border-border/50 shadow-lg backdrop-blur-md bg-card/50 transition-all duration-300 hover:shadow-xl hover:shadow-black/20 hover:border-accent/30",
-      className
-    )}
-    {...props}
-  />
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
+    VariantProps<typeof avatarVariants>
+>(({ className, size = "default", ...props }, ref) => (
+  <AvatarContext.Provider value={size}>
+    <AvatarPrimitive.Root
+      ref={ref}
+      data-slot="avatar"
+      className={cn(avatarVariants({ size }), className)}
+      {...props}
+    />
+  </AvatarContext.Provider>
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
@@ -25,7 +47,8 @@ const AvatarImage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
     ref={ref}
-    className={cn("aspect-square h-full w-full object-cover", className)}
+    data-slot="avatar-image"
+    className={cn("aspect-square size-full object-cover", className)}
     {...props}
   />
 ));
@@ -37,8 +60,9 @@ const AvatarFallback = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
+    data-slot="avatar-fallback"
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm font-medium backdrop-blur-md",
+      "flex size-full items-center justify-center rounded-full bg-muted font-medium text-muted-foreground",
       className
     )}
     {...props}
@@ -46,4 +70,73 @@ const AvatarFallback = React.forwardRef<
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback };
+const badgeOffset = {
+  xs: "size-2 ring-1",
+  sm: "size-2.5 ring-2",
+  default: "size-3 ring-2",
+  lg: "size-3.5 ring-2",
+  xl: "size-4 ring-2",
+} as const;
+
+const AvatarBadge = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement> & {
+    placement?: "top-right" | "bottom-right";
+    tone?: "success" | "warning" | "destructive" | "muted";
+  }
+>(({ className, placement = "bottom-right", tone = "success", ...props }, ref) => {
+  const size = React.useContext(AvatarContext) ?? "default";
+  return (
+    <span
+      ref={ref}
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute block rounded-full ring-background",
+        badgeOffset[size as keyof typeof badgeOffset],
+        placement === "top-right" ? "right-0 top-0" : "bottom-0 right-0",
+        tone === "success" && "bg-success",
+        tone === "warning" && "bg-warning",
+        tone === "destructive" && "bg-destructive",
+        tone === "muted" && "bg-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+AvatarBadge.displayName = "AvatarBadge";
+
+const AvatarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { max?: number; spacing?: "tight" | "default" | "loose" }
+>(({ className, children, max, spacing = "default", ...props }, ref) => {
+  const items = React.Children.toArray(children);
+  const visible = max ? items.slice(0, max) : items;
+  const overflow = max ? items.length - max : 0;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="avatar-group"
+      className={cn(
+        "flex items-center",
+        spacing === "tight" && "-space-x-3",
+        spacing === "default" && "-space-x-2",
+        spacing === "loose" && "-space-x-1",
+        "[&>*]:ring-2 [&>*]:ring-background",
+        className
+      )}
+      {...props}
+    >
+      {visible}
+      {overflow > 0 && (
+        <span className="relative inline-flex size-10 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground ring-2 ring-background">
+          +{overflow}
+        </span>
+      )}
+    </div>
+  );
+});
+AvatarGroup.displayName = "AvatarGroup";
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, avatarVariants };

package/src/components/badge.tsx

@@ -3,23 +3,24 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-lg border px-2.5 py-0.5 text-xs font-semibold transition-[background-color,color,box-shadow,border-color] duration-300 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 backdrop-blur-md",
+  "inline-flex items-center rounded-lg border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary/80 text-primary-foreground shadow-lg hover:bg-primary hover:shadow-xl hover:shadow-primary/20",
+        default: "border-transparent bg-primary text-primary-foreground",
         secondary:
-          "border-transparent bg-secondary/80 text-secondary-foreground shadow-lg hover:bg-secondary hover:shadow-xl hover:shadow-secondary/20",
+          "border-transparent bg-secondary text-secondary-foreground",
         destructive:
-          "border-transparent bg-destructive/80 text-destructive-foreground shadow-lg hover:bg-destructive hover:shadow-xl hover:shadow-destructive/20",
-        outline: "text-foreground glass glass-hover",
-        overlay: "border-transparent bg-black/50 text-white backdrop-blur-sm shadow-lg",
-        glass: "glass glass-hover text-foreground border-border/50",
+          "border-transparent bg-destructive text-destructive-foreground",
+        outline: "text-foreground border-border",
+        overlay:
+          "border-transparent bg-foreground/70 text-background backdrop-blur-sm",
+        glass: "glass text-foreground border-border/50",
         success:
-          "border-transparent bg-green-500/80 text-primary shadow-lg hover:bg-green-500 hover:shadow-xl hover:shadow-green-500/20",
+          "border-transparent bg-success text-success-foreground",
         warning:
-          "border-transparent bg-yellow-500/80 text-primary shadow-lg hover:bg-yellow-500 hover:shadow-xl hover:shadow-yellow-500/20",
+          "border-transparent bg-warning text-warning-foreground",
+        brown: "border-transparent bg-brown text-brown-foreground",
       },
     },
     defaultVariants: {
@@ -32,7 +33,7 @@ export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+  return <div data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
 export { Badge, badgeVariants };

package/src/components/breadcrumb.tsx

@@ -43,7 +43,10 @@ function BreadcrumbLink({
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn(
+        "rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      )}
       {...props}
     />
   );
@@ -56,7 +59,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+      className={cn("font-medium text-foreground", className)}
       {...props}
     />
   );

package/src/components/button-group.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ButtonGroup } from "./button-group";
+import { Button } from "./button";
+import { AlignLeft, AlignCenter, AlignRight } from "lucide-react";
+
+const meta = {
+  title: "Components/ButtonGroup",
+  component: ButtonGroup,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button variant="outline">One</Button>
+      <Button variant="outline">Two</Button>
+      <Button variant="outline">Three</Button>
+    </ButtonGroup>
+  ),
+};
+
+export const Icons: Story = {
+  render: () => (
+    <ButtonGroup>
+      <Button variant="outline" size="icon" aria-label="Align left"><AlignLeft className="size-4" /></Button>
+      <Button variant="outline" size="icon" aria-label="Align center"><AlignCenter className="size-4" /></Button>
+      <Button variant="outline" size="icon" aria-label="Align right"><AlignRight className="size-4" /></Button>
+    </ButtonGroup>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <ButtonGroup orientation="vertical">
+      <Button variant="outline">Top</Button>
+      <Button variant="outline">Middle</Button>
+      <Button variant="outline">Bottom</Button>
+    </ButtonGroup>
+  ),
+};
+
+export const Detached: Story = {
+  render: () => (
+    <ButtonGroup attached={false}>
+      <Button>Save</Button>
+      <Button variant="outline">Cancel</Button>
+    </ButtonGroup>
+  ),
+};

package/src/components/button-group.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const buttonGroupVariants = cva("inline-flex", {
+  variants: {
+    orientation: {
+      horizontal:
+        "flex-row [&>[data-slot=button]]:rounded-none [&>[data-slot=button]:first-child]:rounded-l-xl [&>[data-slot=button]:last-child]:rounded-r-xl [&>[data-slot=button]:not(:first-child)]:-ml-px",
+      vertical:
+        "flex-col [&>[data-slot=button]]:rounded-none [&>[data-slot=button]:first-child]:rounded-t-xl [&>[data-slot=button]:last-child]:rounded-b-xl [&>[data-slot=button]:not(:first-child)]:-mt-px",
+    },
+    attached: {
+      true: "",
+      false: "gap-1",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    attached: true,
+  },
+});
+
+type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof buttonGroupVariants>;
+
+const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ className, orientation, attached, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      data-slot="button-group"
+      className={cn(buttonGroupVariants({ orientation, attached }), className)}
+      {...props}
+    />
+  )
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+export { ButtonGroup, buttonGroupVariants };

package/src/components/button.test.tsx

@@ -0,0 +1,174 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Button, buttonVariants } from "./button";
+
+// ─── buttonVariants CVA ───────────────────────────────────────────────────────
+
+describe("buttonVariants", () => {
+  it("returns default variant + size classes when called with no args", () => {
+    const result = buttonVariants({});
+    expect(result).toContain("bg-primary");
+    expect(result).toContain("text-primary-foreground");
+    expect(result).toContain("h-11");
+  });
+
+  it("maps variant prop to correct classes", () => {
+    expect(buttonVariants({ variant: "default" })).toContain("bg-primary");
+    expect(buttonVariants({ variant: "destructive" })).toContain("bg-destructive");
+    expect(buttonVariants({ variant: "outline" })).toContain("border-border");
+    expect(buttonVariants({ variant: "secondary" })).toContain("bg-secondary");
+    expect(buttonVariants({ variant: "ghost" })).toContain("hover:bg-accent");
+    expect(buttonVariants({ variant: "link" })).toContain("text-primary");
+    expect(buttonVariants({ variant: "glass" })).toContain("glass");
+    expect(buttonVariants({ variant: "brown" })).toContain("bg-brown");
+    expect(buttonVariants({ variant: "antagonist" })).toContain("bg-primary-foreground");
+  });
+
+  it("maps size prop to correct classes", () => {
+    expect(buttonVariants({ size: "xs" })).toContain("h-8");
+    expect(buttonVariants({ size: "sm" })).toContain("h-9");
+    expect(buttonVariants({ size: "default" })).toContain("h-11");
+    expect(buttonVariants({ size: "lg" })).toContain("h-12");
+    expect(buttonVariants({ size: "icon" })).toContain("rounded-full");
+    expect(buttonVariants({ size: "icon-xs" })).toContain("h-8");
+    expect(buttonVariants({ size: "icon-sm" })).toContain("h-9");
+    expect(buttonVariants({ size: "icon-lg" })).toContain("h-12");
+  });
+
+  it("applies fullWidth class when fullWidth is true", () => {
+    expect(buttonVariants({ fullWidth: true })).toContain("w-full");
+    expect(buttonVariants({ fullWidth: false })).not.toContain("w-full");
+  });
+});
+
+// ─── <Button> component ───────────────────────────────────────────────────────
+
+describe("Button component", () => {
+  it("renders as <button> by default", () => {
+    render(<Button>click</Button>);
+    const el = screen.getByRole("button", { name: "click" });
+    expect(el.tagName).toBe("BUTTON");
+  });
+
+  it("renders children correctly", () => {
+    render(<Button>label content</Button>);
+    expect(screen.getByText("label content")).toBeDefined();
+  });
+
+  it("forwards ref to the underlying button element", () => {
+    const ref = { current: null as HTMLButtonElement | null };
+    render(<Button ref={ref}>ref</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("renders as Slot child when asChild is true", () => {
+    render(
+      <Button asChild>
+        <a href="/x">link</a>
+      </Button>
+    );
+    const el = screen.getByRole("link", { name: "link" });
+    expect(el.tagName).toBe("A");
+    expect(el.getAttribute("href")).toBe("/x");
+  });
+
+  it("applies data-slot=button attribute", () => {
+    render(<Button>x</Button>);
+    expect(screen.getByRole("button").getAttribute("data-slot")).toBe("button");
+  });
+
+  // Disabled / loading states
+
+  it("disables the button when disabled prop is set", () => {
+    render(<Button disabled>x</Button>);
+    expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("disables the button and sets aria-busy when isLoading", () => {
+    render(<Button isLoading>x</Button>);
+    const el = screen.getByRole("button");
+    expect((el as HTMLButtonElement).disabled).toBe(true);
+    expect(el.getAttribute("aria-busy")).toBe("true");
+  });
+
+  it("renders spinner when isLoading", () => {
+    const { container } = render(<Button isLoading>x</Button>);
+    expect(container.querySelector(".animate-spin")).not.toBeNull();
+  });
+
+  it("does not set aria-busy when not loading", () => {
+    render(<Button>x</Button>);
+    expect(screen.getByRole("button").getAttribute("aria-busy")).toBeNull();
+  });
+
+  // Click behavior
+
+  it("calls onClick when clicked", async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Button onClick={onClick}>x</Button>);
+    await user.click(screen.getByRole("button"));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call onClick when disabled", async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Button onClick={onClick} disabled>
+        x
+      </Button>
+    );
+    await user.click(screen.getByRole("button"));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("does not call onClick when loading", async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Button onClick={onClick} isLoading>
+        x
+      </Button>
+    );
+    await user.click(screen.getByRole("button"));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  // Class output
+
+  it("applies variant class from variant prop", () => {
+    render(<Button variant="destructive">x</Button>);
+    expect(screen.getByRole("button").className).toContain("bg-destructive");
+  });
+
+  it("applies size class from size prop", () => {
+    render(<Button size="sm">x</Button>);
+    expect(screen.getByRole("button").className).toContain("h-9");
+  });
+
+  it("applies fullWidth class when fullWidth is true", () => {
+    render(<Button fullWidth>x</Button>);
+    expect(screen.getByRole("button").className).toContain("w-full");
+  });
+
+  it("merges className via twMerge (overrides defaults)", () => {
+    render(<Button className="bg-red-500">x</Button>);
+    const el = screen.getByRole("button");
+    expect(el.className).toContain("bg-red-500");
+    // twMerge strips conflicting bg-primary (but not hover:bg-primary/90)
+    expect(el.className).not.toMatch(/(^|\s)bg-primary(\s|$)/);
+  });
+
+  it("passes through arbitrary HTML attributes", () => {
+    render(
+      <Button id="my-btn" type="submit">
+        x
+      </Button>
+    );
+    const el = screen.getByRole("button") as HTMLButtonElement;
+    expect(el.id).toBe("my-btn");
+    expect(el.type).toBe("submit");
+  });
+});

package/src/components/button.tsx

@@ -1,40 +1,50 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
 import { cn } from "../lib/utils";
 import { useHaptic } from "../hooks/use-haptic";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-3xl text-sm font-medium transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer [@media(pointer:coarse)]:active:scale-95",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer [@media(pointer:coarse)]:active:scale-95",
   {
     variants: {
       variant: {
         default:
-          "bg-primary backdrop-blur-sm text-primary-foreground shadow-lg hover:bg-primary/85 border border-primary/20 transition-colors duration-200",
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-lg hover:bg-destructive/90 hover:shadow-destructive/20 backdrop-blur-sm border border-destructive/20",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/85 hover:shadow",
         outline:
-          "border border-border bg-sidebar backdrop-blur-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:border-sidebar-accent-foreground/20 hover:shadow-lg",
+          "border border-border bg-background hover:bg-accent hover:text-accent-foreground hover:border-accent",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-lg hover:bg-secondary/90 hover:shadow-secondary/20 backdrop-blur-sm border border-secondary/20",
-        ghost: "hover:bg-foreground/10 hover:text-foreground transition-colors duration-200",
-        link: "text-primary underline-offset-4 hover:underline hover:text-primary/80",
-        glass: "glass glass-hover text-foreground hover:text-accent-foreground",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-accent hover:text-accent-foreground border border-border hover:border-accent",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        glass: "glass glass-hover text-foreground",
         brown:
-          "bg-[#482E1F] text-white shadow-lg hover:bg-[#352317] hover:shadow-[#482E1F]/20 backdrop-blur-sm border border-[#482E1F]/30 transition-all duration-300",
+          "bg-brown text-brown-foreground shadow-sm hover:bg-brown/85 hover:shadow",
         antagonist:
-          "bg-primary-foreground text-primary shadow-lg hover:bg-primary-foreground/90 hover:shadow-primary-foreground/20 backdrop-blur-sm border border-primary-foreground/20 transition-all duration-300",
+          "bg-primary-foreground text-primary shadow-sm hover:bg-accent hover:text-accent-foreground border border-border hover:border-accent",
       },
       size: {
-        default: "h-11 px-6 py-2",
+        xs: "h-8 rounded-lg px-3 text-xs [&_svg]:size-3.5",
         sm: "h-9 rounded-lg px-4",
-        lg: "h-12 rounded-xl px-8",
-        icon: "h-11 w-11",
+        default: "h-11 px-6 py-2",
+        lg: "h-12 rounded-2xl px-8",
+        icon: "h-11 w-11 rounded-full",
+        "icon-xs": "h-8 w-8 rounded-full [&_svg]:size-3.5",
+        "icon-sm": "h-9 w-9 rounded-full",
+        "icon-lg": "h-12 w-12 rounded-full",
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
+      fullWidth: false,
     },
   }
 );
@@ -44,6 +54,7 @@ export interface ButtonProps
   asChild?: boolean;
   haptic?: boolean;
   hapticStyle?: "light" | "medium" | "heavy";
+  isLoading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -52,10 +63,14 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       className,
       variant,
       size,
+      fullWidth,
       asChild = false,
       haptic = true,
       hapticStyle = "light",
+      isLoading = false,
+      disabled,
       onClick,
+      children,
       ...props
     },
     ref
@@ -64,28 +79,36 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const { trigger } = useHaptic();
     const [isMounted, setIsMounted] = React.useState(false);
 
-    // Track mounted state to prevent hydration issues
     React.useEffect(() => {
       setIsMounted(true);
     }, []);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      // Only trigger haptic feedback after component has mounted to prevent hydration issues
       if (haptic && isMounted) {
         trigger(hapticStyle);
       }
-
-      // Call the original onClick handler
       onClick?.(event);
     };
 
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        data-slot="button"
+        className={cn(buttonVariants({ variant, size, fullWidth, className }))}
         ref={ref}
         onClick={handleClick}
+        disabled={disabled || isLoading}
+        aria-busy={isLoading || undefined}
         {...props}
-      />
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="animate-spin" aria-hidden="true" />
+            {!asChild && children}
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
     );
   }
 );

package/src/components/calendar.tsx

@@ -25,7 +25,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "group/calendar bg-background p-3 [--cell-size:--spacing(9)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -168,7 +168,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        "group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground flex aspect-square h-(--cell-size) w-(--cell-size) size-auto min-w-0 flex-col items-center justify-center gap-1 rounded-md p-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}