@cooperco/cooper-component-library 0.0.10 → 0.1.0

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

@@ -1,353 +0,0 @@
-export default {
-	content: ({ parent, props }) => ({
-		class: [
-			'flex',
-			{
-				'flex-col': props.fullScreen,
-			},
-			{
-				'flex-col':
-					parent.props.thumbnailsPosition === 'top' ||
-					parent.props.thumbnailsPosition === 'bottom',
-				'flex-row':
-					parent.props.thumbnailsPosition === 'right' ||
-					parent.props.thumbnailsPosition === 'left',
-			},
-		],
-	}),
-	itemwrapper: ({ parent, props }) => ({
-		class: [
-			'group',
-			'flex relative',
-			{
-				'grow shrink w-0 justify-center': props.fullScreen,
-			},
-			{
-				'flex-col':
-					parent.props.indicatorsPosition === 'bottom' ||
-					parent.props.indicatorsPosition === 'top',
-				'flex-row items-center':
-					parent.props.indicatorsPosition === 'left' ||
-					parent.props.indicatorsPosition === 'right',
-			},
-			{
-				'order-2':
-					parent.props.thumbnailsPosition === 'top' ||
-					parent.props.thumbnailsPosition === 'left',
-				'flex-row': parent.props.thumbnailsPosition === 'right',
-			},
-		],
-	}),
-
-	itemcontainer: ({ parent }) => ({
-		class: [
-			'flex h-full relative',
-			{
-				'order-1':
-					parent.props.indicatorsPosition === 'bottom' ||
-					parent.props.indicatorsPosition === 'right',
-				'order-2':
-					parent.props.indicatorsPosition === 'top' ||
-					parent.props.indicatorsPosition === 'left',
-			},
-		],
-	}),
-	item: {
-		class: [
-			// Flex
-			'flex justify-center items-center h-full w-full',
-
-			// Sizing
-			'h-full w-full',
-		],
-	},
-	thumbnailwrapper: ({ parent }) => ({
-		class: [
-			// Flex
-			'flex flex-col shrink-0',
-
-			{
-				'order-1':
-					parent.props.thumbnailsPosition === 'top' ||
-					parent.props.thumbnailsPosition === 'left',
-			},
-
-			// Misc
-			'overflow-auto',
-		],
-	}),
-	thumbnailcontainer: ({ parent }) => ({
-		class: [
-			// Flex
-			'flex',
-
-			// Spacing
-			'p-4',
-
-			// Colors
-			'bg-black/90',
-
-			{
-				'flex-row':
-					parent.props.thumbnailsPosition === 'top' ||
-					parent.props.thumbnailsPosition === 'bottom',
-				'flex-col grow':
-					parent.props.thumbnailsPosition === 'right' ||
-					parent.props.thumbnailsPosition === 'left',
-			},
-		],
-	}),
-	previousthumbnailbutton: {
-		class: [
-			// Positioning
-			'self-center relative',
-
-			// Display & Flexbox
-			'flex shrink-0 justify-center items-center overflow-hidden',
-
-			// Spacing
-			'm-2',
-
-			// Appearance
-			'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
-
-			// Hover Effects
-			'hover:bg-surface-0/10 hover:text-white',
-
-			// Focus Effects
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-		],
-	},
-	thumbnailitemscontainer: {
-		class: 'overflow-hidden w-full',
-	},
-	thumbnailitems: ({ parent }) => ({
-		class: [
-			'flex',
-			{
-				'flex-col h-full':
-					parent.props.thumbnailsPosition === 'right' ||
-					parent.props.thumbnailsPosition === 'left',
-			},
-		],
-	}),
-	thumbnailitem: ({ parent }) => ({
-		class: [
-			// Flexbox
-			'flex items-center justify-center',
-			'grow shrink-0',
-
-			// Sizing
-			{
-				'w-full md:w-[25%] lg:w-[20%]':
-					parent.props.thumbnailsPosition === 'top' ||
-					parent.props.thumbnailsPosition === 'bottom',
-			},
-
-			// Misc
-			'overflow-auto',
-			'cursor-pointer',
-			'opacity-50',
-
-			// States
-			'[&[data-p-active="true"]]:opacity-100',
-			'hover:opacity-100',
-
-			// Transitions
-			'transition-opacity duration-300',
-		],
-	}),
-	nextthumbnailbutton: {
-		class: [
-			// Positioning
-			'self-center relative',
-
-			// Display & Flexbox
-			'flex shrink-0 justify-center items-center overflow-hidden',
-
-			// Spacing
-			'm-2',
-
-			// Appearance
-			'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
-
-			// Hover Effects
-			'hover:bg-surface-0/10 hover:text-white',
-
-			// Focus Effects
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-		],
-	},
-	indicators: ({ parent }) => ({
-		class: [
-			// flex
-			'flex items-center justify-center',
-
-			// Spacing
-			'p-4',
-
-			// Indicators Position
-			{
-				'order-2': parent.props.indicatorsPosition == 'bottom',
-				'order-1': parent.props.indicatorsPosition == 'top',
-				'order-1 flex-col': parent.props.indicatorsPosition == 'left',
-				'flex-col order-2': parent.props.indicatorsPosition == 'right',
-			},
-			{
-				'absolute z-10 bg-black/50': parent.props.showIndicatorsOnItem,
-			},
-
-			{
-				'bottom-0 left-0 w-full items-start':
-					parent.props.indicatorsPosition == 'bottom' &&
-					parent.props.showIndicatorsOnItem,
-				'top-0 left-0 w-full items-start':
-					parent.props.indicatorsPosition == 'top' &&
-					parent.props.showIndicatorsOnItem,
-				'left-0 top-0 h-full items-start':
-					parent.props.indicatorsPosition == 'left' &&
-					parent.props.showIndicatorsOnItem,
-				'right-0 top-0 h-full items-start':
-					parent.props.indicatorsPosition == 'right' &&
-					parent.props.showIndicatorsOnItem,
-			},
-		],
-	}),
-	indicator: ({ parent }) => ({
-		class: [
-			{
-				'mr-2':
-					parent.props.indicatorsPosition == 'bottom' ||
-					parent.props.indicatorsPosition == 'top',
-				'mb-2':
-					parent.props.indicatorsPosition == 'left' ||
-					parent.props.indicatorsPosition == 'right',
-			},
-		],
-	}),
-	indicatorbutton: ({ context }) => ({
-		class: [
-			// Size
-			'w-4 h-4',
-
-			// Appearance
-			'rounded-full transition duration-200',
-
-			// Focus Effects
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-
-			// Conditional Appearance: Not Highlighted
-			{
-				'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600':
-					!context.highlighted,
-			},
-
-			// Conditional Appearance: Highlighted
-			{ 'bg-primary hover:bg-primary-hover': context.highlighted },
-		],
-	}),
-	mask: {
-		class: [
-			'fixed top-0 left-0 w-full h-full',
-			'flex items-center justify-center',
-			'bg-black/90',
-		],
-	},
-	closebutton: {
-		class: [
-			// Positioning
-			'!absolute top-0 right-0',
-
-			// Display & Flexbox
-			'flex justify-center items-center overflow-hidden',
-
-			// Spacing
-			'm-2',
-
-			// Appearance
-			'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
-
-			// Hover Effect
-			'hover:text-white hover:bg-surface-0/10',
-
-			// Focus Effects
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-		],
-	},
-	closeicon: {
-		class: 'w-6 h-6',
-	},
-	previousitembutton: ({ parent }) => ({
-		class: [
-			// Display & Flexbox
-			'inline-flex justify-center items-center overflow-hidden',
-
-			// Appearance
-			'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
-			{
-				'opacity-0 group-hover:opacity-100':
-					parent.props.showItemNavigatorsOnHover,
-			},
-
-			// Spacing
-			'mx-2',
-
-			// Positioning
-			'top-1/2 mt-[-0.5rem] left-0',
-			{
-				'!absolute': parent.props.showItemNavigators,
-				'!fixed': !parent.props.showItemNavigators,
-			},
-
-			// Hover Effect
-			'hover:bg-surface-0/10 hover:text-white',
-
-			// Focus Effects
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-		],
-	}),
-	nextitembutton: ({ parent }) => ({
-		class: [
-			// Display & Flexbox
-			'inline-flex justify-center items-center overflow-hidden',
-
-			// Appearance
-			'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
-			{
-				'opacity-0 group-hover:opacity-100':
-					parent.props.showItemNavigatorsOnHover,
-			},
-
-			// Spacing
-			'mx-2',
-
-			// Positioning
-			'top-1/2 mt-[-0.5rem] right-0',
-			{
-				'!absolute': parent.props.showItemNavigators,
-				'!fixed': !parent.props.showItemNavigators,
-			},
-
-			// Hover Effect
-			'hover:bg-surface-0/10 hover:text-white',
-
-			// Focus Effects
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-		],
-	}),
-	caption: {
-		class: [
-			// Positioning
-			'absolute bottom-0 left-0 w-full',
-
-			// Appearance
-			'bg-black/50 text-white p-4',
-		],
-	},
-	transition: {
-		enterFromClass: 'opacity-0 scale-75',
-		enterActiveClass: 'transition-all duration-150 ease-in-out',
-		leaveActiveClass: 'transition-all duration-150 ease-in',
-		leaveToClass: 'opacity-0 scale-75',
-	},
-}

package/src/presets/aura/global.js

@@ -1,90 +0,0 @@
-export default {
-	css: `
-    *[data-pd-ripple="true"]{
-        overflow: hidden;
-        position: relative;
-    }
-    span[data-p-ink-active="true"]{
-        animation: ripple 0.4s linear;
-    }
-    @keyframes ripple {
-        100% {
-            opacity: 0;
-            transform: scale(2.5);
-        }
-    }
-
-    .progress-spinner-circle {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: 0;
-        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
-        stroke-linecap: round;
-    }
-
-    @keyframes p-progress-spinner-dash{
-        0% {
-            stroke-dasharray: 1, 200;
-            stroke-dashoffset: 0;
-        }
-
-        50% {
-            stroke-dasharray: 89, 200;
-            stroke-dashoffset: -35px;
-        }
-        100% {
-            stroke-dasharray: 89, 200;
-            stroke-dashoffset: -124px;
-        }
-    }
-    @keyframes p-progress-spinner-color {
-        100%, 0% {
-            stroke: #ff5757;
-        }
-        40% {
-            stroke: #696cff;
-        }
-        66% {
-            stroke: #1ea97c;
-        }
-        80%, 90% {
-            stroke: #cc8925;
-        }
-    }
-
-    .progressbar-value-animate::after {
-        will-change: left, right;
-        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-    }
-    .progressbar-value-animate::before {
-        will-change: left, right;
-        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-    }
-    @keyframes p-progressbar-indeterminate-anim {
-        0% {
-            left: -35%;
-            right: 100%;
-        }
-        60% {
-            left: 100%;
-            right: -90%;
-        }
-        100% {
-            left: 100%;
-            right: -90%;
-        }
-    }
-
-    .p-fadein {
-        animation: p-fadein 250ms linear;
-    }
-
-    @keyframes p-fadein {
-        0% {
-            opacity: 0;
-        }
-        100% {
-            opacity: 1;
-        }
-    }
-`,
-}

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

@@ -1,22 +0,0 @@
-export default {
-	root: ({ props }) => ({
-		class: [
-			'relative',
-			'[&>input]:w-full',
-
-			'[&>*:first-child]:absolute',
-			'[&>*:first-child]:top-1/2',
-			'[&>*:first-child]:-mt-2',
-			'[&>*:first-child]:leading-none',
-			'[&>*:first-child]:text-surface-900/60 dark:[&>*:first-child]:text-white/60',
-			{
-				'[&>*:first-child]:right-3': props.iconPosition === 'right',
-				'[&>*:first-child]:left-3': props.iconPosition === 'left',
-			},
-			{
-				'[&>*:last-child]:pr-10': props.iconPosition === 'right',
-				'[&>*:last-child]:pl-10': props.iconPosition === 'left',
-			},
-		],
-	}),
-}

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

@@ -1,206 +0,0 @@
-export default {
-	root: {
-		class: 'relative inline-block',
-	},
-	button: {
-		class: [
-			// Flexbox & Alignment
-			'flex items-center justify-center',
-
-			// Positioning
-			'absolute',
-
-			// Shape
-			'inset-0 opacity-0 transition-opacity duration-300',
-
-			// Color
-			'bg-transparent text-surface-100',
-
-			// States
-			'hover:opacity-100 hover:cursor-pointer hover:bg-black/50 hover:bg-opacity-50',
-		],
-	},
-	mask: {
-		class: [
-			// Flexbox & Alignment
-			'flex items-center justify-center',
-
-			// Positioning
-			'fixed top-0 left-0',
-
-			// Sizing
-			'w-full h-full',
-
-			// Color
-			'bg-black/90',
-		],
-	},
-	toolbar: {
-		class: [
-			// Flexbox
-			'flex',
-
-			// Positioning
-			'absolute top-0 right-0',
-
-			// Spacing
-			'p-4',
-		],
-	},
-	rotaterightbutton: {
-		class: [
-			'z-20',
-
-			// Flexbox & Alignment
-			'flex justify-center items-center',
-
-			// Size
-			'w-12 h-12',
-
-			// Spacing
-			'mr-2',
-
-			// Shape
-			'rounded-full',
-
-			// Color
-			'text-white bg-transparent',
-
-			// States
-			'hover:text-white hover:bg-surface-0/10',
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-
-			// Transition
-			'transition duration-200 ease-in-out',
-		],
-	},
-	rotaterighticon: {
-		class: 'w-6 h-6',
-	},
-	rotateleftbutton: {
-		class: [
-			'z-20',
-
-			// Flexbox & Alignment
-			'flex justify-center items-center',
-
-			// Size
-			'w-12 h-12',
-
-			// Spacing
-			'mr-2',
-
-			// Shape
-			'rounded-full',
-
-			// Color
-			'text-white bg-transparent',
-
-			// States
-			'hover:text-white hover:bg-surface-0/10',
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-
-			// Transition
-			'transition duration-200 ease-in-out',
-		],
-	},
-	rotatelefticon: {
-		class: 'w-6 h-6',
-	},
-	zoomoutbutton: {
-		class: [
-			'z-20',
-
-			// Flexbox & Alignment
-			'flex justify-center items-center',
-
-			// Size
-			'w-12 h-12',
-
-			// Spacing
-			'mr-2',
-
-			// Shape
-			'rounded-full',
-
-			// Color
-			'text-white bg-transparent',
-
-			// States
-			'hover:text-white hover:bg-surface-0/10',
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-
-			// Transition
-			'transition duration-200 ease-in-out',
-		],
-	},
-	zoomouticon: {
-		class: 'w-6 h-6',
-	},
-	zoominbutton: {
-		class: [
-			'z-20',
-
-			// Flexbox & Alignment
-			'flex justify-center items-center',
-
-			// Size
-			'w-12 h-12',
-
-			// Spacing
-			'mr-2',
-
-			// Shape
-			'rounded-full',
-
-			// Color
-			'text-white bg-transparent',
-
-			// States
-			'hover:text-white hover:bg-surface-0/10',
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-
-			// Transition
-			'transition duration-200 ease-in-out',
-		],
-	},
-	zoominicon: {
-		class: 'w-6 h-6',
-	},
-	closebutton: {
-		class: [
-			'z-20',
-
-			// Flexbox & Alignment
-			'flex justify-center items-center',
-
-			// Size
-			'w-12 h-12',
-
-			// Spacing
-			'mr-2',
-
-			// Shape
-			'rounded-full',
-
-			// Color
-			'text-white bg-transparent',
-
-			// States
-			'hover:text-white hover:bg-surface-0/10',
-			'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
-
-			// Transition
-			'transition duration-200 ease-in-out',
-		],
-	},
-	closeicon: {
-		class: 'w-6 h-6',
-	},
-	transition: {
-		enterFromClass: 'opacity-0 scale-75',
-		enterActiveClass: 'transition-all duration-150 ease-in-out',
-		leaveActiveClass: 'transition-all duration-150 ease-in',
-		leaveToClass: 'opacity-0 scale-75',
-	},
-}