@e-burgos/tucu-ui 2.0.1 → 2.0.3

package/RadioSection-MzFUkVtp.mjs

@@ -1,208 +0,0 @@
-import { jsxs as l, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { T as s, C as r, a as d, R as t, B as m, c as h } from "./index-DAzR4tRy.mjs";
-import "lucide-react";
-import "react-router-dom";
-import "react-dom";
-const R = () => {
-  const [i, o] = p("");
-  return /* @__PURE__ */ l(c, { children: [
-    /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(s, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Radio" }),
-      /* @__PURE__ */ e(
-        s,
-        {
-          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__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "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(s, { tag: "h5", className: "mb-3", children: "Basic Radio" }),
-        /* @__PURE__ */ e(
-          t,
-          {
-            label: "Option 1",
-            value: "option1",
-            checked: i === "option1",
-            onChange: (a) => o(a.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ l(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Disabled" }),
-        /* @__PURE__ */ e(t, { label: "Disabled option", value: "disabled", disabled: !0 })
-      ] }),
-      /* @__PURE__ */ l(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Different Colors" }),
-        /* @__PURE__ */ l("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ e(t, { label: "Primary", value: "primary", color: "primary" }),
-          /* @__PURE__ */ e(t, { label: "Danger", value: "danger", color: "danger" }),
-          /* @__PURE__ */ e(t, { label: "Success", value: "success", color: "success" })
-        ] })
-      ] }),
-      /* @__PURE__ */ l(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
-        /* @__PURE__ */ l("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ e(t, { label: "Small", value: "sm", size: "sm" }),
-          /* @__PURE__ */ e(t, { label: "Medium", value: "md", size: "md" }),
-          /* @__PURE__ */ e(t, { label: "Large", value: "lg", size: "lg" })
-        ] })
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Variants", 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-3 gap-4", children: [
-      /* @__PURE__ */ l(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
-        /* @__PURE__ */ e(
-          t,
-          {
-            label: "Ghost Variant",
-            value: "ghost",
-            variant: "ghost",
-            checked: i === "ghost",
-            onChange: (a) => o(a.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ l(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Solid" }),
-        /* @__PURE__ */ e(
-          t,
-          {
-            label: "Solid Variant",
-            value: "solid",
-            variant: "solid",
-            checked: i === "solid",
-            onChange: (a) => o(a.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ l(r, { className: "p-4", children: [
-        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Transparent" }),
-        /* @__PURE__ */ e(
-          t,
-          {
-            label: "Transparent Variant",
-            value: "transparent",
-            variant: "transparent",
-            checked: i === "transparent",
-            onChange: (a) => o(a.target.value)
-          }
-        )
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(m, { columns: [
-      {
-        key: "prop",
-        label: "Prop",
-        render: (a) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(a) })
-      },
-      {
-        key: "type",
-        label: "Type",
-        render: (a) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(a) })
-      },
-      {
-        key: "default",
-        label: "Default",
-        render: (a) => {
-          const n = String(a);
-          return n === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: n });
-        }
-      },
-      {
-        key: "description",
-        label: "Description"
-      }
-    ], data: [
-      {
-        prop: "label",
-        type: "React.ReactNode",
-        default: "-",
-        description: "Radio button label"
-      },
-      {
-        prop: "value",
-        type: "string",
-        default: "required",
-        description: "Radio button value"
-      },
-      {
-        prop: "variant",
-        type: "'ghost' | 'solid' | 'transparent'",
-        default: "'ghost'",
-        description: "Visual variant of the radio button"
-      },
-      {
-        prop: "size",
-        type: "'sm' | 'md' | 'lg' | 'xl'",
-        default: "'md'",
-        description: "Size of the radio button"
-      },
-      {
-        prop: "color",
-        type: "'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",
-        default: "'primary'",
-        description: "Color theme of the radio button"
-      },
-      {
-        prop: "disabled",
-        type: "boolean",
-        default: "false",
-        description: "Disables the radio button"
-      },
-      {
-        prop: "labelPlacement",
-        type: "'start' | 'end'",
-        default: "'end'",
-        description: "Position of the label relative to the radio"
-      },
-      {
-        prop: "error",
-        type: "string",
-        default: "-",
-        description: "Error message to display"
-      },
-      {
-        prop: "helperText",
-        type: "React.ReactNode",
-        default: "-",
-        description: "Helper text displayed below the radio"
-      }
-    ] }) }) }) }),
-    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      h,
-      {
-        language: "tsx",
-        code: `import { 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 {
-  R as default
-};

package/RevealContentSection-DElW6lsZ.js

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

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

@@ -1,146 +0,0 @@
-import { jsx as e, jsxs as l, Fragment as m } from "react/jsx-runtime";
-import { T as r, C as a, a as o, J as i, B as h, c as p } from "./index-DAzR4tRy.mjs";
-import "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const S = () => {
-  const d = [
-    {
-      key: "prop",
-      label: "Prop",
-      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(t) })
-    },
-    {
-      key: "type",
-      label: "Type",
-      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
-    },
-    {
-      key: "default",
-      label: "Default",
-      render: (t) => {
-        const s = String(t);
-        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"
-    }
-  ], n = [
-    {
-      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"
-    }
-  ], c = Array.from({ length: 20 }, (t, s) => /* @__PURE__ */ e("div", { className: "p-4 border-b", children: /* @__PURE__ */ l(r, { tag: "p", children: [
-    "Content item ",
-    s + 1
-  ] }) }, s));
-  return /* @__PURE__ */ l(m, { children: [
-    /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Scrollbar" }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "A customizable scrollbar component with auto-hide functionality and custom styling options."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Vertical Scrollbar" }),
-        /* @__PURE__ */ e(i, { className: "h-48", children: /* @__PURE__ */ e("div", { children: c.slice(0, 10) }) })
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Auto Hide on Leave" }),
-        /* @__PURE__ */ e(i, { className: "h-48", autoHide: "leave", children: /* @__PURE__ */ e("div", { children: c.slice(0, 10) }) })
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Never Hide" }),
-        /* @__PURE__ */ e(i, { className: "h-48", autoHide: "never", children: /* @__PURE__ */ e("div", { children: c.slice(0, 10) }) })
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Custom Styled" }),
-        /* @__PURE__ */ e(
-          i,
-          {
-            className: "h-48",
-            scrollbarStyle: {
-              track: { backgroundColor: "transparent" },
-              thumb: { borderRadius: "8px", width: "8px" }
-            },
-            children: /* @__PURE__ */ e("div", { children: c.slice(0, 10) })
-          }
-        )
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(h, { columns: d, data: n }) }) }) }),
-    /* @__PURE__ */ e(a, { 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 { 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 {
-  S as default
-};

package/ScrollbarSection-uGGRCW-f.js

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