@modul/mbui 0.0.20-beta-test-30add321 → 0.0.20-beta-pv-52992-d5155aa6

package/src/Select/SelectAsync.tsx

@@ -1,167 +1,6 @@
 import * as React from 'react'
-import { DropdownSmallOld, CheckSmall } from '../../src/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
-	py-[12px]
-	px-[16px]
-	h-[44px]
-	border-[1px]
-	border-input
-	rounded-sm
-	text-left
-	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] 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>
-	)
-}
+import { colourStyles, Control, DropdownIndicator, IndicatorsContainer, Input, LoadingIndicator, Menu, Option, Placeholder, SingleValue, ValueContainer } from './components'
 
 const SelectAsync = ({ ...props }) => (
 	<AsyncSelect

package/src/Select/SelectBase.tsx

@@ -1,169 +1,22 @@
 import * as React from 'react'
 
-import { DropdownSmallOld, CheckSmall } from '../../src/Icon'
-
 import Select, {
-	components,
-	ControlProps,
-	OptionProps,
-	DropdownIndicatorProps,
-	StylesConfig,
-	SingleValueProps,
-	MenuProps,
-	PlaceholderProps,
-	ValueContainerProps,
-	InputProps,
-	LoadingIndicatorProps,
-	IndicatorsContainerProps, GroupBase, Props,
+	GroupBase,
+	Props,
 } from 'react-select'
-
-import { cn } from '../@/lib/utils'
-
-const selectTriggerClasses: string = `
-	flex
-	items-center
-	py-[12px]
-	px-[16px]
-	h-[44px]
-	text-left
-	border-[1px]
-	border-input
-	rounded-sm
-	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] 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>
-	)
-}
+import {
+	colourStyles,
+	Control,
+	DropdownIndicator,
+	IndicatorsContainer,
+	Input,
+	LoadingIndicator,
+	Menu,
+	Placeholder,
+	SingleValue,
+	ValueContainer,
+	Option,
+} from './components'
 
 type SelectBaseProps<
 	Option,
@@ -171,11 +24,9 @@ type SelectBaseProps<
 	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>) {
+function SelectBase<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
+	props: SelectBaseProps<Option, IsMulti, Group>
+) {
 	return (
 		<Select
 			components={{
@@ -189,7 +40,7 @@ function SelectBase<
 				Placeholder,
 				Input,
 				LoadingIndicator,
-				IndicatorsContainer
+				IndicatorsContainer,
 			}}
 			styles={colourStyles}
 			unstyled={true}

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/assets/css/global.css

@@ -92,7 +92,7 @@
         --bg-light: var(--cl-graphite-7);
         --warning: var(--cl-orange-2);
         --warning-light: var(--cl-yellow-7);
-        --critical: var(--cl-red-2);
+        --critical: var(--cl-red-3);
         --critical-light: var(--cl-red-7);
         /* --text-quaternary:; */
 
@@ -134,9 +134,6 @@
         --btn-txt-primary-hover: var(--cl-blue-3);
         --btn-txt-primary-focus: var(--cl-blue-3);
         --btn-txt-primary-active: var(--cl-blue-1);
-
-        --btn-widget-bg:var(--page-bg);
-        --btn-widget-icon:var(--primary);
         /* =========================================== */
         /* ЦВЕТ КНОПОК */
         

package/src/index.ts

@@ -19,10 +19,10 @@ import {
 	AccountCollapsibleContent,
 	AccountCollapsibleContentItem,
 } from './Collapsible'
-import { Button, buttonVariants, ButtonWidget } from './Button'
+import { Button, ButtonWidget } from './Button'
 import { Audio } from './Audio'
 import { cn } from './@/lib/utils'
-import { Drawer, DrawerTrigger, DrawerClose, DrawerContent } from './Drawer'
+import { Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent } from './Drawer'
 import { Page } from './Page'
 import { Chip } from './Chip'
 import { InputField, InputLabel, InputMask } from './Input'
@@ -30,12 +30,12 @@ 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 { Progress } from "./Progress"
 import {
 	AlertDialog,
 	AlertDialogTrigger,
@@ -50,8 +50,6 @@ import {
 import { MessageTyping } from "./Chat"
 import { FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses } from './FavoritePyments'
 import { DigitKeyPad } from "./DigitKeyPad"
-import { Badge, badgeVariants } from './Badge'
-import { Checkbox } from './Checkbox'
 
 
 export {
@@ -73,7 +71,6 @@ export {
 	AccountCollapsibleContent,
 	AccountCollapsibleContentItem,
 	Button,
-	buttonVariants,
 	InputField,
 	InputLabel,
 	Audio,
@@ -81,7 +78,7 @@ export {
 	Icon,
 	Drawer,
 	DrawerTrigger,
-	// DrawerTitle,
+	DrawerTitle,
 	DrawerClose,
 	DrawerContent,
 	BottomNavigation,
@@ -96,6 +93,9 @@ export {
 	Label,
 	Textarea,
 	SelectAccountCard,
+	SelectAccount,
+	SelectAsync,
+	Select,
 	Form,
 	FormLabel,
 	FormField,
@@ -105,9 +105,7 @@ export {
 	FormMessage,
 	Calendar,
 	DatePicker,
-	SelectAsync,
 	InputMask,
-	Select,
 	AlertDialog,
 	AlertDialogTrigger,
 	AlertDialogContent,
@@ -121,10 +119,7 @@ export {
 	FavoritePaymentsList,
 	FavoritePaymentsItem,
 	FarvoritePaymentDescription,
-	Badge,
-	badgeVariants,
-	Checkbox,
 	farvoriteLinkClasses,
 	DigitKeyPad,
 	ButtonWidget,
-}
+}

package/dist/Badge/Badge.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { type VariantProps } from 'class-variance-authority';
-declare const badgeVariants: (props?: {
-    variant?: "default";
-    size?: "default" | "dot";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
-}
-declare function Badge({ className, variant, size, ...props }: BadgeProps): React.JSX.Element;
-export { Badge, badgeVariants };