@soroka282/migrant.ui-kit 0.0.5

package/dist/style.css

@@ -0,0 +1 @@
+.ui-loader[data-v-5356c8e0]{width:24px;height:24px;border-radius:100%;border-width:4px;border-style:solid;border-color:var(--8184283c);border-left-color:var(--563581ee);animation:loader-spin-5356c8e0 1s infinite linear}.ui-loader.--xs-size[data-v-5356c8e0]{width:12px;height:12px;border-width:2px}.ui-loader.--s-size[data-v-5356c8e0]{width:22px;height:22px}.ui-loader.--m-size[data-v-5356c8e0]{width:32px;height:32px}.ui-loader.--l-size[data-v-5356c8e0]{width:42px;height:42px}.ui-loader.--custom-size[data-v-5356c8e0]{width:inherit;height:inherit}@keyframes loader-spin-5356c8e0{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ui-card[data-v-dffadc00]{padding:var(--7c8f68df);border-radius:var(--23ed9fd0);background-color:var(--bf2d7a28);border:1px solid transparent}.ui-card.--border[data-v-dffadc00]{border:1px solid rgba(255,255,255,.5)}.ui-card.--box-shadow[data-v-dffadc00]{box-shadow:0 0 13.5px #b4b4b426}@font-face{font-family:swiper-icons;src:url(data:application/font-woff;charset=utf-8;base64,\ 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);font-weight:400;font-style:normal}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--swiper-navigation-size: 44px}.swiper-button-prev,.swiper-button-next{position:absolute;top:var(--swiper-navigation-top-offset, 50%);width:calc(var(--swiper-navigation-size) / 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size) / 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev.swiper-button-hidden,.swiper-button-next.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-prev,.swiper-navigation-disabled .swiper-button-next{display:none!important}.swiper-button-prev svg,.swiper-button-next svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-prev svg,.swiper-rtl .swiper-button-next svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset, 10px);right:auto}.swiper-button-lock{display:none}.swiper-button-prev:after,.swiper-button-next:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:"prev"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:"next"}.swiper{width:95vw;height:100%;overflow:visible}.swiper-slide{display:flex;justify-content:start;align-items:center;flex-shrink:0;max-width:100%;text-align:center;font-size:18px;padding-right:10px}@media (min-width: 368px){.swiper-slide{max-width:84%}}.ui-swiper[data-v-018d07fb]{width:100%}.ui-swiper__container[data-v-018d07fb]{width:100%;overflow:hidden}.ui-swiper__slide[data-v-018d07fb]{width:auto;flex-shrink:0}.ui-input[data-v-3e7ba650]{font-size:15px;font-weight:600;line-height:100%;display:inline-block;width:100%;height:48px;padding:0 16px;background:var(--0222724a);color:var(--d552b89a);border:1px solid var(--826cde58);transition:all .25s;border-radius:8px;text-align:left;-webkit-appearance:unset;-moz-appearance:unset;appearance:unset;box-sizing:border-box;outline:0}.ui-input[data-v-3e7ba650]::placeholder{filter:opacity(90%)}.ui-input[data-v-3e7ba650]:hover,.ui-input[data-v-3e7ba650]:focus{filter:brightness(96%)}.ui-input.--error[data-v-3e7ba650]{border-color:var(--98ce34ba)}.ui-input.--capitalize[data-v-3e7ba650]{text-transform:capitalize}.ui-input.--textarea[data-v-3e7ba650]{resize:none;height:100px}.ui-input__label[data-v-3e7ba650]{font-size:13px;font-weight:500;line-height:20px}.ui-input__wrap[data-v-3e7ba650]{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;gap:12px;width:100%;gap:3px}.ui-input__inner[data-v-3e7ba650]{position:relative;width:100%}.ui-input__error[data-v-3e7ba650]{text-align:left;color:var(--98ce34ba);font-size:10px}.ui-modal[data-v-3fe926bc]{position:absolute;top:20px;left:50%;max-height:calc(100vh - 200px);width:100%;padding-bottom:max(env(safe-area-inset-top),20px);background:var(--white);transition:all .25s;animation:opacity-3fe926bc .3s ease-out;border-color:transparent;border-radius:12px 12px 0 0;overflow-y:auto;transform:translate(-50%)}.ui-modal.--center[data-v-3fe926bc]{top:50%;transform:translate(-50%,-50%)}.ui-modal.--bottom[data-v-3fe926bc]{top:initial;bottom:0}.ui-modal.--link-style[data-v-3fe926bc] a{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-skip-ink:none;color:var(--blue);word-break:break-word}.ui-modal--anim-hide[data-v-3fe926bc]{animation:opacity-reverse-3fe926bc .4s ease-out}.ui-modal__box[data-v-3fe926bc]{position:fixed;top:50%;left:50%;z-index:5;width:100%;height:100%;background:#0000004d;transform:translate(-50%,-50%)}.ui-modal__handle[data-v-3fe926bc]{display:inline-block;width:104px;height:4px;margin:0 auto;background:#c7c7c7;border-radius:12px}.ui-modal__handle-wrap[data-v-3fe926bc]{position:sticky;top:0;bottom:100%;z-index:99;display:block;width:100%;height:20px;background:var(--white);border:none;border-radius:12px;outline:none}.ui-modal__wrap[data-v-3fe926bc]{position:relative;display:flex;padding:0 16px 16px;transition:all .25s;overflow-x:hidden;flex-direction:column;gap:14px}.ui-modal__title[data-v-3fe926bc]{margin:0;color:#2b2b2b;font-weight:800;font-size:20px;line-height:24px}.ui-modal__title-inner[data-v-3fe926bc]{position:relative;z-index:3}.ui-modal__title-wrap[data-v-3fe926bc]{display:flex;justify-content:space-between;gap:10px;padding:16px 16px 14px;background:inherit}.ui-modal__header[data-v-3fe926bc]{position:sticky;top:0;bottom:0;z-index:99;background:var(--white)}.ui-modal__btn-back[data-v-3fe926bc]{width:28px;height:28px;background:transparent;border:none;outline:none;border-radius:100%;cursor:pointer}@keyframes opacity-3fe926bc{0%{opacity:0;transform:translateY(100%) translate(-50%)}25%{opacity:.8}to{opacity:1;transform:initial translate(-50%)}}@keyframes opacity-reverse-3fe926bc{0%{opacity:1;transform:translateY(0) translate(-50%)}25%{opacity:.6}to{opacity:0;transform:translateY(100%) translate(-50%)}}.ui-button[data-v-c532b6b0]{font-size:14px;font-weight:700;line-height:100%;width:100%;background:var(--0fe40156);color:var(--5d1c0b4c);border:none;transition:filter .25s;border-radius:8px;outline:none;cursor:pointer}.ui-button.is-box-shadow[data-v-c532b6b0]{box-shadow:0 4px 29px #0000001a}.ui-button[data-v-c532b6b0]:hover{filter:brightness(90%)}.ui-button[data-v-c532b6b0]:disabled{filter:opacity(70%)}.ui-button__loader[data-v-c532b6b0]{margin:0 auto}.ui-button.--xs-size[data-v-c532b6b0]{min-height:33px}.ui-button.--s-size[data-v-c532b6b0]{min-height:44px}.ui-button.--m-size[data-v-c532b6b0]{font-size:15px;font-weight:700;line-height:100%;min-height:54px}.ui-button.--l-size[data-v-c532b6b0]{min-height:64px}.ui-button.--custom-size[data-v-c532b6b0]{min-height:inherit}

package/dist/types/UI/ui-color.type.d.ts

@@ -0,0 +1,18 @@
+import { UIColor } from '../../constants';
+import { valueof } from '..';
+export declare enum UIColorName {
+    Transparent = "transparent",
+    White = "white",
+    Black = "black",
+    PurpleMain = "purple-main",
+    GrayText = "gray-text",
+    GrayBorder = "gray-border",
+    Gray = "gray",
+    Purple_66 = "purple-66",
+    Danger_1 = "danger-1",
+    Danger_2 = "danger-2",
+    Danger_3 = "danger-3",
+    Danger_4 = "danger-4",
+    Danger_5 = "danger-5"
+}
+export type UIColorValues = valueof<typeof UIColor>;

package/dist/types/UI/ui-input.type.d.ts

@@ -0,0 +1,59 @@
+import { UISize } from '..';
+export declare enum EInputType {
+    button = "button",
+    checkbox = "checkbox",
+    color = "color",
+    date = "date",
+    datetimelocal = "datetime-local",
+    email = "email",
+    file = "file",
+    hidden = "hidden",
+    image = "image",
+    month = "month",
+    number = "number",
+    password = "password",
+    radio = "radio",
+    range = "range",
+    reset = "reset",
+    search = "search",
+    submit = "submit",
+    tel = "tel",
+    text = "text",
+    time = "time",
+    url = "url",
+    week = "week"
+}
+export declare enum EInputInputmode {
+    text = "text",
+    tel = "tel",
+    url = "url",
+    email = "email",
+    numeric = "numeric",
+    decimal = "decimal",
+    search = "search"
+}
+export declare enum EInputComponentType {
+    mask = "mask",
+    textarea = "textarea",
+    input = "input"
+}
+export interface IInputProps {
+    component?: EInputComponentType;
+    id?: string;
+    label?: string;
+    mask?: string;
+    placeholder?: string;
+    type?: EInputType;
+    inputmode?: EInputInputmode;
+    modelValue?: string | number;
+    errorMessage?: string;
+    isError?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    masked?: boolean;
+    isCapitalize?: boolean;
+    isSetInputFocus?: boolean;
+    delay?: number;
+    size?: UISize;
+    isBoxShadow?: boolean;
+}

package/dist/types/UI/ui-modal.type.d.ts

@@ -0,0 +1,7 @@
+export declare enum ModalPositionTypes {
+    CENTER = "center",
+    BOTTOM = "bottom",
+    TOP = "top",
+    LEFT = "left",
+    RIGHT = "right"
+}

package/dist/types/UI/ui-size.type.d.ts

@@ -0,0 +1,7 @@
+export declare enum UISize {
+    Custom = "custom",
+    XS = "xs",
+    S = "s",
+    M = "m",
+    L = "l"
+}

package/dist/types/common.type.d.ts

@@ -0,0 +1,2 @@
+export type Nullable<T> = T | null | undefined;
+export type valueof<T> = T[keyof T];

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from './UI/ui-size.type';
+export * from './UI/ui-color.type';
+export * from './UI/ui-input.type';
+export * from './UI/ui-modal.type';
+export * from './common.type';
+export * from './plugin.type';

package/dist/types/plugin.type.d.ts

@@ -0,0 +1,6 @@
+export interface IFormattersType {
+    formatDate(value: string, time?: boolean): string;
+    formatAmount(value: string | number): string;
+    formatDateWithWordMonth(value: string, time?: boolean, isDate?: boolean): string;
+    formatPhone(value: string): string;
+}

package/dist/utils/debounce.util.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (mainFunction: any, delay: number) => (arg?: string) => void;
+export default _default;

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { default as debounce } from './debounce.util';

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,65 @@
+{
+    "name": "@soroka282/migrant.ui-kit",
+    "private": false,
+    "version": "0.0.5",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vue-tsc -b && vite build",
+        "preview": "vite preview",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "publish": "npm run build && npm publish --access public"
+    },
+    "dependencies": {
+        "maska": "^1.5.2",
+        "pinia": "^3.0.3",
+        "swiper": "^11.2.10",
+        "vue": "^3.5.17"
+    },
+    "devDependencies": {
+        "@storybook/vue3-vite": "^9.0.17",
+        "@types/node": "24.0.15",
+        "@types/react": "^19.1.8",
+        "@types/react-dom": "^19.1.6",
+        "@typescript-eslint/eslint-plugin": "^6.21.0",
+        "@typescript-eslint/parser": "^6.21.0",
+        "@vitejs/plugin-vue": "^4.6.2",
+        "@vue/eslint-config-typescript": "^12.0.0",
+        "@vue/tsconfig": "^0.7.0",
+        "eslint": "^8.57.1",
+        "eslint-config-prettier": "^8.10.0",
+        "eslint-config-standard": "^17.0.1",
+        "eslint-import-resolver-alias": "^1.1.2",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-node": "^11.1.0",
+        "eslint-plugin-prettier": "^5.1.3",
+        "eslint-plugin-promise": "^6.1.1",
+        "eslint-plugin-standard": "^5.0.0",
+        "eslint-plugin-storybook": "^9.0.17",
+        "eslint-plugin-unicorn": "^48.0.1",
+        "eslint-plugin-vue": "^9.33.0",
+        "postcss": "^8.5.4",
+        "postcss-cli": "^11.0.1",
+        "postcss-html": "^1.8.0",
+        "postcss-scss": "^4.0.9",
+        "postcss-sorting": "^9.1.0",
+        "prettier": "^3.5.2",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "sass": "^1.89.2",
+        "sass-loader": "^16.0.5",
+        "storybook": "^9.0.17",
+        "stylelint": "^16.20.0",
+        "stylelint-config-html": "^1.1.0",
+        "stylelint-config-standard": "^38.0.0",
+        "stylelint-config-standard-scss": "^15.0.1",
+        "stylelint-config-standard-vue": "^1.0.0",
+        "stylelint-order": "^6.0.4",
+        "stylelint-scss": "^6.12.0",
+        "typescript": "^5.4.5",
+        "vite": "^5.4.19",
+        "vite-plugin-dts": "^4.5.4",
+        "vue-tsc": "^2.2.12"
+    }
+}

package/postcss-sorting.config.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @type {import('postcss-sorting').SortingConfig} */
+module.exports = {
+    order: ['custom-properties', 'dollar-variables', 'declarations', 'rules', 'at-rules'],
+    'properties-order': {
+        order: [
+            'position',
+            'top',
+            'right',
+            'bottom',
+            'left',
+            'z-index',
+            'display',
+            'flex',
+            'justify-content',
+            'align-items',
+            'width',
+            'height',
+            'margin',
+            'padding',
+            'background',
+            'color',
+            'font',
+            'border',
+            'box-shadow',
+            'transition',
+            'animation',
+        ],
+        unspecified: 'bottom',
+    },
+};

package/postcss-sorting.config.cts

@@ -0,0 +1,30 @@
+/** @type {import('postcss-sorting').SortingConfig} */
+module.exports = {
+    order: ['custom-properties', 'dollar-variables', 'declarations', 'rules', 'at-rules'],
+    'properties-order': {
+        order: [
+            'position',
+            'top',
+            'right',
+            'bottom',
+            'left',
+            'z-index',
+            'display',
+            'flex',
+            'justify-content',
+            'align-items',
+            'width',
+            'height',
+            'margin',
+            'padding',
+            'background',
+            'color',
+            'font',
+            'border',
+            'box-shadow',
+            'transition',
+            'animation',
+        ],
+        unspecified: 'bottom',
+    },
+};

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div>UI-kit</div>
+</template>

package/src/App.vue.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import('vue').DefineComponent<
+    {},
+    {},
+    {},
+    {},
+    {},
+    import('vue').ComponentOptionsMixin,
+    import('vue').ComponentOptionsMixin,
+    {},
+    string,
+    import('vue').PublicProps,
+    Readonly<{}> & Readonly<{}>,
+    {},
+    {},
+    {},
+    {},
+    string,
+    import('vue').ComponentProvideOptions,
+    true,
+    {},
+    any
+>;
+export default _default;

package/src/assets/scss/common/swiper.scss

@@ -0,0 +1,20 @@
+.swiper {
+    width: 95vw;
+    height: 100%;
+    overflow: visible;
+}
+
+.swiper-slide {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-shrink: 0;
+    max-width: 100%;
+    text-align: center;
+    font-size: 18px;
+    padding-right: 10px;
+
+    @media (min-width: 368px) {
+        max-width: 84%;
+    }
+}

package/src/assets/scss/common/variables.scss

@@ -0,0 +1,15 @@
+:root {
+    --transparent: transparent;
+    --white: #fff;
+    --black: #000;
+    --purple-main: #666EE4;
+    --purple-66: #DDDEF5A8;
+    --gray-text: #3A3A3A;
+    --gray-border: #d8d8d8;
+    --gray: #323232;
+    --danger-1: #FD324E;
+    --danger-2: #EA4242;
+    --danger-3: #FFE9E9;
+    --danger-4: #FFDCDC;
+    --danger-5: #DA363C;
+}

package/src/assets/scss/index.scss

@@ -0,0 +1,10 @@
+@use 'mixins/index.mixin';
+@forward 'mixins/index.mixin';
+@forward 'common/variables';
+
+@include index.indentation-creator-list(margin);
+@include index.indentation-creator-list(padding);
+
+* {
+    font-family: inherit, sans-serif;
+}

package/src/assets/scss/mixins/flex.minix.scss

@@ -0,0 +1,7 @@
+@mixin flex ($direction: column, $gap: 12px, $alignItems: flex-start, $justifyContent: flex-start) {
+    display: flex;
+    align-items: $alignItems;
+    justify-content: $justifyContent;
+    flex-direction: $direction;
+    gap: $gap;
+}

package/src/assets/scss/mixins/identation.mixin.scss

@@ -0,0 +1,17 @@
+@use "sass:string";
+
+@mixin indentation-creator ($className, $indentationName, $direction, $maxCount: 200) {
+    @for $i from 1 through $maxCount {
+        .#{$className}-#{$i} {
+            #{$indentationName}-#{$direction}: #{$i}px;
+        }
+    }
+}
+
+@mixin indentation-creator-list ($indentationName) {
+    $directionNameList: (top, left, bottom, right);
+
+    @each $direction in $directionNameList {
+        @include indentation-creator(#{string.slice($indentationName, 0, 1)}#{string.slice($direction, 0, 1)}, $indentationName, $direction);
+    }
+}

package/src/assets/scss/mixins/index.mixin.scss

@@ -0,0 +1,3 @@
+@forward "typograph.mixin";
+@forward "flex.minix";
+@forward "identation.mixin";

package/src/assets/scss/mixins/typograph.mixin.scss

@@ -0,0 +1,5 @@
+@mixin text ($size: 14px, $weight: 400, $lheight: 22px) {
+    font-size: $size;
+    font-weight: $weight;
+    line-height: $lheight;
+}

package/src/components/UI/button/UIButton.stories.js

@@ -0,0 +1,57 @@
+import { UIColorName, UISize } from '@/types';
+import { UIButton } from '@/components';
+import { UIColor } from '@/constants';
+export default {
+    title: 'UIButton',
+    component: UIButton,
+    argTypes: {
+        isLoading: {
+            control: { type: 'boolean' },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+        },
+        isBoxShadow: {
+            control: { type: 'boolean' },
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(UISize),
+        },
+        color: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+        bgColor: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+        loaderBorderColor: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+    },
+    args: {
+        size: UISize.M,
+        color: UIColorName.White,
+        bgColor: UIColorName.PurpleMain,
+        loaderBorderColor: 'transparent',
+        disabled: false,
+        isLoading: false,
+        isBoxShadow: true,
+    },
+};
+export const DefaultButton = (args) => ({
+    components: { UIButton },
+    setup() {
+        return { args, UIColor };
+    },
+    template: `<UIButton
+        v-bind="args"
+        :color="UIColor[args.color]"
+        :bg-color="UIColor[args.bgColor]"
+        :loader-border-color="UIColor[args.loaderBorderColor]"
+    >
+        Кнопка
+    </UIButton>`,
+});

package/src/components/UI/button/UIButton.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryFn } from '@storybook/vue3-vite';
+import { UIColorName, UISize } from '@/types';
+import { UIButton } from '@/components';
+import { UIColor } from '@/constants';
+
+export default {
+    title: 'UIButton',
+    component: UIButton,
+    argTypes: {
+        isLoading: {
+            control: { type: 'boolean' },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+        },
+        isBoxShadow: {
+            control: { type: 'boolean' },
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(UISize),
+        },
+        color: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+        bgColor: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+        loaderBorderColor: {
+            control: { type: 'select' },
+            options: Object.keys(UIColorName),
+        },
+    },
+    args: {
+        size: UISize.M,
+        color: UIColorName.White,
+        bgColor: UIColorName.PurpleMain,
+        loaderBorderColor: 'transparent',
+        disabled: false,
+        isLoading: false,
+        isBoxShadow: true,
+    },
+} as Meta<typeof UIButton>;
+
+export const DefaultButton: StoryFn<typeof UIButton> = (args) => ({
+    components: { UIButton },
+    setup() {
+        return { args, UIColor };
+    },
+    template: `<UIButton
+        v-bind="args"
+        :color="UIColor[args.color]"
+        :bg-color="UIColor[args.bgColor]"
+        :loader-border-color="UIColor[args.loaderBorderColor]"
+    >
+        Кнопка
+    </UIButton>`,
+});

package/src/components/UI/button/UIButton.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+    import { computed } from 'vue';
+    import { Nullable, UIColorName, UIColorValues, UISize } from '@/types';
+    import { UILoader } from '@/components';
+    import { UIColor } from '@/constants';
+
+    const props = withDefaults(
+        defineProps<{
+            text?: string;
+            isLoading?: boolean;
+            isBoxShadow?: boolean;
+            disabled?: boolean;
+            size?: UISize;
+            color?: UIColorValues;
+            bgColor?: UIColorValues;
+            loaderBorderColor: UIColorValues;
+        }>(),
+        {
+            text: '',
+            isLoading: false,
+            isBoxShadow: true,
+            disabled: false,
+            size: UISize.M,
+            color: UIColor[UIColorName.PurpleMain],
+            bgColor: UIColor[UIColorName.White],
+            loaderBorderColor: UIColor[UIColorName.Transparent],
+        },
+    );
+
+    const emit = defineEmits<{
+        click: [void];
+    }>();
+
+    const classList = computed(() => ({
+        [`--${props.size}-size`]: props.size,
+        'is-box-shadow': props.isBoxShadow,
+    }));
+
+    const borderColor = computed<Nullable<UIColorValues>>(
+        () => (props.color as UIColorValues) || null,
+    );
+</script>
+
+<template>
+    <button
+        :class="classList"
+        :disabled="disabled || isLoading"
+        class="ui-button"
+        @click="emit('click')"
+    >
+        <UILoader
+            v-if="isLoading"
+            :border-color="borderColor"
+            :loader-border-color="loaderBorderColor"
+            class="ui-button__loader"
+        />
+        <slot v-else>
+            <span v-html="text" />
+        </slot>
+    </button>
+</template>
+
+<style scoped lang="scss">
+    @use '@/assets/scss/mixins/index.mixin';
+
+    .ui-button {
+        @include index.text(14px, 700, 100%);
+
+        width: 100%;
+        background: v-bind(bgColor);
+        color: v-bind(color);
+        border: none;
+        transition: filter 0.25s;
+        border-radius: 8px;
+        outline: none;
+        cursor: pointer;
+
+        &.is-box-shadow {
+            box-shadow: 0 4px 29px rgb(0 0 0 / 10%);
+        }
+
+        // button state
+        &:hover {
+            filter: brightness(90%);
+        }
+
+        &:disabled {
+            filter: opacity(70%);
+        }
+
+        &__loader {
+            margin: 0 auto;
+        }
+
+        // button size
+        &.--xs-size {
+            min-height: 33px;
+        }
+
+        &.--s-size {
+            min-height: 44px;
+        }
+
+        &.--m-size {
+            @include index.text(15px, 700, 100%);
+
+            min-height: 54px;
+        }
+
+        &.--l-size {
+            min-height: 64px;
+        }
+
+        &.--custom-size {
+            min-height: inherit;
+        }
+    }
+</style>