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

package/dist/components/dnd/dnd.stories.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fn } from "@storybook/test";
-import { GripVertical, Move3D, Trash2, Copy, Edit, } from "lucide-react";
+import { Copy, Edit, GripVertical, Move3D, Trash2 } from "lucide-react";
 import { useState } from "react";
-import { Card } from "../card";
 import { Badge } from "../badge";
 import { Button } from "../button";
-import { DragDropContext, SortableContext, SortableItem, DragOverlayComponent, sortingStrategies, modifiers, collisionDetectionAlgorithms, useDragDropSensors, } from "./dnd";
+import { Card } from "../card";
+import { collisionDetectionAlgorithms, DragDropContext, DragOverlayComponent, modifiers, SortableContext, SortableItem, sortingStrategies, useDragDropSensors, } from "./dnd";
 const meta = {
     title: "Utilities/DnD",
     component: DragDropContext,
@@ -55,13 +55,13 @@ export const BasicSortableList = {
                 return newItems;
             });
         };
-        return (_jsxs("div", { className: "w-full max-w-md mx-auto", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Drag to Reorder Tasks" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, isSorting, listeners, attributes, setNodeRef }) => (_jsxs("div", { ref: setNodeRef, ...attributes, ...listeners, className: `
-												relative flex items-center gap-3 p-4 rounded-lg border bg-card
-												transition-all duration-200
+        return (_jsxs("div", { className: "w-full max-w-md mx-auto", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Drag to Reorder Tasks" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, isSorting, listeners, attributes, setNodeRef, }) => (_jsxs("div", { ref: setNodeRef, ...attributes, ...listeners, className: `
+												relative flex items-center gap-3 p-4 rounded-lg border bg-card
+												transition-all duration-200
 												${isDragging
                                         ? "shadow-2xl scale-105 opacity-50 ring-2 ring-primary cursor-grabbing z-50"
-                                        : "shadow-sm hover:shadow-md cursor-grab"}
-												${isSorting ? "transition-transform duration-200" : ""}
+                                        : "shadow-sm hover:shadow-md cursor-grab"}
+												${isSorting ? "transition-transform duration-200" : ""}
 											`, children: [_jsx(GripVertical, { className: "size-5 text-muted-foreground flex-shrink-0" }), _jsx("span", { className: "flex-1", children: item.content }), isDragging && (_jsx(Move3D, { className: "size-5 text-primary animate-pulse flex-shrink-0" }))] })) }, item.id))) }) }) })] }));
     },
 };
@@ -100,10 +100,10 @@ export const HorizontalList = {
                 return newItems;
             });
         };
-        return (_jsxs("div", { className: "w-full", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Sprint Planning" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, modifiers: [modifiers.restrictToHorizontalAxis], children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.horizontal, children: _jsx("div", { className: "flex gap-3 overflow-x-auto pb-4", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, isSorting, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
-												relative min-w-[200px] cursor-grab active:cursor-grabbing
-												${isDragging ? "shadow-2xl scale-105 opacity-50 ring-2 ring-primary z-50" : ""}
-												${isSorting ? "transition-transform duration-200" : ""}
+        return (_jsxs("div", { className: "w-full", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Sprint Planning" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, modifiers: [modifiers.restrictToHorizontalAxis], children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.horizontal, children: _jsx("div", { className: "flex gap-3 overflow-x-auto pb-4", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, isSorting, listeners, attributes, setNodeRef, }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
+												relative min-w-[200px] cursor-grab active:cursor-grabbing
+												${isDragging ? "shadow-2xl scale-105 opacity-50 ring-2 ring-primary z-50" : ""}
+												${isSorting ? "transition-transform duration-200" : ""}
 											`, children: _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h4", { className: "font-semibold", children: item.content }), _jsx(Badge, { variant: item.status === "completed"
                                                             ? "success"
                                                             : item.status === "active"
@@ -132,8 +132,16 @@ export const MultipleContainers = {
                 { id: "todo-3", content: "Create wireframes", priority: "low" },
             ],
             inProgress: [
-                { id: "progress-1", content: "Build component library", priority: "high" },
-                { id: "progress-2", content: "Create API endpoints", priority: "medium" },
+                {
+                    id: "progress-1",
+                    content: "Build component library",
+                    priority: "high",
+                },
+                {
+                    id: "progress-2",
+                    content: "Create API endpoints",
+                    priority: "medium",
+                },
             ],
             done: [
                 { id: "done-1", content: "Setup project repository", priority: "high" },
@@ -203,15 +211,15 @@ export const MultipleContainers = {
                                                     ? "To Do"
                                                     : containerId === "inProgress"
                                                         ? "In Progress"
-                                                        : "Done" }), _jsx(Badge, { variant: "outline", children: items.length })] }), _jsx(SortableItem, { id: containerId, className: "flex-1 min-h-[400px] rounded-lg border-2 border-dashed bg-muted/20 p-3", children: ({ isOver }) => (_jsx("div", { className: `
-													h-full rounded-md transition-colors
-													${isOver ? "bg-accent/50 ring-2 ring-primary" : ""}
-												`, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, isSorting, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
-																			cursor-grab active:cursor-grabbing relative
+                                                        : "Done" }), _jsx(Badge, { variant: "outline", children: items.length })] }), _jsx(SortableItem, { id: containerId, className: "flex-1 min-h-[400px] rounded-lg border-2 border-dashed bg-muted/20 p-3", children: ({ isOver }) => (_jsx("div", { className: `
+													h-full rounded-md transition-colors
+													${isOver ? "bg-accent/50 ring-2 ring-primary" : ""}
+												`, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, isSorting, listeners, attributes, setNodeRef, }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
+																			cursor-grab active:cursor-grabbing relative
 																			${isDragging
                                                                 ? "shadow-2xl scale-105 opacity-60 ring-2 ring-primary z-50"
-                                                                : "shadow-sm hover:shadow-md"}
-																			${isSorting ? "transition-transform duration-200 ease-out" : ""}
+                                                                : "shadow-sm hover:shadow-md"}
+																			${isSorting ? "transition-transform duration-200 ease-out" : ""}
 																		`, children: _jsx("div", { className: "p-3", children: _jsxs("div", { className: "flex items-start justify-between gap-2 mb-2", children: [_jsx("p", { className: "font-medium text-sm flex-1", children: item.content }), _jsx(Badge, { variant: item.priority === "high"
                                                                                 ? "destructive"
                                                                                 : item.priority === "medium"
@@ -251,10 +259,10 @@ export const GridLayout = {
                 return newItems;
             });
         };
-        return (_jsxs("div", { className: "w-full", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Grid Dashboard" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.rect, children: _jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, isSorting, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
-												relative aspect-square cursor-grab active:cursor-grabbing
-												${isDragging ? "shadow-2xl scale-105 opacity-50 ring-2 ring-primary z-50" : ""}
-												${isSorting ? "transition-transform duration-200" : ""}
+        return (_jsxs("div", { className: "w-full", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Grid Dashboard" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.rect, children: _jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, isSorting, listeners, attributes, setNodeRef, }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
+												relative aspect-square cursor-grab active:cursor-grabbing
+												${isDragging ? "shadow-2xl scale-105 opacity-50 ring-2 ring-primary z-50" : ""}
+												${isSorting ? "transition-transform duration-200" : ""}
 											`, children: _jsxs("div", { className: "h-full flex flex-col items-center justify-center p-4", children: [_jsx(GripVertical, { className: "size-5 text-muted-foreground mb-2" }), _jsx("p", { className: "font-medium text-center", children: item.content })] }) })) }, item.id))) }) }) })] }));
     },
 };
@@ -292,8 +300,8 @@ export const WithDragHandle = {
                 return newItems;
             });
         };
-        return (_jsxs("div", { className: "w-full max-w-2xl mx-auto", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Tasks with Drag Handle" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, handle: true, children: ({ isDragging, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, className: `
-												${isDragging ? "shadow-2xl scale-105 opacity-50 ring-2 ring-primary" : ""}
+        return (_jsxs("div", { className: "w-full max-w-2xl mx-auto", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Tasks with Drag Handle" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, handle: true, children: ({ isDragging, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, className: `
+												${isDragging ? "shadow-2xl scale-105 opacity-50 ring-2 ring-primary" : ""}
 											`, children: _jsxs("div", { className: "flex items-center gap-3 p-4", children: [_jsx("div", { ...listeners, className: "cursor-grab active:cursor-grabbing p-1 rounded hover:bg-accent touch-none", children: _jsx(GripVertical, { className: "size-5 text-muted-foreground" }) }), _jsx("span", { className: "flex-1", children: item.content }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "ghost", children: _jsx(Edit, { className: "size-4" }) }), _jsx(Button, { size: "sm", variant: "ghost", children: _jsx(Copy, { className: "size-4" }) }), _jsx(Button, { size: "sm", variant: "ghost", children: _jsx(Trash2, { className: "size-4" }) })] })] }) })) }, item.id))) }) }) })] }));
     },
 };
@@ -378,9 +386,9 @@ export const PressDelay = {
                 return newItems;
             });
         };
-        return (_jsxs("div", { className: "w-full max-w-md mx-auto", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Press & Hold to Drag" }), _jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "Hold for 250ms before dragging starts" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
-												cursor-grab active:cursor-grabbing
-												${isDragging ? "shadow-2xl scale-105 opacity-50 ring-2 ring-primary" : ""}
+        return (_jsxs("div", { className: "w-full max-w-md mx-auto", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Press & Hold to Drag" }), _jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "Hold for 250ms before dragging starts" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
+												cursor-grab active:cursor-grabbing
+												${isDragging ? "shadow-2xl scale-105 opacity-50 ring-2 ring-primary" : ""}
 											`, children: _jsxs("div", { className: "flex items-center gap-3 p-4", children: [_jsx(GripVertical, { className: "size-5 text-muted-foreground" }), _jsx("span", { className: "flex-1", children: item.content })] }) })) }, item.id))) }) }) })] }));
     },
 };
@@ -421,9 +429,9 @@ export const MinimumDistance = {
                 return newItems;
             });
         };
-        return (_jsxs("div", { className: "w-full max-w-md mx-auto", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Minimum Distance Drag" }), _jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "Move 10px before dragging starts" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
-												cursor-grab active:cursor-grabbing
-												${isDragging ? "shadow-2xl scale-105 opacity-50 ring-2 ring-primary" : ""}
+        return (_jsxs("div", { className: "w-full max-w-md mx-auto", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Minimum Distance Drag" }), _jsx("p", { className: "text-sm text-muted-foreground mb-4", children: "Move 10px before dragging starts" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
+												cursor-grab active:cursor-grabbing
+												${isDragging ? "shadow-2xl scale-105 opacity-50 ring-2 ring-primary" : ""}
 											`, children: _jsxs("div", { className: "flex items-center gap-3 p-4", children: [_jsx(GripVertical, { className: "size-5 text-muted-foreground" }), _jsx("span", { className: "flex-1", children: item.content })] }) })) }, item.id))) }) }) })] }));
     },
 };
@@ -460,9 +468,9 @@ export const VerticalAxisOnly = {
                 return newItems;
             });
         };
-        return (_jsxs("div", { className: "w-full max-w-md mx-auto", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Vertical Axis Only" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, modifiers: [modifiers.restrictToVerticalAxis], children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
-												cursor-grab active:cursor-grabbing
-												${isDragging ? "shadow-2xl opacity-50" : ""}
+        return (_jsxs("div", { className: "w-full max-w-md mx-auto", children: [_jsx("h3", { className: "mb-4 text-lg font-semibold", children: "Vertical Axis Only" }), _jsx(DragDropContext, { sensors: sensors, onDragEnd: handleDragEnd, modifiers: [modifiers.restrictToVerticalAxis], children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
+												cursor-grab active:cursor-grabbing
+												${isDragging ? "shadow-2xl opacity-50" : ""}
 											`, children: _jsxs("div", { className: "flex items-center gap-3 p-4", children: [_jsx(GripVertical, { className: "size-5 text-muted-foreground" }), _jsx("span", { className: "flex-1", children: item.content })] }) })) }, item.id))) }) }) })] }));
     },
 };
@@ -503,10 +511,10 @@ export const WithActions = {
                 return newItems;
             });
         };
-        return (_jsxs("div", { className: "w-full max-w-md mx-auto", children: [_jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: "Check the Actions panel to see drag callbacks" }), _jsx(DragDropContext, { sensors: sensors, onDragStart: args.onDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, isSorting, listeners, attributes, setNodeRef }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
-												relative cursor-grab active:cursor-grabbing
-												${isDragging ? "z-50 shadow-xl" : ""}
-												${isSorting ? "transition-transform duration-200" : ""}
+        return (_jsxs("div", { className: "w-full max-w-md mx-auto", children: [_jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: "Check the Actions panel to see drag callbacks" }), _jsx(DragDropContext, { sensors: sensors, onDragStart: args.onDragStart, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: items, strategy: sortingStrategies.vertical, children: _jsx("div", { className: "space-y-2", children: items.map((item) => (_jsx(SortableItem, { id: item.id, children: ({ isDragging, isSorting, listeners, attributes, setNodeRef, }) => (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: `
+												relative cursor-grab active:cursor-grabbing
+												${isDragging ? "z-50 shadow-xl" : ""}
+												${isSorting ? "transition-transform duration-200" : ""}
 											`, children: _jsxs("div", { className: "flex items-center gap-3 p-4", children: [_jsx(GripVertical, { className: "size-5 text-muted-foreground" }), _jsx("span", { className: "flex-1", children: item.content })] }) })) }, item.id))) }) }) })] }));
     },
 };

package/dist/components/drawer/drawer.stories.js

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { Button } from "../button";
 import { Input } from "../input";
 import { Label } from "../label";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Textarea } from "../textarea";
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "./drawer";
 const meta = {
@@ -32,7 +32,7 @@ export const PositionExamples = {
     render: () => (_jsx("div", { className: "flex flex-wrap gap-4", children: ["bottom", "top", "left", "right"].map((direction) => (_jsxs(Drawer, { direction: direction, children: [_jsx(DrawerTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", className: "capitalize", children: direction }) }), _jsx(DrawerContent, { children: _jsxs("div", { className: "mx-auto w-full max-w-sm h-full flex flex-col", children: [_jsxs(DrawerHeader, { children: [_jsxs(DrawerTitle, { className: "capitalize", children: [direction, " Drawer"] }), _jsxs(DrawerDescription, { children: ["This drawer slides from the ", direction, "."] })] }), _jsx("div", { className: "p-6 flex-1", children: _jsxs("p", { className: "text-sm text-muted-foreground", children: ["Content for the ", direction, " drawer."] }) }), _jsxs(DrawerFooter, { children: [_jsx(Button, { children: "Action" }), _jsx(DrawerClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Close" }) })] })] }) })] }, direction))) })),
 };
 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/empty-state/empty-state-skeleton.js

@@ -6,9 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Provides zero-CLS skeleton state that matches actual empty state layout.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
-import { SkeletonCircle } from "../skeleton/skeleton-patterns";
-import { SkeletonButton } from "../skeleton/skeleton-patterns";
+import { Skeleton } from "../skeleton";
+import { SkeletonButton, SkeletonCircle } from "../skeleton/skeleton-patterns";
 /**
  * Empty State skeleton component
  *

package/dist/components/empty-state/empty-state.d.ts

@@ -4,7 +4,7 @@ import type * as React from "react";
 import { Button } from "../button";
 import type { EmptyStateSkeletonConfig } from "../skeleton/skeleton.types";
 declare const emptyStateVariants: (props?: ({
-    variant?: "default" | "destructive" | null | undefined;
+    variant?: "destructive" | "default" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof emptyStateVariants> {

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Matches field label + control + helper text layout.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Field skeleton component
  *

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from "../input";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Textarea } from "../textarea";
 import { Field, FieldDescription, FieldError, FieldLabel, FieldSeparator, } from "./field";
 const meta = {

package/dist/components/file-upload/file-upload-skeleton.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Matches dropzone appearance with icon, text, and button.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * File Upload skeleton component
  *

package/dist/components/flex/flex.d.ts

@@ -3,14 +3,16 @@ import * as React from "react";
 declare const flexVariants: (props?: ({
     direction?: "row" | "column" | "rowReverse" | "columnReverse" | null | undefined;
     wrap?: "nowrap" | "wrap" | "wrapReverse" | null | undefined;
-    align?: "center" | "end" | "stretch" | "start" | "baseline" | null | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
-    gap?: 0 | 1 | 2 | 3 | 4 | 16 | 5 | 6 | 10 | 12 | 8 | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "end" | "start" | "around" | "between" | "evenly" | null | undefined;
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
     grow?: boolean | null | undefined;
     shrink?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface FlexProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
+export interface FlexProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof flexVariants> {
     asChild?: boolean;
+    as?: React.ElementType;
+    [key: string]: any;
 }
-declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
+declare const Flex: React.ForwardRefExoticComponent<Omit<FlexProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Flex, flexVariants };

package/dist/components/flex/flex.js

@@ -61,8 +61,8 @@ const flexVariants = cva("flex", {
         gap: 0,
     },
 });
-const Flex = React.forwardRef(({ className, direction, wrap, align, justify, gap, grow, shrink, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "div";
+const Flex = React.forwardRef(({ className, direction, wrap, align, justify, gap, grow, shrink, asChild = false, as: Tag = "div", ...props }, ref) => {
+    const Comp = asChild ? Slot : Tag;
     return (_jsx(Comp, { className: cn(flexVariants({
             direction,
             wrap,

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

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

package/dist/components/flex/index.js

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

package/dist/components/grid/grid.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const gridVariants: (props?: ({
+    cols?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 7 | 9 | 11 | null | undefined;
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | null | undefined;
+    flow?: "row" | "col" | "rowDense" | "colDense" | null | undefined;
+    align?: "center" | "end" | "stretch" | "start" | "baseline" | null | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+    asChild?: boolean;
+}
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+declare const gridItemVariants: (props?: ({
+    colSpan?: "auto" | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 7 | 9 | 11 | "full" | null | undefined;
+    rowSpan?: "auto" | 1 | 2 | 3 | 4 | 5 | 6 | "full" | null | undefined;
+    colStart?: "auto" | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 7 | 9 | 11 | 13 | null | undefined;
+    colEnd?: "auto" | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 7 | 9 | 11 | 13 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridItemVariants> {
+    asChild?: boolean;
+}
+declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
+export { Grid, GridItem, gridVariants, gridItemVariants };

package/dist/components/grid/grid.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const gridVariants = cva("grid", {
+    variants: {
+        cols: {
+            1: "grid-cols-1",
+            2: "grid-cols-2",
+            3: "grid-cols-3",
+            4: "grid-cols-4",
+            5: "grid-cols-5",
+            6: "grid-cols-6",
+            7: "grid-cols-7",
+            8: "grid-cols-8",
+            9: "grid-cols-9",
+            10: "grid-cols-10",
+            11: "grid-cols-11",
+            12: "grid-cols-12",
+            none: "grid-cols-none",
+        },
+        gap: {
+            0: "gap-0",
+            1: "gap-1",
+            2: "gap-2",
+            3: "gap-3",
+            4: "gap-4",
+            5: "gap-5",
+            6: "gap-6",
+            8: "gap-8",
+            10: "gap-10",
+            12: "gap-12",
+            16: "gap-16",
+        },
+        flow: {
+            row: "grid-flow-row",
+            col: "grid-flow-col",
+            rowDense: "grid-flow-row-dense",
+            colDense: "grid-flow-col-dense",
+        },
+        align: {
+            start: "items-start",
+            center: "items-center",
+            end: "items-end",
+            stretch: "items-stretch",
+            baseline: "items-baseline",
+        },
+        justify: {
+            start: "justify-start",
+            center: "justify-center",
+            end: "justify-end",
+            between: "justify-between",
+            around: "justify-around",
+            evenly: "justify-evenly",
+        },
+    },
+    defaultVariants: {
+        cols: 1,
+        gap: 0,
+        flow: "row",
+    },
+});
+const Grid = React.forwardRef(({ className, cols, gap, flow, align, justify, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(Comp, { className: cn(gridVariants({ cols, gap, flow, align, justify, className })), ref: ref, ...props }));
+});
+Grid.displayName = "Grid";
+const gridItemVariants = cva("", {
+    variants: {
+        colSpan: {
+            1: "col-span-1",
+            2: "col-span-2",
+            3: "col-span-3",
+            4: "col-span-4",
+            5: "col-span-5",
+            6: "col-span-6",
+            7: "col-span-7",
+            8: "col-span-8",
+            9: "col-span-9",
+            10: "col-span-10",
+            11: "col-span-11",
+            12: "col-span-12",
+            full: "col-span-full",
+            auto: "col-auto",
+        },
+        rowSpan: {
+            1: "row-span-1",
+            2: "row-span-2",
+            3: "row-span-3",
+            4: "row-span-4",
+            5: "row-span-5",
+            6: "row-span-6",
+            full: "row-span-full",
+            auto: "row-auto",
+        },
+        colStart: {
+            1: "col-start-1",
+            2: "col-start-2",
+            3: "col-start-3",
+            4: "col-start-4",
+            5: "col-start-5",
+            6: "col-start-6",
+            7: "col-start-7",
+            8: "col-start-8",
+            9: "col-start-9",
+            10: "col-start-10",
+            11: "col-start-11",
+            12: "col-start-12",
+            13: "col-start-13",
+            auto: "col-start-auto",
+        },
+        colEnd: {
+            1: "col-end-1",
+            2: "col-end-2",
+            3: "col-end-3",
+            4: "col-end-4",
+            5: "col-end-5",
+            6: "col-end-6",
+            7: "col-end-7",
+            8: "col-end-8",
+            9: "col-end-9",
+            10: "col-end-10",
+            11: "col-end-11",
+            12: "col-end-12",
+            13: "col-end-13",
+            auto: "col-end-auto",
+        },
+    },
+});
+const GridItem = React.forwardRef(({ className, colSpan, rowSpan, colStart, colEnd, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(Comp, { className: cn(gridItemVariants({ colSpan, rowSpan, colStart, colEnd, className })), ref: ref, ...props }));
+});
+GridItem.displayName = "GridItem";
+export { Grid, GridItem, gridVariants, gridItemVariants };

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Grid } from "./grid";
+declare const meta: Meta<typeof Grid>;
+export default meta;
+type Story = StoryObj<typeof Grid>;
+export declare const Default: Story;
+export declare const WithSpans: Story;
+export declare const Responsive: Story;

package/dist/components/grid/grid.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Grid, GridItem } from "./grid";
+const meta = {
+    title: "Components/Grid",
+    component: Grid,
+    tags: ["autodocs"],
+    argTypes: {
+        cols: {
+            control: "select",
+            options: [1, 2, 3, 4, 5, 6, 12, "none"],
+        },
+        gap: {
+            control: "select",
+            options: [0, 1, 2, 4, 8, 16],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        cols: 3,
+        gap: 4,
+        children: (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-primary/20 p-4 rounded text-center", children: "1" }), _jsx("div", { className: "bg-primary/20 p-4 rounded text-center", children: "2" }), _jsx("div", { className: "bg-primary/20 p-4 rounded text-center", children: "3" }), _jsx("div", { className: "bg-primary/20 p-4 rounded text-center", children: "4" }), _jsx("div", { className: "bg-primary/20 p-4 rounded text-center", children: "5" }), _jsx("div", { className: "bg-primary/20 p-4 rounded text-center", children: "6" })] })),
+    },
+};
+export const WithSpans = {
+    render: () => (_jsxs(Grid, { cols: 12, gap: 4, children: [_jsx(GridItem, { colSpan: 12, className: "bg-primary/20 p-4 rounded text-center", children: "Header (12)" }), _jsx(GridItem, { colSpan: 4, className: "bg-primary/20 p-4 rounded text-center", children: "Sidebar (4)" }), _jsx(GridItem, { colSpan: 8, className: "bg-primary/20 p-4 rounded text-center", children: "Content (8)" }), _jsx(GridItem, { colSpan: 12, className: "bg-primary/20 p-4 rounded text-center", children: "Footer (12)" })] })),
+};
+export const Responsive = {
+    render: () => (_jsxs(Grid, { className: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4", gap: 4, children: [_jsx("div", { className: "bg-primary/20 p-4 rounded text-center", children: "1" }), _jsx("div", { className: "bg-primary/20 p-4 rounded text-center", children: "2" }), _jsx("div", { className: "bg-primary/20 p-4 rounded text-center", children: "3" }), _jsx("div", { className: "bg-primary/20 p-4 rounded text-center", children: "4" })] })),
+};

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

@@ -0,0 +1 @@
+export * from "./grid";

package/dist/components/grid/index.js

@@ -0,0 +1 @@
+export * from "./grid";

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

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { type FlexProps } from "../flex/flex";
+import { type FlexProps } from "../flex";
 export interface GroupProps extends Omit<FlexProps, "direction"> {
     direction?: "row" | "rowReverse";
 }
-declare const Group: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const Group: React.ForwardRefExoticComponent<Omit<GroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Group };

package/dist/components/group/group.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Flex } from "../flex/flex";
+import { Flex } from "../flex";
 const Group = React.forwardRef(({ className, direction = "row", gap = 4, align = "center", wrap = "wrap", ...props }, ref) => {
     return (_jsx(Flex, { ref: ref, direction: direction, gap: gap, align: align, wrap: wrap, className: cn(className), ...props }));
 });

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

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

package/dist/components/group/index.js

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

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

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Matches logo + navigation + actions layout.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 /**
  * Header skeleton component
  *

package/dist/components/header/header.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
-export interface NavLink {
+export interface HeaderNavLink {
     label: string;
     href: string;
     active?: boolean;
-    children?: NavLink[];
+    children?: HeaderNavLink[];
 }
 export interface UserProfileLink {
     label: string;
@@ -23,7 +23,7 @@ export interface UserProfile {
 }
 export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
     logo?: React.ReactNode;
-    navLinks?: NavLink[];
+    navLinks?: HeaderNavLink[];
     userMenu?: React.ReactNode;
     userProfile?: UserProfile;
     searchBar?: React.ReactNode;