@sikka/hawa 0.37.2-next → 0.38.0-next

package/dist/blocks/auth/index.js

@@ -1341,16 +1341,7 @@ var Input = (0, import_react8.forwardRef)(
             inputProps == null ? void 0 : inputProps.className
           )
         }
-      )), !forceHideHelperText && /* @__PURE__ */ import_react8.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_react8.default.createElement(
+      )), !forceHideHelperText && /* @__PURE__ */ import_react8.default.createElement(HelperText, { helperText: props.helperText }), !props.disabled && forceHideHelperText && /* @__PURE__ */ import_react8.default.createElement(
         "div",
         {
           className: cn(
@@ -3246,16 +3237,7 @@ var Select = ({
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    !props.hideHelperText && /* @__PURE__ */ import_react9.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.hideHelperText && /* @__PURE__ */ import_react9.default.createElement(HelperText, { helperText: props.helperText })
   );
 };
 
@@ -3312,16 +3294,7 @@ var PhoneInput = ({
       ),
       ...inputProps
     }
-  ))), /* @__PURE__ */ import_react10.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
-  ));
+  ))), /* @__PURE__ */ import_react10.default.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // icons/Emojis.tsx
@@ -4470,106 +4443,168 @@ var ResetPasswordForm = ({
 };
 
 // blocks/auth/CodeConfirmation.tsx
-var import_react23 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var import_react_hook_form5 = require("react-hook-form");
 var import_zod5 = require("@hookform/resolvers/zod");
 var z5 = __toESM(require("zod"));
 
 // elements/pinInput/PinInput.tsx
-var import_react22 = __toESM(require("react"));
-var PinInput = ({
-  label,
-  icon,
-  digits,
-  width = "normal",
-  getPins,
-  inputProps,
-  ...props
-}) => {
-  const [pin, setPin] = (0, import_react22.useState)(Array.from(Array(digits)));
-  const handleKeyDown = (e, index) => {
-    let backTo = 0;
-    if (e.key === "Backspace") {
-      e.target.value.length === 0 ? backTo = index - 1 : backTo = index;
-      const previousInput = document.getElementById(`input-${backTo}`);
-      previousInput == null ? void 0 : previousInput.focus();
-    }
-  };
-  (0, import_react22.useEffect)(() => {
-    let unfilled = pin.includes(void 0);
-    if (!unfilled && getPins) {
-      getPins(pin);
-    }
-  });
-  const handleChange = (e, index) => {
-    if (!/^\d*$/.test(e.target.value)) {
-      const newPin = [...pin];
-      newPin[index] = "";
-      setPin(newPin);
-      return;
-    } else {
-      const newPin = [...pin];
-      newPin[index] = e.target.value;
-      setPin(newPin);
-      if (e.target.value.length === 1) {
-        const nextInput = document.getElementById(`input-${index + 1}`);
-        nextInput == null ? void 0 : nextInput.focus();
-      } else if (e.target.value.length === 0) {
-        const previousInput = document.getElementById(`input-${index - 1}`);
-        previousInput == null ? void 0 : previousInput.focus();
-      }
-    }
-  };
-  return /* @__PURE__ */ import_react22.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ import_react22.default.createElement(
-    "div",
-    {
-      className: "hawa-flex hawa-w-full hawa-flex-row hawa-justify-center hawa-gap-2",
-      dir: "ltr"
-    },
-    pin.map((value, index) => /* @__PURE__ */ import_react22.default.createElement(
-      "input",
+var React25 = __toESM(require("react"));
+var import_input_otp = require("input-otp");
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var import_react23 = require("react");
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
+var toKebabCase = (string6) => string6.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && array.indexOf(className) === index;
+}).join(" ");
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+var import_react22 = require("react");
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+var Icon = (0, import_react22.forwardRef)(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => {
+    return (0, import_react22.createElement)(
+      "svg",
       {
-        key: index,
-        type: "text",
-        maxLength: 1,
-        value,
-        inputMode: "numeric",
-        id: `input-${index}`,
-        pattern: "[0-9]*",
-        className: cn(
-          "hawa-h-10 hawa-rounded hawa-border hawa-bg-background hawa-text-center placeholder:hawa-text-muted-foreground",
-          width === "full" ? "hawa-w-full" : "hawa-w-10"
-        ),
-        onChange: (e) => handleChange(e, index),
-        onKeyDown: (e) => handleKeyDown(e, index),
-        onFocus: (e) => e.target.select(),
-        ...inputProps
-      }
-    ))
-  ), /* @__PURE__ */ import_react22.default.createElement(
-    "p",
+        ref,
+        ...defaultAttributes,
+        width: size,
+        height: size,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        className: mergeClasses("lucide", className),
+        ...rest
+      },
+      [
+        ...iconNode.map(([tag, attrs]) => (0, import_react22.createElement)(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
+  }
+);
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = (0, import_react23.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react23.createElement)(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+      ...props
+    })
+  );
+  Component.displayName = `${iconName}`;
+  return Component;
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/dot.js
+var Dot = createLucideIcon("Dot", [
+  ["circle", { cx: "12.1", cy: "12.1", r: "1", key: "18d7e5" }]
+]);
+
+// elements/pinInput/PinInput.tsx
+var PinInputRoot = React25.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React25.createElement(
+  import_input_otp.OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "hawa-flex hawa-items-center hawa-gap-2 has-[:disabled]:hawa-opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:hawa-cursor-not-allowed", className),
+    ...props
+  }
+));
+PinInputRoot.displayName = "PinInputRoot";
+var PinInputGroup = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React25.createElement(
+  "div",
+  {
+    ref,
+    className: cn("hawa-flex hawa-items-center", className),
+    ...props
+  }
+));
+PinInputGroup.displayName = "PinInputGroup";
+var PinInputSlot = React25.forwardRef(({ index, className, ...props }, ref) => {
+  const pinInputContext = React25.useContext(import_input_otp.OTPInputContext);
+  const { char, hasFakeCaret, isActive } = pinInputContext.slots[index];
+  return /* @__PURE__ */ React25.createElement(
+    "div",
     {
+      ref,
       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"
-      )
+        "hawa-border-input hawa-relative hawa-flex hawa-h-10 hawa-w-10 hawa-items-center hawa-justify-center hawa-border-y hawa-border-r hawa-text-sm hawa-transition-all first:hawa-rounded-l-md first:hawa-border-l last:hawa-rounded-r-md",
+        isActive && "hawa-ring-ring hawa-ring-offset-background hawa-z-10 hawa-ring-2",
+        className
+      ),
+      ...props
     },
-    props.helperText
-  ));
+    char,
+    hasFakeCaret && /* @__PURE__ */ React25.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-inset-0 hawa-flex hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React25.createElement("div", { className: "hawa-animate-caret-blink hawa-bg-foreground hawa-h-4 hawa-w-px hawa-duration-1000" }))
+  );
+});
+PinInputSlot.displayName = "PinInputSlot";
+var PinInputSeperator = React25.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React25.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React25.createElement(Dot, null)));
+PinInputSeperator.displayName = "PinInputSeperator";
+var PinInput = ({
+  separatorPosition = 0,
+  ...props
+}) => {
+  const maxLength = props.maxLength || 6;
+  const clampedSeparatorPosition = Math.min(separatorPosition, maxLength);
+  const firstGroupLength = clampedSeparatorPosition > 0 ? clampedSeparatorPosition : 0;
+  const secondGroupLength = maxLength - firstGroupLength;
+  return /* @__PURE__ */ React25.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React25.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React25.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React25.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React25.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React25.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React25.createElement(
+    PinInputSlot,
+    {
+      key: index + firstGroupLength,
+      index: index + firstGroupLength,
+      className: "hawa-w-full"
+    }
+  )))), /* @__PURE__ */ React25.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // blocks/auth/CodeConfirmation.tsx
-var CodeConfirmation = (props) => {
+var CodeConfirmation = ({
+  codeLength = 6,
+  ...props
+}) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const formSchema = z5.object({
-    otp_code: z5.string({ required_error: (_a = props.texts) == null ? void 0 : _a.codeRequiredText }).min(6, { message: (_b = props.texts) == null ? void 0 : _b.codeTooShort })
+    otp_code: z5.string({ required_error: (_a = props.texts) == null ? void 0 : _a.codeRequiredText }).min(codeLength, { message: (_b = props.texts) == null ? void 0 : _b.codeTooShort })
   });
   const { handleSubmit, control, formState, setValue } = (0, import_react_hook_form5.useForm)({
     resolver: (0, import_zod5.zodResolver)(formSchema)
   });
-  const [resendTimer, setResendTimer] = (0, import_react23.useState)(null);
-  const [remainingTime, setRemainingTime] = (0, import_react23.useState)(0);
-  const [showResendTimer, setShowResendTimer] = (0, import_react23.useState)(false);
+  const [resendTimer, setResendTimer] = (0, import_react24.useState)(null);
+  const [remainingTime, setRemainingTime] = (0, import_react24.useState)(0);
+  const [showResendTimer, setShowResendTimer] = (0, import_react24.useState)(false);
   const startResendTimer = () => {
     if (resendTimer !== null) {
       clearInterval(resendTimer);
@@ -4591,21 +4626,21 @@ var CodeConfirmation = (props) => {
     }, 1e3);
     setResendTimer(newTimer);
   };
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     return () => {
       if (resendTimer !== null) {
         clearInterval(resendTimer);
       }
     };
   }, []);
-  return /* @__PURE__ */ import_react23.default.createElement(Card, null, /* @__PURE__ */ import_react23.default.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(Card, null, /* @__PURE__ */ import_react24.default.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ import_react24.default.createElement(
     Alert,
     {
       title: props.errorTitle,
       text: props.errorText,
       severity: "error"
     }
-  ), /* @__PURE__ */ import_react23.default.createElement("div", { className: "hawa-mb-4 dark:hawa-text-white" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "hawa-text-lg hawa-font-bold" }, ((_c = props.texts) == null ? void 0 : _c.checkYourPhone) || "Please check your phone"), /* @__PURE__ */ import_react23.default.createElement("div", { className: "hawa-text-muted-foreground" }, /* @__PURE__ */ import_react23.default.createElement("span", null, ((_d = props.texts) == null ? void 0 : _d.weSentCode) || "We've sent a code to "), /* @__PURE__ */ import_react23.default.createElement("span", null, props.phoneNumber))), /* @__PURE__ */ import_react23.default.createElement(
+  ), /* @__PURE__ */ import_react24.default.createElement("div", { className: "hawa-mb-4 dark:hawa-text-white" }, /* @__PURE__ */ import_react24.default.createElement("div", { className: "hawa-text-lg hawa-font-bold" }, ((_c = props.texts) == null ? void 0 : _c.checkYourPhone) || "Please check your phone"), /* @__PURE__ */ import_react24.default.createElement("div", { className: "hawa-text-muted-foreground" }, /* @__PURE__ */ import_react24.default.createElement("span", null, ((_d = props.texts) == null ? void 0 : _d.weSentCode) || "We've sent a code to "), /* @__PURE__ */ import_react24.default.createElement("span", null, props.phoneNumber))), /* @__PURE__ */ import_react24.default.createElement(
     "form",
     {
       noValidate: true,
@@ -4619,26 +4654,25 @@ var CodeConfirmation = (props) => {
         }
       })
     },
-    /* @__PURE__ */ import_react23.default.createElement(
+    /* @__PURE__ */ import_react24.default.createElement(
       import_react_hook_form5.Controller,
       {
         control,
         name: "otp_code",
         render: ({ field }) => {
           var _a2;
-          return /* @__PURE__ */ import_react23.default.createElement(
+          return /* @__PURE__ */ import_react24.default.createElement(
             PinInput,
             {
-              width: "full",
-              digits: 6,
-              getPins: (e) => setValue("otp_code", e.join("")),
-              helperText: (_a2 = formState.errors.otp_code) == null ? void 0 : _a2.message
+              maxLength: codeLength,
+              helperText: (_a2 = formState.errors.otp_code) == null ? void 0 : _a2.message,
+              ...field
             }
           );
         }
       }
     ),
-    showResendTimer ? /* @__PURE__ */ import_react23.default.createElement("div", { className: " hawa-py-2 hawa-text-center hawa-text-xs hawa-text-muted-foreground" }, (_e = props.texts) == null ? void 0 : _e.resendCodeTimer, " ", /* @__PURE__ */ import_react23.default.createElement("strong", null, remainingTime), " ", (_f = props.texts) == null ? void 0 : _f.seconds) : /* @__PURE__ */ import_react23.default.createElement("div", { className: " hawa-py-2 hawa-text-center hawa-text-xs hawa-text-muted-foreground" }, /* @__PURE__ */ import_react23.default.createElement("span", null, (_h = (_g = props.texts) == null ? void 0 : _g.didntGetCode) != null ? _h : "Didn't get the code?"), " ", /* @__PURE__ */ import_react23.default.createElement(
+    showResendTimer ? /* @__PURE__ */ import_react24.default.createElement("div", { className: " hawa-py-2 hawa-text-center hawa-text-xs hawa-text-muted-foreground" }, (_e = props.texts) == null ? void 0 : _e.resendCodeTimer, " ", /* @__PURE__ */ import_react24.default.createElement("strong", null, remainingTime), " ", (_f = props.texts) == null ? void 0 : _f.seconds) : /* @__PURE__ */ import_react24.default.createElement("div", { className: " hawa-py-2 hawa-text-center hawa-text-xs hawa-text-muted-foreground" }, /* @__PURE__ */ import_react24.default.createElement("span", null, (_h = (_g = props.texts) == null ? void 0 : _g.didntGetCode) != null ? _h : "Didn't get the code?"), " ", /* @__PURE__ */ import_react24.default.createElement(
       "span",
       {
         className: "clickable-link",
@@ -4649,7 +4683,7 @@ var CodeConfirmation = (props) => {
       },
       ((_i = props.texts) == null ? void 0 : _i.resendCode) || "Click to resend"
     )),
-    /* @__PURE__ */ import_react23.default.createElement("div", { className: "hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2" }, /* @__PURE__ */ import_react23.default.createElement(Button, { variant: "outline" }, ((_j = props.texts) == null ? void 0 : _j.cancel) || "Cancel"), /* @__PURE__ */ import_react23.default.createElement(Button, { isLoading: props.confirmLoading }, ((_k = props.texts) == null ? void 0 : _k.confirm) || "Confirm"))
+    /* @__PURE__ */ import_react24.default.createElement("div", { className: "hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2" }, /* @__PURE__ */ import_react24.default.createElement(Button, { variant: "outline" }, ((_j = props.texts) == null ? void 0 : _j.cancel) || "Cancel"), /* @__PURE__ */ import_react24.default.createElement(Button, { isLoading: props.confirmLoading }, ((_k = props.texts) == null ? void 0 : _k.confirm) || "Confirm"))
   )));
 };
 // Annotate the CommonJS export names for ESM import in node:
@@ -4663,3 +4697,53 @@ var CodeConfirmation = (props) => {
   RegisterForm,
   ResetPasswordForm
 });
+/*! Bundled license information:
+
+lucide-react/dist/esm/shared/src/utils.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/defaultAttributes.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/Icon.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/createLucideIcon.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/dot.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/lucide-react.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/