@cooperco/cooper-component-library 0.0.10

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

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

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

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