@sikka/hawa 0.37.2-next → 0.38.1-next

package/dist/{chunk-QYWOI3DO.mjs → chunk-UDJFVH2I.mjs}

@@ -5,10 +5,11 @@ import {
 import {
   Button,
   Chip,
+  HelperText,
   Label,
   Skeleton,
   cn
-} from "./chunk-RNFJAEEU.mjs";
+} from "./chunk-V7O5MQZQ.mjs";
 
 // elements/alert/Alert.tsx
 import React, { useRef, useState, useEffect } from "react";
@@ -288,16 +289,7 @@ var Input = forwardRef(
             inputProps == null ? void 0 : inputProps.className
           )
         }
-      )), !forceHideHelperText && /* @__PURE__ */ React2.createElement(
-        "p",
-        {
-          className: cn(
-            "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-            props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-          )
-        },
-        props.helperText
-      ), !props.disabled && forceHideHelperText && /* @__PURE__ */ React2.createElement(
+      )), !forceHideHelperText && /* @__PURE__ */ React2.createElement(HelperText, { helperText: props.helperText }), !props.disabled && forceHideHelperText && /* @__PURE__ */ React2.createElement(
         "div",
         {
           className: cn(
@@ -497,16 +489,7 @@ var Select = ({
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    !props.hideHelperText && /* @__PURE__ */ React3.createElement(
-      "p",
-      {
-        className: cn(
-          "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-          props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-        )
-      },
-      props.helperText
-    )
+    !props.hideHelperText && /* @__PURE__ */ React3.createElement(HelperText, { helperText: props.helperText })
   );
 };
 
@@ -2259,16 +2242,7 @@ var PhoneInput = ({
       ),
       ...inputProps
     }
-  ))), /* @__PURE__ */ React4.createElement(
-    "p",
-    {
-      className: cn(
-        "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-        props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-      )
-    },
-    props.helperText
-  ));
+  ))), /* @__PURE__ */ React4.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/checkbox/Checkbox.tsx
@@ -2417,86 +2391,145 @@ var StopPropagationWrapper = (props) => {
 };
 
 // elements/pinInput/PinInput.tsx
-import React7, { useEffect as useEffect3, useState as useState3 } from "react";
-var PinInput = ({
-  label,
-  icon,
-  digits,
-  width = "normal",
-  getPins,
-  inputProps,
-  ...props
-}) => {
-  const [pin, setPin] = useState3(Array.from(Array(digits)));
-  const handleKeyDown = (e, index) => {
-    let backTo = 0;
-    if (e.key === "Backspace") {
-      e.target.value.length === 0 ? backTo = index - 1 : backTo = index;
-      const previousInput = document.getElementById(`input-${backTo}`);
-      previousInput == null ? void 0 : previousInput.focus();
-    }
-  };
-  useEffect3(() => {
-    let unfilled = pin.includes(void 0);
-    if (!unfilled && getPins) {
-      getPins(pin);
-    }
-  });
-  const handleChange = (e, index) => {
-    if (!/^\d*$/.test(e.target.value)) {
-      const newPin = [...pin];
-      newPin[index] = "";
-      setPin(newPin);
-      return;
-    } else {
-      const newPin = [...pin];
-      newPin[index] = e.target.value;
-      setPin(newPin);
-      if (e.target.value.length === 1) {
-        const nextInput = document.getElementById(`input-${index + 1}`);
-        nextInput == null ? void 0 : nextInput.focus();
-      } else if (e.target.value.length === 0) {
-        const previousInput = document.getElementById(`input-${index - 1}`);
-        previousInput == null ? void 0 : previousInput.focus();
-      }
-    }
-  };
-  return /* @__PURE__ */ React7.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React7.createElement(
-    "div",
-    {
-      className: "hawa-flex hawa-w-full hawa-flex-row hawa-justify-center hawa-gap-2",
-      dir: "ltr"
-    },
-    pin.map((value, index) => /* @__PURE__ */ React7.createElement(
-      "input",
+import * as React7 from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+import { forwardRef as forwardRef4, createElement as createElement3 } from "react";
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && array.indexOf(className) === index;
+}).join(" ");
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+import { forwardRef as forwardRef3, createElement as createElement2 } from "react";
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+var Icon = forwardRef3(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => {
+    return createElement2(
+      "svg",
       {
-        key: index,
-        type: "text",
-        maxLength: 1,
-        value,
-        inputMode: "numeric",
-        id: `input-${index}`,
-        pattern: "[0-9]*",
-        className: cn(
-          "hawa-h-10 hawa-rounded hawa-border hawa-bg-background hawa-text-center placeholder:hawa-text-muted-foreground",
-          width === "full" ? "hawa-w-full" : "hawa-w-10"
-        ),
-        onChange: (e) => handleChange(e, index),
-        onKeyDown: (e) => handleKeyDown(e, index),
-        onFocus: (e) => e.target.select(),
-        ...inputProps
-      }
-    ))
-  ), /* @__PURE__ */ React7.createElement(
-    "p",
+        ref,
+        ...defaultAttributes,
+        width: size,
+        height: size,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        className: mergeClasses("lucide", className),
+        ...rest
+      },
+      [
+        ...iconNode.map(([tag, attrs]) => createElement2(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
+  }
+);
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef4(
+    ({ className, ...props }, ref) => createElement3(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+      ...props
+    })
+  );
+  Component.displayName = `${iconName}`;
+  return Component;
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.379.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/dot.js
+var Dot = createLucideIcon("Dot", [
+  ["circle", { cx: "12.1", cy: "12.1", r: "1", key: "18d7e5" }]
+]);
+
+// elements/pinInput/PinInput.tsx
+var PinInputRoot = React7.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React7.createElement(
+  OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "hawa-flex hawa-items-center hawa-gap-2 has-[:disabled]:hawa-opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:hawa-cursor-not-allowed", className),
+    ...props
+  }
+));
+PinInputRoot.displayName = "PinInputRoot";
+var PinInputGroup = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React7.createElement(
+  "div",
+  {
+    ref,
+    className: cn("hawa-flex hawa-items-center", className),
+    ...props
+  }
+));
+PinInputGroup.displayName = "PinInputGroup";
+var PinInputSlot = React7.forwardRef(({ index, className, ...props }, ref) => {
+  const pinInputContext = React7.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = pinInputContext.slots[index];
+  return /* @__PURE__ */ React7.createElement(
+    "div",
     {
+      ref,
       className: cn(
-        "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-        props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-      )
+        "hawa-border-input hawa-relative hawa-flex hawa-h-10 hawa-w-10 hawa-items-center hawa-justify-center hawa-border-y hawa-border-r hawa-text-sm hawa-transition-all first:hawa-rounded-l-md first:hawa-border-l last:hawa-rounded-r-md",
+        isActive && "hawa-ring-ring hawa-ring-offset-background hawa-z-10 hawa-ring-2",
+        className
+      ),
+      ...props
     },
-    props.helperText
-  ));
+    char,
+    hasFakeCaret && /* @__PURE__ */ React7.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-inset-0 hawa-flex hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React7.createElement("div", { className: "hawa-animate-caret-blink hawa-bg-foreground hawa-h-4 hawa-w-px hawa-duration-1000" }))
+  );
+});
+PinInputSlot.displayName = "PinInputSlot";
+var PinInputSeperator = React7.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React7.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React7.createElement(Dot, null)));
+PinInputSeperator.displayName = "PinInputSeperator";
+var PinInput = ({
+  separatorPosition = 0,
+  ...props
+}) => {
+  const maxLength = props.maxLength || 6;
+  const clampedSeparatorPosition = Math.min(separatorPosition, maxLength);
+  const firstGroupLength = clampedSeparatorPosition > 0 ? clampedSeparatorPosition : 0;
+  const secondGroupLength = maxLength - firstGroupLength;
+  return /* @__PURE__ */ React7.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React7.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React7.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React7.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React7.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React7.createElement(PinInputGroup, { className: "hawa-w-full" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React7.createElement(
+    PinInputSlot,
+    {
+      key: index + firstGroupLength,
+      index: index + firstGroupLength,
+      className: "hawa-w-full"
+    }
+  )))), /* @__PURE__ */ React7.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/popover/Popover.tsx
@@ -2566,8 +2599,8 @@ var PopoverPortal = PopoverPrimitive.Portal;
 var PopoverRoot = PopoverPrimitive.Root;
 
 // elements/radio/Radio.tsx
-import React9, { useState as useState4, useRef as useRef3, useEffect as useEffect4, forwardRef as forwardRef4 } from "react";
-var Radio = forwardRef4(
+import React9, { useState as useState3, useRef as useRef3, useEffect as useEffect3, forwardRef as forwardRef7 } from "react";
+var Radio = forwardRef7(
   ({
     design = "default",
     width = "default",
@@ -2602,12 +2635,12 @@ var Radio = forwardRef4(
     const [parentDirection, setParentDirection] = React9.useState(
       null
     );
-    const [selectedOption, setSelectedOption] = useState4(
+    const [selectedOption, setSelectedOption] = useState3(
       props.defaultValue || props.value
     );
-    const [openTooltip, setOpenTooltip] = useState4(null);
+    const [openTooltip, setOpenTooltip] = useState3(null);
     const parentRef = useRef3(null);
-    useEffect4(() => {
+    useEffect3(() => {
       var _a2;
       const parentNode = (_a2 = parentRef.current) == null ? void 0 : _a2.parentNode;
       if (parentNode) {
@@ -2698,16 +2731,7 @@ var Radio = forwardRef4(
               opt.label
             );
           })
-        ), !forceHideHelperText && /* @__PURE__ */ React9.createElement(
-          "p",
-          {
-            className: cn(
-              "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-              props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-            )
-          },
-          props.helperText
-        ));
+        ), !forceHideHelperText && /* @__PURE__ */ React9.createElement(HelperText, { helperText: props.helperText }));
       case "bordered":
         return /* @__PURE__ */ React9.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React9.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ React9.createElement(
           "div",
@@ -2796,16 +2820,7 @@ var Radio = forwardRef4(
             },
             opt.label
           )
-        ))), /* @__PURE__ */ React9.createElement(
-          "p",
-          {
-            className: cn(
-              "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-              props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-            )
-          },
-          props.helperText
-        ));
+        ))), /* @__PURE__ */ React9.createElement(HelperText, { helperText: props.helperText }));
     }
   }
 );
@@ -2853,16 +2868,7 @@ var Textarea = React10.forwardRef(
           ref
         }
       ),
-      /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React10.createElement(
-        "p",
-        {
-          className: cn(
-            "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-            props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-          )
-        },
-        props.helperText
-      ), showCount && countPosition === "bottom" && /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
+      /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React10.createElement(HelperText, { helperText: props.helperText }), showCount && countPosition === "bottom" && /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
     );
   }
 );
@@ -2938,7 +2944,7 @@ var ScrollArea = React11.forwardRef(({ className, children, orientation = "verti
       "div",
       {
         className: cn(
-          "hawa-pointer-events-none hawa-absolute hawa-bg-background/  hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0  hawa-mask-fade-right",
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background  hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0  hawa-mask-fade-right",
           showLeftFade ? "hawa-block" : "hawa-hidden"
         )
       }
@@ -2947,7 +2953,7 @@ var ScrollArea = React11.forwardRef(({ className, children, orientation = "verti
       "div",
       {
         className: cn(
-          "hawa-pointer-events-none hawa-absolute hawa-bg-background/ hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10 ",
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10 ",
           showRightFade ? "hawa-block" : "hawa-hidden"
         )
       }
@@ -3264,6 +3270,10 @@ export {
   PhoneInput,
   Checkbox,
   StopPropagationWrapper,
+  PinInputRoot,
+  PinInputGroup,
+  PinInputSlot,
+  PinInputSeperator,
   PinInput,
   PopoverContent,
   Popover,
@@ -3281,3 +3291,53 @@ export {
   Separator,
   Progress
 };
+/*! Bundled license information:
+
+lucide-react/dist/esm/shared/src/utils.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/defaultAttributes.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/Icon.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/createLucideIcon.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/dot.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/lucide-react.js:
+  (**
+   * @license lucide-react v0.379.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+*/

package/dist/{chunk-BPHQFAWM.mjs → chunk-UJ5SXC3M.mjs}

@@ -1,9 +1,10 @@
 "use client";
 import {
+  HelperText,
   Label,
   Skeleton,
   cn
-} from "./chunk-PXGL7ZXQ.mjs";
+} from "./chunk-UMOBOCED.mjs";
 
 // elements/textarea/Textarea.tsx
 import * as React from "react";
@@ -48,16 +49,7 @@ var Textarea = React.forwardRef(
           ref
         }
       ),
-      /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React.createElement(
-        "p",
-        {
-          className: cn(
-            "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-            props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-          )
-        },
-        props.helperText
-      ), showCount && countPosition === "bottom" && /* @__PURE__ */ React.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
+      /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React.createElement(HelperText, { helperText: props.helperText }), showCount && countPosition === "bottom" && /* @__PURE__ */ React.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
     );
   }
 );

package/dist/{chunk-PXGL7ZXQ.mjs → chunk-UMOBOCED.mjs}

@@ -399,30 +399,54 @@ var Button = React5.forwardRef(
     children,
     labelProps,
     showHelperText = false,
+    inForm = false,
     ...props
   }, ref) => {
     const Comp = "button";
     const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "hawa-bg-primary" : "hawa-bg-primary-foreground";
-    return /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, label && /* @__PURE__ */ React5.createElement(Label, { ...labelProps }, label), /* @__PURE__ */ React5.createElement(
-      Comp,
-      {
-        className: cn(
-          buttonVariants({ variant, size, className }),
-          centered && "hawa-justify-center"
-        ),
-        ref,
-        ...props
-      },
-      isLoading ? /* @__PURE__ */ React5.createElement(
-        Loading,
+    if (inForm) {
+      return /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, label && /* @__PURE__ */ React5.createElement(Label, { ...labelProps }, label), /* @__PURE__ */ React5.createElement(
+        Comp,
         {
-          design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
-          themeMode: variant === "outline" ? "light" : "dark",
-          color: loadingColor,
-          size: size === "sm" || size === "xs" ? "xs" : "button"
-        }
-      ) : children
-    ), showHelperText && /* @__PURE__ */ React5.createElement(HelperText, { helperText: props.helperText }));
+          className: cn(
+            buttonVariants({ variant, size, className }),
+            centered && "hawa-justify-center"
+          ),
+          ref,
+          ...props
+        },
+        isLoading ? /* @__PURE__ */ React5.createElement(
+          Loading,
+          {
+            design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
+            themeMode: variant === "outline" ? "light" : "dark",
+            color: loadingColor,
+            size: size === "sm" || size === "xs" ? "xs" : "button"
+          }
+        ) : children
+      ), showHelperText && /* @__PURE__ */ React5.createElement(HelperText, { helperText: props.helperText }));
+    } else {
+      return /* @__PURE__ */ React5.createElement(
+        Comp,
+        {
+          className: cn(
+            buttonVariants({ variant, size, className }),
+            centered && "hawa-justify-center"
+          ),
+          ref,
+          ...props
+        },
+        isLoading ? /* @__PURE__ */ React5.createElement(
+          Loading,
+          {
+            design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
+            themeMode: variant === "outline" ? "light" : "dark",
+            color: loadingColor,
+            size: size === "sm" || size === "xs" ? "xs" : "button"
+          }
+        ) : children
+      );
+    }
   }
 );
 Button.displayName = "Button";
@@ -557,6 +581,7 @@ function Skeleton({
 
 export {
   cn,
+  HelperText,
   Tooltip,
   Label,
   Loading,

package/dist/{chunk-RNFJAEEU.mjs → chunk-V7O5MQZQ.mjs}

@@ -420,30 +420,54 @@ var Button = React5.forwardRef(
     children,
     labelProps,
     showHelperText = false,
+    inForm = false,
     ...props
   }, ref) => {
     const Comp = "button";
     const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "hawa-bg-primary" : "hawa-bg-primary-foreground";
-    return /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, label && /* @__PURE__ */ React5.createElement(Label, { ...labelProps }, label), /* @__PURE__ */ React5.createElement(
-      Comp,
-      {
-        className: cn(
-          buttonVariants({ variant, size, className }),
-          centered && "hawa-justify-center"
-        ),
-        ref,
-        ...props
-      },
-      isLoading ? /* @__PURE__ */ React5.createElement(
-        Loading,
+    if (inForm) {
+      return /* @__PURE__ */ React5.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, label && /* @__PURE__ */ React5.createElement(Label, { ...labelProps }, label), /* @__PURE__ */ React5.createElement(
+        Comp,
         {
-          design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
-          themeMode: variant === "outline" ? "light" : "dark",
-          color: loadingColor,
-          size: size === "sm" || size === "xs" ? "xs" : "button"
-        }
-      ) : children
-    ), showHelperText && /* @__PURE__ */ React5.createElement(HelperText, { helperText: props.helperText }));
+          className: cn(
+            buttonVariants({ variant, size, className }),
+            centered && "hawa-justify-center"
+          ),
+          ref,
+          ...props
+        },
+        isLoading ? /* @__PURE__ */ React5.createElement(
+          Loading,
+          {
+            design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
+            themeMode: variant === "outline" ? "light" : "dark",
+            color: loadingColor,
+            size: size === "sm" || size === "xs" ? "xs" : "button"
+          }
+        ) : children
+      ), showHelperText && /* @__PURE__ */ React5.createElement(HelperText, { helperText: props.helperText }));
+    } else {
+      return /* @__PURE__ */ React5.createElement(
+        Comp,
+        {
+          className: cn(
+            buttonVariants({ variant, size, className }),
+            centered && "hawa-justify-center"
+          ),
+          ref,
+          ...props
+        },
+        isLoading ? /* @__PURE__ */ React5.createElement(
+          Loading,
+          {
+            design: size === "icon" || size === "smallIcon" ? "spinner" : "dots-pulse",
+            themeMode: variant === "outline" ? "light" : "dark",
+            color: loadingColor,
+            size: size === "sm" || size === "xs" ? "xs" : "button"
+          }
+        ) : children
+      );
+    }
   }
 );
 Button.displayName = "Button";
@@ -1601,6 +1625,7 @@ var MenuIcon = () => /* @__PURE__ */ React13.createElement(
 export {
   cn,
   calculateLuminance,
+  HelperText,
   Tooltip,
   Label,
   Loading,