@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/PlaygroundSection-CbAGK96L.js

@@ -0,0 +1,415 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { H as h, P as g, ab as p, bQ as y, T as w, K as f } from "../index-DoxeCFUJ.js";
+import { Wand2 as S } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = [
+  {
+    id: "1",
+    name: "Esteban Burgos",
+    email: "esteban@tucu-ui.dev",
+    role: "Maintainer",
+    status: "Active",
+    joinedDate: "2025-01-10"
+  },
+  {
+    id: "2",
+    name: "Alice Smith",
+    email: "alice@example.com",
+    role: "Developer",
+    status: "Active",
+    joinedDate: "2025-03-15"
+  },
+  {
+    id: "3",
+    name: "Bob Johnson",
+    email: "bob@example.com",
+    role: "Designer",
+    status: "Inactive",
+    joinedDate: "2025-04-20"
+  },
+  {
+    id: "4",
+    name: "Charlie Brown",
+    email: "charlie@example.com",
+    role: "Product Manager",
+    status: "Pending",
+    joinedDate: "2025-05-12"
+  },
+  {
+    id: "5",
+    name: "Diana Prince",
+    email: "diana@example.com",
+    role: "Security Analyst",
+    status: "Active",
+    joinedDate: "2025-06-01"
+  }
+], E = () => {
+  const l = [
+    {
+      id: "name",
+      accessorKey: "name",
+      header: "Name",
+      footer: "Name",
+      cell: (e) => /* @__PURE__ */ o("span", { className: "font-semibold", children: String(e.getValue()) })
+    },
+    {
+      id: "email",
+      accessorKey: "email",
+      header: "Email",
+      footer: "Email"
+    },
+    {
+      id: "role",
+      accessorKey: "role",
+      header: "Role",
+      footer: "Role"
+    },
+    {
+      id: "status",
+      accessorKey: "status",
+      header: "Status",
+      footer: "Status",
+      cell: (e) => {
+        const n = e.getValue();
+        return /* @__PURE__ */ o(f, { variant: "soft", color: n === "Active" ? "success" : n === "Inactive" ? "danger" : "warning", children: n });
+      }
+    }
+  ], r = ({ row: e }) => {
+    if (!e) return null;
+    const n = e.original;
+    return /* @__PURE__ */ a("div", { className: "p-4 bg-gray-50/50 dark:bg-gray-900/30 rounded-lg border border-border/60 space-y-2", children: [
+      /* @__PURE__ */ o(w, { tag: "h6", className: "text-brand font-bold mb-2", children: "Detailed Record Information" }),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ o("span", { className: "font-semibold text-gray-500", children: "Record ID:" }),
+          " ",
+          n.id
+        ] }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ o("span", { className: "font-semibold text-gray-500", children: "Joined Date:" }),
+          " ",
+          n.joinedDate
+        ] }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ o("span", { className: "font-semibold text-gray-500", children: "Full Name:" }),
+          " ",
+          n.name
+        ] }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ o("span", { className: "font-semibold text-gray-500", children: "Email Address:" }),
+          " ",
+          n.email
+        ] })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ o(
+      h,
+      {
+        title: "DataTable Playground",
+        description: "Interact with the props controls below to modify the DataTable in real-time. Test loading, error states, and toggle pinning, resizing, or expanding behaviors.",
+        icon: /* @__PURE__ */ o("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__ */ o(S, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
+      }
+    ),
+    /* @__PURE__ */ o(
+      g,
+      {
+        componentName: "DataTable",
+        defaultValues: {
+          title: "Interactive User Table",
+          border: !0,
+          isLoading: !1,
+          isError: !1,
+          isFetching: !1,
+          showHeader: !0,
+          showFooter: !0,
+          smallAnatomy: !1,
+          enableMultiSort: !0,
+          manualSorting: !1,
+          mode: "light",
+          forceShowMenuActions: !1,
+          enableHideColumns: !0,
+          enablePinLeftColumns: !0,
+          enablePinRightColumns: !0,
+          enableSortColumns: !0,
+          enableResizeColumns: !0,
+          enableDragColumns: !0,
+          showPagination: !0,
+          rowsInfo: !0,
+          hideRecordsSelector: !1,
+          noDataMessage: "No matching users found.",
+          rowSelectionType: "checkbox",
+          enableRowActions: !0,
+          enableSubComponent: !0,
+          enableSearch: !0,
+          enableRightActions: !0
+        },
+        controlOverrides: [
+          {
+            name: "title",
+            type: "text",
+            description: "Header title of the table"
+          },
+          {
+            name: "border",
+            type: "boolean",
+            description: "Show table borders"
+          },
+          {
+            name: "isLoading",
+            type: "boolean",
+            description: "Simulates table loading state"
+          },
+          {
+            name: "isError",
+            type: "boolean",
+            description: "Simulates table error state"
+          },
+          {
+            name: "isFetching",
+            type: "boolean",
+            description: "Simulates background data fetching"
+          },
+          {
+            name: "showHeader",
+            type: "boolean",
+            description: "Whether to show the top header block"
+          },
+          {
+            name: "showFooter",
+            type: "boolean",
+            description: "Whether to show the bottom footer block"
+          },
+          {
+            name: "smallAnatomy",
+            type: "boolean",
+            description: "Reduces padding for a denser table layout"
+          },
+          {
+            name: "enableMultiSort",
+            type: "boolean",
+            description: "Enable multi-column sorting (Ctrl+Click)"
+          },
+          {
+            name: "manualSorting",
+            type: "boolean",
+            description: "Server-side sorting mode"
+          },
+          {
+            name: "mode",
+            type: "select",
+            options: ["light", "dark"],
+            description: "Theme mode of the DataTable"
+          },
+          {
+            name: "forceShowMenuActions",
+            type: "boolean",
+            description: "Always show action menus regardless of hover state"
+          },
+          {
+            name: "enableHideColumns",
+            type: "boolean",
+            description: "Allow users to hide/show columns from header options"
+          },
+          {
+            name: "enablePinLeftColumns",
+            type: "boolean",
+            description: "Allow pinning columns to the left side"
+          },
+          {
+            name: "enablePinRightColumns",
+            type: "boolean",
+            description: "Allow pinning columns to the right side"
+          },
+          {
+            name: "enableSortColumns",
+            type: "boolean",
+            description: "Allow columns to be sorted"
+          },
+          {
+            name: "enableResizeColumns",
+            type: "boolean",
+            description: "Allow resizing columns by dragging boundaries"
+          },
+          {
+            name: "enableDragColumns",
+            type: "boolean",
+            description: "Allow dragging column headers to reorder them"
+          },
+          {
+            name: "showPagination",
+            type: "boolean",
+            description: "Show bottom pagination controls"
+          },
+          {
+            name: "rowsInfo",
+            type: "boolean",
+            description: "Display page and row count information in footer"
+          },
+          {
+            name: "hideRecordsSelector",
+            type: "boolean",
+            description: "Hide the page-size records selector dropdown"
+          },
+          {
+            name: "noDataMessage",
+            type: "text",
+            description: "Custom message displayed when data is empty"
+          },
+          {
+            name: "rowSelectionType",
+            type: "select",
+            options: ["checkbox", "radio", "none"],
+            description: "Method for row selection in the table"
+          },
+          {
+            name: "enableRowActions",
+            type: "boolean",
+            description: "Demonstrates custom context row actions (Edit/Delete)"
+          },
+          {
+            name: "enableSubComponent",
+            type: "boolean",
+            description: "Demonstrates expandable detail sub-component panels"
+          },
+          {
+            name: "enableSearch",
+            type: "boolean",
+            description: "Allow users to search row data from header search bar (restricted to Name, Email and Role)"
+          },
+          {
+            name: "enableRightActions",
+            type: "boolean",
+            description: "Renders custom action components (e.g. ListContainer menu button) on the right of the header"
+          }
+        ],
+        includeProps: [
+          "title",
+          "border",
+          "isLoading",
+          "isError",
+          "isFetching",
+          "showHeader",
+          "showFooter",
+          "smallAnatomy",
+          "enableMultiSort",
+          "manualSorting",
+          "mode",
+          "forceShowMenuActions",
+          "enableHideColumns",
+          "enablePinLeftColumns",
+          "enablePinRightColumns",
+          "enableSortColumns",
+          "enableResizeColumns",
+          "enableDragColumns",
+          "showPagination",
+          "rowsInfo",
+          "hideRecordsSelector",
+          "noDataMessage",
+          "rowSelectionType",
+          "enableRowActions",
+          "enableSubComponent",
+          "enableSearch",
+          "enableRightActions"
+        ],
+        children: (e) => {
+          const n = {
+            enableHideColumns: e.enableHideColumns,
+            enablePinLeftColumns: e.enablePinLeftColumns,
+            enablePinRightColumns: e.enablePinRightColumns,
+            enableSortColumns: e.enableSortColumns,
+            enableResizeColumns: e.enableResizeColumns,
+            enableDragColumns: e.enableDragColumns
+          }, i = {
+            showPagination: e.showPagination,
+            rowsInfo: e.rowsInfo,
+            hideRecordsSelector: e.hideRecordsSelector,
+            pageSize: 5
+          }, s = {
+            noData: e.noDataMessage
+          }, d = e.rowSelectionType !== "none" ? {
+            type: e.rowSelectionType,
+            getSelection: (t) => {
+              console.log(
+                "Playground Selection:",
+                t.map((u) => u.original.id)
+              );
+            }
+          } : void 0, c = e.enableRowActions ? [
+            {
+              action: "edit",
+              label: () => "Edit User",
+              onClick: (t) => alert(`Playground Edit: ${t.original.name}`)
+            },
+            {
+              action: "delete",
+              label: () => "Delete User",
+              onClick: (t) => alert(`Playground Delete: ${t.original.name}`)
+            }
+          ] : void 0, m = e.enableSubComponent ? r : null, b = e.enableRightActions ? /* @__PURE__ */ o(
+            p,
+            {
+              label: "Actions",
+              position: "bottom",
+              align: "end",
+              trigger: "click",
+              items: [
+                {
+                  id: "action-1",
+                  label: "Export CSV",
+                  onClick: () => alert("Exporting to CSV...")
+                },
+                {
+                  id: "action-2",
+                  label: "Export PDF",
+                  onClick: () => alert("Exporting to PDF...")
+                },
+                {
+                  id: "action-3",
+                  label: "Archive Data",
+                  onClick: () => alert("Archiving data..."),
+                  disabled: !0
+                }
+              ]
+            }
+          ) : void 0;
+          return /* @__PURE__ */ o("div", { className: "w-full", children: /* @__PURE__ */ o(
+            y,
+            {
+              tableId: "playground-datatable-demo",
+              columns: l,
+              data: C,
+              title: e.title,
+              border: e.border,
+              isLoading: e.isLoading,
+              isError: e.isError,
+              isFetching: e.isFetching,
+              showHeader: e.showHeader,
+              showFooter: e.showFooter,
+              smallAnatomy: e.smallAnatomy,
+              enableMultiSort: e.enableMultiSort,
+              manualSorting: e.manualSorting,
+              mode: e.mode,
+              forceShowMenuActions: e.forceShowMenuActions,
+              headerOptions: n,
+              pagination: i,
+              stateMessage: s,
+              rowSelection: d,
+              rowActions: c,
+              renderSubComponent: m,
+              enableHideColumns: e.enableHideColumns,
+              searchableColumns: e.enableSearch ? ["name", "email", "role"] : void 0,
+              rightActions: b
+            }
+          ) });
+        }
+      }
+    )
+  ] });
+};
+export {
+  E as default
+};

package/documentation/ProgressbarSection-BzHZ0AfK.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),e=require("../index-DWDUS-PU.js"),o=require("lucide-react");require("react-router-dom");require("react-dom");const c=()=>{const[r,a]=i.useState(45);return s.jsxs(s.Fragment,{children:[s.jsx(e.HeroCard,{title:"Progressbar",description:`A progress bar component for displaying completion status with
+          customizable colors, sizes, and variants.`,icon:s.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:s.jsx(o.BarChart3,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),s.jsx(e.CardContainer,{className:"overflow-hidden",children:s.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:s.jsx("div",{className:"w-full p-4 sm:p-6",children:s.jsxs("div",{className:"space-y-4",children:[s.jsxs(e.CardContainer,{className:"p-4",children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Basic Progressbar"}),s.jsx(e.Progressbar,{value:r})]}),s.jsxs(e.CardContainer,{className:"p-4",children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Label"}),s.jsx(e.Progressbar,{value:r,label:`${r}%`,size:"xl"})]}),s.jsxs(e.CardContainer,{className:"p-4",children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Interactive Example"}),s.jsxs("div",{className:"space-y-2",children:[s.jsx(e.Progressbar,{value:r,label:`${r}%`,size:"xl"}),s.jsxs("div",{className:"flex gap-2",children:[s.jsx("button",{onClick:()=>a(Math.max(0,r-10)),className:"px-3 py-1 bg-light-dark rounded border border-border hover:opacity-80 transition-opacity",children:"-10"}),s.jsx("button",{onClick:()=>a(Math.min(100,r+10)),className:"px-3 py-1 bg-light-dark rounded border border-border hover:opacity-80 transition-opacity",children:"+10"})]})]})]})]})})})}),s.jsx(e.CardContainer,{className:"overflow-hidden",children:s.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:s.jsx("div",{className:"w-full p-4 sm:p-6",children:s.jsxs("div",{className:"space-y-4",children:[s.jsxs("div",{children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Colors"}),s.jsxs("div",{className:"space-y-2",children:[s.jsx(e.Progressbar,{value:60,color:"primary"}),s.jsx(e.Progressbar,{value:60,color:"success"}),s.jsx(e.Progressbar,{value:60,color:"danger"}),s.jsx(e.Progressbar,{value:60,color:"info"}),s.jsx(e.Progressbar,{value:60,color:"warning"})]})]}),s.jsxs("div",{children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Variants"}),s.jsxs("div",{className:"space-y-2",children:[s.jsx(e.Progressbar,{value:60,variant:"solid"}),s.jsx(e.Progressbar,{value:60,variant:"flat"})]})]}),s.jsxs("div",{children:[s.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),s.jsxs("div",{className:"space-y-2",children:[s.jsx(e.Progressbar,{value:60,size:"sm"}),s.jsx(e.Progressbar,{value:60,size:"DEFAULT"}),s.jsx(e.Progressbar,{value:60,size:"lg"}),s.jsx(e.Progressbar,{value:60,size:"xl"})]})]})]})})})}),s.jsx(e.PropPlayground,{componentName:"Progressbar",defaultValues:{value:65,variant:"solid",size:"DEFAULT",color:"primary",rounded:"DEFAULT"},excludeProps:["label","barClassName","labelClassName"],children:l=>s.jsx("div",{className:"w-full",children:s.jsx(e.Progressbar,{...l})})}),s.jsx(e.AutoPropsTable,{componentName:"Progressbar"}),s.jsx(e.CardContainer,{className:"overflow-hidden",children:s.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:s.jsx("div",{className:"w-full p-4 sm:p-6",children:s.jsx(e.CodeBlock,{language:"tsx",code:`import { Progressbar } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Progressbar value={45} />
+
+// With label
+<Progressbar value={45} label="45%" size="xl" />
+
+// Different colors
+<Progressbar value={60} color="primary" />
+<Progressbar value={60} color="success" />
+<Progressbar value={60} color="danger" />
+
+// Different variants
+<Progressbar value={60} variant="solid" />
+<Progressbar value={60} variant="flat" />
+
+// Different sizes
+<Progressbar value={60} size="sm" />
+<Progressbar value={60} size="lg" />
+<Progressbar value={60} size="xl" />`})})})})]})};exports.default=c;

package/documentation/ProgressbarSection-CXAiNNFG.js

@@ -0,0 +1,142 @@
+import { jsxs as r, Fragment as t, jsx as e } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { H as m, C as l, a as o, T as i, ae as a, P as h, A as u, c as v } from "../index-DoxeCFUJ.js";
+import { BarChart3 as p } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const x = () => {
+  const [s, c] = n(45);
+  return /* @__PURE__ */ r(t, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        title: "Progressbar",
+        description: `A progress bar component for displaying completion status with
+          customizable colors, sizes, and variants.`,
+        icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ r(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Basic Progressbar" }),
+        /* @__PURE__ */ e(a, { value: s })
+      ] }),
+      /* @__PURE__ */ r(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Label" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            value: s,
+            label: `${s}%`,
+            size: "xl"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Interactive Example" }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(
+            a,
+            {
+              value: s,
+              label: `${s}%`,
+              size: "xl"
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => c(Math.max(0, s - 10)),
+                className: "px-3 py-1 bg-light-dark rounded border border-border hover:opacity-80 transition-opacity",
+                children: "-10"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => c(Math.min(100, s + 10)),
+                className: "px-3 py-1 bg-light-dark rounded border border-border hover:opacity-80 transition-opacity",
+                children: "+10"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Colors" }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(a, { value: 60, color: "primary" }),
+          /* @__PURE__ */ e(a, { value: 60, color: "success" }),
+          /* @__PURE__ */ e(a, { value: 60, color: "danger" }),
+          /* @__PURE__ */ e(a, { value: 60, color: "info" }),
+          /* @__PURE__ */ e(a, { value: 60, color: "warning" })
+        ] })
+      ] }),
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Variants" }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(a, { value: 60, variant: "solid" }),
+          /* @__PURE__ */ e(a, { value: 60, variant: "flat" })
+        ] })
+      ] }),
+      /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Sizes" }),
+        /* @__PURE__ */ r("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(a, { value: 60, size: "sm" }),
+          /* @__PURE__ */ e(a, { value: 60, size: "DEFAULT" }),
+          /* @__PURE__ */ e(a, { value: 60, size: "lg" }),
+          /* @__PURE__ */ e(a, { value: 60, size: "xl" })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(
+      h,
+      {
+        componentName: "Progressbar",
+        defaultValues: {
+          value: 65,
+          variant: "solid",
+          size: "DEFAULT",
+          color: "primary",
+          rounded: "DEFAULT"
+        },
+        excludeProps: ["label", "barClassName", "labelClassName"],
+        children: (d) => /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(a, { ...d }) })
+      }
+    ),
+    /* @__PURE__ */ e(u, { componentName: "Progressbar" }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      v,
+      {
+        language: "tsx",
+        code: `import { Progressbar } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Progressbar value={45} />
+
+// With label
+<Progressbar value={45} label="45%" size="xl" />
+
+// Different colors
+<Progressbar value={60} color="primary" />
+<Progressbar value={60} color="success" />
+<Progressbar value={60} color="danger" />
+
+// Different variants
+<Progressbar value={60} variant="solid" />
+<Progressbar value={60} variant="flat" />
+
+// Different sizes
+<Progressbar value={60} size="sm" />
+<Progressbar value={60} size="lg" />
+<Progressbar value={60} size="xl" />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  x as default
+};