@e-burgos/tucu-ui 2.6.0 → 2.7.1

package/documentation/ScrollToTopSection-CtOc-TS2.js

@@ -1,141 +0,0 @@
-import { jsxs as t, Fragment as s, jsx as o } from "react/jsx-runtime";
-import { H as c, C as l, a as r, T as e, P as i, av as n, A as d, c as h } from "../index-DoxeCFUJ.js";
-import { ArrowUp as m } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const w = () => /* @__PURE__ */ t(s, { children: [
-  /* @__PURE__ */ o(
-    c,
-    {
-      title: "ScrollToTop",
-      description: `A utility component that displays a floating button to scroll back to
-          the top of the page. It automatically scrolls to top when the route
-          changes and shows a button when the user scrolls down.`,
-      icon: /* @__PURE__ */ o("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-blue-500 to-sky-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ o(m, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ o(l, { className: "overflow-hidden", children: /* @__PURE__ */ o(r, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ o("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ t(l, { className: "p-4", children: [
-      /* @__PURE__ */ o(e, { tag: "h5", className: "mb-3", children: "Default Usage" }),
-      /* @__PURE__ */ o(e, { tag: "p", className: "mb-4", children: "Add this component to your router or app component. By default, it displays a button in the bottom-right corner (24px from edges) that appears when you scroll down more than 400px." }),
-      /* @__PURE__ */ o(
-        e,
-        {
-          tag: "p",
-          className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
-          children: "The button automatically scrolls to the top when clicked and also scrolls to top whenever the route changes."
-        }
-      ),
-      /* @__PURE__ */ o("div", { className: "bg-gray-100 dark:bg-gray-800 p-4 rounded-lg", children: /* @__PURE__ */ o(e, { tag: "p", className: "text-sm", children: "Scroll down on this page to see the button appear in the bottom-right corner." }) })
-    ] }),
-    /* @__PURE__ */ t(l, { className: "p-4", children: [
-      /* @__PURE__ */ o(e, { tag: "h5", className: "mb-3", children: "Custom Position" }),
-      /* @__PURE__ */ o(e, { tag: "p", className: "mb-4", children: "You can customize the button position using the position props." }),
-      /* @__PURE__ */ t("div", { className: "space-y-2 text-sm", children: [
-        /* @__PURE__ */ t(e, { tag: "p", children: [
-          /* @__PURE__ */ o("code", { className: "text-brand", children: "top-left:" }),
-          " ",
-          /* @__PURE__ */ o("code", { children: "<ScrollToTop top={20} left={20} />" })
-        ] }),
-        /* @__PURE__ */ t(e, { tag: "p", children: [
-          /* @__PURE__ */ o("code", { className: "text-brand", children: "top-right:" }),
-          " ",
-          /* @__PURE__ */ o("code", { children: "<ScrollToTop top={20} right={20} />" })
-        ] }),
-        /* @__PURE__ */ t(e, { tag: "p", children: [
-          /* @__PURE__ */ o("code", { className: "text-brand", children: "bottom-left:" }),
-          " ",
-          /* @__PURE__ */ o("code", { children: "<ScrollToTop bottom={20} left={20} />" })
-        ] }),
-        /* @__PURE__ */ t(e, { tag: "p", children: [
-          /* @__PURE__ */ o("code", { className: "text-brand", children: "bottom-right:" }),
-          " ",
-          /* @__PURE__ */ o("code", { children: "<ScrollToTop bottom={20} right={20} />" })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ t(l, { className: "p-4", children: [
-      /* @__PURE__ */ o(e, { tag: "h5", className: "mb-3", children: "Custom Size and Threshold" }),
-      /* @__PURE__ */ o(e, { tag: "p", className: "mb-4", children: "Control when the button appears and its size." }),
-      /* @__PURE__ */ t("div", { className: "space-y-2 text-sm", children: [
-        /* @__PURE__ */ t(e, { tag: "p", children: [
-          /* @__PURE__ */ o("code", { className: "text-brand", children: "Small button:" }),
-          " ",
-          /* @__PURE__ */ o("code", { children: '<ScrollToTop size="small" />' })
-        ] }),
-        /* @__PURE__ */ t(e, { tag: "p", children: [
-          /* @__PURE__ */ o("code", { className: "text-brand", children: "Large button:" }),
-          " ",
-          /* @__PURE__ */ o("code", { children: '<ScrollToTop size="large" />' })
-        ] }),
-        /* @__PURE__ */ t(e, { tag: "p", children: [
-          /* @__PURE__ */ o("code", { className: "text-brand", children: "Show after 200px:" }),
-          " ",
-          /* @__PURE__ */ o("code", { children: "<ScrollToTop showAfter={200} />" })
-        ] })
-      ] })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ o(
-    i,
-    {
-      componentName: "ScrollToTop",
-      defaultValues: {
-        size: "large",
-        showAfter: 400,
-        bottom: "45%",
-        right: 50,
-        behavior: "smooth"
-      },
-      excludeProps: ["scrollContainer"],
-      children: (a) => /* @__PURE__ */ o(n, { ...a })
-    }
-  ),
-  /* @__PURE__ */ o(d, { componentName: "ScrollToTop" }),
-  /* @__PURE__ */ o(l, { className: "overflow-hidden", children: /* @__PURE__ */ o(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ o("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o(
-    h,
-    {
-      language: "tsx",
-      code: `import { ScrollToTop } from '@e-burgos/tucu-ui';
-import { BrowserRouter } from 'react-router-dom';
-
-function App() {
-  return (
-    <BrowserRouter>
-      {/* Default: bottom-right, 24px from edges */}
-      <ScrollToTop />
-      
-      {/* Custom position: top-left */}
-      <ScrollToTop top={20} left={20} />
-      
-      {/* Custom size and threshold */}
-      <ScrollToTop size="large" showAfter={200} />
-      
-      {/* Custom position with all props */}
-      <ScrollToTop
-        bottom={32}
-        right={32}
-        size="small"
-        showAfter={300}
-        className="custom-class"
-      />
-      
-      {/* Your routes */}
-    </BrowserRouter>
-  );
-}
-
-// The component:
-// - Displays a floating button when user scrolls down
-// - Automatically scrolls to top when route changes
-// - Uses smooth scrolling behavior
-// - Works with React Router
-// - Button appears after scrolling showAfter pixels (default: 400px)
-// - Position is fixed, customizable via props`
-    }
-  ) }) }) })
-] });
-export {
-  w as default
-};

package/documentation/ScrollToTopSection-IPskJwsB.js

@@ -1,38 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../index-DWDUS-PU.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(o.HeroCard,{title:"ScrollToTop",description:`A utility component that displays a floating button to scroll back to
-          the top of the page. It automatically scrolls to top when the route
-          changes and shows a button when the user scrolls down.`,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-blue-500 to-sky-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.ArrowUp,{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(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.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(o.CardContainer,{className:"p-4",children:[e.jsx(o.Typography,{tag:"h5",className:"mb-3",children:"Default Usage"}),e.jsx(o.Typography,{tag:"p",className:"mb-4",children:"Add this component to your router or app component. By default, it displays a button in the bottom-right corner (24px from edges) that appears when you scroll down more than 400px."}),e.jsx(o.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"The button automatically scrolls to the top when clicked and also scrolls to top whenever the route changes."}),e.jsx("div",{className:"bg-gray-100 dark:bg-gray-800 p-4 rounded-lg",children:e.jsx(o.Typography,{tag:"p",className:"text-sm",children:"Scroll down on this page to see the button appear in the bottom-right corner."})})]}),e.jsxs(o.CardContainer,{className:"p-4",children:[e.jsx(o.Typography,{tag:"h5",className:"mb-3",children:"Custom Position"}),e.jsx(o.Typography,{tag:"p",className:"mb-4",children:"You can customize the button position using the position props."}),e.jsxs("div",{className:"space-y-2 text-sm",children:[e.jsxs(o.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"top-left:"})," ",e.jsx("code",{children:"<ScrollToTop top={20} left={20} />"})]}),e.jsxs(o.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"top-right:"})," ",e.jsx("code",{children:"<ScrollToTop top={20} right={20} />"})]}),e.jsxs(o.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"bottom-left:"})," ",e.jsx("code",{children:"<ScrollToTop bottom={20} left={20} />"})]}),e.jsxs(o.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"bottom-right:"})," ",e.jsx("code",{children:"<ScrollToTop bottom={20} right={20} />"})]})]})]}),e.jsxs(o.CardContainer,{className:"p-4",children:[e.jsx(o.Typography,{tag:"h5",className:"mb-3",children:"Custom Size and Threshold"}),e.jsx(o.Typography,{tag:"p",className:"mb-4",children:"Control when the button appears and its size."}),e.jsxs("div",{className:"space-y-2 text-sm",children:[e.jsxs(o.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Small button:"})," ",e.jsx("code",{children:'<ScrollToTop size="small" />'})]}),e.jsxs(o.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Large button:"})," ",e.jsx("code",{children:'<ScrollToTop size="large" />'})]}),e.jsxs(o.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Show after 200px:"})," ",e.jsx("code",{children:"<ScrollToTop showAfter={200} />"})]})]})]})]})})})}),e.jsx(o.PropPlayground,{componentName:"ScrollToTop",defaultValues:{size:"large",showAfter:400,bottom:"45%",right:50,behavior:"smooth"},excludeProps:["scrollContainer"],children:s=>e.jsx(o.ScrollToTop,{...s})}),e.jsx(o.AutoPropsTable,{componentName:"ScrollToTop"}),e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(o.CodeBlock,{language:"tsx",code:`import { ScrollToTop } from '@e-burgos/tucu-ui';
-import { BrowserRouter } from 'react-router-dom';
-
-function App() {
-  return (
-    <BrowserRouter>
-      {/* Default: bottom-right, 24px from edges */}
-      <ScrollToTop />
-      
-      {/* Custom position: top-left */}
-      <ScrollToTop top={20} left={20} />
-      
-      {/* Custom size and threshold */}
-      <ScrollToTop size="large" showAfter={200} />
-      
-      {/* Custom position with all props */}
-      <ScrollToTop
-        bottom={32}
-        right={32}
-        size="small"
-        showAfter={300}
-        className="custom-class"
-      />
-      
-      {/* Your routes */}
-    </BrowserRouter>
-  );
-}
-
-// The component:
-// - Displays a floating button when user scrolls down
-// - Automatically scrolls to top when route changes
-// - Uses smooth scrolling behavior
-// - Works with React Router
-// - Button appears after scrolling showAfter pixels (default: 400px)
-// - Position is fixed, customizable via props`})})})})]});exports.default=r;

package/documentation/ScrollbarSection-BpZ-yYIY.js

@@ -1,103 +0,0 @@
-import { jsx as e, jsxs as l, Fragment as d } from "react/jsx-runtime";
-import { T as a, H as n, C as r, a as t, Z as c, P as m, A as h, c as p } from "../index-DoxeCFUJ.js";
-import { ScrollText as b } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const w = () => {
-  const o = Array.from({ length: 20 }, (i, s) => /* @__PURE__ */ e("div", { className: "p-4 border-b", children: /* @__PURE__ */ l(a, { tag: "p", children: [
-    "Content item ",
-    s + 1
-  ] }) }, s));
-  return /* @__PURE__ */ l(d, { children: [
-    /* @__PURE__ */ e(
-      n,
-      {
-        title: "Scrollbar",
-        description: `A customizable scrollbar component with auto-hide functionality and
-          custom styling options.`,
-        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-teal-600 to-emerald-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(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Basic 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(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Vertical Scrollbar" }),
-        /* @__PURE__ */ e(c, { className: "h-48", children: /* @__PURE__ */ e("div", { children: o.slice(0, 10) }) })
-      ] }),
-      /* @__PURE__ */ l(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Auto Hide on Leave" }),
-        /* @__PURE__ */ e(c, { className: "h-48", autoHide: "leave", children: /* @__PURE__ */ e("div", { children: o.slice(0, 10) }) })
-      ] }),
-      /* @__PURE__ */ l(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Never Hide" }),
-        /* @__PURE__ */ e(c, { className: "h-48", autoHide: "never", children: /* @__PURE__ */ e("div", { children: o.slice(0, 10) }) })
-      ] }),
-      /* @__PURE__ */ l(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Custom Styled" }),
-        /* @__PURE__ */ e(
-          c,
-          {
-            className: "h-48",
-            scrollbarStyle: {
-              track: { backgroundColor: "transparent" },
-              thumb: { borderRadius: "8px", width: "8px" }
-            },
-            children: /* @__PURE__ */ e("div", { children: o.slice(0, 10) })
-          }
-        )
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(
-      m,
-      {
-        componentName: "Scrollbar",
-        defaultValues: { autoHide: "scroll", direction: "vertical" },
-        excludeProps: ["scrollbarStyle", "style"],
-        children: (i) => /* @__PURE__ */ e(c, { ...i, style: { height: 200 }, children: /* @__PURE__ */ l("div", { style: { height: 600, padding: 16 }, children: [
-          /* @__PURE__ */ e("p", { children: "Scroll down to see more content..." }),
-          /* @__PURE__ */ e("p", { style: { marginTop: 200 }, children: "Middle content" }),
-          /* @__PURE__ */ e("p", { style: { marginTop: 200 }, children: "End of content" })
-        ] }) })
-      }
-    ),
-    /* @__PURE__ */ e(h, { componentName: "Scrollbar" }),
-    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      p,
-      {
-        language: "tsx",
-        code: `import { Scrollbar } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<Scrollbar className="h-48">
-  <div>
-    {/* Your content here */}
-  </div>
-</Scrollbar>
-
-// Auto hide on leave
-<Scrollbar className="h-48" autoHide="leave">
-  <div>{content}</div>
-</Scrollbar>
-
-// Never hide
-<Scrollbar className="h-48" autoHide="never">
-  <div>{content}</div>
-</Scrollbar>
-
-// Custom styled
-<Scrollbar
-  className="h-48"
-  scrollbarStyle={{
-    track: { backgroundColor: 'transparent' },
-    thumb: { borderRadius: '8px', width: '8px' },
-  }}
->
-  <div>{content}</div>
-</Scrollbar>`
-      }
-    ) }) }) })
-  ] });
-};
-export {
-  w as default
-};

package/documentation/ScrollbarSection-DfK0WSIX.js

@@ -1,30 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-DWDUS-PU.js"),c=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const l=Array.from({length:20},(a,s)=>e.jsx("div",{className:"p-4 border-b",children:e.jsxs(r.Typography,{tag:"p",children:["Content item ",s+1]})},s));return e.jsxs(e.Fragment,{children:[e.jsx(r.HeroCard,{title:"Scrollbar",description:`A customizable scrollbar component with auto-hide functionality and
-          custom styling options.`,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-teal-600 to-emerald-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(c.ScrollText,{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(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.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:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Vertical Scrollbar"}),e.jsx(r.Scrollbar,{className:"h-48",children:e.jsx("div",{children:l.slice(0,10)})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Auto Hide on Leave"}),e.jsx(r.Scrollbar,{className:"h-48",autoHide:"leave",children:e.jsx("div",{children:l.slice(0,10)})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Never Hide"}),e.jsx(r.Scrollbar,{className:"h-48",autoHide:"never",children:e.jsx("div",{children:l.slice(0,10)})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Custom Styled"}),e.jsx(r.Scrollbar,{className:"h-48",scrollbarStyle:{track:{backgroundColor:"transparent"},thumb:{borderRadius:"8px",width:"8px"}},children:e.jsx("div",{children:l.slice(0,10)})})]})]})})})}),e.jsx(r.PropPlayground,{componentName:"Scrollbar",defaultValues:{autoHide:"scroll",direction:"vertical"},excludeProps:["scrollbarStyle","style"],children:a=>e.jsx(r.Scrollbar,{...a,style:{height:200},children:e.jsxs("div",{style:{height:600,padding:16},children:[e.jsx("p",{children:"Scroll down to see more content..."}),e.jsx("p",{style:{marginTop:200},children:"Middle content"}),e.jsx("p",{style:{marginTop:200},children:"End of content"})]})})}),e.jsx(r.AutoPropsTable,{componentName:"Scrollbar"}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { Scrollbar } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<Scrollbar className="h-48">
-  <div>
-    {/* Your content here */}
-  </div>
-</Scrollbar>
-
-// Auto hide on leave
-<Scrollbar className="h-48" autoHide="leave">
-  <div>{content}</div>
-</Scrollbar>
-
-// Never hide
-<Scrollbar className="h-48" autoHide="never">
-  <div>{content}</div>
-</Scrollbar>
-
-// Custom styled
-<Scrollbar
-  className="h-48"
-  scrollbarStyle={{
-    track: { backgroundColor: 'transparent' },
-    thumb: { borderRadius: '8px', width: '8px' },
-  }}
->
-  <div>{content}</div>
-</Scrollbar>`})})})})]})};exports.default=i;

package/documentation/SearchSection-WT9_CxCF.js

@@ -1,45 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=[{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",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",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",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",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",budget:32e3}],i=()=>{const l=[{id:"id",accessorKey:"id",header:"ID",size:100,cell:t=>e.jsx("code",{className:"text-xs font-mono font-bold text-indigo-600 dark:text-indigo-400",children:String(t.getValue())})},{id:"name",accessorKey:"name",header:"Project Name",size:220,cell:t=>e.jsx("span",{className:"font-semibold text-foreground",children:String(t.getValue())})},{id:"leader",accessorKey:"leader",header:"Leader",size:200,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 text-foreground",children:s.name})]})}},{id:"progress",accessorKey:"progress",header:"Progress",size:130,cell:t=>{const s=t.getValue();return e.jsxs("div",{className:"flex flex-col gap-1 w-full max-w-[100px]",children:[e.jsxs("span",{className:"text-xs text-foreground/70",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",style:{width:`${s}%`}})})]})}},{id:"status",accessorKey:"status",header:"Status",size:120,cell:t=>{const s=t.getValue();let r="primary";return s==="Completed"&&(r="success"),s==="On Hold"&&(r="danger"),s==="Planning"&&(r="warning"),e.jsx(a.Badge,{variant:"soft",color:r,children:s})}}];return e.jsxs("div",{className:"flex flex-col gap-8",children:[e.jsx(a.HeroCard,{title:"Global Search",description:"Enable users to search and filter row data across the table. Restrict text query validation to selected columns by specifying column identifiers.",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(n.Search,{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:"Search Scope Configuration",className:"mb-4",children:[e.jsxs(a.Typography,{className:"text-sm text-foreground/70 mb-4",children:["Global Search integrates directly into the table's state using TanStack Table's internal filtering engine. To enable search, pass the ",e.jsx("code",{children:"searchableColumns"})," prop to the"," ",e.jsx("code",{children:"DataTable"})," containing an array of column IDs. The search bar will render automatically next to the title (or in the header action containers)."]}),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:"Selective Column Target"}),e.jsxs(a.Typography,{className:"text-xs text-foreground/60 leading-relaxed",children:["By setting ",e.jsxs("code",{children:["searchableColumns=",["id","name"]]}),", queries are validated only against these columns. Any matched text inside non-configured columns (e.g., Progress or Status) will be ignored, preventing unwanted false positives."]})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(a.Typography,{tag:"h6",className:"font-semibold text-brand",children:"Case-Insensitive Match"}),e.jsx(a.Typography,{className:"text-xs text-foreground/60 leading-relaxed",children:"The filtering logic safely converts cell data to lowercase strings, guaranteeing reliable, case-insensitive substring comparisons for strings, numbers, and state objects."})]})]})]})}),e.jsx(a.CardContainer,{className:"p-6",children:e.jsxs(a.CardTitle,{title:"Interactive Search Demo",className:"mb-4",children:[e.jsxs(a.Typography,{className:"text-sm text-foreground/70 mb-6",children:["Try searching below. In this example, search is restricted to the"," ",e.jsx("strong",{children:"ID"}),", ",e.jsx("strong",{children:"Project Name"}),", and"," ",e.jsx("strong",{children:"Status"})," columns (e.g., type ",e.jsx("code",{children:'"Apollo"'})," or"," ",e.jsx("code",{children:'"Planning"'}),")."]}),e.jsx(a.DataTable,{tableId:"search-demo-table",columns:l,data:o,title:"Workspaces Catalog",searchableColumns:["id","name","status"],pagination:{showPagination:!0,pageSize:5},rightActions:e.jsxs(a.Button,{variant:"solid",size:"small",color:"primary",onClick:()=>alert("Reloading data..."),children:[e.jsx(n.RefreshCw,{className:"w-4 h-4"}),e.jsx("span",{className:"text-xs font-semibold",children:"Reload"})]})})]})}),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, TanstackTable } from '@e-burgos/tucu-ui';
-
-interface Project {
-  id: string;
-  name: string;
-  leader: { name: string; avatar: string };
-  progress: number;
-  status: 'Active' | 'Completed' | 'On Hold' | 'Planning';
-}
-
-const columns: TanstackTable.ColumnDef<Project, any>[] = [
-  {
-    id: 'id',
-    accessorKey: 'id',
-    header: 'ID',
-    size: 100,
-  },
-  {
-    id: 'name',
-    accessorKey: 'name',
-    header: 'Project Name',
-  },
-  {
-    id: 'status',
-    accessorKey: 'status',
-    header: 'Status',
-  }
-];
-
-export default function WorkspaceCatalog({ data }: { data: Project[] }) {
-  return (
-    <DataTable
-      tableId="workspaces-table"
-      columns={columns}
-      data={data}
-      title="Workspaces Catalog"
-      // Configure columns allowed to be searched
-      searchableColumns={['id', 'name', 'status']}
-      pagination={{
-        showPagination: true,
-        pageSize: 5,
-      }}
-    />
-  );
-}`})})})]})};exports.default=i;

package/documentation/SearchSection-fY2x4mhW.js

@@ -1,268 +0,0 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { H as i, C as o, a as l, T as r, bQ as c, x as d, c as m, X as g, K as h } from "../index-DoxeCFUJ.js";
-import { Search as u, RefreshCw as p } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const f = [
-  {
-    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",
-    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",
-    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",
-    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",
-    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",
-    budget: 32e3
-  }
-], P = () => /* @__PURE__ */ a("div", { className: "flex flex-col gap-8", children: [
-  /* @__PURE__ */ e(
-    i,
-    {
-      title: "Global Search",
-      description: "Enable users to search and filter row data across the table. Restrict text query validation to selected columns by specifying column identifiers.",
-      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(u, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
-    }
-  ),
-  /* @__PURE__ */ e(o, { className: "p-6", children: /* @__PURE__ */ a(l, { title: "Search Scope Configuration", className: "mb-4", children: [
-    /* @__PURE__ */ a(r, { className: "text-sm text-foreground/70 mb-4", children: [
-      "Global Search integrates directly into the table's state using TanStack Table's internal filtering engine. To enable search, pass the ",
-      /* @__PURE__ */ e("code", { children: "searchableColumns" }),
-      " prop to the",
-      " ",
-      /* @__PURE__ */ e("code", { children: "DataTable" }),
-      " containing an array of column IDs. The search bar will render automatically next to the title (or in the header action containers)."
-    ] }),
-    /* @__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(r, { tag: "h6", className: "font-semibold text-brand", children: "Selective Column Target" }),
-        /* @__PURE__ */ a(r, { className: "text-xs text-foreground/60 leading-relaxed", children: [
-          "By setting ",
-          /* @__PURE__ */ a("code", { children: [
-            "searchableColumns=",
-            ["id", "name"]
-          ] }),
-          ", queries are validated only against these columns. Any matched text inside non-configured columns (e.g., Progress or Status) will be ignored, preventing unwanted false positives."
-        ] })
-      ] }),
-      /* @__PURE__ */ a("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ e(r, { tag: "h6", className: "font-semibold text-brand", children: "Case-Insensitive Match" }),
-        /* @__PURE__ */ e(r, { className: "text-xs text-foreground/60 leading-relaxed", children: "The filtering logic safely converts cell data to lowercase strings, guaranteeing reliable, case-insensitive substring comparisons for strings, numbers, and state objects." })
-      ] })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ e(o, { className: "p-6", children: /* @__PURE__ */ a(l, { title: "Interactive Search Demo", className: "mb-4", children: [
-    /* @__PURE__ */ a(r, { className: "text-sm text-foreground/70 mb-6", children: [
-      "Try searching below. In this example, search is restricted to the",
-      " ",
-      /* @__PURE__ */ e("strong", { children: "ID" }),
-      ", ",
-      /* @__PURE__ */ e("strong", { children: "Project Name" }),
-      ", and",
-      " ",
-      /* @__PURE__ */ e("strong", { children: "Status" }),
-      " columns (e.g., type ",
-      /* @__PURE__ */ e("code", { children: '"Apollo"' }),
-      " or",
-      " ",
-      /* @__PURE__ */ e("code", { children: '"Planning"' }),
-      ")."
-    ] }),
-    /* @__PURE__ */ e(
-      c,
-      {
-        tableId: "search-demo-table",
-        columns: [
-          {
-            id: "id",
-            accessorKey: "id",
-            header: "ID",
-            size: 100,
-            cell: (s) => /* @__PURE__ */ e("code", { className: "text-xs font-mono font-bold text-indigo-600 dark:text-indigo-400", children: String(s.getValue()) })
-          },
-          {
-            id: "name",
-            accessorKey: "name",
-            header: "Project Name",
-            size: 220,
-            cell: (s) => /* @__PURE__ */ e("span", { className: "font-semibold text-foreground", children: String(s.getValue()) })
-          },
-          {
-            id: "leader",
-            accessorKey: "leader",
-            header: "Leader",
-            size: 200,
-            cell: (s) => {
-              const t = s.getValue();
-              return /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ e(
-                  g,
-                  {
-                    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 text-foreground", children: t.name })
-              ] });
-            }
-          },
-          {
-            id: "progress",
-            accessorKey: "progress",
-            header: "Progress",
-            size: 130,
-            cell: (s) => {
-              const t = s.getValue();
-              return /* @__PURE__ */ a("div", { className: "flex flex-col gap-1 w-full max-w-[100px]", children: [
-                /* @__PURE__ */ a("span", { className: "text-xs text-foreground/70", 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",
-                    style: { width: `${t}%` }
-                  }
-                ) })
-              ] });
-            }
-          },
-          {
-            id: "status",
-            accessorKey: "status",
-            header: "Status",
-            size: 120,
-            cell: (s) => {
-              const t = s.getValue();
-              let n = "primary";
-              return t === "Completed" && (n = "success"), t === "On Hold" && (n = "danger"), t === "Planning" && (n = "warning"), /* @__PURE__ */ e(h, { variant: "soft", color: n, children: t });
-            }
-          }
-        ],
-        data: f,
-        title: "Workspaces Catalog",
-        searchableColumns: ["id", "name", "status"],
-        pagination: {
-          showPagination: !0,
-          pageSize: 5
-        },
-        rightActions: /* @__PURE__ */ a(
-          d,
-          {
-            variant: "solid",
-            size: "small",
-            color: "primary",
-            onClick: () => alert("Reloading data..."),
-            children: [
-              /* @__PURE__ */ e(p, { className: "w-4 h-4" }),
-              /* @__PURE__ */ e("span", { className: "text-xs font-semibold", children: "Reload" })
-            ]
-          }
-        )
-      }
-    )
-  ] }) }),
-  /* @__PURE__ */ e(o, { className: "p-6", children: /* @__PURE__ */ e(l, { title: "Implementation Code", className: "mb-4", children: /* @__PURE__ */ e(
-    m,
-    {
-      language: "tsx",
-      code: `import { DataTable, TanstackTable } from '@e-burgos/tucu-ui';
-
-interface Project {
-  id: string;
-  name: string;
-  leader: { name: string; avatar: string };
-  progress: number;
-  status: 'Active' | 'Completed' | 'On Hold' | 'Planning';
-}
-
-const columns: TanstackTable.ColumnDef<Project, any>[] = [
-  {
-    id: 'id',
-    accessorKey: 'id',
-    header: 'ID',
-    size: 100,
-  },
-  {
-    id: 'name',
-    accessorKey: 'name',
-    header: 'Project Name',
-  },
-  {
-    id: 'status',
-    accessorKey: 'status',
-    header: 'Status',
-  }
-];
-
-export default function WorkspaceCatalog({ data }: { data: Project[] }) {
-  return (
-    <DataTable
-      tableId="workspaces-table"
-      columns={columns}
-      data={data}
-      title="Workspaces Catalog"
-      // Configure columns allowed to be searched
-      searchableColumns={['id', 'name', 'status']}
-      pagination={{
-        showPagination: true,
-        pageSize: 5,
-      }}
-    />
-  );
-}`
-    }
-  ) }) })
-] });
-export {
-  P as default
-};