@cooperco/cooper-component-library 0.0.10 → 0.1.0

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

@@ -1,64 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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',
-		],
-	}),
-}