@moysklad/uikit 28.1.0

package/dist/components/Chip/Chip.js

@@ -0,0 +1,248 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/css/cn.js";
+import { getTestId } from "../../common/testId/index.js";
+import { Dot, DotColor, DotVariant } from "../Dot/Dot.js";
+import { Text, TextColor } from "../Text/Text.js";
+import { ChipClearButton } from "./components/ChipClearButton.js";
+import { ChipLabel } from "./components/ChipLabel.js";
+import { ChipMainButton } from "./components/ChipMainButton.js";
+import { ChipRoot } from "./components/ChipRoot.js";
+import { ChipTrailingButton } from "./components/ChipTrailingButton.js";
+import { resolveProps } from "./Chip.helpers.js";
+import Chip_legacy_module from "./Chip.legacy.module.js";
+import Chip_module from "./Chip.module.js";
+const INDICATOR_MAX_VALUE = 99;
+const formatIndicatorValue = (count)=>{
+    if (count > INDICATOR_MAX_VALUE) return `${INDICATOR_MAX_VALUE}+`;
+    return count;
+};
+const renderIndicators = (indicators, opts)=>{
+    const { testId } = opts;
+    if ('none' === indicators.mode) return null;
+    if ('noveltyDot' === indicators.mode) return /*#__PURE__*/ jsx(Dot, {
+        testId: testId,
+        color: DotColor.RED,
+        className: Chip_module.tomatoDot
+    });
+    if ('noveltyNumber' === indicators.mode) return /*#__PURE__*/ jsx(Dot, {
+        testId: testId,
+        variant: DotVariant.NUMBER,
+        value: indicators.count,
+        max: INDICATOR_MAX_VALUE,
+        color: DotColor.RED,
+        className: Chip_module.tomatoNumber
+    });
+    if ('count' === indicators.mode) return /*#__PURE__*/ jsx(Text.Body, {
+        "data-test-id": testId,
+        className: Chip_module.indicatorCount,
+        children: formatIndicatorValue(indicators.count)
+    });
+    return /*#__PURE__*/ jsxs("span", {
+        "data-test-id": testId,
+        className: Chip_module.indicatorCountDot,
+        children: [
+            /*#__PURE__*/ jsx(Text.Body, {
+                className: Chip_module.indicatorCount,
+                children: formatIndicatorValue(indicators.count)
+            }),
+            /*#__PURE__*/ jsx(Dot, {
+                color: DotColor.RED,
+                className: Chip_module.tomatoDot
+            })
+        ]
+    });
+};
+const getConstrainedStyle = (textBehavior, baseStyle)=>{
+    if (!textBehavior.constrainWidth) return baseStyle;
+    return {
+        ...baseStyle ?? {},
+        '--chip-max-width': `${textBehavior.maxWidthPx}px`
+    };
+};
+const getRootClassName = (args)=>{
+    const { kind, variant, selected, isCompact, hasLeading, hasTrailing, constrainWidth, disabled, className } = args;
+    return cn('wrapper' === kind ? Chip_module.wrapper : Chip_module.chip, Chip_module[variant], constrainWidth && Chip_module.constrained, selected && Chip_module.selected, isCompact && Chip_module.compact, hasLeading && Chip_module.hasLeading, hasTrailing && Chip_module.hasTrailing, 'wrapper' === kind && disabled && Chip_module.disabled, className);
+};
+const renderLeadingIcon = (args)=>{
+    const { leadingIcon, testId } = args;
+    if (!leadingIcon) return null;
+    return /*#__PURE__*/ jsx("span", {
+        className: Chip_module.icon,
+        "data-test-id": testId,
+        children: leadingIcon
+    });
+};
+const renderTrailingPartOfChip = (args)=>{
+    const { trailing, testId } = args;
+    if ('partOfChip' !== trailing.mode) return null;
+    return /*#__PURE__*/ jsx("span", {
+        className: Chip_module.icon,
+        "data-test-id": testId,
+        children: trailing.icon
+    });
+};
+const Chip = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { testId } = props;
+    const resolved = resolveProps(props);
+    if ('legacy' === resolved.mode) {
+        const { isActive, children, className, overrideActiveClass, isTextEllipsis, icon, iconPosition, bodyTextClassName, disabled, small, clickHandler, buttonCompatProps } = resolved.legacy;
+        const legacyRootClassName = cn(Chip_legacy_module.chip, isActive && (overrideActiveClass || Chip_legacy_module.active), small && Chip_legacy_module.small, className);
+        const legacyTextClassName = cn(isTextEllipsis && Chip_legacy_module.ellipsis, bodyTextClassName);
+        return /*#__PURE__*/ jsxs("button", {
+            "data-test-id": testId,
+            ref: ref,
+            onClick: clickHandler,
+            className: legacyRootClassName,
+            disabled: disabled,
+            tabIndex: buttonCompatProps.tabIndex,
+            style: buttonCompatProps.style,
+            onFocus: buttonCompatProps.onFocus,
+            onBlur: buttonCompatProps.onBlur,
+            onKeyDown: buttonCompatProps.onKeyDown,
+            onMouseEnter: buttonCompatProps.onMouseEnter,
+            onMouseLeave: buttonCompatProps.onMouseLeave,
+            onPointerEnter: buttonCompatProps.onPointerEnter,
+            onPointerLeave: buttonCompatProps.onPointerLeave,
+            onMouseMove: buttonCompatProps.onMouseMove,
+            onMouseOver: buttonCompatProps.onMouseOver,
+            title: buttonCompatProps.title,
+            "data-active": buttonCompatProps['data-active'],
+            "data-status": buttonCompatProps['data-status'],
+            "data-selected": buttonCompatProps['data-selected'],
+            "aria-describedby": buttonCompatProps['aria-describedby'],
+            "aria-label": buttonCompatProps['aria-label'],
+            "aria-labelledby": buttonCompatProps['aria-labelledby'],
+            children: [
+                icon && 'start' === iconPosition && icon,
+                small ? /*#__PURE__*/ jsx(Text.Caption, {
+                    className: legacyTextClassName,
+                    colorToken: disabled ? TextColor.tertiary : TextColor.primary,
+                    children: children
+                }) : /*#__PURE__*/ jsx(Text.Body, {
+                    className: legacyTextClassName,
+                    colorToken: disabled ? TextColor.secondary : TextColor.primary,
+                    children: children
+                }),
+                icon && 'end' === iconPosition && icon
+            ]
+        });
+    }
+    const { variant, size, disabled, selected, clickHandler, label, leadingIcon, trailing, indicators, clear, textBehavior, hintZIndex } = resolved;
+    const isCompact = 'compact' === size;
+    const isTrailingButton = 'button' === trailing.mode;
+    const isClearButton = 'button' === clear.mode;
+    const isGrouped = isTrailingButton || isClearButton;
+    const hasLeading = Boolean(leadingIcon);
+    const hasTrailing = isTrailingButton || isClearButton || 'partOfChip' === trailing.mode;
+    const wrapperTestId = testId;
+    const chipBtnTestId = getTestId(testId, 'chip-button');
+    const leadingIconTestId = getTestId(testId, 'chip-leading-icon');
+    const trailingBtnTestId = getTestId(testId, 'chip-trailing-button');
+    const trailingIconTestId = getTestId(testId, 'chip-trailing-icon');
+    const trailingHintTestId = getTestId(testId, 'chip-trailing-hint');
+    const clearBtnTestId = getTestId(testId, 'chip-clear-button');
+    const clearHintTestId = getTestId(testId, 'chip-clear-hint');
+    const indicatorsNode = renderIndicators(indicators, {
+        testId: getTestId(testId, 'chip-indicator')
+    });
+    const leadingIconNode = renderLeadingIcon({
+        leadingIcon,
+        testId: leadingIconTestId
+    });
+    const trailingPartOfChipNode = renderTrailingPartOfChip({
+        trailing,
+        testId: trailingIconTestId
+    });
+    if (isGrouped) {
+        const wrapperClassName = getRootClassName({
+            kind: 'wrapper',
+            variant,
+            selected,
+            isCompact,
+            disabled,
+            hasLeading,
+            hasTrailing,
+            constrainWidth: textBehavior.constrainWidth
+        });
+        const wrapperStyle = getConstrainedStyle(textBehavior);
+        const mainButtonClassName = isTrailingButton ? Chip_module.chipButton : cn(Chip_module.chipButton, leadingIcon && Chip_module.hasLeading);
+        return /*#__PURE__*/ jsxs(ChipRoot, {
+            mode: "group",
+            testId: wrapperTestId,
+            className: wrapperClassName,
+            style: wrapperStyle,
+            children: [
+                /*#__PURE__*/ jsxs(ChipMainButton, {
+                    testId: chipBtnTestId,
+                    ref: ref,
+                    onClick: clickHandler,
+                    className: mainButtonClassName,
+                    disabled: disabled,
+                    children: [
+                        leadingIconNode,
+                        /*#__PURE__*/ jsx(ChipLabel, {
+                            label: label,
+                            isCompact: isCompact,
+                            textBehavior: textBehavior,
+                            hintZIndex: hintZIndex
+                        })
+                    ]
+                }),
+                indicatorsNode,
+                /*#__PURE__*/ jsxs("span", {
+                    className: Chip_module.rightActions,
+                    children: [
+                        /*#__PURE__*/ jsx(ChipTrailingButton, {
+                            trailing: trailing,
+                            disabled: disabled,
+                            trailingBtnTestId: trailingBtnTestId,
+                            trailingHintTestId: trailingHintTestId,
+                            hintZIndex: hintZIndex
+                        }),
+                        !isTrailingButton && trailingPartOfChipNode,
+                        /*#__PURE__*/ jsx(ChipClearButton, {
+                            clear: clear,
+                            disabled: disabled,
+                            clearBtnTestId: clearBtnTestId,
+                            clearHintTestId: clearHintTestId,
+                            hintZIndex: hintZIndex
+                        })
+                    ]
+                })
+            ]
+        });
+    }
+    const rootClassName = getRootClassName({
+        kind: 'button',
+        variant,
+        selected,
+        isCompact,
+        hasLeading,
+        hasTrailing,
+        constrainWidth: textBehavior.constrainWidth
+    });
+    const rootStyle = getConstrainedStyle(textBehavior);
+    return /*#__PURE__*/ jsxs(ChipRoot, {
+        mode: "single",
+        testId: testId,
+        className: rootClassName,
+        style: rootStyle,
+        disabled: disabled,
+        onClick: clickHandler,
+        buttonRef: ref,
+        children: [
+            leadingIconNode,
+            /*#__PURE__*/ jsx(ChipLabel, {
+                label: label,
+                isCompact: isCompact,
+                textBehavior: textBehavior,
+                hintZIndex: hintZIndex
+            }),
+            indicatorsNode,
+            trailingPartOfChipNode
+        ]
+    });
+});
+Chip.displayName = 'Chip';
+export { Chip };

package/dist/components/Chip/Chip.legacy.module.js

@@ -0,0 +1,8 @@
+import "./Chip.legacy_module.css";
+const Chip_legacy_module = {
+    chip: "chip-sfyie1",
+    small: "small-EeAxbc",
+    ellipsis: "ellipsis-fdJ0j4",
+    active: "active-uGgP1c"
+};
+export default Chip_legacy_module;

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

@@ -0,0 +1,66 @@
+.chip-sfyie1 {
+  all: unset;
+  cursor: pointer;
+  box-sizing: border-box;
+  background-color: var(--elements-chips-normal, #f1f4f9);
+  height: 28px;
+  color: var(--dark-grey-dark-900);
+  border-radius: 8px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  display: flex;
+}
+
+.chip-sfyie1:hover {
+  background-color: var(--elements-chips-hover, #e7eaf0);
+}
+
+.chip-sfyie1:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  background-color: var(--elements-chips-normal, #f1f4f9);
+}
+
+.chip-sfyie1:focus-visible:hover {
+  background-color: var(--elements-chips-hover, #e7eaf0);
+}
+
+.chip-sfyie1.small-EeAxbc {
+  border-radius: 4px;
+  height: 20px;
+  padding: 2px 8px;
+}
+
+.chip-sfyie1 .ellipsis-fdJ0j4 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.active-uGgP1c {
+  background-color: var(--elements-chips-normal-current, #dff0fe);
+  color: var(--dark-grey-dark-900);
+}
+
+.active-uGgP1c:hover {
+  background-color: var(--elements-chips-hover-current, #daeaf8);
+}
+
+.active-uGgP1c:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--elements-hover, #091739);
+  background-color: var(--elements-chips-normal-current, #dff0fe);
+}
+
+.active-uGgP1c:focus-visible:hover {
+  background-color: var(--elements-chips-hover-current, #daeaf8);
+}
+
+.chip-sfyie1:disabled, .active-uGgP1c:disabled {
+  cursor: default;
+  background-color: var(--button-primary-disabled, #d3d8ddb3);
+}
+
+.chip-sfyie1:disabled svg, .active-uGgP1c:disabled svg {
+  color: var(--elements-normal, #5f6d79);
+}
+

package/dist/components/Chip/Chip.module.js

@@ -0,0 +1,28 @@
+import "./Chip_module.css";
+const Chip_module = {
+    chip: "chip-m4AltR",
+    label: "label-SrMCd1",
+    indicatorCount: "indicatorCount-UilSrr",
+    icon: "icon-xL8w9A",
+    trailingButton: "trailingButton-D8uCaI",
+    clearButton: "clearButton-fN81yO",
+    compact: "compact-AgcfRX",
+    hasLeading: "hasLeading-gWrT6f",
+    hasTrailing: "hasTrailing-b0KxCU",
+    wrapper: "wrapper-BRrIHY",
+    disabled: "disabled-KslNbJ",
+    chipButton: "chipButton-_9Yan_",
+    rightActions: "rightActions-f8Q4y9",
+    ellipsis: "ellipsis-LMZE2X",
+    labelWrapper: "labelWrapper-SRJ2wQ",
+    constrained: "constrained-JpqIeW",
+    tomatoDot: "tomatoDot-DRp_iP",
+    tomatoNumber: "tomatoNumber-hEISux",
+    indicatorCountDot: "indicatorCountDot-v8madS",
+    regular: "regular-fZYjSZ",
+    selected: "selected-WRLn4e",
+    legacyActive: "legacyActive-K5IaNM",
+    warning: "warning-DCpN5O",
+    critical: "critical-dfbtMj"
+};
+export default Chip_module;

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

@@ -0,0 +1,274 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, MouseEvent, ReactElement, ReactNode } from 'react';
+import type { IHasTestId, ValueOf } from '../../common/types';
+/**
+ * Этот тип сейчас необходим для поддержки legacy-поведения.
+ * Все они уже фактически используются.
+ * Для new API эти поля запрещены, и каждое расширение пропсов требует явного согласования и доработки
+ */
+export type ChipButtonLegacyCompatProps = Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'style' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave' | 'onPointerEnter' | 'onPointerLeave' | 'onMouseMove' | 'onMouseOver' | 'title' | 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'className'> & {
+    'data-active'?: string | boolean;
+    'data-status'?: string;
+    'data-selected'?: string | boolean;
+};
+export declare const CHIP_VARIANT: {
+    readonly REGULAR: "regular";
+    readonly WARNING: "warning";
+    readonly CRITICAL: "critical";
+};
+export type ChipVariant = ValueOf<typeof CHIP_VARIANT>;
+export declare const CHIP_SIZE: {
+    readonly REGULAR: "regular";
+    readonly COMPACT: "compact";
+};
+export type ChipSize = ValueOf<typeof CHIP_SIZE>;
+/**
+ * Trailing icon:
+ * - 'partOfChip' => иконка кликается как часть чипа (1 tab stop)
+ * - 'button'     => отдельная кнопка (2 tab stops), требуется handler + aria-label
+ */
+type TrailingIconPartOfChip = {
+    trailingIcon?: ReactNode;
+    trailingIconBehavior?: 'partOfChip';
+    onTrailingIconClick?: never;
+    trailingIconHint?: never;
+};
+type TrailingIconButton = {
+    trailingIcon: ReactNode;
+    trailingIconBehavior: 'button';
+    onTrailingIconClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    trailingIconHint?: string;
+};
+export type ChipTrailingIcon = TrailingIconPartOfChip | TrailingIconButton;
+/** Индикаторы: 4 режима, TS запрещает count + novelty:number */
+type IndicatorNone = {
+    indicatorMode?: 'none';
+    count?: never;
+    novelty?: never;
+};
+type IndicatorNoveltyDot = {
+    indicatorMode: 'novelty';
+    novelty: 'dot';
+    count?: never;
+};
+type IndicatorNoveltyNumber = {
+    indicatorMode: 'novelty';
+    novelty: 'number';
+    count: number;
+};
+type IndicatorCountOnly = {
+    indicatorMode: 'count';
+    count: number;
+    novelty?: never;
+};
+type IndicatorCountPlusDot = {
+    indicatorMode: 'countDot';
+    count: number;
+    novelty?: never;
+};
+export type ChipIndicators = IndicatorNone | IndicatorNoveltyDot | IndicatorNoveltyNumber | IndicatorCountOnly | IndicatorCountPlusDot;
+type ChipAppearanceProps = {
+    variant?: ChipVariant;
+    size?: ChipSize;
+    disabled?: boolean;
+};
+type ChipNewSelectionProps = {
+    selected: boolean;
+    onSelectedChange: (nextSelected: boolean) => void;
+};
+type ChipNewContentProps = {
+    label: string;
+    leadingIcon?: ReactNode;
+};
+type ChipClearProps = {
+    clearable?: boolean;
+    onClear?: (e: MouseEvent<HTMLButtonElement>) => void;
+    clearIconHint?: string;
+};
+type ChipTextBehaviorProps = {
+    constrainWidth?: boolean;
+    maxWidthPx?: number;
+};
+type ChipHintProps = {
+    hintZIndex?: number;
+};
+type ChipNewPressProps = {
+    onPress?: (e: MouseEvent<HTMLButtonElement>) => void;
+};
+type ChipRegularSizeGate = {
+    size?: 'regular';
+};
+type ChipCompactSizeGate = {
+    size: 'compact';
+    leadingIcon?: never;
+    clearable?: never;
+    onClear?: never;
+    clearIconHint?: never;
+};
+type ChipSizeGate = ChipRegularSizeGate | ChipCompactSizeGate;
+type ChipLegacyFieldsForbiddenInNew = {
+    isActive?: never;
+    onClick?: never;
+    children?: never;
+    overrideActiveClass?: never;
+    isTextEllipsis?: never;
+    icon?: never;
+    iconPosition?: never;
+    bodyTextClassName?: never;
+    small?: never;
+};
+export type ChipNewProps = ChipAppearanceProps & ChipIndicators & ChipTrailingIcon & ChipClearProps & ChipTextBehaviorProps & ChipHintProps & ChipNewPressProps & ChipNewSelectionProps & ChipNewContentProps & ChipSizeGate & ChipLegacyFieldsForbiddenInNew & IHasTestId;
+export interface ChipLegacyProps extends ChipButtonLegacyCompatProps {
+    /**
+     * @deprecated Используйте `selected`.
+     * Текущее состояние выбора чипсы.
+     */
+    isActive: boolean;
+    /**
+     * @deprecated Используйте `onSelectedChange` (или `onPress`, если нужен только факт клика).
+     * Legacy-обработчик клика. Получает ТЕКУЩЕЕ значение `isActive` (не следующее состояние).
+     */
+    onClick: (isActive: boolean) => void;
+    /**
+     * @deprecated Используйте `label`.
+     * Текстовое содержимое чипсы.
+     */
+    children: ReactNode | string | number;
+    /**
+     * @deprecated Используйте стандартные стили нового API.
+     * Позволяет переопределить класс активного состояния (когда `isActive === true`).
+     */
+    overrideActiveClass?: HTMLAttributes<HTMLButtonElement>['className'];
+    /**
+     * @deprecated Используйте `textEllipsis`.
+     * Включает обрезание текста с троеточием.
+     */
+    isTextEllipsis?: boolean;
+    /**
+     * @deprecated Используйте `leadingIcon` или `trailingIcon`.
+     * Legacy-иконка чипсы.
+     */
+    icon?: ReactNode;
+    /**
+     * @deprecated Используйте `leadingIcon` или `trailingIcon`
+     * (а также `trailingIconBehavior` при необходимости).
+     * Позиция legacy-иконки относительно текста.
+     */
+    iconPosition?: 'end' | 'start';
+    /**
+     * @deprecated Используйте стандартные стили нового API.
+     * Дополнительный класс для текстового блока (Text.Body).
+     */
+    bodyTextClassName?: string;
+    disabled?: boolean;
+    /**
+     * @deprecated Используйте `size="compact"`.
+     * Legacy-алиас для компактного размера.
+     */
+    small?: boolean;
+    selected?: never;
+    onSelectedChange?: never;
+    onPress?: never;
+    label?: never;
+    leadingIcon?: never;
+    trailingIcon?: never;
+    trailingIconBehavior?: never;
+    onTrailingIconClick?: never;
+    trailingIconHint?: never;
+    indicatorMode?: never;
+    count?: never;
+    novelty?: never;
+    noveltyCount?: never;
+    clearable?: never;
+    onClear?: never;
+    clearIconHint?: never;
+    constrainWidth?: never;
+    maxWidthPx?: never;
+    hintZIndex?: never;
+    textEllipsis?: never;
+    hintWhenTruncated?: never;
+    variant?: never;
+    size?: never;
+}
+export type LegacyResolved = {
+    isActive: boolean;
+    children: ChipLegacyProps['children'];
+    className?: string;
+    overrideActiveClass?: ChipLegacyProps['overrideActiveClass'];
+    isTextEllipsis?: boolean;
+    icon?: ChipLegacyProps['icon'];
+    iconPosition: NonNullable<ChipLegacyProps['iconPosition']>;
+    bodyTextClassName?: ChipLegacyProps['bodyTextClassName'];
+    disabled: boolean;
+    small: boolean;
+    clickHandler: () => void;
+    buttonCompatProps: Pick<ChipLegacyProps, 'tabIndex' | 'style' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave' | 'onPointerEnter' | 'onPointerLeave' | 'onMouseMove' | 'onMouseOver' | 'title' | 'data-active' | 'data-status' | 'data-selected' | 'aria-describedby' | 'aria-label' | 'aria-labelledby'>;
+};
+export type WrapWithHintArgs = {
+    enabled: boolean;
+    hintText?: string;
+    testId?: string;
+    children: ReactElement;
+};
+type ResolvedBase = {
+    variant: ChipVariant;
+    size: ChipSize;
+    disabled: boolean;
+    selected: boolean;
+};
+export type ResolvedTrailing = {
+    mode: 'none';
+} | {
+    mode: 'partOfChip';
+    icon: ReactNode;
+} | {
+    mode: 'button';
+    icon: ReactNode;
+    hintText?: string;
+    ariaLabel?: string;
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+};
+export type ResolvedIndicators = {
+    mode: 'none';
+} | {
+    mode: 'count';
+    count: number;
+} | {
+    mode: 'countDot';
+    count: number;
+} | {
+    mode: 'noveltyDot';
+} | {
+    mode: 'noveltyNumber';
+    count: number;
+};
+export type ResolvedClear = {
+    mode: 'none';
+} | {
+    mode: 'button';
+    hintText?: string;
+    ariaLabel?: string;
+    onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+};
+export type ChipTextBehaviorResolved = {
+    constrainWidth: false;
+    maxWidthPx?: never;
+} | {
+    constrainWidth: true;
+    maxWidthPx: number;
+};
+export type Resolved = (ResolvedBase & {
+    mode: 'legacy';
+    legacy: LegacyResolved;
+}) | (ResolvedBase & {
+    mode: 'new';
+    label: string;
+    leadingIcon?: ReactNode;
+    trailing: ResolvedTrailing;
+    indicators: ResolvedIndicators;
+    clear: ResolvedClear;
+    textBehavior: ChipTextBehaviorResolved;
+    hintZIndex?: number;
+    clickHandler: (e: MouseEvent<HTMLButtonElement>) => void;
+});
+export type ChipUnionProps = ChipLegacyProps | ChipNewProps;
+export {};

package/dist/components/Chip/Chip.types.js

@@ -0,0 +1,10 @@
+const CHIP_VARIANT = {
+    REGULAR: 'regular',
+    WARNING: 'warning',
+    CRITICAL: 'critical'
+};
+const CHIP_SIZE = {
+    REGULAR: 'regular',
+    COMPACT: 'compact'
+};
+export { CHIP_SIZE, CHIP_VARIANT };