@wheelhouse/ui 0.2.3 → 0.2.5

package/dist/blocks/floating-menu-widget/floating-menu-widget.js

@@ -0,0 +1,200 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Menu } from 'lucide-react';
+import { buttonVariants } from '../../components/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../../components/sheet';
+import { useIsMobile } from '../../hooks/use-mobile';
+import { cn } from '../../lib/utils';
+const DEFAULT_INSET = 24;
+const LONG_PRESS_MS = 160;
+const LONG_PRESS_MOVE_CANCEL_PX = 22;
+function clamp(n, min, max) {
+    return Math.min(max, Math.max(min, n));
+}
+function readStoredInset(key) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== 'object')
+            return null;
+        const { right, bottom } = parsed;
+        if (typeof right !== 'number' || typeof bottom !== 'number')
+            return null;
+        return { right, bottom };
+    }
+    catch {
+        return null;
+    }
+}
+function FloatingMenuWidget({ children, menuTitle, menuDescription, triggerIcon = _jsx(Menu, { className: "size-4" }), renderTrigger, triggerNativeButton = true, defaultInset, positionStorageKey, draggable = true, open: openControlled, onOpenChange: onOpenChangeControlled, className, ...rest }) {
+    const isMobile = useIsMobile();
+    const anchorRef = React.useRef(null);
+    const planRef = React.useRef(null);
+    const longPressTimerRef = React.useRef(null);
+    const storageKeyFull = positionStorageKey ? `wheelhouse:floating-menu-widget:${positionStorageKey}` : null;
+    const [inset, setInset] = React.useState(() => {
+        const stored = storageKeyFull ? readStoredInset(storageKeyFull) : null;
+        if (stored)
+            return stored;
+        return {
+            right: defaultInset?.right ?? DEFAULT_INSET,
+            bottom: defaultInset?.bottom ?? DEFAULT_INSET,
+        };
+    });
+    const insetRef = React.useRef(inset);
+    React.useEffect(() => {
+        insetRef.current = inset;
+    }, [inset]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+    const isControlled = openControlled !== undefined;
+    const open = isControlled ? openControlled : uncontrolledOpen;
+    const prevIsMobileRef = React.useRef(undefined);
+    const setOpen = React.useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChangeControlled?.(next);
+    }, [isControlled, onOpenChangeControlled]);
+    React.useEffect(() => {
+        if (prevIsMobileRef.current !== undefined && prevIsMobileRef.current !== isMobile)
+            setOpen(false);
+        prevIsMobileRef.current = isMobile;
+    }, [isMobile, setOpen]);
+    React.useEffect(() => {
+        return () => {
+            if (longPressTimerRef.current != null) {
+                window.clearTimeout(longPressTimerRef.current);
+                longPressTimerRef.current = null;
+            }
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!isDragging || typeof document === 'undefined')
+            return;
+        const prev = document.body.style.cursor;
+        document.body.style.cursor = 'grabbing';
+        return () => {
+            document.body.style.cursor = prev;
+        };
+    }, [isDragging]);
+    const clearLongPressTimer = React.useCallback(() => {
+        if (longPressTimerRef.current != null) {
+            window.clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+    }, []);
+    const startDrag = React.useCallback((pointerId, startX, startY) => {
+        const shell = anchorRef.current;
+        if (!shell)
+            return;
+        try {
+            shell.setPointerCapture(pointerId);
+        }
+        catch {
+            return;
+        }
+        const { right, bottom } = insetRef.current;
+        planRef.current = { kind: 'drag', pointerId, startX, startY, originRight: right, originBottom: bottom };
+        setIsDragging(true);
+    }, []);
+    const onShellPointerDown = React.useCallback((event) => {
+        if (!draggable || event.button !== 0)
+            return;
+        if (!anchorRef.current?.contains(event.target))
+            return;
+        const pointerId = event.pointerId;
+        planRef.current = { kind: 'hold', pointerId, startX: event.clientX, startY: event.clientY };
+        clearLongPressTimer();
+        longPressTimerRef.current = window.setTimeout(() => {
+            longPressTimerRef.current = null;
+            const p = planRef.current;
+            if (!p || p.kind !== 'hold' || p.pointerId !== pointerId)
+                return;
+            startDrag(p.pointerId, p.startX, p.startY);
+        }, LONG_PRESS_MS);
+    }, [draggable, startDrag, clearLongPressTimer]);
+    const onShellPointerMove = React.useCallback((event) => {
+        const p = planRef.current;
+        if (!p || event.pointerId !== p.pointerId)
+            return;
+        if (p.kind === 'drag') {
+            const dx = event.clientX - p.startX;
+            const dy = event.clientY - p.startY;
+            const margin = 8;
+            const w = anchorRef.current?.offsetWidth ?? 48;
+            const h = anchorRef.current?.offsetHeight ?? 48;
+            const maxRight = Math.max(margin, window.innerWidth - w - margin);
+            const maxBottom = Math.max(margin, window.innerHeight - h - margin);
+            setInset({
+                right: clamp(p.originRight - dx, margin, maxRight),
+                bottom: clamp(p.originBottom - dy, margin, maxBottom),
+            });
+            return;
+        }
+        const dx = event.clientX - p.startX;
+        const dy = event.clientY - p.startY;
+        if (Math.hypot(dx, dy) > LONG_PRESS_MOVE_CANCEL_PX) {
+            clearLongPressTimer();
+            planRef.current = null;
+        }
+    }, [clearLongPressTimer]);
+    const onShellPointerUpOrCancel = React.useCallback((event) => {
+        clearLongPressTimer();
+        const p = planRef.current;
+        if (!p)
+            return;
+        if (p.kind === 'drag') {
+            if (event.pointerId !== p.pointerId)
+                return;
+            planRef.current = null;
+            setIsDragging(false);
+            try {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+            catch {
+                /* released */
+            }
+            setInset((cur) => {
+                if (storageKeyFull && typeof window !== 'undefined') {
+                    try {
+                        window.localStorage.setItem(storageKeyFull, JSON.stringify(cur));
+                    }
+                    catch {
+                        /* quota / private mode */
+                    }
+                }
+                return cur;
+            });
+            const shell = anchorRef.current;
+            if (shell) {
+                shell.style.pointerEvents = 'none';
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        shell.style.pointerEvents = '';
+                    });
+                });
+            }
+            return;
+        }
+        planRef.current = null;
+    }, [clearLongPressTimer, storageKeyFull]);
+    const shellClass = cn('fixed z-50 flex touch-none items-center justify-center overflow-hidden rounded-full bg-background shadow-lg ring-1 ring-foreground/5', isDragging && 'cursor-grabbing', className);
+    const shellPointer = draggable
+        ? {
+            onPointerDown: onShellPointerDown,
+            onPointerMove: onShellPointerMove,
+            onPointerUp: onShellPointerUpOrCancel,
+            onPointerCancel: onShellPointerUpOrCancel,
+        }
+        : {};
+    const triggerClass = cn(buttonVariants({ variant: 'default', size: 'icon' }), 'size-8 rounded-full border-0 shadow-none [&_svg]:opacity-90');
+    const body = _jsx("div", { className: "flex flex-col gap-1", children: children });
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx("div", { ref: anchorRef, className: shellClass, style: { right: inset.right, bottom: inset.bottom }, title: "Click to open. Press and hold to move.", ...rest, ...shellPointer, children: renderTrigger ? (_jsx(PopoverTrigger, { nativeButton: triggerNativeButton, render: renderTrigger })) : (_jsxs(PopoverTrigger, { className: triggerClass, children: [triggerIcon, _jsxs("span", { className: "sr-only", children: ["Open ", menuTitle] })] })) }), !isMobile ? (_jsx(PopoverContent, { anchor: anchorRef, align: "end", className: "max-h-[inherit] w-[min(100vw-2rem,12rem)] overflow-y-auto", positionerClassName: "max-h-[min(100dvh-2rem,24rem)]", side: "top", sideOffset: 10, children: body })) : null, isMobile ? (_jsx(Sheet, { open: open, onOpenChange: setOpen, children: _jsxs(SheetContent, { side: "bottom", className: "max-h-[85dvh] overflow-y-auto p-0", children: [_jsxs(SheetHeader, { className: "border-b border-border p-4 text-left", children: [_jsx(SheetTitle, { children: menuTitle }), menuDescription ? _jsx(SheetDescription, { children: menuDescription }) : null] }), _jsx("div", { className: "p-4 pt-2", children: body })] }) })) : null] }));
+}
+export { FloatingMenuWidget };

package/dist/blocks/floating-menu-widget/floating-menu-widget.stories.d.ts

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

package/dist/blocks/floating-menu-widget/floating-menu-widget.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-menu-widget.stories.d.ts","sourceRoot":"","sources":["../../../src/blocks/floating-menu-widget/floating-menu-widget.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,QAAA,MAAM,IAAI;;;;;;;CAOiC,CAAC;AAE5C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAqBjD,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC"}

package/dist/blocks/floating-menu-widget/floating-menu-widget.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Circle } from 'lucide-react';
+import { Button } from '../../components/button';
+import { FloatingMenuWidget } from './floating-menu-widget';
+const meta = {
+    title: 'Blocks/Floating menu widget',
+    component: FloatingMenuWidget,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+function DemoLinks() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", className: "justify-start font-normal", type: "button", children: [_jsx(Circle, { className: "size-3 opacity-70" }), "Action 01"] }), _jsxs(Button, { variant: "ghost", className: "justify-start font-normal", type: "button", children: [_jsx(Circle, { className: "size-3 opacity-70" }), "Action 02"] }), _jsxs(Button, { variant: "ghost", className: "justify-start font-normal", type: "button", children: [_jsx(Circle, { className: "size-3 opacity-70" }), "Action 03"] })] }));
+}
+export const Default = {
+    render: () => (_jsxs("div", { className: "relative min-h-[100dvh] bg-muted/30 p-8", children: [_jsx("p", { className: "max-w-md text-sm text-muted-foreground", children: "Click the circular control to open a popover on wide viewports (bottom sheet on narrow ones). Press and hold the control to drag it. Resize the preview to compare." }), _jsx(FloatingMenuWidget, { menuTitle: "Quick actions", menuDescription: "Shortcuts for this preview", positionStorageKey: "storybook-demo", children: _jsx(DemoLinks, {}) })] })),
+};
+export const NotDraggable = {
+    render: () => (_jsx("div", { className: "relative min-h-[100dvh] bg-muted/30 p-8", children: _jsx(FloatingMenuWidget, { menuTitle: "Menu", draggable: false, defaultInset: { right: 32, bottom: 32 }, children: _jsx(DemoLinks, {}) }) })),
+};

package/dist/blocks/floating-menu-widget/index.d.ts

@@ -0,0 +1,3 @@
+export { FloatingMenuWidget } from './floating-menu-widget';
+export type { FloatingMenuWidgetInset, FloatingMenuWidgetProps, FloatingMenuWidgetRenderTrigger } from './floating-menu-widget';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/floating-menu-widget/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/floating-menu-widget/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,+BAA+B,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/blocks/floating-menu-widget/index.js

@@ -0,0 +1 @@
+export { FloatingMenuWidget } from './floating-menu-widget';

package/dist/blocks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './columns';
 export * from './date-selector';
+export * from './floating-menu-widget';
 export * from './navigation';
 //# sourceMappingURL=index.d.ts.map

package/dist/blocks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC"}

package/dist/blocks/index.js

@@ -1,3 +1,4 @@
 export * from './columns';
 export * from './date-selector';
+export * from './floating-menu-widget';
 export * from './navigation';

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,4 +1,8 @@
 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: 'Components/Button',
@@ -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/data-grid/data-grid-column-filter.d.ts

@@ -0,0 +1,15 @@
+import type { Column } from '@tanstack/react-table';
+interface DataGridColumnFilterProps<TData, TValue> {
+    column?: Column<TData, TValue>;
+    title?: string;
+    options: {
+        label: string;
+        value: string;
+        icon?: React.ComponentType<{
+            className?: string;
+        }>;
+    }[];
+}
+declare function DataGridColumnFilter<TData, TValue>({ column, title, options }: DataGridColumnFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export { DataGridColumnFilter, type DataGridColumnFilterProps };
+//# sourceMappingURL=data-grid-column-filter.d.ts.map

package/dist/components/data-grid/data-grid-column-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-column-filter.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid-column-filter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AASpD,UAAU,yBAAyB,CAAC,KAAK,EAAE,MAAM;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;YAAE,SAAS,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACtD,EAAE,CAAC;CACP;AAED,iBAAS,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,yBAAyB,CAAC,KAAK,EAAE,MAAM,CAAC,2CA8GhH;AAED,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,CAAC"}

package/dist/components/data-grid/data-grid-column-filter.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { Input } from '../input';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { Separator } from '../separator';
+import { cn } from '../../lib/utils';
+import { CheckIcon, CirclePlusIcon } from 'lucide-react';
+function DataGridColumnFilter({ column, title, options }) {
+    const facets = column?.getFacetedUniqueValues();
+    const selectedValues = new Set(column?.getFilterValue());
+    const [searchQuery, setSearchQuery] = useState('');
+    const filteredOptions = useMemo(() => {
+        if (!searchQuery)
+            return options;
+        return options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
+    }, [options, searchQuery]);
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(CirclePlusIcon, { className: "size-4" }), title, selectedValues?.size > 0 && (_jsxs(_Fragment, { children: [_jsx(Separator, { orientation: "vertical", className: "mx-2 h-4" }), _jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal lg:hidden", children: selectedValues.size }), _jsx("div", { className: "hidden space-x-1 lg:flex", children: selectedValues.size > 2 ? (_jsxs(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: [selectedValues.size, " selected"] })) : (options
+                                        .filter((option) => selectedValues.has(option.value))
+                                        .map((option) => (_jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: option.label }, option.value)))) })] }))] }) }), _jsxs(PopoverContent, { className: "w-[200px] p-0", align: "start", children: [_jsx("div", { className: "p-2", children: _jsx(Input, { placeholder: title, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "h-8" }) }), _jsxs("div", { className: "max-h-[300px] overflow-y-auto", children: [filteredOptions.length === 0 ? (_jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found." })) : (_jsx("div", { className: "p-1", children: filteredOptions.map((option) => {
+                                    const isSelected = selectedValues.has(option.value);
+                                    return (_jsxs("button", { type: "button", onClick: () => {
+                                            if (isSelected) {
+                                                selectedValues.delete(option.value);
+                                            }
+                                            else {
+                                                selectedValues.add(option.value);
+                                            }
+                                            const filterValues = Array.from(selectedValues);
+                                            column?.setFilterValue(filterValues.length ? filterValues : undefined);
+                                        }, className: cn('relative flex w-full cursor-default items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm font-normal outline-hidden select-none', 'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground'), children: [_jsx("div", { className: cn('me-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary', isSelected ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible'), children: _jsx(CheckIcon, { className: "h-4 w-4" }) }), option.icon && _jsx(option.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }), _jsx("span", { children: option.label }), facets?.get(option.value) && (_jsx("span", { className: "ms-auto flex h-4 w-4 items-center justify-center font-mono text-xs", children: facets.get(option.value) }))] }, option.value));
+                                }) })), selectedValues.size > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "-mx-1 my-1 h-px bg-border" }), _jsx("div", { className: "p-1", children: _jsx("button", { type: "button", onClick: () => column?.setFilterValue(undefined), className: "relative flex w-full cursor-default items-center justify-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm font-normal outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground", children: "Clear filters" }) })] }))] })] })] }));
+}
+export { DataGridColumnFilter };

package/dist/components/data-grid/data-grid-column-header.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { Column } from '@tanstack/react-table';
+interface DataGridColumnHeaderProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {
+    column: Column<TData, TValue>;
+    /** When omitted, uses `column.columnDef.meta.headerTitle`, then a string `columnDef.header`, then `column.id`. */
+    title?: string;
+    icon?: ReactNode;
+    pinnable?: boolean;
+    filter?: ReactNode;
+    visibility?: boolean;
+}
+declare function DataGridColumnHeaderInner<TData, TValue>({ column, title, icon, className, filter, visibility }: DataGridColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare const DataGridColumnHeader: typeof DataGridColumnHeaderInner;
+export { DataGridColumnHeader, type DataGridColumnHeaderProps };
+//# sourceMappingURL=data-grid-column-header.d.ts.map