@cooperco/cooper-component-library 0.0.10

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

@@ -0,0 +1,64 @@
+export default {
+	root: {
+		class: [
+			// Position and Overflow
+			'overflow-hidden',
+			'relative',
+
+			// Shape and Size
+			'border-0',
+			'h-5',
+			'rounded-md',
+
+			// Colors
+			'bg-surface-100 dark:bg-surface-800',
+		],
+	},
+	value: ({ props }) => ({
+		class: [
+			// Flexbox & Overflow & Position
+			{
+				'absolute flex items-center justify-center overflow-hidden':
+					props.mode !== 'indeterminate',
+			},
+
+			// Colors
+			'bg-primary',
+
+			// Spacing & Sizing
+			'm-0',
+			{ 'h-full w-0': props.mode !== 'indeterminate' },
+
+			// Shape
+			'border-0',
+
+			// Transitions
+			{
+				'transition-width duration-1000 ease-in-out':
+					props.mode !== 'indeterminate',
+				'progressbar-value-animate': props.mode == 'indeterminate',
+			},
+
+			// Before & After (indeterminate)
+			{
+				'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ':
+					props.mode == 'indeterminate',
+				'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000':
+					props.mode == 'indeterminate',
+			},
+		],
+	}),
+	label: {
+		class: [
+			//Font
+			'text-xs font-semibold',
+
+			// Flexbox
+			'inline-flex',
+
+			// Font and Text
+			'text-white dark:text-surface-900',
+			'leading-5',
+		],
+	},
+}

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

@@ -0,0 +1,51 @@
+export default {
+	root: {
+		class: [
+			// Position
+			'relative',
+			'mx-auto',
+
+			// Sizing
+			'w-28',
+			'h-28',
+
+			// Flexbox
+			'inline-block',
+
+			// Pseudo-Elements
+			'before:block',
+			'before:pt-full',
+		],
+	},
+	spinner: {
+		class: [
+			// Position
+			'absolute',
+			'top-0',
+			'bottom-0',
+			'left-0',
+			'right-0',
+			'm-auto',
+
+			// Sizing
+			'w-full',
+			'h-full',
+
+			// Transformations
+			'transform',
+			'origin-center',
+
+			// Animations
+			'animate-spin',
+		],
+	},
+	circle: {
+		class: [
+			// Colors
+			'text-red-500',
+
+			// Misc
+			'progress-spinner-circle',
+		],
+	},
+}

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

@@ -0,0 +1,121 @@
+export default {
+	root: {
+		class: [
+			'relative',
+
+			// Flexbox & Alignment
+			'inline-flex',
+			'align-bottom',
+
+			// Size
+			'w-5 h-5',
+
+			// Misc
+			'cursor-pointer',
+			'select-none',
+		],
+	},
+	box: ({ props }) => ({
+		class: [
+			// Flexbox
+			'flex justify-center items-center',
+
+			// Size
+			'w-5 h-5',
+
+			// Shape
+			'border',
+			'rounded-full',
+
+			// Transition
+			'transition duration-200 ease-in-out',
+
+			// Colors
+			{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
+			{
+				'text-surface-700 dark:text-white/80':
+					props.value !== props.modelValue && props.value !== undefined,
+				'border-surface-300 dark:border-surface-700':
+					props.value !== props.modelValue &&
+					props.value !== undefined &&
+					!props.invalid,
+				'border-primary':
+					props.value == props.modelValue &&
+					props.value !== undefined &&
+					!props.disabled,
+			},
+			// Invalid State
+			{ 'border-red-500 dark:border-red-400': props.invalid },
+
+			// States
+			{
+				'peer-hover:border-surface-400 dark:peer-hover:border-surface-400':
+					!props.disabled && !props.invalid && props.value !== props.modelValue,
+				'peer-hover:border-primary-hover':
+					!props.disabled &&
+					props.value == props.modelValue &&
+					props.value !== undefined,
+				'peer-hover:[&>*:first-child]:bg-primary-600 dark:peer-hover:[&>*:first-child]:bg-primary-300':
+					!props.disabled &&
+					props.value == props.modelValue &&
+					props.value !== undefined,
+				'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400':
+					!props.disabled,
+				'bg-surface-200 [&>*:first-child]:bg-surface-600 dark:bg-surface-700 dark:[&>*:first-child]:bg-surface-400 border-surface-300 dark:border-surface-700 select-none pointer-events-none cursor-default':
+					props.disabled,
+			},
+		],
+	}),
+	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-md',
+			'outline-none',
+			'border-1 border-surface-200 dark:border-surface-700',
+
+			// Misc
+			'appearance-none',
+			'cursor-pointer',
+		],
+	},
+	icon: ({ props }) => ({
+		class: [
+			'block',
+
+			// Shape
+			'rounded-full',
+
+			// Size
+			'w-3 h-3',
+
+			// Conditions
+			{
+				'bg-surface-0 dark:bg-surface-900': props.value !== props.modelValue,
+				'bg-primary': props.value == props.modelValue,
+				'backface-hidden invisible scale-[0.1]':
+					props.value !== props.modelValue,
+				'transform visible translate-z-0 scale-[1,1]':
+					props.value == props.modelValue,
+			},
+
+			// Transition
+			'transition duration-200',
+		],
+	}),
+}

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

@@ -0,0 +1,95 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			'relative',
+
+			// Flex & Alignment
+			'flex items-center',
+			'gap-1',
+
+			// Misc
+			{
+				'opacity-60 select-none pointer-events-none cursor-default':
+					props.disabled,
+			},
+		],
+	}),
+	cancelitem: ({ context }) => ({
+		class: [
+			// Flex & Alignment
+			'inline-flex items-center',
+
+			//State
+			{
+				'outline-none ring-1 ring-primary-500/50 dark:ring-primary-500':
+					context.focused,
+			},
+
+			// Misc
+			'cursor-pointer',
+		],
+	}),
+	cancelicon: {
+		class: [
+			// Size
+			'w-4 h-4',
+
+			// Color
+			'text-red-500 dark:text-red-400',
+
+			// State
+			'hover:text-red-600 dark:hover:text-red-300',
+
+			// Transition
+			'transition duration-200 ease-in',
+		],
+	},
+	item: ({ props, context }) => ({
+		class: [
+			// Flex & Alignment
+			'inline-flex items-center',
+
+			// State
+			{
+				'outline-none ring-1 ring-primary-500/50 dark:ring-primary-500':
+					context.focused,
+			},
+
+			// Misc
+			{
+				'cursor-pointer': !props.readonly,
+				'cursor-default': props.readonly,
+			},
+		],
+	}),
+	officon: ({ props }) => ({
+		class: [
+			// Size
+			'w-4 h-4',
+
+			// Color
+			'text-surface-700 dark:text-surface-0/80',
+
+			// State
+			{ 'hover:text-primary-500 dark:hover:text-primary-400': !props.readonly },
+
+			// Transition
+			'transition duration-200 ease-in',
+		],
+	}),
+	onicon: ({ props }) => ({
+		class: [
+			// Size
+			'w-4 h-4',
+
+			// Color
+			'text-primary',
+
+			// State
+			{ 'hover:text-primary-600 dark:hover:text-primary-300': !props.readonly },
+
+			// Transition
+			'transition duration-200 ease-in',
+		],
+	}),
+}

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

@@ -0,0 +1,6 @@
+export default {
+	root: {
+		class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
+		style: 'transform: scale(0)',
+	},
+}

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

@@ -0,0 +1,77 @@
+export default {
+	wrapper: {
+		class: [
+			// Size & Position
+			'h-full w-full',
+
+			// Layering
+			'z-[1]',
+
+			// Spacing
+			'overflow-hidden',
+
+			// Misc
+			'relative float-left',
+		],
+	},
+	content: {
+		class: [
+			// Size & Spacing
+			'h-[calc(100%+18px)] w-[calc(100%+18px)] pr-[18px] pb-[18px] pl-0 pt-0',
+
+			// Overflow & Scrollbar
+			'overflow-scroll scrollbar-none',
+
+			// Box Model
+			'box-border',
+
+			// Position
+			'relative',
+
+			// Webkit Specific
+			'[&::-webkit-scrollbar]:hidden',
+		],
+	},
+	barX: {
+		class: [
+			// Size & Position
+			'h-[9px] bottom-0',
+
+			// Appearance
+			'bg-surface-50 dark:bg-surface-700 rounded',
+
+			// Interactivity
+			'cursor-pointer',
+
+			// Visibility & Layering
+			'invisible z-20',
+
+			// Transition
+			'transition duration-[250ms] ease-linear',
+
+			// Misc
+			'relative',
+		],
+	},
+	barY: {
+		class: [
+			// Size & Position
+			'w-[9px] top-0',
+
+			// Appearance
+			'bg-surface-50 dark:bg-surface-700 rounded',
+
+			// Interactivity
+			'cursor-pointer',
+
+			// Visibility & Layering
+			'z-20',
+
+			// Transition
+			'transition duration-[250ms] ease-linear',
+
+			// Misc
+			'relative',
+		],
+	},
+}

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

@@ -0,0 +1,45 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			// Flex & Alignment
+			'flex items-center justify-center',
+
+			// Positioning
+			{
+				sticky: props.target === 'parent',
+				fixed: props.target === 'window',
+			},
+			'bottom-[20px] right-[20px]',
+			'ml-auto',
+
+			// Shape & Size
+			{
+				'rounded-md h-8 w-8': props.target === 'parent',
+				'h-12 w-12 rounded-full shadow-md': props.target === 'window',
+			},
+
+			// Color
+
+			{
+				'text-white dark:text-surface-900': props.target === 'parent',
+				'text-surface-0': props.target === 'window',
+				'bg-primary': props.target === 'parent',
+				'bg-surface-600 dark:bg-surface-700 hover:bg-surface-700 dark:hover:bg-surface-600':
+					props.target === 'window',
+			},
+
+			// States
+			{
+				'hover:bg-primary-hover': props.target === 'parent',
+				'hover:bg-surface-600 dark:hover:bg-surface-300':
+					props.target === 'window',
+			},
+		],
+	}),
+	transition: {
+		enterFromClass: 'opacity-0',
+		enterActiveClass: 'transition-opacity duration-150',
+		leaveActiveClass: 'transition-opacity duration-150',
+		leaveToClass: 'opacity-0',
+	},
+}

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

@@ -0,0 +1,66 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			{
+				'opacity-60 select-none pointer-events-none cursor-default':
+					props.disabled,
+			},
+		],
+	}),
+	button: ({ context, props }) => ({
+		class: [
+			'relative',
+			// Font
+			'leading-none',
+
+			// Flex Alignment
+			'inline-flex items-center align-bottom text-center',
+
+			// Spacing
+			'px-4 py-2',
+
+			// Shape
+			'first:rounded-l-md first:rounded-tr-none first:rounded-br-none',
+			'last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
+
+			// Before
+			'before:absolute before:left-1 before:top-1 before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] before:rounded-[4px] before:z-0',
+			'[&>*]:z-10',
+
+			// Color
+			'bg-surface-100 dark:bg-surface-950',
+			{
+				'text-surface-600 dark:text-white/60 before:bg-transparent':
+					!context.active,
+				'text-surface-800 dark:text-white/80 before:bg-surface-0 dark:before:bg-surface-800':
+					context.active,
+			},
+
+			// Invalid State
+			{
+				'border first:border-r-0 last:border-l-0 border-red-500 dark:border-red-400':
+					props.invalid,
+			},
+
+			// States
+			'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:z-10',
+			{
+				'hover:text-surface-800 dark:hover:text-white/80':
+					!context.active && !props.invalid,
+			},
+			{
+				'opacity-60 select-none pointer-events-none cursor-default':
+					context.disabled,
+			},
+
+			// Transition
+			'transition duration-200',
+
+			// Misc
+			'cursor-pointer select-none overflow-hidden',
+		],
+	}),
+	label: {
+		class: 'font-medium leading-[normal] text-center w-full z-10 relative',
+	},
+}

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

@@ -0,0 +1,160 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			// Flexbox
+			'flex flex-col',
+
+			// Position
+			'relative',
+			{
+				'!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0':
+					props.position == 'full',
+			},
+
+			// Size
+			{
+				'h-full w-80': props.position == 'left' || props.position == 'right',
+				'h-auto w-full': props.position == 'top' || props.position == 'bottom',
+			},
+
+			// Shape
+			'border-0 dark:border',
+			'shadow-lg',
+
+			// Colors
+			'bg-surface-0 dark:bg-surface-900',
+			'text-surface-700 dark:text-white/80',
+			'dark:border-surface-700',
+
+			// Transitions
+			'transition-transform',
+			'duration-300',
+
+			// Misc
+			'pointer-events-auto',
+		],
+	}),
+	header: {
+		class: [
+			// Flexbox and Alignment
+			'flex items-center justify-between',
+			'shrink-0',
+
+			// Spacing
+			'p-[1.125rem]',
+
+			// Colors
+			'bg-surface-0 dark:bg-surface-900',
+			'text-surface-700 dark:text-surface-0/80',
+		],
+	},
+	title: {
+		class: ['font-semibold text-xl'],
+	},
+	icons: {
+		class: ['flex items-center'],
+	},
+	closeButton: {
+		class: [
+			'relative',
+
+			// Flexbox and Alignment
+			'flex items-center justify-center',
+
+			// Size and Spacing
+			'mr-2',
+			'last:mr-0',
+			'w-7 h-7',
+
+			// Shape
+			'border-0',
+			'rounded-full',
+
+			// Colors
+			'text-surface-500',
+			'bg-transparent',
+
+			// Transitions
+			'transition duration-200 ease-in-out',
+
+			// States
+			'hover:text-surface-700 dark:hover:text-white/80',
+			'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
+			'focus:outline-none focus:outline-offset-0 focus:ring-1',
+			'focus:ring-primary-500 dark:focus:ring-primary-400',
+
+			// Misc
+			'overflow-hidden',
+		],
+	},
+	closeButtonIcon: {
+		class: [
+			// Display
+			'inline-block',
+
+			// Size
+			'w-4',
+			'h-4',
+		],
+	},
+	content: {
+		class: [
+			// Spacing and Size
+			'p-[1.125rem]',
+			'pt-0',
+			'h-full',
+			'w-full',
+
+			// Growth and Overflow
+			'grow',
+			'overflow-y-auto',
+		],
+	},
+	mask: ({ props }) => ({
+		class: [
+			// Transitions
+			'transition-all',
+			'duration-300',
+			{ 'p-5': !props.position == 'full' },
+
+			// Background and Effects
+			{ 'has-[.mask-active]:bg-transparent bg-black/40': props.modal },
+		],
+	}),
+	transition: ({ props }) => {
+		return props.position === 'top'
+			? {
+					enterFromClass:
+						'translate-x-0 -translate-y-full translate-z-0 mask-active',
+					leaveToClass:
+						'translate-x-0 -translate-y-full translate-z-0 mask-active',
+				}
+			: props.position === 'bottom'
+				? {
+						enterFromClass:
+							'translate-x-0 translate-y-full translate-z-0 mask-active',
+						leaveToClass:
+							'translate-x-0 translate-y-full translate-z-0 mask-active',
+					}
+				: props.position === 'left'
+					? {
+							enterFromClass:
+								'-translate-x-full translate-y-0 translate-z-0 mask-active',
+							leaveToClass:
+								'-translate-x-full translate-y-0 translate-z-0 mask-active',
+						}
+					: props.position === 'right'
+						? {
+								enterFromClass:
+									'translate-x-full translate-y-0 translate-z-0 mask-active',
+								leaveToClass:
+									'translate-x-full translate-y-0 translate-z-0 mask-active',
+							}
+						: {
+								enterFromClass: 'opacity-0 mask-active',
+								enterActiveClass: 'transition-opacity duration-400 ease-in',
+								leaveActiveClass: 'transition-opacity duration-400 ease-in',
+								leaveToClass: 'opacity-0 mask-active',
+							}
+	},
+}

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

@@ -0,0 +1,19 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			'overflow-hidden',
+			{
+				'animate-pulse': props.animation !== 'none',
+			},
+
+			// Round
+			{
+				'rounded-full': props.shape === 'circle',
+				'rounded-md': props.shape !== 'circle',
+			},
+
+			// Colors
+			'bg-surface-200 dark:bg-surface-700',
+		],
+	}),
+}