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

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/Switch/Switch.tsx

@@ -1,13 +1,12 @@
-
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
-import { cn } from "../@/lib/utils"
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import { cn } from '../@/lib/utils'
 
 const rootClasses = `
 	inline-flex
 	items-center
-	w-[32px]
-	h-[18px]
+	w-[44px]
+	h-[24px]
 	bg-light 
 	shadow-sm
 	rounded-full
@@ -20,6 +19,7 @@ const rootClasses = `
 	disabled:cursor-not-allowed peer shrink-0
 	disabled:opacity-50
 	transition-colors cursor-pointer
+	[&+input]:hidden
 `
 const ThumbClasses = `
 	size-[18px]
@@ -37,22 +37,16 @@ const ThumbClasses = `
 `
 
 const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+	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>
+	<SwitchPrimitives.Root
+		className={cn(rootClasses, className)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb className={ThumbClasses} />
+	</SwitchPrimitives.Root>
 ))
 
 Switch.displayName = SwitchPrimitives.Root.displayName

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,