@e-burgos/tucu-ui 2.0.2 → 2.0.3

package/{RevealContentSection-BtBQGgOW.mjs → documentation/RevealContentSection-BK8j8yQ6.js}

@@ -1,60 +1,18 @@
-import { jsxs as a, Fragment as h, jsx as e } from "react/jsx-runtime";
-import { T as t, C as n, a as i, af as r, B as p, c as m } from "./index-HwvOEWI7.mjs";
+import { jsxs as a, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { T as t, C as n, a as o, af as l, s as h, A as c, c as d } from "../index-DsiBIFwo.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const N = () => {
-  const c = [
-    {
-      key: "prop",
-      label: "Prop",
-      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(l) })
-    },
-    {
-      key: "type",
-      label: "Type",
-      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
-    },
-    {
-      key: "default",
-      label: "Default",
-      render: (l) => {
-        const s = String(l);
-        return s === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: s });
-      }
-    },
-    {
-      key: "description",
-      label: "Description"
-    }
-  ], d = [
-    {
-      prop: "defaultHeight",
-      type: "number",
-      default: "required",
-      description: "Default collapsed height in pixels"
-    },
-    {
-      prop: "children",
-      type: "React.ReactNode",
-      default: "required",
-      description: "Content to reveal/hide"
-    },
-    {
-      prop: "className",
-      type: "string",
-      default: "-",
-      description: "Additional CSS classes"
-    }
-  ], o = /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+const f = () => {
+  const i = /* @__PURE__ */ a("div", { className: "space-y-2", children: [
     /* @__PURE__ */ e(t, { tag: "p", children: "This is a long piece of content that will be collapsed by default." }),
     /* @__PURE__ */ e(t, { tag: "p", children: 'When the content exceeds the default height, a "Show More" button will appear.' }),
     /* @__PURE__ */ e(t, { tag: "p", children: "Clicking the button will expand the content to show everything." }),
     /* @__PURE__ */ e(t, { tag: "p", children: 'You can then click "Show Less" to collapse it back to the default height.' }),
     /* @__PURE__ */ e(t, { tag: "p", children: "This is useful for displaying long descriptions, articles, or any content that might be too long for the initial view." })
   ] });
-  return /* @__PURE__ */ a(h, { children: [
+  return /* @__PURE__ */ a(r, { children: [
     /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
       /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "RevealContent" }),
       /* @__PURE__ */ e(
@@ -66,19 +24,33 @@ const N = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
       /* @__PURE__ */ a(n, { className: "p-4", children: [
         /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Default Height 100px" }),
-        /* @__PURE__ */ e(r, { defaultHeight: 100, children: o })
+        /* @__PURE__ */ e(l, { defaultHeight: 100, children: i })
       ] }),
       /* @__PURE__ */ a(n, { className: "p-4", children: [
         /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Default Height 150px" }),
-        /* @__PURE__ */ e(r, { defaultHeight: 150, children: o })
+        /* @__PURE__ */ e(l, { defaultHeight: 150, children: i })
       ] })
     ] }) }) }) }),
-    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(p, { columns: c, data: d }) }) }) }),
-    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      m,
+    /* @__PURE__ */ e(
+      h,
+      {
+        componentName: "RevealContent",
+        defaultValues: { defaultHeight: 100 },
+        excludeProps: [],
+        children: (s) => /* @__PURE__ */ e(l, { ...s, children: /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "This is the first paragraph of content that is initially visible." }),
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "This second paragraph may be hidden depending on the defaultHeight value." }),
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "This third paragraph is likely hidden and revealed when expanded." }),
+          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "And here is even more content to demonstrate the reveal functionality." })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ e(c, { componentName: "RevealContent" }),
+    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      d,
       {
         language: "tsx",
         code: `import { RevealContent, Typography } from '@e-burgos/tucu-ui';
@@ -107,5 +79,5 @@ const N = () => {
   ] });
 };
 export {
-  N as default
+  f as default
 };

package/documentation/RevealContentSection-Cm9Ego3J.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>{const a=e.jsxs("div",{className:"space-y-2",children:[e.jsx(t.Typography,{tag:"p",children:"This is a long piece of content that will be collapsed by default."}),e.jsx(t.Typography,{tag:"p",children:'When the content exceeds the default height, a "Show More" button will appear.'}),e.jsx(t.Typography,{tag:"p",children:"Clicking the button will expand the content to show everything."}),e.jsx(t.Typography,{tag:"p",children:'You can then click "Show Less" to collapse it back to the default height.'}),e.jsx(t.Typography,{tag:"p",children:"This is useful for displaying long descriptions, articles, or any content that might be too long for the initial view."})]});return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"RevealContent"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:'A component that automatically collapses long content and provides a "Show More" / "Show Less" button.'})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Default Height 100px"}),e.jsx(t.RevealContent,{defaultHeight:100,children:a})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Default Height 150px"}),e.jsx(t.RevealContent,{defaultHeight:150,children:a})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"RevealContent",defaultValues:{defaultHeight:100},excludeProps:[],children:n=>e.jsx(t.RevealContent,{...n,children:e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"This is the first paragraph of content that is initially visible."}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"This second paragraph may be hidden depending on the defaultHeight value."}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"This third paragraph is likely hidden and revealed when expanded."}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"And here is even more content to demonstrate the reveal functionality."})]})})}),e.jsx(t.AutoPropsTable,{componentName:"RevealContent"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { RevealContent, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<RevealContent defaultHeight={100}>
+  <div>
+    <Typography tag="p">Long content here...</Typography>
+    <Typography tag="p">More content...</Typography>
+  </div>
+</RevealContent>
+
+// With custom height
+<RevealContent defaultHeight={150}>
+  <div>
+    {/* Your long content */}
+  </div>
+</RevealContent>
+
+// The component automatically:
+// - Shows "Show More" if content exceeds defaultHeight
+// - Shows "Show Less" when expanded
+// - Hides button if content is shorter than defaultHeight`})})})})]})};exports.default=s;

package/{RouteConfigurationSection-B9FbX-yc.mjs → documentation/RouteConfigurationSection-JaOww2mF.js}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { C as a, a as r, T as n, c as o } from "./index-HwvOEWI7.mjs";
+import { C as a, a as r, T as n, c as o } from "../index-DsiBIFwo.js";
 import { Settings as i, Play as s } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{RouteConfigurationSection-BjLpTMvZ.js → documentation/RouteConfigurationSection-PdMrY6xs.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-BOfUOCHe.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Route Configuration",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg",children:e.jsx(n.Settings,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"StandaloneAppRoutesMenuItem Interface"})]}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For single applications, routes are defined using the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"StandaloneAppRoutesMenuItem"})," ","interface which extends"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"IMenuItem"}),"."]}),e.jsx(t.CodeBlock,{language:"typescript",code:`interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-D874Kozv.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Route Configuration",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg",children:e.jsx(n.Settings,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"StandaloneAppRoutesMenuItem Interface"})]}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For single applications, routes are defined using the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"StandaloneAppRoutesMenuItem"})," ","interface which extends"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"IMenuItem"}),"."]}),e.jsx(t.CodeBlock,{language:"typescript",code:`interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
   component: JSX.Element;        // The component to render
   dropdownItems?: StandaloneAppRoutesMenuItem[]; // Optional sub-routes
 }

package/{ScrollToTopSection-CCUPxMPa.mjs → documentation/ScrollToTopSection-DktmPBqU.js}

@@ -1,14 +1,14 @@
-import { jsxs as o, Fragment as i, jsx as e } from "react/jsx-runtime";
-import { T as t, C as r, a as s, B as n, c } from "./index-HwvOEWI7.mjs";
+import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { T as o, C as l, a, s as c, ag as n, A as i, c as d } from "../index-DsiBIFwo.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const x = () => /* @__PURE__ */ o(i, { children: [
-  /* @__PURE__ */ o("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ScrollToTop" }),
+const T = () => /* @__PURE__ */ t(s, { children: [
+  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(o, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ScrollToTop" }),
     /* @__PURE__ */ e(
-      t,
+      o,
       {
         tag: "p",
         className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
@@ -16,61 +16,61 @@ const x = () => /* @__PURE__ */ o(i, { children: [
       }
     )
   ] }),
-  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ o(r, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Default Usage" }),
-      /* @__PURE__ */ e(t, { 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__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("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__ */ e(o, { tag: "h5", className: "mb-3", children: "Default Usage" }),
+      /* @__PURE__ */ e(o, { 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__ */ e(
-        t,
+        o,
         {
           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__ */ e("div", { className: "bg-gray-100 dark:bg-gray-800 p-4 rounded-lg", children: /* @__PURE__ */ e(t, { tag: "p", className: "text-sm", children: "Scroll down on this page to see the button appear in the bottom-right corner." }) })
+      /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-gray-800 p-4 rounded-lg", children: /* @__PURE__ */ e(o, { tag: "p", className: "text-sm", children: "Scroll down on this page to see the button appear in the bottom-right corner." }) })
     ] }),
-    /* @__PURE__ */ o(r, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Position" }),
-      /* @__PURE__ */ e(t, { tag: "p", className: "mb-4", children: "You can customize the button position using the position props." }),
-      /* @__PURE__ */ o("div", { className: "space-y-2 text-sm", children: [
-        /* @__PURE__ */ o(t, { tag: "p", children: [
+    /* @__PURE__ */ t(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(o, { tag: "h5", className: "mb-3", children: "Custom Position" }),
+      /* @__PURE__ */ e(o, { 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(o, { tag: "p", children: [
           /* @__PURE__ */ e("code", { className: "text-brand", children: "top-left:" }),
           " ",
           /* @__PURE__ */ e("code", { children: "<ScrollToTop top={20} left={20} />" })
         ] }),
-        /* @__PURE__ */ o(t, { tag: "p", children: [
+        /* @__PURE__ */ t(o, { tag: "p", children: [
           /* @__PURE__ */ e("code", { className: "text-brand", children: "top-right:" }),
           " ",
           /* @__PURE__ */ e("code", { children: "<ScrollToTop top={20} right={20} />" })
         ] }),
-        /* @__PURE__ */ o(t, { tag: "p", children: [
+        /* @__PURE__ */ t(o, { tag: "p", children: [
           /* @__PURE__ */ e("code", { className: "text-brand", children: "bottom-left:" }),
           " ",
           /* @__PURE__ */ e("code", { children: "<ScrollToTop bottom={20} left={20} />" })
         ] }),
-        /* @__PURE__ */ o(t, { tag: "p", children: [
+        /* @__PURE__ */ t(o, { tag: "p", children: [
           /* @__PURE__ */ e("code", { className: "text-brand", children: "bottom-right:" }),
           " ",
           /* @__PURE__ */ e("code", { children: "<ScrollToTop bottom={20} right={20} />" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ o(r, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Size and Threshold" }),
-      /* @__PURE__ */ e(t, { tag: "p", className: "mb-4", children: "Control when the button appears and its size." }),
-      /* @__PURE__ */ o("div", { className: "space-y-2 text-sm", children: [
-        /* @__PURE__ */ o(t, { tag: "p", children: [
+    /* @__PURE__ */ t(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(o, { tag: "h5", className: "mb-3", children: "Custom Size and Threshold" }),
+      /* @__PURE__ */ e(o, { 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(o, { tag: "p", children: [
           /* @__PURE__ */ e("code", { className: "text-brand", children: "Small button:" }),
           " ",
           /* @__PURE__ */ e("code", { children: '<ScrollToTop size="small" />' })
         ] }),
-        /* @__PURE__ */ o(t, { tag: "p", children: [
+        /* @__PURE__ */ t(o, { tag: "p", children: [
           /* @__PURE__ */ e("code", { className: "text-brand", children: "Large button:" }),
           " ",
           /* @__PURE__ */ e("code", { children: '<ScrollToTop size="large" />' })
         ] }),
-        /* @__PURE__ */ o(t, { tag: "p", children: [
+        /* @__PURE__ */ t(o, { tag: "p", children: [
           /* @__PURE__ */ e("code", { className: "text-brand", children: "Show after 200px:" }),
           " ",
           /* @__PURE__ */ e("code", { children: "<ScrollToTop showAfter={200} />" })
@@ -78,75 +78,23 @@ const x = () => /* @__PURE__ */ o(i, { children: [
       ] })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(n, { columns: [
-    {
-      key: "prop",
-      label: "Prop",
-      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(l) })
-    },
-    {
-      key: "type",
-      label: "Type",
-      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
-    },
-    {
-      key: "default",
-      label: "Default",
-      render: (l) => {
-        const a = String(l);
-        return a === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: a });
-      }
-    },
-    {
-      key: "description",
-      label: "Description"
-    }
-  ], data: [
-    {
-      prop: "top",
-      type: "string | number",
-      default: "undefined",
-      description: "Distance from the top of the viewport (in pixels or Tailwind class). If undefined, uses bottom instead."
-    },
-    {
-      prop: "right",
-      type: "string | number",
-      default: "24",
-      description: "Distance from the right of the viewport (in pixels or Tailwind class)."
-    },
-    {
-      prop: "bottom",
-      type: "string | number",
-      default: "24",
-      description: "Distance from the bottom of the viewport (in pixels or Tailwind class)."
-    },
-    {
-      prop: "left",
-      type: "string | number",
-      default: "undefined",
-      description: "Distance from the left of the viewport (in pixels or Tailwind class). If undefined, uses right instead."
-    },
-    {
-      prop: "showAfter",
-      type: "number",
-      default: "400",
-      description: "Minimum scroll position (in pixels) to show the button."
-    },
-    {
-      prop: "size",
-      type: "'small' | 'medium' | 'large'",
-      default: "'medium'",
-      description: "Size of the button."
-    },
+  /* @__PURE__ */ e(
+    c,
     {
-      prop: "className",
-      type: "string",
-      default: "undefined",
-      description: "Custom className for the button."
+      componentName: "ScrollToTop",
+      defaultValues: {
+        size: "medium",
+        showAfter: 400,
+        bottom: 24,
+        right: 24
+      },
+      excludeProps: [],
+      children: (r) => /* @__PURE__ */ e(n, { ...r })
     }
-  ] }) }) }) }),
-  /* @__PURE__ */ e(r, { 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(
-    c,
+  ),
+  /* @__PURE__ */ e(i, { componentName: "ScrollToTop" }),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(a, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    d,
     {
       language: "tsx",
       code: `import { ScrollToTop } from '@e-burgos/tucu-ui';
@@ -189,5 +137,5 @@ function App() {
   ) }) }) })
 ] });
 export {
-  x as default
+  T as default
 };

package/documentation/ScrollToTopSection-_W3FULOG.js

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(o.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ScrollToTop"}),e.jsx(o.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"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."})]}),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:"medium",showAfter:400,bottom:24,right:24},excludeProps:[],children:t=>e.jsx(o.ScrollToTop,{...t})}),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=s;

package/documentation/ScrollbarSection-94c3rkLU.js

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{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.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(r.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Scrollbar"}),e.jsx(r.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A customizable scrollbar component with auto-hide functionality and custom styling options."})]}),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=c;

package/documentation/ScrollbarSection-Dhqk4MAL.js

@@ -0,0 +1,105 @@
+import { jsx as e, jsxs as l, Fragment as d } from "react/jsx-runtime";
+import { T as a, C as r, a as o, K as c, s as n, A as m, c as h } from "../index-DsiBIFwo.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => {
+  const t = Array.from({ length: 20 }, (s, i) => /* @__PURE__ */ e("div", { className: "p-4 border-b", children: /* @__PURE__ */ l(a, { tag: "p", children: [
+    "Content item ",
+    i + 1
+  ] }) }, i));
+  return /* @__PURE__ */ l(d, { children: [
+    /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Scrollbar" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A customizable scrollbar component with auto-hide functionality and custom styling options."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ 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: t.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: t.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: t.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: t.slice(0, 10) })
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(
+      n,
+      {
+        componentName: "Scrollbar",
+        defaultValues: { autoHide: "scroll", direction: "vertical" },
+        excludeProps: ["scrollbarStyle", "style"],
+        children: (s) => /* @__PURE__ */ e(c, { ...s, 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(m, { componentName: "Scrollbar" }),
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      h,
+      {
+        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 {
+  x as default
+};