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