@sikka/hawa 0.43.6-next → 0.45.0-next

package/dist/blocks/misc/index.js

@@ -232,6 +232,64 @@ var import_react16 = require("react");
 
 // hooks/useShortcuts.ts
 var import_react17 = 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_react18 = require("react");
@@ -1445,13 +1503,21 @@ var Select = ({
       children
     );
   };
-  const Option = ({ children, innerProps, innerRef }) => {
+  const Option = ({
+    children,
+    innerProps,
+    innerRef,
+    isFocused,
+    isSelected
+  }) => {
     return /* @__PURE__ */ import_react33.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
       },
@@ -1508,15 +1574,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,
@@ -1524,12 +1595,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_react33.default.createElement(
               "div",
               {
@@ -1652,6 +1717,7 @@ var ContactForm = ({
   onSubmit,
   customFields,
   classNames,
+  clearOnSubmit = true,
   ...props
 }) => {
   var _a, _b, _c, _d, _e;
@@ -1695,8 +1761,11 @@ var ContactForm = ({
     control,
     handleSubmit,
     formState: { errors },
-    reset
+    reset,
+    getValues,
+    trigger
   } = (0, import_react_hook_form2.useForm)({
+    mode: "all",
     resolver: (0, import_zod.zodResolver)(MainSchema),
     defaultValues: {
       name: "",
@@ -1705,10 +1774,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");
     }
@@ -1718,7 +1793,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
     },
@@ -1726,7 +1802,7 @@ var ContactForm = ({
       "form",
       {
         noValidate: true,
-        onSubmit: handleSubmit(handleFormSubmit),
+        onSubmit: handleSubmit(SubmitForm),
         className: "hawa-space-y-2",
         id: formId,
         autoComplete: formAutoComplete
@@ -1837,7 +1913,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.mjs

@@ -11,7 +11,7 @@ import {
 } from "../../chunk-FIUKVRL5.mjs";
 import {
   Select
-} from "../../chunk-DYYINLRJ.mjs";
+} from "../../chunk-LMYT23CT.mjs";
 import {
   Button,
   Card,
@@ -84,6 +84,64 @@ import { useEffect as useEffect14, useRef as useRef8 } from "react";
 
 // hooks/useShortcuts.ts
 import { useEffect as useEffect15 } 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);
+      }
+    });
+  };
+}
 
 // hooks/useWindowEvent.ts
 import { useEffect as useEffect16 } from "react";
@@ -447,6 +505,7 @@ var ContactForm = ({
   onSubmit,
   customFields,
   classNames,
+  clearOnSubmit = true,
   ...props
 }) => {
   var _a, _b, _c, _d, _e;
@@ -490,8 +549,11 @@ var ContactForm = ({
     control,
     handleSubmit,
     formState: { errors },
-    reset
+    reset,
+    getValues,
+    trigger
   } = useForm2({
+    mode: "all",
     resolver: zodResolver(MainSchema),
     defaultValues: {
       name: "",
@@ -500,10 +562,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");
     }
@@ -513,7 +581,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
     },
@@ -521,7 +590,7 @@ var ContactForm = ({
       "form",
       {
         noValidate: true,
-        onSubmit: handleSubmit(handleFormSubmit),
+        onSubmit: handleSubmit(SubmitForm),
         className: "hawa-space-y-2",
         id: formId,
         autoComplete: formAutoComplete
@@ -632,7 +701,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/pricing/index.js

@@ -1048,6 +1048,7 @@ var import_react12 = __toESM(require("react"));
 
 // elements/radio/Radio.tsx
 var import_react13 = __toESM(require("react"));
+var import_react_tabs = require("@radix-ui/react-tabs");
 
 // elements/popover/Popover.tsx
 var React17 = __toESM(require("react"));
@@ -1148,9 +1149,10 @@ var Radio = (0, import_react13.forwardRef)(
             )
           },
           props.label && /* @__PURE__ */ import_react13.default.createElement(Label, { ...labelProps }, props.label),
-          /* @__PURE__ */ import_react13.default.createElement(
-            "ul",
+          /* @__PURE__ */ import_react13.default.createElement(import_react_tabs.Tabs, null, /* @__PURE__ */ import_react13.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" : "",
@@ -1176,9 +1178,12 @@ var Radio = (0, import_react13.forwardRef)(
                     asChild: true
                   },
                   /* @__PURE__ */ import_react13.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);
@@ -1194,10 +1199,12 @@ var Radio = (0, import_react13.forwardRef)(
                 ),
                 /* @__PURE__ */ import_react13.default.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
               ) : /* @__PURE__ */ import_react13.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);
@@ -1205,13 +1212,14 @@ var Radio = (0, import_react13.forwardRef)(
                   className: cn(
                     ...radio_option_tabs_styling,
                     selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
-                  )
+                  ),
+                  value: opt.value
                 },
                 opt.icon && opt.icon,
                 opt.label
               );
             })
-          ),
+          )),
           !forceHideHelperText && /* @__PURE__ */ import_react13.default.createElement(HelperText, { helperText: props.helperText })
         );
       case "bordered":

package/dist/blocks/pricing/index.mjs

@@ -6,7 +6,7 @@ import {
 import "../../chunk-47APBDKK.mjs";
 import {
   Radio
-} from "../../chunk-A6PONMZ6.mjs";
+} from "../../chunk-OE6XZ6LW.mjs";
 import {
   CheckMark,
   UncheckMark

package/dist/{chunk-DYYINLRJ.mjs → chunk-LMYT23CT.mjs}

@@ -33,13 +33,21 @@ var Select = ({
       children
     );
   };
-  const Option = ({ children, innerProps, innerRef }) => {
+  const Option = ({
+    children,
+    innerProps,
+    innerRef,
+    isFocused,
+    isSelected
+  }) => {
     return /* @__PURE__ */ React.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
       },
@@ -96,15 +104,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,
@@ -112,12 +125,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__ */ React.createElement(
               "div",
               {

package/dist/{chunk-A6PONMZ6.mjs → chunk-OE6XZ6LW.mjs}

@@ -72,6 +72,7 @@ var PopoverRoot = PopoverPrimitive.Root;
 
 // elements/radio/Radio.tsx
 import React2, { useState, useRef, useEffect, forwardRef as forwardRef2 } from "react";
+import { TabsList, TabsTrigger, Tabs } from "@radix-ui/react-tabs";
 var Radio = forwardRef2(
   ({
     design = "default",
@@ -148,9 +149,10 @@ var Radio = forwardRef2(
             )
           },
           props.label && /* @__PURE__ */ React2.createElement(Label, { ...labelProps }, props.label),
-          /* @__PURE__ */ React2.createElement(
-            "ul",
+          /* @__PURE__ */ React2.createElement(Tabs, null, /* @__PURE__ */ React2.createElement(
+            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" : "",
@@ -176,9 +178,12 @@ var Radio = forwardRef2(
                     asChild: true
                   },
                   /* @__PURE__ */ React2.createElement(
-                    "li",
+                    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);
@@ -194,10 +199,12 @@ var Radio = forwardRef2(
                 ),
                 /* @__PURE__ */ React2.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
               ) : /* @__PURE__ */ React2.createElement(
-                "li",
+                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);
@@ -205,13 +212,14 @@ var Radio = forwardRef2(
                   className: cn(
                     ...radio_option_tabs_styling,
                     selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
-                  )
+                  ),
+                  value: opt.value
                 },
                 opt.icon && opt.icon,
                 opt.label
               );
             })
-          ),
+          )),
           !forceHideHelperText && /* @__PURE__ */ React2.createElement(HelperText, { helperText: props.helperText })
         );
       case "bordered":