@cooperco/cooper-component-library 0.0.10

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

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

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

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

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