@itcase/ui 1.3.31 → 1.3.32

package/dist/Badge-BX4N91_C.js

@@ -0,0 +1,250 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-CCZ3TN_7.js');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
+var Icon = require('./Icon-GVGrUu_Z.js');
+var Text = require('./Text-C49zj3jO.js');
+
+var defaultAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        borderColor: 'accentBorderPrimary',
+        textColor: 'accentTextPrimary',
+    },
+    accentPrimary: {
+        fill: 'accentPrimary',
+        borderColor: 'accentBorderQuaternary',
+        textColor: 'accentTextPrimary',
+        iconFill: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentSecondary',
+        borderColor: 'accentBorderQuaternary',
+        textColor: 'accentTextQuaternary',
+        iconFill: 'accentItemQuaternary',
+    },
+    accentTertiary: {
+        fill: 'accentTertiary',
+        borderColor: 'accentBorderSecondary',
+        textColor: 'accentTextSecondary',
+        iconFill: 'accentItemSecondary',
+    },
+    accentQuaternary: {
+        fill: 'accentQuaternary',
+        borderColor: 'accentBorderPrimary',
+        textColor: 'accentTextPrimary',
+        iconFill: 'accentItemPrimary',
+    },
+};
+
+var badgeAppearanceAccent = {
+    accent: tslib_es6.__assign(tslib_es6.__assign({}, defaultAppearance.accent), { dotFill: 'accentItemPrimary', iconFill: 'accentItemPrimary' }),
+    accentPrimary: tslib_es6.__assign(tslib_es6.__assign({}, defaultAppearance.accentPrimary), { dotFill: 'accentItemPrimary' }),
+    accentSecondary: tslib_es6.__assign(tslib_es6.__assign({}, defaultAppearance.accentSecondary), { dotFill: 'accentItemPrimary' }),
+    accentTertiary: tslib_es6.__assign(tslib_es6.__assign({}, defaultAppearance.accentTertiary), { dotFill: 'accentItemPrimary' }),
+    accentQuaternary: tslib_es6.__assign(tslib_es6.__assign({}, defaultAppearance.accentQuaternary), { dotFill: 'accentItemPrimary' }),
+};
+
+var badgeAppearanceDanger = {
+    danger: {
+        fill: 'dangerPrimary',
+        fillHover: 'dangerPrimary',
+        borderColor: 'dangerBorderPrimary',
+        textColor: 'dangerTextSecondary',
+        dotFill: 'dangerItemPrimary',
+        iconFill: 'dangerItemPrimary',
+    },
+};
+
+var badgeAppearanceError = {
+    error: {
+        fill: 'errorPrimary',
+        fillHover: 'errorPrimaryHover',
+        labelTextColor: 'errorTextPrimary',
+        labelTextColorHover: 'errorTextPrimary',
+        loaderFill: 'errorPrimary',
+        loaderItemFill: 'errorItemPrimary',
+        iconFill: 'errorItemPrimary',
+    },
+};
+
+var badgeAppearanceInfo = {
+    info: {
+        fill: 'infoPrimary',
+        fillHover: 'infoPrimaryHover',
+        textColor: 'infoTextPrimary',
+        borderColor: 'infoBorderSecondary',
+        dotFill: 'infoItemPrimary',
+        iconFill: 'infoItemPrimary',
+    },
+    infoSecondary: {
+        fill: 'infoSecondary',
+        fillHover: 'infoSecondaryHover',
+        textColor: 'infoTextSecondary',
+        borderColor: 'infoBorderSecondary',
+        dotFill: 'infoItemSecondary',
+    },
+};
+
+var badgeAppearancePrimary = {
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        textColor: 'primaryTextPrimary',
+        borderColor: 'primaryBorderSecondary',
+        dotFill: 'primaryItemPrimary',
+        iconFill: 'primaryItemPrimary',
+    },
+};
+
+var badgeAppearanceSecondary = {
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        textColor: 'secondaryTextPrimary',
+        borderColor: 'secondaryBorderSecondary',
+        dotFill: 'secondaryItemPrimary',
+        iconFill: 'secondaryItemPrimary',
+    },
+};
+
+var badgeAppearanceSize = {
+    sizeXXL: {
+        textSize: 'xl',
+        size: 'xxl',
+        iconSize: 24
+    },
+    sizeXL: {
+        textSize: 'l',
+        size: 'xl',
+    },
+    sizeL: {
+        textSize: 'l',
+        size: 'l',
+    },
+    sizeM: {
+        textSize: 'm',
+        size: 'm',
+    },
+    sizeS: {
+        textSize: 's',
+        size: 's',
+    },
+    sizeXS: {
+        textSize: 'xs',
+        size: 'xs',
+    },
+    sizeXXS: {
+        textSize: 'xs',
+        size: 'xxs',
+    },
+};
+
+var badgeAppearanceStyle = {
+    full: {
+        borderColor: null,
+    },
+    ghost: {
+        fill: null,
+        borderColor: null,
+    },
+    outlined: {
+        fill: null,
+    },
+    solid: {
+        borderColor: null,
+    },
+};
+
+var badgeAppearanceSuccess = {
+    success: {
+        fill: 'successPrimary',
+        fillHover: 'successPrimaryHover',
+        textColor: 'successTextPrimary',
+        borderColor: 'successBorderPrimary',
+        dotFill: 'successItemPrimary',
+        iconFill: 'successItemPrimary',
+    },
+};
+
+var badgeAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        textColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+        dotFill: 'surfaceItemPrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        textColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderSecondary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+    },
+    surfaceQuaternary: {
+        fill: 'accentPrimary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextInverse',
+        borderColor: 'surfaceBorderPrimary',
+    },
+};
+
+var badgeAppearanceWarning = {
+    warning: {
+        fill: 'warningPrimary',
+        fillHover: 'warningPrimary',
+        textColor: 'warningTextSecondary',
+        borderColor: 'warningBorderPrimary',
+        dotFill: 'warningItemPrimary',
+        iconFill: 'warningItemPrimary',
+    },
+};
+
+var badgeAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, badgeAppearanceSize), badgeAppearanceStyle), badgeAppearanceAccent), badgeAppearanceDanger), badgeAppearanceError), badgeAppearanceInfo), badgeAppearancePrimary), badgeAppearanceSecondary), badgeAppearanceSuccess), badgeAppearanceSurface), badgeAppearanceWarning);
+
+var badgeConfig = {
+    appearance: badgeAppearance,
+    setAppearance: function (appearanceConfig) {
+        badgeConfig.appearance = appearanceConfig;
+    },
+};
+function Badge(props) {
+    var className = props.className, appearance = props.appearance, children = props.children, dot = props.dot, icon = props.icon, iconSrc = props.iconSrc, value = props.value, isSkeleton = props.isSkeleton;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultApperance, appearance) {
+        var _a;
+        return (tslib_es6.__assign(tslib_es6.__assign({}, resultApperance), (_a = badgeConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, dotFillClass = propsGenerator.dotFillClass, iconFill = propsGenerator.iconFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, positionClass = propsGenerator.positionClass, _a = propsGenerator.shapeClass, shapeClass = _a === void 0 ? 'rounded' : _a, _b = propsGenerator.sizeClass, sizeClass = _b === void 0 ? 'm' : _b;
+    // @ts-expect-error
+    var badgeStyles = useStyles.useStyles(props).styles;
+    var badgeTypeClass = value
+        ? icon
+            ? dot
+                ? 'badge_type_dot-icon-counter'
+                : 'badge_type_icon-counter'
+            : 'badge_type_counter'
+        : icon
+            ? 'badge_type_icon'
+            : dot
+                ? 'badge_type_dot'
+                : 'badge_type_fill';
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'badge', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass &&
+            "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), positionClass && "position_".concat(positionClass), sizeClass && "badge_size_".concat(sizeClass), shapeClass && "badge_shape_".concat(shapeClass), badgeTypeClass, isSkeleton && "badge_skeleton"), style: badgeStyles, children: [dot && (jsxRuntime.jsx("div", { className: clsx('badge__dot', dotFillClass && "svg_fill_".concat(dotFillClass)), children: jsxRuntime.jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsxRuntime.jsx(Icon.Icon, { className: "badge__icon", iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), children ||
+                (value && (jsxRuntime.jsx(Text.Text, { className: "badge__value", textColor: textColor, size: textSize, children: value })))] }));
+}
+
+exports.Badge = Badge;
+exports.badgeAppearance = badgeAppearance;
+exports.badgeConfig = badgeConfig;

package/dist/Badge-CGHosmYx.js

@@ -0,0 +1,246 @@
+import { _ as __assign } from './tslib.es6-5FtW-kfi.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { useStyles } from './hooks/useStyles/useStyles.js';
+import { I as Icon } from './Icon-htF_V35Y.js';
+import { T as Text } from './Text-C6NSmetx.js';
+
+var defaultAppearance = {
+    accent: {
+        fill: 'accentPrimary',
+        fillHover: 'accentPrimaryHover',
+        borderColor: 'accentBorderPrimary',
+        textColor: 'accentTextPrimary',
+    },
+    accentPrimary: {
+        fill: 'accentPrimary',
+        borderColor: 'accentBorderQuaternary',
+        textColor: 'accentTextPrimary',
+        iconFill: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentSecondary',
+        borderColor: 'accentBorderQuaternary',
+        textColor: 'accentTextQuaternary',
+        iconFill: 'accentItemQuaternary',
+    },
+    accentTertiary: {
+        fill: 'accentTertiary',
+        borderColor: 'accentBorderSecondary',
+        textColor: 'accentTextSecondary',
+        iconFill: 'accentItemSecondary',
+    },
+    accentQuaternary: {
+        fill: 'accentQuaternary',
+        borderColor: 'accentBorderPrimary',
+        textColor: 'accentTextPrimary',
+        iconFill: 'accentItemPrimary',
+    },
+};
+
+var badgeAppearanceAccent = {
+    accent: __assign(__assign({}, defaultAppearance.accent), { dotFill: 'accentItemPrimary', iconFill: 'accentItemPrimary' }),
+    accentPrimary: __assign(__assign({}, defaultAppearance.accentPrimary), { dotFill: 'accentItemPrimary' }),
+    accentSecondary: __assign(__assign({}, defaultAppearance.accentSecondary), { dotFill: 'accentItemPrimary' }),
+    accentTertiary: __assign(__assign({}, defaultAppearance.accentTertiary), { dotFill: 'accentItemPrimary' }),
+    accentQuaternary: __assign(__assign({}, defaultAppearance.accentQuaternary), { dotFill: 'accentItemPrimary' }),
+};
+
+var badgeAppearanceDanger = {
+    danger: {
+        fill: 'dangerPrimary',
+        fillHover: 'dangerPrimary',
+        borderColor: 'dangerBorderPrimary',
+        textColor: 'dangerTextSecondary',
+        dotFill: 'dangerItemPrimary',
+        iconFill: 'dangerItemPrimary',
+    },
+};
+
+var badgeAppearanceError = {
+    error: {
+        fill: 'errorPrimary',
+        fillHover: 'errorPrimaryHover',
+        labelTextColor: 'errorTextPrimary',
+        labelTextColorHover: 'errorTextPrimary',
+        loaderFill: 'errorPrimary',
+        loaderItemFill: 'errorItemPrimary',
+        iconFill: 'errorItemPrimary',
+    },
+};
+
+var badgeAppearanceInfo = {
+    info: {
+        fill: 'infoPrimary',
+        fillHover: 'infoPrimaryHover',
+        textColor: 'infoTextPrimary',
+        borderColor: 'infoBorderSecondary',
+        dotFill: 'infoItemPrimary',
+        iconFill: 'infoItemPrimary',
+    },
+    infoSecondary: {
+        fill: 'infoSecondary',
+        fillHover: 'infoSecondaryHover',
+        textColor: 'infoTextSecondary',
+        borderColor: 'infoBorderSecondary',
+        dotFill: 'infoItemSecondary',
+    },
+};
+
+var badgeAppearancePrimary = {
+    primary: {
+        fill: 'primaryPrimary',
+        fillHover: 'primaryPrimaryHover',
+        textColor: 'primaryTextPrimary',
+        borderColor: 'primaryBorderSecondary',
+        dotFill: 'primaryItemPrimary',
+        iconFill: 'primaryItemPrimary',
+    },
+};
+
+var badgeAppearanceSecondary = {
+    secondary: {
+        fill: 'secondaryPrimary',
+        fillHover: 'secondaryPrimaryHover',
+        textColor: 'secondaryTextPrimary',
+        borderColor: 'secondaryBorderSecondary',
+        dotFill: 'secondaryItemPrimary',
+        iconFill: 'secondaryItemPrimary',
+    },
+};
+
+var badgeAppearanceSize = {
+    sizeXXL: {
+        textSize: 'xl',
+        size: 'xxl',
+        iconSize: 24
+    },
+    sizeXL: {
+        textSize: 'l',
+        size: 'xl',
+    },
+    sizeL: {
+        textSize: 'l',
+        size: 'l',
+    },
+    sizeM: {
+        textSize: 'm',
+        size: 'm',
+    },
+    sizeS: {
+        textSize: 's',
+        size: 's',
+    },
+    sizeXS: {
+        textSize: 'xs',
+        size: 'xs',
+    },
+    sizeXXS: {
+        textSize: 'xs',
+        size: 'xxs',
+    },
+};
+
+var badgeAppearanceStyle = {
+    full: {
+        borderColor: null,
+    },
+    ghost: {
+        fill: null,
+        borderColor: null,
+    },
+    outlined: {
+        fill: null,
+    },
+    solid: {
+        borderColor: null,
+    },
+};
+
+var badgeAppearanceSuccess = {
+    success: {
+        fill: 'successPrimary',
+        fillHover: 'successPrimaryHover',
+        textColor: 'successTextPrimary',
+        borderColor: 'successBorderPrimary',
+        dotFill: 'successItemPrimary',
+        iconFill: 'successItemPrimary',
+    },
+};
+
+var badgeAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        textColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+        dotFill: 'surfaceItemPrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillHover: 'surfaceSecondaryHover',
+        textColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderSecondary',
+    },
+    surfaceTertiary: {
+        fill: 'surfaceTertiary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderTertiary',
+    },
+    surfaceQuaternary: {
+        fill: 'accentPrimary',
+        fillHover: 'surfaceTertiaryHover',
+        textColor: 'surfaceTextInverse',
+        borderColor: 'surfaceBorderPrimary',
+    },
+};
+
+var badgeAppearanceWarning = {
+    warning: {
+        fill: 'warningPrimary',
+        fillHover: 'warningPrimary',
+        textColor: 'warningTextSecondary',
+        borderColor: 'warningBorderPrimary',
+        dotFill: 'warningItemPrimary',
+        iconFill: 'warningItemPrimary',
+    },
+};
+
+var badgeAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, badgeAppearanceSize), badgeAppearanceStyle), badgeAppearanceAccent), badgeAppearanceDanger), badgeAppearanceError), badgeAppearanceInfo), badgeAppearancePrimary), badgeAppearanceSecondary), badgeAppearanceSuccess), badgeAppearanceSurface), badgeAppearanceWarning);
+
+var badgeConfig = {
+    appearance: badgeAppearance,
+    setAppearance: function (appearanceConfig) {
+        badgeConfig.appearance = appearanceConfig;
+    },
+};
+function Badge(props) {
+    var className = props.className, appearance = props.appearance, children = props.children, dot = props.dot, icon = props.icon, iconSrc = props.iconSrc, value = props.value, isSkeleton = props.isSkeleton;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultApperance, appearance) {
+        var _a;
+        return (__assign(__assign({}, resultApperance), (_a = badgeConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearance]));
+    }, {});
+    var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColor = propsGenerator.textColor, textSize = propsGenerator.textSize, dotFillClass = propsGenerator.dotFillClass, iconFill = propsGenerator.iconFill, iconShape = propsGenerator.iconShape, iconSize = propsGenerator.iconSize, positionClass = propsGenerator.positionClass, _a = propsGenerator.shapeClass, shapeClass = _a === void 0 ? 'rounded' : _a, _b = propsGenerator.sizeClass, sizeClass = _b === void 0 ? 'm' : _b;
+    // @ts-expect-error
+    var badgeStyles = useStyles(props).styles;
+    var badgeTypeClass = value
+        ? icon
+            ? dot
+                ? 'badge_type_dot-icon-counter'
+                : 'badge_type_icon-counter'
+            : 'badge_type_counter'
+        : icon
+            ? 'badge_type_icon'
+            : dot
+                ? 'badge_type_dot'
+                : 'badge_type_fill';
+    return (jsxs("div", { className: clsx(className, 'badge', borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass &&
+            "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), positionClass && "position_".concat(positionClass), sizeClass && "badge_size_".concat(sizeClass), shapeClass && "badge_shape_".concat(shapeClass), badgeTypeClass, isSkeleton && "badge_skeleton"), style: badgeStyles, children: [dot && (jsx("div", { className: clsx('badge__dot', dotFillClass && "svg_fill_".concat(dotFillClass)), children: jsx("svg", { width: "6", height: "6", viewBox: "0 0 6 6", xmlns: "http://www.w3.org/2000/svg", children: jsx("rect", { width: "6", height: "6", rx: "50" }) }) })), icon && (jsx(Icon, { className: "badge__icon", iconFill: iconFill, imageSrc: iconSrc, shape: iconShape, size: iconSize, SvgImage: icon })), children ||
+                (value && (jsx(Text, { className: "badge__value", textColor: textColor, size: textSize, children: value })))] }));
+}
+
+export { Badge as B, badgeConfig as a, badgeAppearance as b };