@cooperco/cooper-component-library 0.0.10 → 0.1.0

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

@@ -1,130 +0,0 @@
-export default {
-	panel: {
-		class:
-			'p-1 overflow-hidden mb-3 border border-surface-200 dark:border-surface-700 rounded-md',
-	},
-	header: {
-		class: ['rounded-[4px]', 'outline-none'],
-	},
-	headercontent: ({ context, instance }) => ({
-		class: [
-			// Shape
-			'rounded-[4px]',
-
-			// Color
-			'bg-surface-0 dark:bg-surface-900',
-			'text-surface-600 dark:text-surface-0/80',
-			{ 'text-surface-900': context.active },
-
-			// States
-			'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
-			'hover:text-surface-900',
-
-			// Transition
-			'transition duration-200 ease-in-out',
-			'transition-shadow duration-200',
-		],
-	}),
-	headeraction: {
-		class: [
-			'relative',
-
-			// Font
-			'font-semibold',
-			'leading-none',
-
-			// Flex & Alignments
-			'flex items-center',
-
-			// Spacing
-			'py-2 px-3',
-
-			// Misc
-			'select-none cursor-pointer no-underline',
-		],
-	},
-	headerlabel: {
-		class: 'leading-none',
-	},
-	headerIcon: {
-		class: 'mr-2',
-	},
-	submenuicon: {
-		class: 'mr-2',
-	},
-	menucontent: {
-		class: [
-			// Spacing
-			'pl-4',
-
-			// Color
-			'text-surface-700 dark:text-white/80',
-			'bg-surface-0 dark:bg-surface-900',
-		],
-	},
-	menu: {
-		class: ['outline-none', 'm-0 p-0 list-none'],
-	},
-	menuitem: {
-		class: 'relative my-[2px]',
-	},
-	content: {
-		class: [
-			// Shape
-			'border-none rounded-[4px]',
-
-			// Color
-			'text-surface-700 dark:text-white/80',
-
-			// Transition
-			'transition-shadow duration-200',
-		],
-	},
-	action: ({ context }) => ({
-		class: [
-			'relative',
-
-			// Font
-			'leading-none',
-
-			// Flex & Alignments
-			'flex items-center',
-
-			// Spacing
-			'py-2 px-3',
-
-			// Shape
-			'rounded-[4px]',
-
-			// Color
-			'text-surface-700 dark:text-white/80',
-
-			// States
-			'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)] hover:text-surface-700 dark:hover:text-white/80',
-			{
-				'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-0/10':
-					context.focused,
-			},
-
-			// Misc
-			'cursor-pointer no-underline',
-			'select-none overflow-hidden',
-		],
-	}),
-	icon: {
-		class: 'mr-2',
-	},
-	submenu: {
-		class: 'p-0 pl-4 m-0 list-none',
-	},
-	transition: {
-		enterFromClass: 'max-h-0',
-		enterActiveClass:
-			'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
-		enterToClass: 'max-h-[1000px]',
-		leaveFromClass: 'max-h-[1000px]',
-		leaveActiveClass:
-			'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
-		leaveToClass: 'max-h-0',
-	},
-}

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

@@ -1,143 +0,0 @@
-export default {
-	root: ({ props }) => ({
-		class: ['inline-flex relative', { '[&>input]:pr-10': props.toggleMask }],
-	}),
-	panel: {
-		class: [
-			// Spacing
-			'p-3',
-
-			// Shape
-			'border',
-			'shadow-md rounded-md',
-
-			// Colors
-			'bg-surface-0 dark:bg-surface-900',
-			'text-surface-700 dark:text-white/80',
-			'border-surface-200 dark:border-surface-700',
-		],
-	},
-	meter: {
-		class: [
-			// Position and Overflow
-			'overflow-hidden',
-			'relative',
-
-			// Shape and Size
-			'border-0',
-			'h-[10px]',
-			'rounded-md',
-
-			// Spacing
-			'mb-3',
-
-			// Colors
-			'bg-surface-100 dark:bg-surface-700',
-		],
-	},
-	meterlabel: ({ instance }) => ({
-		class: [
-			// Size
-			'h-full',
-
-			// Colors
-			{
-				'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak',
-				'bg-orange-500 dark:bg-orange-400/50':
-					instance?.meter?.strength == 'medium',
-				'bg-green-500 dark:bg-green-400/50':
-					instance?.meter?.strength == 'strong',
-			},
-
-			// Transitions
-			'transition-all duration-1000 ease-in-out',
-		],
-	}),
-	showicon: {
-		class: [
-			'absolute top-1/2 right-3 -mt-2 z-10',
-			'text-surface-600 dark:text-white/70',
-		],
-	},
-	hideicon: {
-		class: [
-			'absolute top-1/2 right-3 -mt-2 z-10',
-			'text-surface-600 dark:text-white/70',
-		],
-	},
-	input: {
-		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?.$parentInstance?.$name == 'FloatLabel' &&
-						parent.props.modelValue !== null &&
-						parent.props.modelValue?.length !== 0,
-				},
-
-				// Misc
-				'appearance-none',
-				'transition-colors duration-200',
-			],
-		}),
-	},
-	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',
-	},
-}