@spark-ui/components 13.1.4 → 13.2.0

package/dist/tabs/index.mjs

@@ -1,139 +1,99 @@
-import {
-  Popover
-} from "../chunk-GPJMLIHC.mjs";
-import {
-  IconButton
-} from "../chunk-DCXWGQVZ.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
-import {
-  Button
-} from "../chunk-2YM6GKWW.mjs";
-import "../chunk-GAK4SC2F.mjs";
-import "../chunk-KEGAAGJW.mjs";
-import "../chunk-6QCEPQ3U.mjs";
-
-// src/tabs/Tabs.tsx
-import { Tabs as RadixTabs } from "radix-ui";
-
-// src/tabs/TabsContext.tsx
-import { createContext, useContext } from "react";
-var TabsContext = createContext({});
-var useTabsContext = () => {
-  const context = useContext(TabsContext);
-  if (!context) {
+import { jsx as n, jsxs as I } from "react/jsx-runtime";
+import { Tabs as T } from "radix-ui";
+import { createContext as E, useContext as A, useState as B, useRef as p, useEffect as g, forwardRef as O, useMemo as G } from "react";
+import { cva as x, cx as J } from "class-variance-authority";
+import { ArrowVerticalLeft as Q } from "@spark-ui/icons/ArrowVerticalLeft";
+import { ArrowVerticalRight as U } from "@spark-ui/icons/ArrowVerticalRight";
+import { B as M } from "../Button-C3C0aixy.mjs";
+import { I as N } from "../Icon-Ck-dhfLd.mjs";
+import { useMergeRefs as j } from "@spark-ui/hooks/use-merge-refs";
+import { MoreMenuHorizontal as X } from "@spark-ui/icons/MoreMenuHorizontal";
+import { I as Y } from "../IconButton-C62-axzv.mjs";
+import { Popover as w } from "../popover/index.mjs";
+import { makeVariants as Z } from "@spark-ui/internal-utils";
+const D = E({}), L = () => {
+  const t = A(D);
+  if (!t)
     throw Error("useTabsContext must be used within a TabsContext Provider");
-  }
-  return context;
-};
-
-// src/tabs/TabsRoot.styles.ts
-import { cva } from "class-variance-authority";
-var rootStyles = cva([
+  return t;
+}, _ = x([
   "flex",
   "data-[orientation=horizontal]:flex-col",
   "data-[orientation=vertical]:flex-row",
   "max-w-full"
-]);
-
-// src/tabs/Tabs.tsx
-import { jsx } from "react/jsx-runtime";
-var Tabs = ({
-  intent = "basic",
-  size = "md",
+]), F = ({
+  intent: t = "basic",
+  size: r = "md",
   /**
    * Default Radix Primitive values
    * see https://www.radix-ui.com/docs/primitives/components/tabs#root
    */
-  asChild = false,
-  forceMount = false,
-  orientation = "horizontal",
-  children,
-  className,
-  ref,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx(
-    TabsContext.Provider,
-    {
-      value: {
-        intent,
-        size,
-        orientation,
-        forceMount
-      },
-      children: /* @__PURE__ */ jsx(
-        RadixTabs.Root,
-        {
-          ref,
-          asChild,
-          orientation,
-          className: rootStyles({ className }),
-          "data-spark-component": "tabs",
-          activationMode: "automatic",
-          ...rest,
-          children
-        }
-      )
-    }
-  );
-};
-Tabs.displayName = "Tabs";
-
-// src/tabs/TabsContent.tsx
-import { Tabs as RadixTabs2 } from "radix-ui";
-
-// src/tabs/TabsContent.styles.ts
-import { cva as cva2 } from "class-variance-authority";
-var contentStyles = cva2(["w-full p-lg", "focus-visible:u-outline-inset"], {
+  asChild: s = !1,
+  forceMount: a = !1,
+  orientation: o = "horizontal",
+  children: i,
+  className: l,
+  ref: c,
+  ...e
+}) => /* @__PURE__ */ n(
+  D.Provider,
+  {
+    value: {
+      intent: t,
+      size: r,
+      orientation: o,
+      forceMount: a
+    },
+    children: /* @__PURE__ */ n(
+      T.Root,
+      {
+        ref: c,
+        asChild: s,
+        orientation: o,
+        className: _({ className: l }),
+        "data-spark-component": "tabs",
+        activationMode: "automatic",
+        ...e,
+        children: i
+      }
+    )
+  }
+);
+F.displayName = "Tabs";
+const ee = x(["w-full p-lg", "focus-visible:u-outline-inset"], {
   variants: {
     forceMount: {
       true: "data-[state=inactive]:hidden",
       false: ""
     }
   }
-});
-
-// src/tabs/TabsContent.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var TabsContent = ({
+}), k = ({
   /**
    * Default Radix Primitive values
    * see https://www.radix-ui.com/docs/primitives/components/tabs#content
    */
-  children,
-  asChild = false,
-  className,
-  ref,
-  ...rest
+  children: t,
+  asChild: r = !1,
+  className: s,
+  ref: a,
+  ...o
 }) => {
-  const { forceMount } = useTabsContext();
-  return /* @__PURE__ */ jsx2(
-    RadixTabs2.Content,
+  const { forceMount: i } = L();
+  return /* @__PURE__ */ n(
+    T.Content,
     {
       "data-spark-component": "tabs-content",
-      ref,
-      forceMount: forceMount || rest.forceMount,
-      className: contentStyles({ className, forceMount }),
-      asChild,
-      ...rest,
-      children
+      ref: a,
+      forceMount: i || o.forceMount,
+      className: ee({ className: s, forceMount: i }),
+      asChild: r,
+      ...o,
+      children: t
     }
   );
 };
-TabsContent.displayName = "Tabs.Content";
-
-// src/tabs/TabsList.tsx
-import { ArrowVerticalLeft } from "@spark-ui/icons/ArrowVerticalLeft";
-import { ArrowVerticalRight } from "@spark-ui/icons/ArrowVerticalRight";
-import { Tabs as RadixTabs3 } from "radix-ui";
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
-
-// src/tabs/TabsList.styles.ts
-import { cva as cva3 } from "class-variance-authority";
-var wrapperStyles = cva3(["relative flex"]);
-var listStyles = cva3([
+k.displayName = "Tabs.Content";
+const te = x(["relative flex"]), re = x([
   "flex w-full",
   "data-[orientation=horizontal]:flex-row",
   "data-[orientation=vertical]:flex-col",
@@ -141,239 +101,173 @@ var listStyles = cva3([
   "after:flex after:shrink after:grow after:border-outline",
   "data-[orientation=horizontal]:after:border-b-sm",
   "data-[orientation=vertical]:after:border-r-sm"
-]);
-var navigationArrowStyles = cva3([
+]), V = x([
   "h-auto! flex-none",
   "border-b-sm border-outline",
   "outline-hidden",
   "focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!"
-]);
-
-// src/tabs/useResizeObserver.ts
-import { useEffect, useRef, useState } from "react";
-var useResizeObserver = (target, onResize) => {
-  const [size, setSize] = useState({ width: void 0, height: void 0 });
-  const resizeObserverRef = useRef(null);
-  const resizeCallbackRef = useRef(onResize);
-  useEffect(() => {
-    resizeCallbackRef.current = onResize;
-  }, [onResize]);
-  useEffect(() => {
-    const targetElm = target && "current" in target ? target.current : target;
-    if (!targetElm || resizeObserverRef.current) {
-      return;
-    }
-    resizeObserverRef.current = new ResizeObserver(([entry]) => {
-      const { inlineSize: width, blockSize: height } = entry?.borderBoxSize?.[0] ?? {};
-      resizeCallbackRef.current?.(entry);
-      setSize({ width, height });
-    });
-    resizeObserverRef.current.observe(targetElm);
-    return () => {
-      resizeObserverRef.current && resizeObserverRef.current.unobserve(targetElm);
-    };
-  }, [target, resizeObserverRef, resizeCallbackRef]);
-  return size;
-};
-
-// src/tabs/TabsList.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var TabsList = ({
+]), oe = (t, r) => {
+  const [s, a] = B({ width: void 0, height: void 0 }), o = p(null), i = p(r);
+  return g(() => {
+    i.current = r;
+  }, [r]), g(() => {
+    const l = t && "current" in t ? t.current : t;
+    if (!(!l || o.current))
+      return o.current = new ResizeObserver(([c]) => {
+        const { inlineSize: e, blockSize: m } = c?.borderBoxSize?.[0] ?? {};
+        i.current?.(c), a({ width: e, height: m });
+      }), o.current.observe(l), () => {
+        o.current && o.current.unobserve(l);
+      };
+  }, [t, o, i]), s;
+}, R = ({
   /**
    * Default Radix Primitive values
    * see https://www.radix-ui.com/docs/primitives/components/tabs#list
    */
-  asChild = false,
-  loop = false,
-  children,
-  className,
-  ref,
-  ...rest
+  asChild: t = !1,
+  loop: r = !1,
+  children: s,
+  className: a,
+  ref: o,
+  ...i
 }) => {
-  const wrapperRef = useRef2(null);
-  const innerRef = useRef2(null);
-  const listRef = ref || innerRef;
-  const { orientation } = useTabsContext();
-  const { width } = useResizeObserver(wrapperRef);
-  const [arrows, setArrows] = useState2({
+  const l = p(null), c = p(null), e = o || c, { orientation: m } = L(), { width: z } = oe(l), [d, h] = B({
     prev: "hidden",
     next: "hidden"
   });
-  useEffect2(() => {
-    if (typeof listRef === "function" || !listRef.current) {
-      return;
-    }
-    if (orientation !== "horizontal") {
-      setArrows({ prev: "hidden", next: "hidden" });
-    } else {
-      setArrows({
-        prev: listRef.current.scrollWidth > listRef.current.clientWidth ? "visible" : "hidden",
-        next: listRef.current.scrollWidth > listRef.current.clientWidth ? "visible" : "hidden"
-      });
-    }
-  }, [orientation, listRef, width]);
-  useEffect2(() => {
-    if (typeof listRef === "function" || !listRef.current || arrows.prev === "hidden" || loop) {
+  g(() => {
+    typeof e == "function" || !e.current || h(m !== "horizontal" ? { prev: "hidden", next: "hidden" } : {
+      prev: e.current.scrollWidth > e.current.clientWidth ? "visible" : "hidden",
+      next: e.current.scrollWidth > e.current.clientWidth ? "visible" : "hidden"
+    });
+  }, [m, e, z]), g(() => {
+    if (typeof e == "function" || !e.current || d.prev === "hidden" || r)
       return;
-    }
-    const toggleArrowsVisibility = (target) => {
-      setArrows({
-        prev: target.scrollLeft > 0 ? "visible" : "disabled",
-        next: target.scrollLeft + target.clientWidth < target.scrollWidth ? "visible" : "disabled"
+    const f = (u) => {
+      h({
+        prev: u.scrollLeft > 0 ? "visible" : "disabled",
+        next: u.scrollLeft + u.clientWidth < u.scrollWidth ? "visible" : "disabled"
       });
-    };
-    const currentList = listRef.current;
-    toggleArrowsVisibility(currentList);
-    currentList.addEventListener(
+    }, v = e.current;
+    return f(v), v.addEventListener(
       "scroll",
-      ({ target }) => toggleArrowsVisibility(target)
-    );
-    return () => currentList.removeEventListener(
+      ({ target: u }) => f(u)
+    ), () => v.removeEventListener(
       "scroll",
-      ({ target }) => toggleArrowsVisibility(target)
+      ({ target: u }) => f(u)
     );
-  }, [listRef, arrows.prev, loop]);
-  const handlePrevClick = () => {
-    if (typeof listRef === "function" || !listRef.current) {
+  }, [e, d.prev, r]);
+  const y = () => {
+    if (typeof e == "function" || !e.current)
       return;
-    }
-    const shouldLoopForward = loop && listRef.current.scrollLeft <= 0;
-    listRef.current.scrollTo({
-      left: shouldLoopForward ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth : listRef.current.scrollLeft - listRef.current.clientWidth,
+    const f = r && e.current.scrollLeft <= 0;
+    e.current.scrollTo({
+      left: f ? e.current.scrollLeft + e.current.scrollWidth - e.current.clientWidth : e.current.scrollLeft - e.current.clientWidth,
       behavior: "smooth"
     });
-  };
-  const handleNextClick = () => {
-    if (typeof listRef === "function" || !listRef.current) {
+  }, C = () => {
+    if (typeof e == "function" || !e.current)
       return;
-    }
-    const shouldLoopBackward = loop && listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth;
-    listRef.current.scrollTo({
-      left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,
+    const f = r && e.current.scrollLeft + e.current.clientWidth >= e.current.scrollWidth;
+    e.current.scrollTo({
+      left: f ? 0 : e.current.scrollLeft + e.current.clientWidth,
       behavior: "smooth"
     });
   };
-  return /* @__PURE__ */ jsxs("div", { className: wrapperStyles({ className }), ref: wrapperRef, children: [
-    arrows.prev !== "hidden" && /* @__PURE__ */ jsx3(
-      Button,
+  return /* @__PURE__ */ I("div", { className: te({ className: a }), ref: l, children: [
+    d.prev !== "hidden" && /* @__PURE__ */ n(
+      M,
       {
         shape: "square",
         intent: "surface",
         size: "sm",
-        className: navigationArrowStyles(),
-        onClick: handlePrevClick,
-        disabled: arrows.prev === "disabled",
+        className: V(),
+        onClick: y,
+        disabled: d.prev === "disabled",
         "aria-label": "Scroll left",
-        children: /* @__PURE__ */ jsx3(Icon, { children: /* @__PURE__ */ jsx3(ArrowVerticalLeft, {}) })
+        children: /* @__PURE__ */ n(N, { children: /* @__PURE__ */ n(Q, {}) })
       }
     ),
-    /* @__PURE__ */ jsx3(
-      RadixTabs3.List,
+    /* @__PURE__ */ n(
+      T.List,
       {
         "data-spark-component": "tabs-list",
-        ref: listRef,
-        className: listStyles(),
-        asChild,
-        loop,
-        ...rest,
-        children
+        ref: e,
+        className: re(),
+        asChild: t,
+        loop: r,
+        ...i,
+        children: s
       }
     ),
-    arrows.next !== "hidden" && /* @__PURE__ */ jsx3(
-      Button,
+    d.next !== "hidden" && /* @__PURE__ */ n(
+      M,
       {
         shape: "square",
         intent: "surface",
         size: "sm",
-        className: navigationArrowStyles(),
-        onClick: handleNextClick,
-        disabled: arrows.next === "disabled",
+        className: V(),
+        onClick: C,
+        disabled: d.next === "disabled",
         "aria-label": "Scroll right",
-        children: /* @__PURE__ */ jsx3(Icon, { children: /* @__PURE__ */ jsx3(ArrowVerticalRight, {}) })
+        children: /* @__PURE__ */ n(N, { children: /* @__PURE__ */ n(U, {}) })
       }
     )
   ] });
 };
-TabsList.displayName = "Tabs.List";
-
-// src/tabs/TabsTrigger.tsx
-import { useMergeRefs as useMergeRefs2 } from "@spark-ui/hooks/use-merge-refs";
-import { Tabs as RadixTabs4 } from "radix-ui";
-import { useRef as useRef3 } from "react";
-
-// src/tabs/TabsPopoverAbstraction.tsx
-import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
-import { MoreMenuHorizontal } from "@spark-ui/icons/MoreMenuHorizontal";
-import { cx } from "class-variance-authority";
-import {
-  createContext as createContext2,
-  forwardRef,
-  useContext as useContext2,
-  useMemo
-} from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var TabsPopoverContext = createContext2(void 0);
-var useTabsPopoverContext = () => {
-  const context = useContext2(TabsPopoverContext);
-  if (!context) {
+R.displayName = "Tabs.List";
+const P = E(void 0), K = () => {
+  const t = A(P);
+  if (!t)
     throw new Error("TabsPopover components must be used within TabsPopover");
-  }
-  return context;
-};
-var TabsPopoverTrigger = forwardRef(
-  ({ "aria-label": ariaLabel, children: iconChildren, ...triggerProps }, forwardedRef) => {
-    const { popoverTriggerRef } = useTabsPopoverContext();
-    const mergedRef = useMergeRefs(forwardedRef, popoverTriggerRef);
-    return /* @__PURE__ */ jsx4(Popover.Trigger, { asChild: true, ...triggerProps, children: /* @__PURE__ */ jsx4(
-      IconButton,
+  return t;
+}, $ = O(
+  ({ "aria-label": t, children: r, ...s }, a) => {
+    const { popoverTriggerRef: o } = K(), i = j(a, o);
+    return /* @__PURE__ */ n(w.Trigger, { asChild: !0, ...s, children: /* @__PURE__ */ n(
+      Y,
       {
-        ref: mergedRef,
+        ref: i,
         size: "sm",
         intent: "surfaceInverse",
         design: "ghost",
-        "aria-label": ariaLabel,
+        "aria-label": t,
         tabIndex: -1,
-        children: /* @__PURE__ */ jsx4(Icon, { children: iconChildren || /* @__PURE__ */ jsx4(MoreMenuHorizontal, {}) })
+        children: /* @__PURE__ */ n(N, { children: r || /* @__PURE__ */ n(X, {}) })
       }
     ) });
   }
 );
-TabsPopoverTrigger.displayName = "Popover.Trigger";
-var TabsPopoverContent = forwardRef(
-  ({ side, align = "start", className, ...contentProps }, ref) => {
-    const { popoverSide } = useTabsPopoverContext();
-    const mergedClassName = cx("gap-sm flex flex-col", className);
-    return /* @__PURE__ */ jsx4(
-      Popover.Content,
+$.displayName = "Popover.Trigger";
+const q = O(
+  ({ side: t, align: r = "start", className: s, ...a }, o) => {
+    const { popoverSide: i } = K(), l = J("gap-sm flex flex-col", s);
+    return /* @__PURE__ */ n(
+      w.Content,
       {
-        ref,
-        ...contentProps,
-        side: side ?? popoverSide,
-        align,
-        className: mergedClassName
+        ref: o,
+        ...a,
+        side: t ?? i,
+        align: r,
+        className: l
       }
     );
   }
 );
-TabsPopoverContent.displayName = "Popover.Content";
-var Popover2 = ({ popoverSide, popoverTriggerRef, children }) => {
-  const contextValue = useMemo(
-    () => ({ popoverSide, popoverTriggerRef }),
-    [popoverSide, popoverTriggerRef]
-  );
-  const PopoverWrapper = ((props) => /* @__PURE__ */ jsx4(TabsPopoverContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx4(Popover, { ...props, children: props.children }) }));
-  const PopoverComponent = Object.assign(PopoverWrapper, Popover, {
-    Content: TabsPopoverContent,
-    Trigger: TabsPopoverTrigger
+q.displayName = "Popover.Content";
+const H = ({ popoverSide: t, popoverTriggerRef: r, children: s }) => {
+  const a = G(
+    () => ({ popoverSide: t, popoverTriggerRef: r }),
+    [t, r]
+  ), i = Object.assign(((l) => /* @__PURE__ */ n(P.Provider, { value: a, children: /* @__PURE__ */ n(w, { ...l, children: l.children }) })), w, {
+    Content: q,
+    Trigger: $
   });
-  return /* @__PURE__ */ jsx4(TabsPopoverContext.Provider, { value: contextValue, children: children(PopoverComponent) });
+  return /* @__PURE__ */ n(P.Provider, { value: a, children: s(i) });
 };
-Popover2.displayName = "Popover";
-
-// src/tabs/TabsTrigger.styles.ts
-import { makeVariants } from "@spark-ui/internal-utils";
-import { cva as cva4 } from "class-variance-authority";
-var triggerVariants = cva4(
+H.displayName = "Popover";
+const ne = x(
   [
     "px-md",
     "relative flex flex-none items-center",
@@ -395,7 +289,7 @@ var triggerVariants = cva4(
        * Change the color scheme of the tabs
        * @default basic
        */
-      intent: makeVariants({
+      intent: Z({
         main: ["data-[state=active]:text-main data-[state=active]:after:bg-main"],
         support: ["data-[state=active]:text-support data-[state=active]:after:bg-support"],
         basic: ["data-[state=active]:text-basic data-[state=active]:after:bg-basic"]
@@ -419,7 +313,7 @@ var triggerVariants = cva4(
     },
     compoundVariants: [
       {
-        hasMenu: true,
+        hasMenu: !0,
         orientation: "vertical",
         class: "w-full"
       }
@@ -427,89 +321,69 @@ var triggerVariants = cva4(
     defaultVariants: {
       intent: "basic",
       size: "md",
-      hasMenu: false,
+      hasMenu: !1,
       orientation: "horizontal"
     }
   }
-);
-
-// src/tabs/TabsTrigger.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var TabsTrigger = ({
+), W = ({
   /**
    * Default Radix Primitive values
    * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger
    */
-  asChild = false,
-  value,
-  disabled = false,
-  children,
-  className,
-  ref,
-  onKeyDown,
-  renderMenu,
-  ...rest
+  asChild: t = !1,
+  value: r,
+  disabled: s = !1,
+  children: a,
+  className: o,
+  ref: i,
+  onKeyDown: l,
+  renderMenu: c,
+  ...e
 }) => {
-  const { intent, size, orientation } = useTabsContext();
-  const popoverTriggerRef = useRef3(null);
-  const tabsTriggerRef = useRef3(null);
-  const mergedRef = useMergeRefs2(ref, tabsTriggerRef);
-  const handleKeyDown = (e) => {
-    if (e.key === "F10" && e.shiftKey && renderMenu && popoverTriggerRef.current) {
-      e.preventDefault();
-      popoverTriggerRef.current.click();
-    }
-    onKeyDown?.(e);
-  };
-  const hasMenu = !!renderMenu;
-  const popoverSide = orientation === "vertical" ? "right" : "bottom";
-  const trigger = /* @__PURE__ */ jsx5(
-    RadixTabs4.Trigger,
+  const { intent: m, size: z, orientation: d } = L(), h = p(null), y = p(null), C = j(i, y), f = (b) => {
+    b.key === "F10" && b.shiftKey && c && h.current && (b.preventDefault(), h.current.click()), l?.(b);
+  }, v = !!c, u = d === "vertical" ? "right" : "bottom", S = /* @__PURE__ */ n(
+    T.Trigger,
     {
       "data-spark-component": "tabs-trigger",
-      ref: mergedRef,
-      className: triggerVariants({
-        intent,
-        size,
-        hasMenu,
-        orientation: orientation ?? "horizontal",
-        className
+      ref: C,
+      className: ne({
+        intent: m,
+        size: z,
+        hasMenu: v,
+        orientation: d ?? "horizontal",
+        className: o
       }),
-      asChild,
-      disabled,
-      value,
-      onFocus: ({ target }) => target.scrollIntoView({
+      asChild: t,
+      disabled: s,
+      value: r,
+      onFocus: ({ target: b }) => b.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
         inline: "nearest"
       }),
-      onKeyDown: handleKeyDown,
-      "aria-haspopup": hasMenu ? "true" : void 0,
-      ...rest,
-      children
+      onKeyDown: f,
+      "aria-haspopup": v ? "true" : void 0,
+      ...e,
+      children: a
     }
   );
-  if (!hasMenu) {
-    return trigger;
-  }
-  return /* @__PURE__ */ jsxs2("div", { className: orientation === "vertical" ? "relative w-full" : "relative", children: [
-    trigger,
-    /* @__PURE__ */ jsx5("div", { className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx5(Popover2, { popoverSide, popoverTriggerRef, children: (PopoverAbstraction) => renderMenu?.({ Popover: PopoverAbstraction }) }) })
-  ] });
+  return v ? /* @__PURE__ */ I("div", { className: d === "vertical" ? "relative w-full" : "relative", children: [
+    S,
+    /* @__PURE__ */ n("div", { className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ n(H, { popoverSide: u, popoverTriggerRef: h, children: (b) => c?.({ Popover: b }) }) })
+  ] }) : S;
 };
-TabsTrigger.displayName = "Tabs.Trigger";
-
-// src/tabs/index.ts
-var Tabs2 = Object.assign(Tabs, {
-  List: TabsList,
-  Trigger: TabsTrigger,
-  Content: TabsContent
+W.displayName = "Tabs.Trigger";
+const ie = Object.assign(F, {
+  List: R,
+  Trigger: W,
+  Content: k
 });
-Tabs2.displayName = "Tabs";
-TabsList.displayName = "Tabs.List";
-TabsTrigger.displayName = "Tabs.Trigger";
-TabsContent.displayName = "Tabs.Content";
+ie.displayName = "Tabs";
+R.displayName = "Tabs.List";
+W.displayName = "Tabs.Trigger";
+k.displayName = "Tabs.Content";
 export {
-  Tabs2 as Tabs
+  ie as Tabs
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map