@redneckz/wildless-cms-uni-blocks 0.2.109 → 0.2.113

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

@@ -0,0 +1,33 @@
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { LinkProps } from '../../model/LinkProps';
+
+/**
+ * @hidden
+ */
+export interface ButtonAdditionalProps {
+  className?: string;
+  disabled?: boolean;
+  rel?: string;
+  ariaLabel?: string;
+  onClick?: (ev: MouseEvent) => any;
+}
+
+export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
+  /**
+   * @title Текст
+   * @default Кнопка
+   */
+  text?: string;
+  version?: ButtonVersion;
+}
+
+export interface ButtonWithIconProps extends ButtonProps {
+  /** @title Верхний текст */
+  aboveText?: string;
+  /** @hidden */
+  appendLeft?: any;
+  /** @title Закругленные углы */
+  rounded?: boolean;
+  /** @hidden */
+  asSVG?: boolean;
+}

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

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface LikeButtonProps {
+  className?: string;
+  onClick?: (ev: MouseEvent) => any;
+  ariaLabel?: string;
+}
+
+export const LikeButton = JSX<LikeButtonProps>(({ className, onClick, ariaLabel }) => (
+  <button
+    type="button"
+    className={`border-0 w-[36px] bg-inherit cursor-pointer ${className || ''}`}
+    onClick={onClick}
+    aria-label={ariaLabel}
+  >
+    {renderLikeIcon()}
+  </button>
+));
+
+const renderLikeIcon = () => {
+  const params = {
+    stroke: '#292D32',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    strokeWidth: '1.5',
+  };
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <path
+        {...params}
+        strokeMiterlimit="10"
+        d="M21.48 11.95c.5-1.4-.4-2.6-1.9-2.6h-4c-.6 0-1.1-.5-1-1.2l.5-3.2c.2-.9-.4-1.9-1.3-2.2-.8-.3-1.8.1-2.2.7l-4.1 6.1M7.48 18.35l3.1 2.4c.4.4 1.3.6 1.9.6h3.8c1.2 0 2.5-.9 2.8-2.1l1.24-3.77"
+      />
+      <path
+        {...params}
+        d="M2.38 18.35v-9.8c0-1.4.6-1.9 2-1.9h1c1.4 0 2 .5 2 1.9v9.8c0 1.4-.6 1.9-2 1.9h-1c-1.4 0-2-.5-2-1.9Z"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,40 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { CheckboxProps } from './CheckboxProps';
+import { SVG } from '../SVG';
+
+const CHECK_PATHS = [
+  {
+    d: 'M10.207.793a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-2.5-2.5a1 1 0 0 1 1.414-1.414L3.5 6.086 8.793.793a1 1 0 0 1 1.414 0Z',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd',
+    fill: 'white',
+  },
+];
+
+export const Checkbox = JSX<CheckboxProps>(({ text, checked, onChange, className }) => (
+  <div className={className}>
+    <label className="flex items-center cursor-pointer relative">
+      <input
+        className={`peer appearance-none w-5 h-5 border-solid border ${
+          checked ? 'border-black' : 'border-main-stroke'
+        } rounded checked:bg-primary-main checked:border-primary-main m-0`}
+        type="checkbox"
+        onChange={(e) => {
+          onChange(e.target.checked);
+        }}
+        checked={checked}
+      />
+      <SVG
+        paths={CHECK_PATHS}
+        className="hidden absolute left-1 ml-px peer-checked:block"
+        width="11"
+        height="9"
+        fill="white"
+        viewBox="0 0 11 9"
+      />
+      {text ? (
+        <span className="font-sans ml-3 text-sm leading-5 cursor-pointer">{text}</span>
+      ) : null}
+    </label>
+  </div>
+));

package/mobile/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -0,0 +1,6 @@
+export interface CheckboxProps {
+  text?: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  className?: string;
+}

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

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { BgColorVersion } from '../../model/BgColorVersion';
+import type { TopItemProps } from '../TopItem/TopItem';
+
+export type HeaderItemProps = TopItemProps;
+
+const TEXT_CLASSES = 'font-sans font-normal text-sm';
+const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-[2px]';
+
+export const HeaderItem = JSX<HeaderItemProps>(
+  ({ className, text, href, target, active, onClick, children, bgColor = 'bg-white' }) => {
+    return (
+      <a
+        className={`relative inline-block bg-transparent text-center no-underline ${
+          className || ''
+        }`}
+        href={href}
+        target={target}
+        onClick={onClick}
+      >
+        <span className={getTextClasses(bgColor, active)}>{text || children}</span>
+        {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
+      </a>
+    );
+  },
+);
+
+const getTextClasses = (bgColor: BgColorVersion, active?: boolean) => {
+  let classes = 'text-white';
+  if (bgColor === 'bg-white') {
+    classes = active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main';
+  }
+
+  return `${classes} ${TEXT_CLASSES}`;
+};
+
+const getBorderClasses = (bgColor: BgColorVersion, active?: boolean) => {
+  if (!active) {
+    return BORDER_CLASSES;
+  }
+
+  return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
+};

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

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { projectSettings } from '../../ProjectSettings';
+import type { IconProps } from './IconProps';
+
+export const Icon = JSX<IconProps>(
+  ({ className = '', name, alt = `Icon ${name}`, title = alt, asSVG, ...imgProps }) => {
+    const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
+
+    if (asSVG) {
+      return (
+        <svg className={className} {...imgProps} aria-hidden="true">
+          {title ? <title>{title}</title> : null}
+          {alt ? <desc>{alt}</desc> : null}
+          <use href={`${href}#icon`} xlinkHref={`${href}#icon`} />
+        </svg>
+      );
+    }
+
+    return (
+      <img
+        className={className}
+        src={href}
+        alt={alt}
+        title={title}
+        {...imgProps}
+        aria-hidden="true"
+      />
+    );
+  },
+);

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -0,0 +1,161 @@
+/**
+ * Icons sorted by name
+ */
+export enum IconMap {
+  'ActualBalanceIcon',
+  'AppleIcon',
+  'AtmIcon',
+  'BankIcon',
+  'BurgerIcon',
+  'BurgerIconWhite',
+  'Calendar2Icon',
+  'CalendarCircleIcon',
+  'CalendarIcon',
+  'CalendarTickIcon',
+  'CalendarWhiteIcon',
+  'CardIcon',
+  'CardPosIcon',
+  'CardTickIcon',
+  'CardWithGemIcon',
+  'ChartSquareIcon',
+  'ClockIcon',
+  'CloseIcon',
+  'ComfortableCompIcon',
+  'CreditCardsIcon',
+  'DocIcon',
+  'DocumentTextIcon',
+  'DollarIcon',
+  'EarthIcon',
+  'EmptyWalletChangeIcon',
+  'EmptyWalletIcon',
+  'EmptyWalletWhiteIcon',
+  'EuroIcon',
+  'GeolocationIcon',
+  'GlassIcon',
+  'GlobalIcon',
+  'GridIcon',
+  'GridIconWhite',
+  'InterestGrowthIcon',
+  'InterestIcon',
+  'JCBIcon',
+  'LoupeIcon',
+  'MasterCardIcon',
+  'MinusIcon',
+  'MirIcon',
+  'MoneyIcon',
+  'MoneyInsuranceIcon',
+  'MonitorMobileIcon',
+  'NewDocIcon',
+  'OfficeIcon',
+  'OkIcon',
+  'PassSendIcon',
+  'PercentageRoundIcon',
+  'PercentageSquareIcon',
+  'PercentageSquareWhiteIcon',
+  'PersonalCardIcon',
+  'PlayMarketIcon',
+  'PlusIcon',
+  'Profile2UserIcon',
+  'ProfileIcon',
+  'RoundRubleIcon',
+  'SafeIcon',
+  'ShieldTickIcon',
+  'SignDocsIcon',
+  'SmallClockIcon',
+  'TelegramIcon',
+  'UnionPayIcon',
+  'UserTickIcon',
+  'VisaIcon',
+  'VKIcon',
+  'WalletAddIcon',
+  'WalletAdd2Icon',
+  'WalletIcon',
+  'WalletWithMoneyIcon',
+}
+
+/**
+ * @title Иконка
+ * @enumNames [
+ *    "Деньги",
+ *    "Лого «Apple»",
+ *    "Банкомат",
+ *    "Банк",
+ *    "Бургер",
+ *    "Бургер (белый)",
+ *    "Календарь 2",
+ *    "Скруглённый календарь",
+ *    "Календарь",
+ *    "Календарь с галочкой",
+ *    "Календарь белый",
+ *    "Кред. карта",
+ *    "Кред. карта под наклоном",
+ *    "Кред. карта с галочкой",
+ *    "Карта с драгоценностями",
+ *    "Деньги внутри кошелька",
+ *    "Часы",
+ *    "Крестик",
+ *    "Кресло",
+ *    "Скидка",
+ *    "Кредитные карты",
+ *    "Огромная скидка",
+ *    "Документ",
+ *    "Документ с текстом",
+ *    "Доллар",
+ *    "Пустой кошелёк с возвратом",
+ *    "Пустой кошелёк",
+ *    "Пустой кошелёк (белый)",
+ *    "Евро",
+ *    "Геолокация",
+ *    "Зеркало",
+ *    "Глобус",
+ *    "Сетка",
+ *    "Сетка (белая)",
+ *    "Диаграмма роста",
+ *    "Скидка",
+ *    "JCB",
+ *    "Лупа",
+ *    "MasterCard",
+ *    "Минус",
+ *    "МИР",
+ *    "Деньги",
+ *    "Денежное страхование",
+ *    "Монитор и мобильный",
+ *    "Новый документ",
+ *    "Офис",
+ *    "Лого «Одноклассники»",
+ *    "Бизнес",
+ *    "Проценты (круг.)",
+ *    "Проценты",
+ *    "Проценты белые",
+ *    "Персональная карта",
+ *    "Лого «PlayMarket»",
+ *    "Плюс",
+ *    "Профиль, 2 персоны",
+ *    "Профиль",
+ *    "Рубль (круг.)",
+ *    "Сейф",
+ *    "Безопасность",
+ *    "Подписанные документы",
+ *    "Маленькие часы",
+ *    "Лого «Telegram»",
+ *    "UnionPay",
+ *    "Пользователь",
+ *    "Visa",
+ *    "Лого «VK»",
+ *    "Пополнение карты",
+ *    "Кошелёк с плюсом",
+ *    "Кошелёк",
+ *    "Кошелёк с деньгами",
+ *  ]
+ */
+export type IconName = keyof typeof IconMap;
+
+export interface IconProps {
+  className?: string;
+  name: IconName;
+  alt?: string;
+  title?: string;
+  width?: string;
+  height?: string;
+  asSVG?: boolean;
+}

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

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ImgSource, Picture } from '../model/Picture';
+
+export interface ImageProps {
+  className?: string;
+  image: Picture;
+}
+
+export const Img = JSX<ImageProps>(({ className = '', image: { size, ...image } }) => {
+  const style = {
+    width: size?.width ? `${size?.width}px` : '100%',
+    height: size?.height ? `${size?.height}px` : '100%',
+  };
+
+  return (
+    <picture className={className}>
+      {image.sources?.length
+        ? image.sources.map(({ src, format }, index) => (
+            <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
+          ))
+        : null}
+      <img
+        src={image.src}
+        className={`m-auto ${image.className || ''}`}
+        alt={image.alt || image.title}
+        title={image.title}
+        style={style}
+        {...size}
+      />
+    </picture>
+  );
+});
+
+export function formatToMimeType(format: ImgSource['format']): string | undefined {
+  return format ? `image/${String(format)}` : undefined;
+}

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

@@ -0,0 +1,65 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import type { InputRangeProps } from './InputRangeProps';
+
+export const InputRange = JSX<InputRangeProps>(
+  ({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
+    const handleChange = (value: string) => {
+      if (!onChange) return;
+
+      const sanitizedValue = Number(value.replace(/\D/g, ''));
+      onChange(sanitizedValue);
+    };
+
+    const inputStyle = {
+      backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
+    };
+
+    const handleBlur = () => {
+      if (!onChange) return;
+
+      if (value < min) onChange(min);
+      if (value > max) onChange(max);
+    };
+
+    return (
+      <div className={className}>
+        <label className="block relative">
+          {title ? (
+            <span className="absolute text-xs text-secondary-text top-1 mt-0.5 pl-4 ml-0.5">
+              {title}
+            </span>
+          ) : null}
+          <input
+            className={`m-0 font-sans text-sm w-full h-12 border border-solid border-main-stroke rounded-md
+                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${
+                          title ? 'pt-4' : ''
+                        }`}
+            value={addSpacesBetweenNumbers(value)}
+            onChange={(e) => handleChange(e.target.value)}
+            onBlur={handleBlur}
+          />
+          <div className="absolute inset-x-0 top-8 px-4">
+            <input
+              className="box-border w-full m-0 cursor-pointer slider"
+              type="range"
+              min={min}
+              max={max}
+              step={step}
+              value={value}
+              onChange={(e) => handleChange(e.target.value)}
+              style={inputStyle}
+            />
+          </div>
+        </label>
+        <div className="flex justify-between my-3">
+          {items.map((item, i) => (
+            <span key={String(i)} className="text-xs leading-[14px] text-secondary-text pl-4">
+              {item}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,10 @@
+export interface InputRangeProps {
+  className?: string;
+  items?: string[];
+  min?: number;
+  max?: number;
+  step?: number;
+  value?: number;
+  title?: string;
+  onChange?: (value: number) => void;
+}

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

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { BgColorVersion } from '../../model/BgColorVersion';
+import { SVG } from '../SVG';
+
+export interface LogoProps {
+  className: string;
+  href: string;
+  targetBlank: boolean;
+  bgColor?: string;
+  hideTitle?: boolean;
+}
+
+const LOGO_PATHS = [
+  'm13.72 25.51 4.42-4.33v-2.95l-4.42 4.32v2.96Zm0-10.98 4.42-4.35V7.41l-4.42 4.31v2.8Zm0 3.63 4.42-4.33v-2.78l-4.42 4.32v2.8ZM12.46 7.44l-.6-.56V0h-.66v6.22l-.58-.57V0h-.67v5l-.59-.58V0H8.7v6.56l4.44 4.33V0h-.67v7.44Zm1.26 14.35 4.42-4.33v-2.78L13.72 19v2.8Zm-5.03-.61 4.44 4.33v-2.96l-4.44-4.32v2.95Zm8.79-16.76-.59.58V0h-.66v5.66l-.6.56V0h-.66v6.87l-.58.57V0h-.67v10.9l4.42-4.34V0h-.66v4.42Zm-8.79 5.76 4.44 4.35v-2.8L8.69 7.4v2.77Zm0 3.65 4.44 4.33v-2.8l-4.44-4.3v2.77Zm0 3.63 4.44 4.33V19l-4.44-4.31v2.78Zm26.37 2.29H24.3a2.25 2.25 0 0 0 .36-1.22 2.32 2.32 0 0 0-2.33-2.31 2.32 2.32 0 0 0-2.31 2.31c0 .5.16.96.43 1.34a.74.74 0 0 0-.33.61c0 .26.14.49.33.62a2.32 2.32 0 0 0-.43 1.34 2.31 2.31 0 0 0 2.31 2.31 2.32 2.32 0 0 0 2.33-2.31c0-.45-.13-.87-.36-1.22h8.01v.49h-.8v.68h.8v.7h-.8v1.3h.8v-.58h1.17v.58h.79v-1.3h-.79v-.7h.79v-.68h-.79v-.5h1.58a.56.56 0 0 0 .56-.56v-.34a.57.57 0 0 0-.56-.56Zm-11.53 2.7a1.2 1.2 0 0 1-2.4 0c0-.24.08-.47.2-.66l.34-.56a.97.97 0 0 1-.34-.75c0-.3.13-.56.33-.74l-.32-.56a1.13 1.13 0 0 1-.2-.66 1.2 1.2 0 0 1 2.4 0c0 .49-.56 1.65-.56 1.65v.62c-.01.01.55 1.17.55 1.66ZM4.67 18.34v2.89c0 2.75 1.2 4.53 1.9 5.21l4.58 4.5c1.28 1.25 1.5 1.66 1.79 2.37v-3.2c0-2.84-1.44-3.94-2.19-4.67-1.73-1.68-2.89-2.8-3.82-3.73a8.98 8.98 0 0 1-2.26-3.37Zm6.08 14.24c-1.73-1.7-2.89-2.8-3.82-3.73a10 10 0 0 1-2.25-2.98v2.49a7.87 7.87 0 0 0 1.89 5.24l4.58 4.47c1.28 1.25 1.5 1.85 1.79 2.55v-3.37c0-2.85-1.45-3.95-2.19-4.67Z',
+  'M19.88 5.34c-.32 0-.64 0-.96.02V6.7a18.5 18.5 0 1 1 .95 36.94A18.5 18.5 0 0 1 1.35 25.17c0-5.67 2.55-10.73 6.58-14.13V9.32A19.78 19.78 0 0 0 0 25.17C0 36.12 8.9 45 19.88 45a19.85 19.85 0 0 0 19.86-19.83c0-10.95-8.9-19.83-19.87-19.83Z',
+  'M33.93 35.53c.3-.41.6-.85.87-1.3v-2.66h-.87v3.96Zm2.54-4.92c.12-.4.24-.78.34-1.16h-2.88v.7h.43c.77-.02 1.63-.03 2.11.46Zm-19.19-1.27h-.78v7.91h.78v-7.9Z',
+  'M14.7 27.83h2.58c.67 0 1.14.14 1.4.4.27.25.4.72.4 1.38v7.4c0 .66-.12 1.12-.4 1.38-.4.41-1.16.41-1.78.41l-.4-.01v3.5l.78.14v-2.88c1.2 0 1.97-.4 2.34-1.22v4.29h.26l.5-.01V29.74c0-.68.13-1.16.4-1.43.25-.27.72-.4 1.37-.4.67 0 1.65-.1 2.16.4.26.27.38.76.38 1.43v3.8h-1.77v-4.06h-.77v12.99c.26-.03.5-.07.77-.12V34.3h1.77v7.64c.36-.1.72-.21 1.08-.34v-7c0-.8.19-1.4 1-1.67l-.9-4.87h1.8l.3 5.31h.22l.3-5.31h1.88l-1.01 4.87c.84.3 1.01.81 1.01 1.66v4.53a16.63 16.63 0 0 0 1.5-1.27v-9.83h5.25l.1-.72H24.93l.17.89c-.38-.72-1.12-1.08-2.2-1.08h-.77c-1.3 0-2.1.52-2.4 1.55-.27-1.08-1.1-1.62-2.46-1.62h-3.36v14.52c.26.09.52.18.78.25V27.84Zm16.29 5.58-.85-.8.85-4.37v5.17Z',
+  'M27.66 40.79c.27-.14.55-.28.8-.43v-5.98h-.8v6.4Z',
+];
+const SVG_COLOR: Record<BgColorVersion, string> = {
+  'bg-white': 'text-primary-main',
+  transparent: 'text-white',
+};
+const TEXT_COLOR: Record<BgColorVersion, string> = {
+  'bg-white': 'text-black',
+  transparent: 'text-white',
+};
+
+export const Logo = JSX<Partial<LogoProps>>(
+  ({ className = '', href, children, targetBlank, bgColor = 'bg-white', hideTitle }) => {
+    return (
+      <a
+        className={`inline-flex items-center font-sans no-underline ${className}`}
+        href={href || 'https://rshb.ru/'}
+        target={targetBlank ? '_blank' : '_self'}
+      >
+        <SVG
+          className={`${SVG_COLOR[bgColor]} w-10 h-[38px]`}
+          viewBox="0 0 40 45"
+          paths={LOGO_PATHS.map((d) => ({ d }))}
+        />
+        {!hideTitle && (
+          <span className={`${TEXT_COLOR[bgColor]} text-sm font-medium ml-2.5`}>
+            {children || 'Россельхозбанк'}
+          </span>
+        )}
+      </a>
+    );
+  },
+);

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

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+interface SVGPathOptions {
+  fill?: string;
+  stroke?: string;
+  strokeLinecap?: string;
+  strokeLinejoin?: string;
+  strokeWidth?: string;
+  strokeMiterlimit?: string;
+}
+
+interface SVGPath extends SVGPathOptions {
+  d: string;
+}
+
+export interface SVGProps extends SVGPathOptions {
+  className?: string;
+  viewBox?: string;
+  paths: SVGPath[];
+  width?: string;
+  height?: string;
+}
+
+export const SVG = JSX<SVGProps>(
+  ({ className, viewBox, fill = 'none', width, height, paths, ...commonOptions }) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+        viewBox={viewBox}
+        fill={fill}
+        width={width}
+        height={height}
+      >
+        {paths.map(({ d, fill, ...options }, i) => (
+          <path key={i} d={d} fill={fill || 'currentColor'} {...commonOptions} {...options} />
+        ))}
+      </svg>
+    );
+  },
+);

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

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../Button/Button';
+import { Icon } from '../Icon/Icon';
+
+export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
+  const { term, setTerm } = context.useSearch();
+  return (
+    <form className={`relative ${className || ''}`}>
+      <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
+        <div className="w-[20px] h-[20px]">
+          <Icon name="LoupeIcon" width="24" height="24" />
+        </div>
+        {!term && (
+          <label
+            htmlFor="search-bar-input"
+            className="font-sans font-normal text-sm text-secondary-text"
+          >
+            Поиск по сайту
+          </label>
+        )}
+      </div>
+      <input
+        id="search-bar-input"
+        className={
+          'h-12 pl-12 w-full peer font-sans font-normal text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text'
+        }
+        value={term}
+        onChange={(e) => setTerm(e.target.value)}
+        type="text"
+        name="search-bar-input"
+      />
+      <Button
+        version="primary"
+        text="Найти"
+        className="w-auto invisible peer-focus:visible absolute top-1 right-1"
+        onClick={(e) => {
+          e.preventDefault();
+          console.log('click');
+        }}
+      >
+        <div className="font-normal text-sm px-9 py-[9px]">Найти</div>
+      </Button>
+    </form>
+  );
+});

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

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { TitleSize, TitleProps } from './TitleProps';
+
+export const SizeTableClass: Record<TitleSize, string> = {
+  XL: 'text-m-title',
+  L: 'text-m-title',
+  M: 'text-m-title-md',
+  S: 'text-m-title-xs',
+  '2XS': 'text-m-title-xs',
+  '3XS': 'text-m-title-xs',
+};
+
+export const Title = JSX<TitleProps>(({ size = 'L', className, children, ...rest }) => {
+  const Tag = size === 'XL' || size === 'L' ? 'h1' : 'h2';
+  return (
+    <Tag className={getClasses(SizeTableClass[size], className)} {...rest}>
+      {children}
+    </Tag>
+  );
+});
+
+const getClasses = (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ');

package/mobile/src/ui-kit/Title/TitleProps.ts

@@ -0,0 +1,5 @@
+export type TitleSize = 'XL' | 'L' | 'M' | 'S' | '2XS' | '3XS';
+
+export interface TitleProps extends Partial<HTMLHeadingElement> {
+  size?: TitleSize;
+}