@sikka/hawa 0.10.6-next → 0.10.8-next

package/dist/index.css

@@ -412,11 +412,14 @@ video {
     --error-foreground: 0 0% 98%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
+    --helper-text: 0 72% 51%;
     --ring: 240 5% 64.9%;
     --radius: 0.5rem;
     --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
   }
   .dark {
+    --helper-text: 0 84% 60%;
+    /* --helper-text: 61 97% 45%; */
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
     --card: 0 0% 2%;
@@ -660,16 +663,6 @@ input[type="number"]::-webkit-inner-spin-button,
   height: 1rem;
   width: 1rem;
 }
-.helper-text {
-  font-size: 0.75rem;
-  line-height: 1rem;
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
-:is([data-mode="dark"] .helper-text) {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
 .ddm-w-parent {
     width: var(--radix-dropdown-menu-trigger-width);
   }
@@ -883,6 +876,10 @@ input[type="number"]::-webkit-inner-spin-button,
   margin-left: 1rem;
   margin-right: 1rem;
 }
+.hawa-my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
 .hawa-my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -2362,6 +2359,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity));
 }
+.hawa-text-helper-color {
+  color: hsl(var(--helper-text));
+}
 .hawa-text-info-foreground {
   --tw-text-opacity: 1;
   color: hsl(var(--info-foreground) / var(--tw-text-opacity));
@@ -2412,10 +2412,6 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
-.hawa-text-red-600 {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
 .hawa-text-red-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
@@ -3391,10 +3387,6 @@ body {
 :is([data-mode="dark"] .dark\:hawa-text-muted-foreground) {
   color: hsl(var(--muted-foreground));
 }
-:is([data-mode="dark"] .dark\:hawa-text-red-500) {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
 :is([data-mode="dark"] .dark\:hawa-text-red-800) {
   --tw-text-opacity: 1;
   color: rgb(153 27 27 / var(--tw-text-opacity));
@@ -3452,9 +3444,26 @@ body {
     max-width: 100%;
   }
 
+  .xs\:hawa-flex-row {
+    flex-direction: row;
+  }
+
   .xs\:hawa-flex-nowrap {
     flex-wrap: nowrap;
   }
+
+  .xs\:hawa-p-6 {
+    padding: 1.5rem;
+  }
+
+  .xs\:hawa-px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
+  .xs\:hawa-pb-2 {
+    padding-bottom: 0.5rem;
+  }
 }
 @media (min-width: 640px) {
 

package/dist/index.js

@@ -1396,7 +1396,7 @@ var ItemCard = function(_param) {
         "cardImage",
         "orientation"
     ]);
-    var defaultStyle = "hawa-block hawa-rounded hawa-border hawa-border-gray-200 hawa-bg-white hawa-shadow-sm hover:hawa-shadow-lg hawa-transition-all dark:hawa-border-gray-700 dark:hawa-bg-gray-800 ";
+    var defaultStyle = "hawa-block hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm hawa-transition-all";
     var orientationStyles = {
         vertical: "hawa-max-w-sm",
         horizontal: "hawa-flex hawa-flex-row hawa-w-full"
@@ -1422,7 +1422,7 @@ var ItemCard = function(_param) {
         openActionHeader
     ]);
     return /* @__PURE__ */ import_react6.default.createElement("div", _object_spread({
-        className: (0, import_clsx5.default)(defaultStyle, orientationStyles[orientation]),
+        className: (0, import_clsx5.default)(defaultStyle, props.onCardClick && " hover:hawa-shadow-lg hawa-cursor-pointer", orientationStyles[orientation]),
         onClick: function(e) {
             e.stopPropagation();
             if (props.onCardClick) {
@@ -1441,30 +1441,33 @@ var ItemCard = function(_param) {
         onClick: clickableImageAction,
         className: "hawa-flex hawa-flex-row hawa-gap-2"
     }, clickableImageActionIcon, clickableImageActionText))), /* @__PURE__ */ import_react6.default.createElement("div", {
-        className: "hawa-relative hawa-w-full hawa-p-6"
+        className: "hawa-relative hawa-w-full hawa-p-4 xs:hawa-p-6 xs:hawa-pb-2 xs:hawa-px-2"
     }, headerActions && /* @__PURE__ */ import_react6.default.createElement("div", {
-        className: "hawa-max-h- hawa-bg-red hawa-absolute hawa-right-0 hawa-top-0 hawa-flex hawa-justify-end hawa-pr-3 hawa-pt-3"
+        className: "hawa-absolute hawa-right-0 hawa-top-0 hawa-flex hawa-justify-end hawa-pr-3 hawa-pt-3"
     }, /* @__PURE__ */ import_react6.default.createElement(DropdownMenu, {
         items: headerActions,
-        trigger: /* @__PURE__ */ import_react6.default.createElement("div", {
-            className: (0, import_clsx5.default)(headerActionsButtonStyle),
+        trigger: /* @__PURE__ */ import_react6.default.createElement(Button, {
+            variant: "ghost",
+            size: "smallIcon",
             onClick: handleOpenActionHeader
         }, /* @__PURE__ */ import_react6.default.createElement("span", {
             className: "hawa-sr-only"
         }, "Open dropdown"), /* @__PURE__ */ import_react6.default.createElement("svg", {
-            className: "hawa-h-6 hawa-w-6",
+            className: "hawa-h-5 hawa-w-5",
             "aria-hidden": "true",
             fill: "currentColor",
             viewBox: "0 0 20 20"
         }, /* @__PURE__ */ import_react6.default.createElement("path", {
             d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
         })))
-    })), header && /* @__PURE__ */ import_react6.default.createElement("h5", {
-        className: "hawa-mb-2 hawa-text-2xl hawa-font-bold hawa-tracking-tight hawa-text-gray-900 dark:hawa-text-white"
+    })), /* @__PURE__ */ import_react6.default.createElement("div", {
+        className: " hawa-mx-2"
+    }, header && /* @__PURE__ */ import_react6.default.createElement("h5", {
+        className: "hawa-mb-2 hawa-text-2xl hawa-font-bold hawa-tracking-tight "
     }, header), content && /* @__PURE__ */ import_react6.default.createElement("span", {
-        className: "hawa-w-full hawa-font-normal hawa-text-gray-700 dark:hawa-text-gray-400"
-    }, content), actions || counts ? /* @__PURE__ */ import_react6.default.createElement("div", {
-        className: (0, import_clsx5.default)("hawa-mt-3 hawa-flex hawa-items-center hawa-rounded-b-lg dark:hawa-text-white ", actions && counts ? "hawa-justify-between" : "hawa-justify-end")
+        className: "hawa-w-full hawa-font-normal "
+    }, content)), actions || counts ? /* @__PURE__ */ import_react6.default.createElement("div", {
+        className: (0, import_clsx5.default)("hawa-mt-3 hawa-flex hawa-flex-col xs:hawa-flex-row hawa-items-center hawa-rounded-b-lg dark:hawa-text-white ", actions && counts ? "hawa-justify-between" : "hawa-justify-end")
     }, counts, /* @__PURE__ */ import_react6.default.createElement(StopPropagationWrapper, null, actions)) : null));
 };
 // components/elements/cards/LandingCard.tsx
@@ -1815,7 +1818,7 @@ var Checkbox = function(_param) {
         className: cn("hawa-cursor-pointer hawa-select-none hawa-text-sm hawa-text-muted-foreground", checkboxProps.disabled && "hawa-cursor-not-allowed hawa-text-muted-foreground hawa-opacity-70")
     }, sublabel), helperText && !checkboxProps.disabled && /* @__PURE__ */ React15.createElement("label", {
         htmlFor: id,
-        className: cn("hawa-select-none helper-text", checkboxProps.disabled && "hawa-cursor-not-allowed hawa-opacity-70")
+        className: cn("hawa-select-none hawa-text-xs hawa-text-helper-color", checkboxProps.disabled && "hawa-cursor-not-allowed hawa-opacity-70")
     }, helperText)));
 };
 var CheckboxElement = React15.forwardRef(function(_param, ref) /* @__PURE__ */ {
@@ -2486,7 +2489,7 @@ var Textarea = React26.forwardRef(function(_param, ref) {
         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__ */ React26.createElement("p", {
-        className: "helper-text"
+        className: "hawa-text-xs hawa-text-helper-color"
     }, props.helperText));
 });
 Textarea.displayName = "Textarea";
@@ -2617,7 +2620,7 @@ var PinInput = function(_param) {
             }
         }, props));
     })), props.helperText && /* @__PURE__ */ import_react18.default.createElement("p", {
-        className: "hawa-mb-0 hawa-mt-0 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500"
+        className: "hawa-my-0 hawa-text-xs hawa-text-helper-color"
     }, props.helperText));
 };
 // components/elements/FileDropzone.tsx
@@ -4652,7 +4655,7 @@ var Select = function(_param) {
             return props.onInputChange(newValue, action);
         }
     }), props.helperText && /* @__PURE__ */ import_react20.default.createElement("p", {
-        className: "helper-text"
+        className: "hawa-text-xs hawa-text-helper-color"
     }, props.helperText));
 };
 // components/elements/PhoneInput.tsx
@@ -4702,7 +4705,7 @@ var PhoneInput = function(props) {
         type: "tel",
         placeholder: "531045453"
     }))), props.helperText && /* @__PURE__ */ import_react21.default.createElement("p", {
-        className: "hawa-mt-0 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500"
+        className: "hawa-my-0 hawa-text-xs hawa-text-helper-color"
     }, props.helperText));
 };
 {}// components/elements/AppStores.tsx
@@ -4955,7 +4958,7 @@ 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-mb-0 hawa-mt-0 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500"
+        className: "hawa-my-0 hawa-text-xs hawa-text-helper-color"
     }, props.helperText))));
 };
 // components/elements/DataTable.tsx
@@ -6055,7 +6058,7 @@ var Combobox = function(_param) {
             points: "20 6 9 17 4 12"
         })), getProperty(item, labelKey));
     }))))), props.helperText && /* @__PURE__ */ React47.createElement("p", {
-        className: "helper-text"
+        className: "hawa-text-xs hawa-text-helper-color"
     }, props.helperText));
 };
 // components/elements/Count.tsx

package/dist/index.mjs

@@ -742,7 +742,7 @@ var ItemCard = ({
   orientation = "vertical",
   ...props
 }) => {
-  let defaultStyle = "hawa-block hawa-rounded hawa-border hawa-border-gray-200 hawa-bg-white hawa-shadow-sm hover:hawa-shadow-lg hawa-transition-all dark:hawa-border-gray-700 dark:hawa-bg-gray-800 ";
+  let defaultStyle = "hawa-block hawa-rounded hawa-border hawa-bg-card hawa-text-card-foreground hawa-shadow-sm hawa-transition-all";
   let orientationStyles = {
     vertical: "hawa-max-w-sm",
     horizontal: "hawa-flex hawa-flex-row hawa-w-full"
@@ -772,7 +772,11 @@ var ItemCard = ({
   return /* @__PURE__ */ React9.createElement(
     "div",
     {
-      className: clsx5(defaultStyle, orientationStyles[orientation]),
+      className: clsx5(
+        defaultStyle,
+        props.onCardClick && " hover:hawa-shadow-lg hawa-cursor-pointer",
+        orientationStyles[orientation]
+      ),
       onClick: (e) => {
         e.stopPropagation();
         if (props.onCardClick) {
@@ -800,21 +804,22 @@ var ItemCard = ({
       clickableImageActionIcon,
       clickableImageActionText
     ))),
-    /* @__PURE__ */ React9.createElement("div", { className: "hawa-relative hawa-w-full hawa-p-6" }, headerActions && /* @__PURE__ */ React9.createElement("div", { className: "hawa-max-h- hawa-bg-red hawa-absolute hawa-right-0 hawa-top-0 hawa-flex hawa-justify-end hawa-pr-3 hawa-pt-3" }, /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React9.createElement("div", { className: "hawa-relative hawa-w-full hawa-p-4 xs:hawa-p-6 xs:hawa-pb-2 xs:hawa-px-2" }, headerActions && /* @__PURE__ */ React9.createElement("div", { className: "hawa-absolute hawa-right-0 hawa-top-0 hawa-flex hawa-justify-end hawa-pr-3 hawa-pt-3" }, /* @__PURE__ */ React9.createElement(
       DropdownMenu,
       {
         items: headerActions,
         trigger: /* @__PURE__ */ React9.createElement(
-          "div",
+          Button,
           {
-            className: clsx5(headerActionsButtonStyle),
+            variant: "ghost",
+            size: "smallIcon",
             onClick: handleOpenActionHeader
           },
           /* @__PURE__ */ React9.createElement("span", { className: "hawa-sr-only" }, "Open dropdown"),
           /* @__PURE__ */ React9.createElement(
             "svg",
             {
-              className: "hawa-h-6 hawa-w-6",
+              className: "hawa-h-5 hawa-w-5",
               "aria-hidden": "true",
               fill: "currentColor",
               viewBox: "0 0 20 20"
@@ -823,11 +828,11 @@ var ItemCard = ({
           )
         )
       }
-    )), header && /* @__PURE__ */ React9.createElement("h5", { className: "hawa-mb-2 hawa-text-2xl hawa-font-bold hawa-tracking-tight hawa-text-gray-900 dark:hawa-text-white" }, header), content && /* @__PURE__ */ React9.createElement("span", { className: "hawa-w-full hawa-font-normal hawa-text-gray-700 dark:hawa-text-gray-400" }, content), actions || counts ? /* @__PURE__ */ React9.createElement(
+    )), /* @__PURE__ */ React9.createElement("div", { className: " hawa-mx-2" }, header && /* @__PURE__ */ React9.createElement("h5", { className: "hawa-mb-2 hawa-text-2xl hawa-font-bold hawa-tracking-tight " }, header), content && /* @__PURE__ */ React9.createElement("span", { className: "hawa-w-full hawa-font-normal " }, content)), actions || counts ? /* @__PURE__ */ React9.createElement(
       "div",
       {
         className: clsx5(
-          "hawa-mt-3 hawa-flex hawa-items-center hawa-rounded-b-lg dark:hawa-text-white ",
+          "hawa-mt-3 hawa-flex hawa-flex-col xs:hawa-flex-row hawa-items-center hawa-rounded-b-lg dark:hawa-text-white ",
           actions && counts ? "hawa-justify-between" : "hawa-justify-end"
         )
       },
@@ -1240,7 +1245,7 @@ var Checkbox = ({
     {
       htmlFor: id,
       className: cn(
-        "hawa-select-none helper-text",
+        "hawa-select-none hawa-text-xs hawa-text-helper-color",
         checkboxProps.disabled && "hawa-cursor-not-allowed hawa-opacity-70"
       )
     },
@@ -2045,7 +2050,7 @@ var Textarea = React26.forwardRef(
         ref,
         ...props
       }
-    ), props.helperText && /* @__PURE__ */ React26.createElement("p", { className: "helper-text" }, props.helperText));
+    ), props.helperText && /* @__PURE__ */ React26.createElement("p", { className: "hawa-text-xs hawa-text-helper-color" }, props.helperText));
   }
 );
 Textarea.displayName = "Textarea";
@@ -2200,7 +2205,7 @@ var PinInput = ({
         ...props
       }
     ))
-  ), props.helperText && /* @__PURE__ */ React29.createElement("p", { className: "hawa-mb-0 hawa-mt-0 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText));
+  ), props.helperText && /* @__PURE__ */ React29.createElement("p", { className: "hawa-my-0 hawa-text-xs hawa-text-helper-color" }, props.helperText));
 };
 
 // components/elements/FileDropzone.tsx
@@ -4252,7 +4257,7 @@ var Select = ({ labelKey = "label", ...props }) => {
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    props.helperText && /* @__PURE__ */ React31.createElement("p", { className: "helper-text" }, props.helperText)
+    props.helperText && /* @__PURE__ */ React31.createElement("p", { className: "hawa-text-xs hawa-text-helper-color" }, props.helperText)
   );
 };
 
@@ -4302,7 +4307,7 @@ var PhoneInput = (props) => {
       type: "tel",
       placeholder: "531045453"
     }
-  ))), props.helperText && /* @__PURE__ */ React32.createElement("p", { className: "hawa-mt-0 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText));
+  ))), props.helperText && /* @__PURE__ */ React32.createElement("p", { className: "hawa-my-0 hawa-text-xs hawa-text-helper-color" }, props.helperText));
 };
 {
 }
@@ -4595,7 +4600,7 @@ 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-mb-0 hawa-mt-0 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText)))
+    )), 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)))
   );
 };
 
@@ -5751,7 +5756,7 @@ var Combobox = ({
       ),
       getProperty(item, labelKey)
     )))))),
-    props.helperText && /* @__PURE__ */ React47.createElement("p", { className: "helper-text" }, props.helperText)
+    props.helperText && /* @__PURE__ */ React47.createElement("p", { className: "hawa-text-xs hawa-text-helper-color" }, props.helperText)
   );
 };
 

package/package.json

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