@cooperco/cooper-component-library 0.0.10 → 0.1.1

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

@@ -1,132 +0,0 @@
-export default {
-	root: ({ props }) => ({
-		class: [
-			// Display
-			'inline-block',
-
-			// Misc
-			{
-				'opacity-60 select-none pointer-events-none cursor-default':
-					props.disabled,
-			},
-		],
-	}),
-	input: {
-		class: [
-			// Font
-			'text-base leading-none',
-
-			// Spacing
-			'm-0',
-			'p-0',
-
-			//Size
-			'w-6 h-6',
-
-			// Shape
-			'rounded-md',
-
-			// Colors
-			'bg-surface-0 dark:bg-surface-900',
-			'border border-surface-300 dark:border-surface-700',
-
-			// States
-			'hover:border-surface-400 dark:hover:border-surface-600',
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
-
-			// Transition
-			'transition-colors duration-200',
-
-			// Misc
-			'cursor-pointer',
-		],
-	},
-	panel: ({ props }) => ({
-		class: [
-			// Position & Size
-			{
-				'relative h-[166px] w-[193px]': props.inline,
-				'absolute h-[166px] w-[193px]': !props.inline,
-			},
-
-			// Shape
-			'shadow-md border',
-
-			// Colors
-			'bg-surface-800 dark:bg-surface-900 border-surface-600 dark:border-surface-700',
-		],
-	}),
-	selector: {
-		class: [
-			// Position
-			'absolute top-[8px] left-[8px]',
-
-			// Size
-			'h-[150px] w-[150px]',
-		],
-	},
-	color: {
-		class: [
-			// Size
-			'h-[150px] w-[150px]',
-		],
-		style:
-			'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)',
-	},
-	colorhandle: {
-		class: [
-			'absolute',
-
-			// Shape
-			'rounded-full border border-solid',
-
-			// Size
-			'h-[10px] w-[10px]',
-
-			// Spacing
-			'-ml-[5px] -mt-[5px]',
-
-			// Colors
-			'border-white',
-
-			// Misc
-			'cursor-pointer opacity-85',
-		],
-	},
-	hue: {
-		class: [
-			// Position
-			'absolute top-[8px] left-[167px]',
-
-			// Size
-			'h-[150px] w-[17px]',
-
-			// Opacity
-			'opacity-85',
-		],
-		style:
-			'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)',
-	},
-	huehandle: {
-		class: [
-			// Position
-			'absolute left-0 -ml-[2px] -mt-[5px]',
-
-			// Size
-			'h-[10px] w-[21px]',
-
-			// Shape
-			'border-solid border-2',
-
-			// Misc
-			'cursor-pointer opacity-85',
-		],
-	},
-	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/confirmpopup/index.js

@@ -1,111 +0,0 @@
-export default {
-	root: {
-		class: [
-			// Shape
-			'rounded-lg',
-			'shadow-lg',
-			'border-0',
-
-			// Positioning
-			'z-40 transform origin-center',
-			'mt-3 absolute left-0 top-0',
-
-			// Color
-			'bg-surface-0 dark:bg-surface-900',
-			'text-surface-700 dark:text-surface-0/80',
-
-			// Before: Arrow
-			'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-[calc(var(--overlayArrowLeft,0)+1.25rem)] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-200 dark:before:border-b-surface-700',
-			'after:absolute after:w-0 after:-top-[0.54rem] after:h-0 after:border-transparent after:border-solid after:ml-[calc(var(--overlayArrowLeft,0)+1.3rem)] after:border-x-[9px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-900',
-		],
-	},
-	content: {
-		class: [
-			'p-4 items-center flex',
-			'rounded-t-lg',
-			'border-x border-t last:border-b border-surface-200 dark:border-surface-700',
-		],
-	},
-	icon: {
-		class: 'text-2xl mr-4',
-	},
-	footer: {
-		class: [
-			// Flexbox and Alignment
-			'flex items-center justify-end',
-			'shrink-0',
-			'text-right',
-			'gap-2',
-
-			// Spacing
-			'px-4',
-			'pb-4',
-
-			// Shape
-			'border-t-0',
-			'rounded-b-lg',
-
-			// Colors
-			'bg-surface-0 dark:bg-surface-900',
-			'text-surface-700 dark:text-surface-0/80',
-			'border-x border-b border-surface-200 dark:border-surface-700',
-		],
-	},
-	rejectbutton: {
-		root: {
-			class: [
-				'relative',
-
-				// Alignments
-				'items-center inline-flex text-center align-bottom justify-center',
-
-				// Sizes & Spacing
-				'px-4 py-2 leading-none',
-
-				// Shape
-				'rounded-md',
-
-				// Color
-				'text-primary',
-
-				// States
-				'hover:bg-primary-300/20',
-				'focus:outline-none focus:outline-offset-0 focus:ring',
-				'focus:ring-primary-500 dark:focus:ring-primary-400',
-			],
-		},
-	},
-	acceptbutton: {
-		root: {
-			class: [
-				'relative',
-
-				// Alignments
-				'items-center inline-flex text-center align-bottom justify-center',
-
-				// Sizes & Spacing
-				'px-4 py-2 leading-none',
-
-				// Shape
-				'rounded-md',
-
-				// Color
-				'text-primary-inverse',
-				'bg-primary',
-				'border border-primary',
-
-				// States
-				'hover:bg-primary-hover hover:border-primary-hover',
-				'focus:outline-none focus:outline-offset-0 focus:ring',
-				'focus:ring-primary-500 dark:focus:ring-primary-400',
-			],
-		},
-	},
-	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/contextmenu/index.js

@@ -1,132 +0,0 @@
-export default {
-	root: {
-		class: [
-			// Sizing and Shape
-			'min-w-[12.5rem]',
-			'rounded-md',
-			'shadow-md',
-
-			// Spacing
-			'p-1',
-
-			// Colors
-			'bg-surface-0 dark:bg-surface-900',
-			'text-surface-700 dark:text-white/80',
-			'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-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'],
-	},
-	submenu: ({ props }) => ({
-		class: [
-			// Size
-			'w-full sm:w-48',
-
-			// Spacing
-			'p-1',
-			'm-0',
-			'list-none',
-
-			// Shape
-			'shadow-md',
-			'rounded-md',
-			'dark:border 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',
-		],
-	}),
-	submenuicon: {
-		class: ['ml-auto'],
-	},
-	separator: {
-		class: 'border-t border-surface-200 dark:border-surface-600 my-1',
-	},
-	transition: {
-		enterFromClass: 'opacity-0',
-		enterActiveClass: 'transition-opacity duration-250',
-	},
-}