@seed-design/lynx-react 0.2.0-alpha.3 → 0.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAgC,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAE7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AA6ErF,MAAM,WAAW,mBACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,qFAsDzB,CAAC;AAKH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,qFAsDzB,CAAC;AAKH,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACrF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB,4FA+BjC,CAAC;AAKF,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACpC,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;CACzC,CAAC;AAEF,MAAM,WAAW,4BAA4B;IAC3C,kGAAkG;IAClG,SAAS,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC3C,0GAA0G;IAC1G,OAAO,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,qBAgC1E;yBAhCe,uBAAuB;;;AAqCvC,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,mBAAmB,0FAiB/B,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAE7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAKrF,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAsErB,MAAM,WAAW,mBACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,EAC5D,sBAAsB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,qFAyDzB,CAAC;AAKH,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,qFA+CzB,CAAC;AAKH,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,EACzC,sBAAsB;CAAG;AAE7B,eAAO,MAAM,qBAAqB,4FA6BjC,CAAC;AAKF,MAAM,WAAW,4BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,WAAW,GAAG,OAAO,CAAC;IAC3D,kGAAkG;IAClG,SAAS,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAC/C,0GAA0G;IAC1G,OAAO,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;CAC9C;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,qBA6B1E;yBA7Be,uBAAuB;;;AAkCvC,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;CAAG;AAE3E,eAAO,MAAM,mBAAmB,0FAoB/B,CAAC"}

package/lib/components/RadioGroup/RadioGroup.jsx

@@ -1,144 +1,160 @@
-import * as React from "react";
-import { cloneElement, isValidElement } from "react";
+import { usePressTap } from "../../hooks/usePressTap.js";
+import { InternalIcon } from "../Icon/Icon.jsx";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props.js";
 import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { isValidElement } from "@lynx-js/react";
 import { radio } from "@seed-design/lynx-css/recipes/radio";
 import { radiomark } from "@seed-design/lynx-css/recipes/radiomark";
 import { radioGroup } from "@seed-design/lynx-css/recipes/radio-group";
-import { vars as radiomarkVars } from "@seed-design/lynx-css/vars/component/radiomark";
-import { useControllableState } from "../../hooks/useControllableState";
-import { useIconColor } from "../../hooks/useIconColor";
-import { usePressTap } from "../../hooks/usePressTap";
-import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token";
-import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
-const RadioGroupContext = React.createContext(null);
+//#region src/components/RadioGroup/RadioGroup.tsx
+var RadioGroupContext = React.createContext(null);
 function useRadioGroupContext(consumer) {
-    const ctx = React.useContext(RadioGroupContext);
-    if (!ctx) {
-        throw new Error(`<${consumer}/> must be rendered inside <RadioGroupRoot/>.`);
-    }
-    return ctx;
+	const ctx = React.useContext(RadioGroupContext);
+	if (!ctx) throw new Error(`<${consumer}/> must be rendered inside <RadioGroupRoot/>.`);
+	return ctx;
 }
-const RadioGroupItemContext = React.createContext(null);
+var RadioGroupItemContext = React.createContext(null);
 function useRadioGroupItemContext(consumer) {
-    const ctx = React.useContext(RadioGroupItemContext);
-    if (!ctx) {
-        throw new Error(`<${consumer}/> must be rendered inside <RadioGroupItem/>.`);
-    }
-    return ctx;
+	const ctx = React.useContext(RadioGroupItemContext);
+	if (!ctx) throw new Error(`<${consumer}/> must be rendered inside <RadioGroupItem/>.`);
+	return ctx;
 }
-const RadiomarkIconClassContext = React.createContext(null);
-function useRadiomarkIconClass(consumer) {
-    const ctx = React.useContext(RadiomarkIconClassContext);
-    if (!ctx) {
-        throw new Error(`<${consumer}/> must be rendered inside <RadioGroupItemControl/>.`);
-    }
-    return ctx;
+var RadiomarkControlContext = React.createContext(null);
+function useRadiomarkControlContext(consumer) {
+	const ctx = React.useContext(RadiomarkControlContext);
+	if (!ctx) throw new Error(`<${consumer}/> must be rendered inside <RadioGroupItemControl/>.`);
+	return ctx;
 }
-export const RadioGroupRoot = React.forwardRef((props, ref) => {
-    const { children, className, value: valueProp, defaultValue, disabled = false, onValueChange, ...restProps } = props;
-    const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, nativeProps] = splitMultipleVariantsProps(restProps, { radio, radiomark });
-    const weight = radioVariantProps.weight ?? "regular";
-    const size = radioVariantProps.size ?? "medium";
-    const tone = radiomarkVariantProps.tone ?? "brand";
-    const handleChange = React.useCallback((next) => {
-        if (next !== null)
-            onValueChange?.(next);
-    }, [onValueChange]);
-    const [value, setValueInternal] = useControllableState({
-        value: valueProp !== undefined ? valueProp : undefined,
-        defaultValue: defaultValue ?? null,
-        onChange: handleChange,
-    });
-    const setValue = React.useCallback((next) => {
-        setValueInternal(next);
-    }, [setValueInternal]);
-    const rootClassName = radioGroup();
-    const ctx = React.useMemo(() => ({ value, setValue, disabled, size, weight, tone }), [value, setValue, disabled, size, weight, tone]);
-    return (<RadioGroupContext.Provider value={ctx}>
-      <view {...(ref ? { ref: ref } : {})} className={clsx(rootClassName, className)} {...nativeProps}>
+var RadioGroupRoot = React.forwardRef((props, ref) => {
+	const { children, className, value: valueProp, defaultValue, disabled = false, onValueChange, ...restProps } = props;
+	const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, nativeProps] = splitMultipleVariantsProps(restProps, {
+		radio,
+		radiomark
+	});
+	const handleChange = React.useCallback((next) => {
+		if (next !== null) onValueChange?.(next);
+	}, [onValueChange]);
+	const [value, setValueInternal] = useControllableState({
+		value: valueProp !== void 0 ? valueProp : void 0,
+		defaultValue: defaultValue ?? null,
+		onChange: handleChange
+	});
+	const setValue = React.useCallback((next) => {
+		setValueInternal(next);
+	}, [setValueInternal]);
+	const rootClassName = radioGroup().root;
+	const contextValue = React.useMemo(() => ({
+		value,
+		setValue,
+		disabled,
+		radioVariantProps,
+		radiomarkVariantProps
+	}), [
+		value,
+		setValue,
+		disabled,
+		radioVariantProps,
+		radiomarkVariantProps
+	]);
+	return <RadioGroupContext.Provider value={contextValue}>
+      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} {...nativeProps}>
         {children}
       </view>
-    </RadioGroupContext.Provider>);
+    </RadioGroupContext.Provider>;
 });
 RadioGroupRoot.displayName = "RadioGroupRoot";
-export const RadioGroupItem = React.forwardRef((props, ref) => {
-    const { value: itemValue, disabled: itemDisabled = false, children, className, ...nativeProps } = props;
-    const { value: groupValue, setValue, disabled: groupDisabled, size, weight, tone, } = useRadioGroupContext("RadioGroupItem");
-    const disabled = groupDisabled || itemDisabled;
-    const checked = groupValue === itemValue;
-    const { pressed, ...pressHandlers } = usePressTap({
-        disabled,
-        onTap: () => {
-            if (checked)
-                return;
-            setValue(itemValue);
-        },
-    });
-    const rootClassName = radio({ weight, size, disabled }).root;
-    const itemCtx = React.useMemo(() => ({
-        value: itemValue,
-        checked,
-        disabled,
-        pressed,
-        tone,
-        size,
-    }), [itemValue, checked, disabled, pressed, tone, size]);
-    return (<RadioGroupItemContext.Provider value={itemCtx}>
-      <view {...(ref ? { ref: ref } : {})} className={clsx(rootClassName, className)} {...pressHandlers} {...nativeProps}>
+var RadioGroupItem = React.forwardRef((props, ref) => {
+	const { value: itemValue, disabled: itemDisabled = false, children, className, ...nativeProps } = props;
+	const groupContext = useRadioGroupContext("RadioGroupItem");
+	const disabled = groupContext.disabled || itemDisabled;
+	const checked = groupContext.value === itemValue;
+	const select = React.useCallback(() => {
+		if (checked) return;
+		groupContext.setValue(itemValue);
+	}, [
+		checked,
+		groupContext,
+		itemValue
+	]);
+	const { pressed, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: select
+	});
+	const rootClassName = radio({
+		...groupContext.radioVariantProps,
+		disabled
+	}).root;
+	const itemContextValue = React.useMemo(() => ({
+		value: itemValue,
+		checked,
+		disabled,
+		pressed,
+		select
+	}), [
+		itemValue,
+		checked,
+		disabled,
+		pressed,
+		select
+	]);
+	return <RadioGroupItemContext.Provider value={itemContextValue}>
+      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} {...pressHandlers} {...nativeProps}>
         {children}
       </view>
-    </RadioGroupItemContext.Provider>);
+    </RadioGroupItemContext.Provider>;
 });
 RadioGroupItem.displayName = "RadioGroupItem";
-export const RadioGroupItemControl = React.forwardRef((props, ref) => {
-    const [variantProps, restProps] = radiomark.splitVariantProps(props);
-    const { children, className, ...nativeProps } = restProps;
-    const { checked, disabled, pressed, tone: ctxTone, size, } = useRadioGroupItemContext("RadioGroupItemControl");
-    const tone = variantProps.tone ?? ctxTone;
-    const classes = React.useMemo(() => radiomark({ tone, size, checked, disabled, pressed }), [tone, size, checked, disabled, pressed]);
-    return (<RadiomarkIconClassContext.Provider value={classes.icon}>
-        <view {...(ref ? { ref: ref } : {})} className={clsx(classes.root, className)} {...nativeProps}>
+var RadioGroupItemControl = React.forwardRef((props, ref) => {
+	const [variantProps, restProps] = radiomark.splitVariantProps(props);
+	const { children, className, ...nativeProps } = restProps;
+	const groupContext = useRadioGroupContext("RadioGroupItemControl");
+	const itemContext = useRadioGroupItemContext("RadioGroupItemControl");
+	const radiomarkVariantProps = {
+		...groupContext.radiomarkVariantProps,
+		...variantProps,
+		checked: itemContext.checked,
+		disabled: itemContext.disabled,
+		pressed: itemContext.pressed
+	};
+	const classes = radiomark(radiomarkVariantProps);
+	return <RadiomarkControlContext.Provider value={{
+		iconClassName: classes.icon,
+		radiomarkVariantProps
+	}}>
+        <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
           {children}
         </view>
-      </RadiomarkIconClassContext.Provider>);
+      </RadiomarkControlContext.Provider>;
 });
 RadioGroupItemControl.displayName = "RadioGroupItemControl";
-export function RadioGroupItemIndicator(props) {
-    const { unchecked, checked: checkedIcon, className, style } = props;
-    const { checked, disabled, pressed, tone, size } = useRadioGroupItemContext("RadioGroupItemIndicator");
-    const iconClassName = useRadiomarkIconClass("RadioGroupItemIndicator");
-    const iconColor = useIconColor([checked, disabled, pressed, tone, size]);
-    const icon = checked ? checkedIcon : unchecked;
-    // 사용자가 custom icon 을 주지 않으면 default `<view>` 로 동그란 점을 그린다.
-    // radiomark.icon recipe 가 borderRadius/backgroundColor/width/height 를 적용해
-    // 라디오의 inner dot 모양을 재현. 웹 RadioGroup 의 default `<svg><circle/></svg>` 동작과 일치.
-    if (!icon || !isValidElement(icon)) {
-        return <view className={clsx(iconClassName, className)} style={style}/>;
-    }
-    // lynx-monochrome-icon 이 `<image style={{ width, height, ...style }}>` 로 자체 default size 를 박으므로
-    // recipe 토큰에서 꺼낸 사이즈를 inline 으로 주입해 덮는다.
-    const iconSize = resolveRecipeToken(radiomarkVars, [
-        `size${capitalize(size)}`,
-        disabled ? "disabled" : "enabled",
-        "icon",
-        "size",
-    ]);
-    return cloneElement(icon, {
-        ...iconColor,
-        className: clsx(iconClassName, icon.props.className, className),
-        style: iconSize
-            ? { width: iconSize, height: iconSize, ...icon.props.style, ...style }
-            : { ...icon.props.style, ...style },
-    });
+function RadioGroupItemIndicator(props) {
+	const { unchecked, checked: checkedIcon, className, style } = props;
+	const itemContext = useRadioGroupItemContext("RadioGroupItemIndicator");
+	const { iconClassName, radiomarkVariantProps } = useRadiomarkControlContext("RadioGroupItemIndicator");
+	const icon = itemContext.checked ? checkedIcon : unchecked;
+	if (!icon || !isValidElement(icon)) return <view className={clsx(iconClassName, className)} style={style} />;
+	return <InternalIcon icon={icon} className={clsx(iconClassName, className)} style={style} deps={[
+		itemContext.checked,
+		itemContext.disabled,
+		itemContext.pressed,
+		radiomarkVariantProps.tone,
+		radiomarkVariantProps.size
+	]} />;
 }
 RadioGroupItemIndicator.displayName = "RadioGroupItemIndicator";
-export const RadioGroupItemLabel = React.forwardRef((props, ref) => {
-    const { children, className, ...nativeProps } = props;
-    const { disabled } = useRadioGroupItemContext("RadioGroupItemLabel");
-    const { size, weight } = useRadioGroupContext("RadioGroupItemLabel");
-    const labelClassName = radio({ weight, size, disabled }).label;
-    return (<text {...(ref ? { ref: ref } : {})} className={clsx(labelClassName, className)} {...nativeProps}>
+var RadioGroupItemLabel = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const itemContext = useRadioGroupItemContext("RadioGroupItemLabel");
+	const labelClassName = radio({
+		...useRadioGroupContext("RadioGroupItemLabel").radioVariantProps,
+		disabled: itemContext.disabled
+	}).label;
+	return <text {...ref ? { ref } : {}} className={clsx(labelClassName, className)} {...nativeProps}>
         {children}
-      </text>);
+      </text>;
 });
 RadioGroupItemLabel.displayName = "RadioGroupItemLabel";
+//#endregion
+export { RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot };

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

@@ -1,2 +1,2 @@
-export { RadioGroupItem as Item, RadioGroupItemControl as ItemControl, RadioGroupItemIndicator as ItemIndicator, RadioGroupItemLabel as ItemLabel, RadioGroupRoot as Root, type RadioGroupItemControlProps as ItemControlProps, type RadioGroupItemIndicatorProps as ItemIndicatorProps, type RadioGroupItemLabelProps as ItemLabelProps, type RadioGroupItemProps as ItemProps, type RadioGroupRootProps as RootProps, } from "./RadioGroup";
+export { RadioGroupItem as Item, RadioGroupItemControl as ItemControl, RadioGroupItemIndicator as ItemIndicator, RadioGroupItemLabel as ItemLabel, RadioGroupRoot as Root, type RadioGroupItemControlProps as ItemControlProps, type RadioGroupItemIndicatorProps as ItemIndicatorProps, type RadioGroupItemLabelProps as ItemLabelProps, type RadioGroupItemProps as ItemProps, type RadioGroupRootProps as RootProps, } from './RadioGroup';
 //# sourceMappingURL=RadioGroup.namespace.d.ts.map

package/lib/components/RadioGroup/RadioGroup.namespace.js

@@ -1 +1,12 @@
-export { RadioGroupItem as Item, RadioGroupItemControl as ItemControl, RadioGroupItemIndicator as ItemIndicator, RadioGroupItemLabel as ItemLabel, RadioGroupRoot as Root, } from "./RadioGroup";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot } from "./RadioGroup.jsx";
+//#region src/components/RadioGroup/RadioGroup.namespace.ts
+var RadioGroup_namespace_exports = /* @__PURE__ */ __exportAll({
+	Item: () => RadioGroupItem,
+	ItemControl: () => RadioGroupItemControl,
+	ItemIndicator: () => RadioGroupItemIndicator,
+	ItemLabel: () => RadioGroupItemLabel,
+	Root: () => RadioGroupRoot
+});
+//#endregion
+export { RadioGroup_namespace_exports };

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

@@ -1,3 +1,3 @@
-export { RadioGroupRoot, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, type RadioGroupRootProps, type RadioGroupItemProps, type RadioGroupItemControlProps, type RadioGroupItemIndicatorProps, type RadioGroupItemLabelProps, } from "./RadioGroup";
-export * as RadioGroup from "./RadioGroup.namespace";
+export { RadioGroupRoot, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, type RadioGroupRootProps, type RadioGroupItemProps, type RadioGroupItemControlProps, type RadioGroupItemIndicatorProps, type RadioGroupItemLabelProps, } from './RadioGroup';
+export * as RadioGroup from './RadioGroup.namespace';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Stack/Stack.d.ts

@@ -0,0 +1,33 @@
+import { LynxPressableProps, LynxStyledElementProps } from '../../types';
+import { StyleProps } from '../../utils/styled';
+import * as React from "@lynx-js/react";
+type StackStyleProps = "display" | "flexDirection" | "alignItems" | "justifyContent" | "flexWrap" | "flexGrow" | "flexShrink";
+interface StackBaseProps extends StyleProps, LynxStyledElementProps, LynxPressableProps {
+    bindtouchstart?: () => void;
+    bindtouchend?: () => void;
+    bindtouchcancel?: () => void;
+}
+/**
+ * @platform Lynx
+ *
+ * `VStack`과 `HStack`은 native `<view>`를 직접 렌더링하고 stack 방향에 필요한
+ * 최소 flex style만 적용합니다. 앱 코드에서 성능에 민감한 반복 레이아웃을 만들
+ * 때는 native `<view>`/`<text>`와 Tailwind utility className을 우선 고려하세요.
+ * 패키지 컴포넌트 내부에서는 `Box`를 합성하지 않고 native tag와 recipe className을
+ * 사용해 primitive 컴포넌트 비용이 누적되지 않도록 합니다.
+ */
+export interface StackProps extends Omit<StackBaseProps, StackStyleProps> {
+    align?: StackBaseProps["alignItems"];
+    justify?: StackBaseProps["justifyContent"];
+    wrap?: StackBaseProps["flexWrap"];
+    grow?: StackBaseProps["flexGrow"];
+    shrink?: StackBaseProps["flexShrink"];
+}
+export interface VStackProps extends StackProps {
+}
+export interface HStackProps extends StackProps {
+}
+export declare const VStack: React.ForwardRefExoticComponent<VStackProps & React.RefAttributes<unknown>>;
+export declare const HStack: React.ForwardRefExoticComponent<HStackProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=Stack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,KAAK,eAAe,GAChB,SAAS,GACT,eAAe,GACf,YAAY,GACZ,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,YAAY,CAAC;AAEjB,UAAU,cAAe,SAAQ,UAAU,EAAE,sBAAsB,EAAE,kBAAkB;IACrF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC;IACvE,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AAElD,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AA0ClD,eAAO,MAAM,MAAM,6EAIjB,CAAC;AAIH,eAAO,MAAM,MAAM,6EAIjB,CAAC"}

package/lib/components/Stack/Stack.jsx

@@ -0,0 +1,39 @@
+import { useStyleProps } from "../../utils/styled.js";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+//#region src/components/Stack/Stack.tsx
+function getStackProps(props) {
+	const { align, justify, wrap, grow, shrink, ...restProps } = props;
+	return {
+		alignItems: align,
+		justifyContent: justify,
+		flexWrap: wrap,
+		flexGrow: grow,
+		flexShrink: shrink,
+		...restProps
+	};
+}
+function useStackStyleProps(props, flexDirection) {
+	return useStyleProps({
+		display: "flex",
+		flexDirection,
+		...getStackProps(props)
+	});
+}
+function renderStackView(stackStyleProps, ref) {
+	const { style, restProps } = stackStyleProps;
+	const { children, className, ...nativeProps } = restProps;
+	return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(className)} style={style}>
+      {children}
+    </view>;
+}
+var VStack = React.forwardRef((props, ref) => {
+	return renderStackView(useStackStyleProps(props, "column"), ref);
+});
+VStack.displayName = "VStack";
+var HStack = React.forwardRef((props, ref) => {
+	return renderStackView(useStackStyleProps(props, "row"), ref);
+});
+HStack.displayName = "HStack";
+//#endregion
+export { HStack, VStack };

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

@@ -0,0 +1,2 @@
+export { HStack, type HStackProps, type StackProps, VStack, type VStackProps } from './Stack';
+//# sourceMappingURL=index.d.ts.map

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

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

package/lib/components/Switch/Switch.d.ts

@@ -1,27 +1,21 @@
-import * as React from "react";
-import type { SwitchVariantProps } from "@seed-design/lynx-css/recipes/switch";
-import type { SwitchmarkVariantProps } from "@seed-design/lynx-css/recipes/switchmark";
-export interface SwitchRootProps extends SwitchVariantProps, Omit<SwitchmarkVariantProps, "size"> {
-    children?: React.ReactNode;
-    className?: string;
+import { SwitchVariantProps } from '@seed-design/lynx-css/recipes/switch';
+import { SwitchmarkVariantProps } from '@seed-design/lynx-css/recipes/switchmark';
+import { LynxStyledElementProps } from '../../types';
+import * as React from "@lynx-js/react";
+export interface SwitchRootProps extends SwitchVariantProps, Omit<SwitchmarkVariantProps, "size">, LynxStyledElementProps {
     checked?: boolean;
     defaultChecked?: boolean;
     disabled?: boolean;
     onCheckedChange?: (checked: boolean) => void;
 }
 export declare const SwitchRoot: React.ForwardRefExoticComponent<SwitchRootProps & React.RefAttributes<unknown>>;
-export interface SwitchControlProps extends Pick<SwitchmarkVariantProps, "tone" | "size"> {
-    children?: React.ReactNode;
-    className?: string;
+export interface SwitchControlProps extends Pick<SwitchmarkVariantProps, "tone" | "size">, LynxStyledElementProps {
 }
 export declare const SwitchControl: React.ForwardRefExoticComponent<SwitchControlProps & React.RefAttributes<unknown>>;
-export interface SwitchThumbProps {
-    className?: string;
+export interface SwitchThumbProps extends Pick<LynxStyledElementProps, "className" | "style"> {
 }
 export declare const SwitchThumb: React.ForwardRefExoticComponent<SwitchThumbProps & React.RefAttributes<unknown>>;
-export interface SwitchLabelProps {
-    children?: React.ReactNode;
-    className?: string;
+export interface SwitchLabelProps extends LynxStyledElementProps {
 }
 export declare const SwitchLabel: React.ForwardRefExoticComponent<SwitchLabelProps & React.RefAttributes<unknown>>;
 //# sourceMappingURL=Switch.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AAmDvF,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC;IAC/F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,UAAU,iFA6CrB,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,MAAM,GAAG,MAAM,CAAC;IACvF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,oFAwBxB,CAAC;AAKH,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,kFAWtB,CAAC;AAKH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,kFActB,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAIxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AAKvF,OAAO,KAAK,EAAE,sBAAsB,EAA4B,MAAM,aAAa,CAAC;AAkDpF,MAAM,WAAW,eACf,SAAQ,kBAAkB,EACxB,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,EACpC,sBAAsB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,UAAU,iFAmDrB,CAAC;AAKH,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,MAAM,GAAG,MAAM,CAAC,EACnD,sBAAsB;CAAG;AAE7B,eAAO,MAAM,aAAa,oFAyBxB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,WAAW,GAAG,OAAO,CAAC;CAAG;AAEhG,eAAO,MAAM,WAAW,kFAWtB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;CAAG;AAEnE,eAAO,MAAM,WAAW,kFAiBtB,CAAC"}

package/lib/components/Switch/Switch.jsx

@@ -1,75 +1,101 @@
-import * as React from "react";
+import { usePressTap } from "../../hooks/usePressTap.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props.js";
 import clsx from "clsx";
+import * as React from "@lynx-js/react";
 import { switchStyle } from "@seed-design/lynx-css/recipes/switch";
 import { switchmark } from "@seed-design/lynx-css/recipes/switchmark";
-import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
-import { useControllableState } from "../../hooks/useControllableState";
-import { usePressTap } from "../../hooks/usePressTap";
-const SwitchContext = React.createContext(null);
+//#region src/components/Switch/Switch.tsx
+var SwitchContext = React.createContext(null);
 function useSwitchContext(consumer) {
-    const ctx = React.useContext(SwitchContext);
-    if (!ctx) {
-        throw new Error(`<${consumer}/> must be rendered inside <SwitchRoot/>.`);
-    }
-    return ctx;
+	const ctx = React.useContext(SwitchContext);
+	if (!ctx) throw new Error(`<${consumer}/> must be rendered inside <SwitchRoot/>.`);
+	return ctx;
 }
-const SwitchmarkThumbClassContext = React.createContext(null);
-function useSwitchmarkThumbClass(consumer) {
-    const ctx = React.useContext(SwitchmarkThumbClassContext);
-    if (!ctx) {
-        throw new Error(`<${consumer}/> must be rendered inside <SwitchControl/>.`);
-    }
-    return ctx;
+var SwitchmarkControlContext = React.createContext(null);
+function useSwitchmarkControlContext(consumer) {
+	const ctx = React.useContext(SwitchmarkControlContext);
+	if (!ctx) throw new Error(`<${consumer}/> must be rendered inside <SwitchControl/>.`);
+	return ctx;
 }
-export const SwitchRoot = React.forwardRef((props, ref) => {
-    const { children, className, checked: checkedProp, defaultChecked = false, disabled = false, onCheckedChange, ...restProps } = props;
-    const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, nativeProps] = splitMultipleVariantsProps(restProps, { switch: switchStyle, switchmark });
-    const size = switchVariantProps.size ?? "32";
-    const tone = switchmarkVariantProps.tone ?? "brand";
-    const [checked, setChecked] = useControllableState({
-        value: checkedProp,
-        defaultValue: defaultChecked,
-        onChange: onCheckedChange,
-    });
-    const { pressed: _pressed, ...pressHandlers } = usePressTap({
-        disabled,
-        onTap: () => setChecked(!checked),
-    });
-    const rootClassName = switchStyle({ size }).root;
-    const ctx = React.useMemo(() => ({ checked, disabled, size, tone }), [checked, disabled, size, tone]);
-    return (<SwitchContext.Provider value={ctx}>
-      <view {...(ref ? { ref: ref } : {})} className={clsx(rootClassName, className)} {...pressHandlers} {...nativeProps}>
+var SwitchRoot = React.forwardRef((props, ref) => {
+	const { children, className, checked: checkedProp, defaultChecked = false, disabled = false, onCheckedChange, ...restProps } = props;
+	const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, nativeProps] = splitMultipleVariantsProps(restProps, {
+		switch: switchStyle,
+		switchmark
+	});
+	const [checked, setChecked] = useControllableState({
+		value: checkedProp,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
+	const { pressed: _pressed, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: toggle
+	});
+	const rootClassName = switchStyle({
+		...switchVariantProps,
+		disabled
+	}).root;
+	const contextValue = React.useMemo(() => ({
+		checked,
+		disabled,
+		switchVariantProps,
+		switchmarkVariantProps,
+		toggle
+	}), [
+		checked,
+		disabled,
+		switchVariantProps,
+		switchmarkVariantProps,
+		toggle
+	]);
+	return <SwitchContext.Provider value={contextValue}>
+      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} {...pressHandlers} {...nativeProps}>
         {children}
       </view>
-    </SwitchContext.Provider>);
+    </SwitchContext.Provider>;
 });
 SwitchRoot.displayName = "SwitchRoot";
-export const SwitchControl = React.forwardRef((props, ref) => {
-    const [variantProps, restProps] = switchmark.splitVariantProps(props);
-    const { children, className, ...nativeProps } = restProps;
-    const { checked, disabled, tone: ctxTone, size: ctxSize } = useSwitchContext("SwitchControl");
-    const tone = variantProps.tone ?? ctxTone;
-    const size = variantProps.size ?? ctxSize;
-    const classes = React.useMemo(() => switchmark({ tone, size, checked, disabled }), [tone, size, checked, disabled]);
-    return (<SwitchmarkThumbClassContext.Provider value={classes.thumb}>
-      <view {...(ref ? { ref: ref } : {})} className={clsx(classes.root, className)} {...nativeProps}>
+var SwitchControl = React.forwardRef((props, ref) => {
+	const [variantProps, restProps] = switchmark.splitVariantProps(props);
+	const { children, className, ...nativeProps } = restProps;
+	const context = useSwitchContext("SwitchControl");
+	const switchmarkVariantProps = {
+		...context.switchmarkVariantProps,
+		...variantProps,
+		checked: context.checked,
+		disabled: context.disabled
+	};
+	const classes = switchmark(switchmarkVariantProps);
+	return <SwitchmarkControlContext.Provider value={{
+		thumbClassName: classes.thumb,
+		switchmarkVariantProps
+	}}>
+      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
         {children}
       </view>
-    </SwitchmarkThumbClassContext.Provider>);
+    </SwitchmarkControlContext.Provider>;
 });
 SwitchControl.displayName = "SwitchControl";
-export const SwitchThumb = React.forwardRef((props, ref) => {
-    const { className, ...nativeProps } = props;
-    const thumbClassName = useSwitchmarkThumbClass("SwitchThumb");
-    return (<view {...(ref ? { ref: ref } : {})} className={clsx(thumbClassName, className)} {...nativeProps}/>);
+var SwitchThumb = React.forwardRef((props, ref) => {
+	const { className, ...nativeProps } = props;
+	const { thumbClassName } = useSwitchmarkControlContext("SwitchThumb");
+	return <view {...ref ? { ref } : {}} className={clsx(thumbClassName, className)} {...nativeProps} />;
 });
 SwitchThumb.displayName = "SwitchThumb";
-export const SwitchLabel = React.forwardRef((props, ref) => {
-    const { children, className, ...nativeProps } = props;
-    const { disabled, size } = useSwitchContext("SwitchLabel");
-    const labelClassName = switchStyle({ size, disabled }).label;
-    return (<text {...(ref ? { ref: ref } : {})} className={clsx(labelClassName, className)} {...nativeProps}>
+var SwitchLabel = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSwitchContext("SwitchLabel");
+	const labelClassName = switchStyle({
+		...context.switchVariantProps,
+		disabled: context.disabled
+	}).label;
+	return <text {...ref ? { ref } : {}} className={clsx(labelClassName, className)} {...nativeProps}>
       {children}
-    </text>);
+    </text>;
 });
 SwitchLabel.displayName = "SwitchLabel";
+//#endregion
+export { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb };

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

@@ -1,2 +1,2 @@
-export { SwitchControl as Control, SwitchLabel as Label, SwitchRoot as Root, SwitchThumb as Thumb, type SwitchControlProps as ControlProps, type SwitchLabelProps as LabelProps, type SwitchRootProps as RootProps, type SwitchThumbProps as ThumbProps, } from "./Switch";
+export { SwitchControl as Control, SwitchLabel as Label, SwitchRoot as Root, SwitchThumb as Thumb, type SwitchControlProps as ControlProps, type SwitchLabelProps as LabelProps, type SwitchRootProps as RootProps, type SwitchThumbProps as ThumbProps, } from './Switch';
 //# sourceMappingURL=Switch.namespace.d.ts.map