@sikka/hawa 0.10.12-next → 0.10.13-next

package/dist/index.css

@@ -997,6 +997,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-aspect-square {
   aspect-ratio: 1 / 1;
 }
+.hawa-h-0 {
+  height: 0px;
+}
 .hawa-h-1 {
   height: 0.25rem;
 }

package/dist/index.d.mts

@@ -659,9 +659,9 @@ type ComboboxTypes<T> = {
     placeholder?: string;
     searchPlaceholder?: string;
     popoverClassName?: string;
-    buttonClassName?: string;
     /** This the same value as the one with the key valueKey */
     defaultValue?: string;
+    preview?: boolean;
     onChange?: (e: any) => void;
 };
 declare const Combobox: React$1.FC<ComboboxTypes<any>>;

package/dist/index.d.ts

@@ -659,9 +659,9 @@ type ComboboxTypes<T> = {
     placeholder?: string;
     searchPlaceholder?: string;
     popoverClassName?: string;
-    buttonClassName?: string;
     /** This the same value as the one with the key valueKey */
     defaultValue?: string;
+    preview?: boolean;
     onChange?: (e: any) => void;
 };
 declare const Combobox: React$1.FC<ComboboxTypes<any>>;

package/dist/index.js

@@ -4991,8 +4991,8 @@ var Input = function(_param) {
         }
     })), props.iconInside && /* @__PURE__ */ import_react24.default.createElement("div", {
         className: "hawa-absolute hawa-right-1 hawa-top-[41px]  hawa--translate-y-1/2"
-    }, props.iconInside), props.helperText && /* @__PURE__ */ import_react24.default.createElement("p", {
-        className: "hawa-my-0 hawa-text-xs hawa-text-helper-color"
+    }, props.iconInside), /* @__PURE__ */ import_react24.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")
     }, props.helperText))));
 };
 // components/elements/DataTable.tsx
@@ -6023,34 +6023,33 @@ var Combobox = function(_param) {
     var getProperty = function getProperty(obj, key) {
         return obj[key];
     };
-    var _param_labelKey = _param.labelKey, labelKey = _param_labelKey === void 0 ? "label" : _param_labelKey, _param_valueKey = _param.valueKey, valueKey = _param_valueKey === void 0 ? "value" : _param_valueKey, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, popoverClassName = _param.popoverClassName, buttonClassName = _param.buttonClassName, data = _param.data, props = _object_without_properties(_param, [
+    var _param_labelKey = _param.labelKey, labelKey = _param_labelKey === void 0 ? "label" : _param_labelKey, _param_valueKey = _param.valueKey, valueKey = _param_valueKey === void 0 ? "value" : _param_valueKey, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, popoverClassName = _param.popoverClassName, data = _param.data, props = _object_without_properties(_param, [
         "labelKey",
         "valueKey",
         "defaultValue",
         "popoverClassName",
-        "buttonClassName",
         "data"
     ]);
     var _React47_useState = _sliced_to_array(React47.useState(false), 2), open = _React47_useState[0], setOpen = _React47_useState[1];
     var _React47_useState1 = _sliced_to_array(React47.useState(defaultValue), 2), value = _React47_useState1[0], setValue = _React47_useState1[1];
     return /* @__PURE__ */ React47.createElement("div", {
-        className: cn("hawa-flex hawa-flex-col hawa-gap-2", props.width === "fit" ? "hawa-w-fit" : "hawa-w-full")
+        className: cn("hawa-flex hawa-flex-col hawa-gap-2 hawa-relative", props.width === "fit" ? "hawa-w-fit" : "hawa-w-full")
     }, props.label && /* @__PURE__ */ React47.createElement(Label2, null, props.label), /* @__PURE__ */ React47.createElement(PopoverPrimitive2.Root, {
         open: open,
         onOpenChange: setOpen
     }, /* @__PURE__ */ React47.createElement(PopoverTrigger, {
-        disabled: props.isLoading,
-        asChild: true
+        disabled: props.isLoading || props.preview
     }, props.isLoading ? /* @__PURE__ */ React47.createElement(Skeleton, {
         className: "hawa-h-[40px] hawa-w-full"
-    }) : /* @__PURE__ */ React47.createElement(Button, {
-        variant: "combobox",
+    }) : /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.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__ */ React47.createElement("button", {
         role: "combobox",
         "aria-expanded": open,
-        className: cn("hawa-justify-between hawa-bg-background hawa-font-normal", buttonClassName)
+        className: cn("hawa-bg-none hawa-inline-flex hawa-items-center hawa-transition-all  hawa-select-none hawa-rounded-md hawa-text-sm hawa-font-medium hawa-ring-offset-background  focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50", "hawa-text-primary hawa-border hawa-h-10  hawa-py-2", "hawa-justify-between hawa-w-full hawa-font-normal", props.preview ? "hawa-px-0 hawa-rounded-none hawa-border-transparent hawa-cursor-default" : "hawa-px-4")
     }, value ? getProperty(data.find(function(item) {
         return item[valueKey] === value;
-    }) || {}, labelKey) : props.placeholder || "...", /* @__PURE__ */ React47.createElement("svg", {
+    }) || {}, labelKey) : props.placeholder || "...", !props.preview && /* @__PURE__ */ React47.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         className: "hawa-w-4 hawa-h-4",
         viewBox: "0 0 24 24",
@@ -6061,7 +6060,7 @@ var Combobox = function(_param) {
         strokeLinejoin: "round"
     }, /* @__PURE__ */ React47.createElement("path", {
         d: "m6 9 6 6 6-6"
-    })))), /* @__PURE__ */ React47.createElement(PopoverContent, {
+    }))))), /* @__PURE__ */ React47.createElement(PopoverContent, {
         className: cn("popover-w-parent")
     }, /* @__PURE__ */ React47.createElement(Command, null, /* @__PURE__ */ React47.createElement(CommandInput, {
         placeholder: props.searchPlaceholder
@@ -6092,8 +6091,8 @@ var Combobox = function(_param) {
         }, /* @__PURE__ */ React47.createElement("polyline", {
             points: "20 6 9 17 4 12"
         })), getProperty(item, labelKey));
-    }))))), props.helperText && /* @__PURE__ */ React47.createElement("p", {
-        className: "hawa-text-xs hawa-text-helper-color"
+    }))))), /* @__PURE__ */ React47.createElement("p", {
+        className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all", props.helperText && !props.isLoading ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText));
 };
 // components/elements/Count.tsx

package/dist/index.mjs

@@ -4615,7 +4615,16 @@ var Input = ({
         disabled: preview,
         style: { height: 40 }
       }
-    )), props.iconInside && /* @__PURE__ */ React36.createElement("div", { className: "hawa-absolute hawa-right-1 hawa-top-[41px]  hawa--translate-y-1/2" }, props.iconInside), props.helperText && /* @__PURE__ */ React36.createElement("p", { className: "hawa-my-0 hawa-text-xs hawa-text-helper-color" }, props.helperText)))
+    )), props.iconInside && /* @__PURE__ */ React36.createElement("div", { className: "hawa-absolute hawa-right-1 hawa-top-[41px]  hawa--translate-y-1/2" }, props.iconInside), /* @__PURE__ */ React36.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
+    )))
   );
 };
 
@@ -5688,7 +5697,6 @@ var Combobox = ({
   valueKey = "value",
   defaultValue = "",
   popoverClassName,
-  buttonClassName,
   data,
   ...props
 }) => {
@@ -5701,27 +5709,36 @@ var Combobox = ({
     "div",
     {
       className: cn(
-        "hawa-flex hawa-flex-col hawa-gap-2",
+        "hawa-flex hawa-flex-col hawa-gap-2 hawa-relative",
         props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
       )
     },
     props.label && /* @__PURE__ */ React47.createElement(Label2, null, props.label),
-    /* @__PURE__ */ React47.createElement(PopoverPrimitive2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React47.createElement(PopoverTrigger, { disabled: props.isLoading, asChild: true }, props.isLoading ? /* @__PURE__ */ React47.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : /* @__PURE__ */ React47.createElement(
-      Button,
+    /* @__PURE__ */ React47.createElement(PopoverPrimitive2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React47.createElement(PopoverTrigger, { disabled: props.isLoading || props.preview }, props.isLoading ? /* @__PURE__ */ React47.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.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__ */ React47.createElement(
+      "button",
       {
-        variant: "combobox",
         role: "combobox",
         "aria-expanded": open,
         className: cn(
-          "hawa-justify-between hawa-bg-background hawa-font-normal",
-          buttonClassName
+          "hawa-bg-none hawa-inline-flex hawa-items-center hawa-transition-all  hawa-select-none hawa-rounded-md hawa-text-sm hawa-font-medium hawa-ring-offset-background  focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
+          "hawa-text-primary hawa-border hawa-h-10  hawa-py-2",
+          "hawa-justify-between hawa-w-full hawa-font-normal",
+          props.preview ? "hawa-px-0 hawa-rounded-none hawa-border-transparent hawa-cursor-default" : "hawa-px-4"
         )
       },
       value ? getProperty(
         data.find((item) => item[valueKey] === value) || {},
         labelKey
       ) : props.placeholder || "...",
-      /* @__PURE__ */ React47.createElement(
+      !props.preview && /* @__PURE__ */ React47.createElement(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -5735,7 +5752,7 @@ var Combobox = ({
         },
         /* @__PURE__ */ React47.createElement("path", { d: "m6 9 6 6 6-6" })
       )
-    )), /* @__PURE__ */ React47.createElement(PopoverContent, { className: cn("popover-w-parent") }, /* @__PURE__ */ React47.createElement(Command, null, /* @__PURE__ */ React47.createElement(CommandInput, { placeholder: props.searchPlaceholder }), /* @__PURE__ */ React47.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React47.createElement(CommandGroup, { className: "  hawa-max-h-[200px] hawa-overflow-y-auto" }, data.map((item) => /* @__PURE__ */ React47.createElement(
+    ))), /* @__PURE__ */ React47.createElement(PopoverContent, { className: cn("popover-w-parent") }, /* @__PURE__ */ React47.createElement(Command, null, /* @__PURE__ */ React47.createElement(CommandInput, { placeholder: props.searchPlaceholder }), /* @__PURE__ */ React47.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React47.createElement(CommandGroup, { className: "  hawa-max-h-[200px] hawa-overflow-y-auto" }, data.map((item) => /* @__PURE__ */ React47.createElement(
       CommandItem,
       {
         key: getProperty(item, valueKey),
@@ -5771,7 +5788,16 @@ var Combobox = ({
       ),
       getProperty(item, labelKey)
     )))))),
-    props.helperText && /* @__PURE__ */ React47.createElement("p", { className: "hawa-text-xs hawa-text-helper-color" }, props.helperText)
+    /* @__PURE__ */ React47.createElement(
+      "p",
+      {
+        className: cn(
+          "hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all",
+          props.helperText && !props.isLoading ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0"
+        )
+      },
+      props.helperText
+    )
   );
 };
 

package/package.json

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