@youngonesworks/ui 0.1.53 → 0.1.55

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

@@ -9,6 +9,7 @@ export declare const PasswordInput: React.ForwardRefExoticComponent<React.InputH
     error?: string;
     showRightSection?: boolean;
     step?: string;
+    loadingState?: boolean;
     autoFocus?: boolean;
     wrapperClassName?: string;
     maxLength?: undefined | number;

package/dist/components/profileMenu/ProfileMenu.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+interface IProfileMenu {
+    title?: ReactNode;
+    metaTitle?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    classNames?: {
+        root?: string;
+        button?: string;
+        menu?: string;
+    };
+    content: {
+        key: number;
+        onClick: () => void;
+        title: string;
+        disabled?: boolean;
+    }[];
+}
+declare const ProfileMenu: ({ title, metaTitle, icon, content, disabled, classNames }: IProfileMenu) => import("react/jsx-runtime").JSX.Element;
+export default ProfileMenu;

package/dist/components/profileMenu/ProfileMenu.stories.d.ts

@@ -0,0 +1,9 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import ProfileMenu from './ProfileMenu';
+declare const meta: Meta<typeof ProfileMenu>;
+export default meta;
+type Story = StoryObj<typeof ProfileMenu>;
+export declare const Default: Story;
+export declare const WithDisabledItems: Story;
+export declare const CustomClasses: Story;
+export declare const DisabledMenu: Story;

package/dist/components/profileMenu/ProfileMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -10,3 +10,4 @@ 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

@@ -10,6 +10,7 @@ export type TextInputProps = InputHTMLAttributes<HTMLInputElement> & {
     error?: string;
     showRightSection?: boolean;
     step?: string;
+    loadingState?: boolean;
     autoFocus?: boolean;
     wrapperClassName?: string;
     maxLength?: undefined | number;
@@ -30,6 +31,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<React.InputHTMLA
     error?: string;
     showRightSection?: boolean;
     step?: string;
+    loadingState?: boolean;
     autoFocus?: boolean;
     wrapperClassName?: string;
     maxLength?: undefined | number;

package/dist/index.cjs

@@ -103141,9 +103141,96 @@ 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",
@@ -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";