@seed-design/lynx-react 0.4.1 → 0.5.1

package/lib/components/Tabs/Tabs.jsx

@@ -0,0 +1,419 @@
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { usePressTap } from "../../hooks/usePressTap.js";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects } from "./Tabs.utils.js";
+import * as React 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 invokeSelectTab(pager, index, smooth) {
+	"background only";
+	if (!pager || index < 0) return;
+	try {
+		pager.invoke({
+			method: "selectTab",
+			params: {
+				index,
+				smooth
+			}
+		}).exec();
+	} catch {}
+}
+function invokeScrollToOffset(list, offset) {
+	"background only";
+	if (!list || offset < 0) return;
+	try {
+		list.invoke({
+			method: "scrollTo",
+			params: {
+				offset,
+				smooth: true
+			}
+		}).exec();
+	} catch {}
+}
+var TabsContext = React.createContext(null);
+function useTabsContext(consumer) {
+	const context = React.useContext(TabsContext);
+	if (!context) throw new Error(`<${consumer}/> must be rendered inside <TabsRoot/>.`);
+	return context;
+}
+var TabsCarouselContext = React.createContext(null);
+var TabsCarouselCameraContext = React.createContext(null);
+function useTabsCarouselCameraContext() {
+	return React.useContext(TabsCarouselCameraContext) ?? false;
+}
+function useTabsCarouselContext(consumer) {
+	const context = React.useContext(TabsCarouselContext);
+	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;
+	const classNames = tabs(variantProps);
+	const [value, setValueInternal] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange(nextValue) {
+			"background only";
+			if (nextValue !== void 0) onValueChange?.(nextValue);
+		}
+	});
+	const [items, setItems] = React.useState([]);
+	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 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);
+	}, [selectedPagerIndex]);
+	const registerTrigger = React.useCallback((triggerValue, disabled) => {
+		setItems((current) => {
+			if (current.some((item) => item.value === triggerValue)) return current;
+			return [...current, {
+				value: triggerValue,
+				disabled
+			}];
+		});
+		return () => {
+			"background only";
+			setItems((current) => current.filter((item) => item.value !== triggerValue));
+			setTriggerWidths((current) => {
+				const next = { ...current };
+				delete next[triggerValue];
+				return next;
+			});
+		};
+	}, []);
+	const registerContent = React.useCallback((contentValue) => {
+		setContentValues((current) => current.includes(contentValue) ? current : [...current, contentValue]);
+		return () => {
+			"background only";
+			setContentValues((current) => current.filter((value) => value !== contentValue));
+		};
+	}, []);
+	const updateTriggerDisabled = React.useCallback((triggerValue, disabled) => {
+		setItems((current) => current.map((item) => item.value === triggerValue && item.disabled !== disabled ? {
+			...item,
+			disabled
+		} : item));
+	}, []);
+	const syncTriggerOrder = React.useCallback((triggerValues) => {
+		setItems((current) => {
+			const ordered = getTabsOrderedItems(current, triggerValues);
+			return ordered.every((item, index) => item === current[index]) ? current : ordered;
+		});
+	}, []);
+	const updateTriggerWidth = React.useCallback((triggerValue, width) => {
+		setTriggerWidths((current) => current[triggerValue] === width ? current : {
+			...current,
+			[triggerValue]: width
+		});
+	}, []);
+	const selectValue = React.useCallback((nextValue) => {
+		setIndicatorValue(void 0);
+		setValueInternal(nextValue);
+	}, [setValueInternal]);
+	const handlePagerWillChange = React.useCallback((targetIndex) => {
+		setIndicatorValue(pagerValues[targetIndex]);
+	}, [pagerValues]);
+	const handlePagerChange = React.useCallback((targetIndex) => {
+		const nextValue = pagerValues[targetIndex];
+		if (nextValue === void 0) return;
+		setIndicatorValue(void 0);
+		setValueInternal(nextValue);
+	}, [pagerValues, setValueInternal]);
+	React.useEffect(() => {
+		"background only";
+		if (selectedPagerIndex >= 0) invokeSelectTab(pagerRef.current, selectedPagerIndex, false);
+		if (selectedOffset !== null) invokeScrollToOffset(listRef.current, selectedOffset);
+	}, [selectedPagerIndex, selectedOffset]);
+	const contextValue = React.useMemo(() => ({
+		value,
+		visualValue,
+		variantProps,
+		items,
+		pagerValues,
+		indicatorIndex,
+		selectedPagerIndex,
+		indicatorRef,
+		triggerRects,
+		registerTrigger,
+		registerContent,
+		updateTriggerDisabled,
+		syncTriggerOrder,
+		updateTriggerWidth,
+		setListRef: setListNode,
+		setPagerRef: setPagerNode,
+		selectValue,
+		handlePagerWillChange,
+		handlePagerChange
+	}), [
+		value,
+		visualValue,
+		variantProps,
+		items,
+		pagerValues,
+		indicatorIndex,
+		selectedPagerIndex,
+		indicatorRef,
+		triggerRects,
+		registerTrigger,
+		registerContent,
+		updateTriggerDisabled,
+		syncTriggerOrder,
+		updateTriggerWidth,
+		setListNode,
+		setPagerNode,
+		selectValue,
+		handlePagerWillChange,
+		handlePagerChange
+	]);
+	return <TabsContext.Provider value={contextValue}>
+      <ClassNamesProvider value={classNames}>
+        <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.root, className)} style={style}>
+          {children}
+        </view>
+      </ClassNamesProvider>
+    </TabsContext.Provider>;
+});
+TabsRoot.displayName = "TabsRoot";
+function getTabsTriggerValues(children) {
+	const values = [];
+	function visit(node) {
+		if (Array.isArray(node)) {
+			node.forEach(visit);
+			return;
+		}
+		if (!React.isValidElement(node)) return;
+		if (node.type === TabsTrigger) {
+			values.push(node.props.value);
+			return;
+		}
+		if (node.type === React.Fragment) visit(node.props.children);
+	}
+	visit(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 triggerOrder = React.useMemo(() => getTabsTriggerValues(children), [children]);
+	React.useEffect(() => {
+		"background only";
+		syncTriggerOrder(triggerOrder);
+	}, [
+		items,
+		syncTriggerOrder,
+		triggerOrder
+	]);
+	const mergedRef = React.useCallback((node) => {
+		setListRef(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref, setListRef]);
+	return <scroll-view 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>
+    </scroll-view>;
+});
+TabsList.displayName = "TabsList";
+var TabsTrigger = React.forwardRef((props, ref) => {
+	const { children, className, style, value: triggerValue, disabled = false, "accessibility-label": accessibilityLabel, ...nativeProps } = props;
+	const context = useTabsContext("TabsTrigger");
+	const selected = context.value === triggerValue;
+	const visuallySelected = context.visualValue === triggerValue;
+	React.useEffect(() => {
+		"background only";
+		return context.registerTrigger(triggerValue, disabled);
+	}, [context.registerTrigger, triggerValue]);
+	React.useEffect(() => {
+		"background only";
+		context.updateTriggerDisabled(triggerValue, disabled);
+	}, [
+		context.updateTriggerDisabled,
+		triggerValue,
+		disabled
+	]);
+	const { pressed: _pressed, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: React.useCallback(() => {
+			"background only";
+			context.selectValue(triggerValue);
+		}, [context.selectValue, triggerValue])
+	});
+	const handleLayoutChange = React.useCallback((...args) => {
+		"background only";
+		const width = getTabsLayoutWidth(args[0]);
+		if (width !== null) context.updateTriggerWidth(triggerValue, width);
+	}, [context.updateTriggerWidth, triggerValue]);
+	const triggerClasses = tabs({
+		...context.variantProps,
+		selected: visuallySelected,
+		disabled
+	});
+	const label = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
+	return <view {...ref ? { ref } : {}} {...nativeProps} {...pressHandlers} flatten={false} bindlayoutchange={handleLayoutChange} 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}>
+      <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 position = indicatorIndex;
+	const lowerIndex = Math.max(0, Math.floor(position));
+	const upperIndex = Math.min(items.length - 1, Math.ceil(position));
+	const progress = Math.max(0, Math.min(1, position - lowerIndex));
+	const lowerRect = triggerRects[items[lowerIndex]?.value ?? ""];
+	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 {...ref ? { ref } : {}} main-thread:ref={indicatorRef} {...nativeProps} accessibility-elements-hidden={true} className={clsx(classNames.indicator, className)} style={{
+		"--tabs-indicator-x": `${x}px`,
+		"--tabs-indicator-width": `${width}px`,
+		...style
+	}} />;
+});
+TabsIndicator.displayName = "TabsIndicator";
+var TabsContent = React.forwardRef((props, ref) => {
+	const { children, className, style, value: contentValue, ...nativeProps } = props;
+	const tabsContext = useTabsContext("TabsContent");
+	const inCarousel = useTabsCarouselCameraContext();
+	const selected = tabsContext.value === contentValue;
+	const disabled = tabsContext.items.find((item) => item.value === contentValue)?.disabled ?? false;
+	const contentClasses = tabs({
+		...tabsContext.variantProps,
+		selected,
+		inCarousel
+	});
+	React.useEffect(() => {
+		"background only";
+		if (inCarousel) return tabsContext.registerContent(contentValue);
+	}, [
+		inCarousel,
+		tabsContext.registerContent,
+		contentValue
+	]);
+	const content = <view {...ref ? { ref } : {}} {...nativeProps} accessibility-elements-hidden={!selected} accessibility-role-description="tabpanel" accessibility-value={selected ? "selected" : "not selected"} className={clsx(contentClasses.content, className)} style={style}>
+      {children}
+    </view>;
+	if (inCarousel) {
+		if (disabled) return null;
+		return <viewpager-item>{content}</viewpager-item>;
+	}
+	return content;
+});
+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 contextValue = React.useMemo(() => ({
+		swipeable,
+		iosBackGestureEdgeWidth,
+		onSettle,
+		onSwipeStart,
+		onSwipeEnd
+	}), [
+		swipeable,
+		iosBackGestureEdgeWidth,
+		onSettle,
+		onSwipeStart,
+		onSwipeEnd
+	]);
+	return <TabsCarouselContext.Provider value={contextValue}>
+      <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.carousel, className)} style={style}>
+        {children}
+      </view>
+    </TabsCarouselContext.Provider>;
+});
+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 carouselContext = useTabsCarouselContext("TabsCarouselCamera");
+	const swipingRef = React.useRef(false);
+	const { indicatorRef, pagerValues, triggerRects } = tabsContext;
+	const indicatorRects = pagerValues.map((value) => triggerRects[value] ?? null);
+	const mergedRef = React.useCallback((node) => {
+		tabsContext.setPagerRef(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref, tabsContext.setPagerRef]);
+	const handleWillChange = React.useCallback((event) => {
+		"background only";
+		bindwillchange?.(event);
+		if (event.detail.isDragged) {
+			tabsContext.handlePagerWillChange(event.detail.index);
+			if (!swipingRef.current) {
+				swipingRef.current = true;
+				carouselContext.onSwipeStart?.();
+			}
+		}
+	}, [
+		bindwillchange,
+		carouselContext.onSwipeStart,
+		tabsContext.handlePagerWillChange
+	]);
+	const handleChange = React.useCallback((event) => {
+		"background only";
+		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) => {
+		"background only";
+		bindoffsetchange?.(event);
+	}, [bindoffsetchange]);
+	function handleIndicatorOffsetChange(event) {
+		"main thread";
+		const position = Number(event.detail.offset);
+		if (!Number.isFinite(position)) return;
+		const lowerIndex = Math.max(0, Math.floor(position));
+		const upperIndex = Math.min(indicatorRects.length - 1, Math.ceil(position));
+		const progress = Math.max(0, Math.min(1, position - lowerIndex));
+		const lowerRect = indicatorRects[lowerIndex];
+		const upperRect = indicatorRects[upperIndex] ?? lowerRect;
+		if (!lowerRect) return;
+		const x = lowerRect.left + ((upperRect?.left ?? lowerRect.left) - lowerRect.left) * progress;
+		const width = lowerRect.width + ((upperRect?.width ?? lowerRect.width) - lowerRect.width) * progress;
+		indicatorRef.current?.setStyleProperties({
+			"--tabs-indicator-x": `${x}px`,
+			"--tabs-indicator-width": `${width}px`
+		});
+	}
+	return <viewpager ref={mergedRef} {...nativeProps} initial-select-index={Math.max(0, tabsContext.selectedPagerIndex)} enable-scroll={carouselContext.swipeable} ios-gesture-offset={carouselContext.iosBackGestureEdgeWidth} bindwillchange={handleWillChange} bindchange={handleChange} bindoffsetchange={handleOffsetChange} main-thread:bindoffsetchange={handleIndicatorOffsetChange} className={clsx(classNames.carouselCamera, className)} style={style}>
+        <TabsCarouselCameraContext.Provider value={true}>
+          {children}
+        </TabsCarouselCameraContext.Provider>
+      </viewpager>;
+});
+TabsCarouselCamera.displayName = "TabsCarouselCamera";
+//#endregion
+export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger };

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

@@ -0,0 +1,2 @@
+export { TabsCarousel as Carousel, TabsCarouselCamera as CarouselCamera, TabsContent as Content, TabsIndicator as Indicator, TabsList as List, TabsRoot as Root, TabsTrigger as Trigger, type TabsCarouselCameraProps as CarouselCameraProps, type TabsCarouselProps as CarouselProps, type TabsContentProps as ContentProps, type TabsIndicatorProps as IndicatorProps, type TabsListProps as ListProps, type TabsRootProps as RootProps, type TabsTriggerProps as TriggerProps, } from './Tabs';
+//# sourceMappingURL=Tabs.namespace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,IAAI,QAAQ,EACxB,kBAAkB,IAAI,cAAc,EACpC,WAAW,IAAI,OAAO,EACtB,aAAa,IAAI,SAAS,EAC1B,QAAQ,IAAI,IAAI,EAChB,QAAQ,IAAI,IAAI,EAChB,WAAW,IAAI,OAAO,EACtB,KAAK,uBAAuB,IAAI,mBAAmB,EACnD,KAAK,iBAAiB,IAAI,aAAa,EACvC,KAAK,gBAAgB,IAAI,YAAY,EACrC,KAAK,kBAAkB,IAAI,cAAc,EACzC,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,gBAAgB,IAAI,YAAY,GACtC,MAAM,QAAQ,CAAC"}

package/lib/components/Tabs/Tabs.namespace.js

@@ -0,0 +1,14 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "./Tabs.jsx";
+//#region src/components/Tabs/Tabs.namespace.ts
+var Tabs_namespace_exports = /* @__PURE__ */ __exportAll({
+	Carousel: () => TabsCarousel,
+	CarouselCamera: () => TabsCarouselCamera,
+	Content: () => TabsContent,
+	Indicator: () => TabsIndicator,
+	List: () => TabsList,
+	Root: () => TabsRoot,
+	Trigger: () => TabsTrigger
+});
+//#endregion
+export { Tabs_namespace_exports };

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

@@ -0,0 +1,18 @@
+export interface TabsLayoutChangeEvent {
+    detail?: {
+        width?: number;
+    };
+    params?: {
+        width?: number;
+    };
+}
+export interface TabsLayoutRect {
+    left: number;
+    width: number;
+}
+export declare function getTabsLayoutWidth(event: TabsLayoutChangeEvent): number | null;
+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>;
+//# sourceMappingURL=Tabs.utils.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,37 @@
+//#region src/components/Tabs/Tabs.utils.ts
+function getTabsLayoutWidth(event) {
+	const width = event.detail?.width ?? event.params?.width;
+	if (typeof width !== "number" || !Number.isFinite(width)) return null;
+	return Math.max(0, width);
+}
+function getTabsOrderedItems(items, values) {
+	const itemsByValue = new Map(items.map((item) => [item.value, item]));
+	const ordered = values.flatMap((value) => {
+		const item = itemsByValue.get(value);
+		if (!item) return [];
+		itemsByValue.delete(value);
+		return [item];
+	});
+	ordered.push(...itemsByValue.values());
+	return ordered;
+}
+function getTabsTriggerRects(values, widths) {
+	const rects = Object.create(null);
+	let left = 0;
+	let hasCompletePrefix = true;
+	for (const value of values) {
+		const width = Object.prototype.hasOwnProperty.call(widths, value) ? widths[value] : void 0;
+		if (width === void 0) {
+			hasCompletePrefix = false;
+			continue;
+		}
+		if (hasCompletePrefix) rects[value] = {
+			left,
+			width
+		};
+		left += width;
+	}
+	return rects;
+}
+//#endregion
+export { getTabsLayoutWidth, getTabsOrderedItems, getTabsTriggerRects };

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

@@ -0,0 +1,3 @@
+export * from './Tabs';
+export * as Tabs from './Tabs.namespace';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/TagGroup/TagGroup.jsx

@@ -1,9 +1,9 @@
-import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
 import { toArray } from "../../utils/children.js";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
 import { useStyleProps } from "../../utils/styled.js";
 import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props.js";
-import clsx from "clsx";
 import * as React from "@lynx-js/react";
+import clsx from "clsx";
 import { tagGroup } from "@seed-design/lynx-css/recipes/tag-group";
 import { tagGroupItem } from "@seed-design/lynx-css/recipes/tag-group-item";
 //#region src/components/TagGroup/TagGroup.tsx

package/lib/components/Text/Text.jsx

@@ -1,7 +1,7 @@
 import { handleColor, handleFontSize, handleFontWeight, handleLineHeight } from "../../utils/styled.js";
-import { typography } from "@seed-design/lynx-css/vars/component";
-import clsx from "clsx";
 import * as React from "@lynx-js/react";
+import clsx from "clsx";
+import { typography } from "@seed-design/lynx-css/vars/component";
 //#region src/components/Text/Text.tsx
 function capitalize(value) {
 	return value.charAt(0).toUpperCase() + value.slice(1);

package/lib/components/TextField/TextField.jsx

@@ -3,9 +3,9 @@ import { InternalIcon } from "../Icon/Icon.jsx";
 import { useFieldContext } from "../Field/context.js";
 import { useKeyboardAvoidanceActions } from "../KeyboardAvoidingScrollView/context.js";
 import { NATIVE_TEXT_MAX_LENGTH_UNLIMITED, TextFieldContext } from "./context.js";
-import { textInput } from "@seed-design/lynx-css/vars/component";
-import clsx from "clsx";
 import * as React from "@lynx-js/react";
+import clsx from "clsx";
+import { textInput } from "@seed-design/lynx-css/vars/component";
 import { textInput as textInput$1 } from "@seed-design/lynx-css/recipes/text-input";
 //#region src/components/TextField/TextField.tsx
 var ANDROID_TEXTAREA_DEFAULT_LINE_SPACING = "3.2px";

package/lib/components/index.d.ts

@@ -1,9 +1,13 @@
+export * from './Accordion';
 export * from './ActionButton';
 export * from './AppBar';
 export * from './Badge';
 export * from './Box';
 export * from './BottomSheet';
+export * from './Callout';
 export * from './Checkbox';
+export * from './Chip';
+export * from './Divider';
 export * from './Field';
 export * from './Icon';
 export * from './KeyboardAvoidingScrollView';
@@ -11,6 +15,7 @@ export * from './ProgressCircle';
 export * from './RadioGroup';
 export * from './Stack';
 export * from './Switch';
+export * from './Tabs';
 export * from './TagGroup';
 export * from './Text';
 export * from './TextField';

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,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,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,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}

package/lib/hooks/useIconColor.d.ts

@@ -5,7 +5,8 @@ export interface UseIconColorOptions {
 }
 /**
  * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
- * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
+ * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
+ * 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
  *
  * ```tsx
  * const iconColorProps = useIconColor([variant, disabled, loading]);

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

@@ -1 +1 @@
-{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;CAC3C;AAyBD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAeA"}
+{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;CAC3C;AA0DD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAmBA"}

package/lib/hooks/useIconColor.js

@@ -1,6 +1,6 @@
 import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
 //#region src/hooks/useIconColor.ts
-function syncTintColor(targetRef, sourceRef) {
+function syncTintColorOnce(targetRef, sourceRef) {
 	"main thread";
 	const target = targetRef.current;
 	if (!target) return;
@@ -8,11 +8,31 @@ function syncTintColor(targetRef, sourceRef) {
 	let color;
 	if (typeof source.getComputedStyleProperty === "function") color = source.getComputedStyleProperty("color");
 	else if (typeof source.getComputedCssProperty === "function") color = source.getComputedCssProperty("color");
-	if (color) target.setAttribute("tint-color", color);
+	if (color && target.getAttribute("tint-color") !== color) target.setAttribute("tint-color", color);
+}
+function scheduleTintColorSync(targetRef, sourceRef, frameRef) {
+	"main thread";
+	if (frameRef.current && typeof cancelAnimationFrame === "function") {
+		cancelAnimationFrame(frameRef.current);
+		frameRef.current = 0;
+	}
+	if (typeof requestAnimationFrame === "function") frameRef.current = requestAnimationFrame(() => {
+		frameRef.current = 0;
+		syncTintColorOnce(targetRef, sourceRef);
+	});
+	else syncTintColorOnce(targetRef, sourceRef);
+}
+function cancelTintColorSync(frameRef) {
+	"main thread";
+	if (frameRef.current && typeof cancelAnimationFrame === "function") {
+		cancelAnimationFrame(frameRef.current);
+		frameRef.current = 0;
+	}
 }
 /**
 * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
-* `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
+* `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
+* 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
 *
 * ```tsx
 * const iconColorProps = useIconColor([variant, disabled, loading]);
@@ -22,12 +42,16 @@ function syncTintColor(targetRef, sourceRef) {
 function useIconColor(deps, options) {
 	const ref = useMainThreadRef(null);
 	const sourceRef = options?.sourceRef;
+	const frameRef = useMainThreadRef(0);
 	function syncOnUiAppear() {
 		"main thread";
-		syncTintColor(ref, sourceRef);
+		syncTintColorOnce(ref, sourceRef);
 	}
 	useEffect(() => {
-		runOnMainThread(syncTintColor)(ref, sourceRef);
+		runOnMainThread(scheduleTintColorSync)(ref, sourceRef, frameRef);
+		return () => {
+			runOnMainThread(cancelTintColorSync)(frameRef);
+		};
 	}, deps);
 	return {
 		ref,

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;AAEzD,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,YAAY,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,YAAY,CAAC;IAC9B,qBAAqB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CAC/D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA0B/E"}
+{"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;AAEzD,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,YAAY,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,YAAY,CAAC;IAC9B,qBAAqB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CAC/D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA2B/E"}

package/lib/hooks/usePressTap.js

@@ -23,6 +23,7 @@ function usePressTap(options = {}) {
 		pressed,
 		bindtap: useMemoizedFn((...args) => {
 			if (disabled) return;
+			setPressed(false);
 			onTap?.(...args);
 		}),
 		bindtouchstart: press,