@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/ColumnsSection-DrYNzV9j.js

@@ -0,0 +1,435 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { H as d, C as l, a as i, T as s, bQ as c, c as m, X as u, K as n } from "../index-DoxeCFUJ.js";
+import { Sliders as g } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const h = [
+  {
+    id: "PRJ-001",
+    name: "Apollo Design System",
+    leader: {
+      name: "Esteban Burgos",
+      avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&q=80"
+    },
+    progress: 85,
+    status: "Active",
+    priority: "High",
+    budget: 45e3
+  },
+  {
+    id: "PRJ-002",
+    name: "E-commerce Gateway",
+    leader: {
+      name: "Sarah Connor",
+      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=100&q=80"
+    },
+    progress: 40,
+    status: "Active",
+    priority: "High",
+    budget: 125e3
+  },
+  {
+    id: "PRJ-003",
+    name: "Analytics Dashboard",
+    leader: {
+      name: "John Doe",
+      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&q=80"
+    },
+    progress: 100,
+    status: "Completed",
+    priority: "Medium",
+    budget: 68e3
+  },
+  {
+    id: "PRJ-004",
+    name: "Mobile App Migration",
+    leader: {
+      name: "Alice Vance",
+      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100&q=80"
+    },
+    progress: 15,
+    status: "Planning",
+    priority: "Low",
+    budget: 95e3
+  },
+  {
+    id: "PRJ-005",
+    name: "API Cloud Sync Refactor",
+    leader: {
+      name: "Marcus Aurelius",
+      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=100&q=80"
+    },
+    progress: 0,
+    status: "On Hold",
+    priority: "High",
+    budget: 32e3
+  }
+], w = () => /* @__PURE__ */ a("div", { className: "flex flex-col gap-8", children: [
+  /* @__PURE__ */ e(
+    d,
+    {
+      title: "Columns Configuration",
+      description: "Learn how to structure, style, and customize columns inside the DataTable. Leverage full power of TanStack Table properties combined with custom tucu-ui size calculations.",
+      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
+    }
+  ),
+  /* @__PURE__ */ e(l, { className: "p-6", children: /* @__PURE__ */ a(i, { title: "Column Declarations & Sizing", className: "mb-4", children: [
+    /* @__PURE__ */ a(s, { className: "text-sm text-foreground/70 mb-4", children: [
+      "The columns in ",
+      /* @__PURE__ */ e("code", { children: "DataTable" }),
+      " are defined as an array of",
+      " ",
+      /* @__PURE__ */ e("code", { children: "TanstackTable.ColumnDef<T>" }),
+      " objects. To simplify package management and avoid direct dependencies on",
+      " ",
+      /* @__PURE__ */ e("code", { children: "@tanstack/react-table" }),
+      ",",
+      /* @__PURE__ */ e("code", { children: "tucu-ui" }),
+      " re-exports the entire TanStack Table API namespace via",
+      " ",
+      /* @__PURE__ */ e("code", { children: "TanstackTable" }),
+      ". You should always import these types directly from the library."
+    ] }),
+    /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mt-6", children: [
+      /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(s, { tag: "h6", className: "font-semibold text-brand", children: "Dynamic Auto-Layout" }),
+        /* @__PURE__ */ a(s, { className: "text-xs text-foreground/60 leading-relaxed", children: [
+          "If a column does not have an explicit ",
+          /* @__PURE__ */ e("code", { children: "size" }),
+          " defined,",
+          " ",
+          /* @__PURE__ */ e("code", { children: "DataTable" }),
+          " dynamically calculates and assigns its width at runtime. It divides the remaining space of the parent container (after subtracting all fixed-width columns and row helper columns) equally among all columns that lack an explicit size."
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(s, { tag: "h6", className: "font-semibold text-brand", children: "Fixed Width Dimensions" }),
+        /* @__PURE__ */ a(s, { className: "text-xs text-foreground/60 leading-relaxed", children: [
+          "To specify exact widths, use the ",
+          /* @__PURE__ */ e("code", { children: "size" }),
+          " parameter inside the column definition (e.g. ",
+          /* @__PURE__ */ e("code", { children: "size: 150" }),
+          "). You can also set boundary constraints using ",
+          /* @__PURE__ */ e("code", { children: "minSize" }),
+          " and",
+          " ",
+          /* @__PURE__ */ e("code", { children: "maxSize" }),
+          " to restrict the columns when users interactively drag to resize them."
+        ] })
+      ] })
+    ] })
+  ] }) }),
+  /* @__PURE__ */ e(l, { className: "p-6", children: /* @__PURE__ */ a(i, { title: "Feature Toggles and Controls", className: "mb-4", children: [
+    /* @__PURE__ */ e(s, { className: "text-sm text-foreground/70 mb-6", children: "Columns support granular control over user interactions. Features like sorting, reordering, pinning, and resizing can be enabled/disabled both at the column level and table level." }),
+    /* @__PURE__ */ a("div", { className: "space-y-6 text-sm", children: [
+      /* @__PURE__ */ a("div", { className: "border-l-2 border-brand/40 pl-4 py-1 space-y-1", children: [
+        /* @__PURE__ */ a("strong", { className: "text-foreground", children: [
+          "Column-Level Overrides (inside ",
+          /* @__PURE__ */ e("code", { children: "ColumnDef" }),
+          "):"
+        ] }),
+        /* @__PURE__ */ a("ul", { className: "list-disc list-inside text-xs text-foreground/70 space-y-1 mt-1", children: [
+          /* @__PURE__ */ a("li", { children: [
+            /* @__PURE__ */ e("code", { children: "enableSorting?: boolean" }),
+            " - Enables or disables sorting header triggers on this column."
+          ] }),
+          /* @__PURE__ */ a("li", { children: [
+            /* @__PURE__ */ e("code", { children: "enableResizing?: boolean" }),
+            " - Restricts drag resizing operations on this specific column."
+          ] }),
+          /* @__PURE__ */ a("li", { children: [
+            /* @__PURE__ */ e("code", { children: "enableHiding?: boolean" }),
+            " - Controls whether users can hide this column through the header visibility menu."
+          ] }),
+          /* @__PURE__ */ a("li", { children: [
+            /* @__PURE__ */ e("code", { children: "enableDraggable?: boolean" }),
+            " - Allows or prevents users from dragging the column header laterally to reorder it."
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "border-l-2 border-indigo-500/40 pl-4 py-1 space-y-1", children: [
+        /* @__PURE__ */ a("strong", { className: "text-foreground", children: [
+          "Table-Level Configurations (props on",
+          " ",
+          /* @__PURE__ */ e("code", { children: "<DataTable>" }),
+          "):"
+        ] }),
+        /* @__PURE__ */ a("ul", { className: "list-disc list-inside text-xs text-foreground/70 space-y-1 mt-1", children: [
+          /* @__PURE__ */ a("li", { children: [
+            /* @__PURE__ */ e("code", { children: "initialConfig" }),
+            " - A partial column definition applied as defaults for all columns in the table (e.g., setting a default ",
+            /* @__PURE__ */ e("code", { children: "minSize" }),
+            " or disabling sorting by default)."
+          ] }),
+          /* @__PURE__ */ a("li", { children: [
+            /* @__PURE__ */ e("code", { children: "headerOptions" }),
+            " - Dictates what header actions are enabled globally (e.g., ",
+            /* @__PURE__ */ e("code", { children: "enableResizeColumns" }),
+            ",",
+            " ",
+            /* @__PURE__ */ e("code", { children: "enableDragColumns" }),
+            ",",
+            " ",
+            /* @__PURE__ */ e("code", { children: "enablePinLeftColumns" }),
+            ")."
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) }),
+  /* @__PURE__ */ e(l, { className: "p-6", children: /* @__PURE__ */ a(
+    i,
+    {
+      title: "Interactive Column Configuration Demo",
+      className: "mb-4",
+      children: [
+        /* @__PURE__ */ e(
+          s,
+          {
+            tag: "p",
+            className: "text-sm text-gray-500 dark:text-gray-400 mb-6",
+            children: "The table below demonstrates custom sizing, alignment, disabled sorting on object columns, and beautiful custom cell renderers like avatars and progress bars. Feel free to drag to resize headers, drag columns to reorder them, or toggle visibility."
+          }
+        ),
+        /* @__PURE__ */ e(
+          c,
+          {
+            tableId: "columns-demo-table",
+            columns: [
+              {
+                id: "id",
+                accessorKey: "id",
+                header: "ID",
+                size: 100,
+                // Explicit size in pixels
+                enableResizing: !1,
+                // Prevent resizing for this column
+                cell: (r) => /* @__PURE__ */ e("code", { className: "text-xs font-mono text-gray-500 dark:text-gray-400", children: String(r.getValue()) })
+              },
+              {
+                id: "name",
+                accessorKey: "name",
+                header: "Project Name",
+                // Will take a share of the remaining dynamic width since size is not specified
+                cell: (r) => /* @__PURE__ */ e("span", { className: "font-semibold text-foreground", children: String(r.getValue()) })
+              },
+              {
+                id: "leader",
+                accessorKey: "leader",
+                header: "Project Leader",
+                size: 200,
+                enableSorting: !1,
+                // Sorting doesn't make sense for object structures
+                cell: (r) => {
+                  const t = r.getValue();
+                  return /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ e(
+                      u,
+                      {
+                        image: t.avatar,
+                        alt: t.name,
+                        size: "sm",
+                        border: !1,
+                        className: "w-8 h-8 rounded-full overflow-hidden"
+                      }
+                    ),
+                    /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: t.name })
+                  ] });
+                }
+              },
+              {
+                id: "progress",
+                accessorKey: "progress",
+                header: "Progress",
+                size: 150,
+                cell: (r) => {
+                  const t = r.getValue();
+                  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-1 w-full max-w-[120px]", children: [
+                    /* @__PURE__ */ e("div", { className: "flex justify-between items-center text-xs text-gray-500", children: /* @__PURE__ */ a("span", { children: [
+                      t,
+                      "%"
+                    ] }) }),
+                    /* @__PURE__ */ e("div", { className: "w-full bg-gray-200 dark:bg-gray-700 h-1.5 rounded-full overflow-hidden", children: /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "bg-brand h-full rounded-full transition-all duration-300",
+                        style: { width: `${t}%` }
+                      }
+                    ) })
+                  ] });
+                }
+              },
+              {
+                id: "status",
+                accessorKey: "status",
+                header: "Status",
+                size: 120,
+                cell: (r) => {
+                  const t = r.getValue();
+                  return /* @__PURE__ */ e(n, { variant: "soft", color: t === "Completed" ? "success" : t === "Active" ? "primary" : t === "On Hold" ? "danger" : "warning", children: t });
+                }
+              },
+              {
+                id: "priority",
+                accessorKey: "priority",
+                header: "Priority",
+                size: 100,
+                cell: (r) => {
+                  const t = r.getValue();
+                  return /* @__PURE__ */ e(n, { variant: "outline", color: t === "High" ? "danger" : t === "Medium" ? "warning" : "gray", children: t });
+                }
+              },
+              {
+                id: "budget",
+                accessorKey: "budget",
+                header: () => /* @__PURE__ */ e("div", { className: "text-right", children: "Budget" }),
+                size: 120,
+                cell: (r) => {
+                  const t = r.getValue();
+                  return /* @__PURE__ */ e("div", { className: "text-right font-mono font-medium", children: new Intl.NumberFormat("en-US", {
+                    style: "currency",
+                    currency: "USD",
+                    maximumFractionDigits: 0
+                  }).format(t) });
+                }
+              }
+            ],
+            data: h,
+            title: "Active Workspaces",
+            pagination: {
+              showPagination: !0,
+              pageSize: 5
+            },
+            headerOptions: {
+              enableHideColumns: !0,
+              enableResizeColumns: !0,
+              enableDragColumns: !0,
+              enablePinLeftColumns: !0,
+              enablePinRightColumns: !0
+            },
+            enableHideColumns: !0
+          }
+        )
+      ]
+    }
+  ) }),
+  /* @__PURE__ */ e(l, { className: "p-6", children: /* @__PURE__ */ e(i, { title: "Implementation Code", className: "mb-4", children: /* @__PURE__ */ e(
+    m,
+    {
+      language: "tsx",
+      code: `import { DataTable, Badge, Avatar, TanstackTable } from '@e-burgos/tucu-ui';
+
+interface Project {
+  id: string;
+  name: string;
+  leader: { name: string; avatar: string };
+  progress: number;
+  status: 'Active' | 'Completed' | 'On Hold';
+  budget: number;
+}
+
+const columns: TanstackTable.ColumnDef<Project, any>[] = [
+  {
+    id: 'id',
+    accessorKey: 'id',
+    header: 'ID',
+    size: 100, // Fixed width
+    enableResizing: false, // Cannot resize this specific column
+    cell: (info) => <code className="text-xs font-mono">{String(info.getValue())}</code>,
+  },
+  {
+    id: 'name',
+    accessorKey: 'name',
+    header: 'Project Name',
+    // Dynamic width: will grow to consume remaining available space
+  },
+  {
+    id: 'leader',
+    accessorKey: 'leader',
+    header: 'Project Leader',
+    size: 200,
+    enableSorting: false, // Non-sortable column
+    cell: (info) => {
+      const val = info.getValue() as Project['leader'];
+      return (
+        <div className="flex items-center gap-3">
+          <Avatar image={val.avatar} alt={val.name} size="sm" border={false} className="w-8 h-8 rounded-full overflow-hidden" />
+          <span className="text-sm font-medium">{val.name}</span>
+        </div>
+      );
+    },
+  },
+  {
+    id: 'progress',
+    accessorKey: 'progress',
+    header: 'Progress',
+    size: 150,
+    cell: (info) => {
+      const val = info.getValue() as number;
+      return (
+        <div className="flex flex-col gap-1 w-full max-w-[120px]">
+          <span className="text-xs text-gray-500">{val}%</span>
+          <div className="w-full bg-gray-200 dark:bg-gray-700 h-1.5 rounded-full overflow-hidden">
+            <div className="bg-brand h-full rounded-full" style={{ width: \`\${val}%\` }} />
+          </div>
+        </div>
+      );
+    },
+  },
+  {
+    id: 'status',
+    accessorKey: 'status',
+    header: 'Status',
+    size: 120,
+    cell: (info) => {
+      const val = info.getValue() as string;
+      const color = val === 'Completed' ? 'success' : val === 'Active' ? 'brand' : 'danger';
+      return (
+        <Badge variant="soft" color={color}>
+          {val}
+        </Badge>
+      );
+    },
+  },
+  {
+    id: 'budget',
+    accessorKey: 'budget',
+    header: () => <div className="text-right">Budget</div>,
+    size: 120,
+    cell: (info) => (
+      <div className="text-right font-mono font-medium">
+        {new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: 'USD',
+          maximumFractionDigits: 0,
+        }).format(info.getValue() as number)}
+      </div>
+    ),
+  },
+];
+
+export default function WorkspacesTable({ data }: { data: Project[] }) {
+  return (
+    <DataTable
+      tableId="workspaces-table"
+      columns={columns}
+      data={data}
+      title="Active Workspaces"
+      headerOptions={{
+        enableHideColumns: true,
+        enableResizeColumns: true,
+        enableDragColumns: true,
+        enablePinLeftColumns: true,
+        enablePinRightColumns: true,
+      }}
+      enableHideColumns={true}
+    />
+  );
+}`
+    }
+  ) }) })
+] });
+export {
+  w as default
+};

package/documentation/ColumnsSection-qPdS2C02.js

@@ -0,0 +1,109 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=[{id:"PRJ-001",name:"Apollo Design System",leader:{name:"Esteban Burgos",avatar:"https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&q=80"},progress:85,status:"Active",priority:"High",budget:45e3},{id:"PRJ-002",name:"E-commerce Gateway",leader:{name:"Sarah Connor",avatar:"https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=100&q=80"},progress:40,status:"Active",priority:"High",budget:125e3},{id:"PRJ-003",name:"Analytics Dashboard",leader:{name:"John Doe",avatar:"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&q=80"},progress:100,status:"Completed",priority:"Medium",budget:68e3},{id:"PRJ-004",name:"Mobile App Migration",leader:{name:"Alice Vance",avatar:"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100&q=80"},progress:15,status:"Planning",priority:"Low",budget:95e3},{id:"PRJ-005",name:"API Cloud Sync Refactor",leader:{name:"Marcus Aurelius",avatar:"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=100&q=80"},progress:0,status:"On Hold",priority:"High",budget:32e3}],o=()=>{const l=[{id:"id",accessorKey:"id",header:"ID",size:100,enableResizing:!1,cell:t=>e.jsx("code",{className:"text-xs font-mono text-gray-500 dark:text-gray-400",children:String(t.getValue())})},{id:"name",accessorKey:"name",header:"Project Name",cell:t=>e.jsx("span",{className:"font-semibold text-foreground",children:String(t.getValue())})},{id:"leader",accessorKey:"leader",header:"Project Leader",size:200,enableSorting:!1,cell:t=>{const s=t.getValue();return e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(a.Avatar,{image:s.avatar,alt:s.name,size:"sm",border:!1,className:"w-8 h-8 rounded-full overflow-hidden"}),e.jsx("span",{className:"text-sm font-medium",children:s.name})]})}},{id:"progress",accessorKey:"progress",header:"Progress",size:150,cell:t=>{const s=t.getValue();return e.jsxs("div",{className:"flex flex-col gap-1 w-full max-w-[120px]",children:[e.jsx("div",{className:"flex justify-between items-center text-xs text-gray-500",children:e.jsxs("span",{children:[s,"%"]})}),e.jsx("div",{className:"w-full bg-gray-200 dark:bg-gray-700 h-1.5 rounded-full overflow-hidden",children:e.jsx("div",{className:"bg-brand h-full rounded-full transition-all duration-300",style:{width:`${s}%`}})})]})}},{id:"status",accessorKey:"status",header:"Status",size:120,cell:t=>{const s=t.getValue(),r=s==="Completed"?"success":s==="Active"?"primary":s==="On Hold"?"danger":"warning";return e.jsx(a.Badge,{variant:"soft",color:r,children:s})}},{id:"priority",accessorKey:"priority",header:"Priority",size:100,cell:t=>{const s=t.getValue(),r=s==="High"?"danger":s==="Medium"?"warning":"gray";return e.jsx(a.Badge,{variant:"outline",color:r,children:s})}},{id:"budget",accessorKey:"budget",header:()=>e.jsx("div",{className:"text-right",children:"Budget"}),size:120,cell:t=>{const s=t.getValue();return e.jsx("div",{className:"text-right font-mono font-medium",children:new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",maximumFractionDigits:0}).format(s)})}}];return e.jsxs("div",{className:"flex flex-col gap-8",children:[e.jsx(a.HeroCard,{title:"Columns Configuration",description:"Learn how to structure, style, and customize columns inside the DataTable. Leverage full power of TanStack Table properties combined with custom tucu-ui size calculations.",icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.Sliders,{className:"w-8 h-8 sm:w-10 sm:h-10 text-white"})})}),e.jsx(a.CardContainer,{className:"p-6",children:e.jsxs(a.CardTitle,{title:"Column Declarations & Sizing",className:"mb-4",children:[e.jsxs(a.Typography,{className:"text-sm text-foreground/70 mb-4",children:["The columns in ",e.jsx("code",{children:"DataTable"})," are defined as an array of"," ",e.jsx("code",{children:"TanstackTable.ColumnDef<T>"})," objects. To simplify package management and avoid direct dependencies on"," ",e.jsx("code",{children:"@tanstack/react-table"}),",",e.jsx("code",{children:"tucu-ui"})," re-exports the entire TanStack Table API namespace via"," ",e.jsx("code",{children:"TanstackTable"}),". You should always import these types directly from the library."]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6 mt-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx(a.Typography,{tag:"h6",className:"font-semibold text-brand",children:"Dynamic Auto-Layout"}),e.jsxs(a.Typography,{className:"text-xs text-foreground/60 leading-relaxed",children:["If a column does not have an explicit ",e.jsx("code",{children:"size"})," defined,"," ",e.jsx("code",{children:"DataTable"})," dynamically calculates and assigns its width at runtime. It divides the remaining space of the parent container (after subtracting all fixed-width columns and row helper columns) equally among all columns that lack an explicit size."]})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(a.Typography,{tag:"h6",className:"font-semibold text-brand",children:"Fixed Width Dimensions"}),e.jsxs(a.Typography,{className:"text-xs text-foreground/60 leading-relaxed",children:["To specify exact widths, use the ",e.jsx("code",{children:"size"})," parameter inside the column definition (e.g. ",e.jsx("code",{children:"size: 150"}),"). You can also set boundary constraints using ",e.jsx("code",{children:"minSize"})," and"," ",e.jsx("code",{children:"maxSize"})," to restrict the columns when users interactively drag to resize them."]})]})]})]})}),e.jsx(a.CardContainer,{className:"p-6",children:e.jsxs(a.CardTitle,{title:"Feature Toggles and Controls",className:"mb-4",children:[e.jsx(a.Typography,{className:"text-sm text-foreground/70 mb-6",children:"Columns support granular control over user interactions. Features like sorting, reordering, pinning, and resizing can be enabled/disabled both at the column level and table level."}),e.jsxs("div",{className:"space-y-6 text-sm",children:[e.jsxs("div",{className:"border-l-2 border-brand/40 pl-4 py-1 space-y-1",children:[e.jsxs("strong",{className:"text-foreground",children:["Column-Level Overrides (inside ",e.jsx("code",{children:"ColumnDef"}),"):"]}),e.jsxs("ul",{className:"list-disc list-inside text-xs text-foreground/70 space-y-1 mt-1",children:[e.jsxs("li",{children:[e.jsx("code",{children:"enableSorting?: boolean"})," - Enables or disables sorting header triggers on this column."]}),e.jsxs("li",{children:[e.jsx("code",{children:"enableResizing?: boolean"})," - Restricts drag resizing operations on this specific column."]}),e.jsxs("li",{children:[e.jsx("code",{children:"enableHiding?: boolean"})," - Controls whether users can hide this column through the header visibility menu."]}),e.jsxs("li",{children:[e.jsx("code",{children:"enableDraggable?: boolean"})," - Allows or prevents users from dragging the column header laterally to reorder it."]})]})]}),e.jsxs("div",{className:"border-l-2 border-indigo-500/40 pl-4 py-1 space-y-1",children:[e.jsxs("strong",{className:"text-foreground",children:["Table-Level Configurations (props on"," ",e.jsx("code",{children:"<DataTable>"}),"):"]}),e.jsxs("ul",{className:"list-disc list-inside text-xs text-foreground/70 space-y-1 mt-1",children:[e.jsxs("li",{children:[e.jsx("code",{children:"initialConfig"})," - A partial column definition applied as defaults for all columns in the table (e.g., setting a default ",e.jsx("code",{children:"minSize"})," or disabling sorting by default)."]}),e.jsxs("li",{children:[e.jsx("code",{children:"headerOptions"})," - Dictates what header actions are enabled globally (e.g., ",e.jsx("code",{children:"enableResizeColumns"}),","," ",e.jsx("code",{children:"enableDragColumns"}),","," ",e.jsx("code",{children:"enablePinLeftColumns"}),")."]})]})]})]})]})}),e.jsx(a.CardContainer,{className:"p-6",children:e.jsxs(a.CardTitle,{title:"Interactive Column Configuration Demo",className:"mb-4",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:"The table below demonstrates custom sizing, alignment, disabled sorting on object columns, and beautiful custom cell renderers like avatars and progress bars. Feel free to drag to resize headers, drag columns to reorder them, or toggle visibility."}),e.jsx(a.DataTable,{tableId:"columns-demo-table",columns:l,data:n,title:"Active Workspaces",pagination:{showPagination:!0,pageSize:5},headerOptions:{enableHideColumns:!0,enableResizeColumns:!0,enableDragColumns:!0,enablePinLeftColumns:!0,enablePinRightColumns:!0},enableHideColumns:!0})]})}),e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.CardTitle,{title:"Implementation Code",className:"mb-4",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { DataTable, Badge, Avatar, TanstackTable } from '@e-burgos/tucu-ui';
+
+interface Project {
+  id: string;
+  name: string;
+  leader: { name: string; avatar: string };
+  progress: number;
+  status: 'Active' | 'Completed' | 'On Hold';
+  budget: number;
+}
+
+const columns: TanstackTable.ColumnDef<Project, any>[] = [
+  {
+    id: 'id',
+    accessorKey: 'id',
+    header: 'ID',
+    size: 100, // Fixed width
+    enableResizing: false, // Cannot resize this specific column
+    cell: (info) => <code className="text-xs font-mono">{String(info.getValue())}</code>,
+  },
+  {
+    id: 'name',
+    accessorKey: 'name',
+    header: 'Project Name',
+    // Dynamic width: will grow to consume remaining available space
+  },
+  {
+    id: 'leader',
+    accessorKey: 'leader',
+    header: 'Project Leader',
+    size: 200,
+    enableSorting: false, // Non-sortable column
+    cell: (info) => {
+      const val = info.getValue() as Project['leader'];
+      return (
+        <div className="flex items-center gap-3">
+          <Avatar image={val.avatar} alt={val.name} size="sm" border={false} className="w-8 h-8 rounded-full overflow-hidden" />
+          <span className="text-sm font-medium">{val.name}</span>
+        </div>
+      );
+    },
+  },
+  {
+    id: 'progress',
+    accessorKey: 'progress',
+    header: 'Progress',
+    size: 150,
+    cell: (info) => {
+      const val = info.getValue() as number;
+      return (
+        <div className="flex flex-col gap-1 w-full max-w-[120px]">
+          <span className="text-xs text-gray-500">{val}%</span>
+          <div className="w-full bg-gray-200 dark:bg-gray-700 h-1.5 rounded-full overflow-hidden">
+            <div className="bg-brand h-full rounded-full" style={{ width: \`\${val}%\` }} />
+          </div>
+        </div>
+      );
+    },
+  },
+  {
+    id: 'status',
+    accessorKey: 'status',
+    header: 'Status',
+    size: 120,
+    cell: (info) => {
+      const val = info.getValue() as string;
+      const color = val === 'Completed' ? 'success' : val === 'Active' ? 'brand' : 'danger';
+      return (
+        <Badge variant="soft" color={color}>
+          {val}
+        </Badge>
+      );
+    },
+  },
+  {
+    id: 'budget',
+    accessorKey: 'budget',
+    header: () => <div className="text-right">Budget</div>,
+    size: 120,
+    cell: (info) => (
+      <div className="text-right font-mono font-medium">
+        {new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: 'USD',
+          maximumFractionDigits: 0,
+        }).format(info.getValue() as number)}
+      </div>
+    ),
+  },
+];
+
+export default function WorkspacesTable({ data }: { data: Project[] }) {
+  return (
+    <DataTable
+      tableId="workspaces-table"
+      columns={columns}
+      data={data}
+      title="Active Workspaces"
+      headerOptions={{
+        enableHideColumns: true,
+        enableResizeColumns: true,
+        enableDragColumns: true,
+        enablePinLeftColumns: true,
+        enablePinRightColumns: true,
+      }}
+      enableHideColumns={true}
+    />
+  );
+}`})})})]})};exports.default=o;

package/documentation/CommonErrorsSection-D5ulhjHy.js

@@ -0,0 +1,77 @@
+import { jsxs as o, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { H as n, T as r, C as m, a as l, aj as d } from "../index-DoxeCFUJ.js";
+import { Bug as c, AlertCircle as u, XCircle as h, Info as s, AlertTriangle as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ o(i, { children: [
+  /* @__PURE__ */ e(
+    n,
+    {
+      title: "Common Errors and Solutions",
+      description: "Troubleshooting guide for the most frequent layout system issues.",
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-red-500 via-rose-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ o("div", { className: "text-center", children: [
+    /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Common Errors and Solutions" }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Troubleshooting guide for the most frequent layout system issues"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(m, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Troubleshooting Guide", className: "mt-2 mb-2", children: /* @__PURE__ */ o("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-red-500 via-rose-500 to-pink-500 shadow-md", children: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+      /* @__PURE__ */ e(r, { tag: "h3", className: "text-base font-semibold", children: "Common Issues" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "space-y-6", children: [
+      {
+        variant: "error",
+        icon: /* @__PURE__ */ e(h, { className: "h-4 w-4" }),
+        title: "useTheme must be used within ThemeProvider",
+        description: "This error occurs when you try to use useTheme outside of ThemeProvider context. Always wrap your application with ThemeProvider first. The ThemeProvider must be at the root level of your application."
+      },
+      {
+        variant: "info",
+        icon: /* @__PURE__ */ e(s, { className: "h-4 w-4" }),
+        title: "Layout not rendering correctly",
+        description: "Make sure you're using ThemeProvider instead of trying to use RootLayout directly. ThemeProvider handles all layout logic internally. Also ensure menuItems prop is provided for Admin and Horizontal layouts."
+      },
+      {
+        variant: "warning",
+        icon: /* @__PURE__ */ e(p, { className: "h-4 w-4" }),
+        title: "Menu items not showing",
+        description: "For Admin and Horizontal layouts, you must provide the menuItems prop. Clean layout does not require menuItems. Ensure each menu item has at least a name and path property."
+      },
+      {
+        variant: "info",
+        icon: /* @__PURE__ */ e(s, { className: "h-4 w-4" }),
+        title: "Routing not working as expected?",
+        description: /* @__PURE__ */ o(i, { children: [
+          "Remember that ThemeProvider includes BrowserRouter internally. If you use customRoutes, make sure to use ",
+          /* @__PURE__ */ e("code", { children: "path" }),
+          " instead of",
+          " ",
+          /* @__PURE__ */ e("code", { children: "href" }),
+          " in menuItems. The ",
+          /* @__PURE__ */ e("code", { children: "component" }),
+          " prop in menuItems is only used for automatic routing. If you provide customRoutes, it takes precedence."
+        ] })
+      }
+    ].map((t, a) => /* @__PURE__ */ e(d, { variant: t.variant, children: /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-2 font-semibold", children: [
+        t.icon,
+        t.title
+      ] }),
+      /* @__PURE__ */ e("div", { className: "text-sm mt-1", children: t.description })
+    ] }) }, a)) })
+  ] }) }) })
+] });
+export {
+  x as default
+};

package/documentation/CommonErrorsSection-D__sdWvP.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const o=[{variant:"error",icon:e.jsx(t.XCircle,{className:"h-4 w-4"}),title:"useTheme must be used within ThemeProvider",description:"This error occurs when you try to use useTheme outside of ThemeProvider context. Always wrap your application with ThemeProvider first. The ThemeProvider must be at the root level of your application."},{variant:"info",icon:e.jsx(t.Info,{className:"h-4 w-4"}),title:"Layout not rendering correctly",description:"Make sure you're using ThemeProvider instead of trying to use RootLayout directly. ThemeProvider handles all layout logic internally. Also ensure menuItems prop is provided for Admin and Horizontal layouts."},{variant:"warning",icon:e.jsx(t.AlertTriangle,{className:"h-4 w-4"}),title:"Menu items not showing",description:"For Admin and Horizontal layouts, you must provide the menuItems prop. Clean layout does not require menuItems. Ensure each menu item has at least a name and path property."},{variant:"info",icon:e.jsx(t.Info,{className:"h-4 w-4"}),title:"Routing not working as expected?",description:e.jsxs(e.Fragment,{children:["Remember that ThemeProvider includes BrowserRouter internally. If you use customRoutes, make sure to use ",e.jsx("code",{children:"path"})," instead of"," ",e.jsx("code",{children:"href"})," in menuItems. The ",e.jsx("code",{children:"component"})," prop in menuItems is only used for automatic routing. If you provide customRoutes, it takes precedence."]})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Common Errors and Solutions",description:"Troubleshooting guide for the most frequent layout system issues.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-red-500 via-rose-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Bug,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Common Errors and Solutions"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Troubleshooting guide for the most frequent layout system issues"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Troubleshooting Guide",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-red-500 via-rose-500 to-pink-500 shadow-md",children:e.jsx(t.AlertCircle,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Common Issues"})]}),e.jsx("div",{className:"space-y-6",children:o.map((r,i)=>e.jsx(s.Alert,{variant:r.variant,children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[r.icon,r.title]}),e.jsx("div",{className:"text-sm mt-1",children:r.description})]})},i))})]})})})]})};exports.default=n;