@kala-ui/react 0.0.1-beta.7 → 0.0.2

package/dist/components/command/command.stories.js

@@ -1,6 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDisclosure, useHotkeys } from "@kala-ui/react-hooks";
 import { Calculator, Calendar, CreditCard, Settings, Smile, User, } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
+import { Box } from "../box";
+import { Stack } from "../stack";
+import { Text } from "../text";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "./command";
 const meta = {
     title: "Components/Command",
@@ -17,34 +21,25 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    render: () => (_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Type a command or search..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsxs(CommandGroup, { heading: "Suggestions", children: [_jsxs(CommandItem, { children: [_jsx(Calendar, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Calendar" })] }), _jsxs(CommandItem, { children: [_jsx(Smile, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Search Emoji" })] }), _jsxs(CommandItem, { children: [_jsx(Calculator, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Calculator" })] })] }), _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { heading: "Settings", children: [_jsxs(CommandItem, { children: [_jsx(User, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Profile" }), _jsx(CommandShortcut, { children: "\u2318P" })] }), _jsxs(CommandItem, { children: [_jsx(CreditCard, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Billing" }), _jsx(CommandShortcut, { children: "\u2318B" })] }), _jsxs(CommandItem, { children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Settings" }), _jsx(CommandShortcut, { children: "\u2318S" })] })] })] })] })),
+    render: () => (_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Type a command or search..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsxs(CommandGroup, { heading: "Suggestions", children: [_jsxs(CommandItem, { children: [_jsx(Calendar, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Calendar" })] }), _jsxs(CommandItem, { children: [_jsx(Smile, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Search Emoji" })] }), _jsxs(CommandItem, { children: [_jsx(Calculator, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Calculator" })] })] }), _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { heading: "Settings", children: [_jsxs(CommandItem, { children: [_jsx(User, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Profile" }), _jsx(CommandShortcut, { children: "\u2318P" })] }), _jsxs(CommandItem, { children: [_jsx(CreditCard, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Billing" }), _jsx(CommandShortcut, { children: "\u2318B" })] }), _jsxs(CommandItem, { children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Settings" }), _jsx(CommandShortcut, { children: "\u2318S" })] })] })] })] })),
 };
 export const WithDialog = {
     render: () => {
-        const [open, setOpen] = useState(false);
-        useEffect(() => {
-            const down = (e) => {
-                if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-                    e.preventDefault();
-                    setOpen((open) => !open);
-                }
-            };
-            document.addEventListener("keydown", down);
-            return () => document.removeEventListener("keydown", down);
-        }, []);
-        return (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-muted-foreground mb-4", children: ["Press", " ", _jsxs("kbd", { className: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100", children: [_jsx("span", { className: "text-xs", children: "\u2318" }), "K"] })] }), _jsx("button", { type: "button", onClick: () => setOpen(true), className: "rounded-md border px-4 py-2 text-sm hover:bg-accent", children: "Open Command Menu" }), _jsxs(CommandDialog, { open: open, onOpenChange: setOpen, children: [_jsx(CommandInput, { placeholder: "Type a command or search..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsxs(CommandGroup, { heading: "Suggestions", children: [_jsxs(CommandItem, { children: [_jsx(Calendar, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Calendar" })] }), _jsxs(CommandItem, { children: [_jsx(Smile, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Search Emoji" })] }), _jsxs(CommandItem, { children: [_jsx(Calculator, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Calculator" })] })] }), _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { heading: "Settings", children: [_jsxs(CommandItem, { children: [_jsx(User, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Profile" }), _jsx(CommandShortcut, { children: "\u2318P" })] }), _jsxs(CommandItem, { children: [_jsx(CreditCard, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Billing" }), _jsx(CommandShortcut, { children: "\u2318B" })] }), _jsxs(CommandItem, { children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Settings" }), _jsx(CommandShortcut, { children: "\u2318S" })] })] })] })] })] }));
+        const [open, { toggle, set: setOpen }] = useDisclosure(false);
+        useHotkeys([["mod+K", toggle, { preventDefault: true }]]);
+        return (_jsxs(Stack, { gap: 2, children: [_jsxs(Text, { size: "sm", className: "text-muted-foreground", children: ["Press", " ", _jsxs("kbd", { className: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100", children: [_jsx(Text, { as: "span", className: "text-xs", children: "\u2318" }), "K"] })] }), _jsxs(CommandDialog, { open: open, onOpenChange: setOpen, children: [_jsx(CommandInput, { placeholder: "Type a command or search..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsxs(CommandGroup, { heading: "Suggestions", children: [_jsxs(CommandItem, { children: [_jsx(Calendar, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Calendar" })] }), _jsxs(CommandItem, { children: [_jsx(Smile, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Search Emoji" })] }), _jsxs(CommandItem, { children: [_jsx(Calculator, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Calculator" })] })] }), _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { heading: "Settings", children: [_jsxs(CommandItem, { children: [_jsx(User, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Profile" }), _jsx(CommandShortcut, { children: "\u2318P" })] }), _jsxs(CommandItem, { children: [_jsx(CreditCard, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Billing" }), _jsx(CommandShortcut, { children: "\u2318B" })] }), _jsxs(CommandItem, { children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Settings" }), _jsx(CommandShortcut, { children: "\u2318S" })] })] })] })] })] }));
     },
 };
 export const WithSearch = {
     render: () => (_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Search for fruits..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No fruits found." }), _jsxs(CommandGroup, { heading: "Fruits", children: [_jsx(CommandItem, { value: "apple", children: "\uD83C\uDF4E Apple" }), _jsx(CommandItem, { value: "banana", children: "\uD83C\uDF4C Banana" }), _jsx(CommandItem, { value: "cherry", children: "\uD83C\uDF52 Cherry" }), _jsx(CommandItem, { value: "grape", children: "\uD83C\uDF47 Grape" }), _jsx(CommandItem, { value: "orange", children: "\uD83C\uDF4A Orange" }), _jsx(CommandItem, { value: "strawberry", children: "\uD83C\uDF53 Strawberry" }), _jsx(CommandItem, { value: "watermelon", children: "\uD83C\uDF49 Watermelon" })] })] })] })),
 };
 export const MultipleGroups = {
-    render: () => (_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Search..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsxs(CommandGroup, { heading: "Files", children: [_jsx(CommandItem, { children: _jsx("span", { children: "Document.pdf" }) }), _jsx(CommandItem, { children: _jsx("span", { children: "Presentation.pptx" }) }), _jsx(CommandItem, { children: _jsx("span", { children: "Spreadsheet.xlsx" }) })] }), _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { heading: "Folders", children: [_jsx(CommandItem, { children: _jsx("span", { children: "Downloads" }) }), _jsx(CommandItem, { children: _jsx("span", { children: "Documents" }) }), _jsx(CommandItem, { children: _jsx("span", { children: "Pictures" }) })] }), _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { heading: "Actions", children: [_jsxs(CommandItem, { children: [_jsx("span", { children: "New File" }), _jsx(CommandShortcut, { children: "\u2318N" })] }), _jsxs(CommandItem, { children: [_jsx("span", { children: "New Folder" }), _jsx(CommandShortcut, { children: "\u21E7\u2318N" })] })] })] })] })),
+    render: () => (_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Search..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsxs(CommandGroup, { heading: "Files", children: [_jsx(CommandItem, { children: _jsx(Text, { as: "span", children: "Document.pdf" }) }), _jsx(CommandItem, { children: _jsx(Text, { as: "span", children: "Presentation.pptx" }) }), _jsx(CommandItem, { children: _jsx(Text, { as: "span", children: "Spreadsheet.xlsx" }) })] }), _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { heading: "Folders", children: [_jsx(CommandItem, { children: _jsx(Text, { as: "span", children: "Downloads" }) }), _jsx(CommandItem, { children: _jsx(Text, { as: "span", children: "Documents" }) }), _jsx(CommandItem, { children: _jsx(Text, { as: "span", children: "Pictures" }) })] }), _jsx(CommandSeparator, {}), _jsxs(CommandGroup, { heading: "Actions", children: [_jsxs(CommandItem, { children: [_jsx(Text, { as: "span", children: "New File" }), _jsx(CommandShortcut, { children: "\u2318N" })] }), _jsxs(CommandItem, { children: [_jsx(Text, { as: "span", children: "New Folder" }), _jsx(CommandShortcut, { children: "\u21E7\u2318N" })] })] })] })] })),
 };
 export const WithOnSelect = {
     render: () => {
         const [value, setValue] = useState("");
-        return (_jsxs("div", { children: [_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Select an option..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsxs(CommandGroup, { heading: "Options", children: [_jsx(CommandItem, { value: "option1", onSelect: () => setValue("option1"), children: "Option 1" }), _jsx(CommandItem, { value: "option2", onSelect: () => setValue("option2"), children: "Option 2" }), _jsx(CommandItem, { value: "option3", onSelect: () => setValue("option3"), children: "Option 3" })] })] })] }), value && (_jsxs("p", { className: "mt-4 text-sm text-muted-foreground", children: ["Selected: ", value] }))] }));
+        return (_jsxs(Box, { children: [_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Select an option..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsxs(CommandGroup, { heading: "Options", children: [_jsx(CommandItem, { value: "option1", onSelect: () => setValue("option1"), children: "Option 1" }), _jsx(CommandItem, { value: "option2", onSelect: () => setValue("option2"), children: "Option 2" }), _jsx(CommandItem, { value: "option3", onSelect: () => setValue("option3"), children: "Option 3" })] })] })] }), value && (_jsxs(Text, { className: "mt-4 text-sm text-muted-foreground", children: ["Selected: ", value] }))] }));
     },
 };
 export const DisabledItems = {
@@ -54,10 +49,10 @@ export const Loading = {
     render: () => (_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Searching..." }), _jsx(CommandList, { children: _jsx(CommandEmpty, { children: "Loading..." }) })] })),
 };
 export const EmptyState = {
-    render: () => (_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Search..." }), _jsx(CommandList, { children: _jsx(CommandEmpty, { children: _jsxs("div", { className: "py-6 text-center", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "No results found." }), _jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Try searching for something else." })] }) }) })] })),
+    render: () => (_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Search..." }), _jsx(CommandList, { children: _jsx(CommandEmpty, { children: _jsxs(Box, { className: "py-6 text-center", children: [_jsx(Text, { className: "text-sm text-muted-foreground", children: "No results found." }), _jsx(Text, { className: "mt-2 text-xs text-muted-foreground", children: "Try searching for something else." })] }) }) })] })),
 };
 export const WithIcons = {
-    render: () => (_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Search apps..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No apps found." }), _jsxs(CommandGroup, { heading: "Applications", children: [_jsxs(CommandItem, { children: [_jsx(Calendar, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Calendar" }), _jsx(CommandShortcut, { children: "\u23181" })] }), _jsxs(CommandItem, { children: [_jsx(Calculator, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Calculator" }), _jsx(CommandShortcut, { children: "\u23182" })] }), _jsxs(CommandItem, { children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Settings" }), _jsx(CommandShortcut, { children: "\u23183" })] }), _jsxs(CommandItem, { children: [_jsx(User, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: "Profile" }), _jsx(CommandShortcut, { children: "\u23184" })] })] })] })] })),
+    render: () => (_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Search apps..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No apps found." }), _jsxs(CommandGroup, { heading: "Applications", children: [_jsxs(CommandItem, { children: [_jsx(Calendar, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Calendar" }), _jsx(CommandShortcut, { children: "\u23181" })] }), _jsxs(CommandItem, { children: [_jsx(Calculator, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Calculator" }), _jsx(CommandShortcut, { children: "\u23182" })] }), _jsxs(CommandItem, { children: [_jsx(Settings, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Settings" }), _jsx(CommandShortcut, { children: "\u23183" })] }), _jsxs(CommandItem, { children: [_jsx(User, { className: "mr-2 h-4 w-4" }), _jsx(Text, { as: "span", children: "Profile" }), _jsx(CommandShortcut, { children: "\u23184" })] })] })] })] })),
 };
 export const LongList = {
     render: () => (_jsxs(Command, { className: "rounded-lg border shadow-md", children: [_jsx(CommandInput, { placeholder: "Search countries..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No country found." }), _jsx(CommandGroup, { heading: "Countries", children: [

package/dist/components/container/container.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const containerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "full" | "2xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
     centered?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {

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

@@ -1 +1 @@
-export * from './container';
+export * from "./container";

package/dist/components/container/index.js

@@ -1 +1 @@
-export * from './container';
+export * from "./container";

package/dist/components/data-table/column-header-filter.js

@@ -5,16 +5,21 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Filter, X } from "lucide-react";
-import { useState } from "react";
+import * as React from "react";
+import { useDisclosure } from "@kala-ui/react-hooks";
 import { Badge } from "../badge";
 import { Button } from "../button";
 import { Checkbox } from "../checkbox";
+import { Flex } from "../flex";
+import { Heading } from "../heading";
 import { Input } from "../input";
 import { Label } from "../label";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Stack } from "../stack";
+import { Text } from "../text";
 export function ColumnHeaderFilter({ column, activeFilters, onFilterChange, onFilterRemove, }) {
-    const [open, setOpen] = useState(false);
-    const [textValue, setTextValue] = useState("");
+    const [open, { set: setOpen }] = useDisclosure(false);
+    const [textValue, setTextValue] = React.useState("");
     const activeFilter = activeFilters.find((f) => f.key === column.key);
     const filterValue = activeFilter?.value;
     // For multi-select, track selected values
@@ -58,10 +63,10 @@ export function ColumnHeaderFilter({ column, activeFilters, onFilterChange, onFi
         onFilterRemove(column.key);
         setTextValue("");
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0 hover:bg-muted relative", "aria-label": `Filter by ${column.label}`, children: [_jsx(Filter, { className: `h-4 w-4 ${hasActiveFilter ? "text-primary" : "text-muted-foreground"}` }), hasActiveFilter ? (_jsx(Badge, { variant: "default", className: "absolute -top-1 -right-1 h-4 w-4 p-0 flex items-center justify-center text-[10px] bg-primary", children: activeCount || 1 })) : null] }) }), _jsx(PopoverContent, { className: "w-64 p-3", align: "start", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h4", { className: "font-medium text-sm text-foreground", children: ["Filter by ", column.label] }), hasActiveFilter ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: handleClear, className: "h-7 px-2 text-xs text-muted-foreground", children: [_jsx(X, { className: "h-3 w-3 mr-1" }), "Clear"] })) : null] }), column.type === "select" && column.options ? (_jsx("div", { className: "space-y-2 max-h-[300px] overflow-y-auto", children: column.options.map((option) => {
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0 hover:bg-muted relative", "aria-label": `Filter by ${column.label}`, children: [_jsx(Filter, { className: `h-4 w-4 ${hasActiveFilter ? "text-primary" : "text-muted-foreground"}` }), hasActiveFilter ? (_jsx(Badge, { variant: "default", className: "absolute -top-1 -right-1 h-4 w-4 p-0 flex items-center justify-center text-[10px]", children: _jsx(Text, { size: "xs", weight: "bold", className: "text-primary-foreground", children: column.type === "text" ? "1" : activeCount }) })) : null] }) }), _jsx(PopoverContent, { className: "w-64 p-3", align: "start", children: _jsxs(Stack, { gap: 3, children: [_jsxs(Flex, { align: "center", justify: "between", children: [_jsxs(Heading, { size: "h6", weight: "medium", className: "text-sm", children: ["Filter by ", column.label] }), hasActiveFilter ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: handleClear, className: "h-7 px-2 text-xs text-muted-foreground", children: [_jsx(X, { className: "h-3 w-3 mr-1" }), "Clear"] })) : null] }), column.type === "select" && column.options ? (_jsx(Stack, { gap: 2, className: "max-h-[300px] overflow-y-auto", children: column.options.map((option) => {
                                 const isChecked = selectedValues.includes(option.value);
-                                return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: `${String(column.key)}-${option.value}`, checked: isChecked, onCheckedChange: (checked) => handleCheckboxChange(option.value, checked === true) }), _jsx(Label, { htmlFor: `${String(column.key)}-${option.value}`, className: "text-sm font-normal cursor-pointer flex-1 text-foreground", children: option.label })] }, option.value));
-                            }) })) : (_jsxs("div", { className: "space-y-2", children: [_jsx(Input, { type: "text", placeholder: column.placeholder || `Filter by ${column.label}`, value: textValue, onChange: (e) => setTextValue(e.target.value), onKeyDown: (e) => {
+                                return (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: `${String(column.key)}-${option.value}`, checked: isChecked, onCheckedChange: (checked) => handleCheckboxChange(option.value, checked === true) }), _jsx(Label, { htmlFor: `${String(column.key)}-${option.value}`, className: "text-sm font-normal cursor-pointer flex-1 text-foreground", children: option.label })] }, option.value));
+                            }) })) : (_jsxs(Stack, { gap: 2, children: [_jsx(Input, { type: "text", placeholder: column.placeholder || `Filter by ${column.label}`, value: textValue, onChange: (e) => setTextValue(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "Enter") {
                                             handleTextApply();
                                         }

package/dist/components/data-table/data-table-skeleton.js

@@ -10,32 +10,22 @@ import { Button } from "../button";
 import { Checkbox } from "../checkbox";
 import { FieldLabel } from "../field";
 import { Input } from "../input";
-import { Skeleton } from "../skeleton";
 import { Select, SelectTrigger, SelectValue } from "../select";
+import { Skeleton } from "../skeleton";
 import { TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../table";
 export function DataTableSkeleton({ rows = 5, columns, showSearch = false, showFilters = false, filterCount = 3, showPagination = false, showSelection = false, showBulkActions = false, stickyHeader = true, stickyFooter = false, }) {
-    return (_jsxs("div", { className: "flex flex-col", children: [showSearch && (_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-4 shrink-0", children: [_jsx("div", { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "search", placeholder: "Search...", disabled: true, className: "opacity-50" }) }), showBulkActions && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap min-h-[36px]", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "0 selected" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Edit" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Delete" })] }))] })), showFilters && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-4 shrink-0", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Active filters:" }), Array.from({ length: filterCount }).map((_, i) => (_jsxs(Badge, { variant: "secondary", className: "gap-1.5 pl-2 pr-1 py-1 bg-primary/10 text-primary border-primary/20", children: [_jsx("span", { className: "text-xs font-medium", children: "Filter: Value" }), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-4 w-4 p-0 hover:bg-primary/20 rounded-sm", children: _jsx(Skeleton, { className: "h-3 w-3" }) })] }, `filter-${i}`))), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Clear all" })] })), _jsx("div", { className: cn("border relative overflow-hidden theme-card", showPagination ? "rounded-t-lg border-b-0" : "rounded-lg", stickyFooter ? "flex-1 min-h-0" : ""), children: _jsx("div", { className: cn("overflow-auto relative", showPagination ? "rounded-t-lg" : "rounded-lg", stickyFooter
-                        ? "flex-1 min-h-0 max-h-[70vh]"
-                        : "max-h-[600px]"), children: _jsxs("table", { className: "w-full border-separate border-spacing-0 caption-bottom text-sm", children: [_jsx(TableHeader, { className: cn(stickyHeader &&
-                                    "sticky top-0 z-1 bg-muted/95 backdrop-blur-sm", "[&_tr]:border-0"), children: _jsxs(TableRow, { className: "border-0", children: [showSelection && (_jsx(TableHead, { className: cn("w-12 rounded-tl-lg", stickyHeader
+    return (_jsxs("div", { className: "flex flex-col", children: [showSearch && (_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-4 shrink-0", children: [_jsx("div", { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "search", placeholder: "Search...", disabled: true, className: "opacity-50" }) }), showBulkActions && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap min-h-[36px]", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "0 selected" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Edit" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Delete" })] }))] })), showFilters && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-4 shrink-0", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Active filters:" }), Array.from({ length: filterCount }).map((_, i) => (_jsxs(Badge, { variant: "secondary", className: "gap-1.5 pl-2 pr-1 py-1 bg-primary/10 text-primary border-primary/20", children: [_jsx("span", { className: "text-xs font-medium", children: "Filter: Value" }), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-4 w-4 p-0 hover:bg-primary/20 rounded-sm", children: _jsx(Skeleton, { className: "h-3 w-3" }) })] }, `filter-${i}`))), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Clear all" })] })), _jsx("div", { className: cn("border relative overflow-hidden theme-card", showPagination ? "rounded-t-lg border-b-0" : "rounded-lg", stickyFooter ? "flex-1 min-h-0" : ""), children: _jsx("div", { className: cn("overflow-auto relative", showPagination ? "rounded-t-lg" : "rounded-lg", stickyFooter ? "flex-1 min-h-0 max-h-[70vh]" : "max-h-[600px]"), children: _jsxs("table", { className: "w-full border-separate border-spacing-0 caption-bottom text-sm", children: [_jsx(TableHeader, { className: cn(stickyHeader && "sticky top-0 z-1 bg-muted/95 backdrop-blur-sm", "[&_tr]:border-0"), children: _jsxs(TableRow, { className: "border-0", children: [showSelection && (_jsx(TableHead, { className: cn("w-12 rounded-tl-lg", stickyHeader
                                                 ? "border-b border-border-strong/50"
                                                 : "border-b"), children: _jsx(Checkbox, { disabled: true }) })), columns.map((column, index) => {
                                             const isFirst = !showSelection && index === 0;
                                             const isLast = index === columns.length - 1;
                                             return (_jsx(TableHead, { style: { width: column.width }, className: cn(column.align === "center" && "text-center", column.align === "right" && "text-right", column.hideOnMobile && "hidden md:table-cell", stickyHeader
                                                     ? "border-b border-border-strong/50"
-                                                    : "border-b", isFirst && "rounded-tl-lg", isLast && "rounded-tr-lg"), children: _jsx("div", { className: cn("flex items-center gap-1", column.align === "center" &&
-                                                        "justify-center", column.align === "right" &&
-                                                        "justify-end"), children: column.enableFiltering ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-4 flex-1" }), _jsx(Skeleton, { className: "h-4 w-4" })] })) : (_jsx(Skeleton, { className: "h-4 w-24" })) }) }, column.id));
+                                                    : "border-b", isFirst && "rounded-tl-lg", isLast && "rounded-tr-lg"), children: _jsx("div", { className: cn("flex items-center gap-1", column.align === "center" && "justify-center", column.align === "right" && "justify-end"), children: column.enableFiltering ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-4 flex-1" }), _jsx(Skeleton, { className: "h-4 w-4" })] })) : (_jsx(Skeleton, { className: "h-4 w-24" })) }) }, column.id));
                                         })] }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => {
                                     const isLastRow = rowIndex === rows - 1;
                                     return (_jsxs(TableRow, { className: cn("border-0"), children: [showSelection && (_jsx(TableCell, { children: _jsx(Checkbox, { disabled: true, "aria-label": `Select row ${rowIndex + 1}` }) })), columns.map((column) => {
-                                                return (_jsx(TableCell, { className: cn(column.align ===
-                                                        "center" &&
-                                                        "text-center", column.align === "right" &&
-                                                        "text-right", column.hideOnMobile &&
-                                                        "hidden md:table-cell", !isLastRow && "border-b"), children: _jsx(Skeleton, { className: "h-4 w-32" }) }, column.id));
+                                                return (_jsx(TableCell, { className: cn(column.align === "center" && "text-center", column.align === "right" && "text-right", column.hideOnMobile && "hidden md:table-cell", !isLastRow && "border-b"), children: _jsx(Skeleton, { className: "h-4 w-32" }) }, column.id));
                                             })] }, rowIndex));
-                                }) })] }) }) }), showPagination && (_jsxs("div", { className: cn("flex flex-col sm:flex-row items-center justify-between gap-4 bg-background px-4 py-3 rounded-b-lg theme-card border-x border-b", stickyFooter &&
-                    "sticky bottom-0 z-1 shadow-xl bg-background"), children: [_jsx("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: _jsx(Skeleton, { className: "h-4 w-48" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FieldLabel, { htmlFor: "page-size", className: "text-sm text-muted-foreground mb-0", children: "Rows per page:" }), _jsx(Select, { disabled: true, children: _jsx(SelectTrigger, { className: "w-20 h-9 text-foreground opacity-50", children: _jsx(SelectValue, {}) }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: _jsx(Skeleton, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm text-muted-foreground px-2", children: _jsx(Skeleton, { className: "h-4 w-16 inline-block" }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: _jsx(Skeleton, { className: "h-4 w-4" }) })] })] })] }))] }));
+                                }) })] }) }) }), showPagination && (_jsxs("div", { className: cn("flex flex-col sm:flex-row items-center justify-between gap-4 bg-background px-4 py-3 rounded-b-lg theme-card border-x border-b", stickyFooter && "sticky bottom-0 z-1 shadow-xl bg-background"), children: [_jsx("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: _jsx(Skeleton, { className: "h-4 w-48" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FieldLabel, { htmlFor: "page-size", className: "text-sm text-muted-foreground mb-0", children: "Rows per page:" }), _jsx(Select, { disabled: true, children: _jsx(SelectTrigger, { className: "w-20 h-9 text-foreground opacity-50", children: _jsx(SelectValue, {}) }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: _jsx(Skeleton, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm text-muted-foreground px-2", children: _jsx(Skeleton, { className: "h-4 w-16 inline-block" }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: _jsx(Skeleton, { className: "h-4 w-4" }) })] })] })] }))] }));
 }

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

@@ -17,17 +17,21 @@
  */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDisclosure } from "@kala-ui/react-hooks";
 import { ArrowDown, ArrowUp, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Search, X, } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge";
+import { Box } from "../box";
 import { Button } from "../button";
 import { Checkbox } from "../checkbox";
 import { EmptyState } from "../empty-state";
-import { FieldLabel } from "../field";
+import { Flex } from "../flex";
 import { Input } from "../input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../select";
+import { Stack } from "../stack";
 import { TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../table";
+import { Text } from "../text";
 import { ColumnHeaderFilter } from "./column-header-filter";
 import { DataTableSkeleton } from "./data-table-skeleton";
 import { useTableState } from "./useTableState";
@@ -80,14 +84,14 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
     const [selectedIds, setSelectedIds] = useState(selection?.selectedIds ?? new Set());
     // Scroll container ref for scroll-to-top/bottom buttons
     const scrollContainerRef = useRef(null);
-    const [showScrollButtons, setShowScrollButtons] = useState(false);
+    const [showScrollButtons, { set: setShowScrollButtons }] = useDisclosure(false);
     // Handle scroll event to show/hide scroll buttons
     const handleScroll = useCallback(() => {
         if (scrollContainerRef.current) {
             const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
             setShowScrollButtons(scrollHeight > clientHeight && scrollTop > 100);
         }
-    }, []);
+    }, [setShowScrollButtons]);
     // Scroll to top/bottom functions
     const scrollToTop = useCallback(() => {
         scrollContainerRef.current?.scrollTo({ top: 0, behavior: "smooth" });
@@ -197,13 +201,13 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
         // Hide search if no data and not searching (unless forceShow is true)
         if (data.length === 0 && !searchQuery && !forceShow)
             return null;
-        return (_jsx("div", { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "search", placeholder: searchConfig.placeholder, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), prefixIcon: _jsx(Search, { className: "h-4 w-4" }), suffixIcon: searchQuery ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSearchQuery(""), className: "p-1 text-muted-foreground hover:text-foreground h-auto", "aria-label": "Clear search", children: _jsx(X, { className: "h-4 w-4" }) })) : null, "aria-label": searchConfig.ariaLabel }) }));
+        return (_jsx(Box, { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "search", placeholder: searchConfig.placeholder, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), prefixIcon: _jsx(Search, { className: "h-4 w-4" }), suffixIcon: searchQuery ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSearchQuery(""), className: "p-1 text-muted-foreground hover:text-foreground h-auto", "aria-label": "Clear search", children: _jsx(X, { className: "h-4 w-4" }) })) : null, "aria-label": searchConfig.ariaLabel }) }));
     };
     // Render loading state
     if (isLoading) {
         // Use custom skeleton if provided
         if (skeleton) {
-            return _jsx("div", { className: cn("space-y-4", className), children: skeleton });
+            return _jsx(Stack, { gap: 4, className: className, children: skeleton });
         }
         // Use skeletonConfig if provided, otherwise fall back to legacy loadingConfig
         const showSearch = !!searchConfig;
@@ -212,7 +216,7 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
         const showSelection = !!selection?.enabled;
         const showBulkActions = !!bulkActions;
         const skeletonRows = skeletonConfig?.rows ?? loadingConfig?.rows ?? 5;
-        return (_jsx("div", { className: cn("space-y-4", className), children: _jsx(DataTableSkeleton, { rows: skeletonRows, columns: columns, showSearch: showSearch, showFilters: showFilters, showPagination: showPagination, showSelection: showSelection, showBulkActions: showBulkActions, stickyHeader: stickyHeader, stickyFooter: stickyFooter }) }));
+        return (_jsx(Stack, { gap: 4, className: className, children: _jsx(DataTableSkeleton, { rows: skeletonRows, columns: columns, showSearch: showSearch, showFilters: showFilters, showPagination: showPagination, showSelection: showSelection, showBulkActions: showBulkActions, stickyHeader: stickyHeader, stickyFooter: stickyFooter }) }));
     }
     // Render empty state
     if (displayData.length === 0) {
@@ -223,16 +227,16 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
                 : "There is no data to display at the moment.",
         };
         const emptyConfig = { ...defaultEmptyState, ...emptyState };
-        return (_jsxs("div", { className: cn("space-y-4", className), children: [renderSearchInput(), _jsx(EmptyState, { title: emptyConfig.title, description: emptyConfig.description, ...(emptyConfig.icon && { icon: emptyConfig.icon }), ...(emptyConfig.action && { action: emptyConfig.action }) })] }));
+        return (_jsxs(Stack, { gap: 4, className: className, children: [renderSearchInput(), _jsx(EmptyState, { title: emptyConfig.title, description: emptyConfig.description, ...(emptyConfig.icon && { icon: emptyConfig.icon }), ...(emptyConfig.action && { action: emptyConfig.action }) })] }));
     }
-    return (_jsxs("section", { className: cn("flex flex-col", stickyFooter ? "h-full min-h-0" : "", className), "aria-label": ariaLabel, children: [(searchConfig || bulkActions) && (_jsxs("div", { className: cn("flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-4", stickyFooter && "shrink-0"), children: [renderSearchInput(), bulkActions && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap min-h-[36px]", children: [_jsxs("span", { className: "text-sm text-muted-foreground", children: [selectedIds.size, " selected"] }), bulkActions.map((action) => (_jsxs(Button, { variant: action.variant ?? "outline", size: "sm", onClick: () => action.onClick(selectedRows), disabled: selectedIds.size === 0 || action.disabled, className: cn(selectedIds.size === 0 && "opacity-50 cursor-not-allowed"), children: [action.icon, action.label] }, action.id)))] }))] })), filterableColumns && filterConfigs.length > 0 && (_jsxs("div", { className: cn("flex flex-wrap items-center gap-2 mb-4", stickyFooter && "shrink-0"), children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Active filters:" }), filterConfigs.map((filter) => {
+    return (_jsxs(Stack, { className: cn(stickyFooter ? "h-full min-h-0" : "", className), "aria-label": ariaLabel, role: ariaLabel ? "region" : undefined, children: [(searchConfig || bulkActions) && (_jsxs(Flex, { align: "center", justify: "between", gap: 4, className: cn("mb-4 flex-wrap", stickyFooter && "shrink-0"), children: [renderSearchInput(), bulkActions && (_jsxs(Flex, { align: "center", gap: 2, className: "flex-wrap min-h-[36px]", children: [_jsxs(Text, { size: "sm", className: "text-muted-foreground", children: [selectedIds.size, " selected"] }), bulkActions.map((action) => (_jsxs(Button, { variant: action.variant ?? "outline", size: "sm", onClick: () => action.onClick(selectedRows), disabled: selectedIds.size === 0 || action.disabled, className: cn(selectedIds.size === 0 && "opacity-50 cursor-not-allowed"), children: [action.icon, action.label] }, action.id)))] }))] })), filterableColumns && filterConfigs.length > 0 && (_jsxs(Flex, { align: "center", gap: 2, className: cn("mb-4 flex-wrap", stickyFooter && "shrink-0"), children: [_jsx(Text, { size: "sm", className: "text-muted-foreground", children: "Active filters:" }), filterConfigs.map((filter) => {
                         const column = filterableColumns.find((fc) => fc.key === filter.key);
                         if (!column)
                             return null;
                         const filterValueArray = Array.isArray(filter.value)
                             ? filter.value
                             : [filter.value];
-                        return filterValueArray.map((value, idx) => (_jsxs(Badge, { variant: "secondary", className: "gap-1.5 pl-2 pr-1 py-1 bg-primary/10 text-primary border-primary/20", children: [_jsxs("span", { className: "text-xs font-medium", children: [column.label, ": ", String(value)] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                        return filterValueArray.map((value, idx) => (_jsxs(Badge, { variant: "secondary", className: "gap-1.5 pl-2 pr-1 py-1 bg-primary/10 text-primary border-primary/20", children: [_jsxs(Text, { size: "xs", weight: "medium", children: [column.label, ": ", String(value)] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
                                         if (filterValueArray.length === 1) {
                                             removeFilter(filter.key);
                                         }
@@ -245,7 +249,7 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
                                             });
                                         }
                                     }, className: "h-4 w-4 p-0 hover:bg-primary/20 rounded-sm", "aria-label": `Remove ${column.label} filter: ${String(value)}`, children: _jsx(X, { className: "h-3 w-3" }) })] }, `${String(filter.key)}-${value}-${idx}`)));
-                    }), _jsx(Button, { variant: "ghost", size: "sm", onClick: clearFilters, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Clear all" })] })), _jsxs("div", { className: cn("border relative overflow-hidden theme-card", stickyFooter && paginationConfig ? "flex-1 min-h-0" : "", bordered && "border-2", paginationConfig ? "rounded-t-lg border-b-0" : "rounded-lg"), children: [_jsx("div", { ref: scrollContainerRef, onScroll: handleScroll, className: cn("overflow-auto relative", paginationConfig ? "rounded-t-lg" : "rounded-lg", stickyFooter ? "flex-1 min-h-0 max-h-[70vh]" : "max-h-[600px]"), children: _jsxs("table", { className: "w-full border-separate border-spacing-0 caption-bottom text-sm", children: [caption && _jsx("caption", { className: "sr-only", children: caption }), _jsx(TableHeader, { className: cn(stickyHeader && "sticky top-0 z-1 bg-muted/95 backdrop-blur-sm", "[&_tr]:border-0"), children: _jsxs(TableRow, { className: "border-0", children: [selection?.enabled && (_jsx(TableHead, { className: cn("w-12 rounded-tl-lg", stickyHeader
+                    }), _jsx(Button, { variant: "ghost", size: "sm", onClick: clearFilters, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Clear all" })] })), _jsxs(Box, { className: cn("border relative overflow-hidden theme-card", stickyFooter && paginationConfig ? "flex-1 min-h-0" : "", bordered && "border-2", paginationConfig ? "rounded-t-lg border-b-0" : "rounded-lg"), children: [_jsx(Box, { ref: scrollContainerRef, onScroll: handleScroll, className: cn("overflow-auto relative", paginationConfig ? "rounded-t-lg" : "rounded-lg", stickyFooter ? "flex-1 min-h-0 max-h-[70vh]" : "max-h-[600px]"), children: _jsxs("table", { className: "w-full border-separate border-spacing-0 caption-bottom text-sm", children: [caption && _jsx("caption", { className: "sr-only", children: caption }), _jsx(TableHeader, { className: cn(stickyHeader && "sticky top-0 z-1 bg-muted/95 backdrop-blur-sm", "[&_tr]:border-0"), children: _jsxs(TableRow, { className: "border-0", children: [selection?.enabled && (_jsx(TableHead, { className: cn("w-12 rounded-tl-lg", stickyHeader
                                                     ? "border-b border-border-strong/50"
                                                     : "border-b"), children: _jsx(Checkbox, { checked: isAllSelected
                                                         ? true
@@ -266,9 +270,9 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
                                                         ? sortDirection === "asc"
                                                             ? "ascending"
                                                             : "descending"
-                                                        : "none", children: _jsxs("div", { className: cn("flex items-center gap-1", column.align === "center" && "justify-center", column.align === "right" && "justify-end"), children: [canSort && column.accessorKey ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => toggleSort(column.accessorKey), className: "-ml-3 h-8 data-[state=open]:bg-accent hover:bg-accent font-semibold text-foreground hover:text-accent-foreground", "aria-label": column.ariaLabel
+                                                        : "none", children: _jsxs(Flex, { align: "center", gap: 1, className: cn(column.align === "center" && "justify-center", column.align === "right" && "justify-end"), children: [canSort && column.accessorKey ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => toggleSort(column.accessorKey), className: "-ml-3 h-8 data-[state=open]:bg-accent hover:bg-accent font-semibold text-foreground hover:text-accent-foreground", "aria-label": column.ariaLabel
                                                                     ? `Sort by ${column.ariaLabel}`
-                                                                    : `Sort by ${column.header}`, children: [column.header, isSorted ? (sortDirection === "asc" ? (_jsx(ChevronUp, { className: "ml-2 h-4 w-4", "aria-hidden": "true" })) : (_jsx(ChevronDown, { className: "ml-2 h-4 w-4", "aria-hidden": "true" }))) : (_jsx(ChevronDown, { className: "ml-2 h-4 w-4 opacity-0 group-hover:opacity-40", "aria-hidden": "true" }))] })) : (_jsx("span", { className: "font-semibold text-muted-foreground", children: column.header })), filterColumn && (_jsx(ColumnHeaderFilter, { column: filterColumn, activeFilters: filterConfigs, onFilterChange: setFilter, onFilterRemove: removeFilter }))] }) }, column.id));
+                                                                    : `Sort by ${column.header}`, children: [column.header, isSorted ? (sortDirection === "asc" ? (_jsx(ChevronUp, { className: "ml-2 h-4 w-4", "aria-hidden": "true" })) : (_jsx(ChevronDown, { className: "ml-2 h-4 w-4", "aria-hidden": "true" }))) : (_jsx(ChevronDown, { className: "ml-2 h-4 w-4 opacity-0 group-hover:opacity-40", "aria-hidden": "true" }))] })) : (_jsx(Text, { weight: "semibold", className: "text-muted-foreground", children: column.header })), filterColumn && (_jsx(ColumnHeaderFilter, { column: filterColumn, activeFilters: filterConfigs, onFilterChange: setFilter, onFilterRemove: removeFilter }))] }) }, column.id));
                                             })] }) }), _jsx(TableBody, { children: displayData.map((row, rowIndex) => {
                                         const isSelectable = !selection?.isRowSelectable || selection.isRowSelectable(row);
                                         const rowId = selection?.getRowId(row);
@@ -300,11 +304,10 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
                                                         ? true
                                                         : isSomeSelected
                                                             ? "indeterminate"
-                                                            : false, onCheckedChange: handleSelectAll, "aria-label": "Select all rows (bottom)" }) })), columns.map((column) => (_jsx(TableHead, { className: cn(column.className, column.align === "center" && "text-center", column.align === "right" && "text-right", stickyFooter && ""), children: _jsx("div", { className: cn("flex items-center gap-2", column.align === "center" && "justify-center", column.align === "right" && "justify-end"), children: column.enableSorting !== false ? (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-auto p-0 -ml-2 justify-start font-medium hover:bg-transparent", onClick: () => toggleSort(column.accessorKey ||
+                                                            : false, onCheckedChange: handleSelectAll, "aria-label": "Select all rows (bottom)" }) })), columns.map((column) => (_jsx(TableHead, { className: cn(column.className, column.align === "center" && "text-center", column.align === "right" && "text-right", stickyFooter && ""), children: _jsx(Flex, { align: "center", gap: 2, className: cn(column.align === "center" && "justify-center", column.align === "right" && "justify-end"), children: column.enableSorting !== false ? (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-auto p-0 -ml-2 justify-start font-medium hover:bg-transparent", onClick: () => toggleSort(column.accessorKey ||
                                                             column.id), "aria-label": `Sort by ${column.header}`, children: [column.header, sortConfig?.key ===
                                                                 (column.accessorKey || column.id) &&
-                                                                (sortConfig.direction === "asc" ? (_jsx(ArrowUp, { className: "ml-2 h-4 w-4 text-muted-foreground", "aria-hidden": "true" })) : (_jsx(ArrowDown, { className: "ml-2 h-4 w-4 text-muted-foreground", "aria-hidden": "true" })))] })) : (_jsx("span", { className: "font-medium", children: column.header })) }) }, column.id)))] }) })), footer && (_jsx(TableFooter, { className: cn("border-t", !!paginationConfig && "border-b"), children: _jsx(TableRow, { className: "border-0", children: _jsx(TableCell, { colSpan: columns.length + (selection?.enabled ? 1 : 0), className: "p-4", children: footer }) }) }))] }) }), showScrollButtons && (_jsxs("div", { className: "absolute right-4 bottom-4 flex flex-col gap-2 z-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: scrollToTop, className: "h-8 w-8 p-0 rounded-full shadow-lg bg-background theme-card", "aria-label": "Scroll to top", children: _jsx(ArrowUp, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "outline", size: "sm", onClick: scrollToBottom, className: "h-8 w-8 p-0 rounded-full shadow-lg bg-background theme-card", "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "h-4 w-4", "aria-hidden": "true" }) })] }))] }), paginationConfig && (_jsxs("div", { className: cn("flex flex-col sm:flex-row items-center justify-between gap-4 bg-background px-4 py-3 rounded-b-lg theme-card", bordered ? "border-x-2 border-b-2" : "border-x border-b", stickyFooter &&
-                    "sticky bottom-0 z-1 shadow-xl bg-background"), children: [_jsx("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: _jsxs("span", { children: ["Showing ", (currentPage - 1) * currentPageSize + 1, " to", " ", Math.min(currentPage * currentPageSize, paginationConfig.total), " ", "of ", paginationConfig.total, " results"] }) }), _jsxs("div", { className: "flex items-center gap-2", children: [paginationConfig.pageSizeOptions && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FieldLabel, { htmlFor: "page-size", className: "text-sm text-muted-foreground mb-0", children: "Rows per page:" }), _jsxs(Select, { value: String(currentPageSize), onValueChange: (value) => setPageSize(Number(value)), children: [_jsx(SelectTrigger, { className: "w-20 h-9 text-foreground", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: paginationConfig.pageSizeOptions.map((size) => (_jsx(SelectItem, { value: String(size), children: size }, size))) })] })] })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: previousPage, disabled: !hasPreviousPage, "aria-label": "Go to previous page", children: _jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsxs("span", { className: "text-sm text-muted-foreground px-2", children: ["Page ", currentPage, " of ", totalPages] }), _jsx(Button, { variant: "outline", size: "sm", onClick: nextPage, disabled: !hasNextPage, "aria-label": "Go to next page", children: _jsx(ChevronRight, { className: "h-4 w-4", "aria-hidden": "true" }) })] })] })] }))] }));
+                                                                (sortConfig.direction === "asc" ? (_jsx(ArrowUp, { className: "ml-2 h-4 w-4 text-muted-foreground", "aria-hidden": "true" })) : (_jsx(ArrowDown, { className: "ml-2 h-4 w-4 text-muted-foreground", "aria-hidden": "true" })))] })) : (_jsx(Text, { weight: "medium", children: column.header })) }) }, column.id)))] }) })), footer && (_jsx(TableFooter, { className: cn("border-t", !!paginationConfig && "border-b"), children: _jsx(TableRow, { className: "border-0", children: _jsx(TableCell, { colSpan: columns.length + (selection?.enabled ? 1 : 0), className: "p-4", children: footer }) }) }))] }) }), showScrollButtons && (_jsxs(Flex, { gap: 2, className: "absolute bottom-4 right-4 z-10", children: [_jsx(Button, { variant: "secondary", size: "icon", onClick: scrollToTop, className: "rounded-full shadow-lg h-9 w-9 bg-background/80 backdrop-blur-sm border-border-strong/20", "aria-label": "Scroll to top", children: _jsx(ArrowUp, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "secondary", size: "icon", onClick: scrollToBottom, className: "rounded-full shadow-lg h-9 w-9 bg-background/80 backdrop-blur-sm border-border-strong/20", "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "h-4 w-4" }) })] }))] }), paginationConfig && (_jsxs(Flex, { align: "center", justify: "between", className: cn("px-4 py-3 border rounded-b-lg bg-muted/30", stickyFooter && "shrink-0"), children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsxs(Text, { size: "sm", className: "text-muted-foreground whitespace-nowrap", children: ["Showing", " ", _jsx(Text, { as: "span", weight: "medium", className: "text-foreground inline", children: Math.min((paginationConfig.page - 1) * paginationConfig.pageSize + 1, paginationConfig.total) }), " ", "to", " ", _jsx(Text, { as: "span", weight: "medium", className: "text-foreground inline", children: Math.min(paginationConfig.page * paginationConfig.pageSize, paginationConfig.total) }), " ", "of", " ", _jsx(Text, { as: "span", weight: "medium", className: "text-foreground inline", children: paginationConfig.total }), " ", "results"] }), paginationConfig.pageSizeOptions && (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Text, { size: "sm", className: "text-muted-foreground whitespace-nowrap", children: "Rows per page" }), _jsxs(Select, { value: String(paginationConfig.pageSize), onValueChange: (value) => setPageSize(Number(value)), children: [_jsx(SelectTrigger, { className: "h-8 w-[70px]", children: _jsx(SelectValue, { placeholder: String(paginationConfig.pageSize) }) }), _jsx(SelectContent, { side: "top", children: paginationConfig.pageSizeOptions.map((option) => (_jsx(SelectItem, { value: String(option), children: option }, option))) })] })] }))] }), _jsxs(Flex, { align: "center", gap: 2, children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: previousPage, disabled: !hasPreviousPage, className: "h-8 w-8 p-0", children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), _jsx(Box, { as: "span", className: "sr-only", children: "Previous page" })] }), _jsx(Flex, { align: "center", gap: 1, children: _jsxs(Text, { size: "sm", weight: "medium", children: ["Page ", paginationConfig.page, " of ", totalPages] }) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: nextPage, disabled: !hasNextPage, className: "h-8 w-8 p-0", children: [_jsx(ChevronRight, { className: "h-4 w-4" }), _jsx(Box, { as: "span", className: "sr-only", children: "Next page" })] })] })] }))] }));
 }
 // Export skeleton for direct use
 export { DataTableSkeleton } from "./data-table-skeleton";

package/dist/components/data-table/data-table.stories.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * DataTable Storybook Stories
- * Essential examples demonstrating DataTable features
- */
 import React from "react";
 import { Badge } from "../badge";
 import { Button } from "../button";
@@ -705,7 +701,9 @@ export const ServerSideDataFetching = {
         React.useEffect(() => {
             fetchData();
         }, [fetchData]);
-        return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-4 bg-blue-50 dark:bg-blue-950 rounded-lg border border-blue-200 dark:border-blue-800", children: [_jsx("h3", { className: "font-semibold text-blue-900 dark:text-blue-100 mb-2", children: "Server-Side Mode" }), _jsx("p", { className: "text-sm text-blue-700 dark:text-blue-300 mb-2", children: "The table calls your callbacks when pagination, sorting, filtering, or search changes. You can then fetch fresh data from your API." }), _jsxs("div", { className: "text-xs text-blue-600 dark:text-blue-400 space-y-1", children: [_jsxs("div", { children: ["Current Page: ", currentPage] }), _jsxs("div", { children: ["Page Size: ", pageSize] }), _jsxs("div", { children: ["Total Records: ", totalRecords] }), _jsxs("div", { children: ["Sort: ", sortConfig ? `${String(sortConfig.key)} (${sortConfig.direction})` : "None"] }), _jsxs("div", { children: ["Search: ", searchQuery || "None"] })] })] }), _jsx(DataTable, { data: users, columns: userColumns, isLoading: isLoading, pagination: {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "p-4 bg-blue-50 dark:bg-blue-950 rounded-lg border border-blue-200 dark:border-blue-800", children: [_jsx("h3", { className: "font-semibold text-blue-900 dark:text-blue-100 mb-2", children: "Server-Side Mode" }), _jsx("p", { className: "text-sm text-blue-700 dark:text-blue-300 mb-2", children: "The table calls your callbacks when pagination, sorting, filtering, or search changes. You can then fetch fresh data from your API." }), _jsxs("div", { className: "text-xs text-blue-600 dark:text-blue-400 space-y-1", children: [_jsxs("div", { children: ["Current Page: ", currentPage] }), _jsxs("div", { children: ["Page Size: ", pageSize] }), _jsxs("div", { children: ["Total Records: ", totalRecords] }), _jsxs("div", { children: ["Sort:", " ", sortConfig
+                                            ? `${String(sortConfig.key)} (${sortConfig.direction})`
+                                            : "None"] }), _jsxs("div", { children: ["Search: ", searchQuery || "None"] })] })] }), _jsx(DataTable, { data: users, columns: userColumns, isLoading: isLoading, pagination: {
                         page: currentPage,
                         pageSize: pageSize,
                         total: totalRecords,

package/dist/components/date-picker/date-picker.d.ts

@@ -1,5 +1,5 @@
 import type { DateRange } from "react-day-picker";
-import { Calendar } from "../calendar/calendar";
+import { Calendar } from "../calendar";
 export interface DatePickerProps extends Omit<React.ComponentProps<typeof Calendar>, "mode" | "selected" | "onSelect" | "className" | "required" | "disabled"> {
     date?: Date;
     onDateChange?: (date: Date | undefined) => void;

package/dist/components/date-picker/date-picker.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button/button";
-import { Calendar } from "../calendar/calendar";
+import { Button } from "../button";
+import { Calendar } from "../calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 export function DatePicker({ date, onDateChange, placeholder = "Pick a date", disabled, buttonDisabled = false, className, buttonClassName, formatStr = "PPP", isLoading = false, ...props }) {
     if (isLoading) {
         return (_jsx(Skeleton, { className: cn("h-10 w-[280px] rounded-md", buttonClassName) }));

package/dist/components/date-picker/date-picker.types.d.ts

@@ -1,5 +1,5 @@
 import type { DateRange } from "react-day-picker";
-import type { Calendar } from "../calendar/calendar";
+import type { Calendar } from "../calendar";
 export interface DatePickerProps extends Omit<React.ComponentProps<typeof Calendar>, "mode" | "selected" | "onSelect" | "className" | "required" | "disabled"> {
     date?: Date;
     onDateChange?: (date: Date | undefined) => void;

package/dist/components/dialog/dialog-skeleton.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Supports header, body, and footer sections.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Dialog skeleton component
  *

package/dist/components/dialog/dialog.js

@@ -3,6 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { cn } from "../../lib/utils";
+import { Box } from "../box";
+import { Text } from "../text";
 function Dialog({ ...props }) {
     return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
@@ -25,13 +27,13 @@ function DialogContent({ className, children, showCloseButton = true, size = "de
         lg: "w-[90vw] max-w-2xl",
         xl: "w-[90vw] max-w-4xl",
     };
-    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("bg-card text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-30 flex flex-col max-h-[90vh] translate-x-[-50%] translate-y-[-50%] rounded-lg border duration-200 theme-card", sizeClasses[size], className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: cn("absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none p-1 hover:bg-accent", "focus-ring"), children: [_jsx(X, { className: "size-5", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("bg-card text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-30 flex flex-col max-h-[90vh] translate-x-[-50%] translate-y-[-50%] rounded-lg border duration-200 theme-card", sizeClasses[size], className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: cn("absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none p-1 hover:bg-accent", "focus-ring"), children: [_jsx(X, { className: "size-5", "aria-hidden": "true" }), _jsx(Text, { as: "span", className: "sr-only", children: "Close" })] }))] })] }));
 }
 function DialogHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-1.5 px-6 py-4 border-b", className), ...props }));
+    return (_jsx(Box, { "data-slot": "dialog-header", className: cn("flex flex-col gap-1.5 px-6 py-4 border-b", className), ...props }));
 }
 function DialogFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end px-6 py-4 border-t bg-muted/50 rounded-b-lg", className), ...props }));
+    return (_jsx(Box, { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end px-6 py-4 border-t bg-muted/50 rounded-b-lg", className), ...props }));
 }
 function DialogTitle({ className, translationKey, ...props }) {
     return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-lg font-semibold leading-none tracking-tight text-foreground", className), ...props }));
@@ -40,6 +42,6 @@ function DialogDescription({ className, descriptionKey, ...props }) {
     return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-sm leading-relaxed text-muted-foreground", className), ...props }));
 }
 function DialogBody({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "dialog-body", className: cn("flex-1 overflow-y-auto px-6 py-4 min-h-0", className), ...props }));
+    return (_jsx(Box, { "data-slot": "dialog-body", className: cn("flex-1 overflow-y-auto px-6 py-4 min-h-0", className), ...props }));
 }
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogBody, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/dialog/dialog.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "../button";
 import { Input } from "../input";
 import { Label } from "../label";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./dialog";
 const meta = {
     title: "Overlay/Dialog",
@@ -30,7 +30,7 @@ export const ScrollingContent = {
     render: () => (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Long Content" }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Terms of Service" }), _jsx(DialogDescription, { children: "Please read our terms of service carefully." })] }), _jsx(DialogBody, { children: Array.from({ length: 20 }).map(() => (_jsx("p", { className: "mb-4", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris." }, crypto.randomUUID()))) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", children: "Decline" }), _jsx(Button, { children: "Accept" })] })] })] })),
 };
 export const LoadingSkeleton = {
-    render: () => (_jsx(Skeleton, { className: "h-10 w-32 rounded-md" })),
+    render: () => _jsx(Skeleton, { className: "h-10 w-32 rounded-md" }),
     parameters: {
         docs: {
             description: {

package/dist/components/dnd/dnd.d.ts

@@ -2,10 +2,9 @@
  * DnD Component - Drag and Drop primitives for @dnd-kit
  * Provides consistent wrappers with animations, sortable support, and drag overlays
  */
-import type { DragEndEvent, DraggableAttributes, DragOverEvent, DragStartEvent, UniqueIdentifier, DraggableSyntheticListeners, DndContextProps as DndKitContextProps, Active, Over, Collision, CollisionDetection, PointerActivationConstraint } from "@dnd-kit/core";
-import { useDraggable, useDroppable, KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
-import { useSortable, sortableKeyboardCoordinates, type SortingStrategy } from "@dnd-kit/sortable";
-import type { Modifier } from "@dnd-kit/core";
+import type { Active, Collision, CollisionDetection, DndContextProps as DndKitContextProps, DragEndEvent, DraggableAttributes, DraggableSyntheticListeners, DragOverEvent, DragStartEvent, Modifier, Over, PointerActivationConstraint, UniqueIdentifier } from "@dnd-kit/core";
+import { KeyboardSensor, PointerSensor, TouchSensor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { type SortingStrategy, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
 import type { Transform } from "@dnd-kit/utilities";
 import * as React from "react";
 type SyntheticListenerMap = DraggableSyntheticListeners;
@@ -37,7 +36,7 @@ export interface UseDragDropSensorsOptions {
     keyboardCoordinateGetter?: typeof sortableKeyboardCoordinates;
 }
 declare function createDragDropSensors(options?: UseDragDropSensorsOptions): import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
-export interface DragDropContextProps extends Omit<DndKitContextProps, 'sensors'> {
+export interface DragDropContextProps extends Omit<DndKitContextProps, "sensors"> {
     children: React.ReactNode;
     sensors?: ReturnType<typeof createDragDropSensors>;
     useSensors?: UseDragDropSensorsOptions;

package/dist/components/dnd/dnd.js

@@ -4,9 +4,9 @@
  */
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DndContext as DndKitContext, useDraggable, useDroppable, DragOverlay, closestCenter, closestCorners, rectIntersection, pointerWithin, KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors, } from "@dnd-kit/core";
-import { SortableContext as SortableContextKit, useSortable, sortableKeyboardCoordinates, verticalListSortingStrategy, horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, } from "@dnd-kit/sortable";
-import { restrictToHorizontalAxis, restrictToVerticalAxis, restrictToWindowEdges, restrictToParentElement, restrictToFirstScrollableAncestor, } from "@dnd-kit/modifiers";
+import { closestCenter, closestCorners, DndContext as DndKitContext, DragOverlay, KeyboardSensor, PointerSensor, pointerWithin, rectIntersection, TouchSensor, useDraggable, useDroppable, useSensor, useSensors, } from "@dnd-kit/core";
+import { restrictToFirstScrollableAncestor, restrictToHorizontalAxis, restrictToParentElement, restrictToVerticalAxis, restrictToWindowEdges, } from "@dnd-kit/modifiers";
+import { horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, SortableContext as SortableContextKit, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import * as React from "react";
 import { cn } from "../../lib/utils";
@@ -39,7 +39,7 @@ export const sortingStrategies = {
     rectSwapping: rectSwappingStrategy,
 };
 function createDragDropSensors(options = {}) {
-    const { activationConstraint, keyboardCoordinateGetter = sortableKeyboardCoordinates } = options;
+    const { activationConstraint, keyboardCoordinateGetter = sortableKeyboardCoordinates, } = options;
     const sensors = useSensors(useSensor(PointerSensor, {
         activationConstraint,
     }), useSensor(TouchSensor, {
@@ -99,7 +99,7 @@ const Draggable = React.forwardRef(({ children, className, id, disabled = false,
 });
 Draggable.displayName = "Draggable";
 const SortableContext = React.forwardRef(({ children, items, strategy = verticalListSortingStrategy }, _ref) => {
-    const itemIds = React.useMemo(() => items.map((item) => (typeof item === "object" && "id" in item ? item.id : item)), [items]);
+    const itemIds = React.useMemo(() => items.map((item) => typeof item === "object" && "id" in item ? item.id : item), [items]);
     return (_jsx(SortableContextKit, { items: itemIds, strategy: strategy, children: children }));
 });
 SortableContext.displayName = "SortableContext";