@wheelhouse/ui 0.2.6 → 0.2.8

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

@@ -0,0 +1,225 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AtSignIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { Field } from '../field';
+import { Label } from '../label';
+import { NumberField, NumberFieldAddon, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, } from './number-field';
+const meta = {
+    title: 'Components/Number field',
+    component: NumberField,
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        size: 'default',
+        defaultValue: 0,
+    },
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['sm', 'default', 'lg'],
+            description: 'Control height. Read by children through `data-size`.',
+            table: { type: { summary: "'sm' | 'default' | 'lg'" }, defaultValue: { summary: "'default'" } },
+        },
+        value: {
+            control: 'number',
+            description: 'Controlled numeric value. Use `null` to represent an empty field.',
+            table: { type: { summary: 'number | null' }, category: 'Value' },
+        },
+        defaultValue: {
+            control: 'number',
+            description: 'Initial numeric value when uncontrolled.',
+            table: { type: { summary: 'number' }, category: 'Value' },
+        },
+        onValueChange: {
+            action: 'valueChange',
+            description: 'Called when the value changes, with the parsed number (or `null` when empty) and event details describing the change reason.',
+            table: { type: { summary: '(value: number | null, eventDetails) => void' }, category: 'Value' },
+        },
+        onValueCommitted: {
+            action: 'valueCommitted',
+            description: 'Called when the user finishes interacting — on blur, after release of increment/decrement, or after the scrub gesture ends.',
+            table: { type: { summary: '(value: number | null, eventDetails) => void' }, category: 'Value' },
+        },
+        min: {
+            control: 'number',
+            description: 'Minimum allowed value.',
+            table: { type: { summary: 'number' }, category: 'Range' },
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum allowed value.',
+            table: { type: { summary: 'number' }, category: 'Range' },
+        },
+        step: {
+            control: 'number',
+            description: 'Amount to increment/decrement with buttons and arrow keys. Set to `"any"` to disable native step validation.',
+            table: { type: { summary: "number | 'any'" }, defaultValue: { summary: '1' }, category: 'Range' },
+        },
+        smallStep: {
+            control: 'number',
+            description: 'Step used when the meta (or Ctrl) modifier key is held.',
+            table: { type: { summary: 'number' }, defaultValue: { summary: '0.1' }, category: 'Range' },
+        },
+        largeStep: {
+            control: 'number',
+            description: 'Step used when the Shift modifier key is held.',
+            table: { type: { summary: 'number' }, defaultValue: { summary: '10' }, category: 'Range' },
+        },
+        snapOnStep: {
+            control: 'boolean',
+            description: 'Snap to the nearest multiple of `step` when incrementing or decrementing.',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Range' },
+        },
+        allowOutOfRange: {
+            control: 'boolean',
+            description: 'Allow typed values outside `min`/`max` (step-based interactions still clamp).',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Range' },
+        },
+        allowWheelScrub: {
+            control: 'boolean',
+            description: 'Allow the mouse wheel to change the value while the input is focused and hovered.',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Range' },
+        },
+        format: {
+            control: 'object',
+            description: 'Locale-aware formatting options passed to `Intl.NumberFormat` (e.g. currency, percent, decimal grouping).',
+            table: { type: { summary: 'Intl.NumberFormatOptions' }, category: 'Formatting' },
+        },
+        locale: {
+            control: 'text',
+            description: 'Locale used for formatting. Defaults to the user’s runtime locale.',
+            table: { type: { summary: 'Intl.LocalesArgument' }, category: 'Formatting' },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the control ignores interaction.',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' },
+        },
+        readOnly: {
+            control: 'boolean',
+            description: 'Whether the user can read but not change the value.',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Whether a value is required before submitting a form.',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' },
+        },
+        name: {
+            control: 'text',
+            description: 'Name submitted with the surrounding form.',
+            table: { type: { summary: 'string' }, category: 'Form' },
+        },
+        id: {
+            control: 'text',
+            description: 'ID applied to the inner input element. Use with `Label`’s `htmlFor`.',
+            table: { type: { summary: 'string' }, category: 'Form' },
+        },
+        inputRef: {
+            control: false,
+            description: 'Ref forwarded to the inner `<input>` element — useful for focusing, measuring, or imperative selection.',
+            table: { type: { summary: 'Ref<HTMLInputElement>' }, category: 'Form' },
+        },
+        className: { control: false, table: { type: { summary: 'string' } } },
+        children: { control: false, table: { type: { summary: 'ReactNode' } } },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "flex w-64 flex-col gap-2", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-default", children: "Quantity" }), _jsx(NumberField, { ...args, id: "story-number-default", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] })),
+};
+export const Sizes = {
+    parameters: { layout: 'padded' },
+    decorators: [(Story) => _jsx(Story, {})],
+    render: () => (_jsxs("div", { className: "flex w-full max-w-xs flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "story-number-sm", children: "Small" }), _jsx(NumberField, { id: "story-number-sm", size: "sm", defaultValue: 5, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "story-number-default-size", children: "Default" }), _jsx(NumberField, { id: "story-number-default-size", defaultValue: 5, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "story-number-lg", children: "Large" }), _jsx(NumberField, { id: "story-number-lg", size: "lg", defaultValue: 5, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] })] })),
+};
+export const MinMaxStep = {
+    name: 'Min / max / step',
+    args: { defaultValue: 50, min: 0, max: 100, step: 5 },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-step", children: "Volume (0\u2013100, step 5)" }), _jsx(NumberField, { ...args, id: "story-number-step", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] })),
+};
+export const Currency = {
+    name: 'Currency format',
+    args: { defaultValue: 19.99, step: 0.5, format: { style: 'currency', currency: 'USD' } },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-currency", children: "Price" }), _jsx(NumberField, { ...args, id: "story-number-currency", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] })),
+};
+export const Percent = {
+    name: 'Percent format',
+    args: { defaultValue: 0.25, step: 0.05, format: { style: 'percent' } },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-percent", children: "Discount" }), _jsx(NumberField, { ...args, id: "story-number-percent", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] })),
+};
+export const PrefixAddon = {
+    name: 'Prefix addon',
+    args: { defaultValue: 19.99, step: 0.5 },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-prefix", children: "Price" }), _jsx(NumberField, { ...args, id: "story-number-prefix", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldAddon, { children: "$" }), _jsx(NumberFieldInput, { className: "text-start" })] }) })] })),
+};
+export const SuffixAddon = {
+    name: 'Suffix addon',
+    args: { defaultValue: 25, step: 1, min: 0, max: 100 },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-suffix", children: "Discount" }), _jsx(NumberField, { ...args, id: "story-number-suffix", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldInput, { className: "text-end" }), _jsx(NumberFieldAddon, { align: "inline-end", children: "%" })] }) })] })),
+};
+export const UnitAddon = {
+    name: 'Unit / label addon',
+    args: { defaultValue: 5, min: 0, step: 0.5 },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-unit", children: "Weight" }), _jsx(NumberField, { ...args, id: "story-number-unit", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldInput, { className: "text-end" }), _jsx(NumberFieldAddon, { align: "inline-end", children: "kg" })] }) })] })),
+};
+export const IconAddon = {
+    name: 'Icon addon',
+    args: { defaultValue: 0, min: 0 },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-icon", children: "Mentions" }), _jsx(NumberField, { ...args, id: "story-number-icon", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldAddon, { children: _jsx(AtSignIcon, { className: "size-3" }) }), _jsx(NumberFieldInput, { className: "text-start" })] }) })] })),
+};
+export const AddonWithStepper = {
+    name: 'Addon + stepper',
+    args: { defaultValue: 19.99, step: 0.5, min: 0 },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-addon-stepper", children: "Price" }), _jsx(NumberField, { ...args, id: "story-number-addon-stepper", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldAddon, { children: "$" }), _jsx(NumberFieldInput, { className: "text-start" }), _jsx(NumberFieldDecrement, { className: "rounded-none border-l border-input" }), _jsx(NumberFieldIncrement, { className: "border-l border-input" })] }) })] })),
+};
+export const StepperRight = {
+    name: 'Stepper buttons on right',
+    args: { defaultValue: 1, min: 0 },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-stepper-right", children: "Quantity" }), _jsx(NumberField, { ...args, id: "story-number-stepper-right", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldInput, { className: "text-start" }), _jsx(NumberFieldDecrement, { className: "rounded-none border-l border-input" }), _jsx(NumberFieldIncrement, { className: "border-l border-input" })] }) })] })),
+};
+export const StackedStepper = {
+    name: 'Stacked stepper (chevrons)',
+    args: { defaultValue: 1, min: 0 },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-stacked", children: "Quantity" }), _jsx(NumberField, { ...args, id: "story-number-stacked", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldInput, { className: "text-start" }), _jsxs("div", { className: "flex flex-col border-l border-input", children: [_jsx(NumberFieldIncrement, { className: "flex-1 rounded-none rounded-tr-[calc(var(--radius-lg)-1px)] border-b border-input px-2", children: _jsx(ChevronUpIcon, { className: "size-3" }) }), _jsx(NumberFieldDecrement, { className: "flex-1 rounded-none rounded-br-[calc(var(--radius-lg)-1px)] px-2", children: _jsx(ChevronDownIcon, { className: "size-3" }) })] })] }) })] })),
+};
+export const SteppersWithSuffixHorizontal = {
+    name: 'Steppers on right (horizontal) with suffix',
+    parameters: { layout: 'padded' },
+    decorators: [(Story) => _jsx(Story, {})],
+    render: () => (_jsxs("div", { className: "flex w-full max-w-xs flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "story-num-rightH-nights", children: "Stay length" }), _jsx(NumberField, { id: "story-num-rightH-nights", defaultValue: 3, min: 1, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldInput, { className: "text-end" }), _jsx(NumberFieldAddon, { align: "inline-end", className: "order-none rounded-none", children: "nights" }), _jsx(NumberFieldDecrement, { className: "rounded-none border-l border-input" }), _jsx(NumberFieldIncrement, { className: "border-l border-input" })] }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "story-num-rightH-pct", children: "Tip" }), _jsx(NumberField, { id: "story-num-rightH-pct", defaultValue: 15, min: 0, max: 100, step: 1, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldInput, { className: "text-end" }), _jsx(NumberFieldAddon, { align: "inline-end", className: "order-none rounded-none", children: "%" }), _jsx(NumberFieldDecrement, { className: "rounded-none border-l border-input" }), _jsx(NumberFieldIncrement, { className: "border-l border-input" })] }) })] })] })),
+};
+export const SteppersWithSuffixStacked = {
+    name: 'Steppers on right (stacked) with suffix',
+    parameters: { layout: 'padded' },
+    decorators: [(Story) => _jsx(Story, {})],
+    render: () => (_jsxs("div", { className: "flex w-full max-w-xs flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "story-num-rightS-nights", children: "Stay length" }), _jsx(NumberField, { id: "story-num-rightS-nights", defaultValue: 3, min: 1, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldInput, { className: "text-end" }), _jsx(NumberFieldAddon, { align: "inline-end", className: "order-none rounded-none", children: "nights" }), _jsxs("div", { className: "flex flex-col border-l border-input", children: [_jsx(NumberFieldIncrement, { className: "flex-1 rounded-none rounded-tr-[calc(var(--radius-lg)-1px)] border-b border-input px-2", children: _jsx(ChevronUpIcon, { className: "size-3" }) }), _jsx(NumberFieldDecrement, { className: "flex-1 rounded-none rounded-br-[calc(var(--radius-lg)-1px)] px-2", children: _jsx(ChevronDownIcon, { className: "size-3" }) })] })] }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "story-num-rightS-pct", children: "Tip" }), _jsx(NumberField, { id: "story-num-rightS-pct", defaultValue: 15, min: 0, max: 100, step: 1, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldInput, { className: "text-end" }), _jsx(NumberFieldAddon, { align: "inline-end", className: "order-none rounded-none", children: "%" }), _jsxs("div", { className: "flex flex-col border-l border-input", children: [_jsx(NumberFieldIncrement, { className: "flex-1 rounded-none rounded-tr-[calc(var(--radius-lg)-1px)] border-b border-input px-2", children: _jsx(ChevronUpIcon, { className: "size-3" }) }), _jsx(NumberFieldDecrement, { className: "flex-1 rounded-none rounded-br-[calc(var(--radius-lg)-1px)] px-2", children: _jsx(ChevronDownIcon, { className: "size-3" }) })] })] }) })] })] })),
+};
+export const ScrubArea = {
+    name: 'Scrub area',
+    args: { defaultValue: 100 },
+    render: (args) => (_jsxs(NumberField, { ...args, id: "story-number-scrub", children: [_jsx(NumberFieldScrubArea, { label: "Width" }), _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] })] })),
+};
+export const Disabled = {
+    args: { defaultValue: 10, disabled: true },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-disabled", children: "Quantity" }), _jsx(NumberField, { ...args, id: "story-number-disabled", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] })),
+};
+export const ReadOnly = {
+    name: 'Read only',
+    args: { defaultValue: 42, readOnly: true },
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "story-number-readonly", children: "Locked value" }), _jsx(NumberField, { ...args, id: "story-number-readonly", children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] })),
+};
+export const WithField = {
+    name: 'With Field (validation)',
+    parameters: { layout: 'padded' },
+    decorators: [(Story) => _jsx(Story, {})],
+    render: () => (_jsxs("div", { className: "flex w-full max-w-sm flex-col gap-6", children: [_jsxs(Field.Root, { name: "quantity", invalid: true, children: [_jsx(Field.Label, { children: "Quantity" }), _jsx(NumberField, { defaultValue: -1, min: 0, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) }), _jsx(Field.Error, { children: "Must be 0 or greater." })] }), _jsxs(Field.Root, { name: "seats", disabled: true, children: [_jsx(Field.Label, { children: "Seats" }), _jsx(NumberField, { defaultValue: 2, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] })] })),
+};
+export const Gallery = {
+    parameters: { layout: 'padded', controls: { disable: true } },
+    decorators: [(Story) => _jsx(Story, {})],
+    render: () => (_jsxs("div", { className: "mx-auto flex w-full max-w-md flex-col gap-10", children: [_jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Default" }), _jsx(Label, { htmlFor: "gal-num-1", children: "Items" }), _jsx(NumberField, { id: "gal-num-1", defaultValue: 1, min: 0, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Currency" }), _jsx(Label, { htmlFor: "gal-num-2", children: "Price" }), _jsx(NumberField, { id: "gal-num-2", defaultValue: 19.99, step: 0.5, format: { style: 'currency', currency: 'USD' }, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With scrub area" }), _jsxs(NumberField, { id: "gal-num-3", defaultValue: 120, children: [_jsx(NumberFieldScrubArea, { label: "Width" }), _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] })] })] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Disabled" }), _jsx(Label, { htmlFor: "gal-num-4", children: "Not available" }), _jsx(NumberField, { id: "gal-num-4", defaultValue: 3, disabled: true, children: _jsxs(NumberFieldGroup, { children: [_jsx(NumberFieldDecrement, {}), _jsx(NumberFieldInput, {}), _jsx(NumberFieldIncrement, {})] }) })] })] })),
+};

package/dist/components/overlapping-stack/index.d.ts

@@ -0,0 +1,3 @@
+export { OverlappingStack, type OverlappingStackDirection, type OverlappingStackProps } from './overlapping-stack';
+export { useOverlappingStack, type OverlappingStackItemProps, type OverlappingStackMode, type UseOverlappingStackOptions, type UseOverlappingStackResult, } from './use-overlapping-stack';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/overlapping-stack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/overlapping-stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,yBAAyB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACnH,OAAO,EACH,mBAAmB,EACnB,KAAK,yBAAyB,EAC9B,KAAK,oBAAoB,EACzB,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,GACjC,MAAM,yBAAyB,CAAC"}

package/dist/components/overlapping-stack/index.js

@@ -0,0 +1,2 @@
+export { OverlappingStack } from './overlapping-stack';
+export { useOverlappingStack, } from './use-overlapping-stack';

package/dist/components/overlapping-stack/overlapping-stack.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { type OverlappingStackDirection, type UseOverlappingStackOptions } from './use-overlapping-stack';
+export type OverlappingStackProps = Omit<React.ComponentProps<'div'>, 'children'> & Omit<UseOverlappingStackOptions, 'count'> & {
+    /** Override auto-derived child count. */
+    count?: number;
+    children?: React.ReactNode;
+    /** Root classes used only in inline mode (e.g. tighter gap). */
+    inlineClassName?: string;
+};
+declare function OverlappingStack({ children, count: countProp, collapseThreshold, overlap, spread, spreadOnHover, overlapDirection, spreadDirection, inlineClassName, className, style, ...props }: OverlappingStackProps): import("react/jsx-runtime").JSX.Element;
+export { OverlappingStack, type OverlappingStackDirection };
+//# sourceMappingURL=overlapping-stack.d.ts.map

package/dist/components/overlapping-stack/overlapping-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlapping-stack.d.ts","sourceRoot":"","sources":["../../../src/components/overlapping-stack/overlapping-stack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,yBAAyB,EAAuB,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAoB/H,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAC7E,IAAI,CAAC,0BAA0B,EAAE,OAAO,CAAC,GAAG;IACxC,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gEAAgE;IAChE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEN,iBAAS,gBAAgB,CAAC,EACtB,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,iBAAiB,EACjB,OAAO,EACP,MAAM,EACN,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACX,EAAE,qBAAqB,2CAuCvB;AAED,OAAO,EAAE,gBAAgB,EAAE,KAAK,yBAAyB,EAAE,CAAC"}

package/dist/components/overlapping-stack/overlapping-stack.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { useOverlappingStack } from './use-overlapping-stack';
+function flattenValidElements(children) {
+    const result = [];
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        if (child.type === React.Fragment) {
+            const { children: fragmentChildren } = child.props;
+            result.push(...flattenValidElements(fragmentChildren));
+            return;
+        }
+        result.push(child);
+    });
+    return result;
+}
+function OverlappingStack({ children, count: countProp, collapseThreshold, overlap, spread, spreadOnHover, overlapDirection, spreadDirection, inlineClassName, className, style, ...props }) {
+    const childArray = flattenValidElements(children);
+    const { mode, rootProps, getItemProps } = useOverlappingStack({
+        count: countProp ?? childArray.length,
+        collapseThreshold,
+        overlap,
+        spread,
+        spreadOnHover,
+        overlapDirection,
+        spreadDirection,
+    });
+    const isInline = mode === 'inline';
+    return (_jsx("div", { "data-slot": rootProps['data-slot'], "data-mode": rootProps['data-mode'], ...props, className: cn(isInline && 'flex w-fit items-center gap-1', isInline ? inlineClassName : rootProps.className, className), style: isInline ? style : { ...rootProps.style, ...style }, children: isInline
+            ? children
+            : childArray.map((child, index) => {
+                const { className: itemClassName, style: itemStyle, ...itemProps } = getItemProps(index);
+                const childElement = child;
+                return React.cloneElement(childElement, {
+                    key: childElement.key ?? index,
+                    ...itemProps,
+                    className: cn(itemClassName, childElement.props.className),
+                    style: { ...itemStyle, ...childElement.props.style },
+                });
+            }) }));
+}
+export { OverlappingStack };

package/dist/components/overlapping-stack/overlapping-stack.stories.d.ts

@@ -0,0 +1,78 @@
+import type { StoryObj } from '@storybook/react';
+import { OverlappingStack } from './overlapping-stack';
+declare const meta: {
+    title: string;
+    component: typeof OverlappingStack;
+    tags: string[];
+    parameters: {
+        layout: string;
+        options: {
+            storySort: {
+                order: string[];
+            };
+        };
+    };
+    argTypes: {
+        count: {
+            control: false;
+            description: string;
+        };
+        children: {
+            control: false;
+        };
+        inlineClassName: {
+            control: false;
+        };
+        className: {
+            control: false;
+        };
+        spreadOnHover: {
+            control: "boolean";
+            description: string;
+        };
+        spread: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        overlap: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        collapseThreshold: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        overlapDirection: {
+            control: "inline-radio";
+            options: string[];
+        };
+        spreadDirection: {
+            control: "inline-radio";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const StackedThreeSpreadOnHover: Story;
+/** Two items with default collapseThreshold (2) — inline row; spreadOnHover has no effect. */
+export declare const InlineTwo: Story;
+export declare const StackedThreeStatic: Story;
+export declare const ExpandOnHoverComparison: Story;
+export declare const OverlapDirectionComparison: Story;
+export declare const RtlSpread: Story;
+export declare const WithAvatarGroup: Story;
+//# sourceMappingURL=overlapping-stack.stories.d.ts.map

package/dist/components/overlapping-stack/overlapping-stack.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlapping-stack.stories.d.ts","sourceRoot":"","sources":["../../../src/components/overlapping-stack/overlapping-stack.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,gBAAgB,EAA8B,MAAM,qBAAqB,CAAC;AAQnF,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuC+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA8BnC,eAAO,MAAM,yBAAyB,EAAE,KAQvC,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KA6BrC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAqDxC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAkBvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAC"}

package/dist/components/overlapping-stack/overlapping-stack.stories.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from '../avatar';
+import { cn } from '../../lib/utils';
+import { OverlappingStack } from './overlapping-stack';
+/** Storybook may infer a `count` control; passing it overrides child length and can force inline mode. */
+function stackArgs(args) {
+    const { children: _children, count: _count, ...stackArgs } = args;
+    return stackArgs;
+}
+const meta = {
+    title: 'Components/OverlappingStack',
+    component: OverlappingStack,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        options: {
+            storySort: {
+                order: [
+                    'Stacked Three Spread On Hover',
+                    'Expand On Hover Comparison',
+                    'Inline Two',
+                    'Stacked Three Static',
+                    'Overlap Direction Comparison',
+                    'Rtl Spread',
+                    'With Avatar Group',
+                ],
+            },
+        },
+    },
+    argTypes: {
+        count: { control: false, description: 'Derived from children in stories; do not set via Controls.' },
+        children: { control: false },
+        inlineClassName: { control: false },
+        className: { control: false },
+        spreadOnHover: {
+            control: 'boolean',
+            description: 'Fan stacked items apart on group hover and focus-within (stacked mode only).',
+        },
+        spread: { control: { type: 'number', min: 0, max: 24, step: 1 } },
+        overlap: { control: { type: 'number', min: 0, max: 24, step: 1 } },
+        collapseThreshold: {
+            control: { type: 'number', min: 0, max: 6, step: 1 },
+            description: 'Inline row when child count ≤ this value. overlap/spread only apply in stacked mode. Keep ≤ 2 for three-marker stories; AvatarGroup uses 0.',
+        },
+        overlapDirection: { control: 'inline-radio', options: ['ltr', 'rtl'] },
+        spreadDirection: { control: 'inline-radio', options: ['ltr', 'rtl'] },
+    },
+};
+export default meta;
+const AVATAR_SRC = 'https://avatars.githubusercontent.com/u/1406596?v=4';
+/** Must forward `className`, `style`, and data attrs — OverlappingStack merges stack props via cloneElement. */
+function MarkerIcon({ label, className, style, ...props }) {
+    return (_jsx("button", { type: "button", "aria-label": label, className: cn('inline-flex size-10 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground ring-2 ring-background', className), style: style, ...props, children: label.slice(0, 1) }));
+}
+const threeMarkers = (_jsxs(_Fragment, { children: [_jsx(MarkerIcon, { label: "Booking A" }), _jsx(MarkerIcon, { label: "Booking B" }), _jsx(MarkerIcon, { label: "Housekeeping" })] }));
+export const StackedThreeSpreadOnHover = {
+    args: {
+        spreadOnHover: true,
+        overlap: 8,
+        spread: 6,
+        collapseThreshold: 2,
+    },
+    render: (args) => _jsx(OverlappingStack, { ...stackArgs(args), children: threeMarkers }),
+};
+/** Two items with default collapseThreshold (2) — inline row; spreadOnHover has no effect. */
+export const InlineTwo = {
+    render: () => (_jsxs(OverlappingStack, { children: [_jsx(MarkerIcon, { label: "Rate override" }), _jsx(MarkerIcon, { label: "Min stay" })] })),
+};
+export const StackedThreeStatic = {
+    args: {
+        spreadOnHover: false,
+        overlap: 8,
+        collapseThreshold: 2,
+    },
+    render: (args) => _jsx(OverlappingStack, { ...stackArgs(args), children: threeMarkers }),
+};
+export const ExpandOnHoverComparison = {
+    args: {
+        spreadOnHover: true,
+        overlap: 8,
+        spread: 6,
+        collapseThreshold: 2,
+    },
+    render: (args) => {
+        const stack = stackArgs(args);
+        return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "spreadOnHover (hover to expand)" }), _jsx(OverlappingStack, { ...stack, children: threeMarkers })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "spreadOnHover=false (overlap only)" }), _jsx(OverlappingStack, { spreadOnHover: false, overlap: stack.overlap, collapseThreshold: stack.collapseThreshold, overlapDirection: stack.overlapDirection, children: threeMarkers })] })] }));
+    },
+};
+export const OverlapDirectionComparison = {
+    args: {
+        spreadOnHover: true,
+        overlap: 8,
+        spread: 6,
+        collapseThreshold: 2,
+    },
+    render: (args) => {
+        const { overlap, spread, collapseThreshold, spreadOnHover } = stackArgs(args);
+        return (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "overlapDirection=ltr" }), _jsx(OverlappingStack, { overlapDirection: "ltr", spreadDirection: "ltr", spreadOnHover: spreadOnHover, overlap: overlap, spread: spread, collapseThreshold: collapseThreshold, children: threeMarkers })] }), _jsxs("div", { className: "flex w-48 flex-col gap-2 self-end border border-dashed border-border p-4", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "overlap ltr + spread rtl (end-aligned)" }), _jsx(OverlappingStack, { overlapDirection: "ltr", spreadDirection: "rtl", spreadOnHover: spreadOnHover, overlap: overlap, spread: spread, collapseThreshold: collapseThreshold, children: threeMarkers })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "overlapDirection=rtl" }), _jsx(OverlappingStack, { overlapDirection: "rtl", spreadDirection: "rtl", spreadOnHover: spreadOnHover, overlap: overlap, spread: spread, collapseThreshold: collapseThreshold, children: threeMarkers })] })] }));
+    },
+};
+export const RtlSpread = {
+    args: {
+        spreadOnHover: true,
+        overlap: 6,
+        spread: 4,
+        collapseThreshold: 2,
+        overlapDirection: 'ltr',
+        spreadDirection: 'rtl',
+    },
+    render: (args) => (_jsx("div", { className: "flex w-48 justify-end border border-dashed border-border p-4", children: _jsxs(OverlappingStack, { ...stackArgs(args), children: [_jsx(MarkerIcon, { label: "Flag" }), _jsx(MarkerIcon, { label: "Gap night" }), _jsx(MarkerIcon, { label: "Promo" })] }) })),
+};
+export const WithAvatarGroup = {
+    args: {
+        spreadOnHover: true,
+        overlap: 8,
+        spread: 6,
+        collapseThreshold: 0,
+    },
+    render: (args) => (_jsxs(AvatarGroup, { ...stackArgs(args), children: [['SC', 'JD', 'AB'].map((fallback) => (_jsxs(Avatar, { children: [_jsx(AvatarImage, { src: fallback === 'SC' ? AVATAR_SRC : '/broken.jpg', alt: fallback }), _jsx(AvatarFallback, { children: fallback })] }, fallback))), _jsx(AvatarGroupCount, { children: "+4" })] })),
+};

package/dist/components/overlapping-stack/use-overlapping-stack.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+export type OverlappingStackDirection = 'ltr' | 'rtl';
+export type OverlappingStackMode = 'inline' | 'stacked';
+export type UseOverlappingStackOptions = {
+    /** Number of stacked items. */
+    count: number;
+    /** Use inline row layout when `count` is at or below this value. */
+    collapseThreshold?: number;
+    /** Pixels each item overlaps the previous one (stacked mode). */
+    overlap?: number;
+    /** Pixels each item moves on group hover/focus per index (stacked mode, when `spreadOnHover`). */
+    spread?: number;
+    /**
+     * When `true`, stacked items fan apart on group hover and `focus-within`.
+     * Has no effect in inline mode (when `count` is at or below `collapseThreshold`).
+     */
+    spreadOnHover?: boolean;
+    /**
+     * Which way each item overlaps the previous one.
+     * `ltr`: negative `margin-inline-start`. `rtl`: negative `margin-inline-end` + reversed flex order.
+     * @default 'ltr'
+     */
+    overlapDirection?: OverlappingStackDirection;
+    /**
+     * Which way items fan on hover/focus. Defaults to `overlapDirection`.
+     */
+    spreadDirection?: OverlappingStackDirection;
+};
+export type OverlappingStackItemProps = {
+    /** Stack item marker; does not replace the child's own `data-slot`. */
+    'data-overlapping-stack-item': true;
+    'data-stack-index': number;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export type UseOverlappingStackResult = {
+    mode: OverlappingStackMode;
+    rootProps: {
+        'data-slot': 'overlapping-stack';
+        'data-mode': OverlappingStackMode;
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    getItemProps: (index: number) => OverlappingStackItemProps;
+};
+export declare function useOverlappingStack({ count, collapseThreshold, overlap, spread, spreadOnHover, overlapDirection: overlapDirectionProp, spreadDirection: spreadDirectionProp, }: UseOverlappingStackOptions): UseOverlappingStackResult;
+//# sourceMappingURL=use-overlapping-stack.d.ts.map

package/dist/components/overlapping-stack/use-overlapping-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-overlapping-stack.d.ts","sourceRoot":"","sources":["../../../src/components/overlapping-stack/use-overlapping-stack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,yBAAyB,GAAG,KAAK,GAAG,KAAK,CAAC;AAEtD,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExD,MAAM,MAAM,0BAA0B,GAAG;IACrC,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kGAAkG;IAClG,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;IAC7C;;OAEG;IACH,eAAe,CAAC,EAAE,yBAAyB,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACpC,uEAAuE;IACvE,6BAA6B,EAAE,IAAI,CAAC;IACpC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACpC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,SAAS,EAAE;QACP,WAAW,EAAE,mBAAmB,CAAC;QACjC,WAAW,EAAE,oBAAoB,CAAC;QAClC,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC/B,CAAC;IACF,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,yBAAyB,CAAC;CAC9D,CAAC;AAmBF,wBAAgB,mBAAmB,CAAC,EAChC,KAAK,EACL,iBAAqB,EACrB,OAAW,EACX,MAAU,EACV,aAAqB,EACrB,gBAAgB,EAAE,oBAA4B,EAC9C,eAAe,EAAE,mBAAmB,GACvC,EAAE,0BAA0B,GAAG,yBAAyB,CAuCxD"}

package/dist/components/overlapping-stack/use-overlapping-stack.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const STACKED_ITEM_Z = 'z-[var(--stack-z)]';
+const STACKED_ITEM_BASE = 'relative shrink-0 transition-transform duration-200 ease-out group-hover/stack:z-10 group-hover/stack:[&:hover]:z-20 group-focus-within/stack:z-10 group-focus-within/stack:[&:focus-within]:z-20';
+/** Use transform, not Tailwind translate-x — v4 translate-x sets `translate: var(--tw-translate-x) var(--tw-translate-y)` and --tw-translate-y is unset without translate-y-0, invalidating the whole declaration. */
+const SPREAD_LTR = 'group-hover/stack:[transform:translateX(calc(var(--stack-index)*var(--spread)))] group-focus-within/stack:[transform:translateX(calc(var(--stack-index)*var(--spread)))]';
+const SPREAD_RTL = 'group-hover/stack:[transform:translateX(calc(var(--stack-index)*var(--spread)*-1))] group-focus-within/stack:[transform:translateX(calc(var(--stack-index)*var(--spread)*-1))]';
+function getOverlapMargin(overlapDirection, overlap, index) {
+    if (index === 0)
+        return undefined;
+    return overlapDirection === 'ltr' ? { marginInlineStart: -overlap } : { marginInlineEnd: -overlap };
+}
+export function useOverlappingStack({ count, collapseThreshold = 2, overlap = 8, spread = 6, spreadOnHover = false, overlapDirection: overlapDirectionProp = 'ltr', spreadDirection: spreadDirectionProp, }) {
+    const overlapDirection = overlapDirectionProp;
+    const spreadDirection = spreadDirectionProp ?? overlapDirection;
+    const mode = count <= collapseThreshold ? 'inline' : 'stacked';
+    const rootProps = mode === 'inline'
+        ? {
+            'data-slot': 'overlapping-stack',
+            'data-mode': 'inline',
+        }
+        : {
+            'data-slot': 'overlapping-stack',
+            'data-mode': 'stacked',
+            className: cn('group/stack flex w-fit items-center', overlapDirection === 'rtl' && 'flex-row-reverse'),
+            style: spreadOnHover ? { ['--spread']: `${spread}px` } : undefined,
+        };
+    function getItemProps(index) {
+        if (mode === 'inline') {
+            return {
+                'data-overlapping-stack-item': true,
+                'data-stack-index': index,
+            };
+        }
+        return {
+            'data-overlapping-stack-item': true,
+            'data-stack-index': index,
+            style: {
+                ['--stack-z']: count - index,
+                ...getOverlapMargin(overlapDirection, overlap, index),
+                ...(spreadOnHover ? { ['--stack-index']: String(index) } : undefined),
+            },
+            className: cn(STACKED_ITEM_Z, STACKED_ITEM_BASE, spreadOnHover && (spreadDirection === 'rtl' ? SPREAD_RTL : SPREAD_LTR)),
+        };
+    }
+    return { mode, rootProps, getItemProps };
+}

package/dist/components/sidebar/sidebar.js

@@ -111,7 +111,7 @@ function SidebarInset({ className, ...props }) {
     return (_jsx("main", { "data-slot": "sidebar-inset", className: cn('relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2', className), ...props }));
 }
 function SidebarInput({ className, ...props }) {
-    return _jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn('h-8 w-full bg-background shadow-none', className), ...props });
+    return _jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn('w-full bg-background shadow-none', className), ...props });
 }
 function SidebarHeader({ className, ...props }) {
     return _jsx("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className), ...props });