@youngonesworks/ui 0.1.52 → 0.1.54

package/dist/components/passwordInput/index.d.ts

@@ -2,13 +2,14 @@ import React from 'react';
 export declare const PasswordInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
     rightSection?: React.ReactNode;
     leftSection?: React.ReactNode;
-    label?: React.ReactNode;
+    label?: React.ReactNode | string;
     className?: string;
     min?: string | undefined | number;
     max?: string | undefined | number;
     error?: string;
     showRightSection?: boolean;
     step?: string;
+    loadingState?: boolean;
     autoFocus?: boolean;
     wrapperClassName?: string;
     maxLength?: undefined | number;

package/dist/components/textInput/TextInput.stories.d.ts

@@ -6,3 +6,8 @@ type Story = StoryObj<typeof TextInput>;
 export declare const Default: Story;
 export declare const WithIcon: Story;
 export declare const Password: Story;
+export declare const LeftSection: Story;
+export declare const ErrorState: Story;
+export declare const NumberWithMinMax: Story;
+export declare const PasswordAutofill: Story;
+export declare const LoadingState: Story;

package/dist/components/textInput/index.d.ts

@@ -3,13 +3,14 @@ import { type ChangeEvent, type FocusEvent, type InputHTMLAttributes, type Keybo
 export type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
     rightSection?: React.ReactNode;
     leftSection?: React.ReactNode;
-    label?: React.ReactNode;
+    label?: React.ReactNode | string;
     className?: string;
     min?: string | undefined | number;
     max?: string | undefined | number;
     error?: string;
     showRightSection?: boolean;
     step?: string;
+    loadingState?: boolean;
     autoFocus?: boolean;
     wrapperClassName?: string;
     maxLength?: undefined | number;
@@ -23,13 +24,14 @@ export type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
 export declare const TextInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
     rightSection?: React.ReactNode;
     leftSection?: React.ReactNode;
-    label?: React.ReactNode;
+    label?: React.ReactNode | string;
     className?: string;
     min?: string | undefined | number;
     max?: string | undefined | number;
     error?: string;
     showRightSection?: boolean;
     step?: string;
+    loadingState?: boolean;
     autoFocus?: boolean;
     wrapperClassName?: string;
     maxLength?: undefined | number;

package/dist/index.cjs

@@ -103141,20 +103141,107 @@ const AppleAppButtonIcon = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs
 	}) })]
 });
 
+//#endregion
+//#region src/icons/IconLoading.tsx
+const IconLoading = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "128",
+			y1: "32",
+			x2: "128",
+			y2: "64",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "195.9",
+			y1: "60.1",
+			x2: "173.3",
+			y2: "82.7",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "224",
+			y1: "128",
+			x2: "192",
+			y2: "128",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "195.9",
+			y1: "195.9",
+			x2: "173.3",
+			y2: "173.3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "128",
+			y1: "224",
+			x2: "128",
+			y2: "192",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "60.1",
+			y1: "195.9",
+			x2: "82.7",
+			y2: "173.3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "32",
+			y1: "128",
+			x2: "64",
+			y2: "128",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "24"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.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.default.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.default.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.default.useState(false);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-component": "TextInput",
 		"data-testid": "TextInput",
 		className: clsx_default("relative", wrapperClassName),
 		children: [
-			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			typeof label === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 				htmlFor: props.id,
 				className: "mb-2 flex items-center gap-1 text-xs font-medium text-black",
 				children: label
-			}),
+			}) : label,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative",
 				children: [
@@ -103172,15 +103259,22 @@ const TextInput = react.default.forwardRef(({ rightSection, leftSection, classNa
 						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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(IconLoading, {
+							className: "h-4 w-4 animate-spin text-gray-500",
+							"aria-label": "Loading"
+						})
+					}) : rightSection && showRightSection && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -103343,92 +103437,6 @@ const BreadCrumb = ({ children, LinkText }) => /* @__PURE__ */ (0, react_jsx_run
 });
 BreadCrumb.displayName = "BreadCrumb";
 
-//#endregion
-//#region src/icons/IconLoading.tsx
-const IconLoading = ({ className,...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-	"data-component": "button",
-	"data-testid": "loading-svg-button",
-	viewBox: "0 0 256 256",
-	width: "1em",
-	height: "1em",
-	className,
-	...props,
-	children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "128",
-			y1: "32",
-			x2: "128",
-			y2: "64",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "195.9",
-			y1: "60.1",
-			x2: "173.3",
-			y2: "82.7",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "224",
-			y1: "128",
-			x2: "192",
-			y2: "128",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "195.9",
-			y1: "195.9",
-			x2: "173.3",
-			y2: "173.3",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "128",
-			y1: "224",
-			x2: "128",
-			y2: "192",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "60.1",
-			y1: "195.9",
-			x2: "82.7",
-			y2: "173.3",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-			x1: "32",
-			y1: "128",
-			x2: "64",
-			y2: "128",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			strokeWidth: "24"
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.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";