@seed-design/lynx-react 0.4.1 → 0.5.0

package/lib/components/Tabs/Tabs.jsx

@@ -0,0 +1,406 @@
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { usePressTap } from "../../hooks/usePressTap.js";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+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 {}
+}
+function getLayoutRect(event) {
+	const width = event.detail?.width ?? event.params?.width;
+	const left = event.detail?.left ?? event.params?.left;
+	if (!Number.isFinite(width) || !Number.isFinite(left)) return null;
+	return {
+		width: Math.max(0, width),
+		left
+	};
+}
+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 [triggerRects, setTriggerRects] = React.useState({});
+	const [listLeft, setListLeft] = React.useState(0);
+	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 visualValue = indicatorValue ?? value;
+	const indicatorIndex = items.findIndex((item) => item.value === visualValue);
+	const selectedPagerIndex = value === void 0 ? -1 : pagerValues.indexOf(value);
+	const selectedRect = value === void 0 ? void 0 : triggerRects[value];
+	const selectedOffset = selectedRect ? Math.max(0, selectedRect.left - listLeft) : 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));
+			setTriggerRects((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 updateTriggerRect = React.useCallback((triggerValue, rect) => {
+		setTriggerRects((current) => {
+			const previous = current[triggerValue];
+			if (previous?.left === rect.left && previous.width === rect.width) return current;
+			return {
+				...current,
+				[triggerValue]: rect
+			};
+		});
+	}, []);
+	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,
+		listLeft,
+		triggerRects,
+		registerTrigger,
+		registerContent,
+		updateTriggerDisabled,
+		updateTriggerRect,
+		setListLeft,
+		setListRef: setListNode,
+		setPagerRef: setPagerNode,
+		selectValue,
+		handlePagerWillChange,
+		handlePagerChange
+	}), [
+		value,
+		visualValue,
+		variantProps,
+		items,
+		pagerValues,
+		indicatorIndex,
+		selectedPagerIndex,
+		indicatorRef,
+		listLeft,
+		triggerRects,
+		registerTrigger,
+		registerContent,
+		updateTriggerDisabled,
+		updateTriggerRect,
+		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";
+var TabsList = React.forwardRef((props, ref) => {
+	const { children, className, style, ...nativeProps } = props;
+	const classNames = useClassNames();
+	const { setListLeft, setListRef } = useTabsContext("TabsList");
+	const mergedRef = React.useCallback((node) => {
+		setListRef(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref, setListRef]);
+	const handleLayoutChange = React.useCallback((...args) => {
+		"background only";
+		const rect = getLayoutRect(args[0]);
+		if (rect) setListLeft(rect.left);
+	}, [setListLeft]);
+	return <scroll-view ref={mergedRef} {...nativeProps} scroll-orientation="horizontal" scroll-bar-enable={false} bindlayoutchange={handleLayoutChange} 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 rect = getLayoutRect(args[0]);
+		if (rect) context.updateTriggerRect(triggerValue, rect);
+	}, [context.updateTriggerRect, 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, listLeft, 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 - listLeft + ((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, listLeft, 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 - listLeft + ((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/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,

package/lib/index.js

@@ -1,11 +1,14 @@
+import { useControllableState } from "./hooks/useControllableState.js";
 import { usePressTap } from "./hooks/usePressTap.js";
 import { createSlotRecipeContext } from "./utils/create-slot-recipe-context.jsx";
-import { capitalize, resolveRecipeToken } from "./utils/resolve-recipe-token.js";
+import { useIconColor } from "./hooks/useIconColor.js";
 import { useSafeArea } from "./hooks/useSafeArea.js";
+import { Icon, PrefixIcon, SuffixIcon } from "./components/Icon/Icon.jsx";
+import { AccordionBody, AccordionContent, AccordionDescription, AccordionHeader, AccordionItem, AccordionPrefix, AccordionRoot, AccordionSuffixIcon, AccordionTitle, AccordionTrigger } from "./components/Accordion/Accordion.jsx";
+import { Accordion_namespace_exports } from "./components/Accordion/Accordion.namespace.js";
+import { capitalize, resolveRecipeToken } from "./utils/resolve-recipe-token.js";
 import { ProgressCircleRange, ProgressCircleRoot } from "./components/ProgressCircle/ProgressCircle.jsx";
 import { ProgressCircle_namespace_exports } from "./components/ProgressCircle/ProgressCircle.namespace.js";
-import { useIconColor } from "./hooks/useIconColor.js";
-import { Icon, PrefixIcon, SuffixIcon } from "./components/Icon/Icon.jsx";
 import { ActionButton } from "./components/ActionButton/ActionButton.jsx";
 import { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle } from "./components/AppBar/AppBar.jsx";
 import { AppBar_namespace_exports } from "./components/AppBar/AppBar.namespace.js";
@@ -13,10 +16,14 @@ import { Badge } from "./components/Badge/Badge.jsx";
 import { Box } from "./components/Box/Box.jsx";
 import { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger } from "./components/BottomSheet/BottomSheet.jsx";
 import { BottomSheet_namespace_exports } from "./components/BottomSheet/BottomSheet.namespace.js";
-import { useControllableState } from "./hooks/useControllableState.js";
+import { CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle } from "./components/Callout/Callout.jsx";
+import { Callout_namespace_exports } from "./components/Callout/Callout.namespace.js";
 import { splitMultipleVariantsProps } from "./utils/split-multiple-variants-props.js";
 import { CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from "./components/Checkbox/Checkbox.jsx";
 import { Checkbox_namespace_exports } from "./components/Checkbox/Checkbox.namespace.js";
+import { ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle } from "./components/Chip/Chip.jsx";
+import { Chip_namespace_exports } from "./components/Chip/Chip.namespace.js";
+import { Divider } from "./components/Divider/Divider.jsx";
 import { FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot } from "./components/Field/Field.jsx";
 import { Field_namespace_exports } from "./components/Field/Field.namespace.js";
 import { KeyboardAvoidingScrollView } from "./components/KeyboardAvoidingScrollView/KeyboardAvoidingScrollView.jsx";
@@ -25,6 +32,8 @@ import { RadioGroup_namespace_exports } from "./components/RadioGroup/RadioGroup
 import { HStack, VStack } from "./components/Stack/Stack.jsx";
 import { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb } from "./components/Switch/Switch.jsx";
 import { Switch_namespace_exports } from "./components/Switch/Switch.namespace.js";
+import { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "./components/Tabs/Tabs.jsx";
+import { Tabs_namespace_exports } from "./components/Tabs/Tabs.namespace.js";
 import { TagGroupItem, TagGroupItemLabel, TagGroupRoot } from "./components/TagGroup/TagGroup.jsx";
 import { TagGroup_namespace_exports } from "./components/TagGroup/TagGroup.namespace.js";
 import { Text } from "./components/Text/Text.jsx";
@@ -33,4 +42,4 @@ import { useTextFieldWithGraphemes } from "./components/TextField/useTextFieldWi
 import { TextField_namespace_exports } from "./components/TextField/TextField.namespace.js";
 import { getSeedClassName } from "./utils/get-seed-class-name.js";
 import { useSeedClassName } from "./hooks/useSeedClassName.js";
-export { ActionButton, AppBar_namespace_exports as AppBar, AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, Badge, BottomSheet_namespace_exports as BottomSheet, BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, Box, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, Field_namespace_exports as Field, FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot, HStack, Icon, KeyboardAvoidingScrollView, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, SuffixIcon, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, TextField_namespace_exports as TextField, TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea, useSeedClassName, useTextFieldWithGraphemes };
+export { Accordion_namespace_exports as Accordion, AccordionBody, AccordionContent, AccordionDescription, AccordionHeader, AccordionItem, AccordionPrefix, AccordionRoot, AccordionSuffixIcon, AccordionTitle, AccordionTrigger, ActionButton, AppBar_namespace_exports as AppBar, AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, Badge, BottomSheet_namespace_exports as BottomSheet, BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, Box, Callout_namespace_exports as Callout, CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, Chip_namespace_exports as Chip, ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle, Divider, Field_namespace_exports as Field, FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot, HStack, Icon, KeyboardAvoidingScrollView, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, SuffixIcon, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, Tabs_namespace_exports as Tabs, TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, TextField_namespace_exports as TextField, TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea, useSeedClassName, useTextFieldWithGraphemes };