@cooperco/cooper-component-library 0.0.10

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

@@ -0,0 +1,71 @@
+export default {
+	root: ({ context }) => ({
+		class: [
+			// Colors
+			'bg-surface-0',
+			'dark:bg-surface-900',
+			'text-surface-700',
+			'dark:text-surface-0/80',
+
+			// Shape
+			'rounded-md',
+
+			// Borders (Conditional)
+			{
+				'border border-solid border-surface-200 dark:border-surface-700':
+					!context.nested,
+			},
+
+			// Nested
+			{ 'flex grow border-0': context.nested },
+		],
+	}),
+
+	gutter: ({ props }) => ({
+		class: [
+			// Flexbox
+			'flex',
+			'items-center',
+			'justify-center',
+			'shrink-0',
+
+			// Colors
+			'bg-surface-100',
+			'dark:bg-surface-700',
+
+			// Transitions
+			'transition-all',
+			'duration-200',
+
+			// Misc
+			{
+				'cursor-col-resize': props.layout == 'horizontal',
+				'cursor-row-resize': props.layout !== 'horizontal',
+			},
+		],
+	}),
+	gutterhandler: ({ props }) => ({
+		class: [
+			'z-20',
+			// Colors
+			'bg-surface-100',
+			'dark:bg-surface-700',
+
+			// Shape
+			'rounded-md',
+
+			//States
+			'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+
+			// Transitions
+			'transition-all',
+			'duration-200',
+
+			// Sizing (Conditional)
+			{
+				'h-[1.70rem]': props.layout == 'horizontal',
+				'w-[1.70rem] h-2': props.layout !== 'horizontal',
+			},
+		],
+	}),
+}

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

@@ -0,0 +1,183 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			'flex-1',
+			props.orientation === 'vertical' ? 'flex-col' : 'flex-row',
+		],
+	}),
+	nav: {
+		class: [
+			// Flexbox
+			'flex',
+			'justify-between',
+			'items-center',
+
+			// Spacing
+			'm-0',
+			'p-0',
+
+			// Positioning
+			'relative',
+
+			// Lists
+			'list-none',
+
+			// Overflow
+			'overflow-x-auto',
+		],
+	},
+	stepperpanel: {
+		panel: ({ context, parent }) => ({
+			class: [
+				context.active ? 'flex-1' : '',
+				parent.props.orientation === 'vertical'
+					? 'flex flex-col flex-initial'
+					: '',
+			],
+		}),
+		header: ({ parent, context }) => ({
+			class: [
+				// Position
+				'relative',
+
+				// Flexbox
+				'flex',
+				'items-center',
+				context.last ? 'flex-initial' : 'flex-1',
+				parent.props.orientation === 'vertical' ? 'flex-initial' : '',
+
+				// Spacing
+				'p-2',
+			],
+		}),
+		action: {
+			class: [
+				// Borders
+				'border-0',
+				'border-none',
+
+				// Flexbox
+				'inline-flex',
+				'items-center',
+
+				// Text
+				'text-decoration-none',
+
+				// Transitions
+				'transition',
+				'transition-shadow',
+				'duration-200',
+
+				// Shape
+				'rounded-md',
+
+				// Backgrounds
+				'bg-transparent',
+
+				// Focus
+				'outline-none',
+			],
+		},
+		number: ({ context }) => ({
+			class: [
+				// Flexbox
+				'flex',
+				'items-center',
+				'justify-center',
+
+				//Colors
+				'border-solid border-2 border-surface-200 dark:border-surface-700',
+
+				// Colors (Conditional)
+				context.active
+					? 'text-primary'
+					: 'text-surface-900 dark:text-surface-0', // Adjust colors as needed
+
+				// Size and Shape
+				'min-w-[2rem]',
+				'h-[2rem]',
+				'line-height-[2rem]',
+				'rounded-full',
+
+				// Text
+				'text-lg',
+
+				// Transitions
+				'transition',
+				'transition-colors',
+				'transition-shadow',
+				'duration-200',
+			],
+		}),
+		title: ({ context }) => ({
+			class: [
+				// Layout
+				'block',
+				'whitespace-nowrap',
+				'overflow-hidden',
+				'text-ellipsis',
+				'max-w-full',
+
+				// Spacing
+				'ml-2',
+
+				// Text
+				context.active
+					? 'text-primary'
+					: 'text-surface-700 dark:text-surface-0/80',
+				'font-medium',
+
+				// Transitions
+				'transition',
+				'transition-colors',
+				'transition-shadow',
+				'duration-200',
+			],
+		}),
+		separator: ({ context, state, parent }) => ({
+			class: [
+				// Colors (Conditional for active step)
+				state.d_activeStep <= context.index
+					? 'bg-surface-200 dark:bg-surface-700'
+					: 'bg-primary',
+
+				// Conditional for Vertical Orientation
+				parent.props.orientation === 'vertical'
+					? ['flex-none', 'w-[2px]', 'h-auto', 'ml-[calc(1.29rem+2px)]']
+					: ['flex-1', 'w-full', 'h-[2px]', 'ml-4'],
+
+				// Transitions
+				'transition-shadow',
+				'duration-200',
+			],
+		}),
+		transition: {
+			class: [
+				'flex flex-1',
+				'bg-surface-0 dark:bg-surface-900',
+				'text-surface-900 dark:text-surface-0',
+			],
+			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',
+		},
+		content: ({ parent }) => ({
+			class: [parent.props.orientation === 'vertical' ? 'w-full pl-4' : ''],
+		}),
+	},
+	panelcontainer: {
+		class: [
+			// Colors
+			'bg-surface-0 dark:bg-surface-900',
+			'text-surface-900 dark:text-surface-0',
+
+			// Spacing
+			'p-4',
+		],
+	},
+}

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

@@ -0,0 +1,117 @@
+export default {
+	root: {
+		class: 'relative',
+	},
+	menu: {
+		class: 'p-0 m-0 list-none flex',
+	},
+	menuitem: {
+		class: [
+			// Flexbox and Position
+			'relative',
+			'flex',
+			'justify-center',
+			'flex-1',
+			'overflow-hidden',
+
+			// Before
+			'before:border-t-2',
+			'before:border-surface-200',
+			'before:dark:border-surface-700',
+			'before:w-full',
+			'[&:first-child]:before:w-[calc(50%+1rem)]',
+			'[&:last-child]:before:w-1/2',
+			'before:absolute',
+			'before:top-1/2',
+			'before:left-0',
+			'before:transform',
+			'before:mt-[calc(-1rem+1px)]',
+			'[&:first-child]:before:translate-x-[100%]',
+		],
+	},
+	action: ({ props }) => ({
+		class: [
+			// Flexbox
+			'inline-flex items-center',
+			'flex-col',
+
+			// Transitions and Shape
+			'transition-shadow',
+			'rounded-md',
+
+			// Colors
+			'bg-surface-0',
+			'dark:bg-transparent',
+
+			// States
+			'focus:outline-none focus:outline-offset-0 focus:ring',
+			'focus:ring-primary-500 dark:focus:ring-primary-400',
+
+			// Misc
+			'overflow-hidden',
+			{ 'cursor-pointer': !props.readonly },
+		],
+	}),
+	step: ({ context, props }) => ({
+		class: [
+			// Flexbox
+			'flex items-center justify-center',
+
+			// Position
+			'z-20',
+
+			// Shape
+			'rounded-full',
+			'border-2',
+
+			// Size
+			'w-8',
+			'h-8',
+			'text-sm',
+			'leading-[2rem]',
+			'font-medium',
+
+			// Colors
+			'bg-surface-0 dark:bg-surface-800',
+			'border-surface-100 dark:border-surface-700',
+			{
+				'text-surface-400 dark:text-white/60': !context.active,
+				'text-primary': context.active,
+			},
+
+			// States
+			{
+				'hover:border-surface-300 dark:hover:border-surface-500':
+					!context.active && !props.readonly,
+			},
+
+			// Transition
+			'transition-colors duration-200 ease-in-out',
+		],
+	}),
+	label: ({ context }) => ({
+		class: [
+			// Font
+			'leading-[normal]',
+			'font-medium',
+
+			// Display
+			'block',
+
+			// Spacing
+			'mt-2',
+
+			// Colors
+			{
+				'text-surface-700 dark:text-white/70': !context.active,
+				'text-primary': context.active,
+			},
+
+			// Text and Overflow
+			'whitespace-nowrap',
+			'overflow-hidden',
+			'overflow-ellipsis',
+			'max-w-full',
+		],
+	}),
+}

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

@@ -0,0 +1,75 @@
+export default {
+	root: {
+		class: 'overflow-x-auto',
+	},
+	menu: {
+		class: [
+			// Flexbox
+			'flex flex-1',
+
+			// Spacing
+			'list-none',
+			'p-0 m-0',
+
+			// Colors
+			'bg-surface-0 dark:bg-surface-900',
+			'border-b-2 border-surface-200 dark:border-surface-700',
+			'text-surface-900 dark:text-surface-0/80',
+		],
+	},
+	menuitem: {
+		class: 'mr-0',
+	},
+	action: ({ context, state }) => ({
+		class: [
+			'relative',
+
+			// Font
+			'font-semibold leading-none',
+
+			// Flexbox and Alignment
+			'flex items-center',
+
+			// Spacing
+			'py-4 px-[1.125rem]',
+			'-mb-px',
+
+			// Shape
+			'border-b',
+			'rounded-t-md',
+
+			// Colors and Conditions
+			{
+				'border-surface-200 dark:border-surface-700':
+					state.d_activeIndex !== context.index,
+				'bg-surface-0 dark:bg-surface-900':
+					state.d_activeIndex !== context.index,
+				'text-surface-700 dark:text-surface-0/80':
+					state.d_activeIndex !== context.index,
+
+				'bg-surface-0 dark:bg-surface-900':
+					state.d_activeIndex === context.index,
+				'border-primary': state.d_activeIndex === context.index,
+				'text-primary': state.d_activeIndex === context.index,
+			},
+
+			// States
+			'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+			{
+				'hover:text-surface-900 dark:hover:text-surface-0':
+					state.d_activeIndex !== context.index,
+			},
+
+			// Transitions
+			'transition-all duration-200',
+
+			// Misc
+			'cursor-pointer select-none text-decoration-none',
+			'overflow-hidden',
+			'user-select-none',
+		],
+	}),
+	icon: {
+		class: 'mr-2',
+	},
+}

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

@@ -0,0 +1,162 @@
+export default {
+	navContainer: ({ props }) => ({
+		class: [
+			// Position
+			'relative',
+
+			// Misc
+			{ 'overflow-hidden': props.scrollable },
+		],
+	}),
+	navContent: ({ instance }) => ({
+		class: [
+			// Overflow and Scrolling
+			'overflow-y-hidden overscroll-contain',
+			'overscroll-auto',
+			'scroll-smooth',
+			'[&::-webkit-scrollbar]:hidden',
+		],
+	}),
+	previousButton: {
+		class: [
+			// Flexbox and Alignment
+			'flex items-center justify-center',
+
+			// Position
+			'!absolute',
+			'top-0 left-0',
+			'z-20',
+
+			// Size and Shape
+			'h-full w-10',
+			'rounded-none',
+
+			// Colors
+			'bg-surface-0 dark:bg-surface-900',
+			'text-surface-700 dark:text-surface-0/80',
+			'shadow-sm',
+		],
+	},
+	nextButton: {
+		class: [
+			// Flexbox and Alignment
+			'flex items-center justify-center',
+
+			// Position
+			'!absolute',
+			'top-0 right-0',
+			'z-20',
+
+			// Size and Shape
+			'h-full w-10',
+			'rounded-none',
+
+			// Colors
+			'text-surface-700 dark:text-surface-0/80',
+			'bg-surface-0 dark:bg-surface-900',
+			'shadow-sm',
+		],
+	},
+	nav: {
+		class: [
+			// Flexbox
+			'flex flex-1',
+
+			// Spacing
+			'list-none',
+			'p-0 m-0',
+
+			// Colors
+			'bg-surface-0 dark:bg-surface-900',
+			'border-b border-surface-200 dark:border-surface-700',
+			'text-surface-900 dark:text-surface-0/80',
+		],
+	},
+	tabpanel: {
+		header: ({ props }) => ({
+			class: [
+				// Spacing
+				'mr-0',
+
+				// Misc
+				'outline-none',
+				{
+					'opacity-60 cursor-default user-select-none select-none pointer-events-none':
+						props?.disabled,
+				},
+			],
+		}),
+		headerAction: ({ parent, context }) => ({
+			class: [
+				'relative',
+
+				// Font
+				'font-semibold',
+
+				// Flexbox and Alignment
+				'flex items-center',
+
+				// Spacing
+				'py-4 px-[1.125rem]',
+				'-mb-px',
+
+				// Shape
+				'border-b-2',
+				'rounded-t-md',
+
+				// Colors and Conditions
+				{
+					'border-surface-200 dark:border-surface-700':
+						parent.state.d_activeIndex !== context.index,
+					'bg-surface-0 dark:bg-surface-900':
+						parent.state.d_activeIndex !== context.index,
+					'text-surface-700 dark:text-surface-0/80':
+						parent.state.d_activeIndex !== context.index,
+
+					'bg-surface-0 dark:bg-surface-900':
+						parent.state.d_activeIndex === context.index,
+					'border-primary': parent.state.d_activeIndex === context.index,
+					'text-primary': parent.state.d_activeIndex === context.index,
+				},
+
+				// States
+				'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
+				{
+					'hover:bg-surface-0 dark:hover:bg-surface-800/80':
+						parent.state.d_activeIndex !== context.index,
+					'hover:text-surface-900 dark:hover:text-surface-0':
+						parent.state.d_activeIndex !== context.index,
+				},
+
+				// Transitions
+				'transition-all duration-200',
+
+				// Misc
+				'cursor-pointer select-none text-decoration-none',
+				'overflow-hidden',
+				'user-select-none',
+			],
+		}),
+		headerTitle: {
+			class: [
+				// Text
+				'leading-none',
+				'whitespace-nowrap',
+			],
+		},
+	},
+	panelcontainer: {
+		class: [
+			// Spacing
+			'p-[1.125rem] pt-[0.875rem]',
+
+			// Shape
+			'border-0 rounded-none',
+			'border-br-md border-bl-md',
+
+			// Colors
+			'bg-surface-0 dark:bg-surface-900',
+			'text-surface-900 dark:text-surface-0/80',
+		],
+	},
+}

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

@@ -0,0 +1,44 @@
+export default {
+	root: ({ props }) => ({
+		class: [
+			//Font
+			'text-xs font-bold',
+
+			//Alignments
+			'inline-flex items-center justify-center',
+
+			//Spacing
+			'px-[0.4rem] py-1',
+
+			//Shape
+			{
+				'rounded-md': !props.rounded,
+				'rounded-full': props.rounded,
+			},
+
+			//Colors
+			{
+				'text-primary-highlight-inverse bg-primary-highlight':
+					props.severity == null || props.severity == 'primary',
+				'text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-500/20':
+					props.severity == 'success',
+				'text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-500/20':
+					props.severity == 'secondary',
+				'text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-500/20':
+					props.severity == 'info',
+				'text-orange-700 dark:text-orange-300 bg-orange-100 dark:bg-orange-500/20':
+					props.severity == 'warning',
+				'text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-500/20':
+					props.severity == 'danger',
+				'text-surface-0 dark:text-surface-900 bg-surface-900 dark:bg-surface-0':
+					props.severity == 'contrast',
+			},
+		],
+	}),
+	value: {
+		class: 'leading-normal',
+	},
+	icon: {
+		class: 'mr-1 text-sm',
+	},
+}

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

@@ -0,0 +1,60 @@
+export default {
+	root: {
+		class: [
+			// Spacing
+			'py-2 px-3',
+
+			// Shape
+			'rounded-md',
+
+			// Color
+			'bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0',
+			'border border-surface-200 dark:border-surface-700',
+
+			// Sizing & Overflow
+			'h-72 overflow-auto',
+		],
+	},
+	container: {
+		class: [
+			// Flexbox
+			'flex items-center',
+		],
+	},
+	prompt: {
+		class: [
+			// Color
+			'text-surface-700 dark:text-surface-0',
+		],
+	},
+	response: {
+		class: [
+			// Color
+			'text-surface-700 dark:text-surface-0',
+		],
+	},
+	command: {
+		class: [
+			// Color
+			'text-surface-700 dark:text-surface-0',
+		],
+	},
+	commandtext: {
+		class: [
+			// Flexbox
+			'flex-1 shrink grow-0',
+
+			// Shape
+			'border-0',
+
+			// Spacing
+			'p-0',
+
+			// Color
+			'bg-transparent text-inherit',
+
+			// Outline
+			'outline-none',
+		],
+	},
+}