skillgrid 0.0.80 → 0.0.82

package/dist/components/Trigger/Trigger.js

@@ -0,0 +1,154 @@
+import { jsxs as v, jsx as a } from "react/jsx-runtime";
+import { clsx as n } from "clsx";
+import { LabelState as A } from "./Trigger.type.js";
+import r from "./Trigger.module.css.js";
+import { getLabelState as K, getLabelTypographySize as M, truncateContent as Q, getContentTypographySize as W, getIconSize as H } from "./lib/utils.js";
+import { Typography as y } from "../Typography/Typography.js";
+import { XIcon as R } from "../InputBase/assets/XIcon.js";
+import { ChevronIcon as U } from "./assets/ChevronIcon.js";
+import { Helper as V } from "../Helper/Helper.js";
+const cr = ({
+  content: d,
+  size: i = "XL",
+  description: u,
+  label: N,
+  stretched: C = !1,
+  selectionStyle: s = "selected",
+  clearable: m = !1,
+  error: f,
+  prefixIcon: S,
+  postfixTitle: b,
+  disabled: o = !1,
+  open: p,
+  onClear: I,
+  classNames: t = {},
+  styles: e = {}
+}) => {
+  const g = !!d, L = !!N, c = !!f, w = s === "applied", E = !!u && (!c || o) || c && !o, O = (c && !o ? f : u) || "", h = c && !o, T = K(i, g), l = L && T === A.FLOATING, X = T === A.HIDDEN, j = n(
+    r["trigger-wrapper"],
+    { [r["trigger-stretched"]]: C },
+    t.wrapper
+  ), z = n(
+    r["trigger-container"],
+    r[`trigger-container-size-${i}`],
+    {
+      [r["trigger-stretched"]]: C,
+      [r["trigger-container-applied"]]: w && g,
+      [r["trigger-container-error"]]: c && !o,
+      [r["trigger-container-open"]]: p,
+      [r["trigger-container-floating"]]: l
+    },
+    t.triggerContainer
+  ), B = n(
+    r["trigger-content-container"],
+    {
+      [r["trigger-content-container-floating"]]: l
+    },
+    t.triggerContent
+  ), D = n(
+    r["trigger-label"],
+    {
+      [r["trigger-label-floating"]]: l,
+      [r["trigger-label-hidden"]]: X
+    },
+    t.label
+  ), F = n(r["trigger-content"], t.content), k = n(r["trigger-postfix"], t.postfixTitle), G = n(r["trigger-chevron-icon"], t.chevronIcon), P = n(
+    r["trigger-prefix-icon"],
+    t.prefixIconContainer
+  ), $ = n(r["trigger-clear-icon"], t.clearIcon), q = (x) => {
+    x == null || x.stopPropagation(), I == null || I();
+  }, J = g && p && (s === "selected" && m || s === "applied") || g && !p && (w || s === "selected" && m);
+  return /* @__PURE__ */ v("div", { className: j, style: e.wrapper, children: [
+    /* @__PURE__ */ v(
+      "button",
+      {
+        "data-testid": "trigger",
+        "aria-invalid": c,
+        "aria-haspopup": "listbox",
+        "aria-expanded": p,
+        role: "combobox",
+        className: z,
+        style: e.triggerContainer,
+        disabled: o,
+        type: "button",
+        children: [
+          S && i !== "XL" && /* @__PURE__ */ a("div", { className: P, style: e.prefixIconContainer, children: S }),
+          /* @__PURE__ */ v("div", { className: B, style: e.triggerContent, children: [
+            L && /* @__PURE__ */ a(
+              y.Label,
+              {
+                "data-testid": "trigger-label",
+                className: D,
+                style: e.label,
+                size: M(i, l),
+                as: "span",
+                disabled: o,
+                typographyStyle: l ? "secondary" : "tertiary",
+                children: N
+              }
+            ),
+            g && /* @__PURE__ */ a(
+              y.Label,
+              {
+                "data-testid": "trigger-content-container",
+                className: F,
+                style: e.content,
+                size: W(i),
+                as: "span",
+                disabled: o,
+                children: C ? d : Q(d)
+              }
+            ),
+            g && !!b && /* @__PURE__ */ a(
+              y.Label,
+              {
+                "data-testid": "trigger-postfix",
+                className: k,
+                style: e.postfixTitle,
+                size: W(i),
+                disabled: o,
+                typographyStyle: "secondary",
+                children: b
+              }
+            )
+          ] }),
+          J ? /* @__PURE__ */ a(
+            R,
+            {
+              className: $,
+              "data-testid": "trigger-clear",
+              size: H(i),
+              tabIndex: -1,
+              onClick: q,
+              style: { outline: "none", ...e.clearIcon },
+              color: s === "selected" && m ? "var(--base-graphite-75)" : void 0
+            }
+          ) : /* @__PURE__ */ a(
+            U,
+            {
+              "data-testid": "trigger-chevron",
+              size: H(i),
+              className: G,
+              color: "#AABBCA",
+              style: e.chevronIcon
+            }
+          )
+        ]
+      }
+    ),
+    E && /* @__PURE__ */ a(
+      V,
+      {
+        title: O,
+        error: h ? f : void 0,
+        className: h ? t.error : t.description,
+        style: h ? e.error : e.description,
+        disabled: o,
+        "data-testid": h ? "trigger-error" : "trigger-description"
+      }
+    )
+  ] });
+};
+export {
+  cr as Trigger
+};

package/dist/components/Trigger/Trigger.module.css.js

@@ -0,0 +1,27 @@
+import '../../assets/components/Trigger/Trigger.module-B91SEgX2.css';const r = {
+  "trigger-wrapper": "_trigger-wrapper_fm9f9_79",
+  "trigger-container": "_trigger-container_fm9f9_85",
+  "trigger-container-applied": "_trigger-container-applied_fm9f9_109",
+  "trigger-container-open": "_trigger-container-open_fm9f9_114",
+  "trigger-container-error": "_trigger-container-error_fm9f9_125",
+  "trigger-container-size-XS": "_trigger-container-size-XS_fm9f9_137",
+  "trigger-container-size-S": "_trigger-container-size-S_fm9f9_147",
+  "trigger-container-size-M": "_trigger-container-size-M_fm9f9_153",
+  "trigger-container-size-L": "_trigger-container-size-L_fm9f9_159",
+  "trigger-container-size-XL": "_trigger-container-size-XL_fm9f9_167",
+  "trigger-container-floating": "_trigger-container-floating_fm9f9_173",
+  "trigger-stretched": "_trigger-stretched_fm9f9_178",
+  "trigger-content-container": "_trigger-content-container_fm9f9_182",
+  "trigger-content-container-floating": "_trigger-content-container-floating_fm9f9_191",
+  "trigger-label": "_trigger-label_fm9f9_196",
+  "trigger-label-floating": "_trigger-label-floating_fm9f9_203",
+  "trigger-label-hidden": "_trigger-label-hidden_fm9f9_213",
+  "trigger-content": "_trigger-content_fm9f9_182",
+  "trigger-prefix-icon": "_trigger-prefix-icon_fm9f9_225",
+  "trigger-chevron-icon": "_trigger-chevron-icon_fm9f9_230",
+  "trigger-clear-icon": "_trigger-clear-icon_fm9f9_246",
+  "trigger-postfix": "_trigger-postfix_fm9f9_262"
+};
+export {
+  r as default
+};

package/dist/components/Trigger/Trigger.type.js

@@ -0,0 +1,4 @@
+var n = /* @__PURE__ */ ((r) => (r.NORMAL = "normal", r.FLOATING = "floating", r.HIDDEN = "hidden", r))(n || {});
+export {
+  n as LabelState
+};

package/dist/components/Trigger/assets/ChevronIcon.js

@@ -0,0 +1,46 @@
+import { jsx as t } from "react/jsx-runtime";
+const p = ({
+  className: e = "",
+  style: i,
+  size: o = "md",
+  color: h = "currentColor",
+  ...x
+}) => {
+  const s = {
+    display: "inline-block",
+    color: h,
+    ...{
+      xxxs: { width: "8px", height: "8px" },
+      xxs: { width: "12px", height: "12px" },
+      xs: { width: "16px", height: "16px" },
+      sm: { width: "24px", height: "24px" },
+      md: { width: "32px", height: "32px" },
+      lg: { width: "40px", height: "40px" }
+    }[o],
+    ...i
+  };
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      className: e,
+      style: s,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...x,
+      children: /* @__PURE__ */ t(
+        "path",
+        {
+          d: "M18 9L12 15L6 9",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
+export {
+  p as ChevronIcon
+};

package/dist/components/Trigger/lib/utils.js

@@ -0,0 +1,9 @@
+import { LabelState as e } from "../Trigger.type.js";
+const L = (r, t) => r === "XL" && t ? e.FLOATING : r !== "XL" && t ? e.HIDDEN : e.NORMAL, u = (r, t) => t ? 3 : r === "XL" || r === "L" ? 2 : 3, o = (r) => r === "XL" || r === "L" ? 2 : 3, a = (r) => r === "XL" || r === "L" ? "sm" : "xs", f = (r) => r.length > 30 ? r.slice(0, 30) + "…" : r;
+export {
+  o as getContentTypographySize,
+  a as getIconSize,
+  L as getLabelState,
+  u as getLabelTypographySize,
+  f as truncateContent
+};

package/dist/components/Typography/Typography.constants.js

@@ -0,0 +1,10 @@
+const h = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5"
+};
+export {
+  h as TYPOGRAPHY_HEADING_BY_SIZE
+};

package/dist/components/Typography/Typography.js

@@ -0,0 +1,76 @@
+import { jsx as u } from "react/jsx-runtime";
+import * as T from "react";
+import C from "../../styles/typography.module.css.js";
+import o from "./Typography.module.css.js";
+import { TYPOGRAPHY_HEADING_BY_SIZE as $ } from "./Typography.constants.js";
+import { clsx as b } from "clsx";
+const f = (t) => {
+  const r = T.forwardRef(
+    ({
+      size: p = 3,
+      children: a,
+      className: e,
+      "data-testid": s,
+      as: y,
+      fontWeight: l = "semibold",
+      disabled: m = !1,
+      typographyStyle: n = "primary",
+      ...i
+    }, g) => {
+      const c = y || $[p], d = b(
+        o.typography,
+        C[`typography-${t}-${p}-${l}`],
+        o[n],
+        {
+          [o.disabled]: m
+        },
+        e
+      );
+      return a ? /* @__PURE__ */ u(c, { ref: g, className: d, "data-testid": s, ...i, children: a }) : null;
+    }
+  );
+  return r.displayName = `Typography.${t === "title" ? "Title" : "Subtitle"}`, r;
+}, h = (t) => {
+  const r = T.forwardRef(
+    ({
+      size: p = 3,
+      children: a,
+      className: e,
+      "data-testid": s,
+      as: y = "p",
+      fontWeight: l = "regular",
+      disabled: m = !1,
+      typographyStyle: n = "primary",
+      ...i
+    }, g) => {
+      const c = y, d = b(
+        o.typography,
+        C[`typography-${t}-${p}-${l}`],
+        o[n],
+        {
+          [o.disabled]: m
+        },
+        e
+      );
+      return a ? /* @__PURE__ */ u(
+        c,
+        {
+          ref: g,
+          className: d,
+          "data-testid": s,
+          ...i,
+          children: a
+        }
+      ) : null;
+    }
+  );
+  return r.displayName = `Typography.${t.charAt(0).toUpperCase() + t.slice(1)}`, r;
+}, S = {
+  Title: f("title"),
+  Subtitle: f("subtitle"),
+  Label: h("label"),
+  Paragraph: h("paragraph")
+};
+export {
+  S as Typography
+};

package/dist/components/Typography/Typography.module.css.js

@@ -0,0 +1,35 @@
+import '../../assets/components/Typography/Typography.module-TJDGpv-d.css';const a = "_typography_1mq4x_1", _ = "_disabled_1mq4x_8", n = "_primary_1mq4x_13", t = "_secondary_1mq4x_18", c = "_tertiary_1mq4x_23", s = "_accent_1mq4x_28", e = "_positive_1mq4x_38", o = "_negative_1mq4x_48", r = "_warning_1mq4x_58", i = "_special_1mq4x_68", y = "_contrast_1mq4x_78", m = "_custom_1mq4x_88", d = {
+  typography: a,
+  disabled: _,
+  primary: n,
+  secondary: t,
+  tertiary: c,
+  accent: s,
+  "accent-secondary": "_accent-secondary_1mq4x_33",
+  positive: e,
+  "positive-secondary": "_positive-secondary_1mq4x_43",
+  negative: o,
+  "negative-secondary": "_negative-secondary_1mq4x_53",
+  warning: r,
+  "warning-secondary": "_warning-secondary_1mq4x_63",
+  special: i,
+  "special-secondary": "_special-secondary_1mq4x_73",
+  contrast: y,
+  "contrast-secondary": "_contrast-secondary_1mq4x_83",
+  custom: m
+};
+export {
+  s as accent,
+  y as contrast,
+  m as custom,
+  d as default,
+  _ as disabled,
+  o as negative,
+  e as positive,
+  n as primary,
+  t as secondary,
+  i as special,
+  c as tertiary,
+  a as typography,
+  r as warning
+};

package/dist/hooks/useBackgroundColor.js

@@ -0,0 +1,22 @@
+import { useRef as o, useState as s, useEffect as u } from "react";
+const l = (t) => t === "rgba(0, 0, 0, 0)" || t === "transparent" || t.startsWith("rgba") && t.endsWith(", 0)"), c = (t) => {
+  if (!t) return null;
+  let r = t;
+  for (; r; ) {
+    const e = window.getComputedStyle(r).backgroundColor;
+    if (!l(e)) return e;
+    r = r.parentElement;
+  }
+  return null;
+}, g = () => {
+  const t = o(null), [r, n] = s(null);
+  return u(() => {
+    if (t.current) {
+      const e = c(t.current);
+      n(e);
+    }
+  }, []), { ref: t, bgColor: r };
+};
+export {
+  g as useBackgroundColor
+};

package/dist/hooks/useCompatId.js

@@ -0,0 +1,9 @@
+import * as r from "react";
+let a = 0;
+const s = (e) => (a += 1, `${e}-${a}`), l = (e = "skillgrid") => {
+  const t = r.useId, c = r.useRef(s(e));
+  return t ? t() : c.current;
+};
+export {
+  l as useCompatId
+};

package/dist/hooks/useIsMobile.js

@@ -0,0 +1,9 @@
+import { useMemo as r } from "react";
+import { useViewportSize as t } from "./useViewPortSize.js";
+function s(o = 768) {
+  const { width: e } = t();
+  return r(() => e <= o, [e, o]);
+}
+export {
+  s as useIsMobile
+};

package/dist/hooks/useViewPortSize.js

@@ -0,0 +1,17 @@
+import { useState as s, useCallback as r, useEffect as w } from "react";
+import { useWindowEvent as i } from "./useWindowEvent.js";
+const t = {
+  passive: !0
+};
+function u() {
+  const [n, o] = s({
+    width: 0,
+    height: 0
+  }), e = r(() => {
+    o({ width: window.innerWidth || 0, height: window.innerHeight || 0 });
+  }, []);
+  return i("resize", e, t), i("orientationchange", e, t), w(e, []), n;
+}
+export {
+  u as useViewportSize
+};

package/dist/hooks/useWindowEvent.js

@@ -0,0 +1,7 @@
+import { useEffect as r } from "react";
+function t(e, n, o) {
+  r(() => (window.addEventListener(e, n, o), () => window.removeEventListener(e, n, o)), [e, n]);
+}
+export {
+  t as useWindowEvent
+};