@sikka/hawa 0.39.0-next → 0.40.0-next

package/dist/tabs/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // elements/tabs/Tabs.tsx
-import * as React12 from "react";
+import * as React11 from "react";
 
 // hooks/useIsomorphicEffect.ts
 import { useEffect, useLayoutEffect } from "react";
@@ -52,37 +52,6 @@ import { useEffect as useEffect12, useState as useState14 } from "react";
 
 // hooks/useMeasureDirty.ts
 import { useEffect as useEffect13, useRef as useRef7, useState as useState15 } from "react";
-var useMeasureDirty = (ref) => {
-  const frame = useRef7(0);
-  const [rect, set] = useState15({
-    width: 0,
-    height: 0,
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0
-  });
-  const [observer] = useState15(
-    () => new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        cancelAnimationFrame(frame.current);
-        frame.current = requestAnimationFrame(() => {
-          if (ref.current) {
-            set(entry.contentRect);
-          }
-        });
-      }
-    })
-  );
-  useEffect13(() => {
-    observer.disconnect();
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-  }, [ref]);
-  return rect;
-};
 
 // hooks/useClickOutside.ts
 import { useEffect as useEffect14, useRef as useRef8 } from "react";
@@ -90,7 +59,39 @@ import { useEffect as useEffect14, useRef as useRef8 } from "react";
 // hooks/useShortcuts.ts
 import { useEffect as useEffect15 } from "react";
 
+// hooks/useWindowEvent.ts
+import { useEffect as useEffect16 } from "react";
+function useWindowEvent(type, listener, options) {
+  useEffect16(() => {
+    window.addEventListener(type, listener, options);
+    return () => window.removeEventListener(type, listener, options);
+  }, [type, listener]);
+}
+
+// hooks/useViewportSize.ts
+import { useCallback, useEffect as useEffect17, useState as useState16 } from "react";
+var eventListerOptions = {
+  passive: true
+};
+function useViewportSize() {
+  const [windowSize, setWindowSize] = useState16({
+    width: 0,
+    height: 0
+  });
+  const setSize = useCallback(() => {
+    setWindowSize({
+      width: window.innerWidth || 0,
+      height: window.innerHeight || 0
+    });
+  }, []);
+  useWindowEvent("resize", setSize, eventListerOptions);
+  useWindowEvent("orientationchange", setSize, eventListerOptions);
+  useEffect17(setSize, []);
+  return windowSize;
+}
+
 // elements/tabs/Tabs.tsx
+import * as Popover from "@radix-ui/react-popover";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
 // util/index.ts
@@ -186,71 +187,16 @@ var Chip = React9.forwardRef(
   }
 );
 
-// elements/floatBox/FloatBox.tsx
-import * as React10 from "react";
-var FloatBox = ({
-  className,
-  open,
-  side = "bottom",
-  sideOffset = 40,
-  align = "center",
-  withArrow = false,
-  ...props
-}) => {
-  let stylesMap = {
-    bottom: {
-      start: { top: sideOffset, insetInlineStart: 0 },
-      center: { top: sideOffset },
-      end: { top: sideOffset, insetInlineEnd: 0 }
-    },
-    top: {
-      start: { bottom: sideOffset, insetInlineStart: 0 },
-      center: { bottom: sideOffset },
-      end: { bottom: sideOffset, insetInlineEnd: 0 }
-    },
-    right: {
-      start: { left: sideOffset, top: -5 },
-      center: { left: sideOffset },
-      end: { left: sideOffset, bottom: 0 }
-    },
-    left: {
-      start: { right: sideOffset, top: 0 },
-      center: { right: sideOffset },
-      end: { right: sideOffset, bottom: 0 }
-    }
-  };
-  const arrowDirection = {
-    top: "hawa-arrow-default-bottom",
-    bottom: "hawa-arrow-default-top",
-    right: "hawa-arrow-default-left",
-    left: "hawa-arrow-default-right"
-  };
-  return /* @__PURE__ */ React10.createElement(
-    "div",
-    {
-      className: cn(
-        "data-[floatbox-state=closed]:hawa-invisible data-[floatbox-state=open]:hawa-visible hawa-absolute dark:dark-shadow hawa-z-50 hawa-rounded hawa-border  hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[floatbox-state=open]:hawa-animate-in data-[floatbox-state=closed]:hawa-animate-out data-[floatbox-state=closed]:hawa-fade-out-0 data-[floatbox-state=open]:hawa-fade-in-0 data-[floatbox-state=closed]:hawa-zoom-out-95 data-[floatbox-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-bg-popover",
-        className
-      ),
-      style: { ...stylesMap[side][align] },
-      "data-side": side,
-      "data-floatbox-state": open ? "open" : "closed"
-    },
-    withArrow && /* @__PURE__ */ React10.createElement("div", { className: cn(arrowDirection[side]) }),
-    /* @__PURE__ */ React10.createElement("span", null, props.children)
-  );
-};
-
 // elements/scrollArea/ScrollArea.tsx
-import * as React11 from "react";
+import * as React10 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);
+var ScrollArea = React10.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => {
+  const scrollAreaRef = React10.useRef(null);
+  const isDragging = React10.useRef(false);
+  const startPos = React10.useRef({ x: 0, y: 0 });
+  const scrollPos = React10.useRef({ top: 0, left: 0 });
+  const [showLeftFade, setShowLeftFade] = React10.useState(false);
+  const [showRightFade, setShowRightFade] = React10.useState(false);
   const checkOverflow = () => {
     if (scrollAreaRef.current) {
       const { scrollLeft, scrollWidth, clientWidth } = scrollAreaRef.current;
@@ -287,7 +233,7 @@ var ScrollArea = React11.forwardRef(({ className, children, orientation = "verti
     document.removeEventListener("mousemove", onMouseMove);
     document.removeEventListener("mouseup", onMouseUp);
   };
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     checkOverflow();
     if (scrollAreaRef.current) {
       scrollAreaRef.current.addEventListener("scroll", checkOverflow);
@@ -300,14 +246,14 @@ var ScrollArea = React11.forwardRef(({ className, children, orientation = "verti
       window.removeEventListener("resize", checkOverflow);
     };
   }, []);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React10.createElement(
     ScrollAreaPrimitive.Root,
     {
       ref,
       className: cn("hawa-relative hawa-overflow-hidden", className),
       ...props
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         className: cn(
@@ -316,7 +262,7 @@ var ScrollArea = React11.forwardRef(({ className, children, orientation = "verti
         )
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         className: cn(
@@ -325,7 +271,7 @@ var ScrollArea = React11.forwardRef(({ className, children, orientation = "verti
         )
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React10.createElement(
       ScrollAreaPrimitive.Viewport,
       {
         ref: scrollAreaRef,
@@ -334,12 +280,12 @@ var ScrollArea = React11.forwardRef(({ className, children, orientation = "verti
       },
       children
     ),
-    /* @__PURE__ */ React11.createElement(ScrollBar, { orientation }),
-    /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Corner, null)
+    /* @__PURE__ */ React10.createElement(ScrollBar, { orientation }),
+    /* @__PURE__ */ React10.createElement(ScrollAreaPrimitive.Corner, null)
   );
 });
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React11.createElement(
+var ScrollBar = React10.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React10.createElement(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -352,7 +298,7 @@ var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...pr
     ),
     ...props
   },
-  /* @__PURE__ */ React11.createElement(
+  /* @__PURE__ */ React10.createElement(
     ScrollAreaPrimitive.ScrollAreaThumb,
     {
       className: cn(
@@ -423,39 +369,27 @@ var tabsTriggerVariant = tv({
   ],
   defaultVariants: { variant: "default", orientation: "horizontal" }
 });
-var TabsContext = React12.createContext({ orientation: "horizontal", variant: "default" });
-var Tabs = React12.forwardRef(({ className, orientation, 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 } }, props.children)
-));
-var TabsList = React12.forwardRef(({ className, classNames, ...props }, ref) => {
-  const { orientation, variant } = React12.useContext(TabsContext);
-  const [size, setSize] = React12.useState(
-    typeof window !== "undefined" && window.innerWidth || 1200
-  );
-  React12.useEffect(() => {
-    if (typeof window !== "undefined") {
-      const resize = () => {
-        setSize(window.innerWidth);
-      };
-      resize();
-      window.addEventListener("resize", resize);
-      return () => {
-        window.removeEventListener("resize", resize);
-      };
-    }
-  }, []);
-  if (props.scrollable && size < 768 && orientation === "horizontal") {
-    return /* @__PURE__ */ React12.createElement(ScrollArea, { orientation: "horizontal", className: classNames == null ? void 0 : classNames.scrollArea }, /* @__PURE__ */ React12.createElement(
+var TabsContext = React11.createContext({ orientation: "horizontal", variant: "default", scrollable: false });
+var Tabs = React11.forwardRef(
+  ({ className, orientation, scrollable, variant = "default", ...props }, ref) => /* @__PURE__ */ React11.createElement(
+    TabsPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "hawa-flex hawa-gap-2",
+        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React11.createElement(TabsContext.Provider, { value: { orientation, variant, scrollable } }, props.children)
+  )
+);
+var TabsList = React11.forwardRef(({ className, classNames, ...props }, ref) => {
+  const { orientation, variant, scrollable } = React11.useContext(TabsContext);
+  const { width } = useViewportSize();
+  if (scrollable && width < 768 && orientation === "horizontal") {
+    return /* @__PURE__ */ React11.createElement(ScrollArea, { orientation: "horizontal", className: classNames == null ? void 0 : classNames.scrollArea }, /* @__PURE__ */ React11.createElement(
       TabsPrimitive.List,
       {
         ref,
@@ -468,7 +402,7 @@ var TabsList = React12.forwardRef(({ className, classNames, ...props }, ref) =>
       }
     ));
   } else {
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React11.createElement(
       TabsPrimitive.List,
       {
         ref,
@@ -483,37 +417,52 @@ var TabsList = React12.forwardRef(({ className, classNames, ...props }, ref) =>
     );
   }
 });
-var TabsTrigger = React12.forwardRef(({ className, chipProps, ...props }, ref) => {
-  const { orientation, variant } = React12.useContext(TabsContext);
-  const tabTriggerRef = React12.useRef(null);
-  const { width } = useMeasureDirty(tabTriggerRef);
-  return /* @__PURE__ */ React12.createElement(
-    TabsPrimitive.Trigger,
-    {
-      ref: tabTriggerRef,
-      className: cn(
-        tabsTriggerVariant({ variant, orientation }),
-        "hawa-relative",
-        className
-      ),
-      ...props
-    },
-    props.children,
-    chipProps && /* @__PURE__ */ React12.createElement(Chip, { ...chipProps }),
-    /* @__PURE__ */ React12.createElement(
-      FloatBox,
-      {
-        withArrow: true,
-        align: orientation === "vertical" ? "start" : "start",
-        side: orientation === "vertical" ? "right" : "bottom",
-        sideOffset: orientation === "vertical" ? width + 30 : 45,
-        open: props.showPopover
-      },
-      props.popoverContent
-    )
-  );
-});
-var TabsContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React12.createElement(
+var TabsTrigger = React11.forwardRef(
+  ({ className, chipProps, withPopover = false, onPopoverClick, ...props }, ref) => {
+    const { orientation, variant } = React11.useContext(TabsContext);
+    if (withPopover) {
+      return /* @__PURE__ */ React11.createElement(Popover.Root, { open: props.showPopover }, /* @__PURE__ */ React11.createElement(Popover.Anchor, { asChild: true }, /* @__PURE__ */ React11.createElement(
+        TabsPrimitive.Trigger,
+        {
+          className: cn(
+            tabsTriggerVariant({ variant, orientation }),
+            "hawa-relative",
+            className
+          ),
+          ...props
+        },
+        props.children,
+        chipProps && /* @__PURE__ */ React11.createElement(Chip, { ...chipProps })
+      )), /* @__PURE__ */ React11.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__ */ React11.createElement("div", { className: "hawa-p-2" }, " ", props.popoverContent)
+      ));
+    } else {
+      return /* @__PURE__ */ React11.createElement(
+        TabsPrimitive.Trigger,
+        {
+          className: cn(
+            tabsTriggerVariant({ variant, orientation }),
+            "hawa-relative",
+            className
+          ),
+          ...props
+        },
+        props.children,
+        chipProps && /* @__PURE__ */ React11.createElement(Chip, { ...chipProps })
+      );
+    }
+  }
+);
+var TabsContent = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React11.createElement(
   TabsPrimitive.Content,
   {
     ref,