chordia-ui 3.2.4 → 3.2.5

package/dist/SideDrawer.es.js

@@ -0,0 +1,486 @@
+import { jsxs as d, jsx as e, Fragment as S } from "react/jsx-runtime";
+import { useState as w, useRef as B, useMemo as E, useEffect as D } from "react";
+import { Search as N, X as I, PlusCircle as O } from "lucide-react";
+import { T } from "./TextInput.es.js";
+import { S as F } from "./SmallButton.es.js";
+const V = ({
+  options: c = [],
+  value: a = null,
+  onChange: n,
+  placeholder: s = "Search...",
+  disabled: u = !1,
+  showSuggestions: i = !0,
+  styling: y,
+  isAddNew: x = !1
+}) => {
+  const [l, f] = w(""), [h, p] = w(!1), [o, m] = w(null), b = B(null), k = E(() => {
+    if (!i)
+      return [];
+    const t = l.toLowerCase();
+    return c.filter((r) => {
+      if (!r)
+        return !1;
+      const v = r.label || "", g = r.value || "";
+      return (v.toLowerCase().includes(t) || g.toLowerCase().includes(t)) && (!o || r.value !== o.value);
+    });
+  }, [l, c, i, o]), z = E(() => {
+    if (!x)
+      return !1;
+    const t = l.toLowerCase();
+    return c.some((r) => {
+      if (!r)
+        return !1;
+      const v = r.label || "", g = r.value || "";
+      return v.toLowerCase() === t || g.toLowerCase() === t;
+    });
+  }, [c, l, x]);
+  D(() => {
+    if (!h)
+      return;
+    const t = (r) => {
+      b.current && !b.current.contains(r.target) && p(!1);
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [h]);
+  const L = (t) => {
+    n == null || n(t), f(""), p(!1), m(null);
+  }, R = () => {
+    const t = { label: l, value: l };
+    m(t), n == null || n(t), p(!1), f("");
+  }, j = () => {
+    n == null || n(null), f(""), p(!1), m(null);
+  }, H = (t) => {
+    const r = t.target.value;
+    i ? (f(r), p(!0)) : x ? (f(r), p(r.length >= 3)) : n == null || n(r);
+  }, M = () => {
+    (i || x) && p(!0);
+  }, W = h && !a && l.length >= 3;
+  return /* @__PURE__ */ d("div", { className: "relative w-full", ref: b, children: [
+    /* @__PURE__ */ d(
+      "div",
+      {
+        className: y || "flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm",
+        children: [
+          /* @__PURE__ */ e(N, { className: "w-4 h-4 text-gray-400" }),
+          /* @__PURE__ */ e("div", { className: "flex-1", children: i && a ? /* @__PURE__ */ e(
+            "div",
+            {
+              className: "text-gray-800 truncate",
+              title: a.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: a.label
+            }
+          ) : /* @__PURE__ */ e(
+            T,
+            {
+              value: i || x ? l : a || "",
+              onChange: (t) => H({ target: { value: t } }),
+              placeholder: s,
+              disabled: u,
+              style: {
+                border: "none",
+                boxShadow: "none",
+                padding: 0,
+                backgroundColor: "transparent"
+              },
+              onFocus: M
+            }
+          ) }),
+          (a || o) && /* @__PURE__ */ e(
+            F,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: j,
+              style: {
+                padding: 0,
+                width: 20,
+                height: 20,
+                border: "none",
+                backgroundColor: "transparent",
+                color: "rgba(107,114,128,1)"
+              },
+              children: /* @__PURE__ */ e(I, { className: "w-3 h-3" })
+            }
+          )
+        ]
+      }
+    ),
+    W && /* @__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: [
+          k.length > 0 && /* @__PURE__ */ e("ul", { className: "m-0 p-0 list-none", children: k.map((t) => /* @__PURE__ */ e(
+            "li",
+            {
+              onClick: () => L(t),
+              onMouseEnter: (r) => {
+                r.currentTarget.style.backgroundColor = "var(--hover-warm)";
+              },
+              onMouseLeave: (r) => {
+                r.currentTarget.style.backgroundColor = "transparent";
+              },
+              className: "cursor-pointer px-4 py-2",
+              title: t.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: t.label
+                }
+              )
+            },
+            t.value
+          )) }),
+          x && !z && !o && l.length >= 3 && /* @__PURE__ */ d(
+            F,
+            {
+              type: "button",
+              variant: "secondary",
+              onClick: R,
+              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 "${l}"` }),
+                /* @__PURE__ */ e(O, { className: "w-5 h-5 text-green-500" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+function X({
+  open: c,
+  onClose: a,
+  title: n,
+  subtitle: s,
+  children: u,
+  footer: i,
+  width: y = 515,
+  height: x = 762,
+  toggleLabel: l,
+  toggleChecked: f,
+  onToggle: h
+}) {
+  const p = B(null);
+  return D(() => {
+    if (!c)
+      return;
+    const o = (m) => {
+      m.key === "Escape" && (a == null || a());
+    };
+    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
+  }, [c, a]), c ? /* @__PURE__ */ d(S, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        onClick: a,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1200,
+          background: "rgba(0, 0, 0, 0.20)"
+        }
+      }
+    ),
+    /* @__PURE__ */ d(
+      "div",
+      {
+        ref: p,
+        style: {
+          position: "fixed",
+          top: "50%",
+          right: 0,
+          transform: "translateY(-50%)",
+          zIndex: 1201,
+          display: "flex",
+          width: y,
+          height: x,
+          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: "20px",
+                      fontWeight: 700,
+                      color: "var(--Base-Strong, #0B0B0B)",
+                      margin: 0,
+                      lineHeight: 1.3
+                    },
+                    children: n
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: a,
+                    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: (o) => {
+                      o.currentTarget.style.background = "#ECEEF2";
+                    },
+                    onMouseLeave: (o) => {
+                      o.currentTarget.style.background = "transparent";
+                    },
+                    children: /* @__PURE__ */ e(I, { size: 20, strokeWidth: 2 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "1px",
+                background: "#ECEEF2",
+                flexShrink: 0
+              }
+            }
+          ),
+          (s || l) && /* @__PURE__ */ d(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                gap: "12px",
+                flexShrink: 0
+              },
+              children: [
+                s && /* @__PURE__ */ e(
+                  "p",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      lineHeight: 1.5,
+                      color: "var(--Grey-Strong, #808183)",
+                      margin: 0,
+                      flex: 1
+                    },
+                    children: s
+                  }
+                ),
+                l && /* @__PURE__ */ d(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      flexShrink: 0
+                    },
+                    children: [
+                      /* @__PURE__ */ e(
+                        "button",
+                        {
+                          onClick: () => h == null ? void 0 : h(!f),
+                          style: {
+                            position: "relative",
+                            width: "40px",
+                            height: "22px",
+                            borderRadius: "11px",
+                            border: "none",
+                            background: f ? "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: f ? "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: l
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                flex: 1,
+                width: "100%",
+                overflowY: "auto",
+                display: "flex",
+                flexDirection: "column",
+                gap: "16px",
+                minHeight: 0
+              },
+              children: u
+            }
+          ),
+          i && /* @__PURE__ */ d(S, { 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: i
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) : null;
+}
+function $({
+  label: c,
+  variant: a = "secondary",
+  onClick: n,
+  disabled: s
+}) {
+  const u = a === "primary";
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      onClick: n,
+      disabled: s,
+      style: {
+        display: "flex",
+        height: "36px",
+        padding: "0 20px",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8px",
+        borderRadius: "6px",
+        border: u ? "none" : "1px solid #D9D9D9",
+        background: u ? "var(--Base-Strong, #0B0B0B)" : "var(--Base-White, #FFF)",
+        color: u ? "#FFF" : "var(--Base-Strong, #1E1E1E)",
+        fontSize: "14px",
+        fontWeight: 600,
+        cursor: s ? "default" : "pointer",
+        opacity: s ? 0.5 : 1,
+        transition: "all 0.15s ease"
+      },
+      onMouseEnter: (i) => {
+        !s && !u && (i.currentTarget.style.background = "#ECEEF2");
+      },
+      onMouseLeave: (i) => {
+        !s && !u && (i.currentTarget.style.background = "var(--Base-White, #FFF)");
+      },
+      children: c
+    }
+  );
+}
+export {
+  V as A,
+  $ as D,
+  X as S
+};
+//# sourceMappingURL=SideDrawer.es.js.map

package/dist/SideDrawer.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideDrawer.es.js","sources":["../src/components/common/AutoSearch.jsx","../src/components/common/SideDrawer.jsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useMemo, useRef, useEffect } from \"react\";\nimport { X, Search, PlusCircle } from \"lucide-react\";\nimport TextInput from \"../primitives/TextInput\";\nimport SmallButton from \"../primitives/SmallButton\";\n\nconst AutoSearch = ({\n  options = [],\n  value = null,\n  onChange,\n  placeholder = \"Search...\",\n  disabled = false,\n  showSuggestions = true,\n  styling,\n  isAddNew = false,\n}) => {\n  const [search, setSearch] = useState(\"\");\n  const [isOpen, setIsOpen] = useState(false);\n  const [addedOption, setAddedOption] = useState(null);\n\n  const containerRef = useRef(null);\n\n  const filteredOptions = useMemo(() => {\n    if (!showSuggestions) return [];\n    const lower = search.toLowerCase();\n\n    return options.filter((opt) => {\n      if (!opt) return false;\n      const label = opt.label || \"\";\n      const val = opt.value || \"\";\n      return (\n        (label.toLowerCase().includes(lower) ||\n          val.toLowerCase().includes(lower)) &&\n        (!addedOption || opt.value !== addedOption.value)\n      );\n    });\n  }, [search, options, showSuggestions, addedOption]);\n\n  const exactMatchExists = useMemo(() => {\n    if (!isAddNew) return false;\n    const lower = search.toLowerCase();\n    return options.some((opt) => {\n      if (!opt) return false;\n      const label = opt.label || \"\";\n      const val = opt.value || \"\";\n      return label.toLowerCase() === lower || val.toLowerCase() === lower;\n    });\n  }, [options, search, isAddNew]);\n\n  // Close dropdown on outside click\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleClickOutside = (event) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(event.target)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [isOpen]);\n\n  const handleSelect = (opt) => {\n    onChange?.(opt);\n    setSearch(\"\");\n    setIsOpen(false);\n    setAddedOption(null);\n  };\n\n  const handleAddNew = () => {\n    const newOpt = { label: search, value: search };\n    setAddedOption(newOpt);\n    onChange?.(newOpt);\n    setIsOpen(false);\n    setSearch(\"\");\n  };\n\n  const handleClear = () => {\n    onChange?.(null);\n    setSearch(\"\");\n    setIsOpen(false);\n    setAddedOption(null);\n  };\n\n  const handleInputChange = (e) => {\n    const newValue = e.target.value;\n    if (showSuggestions) {\n      setSearch(newValue);\n      setIsOpen(true);\n    } else if (isAddNew) {\n      setSearch(newValue);\n      setIsOpen(newValue.length >= 3);\n    } else {\n      onChange?.(newValue);\n    }\n  };\n\n  const handleInputFocus = () => {\n    if (showSuggestions || isAddNew) {\n      setIsOpen(true);\n    }\n  };\n\n  const shouldShowDropdown =\n    isOpen && !value && (showSuggestions ? search.length >= 3 : search.length >= 3);\n\n  return (\n    <div className=\"relative w-full\" ref={containerRef}>\n      <div\n        className={\n          styling\n            ? styling\n            : \"flex items-center gap-2 border rounded-md px-3 py-2 bg-white shadow-sm\"\n        }\n      >\n        <Search className=\"w-4 h-4 text-gray-400\" />\n        <div className=\"flex-1\">\n          {showSuggestions && value ? (\n            <div\n              className=\"text-gray-800 truncate\"\n              title={value.label}\n              style={{\n                fontSize: 'var(--text-sm)',\n                fontWeight: 'var(--font-medium)',\n                letterSpacing: 'var(--tracking-normal)',\n                lineHeight: 'var(--leading-normal)',\n                textTransform: 'none',\n                textDecoration: 'none',\n                fontFamily: 'var(--font-sans)',\n              }}\n            >\n              {value.label}\n            </div>\n          ) : (\n            <TextInput\n              value={showSuggestions || isAddNew ? search : value || \"\"}\n              onChange={(val) =>\n                handleInputChange({ target: { value: val } })\n              }\n              placeholder={placeholder}\n              disabled={disabled}\n              style={{\n                border: \"none\",\n                boxShadow: \"none\",\n                padding: 0,\n                backgroundColor: \"transparent\",\n              }}\n              onFocus={handleInputFocus}\n            />\n          )}\n        </div>\n        {(value || addedOption) && (\n          <SmallButton\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={handleClear}\n            style={{\n              padding: 0,\n              width: 20,\n              height: 20,\n              border: \"none\",\n              backgroundColor: \"transparent\",\n              color: \"rgba(107,114,128,1)\",\n            }}\n          >\n            <X className=\"w-3 h-3\" />\n          </SmallButton>\n        )}\n      </div>\n\n      {shouldShowDropdown && (\n        <div\n          className=\"absolute w-full rounded-md border border-gray-300 bg-white shadow-lg custom-thin-scrollbar-library\"\n          style={{\n            maxHeight: 240,\n            overflowY: \"auto\",\n            zIndex: 30,\n          }}\n        >\n          {filteredOptions.length > 0 && (\n            <ul className=\"m-0 p-0 list-none\">\n              {filteredOptions.map((opt) => (\n                <li\n                  key={opt.value}\n                  onClick={() => handleSelect(opt)}\n                  onMouseEnter={(e) => {\n                    e.currentTarget.style.backgroundColor = \"var(--hover-warm)\";\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor = \"transparent\";\n                  }}\n                  className=\"cursor-pointer px-4 py-2\"\n                  title={opt.label}\n                >\n                  <span\n                    className=\"truncate block w-full\"\n                    style={{\n                      fontFamily: \"var(--font-sans)\",\n                      color: \"var(--text-base)\",\n                      fontSize: \"var(--text-sm)\",\n                      fontWeight: \"var(--font-medium)\",\n                      letterSpacing: \"var(--tracking-normal)\",\n                      lineHeight: \"var(--leading-normal)\",\n                      textTransform: \"none\",\n                      textDecoration: \"none\",\n                    }}\n                  >\n                    {opt.label}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          )}\n\n          {isAddNew &&\n            !exactMatchExists &&\n            !addedOption &&\n            search.length >= 3 && (\n              <SmallButton\n                type=\"button\"\n                variant=\"secondary\"\n                onClick={handleAddNew}\n                style={{\n                  width: \"100%\",\n                  justifyContent: \"space-between\",\n                  padding: \"8px 10px\",\n                  border: \"none\",\n                  borderTop: \"1px solid rgba(229, 231, 235, 1)\",\n                  borderRadius: 0,\n                  backgroundColor: \"transparent\",\n                  color: \"rgba(107,114,128,1)\",\n                }}\n              >\n                <span>{`Add \"${search}\"`}</span>\n                <PlusCircle className=\"w-5 h-5 text-green-500\" />\n              </SmallButton>\n            )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AutoSearch;\n\n","\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\nimport { X } from \"lucide-react\";\n\n/**\n * SideDrawer — slide-in panel from the right edge.\n *\n * Props:\n *  - open          boolean       Whether the drawer is visible\n *  - onClose       function      Close callback\n *  - title         string        Header title\n *  - subtitle      string        Optional description below the divider\n *  - children      ReactNode     Drawer body content\n *  - footer        ReactNode     Optional fixed footer (e.g. Cancel/Save buttons)\n *  - width         number|string Drawer width (default 515)\n *  - height        number|string Drawer height (default 762)\n *  - toggleLabel   string        Optional toggle label (right side of subtitle row)\n *  - toggleChecked boolean       Toggle state\n *  - onToggle      function      Toggle callback\n */\nexport default function SideDrawer({\n  open,\n  onClose,\n  title,\n  subtitle,\n  children,\n  footer,\n  width = 515,\n  height = 762,\n  toggleLabel,\n  toggleChecked,\n  onToggle,\n}) {\n  const drawerRef = useRef(null);\n\n  // Close on Escape key\n  useEffect(() => {\n    if (!open) return;\n    const handleKey = (e) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, onClose]);\n\n  if (!open) return null;\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div\n        onClick={onClose}\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: 1200,\n          background: \"rgba(0, 0, 0, 0.20)\",\n        }}\n      />\n\n      {/* Drawer panel */}\n      <div\n        ref={drawerRef}\n        style={{\n          position: \"fixed\",\n          top: \"50%\",\n          right: 0,\n          transform: \"translateY(-50%)\",\n          zIndex: 1201,\n          display: \"flex\",\n          width,\n          height,\n          maxHeight: \"100vh\",\n          padding: \"20px\",\n          flexDirection: \"column\",\n          alignItems: \"flex-start\",\n          gap: \"20px\",\n          borderRadius: \"12px 0 0 12px\",\n          background: \"#FFF\",\n          boxShadow: \"648px 0 100px 0 rgba(0, 0, 0, 0.20)\",\n        }}\n      >\n        {/* Header: Title + Close */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            width: \"100%\",\n            flexShrink: 0,\n          }}\n        >\n          <h2\n            style={{\n              fontSize: \"20px\",\n              fontWeight: 700,\n              color: \"var(--Base-Strong, #0B0B0B)\",\n              margin: 0,\n              lineHeight: 1.3,\n            }}\n          >\n            {title}\n          </h2>\n          <button\n            onClick={onClose}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              width: \"28px\",\n              height: \"28px\",\n              border: \"none\",\n              background: \"transparent\",\n              color: \"var(--Grey-Strong, #808183)\",\n              cursor: \"pointer\",\n              borderRadius: \"4px\",\n              transition: \"background 0.15s ease\",\n            }}\n            onMouseEnter={(e) => {\n              e.currentTarget.style.background = \"#ECEEF2\";\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.background = \"transparent\";\n            }}\n          >\n            <X size={20} strokeWidth={2} />\n          </button>\n        </div>\n\n        {/* Divider */}\n        <div\n          style={{\n            width: \"100%\",\n            height: \"1px\",\n            background: \"#ECEEF2\",\n            flexShrink: 0,\n          }}\n        />\n\n        {/* Subtitle row with optional toggle */}\n        {(subtitle || toggleLabel) && (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n              width: \"100%\",\n              gap: \"12px\",\n              flexShrink: 0,\n            }}\n          >\n            {subtitle && (\n              <p\n                style={{\n                  fontSize: \"13px\",\n                  lineHeight: 1.5,\n                  color: \"var(--Grey-Strong, #808183)\",\n                  margin: 0,\n                  flex: 1,\n                }}\n              >\n                {subtitle}\n              </p>\n            )}\n            {toggleLabel && (\n              <div\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  flexShrink: 0,\n                }}\n              >\n                {/* Toggle switch */}\n                <button\n                  onClick={() => onToggle?.(!toggleChecked)}\n                  style={{\n                    position: \"relative\",\n                    width: \"40px\",\n                    height: \"22px\",\n                    borderRadius: \"11px\",\n                    border: \"none\",\n                    background: toggleChecked\n                      ? \"var(--Base-Strong, #0B0B0B)\"\n                      : \"var(--Base-Faint, #D9D9D9)\",\n                    cursor: \"pointer\",\n                    transition: \"background 0.2s ease\",\n                    padding: 0,\n                    flexShrink: 0,\n                  }}\n                >\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      top: \"2px\",\n                      left: toggleChecked ? \"20px\" : \"2px\",\n                      width: \"18px\",\n                      height: \"18px\",\n                      borderRadius: \"50%\",\n                      background: \"#FFF\",\n                      transition: \"left 0.2s ease\",\n                      boxShadow: \"0 1px 3px rgba(0,0,0,0.15)\",\n                    }}\n                  />\n                </button>\n                <span\n                  style={{\n                    fontSize: \"13px\",\n                    fontWeight: 500,\n                    color: \"var(--Base-Strong, #1E1E1E)\",\n                    lineHeight: 1.4,\n                  }}\n                >\n                  {toggleLabel}\n                </span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Body content — scrollable */}\n        <div\n          style={{\n            flex: 1,\n            width: \"100%\",\n            overflowY: \"auto\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"16px\",\n            minHeight: 0,\n          }}\n        >\n          {children}\n        </div>\n\n        {/* Footer */}\n        {footer && (\n          <>\n            <div\n              style={{\n                width: \"100%\",\n                height: \"1px\",\n                background: \"#ECEEF2\",\n                flexShrink: 0,\n              }}\n            />\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"flex-end\",\n                gap: \"12px\",\n                width: \"100%\",\n                flexShrink: 0,\n              }}\n            >\n              {footer}\n            </div>\n          </>\n        )}\n      </div>\n    </>\n  );\n}\n\n/**\n * DrawerButton — standard button for use in SideDrawer footer.\n *\n * Props:\n *  - label     string\n *  - variant   \"primary\" | \"secondary\" (default \"secondary\")\n *  - onClick   function\n *  - disabled  boolean\n */\nexport function DrawerButton({\n  label,\n  variant = \"secondary\",\n  onClick,\n  disabled,\n}) {\n  const isPrimary = variant === \"primary\";\n\n  return (\n    <button\n      onClick={onClick}\n      disabled={disabled}\n      style={{\n        display: \"flex\",\n        height: \"36px\",\n        padding: \"0 20px\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gap: \"8px\",\n        borderRadius: \"6px\",\n        border: isPrimary ? \"none\" : \"1px solid #D9D9D9\",\n        background: isPrimary\n          ? \"var(--Base-Strong, #0B0B0B)\"\n          : \"var(--Base-White, #FFF)\",\n        color: isPrimary ? \"#FFF\" : \"var(--Base-Strong, #1E1E1E)\",\n        fontSize: \"14px\",\n        fontWeight: 600,\n        cursor: disabled ? \"default\" : \"pointer\",\n        opacity: disabled ? 0.5 : 1,\n        transition: \"all 0.15s ease\",\n      }}\n      onMouseEnter={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"#ECEEF2\";\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!disabled && !isPrimary) {\n          e.currentTarget.style.background = \"var(--Base-White, #FFF)\";\n        }\n      }}\n    >\n      {label}\n    </button>\n  );\n}\n"],"names":["AutoSearch","options","value","onChange","placeholder","disabled","showSuggestions","styling","isAddNew","search","setSearch","useState","isOpen","setIsOpen","addedOption","setAddedOption","containerRef","useRef","filteredOptions","useMemo","lower","opt","label","val","exactMatchExists","useEffect","handleClickOutside","event","handleSelect","handleAddNew","newOpt","handleClear","handleInputChange","e","newValue","handleInputFocus","shouldShowDropdown","jsxs","jsx","Search","TextInput","SmallButton","X","PlusCircle","SideDrawer","open","onClose","title","subtitle","children","footer","width","height","toggleLabel","toggleChecked","onToggle","drawerRef","handleKey","Fragment","DrawerButton","variant","onClick","isPrimary"],"mappings":"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"}

package/dist/UploadInteraction.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),f=require("react"),p=require("lucide-react"),i="var(--font-sans)",b={padding:"40px 48px",fontFamily:i,minHeight:"100vh",background:"var(--grey-white)",boxSizing:"border-box"},j={fontSize:"var(--text-4xl)",fontWeight:"var(--font-bold)",fontFamily:i,color:"var(--text-ink)",margin:0,letterSpacing:"var(--tracking-tight)",lineHeight:"var(--leading-tight)"},S={fontSize:14,fontStyle:"normal",fontWeight:400,lineHeight:"140%",color:"var(--color-text-secondary)",margin:"8px 0 0",fontFamily:i},w={display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginTop:"36px"},v={display:"flex",height:160,padding:24,flexDirection:"column",justifyContent:"space-between",alignItems:"flex-start",borderRadius:12,border:"1px solid var(--grey-absent)",background:"var(--grey-white)",boxSizing:"border-box",transition:"var(--transition)",cursor:"default",gap:8},z={...v,boxShadow:"var(--shadow-sm)"},C={width:40,height:40,borderRadius:"var(--radius)",background:"var(--paper-secondary)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--text-base)"},k={color:"var(--grey-strong)",fontSize:20,fontStyle:"normal",fontWeight:600,lineHeight:"normal",fontFamily:i,margin:0},W={fontSize:13,fontStyle:"normal",fontWeight:400,lineHeight:"140%",color:"var(--text-base)",margin:0,fontFamily:i,flex:"1 0 0"},D={display:"flex",height:28,padding:10,justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,background:"var(--grey-strong)",fontSize:14,fontStyle:"normal",fontWeight:600,lineHeight:1,fontFamily:i,color:"var(--grey-white)",border:"none",cursor:"pointer",transition:"var(--transition-fast)",outline:"none",boxSizing:"border-box"},H={flex:1,height:8,borderRadius:4,background:"var(--border)",overflow:"hidden"},I=n=>({width:`${n}%`,height:"100%",borderRadius:4,background:"var(--color-green)",transition:"width 0.4s ease-out"}),R={display:"inline-flex",alignItems:"center",gap:4,fontSize:"var(--text-xs)",fontWeight:"var(--font-semibold)",color:"var(--rail-compliance)",fontFamily:i,marginLeft:12};function u({icon:n,title:a,description:r,buttonLabel:s,onAction:c,recommended:g,children:h}){const[l,y]=f.useState(!1);return e.jsxs("div",{style:l?z:v,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),children:[e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[e.jsx("div",{style:C,children:n}),e.jsx("h3",{style:k,children:a})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4,marginLeft:52,marginTop:4},children:[r&&e.jsx("p",{style:W,children:r}),h]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",marginLeft:52},children:[e.jsx("button",{style:D,onClick:c,onMouseEnter:t=>{t.currentTarget.style.opacity="0.85"},onMouseLeave:t=>{t.currentTarget.style.opacity="1"},children:s}),g&&e.jsxs("span",{style:R,children:[e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"})}),"Recommended"]})]})]})}const T=({userName:n="Will",stepsCompleted:a=4,totalSteps:r=6,onUpload:s,onContinue:c,onExplore:g,onConnect:h})=>{const l=a/r*100;return e.jsxs("div",{style:b,children:[e.jsxs("h1",{style:j,children:["Welcome ",n]}),e.jsx("p",{style:S,children:"Get started with your project or explore new features"}),e.jsxs("div",{style:w,children:[e.jsx(u,{icon:e.jsx(p.Upload,{size:24}),title:"Upload and Evaluate Audio",description:"Upload Audio Files to Run Evaluations: MP3, WMA or WAV (up to 50 files, max 325MB total)",buttonLabel:"Upload",onAction:s}),e.jsx(u,{icon:e.jsx(p.CircleUser,{size:24}),title:"Getting started with Chordia",description:"Complete these steps to get the most out of Chordia.",buttonLabel:"Continue",onAction:c,children:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,width:"100%"},children:[e.jsx("div",{style:H,children:e.jsx("div",{style:I(l)})}),e.jsxs("span",{style:{fontSize:12,color:"var(--text-muted)",fontFamily:i,whiteSpace:"nowrap"},children:[e.jsx("strong",{style:{color:"var(--text-base)",fontWeight:600},children:a})," of ",r," steps completed"]})]})}),e.jsx(u,{icon:e.jsx(p.Compass,{size:24}),title:"Explore Demo Projects",description:"Explore how Chordia Compass transforms real data into insights with plans, dashboards, and evaluations.",buttonLabel:"Explore",onAction:g,recommended:!0}),e.jsx(u,{icon:e.jsx(p.Link2,{size:24}),title:"Connect Data Source",description:"Connect and integrate third-party tools with your external data sources.",buttonLabel:"Connect",onAction:h})]})]})},d="var(--font-sans)",L={fontFamily:d},A={fontSize:20,fontWeight:600,fontStyle:"normal",fontFamily:d,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},F={fontSize:13,fontWeight:400,fontStyle:"normal",color:"var(--color-text-secondary)",fontFamily:d,margin:"4px 0 0",lineHeight:"140%"},m={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"100%",minHeight:320,borderRadius:16,border:"2px dashed var(--color-input-border)",background:"var(--grey-white)",boxSizing:"border-box",cursor:"pointer",transition:"var(--transition-fast)",marginTop:24,padding:"48px 24px"},M={...m,borderColor:"var(--color-green)",background:"var(--color-green-ring)"},E={width:80,height:80,borderRadius:9999,background:"var(--focus-2)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,marginBottom:20},U={fontSize:18,fontWeight:600,fontFamily:d,color:"var(--grey-strong)",textAlign:"center",lineHeight:"28px",margin:0},B={display:"flex",height:32,padding:16,justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,border:"1px solid var(--grey-absent)",background:"var(--grey-white)",fontSize:15,fontWeight:400,fontFamily:d,color:"var(--grey-strong)",cursor:"pointer",transition:"var(--transition-fast)",outline:"none",marginTop:16,boxSizing:"border-box"},O={fontSize:14,fontWeight:400,fontFamily:d,color:"var(--grey-muted)",textAlign:"center",marginTop:16,lineHeight:"140%"},P=({onFileSelect:n})=>{const[a,r]=f.useState(!1),s=f.useRef(null),c=t=>{t.preventDefault(),r(!0)},g=()=>{r(!1)},h=t=>{var x;t.preventDefault(),r(!1);const o=(x=t.dataTransfer)==null?void 0:x.files;o!=null&&o.length&&(n==null||n(o))},l=()=>{var t;(t=s.current)==null||t.click()},y=t=>{const o=t.target.files;o!=null&&o.length&&(n==null||n(o)),t.target.value=""};return e.jsxs("div",{style:L,children:[e.jsx("h2",{style:A,children:"Evaluate Interaction"}),e.jsx("p",{style:F,children:"Upload another interaction to compare results and identify patterns across multiple evaluations."}),e.jsx("input",{ref:s,type:"file",accept:".mp3,.wma,.wav",multiple:!0,style:{display:"none"},onChange:y}),e.jsxs("div",{style:a?M:m,onDragOver:c,onDragLeave:g,onDrop:h,onClick:l,children:[e.jsx("div",{style:E,children:e.jsx(p.CloudUpload,{size:32,color:"var(--grey-strong)"})}),e.jsx("p",{style:U,children:"Drop your file here, or"}),e.jsx("button",{type:"button",style:B,onClick:t=>{t.stopPropagation(),l()},onMouseEnter:t=>{t.currentTarget.style.background="var(--hover-warm-subtle)"},onMouseLeave:t=>{t.currentTarget.style.background="var(--grey-white)"},children:"Browse files"}),e.jsx("p",{style:O,children:"Supports: MP3, WMA or WAV"})]})]})};exports.UploadEvaluate=T;exports.UploadInteraction=P;
+"use strict";const e=require("react/jsx-runtime"),f=require("react"),p=require("lucide-react"),i="var(--font-sans)",b={padding:"40px 48px",fontFamily:i,minHeight:"100vh",background:"var(--grey-white)",boxSizing:"border-box"},j={fontSize:"var(--text-4xl)",fontWeight:"var(--font-bold)",fontFamily:i,color:"var(--text-ink)",margin:0,letterSpacing:"var(--tracking-tight)",lineHeight:"var(--leading-tight)"},S={fontSize:14,fontStyle:"normal",fontWeight:400,lineHeight:"140%",color:"var(--color-text-secondary)",margin:"8px 0 0",fontFamily:i},w={display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginTop:"36px"},v={display:"flex",height:160,padding:24,flexDirection:"column",justifyContent:"space-between",alignItems:"flex-start",borderRadius:12,border:"1px solid var(--grey-absent)",background:"var(--grey-white)",boxSizing:"border-box",transition:"var(--transition)",cursor:"default",gap:8},z={...v,boxShadow:"var(--shadow-sm)"},C={width:40,height:40,borderRadius:"var(--radius)",background:"var(--paper-secondary)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--text-base)"},k={color:"var(--grey-strong)",fontSize:20,fontStyle:"normal",fontWeight:600,lineHeight:"normal",fontFamily:i,margin:0},W={fontSize:13,fontStyle:"normal",fontWeight:400,lineHeight:"140%",color:"var(--text-base)",margin:0,fontFamily:i,flex:"1 0 0"},D={display:"flex",height:28,padding:10,justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,background:"var(--grey-strong)",fontSize:14,fontStyle:"normal",fontWeight:600,lineHeight:1,fontFamily:i,color:"var(--grey-white)",border:"none",cursor:"pointer",transition:"var(--transition-fast)",outline:"none",boxSizing:"border-box"},H={flex:1,height:8,borderRadius:4,background:"var(--border)",overflow:"hidden"},I=n=>({width:`${n}%`,height:"100%",borderRadius:4,background:"var(--color-green)",transition:"width 0.4s ease-out"}),R={display:"inline-flex",alignItems:"center",gap:4,fontSize:"var(--text-xs)",fontWeight:"var(--font-semibold)",color:"var(--rail-compliance)",fontFamily:i,marginLeft:12};function y({icon:n,title:a,description:o,buttonLabel:s,onAction:c,recommended:g,children:h}){const[l,u]=f.useState(!1);return e.jsxs("div",{style:l?z:v,onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),children:[e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[e.jsx("div",{style:C,children:n}),e.jsx("h3",{style:k,children:a})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4,marginLeft:52,marginTop:4},children:[o&&e.jsx("p",{style:W,children:o}),h]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",marginLeft:52},children:[e.jsx("button",{style:D,onClick:c,onMouseEnter:t=>{t.currentTarget.style.opacity="0.85"},onMouseLeave:t=>{t.currentTarget.style.opacity="1"},children:s}),g&&e.jsxs("span",{style:R,children:[e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"})}),"Recommended"]})]})]})}const M=({userName:n="Will",stepsCompleted:a=4,totalSteps:o=6,onUpload:s,onContinue:c,onExplore:g,onConnect:h})=>{const l=a/o*100;return e.jsxs("div",{style:b,children:[e.jsxs("h1",{style:j,children:["Welcome ",n]}),e.jsx("p",{style:S,children:"Get started with your project or explore new features"}),e.jsxs("div",{style:w,children:[e.jsx(y,{icon:e.jsx(p.Upload,{size:24}),title:"Upload and Evaluate Audio",description:"Upload Audio Files to Run Evaluations: MP3, WMA or WAV (up to 50 files, max 325MB total)",buttonLabel:"Upload",onAction:s}),e.jsx(y,{icon:e.jsx(p.CircleUser,{size:24}),title:"Getting started with Chordia",description:"Complete these steps to get the most out of Chordia.",buttonLabel:"Continue",onAction:c,children:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,width:"100%"},children:[e.jsx("div",{style:H,children:e.jsx("div",{style:I(l)})}),e.jsxs("span",{style:{fontSize:12,color:"var(--text-muted)",fontFamily:i,whiteSpace:"nowrap"},children:[e.jsx("strong",{style:{color:"var(--text-base)",fontWeight:600},children:a})," of ",o," steps completed"]})]})}),e.jsx(y,{icon:e.jsx(p.Compass,{size:24}),title:"Explore Demo Projects",description:"Explore how Chordia Compass transforms real data into insights with plans, dashboards, and evaluations.",buttonLabel:"Explore",onAction:g,recommended:!0}),e.jsx(y,{icon:e.jsx(p.Link2,{size:24}),title:"Connect Data Source",description:"Connect and integrate third-party tools with your external data sources.",buttonLabel:"Connect",onAction:h})]})]})},d="var(--font-sans)",T={fontFamily:d},L={fontSize:20,fontWeight:600,fontStyle:"normal",fontFamily:d,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},A={fontSize:13,fontWeight:400,fontStyle:"normal",color:"var(--color-text-secondary)",fontFamily:d,margin:"4px 0 0",lineHeight:"140%"},m={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"100%",minHeight:320,borderRadius:16,border:"2px dashed var(--color-input-border)",background:"var(--grey-white)",boxSizing:"border-box",cursor:"pointer",transition:"var(--transition-fast)",marginTop:24,padding:"48px 24px"},E={...m,borderColor:"var(--color-green)",background:"var(--color-green-ring)"},F={width:80,height:80,borderRadius:9999,background:"var(--focus-2)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,marginBottom:20},B={fontSize:18,fontWeight:600,fontFamily:d,color:"var(--grey-strong)",textAlign:"center",lineHeight:"28px",margin:0},U={display:"flex",height:32,padding:16,justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,border:"1px solid var(--grey-absent)",background:"var(--grey-white)",fontSize:15,fontWeight:400,fontFamily:d,color:"var(--grey-strong)",cursor:"pointer",transition:"var(--transition-fast)",outline:"none",marginTop:16,boxSizing:"border-box"},P={fontSize:14,fontWeight:400,fontFamily:d,color:"var(--grey-muted)",textAlign:"center",marginTop:16,lineHeight:"140%"},O=({onFileSelect:n})=>{const[a,o]=f.useState(!1),s=f.useRef(null),c=t=>{t.preventDefault(),o(!0)},g=()=>{o(!1)},h=t=>{var x;t.preventDefault(),o(!1);const r=(x=t.dataTransfer)==null?void 0:x.files;r!=null&&r.length&&(n==null||n(r))},l=()=>{var t;(t=s.current)==null||t.click()},u=t=>{const r=t.target.files;r!=null&&r.length&&(n==null||n(r)),t.target.value=""};return e.jsxs("div",{style:T,children:[e.jsx("h2",{style:L,children:"Evaluate Interaction"}),e.jsx("p",{style:A,children:"Upload interactions to generate insights, explore results, and identify patterns."}),e.jsx("input",{ref:s,type:"file",accept:"audio/mpeg,audio/wav,audio/x-ms-wma,audio/mp4,video/mp4,video/webm",multiple:!0,style:{display:"none"},onChange:u}),e.jsxs("div",{style:a?E:m,onDragOver:c,onDragLeave:g,onDrop:h,onClick:l,children:[e.jsx("div",{style:F,children:e.jsx(p.CloudUpload,{size:32,color:"var(--grey-strong)"})}),e.jsx("p",{style:B,children:"Drop your file here, or"}),e.jsx("button",{type:"button",style:U,onClick:t=>{t.stopPropagation(),l()},onMouseEnter:t=>{t.currentTarget.style.background="var(--hover-warm-subtle)"},onMouseLeave:t=>{t.currentTarget.style.background="var(--grey-white)"},children:"Browse files"}),e.jsx("p",{style:P,children:"Supports: MP3, WAV, WMA, MP4, and WEBM"})]})]})};exports.UploadEvaluate=M;exports.UploadInteraction=O;
 //# sourceMappingURL=UploadInteraction.cjs.js.map