@sikka/hawa 0.13.16-next → 0.13.17-next

package/dist/index.css

@@ -890,6 +890,9 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.-hawa-mt-4 {
+  margin-top: -1rem;
+}
 .hawa--mt-1 {
   margin-top: -0.25rem;
 }
@@ -2417,10 +2420,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
-.hawa-text-blue-700 {
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-}
 .hawa-text-card-foreground {
   color: hsl(var(--card-foreground));
 }
@@ -2469,10 +2468,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity));
 }
-.hawa-text-green-700 {
-  --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity));
-}
 .hawa-text-helper-color {
   color: hsl(var(--helper-text));
 }
@@ -2524,10 +2519,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
-.hawa-text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
 .hawa-text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
@@ -2547,10 +2538,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(202 138 4 / var(--tw-text-opacity));
 }
-.hawa-text-yellow-700 {
-  --tw-text-opacity: 1;
-  color: rgb(161 98 7 / var(--tw-text-opacity));
-}
 .hawa-underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -2870,10 +2857,6 @@ body {
 .hover\:hawa-bg-accent:hover {
   background-color: hsl(var(--accent));
 }
-.hover\:hawa-bg-blue-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
-}
 .hover\:hawa-bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }
@@ -2889,10 +2872,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
-.hover\:hawa-bg-green-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
-}
 .hover\:hawa-bg-muted:hover {
   background-color: hsl(var(--muted));
 }
@@ -2914,20 +2893,12 @@ body {
 .hover\:hawa-bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
-.hover\:hawa-bg-red-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
-}
 .hover\:hawa-bg-secondary:hover {
   background-color: hsl(var(--secondary));
 }
 .hover\:hawa-bg-secondary\/80:hover {
   background-color: hsl(var(--secondary) / 0.8);
 }
-.hover\:hawa-bg-yellow-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
-}
 .hover\:hawa-text-accent-foreground:hover {
   color: hsl(var(--accent-foreground));
 }
@@ -3509,10 +3480,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
-:is(.hawa-dark .dark\:hawa-bg-blue-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
 :is(.hawa-dark .dark\:hawa-bg-blue-400) {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
@@ -3521,10 +3488,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(34 211 238 / var(--tw-bg-opacity));
 }
-:is(.hawa-dark .dark\:hawa-bg-gray-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
 :is(.hawa-dark .dark\:hawa-bg-gray-600) {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -3541,10 +3504,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
-:is(.hawa-dark .dark\:hawa-bg-green-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-}
 :is(.hawa-dark .dark\:hawa-bg-green-400) {
   --tw-bg-opacity: 1;
   background-color: rgb(74 222 128 / var(--tw-bg-opacity));
@@ -3572,18 +3531,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(192 132 252 / var(--tw-bg-opacity));
 }
-:is(.hawa-dark .dark\:hawa-bg-red-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
-}
 :is(.hawa-dark .dark\:hawa-bg-red-400) {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
-:is(.hawa-dark .dark\:hawa-bg-yellow-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
-}
 :is(.hawa-dark .dark\:hawa-bg-yellow-400) {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
@@ -3592,10 +3543,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(219 234 254 / var(--tw-text-opacity));
 }
-:is(.hawa-dark .dark\:hawa-text-blue-800) {
-  --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
-}
 :is(.hawa-dark .dark\:hawa-text-cyan-800) {
   --tw-text-opacity: 1;
   color: rgb(21 94 117 / var(--tw-text-opacity));
@@ -3612,10 +3559,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-:is(.hawa-dark .dark\:hawa-text-gray-800) {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
 :is(.hawa-dark .dark\:hawa-text-green-800) {
   --tw-text-opacity: 1;
   color: rgb(22 101 52 / var(--tw-text-opacity));
@@ -3635,10 +3578,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(254 226 226 / var(--tw-text-opacity));
 }
-:is(.hawa-dark .dark\:hawa-text-red-800) {
-  --tw-text-opacity: 1;
-  color: rgb(153 27 27 / var(--tw-text-opacity));
-}
 :is(.hawa-dark .dark\:hawa-text-white) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

package/dist/index.js

@@ -2406,8 +2406,8 @@ var Radio = function(_param) {
                     htmlFor: opt.value.toString(),
                     className: cn("hawa-text-sm hawa-font-medium  dark:hawa-text-white", opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900")
                 }, opt.label));
-            })), props.helperText && /* @__PURE__ */ import_react13.default.createElement("p", {
-                className: "hawa-text-xs hawa-text-helper-color"
+            })), /* @__PURE__ */ import_react13.default.createElement("p", {
+                className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
             }, props.helperText));
     }
 };
@@ -2534,6 +2534,8 @@ var Alert = function(_param) {
     return /* @__PURE__ */ import_react16.default.createElement("div", {
         ref: alertRef
     }, /* @__PURE__ */ import_react16.default.createElement("div", {
+        "data-testid": "alert",
+        "aria-label": "Alert",
         role: "alert",
         dir: direction,
         className: (0, import_clsx6.default)("hawa-relative hawa-mb-4 hawa-flex hawa-flex-col hawa-rounded hawa-p-4 hawa-text-sm hawa-transition-all", styleVariant[severity], closed ? "hawa-opacity-0" : "hawa-opacity-100", className)
@@ -2633,9 +2635,9 @@ var Textarea = React27.forwardRef(function(_param, ref) {
     }, /* @__PURE__ */ React27.createElement("textarea", _object_spread({
         className: cn("hawa-flex hawa-min-h-[80px] hawa-w-full hawa-rounded-md hawa-border hawa-border-input hawa-bg-background hawa-px-3 hawa-py-2 hawa-text-sm hawa-ring-offset-background placeholder:hawa-text-muted-foreground focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50", className),
         ref: ref
-    }, props)), props.helperText && /* @__PURE__ */ React27.createElement("p", {
-        className: "hawa-text-xs hawa-text-helper-color"
-    }, props.helperText));
+    }, props)), /* @__PURE__ */ React27.createElement("p", {
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
+    }, props.helperText), " ");
 });
 Textarea.displayName = "Textarea";
 // components/elements/Slider.tsx
@@ -2728,7 +2730,7 @@ var ColorPicker = function(_param) {
         value: selectedColor,
         className: cn("hawa-block hawa-h-[40px] hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-2 hawa-text-sm  hawa-border-l-0 hawa-border-l-transparent hawa-rounded-l-none hawa-w-24")
     }, textInputProps)))), /* @__PURE__ */ import_react17.default.createElement("p", {
-        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText));
 };
 // components/elements/DestroyableCard.tsx
@@ -2846,8 +2848,8 @@ var PinInput = function(_param) {
                 return e.target.select();
             }
         }, props));
-    })), props.helperText && /* @__PURE__ */ import_react19.default.createElement("p", {
-        className: "hawa-my-0 hawa-text-xs hawa-text-helper-color"
+    })), /* @__PURE__ */ import_react19.default.createElement("p", {
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText));
 };
 // components/elements/FileDropzone.tsx
@@ -4881,8 +4883,8 @@ var Select = function(_param) {
         onInputChange: function(newValue, action) {
             return props.onInputChange(newValue, action);
         }
-    }), props.helperText && /* @__PURE__ */ import_react21.default.createElement("p", {
-        className: "hawa-text-xs hawa-text-helper-color"
+    }), /* @__PURE__ */ import_react21.default.createElement("p", {
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText));
 };
 // components/elements/PhoneInput.tsx
@@ -4932,10 +4934,10 @@ var PhoneInput = function(props) {
         type: "tel",
         placeholder: "531045453"
     }))), /* @__PURE__ */ import_react22.default.createElement("p", {
-        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText));
 };
-{}// components/elements/AppStores.tsx
+// components/elements/AppStores.tsx
 var import_react23 = __toESM(require("react"));
 var AppStores = function(props) {
     return /* @__PURE__ */ import_react23.default.createElement("div", {
@@ -5194,7 +5196,7 @@ var Input = function(_param) {
     })), props.iconInside && /* @__PURE__ */ import_react25.default.createElement("div", {
         className: "hawa-absolute hawa-end-2 hawa-top-[41px] hawa-mx-1  hawa--translate-y-1/2"
     }, props.iconInside), !forceHideHelperText && /* @__PURE__ */ import_react25.default.createElement("p", {
-        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText))));
 };
 // components/elements/DataTable.tsx
@@ -6191,13 +6193,14 @@ var Combobox = function(_param) {
         open: open,
         onOpenChange: setOpen
     }, /* @__PURE__ */ React51.createElement(PopoverTrigger, {
+        asChild: true,
         disabled: props.isLoading || props.preview
     }, props.isLoading ? /* @__PURE__ */ React51.createElement("div", {
         className: "hawa-pb-2"
     }, /* @__PURE__ */ React51.createElement(Skeleton, {
         className: "hawa-h-[40px] hawa-w-full"
     })) : /* @__PURE__ */ React51.createElement("div", {
-        className: "hawa-flex hawa-flex-col hawa-gap-2 "
+        className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-items-start "
     }, /* @__PURE__ */ React51.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", props.preview ? "hawa-opacity-100" : "hawa-opacity-0")
     }), /* @__PURE__ */ React51.createElement("button", {
@@ -6218,9 +6221,9 @@ var Combobox = function(_param) {
     }, /* @__PURE__ */ React51.createElement("path", {
         d: "m6 9 6 6 6-6"
     }))), /* @__PURE__ */ React51.createElement("p", {
-        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
-    }, props.helperText), " ")), /* @__PURE__ */ React51.createElement(PopoverContent, {
-        className: cn("popover-w-parent")
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
+    }, props.helperText))), /* @__PURE__ */ React51.createElement(PopoverContent, {
+        className: cn("popover-w-parent", props.helperText && "-hawa-mt-4")
     }, /* @__PURE__ */ React51.createElement(Command, null, !props.hideInput && /* @__PURE__ */ React51.createElement(CommandInput, {
         placeholder: props.searchPlaceholder
     }), /* @__PURE__ */ React51.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React51.createElement(CommandGroup, {
@@ -6661,8 +6664,8 @@ var Stats = function(_param) {
         className: "hawa-text-2xl hawa-font-bold"
     }, props.number), props.isLoading && props.helperText ? /* @__PURE__ */ import_react33.default.createElement(Skeleton, {
         className: "hawa-mt-2 hawa-h-4 hawa-w-1/2"
-    }) : props.helperText && /* @__PURE__ */ import_react33.default.createElement("p", {
-        className: "hawa-text-xs hawa-text-muted-foreground"
+    }) : /* @__PURE__ */ import_react33.default.createElement("p", {
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText), props.isLoading && props.chart ? /* @__PURE__ */ import_react33.default.createElement(Skeleton, {
         className: "hawa-mt-2 hawa-h-4 hawa-w-1/2"
     }) : props.chart));

package/dist/index.mjs

@@ -1885,7 +1885,16 @@ var Radio = ({
           },
           opt.label
         )
-      ))), props.helperText && /* @__PURE__ */ React22.createElement("p", { className: "hawa-text-xs hawa-text-helper-color" }, props.helperText));
+      ))), /* @__PURE__ */ React22.createElement(
+        "p",
+        {
+          className: cn(
+            "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
+            props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+          )
+        },
+        props.helperText
+      ));
   }
 };
 
@@ -2049,6 +2058,8 @@ var Alert = ({
   return /* @__PURE__ */ React25.createElement("div", { ref: alertRef }, /* @__PURE__ */ React25.createElement(
     "div",
     {
+      "data-testid": "alert",
+      "aria-label": "Alert",
       role: "alert",
       dir: direction,
       className: clsx6(
@@ -2187,7 +2198,16 @@ var Textarea = React27.forwardRef(
         ref,
         ...props
       }
-    ), props.helperText && /* @__PURE__ */ React27.createElement("p", { className: "hawa-text-xs hawa-text-helper-color" }, props.helperText));
+    ), /* @__PURE__ */ React27.createElement(
+      "p",
+      {
+        className: cn(
+          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
+          props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+        )
+      },
+      props.helperText
+    ), " ");
   }
 );
 Textarea.displayName = "Textarea";
@@ -2294,7 +2314,7 @@ var ColorPicker = ({
     "p",
     {
       className: cn(
-        "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all",
+        "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
         props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
       )
     },
@@ -2446,7 +2466,16 @@ var PinInput = ({
         ...props
       }
     ))
-  ), props.helperText && /* @__PURE__ */ React31.createElement("p", { className: "hawa-my-0 hawa-text-xs hawa-text-helper-color" }, props.helperText));
+  ), /* @__PURE__ */ React31.createElement(
+    "p",
+    {
+      className: cn(
+        "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
+        props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+      )
+    },
+    props.helperText
+  ));
 };
 
 // components/elements/FileDropzone.tsx
@@ -4498,7 +4527,16 @@ var Select = ({ labelKey = "label", ...props }) => {
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    props.helperText && /* @__PURE__ */ React33.createElement("p", { className: "hawa-text-xs hawa-text-helper-color" }, props.helperText)
+    /* @__PURE__ */ React33.createElement(
+      "p",
+      {
+        className: cn(
+          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
+          props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+        )
+      },
+      props.helperText
+    )
   );
 };
 
@@ -4552,15 +4590,13 @@ var PhoneInput = (props) => {
     "p",
     {
       className: cn(
-        "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all",
+        "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
         props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
       )
     },
     props.helperText
   ));
 };
-{
-}
 
 // components/elements/AppStores.tsx
 import React35 from "react";
@@ -4865,7 +4901,7 @@ var Input = ({
       "p",
       {
         className: cn(
-          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all",
+          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
           props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
         )
       },
@@ -5907,7 +5943,7 @@ var Combobox = ({
       )
     },
     props.label && /* @__PURE__ */ React51.createElement(Label2, null, props.label),
-    /* @__PURE__ */ React51.createElement(PopoverPrimitive2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React51.createElement(PopoverTrigger, { disabled: props.isLoading || props.preview }, props.isLoading ? /* @__PURE__ */ React51.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React51.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React51.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2 " }, /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React51.createElement(PopoverPrimitive2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React51.createElement(PopoverTrigger, { asChild: true, disabled: props.isLoading || props.preview }, props.isLoading ? /* @__PURE__ */ React51.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React51.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React51.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-items-start " }, /* @__PURE__ */ React51.createElement(
       "div",
       {
         className: cn(
@@ -5950,47 +5986,53 @@ var Combobox = ({
       "p",
       {
         className: cn(
-          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all",
+          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
           props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
         )
       },
       props.helperText
-    ), " ")), /* @__PURE__ */ React51.createElement(PopoverContent, { className: cn("popover-w-parent") }, /* @__PURE__ */ React51.createElement(Command, null, !props.hideInput && /* @__PURE__ */ React51.createElement(CommandInput, { placeholder: props.searchPlaceholder }), /* @__PURE__ */ React51.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React51.createElement(CommandGroup, { className: "  hawa-max-h-[200px] hawa-overflow-y-auto" }, data.map((item) => /* @__PURE__ */ React51.createElement(
-      CommandItem,
+    ))), /* @__PURE__ */ React51.createElement(
+      PopoverContent,
       {
-        key: getProperty(item, valueKey),
-        onSelect: () => {
-          const newValue = getProperty(item, valueKey);
-          setValue(newValue === value ? "" : newValue);
-          if (props.onChange) {
-            props.onChange(
-              newValue === value ? "" : newValue
-            );
-          }
-          setOpen(false);
-        }
+        className: cn("popover-w-parent", props.helperText && "-hawa-mt-4")
       },
-      /* @__PURE__ */ React51.createElement(
-        "svg",
+      /* @__PURE__ */ React51.createElement(Command, null, !props.hideInput && /* @__PURE__ */ React51.createElement(CommandInput, { placeholder: props.searchPlaceholder }), /* @__PURE__ */ React51.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React51.createElement(CommandGroup, { className: "  hawa-max-h-[200px] hawa-overflow-y-auto" }, data.map((item) => /* @__PURE__ */ React51.createElement(
+        CommandItem,
         {
-          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",
-          className: cn(
-            "hawa-mr-2 hawa-h-4 hawa-w-4",
-            value === getProperty(item, valueKey) ? "hawa-opacity-100" : "hawa-opacity-0"
-          )
+          key: getProperty(item, valueKey),
+          onSelect: () => {
+            const newValue = getProperty(item, valueKey);
+            setValue(newValue === value ? "" : newValue);
+            if (props.onChange) {
+              props.onChange(
+                newValue === value ? "" : newValue
+              );
+            }
+            setOpen(false);
+          }
         },
-        /* @__PURE__ */ React51.createElement("polyline", { points: "20 6 9 17 4 12" })
-      ),
-      getProperty(item, labelKey)
-    ))))))
+        /* @__PURE__ */ React51.createElement(
+          "svg",
+          {
+            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",
+            className: cn(
+              "hawa-mr-2 hawa-h-4 hawa-w-4",
+              value === getProperty(item, valueKey) ? "hawa-opacity-100" : "hawa-opacity-0"
+            )
+          },
+          /* @__PURE__ */ React51.createElement("polyline", { points: "20 6 9 17 4 12" })
+        ),
+        getProperty(item, labelKey)
+      ))))
+    ))
   );
 };
 
@@ -6459,7 +6501,16 @@ var Stats = ({ variant = "default", ...props }) => {
       className: cn(props.className)
     },
     /* @__PURE__ */ React57.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between hawa-p-4 hawa-items-center" }, /* @__PURE__ */ React57.createElement(CardTitle, { className: "hawa-text-sm hawa-font-medium" }, props.label), props.icon && /* @__PURE__ */ React57.createElement("span", null, props.icon)),
-    /* @__PURE__ */ React57.createElement(CardContent, null, props.isLoading ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-h-8 hawa-w-3/4" }) : /* @__PURE__ */ React57.createElement("div", { className: "hawa-text-2xl hawa-font-bold" }, props.number), props.isLoading && props.helperText ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-mt-2 hawa-h-4 hawa-w-1/2" }) : props.helperText && /* @__PURE__ */ React57.createElement("p", { className: "hawa-text-xs hawa-text-muted-foreground" }, props.helperText), props.isLoading && props.chart ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-mt-2 hawa-h-4 hawa-w-1/2" }) : props.chart)
+    /* @__PURE__ */ React57.createElement(CardContent, null, props.isLoading ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-h-8 hawa-w-3/4" }) : /* @__PURE__ */ React57.createElement("div", { className: "hawa-text-2xl hawa-font-bold" }, props.number), props.isLoading && props.helperText ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-mt-2 hawa-h-4 hawa-w-1/2" }) : /* @__PURE__ */ React57.createElement(
+      "p",
+      {
+        className: cn(
+          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start",
+          props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+        )
+      },
+      props.helperText
+    ), props.isLoading && props.chart ? /* @__PURE__ */ React57.createElement(Skeleton, { className: "hawa-mt-2 hawa-h-4 hawa-w-1/2" }) : props.chart)
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.13.16-next",
+  "version": "0.13.17-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {