@wheelhouse/ui 0.2.6 → 0.2.8

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

@@ -1,6 +1,6 @@
 export { Columns } from './columns';
 export type { ColumnDefinition, ColumnFieldGroup, ColumnsDateMetricOptions, ColumnsFieldsConfig, ColumnsI18n, ColumnsProps, SelectedColumn, } from './columns-types';
 export { DEFAULT_COLUMNS_I18N } from './columns-types';
-export { buildColumnMap, flattenColumns, formatColumnDateRangeSecondary, hasTopLevelColumnGroups, parseColumnSections } from './columns-utils';
+export { buildColumnMap, columnAllowsMultipleInstances, flattenColumns, formatColumnDateRangeSecondary, getSelectedColumnRowKey, hasTopLevelColumnGroups, newSelectedColumn, parseColumnSections, } from './columns-utils';
 export type { ColumnsMenuSection } from './columns-utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACR,gBAAgB,EAChB,gBAAgB,EAChB,wBAAwB,EACxB,mBAAmB,EACnB,WAAW,EACX,YAAY,EACZ,cAAc,GACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,8BAA8B,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC/I,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/columns/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACR,gBAAgB,EAChB,gBAAgB,EAChB,wBAAwB,EACxB,mBAAmB,EACnB,WAAW,EACX,YAAY,EACZ,cAAc,GACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EACH,cAAc,EACd,6BAA6B,EAC7B,cAAc,EACd,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,iBAAiB,EACjB,mBAAmB,GACtB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/blocks/columns/index.js

@@ -1,3 +1,3 @@
 export { Columns } from './columns';
 export { DEFAULT_COLUMNS_I18N } from './columns-types';
-export { buildColumnMap, flattenColumns, formatColumnDateRangeSecondary, hasTopLevelColumnGroups, parseColumnSections } from './columns-utils';
+export { buildColumnMap, columnAllowsMultipleInstances, flattenColumns, formatColumnDateRangeSecondary, getSelectedColumnRowKey, hasTopLevelColumnGroups, newSelectedColumn, parseColumnSections, } from './columns-utils';

package/dist/components/avatar/avatar.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+import { type OverlappingStackProps } from '../overlapping-stack';
 /**
  * Props for `Avatar`. Inherits additional behavior from
  * [Base UI Avatar](https://base-ui.com/react/components/avatar).
@@ -14,7 +15,7 @@ export type AvatarFallbackProps = AvatarPrimitive.Fallback.Props;
 /** Props for `AvatarBadge`. */
 export type AvatarBadgeProps = React.ComponentProps<'span'>;
 /** Props for `AvatarGroup`. */
-export type AvatarGroupProps = React.ComponentProps<'div'>;
+export type AvatarGroupProps = OverlappingStackProps;
 /** Props for `AvatarGroupCount`. */
 export type AvatarGroupCountProps = React.ComponentProps<'div'>;
 declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Props & {
@@ -23,7 +24,7 @@ declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Prop
 declare function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props): import("react/jsx-runtime").JSX.Element;
 declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): import("react/jsx-runtime").JSX.Element;
 declare function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
-declare function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroup({ className, spreadOnHover, collapseThreshold, overlap, spread, ...props }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
 declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };
 //# sourceMappingURL=avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;CAAE,CAAC;AAC1F,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC;AAC3D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;AACjE,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5D,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC3D,oCAAoC;AACpC,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE,iBAAS,MAAM,CAAC,EACZ,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC5B,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC,2CAYA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,2CAExE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,2CAW9E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAczE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7E;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGlE,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAEpF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;CAAE,CAAC;AAC1F,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC;AAC3D,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;AACjE,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAC5D,+BAA+B;AAC/B,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC;AACrD,oCAAoC;AACpC,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEhE,iBAAS,MAAM,CAAC,EACZ,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAC5B,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC,2CAYA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,2CAExE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,QAAQ,CAAC,KAAK,2CAW9E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAczE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,aAAoB,EAAE,iBAAqB,EAAE,OAAW,EAAE,MAAU,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAYnI;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7E;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/avatar/avatar.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import { cn } from '../../lib/utils';
+import { OverlappingStack } from '../overlapping-stack';
 function Avatar({ className, size = 'default', ...props }) {
     return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn('group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten', className), ...props }));
 }
@@ -15,8 +16,8 @@ function AvatarFallback({ 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 }));
 }
-function AvatarGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "avatar-group", className: cn('group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background', className), ...props }));
+function AvatarGroup({ className, spreadOnHover = true, collapseThreshold = 0, overlap = 8, spread = 6, ...props }) {
+    return (_jsx(OverlappingStack, { "data-slot": "avatar-group", collapseThreshold: collapseThreshold, overlap: overlap, spread: spread, spreadOnHover: spreadOnHover, className: cn('group/avatar-group [&>[data-slot=avatar]]:ring-2 [&>[data-slot=avatar]]:ring-background', className), ...props }));
 }
 function AvatarGroupCount({ className, ...props }) {
     return (_jsx("div", { "data-slot": "avatar-group-count", className: cn('relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3', className), ...props }));

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAA2E,MAAM,GAAG,CAAC;AAEpG,QAAA,MAAM,IAAI;;;;;;;CAOqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAyFrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC"}
+{"version":3,"file":"avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAA2E,MAAM,GAAG,CAAC;AAEpG,QAAA,MAAM,IAAI;;;;;;;CAOqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAyFrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAuBnB,CAAC"}

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

@@ -32,6 +32,13 @@ export const WithBadge = {
     render: (args) => (_jsxs(Avatar, { ...args, children: [_jsx(AvatarImage, { src: AVATAR_SRC, alt: "shadcn" }), _jsx(AvatarFallback, { children: "SC" }), _jsx(AvatarBadge, {})] })),
 };
 export const Group = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Hover the group to fan avatars apart (`spreadOnHover`, default on).',
+            },
+        },
+    },
     render: () => (_jsxs(AvatarGroup, { children: [[
                 { src: AVATAR_SRC, fallback: 'SC' },
                 { src: '/broken.jpg', fallback: 'JD' },

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

@@ -10,10 +10,10 @@ 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)] 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 default: "h-8 gap-2 px-[calc(--spacing(3)-1px)] text-base sm: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-[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 sm: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-base sm: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";
     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";

package/dist/components/button/button.js

@@ -13,10 +13,10 @@ 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)] 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",
+    default: "h-8 gap-2 px-[calc(--spacing(3)-1px)] text-base sm: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-[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",
+    sm: "h-7 gap-1.5 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-base sm: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',
     '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',
@@ -24,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 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", {
+const buttonVariants = cva("group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md border border-transparent 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 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", {
     variants: {
         variant: buttonVariantStyles,
         size: buttonSizeStyles,
@@ -35,10 +35,10 @@ const buttonVariants = cva("group/button relative inline-flex shrink-0 cursor-po
     },
 });
 const spinnerSizeByButtonSize = {
-    default: 'size-3 sm:size-3',
+    default: 'size-3',
     xs: 'size-3',
-    sm: 'size-3.5 sm:size-3.5',
-    lg: 'size-3.5 sm:size-3.5',
+    sm: 'size-3.5',
+    lg: 'size-3.5',
     icon: 'size-4',
     'icon-xs': 'size-3',
     'icon-sm': 'size-3.5',

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

@@ -7,8 +7,8 @@ import { Separator } from '../separator';
 const buttonGroupTextVariants = cva('flex shrink-0 items-center gap-2 rounded-lg border bg-muted font-medium [&_svg]:pointer-events-none', {
     variants: {
         size: {
-            sm: "h-7 px-2 text-[0.8rem] leading-none [&_svg:not([class*='size-'])]:size-3.5",
-            default: "min-h-8 px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+            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",
         },
     },

package/dist/components/calendar/calendar.js

@@ -31,10 +31,10 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             /** RDP v9: the day grid `<table>` uses the `month_grid` class key (not `table`). */
             month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),
             weekdays: cn('flex', defaultClassNames.weekdays),
-            weekday: cn('flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none', defaultClassNames.weekday),
+            weekday: cn('flex-1 rounded-(--cell-radius) text-sm font-normal text-muted-foreground select-none', defaultClassNames.weekday),
             week: cn('mt-2 flex w-full', defaultClassNames.week),
             week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
-            week_number: cn('text-[0.8rem] text-muted-foreground select-none', defaultClassNames.week_number),
+            week_number: cn('text-sm text-muted-foreground select-none', defaultClassNames.week_number),
             day: cn('group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)', props.showWeekNumber
                 ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
                 : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)', defaultClassNames.day),

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

@@ -19,7 +19,7 @@ function DataGridColumnFilter({ column, title, options }) {
     }, [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) => {
+                                        .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);
                                     return (_jsxs("button", { type: "button", onClick: () => {
                                             if (isSelected) {

package/dist/components/field/field.d.ts

@@ -4,7 +4,7 @@ declare function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props)
 declare function FieldDescription({ className, ...props }: FieldPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
 declare function FieldError({ className, ...props }: FieldPrimitive.Error.Props): import("react/jsx-runtime").JSX.Element;
 export type FieldControlProps = Omit<FieldPrimitive.Control.Props, 'size'> & {
-    size?: 'sm' | 'default';
+    size?: 'sm' | 'default' | 'lg';
 };
 declare function FieldControl({ className, size, ...props }: FieldControlProps): import("react/jsx-runtime").JSX.Element;
 declare function FieldItem({ className, ...props }: FieldPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAK/D,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,2CAEpE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,2CAWtE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,2CAElF;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,2CAEtE;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CAAE,CAAC;AAEzG,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAEjF;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,2CAEpE;AAED,QAAA,MAAM,aAAa,iEAA0B,CAAC;AAE9C,eAAO,MAAM,KAAK;;;;;;;;CAQjB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAK/D,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,2CAEpE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,2CAWtE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,2CAElF;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,2CAEtE;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;CAAE,CAAC;AAEhH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAEjF;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,2CAEpE;AAED,QAAA,MAAM,aAAa,iEAA0B,CAAC;AAE9C,eAAO,MAAM,KAAK;;;;;;;;CAQjB,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC"}

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

@@ -352,7 +352,7 @@ export function FilterDateMetricBarValueSegment({ field, values, onChange, opera
     const sym = i18n.defaultCurrency;
     const numberLocale = i18n.numberFormatLocale;
     const barValueFormat = dateMetricBarValueFormat(field);
-    const inputSizeProp = size === 'lg' ? 'default' : 'sm';
+    const inputSizeProp = size;
     const buttonSize = size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'default';
     const valueSegment = (() => {
         if (operator === 'value_any') {

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

@@ -1 +1 @@
-{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B,OAAO,KAAK,EAAE,MAAM,EAAuC,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEzH,uDAAuD;AACvD,eAAO,MAAM,kCAAkC,KAAK,CAAC;AA0sBrD,UAAU,mBAAmB,CAAC,CAAC,GAAG,OAAO;IACrC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAC9B,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IACzC,6FAA6F;IAC7F,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,GAAG,OAAO,EAAG,kDAAyD,mBAAmB,CAAC,CAAC,CAAC,4CAoD3H,CAAC;AAEF,UAAU,YAAY,CAAC,CAAC,GAAG,OAAO;IAC9B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAC9B,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oGAAoG;IACpG,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,uHAAuH;IACvH,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,uJAAuJ;IACvJ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AA8LD,wBAAgB,OAAO,CAAC,CAAC,GAAG,OAAO,EAAE,EACjC,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAW,EACX,MAAkB,EAClB,IAAI,EACJ,eAAsB,EACtB,uBAA4D,EAC5D,OAAO,EACP,aAAoB,EACpB,kBAAkB,EAClB,0BAAkC,EAClC,+BAAuC,EACvC,qBAA6B,EAC7B,iBAAyB,EACzB,cAAsB,EACtB,WAAiB,EACjB,aAAmB,GACtB,EAAE,YAAY,CAAC,CAAC,CAAC,2CAgsBjB"}
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgC/B,OAAO,KAAK,EAAE,MAAM,EAAuC,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEzH,uDAAuD;AACvD,eAAO,MAAM,kCAAkC,KAAK,CAAC;AA0sBrD,UAAU,mBAAmB,CAAC,CAAC,GAAG,OAAO;IACrC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAC9B,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IACzC,6FAA6F;IAC7F,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,GAAG,OAAO,EAAG,kDAAyD,mBAAmB,CAAC,CAAC,CAAC,4CAoD3H,CAAC;AAEF,UAAU,YAAY,CAAC,CAAC,GAAG,OAAO;IAC9B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAC9B,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oGAAoG;IACpG,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,uHAAuH;IACvH,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,uJAAuJ;IACvJ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AA8LD,wBAAgB,OAAO,CAAC,CAAC,GAAG,OAAO,EAAE,EACjC,OAAO,EACP,MAAM,EACN,QAAQ,EACR,SAAS,EACT,IAAW,EACX,MAAkB,EAClB,IAAI,EACJ,eAAsB,EACtB,uBAA4D,EAC5D,OAAO,EACP,aAAoB,EACpB,kBAAkB,EAClB,0BAAkC,EAClC,+BAAuC,EACvC,qBAA6B,EAC7B,iBAAyB,EACzB,cAAsB,EACtB,WAAiB,EACjB,aAAmB,GACtB,EAAE,YAAY,CAAC,CAAC,CAAC,2CAgsBjB"}

package/dist/components/filters/filters.js

@@ -10,6 +10,7 @@ import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 import { Input } from '../input';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from '../input-group';
 import { Kbd } from '../kbd';
+import { OverlappingStack } from '../overlapping-stack';
 import { ScrollArea } from '../scroll-area';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
 import { AlertCircle, Check, ChevronDown, Plus, X } from 'lucide-react';
@@ -116,7 +117,7 @@ function FilterInput({ field, onBlur, onKeyDown, className, ...props }) {
         // Call the original onKeyDown if provided
         onKeyDown?.(e);
     };
-    return (_jsxs(InputGroup, { className: cn('w-36', context.size == 'sm' && 'h-7!', context.size == 'default' && 'h-8!', context.size == 'lg' && 'h-9!', className), children: [field?.prefix && (_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: field.prefix }) })), _jsx(InputGroupInput, { ref: inputRef, "aria-invalid": !isValid, "aria-describedby": !isValid && validationMessage ? `${field?.key || 'input'}-error` : undefined, onBlur: handleBlur, onKeyDown: handleKeyDown, className: cn(context.size == 'sm' && 'h-7! text-xs', context.size == 'default' && 'h-8!', context.size == 'lg' && 'h-9!'), ...props }), !isValid && validationMessage && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(InputGroupButton, { size: "icon-xs" }), children: _jsx(AlertCircle, { className: "size-3.5 text-destructive" }) }), _jsx(TooltipContent, { children: _jsx("p", { className: "text-sm", children: validationMessage }) })] }) })), field?.suffix && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: field.suffix }) }))] }));
+    return (_jsxs(InputGroup, { className: cn('w-36', context.size == 'sm' && 'h-7!', context.size == 'default' && 'h-8!', context.size == 'lg' && 'h-9!', className), children: [field?.prefix && (_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: field.prefix }) })), _jsx(InputGroupInput, { ref: inputRef, size: context.size, "aria-invalid": !isValid, "aria-describedby": !isValid && validationMessage ? `${field?.key || 'input'}-error` : undefined, onBlur: handleBlur, onKeyDown: handleKeyDown, ...props }), !isValid && validationMessage && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(InputGroupButton, { size: "icon-xs" }), children: _jsx(AlertCircle, { className: "size-3.5 text-destructive" }) }), _jsx(TooltipContent, { children: _jsx("p", { className: "text-sm", children: validationMessage }) })] }) })), field?.suffix && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: field.suffix }) }))] }));
 }
 function FilterRemoveButton({ className, icon = _jsx(X, {}), ...props }) {
     const context = useFilterContext();
@@ -323,7 +324,7 @@ function SelectOptionsPopover({ field, values, onChange, onClose, inline = false
             if (!nextOpen) {
                 setTimeout(() => setSearchInput(''), 200);
             }
-        }, children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", size: context.size, children: _jsx("div", { className: "flex items-center gap-1.5", children: field.customValueRenderer ? (field.customValueRenderer(values, field.options || [])) : (_jsxs(_Fragment, { children: [triggerPreviewIcons.length > 0 && (_jsx("div", { className: "flex items-center -space-x-1.5", children: triggerPreviewIcons.map((option) => (_jsx("div", { children: option.icon }, String(option.value)))) })), selectedOptions.length === 1
+        }, children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", size: context.size, children: _jsx("div", { className: "flex items-center gap-1.5", children: field.customValueRenderer ? (field.customValueRenderer(values, field.options || [])) : (_jsxs(_Fragment, { children: [triggerPreviewIcons.length > 0 && (_jsx(OverlappingStack, { collapseThreshold: 0, overlap: 6, spread: 4, spreadOnHover: true, inlineClassName: "gap-0", children: triggerPreviewIcons.map((option) => (_jsx("div", { children: option.icon }, String(option.value)))) })), selectedOptions.length === 1
                                     ? selectedOptions[0].label
                                     : selectedOptions.length > 1
                                         ? `${selectedOptions.length} ${context.i18n.selectedCount}`

package/dist/components/index.d.ts

@@ -32,6 +32,8 @@ export * from './label';
 export * from './menubar';
 export * from './native-select';
 export * from './navigation-menu';
+export * from './number-field';
+export * from './overlapping-stack';
 export * from './pagination';
 export * from './popover';
 export * from './progress';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

package/dist/components/index.js

@@ -32,6 +32,8 @@ export * from './label';
 export * from './menubar';
 export * from './native-select';
 export * from './navigation-menu';
+export * from './number-field';
+export * from './overlapping-stack';
 export * from './pagination';
 export * from './popover';
 export * from './progress';

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

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { Input as InputPrimitive } from '@base-ui/react/input';
 import { type VariantProps } from 'class-variance-authority';
 declare const inputVariants: (props?: ({
-    size?: "default" | "sm" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const inputSizeKeys: readonly ["sm", "default"];
+export declare const inputSizeKeys: readonly ["sm", "default", "lg"];
 /**
  * Props for `Input`. Inherits additional behavior from
  * [Base UI Input](https://base-ui.com/react/components/input).

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;8EAalB,CAAC;AAEF,eAAO,MAAM,aAAa,4BAA6B,CAAC;AAExD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAEjG,QAAA,MAAM,KAAK,kGAET,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAEF,eAAO,MAAM,aAAa,kCAAmC,CAAC;AAE9D;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAEjG,QAAA,MAAM,KAAK,kGAET,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/input/input.js

@@ -7,15 +7,16 @@ 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', {
     variants: {
         size: {
-            sm: 'h-8 px-2.5 text-xs',
-            default: 'h-9 px-3 py-1 text-sm',
+            sm: 'h-7 rounded-[min(var(--radius-md),12px)] px-[calc(--spacing(2.5)-1px)] text-base sm:text-sm',
+            default: 'h-8 px-[calc(--spacing(3)-1px)] text-base sm:text-sm',
+            lg: 'h-9 px-[calc(--spacing(3.5)-1px)] text-base',
         },
     },
     defaultVariants: {
         size: 'default',
     },
 });
-export const inputSizeKeys = ['sm', 'default'];
+export const inputSizeKeys = ['sm', 'default', 'lg'];
 const Input = React.forwardRef(function Input({ className, size = 'default', ...props }, ref) {
     return _jsx(InputPrimitive, { ref: ref, "data-slot": "input", className: cn(inputVariants({ size }), className), ...props });
 });

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

@@ -13,7 +13,7 @@ declare const meta: {
     argTypes: {
         size: {
             control: "select";
-            options: readonly ["sm", "default"];
+            options: readonly ["sm", "default", "lg"];
         };
         className: {
             control: false;

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

@@ -1 +1 @@
-{"version":3,"file":"input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAeoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC"}
+{"version":3,"file":"input.stories.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAeoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA6BrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC"}

package/dist/components/input/input.stories.js

@@ -24,7 +24,7 @@ export const Default = {
 };
 export const Gallery = {
     parameters: { layout: 'padded' },
-    render: () => (_jsxs("div", { className: "flex max-w-md flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Sizes" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input, { placeholder: "Default height", size: "default" }), _jsx(Input, { placeholder: "Small", size: "sm" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "States" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input, { placeholder: "Disabled", disabled: true }), _jsx(Input, { placeholder: "Invalid (aria-invalid)", "aria-invalid": true }), _jsx(Input, { placeholder: "Invalid (data-invalid)", "data-invalid": true })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With label" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "input-gallery", children: "Email" }), _jsx(Input, { id: "input-gallery", type: "email", placeholder: "you@example.com" })] })] })] })),
+    render: () => (_jsxs("div", { className: "flex max-w-md flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Sizes" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input, { placeholder: "Small (h-7)", size: "sm" }), _jsx(Input, { placeholder: "Default (h-8)", size: "default" }), _jsx(Input, { placeholder: "Large (h-9)", size: "lg" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "States" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input, { placeholder: "Disabled", disabled: true }), _jsx(Input, { placeholder: "Invalid (aria-invalid)", "aria-invalid": true }), _jsx(Input, { placeholder: "Invalid (data-invalid)", "data-invalid": true })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With label" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "input-gallery", children: "Email" }), _jsx(Input, { id: "input-gallery", type: "email", placeholder: "you@example.com" })] })] })] })),
 };
 export const WithField = {
     name: 'With Field (validation)',

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

@@ -6,7 +6,7 @@ import type { TextareaProps } from '../textarea';
 /** Props for `InputGroup`. */
 export type InputGroupProps = React.ComponentProps<'div'>;
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const inputGroupAddonAlignKeys: readonly ["inline-start", "inline-end", "block-start", "block-end"];
 /** Props for `InputGroupAddon`. */

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,2 @@
+export * from './number-field';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/number-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/number-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/components/number-field/index.js

@@ -0,0 +1 @@
+export * from './number-field';

package/dist/components/number-field/number-field.d.ts

@@ -0,0 +1,59 @@
+import { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';
+import * as React from 'react';
+export declare const NumberFieldContext: React.Context<{
+    fieldId: string;
+} | null>;
+export type NumberFieldProps = NumberFieldPrimitive.Root.Props & {
+    /** Control height. Read by children through `data-size`. */
+    size?: 'sm' | 'default' | 'lg';
+};
+export declare function NumberField({ id, className, size, ...props }: NumberFieldProps): React.ReactElement;
+export type NumberFieldGroupProps = NumberFieldPrimitive.Group.Props & {
+    /** `NumberFieldDecrement`, `NumberFieldInput`, `NumberFieldIncrement`, and optional `NumberFieldAddon` siblings. */
+    children?: React.ReactNode;
+    /** Additional CSS classes on the bordered group shell. */
+    className?: string;
+};
+export declare function NumberFieldGroup({ className, ...props }: NumberFieldGroupProps): React.ReactElement;
+export type NumberFieldDecrementProps = NumberFieldPrimitive.Decrement.Props & {
+    /** Disable just the decrement button (independent of the root `disabled` prop). */
+    disabled?: boolean;
+    /** Override the default minus icon — pass any icon or node to customize the stepper glyph. */
+    children?: React.ReactNode;
+    /** Additional CSS classes on the decrement button. */
+    className?: string;
+};
+export declare function NumberFieldDecrement({ className, children, ...props }: NumberFieldDecrementProps): React.ReactElement;
+export type NumberFieldIncrementProps = NumberFieldPrimitive.Increment.Props & {
+    /** Disable just the increment button (independent of the root `disabled` prop). */
+    disabled?: boolean;
+    /** Override the default plus icon — pass any icon or node to customize the stepper glyph. */
+    children?: React.ReactNode;
+    /** Additional CSS classes on the increment button. */
+    className?: string;
+};
+export declare function NumberFieldIncrement({ className, children, ...props }: NumberFieldIncrementProps): React.ReactElement;
+export type NumberFieldAddonProps = React.ComponentProps<'span'> & {
+    /** Whether the addon sits before (`inline-start`) or after (`inline-end`) the input. Controls inner rounding so the addon hugs the group's outer corner when given a background. */
+    align?: 'inline-start' | 'inline-end';
+};
+/**
+ * Static prefix or suffix that renders inside `NumberFieldGroup` (currency symbol, unit label, small icon).
+ * Click-to-focus delegates to the inner input.
+ */
+export declare function NumberFieldAddon({ className, align, ...props }: NumberFieldAddonProps): React.ReactElement;
+export type NumberFieldInputProps = NumberFieldPrimitive.Input.Props & {
+    /** Additional CSS classes on the inner `<input>`. */
+    className?: string;
+};
+export declare function NumberFieldInput({ className, ...props }: NumberFieldInputProps): React.ReactElement;
+export type NumberFieldScrubAreaProps = NumberFieldPrimitive.ScrubArea.Props & {
+    /** Visible label rendered inside the scrub area; associated with the inner input via `htmlFor` for accessibility. */
+    label: string;
+    /** Additional CSS classes on the scrub area. */
+    className?: string;
+};
+export declare function NumberFieldScrubArea({ className, label, ...props }: NumberFieldScrubAreaProps): React.ReactElement;
+export declare function CursorGrowIcon(props: React.ComponentProps<'svg'>): React.ReactElement;
+export { NumberFieldPrimitive };
+//# sourceMappingURL=number-field.d.ts.map

package/dist/components/number-field/number-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAElF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,OAAO,CAAC;IAC3C,OAAO,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAEO,CAAC;AAChB,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,IAAI,CAAC,KAAK,GAAG;IAC7D,4DAA4D;IAC5D,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;CAClC,CAAC;AACF,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAc/G;AACD,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,GAAG;IACnE,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AACF,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAWnG;AACD,MAAM,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,SAAS,CAAC,KAAK,GAAG;IAC3E,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AACF,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAarH;AACD,MAAM,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,SAAS,CAAC,KAAK,GAAG;IAC3E,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AACF,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAarH;AACD,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IAC/D,oLAAoL;IACpL,KAAK,CAAC,EAAE,cAAc,GAAG,YAAY,CAAC;CACzC,CAAC;AACF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,KAAsB,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAmB3H;AACD,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,GAAG;IACnE,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AACF,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAWnG;AACD,MAAM,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,SAAS,CAAC,KAAK,GAAG;IAC3E,qHAAqH;IACrH,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AACF,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAelH;AACD,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,YAAY,CAMrF;AACD,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/number-field/number-field.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';
+import { MinusIcon, PlusIcon } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Label } from '../label/label';
+export const NumberFieldContext = React.createContext(null);
+export function NumberField({ id, className, size = 'default', ...props }) {
+    const generatedId = React.useId();
+    const fieldId = id ?? generatedId;
+    return (_jsx(NumberFieldContext.Provider, { value: { fieldId }, children: _jsx(NumberFieldPrimitive.Root, { className: cn('flex w-full flex-col items-start gap-2', className), "data-size": size, "data-slot": "number-field", id: fieldId, ...props }) }));
+}
+export function NumberFieldGroup({ className, ...props }) {
+    return (_jsx(NumberFieldPrimitive.Group, { className: cn("relative flex w-full justify-between rounded-lg border border-input bg-background text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-autofill:bg-foreground/4 has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/48 dark:bg-input/32 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:has-autofill:bg-foreground/8 dark:has-aria-invalid:ring-destructive/24 data-disabled:pointer-events-none data-disabled:opacity-64 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none", className), "data-slot": "number-field-group", ...props }));
+}
+export function NumberFieldDecrement({ className, children, ...props }) {
+    return (_jsx(NumberFieldPrimitive.Decrement, { className: cn('relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] px-[calc(--spacing(3)-1px)] transition-colors hover:bg-accent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11', className), "data-slot": "number-field-decrement", ...props, children: children ?? _jsx(MinusIcon, { className: "size-3" }) }));
+}
+export function NumberFieldIncrement({ className, children, ...props }) {
+    return (_jsx(NumberFieldPrimitive.Increment, { className: cn('relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] px-[calc(--spacing(3)-1px)] transition-colors hover:bg-accent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11', className), "data-slot": "number-field-increment", ...props, children: children ?? _jsx(PlusIcon, { className: "size-3" }) }));
+}
+/**
+ * Static prefix or suffix that renders inside `NumberFieldGroup` (currency symbol, unit label, small icon).
+ * Click-to-focus delegates to the inner input.
+ */
+export function NumberFieldAddon({ className, align = 'inline-start', ...props }) {
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    _jsx("span", { "data-slot": "number-field-addon", "data-align": align, onClick: (e) => {
+            if (e.target.closest('button'))
+                return;
+            e.currentTarget.parentElement?.querySelector('input')?.focus();
+        }, className: cn("flex shrink-0 cursor-text items-center justify-center px-3 text-sm text-muted-foreground select-none in-data-[size=sm]:px-2.5 [&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-4", align === 'inline-start' && 'order-first rounded-s-[calc(var(--radius-lg)-1px)] pe-0', align === 'inline-end' && 'order-last rounded-e-[calc(var(--radius-lg)-1px)] ps-0', className), ...props }));
+}
+export function NumberFieldInput({ className, ...props }) {
+    return (_jsx(NumberFieldPrimitive.Input, { className: cn('h-8.5 w-full min-w-0 grow bg-transparent px-[calc(--spacing(3)-1px)] text-center leading-8.5 tabular-nums outline-none [transition:background-color_5000000s_ease-in-out_0s] in-data-[size=lg]:h-9.5 in-data-[size=lg]:leading-9.5 in-data-[size=sm]:h-7.5 in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] in-data-[size=sm]:leading-7.5 sm:h-7.5 sm:leading-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=sm]:leading-8.5', className), "data-slot": "number-field-input", ...props }));
+}
+export function NumberFieldScrubArea({ className, label, ...props }) {
+    const context = React.useContext(NumberFieldContext);
+    if (!context) {
+        throw new Error('NumberFieldScrubArea must be used within a NumberField component for accessibility.');
+    }
+    return (_jsxs(NumberFieldPrimitive.ScrubArea, { className: cn('flex cursor-ew-resize', className), "data-slot": "number-field-scrub-area", ...props, children: [_jsx(Label, { className: "cursor-ew-resize", htmlFor: context.fieldId, children: label }), _jsx(NumberFieldPrimitive.ScrubAreaCursor, { className: "drop-shadow-[0_1px_1px_#0008] filter", children: _jsx(CursorGrowIcon, {}) })] }));
+}
+export function CursorGrowIcon(props) {
+    return (_jsx("svg", { "aria-hidden": "true", fill: "black", height: "14", stroke: "white", viewBox: "0 0 24 14", width: "26", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" }) }));
+}
+export { NumberFieldPrimitive };

package/dist/components/number-field/number-field.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NumberField } from './number-field';
+declare const meta: Meta<typeof NumberField>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const MinMaxStep: Story;
+export declare const Currency: Story;
+export declare const Percent: Story;
+export declare const PrefixAddon: Story;
+export declare const SuffixAddon: Story;
+export declare const UnitAddon: Story;
+export declare const IconAddon: Story;
+export declare const AddonWithStepper: Story;
+export declare const StepperRight: Story;
+export declare const StackedStepper: Story;
+export declare const SteppersWithSuffixHorizontal: Story;
+export declare const SteppersWithSuffixStacked: Story;
+export declare const ScrubArea: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const WithField: Story;
+export declare const Gallery: Story;
+//# sourceMappingURL=number-field.stories.d.ts.map

package/dist/components/number-field/number-field.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.stories.d.ts","sourceRoot":"","sources":["../../../src/components/number-field/number-field.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EACH,WAAW,EAOd,MAAM,gBAAgB,CAAC;AAExB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CA+HlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAqCnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAerB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgB9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAe1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAkC1C,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA8CvC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA6BvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAmDrB,CAAC"}