@eyesee/ui-components 0.1.0

package/README.md

@@ -0,0 +1,37 @@
+# @eyesee/ui-components
+
+Shared EyeSee React components and design tokens.
+
+## Usage
+
+Import the package styles once at the application entry point:
+
+```js
+import '@eyesee/ui-components/styles';
+```
+
+Apply `alias--main` and exactly one application profile class (`mapped--internal`
+or `mapped--external`) on an ancestor that also contains portal content,
+preferably `body`.
+
+`Modal` uses `#modal` when it exists and otherwise falls back to `document.body`.
+Use its `portalContainer` prop to provide a different host and
+`loadingFallback` to customize its Suspense fallback. `Tooltip` also accepts
+`portalContainer` and otherwise renders into `document.body`.
+
+The consuming application must install the package peer dependencies listed in
+`package.json`. `Notifications` requires a single rendered toast host from
+`react-toastify`; use the exported `Notifications` component and
+`useNotifications` hook.
+
+## Development
+
+```bash
+npm run storybook
+npm run build
+npm run build-storybook
+npm run pack:check
+```
+
+The Storybook toolbar switches between the Internal and External application
+style profiles.

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,61 @@
+import { jsx as a } from "react/jsx-runtime";
+import A from "clsx";
+import r from "./Avatar.module.scss.js";
+const b = (
+  /** @type {const} */
+  ["3xs", "2xs", "xs", "s", "m", "l"]
+), k = (
+  /** @type {const} */
+  ["round", "square"]
+), m = (
+  /** @type {const} */
+  ["default", "photo"]
+), y = (
+  /** @type {const} */
+  {
+    purple: "var(--color--background--avatar--purple)",
+    turquoise: "var(--color--background--avatar--turquoise)",
+    red: "var(--color--background--avatar--red)",
+    green: "var(--color--background--avatar--green)",
+    yellow: "var(--color--background--avatar--yellow)",
+    orange: "var(--color--background--avatar--orange)",
+    greenyellow: "var(--color--background--avatar--greenyellow)",
+    pink: "var(--color--background--avatar--pink)",
+    blue: "var(--color--background--avatar--blue)"
+  }
+), T = (
+  /** @type {(keyof typeof AVATAR_COLOR_PALETTE)[]} */
+  Object.keys(y)
+), _ = ({
+  type: o = "default",
+  size: e = "2xs",
+  corners: n = "round",
+  initials: s = "JD",
+  src: t,
+  alt: c = "",
+  color: l,
+  className: u
+}) => {
+  const d = b.includes(e) ? e : "2xs", i = k.includes(n) ? n : "round", v = m.includes(o) ? o : "default", p = String(s || "").trim().slice(0, 2).toUpperCase(), g = T.includes(l) ? l : "purple";
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: A(
+        r.avatar,
+        r[`size${d.toUpperCase()}`],
+        i === "round" ? r.round : r.square,
+        u
+      ),
+      style: { backgroundColor: g },
+      children: v === "photo" && t ? /* @__PURE__ */ a("img", { className: r.photo, src: t, alt: c }) : /* @__PURE__ */ a("span", { className: r.initials, children: p })
+    }
+  );
+};
+export {
+  y as AVATAR_COLOR_PALETTE,
+  T as AVATAR_COLOR_PALETTE_KEYS,
+  k as AVATAR_CORNERS,
+  b as AVATAR_SIZES,
+  m as AVATAR_TYPES,
+  _ as Avatar
+};

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

@@ -0,0 +1,27 @@
+const s = "_avatar_1fjz4_1", _ = "_initials_1fjz4_11", z = "_round_1fjz4_33", i = "_square_1fjz4_36", e = "_size3XS_1fjz4_39", t = "_size2XS_1fjz4_57", o = "_sizeXS_1fjz4_75", n = "_sizeS_1fjz4_79", a = "_sizeM_1fjz4_83", c = "_sizeL_1fjz4_87", f = "_photo_1fjz4_91", S = {
+  avatar: s,
+  initials: _,
+  round: z,
+  square: i,
+  size3XS: e,
+  size2XS: t,
+  sizeXS: o,
+  sizeS: n,
+  sizeM: a,
+  sizeL: c,
+  photo: f
+};
+export {
+  s as avatar,
+  S as default,
+  _ as initials,
+  f as photo,
+  z as round,
+  t as size2XS,
+  e as size3XS,
+  c as sizeL,
+  a as sizeM,
+  n as sizeS,
+  o as sizeXS,
+  i as square
+};

package/dist/components/Badge/Badge.js

@@ -0,0 +1,18 @@
+import { jsx as l } from "react/jsx-runtime";
+import { getBadgeStyles as a } from "./badgeVariants.js";
+import c from "./Badge.module.scss.js";
+const g = ({ label: r, shape: o = "rectangle", state: e = "neutral" }) => {
+  if (r == null || r === "") return null;
+  const { backgroundColor: t, color: n, borderRadius: s } = a(o, e);
+  return /* @__PURE__ */ l(
+    "span",
+    {
+      className: c.badge,
+      style: { backgroundColor: t, color: n, borderRadius: s },
+      children: r
+    }
+  );
+};
+export {
+  g as Badge
+};

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

@@ -0,0 +1,7 @@
+const e = "_badge_124sf_1", a = {
+  badge: e
+};
+export {
+  e as badge,
+  a as default
+};

package/dist/components/Badge/badgeVariants.js

@@ -0,0 +1,29 @@
+const a = ["rectangle", "pill"], e = ["neutral", "warning", "error"], c = {
+  neutral: {
+    backgroundColor: "var(--color--background--neutral--subtle)",
+    color: "var(--color--text--default--body)"
+  },
+  warning: {
+    backgroundColor: "var(--color--background--warning--default)",
+    color: "var(--color--text--default--heading)"
+  },
+  error: {
+    backgroundColor: "var(--color--background--error--default)",
+    color: "var(--color--text--on-color--body)"
+  }
+}, t = {
+  rectangle: "var(--radius--subtle)",
+  pill: "var(--radius--full)"
+};
+function u(r, o) {
+  const l = e.includes(o) ? o : "neutral", n = a.includes(r) ? r : "rectangle";
+  return {
+    ...c[l],
+    borderRadius: t[n]
+  };
+}
+export {
+  a as SHAPES,
+  e as STATES,
+  u as getBadgeStyles
+};

package/dist/components/Button/Button.js

@@ -0,0 +1,96 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { useState as W, useRef as j } from "react";
+import m from "clsx";
+import { ChevronDownIcon as B } from "../icons-v2/ChevronDownIcon.js";
+import { ChevronUpIcon as L } from "../icons-v2/ChevronUpIcon.js";
+import R from "../../hooks/useClickOutside.js";
+import t from "./Button.module.scss.js";
+import { ListItem as S } from "../ListItem/ListItem.js";
+import { DropdownList as A } from "../DropdownList/DropdownList.js";
+import { Tooltip as E } from "../Tooltip/Tooltip.js";
+const Q = ({
+  text: l,
+  options: r = [],
+  onClick: i = () => {
+  },
+  className: d,
+  iconSize: p = "m",
+  size: b = "md",
+  variant: g = "primary",
+  type: w = "fill",
+  icon: a = null,
+  tooltipContent: u = null,
+  tooltipTitle: I,
+  disabled: v = !1,
+  fullWidth: C = !1,
+  dropdownAlign: N = "start",
+  tooltipProps: O = { position: "bottom", variant: "light" },
+  ...y
+}) => {
+  const [s, o] = W(!1), h = j(null);
+  R(h, () => o(!1));
+  const x = (e) => {
+    i(e), o(!1);
+  }, D = a && !l && r.length === 0, k = a && !l, T = !!u, f = /* @__PURE__ */ c(
+    "div",
+    {
+      ref: h,
+      "data-button-wrapper": !0,
+      className: m(t.wrapper, d, C && t.fullWidth),
+      ...y,
+      children: [
+        /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: m(
+              t.button,
+              t[b],
+              t[g],
+              t[w],
+              r.length > 0 && t.hasDropdown,
+              D && t.iconOnly,
+              k && t.isIcon
+            ),
+            onClick: () => r.length > 0 ? o((e) => !e) : i(),
+            "aria-expanded": s,
+            "aria-haspopup": "menu",
+            disabled: v,
+            children: [
+              /* @__PURE__ */ c(
+                "span",
+                {
+                  className: m(
+                    t.buttonContent,
+                    r.length > 0 && t.buttonContentDropdown
+                  ),
+                  children: [
+                    a && /* @__PURE__ */ n("span", { className: t.icon, children: a }),
+                    l && /* @__PURE__ */ n("span", { className: t.buttonText, children: l })
+                  ]
+                }
+              ),
+              r.length > 0 && /* @__PURE__ */ n("span", { className: t.buttonArrow, children: s ? /* @__PURE__ */ n(L, { iconSize: p }) : /* @__PURE__ */ n(B, { iconSize: p }) })
+            ]
+          }
+        ),
+        s && r.length > 0 && /* @__PURE__ */ n(A, { align: N, children: r.map((e) => /* @__PURE__ */ n(
+          S,
+          {
+            title: e.label,
+            controlItem: e == null ? void 0 : e.icon,
+            horizontalSpacing: "xs",
+            verticalSpacing: "none",
+            ...e,
+            onClick: () => x(e)
+          },
+          e.value
+        )) })
+      ]
+    }
+  );
+  return T ? /* @__PURE__ */ n(E, { title: I, content: u, ...O, children: f }) : f;
+};
+export {
+  Q as Button
+};

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

@@ -0,0 +1,51 @@
+const n = "_fullWidth_1l23j_1", t = "_button_1l23j_4", o = "_wrapper_1l23j_8", _ = "_buttonContent_1l23j_25", l = "_icon_1l23j_25", s = "_buttonArrow_1l23j_26", c = "_buttonText_1l23j_34", r = "_iconOnly_1l23j_58", u = "_buttonContentDropdown_1l23j_61", e = "_hasDropdown_1l23j_67", j = "_lg_1l23j_83", x = "_isIcon_1l23j_86", i = "_md_1l23j_90", a = "_sm_1l23j_97", b = "_xs_1l23j_104", d = "_xxs_1l23j_111", p = "_xxxs_1l23j_118", w = "_primary_1l23j_128", y = "_fill_1l23j_128", m = "_outline_1l23j_159", f = "_blank_1l23j_172", h = "_secondary_1l23j_219", C = "_neutral_1l23j_310", D = {
+  fullWidth: n,
+  button: t,
+  wrapper: o,
+  buttonContent: _,
+  icon: l,
+  buttonArrow: s,
+  buttonText: c,
+  iconOnly: r,
+  buttonContentDropdown: u,
+  hasDropdown: e,
+  lg: j,
+  isIcon: x,
+  md: i,
+  sm: a,
+  xs: b,
+  xxs: d,
+  xxxs: p,
+  primary: w,
+  fill: y,
+  outline: m,
+  blank: f,
+  secondary: h,
+  neutral: C
+};
+export {
+  f as blank,
+  t as button,
+  s as buttonArrow,
+  _ as buttonContent,
+  u as buttonContentDropdown,
+  c as buttonText,
+  D as default,
+  y as fill,
+  n as fullWidth,
+  e as hasDropdown,
+  l as icon,
+  r as iconOnly,
+  x as isIcon,
+  j as lg,
+  i as md,
+  C as neutral,
+  m as outline,
+  w as primary,
+  h as secondary,
+  a as sm,
+  o as wrapper,
+  b as xs,
+  d as xxs,
+  p as xxxs
+};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,51 @@
+import { jsxs as z, jsx as r } from "react/jsx-runtime";
+import { useId as C } from "react";
+import t from "clsx";
+import o from "./Checkbox.module.scss.js";
+import { CheckmarkLargeIcon as I } from "../icons-v2/CheckmarkLargeIcon.js";
+import { MinusIcon as y } from "../icons-v2/MinusIcon.js";
+import { iconSizes as a } from "../icons-v2/constants.js";
+const N = (e) => e === "lg" ? "m" : "s", M = ({
+  label: e,
+  checked: c = !1,
+  indeterminate: m = !1,
+  onChange: p = () => {
+  },
+  disabled: i = !1,
+  size: x = "md",
+  id: d,
+  name: f,
+  value: h,
+  "aria-label": k
+}) => {
+  const b = C(), l = d ?? b, s = N(x), u = a[s] ?? a.m, n = "var(--color--icon--on-color--on-color)";
+  return /* @__PURE__ */ z(
+    "label",
+    {
+      className: t(o.checkboxWrapper, i && o.disabled),
+      style: { "--checkbox-size": u },
+      htmlFor: l,
+      children: [
+        /* @__PURE__ */ r(
+          "input",
+          {
+            id: l,
+            type: "checkbox",
+            name: f,
+            value: h,
+            className: o.input,
+            checked: c,
+            disabled: i,
+            "aria-label": k ?? (e ? void 0 : "checkbox"),
+            onChange: p
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: t(o.checkbox, c && o.filled), "aria-hidden": !0, children: c && (m ? /* @__PURE__ */ r(y, { iconSize: s, strokeColor: n }) : /* @__PURE__ */ r(I, { iconSize: s, strokeColor: n })) }),
+        e ? /* @__PURE__ */ r("span", { className: o.labelText, children: e }) : null
+      ]
+    }
+  );
+};
+export {
+  M as Checkbox
+};

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

@@ -0,0 +1,17 @@
+const e = "_checkboxWrapper_8rn6y_1", c = "_disabled_8rn6y_11", _ = "_input_8rn6y_16", l = "_checkbox_8rn6y_1", n = "_filled_8rn6y_40", t = "_labelText_8rn6y_44", o = {
+  checkboxWrapper: e,
+  disabled: c,
+  input: _,
+  checkbox: l,
+  filled: n,
+  labelText: t
+};
+export {
+  l as checkbox,
+  e as checkboxWrapper,
+  o as default,
+  c as disabled,
+  n as filled,
+  _ as input,
+  t as labelText
+};

package/dist/components/DropdownList/DropdownList.js

@@ -0,0 +1,37 @@
+import { jsx as u } from "react/jsx-runtime";
+import f from "clsx";
+import r from "./DropdownList.module.scss.js";
+const h = ({
+  children: e,
+  align: n = "start",
+  className: s,
+  dir: o = "down",
+  id: c,
+  maxWidth: p = "320px",
+  maxHeight: i,
+  onLoadMore: t
+}) => {
+  const m = (d) => {
+    const l = d.currentTarget;
+    l.scrollHeight - l.scrollTop - l.clientHeight < 48 && (t == null || t());
+  };
+  return /* @__PURE__ */ u(
+    "ul",
+    {
+      id: c,
+      className: f(
+        r.dropdown,
+        o === "up" && r.dropdownUp,
+        n === "end" && r.alignEnd,
+        s
+      ),
+      role: "menu",
+      style: { maxWidth: p, maxHeight: i },
+      onScroll: m,
+      children: e
+    }
+  );
+};
+export {
+  h as DropdownList
+};

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

@@ -0,0 +1,11 @@
+const o = "_dropdown_i76q1_1", d = "_alignEnd_i76q1_19", n = "_dropdownUp_i76q1_24", p = {
+  dropdown: o,
+  alignEnd: d,
+  dropdownUp: n
+};
+export {
+  d as alignEnd,
+  p as default,
+  o as dropdown,
+  n as dropdownUp
+};

package/dist/components/EllipsisTooltip/EllipsisTooltip.js

@@ -0,0 +1,40 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as E, useState as h, useCallback as g, useLayoutEffect as x } from "react";
+import k from "clsx";
+import { Tooltip as v } from "../Tooltip/Tooltip.js";
+import c from "./EllipsisTooltip.module.scss.js";
+function y(t) {
+  return t ? t.scrollWidth > t.clientWidth || t.scrollHeight > t.clientHeight : !1;
+}
+const j = ({
+  children: t,
+  position: n = "top",
+  variant: f = "light",
+  showArrow: m = !1,
+  className: p,
+  wrapperStyle: s
+}) => {
+  const o = E(null), [a, u] = h(!1), i = g(() => {
+    const l = o.current;
+    u(!!l && !!t && y(l));
+  }, [t]);
+  x(() => {
+    i();
+  }, [i, s]);
+  const e = /* @__PURE__ */ r("div", { ref: o, className: k(c.wrapper, p), style: s, children: t });
+  return !a || !t ? e : /* @__PURE__ */ r(
+    v,
+    {
+      className: c.anchor,
+      content: t,
+      position: n,
+      variant: f,
+      showArrow: m,
+      children: e
+    }
+  );
+};
+export {
+  j as EllipsisTooltip,
+  y as isEllipsisActive
+};

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

@@ -0,0 +1,9 @@
+const r = "_anchor_1vhdl_1", a = "_wrapper_1vhdl_8", o = {
+  anchor: r,
+  wrapper: a
+};
+export {
+  r as anchor,
+  o as default,
+  a as wrapper
+};

package/dist/components/ExpandableItem/ExpandableItem.js

@@ -0,0 +1,25 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import s from "./ExpandableItem.module.scss.js";
+import { ChevronDownIcon as h } from "../icons-v2/ChevronDownIcon.js";
+import { ChevronUpIcon as u } from "../icons-v2/ChevronUpIcon.js";
+const j = ({
+  title: n,
+  children: r,
+  defaultOpen: a = !1,
+  arrowPositionEnd: m = !1
+}) => {
+  const [o, l] = d(a), c = (f) => {
+    l(f.target.open);
+  }, p = o ? u : h, i = m ? "space-between" : "flex-start";
+  return /* @__PURE__ */ t("details", { className: s.details, open: o, onToggle: c, children: [
+    /* @__PURE__ */ t("summary", { className: s.summary, style: { justifyContent: i }, children: [
+      /* @__PURE__ */ e("span", { className: s.summaryText, children: n }),
+      /* @__PURE__ */ e(p, {})
+    ] }),
+    /* @__PURE__ */ e("section", { children: r })
+  ] });
+};
+export {
+  j as ExpandableItem
+};

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

@@ -0,0 +1,11 @@
+const s = "_details_1puly_1", t = "_summary_1puly_6", m = "_summaryText_1puly_16", a = {
+  details: s,
+  summary: t,
+  summaryText: m
+};
+export {
+  a as default,
+  s as details,
+  t as summary,
+  m as summaryText
+};

package/dist/components/Fields/InputField/InputField.js

@@ -0,0 +1,84 @@
+import { jsx as c, jsxs as x } from "react/jsx-runtime";
+import o from "clsx";
+import e from "./InputField.module.scss.js";
+import { createField as Z } from "../InputFieldContainer.js";
+const b = (
+  /** @type {const} */
+  ["lg", "md", "sm", "xs"]
+), q = ({
+  id: N,
+  name: p,
+  type: y = "text",
+  value: g,
+  defaultValue: D,
+  placeholder: w = "Text",
+  disabled: i = !1,
+  onChange: K = () => {
+  },
+  startIcon: n,
+  endIcon: m,
+  onEndIconClick: s,
+  onEnter: r,
+  onFieldClick: d,
+  size: f = "lg",
+  ariaLabel: S,
+  label: j,
+  inputProps: l = {},
+  containerFieldClassName: F,
+  content: u = null
+}) => {
+  const T = b.includes(f) ? f : "lg", a = u != null, V = (t) => {
+    var h;
+    t.key === "Enter" && r && !i && (t.preventDefault(), r()), (h = l.onKeyDown) == null || h.call(l, t);
+  }, v = /* @__PURE__ */ c(
+    "input",
+    {
+      id: N,
+      name: p,
+      type: y,
+      value: a ? "" : g,
+      defaultValue: a ? void 0 : D,
+      placeholder: a ? void 0 : w,
+      disabled: i,
+      onChange: K,
+      "aria-label": S ?? (j ? void 0 : "input field"),
+      ...l,
+      className: o(a && e.hiddenInput, l.className),
+      onKeyDown: V
+    }
+  );
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: o(
+        e.field,
+        F,
+        e[T],
+        d && e.clickable
+      ),
+      onClick: i ? void 0 : d,
+      children: [
+        n ? /* @__PURE__ */ c("span", { "data-field-icon": !0, className: o(e.icon), children: n }) : null,
+        a ? /* @__PURE__ */ x("div", { className: e.content, children: [
+          u,
+          v
+        ] }) : v,
+        m ? /* @__PURE__ */ c(
+          "span",
+          {
+            "data-field-icon": !0,
+            className: o(e.icon, s && e.clickable),
+            onClick: i ? void 0 : (t) => {
+              t.stopPropagation(), s == null || s();
+            },
+            children: m
+          }
+        ) : null
+      ]
+    }
+  );
+}, H = Z(q);
+export {
+  H as InputField,
+  q as InputFieldContent
+};

package/dist/components/Fields/InputField/InputField.module.scss.js

@@ -0,0 +1,23 @@
+const _ = "_field_11l7r_1", n = "_lg_11l7r_5", l = "_md_11l7r_9", c = "_sm_11l7r_13", t = "_xs_11l7r_17", s = "_icon_11l7r_21", o = "_clickable_11l7r_27", e = "_content_11l7r_34", d = "_hiddenInput_11l7r_42", i = {
+  field: _,
+  lg: n,
+  md: l,
+  sm: c,
+  xs: t,
+  icon: s,
+  clickable: o,
+  content: e,
+  hiddenInput: d
+};
+export {
+  o as clickable,
+  e as content,
+  i as default,
+  _ as field,
+  d as hiddenInput,
+  s as icon,
+  n as lg,
+  l as md,
+  c as sm,
+  t as xs
+};