@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/chunk-IN3O4R7Q.mjs

@@ -0,0 +1,932 @@
+import {
+  MenuPopper,
+  useMenu
+} from "./chunk-HR3A4H4E.mjs";
+import {
+  default109 as default5,
+  default60 as default4
+} from "./chunk-ZVFYOXDE.mjs";
+import {
+  default as default3
+} from "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2,
+  mergeSx
+} from "./chunk-S6EZVRZC.mjs";
+
+// src/components/elemental/Tab/src/Tab/index.ts
+import { default as default6 } from "@mui/material/Tab";
+import { default as default7 } from "@mui/material/Tabs";
+
+// src/components/elemental/Tab/src/Tab/themes.ts
+var tabTheme = {
+  defaultProps: {
+    disableRipple: true
+  },
+  styleOverrides: {
+    root: ({ theme }) => ({
+      minHeight: 44,
+      minWidth: 0,
+      paddingInline: theme.spacing(1.5),
+      paddingBlock: theme.spacing(1),
+      borderRadius: theme.shape.borderRadius,
+      textTransform: "none",
+      fontWeight: theme.typography.fontWeightMedium,
+      color: "var(--mui-palette-text-secondary)",
+      transition: theme.transitions.create(["color", "background-color"], {
+        duration: theme.transitions.duration.shorter
+      }),
+      "&:hover": {
+        color: "var(--mui-palette-primary-emphasis)",
+        backgroundColor: "color-mix(in lab, var(--mui-palette-primary-emphasis), transparent 92%)"
+      },
+      "&.Mui-selected": {
+        color: "var(--mui-palette-primary-emphasis)",
+        backgroundColor: "transparent"
+      },
+      "&.Mui-selected:hover": {
+        backgroundColor: "color-mix(in lab, var(--mui-palette-primary-emphasis), transparent 94%)"
+      },
+      "&.Mui-disabled": {
+        color: "var(--mui-palette-text-disabled)"
+      }
+    })
+  }
+};
+var tabsTheme = {
+  styleOverrides: {
+    root: {
+      minHeight: 44
+    },
+    list: {
+      gap: 4
+    },
+    indicator: {
+      height: 3,
+      borderRadius: 999,
+      backgroundColor: "var(--mui-palette-primary-emphasis)"
+    },
+    scrollButtons: {
+      color: "var(--mui-palette-text-secondary)",
+      "&.Mui-disabled": {
+        opacity: 0.4
+      }
+    }
+  }
+};
+
+// src/components/elemental/Tab/src/TabPanel/TabPanel.tsx
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo as useMemo2,
+  useRef,
+  useState
+} from "react";
+
+// src/components/elemental/Tab/src/TabPanel/useTabsOverflow.ts
+import { useMemo } from "react";
+function computeVisibleIndexes(itemWidths, moreWidth, availableWidth, selectedIndex, gapPx) {
+  const count = itemWidths.length;
+  if (count === 0) {
+    return { visibleIndexes: [], overflowIndexes: [] };
+  }
+  if (itemWidths.some((width) => width <= 0) || availableWidth <= 0) {
+    return {
+      visibleIndexes: itemWidths.map((_, index) => index),
+      overflowIndexes: []
+    };
+  }
+  const totalNeeded = itemWidths.reduce((sum, width) => sum + width, 0) + Math.max(0, count - 1) * gapPx;
+  if (totalNeeded <= availableWidth) {
+    return {
+      visibleIndexes: itemWidths.map((_, index) => index),
+      overflowIndexes: []
+    };
+  }
+  const reserveMore = moreWidth > 0 ? moreWidth + gapPx : 0;
+  const budget = Math.max(0, availableWidth - reserveMore);
+  const pickPrefix = (maxExclusive, limit) => {
+    const indexes = [];
+    let used = 0;
+    for (let i = 0; i < maxExclusive; i += 1) {
+      const width = itemWidths[i] ?? 0;
+      const nextUsed = used + width + (indexes.length > 0 ? gapPx : 0);
+      if (nextUsed <= limit) {
+        indexes.push(i);
+        used = nextUsed;
+      } else {
+        break;
+      }
+    }
+    return indexes;
+  };
+  let visibleIndexes;
+  if (selectedIndex < 0 || selectedIndex >= count) {
+    visibleIndexes = pickPrefix(count, budget);
+  } else {
+    const selectedWidth = itemWidths[selectedIndex] ?? 0;
+    const prefixBudget = Math.max(
+      0,
+      budget - selectedWidth - (selectedWidth > 0 ? gapPx : 0)
+    );
+    const prefix = pickPrefix(selectedIndex, prefixBudget);
+    let used = prefix.reduce((sum, index, order) => {
+      return sum + (itemWidths[index] ?? 0) + (order > 0 ? gapPx : 0);
+    }, 0) + (prefix.length > 0 ? gapPx : 0) + selectedWidth;
+    const after = [];
+    for (let i = selectedIndex + 1; i < count; i += 1) {
+      const width = itemWidths[i] ?? 0;
+      const nextUsed = used + gapPx + width;
+      if (nextUsed <= budget) {
+        after.push(i);
+        used = nextUsed;
+      } else {
+        break;
+      }
+    }
+    visibleIndexes = [...prefix, selectedIndex, ...after];
+  }
+  if (visibleIndexes.length === 0 && selectedIndex >= 0 && selectedIndex < count) {
+    visibleIndexes = [selectedIndex];
+  }
+  const visibleSet = new Set(visibleIndexes);
+  const overflowIndexes = itemWidths.map((_, index) => index).filter((index) => !visibleSet.has(index));
+  return { visibleIndexes, overflowIndexes };
+}
+function useTabsOverflowSplit(itemWidths, moreWidth, availableWidth, selectedIndex, gapPx) {
+  return useMemo(
+    () => computeVisibleIndexes(
+      itemWidths,
+      moreWidth,
+      availableWidth,
+      selectedIndex,
+      gapPx
+    ),
+    [itemWidths, moreWidth, availableWidth, selectedIndex, gapPx]
+  );
+}
+
+// src/components/elemental/Tab/src/TabPanel/tabPanelVars.ts
+var tabPanelRootSx = {
+  "--tabpanel-accent": "var(--mui-palette-primary-emphasis)",
+  "--tabpanel-track-bg": "color-mix(in lab, var(--tabpanel-accent), transparent 92%)",
+  "--tabpanel-tab-color": "var(--mui-palette-text-secondary)",
+  "--tabpanel-tab-color-active": "var(--tabpanel-accent)",
+  "--tabpanel-tab-color-disabled": "var(--mui-palette-text-disabled)",
+  "--tabpanel-badge-color": "var(--mui-palette-error-main)",
+  "--tabpanel-badge-bg": "color-mix(in lab, var(--mui-palette-error-main), transparent 86%)",
+  "--tabpanel-focus-bg": "color-mix(in lab, var(--mui-palette-background-paper), transparent 78%)",
+  "--tabpanel-focus-bg-dark": "color-mix(in lab, var(--mui-palette-background-paper), transparent 55%)",
+  "--tabpanel-focus-shadow": [
+    "inset 0 1px 1px color-mix(in lab, var(--mui-palette-background-paper), transparent 15%)",
+    "inset 0 -1px 3px color-mix(in lab, var(--tabpanel-accent), transparent 80%)",
+    "inset 0 0 16px color-mix(in lab, var(--mui-palette-background-paper), transparent 50%)",
+    "0 0 0 1px color-mix(in lab, var(--mui-palette-background-paper), transparent 45%)",
+    "0 0 20px color-mix(in lab, var(--tabpanel-accent), transparent 76%)",
+    "0 8px 22px color-mix(in lab, var(--tabpanel-accent), transparent 84%)"
+  ].join(", "),
+  "--tabpanel-focus-shadow-dark": [
+    "inset 0 1px 0 rgba(255, 255, 255, 0.06)",
+    "inset 0 0 0 1px color-mix(in lab, var(--tabpanel-accent), transparent 82%)",
+    "0 0 0 1px rgba(0, 0, 0, 0.35)",
+    "0 4px 12px rgba(0, 0, 0, 0.35)"
+  ].join(", "),
+  "--tabpanel-focus-radius": "10px",
+  "--tabpanel-track-radius": "12px",
+  "--tabpanel-track-pad": "3px",
+  "--tabpanel-item-gap": "1px",
+  "--tabpanel-indicator-ease": "cubic-bezier(0.32, 0.72, 0, 1)",
+  "--tabpanel-indicator-ms": "380ms"
+};
+function tabPanelStyleToCssVars(style) {
+  if (!style) {
+    return {};
+  }
+  const vars = {};
+  if (style.accent != null) vars["--tabpanel-accent"] = style.accent;
+  if (style.trackBg != null) vars["--tabpanel-track-bg"] = style.trackBg;
+  if (style.tabColor != null) vars["--tabpanel-tab-color"] = style.tabColor;
+  if (style.tabColorActive != null) {
+    vars["--tabpanel-tab-color-active"] = style.tabColorActive;
+  }
+  if (style.tabColorDisabled != null) {
+    vars["--tabpanel-tab-color-disabled"] = style.tabColorDisabled;
+  }
+  if (style.badgeColor != null) vars["--tabpanel-badge-color"] = style.badgeColor;
+  if (style.badgeBg != null) vars["--tabpanel-badge-bg"] = style.badgeBg;
+  if (style.focusBg != null) vars["--tabpanel-focus-bg"] = style.focusBg;
+  if (style.focusBgDark != null) {
+    vars["--tabpanel-focus-bg-dark"] = style.focusBgDark;
+  }
+  if (style.focusShadow != null) {
+    vars["--tabpanel-focus-shadow"] = style.focusShadow;
+  }
+  if (style.focusShadowDark != null) {
+    vars["--tabpanel-focus-shadow-dark"] = style.focusShadowDark;
+  }
+  if (style.focusRadius != null) {
+    vars["--tabpanel-focus-radius"] = style.focusRadius;
+  }
+  if (style.trackRadius != null) {
+    vars["--tabpanel-track-radius"] = style.trackRadius;
+  }
+  return vars;
+}
+
+// src/components/elemental/Tab/src/TabPanel/TabPanel.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TRACK_PAD = 3;
+var ITEM_GAP = 1;
+var DEFAULT_TRACK_RADIUS = 12;
+var DEFAULT_FOCUS_RADIUS = 10;
+var INDICATOR_EASE = "cubic-bezier(0.32, 0.72, 0, 1)";
+var INDICATOR_MS = 380;
+function toCssRadius(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+function finishIndicatorAnimation(animation) {
+  try {
+    animation.commitStyles?.();
+  } catch {
+  }
+  animation.cancel();
+}
+function clearIndicatorAnimations(element) {
+  element.getAnimations().forEach((animation) => {
+    finishIndicatorAnimation(animation);
+  });
+}
+function resolveSelectedId(items, value, internal) {
+  const candidate = value ?? internal;
+  if (candidate && items.some((item) => item.id === candidate && !item.disabled)) {
+    return candidate;
+  }
+  return items.find((item) => !item.disabled)?.id;
+}
+function TabItemContent({
+  item,
+  showLabels,
+  active,
+  endAdornment
+}) {
+  const showLabel = showLabels || !item.icon;
+  const badgeLabel = item.badge == null ? null : typeof item.badge === "number" && item.badge > 99 ? "99+" : String(item.badge);
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      sx: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5,
+        px: showLabels ? 1.15 : 0.9,
+        py: 0.5,
+        minHeight: 28,
+        pr: endAdornment ? 0.75 : void 0
+      },
+      children: [
+        item.icon ? /* @__PURE__ */ jsx(
+          default2,
+          {
+            component: "span",
+            sx: {
+              display: "inline-flex",
+              color: "inherit",
+              lineHeight: 0,
+              opacity: active ? 1 : 0.88,
+              transition: "opacity var(--tabpanel-indicator-ms) var(--tabpanel-indicator-ease)",
+              "& > *": { fontSize: 16 }
+            },
+            children: item.icon
+          }
+        ) : null,
+        showLabel ? /* @__PURE__ */ jsx(
+          default3,
+          {
+            component: "span",
+            sx: {
+              m: 0,
+              fontSize: "0.75rem",
+              letterSpacing: "0.01em",
+              fontWeight: active ? 600 : 500,
+              color: "inherit",
+              lineHeight: 1.15,
+              whiteSpace: "nowrap"
+            },
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsx(
+          default3,
+          {
+            component: "span",
+            sx: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              overflow: "hidden",
+              clip: "rect(0 0 0 0)"
+            },
+            children: item.label
+          }
+        ),
+        endAdornment,
+        badgeLabel != null ? /* @__PURE__ */ jsx(
+          default2,
+          {
+            component: "span",
+            "aria-label": `${item.badge} notifications`,
+            sx: {
+              position: "absolute",
+              top: 1,
+              right: endAdornment ? 10 : 1,
+              zIndex: 1,
+              pointerEvents: "none",
+              minWidth: 12,
+              height: 12,
+              px: 0.3,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: 999,
+              bgcolor: "var(--tabpanel-badge-bg)",
+              color: "var(--tabpanel-badge-color)",
+              fontSize: 8,
+              fontWeight: 700,
+              lineHeight: 1
+            },
+            children: badgeLabel
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function MoreTriggerContent({
+  showLabels,
+  open
+}) {
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      sx: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.35,
+        px: showLabels ? 1.15 : 0.9,
+        py: 0.5,
+        minHeight: 28
+      },
+      children: [
+        /* @__PURE__ */ jsx(default4, { sx: { fontSize: 16 } }),
+        showLabels ? /* @__PURE__ */ jsx(
+          default3,
+          {
+            component: "span",
+            sx: {
+              m: 0,
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              color: "inherit",
+              lineHeight: 1.15,
+              whiteSpace: "nowrap"
+            },
+            children: "More"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          default5,
+          {
+            sx: {
+              fontSize: 14,
+              opacity: 0.75,
+              transition: "transform 180ms ease",
+              transform: open ? "rotate(180deg)" : "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function TabPanel({
+  items,
+  value,
+  defaultValue,
+  onChange,
+  showLabels = true,
+  focusRadius = DEFAULT_FOCUS_RADIUS,
+  trackRadius = DEFAULT_TRACK_RADIUS,
+  sx,
+  className,
+  slotProps
+}) {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    () => defaultValue ?? items.find((item) => !item.disabled)?.id
+  );
+  const selectedId = resolveSelectedId(items, value, internalValue);
+  const select = useCallback(
+    (id) => {
+      const item = items.find((entry) => entry.id === id);
+      if (!item || item.disabled) {
+        return;
+      }
+      if (!isControlled) {
+        setInternalValue(id);
+      }
+      onChange?.(id);
+    },
+    [isControlled, items, onChange]
+  );
+  const rootRef = useRef(null);
+  const stripRef = useRef(null);
+  const measureRef = useRef(null);
+  const moreMeasureRef = useRef(null);
+  const indicatorRef = useRef(null);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const indicatorRectRef = useRef({ top: 0, left: 0, width: 0, height: 0 });
+  const indicatorMountedRef = useRef(false);
+  const indicatorAnimatingRef = useRef(false);
+  const [availableWidth, setAvailableWidth] = useState(0);
+  const [itemWidths, setItemWidths] = useState([]);
+  const [moreWidth, setMoreWidth] = useState(0);
+  const selectedIndex = useMemo2(
+    () => items.findIndex((item) => item.id === selectedId),
+    [items, selectedId]
+  );
+  const { visibleIndexes, overflowIndexes } = useTabsOverflowSplit(
+    itemWidths,
+    moreWidth,
+    availableWidth,
+    selectedIndex,
+    ITEM_GAP
+  );
+  const visibleItems = useMemo2(
+    () => visibleIndexes.map((index) => items[index]).filter(Boolean),
+    [visibleIndexes, items]
+  );
+  const overflowItems = useMemo2(
+    () => overflowIndexes.map((index) => items[index]).filter(Boolean),
+    [overflowIndexes, items]
+  );
+  const hasOverflow = overflowItems.length > 0;
+  const rootCssVars = useMemo2(
+    () => ({
+      ...tabPanelStyleToCssVars(slotProps?.root?.style),
+      "--tabpanel-focus-radius": toCssRadius(focusRadius),
+      "--tabpanel-track-radius": toCssRadius(trackRadius),
+      // Prop radii win unless style explicitly set them.
+      ...slotProps?.root?.style?.focusRadius != null ? { "--tabpanel-focus-radius": slotProps.root.style.focusRadius } : null,
+      ...slotProps?.root?.style?.trackRadius != null ? { "--tabpanel-track-radius": slotProps.root.style.trackRadius } : null
+    }),
+    [focusRadius, trackRadius, slotProps?.root?.style]
+  );
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    const measure = measureRef.current;
+    const moreMeasure = moreMeasureRef.current;
+    if (!root || !measure || !moreMeasure) {
+      return;
+    }
+    const update = () => {
+      setAvailableWidth(Math.max(0, root.clientWidth - TRACK_PAD * 2));
+      const widths = Array.from(
+        measure.querySelectorAll("[data-tab-measure]")
+      ).map((node) => node.getBoundingClientRect().width);
+      setItemWidths((prev) => {
+        if (prev.length === widths.length && prev.every((width, index) => Math.abs(width - (widths[index] ?? 0)) < 0.5)) {
+          return prev;
+        }
+        return widths;
+      });
+      const nextMore = Math.max(
+        moreMeasure.scrollWidth,
+        moreMeasure.getBoundingClientRect().width
+      );
+      setMoreWidth((prev) => Math.abs(prev - nextMore) < 0.5 ? prev : nextMore);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(root);
+    observer.observe(measure);
+    observer.observe(moreMeasure);
+    return () => observer.disconnect();
+  }, [items, showLabels]);
+  useLayoutEffect(() => {
+    const strip = stripRef.current;
+    const indicator = indicatorRef.current;
+    if (!strip || !indicator || !selectedId) {
+      return;
+    }
+    const slideToActive = () => {
+      const activeEl = itemRefs.current.get(selectedId);
+      if (!activeEl) {
+        return;
+      }
+      const stripBox = strip.getBoundingClientRect();
+      const itemBox = activeEl.getBoundingClientRect();
+      const next = {
+        top: itemBox.top - stripBox.top,
+        left: itemBox.left - stripBox.left,
+        width: itemBox.width,
+        height: itemBox.height
+      };
+      const applyRect = (rect) => {
+        indicator.style.transform = `translate3d(${rect.left}px, ${rect.top}px, 0)`;
+        indicator.style.width = `${rect.width}px`;
+        indicator.style.height = `${rect.height}px`;
+      };
+      if (!indicatorMountedRef.current || indicatorRectRef.current.width <= 0) {
+        clearIndicatorAnimations(indicator);
+        indicator.style.transition = "none";
+        applyRect(next);
+        indicator.style.opacity = "1";
+        indicatorRectRef.current = next;
+        indicatorMountedRef.current = true;
+        return;
+      }
+      clearIndicatorAnimations(indicator);
+      const liveBox = indicator.getBoundingClientRect();
+      const prev = {
+        top: liveBox.top - stripBox.top,
+        left: liveBox.left - stripBox.left,
+        width: liveBox.width,
+        height: liveBox.height
+      };
+      const same = Math.abs(prev.left - next.left) < 0.5 && Math.abs(prev.top - next.top) < 0.5 && Math.abs(prev.width - next.width) < 0.5 && Math.abs(prev.height - next.height) < 0.5;
+      if (same) {
+        applyRect(next);
+        indicatorRectRef.current = next;
+        return;
+      }
+      const bridgeLeft = Math.min(prev.left, next.left);
+      const bridgeRight = Math.max(prev.left + prev.width, next.left + next.width);
+      const bridge = {
+        left: bridgeLeft,
+        top: next.top,
+        width: Math.max(bridgeRight - bridgeLeft, next.width),
+        height: next.height
+      };
+      indicator.style.transition = "none";
+      applyRect(prev);
+      indicator.style.opacity = "1";
+      indicatorAnimatingRef.current = true;
+      const animation = indicator.animate(
+        [
+          {
+            transform: `translate3d(${prev.left}px, ${prev.top}px, 0)`,
+            width: `${prev.width}px`,
+            height: `${prev.height}px`
+          },
+          {
+            transform: `translate3d(${bridge.left}px, ${bridge.top}px, 0)`,
+            width: `${bridge.width}px`,
+            height: `${bridge.height}px`,
+            offset: 0.4
+          },
+          {
+            transform: `translate3d(${next.left}px, ${next.top}px, 0)`,
+            width: `${next.width}px`,
+            height: `${next.height}px`
+          }
+        ],
+        {
+          duration: INDICATOR_MS,
+          easing: INDICATOR_EASE,
+          fill: "forwards"
+        }
+      );
+      animation.onfinish = () => {
+        finishIndicatorAnimation(animation);
+        applyRect(next);
+        indicatorRectRef.current = next;
+        indicatorAnimatingRef.current = false;
+      };
+      animation.oncancel = () => {
+        indicatorAnimatingRef.current = false;
+      };
+      indicatorRectRef.current = next;
+    };
+    slideToActive();
+    const observer = new ResizeObserver(() => {
+      if (indicatorAnimatingRef.current) {
+        return;
+      }
+      const activeEl = itemRefs.current.get(selectedId);
+      const ind = indicatorRef.current;
+      if (!activeEl || !ind || !stripRef.current) {
+        return;
+      }
+      const stripBox = stripRef.current.getBoundingClientRect();
+      const itemBox = activeEl.getBoundingClientRect();
+      const next = {
+        top: itemBox.top - stripBox.top,
+        left: itemBox.left - stripBox.left,
+        width: itemBox.width,
+        height: itemBox.height
+      };
+      clearIndicatorAnimations(ind);
+      ind.style.transition = "none";
+      ind.style.transform = `translate3d(${next.left}px, ${next.top}px, 0)`;
+      ind.style.width = `${next.width}px`;
+      ind.style.height = `${next.height}px`;
+      ind.style.opacity = "1";
+      indicatorRectRef.current = next;
+      indicatorMountedRef.current = true;
+    });
+    observer.observe(strip);
+    return () => observer.disconnect();
+  }, [visibleIndexes, overflowIndexes, selectedId, items, showLabels, focusRadius]);
+  useEffect(() => {
+    if (isControlled) {
+      return;
+    }
+    const next = resolveSelectedId(items, void 0, internalValue);
+    if (next && next !== internalValue) {
+      setInternalValue(next);
+    }
+  }, [items, isControlled, internalValue]);
+  const menu = useMenu({
+    onItemClickClientArg: ({ closeHandler }) => {
+      closeHandler?.();
+    }
+  });
+  const menuOptions = useMemo2(
+    () => overflowItems.map((item) => ({
+      id: item.id,
+      label: item.label,
+      icon: item.icon ? item.icon : void 0,
+      onClick: () => {
+        if (!item.disabled) {
+          select(item.id);
+        }
+      }
+    })),
+    [overflowItems, select]
+  );
+  const selectedItem = items.find((item) => item.id === selectedId);
+  const stripSx = {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    flexWrap: "nowrap",
+    alignSelf: "flex-start",
+    maxWidth: "100%",
+    gap: "var(--tabpanel-item-gap)",
+    p: "var(--tabpanel-track-pad)",
+    borderRadius: "var(--tabpanel-track-radius)",
+    border: "none",
+    bgcolor: "var(--tabpanel-track-bg)"
+  };
+  const tabButtonSx = {
+    position: "relative",
+    zIndex: 1,
+    appearance: "none",
+    border: "none",
+    background: "transparent",
+    p: 0,
+    m: 0,
+    borderRadius: "var(--tabpanel-focus-radius)",
+    color: "var(--tabpanel-tab-color)",
+    transition: "color var(--tabpanel-indicator-ms) var(--tabpanel-indicator-ease)",
+    flexShrink: 0,
+    "&:hover": {
+      color: "var(--tabpanel-tab-color-active)"
+    },
+    "&:focus-visible": {
+      outline: "2px solid var(--tabpanel-accent)",
+      outlineOffset: 3
+    },
+    '&[aria-selected="true"]': {
+      color: "var(--tabpanel-tab-color-active)",
+      "&:hover": {
+        color: "var(--tabpanel-tab-color-active)"
+      }
+    }
+  };
+  const setItemRef = (id) => (node) => {
+    if (node) {
+      itemRefs.current.set(id, node);
+    } else {
+      itemRefs.current.delete(id);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      ref: rootRef,
+      className,
+      sx: mergeSx(
+        {
+          ...tabPanelRootSx,
+          ...rootCssVars,
+          width: "100%",
+          minWidth: 0,
+          maxWidth: "100%",
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "stretch",
+          gap: 1.5
+        },
+        slotProps?.root?.sx,
+        sx
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          default2,
+          {
+            ref: measureRef,
+            "aria-hidden": true,
+            sx: {
+              position: "fixed",
+              left: -99999,
+              top: 0,
+              visibility: "hidden",
+              pointerEvents: "none",
+              display: "inline-flex",
+              alignItems: "center",
+              flexWrap: "nowrap",
+              gap: "var(--tabpanel-item-gap)",
+              width: "max-content",
+              maxWidth: "none"
+            },
+            children: items.map((item) => /* @__PURE__ */ jsx(
+              default2,
+              {
+                "data-tab-measure": true,
+                sx: { display: "inline-flex", flexShrink: 0 },
+                children: /* @__PURE__ */ jsx(TabItemContent, { item, showLabels, active: false })
+              },
+              `measure-${item.id}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          default2,
+          {
+            ref: moreMeasureRef,
+            "aria-hidden": true,
+            sx: {
+              position: "fixed",
+              left: -99999,
+              top: 0,
+              visibility: "hidden",
+              pointerEvents: "none",
+              display: "inline-flex",
+              width: "max-content"
+            },
+            children: /* @__PURE__ */ jsx(MoreTriggerContent, { showLabels, open: false })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          default2,
+          {
+            ref: stripRef,
+            role: "tablist",
+            sx: mergeSx(
+              stripSx,
+              hasOverflow ? slotProps?.menu?.sx ?? slotProps?.strip?.sx : slotProps?.strip?.sx
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                default2,
+                {
+                  ref: indicatorRef,
+                  "aria-hidden": true,
+                  sx: mergeSx(
+                    {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: 0,
+                      height: 0,
+                      borderRadius: "var(--tabpanel-focus-radius)",
+                      border: "none",
+                      bgcolor: "var(--tabpanel-focus-bg)",
+                      backdropFilter: "blur(12px) saturate(1.2)",
+                      WebkitBackdropFilter: "blur(12px) saturate(1.2)",
+                      boxShadow: "var(--tabpanel-focus-shadow)",
+                      opacity: 0,
+                      pointerEvents: "none",
+                      zIndex: 0,
+                      // Geometry (transform / width / height) is JS + WAAPI only —
+                      // never set transform here or Emotion fights fill: 'forwards'.
+                      willChange: "transform, width, height",
+                      "[color-scheme=dark] &": {
+                        bgcolor: "var(--tabpanel-focus-bg-dark)",
+                        backdropFilter: "blur(8px) saturate(1.05)",
+                        WebkitBackdropFilter: "blur(8px) saturate(1.05)",
+                        boxShadow: "var(--tabpanel-focus-shadow-dark)"
+                      }
+                    },
+                    slotProps?.indicator?.sx
+                  )
+                }
+              ),
+              visibleItems.map((item) => {
+                const active = item.id === selectedId;
+                return /* @__PURE__ */ jsx(
+                  default2,
+                  {
+                    component: "button",
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": active,
+                    disabled: item.disabled,
+                    ref: setItemRef(item.id),
+                    onClick: () => select(item.id),
+                    sx: mergeSx(
+                      {
+                        ...tabButtonSx,
+                        cursor: item.disabled ? "not-allowed" : "pointer",
+                        opacity: item.disabled ? 0.4 : 1,
+                        ...item.disabled ? {
+                          color: "var(--tabpanel-tab-color-disabled)",
+                          "&:hover": {
+                            color: "var(--tabpanel-tab-color-disabled)"
+                          }
+                        } : null
+                      },
+                      slotProps?.tab?.sx
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      TabItemContent,
+                      {
+                        item,
+                        showLabels,
+                        active
+                      }
+                    )
+                  },
+                  item.id
+                );
+              }),
+              hasOverflow ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  default2,
+                  {
+                    component: "button",
+                    type: "button",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": Boolean(menu.anchorEl),
+                    "aria-label": `More tabs, ${overflowItems.length} hidden`,
+                    onClick: menu.onTriggerClickHandler,
+                    sx: mergeSx(
+                      {
+                        ...tabButtonSx,
+                        cursor: "pointer"
+                      },
+                      slotProps?.tab?.sx
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      MoreTriggerContent,
+                      {
+                        showLabels,
+                        open: Boolean(menu.anchorEl)
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MenuPopper,
+                  {
+                    placement: "bottom-end",
+                    options: menuOptions,
+                    openMenuProps: {
+                      ...menu,
+                      initSelected: selectedId ? [selectedId] : []
+                    }
+                  }
+                )
+              ] }) : null
+            ]
+          }
+        ),
+        selectedItem?.content != null ? /* @__PURE__ */ jsx(
+          default2,
+          {
+            role: "tabpanel",
+            sx: mergeSx({ minWidth: 0 }, slotProps?.panel?.sx),
+            children: selectedItem.content
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export {
+  tabTheme,
+  tabsTheme,
+  default6 as default,
+  default7 as default2,
+  tabPanelRootSx,
+  tabPanelStyleToCssVars,
+  TabPanel
+};
+//# sourceMappingURL=chunk-IN3O4R7Q.mjs.map