@seed-design/lynx-react 0.7.1 → 0.9.0

package/lib/components/QuantityPicker/QuantityPicker.jsx

@@ -0,0 +1,282 @@
+import { useControllableState } from "../../packages/lynx-react-headless/use-controllable-state/lib/index.js";
+import { usePressTap } from "../../packages/lynx-react-headless/use-press-tap/lib/index.js";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
+import { mergeProps } from "../../utils/merge-props.js";
+import { InternalIcon } from "../Icon/Icon.jsx";
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+import { quantityPicker } from "@seed-design/lynx-css/recipes/quantity-picker";
+//#region src/components/QuantityPicker/QuantityPicker.tsx
+var defaultGetValueText = (valueText) => valueText;
+var QuantityPickerContext = React.createContext(null);
+function useQuantityPickerContext(consumer) {
+	const context = React.useContext(QuantityPickerContext);
+	if (!context) throw new Error(`<${consumer}/> must be rendered inside <QuantityPickerRoot/>.`);
+	return context;
+}
+function assertSafeInteger(value, name) {
+	if (!Number.isSafeInteger(value)) throw new Error(`QuantityPicker: ${name} must be a safe integer.`);
+}
+function validateProps({ defaultValue, max, min, step, value }) {
+	assertSafeInteger(min, "min");
+	assertSafeInteger(max, "max");
+	assertSafeInteger(step, "step");
+	if (min > max) throw new Error("QuantityPicker: min must be less than or equal to max.");
+	if (step <= 0) throw new Error("QuantityPicker: step must be greater than 0.");
+	for (const [name, candidate] of [["value", value], ["defaultValue", defaultValue]]) {
+		if (candidate === void 0) continue;
+		assertSafeInteger(candidate, name);
+		if (candidate < min || candidate > max) throw new Error(`QuantityPicker: ${name} must be between min and max.`);
+	}
+}
+function getLoadingState(loading) {
+	if (loading === true) return {
+		decrement: true,
+		increment: true
+	};
+	return {
+		decrement: typeof loading === "object" ? loading?.decrement ?? false : false,
+		increment: typeof loading === "object" ? loading?.increment ?? false : false
+	};
+}
+function getValueDisplayPlaceholder(min, max) {
+	const boundary = String(min).length > String(max).length ? min : max;
+	return String(boundary).replace(/\d/g, "0");
+}
+function getAccessibleText(valueText, value) {
+	return typeof valueText === "string" || typeof valueText === "number" ? String(valueText) : String(value);
+}
+function recipeProps(context, pressed = false) {
+	return {
+		layout: context.layout,
+		size: context.size,
+		invalid: context.invalid,
+		disabled: context.disabled,
+		pressed,
+		loading: context.loading ?? false
+	};
+}
+function isQuantityPickerButton(child) {
+	return React.isValidElement(child) && (child.type === QuantityPickerDecrementButton || child.type === QuantityPickerIncrementButton);
+}
+function isQuantityPickerValueDisplay(child) {
+	return React.isValidElement(child) && child.type === QuantityPickerValueDisplay;
+}
+function flattenQuantityPickerChildren(children) {
+	if (children == null || typeof children === "boolean") return [];
+	if (Array.isArray(children)) return children.flatMap(flattenQuantityPickerChildren);
+	if (React.isValidElement(children) && children.type === React.Fragment) return flattenQuantityPickerChildren(children.props.children);
+	return [children];
+}
+function withDividers(children, dividerClassName) {
+	const childArray = flattenQuantityPickerChildren(children);
+	return childArray.flatMap((child, index) => {
+		const nextChild = childArray[index + 1];
+		if (!(isQuantityPickerButton(child) && isQuantityPickerValueDisplay(nextChild) || isQuantityPickerValueDisplay(child) && isQuantityPickerButton(nextChild))) return [child];
+		return [child, <view key={isQuantityPickerValueDisplay(child) ? "quantity-picker-divider-after-value" : "quantity-picker-divider-before-value"} accessibility-elements-hidden={true} className={dividerClassName} />];
+	});
+}
+function renderActionContent(icon, loadingIndicator, children, className, loading) {
+	if (loading) {
+		const content = loadingIndicator ?? children;
+		return <view className={className} accessibility-elements-hidden={true}>
+        {typeof content === "string" || typeof content === "number" ? <text>{content}</text> : content}
+      </view>;
+	}
+	if (icon == null) return typeof children === "string" || typeof children === "number" ? <text className={className}>{children}</text> : children;
+	if (typeof icon === "string" || typeof icon === "number") return <text className={className}>{icon}</text>;
+	if (!React.isValidElement(icon)) return icon;
+	return <InternalIcon icon={icon} className={className} accessibility-elements-hidden={true} />;
+}
+var QuantityPickerRoot = React.forwardRef((props, ref) => {
+	const { loading, ...propsWithoutLoading } = props;
+	const [variantProps, otherProps] = quantityPicker.splitVariantProps(propsWithoutLoading);
+	const { disabled = false, invalid = false, layout: layoutProp = "hug", size: sizeProp = "medium" } = variantProps;
+	const { children, className, min, max, step: stepProp = 1, value: valueProp, defaultValue, onValueChange, readOnly = false, onRemove, getValueText = defaultGetValueText, dir = "ltr", removable = false, removeAccessibilityLabel, "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "quantity picker", "accessibility-traits": accessibilityTraits, "accessibility-value": accessibilityValue, ...nativeProps } = otherProps;
+	validateProps({
+		min,
+		max,
+		step: stepProp,
+		value: valueProp,
+		defaultValue
+	});
+	const initialValue = defaultValue ?? min;
+	assertSafeInteger(initialValue, "defaultValue");
+	if (initialValue < min || initialValue > max) throw new Error("QuantityPicker: defaultValue must be between min and max.");
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue: initialValue,
+		onChange: onValueChange
+	});
+	const loadingState = getLoadingState(loading);
+	const isAtMin = value === min;
+	const isAtMax = value === max;
+	const isRemoveButton = removable && isAtMin;
+	const decrementDisabled = disabled || !isRemoveButton && isAtMin;
+	const incrementDisabled = disabled || isAtMax;
+	const decrementBlocked = decrementDisabled || readOnly || loadingState.decrement;
+	const incrementBlocked = incrementDisabled || readOnly || loadingState.increment;
+	const decrement = React.useCallback(() => {
+		"background only";
+		if (isRemoveButton) {
+			if (!decrementBlocked) onRemove?.();
+			return;
+		}
+		if (!decrementBlocked) setValue(Math.max(value - stepProp, min));
+	}, [
+		decrementBlocked,
+		isRemoveButton,
+		min,
+		onRemove,
+		setValue,
+		stepProp,
+		value
+	]);
+	const increment = React.useCallback(() => {
+		"background only";
+		if (!incrementBlocked) setValue(Math.min(value + stepProp, max));
+	}, [
+		incrementBlocked,
+		max,
+		setValue,
+		stepProp,
+		value
+	]);
+	const classes = quantityPicker(recipeProps({
+		layout: layoutProp,
+		size: sizeProp,
+		invalid,
+		disabled,
+		loading: loadingState.decrement || loadingState.increment
+	}));
+	const displayValue = getValueText(String(value), value);
+	const contextValue = React.useMemo(() => ({
+		layout: layoutProp,
+		size: sizeProp,
+		invalid,
+		disabled,
+		readOnly,
+		loading: loadingState.decrement || loadingState.increment,
+		value,
+		min,
+		max,
+		step: stepProp,
+		dir,
+		removable,
+		isAtMin,
+		isAtMax,
+		isRemoveButton,
+		removeAccessibilityLabel,
+		getValueText,
+		decrementLoading: loadingState.decrement,
+		incrementLoading: loadingState.increment,
+		decrementBlocked,
+		incrementBlocked,
+		decrement,
+		increment,
+		onRemove,
+		classes
+	}), [
+		classes,
+		decrement,
+		decrementBlocked,
+		disabled,
+		dir,
+		getValueText,
+		increment,
+		incrementBlocked,
+		invalid,
+		isAtMax,
+		isAtMin,
+		isRemoveButton,
+		loadingState.decrement,
+		loadingState.increment,
+		max,
+		min,
+		onRemove,
+		readOnly,
+		removeAccessibilityLabel,
+		removable,
+		layoutProp,
+		sizeProp,
+		value
+	]);
+	const orderedChildren = flattenQuantityPickerChildren(children);
+	if (dir === "rtl") orderedChildren.reverse();
+	return <QuantityPickerContext.Provider value={contextValue}>
+        <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(classes.root, className)} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} accessibility-traits={accessibilityTraits ?? (disabled ? "disabled" : void 0)} accessibility-value={accessibilityValue ?? getAccessibleText(displayValue, value)}>
+          {withDividers(orderedChildren, classes.divider)}
+        </view>
+      </QuantityPickerContext.Provider>;
+});
+QuantityPickerRoot.displayName = "QuantityPickerRoot";
+var QuantityPickerDecrementButton = React.forwardRef((props, ref) => {
+	const context = useQuantityPickerContext("QuantityPickerDecrementButton");
+	const { children, className, style, icon, loadingIndicator, removeIcon, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-role-description": accessibilityRoleDescription = "button", "accessibility-traits": accessibilityTraits, ...nativeProps } = props;
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
+		disabled: context.decrementBlocked,
+		onTap: (...args) => {
+			context.decrement();
+			bindtap?.(...args);
+		},
+		mainThreadOnTap: mainThreadBindtap
+	});
+	const classes = quantityPicker(recipeProps({
+		...context,
+		loading: context.decrementLoading,
+		disabled: context.decrementBlocked
+	}, pressed && !context.decrementBlocked));
+	const scaleFeedback = useScaleFeedback({
+		disabled: context.decrementBlocked,
+		onTouchStart: bindtouchstart,
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
+	});
+	const iconContent = context.isRemoveButton ? removeIcon ?? icon : icon;
+	return <view {...mergeProps(ref ? { ref } : {}, scaleFeedback.scaleFeedbackTargetProps, scaleFeedback.scaleFeedbackTriggerProps, pressHandlers, nativeProps)} className={clsx(classes.decrementButton, className)} style={style} accessibility-element={accessibilityElement} accessibility-label={context.isRemoveButton ? context.removeAccessibilityLabel : accessibilityLabel} accessibility-role-description={accessibilityRoleDescription} accessibility-traits={accessibilityTraits ?? (context.decrementBlocked ? "disabled" : "button")}>
+      {renderActionContent(iconContent, loadingIndicator, children, classes.decrementIcon, context.decrementLoading)}
+    </view>;
+});
+QuantityPickerDecrementButton.displayName = "QuantityPickerDecrementButton";
+var QuantityPickerValueDisplay = React.forwardRef((props, ref) => {
+	const context = useQuantityPickerContext("QuantityPickerValueDisplay");
+	const { className, style, "accessibility-elements-hidden": accessibilityElementsHidden = true, ...nativeProps } = props;
+	const valueText = context.getValueText(String(context.value), context.value);
+	const placeholderText = getValueDisplayPlaceholder(context.min, context.max);
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(quantityPicker(recipeProps(context)).valueDisplay, className)} style={style} accessibility-elements-hidden={accessibilityElementsHidden}>
+      <text accessibility-elements-hidden={true} className={quantityPicker(recipeProps(context)).valueDisplayPlaceholder}>
+        {context.getValueText(placeholderText, placeholderText)}
+      </text>
+      <text className={quantityPicker(recipeProps(context)).valueDisplayText}>{valueText}</text>
+    </view>;
+});
+QuantityPickerValueDisplay.displayName = "QuantityPickerValueDisplay";
+var QuantityPickerIncrementButton = React.forwardRef((props, ref) => {
+	const context = useQuantityPickerContext("QuantityPickerIncrementButton");
+	const { children, className, style, icon, loadingIndicator, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-role-description": accessibilityRoleDescription = "button", "accessibility-traits": accessibilityTraits, ...nativeProps } = props;
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
+		disabled: context.incrementBlocked,
+		onTap: (...args) => {
+			context.increment();
+			bindtap?.(...args);
+		},
+		mainThreadOnTap: mainThreadBindtap
+	});
+	const classes = quantityPicker(recipeProps({
+		...context,
+		loading: context.incrementLoading,
+		disabled: context.incrementBlocked
+	}, pressed && !context.incrementBlocked));
+	const scaleFeedback = useScaleFeedback({
+		disabled: context.incrementBlocked,
+		onTouchStart: bindtouchstart,
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
+	});
+	return <view {...mergeProps(ref ? { ref } : {}, scaleFeedback.scaleFeedbackTargetProps, scaleFeedback.scaleFeedbackTriggerProps, pressHandlers, nativeProps)} className={clsx(classes.incrementButton, className)} style={style} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel} accessibility-role-description={accessibilityRoleDescription} accessibility-traits={accessibilityTraits ?? (context.incrementBlocked ? "disabled" : "button")}>
+      {renderActionContent(icon, loadingIndicator, children, classes.incrementIcon, context.incrementLoading)}
+    </view>;
+});
+QuantityPickerIncrementButton.displayName = "QuantityPickerIncrementButton";
+//#endregion
+export { QuantityPickerDecrementButton, QuantityPickerIncrementButton, QuantityPickerRoot, QuantityPickerValueDisplay };

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

@@ -0,0 +1,2 @@
+export { QuantityPickerRoot as Root, QuantityPickerDecrementButton as DecrementButton, QuantityPickerValueDisplay as ValueDisplay, QuantityPickerIncrementButton as IncrementButton, type QuantityPickerRootProps as RootProps, type QuantityPickerDecrementButtonProps as DecrementButtonProps, type QuantityPickerValueDisplayProps as ValueDisplayProps, type QuantityPickerIncrementButtonProps as IncrementButtonProps, } from './QuantityPicker';
+//# sourceMappingURL=QuantityPicker.namespace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityPicker.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityPicker/QuantityPicker.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,IAAI,EAC1B,6BAA6B,IAAI,eAAe,EAChD,0BAA0B,IAAI,YAAY,EAC1C,6BAA6B,IAAI,eAAe,EAChD,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,kCAAkC,IAAI,oBAAoB,EAC/D,KAAK,+BAA+B,IAAI,iBAAiB,EACzD,KAAK,kCAAkC,IAAI,oBAAoB,GAChE,MAAM,kBAAkB,CAAC"}

package/lib/components/QuantityPicker/QuantityPicker.namespace.js

@@ -0,0 +1,11 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { QuantityPickerDecrementButton, QuantityPickerIncrementButton, QuantityPickerRoot, QuantityPickerValueDisplay } from "./QuantityPicker.jsx";
+//#region src/components/QuantityPicker/QuantityPicker.namespace.ts
+var QuantityPicker_namespace_exports = /* @__PURE__ */ __exportAll({
+	DecrementButton: () => QuantityPickerDecrementButton,
+	IncrementButton: () => QuantityPickerIncrementButton,
+	Root: () => QuantityPickerRoot,
+	ValueDisplay: () => QuantityPickerValueDisplay
+});
+//#endregion
+export { QuantityPicker_namespace_exports };

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

@@ -0,0 +1,3 @@
+export { QuantityPickerRoot, QuantityPickerDecrementButton, QuantityPickerValueDisplay, QuantityPickerIncrementButton, type QuantityPickerRootProps, type QuantityPickerDecrementButtonProps, type QuantityPickerValueDisplayProps, type QuantityPickerIncrementButtonProps, type QuantityPickerLoading, type QuantityPickerGetValueText, } from './QuantityPicker';
+export * as QuantityPicker from './QuantityPicker.namespace';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,6BAA6B,EAC7B,0BAA0B,EAC1B,6BAA6B,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,kCAAkC,EACvC,KAAK,+BAA+B,EACpC,KAAK,kCAAkC,EACvC,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,GAChC,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}

package/lib/components/RadioGroup/RadioGroup.jsx

@@ -1,5 +1,5 @@
-import { useControllableState } from "../../hooks/useControllableState.js";
-import { usePressTap } from "../../hooks/usePressTap.js";
+import { useControllableState } from "../../packages/lynx-react-headless/use-controllable-state/lib/index.js";
+import { usePressTap } from "../../packages/lynx-react-headless/use-press-tap/lib/index.js";
 import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
 import { mergeProps } from "../../utils/merge-props.js";
 import { InternalIcon } from "../Icon/Icon.jsx";

package/lib/components/ReactionButton/ReactionButton.d.ts

@@ -9,7 +9,7 @@ import * as React from "@lynx-js/react";
  * - 키보드 focus / focusVisible
  * - `asChild`
  */
-export interface ReactionButtonProps extends Omit<ReactionButtonVariantProps, "selected" | "pressed" | "disabled" | "loading">, LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
+export interface ReactionButtonProps extends Omit<ReactionButtonVariantProps, "selected" | "pressed" | "disabled" | "loading">, Omit<LynxStyledElementProps, "flatten">, LynxPressableProps, LynxAccessibilityProps {
     pressed?: boolean;
     defaultPressed?: boolean;
     onPressedChange?: (pressed: boolean) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ReactionButton/ReactionButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAEhG,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAKxC,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAEvB,MAAM,aAAa,CAAC;AAMrB;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC,EACvF,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,qFAkGzB,CAAC"}
+{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ReactionButton/ReactionButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAEhG,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAOxC,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAEvB,MAAM,aAAa,CAAC;AAMrB;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC,EACvF,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,EACvC,kBAAkB,EAClB,sBAAsB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,qFAwGzB,CAAC"}

package/lib/components/ReactionButton/ReactionButton.jsx

@@ -1,6 +1,8 @@
-import { useControllableState } from "../../hooks/useControllableState.js";
-import { usePressTap } from "../../hooks/usePressTap.js";
+import { useControllableState } from "../../packages/lynx-react-headless/use-controllable-state/lib/index.js";
+import { usePressTap } from "../../packages/lynx-react-headless/use-press-tap/lib/index.js";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
 import { toArray } from "../../utils/children.js";
+import { mergeProps } from "../../utils/merge-props.js";
 import { IconSlotProvider, getIconSlotName } from "../Icon/Icon.jsx";
 import { ProgressCircleRange, ProgressCircleRoot } from "../ProgressCircle/ProgressCircle.jsx";
 import { isCountElement } from "../Count/Count.jsx";
@@ -18,18 +20,25 @@ var ReactionButton = React.forwardRef((props, ref) => {
 		defaultValue: defaultPressed,
 		onChange: onPressedChange
 	});
-	const { pressed, ...pressHandlers } = usePressTap({
-		disabled,
-		onTap: React.useCallback((...args) => {
-			setSelected(!selected);
-			bindtap?.(...args);
-		}, [
-			bindtap,
-			selected,
-			setSelected
-		]),
+	const handleTap = React.useCallback((...args) => {
+		setSelected(!selected);
+		bindtap?.(...args);
+	}, [
+		bindtap,
+		selected,
+		setSelected
+	]);
+	const { pressed, bindtouchstart, bindtouchend, bindtouchcancel, ...pressHandlers } = usePressTap({
+		disabled: disabled || loading,
+		onTap: handleTap,
 		mainThreadOnTap: mainThreadBindtap
 	});
+	const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback({
+		disabled: disabled || loading,
+		onTouchStart: bindtouchstart,
+		onTouchEnd: bindtouchend,
+		onTouchCancel: bindtouchcancel
+	});
 	const classNames = reactionButton({
 		...variantProps,
 		selected,
@@ -69,7 +78,7 @@ var ReactionButton = React.forwardRef((props, ref) => {
 		labelChildren.push(child);
 	}
 	return <IconSlotProvider value={iconSlotContextValue}>
-      <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(classNames.root, className)} style={style} accessibility-element={accessibilityElement} accessibility-traits={disabled ? "disabled" : selected ? "selected" : accessibilityTraits ?? "button"} {...pressHandlers}>
+      <view {...mergeProps(ref ? { ref } : {}, scaleFeedbackTargetProps, scaleFeedbackTriggerProps, pressHandlers, nativeProps)} flatten={false} className={clsx(classNames.root, className)} style={style} accessibility-element={accessibilityElement} accessibility-traits={disabled ? "disabled" : selected ? "selected" : accessibilityTraits ?? "button"}>
         <view className={classNames.content}>
           {prefixIconChildren}
           {labelChildren.length > 0 ? <text className={classNames.label}>{labelChildren}</text> : null}

package/lib/components/ScrollFog/ScrollFog.d.ts

@@ -0,0 +1,41 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from '@lynx-js/react';
+import { IntrinsicElements, NodesRef } from '@lynx-js/types';
+type NativeViewProps = Omit<IntrinsicElements["view"], `main-thread:${string}`>;
+type LynxForwardRefComponent<T, P> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+type ScrollFogPlacement = "top" | "bottom" | "left" | "right";
+type SizesConfig = {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+};
+/**
+ * @platform Lynx
+ *
+ * A two-axis scroll area with independently configurable edge masks.
+ */
+export interface ScrollFogProps extends Omit<NativeViewProps, "children" | "className" | "style"> {
+    children?: ReactNode;
+    className?: NativeViewProps["className"];
+    style?: NativeViewProps["style"];
+    /**
+     * Fog 효과를 표시할 방향입니다.
+     * @defaultValue ["top", "bottom"]
+     */
+    placement?: ScrollFogPlacement[];
+    /**
+     * Fog 효과의 크기입니다. 숫자는 px 단위로 처리합니다.
+     * @defaultValue 20
+     */
+    size?: number | string;
+    /** 방향별 Fog 효과의 크기입니다. 숫자는 px 단위로 처리합니다. */
+    sizes?: SizesConfig;
+    /**
+     * Native scroll indicator를 숨깁니다.
+     * @defaultValue false
+     */
+    hideScrollBar?: boolean;
+}
+export declare const ScrollFog: LynxForwardRefComponent<NodesRef, ScrollFogProps>;
+export {};
+//# sourceMappingURL=ScrollFog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollFog.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollFog/ScrollFog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,yBAAyB,EACzB,eAAe,EACf,SAAS,EACT,aAAa,EACd,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAGlE,KAAK,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,eAAe,MAAM,EAAE,CAAC,CAAC;AAChF,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,yBAAyB,CAC5D,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CACtC,CAAC;AAEF,KAAK,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9D,KAAK,WAAW,GAAG;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA8BF;;;;GAIG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAC/F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,EAAE,uBAAuB,CAAC,QAAQ,EAAE,cAAc,CAwFtE,CAAC"}

package/lib/components/ScrollFog/ScrollFog.jsx

@@ -0,0 +1,65 @@
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+import { scrollFog } from "@seed-design/lynx-css/vars/component";
+import { scrollFog as scrollFog$1 } from "@seed-design/lynx-css/recipes/scroll-fog";
+//#region src/components/ScrollFog/ScrollFog.tsx
+var DEFAULT_SIZE = scrollFog.base.enabled.root.size;
+function normalizeSize(size) {
+	return typeof size === "number" ? `${size}px` : size;
+}
+function createRootStyle(style, sizes) {
+	const variables = {
+		"--scroll-fog-size-top": sizes.top,
+		"--scroll-fog-size-bottom": sizes.bottom,
+		"--scroll-fog-size-left": sizes.left,
+		"--scroll-fog-size-right": sizes.right
+	};
+	if (typeof style === "string") return `${style}; ${Object.entries(variables).map(([property, value]) => `${property}: ${value}`).join("; ")}`;
+	return {
+		...style,
+		...variables
+	};
+}
+var ScrollFog = React.forwardRef((props, forwardedRef) => {
+	const { children, className, style, placement = ["top", "bottom"], size = DEFAULT_SIZE, sizes, hideScrollBar = false, ...rootProps } = props;
+	const normalizedSize = normalizeSize(size);
+	const topSize = sizes?.top ? normalizeSize(sizes.top) : normalizedSize;
+	const bottomSize = sizes?.bottom ? normalizeSize(sizes.bottom) : normalizedSize;
+	const leftSize = sizes?.left ? normalizeSize(sizes.left) : normalizedSize;
+	const rightSize = sizes?.right ? normalizeSize(sizes.right) : normalizedSize;
+	const scrollBarEnabled = !hideScrollBar;
+	const classNames = scrollFog$1({
+		top: placement.includes("top"),
+		bottom: placement.includes("bottom"),
+		left: placement.includes("left"),
+		right: placement.includes("right")
+	});
+	let content = <scroll-view enable-nested-scroll scroll-bar-enable={scrollBarEnabled} scroll-orientation="vertical" className={classNames.verticalScroll}>
+      <scroll-view enable-nested-scroll scroll-bar-enable={scrollBarEnabled} scroll-orientation="horizontal" className={classNames.horizontalScroll}>
+        {children}
+      </scroll-view>
+    </scroll-view>;
+	if (placement.includes("right")) content = <view flatten={false} className={classNames.rightMask}>
+        {content}
+      </view>;
+	if (placement.includes("left")) content = <view flatten={false} className={classNames.leftMask}>
+        {content}
+      </view>;
+	if (placement.includes("bottom")) content = <view flatten={false} className={classNames.bottomMask}>
+        {content}
+      </view>;
+	if (placement.includes("top")) content = <view flatten={false} className={classNames.topMask}>
+        {content}
+      </view>;
+	return <view {...forwardedRef ? { ref: forwardedRef } : {}} {...rootProps} className={clsx(classNames.root, className)} style={createRootStyle(style, {
+		top: topSize,
+		bottom: bottomSize,
+		left: leftSize,
+		right: rightSize
+	})}>
+      {content}
+    </view>;
+});
+ScrollFog.displayName = "ScrollFog";
+//#endregion
+export { ScrollFog };

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

@@ -0,0 +1,2 @@
+export { ScrollFog, type ScrollFogProps } from './ScrollFog';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollFog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/lib/components/SegmentedControl/SegmentedControl.jsx

@@ -1,5 +1,5 @@
-import { useControllableState } from "../../hooks/useControllableState.js";
-import { usePressTap } from "../../hooks/usePressTap.js";
+import { useControllableState } from "../../packages/lynx-react-headless/use-controllable-state/lib/index.js";
+import { usePressTap } from "../../packages/lynx-react-headless/use-press-tap/lib/index.js";
 import { useScaleFeedback } from "../../hooks/useScaleFeedback.js";
 import { mergeProps } from "../../utils/merge-props.js";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";

package/lib/components/Select/Select.d.ts

@@ -0,0 +1,112 @@
+import { BaseEvent } from '@lynx-js/types';
+import { SelectVariantProps } from '@seed-design/lynx-css/recipes/select';
+import { SelectTriggerVariantProps } from '@seed-design/lynx-css/recipes/select-trigger';
+import { SelectItemVariantProps } from '@seed-design/lynx-css/recipes/select-item';
+import { LynxAccessibilityProps, LynxPressableProps, LynxStyledElementProps } from '../../types';
+import { InternalIconProps } from '../Icon/Icon';
+import { Placement as SelectPlacement } from '../private/Positioning';
+import * as React from "@lynx-js/react";
+type SelectPublicVariantProps = Omit<SelectVariantProps, "size" | "open" | "positioned"> & {
+    size?: "large" | "medium" | "responsive";
+};
+type SelectTriggerPublicVariantProps = Omit<SelectTriggerVariantProps, "size" | "open" | "pressed" | "disabled" | "readOnly" | "invalid">;
+type SelectItemPublicVariantProps = Omit<SelectItemVariantProps, "size" | "selected" | "pressed" | "disabled">;
+export type SelectOpenChangeReason = "trigger" | "interactOutside" | "itemSelect" | "dismiss";
+export interface SelectOpenChangeDetails {
+    reason: SelectOpenChangeReason;
+    event: BaseEvent;
+}
+export interface SelectSelectedItem {
+    value: string;
+    label: React.ReactNode;
+    textValue: string;
+    prefixIcon?: React.ReactNode;
+    resolved: boolean;
+}
+/**
+ * @platform Lynx
+ *
+ * Web-only DOM APIs are intentionally omitted: `asChild`, hidden native select/name/form
+ * submission, DOM focus/typeahead/keyboard navigation, and ARIA ids all rely on a browser DOM.
+ * Lynx uses native tap, overlay dismissal, `accessibility-*` attributes, and app-owned state.
+ */
+export interface SelectRootProps extends SelectPublicVariantProps, SelectTriggerPublicVariantProps, SelectItemPublicVariantProps, LynxStyledElementProps {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    multiple?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, details: SelectOpenChangeDetails) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    placement?: SelectPlacement;
+    gutter?: number;
+    overflowPadding?: number;
+    formatValue?: (items: SelectSelectedItem[]) => React.ReactNode;
+}
+export declare const SelectRoot: React.ForwardRefExoticComponent<SelectRootProps & React.RefAttributes<unknown>>;
+export interface SelectTriggerProps extends SelectTriggerPublicVariantProps, LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
+    placeholder?: React.ReactNode;
+    prefixIcon?: React.ReactNode;
+    suffixIcon?: React.ReactNode;
+}
+export declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<unknown>>;
+export interface SelectValueProps extends LynxStyledElementProps {
+}
+export declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<unknown>>;
+export interface SelectPlaceholderProps extends LynxStyledElementProps {
+}
+export declare const SelectPlaceholder: React.ForwardRefExoticComponent<SelectPlaceholderProps & React.RefAttributes<unknown>>;
+export interface SelectPrefixIconProps extends Omit<InternalIconProps, "icon" | "deps"> {
+    fallback?: React.ReactNode;
+}
+export declare const SelectPrefixIcon: React.ForwardRefExoticComponent<SelectPrefixIconProps & React.RefAttributes<unknown>>;
+export interface SelectSuffixIconProps extends Omit<InternalIconProps, "icon" | "deps"> {
+    icon?: React.ReactNode;
+}
+export declare const SelectSuffixIcon: React.ForwardRefExoticComponent<SelectSuffixIconProps & React.RefAttributes<unknown>>;
+export interface SelectContentProps extends LynxStyledElementProps {
+}
+export declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<unknown>>;
+/** The viewport is normally owned by SelectContent; use this only for custom content composition. */
+export interface SelectScrollAreaProps extends LynxStyledElementProps {
+}
+export declare const SelectScrollArea: React.ForwardRefExoticComponent<SelectScrollAreaProps & React.RefAttributes<unknown>>;
+export interface SelectGroupProps extends LynxStyledElementProps {
+}
+export declare const SelectGroup: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<unknown>>;
+export interface SelectGroupLabelProps extends LynxStyledElementProps, LynxAccessibilityProps {
+}
+export declare const SelectGroupLabel: React.ForwardRefExoticComponent<SelectGroupLabelProps & React.RefAttributes<unknown>>;
+export interface SelectItemProps extends SelectItemPublicVariantProps, LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
+    value: string;
+    label?: React.ReactNode;
+    textValue?: string;
+    prefixIcon?: React.ReactNode;
+    disabled?: boolean;
+    readOnly?: boolean;
+}
+export declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<unknown>>;
+export interface SelectItemPrefixIconProps extends Omit<InternalIconProps, "icon" | "deps"> {
+    icon?: React.ReactNode;
+}
+export declare const SelectItemPrefixIcon: React.ForwardRefExoticComponent<SelectItemPrefixIconProps & React.RefAttributes<unknown>>;
+export interface SelectItemBodyProps extends LynxStyledElementProps {
+}
+export declare const SelectItemBody: React.ForwardRefExoticComponent<SelectItemBodyProps & React.RefAttributes<unknown>>;
+export interface SelectItemLabelProps extends LynxStyledElementProps {
+}
+export declare const SelectItemLabel: React.ForwardRefExoticComponent<SelectItemLabelProps & React.RefAttributes<unknown>>;
+export interface SelectItemDescriptionProps extends LynxStyledElementProps {
+}
+export declare const SelectItemDescription: React.ForwardRefExoticComponent<SelectItemDescriptionProps & React.RefAttributes<unknown>>;
+export interface SelectItemIndicatorProps extends Omit<InternalIconProps, "icon" | "deps"> {
+    selected?: React.ReactNode;
+    unselected?: React.ReactNode;
+}
+export declare const SelectItemIndicator: React.ForwardRefExoticComponent<SelectItemIndicatorProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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"}