@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/RevealContentSection-PGiR5VJY.mjs

@@ -0,0 +1,111 @@
+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-Hq6IUBmn.mjs";
+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: [
+    /* @__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: [
+    /* @__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(
+        t,
+        {
+          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.'
+        }
+      )
+    ] }),
+    /* @__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__ */ 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__ */ 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(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,
+      {
+        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`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  N as default
+};

package/RevealContentSection-kDLDHOGV.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const n=[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"text-xs text-brand",children:String(a)})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"text-xs",children:String(a)})},{key:"default",label:"Default",render:a=>{const l=String(a);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],r=[{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"}],s=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:s})]}),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:s})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:n,data:r})})})}),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=i;

package/RouteConfigurationSection-BmwVvMMw.mjs

@@ -0,0 +1,81 @@
+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-Hq6IUBmn.mjs";
+import { Settings as i, Play as s } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const f = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(r, { title: "Route Configuration", className: "mt-2 mb-6", children: /* @__PURE__ */ t("div", { className: "space-y-8", children: [
+  /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg", children: /* @__PURE__ */ e(i, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+      /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "StandaloneAppRoutesMenuItem Interface" })
+    ] }),
+    /* @__PURE__ */ t(
+      n,
+      {
+        tag: "p",
+        className: "text-sm text-gray-600 dark:text-gray-400",
+        children: [
+          "For single applications, routes are defined using the",
+          " ",
+          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "StandaloneAppRoutesMenuItem" }),
+          " ",
+          "interface which extends",
+          " ",
+          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "IMenuItem" }),
+          "."
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(o, { language: "typescript", code: `interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
+  component: JSX.Element;        // The component to render
+  dropdownItems?: StandaloneAppRoutesMenuItem[]; // Optional sub-routes
+}
+
+interface IMenuItem {
+  name: string;                  // Display name for the menu item
+  path: string;                  // URL path for the route
+  icon?: React.ReactNode;        // Optional icon component
+  href?: string;                 // Optional external URL
+  hide?: boolean;                 // Hide from navigation
+  isActive?: boolean;            // Force active state
+  onClick?: () => void;          // Optional click handler
+}` })
+  ] }),
+  /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg", children: /* @__PURE__ */ e(s, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+      /* @__PURE__ */ e(n, { tag: "h4", className: "font-semibold", children: "Basic Usage" })
+    ] }),
+    /* @__PURE__ */ e(o, { language: "tsx", code: `import { StandaloneAppThemeProvider } from '@e-burgos/tucu-ui';
+import { Introduction } from './pages/Introduction';
+import { ThemingGuide } from './pages/ThemingGuide';
+
+const menuItems = [
+  {
+    name: 'Introduction',
+    path: '/',
+    icon: <LucideIcons.Home />,
+    component: <Introduction />,
+  },
+  {
+    name: 'Theming',
+    path: '/theming-guide',
+    icon: <LucideIcons.Paintbrush />,
+    component: <ThemingGuide />,
+  },
+];
+
+function App() {
+  return (
+    <StandaloneAppThemeProvider
+      menuItems={menuItems}
+      logo={{ name: 'My', secondName: 'App' }}
+    />
+  );
+}` })
+  ] })
+] }) }) }) });
+export {
+  f as default
+};

package/RouteConfigurationSection-DR7u1n3x.js

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.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
+}
+
+interface IMenuItem {
+  name: string;                  // Display name for the menu item
+  path: string;                  // URL path for the route
+  icon?: React.ReactNode;        // Optional icon component
+  href?: string;                 // Optional external URL
+  hide?: boolean;                 // Hide from navigation
+  isActive?: boolean;            // Force active state
+  onClick?: () => void;          // Optional click handler
+}`})]}),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-green-500 to-emerald-500 shadow-lg",children:e.jsx(n.Play,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"Basic Usage"})]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { StandaloneAppThemeProvider } from '@e-burgos/tucu-ui';
+import { Introduction } from './pages/Introduction';
+import { ThemingGuide } from './pages/ThemingGuide';
+
+const menuItems = [
+  {
+    name: 'Introduction',
+    path: '/',
+    icon: <LucideIcons.Home />,
+    component: <Introduction />,
+  },
+  {
+    name: 'Theming',
+    path: '/theming-guide',
+    icon: <LucideIcons.Paintbrush />,
+    component: <ThemingGuide />,
+  },
+];
+
+function App() {
+  return (
+    <StandaloneAppThemeProvider
+      menuItems={menuItems}
+      logo={{ name: 'My', secondName: 'App' }}
+    />
+  );
+}`})]})]})})})});exports.default=o;

package/ScrollToTopSection-BWEgLKlr.js

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const r=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const o=String(s);return o==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:o})}},{key:"description",label:"Description"}],a=[{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."},{prop:"className",type:"string",default:"undefined",description:"Custom className for the button."}];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:"ScrollToTop"}),e.jsx(t.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(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 Usage"}),e.jsx(t.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(t.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(t.Typography,{tag:"p",className:"text-sm",children:"Scroll down on this page to see the button appear in the bottom-right corner."})})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Custom Position"}),e.jsx(t.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(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"top-left:"})," ",e.jsx("code",{children:"<ScrollToTop top={20} left={20} />"})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"top-right:"})," ",e.jsx("code",{children:"<ScrollToTop top={20} right={20} />"})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"bottom-left:"})," ",e.jsx("code",{children:"<ScrollToTop bottom={20} left={20} />"})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"bottom-right:"})," ",e.jsx("code",{children:"<ScrollToTop bottom={20} right={20} />"})]})]})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Custom Size and Threshold"}),e.jsx(t.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(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Small button:"})," ",e.jsx("code",{children:'<ScrollToTop size="small" />'})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Large button:"})," ",e.jsx("code",{children:'<ScrollToTop size="large" />'})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Show after 200px:"})," ",e.jsx("code",{children:"<ScrollToTop showAfter={200} />"})]})]})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:r,data:a})})})}),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 { 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=l;

package/ScrollToTopSection-CXx2x8gR.mjs

@@ -0,0 +1,193 @@
+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-Hq6IUBmn.mjs";
+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" }),
+    /* @__PURE__ */ e(
+      t,
+      {
+        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."
+      }
+    )
+  ] }),
+  /* @__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(
+        t,
+        {
+          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__ */ 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__ */ e("code", { className: "text-brand", children: "top-left:" }),
+          " ",
+          /* @__PURE__ */ e("code", { children: "<ScrollToTop top={20} left={20} />" })
+        ] }),
+        /* @__PURE__ */ o(t, { 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__ */ e("code", { className: "text-brand", children: "bottom-left:" }),
+          " ",
+          /* @__PURE__ */ e("code", { children: "<ScrollToTop bottom={20} left={20} />" })
+        ] }),
+        /* @__PURE__ */ o(t, { 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__ */ e("code", { className: "text-brand", children: "Small button:" }),
+          " ",
+          /* @__PURE__ */ e("code", { children: '<ScrollToTop size="small" />' })
+        ] }),
+        /* @__PURE__ */ o(t, { 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__ */ e("code", { className: "text-brand", children: "Show after 200px:" }),
+          " ",
+          /* @__PURE__ */ e("code", { children: "<ScrollToTop showAfter={200} />" })
+        ] })
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__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."
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "undefined",
+      description: "Custom className for the button."
+    }
+  ] }) }) }) }),
+  /* @__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,
+    {
+      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 {
+  x as default
+};

package/ScrollbarSection-DsoKO-RW.js

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const t=[{key:"prop",label:"Prop",render:l=>e.jsx("code",{className:"text-xs text-brand",children:String(l)})},{key:"type",label:"Type",render:l=>e.jsx("code",{className:"text-xs",children:String(l)})},{key:"default",label:"Default",render:l=>{const a=String(l);return a==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:a})}},{key:"description",label:"Description"}],c=[{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display inside the scrollbar"},{prop:"autoHide",type:"'never' | 'scroll' | 'leave' | 'move'",default:"'scroll'",description:"When to hide the scrollbar"},{prop:"direction",type:"'horizontal' | 'vertical' | 'both'",default:"'vertical'",description:"Scroll direction"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"},{prop:"scrollbarStyle",type:"{ track?: CSSProperties; thumb?: CSSProperties }",default:"-",description:"Custom styles for scrollbar track and thumb"}],s=Array.from({length:20},(l,a)=>e.jsx("div",{className:"p-4 border-b",children:e.jsxs(r.Typography,{tag:"p",children:["Content item ",a+1]})},a));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:s.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:s.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:s.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:s.slice(0,10)})})]})]})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.BasicTable,{columns:t,data:c})})})}),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;