@sikka/hawa 0.10.8-next → 0.10.10-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;
 }

package/dist/index.d.mts

@@ -320,7 +320,10 @@ 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;
+    hintSide?: "top" | "right" | "bottom" | "left" | undefined;
+} & React$1.RefAttributes<HTMLLabelElement>>;
 
 type AlertTypes = {
     severity?: "info" | "warning" | "error" | "success" | "none";
@@ -555,6 +558,8 @@ 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;
+    hintSide?: "top" | "bottom" | "right" | "left";
     inputProps?: any;
     /** The icon inside the input field */
     icon?: any;

package/dist/index.d.ts

@@ -320,7 +320,10 @@ 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;
+    hintSide?: "top" | "right" | "bottom" | "left" | undefined;
+} & React$1.RefAttributes<HTMLLabelElement>>;
 
 type AlertTypes = {
     severity?: "info" | "warning" | "error" | "success" | "none";
@@ -555,6 +558,8 @@ 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;
+    hintSide?: "top" | "bottom" | "right" | "left";
     inputProps?: any;
     /** The icon inside the input field */
     icon?: any;

package/dist/index.js

@@ -2332,13 +2332,43 @@ 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, hintSide = _param.hintSide, props = _object_without_properties(_param, [
+        "className",
+        "hint",
+        "hintSide"
     ]);
-    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: hintSide
+    }, /* @__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
@@ -4934,7 +4964,11 @@ 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,
+        hintSide: props.hintSide
+    }, 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")
@@ -7219,6 +7253,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

@@ -1863,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, hintSide, ...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: hintSide }, /* @__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
@@ -4570,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, hintSide: props.hintSide }, 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",
       {
@@ -7070,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.8-next",
+  "version": "0.10.10-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {