@cooperco/cooper-component-library 0.0.10

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

@@ -0,0 +1,40 @@
+export default {
+	content: {
+		class: [
+			// Spacing
+			'p-0',
+
+			// Shape
+			'border-0',
+
+			// Color
+			'text-surface-700 dark:text-white/80',
+			'bg-surface-0 dark:bg-surface-900',
+		],
+	},
+	grid: {
+		class: [
+			// flex
+			'flex flex-wrap',
+
+			// Spacing
+			'ml-0 mr-0 mt-0',
+
+			// Color
+			'bg-surface-0 dark:bg-surface-900',
+		],
+	},
+	header: {
+		class: [
+			'font-semibold',
+
+			// Spacing
+			'py-3 px-4',
+
+			// Color
+			'text-surface-800 dark:text-white/80',
+			'bg-surface-00 dark:bg-surface-900',
+			'border-b border-surface-200 dark:border-surface-700',
+		],
+	},
+}

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

@@ -0,0 +1,3 @@
+export default {
+	root: {},
+}

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

@@ -0,0 +1,250 @@
+export default {
+	root: ({ state }) => ({
+		class: [
+			// Shape
+			'rounded-lg',
+			'shadow-lg',
+			'border-0',
+
+			// Size
+			'max-h-[90vh]',
+			'w-[50vw]',
+			'm-0',
+
+			// Color
+			'bg-surface-0 dark:bg-surface-900',
+			'[&:last-child]:border-b',
+			'border-surface-200 dark:border-surface-700',
+
+			// Transitions
+			'transform',
+			'scale-100',
+
+			// Maximized State
+			{
+				'transition-none': state.maximized,
+				'transform-none': state.maximized,
+				'!w-screen': state.maximized,
+				'!h-screen': state.maximized,
+				'!max-h-full': state.maximized,
+				'!top-0': state.maximized,
+				'!left-0': state.maximized,
+			},
+		],
+	}),
+	header: {
+		class: [
+			// Flexbox and Alignment
+			'flex items-center justify-between',
+			'shrink-0',
+
+			// Spacing
+			'p-6',
+
+			// Shape
+			'rounded-tl-lg',
+			'rounded-tr-lg',
+
+			// Colors
+			'text-surface-700 dark:text-surface-0/80',
+			'border border-b-0',
+			'border-surface-200 dark:border-surface-700',
+		],
+	},
+	title: {
+		class: ['font-semibold text-xl leading-[normal]'],
+	},
+	icons: {
+		class: ['flex items-center'],
+	},
+	closeButton: {
+		class: [
+			'relative',
+
+			// Flexbox and Alignment
+			'flex items-center justify-center',
+
+			// Size and Spacing
+			'mr-2',
+			'last:mr-0',
+			'w-7 h-7',
+
+			// Shape
+			'border-0',
+			'rounded-full',
+
+			// Colors
+			'text-surface-500',
+			'bg-transparent',
+
+			// Transitions
+			'transition duration-200 ease-in-out',
+
+			// States
+			'hover:text-surface-700 dark:hover:text-white/80',
+			'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',
+
+			// Misc
+			'overflow-hidden',
+		],
+	},
+	maximizablebutton: {
+		class: [
+			'relative',
+
+			// Flexbox and Alignment
+			'flex items-center justify-center',
+
+			// Size and Spacing
+			'mr-2',
+			'last:mr-0',
+			'w-7 h-7',
+
+			// Shape
+			'border-0',
+			'rounded-full',
+
+			// Colors
+			'text-surface-500',
+			'bg-transparent',
+
+			// Transitions
+			'transition duration-200 ease-in-out',
+
+			// States
+			'hover:text-surface-700 dark:hover:text-white/80',
+			'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',
+
+			// Misc
+			'overflow-hidden',
+		],
+	},
+	closeButtonIcon: {
+		class: [
+			// Display
+			'inline-block',
+
+			// Size
+			'w-4',
+			'h-4',
+		],
+	},
+	maximizableicon: {
+		class: [
+			// Display
+			'inline-block',
+
+			// Size
+			'w-4',
+			'h-4',
+		],
+	},
+	content: ({ state, instance }) => ({
+		class: [
+			// Spacing
+			'px-6',
+			'pb-6',
+			'pt-0',
+
+			// Shape
+			{
+				grow: state.maximized,
+				'rounded-bl-lg': !instance.$slots.footer,
+				'rounded-br-lg': !instance.$slots.footer,
+			},
+
+			// Colors
+			'text-surface-700 dark:text-surface-0/80',
+			'border border-t-0 border-b-0',
+			'border-surface-200 dark:border-surface-700',
+
+			// Misc
+			'overflow-y-auto',
+		],
+	}),
+	footer: {
+		class: [
+			// Flexbox and Alignment
+			'flex items-center justify-end',
+			'shrink-0',
+			'text-right',
+			'gap-2',
+
+			// Spacing
+			'px-6',
+			'pb-6',
+
+			// Shape
+			'border-t-0',
+			'rounded-b-lg',
+
+			// Colors
+			'bg-surface-0 dark:bg-surface-900',
+			'text-surface-700 dark:text-surface-0/80',
+			'border border-t-0 border-b-0',
+			'border-surface-200 dark:border-surface-700',
+		],
+	},
+	mask: ({ props }) => ({
+		class: [
+			// Transitions
+			'transition-all',
+			'duration-300',
+			{ 'p-5': !props.position == 'full' },
+
+			// Background and Effects
+			{ 'has-[.mask-active]:bg-transparent bg-black/40': props.modal },
+		],
+	}),
+	transition: ({ props }) => {
+		return props.position === 'top'
+			? {
+					enterFromClass:
+						'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+					enterActiveClass: 'transition-all duration-200 ease-out',
+					leaveActiveClass: 'transition-all duration-200 ease-out',
+					leaveToClass:
+						'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
+				}
+			: props.position === 'bottom'
+				? {
+						enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
+						enterActiveClass: 'transition-all duration-200 ease-out',
+						leaveActiveClass: 'transition-all duration-200 ease-out',
+						leaveToClass:
+							'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active',
+					}
+				: props.position === 'left' ||
+					  props.position === 'topleft' ||
+					  props.position === 'bottomleft'
+					? {
+							enterFromClass:
+								'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
+							enterActiveClass: 'transition-all duration-200 ease-out',
+							leaveActiveClass: 'transition-all duration-200 ease-out',
+							leaveToClass:
+								'opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0 mask-active',
+						}
+					: props.position === 'right' ||
+						  props.position === 'topright' ||
+						  props.position === 'bottomright'
+						? {
+								enterFromClass:
+									'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+								enterActiveClass: 'transition-all duration-200 ease-out',
+								leaveActiveClass: 'transition-all duration-200 ease-out',
+								leaveToClass:
+									'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+							}
+						: {
+								enterFromClass: 'opacity-0 scale-75 mask-active',
+								enterActiveClass: 'transition-all duration-200 ease-out',
+								leaveActiveClass: 'transition-all duration-200 ease-out',
+								leaveToClass: 'opacity-0 scale-75 mask-active',
+							}
+	},
+}

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

@@ -0,0 +1,72 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			// Flex and Position
+			'flex relative',
+			{ 'justify-center': props.layout == 'vertical' },
+			{ 'items-center': props.layout == 'vertical' },
+			{
+				'justify-start': props?.align == 'left' && props.layout == 'horizontal',
+				'justify-center':
+					props?.align == 'center' && props.layout == 'horizontal',
+				'justify-end': props?.align == 'right' && props.layout == 'horizontal',
+				'items-center': props?.align == 'top' && props.layout == 'vertical',
+				'items-start': props?.align == 'center' && props.layout == 'vertical',
+				'items-end': props?.align == 'bottom' && props.layout == 'vertical',
+			},
+
+			// Spacing
+			{
+				'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
+				'mx-4 md:mx-5 py-5': props.layout == 'vertical',
+			},
+
+			// Size
+			{
+				'w-full': props.layout == 'horizontal',
+				'min-h-full': props.layout == 'vertical',
+			},
+
+			// Before: Line
+			'before:block',
+
+			// Position
+			{
+				'before:absolute before:left-0 before:top-1/2':
+					props.layout == 'horizontal',
+				'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2':
+					props.layout == 'vertical',
+			},
+
+			// Size
+			{
+				'before:w-full': props.layout == 'horizontal',
+				'before:min-h-full': props.layout == 'vertical',
+			},
+
+			// Shape
+			{
+				'before:border-solid': props.type == 'solid',
+				'before:border-dotted': props.type == 'dotted',
+				'before:border-dashed': props.type == 'dashed',
+			},
+
+			// Color
+			{
+				'before:border-t before:border-surface-200 before:dark:border-surface-600':
+					props.layout == 'horizontal',
+				'before:border-l before:border-surface-200 before:dark:border-surface-600':
+					props.layout == 'vertical',
+			},
+		],
+	}),
+	content: {
+		class: [
+			// Space and Position
+			'px-1 z-10',
+
+			// Color
+			'bg-surface-0 dark:bg-surface-800',
+		],
+	},
+}

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

@@ -0,0 +1,97 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			// Positioning
+			'absolute z-1',
+			{
+				'left-0 bottom-0 w-full': props.position == 'bottom',
+				'left-0 top-0 w-full': props.position == 'top',
+				'left-0 top-0 h-full': props.position == 'left',
+				'right-0 top-0 h-full': props.position == 'right',
+			},
+
+			// Flexbox & Alignment
+			'flex justify-center items-center',
+
+			// Interactivity
+			'pointer-events-none',
+		],
+	}),
+	container: {
+		class: [
+			// Flexbox
+			'flex',
+
+			// Shape & Border
+			'rounded-md',
+
+			// Color
+			'bg-surface-0/10 dark:bg-surface-900/20 border border-surface-0/20',
+			'backdrop-blur-sm',
+
+			// Spacing
+			'p-2',
+
+			// Misc
+			'pointer-events-auto',
+		],
+	},
+	menu: ({ props }) => ({
+		class: [
+			// Flexbox & Alignment
+			'flex items-center justify-center',
+			{
+				'flex-col': props.position == 'left' || props.position == 'right',
+			},
+
+			// List Style
+			'm-0 p-0 list-none',
+
+			// Shape
+			'outline-none',
+		],
+	}),
+	menuitem: ({ props, context, instance }) => ({
+		class: [
+			// Spacing & Shape
+			'p-2 rounded-md',
+
+			// Conditional Scaling
+			{
+				'hover:scale-150': instance.currentIndex === context.index,
+				'scale-125':
+					instance.currentIndex - 1 === context.index ||
+					instance.currentIndex + 1 === context.index,
+				'scale-110':
+					instance.currentIndex - 2 === context.index ||
+					instance.currentIndex + 2 === context.index,
+			},
+
+			// Positioning & Hover States
+			{
+				'origin-bottom hover:mx-6': props.position == 'bottom',
+				'origin-top hover:mx-6': props.position == 'top',
+				'origin-left hover:my-6': props.position == 'left',
+				'origin-right hover:my-6': props.position == 'right',
+			},
+
+			// Transitions & Transform
+			'transition-all duration-200 ease-cubic-bezier-will-change-transform transform',
+		],
+	}),
+	action: {
+		class: [
+			// Flexbox & Alignment
+			'flex flex-col items-center justify-center',
+
+			// Position
+			'relative',
+
+			// Size
+			'w-16 h-16',
+
+			// Misc
+			'cursor-default overflow-hidden',
+		],
+	},
+}