@ozen-ui/kit 0.0.1

package/__inner__/cjs/components/Container/Container.css

@@ -0,0 +1,174 @@
+/* xs >= 0px */
+/* s >= 640px */
+/* m >= 1024px */
+/* l >= 1280px */
+.Container {
+  inline-size: 100%;
+  box-sizing: border-box;
+}
+.Container_position_start {
+      margin-inline-start: 0;
+      margin-inline-end: auto;
+    }
+.Container_position_center {
+      margin-inline-start: auto;
+      margin-inline-end: auto;
+    }
+.Container_maxWidth_s {
+    max-inline-size: var(--breakpoint-s);
+  }
+.Container_maxWidth_m {
+    max-inline-size: var(--breakpoint-m);
+  }
+.Container_maxWidth_l {
+    max-inline-size: var(--breakpoint-l);
+  }
+.Container_maxWidth_fullWidth {
+    max-inline-size: 100%;
+  }
+.Container_gutters_xs {
+    padding: 0 var(--space-xs);
+  }
+.Container_gutters_s {
+    padding: 0 var(--space-s);
+  }
+.Container_gutters_m {
+    padding: 0 var(--space-m);
+  }
+.Container_gutters_l {
+    padding: 0 var(--space-l);
+  }
+.Container_gutters_xl {
+    padding: 0 var(--space-xl);
+  }
+.Container_gutters_2xl {
+    padding: 0 var(--space-2xl);
+  }
+@media (width >= 0) {
+      .Container_gutters_xs_xs {
+    padding: 0 var(--space-xs);
+  }
+      .Container_gutters_xs_s {
+    padding: 0 var(--space-s);
+  }
+      .Container_gutters_xs_m {
+    padding: 0 var(--space-m);
+  }
+      .Container_gutters_xs_l {
+    padding: 0 var(--space-l);
+  }
+      .Container_gutters_xs_xl {
+    padding: 0 var(--space-xl);
+  }
+      .Container_gutters_xs_2xl {
+    padding: 0 var(--space-2xl);
+  }
+      .Container_maxWidth_xs_s {
+    max-inline-size: var(--breakpoint-s);
+  }
+      .Container_maxWidth_xs_m {
+    max-inline-size: var(--breakpoint-m);
+  }
+      .Container_maxWidth_xs_l {
+    max-inline-size: var(--breakpoint-l);
+  }
+      .Container_maxWidth_xs_fullWidth {
+    max-inline-size: 100%;
+  }
+  }
+@media (width >= 640px) {
+      .Container_gutters_s_xs {
+    padding: 0 var(--space-xs);
+  }
+      .Container_gutters_s_s {
+    padding: 0 var(--space-s);
+  }
+      .Container_gutters_s_m {
+    padding: 0 var(--space-m);
+  }
+      .Container_gutters_s_l {
+    padding: 0 var(--space-l);
+  }
+      .Container_gutters_s_xl {
+    padding: 0 var(--space-xl);
+  }
+      .Container_gutters_s_2xl {
+    padding: 0 var(--space-2xl);
+  }
+      .Container_maxWidth_s_s {
+    max-inline-size: var(--breakpoint-s);
+  }
+      .Container_maxWidth_s_m {
+    max-inline-size: var(--breakpoint-m);
+  }
+      .Container_maxWidth_s_l {
+    max-inline-size: var(--breakpoint-l);
+  }
+      .Container_maxWidth_s_fullWidth {
+    max-inline-size: 100%;
+  }
+  }
+@media (width >=  1024px) {
+      .Container_gutters_m_xs {
+    padding: 0 var(--space-xs);
+  }
+      .Container_gutters_m_s {
+    padding: 0 var(--space-s);
+  }
+      .Container_gutters_m_m {
+    padding: 0 var(--space-m);
+  }
+      .Container_gutters_m_l {
+    padding: 0 var(--space-l);
+  }
+      .Container_gutters_m_xl {
+    padding: 0 var(--space-xl);
+  }
+      .Container_gutters_m_2xl {
+    padding: 0 var(--space-2xl);
+  }
+      .Container_maxWidth_m_s {
+    max-inline-size: var(--breakpoint-s);
+  }
+      .Container_maxWidth_m_m {
+    max-inline-size: var(--breakpoint-m);
+  }
+      .Container_maxWidth_m_l {
+    max-inline-size: var(--breakpoint-l);
+  }
+      .Container_maxWidth_m_fullWidth {
+    max-inline-size: 100%;
+  }
+  }
+@media (width >= 1280px) {
+      .Container_gutters_l_xs {
+    padding: 0 var(--space-xs);
+  }
+      .Container_gutters_l_s {
+    padding: 0 var(--space-s);
+  }
+      .Container_gutters_l_m {
+    padding: 0 var(--space-m);
+  }
+      .Container_gutters_l_l {
+    padding: 0 var(--space-l);
+  }
+      .Container_gutters_l_xl {
+    padding: 0 var(--space-xl);
+  }
+      .Container_gutters_l_2xl {
+    padding: 0 var(--space-2xl);
+  }
+      .Container_maxWidth_l_s {
+    max-inline-size: var(--breakpoint-s);
+  }
+      .Container_maxWidth_l_m {
+    max-inline-size: var(--breakpoint-m);
+  }
+      .Container_maxWidth_l_l {
+    max-inline-size: var(--breakpoint-l);
+  }
+      .Container_maxWidth_l_fullWidth {
+    max-inline-size: 100%;
+  }
+  }

package/__inner__/cjs/components/Container/Container.d.ts

@@ -0,0 +1,26 @@
+import './Container.css';
+import type { ElementType, ReactNode } from 'react';
+import type { ResponsiveValue } from '../../types/ResponsiveValue';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+export declare const cnContainer: import("@bem-react/classname").ClassNameFormatter;
+declare const containerGuttersVariant: readonly ["xs", "s", "m", "l", "xl", "2xl"];
+export type ContainerGuttersVariant = (typeof containerGuttersVariant)[number];
+declare const containerMaxWidthVariant: readonly ["s", "m", "l", "fullWidth"];
+export type ContainerMaxWidthVariant = (typeof containerMaxWidthVariant)[number];
+declare const containerPositionVariant: readonly ["start", "center"];
+export type ContainerPositionVariant = (typeof containerPositionVariant)[number];
+export type ContainerBaseProps = {
+    /** Позиционирование контейнера */
+    position?: ContainerPositionVariant;
+    /** Максимальная ширина контейнера */
+    maxWidth?: ResponsiveValue<ContainerMaxWidthVariant>;
+    /** Боковые отступы (padding) */
+    gutters?: ResponsiveValue<ContainerGuttersVariant>;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string;
+};
+export type ContainerProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<ContainerBaseProps, As>;
+export declare const Container: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ContainerBaseProps, "div">;
+export {};

package/__inner__/cjs/components/Container/Container.js

@@ -0,0 +1,22 @@
+"use strict";
+exports.__esModule = true;
+exports.Container = exports.cnContainer = void 0;
+var tslib_1 = require("tslib");
+require("./Container.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var classnames_1 = require("@bem-react/classnames");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var useGutters_1 = require("./useGutters");
+var useMaxWidth_1 = require("./useMaxWidth");
+exports.cnContainer = (0, classname_1.cn)('Container');
+var containerGuttersVariant = ['xs', 's', 'm', 'l', 'xl', '2xl'];
+var containerMaxWidthVariant = ['s', 'm', 'l', 'fullWidth'];
+var containerPositionVariant = ['start', 'center'];
+exports.Container = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Container' });
+    var children = props.children, className = props.className, maxWidth = props.maxWidth, position = props.position, gutters = props.gutters, _a = props.as, Tag = _a === void 0 ? 'div' : _a, other = tslib_1.__rest(props, ["children", "className", "maxWidth", "position", "gutters", "as"]);
+    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)((0, exports.cnContainer)({ position: position }), (0, useMaxWidth_1.useGenerateMaxWidthCn)(exports.cnContainer, maxWidth), (0, useGutters_1.useGenerateGuttersCn)(exports.cnContainer, gutters), className) }, other, { ref: ref }), children));
+});
+exports.Container.displayName = 'Container';

package/__inner__/cjs/components/Container/index.d.ts

@@ -0,0 +1 @@
+export * from './Container';

package/__inner__/cjs/components/Container/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Container"), exports);

package/__inner__/cjs/components/Container/useGutters.d.ts

@@ -0,0 +1,3 @@
+import type { ClassNameFormatter } from '@bem-react/classname';
+import type { ContainerProps } from './Container';
+export declare const useGenerateGuttersCn: (cn: ClassNameFormatter, gutters: ContainerProps['gutters']) => string;

package/__inner__/cjs/components/Container/useGutters.js

@@ -0,0 +1,21 @@
+"use strict";
+exports.__esModule = true;
+exports.useGenerateGuttersCn = void 0;
+var tslib_1 = require("tslib");
+var classnames_1 = require("@bem-react/classnames");
+var useGenerateGuttersCn = function (cn, gutters) {
+    if (typeof gutters === 'string') {
+        return cn({ gutters: gutters });
+    }
+    if (typeof gutters === 'object') {
+        return (0, classnames_1.classnames)(Object.entries(gutters)
+            .reduce(function (acc, _a) {
+            var _b;
+            var _c = tslib_1.__read(_a, 2), key = _c[0], value = _c[1];
+            return "".concat(acc, " ").concat(cn((_b = {}, _b["gutters_".concat(key)] = value, _b)));
+        }, '')
+            .trim());
+    }
+    return '';
+};
+exports.useGenerateGuttersCn = useGenerateGuttersCn;

package/__inner__/cjs/components/Container/useMaxWidth.d.ts

@@ -0,0 +1,3 @@
+import type { ClassNameFormatter } from '@bem-react/classname';
+import type { ContainerProps } from './Container';
+export declare const useGenerateMaxWidthCn: (cn: ClassNameFormatter, maxWidth: ContainerProps['maxWidth']) => string;

package/__inner__/cjs/components/Container/useMaxWidth.js

@@ -0,0 +1,21 @@
+"use strict";
+exports.__esModule = true;
+exports.useGenerateMaxWidthCn = void 0;
+var tslib_1 = require("tslib");
+var classnames_1 = require("@bem-react/classnames");
+var useGenerateMaxWidthCn = function (cn, maxWidth) {
+    if (typeof maxWidth === 'string') {
+        return cn({ maxWidth: maxWidth });
+    }
+    if (typeof maxWidth === 'object') {
+        return (0, classnames_1.classnames)(Object.entries(maxWidth)
+            .reduce(function (acc, _a) {
+            var _b;
+            var _c = tslib_1.__read(_a, 2), key = _c[0], value = _c[1];
+            return "".concat(acc, " ").concat(cn((_b = {}, _b["maxWidth_".concat(key)] = value, _b)));
+        }, '')
+            .trim());
+    }
+    return '';
+};
+exports.useGenerateMaxWidthCn = useGenerateMaxWidthCn;

package/__inner__/cjs/components/DataList/DataList.css

@@ -0,0 +1,67 @@
+.DataList {
+  --scroll-bar-size: 12px;
+}
+  .DataList::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+  .DataList::-webkit-scrollbar-thumb {
+    background-color: var(--color-background-secondary);
+    border-radius: calc(var(--scroll-bar-size) / 2);
+    border: calc(var(--scroll-bar-size) / 4) solid transparent;
+    background-clip: padding-box;
+    border-image: initial;
+    min-block-size: 24px;
+  }
+  .DataList::-webkit-scrollbar-thumb:hover,
+    .DataList::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+  .DataList::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+  .DataList::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+  .DataList::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  .DataList {
+  scroll-behavior: smooth;
+  overflow: hidden auto;
+  max-block-size: 40vb;
+}
+
+  .DataList-Option {
+    cursor: pointer;
+  }
+
+  .DataList-Option:not(.DataList-Option_disabled).DataList-Option_highlighted {
+      background-color: var(--color-background-main-hover);
+    }
+
+  .DataList-Option:not(.DataList-Option_disabled).DataList-Option_outlined {
+      box-shadow: inset var(--shadow-outline-focused);
+    }
+
+  .DataList-Option_disabled {
+      cursor: not-allowed;
+    }
+
+  .DataList-Option_disabled .ListItemText-TextPrimary {
+        color: var(--color-content-disabled);
+      }
+
+  .DataList-IconWrapper {
+    min-inline-size: var(--select-check-icon-size);
+    min-block-size: var(--select-check-icon-size);
+    display: flex;
+  }
+
+  .DataList-IconWrapper_size_s {
+        --select-check-icon-size: 16px;
+      }
+
+  .DataList-IconWrapper_size_m {
+        --select-check-icon-size: 24px;
+      }

package/__inner__/cjs/components/DataList/DataList.d.ts

@@ -0,0 +1,32 @@
+import './DataList.css';
+import React from 'react';
+import type { ReactNode } from 'react';
+import { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import { type ListProps } from '../List';
+import { type PopoverProps } from '../Popover';
+export declare const cnDataList: import("@bem-react/classname").ClassNameFormatter;
+export type DataListPayload = {
+    name?: string;
+    value: string;
+};
+export type DataListProps = Omit<PopoverProps, 'onSelect'> & {
+    /** Имя списка */
+    name?: string;
+    /** Признак по которому компонент будет представлен */
+    open?: boolean;
+    /** Содержимое компонента */
+    children: ReactNode;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Размер компонента */
+    size?: FormElementSizeVariant;
+    /** Выбранная опция */
+    selected?: string;
+    /** Выбранная опция по умолчанию */
+    defaultSelected?: string;
+    /** Функция обратного вызова для выбора значения */
+    onSelect?: (event: React.SyntheticEvent | KeyboardEvent, payload: DataListPayload) => void;
+    /** Свойства компонента List */
+    listProps?: ListProps;
+};
+export declare const DataList: React.ForwardRefExoticComponent<Omit<DataListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/DataList/DataList.js

@@ -0,0 +1,52 @@
+"use strict";
+exports.__esModule = true;
+exports.DataList = exports.cnDataList = void 0;
+var tslib_1 = require("tslib");
+require("./DataList.css");
+var react_1 = tslib_1.__importStar(require("react"));
+var useControlled_1 = require("../../hooks/useControlled");
+var useEventListener_1 = require("../../hooks/useEventListener");
+var useMultiRef_1 = require("../../hooks/useMultiRef");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var isKey_1 = require("../../utils/isKey");
+var List_1 = require("../List");
+var Popover_1 = require("../Popover");
+var constants_1 = require("./constants");
+var DataListProvider_1 = require("./DataListProvider");
+var useDataListNavigation_1 = require("./useDataListNavigation");
+exports.cnDataList = (0, classname_1.cn)('DataList');
+exports.DataList = (0, react_1.forwardRef)(function (inProps, ref) {
+    var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, onSelect = _a.onSelect, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, listProps = _a.listProps, other = tslib_1.__rest(_a, ["open", "size", "name", "children", "anchorRef", "onSelect", "selected", "defaultSelected", "listProps"]);
+    var _d = tslib_1.__read((0, useControlled_1.useControlled)({
+        name: 'DataList',
+        defaultValue: defaultSelected,
+        value: selectedProp,
+        state: 'selected'
+    }), 2), selected = _d[0], setSelected = _d[1];
+    var listRef = (0, react_1.useRef)(null);
+    var handleSelect = function (event, option) {
+        setSelected(option);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, { name: name, value: option });
+    };
+    var _e = (0, useDataListNavigation_1.useDataListNavigation)({
+        name: name,
+        listRef: listRef
+    }), onKeyDown = _e.onKeyDown, currentItem = _e.currentItem, listNavigation = tslib_1.__rest(_e, ["onKeyDown", "currentItem"]);
+    (0, useEventListener_1.useEventListener)({
+        active: open,
+        eventName: 'keydown',
+        element: anchorRef,
+        handler: function (event) {
+            var _a;
+            onKeyDown(event);
+            if ((0, isKey_1.isKey)(event, 'Enter')) {
+                handleSelect(event, ((_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.dataset) === null || _a === void 0 ? void 0 : _a.value) || '');
+            }
+        }
+    });
+    return (react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({ open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
+        react_1["default"].createElement(DataListProvider_1.DataListContext.Provider, { value: tslib_1.__assign({ selected: selected, size: size, onSelect: handleSelect, currentItem: currentItem }, listNavigation) },
+            react_1["default"].createElement(List_1.List, tslib_1.__assign({ as: "ul", size: size }, listProps, { ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: (0, exports.cnDataList)('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
+});
+exports.DataList.displayName = 'DataList';

package/__inner__/cjs/components/DataList/DataListProvider.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+export type DataListSelectPayload = {
+    name?: string;
+    value: string;
+};
+export type DataListContextState = {
+    'data-list': string;
+    currentItem: HTMLElement | null;
+    selected?: string;
+    keyboardHighlight: boolean;
+    size: FormElementSizeVariant;
+    onSelect?: (event: React.SyntheticEvent, option: string) => void;
+    onMouseMove?: (event: React.MouseEvent<HTMLLIElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLLIElement>) => void;
+};
+export declare const DataListContext: React.Context<DataListContextState>;
+export declare const useDataListContext: () => DataListContextState;

package/__inner__/cjs/components/DataList/DataListProvider.js

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.useDataListContext = exports.DataListContext = void 0;
+var react_1 = require("react");
+var constants_1 = require("./constants");
+exports.DataListContext = (0, react_1.createContext)({
+    'data-list': '',
+    currentItem: null,
+    keyboardHighlight: false,
+    size: constants_1.DATA_LIST_DEFAULT_SIZE
+});
+var useDataListContext = function () { return (0, react_1.useContext)(exports.DataListContext); };
+exports.useDataListContext = useDataListContext;

package/__inner__/cjs/components/DataList/components/DataListOption.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { KeyboardEventHandler, MouseEventHandler, HTMLAttributes } from 'react';
+export type DataListOptionProps = {
+    /** Если {true} отображает опцию заблокированной */
+    disabled?: boolean;
+    /** Значение, если оно отличается от содержимого опции */
+    value?: string;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onKeyDown?: KeyboardEventHandler<HTMLLIElement>;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onMouseMove?: MouseEventHandler<HTMLLIElement>;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onMouseLeave?: MouseEventHandler<HTMLLIElement>;
+    /** Содержимое компонента */
+    children: string;
+} & HTMLAttributes<HTMLLIElement>;
+export declare const DataListOption: React.ForwardRefExoticComponent<{
+    /** Если {true} отображает опцию заблокированной */
+    disabled?: boolean | undefined;
+    /** Значение, если оно отличается от содержимого опции */
+    value?: string | undefined;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onKeyDown?: React.KeyboardEventHandler<HTMLLIElement> | undefined;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onMouseMove?: React.MouseEventHandler<HTMLLIElement> | undefined;
+    /** Функция обратного вызова обработчик нажатий на клавиатуре */
+    onMouseLeave?: React.MouseEventHandler<HTMLLIElement> | undefined;
+    /** Содержимое компонента */
+    children: string;
+} & React.HTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;

package/__inner__/cjs/components/DataList/components/DataListOption.js

@@ -0,0 +1,48 @@
+"use strict";
+exports.__esModule = true;
+exports.DataListOption = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var useMultiRef_1 = require("../../../hooks/useMultiRef");
+var getIconSizeToFormElement_1 = require("../../../utils/getIconSizeToFormElement");
+var List_1 = require("../../List");
+var constants_1 = require("../constants");
+var DataList_1 = require("../DataList");
+var DataListProvider_1 = require("../DataListProvider");
+exports.DataListOption = (0, react_1.forwardRef)(function (_a, ref) {
+    var value = _a.value, onMouseDown = _a.onMouseDown, onMouseMoveProp = _a.onMouseMove, onMouseLeaveProp = _a.onMouseLeave, _b = _a.disabled, disabled = _b === void 0 ? constants_1.DATA_LIST_OPTION_DEFAULT_DISABLED : _b, label = _a.children;
+    var optionRef = (0, react_1.useRef)(null);
+    var _c = (0, DataListProvider_1.useDataListContext)(), size = _c.size, currentItem = _c.currentItem, _d = _c.selected, selected = _d === void 0 ? '' : _d, keyboardHighlight = _c.keyboardHighlight, onSelect = _c.onSelect, onMouseMove = _c.onMouseMove, onMouseLeave = _c.onMouseLeave, dataListName = _c["data-list"];
+    var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
+    var isSelected = (value || label) === selected;
+    var isHighlighted = !!currentItem && currentItem === optionRef.current;
+    var handleClick = function (event) {
+        var _a;
+        if (disabled) {
+            return;
+        }
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, ((_a = event.currentTarget.dataset) === null || _a === void 0 ? void 0 : _a.value) || '');
+    };
+    var handleMouseMove = function (event) {
+        onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event);
+        onMouseMoveProp === null || onMouseMoveProp === void 0 ? void 0 : onMouseMoveProp(event);
+    };
+    var handleMouseLeave = function (event) {
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event);
+        onMouseLeaveProp === null || onMouseLeaveProp === void 0 ? void 0 : onMouseLeaveProp(event);
+    };
+    var handleMouseDown = function (event) {
+        event.preventDefault();
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+    };
+    return (react_1["default"].createElement(List_1.ListItem, { role: "option", ref: (0, useMultiRef_1.useMultiRef)([optionRef, ref]), "data-list": dataListName, "data-value": value || label, "aria-selected": isSelected, "aria-disabled": disabled, onClick: handleClick, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: (0, DataList_1.cnDataList)('Option', {
+            disabled: disabled,
+            highlighted: !disabled && isHighlighted && !keyboardHighlight,
+            outlined: !disabled && isHighlighted && keyboardHighlight
+        }) },
+        react_1["default"].createElement(List_1.ListItemText, { className: (0, DataList_1.cnDataList)('Text', { disabled: disabled }), primary: label }),
+        react_1["default"].createElement("div", { className: (0, DataList_1.cnDataList)('IconWrapper', { size: iconSize }) }, isSelected && (react_1["default"].createElement(List_1.ListItemIcon, null,
+            react_1["default"].createElement(icons_1.TickIcon, { size: iconSize }))))));
+});
+exports.DataListOption.displayName = 'DataListOption';

package/__inner__/cjs/components/DataList/components/index.d.ts

@@ -0,0 +1 @@
+export * from './DataListOption';

package/__inner__/cjs/components/DataList/components/index.js

@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DataListOption"), exports);

package/__inner__/cjs/components/DataList/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const DATA_LIST_DEFAULT_SIZE = "m";
+export declare const DATA_LIST_DEFAULT_OPEN = false;
+export declare const DATA_LIST_OPTION_DEFAULT_DISABLED = false;

package/__inner__/cjs/components/DataList/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+exports.__esModule = true;
+exports.DATA_LIST_OPTION_DEFAULT_DISABLED = exports.DATA_LIST_DEFAULT_OPEN = exports.DATA_LIST_DEFAULT_SIZE = void 0;
+exports.DATA_LIST_DEFAULT_SIZE = 'm';
+exports.DATA_LIST_DEFAULT_OPEN = false;
+exports.DATA_LIST_OPTION_DEFAULT_DISABLED = false;

package/__inner__/cjs/components/DataList/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataList';
+export * from './components';

package/__inner__/cjs/components/DataList/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DataList"), exports);
+tslib_1.__exportStar(require("./components"), exports);

package/__inner__/cjs/components/DataList/useDataListNavigation.d.ts

@@ -0,0 +1,14 @@
+import type { MouseEvent, RefObject } from 'react';
+export type UseListNavigationProps = {
+    name?: string;
+    listRef?: RefObject<HTMLUListElement>;
+};
+export type UseListNavigationValue = {
+    'data-list': string;
+    currentItem: HTMLLIElement | null;
+    keyboardHighlight: boolean;
+    onKeyDown: (event: KeyboardEvent) => void;
+    onMouseMove: (event: MouseEvent<HTMLLIElement>) => void;
+    onMouseLeave: (event: MouseEvent<HTMLLIElement>) => void;
+};
+export declare function useDataListNavigation({ name: nameProp, listRef, }?: UseListNavigationProps): UseListNavigationValue;