"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DEZRGktf.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Sidebar",description:`A sidebar component with scrollable content, optional logo, title, and
          action buttons.`,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-orange-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.PanelLeftOpen,{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.jsx("div",{className:"space-y-4",children:e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Basic Sidebar"}),e.jsx(t.Typography,{tag:"p",className:"mb-4 text-sm text-gray-600",children:"Note: Sidebar is typically used within a Drawer component. This example shows the structure."}),e.jsx(t.Typography,{tag:"p",className:"text-sm",children:"The Sidebar component provides a scrollable container with optional header (logo or title) and action buttons at the bottom."})]})})})})}),e.jsx(t.PropPlayground,{componentName:"Sidebar",title:"Sidebar Playground",defaultValues:{title:"Sidebar",position:"left"},excludeProps:["onClose","actionContent","logo","className"],children:a=>e.jsx(t.Sidebar,{...a,onClose:()=>null,children:e.jsx(t.Typography,{tag:"p",children:"Sidebar content goes here"})})}),e.jsx(t.AutoPropsTable,{componentName:"Sidebar"}),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 { Sidebar } from '@e-burgos/tucu-ui';

// Basic usage (typically within Drawer)
<Sidebar title="Sidebar Title" onClose={() => setIsOpen(false)}>
  <div>
    <Typography tag="p">Sidebar content</Typography>
  </div>
</Sidebar>

// With logo
<Sidebar
  logo={{ name: 'MyApp' }}
  onClose={() => setIsOpen(false)}
>
  <div>Content</div>
</Sidebar>

// With action buttons
<Sidebar
  title="Sidebar"
  actionContent={<Button>Action</Button>}
  onClose={() => setIsOpen(false)}
>
  <div>Content</div>
</Sidebar>`})})})})]});exports.default=o;
