@redneckz/wildless-cms-uni-blocks 0.14.839 → 0.14.841

package/mobile/src/components/Header/HeaderChatBotButton.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type BlockVersion } from '../../model/BlockVersion';
+import { type ComponentType } from '../../model/ComponentType';
 import { type IconVersion } from '../../model/IconVersion';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 import { useChatBot } from './useChatBot';
 
-interface HeaderChatBotButtonProps {
-  className?: string;
+interface HeaderChatBotButtonProps extends ComponentType {
   iconVersion?: IconVersion;
   chat?: string;
   onClick?: (ev: PreventableEventWithTarget) => void;

package/mobile/src/components/Header/HeaderSecondaryMenu.tsx

@@ -6,6 +6,7 @@ import { type NavigationData } from '../../data/NavigationData';
 import { getAspectsWithInclude } from '../../hooks/useAspects/aspects/getAspectsWithInclude';
 import { useLocation } from '../../hooks/useLocation';
 import { type BlockVersion } from '../../model/BlockVersion';
+import { type ComponentType } from '../../model/ComponentType';
 import { type IconVersion } from '../../model/IconVersion';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { useDialog } from '../../ui-kit/DialogManager/useDialog';
@@ -14,8 +15,8 @@ import { SearchDialog } from '../../ui-kit/SearchDialog/SearchDialog';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { style } from '../../utils/style';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
-export interface HeaderSecondaryMenuProps extends HeaderData, NavigationData {
-  className?: string;
+
+export interface HeaderSecondaryMenuProps extends HeaderData, NavigationData, ComponentType {
   search?: SearchHeaderProps;
   version?: BlockVersion;
 }

package/mobile/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -1,18 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type AspectsProps } from '../../model/AspectsProps';
 import { type BlockVersion } from '../../model/BlockVersion';
+import { type ComponentType } from '../../model/ComponentType';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { type ImageContent } from '../../ui-kit/Img/ImgProps';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { style } from '../../utils/style';
 
-export interface HeaderSecondaryMenuButtonProps extends ImageContent, AspectsProps {
-  className?: string;
+export interface HeaderSecondaryMenuButtonProps
+  extends ImageContent,
+    AspectsProps,
+    ComponentType,
+    DisabledProps {
   isRounded?: boolean;
   buttonSize?: 'default' | 'medium' | 'large';
   isGrayBg?: boolean;
-  disabled?: boolean;
   ariaLabel?: string;
   onClick?: (ev: PreventableEventWithTarget) => void;
   version?: BlockVersion;

package/mobile/src/components/Header/HeaderSubMenuItem.tsx

@@ -4,11 +4,11 @@ import {
   useIntersectionObserver,
   type IntersectionObserverOptions,
 } from '../../hooks/useIntersectionObserver';
+import { type ComponentType } from '../../model/ComponentType';
 import { type LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 
-export interface HeaderSubMenuItemProps extends LinkProps {
-  className?: string;
+export interface HeaderSubMenuItemProps extends LinkProps, ComponentType {
   active?: boolean;
   observerOptions?: IntersectionObserverOptions;
   onVisibilityChange?: (isIntersecting: boolean) => void;

package/mobile/src/components/Header/HeaderTopMenu.tsx

@@ -7,14 +7,14 @@ import { type TopMenuItemProps } from '../../data/NavigationData';
 import { type IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { type BgColorVersion } from '../../model/BgColorVersion';
 import { type BlockVersion } from '../../model/BlockVersion';
+import { type ComponentType } from '../../model/ComponentType';
 import { type LogoType } from '../../model/LogoType';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { DropdownMenu } from './DropdownMenu';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderTopMenuItem } from './HeaderTopMenuItem';
 
-export interface HeaderMenuProps {
-  className?: string;
+export interface HeaderMenuProps extends ComponentType {
   navigationItems?: TopMenuItemProps[];
   activeTopItem?: TopMenuItemProps;
   dropdownMenuAriaLabel?: string;

package/mobile/src/components/Header/HeaderTopMenuItem.tsx

@@ -4,11 +4,11 @@ import {
   useIntersectionObserver,
   type IntersectionObserverOptions,
 } from '../../hooks/useIntersectionObserver';
+import { type ComponentType } from '../../model/ComponentType';
 import { type LinkProps } from '../../model/LinkProps';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 
-export interface HeaderTopMenuItemProps extends LinkProps {
-  className?: string;
+export interface HeaderTopMenuItemProps extends LinkProps, ComponentType {
   active?: boolean;
   observerOptions?: IntersectionObserverOptions;
   onVisibilityChange?: (isIntersecting: boolean) => void;

package/mobile/src/components/OfficesAtmsMap/AtmsMap.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLocation } from '../../hooks/useLocation';
+import { type ComponentType } from '../../model/ComponentType';
 import { type AtmsDef } from './OfficesAtmsMapContent';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
 import { type Atm } from './OfficesAtmsMapProps';
@@ -24,9 +25,8 @@ const FILTRATION_PREDICATES = {
   designDisabledPeople: (item: Atm) => Boolean(item.designDisabledPeople),
 };
 
-export interface AtmsMapProps {
+export interface AtmsMapProps extends ComponentType {
   descriptionData?: AtmsDef;
-  className?: string;
 }
 
 export const AtmsMap = JSX<AtmsMapProps>(({ descriptionData, className }) => {

package/mobile/src/components/OfficesAtmsMap/Badge.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { Img } from '../../ui-kit/Img/Img';
 import { Text } from '../../ui-kit/Text/Text';
 import { type TextColor } from '../../ui-kit/Text/TextProps';
@@ -11,8 +12,7 @@ const colorStyle: Record<string, { border: string; text: TextColor }> = {
   red: { border: 'border-error/30', text: 'text-error' },
 };
 
-export interface BadgeProps {
-  className?: string;
+export interface BadgeProps extends ComponentType {
   color?: keyof typeof colorStyle;
 }
 

package/mobile/src/components/OfficesAtmsMap/CardCell.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
+import { type LabelProps } from '../../model/HeadlineType';
 import { Text } from '../../ui-kit/Text/Text';
 import { type TextColor, type TextSize } from '../../ui-kit/Text/TextProps';
 import { style } from '../../utils/style';
 
-export interface CardCellProps {
-  className?: string;
-  label?: string;
+export interface CardCellProps extends ComponentType, LabelProps {
   labelSize?: TextSize;
   value?: string | string[];
   subText?: string;

package/mobile/src/components/OfficesAtmsMap/CardRow.tsx

@@ -1,11 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 
-export interface CardRowProps {
-  className?: string;
-}
-
-export const CardRow = JSX<CardRowProps>(({ className, children }) => (
+export const CardRow = JSX<ComponentType>(({ className, children }) => (
   <div
     className={style(
       'flex flex-col sm:flex-row sm:border-t sm:border-solid sm:border-main-divider py-xl gap-x-6xl gap-y-xl',

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useForm } from '../../hooks/useForm/useForm';
+import { type ComponentType } from '../../model/ComponentType';
 import { type VNode } from '../../model/VNode';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
@@ -19,8 +20,7 @@ const defaultEmptyFunction = () => void 0;
 
 export type InitFilterState = Record<string, boolean>;
 
-export interface OfficesAtmsMapLayoutProps<T> {
-  className?: string;
+export interface OfficesAtmsMapLayoutProps<T> extends ComponentType {
   data?: T[];
   isLoad: boolean;
   remoteWorkplaces?: T[];

package/mobile/src/components/OfficesAtmsMap/OfficesMap.tsx

@@ -1,15 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLocation } from '../../hooks/useLocation';
+import { type ComponentType } from '../../model/ComponentType';
 import { OfficesAtmsMapLayout } from './OfficesAtmsMapLayout';
 import { getOfficePoint, renderOfficeCard } from './renderOfficeCard';
 import { getRemoteWorkplacePoint, renderRemoteWorkplaceCard } from './renderRemoteWorkplaceCard';
 import { useOffices } from './useOffices';
 
-export interface OfficesMapProps {
-  className?: string;
-}
-
-export const OfficesMap = JSX<OfficesMapProps>(({ className }) => {
+export const OfficesMap = JSX<ComponentType>(({ className }) => {
   const currentLocation = useLocation();
   const regionCode = currentLocation?.code ?? '000';
   const { data, isLoad } = useOffices(regionCode);

package/mobile/src/components/StickyBottomMenu/StickyBottomMenuDialog.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { type VNode } from '../../model/VNode';
 import { CloseButton } from '../../ui-kit/DialogManager/CloseButton';
 import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
 
-export interface StickyBottomMenuDialogProps {
-  className?: string;
+export interface StickyBottomMenuDialogProps extends ComponentType {
   head?: VNode;
   onClose?: () => void;
   onClick?: (e: PreventableEvent) => void;

package/mobile/src/components/TabsLayout/renderTabsLayout.tsx

@@ -1,14 +1,14 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { ScrollableTabsControl } from '../../ui-kit/TabsControl/ScrollableTabsControl';
 import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';
 import { type TabsControlProps, type TabsType } from '../../ui-kit/TabsControl/TabsControlProps';
 import { style } from '../../utils/style';
 
-interface RenderTabsProps {
+interface RenderTabsProps extends ComponentType {
   items: TabItemBase[];
   activeItem: TabItemBase;
   onChange: TabsControlProps['onChange'];
   tabsType?: TabsType;
-  className?: string;
 }
 
 const tabsStyle: Record<TabsType, { wrapper: string; component: string }> = {

package/mobile/src/data/CommonData.ts

@@ -1,7 +1,8 @@
 import { type AspectsProps } from '../model/AspectsProps';
 import { type LogoType } from '../model/LogoType';
+import { type PlaceholderProps } from '../model/PlaceholderProps';
 
-export type SearchHeaderProps = AspectsProps & { placeholder: string; ariaLabel: string };
+export type SearchHeaderProps = AspectsProps & PlaceholderProps & { ariaLabel: string };
 
 export interface CommonData {
   logo?: LogoType;

package/mobile/src/hooks/useForm/useForm.ts

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
-import { type ControlProps } from '../../ui-kit/ControlProps';
+import { type ControlProps } from '../../model/ControlProps';
 import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { type ValidationInfo } from '../../validation/validator';
 import { type FieldOptions } from './FieldOptions';

package/mobile/src/model/CommonInputProps.ts

@@ -0,0 +1,12 @@
+import { type ComponentType } from './ComponentType';
+import { type ControlProps } from './ControlProps';
+import { type DisabledProps } from './DisabledProps';
+import { type LabelProps, type TextProps } from './HeadlineType';
+
+export type CommonInputProps<T> = ComponentType &
+  ControlProps<T> &
+  DisabledProps &
+  LabelProps &
+  TextProps & {
+    error?: string;
+  };

package/mobile/src/model/ComponentType.ts

@@ -0,0 +1,4 @@
+export interface ComponentType {
+  /** @hidden */
+  className?: string;
+}

package/mobile/src/model/DefaultControlType.ts

@@ -1,8 +1,13 @@
-export interface DefaultControlType {
-  className?: string;
-  label?: string;
+import { type ComponentType } from './ComponentType';
+import { type DisabledProps } from './DisabledProps';
+import { type LabelProps } from './HeadlineType';
+import { type PlaceholderProps } from './PlaceholderProps';
+
+export interface DefaultControlType
+  extends ComponentType,
+    LabelProps,
+    DisabledProps,
+    PlaceholderProps {
   error?: string;
   errors?: string[];
-  placeholder?: string;
-  disabled?: boolean;
 }

package/mobile/src/model/DisabledProps.ts

@@ -0,0 +1,3 @@
+export interface DisabledProps {
+  disabled?: boolean;
+}

package/mobile/src/model/Picture.ts

@@ -1,4 +1,5 @@
 import { type IconName } from '../icons/IconName';
+import { type ComponentType } from './ComponentType';
 import { type IconVersion } from './IconVersion';
 import { type ImageSize } from './ImageSize';
 
@@ -36,10 +37,9 @@ export interface ImgSource {
 }
 
 /** @title Изображение */
-export interface Picture extends Img, ImgSource {
+export interface Picture extends Img, ImgSource, ComponentType {
   /** @title Другие форматы */
   sources?: ImgSource[];
-  className?: string;
 }
 
 export type IconProps = {

package/mobile/src/model/PlaceholderProps.ts

@@ -0,0 +1,3 @@
+export interface PlaceholderProps {
+  placeholder?: string;
+}

package/mobile/src/retail/components/DaDataInputControl/DaDataInputControl.tsx

@@ -1,13 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
-import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
-import { Input } from '../../../ui-kit/Input/Input';
 import { type InputProps } from '../../../ui-kit/Input/InputProps';
-import { renderErrorText } from '../../../ui-kit/Input/renderErrorText';
-import { getRequiredLabel } from '../../../utils/getRequiredLabel';
+import { InputWrapper } from '../../../ui-kit/Input/InputWrapper';
 import { noop } from '../../../utils/noop';
-import { style } from '../../../utils/style';
 import { type DaDataSuggestion } from '../../api/dadataHints/dadataHintsType';
 import { useInputPopup } from './useInputPopup';
 
@@ -19,38 +14,15 @@ export type DaDataInputProps = InputProps & {
 
 export const DaDataInputControl = JSX<DaDataInputProps>(
   ({
-    className,
-    label,
     value = '',
-    placeholder,
-    error,
-    errors,
     onChange = noop,
     onDaDataChange,
-    onBlur,
-    isTextarea,
-    type,
     name = '',
     daDataQueryPrefix,
-    isInteger = false,
-    maxLength,
     dadata = false,
-    disabled = false,
+    ...rest
   }) => {
     const [isOpen, { setFalse: close, setTrue: open }] = useBool();
-    const popupRef = useOutsideClick<HTMLDivElement>(close);
-
-    const handleChange = useCallback(
-      (v: string) => {
-        dadata && !isOpen && open();
-        maxLength ? v.length <= maxLength && onChange(v) : onChange(v);
-      },
-      [isOpen, onChange],
-    );
-
-    useEffect(() => {
-      isInteger && value && onChange(normalizeInteger(value));
-    }, [value]);
 
     const inputRef = useInputPopup({
       isOpen: isOpen && dadata,
@@ -62,33 +34,15 @@ export const DaDataInputControl = JSX<DaDataInputProps>(
     });
 
     return (
-      <div
-        className={style('shrink-0 w-full', className)}
-        ref={popupRef}
-        onBlur={close}
-        onFocus={open}
-      >
-        <div ref={inputRef}>
-          <Input
-            disabled={disabled}
-            type={type || 'text'}
-            aria-label={label}
-            label={getRequiredLabel({ label, errors })}
-            valid={Boolean(!error)}
-            value={value}
-            onChange={handleChange}
-            onBlur={onBlur}
-            isTextarea={isTextarea}
-            placeholder={getPlaceholder(placeholder, errors, label)}
-          />
-        </div>
-        {renderErrorText(error)}
-      </div>
+      <InputWrapper
+        value={value}
+        onChange={onChange}
+        inputRef={inputRef}
+        isOpen={isOpen}
+        onOpen={open}
+        onClose={close}
+        {...rest}
+      />
     );
   },
 );
-
-const normalizeInteger = (val = '') => val.replace(/[^\d]+/g, '');
-
-const getPlaceholder = (placeholder?: string, errors?: string[], label?: string) =>
-  errors && !label ? `${placeholder}*` : placeholder;

package/mobile/src/retail/components/Fields/SelectField.tsx

@@ -1,3 +1,6 @@
+import { type DisabledProps } from '../../../model/DisabledProps';
+import { type LabelProps } from '../../../model/HeadlineType';
+import { type PlaceholderProps } from '../../../model/PlaceholderProps';
 import { type CustomFieldProps } from '../../../ui-kit/FormField/CustomFieldProps';
 import { type Option } from '../../../ui-kit/Select/Option';
 import { SelectControl } from '../../../ui-kit/Select/SelectControl';
@@ -5,13 +8,15 @@ import { UniBlock } from '../../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../../UniBlock/UniBlockProps';
 import { type DictionaryItem } from '../../model/LeadFormData';
 
-export interface SelectFieldProps extends CustomFieldProps, UniBlockProps {
+export interface SelectFieldProps
+  extends CustomFieldProps,
+    UniBlockProps,
+    LabelProps,
+    DisabledProps,
+    PlaceholderProps {
   source?: DictionaryItem[];
-  label: string;
   fieldName: string;
-  placeholder?: string;
   isSearch?: boolean;
-  disabled?: boolean;
 }
 
 export const SelectField = UniBlock<SelectFieldProps>(

package/mobile/src/retail/components/VerifyPhoneDialog/SubmitButton.tsx

@@ -1,17 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type DisabledProps } from '../../../model/DisabledProps';
 import { Button } from '../../../ui-kit/Button/Button';
 import { Text } from '../../../ui-kit/Text/Text';
 
-interface SubmitButtonProps {
-  isDisabled: boolean;
+interface SubmitButtonProps extends DisabledProps {
   onClick: () => void;
   text?: string;
 }
 
-export const SubmitButton = JSX<SubmitButtonProps>(({ isDisabled, onClick, text }) => {
-  return (
-    <Button type="button" onClick={onClick} disabled={isDisabled}>
-      <Text font="font-normal">{text}</Text>
-    </Button>
-  );
-});
+export const SubmitButton = JSX<SubmitButtonProps>(({ disabled = false, onClick, text }) => (
+  <Button type="button" onClick={onClick} disabled={disabled}>
+    <Text font="font-normal">{text}</Text>
+  </Button>
+));

package/mobile/src/retail/components/VerifyPhoneDialog/VerifyPhoneDialog.tsx

@@ -122,8 +122,8 @@ export const VerifyPhoneDialog = JSX<VerifyPhoneDialogProps>(
   },
 );
 
-const renderNextButton = (isDisabled: boolean, onClick: () => void) => (
-  <SubmitButton text="Далее" isDisabled={isDisabled} onClick={onClick} />
+const renderNextButton = (disabled: boolean, onClick: () => void) => (
+  <SubmitButton text="Далее" disabled={disabled} onClick={onClick} />
 );
 
 const renderText = (timeNextReq: number, handleSendCode: () => void) =>

package/mobile/src/retail/model/RetailFormContent.ts

@@ -1,3 +1,4 @@
+import { type DisabledProps } from '../../model/DisabledProps';
 import { type LabelProps, type TextProps } from '../../model/HeadlineType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type NameFieldDef } from './NameFieldDef';
@@ -29,8 +30,8 @@ export type FieldRetailDef = Required &
   TextProps &
   LabelProps &
   ConditionFieldProps &
-  FilledByEsiaProps & {
+  FilledByEsiaProps &
+  DisabledProps & {
     name?: NameFieldDef;
     dadata?: boolean;
-    disabled?: boolean;
   };

package/mobile/src/ui-kit/BaseProductTile/BaseProductTileContent.ts

@@ -1,5 +1,6 @@
 import { type Align } from '../../model/Align';
 import { type BulletsProps } from '../../model/Bullets';
+import { type ComponentType } from '../../model/ComponentType';
 import { type HeadlineProps, type LabelProps } from '../../model/HeadlineType';
 import { type BenefitsListContent } from '../BenefitsList/BenefitsListContent';
 import { type ImageContent } from '../Img/ImgProps';
@@ -10,7 +11,7 @@ import { type TagsContent } from '../Tags/TagsContent';
 type UnitList = '₽' | '$' | '€' | '¥';
 
 /** @title Доп. настройки картинки */
-export interface TileImageOptions {
+export interface TileImageOptions extends ComponentType {
   /** @title Картинка справа/текст слева */
   directionRight?: boolean;
   /** @title Выравнивание изображения */
@@ -19,8 +20,6 @@ export interface TileImageOptions {
   isImageSecondary?: boolean;
   /** @title Изображение всегда справа */
   isImageAlwaysOnRight?: boolean;
-  /** @hidden */
-  className?: string;
 }
 
 /** @title Цены */

package/mobile/src/ui-kit/BaseTile/renderImageContainer.tsx

@@ -1,4 +1,5 @@
 import { type Align } from '../../model/Align';
+import { type ComponentType } from '../../model/ComponentType';
 import { type VNode } from '../../model/VNode';
 import { style } from '../../utils/style';
 
@@ -10,7 +11,7 @@ const imageAlignmentMap: Record<Align, string> = {
 
 export const renderImageContainer = (
   image: VNode | undefined,
-  { className, imageAlign }: { className?: string; imageAlign?: Align },
+  { className, imageAlign }: ComponentType & { imageAlign?: Align },
 ) =>
   image ? (
     <div

package/mobile/src/ui-kit/BenefitItem/BenefitItem.tsx

@@ -1,14 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { type IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
 import { type BenefitItemContent } from './BenefitItemContent';
 import { renderBenefitIcon } from './renderBenefitIcon';
 import { renderBenefitText } from './renderBenefitText';
 
-export type BenefitItemProps = BenefitItemContent & {
-  className?: string;
-  benefitsVersion?: IconVersion;
-};
+export type BenefitItemProps = BenefitItemContent &
+  ComponentType & {
+    benefitsVersion?: IconVersion;
+  };
 
 export const BenefitItem = JSX<BenefitItemProps>(({ className, benefitsVersion, ..._ }) => (
   <div className={style('flex gap-m min-w-56 items-center', className)} role="listitem">

package/mobile/src/ui-kit/BenefitsList/BenefitsListProps.ts

@@ -1,6 +1,6 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { type BenefitsListContent } from './BenefitsListContent';
 
-export interface BenefitsListProps extends BenefitsListContent {
-  className?: string;
+export interface BenefitsListProps extends BenefitsListContent, ComponentType {
   descriptionClassName?: string;
 }

package/mobile/src/ui-kit/Button/Button.tsx

@@ -3,12 +3,13 @@ import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
 import { handlerDecorator } from '../../external/handlerDecorator';
 import { type AspectsDef } from '../../model/AspectsProps';
 import { type ButtonVersion } from '../../model/ButtonVersion';
+import { type ComponentType } from '../../model/ComponentType';
 import { type ColorPalette } from '../../model/ContentPageBase';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { noop } from '../../utils/noop';
 import { style } from '../../utils/style';
 import { type ARIAProps } from '../ARIAProps';
-import { type ControlStateProps } from '../ControlStateProps';
 import { type PreventableEvent } from '../PreventableEvent';
 
 export const themeStyle: Record<ButtonVersion, string> = {
@@ -33,8 +34,7 @@ const embeddedStyle = style(
 
 const disabledStyle = style('bg-main-gray text-main-disabled cursor-not-allowed');
 
-export interface ButtonProps extends ControlStateProps, ARIAProps {
-  className?: string;
+export interface ButtonProps extends DisabledProps, ARIAProps, ComponentType {
   type?: 'button' | 'submit' | 'reset';
   version?: ButtonVersion;
   shape?: 'default' | 'round' | 'square';

package/mobile/src/ui-kit/Button/ButtonTitle.tsx

@@ -1,11 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 
-interface ButtonTitleProps {
-  className?: string;
-}
-
-export const ButtonTitle = JSX<ButtonTitleProps>(({ className, children }) => (
+export const ButtonTitle = JSX<ComponentType>(({ className, children }) => (
   <span
     className={style(
       'inline-flex items-center text-start gap-s group-[]/btn-embedded:text-primary-main',