@modul/mbui 0.0.11 → 0.0.12-beta-pv-53036-82db3f95

package/dist/Info/Info.js

@@ -6,7 +6,7 @@ const React = (0, tslib_1.__importStar)(require("react"));
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../@/lib/utils");
 // import { cn } from "@/lib/utils" порешать с алиасами
-const infoVariants = (0, class_variance_authority_1.cva)('px-[16px] py-[12px] rounded-1 text-[14px]', {
+const infoVariants = (0, class_variance_authority_1.cva)('px-[16px] py-[12px] rounded-sm text-[14px]', {
     variants: {
         variant: {
             light: 'bg-[--cl-graphite-7]',

package/dist/Info/Info.js.map

@@ -1 +1 @@
-{"version":3,"file":"Info.js","sourceRoot":"","sources":["../../src/Info/Info.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,uEAAiE;AAEjE,0CAAmC;AACnC,uDAAuD;AAEvD,MAAM,YAAY,GAAG,IAAA,8BAAG,EAAC,2CAA2C,EAAE;IACrE,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,KAAK,EAAE,sBAAsB;YAC7B,OAAO,EAAE,kBAAkB;YAC3B,OAAO,EAAE,kBAAkB;YAC3B,QAAQ,EAAE,wBAAwB;SAClC;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,OAAO;KAChB;CACD,CAAC,CAAA;AAMF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzG,OAAO,CACN,6BACC,SAAS,EAAE,IAAA,UAAE,EAAC,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KAC/C,KAAK,IAER,QAAQ,CACJ,CACN,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,oBAAI;AAFb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}
+{"version":3,"file":"Info.js","sourceRoot":"","sources":["../../src/Info/Info.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,uEAAiE;AAEjE,0CAAmC;AACnC,uDAAuD;AAEvD,MAAM,YAAY,GAAG,IAAA,8BAAG,EAAC,4CAA4C,EAAE;IACtE,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,KAAK,EAAE,sBAAsB;YAC7B,OAAO,EAAE,kBAAkB;YAC3B,OAAO,EAAE,kBAAkB;YAC3B,QAAQ,EAAE,wBAAwB;SAClC;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,OAAO;KAChB;CACD,CAAC,CAAA;AAMF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzG,OAAO,CACN,6BACC,SAAS,EAAE,IAAA,UAAE,EAAC,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KAC/C,KAAK,IAER,QAAQ,CACJ,CACN,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,oBAAI;AAFb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}

package/dist/Input/Input.js

@@ -10,7 +10,7 @@ const InputLabel = React.forwardRef(({ className, children, ...props }) => {
 exports.InputLabel = InputLabel;
 InputLabel.displayName = 'InputLabel';
 const InputField = React.forwardRef(({ className, type, ...props }, ref) => {
-    return (React.createElement("input", { type: type, className: (0, utils_1.cn)('border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-1 focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed', className), ref: ref, ...props }));
+    return (React.createElement("input", { type: type, className: (0, utils_1.cn)('border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-sm focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed', className), ref: ref, ...props }));
 });
 exports.InputField = InputField;
 InputField.displayName = 'InputField';

package/dist/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,0CAAmC;AAEnC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrC,OAAO,CACN,+BACC,SAAS,EAAE,IAAA,UAAE,EAAC,0GAA0G,EAAE,SAAS,CAAC,KAChI,KAAK,IAER,QAAQ,CACF,CACR,CAAA;AACF,CAAC,CACD,CAAA;AAoBoB,gCAAU;AAlB/B,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAgE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzI,OAAO,CACN,+BACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,UAAE,EACZ,qUAAqU,EACrU,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,gCAAU;AAFnB,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,0CAAmC;AAEnC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrC,OAAO,CACN,+BACC,SAAS,EAAE,IAAA,UAAE,EAAC,0GAA0G,EAAE,SAAS,CAAC,KAChI,KAAK,IAER,QAAQ,CACF,CACR,CAAA;AACF,CAAC,CACD,CAAA;AAoBoB,gCAAU;AAlB/B,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAgE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzI,OAAO,CACN,+BACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,UAAE,EACZ,sUAAsU,EACtU,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,gCAAU;AAFnB,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.11",
+  "version": "0.0.12-beta-pv-53036-82db3f95",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -39,6 +39,7 @@
     "lodash": "4.17.5",
     "react-datepicker": "4.16.0",
     "react-imask": "7.1.3",
+    "react-select": "5.8.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",

package/src/@/config/index.ts

@@ -43,6 +43,7 @@ export default {
 			},
 			backgroundColor: {
 				page: 'var(--page-bg)',
+				light: 'var(--bg-light)',
 				...button.backgroundColor,
 				...label.backgroundColor
 			},
@@ -57,7 +58,8 @@ export default {
 				...button.borderColor
 			},
 			borderRadius: {
-				'1': 'var(--border-radius-1)',
+				'sm': 'var(--border-radius-sm)',
+				'md': 'var(--border-radius-md)',
 			},
 			keyframes: {
 				'accordion-down': {

package/src/Info/Info.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../@/lib/utils'
 // import { cn } from "@/lib/utils" порешать с алиасами
 
-const infoVariants = cva('px-[16px] py-[12px] rounded-1 text-[14px]', {
+const infoVariants = cva('px-[16px] py-[12px] rounded-sm text-[14px]', {
 	variants: {
 		variant: {
 			light: 'bg-[--cl-graphite-7]',

package/src/Input/Input.tsx

@@ -21,7 +21,7 @@ const InputField = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<
 		<input
 			type={type}
 			className={cn(
-				'border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-1 focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed',
+				'border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-sm focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed',
 				className
 			)}
 			ref={ref}

package/src/Select/SelectAccountCard.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react'
+
+import { DropdownSmallOld, CheckSmall } from '../Icon'
+
+import Select, {
+	components,
+	ControlProps,
+	OptionProps,
+	DropdownIndicatorProps,
+	StylesConfig,
+	SingleValueProps,
+	MenuProps,
+	ValueContainerProps,
+} 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'
+
+const colourStyles: StylesConfig = {
+	control: () => ({}),
+	option: () => ({}),
+	input: () => ({}),
+	dropdownIndicator: () => ({}),
+	indicatorsContainer: () => ({}),
+	menu: () => ({}),
+	menuList: () => ({}),
+	singleValue: () => ({}),
+	valueContainer: () => ({}),
+}
+
+const Control = ({ children, ...props }: ControlProps) => {
+	const style = { cursor: 'pointer' }
+	return (
+		<components.Control
+			className={selectTriggerClasses}
+			{...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) => {
+	console.log({ ...props })
+	const {
+		isSelected,
+		isFocused,
+		isDisabled,
+		data : { label, account, balance, cur },
+	} = props
+	const style = { cursor: 'pointer' }
+	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="bg-page drop-shadow-1 mt-[8px] rounded-md"
+			{...props}
+		>
+			{children}
+		</components.Menu>
+	)
+}
+
+const SelectAccountCard = React.forwardRef<Select, { className: string | undefined }>(({ className, ...props }, ref) => (
+	<Select
+		className={cn(className)}
+		classNamePrefix="super"
+		isDisabled={false}
+		isSearchable={false}
+		components={{
+			Control,
+			Option,
+			SingleValue,
+			DropdownIndicator,
+			IndicatorSeparator: () => null,
+			Menu,
+			ValueContainer,
+		}}
+		styles={colourStyles}
+		unstyled={true}
+		{...props}
+	/>
+))
+
+export { SelectAccountCard }

package/src/Select/index.ts

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

package/src/assets/css/global.css

@@ -73,7 +73,7 @@
         --cl-red-6: #f9c1bd;
         --cl-red-7: #ffe9e9;
 
-        --text-base: var(--cl-graphite-1);
+        --base: var(--cl-graphite-1);
         --primary: var(--cl-blue-2);
         --primary-light: var(--cl-blue-7);
         --success: var(--cl-green-3);
@@ -81,6 +81,7 @@
         --light: var(--cl-graphite-3);
         --dark: var(--cl-graphite-2);
         --disabled: var(--cl-graphite-4);
+        --bg-light: var(--cl-graphite-7);
         --warning: var(--cl-yellow-2);
         --warning-light: var(--cl-yellow-7);
         --critical: var(--cl-red-4);
@@ -89,6 +90,7 @@
 
         --page-bg: var(--cl-white);
 
+
         /* ЦВЕТ КНОПОК */
         /* =========================================== */
         --btn-primary: var(--cl-white);
@@ -130,6 +132,7 @@
         
         /* ЦВЕТ ПОЛЯ ВВОДА */
         /* =========================================== */
+
         
         /* =========================================== */
         /* ЦВЕТ ПОЛЯ ВВОДА */
@@ -138,7 +141,8 @@
         /* BORDER */
         /* =========================================== */
         --border-color: var(--cl-graphite-5);
-        --border-radius-1: 8px;
+        --border-radius-sm: 4px;
+        --border-radius-md: 8px;
         /* =========================================== */
         /* BORDER */