skillgrid 0.0.80 → 0.0.81

package/dist/components/Popover/lib/use-popover.js

@@ -0,0 +1,184 @@
+import { offset as G, flip as H, shift as V, inline as q, size as J, hide as K, useFloating as Q, autoUpdate as Z, useTransitionStyles as M, useClick as ee, useHover as te, useFocus as oe, useDismiss as ne, useRole as se, useInteractions as re } from "@floating-ui/react";
+import { useState as i, useMemo as v, useCallback as ce, useEffect as ae, useLayoutEffect as ie } from "react";
+import { DEFAULT_FLOATING as le, hasMiddleware as fe } from "./utils.js";
+import { useCompatId as S } from "../../../hooks/useCompatId.js";
+const r = 8, ue = (c) => {
+  switch (c.split("-")[0]) {
+    case "top":
+      return {
+        initial: { transform: `translateY(${r}px) scale(0.96)` },
+        open: { opacity: 1, transform: "translateY(0) scale(1)" },
+        close: { transform: `translateY(${r}px) scale(0.96)` }
+      };
+    case "right":
+      return {
+        initial: { transform: `translateX(-${r}px) scale(0.96)` },
+        open: { opacity: 1, transform: "translateX(0) scale(1)" },
+        close: { transform: `translateX(-${r}px) scale(0.96)` }
+      };
+    case "left":
+      return {
+        initial: { transform: `translateX(${r}px) scale(0.96)` },
+        open: { opacity: 1, transform: "translateX(0) scale(1)" },
+        close: { transform: `translateX(${r}px) scale(0.96)` }
+      };
+    case "bottom":
+    default:
+      return {
+        initial: { transform: `translateY(-${r}px) scale(0.96)` },
+        open: { opacity: 1, transform: "translateY(0) scale(1)" },
+        close: { transform: `translateY(-${r}px) scale(0.96)` }
+      };
+  }
+}, me = (c) => {
+  const [l, n] = c.split("-");
+  switch (l) {
+    case "top":
+      return `bottom ${n === "start" ? "left" : n === "end" ? "right" : "center"}`;
+    case "bottom":
+      return `top ${n === "start" ? "left" : n === "end" ? "right" : "center"}`;
+    case "left":
+      return `${n === "start" ? "top" : n === "end" ? "bottom" : "center"} right`;
+    case "right":
+      return `${n === "start" ? "top" : n === "end" ? "bottom" : "center"} left`;
+    default:
+      return "center";
+  }
+};
+function ye({
+  open: c,
+  defaultOpen: l = !1,
+  onOpenChange: n,
+  onDismiss: g,
+  disabled: a = !1,
+  width: x,
+  widthAsTarget: T = !1,
+  floating: $
+}) {
+  const F = S("popover-content"), h = S("popover-trigger"), [k, z] = i(l), [R, E] = i(), [f, D] = i(null), [P, X] = i(h), [Y, A] = i(!1), t = v(
+    () => ({
+      ...le,
+      ...$
+    }),
+    [$]
+  ), y = c !== void 0, b = !!f, u = !a && (y ? c : k), m = a || Y, N = v(() => {
+    const e = t.middlewares, s = (t.middleware ?? [
+      G(8),
+      (e == null ? void 0 : e.flip) === !1 ? null : H(
+        e != null && e.flip && typeof e.flip == "object" ? e.flip : { padding: 8 }
+      ),
+      (e == null ? void 0 : e.shift) === !1 ? null : V(
+        e != null && e.shift && typeof e.shift == "object" ? e.shift : { padding: 8 }
+      ),
+      e != null && e.inline ? q(
+        typeof e.inline == "object" ? e.inline : void 0
+      ) : null,
+      e != null && e.size ? J(typeof e.size == "object" ? e.size : void 0) : null
+    ]).filter((B) => B !== null);
+    return t.hideDetached && !fe(s, "hide") && s.push(K()), s;
+  }, [t.hideDetached, t.middleware, t.middlewares]), O = ce(
+    (e) => {
+      a || (y || z(e), n == null || n(e));
+    },
+    [a, y, n]
+  ), o = Q({
+    open: u,
+    onOpenChange(e, d, s) {
+      O(e), !e && s && ["escape-key", "outside-press", "ancestor-scroll"].includes(s) && (g == null || g());
+    },
+    placement: t.placement,
+    strategy: t.strategy,
+    middleware: N,
+    transform: t.transform,
+    whileElementsMounted: t.whileElementsMounted ?? Z
+  }), C = ue(o.placement), { isMounted: j, styles: I } = M(o.context, {
+    duration: 160,
+    common: {
+      opacity: 0,
+      transitionProperty: "opacity, transform",
+      transitionTimingFunction: "ease",
+      transformOrigin: me(o.placement),
+      willChange: "opacity, transform"
+    },
+    ...C
+  }), _ = ee(o.context, {
+    enabled: !m && t.click !== !1,
+    ...typeof t.click == "object" ? t.click : {}
+  }), w = te(o.context, {
+    enabled: !m && t.hover !== !1,
+    ...typeof t.hover == "object" ? t.hover : {}
+  }), L = oe(o.context, {
+    enabled: !m && t.focus !== !1,
+    ...typeof t.focus == "object" ? t.focus : {}
+  }), U = ne(o.context, {
+    enabled: !m && t.dismiss !== !1,
+    ...typeof t.dismiss == "object" ? t.dismiss : {}
+  }), W = se(o.context, {
+    enabled: t.role !== !1,
+    role: "dialog",
+    ...typeof t.role == "object" ? t.role : {}
+  }), p = re([_, w, L, U, W]);
+  return ae(() => {
+    f && o.refs.setReference(f);
+  }, [f, o.refs]), ie(() => {
+    const e = o.refs.reference.current;
+    if (!(e instanceof Element)) {
+      E(void 0);
+      return;
+    }
+    const d = () => {
+      E(e.getBoundingClientRect().width);
+    };
+    if (d(), typeof ResizeObserver > "u")
+      return;
+    const s = new ResizeObserver(d);
+    return s.observe(e), () => s.disconnect();
+  }, [o.refs.reference, u, b]), v(
+    () => ({
+      open: u,
+      disabled: a,
+      width: x,
+      widthAsTarget: T,
+      targetWidth: R,
+      contentId: F,
+      triggerId: h,
+      resolvedTriggerId: P,
+      floating: t,
+      refs: o.refs,
+      context: o.context,
+      floatingStyles: o.floatingStyles,
+      middlewareData: o.middlewareData,
+      hasCustomAnchor: b,
+      isMounted: j,
+      transitionStyles: I,
+      setAnchorNode: D,
+      setResolvedTriggerId: X,
+      setTriggerDisabled: A,
+      getReferenceProps: p.getReferenceProps,
+      getFloatingProps: p.getFloatingProps
+    }),
+    [
+      F,
+      a,
+      o.context,
+      o.floatingStyles,
+      o.middlewareData,
+      o.refs,
+      b,
+      p.getFloatingProps,
+      p.getReferenceProps,
+      j,
+      t,
+      u,
+      P,
+      R,
+      I,
+      h,
+      x,
+      T
+    ]
+  );
+}
+export {
+  ye as usePopover
+};

package/dist/components/Popover/lib/utils.js

@@ -0,0 +1,136 @@
+import { Children as p, isValidElement as t, cloneElement as f, Fragment as l } from "react";
+import { clsx as c } from "clsx";
+import u from "../Popover.module.css.js";
+const C = {
+  placement: "bottom",
+  portal: !0,
+  transform: !0,
+  click: !0,
+  hover: !1,
+  focus: !1,
+  dismiss: !0,
+  role: !0
+}, i = (e) => typeof e == "object" && e !== null && "current" in e, R = (e) => i(e) ? e.current : e, v = (e, r) => {
+  if (typeof e == "function") {
+    e(r);
+    return;
+  }
+  e && typeof e == "object" && (e.current = r);
+}, b = (...e) => (r) => {
+  e.forEach((o) => v(o, r));
+}, O = (e, r) => (e == null ? void 0 : e.some((o) => o.name === r)) ?? !1, d = (e) => e.type.__popoverSlot ?? null, m = Symbol.for("react.forward_ref"), P = Symbol.for("react.memo"), n = () => {
+  try {
+    return !1;
+  } catch {
+    return !1;
+  }
+}, D = `Ошибка в структуре Popover.Drop:
+
+<Popover.Drop>
+  <Popover.DropHeader>{...}</Popover.DropHeader> // опциональный хэдер 
+  <Popover.DropContent>{...}</Popover.DropContent> // обязательный контент
+  <Popover.DropFooter>{...}</Popover.DropFooter> // опциональный футер
+</Popover.Drop>
+`, $ = (e) => {
+  if (!e || !n())
+    return;
+  const r = e.developerHint ? `
+
+${e.developerHint}` : "";
+  console.error(`Popover.Drop: ${e.message}${r}`);
+}, s = (e) => {
+  if (typeof e == "string")
+    return !0;
+  if (typeof e != "object" || e === null)
+    return !1;
+  const r = e;
+  return r.$$typeof === m ? !0 : r.$$typeof === P && r.type ? s(r.type) : !1;
+}, F = (e) => {
+  const r = {
+    contentElement: null,
+    headerElement: null,
+    footerElement: null,
+    hasUnexpectedChildren: !1
+  };
+  return p.forEach(e, (o) => {
+    if (!t(o)) {
+      o != null && typeof o != "boolean" && (r.hasUnexpectedChildren = !0);
+      return;
+    }
+    switch (d(o)) {
+      case "content":
+        if (!r.contentElement) {
+          r.contentElement = o;
+          return;
+        }
+        break;
+      case "header":
+        if (!r.headerElement) {
+          r.headerElement = o;
+          return;
+        }
+        break;
+      case "footer":
+        if (!r.footerElement) {
+          r.footerElement = o;
+          return;
+        }
+        break;
+    }
+    r.hasUnexpectedChildren = !0;
+  }), r;
+}, _ = (e, r) => {
+  if (!e)
+    return null;
+  const { className: o, divider: a } = e.props;
+  return f(e, {
+    className: c(u.dropSection, r, o),
+    "data-divider-mode": a ?? "dynamic"
+  });
+}, g = (e) => e || null, w = (e) => {
+  const r = (o) => ({
+    message: o,
+    developerHint: n() ? D : void 0
+  });
+  return e.contentElement ? e.hasUnexpectedChildren ? r(
+    "Popover.Drop поддерживает в качестве прямых детей только Popover.DropHeader, Popover.DropContent и Popover.DropFooter."
+  ) : null : r(
+    "Popover.Drop ожидает ровно один дочерний элемент Popover.DropContent."
+  );
+}, S = (e, r) => {
+  if (!n())
+    return t(r);
+  if (p.count(r) !== 1)
+    throw new Error(
+      `${e} ожидает ровно один React-элемент с единственным корневым DOM-узлом.`
+    );
+  if (!t(r))
+    throw new Error(
+      `${e} ожидает единственный дочерний React-элемент. Строки, числа и null не поддерживаются.`
+    );
+  if (r.type === l)
+    throw new Error(
+      `${e} не поддерживает React.Fragment в качестве ребёнка. Передайте один элемент или компонент.`
+    );
+  if (!s(r.type))
+    throw new Error(
+      `${e} ожидает ребёнка, который пробрасывает props и ref в один DOM-элемент.`
+    );
+  return !0;
+};
+export {
+  C as DEFAULT_FLOATING,
+  D as POPOVER_DROP_STRUCTURE_HINT,
+  v as assignRef,
+  w as getParsedPopoverChildrenValidationIssue,
+  d as getSlotName,
+  O as hasMiddleware,
+  i as isMutableRefObject,
+  b as mergeRefs,
+  F as parsePopoverChildren,
+  g as renderBodyContent,
+  _ as renderSection,
+  $ as reportPopoverDropValidationIssue,
+  R as resolvePortalRoot,
+  S as validatePopoverCompoundChild
+};

package/dist/components/Progress/Progress.constants.js

@@ -0,0 +1,4 @@
+const I = 24;
+export {
+  I as MIN_INDICATOR_SIZE
+};

package/dist/components/Progress/Progress.js

@@ -0,0 +1,203 @@
+import { jsx as i, jsxs as j } from "react/jsx-runtime";
+import { forwardRef as K } from "react";
+import { clsx as S } from "clsx";
+import O from "../../styles/typography.module.css.js";
+import e from "./Progress.module.css.js";
+import { isSegmentedProps as ee, isProgressStyle as T } from "./Progress.type.js";
+import { MIN_INDICATOR_SIZE as ae } from "./Progress.constants.js";
+import { getIndicatorLabel as Z } from "./lib/get-indicator-label.js";
+import { clampToRange as q } from "./lib/clamp-to-range.js";
+import { getDefaultCircleStrokeWidth as se } from "./lib/get-default-circle-stroke-width.js";
+import { getCircleIndicatorTypographyKey as te } from "./lib/get-circle-indicator-typography-key.js";
+import { resolveCircleIndicatorClassName as re } from "./lib/resolve-circle-indicator-class-name.js";
+import { resolveActiveProgressStyleClass as G } from "./lib/resolve-active-progress-style-class.js";
+const oe = 64, U = K((h, L) => {
+  const {
+    value: w,
+    indicatorLabel: A,
+    formatValue: W,
+    progressStyle: c = "accent",
+    finishColor: r,
+    trackColor: x,
+    className: g,
+    classNames: o,
+    style: N,
+    "data-testid": D,
+    "aria-label": v,
+    "aria-labelledby": R
+  } = h, n = ee(h), t = n ? Math.max(1, Math.round(h.segments ?? 4)) : Math.max(1, h.max ?? 100), d = q(w ?? 0, 0, t), m = d / t, s = d >= t, C = !s || !r, l = Z({
+    indicatorLabel: A,
+    formatValue: W,
+    clampedValue: d,
+    total: t
+  }), _ = n ? Math.min(t, Math.max(0, Math.floor(d))) : 0, y = typeof l == "string" ? l : void 0, P = T(c), a = !!c && !P, f = T(r), p = !!r && !f, I = G({
+    progressStyle: c,
+    finishColor: r,
+    isFinished: s
+  }), b = P || s && f, M = {
+    ...N,
+    ...x && { "--progress-track": x },
+    // Применяем кастомный progressStyle через CSS переменную для несегментированного режима (если не завершено или нет finishColor)
+    ...a && C && !n && { "--progress-fill": c },
+    // Применяем кастомный finishColor через CSS переменную для несегментированного режима
+    ...s && p && !n && { "--progress-fill": r }
+  }, E = {
+    width: `${Math.round(m * 100)}%`,
+    // Применяем кастомный finishColor через inline стиль когда завершено
+    ...s && p && { background: r },
+    // Применяем кастомный progressStyle только если не завершено или если завершено, но нет finishColor
+    ...a && C && { background: c }
+  }, B = /* @__PURE__ */ i(
+    "div",
+    {
+      className: S(e.track, e.segmentedTrack),
+      style: { "--progress-segments": t },
+      children: Array.from({ length: t }, ($, k) => {
+        const F = k < _;
+        let u;
+        F && (s && p ? u = r : a && C && (u = c));
+        const V = u ? { background: u } : void 0;
+        return /* @__PURE__ */ i(
+          "div",
+          {
+            className: S(e.segment, F && e.segmentFilled),
+            style: V
+          },
+          k
+        );
+      })
+    }
+  );
+  return /* @__PURE__ */ j(
+    "div",
+    {
+      ref: L,
+      className: S(
+        e.container,
+        e.fillStyle,
+        { [e[I]]: b },
+        g
+      ),
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": t,
+      "aria-valuenow": d,
+      "aria-valuetext": y,
+      "aria-label": v,
+      "aria-labelledby": R,
+      "data-testid": D,
+      style: M,
+      children: [
+        /* @__PURE__ */ i("div", { className: e.bar, "aria-hidden": !0, children: n ? B : /* @__PURE__ */ i("div", { className: e.track, children: /* @__PURE__ */ i("div", { className: e.fill, style: E }) }) }),
+        !!l && /* @__PURE__ */ i("span", { className: S(e.indicator, O["typography-label-3-regular"], o == null ? void 0 : o.indicator), children: l })
+      ]
+    }
+  );
+});
+U.displayName = "Progress.Bar";
+const H = K((h, L) => {
+  const {
+    value: w,
+    max: A,
+    size: W = oe,
+    strokeWidth: c,
+    indicatorLabel: r,
+    formatValue: x,
+    progressStyle: g = "accent",
+    finishColor: o,
+    trackColor: N,
+    className: D,
+    classNames: v,
+    style: R,
+    "data-testid": n,
+    "aria-label": t,
+    "aria-labelledby": d
+  } = h, m = Math.max(1, A ?? 100), s = q(w ?? 0, 0, m), C = s / m, l = s >= m, _ = !l || !o, y = Z({
+    indicatorLabel: r,
+    formatValue: x,
+    clampedValue: s,
+    total: m
+  }), P = typeof y == "string" ? y : void 0, a = Math.max(1, W), f = Math.max(
+    1,
+    c ?? se(a)
+  ), p = a / 2, I = a / 2, b = Math.max(0, (a - f) / 2), M = 2 * Math.PI * b, E = M * (1 - C), B = T(g), $ = !!g && !B, k = T(o), F = !!o && !k, u = G({
+    progressStyle: g,
+    finishColor: o,
+    isFinished: l
+  }), V = B || l && k, J = {
+    ...R,
+    width: a,
+    height: a,
+    ...N && { "--progress-track": N },
+    ...$ && _ && { "--progress-fill": g },
+    ...l && F && { "--progress-fill": o }
+  }, z = a !== ae && !!y, Q = z ? te(a) : void 0, X = re(Q, O, e), Y = z ? /* @__PURE__ */ i("span", { className: S(e.circleIndicator, X, v == null ? void 0 : v.indicator), children: y }) : null;
+  return /* @__PURE__ */ j(
+    "div",
+    {
+      ref: L,
+      className: S(
+        e.circleContainer,
+        e.fillStyle,
+        V && e[u],
+        D
+      ),
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": m,
+      "aria-valuenow": s,
+      "aria-valuetext": P,
+      "aria-label": t,
+      "aria-labelledby": d,
+      "data-testid": n,
+      style: J,
+      children: [
+        /* @__PURE__ */ j(
+          "svg",
+          {
+            className: e.circleSvg,
+            width: a,
+            height: a,
+            viewBox: `0 0 ${a} ${a}`,
+            "aria-hidden": !0,
+            children: [
+              /* @__PURE__ */ i(
+                "circle",
+                {
+                  className: e.circleTrack,
+                  cx: p,
+                  cy: I,
+                  r: b,
+                  fill: "none",
+                  strokeWidth: f
+                }
+              ),
+              /* @__PURE__ */ i(
+                "circle",
+                {
+                  className: e.circleProgress,
+                  cx: p,
+                  cy: I,
+                  r: b,
+                  fill: "none",
+                  strokeWidth: f,
+                  strokeDasharray: M,
+                  strokeDashoffset: E
+                }
+              )
+            ]
+          }
+        ),
+        Y
+      ]
+    }
+  );
+});
+H.displayName = "Progress.Circle";
+const ve = Object.assign(U, {
+  Bar: U,
+  Circle: H
+});
+export {
+  ve as Progress
+};

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

@@ -0,0 +1,51 @@
+import '../../assets/components/Progress/Progress.module-CrfevOBT.css';const c = "_fillStyle_1mamt_1", t = "_accent_1mamt_2", e = "_blue_1mamt_6", i = "_positive_1mamt_10", n = "_special_1mamt_14", a = "_warning_1mamt_18", _ = "_negative_1mamt_22", r = "_container_1mamt_27", m = "_bar_1mamt_38", l = "_track_1mamt_43", o = "_fill_1mamt_1", s = "_segmentedTrack_1mamt_62", d = "_segment_1mamt_62", g = "_segmentFilled_1mamt_79", I = "_indicator_1mamt_83", k = "_circleContainer_1mamt_93", v = "_circleSvg_1mamt_105", f = "_circleTrack_1mamt_109", p = "_circleProgress_1mamt_113", b = "_circleIndicator_1mamt_123", S = "_circleIndicator32_1mamt_138", T = "_circleIndicator36_1mamt_146", u = "_circleIndicator40_1mamt_154", w = {
+  fillStyle: c,
+  accent: t,
+  blue: e,
+  positive: i,
+  special: n,
+  warning: a,
+  negative: _,
+  container: r,
+  bar: m,
+  track: l,
+  fill: o,
+  segmentedTrack: s,
+  segment: d,
+  segmentFilled: g,
+  indicator: I,
+  circleContainer: k,
+  circleSvg: v,
+  circleTrack: f,
+  circleProgress: p,
+  circleIndicator: b,
+  circleIndicator32: S,
+  circleIndicator36: T,
+  circleIndicator40: u
+};
+export {
+  t as accent,
+  m as bar,
+  e as blue,
+  k as circleContainer,
+  b as circleIndicator,
+  S as circleIndicator32,
+  T as circleIndicator36,
+  u as circleIndicator40,
+  p as circleProgress,
+  v as circleSvg,
+  f as circleTrack,
+  r as container,
+  w as default,
+  o as fill,
+  c as fillStyle,
+  I as indicator,
+  _ as negative,
+  i as positive,
+  d as segment,
+  g as segmentFilled,
+  s as segmentedTrack,
+  n as special,
+  l as track,
+  a as warning
+};

package/dist/components/Progress/Progress.type.js

@@ -0,0 +1,12 @@
+const t = {
+  accent: !0,
+  blue: !0,
+  positive: !0,
+  special: !0,
+  warning: !0,
+  negative: !0
+}, r = (e) => typeof e == "string" && e in t, s = (e) => e.segmented === !0;
+export {
+  r as isProgressStyle,
+  s as isSegmentedProps
+};

package/dist/components/Progress/lib/clamp-to-range.js

@@ -0,0 +1,4 @@
+const n = (a, t, m) => Math.min(m, Math.max(t, a));
+export {
+  n as clampToRange
+};

package/dist/components/Progress/lib/get-circle-indicator-typography-key.js

@@ -0,0 +1,27 @@
+import { getClosestCircleSize as e } from "./get-closest-circle-size.js";
+const c = (r) => {
+  switch (e(r)) {
+    case 32:
+      return "circleIndicator32";
+    case 36:
+      return "circleIndicator36";
+    case 40:
+      return "circleIndicator40";
+    case 48:
+      return "typography-label-5-regular";
+    case 56:
+    case 64:
+      return "typography-label-3-regular";
+    case 84:
+      return "typography-label-2-regular";
+    case 96:
+    case 120:
+      return "typography-label-1-regular";
+    case 24:
+    default:
+      return "typography-label-5-regular";
+  }
+};
+export {
+  c as getCircleIndicatorTypographyKey
+};

package/dist/components/Progress/lib/get-closest-circle-size.js

@@ -0,0 +1,11 @@
+const c = [24, 32, 36, 40, 48, 56, 64, 84, 96, 120], n = (e) => {
+  let t = c[0], s = Math.abs(e - t);
+  for (const l of c) {
+    const o = l, a = Math.abs(e - o);
+    a < s && (t = o, s = a);
+  }
+  return t;
+};
+export {
+  n as getClosestCircleSize
+};

package/dist/components/Progress/lib/get-default-circle-stroke-width.js

@@ -0,0 +1,30 @@
+import { getClosestCircleSize as r } from "./get-closest-circle-size.js";
+const c = (e) => {
+  switch (r(e)) {
+    case 24:
+      return 3.2;
+    case 32:
+      return 3.5;
+    case 36:
+      return 4;
+    case 40:
+      return 4;
+    case 48:
+      return 4.4;
+    case 56:
+      return 5.2;
+    case 64:
+      return 6;
+    case 84:
+      return 7;
+    case 96:
+      return 7.8;
+    case 120:
+      return 8.8;
+    default:
+      return 6;
+  }
+};
+export {
+  c as getDefaultCircleStrokeWidth
+};

package/dist/components/Progress/lib/get-indicator-label.js

@@ -0,0 +1,9 @@
+const u = ({
+  indicatorLabel: r,
+  formatValue: n,
+  clampedValue: t,
+  total: e
+}) => r !== void 0 ? r : n ? n(t, e) : null;
+export {
+  u as getIndicatorLabel
+};

package/dist/components/Progress/lib/resolve-active-progress-style-class.js

@@ -0,0 +1,9 @@
+import { isProgressStyle as t } from "../Progress.type.js";
+const n = ({
+  progressStyle: r,
+  finishColor: e,
+  isFinished: s
+}) => s && t(e) ? e : t(r) ? r : "accent";
+export {
+  n as resolveActiveProgressStyleClass
+};