@servicetitan/anvil2 3.0.3 → 3.0.5

package/dist/Tab-CIY6BO2e.js

@@ -0,0 +1,793 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useId, useRef, useContext, useInsertionEffect, useMemo, Children, isValidElement, useState, createContext, forwardRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import { D as DurationDefault, e as DurationSlow } from './primitive-DXlHdTFb.js';
+import { c as cx } from './index-De1g9FRV.js';
+import { u as useReducedMotion } from './use-reduced-motion-CqjZZ5QB.js';
+import { useTrackingId } from './useTrackingId.js';
+import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
+import { M as MotionConfigContext, a as isHTMLElement, u as useConstant, P as PresenceContext, b as usePresence, c as useIsomorphicLayoutEffect, L as LayoutGroupContext, m as motion } from './proxy-DEehATlA.js';
+import { I as Icon } from './Icon-feeG7gXA.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
+import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
+
+import './Tab.css';/**
+ * Measurement functionality has to be within a separate component
+ * to leverage snapshot lifecycle.
+ */
+class PopChildMeasure extends React.Component {
+    getSnapshotBeforeUpdate(prevProps) {
+        const element = this.props.childRef.current;
+        if (element && prevProps.isPresent && !this.props.isPresent) {
+            const parent = element.offsetParent;
+            const parentWidth = isHTMLElement(parent)
+                ? parent.offsetWidth || 0
+                : 0;
+            const size = this.props.sizeRef.current;
+            size.height = element.offsetHeight || 0;
+            size.width = element.offsetWidth || 0;
+            size.top = element.offsetTop;
+            size.left = element.offsetLeft;
+            size.right = parentWidth - size.width - size.left;
+        }
+        return null;
+    }
+    /**
+     * Required with getSnapshotBeforeUpdate to stop React complaining.
+     */
+    componentDidUpdate() { }
+    render() {
+        return this.props.children;
+    }
+}
+function PopChild({ children, isPresent, anchorX, root }) {
+    const id = useId();
+    const ref = useRef(null);
+    const size = useRef({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        right: 0,
+    });
+    const { nonce } = useContext(MotionConfigContext);
+    /**
+     * We create and inject a style block so we can apply this explicit
+     * sizing in a non-destructive manner by just deleting the style block.
+     *
+     * We can't apply size via render as the measurement happens
+     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
+     * styles directly on the DOM node, we might be overwriting
+     * styles set via the style prop.
+     */
+    useInsertionEffect(() => {
+        const { width, height, top, left, right } = size.current;
+        if (isPresent || !ref.current || !width || !height)
+            return;
+        const x = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
+        ref.current.dataset.motionPopId = id;
+        const style = document.createElement("style");
+        if (nonce)
+            style.nonce = nonce;
+        const parent = root ?? document.head;
+        parent.appendChild(style);
+        if (style.sheet) {
+            style.sheet.insertRule(`
+          [data-motion-pop-id="${id}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            ${x}px !important;
+            top: ${top}px !important;
+          }
+        `);
+        }
+        return () => {
+            if (parent.contains(style)) {
+                parent.removeChild(style);
+            }
+        };
+    }, [isPresent]);
+    return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));
+}
+
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, root }) => {
+    const presenceChildren = useConstant(newChildrenMap);
+    const id = useId();
+    let isReusedContext = true;
+    let context = useMemo(() => {
+        isReusedContext = false;
+        return {
+            id,
+            initial,
+            isPresent,
+            custom,
+            onExitComplete: (childId) => {
+                presenceChildren.set(childId, true);
+                for (const isComplete of presenceChildren.values()) {
+                    if (!isComplete)
+                        return; // can stop searching when any is incomplete
+                }
+                onExitComplete && onExitComplete();
+            },
+            register: (childId) => {
+                presenceChildren.set(childId, false);
+                return () => presenceChildren.delete(childId);
+            },
+        };
+    }, [isPresent, presenceChildren, onExitComplete]);
+    /**
+     * If the presence of a child affects the layout of the components around it,
+     * we want to make a new context value to ensure they get re-rendered
+     * so they can detect that layout change.
+     */
+    if (presenceAffectsLayout && isReusedContext) {
+        context = { ...context };
+    }
+    useMemo(() => {
+        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
+    }, [isPresent]);
+    /**
+     * If there's no `motion` components to fire exit animations, we want to remove this
+     * component immediately.
+     */
+    React.useEffect(() => {
+        !isPresent &&
+            !presenceChildren.size &&
+            onExitComplete &&
+            onExitComplete();
+    }, [isPresent]);
+    if (mode === "popLayout") {
+        children = (jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, root: root, children: children }));
+    }
+    return (jsx(PresenceContext.Provider, { value: context, children: children }));
+};
+function newChildrenMap() {
+    return new Map();
+}
+
+const getChildKey = (child) => child.key || "";
+function onlyElements(children) {
+    const filtered = [];
+    // We use forEach here instead of map as map mutates the component key by preprending `.$`
+    Children.forEach(children, (child) => {
+        if (isValidElement(child))
+            filtered.push(child);
+    });
+    return filtered;
+}
+
+/**
+ * `AnimatePresence` enables the animation of components that have been removed from the tree.
+ *
+ * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
+ *
+ * Any `motion` components that have an `exit` property defined will animate out when removed from
+ * the tree.
+ *
+ * ```jsx
+ * import { motion, AnimatePresence } from 'framer-motion'
+ *
+ * export const Items = ({ items }) => (
+ *   <AnimatePresence>
+ *     {items.map(item => (
+ *       <motion.div
+ *         key={item.id}
+ *         initial={{ opacity: 0 }}
+ *         animate={{ opacity: 1 }}
+ *         exit={{ opacity: 0 }}
+ *       />
+ *     ))}
+ *   </AnimatePresence>
+ * )
+ * ```
+ *
+ * You can sequence exit animations throughout a tree using variants.
+ *
+ * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
+ * once all `motion` components have finished animating out. Likewise, any components using
+ * `usePresence` all need to call `safeToRemove`.
+ *
+ * @public
+ */
+const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", root }) => {
+    const [isParentPresent, safeToRemove] = usePresence(propagate);
+    /**
+     * Filter any children that aren't ReactElements. We can only track components
+     * between renders with a props.key.
+     */
+    const presentChildren = useMemo(() => onlyElements(children), [children]);
+    /**
+     * Track the keys of the currently rendered children. This is used to
+     * determine which children are exiting.
+     */
+    const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
+    /**
+     * If `initial={false}` we only want to pass this to components in the first render.
+     */
+    const isInitialRender = useRef(true);
+    /**
+     * A ref containing the currently present children. When all exit animations
+     * are complete, we use this to re-render the component with the latest children
+     * *committed* rather than the latest children *rendered*.
+     */
+    const pendingPresentChildren = useRef(presentChildren);
+    /**
+     * Track which exiting children have finished animating out.
+     */
+    const exitComplete = useConstant(() => new Map());
+    /**
+     * Save children to render as React state. To ensure this component is concurrent-safe,
+     * we check for exiting children via an effect.
+     */
+    const [diffedChildren, setDiffedChildren] = useState(presentChildren);
+    const [renderedChildren, setRenderedChildren] = useState(presentChildren);
+    useIsomorphicLayoutEffect(() => {
+        isInitialRender.current = false;
+        pendingPresentChildren.current = presentChildren;
+        /**
+         * Update complete status of exiting children.
+         */
+        for (let i = 0; i < renderedChildren.length; i++) {
+            const key = getChildKey(renderedChildren[i]);
+            if (!presentKeys.includes(key)) {
+                if (exitComplete.get(key) !== true) {
+                    exitComplete.set(key, false);
+                }
+            }
+            else {
+                exitComplete.delete(key);
+            }
+        }
+    }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
+    const exitingChildren = [];
+    if (presentChildren !== diffedChildren) {
+        let nextChildren = [...presentChildren];
+        /**
+         * Loop through all the currently rendered components and decide which
+         * are exiting.
+         */
+        for (let i = 0; i < renderedChildren.length; i++) {
+            const child = renderedChildren[i];
+            const key = getChildKey(child);
+            if (!presentKeys.includes(key)) {
+                nextChildren.splice(i, 0, child);
+                exitingChildren.push(child);
+            }
+        }
+        /**
+         * If we're in "wait" mode, and we have exiting children, we want to
+         * only render these until they've all exited.
+         */
+        if (mode === "wait" && exitingChildren.length) {
+            nextChildren = exitingChildren;
+        }
+        setRenderedChildren(onlyElements(nextChildren));
+        setDiffedChildren(presentChildren);
+        /**
+         * Early return to ensure once we've set state with the latest diffed
+         * children, we can immediately re-render.
+         */
+        return null;
+    }
+    if (process.env.NODE_ENV !== "production" &&
+        mode === "wait" &&
+        renderedChildren.length > 1) {
+        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
+    }
+    /**
+     * If we've been provided a forceRender function by the LayoutGroupContext,
+     * we can use it to force a re-render amongst all surrounding components once
+     * all components have finished animating out.
+     */
+    const { forceRender } = useContext(LayoutGroupContext);
+    return (jsx(Fragment, { children: renderedChildren.map((child) => {
+            const key = getChildKey(child);
+            const isPresent = propagate && !isParentPresent
+                ? false
+                : presentChildren === renderedChildren ||
+                    presentKeys.includes(key);
+            const onExit = () => {
+                if (exitComplete.has(key)) {
+                    exitComplete.set(key, true);
+                }
+                else {
+                    return;
+                }
+                let isEveryExitComplete = true;
+                exitComplete.forEach((isExitComplete) => {
+                    if (!isExitComplete)
+                        isEveryExitComplete = false;
+                });
+                if (isEveryExitComplete) {
+                    forceRender?.();
+                    setRenderedChildren(pendingPresentChildren.current);
+                    propagate && safeToRemove?.();
+                    onExitComplete && onExitComplete();
+                }
+            };
+            return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
+                    ? undefined
+                    : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, root: root, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));
+        }) }));
+};
+
+const initialValue = {
+  current: 0,
+  focus: 0
+};
+const TabContext = createContext(initialValue);
+
+const tab = "_tab_1arfj_1";
+const fill = "_fill_1arfj_40";
+const inner = "_inner_1arfj_88";
+const indicator = "_indicator_1arfj_106";
+const scroller = "_scroller_1arfj_135";
+const right = "_right_1arfj_147";
+const left = "_left_1arfj_147";
+const styles = {
+	tab: tab,
+	fill: fill,
+	"tab-button": "_tab-button_1arfj_44",
+	inner: inner,
+	indicator: indicator,
+	"tab-list": "_tab-list_1arfj_116",
+	scroller: scroller,
+	right: right,
+	left: left,
+	"overflow-prev": "_overflow-prev_1arfj_173",
+	"overflow-next": "_overflow-next_1arfj_174",
+	"tab-panel": "_tab-panel_1arfj_220"
+};
+
+const TabButton = forwardRef(
+  (props, ref) => {
+    const buttonRef = useRef(null);
+    const shouldReduceMotion = useReducedMotion();
+    const {
+      current,
+      items,
+      setCurrent,
+      focus,
+      setFocus,
+      onKeyDownHandler: focusController,
+      uid
+    } = useContext(TabContext);
+    const {
+      onClick,
+      children,
+      onFocus,
+      onKeyDown,
+      controls,
+      id,
+      className,
+      style,
+      ...rest
+    } = props;
+    const index$1 = items && Array.prototype.indexOf.call(items, buttonRef.current);
+    const onClickHandler = (e) => {
+      if (index$1 === void 0) return;
+      onClick?.(e, index$1);
+      setCurrent?.(index$1);
+      setFocus?.(index$1);
+      items?.[index$1].focus();
+    };
+    const onKeyDownHandler = (e) => {
+      focusController?.(e);
+      onKeyDown?.(e);
+    };
+    const data = {
+      id,
+      controls
+    };
+    const trackingId = useTrackingId({
+      name: "TabButton",
+      data,
+      hasOverride: !!rest["data-tracking-id"]
+    });
+    const tabButtonClassNames = cx(styles["tab-button"], className);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "data-tracking-id": trackingId,
+        type: "button",
+        role: "tab",
+        "data-anv": "tab-button",
+        id,
+        className: tabButtonClassNames,
+        "aria-selected": items?.[current].id === id,
+        "aria-controls": controls,
+        onClick: onClickHandler,
+        onKeyDown: onKeyDownHandler,
+        tabIndex: items?.[focus].id === id ? 0 : -1,
+        ...rest,
+        ref: useMergeRefs([buttonRef, ref]),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles["inner"], children }),
+          items?.[current].id === id && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              layoutId: uid,
+              className: styles["indicator"],
+              transition: {
+                duration: shouldReduceMotion ? 0 : +DurationDefault.value.replace("ms", "") / 1e3
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TabButton.displayName = "TabButton";
+
+const SvgArrowBack = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z" }));
+
+const SvgArrowForward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 0 0 0-1.41l-6.58-6.6a.996.996 0 1 0-1.41 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z" }));
+
+const TabList = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      children,
+      onKeyDown,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ...rest
+    } = props;
+    const { goToPrev, gotoNext, dir } = useContext(TabContext);
+    const [leftOverflow, setLeftOverflow] = useState(false);
+    const [rightOverflow, setRightOverflow] = useState(false);
+    const scrollRef = useRef(null);
+    const calculateOverflow = useCallback(
+      (el) => {
+        const leftOverflows = dir === "ltr" ? el.scrollLeft > 0 : el.scrollLeft > el.offsetWidth - el.scrollWidth + 1;
+        const rightOverflows = dir === "ltr" ? el.scrollLeft < el.scrollWidth - el.offsetWidth : el.scrollLeft < 0;
+        setLeftOverflow(leftOverflows);
+        setRightOverflow(rightOverflows);
+      },
+      [dir]
+    );
+    useLayoutEffect(() => {
+      if (!scrollRef.current) return;
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          calculateOverflow(entry.target);
+        }
+      });
+      observer.observe(scrollRef.current);
+      return () => {
+        observer.disconnect();
+      };
+    }, [calculateOverflow]);
+    const overflowPosition = (e) => {
+      const target = e.target;
+      calculateOverflow(target);
+    };
+    const tabListClassNames = cx(styles["tab-list"], className);
+    const scrollerClassNames = cx(styles["scroller"], {
+      [styles["left"]]: leftOverflow,
+      [styles["right"]]: rightOverflow
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        className: tabListClassNames,
+        "data-anv": "tab-list",
+        ref,
+        children: [
+          (dir === "ltr" ? leftOverflow : rightOverflow) && /* @__PURE__ */ jsx(
+            "button",
+            {
+              tabIndex: -1,
+              onClick: () => goToPrev?.(false),
+              className: styles["overflow-prev"],
+              "aria-label": "Previous tab",
+              children: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowBack, "aria-hidden": true, size: "medium" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              onScroll: overflowPosition,
+              onKeyDown,
+              className: scrollerClassNames,
+              role: "tablist",
+              tabIndex: -1,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              ref: scrollRef,
+              children
+            }
+          ),
+          (dir === "ltr" ? rightOverflow : leftOverflow) && /* @__PURE__ */ jsx(
+            "button",
+            {
+              tabIndex: -1,
+              onClick: () => gotoNext?.(false),
+              className: styles["overflow-next"],
+              "aria-label": "Next tab",
+              children: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowForward, "aria-hidden": true, size: "medium" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TabList.displayName = "TabList";
+
+const TabPanel = forwardRef(
+  (props, ref) => {
+    const { id, className, ...rest } = props;
+    const { current, items } = useContext(TabContext);
+    let labelledby;
+    items?.forEach((el) => {
+      const controlId = el.getAttribute("aria-controls");
+      if (controlId === id) {
+        labelledby = el.id;
+      }
+    });
+    const currentId = items?.[current]?.getAttribute("aria-controls");
+    const isCurrent = currentId === id;
+    const tabPanelClassNames = cx(styles["tab-panel"], className);
+    if (!isCurrent) return null;
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: tabPanelClassNames,
+        transition: {
+          opacity: {
+            duration: +DurationSlow.value.replace("ms", "") / 1e3
+          }
+        },
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        layout: true,
+        ...rest,
+        role: "tabpanel",
+        "data-anv": "tab-panel",
+        id,
+        "aria-labelledby": labelledby,
+        tabIndex: 0,
+        ref
+      }
+    );
+  }
+);
+TabPanel.displayName = "TabPanel";
+
+const Tab = Object.assign(
+  forwardRef(function TabInner(props, ref) {
+    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+    const {
+      defaultIndex,
+      index,
+      onIndexChange,
+      className,
+      style,
+      fill,
+      ...rest
+    } = componentProps;
+    const tabRef = useRef(null);
+    const [items, setItems] = useState();
+    const [current, setCurrent] = useOptionallyControlledState({
+      controlledValue: index,
+      defaultValue: defaultIndex ?? 0,
+      onChange: onIndexChange
+    });
+    const isControlled = index !== void 0;
+    const [focus, setFocus] = useState(defaultIndex ?? 0);
+    const [dir, setDir] = useState("ltr");
+    const uid = useId();
+    useEffect(() => {
+      setItems(tabRef.current?.querySelectorAll("[role=tab]:not([disabled])"));
+    }, [tabRef]);
+    useEffect(() => {
+      if (tabRef.current?.closest("[dir]")?.getAttribute("dir") === "rtl") {
+        setDir("rtl");
+      } else {
+        setDir("ltr");
+      }
+    }, []);
+    useEffect(() => {
+      if (!isControlled) return;
+      const tablistEl = tabRef.current?.querySelector("[role=tablist]");
+      const hasFocusInTablist = tablistEl?.contains(document.activeElement) ?? false;
+      if (!hasFocusInTablist) setFocus(index);
+    }, [index, isControlled]);
+    useEffect(() => {
+      if (!tabRef.current) return;
+      const mutationCallback = () => {
+        setItems(
+          tabRef.current?.querySelectorAll("[role=tab]:not([disabled])")
+        );
+      };
+      const observer = new MutationObserver(mutationCallback);
+      observer.observe(tabRef.current, {
+        childList: true,
+        // Observe changes to child elements
+        subtree: true,
+        // Observe changes to descendants of the target
+        attributes: true,
+        // Observe changes to attributes
+        characterData: true
+        // Observe changes to text content
+      });
+      return () => {
+        observer.disconnect();
+      };
+    }, []);
+    const focusScroller = (node) => {
+      node?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center"
+      });
+    };
+    const gotoNext = useCallback(
+      (_refocus = true) => {
+        if (focus + 1 === items?.length) {
+          setFocus?.(0);
+          items?.[0].focus();
+          focusScroller(items?.[0]);
+          return;
+        }
+        setFocus?.(focus + 1);
+        items?.[focus + 1].focus();
+        focusScroller(items?.[focus + 1]);
+      },
+      [focus, items]
+    );
+    const goToPrev = useCallback(
+      (_refocus = true) => {
+        if (focus === 0) {
+          const lastItemIndex = items ? items?.length - 1 : 0;
+          setFocus?.(lastItemIndex);
+          items?.[lastItemIndex].focus();
+          focusScroller(items?.[lastItemIndex]);
+          return;
+        }
+        setFocus?.(focus - 1);
+        items?.[focus - 1].focus();
+        focusScroller(items?.[focus - 1]);
+      },
+      [focus, items]
+    );
+    const onKeyDownHandler = useCallback(
+      (e) => {
+        switch (e.code) {
+          case "Enter":
+          case "Space":
+            setCurrent?.(focus);
+            break;
+          case "ArrowRight":
+            e.preventDefault();
+            if (dir === "ltr") {
+              gotoNext();
+            } else {
+              goToPrev();
+            }
+            break;
+          case "ArrowLeft":
+            e.preventDefault();
+            if (dir === "ltr") {
+              goToPrev();
+            } else {
+              gotoNext();
+            }
+            break;
+        }
+      },
+      [dir, focus, goToPrev, gotoNext, setCurrent]
+    );
+    const value = useMemo(
+      () => ({
+        current,
+        setCurrent,
+        focus,
+        setFocus,
+        items,
+        uid,
+        onKeyDownHandler,
+        gotoNext,
+        goToPrev,
+        dir
+      }),
+      [
+        current,
+        setCurrent,
+        focus,
+        goToPrev,
+        gotoNext,
+        items,
+        onKeyDownHandler,
+        uid,
+        dir
+      ]
+    );
+    const tabClassNames = cx(styles["tab"], className, {
+      [styles["fill"]]: fill
+    });
+    const styleCombined = {
+      ...style,
+      ...layoutStyles
+    };
+    return /* @__PURE__ */ jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        transition: { duration: 0 },
+        layout: true,
+        className: tabClassNames,
+        "data-anv": "tab",
+        style: styleCombined,
+        ...rest,
+        ref: useMergeRefs([tabRef, ref])
+      }
+    ) }) });
+  }),
+  {
+    /**
+     * TabButton component for individual tab navigation buttons.
+     *
+     * Features:
+     * - Automatic ARIA attributes for accessibility
+     * - Visual indicator for active state
+     * - Keyboard navigation support
+     * - Smooth animations with reduced motion support
+     * - Proper focus management
+     * - RTL language support
+     * - Automatic tracking ID generation for analytics
+     *
+     * @example
+     * <Tab.Button id="tab1" controls="panel1" onClick={(e, index) => console.log('Tab clicked:', index)}>
+     *   First Tab
+     * </Tab.Button>
+     */
+    Button: TabButton,
+    /**
+     * TabList component for containing and managing tab buttons.
+     *
+     * Features:
+     * - Horizontal scrolling for overflow tabs
+     * - Navigation arrows for overflow content
+     * - RTL language support
+     * - Automatic overflow detection
+     * - Proper ARIA roles for accessibility
+     * - Smooth scrolling behavior
+     * - Visual indicator positioning
+     *
+     * @example
+     * <Tab.List>
+     *   <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
+     *   <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
+     *   <Tab.Button id="tab3" controls="panel3">Third Tab</Tab.Button>
+     * </Tab.List>
+     */
+    List: TabList,
+    /**
+     * TabPanel component for displaying tab content.
+     *
+     * Features:
+     * - Automatic visibility based on active tab
+     * - Smooth fade animations
+     * - Proper ARIA attributes for accessibility
+     * - Automatic association with tab buttons
+     * - Focus management
+     * - Layout animations
+     *
+     * @example
+     * <Tab.Panel id="panel1">
+     *   <h2>First Tab Content</h2>
+     *   <p>This is the content for the first tab.</p>
+     * </Tab.Panel>
+     */
+    Panel: TabPanel
+  }
+);
+Tab.displayName = "Tab";
+
+export { Tab as T };
+//# sourceMappingURL=Tab-CIY6BO2e.js.map