@modul/mbui 0.0.16-beta-pv-53147-00d3e008 → 0.0.16-beta-pv-53139-88618ef5

package/src/Label/Label.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '@utils'
+import { cn } from '../@/lib/utils'
 
 const labelVariants = cva('peer-disabled:opacity-70 peer-disabled:cursor-not-allowed')
 

package/src/Page/Page.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { cn } from '@utils'
+import { cn } from '../@/lib/utils'
 
 type IProps = {
 	children?: React.ReactNode

package/src/Popover/Popover.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from 'clsx'
+import cn from 'classnames'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import {PopoverPortalProps, PopoverProps} from "@radix-ui/react-popover";
 
@@ -17,28 +17,6 @@ const PopoverPortal: React.FC<PopoverPortalProps> = ({ children, ...props }) =>
 	<PopoverPrimitive.Portal {...props}>{children}</PopoverPrimitive.Portal>
 )
 
-const popoverContentClasses = `
-	z-50
-	w-72
-	p-4
-	text-popover-foreground
-	bg-popover
-	border
-	rounded-md
-	shadow-md
-	outline-none
-	data-[state=open]:animate-in
-	data-[state=closed]:animate-out
-	data-[state=closed]:fade-out-0
-	data-[state=open]:fade-in-0
-	data-[state=closed]:zoom-out-95
-	data-[state=open]:zoom-in-95
-	data-[side=bottom]:slide-in-from-top-2
-	data-[side=left]:slide-in-from-right-2
-	data-[side=right]:slide-in-from-left-2
-	data-[side=top]:slide-in-from-bottom-2
-`
-
 const PopoverContent = React.forwardRef<
 	React.ElementRef<typeof PopoverPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -48,7 +26,7 @@ const PopoverContent = React.forwardRef<
 		align={align}
 		sideOffset={sideOffset}
 		className={cn(
-			popoverContentClasses,
+			'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
 			className
 		)}
 		{...props}

package/src/Progress/Progress.tsx

@@ -1,15 +1,7 @@
 import * as React from 'react'
 import * as ProgressPrimitive from '@radix-ui/react-progress'
-import { cn } from '@utils'
 
-const progessClasses = `
-	relative
-	w-full
-	h-[--progress-height]
-	bg-[--progress-bg]
-	rounded-full
-	overflow-hidden
-`
+import { cn } from '../@/lib/utils'
 
 const Progress = React.forwardRef<
 	React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -17,11 +9,11 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
 	<ProgressPrimitive.Root
 		ref={ref}
-		className={cn(progessClasses, className)}
+		className={cn('relative h-[--progress-height] w-full overflow-hidden rounded-full bg-[--progress-bg]', className)}
 		{...props}
 	>
 		<ProgressPrimitive.Indicator
-			className="bg-primary rounded-full transition-all size-full"
+			className="bg-primary rounded-full w-full h-full transition-all"
 			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 		/>
 	</ProgressPrimitive.Root>

package/src/Select/Select.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { SelectBase } from './SelectBase'
-import { GroupBase, Props } from "react-select";
+import {GroupBase, Props} from "react-select";
 
 type SelectBaseProps<
 	Option,

package/src/Select/SelectAccountCard.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
-import { DropdownSmallOld, CheckSmall } from '@/Icon'
+
+import { DropdownSmallOld, CheckSmall } from '../Icon'
+
 import Select, {
 	components,
 	ControlProps,
@@ -12,24 +14,11 @@ import Select, {
 	Props,
 	GroupBase,
 } from 'react-select'
-import { cn } from '@utils'
-
-const selectTriggerClasses: string = `
-	flex
-	items-center
-	py-[8px]
-	px-[16px]
-	min-h-[80px]
-	border-none
-	rounded-md
-	text-left
-	text-white
-	bg-gradient-to-r
-	from-[--cl-blue-3]
-	to-primary
-	shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)]
-	cursor-pointer
-`
+
+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 cursor-pointer'
 
 const colourStyles: StylesConfig = {
 	control: () => ({}),
@@ -58,18 +47,8 @@ const Control = ({ children, ...props }: ControlProps) => {
 	)
 }
 
-const optionClasses = `
-	flex
-	items-center
-	py-[16px]
-	px-[12px]
-	w-full
-	first:rounded-t-md
-	last:rounded-b-md
-	cursor-default
-	select-none
-	outline-none
-`
+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) => {
 	const {
@@ -95,7 +74,7 @@ const Option = ({ children, ...props }: OptionProps) => {
 				</span>
 			</span>
 
-			<span className="ml-[16px] shrink-0 size-[24px]">
+			<span className="ml-[16px] w-[24px] h-[24px] shrink-0">
 				{isSelected && (
 					<CheckSmall
 						width="24"

package/src/Select/SelectAsync.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
-import { DropdownSmallOld, CheckSmall } from '@/Icon'
+
+import { DropdownSmallOld, CheckSmall } from '../Icon'
+
 import {
 	components,
 	ControlProps,
@@ -14,21 +16,13 @@ import {
 	LoadingIndicatorProps,
 	IndicatorsContainerProps,
 } from 'react-select'
+
 import AsyncSelect from 'react-select/async'
-import { cn } from '@utils'
-
-const selectTriggerClasses: string = `
-	flex
-	items-center
-	py-[12px]
-	px-[16px]
-	h-[44px]
-	border-[1px]
-	border-input
-	rounded-sm
-	text-left
-	cursor-pointer
-`
+
+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: () => ({}),
@@ -74,7 +68,7 @@ const Option = ({ children, ...props }: OptionProps) => {
 		>
 			<span className="flex basis-0 grow">{children}</span>
 
-			<span className="ml-[16px] shrink-0 size-[24px]">
+			<span className="ml-[16px] w-[24px] h-[24px] shrink-0">
 				{isSelected && (
 					<CheckSmall
 						width="24"

package/src/Select/SelectBase.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { DropdownSmallOld, CheckSmall } from '@/Icon'
+import { DropdownSmallOld, CheckSmall } from '../Icon'
 
 import Select, {
 	components,
@@ -17,20 +17,10 @@ import Select, {
 	IndicatorsContainerProps, GroupBase, Props,
 } from 'react-select'
 
-import { cn } from '@utils'
-
-const selectTriggerClasses: string = `
-	flex
-	items-center
-	py-[12px]
-	px-[16px]
-	h-[44px]
-	text-left
-	border-[1px]
-	border-input
-	rounded-sm
-	cursor-pointer
-`
+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: () => ({}),
@@ -76,7 +66,7 @@ const Option = ({ children, ...props }: OptionProps) => {
 		>
 			<span className="flex basis-0 grow">{children}</span>
 
-			<span className="ml-[16px] shrink-0 size-[24px]">
+			<span className="ml-[16px] w-[24px] h-[24px] shrink-0">
 				{isSelected && (
 					<CheckSmall
 						width="24"

package/src/Slider/Slider.tsx

@@ -1,23 +1,6 @@
 import * as React from 'react'
 import * as SliderPrimitive from '@radix-ui/react-slider'
-import cn from 'clsx'
-
-const sliderThumb = `
-	block
-	size-5
-	border-2
-	border-primary
-	bg-background
-	rounded-full
-	ring-offset-background
-	focus-visible:ring-2
-	focus-visible:ring-ring
-	focus-visible:ring-offset-2
-	focus-visible:outline-none
-	disabled:pointer-events-none
-	disabled:opacity-50
-	transition-colors
-`
+import cn from 'classnames'
 
 const Slider = React.forwardRef<
 	React.ElementRef<typeof SliderPrimitive.Root>,
@@ -28,10 +11,10 @@ const Slider = React.forwardRef<
 		className={cn('relative flex w-full touch-none select-none items-center', className)}
 		{...props}
 	>
-		<SliderPrimitive.Track className="relative bg-secondary rounded-full w-full h-2 overflow-hidden grow">
-			<SliderPrimitive.Range className="absolute bg-primary h-full" />
+		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+			<SliderPrimitive.Range className="absolute h-full bg-primary" />
 		</SliderPrimitive.Track>
-		<SliderPrimitive.Thumb className={sliderThumb} />
+		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
 	</SliderPrimitive.Root>
 ))
 

package/src/Switch/Switch.tsx

@@ -1,38 +1,25 @@
 
 import * as React from "react"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
-import { cn } from "@utils"
+
+import { cn } from "../@/lib/utils"
 
 const rootClasses = `
-	inline-flex
-	items-center
-	w-[32px]
-	h-[18px]
-	bg-light 
-	shadow-sm
-	rounded-full
-	focus-visible:ring-2
-	focus-visible:ring-ring
-	focus-visible:ring-offset-2
-	focus-visible:outline-none
-	data-[state=checked]:bg-primary
-	data-[state=unchecked]:bg-input
-	disabled:cursor-not-allowed peer shrink-0
-	disabled:opacity-50
+	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 = `
-	size-[18px]
-	border-2
-	border-input
-	bg-page
-	shadow-md
-	rounded-full
-	ring-0
-	data-[state=checked]:border-primary
-	data-[state=checked]:translate-x-[14px]
-	data-[state=unchecked]:translate-x-0
+	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
 `
 

package/src/Tabs/Tabs.tsx

@@ -11,15 +11,6 @@ type TabsComponents = {
 
 const Tabs: React.FC<TabsProps> & TabsComponents = ({ ...props }) => <TabsPrimitive.Root {...props} />
 
-const tabListClasses = `
-	inline-flex
-	bg-[--tabs-bg]
-	p-[1px]
-	rounded-[--tabs-round]
-	data-[orientation=horizontal]:h-[--tabs-height]
-	data-[orientation=vertical]:flex-col
-`
-
 const TabsList = React.forwardRef<
 	React.ElementRef<typeof TabsPrimitive.List>,
 	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
@@ -27,7 +18,7 @@ const TabsList = React.forwardRef<
 	<TabsPrimitive.List
 		ref={ref}
 		className={cn(
-			tabListClasses,
+			'inline-flex bg-[--tabs-bg] p-[1px] rounded-[--tabs-round] data-[orientation=horizontal]:h-[--tabs-height] data-[orientation=vertical]:flex-col',
 			className
 		)}
 		{...props}
@@ -35,33 +26,18 @@ const TabsList = React.forwardRef<
 ))
 
 const triggerClasses = `
-	flex-1
-	shrink-0
-	ring-offset-background
-	h-[--tab-height]
-	text-center
-	text-[12px]
-	leading-[1.16]
-	truncate
-	border
-	border-transparent
-	rounded-sm
-	motion-reduce:hover:transform-none
-	motion-reduce:transition-none
-	focus-visible:outline-none
-	focus-visible:ring-2 
-	focus-visible:ring-ring
-	focus-visible:ring-offset-2 
+	flex-1 shrink-0
 	data-[state=active]:border-[--tab-border] 
 	data-[state=active]:bg-[--tab-bg] 
 	data-[state=active]:shadow-sm px-[8px] 
 	data-[orientation=vertical]:basis-auto 
 	data-[state=inactive]:text-dark 
-	disabled:pointer-events-none
-	transition-all
-	overflow-hidden
-	whitespace-nowrap
-`
+	border border-transparent rounded-sm focus-visible:ring-2 
+	focus-visible:ring-ring ring-offset-background focus-visible:ring-offset-2 
+	h-[--tab-height] text-[12px] text-center truncate 
+	leading-[1.16] whitespace-nowrap motion-reduce:hover:transform-none
+	transition-all motion-reduce:transition-none overflow-hidden
+	focus-visible:outline-none disabled:pointer-events-none`
 
 const TabsTrigger = React.forwardRef<
 	React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -74,14 +50,6 @@ const TabsTrigger = React.forwardRef<
 	/>
 ))
 
-const tabsContentClasses = `
-	ring-offset-background
-	focus-visible:outline-none
-	focus-visible:ring-2
-	focus-visible:ring-ring
-	focus-visible:ring-offset-2
-`
-
 const TabsContent = React.forwardRef<
 	React.ElementRef<typeof TabsPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
@@ -89,7 +57,7 @@ const TabsContent = React.forwardRef<
 	<TabsPrimitive.Content
 		ref={ref}
 		className={cn(
-			tabsContentClasses,
+			'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
 			className
 		)}
 		{...props}

package/src/Textarea/Textarea.tsx

@@ -1,35 +1,24 @@
-import * as React from 'react'
-import { cn } from '@utils'
+import * as React from "react"
 
-const textAreaClasses = `
-	flex
-	py-2
-	px-3
-	min-h-[60px]
-	w-full
-	border
-	border-input
-	rounded-md
-	bg-transparent
-	placeholder:text-light
-	focus-visible:outline-none
-	focus-visible:ring-1 
-	focus-visible:ring-ring
-	disabled:cursor-not-allowed
-	disabled:opacity-50
-`
+import { cn } from "../@/lib/utils"
 
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
-	return (
-		<textarea
-			className={cn(textAreaClasses, className)}
-			ref={ref}
-			{...props}
-		/>
-	)
-})
-Textarea.displayName = 'Textarea'
+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/assets/css/global.css

@@ -84,15 +84,6 @@
         --cl-yellow-6: #fae6aa;
         --cl-yellow-7: #fcf2ce;
 
-        /* Оранжевый */
-        --cl-orange-1: #C33918;
-        --cl-orange-2: #E35F19;
-        --cl-orange-3: #F27922;
-        --cl-orange-4: #F99631;
-        --cl-orange-5: #FBB26A;
-        --cl-orange-6: #FDCF93;
-        --cl-orange-7: #FFE8C4;
-
         /* Красный */
         --cl-red-1: #a61d1d;
         --cl-red-2: #bd2c2c;
@@ -111,9 +102,9 @@
         --dark: var(--cl-graphite-2);
         --disabled: var(--cl-graphite-4);
         --bg-light: var(--cl-graphite-7);
-        --warning: var(--cl-orange-2);
+        --warning: var(--cl-yellow-2);
         --warning-light: var(--cl-yellow-7);
-        --critical: var(--cl-red-3);
+        --critical: var(--cl-red-2);
         --critical-light: var(--cl-red-7);
         /* --text-quaternary:; */
 
@@ -156,6 +147,9 @@
         --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);
         /* =========================================== */
         /* ЦВЕТ КНОПОК */
         
@@ -205,6 +199,7 @@
         /* =========================================== */
         /* DRAWER */
 
+
     }
 
 

package/src/index.ts

@@ -19,7 +19,7 @@ import {
 	AccountCollapsibleContent,
 	AccountCollapsibleContentItem,
 } from './Collapsible'
-import { Button } from './Button'
+import { Button, buttonVariants } from './Button'
 import { Audio } from './Audio'
 import { cn } from './@/lib/utils'
 import { Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent } from './Drawer'
@@ -35,7 +35,7 @@ import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, For
 import { Calendar } from './Calendar'
 import { DatePicker } from './DatePicker'
 import { Select } from './Select'
-import { Progress } from "./Progress"
+import { Progress } from './Progress'
 import {
 	AlertDialog,
 	AlertDialogTrigger,
@@ -47,6 +47,8 @@ import {
 	AlertDialogAction,
 	AlertDialogCancel,
 } from './AlertDialog'
+import { Badge, badgeVariants } from './Badge'
+import { Checkbox } from './Checkbox'
 
 export {
 	Tooltip,
@@ -67,6 +69,7 @@ export {
 	AccountCollapsibleContent,
 	AccountCollapsibleContentItem,
 	Button,
+	buttonVariants,
 	InputField,
 	InputLabel,
 	Audio,
@@ -110,4 +113,7 @@ export {
 	AlertDialogDescription,
 	AlertDialogAction,
 	AlertDialogCancel,
-}
+	Badge,
+	badgeVariants,
+	Checkbox
+}