@velumweb/ui-kit 1.0.0

package/public/assets/svg-lib/sound-svgrepo-com.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" id="_24x24_On_Light_Sound" data-name="24x24/On Light/Sound" xmlns="http://www.w3.org/2000/svg">
+  <rect id="view-box" width="24" height="24" fill="none"/>
+  <path id="Shape" d="M5.12,15.573a7.786,7.786,0,0,1-1.507-1.59H2.751A2.754,2.754,0,0,1,0,11.232V6.269a2.754,2.754,0,0,1,2.751-2.75H3.6A7.288,7.288,0,0,1,5.053,1.931,8.67,8.67,0,0,1,10.75,0,.751.751,0,0,1,11.5.75v16a.751.751,0,0,1-.751.75A8.681,8.681,0,0,1,5.12,15.573ZM1.5,6.269v4.964a1.252,1.252,0,0,0,1.251,1.25H4.028a.752.752,0,0,1,.658.389A4,4,0,0,0,5,13.322a6.74,6.74,0,0,0,1.069,1.087A7.09,7.09,0,0,0,10,15.969V1.529A7,7,0,0,0,6.009,3.086,6.166,6.166,0,0,0,4.985,4.163,3.6,3.6,0,0,0,4.7,4.6a.748.748,0,0,1-.67.413H2.751A1.253,1.253,0,0,0,1.5,6.269ZM15,17.059A.751.751,0,0,1,15,16,10.249,10.249,0,0,0,15,1.5.75.75,0,1,1,16.059.442a11.749,11.749,0,0,1,0,16.617.751.751,0,0,1-1.061,0ZM13.17,14.23a.749.749,0,0,1,0-1.06,6.25,6.25,0,0,0,0-8.839A.75.75,0,1,1,14.23,3.27a7.75,7.75,0,0,1,0,10.96.749.749,0,0,1-1.06,0Z" transform="translate(2.25 3.25)" fill="#141124"/>
+</svg>

package/public/assets/svg-lib/spectacles-svgrepo-com.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" id="_24x24_On_Light_Spectacles" data-name="24x24/On Light/Spectacles" xmlns="http://www.w3.org/2000/svg">
+  <rect id="view-box" width="24" height="24" fill="none"/>
+  <path id="Shape" d="M10,13.75a1.25,1.25,0,1,0-2.5,0,3.75,3.75,0,0,1-7.5,0c0-.022,0-.044,0-.065s0-.02,0-.029V2.75A2.75,2.75,0,0,1,2.75,0h1a.75.75,0,0,1,0,1.5h-1A1.249,1.249,0,0,0,1.5,2.75v8a3.745,3.745,0,0,1,5.4.965,2.75,2.75,0,0,1,3.7,0,3.746,3.746,0,0,1,5.4-.964v-8A1.25,1.25,0,0,0,14.75,1.5h-1a.75.75,0,1,1,0-1.5h1A2.75,2.75,0,0,1,17.5,2.75V13.656c0,.01,0,.02,0,.029s0,.043,0,.065a3.75,3.75,0,0,1-7.5,0Zm1.5,0a2.25,2.25,0,1,0,2.25-2.25A2.253,2.253,0,0,0,11.5,13.75Zm-10,0A2.25,2.25,0,1,0,3.75,11.5,2.252,2.252,0,0,0,1.5,13.75Z" transform="translate(3.25 3.25)" fill="#141124"/>
+</svg>

package/public/assets/svg-lib/star-svgrepo-com.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" id="_24x24_On_Light_Star" data-name="24x24/On Light/Star" xmlns="http://www.w3.org/2000/svg">
+  <rect id="view-box" width="24" height="24" fill="none"/>
+  <path id="Shape" d="M15.791,19.5,10.262,16.6,4.732,19.5a.75.75,0,0,1-1.088-.79L4.7,12.557.228,8.2a.75.75,0,0,1,.415-1.28l6.182-.9L9.589.419a.75.75,0,0,1,1.345,0l2.764,5.6,6.182.9A.751.751,0,0,1,20.3,8.2l-4.473,4.36,1.056,6.157a.748.748,0,0,1-1.088.79Z" transform="translate(1.739 1.25)" fill="#141124"/>
+</svg>

package/public/assets/svg-lib/user-avatar-with-alert-svgrepo-com.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" id="_24x24_On_Light_User-Alert" data-name="24x24/On Light/User-Alert" xmlns="http://www.w3.org/2000/svg">
+  <rect id="view-box" width="24" height="24" fill="none"/>
+  <path id="Shape" d="M9.75,19.5A9.75,9.75,0,1,1,11.68.192,5.479,5.479,0,0,0,11,1.6,8.254,8.254,0,0,0,1.5,9.75a8.163,8.163,0,0,0,1.713,5.027A5.594,5.594,0,0,1,5.135,13.7c.141-.052.288-.1.475-.167l.443-.149c.855-.293,1.169-.481,1.244-.747l0-.009.005-.024a.771.771,0,0,0-.058-.519.907.907,0,0,0-.237-.271A4.359,4.359,0,0,1,5.5,8.417,4.29,4.29,0,0,1,9.75,4a4.1,4.1,0,0,1,1.072.143,5.505,5.505,0,0,0,.937,2.28A2.7,2.7,0,0,0,9.75,5.5,2.807,2.807,0,0,0,7,8.417a2.848,2.848,0,0,0,1,2.274,2.28,2.28,0,0,1,.571.695,2.208,2.208,0,0,1,.2,1.537,1.41,1.41,0,0,1-.045.171c-.244.9-.9,1.271-2.188,1.711l-.445.15c-.166.056-.3.1-.437.154a4.286,4.286,0,0,0-1.419.77,8.234,8.234,0,0,0,11.03,0,4.3,4.3,0,0,0-1.421-.751c-.112-.041-.229-.081-.377-.13l-.386-.13c-1.332-.45-2.015-.825-2.293-1.742a1.863,1.863,0,0,1-.055-.223,2.36,2.36,0,0,1,.138-1.4,2.122,2.122,0,0,1,.589-.795,2.815,2.815,0,0,0,1.042-2.3,3.018,3.018,0,0,0-.489-1.666A5.557,5.557,0,0,0,14,8.268q0,.074,0,.149a4.3,4.3,0,0,1-1.559,3.427.673.673,0,0,0-.194.255.92.92,0,0,0-.043.527c.006.031.01.046.013.055.08.26.431.461,1.342.769l.384.129c.147.05.279.095.408.141a5.6,5.6,0,0,1,1.935,1.058A8.169,8.169,0,0,0,18,9.75,8.308,8.308,0,0,0,17.9,8.5a5.478,5.478,0,0,0,1.4-.676A9.755,9.755,0,0,1,9.75,19.5ZM17.362,6.569h0a8.342,8.342,0,0,0-4.431-4.43,3.527,3.527,0,0,1,.782-1.3,9.774,9.774,0,0,1,4.946,4.945,3.525,3.525,0,0,1-1.3.781Z" transform="translate(2.25 2.25)" fill="#141124"/>
+  <path id="Shape-2" data-name="Shape" d="M3.5,7A3.5,3.5,0,1,1,7,3.5,3.5,3.5,0,0,1,3.5,7Z" transform="translate(15 2)" fill="#ff6359"/>
+</svg>

package/public/assets/svg-lib/user-banned-svgrepo-com.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" id="_24x24_On_Light_User" data-name="24x24/On Light/User" xmlns="http://www.w3.org/2000/svg">
+  <rect id="view-box" width="24" height="24" fill="none"/>
+  <path id="Shape" d="M0,9.75A9.75,9.75,0,1,1,9.75,19.5,9.761,9.761,0,0,1,0,9.75ZM9.75,18a8.218,8.218,0,0,0,5.515-2.119,4.328,4.328,0,0,0-1.421-.75c-.112-.04-.229-.081-.377-.13l-.386-.13c-1.4-.471-2.023-.851-2.293-1.742a1.876,1.876,0,0,1-.055-.223,2.369,2.369,0,0,1,.138-1.4,2.123,2.123,0,0,1,.589-.795,2.823,2.823,0,0,0,1.042-2.3A2.832,2.832,0,0,0,9.75,5.5,2.8,2.8,0,0,0,7,8.417a2.843,2.843,0,0,0,1,2.274,2.278,2.278,0,0,1,.571.695,2.224,2.224,0,0,1,.2,1.537,1.152,1.152,0,0,1-.045.17c-.237.877-.847,1.254-2.188,1.712l-.445.15c-.173.059-.308.106-.437.154a4.312,4.312,0,0,0-1.419.771A8.216,8.216,0,0,0,9.75,18ZM14,8.417a4.32,4.32,0,0,1-1.559,3.427.672.672,0,0,0-.193.255.928.928,0,0,0-.043.527c.006.031.01.046.013.055.077.253.408.454,1.342.769l.384.129c.157.053.284.1.408.141a5.645,5.645,0,0,1,1.935,1.058,8.25,8.25,0,1,0-13.074,0A5.672,5.672,0,0,1,5.135,13.7c.144-.053.291-.1.475-.167l.443-.149c.863-.3,1.17-.484,1.244-.747,0,.006,0-.005.007-.033a.769.769,0,0,0-.058-.519.9.9,0,0,0-.237-.271A4.346,4.346,0,0,1,5.5,8.417,4.3,4.3,0,0,1,9.75,4,4.332,4.332,0,0,1,14,8.417Z" transform="translate(2.25 2.25)" fill="#abadb7"/>
+  <path id="Shape-2" data-name="Shape" d="M2.626.657.006,21.551a.75.75,0,0,0,1.488.187L4.115.843A.75.75,0,0,0,2.626.657Z" transform="translate(2.458 5.527) rotate(-45)" fill="#141124"/>
+</svg>

package/public/assets/svg-lib/user-svgrepo-com.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" id="_24x24_On_Light_User" data-name="24x24/On Light/User" xmlns="http://www.w3.org/2000/svg">
+  <rect id="view-box" width="24" height="24" fill="none"/>
+  <path id="Shape" d="M0,9.75A9.75,9.75,0,1,1,9.75,19.5,9.761,9.761,0,0,1,0,9.75ZM9.75,18a8.218,8.218,0,0,0,5.515-2.119,4.328,4.328,0,0,0-1.421-.75c-.112-.04-.229-.081-.377-.13l-.386-.13c-1.4-.471-2.023-.851-2.293-1.742a1.876,1.876,0,0,1-.055-.223,2.369,2.369,0,0,1,.138-1.4,2.123,2.123,0,0,1,.589-.795,2.823,2.823,0,0,0,1.042-2.3A2.832,2.832,0,0,0,9.75,5.5,2.8,2.8,0,0,0,7,8.417a2.843,2.843,0,0,0,1,2.274,2.278,2.278,0,0,1,.571.695,2.224,2.224,0,0,1,.2,1.537,1.152,1.152,0,0,1-.045.17c-.237.877-.847,1.254-2.188,1.712l-.445.15c-.173.059-.308.106-.437.154a4.312,4.312,0,0,0-1.419.771A8.216,8.216,0,0,0,9.75,18ZM14,8.417a4.32,4.32,0,0,1-1.559,3.427.672.672,0,0,0-.193.255.928.928,0,0,0-.043.527c.006.031.01.046.013.055.077.253.408.454,1.342.769l.384.129c.157.053.284.1.408.141a5.645,5.645,0,0,1,1.935,1.058,8.25,8.25,0,1,0-13.074,0A5.672,5.672,0,0,1,5.135,13.7c.144-.053.291-.1.475-.167l.443-.149c.863-.3,1.17-.484,1.244-.747,0,.006,0-.005.007-.033a.769.769,0,0,0-.058-.519.9.9,0,0,0-.237-.271A4.346,4.346,0,0,1,5.5,8.417,4.3,4.3,0,0,1,9.75,4,4.332,4.332,0,0,1,14,8.417Z" transform="translate(2.25 2.25)" fill="#141124"/>
+</svg>

package/readme.md

@@ -0,0 +1,9 @@
+ui-kit (in progress)
+
+preview: https://uikit.velumweb.ru/
+
+- buttons
+- toggle
+- inputs
+- containers
+- modal window

package/src/components/Button/Button.stories.ts

@@ -0,0 +1,64 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Button } from './Button';
+
+const meta = {
+  title: 'Example Button',
+  component: Button,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => {
+      const script = document.createElement('script')
+      script.src = '/style_setter.js'
+      script.type = 'module'
+      document.head.appendChild(script)
+
+      return Story()
+    },
+  ],
+}
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const CustomButton: Story = {
+  args: {
+    text: 'Button Example',
+    type: 'primary',
+    size: 'medium',
+    corners: 'standard',
+    disabled: false,
+    cls: '',
+    onClick: () => console.log('CustomButton')
+  },
+};
+
+export const IconButton: Story = {
+  args: {
+    text: 'Exit',
+    type: 'secondary',
+    size: 'medium',
+    corners: 'standard',
+    disabled: false,
+    cls: '',
+    onClick: () => console.log('IconButton'),
+    iconPath: 'svg-lib/alert-square.svg',
+    labelAlign: 'bottom'
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    onClick: () => console.log('Icon'),
+    iconPath: 'svg-lib/checkmark-svgrepo-com.svg',
+    type: 'transparent',
+    size: 'large',
+    corners: 'round',
+    disabled: false,
+    cls: '',
+    staticIcon: true
+  },
+};
+

package/src/components/Button/Button.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Box } from "../Container";
+import './button.scss';
+
+/**
+ * Компонент кнопки
+ * - разные состояния
+ * - разные типы
+ * - разные размеры
+ * - разные углы
+ * - добавление иконки
+ */
+
+export interface ButtonProps {
+    /** Основная / Только текст / Вспомогательная */
+    type: 'primary' | 'transparent' | 'secondary';
+
+    /** Маленькая / Средняя / Большая */
+    size?: 'small' | 'medium' | 'large';
+
+    /** Углы прямые / Закругленные / Круглые */
+    corners?: 'square' | 'standard' | 'round';
+
+    /** Доступность кнопки */
+    disabled?: boolean,
+
+    /** Текст кнопки */
+    text?: string;
+
+    /** Событие при нажатии */
+    onClick?: (e?: MouseEvent) => void;
+
+    /** Дополнительные классы */
+    cls?: string;
+
+    /** Путь до иконки из assets */
+    iconPath?: string;
+
+    /** Расположение текста относительно иконки */
+    labelAlign?: 'right' | 'left' | 'bottom' | 'top';
+
+    /** Это просто информационная иконка */
+    staticIcon?: boolean;
+}
+
+/** Элемент кнопки */
+export const Button = ({
+    type = 'primary',
+    size = 'medium',
+    corners = 'standard',
+    disabled = false,
+    staticIcon = false,
+    cls = '',
+    text = '',
+    iconPath = '',
+    labelAlign = '',
+    onClick,
+    ...props
+}: ButtonProps) => {
+    const isIconCls = iconPath != '' && text === '' ? 'kit-btn--icon' : '';
+
+    let Content;
+    const IconContainer = () => (iconPath ? <div
+        className='kit-btn--svg'
+        style={{
+            maskImage: `url(assets/${iconPath})`,
+            WebkitMaskImage: `url(assets/${iconPath})`
+        }}
+    /> : null);
+
+    /** текст + иконка */
+    switch(labelAlign) {
+        case 'right': Content = () => (<Box direction='row'><IconContainer />{text as string}</Box>); break;
+        case 'left': Content = () => (<Box direction='row'>{text as string}<IconContainer /></Box>); break;
+        case 'top': Content = () => (<Box direction='column'>{text as string}<IconContainer /></Box>); break;
+        case 'bottom': Content = () => (<Box direction='column'><IconContainer />{text as string}</Box>); break;
+        default: Content = () => (<Box direction='row'>{ isIconCls ? <IconContainer /> : text as string}</Box>); break;
+    }
+
+    return (
+        <button
+            type="button"
+            onClick={disabled || !onClick ? null : onClick}
+            className={[
+                'kit-btn',
+                `kit-btn--${size}`,
+                `kit-btn--${corners}`,
+                `kit-btn--${type}`,
+                disabled ? 'kit-btn--disabled' : '',
+                staticIcon ? 'kit-icon' : '',
+                isIconCls,
+                cls
+            ].join(' ')}
+            {...props}
+        >
+            <Content />
+        </button>
+    );
+};

package/src/components/Button/button.scss

@@ -0,0 +1,147 @@
+@import '../../main.scss';
+
+.kit-btn {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  font-weight: 700;
+  line-height: 1;
+  font-family: var(--font-family);
+  transition: background-color 0.3s ease;
+  padding: 8px 16px;
+  & > .kit-box {
+    width: fit-content;
+  }
+  &:active {
+    transform: translateY(0.5px);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) inset;
+  }
+  &.kit-icon {
+    pointer-events: none;
+  }
+  &.kit-btn--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
+// type
+.kit-btn--primary {
+  background-color: var(--primary-btn-color);
+  color: var(--secondary-btn-color);
+  & > div > .kit-btn--svg {
+    background-color: var(--secondary-btn-color);
+  }
+  &:hover {
+    background-color: var(--hover-btn-color);
+  }
+}
+.kit-btn--secondary {
+  border: 1px var(--primary-btn-color) solid;
+  background-color: transparent;
+  color: var(--primary-btn-color);
+  & > div > .kit-btn--svg {
+    background-color: var(--primary-btn-color);
+  }
+  &:hover {
+    background-color: var(--hover-btn-color);
+    color: var(--secondary-btn-color);
+    border: 1px var(--hover-btn-color) solid;
+    & > div > .kit-btn--svg {
+      background-color: var(--secondary-btn-color);
+    }
+  }
+}
+.kit-btn--transparent {
+  border: none;
+  background-color: transparent;
+  color: var(--primary-btn-color);
+  & > div > .kit-btn--svg {
+    background-color: var(--primary-btn-color);
+  }
+  &:hover {
+    color: var(--hover-btn-color);
+    & > div > .kit-btn--svg {
+      background-color: var(--hover-btn-color);
+    }
+  }
+  &:active {
+    box-shadow: unset;
+  }
+}
+
+// size
+.kit-btn--small {
+  font-size: 12px;
+  & > div > .kit-btn--svg {
+    width: 20px;
+    height: 20px;
+  }
+  &:not(.kit-btn--icon) > .kit-container--h > .kit-btn--svg {
+    width: 16px;
+    height: 16px;
+  }
+  &:not(.kit-btn--icon) > .kit-container--v > .kit-btn--svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+.kit-btn--medium {
+  font-size: 14px;
+  & > div > .kit-btn--svg {
+    width: 24px;
+    height: 24px;
+  }
+  &:not(.kit-btn--icon) > .kit-container--h > .kit-btn--svg {
+    width: 20px;
+    height: 20px;
+  }
+  &:not(.kit-btn--icon) > .kit-container--v > .kit-btn--svg {
+    width: 28px;
+    height: 28px;
+  }
+}
+.kit-btn--large {
+  font-size: 16px;
+  & > div > .kit-btn--svg {
+    width: 32px;
+    height: 32px;
+  }
+  &:not(.kit-btn--icon) > .kit-container--h > .kit-btn--svg {
+    width: 24px;
+    height: 24px;
+  }
+  &:not(.kit-btn--icon) > .kit-container--v > .kit-btn--svg {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+// border-radius
+.kit-btn--standard {
+  border-radius: var(--corners-standard);
+}
+.kit-btn--round {
+  border-radius: var(--corners-round);
+}
+.kit-btn--square {
+  border-radius: var(--corners-square);
+}
+
+// icons
+.kit-btn--icon {
+  padding: 8px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.kit-btn--svg {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

package/src/components/Container/Box.tsx

@@ -0,0 +1,83 @@
+import React, { ReactNode } from 'react';
+import './box.scss';
+
+/**
+ * Компоненты контейнеры
+ * - разные направления
+ * - семантические обертки
+ * - позиционирование
+ */
+
+
+export interface BoxProps {
+    /** Направление строка или столбец */
+    direction?: 'row' | 'column';
+
+    /** Горизонтальное выравнивание **/
+    align?: 'top' | 'center' | 'bottom';
+
+    /** Горизонтальное распределение **/
+    justify?: 'start' | 'end' | 'center' | 'space';
+
+    /** Перенос блоков внутри контейнера **/
+    wrapContent?: boolean;
+
+    /** Дополнительные классы */
+    cls?: string;
+
+    /** Расстояние между дочерними элементами */
+    gap?: number;
+
+    /** Внешние отступы */
+    margin?: number[];
+
+    /** Внутренние отступы */
+    padding?: number[];
+
+    /** Родительский тег для семантики */
+    parent?: 'header' | 'footer' | 'article' | 'section' | 'main' | 'div';
+
+    /** Содержимое контейнера **/
+    children: ReactNode | string;
+
+    /** Маска загрузки **/
+    mask?: boolean
+}
+
+/** Элемент контейнера */
+export const Box = ({
+    direction = 'row',
+    align = 'center',
+    justify = 'center',
+    wrapContent = false,
+    cls = '',
+    gap = 8,
+    margin = [0],
+    padding = [0],
+    parent = 'div',
+    mask = false,           // TODO loader
+    children,
+    ...props
+}: BoxProps) => {
+    const Parent = parent;
+    const margins = margin?.map(m => m + 'px').join(' ');
+    const paddings = padding?.map(m => m + 'px').join(' ');
+
+    return(
+        <Parent
+            className={[
+                'kit-box',
+                `kit-box--${direction}`,
+                `kit-box--align-${align}`,
+                `kit-box--justify-${justify}`,
+                wrapContent && 'kit-box--wrap',
+                cls
+            ].join(' ')}
+            style={{ gap: `${gap}px`, margin: `${margins}`, padding: `${paddings}` }}
+            {...props}
+        >
+            {children}
+        </Parent>
+    )
+
+};

package/src/components/Container/box.scss

@@ -0,0 +1,41 @@
+.kit-box {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+
+.kit-box--row {
+  flex-direction: row;
+}
+.kit-box--column {
+  flex-direction: column;
+}
+
+.kit-box--align-top {
+  align-items: flex-start;
+}
+.kit-box--align-center {
+  align-items: center;
+}
+.kit-box--align-bottom {
+  align-items: flex-end;
+}
+
+.kit-box--justify-start {
+  justify-content: flex-start;
+}
+.kit-box--justify-end {
+  justify-content: flex-end;
+}
+.kit-box--justify-center {
+  justify-content: center;
+}
+.kit-box--justify-space {
+  justify-content: space-between;
+}
+
+.kit-box--wrap {
+  flex-wrap: wrap;
+}

package/src/components/Container/index.ts

@@ -0,0 +1 @@
+export * from "./Box";

package/src/components/Input/Input.stories.ts

@@ -0,0 +1,49 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Input } from './Input';
+
+const meta = {
+  title: 'Example Input',
+  component: Input,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => {
+      const script = document.createElement('script')
+      script.src = '/style_setter.js'
+      script.type = 'module'
+      document.head.appendChild(script)
+
+      return Story()
+    },
+  ],
+}
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TextField: Story = {
+  args: {
+    label: 'Год вашего рождения',
+    value: '2026',
+    type: 'text',
+    bottomText: 'Пишите только цифры',
+    placeholder: 'Год в формате YYYY',
+    errorText: 'Допустимы только цифры',
+    mask: /^[0-9]+$/,
+    width: 300
+  },
+};
+
+export const Search: Story = {
+  args: {
+    value: '',
+    type: 'text',
+    placeholder: 'Найти по имени или году',
+    width: 250,
+    live: true,
+    isSearch: true
+  },
+};
+