lynote-ui 0.0.1

package/dist/tabs/index.js

@@ -0,0 +1,718 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../jsx-runtime-CPzt8Nmm.js");
+const classVarianceAuthority = require("class-variance-authority");
+const React = require("react");
+const useControlled = require("../useControlled-DTjTIpeU.js");
+const useIsoLayoutEffect = require("../useIsoLayoutEffect-CYDr9Bko.js");
+const useStableCallback = require("../useStableCallback-CfE_knIO.js");
+const useRenderElement = require("../useRenderElement-CtyURhhF.js");
+const CompositeList = require("../CompositeList-CLP_jD9H.js");
+const DirectionContext = require("../DirectionContext-BsZvU9q3.js");
+const utils = require("../utils-ij3i9zTT.js");
+const inertValue = require("../inertValue-gSeyz2Lm.js");
+const useBaseUiId = require("../useBaseUiId-ZDgjliOe.js");
+const useOpenChangeComplete = require("../useOpenChangeComplete-B0xZNwMu.js");
+const useCompositeListItem = require("../useCompositeListItem-CPSGNf6p.js");
+const CompositeRoot = require("../CompositeRoot-DhWDFM9v.js");
+const owner = require("../owner-DohlhdQa.js");
+const useCompositeItem = require("../useCompositeItem-F8jky_8M.js");
+const createBaseUIEventDetails = require("../createBaseUIEventDetails-D39y2D9R.js");
+const useButton = require("../useButton-CcvYPR5H.js");
+const element = require("../element-DAAyJrnp.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TabsRootContext = /* @__PURE__ */ React__namespace.createContext(void 0);
+if (process.env.NODE_ENV !== "production") TabsRootContext.displayName = "TabsRootContext";
+function useTabsRootContext() {
+  const context = React__namespace.useContext(TabsRootContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>." : useRenderElement.formatErrorMessage(64));
+  }
+  return context;
+}
+let TabsRootDataAttributes = /* @__PURE__ */ (function(TabsRootDataAttributes2) {
+  TabsRootDataAttributes2["activationDirection"] = "data-activation-direction";
+  TabsRootDataAttributes2["orientation"] = "data-orientation";
+  return TabsRootDataAttributes2;
+})({});
+const tabsStateAttributesMapping = {
+  tabActivationDirection: (dir) => ({
+    [TabsRootDataAttributes.activationDirection]: dir
+  })
+};
+const TabsRoot = /* @__PURE__ */ React__namespace.forwardRef(function TabsRoot2(componentProps, forwardedRef) {
+  const {
+    className,
+    defaultValue: defaultValueProp = 0,
+    onValueChange: onValueChangeProp,
+    orientation = "horizontal",
+    render,
+    value: valueProp,
+    ...elementProps
+  } = componentProps;
+  const direction = DirectionContext.useDirection();
+  const hasExplicitDefaultValueProp = Object.hasOwn(componentProps, "defaultValue");
+  const tabPanelRefs = React__namespace.useRef([]);
+  const [mountedTabPanels, setMountedTabPanels] = React__namespace.useState(() => /* @__PURE__ */ new Map());
+  const [value, setValue] = useControlled.useControlled({
+    controlled: valueProp,
+    default: defaultValueProp,
+    name: "Tabs",
+    state: "value"
+  });
+  const isControlled = valueProp !== void 0;
+  const [tabMap, setTabMap] = React__namespace.useState(() => /* @__PURE__ */ new Map());
+  const [tabActivationDirection, setTabActivationDirection] = React__namespace.useState("none");
+  const onValueChange = useStableCallback.useStableCallback((newValue, eventDetails) => {
+    onValueChangeProp == null ? void 0 : onValueChangeProp(newValue, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    setValue(newValue);
+    setTabActivationDirection(eventDetails.activationDirection);
+  });
+  const registerMountedTabPanel = useStableCallback.useStableCallback((panelValue, panelId) => {
+    setMountedTabPanels((prev) => {
+      if (prev.get(panelValue) === panelId) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.set(panelValue, panelId);
+      return next;
+    });
+  });
+  const unregisterMountedTabPanel = useStableCallback.useStableCallback((panelValue, panelId) => {
+    setMountedTabPanels((prev) => {
+      if (!prev.has(panelValue) || prev.get(panelValue) !== panelId) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.delete(panelValue);
+      return next;
+    });
+  });
+  const getTabPanelIdByValue = React__namespace.useCallback((tabValue) => {
+    return mountedTabPanels.get(tabValue);
+  }, [mountedTabPanels]);
+  const getTabIdByPanelValue = React__namespace.useCallback((tabPanelValue) => {
+    for (const tabMetadata of tabMap.values()) {
+      if (tabPanelValue === (tabMetadata == null ? void 0 : tabMetadata.value)) {
+        return tabMetadata == null ? void 0 : tabMetadata.id;
+      }
+    }
+    return void 0;
+  }, [tabMap]);
+  const getTabElementBySelectedValue = React__namespace.useCallback((selectedValue) => {
+    if (selectedValue === void 0) {
+      return null;
+    }
+    for (const [tabElement, tabMetadata] of tabMap.entries()) {
+      if (tabMetadata != null && selectedValue === (tabMetadata.value ?? tabMetadata.index)) {
+        return tabElement;
+      }
+    }
+    return null;
+  }, [tabMap]);
+  const tabsContextValue = React__namespace.useMemo(() => ({
+    direction,
+    getTabElementBySelectedValue,
+    getTabIdByPanelValue,
+    getTabPanelIdByValue,
+    onValueChange,
+    orientation,
+    registerMountedTabPanel,
+    setTabMap,
+    unregisterMountedTabPanel,
+    tabActivationDirection,
+    value
+  }), [direction, getTabElementBySelectedValue, getTabIdByPanelValue, getTabPanelIdByValue, onValueChange, orientation, registerMountedTabPanel, setTabMap, unregisterMountedTabPanel, tabActivationDirection, value]);
+  const selectedTabMetadata = React__namespace.useMemo(() => {
+    for (const tabMetadata of tabMap.values()) {
+      if (tabMetadata != null && tabMetadata.value === value) {
+        return tabMetadata;
+      }
+    }
+    return void 0;
+  }, [tabMap, value]);
+  const firstEnabledTabValue = React__namespace.useMemo(() => {
+    for (const tabMetadata of tabMap.values()) {
+      if (tabMetadata != null && !tabMetadata.disabled) {
+        return tabMetadata.value;
+      }
+    }
+    return void 0;
+  }, [tabMap]);
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (isControlled || tabMap.size === 0) {
+      return;
+    }
+    const selectionIsDisabled = selectedTabMetadata == null ? void 0 : selectedTabMetadata.disabled;
+    const selectionIsMissing = selectedTabMetadata == null && value !== null;
+    const shouldHonorExplicitDefaultSelection = hasExplicitDefaultValueProp && selectionIsDisabled && value === defaultValueProp;
+    if (shouldHonorExplicitDefaultSelection) {
+      return;
+    }
+    if (!selectionIsDisabled && !selectionIsMissing) {
+      return;
+    }
+    const fallbackValue = firstEnabledTabValue ?? null;
+    if (value === fallbackValue) {
+      return;
+    }
+    setValue(fallbackValue);
+    setTabActivationDirection("none");
+  }, [defaultValueProp, firstEnabledTabValue, hasExplicitDefaultValueProp, isControlled, selectedTabMetadata, setTabActivationDirection, setValue, tabMap, value]);
+  const state = {
+    orientation,
+    tabActivationDirection
+  };
+  const element2 = useRenderElement.useRenderElement("div", componentProps, {
+    state,
+    ref: forwardedRef,
+    props: elementProps,
+    stateAttributesMapping: tabsStateAttributesMapping
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(TabsRootContext.Provider, {
+    value: tabsContextValue,
+    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CompositeList.CompositeList, {
+      elementsRef: tabPanelRefs,
+      children: element2
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") TabsRoot.displayName = "TabsRoot";
+const TabsListContext = /* @__PURE__ */ React__namespace.createContext(void 0);
+if (process.env.NODE_ENV !== "production") TabsListContext.displayName = "TabsListContext";
+function useTabsListContext() {
+  const context = React__namespace.useContext(TabsListContext);
+  if (context === void 0) {
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>." : useRenderElement.formatErrorMessage(65));
+  }
+  return context;
+}
+const TabsTab = /* @__PURE__ */ React__namespace.forwardRef(function TabsTab2(componentProps, forwardedRef) {
+  const {
+    className,
+    disabled = false,
+    render,
+    value,
+    id: idProp,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    value: activeTabValue,
+    getTabPanelIdByValue,
+    orientation
+  } = useTabsRootContext();
+  const {
+    activateOnFocus,
+    highlightedTabIndex,
+    onTabActivation,
+    registerTabResizeObserverElement,
+    setHighlightedTabIndex,
+    tabsListElement
+  } = useTabsListContext();
+  const id = useBaseUiId.useBaseUiId(idProp);
+  const tabMetadata = React__namespace.useMemo(() => ({
+    disabled,
+    id,
+    value
+  }), [disabled, id, value]);
+  const {
+    compositeProps,
+    compositeRef,
+    index
+    // hook is used instead of the CompositeItem component
+    // because the index is needed for Tab internals
+  } = useCompositeItem.useCompositeItem({
+    metadata: tabMetadata
+  });
+  const active = value === activeTabValue;
+  const isNavigatingRef = React__namespace.useRef(false);
+  const tabElementRef = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    const tabElement = tabElementRef.current;
+    if (!tabElement) {
+      return void 0;
+    }
+    return registerTabResizeObserverElement(tabElement);
+  }, [registerTabResizeObserverElement]);
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (isNavigatingRef.current) {
+      isNavigatingRef.current = false;
+      return;
+    }
+    if (!(active && index > -1 && highlightedTabIndex !== index)) {
+      return;
+    }
+    const listElement = tabsListElement;
+    if (listElement != null) {
+      const activeEl = element.activeElement(owner.ownerDocument(listElement));
+      if (activeEl && element.contains(listElement, activeEl)) {
+        return;
+      }
+    }
+    if (!disabled) {
+      setHighlightedTabIndex(index);
+    }
+  }, [active, index, highlightedTabIndex, setHighlightedTabIndex, disabled, tabsListElement]);
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton.useButton({
+    disabled,
+    native: nativeButton,
+    focusableWhenDisabled: true
+  });
+  const tabPanelId = getTabPanelIdByValue(value);
+  const isPressingRef = React__namespace.useRef(false);
+  const isMainButtonRef = React__namespace.useRef(false);
+  function onClick(event) {
+    if (active || disabled) {
+      return;
+    }
+    onTabActivation(value, createBaseUIEventDetails.createChangeEventDetails(createBaseUIEventDetails.none, event.nativeEvent, void 0, {
+      activationDirection: "none"
+    }));
+  }
+  function onFocus(event) {
+    if (active) {
+      return;
+    }
+    if (index > -1 && !disabled) {
+      setHighlightedTabIndex(index);
+    }
+    if (disabled) {
+      return;
+    }
+    if (activateOnFocus && (!isPressingRef.current || // keyboard or touch focus
+    isPressingRef.current && isMainButtonRef.current)) {
+      onTabActivation(value, createBaseUIEventDetails.createChangeEventDetails(createBaseUIEventDetails.none, event.nativeEvent, void 0, {
+        activationDirection: "none"
+      }));
+    }
+  }
+  function onPointerDown(event) {
+    if (active || disabled) {
+      return;
+    }
+    isPressingRef.current = true;
+    function handlePointerUp() {
+      isPressingRef.current = false;
+      isMainButtonRef.current = false;
+    }
+    if (!event.button || event.button === 0) {
+      isMainButtonRef.current = true;
+      const doc = owner.ownerDocument(event.currentTarget);
+      doc.addEventListener("pointerup", handlePointerUp, {
+        once: true
+      });
+    }
+  }
+  const state = {
+    disabled,
+    active,
+    orientation
+  };
+  const element$1 = useRenderElement.useRenderElement("button", componentProps, {
+    state,
+    ref: [forwardedRef, buttonRef, compositeRef, tabElementRef],
+    props: [compositeProps, {
+      role: "tab",
+      "aria-controls": tabPanelId,
+      "aria-selected": active,
+      id,
+      onClick,
+      onFocus,
+      onPointerDown,
+      [CompositeRoot.ACTIVE_COMPOSITE_ITEM]: active ? "" : void 0,
+      onKeyDownCapture() {
+        isNavigatingRef.current = true;
+      }
+    }, elementProps, getButtonProps]
+  });
+  return element$1;
+});
+if (process.env.NODE_ENV !== "production") TabsTab.displayName = "TabsTab";
+let TabsPanelDataAttributes = (function(TabsPanelDataAttributes2) {
+  TabsPanelDataAttributes2["index"] = "data-index";
+  TabsPanelDataAttributes2["activationDirection"] = "data-activation-direction";
+  TabsPanelDataAttributes2["orientation"] = "data-orientation";
+  TabsPanelDataAttributes2["hidden"] = "data-hidden";
+  TabsPanelDataAttributes2[TabsPanelDataAttributes2["startingStyle"] = useOpenChangeComplete.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  TabsPanelDataAttributes2[TabsPanelDataAttributes2["endingStyle"] = useOpenChangeComplete.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return TabsPanelDataAttributes2;
+})({});
+const stateAttributesMapping = {
+  ...tabsStateAttributesMapping,
+  ...useOpenChangeComplete.transitionStatusMapping
+};
+const TabsPanel = /* @__PURE__ */ React__namespace.forwardRef(function TabPanel(componentProps, forwardedRef) {
+  const {
+    className,
+    value,
+    render,
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    value: selectedValue,
+    getTabIdByPanelValue,
+    orientation,
+    tabActivationDirection,
+    registerMountedTabPanel,
+    unregisterMountedTabPanel
+  } = useTabsRootContext();
+  const id = useBaseUiId.useBaseUiId();
+  const metadata = React__namespace.useMemo(() => ({
+    id,
+    value
+  }), [id, value]);
+  const {
+    ref: listItemRef,
+    index
+  } = useCompositeListItem.useCompositeListItem({
+    metadata
+  });
+  const open = value === selectedValue;
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = useOpenChangeComplete.useTransitionStatus(open);
+  const hidden = !mounted;
+  const correspondingTabId = getTabIdByPanelValue(value);
+  const state = {
+    hidden,
+    orientation,
+    tabActivationDirection,
+    transitionStatus
+  };
+  const panelRef = React__namespace.useRef(null);
+  const element2 = useRenderElement.useRenderElement("div", componentProps, {
+    state,
+    ref: [forwardedRef, listItemRef, panelRef],
+    props: [{
+      "aria-labelledby": correspondingTabId,
+      hidden,
+      id,
+      role: "tabpanel",
+      tabIndex: open ? 0 : -1,
+      inert: inertValue.inertValue(!open),
+      [TabsPanelDataAttributes.index]: index
+    }, elementProps],
+    stateAttributesMapping
+  });
+  useOpenChangeComplete.useOpenChangeComplete({
+    open,
+    ref: panelRef,
+    onComplete() {
+      if (!open) {
+        setMounted(false);
+      }
+    }
+  });
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (hidden && !keepMounted) {
+      return void 0;
+    }
+    if (id == null) {
+      return void 0;
+    }
+    registerMountedTabPanel(value, id);
+    return () => {
+      unregisterMountedTabPanel(value, id);
+    };
+  }, [hidden, keepMounted, value, id, registerMountedTabPanel, unregisterMountedTabPanel]);
+  const shouldRender = keepMounted || mounted;
+  if (!shouldRender) {
+    return null;
+  }
+  return element2;
+});
+if (process.env.NODE_ENV !== "production") TabsPanel.displayName = "TabsPanel";
+const TabsList$1 = /* @__PURE__ */ React__namespace.forwardRef(function TabsList(componentProps, forwardedRef) {
+  const {
+    activateOnFocus = false,
+    className,
+    loopFocus = true,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    getTabElementBySelectedValue,
+    onValueChange,
+    orientation,
+    value,
+    setTabMap,
+    tabActivationDirection
+  } = useTabsRootContext();
+  const [highlightedTabIndex, setHighlightedTabIndex] = React__namespace.useState(0);
+  const [tabsListElement, setTabsListElement] = React__namespace.useState(null);
+  const indicatorUpdateListenersRef = React__namespace.useRef(/* @__PURE__ */ new Set());
+  const tabResizeObserverElementsRef = React__namespace.useRef(/* @__PURE__ */ new Set());
+  const resizeObserverRef = React__namespace.useRef(null);
+  const notifyIndicatorUpdateListeners = useStableCallback.useStableCallback(() => {
+    indicatorUpdateListenersRef.current.forEach((listener) => {
+      listener();
+    });
+  });
+  React__namespace.useEffect(() => {
+    if (typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      if (!indicatorUpdateListenersRef.current.size) {
+        return;
+      }
+      notifyIndicatorUpdateListeners();
+    });
+    resizeObserverRef.current = resizeObserver;
+    if (tabsListElement) {
+      resizeObserver.observe(tabsListElement);
+    }
+    tabResizeObserverElementsRef.current.forEach((element2) => {
+      resizeObserver.observe(element2);
+    });
+    return () => {
+      resizeObserver.disconnect();
+      resizeObserverRef.current = null;
+    };
+  }, [tabsListElement, notifyIndicatorUpdateListeners]);
+  const registerIndicatorUpdateListener = useStableCallback.useStableCallback((listener) => {
+    indicatorUpdateListenersRef.current.add(listener);
+    return () => {
+      indicatorUpdateListenersRef.current.delete(listener);
+    };
+  });
+  const registerTabResizeObserverElement = useStableCallback.useStableCallback((element2) => {
+    var _a;
+    tabResizeObserverElementsRef.current.add(element2);
+    (_a = resizeObserverRef.current) == null ? void 0 : _a.observe(element2);
+    return () => {
+      var _a2;
+      tabResizeObserverElementsRef.current.delete(element2);
+      (_a2 = resizeObserverRef.current) == null ? void 0 : _a2.unobserve(element2);
+    };
+  });
+  const detectActivationDirection = useActivationDirectionDetector(
+    value,
+    // the old value
+    orientation,
+    tabsListElement,
+    getTabElementBySelectedValue
+  );
+  const onTabActivation = useStableCallback.useStableCallback((newValue, eventDetails) => {
+    if (newValue !== value) {
+      const activationDirection = detectActivationDirection(newValue);
+      eventDetails.activationDirection = activationDirection;
+      onValueChange(newValue, eventDetails);
+    }
+  });
+  const state = {
+    orientation,
+    tabActivationDirection
+  };
+  const defaultProps = {
+    "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+    role: "tablist"
+  };
+  const tabsListContextValue = React__namespace.useMemo(() => ({
+    activateOnFocus,
+    highlightedTabIndex,
+    registerIndicatorUpdateListener,
+    registerTabResizeObserverElement,
+    onTabActivation,
+    setHighlightedTabIndex,
+    tabsListElement
+  }), [activateOnFocus, highlightedTabIndex, registerIndicatorUpdateListener, registerTabResizeObserverElement, onTabActivation, setHighlightedTabIndex, tabsListElement]);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(TabsListContext.Provider, {
+    value: tabsListContextValue,
+    children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CompositeRoot.CompositeRoot, {
+      render,
+      className,
+      state,
+      refs: [forwardedRef, setTabsListElement],
+      props: [defaultProps, elementProps],
+      stateAttributesMapping: tabsStateAttributesMapping,
+      highlightedIndex: highlightedTabIndex,
+      enableHomeAndEndKeys: true,
+      loopFocus,
+      orientation,
+      onHighlightedIndexChange: setHighlightedTabIndex,
+      onMapChange: setTabMap,
+      disabledIndices: useRenderElement.EMPTY_ARRAY
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") TabsList$1.displayName = "TabsList";
+function getInset(tab, tabsList) {
+  const {
+    left: tabLeft,
+    top: tabTop
+  } = tab.getBoundingClientRect();
+  const {
+    left: listLeft,
+    top: listTop
+  } = tabsList.getBoundingClientRect();
+  const left = tabLeft - listLeft;
+  const top = tabTop - listTop;
+  return {
+    left,
+    top
+  };
+}
+function useActivationDirectionDetector(activeTabValue, orientation, tabsListElement, getTabElement) {
+  const [previousTabEdge, setPreviousTabEdge] = React__namespace.useState(null);
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (activeTabValue == null || tabsListElement == null) {
+      setPreviousTabEdge(null);
+      return;
+    }
+    const activeTab = getTabElement(activeTabValue);
+    if (activeTab == null) {
+      setPreviousTabEdge(null);
+      return;
+    }
+    const {
+      left,
+      top
+    } = getInset(activeTab, tabsListElement);
+    setPreviousTabEdge(orientation === "horizontal" ? left : top);
+  }, [orientation, getTabElement, tabsListElement, activeTabValue]);
+  return React__namespace.useCallback((newValue) => {
+    if (newValue === activeTabValue) {
+      return "none";
+    }
+    if (newValue == null) {
+      setPreviousTabEdge(null);
+      return "none";
+    }
+    if (newValue != null && tabsListElement != null) {
+      const activeTabElement = getTabElement(newValue);
+      if (activeTabElement != null) {
+        const {
+          left,
+          top
+        } = getInset(activeTabElement, tabsListElement);
+        if (previousTabEdge == null) {
+          setPreviousTabEdge(orientation === "horizontal" ? left : top);
+          return "none";
+        }
+        if (orientation === "horizontal") {
+          if (left < previousTabEdge) {
+            setPreviousTabEdge(left);
+            return "left";
+          }
+          if (left > previousTabEdge) {
+            setPreviousTabEdge(left);
+            return "right";
+          }
+        } else if (top < previousTabEdge) {
+          setPreviousTabEdge(top);
+          return "up";
+        } else if (top > previousTabEdge) {
+          setPreviousTabEdge(top);
+          return "down";
+        }
+      }
+    }
+    return "none";
+  }, [getTabElement, orientation, previousTabEdge, tabsListElement, activeTabValue]);
+}
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    TabsRoot,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: utils.cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const tabsListVariants = classVarianceAuthority.cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TabsList2({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    TabsList$1,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: utils.cn(tabsListVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    TabsTab,
+    {
+      "data-slot": "tabs-trigger",
+      className: utils.cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    TabsPanel,
+    {
+      "data-slot": "tabs-content",
+      className: utils.cn("flex-1 text-sm outline-none", className),
+      ...props
+    }
+  );
+}
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList2;
+exports.TabsTrigger = TabsTrigger;
+exports.tabsListVariants = tabsListVariants;
+//# sourceMappingURL=index.js.map