@sikka/hawa 0.46.4-next → 0.48.0-next

package/dist/{chunk-5CTMGPEF.mjs → chunk-GBLWUEYN.mjs}

@@ -350,6 +350,7 @@ import clsx from "clsx";
 var Select = ({
   labelProps,
   labelKey = "label",
+  valueKey = "value",
   ...props
 }) => {
   const NoOption = () => {
@@ -369,13 +370,7 @@ var Select = ({
       children
     );
   };
-  const Option = ({
-    children,
-    innerProps,
-    innerRef,
-    isFocused,
-    isSelected
-  }) => {
+  const Option = ({ children, innerProps, innerRef, isFocused, isSelected }) => {
     return /* @__PURE__ */ React3.createElement(
       "div",
       {
@@ -390,14 +385,7 @@ var Select = ({
       children
     );
   };
-  const Menu = ({
-    cx,
-    children,
-    getStyles,
-    innerProps,
-    innerRef,
-    ...menuProps
-  }) => {
+  const Menu = ({ cx, children, getStyles, innerProps, innerRef, ...menuProps }) => {
     const menuOpen = menuProps.selectProps.menuIsOpen;
     return /* @__PURE__ */ React3.createElement(
       "div",
@@ -426,71 +414,72 @@ var Select = ({
       )
     },
     props.label && /* @__PURE__ */ React3.createElement(Label, { ...labelProps }, props.label),
-    props.isLoading ? /* @__PURE__ */ React3.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? (
-      //   TODO: enable keyboard to go to the next item in the list
-      /* @__PURE__ */ React3.createElement(
-        ReactSelect,
-        {
-          noOptionsMessage: NoOption,
-          classNames: {
-            control: () => cn(
-              props.phoneCode && "hawa-rounded-r-none",
-              props.controlClassNames
-            ),
-            container: () => cn(
-              selectContainerStyles,
-              props.phoneCode && phoneCodeStyles,
-              props.isMulti && "hawa-ps-0 "
-            ),
-            placeholder: () => cn(
-              selectPlaceholderStyles,
-              props.disabled && "hawa-text-muted-foreground"
-            ),
-            valueContainer: () => "hawa-text-foreground hawa-px-1 ",
-            singleValue: () => cn(
-              props.disabled ? "hawa-text-muted-foreground hawa-opacity-30" : "hawa-text-foreground"
-            ),
-            indicatorsContainer: () => cn(
-              selectIndicatorContainerStyles,
-              props.hideIndicator ? "hawa-invisible" : "hawa-px-1",
-              props.disabled && "hawa-opacity-30"
-            )
-          },
-          unstyled: true,
-          autoFocus: false,
-          components: props.hideIndicator ? { Option, Menu, IndicatorsContainer: () => null } : {
+    props.isLoading ? /* @__PURE__ */ React3.createElement(Skeleton, { className: "hawa-h-[40px] hawa-w-full" }) : !props.isCreatable ? /* @__PURE__ */ React3.createElement(
+      ReactSelect,
+      {
+        noOptionsMessage: NoOption,
+        classNames: {
+          control: () => cn(props.phoneCode && "hawa-rounded-r-none", props.controlClassNames),
+          container: () => cn(
+            selectContainerStyles,
+            props.phoneCode && phoneCodeStyles,
+            props.isMulti && "hawa-ps-0 "
+          ),
+          placeholder: () => cn(selectPlaceholderStyles, props.disabled && "hawa-text-muted-foreground"),
+          valueContainer: () => "hawa-text-foreground hawa-px-1",
+          singleValue: () => cn(
+            props.disabled ? "hawa-text-muted-foreground hawa-opacity-30" : "hawa-text-foreground"
+          ),
+          indicatorsContainer: () => cn(
+            selectIndicatorContainerStyles,
+            props.hideIndicator ? "hawa-invisible" : "hawa-px-1",
+            props.disabled && "hawa-opacity-30"
+          )
+        },
+        unstyled: true,
+        autoFocus: false,
+        components: props.hideIndicator ? {
+          Option: (optionProps) => /* @__PURE__ */ React3.createElement(
             Option,
-            Menu,
-            ValueContainer: (e) => /* @__PURE__ */ React3.createElement(
-              "div",
-              {
-                className: cn(
-                  e.className,
-                  "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-1"
-                ),
-                ...e
-              }
-            ),
-            MultiValueContainer: (e) => /* @__PURE__ */ React3.createElement(
-              "div",
-              {
-                className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
-                ...e
-              }
-            )
-          },
-          onChange: (newValue, action) => props.onChange(newValue, action),
-          options: props.options,
-          getOptionLabel: props.getOptionLabel,
-          defaultValue: props.defaultValue,
-          value: props.value,
-          placeholder: props.placeholder,
-          isDisabled: props.disabled,
-          isClearable: props.isClearable,
-          isMulti: props.isMulti,
-          isSearchable: props.isSearchable
-        }
-      )
+            {
+              ...optionProps,
+              isSelected: optionProps.data[valueKey] === props.value[valueKey]
+            }
+          ),
+          Menu,
+          IndicatorsContainer: () => null
+        } : {
+          Option,
+          Menu,
+          ValueContainer: (e) => /* @__PURE__ */ React3.createElement(
+            "div",
+            {
+              className: cn(
+                e.className,
+                "hawa-gap-1 hawa-flex hawa-flex-row hawa-flex-wrap hawa-p-2 hawa-w-full hawa-cursor-pointer"
+              ),
+              ...e
+            }
+          ),
+          MultiValueContainer: (e) => /* @__PURE__ */ React3.createElement(
+            "div",
+            {
+              className: "hawa-rounded hawa-border hawa-p-1 hawa-px-2 hawa-flex hawa-flex-row",
+              ...e
+            }
+          )
+        },
+        onChange: (newValue, action) => props.onChange(newValue, action),
+        options: props.options,
+        getOptionLabel: props.getOptionLabel,
+        defaultValue: props.defaultValue,
+        value: props.value,
+        placeholder: props.placeholder,
+        isDisabled: props.disabled,
+        isClearable: props.isClearable,
+        isMulti: props.isMulti,
+        isSearchable: props.isSearchable
+      }
     ) : /* @__PURE__ */ React3.createElement(
       CreatableSelect,
       {
@@ -2228,11 +2217,13 @@ var PhoneInput = ({
   countryCodes,
   ...props
 }) => {
+  var _a;
   const [phoneNumber, setPhoneNumber] = useState3("");
-  const [countryCode, setCountryCode] = useState3(props.preferredCountry);
+  const [countryCode, setCountryCode] = useState3(
+    props.preferredCountry || { label: "+966" }
+  );
   const inputRef = useRef2(null);
   const handleInputChange = (e) => {
-    console.log("test e ", e.target.value);
     const validChars = /^[0-9-()]+$/;
     const input = e.target.value;
     if (input === "" || validChars.test(input)) {
@@ -2254,11 +2245,13 @@ var PhoneInput = ({
       isMulti: false,
       isSearchable: true,
       isClearable: false,
-      placeholder: "Code",
+      placeholder: (_a = props.preferredCountry) == null ? void 0 : _a.label,
       options: countryCodes || countries_default,
-      onChange: setCountryCode,
-      value: countryCode == null ? void 0 : countryCode.label,
-      defaultValue: props.preferredCountry
+      onChange: (e) => setCountryCode({ label: e.label, value: e.label }),
+      valueKey: "label",
+      labelKey: "label",
+      value: { label: countryCode == null ? void 0 : countryCode.label, value: countryCode == null ? void 0 : countryCode.label },
+      defaultValue: { label: countryCode == null ? void 0 : countryCode.label, value: countryCode == null ? void 0 : countryCode.label }
     }
   ), /* @__PURE__ */ React4.createElement("div", { className: "hawa-relative hawa-flex hawa-h-fit hawa-w-full hawa-flex-col hawa-justify-center hawa-gap-0" }, /* @__PURE__ */ React4.createElement(
     "input",
@@ -2422,160 +2415,437 @@ var StopPropagationWrapper = (props) => {
   return /* @__PURE__ */ React6.createElement("div", { onClick: handleClick }, props.children);
 };
 
-// elements/pinInput/PinInput.tsx
+// elements/scrollArea/ScrollArea.tsx
 import * as React7 from "react";
-import { OTPInput, OTPInputContext } from "input-otp";
-
-// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
-import { forwardRef as forwardRef4, createElement as createElement3 } from "react";
-
-// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
-var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-var mergeClasses = (...classes) => classes.filter((className, index, array) => {
-  return Boolean(className) && array.indexOf(className) === index;
-}).join(" ");
-
-// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
-import { forwardRef as forwardRef3, createElement as createElement2 } from "react";
-
-// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
-var defaultAttributes = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-
-// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
-var Icon = forwardRef3(
-  ({
-    color = "currentColor",
-    size = 24,
-    strokeWidth = 2,
-    absoluteStrokeWidth,
-    className = "",
-    children,
-    iconNode,
-    ...rest
-  }, ref) => {
-    return createElement2(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes,
-        width: size,
-        height: size,
-        stroke: color,
-        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-        className: mergeClasses("lucide", className),
-        ...rest
-      },
-      [
-        ...iconNode.map(([tag, attrs]) => createElement2(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    );
-  }
-);
-
-// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
-var createLucideIcon = (iconName, iconNode) => {
-  const Component = forwardRef4(
-    ({ className, ...props }, ref) => createElement3(Icon, {
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+var ScrollArea = React7.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
+  const scrollAreaRef = React7.useRef(null);
+  const isDragging = React7.useRef(false);
+  const startPos = React7.useRef({ x: 0, y: 0 });
+  const scrollPos = React7.useRef({ top: 0, left: 0 });
+  const [showLeftFade, setShowLeftFade] = React7.useState(false);
+  const [showRightFade, setShowRightFade] = React7.useState(false);
+  const checkOverflow = () => {
+    if (scrollAreaRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
+      setShowLeftFade(scrollLeft > 0);
+      setShowRightFade(scrollLeft + clientWidth < scrollWidth);
+    }
+  };
+  const onMouseDown = (e) => {
+    isDragging.current = true;
+    startPos.current = { x: e.clientX, y: e.clientY };
+    if (scrollAreaRef.current) {
+      scrollPos.current = {
+        top: scrollAreaRef.current.scrollTop,
+        left: scrollAreaRef.current.scrollLeft
+      };
+    }
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+  const onMouseMove = (e) => {
+    if (!isDragging.current || !scrollAreaRef.current) return;
+    const dx = e.clientX - startPos.current.x;
+    const dy = e.clientY - startPos.current.y;
+    if (orientation === "vertical") {
+      scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;
+    } else {
+      scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;
+      checkOverflow();
+    }
+  };
+  const onMouseUp = () => {
+    isDragging.current = false;
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+  React7.useEffect(() => {
+    checkOverflow();
+    if (scrollAreaRef.current) {
+      scrollAreaRef.current.addEventListener("scroll", checkOverflow);
+      window.addEventListener("resize", checkOverflow);
+    }
+    return () => {
+      if (scrollAreaRef.current) {
+        scrollAreaRef.current.removeEventListener("scroll", checkOverflow);
+      }
+      window.removeEventListener("resize", checkOverflow);
+    };
+  }, []);
+  return /* @__PURE__ */ React7.createElement(
+    ScrollAreaPrimitive.Root,
+    {
       ref,
-      iconNode,
-      className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+      className: cn("hawa-relative hawa-overflow-hidden", className),
       ...props
-    })
+    },
+    /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0 hawa-mask-fade-right",
+          showLeftFade ? "hawa-block" : "hawa-hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        className: cn(
+          "hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10",
+          showRightFade ? "hawa-block" : "hawa-hidden"
+        )
+      }
+    ),
+    /* @__PURE__ */ React7.createElement(
+      ScrollAreaPrimitive.Viewport,
+      {
+        ref: scrollAreaRef,
+        className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]",
+        onMouseDown
+      },
+      children
+    ),
+    /* @__PURE__ */ React7.createElement(ScrollBar, { orientation }),
+    /* @__PURE__ */ React7.createElement(ScrollAreaPrimitive.Corner, null)
   );
-  Component.displayName = `${iconName}`;
-  return Component;
-};
-
-// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/dot.js
-var Dot = createLucideIcon("Dot", [
-  ["circle", { cx: "12.1", cy: "12.1", r: "1", key: "18d7e5" }]
-]);
-
-// elements/pinInput/PinInput.tsx
-var PinInputRoot = React7.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React7.createElement(
-  OTPInput,
+});
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React7.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React7.createElement(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
-    containerClassName: cn(
-      "hawa-flex hawa-items-center hawa-gap-2 has-[:disabled]:hawa-opacity-50",
-      containerClassName
+    orientation,
+    className: cn(
+      "hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors",
+      orientation === "vertical" && "hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]",
+      orientation === "horizontal" && "hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]",
+      className
     ),
-    className: cn("disabled:hawa-cursor-not-allowed", className),
-    ...props
-  }
-));
-PinInputRoot.displayName = "PinInputRoot";
-var PinInputGroup = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React7.createElement(
-  "div",
-  {
-    ref,
-    className: cn("hawa-flex hawa-items-center", className),
     ...props
-  }
-));
-PinInputGroup.displayName = "PinInputGroup";
-var PinInputSlot = React7.forwardRef(({ index, className, ...props }, ref) => {
-  const pinInputContext = React7.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = pinInputContext.slots[index];
-  return /* @__PURE__ */ React7.createElement(
-    "div",
+  },
+  /* @__PURE__ */ React7.createElement(
+    ScrollAreaPrimitive.ScrollAreaThumb,
     {
-      ref,
       className: cn(
-        "hawa-border-input hawa-relative hawa-flex hawa-h-10 hawa-w-10 hawa-items-center hawa-justify-center hawa-border-y hawa-border-r hawa-text-sm hawa-transition-all first:hawa-rounded-l-md first:hawa-border-l last:hawa-rounded-r-md",
-        isActive && "hawa-ring-ring hawa-ring-offset-background hawa-z-10 hawa-ring-2",
-        className
-      ),
-      ...props
-    },
-    char,
-    hasFakeCaret && /* @__PURE__ */ React7.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-inset-0 hawa-flex hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React7.createElement("div", { className: "hawa-animate-caret-blink hawa-bg-foreground hawa-h-4 hawa-w-px hawa-duration-1000" }))
-  );
-});
-PinInputSlot.displayName = "PinInputSlot";
-var PinInputSeperator = React7.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React7.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React7.createElement(Dot, null)));
-PinInputSeperator.displayName = "PinInputSeperator";
-var PinInput = ({
-  separatorPosition = 0,
-  ...props
-}) => {
-  const maxLength = props.maxLength || 6;
-  const clampedSeparatorPosition = Math.min(separatorPosition, maxLength);
-  const firstGroupLength = clampedSeparatorPosition > 0 ? clampedSeparatorPosition : 0;
-  const secondGroupLength = maxLength - firstGroupLength;
-  return /* @__PURE__ */ React7.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, /* @__PURE__ */ React7.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React7.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React7.createElement(
-    PinInputSlot,
-    {
-      key: index,
-      index,
-      className: "hawa-w-full hawa-border"
+        "hawa-relative hawa-rounded-full hawa-bg-border",
+        orientation === "vertical" && "hawa-flex-1"
+      )
     }
-  ))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React7.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React7.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React7.createElement(
-    PinInputSlot,
-    {
-      key: index + firstGroupLength,
-      index: index + firstGroupLength,
-      className: "hawa-w-full hawa-border"
+  )
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+// elements/tabs/Tabs.tsx
+import * as React8 from "react";
+import * as Popover from "@radix-ui/react-popover";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { tv } from "tailwind-variants";
+var tabsListVariant = tv({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined_tabs: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
+    },
+    orientation: { horizontal: "", vertical: "" }
+  },
+  compoundVariants: [
+    {
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-border-e-2 hawa-border-e-primary"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-border-b-2 hawa-border-b-primary"
+    }
+  ],
+  defaultVariants: { variant: "default", orientation: "horizontal" }
+});
+var tabsTriggerVariant = tv({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
+      underlined: "hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
+      underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10"
+    },
+    orientation: { horizontal: "", vertical: "" }
+  },
+  compoundVariants: [
+    {
+      variant: "underlined",
+      orientation: "horizontal",
+      class: "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
+    },
+    {
+      variant: "underlined",
+      orientation: "vertical",
+      class: "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-rounded-b-none"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-rounded-e-none"
+    }
+  ],
+  defaultVariants: { variant: "default", orientation: "horizontal" }
+});
+var TabsContext = React8.createContext({ orientation: "horizontal", variant: "default", scrollable: false });
+var Tabs = React8.forwardRef(
+  ({ className, orientation, scrollable, variant = "default", ...props }, ref) => /* @__PURE__ */ React8.createElement(
+    TabsPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "hawa-flex hawa-gap-2",
+        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React8.createElement(TabsContext.Provider, { value: { orientation, variant, scrollable } }, props.children)
+  )
+);
+var TabsList = React8.forwardRef(({ className, classNames, ...props }, ref) => {
+  const { orientation, variant, scrollable } = React8.useContext(TabsContext);
+  const { width } = useViewportSize();
+  if (scrollable && width < 768 && orientation === "horizontal") {
+    return /* @__PURE__ */ React8.createElement(ScrollArea, { orientation: "horizontal", className: classNames == null ? void 0 : classNames.scrollArea }, /* @__PURE__ */ React8.createElement(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(
+          tabsListVariant({ variant, orientation }),
+          "hawa-flex-row hawa-flex-nowrap",
+          className
+        ),
+        ...props
+      }
+    ));
+  } else {
+    return /* @__PURE__ */ React8.createElement(
+      TabsPrimitive.List,
+      {
+        ref,
+        className: cn(
+          tabsListVariant({ variant, orientation }),
+          orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
+          "hawa-flex-wrap",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+});
+var TabsTrigger = React8.forwardRef(
+  ({ className, chipProps, withPopover = false, onPopoverClick, ...props }, ref) => {
+    const { orientation, variant } = React8.useContext(TabsContext);
+    if (withPopover) {
+      return /* @__PURE__ */ React8.createElement(Popover.Root, { open: props.showPopover }, /* @__PURE__ */ React8.createElement(Popover.Anchor, { asChild: true }, /* @__PURE__ */ React8.createElement(
+        TabsPrimitive.Trigger,
+        {
+          className: cn(
+            tabsTriggerVariant({ variant, orientation }),
+            "hawa-relative",
+            className
+          ),
+          ...props
+        },
+        props.children,
+        chipProps && /* @__PURE__ */ React8.createElement(Chip, { ...chipProps })
+      )), /* @__PURE__ */ React8.createElement(
+        Popover.Content,
+        {
+          onClick: onPopoverClick,
+          asChild: true,
+          className: cn(
+            "dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
+            "hawa-arrow-default-top hawa-mt-2"
+          )
+        },
+        /* @__PURE__ */ React8.createElement("div", { className: "hawa-p-2" }, " ", props.popoverContent)
+      ));
+    } else {
+      return /* @__PURE__ */ React8.createElement(
+        TabsPrimitive.Trigger,
+        {
+          className: cn(
+            tabsTriggerVariant({ variant, orientation }),
+            "hawa-relative",
+            className
+          ),
+          ...props
+        },
+        props.children,
+        chipProps && /* @__PURE__ */ React8.createElement(Chip, { ...chipProps })
+      );
+    }
+  }
+);
+var TabsContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React8.createElement(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+Tabs.displayName = TabsPrimitive.Root.displayName;
+TabsList.displayName = TabsPrimitive.List.displayName;
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// elements/pinInput/PinInput.tsx
+import * as React9 from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+
+// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+import { forwardRef as forwardRef6, createElement as createElement5 } from "react";
+
+// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.js
+var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+var mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && array.indexOf(className) === index;
+}).join(" ");
+
+// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+import { forwardRef as forwardRef5, createElement as createElement4 } from "react";
+
+// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.js
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.js
+var Icon = forwardRef5(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => {
+    return createElement4(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes,
+        width: size,
+        height: size,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        className: mergeClasses("lucide", className),
+        ...rest
+      },
+      [
+        ...iconNode.map(([tag, attrs]) => createElement4(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
+  }
+);
+
+// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
+var createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef6(
+    ({ className, ...props }, ref) => createElement5(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+      ...props
+    })
+  );
+  Component.displayName = `${iconName}`;
+  return Component;
+};
+
+// ../../node_modules/.pnpm/lucide-react@0.427.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/dot.js
+var Dot = createLucideIcon("Dot", [
+  ["circle", { cx: "12.1", cy: "12.1", r: "1", key: "18d7e5" }]
+]);
+
+// elements/pinInput/PinInput.tsx
+var PinInputRoot = React9.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ React9.createElement(
+  OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "hawa-flex hawa-items-center hawa-gap-2 has-[:disabled]:hawa-opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:hawa-cursor-not-allowed", className),
+    ...props
+  }
+));
+PinInputRoot.displayName = "PinInputRoot";
+var PinInputGroup = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React9.createElement("div", { ref, className: cn("hawa-flex hawa-items-center", className), ...props }));
+PinInputGroup.displayName = "PinInputGroup";
+var PinInputSlot = React9.forwardRef(({ index, className, ...props }, ref) => {
+  const pinInputContext = React9.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = pinInputContext.slots[index];
+  return /* @__PURE__ */ React9.createElement(
+    "div",
+    {
+      ref,
+      className: cn(
+        "hawa-border-input hawa-relative hawa-flex hawa-h-10 hawa-w-10 hawa-items-center hawa-justify-center hawa-border-y hawa-border-r hawa-text-sm hawa-transition-all first:hawa-rounded-l-md first:hawa-border-l last:hawa-rounded-r-md",
+        isActive && "hawa-ring-ring hawa-ring-offset-background hawa-z-10 hawa-ring-2",
+        className
+      ),
+      ...props
+    },
+    char,
+    hasFakeCaret && /* @__PURE__ */ React9.createElement("div", { className: "hawa-pointer-events-none hawa-absolute hawa-inset-0 hawa-flex hawa-items-center hawa-justify-center" }, /* @__PURE__ */ React9.createElement("div", { className: "hawa-animate-caret-blink hawa-bg-foreground hawa-h-4 hawa-w-px hawa-duration-1000" }))
+  );
+});
+PinInputSlot.displayName = "PinInputSlot";
+var PinInputSeperator = React9.forwardRef(({ ...props }, ref) => /* @__PURE__ */ React9.createElement("div", { ref, role: "separator", ...props }, /* @__PURE__ */ React9.createElement(Dot, null)));
+PinInputSeperator.displayName = "PinInputSeperator";
+var PinInput = ({ separatorPosition = 0, ...props }) => {
+  const maxLength = props.maxLength || 6;
+  const clampedSeparatorPosition = Math.min(separatorPosition, maxLength);
+  const firstGroupLength = clampedSeparatorPosition > 0 ? clampedSeparatorPosition : 0;
+  const secondGroupLength = maxLength - firstGroupLength;
+  return /* @__PURE__ */ React9.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2", dir: "ltr" }, /* @__PURE__ */ React9.createElement(PinInputRoot, { ...props }, firstGroupLength > 0 && /* @__PURE__ */ React9.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(firstGroupLength)].map((_, index) => /* @__PURE__ */ React9.createElement(PinInputSlot, { key: index, index, className: "hawa-w-full hawa-border" }))), separatorPosition > 0 && separatorPosition < props.maxLength && /* @__PURE__ */ React9.createElement(PinInputSeperator, null), secondGroupLength > 0 && /* @__PURE__ */ React9.createElement(PinInputGroup, { className: "hawa-w-full hawa-gap-2" }, [...Array(secondGroupLength)].map((_, index) => /* @__PURE__ */ React9.createElement(
+    PinInputSlot,
+    {
+      key: index + firstGroupLength,
+      index: index + firstGroupLength,
+      className: "hawa-w-full hawa-border"
     }
-  )))), /* @__PURE__ */ React7.createElement(HelperText, { helperText: props.helperText }));
+  )))), /* @__PURE__ */ React9.createElement(HelperText, { helperText: props.helperText }));
 };
 
 // elements/popover/Popover.tsx
-import * as React8 from "react";
+import * as React10 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-var PopoverContent = React8.forwardRef(
-  ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => /* @__PURE__ */ React8.createElement(PopoverPrimitive.Portal, { container }, /* @__PURE__ */ React8.createElement(
+var PopoverContent = React10.forwardRef(
+  ({ className, align = "center", sideOffset = 4, container, ...props }, ref) => /* @__PURE__ */ React10.createElement(PopoverPrimitive.Portal, { container }, /* @__PURE__ */ React10.createElement(
     PopoverPrimitive.Content,
     {
       ref,
@@ -2590,7 +2860,7 @@ var PopoverContent = React8.forwardRef(
   ))
 );
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Popover = ({
+var Popover2 = ({
   trigger,
   children,
   className,
@@ -2608,7 +2878,7 @@ var Popover = ({
     trigger: "var(--radix-popover-trigger-width)",
     default: "auto"
   };
-  return /* @__PURE__ */ React8.createElement(PopoverPrimitive.Root, { open, ...props }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React10.createElement(PopoverPrimitive.Root, { open, ...props }, /* @__PURE__ */ React10.createElement(
     PopoverPrimitive.Trigger,
     {
       className: "hawa-w-full",
@@ -2616,7 +2886,7 @@ var Popover = ({
       ...triggerProps
     },
     trigger
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React10.createElement(
     PopoverContent,
     {
       side,
@@ -2638,9 +2908,9 @@ var PopoverPortal = PopoverPrimitive.Portal;
 var PopoverRoot = PopoverPrimitive.Root;
 
 // elements/radio/Radio.tsx
-import React9, { useState as useState4, useRef as useRef3, useEffect as useEffect3, forwardRef as forwardRef7 } from "react";
-import { TabsList, TabsTrigger, Tabs } from "@radix-ui/react-tabs";
-var Radio = forwardRef7(
+import React11, { useState as useState5, useRef as useRef4, useEffect as useEffect4, forwardRef as forwardRef9 } from "react";
+import { TabsList as TabsList2, TabsTrigger as TabsTrigger2, Tabs as Tabs2 } from "@radix-ui/react-tabs";
+var Radio = forwardRef9(
   ({
     design = "default",
     width = "default",
@@ -2673,15 +2943,15 @@ var Radio = forwardRef7(
       default: "hawa-max-w-fit",
       full: "hawa-w-full"
     };
-    const [parentDirection, setParentDirection] = React9.useState(
+    const [parentDirection, setParentDirection] = React11.useState(
       null
     );
-    const [selectedOption, setSelectedOption] = useState4(
+    const [selectedOption, setSelectedOption] = useState5(
       props.defaultValue || props.value
     );
-    const [openTooltip, setOpenTooltip] = useState4(null);
-    const parentRef = useRef3(null);
-    useEffect3(() => {
+    const [openTooltip, setOpenTooltip] = useState5(null);
+    const parentRef = useRef4(null);
+    useEffect4(() => {
       var _a2;
       const parentNode = (_a2 = parentRef.current) == null ? void 0 : _a2.parentNode;
       if (parentNode) {
@@ -2707,7 +2977,7 @@ var Radio = forwardRef7(
     ];
     switch (design) {
       case "tabs":
-        return /* @__PURE__ */ React9.createElement(
+        return /* @__PURE__ */ React11.createElement(
           "div",
           {
             className: cn(
@@ -2715,9 +2985,9 @@ var Radio = forwardRef7(
               containerClassNames == null ? void 0 : containerClassNames.tabs
             )
           },
-          props.label && /* @__PURE__ */ React9.createElement(Label, { ...labelProps }, props.label),
-          /* @__PURE__ */ React9.createElement(Tabs, null, /* @__PURE__ */ React9.createElement(
-            TabsList,
+          props.label && /* @__PURE__ */ React11.createElement(Label, { ...labelProps }, props.label),
+          /* @__PURE__ */ React11.createElement(Tabs2, null, /* @__PURE__ */ React11.createElement(
+            TabsList2,
             {
               role: "tablist",
               ref: parentRef,
@@ -2731,22 +3001,22 @@ var Radio = forwardRef7(
               )
             },
             (_b = props.options) == null ? void 0 : _b.map((opt, o) => {
-              return opt.tooltip ? /* @__PURE__ */ React9.createElement(
+              return opt.tooltip ? /* @__PURE__ */ React11.createElement(
                 PopoverRoot,
                 {
                   key: o,
                   open: o === openTooltip,
                   onOpenChange: (bool) => setOpenTooltip(bool ? o : null)
                 },
-                /* @__PURE__ */ React9.createElement(
+                /* @__PURE__ */ React11.createElement(
                   PopoverTrigger,
                   {
                     onMouseEnter: () => setOpenTooltip(o),
                     onMouseLeave: () => setOpenTooltip(null),
                     asChild: true
                   },
-                  /* @__PURE__ */ React9.createElement(
-                    TabsTrigger,
+                  /* @__PURE__ */ React11.createElement(
+                    TabsTrigger2,
                     {
                       "aria-current": selectedOption === opt.value ? "page" : void 0,
                       value: opt.value,
@@ -2765,9 +3035,9 @@ var Radio = forwardRef7(
                     opt.label
                   )
                 ),
-                /* @__PURE__ */ React9.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
-              ) : /* @__PURE__ */ React9.createElement(
-                TabsTrigger,
+                /* @__PURE__ */ React11.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
+              ) : /* @__PURE__ */ React11.createElement(
+                TabsTrigger2,
                 {
                   key: o,
                   role: "tab",
@@ -2788,10 +3058,10 @@ var Radio = forwardRef7(
               );
             })
           )),
-          !forceHideHelperText && /* @__PURE__ */ React9.createElement(HelperText, { helperText: props.helperText })
+          !forceHideHelperText && /* @__PURE__ */ React11.createElement(HelperText, { helperText: props.helperText })
         );
       case "bordered":
-        return /* @__PURE__ */ React9.createElement(
+        return /* @__PURE__ */ React11.createElement(
           "div",
           {
             className: cn(
@@ -2800,7 +3070,7 @@ var Radio = forwardRef7(
               containerClassNames == null ? void 0 : containerClassNames.bordered
             )
           },
-          props.options && props.options.map((opt, i) => /* @__PURE__ */ React9.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ React9.createElement(
+          props.options && props.options.map((opt, i) => /* @__PURE__ */ React11.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ React11.createElement(
             "div",
             {
               className: cn(
@@ -2809,7 +3079,7 @@ var Radio = forwardRef7(
               ),
               key: i + 1
             },
-            /* @__PURE__ */ React9.createElement(
+            /* @__PURE__ */ React11.createElement(
               "input",
               {
                 disabled: opt.disabled,
@@ -2820,442 +3090,148 @@ var Radio = forwardRef7(
                 onChange: () => handleChange(opt)
               }
             ),
-            /* @__PURE__ */ React9.createElement(
+            /* @__PURE__ */ React11.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__ */ React9.createElement(
-          "ul",
-          {
-            className: cn(
-              orientationStyle[orientation],
-              "hawa-gap-4",
-              containerClassNames == null ? void 0 : containerClassNames.cards
-            )
-          },
-          (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ React9.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ React9.createElement(
-            "input",
-            {
-              type: "radio",
-              id: opt.value.toString(),
-              name,
-              value: opt.value.toString(),
-              className: "hawa-peer hawa-hidden",
-              required: true,
-              disabled: opt.disabled
-            }
-          ), /* @__PURE__ */ React9.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__ */ React9.createElement("div", { className: "hawa-block hawa-h-full hawa-w-full" }, /* @__PURE__ */ React9.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ React9.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
-          )))
-        );
-      default:
-        return /* @__PURE__ */ React9.createElement(
-          "div",
-          {
-            className: cn(
-              "hawa-flex hawa-flex-col hawa-gap-2",
-              containerClassNames == null ? void 0 : containerClassNames.default
-            )
-          },
-          props.label && /* @__PURE__ */ React9.createElement(Label, { ...labelProps }, props.label),
-          /* @__PURE__ */ React9.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React9.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__ */ React9.createElement(
-              "input",
-              {
-                disabled: opt.disabled,
-                id: opt.value.toString(),
-                type: "radio",
-                value: opt.value,
-                name,
-                onChange: () => handleChange(opt)
-              }
-            ),
-            /* @__PURE__ */ React9.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__ */ React9.createElement(HelperText, { helperText: props.helperText })
-        );
-    }
-  }
-);
-
-// elements/textarea/Textarea.tsx
-import * as React10 from "react";
-var Textarea = React10.forwardRef(
-  ({
-    className,
-    classNames,
-    labelProps,
-    showCount,
-    forceHideHelperText,
-    textareaProps,
-    countPosition = "bottom",
-    isLoading,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ React10.createElement(
-      "div",
-      {
-        className: cn(
-          "textarea-main hawa-relative hawa-flex hawa-h-full hawa-w-full hawa-flex-col",
-          !forceHideHelperText && "hawa-gap-2",
-          className
-        )
-      },
-      /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, props.label && /* @__PURE__ */ React10.createElement(Label, { ...labelProps }, props.label), showCount && countPosition === "top" && /* @__PURE__ */ React10.createElement(
-        "div",
-        {
-          className: "hawa-text-start hawa-text-xs hawa-transition-all hawa-leading-none"
-        },
-        (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
-        "/",
-        textareaProps == null ? void 0 : textareaProps.maxLength
-      )),
-      isLoading ? /* @__PURE__ */ React10.createElement(Skeleton, { style: { height: 40 } }) : /* @__PURE__ */ React10.createElement(
-        "textarea",
-        {
-          ...textareaProps,
-          className: cn(
-            "hawa-flex hawa-min-h-[40px] hawa-h-[40px] hawa-w-full hawa-rounded-md hawa-border hawa-border-input hawa-bg-background hawa-px-3 hawa-py-2 hawa-text-sm hawa-ring-offset-background placeholder:hawa-text-gray-400 placeholder:hawa-text-muted-foreground focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50",
-            classNames == null ? void 0 : classNames.textarea
-          ),
-          ref
-        }
-      ),
-      /* @__PURE__ */ React10.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React10.createElement(HelperText, { helperText: props.helperText }), showCount && countPosition === "bottom" && /* @__PURE__ */ React10.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
-    );
-  }
-);
-Textarea.displayName = "Textarea";
-
-// elements/scrollArea/ScrollArea.tsx
-import * as React11 from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-var ScrollArea = React11.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
-  const scrollAreaRef = React11.useRef(null);
-  const isDragging = React11.useRef(false);
-  const startPos = React11.useRef({ x: 0, y: 0 });
-  const scrollPos = React11.useRef({ top: 0, left: 0 });
-  const [showLeftFade, setShowLeftFade] = React11.useState(false);
-  const [showRightFade, setShowRightFade] = React11.useState(false);
-  const checkOverflow = () => {
-    if (scrollAreaRef.current) {
-      const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
-      setShowLeftFade(scrollLeft > 0);
-      setShowRightFade(scrollLeft + clientWidth < scrollWidth);
-    }
-  };
-  const onMouseDown = (e) => {
-    isDragging.current = true;
-    startPos.current = { x: e.clientX, y: e.clientY };
-    if (scrollAreaRef.current) {
-      scrollPos.current = {
-        top: scrollAreaRef.current.scrollTop,
-        left: scrollAreaRef.current.scrollLeft
-      };
-    }
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", onMouseUp);
-  };
-  const onMouseMove = (e) => {
-    if (!isDragging.current || !scrollAreaRef.current) return;
-    const dx = e.clientX - startPos.current.x;
-    const dy = e.clientY - startPos.current.y;
-    if (orientation === "vertical") {
-      scrollAreaRef.current.scrollTop = scrollPos.current.top - dy;
-    } else {
-      scrollAreaRef.current.scrollLeft = scrollPos.current.left - dx;
-      checkOverflow();
-    }
-  };
-  const onMouseUp = () => {
-    isDragging.current = false;
-    document.removeEventListener("mousemove", onMouseMove);
-    document.removeEventListener("mouseup", onMouseUp);
-  };
-  React11.useEffect(() => {
-    checkOverflow();
-    if (scrollAreaRef.current) {
-      scrollAreaRef.current.addEventListener("scroll", checkOverflow);
-      window.addEventListener("resize", checkOverflow);
-    }
-    return () => {
-      if (scrollAreaRef.current) {
-        scrollAreaRef.current.removeEventListener("scroll", checkOverflow);
-      }
-      window.removeEventListener("resize", checkOverflow);
-    };
-  }, []);
-  return /* @__PURE__ */ React11.createElement(
-    ScrollAreaPrimitive.Root,
-    {
-      ref,
-      className: cn("hawa-relative hawa-overflow-hidden", className),
-      ...props
-    },
-    /* @__PURE__ */ React11.createElement(
-      "div",
-      {
-        className: cn(
-          "hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-h-full hawa-w-[50px] hawa-z-10 hawa-start-0 hawa-mask-fade-right",
-          showLeftFade ? "hawa-block" : "hawa-hidden"
-        )
-      }
-    ),
-    /* @__PURE__ */ React11.createElement(
-      "div",
-      {
-        className: cn(
-          "hawa-pointer-events-none hawa-absolute hawa-bg-background hawa-mask-fade-left hawa-end-0 hawa-h-full hawa-w-[50px] hawa-z-10",
-          showRightFade ? "hawa-block" : "hawa-hidden"
-        )
-      }
-    ),
-    /* @__PURE__ */ React11.createElement(
-      ScrollAreaPrimitive.Viewport,
-      {
-        ref: scrollAreaRef,
-        className: "hawa-h-full hawa-w-full hawa-rounded-[inherit]",
-        onMouseDown
-      },
-      children
-    ),
-    /* @__PURE__ */ React11.createElement(ScrollBar, { orientation }),
-    /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Corner, null)
-  );
-});
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React11.createElement(
-  ScrollAreaPrimitive.ScrollAreaScrollbar,
-  {
-    ref,
-    orientation,
-    className: cn(
-      "hawa-flex hawa-touch-none hawa-select-none hawa-transition-colors",
-      orientation === "vertical" && "hawa-h-full hawa-w-2.5 hawa-border-l hawa-border-l-transparent hawa-p-[1px]",
-      orientation === "horizontal" && "hawa-h-2.5 hawa-border-t hawa-border-t-transparent hawa-p-[1px]",
-      className
-    ),
-    ...props
-  },
-  /* @__PURE__ */ React11.createElement(
-    ScrollAreaPrimitive.ScrollAreaThumb,
-    {
-      className: cn(
-        "hawa-relative hawa-rounded-full hawa-bg-border",
-        orientation === "vertical" && "hawa-flex-1"
-      )
+                  "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__ */ React11.createElement(
+          "ul",
+          {
+            className: cn(
+              orientationStyle[orientation],
+              "hawa-gap-4",
+              containerClassNames == null ? void 0 : containerClassNames.cards
+            )
+          },
+          (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ React11.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ React11.createElement(
+            "input",
+            {
+              type: "radio",
+              id: opt.value.toString(),
+              name,
+              value: opt.value.toString(),
+              className: "hawa-peer hawa-hidden",
+              required: true,
+              disabled: opt.disabled
+            }
+          ), /* @__PURE__ */ React11.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__ */ React11.createElement("div", { className: "hawa-block hawa-h-full hawa-w-full" }, /* @__PURE__ */ React11.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ React11.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
+          )))
+        );
+      default:
+        return /* @__PURE__ */ React11.createElement(
+          "div",
+          {
+            className: cn(
+              "hawa-flex hawa-flex-col hawa-gap-2",
+              containerClassNames == null ? void 0 : containerClassNames.default
+            )
+          },
+          props.label && /* @__PURE__ */ React11.createElement(Label, { ...labelProps }, props.label),
+          /* @__PURE__ */ React11.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React11.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__ */ React11.createElement(
+              "input",
+              {
+                disabled: opt.disabled,
+                id: opt.value.toString(),
+                type: "radio",
+                value: opt.value,
+                name,
+                onChange: () => handleChange(opt)
+              }
+            ),
+            /* @__PURE__ */ React11.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__ */ React11.createElement(HelperText, { helperText: props.helperText })
+        );
     }
-  )
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+  }
+);
 
-// elements/tabs/Tabs.tsx
+// elements/textarea/Textarea.tsx
 import * as React12 from "react";
-import * as Popover2 from "@radix-ui/react-popover";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { tv } from "tailwind-variants";
-var tabsListVariant = tv({
-  base: "",
-  variants: {
-    variant: {
-      default: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
-      underlined: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
-      underlined_tabs: "hawa-flex hawa-w-fit hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
-    },
-    orientation: { horizontal: "", vertical: "" }
-  },
-  compoundVariants: [
-    {
-      variant: "underlined_tabs",
-      orientation: "vertical",
-      class: "hawa-border-e-2 hawa-border-e-primary"
-    },
-    {
-      variant: "underlined_tabs",
-      orientation: "horizontal",
-      class: "hawa-border-b-2 hawa-border-b-primary"
-    }
-  ],
-  defaultVariants: { variant: "default", orientation: "horizontal" }
-});
-var tabsTriggerVariant = tv({
-  base: "",
-  variants: {
-    variant: {
-      default: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
-      underlined: "hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
-      underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10"
-    },
-    orientation: { horizontal: "", vertical: "" }
-  },
-  compoundVariants: [
-    {
-      variant: "underlined",
-      orientation: "horizontal",
-      class: "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
-    },
-    {
-      variant: "underlined",
-      orientation: "vertical",
-      class: "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
-    },
-    {
-      variant: "underlined_tabs",
-      orientation: "horizontal",
-      class: "hawa-rounded-b-none"
-    },
-    {
-      variant: "underlined_tabs",
-      orientation: "vertical",
-      class: "hawa-rounded-e-none"
-    }
-  ],
-  defaultVariants: { variant: "default", orientation: "horizontal" }
-});
-var TabsContext = React12.createContext({ orientation: "horizontal", variant: "default", scrollable: false });
-var Tabs2 = React12.forwardRef(
-  ({ className, orientation, scrollable, variant = "default", ...props }, ref) => /* @__PURE__ */ React12.createElement(
-    TabsPrimitive.Root,
-    {
-      ref,
-      className: cn(
-        "hawa-flex hawa-gap-2",
-        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
-        className
-      ),
-      ...props
-    },
-    /* @__PURE__ */ React12.createElement(TabsContext.Provider, { value: { orientation, variant, scrollable } }, props.children)
-  )
-);
-var TabsList2 = React12.forwardRef(({ className, classNames, ...props }, ref) => {
-  const { orientation, variant, scrollable } = React12.useContext(TabsContext);
-  const { width } = useViewportSize();
-  if (scrollable && width < 768 && orientation === "horizontal") {
-    return /* @__PURE__ */ React12.createElement(ScrollArea, { orientation: "horizontal", className: classNames == null ? void 0 : classNames.scrollArea }, /* @__PURE__ */ React12.createElement(
-      TabsPrimitive.List,
-      {
-        ref,
-        className: cn(
-          tabsListVariant({ variant, orientation }),
-          "hawa-flex-row hawa-flex-nowrap",
-          className
-        ),
-        ...props
-      }
-    ));
-  } else {
+var Textarea = React12.forwardRef(
+  ({
+    className,
+    classNames,
+    labelProps,
+    showCount,
+    forceHideHelperText,
+    textareaProps,
+    countPosition = "bottom",
+    isLoading,
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ React12.createElement(
-      TabsPrimitive.List,
+      "div",
       {
-        ref,
         className: cn(
-          tabsListVariant({ variant, orientation }),
-          orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
-          "hawa-flex-wrap",
+          "textarea-main hawa-relative hawa-flex hawa-h-full hawa-w-full hawa-flex-col",
+          !forceHideHelperText && "hawa-gap-2",
           className
-        ),
-        ...props
-      }
-    );
-  }
-});
-var TabsTrigger2 = React12.forwardRef(
-  ({ className, chipProps, withPopover = false, onPopoverClick, ...props }, ref) => {
-    const { orientation, variant } = React12.useContext(TabsContext);
-    if (withPopover) {
-      return /* @__PURE__ */ React12.createElement(Popover2.Root, { open: props.showPopover }, /* @__PURE__ */ React12.createElement(Popover2.Anchor, { asChild: true }, /* @__PURE__ */ React12.createElement(
-        TabsPrimitive.Trigger,
-        {
-          className: cn(
-            tabsTriggerVariant({ variant, orientation }),
-            "hawa-relative",
-            className
-          ),
-          ...props
-        },
-        props.children,
-        chipProps && /* @__PURE__ */ React12.createElement(Chip, { ...chipProps })
-      )), /* @__PURE__ */ React12.createElement(
-        Popover2.Content,
+        )
+      },
+      /* @__PURE__ */ React12.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, props.label && /* @__PURE__ */ React12.createElement(Label, { ...labelProps }, props.label), showCount && countPosition === "top" && /* @__PURE__ */ React12.createElement(
+        "div",
         {
-          onClick: onPopoverClick,
-          asChild: true,
-          className: cn(
-            "dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
-            "hawa-arrow-default-top hawa-mt-2"
-          )
+          className: "hawa-text-start hawa-text-xs hawa-transition-all hawa-leading-none"
         },
-        /* @__PURE__ */ React12.createElement("div", { className: "hawa-p-2" }, " ", props.popoverContent)
-      ));
-    } else {
-      return /* @__PURE__ */ React12.createElement(
-        TabsPrimitive.Trigger,
+        (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0,
+        "/",
+        textareaProps == null ? void 0 : textareaProps.maxLength
+      )),
+      isLoading ? /* @__PURE__ */ React12.createElement(Skeleton, { style: { height: 40 } }) : /* @__PURE__ */ React12.createElement(
+        "textarea",
         {
+          ...textareaProps,
           className: cn(
-            tabsTriggerVariant({ variant, orientation }),
-            "hawa-relative",
-            className
+            "hawa-flex hawa-min-h-[40px] hawa-h-[40px] hawa-w-full hawa-rounded-md hawa-border hawa-border-input hawa-bg-background hawa-px-3 hawa-py-2 hawa-text-sm hawa-ring-offset-background placeholder:hawa-text-gray-400 placeholder:hawa-text-muted-foreground focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 disabled:hawa-cursor-not-allowed disabled:hawa-opacity-50",
+            classNames == null ? void 0 : classNames.textarea
           ),
-          ...props
-        },
-        props.children,
-        chipProps && /* @__PURE__ */ React12.createElement(Chip, { ...chipProps })
-      );
-    }
+          ref
+        }
+      ),
+      /* @__PURE__ */ React12.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-between" }, !forceHideHelperText && /* @__PURE__ */ React12.createElement(HelperText, { helperText: props.helperText }), showCount && countPosition === "bottom" && /* @__PURE__ */ React12.createElement("div", { className: "hawa-text-start hawa-text-xs hawa-transition-all" }, (textareaProps == null ? void 0 : textareaProps.value) ? String(textareaProps == null ? void 0 : textareaProps.value).length : 0, "/", textareaProps == null ? void 0 : textareaProps.maxLength))
+    );
   }
 );
-var TabsContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
-  TabsPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "hawa-ring-offset-hawa-background hawa-w-full focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2",
-      className
-    ),
-    ...props
-  }
-));
-Tabs2.displayName = TabsPrimitive.Root.displayName;
-TabsList2.displayName = TabsPrimitive.List.displayName;
-TabsTrigger2.displayName = TabsPrimitive.Trigger.displayName;
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+Textarea.displayName = "Textarea";
 
 // elements/separator/Separator.tsx
 import * as React13 from "react";
@@ -3305,24 +3281,24 @@ export {
   PhoneInput,
   Checkbox,
   StopPropagationWrapper,
+  ScrollArea,
+  ScrollBar,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
   PinInputRoot,
   PinInputGroup,
   PinInputSlot,
   PinInputSeperator,
   PinInput,
   PopoverContent,
-  Popover,
+  Popover2 as Popover,
   PopoverTrigger,
   PopoverPortal,
   PopoverRoot,
   Radio,
   Textarea,
-  ScrollArea,
-  ScrollBar,
-  Tabs2 as Tabs,
-  TabsList2 as TabsList,
-  TabsTrigger2 as TabsTrigger,
-  TabsContent,
   Separator,
   Progress
 };