@modul/mbui 0.0.27-beta-webpack-559623b1 → 0.0.27-beta-webpack-305b06ab

package/src/Button/Button.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../@/lib/utils'
+
+const buttonClasses = {
+	base: `
+		inline-flex
+		justify-center
+		items-center
+		border-[2px]
+		rounded-md
+		font-medium
+		leading-[1]
+		focus-visible:ring
+		focus-visible:outline-none
+		ring-offset-1
+		disabled:pointer-events-none
+		transition-colors
+		whitespace-nowrap
+		shrink-0
+	`,
+	primary: `
+		text-btn-primary
+		bg-btn-primary
+		border-btn-primary
+		hover:bg-btn-primary-hover
+		hover:border-btn-primary-hover
+		focus-visible:bg-btn-primary-focus
+		focus-visible:border-btn-primary-focus
+		active:bg-btn-primary-active
+		active:border-btn-primary-active
+		disabled:bg-btn-primary-disabled
+		disabled:border-btn-primary-disabled
+	`,
+	secondary: `
+		text-btn-secondary
+		bg-btn-secondary
+		border-btn-secondary
+		hover:bg-btn-secondary-hover
+		hover:border-btn-secondary-hover
+		focus-visible:bg-btn-secondary-focus
+		focus-visibleborder-btn-secondary-focus
+		active:bg-btn-secondary-active
+		active:border-btn-secondary-active
+		disabled:text-btn-secondary-disabled
+	`,
+	outline: `
+		text-btn-outline
+		border-[1px]
+		border-btn-outline
+		hover:border-btn-outline-hover
+		focus:border-btn-outline-focus
+		active:border-btn-outline-active
+		disabled:border-btn-outline-disabled
+		disabled:text-btn-outline-disabled
+	`,
+	ghost: `
+		text-btn-ghost
+		border-transparent
+		hover:text-btn-ghost-hover
+		focus-visible:text-btn-ghost-focus
+		active:text-btn-ghost-active
+		disabled:text-btn-ghost-disabled
+	`,
+}
+
+const getPadings = (icon, variant) => {
+	return cn(
+		icon && 'p-[12px] aspect-square',
+		icon && variant === 'outline' && 'p-[13px] aspect-square',
+		!icon && 'px-[24px] py-[12px]',
+		!icon && variant === 'outline' && 'px-[25px] py-[13px]',
+	)
+}
+interface IVariantProps {
+	variant?: 'primary'| 'secondary' | 'outline' | 'ghost',
+	className?: string,
+	icon?: boolean
+}
+
+
+const buttonVariants = ({ variant, className, icon }: IVariantProps) => {
+	return cva(`${buttonClasses.base} ${getPadings(icon, variant)}`,
+		{
+			variants: {
+				variant: {
+					primary: buttonClasses.primary,
+					secondary: buttonClasses.secondary,
+					outline: buttonClasses.outline,
+					ghost: buttonClasses.ghost,
+				},
+			},
+			defaultVariants: {
+				variant: 'primary',
+			},
+		}
+	)({ variant, className })
+}
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean
+	icon?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, asChild = false, icon, ...props }, ref) => {
+		const Comp = asChild ? Slot : 'button'
+
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, className, icon }))}
+				ref={ref}
+				{...props}
+			/>
+		)
+	}
+)
+
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

package/src/Button/ButtonWidget.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../@/lib/utils'
+
+const buttonClasses = `
+		inline-flex
+		items-center
+		shrink-0
+		p-[8px]
+		rounded-md
+		font-medium
+		leading-[1]
+		focus-visible:ring
+		focus-visible:outline-none
+		ring-offset-1
+		transition-colors
+		whitespace-nowrap
+		bg-page
+		shadow-md
+		active:shadow-sm
+		disabled:pointer-events-none
+`
+
+interface IProps {
+	children?: React.ReactNode
+	className?: string
+}
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	asChild?: boolean
+}
+
+const Icon: React.FC<IProps> = ({ children }) => {
+	return <span className="flex justify-center items-center bg-primary-light [&+span]:ml-[16px] rounded-full text-primary size-[40px]">{children}</span>
+}
+
+const Content: React.FC<IProps> = ({ children, className }) => {
+	return <span className={cn('text-dark', className)}>{children}</span>
+}
+
+interface IButtonWidgetProps {
+	displayName: string
+	Icon: typeof Icon
+	Content: typeof Content
+}
+
+const ButtonWidget: React.FC<ButtonProps> & IButtonWidgetProps = ({ className, asChild = false, ...props }) => {
+		const Comp = asChild ? Slot : 'button'
+		return (
+			<Comp
+				className={cn(buttonClasses, className)}
+				{...props}
+			/>
+		)
+	}
+
+
+ButtonWidget.displayName = 'ButtonWidget'
+
+ButtonWidget.Icon = Icon
+ButtonWidget.Icon.displayName = 'ButtonWidget.Icon'
+
+ButtonWidget.Content = Content
+ButtonWidget.Content.displayName = 'ButtonWidget.Content'
+
+export { ButtonWidget }

package/src/Button/index.ts

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

package/src/Calendar/Calendar.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import { DayPicker } from 'react-day-picker'
+import { cn } from '../@/lib/utils'
+import { ru } from 'date-fns/locale'
+
+const daySelectedClasses = 'bg-btn-primary text-btn-primary rounded-sm'
+const dayTodayClasses = 'bg-btn-secondary text-btn-secondary rounded-sm'
+const rangeMiddleClasses = 'date-range-middle aria-selected:bg-btn-primary/50 aria-selected:text-white'
+const btnNavClasses =
+	'opacity-50 hover:opacity-100 ring-offset-2 focus-visible:opacity-100 focus-visible:outline-primary border-input border rounded-sm shadow-sm'
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+	return (
+		<DayPicker
+			locale={ru}
+			showOutsideDays={showOutsideDays}
+			className={cn('inline-flex', className)}
+			classNames={{
+				months: 'relative',
+				month: 'flex flex-col space-y-[16px] items-center',
+				month_grid: 'w-full border-collapse',
+				month_caption: 'inline m-x-auto',
+				caption_label: 'text-sm font-medium capitalize',
+				nav: 'flex justify-between absolute start-0 end-0',
+				button_previous: btnNavClasses,
+				button_next: btnNavClasses,
+				weekdays: 'flex',
+				weekday: 'text-light w-[32px] font-normal text-[14px]',
+				week: 'flex w-full mt-2',
+				day_button: 'w-[32px] h-[32px] p-0',
+				day: cn(
+					'aria-selected:opacity-100 text-[14px] leading-[1]',
+					props.mode === 'range'
+						? '[&:(.day-range-middle)]:rounded-0 [&:has(>.day-range-end)]:rounded-r-sm [&:has(>.day-range-start)]:rounded-l-sm first:[&:has([aria-selected])]:rounded-l-sm last:[&:has([aria-selected])]:rounded-r-sm'
+						: '[&:([aria-selected])]:rounded-sm'
+				),
+				range_start: 'day-range-start',
+				range_end: 'day-range-end',
+				range_middle: rangeMiddleClasses,
+				selected: daySelectedClasses,
+				today: dayTodayClasses,
+				outside:
+					'day-outside opacity-50 aria-selected:bg-primary aria-selected:text-[white] aria-selected:opacity-30',
+				disabled: 'text-light opacity-50',
+				hidden: 'invisible',
+				...classNames,
+			}}
+			components={
+				{
+					// Chevron: () => <Left className="w-4 h-4" />,
+				}
+			}
+			{...props}
+		/>
+	)
+}
+
+Calendar.displayName = 'Calendar'
+
+export { Calendar }

package/src/Calendar/index.ts

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

package/src/Chat/MessageTyping.tsx

@@ -0,0 +1,61 @@
+import React, { FC, SVGProps } from 'react'
+import { cn } from '../@/lib/utils'
+
+export const MessageTyping: FC<SVGProps<SVGElement>> = ({ className }) => {
+	return (
+		<svg
+			className={cn(className)}
+			width="72"
+			height="40"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M0 8a8 8 0 0 1 8-8h56a8 8 0 0 1 8 8v24a8 8 0 0 1-8 8H0V8Z"
+				fill="#F5F5F6"
+			/>
+			<path
+				id="dot_1"
+				d="M20 24a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
+				fill="#9B9FA8"
+			/>
+			<animate
+				href="#dot_1"
+				attributeType="CSS"
+				attributeName="opacity"
+				values="1;0;1;"
+				dur=".8s"
+				begin="0"
+				repeatCount="indefinite"
+			/>
+			<path
+				id="dot_2"
+				d="M36 24a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
+				fill="#9B9FA8"
+			/>
+			<animate
+				href="#dot_2"
+				attributeType="CSS"
+				attributeName="opacity"
+				values="1;0;1;"
+				dur=".8s"
+				begin=".15s"
+				repeatCount="indefinite"
+			/>
+			<path
+				id="dot_3"
+				d="M52 24a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
+				fill="#9B9FA8"
+			/>
+			<animate
+				href="#dot_3"
+				attributeType="CSS"
+				attributeName="opacity"
+				values="1;0;1;"
+				dur=".8s"
+				begin=".3s"
+				repeatCount="indefinite"
+			/>
+		</svg>
+	)
+}

package/src/Chat/index.ts

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

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,28 @@
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { cn } from "../@/lib/utils"
+import { Check } from '../Icon'
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-[16px] w-[14px] shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="w-[16px] h-[16px] text-white" />
+    </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

@@ -0,0 +1,55 @@
+import React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from '@radix-ui/react-slot'
+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',
+	{
+		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: '',
+				md: '',
+				sm: 'h-[14px] px-[20px] text-[10px] leading-[1.4]',
+				xs: '',
+				xxs: '',
+			},
+		},
+		defaultVariants: {
+			variant: 'secondary',
+			size: 'sm',
+		},
+	}
+)
+
+export interface IChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof chipVariants> {
+	asChild?: boolean
+}
+
+const Chip = React.forwardRef<HTMLButtonElement, IChipProps>(({ children, variant, size, className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "span"
+
+	return (
+		<Comp
+        className={cn(chipVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+	)
+})
+
+Chip.displayName = 'Chip'
+
+export { Chip }

package/src/Chip/index.ts

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

package/src/Collapsible/AccountCollapsible.tsx

@@ -0,0 +1,79 @@
+import React, { FC, ReactNode } from 'react'
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+import { DropdownSmallOld } from '../../src/Icon'
+import { cn } from '../@/lib/utils'
+import { Slot } from '@radix-ui/react-slot'
+
+const AccountCollapsible = CollapsiblePrimitive.Root
+
+const AccountCollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const AccountCollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export type AccountCollapsibleHeaderProps = {
+	label: ReactNode
+}
+
+export type AccountCollapsibleContentItemProps = {
+	className?: string
+	children: ReactNode
+	asChild: boolean
+}
+
+const AccountCollapsibleHeader: FC<AccountCollapsibleHeaderProps> = ({ label }) => {
+	return (
+		<AccountCollapsibleTrigger className="flex justify-between items-center w-full text-light align-center group">
+			<div className="font-medium text-[12px] leading-[1.33]">{label}</div>
+			<DropdownSmallOld className='group-[[data-state=open]]:rotate-180 transition-transform'/>
+		</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,
+	className,
+	...props
+}) => {
+	const Comp = asChild ? Slot : 'div'
+	return (
+		<Comp
+			className={cn(
+				accountCollapsibleClasses,
+				className
+			)}
+			{...props}
+		>
+			{children}
+		</Comp>
+	)
+}
+
+AccountCollapsible.displayName = 'AccountCollaspible'
+AccountCollapsibleTrigger.displayName = 'AccountCollaspibleTrigger'
+AccountCollapsibleHeader.displayName = 'AccountCollapsibleHeader'
+AccountCollapsibleContent.displayName = 'AccountCollaspibleContent'
+AccountCollapsibleContentItem.displayName = 'AccountCollapsibleContentItem'
+
+export {
+	AccountCollapsible,
+	AccountCollapsibleHeader,
+	AccountCollapsibleTrigger,
+	AccountCollapsibleContent,
+	AccountCollapsibleContentItem,
+}

package/src/Collapsible/Collapsible.tsx

@@ -0,0 +1,13 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+Collapsible.displayName = 'Collapsible'
+CollapsibleTrigger.displayName = 'CollapsibleTrigger'
+CollapsibleContent.displayName = 'CollapsibleContent'
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/Collapsible/index.ts

@@ -0,0 +1,8 @@
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible'
+export {
+	AccountCollapsible,
+	AccountCollapsibleHeader,
+	AccountCollapsibleTrigger,
+	AccountCollapsibleContent,
+	AccountCollapsibleContentItem,
+} from './AccountCollapsible'

package/src/DatePicker/DatePicker.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { format } from 'date-fns'
+import { cn } from '../@/lib/utils'
+import { Calendar } from '../../src/Calendar'
+import { Calendar as CalendarIcon } from '../../src/Icon'
+import { Popover } from '../../src/Popover'
+import { ru } from 'date-fns/locale'
+
+const trigegrClasses = 'inline-flex items-center px-[12px] h-[44px] text-left border-input border rounded-sm'
+
+interface IProps {
+	dateFormat?: any,
+	mode?: any;
+	placeholder?: string,
+	date?: Date,
+	classTrigger?: string,
+	triggerDisabled?: boolean,
+	onSelect?: (value: Date) => void
+}
+
+const DatePicker: React.FC<IProps> = ({placeholder, triggerDisabled, date, classTrigger, dateFormat = 'PPP',   ...props}) => {
+
+	return (
+		<Popover>
+			<Popover.Trigger asChild>
+				<button className={cn(trigegrClasses, {'bg-light text-light':triggerDisabled}, classTrigger)} disabled={triggerDisabled}>
+					{date ? <span className='w-[calc(100%-26px)] truncate'>{format(date ,dateFormat, {locale: ru})}</span> : <span className='w-[calc(100%-26px)] text-light truncate'>{placeholder}</span>}
+					<CalendarIcon width={18} height={18} className="ml-[8px] text-light shrink-0" />
+				</button>
+			</Popover.Trigger>
+			<Popover.Content
+				className="bg-page p-0 w-auto"
+				align="center"
+			>
+				<Calendar {...props}/>
+			</Popover.Content>
+		</Popover>
+	)
+}
+
+export { DatePicker }

package/src/DatePicker/index.ts

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

package/src/DigitKeyPad/DigitKeyPad.tsx

@@ -0,0 +1,69 @@
+import React, { FC, ReactNode } from 'react'
+import { cn } from '../@/lib/utils'
+
+const buttonClasses = {
+	base: `
+		size-[64px]
+		text-[32px]
+		leading-[32px]
+		text-primary
+		rounded-full
+		hover:bg-primary-light
+		focus-visible:bg-primary-light
+		active:text-white
+		active:bg-primary
+		border-[1px]
+		border-primary
+	`,
+	clean: `
+		border-none
+	`,
+}
+
+interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	clean?: boolean
+}
+
+const Button: FC<IButtonProps> = ({ children, className, clean = false, type = 'button', ...props }) => {
+	return (
+		<button
+			className={cn(buttonClasses.base, clean && buttonClasses.clean, className)}
+			type={type}
+			{...props}
+		>
+			{children}
+		</button>
+	)
+}
+
+interface IDigitKeyPadProps {
+	isDisabled: boolean
+	legend?: string
+	children?: ReactNode
+	className?: string
+}
+
+interface IDigitKeyPad {
+	displayName: string
+	Button: typeof Button
+}
+
+const DigitKeyPad: FC<IDigitKeyPadProps> & IDigitKeyPad = ({ legend, children, isDisabled }) => {
+	return (
+		<fieldset
+			disabled={isDisabled}
+			className="gap-[32px] grid grid-cols-3 grid-rows-4 mx-auto w-[256px]"
+		>
+			{legend && <legend className="sr-only">{legend}</legend>}
+			{children}
+		</fieldset>
+	)
+}
+
+DigitKeyPad.displayName = 'DigitKeyPad'
+
+DigitKeyPad.Button = Button
+
+DigitKeyPad.Button.displayName = 'DigitKeyPad.Button'
+
+export { DigitKeyPad }

package/src/DigitKeyPad/index.ts

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