### FieldSelect Example

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/fields/README.md

Shows the FieldSelect component for selecting options from a list. This example covers single selection mode, searchable options, and handling of open/close states.

```tsx
const [value, setValue] = useState('1234');
const [isOpen, setIsOpen] = useState(false);

<FieldSelect
  mode='single'
  value={value}
  onChange={setValue}
  options={[
    { value: 'op1', option: 'Option 1' },
    { value: 'op2', option: 'Option 2' },
  ]}
  open={isHidden}
  onOpenChange={setIsOpen}
  id='field-1'
  name='field-1'
  placeholder='Select an item'
  noDataText={'No data'}
  searchable={true}
  disabled={false}
  readonly={false}
  showCopyButton={true}
  onFocus={() => {}}
  onBlur={() => {}}
  label='Select an item'
  labelTooltip='You can choose any option'
  required={true}
  hint='You have chosen wrong item'
  size='s'
  validationState='error'
  prefixIcon={<PlaceholderSVG />}
  enableFuzzySearch={true}
/>;
```

--------------------------------

### Toolbar Component Example

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toolbar/README.md

Demonstrates the usage of the Toolbar component with search, multiple selection, bulk actions, refresh, more actions, filters, and persistence.

```tsx
import { useState } from 'react';
import { Toolbar } from '@snack-uikit/toolbar';
import { ButtonFunction } from '@snack-uikit/button';
import { PlaceholderSVG } from '@snack-uikit/icons';

function Example() {
  const [searchValue, setSearchValue] = useState('');
  const [checked, setChecked] = useState(false);
  const [filtersValue, setFiltersValue] = useState<Record<string, unknown>>({});
  const [visibleFilters, setVisibleFilters] = useState<string[]>([]);

  const bulkActions = [
    {
      label: 'Confirm',
      icon: PlaceholderSVG,
      onClick: () => console.log('Confirm'),
      'data-test-id': 'confirm-action',
    },
    {
      label: 'Delete',
      icon: PlaceholderSVG,
      onClick: () => console.log('Delete'),
      'data-test-id': 'delete-action',
    },
  ];

  const moreActions = [
    {
      id: 'export',
      content: { option: 'Export' },
      onClick: () => console.log('Export'),
    },
    {
      id: 'import',
      content: { option: 'Import' },
      onClick: () => console.log('Import'),
    },
  ];

  const filterRow = {
    showAddButton: true,
    showClearButton: true,
    filters: [
      {
        id: 'status',
        label: 'Status',
        type: 'single',
        pinned: true,
        options: [
          { label: 'Active', value: 'active' },
          { label: 'Inactive', value: 'inactive' },
        ],
      },
    ],
    open: visibleFilters.length > 0,
    value: filtersValue,
    onChange: setFiltersValue,
    visibleFilters,
    onVisibleFiltersChange: setVisibleFilters,
  };

  return (
    <Toolbar
      search={{
        value: searchValue,
        onChange: setSearchValue,
        onSubmit: (value) => console.log('Search:', value),
        placeholder: 'Search',
      }}
      selectionMode="multiple"
      checked={checked}
      onCheck={() => setChecked(!checked)}
      bulkActions={bulkActions}
      onRefresh={() => console.log('Refresh')}
      moreActions={moreActions}
      filterRow={filterRow}
      after={
        <>
          <ButtonFunction icon={<PlaceholderSVG />} size="m" />
          <ButtonFunction icon={<PlaceholderSVG />} size="m" />
        </>
      }
      persist={{
        id: 'example-toolbar',
        filterQueryKey: 'filters',
        onLoad: ({ filter, search }) => {
          if (filter) setFiltersValue(filter);
          if (search) setSearchValue(search);
        },
      }}
    />
  );
}

```

--------------------------------

### Upload Toasts

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toaster/README.md

Methods for starting, updating, and dismissing upload toasts.

```APIDOC
## toaster.upload

### Description
Provides methods to manage upload toasts.

### Methods

#### `startOrUpdate(options: object)`
Starts or updates an upload toast.

- **Parameters**:
  - **options** (`object`) - Configuration options for the upload toast.
- **Returns**: `string` - The ID of the upload toast.

#### `dismiss(id: string)`
Dismisses an upload toast.

- **Parameters**:
  - **id** (`string`) - The ID of the toast to dismiss.
```

--------------------------------

### FieldTextArea Example

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/fields/README.md

Demonstrates the FieldTextArea component for multi-line text input. It includes properties for maximum length, row count, resizability, and validation.

```tsx
const [value, setValue] = useState('abc');

<FieldTextArea
  value={value}
  onChange={setValue}
  id='field-1'
  name='field-1'
  placeholder='Enter text'
  maxLength={20}
  maxRows={8}
  resizable={true}
  allowMoreThanMaxLength={true}
  disabled={false}
  readonly={false}
  showCopyButton={true}
  onFocus={() => {}}
  onBlur={() => {}}
  label='Enter text'
  labelTooltip='You can input any text'
  required={true}
  hint='You have entered wrong answer'
  size='s'
  validationState='error'
/>;
```

--------------------------------

### FieldSecure Example

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/fields/README.md

Shows how to use the FieldSecure component for password input. It supports toggling password visibility, copy button, and includes props for input masking and validation.

```tsx
const [value, setValue] = useState('1234');
const [isHidden, setIsHidden] = useState(false);

<FieldSecure
  value={value}
  onChange={setValue}
  hidden={isHidden}
  onHiddenChange={setIsHidden}
  id='field-1'
  name='field-1'
  placeholder='Enter password'
  maxLength={20}
  allowMoreThanMaxLength={false}
  disabled={false}
  readonly={false}
  showCopyButton={true}
  onFocus={() => {}}
  onBlur={() => {}}
  label='Enter password'
  labelTooltip='You can enter password here'
  required={true}
  hint='You have entered wrong password'
  size='s'
  validationState='error'
  prefixIcon={<PlaceholderSVG />}
/>;
```

--------------------------------

### FieldDate Example

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/fields/README.md

Demonstrates the usage of the FieldDate component for date input. It includes state management for the date value, open/close state for the calendar, and various props for configuration and validation.

```tsx
import { useState } from 'react';
import { FieldDate, FieldSecure, FieldSelect, FieldText, FieldTextArea } from '@snack-uikit/fields';
import { PlaceholderSVG } from '@snack-uikit/icons';

const [value, setValue] = useState('11.11.1111');
const [isOpen, setIsOpen] = useState(false);

<FieldDate
  value={value}
  onChange={setValue}
  open={isOpen}
  onOpenChange={setIsOpen}
  id='field-1'
  name='field-1'
  disabled={false}
  readonly={false}
  showCopyButton={true}
  onFocus={() => {}}
  onBlur={() => {}}
  label='Select date'
  labelTooltip='You can choose any date'
  required={true}
  hint='You have entered wrong date'
  size='s'
  validationState='default'
/>;
```

--------------------------------

### FieldText Example

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/fields/README.md

Illustrates the use of the FieldText component for general text input. This snippet covers basic text entry with props for length limits, placeholders, and validation states.

```tsx
const [value, setValue] = useState('abc');

<FieldText
  value={value}
  onChange={setValue}
  id='field-1'
  name='field-1'
  placeholder='Enter text'
  maxLength={20}
  allowMoreThanMaxLength={false}
  disabled={false}
  readonly={false}
  showCopyButton={true}
  onFocus={() => {}}
  onBlur={() => {}}
  label='Enter text'
  labelTooltip='You can input any text'
  required={true}
  hint='You have entered wrong answer'
  size='s'
  validationState='error'
  prefixIcon={<PlaceholderSVG />}
/>;
```

--------------------------------

### Basic Droplist Usage

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/README.md

Demonstrates how to use the Droplist component with single selection mode. It requires importing Droplist and a trigger component like ButtonFilled. The selection state is managed using useState.

```tsx
import { Droplist } from '@snack-uikit/list';
import { ButtonFilled } from '@snack-uikit/button';

function Example() {
  const [selected, setSelected] = useState<string | undefined>();

  return (
    <Droplist
      items={[
        {
          id: '1',
          content: { option: 'Первый элемент', description: 'Описание первого элемента' },
        },
        {
          id: '2',
          content: { option: 'Второй элемент', description: 'Описание второго элемента' },
        },
      ]}
      selection={{
        mode: 'single',
        value: selected,
        onChange: setSelected,
      }}
      trigger="click"
      placement="bottom-start"
      closeDroplistOnItemClick
    >
      <ButtonFilled label="Выбрать элемент" />
    </Droplist>
  );
}
```

--------------------------------

### Basic Carousel Usage

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/carousel/README.md

Demonstrates how to use the Carousel component with multiple items, configuring display properties like `showItems`, `scrollBy`, `transition`, and enabling navigation features such as `swipe`, `arrows`, and `pagination`. It also shows how to set up `infiniteScroll`, `autoSwipe`, and `controlsVisibility`. The `gap` prop is used to define spacing between items.

```tsx
import { Carousel } from '@snack-uikit/carousel';
import { Card } from '@snack-uikit/card';

function Example() {
  const items = Array.from({ length: 12 }).map((_, i) => (
    <Card key={i} header={<Card.Header title={`Item ${i + 1}`} />}>
      Content for item {i + 1}
    </Card>
  ));

  return (
    <Carousel
      showItems={2.5}
      scrollBy={2}
      transition={0.4}
      swipe={true}
      arrows={true}
      pagination={true}
      infiniteScroll={true}
      autoSwipe={5}
      controlsVisibility="hover"
      gap="var(--dimension-2m)"
    >
      {items}
    </Carousel>
  );
}

```

--------------------------------

### System Event Toasts

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toaster/README.md

Methods for creating, updating, and dismissing system event toasts.

```APIDOC
## toaster.systemEvent

### Description
Provides methods to manage system event toasts.

### Methods

#### `success(options: { title: string, description?: string, id: string })`
Creates a success toast for a system event.

- **Returns**: `Promise<string>` - The ID of the created toast.

#### `update.error(id: string, options: { title: string, description?: string })`
Updates an existing system event toast with an error state.

- **Parameters**:
  - **id** (`string`) - The ID of the toast to update.
  - **options** (`object`) - The update payload.
    - **title** (`string`) - The new title for the toast.
    - **description** (`string`, optional) - The new description for the toast.

#### `dismiss(id: string)`
Dismisses a system event toast.

- **Parameters**:
  - **id** (`string`) - The ID of the toast to dismiss.
```

--------------------------------

### User Action Toasts

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toaster/README.md

Methods for creating, updating, and dismissing user action toasts.

```APIDOC
## toaster.userAction

### Description
Provides methods to manage user action toasts.

### Methods

#### `success(options: { label: string, id: string })`
Creates a success toast for a user action.

- **Returns**: `Promise<string>` - The ID of the created toast.

#### `update.error(id: string, options: { label: string })`
Updates an existing user action toast with an error state.

- **Parameters**:
  - **id** (`string`) - The ID of the toast to update.
  - **options** (`object`) - The update payload.
    - **label** (`string`) - The new label for the toast.

#### `dismiss(id: string)`
Dismisses a user action toast.

- **Parameters**:
  - **id** (`string`) - The ID of the toast to dismiss.
```

--------------------------------

### Toaster Core Functionality

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toaster/README.md

Demonstrates the core API for creating, updating, and dismissing user action and system event toasts. Use this for general-purpose notifications.

```typescript
import { toaster } from '@snack-uikit/toaster';

// create userAction toast
const userActionId = await toaster.userAction.success({ label, id });

// create systemEvent toast
const systemEventId = await toaster.systemEvent.success({ title, description, id });

// update userAction toast
toster.userAction.update.error(userActionId, { label: 'new text' });

// update systemEvent toast
toster.systemEvent.update.error(systemEventId, {
  title: 'new text',
  description: 'new description',
});

// dismiss userAction toast
toster.userAction.dismiss(userActionId);

// dismiss systemEvent toast
toster.systemEvent.dismiss(systemEventId);

// create or update upload toast
const uploadToastId = toaster.upload.startOrUpdate(options);

// dismiss upload toast
toster.upload.dismiss(uploadToastId);
```

--------------------------------

### Basic Timeline Usage

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/timeline/README.md

Use the Timeline component to display a series of events. Configure content position and alternation for layout.

```tsx
import { Timeline } from '@snack-uikit/timeline';

function Example() {
  return (
    <Timeline
      items={[
        {
          content: <div>Начало процесса</div>,
          dotAppearance: 'primary',
        },
        {
          content: <div>Промежуточный этап</div>,
          lineStyle: 'dashed',
        },
        {
          content: <div>Завершение</div>,
        },
      ]}
      contentPosition="right"
      alternate={false}
    />
  );
}
```

--------------------------------

### Setting Default Props for a Component

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/fields/README.md

Demonstrates how to set default values for props in a React component using TypeScript. This is useful for ensuring components have sensible defaults when certain props are not provided.

```tsx
type Props = {
  name?: string
}

const MyComponent: FC<Props> = (props) => {
  return <div>{props.name}</div>
}

MyComponent.defaultProps = {
  name: 'John Doe'
}
```

--------------------------------

### Timeline Component

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/timeline/README.md

The main component for building a timeline of events from an array of items. It automatically determines item roles and manages connecting lines. Supports content positioning, alternate layout, and full width.

```APIDOC
## Timeline

### Description

- `Timeline` is the main component for building a timeline of events from an array of items.
- It accepts an array of items (`items`) and automatically determines their roles (start, center, end) for correct display of connecting lines.
- Supports unified content positioning for all items (`contentPosition: "right" | "left"`) or an alternating layout (`alternate`), where items are automatically placed on different sides of the timeline.
- Allows stretching the timeline to the full container width (`fullWidth`) and customizing the appearance of each item individually (dot variant, color scheme, line style, opposite content).

### Props

- **items** (TimelineItem[]) - Required - Timeline points.
- **contentPosition** (enum Position: "right", "left") - Optional - Content position. Defaults to "right".
- **alternate** (boolean) - Optional - Alternate content position.
- **fullWidth** (boolean) - Optional - Make the timeline full width.
- **className** (string) - Optional - CSS class for the content element.
```

--------------------------------

### ToastSystemEvent Props

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toaster/README.md

Defines the properties for a system event toast component.

```APIDOC
## ToastSystemEvent Props

### Description
Properties that can be passed to the `ToastSystemEvent` component.

### Props

- **title** (`string`) - Required - The main title of the toast.
- **closeToast** (`() => void`) - A function to close the toast.
- **toastProps** (`ToastProps`) - Additional properties for the toast.
- **data** (`unknown`) - Arbitrary data associated with the toast.
- **description** (`string`, optional) - A more detailed description for the toast.
- **appearance** (enum: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"`, optional) - Defaults to `"neutral"`. The visual style of the toast.
- **link** (`ToastSystemEventLink`, optional) - Configuration for a link within the toast.
- **progressBar** (`boolean`, optional) - Defaults to `true`. Whether to display a progress bar.
- **closable** (`boolean`, optional) - Defaults to `true`. Whether the toast can be closed by the user.
- **className** (`string`, optional) - A CSS class to apply to the toast.
- **onCloseClick** (`(e: MouseEvent<HTMLButtonElement, MouseEvent>, close?: () => void) => void`, optional) - Callback function executed when the close button is clicked.
- **action** (`ButtonActionProps[]`, optional) - An array of button actions to display in the toast.
- **loading** (`never`) - This prop appears to be unused or reserved.
```

--------------------------------

### ToastUpload Component

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toaster/README.md

The ToastUpload component is specifically designed for displaying upload progress and status. It provides detailed information about the upload process and allows user interaction.

```APIDOC
## ToastUpload

### Description
Displays toast notifications related to file uploads, showing progress, status, and providing controls for management.

### Props

- **generalActions** (Omit<UploadActions, "onCancel">) - Required - Actions for managing the overall upload process (excluding cancel).
- **files** (UploadItem[]) - Required - An array of items being uploaded.
- **progress** ({ current: number; total: number; }) - Required - An object representing the current and total progress of the upload.
- **description** (string) - Required - A description of the current upload status.
- **status** (enum ToastUploadStatus) - Required - The overall status of the upload. Possible values: "error", "loading", "pause", "uploaded", "errorUploaded".
- **closeToast** (() => void) - Function to close the current toast.
- **toastProps** (ToastProps) - Props for the underlying toast component.
- **data** (unknown) - Arbitrary data associated with the toast.
- **title** (string) - The title displayed in the toast.
- **onCloseClick** ((e: MouseEvent<HTMLButtonElement, MouseEvent>, close?: () => void) => void) - Callback function when the close button is clicked.
- **closable** (boolean) - Whether the toast is closable by the user.
- **className** (string) - Custom CSS class for the container.
- **collapsed** (boolean) - Whether the toast is collapsed or expanded.
- **onCollapsed** ((collapsed: boolean) => void) - Callback function when the collapsed state changes.
- **cancelButton** (ButtonTextNeutralProps) - Configuration for a cancel button for the entire upload.
- **draggable** (boolean) - Whether the toast can be dragged.
- **draggableBounds** (string | false | DraggableBounds) - Defines the boundaries for dragging the toast.
```

--------------------------------

### createLocaleContext Function

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/locale/README.md

A function used to create a locale context, allowing for extended dictionaries and default language configuration.

```APIDOC
## createLocaleContext

### Description
Creates a locale context with potentially extended dictionaries and a specified default language.

### Props

#### Parameters

- **extendedDictionary** (ExtendedDictionary<D>) - Required - An object containing additional or modified translations.
- **defaultLanguage** ("en-GB" | "ru-RU") - Optional - The default language to use if no other language is specified. Defaults to 'en-GB'.
```

--------------------------------

### Using LocaleProvider with Custom Translations

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/locale/README.md

Wrap your application with LocaleProvider and pass custom translations to override default ones or add new languages. Specify only the fields you want to change for existing languages.

```tsx
import { LocaleProvider, OverrideLocales } from '@snack-uikit/locale';

const customTraslations: OverrideLocales = {
  en_GB: {
    Table: {
      searchPlaceholder: 'custom',
    },
  },
  custom_LANG: {
    Table: {
      searchPlaceholder: 'custom',
      // ...
    },
  },
};

const lang = 'en_GB'; // or 'ru_RU' or 'custom_LANG'

// ...
<LocaleProvider lang={lang} locales={customTranslations}>
  {content}
</LocaleProvider>
```

--------------------------------

### Notification Component Props

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/notification/README.md

The Notification component accepts various props to control its content, appearance, and behavior. Below is a detailed list of available props.

```APIDOC
## Notification Component Props

### Description
This section details the props available for the Notification component.

### Props
#### `content`
- **Type**: `ReactElement<NotificationPanelProps, typeof NotificationPanel>`
- **Required**: Yes
- **Description**: The main content to be displayed within the notification panel.

#### `contentClassName`
- **Type**: `string`
- **Description**: CSS class to be applied to the content container.

#### `className`
- **Type**: `string`
- **Description**: CSS class to be applied to the main notification element.

#### `children`
- **Type**: `ReactNode | ChildrenFunction`
- **Description**: The trigger element for the popover. See documentation below for more details.

#### `triggerClassName`
- **Type**: `string`
- **Description**: CSS class to be applied to the trigger element.

#### `offset`
- **Type**: `number`
- **Default**: `0`
- **Description**: The offset of the popover from its trigger element in pixels.

#### `open`
- **Type**: `boolean`
- **Description**: Controls the visibility state of the notification (open or closed).

#### `onOpenChange`
- **Type**: `(isOpen: boolean) => void`
- **Description**: Callback function that is triggered when the `open` state changes.

#### `hoverDelayOpen`
- **Type**: `number`
- **Description**: Delay in milliseconds before opening the notification when triggered by hover.

#### `hoverDelayClose`
- **Type**: `number`
- **Description**: Delay in milliseconds before closing the notification when triggered by hover.

#### `triggerRef`
- **Type**: `ForwardedRef<HTMLElement | ReferenceType>`
- **Description**: A ref object pointing to the trigger element.

#### `closeOnPopstate`
- **Type**: `boolean`
- **Description**: Determines if the notification should close when the browser's history state changes.

#### `closeOnEscapeKey`
- **Type**: `boolean`
- **Default**: `true`
- **Description**: Determines if the notification should close when the Escape key is pressed.

#### `triggerClickByKeys`
- **Type**: `boolean`
- **Default**: `true`
- **Description**: Determines if the notification should be triggered by pressing Enter or Space keys when `trigger` is set to `click`.

#### `trigger`
- **Type**: `enum Trigger`
- **Default**: `"click"`
- **Description**: Specifies the condition for displaying the notification. Possible values include: `"click"`, `"hover"`, `"focusVisible"`, `"focus"`, `"hoverAndFocusVisible"`, `"hoverAndFocus"`, `"clickAndFocusVisible"`.

#### `placement`
- **Type**: `enum Placement`
- **Default**: `"bottom-end"`
- **Description**: Defines the position of the notification relative to its trigger element. Possible values include: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"`.
```

--------------------------------

### Standalone TrackItem Configuration

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/timeline/README.md

Utilize TrackItem for custom timeline scales or as part of a Timeline. Configure its appearance, content position, and role.

```tsx
import { TrackItem } from '@snack-uikit/timeline/src/helperComponents/TrackItem';

function Example() {
  return (
    <TrackItem
      content={<div>Содержимое элемента</div>}
      contentPosition={TrackItem.contentPositions.Right}
      role={TrackItem.roles.Start}
      lineStyle={TrackItem.lineStyles.Default}
      dotVariant={TrackItem.dotVariants.Default}
      dotAppearance={TrackItem.dotAppearances.Primary}
      opposite={<div>Дополнительный контент</div>}
    />
  );
}
```

--------------------------------

### exportToXLSX

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/table/README.md

Exports tabular data to an XLSX file. This function requires column definitions and the data to be exported. Optional parameters allow customization of the file name and column auto-fitting.

```APIDOC
## exportToXLSX

### Description
Exports tabular data to an XLSX file. This function requires column definitions and the data to be exported. Optional parameters allow customization of the file name and column auto-fitting.

### Method
`exportToXLSX(options)`

### Parameters
#### Props
- **columnDefinitions*** (`ColumnDefinition<TData>[]`) - Required - Defines the structure and properties of each column in the table.
- **data*** (`TData[]`) - Required - An array of data objects to be exported.
- **fileName** (`string`) - Optional - The desired name for the exported XLSX file. Defaults to 'Table'.
- **autoFitColumns** (`boolean`) - Optional - If true, columns will be automatically adjusted to fit their content.
```

--------------------------------

### useLocale Hook

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/locale/README.md

An inner hook used for accessing and utilizing translations within your components.

```APIDOC
## useLocale

### Description
Helper hook to access translation functions and values within the application.

### Usage
This is an inner hook and typically not called directly by the user.
```

--------------------------------

### Carousel Component Props

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/carousel/README.md

This section details the available props for the Carousel component, including their types, default values, and descriptions.

```APIDOC
## Carousel

### Props

| name | type | default value | description |
|------|------|---------------|-------------|
| children* | `ReactElement<any, string \| JSXElementConstructor<any>>[]` | - | Массив айтемов |
| className | `string` | - | CSS - класснейм |
| showItems | `number` | 1 | Кол-во отображаемых единовременно айтемов |
| scrollBy | `number` | Math.trunc(show) | Сдвиг айтемов при смене 1 страницы |
| transition | `number` | 0.4 | Время переключения 1 страницы (в s) |
| swipe | `boolean` | true | Переключение страниц свайпом |
| autoSwipe | `number` | - | Автоматическое переключение слайдов в секундах |
| swipeActivateLength | `number` | 48 | Минимальная длина в px для активации свайпа |
| arrows | `boolean` | true | Использовать стрелки для переключения страниц |
| pagination | `boolean` | true | Использовать пагинацию для переключения страниц |
| gap | `string` | var(--dimension-2m) | Расстояние между айтемами |
| state | `{ page: number; onChange(page: number): void; }` | - | Управление состоянием извне |
| infiniteScroll | `boolean` | - | Цикличная прокрутка |
| controlsVisibility | "hover" \| "always" | hover | Управление видимостью стрелок: 'hover' — по ховеру, 'always' — всегда |
```

--------------------------------

### Setting Display Name for a Component

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/fields/README.md

Illustrates how to set a custom display name for a React component. This name is used in debugging messages and can help identify components in React DevTools.

```tsx
const MyComponent: FC = () => {
  return <div>Hello!</div>
}

MyComponent.displayName = 'MyAwesomeComponent'
```

--------------------------------

### LocaleProvider Component

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/locale/README.md

The LocaleProvider component is essential for enabling translations in your application. It should wrap your app and can accept a language code and custom locales for overriding default translations.

```APIDOC
## LocaleProvider

### Description
Provides the locale context to the application, enabling translation functionality.

### Props

#### Parameters

- **lang** (string) - Required - Specifies the current language code for translations.
- **fallbackLang** ("en-GB" | "ru-RU") - Optional - Sets a fallback language if the specified language is not available.
- **overrideLocales** (PartialObjectDeep<Record<"en-GB" | "ru-RU", LocaleDictionary<Dictionary>>>) - Optional - Allows overriding or extending existing translations, or providing translations for custom languages.
```

--------------------------------

### TrackItem Component

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/timeline/README.md

A standalone timeline item that can be used independently or within the Timeline component. It includes a dot, connecting lines, and content that can be positioned left or right. Supports opposite content and automatic role determination.

```APIDOC
## TrackItem

### Description

- `TrackItem` is a standalone timeline element that can be used independently for building custom timelines or as part of the `Timeline` component.
- The element consists of a dot (`dotVariant`, `dotAppearance`), connecting lines (`lineStyle`, `showLines`), and content that can be positioned to the left or right of the line (`contentPosition`).
- Supports displaying additional content opposite the main content (`opposite`) and automatic determination of the element's role (`role: "start" | "center" | "end"`) for correct line display.

### Props

- **content** (ReactNode) - Required - The main content of the timeline item.
- **contentPosition** (enum TrackItem.contentPositions) - Optional - The position of the content relative to the timeline line.
- **role** (enum TrackItem.roles) - Optional - The role of the item in the timeline (start, center, end).
- **lineStyle** (enum TrackItem.lineStyles) - Optional - The style of the connecting line.
- **dotVariant** (enum TrackItem.dotVariants) - Optional - The variant of the dot.
- **dotAppearance** (enum TrackItem.dotAppearances) - Optional - The appearance of the dot.
- **opposite** (ReactNode) - Optional - Additional content to display opposite the main content.
```

--------------------------------

### ToastUserAction Component

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toaster/README.md

The ToastUserAction component is used to display toast notifications with user-actionable elements. It accepts various props to customize its appearance, behavior, and associated data.

```APIDOC
## ToastUserAction

### Description
Displays a toast notification with user-actionable elements. Allows customization of labels, actions, appearance, and more.

### Props

- **label** (string) - Required - The text label for the user action.
- **closeToast** (() => void) - Function to close the current toast.
- **toastProps** (ToastProps) - Props for the underlying toast component.
- **data** (unknown) - Arbitrary data associated with the toast.
- **appearance** (enum ToastUserActionAppearance) - The visual style of the toast. Possible values: "neutral", "error", "warning", "success". Defaults to "neutral".
- **link** (ToastUserActionLink) - Configuration for a link within the toast.
- **className** (string) - Custom CSS class for styling.
- **loading** (boolean) - Indicates if the action is in a loading state.
```

--------------------------------

### ToasterContainer Component

Source: https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toaster/README.md

The ToasterContainer component acts as a manager for displaying multiple toast notifications. It allows configuration of toast positioning, limits, and display options.

```APIDOC
## ToasterContainer

### Description
Manages and displays toast notifications on the screen. Configurable for position, display limits, and types of toasts.

### Props

- **position** (enum ToastPosition) - The position of the toaster container on the screen. Possible values: "top-right", "top-center", "top-left", "bottom-right", "bottom-center", "bottom-left". Defaults to "bottom-right".
- **limit** (number) - The maximum number of toasts to display at once. Defaults to 5.
- **containerId** (Id) - A unique identifier for the toaster container.
- **displayCloseAllButton** (boolean) - Whether to show a button to close all toasts.
- **type** (enum ToasterType) - The type of toasts this container will manage. Possible values: "system-event", "user-action", "upload". Defaults to "system-event".
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.