@salilvnair/dui 1.0.7 → 1.0.9

package/dist/chunks/doc-path-CS9-ZNht.js

@@ -0,0 +1,696 @@
+import { jsx as p, Fragment as C, jsxs as y } from "react/jsx-runtime";
+import { useMemo as M, useContext as F, createContext as N, useRef as D, useEffect as w, useState as S, useSyncExternalStore as j } from "react";
+import { createPortal as A } from "react-dom";
+import { ax as G } from "./daakia-icons-DYLRx0Yi.js";
+const dn = {
+  /** Standard form controls: text input, select, duration, search, highlighted input */
+  input: { xxs: 16, xs: 20, sm: 24, md: 28, lg: 36, xl: 40, xxl: 48, xxxl: 56 },
+  /** Push buttons (primary, secondary, ghost, danger) */
+  button: { xxs: 16, xs: 20, sm: 24, md: 28, lg: 36, xl: 40, xxl: 48, xxxl: 56 },
+  /** Pill tabs, segment controls */
+  tab: { xxs: 16, xs: 20, sm: 24, md: 28, lg: 36, xl: 40, xxl: 48, xxxl: 56 },
+  /** Sidebar nav items, settings nav links */
+  nav: { xxs: 20, xs: 24, sm: 28, md: 32, lg: 36, xl: 44, xxl: 52, xxxl: 60 },
+  /** Context-menu items, dropdown options, sub-menu rows */
+  menu: { xxs: 14, xs: 18, sm: 22, md: 26, lg: 30, xl: 36, xxl: 42, xxxl: 48 },
+  /** Table / KV-table rows */
+  table: { xxs: 18, xs: 22, sm: 26, md: 30, lg: 36, xl: 40, xxl: 46, xxxl: 54 },
+  /** Card container min-height (loosely applied) */
+  card: { xxs: 28, xs: 36, sm: 48, md: 64, lg: 80, xl: 96, xxl: 112, xxxl: 128 }
+}, pn = {
+  xxs: 10,
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+  xxl: 32,
+  xxxl: 38
+}, fn = {
+  xxs: 18,
+  xs: 22,
+  sm: 26,
+  md: 30,
+  lg: 34,
+  xl: 38,
+  xxl: 44,
+  xxxl: 50
+}, hn = {
+  xxs: 40,
+  xs: 52,
+  sm: 64,
+  md: 80,
+  lg: 100,
+  xl: 120,
+  xxl: 144,
+  xxxl: 168
+}, mn = {
+  xxs: 2,
+  xs: 3,
+  sm: 4,
+  md: 5,
+  lg: 6,
+  xl: 8,
+  xxl: 10,
+  xxxl: 12
+}, gn = {
+  xxs: 16,
+  xs: 20,
+  sm: 24,
+  md: 32,
+  lg: 40,
+  xl: 48,
+  xxl: 56,
+  xxxl: 72
+}, vn = {
+  xxs: 6,
+  xs: 7,
+  sm: 8,
+  md: 10,
+  lg: 12,
+  xl: 14,
+  xxl: 16,
+  xxxl: 20
+}, bn = {
+  xxs: { trackW: 18, trackH: 10, thumb: 8 },
+  xs: { trackW: 24, trackH: 14, thumb: 10 },
+  sm: { trackW: 28, trackH: 16, thumb: 12 },
+  md: { trackW: 36, trackH: 20, thumb: 16 },
+  lg: { trackW: 44, trackH: 24, thumb: 20 },
+  xl: { trackW: 52, trackH: 28, thumb: 24 },
+  xxl: { trackW: 60, trackH: 32, thumb: 28 },
+  xxxl: { trackW: 68, trackH: 36, thumb: 32 }
+}, yn = {
+  xxs: { box: 10, icon: 6 },
+  xs: { box: 12, icon: 8 },
+  sm: { box: 14, icon: 9 },
+  md: { box: 16, icon: 11 },
+  lg: { box: 18, icon: 13 },
+  xl: { box: 20, icon: 15 },
+  xxl: { box: 22, icon: 17 },
+  xxxl: { box: 26, icon: 20 }
+}, kn = {
+  xxs: 8,
+  xs: 10,
+  sm: 11,
+  md: 12,
+  lg: 14,
+  xl: 16,
+  xxl: 18,
+  xxxl: 20
+}, In = {
+  xxs: "8px",
+  xs: "9px",
+  sm: "10px",
+  md: "11px",
+  lg: "12px",
+  xl: "13px",
+  xxl: "14px",
+  xxxl: "16px"
+}, wn = {
+  xxs: "2px",
+  xs: "3px",
+  sm: "4px",
+  md: "5px",
+  lg: "7px",
+  xl: "9px",
+  xxl: "11px",
+  xxxl: "14px"
+}, Z = {
+  xxs: 10,
+  xs: 11,
+  sm: 11,
+  md: 12,
+  lg: 13,
+  xl: 14,
+  xxl: 15,
+  xxxl: 16
+}, _n = {
+  xxs: "4px",
+  xs: "6px",
+  sm: "8px",
+  md: "10px",
+  lg: "12px",
+  xl: "16px",
+  xxl: "20px",
+  xxxl: "24px"
+}, Dn = {
+  xxs: "2px",
+  xs: "3px",
+  sm: "4px",
+  md: "5px",
+  lg: "6px",
+  xl: "8px",
+  xxl: "10px",
+  xxxl: "12px"
+}, X = {
+  none: "0px",
+  sm: "3px",
+  md: "4px",
+  lg: "6px",
+  full: "999px"
+}, Sn = {
+  xxs: "2px",
+  xs: "3px",
+  // DUI_RADIUS_MAP.sm
+  sm: "4px",
+  // DUI_RADIUS_MAP.md
+  md: "4px",
+  // DUI_RADIUS_MAP.md
+  lg: "6px",
+  // DUI_RADIUS_MAP.lg
+  xl: "6px",
+  // DUI_RADIUS_MAP.lg
+  xxl: "8px",
+  xxxl: "10px"
+}, q = {
+  sm: "80px",
+  md: "120px",
+  default: "auto",
+  lg: "200px",
+  fullWidth: "100%",
+  maxContent: "max-content",
+  fw: "100%",
+  mx: "max-content"
+}, J = { size: "md" }, R = N(J);
+function En({
+  size: n = "md",
+  width: o,
+  borderRadius: t,
+  color: e,
+  defaultColor: s,
+  activeColor: r,
+  fontStyle: i,
+  chipVariant: c,
+  children: x
+}) {
+  const a = M(
+    () => ({ size: n, width: o, borderRadius: t, color: e, defaultColor: s, activeColor: r, fontStyle: i, chipVariant: c }),
+    [n, o, t, e, s, r, i, c]
+  );
+  return /* @__PURE__ */ p(R.Provider, { value: a, children: x });
+}
+function U() {
+  return F(R);
+}
+function K(n, o) {
+  return n === void 0 ? o : typeof n == "number" ? `${n}px` : X[n];
+}
+function Y(n) {
+  return n ? q[n] : "auto";
+}
+function Wn(n) {
+  const o = U();
+  return M(
+    () => ({
+      borderRadius: K(o.borderRadius, n),
+      width: Y(o.width),
+      color: o.color,
+      defaultColor: o.defaultColor,
+      activeColor: o.activeColor,
+      fontStyle: o.fontStyle
+    }),
+    [o, n]
+  );
+}
+function Cn(n, o = {}) {
+  const t = U(), e = n ?? t.size;
+  return {
+    fontSize: Z[e]
+  };
+}
+const V = { auto: "max-content", sm: "140px", md: "180px", lg: "220px" };
+function Q(n) {
+  return !n || n === "auto" ? "max-content" : typeof n == "number" ? `${n}px` : V[n] || "max-content";
+}
+const nn = 288;
+function tn(n) {
+  return typeof n == "number" ? Math.round(n * 1.07) : nn;
+}
+function H({
+  items: n,
+  onClose: o,
+  rounded: t,
+  subMax: e
+}) {
+  const [s, r] = S(null);
+  return /* @__PURE__ */ p(C, { children: n.map((i) => /* @__PURE__ */ p(
+    en,
+    {
+      item: i,
+      onClose: o,
+      rounded: t,
+      subMax: e,
+      activeSubId: s,
+      onSubOpen: r
+    },
+    i.id
+  )) });
+}
+function en({
+  item: n,
+  onClose: o,
+  rounded: t,
+  subMax: e,
+  activeSubId: s,
+  onSubOpen: r
+}) {
+  const i = D(null), c = D(null);
+  if (n.separator)
+    return /* @__PURE__ */ p("div", { style: { height: "1px", background: "var(--color-surface-border)", margin: "4px 0" } });
+  const x = !!(n.children && n.children.length > 0), a = n.danger, m = x && s === n.id, g = () => {
+    r(x ? n.id : null);
+  }, u = (l) => {
+    var h;
+    if (l.stopPropagation(), !n.disabled) {
+      if (x) {
+        r(n.id);
+        return;
+      }
+      (h = n.onClick) == null || h.call(n), o();
+    }
+  };
+  return w(() => {
+    if (!m || !i.current || !c.current) return;
+    const l = c.current;
+    l.style.visibility = "hidden";
+    const h = requestAnimationFrame(() => {
+      if (!i.current || !c.current) return;
+      const f = i.current.getBoundingClientRect();
+      l.style.top = `${f.top - 4}px`, l.style.left = `${f.right + 4}px`;
+      const d = l.getBoundingClientRect();
+      d.right > window.innerWidth - 8 && (l.style.left = `${f.left - d.width - 4}px`), d.bottom > window.innerHeight - 8 && (l.style.top = `${window.innerHeight - d.height - 8}px`), l.style.visibility = "visible";
+    });
+    return () => cancelAnimationFrame(h);
+  }, [m]), /* @__PURE__ */ y(
+    "div",
+    {
+      ref: i,
+      onMouseEnter: g,
+      style: { position: "relative" },
+      children: [
+        /* @__PURE__ */ y(
+          "div",
+          {
+            onClick: u,
+            className: `dui_ctx-menu__item${a ? " dui_ctx-menu__item--danger" : ""}${n.disabled ? " dui_ctx-menu__item--disabled" : ""}`,
+            style: {
+              display: "flex",
+              // A described item is two lines, so the icon and chevron align to the
+              // label rather than floating against the middle of the block.
+              alignItems: n.description ? "flex-start" : "center",
+              gap: "8px",
+              padding: "8px 10px",
+              borderRadius: t ? "5px" : "0px",
+              fontSize: "12px",
+              fontWeight: 500,
+              cursor: n.disabled ? "default" : "pointer",
+              // A disabled item that explains itself has to stay readable: the
+              // reason is the reason it is disabled, and dimming it to 45% makes
+              // the one thing worth reading the hardest thing to read.
+              opacity: n.disabled ? n.description ? 0.75 : 0.45 : 1,
+              color: a ? "var(--color-error)" : "var(--color-text-secondary)",
+              userSelect: "none"
+            },
+            children: [
+              n.icon && /* @__PURE__ */ p("span", { style: { width: "14px", display: "flex", alignItems: "center", flexShrink: 0, marginTop: n.description ? "1px" : 0, color: n.iconColor ?? (a ? "var(--color-error)" : "var(--color-text-muted)") }, children: n.icon }),
+              n.description ? /* @__PURE__ */ y("span", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "2px" }, children: [
+                /* @__PURE__ */ y("span", { style: { display: "flex", alignItems: "baseline", gap: "8px" }, children: [
+                  /* @__PURE__ */ p("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: n.label }),
+                  n.shortcut && !x && /* @__PURE__ */ p("span", { style: { fontSize: "10px", color: "var(--color-text-muted)", flexShrink: 0 }, children: n.shortcut })
+                ] }),
+                /* @__PURE__ */ p("span", { style: { fontSize: "10.5px", fontWeight: 400, lineHeight: 1.45, color: "var(--color-text-muted)", whiteSpace: "normal" }, children: n.description })
+              ] }) : /* @__PURE__ */ y(C, { children: [
+                /* @__PURE__ */ p("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: n.label }),
+                n.shortcut && !x && /* @__PURE__ */ p("span", { style: { fontSize: "10px", color: "var(--color-text-muted)", marginLeft: "12px", flexShrink: 0 }, children: n.shortcut })
+              ] }),
+              x && /* @__PURE__ */ p(G, { size: 10, style: { color: "var(--color-text-muted)", flexShrink: 0, marginLeft: "8px", marginTop: n.description ? "3px" : 0 } })
+            ]
+          }
+        ),
+        x && m && A(
+          /* @__PURE__ */ p(
+            "div",
+            {
+              ref: c,
+              "data-dui-ctx-menu": "true",
+              style: {
+                position: "fixed",
+                visibility: "hidden",
+                zIndex: 99999,
+                background: "var(--color-elevated, var(--color-surface-bg))",
+                border: "1px solid var(--color-surface-border)",
+                borderRadius: t ? "7px" : "0px",
+                padding: "4px",
+                minWidth: "200px",
+                width: "max-content",
+                /*
+                  Capped, because `max-content` has no opinion about how wide is
+                  too wide. A submenu of plain labels never reaches this; one whose
+                  items carry descriptions would otherwise grow to the longest
+                  sentence in it and lay every entry out on a single long line.
+                  With a ceiling, the text wraps instead.
+                */
+                maxWidth: `${e}px`,
+                boxShadow: "0 12px 40px rgba(0,0,0,.35)"
+              },
+              children: /* @__PURE__ */ p(
+                H,
+                {
+                  items: n.children,
+                  onClose: o,
+                  rounded: t,
+                  subMax: e
+                }
+              )
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+function rn({
+  testId: n,
+  items: o,
+  anchorEl: t,
+  open: e,
+  onClose: s,
+  width: r = "auto",
+  rounded: i = !0,
+  matchAnchorWidth: c = !1,
+  position: x,
+  align: a = "auto"
+}) {
+  const m = D(null);
+  if (w(() => {
+    if (!e) return;
+    const u = (l) => {
+      var f, d;
+      const h = l.target;
+      (f = m.current) != null && f.contains(h) || t != null && t.contains(h) || (d = h.closest) != null && d.call(h, "[data-dui-ctx-menu]") || s();
+    };
+    return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
+  }, [e, t, s]), w(() => {
+    if (!e) return;
+    const u = (l) => {
+      if (l.key === "Escape") {
+        s();
+        return;
+      }
+      const h = l.key.toUpperCase(), f = o.find((d) => d.disabled || d.separator || !d.shortcut || !d.onClick ? !1 : d.shortcut === "⌫" ? l.key === "Backspace" || l.key === "Delete" : d.shortcut.toUpperCase() === h);
+      f && (l.preventDefault(), f.onClick(), s());
+    };
+    return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
+  }, [e, s, o]), w(() => {
+    if (!e || !m.current) return;
+    const u = m.current, l = () => {
+      const f = u.scrollWidth, d = u.scrollHeight;
+      let v, k, _ = 0;
+      if (x)
+        v = x.x, k = x.y, _ = x.y;
+      else if (t) {
+        const b = t.getBoundingClientRect();
+        a === "right" ? v = b.right - f : a === "left" ? v = b.left : v = b.left + f <= window.innerWidth - 8 ? b.left : b.right - f, k = b.bottom + 4, _ = b.top, c && (u.style.width = b.width + "px");
+      } else
+        return;
+      v + f > window.innerWidth - 8 && (v = Math.max(8, window.innerWidth - f - 8)), v < 8 && (v = 8), k + d > window.innerHeight - 8 && (k = Math.max(8, _ - d - 4)), u.style.left = v + "px", u.style.top = k + "px";
+    };
+    l();
+    const h = requestAnimationFrame(l);
+    return window.addEventListener("scroll", l, { passive: !0, capture: !0 }), window.addEventListener("resize", l, { passive: !0 }), () => {
+      cancelAnimationFrame(h), window.removeEventListener("scroll", l, { capture: !0 }), window.removeEventListener("resize", l);
+    };
+  }, [e, t, x, c, a]), !e) return null;
+  const g = Q(r);
+  return A(
+    /* @__PURE__ */ p(
+      "div",
+      {
+        "data-testid": n,
+        ref: m,
+        "data-dui-ctx-menu": "true",
+        style: {
+          position: "fixed",
+          zIndex: 99998,
+          width: g,
+          minWidth: "140px",
+          background: "var(--color-elevated, var(--color-surface-bg))",
+          border: "1px solid var(--color-surface-border)",
+          borderRadius: i ? "8px" : "0px",
+          padding: "4px",
+          boxShadow: "0 12px 40px rgba(0,0,0,.35), 0 0 0 1px var(--color-panel-border, rgba(255,255,255,.04))",
+          animation: "dui_menu-in 120ms ease-out"
+        },
+        children: /* @__PURE__ */ p(
+          H,
+          {
+            items: o,
+            onClose: s,
+            rounded: i,
+            subMax: tn(r)
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+let T = "idle", L = null, $ = null;
+const E = /* @__PURE__ */ new Set();
+function on() {
+  for (const n of E) n();
+}
+function W() {
+  return T;
+}
+function Mn(n) {
+  L = n;
+}
+function An(n) {
+  $ = n;
+}
+function Rn() {
+  return L;
+}
+function Un() {
+  return $;
+}
+function Hn() {
+  T = "ready", on();
+}
+function Tn() {
+  return j(
+    (n) => (E.add(n), () => E.delete(n)),
+    W,
+    W
+  );
+}
+function Ln({
+  bordered: n,
+  containerHeight: o,
+  children: t,
+  contextMenuMode: e = "native",
+  contextMenuItems: s,
+  itemsAt: r,
+  accentColor: i
+}) {
+  const [c, x] = S(null), [a, m] = S([]), g = e === "dui";
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      className: `dui-editor-shell relative${n ? " rounded border border-[var(--color-surface-border)]" : ""}`,
+      style: { height: o, width: "100%", position: "relative", ...i ? { "--editor-accent": i } : {} },
+      onContextMenuCapture: g ? (u) => {
+        u.preventDefault(), m((r == null ? void 0 : r(u.clientX, u.clientY)) ?? []), x({ x: u.clientX, y: u.clientY });
+      } : void 0,
+      children: [
+        t,
+        g && (a.length > 0 || s) && /* @__PURE__ */ p(
+          rn,
+          {
+            open: !!c,
+            anchorEl: null,
+            position: c ?? void 0,
+            items: [...a, ...s ?? []],
+            onClose: () => x(null),
+            width: 240
+          }
+        )
+      ]
+    }
+  );
+}
+function sn(n, o) {
+  let t = "", e = o + 1;
+  for (; e < n.length; ) {
+    const s = n[e];
+    if (s === "\\") {
+      const r = n[e + 1];
+      t += r === "n" ? `
+` : r === "t" ? "	" : r === "r" ? "\r" : r === "u" ? String.fromCharCode(parseInt(n.slice(e + 2, e + 6), 16) || 0) : r ?? "", e += r === "u" ? 6 : 2;
+      continue;
+    }
+    if (s === '"') return { value: t, end: e };
+    t += s, e++;
+  }
+  return { value: t, end: n.length };
+}
+const xn = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+function P(n) {
+  let o = "$";
+  for (const t of n)
+    t.kind === "array" ? o += `[${t.index}]` : t.key !== void 0 && (o += xn.test(t.key) ? `.${t.key}` : `[${JSON.stringify(t.key)}]`);
+  return o;
+}
+function $n(n, o) {
+  const t = O(n, o);
+  return t && P(t);
+}
+function Pn(n, o) {
+  const t = O(n, o);
+  if (!t) return [];
+  const e = [];
+  for (let s = 0; s <= t.length; s++) {
+    const r = P(t.slice(0, s));
+    r !== e[e.length - 1] && e.push(r);
+  }
+  return e;
+}
+function O(n, o) {
+  if (!n) return;
+  const t = Math.max(0, Math.min(o, n.length)), e = [];
+  let s = 0;
+  for (; s < n.length && !(s >= t); ) {
+    const r = n[s];
+    if (r === '"') {
+      const { value: i, end: c } = sn(n, s), x = e[e.length - 1];
+      let a = c + 1;
+      for (; a < n.length && /\s/.test(n[a]); ) a++;
+      if (n[a] === ":" && (x == null ? void 0 : x.kind) === "object" && (x.key = i), t <= c) return e;
+      s = c + 1;
+      continue;
+    }
+    if (r === "{") {
+      e.push({ kind: "object", index: 0 }), s++;
+      continue;
+    }
+    if (r === "[") {
+      e.push({ kind: "array", index: 0 }), s++;
+      continue;
+    }
+    if (r === "}" || r === "]") {
+      e.pop(), s++;
+      continue;
+    }
+    if (r === ",") {
+      const i = e[e.length - 1];
+      (i == null ? void 0 : i.kind) === "array" ? i.index++ : i && (i.key = void 0), s++;
+      continue;
+    }
+    s++;
+  }
+  return e;
+}
+function z(n) {
+  return n.map((o) => o.index > 1 ? `/${o.name}[${o.index}]` : `/${o.name}`).join("");
+}
+function I(n, o, t) {
+  const e = n.indexOf(t, o);
+  return e === -1 ? n.length : e + t.length;
+}
+function On(n, o) {
+  const t = B(n, o);
+  return t != null && t.length ? z(t) : void 0;
+}
+function zn(n, o) {
+  const t = B(n, o) ?? [];
+  return t.map((e, s) => z(t.slice(0, s + 1)));
+}
+function B(n, o) {
+  var i;
+  if (!n) return;
+  const t = Math.max(0, Math.min(o, n.length)), e = [], s = /* @__PURE__ */ new Map();
+  let r = 0;
+  for (; r < n.length && r < t; ) {
+    if (n[r] !== "<") {
+      r++;
+      continue;
+    }
+    if (n.startsWith("<!--", r)) {
+      r = I(n, r, "-->");
+      continue;
+    }
+    if (n.startsWith("<![CDATA[", r)) {
+      r = I(n, r, "]]>");
+      continue;
+    }
+    if (n.startsWith("<?", r)) {
+      r = I(n, r, "?>");
+      continue;
+    }
+    if (n.startsWith("<!", r)) {
+      r = I(n, r, ">");
+      continue;
+    }
+    const c = n.indexOf(">", r);
+    if (c === -1) break;
+    const x = n.slice(r + 1, c);
+    if (x.startsWith("/")) {
+      if (t <= c) return e;
+      e.pop(), r = c + 1;
+      continue;
+    }
+    const a = (i = x.match(/^[^\s/>]+/)) == null ? void 0 : i[0];
+    if (!a) {
+      r = c + 1;
+      continue;
+    }
+    const m = e[e.length - 1], g = m ? m.counts : s, u = (g.get(a) ?? 0) + 1;
+    g.set(a, u);
+    const l = x.endsWith("/");
+    if (e.push({ name: a, counts: /* @__PURE__ */ new Map(), index: u }), t <= c) return e;
+    l && e.pop(), r = c + 1;
+  }
+  return e;
+}
+export {
+  Pn as A,
+  Wn as B,
+  rn as C,
+  Sn as D,
+  Ln as E,
+  On as F,
+  zn as G,
+  Hn as H,
+  Mn as I,
+  An as J,
+  Dn as a,
+  _n as b,
+  kn as c,
+  In as d,
+  dn as e,
+  K as f,
+  pn as g,
+  X as h,
+  bn as i,
+  wn as j,
+  hn as k,
+  fn as l,
+  mn as m,
+  vn as n,
+  gn as o,
+  yn as p,
+  Cn as q,
+  Y as r,
+  Tn as s,
+  Rn as t,
+  U as u,
+  Un as v,
+  Z as w,
+  q as x,
+  En as y,
+  $n as z
+};
+//# sourceMappingURL=doc-path-CS9-ZNht.js.map