stone-kit 0.0.648 → 0.0.649

package/README.md

@@ -1,59 +1,59 @@
-# Stone-kit
-
-Uikit for stone redesign 2.0
-
-## Installation
-
-Package installation:
-
-```bash
-npm i stone-kit@latest
-```
-
-## Usage
-
-For Next.js page router in App.tsx:
-
-```bash
-import 'stone-kit/dist/style.css'
-```
-
-and then:
-
-```bash
-import {Button} from 'stone-kit'
-```
-
-For other projects u can immediately:
-
-```bash
-import {Button} from 'stone-kit'
-```
-
-## Docs
-
-### ButtonProps
-
-size: optional, size of button. types : 'large' | 'medium' | 'small' | 'tiny'
-
-pre: optional, insert icon/text before button text. type: ReactNode
-
-post: optional, insert icon/text after button text. type: ReactNode
-
-variant: optional, color variants of button. type:
-'blue',
-'gray',
-'whiteStroke',
-'sokolniki',
-'black',
-'whiteFilled'
-
-width: optional, width of button. type: 'auto' | 'full'
-
-additionalClass: optional, add your custom class to button. type: 'string'
-
-as: optional, u can convert button to link. type: 'button' | 'link'. 'button' by default.
-
-### MobileButtonProps
-
-### Tag
+# Stone-kit
+
+Uikit for stone redesign 2.0
+
+## Installation
+
+Package installation:
+
+```bash
+npm i stone-kit@latest
+```
+
+## Usage
+
+For Next.js page router in App.tsx:
+
+```bash
+import 'stone-kit/dist/style.css'
+```
+
+and then:
+
+```bash
+import {Button} from 'stone-kit'
+```
+
+For other projects u can immediately:
+
+```bash
+import {Button} from 'stone-kit'
+```
+
+## Docs
+
+### ButtonProps
+
+size: optional, size of button. types : 'large' | 'medium' | 'small' | 'tiny'
+
+pre: optional, insert icon/text before button text. type: ReactNode
+
+post: optional, insert icon/text after button text. type: ReactNode
+
+variant: optional, color variants of button. type:
+'blue',
+'gray',
+'whiteStroke',
+'sokolniki',
+'black',
+'whiteFilled'
+
+width: optional, width of button. type: 'auto' | 'full'
+
+additionalClass: optional, add your custom class to button. type: 'string'
+
+as: optional, u can convert button to link. type: 'button' | 'link'. 'button' by default.
+
+### MobileButtonProps
+
+### Tag

package/dist/components/Select/model/selectMode.d.ts

@@ -0,0 +1,21 @@
+import { TCategory, TModeSelect, TOption } from '../ui/Select.types.ts';
+import { SetStateAction } from 'react';
+
+export type TClickOptionProps = {
+    option: TOption | TOption[];
+    disabledOptions: TOption[];
+    selectedOptions: TOption[];
+    setSelectedOptions: (value: SetStateAction<TOption[]>) => void;
+    mode: TModeSelect;
+    onChange?: ((selectedOptions: TOption[]) => unknown);
+    optionsParentArr?: TCategory[] | TOption[];
+};
+/**
+ * Доп стили для кнопки-контейнера
+ *
+ * @default true
+ */
+declare const handleClickModeOption: ({ option, setSelectedOptions, selectedOptions, disabledOptions, onChange, mode, optionsParentArr }: TClickOptionProps) => void;
+declare const handleClickModeCategory: ({ option, setSelectedOptions, selectedOptions, disabledOptions, onChange }: TClickOptionProps) => void;
+declare const handleClickModeDouble: ({ option, setSelectedOptions, selectedOptions, disabledOptions, onChange }: TClickOptionProps) => void;
+export { handleClickModeCategory, handleClickModeDouble, handleClickModeOption };

package/dist/components/Select/model/selectMode.js

@@ -0,0 +1,67 @@
+const n = ({
+  option: e,
+  setSelectedOptions: y,
+  selectedOptions: c,
+  disabledOptions: u,
+  onChange: l,
+  mode: S,
+  optionsParentArr: r
+}) => {
+  if (!Array.isArray(e)) {
+    if (u.includes(e))
+      return;
+    const i = c.some((f) => f.value === e.value) ? c.filter((f) => f.value !== e.value) : [...c, e];
+    if (S === "double") {
+      const f = r == null ? void 0 : r.filter((s) => "options" in s && s.options.includes(e))[0];
+      !(f && c.includes(f)) && f && i.push(f);
+    }
+    y(i), l && l(i);
+  }
+}, J = ({
+  option: e,
+  setSelectedOptions: y,
+  selectedOptions: c,
+  disabledOptions: u,
+  onChange: l
+}) => {
+  if (Array.isArray(e)) {
+    const S = e.filter((r) => !(u != null && u.includes(r)));
+    if (S.every((r) => c.map((i) => JSON.stringify(i)).includes(JSON.stringify(r)))) {
+      const r = c.filter(
+        (i) => !e.map((f) => JSON.stringify(f)).includes(JSON.stringify(i))
+      );
+      y(r), l && l(r);
+    } else {
+      const r = S.filter(
+        (f) => !c.map((t) => JSON.stringify(t)).includes(JSON.stringify(f))
+      ), i = [...c, ...r];
+      y(i), l && l(i);
+    }
+  }
+}, N = ({
+  option: e,
+  setSelectedOptions: y,
+  selectedOptions: c,
+  disabledOptions: u,
+  onChange: l
+}) => {
+  if (Array.isArray(e)) {
+    const S = e.filter((r) => !(u != null && u.includes(r)));
+    if (S.every((r) => c.map((i) => JSON.stringify(i)).includes(JSON.stringify(r)))) {
+      const r = c.filter(
+        (i) => !e.map((f) => JSON.stringify(f)).includes(JSON.stringify(i))
+      );
+      y(r), l && l(r);
+    } else {
+      const r = S.filter(
+        (f) => !c.map((t) => JSON.stringify(t)).includes(JSON.stringify(f))
+      ), i = [...c, ...r];
+      y(i), l && l(i);
+    }
+  }
+};
+export {
+  J as handleClickModeCategory,
+  N as handleClickModeDouble,
+  n as handleClickModeOption
+};

package/dist/components/Select/ui/Category.d.ts

@@ -1,4 +1,4 @@
-import { TCategory, TOption } from './Select.types.ts';
+import { TCategory, TModeSelect, TOption } from './Select.types.ts';
 
 export interface IOption {
     category: TCategory;
@@ -8,5 +8,6 @@ export interface IOption {
     clickableOptions?: (string | undefined)[];
     handleOptionClick: (option: TOption | TOption[]) => void;
     sizeIcon?: string;
+    mode: TModeSelect;
 }
-export declare const Category: ({ category, selectedOptions, disabledOptions, clickableOptions, handleOptionClick, sizeIcon }: IOption) => import("react/jsx-runtime").JSX.Element;
+export declare const Category: ({ category, selectedOptions, disabledOptions, clickableOptions, handleOptionClick, sizeIcon, mode }: IOption) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/ui/Category.js

@@ -1,70 +1,71 @@
-import { jsxs as l, Fragment as v, jsx as s } from "react/jsx-runtime";
-import { s as e, O as f } from "../../../Option-a48eBPyn.js";
-import { NewIcon as c } from "../../NewIcon/ui/NewIcon.js";
-import { c as h } from "../../../index-rKuIKazb.js";
-const N = h.bind(e), O = ({
-  category: o,
-  selectedOptions: n,
-  disabledOptions: r,
+import { jsxs as l, Fragment as C, jsx as i } from "react/jsx-runtime";
+import { s as o, O as k } from "../../../Option-a48eBPyn.js";
+import { NewIcon as d } from "../../NewIcon/ui/NewIcon.js";
+import { c as N } from "../../../index-rKuIKazb.js";
+const b = N.bind(o), U = ({
+  category: s,
+  selectedOptions: t,
+  disabledOptions: a,
   clickableOptions: p,
-  handleOptionClick: a,
-  sizeIcon: t
+  handleOptionClick: c,
+  sizeIcon: n,
+  mode: m
 }) => {
-  const d = n.map((i) => JSON.stringify(i)), m = o.options.every((i) => d.includes(JSON.stringify(i)));
-  return /* @__PURE__ */ l(v, { children: [
+  const f = t.map((e) => JSON.stringify(e)), r = m === "category", g = m === "double", u = r && s.options.every((e) => f.includes(JSON.stringify(e))), h = r ? u ? "minusCheck" : "selectUnchecked" : g && t.some((e) => e.value === s.value) ? "selectChecked" : "selectUnchecked";
+  return /* @__PURE__ */ l(C, { children: [
     /* @__PURE__ */ l(
       "div",
       {
-        className: N(
-          e.option,
-          e.category,
-          e.optionClickable,
+        className: b(
+          o.option,
+          o.category,
+          o.optionClickable,
           {
-            [e.selected]: n.some((i) => i.value === o.value),
-            [e.optionDisabled]: r.some(
-              (i) => i.value === o.value
+            [o.selected]: t.some((e) => e.value === s.value),
+            [o.optionDisabled]: a.some(
+              (e) => e.value === s.value
             )
           }
         ),
-        onClick: () => a(o.options),
+        onClick: () => c(r ? s.options : s),
         children: [
-          /* @__PURE__ */ l("div", { className: e.leftSide, children: [
-            /* @__PURE__ */ s(
-              c,
+          /* @__PURE__ */ l("div", { className: o.leftSide, children: [
+            /* @__PURE__ */ i(
+              d,
               {
-                size: t ?? "20",
-                name: m ? "minusCheck" : "selectUnchecked"
+                size: n ?? "20",
+                name: h
               }
             ),
-            /* @__PURE__ */ s("div", { children: o.label })
+            /* @__PURE__ */ i("div", { children: s.label })
           ] }),
-          /* @__PURE__ */ s(
-            c,
+          /* @__PURE__ */ i(
+            d,
             {
               name: "arrowShort",
-              deg: m ? "180" : "0",
-              size: t ?? "24",
-              additionalClass: e.icon
+              deg: u ? "180" : "0",
+              size: n ?? "24",
+              additionalClass: o.icon
             }
           )
         ]
       }
     ),
-    o.options.map((i, u) => /* @__PURE__ */ s(
-      f,
+    s.options.map((e, v) => /* @__PURE__ */ i(
+      k,
       {
-        option: i,
-        disabledOptions: r,
-        selectedOptions: n,
-        handleOptionClick: () => a(i),
-        sizeIcon: t,
+        option: e,
+        disabledOptions: a,
+        selectedOptions: t,
+        handleOptionClick: () => c(e),
+        sizeIcon: n,
         clickableOptions: p,
         isOptionCategory: !0
       },
-      u
+      v
     ))
   ] });
 };
 export {
-  O as Category
+  U as Category
 };

package/dist/components/Select/ui/Select.js

@@ -1,182 +1,151 @@
-import { jsxs as u, Fragment as W, jsx as o } from "react/jsx-runtime";
-import { useState as j, useRef as z, useEffect as B } from "react";
-import { c as Q } from "../../../index-rKuIKazb.js";
-import { s as e, O as T } from "../../../Option-a48eBPyn.js";
-import { NewIcon as L } from "../../NewIcon/ui/NewIcon.js";
-import { Category as U } from "./Category.js";
-const f = Q.bind(e), te = ({
-  options: g,
-  placeholder: _ = "Выберите опции",
-  error: q,
-  disabled: N,
-  disabledOptions: i = [],
-  additionalClass: C = "",
-  additionalClassOption: G,
-  additionalClassBtn: H,
-  onChange: c,
-  onBlur: h,
-  selectedValues: n = [],
-  isBtn: k = !1,
-  btnName: F,
-  clickableOptions: J,
-  isListRight: K = !1,
-  sizeIcon: p,
-  mode: $ = "options",
-  onClickItem: w,
-  onCLickSelect: x,
-  size_s: E = "large",
-  size_m: A,
-  size_l: D
+import { jsxs as d, Fragment as R, jsx as s } from "react/jsx-runtime";
+import { useState as b, useRef as A, useEffect as M } from "react";
+import { c as G } from "../../../index-rKuIKazb.js";
+import { s as e, O as H } from "../../../Option-a48eBPyn.js";
+import { NewIcon as W } from "../../NewIcon/ui/NewIcon.js";
+import { Category as J } from "./Category.js";
+import { handleClickModeOption as K, handleClickModeDouble as Q, handleClickModeCategory as T } from "../model/selectMode.js";
+const a = G.bind(e), te = ({
+  options: n,
+  placeholder: j = "Выберите опции",
+  error: w,
+  disabled: u,
+  disabledOptions: f = [],
+  additionalClass: z = "",
+  additionalClassOption: B,
+  additionalClassBtn: L,
+  onChange: F,
+  onBlur: g,
+  selectedValues: l = [],
+  isBtn: O = !1,
+  btnName: C,
+  clickableOptions: v,
+  isListRight: P = !1,
+  sizeIcon: m,
+  mode: c = "options",
+  onClickItem: k,
+  onCLickSelect: y,
+  size_s: N = "large",
+  size_m: S,
+  size_l: $
 }) => {
-  const v = [
-    {
-      value: "Category1",
-      label: "category1",
-      options: [
-        { value: "optionsFake1", label: "labelFake1" },
-        { value: "optionsFake2", label: "labelFake2" },
-        { value: "optionsFake3", label: "labelFake3" }
-      ]
-    }
-    // {
-    //     value: 'Category2',
-    //     label: 'category2',
-    //     options: [
-    //         {value: 'optionsFake4', label: 'labelFake4'},
-    //         {value: 'optionsFake5', label: 'labelFake5'},
-    //         {value: 'optionsFake6', label: 'labelFake6'}
-    //     ]
-    // }
-  ], [l, d] = j(n), [m, S] = j(!1), y = z(null), R = (t) => {
-    if (w && w(t), Array.isArray(t)) {
-      const s = t.filter((r) => !(i != null && i.includes(r)));
-      if (s.every((r) => l.map((a) => JSON.stringify(a)).includes(JSON.stringify(r)))) {
-        const r = l.filter(
-          (a) => !t.map((O) => JSON.stringify(O)).includes(JSON.stringify(a))
-        );
-        d(r), c && c(r);
-      } else {
-        const r = s.filter(
-          (O) => !l.map((P) => JSON.stringify(P)).includes(JSON.stringify(O))
-        ), a = [...l, ...r];
-        d(a), c && c(a);
-      }
-    } else {
-      if (i.includes(t))
-        return;
-      const s = l.some((r) => r.value === t.value) ? l.filter((r) => r.value !== t.value) : [...l, t];
-      d(s), c && c(s);
-    }
-  }, M = () => {
-    h && h(l);
+  const [i, x] = b(l), [o, p] = b(!1), h = A(null), E = (t) => {
+    k && k(t);
+    const r = { option: t, selectedOptions: i, disabledOptions: f, setSelectedOptions: x, onChange: F, mode: c, optionsParentArr: n };
+    Array.isArray(t) ? c === "double" ? Q(r) : T(r) : K(r);
+  }, _ = () => {
+    g && g(i);
   };
-  B(() => {
-    const t = (s) => {
-      const r = s.target;
-      if (y.current && !y.current.contains(s.target)) {
-        if (r.closest("svg"))
+  M(() => {
+    const t = (r) => {
+      const q = r.target;
+      if (h.current && !h.current.contains(r.target)) {
+        if (q.closest("svg"))
           return;
-        S(!1);
+        p(!1);
       }
     };
     return document.addEventListener("click", t), () => {
       document.removeEventListener("click", t);
     };
   }, []);
-  const b = z(n);
-  return B(() => {
-    n.length !== b.current.length && (d(n), b.current = n);
-  }, [n]), /* @__PURE__ */ u(
+  const D = A(l);
+  return M(() => {
+    l.length !== D.current.length && (x(l), D.current = l);
+  }, [l]), /* @__PURE__ */ d(
     "div",
     {
-      ref: y,
-      className: f(e.multiSelectWrapper, { [e.multiSelectWrapperError]: q }, C),
+      ref: h,
+      className: a(e.multiSelectWrapper, { [e.multiSelectWrapperError]: w }, z),
       tabIndex: 0,
-      onBlur: M,
+      onBlur: _,
       children: [
-        /* @__PURE__ */ u("div", { className: f(e.inputWrapper), children: [
-          !k && /* @__PURE__ */ u(W, { children: [
-            /* @__PURE__ */ o(
+        /* @__PURE__ */ d("div", { className: a(e.inputWrapper), children: [
+          !O && /* @__PURE__ */ d(R, { children: [
+            /* @__PURE__ */ s(
               "div",
               {
-                className: f(
+                className: a(
                   e.selectedOptions,
-                  e[`${E}-size`],
-                  e[`${A}-size_m`],
-                  e[`${D}-size)_l`],
-                  { [e.selectedOptionsNotEmpty]: l.length > 0 },
-                  { [e.selectOptionsDisabled]: N }
+                  e[`${N}-size`],
+                  e[`${S}-size_m`],
+                  e[`${$}-size)_l`],
+                  { [e.selectedOptionsNotEmpty]: i.length > 0 },
+                  { [e.selectOptionsDisabled]: u }
                 ),
-                onClick: () => S(!m),
-                children: l.length === 0 ? _ : "Выбрано " + l.length
+                onClick: () => p(!o),
+                children: i.length === 0 ? j : "Выбрано " + i.length
               }
             ),
-            /* @__PURE__ */ o(
-              L,
+            /* @__PURE__ */ s(
+              W,
               {
                 name: "arrowShort",
-                deg: m ? "180" : "0",
-                size: p ?? "24",
+                deg: o ? "180" : "0",
+                size: m ?? "24",
                 additionalClass: e.icon
               }
             )
           ] }),
-          k && /* @__PURE__ */ u(W, { children: [
-            /* @__PURE__ */ o(
+          O && /* @__PURE__ */ d(R, { children: [
+            /* @__PURE__ */ s(
               "button",
               {
-                className: f(
+                className: a(
                   e.selectedOptions,
-                  e[`${E}-size`],
-                  e[`${A}-size_m`],
-                  e[`${D}-size_l`],
+                  e[`${N}-size`],
+                  e[`${S}-size_m`],
+                  e[`${$}-size_l`],
                   e.selectedOptionsBtn,
-                  { [e.selectOptionsDisabled]: N },
-                  H
+                  { [e.selectOptionsDisabled]: u },
+                  L
                 ),
                 onClick: () => {
-                  x && x(), S(!m);
+                  y && y(), p(!o);
                 },
-                children: F
+                children: C
               }
             ),
-            /* @__PURE__ */ o(
-              L,
+            /* @__PURE__ */ s(
+              W,
               {
                 name: "filter",
-                deg: m ? "180" : "0",
-                size: p ?? "24",
-                additionalClass: f(e.icon, { [e.iconBtn]: !F })
+                deg: o ? "180" : "0",
+                size: m ?? "24",
+                additionalClass: a(e.icon, { [e.iconBtn]: !C })
               }
             )
           ] })
         ] }),
-        m && /* @__PURE__ */ u("div", { className: f(e.optionsList, { [e.listRight]: K }, G), children: [
-          $ === "options" && (g == null ? void 0 : g.map((t, s) => /* @__PURE__ */ o(
-            T,
+        o && /* @__PURE__ */ d("div", { className: a(e.optionsList, { [e.listRight]: P }, B), children: [
+          c === "options" && (n == null ? void 0 : n.map((t, r) => /* @__PURE__ */ s(
+            H,
             {
-              disabledOptions: i,
-              clickableOptions: J,
-              selectedOptions: l,
-              sizeIcon: p,
+              disabledOptions: f,
+              clickableOptions: v,
+              selectedOptions: i,
+              sizeIcon: m,
               option: t,
-              handleOptionClick: R
+              handleOptionClick: E
             },
-            s
+            r
           ))),
-          $ === "category" && (v == null ? void 0 : v.map((t, s) => /* @__PURE__ */ o(
-            U,
-            {
-              disabledOptions: i,
-              clickableOptions: J,
-              selectedOptions: l,
-              sizeIcon: p,
-              category: t,
-              selectedValues: n,
-              handleOptionClick: R
-            },
-            s
-          )))
+          (c === "category" || c === "double") && (n == null ? void 0 : n.map(
+            (t, r) => "options" in t ? /* @__PURE__ */ s(
+              J,
+              {
+                disabledOptions: f,
+                clickableOptions: v,
+                selectedOptions: i,
+                sizeIcon: m,
+                category: t,
+                mode: c,
+                selectedValues: l,
+                handleOptionClick: E
+              },
+              r
+            ) : null
+          ))
         ] })
       ]
     }

package/dist/components/Select/ui/Select.types.d.ts

@@ -8,10 +8,10 @@ export type TCategory = {
     label: string;
     options: TOption[];
 };
-export type TModeSelect = 'options' | 'category';
+export type TModeSelect = 'options' | 'category' | 'double';
 type SelectSizes = 'medium' | 'small' | 'large';
 export interface MultiSelectProps {
-    options?: TOption[];
+    options?: TOption[] | TCategory[];
     category?: TCategory[];
     placeholder?: string;
     error?: boolean;
@@ -21,20 +21,14 @@ export interface MultiSelectProps {
     size_l?: SelectSizes;
     /**
      * Доп стили для родителя-контейнера
-     *
-     * @default false
      */
     additionalClass?: string;
     /**
      * Доп стили для каждой опции
-     *
-     * @default false
      */
     additionalClassOption?: string;
     /**
      * Доп стили для кнопки-контейнера
-     *
-     * @default false
      */
     additionalClassBtn?: string;
     onChange?: (selectedOptions: TOption[]) => unknown;
@@ -47,14 +41,10 @@ export interface MultiSelectProps {
     isListRight?: boolean;
     /**
      * Список опций которые будут задизейблены по умолчанию
-     *
-     * @default false
      */
     disabledOptions?: TOption[];
     /**
      * Список опций которые доступны для клика
-     *
-     * @default false
      */
     clickableOptions?: (string | undefined)[];
     sizeIcon?: string;

package/package.json

@@ -2,7 +2,7 @@
   "name": "stone-kit",
   "description": "uikit for redesign",
   "private": false,
-  "version": "0.0.648",
+  "version": "0.0.649",
   "author": "Mollycodd1e",
   "license": "ISC",
   "type": "module",