@modul/mbui 0.0.28-beta-pv-53383-92c97483 → 0.0.28-beta-pv-53496-b92f050c

package/src/Select/SelectAccount.tsx

@@ -1,101 +0,0 @@
-import * as React from 'react'
-import { CheckSmall } from '../../src/Icon'
-import Select, { components, OptionProps, SingleValueProps, GroupBase, Props } from 'react-select'
-import { cn } from '../@/lib/utils'
-import {
-	colourStyles,
-	Control,
-	DropdownIndicator,
-	IndicatorsContainer,
-	Input,
-	LoadingIndicator,
-	Menu,
-	optionClasses,
-	Placeholder,
-	ValueContainer,
-} from './components'
-
-const Option = ({ children, ...props }: OptionProps) => {
-	const {
-		isSelected,
-		isFocused,
-		isDisabled,
-		// @ts-ignore
-		data: { label, account, balance, cur },
-	} = props
-	return (
-		<components.Option
-			className={cn(optionClasses, 'items-start', { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
-			{...props}
-		>
-			<span className="flex basis-0 grow">
-				<span>
-					<span className="text-[16px`] leading-[1.375]">{label}</span>
-					<br />
-					<span className="text-[12px] text-light">{account}</span>
-				</span>
-				<span className="ml-auto shrink-0">{cur}</span>
-			</span>
-
-			<span className="ml-[16px] shrink-0 size-[24px]">
-				{isSelected && (
-					<CheckSmall
-						width="24"
-						height="24"
-						className="text-primary"
-					/>
-				)}
-			</span>
-		</components.Option>
-	)
-}
-
-const SingleValue = ({ children, ...props }: SingleValueProps) => {
-	const {
-		// @ts-ignore
-		data: { account, cur },
-	} = props
-	return (
-		<components.SingleValue
-			className="col-start-1 col-end-3 row-start-1 row-end-2"
-			{...props}
-		>
-			{account} ({cur})
-		</components.SingleValue>
-	)
-}
-
-type SelectAccountProps<
-	Option,
-	IsMulti extends boolean = false,
-	Group extends GroupBase<Option> = GroupBase<Option>
-> = Props<Option, IsMulti, Group>
-
-function SelectAccount<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
-	props: SelectAccountProps<Option, IsMulti, Group>
-) {
-	return (
-		<Select
-			components={{
-				Control,
-				Option,
-				SingleValue,
-				DropdownIndicator,
-				IndicatorSeparator: () => null,
-				Menu,
-				ValueContainer,
-				Placeholder,
-				Input,
-				LoadingIndicator,
-				IndicatorsContainer,
-			}}
-			styles={colourStyles}
-			unstyled={true}
-			{...props}
-		/>
-	)
-}
-
-SelectAccount.displayName = 'SelectAccount'
-
-export { SelectAccount }

package/src/Select/SelectAccountCard.tsx

@@ -1,146 +0,0 @@
-import * as React from 'react'
-import { DropdownSmallOld, CheckSmall } from '../../src/Icon'
-import Select, {
-	components,
-	ControlProps,
-	OptionProps,
-	DropdownIndicatorProps,
-	SingleValueProps,
-	Props,
-	GroupBase,
-} from 'react-select'
-import { cn } from '../@/lib/utils'
-import { colourStyles, Menu, optionClasses, ValueContainer } from './components'
-
-const selectTriggerClasses: string = `
-	flex
-	items-center
-	py-[8px]
-	px-[16px]
-	min-h-[80px]
-	border-none
-	rounded-md
-	text-left
-	text-white
-	bg-gradient-to-r
-	from-[--cl-blue-3]
-	to-primary
-	shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)]
-	cursor-pointer
-`
-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 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] shrink-0 size-[24px]">
-				{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 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>
-	)
-}
-
-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 }

package/src/Select/SelectAsync.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react'
-import AsyncSelect from 'react-select/async'
-import { colourStyles, Control, DropdownIndicator, IndicatorsContainer, Input, LoadingIndicator, Menu, Option, Placeholder, SingleValue, ValueContainer } from './components'
-
-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,54 +0,0 @@
-import * as React from 'react'
-
-import Select, {
-	GroupBase,
-	Props,
-} from 'react-select'
-import {
-	colourStyles,
-	Control,
-	DropdownIndicator,
-	IndicatorsContainer,
-	Input,
-	LoadingIndicator,
-	Menu,
-	Placeholder,
-	SingleValue,
-	ValueContainer,
-	Option,
-} from './components'
-
-type SelectBaseProps<
-	Option,
-	IsMulti extends boolean = false,
-	Group extends GroupBase<Option> = GroupBase<Option>
-> = Props<Option, IsMulti, Group>
-
-function SelectBase<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
-	props: SelectBaseProps<Option, IsMulti, Group>
-) {
-	return (
-		<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/components/components.tsx

@@ -1,186 +0,0 @@
-import React from 'react'
-import {
-	components,
-	ControlProps,
-	OptionProps,
-	DropdownIndicatorProps,
-	StylesConfig,
-	SingleValueProps,
-	MenuProps,
-	PlaceholderProps,
-	ValueContainerProps,
-	InputProps,
-	LoadingIndicatorProps,
-	IndicatorsContainerProps,
-} from 'react-select'
-import { cn } from '../../@/lib/utils'
-import { CheckSmall, DropdownSmallOld } from '../../Icon'
-
-const Input = ({ ...props }: InputProps) => {
-	return (
-		<components.Input
-			className="col-start-1 col-end-3 row-start-1 row-end-2"
-			{...props}
-		/>
-	)
-}
-
-const selectTriggerClasses: string = `
-	flex
-	items-center
-	py-[12px]
-	px-[16px]
-	h-[44px]
-	text-left
-	border-[1px]
-	border-input
-	rounded-sm
-	cursor-pointer
-`
-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 colourStyles: StylesConfig = {
-	control: () => ({}),
-	option: () => ({}),
-	input: () => ({}),
-	dropdownIndicator: () => ({}),
-	indicatorsContainer: () => ({}),
-	menu: () => ({}),
-	menuList: () => ({}),
-	singleValue: () => ({}),
-	valueContainer: () => ({}),
-}
-
-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,
-				'items-start',
-				{ 'bg-light': isFocused },
-				{ 'opacity-50 pointer-events-none': isDisabled }
-			)}
-			{...props}
-		>
-			<span className="flex basis-0 grow">{children}</span>
-
-			<span className="ml-[16px] shrink-0 size-[24px]">
-				{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>
-	)
-}
-
-export {
-	Input,
-	Control,
-	colourStyles,
-	optionClasses,
-	Option,
-	IndicatorsContainer,
-	LoadingIndicator,
-	DropdownIndicator,
-	ValueContainer,
-	SingleValue,
-	Menu,
-	Placeholder,
-}

package/src/Select/components/index.tsx

@@ -1,15 +0,0 @@
-export {
-	Input,
-	Control,
-	colourStyles,
-	optionClasses,
-	Option,
-	IndicatorsContainer,
-	LoadingIndicator,
-	DropdownIndicator,
-	ValueContainer,
-	SingleValue,
-	Menu,
-	Placeholder,
-
-} from './components'

package/src/Select/index.ts

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

package/src/Skeleton/Skeleton.tsx

@@ -1,25 +0,0 @@
-import React, { FC, HTMLAttributes } from 'react'
-import { cn } from '../@/lib/utils'
-
-interface ISkeletonProps {
-	displayName: string
-	Item: typeof Item
-}
-
-const Skeleton: FC<HTMLAttributes<HTMLDivElement>> & ISkeletonProps = ({ className, children, ...props }) => {
-	return (
-		<div className={className} {...props} role="status">
-			{children}
-		</div>
-	)
-}
-
-const Item: FC<HTMLAttributes<HTMLDivElement>> = ({ className }) => (
-	<div className={cn('animate-pulse bg-[--skeleton-bg] rounded-sm', className)} />
-)
-Skeleton.displayName = 'Skeleton'
-
-Skeleton.Item = Item
-Skeleton.Item.displayName = 'Skeleton.Item'
-
-export { Skeleton }

package/src/Skeleton/index.ts

@@ -1 +0,0 @@
-export { Skeleton } from "./Skeleton";

package/src/Slider/Slider.tsx

@@ -1,38 +0,0 @@
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
-import cn from 'clsx'
-
-const sliderThumb = `
-	block
-	size-5
-	border-2
-	border-primary
-	bg-background
-	rounded-full
-	ring-offset-background
-	focus-visible:ring-2
-	focus-visible:ring-ring
-	focus-visible:ring-offset-2
-	focus-visible:outline-none
-	disabled:pointer-events-none
-	disabled:opacity-50
-	transition-colors
-`
-
-const Slider = React.forwardRef<
-	React.ElementRef<typeof SliderPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className = '', ...props }, ref) => (
-	<SliderPrimitive.Root
-		ref={ref}
-		className={cn('relative flex w-full touch-none select-none items-center', className)}
-		{...props}
-	>
-		<SliderPrimitive.Track className="relative bg-secondary rounded-full w-full h-2 overflow-hidden grow">
-			<SliderPrimitive.Range className="absolute bg-primary h-full" />
-		</SliderPrimitive.Track>
-		<SliderPrimitive.Thumb className={sliderThumb} />
-	</SliderPrimitive.Root>
-))
-
-export default Slider

package/src/Slider/index.ts

@@ -1,4 +0,0 @@
-import Slider from './Slider'
-
-export { Slider }
-export default Slider

package/src/Swipe2Show/Swipe2Show.tsx

@@ -1,71 +0,0 @@
-import React, { cloneElement, FC, useCallback, useEffect, useRef, useState } from 'react'
-import { useSwipeable } from 'react-swipeable'
-
-interface IProps extends React.PropsWithChildren {
-	contentToShowRight: React.ReactNode
-}
-
-const Swipe2Show: FC<IProps> = ({ children, contentToShowRight }) => {
-	const wrapperRef = useRef<HTMLDivElement>(null)
-	const actionRef = useRef<HTMLDivElement>(null)
-	const [showRight, setShowRight] = useState(false)
-	const translateX = actionRef.current?.offsetWidth
-
-	const handlers = useSwipeable({
-		onSwipedLeft: () => setShowRight(true),
-		onSwipedRight: () => setShowRight(false),
-		swipeDuration: 500,
-		preventScrollOnSwipe: true,
-		trackMouse: true,
-	})
-
-	const checkClickOutside = (evt) => {
-		if (showRight && wrapperRef.current && !wrapperRef.current.contains(evt.target)) {
-			setShowRight(false)
-		}
-	}
-
-	useEffect(() => {
-		document.addEventListener('mousedown', checkClickOutside)
-		document.addEventListener('touchstart', checkClickOutside)
-
-		return () => {
-			document.removeEventListener('mousedown', checkClickOutside)
-			document.removeEventListener('touchstart', checkClickOutside)
-		}
-	})
-
-	return (
-		<div
-			style={{ position: 'relative' }}
-			ref={wrapperRef}
-		>
-			{cloneElement(children as React.ReactElement<any>, {
-				style: {
-					position: 'relative',
-					transform: showRight && `translateX(-${translateX}px)`,
-					transition: 'transform .15s ease-in-out',
-					width: '100%',
-					zIndex: '1',
-					touchAction: 'pan-x',
-				},
-				...handlers,
-			})}
-			<div
-				ref={actionRef}
-				style={{
-					position: 'absolute',
-					top: '.5px',
-					right: '0',
-					bottom: '.5px',
-					opacity: `${showRight ? '1' : '0'}`,
-					transition: 'opacity .15s ease-in-out',
-				}}
-			>
-				{contentToShowRight}
-			</div>
-		</div>
-	)
-}
-
-export { Swipe2Show }

package/src/Swipe2Show/index.ts

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