@seed-design/lynx-react 0.7.1 → 0.8.0

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

@@ -0,0 +1,53 @@
+import { QuantityPickerVariantProps } from '@seed-design/lynx-css/recipes/quantity-picker';
+import { LynxAccessibilityProps, LynxStyledElementProps, LynxTouchProps } from '../../types';
+import * as React from "@lynx-js/react";
+export type QuantityPickerLoading = boolean | {
+    decrement?: boolean;
+    increment?: boolean;
+};
+export type QuantityPickerGetValueText = (valueText: string, value: number | string) => React.ReactNode;
+type QuantityPickerRootBaseProps = Omit<LynxStyledElementProps, "children"> & LynxAccessibilityProps & {
+    children?: React.ReactNode;
+    min: number;
+    max: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+    readOnly?: boolean;
+    loading?: QuantityPickerLoading;
+    onRemove?: () => void;
+    getValueText?: QuantityPickerGetValueText;
+    dir?: "ltr" | "rtl";
+    layout?: QuantityPickerVariantProps["layout"];
+    size?: QuantityPickerVariantProps["size"];
+};
+type QuantityPickerRemovableProps = {
+    removable: true;
+    removeAccessibilityLabel: string;
+    onRemove: () => void;
+};
+type QuantityPickerNonRemovableProps = {
+    removable?: false;
+    removeAccessibilityLabel?: string;
+};
+export type QuantityPickerRootProps = QuantityPickerRootBaseProps & (QuantityPickerRemovableProps | QuantityPickerNonRemovableProps);
+export interface QuantityPickerDecrementButtonProps extends LynxStyledElementProps, LynxTouchProps, LynxAccessibilityProps {
+    icon?: React.ReactNode;
+    loadingIndicator?: React.ReactNode;
+    removeIcon?: React.ReactNode;
+}
+export interface QuantityPickerValueDisplayProps extends Omit<LynxStyledElementProps, "children">, LynxAccessibilityProps {
+}
+export interface QuantityPickerIncrementButtonProps extends LynxStyledElementProps, LynxTouchProps, LynxAccessibilityProps {
+    icon?: React.ReactNode;
+    loadingIndicator?: React.ReactNode;
+}
+export declare const QuantityPickerRoot: React.ForwardRefExoticComponent<QuantityPickerRootProps & React.RefAttributes<unknown>>;
+export declare const QuantityPickerDecrementButton: React.ForwardRefExoticComponent<QuantityPickerDecrementButtonProps & React.RefAttributes<unknown>>;
+export declare const QuantityPickerValueDisplay: React.ForwardRefExoticComponent<QuantityPickerValueDisplayProps & React.RefAttributes<unknown>>;
+export declare const QuantityPickerIncrementButton: React.ForwardRefExoticComponent<QuantityPickerIncrementButtonProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=QuantityPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityPicker.d.ts","sourceRoot":"","sources":["../../../src/components/QuantityPicker/QuantityPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,0BAA0B,EAChC,MAAM,+CAA+C,CAAC;AAEvD,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAKxC,OAAO,KAAK,EACV,sBAAsB,EAEtB,sBAAsB,EACtB,cAAc,EAEf,MAAM,aAAa,CAAC;AAIrB,MAAM,MAAM,qBAAqB,GAC7B,OAAO,GACP;IACE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEN,MAAM,MAAM,0BAA0B,GAAG,CACvC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GAAG,MAAM,KACnB,KAAK,CAAC,SAAS,CAAC;AAIrB,KAAK,2BAA2B,GAAG,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,GACzE,sBAAsB,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,0BAA0B,CAAC;IAC1C,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,MAAM,CAAC,EAAE,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,CAAC,EAAE,0BAA0B,CAAC,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEJ,KAAK,4BAA4B,GAAG;IAClC,SAAS,EAAE,IAAI,CAAC;IAChB,wBAAwB,EAAE,MAAM,CAAC;IACjC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,+BAA+B,GAAG;IACrC,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,2BAA2B,GAC/D,CAAC,4BAA4B,GAAG,+BAA+B,CAAC,CAAC;AAEnE,MAAM,WAAW,kCACf,SAAQ,sBAAsB,EAC5B,cAAc,EACd,sBAAsB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,+BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAC9C,sBAAsB;CAAG;AAE7B,MAAM,WAAW,kCACf,SAAQ,sBAAsB,EAC5B,cAAc,EACd,sBAAsB;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAiMD,eAAO,MAAM,kBAAkB,yFAoJ9B,CAAC;AAGF,eAAO,MAAM,6BAA6B,oGAsExC,CAAC;AAGH,eAAO,MAAM,0BAA0B,iGA6BrC,CAAC;AAGH,eAAO,MAAM,6BAA6B,oGAkExC,CAAC"}

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";