@e-burgos/tucu-ui 2.0.2 → 2.0.4

package/documentation/RadioSection-BsXiDZ98.js

@@ -0,0 +1,130 @@
+import { jsxs as e, Fragment as c, jsx as a } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { T as i, C as s, a as d, t as l, A as m, c as h } from "../index-B6CStnMG.js";
+import "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const f = () => {
+  const [t, o] = n("");
+  return /* @__PURE__ */ e(c, { children: [
+    /* @__PURE__ */ e("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ a(i, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Radio" }),
+      /* @__PURE__ */ a(
+        i,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A single radio button component for binary choices."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ e(s, { className: "p-4", children: [
+        /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Basic Radio" }),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Option 1",
+            value: "option1",
+            checked: t === "option1",
+            onChange: (r) => o(r.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(s, { className: "p-4", children: [
+        /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ a(l, { label: "Disabled option", value: "disabled", disabled: !0 })
+      ] }),
+      /* @__PURE__ */ e(s, { className: "p-4", children: [
+        /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Different Colors" }),
+        /* @__PURE__ */ e("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ a(l, { label: "Primary", value: "primary", color: "primary" }),
+          /* @__PURE__ */ a(l, { label: "Danger", value: "danger", color: "danger" }),
+          /* @__PURE__ */ a(l, { label: "Success", value: "success", color: "success" })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(s, { className: "p-4", children: [
+        /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
+        /* @__PURE__ */ e("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ a(l, { label: "Small", value: "sm", size: "sm" }),
+          /* @__PURE__ */ a(l, { label: "Medium", value: "md", size: "md" }),
+          /* @__PURE__ */ a(l, { label: "Large", value: "lg", size: "lg" })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ e(s, { className: "p-4", children: [
+        /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Ghost Variant",
+            value: "ghost",
+            variant: "ghost",
+            checked: t === "ghost",
+            onChange: (r) => o(r.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(s, { className: "p-4", children: [
+        /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Solid" }),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Solid Variant",
+            value: "solid",
+            variant: "solid",
+            checked: t === "solid",
+            onChange: (r) => o(r.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(s, { className: "p-4", children: [
+        /* @__PURE__ */ a(i, { tag: "h5", className: "mb-3", children: "Transparent" }),
+        /* @__PURE__ */ a(
+          l,
+          {
+            label: "Transparent Variant",
+            value: "transparent",
+            variant: "transparent",
+            checked: t === "transparent",
+            onChange: (r) => o(r.target.value)
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ a(m, { componentName: "Radio" }),
+    /* @__PURE__ */ a(s, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+      h,
+      {
+        language: "tsx",
+        code: `import { Radio } from '@e-burgos/tucu-ui';
+
+<Radio
+  label="Option 1"
+  value="option1"
+  checked={value === 'option1'}
+  onChange={(e) => setValue(e.target.value)}
+/>
+
+// Variants
+<Radio label="Ghost" variant="ghost" value="ghost" />
+<Radio label="Solid" variant="solid" value="solid" />
+<Radio label="Transparent" variant="transparent" value="transparent" />
+
+// Colors
+<Radio label="Primary" color="primary" />
+<Radio label="Danger" color="danger" />
+<Radio label="Success" color="success" />
+
+// Sizes
+<Radio label="Small" size="sm" />
+<Radio label="Medium" size="md" />
+<Radio label="Large" size="lg" />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  f as default
+};

package/documentation/RadioSection-C1GS5cuC.js

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("react"),e=require("../index-QnI4b7wS.js");require("lucide-react");require("react-router-dom");require("react-dom");const o=()=>{const[l,r]=i.useState("");return a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"text-center space-y-4",children:[a.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Radio"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A single radio button component for binary choices."})]}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Basic Radio"}),a.jsx(e.Radio,{label:"Option 1",value:"option1",checked:l==="option1",onChange:s=>r(s.target.value)})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),a.jsx(e.Radio,{label:"Disabled option",value:"disabled",disabled:!0})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Different Colors"}),a.jsxs("div",{className:"space-y-2",children:[a.jsx(e.Radio,{label:"Primary",value:"primary",color:"primary"}),a.jsx(e.Radio,{label:"Danger",value:"danger",color:"danger"}),a.jsx(e.Radio,{label:"Success",value:"success",color:"success"})]})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Different Sizes"}),a.jsxs("div",{className:"space-y-2",children:[a.jsx(e.Radio,{label:"Small",value:"sm",size:"sm"}),a.jsx(e.Radio,{label:"Medium",value:"md",size:"md"}),a.jsx(e.Radio,{label:"Large",value:"lg",size:"lg"})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),a.jsx(e.Radio,{label:"Ghost Variant",value:"ghost",variant:"ghost",checked:l==="ghost",onChange:s=>r(s.target.value)})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),a.jsx(e.Radio,{label:"Solid Variant",value:"solid",variant:"solid",checked:l==="solid",onChange:s=>r(s.target.value)})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),a.jsx(e.Radio,{label:"Transparent Variant",value:"transparent",variant:"transparent",checked:l==="transparent",onChange:s=>r(s.target.value)})]})]})})})}),a.jsx(e.AutoPropsTable,{componentName:"Radio"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { Radio } from '@e-burgos/tucu-ui';
+
+<Radio
+  label="Option 1"
+  value="option1"
+  checked={value === 'option1'}
+  onChange={(e) => setValue(e.target.value)}
+/>
+
+// Variants
+<Radio label="Ghost" variant="ghost" value="ghost" />
+<Radio label="Solid" variant="solid" value="solid" />
+<Radio label="Transparent" variant="transparent" value="transparent" />
+
+// Colors
+<Radio label="Primary" color="primary" />
+<Radio label="Danger" color="danger" />
+<Radio label="Success" color="success" />
+
+// Sizes
+<Radio label="Small" size="sm" />
+<Radio label="Medium" size="md" />
+<Radio label="Large" size="lg" />`})})})})]})};exports.default=o;

package/{RevealContentSection-BtBQGgOW.mjs → documentation/RevealContentSection-BAIqcjgW.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, ar as l, P as h, A as c, c as d } from "../index-B6CStnMG.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-DzAyW5_3.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-QnI4b7wS.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-BJJSsQGy.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-B6CStnMG.js";
 import { Settings as i, Play as s } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{RouteConfigurationSection-BjLpTMvZ.js → documentation/RouteConfigurationSection-CjEKyhcb.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-QnI4b7wS.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-DkTL1Uzw.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, P as c, as as n, A as i, c as d } from "../index-B6CStnMG.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,24 @@ 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: "large",
+        showAfter: 400,
+        bottom: "45%",
+        right: 50,
+        behavior: "smooth"
+      },
+      excludeProps: ["scrollContainer"],
+      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 +138,5 @@ function App() {
   ) }) }) })
 ] });
 export {
-  x as default
+  T as default
 };

package/documentation/ScrollToTopSection-Dpp5zKo8.js

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../index-QnI4b7wS.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:"large",showAfter:400,bottom:"45%",right:50,behavior:"smooth"},excludeProps:["scrollContainer"],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;