@cooperco/cooper-component-library 0.0.10

package/src/presets/aura/menubar/index.js

@@ -0,0 +1,184 @@
+export default {
+	root: {
+		class: [
+			'relative',
+
+			// Flexbox
+			'flex',
+			'items-center',
+
+			// Spacing
+			'p-2',
+
+			// Shape
+			'rounded-md',
+
+			// Color
+			'bg-surface-0 dark:bg-surface-900',
+			'border border-surface-200 dark:border-surface-700',
+		],
+	},
+	menu: ({ props }) => ({
+		class: [
+			// Flexbox
+			'sm:flex',
+			'items-center',
+			'flex-wrap',
+			'flex-col sm:flex-row',
+			{ hidden: !props?.mobileActive, flex: props?.mobileActive },
+
+			// Position
+			'absolute sm:relative',
+			'top-full left-0',
+			'sm:top-auto sm:left-auto',
+
+			// Size
+			'w-full sm:w-auto',
+
+			// Spacing
+			'm-0',
+			'p-1 sm:py-0 sm:p-0',
+			'list-none',
+
+			// Shape
+			'shadow-md sm:shadow-none',
+			'border-0',
+
+			// Color
+			'bg-surface-0 dark:bg-surface-900 sm:bg-transparent',
+
+			// Misc
+			'outline-none',
+		],
+	}),
+	menuitem: {
+		class: 'sm:relative sm:w-auto w-full static my-[2px] [&:first-child]:mt-0',
+	},
+	content: ({ props, context }) => ({
+		class: [
+			// Shape
+			'rounded-[4px]',
+
+			// Colors
+			'text-surface-700 dark:text-white/80',
+			{
+				'text-surface-500 dark:text-white/70':
+					!context.focused && !context.active,
+				'text-surface-500 dark:text-white/70 bg-surface-200':
+					context.focused && !context.active,
+				'text-primary-highlight-inverse bg-primary-highlight':
+					(context.focused && context.active) ||
+					context.active ||
+					(!context.focused && context.active),
+			},
+
+			// States
+			{
+				'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
+					!context.active,
+				'hover:bg-primary-highlight-hover text-primary-highlight-inverse':
+					context.active,
+			},
+
+			// Transitions
+			'transition-all',
+			'duration-200',
+		],
+	}),
+	action: ({ context }) => ({
+		class: [
+			'relative',
+
+			// Flexbox
+			'flex',
+			'items-center',
+
+			// Spacing
+			'py-2',
+			'px-3',
+
+			// Size
+			{
+				'pl-9 sm:pl-5': context.level === 1,
+				'pl-14 sm:pl-5': context.level === 2,
+			},
+			'leading-none',
+
+			// Misc
+			'select-none',
+			'cursor-pointer',
+			'no-underline ',
+			'overflow-hidden',
+		],
+	}),
+	icon: {
+		class: 'mr-2',
+	},
+	submenuicon: ({ props }) => ({
+		class: [
+			{
+				'ml-auto sm:ml-2': props.root,
+				'ml-auto': !props.root,
+			},
+		],
+	}),
+	submenu: ({ props }) => ({
+		class: [
+			// Size
+			'rounded-md',
+			'min-w-[12.5rem]',
+
+			// Spacing
+			'p-1',
+			'm-0',
+			'list-none',
+
+			// Shape
+			'shadow-none sm:shadow-md',
+			'border border-surface-200 dark:border-surface-700',
+
+			// Position
+			'static sm:absolute',
+			'z-10',
+			{ 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
+
+			// Color
+			'bg-surface-0 dark:bg-surface-900',
+		],
+	}),
+	separator: {
+		class: 'border-t border-surface-200 dark:border-surface-600 my-[2px]',
+	},
+	button: {
+		class: [
+			// Flexbox
+			'flex sm:hidden',
+			'items-center justify-center',
+
+			// Size
+			'w-7',
+			'h-7',
+
+			// Shape
+			'rounded-full',
+			// Color
+			'text-surface-500 dark:text-white/80',
+
+			// States
+			'hover:text-surface-600 dark:hover:text-white/60',
+			'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+			'focus:outline-none focus:outline-offset-0',
+			'focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+			// Transitions
+			'transition duration-200 ease-in-out',
+
+			// Misc
+			'cursor-pointer',
+			'no-underline',
+		],
+	},
+	end: {
+		class: 'ml-auto self-center',
+	},
+}

package/src/presets/aura/message/index.js

@@ -0,0 +1,112 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			// Spacing and Shape
+			'my-4 mx-0',
+			'rounded-md',
+			'border',
+
+			// Colors
+			{
+				'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
+				'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
+				'bg-surface-100/70 dark:bg-surface-500/20':
+					props.severity == 'secondary',
+				'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
+				'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error',
+				'bg-surface-950 dark:bg-surface-0': props.severity == 'contrast',
+			},
+			{
+				'border-blue-200 dark:border-blue-500/20': props.severity == 'info',
+				'border-green-200 dark:border-green-500/20':
+					props.severity == 'success',
+				'border-surface-200 dark:border-surface-500/20':
+					props.severity == 'secondary',
+				'border-orange-200 dark:border-orange-500/20': props.severity == 'warn',
+				'border-red-200 dark:border-red-500/20': props.severity == 'error',
+				'border-surface-950 dark:border-surface-0':
+					props.severity == 'contrast',
+			},
+			{
+				'text-blue-700 dark:text-blue-300': props.severity == 'info',
+				'text-green-700 dark:text-green-300': props.severity == 'success',
+				'text-surface-700 dark:text-surface-300': props.severity == 'secondary',
+				'text-orange-700 dark:text-orange-300': props.severity == 'warn',
+				'text-red-700 dark:text-red-300': props.severity == 'error',
+				'text-surface-0 dark:text-surface-950': props.severity == 'contrast',
+			},
+		],
+	}),
+	wrapper: {
+		class: [
+			// Flexbox
+			'flex items-center',
+
+			// Spacing
+			'py-2 px-3',
+		],
+	},
+	icon: {
+		class: [
+			// Sizing and Spacing
+			'w-4 h-4',
+			'leading-[normal] mr-2 shrink-0',
+		],
+	},
+	text: {
+		class: [
+			// Font and Text
+			'text-base leading-[normal]',
+			'font-medium',
+		],
+	},
+	button: ({ props }) => ({
+		class: [
+			// Flexbox
+			'flex items-center justify-center',
+
+			// Size
+			'w-7 h-7',
+
+			// Spacing and Misc
+			'ml-auto  relative',
+
+			// Shape
+			'rounded-full',
+
+			// Colors
+			'bg-transparent',
+
+			// Transitions
+			'transition duration-200 ease-in-out',
+
+			// States
+			'hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]',
+			'focus:outline-none focus:outline-offset-0 focus:ring-1',
+			{
+				'focus:ring-blue-500 dark:focus:ring-blue-400':
+					props.severity == 'info',
+				'focus:ring-green-500 dark:focus:ring-green-400':
+					props.severity == 'success',
+				'focus:ring-surface-500 dark:focus:ring-surface-400':
+					props.severity == 'secondary',
+				'focus:ring-orange-500 dark:focus:ring-orange-400':
+					props.severity == 'warn',
+				'focus:ring-red-500 dark:focus:ring-red-4000':
+					props.severity == 'error',
+				'focus:ring-surface-0 dark:focus:ring-surface-950':
+					props.severity == 'contrast',
+			},
+
+			// Misc
+			'overflow-hidden',
+		],
+	}),
+	transition: {
+		enterFromClass: 'opacity-0',
+		enterActiveClass: 'transition-opacity duration-300',
+		leaveFromClass: 'max-h-40',
+		leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
+		leaveToClass: 'max-h-0 opacity-0 !m-0',
+	},
+}

package/src/presets/aura/metergroup/index.js

@@ -0,0 +1,110 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			// Flexbox
+			'flex gap-4',
+
+			{
+				'flex-col': props.orientation == 'horizontal',
+				'flex-row': props.orientation == 'vertical',
+			},
+		],
+	}),
+	metercontainer: ({ props }) => ({
+		class: [
+			// Flexbox
+			'flex',
+
+			{ 'flex-col': props.orientation === 'vertical' },
+
+			// Sizing
+			{ 'w-2 h-full': props.orientation === 'vertical' },
+			{ 'h-2': props.orientation === 'horizontal' },
+
+			// Colors
+			'bg-gray-200 dark:bg-gray-700',
+
+			// Border Radius
+			'rounded-lg',
+		],
+	}),
+	meter: ({ props }) => ({
+		class: [
+			// Shape
+			'border-0',
+
+			// Rounded Corners - Horizontal
+			{
+				'first:rounded-l-lg last:rounded-r-lg':
+					props.orientation === 'horizontal',
+			},
+
+			// Rounded Corners - Vertical
+			{
+				'first:rounded-t-lg last:rounded-b-lg':
+					props.orientation === 'vertical',
+			},
+
+			// Colors
+			'bg-primary',
+		],
+	}),
+	labellist: ({ props }) => ({
+		class: [
+			// Display & Flexbox
+			'flex flex-wrap',
+
+			{ 'gap-4': props.labelOrientation === 'horizontal' },
+
+			{ 'gap-2': props.labelOrientation === 'vertical' },
+
+			{ 'flex-col': props.labelOrientation === 'vertical' },
+
+			// Conditional Alignment - Horizontal
+			{
+				'align-end':
+					props.labelOrientation === 'horizontal' &&
+					props.labelPosition === 'end',
+				'align-start':
+					props.labelOrientation === 'horizontal' &&
+					props.labelPosition === 'start',
+			},
+
+			// Conditional Alignment - Vertical
+			{
+				'justify-end':
+					props.labelOrientation === 'vertical' &&
+					props.labelPosition === 'end',
+				'justify-start':
+					props.labelOrientation === 'vertical' &&
+					props.labelPosition === 'start',
+			},
+
+			// List Styling
+			'm-0 p-0 list-none',
+		],
+	}),
+	labellistitem: {
+		class: [
+			// Flexbox
+			'inline-flex',
+			'items-center',
+			'gap-2',
+		],
+	},
+	labellisttype: {
+		class: [
+			// Display
+			'inline-flex',
+
+			// Background Color
+			'bg-primary',
+
+			// Size
+			'w-2 h-2',
+
+			// Rounded Shape
+			'rounded-full',
+		],
+	},
+}