@e-burgos/tucu-ui 2.6.0 → 2.7.1

package/documentation/DocumentationSection-CWJn_wOD.js

@@ -1,66 +0,0 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { H as s, C as i, a as r, T as t, A as n } from "../index-DoxeCFUJ.js";
-import { BookOpen as l, FolderHeart as o, MoveHorizontal as c, Pin as d, FileSpreadsheet as m } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const x = () => /* @__PURE__ */ a("div", { className: "flex flex-col gap-8", children: [
-  /* @__PURE__ */ e(
-    s,
-    {
-      title: "DataTable Documentation",
-      description: "A comprehensive reference guide for DataTable components in tucu-ui. Learn how to configure sorting, pagination, pinning, state persistence, and customized row details.",
-      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(l, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
-    }
-  ),
-  /* @__PURE__ */ e(i, { children: /* @__PURE__ */ a(r, { title: "Introduction", children: [
-    /* @__PURE__ */ a(t, { className: "text-sm text-foreground/70 mb-4", children: [
-      "The ",
-      /* @__PURE__ */ e("code", { children: "DataTable" }),
-      " component is a powerful, highly-configurable table wrapper built on top of ",
-      /* @__PURE__ */ e("strong", { children: "@tanstack/react-table" }),
-      ". It incorporates advanced UI features tailored for dashboard structures while maintaining lightweight bundle profiles."
-    ] }),
-    /* @__PURE__ */ e(t, { className: "text-sm text-foreground/70", children: "It natively handles column adjustments (resizing, ordering), row selections (single/multi), custom cell rendering, background fetching states, manual (server-side) or client-side pagination, and automatic persistence of the table configuration inside local storage via Zustand." })
-  ] }) }),
-  /* @__PURE__ */ a("section", { className: "space-y-6", children: [
-    /* @__PURE__ */ a("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Key Features" }),
-      /* @__PURE__ */ e(t, { tag: "p", className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto", children: "Packed with enterprise-grade capabilities out-of-the-box" })
-    ] }),
-    /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-      /* @__PURE__ */ e(i, { className: "p-5", children: /* @__PURE__ */ a("div", { className: "flex gap-4 items-start", children: [
-        /* @__PURE__ */ e("div", { className: "p-2.5 bg-indigo-500/10 rounded-lg text-indigo-500", children: /* @__PURE__ */ e(o, { className: "w-6 h-6" }) }),
-        /* @__PURE__ */ a("div", { children: [
-          /* @__PURE__ */ e(t, { tag: "h5", className: "font-semibold mb-1", children: "State Persistence" }),
-          /* @__PURE__ */ e(t, { className: "text-xs text-foreground/60", children: "Zustand state integration automatically remembers pagination size, sorting parameters, column visibility configurations, pinning states, and column order parameters." })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ e(i, { className: "p-5", children: /* @__PURE__ */ a("div", { className: "flex gap-4 items-start", children: [
-        /* @__PURE__ */ e("div", { className: "p-2.5 bg-purple-500/10 rounded-lg text-purple-500", children: /* @__PURE__ */ e(c, { className: "w-6 h-6" }) }),
-        /* @__PURE__ */ a("div", { children: [
-          /* @__PURE__ */ e(t, { tag: "h5", className: "font-semibold mb-1", children: "Column Resizing & Reordering" }),
-          /* @__PURE__ */ e(t, { className: "text-xs text-foreground/60", children: "Allow users to drag column boundaries to adjust their size, or drag headers laterally to re-order the columns." })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ e(i, { className: "p-5", children: /* @__PURE__ */ a("div", { className: "flex gap-4 items-start", children: [
-        /* @__PURE__ */ e("div", { className: "p-2.5 bg-pink-500/10 rounded-lg text-pink-500", children: /* @__PURE__ */ e(d, { className: "w-6 h-6" }) }),
-        /* @__PURE__ */ a("div", { children: [
-          /* @__PURE__ */ e(t, { tag: "h5", className: "font-semibold mb-1", children: "Column Pinning" }),
-          /* @__PURE__ */ e(t, { className: "text-xs text-foreground/60", children: "Pin critical columns (such as identifier or status) permanently to the left or right boundaries while scrolling horizontally." })
-        ] })
-      ] }) }),
-      /* @__PURE__ */ e(i, { className: "p-5", children: /* @__PURE__ */ a("div", { className: "flex gap-4 items-start", children: [
-        /* @__PURE__ */ e("div", { className: "p-2.5 bg-blue-500/10 rounded-lg text-blue-500", children: /* @__PURE__ */ e(m, { className: "w-6 h-6" }) }),
-        /* @__PURE__ */ a("div", { children: [
-          /* @__PURE__ */ e(t, { tag: "h5", className: "font-semibold mb-1", children: "Sub-component Expanding" }),
-          /* @__PURE__ */ e(t, { className: "text-xs text-foreground/60", children: "Drill down on details for any record by expanding rows to show sub-panels, charts, or nested tables in place." })
-        ] })
-      ] }) })
-    ] })
-  ] }),
-  /* @__PURE__ */ e(n, { componentName: "DataTable", showFilePath: !0 })
-] });
-export {
-  x as default
-};

package/documentation/DrawerSection-Cl0RmlNx.js

@@ -1,155 +0,0 @@
-import { jsxs as r, Fragment as w, jsx as e } from "react/jsx-runtime";
-import { useState as a } from "react";
-import { H as u, C as s, a as p, T as i, x as c, a5 as o, P as f, A as g, c as O } from "../index-DoxeCFUJ.js";
-import { PanelRightOpen as b } from "lucide-react";
-import "react-router-dom";
-import "react-dom";
-const x = () => {
-  const [n, t] = a(!1), [m, l] = a(!1), [, d] = a("sidebar");
-  return /* @__PURE__ */ r(w, { children: [
-    /* @__PURE__ */ e(
-      u,
-      {
-        title: "Drawer",
-        description: `A drawer component that slides in from the side, supporting both
-          simple sidebar and sidebar-menu 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-amber-600 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { 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(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(p, { 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(s, { className: "p-4", children: [
-        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Left Position" }),
-        /* @__PURE__ */ e(
-          c,
-          {
-            onClick: () => {
-              d("sidebar"), t(!0);
-            },
-            children: "Open Left Drawer"
-          }
-        ),
-        /* @__PURE__ */ e(
-          o,
-          {
-            isOpen: n,
-            setIsOpen: t,
-            type: "sidebar",
-            title: "Sidebar Title",
-            position: "left",
-            children: /* @__PURE__ */ e(i, { tag: "p", children: "Sidebar content goes here" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ r(s, { className: "p-4", children: [
-        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Right Position" }),
-        /* @__PURE__ */ e(
-          c,
-          {
-            onClick: () => {
-              d("sidebar"), l(!0);
-            },
-            children: "Open Right Drawer"
-          }
-        ),
-        /* @__PURE__ */ e(
-          o,
-          {
-            isOpen: m,
-            setIsOpen: l,
-            type: "sidebar",
-            position: "right",
-            title: "Right Drawer",
-            children: /* @__PURE__ */ e(i, { tag: "p", children: "Content on the right" })
-          }
-        )
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(
-      f,
-      {
-        componentName: "Drawer",
-        defaultValues: {
-          isOpen: n,
-          setIsOpen: t,
-          position: "left",
-          backdrop: !0
-        },
-        excludeProps: [
-          "setIsOpen",
-          "onClose",
-          "actionContent",
-          "logo",
-          "menuItems",
-          "type"
-        ],
-        children: (h) => /* @__PURE__ */ e(
-          "div",
-          {
-            style: { position: "relative", height: 300, overflow: "hidden" },
-            children: /* @__PURE__ */ e(
-              o,
-              {
-                ...h,
-                setIsOpen: t,
-                isOpen: n,
-                title: "Drawer Preview",
-                children: /* @__PURE__ */ e("p", { className: "text-sm p-4", children: "Drawer content" })
-              }
-            )
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e(g, { componentName: "Drawer" }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(p, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      O,
-      {
-        language: "tsx",
-        code: `import { Drawer, Button } from '@e-burgos/tucu-ui';
-import { useState } from 'react';
-
-function MyComponent() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
-      <Drawer
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        type="sidebar"
-        title="Drawer Title"
-      >
-        <div>Drawer content</div>
-      </Drawer>
-    </>
-  );
-}
-
-// Right position
-<Drawer
-  isOpen={isOpen}
-  setIsOpen={setIsOpen}
-  type="sidebar"
-  position="right"
-  title="Right Drawer"
->
-  <div>Content</div>
-</Drawer>
-
-// Without backdrop
-<Drawer
-  isOpen={isOpen}
-  setIsOpen={setIsOpen}
-  type="sidebar"
-  backdrop={false}
->
-  <div>Content</div>
-</Drawer>`
-      }
-    ) }) }) })
-  ] });
-};
-export {
-  x as default
-};

package/documentation/DrawerSection-DHBZDxRV.js

@@ -1,42 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),t=require("../index-DWDUS-PU.js"),d=require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[r,s]=i.useState(!1),[o,n]=i.useState(!1),[,a]=i.useState("sidebar");return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Drawer",description:`A drawer component that slides in from the side, supporting both
-          simple sidebar and sidebar-menu variants.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-amber-600 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(d.PanelRightOpen,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Left Position"}),e.jsx(t.Button,{onClick:()=>{a("sidebar"),s(!0)},children:"Open Left Drawer"}),e.jsx(t.Drawer,{isOpen:r,setIsOpen:s,type:"sidebar",title:"Sidebar Title",position:"left",children:e.jsx(t.Typography,{tag:"p",children:"Sidebar content goes here"})})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Right Position"}),e.jsx(t.Button,{onClick:()=>{a("sidebar"),n(!0)},children:"Open Right Drawer"}),e.jsx(t.Drawer,{isOpen:o,setIsOpen:n,type:"sidebar",position:"right",title:"Right Drawer",children:e.jsx(t.Typography,{tag:"p",children:"Content on the right"})})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"Drawer",defaultValues:{isOpen:r,setIsOpen:s,position:"left",backdrop:!0},excludeProps:["setIsOpen","onClose","actionContent","logo","menuItems","type"],children:l=>e.jsx("div",{style:{position:"relative",height:300,overflow:"hidden"},children:e.jsx(t.Drawer,{...l,setIsOpen:s,isOpen:r,title:"Drawer Preview",children:e.jsx("p",{className:"text-sm p-4",children:"Drawer content"})})})}),e.jsx(t.AutoPropsTable,{componentName:"Drawer"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { Drawer, Button } from '@e-burgos/tucu-ui';
-import { useState } from 'react';
-
-function MyComponent() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
-      <Drawer
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        type="sidebar"
-        title="Drawer Title"
-      >
-        <div>Drawer content</div>
-      </Drawer>
-    </>
-  );
-}
-
-// Right position
-<Drawer
-  isOpen={isOpen}
-  setIsOpen={setIsOpen}
-  type="sidebar"
-  position="right"
-  title="Right Drawer"
->
-  <div>Content</div>
-</Drawer>
-
-// Without backdrop
-<Drawer
-  isOpen={isOpen}
-  setIsOpen={setIsOpen}
-  type="sidebar"
-  backdrop={false}
->
-  <div>Content</div>
-</Drawer>`})})})})]})};exports.default=p;

package/documentation/DynamicRoutesSection-Der_Tsz0.js

@@ -1,112 +0,0 @@
-import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { H as n, T as a, C as r, a as i, c as m, ax as c } from "../index-DoxeCFUJ.js";
-import { Shuffle as l, Shield as d, Flag as u, Database as p } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const C = () => /* @__PURE__ */ t(o, { children: [
-  /* @__PURE__ */ e(
-    n,
-    {
-      title: "Dynamic Routes",
-      description: "Create conditional routing based on user permissions, feature flags, or application state using useMemo patterns.",
-      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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ t("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Dynamic Route Generation" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Use useMemo to generate menuItems dynamically based on runtime conditions"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(i, { title: "Dynamic Menu Hook", children: /* @__PURE__ */ e(m, { language: "tsx", code: `import { useMemo } from 'react';
-import { StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';
-
-export const useMenuItems = () => {
-  const { userRole, featureFlags } = useAppState();
-
-  const menuItems: StandaloneAppRoutesMenuItem[] = useMemo(() => [
-    // Static routes
-    {
-      name: 'Home',
-      path: '/',
-      icon: <LucideIcons.Home />,
-      component: <HomePage />,
-    },
-
-    // Dynamic routes based on user permissions
-    ...(userRole === 'admin' ? [{
-      name: 'Admin',
-      path: '/admin',
-      icon: <LucideIcons.Shield />,
-      component: <AdminPage />,
-      enableNestedRoutes: true,
-      dropdownItems: [
-        {
-          name: 'Users',
-          path: '/admin/users',
-          component: <UsersPage />,
-        },
-        {
-          name: 'Settings',
-          path: '/admin/settings',
-          component: <AdminSettingsPage />,
-        },
-      ],
-    }] : []),
-
-    // Feature-flagged routes
-    ...(featureFlags.newFeature ? [{
-      name: 'New Feature',
-      path: '/new-feature',
-      icon: <LucideIcons.Sparkles />,
-      component: <NewFeaturePage />,
-    }] : []),
-  ], [userRole, featureFlags]);
-
-  return { menuItems };
-};` }) }) })
-  ] }),
-  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ t("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Use Cases" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Common patterns for conditional route rendering"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6", children: [
-      {
-        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
-        title: "Role-Based Access",
-        description: "Show/hide routes based on user permissions and roles.",
-        iconBgClassName: "from-red-500 to-rose-500"
-      },
-      {
-        icon: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
-        title: "Feature Flags",
-        description: "Enable routes conditionally based on feature toggles.",
-        iconBgClassName: "from-blue-500 to-cyan-500"
-      },
-      {
-        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
-        title: "State-Driven",
-        description: "Routes that dynamically change based on application state.",
-        iconBgClassName: "from-green-500 to-emerald-500"
-      }
-    ].map((s) => /* @__PURE__ */ e(c, { layout: "vertical", ...s }, s.title)) })
-  ] })
-] });
-export {
-  C as default
-};

package/documentation/DynamicRoutesSection-NQ3SszLU.js

@@ -1,47 +0,0 @@
-"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 r=()=>{const o=`import { useMemo } from 'react';
-import { StandaloneAppRoutesMenuItem } from '@e-burgos/tucu-ui';
-
-export const useMenuItems = () => {
-  const { userRole, featureFlags } = useAppState();
-
-  const menuItems: StandaloneAppRoutesMenuItem[] = useMemo(() => [
-    // Static routes
-    {
-      name: 'Home',
-      path: '/',
-      icon: <LucideIcons.Home />,
-      component: <HomePage />,
-    },
-
-    // Dynamic routes based on user permissions
-    ...(userRole === 'admin' ? [{
-      name: 'Admin',
-      path: '/admin',
-      icon: <LucideIcons.Shield />,
-      component: <AdminPage />,
-      enableNestedRoutes: true,
-      dropdownItems: [
-        {
-          name: 'Users',
-          path: '/admin/users',
-          component: <UsersPage />,
-        },
-        {
-          name: 'Settings',
-          path: '/admin/settings',
-          component: <AdminSettingsPage />,
-        },
-      ],
-    }] : []),
-
-    // Feature-flagged routes
-    ...(featureFlags.newFeature ? [{
-      name: 'New Feature',
-      path: '/new-feature',
-      icon: <LucideIcons.Sparkles />,
-      component: <NewFeaturePage />,
-    }] : []),
-  ], [userRole, featureFlags]);
-
-  return { menuItems };
-};`,n=[{icon:e.jsx(t.Shield,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Role-Based Access",description:"Show/hide routes based on user permissions and roles.",iconBgClassName:"from-red-500 to-rose-500"},{icon:e.jsx(t.Flag,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Feature Flags",description:"Enable routes conditionally based on feature toggles.",iconBgClassName:"from-blue-500 to-cyan-500"},{icon:e.jsx(t.Database,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"State-Driven",description:"Routes that dynamically change based on application state.",iconBgClassName:"from-green-500 to-emerald-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Dynamic Routes",description:"Create conditional routing based on user permissions, feature flags, or application state using useMemo patterns.",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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Shuffle,{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("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Dynamic Route Generation"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Use useMemo to generate menuItems dynamically based on runtime conditions"})]}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Dynamic Menu Hook",children:e.jsx(s.CodeBlock,{language:"tsx",code:o})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Use Cases"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Common patterns for conditional route rendering"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6",children:n.map(a=>e.jsx(s.FeatureCard,{layout:"vertical",...a},a.title))})]})]})};exports.default=r;

package/documentation/ExamplesSection-BFn_F-uM.js

@@ -1,54 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),a=require("../index-DWDUS-PU.js"),m=require("lucide-react");require("react-router-dom");require("react-dom");const n=[{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"}],u=()=>{const[r,o]=d.useState("None"),i=[{id:"name",accessorKey:"name",header:"Name",cell:t=>e.jsx("span",{className:"font-semibold",children:String(t.getValue())})},{id:"email",accessorKey:"email",header:"Email"},{id:"role",accessorKey:"role",header:"Role"},{id:"status",accessorKey:"status",header:"Status",cell:t=>{const s=t.getValue(),l=s==="Active"?"success":s==="Inactive"?"danger":"warning";return e.jsx(a.Badge,{variant:"soft",color:l,children:s})}}],c=({row:t})=>{if(!t)return null;const s=t.original;return e.jsxs("div",{className:"p-4 bg-gray-50/50 dark:bg-gray-900/30 rounded-lg border border-border/60 space-y-2",children:[e.jsx(a.Typography,{tag:"h6",className:"text-brand font-bold",children:"Detailed Record Information"}),e.jsxs("div",{className:"grid grid-cols-2 gap-4 text-sm",children:[e.jsxs("div",{children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"Record ID:"})," ",s.id]}),e.jsxs("div",{children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"Joined Date:"})," ",s.joinedDate]}),e.jsxs("div",{children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"Full Name:"})," ",s.name]}),e.jsxs("div",{children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"Email Address:"})," ",s.email]})]})]})};return e.jsxs("div",{className:"flex flex-col gap-8",children:[e.jsx(a.HeroCard,{title:"DataTable Examples",description:"Explore different ways to configure the DataTable: basic layouts, checkbox selections, row action handlers, and expandable row details.",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(m.TableProperties,{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:"Basic Example",className:"mb-4",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:"A simple table displaying records with columns mapping key values and supporting standard column header sorting out-of-the-box."}),e.jsx(a.DataTable,{tableId:"basic-demo-table",columns:i,data:n,title:"User Directory",pagination:{showPagination:!0,pageSize:5}})]})}),e.jsx(a.CardContainer,{className:"p-6",children:e.jsxs(a.CardTitle,{title:"Row Selection and Actions",className:"mb-4",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:"DataTable supports checkbox row selection and custom row-level context actions (like Edit/Delete) with full access to the selected record data."}),e.jsxs("div",{className:"mb-4 p-3 bg-gray-50 dark:bg-gray-800/40 rounded-lg text-sm",children:[e.jsx("span",{className:"font-semibold",children:"Selected Row IDs:"})," ",r]}),e.jsx(a.DataTable,{tableId:"selection-demo-table",columns:i,data:n,rowSelection:{type:"checkbox",getSelection:t=>{const s=t.map(l=>l.original.id).join(", ");o(s||"None")}},rowActions:[{action:"edit",label:()=>"Edit User",onClick:t=>alert(`Edit row: ${t.original.name}`)},{action:"delete",label:()=>"Delete User",onClick:t=>alert(`Delete row: ${t.original.name}`)}]})]})}),e.jsx(a.CardContainer,{className:"p-6",children:e.jsxs(a.CardTitle,{title:"Expandable Sub-components",className:"mb-4",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:"Provide additional detail panels for individual rows using the `renderSubComponent` prop. This allows drilling down on specific records without navigating away."}),e.jsx(a.DataTable,{tableId:"expandable-demo-table",columns:i,data:n,renderSubComponent:c})]})}),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, TanstackTable } from '@e-burgos/tucu-ui';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  status: 'Active' | 'Inactive';
-}
-
-const columns: TanstackTable.ColumnDef<User, any>[] = [
-  {
-    id: 'name',
-    accessorKey: 'name',
-    header: 'Name',
-  },
-  {
-    id: 'email',
-    accessorKey: 'email',
-    header: 'Email',
-  },
-  {
-    id: 'status',
-    accessorKey: 'status',
-    header: 'Status',
-    cell: (info) => (
-      <Badge color={info.getValue() === 'Active' ? 'success' : 'danger'}>
-        {info.getValue() as string}
-      </Badge>
-    ),
-  },
-];
-
-const data: User[] = [
-  { id: '1', name: 'Esteban Burgos', email: 'esteban@tucu-ui.dev', status: 'Active' },
-];
-
-export default function MyTable() {
-  return (
-    <DataTable
-      tableId="users-table-key"
-      columns={columns}
-      data={data}
-      title="Users List"
-      pagination={{
-        showPagination: true,
-        pageSize: 10,
-      }}
-      rowSelection={{
-        type: 'checkbox',
-        getSelection: (selectedRows) => console.log(selectedRows),
-      }}
-    />
-  );
-}`})})})]})};exports.default=u;