@cooperco/cooper-component-library 0.0.10 → 0.1.1

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

@@ -1,718 +0,0 @@
-export default {
-	root: {
-		class: [
-			// Flexbox
-			'flex xl:flex-row flex-col',
-		],
-	},
-	sourcecontrols: {
-		class: [
-			// Flexbox & Alignment
-			'flex xl:flex-col justify-center gap-2',
-
-			// Spacing
-			'p-[1.125rem]',
-		],
-	},
-	sourcemoveupbutton: {
-		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',
-			],
-		},
-	},
-	sourcemovetopbutton: {
-		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',
-			],
-		},
-	},
-	sourcemovedownbutton: {
-		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',
-			],
-		},
-	},
-	sourcemovebottombutton: {
-		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',
-			],
-		},
-	},
-	sourcewrapper: {
-		class: [
-			// Flexbox
-			'grow shrink basis-2/4',
-
-			// Shape
-			'rounded-md',
-
-			// Color
-			'bg-surface-0 dark:bg-surface-900',
-			'border border-surface-200 dark:border-surface-700',
-			'outline-none',
-		],
-	},
-	sourceheader: {
-		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',
-		],
-	},
-	sourcelist: {
-		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',
-		],
-	}),
-	buttons: {
-		class: [
-			// Flexbox & Alignment
-			'flex xl:flex-col justify-center gap-2',
-
-			// Spacing
-			'p-[1.125rem]',
-		],
-	},
-	movetotargetbutton: {
-		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',
-			],
-		},
-	},
-	movealltotargetbutton: {
-		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',
-			],
-		},
-	},
-	movetosourcebutton: {
-		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',
-			],
-		},
-	},
-	movealltosourcebutton: {
-		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',
-			],
-		},
-	},
-	targetcontrols: {
-		class: [
-			// Flexbox & Alignment
-			'flex xl:flex-col justify-center gap-2',
-
-			// Spacing
-			'p-[1.125rem]',
-		],
-	},
-	targetmoveupbutton: {
-		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',
-			],
-		},
-	},
-	targetmovetopbutton: {
-		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',
-			],
-		},
-	},
-	targetmovedownbutton: {
-		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',
-			],
-		},
-	},
-	targetmovebottombutton: {
-		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',
-			],
-		},
-	},
-	targetwrapper: {
-		class: [
-			// Flexbox
-			'grow shrink basis-2/4',
-
-			// Shape
-			'rounded-md',
-
-			// Color
-			'bg-surface-0 dark:bg-surface-900',
-			'border border-surface-200 dark:border-surface-700',
-			'outline-none',
-		],
-	},
-	targetheader: {
-		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',
-		],
-	},
-	targetlist: {
-		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',
-		],
-	},
-	transition: {
-		enterFromClass: '!transition-none',
-		enterActiveClass: '!transition-none',
-		leaveActiveClass: '!transition-none',
-		leaveToClass: '!transition-none',
-	},
-}