react-shadcn-kit 0.2.0 → 0.2.2

package/README.md

@@ -9,6 +9,7 @@ A state-of-the-art, high-performance UI library built with **React 19**, **Tailw
 - **⚡ Performance First**: Zero Tailwind runtime overhead, optimized build pipeline, and light-weight exports.
 - **🛡️ Type Safety**: Full TypeScript support with strict mode and exported types for every component.
 - **🌟 Interactive Elements**: Advanced components like `ActionButton` with built-in transitions and `CustomButton` with rich hover effects.
+- **📊 Data Components**: Production-ready `Kanban` board with drag-and-drop and `DataTable` with sorting, filtering, and pagination.
 - **📣 Accessibility**: Built-in ARIA hooks and screen-reader utilities.
 
 ## 📦 Installation
@@ -77,6 +78,95 @@ const date = formatDate(new Date()); // "Oct 24, 2023"
 const slug = generateSlug("Hello World!"); // "hello-world"
 ```
 
+### 📋 Kanban Board
+
+Build interactive task boards with drag-and-drop functionality.
+
+```tsx
+import { Kanban, type KanbanItem, type KanbanColumnDef } from "react-shadcn-kit/composites";
+
+interface Task extends KanbanItem {
+  title: string;
+  description?: string;
+}
+
+const columns: KanbanColumnDef[] = [
+  { id: "todo", title: "To Do" },
+  { id: "in-progress", title: "In Progress" },
+  { id: "done", title: "Done" },
+];
+
+const tasks: Task[] = [
+  { id: "1", status: "todo", title: "Design homepage", description: "Create mockups" },
+  { id: "2", status: "in-progress", title: "Build API", description: "REST endpoints" },
+];
+
+<Kanban
+  items={tasks}
+  columns={columns}
+  onItemUpdate={(itemId, newStatus) => {
+    // Handle status update
+    console.log(`Task ${itemId} moved to ${newStatus}`);
+  }}
+  onItemClick={(item) => {
+    // Handle card click
+    console.log("Clicked:", item);
+  }}
+/>;
+```
+
+### 📊 Data Table
+
+Advanced data tables with sorting, filtering, and pagination.
+
+```tsx
+import { DataTable, DataTableColumnHeader } from "react-shadcn-kit/composites";
+import { ColumnDef } from "@tanstack/react-table";
+
+type Payment = {
+  id: string;
+  amount: number;
+  status: "pending" | "processing" | "success" | "failed";
+  email: string;
+};
+
+const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: "email",
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
+  },
+  {
+    accessorKey: "amount",
+    header: "Amount",
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue("amount"));
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount);
+    },
+  },
+];
+
+const data: Payment[] = [{ id: "1", amount: 100, status: "success", email: "user@example.com" }];
+
+<DataTable
+  columns={columns}
+  data={data}
+  searchKey="email"
+  facetedFilters={[
+    {
+      columnId: "status",
+      title: "Status",
+      options: [
+        { label: "Success", value: "success" },
+        { label: "Pending", value: "pending" },
+      ],
+    },
+  ]}
+/>;
+```
+
 ## 🛠️ Development
 
 Run the playground locally: