@modul/mbui 0.0.16-beta-pv-53147-00d3e008 → 0.0.16-beta-pv-53139-88618ef5

package/src/Alert/Alert.tsx

@@ -1,81 +1,38 @@
 import * as React from 'react'
-import { cn } from '@utils'
-import { CheckCircleSolid, InfoSolid, Warning } from '@/Icon'
-import { ReactNode } from "react";
-
-const AleltIconClasses = '[&+div]:ml-[8px] shrink-0'
-const AlertIcons = {
-	info: <InfoSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-primary')} width={24} height={24} />,
-	warning: <Warning aria-hidden={true} className={cn(AleltIconClasses, 'text-warning')} width={24} height={24} />,
-	success: <CheckCircleSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-success')} width={24} height={24} />,
-	critical: <InfoSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-critical')} width={24} height={24} />
-}
-
-const Title = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
-	<div
-		role="heading"
-		ref={ref}
-		className={cn('text-[14px] font-medium', className)}
-		{...props}
-	/>
-))
-
-const Description = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
-	<p
-		ref={ref}
-		className={cn('text-[14px] [&>a]:text-primary [&>a]:underline', className)}
-		{...props}
-	/>
-))
-
-const getClass = (variant, type): string => {
-	const commonClasses = 'px-[8px] py-[16px] border rounded-md '
-	const variants = {
-		info: `${type !== 'text' ? `${commonClasses} bg-primary-light  border-primary` : 'text-primary'}`,
-		warning: `${type !== 'text' ? `${commonClasses} bg-warning-light  border-warning` : 'text-warning'}`,
-		success: `${type !== 'text' ? `${commonClasses} bg-success-light  border-success` : 'text-success'}`,
-		critical: `${type !== 'text' ? `${commonClasses} bg-critical-light  border-critical` : 'text-critical'}`,
-	}
-	return variants[variant]
-
-}
-
-interface TAlertComponents {
-	displayName: string;
-	Title: typeof Title;
-	Description: typeof Description;
-}
-
-interface IAlertProps {
-	className?: string;
-	variant?: string;
-	type?: string;
-	children: ReactNode;
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../@/lib/utils'
+// import { cn } from "@/lib/utils" порешать с алиасами
+
+const alertVariants = cva('px-[16px] py-[12px] rounded-sm text-[14px]', {
+	variants: {
+		variant: {
+			light: 'bg-[--cl-graphite-7]',
+			success: 'bg-success-light',
+			warning: 'bg-warning-light',
+			critical: 'bg-critical text-white',
+		},
+	},
+	defaultVariants: {
+		variant: 'light'
+	},
+})
+
+
+export interface IProps	extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
 }
 
-type TAlertProps = IAlertProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
-
-const Alert: React.FC<TAlertProps> & TAlertComponents = ({ className, variant = 'info', type, children, ...props }) => {
+const Alert = React.forwardRef<HTMLDivElement, IProps>(({ className, variant, children, ...props }, ref) => {
 	return (
 		<div
-			className={cn('flex', getClass(variant, type))}
-			role='alert'
+			className={cn(alertVariants({ variant, className }))}
 			{...props}
 		>
-			{AlertIcons[variant]}
-			<div className='pt-[2px]'>
-				{children}
-			</div>
+			{children}
 		</div>
 	)
-}
+})
 
 Alert.displayName = 'Alert'
 
-Alert.Title = Title
-Alert.Title.displayName = 'Alert.Title'
-
-Alert.Description = Description
-Alert.Description.displayName = "Alert.Description"
-
 export { Alert }

package/src/AlertDialog/AlertDialog.tsx

@@ -1,7 +1,8 @@
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-import { cn } from "@utils"
-import { buttonVariants } from "@/Button"
+
+import { cn } from "../@/lib/utils"
+import { buttonVariants } from "../Button"
 
 const AlertDialog = AlertDialogPrimitive.Root
 

package/src/Badge/Badge.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../@/lib/utils'
+
+const badgeClasses = {
+	variant: {
+		base: `
+			inline-block
+			focus:ring-2
+			focus:ring-ring
+			focus:ring-offset-2
+			focus:outline-none
+			transition-colors
+			rounded-full
+			`,
+		default: `
+			bg-critical
+			text-white
+		`,
+	},
+	size: {
+		default: 'size-[16px] text-[10px] text-center leadimg-[1] truncate',
+		dot: 'size-[10px] bg-critical-light border-critical border-[3px]',
+		sm: '',
+		md: '',
+		lg: '',
+	},
+}
+
+const badgeVariants = cva(badgeClasses.variant.base, {
+	variants: {
+		variant: {
+			default: badgeClasses.variant.default,
+		},
+		size: {
+			default: badgeClasses.size.default,
+			dot: badgeClasses.size.dot
+		},
+	},
+	defaultVariants: {
+		variant: 'default',
+		size: 'default',
+	},
+})
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, size, ...props }: BadgeProps) {
+	return (
+		<div
+			className={cn(badgeVariants({ variant, size }), className)}
+			{...props}
+		/>
+	)
+}
+
+export { Badge, badgeVariants }

package/src/Badge/index.ts

@@ -0,0 +1 @@
+export { Badge, badgeVariants } from './Badge'

package/src/BottomNavigation/BottomNavigation.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
-import { cn } from '@utils'
+import { cn } from '../@/lib/utils'
 
 export interface BottomNavigationLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	asChild?: boolean
@@ -11,25 +11,7 @@ export type IProps = {
 	children: React.ReactNode
 }
 
-const btnClasses = `
-	inline-flex
-	flex-col
-	place-items-center
-	gap-y-[8px]
-	w-full
-	p-[8px]
-	text-[10px]
-	text-center
-	text-light
-	leading-[1.33]
-	transition
-	duration-300
-	hover:bg-btn-ghost-hover
-	hover:text-primary
-	focus:bg-btn-ghost-focus
-	active:bg-btn-ghost-active
-	data-[status=active]:text-primary
-`
+const btnClasses = 'inline-flex flex-col place-items-center gap-y-[8px] hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active p-[8px] w-full text-[10px] text-center text-light hover:text-primary data-[status=active]:text-primary leading-[1.33] transition duration-300'
 
 const BottomNavigationLink = React.forwardRef<HTMLButtonElement, BottomNavigationLinkProps>(({ className, asChild, ...props }, ref) => {
 	const Comp = asChild ? Slot : "button"

package/src/Button/Button.tsx

@@ -1,45 +1,142 @@
 import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '@utils'
+import { cn } from '../@/lib/utils'
 
-const buttonVariants = cva(
-	'inline-flex justify-center items-center border-[2px] disabled:opacity-[.24] focus-visible:ring ring-offset-1 font-medium whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none',
-	{
-		variants: {
-			variant: {
-				primary:
-					'text-btn-primary bg-btn-primary hover:bg-btn-primary-hover focus:bg-btn-primary-focus active:bg-btn-primary-active border-btn-primary hover:border-btn-primary-hover focus:border-btn-primary-focus active:border-btn-primary-active',
-				secondary:
-					'text-btn-secondary bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active',
-				success:
-					'text-btn-success bg-btn-success hover:bg-btn-success-hover focus:bg-btn-success-focus active:bg-btn-success-active border-btn-success hover:border-btn-success-hover focus:border-btn-success-focus active:border-btn-success-active',
-				'primary-outline':
-					'text-btn-primary-outline hover:text-btn-primary-outline-hover focus:text-btn-primary-outline-focus active:text-btn-primary-outline-active bg-btn-primary-outline hover:bg-btn-primary-outline-hover focus:bg-btn-primary-outline-focus active:bg-btn-primary-outline-active border-btn-primary-outline hover:border-btn-primary-outline-hover focus:border-btn-primary-outline-focus active:border-btn-primary-outline-active',
-				outline: 'border-[1px] text-btn-outline border-btn-outline ring-[currentColor]',
-				ghost: 'text-btn-ghost bg-btn-ghost hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active border-transparent',
-			},
-			size: {
-				lg: 'h-[52px] px-[32px] text-[16px] leading-[1.08] rounded-[4px]',
-				md: 'h-[44px] px-[24px] text-[14px] leading-[1.08] rounded-[4px]',
-				sm: 'h-[36px] px-[20px] text-[12px] leading-none rounded-[3px]',
-				xs: 'h-[28px] px-[12px] text-[11px] leading-none rounded-[2px]',
-				xxs: 'h-[20px] px-[8px] text-[9px] leading-none rounded-[2px]',
-			},
+const buttonClasses= {
+	variant: {
+		base: `
+			inline-flex 
+			justify-center
+			items-center
+			font-medium
+			border-[2px]
+			whitespace-nowrap
+			transition-colors
+			ring-offset-1
+			focus-visible:ring 
+			focus-visible:outline-none 
+			disabled:pointer-events-none
+			disabled:opacity-[.24]`,
+		primary: `
+			text-btn-primary
+			bg-btn-primary
+			border-btn-primary
+			hover:bg-btn-primary-hover 
+			hover:border-btn-primary-hover
+			focus:bg-btn-primary-focus
+			focus:border-btn-primary-focus
+			active:border-btn-primary-active
+			active:bg-btn-primary-active`,
+		secondary: `
+			text-btn-secondary
+			bg-btn-secondary 
+			border-btn-secondary
+			hover:bg-btn-secondary-hover 
+			hover:border-btn-secondary-hover
+			focus:bg-btn-secondary-focus 
+			focus:border-btn-secondary-focus
+			active:bg-btn-secondary-active 
+			active:border-btn-secondary-active`,
+		success: `
+			text-btn-success
+			bg-btn-success
+			border-btn-success 
+			hover:bg-btn-success-hover
+			active:border-btn-success-active
+			focus:bg-btn-success-focus 
+			focus:border-btn-success-focus 
+			active:bg-btn-success-active 
+			hover:border-btn-success-hover`,
+		primaryOutline: `
+			text-btn-primary-outline
+			bg-btn-primary-outline 
+			border-btn-primary-outline 
+			hover:text-btn-primary-outline-hover
+			hover:bg-btn-primary-outline-hover 
+			hover:border-btn-primary-outline-hover
+			focus:text-btn-primary-outline-focus
+			focus:bg-btn-primary-outline-focus 
+			focus:border-btn-primary-outline-focus
+			active:text-btn-primary-outline-active
+			active:bg-btn-primary-outline-active 
+			active:border-btn-primary-outline-active`,
+		outline: `
+			text-btn-outline
+			border-[1px]
+			border-btn-outline
+			ring-[currentColor]`,
+		ghost: `
+			text-btn-ghost
+			bg-btn-ghost
+			border-transparent
+			hover:bg-btn-ghost-hover
+			focus:bg-btn-ghost-focus 
+			active:bg-btn-ghost-active`,
+		widget: `
+			justify-start
+			h-[72px]
+			w-full p-[16px]
+			space-x-[16px] 
+			text-left
+			rounded-md 
+			shadow-md 
+			border-transparent`,
+	},
+	size: {
+		lg: 'h-[52px] px-[32px] text-[16px] leading-[1.08] rounded-[4px]',
+		md: 'h-[44px] px-[24px] text-[14px] leading-[1.08] rounded-[4px]',
+		sm: 'h-[36px] px-[20px] text-[12px] leading-none rounded-[3px]',
+		xs: 'h-[28px] px-[12px] text-[11px] leading-none rounded-[2px]',
+		xxs: 'h-[20px] px-[8px] text-[9px] leading-none rounded-[2px]',
+		widget: `h-[72px] p-[16px]`
+	}
+}
+
+const buttonVariants = cva(buttonClasses.variant.base, {
+	variants: {
+		variant: {
+			primary: buttonClasses.variant.primary,
+			secondary: buttonClasses.variant.secondary,
+			success: buttonClasses.variant.success,
+			'primary-outline': buttonClasses.variant.primaryOutline,
+			outline: buttonClasses.variant.outline,
+			ghost: buttonClasses.variant.ghost,
+			widget: buttonClasses.variant.widget,
+			// link: 	 'text-primary underline-offset-4 hover:underline',
 		},
-		defaultVariants: {
-			variant: 'primary',
-			size: 'md',
+		size: {
+			lg: buttonClasses.size.lg,
+			md: buttonClasses.size.md,
+			widget: buttonClasses.size.widget,
+			sm: buttonClasses.size.sm,
+			xs: buttonClasses.size.xs,
+			xxs: buttonClasses.size.xxs,
 		},
-	}
-)
+	},
+	defaultVariants: {
+		variant: 'primary',
+		size: 'md',
+	},
+})
+
 const textVariants = cva(
-	'inline-flex whitespace-nowrap transition-colors focus-visible:outline-current disabled:opacity-[.24] rounded-[.25em] disabled:pointer-events-none',
+	`inline-flex
+	whitespace-nowrap
+	transition-colors
+	rounded-[.25em]
+	focus-visible:outline-current
+	disabled:opacity-[.24]
+	disabled:pointer-events-none`,
 	{
 		variants: {
 			variant: {
 				primary:
-					'text-primary hover:text-primary-hover focus:text-primary-focus active:text-primary-active disabled:pointer-events-none',
+					`text-primary
+					hover:text-primary-hover
+					focus:text-primary-focus
+					active:text-primary-active
+					disabled:pointer-events-none`,
 			},
 		},
 		defaultVariants: {
@@ -56,18 +153,18 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asText = false, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-	// @ts-ignore
-	const classes = asText ? textVariants<any>({ variant, className }) : buttonVariants({ variant, size, className });
-    return (
-      <Comp
-        className={cn(classes)}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
+	({ className, variant, size, asText = false, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : 'button'
+		// @ts-ignore
+		const classes = asText ? textVariants<any>({ variant, className }) : buttonVariants({ variant, size, className })
+		return (
+			<Comp
+				className={cn(classes)}
+				ref={ref}
+				{...props}
+			/>
+		)
+	}
 )
 
 Button.displayName = 'Button'

package/src/Button/index.ts

@@ -1 +1 @@
-export { Button, buttonVariants } from './Button'
+export {Button, buttonVariants} from './Button'

package/src/Calendar/Calendar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { DayPicker } from 'react-day-picker'
-import { cn } from '@utils'
+import { cn } from '../@/lib/utils'
 import { ru } from 'date-fns/locale'
 
 const daySelectedClasses = 'bg-btn-primary text-btn-primary rounded-sm'

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckSmall } from '../Icon/icons'
+
+const checkboxClasses = {
+	root: `
+		peer
+		size-[18px]
+		shrink-0
+		rounded-sm
+		border-2
+		border-input
+		focus-visible:outline-none
+		focus-visible:ring-1 focus-visible:ring-ring
+		disabled:cursor-not-allowed disabled:opacity-50
+		data-[state=checked]:bg-primary
+		data-[state=checked]:border-primary
+		data-[state=checked]:text-white
+		`,
+	indicator: `
+		flex
+		justify-center
+		items-center
+		text-current
+	`
+}
+
+const Checkbox = React.forwardRef<
+	React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={checkboxClasses.root}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator className={checkboxClasses.indicator}>
+			<CheckSmall className="size-[14px]" />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

package/src/Checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox'

package/src/Chip/Chip.tsx

@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { FC, PropsWithChildren } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Slot } from '@radix-ui/react-slot'
-import { cn } from '@utils'
+import { cn } from '../@/lib/utils'
+// import { cn } from "@/lib/utils" порешать с алиасами
 
 const chipVariants = cva(
 	'inline-flex justify-center items-center border-[2px] disabled:opacity-[.24] rounded-full ring-offset-1 font-medium whitespace-nowrap transition-colors disabled:pointer-events-none',

package/src/Collapsible/AccountCollapsible.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactNode } from 'react'
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
-import { DropdownSmallOld } from '@/Icon'
-import { cn } from '@utils'
+import { DropdownSmallOld } from '../../src/Icon'
+import { cn } from '../@/lib/utils'
 import { Slot } from '@radix-ui/react-slot'
 
 const AccountCollapsible = CollapsiblePrimitive.Root
@@ -28,22 +28,6 @@ const AccountCollapsibleHeader: FC<AccountCollapsibleHeaderProps> = ({ label })
 		</AccountCollapsibleTrigger>
 	)
 }
-
-const accountCollapsibleClasses = `
-	text-left
-	w-full
-	rounded-[4px]
-	px-[12px]
-	py-[16px]
-	bg-btn-secondary
-	border-btn-secondary
-	hover:bg-btn-secondary-hover
-	hover:border-btn-secondary-hover
-	focus:bg-btn-secondary-focus
-	focus:border-btn-secondary-focus
-	active:border-btn-secondary-active
-	active:bg-btn-secondary-active
-`
 const AccountCollapsibleContentItem: FC<AccountCollapsibleContentItemProps> = ({
 	children,
 	asChild = true,
@@ -54,7 +38,7 @@ const AccountCollapsibleContentItem: FC<AccountCollapsibleContentItemProps> = ({
 	return (
 		<Comp
 			className={cn(
-				accountCollapsibleClasses,
+				'text-left w-full rounded-[4px] px-[12px] py-[16px] bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active',
 				className
 			)}
 			{...props}

package/src/DatePicker/DatePicker.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { format } from 'date-fns'
-import { cn } from '@utils'
-import { Calendar } from '@/Calendar'
-import { Calendar as CalendarIcon } from '@/Icon'
-import { Popover } from '@/Popover'
+import { cn } from '../@/lib/utils'
+import { Calendar } from '../Calendar'
+import { Calendar as CalendarIcon } from '../Icon'
+import { Popover } from '../Popover'
 import { ru } from 'date-fns/locale'
 
-const trigegrClasses = 'inline-flex items-center px-[12px] h-[44px] text-left border-input border rounded-sm'
+const trigegrClasses = 'inline-flex items-center border-input px-[12px] border rounded-sm h-[44px] text-left'
 
 interface IProps {
 	mode?: any;

package/src/Drawer/Drawer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Drawer as DrawerPrimitive } from 'vaul'
-import { cn } from '@utils'
+import { cn } from '../@/lib/utils'
 import { useContext } from 'react'
 
 const DrawerContext = React.createContext({direction: 'bottom', modal: false})
@@ -83,7 +83,6 @@ const DrawerContent = React.forwardRef<
 		</DrawerPortal>
 	)
 })
-
 DrawerContent.displayName = 'DrawerContent'
 
 export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerClose }

package/src/Form/Form.tsx

@@ -2,8 +2,9 @@ import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { Slot } from '@radix-ui/react-slot'
 import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form'
-import { cn } from '@utils'
-import { Label } from '@/Label'
+
+import { cn } from '../@/lib/utils'
+import { Label } from '../Label'
 
 const Form = FormProvider
 
@@ -73,7 +74,6 @@ const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivEl
 		)
 	}
 )
-
 FormItem.displayName = 'FormItem'
 
 const FormLabel = React.forwardRef<
@@ -91,7 +91,6 @@ const FormLabel = React.forwardRef<
 		/>
 	)
 })
-
 FormLabel.displayName = 'FormLabel'
 
 const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
@@ -109,7 +108,6 @@ const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.Compon
 		)
 	}
 )
-
 FormControl.displayName = 'FormControl'
 
 const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(

package/src/Icon/icons/InfoSolid.tsx

@@ -10,7 +10,7 @@ const SvgInfoSolid = (props: SVGProps<SVGSVGElement>) => (
 		{...props}
 	>
 		<path
-			fill="currentColor"
+			fill="#4971D0"
 			d="M10 1.003c-4.96 0-9 4.04-9 9s4.04 9 9 9 9-4.04 9-9-4.04-9-9-9m1 13c0 .55-.45 1-1 1s-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1zm-1-6.8c-.66 0-1.2-.54-1.2-1.2s.54-1.2 1.2-1.2 1.2.54 1.2 1.2-.54 1.2-1.2 1.2"
 		/>
 	</SvgIcon>

package/src/Input/Input.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '@utils'
+import { cn } from '../@/lib/utils'
 
 const InputLabel = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
 	({ className, children, ...props }) => {

package/src/Input/InputMask.tsx

@@ -1,28 +1,7 @@
 import * as React from 'react'
 import { IMaskInput } from 'react-imask'
 
-const inputClasses = `
-	form-input
-	leading-[1.17]
-	font-normal
-	border
-	border-input
-	rounded-sm
-	w-full
-	h-[44px]
-	bg-transparent
-	file:bg-transparent
-	file:text-sm
-	file:font-medium
-	file:border-0
-	focus-visible:ring-1 
-	focus-visible:ring-ring
-	disabled:cursor-not-allowed
-	disabled:opacity-50
-	placeholder:text-muted-foreground
-	transition-colors
-	focus-visible:outline-none
-	`
+const inputClasses = 'form-input border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-sm focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed'
 
 const InputMask: React.FC = ({ ...props }) => {
 	return (

package/src/Input-OTP/Input.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { OTPInput, OTPInputContext } from 'input-otp'
-import { cn } from '@utils'
+import { cn } from '../@/lib/utils'
+// import { cn } from "@/lib/utils" порешать с алиасами
 
 const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(
 	({ className, containerClassName, ...props }, ref) => (