@cooperco/cooper-component-library 0.0.10

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

@@ -0,0 +1,49 @@
+export default {
+	root: ({ context, props, parent }) => ({
+		class: [
+			// Font
+			'leading-none',
+
+			// Spacing
+			'm-0',
+			'py-2 px-3',
+
+			// Shape
+			'rounded-md',
+
+			// Colors
+			'text-surface-800 dark:text-white/80',
+			'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+			{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
+			'border',
+			{ 'border-surface-300 dark:border-surface-600': !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-600':
+					!context.disabled && !props.invalid,
+				'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10':
+					!context.disabled,
+				'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
+					context.disabled,
+			},
+
+			// Filled State *for FloatLabel
+			{
+				filled:
+					parent.instance?.$name == 'FloatLabel' &&
+					props.modelValue !== null &&
+					props.modelValue?.length !== 0,
+			},
+
+			// Misc
+			'appearance-none',
+			'transition-colors duration-200',
+		],
+	}),
+}

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

@@ -0,0 +1,125 @@
+export default {
+	root: {
+		class: [
+			// Shape
+			'rounded-md',
+
+			// Size
+			'min-w-[12rem]',
+			'p-1',
+
+			// Colors
+			'bg-surface-0 dark:bg-surface-900',
+			'border border-surface-200 dark:border-surface-700',
+		],
+	},
+	menu: {
+		class: [
+			// Spacings and Shape
+			'list-none',
+			'm-0',
+			'p-0',
+			'outline-none',
+		],
+	},
+	menuitem: {
+		class: 'relative my-[2px] [&:first-child]:mt-0',
+	},
+	content: ({ 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),
+			},
+
+			// Transitions
+			'transition-shadow',
+			'duration-200',
+
+			// 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,
+			},
+
+			// Disabled
+			{ 'opacity-60 pointer-events-none cursor-default': context.disabled },
+		],
+	}),
+	action: {
+		class: [
+			'relative',
+			// Flexbox
+
+			'flex',
+			'items-center',
+
+			// Spacing
+			'py-2',
+			'px-3',
+
+			// Color
+			'text-surface-700 dark:text-white/80',
+
+			// Misc
+			'no-underline',
+			'overflow-hidden',
+			'cursor-pointer',
+			'select-none',
+		],
+	},
+	icon: {
+		class: [
+			// Spacing
+			'mr-2',
+
+			// Color
+			'text-surface-600 dark:text-white/70',
+		],
+	},
+	label: {
+		class: ['leading-none'],
+	},
+	submenuicon: {
+		class: [
+			// Position
+			'ml-auto',
+		],
+	},
+	submenu: {
+		class: [
+			// Spacing
+			'p-1',
+			'm-0',
+			'list-none',
+			'min-w-[12.5rem]',
+
+			// Shape
+			'shadow-none sm:shadow-md',
+			'border border-surface-200 dark:border-surface-700',
+
+			// Position
+			'static sm:absolute',
+			'z-10',
+
+			// Color
+			'bg-surface-0 dark:bg-surface-900',
+		],
+	},
+	separator: {
+		class: 'border-t border-surface-200 dark:border-surface-600 my-[2px]',
+	},
+}

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

@@ -0,0 +1,114 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			'flex grow',
+			{
+				'flex-col': props.layout === 'vertical',
+				'flex-row flex-1': props.layout === 'horizontal',
+			},
+		],
+	}),
+	event: ({ props, context }) => ({
+		class: [
+			'flex relative min-h-[70px]',
+			{
+				'flex-row-reverse':
+					props.align === 'right' ||
+					(props.layout === 'vertical' &&
+						props.align === 'alternate' &&
+						context.index % 2 === 1),
+				'flex-col flex-1': props.layout === 'horizontal',
+				'flex-col-reverse ':
+					props.align === 'bottom' ||
+					(props.layout === 'horizontal' &&
+						props.align === 'alternate' &&
+						context.index % 2 === 1),
+			},
+		],
+	}),
+	opposite: ({ props, context }) => ({
+		class: [
+			'flex-1',
+			{
+				'px-4': props.layout === 'vertical',
+				'py-4': props.layout === 'horizontal',
+			},
+			{
+				'text-right':
+					props.align === 'left' ||
+					(props.layout === 'vertical' &&
+						props.align === 'alternate' &&
+						context.index % 2 === 0),
+				'text-left':
+					props.align === 'right' ||
+					(props.layout === 'vertical' &&
+						props.align === 'alternate' &&
+						context.index % 2 === 1),
+			},
+		],
+	}),
+	separator: ({ props }) => ({
+		class: [
+			'flex items-center flex-initial',
+			{
+				'flex-col': props.layout === 'vertical',
+				'flex-row': props.layout === 'horizontal',
+			},
+		],
+	}),
+	marker: {
+		class: [
+			'relative',
+
+			// Display & Flexbox
+			'inline-flex items-center justify-center',
+
+			// Size
+			'w-[1.125rem] h-[1.125rem]',
+
+			// Appearance
+			'rounded-full border-2 border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-950',
+
+			// Before
+			'before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary',
+			// After
+			'after:absolute after:rounded-full after:w-full after:h-full after:shadow-sm',
+		],
+	},
+	connector: ({ props }) => ({
+		class: [
+			'grow bg-surface-300 dark:bg-surface-700',
+			{
+				'w-[2px]': props.layout === 'vertical',
+				'w-full h-[2px]': props.layout === 'horizontal',
+			},
+		],
+	}),
+	content: ({ props, context }) => ({
+		class: [
+			'flex-1',
+			{
+				'px-4': props.layout === 'vertical',
+				'py-4': props.layout === 'horizontal',
+			},
+			{
+				'text-left':
+					props.align === 'left' ||
+					(props.layout === 'vertical' &&
+						props.align === 'alternate' &&
+						context.index % 2 === 0),
+				'text-right':
+					props.align === 'right' ||
+					(props.layout === 'vertical' &&
+						props.align === 'alternate' &&
+						context.index % 2 === 1),
+			},
+			{
+				'min-h-0':
+					props.layout === 'vertical' && context.index === context.count - 1,
+				'grow-0':
+					props.layout === 'horizontal' && context.index === context.count - 1,
+			},
+		],
+	}),
+}

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

@@ -0,0 +1,151 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			//Size and Shape
+			'w-96 rounded-md',
+
+			// Positioning
+			{
+				'-translate-x-2/4':
+					props.position == 'top-center' || props.position == 'bottom-center',
+			},
+		],
+	}),
+	container: ({ props }) => ({
+		class: [
+			'mb-4 rounded-md w-full',
+			'border border-transparent',
+			'backdrop-blur-[10px] shadow-md',
+
+			// Colors
+			{
+				'bg-blue-50/90 dark:bg-blue-500/20': props.message.severity == 'info',
+				'bg-green-50/90 dark:bg-green-500/20':
+					props.message.severity == 'success',
+				'bg-surface-50 dark:bg-surface-800':
+					props.message.severity == 'secondary',
+				'bg-orange-50/90 dark:bg-orange-500/20':
+					props.message.severity == 'warn',
+				'bg-red-50/90 dark:bg-red-500/20': props.message.severity == 'error',
+				'bg-surface-950 dark:bg-surface-0':
+					props.message.severity == 'contrast',
+			},
+			{
+				'border-blue-200 dark:border-blue-500/20':
+					props.message.severity == 'info',
+				'border-green-200 dark:border-green-500/20':
+					props.message.severity == 'success',
+				'border-surface-300 dark:border-surface-500/20':
+					props.message.severity == 'secondary',
+				'border-orange-200 dark:border-orange-500/20':
+					props.message.severity == 'warn',
+				'border-red-200 dark:border-red-500/20':
+					props.message.severity == 'error',
+				'border-surface-950 dark:border-surface-0':
+					props.message.severity == 'contrast',
+			},
+			{
+				'text-blue-700 dark:text-blue-300': props.message.severity == 'info',
+				'text-green-700 dark:text-green-300':
+					props.message.severity == 'success',
+				'text-surface-700 dark:text-surface-300':
+					props.message.severity == 'secondary',
+				'text-orange-700 dark:text-orange-300':
+					props.message.severity == 'warn',
+				'text-red-700 dark:text-red-300': props.message.severity == 'error',
+				'text-surface-0 dark:text-surface-950':
+					props.message.severity == 'contrast',
+			},
+		],
+	}),
+	content: ({ props }) => ({
+		class: [
+			'flex p-3',
+			{
+				'items-start': props.message.summary,
+				'items-center': !props.message.summary,
+			},
+		],
+	}),
+	icon: ({ props }) => ({
+		class: [
+			// Sizing and Spacing
+			props.message.severity === 'contrast' ||
+			props.message.severity === 'secondary'
+				? 'w-0'
+				: 'w-[1.125rem] h-[1.125rem] mr-2',
+			'text-lg leading-[normal]',
+		],
+	}),
+	text: {
+		class: [
+			// Font and Text
+			'text-base leading-[normal]',
+			'ml-2',
+			'flex-1',
+		],
+	},
+	summary: {
+		class: 'font-medium block',
+	},
+	detail: ({ props }) => ({
+		class: [
+			'block',
+			'text-sm',
+			props.message.severity === 'contrast'
+				? 'text-surface-0 dark:text-surface-950'
+				: 'text-surface-700 dark:text-surface-0',
+			{ 'mt-2': props.message.summary },
+		],
+	}),
+	closebutton: ({ 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 translate-y-2/4',
+		enterActiveClass: 'transition-[transform,opacity] duration-300',
+		leaveFromClass: 'max-h-[1000px]',
+		leaveActiveClass:
+			'!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden',
+		leaveToClass: 'max-h-0 opacity-0 mb-0',
+	},
+}

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

@@ -0,0 +1,98 @@
+export default {
+	root: {
+		class: [
+			'relative',
+
+			// Alignment
+			'inline-flex',
+			'align-bottom',
+
+			// Misc
+			'cursor-pointer',
+			'select-none',
+		],
+	},
+	box: ({ props }) => ({
+		class: [
+			'relative',
+
+			// Alignments
+			'items-center inline-flex flex-1 text-center align-bottom justify-center',
+
+			// Sizes & Spacing
+			'px-4 py-2 leading-none',
+
+			// Shapes
+			'rounded-md',
+			'border',
+			{ 'border-transparent': !props.invalid },
+
+			// Colors
+			'bg-surface-100 dark:bg-surface-950',
+			{
+				'text-surface-600 dark:text-white/60 before:bg-transparent':
+					!props.modelValue,
+				'text-surface-800 dark:text-white/80 before:bg-surface-0 dark:before:bg-surface-800':
+					props.modelValue,
+			},
+
+			// Before
+			'before:absolute before:left-1 before:top-1 before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] before:rounded-[4px] before:z-0',
+
+			// Invalid State
+			{ 'border-red-500 dark:border-red-400': props.invalid },
+
+			// States
+			{
+				'peer-hover:text-surface-800 dark:peer-hover:text-white/80':
+					!props.disabled && !props.modelValue,
+				'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400':
+					!props.disabled,
+			},
+
+			// Transitions
+			'transition-all duration-200',
+
+			// Misc
+			{
+				'cursor-pointer': !props.disabled,
+				'opacity-60 select-none pointer-events-none cursor-default':
+					props.disabled,
+			},
+		],
+	}),
+	label: {
+		class: 'font-medium leading-[normal] text-center w-full z-10 relative',
+	},
+	input: {
+		class: [
+			'peer',
+
+			// Size
+			'w-full ',
+			'h-full',
+
+			// Position
+			'absolute',
+			'top-0 left-0',
+			'z-20',
+
+			// Spacing
+			'p-0',
+			'm-0',
+
+			// Shape
+			'opacity-0',
+			'rounded-md',
+			'outline-none',
+			'border border-surface-200 dark:border-surface-700',
+
+			// Misc
+			'appearance-none',
+			'cursor-pointer',
+		],
+	},
+	icon: {
+		class: ['relative z-10', 'mr-2'],
+	},
+}

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

@@ -0,0 +1,28 @@
+export default {
+	root: {
+		class: [
+			// Flex & Alignment
+			'flex items-center justify-between flex-wrap',
+			'gap-2',
+
+			// Spacing
+			'p-3',
+
+			// Shape
+			'rounded-md',
+
+			// Color
+			'bg-surface-0 dark:bg-surface-900',
+			'border border-surface-200 dark:border-surface-700',
+		],
+	},
+	start: {
+		class: 'flex items-center',
+	},
+	center: {
+		class: 'flex items-center',
+	},
+	end: {
+		class: 'flex items-center',
+	},
+}

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

@@ -0,0 +1,73 @@
+export default {
+	root: ({ context }) => ({
+		class: [
+			// Position and Shadows
+			'absolute',
+			'shadow-md',
+			'p-fadein',
+			// Spacing
+			{
+				'py-0 px-1':
+					context?.right ||
+					context?.left ||
+					(!context?.right &&
+						!context?.left &&
+						!context?.top &&
+						!context?.bottom),
+				'py-1 px-0': context?.top || context?.bottom,
+			},
+		],
+	}),
+	arrow: ({ context }) => ({
+		class: [
+			// Position
+
+			'absolute',
+
+			// Size
+			'w-0',
+			'h-0',
+
+			// Shape
+			'border-transparent',
+			'border-solid',
+			{
+				'border-y-[10px] border-r-[10px] border-l-0 border-r-surface-700':
+					context?.right ||
+					(!context?.right &&
+						!context?.left &&
+						!context?.top &&
+						!context?.bottom),
+				'border-y-[10px] border-l-[10px] border-r-0 border-l-surface-700':
+					context?.left,
+				'border-x-[10px] border-t-[10px] border-b-0 border-t-surface-700':
+					context?.top,
+				'border-x-[10px] border-b-[10px] border-t-0 border-b-surface-700':
+					context?.bottom,
+			},
+
+			// Spacing
+			{
+				'-mt-[10px] top-1/2':
+					context?.right ||
+					context?.left ||
+					(!context?.right &&
+						!context?.left &&
+						!context?.top &&
+						!context?.bottom),
+				'-ml-[10px] left-1/2': context?.top || context?.bottom,
+			},
+		],
+	}),
+	text: {
+		class: [
+			'p-3',
+			'bg-surface-700',
+			'text-white',
+			'leading-none',
+			'rounded-md',
+			'whitespace-pre-line',
+			'break-words',
+		],
+	},
+}