@seed-design/lynx-react 0.1.1-alpha.0

package/lib/components/Stack/Stack.jsx

@@ -0,0 +1,10 @@
+import { forwardRef } from "react";
+import { Flex } from "../Flex/Flex";
+export const VStack = forwardRef((props, ref) => {
+    return <Flex ref={ref} display="flex" flexDirection="column" {...props}/>;
+});
+VStack.displayName = "VStack";
+export const HStack = forwardRef((props, ref) => {
+    return <Flex ref={ref} display="flex" flexDirection="row" {...props}/>;
+});
+HStack.displayName = "HStack";

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

@@ -0,0 +1,2 @@
+export { VStack, HStack, type VStackProps, type HStackProps } 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,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/lib/components/Stack/index.js

@@ -0,0 +1 @@
+export { VStack, HStack } from "./Stack";

package/lib/components/Text/Text.d.ts

@@ -0,0 +1,30 @@
+import type { TextVariantProps } from "@seed-design/lynx-css/recipes/text";
+import { type FontSize, type FontWeight, type LineHeight, type ScopedColorFg, type ScopedColorPalette } from "@seed-design/css/vars";
+import type { ReactNode } from "react";
+export interface TextProps extends Pick<TextVariantProps, "textStyle"> {
+    /**
+     * The color of the text.
+     */
+    color?: ScopedColorFg | ScopedColorPalette | (string & {});
+    /**
+     * The font size of the text. Partially overrides the textStyle.
+     */
+    fontSize?: FontSize | (string & {});
+    /**
+     * The line height of the text. Partially overrides the textStyle.
+     */
+    lineHeight?: LineHeight | (string & {});
+    /**
+     * The font weight of the text. Partially overrides the textStyle.
+     */
+    fontWeight?: FontWeight;
+    /**
+     * The alignment of the text.
+     */
+    align?: "left" | "center" | "right";
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<any>>;
+//# sourceMappingURL=Text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqCvC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,WAAW,CAAC;IACpE;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAE3D;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAEpC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAExC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,2FA0BhB,CAAC"}

package/lib/components/Text/Text.jsx

@@ -0,0 +1,49 @@
+import { text } from "@seed-design/lynx-css/recipes/text";
+import { vars, } from "@seed-design/css/vars";
+import clsx from "clsx";
+import { forwardRef, useMemo } from "react";
+import { dynamicStyle } from "../../utils/dynamic-style";
+function handleColor(color) {
+    if (!color) {
+        return undefined;
+    }
+    const [type, value] = color.split(".");
+    // @ts-expect-error
+    return vars.$color[type]?.[value] ?? color;
+}
+function handleFontWeight(fontWeight) {
+    if (!fontWeight) {
+        return undefined;
+    }
+    // @ts-expect-error
+    return vars.$fontWeight[fontWeight] ?? undefined;
+}
+function handleFontSize(size) {
+    if (!size) {
+        return undefined;
+    }
+    // @ts-expect-error
+    return vars.$fontSize[size] ?? size;
+}
+function handleLineHeight(lineHeight) {
+    if (!lineHeight) {
+        return undefined;
+    }
+    // @ts-expect-error
+    return vars.$lineHeight[lineHeight] ?? lineHeight;
+}
+export const Text = forwardRef(({ color, textStyle, fontSize, lineHeight, fontWeight, align, children, className, style }, ref) => {
+    const classes = useMemo(() => text({ textStyle }), [textStyle]);
+    const textStyleStr = dynamicStyle({
+        color: handleColor(color),
+        "font-size": handleFontSize(fontSize),
+        "line-height": handleLineHeight(lineHeight ?? fontSize),
+        "font-weight": handleFontWeight(fontWeight),
+        "text-align": align,
+        ...style,
+    });
+    return (<text {...(ref ? { ref } : {})} className={clsx(classes.text, className)} style={textStyleStr}>
+        {children}
+      </text>);
+});
+Text.displayName = "Text";

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

@@ -0,0 +1,2 @@
+export { Text, type TextProps } from "./Text";
+//# sourceMappingURL=index.d.ts.map

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

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

package/lib/components/Text/index.js

@@ -0,0 +1 @@
+export { Text } from "./Text";

package/lib/get-seed-class-name.d.ts

@@ -0,0 +1,23 @@
+type ColorMode = "system" | "light-only" | "dark-only";
+/**
+ * Lynx 앱의 root `<page>` 요소에 적용할 SEED Design className을 반환한다.
+ *
+ * 테마(dark/light)와 플랫폼(iOS/Android)을 자동 감지하여
+ * 렌더링 전에 올바른 CSS 변수가 적용되도록 한다.
+ *
+ * @example
+ * ```tsx
+ * import { getSeedClassName } from "@seed-design/lynx-react";
+ *
+ * root.render(
+ *   <page className={getSeedClassName({ colorMode: "system" })}>
+ *     <App />
+ *   </page>
+ * );
+ * ```
+ */
+export declare function getSeedClassName(options?: {
+    colorMode?: ColorMode;
+}): string;
+export {};
+//# sourceMappingURL=get-seed-class-name.d.ts.map

package/lib/get-seed-class-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-seed-class-name.d.ts","sourceRoot":"","sources":["../src/get-seed-class-name.ts"],"names":[],"mappings":"AAUA,KAAK,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,WAAW,CAAC;AAEvD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE;IAAE,SAAS,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG,MAAM,CAsB5E"}

package/lib/get-seed-class-name.js

@@ -0,0 +1,39 @@
+/**
+ * Lynx 앱의 root `<page>` 요소에 적용할 SEED Design className을 반환한다.
+ *
+ * 테마(dark/light)와 플랫폼(iOS/Android)을 자동 감지하여
+ * 렌더링 전에 올바른 CSS 변수가 적용되도록 한다.
+ *
+ * @example
+ * ```tsx
+ * import { getSeedClassName } from "@seed-design/lynx-react";
+ *
+ * root.render(
+ *   <page className={getSeedClassName({ colorMode: "system" })}>
+ *     <App />
+ *   </page>
+ * );
+ * ```
+ */
+export function getSeedClassName(options) {
+    const { colorMode = "system" } = options ?? {};
+    // Theme — lynx.__globalProps.theme에서 시스템 테마 읽기
+    const systemTheme = lynx?.__globalProps?.["theme"];
+    let themeClass;
+    if (colorMode === "light-only") {
+        themeClass = "seed-user-color-scheme-light";
+    }
+    else if (colorMode === "dark-only") {
+        themeClass = "seed-user-color-scheme-dark";
+    }
+    else {
+        themeClass =
+            systemTheme?.toLowerCase() === "dark"
+                ? "seed-user-color-scheme-dark"
+                : "seed-user-color-scheme-light";
+    }
+    // Platform — SystemInfo.platform에서 디바이스 플랫폼 읽기
+    const platform = SystemInfo?.platform;
+    const platformClass = platform === "iOS" ? "seed-platform-ios" : "seed-platform-android";
+    return `${themeClass} ${platformClass}`;
+}

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export { ActionButton, type ActionButtonProps } from "./components/ActionButton";
+export { ProgressCircle, type ProgressCircleProps } from "./components/ProgressCircle";
+export { dynamicStyle } from "./utils/dynamic-style";
+export { getSeedClassName } from "./get-seed-class-name";
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/index.js

@@ -0,0 +1,4 @@
+export { ActionButton } from "./components/ActionButton";
+export { ProgressCircle } from "./components/ProgressCircle";
+export { dynamicStyle } from "./utils/dynamic-style";
+export { getSeedClassName } from "./get-seed-class-name";

package/lib/utils/dynamic-style.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Convert a style object to a Lynx-compatible style string.
+ *
+ * Lynx compiles object-form `style` props into static CSS at build time,
+ * which drops dynamically-set CSS custom properties. Passing styles as a
+ * string literal preserves runtime values.
+ *
+ * Property names are converted from camelCase to kebab-case so that
+ * `React.CSSProperties` keys (e.g. `fontSize`) produce valid CSS
+ * (e.g. `font-size`).
+ */
+export declare function dynamicStyle(style: Record<string, unknown>): string;
+//# sourceMappingURL=dynamic-style.d.ts.map

package/lib/utils/dynamic-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-style.d.ts","sourceRoot":"","sources":["../../src/utils/dynamic-style.ts"],"names":[],"mappings":"AASA;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAKnE"}

package/lib/utils/dynamic-style.js

@@ -0,0 +1,26 @@
+/**
+ * Convert camelCase CSS property names to kebab-case.
+ * CSS custom properties (starting with `--`) are left unchanged.
+ */
+function toKebabCase(str) {
+    if (str.startsWith("--"))
+        return str;
+    return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+/**
+ * Convert a style object to a Lynx-compatible style string.
+ *
+ * Lynx compiles object-form `style` props into static CSS at build time,
+ * which drops dynamically-set CSS custom properties. Passing styles as a
+ * string literal preserves runtime values.
+ *
+ * Property names are converted from camelCase to kebab-case so that
+ * `React.CSSProperties` keys (e.g. `fontSize`) produce valid CSS
+ * (e.g. `font-size`).
+ */
+export function dynamicStyle(style) {
+    return Object.entries(style)
+        .filter(([_, v]) => v != null)
+        .map(([k, v]) => `${toKebabCase(k)}: ${v}`)
+        .join("; ");
+}

package/lib/utils/styled.d.ts

@@ -0,0 +1,120 @@
+import type { ScopedColorBg, ScopedColorFg, ScopedColorPalette, ScopedColorStroke, Dimension, Radius, SpacingX, SpacingY, Gradient, Shadow, ScopedColorBanner } from "@seed-design/css/vars";
+export declare function handleColor(color: string | undefined): any;
+export declare function handleDimension(dimension: string | 0 | undefined): string | undefined;
+export declare function handlePaddingWithSafeArea(padding: string | 0 | undefined, direction: "top" | "bottom"): string | undefined;
+export declare function handleRadius(radius: string | 0 | undefined): any;
+export interface StyleProps {
+    /**
+     * Shorthand for `background`.
+     */
+    bg?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+    background?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+    /**
+     * Shorthand for `backgroundGradient`.
+     */
+    bgGradient?: Gradient;
+    backgroundGradient?: Gradient;
+    /**
+     * Shorthand for `backgroundGradientDirection`.
+     * e.g. `43deg`
+     */
+    bgGradientDirection?: "to right" | "to left" | "to top" | "to bottom" | "to top right" | "to top left" | "to bottom right" | "to bottom left" | (string & {});
+    backgroundGradientDirection?: "to right" | "to left" | "to top" | "to bottom" | "to top right" | "to top left" | "to bottom right" | "to bottom left" | (string & {});
+    color?: ScopedColorFg | ScopedColorPalette | (string & {});
+    borderColor?: ScopedColorStroke | ScopedColorPalette | (string & {});
+    borderWidth?: 0 | 1 | (string & {});
+    borderTopWidth?: 0 | 1 | (string & {});
+    borderRightWidth?: 0 | 1 | (string & {});
+    borderBottomWidth?: 0 | 1 | (string & {});
+    borderLeftWidth?: 0 | 1 | (string & {});
+    borderRadius?: Radius | 0 | (string & {});
+    borderTopLeftRadius?: Radius | 0 | (string & {});
+    borderTopRightRadius?: Radius | 0 | (string & {});
+    borderBottomRightRadius?: Radius | 0 | (string & {});
+    borderBottomLeftRadius?: Radius | 0 | (string & {});
+    boxShadow?: Shadow | (string & {});
+    width?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+    minWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+    maxWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+    height?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+    minHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+    maxHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+    top?: 0 | (string & {});
+    left?: 0 | (string & {});
+    right?: 0 | (string & {});
+    bottom?: 0 | (string & {});
+    padding?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `padding`.
+     */
+    p?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingX?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingX`.
+     */
+    px?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingY?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingY`.
+     */
+    py?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+    /**
+     * Shorthand for `paddingTop`.
+     */
+    pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+    paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingRight`.
+     */
+    pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+    /**
+     * Shorthand for `paddingBottom`.
+     */
+    pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+    paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    /**
+     * Shorthand for `paddingLeft`.
+     */
+    pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    bleedX?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    bleedY?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    bleedTop?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    bleedRight?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    bleedBottom?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    bleedLeft?: "asPadding" | Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    display?: "flex" | "none" | "block";
+    position?: "relative" | "absolute" | "fixed" | "sticky";
+    overflowX?: "visible" | "hidden";
+    overflowY?: "visible" | "hidden";
+    zIndex?: number | (string & {});
+    /**
+     * If true, flex-grow will be set to `1`.
+     */
+    flexGrow?: 0 | 1 | (number & {}) | true;
+    /**
+     * If true, flex-shrink will be set to `1`.
+     */
+    flexShrink?: 0 | (number & {}) | true;
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
+    /**
+     * If true, flex-wrap will be set to `wrap`.
+     */
+    flexWrap?: "wrap" | "wrap-reverse" | "nowrap" | true;
+    justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around";
+    justifySelf?: "center" | "start" | "end" | "stretch";
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch";
+    alignContent?: "flex-start" | "flex-end" | "center" | "stretch";
+    alignSelf?: "flex-start" | "flex-end" | "center" | "stretch";
+    gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+}
+interface UseStyleProps extends StyleProps {
+    style?: React.CSSProperties;
+}
+export declare function useStyleProps<T extends UseStyleProps>(props: T): {
+    style: string;
+    restProps: Omit<T, keyof UseStyleProps>;
+};
+export {};
+//# sourceMappingURL=styled.d.ts.map

package/lib/utils/styled.d.ts.map

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

package/lib/utils/styled.jsx

@@ -0,0 +1,131 @@
+/**
+ * StyleProps utilities for Lynx.
+ * Based on packages/react/src/utils/styled.tsx, adapted for Lynx environment.
+ */
+import { dynamicStyle } from "./dynamic-style";
+import { vars } from "@seed-design/css/vars";
+export function handleColor(color) {
+    if (!color) {
+        return undefined;
+    }
+    const [type, value] = color.split(".");
+    // @ts-expect-error
+    return vars.$color[type]?.[value] ?? color;
+}
+export function handleDimension(dimension) {
+    if (dimension == null) {
+        return undefined;
+    }
+    if (typeof dimension === "number") {
+        return `${dimension}px`;
+    }
+    if (dimension === "full") {
+        return "100%";
+    }
+    const [type, value] = dimension.split(".");
+    // @ts-expect-error
+    const resolved = vars.$dimension[dimension] ?? vars.$dimension[type]?.[value] ?? dimension;
+    // 숫자만으로 이루어진 string이면 px 단위 추가 (Lynx는 unitless length를 허용하지 않음)
+    if (typeof resolved === "string" && /^\d+(\.\d+)?$/.test(resolved)) {
+        return `${resolved}px`;
+    }
+    return resolved;
+}
+function handleBleed(dimension, direction) {
+    if (dimension === "asPadding") {
+        return `var(--seed-box-padding-${direction})`;
+    }
+    return handleDimension(dimension);
+}
+function handleShadow(shadow) {
+    if (!shadow) {
+        return undefined;
+    }
+    // @ts-expect-error
+    return vars.$shadow[shadow] ?? shadow;
+}
+export function handlePaddingWithSafeArea(padding, direction) {
+    if (padding === "safeArea") {
+        return `var(--seed-safe-area-${direction})`;
+    }
+    return handleDimension(padding);
+}
+export function handleRadius(radius) {
+    if (radius == null) {
+        return undefined;
+    }
+    // @ts-expect-error
+    return vars.$radius[radius] ?? radius;
+}
+function handleGradient(gradientToken, direction) {
+    if (!gradientToken || !direction) {
+        return undefined;
+    }
+    // @ts-expect-error
+    const colorStops = vars.$gradient[gradientToken];
+    if (!colorStops) {
+        return undefined;
+    }
+    return `linear-gradient(${direction}, ${colorStops})`;
+}
+export function useStyleProps(props) {
+    const { background, bg, bgGradient, backgroundGradient, bgGradientDirection, backgroundGradientDirection, color, borderColor, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, boxShadow, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, p, px, py, pt, pr, pb, pl, bleedX, bleedY, bleedTop, bleedRight, bleedBottom, bleedLeft, bottom, left, right, top, display, position, overflowX, overflowY, zIndex, flexGrow, flexShrink, flexDirection, flexWrap, justifyContent, justifySelf, alignItems, alignContent, alignSelf, gap, style, ...restProps } = props;
+    const gradientValue = handleGradient(bgGradient ?? backgroundGradient, bgGradientDirection ?? backgroundGradientDirection);
+    const rawStyle = {
+        "--seed-box-background": handleColor(background ?? bg) ?? gradientValue,
+        "--seed-box-color": handleColor(color),
+        "--seed-box-border-color": handleColor(borderColor),
+        "--seed-box-border-width": borderWidth !== undefined ? `${borderWidth}px` : undefined,
+        "--seed-box-border-top-width": borderTopWidth !== undefined ? `${borderTopWidth}px` : undefined,
+        "--seed-box-border-right-width": borderRightWidth !== undefined ? `${borderRightWidth}px` : undefined,
+        "--seed-box-border-bottom-width": borderBottomWidth !== undefined ? `${borderBottomWidth}px` : undefined,
+        "--seed-box-border-left-width": borderLeftWidth !== undefined ? `${borderLeftWidth}px` : undefined,
+        "--seed-box-border-radius": handleRadius(borderRadius),
+        "--seed-box-border-top-left-radius": handleRadius(borderTopLeftRadius),
+        "--seed-box-border-top-right-radius": handleRadius(borderTopRightRadius),
+        "--seed-box-border-bottom-right-radius": handleRadius(borderBottomRightRadius),
+        "--seed-box-border-bottom-left-radius": handleRadius(borderBottomLeftRadius),
+        "--seed-box-box-shadow": handleShadow(boxShadow),
+        "--seed-box-width": handleDimension(width),
+        "--seed-box-min-width": handleDimension(minWidth),
+        "--seed-box-max-width": handleDimension(maxWidth),
+        "--seed-box-height": handleDimension(height),
+        "--seed-box-min-height": handleDimension(minHeight),
+        "--seed-box-max-height": handleDimension(maxHeight),
+        "--seed-box-padding": handleDimension(padding ?? p),
+        "--seed-box-padding-x": handleDimension(paddingX ?? px),
+        "--seed-box-padding-y": handleDimension(paddingY ?? py),
+        "--seed-box-padding-top": handlePaddingWithSafeArea(paddingTop ?? pt, "top"),
+        "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
+        "--seed-box-padding-bottom": handlePaddingWithSafeArea(paddingBottom ?? pb, "bottom"),
+        "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
+        "--seed-box-bleed-top": handleBleed(bleedTop ?? bleedY, "top"),
+        "--seed-box-bleed-right": handleBleed(bleedRight ?? bleedX, "right"),
+        "--seed-box-bleed-bottom": handleBleed(bleedBottom ?? bleedY, "bottom"),
+        "--seed-box-bleed-left": handleBleed(bleedLeft ?? bleedX, "left"),
+        "--seed-box-top": top,
+        "--seed-box-left": left,
+        "--seed-box-right": right,
+        "--seed-box-bottom": bottom,
+        "--seed-box-gap": handleDimension(gap),
+        "--seed-box-display": display,
+        "--seed-box-position": position,
+        "--seed-box-overflow-x": overflowX,
+        "--seed-box-overflow-y": overflowY,
+        "--seed-box-z-index": zIndex,
+        "--seed-box-flex-grow": flexGrow === true ? 1 : flexGrow,
+        "--seed-box-flex-shrink": flexShrink === true ? 1 : flexShrink,
+        "--seed-box-flex-direction": flexDirection,
+        "--seed-box-flex-wrap": flexWrap === true ? "wrap" : flexWrap,
+        "--seed-box-justify-content": justifyContent,
+        "--seed-box-justify-self": justifySelf,
+        "--seed-box-align-items": alignItems,
+        "--seed-box-align-content": alignContent,
+        "--seed-box-align-self": alignSelf,
+        ...style,
+    };
+    return {
+        style: dynamicStyle(rawStyle),
+        restProps: restProps,
+    };
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@seed-design/lynx-react",
+  "version": "0.1.1-alpha.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/lynx-react"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js"
+    },
+    "./dynamic-style": {
+      "types": "./lib/utils/dynamic-style.d.ts",
+      "import": "./lib/utils/dynamic-style.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "tsc",
+    "lint:publish": "bun publint"
+  },
+  "peerDependencies": {
+    "@seed-design/css": ">=1.1.17",
+    "@seed-design/lynx-css": ">=0.1.1-alpha.0",
+    "@lynx-js/react": ">=0.100.0"
+  },
+  "devDependencies": {
+    "@lynx-js/react": "^0.116.3",
+    "@lynx-js/types": "^3.7.0",
+    "@types/react": "^19.2.2",
+    "react": "^19.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@seed-design/lynx-primitive": "0.1.1-alpha.0",
+    "clsx": "^2.1.1"
+  }
+}

package/src/components/ActionButton/ActionButton.tsx

@@ -0,0 +1,62 @@
+import { actionButton } from "@seed-design/lynx-css/recipes/action-button";
+import type { ActionButtonVariantProps } from "@seed-design/lynx-css/recipes/action-button";
+import clsx from "clsx";
+import * as React from "react";
+
+/**
+ * @platform Lynx
+ *
+ * 미지원 기능 (Lynx 3.7 SVG 지원 후 추가 예정):
+ * - loading: SVG 기반 spinner 필요
+ * - layout: "iconOnly": SVG 아이콘 렌더링 필요
+ * - PrefixIcon / SuffixIcon: SVG 아이콘 렌더링 필요
+ *
+ * 웹 대비 미지원 기능:
+ * - color / fontWeight props: CSS variable 동적 주입 제한
+ * - bleedX / bleedY props: CSS variable 동적 주입 제한
+ */
+export interface ActionButtonProps extends Omit<ActionButtonVariantProps, "loading" | "layout"> {
+  children?: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  flexGrow?: number;
+  bindtap?: () => void;
+  "main-thread:bindtap"?: () => void;
+}
+
+export const ActionButton = React.forwardRef<unknown, ActionButtonProps>((props, ref) => {
+  const [variantProps, restProps] = actionButton.splitVariantProps(props);
+  const {
+    children,
+    className,
+    flexGrow,
+    bindtap,
+    "main-thread:bindtap": mainThreadBindtap,
+    ...nativeProps
+  } = restProps;
+
+  const { disabled = false } = variantProps;
+  const classes = actionButton({
+    ...variantProps,
+    layout: "withText",
+    disabled: disabled ? true : undefined,
+  });
+  const isInteractive = !disabled;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+      className={clsx(classes.root, className)}
+      style={flexGrow != null ? { flexGrow } : undefined}
+      {...(isInteractive && bindtap && { bindtap })}
+      {...(isInteractive &&
+        mainThreadBindtap && {
+          "main-thread:bindtap": mainThreadBindtap,
+        })}
+      {...nativeProps}
+    >
+      <text className={classes.text}>{children}</text>
+    </view>
+  );
+});
+ActionButton.displayName = "ActionButton";

package/src/components/ActionButton/index.ts

@@ -0,0 +1 @@
+export { ActionButton, type ActionButtonProps } from "./ActionButton";