@cooperco/cooper-component-library 0.0.10

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

@@ -0,0 +1,53 @@
+export default {
+	root: {
+		class: [
+			//Flex
+			'flex flex-col',
+
+			//Shape
+			'rounded-[12px]',
+			'shadow-md',
+
+			//Color
+			'bg-surface-0 dark:bg-surface-900',
+			'text-surface-700 dark:text-surface-0',
+		],
+	},
+	body: {
+		class: [
+			//Flex
+			'flex flex-col',
+			'gap-4',
+
+			'p-6',
+		],
+	},
+	caption: {
+		class: [
+			//Flex
+			'flex flex-col',
+			'gap-2',
+		],
+	},
+	title: {
+		class: 'text-xl font-semibold mb-0',
+	},
+	subtitle: {
+		class: [
+			//Font
+			'font-normal',
+
+			//Spacing
+			'mb-0',
+
+			//Color
+			'text-surface-600 dark:text-surface-0/60',
+		],
+	},
+	content: {
+		class: 'p-0',
+	},
+	footer: {
+		class: 'p-0',
+	},
+}

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

@@ -0,0 +1,160 @@
+export default {
+	root: {
+		class: [
+			// Flexbox
+			'flex flex-col',
+		],
+	},
+	content: {
+		class: [
+			// Flexbox & Overflow
+			'flex flex-col overflow-auto',
+		],
+	},
+	container: ({ props }) => ({
+		class: [
+			// Flexbox
+			'flex',
+
+			// Orientation
+			{
+				'flex-row': props.orientation !== 'vertical',
+				'flex-col': props.orientation == 'vertical',
+			},
+		],
+	}),
+	previousbutton: {
+		class: [
+			// Flexbox & Alignment
+			'flex justify-center items-center self-center',
+
+			// Sizing & Overflow
+			'overflow-hidden w-8 h-8',
+
+			// Spacing
+			'mx-2',
+
+			// Shape
+			'rounded-full',
+
+			// Border & Background
+			'border-0 bg-transparent',
+
+			// Color
+			'text-surface-600',
+
+			// States
+			'hover:bg-surface-50 dark:hover:bg-surface-800',
+			'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+			// Transitions
+			'transition duration-200 ease-in-out',
+		],
+	},
+	nextbutton: {
+		class: [
+			// Flexbox & Alignment
+			'flex justify-center items-center self-center',
+
+			// Sizing & Overflow
+			'overflow-hidden w-8 h-8',
+
+			// Spacing
+			'mx-2',
+
+			// Shape
+			'rounded-full',
+
+			// Border & Background
+			'border-0 bg-transparent',
+
+			// Color
+			'text-surface-600',
+
+			// States
+			'hover:bg-surface-50 dark:hover:bg-surface-800',
+			'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
+
+			// Transitions
+			'transition duration-200 ease-in-out',
+		],
+	},
+	itemscontent: {
+		class: [
+			// Overflow & Width
+			'overflow-hidden w-full',
+		],
+	},
+	itemscontainer: ({ props }) => ({
+		class: [
+			// Flexbox
+			'flex',
+
+			// Orientation & Sizing
+			{
+				'flex-row': props.orientation !== 'vertical',
+				'flex-col h-full': props.orientation == 'vertical',
+			},
+		],
+	}),
+	item: ({ props }) => ({
+		class: [
+			// Flexbox
+			'flex shrink-0 grow ',
+
+			// Size
+			{
+				'w-full sm:w-[50%] md:w-[33.333333333333336%]':
+					props.orientation !== 'vertical',
+
+				'w-full h-full': props.orientation == 'vertical',
+			},
+		],
+	}),
+	itemcloned: ({ props }) => ({
+		class: [
+			// Flexbox
+			'flex shrink-0 grow',
+			'unvisible',
+
+			// Size
+			{
+				'w-full sm:w-[50%] md:w-[33.333333333333336%]':
+					props.orientation !== 'vertical',
+
+				'w-full h-full': props.orientation == 'vertical',
+			},
+		],
+	}),
+	indicators: {
+		class: [
+			// Flexbox & Alignment
+			'flex flex-row justify-center flex-wrap',
+		],
+	},
+	indicator: {
+		class: [
+			// Spacing
+			'mr-2 mb-2',
+		],
+	},
+	indicatorbutton: ({ context }) => ({
+		class: [
+			// Sizing & Shape
+			'w-8 h-2 rounded-md',
+
+			// Transitions
+			'transition duration-200',
+
+			// Focus Styles
+			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
+
+			// Color & Background
+			{
+				'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600':
+					!context.highlighted,
+				'bg-primary hover:bg-primary-hover': context.highlighted,
+			},
+		],
+	}),
+}

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

@@ -0,0 +1,220 @@
+export default {
+	root: ({ props, state }) => ({
+		class: [
+			// Display and Position
+			'inline-flex',
+			'relative',
+
+			// Shape
+			'rounded-md',
+
+			// Color and Background
+			{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+			'border',
+			{ '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':
+					state.focused,
+			},
+
+			// Misc
+			'cursor-pointer',
+			'select-none',
+			{
+				'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
+					props.disabled,
+			},
+		],
+	}),
+	label: ({ props }) => ({
+		class: [
+			// Font
+			'leading-none',
+
+			// Flex & Alignment
+			'flex flex-auto',
+
+			// Sizing and Spacing
+			'w-[1%]',
+			'py-2 px-3',
+
+			//Shape
+			'rounded-none',
+
+			// Color and Background
+			'bg-transparent',
+			'border-0',
+			{
+				'text-surface-800 dark:text-white/80': props.modelValue,
+				'text-surface-400 dark:text-surface-500': !props.modelValue,
+			},
+			'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+
+			// Transitions
+			'transition',
+			'duration-200',
+
+			// States
+			'focus:outline-none focus:shadow-none',
+
+			// Misc
+			'relative',
+			'cursor-pointer',
+			'overflow-hidden overflow-ellipsis',
+			'whitespace-nowrap',
+			'appearance-none',
+		],
+	}),
+	dropdownbutton: {
+		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: [
+			//Shape
+			'rounded-[4px]',
+
+			// Spacing
+			'first:mt-0 mt-[2px]',
+
+			// Colors
+			{
+				'text-surface-500 dark:text-white/70':
+					!context.focused && !context.active,
+				'text-surface-500 dark:text-white/70 bg-surface-200':
+					context.focused && !context.active,
+				'text-primary-highlight-inverse bg-primary-highlight':
+					(context.focused && context.active) ||
+					context.active ||
+					(!context.focused && context.active),
+			},
+
+			// Transitions
+			'transition-shadow',
+			'duration-200',
+
+			// States
+			{
+				'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
+					!context.active,
+				'hover:bg-primary-highlight-hover text-primary-highlight-inverse':
+					context.active,
+			},
+
+			// Disabled
+			{ 'opacity-60 pointer-events-none cursor-default': context.disabled },
+		],
+	}),
+	content: {
+		class: [
+			'relative',
+			'leading-[normal]',
+
+			// Flexbox
+			'flex',
+			'items-center',
+
+			// Spacing
+			'py-2',
+			'px-3',
+
+			// Color
+			'text-surface-700 dark:text-white/80',
+
+			// Misc
+			'no-underline',
+			'overflow-hidden',
+			'cursor-pointer',
+			'select-none',
+		],
+	},
+	groupicon: {
+		class: [
+			// Alignment
+			'ml-auto',
+		],
+	},
+	sublist: {
+		class: [
+			// Spacing
+			'p-1',
+			'm-0',
+			'list-none',
+			'min-w-[12.5rem]',
+
+			// Shape
+			'shadow-none sm:shadow-md',
+			'rounded-md',
+			'border border-surface-200 dark:border-surface-700',
+
+			// Position
+			'static sm:absolute',
+			'z-10',
+
+			// Color
+			'bg-surface-0 dark:bg-surface-900',
+		],
+	},
+	separator: {
+		class: 'border-t border-surface-200 dark:border-surface-600 my-1',
+	},
+	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/checkbox/index.js

@@ -0,0 +1,107 @@
+export default {
+	root: {
+		class: [
+			'relative',
+
+			// Alignment
+			'inline-flex',
+			'align-bottom',
+
+			// Size
+			'w-5',
+			'h-5',
+
+			// Misc
+			'cursor-pointer',
+			'select-none',
+		],
+	},
+	box: ({ props, context }) => ({
+		class: [
+			// Alignment
+			'flex',
+			'items-center',
+			'justify-center',
+
+			// Size
+			'w-5',
+			'h-5',
+
+			// Shape
+			'rounded',
+			'border',
+
+			// Colors
+			{
+				'border-surface-300 dark:border-surface-700':
+					!context.checked && !props.invalid,
+				'bg-surface-0  dark:bg-surface-950':
+					!context.checked && !props.invalid && !props.disabled,
+				'border-primary bg-primary': context.checked,
+			},
+
+			// Invalid State
+			'invalid:focus:ring-red-200',
+			'invalid:hover:border-red-500',
+			{ 'border-red-500 dark:border-red-400': props.invalid },
+
+			// States
+			{
+				'peer-hover:border-surface-400 dark:peer-hover:border-surface-600':
+					!props.disabled && !context.checked && !props.invalid,
+				'peer-hover:bg-primary-hover peer-hover:border-primary-hover':
+					!props.disabled && context.checked,
+				'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400':
+					!props.disabled,
+				'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
+					props.disabled,
+			},
+
+			// Transitions
+			'transition-colors',
+			'duration-200',
+		],
+	}),
+	input: {
+		class: [
+			'peer',
+
+			// Size
+			'w-full ',
+			'h-full',
+
+			// Position
+			'absolute',
+			'top-0 left-0',
+			'z-10',
+
+			// Spacing
+			'p-0',
+			'm-0',
+
+			// Shape
+			'opacity-0',
+			'rounded',
+			'outline-none',
+			'border border-surface-300 dark:border-surface-700',
+
+			// Misc
+			'appearance-none',
+			'cursor-pointer',
+		],
+	},
+	icon: {
+		class: [
+			// Size
+			'w-[0.875rem]',
+			'h-[0.875rem]',
+
+			// Colors
+			'text-white dark:text-surface-950',
+
+			// Transitions
+			'transition-all',
+			'duration-200',
+		],
+	},
+}

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

@@ -0,0 +1,45 @@
+export default {
+	root: {
+		class: [
+			// Flexbox
+			'inline-flex items-center',
+
+			// Spacing
+			'px-3 py-1',
+
+			// Shape
+			'rounded-[1.14rem]',
+
+			// Colors
+			'text-surface-700 dark:text-white',
+			'bg-surface-100 dark:bg-surface-700',
+		],
+	},
+	label: {
+		class: 'leading-6 m-0',
+	},
+	icon: {
+		class: 'leading-6 mr-2',
+	},
+	image: {
+		class: ['w-8 h-8 -ml-2 mr-2', 'rounded-full'],
+	},
+	removeIcon: {
+		class: [
+			// Shape
+			'rounded-md leading-6',
+
+			// Spacing
+			'ml-[0.375rem]',
+
+			// Size
+			'w-4 h-4',
+
+			// Transition
+			'transition duration-200 ease-in-out',
+
+			// Misc
+			'cursor-pointer',
+		],
+	},
+}

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

@@ -0,0 +1,126 @@
+export default {
+	root: ({ props, parent }) => ({
+		class: [
+			'flex',
+			{
+				'first:rounded-l-md rounded-none last:rounded-r-md':
+					parent.instance.$name == 'InputGroup',
+			},
+			{
+				'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
+					props.disabled,
+			},
+		],
+	}),
+	container: ({ state, props, parent }) => ({
+		class: [
+			// Font
+			'leading-none',
+
+			// Flex
+			'flex items-center flex-wrap',
+			'gap-2',
+
+			// Spacing
+			'm-0 list-none',
+			'p-1',
+
+			// Size
+			'w-full',
+
+			// Shape
+			'appearance-none rounded-md',
+
+			// Color
+			'text-surface-700 dark:text-white/80',
+			'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+			{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+			'border',
+			{ 'border-surface-300 dark:border-surface-700': !props.invalid },
+
+			// Invalid State
+			'invalid:focus:ring-red-200',
+			'invalid:hover:border-red-500',
+			{ 'border-red-500 dark:border-red-400': props.invalid },
+
+			// States
+			{
+				'hover:border-surface-400 dark:hover:border-surface-700':
+					!props.invalid,
+			},
+			{
+				'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400':
+					state.focused,
+			},
+
+			// Filled State *for FloatLabel
+			{
+				filled:
+					parent.instance?.$name == 'FloatLabel' &&
+					props.modelValue !== null &&
+					props.modelValue?.length !== 0,
+			},
+
+			// Transition
+			'transition duration-200 ease-in-out',
+
+			// Misc
+			'cursor-text overflow-hidden',
+		],
+	}),
+	inputtoken: {
+		class: ['py-1 px-0 ml-2', 'inline-flex flex-auto'],
+	},
+	input: {
+		class: [
+			// Font
+			'text-base leading-[normal]',
+
+			// Size
+			'w-full',
+
+			// Spacing
+			'p-0 m-0',
+
+			// Shape
+			'appearance-none rounded-none',
+			'border-0 outline-none',
+			'shadow-none',
+
+			// Color
+			'text-surface-700 dark:text-white/80',
+			'bg-transparent',
+		],
+	},
+	token: {
+		class: [
+			// Flex
+			'inline-flex items-center',
+
+			// Spacings
+			'py-1 px-3 m-0',
+
+			// Shape
+			'rounded',
+
+			// Colors
+			'bg-surface-100 dark:bg-surface-700',
+			'text-surface-700 dark:text-white',
+
+			// Misc
+			'cursor-default',
+		],
+	},
+	removeTokenIcon: {
+		class: [
+			// Spacing
+			'ml-[0.375rem]',
+
+			// Size
+			'w-4 h-4',
+
+			// Misc
+			'cursor-pointer',
+		],
+	},
+}