@entro314labs/react-arc-tabs 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1028 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ArcTabs: () => ArcTabs,
+  ArcTabsTailwind: () => ArcTabsTailwind
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ArcTabs.tsx
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var joinClassNames = (...parts) => parts.filter(Boolean).join(" ");
+var toCssSize = (value) => typeof value === "number" ? `${value}px` : value;
+var findFirstEnabledIndex = (items) => items.findIndex((item) => !item.disabled);
+var getEnabledIndices = (items) => items.reduce((acc, item, index) => {
+  if (!item.disabled) acc.push(index);
+  return acc;
+}, []);
+var getNextEnabledIndex = (enabledIndices, currentIndex, direction) => {
+  if (!enabledIndices.length) return -1;
+  const currentPosition = enabledIndices.indexOf(currentIndex);
+  if (currentPosition === -1) {
+    return direction === 1 ? enabledIndices[0] ?? -1 : enabledIndices[enabledIndices.length - 1] ?? -1;
+  }
+  const nextPosition = (currentPosition + direction + enabledIndices.length) % enabledIndices.length;
+  return enabledIndices[nextPosition] ?? -1;
+};
+function ArcTabs({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  activationMode = "automatic",
+  keepMounted = true,
+  size = "md",
+  fit = "content",
+  motionPreset = "subtle",
+  motionDuration = 260,
+  ariaLabel = "Tabs",
+  listId,
+  tabsClassName,
+  panelClassName,
+  radius,
+  gap,
+  panelPadding,
+  accentColor,
+  tabBackground,
+  tabHoverBackground,
+  panelBackground,
+  panelBorderColor,
+  emptyState = null,
+  renderTabLabel,
+  renderPanel,
+  className,
+  style,
+  ...rest
+}) {
+  const reactId = React.useId();
+  const baseId = React.useMemo(
+    () => (listId ?? `arc-tabs-${reactId}`).replace(/:/g, ""),
+    [listId, reactId]
+  );
+  const isControlled = value !== void 0;
+  const firstEnabledIndex = React.useMemo(
+    () => findFirstEnabledIndex(items),
+    [items]
+  );
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(() => {
+    const requested = defaultValue;
+    const requestedMatch = items.find(
+      (item) => !item.disabled && item.id === requested
+    );
+    if (requestedMatch) return requestedMatch.id;
+    return firstEnabledIndex >= 0 ? items[firstEnabledIndex]?.id : void 0;
+  });
+  const rawValue = isControlled ? value : uncontrolledValue;
+  const strictSelectedIndex = React.useMemo(
+    () => items.findIndex((item) => !item.disabled && item.id === rawValue),
+    [items, rawValue]
+  );
+  const selectedIndex = strictSelectedIndex >= 0 ? strictSelectedIndex : firstEnabledIndex;
+  const selectedItem = selectedIndex >= 0 ? items[selectedIndex] : void 0;
+  React.useEffect(() => {
+    if (isControlled) return;
+    if (strictSelectedIndex !== -1) return;
+    if (firstEnabledIndex !== -1) {
+      const fallbackId = items[firstEnabledIndex]?.id;
+      setUncontrolledValue(fallbackId);
+    } else {
+      setUncontrolledValue(void 0);
+    }
+  }, [isControlled, strictSelectedIndex, firstEnabledIndex, items]);
+  const [focusedIndex, setFocusedIndex] = React.useState(selectedIndex);
+  React.useEffect(() => {
+    if (selectedIndex === -1) {
+      setFocusedIndex(-1);
+      return;
+    }
+    if (focusedIndex < 0 || focusedIndex >= items.length || items[focusedIndex]?.disabled) {
+      setFocusedIndex(selectedIndex);
+    }
+  }, [focusedIndex, selectedIndex, items]);
+  const enabledIndices = React.useMemo(() => getEnabledIndices(items), [items]);
+  const tabRefs = React.useRef([]);
+  const listRef = React.useRef(null);
+  const activePanelRef = React.useRef(null);
+  const hasMountedRef = React.useRef(false);
+  const previousSelectedIndexRef = React.useRef(selectedIndex);
+  const [hasInteracted, setHasInteracted] = React.useState(false);
+  const [panelDirection, setPanelDirection] = React.useState("none");
+  const [indicator, setIndicator] = React.useState({
+    x: 0,
+    width: 0,
+    ready: false
+  });
+  const effectiveMotionDuration = motionPreset === "none" ? 0 : Math.max(0, motionDuration);
+  const showSlidingIndicator = motionPreset === "expressive" && selectedIndex >= 0;
+  React.useEffect(() => {
+    tabRefs.current = tabRefs.current.slice(0, items.length);
+  }, [items.length]);
+  React.useEffect(() => {
+    const previous = previousSelectedIndexRef.current;
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      previousSelectedIndexRef.current = selectedIndex;
+      return;
+    }
+    if (previous !== selectedIndex) {
+      setHasInteracted(true);
+      if (selectedIndex >= 0 && previous >= 0) {
+        setPanelDirection(selectedIndex > previous ? "forward" : "backward");
+      }
+    }
+    previousSelectedIndexRef.current = selectedIndex;
+  }, [selectedIndex]);
+  const focusTabIndex = React.useCallback((index) => {
+    if (index < 0) return;
+    setFocusedIndex(index);
+    tabRefs.current[index]?.focus();
+  }, []);
+  const selectTab = React.useCallback(
+    (index) => {
+      const item = items[index];
+      if (!item || item.disabled) return;
+      if (index === selectedIndex) {
+        setFocusedIndex(index);
+        return;
+      }
+      setHasInteracted(true);
+      if (selectedIndex >= 0) {
+        setPanelDirection(index > selectedIndex ? "forward" : "backward");
+      }
+      if (!isControlled) {
+        setUncontrolledValue(item.id);
+      }
+      setFocusedIndex(index);
+      onValueChange?.(item.id, item, index);
+    },
+    [items, selectedIndex, isControlled, onValueChange]
+  );
+  const syncIndicator = React.useCallback(() => {
+    if (!showSlidingIndicator) {
+      setIndicator(
+        (previous) => previous.ready || previous.width !== 0 || previous.x !== 0 ? { x: 0, width: 0, ready: false } : previous
+      );
+      return;
+    }
+    const listElement = listRef.current;
+    const selectedTab = selectedIndex >= 0 ? tabRefs.current[selectedIndex] ?? null : null;
+    if (!listElement || !selectedTab) return;
+    const listRect = listElement.getBoundingClientRect();
+    const tabRect = selectedTab.getBoundingClientRect();
+    const nextX = tabRect.left - listRect.left + listElement.scrollLeft;
+    const nextWidth = tabRect.width;
+    setIndicator((previous) => {
+      const changedX = Math.abs(previous.x - nextX) > 0.5;
+      const changedWidth = Math.abs(previous.width - nextWidth) > 0.5;
+      if (!changedX && !changedWidth && previous.ready) {
+        return previous;
+      }
+      return {
+        x: nextX,
+        width: nextWidth,
+        ready: true
+      };
+    });
+  }, [selectedIndex, showSlidingIndicator]);
+  React.useEffect(() => {
+    syncIndicator();
+  }, [syncIndicator, items.length, size, fit]);
+  React.useEffect(() => {
+    if (!showSlidingIndicator) return;
+    const listElement = listRef.current;
+    if (!listElement) return;
+    const onResize = () => syncIndicator();
+    const onScroll = () => syncIndicator();
+    const frame = requestAnimationFrame(syncIndicator);
+    let observer = null;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(() => syncIndicator());
+      observer.observe(listElement);
+      tabRefs.current.forEach((tabElement) => {
+        if (tabElement) observer?.observe(tabElement);
+      });
+    }
+    listElement.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onResize);
+    return () => {
+      cancelAnimationFrame(frame);
+      listElement.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+      observer?.disconnect();
+    };
+  }, [showSlidingIndicator, syncIndicator, items.length]);
+  React.useEffect(() => {
+    if (!hasInteracted || motionPreset === "none" || effectiveMotionDuration <= 0) {
+      return;
+    }
+    const panelElement = activePanelRef.current;
+    if (!panelElement || typeof panelElement.animate !== "function") {
+      return;
+    }
+    if (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    const offsetX = motionPreset === "expressive" ? panelDirection === "forward" ? 20 : panelDirection === "backward" ? -20 : 0 : 0;
+    const offsetY = motionPreset === "expressive" ? 10 : 6;
+    const startScale = motionPreset === "expressive" ? 0.985 : 0.995;
+    const animation = panelElement.animate(
+      [
+        {
+          opacity: 0,
+          transform: `translate3d(${offsetX}px, ${offsetY}px, 0) scale(${startScale})`,
+          filter: "blur(1px)"
+        },
+        {
+          opacity: 1,
+          transform: "translate3d(0, 0, 0) scale(1)",
+          filter: "blur(0px)"
+        }
+      ],
+      {
+        duration: effectiveMotionDuration,
+        easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+        fill: "both"
+      }
+    );
+    return () => {
+      animation.cancel();
+    };
+  }, [
+    selectedIndex,
+    hasInteracted,
+    motionPreset,
+    panelDirection,
+    effectiveMotionDuration
+  ]);
+  const handleTabKeyDown = React.useCallback(
+    (event, index) => {
+      if (!enabledIndices.length) return;
+      switch (event.key) {
+        case "ArrowRight": {
+          event.preventDefault();
+          const next = getNextEnabledIndex(enabledIndices, index, 1);
+          if (next !== -1) {
+            focusTabIndex(next);
+            if (activationMode === "automatic") selectTab(next);
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          event.preventDefault();
+          const previous = getNextEnabledIndex(enabledIndices, index, -1);
+          if (previous !== -1) {
+            focusTabIndex(previous);
+            if (activationMode === "automatic") selectTab(previous);
+          }
+          break;
+        }
+        case "Home": {
+          event.preventDefault();
+          const first = enabledIndices[0];
+          if (first !== void 0) {
+            focusTabIndex(first);
+            if (activationMode === "automatic") selectTab(first);
+          }
+          break;
+        }
+        case "End": {
+          event.preventDefault();
+          const last = enabledIndices[enabledIndices.length - 1];
+          if (last !== void 0) {
+            focusTabIndex(last);
+            if (activationMode === "automatic") selectTab(last);
+          }
+          break;
+        }
+        case "Enter":
+        case " ":
+        case "Spacebar": {
+          if (activationMode === "manual") {
+            event.preventDefault();
+            selectTab(index);
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    },
+    [activationMode, enabledIndices, focusTabIndex, selectTab]
+  );
+  const themedStyle = React.useMemo(() => {
+    const cssVars = { ...style };
+    if (radius !== void 0) {
+      cssVars["--arc-radius"] = `${radius}px`;
+    }
+    if (gap !== void 0) {
+      cssVars["--arc-gap"] = `${gap}px`;
+    }
+    const panelPaddingValue = toCssSize(panelPadding);
+    if (panelPaddingValue !== void 0) {
+      cssVars["--arc-panel-padding"] = panelPaddingValue;
+    }
+    if (accentColor) {
+      cssVars["--arc-accent"] = accentColor;
+    }
+    if (tabBackground) {
+      cssVars["--arc-tab-bg"] = tabBackground;
+    }
+    if (tabHoverBackground) {
+      cssVars["--arc-tab-hover-bg"] = tabHoverBackground;
+    }
+    if (panelBackground) {
+      cssVars["--arc-panel-bg"] = panelBackground;
+    }
+    if (panelBorderColor) {
+      cssVars["--arc-panel-border"] = panelBorderColor;
+    }
+    cssVars["--arc-motion-duration"] = `${effectiveMotionDuration}ms`;
+    return cssVars;
+  }, [
+    style,
+    radius,
+    gap,
+    panelPadding,
+    accentColor,
+    tabBackground,
+    tabHoverBackground,
+    panelBackground,
+    panelBorderColor,
+    effectiveMotionDuration
+  ]);
+  const rootClassName = joinClassNames(
+    "arc-tabs",
+    `arc-tabs--size-${size}`,
+    `arc-tabs--fit-${fit}`,
+    `arc-tabs--motion-${motionPreset}`,
+    hasInteracted && "arc-tabs--has-interacted",
+    panelDirection !== "none" && `arc-tabs--direction-${panelDirection}`,
+    className
+  );
+  const indicatorStyle = React.useMemo(
+    () => ({
+      "--arc-indicator-x": `${indicator.x}px`,
+      "--arc-indicator-w": `${indicator.width}px`
+    }),
+    [indicator.x, indicator.width]
+  );
+  const renderDefaultLabel = (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "arc-tabs__icon", children: item.icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "arc-tabs__text", children: item.label }),
+    item.badge !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "arc-tabs__badge", children: item.badge }) : null
+  ] });
+  const renderPanelContent = (item, state) => renderPanel ? renderPanel(item, state) : item.content;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: rootClassName, style: themedStyle, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "ul",
+      {
+        ref: listRef,
+        className: joinClassNames("arc-tabs__list", tabsClassName),
+        role: "tablist",
+        "aria-label": ariaLabel,
+        id: `${baseId}-list`,
+        children: [
+          showSlidingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "li",
+            {
+              "aria-hidden": "true",
+              role: "presentation",
+              className: joinClassNames(
+                "arc-tabs__active-indicator",
+                indicator.ready && "is-ready"
+              ),
+              style: indicatorStyle
+            }
+          ) : null,
+          items.map((item, index) => {
+            const selected = index === selectedIndex;
+            const disabled = Boolean(item.disabled);
+            const tabId = `${baseId}-tab-${index}`;
+            const panelId = `${baseId}-panel-${index}`;
+            const state = { index, selected, disabled };
+            const tabIndexValue = disabled ? -1 : focusedIndex === index || focusedIndex === -1 && selected ? 0 : -1;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "arc-tabs__item", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                id: tabId,
+                ref: (node) => {
+                  tabRefs.current[index] = node;
+                },
+                type: "button",
+                role: "tab",
+                "aria-selected": selected,
+                "aria-controls": panelId,
+                tabIndex: tabIndexValue,
+                disabled,
+                className: "arc-tabs__tab",
+                onFocus: () => setFocusedIndex(index),
+                onClick: () => selectTab(index),
+                onKeyDown: (event) => handleTabKeyDown(event, index),
+                children: renderTabLabel ? renderTabLabel(item, state) : renderDefaultLabel(item)
+              }
+            ) }, item.id);
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: joinClassNames("arc-tabs__panels", panelClassName), children: [
+      items.length === 0 && emptyState,
+      items.length > 0 && selectedItem === void 0 && emptyState,
+      items.length > 0 && selectedItem !== void 0 && keepMounted ? items.map((item, index) => {
+        const selected = index === selectedIndex;
+        const disabled = Boolean(item.disabled);
+        const tabId = `${baseId}-tab-${index}`;
+        const panelId = `${baseId}-panel-${index}`;
+        const state = { index, selected, disabled };
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "section",
+          {
+            ref: (node) => {
+              if (selected) {
+                activePanelRef.current = node;
+              }
+            },
+            id: panelId,
+            className: "arc-tabs__panel",
+            role: "tabpanel",
+            "aria-labelledby": tabId,
+            "aria-hidden": !selected,
+            hidden: !selected,
+            children: renderPanelContent(item, state)
+          },
+          item.id
+        );
+      }) : null,
+      items.length > 0 && selectedItem !== void 0 && !keepMounted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "section",
+        {
+          ref: (node) => {
+            activePanelRef.current = node;
+          },
+          id: `${baseId}-panel-${selectedIndex}`,
+          className: "arc-tabs__panel",
+          role: "tabpanel",
+          "aria-labelledby": `${baseId}-tab-${selectedIndex}`,
+          "aria-hidden": false,
+          children: renderPanelContent(selectedItem, {
+            index: selectedIndex,
+            selected: true,
+            disabled: Boolean(selectedItem.disabled)
+          })
+        }
+      ) : null
+    ] })
+  ] });
+}
+
+// src/ArcTabsTailwind.tsx
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var joinClassNames2 = (...parts) => parts.filter(Boolean).join(" ");
+var toCssSize2 = (value) => typeof value === "number" ? `${value}px` : value;
+var findFirstEnabledIndex2 = (items) => items.findIndex((item) => !item.disabled);
+var getEnabledIndices2 = (items) => items.reduce((acc, item, index) => {
+  if (!item.disabled) acc.push(index);
+  return acc;
+}, []);
+var getNextEnabledIndex2 = (enabledIndices, currentIndex, direction) => {
+  if (!enabledIndices.length) return -1;
+  const currentPosition = enabledIndices.indexOf(currentIndex);
+  if (currentPosition === -1) {
+    return direction === 1 ? enabledIndices[0] ?? -1 : enabledIndices[enabledIndices.length - 1] ?? -1;
+  }
+  const nextPosition = (currentPosition + direction + enabledIndices.length) % enabledIndices.length;
+  return enabledIndices[nextPosition] ?? -1;
+};
+var sizeClassMap = {
+  sm: "min-h-9 px-3 py-1.5 text-sm",
+  md: "min-h-10 px-4 py-2 text-[0.95rem]",
+  lg: "min-h-12 px-5 py-2.5 text-base"
+};
+function ArcTabsTailwind({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  activationMode = "automatic",
+  keepMounted = true,
+  size = "md",
+  fit = "content",
+  motionPreset = "subtle",
+  motionDuration = 260,
+  ariaLabel = "Tabs",
+  listId,
+  tabsClassName,
+  panelClassName,
+  radius,
+  gap,
+  panelPadding,
+  accentColor,
+  tabBackground,
+  tabHoverBackground,
+  panelBackground,
+  panelBorderColor,
+  emptyState = null,
+  renderTabLabel,
+  renderPanel,
+  className,
+  style,
+  classNames,
+  ...rest
+}) {
+  const reactId = React2.useId();
+  const baseId = React2.useMemo(
+    () => (listId ?? `arc-tabs-${reactId}`).replace(/:/g, ""),
+    [listId, reactId]
+  );
+  const isControlled = value !== void 0;
+  const firstEnabledIndex = React2.useMemo(
+    () => findFirstEnabledIndex2(items),
+    [items]
+  );
+  const [uncontrolledValue, setUncontrolledValue] = React2.useState(() => {
+    const requested = defaultValue;
+    const requestedMatch = items.find(
+      (item) => !item.disabled && item.id === requested
+    );
+    if (requestedMatch) return requestedMatch.id;
+    return firstEnabledIndex >= 0 ? items[firstEnabledIndex]?.id : void 0;
+  });
+  const rawValue = isControlled ? value : uncontrolledValue;
+  const strictSelectedIndex = React2.useMemo(
+    () => items.findIndex((item) => !item.disabled && item.id === rawValue),
+    [items, rawValue]
+  );
+  const selectedIndex = strictSelectedIndex >= 0 ? strictSelectedIndex : firstEnabledIndex;
+  const selectedItem = selectedIndex >= 0 ? items[selectedIndex] : void 0;
+  React2.useEffect(() => {
+    if (isControlled) return;
+    if (strictSelectedIndex !== -1) return;
+    if (firstEnabledIndex !== -1) {
+      const fallbackId = items[firstEnabledIndex]?.id;
+      setUncontrolledValue(fallbackId);
+    } else {
+      setUncontrolledValue(void 0);
+    }
+  }, [isControlled, strictSelectedIndex, firstEnabledIndex, items]);
+  const [focusedIndex, setFocusedIndex] = React2.useState(selectedIndex);
+  React2.useEffect(() => {
+    if (selectedIndex === -1) {
+      setFocusedIndex(-1);
+      return;
+    }
+    if (focusedIndex < 0 || focusedIndex >= items.length || items[focusedIndex]?.disabled) {
+      setFocusedIndex(selectedIndex);
+    }
+  }, [focusedIndex, selectedIndex, items]);
+  const enabledIndices = React2.useMemo(() => getEnabledIndices2(items), [items]);
+  const tabRefs = React2.useRef([]);
+  const listRef = React2.useRef(null);
+  const activePanelRef = React2.useRef(null);
+  const hasMountedRef = React2.useRef(false);
+  const previousSelectedIndexRef = React2.useRef(selectedIndex);
+  const [hasInteracted, setHasInteracted] = React2.useState(false);
+  const [panelDirection, setPanelDirection] = React2.useState("none");
+  const [indicator, setIndicator] = React2.useState({
+    x: 0,
+    width: 0,
+    ready: false
+  });
+  const effectiveMotionDuration = motionPreset === "none" ? 0 : Math.max(0, motionDuration);
+  const showSlidingIndicator = motionPreset === "expressive" && selectedIndex >= 0;
+  React2.useEffect(() => {
+    tabRefs.current = tabRefs.current.slice(0, items.length);
+  }, [items.length]);
+  React2.useEffect(() => {
+    const previous = previousSelectedIndexRef.current;
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      previousSelectedIndexRef.current = selectedIndex;
+      return;
+    }
+    if (previous !== selectedIndex) {
+      setHasInteracted(true);
+      if (selectedIndex >= 0 && previous >= 0) {
+        setPanelDirection(selectedIndex > previous ? "forward" : "backward");
+      }
+    }
+    previousSelectedIndexRef.current = selectedIndex;
+  }, [selectedIndex]);
+  const focusTabIndex = React2.useCallback((index) => {
+    if (index < 0) return;
+    setFocusedIndex(index);
+    tabRefs.current[index]?.focus();
+  }, []);
+  const selectTab = React2.useCallback(
+    (index) => {
+      const item = items[index];
+      if (!item || item.disabled) return;
+      if (index === selectedIndex) {
+        setFocusedIndex(index);
+        return;
+      }
+      setHasInteracted(true);
+      if (selectedIndex >= 0) {
+        setPanelDirection(index > selectedIndex ? "forward" : "backward");
+      }
+      if (!isControlled) {
+        setUncontrolledValue(item.id);
+      }
+      setFocusedIndex(index);
+      onValueChange?.(item.id, item, index);
+    },
+    [items, selectedIndex, isControlled, onValueChange]
+  );
+  const syncIndicator = React2.useCallback(() => {
+    if (!showSlidingIndicator) {
+      setIndicator(
+        (previous) => previous.ready || previous.width !== 0 || previous.x !== 0 ? { x: 0, width: 0, ready: false } : previous
+      );
+      return;
+    }
+    const listElement = listRef.current;
+    const selectedTab = selectedIndex >= 0 ? tabRefs.current[selectedIndex] ?? null : null;
+    if (!listElement || !selectedTab) return;
+    const listRect = listElement.getBoundingClientRect();
+    const tabRect = selectedTab.getBoundingClientRect();
+    const nextX = tabRect.left - listRect.left + listElement.scrollLeft;
+    const nextWidth = tabRect.width;
+    setIndicator((previous) => {
+      const changedX = Math.abs(previous.x - nextX) > 0.5;
+      const changedWidth = Math.abs(previous.width - nextWidth) > 0.5;
+      if (!changedX && !changedWidth && previous.ready) {
+        return previous;
+      }
+      return {
+        x: nextX,
+        width: nextWidth,
+        ready: true
+      };
+    });
+  }, [selectedIndex, showSlidingIndicator]);
+  React2.useEffect(() => {
+    syncIndicator();
+  }, [syncIndicator, items.length, size, fit]);
+  React2.useEffect(() => {
+    if (!showSlidingIndicator) return;
+    const listElement = listRef.current;
+    if (!listElement) return;
+    const onResize = () => syncIndicator();
+    const onScroll = () => syncIndicator();
+    const frame = requestAnimationFrame(syncIndicator);
+    let observer = null;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(() => syncIndicator());
+      observer.observe(listElement);
+      tabRefs.current.forEach((tabElement) => {
+        if (tabElement) observer?.observe(tabElement);
+      });
+    }
+    listElement.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onResize);
+    return () => {
+      cancelAnimationFrame(frame);
+      listElement.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+      observer?.disconnect();
+    };
+  }, [showSlidingIndicator, syncIndicator, items.length]);
+  React2.useEffect(() => {
+    if (!hasInteracted || motionPreset === "none" || effectiveMotionDuration <= 0) {
+      return;
+    }
+    const panelElement = activePanelRef.current;
+    if (!panelElement || typeof panelElement.animate !== "function") {
+      return;
+    }
+    if (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    const offsetX = motionPreset === "expressive" ? panelDirection === "forward" ? 20 : panelDirection === "backward" ? -20 : 0 : 0;
+    const offsetY = motionPreset === "expressive" ? 10 : 6;
+    const startScale = motionPreset === "expressive" ? 0.985 : 0.995;
+    const animation = panelElement.animate(
+      [
+        {
+          opacity: 0,
+          transform: `translate3d(${offsetX}px, ${offsetY}px, 0) scale(${startScale})`,
+          filter: "blur(1px)"
+        },
+        {
+          opacity: 1,
+          transform: "translate3d(0, 0, 0) scale(1)",
+          filter: "blur(0px)"
+        }
+      ],
+      {
+        duration: effectiveMotionDuration,
+        easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+        fill: "both"
+      }
+    );
+    return () => {
+      animation.cancel();
+    };
+  }, [
+    selectedIndex,
+    hasInteracted,
+    motionPreset,
+    panelDirection,
+    effectiveMotionDuration
+  ]);
+  const handleTabKeyDown = React2.useCallback(
+    (event, index) => {
+      if (!enabledIndices.length) return;
+      switch (event.key) {
+        case "ArrowRight": {
+          event.preventDefault();
+          const next = getNextEnabledIndex2(enabledIndices, index, 1);
+          if (next !== -1) {
+            focusTabIndex(next);
+            if (activationMode === "automatic") selectTab(next);
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          event.preventDefault();
+          const previous = getNextEnabledIndex2(enabledIndices, index, -1);
+          if (previous !== -1) {
+            focusTabIndex(previous);
+            if (activationMode === "automatic") selectTab(previous);
+          }
+          break;
+        }
+        case "Home": {
+          event.preventDefault();
+          const first = enabledIndices[0];
+          if (first !== void 0) {
+            focusTabIndex(first);
+            if (activationMode === "automatic") selectTab(first);
+          }
+          break;
+        }
+        case "End": {
+          event.preventDefault();
+          const last = enabledIndices[enabledIndices.length - 1];
+          if (last !== void 0) {
+            focusTabIndex(last);
+            if (activationMode === "automatic") selectTab(last);
+          }
+          break;
+        }
+        case "Enter":
+        case " ":
+        case "Spacebar": {
+          if (activationMode === "manual") {
+            event.preventDefault();
+            selectTab(index);
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    },
+    [activationMode, enabledIndices, focusTabIndex, selectTab]
+  );
+  const themedStyle = React2.useMemo(() => {
+    const cssVars = { ...style };
+    if (radius !== void 0) {
+      cssVars["--arc-radius"] = `${radius}px`;
+    }
+    if (gap !== void 0) {
+      cssVars["--arc-gap"] = `${gap}px`;
+    }
+    const panelPaddingValue = toCssSize2(panelPadding);
+    if (panelPaddingValue !== void 0) {
+      cssVars["--arc-panel-padding"] = panelPaddingValue;
+    }
+    if (accentColor) {
+      cssVars["--arc-accent"] = accentColor;
+    }
+    if (tabBackground) {
+      cssVars["--arc-tab-bg"] = tabBackground;
+    }
+    if (tabHoverBackground) {
+      cssVars["--arc-tab-hover-bg"] = tabHoverBackground;
+    }
+    if (panelBackground) {
+      cssVars["--arc-panel-bg"] = panelBackground;
+    }
+    if (panelBorderColor) {
+      cssVars["--arc-panel-border"] = panelBorderColor;
+    }
+    cssVars["--arc-motion-duration"] = `${effectiveMotionDuration}ms`;
+    return cssVars;
+  }, [
+    style,
+    radius,
+    gap,
+    panelPadding,
+    accentColor,
+    tabBackground,
+    tabHoverBackground,
+    panelBackground,
+    panelBorderColor,
+    effectiveMotionDuration
+  ]);
+  const rootClassName = joinClassNames2(
+    "arc-tabs-tw w-full text-[var(--arc-text)] [--arc-radius:14px] [--arc-gap:10px] [--arc-border-width:1px] [--arc-accent:#5b4ff1] [--arc-text:#171a2c] [--arc-tab-bg:#e7ebff] [--arc-tab-hover-bg:#dce3ff] [--arc-panel-bg:#ffffff] [--arc-panel-border:#cfd6f5] [--arc-panel-padding:1rem] [--arc-motion-duration:260ms] dark:[--arc-text:#edf1ff] dark:[--arc-tab-bg:#2c3555] dark:[--arc-tab-hover-bg:#374268] dark:[--arc-panel-bg:#1c243b] dark:[--arc-panel-border:#46527e]",
+    classNames?.root,
+    className
+  );
+  const listClassName = joinClassNames2(
+    "relative m-0 flex list-none items-end gap-[var(--arc-gap)] overflow-x-auto overflow-y-clip p-0 pb-[var(--arc-gap)] isolate",
+    classNames?.list,
+    tabsClassName
+  );
+  const panelsClassName = joinClassNames2(
+    "relative z-[2] mt-0 rounded-[var(--arc-radius)] border border-[var(--arc-panel-border)] bg-[var(--arc-panel-bg)] p-[var(--arc-panel-padding)] shadow-[0_12px_32px_rgba(15,23,42,0.12)]",
+    classNames?.panels,
+    panelClassName
+  );
+  const renderDefaultLabel = (item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: joinClassNames2("inline-flex leading-none", classNames?.icon), children: item.icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: joinClassNames2("inline-block", classNames?.text), children: item.label }),
+    item.badge !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "span",
+      {
+        className: joinClassNames2(
+          "inline-flex min-w-5 items-center justify-center rounded-full bg-[var(--arc-accent)] px-1.5 py-0.5 text-[0.72em] font-bold text-white/95",
+          classNames?.badge
+        ),
+        children: item.badge
+      }
+    ) : null
+  ] });
+  const renderPanelContent = (item, state) => renderPanel ? renderPanel(item, state) : item.content;
+  const indicatorStyle = React2.useMemo(
+    () => ({
+      "--arc-indicator-x": `${indicator.x}px`,
+      "--arc-indicator-w": `${indicator.width}px`
+    }),
+    [indicator.x, indicator.width]
+  );
+  const indicatorClassName = joinClassNames2(
+    "pointer-events-none absolute left-0 top-0 z-[1] h-[calc(100%-var(--arc-gap))] w-[var(--arc-indicator-w)] translate-x-[var(--arc-indicator-x)] rounded-t-[var(--arc-radius)] rounded-b-none bg-[var(--arc-panel-bg)] opacity-0 [box-shadow:0_calc(var(--arc-gap)+var(--arc-border-width))_0_var(--arc-panel-bg)] transition-[transform,width,opacity] [transition-duration:var(--arc-motion-duration)] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]",
+    indicator.ready && "opacity-100",
+    classNames?.indicator
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: rootClassName, style: themedStyle, "data-slot": "root", ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "ul",
+      {
+        ref: listRef,
+        className: listClassName,
+        role: "tablist",
+        "aria-label": ariaLabel,
+        id: `${baseId}-list`,
+        "data-slot": "list",
+        children: [
+          showSlidingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "li",
+            {
+              "aria-hidden": "true",
+              role: "presentation",
+              className: indicatorClassName,
+              style: indicatorStyle,
+              "data-slot": "indicator"
+            }
+          ) : null,
+          items.map((item, index) => {
+            const selected = index === selectedIndex;
+            const disabled = Boolean(item.disabled);
+            const tabId = `${baseId}-tab-${index}`;
+            const panelId = `${baseId}-panel-${index}`;
+            const state = { index, selected, disabled };
+            const tabIndexValue = disabled ? -1 : focusedIndex === index || focusedIndex === -1 && selected ? 0 : -1;
+            const itemClassName = joinClassNames2(
+              fit === "equal" ? "relative z-[2] min-w-0 flex-1" : "relative z-[2] shrink-0",
+              classNames?.item
+            );
+            const tabClassName = joinClassNames2(
+              "relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--arc-radius)] border border-[var(--arc-panel-border)] bg-[var(--arc-tab-bg)] text-inherit font-semibold leading-none select-none transition-[background-color,color,transform,border-color,box-shadow] [transition-duration:var(--arc-motion-duration)] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--arc-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--arc-panel-bg)] disabled:cursor-not-allowed disabled:opacity-45 before:pointer-events-none before:absolute before:bottom-0 before:left-[calc(var(--arc-border-width)*-1)] before:h-[calc(var(--arc-radius)*2)] before:w-[calc(var(--arc-radius)+var(--arc-border-width))] before:translate-y-[calc(var(--arc-gap)+var(--arc-border-width))] before:bg-transparent before:opacity-0 before:content-[''] before:[box-shadow:0_var(--arc-radius)_0_var(--arc-panel-bg)] before:transition-[opacity,transform] before:[transition-duration:var(--arc-motion-duration)] before:[transition-timing-function:cubic-bezier(0.22,1,0.36,1)] after:pointer-events-none after:absolute after:bottom-0 after:right-[calc(var(--arc-border-width)*-1)] after:h-[calc(var(--arc-radius)*2)] after:w-[calc(var(--arc-radius)+var(--arc-border-width))] after:translate-y-[calc(var(--arc-gap)+var(--arc-border-width))] after:bg-transparent after:opacity-0 after:content-[''] after:[box-shadow:0_var(--arc-radius)_0_var(--arc-panel-bg)] after:transition-[opacity,transform] after:[transition-duration:var(--arc-motion-duration)] after:[transition-timing-function:cubic-bezier(0.22,1,0.36,1)]",
+              sizeClassMap[size],
+              fit === "equal" && "w-full justify-center",
+              selected ? joinClassNames2(
+                "z-[3] rounded-b-none border-[var(--arc-panel-bg)] text-[var(--arc-accent)] before:opacity-100 after:opacity-100 [box-shadow:0_calc(var(--arc-gap)+var(--arc-border-width))_0_var(--arc-panel-bg)]",
+                motionPreset === "expressive" ? "bg-transparent" : "bg-[var(--arc-panel-bg)]"
+              ) : "enabled:hover:bg-[var(--arc-tab-hover-bg)] enabled:hover:translate-y-px enabled:active:translate-y-[2px]",
+              index > 0 && "before:-translate-x-full before:translate-y-[calc(var(--arc-gap)+var(--arc-border-width))] before:rounded-br-[var(--arc-radius)] before:[box-shadow:var(--arc-border-width)_var(--arc-radius)_0_var(--arc-panel-bg)]",
+              index < items.length - 1 && "after:translate-x-full after:translate-y-[calc(var(--arc-gap)+var(--arc-border-width))] after:rounded-bl-[var(--arc-radius)] after:[box-shadow:calc(var(--arc-border-width)*-1)_var(--arc-radius)_0_var(--arc-panel-bg)]",
+              selected ? classNames?.tabSelected : classNames?.tabUnselected,
+              disabled && classNames?.tabDisabled,
+              classNames?.tab
+            );
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { className: itemClassName, role: "presentation", "data-slot": "item", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                id: tabId,
+                ref: (node) => {
+                  tabRefs.current[index] = node;
+                },
+                type: "button",
+                role: "tab",
+                "aria-selected": selected,
+                "aria-controls": panelId,
+                tabIndex: tabIndexValue,
+                disabled,
+                className: tabClassName,
+                onFocus: () => setFocusedIndex(index),
+                onClick: () => selectTab(index),
+                onKeyDown: (event) => handleTabKeyDown(event, index),
+                "data-slot": "tab",
+                children: renderTabLabel ? renderTabLabel(item, state) : renderDefaultLabel(item)
+              }
+            ) }, item.id);
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: panelsClassName, "data-slot": "panels", children: [
+      items.length === 0 && emptyState,
+      items.length > 0 && selectedItem === void 0 && emptyState,
+      items.length > 0 && selectedItem !== void 0 && keepMounted ? items.map((item, index) => {
+        const selected = index === selectedIndex;
+        const disabled = Boolean(item.disabled);
+        const tabId = `${baseId}-tab-${index}`;
+        const panelId = `${baseId}-panel-${index}`;
+        const state = { index, selected, disabled };
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "section",
+          {
+            ref: (node) => {
+              if (selected) {
+                activePanelRef.current = node;
+              }
+            },
+            id: panelId,
+            className: joinClassNames2("outline-none", classNames?.panel),
+            role: "tabpanel",
+            "aria-labelledby": tabId,
+            "aria-hidden": !selected,
+            hidden: !selected,
+            "data-slot": "panel",
+            children: renderPanelContent(item, state)
+          },
+          item.id
+        );
+      }) : null,
+      items.length > 0 && selectedItem !== void 0 && !keepMounted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "section",
+        {
+          ref: (node) => {
+            activePanelRef.current = node;
+          },
+          id: `${baseId}-panel-${selectedIndex}`,
+          className: joinClassNames2("outline-none", classNames?.panel),
+          role: "tabpanel",
+          "aria-labelledby": `${baseId}-tab-${selectedIndex}`,
+          "aria-hidden": false,
+          "data-slot": "panel",
+          children: renderPanelContent(selectedItem, {
+            index: selectedIndex,
+            selected: true,
+            disabled: Boolean(selectedItem.disabled)
+          })
+        }
+      ) : null
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ArcTabs,
+  ArcTabsTailwind
+});
+//# sourceMappingURL=index.cjs.map