@cooperco/cooper-component-library 0.0.10

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

@@ -0,0 +1,297 @@
+export default {
+	root: ({ props, state, parent }) => ({
+		class: [
+			// Display and Position
+			'inline-flex',
+			'relative',
+			// Shape
+			{ 'rounded-md': parent.instance.$name !== 'InputGroup' },
+			{
+				'first:rounded-l-md rounded-none last:rounded-r-md':
+					parent.instance.$name == 'InputGroup',
+			},
+			{
+				'border-0 border-y border-l last:border-r':
+					parent.instance.$name == 'InputGroup',
+			},
+			{
+				'first:ml-0 ml-[-1px]':
+					parent.instance.$name == 'InputGroup' && !props.showButtons,
+			},
+
+			// Color and Background
+			{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+
+			'border',
+			{ 'dark:border-surface-700': parent.instance.$name != 'InputGroup' },
+			{ 'dark:border-surface-600': parent.instance.$name == 'InputGroup' },
+			{ 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+			// Invalid State
+			'invalid:focus:ring-red-200',
+			'invalid:hover:border-red-500',
+			{ 'border-red-500 dark:border-red-400': props.invalid },
+
+			// Transitions
+			'transition-all',
+			'duration-200',
+
+			// States
+			{
+				'hover:border-surface-400 dark:hover:border-surface-600':
+					!props.invalid,
+			},
+			{
+				'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10':
+					state.focused,
+			},
+
+			// Misc
+			'cursor-pointer',
+			'select-none',
+			{
+				'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
+					props.disabled,
+			},
+		],
+	}),
+	input: ({ props, parent }) => ({
+		class: [
+			//Font
+			'leading-[normal]',
+
+			// Display
+			'block',
+			'flex-auto',
+
+			// Color and Background
+			'bg-transparent',
+			'border-0',
+			{
+				'text-surface-800 dark:text-white/80': props.modelValue != undefined,
+				'text-surface-400 dark:text-surface-500': props.modelValue == undefined,
+			},
+			'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+			// Sizing and Spacing
+			'w-[1%]',
+			'py-2 px-3',
+			{ 'pr-7': props.showClear },
+
+			//Shape
+			'rounded-none',
+
+			// Transitions
+			'transition',
+			'duration-200',
+
+			// States
+			'focus:outline-none focus:shadow-none',
+
+			// Filled State *for FloatLabel
+			{
+				filled:
+					parent.instance?.$name == 'FloatLabel' && props.modelValue !== null,
+			},
+
+			// Misc
+			'relative',
+			'cursor-pointer',
+			'overflow-hidden overflow-ellipsis',
+			'whitespace-nowrap',
+			'appearance-none',
+		],
+	}),
+	trigger: {
+		class: [
+			// Flexbox
+			'flex items-center justify-center',
+			'shrink-0',
+
+			// Color and Background
+			'bg-transparent',
+			'text-surface-500',
+
+			// Size
+			'w-12',
+
+			// Shape
+			'rounded-r-md',
+		],
+	},
+	panel: {
+		class: [
+			// Colors
+			'bg-surface-0 dark:bg-surface-900',
+			'text-surface-700 dark:text-white/80',
+
+			// Shape
+			'border border-surface-300 dark:border-surface-700',
+			'rounded-md',
+			'shadow-md',
+		],
+	},
+	wrapper: {
+		class: [
+			// Sizing
+			'max-h-[200px]',
+
+			// Misc
+			'overflow-auto',
+		],
+	},
+	list: {
+		class: 'p-1 list-none m-0',
+	},
+	item: ({ context }) => ({
+		class: [
+			'relative',
+
+			// Font
+			'leading-none',
+
+			// Spacing
+			'm-0 px-3 py-2',
+			'first:mt-0 mt-[2px]',
+
+			// Shape
+			'border-0 rounded',
+
+			// Colors
+			{
+				'text-surface-700 dark:text-white/80':
+					!context.focused && !context.selected,
+				'bg-surface-200 dark:bg-surface-600/60':
+					context.focused && !context.selected,
+				'text-surface-700 dark:text-white/80':
+					context.focused && !context.selected,
+
+				'text-primary-highlight-inverse': context.selected,
+				'bg-primary-highlight': context.selected,
+			},
+
+			//States
+			{
+				'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
+					!context.focused && !context.selected,
+			},
+			{ 'hover:bg-primary-highlight-hover': context.selected },
+			{
+				'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]':
+					context.focused && !context.selected,
+			},
+
+			// Transition
+			'transition-shadow duration-200',
+
+			// Misc
+			'cursor-pointer overflow-hidden whitespace-nowrap',
+		],
+	}),
+	itemgroup: {
+		class: [
+			'font-semibold',
+
+			// Spacing
+			'm-0 py-2 px-3',
+
+			// Colors
+			'text-surface-400 dark:text-surface-500',
+
+			// Misc
+			'cursor-auto',
+		],
+	},
+	emptymessage: {
+		class: [
+			// Font
+			'leading-none',
+
+			// Spacing
+			'py-2 px-3',
+
+			// Color
+			'text-surface-800 dark:text-white/80',
+			'bg-transparent',
+		],
+	},
+	header: {
+		class: [
+			// Spacing
+			'pt-2 px-2 pb-0',
+			'm-0',
+
+			//Shape
+			'border-b-0',
+			'rounded-tl-md',
+			'rounded-tr-md',
+
+			// Color
+			'text-surface-700 dark:text-white/80',
+			'bg-surface-0 dark:bg-surface-900',
+			'border-surface-300 dark:border-surface-700',
+		],
+	},
+	filtercontainer: {
+		class: 'relative',
+	},
+	filterinput: {
+		class: [
+			// Font
+			'leading-[normal]',
+
+			// Sizing
+			'py-2 pl-3 pr-7',
+			'-mr-7',
+			'w-full',
+
+			//Color
+			'text-surface-700 dark:text-white/80',
+			'bg-surface-0 dark:bg-surface-950',
+			'border-surface-200 dark:border-surface-700',
+
+			// Shape
+			'border',
+			'rounded-lg',
+			'appearance-none',
+
+			// Transitions
+			'transition',
+			'duration-200',
+
+			// 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',
+
+			// Misc
+			'appearance-none',
+		],
+	},
+	filtericon: {
+		class: ['absolute', 'top-1/2 right-3', '-mt-2'],
+	},
+	clearicon: {
+		class: [
+			// Color
+			'text-surface-400 dark:text-surface-500',
+
+			// Position
+			'absolute',
+			'top-1/2',
+			'right-12',
+
+			// Spacing
+			'-mt-2',
+		],
+	},
+	loadingicon: {
+		class: 'text-surface-400 dark:text-surface-500 animate-spin',
+	},
+	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/fieldset/index.js

@@ -0,0 +1,95 @@
+export default {
+	root: {
+		class: [
+			// Spacing
+			'p-[1.125rem] pt-0',
+
+			// Shape
+			'rounded-md',
+
+			// Color
+			'border border-surface-200 dark:border-surface-700',
+			'bg-surface-0 dark:bg-surface-900',
+			'text-surface-700 dark:text-surface-0/80',
+		],
+	},
+	legend: ({ props }) => ({
+		class: [
+			// Font
+			'font-semibold',
+			'leading-none',
+
+			//Spacing
+			'p-0 mb-[0.375rem]',
+
+			// Shape
+			'rounded-md',
+
+			// Color
+			'text-surface-700 dark:text-surface-0/80',
+			'bg-surface-0 dark:bg-surface-900',
+
+			// Transition
+			'transition-none',
+
+			// States
+			{ 'hover:bg-surface-100 dark:hover:bg-surface-800': props.toggleable },
+		],
+	}),
+	toggler: ({ props }) => ({
+		class: [
+			// Alignments
+			'flex items-center justify-center',
+			'relative',
+
+			//Spacing
+			{ 'py-2 px-3': props.toggleable },
+
+			// Shape
+			{ 'rounded-md': props.toggleable },
+
+			// Color
+			{
+				'text-surface-700 dark:text-surface-200 hover:text-surface-900':
+					props.toggleable,
+			},
+
+			// States
+			{
+				'hover:text-surface-900 dark:hover:text-surface-100': props.toggleable,
+			},
+			{
+				'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300':
+					props.toggleable,
+			},
+
+			// Misc
+			{
+				'transition-none cursor-pointer overflow-hidden select-none':
+					props.toggleable,
+			},
+		],
+	}),
+	togglerIcon: {
+		class: 'mr-2 inline-block',
+	},
+	legendTitle: ({ props }) => ({
+		class: [
+			'flex items-center justify-center leading-none',
+			{ 'py-2 px-3': !props.toggleable },
+		],
+	}),
+	content: {
+		class: 'p-0',
+	},
+	transition: {
+		enterFromClass: 'max-h-0',
+		enterActiveClass:
+			'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+		enterToClass: 'max-h-[1000px]',
+		leaveFromClass: 'max-h-[1000px]',
+		leaveActiveClass:
+			'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+		leaveToClass: 'max-h-0',
+	},
+}

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

@@ -0,0 +1,175 @@
+export default {
+	input: {
+		class: 'hidden',
+	},
+	buttonbar: {
+		class: [
+			// Flexbox
+			'flex',
+			'flex-wrap',
+
+			// Colors
+			'bg-surface-0',
+			'dark:bg-surface-900',
+			'text-surface-700',
+			'dark:text-white/80',
+
+			// Spacing
+			'p-[1.125rem]',
+			'gap-2',
+
+			// Borders
+			'border',
+			'border-solid',
+			'border-surface-200',
+			'dark:border-surface-700',
+			'border-b-0',
+
+			// Shape
+			'rounded-tr-lg',
+			'rounded-tl-lg',
+		],
+	},
+	chooseButton: {
+		class: [
+			'relative',
+
+			// Alignments
+			'items-center inline-flex text-center align-bottom justify-center',
+
+			// Spacing
+			'px-4 py-2',
+
+			// Shape
+			'rounded-md',
+
+			// Font
+			'leading-[normal]',
+			'font-medium',
+
+			// Colors
+			'text-primary-inverse',
+			'bg-primary',
+			'border-primary',
+
+			// States
+			'hover:bg-primary-hover',
+			'focus:outline-none focus:outline-offset-0 focus:ring-1',
+			'focus:ring-primary',
+
+			// Misc
+			'overflow-hidden',
+			'cursor-pointer',
+		],
+	},
+	chooseIcon: {
+		class: ['mr-2', 'inline-block'],
+	},
+	chooseButtonLabel: {
+		class: ['flex-1', 'font-bold'],
+	},
+	uploadbutton: {
+		icon: {
+			class: 'mr-2',
+		},
+	},
+	cancelbutton: {
+		icon: {
+			class: 'mr-2',
+		},
+	},
+	content: {
+		class: [
+			// Position
+			'relative',
+
+			// Colors
+			'bg-surface-0',
+			'dark:bg-surface-900',
+			'text-surface-700',
+			'dark:text-white/80',
+
+			// Spacing
+			'p-[1.125rem]',
+
+			// Borders
+			'border border-t-0',
+			'border-surface-200',
+			'dark:border-surface-700',
+
+			// Shape
+			'rounded-b-lg',
+		],
+	},
+	file: {
+		class: [
+			// Flexbox
+			'flex',
+			'items-center',
+			'flex-wrap',
+
+			// Spacing
+			'p-4',
+			'mb-2',
+			'last:mb-0',
+
+			// Borders
+			'border',
+			'border-surface-200',
+			'dark:border-surface-700',
+			'gap-2',
+
+			// Shape
+			'rounded',
+		],
+	},
+	thumbnail: {
+		class: 'shrink-0',
+	},
+	fileName: {
+		class: 'mb-2 break-all',
+	},
+	fileSize: {
+		class: 'mr-2',
+	},
+	uploadicon: {
+		class: 'mr-2',
+	},
+	progressbar: {
+		root: {
+			class: [
+				// Position and Overflow
+				'overflow-hidden',
+				'absolute top-0 left-0',
+
+				// Shape and Size
+				'border-0',
+				'h-2',
+				'rounded-md',
+				'w-full',
+
+				// Colors
+				'bg-surface-100 dark:bg-surface-700',
+			],
+		},
+		value: {
+			class: [
+				// Flexbox & Overflow & Position
+				'absolute flex items-center justify-center overflow-hidden',
+
+				// Colors
+				'bg-primary',
+
+				// Spacing & Sizing
+				'm-0',
+				'h-full w-0',
+
+				// Shape
+				'border-0',
+
+				// Transitions
+				'transition-width duration-1000 ease-in-out',
+			],
+		},
+	},
+}

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

@@ -0,0 +1,26 @@
+export default {
+	root: {
+		class: [
+			'block relative',
+
+			// Base Label Appearance
+			'[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60',
+			'[&>*:last-child]:absolute',
+			'[&>*:last-child]:top-1/2',
+			'[&>*:last-child]:-translate-y-1/2',
+			'[&>*:last-child]:left-3',
+			'[&>*:last-child]:pointer-events-none',
+			'[&>*:last-child]:transition-all',
+			'[&>*:last-child]:duration-200',
+			'[&>*:last-child]:ease',
+
+			// Focus Label Appearance
+			'[&>*:last-child]:has-[:focus]:-top-3',
+			'[&>*:last-child]:has-[:focus]:text-sm',
+
+			// Filled Input Label Appearance
+			'[&>*:last-child]:has-[.filled]:-top-3',
+			'[&>*:last-child]:has-[.filled]:text-sm',
+		],
+	},
+}