@fibery/ui-kit 2.1.1 → 3.0.0

package/src/toast/primitives.tsx

@@ -1,10 +1,12 @@
 import {preventDefault} from "@fibery/react/src/prevent-default";
 import {css, cx} from "@linaria/core";
 import * as ToastPrimitives from "@radix-ui/react-toast";
-import {ElementRef, forwardRef} from "react";
+import type {ElementRef} from "react";
+import {forwardRef} from "react";
+
 import {IconButton} from "../button/icon-button";
-import {border, space, textStyles, themeVars, transition} from "../design-system";
-import CloseIcon from "../icons/react/Close";
+import {border, space, textClasses, themeVars, transition} from "../design-system";
+import CloseIcon from "../icons/react/close";
 import {
   safeAreaInsetBottomVar,
   safeAreaInsetLeftVar,
@@ -133,18 +135,16 @@ export const ToastRoot = forwardRef<ElementRef<typeof ToastPrimitives.Root>, Toa
 );
 
 const titleCss = css`
-  ${textStyles.regular};
   word-break: break-word;
 `;
 
 export const ToastTitle = forwardRef<ElementRef<typeof ToastPrimitives.Title>, ToastPrimitives.ToastTitleProps>(
   ({className, ...props}, ref) => {
-    return <ToastPrimitives.Title ref={ref} className={cx(className, titleCss)} {...props} />;
+    return <ToastPrimitives.Title ref={ref} className={cx(textClasses.regular, className, titleCss)} {...props} />;
   }
 );
 
 const descriptionCss = css`
-  ${textStyles.small};
   color: ${themeVars.accentTextColor};
 `;
 
@@ -152,7 +152,9 @@ export const ToastSubtitle = forwardRef<
   ElementRef<typeof ToastPrimitives.Description>,
   ToastPrimitives.ToastDescriptionProps
 >(({className, ...props}, ref) => {
-  return <ToastPrimitives.Description ref={ref} className={cx(className, descriptionCss)} {...props} />;
+  return (
+    <ToastPrimitives.Description ref={ref} className={cx(textClasses.small, className, descriptionCss)} {...props} />
+  );
 });
 
 export const ToastClose = () => {

package/src/toast/toast-action.tsx

@@ -1,9 +1,12 @@
 import {css} from "@linaria/core";
 import {Action as RadixToastAction, type ToastActionProps} from "@radix-ui/react-toast";
-import {ElementRef, forwardRef} from "react";
-import {Button, ButtonProps} from "../button/button";
-import {space} from "../design-system";
+import type {ElementRef} from "react";
+import {forwardRef} from "react";
+
+import type {ButtonProps} from "../button/button";
+import {Button} from "../button/button";
 import {makeButtonColors} from "../button/make-button-colors";
+import {space} from "../design-system";
 import {useTheme} from "../theme-provider";
 
 const toastActionCss = css`

package/src/toast/toast-provider.tsx

@@ -1,7 +1,8 @@
 import {createContext} from "@fibery/react/src/create-context";
+import {ToastProvider as PrimitiveToastProvider} from "@radix-ui/react-toast";
 import React from "react";
+
 import type {ToastQueue} from "./toast-queue";
-import {ToastProvider as PrimitiveToastProvider} from "@radix-ui/react-toast";
 
 const [Provider, useCtx] = createContext<ToastQueue>("ToastQueue");
 

package/src/toast/toast-queue.ts

@@ -1,9 +1,10 @@
 import {makePubSub} from "@fibery/helpers/utils/pub-sub";
+
 import type {ToastProps} from "./toast";
 
 export type AddToastProps = Pick<
   ToastProps,
-  "type" | "title" | "subTitle" | "icon" | "action" | "duration" | "open" | "dismissable" | "variant"
+  "type" | "title" | "subTitle" | "icon" | "action" | "duration" | "open" | "dismissable" | "variant" | "onOpenChange"
 > & {
   id?: string;
 };

package/src/toast/toast.tsx

@@ -2,13 +2,14 @@ import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css, cx} from "@linaria/core";
 import {useCallback, useEffect, useRef} from "react";
+
 import {space, themeVars} from "../design-system";
-import Spinner from "../icons/react/Spinner";
-import CheckCircleFilled from "../icons/react/CheckCircleFilled";
-import AlertTriangle from "../icons/react/AlertTriangle";
+import {iconSizeVar} from "../icons/icon";
+import AlertTriangle from "../icons/react/alert-triangle";
+import CheckCircleFilled from "../icons/react/check-circle-filled";
+import Spinner from "../icons/react/spinner";
 import {ToastClose, ToastRoot, ToastSubtitle, ToastTitle} from "./primitives";
 import type {ToastActionElement} from "./toast-action";
-import {iconSizeVar} from "../icons/Icon";
 
 type ToastType = "info" | "error" | "success" | "loading";
 

package/src/toast/toaster.tsx

@@ -1,4 +1,5 @@
 import {useSyncExternalStore} from "react";
+
 import {ToastViewport} from "./primitives";
 import {Toast} from "./toast";
 import {useToast} from "./toast-provider";

package/src/toggle-button/round-toggle-button.tsx

@@ -1,7 +1,10 @@
-import {ComponentRef, forwardRef} from "react";
-import {ToggleButton, ToggleButtonProps} from "./toggle-button";
 import {css, cx} from "@linaria/core";
+import type {ComponentRef} from "react";
+import {forwardRef} from "react";
+
 import {border} from "../design-system";
+import type {ToggleButtonProps} from "./toggle-button";
+import {ToggleButton} from "./toggle-button";
 
 const roundToggleButtonCss = css`
   &:is(&) {

package/src/toggle-button/toggle-button-group.tsx

@@ -1,14 +1,16 @@
 import {css, cx} from "@linaria/core";
-import {
-  ToggleGroup,
-  ToggleGroupItem,
+import type {
   ToggleGroupItemProps,
   ToggleGroupMultipleProps,
   ToggleGroupSingleProps,
 } from "@radix-ui/react-toggle-group";
-import {ComponentRef, forwardRef} from "react";
-import {ToggleButton, ToggleButtonProps} from "./toggle-button";
+import {ToggleGroup, ToggleGroupItem} from "@radix-ui/react-toggle-group";
+import type {ComponentRef} from "react";
+import {forwardRef} from "react";
+
 import {space} from "../design-system";
+import type {ToggleButtonProps} from "./toggle-button";
+import {ToggleButton} from "./toggle-button";
 
 export const toggleButtonGroupCss = css`
   display: flex;

package/src/toggle-button/toggle-button.tsx

@@ -1,8 +1,11 @@
-import {css, cx, CSSProperties} from "@linaria/core";
-import {Toggle, ToggleProps} from "@radix-ui/react-toggle";
+import type {CSSProperties} from "@linaria/core";
+import {css, cx} from "@linaria/core";
+import type {ToggleProps} from "@radix-ui/react-toggle";
+import {Toggle} from "@radix-ui/react-toggle";
 import {forwardRef} from "react";
-import {border, transitionDuration, space, textStyles, themeVars} from "../design-system";
-import {iconColorVar, iconSizeVar} from "../icons/Icon";
+
+import {border, transitionDuration, space, themeVars, fontSize} from "../design-system";
+import {iconColorVar, iconSizeVar} from "../icons/icon";
 
 export const toggleButtonCss = css`
   button:where(&) {
@@ -34,7 +37,7 @@ export const toggleButtonCss = css`
   user-select: none;
 
   &[data-size="small"] {
-    font-size: ${textStyles.small.fontSize}px;
+    font-size: ${fontSize.xs}px;
     line-height: 16px;
     min-height: 24px;
 
@@ -42,7 +45,7 @@ export const toggleButtonCss = css`
   }
 
   &[data-size="medium"] {
-    font-size: ${textStyles.regular.fontSize}px;
+    font-size: ${fontSize.sm}px;
     line-height: 20px;
     min-height: 28px;
 
@@ -50,7 +53,7 @@ export const toggleButtonCss = css`
   }
 
   &[data-size="large"] {
-    font-size: ${textStyles.regular.fontSize}px;
+    font-size: ${fontSize.sm}px;
     line-height: 20px;
     min-height: 32px;
     padding-inline: 7px;

package/src/toggle-on-off.tsx

@@ -1,6 +1,8 @@
-import {ComponentProps, FC, useMemo} from "react";
+import type {ComponentProps, FC} from "react";
+import {useMemo} from "react";
+
 import {isValidColor} from "./color-utils";
-import {Theme} from "./design-system";
+import type {Theme} from "./design-system";
 import {useTheme} from "./theme-provider";
 import {Toggle} from "./toggle";
 import {useIsPhone} from "./use-is-phone";

package/src/toggle.tsx

@@ -1,11 +1,12 @@
+import {memoize} from "@fibery/helpers/src/_";
 import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
-import {ComponentProps, FC, ReactNode} from "react";
-import {space, textStyles, transition} from "./design-system";
-import memoize from "lodash/memoize";
-import SpinnerIcon from "./icons/react/Spinner";
+import type {ComponentProps, FC, ReactNode} from "react";
+
+import {produceColor} from "./color-utils";
+import {space, textClasses, textStyles, transition} from "./design-system";
+import SpinnerIcon from "./icons/react/spinner";
 import {mobileRootSelector} from "./mobile-styles";
-import {darkenChroma, getAlpha, produceColor, setAlpha} from "./color-utils";
 
 const toggleIconHeightVar = "--fibery-toggle-icon-height";
 const toggleIconWidthVar = "--fibery-toggle-icon-width";
@@ -48,14 +49,13 @@ const labelWrapperStyle = css`
   align-items: center;
 `;
 
-const getOutlineColor = memoize((color: string) => {
-  const alpha = getAlpha(color);
-  if (alpha < 1) {
-    return produceColor(color, (c) => setAlpha(c, Math.min(1, alpha + 0.3)));
-  } else {
-    return produceColor(color, (c) => darkenChroma(c, 1));
-  }
-});
+const getOutlineColor = memoize((color: string) =>
+  produceColor(color, (oklch) =>
+    oklch.alpha === undefined || oklch.alpha >= 1
+      ? {...oklch, l: Math.max(0, oklch.l - 0.18)}
+      : {...oklch, alpha: Math.min(1, oklch.alpha + 0.3)}
+  )
+);
 
 const CircleContainer = styled.div<{
   backgroundColor: string;
@@ -84,28 +84,31 @@ export type ToggleSize = "small" | "medium" | "large" | "extra-large";
 
 const toggleSize = {
   small: css`
-    ${textStyles.small}
     ${toggleIconHeightVar}: 14px;
   `,
   medium: css`
-    ${textStyles.regular}
     ${toggleIconHeightVar}: 16px;
   `,
   large: css`
-    ${textStyles.regular}
     ${toggleIconHeightVar}: 18px;
     ${mobileRootSelector} & {
       ${textStyles.big}
     }
   `,
   "extra-large": css`
-    ${textStyles.regular}
     ${toggleIconHeightVar}: 20px;
     ${mobileRootSelector} & {
       ${textStyles.big}
     }
   `,
 };
+
+const toggleSizeTextClass = {
+  small: textClasses.small,
+  medium: textClasses.regular,
+  large: textClasses.regular,
+  "extra-large": textClasses.regular,
+} satisfies Record<ToggleSize, string>;
 const toggleSizeStyle = css`
   ${toggleIconWidthVar}: calc(var(${toggleIconHeightVar}) * 1.75)
 `;
@@ -147,6 +150,7 @@ export const Toggle: FC<ToggleProps> = ({
   return (
     <label
       className={cx(
+        toggleSizeTextClass[size],
         toggleSize[size],
         toggleSizeStyle,
         wrapperClassName,

package/src/tooltip-if-overflown.tsx

@@ -1,6 +1,8 @@
 import {useResizeObserver} from "@fibery/react/src/use-resize-observer";
 import {useState} from "react";
-import {Tooltip, TooltipProps} from "./tooltip";
+
+import type {TooltipProps} from "./tooltip";
+import {Tooltip} from "./tooltip";
 
 type SetNode = (element: HTMLElement | null) => void;
 

package/src/tooltip.tsx

@@ -1,6 +1,9 @@
+import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css, cx} from "@linaria/core";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import {forwardRef, type ReactNode, type SyntheticEvent} from "react";
+import {forwardRef, type ReactNode, type SyntheticEvent, useRef} from "react";
+
 import {border, fontWeight, lineHeight, space, themeVars, tooltipDelay} from "./design-system";
 import {RadixPortalThemeProvider} from "./theme-provider";
 
@@ -178,6 +181,27 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
     },
     ref
   ) => {
+    const [open, setOpen] = useControllableState({value: visible, defaultValue: false, onChange: onVisibleChange});
+    const suppressFocusOpenRef = useRef(false);
+
+    // Suppress tooltip on pointer-triggered focus (e.g. focus moved into a popover after a click).
+    // Radix opens the tooltip on any focus, so we use :focus-visible to distinguish keyboard from pointer.
+    // We check e.target (not currentTarget) to handle cases where the trigger wraps an inner focusable element (e.g. <span><input/></span>).
+    const handleFocus = composeEventHandlers(triggerProps.onFocus, (e) => {
+      if (!e.target.matches(":focus-visible")) {
+        suppressFocusOpenRef.current = true;
+      }
+    });
+
+    const handleOpenChange = (nextOpen: boolean) => {
+      if (nextOpen && suppressFocusOpenRef.current) {
+        suppressFocusOpenRef.current = false;
+        return;
+      }
+      suppressFocusOpenRef.current = false;
+      setOpen(nextOpen);
+    };
+
     const keepOnClickProps = keepOnClick
       ? {
           onPointerDown: (e: React.PointerEvent<HTMLButtonElement>) => {
@@ -198,11 +222,11 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
     return (
       <TooltipPrimitive.Root
         delayDuration={instant ? 0 : tooltipDelay.enter}
-        open={disabled ? false : Boolean(content) && visible}
-        onOpenChange={onVisibleChange}
+        open={disabled ? false : Boolean(content) && open}
+        onOpenChange={handleOpenChange}
         disableHoverableContent={disableHoverableContent}
       >
-        <TooltipPrimitive.Trigger ref={ref} {...triggerProps} {...keepOnClickProps} asChild>
+        <TooltipPrimitive.Trigger ref={ref} {...triggerProps} {...keepOnClickProps} asChild onFocus={handleFocus}>
           {children}
         </TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal container={container}>

package/src/tree-utils.test.ts

@@ -1,4 +1,5 @@
-import {flattenTree, mutateTree, TreeData} from "./tree-utils";
+import type {TreeData} from "./tree-utils";
+import {flattenTree, mutateTree} from "./tree-utils";
 
 const makeTree = (): TreeData => ({
   rootId: "root",
@@ -39,7 +40,7 @@ describe("flattenTree", () => {
 
   it("includes children of expanded nodes", () => {
     const tree = makeTree();
-    tree.items["a"] = {...tree.items["a"], isExpanded: true};
+    tree.items.a = {...tree.items.a, isExpanded: true};
 
     const result = flattenTree(tree);
     const ids = result.map((r) => r.item.id);
@@ -49,7 +50,7 @@ describe("flattenTree", () => {
 
   it("assigns correct nested paths for expanded children", () => {
     const tree = makeTree();
-    tree.items["a"] = {...tree.items["a"], isExpanded: true};
+    tree.items.a = {...tree.items.a, isExpanded: true};
 
     const result = flattenTree(tree);
 
@@ -113,43 +114,43 @@ describe("mutateTree", () => {
   it("applies mutation to the target item", () => {
     const tree = makeTree();
     const result = mutateTree(tree, "a", {isExpanded: true});
-    expect(result.items["a"].isExpanded).toBe(true);
+    expect(result.items.a.isExpanded).toBe(true);
   });
 
   it("does not mutate the original tree", () => {
     const tree = makeTree();
     mutateTree(tree, "a", {isExpanded: true});
-    expect(tree.items["a"].isExpanded).toBe(false);
+    expect(tree.items.a.isExpanded).toBe(false);
   });
 
   it("does not change other items references", () => {
     const tree = makeTree();
     const result = mutateTree(tree, "a", {isExpanded: true});
-    expect(result.items["b"]).toBe(tree.items["b"]);
-    expect(result.items["a1"]).toBe(tree.items["a1"]);
+    expect(result.items.b).toBe(tree.items.b);
+    expect(result.items.a1).toBe(tree.items.a1);
   });
 
   it("merges partial mutation fields", () => {
     const tree = makeTree();
-    tree.items["a"] = {...tree.items["a"], hasChildren: true, isExpanded: false};
+    tree.items.a = {...tree.items.a, hasChildren: true, isExpanded: false};
 
     const result = mutateTree(tree, "a", {isExpanded: true});
-    expect(result.items["a"].hasChildren).toBe(true);
-    expect(result.items["a"].isExpanded).toBe(true);
-    expect(result.items["a"].children).toEqual(["a1", "a2"]);
+    expect(result.items.a.hasChildren).toBe(true);
+    expect(result.items.a.isExpanded).toBe(true);
+    expect(result.items.a.children).toEqual(["a1", "a2"]);
   });
 
   it("can update children array", () => {
     const tree = makeTree();
     const result = mutateTree(tree, "b", {children: ["new-child"]});
-    expect(result.items["b"].children).toEqual(["new-child"]);
+    expect(result.items.b.children).toEqual(["new-child"]);
   });
 
   it("can update data field", () => {
     const tree = makeTree();
     const data = {name: "Node A"};
     const result = mutateTree(tree, "a", {data});
-    expect(result.items["a"].data).toBe(data);
+    expect(result.items.a.data).toBe(data);
   });
 
   it("returns a new items object reference", () => {
@@ -161,6 +162,6 @@ describe("mutateTree", () => {
   it("returns a new item object reference for the mutated item", () => {
     const tree = makeTree();
     const result = mutateTree(tree, "a", {isExpanded: true});
-    expect(result.items["a"]).not.toBe(tree.items["a"]);
+    expect(result.items.a).not.toBe(tree.items.a);
   });
 });

package/src/tree-utils.ts

@@ -1,4 +1,4 @@
-import {$TSFixMe} from "./tsfixme";
+import type {$TSFixMe} from "./tsfixme";
 
 export type ItemId = string | number;
 export interface TreeData {

package/src/type-badge-box.tsx

@@ -1,7 +1,8 @@
-import {makeAbbreviation} from "./type-badge";
 import {css, cx} from "@linaria/core";
+import type {ReactNode} from "react";
+
 import {space, themeVars} from "./design-system";
-import {ReactNode} from "react";
+import {makeAbbreviation} from "./type-badge";
 
 type Props = {
   width: number;

package/src/type-badge.tsx

@@ -1,18 +1,10 @@
 import {css} from "@linaria/core";
 import cx from "classnames";
 import isString from "lodash/isString";
-import {CSSProperties, forwardRef, memo, ReactNode} from "react";
-import {a11yColor} from "./a11y-color";
-import {
-  border,
-  fontWeight,
-  getDarkenColor,
-  getTextColor,
-  space,
-  textStyles,
-  themeVars,
-  transition,
-} from "./design-system";
+import type {CSSProperties, ReactNode} from "react";
+import {forwardRef, memo} from "react";
+
+import {border, fontWeight, space, textStyles, themeVars, transition} from "./design-system";
 import {useTheme} from "./theme-provider";
 import {Tooltip} from "./tooltip";
 
@@ -25,7 +17,6 @@ const typeBadgeStaticStyle = {
   outline: "none",
   whiteSpace: "nowrap",
   transition: `box-shadow ${transition}`,
-  opacity: 0.95,
   borderWidth: 1,
   borderStyle: "solid",
 };
@@ -95,24 +86,17 @@ const abbrVerticalCompactStyle = css`
 `;
 
 const colorProp = "--fibery-type-badge-color";
-const colorVar = `var(${colorProp})`;
-const colorDarkProp = "--fibery-type-badge-color-dark";
-const colorDarkVar = `var(${colorDarkProp})`;
+const selectedBorderProp = "--fibery-type-badge-color-dark";
 const colorBackgroundProp = "--fibery-type-badge-background-color";
-const colorBackgroundVar = `var(${colorBackgroundProp})`;
 const colorBorderProp = "--fibery-type-badge-border-color";
-const colorBorderVar = `var(${colorBorderProp})`;
-
 const typeBadgeStyle = css`
-  ${{
-    color: colorVar,
-    backgroundColor: colorBackgroundVar,
-    borderColor: colorBorderVar,
-  }}
+  color: var(${colorProp});
+  background-color: var(${colorBackgroundProp});
+  border-color: var(${colorBorderProp});
 `;
 
 const selectedStyle = css`
-  box-shadow: 0 0 0 2px ${colorDarkVar};
+  box-shadow: 0 0 0 2px var(${selectedBorderProp});
 `;
 
 const clickableStyle = css`
@@ -192,22 +176,14 @@ export const TypeBadge = memo(
 
     const theme = useTheme();
 
-    const baseColor = theme.fns.deneutralize(color || theme.colors.iconColor);
-
-    const textBadgeColor = a11yColor(getTextColor(baseColor), getDarkenColor(baseColor), 12);
-
-    const backgroundBadgeColor = theme.select({
-      dark: getDarkenColor(baseColor),
-      light: baseColor,
-      light2: baseColor,
-    });
+    const badge = theme.fns.badge(color);
 
     const resultingStyle = {
       ...style,
-      [colorProp]: color ? textBadgeColor : themeVars.inversedTextColor,
-      [colorBackgroundProp]: backgroundBadgeColor || themeVars.colorPlaceholderSubtle,
-      [colorBorderProp]: backgroundBadgeColor,
-      [colorDarkProp]: getDarkenColor(baseColor),
+      [colorProp]: badge.fg,
+      [colorBackgroundProp]: badge.bg,
+      [colorBorderProp]: badge.border,
+      [selectedBorderProp]: badge.borderSelected,
     } as CSSProperties;
 
     return (

package/src/unit/index.tsx

@@ -1,7 +1,7 @@
-import {CardSize} from "../card-container";
+import type {CardSize} from "../card-container";
 import {themeVars} from "../design-system";
 import {UnitPrimitive} from "./primitive";
-import {UnitPrimitiveProps} from "./types";
+import type {UnitPrimitiveProps} from "./types";
 
 // Try not to use UnitPrimitive directly, rather define a pattern of usage, and create own unit with the pattern.
 

package/src/unit/loading-unit-value.tsx

@@ -1,5 +1,7 @@
 import {css} from "@linaria/core";
-import {LoadingSausage, LoadingSausageProps} from "../loading-sausage";
+
+import type {LoadingSausageProps} from "../loading-sausage";
+import {LoadingSausage} from "../loading-sausage";
 
 export const unitTextHeight = 8;
 

package/src/unit/primitive.tsx

@@ -1,8 +1,11 @@
 import {css} from "@linaria/core";
 import cx from "classnames";
-import {ComponentProps} from "react";
+import type {ComponentProps} from "react";
+
 import {inputOverrides} from "../antd/styles";
 import {border, space, themeVars} from "../design-system";
+import {FieldIcon} from "../field-icon";
+import {useTruncated} from "../tooltip-if-overflown";
 import {
   basicUnitClassName,
   bigSizeUnitClassName,
@@ -19,12 +22,10 @@ import {
   unitTitleClassName,
   unitWithTitleClassName,
 } from "./styles";
-import {UnitPrimitiveProps} from "./types";
+import type {UnitPrimitiveProps} from "./types";
 import {UnitButtonGroup} from "./unit-button-group";
 import {UnitContent} from "./unit-content";
 import {UnitWithTooltip} from "./unit-with-tooltip";
-import {FieldIcon} from "../field-icon";
-import {useTruncated} from "../tooltip-if-overflown";
 
 const resetButtonStylesClassName = css`
   all: unset;

package/src/unit/styles.ts

@@ -1,5 +1,6 @@
 import {css} from "@linaria/core";
-import {space, textStyles, themeVars} from "../../src/design-system";
+
+import {fontSize, space, textStyles, themeVars} from "../../src/design-system";
 
 export const textEllipsisClassName = css`
   white-space: nowrap;
@@ -19,9 +20,10 @@ export const alignCenterClassName = css`
   line-height: 0;
 `;
 
-export const regularTextUnitSize = textStyles.regular.fontSize + space.s8;
-export const smallTextUnitSize = textStyles.small.fontSize + space.s8;
+export const regularTextUnitSize = fontSize.sm + space.s8;
+export const smallTextUnitSize = fontSize.xs + space.s8;
 
+// TODO(textClasses migration): consumer in packages/ui-kit/src/unit/primitive.tsx needs cx(textClasses.regular, ...)
 export const bigSizeUnitClassName = css`
   ${textStyles.regular}
   line-height: ${regularTextUnitSize}px;
@@ -32,6 +34,7 @@ export const bigSizeUnitMinWidthClassName = css`
   justify-content: center;
 `;
 
+// TODO(textClasses migration): consumer in packages/ui-kit/src/unit/primitive.tsx needs cx(textClasses.small, ...)
 export const regularSizeUnitClassName = css`
   ${textStyles.small}
   line-height: ${smallTextUnitSize}px;
@@ -46,6 +49,7 @@ export const unitMinHeightClassName = css`
   min-height: ${space.s24}px;
 `;
 
+// TODO(textClasses migration): consumers in packages/ui-kit/src/unit/primitive.tsx, packages/ui-kit/src/unit/unit-with-title.tsx, fibery-ui/src/components/units/* need cx(textClasses.heading7, ...)
 export const unitTitleClassName = css`
   ${textStyles.heading7}
   padding-bottom: ${space.s2}px;

package/src/unit/types.ts

@@ -1,4 +1,4 @@
-import {KeyboardEvent, ReactNode} from "react";
+import type {KeyboardEvent, ReactNode} from "react";
 
 export type UnitPrimitiveProps = {
   // Markup

package/src/unit/unit-button-group.tsx

@@ -1,6 +1,8 @@
-import {Children, cloneElement, ReactNode} from "react";
+import type {ReactNode} from "react";
+import {Children, cloneElement} from "react";
+
+import type {IconButtonProps} from "../button/icon-button";
 import {space} from "../design-system";
-import {IconButtonProps} from "../button/icon-button";
 import {getHeight} from "./unit-content-layout";
 
 type Props = {