@wheelhouse/ui 0.1.6 → 0.2.1

package/dist/components/select/select.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../../lib/utils';
+/**
+ * Root for a native-style select. Compose `SelectTrigger`, `SelectValue`, `SelectContent`,
+ * and `SelectItem` parts; optionally set `items` on the root for automatic labels.
+ */
+function Select(props) {
+    return _jsx(SelectPrimitive.Root, { ...props });
+}
+/** Groups `SelectItem` rows with optional `SelectLabel`. */
+function SelectGroup({ className, ...props }) {
+    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn('scroll-my-1 p-1', className), ...props });
+}
+/** Displays the selected label or `placeholder` when empty. */
+function SelectValue({ className, ...props }) {
+    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", className: cn('flex flex-1 text-left', className), ...props });
+}
+/** Button that opens the list popup; shows a chevron icon. */
+function SelectTrigger({ className, size = 'default', children, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none 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-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDown, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
+}
+/** Portal, positioner, and scrollable list surface for options. */
+function SelectContent({ className, children, side = 'bottom', sideOffset = 4, align = 'center', alignOffset = 0, alignItemWithTrigger = true, ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn('relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
+}
+/** Section label inside the list. */
+function SelectLabel({ className, ...props }) {
+    return _jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn('px-1.5 py-1 text-xs text-muted-foreground', className), ...props });
+}
+/** One selectable option; shows a check when selected. */
+function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(Check, { className: "pointer-events-none" }) })] }));
+}
+/** Horizontal rule between groups or items. */
+function SelectSeparator({ className, ...props }) {
+    return _jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn('pointer-events-none -mx-1 my-1 h-px bg-border', className), ...props });
+}
+/** Scroll affordance at the top of a long list (pointer/hover). */
+function SelectScrollUpButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpArrow, { "data-slot": "select-scroll-up-button", className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronUp, {}) }));
+}
+/** Scroll affordance at the bottom of a long list (pointer/hover). */
+function SelectScrollDownButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownArrow, { "data-slot": "select-scroll-down-button", className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronDown, {}) }));
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from './select';
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SmallTrigger: Story;
+export declare const WithSeparator: Story;
+//# sourceMappingURL=select.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAoG,MAAM,UAAU,CAAC;AAEpI,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAO7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAC"}

package/dist/components/select/select.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from './select';
+const meta = {
+    title: 'UI/Select',
+    component: Select,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Select, { defaultValue: "apple", children: [_jsx(SelectTrigger, { className: "min-w-44", children: _jsx(SelectValue, { placeholder: "Pick a fruit" }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Fruits" }), _jsx(SelectItem, { value: "apple", children: "Apple" }), _jsx(SelectItem, { value: "banana", children: "Banana" }), _jsx(SelectItem, { value: "orange", children: "Orange" })] }) })] })),
+};
+export const SmallTrigger = {
+    render: () => (_jsxs(Select, { defaultValue: "us", children: [_jsx(SelectTrigger, { size: "sm", className: "min-w-36", children: _jsx(SelectValue, { placeholder: "Region" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "us", children: "United States" }), _jsx(SelectItem, { value: "eu", children: "Europe" }), _jsx(SelectItem, { value: "apac", children: "Asia Pacific" })] })] })),
+};
+export const WithSeparator = {
+    render: () => (_jsxs(Select, { defaultValue: "new", children: [_jsx(SelectTrigger, { className: "min-w-48", children: _jsx(SelectValue, { placeholder: "Action" }) }), _jsxs(SelectContent, { children: [_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "File" }), _jsx(SelectItem, { value: "new", children: "New file" }), _jsx(SelectItem, { value: "open", children: "Open\u2026" })] }), _jsx(SelectSeparator, {}), _jsx(SelectGroup, { children: _jsx(SelectItem, { value: "quit", children: "Quit" }) })] })] })),
+};

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

@@ -1,2 +1,3 @@
 export { Separator } from './separator';
+export type { SeparatorProps } from './separator';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/separator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/separator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/separator/separator.d.ts

@@ -1,4 +1,6 @@
 import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
-declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react/jsx-runtime").JSX.Element;
+/** Props for `Separator` (extends Base UI Separator). */
+export type SeparatorProps = SeparatorPrimitive.Props;
+declare function Separator({ className, orientation, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
 export { Separator };
 //# sourceMappingURL=separator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI3E,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,CAAC,KAAK,2CAS/F;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI3E,yDAAyD;AACzD,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAEtD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CASrF;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

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

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

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

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

package/dist/components/sheet/index.js

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

package/dist/components/sheet/sheet.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
+/** Props for the sheet root. See [Base UI Dialog](https://base-ui.com/react/components/dialog) (sheet uses the same primitive). */
+export type SheetProps = SheetPrimitive.Root.Props;
+declare function Sheet({ ...props }: SheetProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the element that opens the sheet (typically a button). */
+export type SheetTriggerProps = SheetPrimitive.Trigger.Props;
+declare function SheetTrigger({ ...props }: SheetTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the close control (button or custom `render`). */
+export type SheetCloseProps = SheetPrimitive.Close.Props;
+declare function SheetClose({ ...props }: SheetCloseProps): import("react/jsx-runtime").JSX.Element;
+export type SheetPortalProps = SheetPrimitive.Portal.Props;
+declare function SheetPortal({ ...props }: SheetPortalProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the dimmed backdrop behind the sheet. */
+export type SheetOverlayProps = SheetPrimitive.Backdrop.Props;
+declare function SheetOverlay({ className, ...props }: SheetOverlayProps): import("react/jsx-runtime").JSX.Element;
+/** Props for the sliding surface; extends the Base UI popup with `side` and `showCloseButton`. */
+export type SheetContentProps = SheetPrimitive.Popup.Props & {
+    /** Which edge of the viewport the sheet slides from. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** When `true` (default), renders a ghost icon button in the corner that closes the sheet. */
+    showCloseButton?: boolean;
+};
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetContentProps): import("react/jsx-runtime").JSX.Element;
+export type SheetHeaderProps = React.ComponentProps<'div'>;
+declare function SheetHeader({ className, ...props }: SheetHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type SheetFooterProps = React.ComponentProps<'div'>;
+declare function SheetFooter({ className, ...props }: SheetFooterProps): import("react/jsx-runtime").JSX.Element;
+export type SheetTitleProps = SheetPrimitive.Title.Props;
+declare function SheetTitle({ className, ...props }: SheetTitleProps): import("react/jsx-runtime").JSX.Element;
+export type SheetDescriptionProps = SheetPrimitive.Description.Props;
+declare function SheetDescription({ className, ...props }: SheetDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };
+//# sourceMappingURL=sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/sheet/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAMjE,mIAAmI;AACnI,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;AAEnD,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAEtC;AAED,uEAAuE;AACvE,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC;AAE7D,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAEpD;AAED,+DAA+D;AAC/D,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAEhD;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC;AAE3D,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAElD;AAED,sDAAsD;AACtD,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;AAE9D,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAW/D;AAED,kGAAkG;AAClG,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG;IACzD,wDAAwD;IACxD,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,8FAA8F;IAC9F,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAc,EAAE,eAAsB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAuBjH;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3D,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAE7D;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE3D,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAE7D;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAE3D;AAED,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,KAAK,CAAC;AAErE,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAEvE;AAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/sheet/sheet.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
+import { X } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+function Sheet({ ...props }) {
+    return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+    return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+    return _jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+    return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+    return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn('fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs', className), ...props }));
+}
+function SheetContent({ className, children, side = 'right', showCloseButton = true, ...props }) {
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn('fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm', className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-3 right-3", size: "icon-sm" }), children: [_jsx(X, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function SheetHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "sheet-header", className: cn('flex flex-col gap-0.5 p-4', className), ...props });
+}
+function SheetFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "sheet-footer", className: cn('mt-auto flex flex-col gap-2 p-4', className), ...props });
+}
+function SheetTitle({ className, ...props }) {
+    return _jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn('font-heading text-base font-medium text-foreground', className), ...props });
+}
+function SheetDescription({ className, ...props }) {
+    return _jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn('text-sm text-muted-foreground', className), ...props });
+}
+export { Sheet, SheetTrigger, SheetClose, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Sheet } from './sheet';
+declare const meta: Meta<typeof Sheet>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FromLeft: Story;
+export declare const WithoutBuiltInClose: Story;
+//# sourceMappingURL=sheet.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.stories.d.ts","sourceRoot":"","sources":["../../../src/components/sheet/sheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,KAAK,EAAyE,MAAM,SAAS,CAAC;AAEvG,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAO5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAYjC,CAAC"}

package/dist/components/sheet/sheet.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './sheet';
+const meta = {
+    title: 'UI/Sheet',
+    component: Sheet,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Open sheet" }), _jsx(SheetContent, { children: _jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Sheet title" }), _jsx(SheetDescription, { children: "Supporting copy for this slide-over panel." })] }) })] })),
+};
+export const FromLeft = {
+    render: () => (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "From left" }), _jsx(SheetContent, { side: "left", children: _jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "Navigation" }), _jsx(SheetDescription, { children: "Common pattern for narrow viewports." })] }) })] })),
+};
+export const WithoutBuiltInClose = {
+    render: () => (_jsxs(Sheet, { children: [_jsx(SheetTrigger, { render: _jsx(Button, { variant: "outline", size: "sm" }), children: "Open" }), _jsx(SheetContent, { showCloseButton: false, children: _jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: "No corner close" }), _jsx(SheetDescription, { children: "Use Escape or a footer action to dismiss." })] }) })] })),
+};

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

@@ -0,0 +1,3 @@
+export { Slider } from './slider';
+export type { SliderProps } from './slider';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export { Slider } from './slider';

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,15 @@
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+/**
+ * Props for `Slider`. Inherits additional behavior from
+ * [Base UI Slider](https://base-ui.com/react/components/slider).
+ */
+export type SliderProps = SliderPrimitive.Root.Props & {
+    className?: string;
+};
+/**
+ * Range input for choosing a numeric value or a pair of values. Renders track, range indicator, and thumb(s)
+ * with horizontal or vertical orientation. For range selection, pass `value` or `defaultValue` as a two-element array.
+ */
+declare function Slider({ className, defaultValue, value, min, max, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export { Slider };
+//# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAUlE;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9E;;;GAGG;AACH,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,GAAO,EAAE,GAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAkC5F;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/slider/slider.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+import { cn } from '../../lib/utils';
+function thumbCountFromProps(value, defaultValue) {
+    if (Array.isArray(value))
+        return value.length;
+    if (Array.isArray(defaultValue))
+        return defaultValue.length;
+    return 1;
+}
+/**
+ * Range input for choosing a numeric value or a pair of values. Renders track, range indicator, and thumb(s)
+ * with horizontal or vertical orientation. For range selection, pass `value` or `defaultValue` as a two-element array.
+ */
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
+    const thumbCount = thumbCountFromProps(value, defaultValue);
+    return (_jsx(SliderPrimitive.Root, { className: cn('data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full', className), "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, thumbAlignment: "edge", ...props, children: _jsxs(SliderPrimitive.Control, { className: "relative flex w-full touch-none items-center select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-disabled:opacity-50", children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative grow overflow-hidden rounded-full bg-muted select-none data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1", children: _jsx(SliderPrimitive.Indicator, { "data-slot": "slider-range", className: "bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" }) }), Array.from({ length: thumbCount }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50" }, index)))] }) }));
+}
+export { Slider };

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Slider } from './slider';
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Range: Story;
+export declare const Vertical: Story;
+export declare const Disabled: Story;
+export declare const Gallery: Story;
+//# sourceMappingURL=slider.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.stories.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAc7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC"}

package/dist/components/slider/slider.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from '../label';
+import { Slider } from './slider';
+const meta = {
+    title: 'UI/Slider',
+    component: Slider,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "flex w-64 min-w-[16rem] flex-col gap-3", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { id: "story-slider-default", children: "Volume" }), _jsx(Slider, { ...args, defaultValue: 40, "aria-labelledby": "story-slider-default" })] })),
+};
+export const Range = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { id: "story-slider-range-label", children: "Price range" }), _jsx(Slider, { ...args, defaultValue: [20, 80], "aria-labelledby": "story-slider-range-label" })] })),
+};
+export const Vertical = {
+    parameters: { layout: 'padded' },
+    decorators: [
+        (Story) => (_jsx("div", { className: "flex h-48 items-stretch justify-center py-4", children: _jsx(Story, {}) })),
+    ],
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { id: "story-slider-v", className: "sr-only", children: "Level" }), _jsx(Slider, { ...args, orientation: "vertical", defaultValue: 55, "aria-labelledby": "story-slider-v" })] })),
+};
+export const Disabled = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(Label, { id: "story-slider-dis", children: "Disabled" }), _jsx(Slider, { ...args, defaultValue: 30, disabled: true, "aria-labelledby": "story-slider-dis" })] })),
+};
+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, { id: "gal-1", children: "Brightness" }), _jsx(Slider, { defaultValue: 65, "aria-labelledby": "gal-1" })] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Range" }), _jsx(Label, { id: "gal-2-label", children: "Select range" }), _jsx(Slider, { defaultValue: [25, 75], "aria-labelledby": "gal-2-label" })] }), _jsxs("section", { className: "flex flex-col gap-2", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Step" }), _jsx(Label, { id: "gal-3", children: "Snap by 10" }), _jsx(Slider, { min: 0, max: 100, step: 10, defaultValue: 50, "aria-labelledby": "gal-3" })] })] })),
+};

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

@@ -0,0 +1,4 @@
+export { Toaster } from './sonner';
+export { toast } from './toast';
+export type { ToasterProps } from 'sonner';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sonner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/sonner/index.js

@@ -0,0 +1,2 @@
+export { Toaster } from './sonner';
+export { toast } from './toast';

package/dist/components/sonner/sonner.d.ts

@@ -0,0 +1,12 @@
+import { type ToasterProps } from 'sonner';
+/**
+ * Opinionated [Sonner](https://sonner.emilkowal.ski/) toaster: Wheelhouse popover tokens, Lucide icons,
+ * and `cn-toast` class for styling. Mount once near the app root.
+ *
+ * Defaults to **`theme="system"`** so light/dark follows the OS; in Next.js with `next-themes`, pass
+ * **`theme={resolvedTheme}`** (or map `resolvedTheme` to `'light' | 'dark'`) from your layout if you
+ * rely on the `.dark` class instead of system preference.
+ */
+declare function Toaster({ theme, ...props }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export { Toaster };
+//# sourceMappingURL=sonner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../../src/components/sonner/sonner.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAG9D;;;;;;;GAOG;AACH,iBAAS,OAAO,CAAC,EAAE,KAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CA4B5D;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/sonner/sonner.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Toaster as Sonner } from 'sonner';
+import { AlertTriangle, CheckCircle, Info, Loader2, XCircle } from 'lucide-react';
+/**
+ * Opinionated [Sonner](https://sonner.emilkowal.ski/) toaster: Wheelhouse popover tokens, Lucide icons,
+ * and `cn-toast` class for styling. Mount once near the app root.
+ *
+ * Defaults to **`theme="system"`** so light/dark follows the OS; in Next.js with `next-themes`, pass
+ * **`theme={resolvedTheme}`** (or map `resolvedTheme` to `'light' | 'dark'`) from your layout if you
+ * rely on the `.dark` class instead of system preference.
+ */
+function Toaster({ theme = 'system', ...props }) {
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
+            success: _jsx(CheckCircle, { className: "size-4" }),
+            info: _jsx(Info, { className: "size-4" }),
+            warning: _jsx(AlertTriangle, { className: "size-4" }),
+            error: _jsx(XCircle, { className: "size-4" }),
+            loading: _jsx(Loader2, { className: "size-4 animate-spin" }),
+        }, style: {
+            '--normal-bg': 'var(--popover)',
+            '--normal-text': 'var(--popover-foreground)',
+            '--normal-border': 'var(--border)',
+            '--border-radius': 'var(--radius)',
+        }, toastOptions: {
+            classNames: {
+                toast: 'cn-toast',
+            },
+        }, ...props }));
+}
+export { Toaster };

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toaster } from './index';
+declare const meta: Meta<typeof Toaster>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Variants: Story;
+//# sourceMappingURL=sonner.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sonner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/sonner/sonner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAS,OAAO,EAAE,MAAM,SAAS,CAAC;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAe9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC"}

package/dist/components/sonner/sonner.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button';
+import { toast, Toaster } from './index';
+const meta = {
+    title: 'UI/Sonner',
+    component: Toaster,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (_jsxs(_Fragment, { children: [_jsx(Story, {}), _jsx(Toaster, {})] })),
+    ],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+            toast('Event has been created', {
+                description: 'Monday, January 3rd at 6:00pm',
+            });
+        }, children: "Show toast" })),
+};
+export const Variants = {
+    render: () => (_jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => toast.success('Saved'), children: "Success" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => toast.info('FYI'), children: "Info" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => toast.warning('Heads up'), children: "Warning" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => toast.error('Something went wrong'), children: "Error" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => toast.loading('Loading…'), children: "Loading" })] })),
+};

package/dist/components/sonner/toast.d.ts

@@ -0,0 +1,2 @@
+export { toast } from 'sonner';
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/sonner/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/sonner/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/sonner/toast.js

@@ -0,0 +1 @@
+export { toast } from 'sonner';

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

@@ -0,0 +1,3 @@
+export { Sortable, SortableItem, SortableItemHandle, SortableOverlay } from './sortable';
+export type { SortableItemHandleProps, SortableItemProps, SortableOverlayProps, SortableRootProps } from './sortable';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACzF,YAAY,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/sortable/index.js

@@ -0,0 +1 @@
+export { Sortable, SortableItem, SortableItemHandle, SortableOverlay } from './sortable';

package/dist/components/sortable/sortable.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Drag-and-drop sortable lists and grids built on [dnd-kit](https://dndkit.com/).
+ *
+ * Compose **`Sortable`** (root) with **`SortableItem`** rows and an optional **`SortableItemHandle`**
+ * for the drag affordance. The root renders a **`DragOverlay`** portal while dragging; use
+ * **`SortableOverlay`** only when you need a fully custom overlay.
+ *
+ * @packageDocumentation
+ */
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type DragEndEvent, DragOverlay, type DragStartEvent, type Modifiers, type UniqueIdentifier } from '@dnd-kit/core';
+/**
+ * Props for {@link Sortable}. `T` is your row model; stable string ids come from {@link SortableRootProps.getItemValue}.
+ *
+ * @typeParam T - Item type in the controlled `value` array.
+ */
+export interface SortableRootProps<T> extends Omit<useRender.ComponentProps<'div'>, 'onDragStart' | 'onDragEnd' | 'children'> {
+    /** Controlled list; order updates when items are reordered (unless {@link SortableRootProps.onMove} handles persistence). */
+    value: T[];
+    /** Called with the next array when the user drops an item in a new position. */
+    onValueChange: (value: T[]) => void;
+    /** Stable string id for each item; must match the corresponding {@link SortableItemProps.value}. */
+    getItemValue: (item: T) => string;
+    /** Typically a list of `SortableItem` elements (one per row). */
+    children: ReactNode;
+    /**
+     * Optional full control on drop: receive indices and apply `value` yourself (e.g. server mutation).
+     * When omitted, the root calls `onValueChange` with an array moved via dnd-kit `arrayMove`.
+     */
+    onMove?: (event: {
+        event: DragEndEvent;
+        activeIndex: number;
+        overIndex: number;
+    }) => void;
+    /**
+     * Layout strategy for `@dnd-kit/sortable`: vertical list, horizontal/flow, or grid (both use rect sorting).
+     * @defaultValue vertical
+     */
+    strategy?: 'horizontal' | 'vertical' | 'grid';
+    /** Passed through to `DndContext`; invoked when a drag starts. */
+    onDragStart?: (event: DragStartEvent) => void;
+    /** Passed through to `DndContext`; invoked when a drag ends (after reorder logic). */
+    onDragEnd?: (event: DragEndEvent) => void;
+    /** Optional dnd-kit modifiers (e.g. `restrictToParentElement`) for both context and overlay. */
+    modifiers?: Modifiers;
+}
+/**
+ * Root for a sortable region. Wires `DndContext`, `SortableContext`, sensors, and a `DragOverlay` portal on the client.
+ *
+ * Renders the default element as a `div` with `data-slot="sortable"` (see Base UI `useRender` / `render` prop).
+ */
+declare function Sortable<T>({ value, onValueChange, getItemValue, className, render, onMove, strategy, onDragStart, onDragEnd, modifiers, children, ...props }: SortableRootProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for {@link SortableItem}. `value` is the sortable id (string) registered with dnd-kit.
+ */
+export interface SortableItemProps extends useRender.ComponentProps<'div'> {
+    /** Must match `getItemValue(item)` for that row and be unique among siblings. */
+    value: string;
+    /** When true, the item does not participate in dragging. */
+    disabled?: boolean;
+}
+/**
+ * One row in a sortable list. Provides `data-slot="sortable-item"` and sortable transforms unless rendered inside a drag overlay clone.
+ */
+declare function SortableItem({ value, className, render, disabled, ...props }: SortableItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for {@link SortableItemHandle}. Spread `listeners` from context onto this node (handled internally).
+ */
+export interface SortableItemHandleProps extends useRender.ComponentProps<'div'> {
+    /** When true (default), applies grab/grabbing cursor classes while dragging. */
+    cursor?: boolean;
+}
+/**
+ * Drag handle for a `SortableItem`. Must be nested under `SortableItem` so listeners and drag state apply.
+ */
+declare function SortableItemHandle({ className, render, cursor, ...props }: SortableItemHandleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/**
+ * Props for {@link SortableOverlay}. Extends dnd-kit `DragOverlay` except `children`, which may be a render function receiving the active id.
+ */
+export interface SortableOverlayProps extends Omit<React.ComponentProps<typeof DragOverlay>, 'children'> {
+    /** Static node or function `({ value }) => …` for custom overlay content tied to the active item id. */
+    children?: ReactNode | ((params: {
+        value: UniqueIdentifier;
+    }) => ReactNode);
+}
+/**
+ * Alternate overlay entry: renders `DragOverlay` in a portal with shared modifiers/animation from `Sortable` context.
+ * Prefer the built-in overlay on `Sortable` unless you need this API.
+ */
+declare function SortableOverlay({ children, className, ...props }: SortableOverlayProps): React.ReactPortal | null;
+export { Sortable, SortableItem, SortableItemHandle, SortableOverlay };
+//# sourceMappingURL=sortable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/sortable.tsx"],"names":[],"mappings":"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"}