mimir-ui-kit 1.13.7 → 1.14.1

package/README.md

@@ -1,62 +1,62 @@
-# Mimir-ui
-
-## Установка и запуск проекта
-
-1. Установите зависимости:
-   ```bash
-   npm install
-   ```
-2. Запуск storybook
-   ```bash
-   npm run storybook
-   ```
-
-## Сборка проекта
-
-1. Скрипт для сборки
-   ```bash
-   npm run build
-   ```
-
-## Создание нового компонента
-
-```bash
-npm run create-component <ComponentName>
-```
-
-## Поднятие версии для публикации на npm
-
-Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
-
-1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
-
-```bash
-npm version patch
-```
-
-2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
-   ```bash
-   npm version minor
-   ```
-3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
-   ```bash
-   npm version major
-   ```
-
-## Публикация на npm
-
-1. Скрипт для публикации на npm:
-   ```bash
-   npm publish
-   ```
-
-## Ручная Генерация иконок
-
-1. Экспортируем с фигмы иконку.
-2. Добавляем ее в папку svgs.
-3. Запускаем скрипт:
-   ```bash
-   npm run icons
-   ```
-4. Смотрим в папку `icons/components`
-5. Готово.
+# Mimir-ui
+
+## Установка и запуск проекта
+
+1. Установите зависимости:
+   ```bash
+   npm install
+   ```
+2. Запуск storybook
+   ```bash
+   npm run storybook
+   ```
+
+## Сборка проекта
+
+1. Скрипт для сборки
+   ```bash
+   npm run build
+   ```
+
+## Создание нового компонента
+
+```bash
+npm run create-component <ComponentName>
+```
+
+## Поднятие версии для публикации на npm
+
+Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
+
+1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
+
+```bash
+npm version patch
+```
+
+2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
+   ```bash
+   npm version minor
+   ```
+3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
+   ```bash
+   npm version major
+   ```
+
+## Публикация на npm
+
+1. Скрипт для публикации на npm:
+   ```bash
+   npm publish
+   ```
+
+## Ручная Генерация иконок
+
+1. Экспортируем с фигмы иконку.
+2. Добавляем ее в папку svgs.
+3. Запускаем скрипт:
+   ```bash
+   npm run icons
+   ```
+4. Смотрим в папку `icons/components`
+5. Готово.

package/dist/assets/Pagination.css

@@ -0,0 +1 @@
+._container_1s8aj_2{--pagination-active: #e5e5e5;display:flex;justify-content:center;gap:var(--space-2xl);margin:0 auto var(--space-xl);font-size:var(--size-text-l);font-family:Inter,sans-serif}._container_1s8aj_2 ._link_1s8aj_11{-webkit-text-decoration:none;text-decoration:none;height:40px;width:40px;color:var(--black-100);display:flex;justify-content:center;align-items:center;border-radius:var(--control-radius);font-family:monospace;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._container_1s8aj_2 ._link_1s8aj_11:active{background-color:var(--pagination-active)}._container_1s8aj_2 ._link_1s8aj_11:focus,._container_1s8aj_2 ._link_1s8aj_11:hover{color:var(--sapphire-normal);-webkit-text-decoration:none;text-decoration:none}._container_1s8aj_2 ._link_1s8aj_11[rel=prev],._container_1s8aj_2 ._link_1s8aj_11[rel=next]{background-color:var(--white);-webkit-text-decoration:none;text-decoration:none;color:var(--black-100)}._container_1s8aj_2 ._link_1s8aj_11[rel=prev]:hover,._container_1s8aj_2 ._link_1s8aj_11[rel=next]:hover{color:var(--sapphire-normal)}._container_1s8aj_2 ._link_1s8aj_11[rel=prev]:active,._container_1s8aj_2 ._link_1s8aj_11[rel=next]:active{background-color:var(--black-80);color:var(--white)}._container_1s8aj_2 ._link_1s8aj_11[rel=prev] svg,._container_1s8aj_2 ._link_1s8aj_11[rel=next] svg{width:16px;height:16px}._container_1s8aj_2 ._item_1s8aj_46{display:inline-block;border-radius:var(--control-radius);text-align:center;vertical-align:top}._container_1s8aj_2 ._item_1s8aj_46._isActive_1s8aj_52 ._link_1s8aj_11{background-color:var(--pagination-active)}._container_1s8aj_2 ._item_1s8aj_46._isActive_1s8aj_52 ._link_1s8aj_11:hover{color:var(--black-100)}._container_1s8aj_2 ._item_1s8aj_46._disabled_1s8aj_58 ._link_1s8aj_11{pointer-events:none;color:var(--disabled-color);background-color:var(--white);cursor:default}._container_1s8aj_2 ._item_1s8aj_46._disabled_1s8aj_58 ._link_1s8aj_11:hover{color:var(--white)}

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+
+export type TBackProps = {
+    currentPageNumber: number;
+    onClick: (nextPage: number) => void;
+    setCurrentPage: (nextPage: number) => void;
+};
+export type TNextProps = {
+    currentPageNumber: number;
+    lastPageNumber: number;
+    onClick: (nextPage: number) => void;
+    setCurrentPage: (nextPage: number) => void;
+};
+export type TItemProps = {
+    currentPageNumber: number;
+    newPageNumber: number;
+    onClick: (pageNumber: number) => void;
+    setCurrentPage: (pageNumber: number) => void;
+};
+export type TProps = {
+    /**
+     * Класс, применяемый к корневому элемент
+     */
+    rootClassName?: string;
+    /**
+     * Выполнится при изменении страницы
+     */
+    onChange: (page: number) => void;
+    /**
+     * Всего элементов
+     */
+    total: number;
+    /**
+     * Элементов на странице
+     */
+    perPage?: number;
+    /**
+     * Текущая страница
+     */
+    currentPageNumber?: number;
+};
+export declare const Pagination: React.ForwardRefExoticComponent<TProps & React.RefAttributes<HTMLElement>>;

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,220 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef, useState, useEffect } from "react";
+import { FIRST_PAGE_NUMBER, DEFAULT_PER_PAGE } from "./constants.js";
+import { useWindowSize } from "../../hooks/useWindowSize/index.js";
+import { Icon } from "../../icons/Icon.js";
+import '../../assets/Pagination.css';const container = "_container_1s8aj_2";
+const link = "_link_1s8aj_11";
+const item = "_item_1s8aj_46";
+const isActive = "_isActive_1s8aj_52";
+const disabled = "_disabled_1s8aj_58";
+const cls = {
+  container,
+  link,
+  item,
+  isActive,
+  disabled
+};
+const Back = ({
+  currentPageNumber,
+  onClick,
+  setCurrentPage
+}) => {
+  const handleClick = (event) => {
+    event.preventDefault();
+    if (currentPageNumber === FIRST_PAGE_NUMBER) return;
+    setCurrentPage(currentPageNumber - 1);
+    onClick(currentPageNumber - 1);
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: classNames(cls.item, cls.prev, {
+        [cls.disabled]: currentPageNumber === FIRST_PAGE_NUMBER
+      }),
+      children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: cls.link,
+          onClick: handleClick,
+          href: "#",
+          "aria-label": "Назад",
+          rel: "prev",
+          children: /* @__PURE__ */ jsx(Icon, { iconName: "ArrowLeft16px" })
+        }
+      )
+    }
+  );
+};
+const Next = ({
+  currentPageNumber,
+  lastPageNumber,
+  onClick,
+  setCurrentPage
+}) => {
+  const isOnLastPage = currentPageNumber >= lastPageNumber;
+  const handleClick = (event) => {
+    event.preventDefault();
+    if (isOnLastPage) return;
+    setCurrentPage(currentPageNumber + 1);
+    onClick == null ? void 0 : onClick(currentPageNumber + 1);
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: classNames(cls.item, cls.next, {
+        [cls.disabled]: isOnLastPage
+      }),
+      children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: cls.link,
+          onClick: handleClick,
+          href: "#",
+          "aria-label": "Вперед",
+          rel: "next",
+          children: /* @__PURE__ */ jsx(Icon, { iconName: "ArrowRight16px" })
+        }
+      )
+    }
+  );
+};
+const Ellipsis = () => {
+  const handleClick = (event) => {
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ jsx("span", { className: cls.item, children: /* @__PURE__ */ jsx("a", { className: cls.link, href: "#", onClick: handleClick, children: /* @__PURE__ */ jsx("span", { children: "..." }) }) });
+};
+const Item = ({
+  currentPageNumber,
+  newPageNumber,
+  onClick,
+  setCurrentPage
+}) => {
+  const isActive2 = currentPageNumber === newPageNumber;
+  const handleClick = (event) => {
+    event.preventDefault();
+    setCurrentPage(newPageNumber);
+    onClick == null ? void 0 : onClick(newPageNumber);
+  };
+  const formattedPageNumber = newPageNumber < 10 ? `0${newPageNumber}` : newPageNumber;
+  return /* @__PURE__ */ jsx("span", { className: classNames(cls.item, { [cls.isActive]: isActive2 }), children: !isActive2 ? /* @__PURE__ */ jsx("a", { href: "#", className: cls.link, onClick: handleClick, children: formattedPageNumber }) : /* @__PURE__ */ jsx("span", { className: cls.link, children: formattedPageNumber }) });
+};
+const renderItems = ({
+  start,
+  end,
+  currentPageNumber,
+  onClick,
+  setCurrentPage
+}) => {
+  const items = [];
+  for (let i = start; i <= end; i++) {
+    items.push(
+      /* @__PURE__ */ jsx(
+        Item,
+        {
+          currentPageNumber,
+          setCurrentPage,
+          newPageNumber: i,
+          onClick
+        },
+        i
+      )
+    );
+  }
+  return items;
+};
+const Pagination = forwardRef(
+  (props, ref) => {
+    const {
+      rootClassName,
+      total,
+      perPage = DEFAULT_PER_PAGE,
+      currentPageNumber = FIRST_PAGE_NUMBER,
+      onChange
+    } = props;
+    const [currentPage, setCurrentPage] = useState(currentPageNumber);
+    const lastPageNumber = Math.ceil(total / perPage);
+    const { width } = useWindowSize();
+    const adjacentCount = width <= 650 ? 2 : 4;
+    let firstAdjacentPage = 0;
+    let lastAdjacentPage = 0;
+    useEffect(() => {
+      setCurrentPage(currentPageNumber);
+    }, [currentPageNumber]);
+    if (currentPage <= adjacentCount) {
+      firstAdjacentPage = FIRST_PAGE_NUMBER;
+      lastAdjacentPage = Math.min(
+        FIRST_PAGE_NUMBER + adjacentCount,
+        lastPageNumber
+      );
+    } else if (currentPage > lastPageNumber - adjacentCount) {
+      firstAdjacentPage = lastPageNumber - adjacentCount;
+      lastAdjacentPage = lastPageNumber;
+    } else {
+      firstAdjacentPage = currentPage - adjacentCount / 2;
+      lastAdjacentPage = currentPage + adjacentCount / 2;
+    }
+    if (total <= perPage) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        "aria-label": "Постраничная навигация",
+        className: classNames(cls.container, rootClassName),
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            Back,
+            {
+              currentPageNumber: currentPage,
+              onClick: onChange,
+              setCurrentPage
+            }
+          ),
+          firstAdjacentPage > FIRST_PAGE_NUMBER && /* @__PURE__ */ jsx(
+            Item,
+            {
+              newPageNumber: FIRST_PAGE_NUMBER,
+              currentPageNumber: currentPage,
+              onClick: onChange,
+              setCurrentPage
+            }
+          ),
+          firstAdjacentPage > FIRST_PAGE_NUMBER + 1 && /* @__PURE__ */ jsx(Ellipsis, {}),
+          renderItems({
+            start: firstAdjacentPage,
+            end: lastAdjacentPage,
+            currentPageNumber: currentPage,
+            setCurrentPage,
+            onClick: onChange
+          }),
+          lastAdjacentPage < lastPageNumber - 1 && /* @__PURE__ */ jsx(Ellipsis, {}),
+          lastAdjacentPage < lastPageNumber && /* @__PURE__ */ jsx(
+            Item,
+            {
+              newPageNumber: lastPageNumber,
+              currentPageNumber: currentPage,
+              setCurrentPage,
+              onClick: onChange
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Next,
+            {
+              currentPageNumber: currentPage,
+              setCurrentPage,
+              lastPageNumber,
+              onClick: onChange
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  Pagination
+};

package/dist/components/Pagination/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const FIRST_PAGE_NUMBER = 1;
+export declare const DEFAULT_PER_PAGE = 5;

package/dist/components/Pagination/constants.js

@@ -0,0 +1,6 @@
+const FIRST_PAGE_NUMBER = 1;
+const DEFAULT_PER_PAGE = 5;
+export {
+  DEFAULT_PER_PAGE,
+  FIRST_PAGE_NUMBER
+};

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

package/dist/components/Pagination/index.js

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

package/dist/components/Pagination/types.js

@@ -0,0 +1 @@
+

package/dist/components/Tag/Tag.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { ETagSize, ETagType } from './constants';
 
 export type TProps = {
     /**
@@ -12,7 +13,7 @@ export type TProps = {
     /**
      * Класс, применяемый к контентному элементу
      */
-    size?: string;
+    size?: ETagSize;
     /**
      * Класс, применяемый к корневому элемент
      */
@@ -24,7 +25,7 @@ export type TProps = {
     /**
      * Определяет какой тип элемента будет создан, по умолчанию - button
      */
-    elementType?: 'button' | 'div';
+    elementType?: ETagType;
     /**
      * Цвет фона, при outline и текста
      */

package/dist/components/index.d.ts

@@ -29,3 +29,4 @@ export { Accordion, AccordionItem, EAccordionSize } from './Accordion';
 export type { TAccordionProps, TAccordionItemProps } from './Accordion';
 export { TabTrail, ETabTrailSize } from './TabTrail';
 export type { TTabTrailProps, TCategoryTab } from './TabTrail';
+export { Pagination } from './Pagination';

package/dist/components/index.js

@@ -30,6 +30,7 @@ import { EAccordionSize } from "./Accordion/constants.js";
 import { AccordionItem } from "./Accordion/AccordionItem/AccordionItem.js";
 import { TabTrail } from "./TabTrail/TabTrail.js";
 import { ETabTrailSize } from "./TabTrail/constants.js";
+import { Pagination } from "./Pagination/Pagination.js";
 export {
   Accordion,
   AccordionItem,
@@ -60,6 +61,7 @@ export {
   Loader,
   MergedButton,
   OtpInput,
+  Pagination,
   RadioGroup,
   SelectSearch,
   Slider,

package/dist/hooks/useWindowSize/index.d.ts

@@ -0,0 +1,4 @@
+export declare function useWindowSize(): {
+    width: number;
+    height: number;
+};

package/dist/hooks/useWindowSize/index.js

@@ -0,0 +1,26 @@
+import { useState, useRef, useEffect } from "react";
+function getWindowSize() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState(getWindowSize());
+  const timeoutRef = useRef(null);
+  function handleResize() {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setWindowSize(getWindowSize()), 500);
+  }
+  useEffect(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const { width, height } = windowSize;
+  return { width, height };
+}
+export {
+  useWindowSize
+};

package/dist/index.js

@@ -30,6 +30,7 @@ import { EAccordionSize } from "./components/Accordion/constants.js";
 import { AccordionItem } from "./components/Accordion/AccordionItem/AccordionItem.js";
 import { TabTrail } from "./components/TabTrail/TabTrail.js";
 import { ETabTrailSize } from "./components/TabTrail/constants.js";
+import { Pagination } from "./components/Pagination/Pagination.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
 import { EMediaQuery } from "./hooks/useMediaQuery/constants.js";
 import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
@@ -69,6 +70,7 @@ import './assets/index.css';export {
   Loader,
   MergedButton,
   OtpInput,
+  Pagination,
   RadioGroup,
   SelectSearch,
   Slider,

package/package.json

@@ -1,128 +1,128 @@
-{
-  "name": "mimir-ui-kit",
-  "private": false,
-  "version": "1.13.7",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./components": {
-      "types": "./dist/components/index.d.ts",
-      "default": "./dist/components/index.js"
-    },
-    "./hooks": {
-      "types": "./dist/hooks/index.d.ts",
-      "default": "./dist/hooks/index.js"
-    },
-    "./icons": {
-      "types": "./dist/icons/index.d.ts",
-      "default": "./dist/icons/index.js"
-    },
-    "./styles": {
-      "default": "./dist/assets/index.css"
-    }
-  },
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "**/*.{css,scss}"
-  ],
-  "scripts": {
-    "build": "tsc --p ./tsconfig-build.json && vite build",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "ts:check": "tsc -b",
-    "lint:fix": "eslint . --ext ts,tsx --fix",
-    "lint:prettier": "npx prettier . --write",
-    "lint:stylelint": "stylelint '**/*.module{.css,.scss}'",
-    "lint:stylelint:fix": "stylelint '**/*.module{.css,.scss}' --fix",
-    "icons": "svgr --expand-props start ./src/icons/svgs",
-    "prepare": "husky",
-    "create-component": "node createComponent.js"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.1",
-    "@headlessui/react": "^2.1.2",
-    "@laynezh/vite-plugin-lib-assets": "^0.5.23",
-    "@loadable/component": "^5.15.2",
-    "@storybook/addon-essentials": "^8.2.2",
-    "@storybook/addon-interactions": "^8.2.2",
-    "@storybook/addon-links": "^8.2.2",
-    "@storybook/addon-onboarding": "^8.2.2",
-    "@storybook/blocks": "^8.2.2",
-    "@storybook/builder-vite": "^8.2.2",
-    "@storybook/react": "^8.2.2",
-    "@storybook/react-vite": "^8.2.2",
-    "@storybook/test": "^8.2.2",
-    "@svgr/cli": "^8.1.0",
-    "@svgr/core": "^8.1.0",
-    "@svgr/plugin-svgo": "^8.1.0",
-    "@types/node": "^20.14.10",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.19",
-    "chalk": "4.1.2",
-    "classnames": "^2.5.1",
-    "dotenv": "^16.4.5",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "eslint-plugin-storybook": "^0.8.0",
-    "glob": "10.3.10",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "p-limit": "^6.1.0",
-    "postcss-preset-env": "^9.6.0",
-    "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "sass": "^1.77.7",
-    "storybook": "^8.2.2",
-    "stylelint": "^16.7.0",
-    "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-rational-order": "^0.1.2",
-    "stylelint-config-standard": "^36.0.1",
-    "stylelint-order": "^6.0.4",
-    "stylelint-prettier": "^5.0.0",
-    "stylelint-scss": "^6.4.0",
-    "superagent": "^9.0.2",
-    "typescript": "^5.2.2",
-    "vite": "^5.3.1",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-plugin-svgr": "^4.2.0"
-  },
-  "peerDependencies": {
-    "@headlessui/react": "^2.1.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "**/*.{ts,tsx}": [
-      "eslint --ignore-path .eslintignore",
-      "prettier --write"
-    ],
-    "**/*.{css,scss}": [
-      "stylelint --fix"
-    ]
-  },
-  "dependencies": {
-    "swiper": "^11.1.5",
-    "use-clipboard-copy": "^0.2.0"
-  }
-}
+{
+  "name": "mimir-ui-kit",
+  "private": false,
+  "version": "1.14.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "default": "./dist/hooks/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "default": "./dist/icons/index.js"
+    },
+    "./styles": {
+      "default": "./dist/assets/index.css"
+    }
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.{css,scss}"
+  ],
+  "scripts": {
+    "build": "tsc --p ./tsconfig-build.json && vite build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "ts:check": "tsc -b",
+    "lint:fix": "eslint . --ext ts,tsx --fix",
+    "lint:prettier": "npx prettier . --write",
+    "lint:stylelint": "stylelint '**/*.module{.css,.scss}'",
+    "lint:stylelint:fix": "stylelint '**/*.module{.css,.scss}' --fix",
+    "icons": "svgr --expand-props start ./src/icons/svgs",
+    "prepare": "husky",
+    "create-component": "node createComponent.js"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@headlessui/react": "^2.1.2",
+    "@laynezh/vite-plugin-lib-assets": "^0.5.23",
+    "@loadable/component": "^5.15.2",
+    "@storybook/addon-essentials": "^8.2.2",
+    "@storybook/addon-interactions": "^8.2.2",
+    "@storybook/addon-links": "^8.2.2",
+    "@storybook/addon-onboarding": "^8.2.2",
+    "@storybook/blocks": "^8.2.2",
+    "@storybook/builder-vite": "^8.2.2",
+    "@storybook/react": "^8.2.2",
+    "@storybook/react-vite": "^8.2.2",
+    "@storybook/test": "^8.2.2",
+    "@svgr/cli": "^8.1.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "chalk": "4.1.2",
+    "classnames": "^2.5.1",
+    "dotenv": "^16.4.5",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-storybook": "^0.8.0",
+    "glob": "10.3.10",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
+    "p-limit": "^6.1.0",
+    "postcss-preset-env": "^9.6.0",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.77.7",
+    "storybook": "^8.2.2",
+    "stylelint": "^16.7.0",
+    "stylelint-config-idiomatic-order": "^10.0.0",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-order": "^6.0.4",
+    "stylelint-prettier": "^5.0.0",
+    "stylelint-scss": "^6.4.0",
+    "superagent": "^9.0.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-svgr": "^4.2.0"
+  },
+  "peerDependencies": {
+    "@headlessui/react": "^2.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.{ts,tsx}": [
+      "eslint --ignore-path .eslintignore",
+      "prettier --write"
+    ],
+    "**/*.{css,scss}": [
+      "stylelint --fix"
+    ]
+  },
+  "dependencies": {
+    "swiper": "^11.1.5",
+    "use-clipboard-copy": "^0.2.0"
+  }
+}