@cooperco/cooper-component-library 0.0.10

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

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