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

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,

package/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/src/ui-kit/List/List.fixture.tsx

@@ -15,23 +15,13 @@ export default {
     </div>
   ),
   'secondary dotted': (
-    <div className="bg-primary-main p-12">
-      <List items={items} version="secondary" />
+    <div className="group bg-primary-main p-12" data-ver="secondary">
+      <List items={items} />
     </div>
   ),
   'secondary w/o dots': (
-    <div className="bg-primary-main p-12">
-      <List items={items} version="secondary" isDotted={false} />
-    </div>
-  ),
-  'gray dotted': (
-    <div className="bg-white p-12">
-      <List items={items} version="gray" />
-    </div>
-  ),
-  'gray w/o dots': (
-    <div className="bg-white p-12">
-      <List items={items} version="gray" isDotted={false} />
+    <div className="bg-primary-main p-12" data-ver="secondary">
+      <List items={items} isDotted={false} />
     </div>
   ),
 };

package/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/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/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/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/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/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -60,9 +60,11 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
 
     const additionPadding = visibleItemCount > 0 ? gap * Number(visibleItemCount) - 1 : 0;
 
+    const isVerticalList = listType === 'vertical-list';
     const isHorizontalList = listType === 'horizontal-list';
     const containerStyle = {
-      ...(isHorizontalList ? getContainerStyle(padding, additionPadding) : {}),
+      ...(isHorizontalList ? getContainerOffset(padding, additionPadding) : {}),
+      ...(isVerticalList ? getContainerHeight(containerRef) : {}),
       gap: `${gap}px`,
     };
 
@@ -79,9 +81,8 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
             className={style(
               snapAlign,
               visibleItemCount ? childStyleMap[visibleItemCount - 1] : '',
-              listType === 'vertical-list' ? 'h-full' : '',
             )}
-            style={isHorizontalList ? getContainerStyle(padding / 4) : {}}
+            style={isHorizontalList ? getContainerOffset(padding / 4) : {}}
             activeIndex={activeIndex}
             idx={idx}
             observerOptions={observerOptions}
@@ -96,7 +97,7 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
 );
 
 // Styles used to compensate outer container padding to get rid of clipping effect
-const getContainerStyle = (padding: number, additionalPadding = 0): Record<string, string> => ({
+const getContainerOffset = (padding: number, additionalPadding = 0): Record<string, string> => ({
   marginLeft: `${-padding}px`,
   marginRight: `${-padding}px`,
   paddingLeft: `${padding}px`,
@@ -108,3 +109,7 @@ const getVisibleIndices = (itemsVisibilityList: ItemsVisibilityList) =>
     .map((_, i): [IntersectionObserverEntry | undefined, number] => [_, i])
     .filter(([_]) => _ && _.intersectionRatio >= 0.9)
     .map(([, i]) => i);
+
+const getContainerHeight = (ref?: { current: HTMLDivElement | null }) => ({
+  height: ref?.current?.firstElementChild?.clientHeight || 0,
+});

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

@@ -3,7 +3,7 @@ import '../../setup-fixture';
 import { SwipeListControl } from './SwipeListControl';
 
 const renderElement = (_: any, i: number): VNode => (
-  <div key={String(i)} className="border border-gray rounded-md text-center h-full">
+  <div key={String(i)} className="border border-gray rounded-md text-center h-32">
     {`Element #${i}`}
   </div>
 );
@@ -46,7 +46,7 @@ export default {
     </div>
   ),
   vertical: (
-    <div className="px-4 py-5 bg-white h-80">
+    <div className="px-4 py-5 bg-white">
       <SwipeListControl listType="vertical-list">{generateChildren(3)}</SwipeListControl>
     </div>
   ),

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

@@ -0,0 +1,53 @@
+import type { VNode } from '../../model/VNode';
+import '../../setup-fixture';
+import { SwipeListControl } from './SwipeListControl';
+
+const renderElement = (_: any, i: number): VNode => (
+  <div key={String(i)} className="border border-gray rounded-md text-center h-32">
+    {`Element #${i}`}
+  </div>
+);
+
+const generateChildren = (count: number) => new Array(count).fill(0).map(renderElement);
+
+export default {
+  default: (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl>{generateChildren(5)}</SwipeListControl>
+    </div>
+  ),
+  'w/o dots': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl showDots={false}>{generateChildren(5)}</SwipeListControl>
+    </div>
+  ),
+  '1 element': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl>
+        <div className="border border-gray rounded-md text-center h-12">
+          Single element, not inside an array
+        </div>
+      </SwipeListControl>
+    </div>
+  ),
+  '2 elements': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl>{generateChildren(2)}</SwipeListControl>
+    </div>
+  ),
+  'empty element': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl>{null}</SwipeListControl>
+    </div>
+  ),
+  'string element': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl>string content</SwipeListControl>
+    </div>
+  ),
+  vertical: (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl listType="vertical-list">{generateChildren(3)}</SwipeListControl>
+    </div>
+  ),
+};

package/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/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/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/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;
 };