@eyesee/ui-components 0.1.0

package/dist/components/ListItem/ListItem.js

@@ -0,0 +1,69 @@
+import { jsxs as x, jsx as e, Fragment as y } from "react/jsx-runtime";
+import b from "clsx";
+import { EllipsisTooltip as v } from "../EllipsisTooltip/EllipsisTooltip.js";
+import a from "./ListItem.module.scss.js";
+const F = ({
+  item: T = null,
+  controlItem: r = null,
+  customItem: n = null,
+  title: i = null,
+  description: s = null,
+  trailing: t = [],
+  trailingDisplay: c = "hover",
+  active: D = !1,
+  onClick: w,
+  verticalSpacing: p = "xs",
+  horizontalSpacing: m = "xs",
+  variant: C = "fill",
+  disabled: d = !1
+}) => {
+  const o = (t == null ? void 0 : t.length) > 0, h = !!i, u = !!s, N = [
+    r && "auto",
+    n && "auto",
+    (h || u) && "minmax(0, 3fr)",
+    o && "auto"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: b(a.listItem, a[C], d && a.disabled),
+      style: {
+        "--minHeight": !s && p === "none" ? "var(--scale--lg)" : "auto",
+        "--verticalSpacing": p === "none" ? "0px" : `var(--spacing--${p})`,
+        "--horizontalSpacing": m === "none" ? "0px" : `var(--spacing--${m})`,
+        "--gridTemplateColumns": N
+      },
+      "data-active": D || null,
+      onClick: d ? () => {
+      } : w,
+      children: [
+        r && /* @__PURE__ */ e(y, { children: r }),
+        n && /* @__PURE__ */ e(y, { children: n }),
+        /* @__PURE__ */ x("div", { className: a.textWrapper, children: [
+          h && /* @__PURE__ */ e(v, { showArrow: !0, content: i, className: a.title, children: i }),
+          u && /* @__PURE__ */ e(v, { showArrow: !0, content: s, className: a.description, children: s })
+        ] }),
+        o && /* @__PURE__ */ e("div", { className: a.trailing, children: t.map((l) => {
+          const j = (l == null ? void 0 : l.trailingDisplay) || c, k = (l == null ? void 0 : l.trailingDisplayOnSelectedItem) || "always", g = d || (l == null ? void 0 : l.disabled);
+          return /* @__PURE__ */ e(
+            "span",
+            {
+              "data-trailing-display": j,
+              "data-trailing-display-on-selected-item": k,
+              "data-trailing-disabled": g || null,
+              onClick: ($) => {
+                var f;
+                $.stopPropagation(), !g && ((f = l == null ? void 0 : l.onClick) == null || f.call(l, T));
+              },
+              children: l.icon
+            },
+            `icon-${l.type}`
+          );
+        }) })
+      ]
+    }
+  );
+};
+export {
+  F as ListItem
+};

package/dist/components/ListItem/ListItem.module.scss.js

@@ -0,0 +1,21 @@
+const t = "_listItem_14vkx_1", i = "_fill_14vkx_11", e = "_outline_14vkx_36", _ = "_disabled_14vkx_63", l = "_textWrapper_14vkx_72", s = "_title_14vkx_96", n = "_description_14vkx_100", o = "_trailing_14vkx_122", r = {
+  listItem: t,
+  fill: i,
+  outline: e,
+  disabled: _,
+  textWrapper: l,
+  title: s,
+  description: n,
+  trailing: o
+};
+export {
+  r as default,
+  n as description,
+  _ as disabled,
+  i as fill,
+  t as listItem,
+  e as outline,
+  l as textWrapper,
+  s as title,
+  o as trailing
+};

package/dist/components/ListItem/useListItems.js

@@ -0,0 +1,58 @@
+import { useCallback as L, useMemo as M } from "react";
+const o = (l, n) => typeof l == "function" ? l(n) : l, q = ({
+  items: l = [],
+  controlItem: n = null,
+  customItem: d = null,
+  trailing: f = [],
+  trailingDisplay: b = "hover",
+  itemTitleKey: x = "name",
+  itemDescriptionKey: k = "description",
+  activeItemId: r = null,
+  onItemSelect: u,
+  verticalSpacing: p = "xs",
+  horizontalSpacing: C = "xs",
+  variant: N = "fill"
+}) => {
+  const h = L(
+    (s) => {
+      u == null || u(s);
+    },
+    [u]
+  );
+  return { listItems: M(
+    () => (l || []).map((s) => ({
+      id: s == null ? void 0 : s.id,
+      title: (s == null ? void 0 : s[x]) ?? null,
+      description: (s == null ? void 0 : s[k]) ?? null,
+      item: s,
+      controlItem: o(n, s),
+      customItem: o(d, s),
+      internalNumber: s == null ? void 0 : s.internalNumber,
+      trailing: o(f, s),
+      trailingDisplay: b,
+      verticalSpacing: p,
+      horizontalSpacing: C,
+      variant: N,
+      active: r != null && (s == null ? void 0 : s.id) === r,
+      ...u && { onClick: () => h(s) }
+    })),
+    [
+      n,
+      d,
+      f,
+      b,
+      l,
+      x,
+      k,
+      r,
+      u,
+      h,
+      p,
+      C,
+      N
+    ]
+  ) };
+};
+export {
+  q as useListItems
+};

package/dist/components/Modal/Modal.js

@@ -0,0 +1,70 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useRef as N, Suspense as k } from "react";
+import C from "react-dom";
+import D from "../../hooks/useClickOutside.js";
+import { useEscapeKey as v } from "../../hooks/useEscapeKey.js";
+import { LoadingIcon as I } from "../icons-v2/LoadingIcon.js";
+import { XIcon as M } from "../icons-v2/XIcon.js";
+import { Button as b } from "../Button/Button.js";
+import l from "./Modal.module.scss.js";
+const r = {
+  default: "960px",
+  mediaQuery: "880px"
+}, A = ({
+  children: n = null,
+  onClose: s = () => {
+  },
+  visible: d = !1,
+  title: c = "",
+  icon: t = null,
+  description: m = null,
+  footer: i = null,
+  maxWidth: u = r,
+  loadingFallback: p = /* @__PURE__ */ e(I, { iconSize: "xl" }),
+  portalContainer: f
+}) => {
+  const { default: h, mediaQuery: x } = {
+    ...r,
+    ...u
+  }, y = N(), o = () => s();
+  return D(y, o), v(o), d ? C.createPortal(
+    /* @__PURE__ */ a("div", { className: l.transition, children: [
+      /* @__PURE__ */ e("div", { className: l.backdrop, onClick: o }),
+      /* @__PURE__ */ e(
+        "dialog",
+        {
+          className: l.modal,
+          open: !0,
+          style: {
+            "--modal-width": h,
+            "--modal-width-media-query": x
+          },
+          children: /* @__PURE__ */ a(k, { fallback: p, children: [
+            /* @__PURE__ */ a("header", { className: l.header, children: [
+              t && t,
+              /* @__PURE__ */ a("div", { className: l.textContainer, children: [
+                /* @__PURE__ */ e("span", { className: l.title, children: c }),
+                /* @__PURE__ */ e("span", { className: l.description, children: m })
+              ] }),
+              /* @__PURE__ */ e(
+                b,
+                {
+                  variant: "neutral",
+                  icon: /* @__PURE__ */ e(M, {}),
+                  size: "xxxs",
+                  onClick: o
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("section", { className: l.content, children: n }),
+            i && /* @__PURE__ */ e("footer", { children: i })
+          ] })
+        }
+      )
+    ] }),
+    f ?? document.getElementById("modal") ?? document.body
+  ) : null;
+};
+export {
+  A as Modal
+};

package/dist/components/Modal/Modal.module.scss.js

@@ -0,0 +1,21 @@
+const t = "_transition_v042a_1", n = "_backdrop_v042a_5", o = "_modal_v042a_16", a = "_header_v042a_35", e = "_textContainer_v042a_43", _ = "_title_v042a_51", c = "_description_v042a_70", i = "_content_v042a_87", s = {
+  transition: t,
+  backdrop: n,
+  modal: o,
+  header: a,
+  textContainer: e,
+  title: _,
+  description: c,
+  content: i
+};
+export {
+  n as backdrop,
+  i as content,
+  s as default,
+  c as description,
+  a as header,
+  o as modal,
+  e as textContainer,
+  _ as title,
+  t as transition
+};

package/dist/components/Notifications/Notifications.js

@@ -0,0 +1,119 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import U from "clsx";
+import { Button as C } from "../Button/Button.js";
+import { ProgressBar as _ } from "../ProgressBar/ProgressBar.js";
+import { SaveIcon as F } from "../icons-v2/SaveIcon.js";
+import { HelpIcon as H } from "../icons-v2/HelpIcon.js";
+import { XIcon as v } from "../icons-v2/XIcon.js";
+import r from "./Notifications.module.scss.js";
+const K = ["neutral", "error", "success", "primary", "warning"], y = {
+  neutral: {
+    stripeColor: "var(--color--border--primary--default)",
+    iconColor: "var(--color--icon--primary--default)"
+  },
+  error: {
+    stripeColor: "var(--color--border--error--default)",
+    iconColor: "var(--color--border--error--default)"
+  },
+  success: {
+    stripeColor: "var(--color--border--success--default)",
+    iconColor: "var(--color--border--success--default)"
+  },
+  primary: {
+    stripeColor: "var(--color--border--primary--default)",
+    iconColor: "var(--color--border--primary--default)"
+  },
+  warning: {
+    stripeColor: "var(--color--border--warning--default)",
+    iconColor: "var(--color--border--warning--default)"
+  }
+}, b = (l) => K.includes(l) ? l : "neutral", R = (l) => y[b(l)] || y.neutral, Q = ({
+  title: l = "Notification title",
+  text: h = "Notification text goes here and it should be kept short and simple whenever possible.",
+  status: N = "neutral",
+  showStripe: S = !1,
+  showIcon: k = !0,
+  icon: I = null,
+  onClose: i = null,
+  closeAriaLabel: T = "Close notification",
+  onDismiss: c = null,
+  dismissLabel: w = "Cancel",
+  dismissIcon: x = null,
+  onConfirm: a = null,
+  confirmLabel: g = "Save",
+  confirmIcon: A = null,
+  progress: t = null,
+  maxProgress: e = null,
+  progressLabel: s = "In progress...",
+  closeButton: B = !0,
+  className: O
+}) => {
+  const $ = b(N), { stripeColor: u, iconColor: j } = R($), f = typeof c == "function", p = typeof a == "function", z = f || p, d = t !== null, m = k && (I || /* @__PURE__ */ o(H, { strokeColor: "currentColor", fill: "none" })), E = typeof t == "number" && typeof e == "number" ? `${s} ${t}/${e ?? ""}` : s;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: U(
+        r.notification,
+        S && !d && r.withStripe,
+        O
+      ),
+      style: {
+        "--notification-stripe-color": u,
+        "--notification-icon-color": j
+      },
+      children: [
+        /* @__PURE__ */ n("div", { className: r.titleRow, children: [
+          m ? /* @__PURE__ */ o("span", { className: r.icon, children: m }) : null,
+          /* @__PURE__ */ o("p", { className: r.title, children: l }),
+          typeof i == "function" && B ? /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: r.closeButton,
+              onClick: i,
+              "aria-label": T,
+              children: /* @__PURE__ */ o(v, { strokeColor: "currentColor" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ o("p", { className: r.text, children: h }),
+        z ? /* @__PURE__ */ n("div", { className: r.actions, children: [
+          f ? /* @__PURE__ */ o(
+            C,
+            {
+              text: w,
+              onClick: c,
+              size: "sm",
+              type: "outline",
+              variant: "neutral",
+              icon: x || /* @__PURE__ */ o(v, { strokeColor: "currentColor" })
+            }
+          ) : null,
+          p ? /* @__PURE__ */ o(
+            C,
+            {
+              text: g,
+              onClick: a,
+              size: "sm",
+              type: "fill",
+              variant: "primary",
+              icon: A || /* @__PURE__ */ o(F, { strokeColor: "currentColor" })
+            }
+          ) : null
+        ] }) : null,
+        d ? /* @__PURE__ */ o(
+          _,
+          {
+            value: t,
+            maxValue: e,
+            label: E,
+            fillColor: u
+          }
+        ) : null
+      ]
+    }
+  );
+};
+export {
+  Q as Notifications
+};

package/dist/components/Notifications/Notifications.module.scss.js

@@ -0,0 +1,21 @@
+const t = "_notification_1ho8a_1", o = "_withStripe_1ho8a_13", i = "_titleRow_1ho8a_18", n = "_icon_1ho8a_25", _ = "_title_1ho8a_18", c = "_closeButton_1ho8a_63", e = "_text_1ho8a_78", s = "_actions_1ho8a_96", a = {
+  notification: t,
+  withStripe: o,
+  titleRow: i,
+  icon: n,
+  title: _,
+  closeButton: c,
+  text: e,
+  actions: s
+};
+export {
+  s as actions,
+  c as closeButton,
+  a as default,
+  n as icon,
+  t as notification,
+  e as text,
+  _ as title,
+  i as titleRow,
+  o as withStripe
+};

package/dist/components/Notifications/useNotifications.js

@@ -0,0 +1,103 @@
+import { jsx as I } from "react/jsx-runtime";
+import { useRef as L, useCallback as b } from "react";
+import { toast as c } from "react-toastify";
+import { Notifications as T } from "./Notifications.js";
+/* empty css                      */
+const g = {
+  autoClose: !1,
+  closeOnClick: !1,
+  closeButton: !1,
+  icon: !1,
+  hideProgressBar: !0,
+  draggable: !1,
+  className: "notificationsToast",
+  bodyClassName: "notificationsToastBody"
+}, d = (s = {}, t) => /* @__PURE__ */ I(
+  T,
+  {
+    title: s.title,
+    text: s.text,
+    status: s.status,
+    showStripe: s.showStripe,
+    showIcon: s.showIcon,
+    icon: s.icon,
+    closeAriaLabel: s.closeAriaLabel,
+    onDismiss: s.onDismiss,
+    dismissLabel: s.dismissLabel,
+    dismissIcon: s.dismissIcon,
+    onConfirm: s.onConfirm,
+    confirmLabel: s.confirmLabel,
+    confirmIcon: s.confirmIcon,
+    progress: s.progress,
+    maxProgress: s.maxProgress,
+    progressLabel: s.progressLabel,
+    className: s.className,
+    onClose: t,
+    closeButton: s.closeButton
+  }
+), h = (s) => s === "success" || s === "error" || s === "warning" ? s : "default", w = (s, t, i) => {
+  if (typeof s == "string")
+    return {
+      key: s,
+      payload: t || {},
+      options: i || {}
+    };
+  if (s && typeof s == "object" && typeof s.key == "string") {
+    const { key: o, ...r } = s;
+    return {
+      key: o,
+      payload: r,
+      options: t || {}
+    };
+  }
+  return {
+    key: null,
+    payload: s || {},
+    options: t || {}
+  };
+}, p = (s, t, i) => ({
+  ...g,
+  ...t,
+  closeButton: !1,
+  icon: !1,
+  className: "notificationsToast",
+  bodyClassName: "notificationsToastBody",
+  type: t.type || h(s.status),
+  onClose: (...o) => {
+    typeof t.onClose == "function" && t.onClose(...o), typeof i == "function" && i(...o);
+  }
+}), S = () => {
+  const s = L(/* @__PURE__ */ new Map()), t = b((o) => {
+    if (!o)
+      return;
+    const r = s.current.get(o) ?? o;
+    c.dismiss(r), s.current.delete(o);
+  }, []);
+  return { notify: b(
+    (o, r, N) => {
+      const { key: e, payload: f, options: l } = w(o, r, N), C = e ? () => s.current.delete(e) : null;
+      if (e) {
+        const n = l.toastId ?? e, m = d(f, () => t(e)), a = {
+          ...p(f, l, C),
+          toastId: n
+        };
+        if (c.isActive(n))
+          return c.update(n, {
+            ...a,
+            render: m
+          }), s.current.set(e, n), n;
+        const B = c(m, a);
+        return s.current.set(e, n), B;
+      }
+      let u = null;
+      return u = c(
+        d(f, () => t(u)),
+        p(f, l, null)
+      ), u;
+    },
+    [t]
+  ), dismiss: t };
+};
+export {
+  S as useNotifications
+};

package/dist/components/Pill/Pill.js

@@ -0,0 +1,32 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import u from "clsx";
+import { HelpIcon as d } from "../icons-v2/HelpIcon.js";
+import { getPillStyles as x } from "./pillVariants.js";
+import l from "./Pill.module.scss.js";
+const N = ({
+  label: t = "Completed",
+  color: r = "light",
+  status: e = "turquoise",
+  showIcon: i = !0,
+  icon: s = null
+}) => {
+  const { backgroundColor: n, borderColor: c, color: m } = x(r, e), p = r === "outline";
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: u(l.pill, p && l.pillOutline),
+      style: {
+        backgroundColor: n,
+        borderColor: c,
+        color: m
+      },
+      children: [
+        i && /* @__PURE__ */ o("span", { className: l.icon, children: s ?? /* @__PURE__ */ o(d, { iconSize: "m" }) }),
+        /* @__PURE__ */ o("span", { className: l.text, children: t })
+      ]
+    }
+  );
+};
+export {
+  N as Pill
+};

package/dist/components/Pill/Pill.module.scss.js

@@ -0,0 +1,13 @@
+const l = "_pill_1owa4_1", t = "_pillOutline_1owa4_23", o = "_icon_1owa4_27", i = "_text_1owa4_40", _ = {
+  pill: l,
+  pillOutline: t,
+  icon: o,
+  text: i
+};
+export {
+  _ as default,
+  o as icon,
+  l as pill,
+  t as pillOutline,
+  i as text
+};

package/dist/components/Pill/pillVariants.js

@@ -0,0 +1,36 @@
+const t = [
+  "turquoise",
+  "purple",
+  "green",
+  "red",
+  "yellow",
+  "orange",
+  "greenyellow",
+  "neutral"
+], l = ["light", "dark", "outline"], e = "--color--pill--";
+function u(r, o) {
+  return r === "outline" ? {
+    backgroundColor: "transparent",
+    borderColor: `var(${e}${o}--outline--border)`,
+    color: `var(${e}${o}--outline--border)`
+  } : {
+    backgroundColor: `var(${e}${o}--${r}--bg)`,
+    borderColor: "transparent",
+    color: `var(${e}${o}--${r}--text)`
+  };
+}
+const n = {};
+l.forEach((r) => {
+  n[r] = {}, t.forEach((o) => {
+    n[r][o] = u(r, o);
+  });
+});
+function c(r, o) {
+  const i = l.includes(r) ? r : "light", a = t.includes(o) ? o : "turquoise";
+  return n[i][a];
+}
+export {
+  l as COLORS,
+  t as STATUSES,
+  c as getPillStyles
+};

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,48 @@
+import { jsxs as n, Fragment as g, jsx as o } from "react/jsx-runtime";
+import l from "clsx";
+import e from "./ProgressBar.module.scss.js";
+const N = (r, s) => typeof r != "number" || Number.isNaN(r) ? 0 : typeof s == "number" ? Math.max(0, Math.min(100, Math.round(r / s * 100))) : Math.max(0, Math.min(100, r)), x = ({
+  value: r = 0,
+  maxValue: s = null,
+  label: t = null,
+  fillColor: i = null,
+  trackClassName: m,
+  fillClassName: c,
+  labelClassName: p,
+  displayPercentageText: d = !1
+}) => {
+  const a = N(r, s), f = typeof s == "number" && r < s, h = t !== null, u = typeof t == "number" ? `${t}%` : t;
+  return /* @__PURE__ */ n(g, { children: [
+    /* @__PURE__ */ n("div", { className: e.progressContainer, children: [
+      /* @__PURE__ */ o(
+        "div",
+        {
+          className: l(e.track, m),
+          style: {
+            "--progress-value": `${a}%`,
+            "--progress-fill-color": i || "var(--color--background--primary--default)"
+          },
+          children: /* @__PURE__ */ o(
+            "div",
+            {
+              className: l(
+                e.fill,
+                e.fillCompleted,
+                f && e.fillCompletedIndeterminate,
+                c
+              )
+            }
+          )
+        }
+      ),
+      d && /* @__PURE__ */ n("span", { className: e.progressPercentageText, children: [
+        a,
+        "%"
+      ] })
+    ] }),
+    h ? /* @__PURE__ */ o("p", { className: l(e.label, p), children: u }) : null
+  ] });
+};
+export {
+  x as ProgressBar
+};

package/dist/components/ProgressBar/ProgressBar.module.scss.js

@@ -0,0 +1,19 @@
+const e = "_progressContainer_zp4mt_1", t = "_track_zp4mt_9", l = "_fill_zp4mt_18", r = "_fillCompleted_zp4mt_22", o = "_fillCompletedIndeterminate_zp4mt_31", n = "_label_zp4mt_38", s = "_progressPercentageText_zp4mt_56", _ = {
+  progressContainer: e,
+  track: t,
+  fill: l,
+  fillCompleted: r,
+  fillCompletedIndeterminate: o,
+  label: n,
+  progressPercentageText: s
+};
+export {
+  _ as default,
+  l as fill,
+  r as fillCompleted,
+  o as fillCompletedIndeterminate,
+  n as label,
+  e as progressContainer,
+  s as progressPercentageText,
+  t as track
+};

package/dist/components/Radio/Radio.js

@@ -0,0 +1,20 @@
+import { jsxs as e, jsx as l } from "react/jsx-runtime";
+import c from "clsx";
+import s from "./Radio.module.scss.js";
+import { CircleIcon as t } from "../icons-v2/CircleIcon.js";
+const m = (
+  /** @type {const} */
+  ["lg", "md"]
+), N = ({ size: r = "lg", label: o, className: i, ...n }) => {
+  const a = m.includes(r) ? r : "lg";
+  return /* @__PURE__ */ e("label", { className: c(s.root, i), children: [
+    /* @__PURE__ */ e("span", { className: s.control, children: [
+      /* @__PURE__ */ l("input", { className: s.input, type: "radio", ...n }),
+      /* @__PURE__ */ l("span", { className: s.indicator, "aria-hidden": !0, children: /* @__PURE__ */ l(t, { iconSize: a === "lg" ? "m" : "s" }) })
+    ] }),
+    o ? /* @__PURE__ */ l("span", { className: s.label, children: o }) : null
+  ] });
+};
+export {
+  N as Radio
+};

package/dist/components/Radio/Radio.module.scss.js

@@ -0,0 +1,15 @@
+const o = "_root_fvgxx_1", t = "_input_fvgxx_8", n = "_label_fvgxx_11", _ = "_control_fvgxx_16", c = "_indicator_fvgxx_33", l = {
+  root: o,
+  input: t,
+  label: n,
+  control: _,
+  indicator: c
+};
+export {
+  _ as control,
+  l as default,
+  c as indicator,
+  t as input,
+  n as label,
+  o as root
+};