triafly-ui-kit 1.0.23 → 1.0.24

package/dist/assets/Pagination.css

@@ -0,0 +1 @@
+.Pagination__Wrap{display:flex;align-items:center;justify-content:center}.pagination{display:flex;list-style:none;padding:0}.page-item{margin:0 8px 0 0}.page-item:last-of-type{margin:0}.page-link{cursor:pointer;border-radius:6px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--color-text-primary-default)}.page-link:hover{background-color:var(--color-bg-brand-lightest-default);color:var(--color-text-brand-default)}.active .page-link{background-color:var(--color-bg-brand-default);color:var(--light-color-static)}.page-toggler.disabled .page-link{pointer-events:none}.page-toggler.disabled .page-link svg *{fill:var(--color-icon-secondary-default)}.page-toggler .page-link:hover{background-color:transparent}.page-toggler .page-link:hover svg *{fill:var(--color-icon-brand-default)}

package/dist/assets/Radio.css

@@ -0,0 +1 @@
+.radio{display:flex;align-items:center}.radio:not(:last-child){margin:0 0 8px}.radio.disabled{cursor:default;opacity:40%}.radio input[type=radio]{display:none}.radio input[type=radio]:checked+.checkmark{border:5px solid var(--color-bg-brand-default)}.radio .radio-label{display:flex;align-items:center;cursor:pointer}.radio .radio-label .test{line-height:16.8px}.radio .checkmark{box-sizing:border-box;position:relative;display:block;width:20px;height:20px;border-radius:50%;border:1px solid var(--color-border-primary-default);background-color:var(--color-bg-neutral-basic-default);margin-right:8px;transition:.04s;-webkit-user-select:none;user-select:none}

package/dist/assets/SearchInput.css

@@ -0,0 +1 @@
+.search-input{border:1px solid var(--color-border-primary-default);border-radius:22px;margin:0 12px 0 0}.search-input:focus-within{border:2px solid var(--color-border-primary-default);margin:0 11px 0 -1px}.search-input:focus-within .text-input .input-container input{margin:-1px}.search-input .text-input .input-container input{border:none}.search-input .text-input .input-container input:focus{outline:none}.search-input__label{margin:0 0 8px}.search-input .guess-box{padding:0 12px 12px}.search-input .guess-box ul{border-top:1px solid var(--color-border-primary-default);padding:12px 0 0}.search-input .guess-box ul li{min-height:36px;display:flex;align-items:center;padding:0 8px;cursor:pointer}.search-input .guess-box ul li:hover{background-color:var(--color-bg-innerisland-default)}.dropdown-input-test{position:relative}.dropdown-input-test .caret{fill:var(--color-icon-secondary-default);position:absolute;bottom:9px;right:10px}.dropdown-input-test .input-box{position:relative;cursor:pointer;display:flex;justify-content:space-between;align-items:center;outline:none;background-color:var(--color-bg-neutral-basic-default)}.dropdown-input-test .input-box.disabled{background-color:var(--color-bg-island-disabled);pointer-events:none}.dropdown-input-test .input-box.invalid{border-color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid>span{color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid svg *{fill:var(--color-border-error-default)}.dropdown-input-test .input-box .placeholder{color:var(--color-text-secondary-default)}.dropdown-input-test .options{position:absolute;top:100%;bottom:auto;left:1%;right:1%;max-height:304px;overflow-y:auto;overflow-x:hidden;background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);margin:1px -1px 0;z-index:21}.dropdown-input-test .options.above{bottom:calc(100% + 1px);top:auto}.dropdown-input-test .options li{padding:0 8px;min-height:36px;cursor:pointer;display:flex;align-items:center}.dropdown-input-test .options li:hover,.dropdown-input-test .options li.dropdown-input__option--selected{background-color:var(--color-bg-neutral-lightest-default)}

package/dist/assets/Skeleton.css

@@ -0,0 +1 @@
+._skeleton_yatxz_1{display:inline-block;background-color:var(--color-bg-island-selected)}._animated_yatxz_6{background:linear-gradient(90deg,var(--color-bg-island-selected) 25%,var(--color-bg-island-selected) 50%,var(--color-bg-island-selected) 75%);background-size:200% 100%;animation:_skeleton-loading_yatxz_1 1.5s infinite linear}@keyframes _skeleton-loading_yatxz_1{0%{background-position:200% 0}to{background-position:-200% 0}}

package/dist/assets/Switch.css

@@ -0,0 +1 @@
+.switch-container:not(:last-child){margin:0 0 12px}.switch-container label{display:flex;align-items:center;justify-content:space-between}.switch input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.switch{display:inline-flex;align-items:center;line-height:16.8px;cursor:pointer;-webkit-user-select:none;user-select:none}.switch.disabled{opacity:50%;cursor:default}.switch input[type=checkbox]+.slider{display:flex;align-items:center;width:43px;height:24px;border:1px solid var(--color-bg-brand-default);border-radius:12px;transition:all .2s;margin:0 0 0 8px}.switch input[type=checkbox]+.slider:after{content:"";display:block;width:18px;height:18px;border-radius:50%;background-color:var(--color-bg-brand-default);margin:0 2px;transition:all .2s}.switch input[type=checkbox]:checked+.slider{background-color:var(--color-bg-brand-default);border-color:var(--color-bg-brand-default)}.switch input[type=checkbox]:checked+.slider:after{background-color:var(--light-color-static);margin:0 0 0 20px}

package/dist/assets/Table.css

@@ -0,0 +1 @@
+.table-component{width:100%;overflow:auto;position:relative}.table-component__wrapper{width:100%}.table-component__wrapper.bordered{border:1px solid var(--color-border-primary-default);border-radius:8px}.table-component__wrapper__table{width:100%;border-collapse:separate;border-spacing:0}.table-component__wrapper__table.bordered{border:none}.table-component__wrapper__table__thead{background-color:var(--color-bg-innerisland-default);height:41px}.table-component__wrapper__table__thead.stickyHeader{position:sticky;top:0;z-index:10}.table-component__wrapper__table__thead__tr:hover{background-color:var(--color-bg-island-selected)}.table-component__wrapper__table__thead__th{padding:12px;text-align:left;position:relative}.table-component__wrapper__table__thead__th.bordered{border-left:1px solid var(--color-border-primary-default);border-bottom:none}.table-component__wrapper__table__thead__th.bordered:first-child{border-left:none}.table-component__wrapper__table__thead__th.stickyLeft{position:sticky;left:0;background-color:inherit;z-index:9}.table-component__wrapper__table__thead__th .th-content{display:flex;align-items:center;gap:4px}.table-component__wrapper__table__thead__th .sort-icon{display:inline-flex}.table-component__wrapper__table__tbody__tr:hover{background-color:var(--color-bg-island-selected)}.table-component__wrapper__table__tbody--hoverable{cursor:pointer}.table-component__wrapper__table__tbody__td{padding:12px}.table-component__wrapper__table__tbody__td--bordered{border-top:1px solid var(--color-border-primary-default);border-left:1px solid var(--color-border-primary-default)}.table-component__wrapper__table__tbody__td--bordered:first-child{border-left:none}.table-component__wrapper__table__tbody__td--sticky-left{position:sticky;left:0;background-color:inherit;z-index:8}.table-component__wrapper.borderBottom .table-component__wrapper__table__tbody td{border-bottom:1px solid var(--color-border-primary-default)}

package/dist/assets/Tabs.css

@@ -0,0 +1 @@
+.tabs .tabs-bar{display:flex}.tabs .tab-button{padding:0 8px 4px;display:flex;justify-content:center;align-items:center;border:none;border-bottom:1px solid var(--color-border-primary-default);background-color:transparent;cursor:pointer}.tabs .tab-button:first-of-type{padding:0 8px 4px 0}.tabs .tab-button:last-of-type{padding:0 0 4px 8px}.tabs .tab-button:hover,.tabs .tab-button.active{color:var(--color-border-brand-default);border-bottom:1px solid var(--color-border-brand-default)}.tabs .tab-button.disabled{pointer-events:none}

package/dist/assets/TextInput.css

@@ -0,0 +1 @@
+.text-input{display:flex;flex-direction:column}.text-input label{margin:0 0 8px}.text-input .input-container{display:flex;position:relative;z-index:0}.text-input .input-container.has-icon input{padding:10px 8px 10px 36px}.text-input .input-container.has-icon input:active,.text-input .input-container.has-icon input:focus{padding:9px 7px 9px 35px}.text-input .input-container.has-icon .icon{position:absolute;left:8px;top:calc(50% - 10px);z-index:2}.text-input .input-container.has-icon .icon *{fill:var(--color-icon-secondary-default)}.text-input .input-container input{border:1px solid var(--color-border-primary-default);border-radius:8px;height:44px;padding:10px 8px;outline:none;background-color:var(--color-bg-neutral-basic-default);z-index:1;flex-grow:1;color:var(--color-text-primary-default)}.text-input .input-container input[disabled]{background-color:var(--color-bg-island-disabled);pointer-events:none}.text-input .input-container input::placeholder{color:var(--color-text-secondary-default)}.text-input .input-container input:active,.text-input .input-container input:focus{border:2px solid var(--color-border-primary-default);padding:9px 7px}.text-input .input-container input.has-icon{padding:10px 8px 10px 36px}.text-input.sm.rounded input{border-radius:18px}.text-input.sm .input-container input{height:36px}.text-input.rounded input{border-radius:22px}.text-input.invalid input,.text-input.invalid input:active,.text-input.invalid input:focus{border-color:var(--color-border-error-default);color:var(--color-border-error-default)}.text-input.invalid .icon *{fill:var(--color-border-error-default)!important}.text-input.invalid .helper-text{color:var(--color-border-error-default)}.text-input.clearable input{padding-right:36px!important}.text-input.clearable .clear-value{position:absolute;right:8px;top:calc(50% - 10px);cursor:pointer;z-index:1;height:20px}.text-input.clearable .clear-value *{fill:var(--color-icon-secondary-default)}.text-input .helper-text{font-size:12px;color:var(--color-text-secondary-default);margin:8px 0 0}.text-input .loader{position:absolute;right:8px;top:calc(50% - 10px)}.text-input .loader *{fill:var(--color-icon-secondary-default)}

package/dist/assets/TextareaInput.css

@@ -0,0 +1 @@
+@font-face{font-family:Roboto Slab;src:url(../assets/fonts/RobotoSlab-SemiBold.ttf) format("truetype");font-weight:600}@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-Regular.ttf) format("truetype");font-weight:400}@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-Semibold.ttf) format("truetype");font-weight:600}@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-Bold.ttf) format("truetype");font-weight:700}@font-face{font-family:Fira Code;src:url(../assets/fonts/FiraCode-Regular.ttf) format("truetype");font-weight:400}*{font-family:Manrope,sans-serif;font-size:14px;line-height:1.2em;letter-spacing:.02em;font-weight:400;color:var(--color-text-primary-default)}h1,h2,h3,h4,h5,h6{margin:0}a{color:var(--color-text-brand-default);text-decoration:none}a:hover{color:var(--color-text-brand-hover)}a[href=""]{opacity:40%;cursor:default;pointer-events:none}p:not(:last-child){margin:0 0 8px}.textarea-input{display:flex;flex-direction:column;resize:none}.textarea-input label{margin:0 0 8px}.textarea-input .char-limit{text-align:right;margin-top:8px;font-size:12px;font-weight:400;color:var(--color-text-secondary-default)}.textarea-input .textarea-wrapper{position:relative}.textarea-input textarea{border:1px solid var(--color-border-primary-default);border-radius:8px;padding:10.5px 8px;color:var(--color-text-primary-default);max-width:100%;min-width:100%;min-height:64px;resize:both;background-color:var(--color-bg-neutral-basic-default);font-size:14px;font-weight:400}.textarea-input textarea[disabled]{background-color:var(--color-bg-island-disabled);pointer-events:none}.textarea-input textarea::placeholder{color:var(--color-text-secondary-default)}.textarea-input textarea:focus{border:2px solid var(--color-border-primary-default);padding:9.5px 7px}.textarea-input textarea.no-resize{resize:none}.textarea-input .helper-text{font-size:12px;color:var(--color-text-secondary-default);margin:8px 0 0}.textarea-input.invalid textarea{border-color:var(--color-border-error-default);color:var(--color-border-error-default)}.textarea-input.invalid svg *{fill:var(--color-border-error-default)}.textarea-input.invalid .helper-text{color:var(--color-border-error-default)}.textarea-input.clearable textarea{padding-right:36px!important}.textarea-input.clearable .clear-value{position:absolute;right:8px;top:8px;cursor:pointer;z-index:1;height:20px}.textarea-input.clearable .clear-value *{fill:var(--color-icon-secondary-default)}

package/dist/assets/ToastContext.css

@@ -0,0 +1 @@
+._Wrapper_12sk9_1{position:fixed;bottom:20px;right:20px;z-index:101;display:flex;flex-direction:column;gap:10px}._Toast_12sk9_11{color:var(--color-text-primary-inversed);padding:20px 24px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;min-width:250px;max-width:400px;font-size:16px;box-shadow:0 6px 15px -2px var(--effect-shadow-L, rgba(18, 18, 18, .08));animation:_fadeIn_12sk9_1 .5s ease-in-out;background-color:var(--color-bg-neutral-basic-inversed)}@keyframes _fadeIn_12sk9_1{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

package/dist/assets/Tooltip.css

@@ -0,0 +1 @@
+._container_193w2_1{position:relative;width:100%;height:100vh;padding:20px;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:space-between;border:1px dashed #ccc;box-sizing:border-box}._trigger_193w2_14{padding:8px 16px;background-color:#1976d2;color:#fff;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s;text-align:center}._trigger_193w2_14:hover{background-color:#1565c0}._clickTrigger_193w2_29{background-color:#388e3c}._clickTrigger_193w2_29:hover{background-color:#2e7d32}._positionsContainer_193w2_38{padding:20px}._positionGroup_193w2_42{display:flex;gap:20px;margin-bottom:30px;justify-content:center;flex-wrap:wrap}

package/dist/assets/Tooltip2.css

@@ -0,0 +1 @@
+.tooltip-wrapper{position:relative;display:inline-block;cursor:pointer}.tooltip-content{position:absolute;background-color:var(--color-bg-brand-default);color:var(--light-color-static);padding:12px 16px;border-radius:8px;z-index:9999;width:max-content;max-width:300px;white-space:normal;text-align:center}.tooltip-content:after{content:"";position:absolute;border-width:5px;border-style:solid}.tooltip-content.white{background-color:var(--color-bg-neutral-basic-default);color:var(--color-text-primary-default);box-shadow:0 0 10px -2px var(--effects-effect-shadow-XL, rgba(18, 18, 18, .15))}.tooltip-content.white.tooltip-top:after{border-color:var(--color-bg-neutral-basic-default) transparent transparent transparent}.tooltip-content.white.tooltip-bottom:after{border-color:transparent transparent var(--color-bg-neutral-basic-default) transparent}.tooltip-content.white.tooltip-left:after{border-color:transparent transparent transparent var(--color-bg-neutral-basic-default)}.tooltip-content.white.tooltip-right:after{border-color:transparent var(--color-bg-neutral-basic-default) transparent transparent}.tooltip-top{bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-top:after{top:100%;left:50%;transform:translate(-50%);border-color:var(--color-bg-brand-default) transparent transparent transparent}.tooltip-bottom{top:calc(100% + 8px);left:50%;transform:translate(-50%)}.tooltip-bottom:after{bottom:100%;left:50%;transform:translate(-50%);border-color:transparent transparent var(--color-bg-brand-default) transparent}.tooltip-left{top:50%;right:calc(100% + 8px);transform:translateY(-50%)}.tooltip-left:after{top:50%;left:100%;transform:translateY(-50%);border-color:transparent transparent transparent var(--color-bg-brand-default)}.tooltip-right{top:50%;left:calc(100% + 8px);transform:translateY(-50%)}.tooltip-right:after{top:50%;right:100%;transform:translateY(-50%);border-color:transparent var(--color-bg-brand-default) transparent transparent}

package/dist/components/Ui/Accordeon/Accordeon.js

@@ -0,0 +1,33 @@
+import { jsxs as s, jsx as c } from "react/jsx-runtime";
+import { useState as m, useRef as p } from "react";
+import '../../../assets/Accordeon.css';const f = ({
+  title: o,
+  content: r,
+  openTitle: i,
+  closeTitle: l
+}) => {
+  var n;
+  const [e, a] = m(!1), t = p(null), d = () => {
+    a(!e);
+  };
+  return /* @__PURE__ */ s("div", { className: "accordeon", children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: "content-wrapper",
+        style: {
+          maxHeight: e ? `${(n = t.current) == null ? void 0 : n.scrollHeight}px` : "0px",
+          transition: "max-height 0.3s ease-out"
+        },
+        children: /* @__PURE__ */ c("div", { className: "content", ref: t, children: r })
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: "title", onClick: d, children: [
+      o,
+      e ? l : i
+    ] })
+  ] });
+};
+export {
+  f as Accordeon
+};

package/dist/components/Ui/Accordeon/Accordeon.stories.js

@@ -0,0 +1,72 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { Accordeon as r } from "./Accordeon.js";
+const s = {
+  title: "UIKit/Accordeon",
+  // Название группы историй
+  component: r,
+  // Компонент, для которого создаются истории
+  tags: ["autodocs"],
+  // Автоматическая генерация документации
+  argTypes: {
+    title: {
+      control: "text",
+      // Позволяет редактировать заголовок в интерфейсе Storybook
+      description: "Заголовок аккордеона"
+    },
+    content: {
+      control: "text",
+      // Позволяет редактировать контент в интерфейсе Storybook
+      description: "Контент аккордеона"
+    }
+  }
+}, c = {
+  args: {
+    title: "Заголовок аккордеона!",
+    content: "Это контент аккордеона. Он может быть текстом, компонентом или чем угодно."
+  }
+}, d = {
+  args: {
+    ...c.args
+    // Используем аргументы из Default
+  },
+  decorators: [
+    (n) => /* @__PURE__ */ t("div", { style: { width: "300px" }, children: /* @__PURE__ */ t(n, {}) })
+  ],
+  parameters: {
+    // Открываем аккордеон по умолчанию
+    docs: {
+      source: {
+        code: "<Accordeon title='Заголовок' content='Контент аккордеона' isOpen={true} />"
+      }
+    }
+  }
+}, a = {
+  args: {
+    title: "Аккордеон с HTML",
+    content: /* @__PURE__ */ e("div", { children: [
+      /* @__PURE__ */ t("h3", { children: "Заголовок внутри контента" }),
+      /* @__PURE__ */ t("p", { children: "Этот аккордеон содержит HTML-контент." }),
+      /* @__PURE__ */ e("ul", { children: [
+        /* @__PURE__ */ t("li", { children: "Пункт 1" }),
+        /* @__PURE__ */ t("li", { children: "Пункт 2" }),
+        /* @__PURE__ */ t("li", { children: "Пункт 3" })
+      ] })
+    ] })
+  }
+}, h = {
+  args: {
+    title: "Аккордеон с длинным контентом",
+    content: Array.from({ length: 10 }, (n, o) => /* @__PURE__ */ e("p", { children: [
+      "Это строка номер ",
+      o + 1,
+      " в длинном контенте."
+    ] }, o))
+  }
+};
+export {
+  c as Default,
+  d as Opened,
+  a as WithHTMLContent,
+  h as WithLongContent,
+  s as default
+};

package/dist/components/Ui/Accordeon/index.js

@@ -0,0 +1,4 @@
+import { Accordeon as c } from "./Accordeon.js";
+export {
+  c as Accordeon
+};

package/dist/components/Ui/Alert/Alert.js

@@ -0,0 +1,14 @@
+import { jsx as n, Fragment as s, jsxs as m } from "react/jsx-runtime";
+import '../../../assets/Alert.css';const o = ({
+  text: r,
+  icon: e,
+  status: t,
+  isMultiline: i,
+  isOpen: l
+}) => l ? /* @__PURE__ */ m("div", { className: `alert ${t} ${i ? "multiline" : ""}`, children: [
+  e,
+  r
+] }) : /* @__PURE__ */ n(s, {});
+export {
+  o as Alert
+};

package/dist/components/Ui/Alert/index.js

@@ -0,0 +1,4 @@
+import { Alert as o } from "./Alert.js";
+export {
+  o as Alert
+};

package/dist/components/Ui/Avatar/Avatar.js

@@ -0,0 +1,10 @@
+import { jsx as a } from "react/jsx-runtime";
+import '../../../assets/Avatar.css';const c = ({ imageUrl: s, username: i }) => /* @__PURE__ */ a("div", { className: "avatar", children: s ? /* @__PURE__ */ a("img", { src: s, alt: i, className: "avatar-image" }) : /* @__PURE__ */ a("div", { className: "avatar-initials", children: ((r) => {
+  if (!r) return "";
+  const t = r.split(" ");
+  let e = t[0].substring(0, 1).toUpperCase();
+  return t.length > 1 && (e += t[t.length - 1].substring(0, 1).toUpperCase()), e;
+})(i) }) });
+export {
+  c as Avatar
+};

package/dist/components/Ui/Avatar/index.js

@@ -0,0 +1,4 @@
+import { Avatar as o } from "./Avatar.js";
+export {
+  o as Avatar
+};

package/dist/components/Ui/Badge/Badge.js

@@ -0,0 +1,43 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { c as d } from "../../../index-2QXL0WYc.js";
+import '../../../assets/Badge.css';const m = "_badge_mb34a_3", r = "_outline_mb34a_20", u = "_solid_mb34a_25", g = "_subtle_mb34a_30", k = "_done_mb34a_40", p = "_success_mb34a_41", f = "_warning_mb34a_46", v = "_error_mb34a_51", N = "_active_mb34a_56", w = "_blocked_mb34a_61", x = "_icon_mb34a_66", h = "_clickable_mb34a_73", s = {
+  badge: m,
+  outline: r,
+  solid: u,
+  subtle: g,
+  default: "_default_mb34a_35",
+  done: k,
+  success: p,
+  warning: f,
+  error: v,
+  active: N,
+  blocked: w,
+  icon: x,
+  clickable: h
+}, B = ({
+  children: _,
+  variant: n = "outline",
+  status: l = "default",
+  iconLeft: c,
+  iconRight: a,
+  isClickable: e = !1,
+  onClick: t,
+  borderRadius: b
+}) => /* @__PURE__ */ i(
+  "span",
+  {
+    className: d(s.badge, s[n], s[l], {
+      [s.clickable]: e
+    }),
+    onClick: e ? t : void 0,
+    style: { borderRadius: b },
+    children: [
+      c && /* @__PURE__ */ o("span", { className: s.icon, children: c }),
+      _,
+      a && /* @__PURE__ */ o("span", { className: s.icon, children: a })
+    ]
+  }
+);
+export {
+  B as Badge
+};

package/dist/components/Ui/Badge/index.js

@@ -0,0 +1,4 @@
+import { Badge as r } from "./Badge.js";
+export {
+  r as Badge
+};

package/dist/components/Ui/Button/Button.js

@@ -0,0 +1,49 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { useNavigate as N } from "react-router-dom";
+import { Loader as v } from "../Loader/Loader.js";
+import '../../../assets/Button.css';const i = () => /* @__PURE__ */ t("svg", { className: "arrow", width: "12", height: "10", fill: "none", children: /* @__PURE__ */ t(
+  "path",
+  {
+    d: "M11.9999 5c0 .13261-.0527.25979-.1464.35356-.0938.09376-.221.14644-.3536.14644H1.70678l3.64688 3.64625c.04645.04646.0833.10161.10844.1623.02514.0607.03808.12576.03808.19145 0 .0657-.01294.13075-.03808.19145-.02514.0607-.06199.11585-.10844.1623-.04646.04646-.10161.08331-.16231.10845-.06069.02514-.12575.0381-.19144.0381-.0657 0-.13076-.01296-.19145-.0381-.0607-.02514-.11585-.06199-.16231-.10845l-4.499995-4.5c-.0464882-.04643-.0833677-.10158-.1085298-.16228C.012463 5.13077-.00048828 5.06571-.00048828 5c0-.0657.01295128-.13077.03811348-.19147.0251621-.0607.0620416-.11584.1085298-.16228L4.64615.146253c.09382-.09382.22107-.14652766.35376-.14652766.13268 0 .25993.05270766.35375.14652766.09382.093821.14652.221068.14652.35375 0 .132682-.0527.25993-.14652.35375L1.70678 4.5h9.79312c.1326 0 .2598.05268.3536.14645.0937.09377.1464.22094.1464.35355Z",
+    fill: "#fff"
+  }
+) }), $ = ({
+  label: c,
+  style: o,
+  onClick: e,
+  isDisabled: d,
+  title: h,
+  className: m = "",
+  isLoading: l,
+  navigation: n,
+  type: f = "button",
+  icon: s,
+  iconTail: a,
+  to: r
+}) => {
+  const b = N(), p = () => {
+    e && e(), r && b(`${r}`);
+  };
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      style: o,
+      className: `btn ${m} ${l ? "loading" : ""}`,
+      title: h,
+      onClick: p,
+      disabled: d,
+      type: f,
+      children: [
+        s && /* @__PURE__ */ t("div", { className: "icon", children: s }),
+        n === "back" && /* @__PURE__ */ t(i, {}),
+        c && /* @__PURE__ */ t("span", { className: "btn-label", children: c }),
+        l && /* @__PURE__ */ t(v, {}),
+        a && /* @__PURE__ */ t("div", { className: "icon-tail", children: a }),
+        n === "next" && /* @__PURE__ */ t(i, {})
+      ]
+    }
+  );
+};
+export {
+  $ as Button
+};

package/dist/components/Ui/Button/index.js

@@ -0,0 +1,4 @@
+import { Button as r } from "./Button.js";
+export {
+  r as Button
+};

package/dist/components/Ui/ButtonsArray/ButtonsArray.js

@@ -0,0 +1,28 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useState as u } from "react";
+import '../../../assets/ButtonsArray.css';const p = ({
+  tabs: i,
+  label: a,
+  initialActiveTab: l = 0,
+  onChange: c
+}) => {
+  const [n, o] = u(l), r = (s, t) => {
+    o(s), c && c(t);
+  };
+  return /* @__PURE__ */ d("div", { className: "buttons", children: [
+    a && /* @__PURE__ */ e("span", { className: "buttons-label", children: a }),
+    /* @__PURE__ */ e("div", { className: "buttons-bar", children: i.map((s, t) => /* @__PURE__ */ e(
+      "button",
+      {
+        disabled: s.disabled,
+        onClick: () => r(t, s.key),
+        className: `button ${t === n ? "active" : ""} status-${s.status}`,
+        children: s.label
+      },
+      s.key
+    )) })
+  ] });
+};
+export {
+  p as ButtonsArray
+};

package/dist/components/Ui/ButtonsArray/ButtonsArray.stories.js

@@ -0,0 +1,78 @@
+import { ButtonsArray as e } from "./ButtonsArray.js";
+const a = {
+  title: "UIKit/ButtonsArray",
+  component: e,
+  tags: ["autodocs"],
+  argTypes: {
+    initialActiveTab: {
+      control: { type: "number", min: 0 }
+    },
+    onChange: { action: "tabChanged" }
+  }
+}, l = {
+  args: {
+    tabs: [
+      { label: "All", key: "all" },
+      { label: "Active", key: "active" },
+      { label: "Completed", key: "completed" }
+    ],
+    label: "Filter tasks:"
+  }
+}, s = {
+  args: {
+    label: "Document status:",
+    tabs: [
+      { label: "Draft", key: "draft", status: "none" },
+      { label: "In Review", key: "review", status: "warning" },
+      { label: "Rejected", key: "rejected", status: "error" },
+      { label: "Approved", key: "approved", status: "success" }
+    ]
+  }
+}, o = {
+  args: {
+    tabs: [
+      { label: "First", key: "first" },
+      { label: "Second", key: "second" },
+      { label: "Third", key: "third" }
+    ],
+    initialActiveTab: 1
+  }
+}, b = {
+  args: {
+    label: "Account type:",
+    tabs: [
+      { label: "Basic", key: "basic" },
+      { label: "Premium", key: "premium", disabled: !0 },
+      { label: "Enterprise", key: "enterprise" }
+    ]
+  }
+}, r = {
+  args: {
+    tabs: [
+      { label: "Yes", key: "yes" },
+      { label: "No", key: "no" }
+    ]
+  }
+}, i = {
+  args: {
+    label: "Categories:",
+    tabs: [
+      { label: "Electronics", key: "electronics" },
+      { label: "Clothing", key: "clothing" },
+      { label: "Home", key: "home" },
+      { label: "Sports", key: "sports" },
+      { label: "Books", key: "books" },
+      { label: "Toys", key: "toys" },
+      { label: "Beauty", key: "beauty" }
+    ]
+  }
+};
+export {
+  l as Default,
+  b as DisabledTabs,
+  i as ManyTabs,
+  r as SmallSelection,
+  o as WithInitialActiveTab,
+  s as WithStatusIndicators,
+  a as default
+};

package/dist/components/Ui/ButtonsArray/index.js

@@ -0,0 +1,4 @@
+import { ButtonsArray as t } from "./ButtonsArray.js";
+export {
+  t as ButtonsArray
+};

package/dist/components/Ui/Checkbox/Checkbox.js

@@ -0,0 +1,39 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { useRef as f, useEffect as h } from "react";
+import '../../../assets/Checkbox.css';const i = ({
+  label: s,
+  isDisabled: a,
+  isChecked: o = !1,
+  isIndeterminate: e = !1,
+  onChange: l,
+  name: n = "Checkbox"
+}) => {
+  const c = f(null);
+  return h(() => {
+    c.current && (c.current.indeterminate = e);
+  }, [e]), /* @__PURE__ */ r("div", { className: "checkbox-container", children: /* @__PURE__ */ t(
+    "label",
+    {
+      className: `checkbox ${a ? "disabled" : ""} ${e ? "indeterminate" : ""}`,
+      children: [
+        /* @__PURE__ */ r(
+          "input",
+          {
+            ref: c,
+            name: n,
+            type: "checkbox",
+            checked: o,
+            onChange: l,
+            disabled: a
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: "checkmark" }),
+        s
+      ]
+    }
+  ) });
+};
+i.displayName = "Checkbox";
+export {
+  i as Checkbox
+};

package/dist/components/Ui/Checkbox/Checkbox.stories.js

@@ -0,0 +1,120 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Checkbox as i } from "./Checkbox.js";
+const k = {
+  title: "UIKit/Checkbox",
+  component: i,
+  tags: ["autodocs"],
+  argTypes: {
+    isChecked: {
+      control: "boolean",
+      description: "Состояние чекбокса (выбран/не выбран)"
+    },
+    isDisabled: {
+      control: "boolean",
+      description: "Отключен ли чекбокс"
+    },
+    label: {
+      control: "text",
+      description: "Текстовая метка чекбокса"
+    },
+    name: {
+      control: "text",
+      description: "Атрибут name для input элемента"
+    },
+    onChange: {
+      action: "changed",
+      description: "Обработчик изменения состояния"
+    }
+  }
+}, g = {
+  args: {
+    label: "Чекбокс"
+  }
+}, C = {
+  args: {
+    label: "Выбранный чекбокс",
+    isChecked: !0
+  }
+}, f = {
+  args: {
+    label: "Отключенный чекбокс",
+    isDisabled: !0
+  }
+}, D = {
+  args: {
+    label: "Выбранный и отключенный",
+    isChecked: !0,
+    isDisabled: !0
+  }
+}, y = {
+  args: {}
+}, I = {
+  args: {
+    label: "Неопределённое состояние",
+    isIndeterminate: !0
+  }
+}, v = {
+  args: {
+    label: "Неопределённое и отключенное",
+    isIndeterminate: !0,
+    isDisabled: !0
+  }
+}, b = () => {
+  const [a, c] = p([
+    { id: 1, checked: !1 },
+    { id: 2, checked: !0 },
+    { id: 3, checked: !1 }
+  ]), d = a.every((t) => t.checked), r = a.some((t) => t.checked);
+  let n = !1;
+  d ? n = !0 : r && (n = "indeterminate");
+  const o = () => {
+    const t = !d;
+    c(a.map((l) => ({ ...l, checked: t })));
+  }, h = (t) => {
+    c(a.map((l) => l.id === t ? { ...l, checked: !l.checked } : l));
+  };
+  return /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+    /* @__PURE__ */ e(
+      i,
+      {
+        label: "Выбрать все",
+        isChecked: n === !0,
+        isIndeterminate: n === "indeterminate",
+        onChange: o
+      }
+    ),
+    /* @__PURE__ */ e("div", { style: { marginLeft: "24px", display: "flex", flexDirection: "column", gap: "8px" }, children: a.map((t) => /* @__PURE__ */ e(
+      i,
+      {
+        label: `Элемент ${t.id}`,
+        isChecked: t.checked,
+        onChange: () => h(t.id)
+      },
+      t.id
+    )) })
+  ] });
+}, S = () => /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+  /* @__PURE__ */ e(i, { label: "Обычный чекбокс" }),
+  /* @__PURE__ */ e(i, { label: "Выбранный чекбокс", isChecked: !0 }),
+  /* @__PURE__ */ e(i, { label: "Отключенный чекбокс", isDisabled: !0 }),
+  /* @__PURE__ */ e(i, { label: "Выбранный и отключенный", isChecked: !0, isDisabled: !0 }),
+  /* @__PURE__ */ e(i, { label: "Неопределённое состояние", isIndeterminate: !0 }),
+  /* @__PURE__ */ e(i, { label: "Неопределённое и отключенное", isIndeterminate: !0, isDisabled: !0 }),
+  /* @__PURE__ */ e(i, {})
+] }), P = () => /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: /* @__PURE__ */ s("div", { children: [
+  /* @__PURE__ */ e("h1", { style: { fontSize: "24px", marginBottom: "24px" }, children: "Эмуляция родительского чекбокса с дочерними" }),
+  /* @__PURE__ */ e(b, {})
+] }) });
+export {
+  C as Checked,
+  D as CheckedDisabled,
+  g as Default,
+  f as Disabled,
+  I as Indeterminate,
+  v as IndeterminateDisabled,
+  P as InteractivePlayground,
+  S as States,
+  y as WithoutLabel,
+  k as default
+};

package/dist/components/Ui/Checkbox/index.js

@@ -0,0 +1,4 @@
+import { Checkbox as r } from "./Checkbox.js";
+export {
+  r as Checkbox
+};