@modul/mbui 0.0.16-beta-pv-53139-f8011ffd → 0.0.16

package/src/Slider/Slider.tsx

@@ -1,6 +1,23 @@
 import * as React from 'react'
 import * as SliderPrimitive from '@radix-ui/react-slider'
-import cn from 'classnames'
+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
+`
 
 const Slider = React.forwardRef<
 	React.ElementRef<typeof SliderPrimitive.Root>,
@@ -11,10 +28,10 @@ const Slider = React.forwardRef<
 		className={cn('relative flex w-full touch-none select-none items-center', className)}
 		{...props}
 	>
-		<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 className="relative bg-secondary rounded-full w-full h-2 overflow-hidden grow">
+			<SliderPrimitive.Range className="absolute bg-primary h-full" />
 		</SliderPrimitive.Track>
-		<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.Thumb className={sliderThumb} />
 	</SliderPrimitive.Root>
 ))
 

package/src/Switch/Switch.tsx

@@ -1,25 +1,38 @@
 
 import * as React from "react"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
-
-import { cn } from "../@/lib/utils"
+import { cn } from "@utils"
 
 const rootClasses = `
-	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
+	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
+	transition-colors cursor-pointer
 `
 const ThumbClasses = `
-	border-2 border-input data-[state=checked]:border-primary
-	bg-page shadow-md rounded-full ring-0
-	w-[18px] h-[18px]
+	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
 	transition-transform
-	data-[state=checked]:translate-x-[14px] data-[state=unchecked]:translate-x-0
 	pointer-events-none
 `
 

package/src/Tabs/Tabs.tsx

@@ -11,6 +11,15 @@ 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>
@@ -18,7 +27,7 @@ const TabsList = React.forwardRef<
 	<TabsPrimitive.List
 		ref={ref}
 		className={cn(
-			'inline-flex bg-[--tabs-bg] p-[1px] rounded-[--tabs-round] data-[orientation=horizontal]:h-[--tabs-height] data-[orientation=vertical]:flex-col',
+			tabListClasses,
 			className
 		)}
 		{...props}
@@ -26,18 +35,33 @@ const TabsList = React.forwardRef<
 ))
 
 const triggerClasses = `
-	flex-1 shrink-0
+	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 
 	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 
-	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`
+	disabled:pointer-events-none
+	transition-all
+	overflow-hidden
+	whitespace-nowrap
+`
 
 const TabsTrigger = React.forwardRef<
 	React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -50,6 +74,14 @@ 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>
@@ -57,7 +89,7 @@ const TabsContent = React.forwardRef<
 	<TabsPrimitive.Content
 		ref={ref}
 		className={cn(
-			'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			tabsContentClasses,
 			className
 		)}
 		{...props}

package/src/Textarea/Textarea.tsx

@@ -1,24 +1,35 @@
-import * as React from "react"
+import * as React from 'react'
+import { cn } from '@utils'
 
-import { cn } from "../@/lib/utils"
+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
+`
 
-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(
-          "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"
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+	return (
+		<textarea
+			className={cn(textAreaClasses, className)}
+			ref={ref}
+			{...props}
+		/>
+	)
+})
+Textarea.displayName = 'Textarea'
 
 export { Textarea }

package/src/assets/css/global.css

@@ -84,6 +84,15 @@
         --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;
@@ -102,9 +111,9 @@
         --dark: var(--cl-graphite-2);
         --disabled: var(--cl-graphite-4);
         --bg-light: var(--cl-graphite-7);
-        --warning: var(--cl-yellow-2);
+        --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:; */
 
@@ -147,9 +156,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);
         /* =========================================== */
         /* ЦВЕТ КНОПОК */
         
@@ -199,7 +205,6 @@
         /* =========================================== */
         /* DRAWER */
 
-
     }
 
 

package/src/index.ts

@@ -19,7 +19,7 @@ import {
 	AccountCollapsibleContent,
 	AccountCollapsibleContentItem,
 } from './Collapsible'
-import { Button, buttonVariants } from './Button'
+import { Button } 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,8 +47,6 @@ import {
 	AlertDialogAction,
 	AlertDialogCancel,
 } from './AlertDialog'
-import { Badge, badgeVariants } from './Badge'
-import { Checkbox } from './Checkbox'
 
 export {
 	Tooltip,
@@ -69,7 +67,6 @@ export {
 	AccountCollapsibleContent,
 	AccountCollapsibleContentItem,
 	Button,
-	buttonVariants,
 	InputField,
 	InputLabel,
 	Audio,
@@ -113,7 +110,4 @@ export {
 	AlertDialogDescription,
 	AlertDialogAction,
 	AlertDialogCancel,
-	Badge,
-	badgeVariants,
-	Checkbox
-}
+}

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 };

package/dist/Badge/Badge.js

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.badgeVariants = exports.Badge = void 0;
-const tslib_1 = require("tslib");
-const React = (0, tslib_1.__importStar)(require("react"));
-const class_variance_authority_1 = require("class-variance-authority");
-const utils_1 = require("../@/lib/utils");
-const badgeClasses = {
-    variant: {
-        base: `
-			inline-block
-			focus:ring-2
-			focus:ring-ring
-			focus:ring-offset-2
-			focus:outline-none
-			transition-colors
-			rounded-full
-			`,
-        default: `
-			bg-critical
-			text-white
-		`,
-    },
-    size: {
-        default: 'size-[16px] text-[10px] text-center leadimg-[1] truncate',
-        dot: 'size-[10px] bg-critical-light border-critical border-[3px]',
-        sm: '',
-        md: '',
-        lg: '',
-    },
-};
-const badgeVariants = (0, class_variance_authority_1.cva)(badgeClasses.variant.base, {
-    variants: {
-        variant: {
-            default: badgeClasses.variant.default,
-        },
-        size: {
-            default: badgeClasses.size.default,
-            dot: badgeClasses.size.dot
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'default',
-    },
-});
-exports.badgeVariants = badgeVariants;
-function Badge({ className, variant, size, ...props }) {
-    return (React.createElement("div", { className: (0, utils_1.cn)(badgeVariants({ variant, size }), className), ...props }));
-}
-exports.Badge = Badge;
-//# sourceMappingURL=Badge.js.map

package/dist/Badge/Badge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,uEAAiE;AAEjE,0CAAmC;AAEnC,MAAM,YAAY,GAAG;IACpB,OAAO,EAAE;QACR,IAAI,EAAE;;;;;;;;IAQJ;QACF,OAAO,EAAE;;;GAGR;KACD;IACD,IAAI,EAAE;QACL,OAAO,EAAE,0DAA0D;QACnE,GAAG,EAAE,4DAA4D;QACjE,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACN;CACD,CAAA;AAED,MAAM,aAAa,GAAG,IAAA,8BAAG,EAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE;IACpD,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,OAAO;SACrC;QACD,IAAI,EAAE;YACL,OAAO,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO;YAClC,GAAG,EAAE,YAAY,CAAC,IAAI,CAAC,GAAG;SAC1B;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KACf;CACD,CAAC,CAAA;AAac,sCAAa;AAT7B,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAc;IAChE,OAAO,CACN,6BACC,SAAS,EAAE,IAAA,UAAE,EAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,KACtD,KAAK,GACR,CACF,CAAA;AACF,CAAC;AAEQ,sBAAK"}

package/dist/Badge/index.d.ts

@@ -1 +0,0 @@
-export { Badge, badgeVariants } from './Badge';

package/dist/Badge/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.badgeVariants = exports.Badge = void 0;
-var Badge_1 = require("./Badge");
-Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
-Object.defineProperty(exports, "badgeVariants", { enumerable: true, get: function () { return Badge_1.badgeVariants; } });
-//# sourceMappingURL=index.js.map

package/dist/Badge/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Badge/index.ts"],"names":[],"mappings":";;;AAAA,iCAA8C;AAArC,8FAAA,KAAK,OAAA;AAAE,sGAAA,aAAa,OAAA"}

package/dist/Checkbox/Checkbox.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { Checkbox };

package/dist/Checkbox/Checkbox.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-const tslib_1 = require("tslib");
-const React = (0, tslib_1.__importStar)(require("react"));
-const CheckboxPrimitive = (0, tslib_1.__importStar)(require("@radix-ui/react-checkbox"));
-const icons_1 = require("../Icon/icons");
-const checkboxClasses = {
-    root: `
-		peer
-		size-[18px]
-		shrink-0
-		rounded-sm
-		border-2
-		border-input
-		focus-visible:outline-none
-		focus-visible:ring-1 focus-visible:ring-ring
-		disabled:cursor-not-allowed disabled:opacity-50
-		data-[state=checked]:bg-primary
-		data-[state=checked]:border-primary
-		data-[state=checked]:text-white
-		`,
-    indicator: `
-		flex
-		justify-center
-		items-center
-		text-current
-	`
-};
-const Checkbox = React.forwardRef(({ className, ...props }, ref) => (React.createElement(CheckboxPrimitive.Root, { ref: ref, className: checkboxClasses.root, ...props },
-    React.createElement(CheckboxPrimitive.Indicator, { className: checkboxClasses.indicator },
-        React.createElement(icons_1.CheckSmall, { className: "size-[14px]" })))));
-exports.Checkbox = Checkbox;
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-//# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,yFAA6D;AAC7D,yCAA0C;AAE1C,MAAM,eAAe,GAAG;IACvB,IAAI,EAAE;;;;;;;;;;;;;GAaJ;IACF,SAAS,EAAE;;;;;EAKV;CACD,CAAA;AAED,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG/B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,oBAAC,iBAAiB,CAAC,IAAI,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,IAAI,KAC3B,KAAK;IAET,oBAAC,iBAAiB,CAAC,SAAS,IAAC,SAAS,EAAE,eAAe,CAAC,SAAS;QAChE,oBAAC,kBAAU,IAAC,SAAS,EAAC,aAAa,GAAG,CACT,CACN,CACzB,CAAC,CAAA;AAGO,4BAAQ;AAFjB,QAAQ,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAA"}

package/dist/Checkbox/index.d.ts

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

package/dist/Checkbox/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-var Checkbox_1 = require("./Checkbox");
-Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
-//# sourceMappingURL=index.js.map

package/dist/Checkbox/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Checkbox/index.ts"],"names":[],"mappings":";;;AAAA,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA"}

package/src/Badge/Badge.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '../@/lib/utils'
-
-const badgeClasses = {
-	variant: {
-		base: `
-			inline-block
-			focus:ring-2
-			focus:ring-ring
-			focus:ring-offset-2
-			focus:outline-none
-			transition-colors
-			rounded-full
-			`,
-		default: `
-			bg-critical
-			text-white
-		`,
-	},
-	size: {
-		default: 'size-[16px] text-[10px] text-center leadimg-[1] truncate',
-		dot: 'size-[10px] bg-critical-light border-critical border-[3px]',
-		sm: '',
-		md: '',
-		lg: '',
-	},
-}
-
-const badgeVariants = cva(badgeClasses.variant.base, {
-	variants: {
-		variant: {
-			default: badgeClasses.variant.default,
-		},
-		size: {
-			default: badgeClasses.size.default,
-			dot: badgeClasses.size.dot
-		},
-	},
-	defaultVariants: {
-		variant: 'default',
-		size: 'default',
-	},
-})
-
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, size, ...props }: BadgeProps) {
-	return (
-		<div
-			className={cn(badgeVariants({ variant, size }), className)}
-			{...props}
-		/>
-	)
-}
-
-export { Badge, badgeVariants }

package/src/Badge/index.ts

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

package/src/Checkbox/Checkbox.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckSmall } from '../Icon/icons'
-
-const checkboxClasses = {
-	root: `
-		peer
-		size-[18px]
-		shrink-0
-		rounded-sm
-		border-2
-		border-input
-		focus-visible:outline-none
-		focus-visible:ring-1 focus-visible:ring-ring
-		disabled:cursor-not-allowed disabled:opacity-50
-		data-[state=checked]:bg-primary
-		data-[state=checked]:border-primary
-		data-[state=checked]:text-white
-		`,
-	indicator: `
-		flex
-		justify-center
-		items-center
-		text-current
-	`
-}
-
-const Checkbox = React.forwardRef<
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-	<CheckboxPrimitive.Root
-		ref={ref}
-		className={checkboxClasses.root}
-		{...props}
-	>
-		<CheckboxPrimitive.Indicator className={checkboxClasses.indicator}>
-			<CheckSmall className="size-[14px]" />
-		</CheckboxPrimitive.Indicator>
-	</CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
-export { Checkbox }

package/src/Checkbox/index.ts

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