@seed-design/lynx-react 0.7.0 → 0.8.0

package/lib/components/Tabs/Tabs.jsx

@@ -1,15 +1,29 @@
-import { useControllableState } from "../../hooks/useControllableState.js";
-import { usePressTap } from "../../hooks/usePressTap.js";
+import { useControllableState } from "../../packages/lynx-react-headless/use-controllable-state/lib/index.js";
+import { usePressTap } from "../../packages/lynx-react-headless/use-press-tap/lib/index.js";
 import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
 import { mergeProps } from "../../utils/merge-props.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
 import { Box } from "../Box/Box.jsx";
-import { areTabsTransitionsEnabled, getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects } from "./Tabs.utils.js";
+import { HStack } from "../Stack/Stack.jsx";
+import { areTabsTransitionsEnabled, getTabsLayoutWidth, getTabsOrderedItems, getTabsScrollOffset, getTabsTriggerRects } from "./Tabs.utils.js";
 import * as React from "@lynx-js/react";
+import { runOnMainThread } from "@lynx-js/react";
 import clsx from "clsx";
 import { tabs } from "@seed-design/lynx-css/recipes/tabs";
 //#region src/components/Tabs/Tabs.tsx
-var { ClassNamesProvider, useClassNames } = createSlotRecipeContext(tabs);
+function getTabsContentInsets(contentRef) {
+	"main thread";
+	const content = contentRef.current;
+	if (!content || typeof content.getComputedStyleProperty !== "function") return null;
+	const start = Number.parseFloat(content.getComputedStyleProperty("padding-left"));
+	const end = Number.parseFloat(content.getComputedStyleProperty("padding-right"));
+	if (!Number.isFinite(start) || !Number.isFinite(end) || start < 0 || end < 0) return null;
+	return {
+		start,
+		end
+	};
+}
+var { ClassNamesProvider } = createSlotRecipeContext(tabs);
 function invokeSelectTab(pager, index, smooth) {
 	"background only";
 	if (!pager || index < 0) return;
@@ -52,9 +66,8 @@ function useTabsCarouselContext(consumer) {
 	if (!context) throw new Error(`<${consumer}/> must be rendered inside <TabsCarousel/>.`);
 	return context;
 }
-var TabsRoot = React.forwardRef((props, ref) => {
-	const [variantProps, otherProps] = tabs.splitVariantProps(props);
-	const { children, className, style, value: valueProp, defaultValue, onValueChange, ...nativeProps } = otherProps;
+var TabsRootPrimitive = React.forwardRef((props, ref) => {
+	const { recipe, inlineNotification = false, children, className, style, value: valueProp, defaultValue, onValueChange, ...nativeProps } = props;
 	const [value, setValueInternal] = useControllableState({
 		value: valueProp,
 		defaultValue,
@@ -67,24 +80,20 @@ var TabsRoot = React.forwardRef((props, ref) => {
 	const [contentValues, setContentValues] = React.useState([]);
 	const [indicatorValue, setIndicatorValue] = React.useState();
 	const [triggerWidths, setTriggerWidths] = React.useState({});
-	const listRef = React.useRef(null);
 	const pagerRef = React.useRef(null);
 	const indicatorRef = React.useMainThreadRef(null);
 	const pagerValues = React.useMemo(() => contentValues.filter((contentValue) => !items.find((item) => item.value === contentValue)?.disabled), [contentValues, items]);
-	const triggerRects = React.useMemo(() => getTabsTriggerRects(items.map((item) => item.value), triggerWidths), [items, triggerWidths]);
+	const triggerRects = React.useMemo(() => getTabsTriggerRects(items.map((item) => item.value), triggerWidths, recipe.triggerGap), [
+		items,
+		recipe.triggerGap,
+		triggerWidths
+	]);
 	const transitionsEnabled = areTabsTransitionsEnabled(items.map((item) => item.value), triggerRects);
-	const classNames = tabs({
-		...variantProps,
-		transitionEnabled: transitionsEnabled
-	});
+	const getClassNames = recipe.getClassNames;
+	const classNames = getClassNames({ transitionEnabled: transitionsEnabled });
 	const visualValue = indicatorValue ?? value;
 	const indicatorIndex = items.findIndex((item) => item.value === visualValue);
 	const selectedPagerIndex = value === void 0 ? -1 : pagerValues.indexOf(value);
-	const selectedOffset = (value === void 0 ? void 0 : triggerRects[value])?.left ?? null;
-	const setListNode = React.useCallback((node) => {
-		listRef.current = node;
-		if (node && selectedOffset !== null) invokeScrollToOffset(node, selectedOffset);
-	}, [selectedOffset]);
 	const setPagerNode = React.useCallback((node) => {
 		pagerRef.current = node;
 		if (node && selectedPagerIndex >= 0) invokeSelectTab(node, selectedPagerIndex, false);
@@ -148,12 +157,14 @@ var TabsRoot = React.forwardRef((props, ref) => {
 	React.useEffect(() => {
 		"background only";
 		if (selectedPagerIndex >= 0) invokeSelectTab(pagerRef.current, selectedPagerIndex, false);
-		if (selectedOffset !== null) invokeScrollToOffset(listRef.current, selectedOffset);
-	}, [selectedPagerIndex, selectedOffset]);
+	}, [selectedPagerIndex]);
 	const contextValue = React.useMemo(() => ({
 		value,
 		visualValue,
-		variantProps,
+		classNames,
+		getClassNames,
+		getIndicatorClassName: recipe.getIndicatorClassName,
+		inlineNotification,
 		items,
 		pagerValues,
 		indicatorIndex,
@@ -166,7 +177,6 @@ var TabsRoot = React.forwardRef((props, ref) => {
 		updateTriggerDisabled,
 		syncTriggerOrder,
 		updateTriggerWidth,
-		setListRef: setListNode,
 		setPagerRef: setPagerNode,
 		selectValue,
 		handlePagerWillChange,
@@ -174,7 +184,10 @@ var TabsRoot = React.forwardRef((props, ref) => {
 	}), [
 		value,
 		visualValue,
-		variantProps,
+		classNames,
+		getClassNames,
+		recipe.getIndicatorClassName,
+		inlineNotification,
 		items,
 		pagerValues,
 		indicatorIndex,
@@ -187,20 +200,36 @@ var TabsRoot = React.forwardRef((props, ref) => {
 		updateTriggerDisabled,
 		syncTriggerOrder,
 		updateTriggerWidth,
-		setListNode,
 		setPagerNode,
 		selectValue,
 		handlePagerWillChange,
 		handlePagerChange
 	]);
 	return <TabsContext.Provider value={contextValue}>
-      <ClassNamesProvider value={classNames}>
-        <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.root, className)} style={style}>
-          {children}
-        </view>
-      </ClassNamesProvider>
+      <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classNames.root, className)} style={style}>
+        {children}
+      </view>
     </TabsContext.Provider>;
 });
+TabsRootPrimitive.displayName = "TabsRootPrimitive";
+var TabsRoot = React.forwardRef((props, ref) => {
+	const [variantProps, rootProps] = tabs.splitVariantProps(props);
+	const getClassNames = React.useCallback((state = {}) => tabs({
+		...variantProps,
+		selected: state.selected,
+		disabled: state.disabled,
+		inCarousel: state.inCarousel,
+		transitionEnabled: state.transitionEnabled
+	}), [variantProps]);
+	const recipe = React.useMemo(() => ({
+		getClassNames,
+		getIndicatorClassName: (state) => getClassNames(state).indicator,
+		triggerGap: 0
+	}), [getClassNames]);
+	return <ClassNamesProvider value={getClassNames()}>
+      <TabsRootPrimitive {...rootProps} ref={ref} recipe={recipe} />
+    </ClassNamesProvider>;
+});
 TabsRoot.displayName = "TabsRoot";
 function getTabsTriggerValues(children) {
 	const values = [];
@@ -220,10 +249,21 @@ function getTabsTriggerValues(children) {
 	return values;
 }
 var TabsList = React.forwardRef((props, ref) => {
-	const { children, className, style, ...nativeProps } = props;
-	const classNames = useClassNames();
-	const { items, setListRef, syncTriggerOrder } = useTabsContext("TabsList");
+	const { children, className, style, scrollAlign = "start", ...nativeProps } = props;
+	const { classNames, items, syncTriggerOrder, triggerRects, value } = useTabsContext("TabsList");
+	const scrollRef = React.useRef(null);
+	const contentRef = React.useMainThreadRef(null);
+	const metricsRef = React.useRef({
+		currentOffset: 0,
+		viewportWidth: null,
+		contentWidth: null,
+		insets: null
+	});
+	const contentInsetRequestRef = React.useRef(0);
+	const selectedValueRef = React.useRef(value);
+	const [geometryRevision, setGeometryRevision] = React.useState(0);
 	const triggerOrder = React.useMemo(() => getTabsTriggerValues(children), [children]);
+	selectedValueRef.current = value;
 	React.useEffect(() => {
 		"background only";
 		syncTriggerOrder(triggerOrder);
@@ -232,9 +272,84 @@ var TabsList = React.forwardRef((props, ref) => {
 		syncTriggerOrder,
 		triggerOrder
 	]);
-	const mergedRef = React.useMemo(() => mergeProps({ ref: setListRef }, { ref }).ref, [ref, setListRef]);
-	return <scroll-view {...mergeProps({ ref: mergedRef }, nativeProps)} scroll-orientation="horizontal" scroll-bar-enable={false} accessibility-element={false} accessibility-traits="tabbar" className={clsx(classNames.list, className)} style={style}>
-      <view className={classNames.listContent}>{children}</view>
+	const requestContentInsets = React.useCallback(() => {
+		"background only";
+		const request = ++contentInsetRequestRef.current;
+		metricsRef.current.insets = null;
+		runOnMainThread(getTabsContentInsets)(contentRef).then((insets) => {
+			"background only";
+			if (request !== contentInsetRequestRef.current || !insets) return;
+			metricsRef.current.insets = insets;
+			setGeometryRevision((revision) => revision + 1);
+		}, () => {});
+	}, [contentRef]);
+	const handleListLayoutChange = React.useCallback((event) => {
+		"background only";
+		const width = getTabsLayoutWidth(event);
+		if (width !== null && width > 0 && metricsRef.current.viewportWidth !== width) {
+			metricsRef.current.viewportWidth = width;
+			setGeometryRevision((revision) => revision + 1);
+		}
+	}, []);
+	const handleContentLayoutChange = React.useCallback((event) => {
+		"background only";
+		const width = getTabsLayoutWidth(event);
+		if (width !== null && width > 0 && metricsRef.current.contentWidth !== width) {
+			metricsRef.current.contentWidth = width;
+			setGeometryRevision((revision) => revision + 1);
+		}
+		requestContentInsets();
+	}, [requestContentInsets]);
+	const updateScrollMetrics = React.useCallback((scrollLeft, scrollWidth) => {
+		"background only";
+		if (Number.isFinite(scrollLeft)) metricsRef.current.currentOffset = Math.max(0, scrollLeft);
+		if (Number.isFinite(scrollWidth) && scrollWidth > 0 && metricsRef.current.contentWidth !== scrollWidth) {
+			metricsRef.current.contentWidth = scrollWidth;
+			requestContentInsets();
+			setGeometryRevision((revision) => revision + 1);
+		}
+	}, [requestContentInsets]);
+	const handleScroll = React.useCallback((event) => {
+		"background only";
+		updateScrollMetrics(event.detail.scrollLeft, event.detail.scrollWidth);
+	}, [updateScrollMetrics]);
+	const handleContentSizeChanged = React.useCallback((event) => {
+		"background only";
+		updateScrollMetrics(event.detail.scrollLeft, event.detail.scrollWidth);
+	}, [updateScrollMetrics]);
+	React.useEffect(() => {
+		"background only";
+		const selectedRect = value === void 0 ? void 0 : triggerRects[value];
+		const { currentOffset, viewportWidth, contentWidth, insets } = metricsRef.current;
+		if (!scrollRef.current || value === void 0 || !selectedRect || viewportWidth === null || contentWidth === null || insets === null) return;
+		const targetOffset = getTabsScrollOffset({
+			scrollAlign,
+			currentOffset,
+			viewportWidth,
+			contentWidth,
+			contentInsetStart: insets.start,
+			contentInsetEnd: insets.end,
+			triggerRect: selectedRect
+		});
+		if (selectedValueRef.current !== value || targetOffset === currentOffset) return;
+		invokeScrollToOffset(scrollRef.current, targetOffset);
+	}, [
+		geometryRevision,
+		items,
+		scrollAlign,
+		triggerRects,
+		value
+	]);
+	const mergedRef = React.useMemo(() => mergeProps({ ref: scrollRef }, { ref }).ref, [ref]);
+	return <scroll-view {...mergeProps({
+		ref: mergedRef,
+		bindlayoutchange: handleListLayoutChange,
+		bindscroll: handleScroll,
+		bindcontentsizechanged: handleContentSizeChanged
+	}, nativeProps)} scroll-orientation="horizontal" scroll-bar-enable={false} accessibility-element={false} accessibility-traits="tabbar" className={clsx(classNames.list, className)} style={style}>
+      <view className={classNames.listContent} main-thread:ref={contentRef} bindlayoutchange={handleContentLayoutChange}>
+        {children}
+      </view>
     </scroll-view>;
 });
 TabsList.displayName = "TabsList";
@@ -255,7 +370,7 @@ var TabsTrigger = React.forwardRef((props, ref) => {
 		triggerValue,
 		disabled
 	]);
-	const { pressed: _pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
 		disabled,
 		onTap: React.useCallback((...args) => {
 			"background only";
@@ -278,25 +393,29 @@ var TabsTrigger = React.forwardRef((props, ref) => {
 		const width = getTabsLayoutWidth(args[0]);
 		if (width !== null) context.updateTriggerWidth(triggerValue, width);
 	}, [context.updateTriggerWidth, triggerValue]);
-	const triggerClasses = tabs({
-		...context.variantProps,
+	const triggerClasses = context.getClassNames({
 		selected: visuallySelected,
 		disabled,
+		pressed,
 		transitionEnabled: context.transitionsEnabled
 	});
 	const label = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
 	return <view {...mergeProps({ bindlayoutchange: handleLayoutChange }, ref ? { ref } : {}, pressHandlers, scaleFeedbackTargetProps, scaleFeedbackTriggerProps, nativeProps)} flatten={false} accessibility-element={true} accessibility-role-description="tab" accessibility-label={accessibilityLabel ?? label} accessibility-value={selected ? "selected" : "not selected"} accessibility-traits={disabled ? "disabled" : selected ? "selected" : "button"} className={clsx(triggerClasses.trigger, className)} style={style}>
-      {notification ? <Box position="relative">
-          <text className={triggerClasses.triggerLabel}>{children}</text>
-          {notification}
-        </Box> : <text className={triggerClasses.triggerLabel}>{children}</text>}
+      {notification ? context.inlineNotification ? <HStack position="relative" gap="x1_5">
+            <text className={triggerClasses.triggerLabel}>{children}</text>
+            <view accessibility-elements-hidden={true}>{notification}</view>
+          </HStack> : <Box position="relative">
+            <text className={triggerClasses.triggerLabel}>{children}</text>
+            {notification}
+          </Box> : <text className={triggerClasses.triggerLabel}>{children}</text>}
     </view>;
 });
 TabsTrigger.displayName = "TabsTrigger";
 var TabsIndicator = React.forwardRef((props, ref) => {
 	const { className, style, ...nativeProps } = props;
-	const classNames = useClassNames();
-	const { indicatorRef, items, indicatorIndex, triggerRects } = useTabsContext("TabsIndicator");
+	const { indicatorRef, items, indicatorIndex, triggerRects, getIndicatorClassName, transitionsEnabled } = useTabsContext("TabsIndicator");
+	if (!getIndicatorClassName) throw new Error("<TabsIndicator/> is only supported inside <TabsRoot/>.");
+	const indicatorClassName = getIndicatorClassName({ transitionEnabled: transitionsEnabled });
 	const position = indicatorIndex;
 	const lowerIndex = Math.max(0, Math.floor(position));
 	const upperIndex = Math.min(items.length - 1, Math.ceil(position));
@@ -305,7 +424,7 @@ var TabsIndicator = React.forwardRef((props, ref) => {
 	const upperRect = triggerRects[items[upperIndex]?.value ?? ""] ?? lowerRect;
 	const x = lowerRect ? lowerRect.left + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress : 0;
 	const width = lowerRect ? lowerRect.width + ((upperRect?.width ?? lowerRect.width) - lowerRect.width) * progress : 0;
-	return <view {...mergeProps({ "main-thread:ref": indicatorRef }, ref ? { ref } : {}, nativeProps)} accessibility-elements-hidden={true} className={clsx(classNames.indicator, className)} style={{
+	return <view {...mergeProps({ "main-thread:ref": indicatorRef }, ref ? { ref } : {}, nativeProps)} accessibility-elements-hidden={true} className={clsx(indicatorClassName, className)} style={{
 		"--tabs-indicator-x": `${x}px`,
 		"--tabs-indicator-width": `${width}px`,
 		...style
@@ -318,8 +437,7 @@ var TabsContent = React.forwardRef((props, ref) => {
 	const inCarousel = useTabsCarouselCameraContext();
 	const selected = tabsContext.value === contentValue;
 	const disabled = tabsContext.items.find((item) => item.value === contentValue)?.disabled ?? false;
-	const contentClasses = tabs({
-		...tabsContext.variantProps,
+	const contentClasses = tabsContext.getClassNames({
 		selected,
 		inCarousel
 	});
@@ -343,7 +461,7 @@ var TabsContent = React.forwardRef((props, ref) => {
 TabsContent.displayName = "TabsContent";
 var TabsCarousel = React.forwardRef((props, ref) => {
 	const { children, className, style, swipeable = false, iosBackGestureEdgeWidth = 32, onSettle, onSwipeStart, onSwipeEnd, ...nativeProps } = props;
-	const classNames = useClassNames();
+	const { classNames } = useTabsContext("TabsCarousel");
 	const contextValue = React.useMemo(() => ({
 		swipeable,
 		iosBackGestureEdgeWidth,
@@ -366,19 +484,33 @@ var TabsCarousel = React.forwardRef((props, ref) => {
 TabsCarousel.displayName = "TabsCarousel";
 var TabsCarouselCamera = React.forwardRef((props, ref) => {
 	const { children, className, style, bindchange, bindwillchange, bindoffsetchange, ...nativeProps } = props;
-	const classNames = useClassNames();
 	const tabsContext = useTabsContext("TabsCarouselCamera");
+	const { classNames } = tabsContext;
 	const carouselContext = useTabsCarouselContext("TabsCarouselCamera");
 	const swipingRef = React.useRef(false);
 	const { indicatorRef, pagerValues, triggerRects } = tabsContext;
 	const indicatorRects = pagerValues.map((value) => triggerRects[value] ?? null);
 	const mergedRef = React.useMemo(() => mergeProps({ ref: tabsContext.setPagerRef }, { ref }).ref, [ref, tabsContext.setPagerRef]);
+	const finishSwipe = React.useCallback(() => {
+		"background only";
+		if (!swipingRef.current) return;
+		swipingRef.current = false;
+		carouselContext.onSwipeEnd?.();
+	}, [carouselContext.onSwipeEnd]);
+	const handleTouchEnd = React.useCallback(() => {
+		"background only";
+		finishSwipe();
+	}, [finishSwipe]);
+	const handleTouchCancel = React.useCallback(() => {
+		"background only";
+		finishSwipe();
+	}, [finishSwipe]);
 	const handleWillChange = React.useCallback((event) => {
 		"background only";
 		bindwillchange?.(event);
 		if (event.detail.isDragged) {
 			tabsContext.handlePagerWillChange(event.detail.index);
-			if (!swipingRef.current) {
+			if (carouselContext.swipeable && !swipingRef.current) {
 				swipingRef.current = true;
 				carouselContext.onSwipeStart?.();
 			}
@@ -386,6 +518,7 @@ var TabsCarouselCamera = React.forwardRef((props, ref) => {
 	}, [
 		bindwillchange,
 		carouselContext.onSwipeStart,
+		carouselContext.swipeable,
 		tabsContext.handlePagerWillChange
 	]);
 	const handleChange = React.useCallback((event) => {
@@ -393,14 +526,9 @@ var TabsCarouselCamera = React.forwardRef((props, ref) => {
 		bindchange?.(event);
 		tabsContext.handlePagerChange(event.detail.index);
 		carouselContext.onSettle?.();
-		if (swipingRef.current || event.detail.isDragged) {
-			swipingRef.current = false;
-			carouselContext.onSwipeEnd?.();
-		}
 	}, [
 		bindchange,
 		carouselContext.onSettle,
-		carouselContext.onSwipeEnd,
 		tabsContext.handlePagerChange
 	]);
 	const handleOffsetChange = React.useCallback((event) => {
@@ -426,6 +554,8 @@ var TabsCarouselCamera = React.forwardRef((props, ref) => {
 	}
 	return <viewpager {...mergeProps({
 		ref: mergedRef,
+		bindtouchend: handleTouchEnd,
+		bindtouchcancel: handleTouchCancel,
 		bindwillchange: handleWillChange,
 		bindchange: handleChange,
 		bindoffsetchange: handleOffsetChange,
@@ -438,4 +568,4 @@ var TabsCarouselCamera = React.forwardRef((props, ref) => {
 });
 TabsCarouselCamera.displayName = "TabsCarouselCamera";
 //#endregion
-export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger };
+export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsRootPrimitive, TabsTrigger };

package/lib/components/Tabs/Tabs.utils.d.ts

@@ -14,6 +14,19 @@ export declare function getTabsLayoutWidth(event: TabsLayoutChangeEvent): number
 export declare function getTabsOrderedItems<T extends {
     value: string;
 }>(items: T[], values: string[]): T[];
-export declare function getTabsTriggerRects(values: string[], widths: Record<string, number>): Record<string, TabsLayoutRect>;
+export declare function getTabsTriggerRects(values: string[], widths: Record<string, number>, triggerGap?: number): Record<string, TabsLayoutRect>;
+/**
+ * Trigger rectangles begin at the first trigger, so they exclude list-content
+ * padding. Scroll offsets are measured from the scroll content edge.
+ */
+export declare function getTabsScrollOffset({ scrollAlign, currentOffset, viewportWidth, contentWidth, contentInsetStart, contentInsetEnd, triggerRect, }: {
+    scrollAlign: "nearest" | "start" | "center" | "end";
+    currentOffset: number;
+    viewportWidth: number;
+    contentWidth: number;
+    contentInsetStart: number;
+    contentInsetEnd: number;
+    triggerRect: TabsLayoutRect;
+}): number;
 export declare function areTabsTransitionsEnabled(values: string[], rects: Record<string, TabsLayoutRect>): boolean;
 //# sourceMappingURL=Tabs.utils.d.ts.map

package/lib/components/Tabs/Tabs.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.utils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,qBAAqB,GAAG,MAAM,GAAG,IAAI,CAI9E;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAC7D,KAAK,EAAE,CAAC,EAAE,EACV,MAAM,EAAE,MAAM,EAAE,GACf,CAAC,EAAE,CAUL;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,EAAE,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAiBhC;AAED,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,MAAM,EAAE,EAChB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,GACpC,OAAO,CAET"}
+{"version":3,"file":"Tabs.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.utils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,qBAAqB,GAAG,MAAM,GAAG,IAAI,CAI9E;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,EAC7D,KAAK,EAAE,CAAC,EAAE,EACV,MAAM,EAAE,MAAM,EAAE,GACf,CAAC,EAAE,CAUL;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,EAAE,EAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,UAAU,SAAI,GACb,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAiBhC;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,WAAW,GACZ,EAAE;IACD,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACpD,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,cAAc,CAAC;CAC7B,GAAG,MAAM,CA2BT;AAED,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,MAAM,EAAE,EAChB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,GACpC,OAAO,CAET"}

package/lib/components/Tabs/Tabs.utils.js

@@ -15,7 +15,7 @@ function getTabsOrderedItems(items, values) {
 	ordered.push(...itemsByValue.values());
 	return ordered;
 }
-function getTabsTriggerRects(values, widths) {
+function getTabsTriggerRects(values, widths, triggerGap = 0) {
 	const rects = Object.create(null);
 	let left = 0;
 	let hasCompletePrefix = true;
@@ -29,12 +29,33 @@ function getTabsTriggerRects(values, widths) {
 			left,
 			width
 		};
-		left += width;
+		left += width + triggerGap;
 	}
 	return rects;
 }
+/**
+* Trigger rectangles begin at the first trigger, so they exclude list-content
+* padding. Scroll offsets are measured from the scroll content edge.
+*/
+function getTabsScrollOffset({ scrollAlign, currentOffset, viewportWidth, contentWidth, contentInsetStart, contentInsetEnd, triggerRect }) {
+	const maxOffset = Math.max(0, contentWidth - viewportWidth);
+	const clampOffset = (offset) => Math.min(maxOffset, Math.max(0, offset));
+	const clampedCurrentOffset = clampOffset(currentOffset);
+	if (maxOffset === 0) return clampedCurrentOffset;
+	const triggerStart = contentInsetStart + triggerRect.left;
+	const triggerEnd = triggerStart + triggerRect.width;
+	if (scrollAlign === "nearest") {
+		const visibleStart = clampedCurrentOffset;
+		const visibleEnd = clampedCurrentOffset + viewportWidth;
+		if (triggerStart >= visibleStart && triggerEnd <= visibleEnd) return clampedCurrentOffset;
+		return clampOffset(triggerStart < visibleStart ? triggerStart - contentInsetStart : triggerEnd + contentInsetEnd - viewportWidth);
+	}
+	if (scrollAlign === "start") return clampOffset(triggerStart - contentInsetStart);
+	if (scrollAlign === "center") return clampOffset(triggerStart + triggerRect.width / 2 - viewportWidth / 2);
+	return clampOffset(triggerEnd + contentInsetEnd - viewportWidth);
+}
 function areTabsTransitionsEnabled(values, rects) {
 	return values.length > 0 && values.every((value) => rects[value] !== void 0);
 }
 //#endregion
-export { areTabsTransitionsEnabled, getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects };
+export { areTabsTransitionsEnabled, getTabsLayoutWidth, getTabsOrderedItems, getTabsScrollOffset, getTabsTriggerRects };

package/lib/components/Tabs/index.d.ts

@@ -1,3 +1,3 @@
-export * from './Tabs';
+export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, type TabsCarouselCameraProps, type TabsCarouselProps, type TabsContentProps, type TabsIndicatorProps, type TabsListProps, type TabsRootProps, type TabsTriggerProps, } from './Tabs';
 export * as Tabs from './Tabs.namespace';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,gBAAgB,GACtB,MAAM,QAAQ,CAAC;AAEhB,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAC"}

package/lib/components/index.d.ts

@@ -7,10 +7,17 @@ export * from './BottomSheet';
 export * from './Callout';
 export * from './Checkbox';
 export * from './Chip';
+export * from './ChipTabs';
 export * from './Count';
+export * from './ContextualFloatingButton';
 export * from './Divider';
 export * from './Field';
+export * from './FloatingActionButton';
 export * from './Icon';
+export * from './Dialog';
+export * from './AlertDialog';
+export * from './HelpBubble';
+export * from './IdentityPlaceholder';
 export * from './InputButton';
 export * from './KeyboardAvoidingScrollView';
 export * from './MannerTemp';
@@ -20,16 +27,23 @@ export * from './NotificationBadge';
 export * from './PageBanner';
 export * from './List';
 export * from './ProgressCircle';
+export * from './QuantityPicker';
 export * from './RadioGroup';
 export * from './ReactionButton';
 export * from './ScaleFeedback';
 export * from './SegmentedControl';
+export * from './Select';
 export * from './SelectBox';
+export * from './Skeleton';
+export * from './Slider';
 export * from './Stack';
 export * from './Switch';
+export * from './ScrollFog';
 export * from './SwipeableMenuSheet';
 export * from './Tabs';
 export * from './TagGroup';
 export * from './Text';
 export * from './TextField';
+export * from './AttachmentInput';
+export * from './AttachmentDisplay';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}

package/lib/hooks/useControllableState.d.ts

@@ -1,15 +1,2 @@
-export interface UseControllableStateProps<T> {
-    value?: T;
-    defaultValue: T;
-    onChange?: (value: T) => void;
-}
-/**
- * Controlled/uncontrolled state pattern for Lynx components.
- *
- * - When `value` is provided, the component is controlled.
- * - When `value` is `undefined`, the component manages its own state
- *   starting from `defaultValue`.
- * - `onChange` fires in both modes.
- */
-export declare function useControllableState<T>(props: UseControllableStateProps<T>): [T, (value: T) => void];
+export * from '@seed-design/lynx-react-use-controllable-state';
 //# sourceMappingURL=useControllableState.d.ts.map

package/lib/hooks/useControllableState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,EAAE,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,KAAK,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAClC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAuBzB"}
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAAA,cAAc,gDAAgD,CAAC"}

package/lib/hooks/usePressTap.d.ts

@@ -1,28 +1,2 @@
-import { BaseTouchEvent, EventHandler, Target } from '@lynx-js/types';
-import { LynxTouchProps } from '../types';
-type TouchHandler = EventHandler<BaseTouchEvent<Target>>;
-type PressStateHandler = TouchHandler & (() => void);
-export interface UsePressTapOptions {
-    disabled?: boolean;
-    onTap?: TouchHandler;
-    mainThreadOnTap?: LynxTouchProps["main-thread:bindtap"];
-}
-export interface UsePressTapReturn {
-    pressed: boolean;
-    bindtap: TouchHandler;
-    bindtouchstart: PressStateHandler;
-    bindtouchend: PressStateHandler;
-    bindtouchcancel: PressStateHandler;
-    "main-thread:bindtap"?: LynxTouchProps["main-thread:bindtap"];
-}
-/**
- * Hook that provides press/tap interaction state for Lynx elements.
- *
- * - Tracks `pressed` state via touch events.
- * - When `disabled` is true, the element cannot become active and no tap fires.
- * - If the element becomes disabled during a press, the active state is cleared.
- * - `main-thread:bindtap` is conditionally included (only when enabled and provided).
- */
-export declare function usePressTap(options?: UsePressTapOptions): UsePressTapReturn;
-export {};
+export * from '@seed-design/lynx-react-use-press-tap';
 //# sourceMappingURL=usePressTap.d.ts.map

package/lib/hooks/usePressTap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePressTap.d.ts","sourceRoot":"","sources":["../../src/hooks/usePressTap.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,KAAK,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AACzD,KAAK,iBAAiB,GAAG,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;AAErD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,cAAc,EAAE,iBAAiB,CAAC;IAClC,YAAY,EAAE,iBAAiB,CAAC;IAChC,eAAe,EAAE,iBAAiB,CAAC;IACnC,qBAAqB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CAC/D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA2B/E"}
+{"version":3,"file":"usePressTap.d.ts","sourceRoot":"","sources":["../../src/hooks/usePressTap.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC"}

package/lib/hooks/useScaleFeedback.d.ts

@@ -39,7 +39,7 @@ export interface UseScaleFeedbackReturn {
  * The target's transform is owned by this hook. Use a separate content layer
  * when the element already uses translate, rotate, or another transform.
  *
- * Supported on Lynx Engine 3.9 and later. Missing or unknown
+ * Supported on Lynx Engine 3.6 and later. Missing or unknown
  * `GlobalProps.motion` values preserve the default motion; only the exact
  * `"reduced"` value disables scaling.
  */

package/lib/hooks/useScaleFeedback.js

@@ -42,7 +42,7 @@ function readScaleFeedbackScale(target) {
 * The target's transform is owned by this hook. Use a separate content layer
 * when the element already uses translate, rotate, or another transform.
 *
-* Supported on Lynx Engine 3.9 and later. Missing or unknown
+* Supported on Lynx Engine 3.6 and later. Missing or unknown
 * `GlobalProps.motion` values preserve the default motion; only the exact
 * `"reduced"` value disables scaling.
 */