@sikka/hawa 0.10.7-next → 0.10.9-next

package/dist/index.css

@@ -1072,6 +1072,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-h-\[130px\] {
   height: 130px;
 }
+.hawa-h-\[14px\] {
+  height: 14px;
+}
 .hawa-h-\[15px\] {
   height: 15px;
 }
@@ -1224,6 +1227,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-w-\[100px\] {
   width: 100px;
 }
+.hawa-w-\[14px\] {
+  width: 14px;
+}
 .hawa-w-\[16px\] {
   width: 16px;
 }
@@ -1438,6 +1444,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-cursor-default {
   cursor: default;
 }
+.hawa-cursor-help {
+  cursor: help;
+}
 .hawa-cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -3444,9 +3453,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.d.mts

@@ -320,7 +320,9 @@ type TChipTypes = {
 };
 declare const Chip: FC<TChipTypes>;
 
-declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
+declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & {
+    hint?: React$1.ReactNode;
+} & React$1.RefAttributes<HTMLLabelElement>>;
 
 type AlertTypes = {
     severity?: "info" | "warning" | "error" | "success" | "none";
@@ -555,6 +557,7 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     multiline?: boolean;
     /** The small red text under the input field to show validation or a hint.   */
     helperText?: any;
+    hint?: string;
     inputProps?: any;
     /** The icon inside the input field */
     icon?: any;

package/dist/index.d.ts

@@ -320,7 +320,9 @@ type TChipTypes = {
 };
 declare const Chip: FC<TChipTypes>;
 
-declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
+declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & {
+    hint?: React$1.ReactNode;
+} & React$1.RefAttributes<HTMLLabelElement>>;
 
 type AlertTypes = {
     severity?: "info" | "warning" | "error" | "success" | "none";
@@ -555,6 +557,7 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     multiline?: boolean;
     /** The small red text under the input field to show validation or a hint.   */
     helperText?: any;
+    hint?: string;
     inputProps?: any;
     /** The icon inside the input field */
     icon?: any;

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
@@ -2329,13 +2332,42 @@ var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
 var import_class_variance_authority3 = require("class-variance-authority");
 var labelVariants = (0, import_class_variance_authority3.cva)("hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70");
 var Label2 = React23.forwardRef(function(_param, ref) /* @__PURE__ */ {
-    var className = _param.className, props = _object_without_properties(_param, [
-        "className"
+    var className = _param.className, hint = _param.hint, props = _object_without_properties(_param, [
+        "className",
+        "hint"
     ]);
-    return React23.createElement(LabelPrimitive.Root, _object_spread({
+    return React23.createElement("div", {
+        className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center  "
+    }, /* @__PURE__ */ React23.createElement(LabelPrimitive.Root, _object_spread({
         ref: ref,
         className: cn(labelVariants(), className)
-    }, props));
+    }, props)), hint && /* @__PURE__ */ React23.createElement(Tooltip, {
+        content: hint,
+        side: "right"
+    }, /* @__PURE__ */ React23.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "hawa-w-[14px] hawa-h-[14px] hawa-cursor-help",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+    }, /* @__PURE__ */ React23.createElement("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+    }), /* @__PURE__ */ React23.createElement("line", {
+        x1: "12",
+        x2: "12",
+        y1: "8",
+        y2: "12"
+    }), /* @__PURE__ */ React23.createElement("line", {
+        x1: "12",
+        x2: "12.01",
+        y1: "16",
+        y2: "16"
+    }))));
 });
 Label2.displayName = LabelPrimitive.Root.displayName;
 // components/elements/Alert.tsx
@@ -4931,7 +4963,10 @@ var Input = function(_param) {
     var defaultInputStyle = "hawa-block hawa-w-full hawa-rounded hawa-border hawa-transition-all hawa-bg-background hawa-p-2 hawa-text-sm ";
     return /* @__PURE__ */ import_react24.default.createElement("div", {
         className: cn(defaultStyle, marginStyles[margin], widthStyles[width], props.containerClassName, "hawa-w-full hawa-gap-2")
-    }, props.label && /* @__PURE__ */ import_react24.default.createElement(Label2, null, props.label), props.isLoading ? /* @__PURE__ */ import_react24.default.createElement(Skeleton, {
+    }, props.label && /* @__PURE__ */ import_react24.default.createElement(Label2, {
+        htmlFor: props.id,
+        hint: props.hint
+    }, props.label), props.isLoading ? /* @__PURE__ */ import_react24.default.createElement(Skeleton, {
         className: "hawa-h-[40px] hawa-w-full"
     }) : /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, /* @__PURE__ */ import_react24.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")
@@ -7216,6 +7251,7 @@ var RegisterForm = function(props) {
                     var _formState_errors_username;
                     var _field_value;
                     return import_react38.default.createElement(Input, {
+                        hint: "something something",
                         width: "full",
                         type: "text",
                         autoComplete: "username",

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"
         )
       },
@@ -1858,14 +1863,29 @@ import { cva as cva3 } from "class-variance-authority";
 var labelVariants = cva3(
   "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70"
 );
-var Label2 = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React23.createElement(
+var Label2 = React23.forwardRef(({ className, hint, ...props }, ref) => /* @__PURE__ */ React23.createElement("div", { className: "hawa-flex hawa-flex-row hawa-gap-2 hawa-items-center  " }, /* @__PURE__ */ React23.createElement(
   LabelPrimitive.Root,
   {
     ref,
     className: cn(labelVariants(), className),
     ...props
   }
-));
+), hint && /* @__PURE__ */ React23.createElement(Tooltip, { content: hint, side: "right" }, /* @__PURE__ */ React23.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "hawa-w-[14px] hawa-h-[14px] hawa-cursor-help",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  /* @__PURE__ */ React23.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ React23.createElement("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+  /* @__PURE__ */ React23.createElement("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+))));
 Label2.displayName = LabelPrimitive.Root.displayName;
 
 // components/elements/Alert.tsx
@@ -4565,7 +4585,7 @@ var Input = ({
         "hawa-w-full hawa-gap-2"
       )
     },
-    props.label && /* @__PURE__ */ React36.createElement(Label2, null, props.label),
+    props.label && /* @__PURE__ */ React36.createElement(Label2, { htmlFor: props.id, hint: props.hint }, props.label),
     props.isLoading ? /* @__PURE__ */ React36.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
       "div",
       {
@@ -7065,6 +7085,7 @@ var RegisterForm = (props) => {
             render: ({ field }) => /* @__PURE__ */ React58.createElement(
               Input,
               {
+                hint: "something something",
                 width: "full",
                 type: "text",
                 autoComplete: "username",

package/package.json

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