@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/components/macos/tahoe/controls/progress-bar-tahoe.mjs

@@ -0,0 +1,65 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import o from "classnames";
+const d = {
+  sm: "h-[4px]",
+  md: "h-[6px]",
+  lg: "h-[8px]"
+};
+function h({
+  value: l = 0,
+  indeterminate: a = !1,
+  size: i = "md",
+  className: m,
+  label: t,
+  showValue: n = !1
+}) {
+  const s = Math.min(100, Math.max(0, l));
+  return /* @__PURE__ */ r("div", { "data-tucu": "tahoe-progress-bar", className: o("w-full", m), children: [
+    (t || n) && /* @__PURE__ */ r("div", { className: "mb-[6px] flex items-center justify-between text-[12px]", children: [
+      t && /* @__PURE__ */ e("span", { className: "font-medium text-(--macos-tahoe-text)", children: t }),
+      n && !a && /* @__PURE__ */ r("span", { className: "tabular-nums text-(--macos-tahoe-text-muted)", children: [
+        Math.round(s),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": a ? void 0 : s,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        className: o(
+          "overflow-hidden rounded-full",
+          "bg-(--macos-glass-clear-bg) backdrop-blur-(--macos-glass-clear-blur,30px)",
+          "border border-(--macos-glass-border-subtle)",
+          d[i]
+        ),
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: o(
+              "h-full rounded-full transition-[width] duration-300 ease-out",
+              "bg-(--macos-tahoe-accent)",
+              a && "animate-tahoe-indeterminate w-1/3"
+            ),
+            style: a ? void 0 : { width: `${s}%` }
+          }
+        )
+      }
+    ),
+    a && /* @__PURE__ */ e("style", { children: `
+          @keyframes tahoe-indeterminate {
+            0%   { transform: translateX(-100%); }
+            100% { transform: translateX(400%); }
+          }
+          .animate-tahoe-indeterminate {
+            animation: tahoe-indeterminate 1.5s ease-in-out infinite;
+          }
+        ` })
+  ] });
+}
+export {
+  h as MacOSTahoeProgressBar,
+  h as default
+};

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

@@ -0,0 +1,105 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import o from "classnames";
+const m = {
+  sm: "h-[28px] text-[12px] px-[10px]",
+  md: "h-[32px] text-[13px] px-[12px]",
+  lg: "h-[36px] text-[14px] px-[14px]"
+}, n = {
+  sm: "h-[14px] w-[14px]",
+  md: "h-[16px] w-[16px]",
+  lg: "h-[18px] w-[18px]"
+};
+function g({
+  value: a = "",
+  placeholder: x = "Search",
+  size: r = "md",
+  autoFocus: i,
+  className: p,
+  onChange: h,
+  onClear: s,
+  onSubmit: l
+}) {
+  const d = (t) => {
+    t.key === "Enter" && l && l(a), t.key === "Escape" && s && s();
+  };
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "data-tucu": "tahoe-search-bar",
+      className: o("relative inline-flex items-center", p),
+      children: [
+        /* @__PURE__ */ c(
+          "svg",
+          {
+            className: o(
+              "pointer-events-none absolute left-[10px] text-(--macos-tahoe-text-muted)",
+              n[r]
+            ),
+            viewBox: "0 0 20 20",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ e("circle", { cx: "8.5", cy: "8.5", r: "5.5" }),
+              /* @__PURE__ */ e("path", { d: "M13 13l4 4" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            type: "text",
+            value: a,
+            placeholder: x,
+            autoFocus: i,
+            onChange: (t) => h?.(t.target.value),
+            onKeyDown: d,
+            className: o(
+              "w-full rounded-[8px] pl-[32px] outline-none",
+              "bg-(--macos-glass-clear-bg) backdrop-blur-(--macos-glass-clear-blur,30px)",
+              "border border-(--macos-glass-border)",
+              "text-(--macos-tahoe-text) placeholder:text-(--macos-tahoe-text-muted)",
+              "focus:ring-2 focus:ring-(--macos-tahoe-accent)/40",
+              "transition-shadow",
+              m[r]
+            )
+          }
+        ),
+        a && /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: s,
+            "aria-label": "Clear search",
+            className: o(
+              "absolute right-[8px] flex items-center justify-center rounded-full",
+              "text-(--macos-tahoe-text-muted) hover:text-(--macos-tahoe-text)",
+              "transition-colors",
+              n[r]
+            ),
+            children: /* @__PURE__ */ e(
+              "svg",
+              {
+                viewBox: "0 0 16 16",
+                fill: "currentColor",
+                className: "h-[14px] w-[14px]",
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M8 16A8 8 0 108 0a8 8 0 000 16zM5.354 4.646a.5.5 0 10-.708.708L7.293 8l-2.647 2.646a.5.5 0 00.708.708L8 8.707l2.646 2.647a.5.5 0 00.708-.708L8.707 8l2.647-2.646a.5.5 0 00-.708-.708L8 7.293 5.354 4.646z"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  g as MacOSTahoeSearchBar,
+  g as default
+};

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

@@ -0,0 +1,72 @@
+import { jsx as l, jsxs as n } from "react/jsx-runtime";
+import s from "classnames";
+const c = {
+  sm: "h-[28px] text-[11px] gap-[2px] rounded-[8px] px-[2px]",
+  md: "h-[32px] text-[13px] gap-[2px] rounded-[10px] px-[2px]",
+  lg: "h-[36px] text-[14px] gap-[4px] rounded-[12px] px-[4px]"
+}, m = {
+  sm: "h-[22px] px-[8px] rounded-[6px]",
+  md: "h-[26px] px-[12px] rounded-[8px]",
+  lg: "h-[30px] px-[16px] rounded-[10px]"
+};
+function u({
+  options: o,
+  value: x,
+  onChange: d,
+  size: r = "md",
+  fullWidth: a = !1,
+  className: p
+}) {
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-tucu": "tahoe-segmented-control",
+      role: "radiogroup",
+      className: s(
+        "inline-flex items-center",
+        "bg-(--macos-glass-clear-bg) backdrop-blur-(--macos-glass-clear-blur,30px)",
+        "border border-(--macos-glass-border)",
+        a && "w-full",
+        c[r],
+        p
+      ),
+      children: o.map((e) => {
+        const t = e.value === x;
+        return /* @__PURE__ */ n(
+          "button",
+          {
+            role: "radio",
+            "aria-checked": t,
+            disabled: e.disabled,
+            onClick: () => !e.disabled && d(e.value),
+            className: s(
+              "inline-flex select-none items-center justify-center gap-[6px] transition-all duration-200",
+              a && "flex-1",
+              m[r],
+              t ? [
+                "bg-(--macos-glass-prominent-bg) backdrop-blur-(--macos-glass-prominent-blur,40px)",
+                "border border-(--macos-glass-prominent-border,var(--macos-glass-border))",
+                "text-(--macos-tahoe-text) font-medium",
+                "shadow-sm"
+              ] : [
+                "text-(--macos-tahoe-text-muted)",
+                "hover:text-(--macos-tahoe-text)",
+                "border border-transparent"
+              ],
+              e.disabled && "pointer-events-none opacity-40"
+            ),
+            children: [
+              e.icon,
+              e.label
+            ]
+          },
+          e.value
+        );
+      })
+    }
+  );
+}
+export {
+  u as MacOSTahoeSegmentedControl,
+  u as default
+};

package/components/macos/tahoe/feedback/command-palette-tahoe.mjs

@@ -0,0 +1,149 @@
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { useState as g, useRef as j, useEffect as k, useMemo as h, useCallback as y } from "react";
+import w from "classnames";
+function I({
+  items: i,
+  placeholder: N = "Type a command or search…",
+  open: c,
+  onOpenChange: s,
+  triggerKey: f = "k",
+  className: _
+}) {
+  const [d, b] = g(""), [x, n] = g(0), v = j(null);
+  k(() => {
+    const e = (t) => {
+      (t.metaKey || t.ctrlKey) && t.key === f && (t.preventDefault(), s(!c));
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [c, s, f]), k(() => {
+    c && (b(""), n(0), setTimeout(() => v.current?.focus(), 50));
+  }, [c]);
+  const p = h(() => {
+    if (!d) return i;
+    const e = d.toLowerCase();
+    return i.filter(
+      (t) => t.label.toLowerCase().includes(e) || t.group?.toLowerCase().includes(e)
+    );
+  }, [i, d]), E = h(() => {
+    const e = /* @__PURE__ */ new Map();
+    for (const t of p) {
+      const a = t.group || "";
+      e.has(a) || e.set(a, []), e.get(a).push(t);
+    }
+    return e;
+  }, [p]), l = h(() => p, [p]), m = y(
+    (e) => {
+      e.onSelect?.(), s(!1);
+    },
+    [s]
+  ), D = y(
+    (e) => {
+      e.key === "ArrowDown" ? (e.preventDefault(), n((t) => (t + 1) % l.length)) : e.key === "ArrowUp" ? (e.preventDefault(), n((t) => (t - 1 + l.length) % l.length)) : e.key === "Enter" && l[x] ? (e.preventDefault(), m(l[x])) : e.key === "Escape" && s(!1);
+    },
+    [l, x, m, s]
+  );
+  if (!c) return null;
+  let u = -1;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-tucu": "tahoe-command-palette-overlay",
+      className: "fixed inset-0 z-50 flex items-start justify-center bg-black/25 pt-[15vh] backdrop-blur-[2px]",
+      onClick: () => s(!1),
+      children: /* @__PURE__ */ o(
+        "div",
+        {
+          "data-tucu": "tahoe-command-palette",
+          role: "dialog",
+          "aria-label": "Command palette",
+          onClick: (e) => e.stopPropagation(),
+          onKeyDown: D,
+          className: w(
+            "flex w-full max-w-[560px] flex-col overflow-hidden",
+            "rounded-[16px]",
+            "bg-(--macos-glass-prominent-bg) backdrop-blur-(--macos-glass-prominent-blur,40px)",
+            "border border-(--macos-glass-prominent-border,var(--macos-glass-border))",
+            "shadow-[0_24px_80px_rgba(0,0,0,0.25),0_0_0_1px_rgba(255,255,255,0.06)_inset]",
+            _
+          ),
+          children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-[12px] border-b border-(--macos-glass-border-subtle) px-[16px] py-[12px]", children: [
+              /* @__PURE__ */ o(
+                "svg",
+                {
+                  className: "h-[20px] w-[20px] shrink-0 text-(--macos-tahoe-text-muted)",
+                  viewBox: "0 0 20 20",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ r("circle", { cx: "8.5", cy: "8.5", r: "5.5" }),
+                    /* @__PURE__ */ r("path", { d: "M13 13l4 4" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  ref: v,
+                  value: d,
+                  onChange: (e) => {
+                    b(e.target.value), n(0);
+                  },
+                  placeholder: N,
+                  className: "flex-1 bg-transparent text-[15px] text-(--macos-tahoe-text) outline-none placeholder:text-(--macos-tahoe-text-muted)"
+                }
+              ),
+              /* @__PURE__ */ r("kbd", { className: "rounded-[6px] border border-(--macos-glass-border) px-[6px] py-[2px] text-[11px] text-(--macos-tahoe-text-muted)", children: "Esc" })
+            ] }),
+            /* @__PURE__ */ r("div", { className: "max-h-[360px] overflow-y-auto p-[8px]", children: l.length === 0 ? /* @__PURE__ */ r("div", { className: "px-[12px] py-[32px] text-center text-[13px] text-(--macos-tahoe-text-muted)", children: "No results found" }) : Array.from(E.entries()).map(([e, t]) => /* @__PURE__ */ o("div", { children: [
+              e && /* @__PURE__ */ r("div", { className: "px-[10px] pb-[4px] pt-[8px] text-[11px] font-semibold uppercase tracking-wider text-(--macos-tahoe-text-muted)", children: e }),
+              t.map((a) => {
+                u++;
+                const L = u === x, C = u;
+                return /* @__PURE__ */ o(
+                  "button",
+                  {
+                    "data-tucu": "tahoe-command-palette-item",
+                    onClick: () => m(a),
+                    onMouseEnter: () => n(C),
+                    className: w(
+                      "flex w-full items-center gap-[10px] rounded-[8px] px-[10px] py-[8px] text-left text-[13px] transition-colors",
+                      L ? "bg-(--macos-tahoe-selection) text-(--macos-tahoe-text)" : "text-(--macos-tahoe-text) hover:bg-(--macos-tahoe-hover)"
+                    ),
+                    children: [
+                      a.icon && /* @__PURE__ */ r("span", { className: "flex h-[20px] w-[20px] shrink-0 items-center justify-center text-(--macos-tahoe-text-muted)", children: a.icon }),
+                      /* @__PURE__ */ r("span", { className: "flex-1", children: a.label }),
+                      a.shortcut && /* @__PURE__ */ r("kbd", { className: "text-[11px] text-(--macos-tahoe-text-muted)", children: a.shortcut })
+                    ]
+                  },
+                  a.id
+                );
+              })
+            ] }, e || "__default")) }),
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-[16px] border-t border-(--macos-glass-border-subtle) px-[16px] py-[8px] text-[11px] text-(--macos-tahoe-text-muted)", children: [
+              /* @__PURE__ */ o("span", { children: [
+                /* @__PURE__ */ r("kbd", { className: "rounded border border-(--macos-glass-border) px-[4px] py-px text-[10px]", children: "↑↓" }),
+                " Navigate"
+              ] }),
+              /* @__PURE__ */ o("span", { children: [
+                /* @__PURE__ */ r("kbd", { className: "rounded border border-(--macos-glass-border) px-[4px] py-px text-[10px]", children: "↵" }),
+                " Select"
+              ] }),
+              /* @__PURE__ */ o("span", { children: [
+                /* @__PURE__ */ r("kbd", { className: "rounded border border-(--macos-glass-border) px-[4px] py-px text-[10px]", children: "Esc" }),
+                " Close"
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  I as MacOSTahoeCommandPalette,
+  I as default
+};

package/components/macos/tahoe/feedback/popover-tahoe.mjs

@@ -0,0 +1,93 @@
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { useRef as b, useCallback as u, useEffect as h } from "react";
+import d from "classnames";
+const v = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-[8px]",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-[8px]",
+  left: "right-full top-1/2 -translate-y-1/2 mr-[8px]",
+  right: "left-full top-1/2 -translate-y-1/2 ml-[8px]",
+  "top-start": "bottom-full left-0 mb-[8px]",
+  "top-end": "bottom-full right-0 mb-[8px]",
+  "bottom-start": "top-full left-0 mt-[8px]",
+  "bottom-end": "top-full right-0 mt-[8px]"
+};
+function w({
+  label: t,
+  icon: e,
+  shortcut: o,
+  disabled: r,
+  destructive: l,
+  onClick: s
+}) {
+  return /* @__PURE__ */ x(
+    "button",
+    {
+      "data-tucu": "tahoe-popover-item",
+      disabled: r,
+      onClick: s,
+      className: d(
+        "flex w-full items-center gap-[10px] rounded-[8px] px-[10px] py-[6px] text-left text-[13px] transition-colors",
+        r && "pointer-events-none opacity-40",
+        l ? "text-red-500 hover:bg-red-500/10" : "text-(--macos-tahoe-text) hover:bg-(--macos-tahoe-hover)"
+      ),
+      children: [
+        e && /* @__PURE__ */ n("span", { className: "flex h-[16px] w-[16px] shrink-0 items-center justify-center", children: e }),
+        /* @__PURE__ */ n("span", { className: "flex-1", children: t }),
+        o && /* @__PURE__ */ n("kbd", { className: "ml-[12px] text-[11px] text-(--macos-tahoe-text-muted)", children: o })
+      ]
+    }
+  );
+}
+function E({
+  isOpen: t,
+  content: e,
+  children: o,
+  placement: r = "bottom-start",
+  minWidth: l = 200,
+  className: s,
+  contentClassName: f,
+  onClose: a
+}) {
+  const m = b(null), p = u(
+    (i) => {
+      m.current && !m.current.contains(i.target) && a();
+    },
+    [a]
+  ), c = u(
+    (i) => {
+      i.key === "Escape" && a();
+    },
+    [a]
+  );
+  return h(() => {
+    if (t)
+      return document.addEventListener("mousedown", p), document.addEventListener("keydown", c), () => {
+        document.removeEventListener("mousedown", p), document.removeEventListener("keydown", c);
+      };
+  }, [t, p, c]), /* @__PURE__ */ x("div", { ref: m, className: d("relative inline-block", s), children: [
+    o,
+    t && /* @__PURE__ */ n(
+      "div",
+      {
+        "data-tucu": "tahoe-popover",
+        className: d(
+          "absolute z-50 p-[6px]",
+          "rounded-[12px]",
+          "bg-(--macos-glass-prominent-bg) backdrop-blur-(--macos-glass-prominent-blur,40px)",
+          "border border-(--macos-glass-prominent-border,var(--macos-glass-border))",
+          "shadow-(--macos-glass-shadow,0_8px_32px_rgba(0,0,0,0.15))",
+          "animate-in fade-in-0 zoom-in-95",
+          v[r],
+          f
+        ),
+        style: { minWidth: l },
+        children: e
+      }
+    )
+  ] });
+}
+export {
+  E as MacOSTahoePopover,
+  w as MacOSTahoePopoverItem,
+  E as default
+};