@sikka/hawa 0.37.2-next → 0.38.0-next

package/dist/blocks/auth/index.mjs

@@ -1,17 +1,17 @@
 "use client";
 import {
   Input
-} from "../../chunk-MDHDHEPZ.mjs";
+} from "../../chunk-TMUQCNLO.mjs";
 import {
   StopPropagationWrapper
 } from "../../chunk-47APBDKK.mjs";
 import {
   Select
-} from "../../chunk-QXH7ZDMN.mjs";
+} from "../../chunk-IA5FLRFL.mjs";
 import {
   EyeIcon,
   HiddenEyeIcon
-} from "../../chunk-DS3AACQJ.mjs";
+} from "../../chunk-E6C3LDHD.mjs";
 import {
   Button,
   Card,
@@ -20,10 +20,11 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
+  HelperText,
   Label,
   Loading,
   cn
-} from "../../chunk-PXGL7ZXQ.mjs";
+} from "../../chunk-V4SUYEVH.mjs";
 
 // blocks/auth/AuthButtons.tsx
 import React2 from "react";
@@ -2383,16 +2384,7 @@ var PhoneInput = ({
       ),
       ...inputProps
     }
-  ))), /* @__PURE__ */ React4.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__ */ React4.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // blocks/auth/LoginForm.tsx
@@ -3493,106 +3485,168 @@ var ResetPasswordForm = ({
 };
 
 // blocks/auth/CodeConfirmation.tsx
-import React13, { useEffect as useEffect4, useState as useState6 } from "react";
+import React13, { useEffect as useEffect3, useState as useState5 } from "react";
 import { Controller as Controller5, useForm as useForm5 } from "react-hook-form";
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import * as z5 from "zod";
 
 // elements/pinInput/PinInput.tsx
-import React12, { useEffect as useEffect3, useState as useState5 } from "react";
-var PinInput = ({
-  label,
-  icon,
-  digits,
-  width = "normal",
-  getPins,
-  inputProps,
-  ...props
-}) => {
-  const [pin, setPin] = useState5(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();
-    }
-  };
-  useEffect3(() => {
-    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__ */ React12.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React12.createElement(
-    "div",
-    {
-      className: "hawa-flex hawa-w-full hawa-flex-row hawa-justify-center hawa-gap-2",
-      dir: "ltr"
-    },
-    pin.map((value, index) => /* @__PURE__ */ React12.createElement(
-      "input",
+import * as React12 from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+import { forwardRef as forwardRef3, createElement as createElement3 } from "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
+import { forwardRef as forwardRef2, createElement as createElement2 } from "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 = forwardRef2(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => {
+    return createElement2(
+      "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__ */ React12.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]) => createElement2(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 = forwardRef3(
+    ({ className, ...props }, ref) => createElement3(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 = React12.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React12.createElement(
+  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 = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
+  "div",
+  {
+    ref,
+    className: cn("hawa-flex hawa-items-center", className),
+    ...props
+  }
+));
+PinInputGroup.displayName = "PinInputGroup";
+var PinInputSlot = React12.forwardRef(({ index, className, ...props }, ref) => {
+  const pinInputContext = React12.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = pinInputContext.slots[index];
+  return /* @__PURE__ */ React12.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__ */ React12.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-inset-0 hawa-flex hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React12.createElement("div", { className: "hawa-animate-caret-blink hawa-bg-foreground hawa-h-4 hawa-w-px hawa-duration-1000" }))
+  );
+});
+PinInputSlot.displayName = "PinInputSlot";
+var PinInputSeperator = React12.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React12.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React12.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__ */ React12.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React12.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React12.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React12.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React12.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React12.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React12.createElement(
+    PinInputSlot,
+    {
+      key: index + firstGroupLength,
+      index: index + firstGroupLength,
+      className: "hawa-w-full"
+    }
+  )))), /* @__PURE__ */ React12.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 } = useForm5({
     resolver: zodResolver5(formSchema)
   });
-  const [resendTimer, setResendTimer] = useState6(null);
-  const [remainingTime, setRemainingTime] = useState6(0);
-  const [showResendTimer, setShowResendTimer] = useState6(false);
+  const [resendTimer, setResendTimer] = useState5(null);
+  const [remainingTime, setRemainingTime] = useState5(0);
+  const [showResendTimer, setShowResendTimer] = useState5(false);
   const startResendTimer = () => {
     if (resendTimer !== null) {
       clearInterval(resendTimer);
@@ -3614,7 +3668,7 @@ var CodeConfirmation = (props) => {
     }, 1e3);
     setResendTimer(newTimer);
   };
-  useEffect4(() => {
+  useEffect3(() => {
     return () => {
       if (resendTimer !== null) {
         clearInterval(resendTimer);
@@ -3652,10 +3706,9 @@ var CodeConfirmation = (props) => {
           return /* @__PURE__ */ React13.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
             }
           );
         }
@@ -3685,3 +3738,53 @@ export {
   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.
+   *)
+*/

package/dist/blocks/feedback/index.js

@@ -768,16 +768,7 @@ var Radio = (0, import_react4.forwardRef)(
               opt.label
             );
           })
-        ), !forceHideHelperText && /* @__PURE__ */ import_react4.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
-        ));
+        ), !forceHideHelperText && /* @__PURE__ */ import_react4.default.createElement(HelperText, { helperText: props.helperText }));
       case "bordered":
         return /* @__PURE__ */ import_react4.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react4.default.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ import_react4.default.createElement(
           "div",
@@ -866,16 +857,7 @@ var Radio = (0, import_react4.forwardRef)(
             },
             opt.label
           )
-        ))), /* @__PURE__ */ import_react4.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_react4.default.createElement(HelperText, { helperText: props.helperText }));
     }
   }
 );
@@ -960,16 +942,7 @@ var Textarea = React10.forwardRef(
           ref
         }
       ),
-      /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React10.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
-      ), showCount && countPosition === "bottom" && /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
+      /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React10.createElement(HelperText, { helperText: props.helperText }), showCount && countPosition === "bottom" && /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
     );
   }
 );
@@ -1636,16 +1609,7 @@ var Select = ({
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    !props.hideHelperText && /* @__PURE__ */ import_react12.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_react12.default.createElement(HelperText, { helperText: props.helperText })
   );
 };
 

package/dist/blocks/feedback/index.mjs

@@ -1,27 +1,27 @@
 "use client";
 import {
   Textarea
-} from "../../chunk-BPHQFAWM.mjs";
+} from "../../chunk-4EZL2A64.mjs";
 import {
   Select
-} from "../../chunk-QXH7ZDMN.mjs";
+} from "../../chunk-IA5FLRFL.mjs";
 import {
   Popover,
   Radio
-} from "../../chunk-BTDR3VAG.mjs";
+} from "../../chunk-Q3HJI7ZE.mjs";
 import {
   BadEmoji,
   GoodEmoji,
   VeryBadEmoji,
   VeryGoodEmoji
-} from "../../chunk-DS3AACQJ.mjs";
+} from "../../chunk-E6C3LDHD.mjs";
 import {
   Button,
   Card,
   CardContent,
   Label,
   cn
-} from "../../chunk-PXGL7ZXQ.mjs";
+} from "../../chunk-V4SUYEVH.mjs";
 
 // blocks/feedback/UserReferralSource.tsx
 import React, { useRef, useState } from "react";

package/dist/blocks/index.d.mts

@@ -1,6 +1,6 @@
 import React__default, { FC, InputHTMLAttributes } from 'react';
 import { ThirdPartyAuthTextsTypes, LoginFormTextsTypes, RegisterFormTextsTypes, NewPasswordTextsTypes, ResetPasswordTextsTypes, BaseInputType, TextInputType, PricingCardProps, PlanFeature, PricingPlanTexts } from '../types/index.mjs';
-import { P as PhoneInputProps, S as SelectOptionProps, L as LabelProps, R as RadioOptionsTypes } from '../Radio-BCD7k628.mjs';
+import { P as PhoneInputProps, S as SelectOptionProps, L as LabelProps, R as RadioOptionsTypes } from '../Radio-uQ7DtzcI.mjs';
 import { D as DirectionType, a as RadioOptionType, O as OrientationType } from '../commonTypes-C-g8nFFC.mjs';
 import { M as MenuItemType } from '../DropdownMenu-BYiPSEYy.mjs';
 import '@radix-ui/react-popover';
@@ -257,6 +257,7 @@ type TConfirmation = {
     confirmLoading?: boolean;
     handleConfirm?: any;
     handleResend?: any;
+    codeLength?: number;
 };
 declare const CodeConfirmation: FC<TConfirmation>;
 

package/dist/blocks/index.d.ts

@@ -1,6 +1,6 @@
 import React__default, { FC, InputHTMLAttributes } from 'react';
 import { ThirdPartyAuthTextsTypes, LoginFormTextsTypes, RegisterFormTextsTypes, NewPasswordTextsTypes, ResetPasswordTextsTypes, BaseInputType, TextInputType, PricingCardProps, PlanFeature, PricingPlanTexts } from '../types/index.js';
-import { P as PhoneInputProps, S as SelectOptionProps, L as LabelProps, R as RadioOptionsTypes } from '../Radio-y9uhxitu.js';
+import { P as PhoneInputProps, S as SelectOptionProps, L as LabelProps, R as RadioOptionsTypes } from '../Radio-lgoClQrv.js';
 import { D as DirectionType, a as RadioOptionType, O as OrientationType } from '../commonTypes-C-g8nFFC.js';
 import { M as MenuItemType } from '../DropdownMenu-ChxqadLu.js';
 import '@radix-ui/react-popover';
@@ -257,6 +257,7 @@ type TConfirmation = {
     confirmLoading?: boolean;
     handleConfirm?: any;
     handleResend?: any;
+    codeLength?: number;
 };
 declare const CodeConfirmation: FC<TConfirmation>;