chordia-ui 3.2.4 → 3.2.6

package/dist/FileUploadingState.es.js

@@ -0,0 +1,779 @@
+import { jsxs as d, jsx as e, Fragment as w } from "react/jsx-runtime";
+import { useState as k, useRef as C, useMemo as F, useEffect as D } from "react";
+import { Search as T, X as B, PlusCircle as j, FolderCheck as G } from "lucide-react";
+import { T as A } from "./TextInput.es.js";
+import { S as E } from "./SmallButton.es.js";
+const K = ({
+  options: t = [],
+  value: n = null,
+  onChange: r,
+  placeholder: o = "Search...",
+  disabled: c = !1,
+  showSuggestions: l = !0,
+  styling: f,
+  isAddNew: h = !1
+}) => {
+  const [s, p] = k(""), [g, x] = k(!1), [u, m] = k(null), y = C(null), S = F(() => {
+    if (!l)
+      return [];
+    const i = s.toLowerCase();
+    return t.filter((a) => {
+      if (!a)
+        return !1;
+      const b = a.label || "", v = a.value || "";
+      return (b.toLowerCase().includes(i) || v.toLowerCase().includes(i)) && (!u || a.value !== u.value);
+    });
+  }, [s, t, l, u]), W = F(() => {
+    if (!h)
+      return !1;
+    const i = s.toLowerCase();
+    return t.some((a) => {
+      if (!a)
+        return !1;
+      const b = a.label || "", v = a.value || "";
+      return b.toLowerCase() === i || v.toLowerCase() === i;
+    });
+  }, [t, s, h]);
+  D(() => {
+    if (!g)
+      return;
+    const i = (a) => {
+      y.current && !y.current.contains(a.target) && x(!1);
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, [g]);
+  const z = (i) => {
+    r == null || r(i), p(""), x(!1), m(null);
+  }, I = () => {
+    const i = { label: s, value: s };
+    m(i), r == null || r(i), x(!1), p("");
+  }, R = () => {
+    r == null || r(null), p(""), x(!1), m(null);
+  }, L = (i) => {
+    const a = i.target.value;
+    l ? (p(a), x(!0)) : h ? (p(a), x(a.length >= 3)) : r == null || r(a);
+  }, M = () => {
+    (l || h) && x(!0);
+  }, H = g && !n && s.length >= 3;
+  return /* @__PURE__ */ d("div", { className: "relative w-full", ref: y, children: [
+    /* @__PURE__ */ d(
+      "div",
+      {
+        className: f || "flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm",
+        children: [
+          /* @__PURE__ */ e(T, { className: "w-4 h-4 text-gray-400" }),
+          /* @__PURE__ */ e("div", { className: "flex-1", children: l && n ? /* @__PURE__ */ e(
+            "div",
+            {
+              className: "text-gray-800 truncate",
+              title: n.label,
+              style: {
+                fontSize: "var(--text-sm)",
+                fontWeight: "var(--font-medium)",
+                letterSpacing: "var(--tracking-normal)",
+                lineHeight: "var(--leading-normal)",
+                textTransform: "none",
+                textDecoration: "none",
+                fontFamily: "var(--font-sans)"
+              },
+              children: n.label
+            }
+          ) : /* @__PURE__ */ e(
+            A,
+            {
+              value: l || h ? s : n || "",
+              onChange: (i) => L({ target: { value: i } }),
+              placeholder: o,
+              disabled: c,
+              style: {
+                border: "none",
+                boxShadow: "none",
+                padding: 0,
+                backgroundColor: "transparent"
+              },
+              onFocus: M
+            }
+          ) }),
+          (n || u) && /* @__PURE__ */ e(
+            E,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: R,
+              style: {
+                padding: 0,
+                width: 20,
+                height: 20,
+                border: "none",
+                backgroundColor: "transparent",
+                color: "rgba(107,114,128,1)"
+              },
+              children: /* @__PURE__ */ e(B, { className: "w-3 h-3" })
+            }
+          )
+        ]
+      }
+    ),
+    H && /* @__PURE__ */ d(
+      "div",
+      {
+        className: "absolute w-full rounded-md border border-gray-300 bg-white shadow-lg custom-thin-scrollbar-library",
+        style: {
+          maxHeight: 240,
+          overflowY: "auto",
+          zIndex: 30
+        },
+        children: [
+          S.length > 0 && /* @__PURE__ */ e("ul", { className: "m-0 p-0 list-none", children: S.map((i) => /* @__PURE__ */ e(
+            "li",
+            {
+              onClick: () => z(i),
+              onMouseEnter: (a) => {
+                a.currentTarget.style.backgroundColor = "var(--hover-warm)";
+              },
+              onMouseLeave: (a) => {
+                a.currentTarget.style.backgroundColor = "transparent";
+              },
+              className: "cursor-pointer px-4 py-2",
+              title: i.label,
+              children: /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "truncate block w-full",
+                  style: {
+                    fontFamily: "var(--font-sans)",
+                    color: "var(--text-base)",
+                    fontSize: "var(--text-sm)",
+                    fontWeight: "var(--font-medium)",
+                    letterSpacing: "var(--tracking-normal)",
+                    lineHeight: "var(--leading-normal)",
+                    textTransform: "none",
+                    textDecoration: "none"
+                  },
+                  children: i.label
+                }
+              )
+            },
+            i.value
+          )) }),
+          h && !W && !u && s.length >= 3 && /* @__PURE__ */ d(
+            E,
+            {
+              type: "button",
+              variant: "secondary",
+              onClick: I,
+              style: {
+                width: "100%",
+                justifyContent: "space-between",
+                padding: "8px 10px",
+                border: "none",
+                borderTop: "1px solid rgba(229, 231, 235, 1)",
+                borderRadius: 0,
+                backgroundColor: "transparent",
+                color: "rgba(107,114,128,1)"
+              },
+              children: [
+                /* @__PURE__ */ e("span", { children: `Add "${s}"` }),
+                /* @__PURE__ */ e(j, { className: "w-5 h-5 text-green-500" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+function V({
+  open: t,
+  onClose: n,
+  title: r,
+  subtitle: o,
+  children: c,
+  footer: l,
+  width: f = 515,
+  height: h = 762,
+  toggleLabel: s,
+  toggleChecked: p,
+  onToggle: g
+}) {
+  const x = C(null);
+  return D(() => {
+    if (!t)
+      return;
+    const u = (m) => {
+      m.key === "Escape" && (n == null || n());
+    };
+    return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
+  }, [t, n]), t ? /* @__PURE__ */ d(w, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        onClick: n,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1200,
+          background: "rgba(0, 0, 0, 0.20)"
+        }
+      }
+    ),
+    /* @__PURE__ */ d(
+      "div",
+      {
+        ref: x,
+        style: {
+          position: "fixed",
+          top: "50%",
+          right: 0,
+          transform: "translateY(-50%)",
+          zIndex: 1201,
+          display: "flex",
+          width: f,
+          height: h,
+          maxHeight: "100vh",
+          padding: "20px",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          gap: "20px",
+          borderRadius: "12px 0 0 12px",
+          background: "#FFF",
+          boxShadow: "648px 0 100px 0 rgba(0, 0, 0, 0.20)"
+        },
+        children: [
+          /* @__PURE__ */ d(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ e(
+                  "h2",
+                  {
+                    style: {
+                      fontSize: "24px",
+                      fontWeight: 600,
+                      fontStyle: "normal",
+                      color: "var(--Grey-3, #252525)",
+                      margin: 0,
+                      lineHeight: "normal"
+                    },
+                    children: r
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: n,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "28px",
+                      height: "28px",
+                      border: "none",
+                      background: "transparent",
+                      color: "var(--Grey-Strong, #808183)",
+                      cursor: "pointer",
+                      borderRadius: "4px",
+                      transition: "background 0.15s ease"
+                    },
+                    onMouseEnter: (u) => {
+                      u.currentTarget.style.background = "#ECEEF2";
+                    },
+                    onMouseLeave: (u) => {
+                      u.currentTarget.style.background = "transparent";
+                    },
+                    children: /* @__PURE__ */ e(B, { size: 20, strokeWidth: 2 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "1px",
+                background: "#ECEEF2",
+                flexShrink: 0
+              }
+            }
+          ),
+          (o || s) && /* @__PURE__ */ d(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                gap: "12px",
+                flexShrink: 0
+              },
+              children: [
+                o && /* @__PURE__ */ e(
+                  "p",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      fontStyle: "normal",
+                      fontWeight: 400,
+                      lineHeight: "140%",
+                      color: "#0B0B0B",
+                      margin: 0,
+                      flex: 1
+                    },
+                    children: o
+                  }
+                ),
+                s && /* @__PURE__ */ d(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      flexShrink: 0
+                    },
+                    children: [
+                      /* @__PURE__ */ e(
+                        "button",
+                        {
+                          onClick: () => g == null ? void 0 : g(!p),
+                          style: {
+                            position: "relative",
+                            width: "40px",
+                            height: "22px",
+                            borderRadius: "11px",
+                            border: "none",
+                            background: p ? "var(--Base-Strong, #0B0B0B)" : "var(--Base-Faint, #D9D9D9)",
+                            cursor: "pointer",
+                            transition: "background 0.2s ease",
+                            padding: 0,
+                            flexShrink: 0
+                          },
+                          children: /* @__PURE__ */ e(
+                            "div",
+                            {
+                              style: {
+                                position: "absolute",
+                                top: "2px",
+                                left: p ? "20px" : "2px",
+                                width: "18px",
+                                height: "18px",
+                                borderRadius: "50%",
+                                background: "#FFF",
+                                transition: "left 0.2s ease",
+                                boxShadow: "0 1px 3px rgba(0,0,0,0.15)"
+                              }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "span",
+                        {
+                          style: {
+                            fontSize: "13px",
+                            fontWeight: 500,
+                            color: "var(--Base-Strong, #1E1E1E)",
+                            lineHeight: 1.4
+                          },
+                          children: s
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                flex: 1,
+                width: "100%",
+                overflowY: "auto",
+                display: "flex",
+                flexDirection: "column",
+                gap: "16px",
+                minHeight: 0
+              },
+              children: c
+            }
+          ),
+          l && /* @__PURE__ */ d(w, { children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  width: "100%",
+                  height: "1px",
+                  background: "#ECEEF2",
+                  flexShrink: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "flex-end",
+                  gap: "12px",
+                  width: "100%",
+                  flexShrink: 0
+                },
+                children: l
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) : null;
+}
+function X({
+  label: t,
+  variant: n = "secondary",
+  onClick: r,
+  disabled: o
+}) {
+  const c = n === "primary";
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      onClick: r,
+      disabled: o,
+      style: {
+        display: "flex",
+        height: "36px",
+        padding: "0 20px",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8px",
+        borderRadius: "6px",
+        border: c ? "none" : "1px solid #D9D9D9",
+        background: c ? "var(--Base-Strong, #0B0B0B)" : "var(--Base-White, #FFF)",
+        color: c ? "#FFF" : "var(--Base-Strong, #1E1E1E)",
+        fontSize: "16px",
+        fontWeight: 600,
+        cursor: o ? "default" : "pointer",
+        opacity: o ? 0.5 : 1,
+        transition: "all 0.15s ease"
+      },
+      onMouseEnter: (l) => {
+        !o && !c && (l.currentTarget.style.background = "#ECEEF2");
+      },
+      onMouseLeave: (l) => {
+        !o && !c && (l.currentTarget.style.background = "var(--Base-White, #FFF)");
+      },
+      children: t
+    }
+  );
+}
+function q({ children: t, htmlFor: n }) {
+  return /* @__PURE__ */ e(
+    "label",
+    {
+      htmlFor: n,
+      style: {
+        display: "block",
+        color: "var(--Base-Strong, #2E3236)",
+        fontSize: "16px",
+        fontStyle: "normal",
+        fontWeight: 400,
+        lineHeight: "normal",
+        marginBottom: "6px"
+      },
+      children: t
+    }
+  );
+}
+function J(t) {
+  return /* @__PURE__ */ e(
+    "input",
+    {
+      ...t,
+      style: {
+        width: "100%",
+        padding: "10px 12px",
+        borderRadius: "6px",
+        border: "1px solid #D9D9D9",
+        color: "var(--Base-Strong, #2E3236)",
+        fontSize: "16px",
+        fontStyle: "normal",
+        fontWeight: 400,
+        lineHeight: "normal",
+        outline: "none",
+        boxSizing: "border-box",
+        background: "#FFF",
+        transition: "border-color 0.15s ease",
+        ...t.style
+      },
+      onFocus: (n) => {
+        var r;
+        n.currentTarget.style.borderColor = "#808183", (r = t.onFocus) == null || r.call(t, n);
+      },
+      onBlur: (n) => {
+        var r;
+        n.currentTarget.style.borderColor = "#D9D9D9", (r = t.onBlur) == null || r.call(t, n);
+      }
+    }
+  );
+}
+function N({ size: t = 48 }) {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      width: t,
+      height: t,
+      viewBox: "0 0 48 48",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { animation: "file-upload-spin 1.2s linear infinite" },
+      children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M43 24C43 26.4951 42.5086 28.9658 41.5537 31.271C40.5989 33.5762 39.1993 35.6707 37.435 37.435C35.6707 39.1993 33.5762 40.5989 31.271 41.5537C28.9658 42.5086 26.4951 43 24 43C21.5049 43 19.0342 42.5086 16.729 41.5537C14.4238 40.5989 12.3293 39.1993 10.565 37.435C8.80066 35.6707 7.40113 33.5762 6.44629 31.271C5.49145 28.9658 5 26.4951 5 24",
+            stroke: "#F3E7C7",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M12 24C12 22.4241 12.3104 20.8637 12.9134 19.4078C13.5165 17.9519 14.4004 16.629 15.5147 15.5147C16.629 14.4004 17.9519 13.5165 19.4078 12.9134C20.8637 12.3104 22.4241 12 24 12C25.5759 12 27.1363 12.3104 28.5922 12.9134C30.0481 13.5165 31.371 14.4004 32.4853 15.5147C33.5996 16.629 34.4835 17.9519 35.0866 19.4078C35.6896 20.8637 36 22.4241 36 24",
+            stroke: "#00A66E",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M20 24C20 24.5253 20.1035 25.0454 20.3045 25.5307C20.5055 26.016 20.8001 26.457 21.1716 26.8284C21.543 27.1999 21.984 27.4945 22.4693 27.6955C22.9546 27.8965 23.4747 28 24 28C24.5253 28 25.0454 27.8965 25.5307 27.6955C26.016 27.4945 26.457 27.1999 26.8284 26.8284C27.1999 26.457 27.4945 26.016 27.6955 25.5307C27.8965 25.0454 28 24.5253 28 24",
+            stroke: "#F3E7C7",
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function Q({
+  title: t = "Uploading your file...",
+  subtitle: n = "Please wait while we process your file",
+  progress: r,
+  width: o = 648,
+  height: c = 281
+}) {
+  return /* @__PURE__ */ d(w, { children: [
+    /* @__PURE__ */ e("style", { children: `
+        @keyframes file-upload-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` }),
+    /* @__PURE__ */ d(
+      "div",
+      {
+        style: {
+          display: "flex",
+          width: o,
+          height: c,
+          padding: "88px 64px 64px 64px",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "8px",
+          borderRadius: "12px",
+          border: "2px dashed #D9D9D9",
+          background: "var(--Grey-White, #FFF)",
+          boxSizing: "border-box"
+        },
+        children: [
+          /* @__PURE__ */ e(N, { size: 48 }),
+          /* @__PURE__ */ e(
+            "p",
+            {
+              style: {
+                fontSize: "16px",
+                fontWeight: 600,
+                color: "var(--Base-Strong, #2E3236)",
+                margin: 0,
+                lineHeight: "normal",
+                textAlign: "center"
+              },
+              children: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            "p",
+            {
+              style: {
+                fontSize: "13px",
+                fontWeight: 400,
+                color: "var(--Grey-Strong, #808183)",
+                margin: 0,
+                lineHeight: "140%",
+                textAlign: "center"
+              },
+              children: n
+            }
+          ),
+          r !== void 0 && /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                width: "200px",
+                height: "4px",
+                borderRadius: "2px",
+                background: "#ECEEF2",
+                marginTop: "8px",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  style: {
+                    width: `${Math.min(100, Math.max(0, r))}%`,
+                    height: "100%",
+                    borderRadius: "2px",
+                    background: "var(--Green-Primary, #00A66E)",
+                    transition: "width 0.3s ease"
+                  }
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function Z({
+  title: t = "File uploaded successfully!",
+  subtitle: n = "13 files have been uploaded to your project",
+  actionLabel: r = "Add more files",
+  onAction: o,
+  width: c = 648,
+  height: l = 281
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      style: {
+        display: "flex",
+        width: c,
+        height: l,
+        padding: "88px 64px 64px 64px",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8px",
+        borderRadius: "12px",
+        border: "1px solid #D9D9D9",
+        background: "var(--Grey-White, #FFF)",
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              display: "flex",
+              width: "64px",
+              height: "64px",
+              justifyContent: "center",
+              alignItems: "center",
+              borderRadius: "9999px",
+              background: "var(--Focus-2, #FAF5E9)",
+              flexShrink: 0,
+              marginBottom: "8px"
+            },
+            children: /* @__PURE__ */ e(G, { size: 24, strokeWidth: 2, color: "var(--Base-Strong, #2E3236)" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          "p",
+          {
+            style: {
+              fontSize: "16px",
+              fontWeight: 600,
+              color: "var(--Base-Strong, #2E3236)",
+              margin: 0,
+              lineHeight: "normal",
+              textAlign: "center"
+            },
+            children: t
+          }
+        ),
+        /* @__PURE__ */ e(
+          "p",
+          {
+            style: {
+              fontSize: "13px",
+              fontWeight: 400,
+              color: "var(--Grey-Strong, #808183)",
+              margin: 0,
+              lineHeight: "140%",
+              textAlign: "center"
+            }
+          }
+        ),
+        r && o && /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: o,
+            style: {
+              display: "flex",
+              padding: "8px 20px",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: "8px",
+              borderRadius: "6px",
+              border: "1px solid #D9D9D9",
+              background: "var(--Base-White, #FFF)",
+              color: "var(--Grey-Strong, #808183)",
+              fontSize: "14px",
+              fontWeight: 500,
+              cursor: "pointer",
+              marginTop: "8px",
+              transition: "all 0.15s ease"
+            },
+            onMouseEnter: (f) => {
+              f.currentTarget.style.background = "#ECEEF2";
+            },
+            onMouseLeave: (f) => {
+              f.currentTarget.style.background = "var(--Base-White, #FFF)";
+            },
+            children: r
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  K as A,
+  X as D,
+  Q as F,
+  V as S,
+  q as a,
+  J as b,
+  Z as c
+};
+//# sourceMappingURL=FileUploadingState.es.js.map