@sikka/hawa 0.18.15-next → 0.18.18-next

package/dist/index.css

@@ -1054,6 +1054,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-top-\[22px\] {
   top: 22px;
 }
+.hawa-top-\[47px\] {
+  top: 47px;
+}
 .hawa-top-\[50\%\] {
   top: 50%;
 }
@@ -1081,6 +1084,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-z-10 {
   z-index: 10;
 }
+.hawa-z-20 {
+  z-index: 20;
+}
 .hawa-z-30 {
   z-index: 30;
 }
@@ -1719,6 +1725,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.hawa-translate-y-1\/2 {
+  --tw-translate-y: 50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .hawa-translate-y-\[-50\%\] {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2958,6 +2968,11 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.hawa-shadow-none {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .hawa-shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -2978,6 +2993,10 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
+.hawa-drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .hawa-drop-shadow-xl {
   --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

package/dist/index.d.mts

@@ -296,6 +296,8 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     } | undefined;
     startIcon?: React__default.ReactNode;
     placeholder?: React__default.ReactNode;
+    /** Show the count of characters left in the input field. Works along with maxLength prop.   */
+    showCount?: boolean | undefined;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 type ComboboxTypes<T> = {
@@ -611,8 +613,8 @@ interface PopoverProps {
     disableTrigger?: any;
     width?: "trigger" | "default";
     open?: boolean;
-    contentProps?: any;
-    triggerProps?: any;
+    contentProps?: PopoverPrimitive.PopoverContentProps;
+    triggerProps?: PopoverPrimitive.PopoverTriggerProps;
 }
 type HawaPopoverTypes = PopoverProps & React$1.ComponentProps<typeof PopoverPrimitive.Root>;
 declare const Popover: React$1.FC<HawaPopoverTypes>;
@@ -1535,18 +1537,24 @@ type ComponentTypes = {
 };
 declare const FeedbackEmoji: FC<ComponentTypes>;
 
+type FeedbackFormRequestTypeInputProps = BaseInputType & {
+    required?: string;
+};
+type FeedbackFormDescriptionInputProps = BaseInputType & {
+    required?: string;
+    tooShort?: string;
+};
 type FeedbackFormType = {
     onSubmit: (e: any) => void;
     requestTypes?: {
         label: string;
         value: any;
     }[];
+    selectProps?: any;
+    cardless?: boolean;
     texts: {
-        requestType?: string;
-        requestTypeRequired?: string;
-        description?: string;
-        descriptionRequired?: string;
-        descriptionTooShort?: string;
+        requestType: FeedbackFormRequestTypeInputProps;
+        description: FeedbackFormDescriptionInputProps;
         submit?: string;
     };
 };

package/dist/index.d.ts

@@ -296,6 +296,8 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     } | undefined;
     startIcon?: React__default.ReactNode;
     placeholder?: React__default.ReactNode;
+    /** Show the count of characters left in the input field. Works along with maxLength prop.   */
+    showCount?: boolean | undefined;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 type ComboboxTypes<T> = {
@@ -611,8 +613,8 @@ interface PopoverProps {
     disableTrigger?: any;
     width?: "trigger" | "default";
     open?: boolean;
-    contentProps?: any;
-    triggerProps?: any;
+    contentProps?: PopoverPrimitive.PopoverContentProps;
+    triggerProps?: PopoverPrimitive.PopoverTriggerProps;
 }
 type HawaPopoverTypes = PopoverProps & React$1.ComponentProps<typeof PopoverPrimitive.Root>;
 declare const Popover: React$1.FC<HawaPopoverTypes>;
@@ -1535,18 +1537,24 @@ type ComponentTypes = {
 };
 declare const FeedbackEmoji: FC<ComponentTypes>;
 
+type FeedbackFormRequestTypeInputProps = BaseInputType & {
+    required?: string;
+};
+type FeedbackFormDescriptionInputProps = BaseInputType & {
+    required?: string;
+    tooShort?: string;
+};
 type FeedbackFormType = {
     onSubmit: (e: any) => void;
     requestTypes?: {
         label: string;
         value: any;
     }[];
+    selectProps?: any;
+    cardless?: boolean;
     texts: {
-        requestType?: string;
-        requestTypeRequired?: string;
-        description?: string;
-        descriptionRequired?: string;
-        descriptionTooShort?: string;
+        requestType: FeedbackFormRequestTypeInputProps;
+        description: FeedbackFormDescriptionInputProps;
         submit?: string;
     };
 };

package/dist/index.js

@@ -3787,6 +3787,7 @@ var Input = (0, import_react15.forwardRef)(
     forceHideHelperText = false,
     labelProps,
     placeholder,
+    showCount,
     ...props
   }, ref) => {
     var _a, _b;
@@ -3835,6 +3836,7 @@ var Input = (0, import_react15.forwardRef)(
       ), /* @__PURE__ */ import_react15.default.createElement(
         "input",
         {
+          ...props,
           required: true,
           dir: props.dir,
           type: props.type,
@@ -3863,6 +3865,25 @@ var Input = (0, import_react15.forwardRef)(
           )
         },
         props.helperText
+      ), !props.disabled && forceHideHelperText && /* @__PURE__ */ import_react15.default.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-absolute hawa-top-[47px] hawa-text-sm hawa-text-helper-color hawa-transition-all hawa-text-start hawa-rounded hawa-end-0  hawa-z-20 hawa-drop-shadow-md hawa-bg-background hawa-translate-y-1/2",
+            props.helperText ? "hawa-border hawa-p-1" : " hawa-border-none hawa-p-0"
+          )
+        },
+        props.helperText
+      ), showCount && /* @__PURE__ */ import_react15.default.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-absolute hawa-top-[60px] hawa-text-sm hawa-transition-all hawa-text-start hawa-end-0   hawa-translate-y-1/2"
+          )
+        },
+        props.value ? String(props.value).length : 0,
+        "/",
+        props.maxLength
       )))
     );
   }
@@ -10581,65 +10602,75 @@ var z7 = __toESM(require("zod"));
 var FeedbackForm = (props) => {
   var _a, _b;
   const formSchema = z7.object({
-    requestType: z7.string({ required_error: props.texts.requestTypeRequired }).min(1, { message: props.texts.requestTypeRequired }),
-    description: z7.string({ required_error: props.texts.descriptionRequired }).min(10, { message: props.texts.descriptionTooShort })
+    requestType: z7.string({ required_error: props.texts.requestType.required }).min(1, { message: props.texts.requestType.required }),
+    description: z7.string({ required_error: props.texts.description.required }).min(10, { message: props.texts.description.tooShort })
   });
   const { handleSubmit, control, formState } = (0, import_react_hook_form7.useForm)({
     resolver: (0, import_zod7.zodResolver)(formSchema)
   });
-  return /* @__PURE__ */ import_react59.default.createElement(Card, null, /* @__PURE__ */ import_react59.default.createElement(CardContent, { headless: true }, /* @__PURE__ */ import_react59.default.createElement(
-    "form",
+  return /* @__PURE__ */ import_react59.default.createElement(
+    Card,
     {
-      noValidate: true,
-      onSubmit: handleSubmit((e) => {
-        if (props.onSubmit) {
-          return props.onSubmit(e);
-        } else {
-          console.log("Form is submitted but onSubmit prop is missing");
-        }
-      }),
-      className: "hawa-flex hawa-flex-col hawa-gap-4"
+      className: cn(
+        props.cardless ? "hawa-bg-transparent hawa-border-none hawa-shadow-none" : ""
+      )
     },
-    /* @__PURE__ */ import_react59.default.createElement(Label2, null, (_a = props.texts) == null ? void 0 : _a.requestType),
-    /* @__PURE__ */ import_react59.default.createElement(
-      import_react_hook_form7.Controller,
+    /* @__PURE__ */ import_react59.default.createElement(CardContent, { headless: true }, /* @__PURE__ */ import_react59.default.createElement(
+      "form",
       {
-        name: "requestType",
-        control,
-        render: ({ field }) => {
-          var _a2, _b2;
-          return /* @__PURE__ */ import_react59.default.createElement(
-            Select,
-            {
-              ...field,
-              onChange: (option) => field.onChange(option.value),
-              options: props.requestTypes,
-              helperText: (_b2 = (_a2 = formState.errors.requestType) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()
-            }
-          );
+        noValidate: true,
+        onSubmit: handleSubmit((e) => {
+          if (props.onSubmit) {
+            return props.onSubmit(e);
+          } else {
+            console.log("Form is submitted but onSubmit prop is missing");
+          }
+        }),
+        className: "hawa-flex hawa-flex-col hawa-gap-4"
+      },
+      /* @__PURE__ */ import_react59.default.createElement(Label2, null, (_a = props.texts) == null ? void 0 : _a.requestType.label),
+      /* @__PURE__ */ import_react59.default.createElement(
+        import_react_hook_form7.Controller,
+        {
+          name: "requestType",
+          control,
+          render: ({ field }) => {
+            var _a2, _b2, _c;
+            return /* @__PURE__ */ import_react59.default.createElement(
+              Select,
+              {
+                ...field,
+                ...props.selectProps,
+                onChange: (option) => field.onChange(option.value),
+                options: props.requestTypes,
+                helperText: (_b2 = (_a2 = formState.errors.requestType) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString(),
+                placeholder: (_c = props.texts) == null ? void 0 : _c.requestType.placeholder
+              }
+            );
+          }
         }
-      }
-    ),
-    /* @__PURE__ */ import_react59.default.createElement(Label2, null, props.texts.description),
-    /* @__PURE__ */ import_react59.default.createElement(
-      import_react_hook_form7.Controller,
-      {
-        name: "description",
-        control,
-        render: ({ field }) => {
-          var _a2, _b2;
-          return /* @__PURE__ */ import_react59.default.createElement(
-            Textarea,
-            {
-              ...field,
-              helperText: formState.errors.description && ((_b2 = (_a2 = formState.errors.description) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString())
-            }
-          );
+      ),
+      /* @__PURE__ */ import_react59.default.createElement(Label2, null, props.texts.description.label),
+      /* @__PURE__ */ import_react59.default.createElement(
+        import_react_hook_form7.Controller,
+        {
+          name: "description",
+          control,
+          render: ({ field }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ import_react59.default.createElement(
+              Textarea,
+              {
+                ...field,
+                helperText: formState.errors.description && ((_b2 = (_a2 = formState.errors.description) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString())
+              }
+            );
+          }
         }
-      }
-    ),
-    /* @__PURE__ */ import_react59.default.createElement(Button, { type: "submit" }, (_b = props.texts) == null ? void 0 : _b.submit)
-  )));
+      ),
+      /* @__PURE__ */ import_react59.default.createElement(Button, { type: "submit" }, (_b = props.texts) == null ? void 0 : _b.submit)
+    ))
+  );
 };
 
 // components/blocks/misc/LegalTexts.tsx

package/dist/index.mjs

@@ -3565,6 +3565,7 @@ var Input = forwardRef9(
     forceHideHelperText = false,
     labelProps,
     placeholder,
+    showCount,
     ...props
   }, ref) => {
     var _a, _b;
@@ -3613,6 +3614,7 @@ var Input = forwardRef9(
       ), /* @__PURE__ */ React24.createElement(
         "input",
         {
+          ...props,
           required: true,
           dir: props.dir,
           type: props.type,
@@ -3641,6 +3643,25 @@ var Input = forwardRef9(
           )
         },
         props.helperText
+      ), !props.disabled && forceHideHelperText && /* @__PURE__ */ React24.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-absolute hawa-top-[47px] hawa-text-sm hawa-text-helper-color hawa-transition-all hawa-text-start hawa-rounded hawa-end-0  hawa-z-20 hawa-drop-shadow-md hawa-bg-background hawa-translate-y-1/2",
+            props.helperText ? "hawa-border hawa-p-1" : " hawa-border-none hawa-p-0"
+          )
+        },
+        props.helperText
+      ), showCount && /* @__PURE__ */ React24.createElement(
+        "div",
+        {
+          className: cn(
+            "hawa-absolute hawa-top-[60px] hawa-text-sm hawa-transition-all hawa-text-start hawa-end-0   hawa-translate-y-1/2"
+          )
+        },
+        props.value ? String(props.value).length : 0,
+        "/",
+        props.maxLength
       )))
     );
   }
@@ -10373,65 +10394,75 @@ import * as z7 from "zod";
 var FeedbackForm = (props) => {
   var _a, _b;
   const formSchema = z7.object({
-    requestType: z7.string({ required_error: props.texts.requestTypeRequired }).min(1, { message: props.texts.requestTypeRequired }),
-    description: z7.string({ required_error: props.texts.descriptionRequired }).min(10, { message: props.texts.descriptionTooShort })
+    requestType: z7.string({ required_error: props.texts.requestType.required }).min(1, { message: props.texts.requestType.required }),
+    description: z7.string({ required_error: props.texts.description.required }).min(10, { message: props.texts.description.tooShort })
   });
   const { handleSubmit, control, formState } = useForm7({
     resolver: zodResolver7(formSchema)
   });
-  return /* @__PURE__ */ React86.createElement(Card, null, /* @__PURE__ */ React86.createElement(CardContent, { headless: true }, /* @__PURE__ */ React86.createElement(
-    "form",
+  return /* @__PURE__ */ React86.createElement(
+    Card,
     {
-      noValidate: true,
-      onSubmit: handleSubmit((e) => {
-        if (props.onSubmit) {
-          return props.onSubmit(e);
-        } else {
-          console.log("Form is submitted but onSubmit prop is missing");
-        }
-      }),
-      className: "hawa-flex hawa-flex-col hawa-gap-4"
+      className: cn(
+        props.cardless ? "hawa-bg-transparent hawa-border-none hawa-shadow-none" : ""
+      )
     },
-    /* @__PURE__ */ React86.createElement(Label2, null, (_a = props.texts) == null ? void 0 : _a.requestType),
-    /* @__PURE__ */ React86.createElement(
-      Controller7,
+    /* @__PURE__ */ React86.createElement(CardContent, { headless: true }, /* @__PURE__ */ React86.createElement(
+      "form",
       {
-        name: "requestType",
-        control,
-        render: ({ field }) => {
-          var _a2, _b2;
-          return /* @__PURE__ */ React86.createElement(
-            Select,
-            {
-              ...field,
-              onChange: (option) => field.onChange(option.value),
-              options: props.requestTypes,
-              helperText: (_b2 = (_a2 = formState.errors.requestType) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString()
-            }
-          );
+        noValidate: true,
+        onSubmit: handleSubmit((e) => {
+          if (props.onSubmit) {
+            return props.onSubmit(e);
+          } else {
+            console.log("Form is submitted but onSubmit prop is missing");
+          }
+        }),
+        className: "hawa-flex hawa-flex-col hawa-gap-4"
+      },
+      /* @__PURE__ */ React86.createElement(Label2, null, (_a = props.texts) == null ? void 0 : _a.requestType.label),
+      /* @__PURE__ */ React86.createElement(
+        Controller7,
+        {
+          name: "requestType",
+          control,
+          render: ({ field }) => {
+            var _a2, _b2, _c;
+            return /* @__PURE__ */ React86.createElement(
+              Select,
+              {
+                ...field,
+                ...props.selectProps,
+                onChange: (option) => field.onChange(option.value),
+                options: props.requestTypes,
+                helperText: (_b2 = (_a2 = formState.errors.requestType) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString(),
+                placeholder: (_c = props.texts) == null ? void 0 : _c.requestType.placeholder
+              }
+            );
+          }
         }
-      }
-    ),
-    /* @__PURE__ */ React86.createElement(Label2, null, props.texts.description),
-    /* @__PURE__ */ React86.createElement(
-      Controller7,
-      {
-        name: "description",
-        control,
-        render: ({ field }) => {
-          var _a2, _b2;
-          return /* @__PURE__ */ React86.createElement(
-            Textarea,
-            {
-              ...field,
-              helperText: formState.errors.description && ((_b2 = (_a2 = formState.errors.description) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString())
-            }
-          );
+      ),
+      /* @__PURE__ */ React86.createElement(Label2, null, props.texts.description.label),
+      /* @__PURE__ */ React86.createElement(
+        Controller7,
+        {
+          name: "description",
+          control,
+          render: ({ field }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ React86.createElement(
+              Textarea,
+              {
+                ...field,
+                helperText: formState.errors.description && ((_b2 = (_a2 = formState.errors.description) == null ? void 0 : _a2.message) == null ? void 0 : _b2.toString())
+              }
+            );
+          }
         }
-      }
-    ),
-    /* @__PURE__ */ React86.createElement(Button, { type: "submit" }, (_b = props.texts) == null ? void 0 : _b.submit)
-  )));
+      ),
+      /* @__PURE__ */ React86.createElement(Button, { type: "submit" }, (_b = props.texts) == null ? void 0 : _b.submit)
+    ))
+  );
 };
 
 // components/blocks/misc/LegalTexts.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.18.15-next",
+  "version": "0.18.18-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",