@sikka/hawa 0.15.18-next → 0.15.19-next

package/dist/index.css

@@ -741,8 +741,8 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-end-0 {
   inset-inline-end: 0px;
 }
-.hawa-end-2 {
-  inset-inline-end: 0.5rem;
+.hawa-end-3 {
+  inset-inline-end: 0.75rem;
 }
 .hawa-left-0 {
   left: 0px;
@@ -753,9 +753,6 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-left-2\.5 {
   left: 0.625rem;
 }
-.hawa-left-3 {
-  left: 0.75rem;
-}
 .hawa-left-4 {
   left: 1rem;
 }
@@ -777,6 +774,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-start-0 {
   inset-inline-start: 0px;
 }
+.hawa-start-3 {
+  inset-inline-start: 0.75rem;
+}
 .hawa-top-0 {
   top: 0px;
 }
@@ -801,9 +801,6 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-top-\[22px\] {
   top: 22px;
 }
-.hawa-top-\[41px\] {
-  top: 41px;
-}
 .hawa-top-\[50\%\] {
   top: 50%;
 }
@@ -2322,12 +2319,12 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-pb-4 {
   padding-bottom: 1rem;
 }
+.hawa-pe-9 {
+  padding-inline-end: 2.25rem;
+}
 .hawa-pl-0 {
   padding-left: 0px;
 }
-.hawa-pl-10 {
-  padding-left: 2.5rem;
-}
 .hawa-pl-2 {
   padding-left: 0.5rem;
 }
@@ -2349,6 +2346,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-pr-8 {
   padding-right: 2rem;
 }
+.hawa-ps-9 {
+  padding-inline-start: 2.25rem;
+}
 .hawa-pt-0 {
   padding-top: 0px;
 }

package/dist/index.d.mts

@@ -289,6 +289,8 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     /** Boolean to enable/disable editing the input field and using it as a text field   */
     preview?: boolean;
     iconInside?: React__default.ReactNode;
+    endIcon?: React__default.ReactNode;
+    startIcon?: React__default.ReactNode;
 };
 declare const Input: FC<TextFieldTypes>;
 

package/dist/index.d.ts

@@ -289,6 +289,8 @@ type TextFieldTypes = React__default.InputHTMLAttributes<HTMLInputElement> & {
     /** Boolean to enable/disable editing the input field and using it as a text field   */
     preview?: boolean;
     iconInside?: React__default.ReactNode;
+    endIcon?: React__default.ReactNode;
+    startIcon?: React__default.ReactNode;
 };
 declare const Input: FC<TextFieldTypes>;
 

package/dist/index.js

@@ -4071,11 +4071,12 @@ var Input = function(_param) {
         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")
     }), /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement("div", {
         className: cn("hawa-relative")
-    }, props.icon && /* @__PURE__ */ import_react15.default.createElement("div", {
-        className: "hawa-absolute hawa-left-3 hawa-top-1/2 hawa--translate-y-1/2"
-    }, props.icon), /* @__PURE__ */ import_react15.default.createElement("input", {
+    }, props.startIcon && /* @__PURE__ */ import_react15.default.createElement("div", {
+        className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2"
+    }, props.startIcon), props.endIcon && /* @__PURE__ */ import_react15.default.createElement("div", {
+        className: "hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2"
+    }, props.endIcon), /* @__PURE__ */ import_react15.default.createElement("input", {
         required: true,
-        className: cn(defaultInputStyle, " dark:hawa-text-white", props.icon && "hawa-pl-10", "focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0", preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0", (_props_inputProps = props.inputProps) === null || _props_inputProps === void 0 ? void 0 : _props_inputProps.className),
         dir: props.dir,
         type: props.type,
         value: props.value,
@@ -4086,10 +4087,9 @@ var Input = function(_param) {
         disabled: preview,
         style: {
             height: 40
-        }
-    })), props.iconInside && /* @__PURE__ */ import_react15.default.createElement("div", {
-        className: "hawa-absolute hawa-end-2 hawa-top-[41px] hawa-mx-1  hawa--translate-y-1/2"
-    }, props.iconInside), !forceHideHelperText && /* @__PURE__ */ import_react15.default.createElement("p", {
+        },
+        className: cn(defaultInputStyle, " dark:hawa-text-white focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0", props.endIcon && "hawa-pe-9", props.startIcon && "hawa-ps-9", preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0", (_props_inputProps = props.inputProps) === null || _props_inputProps === void 0 ? void 0 : _props_inputProps.className)
+    })), !forceHideHelperText && /* @__PURE__ */ import_react15.default.createElement("p", {
         className: cn("hawa-my-0 hawa-text-xs hawa-text-helper-color hawa-transition-all hawa-text-start", props.helperText ? "hawa-opacity-100 hawa-h-4" : "hawa-opacity-0 hawa-h-0")
     }, props.helperText))));
 };
@@ -8163,11 +8163,9 @@ var VeryBadEmoji = function() {
 var import_react46 = __toESM(require("react"));
 var EyeIcon = function(props) {
     return /* @__PURE__ */ import_react46.default.createElement("div", {
-        className: props.classNames
+        className: cn("hawa-h-5 hawa-w-5", props.className)
     }, /* @__PURE__ */ import_react46.default.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
         viewBox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",
@@ -8184,11 +8182,9 @@ var EyeIcon = function(props) {
 };
 var HiddenEyeIcon = function(props) {
     return /* @__PURE__ */ import_react46.default.createElement("div", {
-        className: props.classNames
+        className: cn("hawa-h-5 hawa-w-5", props.className)
     }, /* @__PURE__ */ import_react46.default.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
-        width: "24",
-        height: "24",
         viewBox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",
@@ -8351,15 +8347,15 @@ var LoginForm = function(_param) {
                             autoComplete: "current-password",
                             type: passwordVisible ? "text" : "password",
                             label: (texts === null || texts === void 0 ? void 0 : (_texts_password = texts.password) === null || _texts_password === void 0 ? void 0 : _texts_password.label) || "Password",
-                            iconInside: /* @__PURE__ */ import_react47.default.createElement("div", {
+                            endIcon: /* @__PURE__ */ import_react47.default.createElement("div", {
                                 className: "hawa-cursor-pointer",
                                 onClick: function() {
                                     return setPasswordVisible(!passwordVisible);
                                 }
                             }, passwordVisible ? /* @__PURE__ */ import_react47.default.createElement(EyeIcon, {
-                                classNames: "hawa-text-gray-500"
+                                className: "hawa-text-gray-500"
                             }) : /* @__PURE__ */ import_react47.default.createElement(HiddenEyeIcon, {
-                                classNames: "hawa-text-gray-500"
+                                className: "hawa-text-gray-500"
                             })),
                             placeholder: (texts === null || texts === void 0 ? void 0 : (_texts_password1 = texts.password) === null || _texts_password1 === void 0 ? void 0 : _texts_password1.placeholder) || "Enter your password",
                             helperText: (_formState_errors_password = formState.errors.password) === null || _formState_errors_password === void 0 ? void 0 : _formState_errors_password.message
@@ -8395,15 +8391,15 @@ var LoginForm = function(_param) {
                             autoComplete: "current-password",
                             type: passwordVisible ? "text" : "password",
                             label: texts === null || texts === void 0 ? void 0 : (_texts_password = texts.password) === null || _texts_password === void 0 ? void 0 : _texts_password.label,
-                            iconInside: /* @__PURE__ */ import_react47.default.createElement("div", {
+                            endIcon: /* @__PURE__ */ import_react47.default.createElement("div", {
                                 className: "hawa-cursor-pointer",
                                 onClick: function() {
                                     return setPasswordVisible(!passwordVisible);
                                 }
                             }, passwordVisible ? /* @__PURE__ */ import_react47.default.createElement(EyeIcon, {
-                                classNames: "hawa-text-gray-500"
+                                className: "hawa-text-gray-500"
                             }) : /* @__PURE__ */ import_react47.default.createElement(HiddenEyeIcon, {
-                                classNames: "hawa-text-gray-500"
+                                className: "hawa-text-gray-500"
                             })),
                             placeholder: (texts === null || texts === void 0 ? void 0 : (_texts_password1 = texts.password) === null || _texts_password1 === void 0 ? void 0 : _texts_password1.placeholder) || "Enter your password",
                             helperText: (_formState_errors_password = formState.errors.password) === null || _formState_errors_password === void 0 ? void 0 : _formState_errors_password.message
@@ -8682,15 +8678,15 @@ var RegisterForm = function(_param) {
             return /* @__PURE__ */ import_react48.default.createElement(Input, _object_spread({
                 width: "full",
                 type: passwordVisible ? "text" : "password",
-                iconInside: /* @__PURE__ */ import_react48.default.createElement("div", {
+                endIcon: /* @__PURE__ */ import_react48.default.createElement("div", {
                     className: "hawa-cursor-pointer",
                     onClick: function() {
                         return setPasswordVisible(!passwordVisible);
                     }
                 }, passwordVisible ? /* @__PURE__ */ import_react48.default.createElement(EyeIcon, {
-                    classNames: "hawa-text-gray-500"
+                    className: "hawa-text-gray-500"
                 }) : /* @__PURE__ */ import_react48.default.createElement(HiddenEyeIcon, {
-                    classNames: "hawa-text-gray-500"
+                    className: "hawa-text-gray-500"
                 }), " "),
                 autoComplete: "new-password",
                 label: texts === null || texts === void 0 ? void 0 : (_texts_password = texts.password) === null || _texts_password === void 0 ? void 0 : _texts_password.label,

package/dist/index.mjs

@@ -3483,18 +3483,10 @@ var Input = ({
           preview ? "hawa-opacity-100" : "hawa-opacity-0"
         )
       }
-    ), /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", { className: cn("hawa-relative") }, props.icon && /* @__PURE__ */ React24.createElement("div", { className: "hawa-absolute hawa-left-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.icon), /* @__PURE__ */ React24.createElement(
+    ), /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", { className: cn("hawa-relative") }, props.startIcon && /* @__PURE__ */ React24.createElement("div", { className: "hawa-absolute hawa-start-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.startIcon), props.endIcon && /* @__PURE__ */ React24.createElement("div", { className: "hawa-absolute hawa-end-3 hawa-top-1/2 hawa--translate-y-1/2" }, props.endIcon), /* @__PURE__ */ React24.createElement(
       "input",
       {
         required: true,
-        className: cn(
-          defaultInputStyle,
-          " dark:hawa-text-white",
-          props.icon && "hawa-pl-10",
-          "focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0",
-          preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0",
-          props.inputProps?.className
-        ),
         dir: props.dir,
         type: props.type,
         value: props.value,
@@ -3503,9 +3495,17 @@ var Input = ({
         defaultValue: props.defaultValue,
         placeholder: props.placeholder,
         disabled: preview,
-        style: { height: 40 }
+        style: { height: 40 },
+        className: cn(
+          defaultInputStyle,
+          " dark:hawa-text-white focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0",
+          props.endIcon && "hawa-pe-9",
+          props.startIcon && "hawa-ps-9",
+          preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0",
+          props.inputProps?.className
+        )
       }
-    )), props.iconInside && /* @__PURE__ */ React24.createElement("div", { className: "hawa-absolute hawa-end-2 hawa-top-[41px] hawa-mx-1  hawa--translate-y-1/2" }, props.iconInside), !forceHideHelperText && /* @__PURE__ */ React24.createElement(
+    )), !forceHideHelperText && /* @__PURE__ */ React24.createElement(
       "p",
       {
         className: cn(
@@ -8275,12 +8275,10 @@ var VeryBadEmoji = () => /* @__PURE__ */ React.createElement(
 
 // components/icons/InputIcons.tsx
 import React73 from "react";
-var EyeIcon = (props) => /* @__PURE__ */ React73.createElement("div", { className: props.classNames }, /* @__PURE__ */ React73.createElement(
+var EyeIcon = (props) => /* @__PURE__ */ React73.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ React73.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
@@ -8291,12 +8289,10 @@ var EyeIcon = (props) => /* @__PURE__ */ React73.createElement("div", { classNam
   /* @__PURE__ */ React73.createElement("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
   /* @__PURE__ */ React73.createElement("circle", { cx: "12", cy: "12", r: "3" })
 ));
-var HiddenEyeIcon = (props) => /* @__PURE__ */ React73.createElement("div", { className: props.classNames }, /* @__PURE__ */ React73.createElement(
+var HiddenEyeIcon = (props) => /* @__PURE__ */ React73.createElement("div", { className: cn("hawa-h-5 hawa-w-5", props.className) }, /* @__PURE__ */ React73.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
@@ -8436,13 +8432,13 @@ var LoginForm = ({
                 autoComplete: "current-password",
                 type: passwordVisible ? "text" : "password",
                 label: texts?.password?.label || "Password",
-                iconInside: /* @__PURE__ */ React74.createElement(
+                endIcon: /* @__PURE__ */ React74.createElement(
                   "div",
                   {
                     className: "hawa-cursor-pointer",
                     onClick: () => setPasswordVisible(!passwordVisible)
                   },
-                  passwordVisible ? /* @__PURE__ */ React74.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React74.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" })
+                  passwordVisible ? /* @__PURE__ */ React74.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React74.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" })
                 ),
                 placeholder: texts?.password?.placeholder || "Enter your password",
                 helperText: formState.errors.password?.message,
@@ -8490,13 +8486,13 @@ var LoginForm = ({
                 autoComplete: "current-password",
                 type: passwordVisible ? "text" : "password",
                 label: texts?.password?.label,
-                iconInside: /* @__PURE__ */ React74.createElement(
+                endIcon: /* @__PURE__ */ React74.createElement(
                   "div",
                   {
                     className: "hawa-cursor-pointer",
                     onClick: () => setPasswordVisible(!passwordVisible)
                   },
-                  passwordVisible ? /* @__PURE__ */ React74.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React74.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" })
+                  passwordVisible ? /* @__PURE__ */ React74.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React74.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" })
                 ),
                 placeholder: texts?.password?.placeholder || "Enter your password",
                 helperText: formState.errors.password?.message,
@@ -8782,13 +8778,13 @@ var RegisterForm = ({ texts, ...props }) => {
           {
             width: "full",
             type: passwordVisible ? "text" : "password",
-            iconInside: /* @__PURE__ */ React75.createElement(
+            endIcon: /* @__PURE__ */ React75.createElement(
               "div",
               {
                 className: "hawa-cursor-pointer",
                 onClick: () => setPasswordVisible(!passwordVisible)
               },
-              passwordVisible ? /* @__PURE__ */ React75.createElement(EyeIcon, { classNames: "hawa-text-gray-500" }) : /* @__PURE__ */ React75.createElement(HiddenEyeIcon, { classNames: "hawa-text-gray-500" }),
+              passwordVisible ? /* @__PURE__ */ React75.createElement(EyeIcon, { className: "hawa-text-gray-500" }) : /* @__PURE__ */ React75.createElement(HiddenEyeIcon, { className: "hawa-text-gray-500" }),
               " "
             ),
             autoComplete: "new-password",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.15.18-next",
+  "version": "0.15.19-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -44,23 +44,23 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-table": "^8.10.7",
-    "@types/node": "^20.8.9",
-    "@types/react": "^18.2.33",
+    "@types/node": "^20.8.10",
+    "@types/react": "^18.2.34",
     "@types/react-dom": "^18.2.14",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "embla-carousel-react": "^8.0.0-rc14",
-    "eslint": "^8.52.0",
-    "eslint-config-next": "^14.0.0",
+    "eslint": "^8.53.0",
+    "eslint-config-next": "^14.0.1",
     "libphonenumber-js": "^1.10.49",
-    "next": "^14.0.0",
+    "next": "^14.0.1",
     "next-themes": "^0.2.1",
     "prism-react-renderer": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.47.0",
+    "react-hook-form": "^7.48.1",
     "react-select": "^5.7.7",
     "tailwind-merge": "^2.0.0",
     "typescript": "5.2.2",
@@ -86,7 +86,7 @@
     "eslint-plugin-storybook": "^0.6.15",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lucide-react": "^0.290.0",
+    "lucide-react": "^0.292.0",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",