@sikka/hawa 0.46.3-next → 0.47.0-next

package/dist/blocks/auth/index.mjs

@@ -1,17 +1,17 @@
 "use client";
 import {
   Input
-} from "../../chunk-7L5VUKZ7.mjs";
+} from "../../chunk-EOH6A3GR.mjs";
 import {
   StopPropagationWrapper
 } from "../../chunk-47APBDKK.mjs";
 import {
   Select
-} from "../../chunk-7O555VJR.mjs";
+} from "../../chunk-AWJSHOYU.mjs";
 import {
   EyeIcon,
   HiddenEyeIcon
-} from "../../chunk-YXUHXKKK.mjs";
+} from "../../chunk-JP2N5WKD.mjs";
 import {
   Button,
   Card,
@@ -24,7 +24,7 @@ import {
   Label,
   Loading,
   cn
-} from "../../chunk-6UOJKVIA.mjs";
+} from "../../chunk-IFWYR5W2.mjs";
 
 // blocks/auth/AuthButtons.tsx
 import React2 from "react";
@@ -2518,11 +2518,13 @@ var PhoneInput = ({
   countryCodes,
   ...props
 }) => {
+  var _a;
   const [phoneNumber, setPhoneNumber] = useState2("");
-  const [countryCode, setCountryCode] = useState2(props.preferredCountry);
+  const [countryCode, setCountryCode] = useState2(
+    props.preferredCountry || { label: "+966" }
+  );
   const inputRef = useRef2(null);
   const handleInputChange = (e) => {
-    console.log("test e ", e.target.value);
     const validChars = /^[0-9-()]+$/;
     const input = e.target.value;
     if (input === "" || validChars.test(input)) {
@@ -2544,11 +2546,13 @@ var PhoneInput = ({
       isMulti: false,
       isSearchable: true,
       isClearable: false,
-      placeholder: "Code",
+      placeholder: (_a = props.preferredCountry) == null ? void 0 : _a.label,
       options: countryCodes || countries_default,
-      onChange: setCountryCode,
-      value: countryCode == null ? void 0 : countryCode.label,
-      defaultValue: props.preferredCountry
+      onChange: (e) => setCountryCode({ label: e.label, value: e.label }),
+      valueKey: "label",
+      labelKey: "label",
+      value: { label: countryCode == null ? void 0 : countryCode.label, value: countryCode == null ? void 0 : countryCode.label },
+      defaultValue: { label: countryCode == null ? void 0 : countryCode.label, value: countryCode == null ? void 0 : countryCode.label }
     }
   ), /* @__PURE__ */ React4.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React4.createElement(
     "input",
@@ -2862,14 +2866,7 @@ var LoginForm = ({
         (texts == null ? void 0 : texts.loginText) || "Login"
       ),
       props.additionalButtons && props.additionalButtons,
-      props.allowRegister && /* @__PURE__ */ React5.createElement("div", { className: "hawa-select-none hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-gray-300" }, (texts == null ? void 0 : texts.newUserText) || "New user?", " ", /* @__PURE__ */ React5.createElement(
-        "span",
-        {
-          onClick: props.onRouteToRegister,
-          className: "clickable-link"
-        },
-        (texts == null ? void 0 : texts.createAccount) || "Create Account"
-      ))
+      props.allowRegister && /* @__PURE__ */ React5.createElement("div", { className: "hawa-select-none hawa-p-3 hawa-text-center hawa-text-sm hawa-font-normal dark:hawa-text-gray-300" }, (texts == null ? void 0 : texts.newUserText) || "New user?", " ", /* @__PURE__ */ React5.createElement("span", { onClick: props.onRouteToRegister, className: "clickable-link" }, (texts == null ? void 0 : texts.createAccount) || "Create Account"))
     )),
     props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React5.createElement(
       CardFooter,
@@ -3772,14 +3769,7 @@ var PinInputRoot = React12.forwardRef(({ className, containerClassName, ...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
-  }
-));
+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);
@@ -3802,22 +3792,12 @@ var PinInputSlot = React12.forwardRef(({ index, className, ...props }, ref) => {
 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
-}) => {
+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 hawa-gap-2" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React12.createElement(
-    PinInputSlot,
-    {
-      key: index,
-      index,
-      className: "hawa-w-full hawa-border"
-    }
-  ))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React12.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React12.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React12.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2", dir: "ltr" }, /* @__PURE__ */ React12.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React12.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React12.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full hawa-border" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React12.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React12.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React12.createElement(
     PinInputSlot,
     {
       key: index + firstGroupLength,
@@ -3828,10 +3808,7 @@ var PinInput = ({
 };
 
 // blocks/auth/CodeConfirmation.tsx
-var CodeConfirmation = ({
-  codeLength = 6,
-  ...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(codeLength, { message: (_b = props.texts) == null ? void 0 : _b.codeTooShort })
@@ -3870,14 +3847,7 @@ var CodeConfirmation = ({
       }
     };
   }, []);
-  return /* @__PURE__ */ React13.createElement(Card, null, /* @__PURE__ */ React13.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ React13.createElement(
-    Alert,
-    {
-      title: props.errorTitle,
-      text: props.errorText,
-      severity: "error"
-    }
-  ), /* @__PURE__ */ React13.createElement("div", { className: "hawa-mb-4 dark:hawa-text-white" }, /* @__PURE__ */ React13.createElement("div", { className: "hawa-text-lg hawa-font-bold" }, ((_c = props.texts) == null ? void 0 : _c.checkYourPhone) || "Please check your phone"), /* @__PURE__ */ React13.createElement("div", { className: "hawa-text-muted-foreground" }, /* @__PURE__ */ React13.createElement("span", null, ((_d = props.texts) == null ? void 0 : _d.weSentCode) || "We've sent a code to "), /* @__PURE__ */ React13.createElement("span", null, props.phoneNumber))), /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React13.createElement(Card, null, /* @__PURE__ */ React13.createElement(CardContent, { headless: true }, props.showError && /* @__PURE__ */ React13.createElement(Alert, { title: props.errorTitle, text: props.errorText, severity: "error" }), /* @__PURE__ */ React13.createElement("div", { className: "hawa-mb-4 dark:hawa-text-white" }, /* @__PURE__ */ React13.createElement("div", { className: "hawa-text-lg hawa-font-bold" }, ((_c = props.texts) == null ? void 0 : _c.checkYourIdentifier) || "Please check your phone"), /* @__PURE__ */ React13.createElement("div", { className: "hawa-text-muted-foreground" }, /* @__PURE__ */ React13.createElement("span", null, ((_d = props.texts) == null ? void 0 : _d.weSentCode) || "We've sent a code to "), /* @__PURE__ */ React13.createElement("span", null, props.identifier))), /* @__PURE__ */ React13.createElement(
     "form",
     {
       noValidate: true,
@@ -3926,9 +3896,7 @@ var CodeConfirmation = ({
           if (props.onCancel) {
             return props.onCancel();
           } else {
-            console.log(
-              "Cancel button clicked but onCancel prop is missing"
-            );
+            console.log("Cancel button clicked but onCancel prop is missing");
           }
         },
         variant: "outline"

package/dist/blocks/feedback/index.js

@@ -964,7 +964,7 @@ function Skeleton({
   };
   const styledAs = {
     div: "",
-    input: "!h-[38px] !w-full"
+    input: "hawa-h-[40px] hawa-w-full"
   };
   return /* @__PURE__ */ import_react5.default.createElement(
     "div",
@@ -1528,6 +1528,7 @@ var import_clsx2 = __toESM(require("clsx"));
 var Select = ({
   labelProps,
   labelKey = "label",
+  valueKey = "value",
   ...props
 }) => {
   const NoOption = () => {
@@ -1547,13 +1548,7 @@ var Select = ({
       children
     );
   };
-  const Option = ({
-    children,
-    innerProps,
-    innerRef,
-    isFocused,
-    isSelected
-  }) => {
+  const Option = ({ children, innerProps, innerRef, isFocused, isSelected }) => {
     return /* @__PURE__ */ import_react12.default.createElement(
       "div",
       {
@@ -1568,14 +1563,7 @@ var Select = ({
       children
     );
   };
-  const Menu = ({
-    cx,
-    children,
-    getStyles,
-    innerProps,
-    innerRef,
-    ...menuProps
-  }) => {
+  const Menu = ({ cx, children, getStyles, innerProps, innerRef, ...menuProps }) => {
     const menuOpen = menuProps.selectProps.menuIsOpen;
     return /* @__PURE__ */ import_react12.default.createElement(
       "div",
@@ -1604,71 +1592,72 @@ var Select = ({
       )
     },
     props.label && /* @__PURE__ */ import_react12.default.createElement(Label, { ...labelProps }, props.label),
-    props.isLoading ? /* @__PURE__ */ import_react12.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
-      //   TODO: enable keyboard to go to the next item in the list
-      /* @__PURE__ */ import_react12.default.createElement(
-        import_react_select.default,
-        {
-          noOptionsMessage: NoOption,
-          classNames: {
-            control: () => cn(
-              props.phoneCode && "hawa-rounded-r-none",
-              props.controlClassNames
-            ),
-            container: () => cn(
-              selectContainerStyles,
-              props.phoneCode && phoneCodeStyles,
-              props.isMulti && "hawa-ps-0 "
-            ),
-            placeholder: () => cn(
-              selectPlaceholderStyles,
-              props.disabled && "hawa-text-muted-foreground"
-            ),
-            valueContainer: () => "hawa-text-foreground hawa-px-1 ",
-            singleValue: () => cn(
-              props.disabled ? "hawa-text-muted-foreground hawa-opacity-30" : "hawa-text-foreground"
-            ),
-            indicatorsContainer: () => cn(
-              selectIndicatorContainerStyles,
-              props.hideIndicator ? "hawa-invisible" : "hawa-px-1",
-              props.disabled && "hawa-opacity-30"
-            )
-          },
-          unstyled: true,
-          autoFocus: false,
-          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : {
+    props.isLoading ? /* @__PURE__ */ import_react12.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? /* @__PURE__ */ import_react12.default.createElement(
+      import_react_select.default,
+      {
+        noOptionsMessage: NoOption,
+        classNames: {
+          control: () => cn(props.phoneCode && "hawa-rounded-r-none", props.controlClassNames),
+          container: () => cn(
+            selectContainerStyles,
+            props.phoneCode && phoneCodeStyles,
+            props.isMulti && "hawa-ps-0 "
+          ),
+          placeholder: () => cn(selectPlaceholderStyles, props.disabled && "hawa-text-muted-foreground"),
+          valueContainer: () => "hawa-text-foreground hawa-px-1",
+          singleValue: () => cn(
+            props.disabled ? "hawa-text-muted-foreground hawa-opacity-30" : "hawa-text-foreground"
+          ),
+          indicatorsContainer: () => cn(
+            selectIndicatorContainerStyles,
+            props.hideIndicator ? "hawa-invisible" : "hawa-px-1",
+            props.disabled && "hawa-opacity-30"
+          )
+        },
+        unstyled: true,
+        autoFocus: false,
+        components: props.hideIndicator ? {
+          Option: (optionProps) => /* @__PURE__ */ import_react12.default.createElement(
             Option,
-            Menu,
-            ValueContainer: (e) => /* @__PURE__ */ import_react12.default.createElement(
-              "div",
-              {
-                className: cn(
-                  e.className,
-                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
-                ),
-                ...e
-              }
-            ),
-            MultiValueContainer: (e) => /* @__PURE__ */ import_react12.default.createElement(
-              "div",
-              {
-                className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
-                ...e
-              }
-            )
-          },
-          onChange: (newValue, action) => props.onChange(newValue, action),
-          options: props.options,
-          getOptionLabel: props.getOptionLabel,
-          defaultValue: props.defaultValue,
-          value: props.value,
-          placeholder: props.placeholder,
-          isDisabled: props.disabled,
-          isClearable: props.isClearable,
-          isMulti: props.isMulti,
-          isSearchable: props.isSearchable
-        }
-      )
+            {
+              ...optionProps,
+              isSelected: optionProps.data[valueKey] === props.value[valueKey]
+            }
+          ),
+          Menu,
+          IndicatorsContainer: () => null
+        } : {
+          Option,
+          Menu,
+          ValueContainer: (e) => /* @__PURE__ */ import_react12.default.createElement(
+            "div",
+            {
+              className: cn(
+                e.className,
+                "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-2 hawa-w-full hawa-cursor-pointer"
+              ),
+              ...e
+            }
+          ),
+          MultiValueContainer: (e) => /* @__PURE__ */ import_react12.default.createElement(
+            "div",
+            {
+              className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
+              ...e
+            }
+          )
+        },
+        onChange: (newValue, action) => props.onChange(newValue, action),
+        options: props.options,
+        getOptionLabel: props.getOptionLabel,
+        defaultValue: props.defaultValue,
+        value: props.value,
+        placeholder: props.placeholder,
+        isDisabled: props.disabled,
+        isClearable: props.isClearable,
+        isMulti: props.isMulti,
+        isSearchable: props.isSearchable
+      }
     ) : /* @__PURE__ */ import_react12.default.createElement(
       import_creatable.default,
       {

package/dist/blocks/feedback/index.mjs

@@ -1,26 +1,26 @@
 "use client";
 import {
   Textarea
-} from "../../chunk-EHJXQQDP.mjs";
+} from "../../chunk-5S5DR7KF.mjs";
 import {
   Select
-} from "../../chunk-7O555VJR.mjs";
+} from "../../chunk-AWJSHOYU.mjs";
 import {
   Popover,
   Radio
-} from "../../chunk-R37QEYSB.mjs";
+} from "../../chunk-NMW4GM4G.mjs";
 import {
   BadEmoji,
   GoodEmoji,
   VeryBadEmoji,
   VeryGoodEmoji
-} from "../../chunk-YXUHXKKK.mjs";
+} from "../../chunk-JP2N5WKD.mjs";
 import {
   Button,
   Card,
   CardContent,
   cn
-} from "../../chunk-6UOJKVIA.mjs";
+} from "../../chunk-IFWYR5W2.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-Dyvlywnk.mjs';
+import { P as PhoneInputProps, S as SelectOptionProps, L as LabelProps, R as RadioOptionsTypes } from '../Radio-BPHTeDMz.mjs';
 import { D as DirectionType, a as RadioOptionType, O as OrientationType } from '../commonTypes-C-g8nFFC.mjs';
 import { M as MenuItemType } from '../DropdownMenu-mK9EvfKp.mjs';
 import '@radix-ui/react-popover';
@@ -243,7 +243,7 @@ declare const ResetPasswordForm: FC<ResetPasswordType>;
 
 type TConfirmation = {
     texts?: {
-        checkYourPhone?: string;
+        checkYourIdentifier?: string;
         weSentCode?: string;
         didntGetCode?: string;
         resendCode?: string;
@@ -257,7 +257,7 @@ type TConfirmation = {
     showError?: any;
     errorTitle?: any;
     errorText?: any;
-    phoneNumber?: string;
+    identifier?: string;
     confirmLoading?: boolean;
     onConfirm?: any;
     onResend?: any;

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-DlPwVCG4.js';
+import { P as PhoneInputProps, S as SelectOptionProps, L as LabelProps, R as RadioOptionsTypes } from '../Radio-cRcIH8_L.js';
 import { D as DirectionType, a as RadioOptionType, O as OrientationType } from '../commonTypes-C-g8nFFC.js';
 import { M as MenuItemType } from '../DropdownMenu-CDnFCzfc.js';
 import '@radix-ui/react-popover';
@@ -243,7 +243,7 @@ declare const ResetPasswordForm: FC<ResetPasswordType>;
 
 type TConfirmation = {
     texts?: {
-        checkYourPhone?: string;
+        checkYourIdentifier?: string;
         weSentCode?: string;
         didntGetCode?: string;
         resendCode?: string;
@@ -257,7 +257,7 @@ type TConfirmation = {
     showError?: any;
     errorTitle?: any;
     errorText?: any;
-    phoneNumber?: string;
+    identifier?: string;
     confirmLoading?: boolean;
     onConfirm?: any;
     onResend?: any;