@bearmenu/ui 0.5.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
@@ -24,28 +24,38 @@
     "./components/avatar": "./src/components/avatar.tsx",
     "./components/badge": "./src/components/badge.tsx",
     "./components/breadcrumb": "./src/components/breadcrumb.tsx",
+    "./components/button-group": "./src/components/button-group.tsx",
     "./components/button": "./src/components/button.tsx",
     "./components/calendar": "./src/components/calendar.tsx",
     "./components/card": "./src/components/card.tsx",
     "./components/carousel": "./src/components/carousel.tsx",
     "./components/checkbox": "./src/components/checkbox.tsx",
+    "./components/circular-progress": "./src/components/circular-progress.tsx",
     "./components/collapsible": "./src/components/collapsible.tsx",
+    "./components/combobox": "./src/components/combobox.tsx",
     "./components/command": "./src/components/command.tsx",
     "./components/currency-input": "./src/components/currency-input.tsx",
+    "./components/date-input": "./src/components/date-input.tsx",
+    "./components/description-list": "./src/components/description-list.tsx",
     "./components/dialog": "./src/components/dialog.tsx",
     "./components/drawer": "./src/components/drawer.tsx",
     "./components/dropdown-menu": "./src/components/dropdown-menu.tsx",
     "./components/empty-state": "./src/components/empty-state.tsx",
+    "./components/field": "./src/components/field.tsx",
     "./components/form": "./src/components/form.tsx",
     "./components/haptic-button": "./src/components/haptic-button.tsx",
+    "./components/input-group": "./src/components/input-group.tsx",
     "./components/input-otp": "./src/components/input-otp.tsx",
     "./components/input": "./src/components/input.tsx",
+    "./components/item": "./src/components/item.tsx",
+    "./components/kbd": "./src/components/kbd.tsx",
     "./components/label": "./src/components/label.tsx",
     "./components/lazy-markdown": "./src/components/lazy-markdown.tsx",
     "./components/link-button": "./src/components/link-button.tsx",
     "./components/markdown-renderer": "./src/components/markdown-renderer.tsx",
     "./components/multi-select-combobox": "./src/components/multi-select-combobox.tsx",
     "./components/multi-select-menu": "./src/components/multi-select-menu.tsx",
+    "./components/native-select": "./src/components/native-select.tsx",
     "./components/pagination": "./src/components/pagination.tsx",
     "./components/phone-frame": "./src/components/phone-frame.tsx",
     "./components/place-about-tab": "./src/components/place-about-tab.tsx",
@@ -60,6 +70,7 @@
     "./components/search-bar": "./src/components/search-bar.tsx",
     "./components/searchable-select": "./src/components/searchable-select.tsx",
     "./components/select": "./src/components/select.tsx",
+    "./components/selection-bar": "./src/components/selection-bar.tsx",
     "./components/separator": "./src/components/separator.tsx",
     "./components/sheet": "./src/components/sheet.tsx",
     "./components/skeleton-card": "./src/components/skeleton-card.tsx",
@@ -67,10 +78,14 @@
     "./components/slider": "./src/components/slider.tsx",
     "./components/sliding-panels": "./src/components/sliding-panels.tsx",
     "./components/sonner": "./src/components/sonner.tsx",
+    "./components/spinner": "./src/components/spinner.tsx",
+    "./components/stepper": "./src/components/stepper.tsx",
     "./components/sticky-container": "./src/components/sticky-container.tsx",
     "./components/switch": "./src/components/switch.tsx",
     "./components/table": "./src/components/table.tsx",
     "./components/tabs": "./src/components/tabs.tsx",
+    "./components/tag-group": "./src/components/tag-group.tsx",
+    "./components/tag": "./src/components/tag.tsx",
     "./components/text": "./src/components/text.tsx",
     "./components/textarea": "./src/components/textarea.tsx",
     "./components/toast": "./src/components/toast.tsx",
@@ -109,6 +124,8 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "clean": "rm -rf dist",
     "prepublishOnly": "pnpm run build"
   },
@@ -159,29 +176,29 @@
   },
   "devDependencies": {
     "@hookform/resolvers": "^3.10.0",
-    "@radix-ui/react-accordion": "latest",
-    "@radix-ui/react-alert-dialog": "latest",
-    "@radix-ui/react-aspect-ratio": "latest",
-    "@radix-ui/react-avatar": "latest",
-    "@radix-ui/react-checkbox": "latest",
-    "@radix-ui/react-collapsible": "latest",
-    "@radix-ui/react-dialog": "latest",
-    "@radix-ui/react-dropdown-menu": "latest",
-    "@radix-ui/react-label": "latest",
-    "@radix-ui/react-popover": "latest",
-    "@radix-ui/react-progress": "latest",
-    "@radix-ui/react-radio-group": "latest",
-    "@radix-ui/react-scroll-area": "latest",
-    "@radix-ui/react-select": "latest",
-    "@radix-ui/react-separator": "latest",
-    "@radix-ui/react-slider": "latest",
-    "@radix-ui/react-slot": "latest",
-    "@radix-ui/react-switch": "latest",
-    "@radix-ui/react-tabs": "latest",
-    "@radix-ui/react-toast": "latest",
-    "@radix-ui/react-toggle": "latest",
-    "@radix-ui/react-toggle-group": "latest",
-    "@radix-ui/react-tooltip": "latest",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@storybook/addon-a11y": "^10.3.5",
     "@storybook/addon-docs": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
@@ -189,12 +206,13 @@
     "@tailwindcss/vite": "^4.2.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^6.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "latest",
+    "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.22",
     "input-otp": "^1.4.2",
@@ -203,7 +221,7 @@
     "next": "^16.1.7",
     "next-themes": "^0.4.6",
     "react": "19.2.4",
-    "react-day-picker": "latest",
+    "react-day-picker": "^9.14.0",
     "react-dom": "19.2.4",
     "react-hook-form": "7.72.0",
     "react-markdown": "^10.1.0",

package/src/components/accordion.tsx

@@ -13,7 +13,8 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("border-b border-border/50", className)}
+    data-slot="accordion-item"
+    className={cn("border-b border-border last:border-b-0", className)}
     {...props}
   />
 ));
@@ -26,14 +27,18 @@ const AccordionTrigger = React.forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       ref={ref}
+      data-slot="accordion-trigger"
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all duration-300 hover:underline [&[data-state=open]>svg]:rotate-180 glass-hover rounded-xl px-4 hover:bg-accent/20",
+        "flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium text-foreground transition-colors hover:text-foreground/80",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "[&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-300" />
+      <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
@@ -45,13 +50,13 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    data-slot="accordion-content"
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
-    <div className={cn("pb-4 pt-0 px-4", className)}>{children}</div>
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
 ));
-
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/alert-dialog.tsx

@@ -16,8 +16,9 @@ const AlertDialogOverlay = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
+    data-slot="alert-dialog-overlay"
     className={cn(
-      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-[1000] bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -34,8 +35,9 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
+      data-slot="alert-dialog-content"
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 glass p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl border border-border/50",
+        "fixed left-[50%] top-[50%] z-[1000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border border-border bg-card p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}

package/src/components/alert.tsx

@@ -4,17 +4,17 @@ import { cn } from "../lib/utils";
 import { textVariants } from "./text";
 
 const alertVariants = cva(
-  "relative w-full rounded-xl border border-border/50 px-4 py-3 text-sm glass transition-all duration-300 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  "relative w-full rounded-xl border px-4 py-3 text-sm transition-colors [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: "bg-card text-card-foreground border-border [&>svg]:text-foreground",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/10",
+          "border-destructive/40 bg-destructive/10 text-destructive [&>svg]:text-destructive",
         warning:
-          "border-yellow-500/50 text-yellow-600 dark:border-yellow-500 [&>svg]:text-yellow-600 bg-yellow-500/10",
+          "border-warning/40 bg-warning/10 text-warning [&>svg]:text-warning",
         success:
-          "border-green-500/50 text-green-600 dark:border-green-500 [&>svg]:text-green-600 bg-green-500/10",
+          "border-success/40 bg-success/10 text-success [&>svg]:text-success",
       },
     },
     defaultVariants: {
@@ -27,7 +27,13 @@ const Alert = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+  <div
+    ref={ref}
+    role="alert"
+    data-slot="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
 ));
 Alert.displayName = "Alert";
 
@@ -35,6 +41,7 @@ const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<H
   ({ className, ...props }, ref) => (
     <h5
       ref={ref}
+      data-slot="alert-title"
       className={cn(
         "mb-1",
         textVariants({ weight: "medium", leading: "none", tracking: "tight" }),
@@ -50,8 +57,13 @@ const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  <div
+    ref={ref}
+    data-slot="alert-description"
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
 ));
 AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription };
+export { Alert, AlertTitle, AlertDescription, alertVariants };

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 };