@sikka/hawa 0.17.11-next → 0.17.12-next

package/dist/index.d.mts

@@ -185,12 +185,21 @@ type PinInputTypes = {
 };
 declare const PinInput: FC<PinInputTypes>;
 
+type LabelProps = {
+    hint?: React$1.ReactNode;
+    hintSide?: PositionType;
+    htmlFor?: string;
+    required?: boolean;
+};
+declare const Label: React$1.ForwardRefExoticComponent<React$1.LabelHTMLAttributes<HTMLLabelElement> & LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
+
 type PhoneInputTypes = {
     preferredCountry?: {
         label: string;
     };
     helperText?: any;
     label?: string;
+    labelProps?: LabelProps;
     handleChange?: (value: string) => void;
 };
 declare const PhoneInput: FC<PhoneInputTypes>;
@@ -205,17 +214,6 @@ type CheckboxProps = CheckBoxTypes & React$1.ComponentProps<typeof CheckboxEleme
 declare const Checkbox: React$1.FC<CheckboxProps>;
 declare const CheckboxElement: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
-type LabelProps = React$1.LabelHTMLAttributes<HTMLLabelElement> & {
-    hint?: React$1.ReactNode;
-    hintSide?: PositionType;
-    required?: boolean;
-};
-declare const Label: React$1.ForwardRefExoticComponent<React$1.LabelHTMLAttributes<HTMLLabelElement> & {
-    hint?: React$1.ReactNode;
-    hintSide?: PositionType | undefined;
-    required?: boolean | undefined;
-} & React$1.RefAttributes<HTMLLabelElement>>;
-
 type RadioOptionsTypes = {
     value: any;
     label: any;
@@ -233,6 +231,7 @@ type RadioTypes = {
     direction?: DirectionType;
     helperText?: string;
     labelProps?: LabelProps;
+    label?: string;
 };
 declare const Radio: FC<RadioTypes>;
 
@@ -253,9 +252,7 @@ declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.Sli
 type ColorPickerTypes = {
     label?: string;
     id?: string;
-    hint?: string;
-    hintSide?: PositionType;
-    isRequired?: boolean;
+    labelProps?: LabelProps;
     helperText?: string;
     /** The hex code for the color */
     color?: any;
@@ -276,13 +273,10 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     width?: "small" | "full" | "normal" | "auto" | undefined;
     /** The label of the input field   */
     label?: any;
-    hint?: string | undefined;
-    hintSide?: PositionType | undefined;
-    /** If true, it will show a red asterisk next to the label*/
-    isRequired?: boolean | undefined;
+    labelProps?: LabelProps | undefined;
     /** Disable/Enable multiple line text input field   */
     multiline?: boolean | undefined;
-    /** The small red text under the input field to show validation or a hint.   */
+    /** The small red text under the input field to show validation.   */
     helperText?: any;
     forceHideHelperText?: boolean | undefined;
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement> | undefined;
@@ -315,8 +309,7 @@ type ComboboxTypes<T> = {
     id?: string;
     /** The label of the input field   */
     label?: any;
-    hint?: string;
-    hintSide?: PositionType;
+    labelProps?: LabelProps;
     /** If true, it will show a red asterisk next to the label*/
     isRequired?: boolean;
     onChange?: (e: any) => void;
@@ -353,6 +346,7 @@ type SelectTypes = {
     hideIndicator?: boolean;
     phoneCode?: boolean;
     isLoading?: any;
+    labelProps?: LabelProps;
     texts?: {
         noOptions?: string;
         createLabel?: string;

package/dist/index.d.ts

@@ -185,12 +185,21 @@ type PinInputTypes = {
 };
 declare const PinInput: FC<PinInputTypes>;
 
+type LabelProps = {
+    hint?: React$1.ReactNode;
+    hintSide?: PositionType;
+    htmlFor?: string;
+    required?: boolean;
+};
+declare const Label: React$1.ForwardRefExoticComponent<React$1.LabelHTMLAttributes<HTMLLabelElement> & LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
+
 type PhoneInputTypes = {
     preferredCountry?: {
         label: string;
     };
     helperText?: any;
     label?: string;
+    labelProps?: LabelProps;
     handleChange?: (value: string) => void;
 };
 declare const PhoneInput: FC<PhoneInputTypes>;
@@ -205,17 +214,6 @@ type CheckboxProps = CheckBoxTypes & React$1.ComponentProps<typeof CheckboxEleme
 declare const Checkbox: React$1.FC<CheckboxProps>;
 declare const CheckboxElement: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
-type LabelProps = React$1.LabelHTMLAttributes<HTMLLabelElement> & {
-    hint?: React$1.ReactNode;
-    hintSide?: PositionType;
-    required?: boolean;
-};
-declare const Label: React$1.ForwardRefExoticComponent<React$1.LabelHTMLAttributes<HTMLLabelElement> & {
-    hint?: React$1.ReactNode;
-    hintSide?: PositionType | undefined;
-    required?: boolean | undefined;
-} & React$1.RefAttributes<HTMLLabelElement>>;
-
 type RadioOptionsTypes = {
     value: any;
     label: any;
@@ -233,6 +231,7 @@ type RadioTypes = {
     direction?: DirectionType;
     helperText?: string;
     labelProps?: LabelProps;
+    label?: string;
 };
 declare const Radio: FC<RadioTypes>;
 
@@ -253,9 +252,7 @@ declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.Sli
 type ColorPickerTypes = {
     label?: string;
     id?: string;
-    hint?: string;
-    hintSide?: PositionType;
-    isRequired?: boolean;
+    labelProps?: LabelProps;
     helperText?: string;
     /** The hex code for the color */
     color?: any;
@@ -276,13 +273,10 @@ declare const Input: React__default.ForwardRefExoticComponent<React__default.Inp
     width?: "small" | "full" | "normal" | "auto" | undefined;
     /** The label of the input field   */
     label?: any;
-    hint?: string | undefined;
-    hintSide?: PositionType | undefined;
-    /** If true, it will show a red asterisk next to the label*/
-    isRequired?: boolean | undefined;
+    labelProps?: LabelProps | undefined;
     /** Disable/Enable multiple line text input field   */
     multiline?: boolean | undefined;
-    /** The small red text under the input field to show validation or a hint.   */
+    /** The small red text under the input field to show validation.   */
     helperText?: any;
     forceHideHelperText?: boolean | undefined;
     inputProps?: React__default.InputHTMLAttributes<HTMLInputElement> | undefined;
@@ -315,8 +309,7 @@ type ComboboxTypes<T> = {
     id?: string;
     /** The label of the input field   */
     label?: any;
-    hint?: string;
-    hintSide?: PositionType;
+    labelProps?: LabelProps;
     /** If true, it will show a red asterisk next to the label*/
     isRequired?: boolean;
     onChange?: (e: any) => void;
@@ -353,6 +346,7 @@ type SelectTypes = {
     hideIndicator?: boolean;
     phoneCode?: boolean;
     isLoading?: any;
+    labelProps?: LabelProps;
     texts?: {
         noOptions?: string;
         createLabel?: string;

package/dist/index.js

@@ -2928,36 +2928,34 @@ var Tooltip = ({
 };
 
 // components/elements/Label.tsx
-var Label2 = React14.forwardRef(
-  ({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React14.createElement("div", { className: "hawa-transition-all hawa-flex hawa-flex-row hawa-gap-1 hawa-items-center" }, /* @__PURE__ */ React14.createElement(
-    "label",
-    {
-      ref,
-      className: cn(
-        "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
-        className
-      ),
-      ...props
-    },
-    children,
-    required && /* @__PURE__ */ React14.createElement("span", { className: "hawa-text-red-500 hawa-mx-0.5" }, "*")
-  ), hint && /* @__PURE__ */ React14.createElement(Tooltip, { content: hint, side: hintSide }, /* @__PURE__ */ React14.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__ */ React14.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ React14.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-    /* @__PURE__ */ React14.createElement("path", { d: "M12 17h.01" })
-  )))
-);
+var Label2 = React14.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React14.createElement("div", { className: "hawa-transition-all hawa-flex hawa-flex-row hawa-gap-1 hawa-items-center" }, /* @__PURE__ */ React14.createElement(
+  "label",
+  {
+    ref,
+    className: cn(
+      "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
+      className
+    ),
+    ...props
+  },
+  children,
+  required && /* @__PURE__ */ React14.createElement("span", { className: "hawa-text-red-500 hawa-mx-0.5" }, "*")
+), hint && /* @__PURE__ */ React14.createElement(Tooltip, { content: hint, side: hintSide }, /* @__PURE__ */ React14.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__ */ React14.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ React14.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+  /* @__PURE__ */ React14.createElement("path", { d: "M12 17h.01" })
+))));
 Label2.displayName = "Label";
 
 // components/elements/Skeleton.tsx
@@ -2988,7 +2986,11 @@ function Skeleton({
 }
 
 // components/elements/Select.tsx
-var Select = ({ labelKey = "label", ...props }) => {
+var Select = ({
+  labelProps,
+  labelKey = "label",
+  ...props
+}) => {
   const NoOption = () => {
     var _a, _b;
     return /* @__PURE__ */ import_react11.default.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
@@ -3050,7 +3052,7 @@ var Select = ({ labelKey = "label", ...props }) => {
         props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
       )
     },
-    props.label && /* @__PURE__ */ import_react11.default.createElement(Label2, null, props.label),
+    props.label && /* @__PURE__ */ import_react11.default.createElement(Label2, { ...labelProps }, props.label),
     props.isLoading ? /* @__PURE__ */ import_react11.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
       //   TODO: enable keyboard to go to the next item in the list
       /* @__PURE__ */ import_react11.default.createElement(
@@ -3134,7 +3136,7 @@ var Select = ({ labelKey = "label", ...props }) => {
 };
 
 // components/elements/PhoneInput.tsx
-var PhoneInput = (props) => {
+var PhoneInput = ({ labelProps, ...props }) => {
   const [phoneNumber, setPhoneNumber] = (0, import_react12.useState)("");
   const [countryCode, setCountryCode] = (0, import_react12.useState)(props.preferredCountry);
   const inputRef = (0, import_react12.useRef)(null);
@@ -3156,7 +3158,7 @@ var PhoneInput = (props) => {
       console.log("handleChange prop was not provided in <PhoneInput/>");
     }
   };
-  return /* @__PURE__ */ import_react12.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2 hawa-h-fit" }, props.label && /* @__PURE__ */ import_react12.default.createElement(Label2, null, props.label), /* @__PURE__ */ import_react12.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2 hawa-h-fit" }, props.label && /* @__PURE__ */ import_react12.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react12.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ import_react12.default.createElement(
     Select,
     {
       width: "fit",
@@ -3410,7 +3412,7 @@ var Radio = ({
         /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
       ))));
     default:
-      return /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, labelProps && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, labelProps.children), /* @__PURE__ */ import_react13.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement(
+      return /* @__PURE__ */ import_react13.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react13.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react13.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react13.default.createElement(
         "div",
         {
           className: cn(
@@ -3586,6 +3588,7 @@ var ColorPicker = ({
   containerProps,
   colorPickerProps,
   textInputProps,
+  labelProps,
   ...props
 }) => {
   const [selectedColor, setSelectedColor] = (0, import_react14.useState)(props.color);
@@ -3611,16 +3614,7 @@ var ColorPicker = ({
       inputElement.dispatchEvent(event);
     }
   };
-  return /* @__PURE__ */ import_react14.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ import_react14.default.createElement(
-    Label2,
-    {
-      htmlFor: props.id,
-      hint: props.hint,
-      hintSide: props.hintSide,
-      required: props.isRequired
-    },
-    props.label
-  ), /* @__PURE__ */ import_react14.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react14.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ import_react14.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react14.default.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ import_react14.default.createElement(
     "div",
     {
       style: { height: 40, backgroundColor: selectedColor },
@@ -3677,6 +3671,7 @@ var Input = (0, import_react15.forwardRef)(
     width = "full",
     preview = false,
     forceHideHelperText = false,
+    labelProps,
     ...props
   }, ref) => {
     var _a;
@@ -3704,16 +3699,7 @@ var Input = (0, import_react15.forwardRef)(
           "hawa-w-full hawa-gap-2"
         )
       },
-      props.label && /* @__PURE__ */ import_react15.default.createElement(
-        Label2,
-        {
-          htmlFor: props.id,
-          hint: props.hint,
-          hintSide: props.hintSide,
-          required: props.isRequired
-        },
-        props.label
-      ),
+      props.label && /* @__PURE__ */ import_react15.default.createElement(Label2, { ...labelProps }, props.label),
       props.isLoading ? /* @__PURE__ */ import_react15.default.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ import_react15.default.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(
         "div",
         {
@@ -4141,6 +4127,7 @@ var Combobox = React28.forwardRef(
     valueKey = "value",
     defaultValue = "",
     popoverClassName,
+    labelProps,
     data,
     ...props
   }, ref) => {
@@ -4163,17 +4150,7 @@ var Combobox = React28.forwardRef(
           props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
         )
       },
-      props.label && /* @__PURE__ */ React28.createElement(
-        Label2,
-        {
-          htmlFor: props.id,
-          hint: props.hint,
-          hintSide: props.hintSide,
-          required: props.isRequired
-        },
-        props.label
-      ),
-      " ",
+      props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label),
       /* @__PURE__ */ React28.createElement(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React28.createElement(PopoverTrigger, { asChild: true }, props.isLoading ? /* @__PURE__ */ React28.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React28.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React28.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-items-start " }, /* @__PURE__ */ React28.createElement(
         "div",
         {

package/dist/index.mjs

@@ -2706,36 +2706,34 @@ var Tooltip = ({
 };
 
 // components/elements/Label.tsx
-var Label2 = React14.forwardRef(
-  ({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React14.createElement("div", { className: "hawa-transition-all hawa-flex hawa-flex-row hawa-gap-1 hawa-items-center" }, /* @__PURE__ */ React14.createElement(
-    "label",
-    {
-      ref,
-      className: cn(
-        "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
-        className
-      ),
-      ...props
-    },
-    children,
-    required && /* @__PURE__ */ React14.createElement("span", { className: "hawa-text-red-500 hawa-mx-0.5" }, "*")
-  ), hint && /* @__PURE__ */ React14.createElement(Tooltip, { content: hint, side: hintSide }, /* @__PURE__ */ React14.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__ */ React14.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ React14.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
-    /* @__PURE__ */ React14.createElement("path", { d: "M12 17h.01" })
-  )))
-);
+var Label2 = React14.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React14.createElement("div", { className: "hawa-transition-all hawa-flex hawa-flex-row hawa-gap-1 hawa-items-center" }, /* @__PURE__ */ React14.createElement(
+  "label",
+  {
+    ref,
+    className: cn(
+      "hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
+      className
+    ),
+    ...props
+  },
+  children,
+  required && /* @__PURE__ */ React14.createElement("span", { className: "hawa-text-red-500 hawa-mx-0.5" }, "*")
+), hint && /* @__PURE__ */ React14.createElement(Tooltip, { content: hint, side: hintSide }, /* @__PURE__ */ React14.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__ */ React14.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ React14.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+  /* @__PURE__ */ React14.createElement("path", { d: "M12 17h.01" })
+))));
 Label2.displayName = "Label";
 
 // components/elements/Skeleton.tsx
@@ -2766,7 +2764,11 @@ function Skeleton({
 }
 
 // components/elements/Select.tsx
-var Select = ({ labelKey = "label", ...props }) => {
+var Select = ({
+  labelProps,
+  labelKey = "label",
+  ...props
+}) => {
   const NoOption = () => {
     var _a, _b;
     return /* @__PURE__ */ React16.createElement("div", null, (_b = (_a = props.texts) == null ? void 0 : _a.noOptions) != null ? _b : "No Items Found");
@@ -2828,7 +2830,7 @@ var Select = ({ labelKey = "label", ...props }) => {
         props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
       )
     },
-    props.label && /* @__PURE__ */ React16.createElement(Label2, null, props.label),
+    props.label && /* @__PURE__ */ React16.createElement(Label2, { ...labelProps }, props.label),
     props.isLoading ? /* @__PURE__ */ React16.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
       //   TODO: enable keyboard to go to the next item in the list
       /* @__PURE__ */ React16.createElement(
@@ -2912,7 +2914,7 @@ var Select = ({ labelKey = "label", ...props }) => {
 };
 
 // components/elements/PhoneInput.tsx
-var PhoneInput = (props) => {
+var PhoneInput = ({ labelProps, ...props }) => {
   const [phoneNumber, setPhoneNumber] = useState5("");
   const [countryCode, setCountryCode] = useState5(props.preferredCountry);
   const inputRef = useRef2(null);
@@ -2934,7 +2936,7 @@ var PhoneInput = (props) => {
       console.log("handleChange prop was not provided in <PhoneInput/>");
     }
   };
-  return /* @__PURE__ */ React17.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2 hawa-h-fit" }, props.label && /* @__PURE__ */ React17.createElement(Label2, null, props.label), /* @__PURE__ */ React17.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React17.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2 hawa-h-fit" }, props.label && /* @__PURE__ */ React17.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React17.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React17.createElement(
     Select,
     {
       width: "fit",
@@ -3188,7 +3190,7 @@ var Radio = ({
         /* @__PURE__ */ React19.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ React19.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ React19.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
       ))));
     default:
-      return /* @__PURE__ */ React19.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, labelProps && /* @__PURE__ */ React19.createElement(Label2, { ...labelProps }, labelProps.children), /* @__PURE__ */ React19.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React19.createElement(
+      return /* @__PURE__ */ React19.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React19.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React19.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React19.createElement(
         "div",
         {
           className: cn(
@@ -3367,6 +3369,7 @@ var ColorPicker = ({
   containerProps,
   colorPickerProps,
   textInputProps,
+  labelProps,
   ...props
 }) => {
   const [selectedColor, setSelectedColor] = useState8(props.color);
@@ -3392,16 +3395,7 @@ var ColorPicker = ({
       inputElement.dispatchEvent(event);
     }
   };
-  return /* @__PURE__ */ React23.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ React23.createElement(
-    Label2,
-    {
-      htmlFor: props.id,
-      hint: props.hint,
-      hintSide: props.hintSide,
-      required: props.isRequired
-    },
-    props.label
-  ), /* @__PURE__ */ React23.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React23.createElement("div", { className: "hawa-flex hawa-flex-col hawa-w-full hawa-gap-2" }, props.label && /* @__PURE__ */ React23.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ React23.createElement("div", { dir: "ltr", className: "hawa-flex hawa-flex-row hawa-w-full" }, /* @__PURE__ */ React23.createElement(
     "div",
     {
       style: { height: 40, backgroundColor: selectedColor },
@@ -3458,6 +3452,7 @@ var Input = forwardRef9(
     width = "full",
     preview = false,
     forceHideHelperText = false,
+    labelProps,
     ...props
   }, ref) => {
     var _a;
@@ -3485,16 +3480,7 @@ var Input = forwardRef9(
           "hawa-w-full hawa-gap-2"
         )
       },
-      props.label && /* @__PURE__ */ React24.createElement(
-        Label2,
-        {
-          htmlFor: props.id,
-          hint: props.hint,
-          hintSide: props.hintSide,
-          required: props.isRequired
-        },
-        props.label
-      ),
+      props.label && /* @__PURE__ */ React24.createElement(Label2, { ...labelProps }, props.label),
       props.isLoading ? /* @__PURE__ */ React24.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React24.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
         "div",
         {
@@ -3922,6 +3908,7 @@ var Combobox = React28.forwardRef(
     valueKey = "value",
     defaultValue = "",
     popoverClassName,
+    labelProps,
     data,
     ...props
   }, ref) => {
@@ -3944,17 +3931,7 @@ var Combobox = React28.forwardRef(
           props.width === "fit" ? "hawa-w-fit" : "hawa-w-full"
         )
       },
-      props.label && /* @__PURE__ */ React28.createElement(
-        Label2,
-        {
-          htmlFor: props.id,
-          hint: props.hint,
-          hintSide: props.hintSide,
-          required: props.isRequired
-        },
-        props.label
-      ),
-      " ",
+      props.label && /* @__PURE__ */ React28.createElement(Label2, { ...labelProps }, props.label),
       /* @__PURE__ */ React28.createElement(PopoverPrimitive2.Root, { open, onOpenChange: handleOpenChange }, /* @__PURE__ */ React28.createElement(PopoverTrigger, { asChild: true }, props.isLoading ? /* @__PURE__ */ React28.createElement("div", { className: "hawa-pb-2" }, /* @__PURE__ */ React28.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" })) : /* @__PURE__ */ React28.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2 hawa-items-start " }, /* @__PURE__ */ React28.createElement(
         "div",
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.17.11-next",
+  "version": "0.17.12-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
@@ -43,6 +43,7 @@
     "build": "next build",
     "start": "next start -p 3032",
     "lint": "next lint",
+    "check": "tsc --noEmit",
     "test": "jest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",