@cooperco/cooper-component-library 0.0.10 → 0.1.1

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

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

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

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

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

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

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

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