import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
import { H as o, C as s, a as t, T as l, Y as i, P as p, A as r, c as d } from "../index-sdOMz8GW.js";
import { ChevronsUpDown as h } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const b = () => /* @__PURE__ */ a(c, { children: [
  /* @__PURE__ */ e(
    o,
    {
      title: "Collapse",
      description: `A collapsible content panel component with smooth animations for
          showing and hiding content.`,
      icon: /* @__PURE__ */ e("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: /* @__PURE__ */ e(h, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { 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(s, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Basic Collapse" }),
      /* @__PURE__ */ e(i, { label: "Click to expand", children: /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(l, { tag: "p", children: "This is the content that appears when the collapse is expanded." }) }) })
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Initially Open" }),
      /* @__PURE__ */ e(i, { label: "Pre-expanded", initialOpen: !0, children: /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(l, { tag: "p", children: "This collapse starts in the open state." }) }) })
    ] }),
    /* @__PURE__ */ a(s, { className: "p-4", children: [
      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Rich Content" }),
      /* @__PURE__ */ e(i, { label: "Rich Content Example", children: /* @__PURE__ */ a("div", { className: "p-4 space-y-2", children: [
        /* @__PURE__ */ e(l, { tag: "p", className: "font-semibold", children: "Section Title" }),
        /* @__PURE__ */ e(l, { tag: "p", children: "This collapse can contain any React content including images, lists, and other components." }),
        /* @__PURE__ */ a("ul", { className: "list-disc list-inside", children: [
          /* @__PURE__ */ e("li", { children: "Item 1" }),
          /* @__PURE__ */ e("li", { children: "Item 2" }),
          /* @__PURE__ */ e("li", { children: "Item 3" })
        ] })
      ] }) })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(
    p,
    {
      componentName: "Collapse",
      defaultValues: { label: "Click to expand", initialOpen: !1 },
      children: (n) => /* @__PURE__ */ e(i, { ...n, children: /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400 p-4", children: "This is the collapsed content that can be expanded." }) })
    }
  ),
  /* @__PURE__ */ e(r, { componentName: "Collapse" }),
  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { 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 { 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>`
    }
  ) }) }) })
] });
export {
  b as default
};
