skillgrid 0.0.80 → 0.0.82

package/dist/components/Icon/categories/users.js

@@ -0,0 +1,123 @@
+import o from "../../../assets/icons/users/users-up.svg.js";
+import l from "../../../assets/icons/users/user-up.svg.js";
+import e from "../../../assets/icons/users/user-check.svg.js";
+import m from "../../../assets/icons/users/user-edit.svg.js";
+import r from "../../../assets/icons/users/add-to-useful.svg.js";
+import t from "../../../assets/icons/users/is-useful.svg.js";
+import s from "../../../assets/icons/users/user-circle-filled.svg.js";
+import d from "../../../assets/icons/users/user-circle-outlined.svg.js";
+import n from "../../../assets/icons/users/user-double-outlined.svg.js";
+import f from "../../../assets/icons/users/user-filled.svg.js";
+import E from "../../../assets/icons/users/user-outlined.svg.js";
+import a from "../../../assets/icons/users/emoji-smile-3d.svg.js";
+import j from "../../../assets/icons/users/emoji-halfsmile-3d.svg.js";
+import S from "../../../assets/icons/users/emoji-neutral-3d.svg.js";
+import u from "../../../assets/icons/users/emoji-halfsad-3d.svg.js";
+import U from "../../../assets/icons/users/emoji-sad-3d.svg.js";
+import c from "../../../assets/icons/users/emoji-smile-outlined.svg.js";
+import p from "../../../assets/icons/users/emoji-smile-filled.svg.js";
+import g from "../../../assets/icons/users/emoji-halfsmile-outlined.svg.js";
+import v from "../../../assets/icons/users/emoji-halfsmile-filled.svg.js";
+import O from "../../../assets/icons/users/emoji-neutral-outlined.svg.js";
+import F from "../../../assets/icons/users/emoji-neutral-filled.svg.js";
+import H from "../../../assets/icons/users/emoji-halfsad-outlined.svg.js";
+import C from "../../../assets/icons/users/emoji-halfsad-filled.svg.js";
+import N from "../../../assets/icons/users/emoji-sad-outlined.svg.js";
+import D from "../../../assets/icons/users/emoji-sad-filled.svg.js";
+import { createIconWrapper as i } from "../lib/create-icon-wrapper.js";
+const I = /* @__PURE__ */ i("UsersUp", o), b = /* @__PURE__ */ i("UserUp", l), h = /* @__PURE__ */ i("UserCheck", e), k = /* @__PURE__ */ i("UserEdit", m), A = /* @__PURE__ */ i("AddToUseful", r), T = /* @__PURE__ */ i("IsUseful", t), x = /* @__PURE__ */ i(
+  "UserCircleFilled",
+  s
+), W = /* @__PURE__ */ i(
+  "UserCircleOutlined",
+  d
+), q = /* @__PURE__ */ i(
+  "UserDoubleOutlined",
+  n
+), w = /* @__PURE__ */ i("UserFilled", f), y = /* @__PURE__ */ i("UserOutlined", E), z = /* @__PURE__ */ i("EmojiSmile3d", a), B = /* @__PURE__ */ i(
+  "EmojiHalfsmile3d",
+  j
+), G = /* @__PURE__ */ i("EmojiNeutral3d", S), J = /* @__PURE__ */ i("EmojiHalfsad3d", u), K = /* @__PURE__ */ i("EmojiSad3d", U), L = /* @__PURE__ */ i(
+  "EmojiSmileOutlined",
+  c
+), M = /* @__PURE__ */ i(
+  "EmojiSmileFilled",
+  p
+), P = /* @__PURE__ */ i(
+  "EmojiHalfsmileOutlined",
+  g
+), Q = /* @__PURE__ */ i(
+  "EmojiHalfsmileFilled",
+  v
+), R = /* @__PURE__ */ i(
+  "EmojiNeutralOutlined",
+  O
+), V = /* @__PURE__ */ i(
+  "EmojiNeutralFilled",
+  F
+), X = /* @__PURE__ */ i(
+  "EmojiHalfsadOutlined",
+  H
+), Y = /* @__PURE__ */ i(
+  "EmojiHalfsadFilled",
+  C
+), Z = /* @__PURE__ */ i(
+  "EmojiSadOutlined",
+  N
+), _ = /* @__PURE__ */ i("EmojiSadFilled", D), Di = {
+  UsersUp: I,
+  UserUp: b,
+  UserCheck: h,
+  UserEdit: k,
+  AddToUseful: A,
+  IsUseful: T,
+  UserCircleFilled: x,
+  UserCircleOutlined: W,
+  UserDoubleOutlined: q,
+  UserFilled: w,
+  UserOutlined: y,
+  EmojiSmile3d: z,
+  EmojiHalfsmile3d: B,
+  EmojiNeutral3d: G,
+  EmojiHalfsad3d: J,
+  EmojiSad3d: K,
+  EmojiSmileOutlined: L,
+  EmojiSmileFilled: M,
+  EmojiHalfsmileOutlined: P,
+  EmojiHalfsmileFilled: Q,
+  EmojiNeutralOutlined: R,
+  EmojiNeutralFilled: V,
+  EmojiHalfsadOutlined: X,
+  EmojiHalfsadFilled: Y,
+  EmojiSadOutlined: Z,
+  EmojiSadFilled: _
+};
+export {
+  A as AddToUseful,
+  J as EmojiHalfsad3d,
+  Y as EmojiHalfsadFilled,
+  X as EmojiHalfsadOutlined,
+  B as EmojiHalfsmile3d,
+  Q as EmojiHalfsmileFilled,
+  P as EmojiHalfsmileOutlined,
+  G as EmojiNeutral3d,
+  V as EmojiNeutralFilled,
+  R as EmojiNeutralOutlined,
+  K as EmojiSad3d,
+  _ as EmojiSadFilled,
+  Z as EmojiSadOutlined,
+  z as EmojiSmile3d,
+  M as EmojiSmileFilled,
+  L as EmojiSmileOutlined,
+  T as IsUseful,
+  h as UserCheck,
+  x as UserCircleFilled,
+  W as UserCircleOutlined,
+  q as UserDoubleOutlined,
+  k as UserEdit,
+  w as UserFilled,
+  y as UserOutlined,
+  b as UserUp,
+  Di as UsersIcons,
+  I as UsersUp
+};

package/dist/components/Icon/lib/create-icon-wrapper.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { IconProps } from '../Icon.type';
+export declare const createIconWrapper: (displayName: string, SvgComponent: React.ComponentType<React.SVGProps<SVGSVGElement>>) => (<E extends React.ElementType = "button">(props: Omit<IconProps<E>, "icon">) => React.ReactElement | null) & {
+    displayName?: string;
+};

package/dist/components/Icon/lib/create-icon-wrapper.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import s from "react";
+import { Icon as f } from "../Icon.js";
+const u = (a, i) => {
+  const e = s.forwardRef(
+    (o, n) => {
+      const { iconSize: r = 24, ...c } = o, m = /* @__PURE__ */ t(
+        i,
+        {
+          width: r,
+          height: r,
+          role: "img",
+          "aria-hidden": o["aria-label"] ? void 0 : !0,
+          focusable: !1
+        }
+      );
+      return /* @__PURE__ */ t(f, { ref: n, icon: m, iconSize: r, ...c });
+    }
+  );
+  return e.displayName = a, e;
+};
+export {
+  u as createIconWrapper
+};

package/dist/components/Icon/useIcon.js

@@ -0,0 +1,144 @@
+import g, { useState as S, useMemo as T } from "react";
+import _ from "classnames";
+import b from "./Icon.module.css.js";
+const t = b, j = (n) => n.charAt(0).toUpperCase() + n.slice(1), ft = ({
+  Component: n,
+  iconSize: H = 24,
+  mode: F = "primary",
+  style: x = "neutral",
+  customColor: $,
+  hoverStyle: f,
+  hoverCustomColor: I,
+  pressedStyle: o,
+  pressedCustomColor: P,
+  padding: a = !1,
+  background: p = !1,
+  shadow: W = !1,
+  showBorder: K = !1,
+  borderStyle: A = "neutral",
+  borderRadius: i,
+  badge: h,
+  checked: U = !1,
+  disabled: s = !1,
+  loading: r = !1,
+  onClick: c,
+  onMouseEnter: l,
+  onMouseLeave: v,
+  className: L,
+  styles: m,
+  tabIndex: D,
+  "aria-label": M,
+  role: E
+}) => {
+  const [B, N] = S(!1), u = g.isValidElement(U), V = T(() => s ? "disabled" : r ? "loading" : u && B ? "checked" : "default", [s, r, u, B]), w = n === "button" || !!c, q = m && "boxShadow" in m && m.boxShadow !== void 0, G = _(
+    t.wrapper,
+    // Состояния
+    {
+      [t.disabled]: s,
+      [t.loading]: r,
+      [t.interactive]: w && !s && !r,
+      [t.interactiveWithCustomShadow]: w && !s && !r && q,
+      [t.checked]: U
+    },
+    // Стили иконки
+    t[x],
+    t[F],
+    // Hover стили
+    {
+      ...f && f !== "custom" && f !== "none" ? { [t[`hover${j(f)}`]]: !0 } : {},
+      [t.hoverCustom]: f === "custom"
+    },
+    // Pressed стили
+    {
+      ...o && o !== "custom" && o !== "none" ? { [t[`pressed${j(o)}`]]: !0 } : {},
+      [t.pressedCustom]: o === "custom"
+    },
+    // Отступы
+    {
+      [t.showPadding]: a !== !1
+    },
+    // Фон
+    {
+      [t.showBackground]: p !== !1,
+      [t[`background${p && typeof p == "string" ? p.split("-").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join("") : "Primary"}`]]: p !== !1
+    },
+    // Рамка
+    {
+      [t.showBorder]: K,
+      [t[`border${typeof A == "string" ? A.charAt(0).toUpperCase() + A.slice(1) : ""}`]]: K
+    },
+    // Радиус скругления (круглый)
+    {
+      [t.borderRadiusCircle]: i === "50%" || i === 50
+    },
+    // Тени
+    {
+      [t.shadowPermanent]: W === "permanent",
+      [t.shadowIncreasesWhenPressed]: W === "increases-when-pressed"
+    },
+    L
+  ), J = _(t.iconWrapper, t[`iconSize${H}`]), O = T(() => {
+    const e = { ...m };
+    return x === "custom" && $ && (e["--sg-icon-custom-color"] = $), f === "custom" && I && (e["--sg-icon-hover-custom-color"] = I), o === "custom" && P && (e["--sg-icon-pressed-custom-color"] = P), a !== !1 && typeof a == "number" && (e.padding = `${a}px`), typeof i == "number" && i !== 50 && (e.borderRadius = `${i}px`), e;
+  }, [
+    $,
+    I,
+    f,
+    P,
+    o,
+    x,
+    m,
+    i,
+    a
+  ]), Q = (e) => {
+    !s && !r && l && l(e);
+  }, R = (e) => {
+    !s && !r && v && v(e);
+  }, X = (e) => {
+    !s && !r && (u && N((z) => !z), c && c(e));
+  }, Y = (e) => {
+    s || r || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), u && N((z) => !z), c && c(e));
+  }, Z = h ? h.show && !s : !1;
+  return {
+    // Состояние
+    checkedActive: B,
+    isCheckedNode: u,
+    currentState: V,
+    isInteractive: w,
+    shouldHideIcon: !!M && w,
+    // Классы
+    wrapperClasses: G,
+    iconWrapperClasses: J,
+    // Стили
+    inlineStyles: O,
+    // Обработчики
+    handleMouseEnter: Q,
+    handleMouseLeave: R,
+    handleClick: X,
+    handleKeyDown: Y,
+    // Badge
+    shouldShowBadge: Z,
+    getBadgeSize: () => h && h.size === "extra-small" ? 8 : 16,
+    // Accessibility
+    getRole: () => {
+      if (E) return E;
+      if (n !== "button")
+        return c ? "button" : "img";
+    },
+    getTabIndex: () => {
+      if (D !== void 0) return D;
+      if (n === "button" || c) return s || r ? -1 : 0;
+    },
+    needsKeyboardHandler: n !== "button" && (!!c || u),
+    // Props
+    buttonSpecificProps: n === "button" ? {
+      type: "button",
+      disabled: s || r
+    } : {},
+    // Другое
+    iconSize: H
+  };
+};
+export {
+  ft as useIcon
+};

package/dist/components/Image/Image.js

@@ -0,0 +1,87 @@
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as M, useState as N, useCallback as y, Fragment as R } from "react";
+import r from "./Image.module.css.js";
+import { PlaceholderImageIcon as T } from "./assets/PlaceholderImageIcon.js";
+import { clsx as I } from "clsx";
+import { Loader as q } from "../Loader/Loader.js";
+const K = M((u, C) => {
+  const {
+    alt: p = "",
+    loading: P = "lazy",
+    src: a,
+    isLoading: f = !1,
+    style: S,
+    className: v,
+    containerProps: w,
+    "data-testid": e = "image",
+    onError: o,
+    onLoad: s,
+    ...x
+  } = u, { className: L, ...$ } = w ?? {}, [n, i] = N(a ? "loading" : "error"), [b, j] = N(a);
+  a !== b && (j(a), i(a ? "loading" : "error"));
+  const d = n === "error", l = (f || n === "loading") && !d, m = n === "loaded" && !f, k = I(
+    r.container,
+    { [r.loading]: l && !m, [r.error]: d && !m },
+    L
+  ), z = I(
+    r.image,
+    {
+      [r.loading]: l
+    },
+    v
+  ), E = y(
+    (g) => {
+      i("loaded"), s == null || s(g);
+    },
+    [s]
+  ), F = y(
+    (g) => {
+      i("error"), o == null || o(g);
+    },
+    [o]
+  ), c = {
+    loader: /* @__PURE__ */ h(R, { children: [
+      /* @__PURE__ */ t(q, { size: 48, variant: "gray", "data-testid": `${e}-loader` }),
+      /* @__PURE__ */ t(
+        "img",
+        {
+          alt: p,
+          src: a,
+          onLoad: E,
+          onError: F,
+          style: { display: "none" }
+        }
+      )
+    ] }),
+    error: /* @__PURE__ */ t(T, { "data-testid": `${e}-fallback` }),
+    image: /* @__PURE__ */ t(
+      "img",
+      {
+        ref: C,
+        alt: p,
+        "data-testid": e,
+        loading: P,
+        src: a,
+        className: z,
+        ...x
+      }
+    )
+  };
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: k,
+      "data-testid": `${e}-container`,
+      style: S,
+      ...$,
+      children: [
+        l && c.loader,
+        d && c.error,
+        m && c.image
+      ]
+    }
+  );
+});
+export {
+  K as Image
+};

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

@@ -0,0 +1,13 @@
+import '../../assets/components/Image/Image.module-BHQfTZLN.css';const n = "_container_yn8yz_7", o = "_loading_yn8yz_17", r = "_error_yn8yz_18", e = "_image_yn8yz_22", _ = {
+  container: n,
+  loading: o,
+  error: r,
+  image: e
+};
+export {
+  n as container,
+  _ as default,
+  r as error,
+  e as image,
+  o as loading
+};

package/dist/components/Image/assets/PlaceholderImageIcon.js

@@ -0,0 +1,26 @@
+import { jsx as C } from "react/jsx-runtime";
+const s = ({ width: t = 48, height: o = 48, className: e, "data-testid": r }) => /* @__PURE__ */ C(
+  "svg",
+  {
+    width: t,
+    height: o,
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: e,
+    "data-testid": r,
+    children: /* @__PURE__ */ C(
+      "path",
+      {
+        d: "M32.4 42H13.8627C12.6511 42 12.0453 42 11.7648 41.7604C11.5214 41.5525 11.3922 41.2407 11.4173 40.9215C11.4462 40.5538 11.8746 40.1254 12.7314 39.2686L29.7373 22.2627C30.5293 21.4707 30.9253 21.0747 31.382 20.9263C31.7837 20.7958 32.2163 20.7958 32.618 20.9263C33.0747 21.0747 33.4707 21.4707 34.2627 22.2627L42 30V32.4M32.4 42C35.7603 42 37.4405 42 38.7239 41.346C39.8529 40.7708 40.7708 39.8529 41.346 38.7239C42 37.4405 42 35.7603 42 32.4M32.4 42H15.6C12.2397 42 10.5595 42 9.27606 41.346C8.14708 40.7708 7.2292 39.8529 6.65396 38.7239C6 37.4405 6 35.7603 6 32.4V15.6C6 12.2397 6 10.5595 6.65396 9.27606C7.2292 8.14708 8.14708 7.2292 9.27606 6.65396C10.5595 6 12.2397 6 15.6 6H32.4C35.7603 6 37.4405 6 38.7239 6.65396C39.8529 7.2292 40.7708 8.14708 41.346 9.27606C42 10.5595 42 12.2397 42 15.6V32.4M21 17C21 19.2091 19.2091 21 17 21C14.7909 21 13 19.2091 13 17C13 14.7909 14.7909 13 17 13C19.2091 13 21 14.7909 21 17Z",
+        stroke: "#AABBCA",
+        strokeWidth: "4",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+export {
+  s as PlaceholderImageIcon
+};

package/dist/components/InputBase/Input.js

@@ -0,0 +1,232 @@
+import { jsx as r, jsxs as W } from "react/jsx-runtime";
+import { forwardRef as z, useImperativeHandle as P } from "react";
+import { clsx as f } from "clsx";
+import e from "./InputBase.module.css.js";
+import { useCompatId as Q } from "../../hooks/useCompatId.js";
+import { useInputSync as Y } from "./lib/useInputSync.js";
+import { useTextareaResize as Z } from "./lib/useTextareaResize.js";
+import { MAX_HINT_LENGTH as k } from "./lib/constants.js";
+import { useGripResize as U } from "./lib/useGripResize.js";
+import { GripIcon as E } from "./assets/GripIcon.js";
+const K = z(
+  ({
+    component: t = "input",
+    size: m = "L",
+    value: a = "",
+    placeholder: i,
+    disabled: l = !1,
+    loading: u = !1,
+    onFocus: b,
+    onBlur: I,
+    onChange: N,
+    onKeyDown: x,
+    onKeyUp: h,
+    maxLength: v,
+    className: $,
+    style: o,
+    truncate: g = !1,
+    shouldShowFloatingLabelClass: s = !1,
+    "aria-invalid": y,
+    "aria-errormessage": p,
+    id: n,
+    resize: c,
+    ...H
+  }, R) => {
+    const { textareaRef: w, inputRef: j, currentRef: d } = Y(a, t);
+    if (Z(a, c, w), P(R, () => d.current, [d]), t === "textarea")
+      return /* @__PURE__ */ r(
+        "textarea",
+        {
+          ref: w,
+          id: n,
+          value: a,
+          placeholder: i,
+          disabled: l || u,
+          onFocus: b,
+          onBlur: I,
+          onChange: N,
+          onKeyDown: x,
+          onKeyUp: h,
+          maxLength: v,
+          className: f(
+            e.textarea,
+            e[`size-${m}`],
+            s && e["with-floating-label"],
+            $
+          ),
+          style: o,
+          "aria-invalid": y,
+          "aria-errormessage": p,
+          "aria-describedby": p ? `${n}-error` : void 0,
+          tabIndex: 0,
+          "data-resize": c,
+          ...H
+        }
+      );
+    if (t === "input")
+      return /* @__PURE__ */ r(
+        "input",
+        {
+          ref: j,
+          id: n,
+          value: a,
+          placeholder: i,
+          disabled: l || u,
+          onFocus: b,
+          onBlur: I,
+          onChange: N,
+          onKeyDown: x,
+          onKeyUp: h,
+          maxLength: v,
+          className: f(
+            e.input,
+            e[`size-${m}`],
+            s && e["with-floating-label"],
+            g && e.truncate,
+            $
+          ),
+          style: o,
+          "aria-invalid": y,
+          "aria-errormessage": p,
+          "aria-describedby": p ? `${n}-error` : void 0,
+          tabIndex: 0,
+          ...H
+        }
+      );
+    if (t !== "input" && t !== "textarea")
+      return console.error(
+        `[Input] Недопустимое значение prop 'component': "${String(t)}". Допустимые значения: 'input', 'textarea'`
+      ), null;
+  }
+), A = z(
+  ({
+    children: t,
+    size: m = "L",
+    error: a = !1,
+    disabled: i = !1,
+    loading: l = !1,
+    className: u,
+    wrapperProps: b,
+    wrapperStyles: I,
+    floatingLabelStyles: N,
+    prefixStyles: x,
+    suffixStyles: h,
+    labelProps: v,
+    helperProps: $,
+    showLimit: o = !1,
+    maxLength: g,
+    hint: s,
+    showHint: y = !1,
+    showHintOnEmpty: p = !1,
+    prefix: n,
+    suffix: c,
+    onSuffixClick: H,
+    placeholder: R,
+    showLabel: w = !0,
+    labelClassName: j,
+    hasValue: d = !1,
+    helper: G,
+    id: D,
+    value: F = "",
+    resize: C,
+    showGrip: T = !1,
+    ...L
+  }, O) => {
+    const X = Q("input-wrapper"), S = D || X, _ = y && s && (d || p), q = s && s.length > k ? s.substring(0, k) + "..." : s, B = f(
+      e.wrapper,
+      e[`size-${m}`],
+      a && e.error,
+      i && e.disabled,
+      l && e.loading,
+      _ && e["has-hint"],
+      c && e["has-suffix"],
+      o && e["has-limit"],
+      u
+    ), J = f(
+      e.floatingLabel,
+      e[m],
+      d && e.filled,
+      j
+    ), { handleGripMouseDown: M } = U(T, i, l, C);
+    return /* @__PURE__ */ W("div", { ref: O, className: e.inputBase, "data-testid": "input-base-wrapper", ...L, children: [
+      /* @__PURE__ */ W(
+        "div",
+        {
+          className: B,
+          style: I,
+          "data-resize": C,
+          "data-show-grip": T ? "true" : "false",
+          ...b,
+          children: [
+            n && /* @__PURE__ */ r("label", { htmlFor: S, className: e.leftSection, style: x, children: n }),
+            c && /* @__PURE__ */ r(
+              "label",
+              {
+                htmlFor: S,
+                className: e.rightSection,
+                style: h,
+                onClick: H,
+                children: c
+              }
+            ),
+            R && w && /* @__PURE__ */ r(
+              "label",
+              {
+                htmlFor: S,
+                className: J,
+                style: N,
+                ...v,
+                children: R
+              }
+            ),
+            t,
+            T && !o && (C === "fixed" || !C) && /* @__PURE__ */ r(
+              "div",
+              {
+                className: e.gripHandle,
+                onMouseDown: M,
+                role: "button",
+                tabIndex: -1,
+                "aria-label": "Изменить размер",
+                children: /* @__PURE__ */ r(E, {})
+              }
+            ),
+            _ && /* @__PURE__ */ r(
+              "div",
+              {
+                className: f(e.hint, d && e.truncate),
+                "data-disabled": i || l,
+                children: q
+              }
+            ),
+            o && g && /* @__PURE__ */ W("div", { className: e.characterLimit, children: [
+              (F || "").length,
+              " из ",
+              g
+            ] })
+          ]
+        }
+      ),
+      G && /* @__PURE__ */ r(
+        "div",
+        {
+          className: f(
+            e.helper,
+            a && e.error,
+            (i || l) && e.disabled
+          ),
+          ...$,
+          id: a ? `${S}-error` : void 0,
+          children: G
+        }
+      )
+    ] });
+  }
+);
+A.displayName = "InputWrapperComponent";
+const pe = Object.assign(K, {
+  Wrapper: A
+});
+export {
+  pe as Input
+};