@modul/mbui 0.0.20-beta-pv-53154-4403aebc → 0.0.21

package/src/Select/components/components.tsx

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

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

package/src/Select/index.ts

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

package/src/index.ts

@@ -30,11 +30,10 @@ import { Alert } from './Alert'
 import { Switch } from './Switch'
 import { Label } from './Label'
 import { Textarea } from './Textarea'
-import { SelectAccountCard, SelectAsync } from './Select'
+import { SelectAccountCard, SelectAsync, SelectAccount, Select } from './Select'
 import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage } from './Form'
 import { Calendar } from './Calendar'
 import { DatePicker } from './DatePicker'
-import { Select } from './Select'
 import { Progress } from './Progress'
 import {
 	AlertDialog,
@@ -95,6 +94,9 @@ export {
 	Label,
 	Textarea,
 	SelectAccountCard,
+	SelectAccount,
+	SelectAsync,
+	Select,
 	Form,
 	FormLabel,
 	FormField,
@@ -104,9 +106,7 @@ export {
 	FormMessage,
 	Calendar,
 	DatePicker,
-	SelectAsync,
 	InputMask,
-	Select,
 	AlertDialog,
 	AlertDialogTrigger,
 	AlertDialogContent,