fix: textarea and select label

Author: luangjokaj

@types/cherry.d.ts

@@ -168,6 +168,7 @@ interface SelectProps
 	error?: boolean;
 	success?: boolean;
 	size?: "default" | "big";
+	label?: string;
 	theme?: object;
 }
 
@@ -177,6 +178,7 @@ interface TextareaProps
 	error?: boolean;
 	success?: boolean;
 	size?: "default" | "big";
+	label?: string;
 	theme?: object;
 }
 

dist/cherry.js

@@ -1,6 +1,6 @@
 {
 	"name": "cherry-components",
-	"version": "0.0.1-8",
+	"version": "0.0.1-9",
 	"description": "Cherry React Components",
 	"main": "dist/cherry.js",
 	"module": "dist/cherry.module.js",

dist/cherry.module.js

@@ -2,34 +2,39 @@ import React from "react";
 import { localTheme } from "../../../theme";
 import { Arrow } from "../../../svg/Arrow";
 import { selectWrapperStyles, inputStyles } from "../Input.styles";
+import { Label } from "../../Label";
 
 function Select({
 	className,
 	children,
 	size = "default",
 	error,
 	success,
+	label,
 	theme = localTheme,
 	...props
 }) {
 	return (
-		<div css={selectWrapperStyles(theme, size, success, error)}>
-			<select
-				className={className}
-				css={inputStyles(
-					theme,
-					"text",
-					size,
-					props.disabled,
-					success,
-					error,
-				)}
-				{...props}
-			>
-				{children}
-			</select>
-			<Arrow />
-		</div>
+		<>
+			{label && <Label htmlFor={props.id}>{label}</Label>}
+			<div css={selectWrapperStyles(theme, size, success, error)}>
+				<select
+					className={className}
+					css={inputStyles(
+						theme,
+						"text",
+						size,
+						props.disabled,
+						success,
+						error,
+					)}
+					{...props}
+				>
+					{children}
+				</select>
+				<Arrow />
+			</div>
+		</>
 	);
 }
 

package-lock.json

@@ -1,29 +1,33 @@
 import React from "react";
 import { localTheme } from "../../../theme";
-import { Arrow } from "../../../svg/Arrow";
+import { Label } from "../../Label";
 import { inputStyles } from "../Input.styles";
 
 function Textarea({
 	className,
 	size = "default",
 	error,
 	success,
+	label,
 	theme = localTheme,
 	...props
 }) {
 	return (
-		<textarea
-			className={className}
-			css={inputStyles(
-				theme,
-				"text",
-				size,
-				props.disabled,
-				success,
-				error,
-			)}
-			{...props}
-		/>
+		<>
+			{label && <Label htmlFor={props.id}>{label}</Label>}
+			<textarea
+				className={className}
+				css={inputStyles(
+					theme,
+					"text",
+					size,
+					props.disabled,
+					success,
+					error,
+				)}
+				{...props}
+			/>
+		</>
 	);
 }