import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
import { useState as c } from "react";
import { H as d, C as i, a as o, T as s, z as r, P as p, A as u, c as h } from "../index-sdOMz8GW.js";
import { Menu as g } from "lucide-react";
import "react-router-dom";
import "react-dom";
const H = () => {
  const [l, t] = c(!1);
  return /* @__PURE__ */ a(m, { children: [
    /* @__PURE__ */ e(
      d,
      {
        title: "Hamburger",
        description: `An animated hamburger menu button component, perfect for mobile
          navigation menus.`,
        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-blue-600 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { 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(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { 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: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
      /* @__PURE__ */ a(i, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Closed State" }),
        /* @__PURE__ */ e(r, { isOpen: !1, onClick: () => t(!1) })
      ] }),
      /* @__PURE__ */ a(i, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Open State" }),
        /* @__PURE__ */ e(r, { isOpen: !0, onClick: () => t(!0) })
      ] }),
      /* @__PURE__ */ a(i, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Interactive Example" }),
        /* @__PURE__ */ e(r, { isOpen: l, onClick: () => t(!l) })
      ] }),
      /* @__PURE__ */ a(i, { className: "p-4", children: [
        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Different Variants" }),
        /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
          /* @__PURE__ */ e(r, { variant: "solid", color: "primary" }),
          /* @__PURE__ */ e(r, { variant: "ghost", color: "primary" }),
          /* @__PURE__ */ e(r, { variant: "transparent" })
        ] })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      p,
      {
        componentName: "Hamburger",
        defaultValues: {
          isOpen: !1,
          color: "primary",
          size: "medium",
          variant: "solid"
        },
        excludeProps: [
          "onClick",
          "aria-label",
          "aria-describedby",
          "tooltip",
          "tooltipArrow",
          "tooltipColor",
          "tooltipPlacement",
          "isLoading",
          "loaderSize",
          "loaderVariant",
          "fullWidth",
          "disabled"
        ],
        children: (n) => /* @__PURE__ */ e(r, { ...n })
      }
    ),
    /* @__PURE__ */ e(u, { componentName: "Hamburger" }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      h,
      {
        language: "tsx",
        code: `import { Hamburger } from '@e-burgos/tucu-ui';
import { useState } from 'react';

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

  return (
    <Hamburger
      isOpen={isOpen}
      onClick={() => setIsOpen(!isOpen)}
    />
  );
}

// With different variants
<Hamburger variant="solid" color="primary" />
<Hamburger variant="ghost" color="primary" />
<Hamburger variant="transparent" />`
      }
    ) }) }) })
  ] });
};
export {
  H as default
};
