@itcase/ui 1.9.56 → 1.9.57

package/dist/components/Checkmark/appearance/checkmarkSize.js

@@ -0,0 +1,32 @@
+import { icons14, icons20, icons24, icons32, icons40, } from '@itcase/icons/default';
+const checkmarkAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        checkmarkIcon: icons40.General.Check,
+    },
+    sizeXL: {
+        size: 'xl',
+        checkmarkIcon: icons40.General.Check,
+    },
+    sizeL: {
+        size: 'l',
+        checkmarkIcon: icons32.General.Check,
+    },
+    sizeM: {
+        size: 'm',
+        checkmarkIcon: icons24.Form.Check,
+    },
+    sizeS: {
+        size: 's',
+        checkmarkIcon: icons24.Form.Check,
+    },
+    sizeXS: {
+        size: 'xs',
+        checkmarkIcon: icons20.Form.Check,
+    },
+    sizeXXS: {
+        size: 'xxs',
+        checkmarkIcon: icons14.Form.Check,
+    },
+};
+export { checkmarkAppearanceSize };

package/dist/components/Checkmark/appearance/checkmarkStyle.js

@@ -0,0 +1,14 @@
+const checkmarkAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { checkmarkAppearanceStyle };

package/dist/components/Checkmark/appearance/checkmarkSurface.js

@@ -0,0 +1,21 @@
+const checkmarkAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillActive: 'surfaceActivePrimary',
+        fillHover: 'surfacePrimary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderPrimary',
+        borderWidth: '2',
+        checkmarkIconFill: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillActive: 'surfaceActivePrimary',
+        fillHover: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderPrimary',
+        borderWidth: '2',
+        checkmarkIconFill: 'surfaceItemPrimary',
+    },
+};
+export { checkmarkAppearanceSurface };

package/dist/components/Checkmark/index.js

@@ -0,0 +1,2 @@
+export { Checkmark, checkmarkConfig } from './Checkmark';
+export { checkmarkAppearance } from './Checkmark.appearance';

package/dist/components/Chips/Chips.appearance.js

@@ -0,0 +1,29 @@
+import { chipsAppearanceAccent } from './appearance/chipsAccent';
+import { chipsAppearanceDanger } from './appearance/chipsDanger';
+import { chipsAppearanceDisabled } from './appearance/chipsDisabled';
+import { chipsAppearanceError } from './appearance/chipsError';
+import { chipsAppearanceExtra } from './appearance/chipsExtra';
+import { chipsAppearanceInfo } from './appearance/chipsInfo';
+import { chipsAppearanceShape } from './appearance/chipsShape';
+import { chipsAppearanceSize } from './appearance/chipsSize';
+import { chipsAppearanceSpecial } from './appearance/chipsSpecial';
+import { chipsAppearanceStyle } from './appearance/chipsStyle';
+import { chipsAppearanceSuccess } from './appearance/chipsSuccess';
+import { chipsAppearanceSurface } from './appearance/chipsSurface';
+import { chipsAppearanceWarning } from './appearance/chipsWarning';
+const chipsAppearance = {
+    ...chipsAppearanceSize,
+    ...chipsAppearanceStyle,
+    ...chipsAppearanceAccent,
+    ...chipsAppearanceDanger,
+    ...chipsAppearanceError,
+    ...chipsAppearanceInfo,
+    ...chipsAppearanceDisabled,
+    ...chipsAppearanceSpecial,
+    ...chipsAppearanceExtra,
+    ...chipsAppearanceSuccess,
+    ...chipsAppearanceSurface,
+    ...chipsAppearanceWarning,
+    ...chipsAppearanceShape,
+};
+export { chipsAppearance };

package/dist/components/Chips/Chips.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Chips/Chips.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Badge } from 'src/components/Badge';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { chipsAppearance } from './Chips.appearance';
+const chipsConfig = {
+    appearance: chipsAppearance,
+    setAppearance: (appearanceConfig) => {
+        chipsConfig.appearance = appearanceConfig;
+    },
+};
+function Chips(props) {
+    const { appearance, className, dataTestId, dataTour, label = '', isActive, isDisabled, isSkeleton, onClick, onClickIconAfter, onClickIconBefore, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, chipsConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignClass, alignDirectionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, badgeAppearance, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, cursorClass, iconAfter, iconAfterActive, iconAfterFill, iconAfterFillActiveIcon, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeActive, iconBeforeFill, iconBeforeFillActiveIcon, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
+    const { styles: chipsStyles } = useStyles(props);
+    return (_jsx("div", { className: clsx(className, 'chips', !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass && `fill_active_hover_${fillActiveHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `chips_size_${sizeClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, isActive && 'chips_state_active', isDisabled && `chips_state_disabled`, cursorClass && `cursor_${cursorClass}`, onClick && 'cursor_type_pointer', isSkeleton && `chips_skeleton`), "data-testid": dataTestId && `${dataTestId}Chips`, "data-tour": dataTour, style: chipsStyles, onClick: !isDisabled ? onClick : undefined, children: _jsxs("div", { className: "chips__inner", children: [(iconBefore || iconBeforeSrc || (iconBeforeActive && isActive)) && (_jsx(Icon, { className: "chips__icon_before", size: iconBeforeSize, fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconFillActive: iconBeforeFillActiveIcon, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBeforeActive && isActive ? iconBeforeActive : iconBefore, isActive: isActive, onClick: onClickIconBefore })), typeof label === 'string' ? (_jsx(Text, { className: "chips__label", size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: label })) : (_jsx("div", { className: "chips__label", children: label })), children, (iconAfter || iconAfterSrc || (iconAfterActive && isActive)) && (_jsx(Icon, { className: "chips__icon_after", size: iconAfterSize, fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconFillActive: iconAfterFillActiveIcon, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfterActive && isActive ? iconAfterActive : iconAfter, isActive: isActive, onClick: onClickIconAfter })), badgeValue && (_jsx(Badge, { appearance: badgeAppearance, className: "chips__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue }))] }) }));
+}
+export { Chips, chipsConfig };

package/dist/components/Chips/ChipsGroup.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Chips } from './Chips';
+function ChipsGroup(props) {
+    /** TODO:
+     * rename "chipsList" to "chipsOptions"
+     * to do same structure for "Option" object.
+     */
+    const { className, dataTestId, dataTour, chipsList, horizontalScroll, style, onClick, children, } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { directionClass, alignClass, alignDirectionClass, fillClass, borderColorClass, borderTypeClass, borderWidthClass, chipsAppearance, widthClass, wrapClass, } = propsGenerator;
+    const { styles: groupStyles } = useStyles(props);
+    return (_jsx("div", { className: clsx(className, 'chips-group', 'group', widthClass && `width_${widthClass}`, alignDirectionClass && `align_${alignDirectionClass}`, directionClass && `group_direction_${directionClass}`, alignClass && `align_${alignClass}`, fillClass && `fill_${fillClass}`, horizontalScroll && 'group_scroll_horizontal', wrapClass && `group_wrap_${wrapClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, groupStyles, style), children: children
+            ? children
+            : chipsList?.map((item) => (_jsx(Chips, { appearance: chipsAppearance, label: item.label, iconAfter: item.iconAfter, iconAfterActive: item.iconAfterActive, iconBefore: item.iconBefore, iconBeforeActive: item.iconBeforeActive, isActive: item.isActive, isDisabled: item.isDisabled, onClick: (event) => onClick?.(item, event) }, item.value))) }));
+}
+export { ChipsGroup };

package/dist/components/Chips/appearance/chipsAccent.js

@@ -0,0 +1,24 @@
+const chipsAppearanceAccent = {
+    accentMutedPrimary: {
+        fill: 'accentTertiary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextSecondary',
+        borderColor: 'accentBorderSecondary',
+        iconAfterFillIcon: 'accentItemQuaternary',
+        iconBeforeFillIcon: 'accentItemQuaternary',
+    },
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentActiveHoverPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextColor: 'accentTextPrimary',
+        borderColor: 'accentBorderPrimary',
+        iconAfterFillActiveIcon: 'accentItemPrimary',
+        iconAfterFillIcon: 'accentItemPrimary',
+        iconBeforeFillActiveIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'accentItemPrimary',
+    },
+};
+export { chipsAppearanceAccent };

package/dist/components/Chips/appearance/chipsDanger.js

@@ -0,0 +1,17 @@
+const chipsAppearanceDanger = {
+    dangerMutedPrimary: {
+        fill: 'dangerTertiary',
+        labelTextColor: 'dangerTextQuaternary',
+        borderColor: 'dangerBorderQuaternary',
+        iconAfterFillIcon: 'dangerItemQuaternary',
+        iconBeforeFillIcon: 'dangerItemQuaternary',
+    },
+    dangerPrimary: {
+        fill: 'dangerPrimary',
+        labelTextColor: 'dangerTextPrimary',
+        borderColor: 'dangerBorderSecondary',
+        iconAfterFillIcon: 'dangerItemPrimary',
+        iconBeforeFillIcon: 'dangerItemPrimary',
+    },
+};
+export { chipsAppearanceDanger };

package/dist/components/Chips/appearance/chipsDisabled.js

@@ -0,0 +1,14 @@
+const chipsAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceHoverSecondary',
+        labelTextActiveColor: 'surfaceTextActiveQuaternary',
+        labelTextActiveColorHover: 'surfaceTextActiveHoverQuaternary',
+        labelTextColor: 'surfaceTextQuaternary',
+        labelTextColorHover: 'surfaceTextQuaternary',
+        borderColor: 'disabledBorderPrimary',
+        iconAfterFillIcon: 'disabledItemPrimary',
+        iconBeforeFillIcon: 'disabledItemPrimary',
+    },
+};
+export { chipsAppearanceDisabled };

package/dist/components/Chips/appearance/chipsError.js

@@ -0,0 +1,17 @@
+const chipsAppearanceError = {
+    errorMutedPrimary: {
+        fill: 'errorTertiary',
+        labelTextColor: 'errorTextQuaternary',
+        borderColor: 'errorBorderQuaternary',
+        iconAfterFillIcon: 'errorItemQuaternary',
+        iconBeforeFillIcon: 'errorItemQuaternary',
+    },
+    errorPrimary: {
+        fill: 'errorPrimary',
+        labelTextColor: 'errorTextPrimary',
+        borderColor: 'errorBorderSecondary',
+        iconAfterFillIcon: 'errorItemPrimary',
+        iconBeforeFillIcon: 'errorItemPrimary',
+    },
+};
+export { chipsAppearanceError };

package/dist/components/Chips/appearance/chipsExtra.js

@@ -0,0 +1,17 @@
+const chipsAppearanceExtra = {
+    extraMutedPrimary: {
+        fill: 'extraTertiary',
+        labelTextColor: 'extraTextQuaternary',
+        borderColor: 'extraBorderSecondary',
+        iconAfterFillIcon: 'extraItemQuaternary',
+        iconBeforeFillIcon: 'extraItemQuaternary',
+    },
+    extraPrimary: {
+        fill: 'extraPrimary',
+        labelTextColor: 'extraTextPrimary',
+        borderColor: 'extraBorderSecondary',
+        iconAfterFillIcon: 'extraItemPrimary',
+        iconBeforeFillIcon: 'extraItemPrimary',
+    },
+};
+export { chipsAppearanceExtra };

package/dist/components/Chips/appearance/chipsInfo.js

@@ -0,0 +1,17 @@
+const chipsAppearanceInfo = {
+    infoMutedPrimary: {
+        fill: 'infoTertiary',
+        labelTextColor: 'infoTextSecondary',
+        borderColor: 'infoBorderSecondary',
+        iconAfterFillIcon: 'infoItemPrimary',
+        iconBeforeFillIcon: 'infoItemPrimary',
+    },
+    infoPrimary: {
+        fill: 'infoPrimary',
+        labelTextColor: 'infoTextPrimary',
+        borderColor: 'infoBorderPrimary',
+        iconAfterFillIcon: 'infoItemPrimary',
+        iconBeforeFillIcon: 'infoItemPrimary',
+    },
+};
+export { chipsAppearanceInfo };

package/dist/components/Chips/appearance/chipsShape.js

@@ -0,0 +1,25 @@
+const chipsAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { chipsAppearanceShape };

package/dist/components/Chips/appearance/chipsSize.js

@@ -0,0 +1,45 @@
+const chipsAppearanceSize = {
+    sizeXXL: {
+        size: 'xxl',
+        labelTextSize: 'xl',
+        iconAfterSize: '24',
+        iconBeforeSize: '24',
+    },
+    sizeXL: {
+        size: 'xl',
+        labelTextSize: 'm',
+        iconAfterSize: '20',
+        iconBeforeSize: '20',
+    },
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'm',
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 's',
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        iconAfterSize: '14',
+        iconBeforeSize: '14',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        labelTextSize: 'xxs',
+        iconAfterSize: '14',
+        iconBeforeSize: '14',
+    },
+};
+export { chipsAppearanceSize };

package/dist/components/Chips/appearance/chipsSpecial.js

@@ -0,0 +1,17 @@
+const chipsAppearanceSpecial = {
+    specialMutedPrimary: {
+        fill: 'specialTertiary',
+        labelTextColor: 'specialTextSecondary',
+        borderColor: 'specialBorderSecondary',
+        iconAfterFillIcon: 'specialItemSecondary',
+        iconBeforeFillIcon: 'specialItemSecondary',
+    },
+    specialPrimary: {
+        fill: 'specialPrimary',
+        labelTextColor: 'specialTextPrimary',
+        borderColor: 'specialBorderSecondary',
+        iconAfterFillIcon: 'specialItemPrimary',
+        iconBeforeFillIcon: 'specialItemPrimary',
+    },
+};
+export { chipsAppearanceSpecial };

package/dist/components/Chips/appearance/chipsStyle.js

@@ -0,0 +1,14 @@
+const chipsAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { chipsAppearanceStyle };

package/dist/components/Chips/appearance/chipsSuccess.js

@@ -0,0 +1,17 @@
+const chipsAppearanceSuccess = {
+    successMutedPrimary: {
+        fill: 'successTertiary',
+        labelTextColor: 'successTextQuaternary',
+        borderColor: 'successBorderQuaternary',
+        iconAfterFillIcon: 'successItemQuaternary',
+        iconBeforeFillIcon: 'successItemQuaternary',
+    },
+    successPrimary: {
+        fill: 'successPrimary',
+        labelTextColor: 'successTextPrimary',
+        borderColor: 'successBorderSecondary',
+        iconAfterFillIcon: 'successItemPrimary',
+        iconBeforeFillIcon: 'successItemPrimary',
+    },
+};
+export { chipsAppearanceSuccess };

package/dist/components/Chips/appearance/chipsSurface.js

@@ -0,0 +1,45 @@
+const chipsAppearanceSurface = {
+    surfaceMutedPrimary: {
+        fill: 'surfaceSecondary',
+        labelTextColor: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconAfterFillIcon: 'surfaceItemQuaternary',
+        iconBeforeFillIcon: 'surfaceItemQuaternary',
+    },
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentSecondary',
+        fillHover: 'surfaceHoverTertiary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+        badgeAppearance: 'surfacePrimary sizeXS solid',
+        iconAfterFillActiveIcon: 'accentItemPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillActiveIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentSecondary',
+        fillHover: 'surfaceHoverTertiary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorHover: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderSecondary',
+        iconAfterFillActiveIcon: 'accentItemPrimary',
+        iconAfterFillIcon: 'surfaceItemPrimary',
+        iconBeforeFillActiveIcon: 'accentItemPrimary',
+        iconBeforeFillIcon: 'surfaceItemPrimary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceHoverTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+    },
+};
+export { chipsAppearanceSurface };

package/dist/components/Chips/appearance/chipsWarning.js

@@ -0,0 +1,17 @@
+const chipsAppearanceWarning = {
+    warningMutedPrimary: {
+        fill: 'warningTertiary',
+        labelTextColor: 'warningTextSecondary',
+        borderColor: 'warningBorderSecondary',
+        iconAfterFillIcon: 'warningItemSecondary',
+        iconBeforeFillIcon: 'warningItemSecondary',
+    },
+    warningPrimary: {
+        fill: 'warningPrimary',
+        labelTextColor: 'warningTextPrimary',
+        borderColor: 'warningBorderSecondary',
+        iconAfterFillIcon: 'warningItemPrimary',
+        iconBeforeFillIcon: 'warningItemPrimary',
+    },
+};
+export { chipsAppearanceWarning };

package/dist/components/Chips/index.js

@@ -0,0 +1,3 @@
+export { Chips, chipsConfig } from './Chips';
+export { chipsAppearance } from './Chips.appearance';
+export { ChipsGroup } from './ChipsGroup';

package/dist/components/Choice/Choice.appearance.js

@@ -0,0 +1,19 @@
+import { choiceAppearanceDefault } from './appearance/choiceDefault';
+import { choiceAppearanceDisabled } from './appearance/choiceDisabled';
+import { choiceAppearanceError } from './appearance/choiceError';
+import { choiceAppearanceRequire } from './appearance/choiceRequire';
+import { choiceAppearanceShape } from './appearance/choiceShape';
+import { choiceAppearanceSize } from './appearance/choiceSize';
+import { choiceAppearanceStyle } from './appearance/choiceStyle';
+import { choiceAppearanceSuccess } from './appearance/choiceSuccess';
+const choiceAppearance = {
+    ...choiceAppearanceError,
+    ...choiceAppearanceDisabled,
+    ...choiceAppearanceDefault,
+    ...choiceAppearanceSuccess,
+    ...choiceAppearanceRequire,
+    ...choiceAppearanceStyle,
+    ...choiceAppearanceShape,
+    ...choiceAppearanceSize,
+};
+export { choiceAppearance };

package/dist/components/Choice/Choice.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Choice/Choice.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createRef, useCallback, useMemo, useRef, } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Icon } from 'src/components/Icon';
+import { Loader } from 'src/components/Loader';
+import { Text } from 'src/components/Text';
+import { choiceAppearance } from './Choice.appearance';
+const choiceConfig = {
+    appearance: choiceAppearance,
+    setAppearance: (appearanceConfig) => {
+        choiceConfig.appearance = appearanceConfig;
+    },
+};
+function Choice(props) {
+    const { id, appearance, className, dataTestId, dataTour, name, active = { value: undefined }, itemAfter, itemBefore, options = [], before, after, isDisabled = false, isSkeleton, isCheckbox = false, isLoading = false, setActiveSegment, } = props;
+    const controlRef = useRef(null);
+    const optionsRefs = useMemo(() => new Map(options.map((item) => [item.value, createRef()])), [options]);
+    const onChange = useCallback((event, item) => {
+        const isChecked = isCheckbox ? event.target.checked : true;
+        setActiveSegment && setActiveSegment(item, isChecked);
+    }, [isCheckbox, setActiveSegment]);
+    const appearanceConfig = useAppearanceConfig(appearance, choiceConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { size, fillClass, fillItemActiveClass, fillItemActiveDisabledClass, fillItemActiveHoverClass, fillItemClass, fillItemDisabledClass, fillItemHoverClass, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextWeight, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconAfterFill, iconAfterFillActive, iconAfterFillDisabled, iconAfterSize, iconBeforeFill, iconBeforeFillActive, iconBeforeFillDisabled, iconBeforeSize, iconFill, iconFillActive, iconFillDisabled, iconSize, shapeClass, shapeStrengthClass, wrapClass, } = propsGenerator;
+    const { styles } = useStyles(props);
+    return (_jsxs("div", { id: id, className: clsx(className, 'choice', size && `choice_size_${size}`, fillClass && `fill_${fillClass}`, wrapClass && `choice_wrap_${wrapClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `choice_skeleton`), ref: controlRef, "data-testid": dataTestId && `${dataTestId}Choice`, "data-tour": dataTour, style: styles, children: [before && _jsx("div", { className: "choice__before", children: before }), isLoading ? (_jsx(Loader, { width: "fill", height: "fill", fill: "surfacePrimary", itemFill: "surfaceItemPrimary" })) : (_jsx(React.Fragment, { children: options.map((item) => {
+                    const isActive = typeof active === 'object'
+                        ? String(item.value) === String(active.value)
+                        : String(item.value) === String(active);
+                    return (_jsxs("div", { className: clsx('choice__item', size && `choice__item_size_${size}`, (item.icon || item.iconActive) && 'choice__item_icon', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, !isActive && !isDisabled
+                            ? fillItemClass && `fill_${fillItemClass}`
+                            : fillItemDisabledClass &&
+                                `fill_disabled_${fillItemDisabledClass}`, !isActive && !isDisabled
+                            ? fillItemHoverClass && `fill_hover_${fillItemHoverClass}`
+                            : fillItemActiveHoverClass &&
+                                `fill_active_hover_${fillItemActiveHoverClass}`, isActive
+                            ? !isDisabled
+                                ? fillItemActiveClass &&
+                                    `fill_active_${fillItemActiveClass}`
+                                : fillItemActiveDisabledClass &&
+                                    `fill_active_disabled_${fillItemActiveDisabledClass}`
+                            : !isDisabled
+                                ? fillItemClass && `fill_${fillItemClass}`
+                                : fillItemDisabledClass &&
+                                    `fill_disabled_${fillItemDisabledClass}`, !isActive && isDisabled && 'choice__item_state_disabled', isActive &&
+                            isDisabled &&
+                            'choice__item_active_state_disabled', isActive && 'choice__item_active'), ref: optionsRefs.get(item.value), children: [_jsx("input", { id: `${name}-${item.value}`, className: "choice__item-radio", type: isCheckbox ? 'checkbox' : 'radio', name: name, checked: isActive, disabled: isDisabled, value: item.value, onChange: (event) => onChange(event, item) }), _jsxs("label", { className: clsx('choice__item-label', isDisabled && 'choice__item-label_state_disabled'), htmlFor: `${name}-${item.value}`, children: [itemBefore, (item.iconBefore || item.iconBeforeActive) && (_jsx(Icon, { className: "choice__item-icon", iconFill: iconBeforeFill, iconFillActive: iconBeforeFillActive, iconFillDisabled: iconBeforeFillDisabled, iconSize: iconBeforeSize, SvgImage: isActive
+                                            ? item.iconBeforeActive || item.iconBefore
+                                            : item.iconBefore, isActive: isActive, isDisabled: isDisabled })), item.label && (_jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorActiveHover: labelTextColorActiveHover, textColorHover: labelTextColorHover, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, children: item.label })), (item.icon || item.iconActive) && (_jsx(Icon, { className: "choice__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive })), (item.iconAfter || item.iconAfterActive) && (_jsx(Icon, { className: "choice__item-icon", iconFill: iconAfterFill, iconFillActive: iconAfterFillActive, iconFillDisabled: iconAfterFillDisabled, iconSize: iconAfterSize, SvgImage: isActive
+                                            ? item.iconAfterActive || item.iconAfter
+                                            : item.iconAfter, isActive: isActive })), itemAfter] })] }, `${name}-${item.value}`));
+                }) })), after && _jsx("div", { className: "choice__after", children: after })] }));
+}
+export { Choice, choiceConfig };

package/dist/components/Choice/appearance/choiceDefault.js

@@ -0,0 +1,37 @@
+const choiceAppearanceDefault = {
+    defaultMutedPrimary: {
+        fill: 'surfaceSecondary',
+        fillItem: 'surfaceSecondary',
+        fillItemActive: 'accentTertiary',
+        fillItemActiveHover: 'accentPrimary',
+        fillItemHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'surfaceTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
+        borderColor: 'surfaceBorderSecondary',
+        iconAfterFill: 'surfaceItemQuaternary',
+        iconAfterFillActive: 'surfaceItemSecondary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconBeforeFillActive: 'surfaceItemSecondary',
+        iconFill: 'surfaceItemQuaternary',
+        iconFillActive: 'surfaceItemSecondary',
+    },
+    defaultPrimary: {
+        fill: 'surfaceSecondary',
+        fillItem: 'surfaceSecondary',
+        fillItemActive: 'accentPrimary',
+        fillItemActiveHover: 'accentActiveHoverPrimary',
+        fillItemHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextColorActive: 'accentTextPrimary',
+        labelTextColorActiveHover: 'accentTextPrimary',
+        borderColor: 'surfaceBorderQuaternary',
+        iconAfterFill: 'surfaceItemQuaternary',
+        iconAfterFillActive: 'surfaceItemSecondary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconBeforeFillActive: 'surfaceItemSecondary',
+        iconFill: 'surfaceItemQuaternary',
+        iconFillActive: 'surfaceItemSecondary',
+    },
+};
+export { choiceAppearanceDefault };

package/dist/components/Choice/appearance/choiceDisabled.js

@@ -0,0 +1,18 @@
+const choiceAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'disabledTertiary',
+        fillItem: 'disabledTertiary',
+        fillItemActive: 'surfaceDisabled',
+        fillItemActiveHover: 'surfaceDisabled',
+        fillItemHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextQuaternary',
+        borderColor: 'surfaceBorderPrimary',
+        iconAfterFill: 'surfaceItemPrimary',
+        iconAfterFillActive: 'disabledItemSecondary',
+        iconBeforeFill: 'surfaceItemPrimary',
+        iconBeforeFillActive: 'disabledItemSecondary',
+        iconFill: 'surfaceItemPrimary',
+        iconFillActive: 'disabledItemSecondary',
+    },
+};
+export { choiceAppearanceDisabled };

package/dist/components/Choice/appearance/choiceError.js

@@ -0,0 +1,17 @@
+const choiceAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        fillItem: 'errorTertiary',
+        fillItemActive: 'errorSecondary',
+        fillItemHover: 'errorHoverPrimary',
+        labelTextColor: 'errorTextSecondary',
+        borderColor: 'errorBorderQuaternary',
+        iconAfterFill: 'errorItemSecondary',
+        iconAfterFillActive: 'errorItemTertiary',
+        iconBeforeFill: 'errorItemSecondary',
+        iconBeforeFillActive: 'errorItemTertiary',
+        iconFill: 'errorItemSecondary',
+        iconFillActive: 'errorItemTertiary',
+    },
+};
+export { choiceAppearanceError };