@wheelhouse/ui 0.2.14 → 0.3.0

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

@@ -5,6 +5,7 @@ export type FloatingMenuWidgetInset = {
     right: number;
     bottom: number;
 };
+export type FloatingMenuWidgetCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type FloatingMenuWidgetProps = Omit<React.ComponentProps<'div'>, 'children'> & {
     children: React.ReactNode;
     menuTitle: string;
@@ -18,9 +19,11 @@ export type FloatingMenuWidgetProps = Omit<React.ComponentProps<'div'>, 'childre
     positionStorageKey?: string;
     /** Long-press to drag. */
     draggable?: boolean;
+    /** After a drag, glide to the nearest viewport corner (resting at `defaultInset` from its edges) and stay pinned there on resize. */
+    snapToCorners?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 };
-declare function FloatingMenuWidget({ children, menuTitle, menuDescription, triggerIcon, renderTrigger, triggerNativeButton, defaultInset, positionStorageKey, draggable, open: openControlled, onOpenChange: onOpenChangeControlled, className, ...rest }: FloatingMenuWidgetProps): import("react/jsx-runtime").JSX.Element;
+declare function FloatingMenuWidget({ children, menuTitle, menuDescription, triggerIcon, renderTrigger, triggerNativeButton, defaultInset, positionStorageKey, draggable, snapToCorners, open: openControlled, onOpenChange: onOpenChangeControlled, className, ...rest }: FloatingMenuWidgetProps): import("react/jsx-runtime").JSX.Element;
 export { FloatingMenuWidget };
 //# sourceMappingURL=floating-menu-widget.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"floating-menu-widget.d.ts","sourceRoot":"","sources":["../../../src/blocks/floating-menu-widget/floating-menu-widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAA2C,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAS7G,MAAM,MAAM,+BAA+B,GAAG,WAAW,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEzF,MAAM,MAAM,uBAAuB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,+BAA+B,CAAC;IAChD,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAChD,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AA0BF,iBAAS,kBAAkB,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,eAAe,EACf,WAAyC,EACzC,aAAa,EACb,mBAA0B,EAC1B,YAAY,EACZ,kBAAkB,EAClB,SAAgB,EAChB,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,SAAS,EACT,GAAG,IAAI,EACV,EAAE,uBAAuB,2CAwOzB;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"floating-menu-widget.d.ts","sourceRoot":"","sources":["../../../src/blocks/floating-menu-widget/floating-menu-widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAA2C,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAS7G,MAAM,MAAM,+BAA+B,GAAG,WAAW,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAEzF,MAAM,MAAM,uBAAuB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAIjG,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,+BAA+B,CAAC;IAChD,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAChD,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qIAAqI;IACrI,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AA2CF,iBAAS,kBAAkB,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,eAAe,EACf,WAAyC,EACzC,aAAa,EACb,mBAA0B,EAC1B,YAAY,EACZ,kBAAkB,EAClB,SAAgB,EAChB,aAAqB,EACrB,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,sBAAsB,EACpC,SAAS,EACT,GAAG,IAAI,EACV,EAAE,uBAAuB,2CAwQzB;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

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

@@ -10,10 +10,11 @@ import { cn } from '../../lib/utils';
 const DEFAULT_INSET = 24;
 const LONG_PRESS_MS = 160;
 const LONG_PRESS_MOVE_CANCEL_PX = 22;
+const CORNERS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 function clamp(n, min, max) {
     return Math.min(max, Math.max(min, n));
 }
-function readStoredInset(key) {
+function readStoredPosition(key) {
     if (typeof window === 'undefined')
         return null;
     try {
@@ -23,29 +24,48 @@ function readStoredInset(key) {
         const parsed = JSON.parse(raw);
         if (!parsed || typeof parsed !== 'object')
             return null;
-        const { right, bottom } = parsed;
+        const { right, bottom, corner } = parsed;
         if (typeof right !== 'number' || typeof bottom !== 'number')
             return null;
-        return { right, bottom };
+        return { right, bottom, corner: corner && CORNERS.includes(corner) ? corner : undefined };
     }
     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 }) {
+function nearestCorner(rect) {
+    const vertical = rect.top + rect.height / 2 < window.innerHeight / 2 ? 'top' : 'bottom';
+    const horizontal = rect.left + rect.width / 2 < window.innerWidth / 2 ? 'left' : 'right';
+    return `${vertical}-${horizontal}`;
+}
+/** Resting `right`/`bottom` inset for a corner, given the widget size and the per-edge resting distance. */
+function cornerInset(corner, width, height, rest) {
+    const margin = 8;
+    return {
+        right: corner.endsWith('right') ? rest.right : Math.max(margin, window.innerWidth - width - rest.right),
+        bottom: corner.startsWith('bottom') ? rest.bottom : Math.max(margin, window.innerHeight - height - rest.bottom),
+    };
+}
+function FloatingMenuWidget({ children, menuTitle, menuDescription, triggerIcon = _jsx(Menu, { className: "size-4" }), renderTrigger, triggerNativeButton = true, defaultInset, positionStorageKey, draggable = true, snapToCorners = false, 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 restRight = defaultInset?.right ?? DEFAULT_INSET;
+    const restBottom = defaultInset?.bottom ?? DEFAULT_INSET;
     const [inset, setInset] = React.useState(() => {
-        const stored = storageKeyFull ? readStoredInset(storageKeyFull) : null;
+        const stored = storageKeyFull ? readStoredPosition(storageKeyFull) : null;
         if (stored)
-            return stored;
-        return {
-            right: defaultInset?.right ?? DEFAULT_INSET,
-            bottom: defaultInset?.bottom ?? DEFAULT_INSET,
-        };
+            return { right: stored.right, bottom: stored.bottom };
+        return { right: restRight, bottom: restBottom };
+    });
+    const [corner, setCorner] = React.useState(() => {
+        if (!snapToCorners)
+            return null;
+        const stored = storageKeyFull ? readStoredPosition(storageKeyFull) : null;
+        // A stored inset without a corner predates snapping — leave it free until the next drag.
+        return stored ? (stored.corner ?? null) : 'bottom-right';
     });
     const insetRef = React.useRef(inset);
     React.useEffect(() => {
@@ -74,6 +94,21 @@ function FloatingMenuWidget({ children, menuTitle, menuDescription, triggerIcon
             }
         };
     }, []);
+    // While pinned to a corner, keep the resting inset exact across mounts and window resizes
+    // (top/left corners are expressed via right/bottom, so they drift without this).
+    React.useLayoutEffect(() => {
+        if (!snapToCorners || !corner)
+            return;
+        const reposition = () => {
+            const shell = anchorRef.current;
+            if (!shell)
+                return;
+            setInset(cornerInset(corner, shell.offsetWidth, shell.offsetHeight, { right: restRight, bottom: restBottom }));
+        };
+        reposition();
+        window.addEventListener('resize', reposition);
+        return () => window.removeEventListener('resize', reposition);
+    }, [snapToCorners, corner, restRight, restBottom]);
     React.useEffect(() => {
         if (!isDragging || typeof document === 'undefined')
             return;
@@ -101,6 +136,7 @@ function FloatingMenuWidget({ children, menuTitle, menuDescription, triggerIcon
         }
         const { right, bottom } = insetRef.current;
         planRef.current = { kind: 'drag', pointerId, startX, startY, originRight: right, originBottom: bottom };
+        setCorner(null);
         setIsDragging(true);
     }, []);
     const onShellPointerDown = React.useCallback((event) => {
@@ -160,18 +196,30 @@ function FloatingMenuWidget({ children, menuTitle, menuDescription, triggerIcon
             catch {
                 /* released */
             }
-            setInset((cur) => {
-                if (storageKeyFull && typeof window !== 'undefined') {
-                    try {
-                        window.localStorage.setItem(storageKeyFull, JSON.stringify(cur));
-                    }
-                    catch {
-                        /* quota / private mode */
-                    }
+            const persist = (value) => {
+                if (!storageKeyFull || typeof window === 'undefined')
+                    return;
+                try {
+                    window.localStorage.setItem(storageKeyFull, JSON.stringify(value));
                 }
-                return cur;
-            });
+                catch {
+                    /* quota / private mode */
+                }
+            };
             const shell = anchorRef.current;
+            if (snapToCorners && shell) {
+                const target = nearestCorner(shell.getBoundingClientRect());
+                const targetInset = cornerInset(target, shell.offsetWidth, shell.offsetHeight, { right: restRight, bottom: restBottom });
+                setCorner(target);
+                setInset(targetInset);
+                persist({ ...targetInset, corner: target });
+            }
+            else {
+                setInset((cur) => {
+                    persist(cur);
+                    return cur;
+                });
+            }
             if (shell) {
                 shell.style.pointerEvents = 'none';
                 requestAnimationFrame(() => {
@@ -183,8 +231,8 @@ function FloatingMenuWidget({ children, menuTitle, menuDescription, triggerIcon
             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);
+    }, [clearLongPressTimer, storageKeyFull, snapToCorners, restRight, restBottom]);
+    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', snapToCorners && !isDragging && 'transition-[right,bottom] duration-300 ease-out', isDragging && 'cursor-grabbing', className);
     const shellPointer = draggable
         ? {
             onPointerDown: onShellPointerDown,

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

@@ -11,5 +11,6 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof FloatingMenuWidget>;
 export declare const Default: Story;
+export declare const SnapToCorners: 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

@@ -1 +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"}
+{"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,aAAa,EAAE,KAY3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC"}

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

@@ -17,6 +17,9 @@ function DemoLinks() {
 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 SnapToCorners = {
+    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: "Press and hold the control, drag it anywhere, and release \u2014 it glides to the nearest viewport corner and stays pinned there when the window resizes." }), _jsx(FloatingMenuWidget, { menuTitle: "Quick actions", snapToCorners: true, positionStorageKey: "storybook-snap-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

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

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

@@ -1 +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"}
+{"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,wBAAwB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,+BAA+B,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/avatar/avatar.js

@@ -11,7 +11,7 @@ function AvatarImage({ className, ...props }) {
     return _jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full rounded-full object-cover', className), ...props });
 }
 function AvatarFallback({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('flex size-full items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground group-data-[size=sm]/avatar:text-xxs', className), ...props }));
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('group-data-[size=sm]/avatar:text-xxs flex size-full items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground', className), ...props }));
 }
 function AvatarBadge({ className, ...props }) {
     return (_jsx("span", { "data-slot": "avatar-badge", className: cn('absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none', 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden', 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2', 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2', className), ...props }));

package/dist/components/badge/badge.d.ts

@@ -19,9 +19,9 @@ declare const badgeVariantStyles: {
     readonly 'destructive-outline': "border-border bg-background text-destructive-foreground dark:bg-input/30";
 };
 declare const badgeSizeStyles: {
-    readonly default: "h-5.5 min-w-5.5 px-[calc(--spacing(1)-0px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs";
-    readonly lg: "h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm";
-    readonly sm: "h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]";
+    readonly default: "h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]";
+    readonly lg: "h-5.5 min-w-5.5 px-[calc(--spacing(1)-0px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs";
+    readonly sm: "h-4.5 min-w-4.5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-3.5 sm:min-w-3.5 sm:text-[.625rem]";
 };
 export declare const badgeVariantKeys: (keyof typeof badgeVariantStyles)[];
 export declare const badgeSizeKeys: (keyof typeof badgeSizeStyles)[];

package/dist/components/badge/badge.js

@@ -21,9 +21,9 @@ const badgeVariantStyles = {
     'destructive-outline': 'border-border bg-background text-destructive-foreground dark:bg-input/30',
 };
 const badgeSizeStyles = {
-    default: 'h-5.5 min-w-5.5 px-[calc(--spacing(1)-0px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs',
-    lg: 'h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm',
-    sm: 'h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]',
+    default: 'h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]',
+    lg: 'h-5.5 min-w-5.5 px-[calc(--spacing(1)-0px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs',
+    sm: 'h-4.5 min-w-4.5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-3.5 sm:min-w-3.5 sm:text-[.625rem]',
 };
 export const badgeVariantKeys = Object.keys(badgeVariantStyles);
 export const badgeSizeKeys = Object.keys(badgeSizeStyles);

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

@@ -10,14 +10,14 @@ declare const buttonVariantStyles: {
     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)] text-sm has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_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-sm 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";
-    readonly lg: "h-9 gap-1.5 px-[calc(--spacing(3.5)-1px)] text-base has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5";
-    readonly icon: "size-8 text-sm";
-    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";
-    readonly 'icon-lg': "size-9";
+    readonly default: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-sm 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";
+    readonly xs: "h-5 gap-1 rounded-[min(var(--radius-md),8px)] px-1.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&_svg:not([class*='size-'])]:size-2.5";
+    readonly sm: "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 lg: "h-8 gap-2 px-[calc(--spacing(3)-1px)] text-sm has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3";
+    readonly icon: "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg";
+    readonly 'icon-xs': "size-5 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-2.5";
+    readonly 'icon-sm': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3";
+    readonly 'icon-lg': "size-8 text-sm";
 };
 export declare const buttonVariantKeys: (keyof typeof buttonVariantStyles)[];
 export declare const buttonSizeKeys: (keyof typeof buttonSizeStyles)[];

package/dist/components/button/button.js

@@ -13,14 +13,14 @@ const buttonVariantStyles = {
     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)] text-sm has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_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-sm 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",
-    lg: "h-9 gap-1.5 px-[calc(--spacing(3.5)-1px)] text-base has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
-    icon: 'size-8 text-sm',
-    'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-    'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
-    'icon-lg': 'size-9',
+    default: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-sm 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",
+    xs: "h-5 gap-1 rounded-[min(var(--radius-md),8px)] px-1.5 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&_svg:not([class*='size-'])]:size-2.5",
+    sm: "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",
+    lg: "h-8 gap-2 px-[calc(--spacing(3)-1px)] text-sm has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+    icon: 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+    'icon-xs': "size-5 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-2.5",
+    'icon-sm': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+    'icon-lg': 'size-8 text-sm',
 };
 export const buttonVariantKeys = Object.keys(buttonVariantStyles);
 export const buttonSizeKeys = Object.keys(buttonSizeStyles);
@@ -35,13 +35,13 @@ const buttonVariants = cva("group/button relative inline-flex shrink-0 cursor-po
     },
 });
 const spinnerSizeByButtonSize = {
-    default: 'size-3',
-    xs: 'size-3',
-    sm: 'size-3.5',
-    lg: 'size-3.5',
-    icon: 'size-4',
-    'icon-xs': 'size-3',
-    'icon-sm': 'size-3.5',
+    default: 'size-3.5',
+    xs: 'size-2.5',
+    sm: 'size-3',
+    lg: 'size-3',
+    icon: 'size-3.5',
+    'icon-xs': 'size-2.5',
+    'icon-sm': 'size-3',
     'icon-lg': 'size-4',
 };
 function Button({ className, variant = 'default', size = 'default', loading = false, disabled, children, ...props }) {

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

@@ -7,9 +7,9 @@ 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-sm leading-none [&_svg:not([class*='size-'])]:size-3.5",
-            default: "min-h-8 px-2.5 text-base [&_svg:not([class*='size-'])]:size-4",
-            lg: "h-9 px-3 text-base [&_svg:not([class*='size-'])]:size-4",
+            sm: "h-6 px-1.5 text-xs leading-none [&_svg:not([class*='size-'])]:size-3",
+            default: "min-h-7 px-2 text-sm leading-none [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "min-h-8 px-2.5 text-base [&_svg:not([class*='size-'])]:size-4",
         },
     },
     defaultVariants: {

package/dist/components/combobox/combobox.js

@@ -52,7 +52,7 @@ function ComboboxChips({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn('flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40', className), ...props }));
 }
 function ComboboxChip({ className, children, showRemove = true, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn('flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0', className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(X, { className: "pointer-events-none" }) }))] }));
+    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn('flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0', className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-sm" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(X, { className: "pointer-events-none" }) }))] }));
 }
 function ComboboxChipsInput({ className, ...props }) {
     return _jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn('min-w-16 flex-1 outline-none', className), ...props });

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

@@ -17,7 +17,7 @@ function DataGridColumnFilter({ column, title, options }) {
             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
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { variant: "outline", 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) }) }), _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);

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

@@ -126,7 +126,7 @@ function DataGridColumnHeaderInner({ column, title, icon, className, filter, vis
         columnVisibilityKey, // Needed to update checkbox states when visibility changes
     ]);
     if (hasControls) {
-        return (_jsxs("div", { className: "flex h-full items-center justify-between gap-1.5", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(Button, { variant: "ghost", className: headerButtonClassName, disabled: isLoading || recordCount === 0, children: [icon && icon, resolvedTitle, sortIcon] }) }), _jsx(DropdownMenuContent, { className: "w-40", align: "start", children: menuItems })] }), props.tableLayout?.columnsPinnable && canPin && isPinned && (_jsx(Button, { size: "icon-sm", variant: "ghost", className: "-me-1 size-7 rounded-md", onClick: () => column.pin(false), "aria-label": `Unpin ${resolvedTitle} column`, title: `Unpin ${resolvedTitle} column`, children: _jsx(PinOffIcon, { className: "size-3.5! opacity-50!", "aria-hidden": "true" }) }))] }));
+        return (_jsxs("div", { className: "flex h-full items-center justify-between gap-1.5", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(Button, { variant: "ghost", className: headerButtonClassName, disabled: isLoading || recordCount === 0, children: [icon && icon, resolvedTitle, sortIcon] }) }), _jsx(DropdownMenuContent, { className: "w-40", align: "start", children: menuItems })] }), props.tableLayout?.columnsPinnable && canPin && isPinned && (_jsx(Button, { size: "icon", variant: "ghost", className: "-me-1 size-7 rounded-md", onClick: () => column.pin(false), "aria-label": `Unpin ${resolvedTitle} column`, title: `Unpin ${resolvedTitle} column`, children: _jsx(PinOffIcon, { className: "size-3.5! opacity-50!", "aria-hidden": "true" }) }))] }));
     }
     if (canSort || (props.tableLayout?.columnsResizable && canResize)) {
         return (_jsx("div", { className: "flex h-full items-center", children: _jsxs(Button, { variant: "ghost", className: headerButtonClassName, disabled: isLoading || recordCount === 0, onClick: handleSort, children: [icon && icon, resolvedTitle, sortIcon] }) }));

package/dist/components/data-grid/data-grid-pagination.js

@@ -44,7 +44,7 @@ function DataGridPagination(props) {
     const renderPageButtons = () => {
         const buttons = [];
         for (let i = currentGroupStart; i < currentGroupEnd; i++) {
-            buttons.push(_jsx(Button, { size: "icon-sm", variant: "ghost", className: cn(btnBaseClasses, 'text-muted-foreground', {
+            buttons.push(_jsx(Button, { size: "icon", variant: "ghost", className: cn(btnBaseClasses, 'text-muted-foreground', {
                     'bg-accent text-accent-foreground': pageIndex === i,
                 }), onClick: () => {
                     if (pageIndex !== i) {
@@ -57,20 +57,20 @@ function DataGridPagination(props) {
     // Render a "previous" ellipsis button if there are previous pages to show
     const renderEllipsisPrevButton = () => {
         if (currentGroupStart > 0) {
-            return (_jsx(Button, { size: "icon-sm", className: btnBaseClasses, variant: "ghost", onClick: () => table.setPageIndex(currentGroupStart - 1), children: mergedProps.ellipsisText }));
+            return (_jsx(Button, { size: "icon", className: btnBaseClasses, variant: "ghost", onClick: () => table.setPageIndex(currentGroupStart - 1), children: mergedProps.ellipsisText }));
         }
         return null;
     };
     // Render a "next" ellipsis button if there are more pages to show after the current group
     const renderEllipsisNextButton = () => {
         if (currentGroupEnd < pageCount) {
-            return (_jsx(Button, { className: btnBaseClasses, variant: "ghost", size: "icon-sm", onClick: () => table.setPageIndex(currentGroupEnd), children: mergedProps.ellipsisText }));
+            return (_jsx(Button, { className: btnBaseClasses, variant: "ghost", size: "icon", onClick: () => table.setPageIndex(currentGroupEnd), children: mergedProps.ellipsisText }));
         }
         return null;
     };
     return (_jsxs("div", { "data-slot": "data-grid-pagination", className: cn('flex grow flex-col flex-wrap items-center justify-between gap-2.5 py-2.5 sm:flex-row sm:py-0', mergedProps?.className), children: [_jsx("div", { className: "order-2 flex flex-wrap items-center space-x-2.5 pb-2.5 sm:order-1 sm:pb-0", children: isLoading ? (mergedProps?.sizesSkeleton) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm text-muted-foreground", children: mergedProps.rowsPerPageLabel }), _jsxs(Select, { value: `${pageSize}`, onValueChange: (value) => {
                                 const newPageSize = Number(value);
                                 table.setPageSize(newPageSize);
-                            }, children: [_jsx(SelectTrigger, { className: "w-14", size: "sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { side: "top", className: "min-w-18", children: mergedProps?.sizes?.map((size) => (_jsx(SelectItem, { value: `${size}`, children: size }, size))) })] })] })) }), _jsx("div", { className: "order-1 flex flex-col items-center justify-center gap-2.5 pt-2.5 sm:order-2 sm:flex-row sm:justify-end sm:pt-0", children: isLoading ? (mergedProps?.infoSkeleton) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "order-2 text-sm text-nowrap text-muted-foreground sm:order-1", children: paginationInfo }), pageCount > 1 && (_jsxs("div", { className: "order-1 flex items-center space-x-1 sm:order-2", children: [_jsxs(Button, { size: "icon-sm", variant: "ghost", className: btnArrowClasses, onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [_jsx("span", { className: "sr-only", children: mergedProps.previousPageLabel }), _jsx(ChevronLeftIcon, { className: "size-4" })] }), renderEllipsisPrevButton(), renderPageButtons(), renderEllipsisNextButton(), _jsxs(Button, { size: "icon-sm", variant: "ghost", className: btnArrowClasses, onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [_jsx("span", { className: "sr-only", children: mergedProps.nextPageLabel }), _jsx(ChevronRightIcon, { className: "size-4" })] })] }))] })) })] }));
+                            }, children: [_jsx(SelectTrigger, { className: "w-14", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { side: "top", className: "min-w-18", children: mergedProps?.sizes?.map((size) => (_jsx(SelectItem, { value: `${size}`, children: size }, size))) })] })] })) }), _jsx("div", { className: "order-1 flex flex-col items-center justify-center gap-2.5 pt-2.5 sm:order-2 sm:flex-row sm:justify-end sm:pt-0", children: isLoading ? (mergedProps?.infoSkeleton) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "order-2 text-sm text-nowrap text-muted-foreground sm:order-1", children: paginationInfo }), pageCount > 1 && (_jsxs("div", { className: "order-1 flex items-center space-x-1 sm:order-2", children: [_jsxs(Button, { size: "icon", variant: "ghost", className: btnArrowClasses, onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [_jsx("span", { className: "sr-only", children: mergedProps.previousPageLabel }), _jsx(ChevronLeftIcon, { className: "size-4" })] }), renderEllipsisPrevButton(), renderPageButtons(), renderEllipsisNextButton(), _jsxs(Button, { size: "icon", variant: "ghost", className: btnArrowClasses, onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [_jsx("span", { className: "sr-only", children: mergedProps.nextPageLabel }), _jsx(ChevronRightIcon, { className: "size-4" })] })] }))] })) })] }));
 }
 export { DataGridPagination };

package/dist/components/data-grid/data-grid-table-dnd-rows.js

@@ -16,9 +16,9 @@ function DataGridTableDndRowHandle({ className }) {
     const context = useContext(SortableRowContext);
     if (!context) {
         // Fallback if context is not available (shouldn't happen in normal usage)
-        return (_jsx(Button, { variant: "ghost", size: "icon-sm", className: cn('size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing', className), disabled: true, children: _jsx(GripHorizontalIcon, {}) }));
+        return (_jsx(Button, { variant: "ghost", size: "icon", className: cn('size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing', className), disabled: true, children: _jsx(GripHorizontalIcon, {}) }));
     }
-    return (_jsx(Button, { variant: "ghost", size: "icon-sm", className: cn('size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing', className), ...context.attributes, ...context.listeners, children: _jsx(GripHorizontalIcon, {}) }));
+    return (_jsx(Button, { variant: "ghost", size: "icon", className: cn('size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing', className), ...context.attributes, ...context.listeners, children: _jsx(GripHorizontalIcon, {}) }));
 }
 function DataGridTableDndRow({ row }) {
     const { transform, transition, setNodeRef, isDragging, attributes, listeners } = useSortable({

package/dist/components/data-grid/data-grid-table-dnd.js

@@ -27,7 +27,7 @@ function DataGridTableDndHeader({ header }) {
         width: props.tableLayout?.columnsResizable ? `calc(var(--header-${header.id}-size) * 1px)` : header.column.getSize(),
         zIndex: isDragging ? 1 : 0,
     };
-    return (_jsx(DataGridTableHeadRowCell, { header: header, dndStyle: style, dndRef: setNodeRef, children: _jsxs("div", { className: "flex items-center justify-start gap-0.5", children: [canOrder && (_jsx(Button, { size: "icon-sm", variant: "ghost", className: `-ms-2 size-6 ${isDragging ? 'cursor-grabbing' : 'cursor-grab active:cursor-grabbing'}`, ...attributes, ...listeners, "aria-label": "Drag to reorder", children: _jsx(GripVerticalIcon, { className: "opacity-60 hover:opacity-100", "aria-hidden": "true" }) })), _jsx("span", { className: "grow truncate", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }), props.tableLayout?.columnsResizable && column.getCanResize() && _jsx(DataGridTableHeadRowCellResize, { header: header })] }) }));
+    return (_jsx(DataGridTableHeadRowCell, { header: header, dndStyle: style, dndRef: setNodeRef, children: _jsxs("div", { className: "flex items-center justify-start gap-0.5", children: [canOrder && (_jsx(Button, { size: "icon", variant: "ghost", className: `-ms-2 size-6 ${isDragging ? 'cursor-grabbing' : 'cursor-grab active:cursor-grabbing'}`, ...attributes, ...listeners, "aria-label": "Drag to reorder", children: _jsx(GripVerticalIcon, { className: "opacity-60 hover:opacity-100", "aria-hidden": "true" }) })), _jsx("span", { className: "grow truncate", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }), props.tableLayout?.columnsResizable && column.getCanResize() && _jsx(DataGridTableHeadRowCellResize, { header: header })] }) }));
 }
 function DataGridTableDndCell({ cell }) {
     const { props } = useDataGrid();

package/dist/components/dialog/dialog.js

@@ -21,7 +21,7 @@ function DialogOverlay({ className, ...props }) {
     return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn('fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0', className), ...props }));
 }
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn('fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [_jsx(X, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn('fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon" }), children: [_jsx(X, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
 }
 function DialogHeader({ className, ...props }) {
     return _jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2', className), ...props });

package/dist/components/filters/filter-date-metric-value.js

@@ -176,7 +176,7 @@ export function FilterDateMetricBarPeriodSegments({ field, values, onChange, i18
                     if (!open) {
                         setCustomDraft(null);
                     }
-                }, children: _jsxs(DialogContent, { className: "max-h-[min(90vh,32rem)] w-[min(calc(100vw-2rem),28rem)] gap-0 overflow-y-auto p-4 sm:max-w-none", children: [_jsx(DialogHeader, { className: "pb-2", children: _jsx(DialogTitle, { children: mergedDateI18n.selectDate }) }), _jsx("div", { className: "flex flex-col gap-6 py-2", children: _jsx("section", { className: "flex flex-col gap-2", children: _jsx(DateSelector, { ...field.dateMetricProps, className: cn('max-w-none space-y-3', field.dateMetricProps?.className), value: customDraft ?? dateMetricValueForCustomEditor(payload.date), onChange: setCustomDraft, showOperators: field.dateMetricProps?.showOperators !== false, showInput: field.dateMetricProps?.showInput ?? false, dayDateFormat: dayFormat, showRollingPresets: false }) }) }), _jsx(DialogFooter, { className: "mt-2 border-t pt-4 sm:justify-end", children: _jsx(Button, { type: "button", size: "sm", variant: "default", onClick: commitCustomDialog, children: i18n.dateMetricDialogDone }) })] }) })] }));
+                }, children: _jsxs(DialogContent, { className: "max-h-[min(90vh,32rem)] w-[min(calc(100vw-2rem),28rem)] gap-0 overflow-y-auto p-4 sm:max-w-none", children: [_jsx(DialogHeader, { className: "pb-2", children: _jsx(DialogTitle, { children: mergedDateI18n.selectDate }) }), _jsx("div", { className: "flex flex-col gap-6 py-2", children: _jsx("section", { className: "flex flex-col gap-2", children: _jsx(DateSelector, { ...field.dateMetricProps, className: cn('max-w-none space-y-3', field.dateMetricProps?.className), value: customDraft ?? dateMetricValueForCustomEditor(payload.date), onChange: setCustomDraft, showOperators: field.dateMetricProps?.showOperators !== false, showInput: field.dateMetricProps?.showInput ?? false, dayDateFormat: dayFormat, showRollingPresets: false }) }) }), _jsx(DialogFooter, { className: "mt-2 border-t pt-4 sm:justify-end", children: _jsx(Button, { type: "button", variant: "default", onClick: commitCustomDialog, children: i18n.dateMetricDialogDone }) })] }) })] }));
 }
 /** Typographic en dash (–) for “no amount” on the bar trigger. */
 const METRIC_EMPTY_AMOUNT = '\u2013';

package/dist/components/input/input.js

@@ -4,12 +4,12 @@ import * as React from 'react';
 import { Input as InputPrimitive } from '@base-ui/react/input';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
-const inputVariants = cva('flex w-full min-w-0 rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] outline-none group-has-disabled/field:opacity-50 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40', {
+const inputVariants = cva('flex w-full min-w-0 rounded-md border border-input bg-background shadow-xs transition-[color,box-shadow] outline-none group-has-disabled/field:opacity-50 file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-invalid:border-destructive data-invalid:ring-3 data-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-invalid:border-destructive/50 dark:data-invalid:ring-destructive/40', {
     variants: {
         size: {
-            sm: 'h-7 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-sm',
-            default: 'h-8 px-[calc(--spacing(3)-1px)] text-sm',
-            lg: 'h-9 px-[calc(--spacing(3.5)-1px)] text-base',
+            sm: 'h-6 rounded-[min(var(--radius-md),10px)] px-[calc(--spacing(2)-1px)] text-xs',
+            default: 'h-7 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-sm',
+            lg: 'h-8 px-[calc(--spacing(3)-1px)] text-sm',
         },
     },
     defaultVariants: {

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

@@ -31,7 +31,7 @@ export type InputGroupInputProps = InputProps;
 export type InputGroupTextareaProps = TextareaProps;
 /**
  * Wraps a control and addons in a single bordered, focus-styled shell. Set `data-disabled` on the root when the field is disabled.
- * `size` sets shell height (`sm` = 28px, `default` = 32px, `lg` = 36px) and is inherited by `InputGroupInput` unless overridden there.
+ * `size` sets shell height (`sm` = 24px, `default` = 28px, `lg` = 32px) and is inherited by `InputGroupInput` unless overridden there.
  */
 declare function InputGroup({ className, size, ...props }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
 /**

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

@@ -11,16 +11,16 @@ const InputGroupSizeContext = React.createContext(undefined);
 const inputGroupVariants = cva('group/input-group relative flex w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5', {
     variants: {
         size: {
-            sm: 'h-7 rounded-[min(var(--radius-md),12px)]',
-            default: 'h-8',
-            lg: 'h-9',
+            sm: 'h-6 rounded-[min(var(--radius-md),10px)]',
+            default: 'h-7 rounded-[min(var(--radius-md),12px)]',
+            lg: 'h-8',
         },
     },
     defaultVariants: {
         size: 'default',
     },
 });
-const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 group-data-[size=lg]/input-group:py-2 group-data-[size=sm]/input-group:py-1 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3.5", {
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 group-data-[size=lg]/input-group:py-1.5 group-data-[size=sm]/input-group:py-0.5 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 group-data-[size=lg]/input-group:[&>svg:not([class*='size-'])]:size-4 group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3", {
     variants: {
         align: {
             'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
@@ -37,10 +37,10 @@ export const inputGroupAddonAlignKeys = ['inline-start', 'inline-end', 'block-st
 const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {
     variants: {
         size: {
-            xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+            xs: "h-5 gap-1 rounded-[calc(var(--radius)-3px)] px-1 [&>svg:not([class*='size-'])]:size-3",
             sm: '',
             'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
-            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+            'icon-sm': 'size-7 p-0 has-[>svg]:p-0',
         },
     },
     defaultVariants: {
@@ -50,7 +50,7 @@ const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-non
 export const inputGroupButtonSizeKeys = ['xs', 'sm', 'icon-xs', 'icon-sm'];
 /**
  * Wraps a control and addons in a single bordered, focus-styled shell. Set `data-disabled` on the root when the field is disabled.
- * `size` sets shell height (`sm` = 28px, `default` = 32px, `lg` = 36px) and is inherited by `InputGroupInput` unless overridden there.
+ * `size` sets shell height (`sm` = 24px, `default` = 28px, `lg` = 32px) and is inherited by `InputGroupInput` unless overridden there.
  */
 function InputGroup({ className, size = 'default', ...props }) {
     const resolvedSize = size ?? 'default';

package/dist/components/native-select/native-select.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ChevronDown } from 'lucide-react';
 import { cn } from '../../lib/utils';
 function NativeSelect({ className, size = 'default', ...props }) {
-    return (_jsxs("div", { className: cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className), "data-slot": "native-select-wrapper", "data-size": size, children: [_jsx("select", { "data-slot": "native-select", "data-size": size, className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", ...props }), _jsx(ChevronDown, { className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
+    return (_jsxs("div", { className: cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className), "data-slot": "native-select-wrapper", "data-size": size, children: [_jsx("select", { "data-slot": "native-select", "data-size": size, className: "h-7 w-full min-w-0 appearance-none rounded-[min(var(--radius-md),10px)] border border-input bg-transparent py-0.5 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-6 data-[size=sm]:text-xs dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", ...props }), _jsx(ChevronDown, { className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
 }
 function NativeSelectOption({ className, ...props }) {
     return _jsx("option", { "data-slot": "native-select-option", className: cn('bg-[Canvas] text-[CanvasText]', className), ...props });