@modul/mbui 0.0.13-beta-pv-53036-69a68bb4 → 0.0.13-beta-pv-53127-63b6a630

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,8 +0,0 @@
-import * as React from 'react'
-import { SelectBase } from './SelectBase'
-
-const Select: React.FC = (props) => {
-	return <SelectBase  {...props}/>
-}
-
-export { Select }

package/src/Select/SelectAccountCard.tsx

@@ -1,162 +0,0 @@
-import * as React from 'react'
-
-import { DropdownSmallOld, CheckSmall } from '../Icon'
-
-import Select, {
-	components,
-	ControlProps,
-	OptionProps,
-	DropdownIndicatorProps,
-	StylesConfig,
-	SingleValueProps,
-	MenuProps,
-	ValueContainerProps,
-} 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>
-	)
-}
-
-const SelectAccountCard = React.forwardRef<Select>(({ ...props }, ref) => (
-	<Select
-		isSearchable={false}
-		components={{
-			Control,
-			Option,
-			SingleValue,
-			DropdownIndicator,
-			IndicatorSeparator: () => null,
-			Menu,
-			ValueContainer,
-		}}
-		styles={colourStyles}
-		unstyled={true}
-		{...props}
-	/>
-))
-
-
-export { SelectAccountCard }

package/src/Select/SelectAsync.tsx

@@ -1,183 +0,0 @@
-import * as React from 'react'
-
-import { DropdownSmallOld, CheckSmall } from '../Icon'
-
-import {
-	components,
-	ControlProps,
-	OptionProps,
-	DropdownIndicatorProps,
-	StylesConfig,
-	SingleValueProps,
-	MenuProps,
-	PlaceholderProps,
-	ValueContainerProps,
-	InputProps,
-	LoadingIndicatorProps,
-	IndicatorsContainerProps,
-} from 'react-select'
-
-import AsyncSelect from 'react-select/async'
-
-import { cn } from '../@/lib/utils'
-
-const selectTriggerClasses: string =
-	'flex items-center border-[1px] border-input rounded-sm h-[44px] text-left px-[16px] py-[12px] cursor-pointer'
-
-const colourStyles: StylesConfig = {
-	control: () => ({}),
-	option: () => ({}),
-	input: () => ({}),
-	dropdownIndicator: () => ({}),
-	indicatorsContainer: () => ({}),
-	menu: () => ({}),
-	menuList: () => ({}),
-	singleValue: () => ({}),
-	valueContainer: () => ({}),
-}
-
-const Input = ({...props }: InputProps) => {
-	return <components.Input className='col-start-1 col-end-3 row-start-1 row-end-2' {...props} />
-}
-
-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-sm last:rounded-b-sm px-[16px] py-[12px] w-full cursor-default select-none outline-none'
-
-const Option = ({ children, ...props }: OptionProps) => {
-	const {
-		isSelected,
-		isFocused,
-		isDisabled,
-	} = props
-	return (
-		<components.Option
-			className={cn(optionClasses, { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
-			{...props}
-		>
-			<span className="flex basis-0 grow">{children}</span>
-
-			<span className="ml-[16px] w-[24px] h-[24px] shrink-0">
-				{isSelected && (
-					<CheckSmall
-						width="24"
-						height="24"
-						className="text-primary"
-					/>
-				)}
-			</span>
-		</components.Option>
-	)
-}
-
-const IndicatorsContainer = ({ children, ...props }: IndicatorsContainerProps) => {
-	return (
-		<components.IndicatorsContainer className='flex items-center gap-x-[8px] shrink-0' {...props}>
-			{children}
-		</components.IndicatorsContainer>
-	)
-}
-
-const LoadingIndicator = ({...props }: LoadingIndicatorProps) => {
-	return (
-		<components.LoadingIndicator
-			className='text-light shrink-0'
-			{...props}
-		/>
-	)
-}
-
-const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
-	return (
-		<components.DropdownIndicator
-			className="shrink-0"
-			{...props}
-		>
-			<DropdownSmallOld
-				className="text-light"
-				width="12"
-				height="12"
-			/>
-		</components.DropdownIndicator>
-	)
-}
-
-const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
-	return (
-		<components.ValueContainer
-			className="flex-1 grid"
-			{...props}
-		>
-			{children}
-		</components.ValueContainer>
-	)
-}
-
-const SingleValue = ({ children, ...props }: SingleValueProps) => {
-	return (
-		<components.SingleValue
-			className="col-start-1 col-end-3 row-start-1 row-end-2"
-			{...props}
-		>
-			{children}
-		</components.SingleValue>
-	)
-}
-
-const Menu = ({ children, ...props }: MenuProps) => {
-	return (
-		<components.Menu
-			className="z-[1] absolute inset-x-0 bg-page shadow-sm mt-[8px] rounded-sm"
-			{...props}
-		>
-			{children}
-		</components.Menu>
-	)
-}
-
-const Placeholder = ({ children, ...props }: PlaceholderProps) => {
-	return (
-		<components.Placeholder
-			className="col-start-1 col-end-3 row-start-1 row-end-2 text-[16px] text-light truncate"
-			{...props}
-		>
-			{children}
-		</components.Placeholder>
-	)
-}
-
-const SelectAsync = ({ ...props }) => (
-	<AsyncSelect
-		components={{
-			Control,
-			Option,
-			SingleValue,
-			DropdownIndicator,
-			IndicatorSeparator: () => null,
-			Menu,
-			ValueContainer,
-			Placeholder,
-			Input,
-			LoadingIndicator,
-			IndicatorsContainer
-		}}
-		styles={colourStyles}
-		unstyled={true}
-		{...props}
-	/>
-)
-
-SelectAsync.displayName = 'SelectAsync'
-
-export { SelectAsync }

package/src/Select/SelectBase.tsx

@@ -1,181 +0,0 @@
-import * as React from 'react'
-
-import { DropdownSmallOld, CheckSmall } from '../Icon'
-
-import Select, {
-	components,
-	ControlProps,
-	OptionProps,
-	DropdownIndicatorProps,
-	StylesConfig,
-	SingleValueProps,
-	MenuProps,
-	PlaceholderProps,
-	ValueContainerProps,
-	InputProps,
-	LoadingIndicatorProps,
-	IndicatorsContainerProps,
-} from 'react-select'
-
-import { cn } from '../@/lib/utils'
-
-const selectTriggerClasses: string =
-	'flex items-center border-[1px] border-input rounded-sm h-[44px] text-left px-[16px] py-[12px] cursor-pointer'
-
-const colourStyles: StylesConfig = {
-	control: () => ({}),
-	option: () => ({}),
-	input: () => ({}),
-	dropdownIndicator: () => ({}),
-	indicatorsContainer: () => ({}),
-	menu: () => ({}),
-	menuList: () => ({}),
-	singleValue: () => ({}),
-	valueContainer: () => ({}),
-}
-
-const Input = ({...props }: InputProps) => {
-	return <components.Input className='col-start-1 col-end-3 row-start-1 row-end-2' {...props} />
-}
-
-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-sm last:rounded-b-sm px-[16px] py-[12px] w-full cursor-default select-none outline-none'
-
-const Option = ({ children, ...props }: OptionProps) => {
-	const {
-		isSelected,
-		isFocused,
-		isDisabled,
-	} = props
-	return (
-		<components.Option
-			className={cn(optionClasses, { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
-			{...props}
-		>
-			<span className="flex basis-0 grow">{children}</span>
-
-			<span className="ml-[16px] w-[24px] h-[24px] shrink-0">
-				{isSelected && (
-					<CheckSmall
-						width="24"
-						height="24"
-						className="text-primary"
-					/>
-				)}
-			</span>
-		</components.Option>
-	)
-}
-
-const IndicatorsContainer = ({ children, ...props }: IndicatorsContainerProps) => {
-	return (
-		<components.IndicatorsContainer className='flex items-center gap-x-[8px] shrink-0' {...props}>
-			{children}
-		</components.IndicatorsContainer>
-	)
-}
-
-const LoadingIndicator = ({...props }: LoadingIndicatorProps) => {
-	return (
-		<components.LoadingIndicator
-			className='text-light shrink-0'
-			{...props}
-		/>
-	)
-}
-
-const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
-	return (
-		<components.DropdownIndicator
-			className="shrink-0"
-			{...props}
-		>
-			<DropdownSmallOld
-				className="text-light"
-				width="12"
-				height="12"
-			/>
-		</components.DropdownIndicator>
-	)
-}
-
-const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
-	return (
-		<components.ValueContainer
-			className="flex-1 grid"
-			{...props}
-		>
-			{children}
-		</components.ValueContainer>
-	)
-}
-
-const SingleValue = ({ children, ...props }: SingleValueProps) => {
-	return (
-		<components.SingleValue
-			className="col-start-1 col-end-3 row-start-1 row-end-2"
-			{...props}
-		>
-			{children}
-		</components.SingleValue>
-	)
-}
-
-const Menu = ({ children, ...props }: MenuProps) => {
-	return (
-		<components.Menu
-			className="z-[1] absolute inset-x-0 bg-page shadow-sm mt-[8px] rounded-sm"
-			{...props}
-		>
-			{children}
-		</components.Menu>
-	)
-}
-
-const Placeholder = ({ children, ...props }: PlaceholderProps) => {
-	return (
-		<components.Placeholder
-			className="col-start-1 col-end-3 row-start-1 row-end-2 text-[16px] text-light truncate"
-			{...props}
-		>
-			{children}
-		</components.Placeholder>
-	)
-}
-
-const SelectBase = (props) => (
-	<Select
-		components={{
-			Control,
-			Option,
-			SingleValue,
-			DropdownIndicator,
-			IndicatorSeparator: () => null,
-			Menu,
-			ValueContainer,
-			Placeholder,
-			Input,
-			LoadingIndicator,
-			IndicatorsContainer
-		}}
-		styles={colourStyles}
-		unstyled={true}
-		{...props}
-	/>
-)
-
-SelectBase.displayName = 'SelectBase'
-
-export { SelectBase }

package/src/Select/index.ts

@@ -1,4 +0,0 @@
-export { SelectAccountCard } from './SelectAccountCard'
-export { SelectAsync } from './SelectAsync'
-export { SelectBase } from './SelectBase'
-export { Select } from './Select'