@seed-design/lynx-react 0.2.0-alpha.2 → 0.2.0

package/lib/types.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode, Ref } from '@lynx-js/react';
+import { CSSProperties, IntrinsicElements, MainThread, NodesRef, TextProps, ViewProps } from '@lynx-js/types';
+export type LynxViewProps = IntrinsicElements["view"] & ViewProps;
+export type LynxTextProps = IntrinsicElements["text"] & TextProps;
+export type LynxViewRef = Ref<NodesRef>;
+export type LynxTextRef = Ref<NodesRef>;
+export type LynxMainThreadRef = Ref<MainThread.Element>;
+export type LynxStyle = CSSProperties;
+export interface LynxElementProps {
+    children?: ReactNode;
+    className?: LynxViewProps["className"];
+}
+export interface LynxStyledElementProps extends LynxElementProps {
+    style?: LynxStyle;
+}
+export interface LynxPressableProps {
+    bindtap?: LynxViewProps["bindtap"];
+    "main-thread:bindtap"?: LynxViewProps["main-thread:bindtap"];
+}
+export interface LynxTouchProps {
+    bindtap?: LynxViewProps["bindtap"];
+    bindtouchstart?: LynxViewProps["bindtouchstart"];
+    bindtouchend?: LynxViewProps["bindtouchend"];
+    bindtouchcancel?: LynxViewProps["bindtouchcancel"];
+    "main-thread:bindtap"?: LynxViewProps["main-thread:bindtap"];
+}
+export interface LynxIconElementProps {
+    className?: IntrinsicElements["image"]["className"];
+    style?: LynxStyle;
+    ref?: LynxMainThreadRef;
+    "main-thread:binduiappear"?: IntrinsicElements["image"]["main-thread:binduiappear"];
+}
+/**
+ * @platform Lynx
+ *
+ * native element(`<view>`/`<text>`/`<image>` 등)가 공유하는 접근성 속성 모음.
+ * `@lynx-js/types`의 StandardProps 접근성 속성을 표준화한 타입으로, 컴포넌트가
+ * 확장해 native element에 패스스루한다. 모든 native tag가 동일한 공통 속성을
+ * 가지며 tag별 차이는 없다.
+ *
+ * web ARIA 대응:
+ * - `accessibility-label` ← `aria-label`
+ * - `accessibility-role-description` ← `role` (switch/checkbox/progressbar)
+ * - `accessibility-value` ← `aria-checked` / `aria-valuenow`
+ * - `accessibility-elements-hidden` ← `aria-hidden`
+ *
+ * `accessibility-traits`는 단일 값이라 `selected`+`disabled` 동시 표현이 안 된다.
+ * 역할은 `accessibility-role-description`, 상태는 `accessibility-value`로 분담한다.
+ */
+export type LynxAccessibilityProps = Pick<LynxViewProps, "accessibility-label" | "accessibility-traits" | "accessibility-element" | "accessibility-value" | "accessibility-role-description" | "accessibility-elements-hidden" | "accessibility-heading" | "accessibility-actions" | "accessibility-exclusive-focus" | "ios-platform-accessibility-id">;
+//# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,SAAS,EACV,MAAM,gBAAgB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;AAClE,MAAM,MAAM,WAAW,GAAG,GAAG,CAAC,QAAQ,CAAC,CAAC;AACxC,MAAM,MAAM,WAAW,GAAG,GAAG,CAAC,QAAQ,CAAC,CAAC;AACxC,MAAM,MAAM,iBAAiB,GAAG,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,qBAAqB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;CAC9D;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,cAAc,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7C,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACnD,qBAAqB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;CAC9D;AAED,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,CAAC,EAAE,iBAAiB,CAAC;IACxB,0BAA0B,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC,0BAA0B,CAAC,CAAC;CACrF;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,aAAa,EACX,qBAAqB,GACrB,sBAAsB,GACtB,uBAAuB,GACvB,qBAAqB,GACrB,gCAAgC,GAChC,+BAA+B,GAC/B,uBAAuB,GACvB,uBAAuB,GACvB,+BAA+B,GAC/B,+BAA+B,CAClC,CAAC"}

package/lib/utils/children.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from '@lynx-js/react';
+export declare function toArray(children: ReactNode): ReactNode[];
+//# sourceMappingURL=children.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"children.d.ts","sourceRoot":"","sources":["../../src/utils/children.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,wBAAgB,OAAO,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAUxD"}

package/lib/utils/children.js

@@ -0,0 +1,8 @@
+//#region src/utils/children.ts
+function toArray(children) {
+	if (children == null || typeof children === "boolean") return [];
+	if (Array.isArray(children)) return children.flatMap(toArray);
+	return [children];
+}
+//#endregion
+export { toArray };

package/lib/utils/create-slot-recipe-context.d.ts

@@ -1,26 +1,27 @@
+import { ElementType, ForwardRefExoticComponent, PropsWithoutRef, ReactElement, ReactNode, RefAttributes } from '@lynx-js/react';
 type SlotRecipe<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>> = ((props?: Props) => Classnames) & {
     splitVariantProps: <T extends Props>(props: T) => [Props, Omit<T, keyof Props>];
 };
 export declare function createSlotRecipeContext<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>>(recipe: SlotRecipe<Props, Classnames>): {
-    ClassNamesProvider: ({ children, value, }: {
-        children: React.ReactNode;
+    ClassNamesProvider: (props: {
+        children: ReactNode;
         value: Classnames;
-    }) => import("react").JSX.Element;
-    PropsProvider: ({ children, value }: {
-        children: React.ReactNode;
+    }) => ReactElement;
+    PropsProvider: (props: {
+        children: ReactNode;
         value: Props;
-    }) => import("react").JSX.Element;
+    }) => ReactElement;
     useClassNames: () => Classnames;
     useProps: () => Props | null;
-    withRootProvider: <P>(Component: React.ElementType<any>, options?: {
+    withRootProvider: <P>(Component: ElementType<any>, options?: {
         defaultProps?: Partial<P>;
-    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P>>;
-    withProvider: <T, P>(Component: React.ElementType<any>, slot: keyof Classnames, options?: {
+    }) => ForwardRefExoticComponent<PropsWithoutRef<P>>;
+    withProvider: <T, P>(Component: ElementType<any>, slot: keyof Classnames, options?: {
         defaultProps?: Partial<P>;
-    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
-    withContext: <T, P>(Component: React.ElementType<any>, slot?: keyof Classnames, options?: {
+    }) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+    withContext: <T, P>(Component: ElementType<any>, slot?: keyof Classnames, options?: {
         defaultProps?: Partial<P>;
-    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+    }) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
 };
 export {};
 //# sourceMappingURL=create-slot-recipe-context.d.ts.map

package/lib/utils/create-slot-recipe-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-slot-recipe-context.d.ts","sourceRoot":"","sources":["../../src/utils/create-slot-recipe-context.tsx"],"names":[],"mappings":"AAGA,KAAK,UAAU,CACb,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACvC,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,GAAG;IACpC,iBAAiB,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC;CACjF,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC;+CAOlC;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,KAAK,EAAE,UAAU,CAAC;KACnB;yCAI2C;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE;;;uBAmB7D,CAAC,aACd,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,YACvB;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;mBAwBtC,CAAC,EAAE,CAAC,aACb,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,QAC3B,MAAM,UAAU,YACZ;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;kBA4BhE,CAAC,EAAE,CAAC,aACZ,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,SAC1B,MAAM,UAAU,YACb;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;EA+BtF"}
+{"version":3,"file":"create-slot-recipe-context.d.ts","sourceRoot":"","sources":["../../src/utils/create-slot-recipe-context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,WAAW,EACX,yBAAyB,EACzB,eAAe,EACf,YAAY,EACZ,SAAS,EACT,aAAa,EACd,MAAM,gBAAgB,CAAC;AAGxB,KAAK,UAAU,CACb,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACvC,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,GAAG;IACpC,iBAAiB,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC;CACjF,CAAC;AAUF,wBAAgB,uBAAuB,CACrC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAEzC,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,GACpC;IACD,kBAAkB,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE,KAAK,YAAY,CAAC;IACxF,aAAa,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE,KAAK,YAAY,CAAC;IAC9E,aAAa,EAAE,MAAM,UAAU,CAAC;IAChC,QAAQ,EAAE,MAAM,KAAK,GAAG,IAAI,CAAC;IAC7B,gBAAgB,EAAE,CAAC,CAAC,EAClB,SAAS,EAAE,WAAW,CAAC,GAAG,CAAC,EAC3B,OAAO,CAAC,EAAE;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACE,yBAAyB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,EACjB,SAAS,EAAE,WAAW,CAAC,GAAG,CAAC,EAC3B,IAAI,EAAE,MAAM,UAAU,EACtB,OAAO,CAAC,EAAE;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACE,yBAAyB,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;IACtE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,EAChB,SAAS,EAAE,WAAW,CAAC,GAAG,CAAC,EAC3B,IAAI,CAAC,EAAE,MAAM,UAAU,EACvB,OAAO,CAAC,EAAE;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACE,yBAAyB,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;CACvE,CAkIA"}

package/lib/utils/create-slot-recipe-context.jsx

@@ -1,76 +1,94 @@
-import { createContext, forwardRef, useContext } from "@lynx-js/react";
 import clsx from "clsx";
-export function createSlotRecipeContext(recipe) {
-    const ClassNamesContext = createContext(null);
-    const PropsContext = createContext(null);
-    const ClassNamesProvider = ({ children, value, }) => {
-        return <ClassNamesContext.Provider value={value}>{children}</ClassNamesContext.Provider>;
-    };
-    const PropsProvider = ({ children, value }) => {
-        return <PropsContext.Provider value={value}>{children}</PropsContext.Provider>;
-    };
-    function useClassNames() {
-        const context = useContext(ClassNamesContext);
-        if (context === null) {
-            throw new Error("useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?");
-        }
-        return context;
-    }
-    function useProps() {
-        return useContext(PropsContext);
-    }
-    const withRootProvider = (Component, options) => {
-        const { defaultProps } = options ?? {};
-        const StyledComponent = (innerProps) => {
-            const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps };
-            const [variantProps, otherProps] = recipe.splitVariantProps(props);
-            const classNames = recipe(variantProps);
-            return (<ClassNamesProvider value={classNames}>
+import { createContext, forwardRef, useContext } from "@lynx-js/react";
+//#region src/utils/create-slot-recipe-context.tsx
+function assertNotIntrinsicComponent(Component, caller) {
+	if (typeof Component !== "string") return;
+	throw new Error(`${caller} cannot wrap intrinsic tag "${Component}" in Lynx. Native <view>/<text> slots must be rendered as literal JSX in the component file; passing intrinsic strings through createSlotRecipeContext can cause BackgroundSnapshot not found errors.`);
+}
+function createSlotRecipeContext(recipe) {
+	const ClassNamesContext = createContext(null);
+	const PropsContext = createContext(null);
+	const ClassNamesProvider = ({ children, value }) => {
+		return <ClassNamesContext.Provider value={value}>{children}</ClassNamesContext.Provider>;
+	};
+	const PropsProvider = ({ children, value }) => {
+		return <PropsContext.Provider value={value}>{children}</PropsContext.Provider>;
+	};
+	function useClassNames() {
+		const context = useContext(ClassNamesContext);
+		if (context === null) throw new Error("useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?");
+		return context;
+	}
+	function useProps() {
+		return useContext(PropsContext);
+	}
+	const withRootProvider = (Component, options) => {
+		assertNotIntrinsicComponent(Component, "withRootProvider");
+		const { defaultProps } = options ?? {};
+		const StyledComponent = (innerProps) => {
+			const props = {
+				...defaultProps ?? {},
+				...useProps(),
+				...innerProps
+			};
+			const [variantProps, otherProps] = recipe.splitVariantProps(props);
+			const classNames = recipe(variantProps);
+			return <ClassNamesProvider value={classNames}>
           <PropsProvider value={variantProps}>
-            <Component {...otherProps}/>
+            <Component {...otherProps} />
           </PropsProvider>
-        </ClassNamesProvider>);
-        };
-        // @ts-expect-error — assigning displayName to a plain function component
-        StyledComponent.displayName = Component.displayName || Component.name;
-        return StyledComponent;
-    };
-    const withProvider = (Component, slot, options) => {
-        const { defaultProps } = options ?? {};
-        const StyledComponent = forwardRef((innerProps, ref) => {
-            const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps };
-            const [variantProps, otherProps] = recipe.splitVariantProps(props);
-            const classNames = recipe(variantProps);
-            const slotClassName = classNames[slot];
-            const userClassName = props["className"];
-            return (<ClassNamesProvider value={classNames}>
+        </ClassNamesProvider>;
+		};
+		StyledComponent.displayName = Component.displayName || Component.name;
+		return StyledComponent;
+	};
+	const withProvider = (Component, slot, options) => {
+		assertNotIntrinsicComponent(Component, "withProvider");
+		const { defaultProps } = options ?? {};
+		const StyledComponent = forwardRef((innerProps, ref) => {
+			const props = {
+				...defaultProps ?? {},
+				...useProps(),
+				...innerProps
+			};
+			const [variantProps, otherProps] = recipe.splitVariantProps(props);
+			const classNames = recipe(variantProps);
+			const slotClassName = classNames[slot];
+			const userClassName = props["className"];
+			return <ClassNamesProvider value={classNames}>
           <PropsProvider value={variantProps}>
-            <Component {...(ref ? { ref } : {})} {...otherProps} className={clsx(slotClassName, userClassName)}/>
+            <Component {...ref ? { ref } : {}} {...otherProps} className={clsx(slotClassName, userClassName)} />
           </PropsProvider>
-        </ClassNamesProvider>);
-        });
-        StyledComponent.displayName = Component.displayName || Component.name;
-        return StyledComponent;
-    };
-    const withContext = (Component, slot, options) => {
-        const { defaultProps } = options ?? {};
-        const StyledComponent = forwardRef((innerProps, ref) => {
-            const props = { ...(defaultProps ?? {}), ...innerProps };
-            const classNames = useClassNames();
-            const slotClassName = slot ? classNames[slot] : undefined;
-            const userClassName = props["className"];
-            return (<Component {...(ref ? { ref } : {})} {...props} className={clsx(slotClassName, userClassName)}/>);
-        });
-        StyledComponent.displayName = Component.displayName || Component.name;
-        return StyledComponent;
-    };
-    return {
-        ClassNamesProvider,
-        PropsProvider,
-        useClassNames,
-        useProps,
-        withRootProvider,
-        withProvider,
-        withContext,
-    };
+        </ClassNamesProvider>;
+		});
+		StyledComponent.displayName = Component.displayName || Component.name;
+		return StyledComponent;
+	};
+	const withContext = (Component, slot, options) => {
+		assertNotIntrinsicComponent(Component, "withContext");
+		const { defaultProps } = options ?? {};
+		const StyledComponent = forwardRef((innerProps, ref) => {
+			const props = {
+				...defaultProps ?? {},
+				...innerProps
+			};
+			const classNames = useClassNames();
+			const slotClassName = slot ? classNames[slot] : void 0;
+			const userClassName = props["className"];
+			return <Component {...ref ? { ref } : {}} {...props} className={clsx(slotClassName, userClassName)} />;
+		});
+		StyledComponent.displayName = Component.displayName || Component.name;
+		return StyledComponent;
+	};
+	return {
+		ClassNamesProvider,
+		PropsProvider,
+		useClassNames,
+		useProps,
+		withRootProvider,
+		withProvider,
+		withContext
+	};
 }
+//#endregion
+export { createSlotRecipeContext };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"get-seed-class-name.d.ts","sourceRoot":"","sources":["../../src/utils/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"}
+{"version":3,"file":"get-seed-class-name.d.ts","sourceRoot":"","sources":["../../src/utils/get-seed-class-name.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,YAAY,GAAG,WAAW,CAAC;AAE9D,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,MAAM,CAkB1E"}

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

@@ -1,39 +1,28 @@
+//#region src/utils/get-seed-class-name.ts
 /**
- * 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}`;
+* Lynx 앱의 root `<page>` 요소에 적용할 SEED Design className을 반환한다.
+*
+* 테마(dark/light)를 자동 감지하여 렌더링 전에 올바른 CSS 변수가 적용되도록 한다.
+*
+* @example
+* ```tsx
+* import { getSeedClassName } from "@seed-design/lynx-react";
+*
+* root.render(
+*   <page className={getSeedClassName({ colorMode: "system" })}>
+*     <App />
+*   </page>
+* );
+* ```
+*/
+function getSeedClassName(options) {
+	const { colorMode = "system" } = options ?? {};
+	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";
+	return themeClass;
 }
+//#endregion
+export { getSeedClassName };

package/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./create-slot-recipe-context";
-export * from "./get-seed-class-name";
-export * from "./resolve-recipe-token";
-export * from "./split-multiple-variants-props";
+export * from './create-slot-recipe-context';
+export * from './get-seed-class-name';
+export * from './resolve-recipe-token';
+export * from './split-multiple-variants-props';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,47 +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 를 만들어 호출한다.
- */
-export function resolveRecipeToken(vars, path) {
-    let cursor = vars;
-    for (const key of path) {
-        if (cursor == null || typeof cursor !== "object")
-            return undefined;
-        cursor = cursor[key];
-    }
-    return typeof cursor === "string" ? cursor : undefined;
+* 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`).
- */
-export function capitalize(value) {
-    return (value.charAt(0).toUpperCase() + value.slice(1));
+* 첫 글자 대문자. 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.js

@@ -1,34 +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`).
- */
-export function splitMultipleVariantsProps(props, recipesMap) {
-    const multipleVariantsProps = {};
-    const extractedKeys = 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];
+* 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 };