@sikka/hawa 0.39.0-next → 0.40.1-next

package/dist/tabs/index.js

@@ -39,7 +39,7 @@ __export(tabs_exports, {
 module.exports = __toCommonJS(tabs_exports);
 
 // elements/tabs/Tabs.tsx
-var React12 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 
 // hooks/useIsomorphicEffect.ts
 var import_react = require("react");
@@ -90,37 +90,6 @@ var import_react14 = require("react");
 
 // hooks/useMeasureDirty.ts
 var import_react15 = require("react");
-var useMeasureDirty = (ref) => {
-  const frame = (0, import_react15.useRef)(0);
-  const [rect, set] = (0, import_react15.useState)({
-    width: 0,
-    height: 0,
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0
-  });
-  const [observer] = (0, import_react15.useState)(
-    () => new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) {
-        cancelAnimationFrame(frame.current);
-        frame.current = requestAnimationFrame(() => {
-          if (ref.current) {
-            set(entry.contentRect);
-          }
-        });
-      }
-    })
-  );
-  (0, import_react15.useEffect)(() => {
-    observer.disconnect();
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-  }, [ref]);
-  return rect;
-};
 
 // hooks/useClickOutside.ts
 var import_react16 = require("react");
@@ -128,7 +97,39 @@ var import_react16 = require("react");
 // hooks/useShortcuts.ts
 var import_react17 = require("react");
 
+// hooks/useWindowEvent.ts
+var import_react18 = require("react");
+function useWindowEvent(type, listener, options) {
+  (0, import_react18.useEffect)(() => {
+    window.addEventListener(type, listener, options);
+    return () => window.removeEventListener(type, listener, options);
+  }, [type, listener]);
+}
+
+// hooks/useViewportSize.ts
+var import_react19 = require("react");
+var eventListerOptions = {
+  passive: true
+};
+function useViewportSize() {
+  const [windowSize, setWindowSize] = (0, import_react19.useState)({
+    width: 0,
+    height: 0
+  });
+  const setSize = (0, import_react19.useCallback)(() => {
+    setWindowSize({
+      width: window.innerWidth || 0,
+      height: window.innerHeight || 0
+    });
+  }, []);
+  useWindowEvent("resize", setSize, eventListerOptions);
+  useWindowEvent("orientationchange", setSize, eventListerOptions);
+  (0, import_react19.useEffect)(setSize, []);
+  return windowSize;
+}
+
 // elements/tabs/Tabs.tsx
+var Popover = __toESM(require("@radix-ui/react-popover"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
 
 // util/index.ts
@@ -142,8 +143,8 @@ function cn(...inputs) {
 var import_tailwind_variants = require("tailwind-variants");
 
 // elements/chip/Chip.tsx
-var import_react18 = __toESM(require("react"));
-var Chip = import_react18.default.forwardRef(
+var import_react20 = __toESM(require("react"));
+var Chip = import_react20.default.forwardRef(
   ({
     label,
     size = "normal",
@@ -187,7 +188,7 @@ var Chip = import_react18.default.forwardRef(
       oceanic: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
     };
     if (label) {
-      return /* @__PURE__ */ import_react18.default.createElement(
+      return /* @__PURE__ */ import_react20.default.createElement(
         "span",
         {
           ...rest,
@@ -199,7 +200,7 @@ var Chip = import_react18.default.forwardRef(
             color ? colorStyles[color] : "hawa-border hawa-bg-none"
           )
         },
-        dot && /* @__PURE__ */ import_react18.default.createElement(
+        dot && /* @__PURE__ */ import_react20.default.createElement(
           "span",
           {
             className: cn(dotStyles[size], dotStatusStyles[dotStatus])
@@ -209,7 +210,7 @@ var Chip = import_react18.default.forwardRef(
         label
       );
     } else {
-      return /* @__PURE__ */ import_react18.default.createElement(
+      return /* @__PURE__ */ import_react20.default.createElement(
         "span",
         {
           ...rest,
@@ -224,71 +225,16 @@ var Chip = import_react18.default.forwardRef(
   }
 );
 
-// elements/floatBox/FloatBox.tsx
-var React10 = __toESM(require("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
-var React11 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var ScrollAreaPrimitive = __toESM(require("@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;
@@ -325,7 +271,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);
@@ -338,14 +284,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(
@@ -354,7 +300,7 @@ var ScrollArea = React11.forwardRef(({ className, children, orientation = "verti
         )
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         className: cn(
@@ -363,7 +309,7 @@ var ScrollArea = React11.forwardRef(({ className, children, orientation = "verti
         )
       }
     ),
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React10.createElement(
       ScrollAreaPrimitive.Viewport,
       {
         ref: scrollAreaRef,
@@ -372,12 +318,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,
@@ -390,7 +336,7 @@ var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...pr
     ),
     ...props
   },
-  /* @__PURE__ */ React11.createElement(
+  /* @__PURE__ */ React10.createElement(
     ScrollAreaPrimitive.ScrollAreaThumb,
     {
       className: cn(
@@ -461,39 +407,27 @@ var tabsTriggerVariant = (0, import_tailwind_variants.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,
@@ -506,7 +440,7 @@ var TabsList = React12.forwardRef(({ className, classNames, ...props }, ref) =>
       }
     ));
   } else {
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React11.createElement(
       TabsPrimitive.List,
       {
         ref,
@@ -521,37 +455,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,