@e-burgos/tucu-ui 2.6.0 → 2.7.1

package/components/macos/sonoma/containers/window.mjs

@@ -0,0 +1,373 @@
+import { jsxs as N, Fragment as he, jsx as t } from "react/jsx-runtime";
+import { useRef as w, useState as f, useCallback as k, useEffect as oe } from "react";
+import s from "classnames";
+function re({
+  onClose: D,
+  onMinimize: L,
+  onMaximize: S
+}) {
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      "data-tucu": "traffic-lights",
+      className: "group flex items-center gap-[8px]",
+      children: [
+        /* @__PURE__ */ t(
+          "button",
+          {
+            "data-tucu": "traffic-light",
+            "data-type": "close",
+            onClick: D,
+            "aria-label": "Close",
+            className: s(
+              "flex h-[12px] w-[12px] items-center justify-center rounded-full transition-[filter]",
+              "bg-[var(--macos-traffic-close)] hover:brightness-90"
+            ),
+            children: /* @__PURE__ */ t(
+              "svg",
+              {
+                className: "hidden group-hover:block",
+                width: "6",
+                height: "6",
+                viewBox: "0 0 6 6",
+                fill: "none",
+                stroke: "rgba(0,0,0,0.5)",
+                strokeWidth: "1.2",
+                strokeLinecap: "round",
+                children: /* @__PURE__ */ t("path", { d: "M1 1l4 4M5 1L1 5" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            "data-tucu": "traffic-light",
+            "data-type": "minimize",
+            onClick: L,
+            "aria-label": "Minimize",
+            className: s(
+              "flex h-[12px] w-[12px] items-center justify-center rounded-full transition-[filter]",
+              "bg-[var(--macos-traffic-minimize)] hover:brightness-90"
+            ),
+            children: /* @__PURE__ */ t(
+              "svg",
+              {
+                className: "hidden group-hover:block",
+                width: "6",
+                height: "2",
+                viewBox: "0 0 6 2",
+                fill: "none",
+                stroke: "rgba(0,0,0,0.5)",
+                strokeWidth: "1.2",
+                strokeLinecap: "round",
+                children: /* @__PURE__ */ t("path", { d: "M0.5 1h5" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            "data-tucu": "traffic-light",
+            "data-type": "maximize",
+            onClick: S,
+            "aria-label": "Maximize",
+            className: s(
+              "flex h-[12px] w-[12px] items-center justify-center rounded-full transition-[filter]",
+              "bg-[var(--macos-traffic-maximize)] hover:brightness-90"
+            ),
+            children: /* @__PURE__ */ t(
+              "svg",
+              {
+                className: "hidden group-hover:block",
+                width: "6",
+                height: "6",
+                viewBox: "0 0 6 6",
+                fill: "none",
+                stroke: "rgba(0,0,0,0.5)",
+                strokeWidth: "1.1",
+                children: /* @__PURE__ */ t(
+                  "path",
+                  {
+                    d: "M1 5L5 1M3 1h2v2M1 3V5h2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+const u = {
+  n: "cursor-n-resize",
+  s: "cursor-s-resize",
+  e: "cursor-e-resize",
+  w: "cursor-w-resize",
+  ne: "cursor-ne-resize",
+  nw: "cursor-nw-resize",
+  se: "cursor-se-resize",
+  sw: "cursor-sw-resize"
+};
+function fe({
+  title: D,
+  children: L,
+  className: S,
+  titleBarClassName: se,
+  showTrafficLights: W = !0,
+  trafficLightsPosition: $ = "left",
+  actions: F,
+  draggable: E = !0,
+  resizable: R = !0,
+  defaultWidth: O,
+  defaultHeight: P,
+  minWidth: C = 200,
+  minHeight: j = 120,
+  onClose: V,
+  onMinimize: q,
+  onMaximize: A
+}) {
+  const ie = W && $ === "left", ae = W && $ === "right", B = w(null), le = w(null), [n, x] = f({ x: 0, y: 0 }), [g, p] = f({
+    w: null,
+    h: null
+  }), [o, X] = f(!1), [v, G] = f(!1), [Y, J] = f(!1), K = w({ mx: 0, my: 0, ox: 0, oy: 0 }), Q = w({
+    mx: 0,
+    my: 0,
+    w: 0,
+    h: 0,
+    ox: 0,
+    oy: 0,
+    edge: ""
+  }), i = w({ x: 0, y: 0, w: 0, h: 0 }), ce = k(
+    (e) => {
+      !E || o || e.target.closest("button") || (e.preventDefault(), K.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: n.x,
+        oy: n.y
+      }, G(!0));
+    },
+    [E, o, n.x, n.y]
+  );
+  oe(() => {
+    if (!v) return;
+    const e = (c) => {
+      const { mx: d, my: U, ox: h, oy: m } = K.current;
+      x({ x: h + (c.clientX - d), y: m + (c.clientY - U) });
+    }, r = () => G(!1);
+    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", r), () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", r);
+    };
+  }, [v]);
+  const a = k(
+    (e, r) => {
+      if (!R || o) return;
+      r.preventDefault(), r.stopPropagation();
+      const c = B.current;
+      if (!c) return;
+      const d = c.getBoundingClientRect();
+      Q.current = {
+        mx: r.clientX,
+        my: r.clientY,
+        w: d.width,
+        h: d.height,
+        ox: n.x,
+        oy: n.y,
+        edge: e
+      }, J(!0);
+    },
+    [R, o, n.x, n.y]
+  );
+  oe(() => {
+    if (!Y) return;
+    const e = (c) => {
+      const { mx: d, my: U, w: h, h: m, ox: Z, oy: _, edge: y } = Q.current, H = c.clientX - d, ee = c.clientY - U;
+      let z = h, M = m, te = Z, ne = _;
+      y.includes("e") && (z = Math.max(C, h + H)), y.includes("w") && (z = Math.max(C, h - H), te = Z + (h - z)), y.includes("s") && (M = Math.max(j, m + ee)), y.includes("n") && (M = Math.max(j, m - ee), ne = _ + (m - M)), p({ w: z, h: M }), x({ x: te, y: ne });
+    }, r = () => J(!1);
+    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", r), () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", r);
+    };
+  }, [Y, C, j]);
+  const I = k(() => {
+    if (o)
+      x({ x: i.current.x, y: i.current.y }), p({
+        w: i.current.w || null,
+        h: i.current.h || null
+      }), X(!1);
+    else {
+      const r = B.current?.getBoundingClientRect();
+      i.current = {
+        x: n.x,
+        y: n.y,
+        w: r?.width ?? 0,
+        h: r?.height ?? 0
+      }, x({ x: 0, y: 0 }), p({ w: null, h: null }), X(!0);
+    }
+    A?.();
+  }, [o, n.x, n.y, A]), T = k(() => {
+    o && (x({ x: i.current.x, y: i.current.y }), p({
+      w: i.current.w || null,
+      h: i.current.h || null
+    }), X(!1)), q?.();
+  }, [o, q]), ue = o ? { inset: 0, width: "100%", height: "100%", position: "absolute" } : {
+    position: "relative",
+    transform: `translate(${n.x}px, ${n.y}px)`,
+    ...g.w != null ? { width: g.w } : O != null ? { width: O } : {},
+    ...g.h != null ? { height: g.h } : P != null ? { height: P } : {}
+  }, b = 6, l = 12, de = R && !o && /* @__PURE__ */ N(he, { children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: s(
+          "absolute top-0 left-[6px] right-[6px] z-20",
+          u.n
+        ),
+        style: { height: b },
+        onMouseDown: (e) => a("n", e)
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: s(
+          "absolute bottom-0 left-[6px] right-[6px] z-20",
+          u.s
+        ),
+        style: { height: b },
+        onMouseDown: (e) => a("s", e)
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: s(
+          "absolute left-0 top-[6px] bottom-[6px] z-20",
+          u.w
+        ),
+        style: { width: b },
+        onMouseDown: (e) => a("w", e)
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: s(
+          "absolute right-0 top-[6px] bottom-[6px] z-20",
+          u.e
+        ),
+        style: { width: b },
+        onMouseDown: (e) => a("e", e)
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: s("absolute top-0 left-0 z-30", u.nw),
+        style: { width: l, height: l },
+        onMouseDown: (e) => a("nw", e)
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: s("absolute top-0 right-0 z-30", u.ne),
+        style: { width: l, height: l },
+        onMouseDown: (e) => a("ne", e)
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: s("absolute bottom-0 left-0 z-30", u.sw),
+        style: { width: l, height: l },
+        onMouseDown: (e) => a("sw", e)
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: s("absolute bottom-0 right-0 z-30", u.se),
+        style: { width: l, height: l },
+        onMouseDown: (e) => a("se", e)
+      }
+    )
+  ] });
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: le,
+      className: "relative",
+      style: o ? { width: "100%", height: "100%" } : void 0,
+      children: /* @__PURE__ */ N(
+        "div",
+        {
+          ref: B,
+          "data-tucu": "window",
+          style: ue,
+          className: s(
+            "flex flex-col",
+            "rounded-[var(--macos-radius-xl,10px)]",
+            "bg-[var(--color-semantic-elevation-1)]",
+            "border border-[var(--color-border)]",
+            "shadow-[var(--shadow-main)]",
+            o && "rounded-none",
+            (v || Y) && "select-none",
+            S
+          ),
+          children: [
+            de,
+            /* @__PURE__ */ N(
+              "div",
+              {
+                "data-tucu": "title-bar",
+                onMouseDown: ce,
+                onDoubleClick: I,
+                className: s(
+                  "flex h-[var(--macos-titlebar-height,52px)] shrink-0 items-center gap-[12px] px-[16px]",
+                  "rounded-t-[var(--macos-radius-xl,10px)]",
+                  "bg-[var(--macos-material-toolbar,rgba(255,255,255,0.72))] backdrop-blur-xl",
+                  "border-b border-[var(--color-border)]",
+                  "select-none",
+                  E && !o && "cursor-grab",
+                  v && "cursor-grabbing",
+                  o && "rounded-t-none",
+                  se
+                ),
+                children: [
+                  ie && /* @__PURE__ */ t(
+                    re,
+                    {
+                      onClose: V,
+                      onMinimize: T,
+                      onMaximize: I
+                    }
+                  ),
+                  /* @__PURE__ */ t("span", { className: "flex-1 text-center text-[13px] font-semibold text-gray-700 dark:text-gray-200", children: D }),
+                  F && /* @__PURE__ */ t("div", { className: "flex shrink-0 items-center gap-[8px]", children: F }),
+                  ae && /* @__PURE__ */ t(
+                    re,
+                    {
+                      onClose: V,
+                      onMinimize: T,
+                      onMaximize: I
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ t("div", { "data-tucu": "window-content", className: "flex-1 overflow-auto", children: L })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  fe as MacOSWindow,
+  fe as default
+};

package/components/macos/sonoma/controls/search-bar.mjs

@@ -0,0 +1,107 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import e from "classnames";
+import { SearchIcon as f } from "../../../icons/search.mjs";
+const w = {
+  sm: {
+    wrap: "h-[28px]",
+    input: "pl-[28px] pr-[28px] text-xs",
+    icon: "left-[8px] w-[14px] h-[14px]"
+  },
+  md: {
+    wrap: "h-[34px]",
+    input: "pl-[32px] pr-[32px] text-[13px]",
+    icon: "left-[10px] w-[14px] h-[14px]"
+  },
+  lg: {
+    wrap: "h-[40px]",
+    input: "pl-[36px] pr-[36px] text-sm",
+    icon: "left-[12px] w-[16px] h-[16px]"
+  }
+};
+function k({
+  value: a = "",
+  placeholder: n = "Search",
+  size: i = "md",
+  autoFocus: p,
+  className: l,
+  onChange: s,
+  onClear: o,
+  onSubmit: c
+}) {
+  const { wrap: x, input: h, icon: d } = w[i], g = (t) => {
+    t.key === "Enter" && c?.(a), t.key === "Escape" && o?.();
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: e(
+        "relative flex items-center rounded-full",
+        "bg-black/6 dark:bg-white/10",
+        "border border-[var(--color-border)]",
+        "transition-all duration-150",
+        "focus-within:bg-white dark:focus-within:bg-[#3a3a3c]",
+        "focus-within:shadow-[0_0_0_var(--macos-focus-ring-width,3px)_var(--macos-focus-ring,rgba(0,122,255,0.5))]",
+        x,
+        l
+      ),
+      children: [
+        /* @__PURE__ */ r(
+          f,
+          {
+            className: e(
+              "pointer-events-none absolute shrink-0 text-gray-400 dark:text-gray-500",
+              d
+            )
+          }
+        ),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "search",
+            autoFocus: p,
+            value: a,
+            placeholder: n,
+            onChange: (t) => s?.(t.target.value),
+            onKeyDown: g,
+            className: e(
+              "h-full w-full bg-transparent outline-none",
+              "text-gray-900 dark:text-gray-100",
+              "placeholder:text-gray-400 dark:placeholder:text-gray-500",
+              h
+            )
+          }
+        ),
+        a && /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: o,
+            "aria-label": "Clear",
+            className: e(
+              "absolute right-[8px] flex h-[16px] w-[16px] items-center justify-center rounded-full",
+              "bg-gray-400/60 dark:bg-gray-500/60 text-white",
+              "hover:bg-gray-500 dark:hover:bg-gray-400 transition-colors"
+            ),
+            children: /* @__PURE__ */ r(
+              "svg",
+              {
+                width: "7",
+                height: "7",
+                viewBox: "0 0 7 7",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                children: /* @__PURE__ */ r("path", { d: "M1 1l5 5M6 1L1 6" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  k as MacOSSearchBar,
+  k as default
+};

package/components/macos/sonoma/controls/segmented-control.mjs

@@ -0,0 +1,75 @@
+import { jsx as x, jsxs as g } from "react/jsx-runtime";
+import t from "classnames";
+const u = {
+  sm: { wrap: "h-[28px] p-[3px]", seg: "px-[10px] text-xs gap-[4px]", icon: "w-[12px] h-[12px]" },
+  md: {
+    wrap: "h-[32px] p-[3px]",
+    seg: "px-[14px] text-[13px] gap-[6px]",
+    icon: "w-[14px] h-[14px]"
+  },
+  lg: { wrap: "h-[36px] p-[3px]", seg: "px-[16px]   text-sm gap-[6px]", icon: "w-[16px] h-[16px]" }
+};
+function b({
+  options: n,
+  value: d,
+  onChange: i,
+  size: r = "md",
+  fullWidth: l = !1,
+  className: p
+}) {
+  const { wrap: s, seg: c, icon: o } = u[r];
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Segmented control",
+      "data-tucu": "segmented-control",
+      "data-size": r,
+      className: t(
+        "inline-flex rounded-[9px]",
+        "bg-black/5 dark:bg-white/10",
+        s,
+        l && "w-full",
+        p
+      ),
+      children: n.map((e) => {
+        const a = e.value === d;
+        return /* @__PURE__ */ g(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": a,
+            disabled: e.disabled,
+            "data-tucu": "segmented-item",
+            "data-active": a,
+            onClick: () => !e.disabled && i(e.value),
+            className: t(
+              "flex flex-1 items-center justify-center rounded-[7px] font-medium",
+              "transition-all duration-150 select-none",
+              c,
+              a ? [
+                "bg-white dark:bg-[#636366]",
+                "text-gray-900 dark:text-gray-50",
+                "shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_1px_rgba(0,0,0,0.08)]"
+              ] : [
+                "text-gray-600 dark:text-gray-300",
+                "hover:text-gray-900 dark:hover:text-gray-100"
+              ],
+              e.disabled && "cursor-not-allowed opacity-40"
+            ),
+            children: [
+              e.icon && /* @__PURE__ */ x("span", { className: t("shrink-0", o), children: e.icon }),
+              e.label
+            ]
+          },
+          e.value
+        );
+      })
+    }
+  );
+}
+export {
+  b as MacOSSegmentedControl,
+  b as default
+};