@wheelhouse/ui 0.2.0 → 0.2.1

package/dist/components/filters/filters.js

@@ -12,7 +12,7 @@ import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGr
 import { Kbd } from '../kbd';
 import { ScrollArea } from '../scroll-area';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
-import { CheckIcon, WarningCircleIcon, XIcon } from '@phosphor-icons/react/dist/ssr';
+import { AlertCircle, Check, X } from 'lucide-react';
 import { createOperatorsFromI18n, DEFAULT_I18N } from './filters-defaults';
 import { createFilter } from './filters-utils';
 const FilterContext = createContext({
@@ -113,9 +113,9 @@ 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(WarningCircleIcon, { 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, "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 }) }))] }));
 }
-function FilterRemoveButton({ className, icon = _jsx(XIcon, {}), ...props }) {
+function FilterRemoveButton({ className, icon = _jsx(X, {}), ...props }) {
     const context = useFilterContext();
     return (_jsx(Button, { variant: "outline", size: context.size === 'sm' ? 'icon-sm' : context.size === 'lg' ? 'icon-lg' : 'icon', className: className, ...props, children: icon }));
 }
@@ -171,7 +171,7 @@ function FilterOperatorDropdown({ field, operator, values, onChange }) {
     const operators = getOperatorsForField(field, values, context.i18n);
     // Find the operator label, with fallback to formatted operator name
     const operatorLabel = operators.find((op) => op.value === operator)?.label || context.i18n.helpers.formatOperator(operator);
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", size: context.size, className: "text-muted-foreground hover:text-foreground", children: operatorLabel }) }), _jsx(DropdownMenuContent, { align: "start", className: "w-fit min-w-fit", children: operators.map((op) => (_jsxs(DropdownMenuItem, { onClick: () => onChange(op.value), className: cn('flex items-center justify-between data-highlighted:bg-accent data-highlighted:text-accent-foreground'), children: [_jsx("span", { children: op.label }), _jsx(CheckIcon, { className: cn('ms-auto text-primary', op.value === operator ? 'opacity-100' : 'opacity-0') })] }, op.value))) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "outline", size: context.size, className: "text-muted-foreground hover:text-foreground", children: operatorLabel }) }), _jsx(DropdownMenuContent, { align: "start", className: "w-fit min-w-fit", children: operators.map((op) => (_jsxs(DropdownMenuItem, { onClick: () => onChange(op.value), className: cn('flex items-center justify-between data-highlighted:bg-accent data-highlighted:text-accent-foreground'), children: [_jsx("span", { children: op.label }), _jsx(Check, { className: cn('ms-auto text-primary', op.value === operator ? 'opacity-100' : 'opacity-0') })] }, op.value))) })] }));
 }
 function SelectOptionsPopover({ field, values, onChange, onClose, inline = false }) {
     const [open, setOpen] = useState(false);

package/dist/components/filters/filters.stories.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { FunnelSimpleIcon, TagIcon } from '@phosphor-icons/react/dist/ssr';
+import { Filter as FilterIcon, Tag } from 'lucide-react';
 import { Button } from '../button';
 import { createFilter, Filters } from '.';
 const demoFields = [
@@ -9,7 +9,7 @@ const demoFields = [
         key: 'status',
         label: 'Status',
         type: 'select',
-        icon: _jsx(FunnelSimpleIcon, { className: "size-4" }),
+        icon: _jsx(FilterIcon, { className: "size-4" }),
         options: [
             { value: 'active', label: 'Active' },
             { value: 'draft', label: 'Draft' },
@@ -20,7 +20,7 @@ const demoFields = [
         label: 'Name',
         type: 'text',
         placeholder: 'Contains…',
-        icon: _jsx(TagIcon, { className: "size-4" }),
+        icon: _jsx(Tag, { className: "size-4" }),
     },
 ];
 function FiltersStoryHost() {

package/dist/components/frame/frame.d.ts

@@ -25,7 +25,7 @@ import { type VariantProps } from 'class-variance-authority';
  */
 declare const frameVariants: (props?: ({
     variant?: "default" | "ghost" | "inverse" | null | undefined;
-    spacing?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    spacing?: "default" | "sm" | "lg" | "xs" | null | undefined;
     stacked?: boolean | null | undefined;
     dense?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/index.d.ts

@@ -7,12 +7,14 @@ export * from './badge';
 export * from './breadcrumb';
 export * from './button';
 export * from './button-group';
+export * from './calendar';
 export * from './card';
 export * from './checkbox';
 export * from './collapsible';
 export * from './command';
 export * from './combobox';
 export * from './context-menu';
+export * from './date-selector';
 export * from './dialog';
 export * from './direction';
 export * from './drawer';
@@ -41,7 +43,9 @@ export * from './select';
 export * from './sheet';
 export * from './slider';
 export * from './sonner';
+export * from './sortable';
 export * from './spinner';
+export * from './status-indicator';
 export * from './switch';
 export * from './tabs';
 export * from './text';

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,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,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,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,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,iBAAiB,CAAC;AAChC,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,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

@@ -7,12 +7,14 @@ export * from './badge';
 export * from './breadcrumb';
 export * from './button';
 export * from './button-group';
+export * from './calendar';
 export * from './card';
 export * from './checkbox';
 export * from './collapsible';
 export * from './command';
 export * from './combobox';
 export * from './context-menu';
+export * from './date-selector';
 export * from './dialog';
 export * from './direction';
 export * from './drawer';
@@ -41,7 +43,9 @@ export * from './select';
 export * from './sheet';
 export * from './slider';
 export * from './sonner';
+export * from './sortable';
 export * from './spinner';
+export * from './status-indicator';
 export * from './switch';
 export * from './tabs';
 export * from './text';

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

@@ -6,13 +6,13 @@ 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-start" | "block-end" | 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`. */
 export type InputGroupAddonProps = React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const inputGroupButtonSizeKeys: readonly ["xs", "sm", "icon-xs", "icon-sm"];
 /** Props for `InputGroupButton` (ghost button sized for use inside a group). */

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass';
+import { Search } from 'lucide-react';
 import { Kbd } from '../kbd';
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from '.';
 const meta = {
@@ -15,7 +15,7 @@ export const Default = {
     render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "example.com" })] }) })),
 };
 export const WithTrailingButton = {
-    render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(MagnifyingGlassIcon, { className: "size-4" }) }) })] }) })),
+    render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(Search, { className: "size-4" }) }) })] }) })),
 };
 export const WithKbd = {
     render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Command\u2026" }), _jsxs(InputGroupAddon, { align: "inline-end", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] }) })),
@@ -25,5 +25,5 @@ export const Textarea = {
 };
 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: "URL prefix" }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "yoursite.com" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Trailing action" }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(MagnifyingGlassIcon, { className: "size-4" }) }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Multiline" }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "block-start", children: _jsx(InputGroupText, { children: "Comment" }) }), _jsx(InputGroupTextarea, { rows: 3, placeholder: "Write here\u2026" })] })] })] })),
+    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: "URL prefix" }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "yoursite.com" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Trailing action" }), _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(Search, { className: "size-4" }) }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Multiline" }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "block-start", children: _jsx(InputGroupText, { children: "Comment" }) }), _jsx(InputGroupTextarea, { rows: 3, placeholder: "Write here\u2026" })] })] })] })),
 };

package/dist/components/item/item.d.ts

@@ -8,7 +8,7 @@ export type ItemGroupProps = React.ComponentProps<'div'>;
 export type ItemSeparatorProps = React.ComponentProps<typeof Separator>;
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;
-    size?: "default" | "xs" | "sm" | null | undefined;
+    size?: "default" | "sm" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const itemVariantKeys: readonly ["default", "outline", "muted"];
 export declare const itemSizeKeys: readonly ["default", "sm", "xs"];
@@ -17,7 +17,7 @@ export declare const itemSizeKeys: readonly ["default", "sm", "xs"];
  */
 export type ItemProps = useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>;
 declare const itemMediaVariants: (props?: ({
-    variant?: "image" | "default" | "icon" | null | undefined;
+    variant?: "default" | "image" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const itemMediaVariantKeys: readonly ["default", "icon", "image"];
 /** Props for `ItemMedia`. */

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

@@ -1 +1 @@
-{"version":3,"file":"item.stories.d.ts","sourceRoot":"","sources":["../../../src/components/item/item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,EACH,IAAI,EAaP,MAAM,GAAG,CAAC;AAEX,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAgBmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA+FrB,CAAC"}
+{"version":3,"file":"item.stories.d.ts","sourceRoot":"","sources":["../../../src/components/item/item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EACH,IAAI,EAaP,MAAM,GAAG,CAAC;AAEX,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAgBmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA2FrB,CAAC"}

package/dist/components/item/item.stories.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BellIcon } from '@phosphor-icons/react/Bell';
-import { UserIcon } from '@phosphor-icons/react/User';
+import { Bell, User } from 'lucide-react';
 import { Button } from '../button';
 import { Switch } from '../switch';
 import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, itemMediaVariantKeys, ItemSeparator, itemSizeKeys, ItemTitle, itemVariantKeys, } from '.';
@@ -23,19 +22,19 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { ...args, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(BellIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Notifications" }), _jsx(ItemDescription, { children: "Email, push, and in-app alerts." })] }), _jsx(ItemActions, { children: _jsx(Switch, { "aria-label": "Enable notifications", defaultChecked: true }) })] }) })),
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { ...args, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Notifications" }), _jsx(ItemDescription, { children: "Email, push, and in-app alerts." })] }), _jsx(ItemActions, { children: _jsx(Switch, { "aria-label": "Enable notifications", defaultChecked: true }) })] }) })),
 };
 export const Outline = {
     args: { variant: 'outline' },
-    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { ...args, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(UserIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Profile" }), _jsx(ItemDescription, { children: "Manage your public name and avatar." })] }), _jsx(ItemActions, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Edit" }) })] }) })),
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { ...args, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(User, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Profile" }), _jsx(ItemDescription, { children: "Manage your public name and avatar." })] }), _jsx(ItemActions, { children: _jsx(Button, { size: "sm", variant: "outline", children: "Edit" }) })] }) })),
 };
 export const AsLink = {
     render: () => (_jsx("div", { className: "w-full max-w-md", children: _jsxs(Item, { render: 
             // Children are merged from `Item` by useRender; ESLint cannot see them on this JSX node.
             // eslint-disable-next-line jsx-a11y/anchor-has-content -- runtime children from Item
-            _jsx("a", { href: "https://example.org", className: "cursor-pointer", rel: "noreferrer", target: "_blank" }), children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(BellIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Open settings" }), _jsxs(ItemDescription, { children: ["Entire row is a link when using ", _jsx("code", { className: "rounded bg-muted px-1", children: "render" }), "."] })] })] }) })),
+            _jsx("a", { href: "https://example.org", className: "cursor-pointer", rel: "noreferrer", target: "_blank" }), children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Open settings" }), _jsxs(ItemDescription, { children: ["Entire row is a link when using ", _jsx("code", { className: "rounded bg-muted px-1", children: "render" }), "."] })] })] }) })),
 };
 export const Gallery = {
     parameters: { layout: 'padded' },
-    render: () => (_jsxs("div", { className: "flex max-w-lg flex-col gap-10", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Variants" }), _jsx(ItemGroup, { children: itemVariantKeys.map((variant) => (_jsxs(Item, { variant: variant, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(BellIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "capitalize", children: variant }), _jsx(ItemDescription, { children: "Variant preset for list rows." })] })] }, variant))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Sizes" }), _jsx(ItemGroup, { children: itemSizeKeys.map((size) => (_jsxs(Item, { size: size, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(UserIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "capitalize", children: size }), _jsx(ItemDescription, { children: "Spacing for dense menus or roomy panels." })] })] }, size))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With header & footer" }), _jsxs(Item, { variant: "outline", children: [_jsxs(ItemHeader, { children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase", children: "Section" }), _jsx(Button, { size: "xs", variant: "ghost", children: "More" })] }), _jsx(ItemMedia, { variant: "icon", children: _jsx(BellIcon, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Grouped layout" }), _jsx(ItemDescription, { children: "Header and footer span the full width of the item." })] }), _jsx(ItemFooter, { children: _jsx("span", { className: "text-xs text-muted-foreground", children: "Updated today" }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Media variants" }), _jsx("div", { className: "flex flex-col gap-2", children: itemMediaVariantKeys.map((mv) => (_jsxs(Item, { children: [_jsx(ItemMedia, { variant: mv, children: mv === 'image' ? (_jsx("img", { src: "https://avatars.githubusercontent.com/u/1406596?v=4", alt: "" })) : mv === 'icon' ? (_jsx(BellIcon, {})) : null }), _jsxs(ItemContent, { children: [_jsxs(ItemTitle, { className: "capitalize", children: [mv, " media"] }), _jsx(ItemDescription, { children: "Leading visual treatment." })] })] }, mv))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Separated list" }), _jsxs(ItemGroup, { children: [_jsx(Item, { size: "sm", children: _jsx(ItemContent, { children: _jsx(ItemTitle, { children: "First" }) }) }), _jsx(ItemSeparator, {}), _jsx(Item, { size: "sm", children: _jsx(ItemContent, { children: _jsx(ItemTitle, { children: "Second" }) }) })] })] })] })),
+    render: () => (_jsxs("div", { className: "flex max-w-lg flex-col gap-10", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Variants" }), _jsx(ItemGroup, { children: itemVariantKeys.map((variant) => (_jsxs(Item, { variant: variant, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "capitalize", children: variant }), _jsx(ItemDescription, { children: "Variant preset for list rows." })] })] }, variant))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Sizes" }), _jsx(ItemGroup, { children: itemSizeKeys.map((size) => (_jsxs(Item, { size: size, children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(User, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { className: "capitalize", children: size }), _jsx(ItemDescription, { children: "Spacing for dense menus or roomy panels." })] })] }, size))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With header & footer" }), _jsxs(Item, { variant: "outline", children: [_jsxs(ItemHeader, { children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase", children: "Section" }), _jsx(Button, { size: "xs", variant: "ghost", children: "More" })] }), _jsx(ItemMedia, { variant: "icon", children: _jsx(Bell, {}) }), _jsxs(ItemContent, { children: [_jsx(ItemTitle, { children: "Grouped layout" }), _jsx(ItemDescription, { children: "Header and footer span the full width of the item." })] }), _jsx(ItemFooter, { children: _jsx("span", { className: "text-xs text-muted-foreground", children: "Updated today" }) })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Media variants" }), _jsx("div", { className: "flex flex-col gap-2", children: itemMediaVariantKeys.map((mv) => (_jsxs(Item, { children: [_jsx(ItemMedia, { variant: mv, children: mv === 'image' ? _jsx("img", { src: "https://avatars.githubusercontent.com/u/1406596?v=4", alt: "" }) : mv === 'icon' ? _jsx(Bell, {}) : null }), _jsxs(ItemContent, { children: [_jsxs(ItemTitle, { className: "capitalize", children: [mv, " media"] }), _jsx(ItemDescription, { children: "Leading visual treatment." })] })] }, mv))) })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Separated list" }), _jsxs(ItemGroup, { children: [_jsx(Item, { size: "sm", children: _jsx(ItemContent, { children: _jsx(ItemTitle, { children: "First" }) }) }), _jsx(ItemSeparator, {}), _jsx(Item, { size: "sm", children: _jsx(ItemContent, { children: _jsx(ItemTitle, { children: "Second" }) }) })] })] })] })),
 };

package/dist/components/kbd/kbd.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CommandIcon } from '@phosphor-icons/react/Command';
+import { Command } from 'lucide-react';
 import { Kbd, KbdGroup } from '.';
 const meta = {
     title: 'UI/Kbd',
@@ -17,7 +17,7 @@ export const Chord = {
     render: () => (_jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })),
 };
 export const WithIcon = {
-    render: () => (_jsxs(KbdGroup, { children: [_jsx(Kbd, { "aria-label": "Command", children: _jsx(CommandIcon, { className: "size-3", weight: "bold" }) }), _jsx(Kbd, { children: "\u21E7" }), _jsx(Kbd, { children: "P" })] })),
+    render: () => (_jsxs(KbdGroup, { children: [_jsx(Kbd, { "aria-label": "Command", children: _jsx(Command, { className: "size-3", strokeWidth: 2.5 }) }), _jsx(Kbd, { children: "\u21E7" }), _jsx(Kbd, { children: "P" })] })),
 };
 export const Gallery = {
     parameters: { layout: 'padded' },

package/dist/components/menubar/menubar.js

@@ -4,7 +4,7 @@ import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
 import { cn } from '../../lib/utils';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../dropdown-menu';
-import { CheckIcon } from '@phosphor-icons/react/dist/ssr';
+import { Check } from 'lucide-react';
 function Menubar({ className, ...props }) {
     return _jsx(MenubarPrimitive, { "data-slot": "menubar", className: cn('flex h-8 items-center gap-0.5 rounded-lg border p-[3px]', className), ...props });
 }
@@ -27,13 +27,13 @@ function MenubarItem({ className, inset, variant = 'default', ...props }) {
     return (_jsx(DropdownMenuItem, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className), ...props }));
 }
 function MenubarCheckboxItem({ className, children, checked, inset, ...props }) {
-    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset, className: cn('relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset, className: cn('relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
 }
 function MenubarRadioGroup({ ...props }) {
     return _jsx(DropdownMenuRadioGroup, { "data-slot": "menubar-radio-group", ...props });
 }
 function MenubarRadioItem({ className, children, inset, ...props }) {
-    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
 }
 function MenubarLabel({ className, inset, ...props }) {
     return (_jsx(DropdownMenuLabel, { "data-slot": "menubar-label", "data-inset": inset, className: cn('px-1.5 py-1 text-sm font-medium data-inset:pl-7', className), ...props }));

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

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

package/dist/components/navigation-menu/navigation-menu.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
-import { CaretDownIcon } from '@phosphor-icons/react/dist/ssr';
+import { ChevronDown } from 'lucide-react';
 function NavigationMenu({ align = 'start', className, children, ...props }) {
     return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", className: cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className), ...props, children: [children, _jsx(NavigationMenuPositioner, { align: align })] }));
 }
@@ -16,7 +16,7 @@ function NavigationMenuItem({ className, ...props }) {
 }
 const navigationMenuTriggerStyle = cva('group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted');
 function NavigationMenuTrigger({ className, children, ...props }) {
-    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), 'group', className), ...props, children: [children, ' ', _jsx(CaretDownIcon, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })] }));
+    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), 'group', className), ...props, children: [children, ' ', _jsx(ChevronDown, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })] }));
 }
 function NavigationMenuContent({ className, ...props }) {
     return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn('data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95', className), ...props }));

package/dist/components/pagination/pagination.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { cn } from '../../lib/utils';
 import { Button } from '../button';
-import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from '@phosphor-icons/react/dist/ssr';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
 function Pagination({ className, ...props }) {
     return _jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn('mx-auto flex w-full justify-center', className), ...props });
 }
@@ -18,12 +18,12 @@ function PaginationLink({ className, isActive, size = 'icon', ...props }) {
         _jsx("a", { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", "data-active": isActive, ...props }) }));
 }
 function PaginationPrevious({ className, text = 'Previous', ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn('pl-1.5!', className), ...props, children: [_jsx(CaretLeftIcon, { "data-icon": "inline-start" }), _jsx("span", { className: "hidden sm:block", children: text })] }));
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn('pl-1.5!', className), ...props, children: [_jsx(ChevronLeft, { "data-icon": "inline-start" }), _jsx("span", { className: "hidden sm:block", children: text })] }));
 }
 function PaginationNext({ className, text = 'Next', ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn('pr-1.5!', className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: text }), _jsx(CaretRightIcon, { "data-icon": "inline-end" })] }));
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn('pr-1.5!', className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: text }), _jsx(ChevronRight, { "data-icon": "inline-end" })] }));
 }
 function PaginationEllipsis({ className, ...props }) {
-    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx(DotsThreeIcon, {}), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More pages" })] }));
 }
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/select/select.js

@@ -2,7 +2,7 @@
 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 { CaretDownIcon, CaretUpIcon, CheckIcon } from '@phosphor-icons/react';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 import { cn } from '../../lib/utils';
 /**
  * Root for a native-style select. Compose `SelectTrigger`, `SelectValue`, `SelectContent`,
@@ -21,7 +21,7 @@ function SelectValue({ 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(CaretDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
+    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 }) {
@@ -33,7 +33,7 @@ function SelectLabel({ 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(CheckIcon, { className: "pointer-events-none" }) })] }));
+    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 }) {
@@ -41,10 +41,10 @@ function SelectSeparator({ 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(CaretUpIcon, {}) }));
+    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(CaretDownIcon, {}) }));
+    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/sheet/sheet.js

@@ -2,7 +2,7 @@
 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 { XIcon } from '@phosphor-icons/react/X';
+import { X } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../button';
 function Sheet({ ...props }) {
@@ -21,7 +21,7 @@ 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(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    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 });

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

@@ -1,6 +1,6 @@
 import { type ToasterProps } from 'sonner';
 /**
- * Opinionated [Sonner](https://sonner.emilkowal.ski/) toaster: Wheelhouse popover tokens, Phosphor icons,
+ * 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

package/dist/components/sonner/sonner.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Toaster as Sonner } from 'sonner';
-import { CheckCircleIcon, InfoIcon, SpinnerIcon, WarningIcon, XCircleIcon } from '@phosphor-icons/react';
+import { AlertTriangle, CheckCircle, Info, Loader2, XCircle } from 'lucide-react';
 /**
- * Opinionated [Sonner](https://sonner.emilkowal.ski/) toaster: Wheelhouse popover tokens, Phosphor icons,
+ * 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
@@ -13,11 +13,11 @@ import { CheckCircleIcon, InfoIcon, SpinnerIcon, WarningIcon, XCircleIcon } from
  */
 function Toaster({ theme = 'system', ...props }) {
     return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
-            success: _jsx(CheckCircleIcon, { className: "size-4" }),
-            info: _jsx(InfoIcon, { className: "size-4" }),
-            warning: _jsx(WarningIcon, { className: "size-4" }),
-            error: _jsx(XCircleIcon, { className: "size-4" }),
-            loading: _jsx(SpinnerIcon, { className: "size-4 animate-spin" }),
+            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)',

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