R: Replace clsx with merging styles

rsconcept/frontend/src/components/input/error-field.tsx

@@ -1,7 +1,7 @@
 import { type FieldError, type GlobalError } from 'react-hook-form';
-import clsx from 'clsx';
 
 import { type Styling } from '../props';
+import { cn } from '../utils';
 
 interface ErrorFieldProps extends Styling {
   error?: FieldError | GlobalError;
@@ -15,7 +15,7 @@ export function ErrorField({ error, className, ...restProps }: ErrorFieldProps):
     return null;
   }
   return (
-    <div className={clsx('text-sm text-destructive select-none', className)} {...restProps}>
+    <div className={cn('text-sm text-destructive select-none', className)} {...restProps}>
       {error.message}
     </div>
   );

rsconcept/frontend/src/features/rsform/components/info-constituenta.tsx

@@ -1,6 +1,5 @@
-import clsx from 'clsx';
-
 import { IconChild } from '@/components/icons';
+import { cn } from '@/components/utils';
 
 import { labelCstTypification } from '../labels';
 import { type IConstituenta } from '../models/rsform';
@@ -12,7 +11,7 @@ interface InfoConstituentaProps extends React.ComponentProps<'div'> {
 
 export function InfoConstituenta({ data, className, ...restProps }: InfoConstituentaProps) {
   return (
-    <div className={clsx('dense min-w-60 break-words', className)} {...restProps}>
+    <div className={cn('dense min-w-60 break-words', className)} {...restProps}>
       <h2 className='cursor-default' title={data.is_inherited ? ' наследник' : undefined}>
         {data.alias}
         {data.is_inherited ? <IconChild size='1rem' className='inline-icon align-middle ml-1 mt-1' /> : null}

rsconcept/frontend/src/features/rsform/components/select-word-form.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import clsx from 'clsx';
-
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { prefixes } from '@/utils/constants';
 
 import { Grammeme, supportedGrammemes } from '../models/language';
@@ -39,7 +38,7 @@ export function SelectWordForm({ value, onChange, className, ...restProps }: Sel
   }
 
   return (
-    <div className={clsx('text-xs sm:text-sm grid grid-cols-6', className)} {...restProps}>
+    <div className={cn('text-xs sm:text-sm grid grid-cols-6', className)} {...restProps}>
       {DefaultWordForms.slice(0, 12).map((data, index) => (
         <WordformButton
           key={`${prefixes.wordform_list}${index}`}

rsconcept/frontend/src/features/rsform/components/toolbar-graph-selection.tsx

@@ -1,5 +1,3 @@
-import clsx from 'clsx';
-
 import { MiniButton } from '@/components/control';
 import {
   IconGraphCollapse,
@@ -13,6 +11,7 @@ import {
   IconReset
 } from '@/components/icons';
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 import { type Graph } from '@/models/graph';
 
 interface ToolbarGraphSelectionProps extends Styling {
@@ -44,7 +43,7 @@ export function ToolbarGraphSelection({
   }
 
   return (
-    <div className={clsx('cc-icons', className)} {...restProps}>
+    <div className={cn('cc-icons', className)} {...restProps}>
       <MiniButton
         title='Сбросить выделение'
         icon={<IconReset size='1.25rem' className='icon-primary' />}

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/status-bar.tsx

@@ -6,6 +6,7 @@ import { HelpTopic } from '@/features/help';
 import { BadgeHelp } from '@/features/help/components';
 
 import { Loader } from '@/components/loader';
+import { cn } from '@/components/utils';
 import { APP_COLORS } from '@/styling/colors';
 import { globalIDs } from '@/utils/constants';
 import { type RO } from '@/utils/meta';
@@ -40,7 +41,7 @@ export function StatusBar({ className, isModified, processing, activeCst, parseD
   })();
 
   return (
-    <div className={clsx('pl-34 xs:pl-8 flex gap-1', className)}>
+    <div className={cn('pl-34 xs:pl-8 flex gap-1', className)}>
       <div
         tabIndex={0}
         className={clsx(

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/toolbar-rsexpression.tsx

@@ -1,9 +1,8 @@
-import clsx from 'clsx';
-
 import { IconShowKeyboard } from '@/features/rsform/components/icon-show-keyboard';
 
 import { MiniButton } from '@/components/control';
 import { IconTree, IconTypeGraph } from '@/components/icons';
+import { cn } from '@/components/utils';
 import { usePreferencesStore } from '@/stores/preferences';
 
 import { useMutatingRSForm } from '../../../backend/use-mutating-rsform';
@@ -21,7 +20,7 @@ export function ToolbarRSExpression({ className, disabled, showTypeGraph, showAS
   const toggleControls = usePreferencesStore(state => state.toggleShowExpressionControls);
 
   return (
-    <div className={clsx('cc-icons', className)}>
+    <div className={cn('cc-icons', className)}>
       {!disabled || isProcessing ? (
         <MiniButton
           title='Отображение специальной клавиатуры'

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsform-card/toolbar-versioning.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import clsx from 'clsx';
-
 import { HelpTopic } from '@/features/help';
 import { BadgeHelp } from '@/features/help/components';
 import { useRestoreVersion } from '@/features/library/backend/use-restore-version';
 
 import { MiniButton } from '@/components/control';
 import { IconNewVersion, IconUpload, IconVersions } from '@/components/icons';
+import { cn } from '@/components/utils';
 import { useDialogsStore } from '@/stores/dialogs';
 import { useModificationStore } from '@/stores/modification';
 import { promptText } from '@/utils/labels';
@@ -58,7 +57,7 @@ export function ToolbarVersioning({ blockReload, className }: ToolbarVersioningP
   }
 
   return (
-    <div className={clsx('cc-icons', className)}>
+    <div className={cn('cc-icons', className)}>
       {isMutable ? (
         <>
           <MiniButton

rsconcept/frontend/src/features/users/components/info-users.tsx

@@ -1,6 +1,5 @@
-import clsx from 'clsx';
-
 import { type Styling } from '@/components/props';
+import { cn } from '@/components/utils';
 
 import { useLabelUser } from '../backend/use-label-user';
 
@@ -13,7 +12,7 @@ interface InfoUsersProps extends Styling {
 export function InfoUsers({ items, className, prefix, header, ...restProps }: InfoUsersProps) {
   const getUserLabel = useLabelUser();
   return (
-    <div className={clsx('flex flex-col dense', className)} {...restProps}>
+    <div className={cn('flex flex-col dense', className)} {...restProps}>
       {header ? <h2>{header}</h2> : null}
       {items.map((user, index) => (
         <div key={`${prefix}${index}`}>{getUserLabel(user)}</div>