"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DEZRGktf.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Collapse",description:`A collapsible content panel component with smooth animations for
          showing and hiding content.`,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-emerald-600 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.ChevronsUpDown,{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(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.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(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Collapse"}),e.jsx(a.Collapse,{label:"Click to expand",children:e.jsx("div",{className:"p-4",children:e.jsx(a.Typography,{tag:"p",children:"This is the content that appears when the collapse is expanded."})})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Initially Open"}),e.jsx(a.Collapse,{label:"Pre-expanded",initialOpen:!0,children:e.jsx("div",{className:"p-4",children:e.jsx(a.Typography,{tag:"p",children:"This collapse starts in the open state."})})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Rich Content"}),e.jsx(a.Collapse,{label:"Rich Content Example",children:e.jsxs("div",{className:"p-4 space-y-2",children:[e.jsx(a.Typography,{tag:"p",className:"font-semibold",children:"Section Title"}),e.jsx(a.Typography,{tag:"p",children:"This collapse can contain any React content including images, lists, and other components."}),e.jsxs("ul",{className:"list-disc list-inside",children:[e.jsx("li",{children:"Item 1"}),e.jsx("li",{children:"Item 2"}),e.jsx("li",{children:"Item 3"})]})]})})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"Collapse",defaultValues:{label:"Click to expand",initialOpen:!1},children:l=>e.jsx(a.Collapse,{...l,children:e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400 p-4",children:"This is the collapsed content that can be expanded."})})}),e.jsx(a.AutoPropsTable,{componentName:"Collapse"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { Collapse, Typography } from '@e-burgos/tucu-ui';

// Basic usage
<Collapse label="Click to expand">
  <div className="p-4">
    <Typography tag="p">Content here</Typography>
  </div>
</Collapse>

// Initially open
<Collapse label="Pre-expanded" initialOpen>
  <div className="p-4">
    <Typography tag="p">Content starts visible</Typography>
  </div>
</Collapse>

// With rich content
<Collapse label="Rich Content">
  <div className="p-4 space-y-2">
    <Typography tag="p" className="font-semibold">Title</Typography>
    <Typography tag="p">Description</Typography>
    <ul className="list-disc list-inside">
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</Collapse>`})})})})]});exports.default=i;
