chordia-ui 3.3.8 → 3.3.9

package/dist/InlineConfirm.es.js

@@ -1,618 +0,0 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { useState as x, useRef as D, useEffect as M } from "react";
-import { Check as E } from "lucide-react";
-import { S as O } from "./SmallButton.es.js";
-function G({ 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 J({ 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 $({
-  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 P = {
-  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 K({
-  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: {
-        ...P,
-        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 Q({
-  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 U({
-  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, R] = x(!1), [j, T] = x(null), [g, B] = x(n), [I, h] = x(null), b = D(null), S = D(null);
-  M(() => {
-    B(n);
-  }, [n]);
-  const w = new Set((s || []).map(String)), L = (a) => {
-    if (!t) return;
-    const v = String(a), m = new Set(w);
-    m.has(v) ? m.delete(v) : m.add(v), t(Array.from(m));
-  };
-  M(() => {
-    if (!c) return;
-    const a = (v) => {
-      b.current && !b.current.contains(v.target) && S.current && !S.current.contains(v.target) && R(!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 && R((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 v = w.has(String(a.value)), m = I === 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: () => T(String(a.value)),
-              onMouseLeave: () => T(null),
-              draggable: d,
-              onDragStart: (f) => {
-                d && (h(String(a.value)), f.dataTransfer && (f.dataTransfer.effectAllowed = "move"));
-              },
-              onDragOver: (f) => {
-                d && f.preventDefault();
-              },
-              onDrop: (f) => {
-                if (!d) return;
-                f.preventDefault();
-                const k = g.findIndex(
-                  (z) => String(z.value) === I
-                ), C = g.findIndex(
-                  (z) => String(z.value) === String(a.value)
-                );
-                if (k === -1 || C === -1 || k === C) {
-                  h(null);
-                  return;
-                }
-                const F = [...g], [W] = F.splice(k, 1);
-                F.splice(C, 0, W), B(F), 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: (f) => {
-                      f.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(
-                  $,
-                  {
-                    size: "sm",
-                    checked: v,
-                    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 X({ 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 Z({
-  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(
-          O,
-          {
-            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(
-          O,
-          {
-            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 {
-  J as B,
-  $ as C,
-  X as F,
-  Z as I,
-  U as M,
-  Q as S,
-  K as T,
-  G as a
-};
-//# sourceMappingURL=InlineConfirm.es.js.map