@cooperco/cooper-component-library 0.0.10 → 0.1.0

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

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

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

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

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

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

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