@youngonesworks/ui 0.1.53 → 0.1.54

package/dist/index.js

@@ -103143,9 +103143,96 @@ const AppleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 	}) })]
 });
 
+//#endregion
+//#region src/icons/IconLoading.tsx
+const IconLoading = ({ className,...props }) => /* @__PURE__ */ jsxs("svg", {
+	"data-component": "button",
+	"data-testid": "loading-svg-button",
+	viewBox: "0 0 256 256",
+	width: "1em",
+	height: "1em",
+	className,
+	stroke: "currentColor",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("line", {
+			x1: "128",
+			y1: "32",
+			x2: "128",
+			y2: "64",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "195.9",
+			y1: "60.1",
+			x2: "173.3",
+			y2: "82.7",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "224",
+			y1: "128",
+			x2: "192",
+			y2: "128",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "195.9",
+			y1: "195.9",
+			x2: "173.3",
+			y2: "173.3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "128",
+			y1: "224",
+			x2: "128",
+			y2: "192",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "60.1",
+			y1: "195.9",
+			x2: "82.7",
+			y2: "173.3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "32",
+			y1: "128",
+			x2: "64",
+			y2: "128",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: "60.1",
+			y1: "60.1",
+			x2: "82.7",
+			y2: "82.7",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		})
+	]
+});
+
 //#endregion
 //#region src/components/textInput/index.tsx
-const TextInput = React.forwardRef(({ rightSection, leftSection, className, error: error$1, autoFocus, label, maxLength, enablePasswordManagerAutofill = false, onBlur, disabled, onKeyDown, min: min$2 = "0", max: max$2, autoComplete, showRightSection = true, step, wrapperClassName, password = false,...props }, ref) => {
+const TextInput = React.forwardRef(({ rightSection, leftSection, className, error: error$1, autoFocus, label, maxLength, enablePasswordManagerAutofill = false, onBlur, disabled, loadingState, onKeyDown, min: min$2 = "0", max: max$2, autoComplete, showRightSection = true, step, wrapperClassName, password = false,...props }, ref) => {
 	const [showPassword, setShowPassword] = React.useState(false);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-component": "TextInput",
@@ -103174,15 +103261,22 @@ const TextInput = React.forwardRef(({ rightSection, leftSection, className, erro
 						disabled,
 						step,
 						maxLength,
-						className: clsx_default(`${disabled ? "text-gray-500" : "text-gray-900"} selection:bg-turquoise-200 focus:border-turquoise-500 focus:ring-turquoise-500 active:border-turquoise-500 active:ring-turquoise-500 h-10 w-full rounded-[4px] border border-gray-200 bg-gray-50 px-3 text-sm font-normal outline-hidden ${rightSection && "pr-12"} ${leftSection && "pl-12"} ${error$1 && "border-red-500 text-red-500 selection:bg-red-200 focus:border-red-500 focus:ring-red-500 focus:placeholder:text-red-500 active:border-red-500 active:ring-red-500"}`, className),
+						className: clsx_default(`${loadingState ? "cursor-not-allowed" : ""}`, `${disabled ? "text-gray-500" : "text-gray-900"} selection:bg-turquoise-200 focus:border-turquoise-500 focus:ring-turquoise-500 active:border-turquoise-500 active:ring-turquoise-500 h-10 w-full rounded-[4px] border border-gray-200 bg-gray-50 px-3 text-sm font-normal outline-hidden ${rightSection && "pr-12"} ${leftSection && "pl-12"} ${error$1 && "border-red-500 text-red-500 selection:bg-red-200 focus:border-red-500 focus:ring-red-500 focus:placeholder:text-red-500 active:border-red-500 active:ring-red-500"}`, className),
+						"aria-busy": loadingState || undefined,
 						"data-lpignore": enablePasswordManagerAutofill ? undefined : "true",
 						"data-1p-ignore": enablePasswordManagerAutofill ? undefined : "true",
 						ref,
 						...props,
 						type: password ? showPassword ? "text" : "password" : "text"
 					}),
-					rightSection && showRightSection && /* @__PURE__ */ jsx("div", {
-						className: "absolute inset-y-0 right-0 flex w-12 content-center items-center justify-center align-middle text-sm font-medium text-black",
+					loadingState ? /* @__PURE__ */ jsx("div", {
+						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black",
+						children: /* @__PURE__ */ jsx(IconLoading, {
+							className: "h-4 w-4 animate-spin text-gray-500",
+							"aria-label": "Loading"
+						})
+					}) : rightSection && showRightSection && /* @__PURE__ */ jsx("div", {
+						className: "absolute inset-y-0 right-0 flex h-10 w-12 content-center items-center justify-center align-middle text-sm font-medium text-black",
 						children: rightSection
 					}),
 					password && /* @__PURE__ */ jsx("div", {
@@ -103345,92 +103439,6 @@ const BreadCrumb = ({ children, LinkText }) => /* @__PURE__ */ jsx(LinkText, {
 });
 BreadCrumb.displayName = "BreadCrumb";
 
-//#endregion
-//#region src/icons/IconLoading.tsx
-const IconLoading = ({ className,...props }) => /* @__PURE__ */ jsxs("svg", {
-	"data-component": "button",
-	"data-testid": "loading-svg-button",
-	viewBox: "0 0 256 256",
-	width: "1em",
-	height: "1em",
-	className,
-	...props,
-	children: [
-		/* @__PURE__ */ jsx("line", {
-			x1: "128",
-			y1: "32",
-			x2: "128",
-			y2: "64",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "195.9",
-			y1: "60.1",
-			x2: "173.3",
-			y2: "82.7",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "224",
-			y1: "128",
-			x2: "192",
-			y2: "128",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "195.9",
-			y1: "195.9",
-			x2: "173.3",
-			y2: "173.3",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "128",
-			y1: "224",
-			x2: "128",
-			y2: "192",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "60.1",
-			y1: "195.9",
-			x2: "82.7",
-			y2: "173.3",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "32",
-			y1: "128",
-			x2: "64",
-			y2: "128",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ jsx("line", {
-			x1: "60.1",
-			y1: "60.1",
-			x2: "82.7",
-			y2: "82.7",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		})
-	]
-});
-
 //#endregion
 //#region src/components/button/buttonVariants.ts
 const defaultButtonStyling = "justify-center group relative flex items-center gap-2 cursor-pointer border rounded py-2 px-5  text-sx md:text-sm md:font-medium font-medium hover:outline-hidden focus:outline-hidden disabled:cursor-not-allowed transition-colors duration-100 ease-in-out";