import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
import { useState as g } from "react";
import { H as x, C as h, a as f, bE as o, T as u, c as w, P as C, A as N } from "../index-sdOMz8GW.js";
import { AppWindow as v, RotateCcw as y } from "lucide-react";
import "react-router-dom";
import "react-dom";
function d({ onClick: i }) {
  return /* @__PURE__ */ t(
    "button",
    {
      type: "button",
      onClick: i,
      className: "mt-3 flex items-center gap-2 rounded-lg bg-(--color-brand) px-3 py-1.5 text-[13px] font-medium text-white transition-opacity hover:opacity-80",
      children: [
        /* @__PURE__ */ e(y, { className: "h-3.5 w-3.5" }),
        "Restore Window"
      ]
    }
  );
}
function n() {
  const [i, a] = g(0), [s, l] = g(!1);
  return { key: i, closed: s, onClose: () => l(!0), restore: () => {
    l(!1), a((r) => r + 1);
  } };
}
const L = () => {
  const i = n(), a = n(), s = n(), l = n(), c = n(), m = n(), r = n();
  return /* @__PURE__ */ t(p, { children: [
    /* @__PURE__ */ e(
      x,
      {
        title: "Window",
        description: "Liquid Glass window with translucent title bar, traffic lights, and optional resize handles. Supports close, minimize, fullscreen, and portal rendering.",
        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-slate-500 via-indigo-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-slate-500/50", children: /* @__PURE__ */ e(v, { 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(h, { children: /* @__PURE__ */ e(f, { title: "Default Window", className: "mt-2 mb-2", children: /* @__PURE__ */ t(
      "div",
      {
        className: "relative w-full overflow-hidden rounded-xl bg-linear-to-br from-blue-500/20 to-purple-500/20 p-8",
        style: { minHeight: 320 },
        children: [
          /* @__PURE__ */ e(
            o,
            {
              title: "Liquid Glass Window",
              width: 420,
              defaultState: i.closed ? "closed" : "normal",
              onClose: i.onClose,
              children: /* @__PURE__ */ t("div", { className: "p-6 text-sm text-(--macos-tahoe-text)", children: [
                /* @__PURE__ */ e("p", { className: "mb-2 font-medium", children: "Glass Material Window" }),
                /* @__PURE__ */ t("p", { className: "text-[12px] text-(--macos-tahoe-text-muted) leading-relaxed", children: [
                  "This window uses ",
                  /* @__PURE__ */ e("code", { children: "--macos-glass-regular-bg" }),
                  " for its translucent background and ",
                  /* @__PURE__ */ e("code", { children: "--macos-glass-clear-bg" }),
                  " ",
                  "for the title bar, creating the characteristic Tahoe layered glass effect."
                ] })
              ] })
            },
            i.key
          ),
          i.closed && /* @__PURE__ */ e(d, { onClick: i.restore })
        ]
      }
    ) }) }),
    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ t(f, { title: "Traffic Lights Behavior", className: "mt-2 mb-2", children: [
      /* @__PURE__ */ t(
        u,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
          children: [
            "🔴 Close hides the window  ·  🟡 Minimize collapses to header only  ·  🟢 Maximize restores or toggles fullscreen (with ",
            /* @__PURE__ */ e("code", { children: "fullSize" }),
            "). Use ",
            /* @__PURE__ */ e("code", { children: "defaultState" }),
            " to restore programmatically."
          ]
        }
      ),
      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
        /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-indigo-500/20 to-blue-500/20 p-6", children: [
          /* @__PURE__ */ e(
            o,
            {
              title: "Try the buttons",
              width: "100%",
              fullSize: !0,
              defaultState: a.closed ? "closed" : "normal",
              onClose: a.onClose,
              children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Click 🔴 to close, 🟡 to minimize, 🟢 to fullscreen." })
            },
            a.key
          ),
          a.closed && /* @__PURE__ */ e(d, { onClick: a.restore })
        ] }),
        /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-teal-500/20 to-green-500/20 p-6", children: [
          /* @__PURE__ */ e(
            o,
            {
              title: "Disabled Close",
              width: "100%",
              disableClose: !0,
              defaultState: s.closed ? "closed" : "normal",
              onClose: s.onClose,
              children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "The close button is disabled. Minimize and maximize still work." })
            },
            s.key
          ),
          s.closed && /* @__PURE__ */ e(d, { onClick: s.restore })
        ] })
      ] })
    ] }) }),
    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(f, { title: "Traffic Lights Positions", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
      /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-indigo-500/20 to-blue-500/20 p-6", children: [
        /* @__PURE__ */ e(
          o,
          {
            title: "Left (default)",
            width: "100%",
            defaultState: l.closed ? "closed" : "normal",
            onClose: l.onClose,
            children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Traffic lights on the left side." })
          },
          l.key
        ),
        l.closed && /* @__PURE__ */ e(d, { onClick: l.restore })
      ] }),
      /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-teal-500/20 to-green-500/20 p-6", children: [
        /* @__PURE__ */ e(
          o,
          {
            title: "Right",
            width: "100%",
            trafficLightsPosition: "right",
            defaultState: c.closed ? "closed" : "normal",
            onClose: c.onClose,
            children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Traffic lights on the right side." })
          },
          c.key
        ),
        c.closed && /* @__PURE__ */ e(d, { onClick: c.restore })
      ] })
    ] }) }) }),
    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(f, { title: "No Traffic Lights", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "rounded-xl bg-linear-to-br from-amber-500/20 to-orange-500/20 p-6", children: [
      /* @__PURE__ */ e(
        o,
        {
          title: "Clean Window",
          width: 360,
          showTrafficLights: !1,
          defaultState: m.closed ? "closed" : "normal",
          onClose: m.onClose,
          children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Window without traffic light controls — ideal for utility panels or embedded views." })
        },
        m.key
      ),
      m.closed && /* @__PURE__ */ e(d, { onClick: m.restore })
    ] }) }) }),
    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ t(f, { title: "Draggable Window", className: "mt-2 mb-2", children: [
      /* @__PURE__ */ t(
        u,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
          children: [
            "With ",
            /* @__PURE__ */ e("code", { children: "draggable" }),
            ", grab the title bar to move the window freely across the viewport. It automatically portals when dragged."
          ]
        }
      ),
      /* @__PURE__ */ t(
        "div",
        {
          className: "relative w-full overflow-hidden rounded-xl bg-linear-to-br from-rose-500/20 to-pink-500/20 p-8",
          style: { minHeight: 280 },
          children: [
            /* @__PURE__ */ e(
              o,
              {
                title: "Drag me!",
                width: 380,
                draggable: !0,
                defaultState: r.closed ? "closed" : "normal",
                onClose: r.onClose,
                children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Grab the title bar and drag this window anywhere on the screen." })
              },
              r.key
            ),
            r.closed && /* @__PURE__ */ e(d, { onClick: r.restore })
          ]
        }
      )
    ] }) }),
    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(f, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e(
      w,
      {
        code: `import { MacOSTahoeWindow } from '@e-burgos/tucu-ui';

<MacOSTahoeWindow
  title="My Window"
  showTrafficLights
  trafficLightsPosition="left"   // 'left' | 'right'
  resizable
  fullSize                        // 🟢 second click = fullscreen
  portal                          // renders via portal
  defaultState="normal"           // 'normal' | 'minimized' | 'fullscreen' | 'closed'
  width={480}
  height={320}
  minWidth={200}
  minHeight={120}
  disableClose                    // disable 🔴
  disableMinimize                 // disable 🟡
  disableMaximize                 // disable 🟢
  draggable                        // drag by title bar
  onClose={() => setClosed(true)}
  onMinimize={() => console.log('minimize')}
  onMaximize={() => console.log('maximize')}
>
  <div className="p-6">Window content</div>
</MacOSTahoeWindow>`,
        language: "tsx"
      }
    ) }) }),
    /* @__PURE__ */ e(
      C,
      {
        componentName: "MacOSTahoeWindow",
        defaultValues: {
          title: "My Window",
          defaultState: "normal",
          trafficLightsPosition: "left",
          showTrafficLights: !0,
          disableClose: !1,
          disableMinimize: !1,
          disableMaximize: !1,
          draggable: !1,
          fullSize: !1,
          resizable: !1,
          portal: !1,
          width: 380,
          minWidth: 200,
          minHeight: 120
        },
        includeProps: [
          "title",
          "defaultState",
          "trafficLightsPosition",
          "showTrafficLights",
          "disableClose",
          "disableMinimize",
          "disableMaximize",
          "draggable",
          "fullSize",
          "resizable",
          "portal",
          "width",
          "minWidth",
          "minHeight"
        ],
        excludeProps: [
          "className",
          "height",
          "titleBarClassName",
          "onClose",
          "onMinimize",
          "onMaximize"
        ],
        children: (b) => /* @__PURE__ */ e(
          "div",
          {
            className: "relative rounded-xl bg-linear-to-br from-slate-500/20 to-indigo-500/20 p-8",
            style: { minHeight: 220 },
            children: /* @__PURE__ */ e(o, { ...b, children: /* @__PURE__ */ e("div", { className: "p-4 text-[13px] text-(--macos-tahoe-text)", children: "Interactive window — adjust props above." }) })
          }
        )
      }
    ),
    /* @__PURE__ */ e(N, { componentName: "MacOSTahoeWindow" })
  ] });
};
export {
  L as TahoeWindowSection,
  L as default
};
