@modul/mbui 0.0.28-beta-pv-53383-45fd0f43 → 0.0.28-beta-pv-53496-b92f050c

package/src/BottomNavigation/BottomNavigation.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cn } from '../@/lib/utils'
-
-export interface BottomNavigationLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-	asChild?: boolean
-}
-
-export type IProps = {
-	className?: string
-	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 BottomNavigationLink = React.forwardRef<HTMLButtonElement, BottomNavigationLinkProps>(({ className, asChild, ...props }, ref) => {
-	const Comp = asChild ? Slot : "button"
-	return (
-		<Comp
-			className={cn(btnClasses, className)}
-			ref={ref}
-			{...props}
-		/>
-	)
-})
-
-BottomNavigationLink.displayName = 'BottomNavigationLink'
-
-const BottomNavigationListItem = React.forwardRef(({ className, children }: IProps, ref) => (
-	<li className={className}>{children}</li>
-))
-BottomNavigationListItem.displayName = 'BottomNavigationListItem'
-
-const BottomNavigationList = React.forwardRef(({ className, children }: IProps, ref) => (
-	<ul className="flex *:w-[calc(100%_/_5)]">{children}</ul>
-))
-BottomNavigationList.displayName = 'BottomNavigationList'
-
-const BottomNavigation = React.forwardRef(({ className, children }: IProps, ref) => {
-	return <nav className={className}>{children}</nav>
-})
-BottomNavigation.displayName = 'BottomNavigation'
-
-export { BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink }

package/src/BottomNavigation/index.ts

@@ -1 +0,0 @@
-export { BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink } from './BottomNavigation'

package/src/Button/Button.tsx

@@ -1,124 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

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

package/src/Calendar/Calendar.tsx

@@ -1,61 +0,0 @@
-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

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

package/src/Carousel/Carousel.tsx

@@ -1,248 +0,0 @@
-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"
-
-// const CarouselPrevious = React.forwardRef<
-// 	HTMLButtonElement,
-// 	React.ComponentProps<typeof Button>
-// >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-// 	const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-//
-// 	return (
-// 		<Button
-// 			ref={ref}
-// 			variant={variant}
-// 			size={size}
-// 			className={cn(
-// 				"absolute  h-8 w-8 rounded-full",
-// 				orientation === "horizontal"
-// 					? "-left-12 top-1/2 -translate-y-1/2"
-// 					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-// 				className
-// 			)}
-// 			disabled={!canScrollPrev}
-// 			onClick={scrollPrev}
-// 			{...props}
-// 		>
-// 			<ArrowLeft className="w-4 h-4" />
-// 			<span className="sr-only">Previous slide</span>
-// 		</Button>
-// 	)
-// })
-// CarouselPrevious.displayName = "CarouselPrevious"
-//
-// const CarouselNext = React.forwardRef<
-// 	HTMLButtonElement,
-// 	React.ComponentProps<typeof Button>
-// >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-// 	const { orientation, scrollNext, canScrollNext } = useCarousel()
-//
-// 	return (
-// 		<Button
-// 			ref={ref}
-// 			variant={variant}
-// 			size={size}
-// 			className={cn(
-// 				"absolute h-8 w-8 rounded-full",
-// 				orientation === "horizontal"
-// 					? "-right-12 top-1/2 -translate-y-1/2"
-// 					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-// 				className
-// 			)}
-// 			disabled={!canScrollNext}
-// 			onClick={scrollNext}
-// 			{...props}
-// 		>
-// 			<ArrowRight className="w-4 h-4" />
-// 			<span className="sr-only">Next slide</span>
-// 		</Button>
-// 	)
-// })
-// CarouselNext.displayName = "CarouselNext"

package/src/Carousel/index.ts

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

package/src/Chat/MessageTyping.tsx

@@ -1,61 +0,0 @@
-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

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

package/src/Checkbox/Checkbox.tsx

@@ -1,28 +0,0 @@
-
-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

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