@velumweb/ui-kit 1.0.0

package/dist/index.es.js

@@ -0,0 +1,569 @@
+import se, { useRef as oe, useState as W, useEffect as H, useId as ee } from "react";
+var C = { exports: {} }, N = {};
+var Z;
+function ie() {
+  if (Z) return N;
+  Z = 1;
+  var f = Symbol.for("react.transitional.element"), p = Symbol.for("react.fragment");
+  function k(i, a, l) {
+    var s = null;
+    if (l !== void 0 && (s = "" + l), a.key !== void 0 && (s = "" + a.key), "key" in a) {
+      l = {};
+      for (var m in a)
+        m !== "key" && (l[m] = a[m]);
+    } else l = a;
+    return a = l.ref, {
+      $$typeof: f,
+      type: i,
+      key: s,
+      ref: a !== void 0 ? a : null,
+      props: l
+    };
+  }
+  return N.Fragment = p, N.jsx = k, N.jsxs = k, N;
+}
+var S = {};
+var Q;
+function le() {
+  return Q || (Q = 1, process.env.NODE_ENV !== "production" && (function() {
+    function f(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === te ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case R:
+          return "Fragment";
+        case A:
+          return "Profiler";
+        case y:
+          return "StrictMode";
+        case U:
+          return "Suspense";
+        case O:
+          return "SuspenseList";
+        case re:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case j:
+            return "Portal";
+          case I:
+            return e.displayName || "Context";
+          case w:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case Y:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case P:
+            return t = e.displayName || null, t !== null ? t : f(e.type) || "Memo";
+          case _:
+            t = e._payload, e = e._init;
+            try {
+              return f(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function p(e) {
+      return "" + e;
+    }
+    function k(e) {
+      try {
+        p(e);
+        var t = !1;
+      } catch {
+        t = !0;
+      }
+      if (t) {
+        t = console;
+        var n = t.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          t,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          u
+        ), p(e);
+      }
+    }
+    function i(e) {
+      if (e === R) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === _)
+        return "<...>";
+      try {
+        var t = f(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      var e = F.A;
+      return e === null ? null : e.getOwner();
+    }
+    function l() {
+      return Error("react-stack-top-frame");
+    }
+    function s(e) {
+      if (V.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function m(e, t) {
+      function n() {
+        q || (q = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          t
+        ));
+      }
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
+        configurable: !0
+      });
+    }
+    function v() {
+      var e = f(this.type);
+      return B[e] || (B[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function g(e, t, n, u, $, M) {
+      var d = n.ref;
+      return e = {
+        $$typeof: E,
+        type: e,
+        key: t,
+        props: n,
+        _owner: u
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: v
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: $
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: M
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function x(e, t, n, u, $, M) {
+      var d = t.children;
+      if (d !== void 0)
+        if (u)
+          if (ne(d)) {
+            for (u = 0; u < d.length; u++)
+              b(d[u]);
+            Object.freeze && Object.freeze(d);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else b(d);
+      if (V.call(t, "key")) {
+        d = f(e);
+        var T = Object.keys(t).filter(function(ae) {
+          return ae !== "key";
+        });
+        u = 0 < T.length ? "{key: someKey, " + T.join(": ..., ") + ": ...}" : "{key: someKey}", X[d + u] || (T = 0 < T.length ? "{" + T.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          u,
+          d,
+          T,
+          d
+        ), X[d + u] = !0);
+      }
+      if (d = null, n !== void 0 && (k(n), d = "" + n), s(t) && (k(t.key), d = "" + t.key), "key" in t) {
+        n = {};
+        for (var L in t)
+          L !== "key" && (n[L] = t[L]);
+      } else n = t;
+      return d && m(
+        n,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), g(
+        e,
+        d,
+        n,
+        a(),
+        $,
+        M
+      );
+    }
+    function b(e) {
+      o(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === _ && (e._payload.status === "fulfilled" ? o(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function o(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === E;
+    }
+    var c = se, E = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), w = Symbol.for("react.consumer"), I = Symbol.for("react.context"), Y = Symbol.for("react.forward_ref"), U = Symbol.for("react.suspense"), O = Symbol.for("react.suspense_list"), P = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), re = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), F = c.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, ne = Array.isArray, D = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    c = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var q, B = {}, J = c.react_stack_bottom_frame.bind(
+      c,
+      l
+    )(), G = D(i(l)), X = {};
+    S.Fragment = R, S.jsx = function(e, t, n) {
+      var u = 1e4 > F.recentlyCreatedOwnerStacks++;
+      return x(
+        e,
+        t,
+        n,
+        !1,
+        u ? Error("react-stack-top-frame") : J,
+        u ? D(i(e)) : G
+      );
+    }, S.jsxs = function(e, t, n) {
+      var u = 1e4 > F.recentlyCreatedOwnerStacks++;
+      return x(
+        e,
+        t,
+        n,
+        !0,
+        u ? Error("react-stack-top-frame") : J,
+        u ? D(i(e)) : G
+      );
+    };
+  })()), S;
+}
+var K;
+function ce() {
+  return K || (K = 1, process.env.NODE_ENV === "production" ? C.exports = ie() : C.exports = le()), C.exports;
+}
+var r = ce();
+const h = ({
+  direction: f = "row",
+  align: p = "center",
+  justify: k = "center",
+  wrapContent: i = !1,
+  cls: a = "",
+  gap: l = 8,
+  margin: s = [0],
+  padding: m = [0],
+  parent: v = "div",
+  mask: g = !1,
+  // TODO loader
+  children: x,
+  ...b
+}) => {
+  const o = v, c = s?.map((j) => j + "px").join(" "), E = m?.map((j) => j + "px").join(" ");
+  return /* @__PURE__ */ r.jsx(
+    o,
+    {
+      className: [
+        "kit-box",
+        `kit-box--${f}`,
+        `kit-box--align-${p}`,
+        `kit-box--justify-${k}`,
+        i && "kit-box--wrap",
+        a
+      ].join(" "),
+      style: { gap: `${l}px`, margin: `${c}`, padding: `${E}` },
+      ...b,
+      children: x
+    }
+  );
+}, z = ({
+  type: f = "primary",
+  size: p = "medium",
+  corners: k = "standard",
+  disabled: i = !1,
+  staticIcon: a = !1,
+  cls: l = "",
+  text: s = "",
+  iconPath: m = "",
+  labelAlign: v = "",
+  onClick: g,
+  ...x
+}) => {
+  const b = m != "" && s === "" ? "kit-btn--icon" : "";
+  let o;
+  const c = () => m ? /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      className: "kit-btn--svg",
+      style: {
+        maskImage: `url(assets/${m})`,
+        WebkitMaskImage: `url(assets/${m})`
+      }
+    }
+  ) : null;
+  switch (v) {
+    case "right":
+      o = () => /* @__PURE__ */ r.jsxs(h, { direction: "row", children: [
+        /* @__PURE__ */ r.jsx(c, {}),
+        s
+      ] });
+      break;
+    case "left":
+      o = () => /* @__PURE__ */ r.jsxs(h, { direction: "row", children: [
+        s,
+        /* @__PURE__ */ r.jsx(c, {})
+      ] });
+      break;
+    case "top":
+      o = () => /* @__PURE__ */ r.jsxs(h, { direction: "column", children: [
+        s,
+        /* @__PURE__ */ r.jsx(c, {})
+      ] });
+      break;
+    case "bottom":
+      o = () => /* @__PURE__ */ r.jsxs(h, { direction: "column", children: [
+        /* @__PURE__ */ r.jsx(c, {}),
+        s
+      ] });
+      break;
+    default:
+      o = () => /* @__PURE__ */ r.jsx(h, { direction: "row", children: b ? /* @__PURE__ */ r.jsx(c, {}) : s });
+      break;
+  }
+  return /* @__PURE__ */ r.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: i || !g ? null : g,
+      className: [
+        "kit-btn",
+        `kit-btn--${p}`,
+        `kit-btn--${k}`,
+        `kit-btn--${f}`,
+        i ? "kit-btn--disabled" : "",
+        a ? "kit-icon" : "",
+        b,
+        l
+      ].join(" "),
+      ...x,
+      children: /* @__PURE__ */ r.jsx(o, {})
+    }
+  );
+}, de = ({
+  width: f = "auto",
+  corners: p = "standard",
+  background: k = "blackout",
+  isOpen: i = !1,
+  closeButton: a = !0,
+  title: l = "",
+  cls: s = "",
+  children: m,
+  onClose: v,
+  ...g
+}) => {
+  const x = oe(null), [b, o] = W(i);
+  function c() {
+    o(!1), v && v();
+  }
+  return H(() => {
+    o(i);
+  }, [i]), H(() => {
+    if (!b) return;
+    function E(R) {
+      R.key === "Escape" && c();
+    }
+    document.addEventListener("keydown", E);
+    const j = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = j, document.removeEventListener("keydown", E);
+    };
+  }, [b, c]), /* @__PURE__ */ r.jsx(r.Fragment, { children: b ? /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      className: "kit-modal--overlay",
+      onClick: (E) => {
+        E.target === x.current && c();
+      },
+      ref: x,
+      children: /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: [
+            "kit-modal",
+            `kit-modal--${p}`,
+            `kit-modal--bg-${k}`,
+            s
+          ].join(" "),
+          style: { width: isNaN(f) ? "fit-content" : `${f}px` },
+          ...g,
+          children: /* @__PURE__ */ r.jsxs(h, { padding: [8, 16], direction: "column", children: [
+            /* @__PURE__ */ r.jsx(h, { justify: "end", margin: [0, -16], children: /* @__PURE__ */ r.jsx(
+              z,
+              {
+                type: "transparent",
+                size: "large",
+                onClick: c,
+                iconPath: "svg-lib/cross-svgrepo-com.svg",
+                cls: "kit-modal-close"
+              }
+            ) }),
+            /* @__PURE__ */ r.jsx(h, { justify: "start", children: m })
+          ] })
+        }
+      )
+    }
+  ) : /* @__PURE__ */ r.jsx(r.Fragment, {}) });
+}, fe = ({
+  value: f = "",
+  type: p = "text",
+  corners: k = "standard",
+  disabled: i = !1,
+  label: a = "",
+  bottomText: l = "",
+  placeholder: s = "",
+  errorText: m = "",
+  live: v = !1,
+  isSearch: g = !1,
+  mask: x,
+  width: b,
+  onChange: o,
+  cls: c,
+  ...E
+}) => {
+  const [j, R] = W(f), [y, A] = W(""), w = ee(), I = (P) => {
+    let _ = P.target.value;
+    p === "number" && (_ = _.toString().replace(/\D/g, "")), x && !x.test(_.toString()) ? A(m || "Некорректное значение") : A(""), R(_), v && o && o(_);
+  }, Y = () => {
+    R("");
+  }, O = {
+    value: j,
+    placeholder: s,
+    onChange: I,
+    onBlur: (P) => {
+      !v && o && o(j);
+    },
+    className: [
+      "kit-input",
+      `kit-input--${k}`,
+      i ? "kit-input--disabled" : "",
+      y ? "kit-input--error" : "",
+      c
+    ].join(" ").trim()
+  };
+  return /* @__PURE__ */ r.jsxs("div", { className: "kit-input--wrapper", children: [
+    a && /* @__PURE__ */ r.jsx("div", { className: "w5rem", children: /* @__PURE__ */ r.jsx(
+      "label",
+      {
+        for: w,
+        className: "kit-input--label kit-input-secondary-text",
+        children: a
+      }
+    ) }),
+    /* @__PURE__ */ r.jsxs(
+      "div",
+      {
+        className: "kit-input--container",
+        style: { width: b ? `${b}px` : "auto" },
+        children: [
+          p === "textarea" ? /* @__PURE__ */ r.jsx(
+            "textarea",
+            {
+              id: w,
+              ...O
+            }
+          ) : /* @__PURE__ */ r.jsx(
+            "input",
+            {
+              ...O,
+              type: p,
+              id: w
+            }
+          ),
+          /* @__PURE__ */ r.jsxs("div", { className: "kit-input--icon-container", children: [
+            j && /* @__PURE__ */ r.jsx(
+              z,
+              {
+                type: "transparent",
+                iconPath: "svg-lib/input-svgrepo-com.svg",
+                size: "small",
+                onClick: Y,
+                cls: "kit-input--icon"
+              }
+            ),
+            g && /* @__PURE__ */ r.jsx(
+              z,
+              {
+                type: "transparent",
+                iconPath: "svg-lib/search-svgrepo-com.svg",
+                size: "small",
+                staticIcon: v,
+                onClick: () => o && o(j),
+                cls: "kit-input--icon"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    !y && l && /* @__PURE__ */ r.jsx("div", { className: "kit-input-bottomtext kit-input-secondary-text", children: l }),
+    y && /* @__PURE__ */ r.jsx("div", { className: "kit-input-errortext kit-input-secondary-text", children: y })
+  ] });
+}, me = ({
+  size: f = "medium",
+  disabled: p = !1,
+  cls: k = "",
+  text: i = "",
+  onClick: a,
+  ...l
+}) => {
+  const s = ee();
+  return /* @__PURE__ */ r.jsxs(
+    "label",
+    {
+      htmlFor: s,
+      className: [
+        "kit-toggle",
+        p ? "kit-toggle--disabled" : "",
+        `kit-toggle--${f}`,
+        k
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ r.jsx(
+          "input",
+          {
+            id: s,
+            type: "checkbox",
+            className: "kit-toggle--input",
+            disabled: p,
+            defaultChecked: !1,
+            onChange: (m) => a?.(m.target.checked)
+          }
+        ),
+        /* @__PURE__ */ r.jsx("span", { className: "kit-toggle--slider", "aria-hidden": "true" }),
+        i && /* @__PURE__ */ r.jsx("span", { className: "kit-toggle--label", children: i })
+      ]
+    }
+  );
+};
+export {
+  h as Box,
+  z as Button,
+  fe as Input,
+  de as Modal,
+  me as Toggle
+};

package/dist/index.umd.js

@@ -0,0 +1,6 @@
+(function(E,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],v):(E=typeof globalThis<"u"?globalThis:E||self,v(E.velumUIkit={},E.React))})(this,(function(E,v){"use strict";var A={exports:{}},S={};var B;function ee(){if(B)return S;B=1;var f=Symbol.for("react.transitional.element"),p=Symbol.for("react.fragment");function k(i,a,l){var s=null;if(l!==void 0&&(s=""+l),a.key!==void 0&&(s=""+a.key),"key"in a){l={};for(var m in a)m!=="key"&&(l[m]=a[m])}else l=a;return a=l.ref,{$$typeof:f,type:i,key:s,ref:a!==void 0?a:null,props:l}}return S.Fragment=p,S.jsx=k,S.jsxs=k,S}var O={};var V;function te(){return V||(V=1,process.env.NODE_ENV!=="production"&&(function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ie?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case T:return"Fragment";case I:return"Profiler";case w:return"StrictMode";case G:return"Suspense";case Y:return"SuspenseList";case oe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case g:return"Portal";case $:return e.displayName||"Context";case P:return(e._context.displayName||"Context")+".Consumer";case D:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case F:return r=e.displayName||null,r!==null?r:f(e.type)||"Memo";case y:r=e._payload,e=e._init;try{return f(e(r))}catch{}}return null}function p(e){return""+e}function k(e){try{p(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),p(e)}}function i(e){if(e===T)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===y)return"<...>";try{var r=f(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=L.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function s(e){if(X.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function m(e,r){function n(){H||(H=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function j(){var e=f(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function h(e,r,n,u,M,U){var d=n.ref;return e={$$typeof:_,type:e,key:r,props:n,_owner:u},(d!==void 0?d:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:j}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:M}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function x(e,r,n,u,M,U){var d=r.children;if(d!==void 0)if(u)if(le(d)){for(u=0;u<d.length;u++)b(d[u]);Object.freeze&&Object.freeze(d)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else b(d);if(X.call(r,"key")){d=f(e);var N=Object.keys(r).filter(function(ce){return ce!=="key"});u=0<N.length?"{key: someKey, "+N.join(": ..., ")+": ...}":"{key: someKey}",K[d+u]||(N=0<N.length?"{"+N.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,u,d,N,d),K[d+u]=!0)}if(d=null,n!==void 0&&(k(n),d=""+n),s(r)&&(k(r.key),d=""+r.key),"key"in r){n={};for(var z in r)z!=="key"&&(n[z]=r[z])}else n=r;return d&&m(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),h(e,d,n,a(),M,U)}function b(e){o(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===y&&(e._payload.status==="fulfilled"?o(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function o(e){return typeof e=="object"&&e!==null&&e.$$typeof===_}var c=v,_=Symbol.for("react.transitional.element"),g=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),w=Symbol.for("react.strict_mode"),I=Symbol.for("react.profiler"),P=Symbol.for("react.consumer"),$=Symbol.for("react.context"),D=Symbol.for("react.forward_ref"),G=Symbol.for("react.suspense"),Y=Symbol.for("react.suspense_list"),F=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),oe=Symbol.for("react.activity"),ie=Symbol.for("react.client.reference"),L=c.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,X=Object.prototype.hasOwnProperty,le=Array.isArray,W=console.createTask?console.createTask:function(){return null};c={react_stack_bottom_frame:function(e){return e()}};var H,Z={},Q=c.react_stack_bottom_frame.bind(c,l)(),q=W(i(l)),K={};O.Fragment=T,O.jsx=function(e,r,n){var u=1e4>L.recentlyCreatedOwnerStacks++;return x(e,r,n,!1,u?Error("react-stack-top-frame"):Q,u?W(i(e)):q)},O.jsxs=function(e,r,n){var u=1e4>L.recentlyCreatedOwnerStacks++;return x(e,r,n,!0,u?Error("react-stack-top-frame"):Q,u?W(i(e)):q)}})()),O}var J;function re(){return J||(J=1,process.env.NODE_ENV==="production"?A.exports=ee():A.exports=te()),A.exports}var t=re();const R=({direction:f="row",align:p="center",justify:k="center",wrapContent:i=!1,cls:a="",gap:l=8,margin:s=[0],padding:m=[0],parent:j="div",mask:h=!1,children:x,...b})=>{const o=j,c=s?.map(g=>g+"px").join(" "),_=m?.map(g=>g+"px").join(" ");return t.jsx(o,{className:["kit-box",`kit-box--${f}`,`kit-box--align-${p}`,`kit-box--justify-${k}`,i&&"kit-box--wrap",a].join(" "),style:{gap:`${l}px`,margin:`${c}`,padding:`${_}`},...b,children:x})},C=({type:f="primary",size:p="medium",corners:k="standard",disabled:i=!1,staticIcon:a=!1,cls:l="",text:s="",iconPath:m="",labelAlign:j="",onClick:h,...x})=>{const b=m!=""&&s===""?"kit-btn--icon":"";let o;const c=()=>m?t.jsx("div",{className:"kit-btn--svg",style:{maskImage:`url(assets/${m})`,WebkitMaskImage:`url(assets/${m})`}}):null;switch(j){case"right":o=()=>t.jsxs(R,{direction:"row",children:[t.jsx(c,{}),s]});break;case"left":o=()=>t.jsxs(R,{direction:"row",children:[s,t.jsx(c,{})]});break;case"top":o=()=>t.jsxs(R,{direction:"column",children:[s,t.jsx(c,{})]});break;case"bottom":o=()=>t.jsxs(R,{direction:"column",children:[t.jsx(c,{}),s]});break;default:o=()=>t.jsx(R,{direction:"row",children:b?t.jsx(c,{}):s});break}return t.jsx("button",{type:"button",onClick:i||!h?null:h,className:["kit-btn",`kit-btn--${p}`,`kit-btn--${k}`,`kit-btn--${f}`,i?"kit-btn--disabled":"",a?"kit-icon":"",b,l].join(" "),...x,children:t.jsx(o,{})})},ne=({width:f="auto",corners:p="standard",background:k="blackout",isOpen:i=!1,closeButton:a=!0,title:l="",cls:s="",children:m,onClose:j,...h})=>{const x=v.useRef(null),[b,o]=v.useState(i);function c(){o(!1),j&&j()}return v.useEffect(()=>{o(i)},[i]),v.useEffect(()=>{if(!b)return;function _(T){T.key==="Escape"&&c()}document.addEventListener("keydown",_);const g=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=g,document.removeEventListener("keydown",_)}},[b,c]),t.jsx(t.Fragment,{children:b?t.jsx("div",{className:"kit-modal--overlay",onClick:_=>{_.target===x.current&&c()},ref:x,children:t.jsx("div",{className:["kit-modal",`kit-modal--${p}`,`kit-modal--bg-${k}`,s].join(" "),style:{width:isNaN(f)?"fit-content":`${f}px`},...h,children:t.jsxs(R,{padding:[8,16],direction:"column",children:[t.jsx(R,{justify:"end",margin:[0,-16],children:t.jsx(C,{type:"transparent",size:"large",onClick:c,iconPath:"svg-lib/cross-svgrepo-com.svg",cls:"kit-modal-close"})}),t.jsx(R,{justify:"start",children:m})]})})}):t.jsx(t.Fragment,{})})},ae=({value:f="",type:p="text",corners:k="standard",disabled:i=!1,label:a="",bottomText:l="",placeholder:s="",errorText:m="",live:j=!1,isSearch:h=!1,mask:x,width:b,onChange:o,cls:c,..._})=>{const[g,T]=v.useState(f),[w,I]=v.useState(""),P=v.useId(),$=F=>{let y=F.target.value;p==="number"&&(y=y.toString().replace(/\D/g,"")),x&&!x.test(y.toString())?I(m||"Некорректное значение"):I(""),T(y),j&&o&&o(y)},D=()=>{T("")},Y={value:g,placeholder:s,onChange:$,onBlur:F=>{!j&&o&&o(g)},className:["kit-input",`kit-input--${k}`,i?"kit-input--disabled":"",w?"kit-input--error":"",c].join(" ").trim()};return t.jsxs("div",{className:"kit-input--wrapper",children:[a&&t.jsx("div",{className:"w5rem",children:t.jsx("label",{for:P,className:"kit-input--label kit-input-secondary-text",children:a})}),t.jsxs("div",{className:"kit-input--container",style:{width:b?`${b}px`:"auto"},children:[p==="textarea"?t.jsx("textarea",{id:P,...Y}):t.jsx("input",{...Y,type:p,id:P}),t.jsxs("div",{className:"kit-input--icon-container",children:[g&&t.jsx(C,{type:"transparent",iconPath:"svg-lib/input-svgrepo-com.svg",size:"small",onClick:D,cls:"kit-input--icon"}),h&&t.jsx(C,{type:"transparent",iconPath:"svg-lib/search-svgrepo-com.svg",size:"small",staticIcon:j,onClick:()=>o&&o(g),cls:"kit-input--icon"})]})]}),!w&&l&&t.jsx("div",{className:"kit-input-bottomtext kit-input-secondary-text",children:l}),w&&t.jsx("div",{className:"kit-input-errortext kit-input-secondary-text",children:w})]})},se=({size:f="medium",disabled:p=!1,cls:k="",text:i="",onClick:a,...l})=>{const s=v.useId();return t.jsxs("label",{htmlFor:s,className:["kit-toggle",p?"kit-toggle--disabled":"",`kit-toggle--${f}`,k].join(" "),children:[t.jsx("input",{id:s,type:"checkbox",className:"kit-toggle--input",disabled:p,defaultChecked:!1,onChange:m=>a?.(m.target.checked)}),t.jsx("span",{className:"kit-toggle--slider","aria-hidden":"true"}),i&&t.jsx("span",{className:"kit-toggle--label",children:i})]})};E.Box=R,E.Button=C,E.Input=ae,E.Modal=ne,E.Toggle=se,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})}));

package/dist/ui-kit.css

@@ -0,0 +1 @@
+@charset "UTF-8";.kit-box{margin:0;padding:0;display:flex;width:100%;flex-wrap:nowrap}.kit-box--row{flex-direction:row}.kit-box--column{flex-direction:column}.kit-box--align-top{align-items:flex-start}.kit-box--align-center{align-items:center}.kit-box--align-bottom{align-items:flex-end}.kit-box--justify-start{justify-content:flex-start}.kit-box--justify-end{justify-content:flex-end}.kit-box--justify-center{justify-content:center}.kit-box--justify-space{justify-content:space-between}.kit-box--wrap{flex-wrap:wrap}.kit-btn{display:inline-block;cursor:pointer;border:0;font-weight:700;line-height:1;font-family:var(--font-family);transition:background-color .3s ease;padding:8px 16px}.kit-btn>.kit-box{width:fit-content}.kit-btn:active{transform:translateY(.5px);box-shadow:0 0 5px #0000004d inset}.kit-btn.kit-icon{pointer-events:none}.kit-btn.kit-btn--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-btn--primary{background-color:var(--primary-btn-color);color:var(--secondary-btn-color)}.kit-btn--primary>div>.kit-btn--svg{background-color:var(--secondary-btn-color)}.kit-btn--primary:hover{background-color:var(--hover-btn-color)}.kit-btn--secondary{border:1px var(--primary-btn-color) solid;background-color:transparent;color:var(--primary-btn-color)}.kit-btn--secondary>div>.kit-btn--svg{background-color:var(--primary-btn-color)}.kit-btn--secondary:hover{background-color:var(--hover-btn-color);color:var(--secondary-btn-color);border:1px var(--hover-btn-color) solid}.kit-btn--secondary:hover>div>.kit-btn--svg{background-color:var(--secondary-btn-color)}.kit-btn--transparent{border:none;background-color:transparent;color:var(--primary-btn-color)}.kit-btn--transparent>div>.kit-btn--svg{background-color:var(--primary-btn-color)}.kit-btn--transparent:hover{color:var(--hover-btn-color)}.kit-btn--transparent:hover>div>.kit-btn--svg{background-color:var(--hover-btn-color)}.kit-btn--transparent:active{box-shadow:unset}.kit-btn--small{font-size:12px}.kit-btn--small>div>.kit-btn--svg{width:20px;height:20px}.kit-btn--small:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:16px;height:16px}.kit-btn--small:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:24px;height:24px}.kit-btn--medium{font-size:14px}.kit-btn--medium>div>.kit-btn--svg{width:24px;height:24px}.kit-btn--medium:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:20px;height:20px}.kit-btn--medium:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:28px;height:28px}.kit-btn--large{font-size:16px}.kit-btn--large>div>.kit-btn--svg{width:32px;height:32px}.kit-btn--large:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:24px;height:24px}.kit-btn--large:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:32px;height:32px}.kit-btn--standard{border-radius:var(--corners-standard)}.kit-btn--round{border-radius:var(--corners-round)}.kit-btn--square{border-radius:var(--corners-square)}.kit-btn--icon{padding:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kit-btn--svg{background-repeat:no-repeat;background-position:center;background-size:contain;mask-size:contain;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}.kit-modal--overlay{position:fixed;inset:0;width:100%;height:100%;background:#000c;z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeInOverlay .2s ease-out}.kit-modal{background-color:var(--bg-color);position:relative;max-width:420px;width:100%;min-height:200px;box-shadow:0 10px 30px #00000026;animation:fadeInModal .2s ease-out}.kit-modal>div{width:auto}.kit-modal-close{margin:-4px -16px 0 0}.kit-modal--standard{border-radius:var(--corners-standard)}.kit-modal--round{border-radius:var(--corners-round)}.kit-modal--square{border-radius:var(--corners-square)}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes fadeInModal{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.kit-input--container{display:flex;line-height:30px;align-items:center;position:relative}.kit-input{width:100%;height:36px;line-height:30px;padding:0 .6rem;border:1px solid var(--primary-btn-color);outline:none;background-color:#efefef;color:var(--text-color);transition:.3s ease}.kit-input.kit-input--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-input--error{border:1px solid var(--error-color)}.kit-input--standard{border-radius:var(--corners-standard)}.kit-input--round{border-radius:var(--corners-round)}.kit-input--square{border-radius:var(--corners-square)}.kit-input-secondary-text{font-size:12px;line-height:24px;margin-left:.8rem}.kit-input::placeholder,.kit-input-bottomtext{color:var(--text-color-secondary)}.kit-input-errortext{color:var(--error-color)}.kit-input--label{color:var(--text-color)}.kit-input:focus,.kit-input:hover{outline:none}.kit-input--icon-container{position:absolute;right:.4rem;fill:none;display:flex}.kit-input--icon{padding:4px}:root{--font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;--text-color: #2e3242;--text-color-secondary: #94a3b8;--error-color: #ef4949;--bg-color: #fff;--primary-btn-color: #7C3AED;--secondary-btn-color: #FFFFFF;--hover-btn-color: #6D28D9;--corners-standard: .65em;--corners-round: 3em;--corners-square: 0}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.kit-toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:system-ui,sans-serif}.kit-toggle--input{position:absolute;opacity:0;pointer-events:none}.kit-toggle--slider{position:relative;border-radius:999px;transition:background .25s ease;background:#d1d5db}.kit-toggle--slider:before{content:"";position:absolute;top:3px;left:3px;border-radius:50%;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 2px 6px #00000026;background:#fff}.kit-toggle--input:checked+.kit-toggle--slider{background:var(--primary-btn-color)}.kit-toggle--input:checked+.kit-toggle--slider:before{transform:translate(20px)}.kit-toggle--input:focus-visible+.kit-toggle--slider{outline:2px solid var(--primary-btn-color);outline-offset:2px}.kit-toggle--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-toggle--disabled .kit-toggle--slider{background:#9ca3af}.kit-toggle--label{color:var(--text-color)}.kit-toggle--small>.kit-toggle--slider{width:38px;height:18px}.kit-toggle--small>.kit-toggle--slider:before{width:12px;height:12px}.kit-toggle--small>.kit-toggle--label{font-size:14px}.kit-toggle--medium>.kit-toggle--slider{width:42px;height:22px}.kit-toggle--medium>.kit-toggle--slider:before{width:16px;height:16px}.kit-toggle--medium>.kit-toggle--label{font-size:16px}.kit-toggle--large>.kit-toggle--slider{width:46px;height:26px}.kit-toggle--large>.kit-toggle--slider:before{width:20px;height:20px}.kit-toggle--large>.kit-toggle--label{font-size:18px}

package/docs/Button/Button.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Компонент кнопки
+ * - разные состояния
+ * - разные типы
+ * - разные размеры
+ * - разные углы
+ * - добавление иконки
+ */
+export interface ButtonProps {
+    /** Основная / Только текст / Вспомогательная */
+    type: 'primary' | 'transparent' | 'secondary';
+    /** Маленькая / Средняя / Большая */
+    size?: 'small' | 'medium' | 'large';
+    /** Углы прямые / Закругленные / Круглые */
+    corners?: 'square' | 'standard' | 'round';
+    /** Доступность кнопки */
+    disabled?: boolean;
+    /** Текст кнопки */
+    text?: string;
+    /** Событие при нажатии */
+    onClick?: (e?: MouseEvent) => void;
+    /** Дополнительные классы */
+    cls?: string;
+    /** Путь до иконки из assets */
+    iconPath?: string;
+    /** Расположение текста относительно иконки */
+    labelAlign?: 'right' | 'left' | 'bottom' | 'top';
+    /** Это просто информационная иконка */
+    staticIcon?: boolean;
+}
+/** Элемент кнопки */
+export declare const Button: ({ type, size, corners, disabled, staticIcon, cls, text, iconPath, labelAlign, onClick, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/docs/Button/Button.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ type, size, corners, disabled, staticIcon, cls, text, iconPath, labelAlign, onClick, ...props }: import('./Button').ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    decorators: ((Story: any) => any)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CustomButton: Story;
+export declare const IconButton: Story;
+export declare const Icon: Story;

package/docs/Button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/docs/CNAME

@@ -0,0 +1 @@
+uikit.velumweb.ru