react-artasys-ui 0.0.4 → 0.0.6

package/lib/Button/Button.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
+import { TSpinner } from "../Spinner";
 interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     wait?: boolean;
     classNameContainer?: string;
     styleContainer?: React.HTMLAttributes<HTMLDivElement>['style'];
+    spinnerColor?: TSpinner['color'];
 }
-declare const Button: ({ children, className, classNameContainer, styleContainer, wait, ...props }: IButton) => JSX.Element;
+declare const Button: ({ children, className, classNameContainer, styleContainer, spinnerColor, wait, ...props }: IButton) => JSX.Element;
 export default Button;

package/lib/Checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IElement } from "../Form/Element";
+interface ICheckbox extends IElement<HTMLInputElement> {
+    onChangeText?: (text: string) => void;
+    type?: 'checkbox' | 'radio';
+}
+declare const Checkbox: import("react").ForwardRefExoticComponent<ICheckbox & import("react").RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/lib/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import Checkbox from "./Checkbox";
+export default Checkbox;

package/lib/Form/Element/Element.d.ts

@@ -8,6 +8,7 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
     classNameContainer?: string;
     beforeElement?: React.ReactElement;
     afterElement?: React.ReactElement;
+    hiddenContainer?: boolean;
 }
-declare const Element: ({ children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, ...props }: IElement) => JSX.Element;
+declare const Element: ({ children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, hiddenContainer, ...props }: IElement) => JSX.Element;
 export default Element;

package/lib/Spinner/Spinner.d.ts

@@ -1,4 +1,4 @@
-type TSpinner = {
+export type TSpinner = {
     size?: 'small' | 'middle' | 'large';
     color?: 'default' | 'contrast';
 };

package/lib/Spinner/index.d.ts

@@ -1,2 +1,3 @@
-import Spinner from "./Spinner";
+import Spinner, { TSpinner } from "./Spinner";
+export type { TSpinner };
 export default Spinner;

package/lib/index.d.ts

@@ -6,7 +6,8 @@ import Spinner from "./Spinner";
 import File, { TFileData, TFileMime } from "./File";
 import Button from "./Button";
 import UploadImages, { IUploadImages, TImageData, IImage } from "./UploadImages";
+import Checkbox from "./Checkbox";
 declare const UI: {};
-export { Form, FormElement, Element, useForm, Input, TextArea, Spinner, File, Button, UploadImages };
+export { Form, FormElement, Element, useForm, Input, TextArea, Spinner, File, Button, UploadImages, Checkbox };
 export type { TFileData, TFileMime, IUploadImages, IImage, TImageData, IElement };
 export default UI;

package/package.json

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

package/src/Button/Button.tsx

@@ -1,19 +1,22 @@
 import React from "react";
 import styles from "./style.module.css";
-import Spinner from "../Spinner";
+import Spinner,{
+	TSpinner
+} from "../Spinner";
 
 interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	wait?: boolean;
 	classNameContainer?: string;
 	styleContainer?: React.HTMLAttributes<HTMLDivElement>['style'];
+	spinnerColor?: TSpinner['color'];
 }
 
-const Button = ({children, className, classNameContainer, styleContainer, wait = false, ...props}: IButton) => {
+const Button = ({children, className, classNameContainer, styleContainer, spinnerColor = 'contrast', wait = false, ...props}: IButton) => {
 
 	return(<div className={styles['container'] + (classNameContainer ? ' ' + classNameContainer : '')} style={styleContainer}>
 		<button {...props} className={className}>{children}</button>
 		<div className={styles['wait-indicator'] + (wait ? ' ' + styles['active'] : '')}>
-			<Spinner size="small" color="contrast"/>
+			<Spinner size="small" color={spinnerColor}/>
 		</div>
 	</div>)
 };

package/src/Button/style.module.css

@@ -3,13 +3,13 @@
 .container {
 	position: relative;
 	border: 1px solid #5EBED6;
+	background-color: #BED4DB;
 }
 
 .container button {
 	display: block;
 	width: 100%;
     height: 100%;
-	background-color: #BED4DB;
 	border: 0;
     padding: 5px 8px;
     font-size: 1.1em;
@@ -33,7 +33,7 @@
 	height: 100%;
 	justify-content: center;
 	align-items: center;
-	background-color: #BED4DB;
+	background-color: inherit;
 	z-index: -1;
 	opacity: 0;
 	transition: opacity 0.3s;

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,23 @@
+import { forwardRef } from "react";
+import Element,{
+	IElement
+} from "../Form/Element";
+import styles from "./style.module.css";
+
+interface ICheckbox extends IElement<HTMLInputElement> {
+	onChangeText?: (text: string) => void;
+	type?: 'checkbox' | 'radio';
+}
+
+const Checkbox = forwardRef<HTMLInputElement, ICheckbox>(({type = 'checkbox', hiddenContainer = true, placeholder, ...props}: ICheckbox) => {
+
+	return(<Element {...props} hiddenContainer={hiddenContainer}>
+		{(props) => <div className={styles['container']}>
+				<input {...props} type={type}/>
+				<span className={styles['indicator']}/>
+				<span className={styles['text']}>{placeholder}</span>
+			</div>}
+	</Element>);
+});
+
+export default Checkbox;

package/src/Checkbox/index.tsx

@@ -0,0 +1,2 @@
+import Checkbox from "./Checkbox";
+export default Checkbox;

package/src/Checkbox/style.module.css

@@ -0,0 +1,74 @@
+/* Checkbox */
+
+.container {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	height: 100%;
+	cursor: pointer;
+	user-select: none;
+	gap: 10px;
+}
+
+.container > input {
+	display: none;
+}
+
+.text {
+	color: #1D1D1B;
+	font-size: 1.1em;
+}
+
+.indicator {
+	display: flex;
+	position: relative;
+	justify-content: center;
+	align-items: center;
+	border: 1px solid #5EBED6;
+	background-color: #BED4DB;
+	width: 20px;
+	height: 20px;
+	aspect-ratio: 1/1;
+}
+
+.container > input[type="radio"] ~ .indicator {
+	border-radius: 50%;
+}
+
+.container:hover > .indicator {
+	background-color: #5EBED65F;
+}
+
+.indicator::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	width: 35%;
+    height: 70%;
+    border: solid #1D1D1B;
+    border-width: 0 2px 2px 0;
+    transform: rotate( 45deg);
+	scale: 0;
+	opacity: 0;
+	transition: scale 0.1s, opacity 0.1s;
+}
+
+.container > input[type="radio"] ~ .indicator::before {
+	border-width: 0;
+	border-radius: inherit;
+	top: unset;
+	transform: unset;
+	width: 70%;
+	height: 70%;
+	background-color: #1D1D1B;
+}
+
+.container > input:checked ~ .indicator {
+	background-color: #5EBED65F;
+}
+
+.container > input:checked ~ .indicator::before {
+	scale: 1;
+	opacity: 1;
+}

package/src/Form/Element/Element.tsx

@@ -15,19 +15,27 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
 	classNameContainer?: string;
 	beforeElement?: React.ReactElement;
 	afterElement?: React.ReactElement;
+	hiddenContainer?: boolean;
 }
 
-const Element = ({children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, ...props}: IElement) => {
+const Element = ({children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, hiddenContainer, ...props}: IElement) => {
 	const [currentError, setCurrentError] = useState('');
 
 	useEffect(() => {
 		setCurrentError(error ?? '');
 	},[error]);
 
+	const classes = [];
+
+	classes.push(styles['container']);
+	if (currentError) classes.push(styles['error']);
+	if (disabled) classes.push(styles['disabled']);
+	if (hiddenContainer) classes.push(styles['hidden']);
+	if (classNameContainer) classes.push(classNameContainer);
+
 	return(<>
 		<label
-			className={
-				styles['container'] + (currentError ? ' ' + styles['error'] : '') + (disabled ? ' ' + styles['disabled'] : '') + (classNameContainer ? ' ' + classNameContainer : '')}
+			className={classes.join(' ')}
 			style={styleContainer}
 		>
 			{beforeElement}

package/src/Form/Element/style.module.css

@@ -11,6 +11,10 @@
 	z-index: 0;
 }
 
+.container.hidden {
+	border: 0;
+}
+
 .element {
 	align-self: stretch;
 	width: 100%;

package/src/Spinner/Spinner.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./style.module.css";
 
-type TSpinner = {
+export type TSpinner = {
 	size?: 'small' | 'middle' | 'large';
 	color?: 'default' | 'contrast';
 }

package/src/Spinner/index.tsx

@@ -1,3 +1,8 @@
-import Spinner from "./Spinner";
+import Spinner,{
+	TSpinner
+} from "./Spinner";
 
+export type {
+	TSpinner
+};
 export default Spinner;

package/src/index.ts

@@ -18,6 +18,7 @@ import UploadImages,{
 	TImageData,
 	IImage
 } from "./UploadImages";
+import Checkbox from "./Checkbox";
 
 const UI = {
 	
@@ -33,7 +34,8 @@ export {
 	Spinner,
 	File,
 	Button,
-	UploadImages
+	UploadImages,
+	Checkbox
 };
 export type {
 	TFileData,