@modul/mbui 0.0.13 → 0.0.14-beta-pv-53036-7dcefc7f

package/src/Select/SelectAccountCard.tsx

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

package/src/Select/SelectAsync.tsx

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

@@ -0,0 +1,193 @@
+import * as React from 'react'
+
+import { DropdownSmallOld, CheckSmall } from '../Icon'
+
+import Select, {
+	components,
+	ControlProps,
+	OptionProps,
+	DropdownIndicatorProps,
+	StylesConfig,
+	SingleValueProps,
+	MenuProps,
+	PlaceholderProps,
+	ValueContainerProps,
+	InputProps,
+	LoadingIndicatorProps,
+	IndicatorsContainerProps, GroupBase, Props,
+} 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>
+	)
+}
+
+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/index.ts

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

package/src/Switch/Switch.tsx

@@ -0,0 +1,47 @@
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "../@/lib/utils"
+
+const rootClasses = `
+	inline-flex items-center bg-light 
+	data-[state=checked]:bg-primary data-[state=unchecked]:bg-input 
+	disabled:opacity-50 shadow-sm rounded-full
+	focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+	w-[32px] h-[18px]
+	transition-colors cursor-pointer
+	disabled:cursor-not-allowed peer shrink-0
+	focus-visible:outline-none
+`
+const ThumbClasses = `
+	border-2 border-input data-[state=checked]:border-primary
+	bg-page shadow-md rounded-full ring-0
+	w-[18px] h-[18px]
+	transition-transform
+	data-[state=checked]:translate-x-[14px] data-[state=unchecked]:translate-x-0
+	pointer-events-none
+`
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+	rootClasses,
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+	<span className=""></span>
+    <SwitchPrimitives.Thumb
+      className={ThumbClasses}
+    />
+  </SwitchPrimitives.Root>
+))
+
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/src/Switch/index.ts

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

package/src/Textarea/Textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "../@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 placeholder:text-light focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/Textarea/index.ts

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

package/src/assets/css/global.css

@@ -3,6 +3,26 @@
 @tailwind utilities;
 
 @layer base {
+    html,
+    body {
+        height: 100%;
+        min-height: 100%;
+        color: var(--text-base)
+    }
+
+    body {
+        margin: 0;
+        /* max-width: 640px; */
+        min-width: 320px;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    @supports (-webkit-touch-callout: none) {
+        html,
+        body {
+            height: -webkit-fill-available;
+        }
+    }
 
     @font-face {
         font-weight: 100 900;