nntc-ui 0.2.3 → 0.2.6

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

@@ -0,0 +1,456 @@
+/*
+ * Общая геометрия и состояния полей ввода (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/{components/common/FieldShell/index.d.ts → src/components/common/FieldShell/index.ts}

@@ -3,4 +3,3 @@ export { FieldErrorIcon } from './FieldErrorIcon';
 export type { FieldVariant } from '@models/FieldVariant';
 export type { FieldSize } from '@models/FieldSize';
 export type { FieldError } from '@models/FieldError';
-//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,232 @@
+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: 'Выберите файл',
+  },
+};