erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/otp-input-Bg4nQG6x.mjs

@@ -0,0 +1,180 @@
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/otp-input/OTPInput.tsx
+var sizeStyles = {
+	sm: "w-9 h-10 text-base",
+	md: "w-12 h-14 text-xl",
+	lg: "w-14 h-16 text-2xl"
+};
+var variantStyles = {
+	outlined: {
+		base: "border border-input bg-background-secondary rounded-lg shadow-input text-foreground",
+		focus: "focus:border-accent focus:ring-2 focus:ring-accent",
+		error: "border-destructive"
+	},
+	filled: {
+		base: "border border-transparent bg-accent-subtle rounded-lg text-foreground",
+		focus: "focus:border-accent focus:bg-background-secondary focus:ring-2 focus:ring-accent",
+		error: "bg-danger-subtle border-danger-border"
+	},
+	underlined: {
+		base: "border-b-2 border-border-strong bg-transparent rounded-none text-foreground",
+		focus: "focus:border-accent",
+		error: "border-destructive"
+	}
+};
+var OTPInput = forwardRef(({ length = 6, onChange, onComplete, value: controlledValue, defaultValue = "", size = "md", variant = "outlined", disabled = false, error = false, errorMessage, placeholder = "", mask = false, autoFocus = false, type = "number", className = "", inputClassName = "", separator = /* @__PURE__ */ jsx("span", {
+	className: "text-neutral-400 text-2xl mx-2",
+	children: "—"
+}), separatorPositions = [], "aria-label": ariaLabel = "One-time password" }, ref) => {
+	const [values, setValues] = useState(() => {
+		return (controlledValue ?? defaultValue).split("").slice(0, length).concat(Array(length).fill("")).slice(0, length);
+	});
+	const inputRefs = useRef([]);
+	useEffect(() => {
+		if (controlledValue !== void 0) setValues(controlledValue.split("").slice(0, length).concat(Array(length).fill("")).slice(0, length));
+	}, [controlledValue, length]);
+	useEffect(() => {
+		if (autoFocus && inputRefs.current[0]) inputRefs.current[0].focus();
+	}, [autoFocus]);
+	const focusInput = useCallback((index) => {
+		if (index >= 0 && index < length && inputRefs.current[index]) {
+			inputRefs.current[index]?.focus();
+			inputRefs.current[index]?.select();
+		}
+	}, [length]);
+	const handleChange = useCallback((index, e) => {
+		const char = e.target.value.slice(-1);
+		if (type === "number" && char && !/^\d$/.test(char)) return;
+		const newValues = [...values];
+		newValues[index] = char;
+		setValues(newValues);
+		const otpValue = newValues.join("");
+		onChange?.(otpValue);
+		if (char && index < length - 1) focusInput(index + 1);
+		if (newValues.every((v) => v !== "") && newValues.length === length) onComplete?.(otpValue);
+	}, [
+		values,
+		onChange,
+		onComplete,
+		length,
+		type,
+		focusInput
+	]);
+	const handleKeyDown = useCallback((index, e) => {
+		switch (e.key) {
+			case "Backspace":
+				e.preventDefault();
+				const newValues = [...values];
+				if (values[index]) {
+					newValues[index] = "";
+					setValues(newValues);
+					onChange?.(newValues.join(""));
+				} else if (index > 0) {
+					newValues[index - 1] = "";
+					setValues(newValues);
+					onChange?.(newValues.join(""));
+					focusInput(index - 1);
+				}
+				break;
+			case "ArrowLeft":
+				e.preventDefault();
+				focusInput(index - 1);
+				break;
+			case "ArrowRight":
+				e.preventDefault();
+				focusInput(index + 1);
+				break;
+			case "Delete":
+				e.preventDefault();
+				const deleteValues = [...values];
+				deleteValues[index] = "";
+				setValues(deleteValues);
+				onChange?.(deleteValues.join(""));
+				break;
+		}
+	}, [
+		values,
+		onChange,
+		focusInput
+	]);
+	const handlePaste = useCallback((e) => {
+		e.preventDefault();
+		const pastedData = e.clipboardData.getData("text").slice(0, length);
+		if (type === "number" && !/^\d*$/.test(pastedData)) return;
+		const newValues = pastedData.split("").slice(0, length).concat(Array(length).fill("")).slice(0, length);
+		setValues(newValues);
+		const otpValue = newValues.join("");
+		onChange?.(otpValue);
+		const lastFilledIndex = newValues.findLastIndex((v) => v !== "");
+		focusInput(Math.min(lastFilledIndex + 1, length - 1));
+		if (newValues.every((v) => v !== "") && pastedData.length >= length) onComplete?.(otpValue);
+	}, [
+		length,
+		type,
+		onChange,
+		onComplete,
+		focusInput
+	]);
+	const handleFocus = useCallback((e) => {
+		e.target.select();
+	}, []);
+	const renderInputs = () => {
+		const inputs = [];
+		for (let i = 0; i < length; i++) {
+			if (separatorPositions.includes(i) && i > 0) inputs.push(/* @__PURE__ */ jsx("div", {
+				className: "flex items-center",
+				children: separator
+			}, `separator-${i}`));
+			inputs.push(/* @__PURE__ */ jsx("input", {
+				ref: (el) => {
+					inputRefs.current[i] = el;
+					return () => {
+						inputRefs.current[i] = null;
+					};
+				},
+				type: mask ? "password" : "text",
+				inputMode: type === "number" ? "numeric" : "text",
+				pattern: type === "number" ? "\\d*" : void 0,
+				maxLength: 1,
+				value: values[i] || "",
+				placeholder,
+				disabled,
+				onChange: (e) => handleChange(i, e),
+				onKeyDown: (e) => handleKeyDown(i, e),
+				onPaste: handlePaste,
+				onFocus: handleFocus,
+				"aria-label": `${ariaLabel} digit ${i + 1}`,
+				className: `
+              text-center font-semibold outline-none transition-all
+              placeholder:text-muted-foreground
+              ${sizeStyles[size]}
+              ${variantStyles[variant].base}
+              ${!error ? variantStyles[variant].focus : ""}
+              ${error ? variantStyles[variant].error : ""}
+              ${disabled ? "opacity-50 cursor-not-allowed bg-muted" : ""}
+              ${inputClassName}
+            `
+			}, i));
+		}
+		return inputs;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: `flex flex-col gap-2 ${className}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			role: "group",
+			"aria-label": ariaLabel,
+			children: renderInputs()
+		}), error && errorMessage && /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-destructive",
+			children: errorMessage
+		})]
+	});
+});
+OTPInput.displayName = "OTPInput";
+//#endregion
+export { OTPInput as t };
+
+//# sourceMappingURL=otp-input-Bg4nQG6x.mjs.map

package/dist/chunks/otp-input-Bg4nQG6x.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input-Bg4nQG6x.mjs","names":[],"sources":["../../src/components/forms/otp-input/OTPInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  type KeyboardEvent,\n  type ClipboardEvent,\n  type ChangeEvent,\n} from \"react\";\n\nexport type OTPInputSize = \"sm\" | \"md\" | \"lg\";\nexport type OTPInputVariant = \"outlined\" | \"filled\" | \"underlined\";\n\nexport interface OTPInputProps {\n  /** Number of OTP digits */\n  length?: number;\n  /** Callback when OTP value changes */\n  onChange?: (value: string) => void;\n  /** Callback when all digits are filled */\n  onComplete?: (value: string) => void;\n  /** The current value (controlled) */\n  value?: string;\n  /** Default value (uncontrolled) */\n  defaultValue?: string;\n  /** Size of the input boxes */\n  size?: OTPInputSize;\n  /** Visual variant */\n  variant?: OTPInputVariant;\n  /** Whether the input is disabled */\n  disabled?: boolean;\n  /** Whether there's an error */\n  error?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n  /** Placeholder character */\n  placeholder?: string;\n  /** Whether to mask the input (like password) */\n  mask?: boolean;\n  /** Whether to auto-focus the first input */\n  autoFocus?: boolean;\n  /** Input type - number only or alphanumeric */\n  type?: \"number\" | \"text\";\n  /** Custom className for the container */\n  className?: string;\n  /** Custom className for each input box */\n  inputClassName?: string;\n  /** Separator to show between groups of digits */\n  separator?: React.ReactNode;\n  /** Position(s) to show separator (e.g., [3] means after 3rd digit) */\n  separatorPositions?: number[];\n  /** Accessible label */\n  \"aria-label\"?: string;\n}\n\nconst sizeStyles: Record<OTPInputSize, string> = {\n  sm: \"w-9 h-10 text-base\",\n  md: \"w-12 h-14 text-xl\",\n  lg: \"w-14 h-16 text-2xl\",\n};\n\nconst variantStyles: Record<\n  OTPInputVariant,\n  { base: string; focus: string; error: string }\n> = {\n  outlined: {\n    base: \"border border-input bg-background-secondary rounded-lg shadow-input text-foreground\",\n    focus: \"focus:border-accent focus:ring-2 focus:ring-accent\",\n    error: \"border-destructive\",\n  },\n  filled: {\n    base: \"border border-transparent bg-accent-subtle rounded-lg text-foreground\",\n    focus:\n      \"focus:border-accent focus:bg-background-secondary focus:ring-2 focus:ring-accent\",\n    error: \"bg-danger-subtle border-danger-border\",\n  },\n  underlined: {\n    base: \"border-b-2 border-border-strong bg-transparent rounded-none text-foreground\",\n    focus: \"focus:border-accent\",\n    error: \"border-destructive\",\n  },\n};\n\nconst OTPInput = forwardRef<HTMLDivElement, OTPInputProps>(\n  (\n    {\n      length = 6,\n      onChange,\n      onComplete,\n      value: controlledValue,\n      defaultValue = \"\",\n      size = \"md\",\n      variant = \"outlined\",\n      disabled = false,\n      error = false,\n      errorMessage,\n      placeholder = \"\",\n      mask = false,\n      autoFocus = false,\n      type = \"number\",\n      className = \"\",\n      inputClassName = \"\",\n      separator = <span className=\"text-neutral-400 text-2xl mx-2\">—</span>,\n      separatorPositions = [],\n      \"aria-label\": ariaLabel = \"One-time password\",\n    },\n    ref,\n  ) => {\n    const [values, setValues] = useState<string[]>(() => {\n      const initial = controlledValue ?? defaultValue;\n      return initial\n        .split(\"\")\n        .slice(0, length)\n        .concat(Array(length).fill(\"\"))\n        .slice(0, length);\n    });\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n\n    // Sync with controlled value\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        const newValues = controlledValue\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n        setValues(newValues);\n      }\n    }, [controlledValue, length]);\n\n    // Auto-focus first input\n    useEffect(() => {\n      if (autoFocus && inputRefs.current[0]) {\n        inputRefs.current[0].focus();\n      }\n    }, [autoFocus]);\n\n    const focusInput = useCallback(\n      (index: number) => {\n        if (index >= 0 && index < length && inputRefs.current[index]) {\n          inputRefs.current[index]?.focus();\n          inputRefs.current[index]?.select();\n        }\n      },\n      [length],\n    );\n\n    const handleChange = useCallback(\n      (index: number, e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const char = inputValue.slice(-1);\n\n        // Validate input based on type\n        if (type === \"number\" && char && !/^\\d$/.test(char)) {\n          return;\n        }\n\n        const newValues = [...values];\n        newValues[index] = char;\n        setValues(newValues);\n\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Move to next input if value entered\n        if (char && index < length - 1) {\n          focusInput(index + 1);\n        }\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && newValues.length === length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [values, onChange, onComplete, length, type, focusInput],\n    );\n\n    const handleKeyDown = useCallback(\n      (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n        switch (e.key) {\n          case \"Backspace\":\n            e.preventDefault();\n            const newValues = [...values];\n            if (values[index]) {\n              // Clear current value\n              newValues[index] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n            } else if (index > 0) {\n              // Move to previous and clear\n              newValues[index - 1] = \"\";\n              setValues(newValues);\n              onChange?.(newValues.join(\"\"));\n              focusInput(index - 1);\n            }\n            break;\n          case \"ArrowLeft\":\n            e.preventDefault();\n            focusInput(index - 1);\n            break;\n          case \"ArrowRight\":\n            e.preventDefault();\n            focusInput(index + 1);\n            break;\n          case \"Delete\":\n            e.preventDefault();\n            const deleteValues = [...values];\n            deleteValues[index] = \"\";\n            setValues(deleteValues);\n            onChange?.(deleteValues.join(\"\"));\n            break;\n        }\n      },\n      [values, onChange, focusInput],\n    );\n\n    const handlePaste = useCallback(\n      (e: ClipboardEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        const pastedData = e.clipboardData.getData(\"text\").slice(0, length);\n\n        // Validate pasted content\n        if (type === \"number\" && !/^\\d*$/.test(pastedData)) {\n          return;\n        }\n\n        const newValues = pastedData\n          .split(\"\")\n          .slice(0, length)\n          .concat(Array(length).fill(\"\"))\n          .slice(0, length);\n\n        setValues(newValues);\n        const otpValue = newValues.join(\"\");\n        onChange?.(otpValue);\n\n        // Focus last filled input or last input\n        const lastFilledIndex = newValues.findLastIndex((v) => v !== \"\");\n        focusInput(Math.min(lastFilledIndex + 1, length - 1));\n\n        // Check if complete\n        if (newValues.every((v) => v !== \"\") && pastedData.length >= length) {\n          onComplete?.(otpValue);\n        }\n      },\n      [length, type, onChange, onComplete, focusInput],\n    );\n\n    const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      e.target.select();\n    }, []);\n\n    const renderInputs = () => {\n      const inputs: React.ReactNode[] = [];\n\n      for (let i = 0; i < length; i++) {\n        // Add separator if needed\n        if (separatorPositions.includes(i) && i > 0) {\n          inputs.push(\n            <div key={`separator-${i}`} className=\"flex items-center\">\n              {separator}\n            </div>,\n          );\n        }\n\n        inputs.push(\n          <input\n            key={i}\n            ref={(el) => {\n              inputRefs.current[i] = el;\n              // React 19: Return cleanup function\n              return () => {\n                inputRefs.current[i] = null;\n              };\n            }}\n            type={mask ? \"password\" : \"text\"}\n            inputMode={type === \"number\" ? \"numeric\" : \"text\"}\n            pattern={type === \"number\" ? \"\\\\d*\" : undefined}\n            maxLength={1}\n            value={values[i] || \"\"}\n            placeholder={placeholder}\n            disabled={disabled}\n            onChange={(e) => handleChange(i, e)}\n            onKeyDown={(e) => handleKeyDown(i, e)}\n            onPaste={handlePaste}\n            onFocus={handleFocus}\n            aria-label={`${ariaLabel} digit ${i + 1}`}\n            className={`\n              text-center font-semibold outline-none transition-all\n              placeholder:text-muted-foreground\n              ${sizeStyles[size]}\n              ${variantStyles[variant].base}\n              ${!error ? variantStyles[variant].focus : \"\"}\n              ${error ? variantStyles[variant].error : \"\"}\n              ${disabled ? \"opacity-50 cursor-not-allowed bg-muted\" : \"\"}\n              ${inputClassName}\n            `}\n          />,\n        );\n      }\n\n      return inputs;\n    };\n\n    return (\n      <div ref={ref} className={`flex flex-col gap-2 ${className}`}>\n        <div\n          className=\"flex items-center gap-2\"\n          role=\"group\"\n          aria-label={ariaLabel}\n        >\n          {renderInputs()}\n        </div>\n        {error && errorMessage && (\n          <span className=\"text-sm text-destructive\">{errorMessage}</span>\n        )}\n      </div>\n    );\n  },\n);\n\nOTPInput.displayName = \"OTPInput\";\n\nexport default OTPInput;\nexport { OTPInput };\n"],"mappings":"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"}

package/dist/chunks/overlay-DWNTyQzK.cjs

@@ -0,0 +1,60 @@
+require("./chunk-B_GkZjkl.cjs");
+let react = require("react");
+//#region src/components/shared/overlay.ts
+var focusableSelectors = [
+	"a[href]",
+	"button:not([disabled])",
+	"textarea:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+];
+var useBodyScrollLock = (active) => {
+	(0, react.useEffect)(() => {
+		if (!active || typeof window === "undefined") return;
+		const { overflow } = document.body.style;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = overflow;
+		};
+	}, [active]);
+};
+var useFocusTrap = (containerRef, active) => {
+	(0, react.useEffect)(() => {
+		if (!active || typeof window === "undefined") return;
+		const container = containerRef.current;
+		if (!container) return;
+		const getFocusable = () => Array.from(container.querySelectorAll(focusableSelectors.join(","))).filter((el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden"));
+		const focusable = getFocusable();
+		const first = focusable[0];
+		const last = focusable[focusable.length - 1];
+		first?.focus();
+		const handleKeyDown = (event) => {
+			if (event.key !== "Tab" || focusable.length === 0) return;
+			if (event.shiftKey) {
+				if (document.activeElement === first) {
+					event.preventDefault();
+					(last || first)?.focus();
+				}
+			} else if (document.activeElement === last) {
+				event.preventDefault();
+				(first || last)?.focus();
+			}
+		};
+		container.addEventListener("keydown", handleKeyDown);
+		return () => container.removeEventListener("keydown", handleKeyDown);
+	}, [containerRef, active]);
+};
+var useOverlayEffects = (containerRef, active) => {
+	useBodyScrollLock(active);
+	useFocusTrap(containerRef, active);
+};
+//#endregion
+Object.defineProperty(exports, "useOverlayEffects", {
+	enumerable: true,
+	get: function() {
+		return useOverlayEffects;
+	}
+});
+
+//# sourceMappingURL=overlay-DWNTyQzK.cjs.map

package/dist/chunks/overlay-DWNTyQzK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-DWNTyQzK.cjs","names":[],"sources":["../../src/components/shared/overlay.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\n\nconst focusableSelectors = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  '[tabindex]:not([tabindex=\"-1\"])',\n];\n\nconst scheduleMicrotask = (callback: () => void) => {\n  if (typeof queueMicrotask === \"function\") {\n    queueMicrotask(callback);\n    return;\n  }\n  Promise.resolve()\n    .then(callback)\n    .catch(() => {\n      callback();\n    });\n};\n\nexport const useBodyScrollLock = (active: boolean) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const { overflow } = document.body.style;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = overflow;\n    };\n  }, [active]);\n};\n\nexport const useFocusTrap = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    const getFocusable = () =>\n      Array.from(\n        container.querySelectorAll<HTMLElement>(focusableSelectors.join(\",\")),\n      ).filter(\n        (el) => !el.hasAttribute(\"disabled\") && !el.getAttribute(\"aria-hidden\"),\n      );\n\n    const focusable = getFocusable();\n    const first = focusable[0];\n    const last = focusable[focusable.length - 1];\n    first?.focus();\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\" || focusable.length === 0) return;\n      if (event.shiftKey) {\n        if (document.activeElement === first) {\n          event.preventDefault();\n          (last || first)?.focus();\n        }\n      } else if (document.activeElement === last) {\n        event.preventDefault();\n        (first || last)?.focus();\n      }\n    };\n\n    container.addEventListener(\"keydown\", handleKeyDown);\n    return () => container.removeEventListener(\"keydown\", handleKeyDown);\n  }, [containerRef, active]);\n};\n\nexport const useOverlayEffects = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useBodyScrollLock(active);\n  useFocusTrap(containerRef, active);\n};\n\nexport const useOverlayTransition = (open: boolean, duration = 200) => {\n  const [closing, setClosing] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      return undefined;\n    }\n\n    scheduleMicrotask(() => setClosing(true));\n    const timer = setTimeout(() => setClosing(false), duration);\n\n    return () => {\n      clearTimeout(timer);\n      scheduleMicrotask(() => setClosing(false));\n    };\n  }, [open, duration]);\n\n  const shouldRender = open || closing;\n  const transitionState: \"open\" | \"closing\" | \"closed\" = open\n    ? \"open\"\n    : closing\n      ? \"closing\"\n      : \"closed\";\n\n  return { shouldRender, transitionState };\n};\n"],"mappings":";;;AAGA,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;CACA;CACD;AAcD,IAAa,qBAAqB,WAAoB;AACpD,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,UAAU,OAAO,WAAW,YAAa;EAC9C,MAAM,EAAE,aAAa,SAAS,KAAK;AACnC,WAAS,KAAK,MAAM,WAAW;AAC/B,eAAa;AACX,YAAS,KAAK,MAAM,WAAW;;IAEhC,CAAC,OAAO,CAAC;;AAGd,IAAa,gBACX,cACA,WACG;AACH,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,UAAU,OAAO,WAAW,YAAa;EAC9C,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAEhB,MAAM,qBACJ,MAAM,KACJ,UAAU,iBAA8B,mBAAmB,KAAK,IAAI,CAAC,CACtE,CAAC,QACC,OAAO,CAAC,GAAG,aAAa,WAAW,IAAI,CAAC,GAAG,aAAa,cAAc,CACxE;EAEH,MAAM,YAAY,cAAc;EAChC,MAAM,QAAQ,UAAU;EACxB,MAAM,OAAO,UAAU,UAAU,SAAS;AAC1C,SAAO,OAAO;EAEd,MAAM,iBAAiB,UAAyB;AAC9C,OAAI,MAAM,QAAQ,SAAS,UAAU,WAAW,EAAG;AACnD,OAAI,MAAM;QACJ,SAAS,kBAAkB,OAAO;AACpC,WAAM,gBAAgB;AACtB,MAAC,QAAQ,QAAQ,OAAO;;cAEjB,SAAS,kBAAkB,MAAM;AAC1C,UAAM,gBAAgB;AACtB,KAAC,SAAS,OAAO,OAAO;;;AAI5B,YAAU,iBAAiB,WAAW,cAAc;AACpD,eAAa,UAAU,oBAAoB,WAAW,cAAc;IACnE,CAAC,cAAc,OAAO,CAAC;;AAG5B,IAAa,qBACX,cACA,WACG;AACH,mBAAkB,OAAO;AACzB,cAAa,cAAc,OAAO"}

package/dist/chunks/overlay-TycCIFOu.mjs

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+//#region src/components/shared/overlay.ts
+var focusableSelectors = [
+	"a[href]",
+	"button:not([disabled])",
+	"textarea:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+];
+var useBodyScrollLock = (active) => {
+	useEffect(() => {
+		if (!active || typeof window === "undefined") return;
+		const { overflow } = document.body.style;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = overflow;
+		};
+	}, [active]);
+};
+var useFocusTrap = (containerRef, active) => {
+	useEffect(() => {
+		if (!active || typeof window === "undefined") return;
+		const container = containerRef.current;
+		if (!container) return;
+		const getFocusable = () => Array.from(container.querySelectorAll(focusableSelectors.join(","))).filter((el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden"));
+		const focusable = getFocusable();
+		const first = focusable[0];
+		const last = focusable[focusable.length - 1];
+		first?.focus();
+		const handleKeyDown = (event) => {
+			if (event.key !== "Tab" || focusable.length === 0) return;
+			if (event.shiftKey) {
+				if (document.activeElement === first) {
+					event.preventDefault();
+					(last || first)?.focus();
+				}
+			} else if (document.activeElement === last) {
+				event.preventDefault();
+				(first || last)?.focus();
+			}
+		};
+		container.addEventListener("keydown", handleKeyDown);
+		return () => container.removeEventListener("keydown", handleKeyDown);
+	}, [containerRef, active]);
+};
+var useOverlayEffects = (containerRef, active) => {
+	useBodyScrollLock(active);
+	useFocusTrap(containerRef, active);
+};
+//#endregion
+export { useOverlayEffects as t };
+
+//# sourceMappingURL=overlay-TycCIFOu.mjs.map

package/dist/chunks/overlay-TycCIFOu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-TycCIFOu.mjs","names":[],"sources":["../../src/components/shared/overlay.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\n\nconst focusableSelectors = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  '[tabindex]:not([tabindex=\"-1\"])',\n];\n\nconst scheduleMicrotask = (callback: () => void) => {\n  if (typeof queueMicrotask === \"function\") {\n    queueMicrotask(callback);\n    return;\n  }\n  Promise.resolve()\n    .then(callback)\n    .catch(() => {\n      callback();\n    });\n};\n\nexport const useBodyScrollLock = (active: boolean) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const { overflow } = document.body.style;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = overflow;\n    };\n  }, [active]);\n};\n\nexport const useFocusTrap = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useEffect(() => {\n    if (!active || typeof window === \"undefined\") return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    const getFocusable = () =>\n      Array.from(\n        container.querySelectorAll<HTMLElement>(focusableSelectors.join(\",\")),\n      ).filter(\n        (el) => !el.hasAttribute(\"disabled\") && !el.getAttribute(\"aria-hidden\"),\n      );\n\n    const focusable = getFocusable();\n    const first = focusable[0];\n    const last = focusable[focusable.length - 1];\n    first?.focus();\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\" || focusable.length === 0) return;\n      if (event.shiftKey) {\n        if (document.activeElement === first) {\n          event.preventDefault();\n          (last || first)?.focus();\n        }\n      } else if (document.activeElement === last) {\n        event.preventDefault();\n        (first || last)?.focus();\n      }\n    };\n\n    container.addEventListener(\"keydown\", handleKeyDown);\n    return () => container.removeEventListener(\"keydown\", handleKeyDown);\n  }, [containerRef, active]);\n};\n\nexport const useOverlayEffects = (\n  containerRef: RefObject<HTMLElement | null>,\n  active: boolean,\n) => {\n  useBodyScrollLock(active);\n  useFocusTrap(containerRef, active);\n};\n\nexport const useOverlayTransition = (open: boolean, duration = 200) => {\n  const [closing, setClosing] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      return undefined;\n    }\n\n    scheduleMicrotask(() => setClosing(true));\n    const timer = setTimeout(() => setClosing(false), duration);\n\n    return () => {\n      clearTimeout(timer);\n      scheduleMicrotask(() => setClosing(false));\n    };\n  }, [open, duration]);\n\n  const shouldRender = open || closing;\n  const transitionState: \"open\" | \"closing\" | \"closed\" = open\n    ? \"open\"\n    : closing\n      ? \"closing\"\n      : \"closed\";\n\n  return { shouldRender, transitionState };\n};\n"],"mappings":";;AAGA,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;CACA;CACD;AAcD,IAAa,qBAAqB,WAAoB;AACpD,iBAAgB;AACd,MAAI,CAAC,UAAU,OAAO,WAAW,YAAa;EAC9C,MAAM,EAAE,aAAa,SAAS,KAAK;AACnC,WAAS,KAAK,MAAM,WAAW;AAC/B,eAAa;AACX,YAAS,KAAK,MAAM,WAAW;;IAEhC,CAAC,OAAO,CAAC;;AAGd,IAAa,gBACX,cACA,WACG;AACH,iBAAgB;AACd,MAAI,CAAC,UAAU,OAAO,WAAW,YAAa;EAC9C,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAEhB,MAAM,qBACJ,MAAM,KACJ,UAAU,iBAA8B,mBAAmB,KAAK,IAAI,CAAC,CACtE,CAAC,QACC,OAAO,CAAC,GAAG,aAAa,WAAW,IAAI,CAAC,GAAG,aAAa,cAAc,CACxE;EAEH,MAAM,YAAY,cAAc;EAChC,MAAM,QAAQ,UAAU;EACxB,MAAM,OAAO,UAAU,UAAU,SAAS;AAC1C,SAAO,OAAO;EAEd,MAAM,iBAAiB,UAAyB;AAC9C,OAAI,MAAM,QAAQ,SAAS,UAAU,WAAW,EAAG;AACnD,OAAI,MAAM;QACJ,SAAS,kBAAkB,OAAO;AACpC,WAAM,gBAAgB;AACtB,MAAC,QAAQ,QAAQ,OAAO;;cAEjB,SAAS,kBAAkB,MAAM;AAC1C,UAAM,gBAAgB;AACtB,KAAC,SAAS,OAAO,OAAO;;;AAI5B,YAAU,iBAAiB,WAAW,cAAc;AACpD,eAAa,UAAU,oBAAoB,WAAW,cAAc;IACnE,CAAC,cAAc,OAAO,CAAC;;AAG5B,IAAa,qBACX,cACA,WACG;AACH,mBAAkB,OAAO;AACzB,cAAa,cAAc,OAAO"}

package/dist/chunks/password-strength-meter-CbNSBuh_.mjs

@@ -0,0 +1,99 @@
+import { J as CheckIcon, q as CloseIcon } from "./icons-DuumN7z-.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/password-strength-meter/PasswordCriteria.tsx
+var PasswordCriteria = ({ password }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "mt-2 space-y-1",
+		children: [
+			{
+				label: "At least 6 characters",
+				met: password.length >= 6
+			},
+			{
+				label: "Contains uppercase letter",
+				met: /[A-Z]/.test(password)
+			},
+			{
+				label: "Contains lowercase letter",
+				met: /[a-z]/.test(password)
+			},
+			{
+				label: "Contains a number",
+				met: /\d/.test(password)
+			},
+			{
+				label: "Contains special character",
+				met: /[^A-Za-z0-9]/.test(password)
+			}
+		].map((item) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center text-xs",
+			children: [item.met ? /* @__PURE__ */ jsx(CheckIcon, {
+				className: "mr-2 size-4 text-success",
+				title: "CheckIcon"
+			}) : /* @__PURE__ */ jsx(CloseIcon, {
+				className: "mr-2 size-4 text-neutral-400 dark:text-neutral-500",
+				title: "CloseIcon"
+			}), /* @__PURE__ */ jsx("span", {
+				className: item.met ? "text-success" : "text-neutral-500 dark:text-neutral-400",
+				children: item.label
+			})]
+		}, item.label))
+	});
+};
+//#endregion
+//#region src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx
+function PasswordStrengthMeter({ password }) {
+	const getStrength = (pass) => {
+		const criteria = {
+			minLength: pass.length >= 6,
+			hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),
+			hasNumber: /\d/.test(pass),
+			hasSpecialChar: /[^a-zA-Z\d]/.test(pass)
+		};
+		return Object.values(criteria).filter(Boolean).length;
+	};
+	const strength = useMemo(() => getStrength(password), [password]);
+	const getColor = (strength) => {
+		return [
+			"bg-danger",
+			"bg-danger",
+			"bg-warning",
+			"bg-warning",
+			"bg-success"
+		][strength] || "bg-neutral-600";
+	};
+	const getStrengthText = (strength) => {
+		return [
+			"Very Weak",
+			"Weak",
+			"Fair",
+			"Good",
+			"Strong"
+		][strength] || "Very Weak";
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-1 flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-neutral-500 dark:text-neutral-400",
+					children: "Password strength"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-neutral-500 dark:text-neutral-400",
+					children: getStrengthText(strength)
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex space-x-1",
+				children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsx("div", { className: `h-1 w-1/4 rounded-full transition-colors duration-300 ${index < strength ? getColor(strength) : "bg-neutral-300 dark:bg-neutral-600"}` }, index))
+			}),
+			/* @__PURE__ */ jsx(PasswordCriteria, { password })
+		]
+	});
+}
+//#endregion
+export { PasswordStrengthMeter as t };
+
+//# sourceMappingURL=password-strength-meter-CbNSBuh_.mjs.map

package/dist/chunks/password-strength-meter-CbNSBuh_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-strength-meter-CbNSBuh_.mjs","names":[],"sources":["../../src/components/forms/password-strength-meter/PasswordCriteria.tsx","../../src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx"],"sourcesContent":["import { CheckIcon, CloseIcon } from \"../../icons\";\n\ninterface PasswordCriteriaProps {\n  password: string;\n}\n\nexport const PasswordCriteria = ({ password }: PasswordCriteriaProps) => {\n  const criteria = [\n    { label: \"At least 6 characters\", met: password.length >= 6 },\n    { label: \"Contains uppercase letter\", met: /[A-Z]/.test(password) },\n    { label: \"Contains lowercase letter\", met: /[a-z]/.test(password) },\n    { label: \"Contains a number\", met: /\\d/.test(password) },\n    { label: \"Contains special character\", met: /[^A-Za-z0-9]/.test(password) },\n  ];\n\n  return (\n    <div className=\"mt-2 space-y-1\">\n      {criteria.map((item) => (\n        <div key={item.label} className=\"flex items-center text-xs\">\n          {item.met ? (\n            <CheckIcon className=\"mr-2 size-4 text-success\" title=\"CheckIcon\" />\n          ) : (\n            <CloseIcon\n              className=\"mr-2 size-4 text-neutral-400 dark:text-neutral-500\"\n              title=\"CloseIcon\"\n            />\n          )}\n          <span\n            className={\n              item.met\n                ? \"text-success\"\n                : \"text-neutral-500 dark:text-neutral-400\"\n            }\n          >\n            {item.label}\n          </span>\n        </div>\n      ))}\n    </div>\n  );\n};\n","import { useMemo } from \"react\";\n\nimport { PasswordCriteria } from \"./PasswordCriteria\";\n\nexport interface PasswordStrengthMeterProps {\n  password: string;\n}\n\nexport function PasswordStrengthMeter({\n  password,\n}: PasswordStrengthMeterProps) {\n  // Calculate password strength using an object mapping approach\n  const getStrength = (pass: string): number => {\n    const criteria = {\n      minLength: pass.length >= 6,\n      hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),\n      hasNumber: /\\d/.test(pass),\n      hasSpecialChar: /[^a-zA-Z\\d]/.test(pass),\n    };\n\n    // Count the number of criteria that pass\n    return Object.values(criteria).filter(Boolean).length;\n  };\n\n  // Memoize the strength calculation to avoid unnecessary recalculations\n  const strength = useMemo(() => getStrength(password), [password]);\n\n  // Determine strength color based on the calculated strength\n  const getColor = (strength: number): string => {\n    const colors = [\n      \"bg-danger\",\n      \"bg-danger\",\n      \"bg-warning\",\n      \"bg-warning\",\n      \"bg-success\",\n    ];\n    return colors[strength] || \"bg-neutral-600\";\n  };\n\n  // Get a text label corresponding to the password strength\n  const getStrengthText = (strength: number): string => {\n    const strengthLevels = [\"Very Weak\", \"Weak\", \"Fair\", \"Good\", \"Strong\"];\n    return strengthLevels[strength] || \"Very Weak\";\n  };\n\n  return (\n    <div className=\"mt-2\">\n      {/* Strength Label */}\n      <div className=\"mb-1 flex items-center justify-between\">\n        <span className=\"text-xs text-neutral-500 dark:text-neutral-400\">\n          Password strength\n        </span>\n        <span className=\"text-xs text-neutral-500 dark:text-neutral-400\">\n          {getStrengthText(strength)}\n        </span>\n      </div>\n\n      {/* Strength Meter */}\n      <div className=\"flex space-x-1\">\n        {Array.from({ length: 4 }, (_, index) => (\n          <div\n            key={index}\n            className={`h-1 w-1/4 rounded-full transition-colors duration-300 ${\n              index < strength\n                ? getColor(strength)\n                : \"bg-neutral-300 dark:bg-neutral-600\"\n            }`}\n          />\n        ))}\n      </div>\n\n      <PasswordCriteria password={password} />\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,IAAa,oBAAoB,EAAE,eAAsC;AASvE,QACE,oBAAC,OAAD;EAAK,WAAU;YATA;GACf;IAAE,OAAO;IAAyB,KAAK,SAAS,UAAU;IAAG;GAC7D;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAAqB,KAAK,KAAK,KAAK,SAAS;IAAE;GACxD;IAAE,OAAO;IAA8B,KAAK,eAAe,KAAK,SAAS;IAAE;GAC5E,CAIa,KAAK,SACb,qBAAC,OAAD;GAAsB,WAAU;aAAhC,CACG,KAAK,MACJ,oBAAC,WAAD;IAAW,WAAU;IAA2B,OAAM;IAAc,CAAA,GAEpE,oBAAC,WAAD;IACE,WAAU;IACV,OAAM;IACN,CAAA,EAEJ,oBAAC,QAAD;IACE,WACE,KAAK,MACD,iBACA;cAGL,KAAK;IACD,CAAA,CACH;KAlBI,KAAK,MAkBT,CACN;EACE,CAAA;;;;AC9BV,SAAgB,sBAAsB,EACpC,YAC6B;CAE7B,MAAM,eAAe,SAAyB;EAC5C,MAAM,WAAW;GACf,WAAW,KAAK,UAAU;GAC1B,cAAc,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,KAAK;GACtD,WAAW,KAAK,KAAK,KAAK;GAC1B,gBAAgB,cAAc,KAAK,KAAK;GACzC;AAGD,SAAO,OAAO,OAAO,SAAS,CAAC,OAAO,QAAQ,CAAC;;CAIjD,MAAM,WAAW,cAAc,YAAY,SAAS,EAAE,CAAC,SAAS,CAAC;CAGjE,MAAM,YAAY,aAA6B;AAQ7C,SAPe;GACb;GACA;GACA;GACA;GACA;GACD,CACa,aAAa;;CAI7B,MAAM,mBAAmB,aAA6B;AAEpD,SADuB;GAAC;GAAa;GAAQ;GAAQ;GAAQ;GAAS,CAChD,aAAa;;AAGrC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eAAiD;KAE1D,CAAA,EACP,oBAAC,QAAD;KAAM,WAAU;eACb,gBAAgB,SAAS;KACrB,CAAA,CACH;;GAGN,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,UAC7B,oBAAC,OAAD,EAEE,WAAW,yDACT,QAAQ,WACJ,SAAS,SAAS,GAClB,wCAEN,EANK,MAML,CACF;IACE,CAAA;GAEN,oBAAC,kBAAD,EAA4B,UAAY,CAAA;GACpC"}

package/dist/chunks/password-strength-meter-DxMV6GAs.cjs

@@ -0,0 +1,105 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_icons = require("./icons-BxIzP2jd.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/forms/password-strength-meter/PasswordCriteria.tsx
+var PasswordCriteria = ({ password }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "mt-2 space-y-1",
+		children: [
+			{
+				label: "At least 6 characters",
+				met: password.length >= 6
+			},
+			{
+				label: "Contains uppercase letter",
+				met: /[A-Z]/.test(password)
+			},
+			{
+				label: "Contains lowercase letter",
+				met: /[a-z]/.test(password)
+			},
+			{
+				label: "Contains a number",
+				met: /\d/.test(password)
+			},
+			{
+				label: "Contains special character",
+				met: /[^A-Za-z0-9]/.test(password)
+			}
+		].map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center text-xs",
+			children: [item.met ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckIcon, {
+				className: "mr-2 size-4 text-success",
+				title: "CheckIcon"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
+				className: "mr-2 size-4 text-neutral-400 dark:text-neutral-500",
+				title: "CloseIcon"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: item.met ? "text-success" : "text-neutral-500 dark:text-neutral-400",
+				children: item.label
+			})]
+		}, item.label))
+	});
+};
+//#endregion
+//#region src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx
+function PasswordStrengthMeter({ password }) {
+	const getStrength = (pass) => {
+		const criteria = {
+			minLength: pass.length >= 6,
+			hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),
+			hasNumber: /\d/.test(pass),
+			hasSpecialChar: /[^a-zA-Z\d]/.test(pass)
+		};
+		return Object.values(criteria).filter(Boolean).length;
+	};
+	const strength = (0, react.useMemo)(() => getStrength(password), [password]);
+	const getColor = (strength) => {
+		return [
+			"bg-danger",
+			"bg-danger",
+			"bg-warning",
+			"bg-warning",
+			"bg-success"
+		][strength] || "bg-neutral-600";
+	};
+	const getStrengthText = (strength) => {
+		return [
+			"Very Weak",
+			"Weak",
+			"Fair",
+			"Good",
+			"Strong"
+		][strength] || "Very Weak";
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "mt-2",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-1 flex items-center justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-neutral-500 dark:text-neutral-400",
+					children: "Password strength"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-neutral-500 dark:text-neutral-400",
+					children: getStrengthText(strength)
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex space-x-1",
+				children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `h-1 w-1/4 rounded-full transition-colors duration-300 ${index < strength ? getColor(strength) : "bg-neutral-300 dark:bg-neutral-600"}` }, index))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PasswordCriteria, { password })
+		]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "PasswordStrengthMeter", {
+	enumerable: true,
+	get: function() {
+		return PasswordStrengthMeter;
+	}
+});
+
+//# sourceMappingURL=password-strength-meter-DxMV6GAs.cjs.map

package/dist/chunks/password-strength-meter-DxMV6GAs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-strength-meter-DxMV6GAs.cjs","names":[],"sources":["../../src/components/forms/password-strength-meter/PasswordCriteria.tsx","../../src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx"],"sourcesContent":["import { CheckIcon, CloseIcon } from \"../../icons\";\n\ninterface PasswordCriteriaProps {\n  password: string;\n}\n\nexport const PasswordCriteria = ({ password }: PasswordCriteriaProps) => {\n  const criteria = [\n    { label: \"At least 6 characters\", met: password.length >= 6 },\n    { label: \"Contains uppercase letter\", met: /[A-Z]/.test(password) },\n    { label: \"Contains lowercase letter\", met: /[a-z]/.test(password) },\n    { label: \"Contains a number\", met: /\\d/.test(password) },\n    { label: \"Contains special character\", met: /[^A-Za-z0-9]/.test(password) },\n  ];\n\n  return (\n    <div className=\"mt-2 space-y-1\">\n      {criteria.map((item) => (\n        <div key={item.label} className=\"flex items-center text-xs\">\n          {item.met ? (\n            <CheckIcon className=\"mr-2 size-4 text-success\" title=\"CheckIcon\" />\n          ) : (\n            <CloseIcon\n              className=\"mr-2 size-4 text-neutral-400 dark:text-neutral-500\"\n              title=\"CloseIcon\"\n            />\n          )}\n          <span\n            className={\n              item.met\n                ? \"text-success\"\n                : \"text-neutral-500 dark:text-neutral-400\"\n            }\n          >\n            {item.label}\n          </span>\n        </div>\n      ))}\n    </div>\n  );\n};\n","import { useMemo } from \"react\";\n\nimport { PasswordCriteria } from \"./PasswordCriteria\";\n\nexport interface PasswordStrengthMeterProps {\n  password: string;\n}\n\nexport function PasswordStrengthMeter({\n  password,\n}: PasswordStrengthMeterProps) {\n  // Calculate password strength using an object mapping approach\n  const getStrength = (pass: string): number => {\n    const criteria = {\n      minLength: pass.length >= 6,\n      hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),\n      hasNumber: /\\d/.test(pass),\n      hasSpecialChar: /[^a-zA-Z\\d]/.test(pass),\n    };\n\n    // Count the number of criteria that pass\n    return Object.values(criteria).filter(Boolean).length;\n  };\n\n  // Memoize the strength calculation to avoid unnecessary recalculations\n  const strength = useMemo(() => getStrength(password), [password]);\n\n  // Determine strength color based on the calculated strength\n  const getColor = (strength: number): string => {\n    const colors = [\n      \"bg-danger\",\n      \"bg-danger\",\n      \"bg-warning\",\n      \"bg-warning\",\n      \"bg-success\",\n    ];\n    return colors[strength] || \"bg-neutral-600\";\n  };\n\n  // Get a text label corresponding to the password strength\n  const getStrengthText = (strength: number): string => {\n    const strengthLevels = [\"Very Weak\", \"Weak\", \"Fair\", \"Good\", \"Strong\"];\n    return strengthLevels[strength] || \"Very Weak\";\n  };\n\n  return (\n    <div className=\"mt-2\">\n      {/* Strength Label */}\n      <div className=\"mb-1 flex items-center justify-between\">\n        <span className=\"text-xs text-neutral-500 dark:text-neutral-400\">\n          Password strength\n        </span>\n        <span className=\"text-xs text-neutral-500 dark:text-neutral-400\">\n          {getStrengthText(strength)}\n        </span>\n      </div>\n\n      {/* Strength Meter */}\n      <div className=\"flex space-x-1\">\n        {Array.from({ length: 4 }, (_, index) => (\n          <div\n            key={index}\n            className={`h-1 w-1/4 rounded-full transition-colors duration-300 ${\n              index < strength\n                ? getColor(strength)\n                : \"bg-neutral-300 dark:bg-neutral-600\"\n            }`}\n          />\n        ))}\n      </div>\n\n      <PasswordCriteria password={password} />\n    </div>\n  );\n}\n"],"mappings":";;;;;AAMA,IAAa,oBAAoB,EAAE,eAAsC;AASvE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YATA;GACf;IAAE,OAAO;IAAyB,KAAK,SAAS,UAAU;IAAG;GAC7D;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAAqB,KAAK,KAAK,KAAK,SAAS;IAAE;GACxD;IAAE,OAAO;IAA8B,KAAK,eAAe,KAAK,SAAS;IAAE;GAC5E,CAIa,KAAK,SACb,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAsB,WAAU;aAAhC,CACG,KAAK,MACJ,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;IAAW,WAAU;IAA2B,OAAM;IAAc,CAAA,GAEpE,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;IACE,WAAU;IACV,OAAM;IACN,CAAA,EAEJ,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WACE,KAAK,MACD,iBACA;cAGL,KAAK;IACD,CAAA,CACH;KAlBI,KAAK,MAkBT,CACN;EACE,CAAA;;;;AC9BV,SAAgB,sBAAsB,EACpC,YAC6B;CAE7B,MAAM,eAAe,SAAyB;EAC5C,MAAM,WAAW;GACf,WAAW,KAAK,UAAU;GAC1B,cAAc,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,KAAK;GACtD,WAAW,KAAK,KAAK,KAAK;GAC1B,gBAAgB,cAAc,KAAK,KAAK;GACzC;AAGD,SAAO,OAAO,OAAO,SAAS,CAAC,OAAO,QAAQ,CAAC;;CAIjD,MAAM,YAAA,GAAA,MAAA,eAAyB,YAAY,SAAS,EAAE,CAAC,SAAS,CAAC;CAGjE,MAAM,YAAY,aAA6B;AAQ7C,SAPe;GACb;GACA;GACA;GACA;GACA;GACD,CACa,aAAa;;CAI7B,MAAM,mBAAmB,aAA6B;AAEpD,SADuB;GAAC;GAAa;GAAQ;GAAQ;GAAQ;GAAS,CAChD,aAAa;;AAGrC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GAEE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAiD;KAE1D,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eACb,gBAAgB,SAAS;KACrB,CAAA,CACH;;GAGN,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,UAC7B,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAEE,WAAW,yDACT,QAAQ,WACJ,SAAS,SAAS,GAClB,wCAEN,EANK,MAML,CACF;IACE,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAA4B,UAAY,CAAA;GACpC"}