@modul/mbui 0.0.28-beta-pv-53496-934863d9 → 0.0.28

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/Carousel/Carousel.tsx

@@ -0,0 +1,190 @@
+import * as React from "react"
+import useEmblaCarousel, {
+	type UseEmblaCarouselType,
+} from "embla-carousel-react"
+
+import { cn } from '../@/lib/utils'
+
+export type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+export type CarouselProps = {
+	opts?: CarouselOptions
+	plugins?: CarouselPlugin
+	orientation?: "horizontal" | "vertical"
+	setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+	api: ReturnType<typeof useEmblaCarousel>[1]
+	scrollPrev: () => void
+	scrollNext: () => void
+	canScrollPrev: boolean
+	canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+	const context = React.useContext(CarouselContext)
+
+	if (!context) {
+		throw new Error("useCarousel must be used within a <Carousel />")
+	}
+
+	return context
+}
+
+export const Carousel = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+	(
+		{
+			orientation = "horizontal",
+			opts,
+			setApi,
+			plugins,
+			className,
+			children,
+			...props
+		},
+		ref
+	) => {
+		const [carouselRef, api] = useEmblaCarousel(
+			{
+				...opts,
+				axis: orientation === "horizontal" ? "x" : "y",
+			},
+			plugins
+		)
+		const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+		const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+		const onSelect = React.useCallback((api: CarouselApi) => {
+			if (!api) {
+				return
+			}
+
+			setCanScrollPrev(api.canScrollPrev())
+			setCanScrollNext(api.canScrollNext())
+		}, [])
+
+		const scrollPrev = React.useCallback(() => {
+			api?.scrollPrev()
+		}, [api])
+
+		const scrollNext = React.useCallback(() => {
+			api?.scrollNext()
+		}, [api])
+
+		const handleKeyDown = React.useCallback(
+			(event: React.KeyboardEvent<HTMLDivElement>) => {
+				if (event.key === "ArrowLeft") {
+					event.preventDefault()
+					scrollPrev()
+				} else if (event.key === "ArrowRight") {
+					event.preventDefault()
+					scrollNext()
+				}
+			},
+			[scrollPrev, scrollNext]
+		)
+
+		React.useEffect(() => {
+			if (!api || !setApi) {
+				return
+			}
+
+			setApi(api)
+		}, [api, setApi])
+
+		React.useEffect(() => {
+			if (!api) {
+				return
+			}
+
+			onSelect(api)
+			api.on("reInit", onSelect)
+			api.on("select", onSelect)
+
+			return () => {
+				api?.off("select", onSelect)
+			}
+		}, [api, onSelect])
+
+		return (
+			<CarouselContext.Provider
+				value={{
+					carouselRef,
+					api: api,
+					opts,
+					orientation:
+						orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+					scrollPrev,
+					scrollNext,
+					canScrollPrev,
+					canScrollNext,
+				}}
+			>
+				<div
+					ref={ref}
+					onKeyDownCapture={handleKeyDown}
+					className={cn("relative", className)}
+					role="region"
+					aria-roledescription="carousel"
+					{...props}
+				>
+					{children}
+				</div>
+			</CarouselContext.Provider>
+		)
+	}
+)
+Carousel.displayName = "Carousel"
+
+export const CarouselContent = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+	const { carouselRef, orientation } = useCarousel()
+
+	return (
+		<div ref={carouselRef} className="overflow-hidden">
+			<div
+				ref={ref}
+				className={cn(
+					"flex",
+					{"flex-col": orientation !== "horizontal"},
+					className
+				)}
+				{...props}
+			/>
+		</div>
+	)
+})
+CarouselContent.displayName = "CarouselContent"
+
+export const CarouselItem = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+	const { orientation } = useCarousel()
+
+	return (
+		<div
+			ref={ref}
+			role="group"
+			aria-roledescription="slide"
+			className={cn(
+				"min-w-0 shrink-0 grow-0",
+				className
+			)}
+			{...props}
+		/>
+	)
+})
+CarouselItem.displayName = "CarouselItem"

package/src/Carousel/index.ts

@@ -0,0 +1,8 @@
+export {
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	type CarouselApi,
+	// CarouselPrevious,
+	// CarouselNext,
+} from "./Carousel"

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,
+}