chordia-ui 3.3.8 → 3.3.9

package/dist/components/primitives.es.js

@@ -1,28 +1,638 @@
-import { C as e, D as t, a as r, S as s, T as l } from "../SmallButton.es.js";
-import { T, a as n, b as p, c as m } from "../Tooltip.es.js";
-import { B as C, C as S, a as c, F as f, I as b, M as d, S as g, T as I } from "../InlineConfirm.es.js";
-import { S as B, T as D } from "../SectionLabel.es.js";
-import { T as F } from "../TextInput.es.js";
+import { S as D } from "../SmallButton.es.js";
+import { C as te, a as ne, D as oe, T as ae } from "../SmallButton.es.js";
+import { T as se, b as le, c as de, a as ce } from "../Tooltip.es.js";
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { useState as x, useRef as M, useEffect as O } from "react";
+import { S as pe, T as fe } from "../SectionLabel.es.js";
+import { Check as E } from "lucide-react";
+import { T as ge } from "../TextInput.es.js";
+import "react-dom";
+function J({ colors: s = [] }) {
+  const t = s.reduce((n, r) => (n[r.category] || (n[r.category] = []), n[r.category].push(r), n), {});
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        fontFamily: "system-ui, -apple-system, sans-serif"
+      },
+      children: Object.entries(t).map(([n, r]) => /* @__PURE__ */ u("div", { style: { marginBottom: "24px" }, children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              fontSize: "11px",
+              letterSpacing: "0.14em",
+              textTransform: "uppercase",
+              marginBottom: "12px",
+              color: "rgba(30, 33, 37, 0.62)",
+              fontWeight: 650
+            },
+            children: n
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+              gap: "12px"
+            },
+            children: r.map((o, l) => /* @__PURE__ */ u(
+              "div",
+              {
+                style: {
+                  border: "1px solid rgba(52, 58, 64, 0.12)",
+                  borderRadius: "12px",
+                  overflow: "hidden",
+                  background: "rgba(255, 255, 255, 0.72)"
+                },
+                children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      style: {
+                        height: "64px",
+                        background: o.hex,
+                        borderBottom: "1px solid rgba(52, 58, 64, 0.10)"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ u("div", { style: { padding: "10px 12px" }, children: [
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "13px",
+                          fontWeight: 680,
+                          color: "rgba(30, 33, 37, 0.92)",
+                          marginBottom: "4px"
+                        },
+                        children: o.name
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "11.5px",
+                          fontFamily: "ui-monospace, monospace",
+                          color: "rgba(30, 33, 37, 0.52)",
+                          marginBottom: "6px"
+                        },
+                        children: o.hex
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "11.5px",
+                          color: "rgba(30, 33, 37, 0.62)",
+                          lineHeight: 1.4
+                        },
+                        children: o.usage
+                      }
+                    )
+                  ] })
+                ]
+              },
+              l
+            ))
+          }
+        )
+      ] }, n))
+    }
+  );
+}
+function K({ children: s, color: t, icon: n, ...r }) {
+  const l = {
+    ...{
+      fontSize: "var(--text-xs)",
+      padding: "1px 5px",
+      borderRadius: "var(--radius-sm)",
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    color: t,
+    backgroundColor: `color-mix(in srgb, ${t} 15%, transparent)`,
+    ...r.style
+  };
+  return /* @__PURE__ */ u("span", { style: l, ...r, children: [
+    n && /* @__PURE__ */ e("span", { style: { marginRight: "3px" }, children: n }),
+    s
+  ] });
+}
+function P({
+  checked: s = !1,
+  onChange: t,
+  label: n,
+  size: r = "md",
+  disabled: o = !1,
+  style: l,
+  ...p
+}) {
+  const i = r === "sm" ? 12 : 16, d = r === "sm" ? 8 : 11;
+  return /* @__PURE__ */ u(
+    "label",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: r === "sm" ? 3 : "var(--spacing-2)",
+        fontSize: r === "sm" ? "var(--text-xs)" : "var(--text-sm)",
+        color: o ? "var(--text-faint)" : "var(--text-base)",
+        cursor: o ? "not-allowed" : "pointer",
+        userSelect: "none",
+        ...l
+      },
+      onClick: (c) => {
+        c.preventDefault(), !o && t && t(!s);
+      },
+      ...p,
+      children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            style: {
+              width: i,
+              height: i,
+              borderRadius: r === "sm" ? 2 : 3,
+              border: `1px solid ${s ? "var(--text-ink)" : "var(--border)"}`,
+              background: s ? "var(--text-ink)" : "transparent",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "var(--transition-fast)",
+              flexShrink: 0,
+              opacity: o ? 0.5 : 1
+            },
+            children: s && /* @__PURE__ */ e(E, { size: d, style: { color: "white" }, strokeWidth: 3 })
+          }
+        ),
+        n
+      ]
+    }
+  );
+}
+const $ = {
+  width: "100%",
+  padding: "var(--spacing-2)",
+  fontSize: "var(--text-md)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  backgroundColor: "var(--paper)",
+  color: "var(--text-base)",
+  fontFamily: "var(--font-sans)",
+  outline: "none",
+  transition: "border-color 0.15s ease"
+};
+function Q({
+  value: s,
+  onChange: t,
+  placeholder: n,
+  disabled: r = !1,
+  mono: o = !1,
+  rows: l = 4,
+  resize: p = !0,
+  style: i,
+  ...d
+}) {
+  return /* @__PURE__ */ e(
+    "textarea",
+    {
+      value: s,
+      onChange: (c) => t == null ? void 0 : t(c.target.value),
+      placeholder: n,
+      disabled: r,
+      rows: l,
+      style: {
+        ...$,
+        resize: p ? "vertical" : "none",
+        minHeight: l * 20,
+        ...o ? { fontFamily: "var(--font-mono)" } : {},
+        ...r ? { opacity: 0.6, cursor: "not-allowed" } : {},
+        ...i
+      },
+      onFocus: (c) => {
+        c.currentTarget.style.borderColor = "var(--border-hover)";
+      },
+      onBlur: (c) => {
+        c.currentTarget.style.borderColor = "var(--border)";
+      },
+      ...d
+    }
+  );
+}
+const V = {
+  width: "100%",
+  padding: "var(--spacing-1) var(--spacing-2)",
+  fontSize: "var(--text-md)",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  backgroundColor: "var(--paper)",
+  color: "var(--text-base)",
+  fontFamily: "var(--font-sans)",
+  cursor: "pointer",
+  outline: "none",
+  transition: "border-color 0.15s ease"
+};
+function U({
+  value: s,
+  onChange: t,
+  options: n = [],
+  disabled: r = !1,
+  placeholder: o,
+  style: l,
+  ...p
+}) {
+  return /* @__PURE__ */ u(
+    "select",
+    {
+      value: s,
+      onChange: (i) => t == null ? void 0 : t(i.target.value),
+      disabled: r,
+      style: {
+        ...V,
+        ...r ? { opacity: 0.6, cursor: "not-allowed" } : {},
+        ...l
+      },
+      onFocus: (i) => {
+        i.currentTarget.style.borderColor = "var(--border-hover)";
+      },
+      onBlur: (i) => {
+        i.currentTarget.style.borderColor = "var(--border)";
+      },
+      ...p,
+      children: [
+        o && /* @__PURE__ */ e("option", { value: "", children: o }),
+        n.map((i) => /* @__PURE__ */ e("option", { value: i.value, children: i.label }, i.value))
+      ]
+    }
+  );
+}
+function X({
+  value: s = [],
+  onChange: t,
+  options: n = [],
+  placeholder: r = "Select options",
+  disabled: o = !1,
+  leftIcon: l = null,
+  rightIcon: p = null,
+  maxMenuHeight: i = 240,
+  draggable: d = !1
+}) {
+  const [c, F] = x(!1), [j, R] = x(null), [g, I] = x(n), [B, h] = x(null), b = M(null), S = M(null);
+  O(() => {
+    I(n);
+  }, [n]);
+  const w = new Set((s || []).map(String)), L = (a) => {
+    if (!t)
+      return;
+    const f = String(a), m = new Set(w);
+    m.has(f) ? m.delete(f) : m.add(f), t(Array.from(m));
+  };
+  O(() => {
+    if (!c)
+      return;
+    const a = (f) => {
+      b.current && !b.current.contains(f.target) && S.current && !S.current.contains(f.target) && F(!1);
+    };
+    return document.addEventListener("mousedown", a), () => document.removeEventListener("mousedown", a);
+  }, [c]);
+  const y = w.size, H = y === 0 ? r : `${y} selected`;
+  return /* @__PURE__ */ u("div", { style: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ u(
+      "button",
+      {
+        type: "button",
+        ref: b,
+        disabled: o,
+        onClick: () => !o && F((a) => !a),
+        style: {
+          // Match Select base style as closely as possible
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 8,
+          padding: "var(--spacing-1) var(--spacing-2)",
+          borderRadius: "var(--radius)",
+          ...c ? {
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0
+          } : {},
+          border: "1px solid var(--border)",
+          backgroundColor: o ? "rgba(249, 250, 251, 1)" : "var(--paper)",
+          color: y === 0 ? "var(--text-muted)" : "var(--text-base)",
+          cursor: o ? "not-allowed" : "pointer",
+          fontFamily: "var(--font-sans)",
+          fontSize: "var(--text-md)",
+          outline: "none",
+          transition: "border-color 0.15s ease, background-color 0.15s ease"
+        },
+        onMouseEnter: (a) => {
+          o || (a.currentTarget.style.borderColor = "var(--border-hover)");
+        },
+        onMouseLeave: (a) => {
+          o || (a.currentTarget.style.borderColor = "var(--border)");
+        },
+        children: [
+          /* @__PURE__ */ u(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                minWidth: 0,
+                flex: 1
+              },
+              children: [
+                l && /* @__PURE__ */ e("span", { style: { flexShrink: 0, display: "inline-flex" }, children: l }),
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    },
+                    children: H
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e("span", { style: { flexShrink: 0, display: "inline-flex" }, children: p || /* @__PURE__ */ e(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 20 20",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              style: {
+                transform: c ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 150ms ease",
+                color: "var(--text-muted)"
+              },
+              children: /* @__PURE__ */ e(
+                "path",
+                {
+                  d: "M5.25 7.5L10 12.25L14.75 7.5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ),
+    c && /* @__PURE__ */ e(
+      "div",
+      {
+        ref: S,
+        style: {
+          position: "absolute",
+          zIndex: 40,
+          marginTop: 0,
+          width: "100%",
+          maxHeight: i,
+          overflowY: "auto",
+          backgroundColor: "#FFFFFF",
+          borderRadius: 8,
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+          border: "1px solid rgba(209, 213, 219, 1)",
+          borderTop: "none",
+          boxShadow: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)"
+        },
+        children: /* @__PURE__ */ e("div", { style: { padding: "4px 0" }, children: g && g.length === 0 ? /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              padding: "8px 12px",
+              fontSize: "var(--text-sm)",
+              color: "var(--text-muted)",
+              fontFamily: "var(--font-sans)"
+            },
+            children: "No options"
+          }
+        ) : g.map((a) => {
+          const f = w.has(String(a.value)), m = B === String(a.value);
+          return /* @__PURE__ */ u(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "6px 12px",
+                cursor: "pointer",
+                backgroundColor: j === String(a.value) ? "var(--hover-warm)" : "transparent",
+                opacity: m ? 0.6 : 1
+              },
+              onClick: () => L(a.value),
+              onMouseEnter: () => R(String(a.value)),
+              onMouseLeave: () => R(null),
+              draggable: d,
+              onDragStart: (v) => {
+                d && (h(String(a.value)), v.dataTransfer && (v.dataTransfer.effectAllowed = "move"));
+              },
+              onDragOver: (v) => {
+                d && v.preventDefault();
+              },
+              onDrop: (v) => {
+                if (!d)
+                  return;
+                v.preventDefault();
+                const k = g.findIndex(
+                  (z) => String(z.value) === B
+                ), T = g.findIndex(
+                  (z) => String(z.value) === String(a.value)
+                );
+                if (k === -1 || T === -1 || k === T) {
+                  h(null);
+                  return;
+                }
+                const C = [...g], [W] = C.splice(k, 1);
+                C.splice(T, 0, W), I(C), h(null);
+              },
+              onDragEnd: () => {
+                d && h(null);
+              },
+              children: [
+                d && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: 14,
+                      height: 14,
+                      color: "var(--text-faint)",
+                      cursor: "grab"
+                    },
+                    onClick: (v) => {
+                      v.stopPropagation();
+                    },
+                    children: /* @__PURE__ */ e(
+                      "svg",
+                      {
+                        width: "10",
+                        height: "10",
+                        viewBox: "0 0 20 20",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /* @__PURE__ */ e(
+                          "path",
+                          {
+                            d: "M4 7H16M4 10H16M4 13H16",
+                            stroke: "currentColor",
+                            strokeWidth: "1.4",
+                            strokeLinecap: "round"
+                          }
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  P,
+                  {
+                    size: "sm",
+                    checked: f,
+                    onChange: () => L(a.value),
+                    style: { gap: 0 }
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "var(--text-sm)",
+                      color: "var(--text-base)",
+                      fontFamily: "var(--font-sans)"
+                    },
+                    children: a.label
+                  }
+                )
+              ]
+            },
+            a.value
+          );
+        }) })
+      }
+    )
+  ] });
+}
+function Z({ children: s, htmlFor: t, style: n }) {
+  return /* @__PURE__ */ e(
+    "label",
+    {
+      htmlFor: t,
+      style: {
+        display: "block",
+        fontSize: "var(--text-base)",
+        color: "var(--text-muted)",
+        marginBottom: "var(--spacing-1)",
+        fontFamily: "var(--font-sans)",
+        ...n
+      },
+      children: s
+    }
+  );
+}
+function _({
+  children: s,
+  onConfirm: t,
+  prompt: n = "Delete?",
+  confirmLabel: r = "Yes",
+  cancelLabel: o = "No",
+  style: l
+}) {
+  const [p, i] = x(!1);
+  return p ? /* @__PURE__ */ u(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "var(--spacing-1)",
+        ...l
+      },
+      children: [
+        /* @__PURE__ */ e(
+          "span",
+          {
+            style: {
+              fontSize: "var(--text-sm)",
+              color: "var(--text-muted)"
+            },
+            children: n
+          }
+        ),
+        /* @__PURE__ */ e(
+          D,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: (d) => {
+              d.stopPropagation(), t == null || t(), i(!1);
+            },
+            style: { color: "var(--text-ink)", fontWeight: "var(--font-semibold)" },
+            children: r
+          }
+        ),
+        /* @__PURE__ */ e(
+          D,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: (d) => {
+              d.stopPropagation(), i(!1);
+            },
+            children: o
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ e(
+    "span",
+    {
+      onClick: (d) => {
+        d.stopPropagation(), i(!0);
+      },
+      style: { cursor: "pointer", ...l },
+      children: s
+    }
+  );
+}
 export {
-  C as Badge,
-  e as Card,
-  S as Checkbox,
-  c as ColorPalette,
-  t as DetailCard,
-  r as DeviationIndicator,
-  f as FormLabel,
-  b as InlineConfirm,
-  d as MultiSelect,
-  B as SectionLabel,
-  g as Select,
-  s as SmallButton,
-  D as Tabs,
-  l as Tag,
-  I as TextArea,
-  F as TextInput,
-  T as Tooltip,
-  n as TooltipContent,
-  p as TooltipProvider,
-  m as TooltipTrigger
+  K as Badge,
+  te as Card,
+  P as Checkbox,
+  J as ColorPalette,
+  ne as DetailCard,
+  oe as DeviationIndicator,
+  Z as FormLabel,
+  _ as InlineConfirm,
+  X as MultiSelect,
+  pe as SectionLabel,
+  U as Select,
+  D as SmallButton,
+  fe as Tabs,
+  ae as Tag,
+  Q as TextArea,
+  ge as TextInput,
+  se as Tooltip,
+  le as TooltipContent,
+  de as TooltipProvider,
+  ce as TooltipTrigger
 };
 //# sourceMappingURL=primitives.es.js.map