@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/ScrollToTopSection-CtOc-TS2.js

@@ -0,0 +1,141 @@
+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

@@ -0,0 +1,38 @@
+"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

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,30 @@
+"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

@@ -0,0 +1,45 @@
+"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

@@ -0,0 +1,268 @@
+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
+};