@modul/mbui 0.0.2 → 0.0.3-beta-pv-52770-26eac77b

package/src/Audio/types.ts

@@ -0,0 +1,40 @@
+/**
+ * статусы состояния аудио компонента
+ */
+export enum EAudioStatuses {
+	LOADING,
+	PLAYING,
+	PAUSED
+}
+
+export interface IState {
+	/* текущий статус */
+	status: EAudioStatuses;
+	/* процесс загрузки */
+	loadingProgress: number;
+	/* прогресс прослушивания */
+	progress: number;
+	/** Продолжительность записи (инициализация), будет пересчитано при получении метаданных */
+	duration: number;
+	/* ИД таймера задержки перед показом лоадера */
+	waitingTimerId?: ReturnType<typeof setTimeout>;
+	/** Текущее время воспроизведения */
+	currentTime: number,
+	/** признак когда пользователь взял ползунок перемотки */
+	drag: boolean,
+}
+
+export interface IAudioProps {
+	/** Продолжительность записи (инициализация), будет пересчитано при получении метаданных */
+	duration: number;
+	/** Источник аудиозаписи */
+	src: string,
+	/** Имя файла, отображаемое когда невозможно отобразить контрол аудиозаписи */
+	fileName: string,
+	/** Уровень звука [0,1] */
+	volume: number,
+	/** Расположение продолжительности аудиозаписи */
+	durationView: 'right' | 'bottom',
+	/** Только один элемент проигрывается на странице */
+	onlyOneIsPlayed: boolean,
+}

package/src/Base/Buttons/Button.tsx

@@ -1,47 +1,73 @@
-import React from 'react'
-import classNames from 'classnames'
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-interface IProps {
-	children?: React.ReactNode
-	loading?: boolean
-	sizeType?: 'normal' | 'big' | 'small' | 'xsmall' | 'xxsmall'
-	variant?: 'primary' | 'green' | 'light' | 'lightPrimary' | 'grey' | 'clean'
-	icon?: string
-	wide?: boolean
-}
-
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & IProps
+import { cn } from "../../@/lib/utils"
+// import { cn } from "@/lib/utils" порешать с алиасами
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	(
-		{
-			children,
-			loading = false,
-			sizeType = 'normal',
-			variant = 'primary',
-			className,
-			icon,
-			wide = false,
-			...props
+const buttonVariants = cva(
+	'inline-flex items-center border-[2px] justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring ring-offset-1 disabled:pointer-events-none disabled:opacity-[.24]',
+	{
+		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',
+				// link: 	 'text-primary underline-offset-4 hover:underline',
+			},
+			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]'
+			}
+		},
+		defaultVariants: {
+			variant: 'primary',
+			size: 'md',
 		},
-		ref
-	) => {
-		const styles = classNames('button', sizeType, variant, className, {
-			loader: loading,
-			[`icon-${icon}`]: !!icon,
-			wide,
-		})
-
-		return (
-			<button
-				ref={ref}
-				className={styles}
-				{...props}
-			>
-				{children}
-			</button>
-		)
 	}
 )
+const textVariants = cva(
+	'inline-flex whitespace-nowrap transition-colors focus-visible:outline-current rounded-[.25em] disabled:pointer-events-none disabled:opacity-[.24]',
+	{
+		variants: {
+			variant: {
+				primary: 'text-primary hover:text-primary-hover focus:text-primary-focus active:text-primary-active disabled:pointer-events-none',
+			}
+		},
+		defaultVariants: {
+			variant: 'primary'
+		},
+	}
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean,
+  asText?: boolean
+}
+
+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}
+      />
+    )
+  }
+)
+
+Button.displayName = "Button"
 
-export default Button
+export { Button, buttonVariants }

package/src/Base/Buttons/index.ts

@@ -1,3 +1,4 @@
-import Button from './Button'
+import {Button} from './Button'
 
 export { Button }
+export default Button

package/src/Base/Input/Base.tsx

@@ -0,0 +1,37 @@
+import React, { ChangeEvent, ForwardedRef } from 'react'
+import { IMaskInput } from 'react-imask'
+import { IInputProps } from './types'
+
+const Base = React.forwardRef<HTMLInputElement, IInputProps>(
+	({ onChange, type = 'text', mask, ...props }: IInputProps, ref: ForwardedRef<HTMLInputElement>) => {
+		const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+			// @ts-ignore
+			const val = event.target.value
+			onChange?.(val, event)
+		}
+
+		if (!mask) {
+			return (
+				<input
+					type={type}
+					ref={ref}
+					onChange={handleChange}
+					{...props}
+				/>
+			)
+		}
+
+		return (
+			// @ts-ignore
+			<IMaskInput
+				type={type}
+				inputRef={ref}
+				mask={mask}
+				onChange={handleChange}
+				{...props}
+			/>
+		)
+	}
+)
+
+export default Base

package/src/Base/Input/Input.tsx

@@ -1,20 +1,40 @@
-import React, { ChangeEvent, ForwardedRef } from 'react'
-import { IMaskInput } from 'react-imask'
+import React, { ForwardedRef } from 'react'
+import Base from './Base'
 import { IInputProps } from './types'
 
 const Input = React.forwardRef<HTMLInputElement, IInputProps>(
-	({ onChange, ...props }: IInputProps, ref: ForwardedRef<HTMLInputElement>) => {
-		const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-			const val = event.target.value
-			onChange?.(val, event)
+	({ onChange, value, clearable, ...props }: IInputProps, ref: ForwardedRef<HTMLInputElement>) => {
+		const handleClearClick = (): void => {
+			onChange?.('')
+		}
+
+		if (!clearable) {
+			return (
+				<Base
+					ref={ref}
+					onChange={onChange}
+					value={value}
+					{...props}
+				/>
+			)
 		}
 
 		return (
-			<IMaskInput
-				ref={ref}
-				{...props}
-				onChange={handleChange}
-			/>
+			<div className="input_wrap_clear">
+				<Base
+					ref={ref}
+					onChange={onChange}
+					value={value}
+					{...props}
+				/>
+				{value && (
+					<a
+						className="input_clear icon-cancel"
+						onClick={handleClearClick}
+						style={{ visibility: 'initial' }}
+					/>
+				)}
+			</div>
 		)
 	}
 )

package/src/Base/Input/types.ts

@@ -1,10 +1,11 @@
 import React, { ChangeEvent, ChangeEventHandler } from 'react'
 
-type CustomChangeEventHandler = (value: string, event: ChangeEvent<HTMLInputElement>) => void
+type CustomChangeEventHandler = (value: string, event?: ChangeEvent<HTMLInputElement>) => void
 
 type CombinedChangeEventHandler = ChangeEventHandler<HTMLInputElement> & CustomChangeEventHandler
 
 export interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	onChange?: CombinedChangeEventHandler
-	mask?: string | RegExp | (string | RegExp)[]
+	mask?: string | RegExp | (string | RegExp)[] | NumberConstructor
+	clearable?: boolean
 }

package/src/Collapse/Collapse.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import cn from 'classnames'
+import * as Accordion from '@radix-ui/react-accordion'
+import {
+	AccordionMultipleProps,
+	AccordionSingleProps,
+	AccordionContent,
+	AccordionHeader,
+	AccordionItem,
+	AccordionTrigger
+} from "@radix-ui/react-accordion";
+
+type CollapseComponents = {
+	Item: typeof AccordionItem,
+	Header: typeof AccordionHeader,
+	Trigger: typeof AccordionTrigger,
+	Content: typeof AccordionContent,
+}
+
+const Collapse: React.FC<AccordionSingleProps | AccordionMultipleProps> & CollapseComponents = ({...props}) => <Accordion.Root {...props}/>
+
+const CollapseItem = React.forwardRef<
+	React.ElementRef<typeof Accordion.Item>,
+	React.ComponentPropsWithoutRef<typeof Accordion.Item>
+>(({ className, ...props }, ref) => (
+	<Accordion.Item
+		ref={ref}
+		className={cn('border-b', className)}
+		{...props}
+	/>
+))
+
+const CollapseHeader = React.forwardRef<
+	React.ElementRef<typeof Accordion.Header>,
+	React.ComponentPropsWithoutRef<typeof Accordion.Header>
+>(({ className, children, ...props }, ref) => (
+	<Accordion.Header
+		className={cn('flex', className)}
+		{...props}
+		ref={ref}
+	>
+		{children}
+	</Accordion.Header>
+))
+
+const CollapseTrigger = React.forwardRef<
+	React.ElementRef<typeof Accordion.Trigger>,
+	React.ComponentPropsWithoutRef<typeof Accordion.Trigger>
+>(({ className, children, ...props }, ref) => (
+	<Accordion.Trigger
+		ref={ref}
+		className={cn(
+			'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+			className
+		)}
+		{...props}
+	>
+		{children}
+		{/*<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />*/}
+	</Accordion.Trigger>
+))
+
+const CollapseContent = React.forwardRef<
+	React.ElementRef<typeof Accordion.Content>,
+	React.ComponentPropsWithoutRef<typeof Accordion.Content>
+>(({ className, children, ...props }, ref) => (
+	<Accordion.Content
+		ref={ref}
+		className={cn(
+			'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+			className
+		)}
+		{...props}
+	>
+		{children}
+	</Accordion.Content>
+))
+
+Collapse.Item = CollapseItem
+CollapseItem.displayName = "CollapseItem"
+Collapse.Header = CollapseHeader
+CollapseHeader.displayName = "CollapseHeader"
+Collapse.Trigger = CollapseTrigger
+CollapseTrigger.displayName = "CollapseTrigger"
+Collapse.Content = CollapseContent
+CollapseContent.displayName = "CollapseContent"
+
+export default Collapse

package/src/Collapse/ant-collapse.styl

@@ -0,0 +1,93 @@
+@require '../../../Markup.Common/markup/stylus/variables'
+
+$prefix-collapse = ant-collapse;
+
+// Блок аккордеона
+.{$prefix-collapse}-item
+	background-color $cl-graphite-7
+	border-radius 4px
+	&:hover
+		.{$prefix-collapse}-header
+			background-color lighten($cl-graphite-6, 20%)
+
+	& + .{$prefix-collapse}-item
+		margin-top 12px
+
+// Открытый аккордеон
+.{$prefix-collapse}-item-active
+	.{$prefix-collapse}-header
+		&::after
+			transform rotate(180deg)
+
+// Отключенный аккордеон
+.{$prefix-collapse}-item-disabled
+	&:hover
+		.{$prefix-collapse}-header
+			background-color $cl-graphite-7
+
+			&::after
+				color $cl-text-light
+
+	.{$prefix-collapse}-header
+		color $cl-text-disabled
+		cursor default
+		&:hover
+			&::after
+				color $cl-text-light
+
+		&::after
+			color $cl-text-disabled
+
+// Шапка аккордеона
+.{$prefix-collapse}-header
+	padding 12px 56px 12px 24px
+	box-sizing border-box
+	overflow hidden
+	white-space nowrap
+	text-overflow ellipsis
+	font-weight $fw-medium
+	transition .2s
+	cursor pointer
+	&:hover
+		&::after
+			color $cl-text
+
+	// Стрелка
+	&::after
+		position absolute
+		top 6px
+		right 12px
+		display flex
+		justify-content center
+		align-items center
+		width 32px
+		height @width
+		font-icon 'dropdown'
+		font-size 12px
+		color $cl-text-light
+		transition transform .2s
+
+	.anticon
+		display none
+
+// Обертка контента аккордеона
+.{$prefix-collapse}-content
+	border-top 1px solid $cl-graphite-6
+
+// Контент аккордеона
+.{$prefix-collapse}-content-box
+	padding 24px 20px
+	box-sizing border-box
+
+
+// АНИМАЦИЯ
+.ant-motion-collapse
+	overflow hidden
+
+.ant-motion-collapse-active
+.{$prefix-collapse}-content-inactive
+	transition height .25s cubic-bezier(.075, .82, .165, 1),
+			   opacity .25s cubic-bezier(.075, .82, .165, 1) !important
+
+.{$prefix-collapse}-content-inactive
+	display none

package/src/Collapse/index.ts

@@ -0,0 +1,5 @@
+import Collapse from './Collapse'
+
+export default Collapse
+
+export { Collapse }

package/src/Input-OTP/Input.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { OTPInput, OTPInputContext } from 'input-otp'
+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) => (
+		<OTPInput
+			ref={ref}
+			containerClassName={cn('flex items-center has-[:disabled]:opacity-50', containerClassName)}
+			className={cn('disabled:cursor-not-allowed', className)}
+			{...props}
+		/>
+	)
+)
+InputOTP.displayName = 'InputOTP'
+
+const InputOTPGroup = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn('flex items-center', className)}
+			{...props}
+		/>
+	)
+)
+InputOTPGroup.displayName = 'InputOTPGroup'
+
+const InputOTPSlot = React.forwardRef<
+	React.ElementRef<'div'>,
+	React.ComponentPropsWithoutRef<'div'> & { index: number }
+>(({ index, className, ...props }, ref) => {
+	const inputOTPContext = React.useContext(OTPInputContext)
+	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				'relative flex h-[48px] w-[20px] items-center justify-center border-b-[2px] border-input transition-all',
+				isActive && 'z-10 ring-2 ring-ring ring-offset-background',
+				className
+			)}
+			{...props}
+		>
+			{/* {char && <span className='bg-black rounded-full w-[8px] h-[8px]'></span>} */}
+			{char}
+			{hasFakeCaret && (
+				<div className="absolute inset-0 flex justify-center items-center pointer-events-none">
+					<div className="bg-foreground w-px h-4 animate-caret-blink duration-1000" />
+				</div>
+			)}
+		</div>
+	)
+})
+InputOTPSlot.displayName = 'InputOTPSlot'
+
+const InputOTPSeparator = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(
+	({ ...props }, ref) => (
+		<div
+			ref={ref}
+			role="separator"
+			{...props}
+		>
+			{/* <Dot /> */}точка
+		</div>
+	)
+)
+InputOTPSeparator.displayName = 'InputOTPSeparator'
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/Input-OTP/index.ts

@@ -0,0 +1,3 @@
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./Input"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/Logo/Logo.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+// @ts-ignore
+import bank from '../assets/images/logo/bank/logo.svg'
+// import kassa from '../assets/images/logo/kassa/logo.svg'
+// import garant from '../assets/images/logo/garant/logo.svg'
+
+interface LogoProps extends React.ImgHTMLAttributes<HTMLImageElement>{
+	variant?: 'bank' | 'kassa' | 'garant',
+	className?: string
+}
+
+const Logo: React.FC<LogoProps> = ({variant = bank, width = 132, height = 32, className}) => {
+	return <img className={className} src={variant} width={width} height={height} />
+}
+
+export default Logo

package/src/Logo/index.ts

@@ -0,0 +1,3 @@
+import Logo from './Logo'
+
+export default Logo

package/src/Popover/Popover.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import cn from 'classnames'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import {PopoverPortalProps, PopoverProps} from "@radix-ui/react-popover";
+
+type PopoverComponents = {
+	Trigger: typeof PopoverTrigger,
+	Portal: typeof PopoverPortal,
+	Content: typeof PopoverContent,
+}
+
+const Popover: React.FC<PopoverProps> & PopoverComponents = (props) => <PopoverPrimitive.Root {...props} />
+
+const PopoverTrigger: typeof PopoverPrimitive.Trigger = PopoverPrimitive.Trigger
+
+const PopoverPortal: React.FC<PopoverPortalProps> = ({ children, ...props }) => (
+	<PopoverPrimitive.Portal {...props}>{children}</PopoverPrimitive.Portal>
+)
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className = '', align = 'center', sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			className
+		)}
+		{...props}
+	/>
+))
+
+Popover.Trigger = PopoverTrigger
+Popover.Portal = PopoverPortal
+Popover.Portal.displayName = PopoverPrimitive.Portal.displayName
+Popover.Content = PopoverContent
+Popover.Content.displayName = PopoverPrimitive.Content.displayName
+
+export default Popover

package/src/Popover/index.ts

@@ -0,0 +1,5 @@
+import Popover from './Popover'
+
+export default Popover
+
+export { Popover }

package/src/Slider/Slider.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import cn from 'classnames'
+
+const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className = '', ...props }, ref) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn('relative flex w-full touch-none select-none items-center', className)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+			<SliderPrimitive.Range className="absolute h-full bg-primary" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+	</SliderPrimitive.Root>
+))
+
+export default Slider

package/src/Slider/index.ts

@@ -0,0 +1,4 @@
+import Slider from './Slider'
+
+export { Slider }
+export default Slider