@modul/mbui 0.0.13-beta-pv-53036-07674e76 → 0.0.13

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,193 +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, 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

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

package/src/Switch/Switch.tsx

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

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

package/src/Textarea/Textarea.tsx

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

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