@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/documentation/RevealContentSection-CE7RMGJq.js

@@ -1,80 +0,0 @@
-import { jsxs as a, Fragment as r, jsx as e } from "react/jsx-runtime";
-import { H as h, C as n, a as o, T as t, au as l, P as d, A as c, c as p } from "../index-DYDFy1df.js";
-import { Eye as m } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const x = () => {
-  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(r, { children: [
-    /* @__PURE__ */ e(
-      h,
-      {
-        title: "RevealContent",
-        description: 'A component that automatically collapses long content and provides a "Show More" / "Show Less" button.',
-        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-sky-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(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__ */ 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(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(l, { defaultHeight: 150, children: i })
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(
-      d,
-      {
-        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(
-      p,
-      {
-        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 {
-  x as default
-};

package/documentation/RevealContentSection-GfXzu3Ol.js

@@ -1,21 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-COp_AWCS.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{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.jsx(t.HeroCard,{title:"RevealContent",description:'A component that automatically collapses long content and provides a "Show More" / "Show Less" button.',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-sky-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Eye,{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(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=l;

package/documentation/RouteConfigurationSection-B8L9XluH.js

@@ -1,88 +0,0 @@
-import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
-import { H as s, T as n, C as o, a, c as i } from "../index-DYDFy1df.js";
-import { Settings as m } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const I = () => /* @__PURE__ */ t(r, { children: [
-  /* @__PURE__ */ e(
-    s,
-    {
-      title: "Route Configuration",
-      description: "Define routes using the StandaloneAppRoutesMenuItem interface. Each menu item automatically becomes a navigable route with sidebar entry.",
-      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ t("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(n, { tag: "h2", className: "mb-2", children: "StandaloneAppRoutesMenuItem Interface" }),
-      /* @__PURE__ */ e(
-        n,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Type-safe route definition extending IMenuItem"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(a, { title: "Interface Definition", children: /* @__PURE__ */ e(i, { language: "TS", code: `interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
-  component: React.JSX.Element;    // The component to render
-  isPublic?: boolean;              // If true, accessible without authentication
-  enableNestedRoutes?: boolean;    // Adds /* to path for nested routing
-  dropdownItems?: StandaloneAppRoutesMenuItem[]; // Nested 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 menu
-  isActive?: boolean;              // Force active state
-  onClick?: () => void;            // Optional click handler
-}` }) }) })
-  ] }),
-  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ t("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(n, { tag: "h2", className: "mb-2", children: "Basic Usage" }),
-      /* @__PURE__ */ e(
-        n,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Simple standalone app with automatic route generation"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(a, { title: "ThemeProvider with menuItems", children: /* @__PURE__ */ e(i, { language: "tsx", code: `import { ThemeProvider } from '@e-burgos/tucu-ui';
-import { Introduction } from './pages/Introduction';
-import { ThemingGuide } from './pages/ThemingGuide';
-
-const menuItems: StandaloneAppRoutesMenuItem[] = [
-  {
-    name: 'Introduction',
-    path: '/',
-    icon: <LucideIcons.Home />,
-    component: <Introduction />,
-  },
-  {
-    name: 'Theming',
-    path: '/theming-guide',
-    icon: <LucideIcons.Paintbrush />,
-    component: <ThemingGuide />,
-  },
-];
-
-function App() {
-  return (
-    <ThemeProvider
-      menuItems={menuItems}
-      logo={{ name: 'My', secondName: 'App' }}
-    />
-  );
-}` }) }) })
-  ] })
-] });
-export {
-  I as default
-};

package/documentation/RouteConfigurationSection-BYS8XsJC.js

@@ -1,42 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-COp_AWCS.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Route Configuration",description:"Define routes using the StandaloneAppRoutesMenuItem interface. Each menu item automatically becomes a navigable route with sidebar entry.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(n.Settings,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"StandaloneAppRoutesMenuItem Interface"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Type-safe route definition extending IMenuItem"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Interface Definition",children:e.jsx(t.CodeBlock,{language:"TS",code:`interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
-  component: React.JSX.Element;    // The component to render
-  isPublic?: boolean;              // If true, accessible without authentication
-  enableNestedRoutes?: boolean;    // Adds /* to path for nested routing
-  dropdownItems?: StandaloneAppRoutesMenuItem[]; // Nested 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 menu
-  isActive?: boolean;              // Force active state
-  onClick?: () => void;            // Optional click handler
-}`})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Basic Usage"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Simple standalone app with automatic route generation"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"ThemeProvider with menuItems",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider } from '@e-burgos/tucu-ui';
-import { Introduction } from './pages/Introduction';
-import { ThemingGuide } from './pages/ThemingGuide';
-
-const menuItems: StandaloneAppRoutesMenuItem[] = [
-  {
-    name: 'Introduction',
-    path: '/',
-    icon: <LucideIcons.Home />,
-    component: <Introduction />,
-  },
-  {
-    name: 'Theming',
-    path: '/theming-guide',
-    icon: <LucideIcons.Paintbrush />,
-    component: <ThemingGuide />,
-  },
-];
-
-function App() {
-  return (
-    <ThemeProvider
-      menuItems={menuItems}
-      logo={{ name: 'My', secondName: 'App' }}
-    />
-  );
-}`})})})]})]});exports.default=o;

package/documentation/ScrollToTopSection-DKG5MWPc.js

@@ -1,38 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../index-COp_AWCS.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/ScrollToTopSection-yVHR_9Pk.js

@@ -1,141 +0,0 @@
-import { jsxs as t, Fragment as s, jsx as o } from "react/jsx-runtime";
-import { H as c, C as l, a as r, T as e, P as i, av as n, A as d, c as h } from "../index-DYDFy1df.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/ScrollbarSection-DQF_A8ik.js

@@ -1,103 +0,0 @@
-import { jsx as e, jsxs as l, Fragment as d } from "react/jsx-runtime";
-import { T as a, H as n, C as r, a as t, Z as c, P as m, A as h, c as p } from "../index-DYDFy1df.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-eY8OTJHe.js

@@ -1,30 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-COp_AWCS.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;