@seed-design/lynx-react 0.1.0

package/lib/components/Text/Text.jsx

@@ -0,0 +1,28 @@
+import { handleColor, handleFontSize, handleFontWeight, handleLineHeight } from "../../utils/styled.js";
+import { typography } from "@seed-design/lynx-css/vars/component";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+//#region src/components/Text/Text.tsx
+function capitalize(value) {
+	return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function getTypographyStyle(textStyle) {
+	return typography[`textStyle${capitalize(textStyle ?? "t5Regular")}`].enabled.root;
+}
+var Text = React.forwardRef((props, ref) => {
+	const { color, textStyle, fontSize, lineHeight, fontWeight, align, children, className, style, ...nativeProps } = props;
+	const typographyStyle = getTypographyStyle(textStyle);
+	return <text {...ref ? { ref } : {}} {...nativeProps} className={clsx(className)} style={{
+		color: handleColor(color),
+		fontSize: handleFontSize(fontSize) ?? typographyStyle.fontSize,
+		lineHeight: handleLineHeight(lineHeight ?? fontSize) ?? typographyStyle.lineHeight,
+		fontWeight: handleFontWeight(fontWeight) ?? typographyStyle.fontWeight,
+		textAlign: align,
+		...style
+	}}>
+      {children}
+    </text>;
+});
+Text.displayName = "Text";
+//#endregion
+export { 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/index.d.ts

@@ -0,0 +1,12 @@
+export * from './ActionButton';
+export * from './Box';
+export * from './BottomSheet';
+export * from './Checkbox';
+export * from './Icon';
+export * from './ProgressCircle';
+export * from './RadioGroup';
+export * from './Stack';
+export * from './Switch';
+export * from './TagGroup';
+export * from './Text';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC"}

package/lib/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useControllableState';
+export * from './useIconColor';
+export * from './usePressTap';
+export * from './useSafeArea';
+//# sourceMappingURL=index.d.ts.map

package/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/lib/hooks/useControllableState.d.ts

@@ -0,0 +1,15 @@
+export interface UseControllableStateProps<T> {
+    value?: T;
+    defaultValue: T;
+    onChange?: (value: T) => void;
+}
+/**
+ * Controlled/uncontrolled state pattern for Lynx components.
+ *
+ * - When `value` is provided, the component is controlled.
+ * - When `value` is `undefined`, the component manages its own state
+ *   starting from `defaultValue`.
+ * - `onChange` fires in both modes.
+ */
+export declare function useControllableState<T>(props: UseControllableStateProps<T>): [T, (value: T) => void];
+//# sourceMappingURL=useControllableState.d.ts.map

package/lib/hooks/useControllableState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControllableState.d.ts","sourceRoot":"","sources":["../../src/hooks/useControllableState.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,EAAE,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,KAAK,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAClC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAkBzB"}

package/lib/hooks/useControllableState.js

@@ -0,0 +1,27 @@
+import { useRef, useState } from "@lynx-js/react";
+import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
+//#region src/hooks/useControllableState.ts
+/**
+* Controlled/uncontrolled state pattern for Lynx components.
+*
+* - When `value` is provided, the component is controlled.
+* - When `value` is `undefined`, the component manages its own state
+*   starting from `defaultValue`.
+* - `onChange` fires in both modes.
+*/
+function useControllableState(props) {
+	const { value, defaultValue, onChange } = props;
+	const isControlled = value !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const currentValue = isControlled ? value : uncontrolledValue;
+	const prevValueRef = useRef(currentValue);
+	return [currentValue, useMemoizedFn((nextValue) => {
+		if (!isControlled) setUncontrolledValue(nextValue);
+		if (nextValue !== prevValueRef.current) {
+			onChange?.(nextValue);
+			prevValueRef.current = nextValue;
+		}
+	})];
+}
+//#endregion
+export { useControllableState };

package/lib/hooks/useIconColor.d.ts

@@ -0,0 +1,19 @@
+import { MainThread } from '@lynx-js/types';
+import { DependencyList, RefObject } from '@lynx-js/react';
+export interface UseIconColorOptions {
+    sourceRef?: RefObject<MainThread.Element>;
+}
+/**
+ * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
+ * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
+ *
+ * ```tsx
+ * const iconColorProps = useIconColor([variant, disabled, loading]);
+ * return cloneElement(iconChild, iconColorProps);
+ * ```
+ */
+export declare function useIconColor(deps: DependencyList, options?: UseIconColorOptions): {
+    ref: RefObject<MainThread.Element>;
+    "main-thread:binduiappear": () => void;
+};
+//# sourceMappingURL=useIconColor.d.ts.map

package/lib/hooks/useIconColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;CAC3C;AAyBD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAeA"}

package/lib/hooks/useIconColor.js

@@ -0,0 +1,38 @@
+import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
+//#region src/hooks/useIconColor.ts
+function syncTintColor(targetRef, sourceRef) {
+	"main thread";
+	const target = targetRef.current;
+	if (!target) return;
+	const source = sourceRef?.current ?? target;
+	let color;
+	if (typeof source.getComputedStyleProperty === "function") color = source.getComputedStyleProperty("color");
+	else if (typeof source.getComputedCssProperty === "function") color = source.getComputedCssProperty("color");
+	if (color) target.setAttribute("tint-color", color);
+}
+/**
+* Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
+* `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
+*
+* ```tsx
+* const iconColorProps = useIconColor([variant, disabled, loading]);
+* return cloneElement(iconChild, iconColorProps);
+* ```
+*/
+function useIconColor(deps, options) {
+	const ref = useMainThreadRef(null);
+	const sourceRef = options?.sourceRef;
+	function syncOnUiAppear() {
+		"main thread";
+		syncTintColor(ref, sourceRef);
+	}
+	useEffect(() => {
+		runOnMainThread(syncTintColor)(ref, sourceRef);
+	}, deps);
+	return {
+		ref,
+		"main-thread:binduiappear": syncOnUiAppear
+	};
+}
+//#endregion
+export { useIconColor };

package/lib/hooks/usePressTap.d.ts

@@ -0,0 +1,27 @@
+import { BaseTouchEvent, EventHandler, Target } from '@lynx-js/types';
+import { LynxTouchProps } from '../types';
+type TouchHandler = EventHandler<BaseTouchEvent<Target>>;
+export interface UsePressTapOptions {
+    disabled?: boolean;
+    onTap?: TouchHandler;
+    mainThreadOnTap?: LynxTouchProps["main-thread:bindtap"];
+}
+export interface UsePressTapReturn {
+    pressed: boolean;
+    bindtap: TouchHandler;
+    bindtouchstart: TouchHandler;
+    bindtouchend: TouchHandler;
+    bindtouchcancel: TouchHandler;
+    "main-thread:bindtap"?: LynxTouchProps["main-thread:bindtap"];
+}
+/**
+ * Hook that provides press/tap interaction state for Lynx elements.
+ *
+ * - Tracks `pressed` state via touch events.
+ * - When `disabled` is true, the element cannot become active and no tap fires.
+ * - If the element becomes disabled during a press, the active state is cleared.
+ * - `main-thread:bindtap` is conditionally included (only when enabled and provided).
+ */
+export declare function usePressTap(options?: UsePressTapOptions): UsePressTapReturn;
+export {};
+//# sourceMappingURL=usePressTap.d.ts.map

package/lib/hooks/usePressTap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePressTap.d.ts","sourceRoot":"","sources":["../../src/hooks/usePressTap.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,KAAK,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AAEzD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,cAAc,EAAE,YAAY,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,YAAY,CAAC;IAC9B,qBAAqB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CAC/D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA0B/E"}

package/lib/hooks/usePressTap.js

@@ -0,0 +1,35 @@
+import { useState } from "@lynx-js/react";
+import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
+//#region src/hooks/usePressTap.ts
+/**
+* Hook that provides press/tap interaction state for Lynx elements.
+*
+* - Tracks `pressed` state via touch events.
+* - When `disabled` is true, the element cannot become active and no tap fires.
+* - If the element becomes disabled during a press, the active state is cleared.
+* - `main-thread:bindtap` is conditionally included (only when enabled and provided).
+*/
+function usePressTap(options = {}) {
+	const { disabled = false, onTap, mainThreadOnTap } = options;
+	const [pressed, setPressed] = useState(false);
+	const press = useMemoizedFn(() => {
+		if (disabled) return;
+		setPressed(true);
+	});
+	const reset = useMemoizedFn(() => {
+		setPressed(false);
+	});
+	return {
+		pressed,
+		bindtap: useMemoizedFn((...args) => {
+			if (disabled) return;
+			onTap?.(...args);
+		}),
+		bindtouchstart: press,
+		bindtouchend: reset,
+		bindtouchcancel: reset,
+		...!disabled && mainThreadOnTap ? { "main-thread:bindtap": mainThreadOnTap } : {}
+	};
+}
+//#endregion
+export { usePressTap };

package/lib/hooks/useSafeArea.d.ts

@@ -0,0 +1,19 @@
+declare module "@lynx-js/types" {
+    interface GlobalProps {
+        safeAreaInsetTop?: number;
+        safeAreaInsetBottom?: number;
+    }
+}
+export interface UseSafeAreaReturn {
+    safeAreaInsetTop: string;
+    safeAreaInsetBottom: string;
+}
+/**
+ * Lynx 앱에서 top/bottom safe area inset 값을 반환합니다.
+ *
+ * `lynx.__globalProps.safeAreaInsetTop`과 `safeAreaInsetBottom`을 우선 사용하고,
+ * host가 값을 제공하지 않으면 Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로
+ * 반환합니다.
+ */
+export declare function useSafeArea(): UseSafeAreaReturn;
+//# sourceMappingURL=useSafeArea.d.ts.map

package/lib/hooks/useSafeArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSafeArea.d.ts","sourceRoot":"","sources":["../../src/hooks/useSafeArea.ts"],"names":[],"mappings":"AAIA,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAU,WAAW;QACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B;CACF;AAuBD,MAAM,WAAW,iBAAiB;IAChC,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,iBAAiB,CAW/C"}

package/lib/hooks/useSafeArea.js

@@ -0,0 +1,33 @@
+import { useMemo } from "@lynx-js/react";
+//#region src/hooks/useSafeArea.ts
+var safeAreaProp = {
+	top: "safeAreaInsetTop",
+	bottom: "safeAreaInsetBottom"
+};
+function getSafeAreaEnvInset(edge) {
+	return `env(safe-area-inset-${edge})`;
+}
+function normalizeSafeAreaValue(value) {
+	if (typeof value !== "number" || value <= 0 || !Number.isFinite(value)) return;
+	return `${value}px`;
+}
+function resolveSafeAreaInset(edge, value) {
+	return normalizeSafeAreaValue(value) ?? getSafeAreaEnvInset(edge);
+}
+/**
+* Lynx 앱에서 top/bottom safe area inset 값을 반환합니다.
+*
+* `lynx.__globalProps.safeAreaInsetTop`과 `safeAreaInsetBottom`을 우선 사용하고,
+* host가 값을 제공하지 않으면 Lynx CSS `env(safe-area-inset-*)` 값을 fallback으로
+* 반환합니다.
+*/
+function useSafeArea() {
+	const safeAreaInsetTop = lynx.__globalProps?.[safeAreaProp.top];
+	const safeAreaInsetBottom = lynx.__globalProps?.[safeAreaProp.bottom];
+	return useMemo(() => ({
+		safeAreaInsetTop: resolveSafeAreaInset("top", safeAreaInsetTop),
+		safeAreaInsetBottom: resolveSafeAreaInset("bottom", safeAreaInsetBottom)
+	}), [safeAreaInsetTop, safeAreaInsetBottom]);
+}
+//#endregion
+export { useSafeArea };

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './hooks';
+export type * from './types';
+export * from './utils';
+//# 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,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,mBAAmB,SAAS,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/lib/index.js

@@ -0,0 +1,26 @@
+import { usePressTap } from "./hooks/usePressTap.js";
+import { createSlotRecipeContext } from "./utils/create-slot-recipe-context.jsx";
+import { capitalize, resolveRecipeToken } from "./utils/resolve-recipe-token.js";
+import { useSafeArea } from "./hooks/useSafeArea.js";
+import { ProgressCircleRange, ProgressCircleRoot } from "./components/ProgressCircle/ProgressCircle.jsx";
+import { ProgressCircle_namespace_exports } from "./components/ProgressCircle/ProgressCircle.namespace.js";
+import { useIconColor } from "./hooks/useIconColor.js";
+import { Icon, PrefixIcon, SuffixIcon } from "./components/Icon/Icon.jsx";
+import { ActionButton } from "./components/ActionButton/ActionButton.jsx";
+import { Box } from "./components/Box/Box.jsx";
+import { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger } from "./components/BottomSheet/BottomSheet.jsx";
+import { BottomSheet_namespace_exports } from "./components/BottomSheet/BottomSheet.namespace.js";
+import { useControllableState } from "./hooks/useControllableState.js";
+import { splitMultipleVariantsProps } from "./utils/split-multiple-variants-props.js";
+import { CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from "./components/Checkbox/Checkbox.jsx";
+import { Checkbox_namespace_exports } from "./components/Checkbox/Checkbox.namespace.js";
+import { RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot } from "./components/RadioGroup/RadioGroup.jsx";
+import { RadioGroup_namespace_exports } from "./components/RadioGroup/RadioGroup.namespace.js";
+import { HStack, VStack } from "./components/Stack/Stack.jsx";
+import { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb } from "./components/Switch/Switch.jsx";
+import { Switch_namespace_exports } from "./components/Switch/Switch.namespace.js";
+import { TagGroupItem, TagGroupItemLabel, TagGroupRoot } from "./components/TagGroup/TagGroup.jsx";
+import { TagGroup_namespace_exports } from "./components/TagGroup/TagGroup.namespace.js";
+import { Text } from "./components/Text/Text.jsx";
+import { getSeedClassName } from "./utils/get-seed-class-name.js";
+export { ActionButton, BottomSheet_namespace_exports as BottomSheet, BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, Box, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, HStack, Icon, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, SuffixIcon, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea };

package/lib/types.d.ts

@@ -0,0 +1,33 @@
+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"];
+}
+//# 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"}

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

@@ -0,0 +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: (props: {
+        children: ReactNode;
+        value: Classnames;
+    }) => ReactElement;
+    PropsProvider: (props: {
+        children: ReactNode;
+        value: Props;
+    }) => ReactElement;
+    useClassNames: () => Classnames;
+    useProps: () => Props | null;
+    withRootProvider: <P>(Component: ElementType<any>, options?: {
+        defaultProps?: Partial<P>;
+    }) => ForwardRefExoticComponent<PropsWithoutRef<P>>;
+    withProvider: <T, P>(Component: ElementType<any>, slot: keyof Classnames, options?: {
+        defaultProps?: Partial<P>;
+    }) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+    withContext: <T, P>(Component: ElementType<any>, slot?: keyof Classnames, options?: {
+        defaultProps?: Partial<P>;
+    }) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
+};
+export {};
+//# sourceMappingURL=create-slot-recipe-context.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,94 @@
+import clsx from "clsx";
+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} />
+          </PropsProvider>
+        </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)} />
+          </PropsProvider>
+        </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

@@ -0,0 +1,22 @@
+export type ColorMode = "system" | "light-only" | "dark-only";
+export interface GetSeedClassNameOptions {
+    colorMode?: ColorMode;
+}
+/**
+ * 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>
+ * );
+ * ```
+ */
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,28 @@
+//#region src/utils/get-seed-class-name.ts
+/**
+* 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

@@ -0,0 +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';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC"}

package/lib/utils/resolve-recipe-token.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 declare function resolveRecipeToken(vars: unknown, path: readonly string[]): string | undefined;
+/**
+ * 첫 글자 대문자. recipe variant key 조립용
+ * (e.g. `variant` + `brandSolid` → `variantBrandSolid`).
+ */
+export declare function capitalize<T extends string>(value: T): Capitalize<T>;
+//# sourceMappingURL=resolve-recipe-token.d.ts.map

package/lib/utils/resolve-recipe-token.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-recipe-token.d.ts","sourceRoot":"","sources":["../../src/utils/resolve-recipe-token.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAO7F;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAEpE"}