react-artasys-ui 0.1.3 → 0.1.4

package/lib/Form/Form.d.ts

@@ -1,7 +1,9 @@
 import { FormHTMLAttributes, ReactNode } from 'react';
+import { TSpinner } from '../Spinner';
 interface IForm extends FormHTMLAttributes<HTMLFormElement> {
     children: ReactNode;
     wait?: boolean;
+    spinnerColor?: TSpinner['color'];
 }
-declare const Form: ({ children, wait, className, onSubmit, ...props }: IForm) => JSX.Element;
+declare const Form: ({ children, wait, className, spinnerColor, onSubmit, ...props }: IForm) => JSX.Element;
 export default Form;

package/lib/Spinner/Spinner.d.ts

@@ -1,6 +1,7 @@
-export type TSpinner = {
+import { AllHTMLAttributes } from "react";
+export type TSpinner = Omit<AllHTMLAttributes<HTMLDivElement>, 'size' | 'color'> & {
     size?: 'small' | 'middle' | 'large';
-    color?: 'default' | 'contrast';
+    color?: 'contrast' | 'orange';
 };
-declare const Spinner: ({ size, color }: TSpinner) => JSX.Element;
+declare const Spinner: ({ size, color, ...props }: TSpinner) => JSX.Element;
 export default Spinner;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-artasys-ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "",
   "main": "dist/index.js",
   "types": "lib/index.d.ts",

package/src/Form/Form.tsx

@@ -1,14 +1,17 @@
 import { FormHTMLAttributes, ReactNode, FormEvent } from 'react';
 import styles from './style.module.css';
 
-import Spinner from '../Spinner';
+import Spinner,{
+	TSpinner
+} from '../Spinner';
 
 interface IForm extends FormHTMLAttributes<HTMLFormElement> {
 	children: ReactNode;
 	wait?: boolean;
+	spinnerColor?: TSpinner['color'];
 }
 
-const Form = ({children, wait, className, onSubmit, ...props}: IForm) => {
+const Form = ({children, wait, className, spinnerColor, onSubmit, ...props}: IForm) => {
 
 	const submit = (e: FormEvent<HTMLFormElement>) => {
 		e.preventDefault();
@@ -26,7 +29,7 @@ const Form = ({children, wait, className, onSubmit, ...props}: IForm) => {
 	return(<form {...props} onSubmit={submit} className={classes.join(' ')}>
 		{children}
 		<div className={styles['wait-indicator']}>
-			<Spinner size="large" color="contrast"/>
+			<Spinner color={spinnerColor}/>
 		</div>
 	</form>);
 };

package/src/Spinner/Spinner.tsx

@@ -1,21 +1,21 @@
-import React from "react";
+import { AllHTMLAttributes } from "react";
 import styles from "./style.module.css";
 
-export type TSpinner = {
+export type TSpinner = Omit<AllHTMLAttributes<HTMLDivElement>, 'size' | 'color'> & {
 	size?: 'small' | 'middle' | 'large';
-	color?: 'default' | 'contrast';
+	color?: 'contrast' | 'orange';
 }
 
-const Spinner = ({size, color = 'default'}: TSpinner) => {
+const Spinner = ({size, color, ...props}: TSpinner) => {
 
 	const classes = ['ui-spinner'];
 
 	classes.push(styles['spinner']);
-	if (size) classes.push(styles[size]);
-	if (color) classes.push(styles[color]);
-	classes.push(styles['animate']);
+	if (size) classes.push(styles[size], 'ui-spinner-' + size);
+	if (color) classes.push(styles[color], 'ui-spinner-' + color);
+	if (props.className) classes.push(props.className);
 
-	return(<div className={classes.join(' ')}></div>);
+	return(<div {...props} className={classes.join(' ')}></div>);
 };
 
 export default Spinner;

package/src/Spinner/style.module.css

@@ -1,4 +1,12 @@
+/* Spinner */
+
 .spinner {
+	--color-rgb: 94, 190, 214;
+	width: 100%;
+    height: 100%;
+    max-width: 100px;
+    max-height: 100px;
+    aspect-ratio: 1/1;
 	padding-left: calc(-0.5rem / 2);
 	padding-right: calc(-0.5rem / 2);
 }
@@ -6,8 +14,9 @@
 .spinner::before {
 	content: '';
 	display: inline-block;
-    width: 1rem;
-    height: 1rem;
+	width: 100%;
+	max-width: 100%;
+    max-height: 100%;
 	--border-width: clamp(0.2em, 10%, 0.5em);
 	border-radius: 50%;
 	aspect-ratio: 1/1;
@@ -17,56 +26,34 @@
 		#000 calc(100% - var(--border-width) + 0.5px)
 	);
 	mask: var(--mask);
-	background: linear-gradient(to top, rgba(251, 163, 29, 1), rgba(251, 163, 29, 0.5)) 100% 0/50% 100% no-repeat,
-			linear-gradient(rgba(251, 163, 29, 0.5) 50%, transparent 95%) 0 0/50% 100% no-repeat;
+	background: linear-gradient(to top, rgba(var(--color-rgb), 1), rgba(var(--color-rgb), 0.5)) 100% 0/50% 100% no-repeat,
+			linear-gradient(rgba(var(--color-rgb), 0.5) 50%, transparent 95%) 0 0/50% 100% no-repeat;
+	animation: button-spinner-border .85s linear infinite;
 }
 
-.spinner.default::before {
-	border-color: #FFFFFF;
+.spinner.contrast {
+	--color-rgb: 255, 255, 255;
 }
 
-.spinner.contrast::before {
-	background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5)) 100% 0/50% 100% no-repeat,
-			linear-gradient(rgba(255, 255, 255, 0.5) 50%, transparent 95%) 0 0/50% 100% no-repeat;
+.spinner.orange {
+	--color-rgb: 251, 163, 29;
 }
 
-.spinner.small::before {
+.spinner.small {
 	width: 1rem;
     height: 1rem;
 }
 
-.spinner.middle::before {
+.spinner.middle {
 	width: 4rem;
     height: 4rem;
 }
 
-.spinner.large::before {
+.spinner.large {
 	width: 8rem;
     height: 8rem;
 }
 
-.spinner.big::before {
-	width: 2rem;
-    height: 2rem;
-}
-
-.spinner.full {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-}
-
-.spinner.full::before {
-	width: 80%;
-	height: 80%;
-}
-
-.spinner.animate::before {
-    animation: button-spinner-border .85s linear infinite;
-}
-
 @keyframes button-spinner-border {
 	to{
 		transform:rotate(360deg)

package/src/UploadImages/Image.tsx

@@ -78,7 +78,7 @@ const Image = ({onChange, onClick, onId, onRemove, ...props}: IImage) => {
 		<span className={styles['close']} onClick={handleRemove} onBlur={handleCancelRemove} tabIndex={1}/>
 		<img src={src ?? base64?.toString()} onLoad={handleLoad}/>
 		{wait && <span className={styles['wait']}>
-			<Spinner size="small" color="contrast"/>
+			<Spinner/>
 		</span>}
 	</span>);
 };