skillgrid 0.0.80 → 0.0.82

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,135 @@
+import { jsxs as I, jsx as c } from "react/jsx-runtime";
+import { forwardRef as F, useState as O } from "react";
+import a from "./Checkbox.module.css.js";
+import { CheckIcon as R } from "./assets/CheckIcon.js";
+import { LineIcon as T } from "./assets/LineIcon.js";
+import { clsx as N } from "clsx";
+const W = {
+  medium: { width: 10.83, height: 7.5 },
+  large: { width: 13, height: 9 }
+}, Z = ({
+  size: b,
+  isChecked: m,
+  isDisabled: t,
+  indeterminate: o,
+  dataTestId: s
+}) => {
+  const { width: l, height: h } = W[b];
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: a.icon,
+      "data-testid": `${s}-icon`,
+      "data-checked": m,
+      "data-disabled": t,
+      "data-indeterminate": o,
+      children: o ? /* @__PURE__ */ c(T, { width: l, height: h }) : /* @__PURE__ */ c(R, { width: l, height: h })
+    }
+  );
+}, M = F((b, m) => {
+  const {
+    name: t,
+    value: o,
+    size: s = "medium",
+    indeterminate: l = !1,
+    loading: h = !1,
+    error: k,
+    disabled: C = !1,
+    containerClassName: w,
+    className: g,
+    containerStyle: $,
+    style: D,
+    children: x,
+    clickableLabel: f = !0,
+    tabIndex: S,
+    onChange: i,
+    onClick: u,
+    "data-testid": r = "checkbox"
+  } = b, [V, v] = O(!1), E = o ?? V, d = C || h, p = !!k, n = E || l, L = N(a.container, a[s], w), j = N(
+    a.checkbox,
+    a[s],
+    {
+      [a.error]: p
+    },
+    g
+  ), K = (e) => {
+    d || (v(e.target.checked), i == null || i(e.target.checked, e));
+  }, z = (e) => {
+    if (e.key === "Enter" && !d) {
+      e.preventDefault();
+      const y = !n;
+      v(y), i == null || i(y);
+    }
+  }, B = (e) => {
+    f || e.preventDefault(), u == null || u(e);
+  };
+  return /* @__PURE__ */ I(
+    "label",
+    {
+      className: L,
+      htmlFor: t,
+      style: $,
+      "data-testid": r,
+      "data-clickable-label": f,
+      children: [
+        /* @__PURE__ */ c("div", { className: a.checkboxWrapper, children: /* @__PURE__ */ I(
+          "div",
+          {
+            tabIndex: S || 0,
+            className: j,
+            style: D,
+            onKeyDown: z,
+            "aria-checked": n,
+            "aria-disabled": d,
+            "aria-invalid": p,
+            "aria-describedby": k ? `${t}-error` : void 0,
+            "data-testid": `${r}-label`,
+            children: [
+              /* @__PURE__ */ c(
+                "input",
+                {
+                  ref: m,
+                  type: "checkbox",
+                  id: t,
+                  name: t,
+                  checked: n,
+                  disabled: d,
+                  className: a.input,
+                  onChange: K,
+                  "aria-checked": n,
+                  "aria-invalid": p,
+                  "aria-describedby": k ? `${t}-error` : void 0,
+                  "data-testid": `${r}-input`
+                }
+              ),
+              /* @__PURE__ */ c(
+                Z,
+                {
+                  name: t,
+                  size: s,
+                  isChecked: n,
+                  isDisabled: d,
+                  indeterminate: l,
+                  dataTestId: r
+                }
+              )
+            ]
+          }
+        ) }),
+        x && /* @__PURE__ */ c(
+          "span",
+          {
+            "data-testid": `${r}-label-text`,
+            "data-clickable-label": f,
+            className: a.label,
+            onClick: B,
+            children: x
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  M as Checkbox
+};

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

@@ -0,0 +1,23 @@
+import '../../assets/components/Checkbox/Checkbox.module-B89_Pd4C.css';const n = "_checkbox_n0n8f_43", c = "_input_n0n8f_64", e = "_icon_n0n8f_72", _ = "_container_n0n8f_92", o = "_error_n0n8f_143", r = "_checkboxWrapper_n0n8f_156", t = "_medium_n0n8f_211", a = "_large_n0n8f_216", s = "_label_n0n8f_258", i = {
+  checkbox: n,
+  input: c,
+  icon: e,
+  container: _,
+  error: o,
+  checkboxWrapper: r,
+  medium: t,
+  large: a,
+  label: s
+};
+export {
+  n as checkbox,
+  r as checkboxWrapper,
+  _ as container,
+  i as default,
+  o as error,
+  e as icon,
+  c as input,
+  s as label,
+  a as large,
+  t as medium
+};

package/dist/components/Checkbox/assets/CheckIcon.js

@@ -0,0 +1,31 @@
+import { jsx as e } from "react/jsx-runtime";
+const C = ({
+  width: l = 12,
+  height: o = 9,
+  className: n = "",
+  color: r = "currentColor",
+  ...t
+}) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: n,
+    width: l,
+    height: o,
+    viewBox: "0 0 14 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M13.0001 2.49999C13.3906 2.10946 13.3906 1.4763 13.0001 1.08578C12.6095 0.695251 11.9764 0.695251 11.5859 1.08578L5.29296 7.37867L2.00007 4.08578C1.60954 3.69525 0.976378 3.69525 0.585855 4.08578C0.19533 4.4763 0.19533 5.10946 0.585855 5.49999L4.58585 9.49999C4.97638 9.89051 5.60954 9.89051 6.00007 9.49999L13.0001 2.49999Z",
+        fill: r
+      }
+    )
+  }
+);
+export {
+  C as CheckIcon
+};

package/dist/components/Checkbox/assets/LineIcon.js

@@ -0,0 +1,31 @@
+import { jsx as e } from "react/jsx-runtime";
+const d = ({
+  width: l = 12,
+  height: o = 2,
+  className: n = "",
+  color: r = "currentColor",
+  ...i
+}) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: n,
+    width: l,
+    height: o,
+    viewBox: "0 0 12 2",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...i,
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M0 1C0 0.447715 0.447715 0 1 0H11C11.5523 0 12 0.447715 12 1C12 1.55228 11.5523 2 11 2H1C0.447715 2 0 1.55228 0 1Z",
+        fill: r
+      }
+    )
+  }
+);
+export {
+  d as LineIcon
+};

package/dist/components/ConfigProvider/ConfigProvider.hook.js

@@ -0,0 +1,23 @@
+import { createContext as t, useContext as r } from "react";
+import n from "../../locale/ru_RU.js";
+const s = t({
+  locale: n,
+  darkTheme: !1
+}), o = () => {
+  const e = r(s);
+  if (!e)
+    throw new Error("useConfig must be used within a ConfigProvider");
+  return e;
+}, i = () => {
+  const { locale: e } = o();
+  return e;
+}, u = () => {
+  const { darkTheme: e } = o();
+  return e ?? !1;
+};
+export {
+  s as ConfigContext,
+  o as useConfig,
+  u as useDarkTheme,
+  i as useLocale
+};

package/dist/components/ConfigProvider/ConfigProvider.js

@@ -0,0 +1,65 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useMemo as u, useLayoutEffect as l, Fragment as p } from "react";
+import { useConfig as k, ConfigContext as g } from "./ConfigProvider.hook.js";
+import { clsx as h } from "clsx";
+import y from "../../styles/brand.module.css.js";
+import T from "../../styles/tokens.module.css.js";
+import b from "../../styles/palette.module.css.js";
+import v from "../../styles/link.module.css.js";
+import x from "../../styles/typography.module.css.js";
+import S from "../../styles/button.module.css.js";
+import C from "../../styles/z-index.module.css.js";
+import A from "../../styles/animation.module.css.js";
+import D from "../../styles/progress.module.css.js";
+const B = ({
+  locale: i,
+  theme: m,
+  children: n,
+  className: d,
+  darkTheme: s
+}) => {
+  const t = k(), r = u(
+    () => ({
+      locale: i ?? t.locale,
+      darkTheme: s ?? t.darkTheme
+    }),
+    [i, s, t.darkTheme, t.locale]
+  );
+  return l(() => {
+    if (m) {
+      const e = document.documentElement;
+      Object.entries(m).forEach(([o, f]) => {
+        e.style.setProperty(o, f);
+      });
+    }
+  }, [m]), l(() => {
+    const e = document.documentElement, o = e.getAttribute("data-skillgridDarkTheme");
+    return r.darkTheme ? e.setAttribute("data-skillgridDarkTheme", "true") : e.removeAttribute("data-skillgridDarkTheme"), () => {
+      o === null ? e.removeAttribute("data-skillgridDarkTheme") : e.setAttribute("data-skillgridDarkTheme", o);
+    };
+  }, [r.darkTheme]), /* @__PURE__ */ c(p, { children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        "data-testid": "ConfigProvider-component",
+        "data-darkTheme": r.darkTheme,
+        className: h(
+          y,
+          T,
+          b,
+          v,
+          S,
+          C,
+          x,
+          A,
+          D,
+          d
+        )
+      }
+    ),
+    /* @__PURE__ */ a(g.Provider, { value: r, children: n })
+  ] });
+};
+export {
+  B as ConfigProvider
+};

package/dist/components/Container/Container.js

@@ -0,0 +1,11 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import e from "./Container.module.css.js";
+import { clsx as n } from "clsx";
+const s = a(
+  ({ className: r, children: o, ...m }, t) => /* @__PURE__ */ i("div", { ref: t, className: n(e.container, r), ...m, children: o })
+);
+s.displayName = "Container";
+export {
+  s as Container
+};

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

@@ -0,0 +1,7 @@
+import '../../assets/components/Container/Container.module-PalqDaxC.css';const n = "_container_ww662_20", t = {
+  container: n
+};
+export {
+  n as container,
+  t as default
+};

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,102 @@
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { useMergeRefs as w, FloatingPortal as V, FloatingOverlay as E, FloatingFocusManager as $ } from "@floating-ui/react";
+import o from "./Dialog.module.css.js";
+import { forwardRef as j } from "react";
+import { clsx as c } from "clsx";
+import { useDialogDraggable as I } from "./lib/use-dialog-draggable.js";
+import { useVisualViewportCenter as M } from "./lib/use-visual-viewport-center.js";
+const G = j((p, u) => {
+  const {
+    placement: i = "default",
+    open: d,
+    onOpenChange: m,
+    overlayProps: e,
+    portalProps: b,
+    focusManagement: a,
+    children: h,
+    disableOutsideClick: N = !1,
+    disableEscapeKey: O = !1,
+    disableOverlay: x = !1,
+    closeOnDrag: l,
+    className: C,
+    style: D,
+    "data-testid": s,
+    ...F
+  } = p;
+  d === void 0 && process.env.NODE_ENV !== "production" && console.error(
+    "Dialog: компонент должен быть контролируемым. Используйте пропсы open и onOpenChange."
+  );
+  const r = I({
+    open: d,
+    onOpenChange: m,
+    placement: i,
+    disableEscapeKey: O,
+    closeOnDrag: l
+  }), { isMounted: g, transitionStyles: t } = r, y = M(i === "center" && g), v = w([u, r.refs.setFloating]), k = () => {
+    N || m(!1);
+  };
+  return g ? (
+    // `FloatingPortal` рендерит диалог в корне `document.body`,
+    // чтобы избежать проблем с z-index и overflow.
+    /* @__PURE__ */ f(V, { ...b, children: [
+      !x && /* @__PURE__ */ n(
+        E,
+        {
+          onPointerDown: k,
+          "data-testid": "dialog-overlay",
+          className: c(o.overlay, e == null ? void 0 : e.className),
+          lockScroll: (e == null ? void 0 : e.lockScroll) ?? !0,
+          style: {
+            // Стили для анимации прозрачности оверлея
+            opacity: t == null ? void 0 : t.opacity,
+            transition: t == null ? void 0 : t.transition,
+            ...e == null ? void 0 : e.style
+          }
+        }
+      ),
+      /* @__PURE__ */ n(
+        $,
+        {
+          initialFocus: 1 / 0,
+          ...a,
+          context: { ...r.context, ...a == null ? void 0 : a.context },
+          children: /* @__PURE__ */ f(
+            "section",
+            {
+              ref: v,
+              "aria-modal": "true",
+              role: "dialog",
+              className: c(C, o.container, o[`placement-${i}`]),
+              style: {
+                ...y ?? {},
+                ...D,
+                ...t
+              },
+              "data-testid": s,
+              ...r.getFloatingProps(F),
+              children: [
+                h,
+                l && /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: c(
+                      o.grabber,
+                      o[`grabber-${l.direction}`]
+                      // classNames?.grabber,
+                    ),
+                    role: "presentation",
+                    "aria-hidden": "true",
+                    "data-testid": s ? `${s}-grabber` : void 0
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] })
+  ) : null;
+});
+export {
+  G as Dialog
+};

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

@@ -0,0 +1,22 @@
+import '../../assets/components/Dialog/Dialog.module-OXi8ThCq.css';const e = "_overlay_1gisq_6", t = "_container_1gisq_19", r = "_grabber_1gisq_100", _ = {
+  overlay: e,
+  container: t,
+  "placement-default": "_placement-default_1gisq_32",
+  "placement-bottom-left": "_placement-bottom-left_1gisq_45",
+  "placement-bottom-right": "_placement-bottom-right_1gisq_54",
+  "placement-center": "_placement-center_1gisq_64",
+  "placement-left-drawer": "_placement-left-drawer_1gisq_77",
+  "placement-right-drawer": "_placement-right-drawer_1gisq_83",
+  "placement-bottom-sheet": "_placement-bottom-sheet_1gisq_89",
+  grabber: r,
+  "grabber-top": "_grabber-top_1gisq_118",
+  "grabber-bottom": "_grabber-bottom_1gisq_119",
+  "grabber-right": "_grabber-right_1gisq_125",
+  "grabber-left": "_grabber-left_1gisq_134"
+};
+export {
+  t as container,
+  _ as default,
+  r as grabber,
+  e as overlay
+};

package/dist/components/Dialog/lib/index.d.ts

@@ -1,2 +1,3 @@
 export { useDialog } from './use-dialog';
 export { useDialogDraggable } from './use-dialog-draggable';
+export { useVisualViewportCenter } from './use-visual-viewport-center';

package/dist/components/Dialog/lib/use-dialog-draggable.js

@@ -0,0 +1,97 @@
+import { useRef as T, useState as w, useEffect as C, useCallback as d, useMemo as k } from "react";
+import { useDialog as L } from "./use-dialog.js";
+const R = 80;
+function v({
+  open: u,
+  onOpenChange: h,
+  placement: E = "center",
+  disableEscapeKey: F = !1,
+  closeOnDrag: i
+}) {
+  const { getFloatingProps: b, transitionStyles: f, isMounted: p, context: P, refs: x } = L({
+    open: u,
+    onOpenChange: h,
+    placement: E,
+    disableEscapeKey: F
+  }), r = T({ startX: 0, startY: 0, dragging: !1 }), [o, g] = w(0), a = i == null ? void 0 : i.direction, M = (i == null ? void 0 : i.threshold) ?? R, l = a === "top" || a === "bottom", e = u && !!a;
+  C(() => {
+    u || (r.current.dragging = !1, g(0));
+  }, [u]);
+  const S = d(
+    (t) => {
+      e && (r.current.dragging = !0, r.current.startX = t.clientX, r.current.startY = t.clientY, g(0));
+    },
+    [e]
+  ), y = d(
+    (t) => {
+      if (!r.current.dragging || !e) return;
+      const n = t.clientX - r.current.startX, s = t.clientY - r.current.startY;
+      let c;
+      switch (a) {
+        case "bottom":
+          c = Math.max(0, s);
+          break;
+        case "top":
+          c = Math.max(0, -s);
+          break;
+        case "right":
+          c = Math.max(0, n);
+          break;
+        case "left":
+          c = Math.max(0, -n);
+          break;
+        default:
+          c = l ? s : n;
+      }
+      g(c);
+    },
+    [e, a, l]
+  ), m = d(
+    (t) => {
+      var n, s;
+      if (!(!r.current.dragging || !e)) {
+        r.current.dragging = !1;
+        try {
+          (s = (n = t.currentTarget).hasPointerCapture) != null && s.call(n, t.pointerId) && t.currentTarget.releasePointerCapture(t.pointerId);
+        } catch {
+        }
+        o >= M ? h(!1) : g(0);
+      }
+    },
+    [o, M, h, e]
+  ), X = k(() => {
+    if (!e) return f;
+    if (r.current.dragging) {
+      const t = { ...f, transitionProperty: "none" };
+      if (o > 0) {
+        const n = a === "left" || a === "top" ? -o : o;
+        t.transform = l ? `translateY(${n}px)` : `translateX(${n}px)`;
+      }
+      return t;
+    }
+    return f;
+  }, [f, o, e, l, a]), Y = d(
+    (t) => b(e ? {
+      ...t,
+      onPointerDown: S,
+      onPointerUp: m,
+      onPointerMove: y,
+      onPointerCancel: m
+      // Отмена (например, уход фокуса) также завершает перетаскивание
+    } : t),
+    [b, S, y, m, e]
+  );
+  return k(
+    () => ({
+      isMounted: p,
+      context: P,
+      refs: x,
+      transitionStyles: X,
+      getFloatingProps: Y
+    }),
+    [p, X, Y, P, x]
+  );
+}
+export {
+  v as useDialogDraggable
+};

package/dist/components/Dialog/lib/use-dialog.js

@@ -0,0 +1,97 @@
+import { useFloating as y, useTransitionStyles as g, useDismiss as b, useRole as X, useInteractions as Y } from "@floating-ui/react";
+import { useCallback as P, useMemo as h } from "react";
+function w(t) {
+  switch (t) {
+    case "default":
+      return "top";
+    case "bottom-sheet":
+      return "bottom";
+    case "center":
+    default:
+      return;
+  }
+}
+const F = (t) => {
+  switch (t) {
+    case "bottom-sheet":
+      return {
+        initial: { transform: "translateY(100%)" },
+        open: { opacity: 1, transform: "translateY(0)" },
+        close: { transform: "translateY(100%)" }
+      };
+    case "default":
+      return {
+        initial: { transform: "translateY(-100%)" },
+        open: { opacity: 1, transform: "translateY(0)" },
+        close: { transform: "translateY(-100%)" }
+      };
+    case "bottom-right":
+    case "right-drawer":
+      return {
+        initial: { transform: "translateX(100%)" },
+        open: { opacity: 1, transform: "translateX(0)" },
+        close: { transform: "translateX(100%)" }
+      };
+    case "bottom-left":
+    case "left-drawer":
+      return {
+        initial: { transform: "translateX(-100%)" },
+        open: { opacity: 1, transform: "translateX(0)" },
+        close: { transform: "translateX(-100%)" }
+      };
+    default:
+      return {
+        initial: { transform: "scale(0.95)" },
+        open: { opacity: 1, transform: "scale(1)" },
+        close: { transform: "scale(0.95)" }
+      };
+  }
+};
+function D({
+  open: t,
+  onOpenChange: e,
+  placement: r = "center",
+  disableEscapeKey: c = !1
+}) {
+  const m = P(
+    (d) => {
+      e == null || e(d);
+    },
+    [e]
+  ), a = w(r), { context: s, refs: o } = y({
+    open: t,
+    onOpenChange: m,
+    placement: a
+  }), f = F(r), { isMounted: n, styles: i } = g(s, {
+    duration: 200,
+    common: {
+      transitionProperty: "opacity, transform",
+      transitionTimingFunction: "ease-in-out",
+      transformOrigin: a ?? "center",
+      position: "fixed",
+      opacity: 0
+    },
+    ...f
+  }), u = b(s, {
+    escapeKey: !c,
+    outsidePress: !1
+  }), p = X(s, { role: "dialog" }), { getFloatingProps: l } = Y([u, p]);
+  return h(
+    () => ({
+      /** `isMounted`: Флаг для условного рендеринга с поддержкой анимации закрытия. */
+      isMounted: n,
+      /** `transitionStyles`: CSS-стили для анимации. */
+      transitionStyles: i,
+      /** `context`: Контекст `Floating UI`. */
+      context: s,
+      /** `refs`: Ссылки на DOM-элементы для `Floating UI`. */
+      refs: o,
+      /** `getFloatingProps`: Функция для получения пропсов, которые нужно передать на элемент диалога. */
+      getFloatingProps: l
+    }),
+    [n, i, s, o, l]
+  );
+}
+export {
+  D as useDialog
+};

package/dist/components/Dialog/lib/use-visual-viewport-center.d.ts

@@ -0,0 +1,7 @@
+export type VisualViewportCenter = {
+    left: number;
+    top: number;
+};
+export declare const getVisualViewportCenter: (targetWindow: Window) => VisualViewportCenter;
+/** Удерживает центрированный диалог в видимой области visual viewport. */
+export declare const useVisualViewportCenter: (enabled: boolean) => VisualViewportCenter | null;