@spear-ai/spectral 1.13.1 → 1.14.2

package/dist/Tabs/TabsBase.js

@@ -1,106 +1,142 @@
-'use client'
-import '../styles/main.css'
-import { t as e } from "../twUtils-BpqlKSeB.js";
-import { t } from "../proxy-BFVscmYQ.js";
-import { t as n } from "../AnimatePresence-Bz_JZ2ah.js";
-import { t as r } from "../dist-Cc8NfAO6.js";
-import { calculateIndicatorStyle as i, debounce as a, generateId as o, prefersReducedMotion as s } from "./tabsUtils.js";
-import { createContext as c, useCallback as l, useContext as u, useEffect as d, useId as f, useMemo as p, useRef as m, useState as h } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+'use client';
+import { cn } from "../utils/twUtils.js";
+import { calculateIndicatorStyle, debounce, generateId, prefersReducedMotion } from "./tabsUtils.js";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import useMeasure from "react-use-measure";
+
 //#region src/components/Tabs/TabsBase.tsx
-var v = c(null), y = (e = "Tabs") => {
-	let t = u(v);
-	if (t === null) throw Error(`${e} components must be used within a Tabs.Root`);
-	return t;
-}, b = function({ ref: e, activationMode: t = "automatic", children: n, defaultValue: r, dir: i = "ltr", disabled: a = !1, onValueChange: s, orientation: c = "horizontal", rightSlot: u, value: d, ...p }) {
-	let [m, _] = h(r ?? ""), y = f() ?? o("tabs"), b = d !== void 0, x = b ? d : m, S = {
-		activationMode: t,
-		baseId: y,
-		dir: i,
-		disabled: a,
-		onValueChange: l((e) => {
-			a || (b || _(e), s?.(e));
+const TabsContext = createContext(null);
+const useTabsContext = (componentName = "Tabs") => {
+	const context = useContext(TabsContext);
+	if (context === null) throw new Error(`${componentName} components must be used within a Tabs.Root`);
+	return context;
+};
+const TabsBase = function Tabs({ ref, activationMode = "automatic", children, defaultValue, dir = "ltr", disabled = false, onValueChange, orientation = "horizontal", rightSlot, value: controlledValue, ...props }) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+	const baseId = useId() ?? generateId("tabs");
+	const isControlled = controlledValue !== void 0;
+	const value = isControlled ? controlledValue : uncontrolledValue;
+	const contextValue = {
+		activationMode,
+		baseId,
+		dir,
+		disabled,
+		onValueChange: useCallback((newValue) => {
+			if (disabled) return;
+			if (!isControlled) setUncontrolledValue(newValue);
+			onValueChange?.(newValue);
 		}, [
-			b,
-			s,
-			a
+			isControlled,
+			onValueChange,
+			disabled
 		]),
-		orientation: c,
-		rightSlot: u,
-		value: x
+		orientation,
+		rightSlot,
+		value
 	};
-	return /* @__PURE__ */ g(v.Provider, {
-		value: S,
-		children: /* @__PURE__ */ g("div", {
-			ref: e,
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
 			"data-testid": "spectral-tabs",
-			"data-orientation": c,
-			"data-disabled": a ? "" : void 0,
-			dir: i,
-			...p,
-			children: n
+			"data-orientation": orientation,
+			"data-disabled": disabled ? "" : void 0,
+			dir,
+			...props,
+			children
 		})
 	});
-}, x = function({ ref: n, children: r, className: o, loop: c = !0, rightSlot: u, ...f }) {
-	let { orientation: v, disabled: b, value: x } = y("TabsList"), [S, C] = h(null), w = m(null), T = s(), E = l(() => {
-		let e = i(w);
-		(e.width > 0 || e.height > 0) && C(e);
-	}, []), D = p(() => a(E, 16), [E]);
-	d(() => {
-		if (E(), typeof ResizeObserver > "u" || typeof MutationObserver > "u") return;
-		let e = new ResizeObserver(D), t = new MutationObserver(D), n = w.current;
-		return n && (e.observe(n), t.observe(n, {
-			attributes: !0,
-			childList: !0,
-			subtree: !0
-		})), () => {
-			e.disconnect(), t.disconnect(), D.cancel();
+};
+const TabsList = function TabsList({ ref, children, className, loop = true, rightSlot, ...props }) {
+	const { orientation, disabled, value } = useTabsContext("TabsList");
+	const [indicatorStyle, setIndicatorStyle] = useState(null);
+	const tabsListRef = useRef(null);
+	const reducedMotion = prefersReducedMotion();
+	const calculatePosition = useCallback(() => {
+		const newStyle = calculateIndicatorStyle(tabsListRef);
+		if (newStyle.width > 0 || newStyle.height > 0) setIndicatorStyle(newStyle);
+	}, []);
+	const debouncedCalculatePosition = useMemo(() => debounce(calculatePosition, 16), [calculatePosition]);
+	useEffect(() => {
+		calculatePosition();
+		if (typeof ResizeObserver === "undefined" || typeof MutationObserver === "undefined") return;
+		const resizeObserver = new ResizeObserver(debouncedCalculatePosition);
+		const mutationObserver = new MutationObserver(debouncedCalculatePosition);
+		const currentRef = tabsListRef.current;
+		if (currentRef) {
+			resizeObserver.observe(currentRef);
+			mutationObserver.observe(currentRef, {
+				attributes: true,
+				childList: true,
+				subtree: true
+			});
+		}
+		return () => {
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+			debouncedCalculatePosition.cancel();
 		};
-	}, [E, D]), d(() => {
-		E();
-	}, [x, E]);
-	let O = l((e) => {
-		if (b) return;
-		let t = Array.from(w.current?.querySelectorAll("[role='tab']:not([disabled]):not([aria-disabled='true'])") ?? []);
-		if (t.length === 0) return;
-		let n = t.findIndex((e) => e === document.activeElement);
-		if (n === -1) return;
-		let r = null, { key: i, ctrlKey: a, metaKey: o } = e, s = a || o;
-		v === "horizontal" ? i === "ArrowLeft" || i === "ArrowUp" && s ? r = n > 0 ? n - 1 : c ? t.length - 1 : n : (i === "ArrowRight" || i === "ArrowDown" && s) && (r = n < t.length - 1 ? n + 1 : c ? 0 : n) : i === "ArrowUp" || i === "ArrowLeft" && s ? r = n > 0 ? n - 1 : c ? t.length - 1 : n : (i === "ArrowDown" || i === "ArrowRight" && s) && (r = n < t.length - 1 ? n + 1 : c ? 0 : n), i === "Home" ? r = 0 : i === "End" && (r = t.length - 1), r !== null && r !== n && (e.preventDefault(), e.stopPropagation(), t[r]?.focus());
+	}, [calculatePosition, debouncedCalculatePosition]);
+	useEffect(() => {
+		calculatePosition();
+	}, [value, calculatePosition]);
+	const handleKeyDown = useCallback((event) => {
+		if (disabled) return;
+		const triggers = Array.from(tabsListRef.current?.querySelectorAll(`[role='tab']:not([disabled]):not([aria-disabled='true'])`) ?? []);
+		if (triggers.length === 0) return;
+		const currentIndex = triggers.findIndex((trigger) => trigger === document.activeElement);
+		if (currentIndex === -1) return;
+		let nextIndex = null;
+		const { key, ctrlKey, metaKey } = event;
+		const isModified = ctrlKey || metaKey;
+		if (orientation === "horizontal") {
+			if (key === "ArrowLeft" || key === "ArrowUp" && isModified) nextIndex = currentIndex > 0 ? currentIndex - 1 : loop ? triggers.length - 1 : currentIndex;
+			else if (key === "ArrowRight" || key === "ArrowDown" && isModified) nextIndex = currentIndex < triggers.length - 1 ? currentIndex + 1 : loop ? 0 : currentIndex;
+		} else if (key === "ArrowUp" || key === "ArrowLeft" && isModified) nextIndex = currentIndex > 0 ? currentIndex - 1 : loop ? triggers.length - 1 : currentIndex;
+		else if (key === "ArrowDown" || key === "ArrowRight" && isModified) nextIndex = currentIndex < triggers.length - 1 ? currentIndex + 1 : loop ? 0 : currentIndex;
+		if (key === "Home") nextIndex = 0;
+		else if (key === "End") nextIndex = triggers.length - 1;
+		if (nextIndex !== null && nextIndex !== currentIndex) {
+			event.preventDefault();
+			event.stopPropagation();
+			triggers[nextIndex]?.focus();
+		}
 	}, [
-		b,
-		v,
-		c
+		disabled,
+		orientation,
+		loop
 	]);
-	return /* @__PURE__ */ _("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
-		ref: w,
-		children: [/* @__PURE__ */ _("div", {
-			ref: n,
+		ref: tabsListRef,
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref,
 			role: "tablist",
 			"data-testid": "spectral-tabs-list",
-			"aria-orientation": v,
-			"aria-disabled": b,
-			className: e("tabs-list flex", v === "horizontal" && "items-center justify-between", v === "vertical" && "flex-col", o),
-			onKeyDown: O,
-			...f,
-			children: [/* @__PURE__ */ g("div", {
-				className: e("flex", v === "horizontal" && "items-center", v === "vertical" && "flex-col"),
-				children: r
-			}), u && /* @__PURE__ */ g("div", {
+			"aria-orientation": orientation,
+			"aria-disabled": disabled,
+			className: cn("tabs-list flex", orientation === "horizontal" && "items-center justify-between", orientation === "vertical" && "flex-col", className),
+			onKeyDown: handleKeyDown,
+			...props,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("flex", orientation === "horizontal" && "items-center", orientation === "vertical" && "flex-col"),
+				children
+			}), rightSlot && /* @__PURE__ */ jsx("div", {
 				className: "z-10 flex items-center",
-				children: u
+				children: rightSlot
 			})]
-		}), S && /* @__PURE__ */ g(t.div, {
-			className: e("top-0 left-0 pointer-events-none absolute will-change-transform select-none", S.orientation === "horizontal" && !S.isEnclosed && "after:bottom-0 after:left-0 bottom-px z-10 after:absolute after:w-full after:rounded-t-[0.3rem] after:border-b-[0.3rem] after:border-tabs-indicator after:content-['']", S.orientation === "vertical" && !S.isEnclosed && "after:right-0 after:top-0 after:w-1 right-px z-10 after:absolute after:h-full after:rounded-l-[0.3rem] after:border-r-[0.3rem] after:border-tabs-indicator after:content-['']", S.orientation === "horizontal" && S.isEnclosed && "rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator", S.orientation === "vertical" && S.isEnclosed && "rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator"),
-			initial: !1,
+		}), indicatorStyle && /* @__PURE__ */ jsx(motion.div, {
+			className: cn("top-0 left-0 pointer-events-none absolute will-change-transform select-none", indicatorStyle.orientation === "horizontal" && !indicatorStyle.isEnclosed && `after:bottom-0 after:left-0 bottom-px z-10 after:absolute after:w-full after:rounded-t-[0.3rem] after:border-b-[0.3rem] after:border-tabs-indicator after:content-['']`, indicatorStyle.orientation === "vertical" && !indicatorStyle.isEnclosed && `after:right-0 after:top-0 after:w-1 right-px z-10 after:absolute after:h-full after:rounded-l-[0.3rem] after:border-r-[0.3rem] after:border-tabs-indicator after:content-['']`, indicatorStyle.orientation === "horizontal" && indicatorStyle.isEnclosed && "rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator", indicatorStyle.orientation === "vertical" && indicatorStyle.isEnclosed && "rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator"),
+			initial: false,
 			animate: {
-				x: S.left,
-				y: S.isEnclosed ? S.top + S.height * .1 : S.top,
-				width: S.width,
-				height: S.isEnclosed ? S.orientation === "vertical" ? 40 : S.height * .8 : S.height
+				x: indicatorStyle.left,
+				y: indicatorStyle.isEnclosed ? indicatorStyle.top + indicatorStyle.height * .1 : indicatorStyle.top,
+				width: indicatorStyle.width,
+				height: indicatorStyle.isEnclosed ? indicatorStyle.orientation === "vertical" ? 40 : indicatorStyle.height * .8 : indicatorStyle.height
 			},
-			transition: T ? { duration: 0 } : {
+			transition: reducedMotion ? { duration: 0 } : {
 				x: {
 					type: "spring",
 					stiffness: 500,
@@ -129,65 +165,83 @@ var v = c(null), y = (e = "Tabs") => {
 			"aria-hidden": "true"
 		})]
 	});
-}, S = function({ ref: t, className: n, value: r, onClick: i, onKeyDown: a, disabled: o = !1, ...s }) {
-	let { value: c, onValueChange: u, activationMode: d, disabled: f, baseId: p } = y("TabsTrigger"), m = `${p}-trigger-${r}`, h = `${p}-content-${r}`, _ = c === r, v = f || o, b = l((e) => {
-		if (v) {
-			e.preventDefault();
+};
+const TabsTrigger = function TabsTrigger({ ref, className, value: triggerValue, onClick, onKeyDown, disabled: triggerDisabled = false, ...props }) {
+	const { value, onValueChange, activationMode, disabled: contextDisabled, baseId } = useTabsContext("TabsTrigger");
+	const triggerId = `${baseId}-trigger-${triggerValue}`;
+	const contentId = `${baseId}-content-${triggerValue}`;
+	const isActive = value === triggerValue;
+	const isDisabled = contextDisabled || triggerDisabled;
+	const handleClick = useCallback((event) => {
+		if (isDisabled) {
+			event.preventDefault();
 			return;
 		}
-		u(r), i?.(e);
+		onValueChange(triggerValue);
+		onClick?.(event);
 	}, [
-		r,
-		u,
-		i,
-		v
-	]), x = l((e) => {
-		if (v) {
-			e.preventDefault();
+		triggerValue,
+		onValueChange,
+		onClick,
+		isDisabled
+	]);
+	const handleKeyDown = useCallback((event) => {
+		if (isDisabled) {
+			event.preventDefault();
 			return;
 		}
-		let { key: t } = e;
-		(t === "Enter" || t === " ") && (e.preventDefault(), e.stopPropagation(), u(r)), a?.(e);
+		const { key } = event;
+		if (key === "Enter" || key === " ") {
+			event.preventDefault();
+			event.stopPropagation();
+			onValueChange(triggerValue);
+		}
+		onKeyDown?.(event);
 	}, [
-		r,
-		u,
-		a,
-		v
-	]), S = l(() => {
-		v || d === "automatic" && u(r);
+		triggerValue,
+		onValueChange,
+		onKeyDown,
+		isDisabled
+	]);
+	const handleFocus = useCallback(() => {
+		if (isDisabled) return;
+		if (activationMode === "automatic") onValueChange(triggerValue);
 	}, [
-		d,
-		u,
-		r,
-		v
+		activationMode,
+		onValueChange,
+		triggerValue,
+		isDisabled
 	]);
-	return /* @__PURE__ */ g("button", {
-		"aria-controls": h,
-		"aria-disabled": v,
-		"aria-selected": _,
-		className: e("tabs-trigger z-10 hover:cursor-pointer focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", n),
-		"data-disabled": v ? "" : void 0,
-		"data-state": _ ? "active" : "inactive",
+	return /* @__PURE__ */ jsx("button", {
+		"aria-controls": contentId,
+		"aria-disabled": isDisabled,
+		"aria-selected": isActive,
+		className: cn("tabs-trigger z-10 hover:cursor-pointer focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", className),
+		"data-disabled": isDisabled ? "" : void 0,
+		"data-state": isActive ? "active" : "inactive",
 		"data-testid": "spectral-tabs-trigger",
-		disabled: v,
-		id: m,
-		onClick: b,
-		onFocus: S,
-		onKeyDown: x,
-		ref: t,
+		disabled: isDisabled,
+		id: triggerId,
+		onClick: handleClick,
+		onFocus: handleFocus,
+		onKeyDown: handleKeyDown,
+		ref,
 		role: "tab",
-		tabIndex: _ ? 0 : -1,
+		tabIndex: isActive ? 0 : -1,
 		type: "button",
-		...s
+		...props
 	});
-}, C = function({ ref: i, children: a, className: o }) {
-	let { value: c } = y("TabsContentContainer"), [l, u] = r(), d = s();
-	return /* @__PURE__ */ g(t.div, {
-		ref: i,
-		className: e("overflow-hidden", o),
+};
+const TabsContentContainer = function TabsContentContainer({ ref, children, className }) {
+	const { value } = useTabsContext("TabsContentContainer");
+	const [measureRef, bounds] = useMeasure();
+	const reducedMotion = prefersReducedMotion();
+	return /* @__PURE__ */ jsx(motion.div, {
+		ref,
+		className: cn("overflow-hidden", className),
 		"data-testid": "spectral-tabs-content-container",
-		animate: { height: u.height || "auto" },
-		transition: d ? { duration: 0 } : {
+		animate: { height: bounds.height || "auto" },
+		transition: reducedMotion ? { duration: 0 } : {
 			duration: .3,
 			ease: [
 				.25,
@@ -196,12 +250,12 @@ var v = c(null), y = (e = "Tabs") => {
 				1
 			]
 		},
-		children: /* @__PURE__ */ g(n, {
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
 			mode: "wait",
-			initial: !1,
-			children: /* @__PURE__ */ g(t.div, {
-				ref: l,
-				initial: d ? !1 : {
+			initial: false,
+			children: /* @__PURE__ */ jsx(motion.div, {
+				ref: measureRef,
+				initial: reducedMotion ? false : {
 					opacity: 0,
 					y: 8
 				},
@@ -209,11 +263,11 @@ var v = c(null), y = (e = "Tabs") => {
 					opacity: 1,
 					y: 0
 				},
-				exit: d ? void 0 : {
+				exit: reducedMotion ? void 0 : {
 					opacity: 0,
 					y: -8
 				},
-				transition: d ? { duration: 0 } : {
+				transition: reducedMotion ? { duration: 0 } : {
 					duration: .2,
 					ease: [
 						.25,
@@ -222,24 +276,31 @@ var v = c(null), y = (e = "Tabs") => {
 						1
 					]
 				},
-				children: a
-			}, c)
+				children
+			}, value)
 		})
 	});
-}, w = function({ ref: t, className: n, value: r, forceMount: i = !1, ...a }) {
-	let { value: o, baseId: s } = y("TabsContent"), c = `${s}-content-${r}`, l = `${s}-trigger-${r}`, u = o === r;
-	return !i && !u ? null : /* @__PURE__ */ g("div", {
-		"aria-labelledby": l,
-		className: e("tabs-content focus:outline-none focus-visible:outline-none", n),
-		"data-state": u ? "active" : "inactive",
+};
+const TabsContent = function TabsContent({ ref, className, value: contentValue, forceMount = false, ...props }) {
+	const { value, baseId } = useTabsContext("TabsContent");
+	const contentId = `${baseId}-content-${contentValue}`;
+	const triggerId = `${baseId}-trigger-${contentValue}`;
+	const isActive = value === contentValue;
+	if (!forceMount && !isActive) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-labelledby": triggerId,
+		className: cn("tabs-content focus:outline-none focus-visible:outline-none", className),
+		"data-state": isActive ? "active" : "inactive",
 		"data-testid": "spectral-tabs-content",
-		hidden: !u,
-		id: c,
-		ref: t,
+		hidden: !isActive,
+		id: contentId,
+		ref,
 		role: "tabpanel",
 		tabIndex: 0,
-		...a
+		...props
 	});
 };
+
 //#endregion
-export { b as TabsBase, w as TabsContent, C as TabsContentContainer, v as TabsContext, x as TabsList, S as TabsTrigger, y as useTabsContext };
+export { TabsBase, TabsContent, TabsContentContainer, TabsContext, TabsList, TabsTrigger, useTabsContext };
+//# sourceMappingURL=TabsBase.js.map

package/dist/Tabs/TabsBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsBase.js","names":[],"sources":["../../src/components/Tabs/TabsBase.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { AnimatePresence, motion } from 'motion/react'\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, type ComponentPropsWithoutRef, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react'\nimport useMeasure from 'react-use-measure'\nimport { calculateIndicatorStyle, debounce, generateId, prefersReducedMotion, type IndicatorStyle } from './tabsUtils'\n\nexport interface TabsContextValue {\n  activationMode: 'automatic' | 'manual'\n  baseId: string\n  dir: 'ltr' | 'rtl'\n  disabled: boolean\n  onValueChange: (value: string) => void\n  orientation: 'horizontal' | 'vertical'\n  rightSlot?: ReactNode | undefined\n  value: string\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport const useTabsContext = (componentName: string = 'Tabs'): TabsContextValue => {\n  const context = useContext(TabsContext)\n  if (context === null) {\n    throw new Error(`${componentName} components must be used within a Tabs.Root`)\n  }\n  return context\n}\n\nexport interface TabsBaseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'dir' | 'defaultValue'> {\n  onValueChange?: (value: string) => void\n  activationMode?: 'automatic' | 'manual'\n  defaultValue?: string\n  children: ReactNode\n  dir?: 'ltr' | 'rtl'\n  disabled?: boolean\n  orientation?: 'horizontal' | 'vertical'\n  rightSlot?: ReactNode | undefined\n  value?: string\n}\n\nexport const TabsBase = function Tabs({\n  ref,\n  activationMode = 'automatic',\n  children,\n  defaultValue,\n  dir = 'ltr',\n  disabled = false,\n  onValueChange,\n  orientation = 'horizontal',\n  rightSlot,\n  value: controlledValue,\n  ...props\n}: TabsBaseProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<string>(defaultValue ?? '')\n  const baseId = useId() ?? generateId('tabs')\n  const isControlled = controlledValue !== undefined\n  const value = isControlled ? controlledValue : uncontrolledValue\n\n  const handleValueChange = useCallback(\n    (newValue: string): void => {\n      if (disabled) return\n\n      if (!isControlled) {\n        setUncontrolledValue(newValue)\n      }\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange, disabled],\n  )\n\n  const contextValue = {\n    activationMode,\n    baseId,\n    dir,\n    disabled,\n    onValueChange: handleValueChange,\n    orientation,\n    rightSlot,\n    value,\n  } as const satisfies TabsContextValue\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div ref={ref as Ref<HTMLDivElement>} data-testid='spectral-tabs' data-orientation={orientation} data-disabled={disabled ? '' : undefined} dir={dir} {...props}>\n        {children}\n      </div>\n    </TabsContext.Provider>\n  )\n}\n\nexport interface TabsListProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  children?: ReactNode\n  loop?: boolean\n  rightSlot?: ReactNode | undefined\n}\n\nexport const TabsList = function TabsList({\n  ref,\n  children,\n  className,\n  loop = true,\n  rightSlot,\n  ...props\n}: TabsListProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const { orientation, disabled, value } = useTabsContext('TabsList')\n  const [indicatorStyle, setIndicatorStyle] = useState<IndicatorStyle | null>(null)\n  const tabsListRef = useRef<HTMLDivElement>(null)\n  const reducedMotion = prefersReducedMotion()\n\n  // Calculate indicator position\n  const calculatePosition = useCallback(() => {\n    const newStyle = calculateIndicatorStyle(tabsListRef)\n    // Only update if we have a valid position (width/height > 0)\n    if (newStyle.width > 0 || newStyle.height > 0) {\n      setIndicatorStyle(newStyle)\n    }\n  }, [])\n\n  // Debounced version for resize/mutation observers\n  const debouncedCalculatePosition = useMemo(() => debounce(calculatePosition, 16), [calculatePosition])\n\n  // Initial calculation and observer setup\n  useEffect(() => {\n    // Immediate calculation on mount\n    calculatePosition()\n\n    // Only set up observers if browser APIs are available\n    if (typeof ResizeObserver === 'undefined' || typeof MutationObserver === 'undefined') {\n      return\n    }\n\n    const resizeObserver = new ResizeObserver(debouncedCalculatePosition)\n    const mutationObserver = new MutationObserver(debouncedCalculatePosition)\n\n    const currentRef = tabsListRef.current\n    if (currentRef) {\n      resizeObserver.observe(currentRef)\n      mutationObserver.observe(currentRef, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      })\n    }\n\n    return () => {\n      resizeObserver.disconnect()\n      mutationObserver.disconnect()\n      debouncedCalculatePosition.cancel()\n    }\n  }, [calculatePosition, debouncedCalculatePosition])\n\n  // Recalculate when value changes\n  useEffect(() => {\n    calculatePosition()\n  }, [value, calculatePosition])\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>): void => {\n      if (disabled) return\n\n      const triggers = Array.from(tabsListRef.current?.querySelectorAll<HTMLElement>(`[role='tab']:not([disabled]):not([aria-disabled='true'])`) ?? [])\n\n      if (triggers.length === 0) return\n\n      const currentIndex = triggers.findIndex((trigger) => trigger === document.activeElement)\n      if (currentIndex === -1) return\n\n      let nextIndex: number | null = null\n\n      const { key, ctrlKey, metaKey } = event\n      const isModified = ctrlKey || metaKey\n\n      if (orientation === 'horizontal') {\n        if (key === 'ArrowLeft' || (key === 'ArrowUp' && isModified)) {\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : loop ? triggers.length - 1 : currentIndex\n        } else if (key === 'ArrowRight' || (key === 'ArrowDown' && isModified)) {\n          nextIndex = currentIndex < triggers.length - 1 ? currentIndex + 1 : loop ? 0 : currentIndex\n        }\n      } else {\n        if (key === 'ArrowUp' || (key === 'ArrowLeft' && isModified)) {\n          nextIndex = currentIndex > 0 ? currentIndex - 1 : loop ? triggers.length - 1 : currentIndex\n        } else if (key === 'ArrowDown' || (key === 'ArrowRight' && isModified)) {\n          nextIndex = currentIndex < triggers.length - 1 ? currentIndex + 1 : loop ? 0 : currentIndex\n        }\n      }\n\n      if (key === 'Home') {\n        nextIndex = 0\n      } else if (key === 'End') {\n        nextIndex = triggers.length - 1\n      }\n\n      if (nextIndex !== null && nextIndex !== currentIndex) {\n        event.preventDefault()\n        event.stopPropagation()\n        ;(triggers[nextIndex] as HTMLButtonElement)?.focus()\n      }\n    },\n    [disabled, orientation, loop],\n  )\n\n  return (\n    <div className='relative' ref={tabsListRef}>\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        role='tablist'\n        data-testid='spectral-tabs-list'\n        aria-orientation={orientation}\n        aria-disabled={disabled}\n        className={cn('tabs-list flex', orientation === 'horizontal' && 'items-center justify-between', orientation === 'vertical' && 'flex-col', className)}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        <div className={cn('flex', orientation === 'horizontal' && 'items-center', orientation === 'vertical' && 'flex-col')}>{children}</div>\n        {rightSlot && <div className='z-10 flex items-center'>{rightSlot}</div>}\n      </div>\n      {/* Animated indicator - only rendered after first measurement */}\n      {indicatorStyle && (\n        <motion.div\n          className={cn(\n            'top-0 left-0 pointer-events-none absolute will-change-transform select-none',\n            indicatorStyle.orientation === 'horizontal' && !indicatorStyle.isEnclosed && `after:bottom-0 after:left-0 bottom-px z-10 after:absolute after:w-full after:rounded-t-[0.3rem] after:border-b-[0.3rem] after:border-tabs-indicator after:content-['']`,\n            indicatorStyle.orientation === 'vertical' && !indicatorStyle.isEnclosed && `after:right-0 after:top-0 after:w-1 right-px z-10 after:absolute after:h-full after:rounded-l-[0.3rem] after:border-r-[0.3rem] after:border-tabs-indicator after:content-['']`,\n            indicatorStyle.orientation === 'horizontal' && indicatorStyle.isEnclosed && 'rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator',\n            indicatorStyle.orientation === 'vertical' && indicatorStyle.isEnclosed && 'rounded-lg shadow-lg z-0 bg-tabs-enclosed-indicator',\n          )}\n          // Don't animate on initial mount - prevents sliding from (0,0)\n          initial={false}\n          animate={{\n            // Use x/y (translateX/translateY) for position - compositor-friendly, no reflows\n            x: indicatorStyle.left,\n            y: indicatorStyle.isEnclosed ? indicatorStyle.top + indicatorStyle.height * 0.1 : indicatorStyle.top,\n            // Width/height required for correct rendering: scaleX/Y would distort\n            // border-radius on enclosed variant and border widths on default variant\n            width: indicatorStyle.width,\n            height: indicatorStyle.isEnclosed ? (indicatorStyle.orientation === 'vertical' ? 40 : indicatorStyle.height * 0.8) : indicatorStyle.height,\n          }}\n          transition={\n            reducedMotion\n              ? { duration: 0 }\n              : {\n                  // Separate transition configs: spring for transforms, tween for layout\n                  x: { type: 'spring', stiffness: 500, damping: 40, mass: 1 },\n                  y: { type: 'spring', stiffness: 500, damping: 40, mass: 1 },\n                  width: { type: 'spring', stiffness: 500, damping: 40, mass: 1 },\n                  height: { type: 'spring', stiffness: 500, damping: 40, mass: 1 },\n                }\n          }\n          aria-hidden='true'\n        />\n      )}\n    </div>\n  )\n}\n\nexport interface TabsTriggerProps extends ComponentPropsWithoutRef<'button'> {\n  value: string\n  disabled?: boolean\n}\n\nexport const TabsTrigger = function TabsTrigger({\n  ref,\n  className,\n  value: triggerValue,\n  onClick,\n  onKeyDown,\n  disabled: triggerDisabled = false,\n  ...props\n}: TabsTriggerProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const { value, onValueChange, activationMode, disabled: contextDisabled, baseId } = useTabsContext('TabsTrigger')\n\n  const triggerId = `${baseId}-trigger-${triggerValue}`\n  const contentId = `${baseId}-content-${triggerValue}`\n  const isActive = value === triggerValue\n  const isDisabled = contextDisabled || triggerDisabled\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>): void => {\n      if (isDisabled) {\n        event.preventDefault()\n        return\n      }\n      onValueChange(triggerValue)\n      onClick?.(event)\n    },\n    [triggerValue, onValueChange, onClick, isDisabled],\n  )\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLButtonElement>): void => {\n      if (isDisabled) {\n        event.preventDefault()\n        return\n      }\n\n      const { key } = event\n\n      if (key === 'Enter' || key === ' ') {\n        event.preventDefault()\n        event.stopPropagation()\n        onValueChange(triggerValue)\n      }\n\n      onKeyDown?.(event)\n    },\n    [triggerValue, onValueChange, onKeyDown, isDisabled],\n  )\n\n  const handleFocus = useCallback((): void => {\n    if (isDisabled) return\n    if (activationMode === 'automatic') {\n      onValueChange(triggerValue)\n    }\n  }, [activationMode, onValueChange, triggerValue, isDisabled])\n\n  return (\n    <button\n      aria-controls={contentId}\n      aria-disabled={isDisabled}\n      aria-selected={isActive}\n      className={cn('tabs-trigger z-10 hover:cursor-pointer focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent', className)}\n      data-disabled={isDisabled ? '' : undefined}\n      data-state={isActive ? 'active' : 'inactive'}\n      data-testid='spectral-tabs-trigger'\n      disabled={isDisabled}\n      id={triggerId}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      ref={ref as Ref<HTMLButtonElement>}\n      role='tab'\n      tabIndex={isActive ? 0 : -1}\n      type='button'\n      {...props}\n    />\n  )\n}\n\nexport interface TabsContentContainerProps {\n  children: ReactNode\n  className?: string\n}\n\nexport const TabsContentContainer = function TabsContentContainer({\n  ref,\n  children,\n  className,\n}: TabsContentContainerProps & {\n  ref?: Ref<HTMLDivElement>\n}) {\n  const { value } = useTabsContext('TabsContentContainer')\n  const [measureRef, bounds] = useMeasure()\n  const reducedMotion = prefersReducedMotion()\n\n  return (\n    <motion.div\n      ref={ref}\n      className={cn('overflow-hidden', className)}\n      data-testid='spectral-tabs-content-container'\n      animate={{\n        height: bounds.height || 'auto',\n      }}\n      transition={\n        reducedMotion\n          ? { duration: 0 }\n          : {\n              duration: 0.3,\n              ease: [0.25, 1, 0.5, 1],\n            }\n      }\n    >\n      <AnimatePresence mode='wait' initial={false}>\n        <motion.div\n          key={value}\n          ref={measureRef}\n          initial={reducedMotion ? false : { opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={reducedMotion ? undefined : { opacity: 0, y: -8 }}\n          transition={\n            reducedMotion\n              ? { duration: 0 }\n              : {\n                  duration: 0.2,\n                  ease: [0.25, 1, 0.5, 1],\n                }\n          }\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </motion.div>\n  )\n}\n\nexport interface TabsContentProps extends ComponentPropsWithoutRef<'div'> {\n  value: string\n  forceMount?: boolean\n}\n\nexport const TabsContent = function TabsContent({\n  ref,\n  className,\n  value: contentValue,\n  forceMount = false,\n  ...props\n}: TabsContentProps & {\n  ref?: Ref<HTMLElement>\n}) {\n  const { value, baseId } = useTabsContext('TabsContent')\n  const contentId = `${baseId}-content-${contentValue}`\n  const triggerId = `${baseId}-trigger-${contentValue}`\n  const isActive = value === contentValue\n\n  if (!forceMount && !isActive) {\n    return null\n  }\n\n  return (\n    <div\n      aria-labelledby={triggerId}\n      className={cn('tabs-content focus:outline-none focus-visible:outline-none', className)}\n      data-state={isActive ? 'active' : 'inactive'}\n      data-testid='spectral-tabs-content'\n      hidden={!isActive}\n      id={contentId}\n      ref={ref as Ref<HTMLDivElement>}\n      role='tabpanel'\n      tabIndex={0}\n      {...props}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/Tabs/tabsUtils.d.ts

@@ -1,61 +1,66 @@
-import { RefObject } from 'react';
-export interface IndicatorStyle {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-    orientation: 'horizontal' | 'vertical';
-    isEnclosed: boolean;
+'use client';
+import { RefObject } from "react";
+
+//#region src/components/Tabs/tabsUtils.d.ts
+interface IndicatorStyle {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  orientation: 'horizontal' | 'vertical';
+  isEnclosed: boolean;
 }
-export interface IndicatorPosition {
-    left?: string;
-    top?: string;
-    width?: string;
-    height?: string;
+interface IndicatorPosition {
+  left?: string;
+  top?: string;
+  width?: string;
+  height?: string;
 }
 /**
  * Calculates the position and dimensions of the active tab indicator
  */
-export declare const calculateIndicatorStyle: (tabsListRef: RefObject<HTMLDivElement | null>) => IndicatorStyle;
+declare const calculateIndicatorStyle: (tabsListRef: RefObject<HTMLDivElement | null>) => IndicatorStyle;
 /**
  * Gets CSS positioning styles for the indicator based on orientation
  */
-export declare const getIndicatorPosition: (style: IndicatorStyle) => IndicatorPosition;
+declare const getIndicatorPosition: (style: IndicatorStyle) => IndicatorPosition;
 /**
  * Debounce utility for performance optimization with proper cleanup
  */
-export interface DebouncedFunction<TArgs extends unknown[]> {
-    (...args: TArgs): void;
-    cancel: () => void;
+interface DebouncedFunction<TArgs extends unknown[]> {
+  (...args: TArgs): void;
+  cancel: () => void;
 }
-export declare const debounce: <TArgs extends unknown[]>(func: (...args: TArgs) => void, wait: number) => DebouncedFunction<TArgs>;
+declare const debounce: <TArgs extends unknown[]>(func: (...args: TArgs) => void, wait: number) => DebouncedFunction<TArgs>;
 /**
  * Checks if user prefers reduced motion (SSR safe)
  */
-export declare const prefersReducedMotion: () => boolean;
+declare const prefersReducedMotion: () => boolean;
 /**
  * Generates a cryptographically secure unique ID for component instances
  */
-export declare const generateId: (prefix?: string) => string;
+declare const generateId: (prefix?: string) => string;
 /**
  * Validates tab values array for library usage with comprehensive type checking
  */
-export declare const validateTabValues: (tabValues: {
-    key: string;
-    label: unknown;
-    children: unknown;
-    [K: string]: unknown;
+declare const validateTabValues: (tabValues: {
+  key: string;
+  label: unknown;
+  children: unknown;
+  [K: string]: unknown;
 }[]) => boolean;
 /**
  * Type-safe key extractor for tab values
  */
-export declare const getTabKeys: <T extends {
-    key: string;
+declare const getTabKeys: <T extends {
+  key: string;
 }>(tabValues: T[]) => string[];
 /**
  * Finds a tab by key with proper type narrowing
  */
-export declare const findTabByKey: <T extends {
-    key: string;
+declare const findTabByKey: <T extends {
+  key: string;
 }>(tabValues: T[], key: string) => T | undefined;
+//#endregion
+export { DebouncedFunction, IndicatorPosition, IndicatorStyle, calculateIndicatorStyle, debounce, findTabByKey, generateId, getIndicatorPosition, getTabKeys, prefersReducedMotion, validateTabValues };
 //# sourceMappingURL=tabsUtils.d.ts.map

package/dist/Tabs/tabsUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabsUtils.d.ts","names":[],"sources":["../../src/components/Tabs/tabsUtils.ts"],"mappings":";;;;UAEiB,cAAA;EACf,IAAA;EACA,GAAA;EACA,KAAA;EACA,MAAA;EACA,WAAA;EACA,UAAA;AAAA;AAAA,UAGe,iBAAA;EACf,IAAA;EACA,GAAA;EACA,KAAA;EACA,MAAA;AAAA;AAJF;;;AAAA,cAUa,uBAAA,GAAuB,WAAA,EAAiB,SAAA,CAAU,cAAA,aAAyB,cAAA;;;;cAoC3E,oBAAA,GAAoB,KAAA,EAAW,cAAA,KAAiB,iBAAA;;;AApC7D;UAqDiB,iBAAA;EAAA,IACX,IAAA,EAAM,KAAA;EACV,MAAA;AAAA;AAAA,cAGW,QAAA,4BAAmC,IAAA,MAAY,IAAA,EAAM,KAAA,WAAc,IAAA,aAAiB,iBAAA,CAAkB,KAAA;;;;cAyBtG,oBAAA;;;;cAaA,UAAA,GAAU,MAAA;AA5DvB;;;AAAA,cA4Ga,iBAAA,GAAiB,SAAA;EAAiB,GAAA;EAAa,KAAA;EAAgB,QAAA;EAAA,CAAoB,CAAA;AAAA;AA3FhG;;;AAAA,cA0Ha,UAAA;EAA0B,GAAA;AAAA,GAAa,SAAA,EAAa,CAAA;;;;cAKpD,YAAA;EAA4B,GAAA;AAAA,GAAa,SAAA,EAAa,CAAA,IAAG,GAAA,aAAgB,CAAA"}