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

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

@@ -0,0 +1,34 @@
+/**
+ * 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];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.1.1-alpha.0",
+  "version": "0.2.0-alpha.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -15,10 +15,6 @@
       "types": "./lib/index.d.ts",
       "import": "./lib/index.js"
     },
-    "./dynamic-style": {
-      "types": "./lib/utils/dynamic-style.d.ts",
-      "import": "./lib/utils/dynamic-style.js"
-    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -28,24 +24,31 @@
   "scripts": {
     "clean": "rm -rf lib",
     "build": "tsc",
-    "lint:publish": "bun publint"
+    "lint:publish": "bun publint",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
     "@seed-design/css": ">=1.1.17",
-    "@seed-design/lynx-css": ">=0.1.1-alpha.0",
+    "@seed-design/lynx-css": ">=0.1.1-alpha.0 <0.2.0 || >=0.2.0-alpha.0 <1.0.0",
     "@lynx-js/react": ">=0.100.0"
   },
   "devDependencies": {
     "@lynx-js/react": "^0.116.3",
     "@lynx-js/types": "^3.7.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@types/react": "^19.2.2",
-    "react": "^19.1.0"
+    "jsdom": "^29.0.2",
+    "react": "^19.1.0",
+    "vitest": "^3.2.4"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@seed-design/lynx-primitive": "0.1.1-alpha.0",
+    "@lynx-js/lynx-ui-sheet": "^3.130.1",
+    "@lynx-js/lynx-ui-common": "^3.130.0",
+    "@seed-design/lynx-primitive": "workspace:*",
     "clsx": "^2.1.1"
   }
 }

package/src/components/ActionButton/ActionButton.tsx

@@ -1,62 +1,321 @@
 import { actionButton } from "@seed-design/lynx-css/recipes/action-button";
 import type { ActionButtonVariantProps } from "@seed-design/lynx-css/recipes/action-button";
+import { actionButton as actionButtonVars } from "@seed-design/lynx-css/vars/component";
+import type { MainThread } from "@lynx-js/types";
 import clsx from "clsx";
 import * as React from "react";
+import { cloneElement, isValidElement, useMemo, type ReactElement } from "react";
+
+import { useIconColor } from "../../hooks/use-icon-color";
+import { usePressTap, type UsePressTapReturn } from "../../hooks/use-press-tap";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token";
+import {
+  ProgressCircleRange,
+  ProgressCircleRoot,
+  type ProgressCircleRootProps,
+} from "../ProgressCircle";
+
+// Root/TextSlot 은 `withProvider("view", ...)` / `withContext("text", ...)` 를 쓰지 않는다.
+// intrinsic string 인자는 `React.createElement("view", ...)` 로 컴파일되어 Lynx 컴파일러의
+// 리터럴 JSX 정적 분석을 우회하고 `BackgroundSnapshot not found: view` 런타임 에러를 유발한다.
+// (자세한 내용: `packages/lynx-react/AGENTS.md` 의 "Native tag literal JSX constraint" 섹션)
+const { ClassNamesProvider, useClassNames, PropsProvider, useProps } =
+  createSlotRecipeContext(actionButton);
+
+type IconSlotKey = "prefixIcon" | "suffixIcon" | "icon";
+type ActionButtonSize = NonNullable<ActionButtonVariantProps["size"]>;
+
+type IconElementProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  ref?: React.Ref<MainThread.Element>;
+};
+
+type ActionButtonContentProps = {
+  children?: React.ReactNode;
+  isIconOnly: boolean;
+  icon?: ReactElement<IconElementProps>;
+  prefixIcon?: ReactElement<IconElementProps>;
+  suffixIcon?: ReactElement<IconElementProps>;
+};
+
+type ActionButtonRootOwnProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  bindtouchstart?: UsePressTapReturn["bindtouchstart"];
+  bindtouchend?: UsePressTapReturn["bindtouchend"];
+  bindtouchcancel?: UsePressTapReturn["bindtouchcancel"];
+  bindtap?: UsePressTapReturn["bindtap"];
+  "main-thread:bindtap"?: UsePressTapReturn["main-thread:bindtap"];
+};
+
+const progressCircleSizeMap = {
+  xsmall: "14",
+  small: "14",
+  medium: "16",
+  large: "18",
+} as const satisfies Record<ActionButtonSize, NonNullable<ProgressCircleRootProps["size"]>>;
+
+const ActionButtonRoot = React.forwardRef<
+  unknown,
+  ActionButtonVariantProps & ActionButtonRootOwnProps
+>((innerProps, ref) => {
+  const props = { layout: "withText" as const, ...innerProps };
+  const [variantProps, otherProps] = actionButton.splitVariantProps(props);
+  const classNames = actionButton(variantProps);
+  const {
+    className: userClassName,
+    children,
+    ...rest
+  } = otherProps as ActionButtonRootOwnProps & Record<string, unknown>;
+  const propsForContext = useMemo(
+    () => variantProps,
+    [
+      variantProps.variant,
+      variantProps.size,
+      variantProps.layout,
+      variantProps.pressed,
+      variantProps.disabled,
+      variantProps.loading,
+    ],
+  );
+  return (
+    <ClassNamesProvider value={classNames}>
+      <PropsProvider value={propsForContext}>
+        <view
+          {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+          {...rest}
+          className={clsx(classNames.root, userClassName)}
+        >
+          {children as React.ReactNode}
+        </view>
+      </PropsProvider>
+    </ClassNamesProvider>
+  );
+});
+ActionButtonRoot.displayName = "ActionButtonRoot";
+
+const ActionButtonTextSlot = React.forwardRef<
+  unknown,
+  { children?: React.ReactNode; className?: string }
+>((props, ref) => {
+  const { children, className: userClassName, ...rest } = props;
+  const classNames = useClassNames();
+  return (
+    <text
+      {...(ref ? { ref: ref as React.Ref<SVGTextElement> } : {})}
+      {...rest}
+      className={clsx(classNames.text, userClassName)}
+    >
+      {children}
+    </text>
+  );
+});
+ActionButtonTextSlot.displayName = "ActionButtonTextSlot";
+
+/**
+ * rootage vars 에서 현재 variant/size/layout 조합의 slot `size` 토큰
+ * (예: `"var(--seed-dimension-x4)"`) 을 꺼낸다. 아이콘 컴포넌트가 inline
+ * `style={{ width, height }}` 를 박기 때문에 style prop 으로 덮어 씌워야 recipe 사이즈가 적용된다.
+ */
+function resolveIconSize(
+  variantProps: ActionButtonVariantProps | null,
+  slot: IconSlotKey,
+): string | undefined {
+  const size = variantProps?.size ?? "medium";
+  // `icon` slot is only rendered under `layout="iconOnly"` and keyed at
+  // `sizeXxxLayoutIconOnly.enabled.icon.size`. prefixIcon/suffixIcon follow
+  // the current `layout` (`withText` by default) path.
+  const layout = slot === "icon" ? "iconOnly" : (variantProps?.layout ?? "withText");
+  return resolveRecipeToken(actionButtonVars, [
+    `size${capitalize(size)}Layout${capitalize(layout)}`,
+    "enabled",
+    slot,
+    "size",
+  ]);
+}
+
+/**
+ * `prefixIcon` / `suffixIcon` prop 으로 전달된 아이콘 element 에 slot className +
+ * size(style) + main-thread tint-color ref 를 주입한다.
+ */
+function ActionButtonIconSlot({
+  icon,
+  slot,
+}: {
+  icon: ReactElement<IconElementProps>;
+  slot: IconSlotKey;
+}) {
+  const classNames = useClassNames();
+  const variantProps = useProps() as ActionButtonVariantProps | null;
+  const { ref } = useIconColor([
+    variantProps?.variant ?? null,
+    variantProps?.disabled ?? false,
+    variantProps?.loading ?? false,
+  ]);
+  const sizeVar = resolveIconSize(variantProps, slot);
+  const childProps = icon.props;
+  return cloneElement(icon, {
+    className: clsx(classNames[slot], childProps.className),
+    style:
+      sizeVar != null ? { width: sizeVar, height: sizeVar, ...childProps.style } : childProps.style,
+    ref: ref as React.Ref<MainThread.Element>,
+  });
+}
+
+function ActionButtonContent({
+  children,
+  isIconOnly,
+  icon,
+  prefixIcon,
+  suffixIcon,
+}: ActionButtonContentProps) {
+  if (isIconOnly) {
+    return icon != null && isValidElement(icon) ? (
+      <ActionButtonIconSlot icon={icon} slot="icon" />
+    ) : null;
+  }
+
+  return (
+    <>
+      {prefixIcon != null && isValidElement(prefixIcon) ? (
+        <ActionButtonIconSlot icon={prefixIcon} slot="prefixIcon" />
+      ) : null}
+      <ActionButtonTextSlot>{children}</ActionButtonTextSlot>
+      {suffixIcon != null && isValidElement(suffixIcon) ? (
+        <ActionButtonIconSlot icon={suffixIcon} slot="suffixIcon" />
+      ) : null}
+    </>
+  );
+}
+
+function ActionButtonLoadingContent(props: ActionButtonContentProps) {
+  const classNames = useClassNames();
+
+  return (
+    <view className={classNames.content}>
+      <ActionButtonContent {...props} />
+    </view>
+  );
+}
+
+function ActionButtonLoadingIndicator({ size }: { size: ActionButtonSize }) {
+  const classNames = useClassNames();
+
+  return (
+    <view className={classNames.loadingIndicator}>
+      <ProgressCircleRoot size={progressCircleSizeMap[size]} tone="inherit">
+        <ProgressCircleRange />
+      </ProgressCircleRoot>
+    </view>
+  );
+}
 
 /**
  * @platform Lynx
  *
- * 미지원 기능 (Lynx 3.7 SVG 지원 후 추가 예정):
- * - loading: SVG 기반 spinner 필요
- * - layout: "iconOnly": SVG 아이콘 렌더링 필요
- * - PrefixIcon / SuffixIcon: SVG 아이콘 렌더링 필요
+ * 웹 대비 차이:
+ * - 아이콘 전달 방식: 웹의 `<ActionButton.PrefixIcon svg={...} />` 가 아니라 `prefixIcon` /
+ *   `suffixIcon` / `icon` prop 으로 ReactElement 를 직접 넘긴다. Lynx `<text>` 가 flex
+ *   컨테이너가 아니라 children 전체를 text 로 감싸면 아이콘이 flex item 이 안 되기 때문.
+ * - 미지원 prop: `color`, `fontWeight`, `bleedX`, `bleedY` (CSS variable 동적 주입 제한)
+ *
+ * ```tsx
+ * import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";
+ * import IconChevronDownFill from "@karrotmarket/lynx-monochrome-icon/IconChevronDownFill";
+ *
+ * // withText (기본)
+ * <ActionButton
+ *   variant="brandSolid"
+ *   prefixIcon={<IconPlusFill />}
+ *   suffixIcon={<IconChevronDownFill />}
+ * >
+ *   라벨
+ * </ActionButton>
  *
- * 웹 대비 미지원 기능:
- * - color / fontWeight props: CSS variable 동적 주입 제한
- * - bleedX / bleedY props: CSS variable 동적 주입 제한
+ * // iconOnly — `icon` prop 과 `aria-label` 필수
+ * <ActionButton
+ *   layout="iconOnly"
+ *   variant="neutralSolid"
+ *   icon={<IconPlusFill />}
+ *   aria-label="추가"
+ * />
+ * ```
  */
-export interface ActionButtonProps extends Omit<ActionButtonVariantProps, "loading" | "layout"> {
+export interface ActionButtonProps extends Omit<ActionButtonVariantProps, "layout" | "pressed"> {
   children?: React.ReactNode;
-  disabled?: boolean;
   className?: string;
   flexGrow?: number;
+  layout?: "withText" | "iconOnly";
+  icon?: ReactElement<IconElementProps>;
+  prefixIcon?: ReactElement<IconElementProps>;
+  suffixIcon?: ReactElement<IconElementProps>;
+  "aria-label"?: string;
   bindtap?: () => void;
   "main-thread:bindtap"?: () => void;
 }
 
 export const ActionButton = React.forwardRef<unknown, ActionButtonProps>((props, ref) => {
-  const [variantProps, restProps] = actionButton.splitVariantProps(props);
   const {
     children,
-    className,
     flexGrow,
+    layout,
+    icon,
+    prefixIcon,
+    suffixIcon,
     bindtap,
     "main-thread:bindtap": mainThreadBindtap,
-    ...nativeProps
-  } = restProps;
-
-  const { disabled = false } = variantProps;
-  const classes = actionButton({
-    ...variantProps,
-    layout: "withText",
-    disabled: disabled ? true : undefined,
+    ...variantAndRest
+  } = props;
+  const { disabled = false, loading = false } = variantAndRest;
+  const isInteractive = !disabled && !loading;
+  const isIconOnly = layout === "iconOnly";
+  const size = variantAndRest.size ?? "medium";
+
+  if (process.env.NODE_ENV !== "production" && isIconOnly && !props["aria-label"]) {
+    console.warn('ActionButton: `layout="iconOnly"` requires `aria-label` for accessibility.');
+  }
+
+  const { pressed, ...pressTapHandlers } = usePressTap({
+    disabled: !isInteractive,
+    onTap: bindtap,
+    mainThreadOnTap: mainThreadBindtap,
   });
-  const isInteractive = !disabled;
 
   return (
-    <view
-      {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
-      className={clsx(classes.root, className)}
+    <ActionButtonRoot
+      {...variantAndRest}
+      layout={layout}
+      pressed={pressed}
+      ref={ref}
       style={flexGrow != null ? { flexGrow } : undefined}
-      {...(isInteractive && bindtap && { bindtap })}
-      {...(isInteractive &&
-        mainThreadBindtap && {
-          "main-thread:bindtap": mainThreadBindtap,
-        })}
-      {...nativeProps}
+      {...pressTapHandlers}
     >
-      <text className={classes.text}>{children}</text>
-    </view>
+      {loading ? (
+        <>
+          <ActionButtonLoadingIndicator size={size} />
+          <ActionButtonLoadingContent
+            isIconOnly={isIconOnly}
+            icon={icon}
+            prefixIcon={prefixIcon}
+            suffixIcon={suffixIcon}
+          >
+            {children}
+          </ActionButtonLoadingContent>
+        </>
+      ) : (
+        <ActionButtonContent
+          isIconOnly={isIconOnly}
+          icon={icon}
+          prefixIcon={prefixIcon}
+          suffixIcon={suffixIcon}
+        >
+          {children}
+        </ActionButtonContent>
+      )}
+    </ActionButtonRoot>
   );
 });
 ActionButton.displayName = "ActionButton";

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

@@ -0,0 +1,35 @@
+import "@testing-library/jest-dom";
+import { getQueriesForElement, render } from "@lynx-js/react/testing-library";
+import { describe, expect, it } from "vitest";
+
+import { ActionButton } from "../ActionButton";
+
+function getRenderedQueries() {
+  return getQueriesForElement(getRenderedRoot());
+}
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+describe("ActionButton", () => {
+  it("keeps the original label in the text slot while loading", () => {
+    render(<ActionButton loading>Submit</ActionButton>);
+
+    const { getByText } = getRenderedQueries();
+    const label = getByText("Submit");
+    const root = getRenderedRoot();
+
+    expect(label).toHaveClass("seed-action-button__text");
+    expect(label).toHaveClass("seed-action-button__text--size_medium-layout_withText");
+    expect(root.querySelector(".seed-action-button__content")).toBeInTheDocument();
+    expect(root.querySelector(".seed-action-button__loadingIndicator")).toBeInTheDocument();
+    expect(root.querySelector(".seed-progress-circle__root")).toBeInTheDocument();
+  });
+});

package/src/components/BottomSheet/BottomSheet.namespace.ts

@@ -0,0 +1,24 @@
+export {
+  BottomSheetBackdrop as Backdrop,
+  BottomSheetBody as Body,
+  BottomSheetContent as Content,
+  BottomSheetDescription as Description,
+  BottomSheetFooter as Footer,
+  BottomSheetHandle as Handle,
+  BottomSheetHeader as Header,
+  BottomSheetPositioner as Positioner,
+  BottomSheetRoot as Root,
+  BottomSheetTitle as Title,
+  BottomSheetTrigger as Trigger,
+  type BottomSheetBackdropProps as BackdropProps,
+  type BottomSheetBodyProps as BodyProps,
+  type BottomSheetContentProps as ContentProps,
+  type BottomSheetDescriptionProps as DescriptionProps,
+  type BottomSheetFooterProps as FooterProps,
+  type BottomSheetHandleProps as HandleProps,
+  type BottomSheetHeaderProps as HeaderProps,
+  type BottomSheetPositionerProps as PositionerProps,
+  type BottomSheetRootProps as RootProps,
+  type BottomSheetTitleProps as TitleProps,
+  type BottomSheetTriggerProps as TriggerProps,
+} from "./BottomSheet";