@sikka/hawa 0.26.29 → 0.26.31

package/dist/passwordInput/index.js

@@ -0,0 +1,577 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// elements/passwordInput/index.ts
+var passwordInput_exports = {};
+__export(passwordInput_exports, {
+  PasswordInput: () => PasswordInput,
+  PasswordStrengthIndicator: () => PasswordStrengthIndicator
+});
+module.exports = __toCommonJS(passwordInput_exports);
+
+// elements/passwordInput/PasswordInput.tsx
+var import_react7 = __toESM(require("react"));
+
+// icons/Emojis.tsx
+var import_react = __toESM(require("react"));
+
+// icons/InputIcons.tsx
+var import_react2 = __toESM(require("react"));
+
+// util/index.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// icons/InputIcons.tsx
+var EyeIcon = (props) => /* @__PURE__ */ import_react2.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react2.default.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  /* @__PURE__ */ import_react2.default.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+  /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "12", cy: "12", r: "3" })
+));
+var HiddenEyeIcon = (props) => /* @__PURE__ */ import_react2.default.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ import_react2.default.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  /* @__PURE__ */ import_react2.default.createElement("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+  /* @__PURE__ */ import_react2.default.createElement("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+  /* @__PURE__ */ import_react2.default.createElement("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+  /* @__PURE__ */ import_react2.default.createElement("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+));
+
+// icons/CommonIcons.tsx
+var import_react3 = __toESM(require("react"));
+var CheckMark = ({ size = "default", className }) => {
+  let sizeStyles = {
+    default: "hawa-h-5 hawa-w-5",
+    sm: "hawa-h-3 hawa-w-3"
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "svg",
+    {
+      className: cn(sizeStyles[size], className),
+      "aria-hidden": "true",
+      fill: "currentColor",
+      viewBox: "0 0 20 20"
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+        clipRule: "evenodd"
+      }
+    )
+  );
+};
+var UncheckMark = ({ size = "default", className }) => {
+  let sizeStyles = {
+    default: "hawa-h-5 hawa-w-5",
+    sm: "hawa-h-3 hawa-w-3"
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "svg",
+    {
+      className: cn(sizeStyles[size], className),
+      "aria-hidden": "true",
+      fill: "currentColor",
+      viewBox: "0 0 20 20"
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+        clipRule: "evenodd"
+      }
+    )
+  );
+};
+
+// elements/input/Input.tsx
+var import_react6 = __toESM(require("react"));
+
+// elements/label/Label.tsx
+var React5 = __toESM(require("react"));
+
+// elements/tooltip/Tooltip.tsx
+var import_react4 = __toESM(require("react"));
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
+var TooltipContent = import_react4.default.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ import_react4.default.createElement(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var TooltipArrow = import_react4.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ import_react4.default.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
+var Tooltip = ({
+  side,
+  open,
+  content,
+  children,
+  defaultOpen,
+  onOpenChange,
+  triggerProps,
+  contentProps,
+  providerProps,
+  delayDuration = 300,
+  ...props
+}) => {
+  return /* @__PURE__ */ import_react4.default.createElement(
+    TooltipPrimitive.TooltipProvider,
+    {
+      delayDuration,
+      ...providerProps
+    },
+    /* @__PURE__ */ import_react4.default.createElement(
+      TooltipPrimitive.Root,
+      {
+        open,
+        defaultOpen,
+        onOpenChange,
+        ...props
+      },
+      /* @__PURE__ */ import_react4.default.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
+      /* @__PURE__ */ import_react4.default.createElement(TooltipContent, { side, align: "center", ...contentProps }, content)
+    )
+  );
+};
+
+// elements/label/Label.tsx
+var Label = React5.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React5.createElement(
+  "label",
+  {
+    ref,
+    className: cn(
+      "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
+      className
+    ),
+    ...props
+  },
+  children,
+  required && /* @__PURE__ */ React5.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
+), hint && /* @__PURE__ */ React5.createElement(
+  Tooltip,
+  {
+    content: hint,
+    side: hintSide,
+    triggerProps: {
+      tabIndex: -1,
+      onClick: (event) => event.preventDefault()
+    }
+  },
+  /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ React5.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ React5.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+    /* @__PURE__ */ React5.createElement("path", { d: "M12 17h.01" })
+  ))
+)));
+Label.displayName = "Label";
+
+// elements/skeleton/Skeleton.tsx
+var import_react5 = __toESM(require("react"));
+function Skeleton({
+  className,
+  content,
+  animation = "pulse",
+  ...props
+}) {
+  const animationStyles = {
+    none: "hawa-rounded hawa-bg-muted",
+    pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
+    shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted  hawa-p-4 hawa-relative  before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden  before:hawa-border-t before:hawa-border-rose-100/10"
+  };
+  return /* @__PURE__ */ import_react5.default.createElement(
+    "div",
+    {
+      className: cn(
+        animationStyles[animation],
+        content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
+        className
+      ),
+      ...props
+    },
+    content && content
+  );
+}
+
+// elements/input/Input.tsx
+var Input = (0, import_react6.forwardRef)(
+  ({
+    margin = "none",
+    width = "full",
+    preview = false,
+    forceHideHelperText = false,
+    labelProps,
+    placeholder,
+    showCount,
+    inputProps,
+    countPosition = "bottom",
+    ...props
+  }, ref) => {
+    let marginStyles = {
+      none: "hawa-mb-0",
+      normal: "hawa-mb-3",
+      large: "hawa-mb-5"
+    };
+    let widthStyles = {
+      small: "hawa-w-full hawa-max-w-2xs",
+      normal: "hawa-w-1/2",
+      full: "hawa-w-full",
+      auto: ""
+    };
+    let defaultStyle = "hawa-flex hawa-max-h-fit hawa-h-fit hawa-relative hawa-flex-col hawa-justify-center hawa-gap-0";
+    let defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-3 hawa-text-sm ";
+    return /* @__PURE__ */ import_react6.default.createElement(
+      "div",
+      {
+        className: cn(
+          defaultStyle,
+          marginStyles[margin],
+          widthStyles[width],
+          props.containerClassName,
+          "hawa-w-full hawa-gap-2"
+        )
+      },
+      props.label && /* @__PURE__ */ import_react6.default.createElement(Label, { ...labelProps }, props.label),
+      props.isLoading ? /* @__PURE__ */ import_react6.default.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ import_react6.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, !props.hideSeparator && /* @__PURE__ */ import_react6.default.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-absolute hawa-top-[22px] hawa-h-[0.8px] hawa-w-full hawa-bg-gray-200 hawa-transition-all dark:hawa-bg-gray-800",
+            preview ? "hawa-opacity-100" : "hawa-opacity-0"
+          )
+        }
+      ), /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ import_react6.default.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ import_react6.default.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2",
+            props.endIconProps?.className
+          )
+        },
+        props.endIcon
+      ), /* @__PURE__ */ import_react6.default.createElement(
+        "input",
+        {
+          required: true,
+          dir: props.dir,
+          type: props.type,
+          value: props.value,
+          onChange: props.onChange,
+          autoComplete: props.autoComplete,
+          defaultValue: props.defaultValue,
+          placeholder,
+          disabled: props.disabled || preview,
+          style: { height: 40 },
+          ...inputProps,
+          className: cn(
+            defaultInputStyle,
+            " focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white",
+            {
+              "hawa-pe-9": props.endIcon,
+              "hawa-ps-9": props.startIcon,
+              "hawa-pe-[60px]": countPosition === "center"
+            },
+            preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0",
+            inputProps?.className
+          )
+        }
+      )), !forceHideHelperText && /* @__PURE__ */ import_react6.default.createElement(
+        "p",
+        {
+          className: cn(
+            "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
+            props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
+          )
+        },
+        props.helperText
+      ), !props.disabled && forceHideHelperText && /* @__PURE__ */ import_react6.default.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-absolute hawa-end-0 hawa-top-[47px] hawa-z-20 hawa-translate-y-1/2 hawa-rounded hawa-bg-background hawa-text-start  hawa-text-xs hawa-text-helper-color hawa-drop-shadow-md hawa-transition-all",
+            props.helperText ? "hawa-border hawa-p-1" : "hawa-border-none hawa-p-0"
+          )
+        },
+        props.helperText
+      ), showCount && /* @__PURE__ */ import_react6.default.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-absolute hawa-translate-y-1/2 hawa-text-start hawa-text-xs hawa-transition-all",
+            {
+              "hawa-end-0 hawa-top-[62px]": countPosition === "bottom",
+              "hawa-bottom-[62px] hawa-end-0": countPosition === "top",
+              "hawa-end-2": countPosition === "center"
+            }
+          )
+        },
+        props.value ? String(props.value).length : 0,
+        "/",
+        props.maxLength
+      )))
+    );
+  }
+);
+
+// elements/popover/Popover.tsx
+var React8 = __toESM(require("react"));
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
+var PopoverContent = React8.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React8.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React8.createElement(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+)));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var Popover = ({
+  trigger,
+  children,
+  className,
+  align = "center",
+  side,
+  sideOffset = 4,
+  open,
+  width = "default",
+  disableTrigger,
+  contentProps,
+  triggerProps,
+  ...props
+}) => {
+  let widthStyles = {
+    trigger: "var(--radix-popover-trigger-width)",
+    default: "auto"
+  };
+  return /* @__PURE__ */ React8.createElement(PopoverPrimitive.Root, { open, ...props }, /* @__PURE__ */ React8.createElement(
+    PopoverPrimitive.Trigger,
+    {
+      className: "hawa-w-full",
+      disabled: disableTrigger,
+      ...triggerProps
+    },
+    trigger
+  ), /* @__PURE__ */ React8.createElement(
+    PopoverContent,
+    {
+      side,
+      className,
+      align,
+      sideOffset,
+      style: {
+        width: widthStyles[width]
+      },
+      ...contentProps
+    },
+    children
+  ));
+};
+
+// elements/passwordInput/PasswordInput.tsx
+var PasswordStrengthIndicator = ({ strength }) => {
+  const strengthLevels = [
+    "none",
+    "very-weak",
+    "weak",
+    "medium",
+    "strong",
+    "very-strong"
+  ];
+  const strengthColors = {
+    none: "hawa-bg-red-700",
+    "very-weak": "hawa-bg-red-600",
+    weak: "hawa-bg-red-500",
+    medium: "hawa-bg-yellow-500",
+    strong: "hawa-bg-green-400",
+    "very-strong": "hawa-bg-green-600"
+  };
+  const currentStrengthLevel = strengthLevels[strength];
+  const width = {
+    none: "0%",
+    "very-weak": "20%",
+    weak: "40%",
+    medium: "60%",
+    strong: "80%",
+    "very-strong": "100%"
+  }[currentStrengthLevel];
+  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-mt-0.5 hawa-h-2 hawa-w-full hawa-rounded hawa-bg-gray-200" }, /* @__PURE__ */ import_react7.default.createElement(
+    "div",
+    {
+      className: `${strengthColors[currentStrengthLevel]} hawa-h-full hawa-rounded hawa-transition-all hawa-duration-300`,
+      style: { width }
+    }
+  ));
+};
+var PasswordInput = ({
+  hidePopover,
+  ...props
+}) => {
+  const [inputValue, setInputValue] = (0, import_react7.useState)("");
+  const [isInputFocused, setIsInputFocused] = (0, import_react7.useState)(false);
+  const [currentStr, setCurrentStr] = (0, import_react7.useState)(0);
+  const [passwordVisible, setPasswordVisible] = (0, import_react7.useState)(false);
+  const [lengthCriteriaMet, setLengthCriteriaMet] = (0, import_react7.useState)(false);
+  const [numberCriteriaMet, setNumberCriteriaMet] = (0, import_react7.useState)(false);
+  const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = (0, import_react7.useState)(false);
+  const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = (0, import_react7.useState)(false);
+  const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
+    const calculateStrength = () => {
+      let strengthScore = 0;
+      if (lengthCriteriaMet)
+        strengthScore += 1;
+      if (numberCriteriaMet)
+        strengthScore += 1;
+      if (specialCharCriteriaMet)
+        strengthScore += 1;
+      if (lowercaseCriteriaMet)
+        strengthScore += 1;
+      if (uppercaseCriteriaMet)
+        strengthScore += 1;
+      return strengthScore;
+    };
+    const currentStrengthScore = calculateStrength();
+    setCurrentStr(currentStrengthScore);
+  }, [inputValue]);
+  const handleInputChange = (event) => {
+    const newPassword = event.target.value;
+    if (props.onChange) {
+      props.onChange(event);
+    }
+    setInputValue(newPassword);
+    setLengthCriteriaMet(newPassword.length >= 8);
+    setNumberCriteriaMet(/\d/.test(newPassword));
+    setSpecialCharCriteriaMet(/[!@#$%^&*(),.?":{}|<>]/.test(newPassword));
+    setLowercaseCriteriaMet(/[a-z]/.test(newPassword));
+    setUppercaseCriteriaMet(/[A-Z]/.test(newPassword));
+  };
+  const handleInputFocus = () => {
+    if (!hidePopover) {
+      setIsInputFocused(true);
+    }
+  };
+  const handleInputBlur = () => {
+    setIsInputFocused(false);
+  };
+  const getCriteriaClass = (isMet) => isMet ? "hawa-flex hawa-flex-row hawa-gap-2 hawa-text-sm hawa-items-center hawa-text-green-500" : "hawa-flex hawa-flex-row hawa-gap-2 hawa-text-sm hawa-items-center hawa-text-red-600";
+  return /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement(
+    Popover,
+    {
+      width: "trigger",
+      sideOffset: 20,
+      open: isInputFocused,
+      onOpenChange: setIsInputFocused,
+      triggerProps: { asChild: true },
+      contentProps: { onOpenAutoFocus: (e) => e.preventDefault() },
+      trigger: /* @__PURE__ */ import_react7.default.createElement(
+        "div",
+        {
+          onClick: (e) => {
+            e.preventDefault();
+            if (!hidePopover) {
+              setIsInputFocused(true);
+            }
+          }
+        },
+        /* @__PURE__ */ import_react7.default.createElement(
+          Input,
+          {
+            width: "full",
+            className: "hawa-w-full",
+            label: "test",
+            onChange: handleInputChange,
+            onFocus: handleInputFocus,
+            onBlur: handleInputBlur,
+            type: passwordVisible ? "text" : "password",
+            endIcon: /* @__PURE__ */ import_react7.default.createElement(
+              "div",
+              {
+                className: "hawa-cursor-pointer",
+                onClick: () => setPasswordVisible(!passwordVisible)
+              },
+              passwordVisible ? /* @__PURE__ */ import_react7.default.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ import_react7.default.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
+              " "
+            )
+          }
+        )
+      )
+    },
+    /* @__PURE__ */ import_react7.default.createElement("div", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react7.default.createElement("ul", { className: "hawa-rounded hawa-p-2" }, /* @__PURE__ */ import_react7.default.createElement("li", { className: getCriteriaClass(lengthCriteriaMet) }, lengthCriteriaMet ? /* @__PURE__ */ import_react7.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react7.default.createElement(UncheckMark, { size: "sm" }), "At least 8 characters long"), /* @__PURE__ */ import_react7.default.createElement("li", { className: getCriteriaClass(numberCriteriaMet) }, numberCriteriaMet ? /* @__PURE__ */ import_react7.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react7.default.createElement(UncheckMark, { size: "sm" }), "At least 1 number"), /* @__PURE__ */ import_react7.default.createElement("li", { className: getCriteriaClass(specialCharCriteriaMet) }, specialCharCriteriaMet ? /* @__PURE__ */ import_react7.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react7.default.createElement(UncheckMark, { size: "sm" }), "At least 1 special character"), /* @__PURE__ */ import_react7.default.createElement("li", { className: getCriteriaClass(lowercaseCriteriaMet) }, lowercaseCriteriaMet ? /* @__PURE__ */ import_react7.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react7.default.createElement(UncheckMark, { size: "sm" }), "At least 1 lowercase letter"), /* @__PURE__ */ import_react7.default.createElement("li", { className: getCriteriaClass(uppercaseCriteriaMet) }, uppercaseCriteriaMet ? /* @__PURE__ */ import_react7.default.createElement(CheckMark, { size: "sm" }) : /* @__PURE__ */ import_react7.default.createElement(UncheckMark, { size: "sm" }), "At least 1 uppercase letter")))
+  ), /* @__PURE__ */ import_react7.default.createElement(PasswordStrengthIndicator, { strength: currentStr }));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PasswordInput,
+  PasswordStrengthIndicator
+});
+//# sourceMappingURL=index.js.map