import { jsxs as o, Fragment as s, jsx as e } from "react/jsx-runtime";
import { H as r, C as t, a as i, T as a, P as n, a6 as d, A as c, c as m } from "../index-sdOMz8GW.js";
import { PanelLeftOpen as p } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const f = () => /* @__PURE__ */ o(s, { children: [
  /* @__PURE__ */ e(
    r,
    {
      title: "Sidebar",
      description: `A sidebar component with scrollable content, optional logo, title, and
          action buttons.`,
      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-orange-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { 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(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ o(t, { className: "p-4", children: [
    /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic Sidebar" }),
    /* @__PURE__ */ e(a, { 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." }),
    /* @__PURE__ */ e(a, { 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." })
  ] }) }) }) }) }),
  /* @__PURE__ */ e(
    n,
    {
      componentName: "Sidebar",
      title: "Sidebar Playground",
      defaultValues: {
        title: "Sidebar",
        position: "left"
      },
      excludeProps: ["onClose", "actionContent", "logo", "className"],
      children: (l) => /* @__PURE__ */ e(d, { ...l, onClose: () => null, children: /* @__PURE__ */ e(a, { tag: "p", children: "Sidebar content goes here" }) })
    }
  ),
  /* @__PURE__ */ e(c, { componentName: "Sidebar" }),
  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    m,
    {
      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>`
    }
  ) }) }) })
] });
export {
  f as default
};
