@modul/mbui 0.0.27-beta-webpack-559623b1 → 0.0.27-beta-webpack-305b06ab

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.27-beta-webpack-559623b1",
+  "version": "0.0.27-beta-webpack-305b06ab",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "source": "./src/index.ts",
   "scripts": {
     "load-icons": "node scripts/icons/load-icons",
     "icons": "yarn load-icons && svgr icons_sources",
@@ -16,6 +17,7 @@
   },
   "lintConfig": "./.eslintrc.json",
   "files": [
+    "src",
     "dist"
   ],
   "dependencies": {

package/src/@/config/button.ts

@@ -0,0 +1,77 @@
+export default {
+	textColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary)',
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary)',
+				disabled: 'var(--btn-secondary-disabled)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost)',
+				hover: 'var(--btn-ghost-hover)',
+				focus: 'var(--btn-ghost-focus)',
+				active: 'var(--btn-ghost-active)',
+				disabled: 'var(--btn-ghost-disabled)',
+			},
+			outline: {
+				DEFAULT: 'var(--btn-outline)',
+				disabled: 'var(--btn-outline-disabled)',
+			},
+		},
+	},
+	backgroundColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+				disabled: 'var(--btn-primary-disabled-bg)',
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			},
+		},
+	},
+	borderColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+				disabled: 'var(--btn-primary-disabled-bg)',
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			},
+			outline: {
+				DEFAULT: 'var(--btn-outline-border)',
+				hover: 'var(--btn-outline-hover-border)',
+				focus: 'var(--btn-outline-focus-border)',
+				active: 'var(--btn-outline-active-border)',
+				disabled: 'var(--btn-outline-disabled-border)',
+			},
+		},
+	},
+}

package/src/@/config/index.ts

@@ -0,0 +1,97 @@
+import button from './button'
+import label from './label'
+
+export default {
+	container: {
+		center: true,
+	},
+	screens: {
+		sm: '600px',
+	},
+	extend: {
+		colors: {
+			light: 'var(--light)',
+			dark: 'var(--dark)',
+			primary: {
+				DEFAULT: 'var(--primary)',
+				light: {
+					DEFAULT: 'var(--primary-light)',
+				},
+			},
+			success: {
+				DEFAULT: 'var(--success)',
+				light: 'var(--success-light)',
+			},
+			secondary: {
+				DEFAULT: 'var(--secondary)',
+			},
+			warning: {
+				DEFAULT: 'var(--warning)',
+				light: 'var(--warning-light)',
+			},
+			critical: {
+				DEFAULT: 'var(--critical)',
+				light: 'var(--critical-light)',
+			},
+			disabled: 'var(--disabled)',
+			transparent: 'transparent',
+			current: 'currentColor',
+		},
+		textColor: {
+			...button.textColor,
+			...label.textColor,
+		},
+		backgroundColor: {
+			page: 'var(--page-bg)',
+			light: 'var(--bg-light)',
+			dialog: 'var(--dialog-bg)',
+			...button.backgroundColor,
+			...label.backgroundColor,
+		},
+		dropShadow: {
+			sm: 'var(--shadow-sm)',
+			md: 'var(--shadow-md)',
+			lg: 'var(--shadow-lg)',
+		},
+		boxShadow: {
+			sm: 'var(--shadow-sm)',
+			md: 'var(--shadow-md)',
+			lg: 'var(--shadow-lg)',
+		},
+		borderColor: {
+			input: {
+				DEFAULT: 'var(--border-color)',
+			},
+			...button.borderColor,
+		},
+		borderRadius: {
+			sm: 'var(--border-radius-sm)',
+			md: 'var(--border-radius-md)',
+		},
+		keyframes: {
+			'accordion-down': {
+				from: { height: '0' },
+				to: { height: 'var(--radix-accordion-content-height)' },
+			},
+			'accordion-up': {
+				from: { height: 'var(--radix-accordion-content-height)' },
+				to: { height: '0' },
+			},
+			'caret-blink': {
+				'0%,70%,100%': { opacity: '1' },
+				'20%,50%': { opacity: '0' },
+			},
+			'pin-typing': {
+				'0%': {transform: 'scale(1)'},
+				'50%':{transform: 'scale(1.2)'},
+				'100%': {transform: 'scale(1)'},
+			},
+		},
+		animation: {
+			'accordion-down': 'accordion-down 0.2s ease-out',
+			'accordion-up': 'accordion-up 0.2s ease-out',
+			'caret-blink': 'caret-blink 1.25s ease-out infinite',
+			'pin-typing': 'pin-typing .25s ease-in-out'
+		},
+	},
+}

package/src/@/config/label.ts

@@ -0,0 +1,89 @@
+export default {
+	textColor: {
+		label: {
+			primary: {
+				DEFAULT: 'var(--btn-primary)',
+				outline: {
+					DEFAULT: 'var(--btn-primary-bg)',
+					hover: 'var(--btn-primary-hover-bg)',
+					focus: 'var(var(--btn-primary-focus-bg)',
+					active: 'var(--btn-primary-active-bg)',
+				}
+			},
+			secondary: 'var(--btn-secondary)',
+			success: 'var(--btn-success)',
+			ghost: 'var(--btn-ghost)',
+			outline: {
+				DEFAULT: 'var(--btn-ghost)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			}
+		}
+	},
+	backgroundColor: {
+		label: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			success: {
+				DEFAULT: 'var(--btn-success-bg)',
+				hover: 'var(--btn-success-hover-bg)',
+				focus: 'var(var(--btn-success-focus-bg)',
+				active: 'var(--btn-success-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			}
+		}
+	},
+	borderColor: {
+		btn: {
+			primary: {
+				DEFAULT: 'var(--btn-primary-bg)',
+				hover: 'var(--btn-primary-hover-bg)',
+				focus: 'var(var(--btn-primary-focus-bg)',
+				active: 'var(--btn-primary-active-bg)',
+				outline: {
+					DEFAULT: 'var(--btn-primary-bg)',
+					hover: 'var(--btn-primary-hover-bg)',
+					focus: 'var(var(--btn-primary-focus-bg)',
+					active: 'var(--btn-primary-active-bg)',
+				}
+			},
+			secondary: {
+				DEFAULT: 'var(--btn-secondary-bg)',
+				hover: 'var(--btn-secondary-hover-bg)',
+				focus: 'var(var(--btn-secondary-focus-bg)',
+				active: 'var(--btn-secondary-active-bg)',
+			},
+			success: {
+				DEFAULT: 'var(--btn-success-bg)',
+				hover: 'var(--btn-success-hover-bg)',
+				focus: 'var(var(--btn-success-focus-bg)',
+				active: 'var(--btn-success-active-bg)',
+			},
+			ghost: {
+				DEFAULT: 'var(--btn-ghost-bg)',
+				hover: 'var(--btn-ghost-hover-bg)',
+				focus: 'var(var(--btn-ghost-focus-bg)',
+				active: 'var(--btn-ghost-active-bg)',
+			},
+			outline: {
+				DEFAULT: 'var(--btn-ghost)',
+			}
+		}
+	}
+}

package/src/@/lib/utils.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+

package/src/Alert/Alert.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { cn } from '../@/lib/utils'
+import { CheckCircleSolid, InfoSolid, Warning } from '../../src/Icon'
+import { ReactNode } from "react";
+
+const AleltIconClasses = '[&+div]:ml-[8px] shrink-0'
+const AlertIcons = {
+	info: <InfoSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-primary')} width={24} height={24} />,
+	warning: <Warning aria-hidden={true} className={cn(AleltIconClasses, 'text-warning')} width={24} height={24} />,
+	success: <CheckCircleSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-success')} width={24} height={24} />,
+	critical: <InfoSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-critical')} width={24} height={24} />
+}
+
+const Title = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+	<div
+		role="heading"
+		ref={ref}
+		className={cn('text-[14px] font-medium', className)}
+		{...props}
+	/>
+))
+
+const Description = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
+	<p
+		ref={ref}
+		className={cn('text-[14px] [&>a]:text-primary [&>a]:underline', className)}
+		{...props}
+	/>
+))
+
+const getClass = (variant, type): string => {
+	const commonClasses = 'px-[8px] py-[16px] border rounded-md '
+	const variants = {
+		info: `${type !== 'text' ? `${commonClasses} bg-primary-light  border-primary` : 'text-primary'}`,
+		warning: `${type !== 'text' ? `${commonClasses} bg-warning-light  border-warning` : 'text-warning'}`,
+		success: `${type !== 'text' ? `${commonClasses} bg-success-light  border-success` : 'text-success'}`,
+		critical: `${type !== 'text' ? `${commonClasses} bg-critical-light  border-critical` : 'text-critical'}`,
+	}
+	return variants[variant]
+
+}
+
+interface IAlertComponents {
+	displayName: string;
+	Title: typeof Title;
+	Description: typeof Description;
+}
+
+interface IAlertProps {
+	className?: string;
+	variant?: string;
+	type?: string;
+	children: ReactNode;
+}
+
+type TAlertProps = IAlertProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+
+const Alert: React.FC<TAlertProps> & IAlertComponents = ({ className, variant = 'info', type, children, ...props }) => {
+	return (
+		<div
+			className={cn('flex', getClass(variant, type), className)}
+			role='alert'
+			{...props}
+		>
+			{AlertIcons[variant]}
+			<div className='pt-[2px]'>
+				{children}
+			</div>
+		</div>
+	)
+}
+
+Alert.displayName = 'Alert'
+
+Alert.Title = Title
+Alert.Title.displayName = 'Alert.Title'
+
+Alert.Description = Description
+Alert.Description.displayName = "Alert.Description"
+
+export { Alert }

package/src/Alert/index.ts

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

package/src/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,137 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { cn } from "../@/lib/utils"
+import { buttonVariants } from "../../src/Button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-input bg-dialog p-[16px] shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({variant: 'primary'}), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline"}),
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/src/AlertDialog/index.ts

@@ -0,0 +1,13 @@
+export {
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+} from './AlertDialog'

package/src/Audio/Audio.styl

@@ -0,0 +1,115 @@
+
+.player
+    display flex
+    align-items center
+
+    &__btn
+        position relative
+        margin-right 12px
+        width 40px
+        height @width
+        font-size $fz-large
+        color $cl-white
+        background-color $cl-green-3
+        border 0
+        border-radius 50%
+        outline 0
+        transition background-color .3s ease-in-out
+
+        &:hover
+        &:focus
+            background-color $cl-green-4
+
+        &:active
+            background-color $cl-green-2
+
+        [class*=icon]
+            position absolute
+            top 50%
+            left 53%
+            transform translate(-50%, -50%)
+
+    &__progress
+        position relative
+        flex-grow 1
+
+        &-buffer
+            position absolute
+            top 0
+            left 0
+            height 2px
+            background-color $ca-graphite-5
+            border-radius 1px
+
+        .ant-slider-rail
+            cursor pointer
+            height 2px
+            background-color $ca-graphite-5
+            border-radius 1px
+
+        .ant-slider-track
+            position absolute
+            top 0
+            left 0
+            height 2px
+            background-color $cl-green-2
+            border-radius 1px
+
+        .ant-slider-handle
+            margin 0
+            cursor pointer
+            position absolute
+            top -4px
+            width 10px
+            height @width
+            border-radius 0
+            border 0
+            background-color transparent
+            transform translateX(-50%)
+            &::before
+                position absolute
+                display block
+                content ''
+                width 2px
+                height 8px
+                left 50%
+                top 50%
+                transform translate(-50%, -50%)
+                background-color $cl-green-2
+                border-radius 1px
+
+        .player__time
+            margin-top 14px
+
+        & + .player__time
+            margin-left 12px
+
+    &__range
+        position relative
+        height 2px
+        border-radius 1px
+
+    &__slider
+        position absolute
+        top 50%
+        left 0
+        margin-left -5px
+        width 10px
+        height @width
+        transform translateY(-50%)
+
+        &::after
+            content ''
+            position absolute
+            top 1px
+            left 50%
+            width 2px
+            height 8px
+            background-color $cl-green-2
+            border-radius 1px
+            transform translateX(-50%)
+
+    &__time
+        line-height 1
+        font-size 12px
+        color $cl-text-success