nntc-ui 0.2.6 → 0.2.7

package/src/components/common/FieldShell/fieldShell.module.css

@@ -1,456 +0,0 @@
-/*
- * Общая геометрия и состояния полей ввода (Input, Select, MultiSelect,
- * DateTime, ColorPicker) по макету «Input and selector Dark Theme».
- *
- * Размеры (small/medium/large/extraLarge): высота 24/28/32/40, иконки 20/20/24/24.
- * Компоненты ссылаются на размеры/состояния через data-атрибуты
- * ([data-size], [data-variant], [data-chips]), т.к. классы CSS-модулей
- * не видны между файлами. Структурные части селекторов обёрнуты в
- * :where(), чтобы компоненты могли переопределять правила селекторами
- * с обычной специфичностью.
- */
-
-.root {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 320px;
-}
-
-.full-width {
-  max-width: 100%;
-}
-
-.root[data-size='small'] {
-  gap: 2px;
-}
-
-.root[data-size='medium'] {
-  gap: 4px;
-}
-
-.root[data-size='large'],
-.root[data-size='extraLarge'] {
-  gap: 4px;
-}
-
-/* Label small из макета: 12/12, без letter-spacing */
-.root > .label {
-  font-size: 12px;
-  line-height: 12px;
-  color: var(--theme-input-label);
-  letter-spacing: normal;
-}
-
-.label-row {
-  display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  width: 100%;
-  min-width: 0;
-}
-
-.label-row > .label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.error-name {
-  flex-shrink: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  line-height: 12px;
-  color: var(--theme-error);
-  white-space: nowrap;
-}
-
-.wrapper {
-  position: relative;
-  width: 100%;
-}
-
-:where(.root[data-size='small']) > .wrapper {
-  height: 24px;
-}
-
-:where(.root[data-size='medium']) > .wrapper {
-  height: 28px;
-}
-
-:where(.root[data-size='large']) > .wrapper {
-  height: 32px;
-}
-
-:where(.root[data-size='extraLarge']) > .wrapper {
-  height: 40px;
-}
-
-.input {
-  position: relative;
-  z-index: 1;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  color: var(--theme-text-primary);
-  letter-spacing: normal;
-  white-space: nowrap;
-  outline: none;
-  background-color: transparent;
-  border: none;
-  border-radius: 4px;
-}
-
-:where(.root[data-size='small'] .wrapper) > .input {
-  height: 24px;
-  padding: 0 6px;
-}
-
-:where(.root[data-size='medium'] .wrapper) > .input {
-  height: 28px;
-  padding: 0 8px;
-}
-
-:where(.root[data-size='large'] .wrapper) > .input {
-  height: 32px;
-  padding: 0 4px;
-  font-weight: 300;
-  line-height: 20px;
-}
-
-:where(.root[data-size='extraLarge'] .wrapper) > .input {
-  height: 40px;
-  padding: 0 8px;
-  font-weight: 300;
-  line-height: 24px;
-}
-
-:where(.root[data-size='small'] .wrapper[data-start-icon]) > .input {
-  padding-left: 30px;
-}
-
-:where(.root[data-size='medium'] .wrapper[data-start-icon]) > .input {
-  padding-left: 32px;
-}
-
-:where(.root[data-size='large'] .wrapper[data-start-icon]) > .input,
-:where(.root[data-size='extraLarge'] .wrapper[data-start-icon]) > .input {
-  padding-left: 36px;
-}
-
-:where(.root[data-size='small'] .wrapper[data-end-icon]) > .input {
-  padding-right: 30px;
-}
-
-:where(.root[data-size='medium'] .wrapper[data-end-icon]) > .input {
-  padding-right: 32px;
-}
-
-:where(.root[data-size='large'] .wrapper[data-end-icon]) > .input,
-:where(.root[data-size='extraLarge'] .wrapper[data-end-icon]) > .input {
-  padding-right: 36px;
-}
-
-:where(.root[data-size='small'] .wrapper[data-dual-end-icon]) > .input {
-  padding-right: 54px;
-}
-
-:where(.root[data-size='medium'] .wrapper[data-dual-end-icon]) > .input {
-  padding-right: 56px;
-}
-
-:where(.root[data-size='large'] .wrapper[data-dual-end-icon]) > .input,
-:where(.root[data-size='extraLarge'] .wrapper[data-dual-end-icon]) > .input {
-  padding-right: 64px;
-}
-
-:where(.root[data-size='small'] .wrapper[data-dual-end-icon]) .end-icon:not(.error-icon) {
-  right: 30px;
-}
-
-:where(.root[data-size='medium'] .wrapper[data-dual-end-icon]) .end-icon:not(.error-icon) {
-  right: 32px;
-}
-
-:where(.root[data-size='large'] .wrapper[data-dual-end-icon]) .end-icon:not(.error-icon),
-:where(.root[data-size='extraLarge'] .wrapper[data-dual-end-icon]) .end-icon:not(.error-icon) {
-  right: 32px;
-}
-
-:where(.root[data-size='small'] .wrapper[data-arrow]) > .input {
-  padding-right: 26px;
-}
-
-:where(.root[data-size='medium'] .wrapper[data-arrow]) > .input {
-  padding-right: 32px;
-}
-
-:where(.root[data-size='large'] .wrapper[data-arrow]) > .input,
-:where(.root[data-size='extraLarge'] .wrapper[data-arrow]) > .input {
-  padding-right: 36px;
-}
-
-:where(.root[data-size='small'] .wrapper[data-arrow][data-error-icon]) > .input {
-  padding-right: 50px;
-}
-
-:where(.root[data-size='medium'] .wrapper[data-arrow][data-error-icon]) > .input {
-  padding-right: 56px;
-}
-
-:where(.root[data-size='large'] .wrapper[data-arrow][data-error-icon]) > .input,
-:where(.root[data-size='extraLarge'] .wrapper[data-arrow][data-error-icon]) > .input {
-  padding-right: 64px;
-}
-
-:where(.root[data-size='small'] .wrapper[data-chips][data-arrow][data-error-icon]) > .chips {
-  padding-right: 50px;
-}
-
-:where(.root[data-size='medium'] .wrapper[data-chips][data-arrow][data-error-icon]) > .chips {
-  padding-right: 56px;
-}
-
-:where(.root[data-size='large'] .wrapper[data-chips][data-arrow][data-error-icon]) > .chips,
-:where(.root[data-size='extraLarge'] .wrapper[data-chips][data-arrow][data-error-icon]) > .chips {
-  padding-right: 64px;
-}
-
-:where(.wrapper[data-variant='filled']) > .input {
-  background-color: var(--theme-input-filled);
-}
-
-:where(.wrapper[data-variant='filled']:hover) > .input:not(:disabled):not(:focus) {
-  background-color: var(--theme-input-filled-hover);
-}
-
-:where(.wrapper[data-variant='filled']) > .input:focus {
-  outline: 2px solid var(--theme-focus);
-  outline-offset: -2px;
-  background-color: var(--theme-input-filled-focus);
-}
-
-:where(.wrapper[data-variant='filledBlack']) > .input {
-  outline: 1px solid var(--theme-input-filled-black-border);
-  outline-offset: -1px;
-  background-color: var(--theme-input-filled-black);
-}
-
-:where(.wrapper[data-variant='filledBlack']:hover) > .input:not(:disabled):not(:focus) {
-  outline-color: var(--theme-input-filled-black-border-hover);
-}
-
-:where(.wrapper[data-variant='filledBlack']) > .input:focus {
-  outline: 2px solid var(--theme-focus);
-  outline-offset: -2px;
-}
-
-:where(.wrapper[data-error]) > .input {
-  outline: 1px solid var(--theme-error) !important;
-  outline-offset: -1px;
-}
-
-:where(.wrapper[data-error]) > .input:focus {
-  outline: 2px solid var(--theme-error) !important;
-  outline-offset: -2px;
-}
-
-:where(.wrapper[data-variant='filledBlack'][data-error]) > .input {
-  background-image: linear-gradient(
-    var(--theme-input-filled-black-error-overlay),
-    var(--theme-input-filled-black-error-overlay)
-  );
-}
-
-:where(.wrapper[data-variant='outlined']) > .input {
-  outline: 1px solid var(--theme-input-border);
-  outline-offset: -1px;
-}
-
-:where(.wrapper[data-variant='outlined']:hover) > .input:not(:disabled):not(:focus) {
-  outline-color: var(--theme-input-border-hover);
-}
-
-:where(.wrapper[data-variant='outlined']) > .input:focus {
-  outline: 2px solid var(--theme-focus);
-  outline-offset: -2px;
-}
-
-.wrapper:has(> .input:disabled) {
-  opacity: 0.4;
-}
-
-.start-icon,
-.end-icon,
-.arrow {
-  position: absolute;
-  top: 50%;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  color: var(--theme-icon-primary);
-  transform: translateY(-50%);
-}
-
-.arrow {
-  cursor: pointer;
-}
-
-.start-icon > svg,
-.end-icon > svg,
-.arrow > svg {
-  width: 100%;
-  height: 100%;
-  fill: var(--theme-icon-primary);
-}
-
-.error-icon {
-  cursor: default;
-}
-
-.error-icon > svg {
-  fill: var(--theme-error);
-}
-
-:where(.root[data-size='small']) .start-icon {
-  left: 6px;
-}
-
-:where(.root[data-size='medium']) .start-icon {
-  left: 8px;
-}
-
-:where(.root[data-size='large']) .start-icon,
-:where(.root[data-size='extraLarge']) .start-icon {
-  left: 4px;
-  width: 24px;
-  height: 24px;
-}
-
-:where(.root[data-size='small']) .end-icon {
-  right: 6px;
-}
-
-:where(.root[data-size='medium']) .end-icon {
-  right: 8px;
-}
-
-:where(.root[data-size='large']) .end-icon,
-:where(.root[data-size='extraLarge']) .end-icon {
-  right: 4px;
-  width: 24px;
-  height: 24px;
-}
-
-:where(.root[data-size='small']) .arrow {
-  right: 2px;
-}
-
-:where(.root[data-size='medium']) .arrow {
-  right: 8px;
-}
-
-:where(.root[data-size='large']) .arrow,
-:where(.root[data-size='extraLarge']) .arrow {
-  right: 4px;
-  width: 24px;
-  height: 24px;
-}
-
-:where(.root[data-size='small'] .wrapper[data-arrow][data-error-icon]) .arrow {
-  right: 30px;
-}
-
-:where(.root[data-size='medium'] .wrapper[data-arrow][data-error-icon]) .arrow {
-  right: 32px;
-}
-
-:where(.root[data-size='large'] .wrapper[data-arrow][data-error-icon]) .arrow,
-:where(.root[data-size='extraLarge'] .wrapper[data-arrow][data-error-icon]) .arrow {
-  right: 32px;
-}
-
-.wrapper[data-chips] {
-  display: flex;
-  height: auto;
-}
-
-:where(.root[data-size='small']) > .wrapper[data-chips] {
-  height: auto;
-  min-height: 24px;
-}
-
-:where(.root[data-size='medium']) > .wrapper[data-chips] {
-  height: auto;
-  min-height: 28px;
-}
-
-:where(.root[data-size='large']) > .wrapper[data-chips] {
-  height: auto;
-  min-height: 32px;
-}
-
-:where(.root[data-size='extraLarge']) > .wrapper[data-chips] {
-  height: auto;
-  min-height: 40px;
-}
-
-:where(.root[data-size] .wrapper[data-chips]) > .input {
-  position: absolute;
-  inset: 0;
-  height: 100%;
-}
-
-.chips {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  gap: 4px;
-  align-items: center;
-  min-width: 0;
-  pointer-events: none;
-}
-
-.chips > * {
-  pointer-events: auto;
-}
-
-:where(.root[data-size='small']) .chips {
-  padding: 4px 26px 4px 6px;
-}
-
-:where(.root[data-size='medium']) .chips {
-  padding: 4px 32px 4px 8px;
-}
-
-:where(.root[data-size='large']) .chips {
-  padding: 4px 36px 4px 4px;
-}
-
-:where(.root[data-size='extraLarge']) .chips {
-  padding: 4px 36px 4px 8px;
-}
-
-:where(.root[data-size='small'] .wrapper[data-start-icon]) > .chips {
-  padding-left: 30px;
-}
-
-:where(.root[data-size='medium'] .wrapper[data-start-icon]) > .chips {
-  padding-left: 32px;
-}
-
-:where(.root[data-size='large'] .wrapper[data-start-icon]) > .chips,
-:where(.root[data-size='extraLarge'] .wrapper[data-start-icon]) > .chips {
-  padding-left: 36px;
-}

package/src/components/common/Input/Input.stories.tsx

@@ -1,232 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { CloseIcon } from '@icons/CloseIcon';
-import { SearchIcon } from '@icons/SearchIcon';
-
-import { Input } from './Input';
-
-const meta: Meta<typeof Input> = {
-  title: 'Components/Input',
-  component: Input,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['outlined', 'filled', 'filledBlack'],
-      description: 'Вариант отображения компонента',
-    },
-    componentSize: {
-      control: 'select',
-      options: ['small', 'medium', 'large', 'extraLarge'],
-      description: 'Размер компонента',
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Растянуть на всю ширину',
-    },
-    label: {
-      control: 'text',
-      description: 'Текст метки',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Текст плейсхолдера',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Отключить компонент',
-    },
-    type: {
-      control: 'select',
-      options: ['text', 'password', 'email', 'number', 'tel', 'file'],
-      description: 'Тип поля ввода',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Default: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    placeholder: 'Введите текст',
-  },
-};
-
-export const WithLabel: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    label: 'Имя пользователя',
-    placeholder: 'Введите имя',
-  },
-};
-
-export const FilledBlack: Story = {
-  args: {
-    variant: 'filledBlack',
-    componentSize: 'medium',
-    startIcon: <SearchIcon />,
-    placeholder: 'Search...',
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    label: 'Label',
-    placeholder: 'Search...',
-    startIcon: <SearchIcon />,
-    error: {
-      name: 'Error name',
-      description: 'Подробное описание ошибки',
-    },
-  },
-};
-
-export const WithErrorIcon: Story = {
-  args: {
-    variant: 'filledBlack',
-    componentSize: 'medium',
-    placeholder: 'Search...',
-    error: {
-      name: 'Error name',
-      description: 'Подробное описание ошибки',
-    },
-  },
-};
-
-export const WithErrorAndEndIcon: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    placeholder: 'Search...',
-    endIcon: <CloseIcon />,
-    error: {
-      name: 'Error name',
-      description: 'Подробное описание ошибки',
-    },
-  },
-};
-
-export const Filled: Story = {
-  args: {
-    variant: 'filled',
-    componentSize: 'medium',
-    placeholder: 'Введите текст',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'small',
-    placeholder: 'Введите текст',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'large',
-    placeholder: 'Введите текст',
-  },
-};
-
-export const WithStartIcon: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    startIcon: <SearchIcon />,
-    placeholder: 'Search...',
-  },
-};
-
-export const WithBothIcons: Story = {
-  args: {
-    variant: 'filled',
-    componentSize: 'medium',
-    startIcon: <SearchIcon />,
-    endIcon: <CloseIcon />,
-    placeholder: 'Search...',
-  },
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 248px)', gap: '24px' }}>
-      <Input variant="outlined" componentSize="small" label="Outlined small" placeholder="Search..." />
-      <Input variant="filled" componentSize="small" label="Filled small" placeholder="Search..." />
-      <Input variant="filledBlack" componentSize="small" label="Filled black small" placeholder="Search..." />
-      <Input variant="outlined" componentSize="medium" label="Outlined medium" placeholder="Search..." />
-      <Input variant="filled" componentSize="medium" label="Filled medium" placeholder="Search..." />
-      <Input variant="outlined" componentSize="large" label="Outlined large" placeholder="Search..." />
-      <Input variant="filled" componentSize="large" label="Filled large" placeholder="Search..." />
-      <Input variant="outlined" componentSize="extraLarge" label="Outlined extraLarge" placeholder="Search..." />
-      <Input variant="filled" componentSize="extraLarge" label="Filled extraLarge" placeholder="Search..." />
-      <Input variant="outlined" componentSize="medium" label="Outlined disabled" placeholder="Search..." disabled />
-      <Input variant="filled" componentSize="medium" label="Filled disabled" placeholder="Search..." disabled />
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    disabled: true,
-    placeholder: 'Введите текст',
-  },
-};
-
-export const Password: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    type: 'password',
-    placeholder: 'Введите пароль',
-  },
-};
-
-export const Number: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    type: 'number',
-    placeholder: 'Введите число',
-  },
-};
-
-export const File: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    type: 'file',
-    fullWidth: true,
-  },
-};
-
-export const FileWithLabel: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'medium',
-    type: 'file',
-    label: 'Документ',
-    placeholder: 'Прикрепите файл',
-  },
-};
-
-export const FileSmall: Story = {
-  args: {
-    variant: 'outlined',
-    componentSize: 'small',
-    type: 'file',
-    placeholder: 'Выберите файл',
-  },
-};