@sikka/hawa 0.47.0-next → 0.48.1-next

package/dist/chunk-JFWD2ICY.mjs

@@ -0,0 +1,511 @@
+"use client";
+import {
+  Chip,
+  ScrollArea
+} from "./chunk-C2UOOH4X.mjs";
+import {
+  HelperText,
+  Label,
+  Skeleton,
+  cn
+} from "./chunk-IFWYR5W2.mjs";
+
+// hooks/useShortcuts.ts
+import { useEffect } from "react";
+function parseHotkey(hotkey) {
+  const keys = hotkey.toLowerCase().split("+").map((part) => part.trim());
+  const modifiers = {
+    alt: keys.includes("alt"),
+    ctrl: keys.includes("ctrl"),
+    meta: keys.includes("meta"),
+    mod: keys.includes("mod"),
+    shift: keys.includes("shift")
+  };
+  const reservedKeys = ["alt", "ctrl", "meta", "shift", "mod"];
+  const freeKey = keys.find((key) => !reservedKeys.includes(key));
+  return {
+    ...modifiers,
+    key: freeKey
+  };
+}
+function isExactHotkey(hotkey, event) {
+  const { alt, ctrl, meta, mod, shift, key } = hotkey;
+  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey } = event;
+  if (alt !== altKey) {
+    return false;
+  }
+  if (mod) {
+    if (!ctrlKey && !metaKey) {
+      return false;
+    }
+  } else {
+    if (ctrl !== ctrlKey) {
+      return false;
+    }
+    if (meta !== metaKey) {
+      return false;
+    }
+  }
+  if (shift !== shiftKey) {
+    return false;
+  }
+  if (key && (pressedKey.toLowerCase() === key.toLowerCase() || event.code.replace("Key", "").toLowerCase() === key.toLowerCase())) {
+    return true;
+  }
+  return false;
+}
+function getHotkeyMatcher(hotkey) {
+  return (event) => isExactHotkey(parseHotkey(hotkey), event);
+}
+function getHotkeyHandler(hotkeys) {
+  return (event) => {
+    const _event = "nativeEvent" in event ? event.nativeEvent : event;
+    hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {
+      if (getHotkeyMatcher(hotkey)(_event)) {
+        if (options.preventDefault) {
+          event.preventDefault();
+        }
+        handler(_event);
+      }
+    });
+  };
+}
+
+// elements/tabs/Tabs.tsx
+import * as React9 from "react";
+
+// hooks/useIsomorphicEffect.ts
+import { useEffect as useEffect2, useLayoutEffect } from "react";
+
+// hooks/useDiscloser.ts
+import { useState } from "react";
+
+// hooks/useHover.ts
+import { useEffect as useEffect3, useRef, useState as useState2 } from "react";
+
+// hooks/useToast.ts
+import * as React3 from "react";
+
+// hooks/useCarousel.ts
+import { useState as useState4, useRef as useRef2 } from "react";
+
+// hooks/useDialogCarousel.ts
+import { useEffect as useEffect5, useState as useState5 } from "react";
+import AutoHeight from "embla-carousel-auto-height";
+import useEmblaCarousel from "embla-carousel-react";
+
+// hooks/useDialogSteps.ts
+import { useState as useState6, useEffect as useEffect6, useRef as useRef3 } from "react";
+
+// hooks/useClipboard.ts
+import { useState as useState7 } from "react";
+
+// hooks/useBreakpoint.ts
+import { useState as useState8, useEffect as useEffect7 } from "react";
+
+// hooks/useWindowSize.ts
+import { useEffect as useEffect8, useState as useState9 } from "react";
+
+// hooks/useFocusWithin.ts
+import { useRef as useRef4, useState as useState10, useEffect as useEffect9 } from "react";
+
+// hooks/useMediaQuery.ts
+import { useState as useState11, useEffect as useEffect10, useRef as useRef5 } from "react";
+
+// hooks/useScrollPosition.ts
+import { useState as useState12, useEffect as useEffect11 } from "react";
+
+// hooks/useTable.ts
+import { useState as useState13, useEffect as useEffect12 } from "react";
+
+// hooks/useTabs.ts
+import { useEffect as useEffect13, useState as useState14 } from "react";
+
+// hooks/useMeasureDirty.ts
+import { useEffect as useEffect14, useRef as useRef7, useState as useState15 } from "react";
+
+// hooks/useClickOutside.ts
+import { useEffect as useEffect15, useRef as useRef8 } from "react";
+
+// hooks/useWindowEvent.ts
+import { useEffect as useEffect16 } from "react";
+function useWindowEvent(type, listener, options) {
+  useEffect16(() => {
+    window.addEventListener(type, listener, options);
+    return () => window.removeEventListener(type, listener, options);
+  }, [type, listener]);
+}
+
+// hooks/useViewportSize.ts
+import { useCallback, useEffect as useEffect17, useState as useState16 } from "react";
+var eventListerOptions = {
+  passive: true
+};
+function useViewportSize() {
+  const [windowSize, setWindowSize] = useState16({
+    width: 0,
+    height: 0
+  });
+  const setSize = useCallback(() => {
+    setWindowSize({
+      width: window.innerWidth || 0,
+      height: window.innerHeight || 0
+    });
+  }, []);
+  useWindowEvent("resize", setSize, eventListerOptions);
+  useWindowEvent("orientationchange", setSize, eventListerOptions);
+  useEffect17(setSize, []);
+  return windowSize;
+}
+
+// elements/tabs/Tabs.tsx
+import * as Popover from "@radix-ui/react-popover";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { tv } from "tailwind-variants";
+var tabsListVariant = tv({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined_tabs: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
+    },
+    orientation: { horizontal: "", vertical: "" }
+  },
+  compoundVariants: [
+    {
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-border-e-2 hawa-border-e-primary"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-border-b-2 hawa-border-b-primary"
+    }
+  ],
+  defaultVariants: { variant: "default", orientation: "horizontal" }
+});
+var tabsTriggerVariant = tv({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
+      underlined: "hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
+      underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10"
+    },
+    orientation: { horizontal: "", vertical: "" }
+  },
+  compoundVariants: [
+    {
+      variant: "underlined",
+      orientation: "horizontal",
+      class: "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
+    },
+    {
+      variant: "underlined",
+      orientation: "vertical",
+      class: "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-rounded-b-none"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-rounded-e-none"
+    }
+  ],
+  defaultVariants: { variant: "default", orientation: "horizontal" }
+});
+var TabsContext = React9.createContext({ orientation: "horizontal", variant: "default", scrollable: false });
+var Tabs = React9.forwardRef(
+  ({ className, orientation, scrollable, variant = "default", ...props }, ref) => /* @__PURE__ */ React9.createElement(
+    TabsPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "hawa-flex hawa-gap-2",
+        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React9.createElement(TabsContext.Provider, { value: { orientation, variant, scrollable } }, props.children)
+  )
+);
+var TabsList = React9.forwardRef(({ className, classNames, ...props }, ref) => {
+  const { orientation, variant, scrollable } = React9.useContext(TabsContext);
+  const { width } = useViewportSize();
+  if (scrollable && width < 768 && orientation === "horizontal") {
+    return /* @__PURE__ */ React9.createElement(ScrollArea, { orientation: "horizontal", className: classNames == null ? void 0 : classNames.scrollArea }, /* @__PURE__ */ React9.createElement(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(
+          tabsListVariant({ variant, orientation }),
+          "hawa-flex-row hawa-flex-nowrap",
+          className
+        ),
+        ...props
+      }
+    ));
+  } else {
+    return /* @__PURE__ */ React9.createElement(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(
+          tabsListVariant({ variant, orientation }),
+          orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
+          "hawa-flex-wrap",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+});
+var TabsTrigger = React9.forwardRef(
+  ({ className, chipProps, withPopover = false, onPopoverClick, ...props }, ref) => {
+    const { orientation, variant } = React9.useContext(TabsContext);
+    if (withPopover) {
+      return /* @__PURE__ */ React9.createElement(Popover.Root, { open: props.showPopover }, /* @__PURE__ */ React9.createElement(Popover.Anchor, { asChild: true }, /* @__PURE__ */ React9.createElement(
+        TabsPrimitive.Trigger,
+        {
+          className: cn(
+            tabsTriggerVariant({ variant, orientation }),
+            "hawa-relative",
+            className
+          ),
+          ...props
+        },
+        props.children,
+        chipProps && /* @__PURE__ */ React9.createElement(Chip, { ...chipProps })
+      )), /* @__PURE__ */ React9.createElement(
+        Popover.Content,
+        {
+          onClick: onPopoverClick,
+          asChild: true,
+          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",
+            "hawa-arrow-default-top hawa-mt-2"
+          )
+        },
+        /* @__PURE__ */ React9.createElement("div", { className: "hawa-p-2" }, " ", props.popoverContent)
+      ));
+    } else {
+      return /* @__PURE__ */ React9.createElement(
+        TabsPrimitive.Trigger,
+        {
+          className: cn(
+            tabsTriggerVariant({ variant, orientation }),
+            "hawa-relative",
+            className
+          ),
+          ...props
+        },
+        props.children,
+        chipProps && /* @__PURE__ */ React9.createElement(Chip, { ...chipProps })
+      );
+    }
+  }
+);
+var TabsContent = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+Tabs.displayName = TabsPrimitive.Root.displayName;
+TabsList.displayName = TabsPrimitive.List.displayName;
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// elements/input/Input.tsx
+import React10, { forwardRef as forwardRef2, useState as useState17 } from "react";
+var Input = forwardRef2(
+  ({
+    margin = "none",
+    width = "full",
+    preview = false,
+    forceHideHelperText = false,
+    labelProps,
+    placeholder,
+    showCount,
+    inputProps,
+    countPosition = "bottom",
+    ...props
+  }, ref) => {
+    var _a;
+    const [value, setValue] = useState17(props.value || "");
+    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 placeholder:hawa-text-muted-foreground";
+    const handleChange = (e) => {
+      let newValue = e.target.value;
+      setValue(newValue);
+      if (props.prefixText) {
+        if (newValue.length < props.prefixText.length) {
+          newValue = props.prefixText;
+        } else {
+          const isSubstring = props.prefixText.startsWith(newValue);
+          if (!isSubstring && !newValue.startsWith(props.prefixText)) {
+            newValue = `${props.prefixText}${newValue}`;
+          }
+        }
+      }
+      if (props.onChange) {
+        if (props.type === "number" && props.maxLength) {
+          let v = newValue.replace(/[^0-9]/g, "").slice(0, props.maxLength);
+          const newEvent = { ...e, target: { ...e.target, value: v } };
+          setValue(v);
+          props.onChange(newEvent);
+        } else {
+          const newEvent = { ...e, target: { ...e.target, value: newValue } };
+          setValue(newValue);
+          props.onChange(newEvent);
+        }
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (props.type === "number" && ["e", "E", "+", "-", "."].includes(e.key)) {
+        e.preventDefault();
+      }
+      props.onKeyDown && props.onKeyDown(e);
+    };
+    return /* @__PURE__ */ React10.createElement(
+      "div",
+      {
+        className: cn(
+          defaultStyle,
+          marginStyles[margin],
+          widthStyles[width],
+          props.containerClassName,
+          "hawa-w-full hawa-gap-2"
+        )
+      },
+      props.label && /* @__PURE__ */ React10.createElement(Label, { ...labelProps }, props.label),
+      /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-w-full hawa-items-center" }, props.outsidePrefix && /* @__PURE__ */ React10.createElement("span", { className: cn("hawa-me-2 hawa-opacity-90", !forceHideHelperText && "hawa-mb-2") }, props.outsidePrefix), props.isLoading ? /* @__PURE__ */ React10.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ React10.createElement(Skeleton, { as: "input" })) : props.isLoadingError ? /* @__PURE__ */ React10.createElement("div", { className: "hawa-pb-2 hawa-w-full" }, /* @__PURE__ */ React10.createElement(
+        Skeleton,
+        {
+          animation: "none",
+          className: "hawa-h-[40px] hawa-w-full !hawa-bg-destructive/[0.3]",
+          content: /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2" }, /* @__PURE__ */ React10.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "hawa-text-destructive"
+            },
+            /* @__PURE__ */ React10.createElement("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+            /* @__PURE__ */ React10.createElement("path", { d: "M12 9v4" }),
+            /* @__PURE__ */ React10.createElement("path", { d: "M12 17h.01" })
+          ), /* @__PURE__ */ React10.createElement("span", null, /* @__PURE__ */ React10.createElement("span", { className: "hawa-text-destructive" }, props.loadingErrorMesssage || "Error loading data")))
+        }
+      )) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, !props.hideSeparator && /* @__PURE__ */ React10.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__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, /* @__PURE__ */ React10.createElement("div", { className: "hawa-relative" }, props.startIcon && /* @__PURE__ */ React10.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ React10.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2",
+            (_a = props.endIconProps) == null ? void 0 : _a.className
+          )
+        },
+        props.endIcon
+      ), /* @__PURE__ */ React10.createElement(
+        "input",
+        {
+          required: true,
+          dir: props.dir,
+          type: props.type,
+          value: props.value || value,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          autoComplete: props.autoComplete,
+          defaultValue: props.defaultValue,
+          placeholder,
+          disabled: props.disabled || preview,
+          style: { height: 40 },
+          maxLength: props.maxLength,
+          ...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 == null ? void 0 : inputProps.className
+          )
+        }
+      )), !forceHideHelperText && /* @__PURE__ */ React10.createElement(HelperText, { helperText: props.helperText }), !props.disabled && forceHideHelperText && /* @__PURE__ */ React10.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__ */ React10.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
+      ))))
+    );
+  }
+);
+
+export {
+  getHotkeyHandler,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Input
+};

package/dist/elements/index.mjs

@@ -26,7 +26,7 @@ import {
   TabsList,
   TabsTrigger,
   Textarea
-} from "../chunk-342KIV4R.mjs";
+} from "../chunk-GBLWUEYN.mjs";
 import {
   useClipboard
 } from "../chunk-WL7C2A5D.mjs";

package/dist/index.css

@@ -1329,6 +1329,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-mt-4 {
   margin-top: 1rem;
 }
+.hawa-mt-6 {
+  margin-top: 1.5rem;
+}
 .hawa-mt-8 {
   margin-top: 2rem;
 }

package/dist/index.d.mts

@@ -1570,6 +1570,7 @@ type RegisterFormTextsTypes = ThirdPartyAuthTextsTypes & {
     fullName?: BaseInputType;
     email?: TextInputType;
     username?: UsernameInputType;
+    phone?: TextInputType;
     password?: PasswordInputType;
     confirm?: ConfirmInputType;
     userReference?: BaseInputType;
@@ -1723,11 +1724,17 @@ type RegisterFormTypes = {
     direction?: DirectionType;
     /** Determines whether to display logos only or with text in the social media registration section. */
     logosOnly?: boolean;
-    /** Enables registration via Google when set to true. */
+    /** Enables registration via Google when set to true.
+     * @default false
+     */
     viaGoogle?: boolean;
-    /** Enables registration via Github when set to true. */
+    /** Enables registration via Github when set to true.
+     * @default false
+     */
     viaGithub?: boolean;
-    /** Enables registration via Twitter when set to true. */
+    /** Enables registration via Twitter when set to true.
+     * @default false
+     */
     viaTwitter?: boolean;
     /** Determines whether to show the referral code field. */
     showRefCode?: boolean;
@@ -1749,16 +1756,15 @@ type RegisterFormTypes = {
     onTwitterRegister?: () => void;
     /** Callback function triggered to route to the Terms of Service page. */
     onRouteToTOS?: () => void;
-    /** Determines whether to show an error alert. */
-    showError?: boolean;
     /** Callback function triggered when the error alert is dismissed. */
     onErrorDismissed?: () => void;
+    onRegisterTypeChange?: (e: string) => void;
+    /** Determines whether to show an error alert. */
+    showError?: boolean;
     /** Title for the error alert. */
     errorTitle?: any;
     /** Text for the error alert. */
     errorText?: any;
-    /** Array containing the fields to be included in the form. */
-    registerFields?: string[];
     /** Indicates whether the form submission is in progress. */
     isLoading?: boolean;
     /** If true, a loading spinner is displayed within the Google login button.   */
@@ -1784,8 +1790,21 @@ type RegisterFormTypes = {
     };
     /** The minimum length of the password input field */
     minPasswordLength?: number;
-    /** If true, the form is displayed without a card container styling.*/
+    /** If true, the form is displayed without a card container styling.
+     * @default false
+     */
     cardless?: boolean;
+    /** Array containing the fields to be included in the form. */
+    registerFields?: ("fullname" | "email" | "username" | "phone")[];
+    /** To show the register form in a different type, either "email" or "phone"
+     * @default "email"
+     */
+    registerTypes?: {
+        label: string;
+        value: string;
+    }[];
+    /** Props to pass to the PhoneInput component */
+    phoneInputProps?: PhoneInputProps;
 };
 declare const RegisterForm: FC<RegisterFormTypes>;
 

package/dist/index.d.ts

@@ -1570,6 +1570,7 @@ type RegisterFormTextsTypes = ThirdPartyAuthTextsTypes & {
     fullName?: BaseInputType;
     email?: TextInputType;
     username?: UsernameInputType;
+    phone?: TextInputType;
     password?: PasswordInputType;
     confirm?: ConfirmInputType;
     userReference?: BaseInputType;
@@ -1723,11 +1724,17 @@ type RegisterFormTypes = {
     direction?: DirectionType;
     /** Determines whether to display logos only or with text in the social media registration section. */
     logosOnly?: boolean;
-    /** Enables registration via Google when set to true. */
+    /** Enables registration via Google when set to true.
+     * @default false
+     */
     viaGoogle?: boolean;
-    /** Enables registration via Github when set to true. */
+    /** Enables registration via Github when set to true.
+     * @default false
+     */
     viaGithub?: boolean;
-    /** Enables registration via Twitter when set to true. */
+    /** Enables registration via Twitter when set to true.
+     * @default false
+     */
     viaTwitter?: boolean;
     /** Determines whether to show the referral code field. */
     showRefCode?: boolean;
@@ -1749,16 +1756,15 @@ type RegisterFormTypes = {
     onTwitterRegister?: () => void;
     /** Callback function triggered to route to the Terms of Service page. */
     onRouteToTOS?: () => void;
-    /** Determines whether to show an error alert. */
-    showError?: boolean;
     /** Callback function triggered when the error alert is dismissed. */
     onErrorDismissed?: () => void;
+    onRegisterTypeChange?: (e: string) => void;
+    /** Determines whether to show an error alert. */
+    showError?: boolean;
     /** Title for the error alert. */
     errorTitle?: any;
     /** Text for the error alert. */
     errorText?: any;
-    /** Array containing the fields to be included in the form. */
-    registerFields?: string[];
     /** Indicates whether the form submission is in progress. */
     isLoading?: boolean;
     /** If true, a loading spinner is displayed within the Google login button.   */
@@ -1784,8 +1790,21 @@ type RegisterFormTypes = {
     };
     /** The minimum length of the password input field */
     minPasswordLength?: number;
-    /** If true, the form is displayed without a card container styling.*/
+    /** If true, the form is displayed without a card container styling.
+     * @default false
+     */
     cardless?: boolean;
+    /** Array containing the fields to be included in the form. */
+    registerFields?: ("fullname" | "email" | "username" | "phone")[];
+    /** To show the register form in a different type, either "email" or "phone"
+     * @default "email"
+     */
+    registerTypes?: {
+        label: string;
+        value: string;
+    }[];
+    /** Props to pass to the PhoneInput component */
+    phoneInputProps?: PhoneInputProps;
 };
 declare const RegisterForm: FC<RegisterFormTypes>;