@cooperco/cooper-component-library 0.0.10 → 0.1.1

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

@@ -1,566 +0,0 @@
-export default {
-	root: {
-		class: [
-			// Flex & Alignment
-			'flex items-center justify-center flex-wrap',
-
-			// Spacing
-			'px-4 py-2',
-
-			// Shape
-			'border-0 rounded-md',
-
-			// Color
-			'bg-surface-0 dark:bg-surface-900',
-			'text-surface-500 dark:text-white/60',
-		],
-	},
-	firstpagebutton: ({ context }) => ({
-		class: [
-			'relative',
-
-			// Flex & Alignment
-			'inline-flex items-center justify-center',
-
-			// Shape
-			'border-0 rounded-full',
-
-			// Size
-			'min-w-[2.5rem] h-10 m-[0.143rem]',
-			'leading-none',
-
-			// Color
-			'text-surface-500 dark:text-white/60',
-
-			// State
-			{
-				'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]':
-					!context.disabled,
-				'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400':
-					!context.disabled,
-			},
-
-			// Transition
-			'transition duration-200',
-
-			// Misc
-			'user-none overflow-hidden',
-			{ 'cursor-default pointer-events-none opacity-60': context.disabled },
-		],
-	}),
-	previouspagebutton: ({ context }) => ({
-		class: [
-			'relative',
-
-			// Flex & Alignment
-			'inline-flex items-center justify-center',
-
-			// Shape
-			'border-0 rounded-full',
-
-			// Size
-			'min-w-[2.5rem] h-10 m-[0.143rem]',
-			'leading-none',
-
-			// Color
-			'text-surface-500 dark:text-white/60',
-
-			// State
-			{
-				'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]':
-					!context.disabled,
-				'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400':
-					!context.disabled,
-			},
-
-			// Transition
-			'transition duration-200',
-
-			// Misc
-			'user-none overflow-hidden',
-			{ 'cursor-default pointer-events-none opacity-60': context.disabled },
-		],
-	}),
-	nextpagebutton: ({ context }) => ({
-		class: [
-			'relative',
-
-			// Flex & Alignment
-			'inline-flex items-center justify-center',
-
-			// Shape
-			'border-0 rounded-full',
-
-			// Size
-			'min-w-[2.5rem] h-10 m-[0.143rem]',
-			'leading-none',
-
-			// Color
-			'text-surface-500 dark:text-white/60',
-
-			// State
-			{
-				'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]':
-					!context.disabled,
-				'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400':
-					!context.disabled,
-			},
-
-			// Transition
-			'transition duration-200',
-
-			// Misc
-			'user-none overflow-hidden',
-			{ 'cursor-default pointer-events-none opacity-60': context.disabled },
-		],
-	}),
-	lastpagebutton: ({ context }) => ({
-		class: [
-			'relative',
-
-			// Flex & Alignment
-			'inline-flex items-center justify-center',
-
-			// Shape
-			'border-0 rounded-full',
-
-			// Size
-			'min-w-[2.5rem] h-10 m-[0.143rem]',
-			'leading-none',
-
-			// Color
-			'text-surface-500 dark:text-white/60',
-
-			// State
-			{
-				'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]':
-					!context.disabled,
-				'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400':
-					!context.disabled,
-			},
-
-			// Transition
-			'transition duration-200',
-
-			// Misc
-			'user-none overflow-hidden',
-			{ 'cursor-default pointer-events-none opacity-60': context.disabled },
-		],
-	}),
-	pagebutton: ({ context }) => ({
-		class: [
-			'relative',
-
-			// Flex & Alignment
-			'inline-flex items-center justify-center',
-
-			// Shape
-			'border-0 rounded-full',
-
-			// Size
-			'min-w-[2.5rem] h-10 m-[0.143rem]',
-			'leading-none',
-
-			// Color
-			'text-surface-500 dark:text-white/60',
-
-			// State
-			{
-				'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]':
-					!context.disabled,
-				'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400':
-					!context.disabled,
-			},
-
-			// Transition
-			'transition duration-200',
-
-			// Misc
-			'user-none overflow-hidden',
-			{ 'cursor-default pointer-events-none opacity-60': context.disabled },
-		],
-	}),
-	rowperpagedropdown: {
-		root: ({ props, state }) => ({
-			class: [
-				// Display and Position
-				'inline-flex',
-				'relative',
-
-				// Shape
-				'h-10',
-				'rounded-md',
-
-				// Spacing
-				'mx-2',
-
-				// Color and Background
-				'bg-surface-0 dark:bg-surface-950',
-				'border border-surface-300 dark:border-surface-700',
-
-				// Transitions
-				'transition-all',
-				'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':
-						!state.focused,
-				},
-
-				// Misc
-				'cursor-pointer',
-				'select-none',
-				{
-					'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
-						props.disabled,
-				},
-			],
-		}),
-		input: {
-			class: [
-				//Font
-				'leading-[normal]',
-
-				// Display
-				'block',
-				'flex-auto',
-
-				// Color and Background
-				'bg-transparent',
-				'border-0',
-				'text-surface-800 dark:text-white/80',
-
-				// Sizing and Spacing
-				'w-[1%]',
-				'py-2 pl-3 pr-0',
-
-				//Shape
-				'rounded-none',
-
-				// Transitions
-				'transition',
-				'duration-200',
-
-				// States
-				'focus:outline-none focus:shadow-none',
-
-				// Misc
-				'relative',
-				'cursor-pointer',
-				'overflow-hidden overflow-ellipsis',
-				'whitespace-nowrap',
-				'appearance-none',
-			],
-		},
-		trigger: {
-			class: [
-				// Flexbox
-				'flex items-center justify-center',
-				'shrink-0',
-
-				// Color and Background
-				'bg-transparent',
-				'text-surface-500',
-
-				// Size
-				'w-10',
-
-				// Shape
-				'rounded-tr-md',
-				'rounded-br-md',
-			],
-		},
-		panel: {
-			class: [
-				// Colors
-				'bg-surface-0 dark:bg-surface-900',
-				'text-surface-700 dark:text-white/80',
-
-				// Shape
-				'border border-surface-300 dark:border-surface-700',
-				'rounded-md',
-				'shadow-md',
-			],
-		},
-		wrapper: {
-			class: [
-				// Sizing
-				'max-h-[200px]',
-
-				// Misc
-				'overflow-auto',
-			],
-		},
-		list: {
-			class: 'p-1 list-none m-0',
-		},
-		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,
-				},
-
-				// Transitions
-				'transition-shadow',
-				'duration-200',
-
-				// Misc
-				'cursor-pointer',
-				'overflow-hidden',
-				'whitespace-nowrap',
-			],
-		}),
-	},
-	jumptopageinput: {
-		root: {
-			class: 'inline-flex mx-2',
-		},
-		input: {
-			root: {
-				class: [
-					'relative',
-
-					//Font
-					'leading-none',
-
-					// Display
-					'block',
-					'flex-auto',
-
-					// Colors
-					'text-surface-600 dark:text-surface-200',
-					'placeholder:text-surface-400 dark:placeholder:text-surface-500',
-					'bg-surface-0 dark:bg-surface-950',
-					'border border-surface-300 dark:border-surface-700',
-
-					// Sizing and Spacing
-					'w-[1%] max-w-[3rem]',
-					'py-2 px-3 m-0',
-
-					//Shape
-					'rounded-md',
-
-					// Transitions
-					'transition',
-					'duration-200',
-
-					// States
-					'hover:border-surface-400 dark:hover:border-surface-600',
-					'focus:outline-none focus:shadow-none',
-					'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-
-					// Misc
-					'cursor-pointer',
-					'overflow-hidden overflow-ellipsis',
-					'whitespace-nowrap',
-					'appearance-none',
-				],
-			},
-		},
-	},
-	jumptopagedropdown: {
-		root: ({ props, state }) => ({
-			class: [
-				// Display and Position
-				'inline-flex',
-				'relative',
-
-				// Shape
-				'h-10',
-				'rounded-md',
-
-				// Spacing
-				'mx-2',
-
-				// Color and Background
-				'bg-surface-0 dark:bg-surface-950',
-				'border border-surface-300 dark:border-surface-700',
-
-				// Transitions
-				'transition-all',
-				'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':
-						!state.focused,
-				},
-
-				// Misc
-				'cursor-pointer',
-				'select-none',
-				{
-					'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
-						props.disabled,
-				},
-			],
-		}),
-		input: {
-			class: [
-				//Font
-				'leading-[normal]',
-
-				// Display
-				'block',
-				'flex-auto',
-
-				// Color and Background
-				'bg-transparent',
-				'border-0',
-				'text-surface-800 dark:text-white/80',
-
-				// Sizing and Spacing
-				'w-[1%]',
-				'py-2 pl-3 pr-0',
-
-				//Shape
-				'rounded-none',
-
-				// Transitions
-				'transition',
-				'duration-200',
-
-				// States
-				'focus:outline-none focus:shadow-none',
-
-				// Misc
-				'relative',
-				'cursor-pointer',
-				'overflow-hidden overflow-ellipsis',
-				'whitespace-nowrap',
-				'appearance-none',
-			],
-		},
-		trigger: {
-			class: [
-				// Flexbox
-				'flex items-center justify-center',
-				'shrink-0',
-
-				// Color and Background
-				'bg-transparent',
-				'text-surface-500',
-
-				// Size
-				'w-10',
-
-				// Shape
-				'rounded-tr-md',
-				'rounded-br-md',
-			],
-		},
-		panel: {
-			class: [
-				// Colors
-				'bg-surface-0 dark:bg-surface-900',
-				'text-surface-700 dark:text-white/80',
-
-				// Shape
-				'border border-surface-300 dark:border-surface-700',
-				'rounded-md',
-				'shadow-md',
-			],
-		},
-		wrapper: {
-			class: [
-				// Sizing
-				'max-h-[200px]',
-
-				// Misc
-				'overflow-auto',
-			],
-		},
-		list: {
-			class: 'p-1 list-none m-0',
-		},
-		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,
-				},
-
-				// Transitions
-				'transition-shadow',
-				'duration-200',
-
-				// Misc
-				'cursor-pointer',
-				'overflow-hidden',
-				'whitespace-nowrap',
-			],
-		}),
-	},
-	start: {
-		class: 'mr-auto',
-	},
-	end: {
-		class: 'ml-auto',
-	},
-}

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

@@ -1,102 +0,0 @@
-export default {
-	root: {
-		class: [
-			//Shape
-			'rounded-md',
-
-			//Colors
-			'border border-surface-200 dark:border-surface-700',
-			'bg-surface-0 dark:bg-surface-900',
-		],
-	},
-	header: ({ props }) => ({
-		class: [
-			// Flex
-			'flex items-center justify-between',
-
-			// Colors
-			'text-surface-700 dark:text-surface-0/80',
-			'bg-transparent',
-
-			//Shape
-			'rounded-tl-md rounded-tr-md',
-			'border-0',
-
-			// Conditional Spacing
-			{
-				'p-[1.125rem]': !props.toggleable,
-				'py-3 px-[1.125rem]': props.toggleable,
-			},
-		],
-	}),
-	title: {
-		class: 'leading-none font-semibold',
-	},
-	toggler: {
-		class: [
-			// Alignments
-			'inline-flex items-center justify-center',
-			'relative',
-
-			// Sized
-			'w-7 h-7',
-			'm-0 p-0',
-
-			//Shape
-			'border-0 rounded-full',
-
-			//Color
-			'bg-transparent',
-			'text-surface-600 dark:text-surface-0/80',
-
-			// States
-			'hover:text-surface-800 dark:hover:text-surface-0',
-			'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]',
-			'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 ease-in-out',
-
-			// Misc
-			'overflow-hidden no-underline',
-			'cursor-pointer',
-		],
-	},
-	togglerIcon: {
-		class: 'inline-block w-4 h-4',
-	},
-	content: {
-		class: [
-			// Spacing
-			'p-[1.125rem] pt-0',
-
-			// Shape
-			'border-0 border-t-0 last:rounded-br-md last:rounded-bl-md',
-
-			//Color
-			'text-surface-700 dark:text-surface-0/80',
-		],
-	},
-	footer: {
-		class: [
-			// Spacing
-			'p-[1.125rem] pt-0',
-
-			// Shape
-			'border-0 border-t-0 rounded-br-lg rounded-bl-lg',
-
-			//Color
-			'text-surface-700 dark:text-surface-0/80',
-		],
-	},
-	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',
-	},
-}