@redneckz/wildless-cms-uni-blocks 0.7.1 → 0.7.2

package/src/components/Video/Video.tsx

@@ -1,29 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { getPaddings } from './getPaddings';
 import type { VideoContent } from './VideoContent';
 
 interface VideoProps extends VideoContent, UniBlockProps {}
 
-export const Video = JSX<VideoProps>((props) => {
-  const { title, src, previewImg, className = '', ...rest } = props;
-
-  return (
-    <BlockWrapper className={`bg-white ${getPaddings(className)} ${className}`} {...rest}>
-      <Headline title={title} headlineVersion="M" />
-      {src ? (
-        <video
-          className="m-auto w-full object-fill"
-          preload="metadata"
-          poster={previewImg?.src}
-          style={{ maxHeight: 524 }}
-          controls
-        >
-          <source src={src} />
-        </video>
-      ) : null}
-    </BlockWrapper>
-  );
-});
+export const Video = JSX<VideoProps>(({ className, title, src, previewImg, ...rest }) => (
+  <BlockWrapper className={style(getPaddings(className), className)} {...rest}>
+    <Headline title={title} headlineVersion="M" />
+    {src ? (
+      <video
+        className="m-auto w-full object-fill"
+        preload="metadata"
+        poster={previewImg?.src}
+        style={{ maxHeight: 524 }}
+        controls
+      >
+        <source src={src} />
+      </video>
+    ) : null}
+  </BlockWrapper>
+));

package/src/components/Video/getPaddings.ts

@@ -2,5 +2,5 @@ import { getColSpan } from '../../utils/getColSpan';
 
 const MIN_COL_SPAN = 10;
 
-export const getPaddings = (className: string) =>
+export const getPaddings = (className?: string) =>
   getColSpan(className) < MIN_COL_SPAN ? 'py-6 px-11' : 'py-12 px-32';

package/src/icons/IconName.ts

@@ -139,6 +139,7 @@ export enum IconMap {
   WalletIcon = 'WalletIcon',
   WalletWithMoneyIcon = 'WalletWithMoneyIcon',
   WateringCanIcon = 'WateringCanIcon',
+  YoutubeIcon = 'YoutubeIcon',
 }
 
 export enum IconTitleMap {
@@ -240,6 +241,7 @@ export enum IconTitleMap {
   WalletIcon = 'Кошелёк',
   WalletWithMoneyIcon = 'Кошелёк с деньгами',
   WateringCanIcon = 'Добавить продукт',
+  YoutubeIcon = 'Лого «Youtube»',
 }
 
 /**
@@ -247,7 +249,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка \'Влево\'', 'Стрелка \'Вправо\'', 'Стрелка \'Вверх-право\'', 'Стрелка \'Вверх\'', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт', 'Лого «Youtube»'
  * ]
  */
 export type IconName =
@@ -349,4 +351,5 @@ export type IconName =
   | 'WalletAddIcon'
   | 'WalletIcon'
   | 'WalletWithMoneyIcon'
-  | 'WateringCanIcon';
+  | 'WateringCanIcon'
+  | 'YoutubeIcon';

package/src/icons/YoutubeIcon.svg

@@ -0,0 +1,3 @@
+<svg title="Лого «Youtube»" isInverse="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 2.30078C0.172 2.30078 0 3.17478 0 10.0008C0 16.8268 0.172 17.7008 10 17.7008C19.828 17.7008 20 16.8268 20 10.0008C20 3.17478 19.828 2.30078 10 2.30078ZM13.205 10.3348L8.715 12.4308C8.322 12.6128 8 12.4088 8 11.9748V8.02678C8 7.59378 8.322 7.38878 8.715 7.57078L13.205 9.66678C13.598 9.85078 13.598 10.1508 13.205 10.3348Z" fill="currentColor"/>
+</svg>

package/src/model/BlockVersion.ts

@@ -1,57 +1,15 @@
-import { GapVersion } from '../components/HorizontalLayout/HorizontalLayoutContent';
-
-/**
- * @title Цвет блока
- * @enumNames ["Основная", "Второстепенная"]
- */
-export type BlockVersion = 'primary' | 'secondary';
-
 /**
- * @title Цвет блока
- * @enumNames ["Прозрачная", "Основная", "Второстепенная"]
+ * @title Тема блока
+ * @enumNames ["Основная", "Второстепенная", "Серая", "Прозрачная", "Наследуемая"]
  */
-export type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';
-
-/**
- * @title Цвет блока
- * @enumNames [ "Основная", "Второстепенная", "Серая"]
- */
-export type BlockVersionWithGray = 'primary' | 'secondary' | 'gray';
-
-export const VersionStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
-export const VersionAdditionalStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
-export const VersionWithTransparentStyleMap: Record<BlockVersionWithTransparent, string> = {
-  transparent: '',
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-};
-
-export const VersionWithGrayStyleMap: Record<BlockVersionWithGray, string> = {
-  primary: 'bg-white text-primary-text',
-  secondary: 'bg-primary-main text-white',
-  gray: 'bg-main-divider text-primary-text',
-};
+export type BlockVersion = 'primary' | 'secondary' | 'gray' | 'transparent' | '';
 
-export const GapStyleMap: Record<GapVersion, string> = {
-  XXL: 'gap-12',
-  XL: 'gap-10',
-  L: 'gap-8',
-  M: 'gap-4',
-  S: 'gap-2',
-  XS: 'gap-1',
-  '': '',
-};
+type BlockVersionAtom<A extends string> = '' | `group-data-${BlockVersion}:${A}`;
 
-export const LayoutBackgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
-  transparent: '',
-  primary: 'bg-white',
-  secondary: 'bg-primary-main',
-};
+export type BlockVersionMolecule<A extends string> =
+  | ''
+  | A
+  | BlockVersionAtom<A>
+  | `${A} ${BlockVersionAtom<A>}`
+  | `${BlockVersionAtom<A>} ${BlockVersionAtom<A>}`
+  | `${BlockVersionAtom<A>} ${BlockVersionAtom<A>} ${BlockVersionAtom<A>}`;

package/src/model/ButtonVersion.ts

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

package/src/model/JSXBlock.ts

@@ -1,11 +1,13 @@
 import type { UNIComponent } from '@redneckz/uni-jsx';
 import type { BlockRendererOptions } from '../BlockRenderer/BlockRendererOptions';
 import type { SlotName } from './BlockDecorator';
+import type { BlockVersion } from './BlockVersion';
 import type { BlockDef } from './ContentPageDef';
 import type { VNode } from './VNode';
 
 export interface UniBlockProps {
   className?: string;
+  version?: BlockVersion;
   block?: BlockDef;
   options?: BlockRendererOptions;
 }

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

@@ -5,16 +5,6 @@ import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Img } from '../Img/Img';
 import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
-const titleStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-};
-
-const descStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
 export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
@@ -37,9 +27,13 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
         </div>
       ) : null}
       <div className="gap-0.5">
-        {label ? <div className={`text-h6 ${titleStyleMap[version]}`}>{label}</div> : null}
+        {label ? (
+          <div className="text-h6 text-primary-text group-data-secondary:text-white">{label}</div>
+        ) : null}
         {description ? (
-          <div className={`text-m-light ${descStyleMap[version]}`}>{description}</div>
+          <div className="text-m-light text-secondary-text group-data-secondary:text-white">
+            {description}
+          </div>
         ) : null}
       </div>
     </div>

package/src/ui-kit/BlockWrapper.tsx

@@ -1,16 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../EventBus/EventBus';
+import type { BlockVersion } from '../model/BlockVersion';
 import type { UniBlockProps } from '../model/JSXBlock';
 import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
+import { style } from '../utils/style';
 
 interface BlockWrapperProps extends UniBlockProps {
   tag?: keyof HTMLElementTagNameMap;
   role?: string;
 }
 
+export const blockStyles: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+  gray: 'bg-main-divider text-primary-text',
+  transparent: 'bg-transparent text-primary-text',
+  '': '',
+};
+
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({ className = '', block, tag = 'section', role, children }) => {
+  ({ className = '', version = 'primary', block, tag = 'section', role, children }) => {
     const Tag: any = tag;
 
     const ref = useBlockIntersectionObserver(block);
@@ -32,7 +42,12 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     );
 
     return isVisible ? (
-      <Tag className={className} role={role} {...(block?.anchor ? { id: block.anchor, ref } : {})}>
+      <Tag
+        className={style('group', blockStyles[version], className)}
+        {...(version ? { 'data-ver': version } : {})}
+        {...(block?.anchor ? { id: block.anchor, ref } : {})}
+        role={role}
+      >
         {children}
       </Tag>
     ) : null;

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

@@ -6,7 +6,7 @@ import type { ButtonProps } from './ButtonProps';
 export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) => (
   <Button
     rounded
-    className={`group shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${
+    className={`group/btn shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${
       disabled
         ? 'bg-secondary-light text-secondary-text'
         : 'bg-white text-primary-text hover:text-primary-main'
@@ -17,7 +17,7 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
     <Img
       className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border"
       image={{ icon: 'ArrowLeftIcon', iconVersion: 'black' }}
-      imageClassName="group-hover:text-primary-main"
+      imageClassName="group-hover/btn:text-primary-main"
       width="16"
       height="16"
       asSVG

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

@@ -34,7 +34,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
   const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
 
   return [
-    'group flex items-center justify-center',
+    'group/btn flex items-center justify-center',
     isWithText(props) ? withTextStyle : 'h-12 w-12',
     rounded ? 'rounded-full' : '',
   ].join(' ');

package/src/ui-kit/Button/buttonClassNameConstants.ts

@@ -7,6 +7,8 @@ export const buttonStyleMap: Record<ButtonVersion, string> = {
   white:
     'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white active:text-primary-main',
   link: '',
+  transparent: '',
+  '': '',
 };
 
 const DisabledStyle = 'bg-main-divider text-main-disabled';
@@ -16,13 +18,17 @@ export const buttonDisabledStyleMap: Record<ButtonVersion, string> = {
   secondary: DisabledStyle,
   white: DisabledStyle,
   link: '',
+  transparent: '',
+  '': '',
 };
 
 export const buttonStyle = 'text-center font-sans select-none';
 
 export const iconStyleMap: Record<ButtonVersion, string> = {
-  primary: 'group-hover:brightness-0 group-hover:invert',
-  secondary: 'group-hover:brightness-0 group-hover:invert',
-  white: 'group-hover:brightness-0 group-hover:invert',
+  primary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+  secondary: 'group-hover/btn:brightness-0 group-hover/btn:invert',
+  white: 'group-hover/btn:brightness-0 group-hover/btn:invert',
   link: '',
+  transparent: '',
+  '': '',
 };

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

@@ -0,0 +1,52 @@
+import type { Picture } from '../../model/Picture';
+import { style } from '../../utils/style';
+import { Img } from '../Img/Img';
+import { Button } from './Button';
+import type { ButtonWithIconProps } from './ButtonProps';
+
+interface ButtonsSectionOptions {
+  className?: string;
+  buttonClassName?: string;
+  isVertical?: boolean;
+}
+
+export const renderButtonsSection = (
+  buttons?: (ButtonWithIconProps | undefined)[],
+  { className = '', buttonClassName, isVertical }: ButtonsSectionOptions = {},
+) =>
+  buttons?.length && buttons.some((_) => _?.text) ? (
+    <div className={style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className)}>
+      {buttons.map(renderButton(buttonClassName))}
+    </div>
+  ) : null;
+
+const renderButton =
+  (buttonClassName = '') =>
+  (button?: ButtonWithIconProps, index?: number) => {
+    const { text, icon, iconRight, version, ...rest } = button || {};
+    const iconVersion = version === 'secondary' ? 'color' : 'white';
+
+    return text ? (
+      <Button
+        key={index ? String(index) : ''}
+        className={buttonClassName}
+        appendLeft={renderButtonIcon({ ...icon, iconVersion })}
+        appendRight={renderButtonIcon({ ...iconRight, iconVersion })}
+        version={version}
+        text={text}
+        {...rest}
+      />
+    ) : null;
+  };
+
+const DEFAULT_ICON_W = 24;
+
+const renderButtonIcon = (icon: Picture) =>
+  icon?.icon || icon?.src ? (
+    <Img
+      image={icon}
+      width={String(icon?.size?.width || DEFAULT_ICON_W)}
+      height={String(DEFAULT_ICON_W)}
+      asSVG
+    />
+  ) : null;

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

@@ -14,9 +14,9 @@ const CHECK_PATHS = [
 export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio, onChange }) => {
   return (
     <div className={className}>
-      <label className="flex items-center relative cursor-pointer group">
+      <label className="flex items-center relative cursor-pointer group/box">
         <input
-          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover:border-primary-hover
+          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover/box:border-primary-hover
         ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
         ${checked ? 'border-black' : 'border-gray'}
         checked:border-primary-main m-0`}

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

@@ -4,6 +4,7 @@ import type { VNode } from '../../model/VNode';
 import type { FoldablePartProps } from './FoldablePartProps';
 
 export interface FoldableProps {
+  className?: string;
   unfoldedByDefault?: boolean;
   isFoldButtonOnTop?: boolean;
   renderFoldableSection: (props: FoldablePartProps) => VNode;
@@ -12,6 +13,7 @@ export interface FoldableProps {
 
 export const Foldable = JSX<FoldableProps>(
   ({
+    className = '',
     isFoldButtonOnTop = false,
     unfoldedByDefault = false,
     renderFoldableSection,
@@ -27,12 +29,12 @@ export const Foldable = JSX<FoldableProps>(
     const buttonNode = renderFoldButton ? renderFoldButton({ isUnfolded, onToggle }) : null;
 
     return isFoldButtonOnTop ? (
-      <div>
+      <div className={className}>
         {buttonNode}
         {sectionNode}
       </div>
     ) : (
-      <div>
+      <div className={className}>
         {sectionNode}
         {buttonNode}
       </div>

package/src/ui-kit/Foldable/FoldablePartProps.ts

@@ -1,4 +1,4 @@
 export interface FoldablePartProps {
-  isUnfolded: boolean;
+  isUnfolded?: boolean;
   onToggle?: () => void;
 }

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

@@ -1,41 +1,39 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BgColorVersion } from '../../model/BgColorVersion';
+import { useLink } from '../../hooks/useLink';
+import { style } from '../../utils/style';
 import type { TopItemProps } from '../TopItem/TopItem';
 
 export type HeaderItemProps = TopItemProps;
 
-const TEXT_CLASSES = 'font-sans text-s';
-const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
+export const HeaderItem = JSX<TopItemProps>(
+  ({ className = '', active, dataItemName, children, ...rest }) => {
+    const link = useLink();
+    const { href, target, text, onClick } = link(rest);
 
-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}
+        data-item-name={dataItemName}
         onClick={onClick}
       >
-        <span className={getTextClasses(bgColor, active)}>{text || children}</span>
-        {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
+        <span className={getTextStyle(active)}>{text || children}</span>
+        {active ? <div className={getBorderStyle(active)} /> : null}
       </a>
     );
   },
 );
 
-const getTextClasses = (bgColor: BgColorVersion, active = false) => {
-  let classes = 'text-white';
-  if (bgColor === 'bg-white') {
-    classes = active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main';
-  }
+const getTextStyle = (active = false) =>
+  style(
+    'font-sans text-s',
+    active ? 'text-primary-main' : 'text-secondary-text hover:text-primary-main',
+    'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover',
+  );
 
-  return `${classes} ${TEXT_CLASSES}`;
-};
-
-const getBorderClasses = (bgColor: BgColorVersion, active = false) => {
-  if (!active) {
-    return BORDER_CLASSES;
-  }
-
-  return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
-};
+const getBorderStyle = (active = false) =>
+  style(
+    'absolute left-0 -bottom-3 w-full h-0.5',
+    active ? 'bg-primary-main group-data-transparent:bg-transparent' : '',
+  );

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

@@ -1,13 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { BgColorVersion } from '../../model/BgColorVersion';
+import { style } from '../../utils/style';
 import type { TopItemProps } from '../TopItem/TopItem';
 
-const TEXT_CLASSES = 'font-sans text-l-light';
-const BORDER_CLASSES = 'absolute left-0 -bottom-3 w-full h-0.5';
-
 export const HeaderItem = JSX<TopItemProps>(
-  ({ className = '', active, bgColor = 'bg-white', dataItemName, children, ...rest }) => {
+  ({ className = '', active, dataItemName, children, ...rest }) => {
     const link = useLink();
     const { href, target, text, onClick } = link(rest);
 
@@ -19,26 +16,22 @@ export const HeaderItem = JSX<TopItemProps>(
         data-item-name={dataItemName}
         onClick={onClick}
       >
-        <span className={getTextClasses(bgColor, active)}>{text || children}</span>
-        {active ? <div className={getBorderClasses(bgColor, active)} /> : null}
+        <span className={getTextStyle(active)}>{text || children}</span>
+        {active ? <div className={getBorderStyle(active)} /> : null}
       </a>
     );
   },
 );
 
-const getTextClasses = (bgColor: BgColorVersion, active = false) => {
-  let classes = 'text-white';
-  if (bgColor === 'bg-white') {
-    classes = active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main';
-  }
-
-  return `${classes} ${TEXT_CLASSES}`;
-};
-
-const getBorderClasses = (bgColor: BgColorVersion, active = false) => {
-  if (!active) {
-    return BORDER_CLASSES;
-  }
+const getTextStyle = (active = false) =>
+  style(
+    'font-sans text-l-light',
+    active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main',
+    'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover',
+  );
 
-  return `${bgColor === 'bg-white' ? 'bg-primary-main' : bgColor} ${BORDER_CLASSES}`;
-};
+const getBorderStyle = (active = false) =>
+  style(
+    'absolute left-0 -bottom-3 w-full h-0.5',
+    active ? 'bg-primary-main group-data-transparent:bg-transparent' : '',
+  );

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { HeadingProps, HeadingType } from './HeadingProps';
 
-const HEADING_STYLE_MAP: Record<HeadingType, string> = {
+const styles: Record<HeadingType, string> = {
   h0: 'text-h0', // 56
   h1: 'text-h1', // 50
   h2: 'text-h2', // 40
@@ -11,10 +11,8 @@ const HEADING_STYLE_MAP: Record<HeadingType, string> = {
   h6: 'text-h6', // 20
 };
 
-export const Heading = JSX<HeadingProps>((props) => {
-  const { className = '', headingType = 'h3', title, as: Tag = 'h3' } = props;
-
-  return (
-    <Tag className={`font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`}>{title}</Tag>
-  );
-});
+export const Heading = JSX<HeadingProps>(
+  ({ className = '', headingType = 'h3', as: Tag = 'h3', title, children }) => (
+    <Tag className={`font-sans m-0 ${styles[headingType]} ${className}`}>{title || children}</Tag>
+  ),
+);

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
+import { style } from '../../utils/style';
 import type { IconProps } from './IconProps';
 
 const svgUseStyleMap: Record<IconVersion, string> = {
@@ -27,12 +28,12 @@ export const Icon = JSX<IconProps>(
       return (
         <Background className={className}>
           <svg
-            className={[
-              getSvgSize(className, imgProps.width),
+            className={style(
+              getSvgSize(imgProps.width),
               svgUseStyleMap[iconVersion],
+              iconVersion === 'white' ? 'invert' : '',
               imageClassName,
-              getInvertStyle(iconVersion),
-            ].join(' ')}
+            )}
             {...imgProps}
             aria-hidden="true"
           >
@@ -57,11 +58,7 @@ export const Icon = JSX<IconProps>(
   },
 );
 
-const getInvertStyle = (iconVersion: IconVersion): string =>
-  iconVersion === 'white' ? 'invert' : '';
-
-const getSvgSize = (className?: string, width?: string) =>
-  width ? `width: ${width}px ` : 'w-full h-full';
+const getSvgSize = (width?: string) => (width ? '' : 'w-full h-full');
 
 const Background = JSX<{ className?: string }>(({ className, children }) =>
   className ? <div className={className}>{children}</div> : children,