From 4cd886e728b5014dee128075985b7f8f51a39fef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Fri, 17 Jan 2025 16:57:37 +0500
Subject: [PATCH 01/19] refactor: defineModel to unnamed

---
 README.md                                            | 2 +-
 src/Playground.vue                                   | 5 +++--
 src/common/interfaces/componentsProps.ts             | 6 ++++++
 src/stories/components/Checkbox/Checkbox.vue         | 2 +-
 src/stories/components/Knob/Knob.stories.ts          | 2 +-
 src/stories/components/Knob/Knob.vue                 | 4 +---
 src/stories/components/MenuDial/MenuDial.vue         | 2 +-
 src/stories/components/Popup/Popup.vue               | 2 +-
 src/stories/components/Select/Select.stories.ts      | 2 +-
 src/stories/components/Select/Select.vue             | 2 +-
 src/stories/components/SelectButton/SelectButton.vue | 2 +-
 src/stories/components/Slider/Slider.vue             | 2 +-
 src/stories/components/Table/Table.vue               | 2 +-
 src/stories/components/Tag/Tag.stories.ts            | 2 +-
 src/stories/components/ToggleSwitch/ToggleSwitch.vue | 2 +-
 15 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 3e593b3..4145a15 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<IProps>(), {
    
 });    
 const emit = defineEmits(['']);  
-const visible = defineModel('');  
+const visible = defineModel();  
 // watch(, () => {});
 // const computed1 = computed(() => );
 ```
diff --git a/src/Playground.vue b/src/Playground.vue
index bc22e0d..70a79cd 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -192,12 +192,13 @@ const selectOptions = [
     value: 'Second',
   },
 ];
-const knob = ref();
+const knob = ref(0);
 </script>
 
 <template>
   <h2 class="title gradient-text">Playground</h2>
-  <Knob v-model:value="knob" />
+  {{ knob }}
+  <Knob v-model="knob" />
   <Select :options="selectOptions" theme="sky">
     <template #icon-left-First>
       <AtIcon color="#3aa" size="20" />
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 46309d8..aa35d26 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -193,6 +193,12 @@ export interface IButtonProps {
   darknessTextColor?: TDarkness;
 }
 
+export interface IRatingProps {
+  count?: number;
+  theme?: TThemeColor;
+  darknessTheme?: TDarkness;
+}
+
 export interface ITSProps {
   size?: TSize;
   theme?: TThemeColorNoWhite;
diff --git a/src/stories/components/Checkbox/Checkbox.vue b/src/stories/components/Checkbox/Checkbox.vue
index d4572c1..d9350f3 100644
--- a/src/stories/components/Checkbox/Checkbox.vue
+++ b/src/stories/components/Checkbox/Checkbox.vue
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<ICheckboxProps>(), {
   darknessTextColor: '500',
   darknessBorder: '500',
 });
-const active = defineModel('active');
+const active = defineModel();
 // watch(, () => {});
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const activeThemeColor = computed(() => convertThemeToColor(props.activeTheme, props.darknessActiveTheme));
diff --git a/src/stories/components/Knob/Knob.stories.ts b/src/stories/components/Knob/Knob.stories.ts
index eafa6c6..3f40bb0 100644
--- a/src/stories/components/Knob/Knob.stories.ts
+++ b/src/stories/components/Knob/Knob.stories.ts
@@ -9,7 +9,7 @@ const meta: Meta = {
   parameters: {
     docs: {
       description: {
-        component: 'A component that is used as a Knob. Can be used with icon.',
+        component: 'A component to define number inputs with a dial.',
       },
     },
   },
diff --git a/src/stories/components/Knob/Knob.vue b/src/stories/components/Knob/Knob.vue
index 169c6ae..2724d60 100644
--- a/src/stories/components/Knob/Knob.vue
+++ b/src/stories/components/Knob/Knob.vue
@@ -29,9 +29,7 @@ const props = withDefaults(defineProps<IKnobProps>(), {
   colorAsTheme: false,
   textBold: false,
 });
-const value = defineModel<number>('value', {
-  default: 0,
-}) as Ref<number>;
+const value = defineModel<number>() as Ref<number>;
 
 const isClickHold = ref<boolean>(false);
 
diff --git a/src/stories/components/MenuDial/MenuDial.vue b/src/stories/components/MenuDial/MenuDial.vue
index 95a0856..6b492ac 100644
--- a/src/stories/components/MenuDial/MenuDial.vue
+++ b/src/stories/components/MenuDial/MenuDial.vue
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<IMDProps>(), {
   size: 'normal',
   direction: 'right',
 });
-const active = defineModel('active');
+const active = defineModel();
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const color = computed(() =>
diff --git a/src/stories/components/Popup/Popup.vue b/src/stories/components/Popup/Popup.vue
index d1eaa98..66e4f56 100644
--- a/src/stories/components/Popup/Popup.vue
+++ b/src/stories/components/Popup/Popup.vue
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<IPopupProps>(), {
   padding: '5px',
   darknessTheme: '500',
 });
-const active = defineModel<boolean>('active') as Ref<boolean>;
+const active = defineModel<boolean>() as Ref<boolean>;
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const secondaryColor = computed(() => convertThemeToSecondaryColor(props.theme, props.darknessTheme));
 
diff --git a/src/stories/components/Select/Select.stories.ts b/src/stories/components/Select/Select.stories.ts
index 3a8358c..01d4336 100644
--- a/src/stories/components/Select/Select.stories.ts
+++ b/src/stories/components/Select/Select.stories.ts
@@ -10,7 +10,7 @@ const meta: Meta = {
   parameters: {
     docs: {
       description: {
-        component: 'A component that is used as a Select. Can be used with icon.',
+        component: 'A component that is used to choose an item from a list.',
       },
     },
   },
diff --git a/src/stories/components/Select/Select.vue b/src/stories/components/Select/Select.vue
index f72e5d5..444efff 100644
--- a/src/stories/components/Select/Select.vue
+++ b/src/stories/components/Select/Select.vue
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<ISelectProps>(), {
   placeholder: 'Nothing selected',
   openIcon: 'ArrowShortDown',
 });
-const selected = defineModel('value');
+const selected = defineModel();
 const isOpen = ref<boolean>(false);
 const filter = ref<string>('');
 
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/stories/components/SelectButton/SelectButton.vue
index 9308fb0..3d491f3 100644
--- a/src/stories/components/SelectButton/SelectButton.vue
+++ b/src/stories/components/SelectButton/SelectButton.vue
@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<ISBProps>(), {
   darknessActiveBackgroundColor: '500',
 });
 const emit = defineEmits(['onClick']);
-const value = defineModel<never>('value');
+const value = defineModel<never>();
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const color = computed(() =>
diff --git a/src/stories/components/Slider/Slider.vue b/src/stories/components/Slider/Slider.vue
index d772589..f8daeb6 100644
--- a/src/stories/components/Slider/Slider.vue
+++ b/src/stories/components/Slider/Slider.vue
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<ISliderProps>(), {
   darknessTheme: '500',
   darknessBackgroundColor: '500',
 });
-const value = defineModel('value');
+const value = defineModel();
 const optionValue = computed({
   get() {
     return typeof value.value === 'string' && props.options
diff --git a/src/stories/components/Table/Table.vue b/src/stories/components/Table/Table.vue
index c7f1a4c..a2c6756 100644
--- a/src/stories/components/Table/Table.vue
+++ b/src/stories/components/Table/Table.vue
@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<ITableProps>(), {
   darknessTheme: '500',
   fontSize: '16px',
 });
-const data = defineModel<ITableItem[][]>('data');
+const data = defineModel<ITableItem[][]>();
 
 const columns = ref(props.columns);
 const sortStateActive = ref<[number, string] | []>([]);
diff --git a/src/stories/components/Tag/Tag.stories.ts b/src/stories/components/Tag/Tag.stories.ts
index 91c23aa..d45f2f2 100644
--- a/src/stories/components/Tag/Tag.stories.ts
+++ b/src/stories/components/Tag/Tag.stories.ts
@@ -10,7 +10,7 @@ const meta: Meta = {
   parameters: {
     docs: {
       description: {
-        component: 'A component is used to categorize content. Can be used with icon.',
+        component: 'A component is used to categorize content. Can be used with icons.',
       },
     },
   },
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
index bbc8c5d..03cb15a 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<ITSProps>(), {
   darknessTheme: '500',
   darknessNegativeTheme: '500',
 });
-const active = defineModel<boolean>('active');
+const active = defineModel<boolean>();
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const inactiveColor = computed(() => convertThemeToColor(props.negativeTheme, props.darknessNegativeTheme));
-- 
GitLab


From 5fa1973c2c45164797ab31346b7f8352cfeedc99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Fri, 17 Jan 2025 17:55:23 +0500
Subject: [PATCH 02/19] feat: start to do 'Rating'

---
 src/App.vue                                   |  2 +
 src/Playground.vue                            |  4 +-
 src/common/constants/icons.ts                 | 12 +--
 src/common/interfaces/common.ts               |  2 +-
 src/common/interfaces/componentsProp.ts       | 14 ++--
 src/common/interfaces/componentsProps.ts      | 13 ++--
 .../components/Rating/Rating.stories.ts       | 78 +++++++++++++++++++
 src/stories/components/Rating/Rating.vue      | 71 +++++++++++++++++
 .../components/SelectButton/SelectButton.vue  |  4 +-
 .../components/ToggleSwitch/ToggleSwitch.vue  |  4 +-
 src/stories/icons/Mono/StarIcon.vue           | 20 +++++
 11 files changed, 199 insertions(+), 25 deletions(-)
 create mode 100644 src/stories/components/Rating/Rating.stories.ts
 create mode 100644 src/stories/components/Rating/Rating.vue
 create mode 100644 src/stories/icons/Mono/StarIcon.vue

diff --git a/src/App.vue b/src/App.vue
index e48e3c7..6b6fa05 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -109,6 +109,7 @@ import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
 import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
 import Playground from '@/Playground.vue';
 import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
+import StarIcon from '@stories/icons/Mono/StarIcon.vue';
 
 const gentleIcons = {
   Age18Icon,
@@ -212,6 +213,7 @@ const gentleIcons = {
   SaveIcon,
   SearchIcon,
   SettingsIcon,
+  StarIcon,
   SortDownIcon,
   SortHorizontalIcon,
   SortUpIcon,
diff --git a/src/Playground.vue b/src/Playground.vue
index 70a79cd..64a17e4 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -216,7 +216,7 @@ const knob = ref(0);
     show-all-lines
     :columns="tableColumns"
     darknessTextColor="500"
-    :data="tableData"
+    v-model="tableData"
     fontSize="36px"
     theme="black"
     stripedRows
@@ -225,7 +225,7 @@ const knob = ref(0);
     show-all-lines
     :columns="tableColumns"
     darknessTextColor="500"
-    :data="tableData"
+    v-model="tableData"
     fontSize="20px"
     theme="black"
     stripedRows
diff --git a/src/common/constants/icons.ts b/src/common/constants/icons.ts
index 41c5605..1b44784 100644
--- a/src/common/constants/icons.ts
+++ b/src/common/constants/icons.ts
@@ -109,6 +109,7 @@ import SortUpIcon from '@stories/icons/Mono/SortUpIcon.vue';
 import SortVerticalIcon from '@stories/icons/Mono/SortVerticalIcon.vue';
 import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
 import SearchIcon from '@stories/icons/Mono/SearchIcon.vue';
+import StarIcon from '@stories/icons/Mono/StarIcon.vue';
 
 export const iconsSet: Record<string, Component> = {
   Age18: Age18Icon,
@@ -210,12 +211,13 @@ export const iconsSet: Record<string, Component> = {
   Plus: PlusIcon,
   Pointer: PointerIcon,
   Save: SaveIcon,
-  SearchIcon,
+  Search: SearchIcon,
   Settings: SettingsIcon,
-  SortDownIcon,
-  SortHorizontalIcon,
-  SortUpIcon,
-  SortVerticalIcon,
+  Star: StarIcon,
+  SortDown: SortDownIcon,
+  SortHorizontal: SortHorizontalIcon,
+  SortUp: SortUpIcon,
+  SortVertical: SortVerticalIcon,
   Table: TableIcon,
   Trash: TrashIcon,
   Triangle: TriangleIcon,
diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
index cb8b472..cd37236 100644
--- a/src/common/interfaces/common.ts
+++ b/src/common/interfaces/common.ts
@@ -1,6 +1,6 @@
 import type { iconsSet } from '@/common/constants/icons';
 
-export type TIcons = keyof typeof iconsSet;
+export type TIcon = keyof typeof iconsSet;
 
 export type TThemeColor =
   | 'white'
diff --git a/src/common/interfaces/componentsProp.ts b/src/common/interfaces/componentsProp.ts
index 3b7b90a..0b549ea 100644
--- a/src/common/interfaces/componentsProp.ts
+++ b/src/common/interfaces/componentsProp.ts
@@ -1,4 +1,4 @@
-import type { TDarkness, TIcons, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
+import type { TDarkness, TIcon, TPosition, TTextStyle, TThemeColor } from '@interfaces/common';
 
 export interface ITableColumn {
   name: string;
@@ -34,8 +34,8 @@ export interface ITreeItem {
   color?: TThemeColor;
   textStyle?: TTextStyle;
   isTriangleToColor?: boolean;
-  iconBefore?: TIcons;
-  iconAfter?: TIcons;
+  iconBefore?: TIcon;
+  iconAfter?: TIcon;
   iconColor?: TThemeColor;
   children?: ITreeItem[];
   darknessColor?: TDarkness;
@@ -66,8 +66,8 @@ export interface ISelectOption {
   value: string;
   label?: string;
   group?: string;
-  iconLeft?: TIcons;
-  iconRight?: TIcons;
+  iconLeft?: TIcon;
+  iconRight?: TIcon;
   iconLeftColor?: TThemeColor;
   iconRightColor?: TThemeColor;
   color?: TThemeColor;
@@ -81,8 +81,8 @@ export interface ISelectGroup {
   nameColor?: TThemeColor;
   background?: TThemeColor;
   items?: ISelectOption[];
-  iconLeft?: TIcons;
-  iconRight?: TIcons;
+  iconLeft?: TIcon;
+  iconRight?: TIcon;
   iconLeftColor?: TThemeColor;
   iconRightColor?: TThemeColor;
 }
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index aa35d26..026ef57 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -3,7 +3,7 @@ import type {
   TDarkness,
   TDirection,
   TExpandedPosition,
-  TIcons,
+  TIcon,
   TPosition,
   TSize,
   TTextStyle,
@@ -115,7 +115,7 @@ export interface IDrawerProps {
   darknessTextColor?: TDarkness;
   modal?: boolean;
   dismissible?: boolean;
-  closeIcon?: TIcons;
+  closeIcon?: TIcon;
   headerDivider?: boolean;
   footerDivider?: boolean;
 }
@@ -129,7 +129,7 @@ export interface IModalProps {
   height?: string;
   position?: TExpandedPosition;
   dismissible?: boolean;
-  closeIcon?: TIcons;
+  closeIcon?: TIcon;
   headerDivider?: boolean;
 }
 
@@ -152,7 +152,7 @@ export interface ISelectProps {
   groups?: ISelectGroup[];
   width?: string;
   placeholder?: string;
-  openIcon?: TIcons;
+  openIcon?: TIcon;
   size?: TSize;
   name?: string;
   theme?: TThemeColor;
@@ -195,6 +195,7 @@ export interface IButtonProps {
 
 export interface IRatingProps {
   count?: number;
+  icon?: TIcon;
   theme?: TThemeColor;
   darknessTheme?: TDarkness;
 }
@@ -212,8 +213,8 @@ export interface ITagProps {
   value?: string;
   size?: TSize;
   rounded?: boolean;
-  iconLeft?: TIcons;
-  iconRight?: TIcons;
+  iconLeft?: TIcon;
+  iconRight?: TIcon;
   theme?: TThemeColor;
   background?: TThemeColor;
   border?: TThemeColor;
diff --git a/src/stories/components/Rating/Rating.stories.ts b/src/stories/components/Rating/Rating.stories.ts
new file mode 100644
index 0000000..2efc991
--- /dev/null
+++ b/src/stories/components/Rating/Rating.stories.ts
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Rating from './Rating.vue';
+
+const meta: Meta = {
+  title: 'Components/Rating',
+  component: Rating,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that is used as a rating.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: 'text' },
+    padding: { control: 'text' },
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+    textStyle: { control: 'select', options: ['bold', 'italic'] },
+    iconPos: { control: 'select', options: ['left', 'top', 'right', 'bottom'] },
+    width: { control: 'text' },
+    darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+    darknessTextColor: {
+      control: 'select',
+      options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    },
+    theme: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+    textColor: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+  },
+  args: {},
+} satisfies Meta<typeof Rating>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {},
+};
diff --git a/src/stories/components/Rating/Rating.vue b/src/stories/components/Rating/Rating.vue
new file mode 100644
index 0000000..a97b830
--- /dev/null
+++ b/src/stories/components/Rating/Rating.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { IRatingProps } from '@interfaces/componentsProps';
+import { ref } from 'vue';
+import { iconsSet } from '@/common/constants/icons';
+
+const props = withDefaults(defineProps<IRatingProps>(), {
+  count: 5,
+});
+
+const value = defineModel();
+const onHoverIndex = ref();
+
+// const textColor = computed(() => {});
+</script>
+
+<template>
+  {{ value }}
+  <ul class="list">
+    <li v-for="index of Array(count).keys()" :key="index" class="item">
+      <component
+        class="icon"
+        :is="iconsSet[icon ?? 'Star']"
+        color="black"
+        @pointerenter="onHoverIndex = index"
+        @pointerleave="onHoverIndex = null"
+      />
+      <Transition>
+        <component
+          class="hoverIcon"
+          v-show="onHoverIndex === index"
+          :is="iconsSet[icon ?? 'Star']"
+          color="gray"
+          @pointerenter="onHoverIndex = index"
+          @pointerleave="onHoverIndex = null"
+          @click="value = index + 1"
+      /></Transition>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.list {
+  display: flex;
+}
+.item {
+  position: relative;
+  cursor: pointer;
+  transition: all 1s ease-in-out;
+}
+.icon {
+  opacity: 1;
+  transition: opacity 0.15s ease-in-out;
+  :hover {
+    opacity: 0;
+  }
+}
+.hoverIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/stories/components/SelectButton/SelectButton.vue
index 3d491f3..1d1f1b6 100644
--- a/src/stories/components/SelectButton/SelectButton.vue
+++ b/src/stories/components/SelectButton/SelectButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
 import type { ISBProps } from '@interfaces/componentsProps';
 import { convertThemeToSecondaryColor, convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
 import type { ISBOption } from '@interfaces/componentsProp';
@@ -12,7 +12,7 @@ const props = withDefaults(defineProps<ISBProps>(), {
   darknessActiveBackgroundColor: '500',
 });
 const emit = defineEmits(['onClick']);
-const value = defineModel<never>();
+const value = defineModel() as Ref<string | number | boolean | never>;
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const color = computed(() =>
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
index 03cb15a..472ff20 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
 import type { ITSProps } from '@interfaces/componentsProps';
 import { convertThemeToColor } from '@helpers/common';
 
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<ITSProps>(), {
   darknessTheme: '500',
   darknessNegativeTheme: '500',
 });
-const active = defineModel<boolean>();
+const active = defineModel() as Ref<boolean>;
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const inactiveColor = computed(() => convertThemeToColor(props.negativeTheme, props.darknessNegativeTheme));
diff --git a/src/stories/icons/Mono/StarIcon.vue b/src/stories/icons/Mono/StarIcon.vue
new file mode 100644
index 0000000..8d6a078
--- /dev/null
+++ b/src/stories/icons/Mono/StarIcon.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg :width="size ?? '40px'" :height="size ?? '40px'" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.1507 2.3649C10.8306 0.713558 13.1694 0.713567 13.8494 2.3649L16.1856 8.0386L21.4255 8.34683C23.2632 8.45493 23.9912 10.7786 22.5437 11.916L18.1816 15.3433L19.9202 20.2694C20.5648 22.0955 18.497 23.6802 16.9012 22.5831L12 19.2135L7.09881 22.5831C5.50303 23.6802 3.43525 22.0955 4.07977 20.2694L5.81838 15.3433L1.45635 11.916C0.0087955 10.7787 0.736801 8.45493 2.57454 8.34683L7.81442 8.0386L10.1507 2.3649ZM12 3.1264L9.18559 9.9614L2.69199 10.3434L8.18164 14.6567L5.96575 20.935L12 16.7865L18.0343 20.935L15.8184 14.6567L21.308 10.3434L14.8144 9.9614L12 3.1264Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
-- 
GitLab


From 743bc88e1c0432c997b122b6e664dcb2d94d69ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 18 Jan 2025 16:59:00 +0500
Subject: [PATCH 03/19] fix: little troubles

---
 package.json                             | 3 ---
 src/common/interfaces/componentsProps.ts | 4 ++--
 src/stories/components/Knob/Knob.vue     | 1 +
 src/stories/components/Table/Table.vue   | 4 +++-
 src/stories/icons/Mono/CrossIcon.vue     | 7 +++----
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 6d95ea9..d29dba7 100644
--- a/package.json
+++ b/package.json
@@ -52,8 +52,5 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
-  },
-  "volta": {
-    "node": "23.6.0"
   }
 }
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 026ef57..ec87cbd 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -24,7 +24,6 @@ import type {
 
 export interface ITableProps {
   columns: ITableColumn[];
-  data: ITableItem[][];
   multipleSort?: boolean;
   gap?: string;
   size?: TSize;
@@ -195,7 +194,8 @@ export interface IButtonProps {
 
 export interface IRatingProps {
   count?: number;
-  icon?: TIcon;
+  size?: TSize;
+  gap?: string;
   theme?: TThemeColor;
   darknessTheme?: TDarkness;
 }
diff --git a/src/stories/components/Knob/Knob.vue b/src/stories/components/Knob/Knob.vue
index 2724d60..2067af9 100644
--- a/src/stories/components/Knob/Knob.vue
+++ b/src/stories/components/Knob/Knob.vue
@@ -151,6 +151,7 @@ const onPointerDown = ($event: MouseEvent) => {
   border-radius: 50%;
   background: v-bind(backgroundCircle);
   clip-path: polygon(0 0, 0 100%, 50% 50%, 50% 50%, 100% 100%, 100% 0);
+  cursor: pointer;
 }
 .selected {
   position: absolute;
diff --git a/src/stories/components/Table/Table.vue b/src/stories/components/Table/Table.vue
index a2c6756..43e754a 100644
--- a/src/stories/components/Table/Table.vue
+++ b/src/stories/components/Table/Table.vue
@@ -12,7 +12,9 @@ const props = withDefaults(defineProps<ITableProps>(), {
   darknessTheme: '500',
   fontSize: '16px',
 });
-const data = defineModel<ITableItem[][]>();
+const data = defineModel<ITableItem[][]>({
+  required: false,
+});
 
 const columns = ref(props.columns);
 const sortStateActive = ref<[number, string] | []>([]);
diff --git a/src/stories/icons/Mono/CrossIcon.vue b/src/stories/icons/Mono/CrossIcon.vue
index 294696a..eb100f9 100644
--- a/src/stories/icons/Mono/CrossIcon.vue
+++ b/src/stories/icons/Mono/CrossIcon.vue
@@ -8,15 +8,14 @@ defineProps<Props>();
 
 <template>
   <svg
+    :fill="color ?? '#000000'"
     :width="`${size ?? 40}px`"
     :height="`${size ?? 40}px`"
-    viewBox="0 0 24 24"
-    fill="none"
+    viewBox="0 0 1024 1024"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M6.99486 7.00636C6.60433 7.39689 6.60433 8.03005 6.99486 8.42058L10.58 12.0057L6.99486 15.5909C6.60433 15.9814 6.60433 16.6146 6.99486 17.0051C7.38538 17.3956 8.01855 17.3956 8.40907 17.0051L11.9942 13.4199L15.5794 17.0051C15.9699 17.3956 16.6031 17.3956 16.9936 17.0051C17.3841 16.6146 17.3841 15.9814 16.9936 15.5909L13.4084 12.0057L16.9936 8.42059C17.3841 8.03007 17.3841 7.3969 16.9936 7.00638C16.603 6.61585 15.9699 6.61585 15.5794 7.00638L11.9942 10.5915L8.40907 7.00636C8.01855 6.61584 7.38538 6.61584 6.99486 7.00636Z"
-      :fill="color ?? '#000000'"
+      d="M512.481 421.906L850.682 84.621c25.023-24.964 65.545-24.917 90.51.105s24.917 65.545-.105 90.51L603.03 512.377 940.94 850c25.003 24.984 25.017 65.507.033 90.51s-65.507 25.017-90.51.033L512.397 602.764 174.215 940.03c-25.023 24.964-65.545 24.917-90.51-.105s-24.917-65.545.105-90.51l338.038-337.122L84.14 174.872c-25.003-24.984-25.017-65.507-.033-90.51s65.507-25.017 90.51-.033L512.48 421.906z"
     />
   </svg>
 </template>
-- 
GitLab


From 2daef95a6cdb784217ebaff0ce61b7f6dbc337a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 18 Jan 2025 16:59:32 +0500
Subject: [PATCH 04/19] feat: component 'Rating'

---
 src/App.vue                                   |  2 +
 src/Playground.vue                            | 11 ++-
 src/common/constants/icons.ts                 |  2 +
 .../components/Rating/Rating.stories.ts       | 47 ++++------
 src/stories/components/Rating/Rating.vue      | 87 ++++++++++++++-----
 src/stories/icons/Mono/StarFilledIcon.vue     | 24 +++++
 src/stories/icons/Mono/StarIcon.vue           | 12 ++-
 7 files changed, 130 insertions(+), 55 deletions(-)
 create mode 100644 src/stories/icons/Mono/StarFilledIcon.vue

diff --git a/src/App.vue b/src/App.vue
index 6b6fa05..d843398 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -110,6 +110,7 @@ import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
 import Playground from '@/Playground.vue';
 import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
 import StarIcon from '@stories/icons/Mono/StarIcon.vue';
+import StarFilledIcon from '@stories/icons/Mono/StarFilledIcon.vue';
 
 const gentleIcons = {
   Age18Icon,
@@ -214,6 +215,7 @@ const gentleIcons = {
   SearchIcon,
   SettingsIcon,
   StarIcon,
+  StarFilledIcon,
   SortDownIcon,
   SortHorizontalIcon,
   SortUpIcon,
diff --git a/src/Playground.vue b/src/Playground.vue
index 64a17e4..27fe1cd 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -18,6 +18,8 @@ import Tag from '@stories/components/Tag/Tag.vue';
 import Select from '@stories/components/Select/Select.vue';
 import AtIcon from '@stories/icons/Mono/AtIcon.vue';
 import Knob from '@stories/components/Knob/Knob.vue';
+import Rating from '@stories/components/Rating/Rating.vue';
+import HomeIcon from '@stories/icons/Mono/HomeIcon.vue';
 
 const visibleDrawer = ref(false);
 const sliderOptions: ISliderOptions[] = [
@@ -197,7 +199,14 @@ const knob = ref(0);
 
 <template>
   <h2 class="title gradient-text">Playground</h2>
-  {{ knob }}
+  <Rating theme="red">
+    <template #offIcon>
+      <CrossIcon color="red" />
+    </template>
+    <template #onIcon>
+      <HomeIcon color="blue" />
+    </template>
+  </Rating>
   <Knob v-model="knob" />
   <Select :options="selectOptions" theme="sky">
     <template #icon-left-First>
diff --git a/src/common/constants/icons.ts b/src/common/constants/icons.ts
index 1b44784..3691b61 100644
--- a/src/common/constants/icons.ts
+++ b/src/common/constants/icons.ts
@@ -110,6 +110,7 @@ import SortVerticalIcon from '@stories/icons/Mono/SortVerticalIcon.vue';
 import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
 import SearchIcon from '@stories/icons/Mono/SearchIcon.vue';
 import StarIcon from '@stories/icons/Mono/StarIcon.vue';
+import StarFilledIcon from '@stories/icons/Mono/StarFilledIcon.vue';
 
 export const iconsSet: Record<string, Component> = {
   Age18: Age18Icon,
@@ -214,6 +215,7 @@ export const iconsSet: Record<string, Component> = {
   Search: SearchIcon,
   Settings: SettingsIcon,
   Star: StarIcon,
+  StarFilled: StarFilledIcon,
   SortDown: SortDownIcon,
   SortHorizontal: SortHorizontalIcon,
   SortUp: SortUpIcon,
diff --git a/src/stories/components/Rating/Rating.stories.ts b/src/stories/components/Rating/Rating.stories.ts
index 2efc991..320ab67 100644
--- a/src/stories/components/Rating/Rating.stories.ts
+++ b/src/stories/components/Rating/Rating.stories.ts
@@ -14,17 +14,10 @@ const meta: Meta = {
     },
   },
   argTypes: {
-    label: { control: 'text' },
-    padding: { control: 'text' },
+    count: { control: 'number' },
+    gap: { control: 'text' },
     size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
-    textStyle: { control: 'select', options: ['bold', 'italic'] },
-    iconPos: { control: 'select', options: ['left', 'top', 'right', 'bottom'] },
-    width: { control: 'text' },
     darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
-    darknessTextColor: {
-      control: 'select',
-      options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
-    },
     theme: {
       control: 'select',
       options: [
@@ -45,26 +38,6 @@ const meta: Meta = {
         'black',
       ],
     },
-    textColor: {
-      control: 'select',
-      options: [
-        'white',
-        'blue',
-        'sky',
-        'cyan',
-        'teal',
-        'green',
-        'yellow',
-        'orange',
-        'pink',
-        'fuchsia',
-        'purple',
-        'indigo',
-        'rose',
-        'red',
-        'black',
-      ],
-    },
   },
   args: {},
 } satisfies Meta<typeof Rating>;
@@ -76,3 +49,19 @@ type Story = StoryObj<typeof meta>;
 export const Simple: Story = {
   args: {},
 };
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+};
+
+export const Full: Story = {
+  args: {
+    theme: 'sky',
+    darknessTheme: '400',
+    count: 7,
+    gap: '2px',
+    size: 'huge',
+  },
+};
diff --git a/src/stories/components/Rating/Rating.vue b/src/stories/components/Rating/Rating.vue
index a97b830..6f32d32 100644
--- a/src/stories/components/Rating/Rating.vue
+++ b/src/stories/components/Rating/Rating.vue
@@ -1,39 +1,79 @@
 <script setup lang="ts">
 import type { IRatingProps } from '@interfaces/componentsProps';
-import { ref } from 'vue';
+import { computed, type Ref, ref } from 'vue';
 import { iconsSet } from '@/common/constants/icons';
+import StarFilledIcon from '@stories/icons/Mono/StarFilledIcon.vue';
+import { convertThemeToColor } from '@helpers/common';
 
 const props = withDefaults(defineProps<IRatingProps>(), {
   count: 5,
+  gap: '5px',
+  size: 'normal',
+  theme: 'black',
+  darknessTheme: '500',
 });
 
-const value = defineModel();
+const value = defineModel({
+  default: 0,
+}) as Ref<number>;
 const onHoverIndex = ref();
 
-// const textColor = computed(() => {});
+const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const themeColorOnHover = computed(() => convertThemeToColor(props.theme, '200'));
+const iconSize = computed(() => {
+  const size = props.size;
+  if (size === 'normal') return '20px';
+  if (size === 'large') return '30px';
+  if (size === 'huge') return '40px';
+  return '10px';
+});
+const onActiveClick = (index: number) => {
+  if (value.value > index) {
+    value.value = index;
+    return;
+  }
+  value.value = 0;
+};
 </script>
 
 <template>
-  {{ value }}
-  <ul class="list">
-    <li v-for="index of Array(count).keys()" :key="index" class="item">
-      <component
-        class="icon"
-        :is="iconsSet[icon ?? 'Star']"
-        color="black"
-        @pointerenter="onHoverIndex = index"
-        @pointerleave="onHoverIndex = null"
-      />
-      <Transition>
+  <ul class="list" :style="`gap: ${gap}`">
+    <li v-for="index of Array(count).keys()" :key="index" class="item iconSize">
+      <div v-show="value < index + 1 && !$slots.offIcon" class="iconSize iconContainer">
         <component
-          class="hoverIcon"
-          v-show="onHoverIndex === index"
-          :is="iconsSet[icon ?? 'Star']"
-          color="gray"
+          class="icon absoluteIcon"
+          :is="iconsSet['Star']"
+          :color="themeColor"
           @pointerenter="onHoverIndex = index"
           @pointerleave="onHoverIndex = null"
-          @click="value = index + 1"
-      /></Transition>
+          :size="iconSize"
+        />
+        <Transition>
+          <component
+            class="absoluteIcon"
+            v-show="onHoverIndex === index"
+            :is="iconsSet['Star']"
+            :color="themeColorOnHover"
+            @pointerenter="onHoverIndex = index"
+            @pointerleave="onHoverIndex = null"
+            @click="value = index + 1"
+            :size="iconSize"
+          />
+        </Transition>
+      </div>
+      <div v-show="value < index + 1" @click="value = index + 1">
+        <slot name="offIcon" :size="iconSize"></slot>
+      </div>
+      <StarFilledIcon
+        v-show="value >= index + 1 && !$slots.onIcon"
+        :color="themeColor"
+        :size="iconSize"
+        class="absoluteIcon"
+        @click="onActiveClick(index + 1)"
+      />
+      <div class="iconSize" v-show="value >= index + 1" @click="onActiveClick(index + 1)">
+        <slot name="onIcon" :size="iconSize"></slot>
+      </div>
     </li>
   </ul>
 </template>
@@ -45,7 +85,6 @@ const onHoverIndex = ref();
 .item {
   position: relative;
   cursor: pointer;
-  transition: all 1s ease-in-out;
 }
 .icon {
   opacity: 1;
@@ -54,11 +93,15 @@ const onHoverIndex = ref();
     opacity: 0;
   }
 }
-.hoverIcon {
+.absoluteIcon {
   position: absolute;
   top: 0;
   left: 0;
 }
+.iconSize {
+  width: v-bind(iconSize);
+  height: v-bind(iconSize);
+}
 .v-enter-active,
 .v-leave-active {
   transition: opacity 0.15s ease;
diff --git a/src/stories/icons/Mono/StarFilledIcon.vue b/src/stories/icons/Mono/StarFilledIcon.vue
new file mode 100644
index 0000000..85b83ee
--- /dev/null
+++ b/src/stories/icons/Mono/StarFilledIcon.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="size ?? '40px'"
+    :height="size ?? '40px'"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+  >
+    <path
+      :fill="color ?? '#000000'"
+      d="M8.67.912a.75.75 0 00-1.34 0L5.266 5.006l-4.622.662a.75.75 0 00-.412 1.285l3.335 3.18-.786 4.488a.75.75 0 001.082.796L8 13.287l4.137 2.13a.75.75 0 001.082-.796l-.786-4.489 3.335-3.18a.75.75 0 00-.412-1.284l-4.622-.662L8.67.912z"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/stories/icons/Mono/StarIcon.vue b/src/stories/icons/Mono/StarIcon.vue
index 8d6a078..56fe686 100644
--- a/src/stories/icons/Mono/StarIcon.vue
+++ b/src/stories/icons/Mono/StarIcon.vue
@@ -7,12 +7,18 @@ defineProps<Props>();
 </script>
 
 <template>
-  <svg :width="size ?? '40px'" :height="size ?? '40px'" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    :width="size ?? '40px'"
+    :height="size ?? '40px'"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+  >
     <path
+      :fill="color ?? '#000000'"
       fill-rule="evenodd"
+      d="M8 .5a.75.75 0 01.67.412l2.064 4.094 4.622.662a.75.75 0 01.412 1.285l-3.335 3.18.786 4.488a.75.75 0 01-1.082.796L8 13.287l-4.137 2.13a.75.75 0 01-1.082-.796l.786-4.489-3.335-3.18a.75.75 0 01.412-1.284l4.622-.662L7.33.912A.75.75 0 018 .5zm0 2.416L6.43 6.03a.75.75 0 01-.564.405l-3.48.498 2.507 2.39a.75.75 0 01.22.672l-.594 3.396 3.138-1.616a.75.75 0 01.686 0l3.138 1.616-.595-3.396a.75.75 0 01.221-.672l2.507-2.39-3.48-.498a.75.75 0 01-.563-.405L8 2.916z"
       clip-rule="evenodd"
-      d="M10.1507 2.3649C10.8306 0.713558 13.1694 0.713567 13.8494 2.3649L16.1856 8.0386L21.4255 8.34683C23.2632 8.45493 23.9912 10.7786 22.5437 11.916L18.1816 15.3433L19.9202 20.2694C20.5648 22.0955 18.497 23.6802 16.9012 22.5831L12 19.2135L7.09881 22.5831C5.50303 23.6802 3.43525 22.0955 4.07977 20.2694L5.81838 15.3433L1.45635 11.916C0.0087955 10.7787 0.736801 8.45493 2.57454 8.34683L7.81442 8.0386L10.1507 2.3649ZM12 3.1264L9.18559 9.9614L2.69199 10.3434L8.18164 14.6567L5.96575 20.935L12 16.7865L18.0343 20.935L15.8184 14.6567L21.308 10.3434L14.8144 9.9614L12 3.1264Z"
-      :fill="color ?? '#000000'"
     />
   </svg>
 </template>
-- 
GitLab


From 7085900b5ef1c5409f2bfa833f48e302e943485d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 18 Jan 2025 17:12:00 +0500
Subject: [PATCH 05/19] fix: build and move 'components' and 'icons' dirs from
 'stories' dir to 'src'

---
 src/App.vue                                   | 222 +++++++++---------
 src/Playground.vue                            |  42 ++--
 src/common/constants/icons.ts                 | 222 +++++++++---------
 .../components/Button/Button.stories.ts       |   0
 .../components/Button/Button.vue              |   0
 .../components/Checkbox/Checkbox.stories.ts   |   1 -
 .../components/Checkbox/Checkbox.vue          |   2 +-
 .../components/Divider/Divider.stories.ts     |   0
 .../components/Divider/Divider.vue            |   0
 .../components/Drawer/Drawer.stories.ts       |   0
 .../components/Drawer/Drawer.vue              |   0
 .../components/Knob/Knob.stories.ts           |   1 -
 src/{stories => }/components/Knob/Knob.vue    |  10 +-
 src/{stories => }/components/Knob/helpers.ts  |   0
 .../components/MenuDial/MenuDial.stories.ts   |   0
 .../components/MenuDial/MenuDial.vue          |   2 +-
 .../components/Modal/Modal.stories.ts         |   0
 src/{stories => }/components/Modal/Modal.vue  |   0
 .../components/Popup/Popup.stories.ts         |   2 +-
 src/{stories => }/components/Popup/Popup.vue  |   0
 .../components/Rating/Rating.stories.ts       |   0
 .../components/Rating/Rating.vue              |   2 +-
 .../components/Select/Select.stories.ts       |   0
 .../components/Select/Select.vue              |   6 +-
 .../components/Select/SelectItem.vue          |   0
 .../components/Select/helpers.ts              |   0
 .../SelectButton/SelectButton.stories.ts      |   0
 .../components/SelectButton/SelectButton.vue  |   0
 .../components/Slider/Slider.stories.ts       |   0
 .../components/Slider/Slider.vue              |   0
 .../components/Table/Table.stories.ts         |   1 -
 src/{stories => }/components/Table/Table.vue  |   4 +-
 .../components/Table/TableHeader.vue          |  18 +-
 src/{stories => }/components/Table/helpers.ts |   0
 .../components/Tag/Tag.stories.ts             |   0
 src/{stories => }/components/Tag/Tag.vue      |   0
 .../ToggleSwitch/ToggleSwitch.stories.ts      |   1 -
 .../components/ToggleSwitch/ToggleSwitch.vue  |   0
 .../components/TreeList/TreeItems.vue         |   2 +-
 .../components/TreeList/TreeList.stories.ts   |   0
 .../components/TreeList/TreeList.vue          |   2 +-
 src/{stories => }/icons/Mono/Age18Icon.vue    |   0
 src/{stories => }/icons/Mono/AirplaneIcon.vue |   0
 src/{stories => }/icons/Mono/AlarmIcon.vue    |   0
 .../icons/Mono/AlignCenterIcon.vue            |   0
 .../icons/Mono/AlignLeftIcon.vue              |   0
 .../icons/Mono/AlignRightIcon.vue             |   0
 src/{stories => }/icons/Mono/AnchorIcon.vue   |   0
 .../icons/Mono/AnchorLinkIcon.vue             |   0
 src/{stories => }/icons/Mono/ArchiveIcon.vue  |   0
 .../icons/Mono/ArrowForwardIcon.vue           |   0
 .../icons/Mono/ArrowLeftIcon.vue              |   0
 .../icons/Mono/ArrowRightIcon.vue             |   0
 .../icons/Mono/ArrowShortDownIcon.vue         |   0
 .../icons/Mono/ArrowsVerticalIcon.vue         |   0
 src/{stories => }/icons/Mono/AtIcon.vue       |   0
 src/{stories => }/icons/Mono/AwardIcon.vue    |   0
 .../icons/Mono/BackspaceIcon.vue              |   0
 src/{stories => }/icons/Mono/BadgeIcon.vue    |   0
 .../icons/Mono/BallFootballIcon.vue           |   0
 src/{stories => }/icons/Mono/BallIcon.vue     |   0
 src/{stories => }/icons/Mono/BanknoteIcon.vue |   0
 src/{stories => }/icons/Mono/BellIcon.vue     |   0
 src/{stories => }/icons/Mono/BellOffIcon.vue  |   0
 src/{stories => }/icons/Mono/BoxIcon.vue      |   0
 .../icons/Mono/BrightnessIcon.vue             |   0
 src/{stories => }/icons/Mono/BulbIcon.vue     |   0
 .../icons/Mono/CalculatorIcon.vue             |   0
 .../icons/Mono/CalendarAddIcon.vue            |   0
 src/{stories => }/icons/Mono/CalendarIcon.vue |   0
 .../icons/Mono/CalendarRemoveIcon.vue         |   0
 src/{stories => }/icons/Mono/CardsIcon.vue    |   0
 .../icons/Mono/ChartLineIcon.vue              |   0
 src/{stories => }/icons/Mono/ChartPieIcon.vue |   0
 src/{stories => }/icons/Mono/ChatIcon.vue     |   0
 .../icons/Mono/ChatWritingIcon.vue            |   0
 .../icons/Mono/CheckMarkIcon.vue              |   0
 .../icons/Mono/ChemistryFlaskIcon.vue         |   0
 src/{stories => }/icons/Mono/CodeIcon.vue     |   0
 src/{stories => }/icons/Mono/CoinsIcon.vue    |   0
 .../icons/Mono/ColorPaletteIcon.vue           |   0
 src/{stories => }/icons/Mono/CompassIcon.vue  |   0
 .../icons/Mono/ConstructionWorkerIcon.vue     |   0
 src/{stories => }/icons/Mono/ContactsIcon.vue |   0
 src/{stories => }/icons/Mono/CropIcon.vue     |   0
 .../icons/Mono/CrossCircleIcon.vue            |   0
 src/{stories => }/icons/Mono/CrossIcon.vue    |   0
 src/{stories => }/icons/Mono/CubeIcon.vue     |   0
 src/{stories => }/icons/Mono/CupIcon.vue      |   0
 src/{stories => }/icons/Mono/CursorIcon.vue   |   0
 src/{stories => }/icons/Mono/DiamondIcon.vue  |   0
 src/{stories => }/icons/Mono/DiaryIcon.vue    |   0
 src/{stories => }/icons/Mono/DiceIcon.vue     |   0
 src/{stories => }/icons/Mono/DigIcon.vue      |   0
 src/{stories => }/icons/Mono/DislikeIcon.vue  |   0
 src/{stories => }/icons/Mono/DisplayIcon.vue  |   0
 .../icons/Mono/DocumentAddIcon.vue            |   0
 .../icons/Mono/DocumentDeleteIcon.vue         |   0
 .../icons/Mono/DocumentEditIcon.vue           |   0
 src/{stories => }/icons/Mono/DocumentIcon.vue |   0
 src/{stories => }/icons/Mono/DollarIcon.vue   |   0
 .../icons/Mono/DotsHorizontalIcon.vue         |   0
 .../icons/Mono/DotsVerticalIcon.vue           |   0
 src/{stories => }/icons/Mono/DownloadIcon.vue |   0
 src/{stories => }/icons/Mono/DropIcon.vue     |   0
 src/{stories => }/icons/Mono/DumbbelIcon.vue  |   0
 src/{stories => }/icons/Mono/EarthIcon.vue    |   0
 src/{stories => }/icons/Mono/EditIcon.vue     |   0
 .../icons/Mono/EncyclopediaIcon.vue           |   0
 src/{stories => }/icons/Mono/ExitIcon.vue     |   0
 src/{stories => }/icons/Mono/EyeIcon.vue      |   0
 src/{stories => }/icons/Mono/FeedbackIcon.vue |   0
 src/{stories => }/icons/Mono/FilterIcon.vue   |   0
 .../icons/Mono/FingerprintIcon.vue            |   0
 src/{stories => }/icons/Mono/FireIcon.vue     |   0
 src/{stories => }/icons/Mono/FlagIcon.vue     |   0
 src/{stories => }/icons/Mono/FlashIcon.vue    |   0
 .../icons/Mono/FlashlightIcon.vue             |   0
 .../icons/Mono/FolderLockIcon.vue             |   0
 src/{stories => }/icons/Mono/FrameIcon.vue    |   0
 .../icons/Mono/FullScreenIcon.vue             |   0
 .../icons/Mono/GameControllerIcon.vue         |   0
 src/{stories => }/icons/Mono/GiftIcon.vue     |   0
 src/{stories => }/icons/Mono/GlassesIcon.vue  |   0
 .../icons/Mono/HamburgerIcon.vue              |   0
 src/{stories => }/icons/Mono/HandIcon.vue     |   0
 src/{stories => }/icons/Mono/HomeIcon.vue     |   0
 .../icons/Mono/ImageEditIcon.vue              |   0
 src/{stories => }/icons/Mono/ImageIcon.vue    |   0
 .../icons/Mono/LineDashedIcon.vue             |   0
 .../icons/Mono/LineDiagonalIcon.vue           |   0
 .../icons/Mono/LineDottedIcon.vue             |   0
 src/{stories => }/icons/Mono/LineIcon.vue     |   0
 src/{stories => }/icons/Mono/MoveIcon.vue     |   0
 .../icons/Mono/ParagraphIcon.vue              |   0
 .../icons/Mono/PhoneHandsetIcon.vue           |   0
 .../icons/Mono/PlusCircleIcon.vue             |   0
 src/{stories => }/icons/Mono/PlusIcon.vue     |   0
 src/{stories => }/icons/Mono/PointerIcon.vue  |   0
 src/{stories => }/icons/Mono/SaveIcon.vue     |   0
 src/{stories => }/icons/Mono/SearchIcon.vue   |   0
 src/{stories => }/icons/Mono/SettingsIcon.vue |   0
 src/{stories => }/icons/Mono/SortDownIcon.vue |   0
 .../icons/Mono/SortHorizontalIcon.vue         |   0
 src/{stories => }/icons/Mono/SortUpIcon.vue   |   0
 .../icons/Mono/SortVerticalIcon.vue           |   0
 .../icons/Mono/StarFilledIcon.vue             |   0
 src/{stories => }/icons/Mono/StarIcon.vue     |   0
 src/{stories => }/icons/Mono/TableIcon.vue    |   0
 src/{stories => }/icons/Mono/TrashIcon.vue    |   0
 src/{stories => }/icons/Mono/TriangleIcon.vue |   0
 src/{stories => }/icons/Mono/UserIcon.vue     |   0
 tsconfig.app.json                             |   2 +-
 vite.config.ts                                |   2 +-
 154 files changed, 267 insertions(+), 277 deletions(-)
 rename src/{stories => }/components/Button/Button.stories.ts (100%)
 rename src/{stories => }/components/Button/Button.vue (100%)
 rename src/{stories => }/components/Checkbox/Checkbox.stories.ts (98%)
 rename src/{stories => }/components/Checkbox/Checkbox.vue (98%)
 rename src/{stories => }/components/Divider/Divider.stories.ts (100%)
 rename src/{stories => }/components/Divider/Divider.vue (100%)
 rename src/{stories => }/components/Drawer/Drawer.stories.ts (100%)
 rename src/{stories => }/components/Drawer/Drawer.vue (100%)
 rename src/{stories => }/components/Knob/Knob.stories.ts (98%)
 rename src/{stories => }/components/Knob/Knob.vue (96%)
 rename src/{stories => }/components/Knob/helpers.ts (100%)
 rename src/{stories => }/components/MenuDial/MenuDial.stories.ts (100%)
 rename src/{stories => }/components/MenuDial/MenuDial.vue (98%)
 rename src/{stories => }/components/Modal/Modal.stories.ts (100%)
 rename src/{stories => }/components/Modal/Modal.vue (100%)
 rename src/{stories => }/components/Popup/Popup.stories.ts (97%)
 rename src/{stories => }/components/Popup/Popup.vue (100%)
 rename src/{stories => }/components/Rating/Rating.stories.ts (100%)
 rename src/{stories => }/components/Rating/Rating.vue (97%)
 rename src/{stories => }/components/Select/Select.stories.ts (100%)
 rename src/{stories => }/components/Select/Select.vue (97%)
 rename src/{stories => }/components/Select/SelectItem.vue (100%)
 rename src/{stories => }/components/Select/helpers.ts (100%)
 rename src/{stories => }/components/SelectButton/SelectButton.stories.ts (100%)
 rename src/{stories => }/components/SelectButton/SelectButton.vue (100%)
 rename src/{stories => }/components/Slider/Slider.stories.ts (100%)
 rename src/{stories => }/components/Slider/Slider.vue (100%)
 rename src/{stories => }/components/Table/Table.stories.ts (99%)
 rename src/{stories => }/components/Table/Table.vue (96%)
 rename src/{stories => }/components/Table/TableHeader.vue (88%)
 rename src/{stories => }/components/Table/helpers.ts (100%)
 rename src/{stories => }/components/Tag/Tag.stories.ts (100%)
 rename src/{stories => }/components/Tag/Tag.vue (100%)
 rename src/{stories => }/components/ToggleSwitch/ToggleSwitch.stories.ts (98%)
 rename src/{stories => }/components/ToggleSwitch/ToggleSwitch.vue (100%)
 rename src/{stories => }/components/TreeList/TreeItems.vue (98%)
 rename src/{stories => }/components/TreeList/TreeList.stories.ts (100%)
 rename src/{stories => }/components/TreeList/TreeList.vue (96%)
 rename src/{stories => }/icons/Mono/Age18Icon.vue (100%)
 rename src/{stories => }/icons/Mono/AirplaneIcon.vue (100%)
 rename src/{stories => }/icons/Mono/AlarmIcon.vue (100%)
 rename src/{stories => }/icons/Mono/AlignCenterIcon.vue (100%)
 rename src/{stories => }/icons/Mono/AlignLeftIcon.vue (100%)
 rename src/{stories => }/icons/Mono/AlignRightIcon.vue (100%)
 rename src/{stories => }/icons/Mono/AnchorIcon.vue (100%)
 rename src/{stories => }/icons/Mono/AnchorLinkIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ArchiveIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ArrowForwardIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ArrowLeftIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ArrowRightIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ArrowShortDownIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ArrowsVerticalIcon.vue (100%)
 rename src/{stories => }/icons/Mono/AtIcon.vue (100%)
 rename src/{stories => }/icons/Mono/AwardIcon.vue (100%)
 rename src/{stories => }/icons/Mono/BackspaceIcon.vue (100%)
 rename src/{stories => }/icons/Mono/BadgeIcon.vue (100%)
 rename src/{stories => }/icons/Mono/BallFootballIcon.vue (100%)
 rename src/{stories => }/icons/Mono/BallIcon.vue (100%)
 rename src/{stories => }/icons/Mono/BanknoteIcon.vue (100%)
 rename src/{stories => }/icons/Mono/BellIcon.vue (100%)
 rename src/{stories => }/icons/Mono/BellOffIcon.vue (100%)
 rename src/{stories => }/icons/Mono/BoxIcon.vue (100%)
 rename src/{stories => }/icons/Mono/BrightnessIcon.vue (100%)
 rename src/{stories => }/icons/Mono/BulbIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CalculatorIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CalendarAddIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CalendarIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CalendarRemoveIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CardsIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ChartLineIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ChartPieIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ChatIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ChatWritingIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CheckMarkIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ChemistryFlaskIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CodeIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CoinsIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ColorPaletteIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CompassIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ConstructionWorkerIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ContactsIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CropIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CrossCircleIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CrossIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CubeIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CupIcon.vue (100%)
 rename src/{stories => }/icons/Mono/CursorIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DiamondIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DiaryIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DiceIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DigIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DislikeIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DisplayIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DocumentAddIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DocumentDeleteIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DocumentEditIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DocumentIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DollarIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DotsHorizontalIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DotsVerticalIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DownloadIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DropIcon.vue (100%)
 rename src/{stories => }/icons/Mono/DumbbelIcon.vue (100%)
 rename src/{stories => }/icons/Mono/EarthIcon.vue (100%)
 rename src/{stories => }/icons/Mono/EditIcon.vue (100%)
 rename src/{stories => }/icons/Mono/EncyclopediaIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ExitIcon.vue (100%)
 rename src/{stories => }/icons/Mono/EyeIcon.vue (100%)
 rename src/{stories => }/icons/Mono/FeedbackIcon.vue (100%)
 rename src/{stories => }/icons/Mono/FilterIcon.vue (100%)
 rename src/{stories => }/icons/Mono/FingerprintIcon.vue (100%)
 rename src/{stories => }/icons/Mono/FireIcon.vue (100%)
 rename src/{stories => }/icons/Mono/FlagIcon.vue (100%)
 rename src/{stories => }/icons/Mono/FlashIcon.vue (100%)
 rename src/{stories => }/icons/Mono/FlashlightIcon.vue (100%)
 rename src/{stories => }/icons/Mono/FolderLockIcon.vue (100%)
 rename src/{stories => }/icons/Mono/FrameIcon.vue (100%)
 rename src/{stories => }/icons/Mono/FullScreenIcon.vue (100%)
 rename src/{stories => }/icons/Mono/GameControllerIcon.vue (100%)
 rename src/{stories => }/icons/Mono/GiftIcon.vue (100%)
 rename src/{stories => }/icons/Mono/GlassesIcon.vue (100%)
 rename src/{stories => }/icons/Mono/HamburgerIcon.vue (100%)
 rename src/{stories => }/icons/Mono/HandIcon.vue (100%)
 rename src/{stories => }/icons/Mono/HomeIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ImageEditIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ImageIcon.vue (100%)
 rename src/{stories => }/icons/Mono/LineDashedIcon.vue (100%)
 rename src/{stories => }/icons/Mono/LineDiagonalIcon.vue (100%)
 rename src/{stories => }/icons/Mono/LineDottedIcon.vue (100%)
 rename src/{stories => }/icons/Mono/LineIcon.vue (100%)
 rename src/{stories => }/icons/Mono/MoveIcon.vue (100%)
 rename src/{stories => }/icons/Mono/ParagraphIcon.vue (100%)
 rename src/{stories => }/icons/Mono/PhoneHandsetIcon.vue (100%)
 rename src/{stories => }/icons/Mono/PlusCircleIcon.vue (100%)
 rename src/{stories => }/icons/Mono/PlusIcon.vue (100%)
 rename src/{stories => }/icons/Mono/PointerIcon.vue (100%)
 rename src/{stories => }/icons/Mono/SaveIcon.vue (100%)
 rename src/{stories => }/icons/Mono/SearchIcon.vue (100%)
 rename src/{stories => }/icons/Mono/SettingsIcon.vue (100%)
 rename src/{stories => }/icons/Mono/SortDownIcon.vue (100%)
 rename src/{stories => }/icons/Mono/SortHorizontalIcon.vue (100%)
 rename src/{stories => }/icons/Mono/SortUpIcon.vue (100%)
 rename src/{stories => }/icons/Mono/SortVerticalIcon.vue (100%)
 rename src/{stories => }/icons/Mono/StarFilledIcon.vue (100%)
 rename src/{stories => }/icons/Mono/StarIcon.vue (100%)
 rename src/{stories => }/icons/Mono/TableIcon.vue (100%)
 rename src/{stories => }/icons/Mono/TrashIcon.vue (100%)
 rename src/{stories => }/icons/Mono/TriangleIcon.vue (100%)
 rename src/{stories => }/icons/Mono/UserIcon.vue (100%)

diff --git a/src/App.vue b/src/App.vue
index d843398..fc3bf13 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,116 +1,116 @@
 <script setup lang="ts">
-import Age18Icon from '@stories/icons/Mono/Age18Icon.vue';
-import AlarmIcon from '@stories/icons/Mono/AlarmIcon.vue';
-import AirplaneIcon from '@stories/icons/Mono/AirplaneIcon.vue';
-import ArrowLeftIcon from '@stories/icons/Mono/ArrowLeftIcon.vue';
-import ArrowForwardIcon from '@stories/icons/Mono/ArrowForwardIcon.vue';
-import ArchiveIcon from '@stories/icons/Mono/ArchiveIcon.vue';
-import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue';
-import AnchorIcon from '@stories/icons/Mono/AnchorIcon.vue';
-import AlignRightIcon from '@stories/icons/Mono/AlignRightIcon.vue';
-import AlignLeftIcon from '@stories/icons/Mono/AlignLeftIcon.vue';
-import AlignCenterIcon from '@stories/icons/Mono/AlignCenterIcon.vue';
-import ArrowRightIcon from '@stories/icons/Mono/ArrowRightIcon.vue';
-import AtIcon from '@stories/icons/Mono/AtIcon.vue';
-import AwardIcon from '@stories/icons/Mono/AwardIcon.vue';
-import BackspaceIcon from '@stories/icons/Mono/BackspaceIcon.vue';
-import BadgeIcon from '@stories/icons/Mono/BadgeIcon.vue';
-import BallFootballIcon from '@stories/icons/Mono/BallFootballIcon.vue';
-import BallIcon from '@stories/icons/Mono/BallIcon.vue';
-import BanknoteIcon from '@stories/icons/Mono/BanknoteIcon.vue';
-import BellIcon from '@stories/icons/Mono/BellIcon.vue';
-import BellOffIcon from '@stories/icons/Mono/BellOffIcon.vue';
-import BoxIcon from '@stories/icons/Mono/BoxIcon.vue';
-import BrightnessIcon from '@stories/icons/Mono/BrightnessIcon.vue';
-import BulbIcon from '@stories/icons/Mono/BulbIcon.vue';
-import CalculatorIcon from '@stories/icons/Mono/CalculatorIcon.vue';
-import CalendarIcon from '@stories/icons/Mono/CalendarIcon.vue';
-import CalendarAddIcon from '@stories/icons/Mono/CalendarAddIcon.vue';
-import CalendarRemoveIcon from '@stories/icons/Mono/CalendarRemoveIcon.vue';
-import CardsIcon from '@stories/icons/Mono/CardsIcon.vue';
-import ChartLineIcon from '@stories/icons/Mono/ChartLineIcon.vue';
-import ChartPieIcon from '@stories/icons/Mono/ChartPieIcon.vue';
-import ChatIcon from '@stories/icons/Mono/ChatIcon.vue';
-import ChatWritingIcon from '@stories/icons/Mono/ChatWritingIcon.vue';
-import CheckMarkIcon from '@stories/icons/Mono/CheckMarkIcon.vue';
-import ChemistryFlaskIcon from '@stories/icons/Mono/ChemistryFlaskIcon.vue';
-import CodeIcon from '@stories/icons/Mono/CodeIcon.vue';
-import CoinsIcon from '@stories/icons/Mono/CoinsIcon.vue';
-import ColorPaletteIcon from '@stories/icons/Mono/ColorPaletteIcon.vue';
-import CompassIcon from '@stories/icons/Mono/CompassIcon.vue';
-import ConstructionWorkerIcon from '@stories/icons/Mono/ConstructionWorkerIcon.vue';
-import ContactsIcon from '@stories/icons/Mono/ContactsIcon.vue';
-import CropIcon from '@stories/icons/Mono/CropIcon.vue';
-import CrossCircleIcon from '@stories/icons/Mono/CrossCircleIcon.vue';
-import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
-import CubeIcon from '@stories/icons/Mono/CubeIcon.vue';
-import CupIcon from '@stories/icons/Mono/CupIcon.vue';
-import CursorIcon from '@stories/icons/Mono/CursorIcon.vue';
-import LineDashedIcon from '@stories/icons/Mono/LineDashedIcon.vue';
-import LineDiagonalIcon from '@stories/icons/Mono/LineDiagonalIcon.vue';
-import DiamondIcon from '@stories/icons/Mono/DiamondIcon.vue';
-import DiaryIcon from '@stories/icons/Mono/DiaryIcon.vue';
-import DiceIcon from '@stories/icons/Mono/DiceIcon.vue';
-import DigIcon from '@stories/icons/Mono/DigIcon.vue';
-import DislikeIcon from '@stories/icons/Mono/DislikeIcon.vue';
-import DisplayIcon from '@stories/icons/Mono/DisplayIcon.vue';
-import DocumentIcon from '@stories/icons/Mono/DocumentIcon.vue';
-import DollarIcon from '@stories/icons/Mono/DollarIcon.vue';
-import DotsHorizontalIcon from '@stories/icons/Mono/DotsHorizontalIcon.vue';
-import DotsVerticalIcon from '@stories/icons/Mono/DotsVerticalIcon.vue';
-import LineDottedIcon from '@stories/icons/Mono/LineDottedIcon.vue';
-import DownloadIcon from '@stories/icons/Mono/DownloadIcon.vue';
-import DropIcon from '@stories/icons/Mono/DropIcon.vue';
-import DumbbelIcon from '@stories/icons/Mono/DumbbelIcon.vue';
-import EarthIcon from '@stories/icons/Mono/EarthIcon.vue';
-import EditIcon from '@stories/icons/Mono/EditIcon.vue';
-import EyeIcon from '@stories/icons/Mono/EyeIcon.vue';
-import EncyclopediaIcon from '@stories/icons/Mono/EncyclopediaIcon.vue';
-import ExitIcon from '@stories/icons/Mono/ExitIcon.vue';
-import FeedbackIcon from '@stories/icons/Mono/FeedbackIcon.vue';
-import FilterIcon from '@stories/icons/Mono/FilterIcon.vue';
-import FingerprintIcon from '@stories/icons/Mono/FingerprintIcon.vue';
-import FireIcon from '@stories/icons/Mono/FireIcon.vue';
-import FlagIcon from '@stories/icons/Mono/FlagIcon.vue';
-import FlashIcon from '@stories/icons/Mono/FlashIcon.vue';
-import FlashlightIcon from '@stories/icons/Mono/FlashlightIcon.vue';
-import FolderLockIcon from '@stories/icons/Mono/FolderLockIcon.vue';
-import FrameIcon from '@stories/icons/Mono/FrameIcon.vue';
-import FullScreenIcon from '@stories/icons/Mono/FullScreenIcon.vue';
-import GameControllerIcon from '@stories/icons/Mono/GameControllerIcon.vue';
-import GiftIcon from '@stories/icons/Mono/GiftIcon.vue';
-import GlassesIcon from '@stories/icons/Mono/GlassesIcon.vue';
-import HamburgerIcon from '@stories/icons/Mono/HamburgerIcon.vue';
-import HandIcon from '@stories/icons/Mono/HandIcon.vue';
-import HomeIcon from '@stories/icons/Mono/HomeIcon.vue';
-import ImageEditIcon from '@stories/icons/Mono/ImageEditIcon.vue';
-import ImageIcon from '@stories/icons/Mono/ImageIcon.vue';
-import MoveIcon from '@stories/icons/Mono/MoveIcon.vue';
-import DocumentAddIcon from '@stories/icons/Mono/DocumentAddIcon.vue';
-import DocumentDeleteIcon from '@stories/icons/Mono/DocumentDeleteIcon.vue';
-import DocumentEditIcon from '@stories/icons/Mono/DocumentEditIcon.vue';
-import ParagraphIcon from '@stories/icons/Mono/ParagraphIcon.vue';
-import PhoneHandsetIcon from '@stories/icons/Mono/PhoneHandsetIcon.vue';
-import PlusCircleIcon from '@stories/icons/Mono/PlusCircleIcon.vue';
-import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
-import PointerIcon from '@stories/icons/Mono/PointerIcon.vue';
-import SaveIcon from '@stories/icons/Mono/SaveIcon.vue';
-import SearchIcon from '@stories/icons/Mono/SearchIcon.vue';
-import SettingsIcon from '@stories/icons/Mono/SettingsIcon.vue';
-import SortHorizontalIcon from '@stories/icons/Mono/SortHorizontalIcon.vue';
-import SortDownIcon from '@stories/icons/Mono/SortDownIcon.vue';
-import SortUpIcon from '@stories/icons/Mono/SortUpIcon.vue';
-import SortVerticalIcon from '@stories/icons/Mono/SortVerticalIcon.vue';
-import LineIcon from '@stories/icons/Mono/LineIcon.vue';
-import TableIcon from '@stories/icons/Mono/TableIcon.vue';
-import TrashIcon from '@stories/icons/Mono/TrashIcon.vue';
-import UserIcon from '@stories/icons/Mono/UserIcon.vue';
-import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
-import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
+import Age18Icon from '@icons/Mono/Age18Icon.vue';
+import AlarmIcon from '@icons/Mono/AlarmIcon.vue';
+import AirplaneIcon from '@icons/Mono/AirplaneIcon.vue';
+import ArrowLeftIcon from '@icons/Mono/ArrowLeftIcon.vue';
+import ArrowForwardIcon from '@icons/Mono/ArrowForwardIcon.vue';
+import ArchiveIcon from '@icons/Mono/ArchiveIcon.vue';
+import AnchorLinkIcon from '@icons/Mono/AnchorLinkIcon.vue';
+import AnchorIcon from '@icons/Mono/AnchorIcon.vue';
+import AlignRightIcon from '@icons/Mono/AlignRightIcon.vue';
+import AlignLeftIcon from '@icons/Mono/AlignLeftIcon.vue';
+import AlignCenterIcon from '@icons/Mono/AlignCenterIcon.vue';
+import ArrowRightIcon from '@icons/Mono/ArrowRightIcon.vue';
+import AtIcon from '@icons/Mono/AtIcon.vue';
+import AwardIcon from '@icons/Mono/AwardIcon.vue';
+import BackspaceIcon from '@icons/Mono/BackspaceIcon.vue';
+import BadgeIcon from '@icons/Mono/BadgeIcon.vue';
+import BallFootballIcon from '@icons/Mono/BallFootballIcon.vue';
+import BallIcon from '@icons/Mono/BallIcon.vue';
+import BanknoteIcon from '@icons/Mono/BanknoteIcon.vue';
+import BellIcon from '@icons/Mono/BellIcon.vue';
+import BellOffIcon from '@icons/Mono/BellOffIcon.vue';
+import BoxIcon from '@icons/Mono/BoxIcon.vue';
+import BrightnessIcon from '@icons/Mono/BrightnessIcon.vue';
+import BulbIcon from '@icons/Mono/BulbIcon.vue';
+import CalculatorIcon from '@icons/Mono/CalculatorIcon.vue';
+import CalendarIcon from '@icons/Mono/CalendarIcon.vue';
+import CalendarAddIcon from '@icons/Mono/CalendarAddIcon.vue';
+import CalendarRemoveIcon from '@icons/Mono/CalendarRemoveIcon.vue';
+import CardsIcon from '@icons/Mono/CardsIcon.vue';
+import ChartLineIcon from '@icons/Mono/ChartLineIcon.vue';
+import ChartPieIcon from '@icons/Mono/ChartPieIcon.vue';
+import ChatIcon from '@icons/Mono/ChatIcon.vue';
+import ChatWritingIcon from '@icons/Mono/ChatWritingIcon.vue';
+import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
+import ChemistryFlaskIcon from '@icons/Mono/ChemistryFlaskIcon.vue';
+import CodeIcon from '@icons/Mono/CodeIcon.vue';
+import CoinsIcon from '@icons/Mono/CoinsIcon.vue';
+import ColorPaletteIcon from '@icons/Mono/ColorPaletteIcon.vue';
+import CompassIcon from '@icons/Mono/CompassIcon.vue';
+import ConstructionWorkerIcon from '@icons/Mono/ConstructionWorkerIcon.vue';
+import ContactsIcon from '@icons/Mono/ContactsIcon.vue';
+import CropIcon from '@icons/Mono/CropIcon.vue';
+import CrossCircleIcon from '@icons/Mono/CrossCircleIcon.vue';
+import CrossIcon from '@icons/Mono/CrossIcon.vue';
+import CubeIcon from '@icons/Mono/CubeIcon.vue';
+import CupIcon from '@icons/Mono/CupIcon.vue';
+import CursorIcon from '@icons/Mono/CursorIcon.vue';
+import LineDashedIcon from '@icons/Mono/LineDashedIcon.vue';
+import LineDiagonalIcon from '@icons/Mono/LineDiagonalIcon.vue';
+import DiamondIcon from '@icons/Mono/DiamondIcon.vue';
+import DiaryIcon from '@icons/Mono/DiaryIcon.vue';
+import DiceIcon from '@icons/Mono/DiceIcon.vue';
+import DigIcon from '@icons/Mono/DigIcon.vue';
+import DislikeIcon from '@icons/Mono/DislikeIcon.vue';
+import DisplayIcon from '@icons/Mono/DisplayIcon.vue';
+import DocumentIcon from '@icons/Mono/DocumentIcon.vue';
+import DollarIcon from '@icons/Mono/DollarIcon.vue';
+import DotsHorizontalIcon from '@icons/Mono/DotsHorizontalIcon.vue';
+import DotsVerticalIcon from '@icons/Mono/DotsVerticalIcon.vue';
+import LineDottedIcon from '@icons/Mono/LineDottedIcon.vue';
+import DownloadIcon from '@icons/Mono/DownloadIcon.vue';
+import DropIcon from '@icons/Mono/DropIcon.vue';
+import DumbbelIcon from '@icons/Mono/DumbbelIcon.vue';
+import EarthIcon from '@icons/Mono/EarthIcon.vue';
+import EditIcon from '@icons/Mono/EditIcon.vue';
+import EyeIcon from '@icons/Mono/EyeIcon.vue';
+import EncyclopediaIcon from '@icons/Mono/EncyclopediaIcon.vue';
+import ExitIcon from '@icons/Mono/ExitIcon.vue';
+import FeedbackIcon from '@icons/Mono/FeedbackIcon.vue';
+import FilterIcon from '@icons/Mono/FilterIcon.vue';
+import FingerprintIcon from '@icons/Mono/FingerprintIcon.vue';
+import FireIcon from '@icons/Mono/FireIcon.vue';
+import FlagIcon from '@icons/Mono/FlagIcon.vue';
+import FlashIcon from '@icons/Mono/FlashIcon.vue';
+import FlashlightIcon from '@icons/Mono/FlashlightIcon.vue';
+import FolderLockIcon from '@icons/Mono/FolderLockIcon.vue';
+import FrameIcon from '@icons/Mono/FrameIcon.vue';
+import FullScreenIcon from '@icons/Mono/FullScreenIcon.vue';
+import GameControllerIcon from '@icons/Mono/GameControllerIcon.vue';
+import GiftIcon from '@icons/Mono/GiftIcon.vue';
+import GlassesIcon from '@icons/Mono/GlassesIcon.vue';
+import HamburgerIcon from '@icons/Mono/HamburgerIcon.vue';
+import HandIcon from '@icons/Mono/HandIcon.vue';
+import HomeIcon from '@icons/Mono/HomeIcon.vue';
+import ImageEditIcon from '@icons/Mono/ImageEditIcon.vue';
+import ImageIcon from '@icons/Mono/ImageIcon.vue';
+import MoveIcon from '@icons/Mono/MoveIcon.vue';
+import DocumentAddIcon from '@icons/Mono/DocumentAddIcon.vue';
+import DocumentDeleteIcon from '@icons/Mono/DocumentDeleteIcon.vue';
+import DocumentEditIcon from '@icons/Mono/DocumentEditIcon.vue';
+import ParagraphIcon from '@icons/Mono/ParagraphIcon.vue';
+import PhoneHandsetIcon from '@icons/Mono/PhoneHandsetIcon.vue';
+import PlusCircleIcon from '@icons/Mono/PlusCircleIcon.vue';
+import PlusIcon from '@icons/Mono/PlusIcon.vue';
+import PointerIcon from '@icons/Mono/PointerIcon.vue';
+import SaveIcon from '@icons/Mono/SaveIcon.vue';
+import SearchIcon from '@icons/Mono/SearchIcon.vue';
+import SettingsIcon from '@icons/Mono/SettingsIcon.vue';
+import SortHorizontalIcon from '@icons/Mono/SortHorizontalIcon.vue';
+import SortDownIcon from '@icons/Mono/SortDownIcon.vue';
+import SortUpIcon from '@icons/Mono/SortUpIcon.vue';
+import SortVerticalIcon from '@icons/Mono/SortVerticalIcon.vue';
+import LineIcon from '@icons/Mono/LineIcon.vue';
+import TableIcon from '@icons/Mono/TableIcon.vue';
+import TrashIcon from '@icons/Mono/TrashIcon.vue';
+import UserIcon from '@icons/Mono/UserIcon.vue';
+import ArrowsVerticalIcon from '@icons/Mono/ArrowsVerticalIcon.vue';
+import TriangleIcon from '@icons/Mono/TriangleIcon.vue';
 import Playground from '@/Playground.vue';
-import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
-import StarIcon from '@stories/icons/Mono/StarIcon.vue';
-import StarFilledIcon from '@stories/icons/Mono/StarFilledIcon.vue';
+import ArrowShortDownIcon from '@icons/Mono/ArrowShortDownIcon.vue';
+import StarIcon from '@icons/Mono/StarIcon.vue';
+import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';
 
 const gentleIcons = {
   Age18Icon,
diff --git a/src/Playground.vue b/src/Playground.vue
index 27fe1cd..cdb68c0 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import Modal from '@stories/components/Modal/Modal.vue';
-import ToggleSwitch from '@stories/components/ToggleSwitch/ToggleSwitch.vue';
-import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue';
-import SelectButton from '@stories/components/SelectButton/SelectButton.vue';
-import Drawer from '@stories/components/Drawer/Drawer.vue';
-import Slider from '@stories/components/Slider/Slider.vue';
-import TrashIcon from '@stories/icons/Mono/TrashIcon.vue';
-import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
-import Button from '@stories/components/Button/Button.vue';
-import MenuDial from '@stories/components/MenuDial/MenuDial.vue';
-import Popup from '@stories/components/Popup/Popup.vue';
-import Table from '@stories/components/Table/Table.vue';
+import Modal from '@components/Modal/Modal.vue';
+import ToggleSwitch from '@components/ToggleSwitch/ToggleSwitch.vue';
+import AnchorLinkIcon from '@icons/Mono/AnchorLinkIcon.vue';
+import SelectButton from '@components/SelectButton/SelectButton.vue';
+import Drawer from '@components/Drawer/Drawer.vue';
+import Slider from '@components/Slider/Slider.vue';
+import TrashIcon from '@icons/Mono/TrashIcon.vue';
+import CrossIcon from '@icons/Mono/CrossIcon.vue';
+import Button from '@components/Button/Button.vue';
+import MenuDial from '@components/MenuDial/MenuDial.vue';
+import Popup from '@components/Popup/Popup.vue';
+import Table from '@components/Table/Table.vue';
 import { ref } from 'vue';
 import type { ISBOption, ISliderOptions, ITableColumn } from '@interfaces/componentsProp';
-import Checkbox from '@stories/components/Checkbox/Checkbox.vue';
-import Tag from '@stories/components/Tag/Tag.vue';
-import Select from '@stories/components/Select/Select.vue';
-import AtIcon from '@stories/icons/Mono/AtIcon.vue';
-import Knob from '@stories/components/Knob/Knob.vue';
-import Rating from '@stories/components/Rating/Rating.vue';
-import HomeIcon from '@stories/icons/Mono/HomeIcon.vue';
+import Checkbox from '@components/Checkbox/Checkbox.vue';
+import Tag from '@components/Tag/Tag.vue';
+import Select from '@components/Select/Select.vue';
+import AtIcon from '@icons/Mono/AtIcon.vue';
+import Knob from '@components/Knob/Knob.vue';
+import Rating from '@components/Rating/Rating.vue';
+import HomeIcon from '@icons/Mono/HomeIcon.vue';
 
 const visibleDrawer = ref(false);
 const sliderOptions: ISliderOptions[] = [
@@ -113,7 +113,7 @@ const tableColumns: ITableColumn[] = [
     type: 'text',
   },
 ];
-const tableData = [
+const tableData = ref([
   [
     {
       value: 'Pete',
@@ -184,7 +184,7 @@ const tableData = [
       value: 'Russia',
     },
   ],
-];
+]);
 const activeCheckbox = ref();
 const selectOptions = [
   {
diff --git a/src/common/constants/icons.ts b/src/common/constants/icons.ts
index 3691b61..fe781d0 100644
--- a/src/common/constants/icons.ts
+++ b/src/common/constants/icons.ts
@@ -1,116 +1,116 @@
 import type { Component } from 'vue';
 
-import Age18Icon from '@stories/icons/Mono/Age18Icon.vue';
-import AirplaneIcon from '@stories/icons/Mono/AirplaneIcon.vue';
-import AlarmIcon from '@stories/icons/Mono/AlarmIcon.vue';
-import AlignCenterIcon from '@stories/icons/Mono/AlignCenterIcon.vue';
-import AlignLeftIcon from '@stories/icons/Mono/AlignLeftIcon.vue';
-import AlignRightIcon from '@stories/icons/Mono/AlignRightIcon.vue';
-import AnchorIcon from '@stories/icons/Mono/AnchorIcon.vue';
-import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue';
-import ArchiveIcon from '@stories/icons/Mono/ArchiveIcon.vue';
-import ArrowForwardIcon from '@stories/icons/Mono/ArrowForwardIcon.vue';
-import ArrowLeftIcon from '@stories/icons/Mono/ArrowLeftIcon.vue';
-import ArrowRightIcon from '@stories/icons/Mono/ArrowRightIcon.vue';
-import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
-import AtIcon from '@stories/icons/Mono/AtIcon.vue';
-import AwardIcon from '@stories/icons/Mono/AwardIcon.vue';
-import BackspaceIcon from '@stories/icons/Mono/BackspaceIcon.vue';
-import BadgeIcon from '@stories/icons/Mono/BadgeIcon.vue';
-import BallFootballIcon from '@stories/icons/Mono/BallFootballIcon.vue';
-import BallIcon from '@stories/icons/Mono/BallIcon.vue';
-import BanknoteIcon from '@stories/icons/Mono/BanknoteIcon.vue';
-import BellIcon from '@stories/icons/Mono/BellIcon.vue';
-import BellOffIcon from '@stories/icons/Mono/BellOffIcon.vue';
-import BoxIcon from '@stories/icons/Mono/BoxIcon.vue';
-import BrightnessIcon from '@stories/icons/Mono/BrightnessIcon.vue';
-import BulbIcon from '@stories/icons/Mono/BulbIcon.vue';
-import CalculatorIcon from '@stories/icons/Mono/CalculatorIcon.vue';
-import CalendarAddIcon from '@stories/icons/Mono/CalendarAddIcon.vue';
-import CalendarIcon from '@stories/icons/Mono/CalendarIcon.vue';
-import CalendarRemoveIcon from '@stories/icons/Mono/CalendarRemoveIcon.vue';
-import CardsIcon from '@stories/icons/Mono/CardsIcon.vue';
-import ChartLineIcon from '@stories/icons/Mono/ChartLineIcon.vue';
-import ChartPieIcon from '@stories/icons/Mono/ChartPieIcon.vue';
-import ChatIcon from '@stories/icons/Mono/ChatIcon.vue';
-import CrossCircleIcon from '@stories/icons/Mono/CrossCircleIcon.vue';
-import CropIcon from '@stories/icons/Mono/CropIcon.vue';
-import ChatWritingIcon from '@stories/icons/Mono/ChatWritingIcon.vue';
-import CheckMarkIcon from '@stories/icons/Mono/CheckMarkIcon.vue';
-import ChemistryFlaskIcon from '@stories/icons/Mono/ChemistryFlaskIcon.vue';
-import CodeIcon from '@stories/icons/Mono/CodeIcon.vue';
-import CoinsIcon from '@stories/icons/Mono/CoinsIcon.vue';
-import ColorPaletteIcon from '@stories/icons/Mono/ColorPaletteIcon.vue';
-import CompassIcon from '@stories/icons/Mono/CompassIcon.vue';
-import ConstructionWorkerIcon from '@stories/icons/Mono/ConstructionWorkerIcon.vue';
-import ContactsIcon from '@stories/icons/Mono/ContactsIcon.vue';
-import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
-import CubeIcon from '@stories/icons/Mono/CubeIcon.vue';
-import CupIcon from '@stories/icons/Mono/CupIcon.vue';
-import CursorIcon from '@stories/icons/Mono/CursorIcon.vue';
-import DiamondIcon from '@stories/icons/Mono/DiamondIcon.vue';
-import DiaryIcon from '@stories/icons/Mono/DiaryIcon.vue';
-import DiceIcon from '@stories/icons/Mono/DiceIcon.vue';
-import DigIcon from '@stories/icons/Mono/DigIcon.vue';
-import DislikeIcon from '@stories/icons/Mono/DislikeIcon.vue';
-import DisplayIcon from '@stories/icons/Mono/DisplayIcon.vue';
-import DocumentIcon from '@stories/icons/Mono/DocumentIcon.vue';
-import DocumentAddIcon from '@stories/icons/Mono/DocumentAddIcon.vue';
-import DocumentDeleteIcon from '@stories/icons/Mono/DocumentDeleteIcon.vue';
-import DocumentEditIcon from '@stories/icons/Mono/DocumentEditIcon.vue';
-import DollarIcon from '@stories/icons/Mono/DollarIcon.vue';
-import DotsHorizontalIcon from '@stories/icons/Mono/DotsHorizontalIcon.vue';
-import DotsVerticalIcon from '@stories/icons/Mono/DotsVerticalIcon.vue';
-import DownloadIcon from '@stories/icons/Mono/DownloadIcon.vue';
-import DropIcon from '@stories/icons/Mono/DropIcon.vue';
-import DumbbelIcon from '@stories/icons/Mono/DumbbelIcon.vue';
-import EarthIcon from '@stories/icons/Mono/EarthIcon.vue';
-import EditIcon from '@stories/icons/Mono/EditIcon.vue';
-import EncyclopediaIcon from '@stories/icons/Mono/EncyclopediaIcon.vue';
-import ExitIcon from '@stories/icons/Mono/ExitIcon.vue';
-import EyeIcon from '@stories/icons/Mono/EyeIcon.vue';
-import FeedbackIcon from '@stories/icons/Mono/FeedbackIcon.vue';
-import FilterIcon from '@stories/icons/Mono/FilterIcon.vue';
-import FingerprintIcon from '@stories/icons/Mono/FingerprintIcon.vue';
-import FireIcon from '@stories/icons/Mono/FireIcon.vue';
-import FlagIcon from '@stories/icons/Mono/FlagIcon.vue';
-import FlashIcon from '@stories/icons/Mono/FlashIcon.vue';
-import FlashlightIcon from '@stories/icons/Mono/FlashlightIcon.vue';
-import FolderLockIcon from '@stories/icons/Mono/FolderLockIcon.vue';
-import FrameIcon from '@stories/icons/Mono/FrameIcon.vue';
-import FullScreenIcon from '@stories/icons/Mono/FullScreenIcon.vue';
-import GameControllerIcon from '@stories/icons/Mono/GameControllerIcon.vue';
-import GiftIcon from '@stories/icons/Mono/GiftIcon.vue';
-import GlassesIcon from '@stories/icons/Mono/GlassesIcon.vue';
-import HamburgerIcon from '@stories/icons/Mono/HamburgerIcon.vue';
-import HandIcon from '@stories/icons/Mono/HandIcon.vue';
-import HomeIcon from '@stories/icons/Mono/HomeIcon.vue';
-import ImageIcon from '@stories/icons/Mono/ImageIcon.vue';
-import ImageEditIcon from '@stories/icons/Mono/ImageEditIcon.vue';
-import LineIcon from '@stories/icons/Mono/LineIcon.vue';
-import LineDashedIcon from '@stories/icons/Mono/LineDashedIcon.vue';
-import LineDottedIcon from '@stories/icons/Mono/LineDottedIcon.vue';
-import LineDiagonalIcon from '@stories/icons/Mono/LineDiagonalIcon.vue';
-import MoveIcon from '@stories/icons/Mono/MoveIcon.vue';
-import ParagraphIcon from '@stories/icons/Mono/ParagraphIcon.vue';
-import PhoneHandsetIcon from '@stories/icons/Mono/PhoneHandsetIcon.vue';
-import PlusCircleIcon from '@stories/icons/Mono/PlusCircleIcon.vue';
-import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
-import PointerIcon from '@stories/icons/Mono/PointerIcon.vue';
-import SaveIcon from '@stories/icons/Mono/SaveIcon.vue';
-import SettingsIcon from '@stories/icons/Mono/SettingsIcon.vue';
-import TableIcon from '@stories/icons/Mono/TableIcon.vue';
-import TrashIcon from '@stories/icons/Mono/TrashIcon.vue';
-import UserIcon from '@stories/icons/Mono/UserIcon.vue';
-import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
-import SortHorizontalIcon from '@stories/icons/Mono/SortHorizontalIcon.vue';
-import SortDownIcon from '@stories/icons/Mono/SortDownIcon.vue';
-import SortUpIcon from '@stories/icons/Mono/SortUpIcon.vue';
-import SortVerticalIcon from '@stories/icons/Mono/SortVerticalIcon.vue';
-import ArrowShortDownIcon from '@stories/icons/Mono/ArrowShortDownIcon.vue';
-import SearchIcon from '@stories/icons/Mono/SearchIcon.vue';
-import StarIcon from '@stories/icons/Mono/StarIcon.vue';
-import StarFilledIcon from '@stories/icons/Mono/StarFilledIcon.vue';
+import Age18Icon from '@icons/Mono/Age18Icon.vue';
+import AirplaneIcon from '@icons/Mono/AirplaneIcon.vue';
+import AlarmIcon from '@icons/Mono/AlarmIcon.vue';
+import AlignCenterIcon from '@icons/Mono/AlignCenterIcon.vue';
+import AlignLeftIcon from '@icons/Mono/AlignLeftIcon.vue';
+import AlignRightIcon from '@icons/Mono/AlignRightIcon.vue';
+import AnchorIcon from '@icons/Mono/AnchorIcon.vue';
+import AnchorLinkIcon from '@icons/Mono/AnchorLinkIcon.vue';
+import ArchiveIcon from '@icons/Mono/ArchiveIcon.vue';
+import ArrowForwardIcon from '@icons/Mono/ArrowForwardIcon.vue';
+import ArrowLeftIcon from '@icons/Mono/ArrowLeftIcon.vue';
+import ArrowRightIcon from '@icons/Mono/ArrowRightIcon.vue';
+import ArrowsVerticalIcon from '@icons/Mono/ArrowsVerticalIcon.vue';
+import AtIcon from '@icons/Mono/AtIcon.vue';
+import AwardIcon from '@icons/Mono/AwardIcon.vue';
+import BackspaceIcon from '@icons/Mono/BackspaceIcon.vue';
+import BadgeIcon from '@icons/Mono/BadgeIcon.vue';
+import BallFootballIcon from '@icons/Mono/BallFootballIcon.vue';
+import BallIcon from '@icons/Mono/BallIcon.vue';
+import BanknoteIcon from '@icons/Mono/BanknoteIcon.vue';
+import BellIcon from '@icons/Mono/BellIcon.vue';
+import BellOffIcon from '@icons/Mono/BellOffIcon.vue';
+import BoxIcon from '@icons/Mono/BoxIcon.vue';
+import BrightnessIcon from '@icons/Mono/BrightnessIcon.vue';
+import BulbIcon from '@icons/Mono/BulbIcon.vue';
+import CalculatorIcon from '@icons/Mono/CalculatorIcon.vue';
+import CalendarAddIcon from '@icons/Mono/CalendarAddIcon.vue';
+import CalendarIcon from '@icons/Mono/CalendarIcon.vue';
+import CalendarRemoveIcon from '@icons/Mono/CalendarRemoveIcon.vue';
+import CardsIcon from '@icons/Mono/CardsIcon.vue';
+import ChartLineIcon from '@icons/Mono/ChartLineIcon.vue';
+import ChartPieIcon from '@icons/Mono/ChartPieIcon.vue';
+import ChatIcon from '@icons/Mono/ChatIcon.vue';
+import CrossCircleIcon from '@icons/Mono/CrossCircleIcon.vue';
+import CropIcon from '@icons/Mono/CropIcon.vue';
+import ChatWritingIcon from '@icons/Mono/ChatWritingIcon.vue';
+import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
+import ChemistryFlaskIcon from '@icons/Mono/ChemistryFlaskIcon.vue';
+import CodeIcon from '@icons/Mono/CodeIcon.vue';
+import CoinsIcon from '@icons/Mono/CoinsIcon.vue';
+import ColorPaletteIcon from '@icons/Mono/ColorPaletteIcon.vue';
+import CompassIcon from '@icons/Mono/CompassIcon.vue';
+import ConstructionWorkerIcon from '@icons/Mono/ConstructionWorkerIcon.vue';
+import ContactsIcon from '@icons/Mono/ContactsIcon.vue';
+import CrossIcon from '@icons/Mono/CrossIcon.vue';
+import CubeIcon from '@icons/Mono/CubeIcon.vue';
+import CupIcon from '@icons/Mono/CupIcon.vue';
+import CursorIcon from '@icons/Mono/CursorIcon.vue';
+import DiamondIcon from '@icons/Mono/DiamondIcon.vue';
+import DiaryIcon from '@icons/Mono/DiaryIcon.vue';
+import DiceIcon from '@icons/Mono/DiceIcon.vue';
+import DigIcon from '@icons/Mono/DigIcon.vue';
+import DislikeIcon from '@icons/Mono/DislikeIcon.vue';
+import DisplayIcon from '@icons/Mono/DisplayIcon.vue';
+import DocumentIcon from '@icons/Mono/DocumentIcon.vue';
+import DocumentAddIcon from '@icons/Mono/DocumentAddIcon.vue';
+import DocumentDeleteIcon from '@icons/Mono/DocumentDeleteIcon.vue';
+import DocumentEditIcon from '@icons/Mono/DocumentEditIcon.vue';
+import DollarIcon from '@icons/Mono/DollarIcon.vue';
+import DotsHorizontalIcon from '@icons/Mono/DotsHorizontalIcon.vue';
+import DotsVerticalIcon from '@icons/Mono/DotsVerticalIcon.vue';
+import DownloadIcon from '@icons/Mono/DownloadIcon.vue';
+import DropIcon from '@icons/Mono/DropIcon.vue';
+import DumbbelIcon from '@icons/Mono/DumbbelIcon.vue';
+import EarthIcon from '@icons/Mono/EarthIcon.vue';
+import EditIcon from '@icons/Mono/EditIcon.vue';
+import EncyclopediaIcon from '@icons/Mono/EncyclopediaIcon.vue';
+import ExitIcon from '@icons/Mono/ExitIcon.vue';
+import EyeIcon from '@icons/Mono/EyeIcon.vue';
+import FeedbackIcon from '@icons/Mono/FeedbackIcon.vue';
+import FilterIcon from '@icons/Mono/FilterIcon.vue';
+import FingerprintIcon from '@icons/Mono/FingerprintIcon.vue';
+import FireIcon from '@icons/Mono/FireIcon.vue';
+import FlagIcon from '@icons/Mono/FlagIcon.vue';
+import FlashIcon from '@icons/Mono/FlashIcon.vue';
+import FlashlightIcon from '@icons/Mono/FlashlightIcon.vue';
+import FolderLockIcon from '@icons/Mono/FolderLockIcon.vue';
+import FrameIcon from '@icons/Mono/FrameIcon.vue';
+import FullScreenIcon from '@icons/Mono/FullScreenIcon.vue';
+import GameControllerIcon from '@icons/Mono/GameControllerIcon.vue';
+import GiftIcon from '@icons/Mono/GiftIcon.vue';
+import GlassesIcon from '@icons/Mono/GlassesIcon.vue';
+import HamburgerIcon from '@icons/Mono/HamburgerIcon.vue';
+import HandIcon from '@icons/Mono/HandIcon.vue';
+import HomeIcon from '@icons/Mono/HomeIcon.vue';
+import ImageIcon from '@icons/Mono/ImageIcon.vue';
+import ImageEditIcon from '@icons/Mono/ImageEditIcon.vue';
+import LineIcon from '@icons/Mono/LineIcon.vue';
+import LineDashedIcon from '@icons/Mono/LineDashedIcon.vue';
+import LineDottedIcon from '@icons/Mono/LineDottedIcon.vue';
+import LineDiagonalIcon from '@icons/Mono/LineDiagonalIcon.vue';
+import MoveIcon from '@icons/Mono/MoveIcon.vue';
+import ParagraphIcon from '@icons/Mono/ParagraphIcon.vue';
+import PhoneHandsetIcon from '@icons/Mono/PhoneHandsetIcon.vue';
+import PlusCircleIcon from '@icons/Mono/PlusCircleIcon.vue';
+import PlusIcon from '@icons/Mono/PlusIcon.vue';
+import PointerIcon from '@icons/Mono/PointerIcon.vue';
+import SaveIcon from '@icons/Mono/SaveIcon.vue';
+import SettingsIcon from '@icons/Mono/SettingsIcon.vue';
+import TableIcon from '@icons/Mono/TableIcon.vue';
+import TrashIcon from '@icons/Mono/TrashIcon.vue';
+import UserIcon from '@icons/Mono/UserIcon.vue';
+import TriangleIcon from '@icons/Mono/TriangleIcon.vue';
+import SortHorizontalIcon from '@icons/Mono/SortHorizontalIcon.vue';
+import SortDownIcon from '@icons/Mono/SortDownIcon.vue';
+import SortUpIcon from '@icons/Mono/SortUpIcon.vue';
+import SortVerticalIcon from '@icons/Mono/SortVerticalIcon.vue';
+import ArrowShortDownIcon from '@icons/Mono/ArrowShortDownIcon.vue';
+import SearchIcon from '@icons/Mono/SearchIcon.vue';
+import StarIcon from '@icons/Mono/StarIcon.vue';
+import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';
 
 export const iconsSet: Record<string, Component> = {
   Age18: Age18Icon,
diff --git a/src/stories/components/Button/Button.stories.ts b/src/components/Button/Button.stories.ts
similarity index 100%
rename from src/stories/components/Button/Button.stories.ts
rename to src/components/Button/Button.stories.ts
diff --git a/src/stories/components/Button/Button.vue b/src/components/Button/Button.vue
similarity index 100%
rename from src/stories/components/Button/Button.vue
rename to src/components/Button/Button.vue
diff --git a/src/stories/components/Checkbox/Checkbox.stories.ts b/src/components/Checkbox/Checkbox.stories.ts
similarity index 98%
rename from src/stories/components/Checkbox/Checkbox.stories.ts
rename to src/components/Checkbox/Checkbox.stories.ts
index 9bdc8ac..d377f18 100644
--- a/src/stories/components/Checkbox/Checkbox.stories.ts
+++ b/src/components/Checkbox/Checkbox.stories.ts
@@ -14,7 +14,6 @@ const meta: Meta = {
     },
   },
   argTypes: {
-    active: { control: 'boolean' },
     invalid: { control: 'boolean' },
     disabled: { control: 'boolean' },
     label: { control: 'text' },
diff --git a/src/stories/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
similarity index 98%
rename from src/stories/components/Checkbox/Checkbox.vue
rename to src/components/Checkbox/Checkbox.vue
index d9350f3..b122426 100644
--- a/src/stories/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -2,7 +2,7 @@
 import type { ICheckboxProps } from '@interfaces/componentsProps';
 import { computed } from 'vue';
 import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
-import CheckMarkIcon from '@stories/icons/Mono/CheckMarkIcon.vue';
+import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
 
 const props = withDefaults(defineProps<ICheckboxProps>(), {
   label: '',
diff --git a/src/stories/components/Divider/Divider.stories.ts b/src/components/Divider/Divider.stories.ts
similarity index 100%
rename from src/stories/components/Divider/Divider.stories.ts
rename to src/components/Divider/Divider.stories.ts
diff --git a/src/stories/components/Divider/Divider.vue b/src/components/Divider/Divider.vue
similarity index 100%
rename from src/stories/components/Divider/Divider.vue
rename to src/components/Divider/Divider.vue
diff --git a/src/stories/components/Drawer/Drawer.stories.ts b/src/components/Drawer/Drawer.stories.ts
similarity index 100%
rename from src/stories/components/Drawer/Drawer.stories.ts
rename to src/components/Drawer/Drawer.stories.ts
diff --git a/src/stories/components/Drawer/Drawer.vue b/src/components/Drawer/Drawer.vue
similarity index 100%
rename from src/stories/components/Drawer/Drawer.vue
rename to src/components/Drawer/Drawer.vue
diff --git a/src/stories/components/Knob/Knob.stories.ts b/src/components/Knob/Knob.stories.ts
similarity index 98%
rename from src/stories/components/Knob/Knob.stories.ts
rename to src/components/Knob/Knob.stories.ts
index 3f40bb0..8376357 100644
--- a/src/stories/components/Knob/Knob.stories.ts
+++ b/src/components/Knob/Knob.stories.ts
@@ -18,7 +18,6 @@ const meta: Meta = {
     showLabel: { control: 'boolean' },
     colorAsTheme: { control: 'boolean' },
     textBold: { control: 'boolean' },
-    value: { control: 'number' },
     min: { control: 'number' },
     max: { control: 'number' },
     step: { control: 'number' },
diff --git a/src/stories/components/Knob/Knob.vue b/src/components/Knob/Knob.vue
similarity index 96%
rename from src/stories/components/Knob/Knob.vue
rename to src/components/Knob/Knob.vue
index 2067af9..6caf768 100644
--- a/src/stories/components/Knob/Knob.vue
+++ b/src/components/Knob/Knob.vue
@@ -2,14 +2,8 @@
 import type { IKnobProps } from '@interfaces/componentsProps';
 import { computed, ref, type Ref } from 'vue';
 import { convertThemeToColor } from '@helpers/common';
-import {
-  calcCenter,
-  calcStart,
-  calcNewValue,
-  calcThemeColor,
-  calcContainerSize,
-} from '@stories/components/Knob/helpers';
-import Button from '@stories/components/Button/Button.vue';
+import { calcCenter, calcStart, calcNewValue, calcThemeColor, calcContainerSize } from '@components/Knob/helpers';
+import Button from '@components/Button/Button.vue';
 
 const props = withDefaults(defineProps<IKnobProps>(), {
   value: 0,
diff --git a/src/stories/components/Knob/helpers.ts b/src/components/Knob/helpers.ts
similarity index 100%
rename from src/stories/components/Knob/helpers.ts
rename to src/components/Knob/helpers.ts
diff --git a/src/stories/components/MenuDial/MenuDial.stories.ts b/src/components/MenuDial/MenuDial.stories.ts
similarity index 100%
rename from src/stories/components/MenuDial/MenuDial.stories.ts
rename to src/components/MenuDial/MenuDial.stories.ts
diff --git a/src/stories/components/MenuDial/MenuDial.vue b/src/components/MenuDial/MenuDial.vue
similarity index 98%
rename from src/stories/components/MenuDial/MenuDial.vue
rename to src/components/MenuDial/MenuDial.vue
index 6b492ac..c7bbc57 100644
--- a/src/stories/components/MenuDial/MenuDial.vue
+++ b/src/components/MenuDial/MenuDial.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { IMDProps } from '@interfaces/componentsProps';
-import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
+import PlusIcon from '@icons/Mono/PlusIcon.vue';
 import { convertThemeToSecondaryColor, convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
 import type { IMDItemProps } from '@interfaces/componentsProp';
 
diff --git a/src/stories/components/Modal/Modal.stories.ts b/src/components/Modal/Modal.stories.ts
similarity index 100%
rename from src/stories/components/Modal/Modal.stories.ts
rename to src/components/Modal/Modal.stories.ts
diff --git a/src/stories/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
similarity index 100%
rename from src/stories/components/Modal/Modal.vue
rename to src/components/Modal/Modal.vue
diff --git a/src/stories/components/Popup/Popup.stories.ts b/src/components/Popup/Popup.stories.ts
similarity index 97%
rename from src/stories/components/Popup/Popup.stories.ts
rename to src/components/Popup/Popup.stories.ts
index 29237c6..01a0d75 100644
--- a/src/stories/components/Popup/Popup.stories.ts
+++ b/src/components/Popup/Popup.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Popup from './Popup.vue';
-import Button from '@stories/components/Button/Button.vue';
+import Button from '@components/Button/Button.vue';
 
 const meta: Meta = {
   title: 'Components/Popup',
diff --git a/src/stories/components/Popup/Popup.vue b/src/components/Popup/Popup.vue
similarity index 100%
rename from src/stories/components/Popup/Popup.vue
rename to src/components/Popup/Popup.vue
diff --git a/src/stories/components/Rating/Rating.stories.ts b/src/components/Rating/Rating.stories.ts
similarity index 100%
rename from src/stories/components/Rating/Rating.stories.ts
rename to src/components/Rating/Rating.stories.ts
diff --git a/src/stories/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
similarity index 97%
rename from src/stories/components/Rating/Rating.vue
rename to src/components/Rating/Rating.vue
index 6f32d32..b202f46 100644
--- a/src/stories/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -2,7 +2,7 @@
 import type { IRatingProps } from '@interfaces/componentsProps';
 import { computed, type Ref, ref } from 'vue';
 import { iconsSet } from '@/common/constants/icons';
-import StarFilledIcon from '@stories/icons/Mono/StarFilledIcon.vue';
+import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';
 import { convertThemeToColor } from '@helpers/common';
 
 const props = withDefaults(defineProps<IRatingProps>(), {
diff --git a/src/stories/components/Select/Select.stories.ts b/src/components/Select/Select.stories.ts
similarity index 100%
rename from src/stories/components/Select/Select.stories.ts
rename to src/components/Select/Select.stories.ts
diff --git a/src/stories/components/Select/Select.vue b/src/components/Select/Select.vue
similarity index 97%
rename from src/stories/components/Select/Select.vue
rename to src/components/Select/Select.vue
index 444efff..45fdd28 100644
--- a/src/stories/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -4,9 +4,9 @@ import { computed, ref } from 'vue';
 import { convertThemeToColor } from '@helpers/common';
 import { iconsSet } from '@/common/constants/icons';
 import type { TThemeColor } from '@interfaces/common';
-import SelectItem from '@stories/components/Select/SelectItem.vue';
-import SearchIcon from '@stories/icons/Mono/SearchIcon.vue';
-import { calcFontSize, calcPadding, getOptionsGroups } from '@stories/components/Select/helpers';
+import SelectItem from '@components/Select/SelectItem.vue';
+import SearchIcon from '@icons/Mono/SearchIcon.vue';
+import { calcFontSize, calcPadding, getOptionsGroups } from '@components/Select/helpers';
 
 const props = withDefaults(defineProps<ISelectProps>(), {
   size: 'normal',
diff --git a/src/stories/components/Select/SelectItem.vue b/src/components/Select/SelectItem.vue
similarity index 100%
rename from src/stories/components/Select/SelectItem.vue
rename to src/components/Select/SelectItem.vue
diff --git a/src/stories/components/Select/helpers.ts b/src/components/Select/helpers.ts
similarity index 100%
rename from src/stories/components/Select/helpers.ts
rename to src/components/Select/helpers.ts
diff --git a/src/stories/components/SelectButton/SelectButton.stories.ts b/src/components/SelectButton/SelectButton.stories.ts
similarity index 100%
rename from src/stories/components/SelectButton/SelectButton.stories.ts
rename to src/components/SelectButton/SelectButton.stories.ts
diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/components/SelectButton/SelectButton.vue
similarity index 100%
rename from src/stories/components/SelectButton/SelectButton.vue
rename to src/components/SelectButton/SelectButton.vue
diff --git a/src/stories/components/Slider/Slider.stories.ts b/src/components/Slider/Slider.stories.ts
similarity index 100%
rename from src/stories/components/Slider/Slider.stories.ts
rename to src/components/Slider/Slider.stories.ts
diff --git a/src/stories/components/Slider/Slider.vue b/src/components/Slider/Slider.vue
similarity index 100%
rename from src/stories/components/Slider/Slider.vue
rename to src/components/Slider/Slider.vue
diff --git a/src/stories/components/Table/Table.stories.ts b/src/components/Table/Table.stories.ts
similarity index 99%
rename from src/stories/components/Table/Table.stories.ts
rename to src/components/Table/Table.stories.ts
index 18c530d..c448481 100644
--- a/src/stories/components/Table/Table.stories.ts
+++ b/src/components/Table/Table.stories.ts
@@ -15,7 +15,6 @@ const meta: Meta = {
   },
   argTypes: {
     columns: { control: 'text' },
-    data: { control: 'text' },
     fontSize: { control: 'text' },
     gap: { control: 'text' },
     size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
diff --git a/src/stories/components/Table/Table.vue b/src/components/Table/Table.vue
similarity index 96%
rename from src/stories/components/Table/Table.vue
rename to src/components/Table/Table.vue
index 43e754a..4ff2397 100644
--- a/src/stories/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -3,8 +3,8 @@ import type { ITableProps } from '@interfaces/componentsProps';
 import { computed, ref, watch } from 'vue';
 import { convertThemeToColor, convertThemeToSecondaryColor, convertThemeToTextColor } from '@helpers/common';
 import type { ITableItem } from '@interfaces/componentsProp';
-import { calcAdditionalHeight, calcGap, calcRows } from '@stories/components/Table/helpers';
-import TableHeader from '@stories/components/Table/TableHeader.vue';
+import { calcAdditionalHeight, calcGap, calcRows } from '@components/Table/helpers';
+import TableHeader from '@components/Table/TableHeader.vue';
 
 const props = withDefaults(defineProps<ITableProps>(), {
   size: 'normal',
diff --git a/src/stories/components/Table/TableHeader.vue b/src/components/Table/TableHeader.vue
similarity index 88%
rename from src/stories/components/Table/TableHeader.vue
rename to src/components/Table/TableHeader.vue
index 1326490..c21051f 100644
--- a/src/stories/components/Table/TableHeader.vue
+++ b/src/components/Table/TableHeader.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import FilterIcon from '@stories/icons/Mono/FilterIcon.vue';
-import SortDownIcon from '@stories/icons/Mono/SortDownIcon.vue';
-import SortUpIcon from '@stories/icons/Mono/SortUpIcon.vue';
-import SortVerticalIcon from '@stories/icons/Mono/SortVerticalIcon.vue';
-import { calcColumnPadding } from '@stories/components/Table/helpers';
-import Popup from '@stories/components/Popup/Popup.vue';
-import Button from '@stories/components/Button/Button.vue';
-import CheckMarkIcon from '@stories/icons/Mono/CheckMarkIcon.vue';
-import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
+import FilterIcon from '@icons/Mono/FilterIcon.vue';
+import SortDownIcon from '@icons/Mono/SortDownIcon.vue';
+import SortUpIcon from '@icons/Mono/SortUpIcon.vue';
+import SortVerticalIcon from '@icons/Mono/SortVerticalIcon.vue';
+import { calcColumnPadding } from '@components/Table/helpers';
+import Popup from '@components/Popup/Popup.vue';
+import Button from '@components/Button/Button.vue';
+import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
+import CrossIcon from '@icons/Mono/CrossIcon.vue';
 import type { TThemeColor } from '@interfaces/common';
 import type { ITableColumn } from '@interfaces/componentsProp';
 import { computed } from 'vue';
diff --git a/src/stories/components/Table/helpers.ts b/src/components/Table/helpers.ts
similarity index 100%
rename from src/stories/components/Table/helpers.ts
rename to src/components/Table/helpers.ts
diff --git a/src/stories/components/Tag/Tag.stories.ts b/src/components/Tag/Tag.stories.ts
similarity index 100%
rename from src/stories/components/Tag/Tag.stories.ts
rename to src/components/Tag/Tag.stories.ts
diff --git a/src/stories/components/Tag/Tag.vue b/src/components/Tag/Tag.vue
similarity index 100%
rename from src/stories/components/Tag/Tag.vue
rename to src/components/Tag/Tag.vue
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/components/ToggleSwitch/ToggleSwitch.stories.ts
similarity index 98%
rename from src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
rename to src/components/ToggleSwitch/ToggleSwitch.stories.ts
index a17df1c..6592302 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
+++ b/src/components/ToggleSwitch/ToggleSwitch.stories.ts
@@ -14,7 +14,6 @@ const meta: Meta = {
     },
   },
   argTypes: {
-    active: { control: 'boolean' },
     size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
     negativeTheme: {
       control: 'select',
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/components/ToggleSwitch/ToggleSwitch.vue
similarity index 100%
rename from src/stories/components/ToggleSwitch/ToggleSwitch.vue
rename to src/components/ToggleSwitch/ToggleSwitch.vue
diff --git a/src/stories/components/TreeList/TreeItems.vue b/src/components/TreeList/TreeItems.vue
similarity index 98%
rename from src/stories/components/TreeList/TreeItems.vue
rename to src/components/TreeList/TreeItems.vue
index 81f871e..f396073 100644
--- a/src/stories/components/TreeList/TreeItems.vue
+++ b/src/components/TreeList/TreeItems.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { iconsSet } from '@/common/constants/icons';
-import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue';
+import TriangleIcon from '@icons/Mono/TriangleIcon.vue';
 import type { ITIProps } from '@interfaces/componentsProps';
 import { convertThemeToColor } from '@helpers/common';
 
diff --git a/src/stories/components/TreeList/TreeList.stories.ts b/src/components/TreeList/TreeList.stories.ts
similarity index 100%
rename from src/stories/components/TreeList/TreeList.stories.ts
rename to src/components/TreeList/TreeList.stories.ts
diff --git a/src/stories/components/TreeList/TreeList.vue b/src/components/TreeList/TreeList.vue
similarity index 96%
rename from src/stories/components/TreeList/TreeList.vue
rename to src/components/TreeList/TreeList.vue
index c7153f0..556c674 100644
--- a/src/stories/components/TreeList/TreeList.vue
+++ b/src/components/TreeList/TreeList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import type { ITreeItem } from '@interfaces/componentsProp';
-import TreeItems from '@stories/components/TreeList/TreeItems.vue';
+import TreeItems from '@components/TreeList/TreeItems.vue';
 import type { ITLProps } from '@interfaces/componentsProps';
 import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
 
diff --git a/src/stories/icons/Mono/Age18Icon.vue b/src/icons/Mono/Age18Icon.vue
similarity index 100%
rename from src/stories/icons/Mono/Age18Icon.vue
rename to src/icons/Mono/Age18Icon.vue
diff --git a/src/stories/icons/Mono/AirplaneIcon.vue b/src/icons/Mono/AirplaneIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AirplaneIcon.vue
rename to src/icons/Mono/AirplaneIcon.vue
diff --git a/src/stories/icons/Mono/AlarmIcon.vue b/src/icons/Mono/AlarmIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AlarmIcon.vue
rename to src/icons/Mono/AlarmIcon.vue
diff --git a/src/stories/icons/Mono/AlignCenterIcon.vue b/src/icons/Mono/AlignCenterIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AlignCenterIcon.vue
rename to src/icons/Mono/AlignCenterIcon.vue
diff --git a/src/stories/icons/Mono/AlignLeftIcon.vue b/src/icons/Mono/AlignLeftIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AlignLeftIcon.vue
rename to src/icons/Mono/AlignLeftIcon.vue
diff --git a/src/stories/icons/Mono/AlignRightIcon.vue b/src/icons/Mono/AlignRightIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AlignRightIcon.vue
rename to src/icons/Mono/AlignRightIcon.vue
diff --git a/src/stories/icons/Mono/AnchorIcon.vue b/src/icons/Mono/AnchorIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AnchorIcon.vue
rename to src/icons/Mono/AnchorIcon.vue
diff --git a/src/stories/icons/Mono/AnchorLinkIcon.vue b/src/icons/Mono/AnchorLinkIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AnchorLinkIcon.vue
rename to src/icons/Mono/AnchorLinkIcon.vue
diff --git a/src/stories/icons/Mono/ArchiveIcon.vue b/src/icons/Mono/ArchiveIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArchiveIcon.vue
rename to src/icons/Mono/ArchiveIcon.vue
diff --git a/src/stories/icons/Mono/ArrowForwardIcon.vue b/src/icons/Mono/ArrowForwardIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArrowForwardIcon.vue
rename to src/icons/Mono/ArrowForwardIcon.vue
diff --git a/src/stories/icons/Mono/ArrowLeftIcon.vue b/src/icons/Mono/ArrowLeftIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArrowLeftIcon.vue
rename to src/icons/Mono/ArrowLeftIcon.vue
diff --git a/src/stories/icons/Mono/ArrowRightIcon.vue b/src/icons/Mono/ArrowRightIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArrowRightIcon.vue
rename to src/icons/Mono/ArrowRightIcon.vue
diff --git a/src/stories/icons/Mono/ArrowShortDownIcon.vue b/src/icons/Mono/ArrowShortDownIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArrowShortDownIcon.vue
rename to src/icons/Mono/ArrowShortDownIcon.vue
diff --git a/src/stories/icons/Mono/ArrowsVerticalIcon.vue b/src/icons/Mono/ArrowsVerticalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ArrowsVerticalIcon.vue
rename to src/icons/Mono/ArrowsVerticalIcon.vue
diff --git a/src/stories/icons/Mono/AtIcon.vue b/src/icons/Mono/AtIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AtIcon.vue
rename to src/icons/Mono/AtIcon.vue
diff --git a/src/stories/icons/Mono/AwardIcon.vue b/src/icons/Mono/AwardIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/AwardIcon.vue
rename to src/icons/Mono/AwardIcon.vue
diff --git a/src/stories/icons/Mono/BackspaceIcon.vue b/src/icons/Mono/BackspaceIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BackspaceIcon.vue
rename to src/icons/Mono/BackspaceIcon.vue
diff --git a/src/stories/icons/Mono/BadgeIcon.vue b/src/icons/Mono/BadgeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BadgeIcon.vue
rename to src/icons/Mono/BadgeIcon.vue
diff --git a/src/stories/icons/Mono/BallFootballIcon.vue b/src/icons/Mono/BallFootballIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BallFootballIcon.vue
rename to src/icons/Mono/BallFootballIcon.vue
diff --git a/src/stories/icons/Mono/BallIcon.vue b/src/icons/Mono/BallIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BallIcon.vue
rename to src/icons/Mono/BallIcon.vue
diff --git a/src/stories/icons/Mono/BanknoteIcon.vue b/src/icons/Mono/BanknoteIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BanknoteIcon.vue
rename to src/icons/Mono/BanknoteIcon.vue
diff --git a/src/stories/icons/Mono/BellIcon.vue b/src/icons/Mono/BellIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BellIcon.vue
rename to src/icons/Mono/BellIcon.vue
diff --git a/src/stories/icons/Mono/BellOffIcon.vue b/src/icons/Mono/BellOffIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BellOffIcon.vue
rename to src/icons/Mono/BellOffIcon.vue
diff --git a/src/stories/icons/Mono/BoxIcon.vue b/src/icons/Mono/BoxIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BoxIcon.vue
rename to src/icons/Mono/BoxIcon.vue
diff --git a/src/stories/icons/Mono/BrightnessIcon.vue b/src/icons/Mono/BrightnessIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BrightnessIcon.vue
rename to src/icons/Mono/BrightnessIcon.vue
diff --git a/src/stories/icons/Mono/BulbIcon.vue b/src/icons/Mono/BulbIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/BulbIcon.vue
rename to src/icons/Mono/BulbIcon.vue
diff --git a/src/stories/icons/Mono/CalculatorIcon.vue b/src/icons/Mono/CalculatorIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CalculatorIcon.vue
rename to src/icons/Mono/CalculatorIcon.vue
diff --git a/src/stories/icons/Mono/CalendarAddIcon.vue b/src/icons/Mono/CalendarAddIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CalendarAddIcon.vue
rename to src/icons/Mono/CalendarAddIcon.vue
diff --git a/src/stories/icons/Mono/CalendarIcon.vue b/src/icons/Mono/CalendarIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CalendarIcon.vue
rename to src/icons/Mono/CalendarIcon.vue
diff --git a/src/stories/icons/Mono/CalendarRemoveIcon.vue b/src/icons/Mono/CalendarRemoveIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CalendarRemoveIcon.vue
rename to src/icons/Mono/CalendarRemoveIcon.vue
diff --git a/src/stories/icons/Mono/CardsIcon.vue b/src/icons/Mono/CardsIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CardsIcon.vue
rename to src/icons/Mono/CardsIcon.vue
diff --git a/src/stories/icons/Mono/ChartLineIcon.vue b/src/icons/Mono/ChartLineIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ChartLineIcon.vue
rename to src/icons/Mono/ChartLineIcon.vue
diff --git a/src/stories/icons/Mono/ChartPieIcon.vue b/src/icons/Mono/ChartPieIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ChartPieIcon.vue
rename to src/icons/Mono/ChartPieIcon.vue
diff --git a/src/stories/icons/Mono/ChatIcon.vue b/src/icons/Mono/ChatIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ChatIcon.vue
rename to src/icons/Mono/ChatIcon.vue
diff --git a/src/stories/icons/Mono/ChatWritingIcon.vue b/src/icons/Mono/ChatWritingIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ChatWritingIcon.vue
rename to src/icons/Mono/ChatWritingIcon.vue
diff --git a/src/stories/icons/Mono/CheckMarkIcon.vue b/src/icons/Mono/CheckMarkIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CheckMarkIcon.vue
rename to src/icons/Mono/CheckMarkIcon.vue
diff --git a/src/stories/icons/Mono/ChemistryFlaskIcon.vue b/src/icons/Mono/ChemistryFlaskIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ChemistryFlaskIcon.vue
rename to src/icons/Mono/ChemistryFlaskIcon.vue
diff --git a/src/stories/icons/Mono/CodeIcon.vue b/src/icons/Mono/CodeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CodeIcon.vue
rename to src/icons/Mono/CodeIcon.vue
diff --git a/src/stories/icons/Mono/CoinsIcon.vue b/src/icons/Mono/CoinsIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CoinsIcon.vue
rename to src/icons/Mono/CoinsIcon.vue
diff --git a/src/stories/icons/Mono/ColorPaletteIcon.vue b/src/icons/Mono/ColorPaletteIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ColorPaletteIcon.vue
rename to src/icons/Mono/ColorPaletteIcon.vue
diff --git a/src/stories/icons/Mono/CompassIcon.vue b/src/icons/Mono/CompassIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CompassIcon.vue
rename to src/icons/Mono/CompassIcon.vue
diff --git a/src/stories/icons/Mono/ConstructionWorkerIcon.vue b/src/icons/Mono/ConstructionWorkerIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ConstructionWorkerIcon.vue
rename to src/icons/Mono/ConstructionWorkerIcon.vue
diff --git a/src/stories/icons/Mono/ContactsIcon.vue b/src/icons/Mono/ContactsIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ContactsIcon.vue
rename to src/icons/Mono/ContactsIcon.vue
diff --git a/src/stories/icons/Mono/CropIcon.vue b/src/icons/Mono/CropIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CropIcon.vue
rename to src/icons/Mono/CropIcon.vue
diff --git a/src/stories/icons/Mono/CrossCircleIcon.vue b/src/icons/Mono/CrossCircleIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CrossCircleIcon.vue
rename to src/icons/Mono/CrossCircleIcon.vue
diff --git a/src/stories/icons/Mono/CrossIcon.vue b/src/icons/Mono/CrossIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CrossIcon.vue
rename to src/icons/Mono/CrossIcon.vue
diff --git a/src/stories/icons/Mono/CubeIcon.vue b/src/icons/Mono/CubeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CubeIcon.vue
rename to src/icons/Mono/CubeIcon.vue
diff --git a/src/stories/icons/Mono/CupIcon.vue b/src/icons/Mono/CupIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CupIcon.vue
rename to src/icons/Mono/CupIcon.vue
diff --git a/src/stories/icons/Mono/CursorIcon.vue b/src/icons/Mono/CursorIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/CursorIcon.vue
rename to src/icons/Mono/CursorIcon.vue
diff --git a/src/stories/icons/Mono/DiamondIcon.vue b/src/icons/Mono/DiamondIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DiamondIcon.vue
rename to src/icons/Mono/DiamondIcon.vue
diff --git a/src/stories/icons/Mono/DiaryIcon.vue b/src/icons/Mono/DiaryIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DiaryIcon.vue
rename to src/icons/Mono/DiaryIcon.vue
diff --git a/src/stories/icons/Mono/DiceIcon.vue b/src/icons/Mono/DiceIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DiceIcon.vue
rename to src/icons/Mono/DiceIcon.vue
diff --git a/src/stories/icons/Mono/DigIcon.vue b/src/icons/Mono/DigIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DigIcon.vue
rename to src/icons/Mono/DigIcon.vue
diff --git a/src/stories/icons/Mono/DislikeIcon.vue b/src/icons/Mono/DislikeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DislikeIcon.vue
rename to src/icons/Mono/DislikeIcon.vue
diff --git a/src/stories/icons/Mono/DisplayIcon.vue b/src/icons/Mono/DisplayIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DisplayIcon.vue
rename to src/icons/Mono/DisplayIcon.vue
diff --git a/src/stories/icons/Mono/DocumentAddIcon.vue b/src/icons/Mono/DocumentAddIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DocumentAddIcon.vue
rename to src/icons/Mono/DocumentAddIcon.vue
diff --git a/src/stories/icons/Mono/DocumentDeleteIcon.vue b/src/icons/Mono/DocumentDeleteIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DocumentDeleteIcon.vue
rename to src/icons/Mono/DocumentDeleteIcon.vue
diff --git a/src/stories/icons/Mono/DocumentEditIcon.vue b/src/icons/Mono/DocumentEditIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DocumentEditIcon.vue
rename to src/icons/Mono/DocumentEditIcon.vue
diff --git a/src/stories/icons/Mono/DocumentIcon.vue b/src/icons/Mono/DocumentIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DocumentIcon.vue
rename to src/icons/Mono/DocumentIcon.vue
diff --git a/src/stories/icons/Mono/DollarIcon.vue b/src/icons/Mono/DollarIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DollarIcon.vue
rename to src/icons/Mono/DollarIcon.vue
diff --git a/src/stories/icons/Mono/DotsHorizontalIcon.vue b/src/icons/Mono/DotsHorizontalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DotsHorizontalIcon.vue
rename to src/icons/Mono/DotsHorizontalIcon.vue
diff --git a/src/stories/icons/Mono/DotsVerticalIcon.vue b/src/icons/Mono/DotsVerticalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DotsVerticalIcon.vue
rename to src/icons/Mono/DotsVerticalIcon.vue
diff --git a/src/stories/icons/Mono/DownloadIcon.vue b/src/icons/Mono/DownloadIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DownloadIcon.vue
rename to src/icons/Mono/DownloadIcon.vue
diff --git a/src/stories/icons/Mono/DropIcon.vue b/src/icons/Mono/DropIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DropIcon.vue
rename to src/icons/Mono/DropIcon.vue
diff --git a/src/stories/icons/Mono/DumbbelIcon.vue b/src/icons/Mono/DumbbelIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/DumbbelIcon.vue
rename to src/icons/Mono/DumbbelIcon.vue
diff --git a/src/stories/icons/Mono/EarthIcon.vue b/src/icons/Mono/EarthIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/EarthIcon.vue
rename to src/icons/Mono/EarthIcon.vue
diff --git a/src/stories/icons/Mono/EditIcon.vue b/src/icons/Mono/EditIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/EditIcon.vue
rename to src/icons/Mono/EditIcon.vue
diff --git a/src/stories/icons/Mono/EncyclopediaIcon.vue b/src/icons/Mono/EncyclopediaIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/EncyclopediaIcon.vue
rename to src/icons/Mono/EncyclopediaIcon.vue
diff --git a/src/stories/icons/Mono/ExitIcon.vue b/src/icons/Mono/ExitIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ExitIcon.vue
rename to src/icons/Mono/ExitIcon.vue
diff --git a/src/stories/icons/Mono/EyeIcon.vue b/src/icons/Mono/EyeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/EyeIcon.vue
rename to src/icons/Mono/EyeIcon.vue
diff --git a/src/stories/icons/Mono/FeedbackIcon.vue b/src/icons/Mono/FeedbackIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FeedbackIcon.vue
rename to src/icons/Mono/FeedbackIcon.vue
diff --git a/src/stories/icons/Mono/FilterIcon.vue b/src/icons/Mono/FilterIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FilterIcon.vue
rename to src/icons/Mono/FilterIcon.vue
diff --git a/src/stories/icons/Mono/FingerprintIcon.vue b/src/icons/Mono/FingerprintIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FingerprintIcon.vue
rename to src/icons/Mono/FingerprintIcon.vue
diff --git a/src/stories/icons/Mono/FireIcon.vue b/src/icons/Mono/FireIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FireIcon.vue
rename to src/icons/Mono/FireIcon.vue
diff --git a/src/stories/icons/Mono/FlagIcon.vue b/src/icons/Mono/FlagIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FlagIcon.vue
rename to src/icons/Mono/FlagIcon.vue
diff --git a/src/stories/icons/Mono/FlashIcon.vue b/src/icons/Mono/FlashIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FlashIcon.vue
rename to src/icons/Mono/FlashIcon.vue
diff --git a/src/stories/icons/Mono/FlashlightIcon.vue b/src/icons/Mono/FlashlightIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FlashlightIcon.vue
rename to src/icons/Mono/FlashlightIcon.vue
diff --git a/src/stories/icons/Mono/FolderLockIcon.vue b/src/icons/Mono/FolderLockIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FolderLockIcon.vue
rename to src/icons/Mono/FolderLockIcon.vue
diff --git a/src/stories/icons/Mono/FrameIcon.vue b/src/icons/Mono/FrameIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FrameIcon.vue
rename to src/icons/Mono/FrameIcon.vue
diff --git a/src/stories/icons/Mono/FullScreenIcon.vue b/src/icons/Mono/FullScreenIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/FullScreenIcon.vue
rename to src/icons/Mono/FullScreenIcon.vue
diff --git a/src/stories/icons/Mono/GameControllerIcon.vue b/src/icons/Mono/GameControllerIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/GameControllerIcon.vue
rename to src/icons/Mono/GameControllerIcon.vue
diff --git a/src/stories/icons/Mono/GiftIcon.vue b/src/icons/Mono/GiftIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/GiftIcon.vue
rename to src/icons/Mono/GiftIcon.vue
diff --git a/src/stories/icons/Mono/GlassesIcon.vue b/src/icons/Mono/GlassesIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/GlassesIcon.vue
rename to src/icons/Mono/GlassesIcon.vue
diff --git a/src/stories/icons/Mono/HamburgerIcon.vue b/src/icons/Mono/HamburgerIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/HamburgerIcon.vue
rename to src/icons/Mono/HamburgerIcon.vue
diff --git a/src/stories/icons/Mono/HandIcon.vue b/src/icons/Mono/HandIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/HandIcon.vue
rename to src/icons/Mono/HandIcon.vue
diff --git a/src/stories/icons/Mono/HomeIcon.vue b/src/icons/Mono/HomeIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/HomeIcon.vue
rename to src/icons/Mono/HomeIcon.vue
diff --git a/src/stories/icons/Mono/ImageEditIcon.vue b/src/icons/Mono/ImageEditIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ImageEditIcon.vue
rename to src/icons/Mono/ImageEditIcon.vue
diff --git a/src/stories/icons/Mono/ImageIcon.vue b/src/icons/Mono/ImageIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ImageIcon.vue
rename to src/icons/Mono/ImageIcon.vue
diff --git a/src/stories/icons/Mono/LineDashedIcon.vue b/src/icons/Mono/LineDashedIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/LineDashedIcon.vue
rename to src/icons/Mono/LineDashedIcon.vue
diff --git a/src/stories/icons/Mono/LineDiagonalIcon.vue b/src/icons/Mono/LineDiagonalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/LineDiagonalIcon.vue
rename to src/icons/Mono/LineDiagonalIcon.vue
diff --git a/src/stories/icons/Mono/LineDottedIcon.vue b/src/icons/Mono/LineDottedIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/LineDottedIcon.vue
rename to src/icons/Mono/LineDottedIcon.vue
diff --git a/src/stories/icons/Mono/LineIcon.vue b/src/icons/Mono/LineIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/LineIcon.vue
rename to src/icons/Mono/LineIcon.vue
diff --git a/src/stories/icons/Mono/MoveIcon.vue b/src/icons/Mono/MoveIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/MoveIcon.vue
rename to src/icons/Mono/MoveIcon.vue
diff --git a/src/stories/icons/Mono/ParagraphIcon.vue b/src/icons/Mono/ParagraphIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/ParagraphIcon.vue
rename to src/icons/Mono/ParagraphIcon.vue
diff --git a/src/stories/icons/Mono/PhoneHandsetIcon.vue b/src/icons/Mono/PhoneHandsetIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/PhoneHandsetIcon.vue
rename to src/icons/Mono/PhoneHandsetIcon.vue
diff --git a/src/stories/icons/Mono/PlusCircleIcon.vue b/src/icons/Mono/PlusCircleIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/PlusCircleIcon.vue
rename to src/icons/Mono/PlusCircleIcon.vue
diff --git a/src/stories/icons/Mono/PlusIcon.vue b/src/icons/Mono/PlusIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/PlusIcon.vue
rename to src/icons/Mono/PlusIcon.vue
diff --git a/src/stories/icons/Mono/PointerIcon.vue b/src/icons/Mono/PointerIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/PointerIcon.vue
rename to src/icons/Mono/PointerIcon.vue
diff --git a/src/stories/icons/Mono/SaveIcon.vue b/src/icons/Mono/SaveIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SaveIcon.vue
rename to src/icons/Mono/SaveIcon.vue
diff --git a/src/stories/icons/Mono/SearchIcon.vue b/src/icons/Mono/SearchIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SearchIcon.vue
rename to src/icons/Mono/SearchIcon.vue
diff --git a/src/stories/icons/Mono/SettingsIcon.vue b/src/icons/Mono/SettingsIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SettingsIcon.vue
rename to src/icons/Mono/SettingsIcon.vue
diff --git a/src/stories/icons/Mono/SortDownIcon.vue b/src/icons/Mono/SortDownIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SortDownIcon.vue
rename to src/icons/Mono/SortDownIcon.vue
diff --git a/src/stories/icons/Mono/SortHorizontalIcon.vue b/src/icons/Mono/SortHorizontalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SortHorizontalIcon.vue
rename to src/icons/Mono/SortHorizontalIcon.vue
diff --git a/src/stories/icons/Mono/SortUpIcon.vue b/src/icons/Mono/SortUpIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SortUpIcon.vue
rename to src/icons/Mono/SortUpIcon.vue
diff --git a/src/stories/icons/Mono/SortVerticalIcon.vue b/src/icons/Mono/SortVerticalIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/SortVerticalIcon.vue
rename to src/icons/Mono/SortVerticalIcon.vue
diff --git a/src/stories/icons/Mono/StarFilledIcon.vue b/src/icons/Mono/StarFilledIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/StarFilledIcon.vue
rename to src/icons/Mono/StarFilledIcon.vue
diff --git a/src/stories/icons/Mono/StarIcon.vue b/src/icons/Mono/StarIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/StarIcon.vue
rename to src/icons/Mono/StarIcon.vue
diff --git a/src/stories/icons/Mono/TableIcon.vue b/src/icons/Mono/TableIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/TableIcon.vue
rename to src/icons/Mono/TableIcon.vue
diff --git a/src/stories/icons/Mono/TrashIcon.vue b/src/icons/Mono/TrashIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/TrashIcon.vue
rename to src/icons/Mono/TrashIcon.vue
diff --git a/src/stories/icons/Mono/TriangleIcon.vue b/src/icons/Mono/TriangleIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/TriangleIcon.vue
rename to src/icons/Mono/TriangleIcon.vue
diff --git a/src/stories/icons/Mono/UserIcon.vue b/src/icons/Mono/UserIcon.vue
similarity index 100%
rename from src/stories/icons/Mono/UserIcon.vue
rename to src/icons/Mono/UserIcon.vue
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 0cd87b1..a7560fb 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -13,7 +13,7 @@
       "@icons/*": ["./src/icons/*"],
       "@helpers/*": ["src/common/helpers/*"],
       "@interfaces/*": ["src/common/interfaces/*"],
-      "@stories/*": ["./src/stories/*"]
+      "@components/*": ["./src/components/*"]
     }
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
index b38c6eb..ed01d64 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,7 +12,7 @@ export default defineConfig({
       '@icons': fileURLToPath(new URL('./src/icons', import.meta.url)),
       '@helpers': fileURLToPath(new URL('./src/common/helpers', import.meta.url)),
       '@interfaces': fileURLToPath(new URL('./src/common/interfaces', import.meta.url)),
-      '@stories': fileURLToPath(new URL('./src/stories', import.meta.url)),
+      '@components': fileURLToPath(new URL('./src/components', import.meta.url)),
     },
   },
 });
-- 
GitLab


From b2e652833d3712e364609b854648921b487eba2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 18 Jan 2025 17:16:19 +0500
Subject: [PATCH 06/19] refactor: add default value = 0 to 'Knob'

---
 src/components/Knob/Knob.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Knob/Knob.vue b/src/components/Knob/Knob.vue
index 6caf768..f941d70 100644
--- a/src/components/Knob/Knob.vue
+++ b/src/components/Knob/Knob.vue
@@ -6,7 +6,6 @@ import { calcCenter, calcStart, calcNewValue, calcThemeColor, calcContainerSize
 import Button from '@components/Button/Button.vue';
 
 const props = withDefaults(defineProps<IKnobProps>(), {
-  value: 0,
   min: 0,
   max: 5,
   step: 1,
@@ -23,7 +22,9 @@ const props = withDefaults(defineProps<IKnobProps>(), {
   colorAsTheme: false,
   textBold: false,
 });
-const value = defineModel<number>() as Ref<number>;
+const value = defineModel<number>({
+  default: 0,
+}) as Ref<number>;
 
 const isClickHold = ref<boolean>(false);
 
-- 
GitLab


From 62c425c0207814bf3681ad63779d9301bf656b1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 18 Jan 2025 17:20:06 +0500
Subject: [PATCH 07/19] docs: README.md

---
 README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 4145a15..d1f8001 100644
--- a/README.md
+++ b/README.md
@@ -10,12 +10,15 @@
 - MenuDial;
 - Popup;
 - Slider;
+
 - Drawer;
 - Modal;
 - Knob;
 - Select;
 - SelectButton;
+
 - Button;
+- Rating;
 - ToggleSwitch;
 - Tag;
 - Checkbox;
@@ -23,8 +26,8 @@
 
 ---
 ## Общая информация
-### Components count: 15
-### Bundle size: 292.7KB
+### Components count: 16
+### Bundle size: 291.5KB
 
 ---
 
-- 
GitLab


From 432693e35efdb4309292286c2ae771e61f3fe323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 18 Jan 2025 19:58:54 +0500
Subject: [PATCH 08/19] feat: component 'ProgressBar'

---
 src/common/interfaces/componentsProp.ts       |   2 +-
 src/common/interfaces/componentsProps.ts      |  24 ++-
 src/components/Knob/helpers.ts                |   4 +-
 .../ProgressBar/ProgressBar.stories.ts        | 140 ++++++++++++++++++
 src/components/ProgressBar/ProgressBar.vue    |  84 +++++++++++
 5 files changed, 248 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ProgressBar/ProgressBar.stories.ts
 create mode 100644 src/components/ProgressBar/ProgressBar.vue

diff --git a/src/common/interfaces/componentsProp.ts b/src/common/interfaces/componentsProp.ts
index 0b549ea..ae44f55 100644
--- a/src/common/interfaces/componentsProp.ts
+++ b/src/common/interfaces/componentsProp.ts
@@ -55,7 +55,7 @@ export interface IMDItemProps {
   onClick?: () => void;
 }
 
-export interface IKnobColorGap {
+export interface IColorGap {
   start: number;
   end: number;
   color: TThemeColor;
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index ec87cbd..07b4d81 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -11,14 +11,13 @@ import type {
   TThemeColorNoWhite,
 } from '@interfaces/common';
 import type {
-  IKnobColorGap,
+  IColorGap,
   IMDItemProps,
   ISBOption,
   ISelectGroup,
   ISelectOption,
   ISliderOptions,
   ITableColumn,
-  ITableItem,
   ITreeItem,
 } from '@interfaces/componentsProp';
 
@@ -74,7 +73,7 @@ export interface IKnobProps {
   step?: number;
   size?: TSize;
   theme?: TThemeColor;
-  colorGaps?: IKnobColorGap[];
+  colorGaps?: IColorGap[];
   negativeTheme?: TThemeColor;
   color?: TThemeColor;
   background?: string;
@@ -192,6 +191,25 @@ export interface IButtonProps {
   darknessTextColor?: TDarkness;
 }
 
+export interface IProgressBarProps {
+  value: number;
+  max?: number;
+  width?: string;
+  height?: string;
+  size?: TSize;
+  fontSize?: string;
+  colorGaps?: IColorGap[];
+  colorInactiveGaps?: IColorGap[];
+  theme?: TThemeColor;
+  inactiveTheme?: TThemeColor;
+  darknessTheme?: TDarkness;
+  darknessInactiveTheme?: TDarkness;
+  showLabel?: boolean;
+  labelBefore?: string;
+  labelAfter?: string;
+  noBorder?: boolean;
+}
+
 export interface IRatingProps {
   count?: number;
   size?: TSize;
diff --git a/src/components/Knob/helpers.ts b/src/components/Knob/helpers.ts
index 2a53cd0..56cb24e 100644
--- a/src/components/Knob/helpers.ts
+++ b/src/components/Knob/helpers.ts
@@ -1,6 +1,6 @@
 import { convertThemeToColor } from '@helpers/common';
 import { EThemeColor, type TDarkness, type TSize, type TThemeColor } from '@interfaces/common';
-import type { IKnobColorGap } from '@interfaces/componentsProp';
+import type { IColorGap } from '@interfaces/componentsProp';
 
 export const calcNewValue = (
   event: MouseEvent,
@@ -40,7 +40,7 @@ export const calcStart = (container: Element) => {
 };
 
 export const calcThemeColor = (
-  colorGaps: IKnobColorGap[] | undefined,
+  colorGaps: IColorGap[] | undefined,
   theme: TThemeColor,
   darknessTheme: TDarkness,
   value: number,
diff --git a/src/components/ProgressBar/ProgressBar.stories.ts b/src/components/ProgressBar/ProgressBar.stories.ts
new file mode 100644
index 0000000..27e2b24
--- /dev/null
+++ b/src/components/ProgressBar/ProgressBar.stories.ts
@@ -0,0 +1,140 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import ProgressBar from './ProgressBar.vue';
+
+const meta: Meta = {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that is used as a ProgressBar.',
+      },
+    },
+  },
+  argTypes: {
+    value: { control: 'number' },
+    max: { control: 'number' },
+    width: { control: 'text' },
+    height: { control: 'text' },
+    labelBefore: { control: 'text' },
+    labelAfter: { control: 'text' },
+    showLabel: { control: 'boolean' },
+    noBorder: { control: 'boolean' },
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+    fontSize: { control: 'text' },
+    colorGaps: { control: 'object' },
+    colorInactiveGaps: { control: 'object' },
+    darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+    darknessInactiveTheme: {
+      control: 'select',
+      options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    },
+    theme: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+    inactiveTheme: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+  },
+  args: {},
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {
+    value: 40,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    value: 40,
+    theme: 'red',
+    inactiveTheme: 'red',
+    labelAfter: '/100',
+    width: '500px',
+  },
+};
+
+export const Full: Story = {
+  args: {
+    colorGaps: [
+      {
+        start: 0,
+        end: 10,
+        color: 'purple',
+        darknessColor: '700',
+      },
+      {
+        start: 10,
+        end: 20,
+        color: 'red',
+      },
+      {
+        start: 20,
+        end: 30,
+        color: 'orange',
+      },
+      {
+        start: 30,
+        end: 40,
+        color: 'yellow',
+      },
+      {
+        start: 40,
+        end: 50,
+        color: 'green',
+      },
+    ],
+
+    size: 'huge',
+    value: 35,
+    max: 50,
+    labelAfter: '',
+    showLabel: true,
+    labelBefore: '$',
+    inactiveTheme: 'white',
+    darknessInactiveTheme: '400',
+    noBorder: true,
+  },
+};
diff --git a/src/components/ProgressBar/ProgressBar.vue b/src/components/ProgressBar/ProgressBar.vue
new file mode 100644
index 0000000..61cd383
--- /dev/null
+++ b/src/components/ProgressBar/ProgressBar.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { IProgressBarProps } from '@interfaces/componentsProps';
+import { computed } from 'vue';
+import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
+
+const props = withDefaults(defineProps<IProgressBarProps>(), {
+  value: 0,
+  max: 100,
+  size: 'normal',
+  theme: 'black',
+  inactiveTheme: 'white',
+  darknessTheme: '500',
+  darknessInactiveTheme: '300',
+  showLabel: true,
+  labelAfter: '%',
+});
+const active = computed(() => `${(props.value / props.max) * 100}%`);
+const activeColor = computed(() => {
+  if (!props.colorGaps) return convertThemeToColor(props.theme, props.darknessTheme);
+  const current = props.colorGaps.find((item) => item.start <= props.value && props.value <= item.end);
+  if (!current) return convertThemeToColor(props.theme, props.darknessTheme);
+  return convertThemeToColor(current.color, current.darknessColor);
+});
+const inactiveColor = computed(() => {
+  if (!props.colorInactiveGaps) return convertThemeToColor(props.inactiveTheme, props.darknessInactiveTheme);
+  const current = props.colorInactiveGaps.find((item) => item.start <= props.value && props.value <= item.end);
+  if (!current) return convertThemeToColor(props.inactiveTheme, props.darknessInactiveTheme);
+  return convertThemeToColor(current.color, current.darknessColor);
+});
+const textColor = computed(() => convertThemeToTextColor(props.theme, props.darknessTheme));
+const fontSize = computed(() => {
+  if (props.fontSize) return props.fontSize;
+  const size = props.size;
+  if (size === 'normal') return '16px';
+  if (size === 'large') return '20px';
+  if (size === 'huge') return '24px';
+  return '12px';
+});
+const defaultHeight = computed(() => {
+  const size = props.size;
+  if (size === 'normal') return '30px';
+  if (size === 'large') return '45px';
+  if (size === 'huge') return '60px';
+  return '15px';
+});
+</script>
+
+<template>
+  <section
+    class="container"
+    :style="`width: ${width ?? '300px'}; height: ${height ?? defaultHeight}; border: ${noBorder ? '' : '2px solid black'}`"
+  >
+    <div class="active">
+      <span v-show="showLabel" class="value">{{ labelBefore }}{{ value }}{{ labelAfter }}</span>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.container {
+  position: relative;
+  overflow: hidden;
+  border-radius: calc(v-bind(fontSize) / 2.5);
+  background-color: v-bind(inactiveColor);
+}
+.active {
+  width: v-bind(active);
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: width 0.4s ease-in-out;
+  background-color: v-bind(activeColor);
+}
+.value {
+  font-weight: bold;
+  font-size: v-bind(fontSize);
+  color: v-bind(textColor);
+}
+</style>
-- 
GitLab


From b284e6e4c86135f45a0b42252df4388b5ad94675 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 18 Jan 2025 19:59:37 +0500
Subject: [PATCH 09/19] docs: README.md

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index d1f8001..26de19d 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,7 @@
 - SelectButton;
 
 - Button;
+- ProgressBar;
 - Rating;
 - ToggleSwitch;
 - Tag;
@@ -26,8 +27,8 @@
 
 ---
 ## Общая информация
-### Components count: 16
-### Bundle size: 291.5KB
+### Components count: 17
+### Bundle size: 291.7KB
 
 ---
 
-- 
GitLab


From 69fb3dc113334f0c90d27a8e903079863698b7f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 18 Jan 2025 22:01:50 +0500
Subject: [PATCH 10/19] feat: start component 'Paginator'

---
 src/App.vue                                   |  6 +-
 src/common/constants/icons.ts                 |  2 +-
 src/common/interfaces/componentsProps.ts      |  7 ++
 src/components/Paginator/Paginator.stories.ts | 84 +++++++++++++++++++
 src/components/Paginator/Paginator.vue        | 55 ++++++++++++
 src/components/Paginator/PaginatorItem.vue    | 38 +++++++++
 .../ProgressBar/ProgressBar.stories.ts        |  2 +-
 src/icons/Mono/ArrowDoubleLeftShortIcon.vue   | 64 ++++++++++++++
 ...ortDownIcon.vue => ArrowDownShortIcon.vue} |  0
 src/icons/Mono/ArrowLeftShortIcon.vue         | 24 ++++++
 10 files changed, 279 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Paginator/Paginator.stories.ts
 create mode 100644 src/components/Paginator/Paginator.vue
 create mode 100644 src/components/Paginator/PaginatorItem.vue
 create mode 100644 src/icons/Mono/ArrowDoubleLeftShortIcon.vue
 rename src/icons/Mono/{ArrowShortDownIcon.vue => ArrowDownShortIcon.vue} (100%)
 create mode 100644 src/icons/Mono/ArrowLeftShortIcon.vue

diff --git a/src/App.vue b/src/App.vue
index fc3bf13..8ee3a49 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -108,9 +108,11 @@ import UserIcon from '@icons/Mono/UserIcon.vue';
 import ArrowsVerticalIcon from '@icons/Mono/ArrowsVerticalIcon.vue';
 import TriangleIcon from '@icons/Mono/TriangleIcon.vue';
 import Playground from '@/Playground.vue';
-import ArrowShortDownIcon from '@icons/Mono/ArrowShortDownIcon.vue';
+import ArrowShortDownIcon from '@icons/Mono/ArrowDownShortIcon.vue';
 import StarIcon from '@icons/Mono/StarIcon.vue';
 import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';
+import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
+import ArrowDoubleLeftShortIcon from '@icons/Mono/ArrowDoubleLeftShortIcon.vue';
 
 const gentleIcons = {
   Age18Icon,
@@ -122,6 +124,8 @@ const gentleIcons = {
   AnchorIcon,
   AnchorLinkIcon,
   ArchiveIcon,
+  ArrowLeftShortIcon,
+  ArrowDoubleLeftShortIcon,
   ArrowForwardIcon,
   ArrowLeftIcon,
   ArrowRightIcon,
diff --git a/src/common/constants/icons.ts b/src/common/constants/icons.ts
index fe781d0..9ae57d6 100644
--- a/src/common/constants/icons.ts
+++ b/src/common/constants/icons.ts
@@ -107,7 +107,7 @@ import SortHorizontalIcon from '@icons/Mono/SortHorizontalIcon.vue';
 import SortDownIcon from '@icons/Mono/SortDownIcon.vue';
 import SortUpIcon from '@icons/Mono/SortUpIcon.vue';
 import SortVerticalIcon from '@icons/Mono/SortVerticalIcon.vue';
-import ArrowShortDownIcon from '@icons/Mono/ArrowShortDownIcon.vue';
+import ArrowShortDownIcon from '@icons/Mono/ArrowDownShortIcon.vue';
 import SearchIcon from '@icons/Mono/SearchIcon.vue';
 import StarIcon from '@icons/Mono/StarIcon.vue';
 import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 07b4d81..81547c6 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -56,6 +56,13 @@ export interface ITIProps {
   themeColor: string;
 }
 
+export interface IPaginatorProps {
+  value?: number;
+  total?: number;
+  itemsPerPage?: number;
+  size?: TSize;
+}
+
 export interface IMDProps {
   items: IMDItemProps[];
   size?: TSize;
diff --git a/src/components/Paginator/Paginator.stories.ts b/src/components/Paginator/Paginator.stories.ts
new file mode 100644
index 0000000..c3f7619
--- /dev/null
+++ b/src/components/Paginator/Paginator.stories.ts
@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Paginator from './Paginator.vue';
+
+const meta: Meta = {
+  title: 'Components/Paginator',
+  component: Paginator,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component to display data in paged format and provide navigation between pages.',
+      },
+    },
+  },
+  argTypes: {
+    value: { control: 'number' },
+    max: { control: 'number' },
+    width: { control: 'text' },
+    height: { control: 'text' },
+    labelBefore: { control: 'text' },
+    labelAfter: { control: 'text' },
+    showLabel: { control: 'boolean' },
+    noBorder: { control: 'boolean' },
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+    fontSize: { control: 'text' },
+    colorGaps: { control: 'object' },
+    colorInactiveGaps: { control: 'object' },
+    darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+    darknessInactiveTheme: {
+      control: 'select',
+      options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    },
+    theme: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+    inactiveTheme: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
+  },
+  args: {},
+} satisfies Meta<typeof Paginator>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {},
+};
diff --git a/src/components/Paginator/Paginator.vue b/src/components/Paginator/Paginator.vue
new file mode 100644
index 0000000..f4f9093
--- /dev/null
+++ b/src/components/Paginator/Paginator.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import ArrowDoubleLeftShortIcon from '@icons/Mono/ArrowDoubleLeftShortIcon.vue';
+import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
+import type { IPaginatorProps } from '@interfaces/componentsProps';
+import PaginatorItem from '@components/Paginator/PaginatorItem.vue';
+import { computed, ref } from 'vue';
+
+const props = withDefaults(defineProps<IPaginatorProps>(), {
+  total: 10,
+  size: 'normal',
+  theme: 'black',
+  darknessTheme: '500',
+});
+
+const current = ref<number | undefined>(props.value);
+
+const items = computed(() => {
+  if (!current.value) return [1, 2, 3, 4, 5];
+  const start = Math.floor(current.value / 5);
+  return [start + 1, start + 2, start + 3, start + 4, start + 5];
+});
+const iconSize = computed(() => {
+  const size = props.size;
+  if (size === 'normal') return '20';
+  if (size === 'large') return '25';
+  if (size === 'huge') return '30';
+  return '15';
+});
+const itemSize = computed(() => `${+iconSize.value * 1.5}px`);
+</script>
+
+<template>
+  <section class="container">
+    <PaginatorItem class="paginatorItem">
+      <ArrowDoubleLeftShortIcon :size="iconSize" />
+    </PaginatorItem>
+    <PaginatorItem class="paginatorItem">
+      <ArrowLeftShortIcon :size="iconSize" />
+    </PaginatorItem>
+    <PaginatorItem v-for="item of items" :key="item" class="paginatorItem">
+      {{ item }}
+    </PaginatorItem>
+  </section>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  gap: 5px;
+}
+.paginatorItem {
+  width: v-bind(itemSize);
+  height: v-bind(itemSize);
+}
+</style>
diff --git a/src/components/Paginator/PaginatorItem.vue b/src/components/Paginator/PaginatorItem.vue
new file mode 100644
index 0000000..048735e
--- /dev/null
+++ b/src/components/Paginator/PaginatorItem.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="item">
+    <div class="bg"></div>
+    <slot />
+  </div>
+</template>
+
+<style>
+.item {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.item:hover > .bg {
+  opacity: 1;
+}
+.item:active > .bg {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.2) !important;
+}
+.bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  transition: all 0.15s ease;
+}
+</style>
diff --git a/src/components/ProgressBar/ProgressBar.stories.ts b/src/components/ProgressBar/ProgressBar.stories.ts
index 27e2b24..285c1c3 100644
--- a/src/components/ProgressBar/ProgressBar.stories.ts
+++ b/src/components/ProgressBar/ProgressBar.stories.ts
@@ -9,7 +9,7 @@ const meta: Meta = {
   parameters: {
     docs: {
       description: {
-        component: 'A component that is used as a ProgressBar.',
+        component: 'A process status indicator.',
       },
     },
   },
diff --git a/src/icons/Mono/ArrowDoubleLeftShortIcon.vue b/src/icons/Mono/ArrowDoubleLeftShortIcon.vue
new file mode 100644
index 0000000..a4dc9ed
--- /dev/null
+++ b/src/icons/Mono/ArrowDoubleLeftShortIcon.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 532.153 532.153"
+    xml:space="preserve"
+  >
+    <line
+      x1="155"
+      y1="-100"
+      x2="-50"
+      y2="100"
+      transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+      fill="none"
+      :stroke="color ?? '#000000'"
+      stroke-width="50"
+      stroke-linecap="round"
+    />
+    <line
+      x1="-50"
+      y1="100"
+      x2="155"
+      y2="300"
+      transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+      fill="none"
+      :stroke="color ?? '#000000'"
+      stroke-width="50"
+      stroke-linecap="round"
+    />
+    <line
+      x1="335"
+      y1="-100"
+      x2="110"
+      y2="100"
+      transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+      fill="none"
+      :stroke="color ?? '#000000'"
+      stroke-width="50"
+      stroke-linecap="round"
+    />
+    <line
+      x1="110"
+      y1="100"
+      x2="335"
+      y2="300"
+      transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+      fill="none"
+      :stroke="color ?? '#000000'"
+      stroke-width="50"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/icons/Mono/ArrowShortDownIcon.vue b/src/icons/Mono/ArrowDownShortIcon.vue
similarity index 100%
rename from src/icons/Mono/ArrowShortDownIcon.vue
rename to src/icons/Mono/ArrowDownShortIcon.vue
diff --git a/src/icons/Mono/ArrowLeftShortIcon.vue b/src/icons/Mono/ArrowLeftShortIcon.vue
new file mode 100644
index 0000000..8c2f7b9
--- /dev/null
+++ b/src/icons/Mono/ArrowLeftShortIcon.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg :width="`${size ?? 40}px`" :height="`${size ?? 40}px`" viewBox="-4.5 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g transform="translate(-345.000000, -6679.000000)" :fill="color ?? '#000000'">
+        <g id="icons" transform="translate(56.000000, 160.000000)">
+          <path
+            d="M299.633777,6519.29231 L299.633777,6519.29231 C299.228878,6518.90256 298.573377,6518.90256 298.169513,6519.29231 L289.606572,6527.55587 C288.797809,6528.33636 288.797809,6529.60253 289.606572,6530.38301 L298.231646,6538.70754 C298.632403,6539.09329 299.27962,6539.09828 299.685554,6538.71753 L299.685554,6538.71753 C300.100809,6538.32879 300.104951,6537.68821 299.696945,6537.29347 L291.802968,6529.67648 C291.398069,6529.28574 291.398069,6528.65315 291.802968,6528.26241 L299.633777,6520.70538 C300.038676,6520.31563 300.038676,6519.68305 299.633777,6519.29231"
+            id="arrow_left-[#335]"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>
-- 
GitLab


From 3e47e8505fcb51dc80f5b020e162613838b8c99d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Mon, 20 Jan 2025 18:30:00 +0500
Subject: [PATCH 11/19] refactor: 'Rating', add 'offTheme' prop

---
 src/common/interfaces/componentsProps.ts |  1 +
 src/components/Rating/Rating.stories.ts  | 22 ++++++++++++++++++++++
 src/components/Rating/Rating.vue         |  6 ++++--
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 81547c6..8355d0b 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -222,6 +222,7 @@ export interface IRatingProps {
   size?: TSize;
   gap?: string;
   theme?: TThemeColor;
+  offTheme?: TThemeColor;
   darknessTheme?: TDarkness;
 }
 
diff --git a/src/components/Rating/Rating.stories.ts b/src/components/Rating/Rating.stories.ts
index 320ab67..825fe69 100644
--- a/src/components/Rating/Rating.stories.ts
+++ b/src/components/Rating/Rating.stories.ts
@@ -38,6 +38,26 @@ const meta: Meta = {
         'black',
       ],
     },
+    offTheme: {
+      control: 'select',
+      options: [
+        'white',
+        'blue',
+        'sky',
+        'cyan',
+        'teal',
+        'green',
+        'yellow',
+        'orange',
+        'pink',
+        'fuchsia',
+        'purple',
+        'indigo',
+        'rose',
+        'red',
+        'black',
+      ],
+    },
   },
   args: {},
 } satisfies Meta<typeof Rating>;
@@ -53,6 +73,8 @@ export const Simple: Story = {
 export const Small: Story = {
   args: {
     size: 'small',
+    theme: 'yellow',
+    offTheme: 'black',
   },
 };
 
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index b202f46..453a9d2 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -16,10 +16,12 @@ const props = withDefaults(defineProps<IRatingProps>(), {
 const value = defineModel({
   default: 0,
 }) as Ref<number>;
+
 const onHoverIndex = ref();
 
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
-const themeColorOnHover = computed(() => convertThemeToColor(props.theme, '200'));
+const offColor = computed(() => (props.offTheme ? convertThemeToColor(props.offTheme, props.darknessTheme) : null));
+const themeColorOnHover = computed(() => convertThemeToColor(props.offTheme ?? props.theme, '200'));
 const iconSize = computed(() => {
   const size = props.size;
   if (size === 'normal') return '20px';
@@ -43,7 +45,7 @@ const onActiveClick = (index: number) => {
         <component
           class="icon absoluteIcon"
           :is="iconsSet['Star']"
-          :color="themeColor"
+          :color="offColor ?? themeColor"
           @pointerenter="onHoverIndex = index"
           @pointerleave="onHoverIndex = null"
           :size="iconSize"
-- 
GitLab


From 93199354c63b5149a162c86bbb37b883f455d10f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Mon, 20 Jan 2025 19:50:18 +0500
Subject: [PATCH 12/19] feat: 'Paginator' in process

---
 src/App.vue                                   |  4 ++
 src/common/interfaces/componentsProps.ts      |  4 ++
 src/components/Paginator/Paginator.stories.ts | 42 +++---------
 src/components/Paginator/Paginator.vue        | 67 +++++++++++++++----
 src/components/Paginator/PaginatorItem.vue    | 52 +++++++++++---
 src/icons/Mono/ArrowDoubleLeftShortIcon.vue   |  4 +-
 src/icons/Mono/ArrowDoubleRightShortIcon.vue  | 64 ++++++++++++++++++
 src/icons/Mono/ArrowRightShortIcon.vue        | 41 ++++++++++++
 8 files changed, 223 insertions(+), 55 deletions(-)
 create mode 100644 src/icons/Mono/ArrowDoubleRightShortIcon.vue
 create mode 100644 src/icons/Mono/ArrowRightShortIcon.vue

diff --git a/src/App.vue b/src/App.vue
index 8ee3a49..ebb55d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -113,6 +113,8 @@ import StarIcon from '@icons/Mono/StarIcon.vue';
 import StarFilledIcon from '@icons/Mono/StarFilledIcon.vue';
 import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
 import ArrowDoubleLeftShortIcon from '@icons/Mono/ArrowDoubleLeftShortIcon.vue';
+import ArrowRightShortIcon from '@icons/Mono/ArrowRightShortIcon.vue';
+import ArrowDoubleRightShortIcon from '@icons/Mono/ArrowDoubleRightShortIcon.vue';
 
 const gentleIcons = {
   Age18Icon,
@@ -129,6 +131,8 @@ const gentleIcons = {
   ArrowForwardIcon,
   ArrowLeftIcon,
   ArrowRightIcon,
+  ArrowRightShortIcon,
+  ArrowDoubleRightShortIcon,
   ArrowShortDownIcon,
   ArrowsVerticalIcon,
   AtIcon,
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 8355d0b..843197d 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -60,7 +60,11 @@ export interface IPaginatorProps {
   value?: number;
   total?: number;
   itemsPerPage?: number;
+  itemsPerPageOptions?: number[];
   size?: TSize;
+  fontSize?: string;
+  theme?: TThemeColor;
+  darknessTheme?: TDarkness;
 }
 
 export interface IMDProps {
diff --git a/src/components/Paginator/Paginator.stories.ts b/src/components/Paginator/Paginator.stories.ts
index c3f7619..e4ff882 100644
--- a/src/components/Paginator/Paginator.stories.ts
+++ b/src/components/Paginator/Paginator.stories.ts
@@ -15,22 +15,12 @@ const meta: Meta = {
   },
   argTypes: {
     value: { control: 'number' },
-    max: { control: 'number' },
-    width: { control: 'text' },
-    height: { control: 'text' },
-    labelBefore: { control: 'text' },
-    labelAfter: { control: 'text' },
-    showLabel: { control: 'boolean' },
-    noBorder: { control: 'boolean' },
+    total: { control: 'number' },
+    itemsPerPage: { control: 'number' },
+    itemsPerPageOptions: { control: 'object' },
     size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
     fontSize: { control: 'text' },
-    colorGaps: { control: 'object' },
-    colorInactiveGaps: { control: 'object' },
     darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
-    darknessInactiveTheme: {
-      control: 'select',
-      options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
-    },
     theme: {
       control: 'select',
       options: [
@@ -51,26 +41,6 @@ const meta: Meta = {
         'black',
       ],
     },
-    inactiveTheme: {
-      control: 'select',
-      options: [
-        'white',
-        'blue',
-        'sky',
-        'cyan',
-        'teal',
-        'green',
-        'yellow',
-        'orange',
-        'pink',
-        'fuchsia',
-        'purple',
-        'indigo',
-        'rose',
-        'red',
-        'black',
-      ],
-    },
   },
   args: {},
 } satisfies Meta<typeof Paginator>;
@@ -82,3 +52,9 @@ type Story = StoryObj<typeof meta>;
 export const Simple: Story = {
   args: {},
 };
+
+export const Full: Story = {
+  args: {
+    itemsPerPageOptions: ['10', '20', '30'],
+  },
+};
diff --git a/src/components/Paginator/Paginator.vue b/src/components/Paginator/Paginator.vue
index f4f9093..68ad21b 100644
--- a/src/components/Paginator/Paginator.vue
+++ b/src/components/Paginator/Paginator.vue
@@ -1,45 +1,83 @@
 <script setup lang="ts">
 import ArrowDoubleLeftShortIcon from '@icons/Mono/ArrowDoubleLeftShortIcon.vue';
+import ArrowDoubleRightShortIcon from '@icons/Mono/ArrowDoubleRightShortIcon.vue';
 import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
+import ArrowRightShortIcon from '@icons/Mono/ArrowRightShortIcon.vue';
 import type { IPaginatorProps } from '@interfaces/componentsProps';
 import PaginatorItem from '@components/Paginator/PaginatorItem.vue';
-import { computed, ref } from 'vue';
+import { computed, ref, type Ref } from 'vue';
+import Select from '@components/Select/Select.vue';
+import type { ISelectOption } from '@interfaces/componentsProp';
 
 const props = withDefaults(defineProps<IPaginatorProps>(), {
   total: 10,
   size: 'normal',
   theme: 'black',
   darknessTheme: '500',
+  itemsPerPage: 1,
 });
 
-const current = ref<number | undefined>(props.value);
+const current = defineModel({
+  default: 1,
+}) as Ref<number>;
 
+const perPage = ref(props.itemsPerPage);
+
+const itemsLength = computed(() => Math.floor(props.total / perPage.value));
+const selectOptions = computed(() =>
+  !props.itemsPerPageOptions ? [{ value: '1' }] : props.itemsPerPageOptions.map((item) => ({ value: String(item) })),
+) as unknown as ISelectOption[];
+const isStartDisabled = computed(() => current.value === 1);
+const isEndDisabled = computed(() => current.value === itemsLength.value);
 const items = computed(() => {
   if (!current.value) return [1, 2, 3, 4, 5];
-  const start = Math.floor(current.value / 5);
-  return [start + 1, start + 2, start + 3, start + 4, start + 5];
+  const center = current.value;
+  const length = itemsLength.value;
+  if (center - 2 < 2) return [1, 2, 3, 4, 5];
+  if (center + 2 > length) return [length - 5, length - 4, length - 3, length - 1, length];
+  return [center - 2, center - 1, center, center + 1, center + 2];
 });
 const iconSize = computed(() => {
   const size = props.size;
-  if (size === 'normal') return '20';
+  if (size === 'normal') return '10';
   if (size === 'large') return '25';
   if (size === 'huge') return '30';
   return '15';
 });
-const itemSize = computed(() => `${+iconSize.value * 1.5}px`);
+const fontSize = computed(() => {
+  const size = props.size;
+  if (size === 'normal') return '16px';
+  if (size === 'large') return '26px';
+  if (size === 'huge') return '32px';
+  return '36px';
+});
+const itemSize = computed(() => `${+iconSize.value * 2.5}px`);
 </script>
 
 <template>
   <section class="container">
-    <PaginatorItem class="paginatorItem">
-      <ArrowDoubleLeftShortIcon :size="iconSize" />
+    <PaginatorItem @click="current = 1" :disable="isStartDisabled" class="paginatorItem">
+      <ArrowDoubleLeftShortIcon :color="isStartDisabled ? '#aaa' : 'black'" :size="iconSize" />
     </PaginatorItem>
-    <PaginatorItem class="paginatorItem">
-      <ArrowLeftShortIcon :size="iconSize" />
+    <PaginatorItem @click="current--" :disable="isStartDisabled" class="paginatorItem">
+      <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : 'black'" :size="iconSize" />
     </PaginatorItem>
-    <PaginatorItem v-for="item of items" :key="item" class="paginatorItem">
-      {{ item }}
+    <PaginatorItem
+      v-for="item of items"
+      :key="item"
+      @click="current = item"
+      :active="current === item"
+      class="paginatorItem"
+    >
+      <span class="digital">{{ item }}</span>
     </PaginatorItem>
+    <PaginatorItem @click="isEndDisabled ? '' : current++" :disable="isEndDisabled" class="paginatorItem">
+      <ArrowRightShortIcon :color="isEndDisabled ? '#aaa' : 'black'" :size="iconSize" />
+    </PaginatorItem>
+    <PaginatorItem @click="isEndDisabled ? '' : (current = total)" :disable="isEndDisabled" class="paginatorItem">
+      <ArrowDoubleRightShortIcon :color="isEndDisabled ? '#aaa' : 'black'" :size="iconSize" />
+    </PaginatorItem>
+    <Select v-if="itemsPerPageOptions" v-model="perPage" :options="selectOptions"></Select>
   </section>
 </template>
 
@@ -51,5 +89,10 @@ const itemSize = computed(() => `${+iconSize.value * 1.5}px`);
 .paginatorItem {
   width: v-bind(itemSize);
   height: v-bind(itemSize);
+  user-select: none;
+}
+.digital {
+  font-size: v-bind(fontSize);
+  font-weight: bold;
 }
 </style>
diff --git a/src/components/Paginator/PaginatorItem.vue b/src/components/Paginator/PaginatorItem.vue
index 048735e..4dd8f26 100644
--- a/src/components/Paginator/PaginatorItem.vue
+++ b/src/components/Paginator/PaginatorItem.vue
@@ -1,8 +1,28 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineProps<{
+  active?: boolean;
+  disable?: boolean;
+}>();
+</script>
 
 <template>
-  <div class="item">
-    <div class="bg"></div>
+  <div
+    :class="[
+      'item',
+      {
+        disable,
+      },
+    ]"
+  >
+    <div
+      :class="[
+        'bg',
+        {
+          active,
+          disableBg: disable,
+        },
+      ]"
+    ></div>
     <slot />
   </div>
 </template>
@@ -14,25 +34,41 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  line-height: 1.2;
 }
 .item:hover > .bg {
   opacity: 1;
 }
 .item:active > .bg {
   opacity: 1;
-  background-color: rgba(0, 0, 0, 0.2) !important;
+  background-color: rgba(0, 0, 0, 0.2);
 }
 .bg {
-  width: 100%;
-  height: 100%;
+  width: 120%;
+  height: 120%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 2;
+  padding: 10px;
+  z-index: -1;
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.1);
   opacity: 0;
-  transition: all 0.15s ease;
+  transition: all 0.2s ease;
+}
+.item > .active {
+  background-color: black !important;
+  opacity: 1;
+}
+.active + * {
+  color: white;
+}
+.disable {
+  cursor: auto;
+  pointer-events: none;
+}
+.disableBg {
+  background-color: white !important;
 }
 </style>
diff --git a/src/icons/Mono/ArrowDoubleLeftShortIcon.vue b/src/icons/Mono/ArrowDoubleLeftShortIcon.vue
index a4dc9ed..c9465e5 100644
--- a/src/icons/Mono/ArrowDoubleLeftShortIcon.vue
+++ b/src/icons/Mono/ArrowDoubleLeftShortIcon.vue
@@ -39,7 +39,7 @@ defineProps<Props>();
     <line
       x1="335"
       y1="-100"
-      x2="110"
+      x2="130"
       y2="100"
       transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
       fill="none"
@@ -48,7 +48,7 @@ defineProps<Props>();
       stroke-linecap="round"
     />
     <line
-      x1="110"
+      x1="130"
       y1="100"
       x2="335"
       y2="300"
diff --git a/src/icons/Mono/ArrowDoubleRightShortIcon.vue b/src/icons/Mono/ArrowDoubleRightShortIcon.vue
new file mode 100644
index 0000000..7a563bb
--- /dev/null
+++ b/src/icons/Mono/ArrowDoubleRightShortIcon.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 532.153 532.153"
+    xml:space="preserve"
+  >
+    <line
+      x1="180"
+      y1="-100"
+      x2="385"
+      y2="100"
+      transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+      fill="none"
+      :stroke="color ?? '#000000'"
+      stroke-width="50"
+      stroke-linecap="round"
+    />
+    <line
+      x1="385"
+      y1="100"
+      x2="180"
+      y2="300"
+      transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+      fill="none"
+      :stroke="color ?? '#000000'"
+      stroke-width="50"
+      stroke-linecap="round"
+    />
+    <line
+      x1="0"
+      y1="-100"
+      x2="205"
+      y2="100"
+      transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+      fill="none"
+      :stroke="color ?? '#000000'"
+      stroke-width="50"
+      stroke-linecap="round"
+    />
+    <line
+      x1="205"
+      y1="100"
+      x2="0"
+      y2="300"
+      transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+      fill="none"
+      :stroke="color ?? '#000000'"
+      stroke-width="50"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/icons/Mono/ArrowRightShortIcon.vue b/src/icons/Mono/ArrowRightShortIcon.vue
new file mode 100644
index 0000000..7ac6fcd
--- /dev/null
+++ b/src/icons/Mono/ArrowRightShortIcon.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 532.153 532.153"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <line
+      x1="180"
+      y1="-100"
+      x2="385"
+      y2="100"
+      transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+      fill="none"
+      :stroke="color ?? '#000000'"
+      stroke-width="50"
+      stroke-linecap="round"
+    />
+    <line
+      x1="385"
+      y1="100"
+      x2="180"
+      y2="300"
+      transform="matrix(1.066014 0 0 1.167066 83.13335 150)"
+      fill="none"
+      :stroke="color ?? '#000000'"
+      stroke-width="50"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
-- 
GitLab


From e970646229160859ce7e4b1adc5d4743b126a784 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Tue, 21 Jan 2025 17:00:16 +0500
Subject: [PATCH 13/19] refactor: 'Select'

---
 src/components/Select/Select.stories.ts |  1 +
 src/components/Select/Select.vue        | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/Select/Select.stories.ts b/src/components/Select/Select.stories.ts
index 01d4336..7d2cea1 100644
--- a/src/components/Select/Select.stories.ts
+++ b/src/components/Select/Select.stories.ts
@@ -18,6 +18,7 @@ const meta: Meta = {
     width: { control: 'text' },
     filtered: { control: 'boolean' },
     disabled: { control: 'boolean' },
+    noHighlight: { control: 'boolean' },
     placeholder: { control: 'text' },
     name: { control: 'text' },
     openIcon: { control: 'select', options: Object.keys(iconsSet) },
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index 45fdd28..2142812 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -49,6 +49,10 @@ const pickOption = (value: string) => {
 };
 const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string | undefined, defaultColor: string) =>
   color ? convertThemeToColor(color, darknessColor ?? '500') : defaultColor;
+
+document.querySelector('body').addEventListener('pointerup', (e: MouseEvent) => {
+  if (isOpen.value && e.button === 0) isOpen.value = false;
+});
 </script>
 
 <template>
@@ -59,9 +63,17 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string |
         {{ option.label ?? option.value }}
       </option>
     </select>
-    <div class="list" :style="`background-color: ${backgroundColor}`">
+    <div
+      :class="[
+        'list',
+        {
+          noHighlight,
+        },
+      ]"
+      :style="`background-color: ${backgroundColor}`"
+    >
       <button
-        @click.prevent="!disabled ? (isOpen = !isOpen) : ''"
+        @click="!disabled ? (isOpen = !isOpen) : ''"
         :class="[
           'button',
           {
@@ -257,4 +269,7 @@ const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string |
   background-color: #e1e7f1 !important;
   border-radius: 4px;
 }
+.noHighlight * {
+  user-select: none;
+}
 </style>
-- 
GitLab


From 301c7a425db4cbc71a2a0ba6780d24cac856151b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Tue, 21 Jan 2025 18:06:20 +0500
Subject: [PATCH 14/19] fix: 'Select'

---
 src/components/Select/Select.stories.ts | 26 ++-------------------
 src/components/Select/Select.vue        | 30 +++++++++++++------------
 2 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/src/components/Select/Select.stories.ts b/src/components/Select/Select.stories.ts
index 7d2cea1..c12c0e8 100644
--- a/src/components/Select/Select.stories.ts
+++ b/src/components/Select/Select.stories.ts
@@ -19,12 +19,12 @@ const meta: Meta = {
     filtered: { control: 'boolean' },
     disabled: { control: 'boolean' },
     noHighlight: { control: 'boolean' },
+    fontSize: { control: 'text' },
     placeholder: { control: 'text' },
     name: { control: 'text' },
     openIcon: { control: 'select', options: Object.keys(iconsSet) },
     size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
     darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
-    darknessBackground: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
     darknessOpenIcon: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
     theme: {
       control: 'select',
@@ -46,26 +46,6 @@ const meta: Meta = {
         'black',
       ],
     },
-    background: {
-      control: 'select',
-      options: [
-        'white',
-        'blue',
-        'sky',
-        'cyan',
-        'teal',
-        'green',
-        'yellow',
-        'orange',
-        'pink',
-        'fuchsia',
-        'purple',
-        'indigo',
-        'rose',
-        'red',
-        'black',
-      ],
-    },
     openIconColor: {
       control: 'select',
       options: [
@@ -165,9 +145,7 @@ export const Full: Story = {
     size: 'normal',
     width: '250px',
     theme: 'sky',
-    background: 'sky',
-    darknessTheme: '700',
-    darknessBackground: '200',
+    darknessTheme: '200',
     openIconColor: 'sky',
     filtered: true,
   },
diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index 2142812..645e64c 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ISelectProps } from '@interfaces/componentsProps';
 import { computed, ref } from 'vue';
-import { convertThemeToColor } from '@helpers/common';
+import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
 import { iconsSet } from '@/common/constants/icons';
 import type { TThemeColor } from '@interfaces/common';
 import SelectItem from '@components/Select/SelectItem.vue';
@@ -11,8 +11,7 @@ import { calcFontSize, calcPadding, getOptionsGroups } from '@components/Select/
 const props = withDefaults(defineProps<ISelectProps>(), {
   size: 'normal',
   width: '200px',
-  theme: 'black',
-  darknessTheme: '700',
+  theme: 'white',
   darknessBackground: '200',
   darknessOpenIcon: '700',
   name: 'select',
@@ -32,15 +31,18 @@ const optionsNoGroup = computed(() =>
   ),
 );
 const selectedOption = computed(() => props.options.find((option) => option.value === selected.value));
-const fontSize = computed(() => calcFontSize(props.size));
+const fontSize = computed(() => props.fontSize ?? calcFontSize(props.size));
 const fontSizeNumber = computed(() => fontSize.value.slice(0, -2));
 const padding = computed(() => calcPadding(props.size));
-const textColor = computed(() => (props.disabled ? '#62708c' : convertThemeToColor(props.theme, props.darknessTheme)));
+const textColor = computed(() =>
+  props.disabled ? '#62708c' : convertThemeToTextColor(props.theme, props.darknessTheme ?? '700'),
+);
 const backgroundColor = computed(() =>
-  convertThemeToColor(
-    props.background ?? (props.theme === 'white' ? 'black' : props.theme === 'black' ? 'white' : props.theme),
-    (!props.background && props.theme === 'black') || props.background === 'white' ? '500' : props.darknessBackground,
-  ),
+  // convertThemeToColor(
+  //   props.background ?? (props.theme === 'white' ? 'black' : props.theme === 'black' ? 'white' : props.theme),
+  //   (!props.background && props.theme === 'black') || props.background === 'white' ? '500' : props.darknessBackground,
+  // ),
+  convertThemeToColor(props.theme, props.theme === 'white' && !props.darknessTheme ? '500' : props.darknessTheme),
 );
 
 const pickOption = (value: string) => {
@@ -73,7 +75,7 @@ document.querySelector('body').addEventListener('pointerup', (e: MouseEvent) =>
       :style="`background-color: ${backgroundColor}`"
     >
       <button
-        @click="!disabled ? (isOpen = !isOpen) : ''"
+        @pointerup.stop="!disabled ? (isOpen = !isOpen) : ''"
         :class="[
           'button',
           {
@@ -115,13 +117,13 @@ document.querySelector('body').addEventListener('pointerup', (e: MouseEvent) =>
         ]"
       >
         <div style="overflow: hidden">
-          <div class="flex filter" v-if="filtered">
+          <div class="flex filter" v-if="filtered" @click="isOpen = true">
             <input v-model="filter" type="text" /><SearchIcon :size="fontSizeNumber" color="#62708c" />
           </div>
           <div v-for="group of optionsGroups" :key="group.name" class="group">
             <h3
               class="flexNoHover groupHeader"
-              :style="`color: ${calcOptionColor(group.nameColor, darknessTheme, textColor)};
+              :style="`color: ${calcOptionColor(group.nameColor, darknessTheme ?? '700', textColor)};
               background-color: ${calcOptionColor(group.background, group.background === 'white' ? '500' : '200', backgroundColor)};
               font-size: calc(${fontSize} * 0.8); padding: calc(${padding} * 0.8)`"
             >
@@ -129,13 +131,13 @@ document.querySelector('body').addEventListener('pointerup', (e: MouseEvent) =>
                 v-if="group?.iconLeft"
                 :is="iconsSet[group?.iconLeft]"
                 :size="fontSizeNumber"
-                :color="calcOptionColor(group?.iconLeftColor ?? group.nameColor, darknessTheme, textColor)"
+                :color="calcOptionColor(group?.iconLeftColor ?? group.nameColor, darknessTheme ?? '700', textColor)"
               />{{ group.name }}
               <component
                 v-if="group?.iconRight"
                 :is="iconsSet[group?.iconRight]"
                 :size="fontSizeNumber"
-                :color="calcOptionColor(group?.iconRightColor ?? group.nameColor, darknessTheme, textColor)"
+                :color="calcOptionColor(group?.iconRightColor ?? group.nameColor, darknessTheme ?? '700', textColor)"
               />
             </h3>
             <SelectItem
-- 
GitLab


From 080c686a7aabf85acdf25d5015fd8478dcc2392f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Tue, 21 Jan 2025 18:06:41 +0500
Subject: [PATCH 15/19] feat: 'Paginator' in process

---
 src/common/interfaces/componentsProps.ts      |  5 +-
 src/components/Paginator/Paginator.stories.ts |  4 +-
 src/components/Paginator/Paginator.vue        | 77 +++++++++++++------
 src/components/Paginator/PaginatorItem.vue    | 20 ++++-
 4 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 843197d..689ac68 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -57,7 +57,6 @@ export interface ITIProps {
 }
 
 export interface IPaginatorProps {
-  value?: number;
   total?: number;
   itemsPerPage?: number;
   itemsPerPageOptions?: number[];
@@ -163,16 +162,16 @@ export interface ISelectProps {
   placeholder?: string;
   openIcon?: TIcon;
   size?: TSize;
+  fontSize?: string;
   name?: string;
   theme?: TThemeColor;
-  background?: TThemeColor;
   placeholderColor?: TThemeColor;
   openIconColor?: TThemeColor;
   darknessTheme?: TDarkness;
-  darknessBackground?: TDarkness;
   darknessOpenIcon?: TDarkness;
   filtered?: boolean;
   disabled?: boolean;
+  noHighlight?: boolean;
 }
 
 export interface ISBProps {
diff --git a/src/components/Paginator/Paginator.stories.ts b/src/components/Paginator/Paginator.stories.ts
index e4ff882..159dbde 100644
--- a/src/components/Paginator/Paginator.stories.ts
+++ b/src/components/Paginator/Paginator.stories.ts
@@ -14,7 +14,6 @@ const meta: Meta = {
     },
   },
   argTypes: {
-    value: { control: 'number' },
     total: { control: 'number' },
     itemsPerPage: { control: 'number' },
     itemsPerPageOptions: { control: 'object' },
@@ -56,5 +55,8 @@ export const Simple: Story = {
 export const Full: Story = {
   args: {
     itemsPerPageOptions: ['10', '20', '30'],
+    total: 50,
+    size: 'large',
+    theme: 'black',
   },
 };
diff --git a/src/components/Paginator/Paginator.vue b/src/components/Paginator/Paginator.vue
index 68ad21b..1080535 100644
--- a/src/components/Paginator/Paginator.vue
+++ b/src/components/Paginator/Paginator.vue
@@ -5,14 +5,15 @@ import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
 import ArrowRightShortIcon from '@icons/Mono/ArrowRightShortIcon.vue';
 import type { IPaginatorProps } from '@interfaces/componentsProps';
 import PaginatorItem from '@components/Paginator/PaginatorItem.vue';
-import { computed, ref, type Ref } from 'vue';
+import { computed, ref, type Ref, watch } from 'vue';
 import Select from '@components/Select/Select.vue';
 import type { ISelectOption } from '@interfaces/componentsProp';
+import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
 
 const props = withDefaults(defineProps<IPaginatorProps>(), {
   total: 10,
   size: 'normal',
-  theme: 'black',
+  theme: 'white',
   darknessTheme: '500',
   itemsPerPage: 1,
 });
@@ -21,46 +22,56 @@ const current = defineModel({
   default: 1,
 }) as Ref<number>;
 
-const perPage = ref(props.itemsPerPage);
+const perPage = ref(props.itemsPerPageOptions?.[0] ?? props.itemsPerPage);
 
-const itemsLength = computed(() => Math.floor(props.total / perPage.value));
+const itemsLength = computed(() => Math.ceil(props.total / perPage.value));
+const initArray = computed(() => Array.from({ length: itemsLength.value }, (_, i) => i + 1));
 const selectOptions = computed(() =>
   !props.itemsPerPageOptions ? [{ value: '1' }] : props.itemsPerPageOptions.map((item) => ({ value: String(item) })),
 ) as unknown as ISelectOption[];
 const isStartDisabled = computed(() => current.value === 1);
 const isEndDisabled = computed(() => current.value === itemsLength.value);
 const items = computed(() => {
-  if (!current.value) return [1, 2, 3, 4, 5];
-  const center = current.value;
   const length = itemsLength.value;
-  if (center - 2 < 2) return [1, 2, 3, 4, 5];
-  if (center + 2 > length) return [length - 5, length - 4, length - 3, length - 1, length];
-  return [center - 2, center - 1, center, center + 1, center + 2];
+  const itemsPerView = Math.min(length, 5);
+  const cur = current.value;
+  if (cur - 2 < 2) return initArray.value.slice(0, itemsPerView + 1);
+  if (cur + 2 > length) return initArray.value.slice(-itemsPerView);
+  if (itemsPerView === 5) return [cur - 2, cur - 1, cur, cur + 1, cur + 2];
+  return initArray.value;
 });
 const iconSize = computed(() => {
   const size = props.size;
   if (size === 'normal') return '10';
-  if (size === 'large') return '25';
-  if (size === 'huge') return '30';
-  return '15';
+  if (size === 'large') return '15';
+  if (size === 'huge') return '18';
+  return '7';
 });
 const fontSize = computed(() => {
+  if (props.fontSize) return props.fontSize;
   const size = props.size;
   if (size === 'normal') return '16px';
   if (size === 'large') return '26px';
   if (size === 'huge') return '32px';
-  return '36px';
+  return '12px';
 });
 const itemSize = computed(() => `${+iconSize.value * 2.5}px`);
+const color = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const textColor = computed(() => convertThemeToTextColor(props.theme, props.darknessTheme));
+
+watch(perPage, (cur, prev) => {
+  if (cur > prev) current.value = Math.ceil((current.value * prev) / cur);
+  else current.value = Math.ceil((prev * (current.value - 1) + +cur) / cur);
+});
 </script>
 
 <template>
   <section class="container">
-    <PaginatorItem @click="current = 1" :disable="isStartDisabled" class="paginatorItem">
-      <ArrowDoubleLeftShortIcon :color="isStartDisabled ? '#aaa' : 'black'" :size="iconSize" />
+    <PaginatorItem @click="current = 1" :color="color" :disable="isStartDisabled" class="paginatorItem">
+      <ArrowDoubleLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
     </PaginatorItem>
-    <PaginatorItem @click="current--" :disable="isStartDisabled" class="paginatorItem">
-      <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : 'black'" :size="iconSize" />
+    <PaginatorItem @click="current--" :color="color" :disable="isStartDisabled" class="paginatorItem">
+      <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
     </PaginatorItem>
     <PaginatorItem
       v-for="item of items"
@@ -71,20 +82,40 @@ const itemSize = computed(() => `${+iconSize.value * 2.5}px`);
     >
       <span class="digital">{{ item }}</span>
     </PaginatorItem>
-    <PaginatorItem @click="isEndDisabled ? '' : current++" :disable="isEndDisabled" class="paginatorItem">
-      <ArrowRightShortIcon :color="isEndDisabled ? '#aaa' : 'black'" :size="iconSize" />
+    <PaginatorItem
+      @click="isEndDisabled ? '' : current++"
+      :color="color"
+      :disable="isEndDisabled"
+      class="paginatorItem"
+    >
+      <ArrowRightShortIcon :color="isEndDisabled ? '#aaa' : textColor" :size="iconSize" />
     </PaginatorItem>
-    <PaginatorItem @click="isEndDisabled ? '' : (current = total)" :disable="isEndDisabled" class="paginatorItem">
-      <ArrowDoubleRightShortIcon :color="isEndDisabled ? '#aaa' : 'black'" :size="iconSize" />
+    <PaginatorItem
+      @click="isEndDisabled ? '' : (current = itemsLength)"
+      :color="color"
+      :disable="isEndDisabled"
+      class="paginatorItem"
+    >
+      <ArrowDoubleRightShortIcon :color="isEndDisabled ? '#aaa' : textColor" :size="iconSize" />
     </PaginatorItem>
-    <Select v-if="itemsPerPageOptions" v-model="perPage" :options="selectOptions"></Select>
+    <Select
+      v-if="itemsPerPageOptions"
+      v-model="perPage"
+      :theme="theme"
+      :size="size"
+      width="max-width"
+      no-highlight
+      :font-size="fontSize"
+      :options="selectOptions"
+    ></Select>
   </section>
 </template>
 
 <style scoped>
 .container {
   display: flex;
-  gap: 5px;
+  gap: calc(v-bind(fontSize) * 0.25);
+  align-items: center;
 }
 .paginatorItem {
   width: v-bind(itemSize);
diff --git a/src/components/Paginator/PaginatorItem.vue b/src/components/Paginator/PaginatorItem.vue
index 4dd8f26..08e4b83 100644
--- a/src/components/Paginator/PaginatorItem.vue
+++ b/src/components/Paginator/PaginatorItem.vue
@@ -2,6 +2,7 @@
 defineProps<{
   active?: boolean;
   disable?: boolean;
+  color?: string;
 }>();
 </script>
 
@@ -36,12 +37,23 @@ defineProps<{
   cursor: pointer;
   line-height: 1.2;
 }
+.item::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background-color: v-bind(color);
+}
 .item:hover > .bg {
   opacity: 1;
 }
 .item:active > .bg {
-  opacity: 1;
-  background-color: rgba(0, 0, 0, 0.2);
+  opacity: 0.2;
+  background-color: black;
 }
 .bg {
   width: 120%;
@@ -51,9 +63,9 @@ defineProps<{
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 10px;
-  z-index: -1;
+  z-index: -2;
   border-radius: 50%;
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: transparent;
   opacity: 0;
   transition: all 0.2s ease;
 }
-- 
GitLab


From a090a68e54ddbbcffd87fa1e8c442ae873f12ea5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Wed, 22 Jan 2025 08:04:38 +0500
Subject: [PATCH 16/19] fix: 'Table'

---
 src/components/Table/Table.stories.ts | 1 +
 src/components/Table/Table.vue        | 2 +-
 src/components/Table/helpers.ts       | 3 ++-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Table/Table.stories.ts b/src/components/Table/Table.stories.ts
index c448481..734bada 100644
--- a/src/components/Table/Table.stories.ts
+++ b/src/components/Table/Table.stories.ts
@@ -14,6 +14,7 @@ const meta: Meta = {
     },
   },
   argTypes: {
+    data: { control: 'object' },
     columns: { control: 'text' },
     fontSize: { control: 'text' },
     gap: { control: 'text' },
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index 4ff2397..91c48bb 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -45,7 +45,7 @@ const sortState = computed<string[]>(() => {
 });
 const rows = computed<ITableItem[][]>(() =>
   calcRows(
-    data.value!,
+    data.value ?? props.data,
     sortStateActive.value,
     props.multipleSort,
     columnToFilter.value,
diff --git a/src/components/Table/helpers.ts b/src/components/Table/helpers.ts
index 9b0d9eb..172f864 100644
--- a/src/components/Table/helpers.ts
+++ b/src/components/Table/helpers.ts
@@ -2,7 +2,7 @@ import type { ITableColumn, ITableItem, TTableColumnType } from '@interfaces/com
 import type { TSize } from '@interfaces/common';
 
 export const calcRows = (
-  initRows: ITableItem[][],
+  initRows: ITableItem[][] | undefined,
   sortStateActive: [number, string] | [],
   multipleSort: boolean,
   columnToFilter: number,
@@ -10,6 +10,7 @@ export const calcRows = (
   filterValue: string,
   isRegisterSensitive: boolean,
 ) => {
+  if (!initRows?.length) return [];
   // ['up', 'down', ...]
   let rows = [...initRows];
 
-- 
GitLab


From 891a427820ec621093920fe7304b3cfc1453c899 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Wed, 22 Jan 2025 08:04:47 +0500
Subject: [PATCH 17/19] feat: component 'Paginator'

---
 src/common/interfaces/componentsProps.ts   |  2 ++
 src/components/Paginator/Paginator.vue     | 21 +++++++++++++++++++--
 src/components/Paginator/PaginatorItem.vue | 20 ++++++++++----------
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 689ac68..48ee7d8 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -18,10 +18,12 @@ import type {
   ISelectOption,
   ISliderOptions,
   ITableColumn,
+  ITableItem,
   ITreeItem,
 } from '@interfaces/componentsProp';
 
 export interface ITableProps {
+  data?: ITableItem[][];
   columns: ITableColumn[];
   multipleSort?: boolean;
   gap?: string;
diff --git a/src/components/Paginator/Paginator.vue b/src/components/Paginator/Paginator.vue
index 1080535..058a818 100644
--- a/src/components/Paginator/Paginator.vue
+++ b/src/components/Paginator/Paginator.vue
@@ -67,16 +67,30 @@ watch(perPage, (cur, prev) => {
 
 <template>
   <section class="container">
-    <PaginatorItem @click="current = 1" :color="color" :disable="isStartDisabled" class="paginatorItem">
+    <PaginatorItem
+      @click="current = 1"
+      :textColor="textColor"
+      :color="color"
+      :disable="isStartDisabled"
+      class="paginatorItem"
+    >
       <ArrowDoubleLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
     </PaginatorItem>
-    <PaginatorItem @click="current--" :color="color" :disable="isStartDisabled" class="paginatorItem">
+    <PaginatorItem
+      @click="current--"
+      :textColor="textColor"
+      :color="color"
+      :disable="isStartDisabled"
+      class="paginatorItem"
+    >
       <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
     </PaginatorItem>
     <PaginatorItem
       v-for="item of items"
       :key="item"
       @click="current = item"
+      :textColor="textColor"
+      :color="color"
       :active="current === item"
       class="paginatorItem"
     >
@@ -84,6 +98,7 @@ watch(perPage, (cur, prev) => {
     </PaginatorItem>
     <PaginatorItem
       @click="isEndDisabled ? '' : current++"
+      :textColor="textColor"
       :color="color"
       :disable="isEndDisabled"
       class="paginatorItem"
@@ -92,6 +107,7 @@ watch(perPage, (cur, prev) => {
     </PaginatorItem>
     <PaginatorItem
       @click="isEndDisabled ? '' : (current = itemsLength)"
+      :textColor="textColor"
       :color="color"
       :disable="isEndDisabled"
       class="paginatorItem"
@@ -102,6 +118,7 @@ watch(perPage, (cur, prev) => {
       v-if="itemsPerPageOptions"
       v-model="perPage"
       :theme="theme"
+      :darknessTheme="darknessTheme"
       :size="size"
       width="max-width"
       no-highlight
diff --git a/src/components/Paginator/PaginatorItem.vue b/src/components/Paginator/PaginatorItem.vue
index 08e4b83..1b8fe0b 100644
--- a/src/components/Paginator/PaginatorItem.vue
+++ b/src/components/Paginator/PaginatorItem.vue
@@ -2,7 +2,8 @@
 defineProps<{
   active?: boolean;
   disable?: boolean;
-  color?: string;
+  textColor: string;
+  color: string;
 }>();
 </script>
 
@@ -36,6 +37,7 @@ defineProps<{
   align-items: center;
   cursor: pointer;
   line-height: 1.2;
+  color: v-bind(textColor);
 }
 .item::before {
   content: '';
@@ -43,17 +45,15 @@ defineProps<{
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  top: 0;
-  left: 0;
   z-index: -1;
   background-color: v-bind(color);
 }
-.item:hover > .bg {
-  opacity: 1;
+.item:hover > .bg:not(.active) {
+  background-color: v-bind(textColor);
+  opacity: 0.1;
 }
-.item:active > .bg {
+.item:active > .bg:not(.active) {
   opacity: 0.2;
-  background-color: black;
 }
 .bg {
   width: 120%;
@@ -63,18 +63,18 @@ defineProps<{
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 10px;
-  z-index: -2;
+  z-index: -1;
   border-radius: 50%;
   background-color: transparent;
   opacity: 0;
   transition: all 0.2s ease;
 }
 .item > .active {
-  background-color: black !important;
+  background-color: v-bind(textColor) !important;
   opacity: 1;
 }
 .active + * {
-  color: white;
+  color: v-bind(color);
 }
 .disable {
   cursor: auto;
-- 
GitLab


From 3f9cec83e6e787aec5a73c8c9beef516b439c88d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Wed, 22 Jan 2025 08:05:48 +0500
Subject: [PATCH 18/19] fix: build

---
 src/components/Select/Select.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Select/Select.vue b/src/components/Select/Select.vue
index 645e64c..9ff0dbd 100644
--- a/src/components/Select/Select.vue
+++ b/src/components/Select/Select.vue
@@ -52,7 +52,7 @@ const pickOption = (value: string) => {
 const calcOptionColor = (color: TThemeColor | undefined, darknessColor: string | undefined, defaultColor: string) =>
   color ? convertThemeToColor(color, darknessColor ?? '500') : defaultColor;
 
-document.querySelector('body').addEventListener('pointerup', (e: MouseEvent) => {
+document.querySelector('body')!.addEventListener('pointerup', (e: MouseEvent) => {
   if (isOpen.value && e.button === 0) isOpen.value = false;
 });
 </script>
-- 
GitLab


From 1e2fd85b3d33f82425912e09a07c0eb46c18f135 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Wed, 22 Jan 2025 08:09:29 +0500
Subject: [PATCH 19/19] docs: README.md

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 26de19d..2a83208 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@
 - Popup;
 - Slider;
 
+- Paginator;
 - Drawer;
 - Modal;
 - Knob;
@@ -27,8 +28,8 @@
 
 ---
 ## Общая информация
-### Components count: 17
-### Bundle size: 291.7KB
+### Components count: 18
+### Bundle size: 296.4KB
 
 ---
 
-- 
GitLab