@modul/mbui 0.0.13-beta-pv-53036-14e26eb5 → 0.0.13

package/src/AlertDialog/AlertDialog.tsx

@@ -1,138 +0,0 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "../@/lib/utils"
-import { buttonVariants } from "../Button"
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-input bg-dialog p-[16px] shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants({variant: 'primary', size: 'sm'}), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline", size: 'sm' }),
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/src/AlertDialog/index.ts

@@ -1,13 +0,0 @@
-export {
-	AlertDialog,
-	AlertDialogPortal,
-	AlertDialogOverlay,
-	AlertDialogTrigger,
-	AlertDialogContent,
-	AlertDialogHeader,
-	AlertDialogFooter,
-	AlertDialogTitle,
-	AlertDialogDescription,
-	AlertDialogAction,
-	AlertDialogCancel,
-} from './AlertDialog'

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

@@ -1,40 +0,0 @@
-import * as React from 'react'
-import { format } from 'date-fns'
-import { cn } from '../@/lib/utils'
-import { Calendar } from '../Calendar'
-import { Calendar as CalendarIcon } from '../Icon'
-import { Popover } from '../Popover'
-import { ru } from 'date-fns/locale'
-
-const trigegrClasses = 'inline-flex items-center border-input px-[12px] border rounded-sm h-[44px] text-left'
-
-interface IProps {
-	mode?: any;
-	placeholder?: string,
-	date: Date,
-	classTrigger?: string,
-	triggerDisabled: boolean,
-	onSelect: (value: Date) => void
-}
-
-const DatePicker: React.FC<IProps> = ({placeholder, triggerDisabled, date, classTrigger,  ...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 ,'PPP', {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

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

package/src/Form/Form.tsx

@@ -1,152 +0,0 @@
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from '@radix-ui/react-slot'
-import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form'
-
-import { cn } from '../@/lib/utils'
-import { Label } from '../Label'
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-	TFieldValues extends FieldValues = FieldValues,
-	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-	name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
-
-const FormField = <
-	TFieldValues extends FieldValues = FieldValues,
-	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-	...props
-}: ControllerProps<TFieldValues, TName>) => {
-	return (
-		<FormFieldContext.Provider value={{ name: props.name }}>
-			<Controller {...props} />
-		</FormFieldContext.Provider>
-	)
-}
-
-const useFormField = () => {
-	const fieldContext = React.useContext(FormFieldContext)
-	const itemContext = React.useContext(FormItemContext)
-	const { getFieldState, formState } = useFormContext()
-
-	const fieldState = getFieldState(fieldContext.name, formState)
-
-	if (!fieldContext) {
-		throw new Error('useFormField should be used within <FormField>')
-	}
-
-	const { id } = itemContext
-
-	return {
-		id,
-		name: fieldContext.name,
-		formItemId: `${id}-form-item`,
-		formDescriptionId: `${id}-form-item-description`,
-		formMessageId: `${id}-form-item-message`,
-		...fieldState,
-	}
-}
-
-type FormItemContextValue = {
-	id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
-
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => {
-		const id = React.useId()
-
-		return (
-			<FormItemContext.Provider value={{ id }}>
-				<div
-					ref={ref}
-					className={cn('space-y-2', className)}
-					{...props}
-				/>
-			</FormItemContext.Provider>
-		)
-	}
-)
-FormItem.displayName = 'FormItem'
-
-const FormLabel = React.forwardRef<
-	React.ElementRef<typeof LabelPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-	const { error, formItemId } = useFormField()
-
-	return (
-		<Label
-			ref={ref}
-			className={cn(error && 'text-destructive', className)}
-			htmlFor={formItemId}
-			{...props}
-		/>
-	)
-})
-FormLabel.displayName = 'FormLabel'
-
-const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
-	({ ...props }, ref) => {
-		const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-		return (
-			<Slot
-				ref={ref}
-				id={formItemId}
-				aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-				aria-invalid={!!error}
-				{...props}
-			/>
-		)
-	}
-)
-FormControl.displayName = 'FormControl'
-
-const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-	({ className, ...props }, ref) => {
-		const { formDescriptionId } = useFormField()
-
-		return (
-			<p
-				ref={ref}
-				id={formDescriptionId}
-				className={cn('text-[0.8rem] text-light', className)}
-				{...props}
-			/>
-		)
-	}
-)
-FormDescription.displayName = 'FormDescription'
-
-const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-	({ className, children, ...props }, ref) => {
-		const { error, formMessageId } = useFormField()
-		const body = error ? String(error?.message) : children
-
-		if (!body) {
-			return null
-		}
-
-		return (
-			<p
-				ref={ref}
-				id={formMessageId}
-				className={cn('text-[0.8rem] font-medium text-destructive', className)}
-				{...props}
-			>
-				{body}
-			</p>
-		)
-	}
-)
-FormMessage.displayName = 'FormMessage'
-
-export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }

package/src/Form/index.ts

@@ -1 +0,0 @@
-export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField } from './Form'

package/src/Input/InputMask.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react'
-import { IMaskInput } from 'react-imask'
-
-const inputClasses = 'form-input border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-sm focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed'
-
-const InputMask: React.FC = ({ ...props }) => {
-	return (
-		<IMaskInput
-			className={inputClasses}
-			{...props}
-		/>
-	)
-}
-
-export { InputMask }

package/src/Select/Select.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react'
-import { SelectBase } from './SelectBase'
-import {GroupBase, Props} from "react-select";
-
-type SelectBaseProps<
-	Option,
-	IsMulti extends boolean = false,
-	Group extends GroupBase<Option> = GroupBase<Option>
-> = Props<Option, IsMulti, Group>
-
-function Select<
-	Option,
-	IsMulti extends boolean = false,
-	Group extends GroupBase<Option> = GroupBase<Option>
->(props: SelectBaseProps<Option, IsMulti, Group>) {
-	return <SelectBase  {...props}/>
-}
-
-export { Select }

package/src/Select/SelectAccountCard.tsx

@@ -1,175 +0,0 @@
-import * as React from 'react'
-
-import { DropdownSmallOld, CheckSmall } from '../Icon'
-
-import Select, {
-	components,
-	ControlProps,
-	OptionProps,
-	DropdownIndicatorProps,
-	StylesConfig,
-	SingleValueProps,
-	MenuProps,
-	ValueContainerProps,
-	Props,
-	GroupBase,
-} from 'react-select'
-
-import { cn } from '../@/lib/utils'
-
-const selectTriggerClasses: string =
-	'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white cursor-pointer'
-
-const colourStyles: StylesConfig = {
-	control: () => ({}),
-	option: () => ({}),
-	input: () => ({}),
-	dropdownIndicator: () => ({}),
-	indicatorsContainer: () => ({}),
-	menu: () => ({}),
-	menuList: () => ({}),
-	singleValue: () => ({}),
-	valueContainer: () => ({}),
-}
-
-const Control = ({ children, ...props }: ControlProps) => {
-	const { isFocused } = props
-	return (
-		<components.Control
-			className={cn(
-				selectTriggerClasses,
-				{ 'outline outline-primary outline-offset-2 outline-2': isFocused }
-			)}
-			{...props}
-		>
-			{children}
-		</components.Control>
-	)
-}
-
-const optionClasses =
-	'flex items-center first:rounded-t-md last:rounded-b-md px-[12px] py-[16px] w-full cursor-default select-none outline-none'
-
-const Option = ({ children, ...props }: OptionProps) => {
-	const {
-		isSelected,
-		isFocused,
-		isDisabled,
-		// @ts-ignore
-		data: { label, account, balance, cur },
-	} = props
-	return (
-		<components.Option
-			className={cn(optionClasses, { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
-			{...props}
-		>
-			<span className="flex basis-0 grow">
-				<span>
-					<span>{label}</span>
-					<br />
-					<span className="text-[14px] text-light">{account}</span>
-				</span>
-				<span className="ml-auto shrink-0">
-					{balance}&nbsp;{cur}
-				</span>
-			</span>
-
-			<span className="ml-[16px] w-[24px] h-[24px] shrink-0">
-				{isSelected && (
-					<CheckSmall
-						width="24"
-						height="24"
-						className="text-primary"
-					/>
-				)}
-			</span>
-		</components.Option>
-	)
-}
-
-const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
-	return (
-		<components.DropdownIndicator
-			className="shrink-0"
-			{...props}
-		>
-			<DropdownSmallOld
-				className="text-white"
-				width="16"
-				height="16"
-			/>
-		</components.DropdownIndicator>
-	)
-}
-
-const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
-	return (
-		<components.ValueContainer
-			className="flex-1 grid"
-			{...props}
-		>
-			{children}
-		</components.ValueContainer>
-	)
-}
-
-const SingleValue = ({ children, ...props }: SingleValueProps) => {
-	// @ts-ignore
-	const { label, account, balance, cur } = props.data
-	return (
-		<components.SingleValue
-			className="col-start-1 col-end-3 row-start-1 row-end-2"
-			{...props}
-		>
-			<span className="block max-w-full text-[16px] truncate leading-[1.5]">
-				{label} <span className="opacity-75 text-[14px] leading-[1.42]">{account}</span>
-			</span>
-			<span className="block mt-[8px] font-medium text-[24px] leading-[1.333]">
-				{balance} {cur}
-			</span>
-		</components.SingleValue>
-	)
-}
-
-const Menu = ({ children, ...props }: MenuProps) => {
-	return (
-		<components.Menu
-			className="z-[1] absolute inset-x-0 bg-page shadow-md mt-[8px] rounded-md"
-			{...props}
-		>
-			{children}
-		</components.Menu>
-	)
-}
-
-type SelectAccountCardProps<
-	Option,
-	IsMulti extends boolean = false,
-	Group extends GroupBase<Option> = GroupBase<Option>
-> = Props<Option, IsMulti, Group>
-
-const SelectAccountCard = <
-	Option,
-	IsMulti extends boolean = false,
-	Group extends GroupBase<Option> = GroupBase<Option>
->(props: SelectAccountCardProps<Option, IsMulti, Group>) => {
-	return (
-		<Select
-			isSearchable={false}
-			components={{
-				Control,
-				Option,
-				SingleValue,
-				DropdownIndicator,
-				IndicatorSeparator: () => null,
-				Menu,
-				ValueContainer,
-			}}
-			styles={colourStyles}
-			unstyled={true}
-			{...props}
-		/>
-	)
-}
-
-export { SelectAccountCard }