@wheelhouse/ui 0.2.2 → 0.2.4

package/dist/blocks/navigation/navigation.js

@@ -0,0 +1,98 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Bell, ChevronDown, Menu, Search, X } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage } from '../../components/avatar';
+import { Badge } from '../../components/badge';
+import { Button } from '../../components/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../components/collapsible';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuLinkItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../../components/dropdown-menu';
+import { Separator } from '../../components/separator';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../../components/sheet';
+import { cn } from '../../lib/utils';
+const navLinkClass = 'rounded-md px-3 py-1 text-sm font-medium text-muted-foreground hover:bg-primary/5 outline-none focus-visible:ring-2 focus-visible:ring-ring';
+const sheetNavLinkClass = 'flex items-center gap-2 rounded-md px-3 py-2.5 text-sm font-normal text-muted-foreground hover:bg-accent hover:text-accent-foreground';
+function primaryNavKey(entry, index) {
+    return entry.kind === 'link' ? `link-${entry.label}-${entry.href}-${index}` : `submenu-${entry.label}`;
+}
+function externalAnchorProps(external) {
+    if (!external)
+        return {};
+    return { target: '_blank', rel: 'noopener noreferrer' };
+}
+function composeNavAnchorClick(closeMobile, userOnClick) {
+    if (!closeMobile)
+        return userOnClick;
+    if (!userOnClick)
+        return () => closeMobile();
+    return (e) => {
+        userOnClick(e);
+        closeMobile();
+    };
+}
+function BrandLogo({ className, ...props }) {
+    return (_jsxs("svg", { viewBox: "0 0 282 196", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, className: cn('h-5 w-auto shrink-0', className), ...props, children: [_jsx("path", { d: "M113.84 192.61L182.63 73.4702C201.1 41.4702 178.01 1.47021 141.07 1.47021H3.4999C3.149 1.47057 2.80437 1.56325 2.50062 1.73893C2.19687 1.91462 1.94468 2.16712 1.76939 2.4711C1.5941 2.77508 1.50186 3.11983 1.50195 3.47073C1.50204 3.82163 1.59445 4.16633 1.7699 4.47021L110.38 192.61C110.556 192.913 110.808 193.165 111.112 193.34C111.415 193.515 111.76 193.607 112.11 193.607C112.46 193.607 112.805 193.515 113.108 193.34C113.412 193.165 113.664 192.913 113.84 192.61Z", fill: "#AA1DA5" }), _jsx("path", { d: "M171.33 192.61L279.93 4.5C280.106 4.19611 280.198 3.85141 280.198 3.50051C280.198 3.14961 280.106 2.80487 279.931 2.50089C279.755 2.19691 279.503 1.9444 279.2 1.76872C278.896 1.59303 278.551 1.50036 278.2 1.5H140.74C103.74 1.5 80.6402 41.5 99.1302 73.57L167.86 192.57C168.032 192.877 168.282 193.134 168.584 193.314C168.887 193.494 169.232 193.591 169.584 193.595C169.936 193.599 170.283 193.51 170.589 193.337C170.896 193.164 171.152 192.913 171.33 192.61V192.61Z", fill: "#D926D2" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M142.811 1.5H140.74C103.74 1.5 80.6402 41.5 99.1302 73.57L140.858 145.817L182.63 73.4702C200.808 41.976 178.729 2.73259 142.811 1.5Z", fill: "#71146D" })] }));
+}
+function MobileToolbarActions({ secondary }) {
+    const iconItems = secondary.filter((s) => s.kind === 'search' || s.kind === 'notifications');
+    if (iconItems.length === 0)
+        return null;
+    return (_jsx("div", { className: "flex shrink-0 items-center gap-3", children: iconItems.map((item, i) => {
+            if (item.kind === 'search') {
+                return (_jsx(Button, { type: "button", variant: "ghost", className: "size-9 p-0 [&_svg]:size-5", "aria-label": item.ariaLabel ?? 'Search', onClick: item.onClick, children: _jsx(Search, { className: "text-muted-foreground" }) }, `toolbar-search-${i}`));
+            }
+            return (_jsx(Button, { type: "button", variant: "ghost", className: "size-9 p-0 [&_svg]:size-5", "aria-label": item.ariaLabel ?? 'Notifications', onClick: item.onClick, children: _jsx(Bell, { className: "text-muted-foreground" }) }, `toolbar-bell-${i}`));
+        }) }));
+}
+function MobileSheetMenuSection({ menu, onNavigate }) {
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: "px-3 pb-1 text-xs font-medium tracking-wide text-muted-foreground uppercase", children: menu.triggerLabel }), menu.items.map((item) => (_jsx("a", { className: sheetNavLinkClass, href: item.href, ...externalAnchorProps(item.external), onClick: composeNavAnchorClick(onNavigate, item.onClick), children: item.label }, item.href)))] }));
+}
+function MobileSheetAccountSection({ account, onNavigate }) {
+    const { user } = account;
+    const initials = user.initials ??
+        user.name
+            .split(/\s+/)
+            .map((p) => p[0])
+            .join('')
+            .slice(0, 2)
+            .toUpperCase();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-3 rounded-md px-3 py-2", children: [_jsxs(Avatar, { className: "size-8 border-0 after:hidden", children: [user.avatarSrc ? _jsx(AvatarImage, { src: user.avatarSrc, alt: user.avatarAlt ?? user.name }) : null, _jsx(AvatarFallback, { children: initials })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium text-foreground", children: user.name }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: user.email })] })] }), account.sections.map((section, si) => (_jsxs(React.Fragment, { children: [si > 0 ? _jsx(Separator, { className: "my-2" }) : null, section.map((item) => (_jsx("a", { className: sheetNavLinkClass, href: item.href, ...externalAnchorProps(item.external), onClick: composeNavAnchorClick(onNavigate, item.onClick), children: item.label }, `${item.href}-${item.label}`)))] }, `user-section-${si}`))), _jsx(Separator, { className: "my-2" }), _jsx("a", { className: cn(sheetNavLinkClass, 'text-destructive-foreground hover:bg-destructive/10 hover:text-destructive-foreground'), href: account.logOut.href, ...externalAnchorProps(account.logOut.external), onClick: composeNavAnchorClick(onNavigate, account.logOut.onClick), children: account.logOut.label })] }));
+}
+function MobileNavLinks({ primary, secondary, onNavigate }) {
+    const sheetMenus = secondary.filter((s) => s.kind === 'menu');
+    const sheetAccounts = secondary.filter((s) => s.kind === 'account');
+    return (_jsxs("div", { className: "flex flex-col gap-0.5 p-4 pt-2", children: [primary.map((entry, i) => {
+                if (entry.kind === 'link') {
+                    return (_jsxs("a", { className: cn(sheetNavLinkClass, entry.active && 'text-primary'), href: entry.href, ...externalAnchorProps(entry.external), onClick: composeNavAnchorClick(onNavigate, entry.onClick), children: [entry.label, entry.badge ? _jsx(Badge, { size: "sm", children: entry.badge.label }) : null] }, primaryNavKey(entry, i)));
+                }
+                return (_jsxs(Collapsible, { className: "w-full", children: [_jsx(CollapsibleTrigger, { render: _jsxs("button", { type: "button", className: cn(sheetNavLinkClass, 'group flex w-full cursor-default justify-between font-normal text-muted-foreground hover:text-accent-foreground'), children: [_jsx("span", { children: entry.label }), _jsx(ChevronDown, { className: "size-4 shrink-0 opacity-80 transition-transform group-data-[panel-open]:rotate-180" })] }) }), _jsx(CollapsibleContent, { className: "flex flex-col gap-0.5 pt-0.5 pb-1", children: entry.items.map((sub) => (_jsx("a", { className: cn(sheetNavLinkClass, 'py-2 pl-8 text-sm'), href: sub.href, ...externalAnchorProps(sub.external), onClick: composeNavAnchorClick(onNavigate, sub.onClick), children: sub.label }, sub.href))) })] }, primaryNavKey(entry, i)));
+            }), (sheetMenus.length > 0 || sheetAccounts.length > 0) && primary.length > 0 ? _jsx(Separator, { className: "my-3" }) : null, sheetMenus.map((menu, mi) => (_jsxs(React.Fragment, { children: [mi > 0 ? _jsx(Separator, { className: "my-3" }) : null, _jsx(MobileSheetMenuSection, { menu: menu, onNavigate: onNavigate })] }, `sheet-menu-${menu.triggerLabel}-${mi}`))), sheetAccounts.map((account, ai) => (_jsxs(React.Fragment, { children: [ai > 0 || sheetMenus.length > 0 ? _jsx(Separator, { className: "my-3" }) : null, _jsx(MobileSheetAccountSection, { account: account, onNavigate: onNavigate })] }, `sheet-account-${account.triggerLabel}-${ai}`)))] }));
+}
+function DesktopSecondaryCluster({ secondary }) {
+    return (_jsx("div", { className: "flex items-center gap-2", children: secondary.map((item, i) => {
+            if (item.kind === 'search') {
+                return (_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": item.ariaLabel ?? 'Search', onClick: item.onClick, children: _jsx(Search, { className: "size-4 text-muted-foreground" }) }, `ds-search-${i}`));
+            }
+            if (item.kind === 'notifications') {
+                return (_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": item.ariaLabel ?? 'Notifications', onClick: item.onClick, children: _jsx(Bell, { className: "size-4 text-muted-foreground" }) }, `ds-bell-${i}`));
+            }
+            if (item.kind === 'menu') {
+                return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: cn(navLinkClass, 'inline-flex cursor-default items-center gap-0 border-0 bg-transparent'), children: [item.triggerLabel, _jsx(ChevronDown, { className: "ml-1 size-4 opacity-80" })] }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-48", children: item.items.map((link) => (_jsx(DropdownMenuLinkItem, { href: link.href, ...externalAnchorProps(link.external), onClick: link.onClick, children: link.label }, link.href))) })] }, `ds-menu-${item.triggerLabel}-${i}`));
+            }
+            return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: cn(navLinkClass, 'inline-flex cursor-default items-center gap-0 border-0 bg-transparent'), children: [item.triggerLabel, _jsx(ChevronDown, { className: "ml-1 size-4 opacity-80" })] }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-56", children: [_jsxs(DropdownMenuLabel, { className: "font-normal", children: [_jsx("span", { className: "block text-sm font-medium", children: item.user.name }), _jsx("span", { className: "block text-xs text-muted-foreground", children: item.user.email })] }), _jsx(DropdownMenuSeparator, {}), item.sections.map((section, si) => (_jsxs(React.Fragment, { children: [si > 0 ? _jsx(DropdownMenuSeparator, {}) : null, section.map((link) => (_jsx(DropdownMenuLinkItem, { href: link.href, ...externalAnchorProps(link.external), onClick: link.onClick, children: link.label }, `${link.href}-${link.label}`)))] }, `user-dd-${i}-${si}`))), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLinkItem, { variant: "destructive", href: item.logOut.href, ...externalAnchorProps(item.logOut.external), onClick: item.logOut.onClick, children: item.logOut.label })] })] }, `ds-account-${item.triggerLabel}-${i}`));
+        }) }));
+}
+/**
+ * Responsive app header: **`primary`** routes beside the logo; **`secondary`** is an ordered list of search, notifications, menus, and account blocks.
+ * Omit **`search`** / **`notifications`** entries to hide those icon buttons.
+ */
+export function Navigation({ className, primary, secondary, ...props }) {
+    const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
+    const sheetId = React.useId().replace(/:/g, '');
+    return (_jsxs("div", { "data-slot": "navigation", className: cn(className), ...props, children: [_jsx("nav", { className: "lg:hidden", "aria-label": "Main", children: _jsxs("div", { className: "relative flex h-14 items-center justify-between border-b border-border bg-background px-4", children: [_jsxs(Button, { type: "button", variant: "ghost", className: "relative -ml-2 h-9 w-9 shrink-0 px-0 [&_svg]:size-5", "aria-expanded": mobileMenuOpen, "aria-controls": `navigation-mobile-sheet-${sheetId}`, "aria-label": mobileMenuOpen ? 'Close menu' : 'Open menu', onClick: () => setMobileMenuOpen((open) => !open), children: [_jsx("span", { className: cn('absolute transition-all duration-300', mobileMenuOpen ? '-rotate-90 opacity-0' : 'rotate-0 opacity-100'), "aria-hidden": true, children: _jsx(Menu, {}) }), _jsx("span", { className: cn('absolute transition-all duration-300', mobileMenuOpen ? 'rotate-0 opacity-100' : '-rotate-90 opacity-0'), "aria-hidden": true, children: _jsx(X, {}) })] }), _jsx("div", { className: "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: _jsx(BrandLogo, { className: "h-6 w-auto" }) }), _jsx(MobileToolbarActions, { secondary: secondary })] }) }), _jsx(Sheet, { open: mobileMenuOpen, onOpenChange: setMobileMenuOpen, children: _jsxs(SheetContent, { id: `navigation-mobile-sheet-${sheetId}`, side: "left", showCloseButton: false, className: "flex h-[100dvh] max-h-[100dvh] w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-sm", children: [_jsxs(SheetHeader, { className: "shrink-0 border-b border-border text-left", children: [_jsx(SheetTitle, { children: "Menu" }), _jsx(SheetDescription, { className: "sr-only", children: "Primary navigation links for the application." })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: _jsx(MobileNavLinks, { primary: primary, secondary: secondary, onNavigate: () => setMobileMenuOpen(false) }) })] }) }), _jsx("nav", { className: "hidden h-12 border-b border-border bg-background lg:block", "aria-label": "Main", children: _jsxs("div", { className: "container flex h-full items-center justify-between px-6", children: [_jsxs("div", { className: "flex items-center gap-x-3", children: [_jsx(BrandLogo, {}), _jsx("div", { className: "flex items-center gap-x-1", children: primary.map((entry, i) => {
+                                        if (entry.kind === 'link') {
+                                            return (_jsxs("a", { className: cn(navLinkClass, entry.active && 'text-primary', entry.badge && 'inline-flex items-center gap-1'), href: entry.href, ...externalAnchorProps(entry.external), onClick: entry.onClick, children: [entry.label, entry.badge ? (_jsx(Badge, { variant: "outline", size: "sm", children: entry.badge.label })) : null] }, primaryNavKey(entry, i)));
+                                        }
+                                        return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: cn(navLinkClass, 'inline-flex cursor-default items-center gap-0 border-0 bg-transparent'), children: [entry.label, _jsx(ChevronDown, { className: "ml-1 size-4 opacity-80" })] }), _jsx(DropdownMenuContent, { align: "start", className: "min-w-48", children: entry.items.map((sub) => (_jsx(DropdownMenuLinkItem, { href: sub.href, ...externalAnchorProps(sub.external), onClick: sub.onClick, children: sub.label }, sub.href))) })] }, primaryNavKey(entry, i)));
+                                    }) })] }), _jsx(DesktopSecondaryCluster, { secondary: secondary })] }) })] }));
+}

package/dist/blocks/navigation/navigation.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import { Navigation } from './navigation';
+declare const meta: {
+    title: string;
+    component: typeof Navigation;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Navigation>;
+export declare const Default: Story;
+//# sourceMappingURL=navigation.stories.d.ts.map

package/dist/blocks/navigation/navigation.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.stories.d.ts","sourceRoot":"","sources":["../../../src/blocks/navigation/navigation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/blocks/navigation/navigation.stories.js

@@ -0,0 +1,16 @@
+import { navigationDemoModel } from './navigation.demo';
+import { Navigation } from './navigation';
+const meta = {
+    title: 'Blocks/Navigation',
+    component: Navigation,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        ...navigationDemoModel,
+    },
+};

package/dist/components/accordion/accordion.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
 const meta = {
-    title: 'UI/Accordion',
+    title: 'Components/Accordion',
     component: Accordion,
     tags: ['autodocs'],
     parameters: {

package/dist/components/alert/alert.stories.js

@@ -3,7 +3,7 @@ import { Alert, AlertAction, AlertDescription, AlertTitle } from './alert';
 import { Button } from '../button';
 import { AlertTriangle, Info } from 'lucide-react';
 const meta = {
-    title: 'UI/Alert',
+    title: 'Components/Alert',
     component: Alert,
     tags: ['autodocs'],
     parameters: {

package/dist/components/alert-dialog/alert-dialog.stories.js

@@ -3,7 +3,7 @@ import { AlertCircle } from 'lucide-react';
 import { Button } from '../button';
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, } from './alert-dialog';
 const meta = {
-    title: 'UI/Alert Dialog',
+    title: 'Components/Alert Dialog',
     component: AlertDialog,
     tags: ['autodocs'],
     parameters: {

package/dist/components/aspect-ratio/aspect-ratio.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AspectRatio } from './aspect-ratio';
 const meta = {
-    title: 'UI/AspectRatio',
+    title: 'Components/AspectRatio',
     component: AspectRatio,
     tags: ['autodocs'],
     parameters: {

package/dist/components/avatar/avatar.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '.';
 const meta = {
-    title: 'UI/Avatar',
+    title: 'Components/Avatar',
     component: Avatar,
     tags: ['autodocs'],
     parameters: {

package/dist/components/badge/badge.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, badgeSizeKeys, badgeVariantKeys } from './badge';
 const meta = {
-    title: 'UI/Badge',
+    title: 'Components/Badge',
     component: Badge,
     parameters: {
         layout: 'centered',

package/dist/components/breadcrumb/breadcrumb.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '.';
 const meta = {
-    title: 'UI/Breadcrumb',
+    title: 'Components/Breadcrumb',
     component: Breadcrumb,
     tags: ['autodocs'],
     parameters: {

package/dist/components/button/button.d.ts

@@ -1,19 +1,19 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariantStyles: {
-    readonly default: "border-primary bg-primary text-primary-foreground shadow-xs shadow-primary/24 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] hover:bg-primary/90 data-pressed:bg-primary/90 [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none";
-    readonly outline: "border-input bg-popover text-foreground shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-accent/50 data-pressed:bg-accent/50 dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:hover:bg-input/64 dark:data-pressed:bg-input/64 [:disabled,:active,[data-pressed]]:shadow-none";
-    readonly secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90 [:active,[data-pressed]]:bg-secondary/80";
-    readonly ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50";
-    readonly destructive: "border-destructive-foreground/10 bg-destructive/50 text-destructive-foreground shadow-xs shadow-destructive-foreground/10 hover:bg-destructive/80 data-pressed:bg-destructive/70 [:disabled,:active,[data-pressed]]:shadow-none";
-    readonly 'destructive-outline': "border-destructive-foreground/10 border-destructive-foreground/15 bg-popover text-destructive-foreground shadow-xs shadow-destructive-foreground/3 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-destructive/50 data-pressed:border-destructive-foreground/32 data-pressed:bg-destructive-foreground/8 *:data-[slot=button-loading-indicator]:text-foreground dark:border-destructive-foreground/30 dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none";
-    readonly link: "text-primary underline-offset-4 hover:underline";
+    readonly default: "border-primary bg-primary text-primary-foreground shadow-xs shadow-primary/24 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] hover:bg-primary/90 data-pressed:bg-primary/90 [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [&_[data-slot=button-loading-indicator]]:text-primary-foreground";
+    readonly outline: "border-input bg-popover text-foreground shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-accent/50 data-pressed:bg-accent/50 dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:hover:bg-input/64 dark:data-pressed:bg-input/64 [:disabled,:active,[data-pressed]]:shadow-none [&_[data-slot=button-loading-indicator]]:text-foreground";
+    readonly secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90 [:active,[data-pressed]]:bg-secondary/80 [&_[data-slot=button-loading-indicator]]:text-secondary-foreground";
+    readonly ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 [&_[data-slot=button-loading-indicator]]:text-foreground";
+    readonly destructive: "border-destructive-foreground/10 bg-destructive/50 text-destructive-foreground shadow-xs shadow-destructive-foreground/10 hover:bg-destructive/80 data-pressed:bg-destructive/70 [:disabled,:active,[data-pressed]]:shadow-none [&_[data-slot=button-loading-indicator]]:text-destructive-foreground";
+    readonly 'destructive-outline': "border-destructive-foreground/10 border-destructive-foreground/15 bg-popover text-destructive-foreground shadow-xs shadow-destructive-foreground/3 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-destructive/50 data-pressed:border-destructive-foreground/32 data-pressed:bg-destructive-foreground/8 dark:border-destructive-foreground/30 dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [&_[data-slot=button-loading-indicator]]:text-destructive-foreground";
+    readonly link: "text-primary underline-offset-4 hover:underline [&_[data-slot=button-loading-indicator]]:text-primary";
 };
 declare const buttonSizeStyles: {
-    readonly default: "h-8 gap-2 px-[calc(--spacing(3)-1px)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+    readonly default: "h-8 gap-2 px-[calc(--spacing(3)-1px)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3 sm:[&_svg:not([class*='size-'])]:size-3";
     readonly 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";
-    readonly sm: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] 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";
-    readonly lg: "h-9 gap-1.5 px-[calc(--spacing(3.5)-1px)] has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 sm:text-base";
+    readonly sm: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3.5";
+    readonly lg: "h-9 gap-1.5 px-[calc(--spacing(3.5)-1px)] has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 sm:text-base [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3.5";
     readonly icon: "size-8";
     readonly 'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3";
     readonly 'icon-sm': "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg";
@@ -28,10 +28,17 @@ declare const buttonVariants: (props?: ({
 /**
  * Props for `Button`. Inherits additional behavior from
  * [Base UI Button](https://base-ui.com/react/components/button).
+ *
+ * When `loading` is true: shows a centered {@link Spinner}, sets `data-loading` on the root,
+ * uses `text-transparent` so label and icons stay mounted but invisible (inherited color), sets
+ * explicit `color` on `[data-slot="button-loading-indicator"]` per variant, forces `disabled`,
+ * and sets `aria-busy`.
  */
 export type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & {
     className?: string;
+    /** Shows a spinner and non-interactive disabled behavior while true. */
+    loading?: boolean;
 };
-declare function Button({ className, variant, size, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function Button({ className, variant, size, loading, disabled, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export { Button, buttonVariants };
 //# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,mBAAmB;;;;;;;;CAaf,CAAC;AAEX,QAAA,MAAM,gBAAgB;;;;;;;;;CASZ,CAAC;AAEX,eAAO,MAAM,iBAAiB,EAAuC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAAE,CAAC;AAE1G,eAAO,MAAM,cAAc,EAAoC,CAAC,MAAM,OAAO,gBAAgB,CAAC,EAAE,CAAC;AAEjG,QAAA,MAAM,cAAc;;;8EAYnB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/G,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAE1F;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,QAAA,MAAM,mBAAmB;;;;;;;;CAaf,CAAC;AAEX,QAAA,MAAM,gBAAgB;;;;;;;;;CAUZ,CAAC;AAEX,eAAO,MAAM,iBAAiB,EAAuC,CAAC,MAAM,OAAO,mBAAmB,CAAC,EAAE,CAAC;AAE1G,eAAO,MAAM,cAAc,EAAoC,CAAC,MAAM,OAAO,gBAAgB,CAAC,EAAE,CAAC;AAEjG,QAAA,MAAM,cAAc;;;8EAYnB,CAAC;AAaF;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,GAC3C,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEN,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,IAAgB,EAAE,OAAe,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAqB/H;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/button/button.js

@@ -1,21 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
+import { Spinner } from '../spinner';
 const buttonVariantStyles = {
-    default: 'border-primary bg-primary text-primary-foreground shadow-xs shadow-primary/24 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] hover:bg-primary/90 data-pressed:bg-primary/90 [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none',
-    outline: 'border-input bg-popover text-foreground shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-accent/50 data-pressed:bg-accent/50 dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:hover:bg-input/64 dark:data-pressed:bg-input/64 [:disabled,:active,[data-pressed]]:shadow-none',
-    secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90 [:active,[data-pressed]]:bg-secondary/80',
-    ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
-    destructive: 'border-destructive-foreground/10 bg-destructive/50 text-destructive-foreground shadow-xs shadow-destructive-foreground/10 hover:bg-destructive/80 data-pressed:bg-destructive/70 [:disabled,:active,[data-pressed]]:shadow-none',
-    'destructive-outline': 'border-destructive-foreground/10 border-destructive-foreground/15 bg-popover text-destructive-foreground shadow-xs shadow-destructive-foreground/3 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-destructive/50 data-pressed:border-destructive-foreground/32 data-pressed:bg-destructive-foreground/8 *:data-[slot=button-loading-indicator]:text-foreground dark:border-destructive-foreground/30 dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none',
-    link: 'text-primary underline-offset-4 hover:underline',
+    default: 'border-primary bg-primary text-primary-foreground shadow-xs shadow-primary/24 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] hover:bg-primary/90 data-pressed:bg-primary/90 [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [&_[data-slot=button-loading-indicator]]:text-primary-foreground',
+    outline: 'border-input bg-popover text-foreground shadow-xs/5 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-accent/50 data-pressed:bg-accent/50 dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:hover:bg-input/64 dark:data-pressed:bg-input/64 [:disabled,:active,[data-pressed]]:shadow-none [&_[data-slot=button-loading-indicator]]:text-foreground',
+    secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90 [:active,[data-pressed]]:bg-secondary/80 [&_[data-slot=button-loading-indicator]]:text-secondary-foreground',
+    ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 [&_[data-slot=button-loading-indicator]]:text-foreground',
+    destructive: 'border-destructive-foreground/10 bg-destructive/50 text-destructive-foreground shadow-xs shadow-destructive-foreground/10 hover:bg-destructive/80 data-pressed:bg-destructive/70 [:disabled,:active,[data-pressed]]:shadow-none [&_[data-slot=button-loading-indicator]]:text-destructive-foreground',
+    'destructive-outline': 'border-destructive-foreground/10 border-destructive-foreground/15 bg-popover text-destructive-foreground shadow-xs shadow-destructive-foreground/3 not-dark:bg-clip-padding not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-destructive/50 data-pressed:border-destructive-foreground/32 data-pressed:bg-destructive-foreground/8 dark:border-destructive-foreground/30 dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [&_[data-slot=button-loading-indicator]]:text-destructive-foreground',
+    link: 'text-primary underline-offset-4 hover:underline [&_[data-slot=button-loading-indicator]]:text-primary',
 };
 const buttonSizeStyles = {
-    default: 'h-8 gap-2 px-[calc(--spacing(3)-1px)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+    default: "h-8 gap-2 px-[calc(--spacing(3)-1px)] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3 sm:[&_svg:not([class*='size-'])]:size-3",
     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.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] 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-[calc(--spacing(3.5)-1px)] has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 sm:text-base',
+    sm: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3.5",
+    lg: "h-9 gap-1.5 px-[calc(--spacing(3.5)-1px)] has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 sm:text-base [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3.5",
     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',
@@ -23,7 +24,7 @@ const buttonSizeStyles = {
 };
 export const buttonVariantKeys = Object.keys(buttonVariantStyles);
 export const buttonSizeKeys = Object.keys(buttonSizeStyles);
-const buttonVariants = cva("group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md border border-transparent text-base font-medium whitespace-nowrap transition-shadow outline-none [text-box-edge:cap_alphabetic] [text-box-trim:trim-both] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none disabled:inset-shadow-none disabled:before:shadow-none in-data-[slot=button-group]:before:rounded-none sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:shadow-none data-disabled:inset-shadow-none data-disabled:before:shadow-none [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md border border-transparent text-base font-medium whitespace-nowrap transition-shadow outline-none [text-box-edge:cap_alphabetic] [text-box-trim:trim-both] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none disabled:inset-shadow-none disabled:before:shadow-none in-data-[slot=button-group]:before:rounded-none data-loading:text-transparent data-loading:select-none sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:shadow-none data-disabled:inset-shadow-none data-disabled:before:shadow-none [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: buttonVariantStyles,
         size: buttonSizeStyles,
@@ -33,7 +34,19 @@ const buttonVariants = cva("group/button relative inline-flex shrink-0 cursor-po
         size: 'default',
     },
 });
-function Button({ className, variant = 'default', size = 'default', ...props }) {
-    return _jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
+const spinnerSizeByButtonSize = {
+    default: 'size-3 sm:size-3',
+    xs: 'size-3',
+    sm: 'size-3.5 sm:size-3.5',
+    lg: 'size-3.5 sm:size-3.5',
+    icon: 'size-4',
+    'icon-xs': 'size-3',
+    'icon-sm': 'size-3.5',
+    'icon-lg': 'size-4',
+};
+function Button({ className, variant = 'default', size = 'default', loading = false, disabled, children, ...props }) {
+    const isDisabled = Boolean(disabled || loading);
+    const spinnerClass = spinnerSizeByButtonSize[size ?? 'default'];
+    return (_jsxs(ButtonPrimitive, { "data-slot": "button", "data-loading": loading || undefined, className: cn(buttonVariants({ variant, size, className })), disabled: isDisabled, "aria-busy": loading || undefined, ...props, children: [children, loading ? (_jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", "aria-hidden": true, children: _jsx(Spinner, { "data-slot": "button-loading-indicator", "aria-hidden": true, className: cn('shrink-0', spinnerClass) }) })) : null] }));
 }
 export { Button, buttonVariants };

package/dist/components/button/button.stories.d.ts

@@ -13,4 +13,15 @@ export declare const DestructiveOutline: Story;
 export declare const Link: Story;
 export declare const Small: Story;
 export declare const Large: Story;
+export declare const Icon: Story;
+export declare const WithIcon: Story;
+export declare const Rounded: Story;
+export declare const Loading: Story;
+export declare const LoadingInteractive: Story;
+export declare const LoadingWithIcon: Story;
+export declare const LoadingIconOnly: Story;
+/** Manual composition when you need a custom indicator or copy outside the built-in `loading` prop. */
+export declare const Spinner: Story;
+export declare const ButtonGroup: Story;
+export declare const AsLink: Story;
 //# sourceMappingURL=button.stories.d.ts.map

package/dist/components/button/button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAqC,MAAM,UAAU,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA2B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgDnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAGvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAGhC,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAGlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC"}
+{"version":3,"file":"button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EAAE,MAAM,EAAqC,MAAM,UAAU,CAAC;AAErE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA4B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgDnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAGvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAGhC,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAGlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAuBlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAiB7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAqB7B,CAAC;AAEF,uGAAuG;AACvG,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAiBzB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAepB,CAAC"}

package/dist/components/button/button.stories.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChevronRight, Download, Plus } from 'lucide-react';
+import { ButtonGroup as ButtonGroupRoot } from '../button-group';
+import { Spinner as LoadingSpinner } from '../spinner';
 import { Button, buttonSizeKeys, buttonVariantKeys } from './button';
 const meta = {
-    title: 'UI/Button',
+    title: 'Components/Button',
     component: Button,
     parameters: {
         layout: 'centered',
@@ -26,6 +30,7 @@ const meta = {
             control: 'select',
             options: buttonSizeKeys,
         },
+        loading: { control: 'boolean' },
     },
 };
 export default meta;
@@ -78,3 +83,82 @@ export const Large = {
     tags: ['!autodocs'],
     args: { size: 'lg' },
 };
+export const Icon = {
+    parameters: {
+        layout: 'centered',
+    },
+    render: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Button, { variant: "outline", size: "icon-xs", "aria-label": "Add", children: _jsx(Plus, {}) }), _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Add", children: _jsx(Plus, {}) }), _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Add", children: _jsx(Plus, {}) }), _jsx(Button, { variant: "outline", size: "icon-lg", "aria-label": "Add", children: _jsx(Plus, {}) }), _jsx(Button, { variant: "default", size: "icon", "aria-label": "Add", children: _jsx(Plus, {}) })] })),
+};
+export const WithIcon = {
+    parameters: {
+        layout: 'centered',
+    },
+    render: () => (_jsxs("div", { className: "flex flex-col items-start gap-3", children: [_jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Download, { "data-icon": "inline-start" }), "Download"] }), _jsxs(Button, { variant: "default", size: "sm", children: ["Continue", _jsx(ChevronRight, { "data-icon": "inline-end" })] })] })),
+};
+export const Rounded = {
+    parameters: {
+        layout: 'centered',
+    },
+    render: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Button, { className: "rounded-full", size: "sm", children: "Pill default" }), _jsx(Button, { variant: "outline", className: "rounded-full", size: "sm", children: "Pill outline" }), _jsx(Button, { variant: "secondary", className: "rounded-full", size: "sm", children: "Pill secondary" })] })),
+};
+export const Loading = {
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        loading: true,
+        children: 'Submit',
+        variant: 'default',
+        size: 'sm',
+    },
+};
+export const LoadingInteractive = {
+    parameters: {
+        layout: 'centered',
+        controls: { disable: true },
+    },
+    render: function LoadingInteractiveRender() {
+        const [isLoading, setIsLoading] = useState(false);
+        return (_jsx(Button, { loading: isLoading, onClick: () => {
+                setIsLoading(true);
+                window.setTimeout(() => {
+                    setIsLoading(false);
+                }, 1200);
+            }, children: "Submit" }));
+    },
+};
+export const LoadingWithIcon = {
+    tags: ['!autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    render: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs(Button, { variant: "outline", size: "sm", loading: true, children: [_jsx(Download, { "data-icon": "inline-start" }), "Download"] }), _jsxs(Button, { variant: "default", size: "sm", loading: true, children: ["Continue", _jsx(ChevronRight, { "data-icon": "inline-end" })] })] })),
+};
+export const LoadingIconOnly = {
+    tags: ['!autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    render: () => (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Button, { variant: "outline", size: "icon-xs", "aria-label": "Saving", loading: true, children: _jsx(Plus, { "aria-hidden": true }) }), _jsx(Button, { variant: "outline", size: "icon-sm", "aria-label": "Saving", loading: true, children: _jsx(Plus, { "aria-hidden": true }) }), _jsx(Button, { variant: "outline", size: "icon", "aria-label": "Saving", loading: true, children: _jsx(Plus, { "aria-hidden": true }) }), _jsx(Button, { variant: "outline", size: "icon-lg", "aria-label": "Saving", loading: true, children: _jsx(Plus, { "aria-hidden": true }) })] })),
+};
+/** Manual composition when you need a custom indicator or copy outside the built-in `loading` prop. */
+export const Spinner = {
+    parameters: {
+        layout: 'centered',
+    },
+    render: () => (_jsxs("div", { className: "flex flex-col items-start gap-3", children: [_jsxs(Button, { variant: "outline", size: "sm", disabled: true, "aria-busy": "true", children: [_jsx("span", { "data-slot": "button-loading-indicator", className: "inline-flex", children: _jsx(LoadingSpinner, { className: "size-4", "aria-hidden": true }) }), "Saving\u2026"] }), _jsxs(Button, { variant: "destructive-outline", size: "sm", disabled: true, "aria-busy": "true", children: [_jsx("span", { "data-slot": "button-loading-indicator", className: "inline-flex", children: _jsx(LoadingSpinner, { className: "size-4", "aria-hidden": true }) }), "Removing\u2026"] })] })),
+};
+export const ButtonGroup = {
+    parameters: {
+        layout: 'centered',
+    },
+    render: () => (_jsxs(ButtonGroupRoot, { orientation: "horizontal", children: [_jsx(Button, { variant: "outline", size: "sm", children: "List" }), _jsx(Button, { variant: "outline", size: "sm", children: "Board" }), _jsx(Button, { variant: "outline", size: "sm", children: "Timeline" })] })),
+};
+export const AsLink = {
+    parameters: {
+        layout: 'centered',
+    },
+    render: () => (_jsx(Button, { variant: "link", size: "sm", nativeButton: false, 
+        // eslint-disable-next-line jsx-a11y/anchor-has-content -- label provided as children
+        render: _jsx("a", { href: "https://example.com", rel: "noreferrer" }), children: "Visit example.com" })),
+};

package/dist/components/button-group/button-group.d.ts

@@ -1,13 +1,19 @@
+import type { ComponentProps } from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { type VariantProps } from 'class-variance-authority';
 import { Separator } from '../separator';
+declare const buttonGroupTextVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const buttonGroupVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Props for `ButtonGroup`. */
-export type ButtonGroupProps = React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>;
+export type ButtonGroupProps = ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>;
 declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+/** Props for `ButtonGroupText`. */
+export type ButtonGroupTextProps = useRender.ComponentProps<'div'> & VariantProps<typeof buttonGroupTextVariants>;
+declare function ButtonGroupText({ className, size, render, ...props }: ButtonGroupTextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupTextVariants, buttonGroupVariants };
 //# sourceMappingURL=button-group.d.ts.map

package/dist/components/button-group/button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,QAAA,MAAM,mBAAmB;;8EAexB,CAAC;AAEF,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEtG,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAIzF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,8FAiBxF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,WAAwB,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAStH;AAED,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,QAAA,MAAM,uBAAuB;;8EAW3B,CAAC;AAEH,QAAA,MAAM,mBAAmB;;8EAexB,CAAC;AAEF,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEhG,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAIzF;AAED,mCAAmC;AACnC,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAElH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,8FAcnF;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,WAAwB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,2CAShH;AAED,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/button-group/button-group.js

@@ -4,6 +4,18 @@ import { useRender } from '@base-ui/react/use-render';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 import { Separator } from '../separator';
+const buttonGroupTextVariants = cva('flex shrink-0 items-center gap-2 rounded-lg border bg-muted font-medium [&_svg]:pointer-events-none', {
+    variants: {
+        size: {
+            sm: "h-7 px-2 text-[0.8rem] leading-none [&_svg:not([class*='size-'])]:size-3.5",
+            default: "min-h-8 px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+            lg: "h-9 px-3 text-base [&_svg:not([class*='size-'])]:size-4",
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
 const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
     variants: {
         orientation: {
@@ -18,11 +30,11 @@ const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relati
 function ButtonGroup({ className, orientation = 'horizontal', ...props }) {
     return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
 }
-function ButtonGroupText({ className, render, ...props }) {
+function ButtonGroupText({ className, size, render, ...props }) {
     return useRender({
         defaultTagName: 'div',
         props: mergeProps({
-            className: cn("flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+            className: cn(buttonGroupTextVariants({ size }), className),
         }, props),
         render,
         state: {
@@ -33,4 +45,4 @@ function ButtonGroupText({ className, render, ...props }) {
 function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }) {
     return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn('relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto', className), ...props }));
 }
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupTextVariants, buttonGroupVariants };

package/dist/components/button-group/button-group.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../button';
 import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from './button-group';
 const meta = {
-    title: 'UI/ButtonGroup',
+    title: 'Components/ButtonGroup',
     component: ButtonGroup,
     parameters: {
         layout: 'centered',

package/dist/components/button-group/index.d.ts

@@ -1,3 +1,3 @@
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './button-group';
-export type { ButtonGroupProps } from './button-group';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupTextVariants, buttonGroupVariants } from './button-group';
+export type { ButtonGroupProps, ButtonGroupTextProps } from './button-group';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACzG,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,eAAe,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAClI,YAAY,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/button-group/index.js

@@ -1 +1 @@
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './button-group';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupTextVariants, buttonGroupVariants } from './button-group';