skillgrid 0.0.80 → 0.0.82

package/dist/components/Badge/Badge.js

@@ -0,0 +1,67 @@
+import { jsxs as E, jsx as l } from "react/jsx-runtime";
+import { forwardRef as I } from "react";
+import p from "classnames";
+import t from "./Badge.module.css.js";
+import { useBackgroundColor as z } from "../../hooks/useBackgroundColor.js";
+const A = I((g, b) => {
+  const {
+    icon: e,
+    children: f,
+    variant: n = "filled",
+    label: m,
+    isHidden: u = !1,
+    colorScheme: h = "red",
+    size: C = 20,
+    position: x = "top-right",
+    positionOffset: r = { x: 0, y: 0 },
+    cutoutBackground: v,
+    isDisabled: s,
+    className: $,
+    "data-testid": o = "badge",
+    ...i
+  } = g, { onClick: a, onPointerDown: k } = i, { ref: y, bgColor: N } = z(), d = v || N, c = !s && (!!a || !!k), w = p(t.badge__container, t[`position-${x}`]), B = p(
+    $,
+    t.badge__content,
+    t[`color-${h}`],
+    t[`variant-${n}`],
+    {
+      [t.disabled]: s,
+      [t.icon]: !!e,
+      [t.interactive]: c
+    }
+  ), _ = {
+    "--badge-height": `${C}px`,
+    "--badge-offset-x": `${r.x}px`,
+    "--badge-offset-y": `${r.y}px`,
+    ...d && { "--badge-cutout-bg": d },
+    ...n === "transparent" && { "--badge-cutout-bg": "transparent" }
+  }, H = (e == null ? void 0 : e({})) || m, j = (D) => {
+    c && (a == null || a(D));
+  };
+  return /* @__PURE__ */ E("div", { className: t.wrapper, ref: y, "data-testid": o + "-wrapper", children: [
+    f,
+    !u && /* @__PURE__ */ l(
+      "span",
+      {
+        className: w,
+        style: _,
+        "data-testid": o + "-container",
+        children: /* @__PURE__ */ l(
+          "span",
+          {
+            ...i,
+            onClick: j,
+            className: B,
+            "data-testid": o + "-content",
+            ref: b,
+            "aria-disabled": s,
+            children: H
+          }
+        )
+      }
+    )
+  ] });
+});
+export {
+  A as Badge
+};

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

@@ -0,0 +1,48 @@
+import '../../assets/components/Badge/Badge.module-DAjl5-td.css';const t = "_wrapper_1tbse_5", o = "_badge__container_1tbse_6", i = "_badge__content_1tbse_7", e = "_interactive_1tbse_20", _ = "_disabled_1tbse_21", n = "_icon_1tbse_22", s = {
+  wrapper: t,
+  badge__container: o,
+  badge__content: i,
+  interactive: e,
+  disabled: _,
+  icon: n,
+  "variant-filled": "_variant-filled_1tbse_98",
+  "color-brand": "_color-brand_1tbse_103",
+  "color-red": "_color-red_1tbse_111",
+  "color-orange": "_color-orange_1tbse_119",
+  "color-yellow": "_color-yellow_1tbse_127",
+  "color-green": "_color-green_1tbse_135",
+  "color-blue": "_color-blue_1tbse_143",
+  "color-lightblue": "_color-lightblue_1tbse_151",
+  "color-purple": "_color-purple_1tbse_159",
+  "color-gray": "_color-gray_1tbse_167",
+  "color-contrast": "_color-contrast_1tbse_175",
+  "variant-light": "_variant-light_1tbse_184",
+  "variant-outline": "_variant-outline_1tbse_261",
+  "variant-transparent": "_variant-transparent_1tbse_339",
+  "position-top-left": "_position-top-left_1tbse_410",
+  "position-top-right": "_position-top-right_1tbse_416",
+  "position-bottom-left": "_position-bottom-left_1tbse_422",
+  "position-bottom-right": "_position-bottom-right_1tbse_428",
+  "position-top-center": "_position-top-center_1tbse_434",
+  "position-bottom-center": "_position-bottom-center_1tbse_440",
+  "position-middle-left": "_position-middle-left_1tbse_446",
+  "position-middle-right": "_position-middle-right_1tbse_452",
+  "position-middle-center": "_position-middle-center_1tbse_458",
+  "position-top-left-inside": "_position-top-left-inside_1tbse_465",
+  "position-top-right-inside": "_position-top-right-inside_1tbse_471",
+  "position-bottom-left-inside": "_position-bottom-left-inside_1tbse_477",
+  "position-bottom-right-inside": "_position-bottom-right-inside_1tbse_483",
+  "position-top-center-inside": "_position-top-center-inside_1tbse_489",
+  "position-bottom-center-inside": "_position-bottom-center-inside_1tbse_495",
+  "position-middle-left-inside": "_position-middle-left-inside_1tbse_501",
+  "position-middle-right-inside": "_position-middle-right-inside_1tbse_507"
+};
+export {
+  o as badge__container,
+  i as badge__content,
+  s as default,
+  _ as disabled,
+  n as icon,
+  e as interactive,
+  t as wrapper
+};

package/dist/components/Button/Button.js

@@ -0,0 +1,271 @@
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import { forwardRef as H, Fragment as G } from "react";
+import { isAsLink as nt, isAsButton as ot } from "./Button.type.js";
+import t from "./Button.module.css.js";
+import { clsx as d } from "clsx";
+import { getSafeProps as j } from "./lib/get-safe-props.js";
+import { getLoaderVariant as st } from "./lib/get-loader-variant.js";
+import { getTypography as it } from "./lib/get-typography.js";
+import C from "../../styles/typography.module.css.js";
+import { getButtonTypography as lt } from "./lib/get-button-typography.js";
+import { getSafeRel as Y } from "./lib/get-safe-rel.js";
+import { useDarkTheme as ct } from "../ConfigProvider/ConfigProvider.hook.js";
+import { Loader as dt } from "../Loader/Loader.js";
+import { ArrowLeftIcon as rt } from "./assets/ArrowLeftIcon.js";
+const Q = ({
+  iconLeft: e,
+  children: o,
+  postfix: i,
+  subcaption: s,
+  size: l
+}) => {
+  const n = !!(s && l === "l"), u = !!(!o && e), r = !!(n && !o && i || i && !n);
+  return /* @__PURE__ */ g(G, { children: [
+    n && o && /* @__PURE__ */ g(G, { children: [
+      /* @__PURE__ */ a("span", { "data-testid": "button-label", className: d(t.label, t.labelText), children: o }),
+      /* @__PURE__ */ a(
+        "span",
+        {
+          "data-testid": "button-subcaption",
+          className: d(t.subcaption, C["typography-label-4-regular"]),
+          children: s
+        }
+      )
+    ] }),
+    !n && o && /* @__PURE__ */ g("span", { "data-testid": "button-label", className: t.label, children: [
+      e && /* @__PURE__ */ a("span", { "data-testid": "button-left-icon", className: t.icon, children: e }),
+      /* @__PURE__ */ a("span", { className: t.labelText, children: o })
+    ] }),
+    u && /* @__PURE__ */ a("span", { "data-testid": "button-icon", className: t.icon, children: e }),
+    r && /* @__PURE__ */ a("div", { "data-testid": "button-right-group", className: t.rightGroup, children: /* @__PURE__ */ a(
+      "span",
+      {
+        "data-testid": "button-postfix",
+        className: d(t.postfix, C["typography-subtitle-2-semibold"]),
+        children: i
+      }
+    ) })
+  ] });
+}, U = H((e, o) => {
+  const {
+    mode: i = "primary",
+    size: s = "m",
+    buttonStyle: l = "neutral",
+    disabled: n = !1,
+    className: u,
+    children: r,
+    tabIndex: z,
+    subcaption: v,
+    postfix: R,
+    stretched: k,
+    iconLeft: A,
+    loading: E
+  } = e, y = i === "tertiary", K = y && "paddings" in e ? e.paddings ?? !0 : !0, c = !!("loading" in e && E), b = !n && !c, M = !!(!r && A && !R), V = typeof k == "object" ? k.justify === "space-between" : void 0, _ = lt(s), L = C[_], S = st(n, i, l), N = n || c ? -1 : z, w = d(
+    t.button,
+    t[s],
+    t[i],
+    t[l],
+    L,
+    {
+      [t.disabled]: n,
+      [t.loading]: c,
+      [t.stretched]: k,
+      [t.spaceBetween]: V,
+      [t.withSubcaption]: !!(v && s === "l" && r),
+      [t.iconOnly]: M,
+      [t.noPaddings]: y && !K
+    },
+    u
+  ), B = {
+    iconLeft: A,
+    children: r,
+    postfix: R,
+    subcaption: v,
+    size: s
+  };
+  if (nt(e)) {
+    const { href: I, onClick: m, style: T, target: x, rel: D, "data-testid": p, ...h } = e, O = j(h), f = x ?? (e.isExternal ? "_blank" : void 0), F = Y({ rel: D, target: f });
+    return /* @__PURE__ */ a(
+      "a",
+      {
+        ref: o,
+        className: w,
+        href: b ? I : void 0,
+        tabIndex: N,
+        onClick: (P) => {
+          if (!b) {
+            P.preventDefault();
+            return;
+          }
+          m == null || m(P);
+        },
+        "data-testid": p,
+        "aria-disabled": n || c,
+        style: T,
+        target: f,
+        rel: F,
+        ...O,
+        children: /* @__PURE__ */ a(Q, { ...B })
+      }
+    );
+  }
+  if (ot(e)) {
+    const { type: I = "button", onClick: m, style: T, "data-testid": x, ...D } = e, p = j(D), h = s === "l" ? 24 : 16;
+    return /* @__PURE__ */ g(
+      "button",
+      {
+        ref: o,
+        type: I,
+        className: w,
+        disabled: n,
+        tabIndex: N,
+        onClick: (f) => {
+          b && m && m(f);
+        },
+        "data-testid": x,
+        "aria-disabled": n || c,
+        style: T,
+        ...p,
+        children: [
+          /* @__PURE__ */ a("div", { className: d(t.content, { [t.contentHidden]: c }), children: /* @__PURE__ */ a(Q, { ...B }) }),
+          c && /* @__PURE__ */ a("div", { className: t.loaderWrapper, children: /* @__PURE__ */ a(
+            dt,
+            {
+              variant: S,
+              "aria-hidden": "true",
+              "data-testid": "button-loader",
+              size: h
+            }
+          ) })
+        ]
+      }
+    );
+  }
+  return null;
+});
+U.displayName = "Button";
+const Z = H(
+  (e, o) => {
+    const { iconLeft: i, className: s, ...l } = e, u = {
+      ...l,
+      mode: "tertiary",
+      buttonStyle: "neutral",
+      size: "m",
+      iconLeft: i ?? /* @__PURE__ */ a(rt, {}),
+      className: d(t.backButton, C["typography-subtitle-1-semibold"], s)
+    };
+    return /* @__PURE__ */ a(U, { ref: o, ...u });
+  }
+);
+Z.displayName = "Button.Back";
+const X = ({
+  iconLeft: e,
+  iconRight: o,
+  children: i,
+  showLinkIcons: s
+}) => {
+  const l = !!(!i && o);
+  return /* @__PURE__ */ g(G, { children: [
+    i && /* @__PURE__ */ g("span", { "data-testid": "button-label", className: t.label, children: [
+      s && e && /* @__PURE__ */ a("span", { "data-testid": "button-left-icon", className: t.icon, children: e }),
+      /* @__PURE__ */ a("span", { className: d(t.labelText, t.isLink), children: i }),
+      s && o && /* @__PURE__ */ a("span", { "data-testid": "button-icon", className: d(t.icon, t.iconRight), children: o })
+    ] }),
+    l && s && /* @__PURE__ */ a("span", { "data-testid": "button-icon", className: t.icon, children: o })
+  ] });
+}, $ = H(
+  (e, o) => {
+    const {
+      mode: i = "primary",
+      size: s = "m",
+      buttonStyle: l = "accent",
+      disabled: n = !1,
+      className: u,
+      children: r,
+      tabIndex: z,
+      showUnderline: v = !1,
+      iconLeft: R,
+      iconRight: k
+    } = e, E = ct() && i === "primary" ? "secondary" : i, y = s !== void 0, K = y ? R : void 0, c = y ? k : void 0, b = !n, M = !!(!r && c), V = it(s ?? "m"), _ = C[V], L = n ? -1 : z, S = d(
+      t.button,
+      t[s ?? "m"],
+      t[E],
+      t[l],
+      _,
+      {
+        [t.disabled]: n,
+        [t.iconOnly]: M,
+        [t.link]: !0,
+        [t.underline]: v
+      },
+      u
+    ), N = {
+      iconLeft: K,
+      iconRight: c,
+      children: r,
+      showLinkIcons: y
+    };
+    if (e.as === "a") {
+      const {
+        href: p,
+        onClick: h,
+        style: O,
+        target: f,
+        rel: F,
+        "data-testid": W,
+        isExternal: P,
+        ...tt
+      } = e, et = j(tt), q = f ?? (P ? "_blank" : void 0), at = Y({ rel: F, target: q });
+      return /* @__PURE__ */ a(
+        "a",
+        {
+          ref: o,
+          className: S,
+          href: b ? p : void 0,
+          tabIndex: L,
+          onClick: (J) => {
+            if (!b) {
+              J.preventDefault();
+              return;
+            }
+            h == null || h(J);
+          },
+          "data-testid": W,
+          "aria-disabled": n,
+          style: O,
+          target: q,
+          rel: at,
+          ...et,
+          children: /* @__PURE__ */ a(X, { ...N })
+        }
+      );
+    }
+    const { type: w = "button", onClick: B, style: I, "data-testid": m, ...T } = e, x = j(T);
+    return /* @__PURE__ */ a(
+      "button",
+      {
+        ref: o,
+        type: w,
+        className: S,
+        disabled: n,
+        tabIndex: L,
+        onClick: (p) => {
+          b && B && B(p);
+        },
+        "data-testid": m,
+        "aria-disabled": n,
+        style: I,
+        ...x,
+        children: /* @__PURE__ */ a(X, { ...N })
+      }
+    );
+  }
+);
+$.displayName = "Button.Link";
+const vt = Object.assign(U, {
+  Back: Z,
+  Link: $
+});
+export {
+  vt as Button
+};

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

@@ -0,0 +1,89 @@
+import '../../assets/components/Button/Button.module-D-SOelVs.css';const c = "_button_vrcps_1", n = "_link_vrcps_22", s = "_disabled_vrcps_27", _ = "_loading_vrcps_27", t = "_noPaddings_vrcps_27", o = "_neutral_vrcps_59", r = "_accent_vrcps_63", e = "_positive_vrcps_67", i = "_negative_vrcps_71", p = "_contrast_vrcps_75", a = "_primary_vrcps_79", v = "_secondary_vrcps_80", l = "_tertiary_vrcps_81", d = "_gray_vrcps_91", u = "_dreamy_vrcps_113", b = "_special_vrcps_119", g = "_lovely_vrcps_125", y = "_warning_vrcps_131", h = "_vivid_vrcps_137", x = "_blue_vrcps_143", k = "_spaceBetween_vrcps_155", m = "_rightGroup_vrcps_155", w = "_withSubcaption_vrcps_163", B = "_label_vrcps_175", f = "_icon_vrcps_184", G = "_labelText_vrcps_189", H = "_isLink_vrcps_195", L = "_iconOnly_vrcps_210", O = "_stretched_vrcps_226", P = "_postfix_vrcps_231", R = "_underline_vrcps_261", S = "_backButton_vrcps_464", T = "_subcaption_vrcps_2088", W = "_content_vrcps_2093", $ = "_contentHidden_vrcps_2097", j = "_loaderWrapper_vrcps_2101", q = "_l_vrcps_22", z = "_m_vrcps_2140", A = "_s_vrcps_80", C = "_xs_vrcps_2183", D = "_iconRight_vrcps_2241", E = "_spin_vrcps_1", F = {
+  button: c,
+  link: n,
+  disabled: s,
+  loading: _,
+  noPaddings: t,
+  neutral: o,
+  accent: r,
+  positive: e,
+  negative: i,
+  contrast: p,
+  primary: a,
+  secondary: v,
+  tertiary: l,
+  gray: d,
+  dreamy: u,
+  special: b,
+  lovely: g,
+  warning: y,
+  vivid: h,
+  blue: x,
+  spaceBetween: k,
+  rightGroup: m,
+  withSubcaption: w,
+  label: B,
+  icon: f,
+  labelText: G,
+  isLink: H,
+  iconOnly: L,
+  stretched: O,
+  postfix: P,
+  underline: R,
+  backButton: S,
+  subcaption: T,
+  content: W,
+  contentHidden: $,
+  loaderWrapper: j,
+  l: q,
+  m: z,
+  s: A,
+  xs: C,
+  iconRight: D,
+  spin: E
+};
+export {
+  r as accent,
+  S as backButton,
+  x as blue,
+  c as button,
+  W as content,
+  $ as contentHidden,
+  p as contrast,
+  F as default,
+  s as disabled,
+  u as dreamy,
+  d as gray,
+  f as icon,
+  L as iconOnly,
+  D as iconRight,
+  H as isLink,
+  q as l,
+  B as label,
+  G as labelText,
+  n as link,
+  j as loaderWrapper,
+  _ as loading,
+  g as lovely,
+  z as m,
+  i as negative,
+  o as neutral,
+  t as noPaddings,
+  e as positive,
+  P as postfix,
+  a as primary,
+  m as rightGroup,
+  A as s,
+  v as secondary,
+  k as spaceBetween,
+  b as special,
+  E as spin,
+  O as stretched,
+  T as subcaption,
+  l as tertiary,
+  R as underline,
+  h as vivid,
+  y as warning,
+  w as withSubcaption,
+  C as xs
+};

package/dist/components/Button/Button.type.js

@@ -0,0 +1,5 @@
+const t = (s) => s.as === "a", n = (s) => s.as === void 0 || s.as === "button";
+export {
+  n as isAsButton,
+  t as isAsLink
+};

package/dist/components/Button/assets/ArrowLeftIcon.js

@@ -0,0 +1,31 @@
+import { jsx as o } from "react/jsx-runtime";
+const c = ({
+  width: r = 24,
+  height: t = 24,
+  className: n = "",
+  color: e = "currentColor",
+  ...s
+}) => /* @__PURE__ */ o(
+  "svg",
+  {
+    className: n,
+    width: r,
+    height: t,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...s,
+    children: /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M19 12H5m0 0 7 7m-7-7 7-7",
+        stroke: e,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "2"
+      }
+    )
+  }
+);
+export {
+  c as ArrowLeftIcon
+};

package/dist/components/Button/lib/get-button-typography.js

@@ -0,0 +1,9 @@
+const o = {
+  l: "typography-subtitle-1-semibold",
+  m: "typography-subtitle-2-semibold",
+  s: "typography-label-3-medium",
+  xs: "typography-label-3-medium"
+}, p = (t) => o[t] || "typography-subtitle-2-semibold";
+export {
+  p as getButtonTypography
+};

package/dist/components/Button/lib/get-loader-variant.js

@@ -0,0 +1,14 @@
+const i = (a, t, r) => a ? "gray" : t === "primary" ? {
+  contrast: "neutral",
+  gray: "gray"
+}[r] ?? "contrast" : {
+  accent: "accent",
+  neutral: "neutral",
+  positive: "positive",
+  negative: "negative",
+  contrast: "contrast",
+  gray: "gray"
+}[r] ?? "custom";
+export {
+  i as getLoaderVariant
+};

package/dist/components/Button/lib/get-safe-props.js

@@ -0,0 +1,27 @@
+const s = /* @__PURE__ */ new Set([
+  "mode",
+  "size",
+  "buttonStyle",
+  "loading",
+  "disabled",
+  "stretched",
+  "iconRight",
+  "className",
+  "children",
+  "subcaption",
+  "postfix",
+  "iconLeft",
+  "as",
+  "showUnderline",
+  "isExternal",
+  "asBackButton",
+  "paddings"
+]), o = (e) => {
+  const n = {};
+  for (const t in e)
+    s.has(t) || (n[t] = e[t]);
+  return n;
+};
+export {
+  o as getSafeProps
+};

package/dist/components/Button/lib/get-safe-rel.js

@@ -0,0 +1,12 @@
+const t = "_blank", a = ["noopener", "noreferrer"], s = ({ rel: e, target: n }) => {
+  if (n !== t) return e;
+  const o = new Set(
+    (e ?? "").split(/\s+/).map((r) => r.trim()).filter(Boolean)
+  );
+  for (const r of a)
+    o.add(r);
+  return Array.from(o).join(" ");
+};
+export {
+  s as getSafeRel
+};

package/dist/components/Button/lib/get-typography.js

@@ -0,0 +1,11 @@
+const p = {
+  l: "typography-subtitle-1-semibold",
+  m: "typography-label-2-regular",
+  s: "typography-label-3-regular"
+};
+function a(r) {
+  return p[r] || "typography-label-2-regular";
+}
+export {
+  a as getTypography
+};