@modul/mbui 0.0.1 → 0.0.2-beta-pv-52768-9b2131f6

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'
+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

package/src/Slider/slider.styl

@@ -0,0 +1,62 @@
+@require '../../../Markup.Common/markup/stylus/variables'
+
+.ant
+    // SLIDER BEGIN
+    &-slider-rail
+    &-slider-track
+        height 2px
+        border-radius @height
+
+    &-slider-rail
+        background-color $cl-graphite-5
+
+    &-slider-track
+        position absolute
+        top 0
+        background-color $cl-green-2
+        transition background-color 0.3s ease-in-out
+
+    &-slider-handle
+        position absolute
+        top 50%
+        margin-top -7px
+        box-sizing border-box
+        width 14px
+        height @width
+        background-color $cl-white
+        border 2px solid $cl-green-2
+        border-radius 50%
+        transition background-color 0.3s ease-in-out, border-color 0.3s ease-in-out
+        cursor pointer
+
+    &-slider-disabled
+        .ant-slider-track
+        .ant-slider-handle
+            background-color $cl-graphite-4
+
+        .ant-slider-handle
+            border-color $cl-white
+            cursor not-allowed
+    // SLIDER END
+
+    // SLIDER TOOLTIP BEGIN
+    &-slider
+        position relative
+
+        & .ant-tooltip
+            background-color transparent
+
+            &-placement-bottom
+                padding-top 0
+
+            &-arrow
+                display none
+
+            &-content
+                padding 0
+                min-height auto
+                font-size $fz-small
+                color $cl-graphite-3
+                background-color transparent
+                box-shadow none
+    // SLIDER TOOLTIP END

package/src/Tabs/Tabs.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import cn from 'classnames'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import {TabsProps} from "@radix-ui/react-tabs";
+
+type TabsComponents = {
+	List: typeof TabsList,
+	Trigger: typeof TabsTrigger,
+	Content: typeof TabsContent,
+}
+
+const Tabs: React.FC<TabsProps> & TabsComponents = ({ ...props }) => <TabsPrimitive.Root {...props}/>
+
+const TabsList = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+			className
+		)}
+		{...props}
+	/>
+))
+
+const TabsTrigger = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+			className
+		)}
+		{...props}
+	/>
+))
+
+const TabsContent = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			className
+		)}
+		{...props}
+	/>
+))
+
+Tabs.List = TabsList
+TabsList.displayName = "TabsList"
+Tabs.Trigger = TabsTrigger
+TabsTrigger.displayName = "TabsTrigger"
+Tabs.Content = TabsContent
+TabsContent.displayName = "TabsContent"
+
+export default Tabs

package/src/Tabs/ant-tabs.styl

@@ -0,0 +1,91 @@
+@require '../../../Markup.Common/markup/stylus/variables'
+
+$prefix-tabs = ant-tabs
+
+// Общая обретка
+.{$prefix-tabs}
+	position relative
+
+	&._wide
+		.{$prefix-tabs}-tab
+			padding 0 16px 8px
+
+			&:not(:last-child)
+				margin-right 0
+
+// Панелька с названиями табов
+.{$prefix-tabs}-bar
+	position relative
+	display flex
+	flex-wrap nowrap
+
+	&::after
+		content ''
+		position absolute
+		right 0
+		bottom 0
+		left 0
+		height 2px
+		background-color $cl-graphite-6
+
+.{$prefix-tabs}-nav-wrap
+	overflow hidden
+
+.{$prefix-tabs}-nav-scroll
+	overflow hidden
+	white-space nowrap
+
+.{$prefix-tabs}-nav
+	display inline-block
+
+// Таб
+.{$prefix-tabs}-tab
+	display inline-block
+	padding-bottom 8px
+	user-select none
+	cursor pointer
+
+	&:not(:last-child)
+		margin-right 32px
+
+// Активный таб
+.{$prefix-tabs}-tab-active
+	position relative
+	color $cl-blue-2
+
+// Стрелки переключения между табами
+.{$prefix-tabs}-tab-prev
+.{$prefix-tabs}-tab-next
+	display none
+
+// Обертка всех табов
+.{$prefix-tabs}-content
+	display flex
+	margin-left 0 !important // fix стандартного поведения ant-tabs - табы уезжают влево через margin-left: -100%
+	width 100%
+
+// Контент табов
+.{$prefix-tabs}-tabpane
+	flex-shrink 0
+	width 100%
+
+// Подчеркивание активного таба
+.{$prefix-tabs}-ink-bar
+	position relative
+	height 3px
+	background-color $cl-blue-2
+	transition transform .2s
+	z-index 1
+
+// Скрытие неактивного таба
+.{$prefix-tabs}-tabpane-inactive
+	display none
+
+// Заготовка для анимаций
+// .{$prefix-tabs}-tabpane-active
+// 	animation-name anim-tab-active
+// 	animation-duration 1s
+
+// .{$prefix-tabs}-tabpane-inactive
+// 	animation-name anim-tab-inactive
+// 	animation-duration 1s

package/src/Tabs/index.ts

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

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import cn from 'classnames'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import {TooltipProps} from "@radix-ui/react-tooltip";
+// import './ant-tooltip.styl'
+
+//  "_error": mdStyle === "error",
+// 	"_white": mdStyle === "white",
+//
+// 	"_sm": mdSize === "sm",
+// 	"_md": mdSize === "md",
+// 	"_lg": mdSize === "lg",
+// 	"_xl": mdSize === "xl",
+
+type TooltipComponents = {
+	Provider: typeof TooltipProvider,
+	Trigger: typeof TooltipTrigger,
+	Content: typeof TooltipContent,
+}
+
+const Tooltip: React.FC<TooltipProps> & TooltipComponents = ({...props}) => <TooltipPrimitive.Root {...props}/>
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Content
+		ref={ref}
+		sideOffset={sideOffset}
+		className={cn(
+			'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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}
+	/>
+))
+
+Tooltip.Provider = TooltipProvider
+Tooltip.Trigger = TooltipTrigger
+Tooltip.Content = TooltipContent
+TooltipContent.displayName = "TooltipContent"
+
+export default Tooltip

package/src/Tooltip/index.ts

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