@sikka/hawa 0.43.6-next → 0.45.0-next

package/dist/blocks/index.js

@@ -3320,13 +3320,21 @@ var Select = ({
       children
     );
   };
-  const Option = ({ children, innerProps, innerRef }) => {
+  const Option = ({
+    children,
+    innerProps,
+    innerRef,
+    isFocused,
+    isSelected
+  }) => {
     return /* @__PURE__ */ import_react9.default.createElement(
       "div",
       {
         ref: innerRef,
         className: cn(
-          "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all hover:hawa-bg-primary hover:hawa-text-primary-foreground"
+          "hawa-flex hawa-cursor-pointer hawa-select-none hawa-flex-row hawa-items-center hawa-justify-between hawa-rounded-inner hawa-p-1 hawa-px-2 hawa-transition-all",
+          isFocused ? "hawa-bg-accent hawa-text-bg-accent-foreground" : "hover:hawa-bg-accent hover:hawa-text-accent-foreground",
+          isSelected && "hawa-bg-primary hawa-text-primary-foreground"
         ),
         ...innerProps
       },
@@ -3383,15 +3391,20 @@ var Select = ({
             container: () => cn(
               selectContainerStyles,
               props.phoneCode && phoneCodeStyles,
-              props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer",
               props.isMulti && "hawa-ps-0 "
             ),
-            placeholder: () => selectPlaceholderStyles,
+            placeholder: () => cn(
+              selectPlaceholderStyles,
+              props.disabled && "hawa-text-muted-foreground"
+            ),
             valueContainer: () => "hawa-text-foreground hawa-px-1 ",
-            singleValue: () => "hawa-text-foreground",
+            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.hideIndicator ? "hawa-invisible" : "hawa-px-1",
+              props.disabled && "hawa-opacity-30"
             )
           },
           unstyled: true,
@@ -3399,12 +3412,6 @@ var Select = ({
           components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : {
             Option,
             Menu,
-            // Control: (e) => (
-            //   <div
-            //     className={cn(e.className, "hawa-flex hawa-flex-row")}
-            //     {...e}
-            //   />
-            // ),
             ValueContainer: (e) => /* @__PURE__ */ import_react9.default.createElement(
               "div",
               {
@@ -4823,19 +4830,19 @@ var z5 = __toESM(require("zod"));
 var React25 = __toESM(require("react"));
 var import_input_otp = require("input-otp");
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
 var import_react23 = require("react");
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string9) => string9.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.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
 var import_react22 = require("react");
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
@@ -4848,7 +4855,7 @@ var defaultAttributes = {
   strokeLinejoin: "round"
 };
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
 var Icon = (0, import_react22.forwardRef)(
   ({
     color = "currentColor",
@@ -4880,7 +4887,7 @@ var Icon = (0, import_react22.forwardRef)(
   }
 );
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+// ../../node_modules/.pnpm/lucide-react@0.424.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, {
@@ -4894,7 +4901,7 @@ var createLucideIcon = (iconName, iconNode) => {
   return Component;
 };
 
-// ../../node_modules/.pnpm/lucide-react@0.417.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/dot.js
+// ../../node_modules/.pnpm/lucide-react@0.424.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" }]
 ]);
@@ -4951,12 +4958,19 @@ var PinInput = ({
   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(
+  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 hawa-gap-2" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React25.createElement(
+    PinInputSlot,
+    {
+      key: index,
+      index,
+      className: "hawa-w-full hawa-border"
+    }
+  ))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React25.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React25.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React25.createElement(
     PinInputSlot,
     {
       key: index + firstGroupLength,
       index: index + firstGroupLength,
-      className: "hawa-w-full"
+      className: "hawa-w-full hawa-border"
     }
   )))), /* @__PURE__ */ React25.createElement(HelperText, { helperText: props.helperText }));
 };
@@ -5016,12 +5030,10 @@ var CodeConfirmation = ({
     {
       noValidate: true,
       onSubmit: handleSubmit((e) => {
-        if (props.handleConfirm) {
-          return props.handleConfirm(e);
+        if (props.onConfirm) {
+          return props.onConfirm(e);
         } else {
-          console.log(
-            "Form is submitted but handleConfirm prop is missing"
-          );
+          console.log("Form is submitted but onConfirm prop is missing");
         }
       })
     },
@@ -5049,12 +5061,28 @@ var CodeConfirmation = ({
         className: "clickable-link",
         onClick: () => {
           startResendTimer();
-          props.handleResend();
+          props.onResend();
         }
       },
       ((_i = props.texts) == null ? void 0 : _i.resendCode) || "Click to resend"
     )),
-    /* @__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"))
+    /* @__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,
+      {
+        type: "button",
+        onClick: () => {
+          if (props.onCancel) {
+            return props.onCancel();
+          } else {
+            console.log(
+              "Cancel button clicked but onCancel prop is missing"
+            );
+          }
+        },
+        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"))
   )));
 };
 
@@ -5066,6 +5094,7 @@ var z6 = __toESM(require("zod"));
 
 // elements/radio/Radio.tsx
 var import_react25 = __toESM(require("react"));
+var import_react_tabs = require("@radix-ui/react-tabs");
 
 // elements/popover/Popover.tsx
 var React27 = __toESM(require("react"));
@@ -5209,9 +5238,10 @@ var Radio = (0, import_react25.forwardRef)(
             )
           },
           props.label && /* @__PURE__ */ import_react25.default.createElement(Label, { ...labelProps }, props.label),
-          /* @__PURE__ */ import_react25.default.createElement(
-            "ul",
+          /* @__PURE__ */ import_react25.default.createElement(import_react_tabs.Tabs, null, /* @__PURE__ */ import_react25.default.createElement(
+            import_react_tabs.TabsList,
             {
+              role: "tablist",
               ref: parentRef,
               className: cn(
                 props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
@@ -5237,9 +5267,12 @@ var Radio = (0, import_react25.forwardRef)(
                     asChild: true
                   },
                   /* @__PURE__ */ import_react25.default.createElement(
-                    "li",
+                    import_react_tabs.TabsTrigger,
                     {
-                      "aria-current": "page",
+                      "aria-current": selectedOption === opt.value ? "page" : void 0,
+                      value: opt.value,
+                      role: "tab",
+                      tabIndex: 0,
                       onClick: () => {
                         if (props.disabled || opt.disabled) return;
                         handleChange(opt);
@@ -5255,10 +5288,12 @@ var Radio = (0, import_react25.forwardRef)(
                 ),
                 /* @__PURE__ */ import_react25.default.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
               ) : /* @__PURE__ */ import_react25.default.createElement(
-                "li",
+                import_react_tabs.TabsTrigger,
                 {
                   key: o,
-                  "aria-current": "page",
+                  role: "tab",
+                  tabIndex: 0,
+                  "aria-current": selectedOption === opt.value ? "page" : void 0,
                   onClick: () => {
                     if (props.disabled || opt.disabled) return;
                     handleChange(opt);
@@ -5266,13 +5301,14 @@ var Radio = (0, import_react25.forwardRef)(
                   className: cn(
                     ...radio_option_tabs_styling,
                     selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
-                  )
+                  ),
+                  value: opt.value
                 },
                 opt.icon && opt.icon,
                 opt.label
               );
             })
-          ),
+          )),
           !forceHideHelperText && /* @__PURE__ */ import_react25.default.createElement(HelperText, { helperText: props.helperText })
         );
       case "bordered":
@@ -6105,6 +6141,64 @@ var import_react45 = require("react");
 
 // hooks/useShortcuts.ts
 var import_react46 = require("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);
+      }
+    });
+  };
+}
 
 // hooks/useWindowEvent.ts
 var import_react47 = require("react");
@@ -6286,7 +6380,7 @@ var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
   defaultVariants: { variant: "default", orientation: "horizontal" }
 });
 var TabsContext = React44.createContext({ orientation: "horizontal", variant: "default", scrollable: false });
-var Tabs = React44.forwardRef(
+var Tabs2 = React44.forwardRef(
   ({ className, orientation, scrollable, variant = "default", ...props }, ref) => /* @__PURE__ */ React44.createElement(
     TabsPrimitive.Root,
     {
@@ -6301,7 +6395,7 @@ var Tabs = React44.forwardRef(
     /* @__PURE__ */ React44.createElement(TabsContext.Provider, { value: { orientation, variant, scrollable } }, props.children)
   )
 );
-var TabsList = React44.forwardRef(({ className, classNames, ...props }, ref) => {
+var TabsList2 = React44.forwardRef(({ className, classNames, ...props }, ref) => {
   const { orientation, variant, scrollable } = React44.useContext(TabsContext);
   const { width } = useViewportSize();
   if (scrollable && width < 768 && orientation === "horizontal") {
@@ -6333,7 +6427,7 @@ var TabsList = React44.forwardRef(({ className, classNames, ...props }, ref) =>
     );
   }
 });
-var TabsTrigger = React44.forwardRef(
+var TabsTrigger2 = React44.forwardRef(
   ({ className, chipProps, withPopover = false, onPopoverClick, ...props }, ref) => {
     const { orientation, variant } = React44.useContext(TabsContext);
     if (withPopover) {
@@ -6389,22 +6483,22 @@ var TabsContent = React44.forwardRef(({ className, ...props }, ref) => /* @__PUR
     ...props
   }
 ));
-Tabs.displayName = TabsPrimitive.Root.displayName;
-TabsList.displayName = TabsPrimitive.List.displayName;
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+Tabs2.displayName = TabsPrimitive.Root.displayName;
+TabsList2.displayName = TabsPrimitive.List.displayName;
+TabsTrigger2.displayName = TabsPrimitive.Trigger.displayName;
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // blocks/misc/LegalTexts.tsx
 var LegalTexts = ({ tabs, ...props }) => {
   return /* @__PURE__ */ import_react50.default.createElement(
-    Tabs,
+    Tabs2,
     {
       value: props.activeTab,
       onValueChange: props.handleTabChange,
       defaultValue: props.defaultTab || tabs[0].value,
       dir: props.direction
     },
-    /* @__PURE__ */ import_react50.default.createElement(TabsList, { className: "hawa-w-full" }, tabs.map((tab, index) => /* @__PURE__ */ import_react50.default.createElement(TabsTrigger, { key: index, value: tab.value }, tab.title))),
+    /* @__PURE__ */ import_react50.default.createElement(TabsList2, { className: "hawa-w-full" }, tabs.map((tab, index) => /* @__PURE__ */ import_react50.default.createElement(TabsTrigger2, { key: index, value: tab.value }, tab.title))),
     tabs.map((tab, index) => /* @__PURE__ */ import_react50.default.createElement(TabsContent, { key: index, value: tab.value }, /* @__PURE__ */ import_react50.default.createElement(
       ScrollArea,
       {
@@ -6554,6 +6648,7 @@ var ContactForm = ({
   onSubmit,
   customFields,
   classNames,
+  clearOnSubmit = true,
   ...props
 }) => {
   var _a, _b, _c, _d, _e;
@@ -6597,8 +6692,11 @@ var ContactForm = ({
     control,
     handleSubmit,
     formState: { errors },
-    reset
+    reset,
+    getValues,
+    trigger
   } = (0, import_react_hook_form9.useForm)({
+    mode: "all",
     resolver: (0, import_zod8.zodResolver)(MainSchema),
     defaultValues: {
       name: "",
@@ -6607,10 +6705,16 @@ var ContactForm = ({
       ...customFieldsDefaultValues
     }
   });
-  const handleFormSubmit = (data) => {
+  const SubmitForm = async (data) => {
+    const isValid = await trigger();
+    if (!isValid) {
+      return;
+    }
     if (onSubmit) {
       onSubmit(data);
-      reset();
+      if (clearOnSubmit) {
+        reset();
+      }
     } else {
       console.log("Form is submitted but onSubmit prop is missing");
     }
@@ -6620,7 +6724,8 @@ var ContactForm = ({
     {
       className: cn(
         "hawa-w-full",
-        cardless && "hawa-border-none hawa-bg-transparent hawa-shadow-none hawa-drop-shadow-none"
+        cardless && "hawa-border-none hawa-bg-transparent hawa-shadow-none hawa-drop-shadow-none",
+        classNames == null ? void 0 : classNames.container
       ),
       style: cardless ? { boxShadow: "none" } : void 0
     },
@@ -6628,7 +6733,7 @@ var ContactForm = ({
       "form",
       {
         noValidate: true,
-        onSubmit: handleSubmit(handleFormSubmit),
+        onSubmit: handleSubmit(SubmitForm),
         className: "hawa-space-y-2",
         id: formId,
         autoComplete: formAutoComplete
@@ -6739,7 +6844,10 @@ var ContactForm = ({
                 textareaProps: {
                   placeholder: texts == null ? void 0 : texts.message.placeholder,
                   className: "hawa-min-h-20",
-                  ...field
+                  ...field,
+                  onKeyDown: getHotkeyHandler([
+                    ["mod+enter", () => SubmitForm(getValues())]
+                  ])
                 },
                 classNames: { textarea: "hawa-min-h-40 hawa-h-full" },
                 helperText: (_a2 = errors.message) == null ? void 0 : _a2.message
@@ -7946,7 +8054,7 @@ var Usage = (props) => {
 
 lucide-react/dist/esm/shared/src/utils.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -7954,7 +8062,7 @@ lucide-react/dist/esm/shared/src/utils.js:
 
 lucide-react/dist/esm/defaultAttributes.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -7962,7 +8070,7 @@ lucide-react/dist/esm/defaultAttributes.js:
 
 lucide-react/dist/esm/Icon.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -7970,7 +8078,7 @@ lucide-react/dist/esm/Icon.js:
 
 lucide-react/dist/esm/createLucideIcon.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -7978,7 +8086,7 @@ lucide-react/dist/esm/createLucideIcon.js:
 
 lucide-react/dist/esm/icons/dot.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
@@ -7986,7 +8094,7 @@ lucide-react/dist/esm/icons/dot.js:
 
 lucide-react/dist/esm/lucide-react.js:
   (**
-   * @license lucide-react v0.417.0 - ISC
+   * @license lucide-react v0.424.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/index.mjs

@@ -17,8 +17,10 @@ import {
   TabsList,
   TabsTrigger,
   Textarea
-} from "../chunk-VVUNGE7V.mjs";
-import "../chunk-WL7C2A5D.mjs";
+} from "../chunk-QMNXTGM4.mjs";
+import {
+  getHotkeyHandler
+} from "../chunk-WL7C2A5D.mjs";
 import {
   BadEmoji,
   Button,
@@ -1179,12 +1181,10 @@ var CodeConfirmation = ({
     {
       noValidate: true,
       onSubmit: handleSubmit((e) => {
-        if (props.handleConfirm) {
-          return props.handleConfirm(e);
+        if (props.onConfirm) {
+          return props.onConfirm(e);
         } else {
-          console.log(
-            "Form is submitted but handleConfirm prop is missing"
-          );
+          console.log("Form is submitted but onConfirm prop is missing");
         }
       })
     },
@@ -1212,12 +1212,28 @@ var CodeConfirmation = ({
         className: "clickable-link",
         onClick: () => {
           startResendTimer();
-          props.handleResend();
+          props.onResend();
         }
       },
       ((_i = props.texts) == null ? void 0 : _i.resendCode) || "Click to resend"
     )),
-    /* @__PURE__ */ React8.createElement("div", { className: "hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2" }, /* @__PURE__ */ React8.createElement(Button, { variant: "outline" }, ((_j = props.texts) == null ? void 0 : _j.cancel) || "Cancel"), /* @__PURE__ */ React8.createElement(Button, { isLoading: props.confirmLoading }, ((_k = props.texts) == null ? void 0 : _k.confirm) || "Confirm"))
+    /* @__PURE__ */ React8.createElement("div", { className: "hawa-mt-4 hawa-grid hawa-grid-cols-2 hawa-gap-2" }, /* @__PURE__ */ React8.createElement(
+      Button,
+      {
+        type: "button",
+        onClick: () => {
+          if (props.onCancel) {
+            return props.onCancel();
+          } else {
+            console.log(
+              "Cancel button clicked but onCancel prop is missing"
+            );
+          }
+        },
+        variant: "outline"
+      },
+      ((_j = props.texts) == null ? void 0 : _j.cancel) || "Cancel"
+    ), /* @__PURE__ */ React8.createElement(Button, { isLoading: props.confirmLoading }, ((_k = props.texts) == null ? void 0 : _k.confirm) || "Confirm"))
   )));
 };
 
@@ -1860,6 +1876,7 @@ var ContactForm = ({
   onSubmit,
   customFields,
   classNames,
+  clearOnSubmit = true,
   ...props
 }) => {
   var _a, _b, _c, _d, _e;
@@ -1903,8 +1920,11 @@ var ContactForm = ({
     control,
     handleSubmit,
     formState: { errors },
-    reset
+    reset,
+    getValues,
+    trigger
   } = useForm9({
+    mode: "all",
     resolver: zodResolver8(MainSchema),
     defaultValues: {
       name: "",
@@ -1913,10 +1933,16 @@ var ContactForm = ({
       ...customFieldsDefaultValues
     }
   });
-  const handleFormSubmit = (data) => {
+  const SubmitForm = async (data) => {
+    const isValid = await trigger();
+    if (!isValid) {
+      return;
+    }
     if (onSubmit) {
       onSubmit(data);
-      reset();
+      if (clearOnSubmit) {
+        reset();
+      }
     } else {
       console.log("Form is submitted but onSubmit prop is missing");
     }
@@ -1926,7 +1952,8 @@ var ContactForm = ({
     {
       className: cn(
         "hawa-w-full",
-        cardless && "hawa-border-none hawa-bg-transparent hawa-shadow-none hawa-drop-shadow-none"
+        cardless && "hawa-border-none hawa-bg-transparent hawa-shadow-none hawa-drop-shadow-none",
+        classNames == null ? void 0 : classNames.container
       ),
       style: cardless ? { boxShadow: "none" } : void 0
     },
@@ -1934,7 +1961,7 @@ var ContactForm = ({
       "form",
       {
         noValidate: true,
-        onSubmit: handleSubmit(handleFormSubmit),
+        onSubmit: handleSubmit(SubmitForm),
         className: "hawa-space-y-2",
         id: formId,
         autoComplete: formAutoComplete
@@ -2045,7 +2072,10 @@ var ContactForm = ({
                 textareaProps: {
                   placeholder: texts == null ? void 0 : texts.message.placeholder,
                   className: "hawa-min-h-20",
-                  ...field
+                  ...field,
+                  onKeyDown: getHotkeyHandler([
+                    ["mod+enter", () => SubmitForm(getValues())]
+                  ])
                 },
                 classNames: { textarea: "hawa-min-h-40 hawa-h-full" },
                 helperText: (_a2 = errors.message) == null ? void 0 : _a2.message

package/dist/blocks/misc/index.d.mts

@@ -85,12 +85,14 @@ type ContactFormProps = {
     cardless?: boolean;
     formId?: string;
     formAutoComplete?: "on" | "off";
+    clearOnSubmit?: boolean;
     size?: "sm" | "default";
     onSubmit: (e: ContactFormData) => void;
     customFields?: CustomField[];
     showSuccess?: boolean;
     classNames?: {
         submitButton?: string;
+        container?: string;
     };
     texts?: {
         submit: string;

package/dist/blocks/misc/index.d.ts

@@ -85,12 +85,14 @@ type ContactFormProps = {
     cardless?: boolean;
     formId?: string;
     formAutoComplete?: "on" | "off";
+    clearOnSubmit?: boolean;
     size?: "sm" | "default";
     onSubmit: (e: ContactFormData) => void;
     customFields?: CustomField[];
     showSuccess?: boolean;
     classNames?: {
         submitButton?: string;
+        container?: string;
     };
     texts?: {
         submit: string;