@sikka/hawa 0.8.17-next → 0.9.1-next

package/dist/index.css

@@ -1098,8 +1098,8 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-\[37\.5px\] {
   height: 37.5px;
 }
-.hawa-h-\[38px\] {
-  height: 38px;
+.hawa-h-\[40px\] {
+  height: 40px;
 }
 .hawa-h-\[44px\] {
   height: 44px;

package/dist/index.d.mts

@@ -649,7 +649,7 @@ declare const CommandShortcut: {
     displayName: string;
 };
 
-declare function Combobox(): React$1.JSX.Element;
+declare function Combobox(props: any): React$1.JSX.Element;
 
 type SelectOptionProps = {
     value: any;

package/dist/index.d.ts

@@ -649,7 +649,7 @@ declare const CommandShortcut: {
     displayName: string;
 };
 
-declare function Combobox(): React$1.JSX.Element;
+declare function Combobox(props: any): React$1.JSX.Element;
 
 type SelectOptionProps = {
     value: any;

package/dist/index.js

@@ -4517,15 +4517,13 @@ var Select = function(props) {
     return /* @__PURE__ */ import_react18.default.createElement("div", {
         className: cn("hawa-flex hawa-flex-col hawa-gap-2", props.width === "fit" ? "hawa-w-fit" : "hawa-w-full")
     }, props.label && /* @__PURE__ */ import_react18.default.createElement(Label2, null, props.label), props.isLoading ? /* @__PURE__ */ import_react18.default.createElement(Skeleton, {
-        className: "hawa-h-[38px] hawa-w-full"
+        className: "hawa-h-[40px] hawa-w-full"
     }) : !props.isCreatable ? //   TODO: enable keyboard to go to the next item in the list
     /* @__PURE__ */ import_react18.default.createElement(import_react_select.default, {
         noOptionsMessage: NoOption,
         classNames: {
             control: function() {
-                return cn(// "hawa-text-sm hawa-flex hawa-w-full hawa-rounded hawa-bg-background hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500 hawa-cursor-pointer hawa-border",
-                // "hawa-p-2",
-                props.phoneCode && "hawa-rounded-r-none", props.controlClassNames);
+                return cn(props.phoneCode && "hawa-rounded-r-none", props.controlClassNames);
             },
             container: function() {
                 return cn("hawa-rounded", props.phoneCode && "hawa-w-fit hawa-min-w-[65px] hawa-text-right hawa-w-[100px]  hawa-p-0 hawa-rounded-r-none hawa-h-[37.5px] ", "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background  hawa-p-0 hawa-px-1 hawa-text-sm", props.disabled ? "hawa-cursor-not-allowed" : "hawa-cursor-pointer");
@@ -4544,17 +4542,7 @@ var Select = function(props) {
             }
         },
         unstyled: true,
-        isDisabled: props.disabled,
-        options: props.options,
-        defaultValue: props.defaultValue,
-        isClearable: props.isClearable,
-        isMulti: props.isMulti,
-        isSearchable: props.isSearchable,
-        placeholder: props.placeholder,
         autoFocus: true,
-        onChange: function(newValue, action) {
-            return props.onChange(newValue, action);
-        },
         components: props.hideIndicator ? {
             Option: Option,
             Menu: Menu,
@@ -4565,6 +4553,16 @@ var Select = function(props) {
             Option: Option,
             Menu: Menu
         },
+        onChange: function(newValue, action) {
+            return props.onChange(newValue, action);
+        },
+        isDisabled: props.disabled,
+        options: props.options,
+        defaultValue: props.defaultValue,
+        isClearable: props.isClearable,
+        isMulti: props.isMulti,
+        isSearchable: props.isSearchable,
+        placeholder: props.placeholder,
         getOptionLabel: props.getOptionLabel
     }) : /* @__PURE__ */ import_react18.default.createElement(import_creatable.default, {
         formatCreateLabel: function(inputValue) {
@@ -4894,7 +4892,7 @@ var Input = function(_param) {
     return /* @__PURE__ */ import_react22.default.createElement("div", {
         className: cn(defaultStyle, marginStyles[margin], widthStyles[width], props.containerClassName, "hawa-w-full hawa-gap-2")
     }, props.label && /* @__PURE__ */ import_react22.default.createElement(Label2, null, props.label), props.isLoading ? /* @__PURE__ */ import_react22.default.createElement(Skeleton, {
-        className: "hawa-h-[38px] hawa-w-full"
+        className: "hawa-h-[40px] hawa-w-full"
     }) : /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, /* @__PURE__ */ import_react22.default.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", preview ? "hawa-opacity-100" : "hawa-opacity-0")
     }), /* @__PURE__ */ import_react22.default.createElement(import_react22.default.Fragment, null, /* @__PURE__ */ import_react22.default.createElement("div", {
@@ -4909,11 +4907,14 @@ var Input = function(_param) {
         defaultValue: props.defaultValue,
         type: props.type,
         placeholder: props.placeholder,
-        disabled: preview
+        disabled: preview,
+        style: {
+            height: 40
+        }
     })), props.iconInside && /* @__PURE__ */ import_react22.default.createElement("div", {
         className: "hawa-absolute hawa-right-1 hawa-top-[41px]  hawa--translate-y-1/2"
     }, props.iconInside), props.helperText && /* @__PURE__ */ import_react22.default.createElement("p", {
-        className: "hawa-mb-0 hawa-mt-0 helper-text"
+        className: "hawa-mb-0 hawa-mt-0 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500"
     }, props.helperText))));
 };
 // components/elements/DataTable.tsx
@@ -5962,11 +5963,15 @@ var frameworks = [
         label: "Astro"
     }
 ];
-function Combobox() {
+function Combobox(props) {
     var _frameworks_find;
     var _React45_useState = _sliced_to_array(React45.useState(false), 2), open = _React45_useState[0], setOpen = _React45_useState[1];
     var _React45_useState1 = _sliced_to_array(React45.useState(""), 2), value = _React45_useState1[0], setValue = _React45_useState1[1];
-    return /* @__PURE__ */ React45.createElement(PopoverPrimitive2.Root, {
+    return /* @__PURE__ */ React45.createElement("div", {
+        className: cn("hawa-flex hawa-flex-col hawa-gap-2", props.width === "fit" ? "hawa-w-fit" : "hawa-w-full")
+    }, props.label && /* @__PURE__ */ React45.createElement(Label2, null, props.label), props.isLoading ? /* @__PURE__ */ React45.createElement(Skeleton, {
+        className: "hawa-h-[40px] hawa-w-full"
+    }) : /* @__PURE__ */ React45.createElement(PopoverPrimitive2.Root, {
         open: open,
         onOpenChange: setOpen
     }, /* @__PURE__ */ React45.createElement(PopoverTrigger, {
@@ -6018,7 +6023,7 @@ function Combobox() {
         }, /* @__PURE__ */ React45.createElement("polyline", {
             points: "20 6 9 17 4 12"
         })), framework.label);
-    })))));
+    }))))));
 }
 // components/elements/Count.tsx
 var import_react29 = __toESM(require("react"));

package/dist/index.mjs

@@ -4168,7 +4168,7 @@ var Select = (props) => {
       )
     },
     props.label && /* @__PURE__ */ React29.createElement(Label2, null, props.label),
-    props.isLoading ? /* @__PURE__ */ React29.createElement(Skeleton, { className: "hawa-h-[38px] hawa-w-full" }) : !props.isCreatable ? (
+    props.isLoading ? /* @__PURE__ */ React29.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
       //   TODO: enable keyboard to go to the next item in the list
       /* @__PURE__ */ React29.createElement(
         ReactSelect,
@@ -4176,8 +4176,6 @@ var Select = (props) => {
           noOptionsMessage: NoOption,
           classNames: {
             control: () => cn(
-              // "hawa-text-sm hawa-flex hawa-w-full hawa-rounded hawa-bg-background hawa-text-gray-900 focus:hawa-border-blue-500 focus:hawa-ring-blue-500 dark:focus:hawa-ring-blue-500 hawa-cursor-pointer hawa-border",
-              // "hawa-p-2",
               props.phoneCode && "hawa-rounded-r-none",
               props.controlClassNames
             ),
@@ -4196,6 +4194,9 @@ var Select = (props) => {
             )
           },
           unstyled: true,
+          autoFocus: true,
+          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : { Option, Menu },
+          onChange: (newValue, action) => props.onChange(newValue, action),
           isDisabled: props.disabled,
           options: props.options,
           defaultValue: props.defaultValue,
@@ -4203,17 +4204,6 @@ var Select = (props) => {
           isMulti: props.isMulti,
           isSearchable: props.isSearchable,
           placeholder: props.placeholder,
-          autoFocus: true,
-          onChange: (newValue, action) => props.onChange(newValue, action),
-          components: props.hideIndicator ? {
-            Option,
-            Menu,
-            IndicatorsContainer: () => null
-            // Set to null if phoneCode is true, otherwise undefined
-          } : {
-            Option,
-            Menu
-          },
           getOptionLabel: props.getOptionLabel
         }
       )
@@ -4565,7 +4555,7 @@ var Input = ({
       )
     },
     props.label && /* @__PURE__ */ React34.createElement(Label2, null, props.label),
-    props.isLoading ? /* @__PURE__ */ React34.createElement(Skeleton, { className: "hawa-h-[38px] hawa-w-full" }) : /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(
+    props.isLoading ? /* @__PURE__ */ React34.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(
       "div",
       {
         className: cn(
@@ -4590,9 +4580,10 @@ var Input = ({
         defaultValue: props.defaultValue,
         type: props.type,
         placeholder: props.placeholder,
-        disabled: preview
+        disabled: preview,
+        style: { height: 40 }
       }
-    )), props.iconInside && /* @__PURE__ */ React34.createElement("div", { className: "hawa-absolute hawa-right-1 hawa-top-[41px]  hawa--translate-y-1/2" }, props.iconInside), props.helperText && /* @__PURE__ */ React34.createElement("p", { className: "hawa-mb-0 hawa-mt-0 helper-text" }, props.helperText)))
+    )), props.iconInside && /* @__PURE__ */ React34.createElement("div", { className: "hawa-absolute hawa-right-1 hawa-top-[41px]  hawa--translate-y-1/2" }, props.iconInside), props.helperText && /* @__PURE__ */ React34.createElement("p", { className: "hawa-mb-0 hawa-mt-0 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText)))
   );
 };
 
@@ -5682,65 +5673,75 @@ var frameworks = [
     label: "Astro"
   }
 ];
-function Combobox() {
+function Combobox(props) {
   const [open, setOpen] = React45.useState(false);
   const [value, setValue] = React45.useState("");
-  return /* @__PURE__ */ React45.createElement(PopoverPrimitive2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React45.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React45.createElement(
-    Button,
+  return /* @__PURE__ */ React45.createElement(
+    "div",
     {
-      variant: "outline",
-      role: "combobox",
-      "aria-expanded": open,
-      className: "hawa-w-[200px] hawa-justify-between"
+      className: cn(
+        "hawa-flex hawa-flex-col hawa-gap-2",
+        props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
+      )
     },
-    value ? frameworks.find((framework) => framework.value === value)?.label : "Select framework...",
-    /* @__PURE__ */ React45.createElement(
-      "svg",
+    props.label && /* @__PURE__ */ React45.createElement(Label2, null, props.label),
+    props.isLoading ? /* @__PURE__ */ React45.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : /* @__PURE__ */ React45.createElement(PopoverPrimitive2.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React45.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React45.createElement(
+      Button,
       {
-        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: "hawa-ml-2 hawa-h-4 hawa-w-4 hawa-shrink-0 hawa-opacity-50"
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        className: "hawa-w-[200px] hawa-justify-between"
       },
-      /* @__PURE__ */ React45.createElement("path", { d: "m7 15 5 5 5-5" }),
-      /* @__PURE__ */ React45.createElement("path", { d: "m7 9 5-5 5 5" })
-    )
-  )), /* @__PURE__ */ React45.createElement(PopoverContent, { className: "hawa-w-[200px] hawa-p-0" }, /* @__PURE__ */ React45.createElement(Command, null, /* @__PURE__ */ React45.createElement(CommandInput, { placeholder: "Search framework..." }), /* @__PURE__ */ React45.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React45.createElement(CommandGroup, null, frameworks.map((framework) => /* @__PURE__ */ React45.createElement(
-    CommandItem,
-    {
-      key: framework.value,
-      onSelect: (currentValue) => {
-        setValue(currentValue === value ? "" : currentValue);
-        setOpen(false);
-      }
-    },
-    /* @__PURE__ */ React45.createElement(
-      "svg",
+      value ? frameworks.find((framework) => framework.value === value)?.label : "Select framework...",
+      /* @__PURE__ */ React45.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: "hawa-ml-2 hawa-h-4 hawa-w-4 hawa-shrink-0 hawa-opacity-50"
+        },
+        /* @__PURE__ */ React45.createElement("path", { d: "m7 15 5 5 5-5" }),
+        /* @__PURE__ */ React45.createElement("path", { d: "m7 9 5-5 5 5" })
+      )
+    )), /* @__PURE__ */ React45.createElement(PopoverContent, { className: "hawa-w-[200px] hawa-p-0" }, /* @__PURE__ */ React45.createElement(Command, null, /* @__PURE__ */ React45.createElement(CommandInput, { placeholder: "Search framework..." }), /* @__PURE__ */ React45.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React45.createElement(CommandGroup, null, frameworks.map((framework) => /* @__PURE__ */ React45.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 === framework.value ? "hawa-opacity-100" : "hawa-opacity-0"
-        )
+        key: framework.value,
+        onSelect: (currentValue) => {
+          setValue(currentValue === value ? "" : currentValue);
+          setOpen(false);
+        }
       },
-      /* @__PURE__ */ React45.createElement("polyline", { points: "20 6 9 17 4 12" })
-    ),
-    framework.label
-  ))))));
+      /* @__PURE__ */ React45.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 === framework.value ? "hawa-opacity-100" : "hawa-opacity-0"
+          )
+        },
+        /* @__PURE__ */ React45.createElement("polyline", { points: "20 6 9 17 4 12" })
+      ),
+      framework.label
+    ))))))
+  );
 }
 
 // components/elements/Count.tsx

package/package.json

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