@cooperco/cooper-component-library 0.0.10 → 0.1.0

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

@@ -1,281 +0,0 @@
-export default {
-	root: {
-		class: [
-			// Flexbox
-			'flex xl:flex-row flex-col',
-		],
-	},
-	controls: {
-		class: [
-			// Flexbox & Alignment
-			'flex xl:flex-col justify-center gap-2',
-
-			// Spacing
-			'p-[1.125rem]',
-		],
-	},
-	moveupbutton: {
-		root: ({ context }) => ({
-			class: [
-				// Flexbox & Alignment
-				'relative inline-flex items-center justify-center',
-
-				// Shape
-				'rounded-md',
-
-				// Color
-				'text-surface-700 dark:text-surface-0',
-				'bg-surface-100 dark:bg-surface-800',
-				'border border-surface-100 dark:border-surface-800',
-
-				// Spacing & Size
-				'w-10',
-				'm-0',
-				'px-0 py-2',
-
-				// Transitions
-				'transition duration-200 ease-in-out',
-
-				// State
-				'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
-				'focus:outline-none focus:outline-offset-0 focus:ring-1',
-				'focus:ring-primary-500 dark:focus:ring-primary-400',
-				{ 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-				// Interactivity
-				'cursor-pointer user-select-none',
-			],
-		}),
-		label: {
-			class: [
-				//Font
-				'leading-[normal]',
-
-				// Flexbox
-				'flex-initial',
-
-				// Size
-				'w-0',
-			],
-		},
-	},
-	movedownbutton: {
-		root: ({ context }) => ({
-			class: [
-				// Flexbox & Alignment
-				'relative inline-flex items-center justify-center',
-
-				// Shape
-				'rounded-md',
-
-				// Color
-				'text-surface-700 dark:text-surface-0',
-				'bg-surface-100 dark:bg-surface-800',
-				'border border-surface-100 dark:border-surface-800',
-
-				// Spacing & Size
-				'w-10',
-				'm-0',
-				'px-0 py-2',
-
-				// Transitions
-				'transition duration-200 ease-in-out',
-
-				// State
-				'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
-				'focus:outline-none focus:outline-offset-0 focus:ring-1',
-				'focus:ring-primary-500 dark:focus:ring-primary-400',
-				{ 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-				// Interactivity
-				'cursor-pointer user-select-none',
-			],
-		}),
-		label: {
-			class: [
-				//Font
-				'leading-[normal]',
-
-				// Flexbox
-				'flex-initial',
-
-				// Size
-				'w-0',
-			],
-		},
-	},
-	movetopbutton: {
-		root: ({ context }) => ({
-			class: [
-				// Flexbox & Alignment
-				'relative inline-flex items-center justify-center',
-
-				// Shape
-				'rounded-md',
-
-				// Color
-				'text-surface-700 dark:text-surface-0',
-				'bg-surface-100 dark:bg-surface-800',
-				'border border-surface-100 dark:border-surface-800',
-
-				// Spacing & Size
-				'w-10',
-				'm-0',
-				'px-0 py-2',
-
-				// Transitions
-				'transition duration-200 ease-in-out',
-
-				// State
-				'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
-				'focus:outline-none focus:outline-offset-0 focus:ring-1',
-				'focus:ring-primary-500 dark:focus:ring-primary-400',
-				{ 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-				// Interactivity
-				'cursor-pointer user-select-none',
-			],
-		}),
-		label: {
-			class: [
-				//Font
-				'leading-[normal]',
-
-				// Flexbox
-				'flex-initial',
-
-				// Size
-				'w-0',
-			],
-		},
-	},
-	movebottombutton: {
-		root: ({ context }) => ({
-			class: [
-				// Flexbox & Alignment
-				'relative inline-flex items-center justify-center',
-
-				// Shape
-				'rounded-md',
-
-				// Color
-				'text-surface-700 dark:text-surface-0',
-				'bg-surface-100 dark:bg-surface-800',
-				'border border-surface-100 dark:border-surface-800',
-
-				// Spacing & Size
-				'w-10',
-				'm-0',
-				'px-0 py-2',
-
-				// Transitions
-				'transition duration-200 ease-in-out',
-
-				// State
-				'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
-				'focus:outline-none focus:outline-offset-0 focus:ring-1',
-				'focus:ring-primary-500 dark:focus:ring-primary-400',
-				{ 'cursor-default pointer-events-none opacity-60': context.disabled },
-
-				// Interactivity
-				'cursor-pointer user-select-none',
-			],
-		}),
-		label: {
-			class: [
-				//Font
-				'leading-[normal]',
-
-				// Flexbox
-				'flex-initial',
-
-				// Size
-				'w-0',
-			],
-		},
-	},
-	container: {
-		class: [
-			'flex-auto',
-
-			// Shape
-			'rounded-md',
-
-			// Color
-			'bg-surface-0 dark:bg-surface-900',
-			'border border-surface-200 dark:border-surface-700',
-			'outline-none',
-		],
-	},
-	header: {
-		class: [
-			'font-semibold',
-
-			// Shape
-			'border-0 rounded-t-md',
-
-			// Spacing
-			'pt-3 px-4 pb-2',
-
-			// Color
-			'text-surface-700 dark:text-white/80',
-			'bg-surface-0 dark:bg-surface-900',
-		],
-	},
-	list: {
-		class: [
-			// Spacing
-			'list-none m-0',
-			'p-1',
-
-			// Size
-			'min-h-[12rem] max-h-[24rem]',
-
-			// Shape
-			'rounded-b-md',
-
-			// Color
-			'text-surface-700 dark:text-white/80',
-			'bg-surface-0 dark:bg-surface-900',
-
-			// Focus & Outline
-			'outline-none',
-
-			// Misc
-			'overflow-auto',
-		],
-	},
-	item: ({ context }) => ({
-		class: [
-			// Position
-			'relative',
-
-			// Spacing
-			'py-2 px-3 m-0 my-[2px] first:mt-0 last:mb-0',
-
-			// Shape
-			'border-none',
-			'rounded-md',
-
-			// Transition
-			'transition duration-200',
-
-			// Color
-			{
-				'text-surface-700 dark:text-white/80 bg-surface-0 dark:bg-surface-900':
-					!context.active,
-			},
-			{ 'text-primary-highlight-inverse bg-primary-highlight': context.active },
-
-			// State
-			{
-				'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
-					!context.active,
-				'hover:bg-primary-highlight-hover': context.active,
-			},
-
-			// Misc
-			'cursor-pointer overflow-hidden',
-		],
-	}),
-}

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

@@ -1,142 +0,0 @@
-export default {
-	table: {
-		class: [
-			// Spacing & Position
-			'mx-auto my-0',
-
-			// Table Style
-			'border-spacing-0 border-separate',
-		],
-	},
-	cell: {
-		class: [
-			// Alignment
-			'text-center align-top',
-
-			// Spacing
-			'py-0 px-3',
-		],
-	},
-	node: ({ context }) => ({
-		class: [
-			'relative inline-block',
-
-			// Spacing
-			'py-3 px-4',
-
-			// Shape
-			'border',
-			'rounded-md',
-			'border-surface-200 dark:border-surface-700',
-			// Color
-			{
-				'text-surface-600 dark:text-white/80': !context?.selected,
-				'bg-surface-0 dark:bg-surface-900': !context?.selected,
-				'text-primary-highlight-inverse': context?.selected,
-				'bg-primary-highlight': context?.selected,
-			},
-
-			// States
-			{
-				'hover:bg-surface-100 dark:hover:bg-surface-800':
-					context?.selectable && !context?.selected,
-				'hover:bg-primary-highlight-hover':
-					context?.selectable && context?.selected,
-			},
-
-			{ 'cursor-pointer': context?.selectable },
-		],
-	}),
-	linecell: {
-		class: [
-			// Alignment
-			'text-center align-top',
-
-			// Spacing
-			'py-0 px-3',
-		],
-	},
-	linedown: {
-		class: [
-			// Spacing
-			'mx-auto my-0',
-
-			// Size
-			'w-px h-[20px]',
-
-			// Color
-			'bg-surface-200 dark:bg-surface-700',
-		],
-	},
-	lineleft: ({ context }) => ({
-		class: [
-			// Alignment
-			'text-center align-top',
-
-			// Spacing
-			'py-0 px-3',
-
-			// Shape
-			'rounded-none border-r',
-			{ 'border-t': context.lineTop },
-
-			// Color
-			'border-surface-200 dark:border-surface-700',
-		],
-	}),
-	lineright: ({ context }) => ({
-		class: [
-			// Alignment
-			'text-center align-top',
-
-			// Spacing
-			'py-0 px-3',
-
-			// Shape
-			'rounded-none',
-
-			// Color
-			{
-				'border-t border-surface-200 dark:border-surface-700': context.lineTop,
-			},
-		],
-	}),
-	nodecell: {
-		class: 'text-center align-top py-0 px-3',
-	},
-	nodetoggler: {
-		class: [
-			// Position
-			'absolute bottom-[-0.75rem] left-2/4 -ml-3',
-			'z-20',
-
-			// Flexbox
-			'flex items-center justify-center',
-
-			// Size
-			'w-6 h-6',
-
-			// Shape
-			'rounded-full',
-			'border border-surface-200 dark:border-surface-700',
-
-			// Color
-			'bg-inherit text-inherit',
-
-			// Focus
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-
-			// Misc
-			'cursor-pointer no-underline select-none',
-		],
-	},
-	nodetogglericon: {
-		class: [
-			// Position
-			'static inline-block',
-
-			// Size
-			'w-4 h-4',
-		],
-	},
-}

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

@@ -1,34 +0,0 @@
-export default {
-	root: {
-		class: [
-			// Shape
-			'rounded-md shadow-lg',
-
-			// Position
-			'absolute left-0 top-0 mt-2',
-			'z-40 transform origin-center',
-
-			// 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-5 items-center flex',
-			'rounded-lg',
-			'border border-surface-200 dark:border-surface-700',
-		],
-	},
-	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',
-	},
-}