@sikka/hawa 0.10.0-next → 0.10.1-next

package/dist/index.css

@@ -673,6 +673,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .ddm-w-parent {
     width: var(--radix-dropdown-menu-trigger-width);
   }
+.popover-w-parent {
+    width: var(--radix-popover-trigger-width);
+  }
 .badge {
     background: rgb(220, 232, 58);
     font-size: 10px !important;
@@ -713,6 +716,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-relative {
   position: relative;
 }
+.hawa-sticky {
+  position: sticky;
+}
 .hawa-inset-0 {
   inset: 0px;
 }
@@ -1127,6 +1133,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-max-h-56 {
   max-height: 14rem;
 }
+.hawa-max-h-\[200px\] {
+  max-height: 200px;
+}
 .hawa-max-h-\[300px\] {
   max-height: 300px;
 }
@@ -1578,6 +1587,15 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
 }
+.hawa-divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+.hawa-divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
 .hawa-overflow-auto {
   overflow: auto;
 }
@@ -1605,6 +1623,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-whitespace-nowrap {
   white-space: nowrap;
 }
+.hawa-whitespace-break-spaces {
+  white-space: break-spaces;
+}
 .hawa-rounded {
   border-radius: var(--radius);
 }
@@ -1825,10 +1846,22 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
+.hawa-bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
 .hawa-bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
+.hawa-bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+.hawa-bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
 .hawa-bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
@@ -1936,10 +1969,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
-.hawa-bg-yellow-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
-}
 .hawa-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
@@ -2042,6 +2071,10 @@ input[type="number"]::-webkit-inner-spin-button,
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
+.hawa-px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
 .hawa-px-8 {
   padding-left: 2rem;
   padding-right: 2rem;
@@ -2251,6 +2284,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-tracking-tight {
   letter-spacing: -0.025em;
 }
+.hawa-tracking-wider {
+  letter-spacing: 0.05em;
+}
 .hawa-tracking-widest {
   letter-spacing: 0.1em;
 }
@@ -3534,6 +3570,10 @@ body {
   .lg\:hawa-grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+
+  .lg\:hawa-flex-row {
+    flex-direction: row;
+  }
 }
 .\[\&\:has\(\[role\=checkbox\]\)\]\:hawa-pr-0:has([role=checkbox]) {
   padding-right: 0px;

package/dist/index.d.mts

@@ -659,6 +659,8 @@ type ComboboxTypes<T> = {
     helperText?: string;
     placeholder?: string;
     searchPlaceholder?: string;
+    popoverClassName?: string;
+    buttonClassName?: string;
     /** This the same value as the one with the key valueKey */
     defaultValue?: string;
 };

package/dist/index.d.ts

@@ -659,6 +659,8 @@ type ComboboxTypes<T> = {
     helperText?: string;
     placeholder?: string;
     searchPlaceholder?: string;
+    popoverClassName?: string;
+    buttonClassName?: string;
     /** This the same value as the one with the key valueKey */
     defaultValue?: string;
 };

package/dist/index.js

@@ -4641,7 +4641,7 @@ var PhoneInput = function(props) {
         className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2"
     }, props.label && /* @__PURE__ */ import_react20.default.createElement(Label2, null, props.label), /* @__PURE__ */ import_react20.default.createElement("div", {
         dir: "ltr",
-        className: "hawa-flex hawa-flex-row hawa-w-full "
+        className: "hawa-flex hawa-flex-row hawa-w-full"
     }, /* @__PURE__ */ import_react20.default.createElement(Select, {
         width: "fit",
         phoneCode: true,
@@ -5948,10 +5948,12 @@ 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, 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, buttonClassName = _param.buttonClassName, data = _param.data, props = _object_without_properties(_param, [
         "labelKey",
         "valueKey",
         "defaultValue",
+        "popoverClassName",
+        "buttonClassName",
         "data"
     ]);
     var _React46_useState = _sliced_to_array(React46.useState(false), 2), open = _React46_useState[0], setOpen = _React46_useState[1];
@@ -5969,29 +5971,27 @@ var Combobox = function(_param) {
         variant: "combobox",
         role: "combobox",
         "aria-expanded": open,
-        className: "hawa-w-[200px] hawa-justify-between hawa-bg-background"
+        className: cn("hawa-justify-between hawa-bg-background", buttonClassName)
     }, value ? getProperty(data.find(function(item) {
         return item[valueKey] === value;
     }) || {}, labelKey) : props.placeholder, /* @__PURE__ */ React46.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
+        className: "hawa-w-4 hawa-h-4",
         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"
+        strokeLinejoin: "round"
     }, /* @__PURE__ */ React46.createElement("path", {
-        d: "m7 15 5 5 5-5"
-    }), /* @__PURE__ */ React46.createElement("path", {
-        d: "m7 9 5-5 5 5"
+        d: "m6 9 6 6 6-6"
     })))), /* @__PURE__ */ React46.createElement(PopoverContent, {
-        className: "hawa-w-[200px] hawa-p-0 hawa-bg-yellow-600"
+        className: cn("popover-w-parent")
     }, /* @__PURE__ */ React46.createElement(Command, null, /* @__PURE__ */ React46.createElement(CommandInput, {
         placeholder: props.searchPlaceholder
-    }), /* @__PURE__ */ React46.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React46.createElement(CommandGroup, null, data.map(function(item) {
+    }), /* @__PURE__ */ React46.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React46.createElement(CommandGroup, {
+        className: "  hawa-max-h-[200px] hawa-overflow-y-auto"
+    }, data.map(function(item) {
         return /* @__PURE__ */ React46.createElement(CommandItem, {
             key: getProperty(item, valueKey),
             onSelect: function() {

package/dist/index.mjs

@@ -4245,7 +4245,7 @@ var PhoneInput = (props) => {
       console.log("handleChange prop was not provided in <PhoneInput/>");
     }
   };
-  return /* @__PURE__ */ React31.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ React31.createElement(Label2, null, props.label), /* @__PURE__ */ React31.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full " }, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React31.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ React31.createElement(Label2, null, props.label), /* @__PURE__ */ React31.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React31.createElement(
     Select,
     {
       width: "fit",
@@ -5637,6 +5637,8 @@ var Combobox = ({
   labelKey = "label",
   valueKey = "value",
   defaultValue = "",
+  popoverClassName,
+  buttonClassName,
   data,
   ...props
 }) => {
@@ -5660,7 +5662,10 @@ var Combobox = ({
         variant: "combobox",
         role: "combobox",
         "aria-expanded": open,
-        className: "hawa-w-[200px] hawa-justify-between hawa-bg-background"
+        className: cn(
+          "hawa-justify-between hawa-bg-background",
+          buttonClassName
+        )
       },
       value ? getProperty(
         data.find((item) => item[valueKey] === value) || {},
@@ -5670,20 +5675,17 @@ var Combobox = ({
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
-          width: "24",
-          height: "24",
+          className: "hawa-w-4 hawa-h-4",
           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"
+          strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React46.createElement("path", { d: "m7 15 5 5 5-5" }),
-        /* @__PURE__ */ React46.createElement("path", { d: "m7 9 5-5 5 5" })
+        /* @__PURE__ */ React46.createElement("path", { d: "m6 9 6 6 6-6" })
       )
-    )), /* @__PURE__ */ React46.createElement(PopoverContent, { className: "hawa-w-[200px] hawa-p-0 hawa-bg-yellow-600" }, /* @__PURE__ */ React46.createElement(Command, null, /* @__PURE__ */ React46.createElement(CommandInput, { placeholder: props.searchPlaceholder }), /* @__PURE__ */ React46.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React46.createElement(CommandGroup, null, data.map((item) => /* @__PURE__ */ React46.createElement(
+    )), /* @__PURE__ */ React46.createElement(PopoverContent, { className: cn("popover-w-parent") }, /* @__PURE__ */ React46.createElement(Command, null, /* @__PURE__ */ React46.createElement(CommandInput, { placeholder: props.searchPlaceholder }), /* @__PURE__ */ React46.createElement(CommandEmpty, null, "No framework found."), /* @__PURE__ */ React46.createElement(CommandGroup, { className: "  hawa-max-h-[200px] hawa-overflow-y-auto" }, data.map((item) => /* @__PURE__ */ React46.createElement(
       CommandItem,
       {
         key: getProperty(item, valueKey),

package/package.json

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