@itcase/ui 1.8.108 → 1.8.109

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

@@ -1,52 +1,70 @@
-import { CSSProperties, ElementType, ReactNode } from 'react';
-import { AppearanceKeysDefault, FillProps, SvgFillProps, TextAlignProps, TextColorActiveProps, TextColorHoverProps, TextColorProps, TextGradientProps, TextStyleProps, TextWeightProps, TextWrapProps, TitleSizeProps } from '@itcase/types';
+import { CSSProperties, ReactNode } from 'react';
+import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceStyleKey, AppearanceTitleSizeKey, CompositeAppearanceTitleKey, DirectionHVProps, FillHoverProps, FillProps, SvgFillHoverProps, SvgFillProps, TextAlignProps, TextColorActiveHoverProps, TextColorActiveProps, TextColorHoverProps, TextColorProps, TextSizeProps, TextTagProps, TextWeightProps, TextWrapProps, TitleSizeProps } from '@itcase/types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
-interface TitleThemeColor {
-    [key: number | string | symbol]: any;
+import { IconProps } from '../Icon/Icon.interface';
+type TitleAppearanceProps = {
+    direction?: string;
     fill?: FillProps;
+    fillHover?: FillHoverProps;
+    iconAfter?: IconProps['SvgImage'];
+    iconAfterFill?: IconProps['fill'];
+    iconAfterFillIcon?: IconProps['iconFill'];
+    iconAfterFillSize?: IconProps['fillSize'];
+    iconAfterShape?: IconProps['shape'];
+    iconAfterSize?: IconProps['iconSize'];
+    iconAfterSrc?: IconProps['imageSrc'];
+    iconBadgeAppearance?: IconProps['badgeAppearance'];
+    iconBadgeShape?: IconProps['badgeShape'];
+    iconBadgeSize?: IconProps['badgeSize'];
+    iconBadgeTextColor?: TextColorProps;
+    iconBadgeTextSize?: TextSizeProps;
+    iconBadgeValue?: IconProps['badgeValue'];
+    iconBefore?: IconProps['SvgImage'];
+    iconBeforeFill?: IconProps['fill'];
+    iconBeforeFillIcon?: IconProps['iconFill'];
+    iconBeforeFillSize?: IconProps['fillSize'];
+    iconBeforeShape?: IconProps['shape'];
+    iconBeforeSize?: IconProps['iconSize'];
+    iconBeforeSrc?: IconProps['imageSrc'];
     size?: TitleSizeProps;
-    sizeDesktop?: TitleSizeProps;
-    sizeMobile?: TitleSizeProps;
-    sizeTablet?: TitleSizeProps;
     svgFill?: SvgFillProps;
-    svgFillHover?: SvgFillProps;
+    svgFillHover?: SvgFillHoverProps;
+    textAlign?: TextAlignProps;
     textColor?: TextColorProps;
     textColorActive?: TextColorActiveProps;
+    textColorActiveHover?: TextColorActiveHoverProps;
+    textColorDisabled?: string;
     textColorHover?: TextColorHoverProps;
-    textGradient?: TextGradientProps;
-    textStyle?: TextStyleProps;
+    textStyle?: string;
+    textTruncate?: boolean;
     textWeight?: TextWeightProps;
     textWrap?: TextWrapProps;
-    weight?: TextWeightProps;
-}
-type AppearanceKeys = AppearanceKeysDefault & {};
-export type TitleAppearanceType = {
-    [key in AppearanceKeys]: TitleThemeColor;
+    wrapperDirection?: DirectionHVProps;
 };
-export interface TitleConfig {
-    [key: number | string | symbol]: any;
-    appearance: TitleAppearanceType | undefined;
-    setAppearance: (newComponent: TitleAppearanceType) => void;
-}
-export interface TitleProps extends TitleThemeColor, StyleAttributes {
-    [key: number | string | symbol]: any;
-    after?: any;
-    afterWrapper?: any;
-    appearance?: AppearanceKeys;
-    before?: any;
-    beforeWrapper?: any;
-    children: ReactNode;
+type TitleProps = StyleAttributes & TitleAppearanceProps & {
+    after?: string;
+    afterWrapper?: string;
+    appearance?: CompositeAppearanceTitleKey;
+    before?: string;
+    beforeWrapper?: string;
+    children?: ReactNode;
     className?: string;
+    dataTestId?: string;
     dataTour?: string;
-    direction?: string;
-    directionWrapper?: string;
-    mode?: string;
+    isActive?: boolean;
+    isDisabled?: boolean;
+    isSkeleton?: boolean;
+    onClick: () => void;
     style?: CSSProperties;
-    tag?: ElementType;
+    tag: TextTagProps;
     text?: string;
-    textAlign?: TextAlignProps;
-    textTruncate?: boolean;
-    type?: string;
-    onClick?: () => void;
-}
-export {};
+};
+type TitleAppearanceKey = AppearanceKeysDefault | AppearanceShapeKey | AppearanceStyleKey | AppearanceTitleSizeKey;
+type TitleAppearance = {
+    [key in TitleAppearanceKey]?: TitleAppearanceProps;
+};
+type TitleConfig = {
+    appearance: TitleAppearance;
+    setAppearance: (appearanceConfig: TitleAppearance) => void;
+};
+export type { TitleAppearance, TitleConfig, TitleProps };

package/dist/types/components/Title/appearance/titleAccent.d.ts

@@ -1,20 +1,3 @@
-declare const titleAppearanceAccent: {
-    accent: {
-        fill: string;
-        fillHover: string;
-    };
-    accentPrimary: {
-        fill: string;
-        fillHover: string;
-        borderColor: string;
-    };
-    accentSecondary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-        labelTextColorHover: string;
-        borderColor: string;
-        loaderItemFill: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceAccent: TitleAppearance;
 export { titleAppearanceAccent };

package/dist/types/components/Title/appearance/titleDanger.d.ts

@@ -1,7 +1,3 @@
-declare const titleAppearanceDanger: {
-    danger: {
-        fill: string;
-        fillHover: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceDanger: TitleAppearance;
 export { titleAppearanceDanger };

package/dist/types/components/Title/appearance/titleDisabled.d.ts

@@ -1,20 +1,3 @@
-declare const titleAppearanceDisabled: {
-    disabledPrimary: {
-        fill: string;
-        borderColor: string;
-        borderHover: string;
-        textColor: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
-        placeholderTextColor: string;
-    };
-    disabledSecondary: {
-        fill: string;
-        borderColor: string;
-        borderHover: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
-        placeholderTextColor: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceDisabled: TitleAppearance;
 export { titleAppearanceDisabled };

package/dist/types/components/Title/appearance/titleError.d.ts

@@ -1,11 +1,3 @@
-declare const titleAppearanceError: {
-    error: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-        labelTextColorHover: string;
-        loaderFill: string;
-        loaderItemFill: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceError: TitleAppearance;
 export { titleAppearanceError };

package/dist/types/components/Title/appearance/titleInfo.d.ts

@@ -1,21 +1,3 @@
-declare const titleAppearanceInfo: {
-    info: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-        labelTextColorHover: string;
-        borderColor: string;
-        loaderFill: string;
-        loaderItemFill: string;
-    };
-    infoSecondary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-        labelTextColorHover: string;
-        borderColor: string;
-        loaderFill: string;
-        loaderItemFill: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceInfo: TitleAppearance;
 export { titleAppearanceInfo };

package/dist/types/components/Title/appearance/titlePrimary.d.ts

@@ -1,8 +1,3 @@
-declare const titleAppearancePrimary: {
-    primary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearancePrimary: TitleAppearance;
 export { titleAppearancePrimary };

package/dist/types/components/Title/appearance/titleRequire.d.ts

@@ -1,20 +1,3 @@
-declare const titleAppearanceRequire: {
-    requirePrimary: {
-        fill: string;
-        borderColor: string;
-        borderHover: string;
-        textColor: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
-        placeholderTextColor: string;
-    };
-    requireSecondary: {
-        fill: string;
-        borderColor: string;
-        borderHover: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
-        placeholderTextColor: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceRequire: TitleAppearance;
 export { titleAppearanceRequire };

package/dist/types/components/Title/appearance/titleSecondary.d.ts

@@ -1,8 +1,3 @@
-declare const titleAppearanceSecondary: {
-    secondary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceSecondary: TitleAppearance;
 export { titleAppearanceSecondary };

package/dist/types/components/Title/appearance/titleSize.d.ts

@@ -1,45 +1,3 @@
-declare const titleAppearanceSize: {
-    h1: {
-        size: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
-    };
-    h2: {
-        size: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
-    };
-    h3: {
-        size: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
-    };
-    h4: {
-        size: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
-    };
-    h5: {
-        size: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
-    };
-    h6: {
-        size: string;
-        iconAfterFillSize: string;
-        iconAfterSize: string;
-        iconBeforeFillSize: string;
-        iconBeforeSize: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceSize: TitleAppearance;
 export { titleAppearanceSize };

package/dist/types/components/Title/appearance/titleStyle.d.ts

@@ -1,16 +1,3 @@
-declare const titleAppearanceStyle: {
-    full: {
-        borderColor: string;
-    };
-    ghost: {
-        fill: string;
-        borderColor: string;
-    };
-    outlined: {
-        fill: string;
-    };
-    solid: {
-        borderColor: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceStyle: TitleAppearance;
 export { titleAppearanceStyle };

package/dist/types/components/Title/appearance/titleSuccess.d.ts

@@ -1,11 +1,3 @@
-declare const titleAppearanceSuccess: {
-    success: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-        labelTextColorHover: string;
-        loaderFill: string;
-        loaderItemFill: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceSuccess: TitleAppearance;
 export { titleAppearanceSuccess };

package/dist/types/components/Title/appearance/titleSurface.d.ts

@@ -1,25 +1,3 @@
-declare const titleAppearanceSurface: {
-    surfacePrimary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-    };
-    surfaceSecondary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-        loaderFill: string;
-        loaderItemFill: string;
-    };
-    surfaceTertiary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-    };
-    surfaceQuaternary: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceSurface: TitleAppearance;
 export { titleAppearanceSurface };

package/dist/types/components/Title/appearance/titleWarning.d.ts

@@ -1,11 +1,3 @@
-declare const titleAppearanceWarning: {
-    warning: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-        labelTextColorHover: string;
-        loaderFill: string;
-        loaderItemFill: string;
-    };
-};
+import { TitleAppearance } from '../Title.interface';
+declare const titleAppearanceWarning: TitleAppearance;
 export { titleAppearanceWarning };

package/dist/types/hooks/index.helpers.d.ts

@@ -0,0 +1,3 @@
+import { StyleAttributeOrValidator } from 'src/hooks/useStyles/styleAttributes.interface';
+declare const getStyleAttributeKey: (targetStyleAttribute: StyleAttributeOrValidator) => "fixed" | "hug" | "fill" | import("src/hooks/useStyles/styleAttributes.interface").StyleAttributes | import("csstype").Property.Width<0 | (string & {})> | undefined;
+export { getStyleAttributeKey };

package/dist/types/hooks/useActiveClasses/index.d.ts

@@ -0,0 +1,2 @@
+import { useActiveClasses } from './useActiveClasses';
+export { useActiveClasses };

package/dist/types/hooks/useActiveClasses/useActiveClasses.d.ts

@@ -0,0 +1,3 @@
+import type { UseActiveClasses, UseActiveClassesReturn } from './useActiveClasses.interface';
+declare const useActiveClasses: (params: UseActiveClasses) => UseActiveClassesReturn;
+export { useActiveClasses };

package/dist/types/hooks/useActiveClasses/useActiveClasses.helpers.d.ts

@@ -0,0 +1,5 @@
+import type { RulesConfig } from './useActiveClasses.interface';
+declare const CLASS_RULES: Record<string, RulesConfig[]>;
+declare const formatState: (key: string) => string;
+declare const toKebabCase: (str: string) => string;
+export { CLASS_RULES, formatState, toKebabCase };

package/dist/types/hooks/useActiveClasses/useActiveClasses.interface.d.ts

@@ -0,0 +1,26 @@
+declare const suffix: readonly ["Button", "Checkbox", "Radio", "Checkmark", "Avatar", "AvatarStack", "Badge", "Breadcrumbs", "Cell", "Chips", "Choice", "Code", "CookiesWarning", "Dadata", "DatePeriod", "Divider", "Dot", "Drawer", "Dropdown", "DropdownItem", "Flex", "Grid", "Group", "HeroTitle", "HTMLContent", "Icon", "Image", "Input", "InputPassword", "Label", "Link", "List", "Loader", "Logo", "MenuItem", "Modal", "ModalSheetBottom", "Notification", "Overlay", "Pagination", "RangeSlider", "Response", "ScrollBar", "ScrollOnDrag", "ScrollToView", "Search", "Segmented", "Select", "SvgContent", "Swiper", "Switch", "Tab", "Text", "Textarea", "Tile", "Title", "Tooltip", "Video", "Warning"];
+type SuffixComponents = (typeof suffix)[number];
+type SpecialSuffix<T extends string> = T extends 'HTMLContent' ? 'htmlContent' : Uncapitalize<T>;
+type SuffixKeys = SpecialSuffix<SuffixComponents>;
+interface PropsGenerator {
+    [key: string]: string;
+}
+interface UseActiveClassesReturn {
+    rootClasses: string;
+    suffixClasses: Record<SuffixKeys, string>;
+}
+interface UseActiveClasses {
+    propsGenerator: PropsGenerator;
+    suffixes?: SuffixComponents[];
+    isActive?: boolean;
+    isDisabled?: boolean;
+}
+interface RulesConfig {
+    key: string;
+    stateFn?: (params: {
+        isActive?: boolean;
+        isDisabled?: boolean;
+    }) => boolean;
+}
+export { suffix };
+export type { SuffixComponents, SuffixKeys, UseActiveClassesReturn, UseActiveClasses, RulesConfig, };

package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.d.ts

@@ -1,7 +1,7 @@
 import { KebabCase, WithClassKeys } from 'src/types';
 import type { AppearanceConfig, ComponentProps, GeneratorGetClassParams as GP } from './useDevicePropsGenerator.interface';
 declare function useDevicePropsGenerator<Props extends ComponentProps>(componentProps: Props, appearanceConfig?: AppearanceConfig): Props & {
-    getProp(propKey: string): string;
+    getProp(propKey: string): number | string | undefined;
     getClassName<K extends keyof Props, P extends GP | undefined = undefined>(propKey: K, params?: P): ReturnGetClassName<Props, K, P>;
 } & WithClassKeys<Props>;
 type ReturnGetClassName<Props, K extends keyof Props, Params = undefined> = Params extends undefined ? NonNullable<Props[K]> extends string ? KebabCase<NonNullable<Props[K]>> : string : Props[K];

package/dist/types/hooks/useStyles/styleAttributes.interface.d.ts

@@ -135,4 +135,7 @@ export interface TypeStyleLabelAttributes extends LabelInterface<StyleAttributes
 }
 export interface TypeStyleImageAttributes extends ImageInterface<StyleAttributes> {
 }
+export type StyleAttributeOrValidator = StyleAttributes | [StyleAttributes['width'], {
+    validate?: (value: string) => boolean;
+}];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.108",
+  "version": "1.8.109",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -103,7 +103,7 @@
     "@emotion/is-prop-valid": "^1.3.1",
     "@itcase/common": "^1.2.29",
     "@itcase/icons": "^1.2.19",
-    "@itcase/storybook-config": "^1.1.110",
+    "@itcase/storybook-config": "^1.1.112",
     "@itcase/tokens-am": "^1.1.19",
     "@itcase/tokens-baikal": "^1.1.17",
     "@itcase/tokens-palette": "^1.1.11",
@@ -139,9 +139,9 @@
     "@babel/preset-react": "^7.27.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@itcase/config": "^1.0.55",
+    "@itcase/config": "^1.0.56",
     "@itcase/lint": "^1.1.37",
-    "@itcase/types": "^1.0.33",
+    "@itcase/types": "^1.0.42",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.6",
@@ -171,13 +171,13 @@
     "lint-staged": "^16.1.5",
     "prettier": "^3.6.2",
     "react-docgen-typescript": "^2.4.0",
-    "rollup": "^4.47.0",
+    "rollup": "^4.47.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.7",
-    "storybook": "^9.1.2",
+    "storybook": "^9.1.3",
     "stylelint": "^16.23.1",
     "typescript": "^5.9.2"
   }