@moysklad/uikit 28.1.0 → 31.20.0

package/dist/components/Button/Button.js

@@ -1,6 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createElement } from "react";
 import { cn } from "../../common/css/cn.js";
+import { ClickableTag, polymorphicClickableRef } from "../_shared/utils/polymorphicClickableTypes.js";
 import { Loader12Icon, Loader20Icon } from "../../icon/index.js";
 import Button_module from "./Button.module.js";
 const ButtonSize = {
@@ -34,29 +35,37 @@ const getFilledColorClass = (color)=>{
             return Button_module.filledGrey;
     }
 };
-const Button = /*#__PURE__*/ forwardRef(({ testId, type = 'button', variant = ButtonVariants.PRIMARY, color, disabled, className: classNameProp, children, size = ButtonSize.L, isLoading = false, onClick, isIconButton = false, stretch = false, withHorisontalPadding = false, ...rest }, ref)=>{
+const Button = polymorphicClickableRef((props, ref)=>{
+    const { testId, as: elementProp = ClickableTag.button, type, variant = ButtonVariants.PRIMARY, color, disabled, className: classNameProp, children, size = ButtonSize.L, isLoading = false, onClick, isIconButton = false, stretch = false, withHorisontalPadding = false, noPadding = false, ...rest } = props;
+    const element = elementProp;
     const LoaderIcon = LoaderBySizeMap[size];
-    const className = cn(Button_module.button, Button_module[variant], Button_module[size], variant === ButtonVariants.FILLED && getFilledColorClass(color), isLoading ? Button_module.isLoading : '', isIconButton && Button_module.iconButton, stretch && Button_module.stretch, classNameProp, withHorisontalPadding && Button_module.withHorisontalPadding);
+    const isAnchor = element === ClickableTag.a;
+    const className = cn(Button_module.button, Button_module[variant], Button_module[size], variant === ButtonVariants.FILLED && getFilledColorClass(color), variant === ButtonVariants.FRAMELESS && noPadding && Button_module.noPadding, isLoading ? Button_module.isLoading : '', isIconButton && Button_module.iconButton, stretch && Button_module.stretch, classNameProp, withHorisontalPadding && Button_module.withHorisontalPadding);
     const handleClick = (e)=>{
-        if (isLoading || disabled) return;
+        if (isLoading || disabled) {
+            if (isAnchor) e.preventDefault();
+            return;
+        }
         onClick?.(e);
     };
-    return /*#__PURE__*/ jsxs("button", {
+    const tagSpecificProps = isAnchor ? {
+        href: disabled ? void 0 : rest.href,
+        'aria-disabled': disabled || void 0
+    } : {
+        type: type ?? 'button',
+        disabled
+    };
+    return /*#__PURE__*/ createElement(element, {
         ...rest,
-        disabled: disabled,
-        ref: ref,
-        "data-test-id": testId,
-        type: type,
-        className: className,
-        onClick: handleClick,
-        children: [
-            children,
-            isLoading && !disabled ? /*#__PURE__*/ jsx("div", {
-                className: Button_module.spinner,
-                children: /*#__PURE__*/ jsx(LoaderIcon, {})
-            }) : null
-        ]
-    });
+        ...tagSpecificProps,
+        ref,
+        'data-test-id': testId,
+        className,
+        onClick: handleClick
+    }, children, isLoading && !disabled ? /*#__PURE__*/ jsx("div", {
+        className: Button_module.spinner,
+        children: /*#__PURE__*/ jsx(LoaderIcon, {})
+    }) : null);
 });
 Button.displayName = 'Button';
 export { Button, ButtonColor, ButtonSize, ButtonVariants };

package/dist/components/Button/Button.module.js

@@ -14,6 +14,7 @@ const Button_module = {
     additional: "additional-Ftulks",
     frameless: "frameless-gZ67sX",
     withHorisontalPadding: "withHorisontalPadding-DDBSv8",
+    noPadding: "noPadding-Ja7zyG",
     secondary: "secondary-bjc5zI",
     filled: "filled-WTubUm",
     filledGrey: "filledGrey-cyhUUI",

package/dist/components/Button/Button_module.css

@@ -10,6 +10,7 @@
   --cb-button-active-background: var(--cb-button-background);
   --cb-button-disabled-background: var(--button-primary-disabled, #d3d8ddb3);
   background: var(--cb-button-background);
+  width: fit-content;
   color: var(--cb-button-color);
   border: none;
   align-items: center;
@@ -17,6 +18,7 @@
   font-family: ALS Hauss, sans-serif;
   font-size: 14px;
   line-height: 20px;
+  text-decoration: none;
   display: flex;
   position: relative;
 }
@@ -36,7 +38,7 @@
   color: var(--cb-button-active-color);
 }
 
-.button-UGhzQm:disabled {
+.button-UGhzQm:disabled, .button-UGhzQm[aria-disabled="true"] {
   cursor: initial;
 }
 
@@ -63,7 +65,7 @@
   color: #0000;
 }
 
-.isLoading-IoL_rp:hover:not(:disabled) > :not(.spinner-MFPKSD), .isLoading-IoL_rp:not(:disabled) > :not(.spinner-MFPKSD) {
+.isLoading-IoL_rp:hover:not(:disabled, [aria-disabled="true"]) > :not(.spinner-MFPKSD), .isLoading-IoL_rp:not(:disabled, [aria-disabled="true"]) > :not(.spinner-MFPKSD) {
   opacity: 0;
 }
 
@@ -115,12 +117,12 @@
   outline: none;
 }
 
-.primary-gpQ7Mi:disabled {
+.primary-gpQ7Mi:disabled, .primary-gpQ7Mi[aria-disabled="true"] {
   background: var(--cb-button-disabled-background, #f5f5f5);
   color: var(--text-tertiary, #9fa7af);
 }
 
-.primary-gpQ7Mi:disabled svg path {
+.primary-gpQ7Mi:disabled svg path, .primary-gpQ7Mi[aria-disabled="true"] svg path {
   stroke: var(--elements-inactive, #9fa7af);
 }
 
@@ -139,12 +141,12 @@
   outline: none;
 }
 
-.accent-eZImES:disabled {
+.accent-eZImES:disabled, .accent-eZImES[aria-disabled="true"] {
   background: var(--cb-button-disabled-background, #f5f5f5);
   color: var(--text-tertiary, #9fa7af);
 }
 
-.accent-eZImES:disabled svg path {
+.accent-eZImES:disabled svg path, .accent-eZImES[aria-disabled="true"] svg path {
   stroke: var(--elements-inactive, #9fa7af);
 }
 
@@ -181,14 +183,14 @@
   outline: 1px solid var(--cb-button-active-color);
 }
 
-.additional-Ftulks:disabled {
+.additional-Ftulks:disabled, .additional-Ftulks[aria-disabled="true"] {
   outline: 1px solid var(--border-normal, #d1d6df);
   outline-offset: -1px;
   background: var(--button-secondary-normal, #fff);
   color: var(--text-tertiary, #9fa7af);
 }
 
-.additional-Ftulks:disabled svg path {
+.additional-Ftulks:disabled svg path, .additional-Ftulks[aria-disabled="true"] svg path {
   stroke: var(--elements-inactive, #9fa7af);
 }
 
@@ -222,11 +224,11 @@
   outline: 0;
 }
 
-.frameless-gZ67sX:disabled {
+.frameless-gZ67sX:disabled, .frameless-gZ67sX[aria-disabled="true"] {
   color: var(--text-tertiary, #9fa7af);
 }
 
-.frameless-gZ67sX:disabled svg path {
+.frameless-gZ67sX:disabled svg path, .frameless-gZ67sX[aria-disabled="true"] svg path {
   stroke: var(--elements-inactive, #9fa7af);
 }
 
@@ -235,6 +237,10 @@
   padding-right: 12px;
 }
 
+.noPadding-Ja7zyG {
+  padding: 0;
+}
+
 .secondary-bjc5zI {
   --cb-button-color: var(--text-primary, #091739);
   --cb-button-background: var(--button-secondary-normal, #fff);
@@ -269,12 +275,12 @@
   box-shadow: 0 0 4px 0 var(--product-blue-400, #7eb4ff);
 }
 
-.secondary-bjc5zI:disabled {
+.secondary-bjc5zI:disabled, .secondary-bjc5zI[aria-disabled="true"] {
   background: var(--cb-button-disabled-background, #f5f5f5);
   color: var(--text-tertiary, #9fa7af);
 }
 
-.secondary-bjc5zI:disabled svg path {
+.secondary-bjc5zI:disabled svg path, .secondary-bjc5zI[aria-disabled="true"] svg path {
   stroke: var(--elements-inactive, #9fa7af);
 }
 
@@ -310,12 +316,12 @@
   box-shadow: 0 0 4px 0 var(--product-blue-400, #7eb4ff);
 }
 
-.filled-WTubUm:disabled {
+.filled-WTubUm:disabled, .filled-WTubUm[aria-disabled="true"] {
   background: var(--cb-button-disabled-background, #f5f5f5);
   color: var(--elements-disable, #d1d6df);
 }
 
-.filled-WTubUm:disabled svg path {
+.filled-WTubUm:disabled svg path, .filled-WTubUm[aria-disabled="true"] svg path {
   stroke: var(--elements-disable, #d1d6df);
 }
 

package/dist/components/Carousel/Carousel.js

@@ -22,15 +22,16 @@ const Carousel = ({ isVisible, sources, onClose, startIndex = 0, testId, portalE
         startIndex
     ]);
     const sourcesLength = sources.length;
-    const withToolbar = sourcesLength > 1;
     const handleClickPrev = ()=>setCurrentIndex((index)=>0 === index ? sourcesLength - 1 : index - 1);
     const handleClickNext = ()=>setCurrentIndex((index)=>(index + 1) % sourcesLength);
     const handleClose = ()=>{
         onClose();
     };
+    const isToolbarVisible = sourcesLength > 1;
+    const isArrowNavigationEnabled = isVisible && isToolbarVisible;
     useKeyDownListener('Escape', handleClose, isVisible);
-    useKeyDownListener('ArrowLeft', handleClickPrev, isVisible);
-    useKeyDownListener('ArrowRight', handleClickNext, isVisible);
+    useKeyDownListener('ArrowLeft', handleClickPrev, isArrowNavigationEnabled);
+    useKeyDownListener('ArrowRight', handleClickNext, isArrowNavigationEnabled);
     useTabNavigation(ref, isVisible);
     if (!isVisible || 0 === sourcesLength) return null;
     const label = toolbarLabel ? toolbarLabel(currentIndex, sources.length) : `${currentIndex + 1} из ${sources.length}`;
@@ -75,7 +76,7 @@ const Carousel = ({ isVisible, sources, onClose, startIndex = 0, testId, portalE
                     ]
                 })
             }),
-            withToolbar && /*#__PURE__*/ jsx(Toolbar, {
+            isToolbarVisible && /*#__PURE__*/ jsx(Toolbar, {
                 label: label,
                 onPrevClick: handleClickPrev,
                 onNextClick: handleClickNext,

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 export type { CheckboxProps } from './Checkbox.types';
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange" | "children" | "onClick" | "type"> & import("../Indicator/Indicator.types").IndicatorProps & import("../..").IHasTestId & import("../..").IHasTabIndex & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "onClick" | "type"> & import("../Indicator/Indicator.types").IndicatorProps & import("../..").IHasTestId & import("../..").IHasTabIndex & {
     className?: string;
     label?: string;
     children?: import("react").ReactNode;

package/dist/components/Checkbox/Checkbox.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 import { cn } from "../../common/css/cn.js";
 import { getTestId } from "../../common/testId/index.js";
+import { Info } from "../_shared/Info/Info.js";
 import { Indicator } from "../Indicator/Indicator.js";
 import { getIndicatorProps } from "../Indicator/Indicator.helpers.js";
-import { Info } from "../Info/Info.js";
 import { useControlledState } from "../../hooks/useControlledState/index.js";
 import { useId } from "../../hooks/useId/index.js";
 import { CheckboxContent } from "./components/CheckboxContent.js";

package/dist/components/Chip/Chip.helpers.js

@@ -157,10 +157,10 @@ const resolveProps = (props)=>{
             legacy
         };
     }
-    const { variant = 'regular', size = 'regular', disabled = false, label, leadingIcon, onPress, selected, onSelectedChange, trailingIcon, trailingIconBehavior, onTrailingIconClick, trailingIconHint, indicatorMode, count, novelty, clearable, onClear, clearIconHint, constrainWidth, maxWidthPx, hintZIndex } = props;
+    const { variant = 'regular', size = 'regular', disabled = false, label, labelColorToken, className, leadingIcon, tabIndex, onPress, selected, onSelectedChange, trailingIcon, trailingIconBehavior, onTrailingIconClick, trailingIconHint, indicatorMode, count, novelty, clearable, onClear, clearIconHint, constrainWidth, maxWidthPx, hintZIndex } = props;
     const clickHandler = (e)=>{
         onPress?.(e);
-        onSelectedChange(!selected);
+        onSelectedChange?.(!selected);
     };
     const indicators = resolveIndicators({
         size,
@@ -193,7 +193,10 @@ const resolveProps = (props)=>{
         disabled,
         selected,
         label,
+        labelColorToken,
+        className,
         leadingIcon,
+        tabIndex,
         trailing,
         indicators,
         clear,

package/dist/components/Chip/Chip.js

@@ -128,7 +128,7 @@ const Chip = /*#__PURE__*/ forwardRef((props, ref)=>{
             ]
         });
     }
-    const { variant, size, disabled, selected, clickHandler, label, leadingIcon, trailing, indicators, clear, textBehavior, hintZIndex } = resolved;
+    const { variant, size, disabled, selected, clickHandler, label, labelColorToken, className, leadingIcon, tabIndex, trailing, indicators, clear, textBehavior, hintZIndex } = resolved;
     const isCompact = 'compact' === size;
     const isTrailingButton = 'button' === trailing.mode;
     const isClearButton = 'button' === clear.mode;
@@ -163,7 +163,8 @@ const Chip = /*#__PURE__*/ forwardRef((props, ref)=>{
             disabled,
             hasLeading,
             hasTrailing,
-            constrainWidth: textBehavior.constrainWidth
+            constrainWidth: textBehavior.constrainWidth,
+            className
         });
         const wrapperStyle = getConstrainedStyle(textBehavior);
         const mainButtonClassName = isTrailingButton ? Chip_module.chipButton : cn(Chip_module.chipButton, leadingIcon && Chip_module.hasLeading);
@@ -179,10 +180,12 @@ const Chip = /*#__PURE__*/ forwardRef((props, ref)=>{
                     onClick: clickHandler,
                     className: mainButtonClassName,
                     disabled: disabled,
+                    tabIndex: tabIndex,
                     children: [
                         leadingIconNode,
                         /*#__PURE__*/ jsx(ChipLabel, {
                             label: label,
+                            colorToken: labelColorToken,
                             isCompact: isCompact,
                             textBehavior: textBehavior,
                             hintZIndex: hintZIndex
@@ -220,7 +223,8 @@ const Chip = /*#__PURE__*/ forwardRef((props, ref)=>{
         isCompact,
         hasLeading,
         hasTrailing,
-        constrainWidth: textBehavior.constrainWidth
+        constrainWidth: textBehavior.constrainWidth,
+        className
     });
     const rootStyle = getConstrainedStyle(textBehavior);
     return /*#__PURE__*/ jsxs(ChipRoot, {
@@ -231,10 +235,12 @@ const Chip = /*#__PURE__*/ forwardRef((props, ref)=>{
         disabled: disabled,
         onClick: clickHandler,
         buttonRef: ref,
+        tabIndex: tabIndex,
         children: [
             leadingIconNode,
             /*#__PURE__*/ jsx(ChipLabel, {
                 label: label,
+                colorToken: labelColorToken,
                 isCompact: isCompact,
                 textBehavior: textBehavior,
                 hintZIndex: hintZIndex

package/dist/components/Chip/Chip.legacy_module.css

@@ -17,7 +17,7 @@
 }
 
 .chip-sfyie1:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
   background-color: var(--elements-chips-normal, #f1f4f9);
 }
 
@@ -47,7 +47,7 @@
 }
 
 .active-uGgP1c:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
   background-color: var(--elements-chips-normal-current, #dff0fe);
 }
 

package/dist/components/Chip/Chip.types.d.ts

@@ -1,5 +1,6 @@
 import type { ButtonHTMLAttributes, HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
-import type { IHasTestId, ValueOf } from '../../common/types';
+import type { IHasTabIndex, IHasTestId, ValueOf } from '../../common/types';
+import type { TextColorToken } from '../Text/Text';
 /**
  * Этот тип сейчас необходим для поддержки legacy-поведения.
  * Все они уже фактически используются.
@@ -73,10 +74,12 @@ type ChipAppearanceProps = {
 };
 type ChipNewSelectionProps = {
     selected: boolean;
-    onSelectedChange: (nextSelected: boolean) => void;
+    onSelectedChange?: (nextSelected: boolean) => void;
 };
-type ChipNewContentProps = {
+type ChipNewContentProps = IHasTabIndex & {
     label: string;
+    labelColorToken?: TextColorToken;
+    className?: string;
     leadingIcon?: ReactNode;
 };
 type ChipClearProps = {
@@ -169,6 +172,7 @@ export interface ChipLegacyProps extends ChipButtonLegacyCompatProps {
     onSelectedChange?: never;
     onPress?: never;
     label?: never;
+    labelColorToken?: never;
     leadingIcon?: never;
     trailingIcon?: never;
     trailingIconBehavior?: never;
@@ -259,9 +263,11 @@ export type ChipTextBehaviorResolved = {
 export type Resolved = (ResolvedBase & {
     mode: 'legacy';
     legacy: LegacyResolved;
-}) | (ResolvedBase & {
+}) | (ResolvedBase & IHasTabIndex & {
     mode: 'new';
     label: string;
+    labelColorToken?: TextColorToken;
+    className?: string;
     leadingIcon?: ReactNode;
     trailing: ResolvedTrailing;
     indicators: ResolvedIndicators;

package/dist/components/Chip/Chip_module.css

@@ -12,7 +12,7 @@
 }
 
 .chip-m4AltR:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
 }
 
 .chip-m4AltR:disabled {
@@ -126,7 +126,7 @@
 }
 
 .wrapper-BRrIHY:has(.chipButton-_9Yan_:focus-visible) {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
 }
 
 .chipButton-_9Yan_ {
@@ -143,7 +143,7 @@
 }
 
 .chipButton-_9Yan_:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
 }
 
 .trailingButton-D8uCaI {
@@ -163,7 +163,7 @@
 }
 
 .trailingButton-D8uCaI:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
 }
 
 .clearButton-fN81yO {
@@ -183,7 +183,7 @@
 }
 
 .clearButton-fN81yO:focus-visible {
-  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  box-shadow: inset 0 0 0 1px var(--border-focused, #091739);
 }
 
 .rightActions-f8Q4y9 {

package/dist/components/Chip/components/ChipLabel.d.ts

@@ -1,9 +1,11 @@
+import { type TextColorToken } from '../../Text/Text';
 import type { ChipTextBehaviorResolved } from '../Chip.types';
 type ChipLabelProps = {
     label: string;
+    colorToken?: TextColorToken;
     isCompact: boolean;
     textBehavior: ChipTextBehaviorResolved;
     hintZIndex?: number;
 };
-export declare const ChipLabel: ({ label, isCompact, textBehavior, hintZIndex, }: ChipLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChipLabel: ({ label, colorToken, isCompact, textBehavior, hintZIndex, }: ChipLabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Chip/components/ChipLabel.js

@@ -4,19 +4,21 @@ import { cn } from "../../../common/index.js";
 import { Hint } from "../../Hint/Hint.js";
 import { Text, TextColor, TextVariant } from "../../Text/Text.js";
 import Chip_module from "../Chip.module.js";
-const ChipLabel = ({ label, isCompact, textBehavior, hintZIndex })=>{
+const ChipLabel = ({ label, colorToken, isCompact, textBehavior, hintZIndex })=>{
     const labelParagraphRef = useRef(null);
     const [isTruncated, setIsTruncated] = useState(false);
+    const maxWidthPx = textBehavior.constrainWidth ? textBehavior.maxWidthPx : void 0;
     useLayoutEffect(()=>{
         if (!labelParagraphRef.current) return void setIsTruncated(false);
         setIsTruncated(labelParagraphRef.current.scrollWidth > labelParagraphRef.current.clientWidth);
     }, [
         label,
-        textBehavior.constrainWidth ? textBehavior.maxWidthPx : void 0
+        maxWidthPx
     ]);
     const text = /*#__PURE__*/ jsx(Text, {
         variant: isCompact ? TextVariant.caption : TextVariant.body,
         ref: labelParagraphRef,
+        colorToken: colorToken,
         className: cn(Chip_module.label, Chip_module.ellipsis),
         children: label
     });

package/dist/components/Chip/components/ChipMainButton.d.ts

@@ -1,11 +1,10 @@
 import { type CSSProperties, type MouseEvent, type ReactNode } from 'react';
-type ChipMainButtonProps = {
+import type { IHasTabIndex } from '../../../common/types';
+export declare const ChipMainButton: import("react").ForwardRefExoticComponent<IHasTabIndex & {
     testId?: string;
     className?: string;
     disabled: boolean;
     onClick: (e: MouseEvent<HTMLButtonElement>) => void;
     style?: CSSProperties;
     children: ReactNode;
-};
-export declare const ChipMainButton: import("react").ForwardRefExoticComponent<ChipMainButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Chip/components/ChipMainButton.js

@@ -1,12 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-const ChipMainButton = /*#__PURE__*/ forwardRef(({ testId, className, disabled, onClick, style, children }, ref)=>/*#__PURE__*/ jsx("button", {
+const ChipMainButton = /*#__PURE__*/ forwardRef(({ testId, className, disabled, onClick, style, tabIndex, children }, ref)=>/*#__PURE__*/ jsx("button", {
         "data-test-id": testId,
         ref: ref,
         onClick: onClick,
         className: className,
         disabled: disabled,
         style: style,
+        tabIndex: tabIndex,
         type: "button",
         children: children
     }));

package/dist/components/Chip/components/ChipRoot.d.ts

@@ -1,11 +1,12 @@
 import type { CSSProperties, ForwardedRef, MouseEvent, ReactNode } from 'react';
+import type { IHasTabIndex } from '../../../common/types';
 type ChipRootProps = {
     mode: 'group';
     testId?: string;
     className?: string;
     style?: CSSProperties;
     children: ReactNode;
-} | {
+} | (IHasTabIndex & {
     mode: 'single';
     testId?: string;
     className?: string;
@@ -14,6 +15,6 @@ type ChipRootProps = {
     onClick: (e: MouseEvent<HTMLButtonElement>) => void;
     buttonRef?: ForwardedRef<HTMLButtonElement>;
     children: ReactNode;
-};
+});
 export declare const ChipRoot: (props: ChipRootProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Chip/components/ChipRoot.js

@@ -11,7 +11,7 @@ const ChipRoot = (props)=>{
             children: children
         });
     }
-    const { testId, className, style, disabled, onClick, buttonRef, children } = props;
+    const { testId, className, style, disabled, onClick, buttonRef, tabIndex, children } = props;
     return /*#__PURE__*/ jsx(ChipMainButton, {
         testId: testId,
         ref: buttonRef,
@@ -19,6 +19,7 @@ const ChipRoot = (props)=>{
         className: className,
         disabled: disabled,
         style: style,
+        tabIndex: tabIndex,
         children: children
     });
 };

package/dist/components/DateRange/ArrowButton/ArrowButton.module.js

@@ -0,0 +1,6 @@
+import "./ArrowButton_module.css";
+const ArrowButton_module = {
+    arrowButton: "arrowButton-jxtNrM",
+    disabled: "disabled-xcLgOR"
+};
+export default ArrowButton_module;

package/dist/components/DateRange/ArrowButton/ArrowButton_module.css

@@ -0,0 +1,26 @@
+.arrowButton-jxtNrM {
+  background: none;
+  border: none;
+  border-radius: 4px;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.arrowButton-jxtNrM:focus-visible:not(.disabled-xcLgOR) {
+  outline: 1px solid var(--border-focused, #091739);
+}
+
+.arrowButton-jxtNrM.disabled-xcLgOR svg path {
+  stroke: var(--elements-disable, #d1d6df);
+}
+
+.arrowButton-jxtNrM:not(.disabled-xcLgOR) {
+  cursor: pointer;
+}
+

package/dist/components/DateRange/ArrowButton/index.d.ts

@@ -0,0 +1,8 @@
+import type { KeyboardEvent, PropsWithChildren } from 'react';
+interface ArrowButtonProps extends PropsWithChildren {
+    disabled?: boolean;
+    onClick?: () => void;
+    onPressTab?: (event: KeyboardEvent<HTMLButtonElement>) => void;
+}
+export declare const ArrowButton: (props: ArrowButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/ArrowButton/index.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../common/css/index.js";
+import { KEYBOARD_ACTIVATION_KEYS } from "../consts.js";
+import ArrowButton_module from "./ArrowButton.module.js";
+const ArrowButton = (props)=>{
+    const handleKeyDown = (event)=>{
+        event.stopPropagation();
+        if ('Tab' === event.key) return void props.onPressTab?.(event);
+        if (KEYBOARD_ACTIVATION_KEYS.includes(event.key)) props.onClick?.();
+    };
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: cn(ArrowButton_module.arrowButton, props.disabled && ArrowButton_module.disabled),
+        disabled: props.disabled,
+        onMouseDown: (event)=>{
+            event.stopPropagation();
+            props.onClick?.();
+        },
+        onKeyDown: handleKeyDown,
+        children: props.children
+    });
+};
+export { ArrowButton };

package/dist/components/DateRange/Calendar/index.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { VirtuosoHandle } from 'react-virtuoso';
+import type { DateRangeValue } from '../types';
+interface CalendarProps {
+    virtuosoRef?: RefObject<VirtuosoHandle>;
+    minDate: Date;
+    maxDate: Date;
+    value: DateRangeValue;
+    onSelectDate?: (date: Date) => void;
+}
+export declare const Calendar: (props: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateRange/Calendar/index.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { CalendarVariant } from "../consts.js";
+import { MonthList } from "../MonthList/index.js";
+import { YearsList } from "../YearsList/index.js";
+const Calendar = (props)=>{
+    const showYearsCalendar = props.value.type === CalendarVariant.month;
+    if (showYearsCalendar) return /*#__PURE__*/ jsx(YearsList, {
+        virtuosoRef: props.virtuosoRef,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        value: props.value,
+        onSelectDate: props.onSelectDate
+    });
+    return /*#__PURE__*/ jsx(MonthList, {
+        virtuosoRef: props.virtuosoRef,
+        minDate: props.minDate,
+        maxDate: props.maxDate,
+        onSelectDate: props.onSelectDate,
+        value: props.value
+    });
+};
+export { Calendar };