@seed-design/lynx-react 0.1.0

package/lib/utils/resolve-recipe-token.js

@@ -0,0 +1,49 @@
+//#region src/utils/resolve-recipe-token.ts
+/**
+* Rootage vars 객체에서 `path` 를 따라 token 값(주로 `"var(--seed-...)"` 스트링)을 꺼낸다.
+*
+* 쓰임새: Lynx `<image>` 의 `tint-color` / `width` / `height` 처럼 CSS 만으로는
+* override 할 수 없거나(아이콘 패키지가 inline style 을 박는 경우 등) React 가
+* recipe 와 같은 소스에서 꺼내 inline attribute 로 주입해야 하는 속성을 다룰 때.
+*
+* ```ts
+* import { actionButton as actionButtonVars } from "@seed-design/lynx-css/vars/component";
+* import { capitalize, resolveRecipeToken } from "@seed-design/lynx-react/utils/resolve-recipe-token";
+*
+* // variant × state × slot → color
+* const color = resolveRecipeToken(actionButtonVars, [
+*   `variant${capitalize(variant)}`,
+*   state,          // "enabled" | "disabled" | "loading" | "pressed"
+*   "prefixIcon",
+*   "color",
+* ]);
+*
+* // size × layout → icon size
+* const size = resolveRecipeToken(actionButtonVars, [
+*   `size${capitalize(size)}Layout${capitalize(layout)}`,
+*   "enabled",
+*   "prefixIcon",
+*   "size",
+* ]);
+* ```
+*
+* recipe token 경로가 컴포넌트마다 조금씩 다르므로(variant/size/layout 조합 여부 등)
+* 이 유틸은 "vars + path" 조합만 제공하고, 각 컴포넌트가 자기 path 를 만들어 호출한다.
+*/
+function resolveRecipeToken(vars, path) {
+	let cursor = vars;
+	for (const key of path) {
+		if (cursor == null || typeof cursor !== "object") return void 0;
+		cursor = cursor[key];
+	}
+	return typeof cursor === "string" ? cursor : void 0;
+}
+/**
+* 첫 글자 대문자. recipe variant key 조립용
+* (e.g. `variant` + `brandSolid` → `variantBrandSolid`).
+*/
+function capitalize(value) {
+	return value.charAt(0).toUpperCase() + value.slice(1);
+}
+//#endregion
+export { capitalize, resolveRecipeToken };

package/lib/utils/split-multiple-variants-props.d.ts

@@ -0,0 +1,29 @@
+type RecipeLike = {
+    splitVariantProps: (props: Record<string, unknown>) => [Record<string, unknown>, unknown];
+};
+type ExtractVariantProps<T> = T extends {
+    splitVariantProps: (...args: never[]) => [infer V, unknown];
+} ? V : never;
+type ExtractAllVariantKeys<R> = {
+    [K in keyof R]: ExtractVariantProps<R[K]> extends infer V ? V extends Record<string, unknown> ? keyof V : never : never;
+}[keyof R];
+/**
+ * Split `props` across multiple recipes' variant extractors in one pass.
+ *
+ * Given `recipesMap` of `{ [recipeKey]: recipe }`, returns:
+ * - A bucket per recipe key with that recipe's variant-only props.
+ * - `remainingProps` with every recipe variant key stripped out.
+ *
+ * Keys that appear in more than one recipe (e.g. shared `size`) are copied
+ * into each corresponding bucket. `remainingProps` never includes any key
+ * that any recipe claimed as a variant.
+ *
+ * Mirror of `packages/react/src/utils/splitMultipleVariantsProps` adapted
+ * to TypeScript for Lynx. Use when a single compound component composes two
+ * or more recipes (e.g. Switch's `switch` + `switchmark`).
+ */
+export declare function splitMultipleVariantsProps<R extends Record<string, RecipeLike>, P>(props: P, recipesMap: R): [{
+    [K in keyof R]: ExtractVariantProps<R[K]>;
+}, Omit<P, ExtractAllVariantKeys<R>>];
+export {};
+//# sourceMappingURL=split-multiple-variants-props.d.ts.map

package/lib/utils/split-multiple-variants-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-multiple-variants-props.d.ts","sourceRoot":"","sources":["../../src/utils/split-multiple-variants-props.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG;IAChB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;CAC3F,CAAC;AAEF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,SAAS;IACtC,iBAAiB,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;CAC7D,GACG,CAAC,GACD,KAAK,CAAC;AAEV,KAAK,qBAAqB,CAAC,CAAC,IAAI;KAC7B,CAAC,IAAI,MAAM,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,CAAC,GACrD,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC/B,MAAM,CAAC,GACP,KAAK,GACP,KAAK;CACV,CAAC,MAAM,CAAC,CAAC,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC,EAChF,KAAK,EAAE,CAAC,EACR,UAAU,EAAE,CAAC,GACZ,CAAC;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,EAAE,IAAI,CAAC,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAsBpF"}

package/lib/utils/split-multiple-variants-props.js

@@ -0,0 +1,34 @@
+//#region src/utils/split-multiple-variants-props.ts
+/**
+* Split `props` across multiple recipes' variant extractors in one pass.
+*
+* Given `recipesMap` of `{ [recipeKey]: recipe }`, returns:
+* - A bucket per recipe key with that recipe's variant-only props.
+* - `remainingProps` with every recipe variant key stripped out.
+*
+* Keys that appear in more than one recipe (e.g. shared `size`) are copied
+* into each corresponding bucket. `remainingProps` never includes any key
+* that any recipe claimed as a variant.
+*
+* Mirror of `packages/react/src/utils/splitMultipleVariantsProps` adapted
+* to TypeScript for Lynx. Use when a single compound component composes two
+* or more recipes (e.g. Switch's `switch` + `switchmark`).
+*/
+function splitMultipleVariantsProps(props, recipesMap) {
+	const multipleVariantsProps = {};
+	const extractedKeys = /* @__PURE__ */ new Set();
+	const propsRecord = props;
+	for (const recipeKey in recipesMap) {
+		const [variantProps] = recipesMap[recipeKey].splitVariantProps(propsRecord);
+		multipleVariantsProps[recipeKey] = variantProps;
+		for (const variantPropKey in variantProps) extractedKeys.add(variantPropKey);
+	}
+	const remainingProps = {};
+	for (const propKey in propsRecord) {
+		if (extractedKeys.has(propKey)) continue;
+		remainingProps[propKey] = propsRecord[propKey];
+	}
+	return [multipleVariantsProps, remainingProps];
+}
+//#endregion
+export { splitMultipleVariantsProps };

package/lib/utils/styled.d.ts

@@ -0,0 +1,83 @@
+import { CSSProperties } from '@lynx-js/types';
+import { Dimension, FontSize, FontWeight, LineHeight, Radius, ScopedColorBanner, ScopedColorBg, ScopedColorFg, ScopedColorPalette, ScopedColorStroke, SpacingX, SpacingY } from '@seed-design/lynx-css/vars';
+export declare function handleColor(color: string | undefined): any;
+export declare function handleDimension(dimension: number | string | undefined): string | undefined;
+export declare function resolveFlexValue(value: number | string | boolean | undefined): number | string | undefined;
+export declare function handlePaddingWithSafeArea(padding: string | 0 | undefined, safeAreaInset: string): string | undefined;
+export declare function handleRadius(radius: string | 0 | undefined): any;
+export declare function handleFontWeight(fontWeight: string | undefined): any;
+export declare function handleFontSize(size: string | undefined): any;
+export declare function handleLineHeight(lineHeight: string | undefined): any;
+export interface StyleProps {
+    bg?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+    background?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (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 & {});
+    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 & {});
+    p?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingX?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    px?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingY?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    py?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+    pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+    paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+    pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+    paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    display?: "flex" | "none" | (string & {});
+    position?: "relative" | "absolute" | "fixed" | (string & {});
+    overflowX?: "visible" | "hidden" | (string & {});
+    overflowY?: "visible" | "hidden" | (string & {});
+    zIndex?: CSSProperties["zIndex"];
+    flexGrow?: CSSProperties["flexGrow"] | boolean;
+    flexShrink?: CSSProperties["flexShrink"] | boolean;
+    flexDirection?: "row" | "column" | "rowReverse" | "columnReverse" | (string & {});
+    flexWrap?: "nowrap" | "wrap" | boolean;
+    justifyContent?: "flexStart" | "flexEnd" | "center" | "spaceBetween" | "spaceAround" | (string & {});
+    justifySelf?: CSSProperties["justifySelf"];
+    alignItems?: "flexStart" | "flexEnd" | "center" | "stretch" | (string & {});
+    alignContent?: "flexStart" | "flexEnd" | "center" | "stretch" | (string & {});
+    alignSelf?: "flexStart" | "flexEnd" | "center" | "stretch" | (string & {});
+    gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+}
+interface UseStyleProps extends StyleProps {
+    style?: CSSProperties;
+}
+export declare function useStyleProps<T extends UseStyleProps>(props: T): {
+    style: CSSProperties;
+    restProps: Omit<T, keyof UseStyleProps>;
+};
+export type TextStyle = "screenTitle" | "articleBody" | "articleNote" | "t1Regular" | "t1Medium" | "t1Bold" | "t2Regular" | "t2Medium" | "t2Bold" | "t3Regular" | "t3Medium" | "t3Bold" | "t4Regular" | "t4Medium" | "t4Bold" | "t5Regular" | "t5Medium" | "t5Bold" | "t6Regular" | "t6Medium" | "t6Bold" | "t7Regular" | "t7Medium" | "t7Bold" | "t8Bold" | "t9Bold" | "t10Bold" | "t1StaticRegular" | "t1StaticMedium" | "t1StaticBold" | "t2StaticRegular" | "t2StaticMedium" | "t2StaticBold" | "t3StaticRegular" | "t3StaticMedium" | "t3StaticBold" | "t4StaticRegular" | "t4StaticMedium" | "t4StaticBold" | "t5StaticRegular" | "t5StaticMedium" | "t5StaticBold" | "t6StaticRegular" | "t6StaticMedium" | "t6StaticBold" | "t7StaticRegular" | "t7StaticMedium" | "t7StaticBold" | "t8StaticBold" | "t9StaticBold" | "t10StaticBold";
+export interface TextStyleProps {
+    color?: ScopedColorFg | ScopedColorPalette | (string & {});
+    fontSize?: FontSize | (string & {});
+    lineHeight?: LineHeight | (string & {});
+    fontWeight?: FontWeight;
+    textStyle?: TextStyle;
+    align?: "left" | "center" | "right";
+}
+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.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EACV,SAAS,EACT,QAAQ,EACR,UAAU,EACV,UAAU,EACV,MAAM,EACN,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACT,MAAM,4BAA4B,CAAC;AAKpC,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,OAOpD;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAiB1F;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAC3C,MAAM,GAAG,MAAM,GAAG,SAAS,CAI7B;AAcD,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS,EAC/B,aAAa,EAAE,MAAM,GACpB,MAAM,GAAG,SAAS,CAMpB;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS,OAM1D;AA6DD,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,OAM9D;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,OAMtD;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,OAM9D;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,CAAC,EAAE,aAAa,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5E,UAAU,CAAC,EAAE,aAAa,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACpF,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC3D,WAAW,CAAC,EAAE,iBAAiB,GAAG,kBAAkB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACrE,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACpC,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACvC,gBAAgB,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1C,mBAAmB,CAAC,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACjD,oBAAoB,CAAC,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClD,uBAAuB,CAAC,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACrD,sBAAsB,CAAC,EAAE,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC7F,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAChG,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAChG,MAAM,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9F,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACjG,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACjG,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1F,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACpF,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC3F,EAAE,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACrF,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC3F,EAAE,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACrF,UAAU,CAAC,EACP,SAAS,GACT,YAAY,QAAQ,EAAE,GACtB,YAAY,QAAQ,EAAE,GACtB,CAAC,GACD,UAAU,GACV,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClB,EAAE,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClG,YAAY,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/F,EAAE,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACrF,aAAa,CAAC,EACV,SAAS,GACT,YAAY,QAAQ,EAAE,GACtB,YAAY,QAAQ,EAAE,GACtB,CAAC,GACD,UAAU,GACV,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClB,EAAE,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClG,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9F,EAAE,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACrF,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC7D,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACjD,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,GAAG,OAAO,CAAC;IAC/C,UAAU,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,OAAO,CAAC;IACnD,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,YAAY,GAAG,eAAe,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClF,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IACvC,cAAc,CAAC,EACX,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,aAAa,GACb,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC5E,YAAY,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9E,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC3E,GAAG,CAAC,EAAE,SAAS,GAAG,YAAY,QAAQ,EAAE,GAAG,YAAY,QAAQ,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACvF;AAED,UAAU,aAAc,SAAQ,UAAU;IACxC,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,aAAa,EACnD,KAAK,EAAE,CAAC,GACP;IACD,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,aAAa,CAAC,CAAC;CACzC,CA+HA;AAED,MAAM,MAAM,SAAS,GACjB,aAAa,GACb,aAAa,GACb,aAAa,GACb,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,cAAc,GACd,cAAc,GACd,eAAe,CAAC;AAEpB,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC3D,QAAQ,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC"}

package/lib/utils/styled.js

@@ -0,0 +1,144 @@
+import { useSafeArea } from "../hooks/useSafeArea.js";
+import { vars } from "@seed-design/lynx-css/vars";
+//#region src/utils/styled.ts
+function handleColor(color) {
+	if (!color) return;
+	const [type, value] = color.split(".");
+	return vars.$color[type]?.[value] ?? color;
+}
+function handleDimension(dimension) {
+	if (dimension == null) return;
+	if (typeof dimension === "number") return `${dimension}px`;
+	if (dimension === "full") return "100%";
+	const [type, value] = dimension.split(".");
+	return vars.$dimension[dimension] ?? vars.$dimension[type]?.[value] ?? dimension;
+}
+function resolveFlexValue(value) {
+	if (value === true) return 1;
+	if (value === false) return 0;
+	return value;
+}
+function handleBorderWidth(width) {
+	if (width == null) return;
+	if (typeof width === "number") return `${width}px`;
+	return width;
+}
+function handlePaddingWithSafeArea(padding, safeAreaInset) {
+	if (padding === "safeArea") return safeAreaInset;
+	return handleDimension(padding);
+}
+function handleRadius(radius) {
+	if (radius == null) return;
+	return vars.$radius[radius] ?? radius;
+}
+function handleDisplay(display) {
+	if (!display) return;
+	return {
+		flex: "flex",
+		none: "none"
+	}[display] ?? display;
+}
+function handleFlexDirection(flexDirection) {
+	if (!flexDirection) return;
+	return {
+		row: "row",
+		column: "column",
+		rowReverse: "row-reverse",
+		columnReverse: "column-reverse"
+	}[flexDirection] ?? flexDirection;
+}
+function handleJustifyContent(justifyContent) {
+	if (!justifyContent) return;
+	return {
+		flexStart: "flex-start",
+		flexEnd: "flex-end",
+		center: "center",
+		spaceBetween: "space-between",
+		spaceAround: "space-around"
+	}[justifyContent] ?? justifyContent;
+}
+function handleAlignItems(alignItems) {
+	if (!alignItems) return;
+	return {
+		flexStart: "flex-start",
+		flexEnd: "flex-end",
+		center: "center",
+		stretch: "stretch"
+	}[alignItems] ?? alignItems;
+}
+function handleFontWeight(fontWeight) {
+	if (!fontWeight) return;
+	return vars.$fontWeight[fontWeight] ?? fontWeight;
+}
+function handleFontSize(size) {
+	if (!size) return;
+	return vars.$fontSize[size] ?? size;
+}
+function handleLineHeight(lineHeight) {
+	if (!lineHeight) return;
+	return vars.$lineHeight[lineHeight] ?? lineHeight;
+}
+function useStyleProps(props) {
+	const { background, bg, color, borderColor, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, p, px, py, pt, pr, pb, pl, bottom, left, right, top, display, position, overflowX, overflowY, zIndex, flexGrow, flexShrink, flexDirection, flexWrap, justifyContent, justifySelf, alignItems, alignContent, alignSelf, gap, style, ...restProps } = props;
+	const { safeAreaInsetTop, safeAreaInsetBottom } = useSafeArea();
+	const backgroundValue = handleColor(background ?? bg);
+	const paddingValue = handleDimension(padding ?? p);
+	const paddingXValue = handleDimension(paddingX ?? px) ?? paddingValue;
+	const paddingYValue = handleDimension(paddingY ?? py) ?? paddingValue;
+	const paddingTopValue = handlePaddingWithSafeArea(paddingTop ?? pt, safeAreaInsetTop) ?? paddingYValue;
+	const paddingRightValue = handleDimension(paddingRight ?? pr) ?? paddingXValue;
+	const paddingBottomValue = handlePaddingWithSafeArea(paddingBottom ?? pb, safeAreaInsetBottom) ?? paddingYValue;
+	const paddingLeftValue = handleDimension(paddingLeft ?? pl) ?? paddingXValue;
+	const hasBorderStyle = borderColor != null || borderWidth != null || borderTopWidth != null || borderRightWidth != null || borderBottomWidth != null || borderLeftWidth != null;
+	return {
+		style: {
+			background: backgroundValue,
+			color: handleColor(color),
+			borderStyle: hasBorderStyle ? "solid" : void 0,
+			borderColor: handleColor(borderColor),
+			borderWidth: handleBorderWidth(borderWidth),
+			borderTopWidth: handleBorderWidth(borderTopWidth),
+			borderRightWidth: handleBorderWidth(borderRightWidth),
+			borderBottomWidth: handleBorderWidth(borderBottomWidth),
+			borderLeftWidth: handleBorderWidth(borderLeftWidth),
+			borderRadius: handleRadius(borderRadius),
+			borderTopLeftRadius: handleRadius(borderTopLeftRadius),
+			borderTopRightRadius: handleRadius(borderTopRightRadius),
+			borderBottomRightRadius: handleRadius(borderBottomRightRadius),
+			borderBottomLeftRadius: handleRadius(borderBottomLeftRadius),
+			width: handleDimension(width),
+			minWidth: handleDimension(minWidth),
+			maxWidth: handleDimension(maxWidth),
+			height: handleDimension(height),
+			minHeight: handleDimension(minHeight),
+			maxHeight: handleDimension(maxHeight),
+			paddingTop: paddingTopValue,
+			paddingRight: paddingRightValue,
+			paddingBottom: paddingBottomValue,
+			paddingLeft: paddingLeftValue,
+			top: handleDimension(top),
+			left: handleDimension(left),
+			right: handleDimension(right),
+			bottom: handleDimension(bottom),
+			gap: handleDimension(gap),
+			display: handleDisplay(display),
+			position,
+			overflowX,
+			overflowY,
+			zIndex,
+			flexGrow: resolveFlexValue(flexGrow),
+			flexShrink: resolveFlexValue(flexShrink),
+			flexDirection: handleFlexDirection(flexDirection),
+			flexWrap: flexWrap === true ? "wrap" : flexWrap === false ? "nowrap" : flexWrap,
+			justifyContent: handleJustifyContent(justifyContent),
+			justifySelf,
+			alignItems: handleAlignItems(alignItems),
+			alignContent: handleAlignItems(alignContent),
+			alignSelf: handleAlignItems(alignSelf),
+			...style
+		},
+		restProps
+	};
+}
+//#endregion
+export { handleColor, handleDimension, handleFontSize, handleFontWeight, handleLineHeight, resolveFlexValue, useStyleProps };

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@seed-design/lynx-react",
+  "version": "0.1.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"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "vite build",
+    "lint:publish": "bun publint",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json --noEmit"
+  },
+  "peerDependencies": {
+    "@lynx-js/react": ">=0.100.0",
+    "@lynx-js/types": ">=3.7.0",
+    "@seed-design/lynx-css": "0.0.0 || >=0.1.0 <1.0.0"
+  },
+  "devDependencies": {
+    "@lynx-js/react": "^0.116.3",
+    "@lynx-js/types": "^3.7.0",
+    "@seed-design/lynx-css": "0.1.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "jsdom": "^29.0.2",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@lynx-js/lynx-ui-sheet": "^3.130.1",
+    "@lynx-js/lynx-ui-common": "^3.130.0",
+    "clsx": "^2.1.1"
+  }
+}

package/src/components/ActionButton/ActionButton.test.tsx

@@ -0,0 +1,137 @@
+import "@testing-library/jest-dom";
+import { getQueriesForElement, render } from "@lynx-js/react/testing-library";
+import type { MainThread } from "@lynx-js/types";
+import * as React from "@lynx-js/react";
+import { describe, expect, it, vi } from "vitest";
+
+import type { LynxIconElementProps } from "../../types";
+import { Icon, PrefixIcon, SuffixIcon } from "../Icon";
+import { ActionButton } from "./ActionButton";
+
+vi.mock("@lynx-js/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@lynx-js/react")>();
+
+  return {
+    ...actual,
+    runOnMainThread: () => () => undefined,
+  };
+});
+
+function getRenderedQueries() {
+  return getQueriesForElement(getRenderedRoot());
+}
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+const MockIcon = React.forwardRef<MainThread.Element, LynxIconElementProps>((props, ref) => {
+  const { className, style, ...rest } = props;
+
+  return (
+    <image
+      {...rest}
+      {...(ref ? { "main-thread:ref": ref as React.Ref<MainThread.Element> } : {})}
+      className={className}
+      style={style}
+    />
+  );
+});
+MockIcon.displayName = "MockIcon";
+
+describe("ActionButton", () => {
+  it("keeps the original label in the text slot while loading", () => {
+    render(<ActionButton loading>Submit</ActionButton>);
+
+    const { getByText } = getRenderedQueries();
+    const label = getByText("Submit");
+    const root = getRenderedRoot();
+
+    expect(label).toHaveClass("seed-action-button__text");
+    expect(label).toHaveClass("seed-action-button__text--size_medium-layout_withText");
+    expect(root.querySelector(".seed-action-button__content")).toBeInTheDocument();
+    expect(root.querySelector(".seed-action-button__loadingIndicator")).toBeInTheDocument();
+    expect(root.querySelector(".seed-progress-circle__root")).toBeInTheDocument();
+  });
+
+  it("applies action button slot classes to child icon slots", () => {
+    render(
+      <ActionButton variant="brandSolid">
+        <PrefixIcon icon={<MockIcon />} />
+        Submit
+        <SuffixIcon icon={<MockIcon />} />
+      </ActionButton>,
+    );
+
+    const { getByText } = getRenderedQueries();
+    const root = getRenderedRoot();
+
+    expect(root.querySelector(".seed-prefix-icon")).toHaveClass("seed-action-button__prefixIcon");
+    expect(root.querySelector(".seed-suffix-icon")).toHaveClass("seed-action-button__suffixIcon");
+    expect(root.querySelector(".seed-prefix-icon image")).toHaveStyle({
+      width: "100%",
+      height: "100%",
+    });
+    expect(getByText("Submit")).toHaveClass("seed-action-button__text");
+  });
+
+  it("keeps existing icon props compatible with the new slot wrapper", () => {
+    render(
+      <ActionButton prefixIcon={<MockIcon />} suffixIcon={<MockIcon />}>
+        Submit
+      </ActionButton>,
+    );
+
+    const root = getRenderedRoot();
+
+    expect(root.querySelector(".seed-prefix-icon")).toHaveClass("seed-action-button__prefixIcon");
+    expect(root.querySelector(".seed-suffix-icon")).toHaveClass("seed-action-button__suffixIcon");
+  });
+
+  it("supports icon-only child slot", () => {
+    render(
+      <ActionButton layout="iconOnly" aria-label="Add">
+        <Icon icon={<MockIcon />} />
+      </ActionButton>,
+    );
+
+    const root = getRenderedRoot();
+
+    expect(root.querySelector(".seed-icon")).toHaveClass("seed-action-button__icon");
+  });
+
+  it("keeps existing icon prop compatible with icon-only validation", () => {
+    render(<ActionButton layout="iconOnly" aria-label="Add" icon={<MockIcon />} />);
+
+    const root = getRenderedRoot();
+
+    expect(root.querySelector(".seed-icon")).toHaveClass("seed-action-button__icon");
+  });
+
+  it("throws in development when icon-only layout has no Icon child", () => {
+    expect(() => {
+      render(
+        <ActionButton layout="iconOnly" aria-label="Add">
+          Add
+        </ActionButton>,
+      );
+    }).toThrow(/must render <Icon \/> as a child/);
+  });
+
+  it("throws in development when icon-only layout has multiple Icon children", () => {
+    expect(() => {
+      render(
+        <ActionButton layout="iconOnly" aria-label="Add">
+          <Icon icon={<MockIcon />} />
+          <Icon icon={<MockIcon />} />
+        </ActionButton>,
+      );
+    }).toThrow(/must render only one <Icon \/>/);
+  });
+});