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

package/lib/components/Switch/index.js

@@ -0,0 +1,2 @@
+export { SwitchRoot, SwitchControl, SwitchThumb, SwitchLabel, } from "./Switch";
+export * as Switch from "./Switch.namespace";

package/lib/components/TagGroup/TagGroup.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { type TagGroupVariantProps } from "@seed-design/lynx-css/recipes/tag-group";
+import { type TagGroupItemVariantProps } from "@seed-design/lynx-css/recipes/tag-group-item";
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - `truncate` prop: Lynx flex 모델에서는 item 단위 wrap만 가능해 웹 수준의
+ *   "한 줄 유지 + label ellipsis" 조합을 재현할 수 없음
+ * - `asChild` prop: Lynx Slot 미지원
+ * - `flexShrink` prop: CSS variable 동적 주입 제한
+ * - 아이콘 slot: Lynx 3.7 SVG 지원 후 검토 (Tier B)
+ */
+export interface TagGroupRootProps extends TagGroupVariantProps, TagGroupItemVariantProps {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * children 사이에 삽입되는 구분자. 기본값 `" · "`.
+     */
+    separator?: React.ReactNode;
+}
+export declare const TagGroupRoot: React.ForwardRefExoticComponent<TagGroupRootProps & React.RefAttributes<unknown>>;
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - `asChild` prop: Lynx Slot 미지원
+ * - `flexShrink` prop: CSS variable 동적 주입 제한
+ */
+export interface TagGroupItemProps extends TagGroupItemVariantProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const TagGroupItem: React.ForwardRefExoticComponent<TagGroupItemProps & React.RefAttributes<unknown>>;
+export interface TagGroupItemLabelProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const TagGroupItemLabel: React.ForwardRefExoticComponent<TagGroupItemLabelProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=TagGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,8CAA8C,CAAC;AAQtD;;;;;;;;;GASG;AACH,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,EAAE,wBAAwB;IACvF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,mFAsCvB,CAAC;AAGH;;;;;;GAMG;AACH,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,mFAiBvB,CAAC;AAGH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,wFAY5B,CAAC"}

package/lib/components/TagGroup/TagGroup.jsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import clsx from "clsx";
+import { tagGroup } from "@seed-design/lynx-css/recipes/tag-group";
+import { tagGroupItem, } from "@seed-design/lynx-css/recipes/tag-group-item";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
+const { PropsProvider, useProps, ClassNamesProvider, useClassNames } = createSlotRecipeContext(tagGroupItem);
+export const TagGroupRoot = React.forwardRef((props, ref) => {
+    const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] = splitMultipleVariantsProps(props, { tagGroup, tagGroupItem });
+    const { children, className, separator = " · ", ...nativeProps } = otherProps;
+    const classes = tagGroup(tagGroupVariantProps);
+    const visibleChildren = React.Children.toArray(children);
+    return (<PropsProvider value={tagGroupItemVariantProps}>
+      <view {...(ref ? { ref: ref } : {})} className={clsx(classes.root, className)} {...nativeProps}>
+        {visibleChildren.map((child, index) => {
+            if (index === 0)
+                return child;
+            // Lynx <text> separator는 개별 flex item이라 wrap이 발동하면 separator가
+            // 이전 row 끝에 남는다. separator와 뒤따르는 item을 하나의 flex-row wrapper로
+            // 묶어 같은 wrap 단위로 함께 이동시킨다.
+            return (<view key={child.key ?? index} style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    flexShrink: 0,
+                }}>
+              <text className={classes.separator}>{separator}</text>
+              {child}
+            </view>);
+        })}
+      </view>
+    </PropsProvider>);
+});
+TagGroupRoot.displayName = "TagGroupRoot";
+export const TagGroupItem = React.forwardRef((props, ref) => {
+    const parentVariantProps = useProps();
+    const [localVariantProps, otherProps] = tagGroupItem.splitVariantProps(props);
+    const classes = tagGroupItem({ ...parentVariantProps, ...localVariantProps });
+    const { children, className, ...nativeProps } = otherProps;
+    return (<ClassNamesProvider value={classes}>
+      <view {...(ref ? { ref: ref } : {})} className={clsx(classes.root, className)} {...nativeProps}>
+        {children}
+      </view>
+    </ClassNamesProvider>);
+});
+TagGroupItem.displayName = "TagGroupItem";
+export const TagGroupItemLabel = React.forwardRef((props, ref) => {
+    const classes = useClassNames();
+    const { children, className, ...nativeProps } = props;
+    return (<text {...(ref ? { ref: ref } : {})} className={clsx(classes.label, className)} {...nativeProps}>
+      {children}
+    </text>);
+});
+TagGroupItemLabel.displayName = "TagGroupItemLabel";

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

@@ -0,0 +1,2 @@
+export { TagGroupItem as Item, TagGroupItemLabel as ItemLabel, TagGroupRoot as Root, type TagGroupItemLabelProps as ItemLabelProps, type TagGroupItemProps as ItemProps, type TagGroupRootProps as RootProps, } from "./TagGroup";
+//# sourceMappingURL=TagGroup.namespace.d.ts.map

package/lib/components/TagGroup/TagGroup.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagGroup.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,IAAI,IAAI,EACpB,iBAAiB,IAAI,SAAS,EAC9B,YAAY,IAAI,IAAI,EACpB,KAAK,sBAAsB,IAAI,cAAc,EAC7C,KAAK,iBAAiB,IAAI,SAAS,EACnC,KAAK,iBAAiB,IAAI,SAAS,GACpC,MAAM,YAAY,CAAC"}

package/lib/components/TagGroup/TagGroup.namespace.js

@@ -0,0 +1 @@
+export { TagGroupItem as Item, TagGroupItemLabel as ItemLabel, TagGroupRoot as Root, } from "./TagGroup";

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

@@ -0,0 +1,3 @@
+export { TagGroupRoot, TagGroupItem, TagGroupItemLabel, type TagGroupRootProps, type TagGroupItemProps, type TagGroupItemLabelProps, } from "./TagGroup";
+export * as TagGroup from "./TagGroup.namespace";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,GAC5B,MAAM,YAAY,CAAC;AAEpB,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAC"}

package/lib/components/TagGroup/index.js

@@ -0,0 +1,2 @@
+export { TagGroupRoot, TagGroupItem, TagGroupItemLabel, } from "./TagGroup";
+export * as TagGroup from "./TagGroup.namespace";

package/lib/components/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./ActionButton";
+export * from "./BottomSheet";
+export * from "./Checkbox";
+export * from "./ProgressCircle";
+export * from "./RadioGroup";
+export * from "./Switch";
+export * from "./TagGroup";
+//# 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,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}

package/lib/components/index.js

@@ -0,0 +1,7 @@
+export * from "./ActionButton";
+export * from "./BottomSheet";
+export * from "./Checkbox";
+export * from "./ProgressCircle";
+export * from "./RadioGroup";
+export * from "./Switch";
+export * from "./TagGroup";

package/lib/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./use-controllable-state";
+export * from "./use-icon-color";
+export * from "./use-press-tap";
+//# 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,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC"}

package/lib/hooks/index.js

@@ -0,0 +1,3 @@
+export * from "./use-controllable-state";
+export * from "./use-icon-color";
+export * from "./use-press-tap";

package/lib/hooks/use-controllable-state.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=use-controllable-state.d.ts.map

package/lib/hooks/use-controllable-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable-state.d.ts","sourceRoot":"","sources":["../../src/hooks/use-controllable-state.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/use-controllable-state.js

@@ -0,0 +1,27 @@
+import { useRef, useState } from "@lynx-js/react";
+import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
+/**
+ * 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 function useControllableState(props) {
+    const { value, defaultValue, onChange } = props;
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const prevValueRef = useRef(currentValue);
+    const setValue = useMemoizedFn((nextValue) => {
+        if (!isControlled) {
+            setUncontrolledValue(nextValue);
+        }
+        if (nextValue !== prevValueRef.current) {
+            onChange?.(nextValue);
+            prevValueRef.current = nextValue;
+        }
+    });
+    return [currentValue, setValue];
+}

package/lib/hooks/use-icon-color.d.ts

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

package/lib/hooks/use-icon-color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-icon-color.d.ts","sourceRoot":"","sources":["../../src/hooks/use-icon-color.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BvD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,cAAc,GAAG;IAClD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;CACpC,CASA"}

package/lib/hooks/use-icon-color.js

@@ -0,0 +1,37 @@
+import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
+// Lynx `<image>` 의 `tint-color` attribute 는 concrete color(hex/rgb) 만 받는다. CSS
+// `color: var(--seed-color-...)` 를 slot 에 걸면 `getComputedStyleProperty("color")` 가
+// resolved hex 를 돌려주므로 main-thread 에서 한번 읽어 `tint-color` 로 mirror 한다.
+function syncTintColor(ref) {
+    "main thread";
+    const el = ref.current;
+    if (!el)
+        return;
+    let color;
+    if (typeof el.getComputedStyleProperty === "function") {
+        color = el.getComputedStyleProperty("color");
+    }
+    else if (typeof el.getComputedCssProperty === "function") {
+        color = el.getComputedCssProperty("color");
+    }
+    if (color) {
+        el.setAttribute("tint-color", color);
+    }
+}
+/**
+ * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
+ * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
+ *
+ * ```tsx
+ * const { ref } = useIconColor([variant, disabled, loading]);
+ * return cloneElement(iconChild, { ref });
+ * ```
+ */
+export function useIconColor(deps) {
+    const ref = useMainThreadRef(null);
+    // deps 는 caller 가 책임.
+    useEffect(() => {
+        runOnMainThread(syncTintColor)(ref);
+    }, deps);
+    return { ref };
+}

package/lib/hooks/use-press-tap.d.ts

@@ -0,0 +1,24 @@
+import type { TouchEvent } from "@lynx-js/types";
+export interface UsePressTapOptions {
+    disabled?: boolean;
+    onTap?: () => void;
+    mainThreadOnTap?: () => void;
+}
+export interface UsePressTapReturn {
+    pressed: boolean;
+    bindtap: (e: TouchEvent) => void;
+    bindtouchstart: (e: TouchEvent) => void;
+    bindtouchend: (e: TouchEvent) => void;
+    bindtouchcancel: (e: TouchEvent) => void;
+    "main-thread:bindtap"?: () => void;
+}
+/**
+ * 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;
+//# sourceMappingURL=use-press-tap.d.ts.map

package/lib/hooks/use-press-tap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-press-tap.d.ts","sourceRoot":"","sources":["../../src/hooks/use-press-tap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA0B/E"}

package/lib/hooks/use-press-tap.js

@@ -0,0 +1,35 @@
+import { useState } from "@lynx-js/react";
+import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
+/**
+ * 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 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);
+    });
+    const handleTap = useMemoizedFn(() => {
+        if (disabled)
+            return;
+        onTap?.();
+    });
+    return {
+        pressed,
+        bindtap: handleTap,
+        bindtouchstart: press,
+        bindtouchend: reset,
+        bindtouchcancel: reset,
+        ...(!disabled && mainThreadOnTap ? { "main-thread:bindtap": mainThreadOnTap } : {}),
+    };
+}

package/lib/index.d.ts

@@ -1,5 +1,4 @@
-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";
+export * from "./components";
+export * from "./hooks";
+export * from "./utils";
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/lib/index.js

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

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

@@ -0,0 +1,26 @@
+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;
+        value: Classnames;
+    }) => import("react").JSX.Element;
+    PropsProvider: ({ children, value }: {
+        children: React.ReactNode;
+        value: Props;
+    }) => import("react").JSX.Element;
+    useClassNames: () => Classnames;
+    useProps: () => Props | null;
+    withRootProvider: <P>(Component: React.ElementType<any>, options?: {
+        defaultProps?: Partial<P>;
+    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P>>;
+    withProvider: <T, P>(Component: React.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?: {
+        defaultProps?: Partial<P>;
+    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.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":"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"}

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

@@ -0,0 +1,76 @@
+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}>
+          <PropsProvider value={variantProps}>
+            <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}>
+          <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) => {
+        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,
+    };
+}

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":"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/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/index.js

@@ -0,0 +1,4 @@
+export * from "./create-slot-recipe-context";
+export * from "./get-seed-class-name";
+export * from "./resolve-recipe-token";
+export * from "./split-multiple-variants-props";

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"}

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

@@ -0,0 +1,47 @@
+/**
+ * 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;
+}
+/**
+ * 첫 글자 대문자. recipe variant key 조립용
+ * (e.g. `variant` + `brandSolid` → `variantBrandSolid`).
+ */
+export function capitalize(value) {
+    return (value.charAt(0).toUpperCase() + value.slice(1));
+}

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"}