@sikka/hawa 0.39.0-next → 0.40.0-next

package/dist/layout/index.js

@@ -1085,12 +1085,12 @@ var Button = React12.forwardRef(
     children,
     labelProps,
     showHelperText = false,
-    inForm = false,
+    asInput = false,
     ...props
   }, ref) => {
     const Comp = "button";
     const loadingColor = variant === "outline" || variant === "ghost" || variant === "neoBrutalism" ? "hawa-bg-primary" : "hawa-bg-primary-foreground";
-    if (inForm) {
+    if (asInput) {
       return /* @__PURE__ */ React12.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, label && /* @__PURE__ */ React12.createElement(Label, { ...labelProps }, label), /* @__PURE__ */ React12.createElement(
         Comp,
         {
@@ -1568,6 +1568,7 @@ var AppLayout = ({
   clickedItem,
   DrawerLinkComponent,
   MenuLinkComponent,
+  onDrawerExpanded,
   onAvatarClick,
   ...props
 }) => {
@@ -1607,6 +1608,7 @@ var AppLayout = ({
       if (window.innerWidth < 600) {
         setKeepDrawerOpen(false);
         setOpenSideMenu(false);
+        onDrawerExpanded && onDrawerExpanded(false);
       }
     }
   };
@@ -1620,6 +1622,7 @@ var AppLayout = ({
         } else {
           localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));
         }
+        onDrawerExpanded && onDrawerExpanded(keepDrawerOpen);
       };
       resize();
       window.addEventListener("resize", resize);
@@ -1637,9 +1640,11 @@ var AppLayout = ({
   (0, import_react14.useEffect)(() => {
     if (size > 600) {
       setOpenSideMenu(keepDrawerOpen);
+      onDrawerExpanded && onDrawerExpanded(keepDrawerOpen);
     } else {
       setKeepDrawerOpen(false);
       setOpenSideMenu(false);
+      onDrawerExpanded && onDrawerExpanded(false);
     }
   }, [size, keepDrawerOpen]);
   const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] : 0;
@@ -1732,17 +1737,23 @@ var AppLayout = ({
       style: {
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
       },
-      onMouseEnter: () => setOpenSideMenu(true),
+      onMouseEnter: () => {
+        setOpenSideMenu(true);
+        onDrawerExpanded && onDrawerExpanded(true);
+      },
       onMouseLeave: () => {
         if (size > 600) {
           if (keepDrawerOpen) {
             setOpenSideMenu(true);
+            onDrawerExpanded && onDrawerExpanded(true);
           } else {
             setOpenedSidebarItem("");
             setOpenSideMenu(false);
+            onDrawerExpanded && onDrawerExpanded(false);
           }
         } else {
           setOpenSideMenu(false);
+          onDrawerExpanded && onDrawerExpanded(false);
         }
       },
       ref

package/dist/layout/index.mjs

@@ -3,7 +3,7 @@ import {
   Sheet,
   SheetContent,
   SheetTrigger
-} from "../chunk-C2IX3SUD.mjs";
+} from "../chunk-27G5FKOP.mjs";
 import {
   Button,
   Card,
@@ -16,7 +16,7 @@ import {
   Skeleton,
   Tooltip,
   cn
-} from "../chunk-VMVZM3QQ.mjs";
+} from "../chunk-GU2DOJ7Q.mjs";
 import {
   useBreakpoint,
   useClickOutside
@@ -409,6 +409,7 @@ var AppLayout = ({
   clickedItem,
   DrawerLinkComponent,
   MenuLinkComponent,
+  onDrawerExpanded,
   onAvatarClick,
   ...props
 }) => {
@@ -448,6 +449,7 @@ var AppLayout = ({
       if (window.innerWidth < 600) {
         setKeepDrawerOpen(false);
         setOpenSideMenu(false);
+        onDrawerExpanded && onDrawerExpanded(false);
       }
     }
   };
@@ -461,6 +463,7 @@ var AppLayout = ({
         } else {
           localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));
         }
+        onDrawerExpanded && onDrawerExpanded(keepDrawerOpen);
       };
       resize();
       window.addEventListener("resize", resize);
@@ -478,9 +481,11 @@ var AppLayout = ({
   useEffect(() => {
     if (size > 600) {
       setOpenSideMenu(keepDrawerOpen);
+      onDrawerExpanded && onDrawerExpanded(keepDrawerOpen);
     } else {
       setKeepDrawerOpen(false);
       setOpenSideMenu(false);
+      onDrawerExpanded && onDrawerExpanded(false);
     }
   }, [size, keepDrawerOpen]);
   const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] : 0;
@@ -573,17 +578,23 @@ var AppLayout = ({
       style: {
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
       },
-      onMouseEnter: () => setOpenSideMenu(true),
+      onMouseEnter: () => {
+        setOpenSideMenu(true);
+        onDrawerExpanded && onDrawerExpanded(true);
+      },
       onMouseLeave: () => {
         if (size > 600) {
           if (keepDrawerOpen) {
             setOpenSideMenu(true);
+            onDrawerExpanded && onDrawerExpanded(true);
           } else {
             setOpenedSidebarItem("");
             setOpenSideMenu(false);
+            onDrawerExpanded && onDrawerExpanded(false);
           }
         } else {
           setOpenSideMenu(false);
+          onDrawerExpanded && onDrawerExpanded(false);
         }
       },
       ref

package/dist/navigationMenu/index.d.mts

@@ -1,7 +1,8 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import { D as DirectionType } from '../commonTypes-ClC9C8Mh.mjs';
+
+type DirectionType = "rtl" | "ltr";
 
 declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type StandardNavigationMenuItemProps = {

package/dist/navigationMenu/index.d.ts

@@ -1,7 +1,8 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import { D as DirectionType } from '../commonTypes-ClC9C8Mh.js';
+
+type DirectionType = "rtl" | "ltr";
 
 declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type StandardNavigationMenuItemProps = {

package/dist/pagination/index.d.mts

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { D as DirectionType } from '../commonTypes-ClC9C8Mh.mjs';
+import { D as DirectionType } from '../commonTypes-BtF87PmG.mjs';
 
 type PaginationProps = {
     direction?: DirectionType;

package/dist/pagination/index.d.ts

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { D as DirectionType } from '../commonTypes-ClC9C8Mh.js';
+import { D as DirectionType } from '../commonTypes-BtF87PmG.js';
 
 type PaginationProps = {
     direction?: DirectionType;

package/dist/phoneInput/index.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { FC } from 'react';
-import { P as PositionType } from '../commonTypes-BIZhOigS.mjs';
+import { P as PositionType } from '../commonTypes-BtF87PmG.mjs';
 
 type LabelProps = {
     hint?: React.ReactNode;

package/dist/phoneInput/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { FC } from 'react';
-import { P as PositionType } from '../commonTypes-BIZhOigS.js';
+import { P as PositionType } from '../commonTypes-BtF87PmG.js';
 
 type LabelProps = {
     hint?: React.ReactNode;

package/dist/progress/index.d.mts

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
-import { L as LabelProps } from '../Label-UbMDLtJF.mjs';
+import { P as PositionType } from '../commonTypes-BIZhOigS.mjs';
+
+type LabelProps = {
+    hint?: React.ReactNode;
+    hintSide?: PositionType;
+    htmlFor?: string;
+    required?: boolean;
+};
 
 declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     label?: string | undefined;

package/dist/progress/index.d.ts

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
-import { L as LabelProps } from '../Label-UbMDLtJF.js';
+import { P as PositionType } from '../commonTypes-BIZhOigS.js';
+
+type LabelProps = {
+    hint?: React.ReactNode;
+    hintSide?: PositionType;
+    htmlFor?: string;
+    required?: boolean;
+};
 
 declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     label?: string | undefined;

package/dist/radio/index.d.mts

@@ -1,6 +1,14 @@
+import * as React from 'react';
 import React__default from 'react';
 import { PopoverContentProps } from '@radix-ui/react-popover';
-import { O as OrientationType, D as DirectionType, L as LabelProps } from '../Label-UbMDLtJF.mjs';
+import { P as PositionType, O as OrientationType, D as DirectionType } from '../commonTypes-D_7LV7Ri.mjs';
+
+type LabelProps = {
+    hint?: React.ReactNode;
+    hintSide?: PositionType;
+    htmlFor?: string;
+    required?: boolean;
+};
 
 type RadioOptionsTypes = {
     value: any;
@@ -29,6 +37,12 @@ type RadioTypes = {
     label?: string;
     tabsContainerClassName?: string;
     forceHideHelperText?: boolean;
+    containerClassNames?: {
+        bordered?: string;
+        tabs?: string;
+        cards?: string;
+        default?: string;
+    };
 };
 declare const Radio: React__default.ForwardRefExoticComponent<RadioTypes & React__default.RefAttributes<HTMLInputElement>>;
 

package/dist/radio/index.d.ts

@@ -1,6 +1,14 @@
+import * as React from 'react';
 import React__default from 'react';
 import { PopoverContentProps } from '@radix-ui/react-popover';
-import { O as OrientationType, D as DirectionType, L as LabelProps } from '../Label-UbMDLtJF.js';
+import { P as PositionType, O as OrientationType, D as DirectionType } from '../commonTypes-D_7LV7Ri.js';
+
+type LabelProps = {
+    hint?: React.ReactNode;
+    hintSide?: PositionType;
+    htmlFor?: string;
+    required?: boolean;
+};
 
 type RadioOptionsTypes = {
     value: any;
@@ -29,6 +37,12 @@ type RadioTypes = {
     label?: string;
     tabsContainerClassName?: string;
     forceHideHelperText?: boolean;
+    containerClassNames?: {
+        bordered?: string;
+        tabs?: string;
+        cards?: string;
+        default?: string;
+    };
 };
 declare const Radio: React__default.ForwardRefExoticComponent<RadioTypes & React__default.RefAttributes<HTMLInputElement>>;
 

package/dist/radio/index.js

@@ -208,6 +208,7 @@ var Radio = (0, import_react3.forwardRef)(
     tabsContainerClassName,
     forceHideHelperText = false,
     onChange,
+    containerClassNames,
     ...props
   }, ref) => {
     var _a, _b, _c;
@@ -263,161 +264,203 @@ var Radio = (0, import_react3.forwardRef)(
     ];
     switch (design) {
       case "tabs":
-        return /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-gap-2 hawa-flex hawa-flex-col" }, props.label && /* @__PURE__ */ import_react3.default.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ import_react3.default.createElement(
-          "ul",
+        return /* @__PURE__ */ import_react3.default.createElement(
+          "div",
           {
-            ref: parentRef,
             className: cn(
-              props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
-              "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium hawa-h-[40px]",
-              orientationStyle[orientation],
-              widthStyle[width],
-              tabsContainerClassName
+              "hawa-gap-2 hawa-flex hawa-flex-col",
+              containerClassNames == null ? void 0 : containerClassNames.tabs
             )
           },
-          (_b = props.options) == null ? void 0 : _b.map((opt, o) => {
-            return opt.tooltip ? /* @__PURE__ */ import_react3.default.createElement(
-              PopoverRoot,
-              {
-                key: o,
-                open: o === openTooltip,
-                onOpenChange: (bool) => setOpenTooltip(bool ? o : null)
-              },
-              /* @__PURE__ */ import_react3.default.createElement(
-                PopoverTrigger,
+          props.label && /* @__PURE__ */ import_react3.default.createElement(Label, { ...labelProps }, props.label),
+          /* @__PURE__ */ import_react3.default.createElement(
+            "ul",
+            {
+              ref: parentRef,
+              className: cn(
+                props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
+                "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium hawa-h-[40px]",
+                orientationStyle[orientation],
+                widthStyle[width],
+                tabsContainerClassName
+              )
+            },
+            (_b = props.options) == null ? void 0 : _b.map((opt, o) => {
+              return opt.tooltip ? /* @__PURE__ */ import_react3.default.createElement(
+                PopoverRoot,
                 {
-                  onMouseEnter: () => setOpenTooltip(o),
-                  onMouseLeave: () => setOpenTooltip(null),
-                  asChild: true
+                  key: o,
+                  open: o === openTooltip,
+                  onOpenChange: (bool) => setOpenTooltip(bool ? o : null)
                 },
                 /* @__PURE__ */ import_react3.default.createElement(
-                  "li",
+                  PopoverTrigger,
                   {
-                    "aria-current": "page",
-                    onClick: () => {
-                      if (props.disabled || opt.disabled)
-                        return;
-                      handleChange(opt);
+                    onMouseEnter: () => setOpenTooltip(o),
+                    onMouseLeave: () => setOpenTooltip(null),
+                    asChild: true
+                  },
+                  /* @__PURE__ */ import_react3.default.createElement(
+                    "li",
+                    {
+                      "aria-current": "page",
+                      onClick: () => {
+                        if (props.disabled || opt.disabled)
+                          return;
+                        handleChange(opt);
+                      },
+                      className: cn(
+                        ...radio_option_tabs_styling,
+                        selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                      )
                     },
-                    className: cn(
-                      ...radio_option_tabs_styling,
-                      selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
-                    )
+                    opt.icon && opt.icon,
+                    opt.label
+                  )
+                ),
+                /* @__PURE__ */ import_react3.default.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
+              ) : /* @__PURE__ */ import_react3.default.createElement(
+                "li",
+                {
+                  key: o,
+                  "aria-current": "page",
+                  onClick: () => {
+                    if (props.disabled || opt.disabled)
+                      return;
+                    handleChange(opt);
                   },
-                  opt.icon && opt.icon,
-                  opt.label
-                )
+                  className: cn(
+                    ...radio_option_tabs_styling,
+                    selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                  )
+                },
+                opt.icon && opt.icon,
+                opt.label
+              );
+            })
+          ),
+          !forceHideHelperText && /* @__PURE__ */ import_react3.default.createElement(HelperText, { helperText: props.helperText })
+        );
+      case "bordered":
+        return /* @__PURE__ */ import_react3.default.createElement(
+          "div",
+          {
+            className: cn(
+              orientationStyle[orientation],
+              "hawa-gap-4",
+              containerClassNames == null ? void 0 : containerClassNames.bordered
+            )
+          },
+          props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react3.default.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ import_react3.default.createElement(
+            "div",
+            {
+              className: cn(
+                "radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all",
+                props.direction === "rtl" ? "margin-left right-19px" : "margin-right left-23px"
               ),
-              /* @__PURE__ */ import_react3.default.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
-            ) : /* @__PURE__ */ import_react3.default.createElement(
-              "li",
+              key: i + 1
+            },
+            /* @__PURE__ */ import_react3.default.createElement(
+              "input",
               {
-                key: o,
-                "aria-current": "page",
-                onClick: () => {
-                  if (props.disabled || opt.disabled)
-                    return;
-                  handleChange(opt);
-                },
+                disabled: opt.disabled,
+                id: opt.value.toString(),
+                type: "radio",
+                value: opt.value,
+                name,
+                onChange: () => handleChange(opt)
+              }
+            ),
+            /* @__PURE__ */ import_react3.default.createElement(
+              "label",
+              {
+                htmlFor: opt.value.toString(),
                 className: cn(
-                  ...radio_option_tabs_styling,
-                  selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+                  "hawa-ml-2 hawa-w-full hawa-select-none hawa-p-4 hawa-pl-3 hawa-text-sm hawa-font-medium hawa-text-black dark:hawa-text-white",
+                  opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hawa-text-gray-900"
                 )
               },
-              opt.icon && opt.icon,
               opt.label
-            );
-          })
-        ), !forceHideHelperText && /* @__PURE__ */ import_react3.default.createElement(HelperText, { helperText: props.helperText }));
-      case "bordered":
-        return /* @__PURE__ */ import_react3.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react3.default.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ import_react3.default.createElement(
-          "div",
+            )
+          )))
+        );
+      case "cards":
+        return /* @__PURE__ */ import_react3.default.createElement(
+          "ul",
           {
             className: cn(
-              "radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all",
-              props.direction === "rtl" ? "margin-left right-19px" : "margin-right left-23px"
-            ),
-            key: i + 1
+              orientationStyle[orientation],
+              "hawa-gap-4",
+              containerClassNames == null ? void 0 : containerClassNames.cards
+            )
           },
-          /* @__PURE__ */ import_react3.default.createElement(
+          (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ import_react3.default.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ import_react3.default.createElement(
             "input",
             {
-              disabled: opt.disabled,
-              id: opt.value.toString(),
               type: "radio",
-              value: opt.value,
+              id: opt.value.toString(),
               name,
-              onChange: () => handleChange(opt)
+              value: opt.value.toString(),
+              className: "hawa-peer hawa-hidden",
+              required: true,
+              disabled: opt.disabled
             }
-          ),
-          /* @__PURE__ */ import_react3.default.createElement(
+          ), /* @__PURE__ */ import_react3.default.createElement(
             "label",
             {
               htmlFor: opt.value.toString(),
               className: cn(
-                "hawa-ml-2 hawa-w-full hawa-select-none hawa-p-4 hawa-pl-3 hawa-text-sm hawa-font-medium hawa-text-black dark:hawa-text-white",
-                opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hawa-text-gray-900"
+                "hawa-inline-flex hawa-h-full hawa-w-full hawa-transition-all  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-foreground/10 hawa-bg-background hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-foreground/10 dark:hawa-bg-foreground/5 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
+                opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-foreground/10 hover:hawa-text-gray-600 dark:hover:hawa-bg-foreground/20 dark:hover:hawa-text-gray-300"
               )
             },
-            opt.label
-          )
-        ))));
-      case "cards":
-        return /* @__PURE__ */ import_react3.default.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ import_react3.default.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ import_react3.default.createElement(
-          "input",
-          {
-            type: "radio",
-            id: opt.value.toString(),
-            name,
-            value: opt.value.toString(),
-            className: "hawa-peer hawa-hidden",
-            required: true,
-            disabled: opt.disabled
-          }
-        ), /* @__PURE__ */ import_react3.default.createElement(
-          "label",
-          {
-            htmlFor: opt.value.toString(),
-            className: cn(
-              "hawa-inline-flex hawa-h-full hawa-w-full hawa-transition-all  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-foreground/10 hawa-bg-background hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-foreground/10 dark:hawa-bg-foreground/5 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
-              opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-foreground/10 hover:hawa-text-gray-600 dark:hover:hawa-bg-foreground/20 dark:hover:hawa-text-gray-300"
-            )
-          },
-          /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
-        ))));
+            /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
+          )))
+        );
       default:
-        return /* @__PURE__ */ import_react3.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react3.default.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ import_react3.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react3.default.createElement(
+        return /* @__PURE__ */ import_react3.default.createElement(
           "div",
           {
             className: cn(
-              "radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all",
-              props.direction === "rtl" ? "margin-left right-3px" : "margin-right left-3px"
-            ),
-            key: i + 1
+              "hawa-flex hawa-flex-col hawa-gap-2",
+              containerClassNames == null ? void 0 : containerClassNames.default
+            )
           },
-          /* @__PURE__ */ import_react3.default.createElement(
-            "input",
+          props.label && /* @__PURE__ */ import_react3.default.createElement(Label, { ...labelProps }, props.label),
+          /* @__PURE__ */ import_react3.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react3.default.createElement(
+            "div",
             {
-              disabled: opt.disabled,
-              id: opt.value.toString(),
-              type: "radio",
-              value: opt.value,
-              name,
-              onChange: () => handleChange(opt)
-            }
-          ),
-          /* @__PURE__ */ import_react3.default.createElement(
-            "label",
-            {
-              htmlFor: opt.value.toString(),
               className: cn(
-                "hawa-text-sm hawa-font-medium  dark:hawa-text-white",
-                opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900"
-              )
+                "radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all",
+                props.direction === "rtl" ? "margin-left right-3px" : "margin-right left-3px"
+              ),
+              key: i + 1
             },
-            opt.label
-          )
-        ))), /* @__PURE__ */ import_react3.default.createElement(HelperText, { helperText: props.helperText }));
+            /* @__PURE__ */ import_react3.default.createElement(
+              "input",
+              {
+                disabled: opt.disabled,
+                id: opt.value.toString(),
+                type: "radio",
+                value: opt.value,
+                name,
+                onChange: () => handleChange(opt)
+              }
+            ),
+            /* @__PURE__ */ import_react3.default.createElement(
+              "label",
+              {
+                htmlFor: opt.value.toString(),
+                className: cn(
+                  "hawa-text-sm hawa-font-medium  dark:hawa-text-white",
+                  opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900"
+                )
+              },
+              opt.label
+            )
+          ))),
+          /* @__PURE__ */ import_react3.default.createElement(HelperText, { helperText: props.helperText })
+        );
     }
   }
 );