skillgrid 0.0.80 → 0.0.81

package/dist/components/TextInput/lib/getters.js

@@ -0,0 +1,165 @@
+import { SIZES as t } from "./constants.js";
+const g = (e, x, r, p) => {
+  switch (e) {
+    case t.XL:
+      return x && r ? "8px 16px 8px 16px" : "16px 16px 16px 16px";
+    case t.L:
+      return p ? "12px 12px 12px 12px" : "12px 16px 12px 16px";
+    case t.M:
+      return "10px 12px 10px 12px";
+    case t.S:
+      return "6px 10px 6px 10px";
+    default:
+      return "12px 16px 12px 16px";
+  }
+}, c = (e) => {
+  switch (e) {
+    case t.XL:
+      return "56px";
+    case t.L:
+      return "48px";
+    case t.M:
+      return "40px";
+    case t.S:
+      return "32px";
+    default:
+      return "48px";
+  }
+}, l = (e) => {
+  switch (e) {
+    case t.S:
+    case t.M:
+    case t.L:
+      return 4;
+    case t.XL:
+      return 8;
+    default:
+      return 8;
+  }
+}, S = (e) => {
+  switch (e) {
+    case t.S:
+    case t.M:
+      return 8;
+    case t.L:
+    case t.XL:
+      return 12;
+    default:
+      return 12;
+  }
+}, o = (e, x, r, p) => ({
+  wrapperStyles: {
+    minHeight: e,
+    maxHeight: e,
+    boxSizing: "border-box",
+    padding: x
+  },
+  floatingLabelStyles: {
+    left: "10px"
+  },
+  prefixStyles: {
+    paddingRight: `${r}px`
+  },
+  suffixStyles: {
+    right: `${p}px`,
+    maxWidth: "32px",
+    maxHeight: "32px",
+    padding: "6px",
+    cursor: "pointer"
+  }
+}), f = (e, x, r, p) => ({
+  wrapperStyles: {
+    height: e,
+    minHeight: e,
+    maxHeight: e,
+    boxSizing: "border-box",
+    padding: x
+  },
+  floatingLabelStyles: {
+    left: "16px",
+    transformOrigin: "left top"
+  },
+  prefixStyles: {
+    paddingRight: `${r}px`
+  },
+  suffixStyles: {
+    right: `${p}px`,
+    maxWidth: "40px",
+    maxHeight: "40px",
+    padding: "8px",
+    cursor: "pointer"
+  }
+}), u = (e, x, r, p) => ({
+  wrapperStyles: {
+    minHeight: e,
+    maxHeight: e,
+    boxSizing: "border-box",
+    padding: x
+  },
+  floatingLabelStyles: {
+    left: "16px"
+  },
+  prefixStyles: {
+    paddingRight: `${r}px`
+  },
+  suffixStyles: {
+    right: `${p}px`,
+    maxWidth: "40px",
+    maxHeight: "40px",
+    padding: "8px",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}), d = (e, x, r, p) => ({
+  wrapperStyles: {
+    minHeight: e,
+    maxHeight: e,
+    boxSizing: "border-box",
+    padding: x
+  },
+  floatingLabelStyles: {
+    left: "12px"
+  },
+  prefixStyles: {
+    paddingRight: `${r}px`
+  },
+  suffixStyles: {
+    right: `${p}px`,
+    maxWidth: "32px",
+    maxHeight: "32px",
+    padding: "6px",
+    cursor: "pointer"
+  }
+}), h = (e, x, r, p) => {
+  const i = c(e), n = g(e, x, r, p), s = S(e), a = l(e);
+  switch (e) {
+    case t.XL:
+      return f(i, n, s, a);
+    case t.L:
+      return u(i, n, s, a);
+    case t.M:
+      return d(i, n, s, a);
+    case t.S:
+      return o(i, n, s, a);
+    default:
+      return {
+        wrapperStyles: {},
+        floatingLabelStyles: {},
+        prefixStyles: {},
+        suffixStyles: {}
+      };
+  }
+};
+export {
+  c as getHeight,
+  u as getLSizeStyles,
+  d as getMSizeStyles,
+  g as getPadding,
+  S as getPrefixSpacing,
+  o as getSSizeStyles,
+  h as getSizeStyles,
+  l as getSuffixSpacing,
+  f as getXLSizeStyles
+};

package/dist/components/Tooltip/Tooltip.constants.js

@@ -0,0 +1,168 @@
+const t = {
+  shiftX: 64,
+  adjustY: 1
+}, o = { adjustX: 1, shiftY: !0 }, e = {
+  left: {
+    points: ["cr", "cl"],
+    overflow: o,
+    offset: [-22, 0]
+  },
+  right: {
+    points: ["cl", "cr"],
+    overflow: o,
+    offset: [22, 0]
+  },
+  top: {
+    points: ["bc", "tc"],
+    overflow: t,
+    offset: [0, -22]
+  },
+  bottom: {
+    points: ["tc", "bc"],
+    overflow: t,
+    offset: [0, 22]
+  },
+  topLeft: {
+    points: ["bl", "tl"],
+    overflow: t,
+    offset: [0, -22]
+  },
+  leftTop: {
+    points: ["tr", "tl"],
+    overflow: o,
+    offset: [-22, 0]
+  },
+  topRight: {
+    points: ["br", "tr"],
+    overflow: t,
+    offset: [0, -22]
+  },
+  rightTop: {
+    points: ["tl", "tr"],
+    overflow: o,
+    offset: [22, 0]
+  },
+  bottomRight: {
+    points: ["tr", "br"],
+    overflow: t,
+    offset: [0, 22]
+  },
+  rightBottom: {
+    points: ["bl", "br"],
+    overflow: o,
+    offset: [22, 0]
+  },
+  bottomLeft: {
+    points: ["tl", "bl"],
+    overflow: t,
+    offset: [0, 22]
+  },
+  leftBottom: {
+    points: ["br", "bl"],
+    overflow: o,
+    offset: [-22, 0]
+  }
+}, s = {
+  left: {
+    points: ["cr", "cl"],
+    overflow: o,
+    offset: [-16, 0]
+  },
+  right: {
+    points: ["cl", "cr"],
+    overflow: o,
+    offset: [16, 0]
+  },
+  top: {
+    points: ["bc", "tc"],
+    overflow: t,
+    offset: [0, -16]
+  },
+  bottom: {
+    points: ["tc", "bc"],
+    overflow: t,
+    offset: [0, 16]
+  },
+  topLeft: {
+    points: ["bl", "tl"],
+    overflow: t,
+    offset: [0, -16]
+  },
+  leftTop: {
+    points: ["tr", "tl"],
+    overflow: o,
+    offset: [-16, 0]
+  },
+  topRight: {
+    points: ["br", "tr"],
+    overflow: t,
+    offset: [0, -16]
+  },
+  rightTop: {
+    points: ["tl", "tr"],
+    overflow: o,
+    offset: [16, 0]
+  },
+  bottomRight: {
+    points: ["tr", "br"],
+    overflow: t,
+    offset: [0, 16]
+  },
+  rightBottom: {
+    points: ["bl", "br"],
+    overflow: o,
+    offset: [16, 0]
+  },
+  bottomLeft: {
+    points: ["tl", "bl"],
+    overflow: t,
+    offset: [0, 16]
+  },
+  leftBottom: {
+    points: ["br", "bl"],
+    overflow: o,
+    offset: [-16, 0]
+  }
+}, r = {
+  neutral: {
+    1: [{ mode: "secondary", buttonStyle: "neutral", size: "s" }],
+    2: [
+      { mode: "secondary", buttonStyle: "neutral", size: "s" },
+      { mode: "primary", buttonStyle: "neutral", size: "s" }
+    ],
+    3: [
+      { mode: "primary", buttonStyle: "accent", size: "s" },
+      { mode: "secondary", buttonStyle: "neutral", size: "s" },
+      { mode: "primary", buttonStyle: "neutral", size: "s" }
+    ]
+  },
+  contrast: {
+    1: [{ mode: "primary", buttonStyle: "neutral", size: "s" }],
+    2: [
+      { mode: "primary", buttonStyle: "neutral", size: "s" },
+      { mode: "secondary", buttonStyle: "neutral", size: "s" }
+    ],
+    3: [
+      { mode: "primary", buttonStyle: "accent", size: "s" },
+      { mode: "primary", buttonStyle: "neutral", size: "s" },
+      { mode: "secondary", buttonStyle: "neutral", size: "s" }
+    ]
+  },
+  accent: {
+    1: [{ mode: "secondary", buttonStyle: "neutral", size: "s" }],
+    2: [
+      { mode: "secondary", buttonStyle: "neutral", size: "s" },
+      { mode: "primary", buttonStyle: "accent", size: "s" }
+    ],
+    3: [
+      { mode: "primary", buttonStyle: "neutral", size: "s" },
+      { mode: "secondary", buttonStyle: "neutral", size: "s" },
+      { mode: "primary", buttonStyle: "accent", size: "s" }
+    ]
+  }
+};
+export {
+  r as BUTTON_PRESETS,
+  e as TOOLTIP_PLACEMENTS_M,
+  s as TOOLTIP_PLACEMENTS_SMALL
+};

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,156 @@
+import { jsx as o, jsxs as C } from "react/jsx-runtime";
+import { useState as v, useEffect as W } from "react";
+import j from "rc-tooltip";
+import t from "./Tooltip.module.css.js";
+import { clsx as S } from "clsx";
+import { TOOLTIP_PLACEMENTS_M as F, TOOLTIP_PLACEMENTS_SMALL as q, BUTTON_PRESETS as D } from "./Tooltip.constants.js";
+import { TooltipArrowIcon as H, CrossOutlinedIcon as U } from "./assets/react-svg-icons.js";
+import { Typography as x } from "../Typography/Typography.js";
+import { mergeTooltipButtonProps as $ } from "./utils/merge-tooltip-button-props.js";
+import { Button as G } from "../Button/Button.js";
+import { getIntInRange as J } from "../../lib/get-int-in-range.js";
+const K = (f, a, s) => {
+  const r = J(a, 1, 3), c = D[s][r];
+  return c[Math.min(f, c.length - 1)];
+}, O = ({
+  text: f,
+  title: a,
+  media: s,
+  variant: r = "neutral",
+  size: c,
+  classNames: e = {},
+  onClose: p,
+  buttons: m,
+  buttonProps: k,
+  showClose: d
+}) => {
+  const n = ["neutral", "accent"].includes(r) ? "contrast" : "primary", l = c === "m", w = !!(a && l), g = !!(s && l), A = m && !!m.length, I = !!(d && l) || !d && l && !A, u = c === "xs" ? 4 : 3;
+  return /* @__PURE__ */ C("div", { className: t.content, children: [
+    g && /* @__PURE__ */ o("div", { className: S(t.mediaWrapper, e.mediaWrapper), children: s }),
+    /* @__PURE__ */ C("div", { className: e == null ? void 0 : e.textWrapper, children: [
+      w && /* @__PURE__ */ o(
+        x.Subtitle,
+        {
+          className: S(t.typography, t.title, e.typography),
+          size: 1,
+          as: "h3",
+          typographyStyle: n,
+          children: a
+        }
+      ),
+      /* @__PURE__ */ o(
+        x.Label,
+        {
+          className: S(t.typography, t.text, e.typography),
+          typographyStyle: n,
+          size: u,
+          children: f
+        }
+      )
+    ] }),
+    I && /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: S(t.closeButton, t[r], e.closeButton, {
+          [t.hasMedia]: g
+        }),
+        onClick: p,
+        "aria-label": "Закрыть подсказку",
+        "data-testid": "tooltip-close-button",
+        children: /* @__PURE__ */ o(U, {})
+      }
+    ),
+    l && A && /* @__PURE__ */ o("div", { className: t.buttonStack, children: m.map((y, h) => {
+      const B = K(h, m.length, r), T = $(y, B, k), { closeOnClick: M, ...i } = T;
+      return /* @__PURE__ */ o(G, { ...i, onClick: (P) => {
+        var b;
+        (b = i.onClick) == null || b.call(i, P), M && (p == null || p());
+      } }, h);
+    }) })
+  ] });
+}, lt = ({
+  customContent: f,
+  children: a,
+  placement: s = "top",
+  contentClassNames: r,
+  mouseEnterDelay: c = 0,
+  mouseLeaveDelay: e = 0.1,
+  showArrow: p = !0,
+  showClose: m = !0,
+  trigger: k = "hover",
+  variant: d = "neutral",
+  size: n = "s",
+  text: l,
+  title: w,
+  media: g,
+  buttons: A,
+  buttonProps: I,
+  onClose: u,
+  visible: y,
+  onVisibleChange: h,
+  ...B
+}) => {
+  const [T, M] = v(!!y), i = y !== void 0, [L, P] = v(!1), b = n === "m" ? F : q, N = () => {
+    i || M(!1), u == null || u();
+  }, _ = (E) => {
+    i || M(E), h == null || h(E);
+  }, R = f || (n === "m" ? /* @__PURE__ */ o(
+    O,
+    {
+      classNames: r,
+      text: l,
+      variant: d,
+      size: n,
+      onClose: N,
+      title: w,
+      media: g,
+      showClose: m,
+      buttons: A,
+      buttonProps: I
+    }
+  ) : /* @__PURE__ */ o(
+    O,
+    {
+      classNames: r,
+      text: l,
+      variant: d,
+      size: n,
+      onClose: N
+    }
+  ));
+  return W(() => {
+    if (T) {
+      const E = requestAnimationFrame(() => P(!0));
+      return () => cancelAnimationFrame(E);
+    }
+    P(!1);
+  }, [T]), /* @__PURE__ */ o(
+    j,
+    {
+      visible: i ? y : T,
+      onVisibleChange: _,
+      classNames: {
+        root: S(t.root, t[d], t[n], L && t.open),
+        ...B.classNames
+      },
+      placement: s,
+      overlay: R,
+      trigger: k,
+      mouseEnterDelay: c,
+      mouseLeaveDelay: e,
+      motion: { motionName: "tooltipMotion" },
+      builtinPlacements: b,
+      showArrow: p ? {
+        content: /* @__PURE__ */ o(H, {}),
+        className: `tooltipArrow tooltipArrow-${n}`
+      } : !1,
+      destroyTooltipOnHide: !0,
+      ...B,
+      children: a
+    }
+  );
+};
+export {
+  lt as Tooltip
+};

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

@@ -0,0 +1,37 @@
+import '../../assets/components/Tooltip/Tooltip.module-DfVrrW_P.css';const t = "_root_1ygiu_34", _ = "_open_1ygiu_51", o = "_xs_1ygiu_55", n = "_s_1ygiu_61", c = "_m_1ygiu_67", s = "_neutral_1ygiu_73", e = "_contrast_1ygiu_78", a = "_accent_1ygiu_84", u = "_typography_1ygiu_89", i = "_title_1ygiu_93", y = "_text_1ygiu_97", g = "_mediaWrapper_1ygiu_101", r = "_content_1ygiu_116", p = "_closeButton_1ygiu_120", l = "_hasMedia_1ygiu_146", d = "_buttonStack_1ygiu_152", x = {
+  root: t,
+  open: _,
+  xs: o,
+  s: n,
+  m: c,
+  neutral: s,
+  contrast: e,
+  accent: a,
+  typography: u,
+  title: i,
+  text: y,
+  mediaWrapper: g,
+  content: r,
+  closeButton: p,
+  hasMedia: l,
+  buttonStack: d
+};
+export {
+  a as accent,
+  d as buttonStack,
+  p as closeButton,
+  r as content,
+  e as contrast,
+  x as default,
+  l as hasMedia,
+  c as m,
+  g as mediaWrapper,
+  s as neutral,
+  _ as open,
+  t as root,
+  n as s,
+  y as text,
+  i as title,
+  u as typography,
+  o as xs
+};

package/dist/components/Tooltip/assets/react-svg-icons.js

@@ -0,0 +1,14 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+const s = () => /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ o("path", { d: "M18 6 6 18M6 6l12 12" }) }), l = () => /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 9", fill: "currentColor", children: [
+  /* @__PURE__ */ o(
+    "path",
+    {
+      d: "M0.155001 0.000390053L23.845 0.000390053C21.4147 0.000390053 19.1162 1.10511 17.598 3.00283L13.5617 8.04822C12.7611 9.04903 11.2389 9.04903 10.4383 8.04822L6.40195 3.00283C4.88377 1.10511 2.58527 0.000390053 0.155001 0.000390053Z"
+    }
+  ),
+  /* @__PURE__ */ o("path", { d: "M-2 0.000390053L26 0.000390053V-1L-2 -1L-2 0.000390053Z" })
+] });
+export {
+  s as CrossOutlinedIcon,
+  l as TooltipArrowIcon
+};

package/dist/components/Tooltip/utils/merge-tooltip-button-props.js

@@ -0,0 +1,4 @@
+const p = (o, t, e) => ({ ...t, ...e ?? {}, ...o });
+export {
+  p as mergeTooltipButtonProps
+};

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
+};