import { jsxs as r, Fragment as w, jsx as e } from "react/jsx-runtime";
import { useState as a } from "react";
import { H as u, C as s, a as p, T as i, x as c, a5 as o, P as f, A as g, c as O } from "../index-sdOMz8GW.js";
import { PanelRightOpen as b } from "lucide-react";
import "react-router-dom";
import "react-dom";
const x = () => {
  const [n, t] = a(!1), [m, l] = a(!1), [, d] = a("sidebar");
  return /* @__PURE__ */ r(w, { children: [
    /* @__PURE__ */ e(
      u,
      {
        title: "Drawer",
        description: `A drawer component that slides in from the side, supporting both
          simple sidebar and sidebar-menu variants.`,
        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-amber-600 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { 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(p, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
      /* @__PURE__ */ r(s, { className: "p-4", children: [
        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Left Position" }),
        /* @__PURE__ */ e(
          c,
          {
            onClick: () => {
              d("sidebar"), t(!0);
            },
            children: "Open Left Drawer"
          }
        ),
        /* @__PURE__ */ e(
          o,
          {
            isOpen: n,
            setIsOpen: t,
            type: "sidebar",
            title: "Sidebar Title",
            position: "left",
            children: /* @__PURE__ */ e(i, { tag: "p", children: "Sidebar content goes here" })
          }
        )
      ] }),
      /* @__PURE__ */ r(s, { className: "p-4", children: [
        /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Right Position" }),
        /* @__PURE__ */ e(
          c,
          {
            onClick: () => {
              d("sidebar"), l(!0);
            },
            children: "Open Right Drawer"
          }
        ),
        /* @__PURE__ */ e(
          o,
          {
            isOpen: m,
            setIsOpen: l,
            type: "sidebar",
            position: "right",
            title: "Right Drawer",
            children: /* @__PURE__ */ e(i, { tag: "p", children: "Content on the right" })
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      f,
      {
        componentName: "Drawer",
        defaultValues: {
          isOpen: n,
          setIsOpen: t,
          position: "left",
          backdrop: !0
        },
        excludeProps: [
          "setIsOpen",
          "onClose",
          "actionContent",
          "logo",
          "menuItems",
          "type"
        ],
        children: (h) => /* @__PURE__ */ e(
          "div",
          {
            style: { position: "relative", height: 300, overflow: "hidden" },
            children: /* @__PURE__ */ e(
              o,
              {
                ...h,
                setIsOpen: t,
                isOpen: n,
                title: "Drawer Preview",
                children: /* @__PURE__ */ e("p", { className: "text-sm p-4", children: "Drawer content" })
              }
            )
          }
        )
      }
    ),
    /* @__PURE__ */ e(g, { componentName: "Drawer" }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(p, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      O,
      {
        language: "tsx",
        code: `import { Drawer, Button } from '@e-burgos/tucu-ui';
import { useState } from 'react';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
      <Drawer
        isOpen={isOpen}
        setIsOpen={setIsOpen}
        type="sidebar"
        title="Drawer Title"
      >
        <div>Drawer content</div>
      </Drawer>
    </>
  );
}

// Right position
<Drawer
  isOpen={isOpen}
  setIsOpen={setIsOpen}
  type="sidebar"
  position="right"
  title="Right Drawer"
>
  <div>Content</div>
</Drawer>

// Without backdrop
<Drawer
  isOpen={isOpen}
  setIsOpen={setIsOpen}
  type="sidebar"
  backdrop={false}
>
  <div>Content</div>
</Drawer>`
      }
    ) }) }) })
  ] });
};
export {
  x as default
};
