skillgrid 0.0.79 → 0.0.81

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,164 @@
+import { jsx as n, jsxs as V } from "react/jsx-runtime";
+import F, { useState as U, createContext as j, useContext as k } from "react";
+import { ScrollWrapper as G } from "./ScrollWrapper.js";
+import { clsx as d } from "clsx";
+import f from "../../styles/typography.module.css.js";
+import a from "./Tabs.module.css.js";
+import { useIsMobile as M } from "../../hooks/useIsMobile.js";
+import { Badge as O } from "../Badge/Badge.js";
+const W = "md", R = !1, Y = 8, Z = "top-right-inside", P = j(null), h = () => {
+  const t = k(P);
+  if (!t) throw new Error("useTabs должен использоваться внутри TabsProvider");
+  return t;
+}, z = ({
+  children: t,
+  defaultActiveTab: l,
+  activeTab: e,
+  onChange: b
+}) => {
+  const [c, s] = U(l), r = e !== void 0, o = r ? e : c, i = (p) => {
+    r || s(p), b && b(p);
+  };
+  return /* @__PURE__ */ n(P.Provider, { value: { activeTab: o, setTab: i }, children: t });
+}, H = ({
+  mode: t,
+  item: l,
+  isActive: e,
+  showBadge: b,
+  badgeProps: c,
+  size: s,
+  isDisabled: r,
+  onSelectTab: o
+}) => {
+  const {
+    value: i,
+    label: p,
+    ariaLabel: g,
+    prefix: u,
+    prefixWrapperProps: v = {},
+    postfix: x,
+    postfixWrapperProps: y = {}
+  } = l, { className: A, ...C } = v, { className: N, ..._ } = y, m = {
+    primary: f["typography-label-3-medium"],
+    secondary: f["typography-label-3-regular"],
+    prefix: f["typography-label-3-medium"],
+    postfix: f["typography-label-3-medium"]
+  }, B = {
+    size: Y,
+    position: Z,
+    ...c
+  }, E = d(a.tab, a[t], a[s], {
+    [a.selected]: e,
+    [a.disabled]: r
+  }), L = d(
+    a.tabPrefix,
+    A,
+    a[t],
+    m.prefix,
+    {
+      [a.selected]: e,
+      [a.disabled]: r
+    }
+  ), S = d(
+    a.tabPostfix,
+    N,
+    a[t],
+    m.postfix,
+    {
+      [a.selected]: e,
+      [a.disabled]: r
+    }
+  ), I = d(a.tabLabel, a[t], m[t]), $ = g ?? (typeof p == "string" ? p : void 0), w = (D) => {
+    e || r || (o(i), D.currentTarget.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" }));
+  }, T = /* @__PURE__ */ V(
+    "button",
+    {
+      className: E,
+      role: "tab",
+      "aria-label": $,
+      "aria-selected": e,
+      "aria-disabled": r,
+      "aria-controls": `tab-panel-${i}`,
+      "data-testid": `tab-item-${i}`,
+      onClick: w,
+      children: [
+        u && /* @__PURE__ */ n(
+          "span",
+          {
+            className: L,
+            ...C,
+            "data-testid": `tab-prefix-${i}`,
+            children: u
+          }
+        ),
+        /* @__PURE__ */ n("span", { className: I, "data-testid": `tab-label-${i}`, children: p }),
+        x && /* @__PURE__ */ n(
+          "span",
+          {
+            className: S,
+            ..._,
+            "data-testid": `tab-postfix-${i}`,
+            children: x
+          }
+        )
+      ]
+    }
+  );
+  return b ? /* @__PURE__ */ n(O, { ...B, "data-testid": `tab-badge-${i}`, children: T }) : T;
+}, q = ({
+  mode: t,
+  items: l,
+  size: e = W,
+  isAllItemsDisabled: b = R
+}) => {
+  const { activeTab: c, setTab: s } = h(), r = M();
+  return /* @__PURE__ */ n(G, { size: e, withControls: r, children: /* @__PURE__ */ n(
+    "div",
+    {
+      role: "tablist",
+      "data-testid": "tabs-bar",
+      "aria-orientation": "horizontal",
+      className: d(a.tabBar, a[t]),
+      children: l.map((o) => /* @__PURE__ */ n(
+        H,
+        {
+          size: e,
+          item: o,
+          mode: t,
+          showBadge: o.showBadge,
+          badgeProps: o.badgeProps,
+          isActive: c === o.value,
+          isDisabled: b || o.isDisabled,
+          onSelectTab: s
+        },
+        o.value
+      ))
+    }
+  ) });
+}, J = ({ tabValue: t, children: l, ...e }) => /* @__PURE__ */ n(
+  "div",
+  {
+    role: "tabpanel",
+    "data-testid": `tab-panel-${t}`,
+    "aria-labelledby": `tab-item-${t}`,
+    ...e,
+    children: l
+  }
+), K = ({ children: t, ...l }) => {
+  const { activeTab: e } = h(), b = Array.isArray(t) ? t : [t], c = (s, r) => F.isValidElement(s) && typeof s.props == "object" && s.props !== null && r in s.props;
+  return /* @__PURE__ */ n("div", { "data-testid": "tab-content", ...l, children: b.map((s) => c(s, "tabValue") && String(s.props.tabValue) === e ? s : null) });
+}, nt = {
+  Provider: z,
+  Content: K,
+  Panel: J,
+  Bar: q
+};
+export {
+  q as Bar,
+  J as TabPanel,
+  nt as Tabs,
+  K as TabsContent,
+  z as TabsProvider,
+  q as default,
+  h as useTabs
+};

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

@@ -0,0 +1,29 @@
+import '../../assets/components/Tabs/Tabs.module-CjkNbHPJ.css';const t = "_tabBar_perq5_98", _ = "_primary_perq5_104", e = "_secondary_perq5_109", s = "_tab_perq5_98", a = "_md_perq5_143", r = "_sm_perq5_147", b = "_xs_perq5_151", o = "_disabled_perq5_155", c = "_selected_perq5_161", d = "_tabLabel_perq5_243", n = "_tabPrefix_perq5_257", p = "_tabPostfix_perq5_295", i = {
+  tabBar: t,
+  primary: _,
+  secondary: e,
+  tab: s,
+  md: a,
+  sm: r,
+  xs: b,
+  disabled: o,
+  selected: c,
+  tabLabel: d,
+  tabPrefix: n,
+  tabPostfix: p
+};
+export {
+  i as default,
+  o as disabled,
+  a as md,
+  _ as primary,
+  e as secondary,
+  c as selected,
+  r as sm,
+  s as tab,
+  t as tabBar,
+  d as tabLabel,
+  p as tabPostfix,
+  n as tabPrefix,
+  b as xs
+};

package/dist/components/Tag/Tag.js

@@ -0,0 +1,48 @@
+import { jsxs as E, jsx as r } from "react/jsx-runtime";
+import s from "./Tag.module.css.js";
+import p from "../../styles/typography.module.css.js";
+import { forwardRef as P } from "react";
+import { clsx as a } from "clsx";
+const T = P((m, n) => {
+  const {
+    className: d,
+    children: e,
+    componentStyle: c = "neutral",
+    size: t = "medium",
+    disabled: i = !1,
+    showLabel: N = !!e,
+    slotStart: o,
+    slotEnd: l,
+    slotStartWrapperProps: f = {},
+    slotEndWrapperProps: b = {},
+    "data-testid": g,
+    ...h
+  } = m, { className: u, ...y } = f, { className: S, ...x } = b;
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      className: a(
+        s.tag,
+        s[t],
+        s[c],
+        {
+          [s.disabled]: i,
+          [p["typography-label-3-regular"]]: t === "medium",
+          [p["typography-subtitle-1-semibold"]]: t === "large"
+        },
+        d
+      ),
+      "data-testid": g || "tag-component",
+      ref: n,
+      ...h,
+      children: [
+        o && /* @__PURE__ */ r("span", { className: a([s.iconWrapper, u]), ...y, children: o }),
+        N && /* @__PURE__ */ r("span", { className: a([s.label]), children: e }),
+        l && /* @__PURE__ */ r("span", { className: a([s.iconWrapper, S]), ...x, children: l })
+      ]
+    }
+  );
+});
+export {
+  T as Tag
+};

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

@@ -0,0 +1,37 @@
+import '../../assets/components/Tag/Tag.module-FHcOZDVu.css';const _ = "_tag_16i5f_1", i = "_label_16i5f_16", e = "_iconWrapper_16i5f_20", a = "_medium_16i5f_27", n = "_large_16i5f_33", t = "_disabled_16i5f_43", c = "_neutral_16i5f_47", l = "_positive_16i5f_53", s = "_negative_16i5f_59", o = "_warning_16i5f_65", r = "_vivid_16i5f_71", f = "_special_16i5f_77", d = "_accent_16i5f_84", v = "_blue_16i5f_90", p = "_lovely_16i5f_96", g = "_dreamy_16i5f_102", u = {
+  tag: _,
+  label: i,
+  iconWrapper: e,
+  medium: a,
+  large: n,
+  disabled: t,
+  neutral: c,
+  positive: l,
+  negative: s,
+  warning: o,
+  vivid: r,
+  special: f,
+  accent: d,
+  blue: v,
+  lovely: p,
+  dreamy: g
+};
+export {
+  d as accent,
+  v as blue,
+  u as default,
+  t as disabled,
+  g as dreamy,
+  e as iconWrapper,
+  i as label,
+  n as large,
+  p as lovely,
+  a as medium,
+  s as negative,
+  c as neutral,
+  l as positive,
+  f as special,
+  _ as tag,
+  r as vivid,
+  o as warning
+};

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,100 @@
+import { jsx as x } from "react/jsx-runtime";
+import { forwardRef as K } from "react";
+import { InputBase as N } from "../InputBase/InputBase.js";
+import { XIcon as O } from "../InputBase/assets/XIcon.js";
+import { getSizeStyles as Q, getInputBaseSize as U, getIconSize as W } from "./lib/getters.js";
+import { SIZES as i } from "./lib/constants.js";
+const tt = K(
+  ({
+    value: S = "",
+    onChange: e,
+    placeholder: c,
+    maxLength: y,
+    minLength: m,
+    autoFocus: d,
+    size: t = i.L,
+    textareaProps: w,
+    error: L,
+    disabled: p,
+    loading: r,
+    helper: b,
+    suffix: I,
+    clearable: B = !1,
+    id: h,
+    showLabel: k = !0,
+    onFocus: M,
+    onBlur: P,
+    onClear: a,
+    onKeyDown: T,
+    className: j,
+    rows: v = 1,
+    showLimit: z = !1,
+    wrapperProps: A,
+    labelProps: E,
+    helperProps: F,
+    showGrip: R,
+    minHeight: o,
+    resize: f,
+    ...V
+  }, X) => {
+    const u = (S || "").length > 0, l = k && !!c && (t === i.M || o !== 48), n = B && u && !(p || r), Z = () => {
+      e == null || e(""), a == null || a();
+    }, q = () => {
+      n && Z();
+    }, D = n ? /* @__PURE__ */ x(
+      O,
+      {
+        size: W(t),
+        color: "var(--icon-secondary)",
+        style: { cursor: "pointer" },
+        "data-testid": "x-icon"
+      }
+    ) : I, s = Q(t, o, l && u, f), G = U(t, o), J = {
+      rows: v,
+      minLength: m,
+      autoFocus: d,
+      resize: f,
+      ...w
+    };
+    return /* @__PURE__ */ x(
+      N,
+      {
+        ref: X,
+        component: "textarea",
+        size: G,
+        error: L,
+        disabled: p || r,
+        loading: r,
+        onSuffixClick: q,
+        helper: b,
+        suffix: D,
+        id: h,
+        showLabel: l,
+        onFocus: M,
+        onBlur: P,
+        onKeyDown: T,
+        onChange: e,
+        value: S || "",
+        placeholder: c,
+        className: j,
+        "data-floating-label": l,
+        wrapperStyles: s.wrapperStyles,
+        floatingLabelStyles: s.floatingLabelStyles,
+        suffixStyles: s.suffixStyles,
+        textareaStyles: s.textareaStyles,
+        wrapperProps: A,
+        labelProps: E,
+        helperProps: F,
+        showLimit: z && (o === 112 || t === i.M),
+        maxLength: y,
+        inputProps: J,
+        resize: f,
+        showGrip: R,
+        ...V
+      }
+    );
+  }
+);
+export {
+  tt as TextArea
+};

package/dist/components/TextArea/lib/constants.js

@@ -0,0 +1,38 @@
+const x = {
+  M: "M",
+  L: "L"
+}, p = {
+  M: "12px",
+  L: "16px"
+}, I = {
+  M: "xs",
+  L: "sm"
+}, L = {
+  FILL: "fill",
+  FIXED: "fixed"
+}, E = {
+  M: "112px",
+  L: "56px"
+}, S = {
+  M: "48px",
+  L: "22px"
+}, s = {
+  M: "12px 12px 12px 12px",
+  L: "16px 16px 16px 16px",
+  L_WITH_PREFIX: "12px 16px 12px 16px",
+  L_FLOATING_LABEL: "8px 16px 8px 16px"
+}, M = {
+  M: 48,
+  L: 56,
+  XL: 112
+};
+export {
+  I as ICON_SIZES,
+  M as MIN_HEIGHTS,
+  s as PADDING,
+  p as POSITIONS,
+  L as RESIZE_MODES,
+  x as SIZES,
+  S as TEXTAREA_HEIGHTS,
+  E as WRAPPER_HEIGHTS
+};

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

@@ -0,0 +1,106 @@
+import { POSITIONS as o, RESIZE_MODES as f, SIZES as e, MIN_HEIGHTS as n, TEXTAREA_HEIGHTS as u, PADDING as L, WRAPPER_HEIGHTS as s, ICON_SIZES as E } from "./constants.js";
+const p = (t, r) => {
+  if (t === e.M)
+    return s.M;
+  if (r)
+    return `${r}px`;
+  switch (t) {
+    case e.L:
+      return s.L;
+    default:
+      return s.L;
+  }
+}, x = (t, r) => {
+  if (t === e.M)
+    return u.M;
+  if (r)
+    switch (r) {
+      case n.M:
+      case n.L:
+        return u.L;
+      case n.XL:
+        return u.M;
+      default:
+        return u.L;
+    }
+  switch (t) {
+    case e.L:
+      return u.L;
+    default:
+      return u.L;
+  }
+}, d = (t, r, a) => {
+  if (t === e.M)
+    return L.M;
+  if (r)
+    switch (r) {
+      case n.M:
+        return L.L_WITH_PREFIX;
+      case n.L:
+        return a ? L.L_FLOATING_LABEL : L.L;
+      case n.XL:
+        return L.L;
+      default:
+        return L.L;
+    }
+  switch (t) {
+    case e.L:
+      return a ? L.L_FLOATING_LABEL : L.L;
+    default:
+      return L.L;
+  }
+}, _ = (t, r) => {
+  if (t === e.M)
+    return "M";
+  if (r)
+    switch (r) {
+      case n.M:
+        return "M";
+      case n.L:
+        return "L";
+      case n.XL:
+        return "L";
+      default:
+        return "L";
+    }
+  return t;
+}, l = (t) => E[t], g = (t) => o[t], T = (t, r, a, c) => {
+  const I = p(t, r), S = x(t, r), M = d(t, r, a);
+  return {
+    wrapperStyles: {
+      minHeight: I,
+      // Для fill resize устанавливаем height: 100%
+      ...c === f.FILL && { height: "100%" },
+      // Для fixed resize устанавливаем фиксированную высоту
+      ...c === f.FIXED && r && { height: I },
+      boxSizing: "border-box",
+      padding: M
+    },
+    floatingLabelStyles: {
+      left: t === e.M ? o.M : o.L,
+      transformOrigin: "left top",
+      top: r === 112 && a && t === e.L ? o.L : void 0
+    },
+    suffixStyles: {
+      right: g(t),
+      top: r === 48 && t === e.L ? "11px" : void 0,
+      boxSizing: "border-box"
+    },
+    textareaStyles: {
+      minHeight: S,
+      // Для fill resize flex: 1
+      ...c === f.FILL && { flex: 1, minHeight: 0 },
+      // Для fixed resize фиксированная высота
+      ...c === f.FIXED && r && { height: S }
+    }
+  };
+};
+export {
+  l as getIconSize,
+  _ as getInputBaseSize,
+  d as getPadding,
+  T as getSizeStyles,
+  g as getSuffixPosition,
+  x as getTextareaHeight,
+  p as getWrapperHeight
+};

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,102 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as Q } from "react";
+import { InputBase as U } from "../InputBase/InputBase.js";
+import { XIcon as W } from "../InputBase/assets/XIcon.js";
+import { getSizeStyles as Y } from "./lib/getters.js";
+import { SIZES as o } from "./lib/constants.js";
+const st = Q(
+  ({
+    value: p = "",
+    onChange: s,
+    type: n = "text",
+    placeholder: y,
+    maxLength: x,
+    minLength: L,
+    autoComplete: d,
+    autoFocus: h,
+    size: t = o.L,
+    inputProps: w,
+    error: I,
+    disabled: a,
+    loading: r,
+    helper: b,
+    prefix: l,
+    suffix: P,
+    clearable: B = !1,
+    id: X,
+    showLabel: j = !0,
+    onFocus: E,
+    onBlur: F,
+    onSuffixClick: f,
+    onClear: i,
+    className: M,
+    truncate: R = !0,
+    hint: T,
+    showHint: V = !1,
+    showHintOnEmpty: Z = !1,
+    wrapperProps: q,
+    labelProps: v,
+    helperProps: z,
+    ...A
+  }, D) => {
+    const c = (p || "").length > 0, G = t === o.XL, H = !!l, S = G && j && !l, m = B && c && !(a || r), J = () => {
+      s == null || s(""), i == null || i();
+    }, K = () => {
+      m && J(), f == null || f();
+    }, N = m ? /* @__PURE__ */ u(
+      W,
+      {
+        size: t === o.S || t === o.M ? "xs" : "sm",
+        color: "var(--icon-secondary)",
+        style: { cursor: "pointer" },
+        "data-testid": "x-icon"
+      }
+    ) : P, O = {
+      type: n,
+      minLength: L,
+      autoComplete: d,
+      autoFocus: h,
+      ...w
+    }, e = Y(t, S, c, H);
+    return /* @__PURE__ */ u(
+      U,
+      {
+        ref: D,
+        size: t,
+        error: I,
+        disabled: a || r,
+        loading: r,
+        helper: b,
+        prefix: l,
+        suffix: N,
+        id: X,
+        showLabel: S,
+        onFocus: E,
+        onBlur: F,
+        onSuffixClick: K,
+        onChange: s,
+        value: p,
+        placeholder: y,
+        className: M,
+        wrapperStyles: e.wrapperStyles,
+        floatingLabelStyles: e.floatingLabelStyles,
+        prefixStyles: e.prefixStyles,
+        suffixStyles: e.suffixStyles,
+        wrapperProps: q,
+        labelProps: v,
+        helperProps: z,
+        showLimit: !1,
+        maxLength: x,
+        inputProps: O,
+        hint: T,
+        showHint: V,
+        showHintOnEmpty: Z,
+        truncate: R,
+        ...A
+      }
+    );
+  }
+);
+export {
+  st as TextInput
+};

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

@@ -0,0 +1,9 @@
+const L = {
+  S: "S",
+  M: "M",
+  L: "L",
+  XL: "XL"
+};
+export {
+  L as SIZES
+};