@seed-design/lynx-react 0.4.0 → 0.5.0

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

@@ -0,0 +1,59 @@
+import { TabsVariantProps } from '@seed-design/lynx-css/recipes/tabs';
+import { IntrinsicElements } from '@lynx-js/types';
+import { LynxAccessibilityProps, LynxStyledElementProps } from '../../types';
+import * as React from "@lynx-js/react";
+type NativeViewPagerProps = IntrinsicElements["viewpager"];
+type TabsPublicVariantProps = Omit<TabsVariantProps, "selected" | "disabled" | "inCarousel">;
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - `orientation`: Lynx Tabs는 수평 방향만 지원
+ * - `lazyMount`, `unmountOnExit`: native viewpager가 모든 page slot을 유지해야 함
+ * - 키보드 포커스와 roving tabindex
+ */
+export interface TabsRootProps extends TabsPublicVariantProps, LynxStyledElementProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export declare const TabsRoot: React.ForwardRefExoticComponent<TabsRootProps & React.RefAttributes<unknown>>;
+export interface TabsListProps extends LynxStyledElementProps {
+}
+export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<unknown>>;
+export interface TabsTriggerProps extends LynxStyledElementProps {
+    value: string;
+    disabled?: boolean;
+    "accessibility-label"?: LynxAccessibilityProps["accessibility-label"];
+}
+export declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<unknown>>;
+export interface TabsIndicatorProps extends LynxStyledElementProps {
+}
+export declare const TabsIndicator: React.ForwardRefExoticComponent<TabsIndicatorProps & React.RefAttributes<unknown>>;
+export interface TabsContentProps extends LynxStyledElementProps {
+    value: string;
+}
+export declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<unknown>>;
+/**
+ * @platform Lynx
+ *
+ * native viewpager를 사용하므로 웹의 `loop`, `autoHeight`, `dragThreshold`,
+ * `carouselPreventDrag`는 지원하지 않습니다.
+ */
+export interface TabsCarouselProps extends LynxStyledElementProps {
+    swipeable?: boolean;
+    /** iOS 뒤로가기 제스처를 우선하는 화면 왼쪽 가장자리 너비입니다. */
+    iosBackGestureEdgeWidth?: number;
+    onSettle?: () => void;
+    onSwipeStart?: () => void;
+    onSwipeEnd?: () => void;
+}
+export declare const TabsCarousel: React.ForwardRefExoticComponent<TabsCarouselProps & React.RefAttributes<unknown>>;
+export interface TabsCarouselCameraProps extends LynxStyledElementProps {
+    bindchange?: NativeViewPagerProps["bindchange"];
+    bindwillchange?: NativeViewPagerProps["bindwillchange"];
+    bindoffsetchange?: NativeViewPagerProps["bindoffsetchange"];
+}
+export declare const TabsCarouselCamera: React.ForwardRefExoticComponent<TabsCarouselCameraProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,gBAAgB,CAAC;AAKxB,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAIrB,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAI3D,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC;AAyF7F;;;;;;;GAOG;AACH,MAAM,WAAW,aAAc,SAAQ,sBAAsB,EAAE,sBAAsB;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,QAAQ,+EAmMnB,CAAC;AAKH,MAAM,WAAW,aAAc,SAAQ,sBAAsB;CAAG;AAEhE,eAAO,MAAM,QAAQ,+EAsCnB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,sBAAsB,CAAC,qBAAqB,CAAC,CAAC;CACvE;AAED,eAAO,MAAM,WAAW,kFAiEtB,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;CAAG;AAErE,eAAO,MAAM,aAAa,oFAkCxB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,kFAgCtB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,mFA8BvB,CAAC;AAKH,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,kBAAkB,yFAmH9B,CAAC"}

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.d.ts

@@ -14,7 +14,8 @@ import * as React from "@lynx-js/react";
  */
 export interface TagGroupRootProps extends TagGroupVariantProps, TagGroupItemVariantProps, LynxStyledElementProps {
     /**
-     * children 사이에 삽입되는 구분자. 기본값 `" · "`.
+     * children 사이에 삽입되는 구분자. 기본값 `"·"`.
+     * 문자열을 전달하면 앞뒤 공백을 제거합니다.
      */
     separator?: React.ReactNode;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,KAAK,EAAE,sBAAsB,EAA4B,MAAM,aAAa,CAAC;AAIpF,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOpE;;;;;;;;GAQG;AACH,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,sBAAsB;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,mFAiCvB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,EAC9B,sBAAsB;CAAG;AAE7B,eAAO,MAAM,YAAY,mFAmBvB,CAAC;AAKH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;CAAG;AAEzE,eAAO,MAAM,iBAAiB,wFAY5B,CAAC"}
+{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,KAAK,EAAE,sBAAsB,EAA4B,MAAM,aAAa,CAAC;AAIpF,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOpE;;;;;;;;GAQG;AACH,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,sBAAsB;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,mFAkCvB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,EAC9B,sBAAsB;CAAG;AAE7B,eAAO,MAAM,YAAY,mFAmBvB,CAAC;AAKH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;CAAG;AAEzE,eAAO,MAAM,iBAAiB,wFAY5B,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
@@ -15,13 +15,14 @@ var TagGroupRoot = React.forwardRef((props, ref) => {
 	});
 	const { children, className, separator = " · ", ...nativeProps } = otherProps;
 	const classes = tagGroup(tagGroupVariantProps);
+	const normalizedSeparator = typeof separator === "string" ? separator.trim() : separator;
 	const visibleChildren = toArray(children);
 	return <PropsProvider value={tagGroupItemVariantProps}>
       <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
         {visibleChildren.map((child, index) => {
 		if (index === 0) return child;
 		return <view key={child.key ?? index} className={classes.separatorWrapper}>
-              <text className={classes.separator}>{separator}</text>
+              <text className={classes.separator}>{normalizedSeparator}</text>
               {child}
             </view>;
 	})}

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.d.ts

@@ -44,13 +44,22 @@ export interface TextFieldInputProps extends NativeTextControlProps {
     maxlength?: NativeInputProps["maxlength"];
     readonly?: NativeInputProps["readonly"];
     disabled?: NativeInputProps["disabled"];
+    /**
+     * 포커스할 때 시스템 키보드를 표시한다.
+     * `undefined`가 native attribute로 전달되지 않도록 `true`를 명시적으로 적용한다.
+     * @defaultValue true
+     */
     "show-soft-input-on-focus"?: NativeInputProps["show-soft-input-on-focus"];
     "input-filter"?: NativeInputProps["input-filter"];
     type?: NativeInputProps["type"];
     "ios-auto-correct"?: NativeInputProps["ios-auto-correct"];
     "ios-spell-check"?: NativeInputProps["ios-spell-check"];
     "android-fullscreen-mode"?: NativeInputProps["android-fullscreen-mode"];
-    /** Android host window의 soft input mode를 지정한다. */
+    /**
+     * Android host window의 soft input mode를 지정한다.
+     * `undefined`가 native attribute로 전달되지 않도록 `"unspecified"`를 명시적으로 적용한다.
+     * @defaultValue "unspecified"
+     */
     "android-set-soft-input-mode"?: AndroidSetSoftInputMode;
     bindfocus?: NativeInputProps["bindfocus"];
     bindblur?: NativeInputProps["bindblur"];
@@ -80,6 +89,11 @@ export interface TextFieldTextareaProps extends NativeTextControlProps {
     "line-spacing"?: NativeTextareaProps["line-spacing"];
     readonly?: NativeTextareaProps["readonly"];
     disabled?: NativeTextareaProps["disabled"];
+    /**
+     * 포커스할 때 시스템 키보드를 표시한다.
+     * `undefined`가 native attribute로 전달되지 않도록 `true`를 명시적으로 적용한다.
+     * @defaultValue true
+     */
     "show-soft-input-on-focus"?: NativeTextareaProps["show-soft-input-on-focus"];
     "input-filter"?: NativeTextareaProps["input-filter"];
     "enable-scroll-bar"?: NativeTextareaProps["enable-scroll-bar"];
@@ -88,7 +102,11 @@ export interface TextFieldTextareaProps extends NativeTextControlProps {
     "ios-spell-check"?: NativeTextareaProps["ios-spell-check"];
     /** Android의 fullscreen extract input을 활성화한다. @defaultValue false */
     "android-fullscreen-mode"?: NativeTextareaProps["android-fullscreen-mode"];
-    /** Android host window의 soft input mode를 지정한다. */
+    /**
+     * Android host window의 soft input mode를 지정한다.
+     * `undefined`가 native attribute로 전달되지 않도록 `"unspecified"`를 명시적으로 적용한다.
+     * @defaultValue "unspecified"
+     */
     "android-set-soft-input-mode"?: AndroidSetSoftInputMode;
     bindfocus?: NativeTextareaProps["bindfocus"];
     bindblur?: NativeTextareaProps["bindblur"];

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAIjG,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAG/F,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AA+BpE;;;;;;GAMG;AACH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAC5C,sBAAsB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mEAAmE;IACnE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,aAAa,qFAuHzB,CAAC;AAKF,KAAK,gBAAgB,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;AACnD,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;AAmUzD,UAAU,sBACR,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAC9C,sBAAsB;IACxB,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IACxD,8BAA8B,CAAC,EAAE,gBAAgB,CAAC,8BAA8B,CAAC,CAAC;CACnF;AAED,KAAK,uBAAuB,GAAG,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAyC5E;;;;;GAKG;AACH,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;IACjE,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;IAC1E,cAAc,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IAC1D,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IACxD,yBAAyB,CAAC,EAAE,gBAAgB,CAAC,yBAAyB,CAAC,CAAC;IACxE;;;;OAIG;IACH,6BAA6B,CAAC,EAAE,uBAAuB,CAAC;IACxD,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,gBAAgB,CAAC,eAAe,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,sFAqFzB,CAAC;AAGH;;;;;GAKG;AACH,MAAM,WAAW,sBAAuB,SAAQ,sBAAsB;IACpE,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC3C;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,mBAAmB,CAAC,0BAA0B,CAAC,CAAC;IAC7E,cAAc,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;IAC/D,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;IAC7D,iBAAiB,CAAC,EAAE,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;IAC3D,oEAAoE;IACpE,yBAAyB,CAAC,EAAE,mBAAmB,CAAC,yBAAyB,CAAC,CAAC;IAC3E;;;;OAIG;IACH,6BAA6B,CAAC,EAAE,uBAAuB,CAAC;IACxD,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,mBAAmB,CAAC,eAAe,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,iBAAiB,yFAuJ7B,CAAC;AAKF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,0FAS/B,CAAC;AAGF,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;CAAG;AAE3E,eAAO,MAAM,mBAAmB,0FAe/B,CAAC;AAGF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAAG;AAEtE,eAAO,MAAM,mBAAmB,0FAS/B,CAAC;AAGF,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;CAAG;AAE3E,eAAO,MAAM,mBAAmB,0FAe/B,CAAC"}