@cooperco/cooper-component-library 0.0.10

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

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

@@ -0,0 +1,143 @@
+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',
+	},
+}