@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/documentation/PieChartSection-Oe6rJh93.js

@@ -1,19 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=[{name:"Chrome",value:62},{name:"Safari",value:19},{name:"Firefox",value:10},{name:"Edge",value:6},{name:"Other",value:3}],r=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"PieChart"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Pie and donut chart component for displaying proportions and distributions with labels and inner content support."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Pie Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.PieChart,{data:t,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Donut Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.PieChart,{data:t,donut:!0,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Donut with Inner Content",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.PieChart,{data:t,donut:!0,height:300,innerContent:e.jsxs("div",{className:"text-center",children:[e.jsx("p",{className:"text-2xl font-bold",children:"100%"}),e.jsx("p",{className:"text-sm text-gray-500",children:"Total"})]})})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Without Labels",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.PieChart,{data:t,showLabels:!1,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{code:`import { PieChart } from '@e-burgos/tucu-ui';
-
-const data = [
-  { name: 'Chrome', value: 62 },
-  { name: 'Safari', value: 19 },
-  { name: 'Firefox', value: 10 },
-  { name: 'Edge', value: 6 },
-  { name: 'Other', value: 3 },
-];
-
-<PieChart
-  data={data}
-  height={300}
-  donut
-  showLabels
-  showTooltip
-  showLegend
-  innerContent={<p>Center</p>}
-/>`,language:"tsx"})})})}),e.jsx(a.PropPlayground,{componentName:"PieChart",defaultValues:{height:300,donut:!1,showLabels:!0,showTooltip:!0,showLegend:!0,animate:!0},excludeProps:["data","colors","className","innerContent","emptyMessage"],children:s=>e.jsx(a.PieChart,{data:t,...s})}),e.jsx(a.AutoPropsTable,{componentName:"PieChart"})]});exports.default=r;

package/documentation/PinCodeSection-CDtuT8Kw.js

@@ -1,235 +0,0 @@
-import { jsxs as l, Fragment as C, jsx as e } from "react/jsx-runtime";
-import { useState as t } from "react";
-import { H as N, C as a, a as s, T as n, r as i, P as b, A as v, c as f } from "../index-DoxeCFUJ.js";
-import { Hash as P } from "lucide-react";
-import "react-router-dom";
-import "react-dom";
-const V = () => {
-  const [o, c] = t(""), [m, h] = t(""), g = [
-    { label: "Primary", color: "primary" },
-    { label: "Secondary", color: "secondary" },
-    { label: "Danger", color: "danger" },
-    { label: "Info", color: "info" },
-    { label: "Success", color: "success" },
-    { label: "Warning", color: "warning" }
-  ], p = [
-    { label: "Small", size: "sm" },
-    { label: "Medium", size: "md" },
-    { label: "Large", size: "lg" }
-  ], u = [
-    { label: "Square", rounded: "none" },
-    { label: "Soft", rounded: "sm" },
-    { label: "Default", rounded: "md" },
-    { label: "Large", rounded: "lg" },
-    { label: "Pill", rounded: "full" }
-  ];
-  return /* @__PURE__ */ l(C, { children: [
-    /* @__PURE__ */ e(
-      N,
-      {
-        title: "PinCode",
-        description: "A pin code input component for entering numeric codes digit by digit.",
-        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-amber-500 via-orange-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-amber-500/50", children: /* @__PURE__ */ e(P, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-      }
-    ),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "4 Digit PinCode" }),
-        /* @__PURE__ */ l("div", { children: [
-          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Pin Code" }),
-          /* @__PURE__ */ e(
-            i,
-            {
-              length: 4,
-              value: o,
-              onChange: c
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "6 Digit PinCode" }),
-        /* @__PURE__ */ l("div", { children: [
-          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Verification Code" }),
-          /* @__PURE__ */ e(
-            i,
-            {
-              length: 6,
-              value: o,
-              onChange: c
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
-        /* @__PURE__ */ l("div", { children: [
-          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Security Code" }),
-          /* @__PURE__ */ e(
-            i,
-            {
-              length: 4,
-              helperText: "Enter the 4-digit code",
-              value: o,
-              onChange: c
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "With Error" }),
-        /* @__PURE__ */ l("div", { children: [
-          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Pin Code" }),
-          /* @__PURE__ */ e(
-            i,
-            {
-              length: 4,
-              error: "Invalid pin code",
-              value: o,
-              onChange: c
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Disabled" }),
-        /* @__PURE__ */ l("div", { children: [
-          /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Pin Code" }),
-          /* @__PURE__ */ e(i, { length: 4, disabled: !0 })
-        ] })
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Ghost (default)" }),
-        /* @__PURE__ */ e(i, { length: 4, variant: "ghost" })
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Solid" }),
-        /* @__PURE__ */ e(i, { length: 4, variant: "solid" })
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2", children: "Transparent" }),
-        /* @__PURE__ */ e(i, { length: 4, variant: "transparent" })
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: g.map(({ label: r, color: d }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
-      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2 text-sm", children: r }),
-      /* @__PURE__ */ e(i, { length: 4, color: d })
-    ] }, d)) }) }) }) }),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: p.map(({ label: r, size: d }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
-      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2 text-sm", children: r }),
-      /* @__PURE__ */ e(i, { length: 4, size: d })
-    ] }, d)) }) }) }) }),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Shapes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: u.map(({ label: r, rounded: d }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
-      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-2 text-sm", children: r }),
-      /* @__PURE__ */ e(i, { length: 4, rounded: d })
-    ] }, d)) }) }) }) }),
-    /* @__PURE__ */ e(
-      b,
-      {
-        componentName: "PinCode",
-        defaultValues: {
-          length: 4,
-          type: "text",
-          placeholder: "-",
-          mask: !1,
-          center: !0,
-          size: "md",
-          rounded: "md",
-          variant: "ghost",
-          color: "primary",
-          helperText: "",
-          error: "",
-          fullWidth: !1,
-          disabled: !1
-        },
-        controlOverrides: [
-          {
-            name: "placeholder",
-            type: "text",
-            description: "Character placeholder rendered in each box"
-          },
-          {
-            name: "disabled",
-            type: "boolean",
-            description: "Disables the pin input and prevents interaction"
-          }
-        ],
-        includeProps: [
-          "length",
-          "type",
-          "placeholder",
-          "mask",
-          "center",
-          "size",
-          "rounded",
-          "variant",
-          "color",
-          "helperText",
-          "error",
-          "fullWidth",
-          "disabled"
-        ],
-        excludeProps: [
-          "value",
-          "onChange",
-          "inputClassName",
-          "errorClassName",
-          "helperTextClassName",
-          "className"
-        ],
-        children: (r) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg flex justify-center", children: /* @__PURE__ */ e(
-          i,
-          {
-            ...r,
-            value: m,
-            onChange: h
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ e(v, { componentName: "PinCode" }),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      f,
-      {
-        language: "tsx",
-        code: `import { PinCode } from '@e-burgos/tucu-ui';
-
-<PinCode
-  length={4}
-  value={value}
-  onChange={setValue}
-/>
-
-// Variants
-<PinCode length={4} variant="ghost" />
-<PinCode length={4} variant="solid" />
-<PinCode length={4} variant="transparent" />
-
-// Colors
-<PinCode length={4} color="primary" />
-<PinCode length={4} color="secondary" />
-<PinCode length={4} color="danger" />
-<PinCode length={4} color="info" />
-<PinCode length={4} color="success" />
-<PinCode length={4} color="warning" />
-
-// Sizes
-<PinCode length={4} size="sm" />
-<PinCode length={4} size="md" />
-<PinCode length={4} size="lg" />
-
-// Shapes
-<PinCode length={4} rounded="none" />
-<PinCode length={4} rounded="sm" />
-<PinCode length={4} rounded="md" />
-<PinCode length={4} rounded="lg" />
-<PinCode length={4} rounded="full" />`
-      }
-    ) }) }) })
-  ] });
-};
-export {
-  V as default
-};

package/documentation/PinCodeSection-CnM3hDz5.js

@@ -1,32 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),a=require("../index-DWDUS-PU.js"),m=require("lucide-react");require("react-router-dom");require("react-dom");const g=()=>{const[n,r]=i.useState(""),[d,o]=i.useState(""),t=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],c=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"}],h=[{label:"Square",rounded:"none"},{label:"Soft",rounded:"sm"},{label:"Default",rounded:"md"},{label:"Large",rounded:"lg"},{label:"Pill",rounded:"full"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"PinCode",description:"A pin code input component for entering numeric codes digit by digit.",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-amber-500 via-orange-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-amber-500/50",children:e.jsx(m.Hash,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"4 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(a.PinCode,{length:4,value:n,onChange:r})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"6 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Verification Code"}),e.jsx(a.PinCode,{length:6,value:n,onChange:r})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Security Code"}),e.jsx(a.PinCode,{length:4,helperText:"Enter the 4-digit code",value:n,onChange:r})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(a.PinCode,{length:4,error:"Invalid pin code",value:n,onChange:r})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(a.PinCode,{length:4,disabled:!0})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Ghost (default)"}),e.jsx(a.PinCode,{length:4,variant:"ghost"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Solid"}),e.jsx(a.PinCode,{length:4,variant:"solid"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2",children:"Transparent"}),e.jsx(a.PinCode,{length:4,variant:"transparent"})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:t.map(({label:s,color:l})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2 text-sm",children:s}),e.jsx(a.PinCode,{length:4,color:l})]},l))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-3",children:c.map(({label:s,size:l})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2 text-sm",children:s}),e.jsx(a.PinCode,{length:4,size:l})]},l))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Shapes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:h.map(({label:s,rounded:l})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-2 text-sm",children:s}),e.jsx(a.PinCode,{length:4,rounded:l})]},l))})})})}),e.jsx(a.PropPlayground,{componentName:"PinCode",defaultValues:{length:4,type:"text",placeholder:"-",mask:!1,center:!0,size:"md",rounded:"md",variant:"ghost",color:"primary",helperText:"",error:"",fullWidth:!1,disabled:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Character placeholder rendered in each box"},{name:"disabled",type:"boolean",description:"Disables the pin input and prevents interaction"}],includeProps:["length","type","placeholder","mask","center","size","rounded","variant","color","helperText","error","fullWidth","disabled"],excludeProps:["value","onChange","inputClassName","errorClassName","helperTextClassName","className"],children:s=>e.jsx("div",{className:"w-full max-w-lg flex justify-center",children:e.jsx(a.PinCode,{...s,value:d,onChange:o})})}),e.jsx(a.AutoPropsTable,{componentName:"PinCode"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { PinCode } from '@e-burgos/tucu-ui';
-
-<PinCode
-  length={4}
-  value={value}
-  onChange={setValue}
-/>
-
-// Variants
-<PinCode length={4} variant="ghost" />
-<PinCode length={4} variant="solid" />
-<PinCode length={4} variant="transparent" />
-
-// Colors
-<PinCode length={4} color="primary" />
-<PinCode length={4} color="secondary" />
-<PinCode length={4} color="danger" />
-<PinCode length={4} color="info" />
-<PinCode length={4} color="success" />
-<PinCode length={4} color="warning" />
-
-// Sizes
-<PinCode length={4} size="sm" />
-<PinCode length={4} size="md" />
-<PinCode length={4} size="lg" />
-
-// Shapes
-<PinCode length={4} rounded="none" />
-<PinCode length={4} rounded="sm" />
-<PinCode length={4} rounded="md" />
-<PinCode length={4} rounded="lg" />
-<PinCode length={4} rounded="full" />`})})})})]})};exports.default=g;

package/documentation/PlaygroundSection-BDwyp4DF.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.js"),h=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const g=[{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"}],y=()=>{const l=[{id:"name",accessorKey:"name",header:"Name",footer:"Name",cell:e=>o.jsx("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(),i=n==="Active"?"success":n==="Inactive"?"danger":"warning";return o.jsx(t.Badge,{variant:"soft",color:i,children:n})}}],s=({row:e})=>{if(!e)return null;const n=e.original;return o.jsxs("div",{className:"p-4 bg-gray-50/50 dark:bg-gray-900/30 rounded-lg border border-border/60 space-y-2",children:[o.jsx(t.Typography,{tag:"h6",className:"text-brand font-bold mb-2",children:"Detailed Record Information"}),o.jsxs("div",{className:"grid grid-cols-2 gap-4 text-sm",children:[o.jsxs("div",{children:[o.jsx("span",{className:"font-semibold text-gray-500",children:"Record ID:"})," ",n.id]}),o.jsxs("div",{children:[o.jsx("span",{className:"font-semibold text-gray-500",children:"Joined Date:"})," ",n.joinedDate]}),o.jsxs("div",{children:[o.jsx("span",{className:"font-semibold text-gray-500",children:"Full Name:"})," ",n.name]}),o.jsxs("div",{children:[o.jsx("span",{className:"font-semibold text-gray-500",children:"Email Address:"})," ",n.email]})]})]})};return o.jsxs("div",{className:"flex flex-col gap-8",children:[o.jsx(t.HeroCard,{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:o.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:o.jsx(h.Wand2,{className:"w-8 h-8 sm:w-10 sm:h-10 text-white"})})}),o.jsx(t.PropPlayground,{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},r={noData:e.noDataMessage},d=e.rowSelectionType!=="none"?{type:e.rowSelectionType,getSelection:a=>{console.log("Playground Selection:",a.map(b=>b.original.id))}}:void 0,c=e.enableRowActions?[{action:"edit",label:()=>"Edit User",onClick:a=>alert(`Playground Edit: ${a.original.name}`)},{action:"delete",label:()=>"Delete User",onClick:a=>alert(`Playground Delete: ${a.original.name}`)}]:void 0,m=e.enableSubComponent?s:null,u=e.enableRightActions?o.jsx(t.ListContainer,{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 o.jsx("div",{className:"w-full",children:o.jsx(t.DataTable,{tableId:"playground-datatable-demo",columns:l,data:g,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:r,rowSelection:d,rowActions:c,renderSubComponent:m,enableHideColumns:e.enableHideColumns,searchableColumns:e.enableSearch?["name","email","role"]:void 0,rightActions:u})})}})]})};exports.default=y;