@redneckz/wildless-cms-uni-blocks 0.16.1-credit → 0.16.2-credit

package/src/ui-kit/Input/InputProps.ts

@@ -1,6 +1,6 @@
+import { type ControlProps } from '../../model/ControlProps';
 import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type InputTypes } from '../../model/InputTypes';
-import { type ControlProps } from '../ControlProps';
 import { type PreventableEventWithTarget } from '../PreventableEvent';
 
 export interface InputProps<V = string> extends DefaultControlType, ControlProps<V> {
@@ -11,9 +11,9 @@ export interface InputProps<V = string> extends DefaultControlType, ControlProps
   onFocus?: (ev: PreventableEventWithTarget) => void;
   onBlur?: (ev?: PreventableEventWithTarget) => void;
   valid?: boolean;
-  disabled?: boolean;
   autoFocus?: boolean;
   isTextarea?: boolean;
   maxLength?: number;
   isInteger?: boolean;
+  inputRef?: { current: HTMLDivElement | null };
 }

package/src/ui-kit/Input/InputWrapper.tsx

@@ -0,0 +1,78 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useOutsideClick } from '@redneckz/uni-jsx/lib/hooks/useOutsideClick';
+import { type DefaultControlType } from '../../model/DefaultControlType';
+import { getRequiredLabel } from '../../utils/getRequiredLabel';
+import { noop } from '../../utils/noop';
+import { style } from '../../utils/style';
+import { Input } from './Input';
+import { type InputProps } from './InputProps';
+import { renderErrorText } from './renderErrorText';
+
+type InputWrapperProps = InputProps & {
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+};
+
+export const InputWrapper = JSX<InputWrapperProps>(
+  ({
+    className,
+    label,
+    value = '',
+    error,
+    errors,
+    type,
+    isInteger,
+    placeholder,
+    maxLength,
+    inputRef,
+    isOpen,
+    onOpen,
+    onClose,
+    onChange = noop,
+    ...rest
+  }) => {
+    const popupRef = useOutsideClick<HTMLDivElement>(onClose);
+
+    const handleChange = useCallback(
+      (v: string) => {
+        const isOverMax = maxLength && v.length > maxLength;
+        !isOpen && onOpen();
+        if (!isOverMax) {
+          onChange(normalizeInteger(v, isInteger));
+        }
+      },
+      [isOpen, onChange],
+    );
+
+    return (
+      <div
+        className={style('shrink-0 w-full', className)}
+        ref={popupRef}
+        onBlur={onClose}
+        onFocus={onOpen}
+      >
+        <div ref={inputRef}>
+          <Input
+            type={type || 'text'}
+            aria-label={label}
+            label={getRequiredLabel({ label, errors })}
+            valid={Boolean(!error)}
+            onChange={handleChange}
+            placeholder={getPlaceholder({ placeholder, errors, label })}
+            value={value}
+            {...rest}
+          />
+        </div>
+        {renderErrorText(error)}
+      </div>
+    );
+  },
+);
+
+const normalizeInteger = (val = '', isInteger = false) =>
+  isInteger && val ? val.replace(/[^\d]+/g, '') : val;
+
+const getPlaceholder = ({ placeholder, errors, label }: DefaultControlType) =>
+  errors && !label ? `${placeholder}*` : placeholder;

package/src/ui-kit/InputRange/InputRange.tsx

@@ -53,7 +53,7 @@ export const InputRange = JSX<InputRangeProps>((props) => {
         <input
           className={style(
             'text-h3 w-full h-14',
-            'pl-m mt-xs box-border',
+            'pl-m box-border',
             'text-primary-text',
             inputValidStyle,
             inputDisabledStyle,

package/src/ui-kit/InputRange/InputRangeProps.ts

@@ -1,12 +1,12 @@
+import { type DisabledProps } from '../../model/DisabledProps';
+import { type TitleProps } from '../../model/HeadlineType';
 import { type InputProps } from '../Input/InputProps';
 
-export interface InputRangeProps extends InputProps<number> {
+export interface InputRangeProps extends InputProps<number>, DisabledProps, TitleProps {
   items?: string[];
   min?: number;
   max?: number;
   list?: number[];
   step?: number;
-  title?: string;
-  disabled?: boolean;
   onChange?: (value: number) => void;
 }

package/src/ui-kit/InputRange/renderRangeWithTicks.tsx

@@ -1,14 +1,13 @@
+import { type ControlProps } from '../../model/ControlProps';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { style } from '../../utils/style';
 import { parseDecimal } from './parseDecimal';
 
-interface RangeWithTicksProps {
+interface RangeWithTicksProps extends ControlProps<number>, DisabledProps {
   list: number[];
   min: number;
   max: number;
   step: number;
-  disabled?: boolean;
-  value?: number;
-  onChange?: (value: number) => void;
 }
 
 export function renderRangeWithTicks({

package/src/ui-kit/Link/Link.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
+import { type ComponentType } from '../../model/ComponentType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type LinkProps as BaseLinkProps } from '../../model/LinkProps';
 import { getAspectsAttributes } from '../../utils/dataAttributes';
@@ -18,8 +19,7 @@ const themeStyle: Record<LinkButtonVersion, string> = {
   '': '',
 };
 
-export interface LinkProps extends BaseLinkProps {
-  className?: string;
+export interface LinkProps extends BaseLinkProps, ComponentType {
   version?: LinkButtonVersion;
   aboveText?: string;
   rel?: string;

package/src/ui-kit/LinkButton/ButtonInner.tsx

@@ -17,7 +17,7 @@ export const ButtonInner = JSX<LinkButtonProps>((props) => {
       {isWithText(props) ? (
         <div className="whitespace-pre">
           {aboveText ? <div className="text-xs font-light text-left">{aboveText}</div> : null}
-          <div className={`text-left ${aboveText ? 'text-s -mt-3xs' : 'text-l'}`}>{text}</div>
+          <div className={`text-left ${aboveText ? 'text-s' : 'text-l'}`}>{text}</div>
         </div>
       ) : null}
       {appendRight ? (

package/src/ui-kit/LinkButton/GetButtonClassParams.ts

@@ -1,8 +1,8 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 
 /** @deprecated */
-export type GetButtonClassParams = {
-  className?: string;
+export type GetButtonClassParams = ComponentType & {
   rounded?: boolean;
   version?: LinkButtonVersion;
 };

package/src/ui-kit/LinkButton/LinkButtonProps.ts

@@ -1,14 +1,14 @@
+import { type ComponentType } from '../../model/ComponentType';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { type VNode } from '../../model/VNode';
 import { type PreventableEvent } from '../PreventableEvent';
-import { type LinkButtonContent } from './LinkButtonContent';
+import { type LinkButtonContent } from './LinkButtonContent'; /** @deprecated */
 
 /** @deprecated */
 /**
  * @title Кнопка
  */
-export interface LinkButtonProps extends LinkButtonContent {
-  className?: string;
-  disabled?: boolean;
+export interface LinkButtonProps extends LinkButtonContent, ComponentType, DisabledProps {
   rel?: string;
   ariaLabel?: string;
   appendLeft?: VNode;

package/src/ui-kit/LinkButton/renderArrows.tsx

@@ -1,16 +1,17 @@
+import { type ComponentType } from '../../model/ComponentType';
+import { type DisabledProps } from '../../model/DisabledProps';
 import { style } from '../../utils/style';
 import { ArrowLeftButton, ArrowRightButton } from './ArrowButton';
 
 /** @deprecated */
-export type RenderArrowsProps = {
-  dec: () => void;
-  inc: () => void;
-  canInc: boolean;
-  canDec: boolean;
-  btnClass: [string, string];
-  className?: string;
-  isDisabled?: boolean;
-};
+export type RenderArrowsProps = ComponentType &
+  DisabledProps & {
+    dec: () => void;
+    inc: () => void;
+    canInc: boolean;
+    canDec: boolean;
+    btnClass: [string, string];
+  };
 
 /** @deprecated */
 export const renderArrows = ({

package/src/ui-kit/LinkButton/renderButtonsSection.tsx

@@ -1,3 +1,4 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { type Picture } from '../../model/Picture';
 import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
@@ -5,8 +6,7 @@ import { Img } from '../Img/Img';
 import { LinkButton } from './LinkButton';
 import { type LinkButtonContent } from './LinkButtonContent';
 
-interface ButtonsSectionOptions {
-  className?: string;
+interface ButtonsSectionOptions extends ComponentType {
   buttonClassName?: string;
   isVertical?: boolean;
 }

package/src/ui-kit/LinkWrapper/LinkWrapper.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import { type AspectsProps } from '../../model/AspectsProps';
+import { type ComponentType } from '../../model/ComponentType';
 import { type Target } from '../../model/LinkProps';
 import { getAspectsAttributes } from '../../utils/dataAttributes';
 import { style } from '../../utils/style';
 
-interface LinkWrapperProps extends AspectsProps {
-  className?: string;
+interface LinkWrapperProps extends AspectsProps, ComponentType {
   href?: string;
   target?: Target;
   onClick?: () => void;

package/src/ui-kit/ListControlProps.ts

@@ -1,4 +1,4 @@
-import { type ControlProps } from './ControlProps';
+import { type ControlProps } from '../model/ControlProps';
 
 export interface ListControlProps<T> extends ControlProps<T> {
   items: T[];

package/src/ui-kit/Loader/Loader.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type TextColor } from '../../ui-kit/Text/TextProps';
 import { style } from '../../utils/style';
+import { type TextColor } from '../Text/TextProps';
 
 interface LoaderProps {
   color?: TextColor;

package/src/ui-kit/LocationDialog/SearchBar.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import { inputValidStyle } from '../Input/inputValidStyle';
 import { type PreventableEvent } from '../PreventableEvent';
 
-export interface SearchBarInnerProps {
-  className?: string;
+export interface SearchBarInnerProps extends ComponentType {
   searchTerm?: string;
   onSearch: (_: string) => void;
 }

package/src/ui-kit/ProgressBar/ProgressBar.fixture.tsx

@@ -2,4 +2,7 @@ import '../../setup-fixture';
 
 import { ProgressBar } from './ProgressBar';
 
-export default <ProgressBar description="" />;
+export default {
+  default: <ProgressBar description="" />,
+  description: <ProgressBar description="Описание" />,
+};

package/src/ui-kit/ProgressBar/ProgressBar.tsx

@@ -15,7 +15,7 @@ export const ProgressBar = JSX<ProgressBarProps>(
       </div>
       <div className="relative">
         {showPercentage ? <div className="absolute left-2/4 text-green">{step}%</div> : null}
-        {description ? <div className="text-right mr-4 text-gray">{description}</div> : null}
+        {description ? <div className="text-right pr-m text-gray">{description}</div> : null}
       </div>
     </div>
   ),

package/src/ui-kit/Radio/RadioProps.ts

@@ -1,8 +1,8 @@
-export interface RadioProps {
+import { type ComponentType } from '../../model/ComponentType';
+import { type ControlProps } from '../../model/ControlProps';
+
+export interface RadioProps extends ComponentType, ControlProps<string> {
   name: string;
   text?: string;
-  value: string;
   checked: boolean;
-  onChange?: (value: string) => void;
-  className?: string;
 }

package/src/ui-kit/RadioButtonGroup/RadioButtonGroup.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ControlProps } from '../../model/ControlProps';
 import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type TextProps } from '../../model/HeadlineType';
 import { type ListOrientation } from '../../model/ListOrientation';
 import { style } from '../../utils/style';
 import { Checkbox } from '../Checkbox/Checkbox';
-import { type ControlProps } from '../ControlProps';
 import { Text } from '../Text/Text';
 
 export type RadioButtonItem = TextProps & {
@@ -14,7 +14,6 @@ export type RadioButtonItem = TextProps & {
 export interface RadioButtonGroupProps extends DefaultControlType, ControlProps<string> {
   items?: RadioButtonItem[];
   onChange?: (id: string) => void;
-  disabled?: boolean;
   orientation?: ListOrientation;
 }
 

package/src/ui-kit/SVG.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../model/ComponentType';
 
 export type StrokeLinecap = 'inherit' | 'butt' | 'round' | 'square';
 export type StrokeLinejoin = 'inherit' | 'round' | 'miter' | 'bevel';
@@ -16,8 +17,7 @@ export interface SVGPath extends SVGPathOptions {
   d: string;
 }
 
-export interface SVGProps extends SVGPathOptions {
-  className?: string;
+export interface SVGProps extends SVGPathOptions, ComponentType {
   viewBox?: string;
   paths: SVGPath[];
   width?: string;

package/src/ui-kit/SearchBar/SearchBar.tsx

@@ -2,16 +2,16 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { type SearchHeaderProps } from '../../data/CommonData';
 import { type TopMenuItemProps } from '../../data/NavigationData';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import { CloseButton } from '../DialogManager/CloseButton';
 import { useDialog } from '../DialogManager/useDialog';
 import { SearchDialog } from '../SearchDialog/SearchDialog';
 import { SearchInput } from '../SearchDialog/SearchInput';
 
-interface SearchBarProps {
+interface SearchBarProps extends ComponentType {
   search?: SearchHeaderProps;
   navigationItems?: TopMenuItemProps[];
-  className?: string;
 }
 
 const MIN_QUERY_LEN = 3;

package/src/ui-kit/SearchDialog/SearchInput.tsx

@@ -1,16 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { type ComponentType } from '../../model/ComponentType';
+import { type ControlProps } from '../../model/ControlProps';
+import { type PlaceholderProps } from '../../model/PlaceholderProps';
 import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
 import { inputValidStyle } from '../Input/inputValidStyle';
 
-export interface SearchInputProps {
-  className?: string;
-  value?: string;
+export interface SearchInputProps extends ComponentType, ControlProps<string>, PlaceholderProps {
   autoFocus?: boolean;
-  onChange?: (value: string) => void;
   onFocus?: () => void;
-  placeholder?: string;
 }
 
 export const SearchInput = JSX<SearchInputProps>(

package/src/ui-kit/Select/Select.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
+import { type ControlProps } from '../../model/ControlProps';
 import { type DefaultControlType } from '../../model/DefaultControlType';
 import { type IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
-import { type ControlProps } from '../ControlProps';
 import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
 import { renderLabel } from '../Input/renderLabel';
@@ -18,7 +18,6 @@ export interface SelectProps extends DefaultControlType, ControlProps<Option> {
   isBorder?: boolean;
   isSearch?: boolean;
   iconVersion?: IconVersion;
-  disabled?: boolean;
 }
 
 export const Select = JSX<SelectProps>(

package/src/ui-kit/Select/SelectPopup.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ControlProps } from '../../model/ControlProps';
 import { type IconVersion } from '../../model/IconVersion';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
@@ -6,13 +7,11 @@ import { filterOptions } from './filterOptions';
 import { formatOption } from './formatOption';
 import { type Option } from './Option';
 
-export interface SelectPopupProps {
+export interface SelectPopupProps extends ControlProps<Option> {
   iconVersion?: IconVersion;
-  onChange?: (option: Option) => void;
   options?: Option[];
   popupRef?: { current: HTMLDivElement | null };
   query?: string;
-  value?: Option;
 }
 
 export const SelectPopup = JSX<SelectPopupProps>(

package/src/ui-kit/Shimmer/Shimmer.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 
 const GOLDEN_RATIO = 1.618;
 
-export interface ShimmerProps {
-  className?: string;
+export interface ShimmerProps extends ComponentType {
   size?: number;
 }
 

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

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { LinkList } from '../../components/Footer/LinkList';
 import { type TopMenuItemProps } from '../../data/NavigationData';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import { Button } from '../Button/Button';
 import { ButtonTitle } from '../Button/ButtonTitle';
@@ -29,7 +30,7 @@ const renderTopItems = (topItems: TopMenuItemProps[] | undefined) =>
       />
     ));
 
-const MobileTopItem = JSX<{ className?: string; item: TopMenuItemProps }>(({ className, item }) => {
+const MobileTopItem = JSX<{ item: TopMenuItemProps } & ComponentType>(({ className, item }) => {
   const [isUnfolded, { toggle }] = useBool(false);
 
   return (

package/src/ui-kit/Sitemap/SitemapProps.ts

@@ -1,6 +1,6 @@
 import { type TopMenuItemProps } from '../../data/NavigationData';
+import { type ComponentType } from '../../model/ComponentType';
 
-export interface SitemapProps {
-  className?: string;
+export interface SitemapProps extends ComponentType {
   navigationItems?: TopMenuItemProps[];
 }

package/src/ui-kit/SlideCheckbox/SlideCheckbox.tsx

@@ -1,13 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ControlProps } from '../../model/ControlProps';
 import { type TextProps } from '../../model/HeadlineType';
 import { style } from '../../utils/style';
 import { Text } from '../Text/Text';
 
-type SlideCheckboxProps = TextProps & {
-  value?: boolean;
-  type?: 'checkbox' | 'radio';
-  onChange?: (value: boolean) => void;
-};
+type SlideCheckboxProps = TextProps &
+  ControlProps<boolean> & {
+    type?: 'checkbox' | 'radio';
+  };
 export const SlideCheckbox = JSX<SlideCheckboxProps>(
   ({ value = false, text, type = 'checkbox', onChange }) => (
     <div

package/src/ui-kit/SlideCheckboxGroup/SlideCheckboxGroup.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { type ControlProps } from '../ControlProps';
+import { type ControlProps } from '../../model/ControlProps';
 import { SlideCheckbox } from '../SlideCheckbox/SlideCheckbox';
 
 type SlideCheckboxGroupItem = {

package/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { type IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
+import { type ComponentType } from '../../model/ComponentType';
 import { mapChildren } from '../../utils/mapChildren';
 import { style } from '../../utils/style';
 import { getContainerHeight } from './getContainerHeight';
@@ -14,8 +15,7 @@ export type SnapAlign = 'snap-start' | 'snap-center' | 'snap-end';
 /**
  * @title Список
  */
-interface SwipeListContainerProps extends SwipeListContainerContent {
-  className?: string;
+interface SwipeListContainerProps extends SwipeListContainerContent, ComponentType {
   itemClassName?: string;
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;

package/src/ui-kit/SwipeListControl/SwipeListControl.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type BlockVersion } from '../../model/BlockVersion';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import { type NavButtonProp } from './NavButtonProp';
 import { SwipeListContainer, type SnapAlign } from './SwipeListContainer';
@@ -17,8 +18,7 @@ const DEFAULT_GAP = 14;
  */
 const DEFAULT_PADDING = 16;
 
-interface SwipeListControlProps extends SwipeListControlContent {
-  className?: string;
+interface SwipeListControlProps extends SwipeListControlContent, ComponentType {
   version?: BlockVersion;
   gap?: number;
   padding?: number;

package/src/ui-kit/SwipeListControl/SwipeListDots.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { useMobileMode } from '../../hooks/useMobileMode';
 import { type BlockVersion } from '../../model/BlockVersion';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import { type NavButtonProp } from './NavButtonProp';
 import { renderDotButton } from './renderDotButton';
@@ -15,8 +16,7 @@ const containerStyles: Record<SwipeListControlType, string> = {
   'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
 };
 
-interface SwipeListDotsProps {
-  className?: string;
+interface SwipeListDotsProps extends ComponentType {
   activeIndex?: number;
   dotCount?: number;
   listType?: SwipeListControlType;
@@ -26,6 +26,7 @@ interface SwipeListDotsProps {
   containerRef?: { current: HTMLDivElement | null };
   containerScroll?: SwipeListScroll;
 }
+
 export const SwipeListDots = JSX<SwipeListDotsProps>(
   ({
     className = '',

package/src/ui-kit/SwipeListControl/SwipeListItem.tsx

@@ -4,13 +4,13 @@ import {
   useIntersectionObserver,
   type IntersectionObserverOptions,
 } from '../../hooks/useIntersectionObserver';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 
 /**
  * @title Элемент списка
  */
-interface SwipeListControlItemProps {
-  className?: string;
+interface SwipeListControlItemProps extends ComponentType {
   style?: Record<string, string>;
   idx?: number;
   activeIndex?: number;

package/src/ui-kit/SwipeListControl/SwipeListScrollButtons.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { style } from '../../utils/style';
 import { ArrowLeftButton, ArrowRightButton } from '../LinkButton/ArrowButton';
 import { type SwipeListScrollButtonsContent } from './SwipeListControlContent';
@@ -6,8 +7,7 @@ import { type SwipeListScroll } from './useSwipeListScroll';
 
 const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
 
-export interface SwipeListScrollButtonsProps extends SwipeListScrollButtonsContent {
-  className?: string;
+export interface SwipeListScrollButtonsProps extends SwipeListScrollButtonsContent, ComponentType {
   scroll: SwipeListScroll;
   hasBlur?: boolean;
   isBottom?: boolean;

package/src/ui-kit/TabsControl/TabsControlProps.ts

@@ -1,3 +1,4 @@
+import { type ComponentType } from '../../model/ComponentType';
 import { type TabItemBase } from './TabItem';
 
 /**
@@ -16,7 +17,6 @@ interface ListControlProps<T> {
   onChange?: (value: T) => void;
 }
 
-export interface TabsControlProps extends ListControlProps<TabItemBase> {
-  className?: string;
+export interface TabsControlProps extends ListControlProps<TabItemBase>, ComponentType {
   tabsType?: TabsType;
 }

package/src/ui-kit/Tags/Tags.tsx

@@ -1,11 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { type ComponentType } from '../../model/ComponentType';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { type TagsContent } from './TagsContent';
 
-interface TagsProps extends TagsContent {
-  className?: string;
-}
+interface TagsProps extends TagsContent, ComponentType {}
 
 export const Tags = JSX<TagsProps>(({ className, tags }) =>
   tags?.length ? (