import { jsxs as r, Fragment as d, jsx as e } from "react/jsx-runtime";
import { useState as c } from "react";
import { H as h, C as i, a as t, br as a, x as o, P as m, A as g, c as f } from "../index-sdOMz8GW.js";
import { AppWindow as p } from "lucide-react";
import "react-router-dom";
import "react-dom";
function u(l) {
  return /* @__PURE__ */ e(
    "div",
    {
      className: "relative rounded-xl bg-gray-100 dark:bg-gray-800/50 p-8",
      style: { minHeight: 220 },
      children: /* @__PURE__ */ e(a, { ...l, defaultWidth: l.defaultWidth ?? 380, children: /* @__PURE__ */ e("div", { className: "p-4 text-sm text-gray-700 dark:text-gray-300", children: "Interactive window — adjust props above." }) })
    }
  );
}
const W = () => {
  const [l, n] = c(!0);
  return /* @__PURE__ */ r(d, { children: [
    /* @__PURE__ */ e(
      h,
      {
        title: "Window",
        description: "A macOS-style window container with vibrancy title bar, traffic-light buttons, drag & resize support, maximize/minimize states, and optional action slots.",
        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-blue-500 via-indigo-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50", children: /* @__PURE__ */ e(p, { 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(
      t,
      {
        title: "Interactive — Drag, Resize, Maximize",
        className: "mt-2 mb-2",
        children: /* @__PURE__ */ e(
          "div",
          {
            className: "relative w-full overflow-hidden",
            style: { height: 400 },
            children: /* @__PURE__ */ e(
              a,
              {
                title: "Drag & Resize Me",
                defaultWidth: 420,
                defaultHeight: 220,
                children: /* @__PURE__ */ r("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: [
                  /* @__PURE__ */ e("p", { className: "mb-2 font-medium", children: "Try these interactions:" }),
                  /* @__PURE__ */ r("ul", { className: "list-disc pl-5 space-y-1 text-[12px]", children: [
                    /* @__PURE__ */ e("li", { children: "Drag the title bar to move the window" }),
                    /* @__PURE__ */ e("li", { children: "Drag any edge or corner to resize" }),
                    /* @__PURE__ */ e("li", { children: "Double-click the title bar to maximize" }),
                    /* @__PURE__ */ e("li", { children: "Click the green traffic light to maximize/restore" }),
                    /* @__PURE__ */ e("li", { children: "Click the yellow traffic light to restore default size" })
                  ] })
                ] })
              }
            )
          }
        )
      }
    ) }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(
      t,
      {
        title: "Traffic Lights — Left (default)",
        className: "mt-2 mb-2",
        children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
          a,
          {
            title: "My Application",
            draggable: !1,
            resizable: !1,
            onClose: () => alert("close"),
            children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Window content goes here. The title bar uses vibrancy material and the traffic lights appear on hover." })
          }
        ) })
      }
    ) }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Traffic Lights — Right", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      a,
      {
        title: "Settings",
        trafficLightsPosition: "right",
        draggable: !1,
        resizable: !1,
        children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Traffic lights positioned on the right side of the title bar." })
      }
    ) }) }) }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(
      t,
      {
        title: "Without Traffic Lights + Custom Actions",
        className: "mt-2 mb-2",
        children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
          a,
          {
            title: "Document",
            showTrafficLights: !1,
            draggable: !1,
            resizable: !1,
            actions: /* @__PURE__ */ e(o, { size: "mini", shape: "rounded", color: "info", children: "Save" }),
            children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Traffic lights hidden. A custom action button appears in the trailing slot." })
          }
        ) })
      }
    ) }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Toggle Visibility", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6 space-y-4", children: [
      /* @__PURE__ */ e(o, { onClick: () => n((s) => !s), children: l ? "Hide Window" : "Show Window" }),
      l && /* @__PURE__ */ e(
        a,
        {
          title: "Toggled Window",
          draggable: !1,
          resizable: !1,
          onClose: () => n(!1),
          children: /* @__PURE__ */ e("div", { className: "p-6 text-sm text-gray-700 dark:text-gray-300", children: "Click the red traffic light or the button above to close." })
        }
      )
    ] }) }) }),
    /* @__PURE__ */ e(
      m,
      {
        componentName: "MacOSWindow",
        defaultValues: {
          title: "My Window",
          draggable: !0,
          resizable: !0,
          showTrafficLights: !0,
          trafficLightsPosition: "left",
          defaultWidth: 380,
          defaultHeight: 200,
          minWidth: 200,
          minHeight: 120
        },
        controlOverrides: [
          {
            name: "title",
            type: "text",
            description: "Window title displayed in the title bar"
          },
          {
            name: "draggable",
            type: "boolean",
            description: "Allow drag-moving by the title bar"
          },
          {
            name: "resizable",
            type: "boolean",
            description: "Allow resizing from edges/corners"
          },
          {
            name: "showTrafficLights",
            type: "boolean",
            description: "Show close/minimize/maximize buttons"
          },
          {
            name: "trafficLightsPosition",
            type: "select",
            options: ["left", "right"],
            description: "Position of traffic light buttons"
          },
          {
            name: "defaultWidth",
            type: "text",
            description: "Initial width (px or CSS value)"
          },
          {
            name: "defaultHeight",
            type: "text",
            description: "Initial height (px or CSS value)"
          },
          {
            name: "minWidth",
            type: "text",
            description: "Minimum width in pixels"
          },
          {
            name: "minHeight",
            type: "text",
            description: "Minimum height in pixels"
          }
        ],
        includeProps: [
          "title",
          "draggable",
          "resizable",
          "showTrafficLights",
          "trafficLightsPosition",
          "defaultWidth",
          "defaultHeight",
          "minWidth",
          "minHeight"
        ],
        excludeProps: [
          "className",
          "titleBarClassName",
          "actions",
          "onClose",
          "onMinimize",
          "onMaximize"
        ],
        children: (s) => /* @__PURE__ */ e(u, { ...s })
      }
    ),
    /* @__PURE__ */ e(g, { componentName: "MacOSWindow" }),
    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { 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 { MacOSWindow } from '@e-burgos/tucu-ui';

// Interactive window — drag, resize, maximize
<MacOSWindow
  title="My Application"
  defaultWidth={500}
  defaultHeight={300}
  minWidth={200}
  minHeight={120}
>
  <div className="p-6">Drag, resize, or double-click title bar</div>
</MacOSWindow>

// Static window (no drag/resize)
<MacOSWindow title="Static" draggable={false} resizable={false}>
  <div className="p-6">Content</div>
</MacOSWindow>

// Traffic lights on the right
<MacOSWindow title="Settings" trafficLightsPosition="right">
  <div className="p-6">Content</div>
</MacOSWindow>`
      }
    ) }) }) })
  ] });
};
export {
  W as MacOSWindowSection,
  W as default
};
