@itcase/ui 1.8.94 → 1.8.95

package/dist/css/styles/text-color/text-color_hover.css

@@ -2,10 +2,8 @@
   &&-color {
     &_hover {
       @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-        error, success, warning, info, danger, gradient, disabled, hover,
-        inverse {
-        @each $color in primary, secondary, tertiary, quaternary, accent,
-          disabled, hover, inverse {
+        error, success, warning, info, danger {
+        @each $color in primary, secondary, tertiary, quaternary {
           &_$(type) {
             &-text {
               &-$(color) {

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -37,7 +37,8 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
      *   "fillClass" - is "surface-secondary"
      *
      * Usage for props value for device:
-     *   const { titleTextSize } = propsGenerator / const titleTextSize = propsGenerator.titleTextSize   *
+     *   const { titleTextSize } = propsGenerator / const titleTextSize = propsGenerator.titleTextSize
+     *
      *   "titleTextSize" - contain some value from props:
      *     - titleTextSize
      *     - titleTextSizeMobile
@@ -48,12 +49,12 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
     var deviceCurrentMainType = useUserDeviceContext().deviceCurrentMainType;
     var devicePropsGenerator = useMemo(function () {
         var propsGenerator = {
-            getProp: function (propsKey) {
-                var propsForDeviceKey = "".concat(propsKey).concat(upperFirst(deviceCurrentMainType));
+            getProp: function (propKey) {
+                var propsForDeviceKey = "".concat(propKey).concat(upperFirst(deviceCurrentMainType));
                 var valueForDevice = componentProps[propsForDeviceKey];
-                var valueDefault = componentProps[propsKey];
+                var valueDefault = componentProps[propKey];
                 var appearanceForDevice = appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig[propsForDeviceKey];
-                var appearanceDefault = appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig[propsKey];
+                var appearanceDefault = appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig[propKey];
                 // prettier-ignore
                 var targetPropsValue = (
                 // Value for device from props is first priority
@@ -67,11 +68,10 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
                 return targetPropsValue;
             },
             // eslint-disable-next-line perfectionist/sort-objects
-            getClassName: function (propsKey, params) {
-                if (params === void 0) { params = {}; }
-                var _a = params.prefix, prefix = _a === void 0 ? '' : _a, _b = params.replace, replace = _b === void 0 ? [/([A-Z])/g, '-$1'] : _b;
+            getClassName: function (propKey, params) {
+                var _a = params || {}, _b = _a.prefix, prefix = _b === void 0 ? '' : _b, _c = _a.replace, replace = _c === void 0 ? [/([A-Z])/g, '-$1'] : _c;
                 // prettier-ignore
-                var targetClassValue = this.getProp(propsKey);
+                var targetClassValue = this.getProp(String(propKey));
                 if (targetClassValue) {
                     var cleanClassValue = String(targetClassValue);
                     if (!cleanClassValue.includes('.')) {
@@ -79,8 +79,11 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
                     }
                     if (replace) {
                         var replaceList = castArray(replace);
-                        cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
+                        cleanClassValue = cleanClassValue.replace(replaceList[0], 
+                        // @ts-expect-error
+                        replaceList[1] || '');
                     }
+                    // prettier-ignore
                     return "".concat(prefix).concat(cleanClassValue).toLowerCase();
                 }
                 // If target key not exists in props and appearance config - return empty class
@@ -88,29 +91,31 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
             },
         };
         var generatorProxyHandler = {
-            get: function (target, prop, receiver) {
+            get: function (target, propKey, receiver) {
                 var args = [];
                 for (var _i = 3; _i < arguments.length; _i++) {
                     args[_i - 3] = arguments[_i];
                 }
-                if (typeof prop === 'string') {
+                if (typeof propKey === 'string') {
                     // If object does not have the property being retrieved
-                    if (!Reflect.has(target, prop)) {
+                    if (!Reflect.has(target, propKey)) {
                         // And property ended on "Class" keyword
-                        if (prop.endsWith('Class')) {
-                            var shortProp = prop.substring(0, prop.lastIndexOf('Class'));
+                        if (propKey.endsWith('Class')) {
+                            // prettier-ignore
+                            var shortProp = propKey.substring(0, propKey.lastIndexOf('Class'));
                             // Return prop from props for device as formatted class name
                             return target.getClassName(shortProp);
                         }
                         // Return prop from props for device
-                        return target.getProp(prop);
+                        return target.getProp(propKey);
                     }
                     // Return object property. Original "get".
-                    return Reflect.get.apply(Reflect, __spreadArray([target, prop, receiver], args, false));
+                    // @ts-expect-error
+                    return Reflect.get.apply(Reflect, __spreadArray([target, propKey, receiver], args, false));
                 }
                 // In some cases, like in Chrome browser, sometime "prop" is not string.
                 // We return this object as is.
-                return prop;
+                return propKey;
             },
         };
         return new Proxy(propsGenerator, generatorProxyHandler);

package/dist/types/components/Accordion/Accordion.interface.d.ts

@@ -1,32 +1,14 @@
 import type { CSSProperties, ReactNode } from 'react';
-import { AppearanceKeysDefault, BorderColorProps, DirectionProps, FillHoverProps, FillProps, HeightProps, ItemColorProps, ShapeProps, SizeProps, TextColorProps, TextWeightProps, WidthProps } from '@itcase/types';
+import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceKey, FillProps, ShapeProps, SizeProps, TextColorProps, TextSizeProps, DirectionProps, FillHoverProps, HeightProps, ItemColorProps, TextWeightProps, WidthProps } from '@itcase/types';
 import type { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
-export interface AccordionThemeColor {
-}
-export interface AccordionItemThemeColor {
-}
-type AppearanceKeys = AppearanceKeysDefault & {};
-export type AccordionAppearanceType = {
-    [key in AppearanceKeys]?: AccordionThemeColor;
-};
-export type AccordionItemAppearanceType = {
-    [key in AppearanceKeys]?: AccordionItemThemeColor;
-};
-export interface AccordionConfig {
-    appearance: AccordionAppearanceType | undefined;
-    setAppearance: (newComponent: AccordionAppearanceType) => void;
-}
-export interface AccordionItemConfig {
-    appearance: AccordionItemAppearanceType | undefined;
-    setAppearance: (newComponent: AccordionItemAppearanceType) => void;
-}
-interface AccordionItemEventData {
+type AccordionProps = {};
+type AccordionItemEventData = {
     id: number | string;
     content?: ReactNode;
     title: string;
     isExpanded: boolean;
-}
-interface AccordionProps extends AccordionThemeColor, StyleAttributes {
+};
+type AccordionItemAppearanceProps = {
     [key: number | string | symbol]: any;
     appearance?: AppearanceKeys;
     borderColor?: BorderColorProps;
@@ -46,12 +28,11 @@ interface AccordionProps extends AccordionThemeColor, StyleAttributes {
     width?: WidthProps;
     isMultiple?: boolean;
     onClickItem?: (T: AccordionItemEventData) => void;
-}
-interface AccordionItemProps extends AccordionItemThemeColor, StyleAttributes {
+};
+type AccordionItemProps = AccordionItemAppearanceProps & StyleAttributes & {
     id: number | string;
-    [key: number | string | symbol]: any;
     afterContent?: ReactNode;
-    appearance?: AppearanceKeys;
+    appearance?: CompositeAppearanceKey;
     beforeContent?: ReactNode;
     borderColor?: BorderColorProps;
     children?: ReactNode;
@@ -66,16 +47,11 @@ interface AccordionItemProps extends AccordionItemThemeColor, StyleAttributes {
     dividerFill?: FillProps;
     dividerSize?: SizeProps;
     fill?: FillProps;
-    fillDesktop?: FillProps;
-    fillHover?: FillHoverProps;
-    fillMobile?: FillProps;
-    fillTablet?: FillProps;
     height?: HeightProps;
     icon?: ReactNode;
     iconFill?: ItemColorProps;
-    iconFillDesktop?: ItemColorProps;
-    iconFillMobile?: ItemColorProps;
-    iconFillTablet?: ItemColorProps;
+    isExpanded?: boolean;
+    onClick?: (T: AccordionItemEventData) => void;
     shape?: ShapeProps;
     shapeDesktop?: ShapeProps;
     shapeMobile?: ShapeProps;
@@ -88,10 +64,16 @@ interface AccordionItemProps extends AccordionItemThemeColor, StyleAttributes {
     titleFill?: FillProps;
     titleFillHover?: FillHoverProps;
     titleTextColor?: TextColorProps;
-    titleTextSize?: SizeProps;
+    titleTextSize?: TextSizeProps;
     titleTextWeight?: TextWeightProps;
     width?: WidthProps;
-    isExpanded?: boolean;
-    onClick?: (T: AccordionItemEventData) => void;
-}
-export type { AccordionItemEventData, AccordionProps, AccordionItemProps };
+};
+type AccordionItemAppearanceKey = AppearanceKeysDefault | AppearanceShapeKey | AppearanceSizeKey | AppearanceStyleKey;
+type AccordionItemAppearance = {
+    [key in AccordionItemAppearanceKey]?: AccordionItemAppearanceProps;
+};
+type AccordionItemConfig = {
+    appearance: AccordionItemConfig | undefined;
+    setAppearance: (appearanceConfig: AccordionItemConfig) => void;
+};
+export type { AccordionItemAppearance, AccordionItemConfig, AccordionItemEventData, AccordionItemProps, AccordionProps, };

package/dist/types/components/Badge/Badge.appearance.d.ts

@@ -1,2 +1,230 @@
-import { BadgeAppearanceType } from './Badge.interface';
-export declare const badgeAppearance: BadgeAppearanceType;
+export declare const badgeAppearance: {
+    warning: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    warningPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    surfacePrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    surfaceQuaternary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+    };
+    surfaceSecondary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+    };
+    surfaceTertiary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+    };
+    disabled: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    disabledPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        iconFill: string;
+    };
+    success: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    successPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    secondary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    secondaryPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    primary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    primaryPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    infoPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    infoSecondary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+    };
+    error: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        iconFill: string;
+    };
+    errorPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        iconFill: string;
+    };
+    danger: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    dangerPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    accent: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    accentPrimary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    accentQuaternary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    accentSecondary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    accentTertiary: {
+        fill: string;
+        borderColor: string;
+        textColor: string;
+        dotFill: string;
+        iconFill: string;
+    };
+    solid: {
+        borderColor: string;
+    };
+    outlined: {
+        fill: string;
+    };
+    full: {};
+    ghost: {
+        fill: string;
+        borderColor: string;
+    };
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    sizeXXL: {
+        size: string;
+        textSize: string;
+        iconSize: number;
+    };
+    sizeXL: {
+        size: string;
+        textSize: string;
+    };
+    sizeL: {
+        size: string;
+        textSize: string;
+    };
+    sizeM: {
+        size: string;
+        textSize: string;
+    };
+    sizeS: {
+        size: string;
+        textSize: string;
+    };
+    sizeXS: {
+        size: string;
+        textSize: string;
+    };
+    sizeXXS: {
+        size: string;
+        textSize: string;
+    };
+};

package/dist/types/components/Badge/Badge.interface.d.ts

@@ -1,35 +1,42 @@
 import { CSSProperties, ReactNode } from 'react';
-import { AppearanceKeysDefault, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, FillHoverProps, FillProps, ShapeProps, SizeProps, TextColorProps, TextSizeProps } from '@itcase/types';
+import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKey, FillHoverProps, FillProps, IconSizeProps, ShapeProps, ShapeStrengthProps, SizeProps, TextColorProps, TextSizeProps } from '@itcase/types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
-export interface BadgeThemeColor {
-    [key: number | string | symbol]: any;
+type BadgeAppearanceProps = {
     borderColor?: BorderColorProps;
     borderColorHover?: BorderColorHoverProps;
     borderType?: BorderTypeProps;
     borderWidth?: BorderWidthProps;
+    dotFill?: FillProps;
     fill?: FillProps;
     fillHover?: FillHoverProps;
-    shape?: ShapeProps;
+    iconFill?: FillProps;
+    iconShape?: ShapeProps;
+    iconSize?: IconSizeProps;
     size?: SizeProps;
     textColor?: TextColorProps;
     textSize?: TextSizeProps;
-}
-type AppearanceKeys = AppearanceKeysDefault & {};
-export type BadgeAppearanceType = {
-    [key in AppearanceKeys]?: BadgeThemeColor;
 };
-export interface BadgeConfig {
-    [key: number | string | symbol]: any;
-    appearance: BadgeAppearanceType | undefined;
-    setAppearance: (newComponent: BadgeAppearanceType) => void;
-}
-export interface BadgeProps extends BadgeThemeColor, StyleAttributes {
-    [key: number | string | symbol]: any;
-    appearance?: AppearanceKeys;
+type BadgeProps = BadgeAppearanceProps & StyleAttributes & {
+    appearance?: CompositeAppearanceKey;
     children?: ReactNode;
     className?: string;
-    mode?: string;
+    dot?: boolean;
+    icon?: string;
+    iconSrc?: string;
+    isSkeleton?: boolean;
+    shape?: ShapeProps;
+    shapeStrength?: ShapeStrengthProps;
     style?: CSSProperties;
+    text?: string;
+    type?: 'circular' | 'dot' | 'simple';
     value?: string;
-}
-export {};
+};
+type BadgeAppearanceKey = AppearanceKeysDefault | AppearanceShapeKey | AppearanceSizeKey | AppearanceStyleKey;
+type BadgeAppearance = {
+    [key in BadgeAppearanceKey]?: BadgeAppearanceProps;
+};
+type BadgeConfig = {
+    appearance: BadgeAppearance;
+    setAppearance: (appearanceConfig: BadgeAppearance) => void;
+};
+export type { BadgeAppearance, BadgeConfig, BadgeProps };

package/dist/types/components/Badge/appearance/badgeShape.d.ts

@@ -5,19 +5,19 @@ declare const badgeAppearanceShape: {
     rounded: {
         shape: string;
     };
-    roundedS: {
+    roundedXL: {
         shape: string;
         shapeStrength: string;
     };
-    roundedM: {
+    roundedL: {
         shape: string;
         shapeStrength: string;
     };
-    roundedL: {
+    roundedM: {
         shape: string;
         shapeStrength: string;
     };
-    roundedXL: {
+    roundedS: {
         shape: string;
         shapeStrength: string;
     };