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

package/mobile/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/mobile/src/ui-kit/Foldable/FoldablePartProps.ts

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

package/mobile/src/ui-kit/HeaderItem/HeaderItem.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/mobile/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,

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

@@ -4,7 +4,7 @@ import { Img } from '../Img/Img';
 
 const LINK_CLASS_NAME = `absolute border border-primary-main ml-3 px-6 py-5
   text-l-light bg-white text-primary-text flex w-[316px]
-  justify-between items-center group-hover:text-primary-main z-10`;
+  justify-between items-center group-hover/link:text-primary-main z-10`;
 
 const LINK_BORDER_CLASS_NAME =
   'bg-transparent border-white border h-[70px] absolute w-[316px] top-0';
@@ -20,14 +20,14 @@ export const LinkButton = JSX<LinkButtonProps>(
     }
 
     return (
-      <div className={`relative group cursor-pointer w-[328px] h-[82px] ${className}`}>
+      <div className={`relative group/link cursor-pointer w-[328px] h-[82px] ${className}`}>
         <a className={LINK_CLASS_NAME} role="link" href={href} target={target}>
           <div className="p-0.5">{text}</div>
           <div className="w-6 h-6">
             <Img
-              className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover:brightness-100"
+              className="w-4 h-4 min-w-4 min-h-4 rounded-full box-border brightness-0 group-hover/link:brightness-100"
               image={{ icon: 'ArrowRightIcon', iconVersion: 'black' }}
-              imageClassName="group-hover:text-primary-main"
+              imageClassName="group-hover/link:text-primary-main"
               width="24"
               height="24"
               asSVG

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

@@ -1,12 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ListItem } from './ListItem';
-import type { ListItemSize, ListItemVersion, ListProps } from './ListProps';
-
-const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-  gray: 'text-secondary-text',
-};
+import type { ListItemSize, ListProps } from './ListProps';
 
 const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
   S: 'text-l-light',
@@ -20,39 +14,25 @@ const ITEM_INDENT_MAP = {
   L: 'ml-4',
 };
 
-export const List = JSX<ListProps>((props) => {
-  const {
-    className = '',
-    hasIndent,
-    isDotted,
-    itemClassName = '',
-    items,
-    listItemSize = 'M',
-    version = 'primary',
-  } = props;
-
-  if (!items?.length) {
-    return null;
-  }
-
-  return (
-    <section
-      className={`${TEXT_STYLE_MAP[version]} ${TEXT_SIZE_MAP[listItemSize]} ${className} ${
-        hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''
-      }`}
-      role="list"
-    >
-      {items.map((item, i) => (
-        <ListItem
-          key={String(i)}
-          className={`${itemClassName} mb-1.5`}
-          isDotted={isDotted}
-          version={version}
-          size={listItemSize}
-        >
-          {item}
-        </ListItem>
-      ))}
-    </section>
-  );
-});
+export const List = JSX<ListProps>(
+  ({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) =>
+    items?.length ? (
+      <section
+        className={`text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${
+          TEXT_SIZE_MAP[listItemSize]
+        } ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`}
+        role="list"
+      >
+        {items.map((item, i) => (
+          <ListItem
+            key={String(i)}
+            className={`${itemClassName} mb-1.5`}
+            isDotted={isDotted}
+            size={listItemSize}
+          >
+            {item}
+          </ListItem>
+        ))}
+      </section>
+    ) : null,
+);

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -1,23 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ListItemSize, ListItemVersion } from './ListProps';
+import type { ListItemSize } from './ListProps';
 
 /**
  * @title Параметры элемента списка
  */
 export interface ListItemProps {
   className?: string;
-  version?: ListItemVersion;
   text?: string;
   isDotted?: boolean;
   size?: ListItemSize;
 }
 
-const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
-  primary: 'bg-primary-text',
-  secondary: 'bg-white',
-  gray: 'bg-secondary-text',
-};
-
 const DOT_SIZE_MAP = {
   L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
   M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
@@ -25,18 +18,16 @@ const DOT_SIZE_MAP = {
 };
 
 export const ListItem = JSX<ListItemProps>(
-  ({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
-    return (
-      <div className={`font-sans flex items-baseline ${className}`} role="listitem">
-        {isDotted ? (
-          <div>
-            <div
-              className={`rounded-full align-middle inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}`}
-            />
-          </div>
-        ) : null}
-        <span>{children}</span>
-      </div>
-    );
-  },
+  ({ className = '', isDotted = true, children, size = 'M' }) => (
+    <div className={`font-sans flex items-baseline ${className}`} role="listitem">
+      {isDotted ? (
+        <div>
+          <div
+            className={`rounded-full align-middle inline-block bg-primary-text group-data-secondary:bg-white ${DOT_SIZE_MAP[size]}`}
+          />
+        </div>
+      ) : null}
+      <span>{children}</span>
+    </div>
+  ),
 );

package/mobile/src/ui-kit/List/ListProps.ts

@@ -6,12 +6,6 @@ import type { ListContent } from './ListContent';
  */
 export type ListItemSize = 'S' | 'M' | 'L';
 
-/**
- * @title Версия списка
- * @enumNames ["Основной", "Второстепенный", "Серый"]
- */
-export type ListItemVersion = 'primary' | 'secondary' | 'gray';
-
 /**
  * @title Содержимое списка
  */
@@ -25,5 +19,4 @@ export interface ListProps extends ListContent {
   /** @title Буллиты */
   isDotted?: boolean;
   listItemSize?: ListItemSize;
-  version?: ListItemVersion;
 }

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

@@ -140,7 +140,7 @@ const ForeignOffices = JSX<ForeignOfficeProps>(({ foreignOffices }) =>
   foreignOffices?.length ? (
     <div className="border-t border-main-divider mt-7 pt-7">
       <div className="mb-4">
-        <Text size="text-m-light" color="text-secondary-text">
+        <Text size="text-m" font="font-light" color="text-secondary-text">
           Представительства за рубежом:
         </Text>
       </div>

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ParagraphProps } from './ParagraphProps';
 
-export const Paragraph = JSX<ParagraphProps>(({ size, color, align, font, children }) => (
-  <p className={['font-sans', size, color, align, font].filter(Boolean).join(' ')}>{children}</p>
+export const Paragraph = JSX<ParagraphProps>(({ children, ...style }) => (
+  <p className={['font-sans', ...Object.values(style)].join(' ')}>{children}</p>
 ));

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

@@ -2,7 +2,8 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { mapChildren } from '../../utils/mapChildren';
-import type { SwipeContainerProps } from './SwipeListControlProps';
+import { style } from '../../utils/style';
+import type { SwipeContainerProps, SwipeListControlType } from './SwipeListControlProps';
 import { SwipeListItem } from './SwipeListItem';
 
 type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
@@ -20,6 +21,7 @@ interface SwipeListContainerProps extends SwipeContainerProps {
   snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
   onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
   onVisibleIndicesChange?: (indices: number[]) => void;
+  listType?: SwipeListControlType;
 }
 
 const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
@@ -32,6 +34,7 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
     visibleItemCount = 0,
     gap = 0,
     padding = 0,
+    listType = 'horizontal-list',
     snapAlign = 'snap-center',
     children,
     onVisibleItemsChange,
@@ -54,25 +57,31 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
       },
       [onVisibleItemsChange, onVisibleIndicesChange],
     );
+
     const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
 
+    const isHorizontalList = listType === 'horizontal-list';
+    const containerStyle = {
+      ...(isHorizontalList ? getContainerStyle(padding, additionPadding) : {}),
+      gap: `${gap}px`,
+    };
+
     return (
       <div
-        className={`box-border overflow-auto flex horizontal-list no-scrollbar ${className}`}
-        style={{
-          ...getContainerStyle(padding, additionPadding),
-          gap: `${gap}px`,
-        }}
+        className={style('box-border overflow-auto no-scrollbar', listType, className)}
+        style={containerStyle}
         role="list"
         ref={containerRef}
       >
         {mapChildren((child, idx) => (
           <SwipeListItem
             key={String(idx)}
-            className={`${snapAlign} ${
-              visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''
-            }`}
-            style={getContainerStyle(padding / 4)}
+            className={style(
+              snapAlign,
+              visibleItemCount ? childStyleMap[visibleItemCount - 1] : '',
+              listType === 'vertical-list' ? 'h-full' : '',
+            )}
+            style={isHorizontalList ? getContainerStyle(padding / 4) : {}}
             activeIndex={activeIndex}
             idx={idx}
             observerOptions={observerOptions}

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { SwipeListContainer } from './SwipeListContainer';
 import { SwipeListControlDots } from './SwipeListControlDots';
 import type { SwipeListControlProps } from './SwipeListControlProps';
@@ -15,12 +16,13 @@ const DEFAULT_PADDING = 16;
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
-    className,
+    className = '',
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
     children,
     onVisibleIndicesChange,
+    listType = 'horizontal-list',
   }) => {
     const itemCount = Array.isArray(children) ? children.length : 0;
 
@@ -31,7 +33,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     const [activeIndex] = scroll.visibleIndicesRange;
 
     return (
-      <div className={className}>
+      <div className={style(className, listType === 'vertical-list' ? 'relative h-full' : '')}>
         <SwipeListContainer
           containerRef={containerRef}
           activeIndex={activeIndex}
@@ -39,6 +41,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
           gap={gap}
           padding={padding}
           onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+          listType={listType}
         >
           {children}
         </SwipeListContainer>
@@ -47,6 +50,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
             containerRef={containerRef}
             activeIndex={activeIndex}
             dotCount={itemCount}
+            listType={listType}
           />
         ) : null}
       </div>

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

@@ -1,15 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { SwipeListControlType } from './SwipeListControlProps';
 
-const dotStyle = 'cursor-pointer bg-primary-main h-2 rounded-full transition-width duration-300';
+const containerStyles: Record<SwipeListControlType, string> = {
+  'horizontal-list': 'mx-auto mt-5 w-fit',
+  'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
+};
+
+const activeDotStyles: Record<SwipeListControlType, string> = {
+  'horizontal-list': 'w-6',
+  'vertical-list': 'h-6',
+};
+
+const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300';
+
+const inactiveDotStyle = 'w-2 h-2 opacity-30';
 
 interface SwipeListControlDotsProps {
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
   dotCount?: number;
+  listType?: SwipeListControlType;
 }
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
-  ({ containerRef, activeIndex, dotCount = 0 }) => {
+  ({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list' }) => {
     const handleClick = (idx: number) => {
       if (idx !== activeIndex && containerRef?.current) {
         containerRef.current.children[idx]?.scrollIntoView({
@@ -20,11 +34,13 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
     };
 
     return dotCount ? (
-      <div className="flex gap-2 mx-auto mt-5 w-fit">
+      <div className={`flex gap-2 ${containerStyles[listType]}`}>
         {new Array(dotCount).fill(null).map((_, idx: number) => (
           <div
             key={String(idx)}
-            className={`${dotStyle} ${idx === activeIndex ? 'w-6' : 'w-2 opacity-30'}`}
+            className={`${dotStyle} ${
+              idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle
+            }`}
             role="button"
             aria-hidden
             onClick={() => handleClick(idx)}

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -1,3 +1,9 @@
+/**
+ * @title Вид
+ * @enumNames ["Горизонтальный", "Вертикальный"]
+ */
+export type SwipeListControlType = 'horizontal-list' | 'vertical-list';
+
 /**
  * @title Контейнер
  */
@@ -15,5 +21,7 @@ export interface SwipeListControlProps extends SwipeContainerProps {
   className?: string;
   /** @title Точки-индикаторы */
   showDots?: boolean;
+  /** @hidden */
   onVisibleIndicesChange?: (indices: number[]) => void;
+  listType?: SwipeListControlType;
 }

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

@@ -8,8 +8,6 @@ interface TextProps {
   font?: FontWeight;
 }
 
-export const Text = JSX<TextProps>(({ size, color, align, font, children }) => (
-  <span className={['font-sans', size, color, align, font].filter(Boolean).join(' ')}>
-    {children}
-  </span>
+export const Text = JSX<TextProps>(({ children, ...style }) => (
+  <span className={['font-sans', ...Object.values(style)].join(' ')}>{children}</span>
 ));

package/mobile/src/ui-kit/Text/TextProps.ts

@@ -1,3 +1,5 @@
+import { BlockVersionMolecule } from '../../model/BlockVersion';
+
 /**
  * @title Размер текста
  */
@@ -35,7 +37,7 @@ export type TitleSize =
 /**
  * @title Цвет текста
  */
-export type TextColor =
+export type TextColor = BlockVersionMolecule<
   | ''
   | 'text-main'
   | 'text-primary-text'
@@ -45,7 +47,8 @@ export type TextColor =
   | 'text-error'
   | 'text-white'
   | 'text-white/80'
-  | 'text-green';
+  | 'text-green'
+>;
 
 /**
  * @title Выравнивание

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
 
 export interface TopItemContent extends LinkProps {
   active?: boolean;
@@ -11,50 +11,44 @@ export interface TopItemProps extends TopItemContent {
   className?: string;
   flat?: boolean;
   ariaLabel?: string;
-  bgColor?: BgColorVersion;
   dataItemName?: string;
   onClick?: () => void;
 }
 
-const TEXT_CLASSES = 'font-sans text-s-light';
-const LINK_CLASSES = 'inline-block border border-solid bg-transparent text-center no-underline';
-
 export const TopItem = JSX<TopItemProps>(
-  ({ className = '', active, flat, ariaLabel, bgColor = 'bg-white', children, ...rest }) => {
+  ({ className = '', active, flat, ariaLabel, children, ...rest }) => {
     const link = useLink();
     const { href, target, text, onClick } = link(rest);
 
     return (
       <a
-        className={`${getLinkClasses(bgColor, active, flat)} ${className}`}
+        className={`${getLinkStyle(active, flat)} ${className}`}
         href={href}
         target={target}
         onClick={onClick}
         rel="noopener noreferrer"
         aria-label={ariaLabel}
       >
-        <span className={getTextClasses(bgColor, active, flat)}>{text || children}</span>
+        <span className={getTextStyle(active, flat)}>{text || children}</span>
       </a>
     );
   },
 );
 
-const getLinkClasses = (bgColor: BgColorVersion, active = false, flat = false) => {
-  let classes = 'border-transparent';
-  if (active) {
-    classes = `rounded-md ${bgColor === 'bg-white' ? 'border-primary-main' : 'border-white'}`;
-  }
-
-  return `${classes} ${LINK_CLASSES} ${flat ? '' : 'px-4 py-2'}`;
-};
-
-const getTextClasses = (bgColor: BgColorVersion, active = false, flat = false) => {
-  if (bgColor === 'transparent') {
-    return `text-white hover:text-primary-hover ${TEXT_CLASSES}`;
-  }
-  const nonActiveAtoms = `${
-    flat ? 'text-primary-text' : 'text-secondary-text'
-  } hover:text-primary-main`;
-
-  return `${active ? 'text-primary-main' : nonActiveAtoms} ${TEXT_CLASSES}`;
-};
+const getLinkStyle = (active = false, flat = false) =>
+  style(
+    'inline-block border border-solid bg-transparent text-center no-underline',
+    active
+      ? 'rounded-md border-primary-main group-data-transparent:border-white'
+      : 'border-transparent',
+    flat ? '' : 'px-4 py-2',
+  );
+
+const getTextStyle = (active = false, flat = false) =>
+  style(
+    'font-sans text-s-light',
+    active
+      ? 'text-primary-main'
+      : style(flat ? 'text-primary-text' : 'text-secondary-text', 'hover:text-primary-main'),
+    'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover',
+  );

package/mobile/src/utils/getColSpan.ts

@@ -1,6 +1,6 @@
-export const getColSpan = (className: string) => {
+export const getColSpan = (className?: string): number => {
   const colSpanPrefix = 'col-span-';
-  const colSpanStr = className.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
+  const colSpanStr = className?.split(/\s+/).find((_) => _.startsWith(colSpanPrefix));
 
   return colSpanStr ? parseInt(colSpanStr.substring(colSpanPrefix.length), 10) : 12;
 };

package/mobile/src/utils/style.ts

@@ -0,0 +1,7 @@
+type Atom = string | null | undefined;
+
+export const style = (...atoms: Array<Atom | Atom[]>): string =>
+  atoms
+    .flatMap((_) => _)
+    .filter(Boolean)
+    .join(' ');