@sikka/hawa 0.30.12-next → 0.30.13-next

package/dist/index.js

@@ -3260,207 +3260,209 @@ var BackToTop = ({ ...props }) => {
 
 // elements/radio/Radio.tsx
 var import_react11 = __toESM(require("react"));
-var Radio = ({
-  design = "default",
-  width = "default",
-  size = "default",
-  orientation = "horizontal",
-  name,
-  labelProps,
-  tabsContainerClassName,
-  forceHideHelperText = false,
-  onChange,
-  ...props
-}) => {
-  var _a, _b, _c;
-  const [selectedOption, setSelectedOption] = (0, import_react11.useState)(
-    props.defaultValue || props.value
-  );
-  let activeTabStyle = "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary";
-  let inactiveTabStyle = `hawa-inline-block hawa-w-full hawa-transition-all  hawa-bg-primary-foreground dark:hover:hawa-text-white
+var Radio = (0, import_react11.forwardRef)(
+  ({
+    design = "default",
+    width = "default",
+    size = "default",
+    orientation = "horizontal",
+    name,
+    labelProps,
+    tabsContainerClassName,
+    forceHideHelperText = false,
+    onChange,
+    ...props
+  }, ref) => {
+    var _a, _b, _c;
+    const [selectedOption, setSelectedOption] = (0, import_react11.useState)(
+      props.defaultValue || props.value
+    );
+    let activeTabStyle = "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary";
+    let inactiveTabStyle = `hawa-inline-block hawa-w-full hawa-transition-all  hawa-bg-primary-foreground dark:hover:hawa-text-white
     ${props.disabled ? "" : "hover:hawa-bg-muted"}`;
-  let orientationStyle = {
-    horizontal: "hawa-flex hawa-flex-row",
-    vertical: "hawa-flex hawa-flex-col"
-  };
-  let tabSizeStyle = {
-    default: "hawa-py-2 hawa-px-4 hawa-text-sm",
-    lg: "hawa-py-2 hawa-px-4",
-    sm: "hawa-p-1.5 hawa-text-xs",
-    xs: "hawa-p-1 hawa-text-[10px]"
-  };
-  let widthStyle = {
-    none: "",
-    default: "hawa-max-w-fit",
-    full: "hawa-w-full"
-  };
-  const [parentDirection, setParentDirection] = import_react11.default.useState(
-    null
-  );
-  const parentRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
-    var _a2;
-    const parentNode = (_a2 = parentRef.current) == null ? void 0 : _a2.parentNode;
-    if (parentNode) {
-      const dir = window.getComputedStyle(parentNode).direction;
-      setParentDirection(dir);
-    }
-  });
-  const handleChange = (opt) => {
-    setSelectedOption(opt.value);
-    if (onChange) {
-      onChange(opt.value);
-    } else {
-      console.log("onChange was not provided");
-    }
-  };
-  switch (design) {
-    case "tabs":
-      return /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-gap-2 hawa-flex hawa-flex-col" }, props.label && /* @__PURE__ */ import_react11.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react11.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",
-            orientationStyle[orientation],
-            widthStyle[width],
-            tabsContainerClassName
-          )
-        },
-        (_b = props.options) == null ? void 0 : _b.map((opt, o) => /* @__PURE__ */ import_react11.default.createElement(
-          "li",
+    let orientationStyle = {
+      horizontal: "hawa-flex hawa-flex-row",
+      vertical: "hawa-flex hawa-flex-col"
+    };
+    let tabSizeStyle = {
+      default: "hawa-py-2 hawa-px-4 hawa-text-sm",
+      lg: "hawa-py-2 hawa-px-4",
+      sm: "hawa-p-1.5 hawa-text-xs",
+      xs: "hawa-p-1 hawa-text-[10px]"
+    };
+    let widthStyle = {
+      none: "",
+      default: "hawa-max-w-fit",
+      full: "hawa-w-full"
+    };
+    const [parentDirection, setParentDirection] = import_react11.default.useState(
+      null
+    );
+    const parentRef = (0, import_react11.useRef)(null);
+    (0, import_react11.useEffect)(() => {
+      var _a2;
+      const parentNode = (_a2 = parentRef.current) == null ? void 0 : _a2.parentNode;
+      if (parentNode) {
+        const dir = window.getComputedStyle(parentNode).direction;
+        setParentDirection(dir);
+      }
+    });
+    const handleChange = (opt) => {
+      setSelectedOption(opt.value);
+      if (onChange) {
+        onChange(opt.value);
+      } else {
+        console.log("onChange was not provided");
+      }
+    };
+    switch (design) {
+      case "tabs":
+        return /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-gap-2 hawa-flex hawa-flex-col" }, props.label && /* @__PURE__ */ import_react11.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react11.default.createElement(
+          "ul",
           {
-            "aria-current": "page",
-            onClick: () => {
-              if (props.disabled)
-                return;
-              handleChange(opt);
+            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",
+              orientationStyle[orientation],
+              widthStyle[width],
+              tabsContainerClassName
+            )
+          },
+          (_b = props.options) == null ? void 0 : _b.map((opt, o) => /* @__PURE__ */ import_react11.default.createElement(
+            "li",
+            {
+              "aria-current": "page",
+              onClick: () => {
+                if (props.disabled)
+                  return;
+                handleChange(opt);
+              },
+              className: cn(
+                "hawa-w-full hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
+                !props.disabled && "hawa-cursor-pointer",
+                orientation === "horizontal" && parentDirection === "ltr" && "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
+                orientation === "horizontal" && parentDirection === "rtl" && "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
+                orientation === "vertical" && "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
+                tabSizeStyle[size],
+                selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+              ),
+              key: o
             },
+            opt.icon && opt.icon,
+            opt.label
+          ))
+        ), !forceHideHelperText && /* @__PURE__ */ import_react11.default.createElement(
+          "p",
+          {
             className: cn(
-              "hawa-w-full hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
-              !props.disabled && "hawa-cursor-pointer",
-              orientation === "horizontal" && parentDirection === "ltr" && "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
-              orientation === "horizontal" && parentDirection === "rtl" && "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
-              orientation === "vertical" && "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
-              tabSizeStyle[size],
-              selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+              "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
+              props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
+            )
+          },
+          props.helperText
+        ));
+      case "bordered":
+        return /* @__PURE__ */ import_react11.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react11.default.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ import_react11.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"
             ),
-            key: o
+            key: i + 1
           },
-          opt.icon && opt.icon,
-          opt.label
-        ))
-      ), !forceHideHelperText && /* @__PURE__ */ import_react11.default.createElement(
-        "p",
-        {
-          className: cn(
-            "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-            props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-          )
-        },
-        props.helperText
-      ));
-    case "bordered":
-      return /* @__PURE__ */ import_react11.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react11.default.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ import_react11.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_react11.default.createElement(
+            "input",
+            {
+              disabled: opt.disabled,
+              id: opt.value.toString(),
+              type: "radio",
+              value: opt.value,
+              name,
+              onChange: () => handleChange(opt)
+            }
           ),
-          key: i + 1
-        },
-        /* @__PURE__ */ import_react11.default.createElement(
+          /* @__PURE__ */ import_react11.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"
+              )
+            },
+            opt.label
+          )
+        ))));
+      case "cards":
+        return /* @__PURE__ */ import_react11.default.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ import_react11.default.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ import_react11.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_react11.default.createElement(
+        ), /* @__PURE__ */ import_react11.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-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
+              opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-gray-100 hover:hawa-text-gray-600 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-gray-300"
             )
           },
-          opt.label
-        )
-      ))));
-    case "cards":
-      return /* @__PURE__ */ import_react11.default.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ import_react11.default.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ import_react11.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_react11.default.createElement(
-        "label",
-        {
-          htmlFor: opt.value.toString(),
-          className: cn(
-            "hawa-inline-flex hawa-h-full hawa-w-full  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
-            opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-gray-100 hover:hawa-text-gray-600 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-gray-300"
-          )
-        },
-        /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
-      ))));
-    default:
-      return /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react11.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react11.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react11.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
-        },
-        /* @__PURE__ */ import_react11.default.createElement(
-          "input",
+          /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-block  hawa-h-full hawa-w-full" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
+        ))));
+      default:
+        return /* @__PURE__ */ import_react11.default.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ import_react11.default.createElement(Label2, { ...labelProps }, props.label), /* @__PURE__ */ import_react11.default.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ import_react11.default.createElement(
+          "div",
           {
-            disabled: opt.disabled,
-            id: opt.value.toString(),
-            type: "radio",
-            value: opt.value,
-            name,
-            onChange: () => handleChange(opt)
-          }
-        ),
-        /* @__PURE__ */ import_react11.default.createElement(
-          "label",
+            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
+          },
+          /* @__PURE__ */ import_react11.default.createElement(
+            "input",
+            {
+              disabled: opt.disabled,
+              id: opt.value.toString(),
+              type: "radio",
+              value: opt.value,
+              name,
+              onChange: () => handleChange(opt)
+            }
+          ),
+          /* @__PURE__ */ import_react11.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_react11.default.createElement(
+          "p",
           {
-            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"
+              "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
+              props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
             )
           },
-          opt.label
-        )
-      ))), /* @__PURE__ */ import_react11.default.createElement(
-        "p",
-        {
-          className: cn(
-            "hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
-            props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
-          )
-        },
-        props.helperText
-      ));
+          props.helperText
+        ));
+    }
   }
-};
+);
 
 // elements/combobox/Combobox.tsx
 var React27 = __toESM(require("react"));