@cooperco/cooper-component-library 0.0.10 → 0.1.0

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

@@ -1,49 +0,0 @@
-export default {
-	root: ({ context, props, parent }) => ({
-		class: [
-			// Font
-			'leading-none',
-
-			// Spacing
-			'm-0',
-			'py-2 px-3',
-
-			// Shape
-			'rounded-md',
-
-			// Colors
-			'text-surface-800 dark:text-white/80',
-			'placeholder:text-surface-400 dark:placeholder:text-surface-500',
-			{ 'bg-surface-0 dark:bg-surface-950': !context.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 },
-
-			// States
-			{
-				'hover:border-surface-400 dark:hover:border-surface-600':
-					!context.disabled && !props.invalid,
-				'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10':
-					!context.disabled,
-				'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
-					context.disabled,
-			},
-
-			// Filled State *for FloatLabel
-			{
-				filled:
-					parent.instance?.$name == 'FloatLabel' &&
-					props.modelValue !== null &&
-					props.modelValue?.length !== 0,
-			},
-
-			// Misc
-			'appearance-none',
-			'transition-colors duration-200',
-		],
-	}),
-}

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

@@ -1,125 +0,0 @@
-export default {
-	root: {
-		class: [
-			// Shape
-			'rounded-md',
-
-			// Size
-			'min-w-[12rem]',
-			'p-1',
-
-			// Colors
-			'bg-surface-0 dark:bg-surface-900',
-			'border border-surface-200 dark:border-surface-700',
-		],
-	},
-	menu: {
-		class: [
-			// Spacings and Shape
-			'list-none',
-			'm-0',
-			'p-0',
-			'outline-none',
-		],
-	},
-	menuitem: {
-		class: 'relative my-[2px] [&:first-child]:mt-0',
-	},
-	content: ({ context }) => ({
-		class: [
-			//Shape
-			'rounded-[4px]',
-
-			// Colors
-			'text-surface-700 dark:text-white/80',
-			{
-				'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 },
-		],
-	}),
-	action: {
-		class: [
-			'relative',
-			// 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',
-		],
-	},
-	icon: {
-		class: [
-			// Spacing
-			'mr-2',
-
-			// Color
-			'text-surface-600 dark:text-white/70',
-		],
-	},
-	label: {
-		class: ['leading-none'],
-	},
-	submenuicon: {
-		class: [
-			// Position
-			'ml-auto',
-		],
-	},
-	submenu: {
-		class: [
-			// Spacing
-			'p-1',
-			'm-0',
-			'list-none',
-			'min-w-[12.5rem]',
-
-			// Shape
-			'shadow-none sm:shadow-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-[2px]',
-	},
-}

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

@@ -1,114 +0,0 @@
-export default {
-	root: ({ props }) => ({
-		class: [
-			'flex grow',
-			{
-				'flex-col': props.layout === 'vertical',
-				'flex-row flex-1': props.layout === 'horizontal',
-			},
-		],
-	}),
-	event: ({ props, context }) => ({
-		class: [
-			'flex relative min-h-[70px]',
-			{
-				'flex-row-reverse':
-					props.align === 'right' ||
-					(props.layout === 'vertical' &&
-						props.align === 'alternate' &&
-						context.index % 2 === 1),
-				'flex-col flex-1': props.layout === 'horizontal',
-				'flex-col-reverse ':
-					props.align === 'bottom' ||
-					(props.layout === 'horizontal' &&
-						props.align === 'alternate' &&
-						context.index % 2 === 1),
-			},
-		],
-	}),
-	opposite: ({ props, context }) => ({
-		class: [
-			'flex-1',
-			{
-				'px-4': props.layout === 'vertical',
-				'py-4': props.layout === 'horizontal',
-			},
-			{
-				'text-right':
-					props.align === 'left' ||
-					(props.layout === 'vertical' &&
-						props.align === 'alternate' &&
-						context.index % 2 === 0),
-				'text-left':
-					props.align === 'right' ||
-					(props.layout === 'vertical' &&
-						props.align === 'alternate' &&
-						context.index % 2 === 1),
-			},
-		],
-	}),
-	separator: ({ props }) => ({
-		class: [
-			'flex items-center flex-initial',
-			{
-				'flex-col': props.layout === 'vertical',
-				'flex-row': props.layout === 'horizontal',
-			},
-		],
-	}),
-	marker: {
-		class: [
-			'relative',
-
-			// Display & Flexbox
-			'inline-flex items-center justify-center',
-
-			// Size
-			'w-[1.125rem] h-[1.125rem]',
-
-			// Appearance
-			'rounded-full border-2 border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-950',
-
-			// Before
-			'before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary',
-			// After
-			'after:absolute after:rounded-full after:w-full after:h-full after:shadow-sm',
-		],
-	},
-	connector: ({ props }) => ({
-		class: [
-			'grow bg-surface-300 dark:bg-surface-700',
-			{
-				'w-[2px]': props.layout === 'vertical',
-				'w-full h-[2px]': props.layout === 'horizontal',
-			},
-		],
-	}),
-	content: ({ props, context }) => ({
-		class: [
-			'flex-1',
-			{
-				'px-4': props.layout === 'vertical',
-				'py-4': props.layout === 'horizontal',
-			},
-			{
-				'text-left':
-					props.align === 'left' ||
-					(props.layout === 'vertical' &&
-						props.align === 'alternate' &&
-						context.index % 2 === 0),
-				'text-right':
-					props.align === 'right' ||
-					(props.layout === 'vertical' &&
-						props.align === 'alternate' &&
-						context.index % 2 === 1),
-			},
-			{
-				'min-h-0':
-					props.layout === 'vertical' && context.index === context.count - 1,
-				'grow-0':
-					props.layout === 'horizontal' && context.index === context.count - 1,
-			},
-		],
-	}),
-}

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

@@ -1,151 +0,0 @@
-export default {
-	root: ({ props }) => ({
-		class: [
-			//Size and Shape
-			'w-96 rounded-md',
-
-			// Positioning
-			{
-				'-translate-x-2/4':
-					props.position == 'top-center' || props.position == 'bottom-center',
-			},
-		],
-	}),
-	container: ({ props }) => ({
-		class: [
-			'mb-4 rounded-md w-full',
-			'border border-transparent',
-			'backdrop-blur-[10px] shadow-md',
-
-			// Colors
-			{
-				'bg-blue-50/90 dark:bg-blue-500/20': props.message.severity == 'info',
-				'bg-green-50/90 dark:bg-green-500/20':
-					props.message.severity == 'success',
-				'bg-surface-50 dark:bg-surface-800':
-					props.message.severity == 'secondary',
-				'bg-orange-50/90 dark:bg-orange-500/20':
-					props.message.severity == 'warn',
-				'bg-red-50/90 dark:bg-red-500/20': props.message.severity == 'error',
-				'bg-surface-950 dark:bg-surface-0':
-					props.message.severity == 'contrast',
-			},
-			{
-				'border-blue-200 dark:border-blue-500/20':
-					props.message.severity == 'info',
-				'border-green-200 dark:border-green-500/20':
-					props.message.severity == 'success',
-				'border-surface-300 dark:border-surface-500/20':
-					props.message.severity == 'secondary',
-				'border-orange-200 dark:border-orange-500/20':
-					props.message.severity == 'warn',
-				'border-red-200 dark:border-red-500/20':
-					props.message.severity == 'error',
-				'border-surface-950 dark:border-surface-0':
-					props.message.severity == 'contrast',
-			},
-			{
-				'text-blue-700 dark:text-blue-300': props.message.severity == 'info',
-				'text-green-700 dark:text-green-300':
-					props.message.severity == 'success',
-				'text-surface-700 dark:text-surface-300':
-					props.message.severity == 'secondary',
-				'text-orange-700 dark:text-orange-300':
-					props.message.severity == 'warn',
-				'text-red-700 dark:text-red-300': props.message.severity == 'error',
-				'text-surface-0 dark:text-surface-950':
-					props.message.severity == 'contrast',
-			},
-		],
-	}),
-	content: ({ props }) => ({
-		class: [
-			'flex p-3',
-			{
-				'items-start': props.message.summary,
-				'items-center': !props.message.summary,
-			},
-		],
-	}),
-	icon: ({ props }) => ({
-		class: [
-			// Sizing and Spacing
-			props.message.severity === 'contrast' ||
-			props.message.severity === 'secondary'
-				? 'w-0'
-				: 'w-[1.125rem] h-[1.125rem] mr-2',
-			'text-lg leading-[normal]',
-		],
-	}),
-	text: {
-		class: [
-			// Font and Text
-			'text-base leading-[normal]',
-			'ml-2',
-			'flex-1',
-		],
-	},
-	summary: {
-		class: 'font-medium block',
-	},
-	detail: ({ props }) => ({
-		class: [
-			'block',
-			'text-sm',
-			props.message.severity === 'contrast'
-				? 'text-surface-0 dark:text-surface-950'
-				: 'text-surface-700 dark:text-surface-0',
-			{ 'mt-2': props.message.summary },
-		],
-	}),
-	closebutton: ({ props }) => ({
-		class: [
-			// Flexbox
-			'flex items-center justify-center',
-
-			// Size
-			'w-7 h-7',
-
-			// Spacing and Misc
-			'ml-auto  relative',
-
-			// Shape
-			'rounded-full',
-
-			// Colors
-			'bg-transparent',
-
-			// Transitions
-			'transition duration-200 ease-in-out',
-
-			// States
-			'hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]',
-			'focus:outline-none focus:outline-offset-0 focus:ring-1',
-			{
-				'focus:ring-blue-500 dark:focus:ring-blue-400':
-					props.severity == 'info',
-				'focus:ring-green-500 dark:focus:ring-green-400':
-					props.severity == 'success',
-				'focus:ring-surface-500 dark:focus:ring-surface-400':
-					props.severity == 'secondary',
-				'focus:ring-orange-500 dark:focus:ring-orange-400':
-					props.severity == 'warn',
-				'focus:ring-red-500 dark:focus:ring-red-4000':
-					props.severity == 'error',
-				'focus:ring-surface-0 dark:focus:ring-surface-950':
-					props.severity == 'contrast',
-			},
-
-			// Misc
-			'overflow-hidden',
-		],
-	}),
-	transition: {
-		enterFromClass: 'opacity-0 translate-y-2/4',
-		enterActiveClass: 'transition-[transform,opacity] duration-300',
-		leaveFromClass: 'max-h-[1000px]',
-		leaveActiveClass:
-			'!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden',
-		leaveToClass: 'max-h-0 opacity-0 mb-0',
-	},
-}

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

@@ -1,98 +0,0 @@
-export default {
-	root: {
-		class: [
-			'relative',
-
-			// Alignment
-			'inline-flex',
-			'align-bottom',
-
-			// Misc
-			'cursor-pointer',
-			'select-none',
-		],
-	},
-	box: ({ props }) => ({
-		class: [
-			'relative',
-
-			// Alignments
-			'items-center inline-flex flex-1 text-center align-bottom justify-center',
-
-			// Sizes & Spacing
-			'px-4 py-2 leading-none',
-
-			// Shapes
-			'rounded-md',
-			'border',
-			{ 'border-transparent': !props.invalid },
-
-			// Colors
-			'bg-surface-100 dark:bg-surface-950',
-			{
-				'text-surface-600 dark:text-white/60 before:bg-transparent':
-					!props.modelValue,
-				'text-surface-800 dark:text-white/80 before:bg-surface-0 dark:before:bg-surface-800':
-					props.modelValue,
-			},
-
-			// 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',
-
-			// Invalid State
-			{ 'border-red-500 dark:border-red-400': props.invalid },
-
-			// States
-			{
-				'peer-hover:text-surface-800 dark:peer-hover:text-white/80':
-					!props.disabled && !props.modelValue,
-				'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400':
-					!props.disabled,
-			},
-
-			// Transitions
-			'transition-all duration-200',
-
-			// Misc
-			{
-				'cursor-pointer': !props.disabled,
-				'opacity-60 select-none pointer-events-none cursor-default':
-					props.disabled,
-			},
-		],
-	}),
-	label: {
-		class: 'font-medium leading-[normal] text-center w-full z-10 relative',
-	},
-	input: {
-		class: [
-			'peer',
-
-			// Size
-			'w-full ',
-			'h-full',
-
-			// Position
-			'absolute',
-			'top-0 left-0',
-			'z-20',
-
-			// Spacing
-			'p-0',
-			'm-0',
-
-			// Shape
-			'opacity-0',
-			'rounded-md',
-			'outline-none',
-			'border border-surface-200 dark:border-surface-700',
-
-			// Misc
-			'appearance-none',
-			'cursor-pointer',
-		],
-	},
-	icon: {
-		class: ['relative z-10', 'mr-2'],
-	},
-}

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

@@ -1,28 +0,0 @@
-export default {
-	root: {
-		class: [
-			// Flex & Alignment
-			'flex items-center justify-between flex-wrap',
-			'gap-2',
-
-			// Spacing
-			'p-3',
-
-			// Shape
-			'rounded-md',
-
-			// Color
-			'bg-surface-0 dark:bg-surface-900',
-			'border border-surface-200 dark:border-surface-700',
-		],
-	},
-	start: {
-		class: 'flex items-center',
-	},
-	center: {
-		class: 'flex items-center',
-	},
-	end: {
-		class: 'flex items-center',
-	},
-}

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

@@ -1,73 +0,0 @@
-export default {
-	root: ({ context }) => ({
-		class: [
-			// Position and Shadows
-			'absolute',
-			'shadow-md',
-			'p-fadein',
-			// Spacing
-			{
-				'py-0 px-1':
-					context?.right ||
-					context?.left ||
-					(!context?.right &&
-						!context?.left &&
-						!context?.top &&
-						!context?.bottom),
-				'py-1 px-0': context?.top || context?.bottom,
-			},
-		],
-	}),
-	arrow: ({ context }) => ({
-		class: [
-			// Position
-
-			'absolute',
-
-			// Size
-			'w-0',
-			'h-0',
-
-			// Shape
-			'border-transparent',
-			'border-solid',
-			{
-				'border-y-[10px] border-r-[10px] border-l-0 border-r-surface-700':
-					context?.right ||
-					(!context?.right &&
-						!context?.left &&
-						!context?.top &&
-						!context?.bottom),
-				'border-y-[10px] border-l-[10px] border-r-0 border-l-surface-700':
-					context?.left,
-				'border-x-[10px] border-t-[10px] border-b-0 border-t-surface-700':
-					context?.top,
-				'border-x-[10px] border-b-[10px] border-t-0 border-b-surface-700':
-					context?.bottom,
-			},
-
-			// Spacing
-			{
-				'-mt-[10px] top-1/2':
-					context?.right ||
-					context?.left ||
-					(!context?.right &&
-						!context?.left &&
-						!context?.top &&
-						!context?.bottom),
-				'-ml-[10px] left-1/2': context?.top || context?.bottom,
-			},
-		],
-	}),
-	text: {
-		class: [
-			'p-3',
-			'bg-surface-700',
-			'text-white',
-			'leading-none',
-			'rounded-md',
-			'whitespace-pre-line',
-			'break-words',
-		],
-	},
-}