import { jsxs as n, Fragment as b, jsx as e } from "react/jsx-runtime";
import { useState as p } from "react";
import { H as v, C as i, a as c, bx as d, by as o, P as g, A as N, c as f } from "../index-sdOMz8GW.js";
import { MessageSquare as y, FilePlus as h, Clock as x, Save as C, Trash2 as m, Check as O, Lock as k, FolderOpen as w } from "lucide-react";
import "react-router-dom";
import "react-dom";
function P(r) {
  const [s, a] = p(!1);
  return /* @__PURE__ */ e("div", { className: "flex justify-center py-12", children: /* @__PURE__ */ e(
    d,
    {
      isOpen: s,
      onClose: () => a(!1),
      placement: r.placement,
      minWidth: r.minWidth,
      content: /* @__PURE__ */ n("div", { className: "py-1", children: [
        /* @__PURE__ */ e(
          o,
          {
            label: "New File",
            icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" }),
            shortcut: "⌘N",
            onClick: () => a(!1)
          }
        ),
        /* @__PURE__ */ e(
          o,
          {
            label: "Open",
            icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }),
            shortcut: "⌘O",
            onClick: () => a(!1)
          }
        ),
        /* @__PURE__ */ e(
          o,
          {
            label: "Delete",
            icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }),
            destructive: !0,
            onClick: () => a(!1)
          }
        )
      ] }),
      children: /* @__PURE__ */ n(
        "button",
        {
          onClick: () => a(!0),
          className: "rounded-lg border border-border px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
          children: [
            "Open Popover (",
            r.placement,
            ")"
          ]
        }
      )
    }
  ) });
}
const D = () => {
  const [r, s] = p(null), a = (l) => s((u) => u === l ? null : l), t = () => s(null);
  return /* @__PURE__ */ n(b, { children: [
    /* @__PURE__ */ e(
      v,
      {
        title: "Popover",
        description: "A macOS-style popover / context menu with backdrop blur, placement options, keyboard shortcuts, destructive styling, disabled items, and animated show/hide.",
        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-violet-500 via-purple-500 to-fuchsia-600 rounded-full flex items-center justify-center shadow-lg border border-violet-500/50", children: /* @__PURE__ */ e(y, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Context Menu", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 flex justify-center pb-40", children: /* @__PURE__ */ e(
      d,
      {
        isOpen: r === "context",
        onClose: t,
        placement: "bottom",
        content: /* @__PURE__ */ n("div", { className: "py-1", children: [
          /* @__PURE__ */ e(
            o,
            {
              label: "New File",
              icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" }),
              shortcut: "⌘N",
              onClick: t
            }
          ),
          /* @__PURE__ */ e(
            o,
            {
              label: "Open Recent",
              icon: /* @__PURE__ */ e(x, { className: "w-4 h-4" }),
              onClick: t
            }
          ),
          /* @__PURE__ */ e(
            o,
            {
              label: "Save As…",
              icon: /* @__PURE__ */ e(C, { className: "w-4 h-4" }),
              shortcut: "⌘⇧S",
              onClick: t
            }
          ),
          /* @__PURE__ */ e(
            o,
            {
              label: "Delete",
              icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }),
              destructive: !0,
              onClick: t
            }
          )
        ] }),
        children: /* @__PURE__ */ e(
          "button",
          {
            onClick: () => a("context"),
            className: "rounded-lg border border-border px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
            children: "Right-click Menu"
          }
        )
      }
    ) }) }) }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Four Placements", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-8 p-8", children: ["bottom", "top", "right", "left"].map(
      (l) => /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(
        d,
        {
          isOpen: r === l,
          onClose: t,
          placement: l,
          content: /* @__PURE__ */ n("div", { className: "py-1", children: [
            /* @__PURE__ */ e(o, { label: "Option A", onClick: t }),
            /* @__PURE__ */ e(o, { label: "Option B", onClick: t })
          ] }),
          children: /* @__PURE__ */ e(
            "button",
            {
              onClick: () => a(l),
              className: "rounded-lg border border-border px-3 py-2 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors capitalize",
              children: l
            }
          )
        }
      ) }, l)
    ) }) }) }) }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Disabled & Destructive Items", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 flex justify-center pb-40", children: /* @__PURE__ */ e(
      d,
      {
        isOpen: r === "disabled",
        onClose: t,
        content: /* @__PURE__ */ n("div", { className: "py-1", children: [
          /* @__PURE__ */ e(
            o,
            {
              label: "Available",
              icon: /* @__PURE__ */ e(O, { className: "w-4 h-4" }),
              onClick: t
            }
          ),
          /* @__PURE__ */ e(
            o,
            {
              label: "Unavailable",
              icon: /* @__PURE__ */ e(k, { className: "w-4 h-4" }),
              disabled: !0,
              onClick: t
            }
          ),
          /* @__PURE__ */ e(
            o,
            {
              label: "Delete",
              destructive: !0,
              icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }),
              onClick: t
            }
          )
        ] }),
        children: /* @__PURE__ */ e(
          "button",
          {
            onClick: () => a("disabled"),
            className: "rounded-lg border border-border px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
            children: "Show Popover"
          }
        )
      }
    ) }) }) }),
    /* @__PURE__ */ e(
      g,
      {
        componentName: "MacOSPopover",
        defaultValues: {
          placement: "bottom",
          minWidth: 200
        },
        controlOverrides: [
          {
            name: "placement",
            type: "select",
            options: ["top", "bottom", "left", "right"],
            description: "Popover placement relative to trigger"
          },
          {
            name: "minWidth",
            type: "text",
            description: "Minimum width in pixels"
          }
        ],
        includeProps: ["placement", "minWidth"],
        excludeProps: [
          "className",
          "contentClassName",
          "isOpen",
          "onClose",
          "content"
        ],
        children: (l) => /* @__PURE__ */ e(P, { ...l })
      }
    ),
    /* @__PURE__ */ e(N, { componentName: "MacOSPopover" }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      f,
      {
        language: "tsx",
        code: `import { MacOSPopover, MacOSPopoverItem } from '@e-burgos/tucu-ui';

function ContextMenu() {
  const [open, setOpen] = useState(false);

  return (
    <MacOSPopover
      isOpen={open}
      onClose={() => setOpen(false)}
      placement="bottom"   // 'top' | 'bottom' | 'left' | 'right'
      minWidth={200}
      content={
        <div className="py-1">
          <MacOSPopoverItem
            label="New File"
            icon={<FilePlusIcon />}
            shortcut="⌘N"
            onClick={() => setOpen(false)}
          />
          <MacOSPopoverItem
            label="Delete"
            icon={<TrashIcon />}
            destructive
            onClick={() => setOpen(false)}
          />
          <MacOSPopoverItem label="Admin Only" disabled />
        </div>
      }
    >
      <button onClick={() => setOpen(true)}>Open Menu</button>
    </MacOSPopover>
  );
}`
      }
    ) }) }) })
  ] });
};
export {
  D as MacOSPopoverSection,
  D as default
};
