@cooperco/cooper-component-library 0.0.10 → 0.1.0

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

@@ -1,94 +0,0 @@
-export default {
-	root: ({ props }) => ({
-		class: [
-			'inline-block relative',
-			'w-10 h-6',
-			'rounded-2xl',
-			{
-				'opacity-60 select-none pointer-events-none cursor-default':
-					props.disabled,
-			},
-		],
-	}),
-	slider: ({ props }) => ({
-		class: [
-			// Position
-			'absolute top-0 left-0 right-0 bottom-0',
-			{
-				'before:transform before:translate-x-4':
-					props.modelValue == props.trueValue,
-			},
-
-			// Shape
-			'rounded-2xl',
-
-			// Before:
-			'before:absolute before:top-1/2 before:left-1',
-			'before:-mt-2',
-			'before:h-4 before:w-4',
-			'before:rounded-full',
-			'before:duration-200',
-			'before:bg-surface-0 before:dark:bg-surface-500',
-
-			// Colors
-			{
-				'bg-surface-300 dark:bg-surface-800':
-					!(props.modelValue == props.trueValue) && !props.invalid,
-				'bg-primary': props.modelValue == props.trueValue && !props.invalid,
-				'before:dark:bg-surface-950': props.modelValue == props.trueValue,
-			},
-
-			// Invalid State
-			{ 'bg-red-400 dark:bg-red-300': props.invalid },
-			{ 'peer-hover:bg-red-500 dark:peer-hover:bg-red-200': props.invalid },
-
-			// States
-			{
-				'peer-hover:bg-surface-400 dark:peer-hover:bg-surface-700':
-					!(props.modelValue == props.trueValue) &&
-					!props.disabled &&
-					!props.invalid,
-			},
-			{
-				'peer-hover:bg-primary-hover':
-					props.modelValue == props.trueValue &&
-					!props.disabled &&
-					!props.invalid,
-			},
-			'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400',
-
-			// Transition
-			'transition-colors duration-200',
-
-			// Misc
-			'cursor-pointer',
-		],
-	}),
-	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-2xl',
-			'outline-none',
-
-			// Misc
-			'appearance-none',
-			'cursor-pointer',
-		],
-	},
-}

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

@@ -1,63 +0,0 @@
-export default {
-	root: ({ props, context, parent }) => ({
-		class: [
-			// Font
-			'leading-none',
-
-			// Flex
-			{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
-
-			// Spacing
-			'm-0',
-			{
-				'py-3 px-3.5': props.size == 'large',
-				'py-1.5 px-2': props.size == 'small',
-				'py-2 px-3': props.size == null,
-			},
-
-			// 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-px':
-					parent.instance.$name == 'InputGroup' && !props.showButtons,
-			},
-
-			// 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-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-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' && context.filled },
-
-			// Misc
-			'appearance-none',
-			'transition-colors duration-200',
-		],
-	}),
-}

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

@@ -1,47 +0,0 @@
-export default {
-	root: ({ props }) => ({
-		class: [
-			// Misc
-			{
-				'opacity-60 select-none pointer-events-none cursor-default':
-					props.disabled,
-			},
-		],
-	}),
-	range: {
-		class: [
-			// Stroke
-			'stroke-current',
-
-			// Color
-			'stroke-surface-200 dark:stroke-surface-700',
-
-			// Fill
-			'fill-none',
-
-			// Transition
-			'transition duration-100 ease-in',
-		],
-	},
-	value: {
-		class: [
-			// Animation
-			'animate-dash-frame',
-
-			// Color
-			'stroke-primary',
-
-			// Fill
-			'fill-none',
-		],
-	},
-	label: {
-		class: [
-			// Text Style
-			'text-center text-xl',
-
-			// Color
-			'fill-surface-600 dark:fill-surface-200',
-		],
-	},
-}

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

@@ -1,158 +0,0 @@
-export default {
-	root: ({ props }) => ({
-		class: [
-			'rounded-md',
-
-			// Colors
-			{ 'bg-surface-0 dark:bg-surface-900': !props.disabled },
-			'text-surface-700 dark:text-white/80',
-			'border',
-			{ 'border-surface-300 dark:border-surface-700': !props.invalid },
-
-			// Disabled State
-			{
-				'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
-					props.disabled,
-			},
-
-			// Invalid State
-			{ 'border-red-500 dark:border-red-400': props.invalid },
-		],
-	}),
-	wrapper: {
-		class: [
-			// Overflow
-			'overflow-auto',
-		],
-	},
-	list: {
-		class: 'p-1 list-none m-0 outline-none',
-	},
-	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'],
-	},
-}

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

@@ -1,206 +0,0 @@
-export default {
-	root: ({ props }) => ({
-		class: [
-			'relative',
-
-			// Flexbox
-			'flex',
-
-			// Shape & Size
-			'rounded-md',
-
-			// Color
-			'bg-surface-0 dark:bg-surface-900',
-			'border border-surface-200 dark:border-surface-700',
-			{
-				'p-2 items-center': props.orientation == 'horizontal',
-				'flex-col sm:w-48 p-1': props.orientation !== 'horizontal',
-			},
-		],
-	}),
-	menu: ({ props }) => ({
-		class: [
-			// Flexbox
-			'sm:flex',
-			'items-center',
-			'flex-wrap',
-			'flex-col sm:flex-row',
-			{ hidden: !props?.mobileActive, flex: props?.mobileActive },
-
-			// Position
-			'absolute sm:relative',
-			'top-full left-0',
-			'sm:top-auto sm:left-auto',
-
-			// Size
-			'w-full sm:w-auto',
-
-			// Spacing
-			'm-0',
-			'p-1 sm:py-0 sm:p-0',
-			'list-none',
-
-			// Shape
-			'shadow-md sm:shadow-none',
-			'border-0',
-
-			// Color
-			'bg-surface-0 dark:bg-surface-900 sm:bg-transparent dark:sm:bg-transparent',
-
-			// Misc
-			'outline-none',
-		],
-	}),
-	menuitem: ({ props }) => ({
-		class: [
-			'sm:relative static my-[2px] [&:first-child]:mt-0',
-			{
-				'sm:w-auto w-full': props.horizontal,
-				'w-full': !props.horizontal,
-			},
-		],
-	}),
-	content: ({ context }) => ({
-		class: [
-			'rounded-[4px]',
-
-			//  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),
-			},
-
-			// Hover 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,
-			},
-
-			// Transitions
-			'transition-all',
-			'duration-200',
-		],
-	}),
-	action: {
-		class: [
-			'relative',
-
-			// Flexbox
-			'flex',
-			'items-center',
-
-			// Spacing
-			'py-2',
-			'px-3',
-
-			// Size
-			'leading-none',
-
-			// Misc
-			'select-none',
-			'cursor-pointer',
-			'no-underline ',
-			'overflow-hidden',
-		],
-	},
-	icon: {
-		class: 'mr-2',
-	},
-	submenuicon: ({ props }) => ({
-		class: [
-			{
-				'ml-auto sm:ml-2': props.horizontal,
-				'ml-auto': !props.horizontal,
-			},
-		],
-	}),
-	panel: ({ props }) => ({
-		class: [
-			// Size
-			'w-auto',
-
-			// Spacing
-			'm-0',
-
-			// Shape
-			'shadow-none sm:shadow-md',
-
-			'rounded-md',
-
-			// Color
-			'bg-surface-0 dark:bg-surface-900',
-
-			// Position
-			'static sm:absolute',
-			'z-10',
-			{
-				'sm:left-full top-0': !props.horizontal,
-			},
-		],
-	}),
-	grid: {
-		class: 'flex flex-wrap sm:flex-nowrap',
-	},
-	column: {
-		class: 'w-full sm:w-1/2',
-	},
-	submenu: {
-		class: ['m-0 list-none', 'p-1 px-2 w-full sm:min-w-[14rem]'],
-	},
-	submenuheader: {
-		class: [
-			'font-semibold',
-
-			// Spacing
-			'py-2 px-3',
-			'm-0',
-
-			// Color
-			'text-surface-400 dark:text-surface-500',
-			'bg-surface-0 dark:bg-surface-900',
-		],
-	},
-	separator: {
-		class: 'border-t border-surface-200 dark:border-surface-600 my-1',
-	},
-	menubutton: {
-		class: [
-			// Flexbox
-			'flex sm:hidden',
-			'items-center justify-center',
-
-			// Size
-			'w-7',
-			'h-7',
-
-			// Shape
-			'rounded-full',
-			// Color
-			'text-surface-500 dark:text-white/80',
-
-			// States
-			'hover:text-surface-600 dark:hover:text-white/60',
-			'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',
-
-			// Transitions
-			'transition duration-200 ease-in-out',
-
-			// Misc
-			'cursor-pointer',
-			'no-underline',
-		],
-	},
-	end: {
-		class: 'ml-auto self-center',
-	},
-}

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

@@ -1,122 +0,0 @@
-export default {
-	root: {
-		class: [
-			// Sizing and Shape
-			'min-w-[12.5rem]',
-			'rounded-md',
-
-			// Spacing
-			'p-1',
-
-			// Colors
-			'bg-surface-0 dark:bg-surface-900',
-			'text-surface-700 dark:text-white/80',
-			'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-[normal]'],
-	},
-	submenuheader: {
-		class: [
-			// Font
-			'font-bold',
-
-			// Spacing
-			'm-0',
-			'py-2 px-3',
-
-			// Shape
-			'rounded-tl-none',
-			'rounded-tr-none',
-
-			// Colors
-			'bg-surface-0 dark:bg-surface-900',
-			'text-surface-400 dark:text-surface-600',
-		],
-	},
-	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',
-	},
-}