@redneckz/wildless-cms-uni-blocks 0.14.65 → 0.14.66

package/mobile/src/components/Footer/SocialMedia.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { ButtonVersion } from '../../model/ButtonVersion';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonContent';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import type { LinkButtonVersion } from '../../model/LinkButtonVersion';
+import type { LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { Text } from '../../ui-kit/Text/Text';
 import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
@@ -10,16 +10,16 @@ import { findIconByHref } from './findIconByHref';
 
 export interface SocialMediaProps {
   className?: string;
-  media?: ButtonContent[];
+  media?: LinkButtonContent[];
   showButtonText?: boolean;
   stretched?: boolean;
-  version?: ButtonVersion;
+  version?: LinkButtonVersion;
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(
   ({ className = '', media, showButtonText, stretched, version = 'white', children }) => {
     const [hasText, setHasText] = useState<boolean | undefined>();
-    const buttons: ButtonContent[] | undefined = media?.map((_) => {
+    const buttons: LinkButtonContent[] | undefined = media?.map((_) => {
       const { href, icon, text } = _;
       const { iconMapped } = findIconByHref(href);
       const iconCustom = isIcon(icon) ? icon : iconMapped;

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

@@ -5,8 +5,8 @@ import { type BgColorVersion } from '../../model/BgColorVersion';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type LogoType } from '../../model/LogoType';
 import { projectSettings } from '../../ProjectSettings';
-import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
 import { style } from '../../utils/style';
@@ -42,7 +42,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl,
       )}
       {internetBankUrl ? (
         <div>
-          <Button
+          <LinkButton
             href={internetBankUrl}
             ariaLabel="Войти"
             target="_blank"
@@ -52,7 +52,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl,
             )}
           >
             Войти
-          </Button>
+          </LinkButton>
         </div>
       ) : null}
     </div>

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type BlockVersion } from '../../model/BlockVersion';
-import { Button } from '../../ui-kit/Button/Button';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { style } from '../../utils/style';
 
 interface InternetBankButtonProps {
@@ -15,7 +15,7 @@ const BUTTON_STYLE = {
 
 export const InternetBankButton = JSX<InternetBankButtonProps>(({ version, internetBankUrl }) =>
   internetBankUrl ? (
-    <Button
+    <LinkButton
       href={internetBankUrl}
       ariaLabel="Интернет-банк"
       target="_blank"
@@ -25,6 +25,6 @@ export const InternetBankButton = JSX<InternetBankButtonProps>(({ version, inter
       )}
     >
       Интернет-банк
-    </Button>
+    </LinkButton>
   ) : null,
 );

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,7 +1,7 @@
 import { type TitleProps } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type IconProps } from '../../model/Picture';
-import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
+import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 
 /**
  * @title Кнопка выбора программы
@@ -31,5 +31,5 @@ export type InsuranceAmountBlockContent = UniBlockContent &
     /** @title Список вкладок */
     insuranceTabs?: InsuranceAmountBlockTab[];
     /** @title Кнопка */
-    button?: ButtonContent;
+    button?: LinkButtonContent;
   };

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
-import { Button } from '../../ui-kit/Button/Button';
-import { type ButtonCommonContent } from '../../ui-kit/Button/ButtonContent';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { type ButtonCommonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { renderArrows } from '../../ui-kit/LinkButton/renderArrows';
 import { Text } from '../../ui-kit/Text/Text';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
 import { type CardItem, type InsuranceAmountBlockTab } from './InsuranceAmountBlockContent';
@@ -64,7 +64,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
             <div className="absolute top-0 right-0 h-full w-32 bg-opacity-to-white" />
           ) : null}
         </div>
-        <Button className="w-60 text-center" version="primary" {...button} href={activeHref} />
+        <LinkButton className="w-60 text-center" version="primary" {...button} href={activeHref} />
       </section>
     );
   },

package/mobile/src/components/LikeControl/LikeControl.tsx

@@ -3,7 +3,7 @@ import { handlerDecorator } from '../../hooks/handlerDecorator';
 import { useLikeService } from '../../hooks/useLikeService';
 import { useRouter } from '../../hooks/useRouter';
 import { type UniBlockContent } from '../../model/JSXBlock';
-import { LikeButton } from '../../ui-kit/Button/LikeButton';
+import { LikeButton } from '../../ui-kit/LinkButton/LikeButton';
 
 interface LikeControlProps extends UniBlockContent {
   className?: string;

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -2,9 +2,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { List } from '../../ui-kit/List/List';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -6,8 +6,8 @@ import {
 } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type Picture } from '../../model/Picture';
-import { type ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
 import { type ImageContent } from '../../ui-kit/Img/ImgProps';
+import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
 import { type ListContent } from '../../ui-kit/List/ListContent';
 
 /**

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

@@ -1,7 +1,7 @@
 import { type FormFieldRegisterer } from '../../hooks/useForm';
-import { Button } from '../../ui-kit/Button/Button';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { Icon } from '../../ui-kit/Icon/Icon';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 
 const FILTRATION_LABELS = {
   safeBoxCaseVolumes: 'Аренда индивидуальных сейфовых ячеек',
@@ -24,7 +24,7 @@ export const renderFiltrationForm = (
         ))}
       </div>
     ) : null}
-    <Button
+    <LinkButton
       version="transparent"
       className="text-secondary-text [&>*]:p-0"
       onClick={reset}

package/mobile/src/components/ProductBlock/renderBackwardButton.tsx

@@ -1,9 +1,9 @@
-import { type ButtonVersion } from '../../model/ButtonVersion';
-import { Button } from '../../ui-kit/Button/Button';
-import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
+import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { Img } from '../../ui-kit/Img/Img';
+import { getRegularButtonClasses } from '../../ui-kit/LinkButton/getRegularButtonClasses';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 
-export function renderBackwardButton(version: ButtonVersion, handleClick: () => void) {
+export function renderBackwardButton(version: LinkButtonVersion, handleClick: () => void) {
   const iconVersion = version === 'primary' ? 'white' : 'black';
   const className = 'w-12 h-12 min-h-12 min-w-12 flex items-center justify-center';
   const text = 'Вернуться назад';
@@ -22,7 +22,7 @@ export function renderBackwardButton(version: ButtonVersion, handleClick: () =>
           }}
         />
       </div>
-      <Button
+      <LinkButton
         version="link"
         className="group-data-secondary:text-white/80"
         text={text}

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -2,10 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type IconName } from '../../icons/IconName';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
+import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { type TextColor } from '../../ui-kit/Text/TextProps';

package/mobile/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfoContent.ts

@@ -1,7 +1,7 @@
 import { type TitleProps } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type IconProps } from '../../model/Picture';
-import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
+import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { type RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
@@ -18,5 +18,5 @@ export type RepresentativeOfficeInfoContent = UniBlockContent &
     /** @title E-mail */
     email?: string;
     /** @title Кнопка */
-    button?: ButtonContent;
+    button?: LinkButtonContent;
   };

package/mobile/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../../ui-kit/Button/Button';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { Text } from '../../ui-kit/Text/Text';
 import { RadioButtons } from './RadioButtons';
 import { RegionsAndBranches } from './RegionsAndBranches';
@@ -58,7 +58,12 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
         </div>
         <div className="contents @md:flex justify-between items-center gap-m">
           <RadioButtons />
-          <Button text="Офисы на карте" version="primary" onClick={onClick} className="order-6" />
+          <LinkButton
+            text="Офисы на карте"
+            version="primary"
+            onClick={onClick}
+            className="order-6"
+          />
         </div>
       </div>
     );

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -3,8 +3,8 @@ import { type BlockVersion } from '../../model/BlockVersion';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { type SizeVersion } from '../../model/SizeVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
+import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { isIcon } from '../../utils/isIcon';

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -10,14 +10,14 @@ import { type UniBlockContent } from '../../model/JSXBlock';
 import { type IconProps } from '../../model/Picture';
 import { type RichTextItem } from '../../model/RichTextItem';
 import { type SizeVersion } from '../../model/SizeVersion';
-import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
-import { type ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
+import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
+import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { type ListContent } from '../../ui-kit/List/ListContent';
 
 type StepCommonProps = IconProps &
   BulletsProps &
   ListContent & {
-    button?: ButtonContent;
+    button?: LinkButtonContent;
   };
 
 /**

package/mobile/src/components/StepsBlock/renderStep.tsx

@@ -1,7 +1,7 @@
 import { type BlockVersion } from '../../model/BlockVersion';
-import { type ButtonVersion } from '../../model/ButtonVersion';
+import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type VNode } from '../../model/VNode';
-import { Button } from '../../ui-kit/Button/Button';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { List } from '../../ui-kit/List/List';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
@@ -69,13 +69,13 @@ const renderDefaultStep =
           </div>
         </div>
         {button?.text && !isMainButton ? (
-          <Button
+          <LinkButton
             className="box-border py-s w-full max-w-60 mt-auto"
-            version={version as ButtonVersion}
+            version={version as LinkButtonVersion}
             {...button}
           >
             {button?.text}
-          </Button>
+          </LinkButton>
         ) : null}
       </div>
     );

package/mobile/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -1,6 +1,3 @@
-import { type ButtonContent } from '../../ui-kit/Button/ButtonContent';
-import { type ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { type ImageContent } from '../../ui-kit/Img/ImgProps';
 import {
@@ -8,6 +5,9 @@ import {
   type InnerTableButtonProps,
 } from '../../ui-kit/InnerTable/InnerTableButton';
 import { type TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
+import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
+import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { List } from '../../ui-kit/List/List';
 import { type ListProps } from '../../ui-kit/List/ListContent';
 import { Text } from '../../ui-kit/Text/Text';
@@ -15,7 +15,7 @@ import { type LabelDescriptionCell } from './TariffsTableContent';
 
 export type EmbeddableCellDataType =
   | LabelDescriptionCell
-  | ButtonContent
+  | LinkButtonContent
   | ImageContent
   | ListProps
   | InnerTableButtonProps;

package/mobile/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,9 +1,9 @@
 import { type DescriptionProps, type LabelProps, type TitleProps } from '../../model/HeadlineType';
 import { type UniBlockContent, type UniBlockProps } from '../../model/JSXBlock';
 import { type IconProps } from '../../model/Picture';
-import { type ButtonsSectionContent } from '../../ui-kit/Button/ButtonsSectionContent';
 import { type ImageContent } from '../../ui-kit/Img/ImgProps';
 import { type TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
+import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
 import { type ListProps } from '../../ui-kit/List/ListContent';
 
 /**

package/mobile/src/components/TariffsTable/TariffsTableWrapper.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type CarouselControls } from '../../hooks/useCarouselControls';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import { renderArrows } from '../../ui-kit/LinkButton/renderArrows';
 
 interface WrapperProps {
   controls: CarouselControls;

package/mobile/src/model/ButtonVersion.ts

@@ -1,13 +1,5 @@
 /**
  * @title Тема кнопки
- * @enumNames ["Основная", "Второстепенная", "Белая", "Ссылка", "Прозрачная", "Серая", "Наследуемая"]
- * @default primary
+ * @enumNames ["Основная", "Второстепенная"]
  */
-export type ButtonVersion =
-  | 'primary'
-  | 'secondary'
-  | 'white'
-  | 'link'
-  | 'transparent'
-  | 'gray'
-  | '';
+export type ButtonVersion = 'primary' | 'secondary';

package/mobile/src/model/LinkButtonVersion.ts

@@ -0,0 +1,13 @@
+/**
+ * @title Тема кнопки
+ * @enumNames ["Основная", "Второстепенная", "Белая", "Ссылка", "Прозрачная", "Серая", "Наследуемая"]
+ * @default primary
+ */
+export type LinkButtonVersion =
+  | 'primary'
+  | 'secondary'
+  | 'white'
+  | 'link'
+  | 'transparent'
+  | 'gray'
+  | '';

package/mobile/src/setup-fixture.ts

@@ -45,6 +45,11 @@ useRouter.setup(() => {
 });
 
 handlerDecorator.setup((handler): any => (ev) => {
-  ev.preventDefault();
+  const shouldNotPrevent = ev?.target?.type === 'submit';
+
+  if (!shouldNotPrevent) {
+    ev.preventDefault();
+  }
+
   handler(ev);
 });

package/mobile/src/ui-kit/ARIAProps.ts

@@ -0,0 +1,4 @@
+export interface ARIAProps {
+  role?: string;
+  [key: `aria-${string}`]: string | undefined;
+}

package/mobile/src/ui-kit/BaseFiltration/renderFiltrationForm.tsx

@@ -36,7 +36,9 @@ export const renderFiltrationForm = ({
     </div>
     {resetButton ? (
       <div>
-        <Button className="w-full @4xl:w-72 @4xl:ml-s" onClick={reset} {...resetButton} />
+        <Button className="w-full @4xl:w-72 @4xl:ml-s" onClick={reset}>
+          {resetButton?.text}
+        </Button>
       </div>
     ) : null}
   </form>

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

@@ -5,8 +5,8 @@ import { type UniBlockProps } from '../../model/JSXBlock';
 import { type VNode } from '../../model/VNode';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { BenefitsList } from '../BenefitsList/BenefitsList';
-import { renderButtonsSection } from '../Button/renderButtonsSection';
 import { Img } from '../Img/Img';
+import { renderButtonsSection } from '../LinkButton/renderButtonsSection';
 import { List } from '../List/List';
 import { type ListItemSize } from '../List/ListContent';
 import { PriceList } from '../PriceList/PriceList';

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

@@ -2,8 +2,8 @@ import { type Align } from '../../model/Align';
 import { type BulletsProps } from '../../model/Bullets';
 import { type HeadlineProps } from '../../model/HeadlineType';
 import { type BenefitsListContent } from '../BenefitsList/BenefitsListContent';
-import { type ButtonsSectionContent } from '../Button/ButtonsSectionContent';
 import { type ImageContent } from '../Img/ImgProps';
+import { type ButtonsSectionContent } from '../LinkButton/ButtonsSectionContent';
 import { type ListContent } from '../List/ListContent';
 import { type RichTextProps } from '../RichText/RichTextProps';
 import { type TagsContent } from '../Tags/TagsContent';

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

@@ -1,49 +1,75 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
-import { ButtonInner } from './ButtonInner';
-import { type ButtonProps } from './ButtonProps';
-import { getDisabledButtonClasses } from './getDisabledButtonClasses';
-import { getRegularButtonClasses } from './getRegularButtonClasses';
-import { useFormSubmit } from './useFormSubmit';
-
-export const Button = JSX<ButtonProps>(({ disabled, children, method = 'LINK', href, ...rest }) => {
-  const handleFormSubmit = useFormSubmit({ method, href });
-
-  const link = useLink();
-  const adjustedProps = link({ onClick: handleFormSubmit, href, ...rest });
-  const buttonInner = children ?? <ButtonInner {...adjustedProps} />;
-
-  return disabled ? (
-    <DisabledButton {...adjustedProps}>{buttonInner}</DisabledButton>
-  ) : (
-    <RegularButton {...adjustedProps}>{buttonInner}</RegularButton>
-  );
-});
+import { type ButtonVersion } from '../../model/ButtonVersion';
+import { style } from '../../utils/style';
+import { type ARIAProps } from '../ARIAProps';
+import { type ControlStateProps } from '../ControlStateProps';
+import type { PreventableEvent } from '../PreventableEvent';
+import { useButton } from './useButton';
+
+const activeButtonStyleMap = 'text-white bg-primary-active';
+
+const disabledButtonStyle = 'bg-main-gray text-main-disabled cursor-not-allowed';
+
+const buttonStyleMap: Record<ButtonVersion, string> = {
+  primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
+  secondary:
+    'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
+};
+
+const secondaryButtonStyleMap: Record<ButtonVersion, string> = {
+  primary: style(
+    'group-data-secondary:text-primary-main group-data-secondary:bg-white',
+    'group-data-secondary:hover:text-white group-data-secondary:hover:bg-primary-hover',
+    'group-data-secondary:active:bg-primary-active',
+  ),
+  secondary: style(
+    'group-data-secondary:text-white group-data-secondary:bg-white/20',
+    'group-data-secondary:hover:bg-primary-hover',
+    'group-data-secondary:active:bg-primary-active',
+  ),
+};
+
+export interface ButtonProps extends ControlStateProps, ARIAProps {
+  className?: string;
+  version?: ButtonVersion;
+  type?: 'button' | 'submit' | 'reset' | undefined;
+  rounded?: boolean;
+  role?: string;
+  onClick?: (ev?: PreventableEvent) => void;
+}
+
+export const Button = JSX<ButtonProps>(({ children, ...props }) => {
+  const button = useButton();
+
+  const {
+    className,
+    version = 'primary',
+    active,
+    disabled,
+    type = 'button',
+    rounded = true,
+    role,
+    onClick,
+  } = button(props);
 
-const RegularButton = JSX<ButtonProps>(
-  ({ className = '', href, rel, target, ariaLabel, version, rounded, onClick, children }) => (
-    <a
-      className={getRegularButtonClasses({ className, version, rounded })}
-      href={href}
-      rel={rel}
-      target={target}
-      aria-label={ariaLabel}
-      role={href ? 'link' : 'button'}
+  return (
+    <button
+      className={style(
+        'font-sans px-9 py-4',
+        'flex justify-center items-center gap-xs',
+        active ? activeButtonStyleMap : '',
+        disabled ? disabledButtonStyle : '',
+        !active && !disabled
+          ? style(buttonStyleMap[version], secondaryButtonStyleMap[version])
+          : '',
+        rounded ? 'rounded-md' : '',
+        className,
+      )}
+      type={type}
+      role={role}
       onClick={onClick}
     >
       {children}
-    </a>
-  ),
-);
-
-const DisabledButton = JSX<ButtonProps>(({ className, ariaLabel, version, rounded, children }) => (
-  <div
-    role="button"
-    aria-disabled="true"
-    aria-label={ariaLabel}
-    tabIndex={-1}
-    className={getDisabledButtonClasses({ className, rounded, version })}
-  >
-    {children}
-  </div>
-));
+    </button>
+  );
+});

package/mobile/src/ui-kit/Button/useButton.ts

@@ -0,0 +1,16 @@
+import { handlerDecorator } from '../../hooks/handlerDecorator';
+import { type PreventableEvent } from '../PreventableEvent';
+import { type ButtonProps } from './Button';
+
+export function useButton() {
+  return (props: ButtonProps): ButtonProps => ({
+    ...props,
+    onClick: handlerDecorator(handleClick(props), props),
+  });
+}
+
+function handleClick({ disabled, onClick }: Partial<ButtonProps>) {
+  return (ev?: PreventableEvent) => {
+    !disabled && onClick && onClick(ev);
+  };
+}

package/mobile/src/ui-kit/ControlStateProps.ts

@@ -0,0 +1,4 @@
+export interface ControlStateProps {
+  active?: boolean;
+  disabled?: boolean;
+}

package/mobile/src/ui-kit/InnerTable/InnerTableButton.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TariffsTableCellIndexProps } from '../../components/TariffsTable/TariffsTableContent';
-import { Button } from '../Button/Button';
 import { Img } from '../Img/Img';
+import { LinkButton } from '../LinkButton/LinkButton';
 import { type TariffsTableInnerContent } from './InnerTableProps';
 
 export interface InnerTableButtonProps
@@ -14,7 +14,7 @@ export interface InnerTableButtonProps
 
 export const TableInnerButton = JSX<InnerTableButtonProps>(
   ({ className = '', isOpen, onClick }) => (
-    <Button
+    <LinkButton
       className={className}
       appendRight={
         <Img image={{ icon: isOpen ? 'ArrowUpIcon' : 'ArrowDownIcon' }} width="20" height="20" />

package/mobile/src/ui-kit/InnerTable/InnerTableHeader.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
+import { LinkButton } from '../LinkButton/LinkButton';
 import { linkButtonVersion } from './linkButtonVersion';
 
 export interface InnerTableHeaderProps {
@@ -29,7 +29,7 @@ export const InnerTableHeader = JSX<InnerTableHeaderProps>(
         </div>
       ) : null}
       {linkToPDF ? (
-        <Button
+        <LinkButton
           className="text-primary-main"
           href={linkToPDF}
           version={linkButtonVersion}