@cooperco/cooper-component-library 0.0.10 → 0.1.0

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

@@ -1,184 +0,0 @@
-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

@@ -1,112 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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',
-		],
-	},
-}