@cooperco/cooper-component-library 0.0.10

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

@@ -0,0 +1,280 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			'relative',
+
+			// Flex
+			'inline-flex',
+
+			// Size
+			{ 'w-full': props.multiple },
+
+			// Color
+			'text-surface-900 dark:text-surface-0',
+
+			//States
+			{
+				'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
+					props.disabled,
+			},
+		],
+	}),
+	container: ({ props, state }) => ({
+		class: [
+			// Font
+			'leading-none',
+
+			// Flex
+			'flex items-center flex-wrap',
+			'gap-2',
+
+			// Spacing
+			'm-0 list-none',
+			'p-1',
+
+			// Size
+			'w-full',
+
+			// Shape
+			'appearance-none rounded-md',
+
+			// Color
+			'text-surface-700 dark:text-white/80',
+			'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+			{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+			'border',
+			{ 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+			// Invalid State
+			'invalid:focus:ring-red-200',
+			'invalid:hover:border-red-500',
+			{ 'border-red-500 dark:border-red-400': props.invalid },
+
+			// States
+			{
+				'hover:border-surface-400 dark:hover:border-surface-700':
+					!props.invalid,
+			},
+			{
+				'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400':
+					state.focused,
+			},
+
+			// Transition
+			'transition duration-200 ease-in-out',
+
+			// Misc
+			'cursor-text overflow-hidden',
+		],
+	}),
+	inputtoken: {
+		class: ['py-1 px-0 ml-2', 'inline-flex flex-auto'],
+	},
+	input: ({ props, parent }) => ({
+		class: [
+			// Font
+			'text-base leading-none',
+
+			// Shape
+			'appearance-none rounded-md',
+			{ 'rounded-tr-none rounded-br-none': props.dropdown },
+			{ 'outline-none shadow-none rounded-none': props.multiple },
+
+			// Size
+			{ 'w-full': props.multiple },
+
+			// Spacing
+			'm-0',
+			{ 'py-2 px-3': !props.multiple, 'p-0': props.multiple },
+
+			// Colors
+			'text-surface-700 dark:text-white/80',
+			'border',
+			{
+				'bg-surface-0 dark:bg-surface-950': !props.multiple,
+				' border-surface-300 dark:border-surface-700':
+					!props.multiple && !props.invalid,
+				'border-0 bg-transparent': props.multiple,
+			},
+
+			// Invalid State
+			{ 'border-red-500 dark:border-red-400': props.invalid },
+
+			// States
+			{
+				'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10':
+					!props.multiple,
+			},
+
+			// Filled State *for FloatLabel
+			{
+				filled:
+					parent.instance?.$name == 'FloatLabel' && props.modelValue !== '',
+			},
+
+			// Transition
+			'transition-colors duration-200',
+		],
+	}),
+	token: {
+		class: [
+			// Flex
+			'inline-flex items-center',
+
+			// Spacings
+			'py-1 px-3 m-0',
+
+			// Shape
+			'rounded',
+
+			// Colors
+			'bg-surface-100 dark:bg-surface-700',
+			'text-surface-700 dark:text-white',
+
+			// Misc
+			'cursor-default',
+		],
+	},
+	removeTokenIcon: {
+		class: [
+			// Spacing
+			'ml-[0.375rem]',
+
+			// Size
+			'w-4 h-4',
+
+			// Misc
+			'cursor-pointer',
+		],
+	},
+	dropdownbutton: {
+		root: {
+			class: [
+				'relative',
+
+				// Alignments
+				'items-center inline-flex justify-center text-center align-bottom',
+
+				// Shape
+				'rounded-r-md',
+
+				// Size
+				'py-2 leading-none',
+				'w-10',
+
+				// Colors
+				'text-primary-inverse',
+				'bg-primary',
+				'border border-primary',
+
+				// States
+				'focus:outline-none focus:outline-offset-0 focus:ring-1 ',
+				'hover:bg-primary-hover hover:border-primary-hover',
+				'focus:ring-primary-500 dark:focus:ring-primary-400',
+			],
+		},
+	},
+	loadingicon: {
+		class: [
+			'text-surface-500 dark:text-surface-0/70',
+			'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin',
+		],
+	},
+	panel: {
+		class: [
+			// Colors
+			'bg-surface-0 dark:bg-surface-900',
+			'text-surface-700 dark:text-white/80',
+
+			// Shape
+			'border border-surface-300 dark:border-surface-700',
+			'rounded-md',
+			'shadow-md',
+
+			// Size
+			'overflow-auto',
+		],
+	},
+	list: {
+		class: 'p-1 list-none m-0',
+	},
+	item: ({ context }) => ({
+		class: [
+			'relative',
+
+			// Font
+			'leading-none',
+
+			// Spacing
+			'm-0 px-3 py-2',
+			'first:mt-0 mt-[2px]',
+
+			// Shape
+			'border-0 rounded',
+
+			// Colors
+			{
+				'text-surface-700 dark:text-white/80':
+					!context.focused && !context.selected,
+				'bg-surface-200 dark:bg-surface-600/60':
+					context.focused && !context.selected,
+				'text-surface-700 dark:text-white/80':
+					context.focused && !context.selected,
+
+				'text-primary-highlight-inverse': context.selected,
+				'bg-primary-highlight': context.selected,
+			},
+
+			//States
+			{
+				'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
+					!context.focused && !context.selected,
+			},
+			{ 'hover:bg-primary-highlight-hover': context.selected },
+			{
+				'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]':
+					context.focused && !context.selected,
+			},
+
+			// Transition
+			'transition-shadow duration-200',
+
+			// Misc
+			'cursor-pointer overflow-hidden whitespace-nowrap',
+		],
+	}),
+	itemgroup: {
+		class: [
+			'font-semibold',
+
+			// Spacing
+			'm-0 py-2 px-3',
+
+			// Colors
+			'text-surface-400 dark:text-surface-500',
+
+			// Misc
+			'cursor-auto',
+		],
+	},
+	emptymessage: {
+		class: [
+			// Font
+			'leading-none',
+
+			// Spacing
+			'py-2 px-3',
+
+			// Color
+			'text-surface-800 dark:text-white/80',
+			'bg-transparent',
+		],
+	},
+	transition: {
+		enterFromClass: 'opacity-0 scale-y-[0.8]',
+		enterActiveClass:
+			'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+		leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+		leaveToClass: 'opacity-0',
+	},
+}

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

@@ -0,0 +1,46 @@
+export default {
+	root: ({ props, parent }) => ({
+		class: [
+			// Font
+			{
+				'text-xl': props.size == 'large',
+				'text-2xl': props.size == 'xlarge',
+			},
+
+			// Alignments
+			'inline-flex items-center justify-center',
+			'relative',
+
+			// Sizes
+			{
+				'h-8 w-8': props.size == null || props.size == 'normal',
+				'w-12 h-12': props.size == 'large',
+				'w-16 h-16': props.size == 'xlarge',
+			},
+			{ '-ml-4': parent.instance.$style?.name == 'avatargroup' },
+
+			// Shapes
+			{
+				'rounded-lg': props.shape == 'square',
+				'rounded-full': props.shape == 'circle',
+			},
+			{ 'border-2': parent.instance.$style?.name == 'avatargroup' },
+
+			// Colors
+			'bg-surface-300 dark:bg-surface-700',
+			{
+				'border-white dark:border-surface-800':
+					parent.instance.$style?.name == 'avatargroup',
+			},
+		],
+	}),
+	image: ({ props }) => ({
+		class: [
+			'h-full w-full',
+			{
+				'rounded-lg': props.shape == 'square',
+				'rounded-full': props.shape == 'circle',
+			},
+		],
+	}),
+}

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

@@ -0,0 +1,43 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			// Font
+			'font-bold',
+
+			{
+				'text-xs leading-[1.5rem]': props.size == null,
+				'text-lg leading-[2.25rem]': props.size == 'large',
+				'text-2xl leading-[3rem]': props.size == 'xlarge',
+			},
+
+			// Alignment
+			'text-center inline-block',
+
+			// Size
+			'p-0 px-1',
+			{
+				'min-w-[1.5rem] h-[1.5rem]': props.size == null,
+				'min-w-[2.25rem] h-[2.25rem]': props.size == 'large',
+				'min-w-[3rem] h-[3rem]': props.size == 'xlarge',
+			},
+
+			// Shape
+			{
+				'rounded-full': props.value.length == 1,
+				'rounded-[0.71rem]': props.value.length !== 1,
+			},
+
+			// Color
+			'text-primary-inverse',
+			{
+				'bg-primary': props.severity == null || props.severity == 'primary',
+				'bg-surface-500 dark:bg-surface-400': props.severity == 'secondary',
+				'bg-green-500 dark:bg-green-400': props.severity == 'success',
+				'bg-blue-500 dark:bg-blue-400': props.severity == 'info',
+				'bg-orange-500 dark:bg-orange-400': props.severity == 'warning',
+				'bg-purple-500 dark:bg-purple-400': props.severity == 'help',
+				'bg-red-500 dark:bg-red-400': props.severity == 'danger',
+			},
+		],
+	}),
+}

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

@@ -0,0 +1,49 @@
+export default {
+	root: ({ context }) => ({
+		class: [
+			// Font
+			'font-bold',
+			'text-xs leading-5',
+
+			// Alignment
+			'flex items-center justify-center',
+			'text-center',
+
+			// Position
+			'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right',
+
+			// Size
+			'm-0',
+			{
+				'p-0': context.nogutter || context.dot,
+				'px-2': !context.nogutter && !context.dot,
+				'min-w-[0.5rem] w-2 h-2': context.dot,
+				'min-w-[1.5rem] h-6': !context.dot,
+			},
+
+			// Shape
+			{
+				'rounded-full': context.nogutter || context.dot,
+				'rounded-[10px]': !context.nogutter && !context.dot,
+			},
+
+			// Color
+			'text-primary-inverse',
+			{
+				'bg-primary':
+					!context.info &&
+					!context.success &&
+					!context.warning &&
+					!context.danger &&
+					!context.help &&
+					!context.secondary,
+				'bg-surface-500 dark:bg-surface-400': context.secondary,
+				'bg-green-500 dark:bg-green-400': context.success,
+				'bg-blue-500 dark:bg-blue-400': context.info,
+				'bg-orange-500 dark:bg-orange-400': context.warning,
+				'bg-purple-500 dark:bg-purple-400': context.help,
+				'bg-red-500 dark:bg-red-400': context.danger,
+			},
+		],
+	}),
+}

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

@@ -0,0 +1,8 @@
+export default {
+	root: {
+		class: 'relative',
+	},
+	mask: {
+		class: 'bg-black/40',
+	},
+}

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

@@ -0,0 +1,63 @@
+export default {
+	root: {
+		class: [
+			// Shape
+			'rounded-md',
+
+			// Spacing
+			'p-4',
+
+			// Color
+			'bg-surface-0 dark:bg-surface-900',
+
+			// Misc
+			'overflow-x-auto',
+		],
+	},
+	menu: {
+		class: [
+			// Flex & Alignment
+			'flex items-center flex-nowrap',
+
+			// Spacing
+			'm-0 p-0 list-none leading-none',
+		],
+	},
+	action: {
+		class: [
+			// Flex & Alignment
+			'flex items-center',
+
+			// Shape
+			'rounded-md',
+
+			// Color
+			'text-surface-600 dark:text-white/70',
+
+			// States
+			'focus-visible:outline-none focus-visible:outline-offset-0',
+			'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+			// Transitions
+			'transition-shadow duration-200',
+
+			// Misc
+			'text-decoration-none',
+		],
+	},
+	icon: {
+		class: 'text-surface-600 dark:text-white/70',
+	},
+	separator: {
+		class: [
+			// Flex & Alignment
+			'flex items-center',
+
+			// Spacing
+			'mx-2',
+
+			// Color
+			'text-surface-600 dark:text-white/70',
+		],
+	},
+}