@sikka/hawa 0.8.14-next → 0.8.16-next

package/dist/index.css

@@ -431,18 +431,17 @@ video {
     --muted-foreground: 240 5% 64.9%;
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
-   
-  
-    --success: 106 70% 40%;  /* A shade of green */
-    --success-foreground: 0 0% 100%;  /* White */
-    --info: 200 100% 30%;  /* A shade of blue */
-    --info-foreground: 0 0% 100%;  /* White */
-    --warning: 45 100% 50%;  /* A shade of yellow */
-    --warning-foreground: 0 0% 20%;  /* Dark grey */
-   
+
+    --success: 106 70% 40%; /* A shade of green */
+    --success-foreground: 0 0% 100%; /* White */
+    --info: 200 100% 30%; /* A shade of blue */
+    --info-foreground: 0 0% 100%; /* White */
+    --warning: 45 100% 50%; /* A shade of yellow */
+    --warning-foreground: 0 0% 20%; /* Dark grey */
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;
-   
+
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
@@ -661,6 +660,16 @@ 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);
   }

package/dist/index.d.mts

@@ -116,7 +116,7 @@ interface ItemCardTypes {
     /** a URL for the image of the card */
     cardImage?: string;
     /** a function that fires when the card is clicked anywhere */
-    onCardClick?: any;
+    onCardClick?: (event: React__default.MouseEvent<HTMLDivElement>) => void;
     /** a React node with HawaIconCount children to have counters at the bottom of the card */
     counts?: JSX.Element;
     /** The action buttons on the bottom right of the card */
@@ -665,7 +665,7 @@ type SelectTypes = {
     controlClassNames?: string;
     containerClassNames?: string;
     onChange?: any;
-    helperText?: any;
+    helperText?: string;
     onInputChange?: any;
     native?: any;
     width?: "full" | "small" | "fit";

package/dist/index.d.ts

@@ -116,7 +116,7 @@ interface ItemCardTypes {
     /** a URL for the image of the card */
     cardImage?: string;
     /** a function that fires when the card is clicked anywhere */
-    onCardClick?: any;
+    onCardClick?: (event: React__default.MouseEvent<HTMLDivElement>) => void;
     /** a React node with HawaIconCount children to have counters at the bottom of the card */
     counts?: JSX.Element;
     /** The action buttons on the bottom right of the card */
@@ -665,7 +665,7 @@ type SelectTypes = {
     controlClassNames?: string;
     containerClassNames?: string;
     onChange?: any;
-    helperText?: any;
+    helperText?: string;
     onInputChange?: any;
     native?: any;
     width?: "full" | "small" | "fit";

package/dist/index.js

@@ -1362,7 +1362,8 @@ var DropdownMenu = function(param) {
 };
 // components/elements/cards/ItemCard.tsx
 var ItemCard = function(_param) {
-    var handleOpenActionHeader = function handleOpenActionHeader() {
+    var handleOpenActionHeader = function handleOpenActionHeader(e) {
+        e.stopPropagation();
         setOpenActionHeader(!openActionHeader);
     };
     var actions = _param.actions, counts = _param.counts, content = _param.content, headerActions = _param.headerActions, clickableImage = _param.clickableImage, clickableImageAction = _param.clickableImageAction, clickableImageActionText = _param.clickableImageActionText, clickableImageActionIcon = _param.clickableImageActionIcon, header = _param.header, cardImage = _param.cardImage, _param_orientation = _param.orientation, orientation = _param_orientation === void 0 ? "vertical" : _param_orientation, props = _object_without_properties(_param, [
@@ -1404,11 +1405,17 @@ var ItemCard = function(_param) {
         openActionHeader
     ]);
     return /* @__PURE__ */ import_react5.default.createElement("div", _object_spread({
-        className: (0, import_clsx5.default)(defaultStyle, orientationStyles[orientation])
+        className: (0, import_clsx5.default)(defaultStyle, orientationStyles[orientation]),
+        onClick: function(e) {
+            e.stopPropagation();
+            if (props.onCardClick) {
+                props.onCardClick(e);
+            }
+        }
     }, props), cardImage && /* @__PURE__ */ import_react5.default.createElement("div", {
         className: "hawa-group hawa-relative hawa-overflow-clip"
     }, /* @__PURE__ */ import_react5.default.createElement("img", {
-        src: "https://via.placeholder.com/50",
+        src: cardImage,
         className: (0, import_clsx5.default)(imageStyles[orientation], clickableImage ? "hawa-overflow-clip hawa-transition-all group-hover:hawa-blur-lg" : "")
     }), clickableImage && /* @__PURE__ */ import_react5.default.createElement("div", {
         className: "hawa-absolute hawa-left-0 hawa-top-0 hawa-flex hawa-h-full hawa-w-full hawa-items-center hawa-justify-center hawa-opacity-0 hawa-transition-all group-hover:hawa-opacity-100 "
@@ -1441,7 +1448,15 @@ var ItemCard = function(_param) {
         className: "hawa-w-full hawa-font-normal hawa-text-gray-700 dark:hawa-text-gray-400"
     }, content), actions || counts ? /* @__PURE__ */ import_react5.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")
-    }, counts, actions) : null));
+    }, counts, /* @__PURE__ */ import_react5.default.createElement(StopPropagationWrapper, null, actions)) : null));
+};
+var StopPropagationWrapper = function(props) {
+    var handleClick = function(e) {
+        e.stopPropagation();
+    };
+    return /* @__PURE__ */ import_react5.default.createElement("div", {
+        onClick: handleClick
+    }, props.children);
 };
 // components/elements/Dialog.tsx
 var React9 = __toESM(require("react"));
@@ -1757,7 +1772,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__ */ React13.createElement("label", {
         htmlFor: id,
-        className: cn("hawa-select-none hawa-text-xs  hawa-text-red-500", checkboxProps.disabled && "hawa-cursor-not-allowed hawa-opacity-70")
+        className: cn("hawa-select-none helper-text", checkboxProps.disabled && "hawa-cursor-not-allowed hawa-opacity-70")
     }, helperText)));
 };
 var CheckboxElement = React13.forwardRef(function(_param, ref) /* @__PURE__ */ {
@@ -2428,7 +2443,7 @@ var Textarea = React24.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__ */ React24.createElement("p", {
-        className: "hawa-text-sm hawa-text-red-600 dark:hawa-text-red-500"
+        className: "helper-text"
     }, props.helperText));
 });
 Textarea.displayName = "Textarea";
@@ -4593,7 +4608,7 @@ var Select = function(props) {
             return props.onInputChange(newValue, action);
         }
     }), props.helperText && /* @__PURE__ */ import_react18.default.createElement("p", {
-        className: "hawa-text-sm hawa-text-red-600 dark:hawa-text-red-500"
+        className: "helper-text"
     }, props.helperText));
 };
 // components/elements/PhoneInput.tsx
@@ -4895,7 +4910,7 @@ var Input = function(_param) {
     })), 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 hawa-text-xs hawa-text-red-600 dark:hawa-text-red-500"
+        className: "hawa-mb-0 hawa-mt-0 helper-text"
     }, props.helperText))));
 };
 // components/elements/DataTable.tsx
@@ -8118,13 +8133,13 @@ var FeedbackForm = function(props) {
         control: control,
         render: function(param) {
             var field = param.field;
-            var _formState_errors_requestType;
+            var _formState_errors_requestType_message, _formState_errors_requestType;
             return /* @__PURE__ */ import_react45.default.createElement(Select, _object_spread_props(_object_spread({}, field), {
                 onChange: function(option) {
                     return field.onChange(option.value);
                 },
                 options: props.requestTypes,
-                helperText: formState.errors.requestType && ((_formState_errors_requestType = formState.errors.requestType) === null || _formState_errors_requestType === void 0 ? void 0 : _formState_errors_requestType.message)
+                helperText: (_formState_errors_requestType = formState.errors.requestType) === null || _formState_errors_requestType === void 0 ? void 0 : (_formState_errors_requestType_message = _formState_errors_requestType.message) === null || _formState_errors_requestType_message === void 0 ? void 0 : _formState_errors_requestType_message.toString()
             }));
         }
     }), /* @__PURE__ */ import_react45.default.createElement(Label2, null, props.texts.description), /* @__PURE__ */ import_react45.default.createElement(import_react_hook_form7.Controller, {

package/dist/index.mjs

@@ -747,7 +747,8 @@ var ItemCard = ({
   };
   let headerActionsButtonStyle = "hawa-inline-block hawa-rounded hawa-p-1 hawa-text-sm hawa-text-gray-500 hover:hawa-bg-gray-100 focus:hawa-outline-none focus:hawa-ring-4 focus:hawa-ring-gray-200 dark:hawa-text-gray-400 dark:hover:hawa-bg-gray-700 dark:focus:hawa-ring-gray-700";
   const [openActionHeader, setOpenActionHeader] = useState3(false);
-  function handleOpenActionHeader() {
+  function handleOpenActionHeader(e) {
+    e.stopPropagation();
     setOpenActionHeader(!openActionHeader);
   }
   useEffect2(() => {
@@ -762,12 +763,18 @@ var ItemCard = ({
     "div",
     {
       className: clsx5(defaultStyle, orientationStyles[orientation]),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (props.onCardClick) {
+          props.onCardClick(e);
+        }
+      },
       ...props
     },
     cardImage && /* @__PURE__ */ React8.createElement("div", { className: "hawa-group hawa-relative hawa-overflow-clip" }, /* @__PURE__ */ React8.createElement(
       "img",
       {
-        src: "https://via.placeholder.com/50",
+        src: cardImage,
         className: clsx5(
           imageStyles[orientation],
           clickableImage ? "hawa-overflow-clip hawa-transition-all group-hover:hawa-blur-lg" : ""
@@ -815,10 +822,16 @@ var ItemCard = ({
         )
       },
       counts,
-      actions
+      /* @__PURE__ */ React8.createElement(StopPropagationWrapper, null, actions)
     ) : null)
   );
 };
+var StopPropagationWrapper = (props) => {
+  const handleClick = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ React8.createElement("div", { onClick: handleClick }, props.children);
+};
 
 // components/elements/Dialog.tsx
 import * as React9 from "react";
@@ -1194,7 +1207,7 @@ var Checkbox = ({
     {
       htmlFor: id,
       className: cn(
-        "hawa-select-none hawa-text-xs  hawa-text-red-500",
+        "hawa-select-none helper-text",
         checkboxProps.disabled && "hawa-cursor-not-allowed hawa-opacity-70"
       )
     },
@@ -1999,7 +2012,7 @@ var Textarea = React24.forwardRef(
         ref,
         ...props
       }
-    ), props.helperText && /* @__PURE__ */ React24.createElement("p", { className: "hawa-text-sm hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText));
+    ), props.helperText && /* @__PURE__ */ React24.createElement("p", { className: "helper-text" }, props.helperText));
   }
 );
 Textarea.displayName = "Textarea";
@@ -4223,7 +4236,7 @@ var Select = (props) => {
         onInputChange: (newValue, action) => props.onInputChange(newValue, action)
       }
     ),
-    props.helperText && /* @__PURE__ */ React29.createElement("p", { className: "hawa-text-sm hawa-text-red-600 dark:hawa-text-red-500" }, props.helperText)
+    props.helperText && /* @__PURE__ */ React29.createElement("p", { className: "helper-text" }, props.helperText)
   );
 };
 
@@ -4571,7 +4584,7 @@ var Input = ({
         placeholder: props.placeholder,
         disabled: preview
       }
-    )), 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)))
+    )), 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)))
   );
 };
 
@@ -8022,7 +8035,7 @@ var FeedbackForm = (props) => {
             ...field,
             onChange: (option) => field.onChange(option.value),
             options: props.requestTypes,
-            helperText: formState.errors.requestType && formState.errors.requestType?.message
+            helperText: formState.errors.requestType?.message?.toString()
           }
         )
       }

package/package.json

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