skillgrid 0.0.80 → 0.0.82

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.d.ts

@@ -2,4 +2,4 @@ import { TooltipProps } from './Tooltip.type';
 /**
  * Tooltip component to render tooltip
  */
-export declare const Tooltip: ({ customContent, children, placement, contentClassNames, mouseEnterDelay, mouseLeaveDelay, showArrow, showClose, trigger, variant, size, text, title, media, buttons, buttonProps, onClose, visible: outerVisible, onVisibleChange: outerOnVisibleChange, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ customContent, children, placement, contentClassNames, mouseEnterDelay, mouseLeaveDelay, showArrow, showClose, trigger, variant, size, text, title, media, buttons, buttonProps, onClose, visible: outerVisible, onVisibleChange: outerOnVisibleChange, classNames: outerClassNames, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip/Tooltip.js

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