@seed-design/react 2.4.2 → 2.5.1

package/lib/components/Skeleton/Skeleton.cjs

@@ -1,11 +1,31 @@
 "use client";
 require("../../_virtual/_rolldown/runtime.cjs");
+const require_responsive = require("../../types/responsive.cjs");
 const require_styled = require("../../utils/styled.cjs");
 const require_createRecipeContext = require("../../utils/createRecipeContext.cjs");
+let _seed_design_css_vars = require("@seed-design/css/vars");
 let _seed_design_react_primitive = require("@seed-design/react-primitive");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 let _seed_design_css_recipes_skeleton = require("@seed-design/css/recipes/skeleton");
 //#region src/components/Skeleton/Skeleton.tsx
 var { withContext } = require_createRecipeContext.createRecipeContext(_seed_design_css_recipes_skeleton.skeleton);
-var Skeleton = withContext(require_styled.withStyleProps(_seed_design_react_primitive.Primitive.div));
+function handleHeight(height) {
+	if (!height?.startsWith("lineHeight.")) return height;
+	const value = _seed_design_css_vars.vars.$lineHeight[height.slice(11)];
+	return typeof value === "string" ? value : height;
+}
+var Skeleton = withContext((0, react.forwardRef)(function Skeleton({ height, ...props }, ref) {
+	const { style, restProps } = require_styled.useStyleProps({
+		...props,
+		height: require_responsive.isResponsiveObject(height) ? Object.fromEntries(Object.entries(height).map(([key, value]) => [key, handleHeight(value)])) : handleHeight(height)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_seed_design_react_primitive.Primitive.div, {
+		ref,
+		style,
+		...restProps
+	});
+}));
+Skeleton.displayName = "Skeleton";
 //#endregion
 exports.Skeleton = Skeleton;

package/lib/components/Skeleton/Skeleton.d.ts

@@ -1,8 +1,11 @@
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import { SkeletonVariantProps } from '@seed-design/css/recipes/skeleton';
+import { LineHeight } from '@seed-design/css/vars';
+import { ResponsiveValue, UnwrapResponsive } from '../../types/responsive';
 import { StyleProps } from '../../utils/styled';
 import type * as React from "react";
-export interface SkeletonProps extends SkeletonVariantProps, PrimitiveProps, Pick<StyleProps, "height" | "width">, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+export interface SkeletonProps extends SkeletonVariantProps, PrimitiveProps, Pick<StyleProps, "width">, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+    height?: ResponsiveValue<UnwrapResponsive<StyleProps["height"]> | `lineHeight.${LineHeight}`>;
 }
 export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,aACf,SAAQ,oBAAoB,EAC1B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;CAAG;AAE1D,eAAO,MAAM,QAAQ,sFAA4E,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,gBAAgB,EACtB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIpE,MAAM,WAAW,aACf,SAAQ,oBAAoB,EAC1B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,EACzB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACrD,MAAM,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,GAAG,cAAc,UAAU,EAAE,CAAC,CAAC;CAC/F;AAUD,eAAO,MAAM,QAAQ,sFAapB,CAAC"}

package/lib/components/Skeleton/Skeleton.js

@@ -1,10 +1,30 @@
 "use client";
-import { withStyleProps } from "../../utils/styled.js";
+import { isResponsiveObject } from "../../types/responsive.js";
+import { useStyleProps } from "../../utils/styled.js";
 import { createRecipeContext } from "../../utils/createRecipeContext.js";
+import { vars } from "@seed-design/css/vars";
 import { Primitive } from "@seed-design/react-primitive";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { skeleton } from "@seed-design/css/recipes/skeleton";
 //#region src/components/Skeleton/Skeleton.tsx
 var { withContext } = createRecipeContext(skeleton);
-var Skeleton = withContext(withStyleProps(Primitive.div));
+function handleHeight(height) {
+	if (!height?.startsWith("lineHeight.")) return height;
+	const value = vars.$lineHeight[height.slice(11)];
+	return typeof value === "string" ? value : height;
+}
+var Skeleton = withContext(forwardRef(function Skeleton({ height, ...props }, ref) {
+	const { style, restProps } = useStyleProps({
+		...props,
+		height: isResponsiveObject(height) ? Object.fromEntries(Object.entries(height).map(([key, value]) => [key, handleHeight(value)])) : handleHeight(height)
+	});
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		ref,
+		style,
+		...restProps
+	});
+}));
+Skeleton.displayName = "Skeleton";
 //#endregion
 export { Skeleton };

package/lib/components/Skeleton/Skeleton.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Skeleton.test.d.ts.map

package/lib/components/Skeleton/Skeleton.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.test.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.test.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "2.4.2",
+  "version": "2.5.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -50,15 +50,15 @@
     "@seed-design/react-collapsible": "^1.0.1",
     "@seed-design/react-dialog": "^2.0.3",
     "@seed-design/react-date-picker": "^1.2.0",
-    "@seed-design/react-drawer": "^2.0.6",
+    "@seed-design/react-drawer": "^2.0.7",
     "@seed-design/react-field": "^2.0.1",
     "@seed-design/react-field-button": "^2.0.1",
     "@seed-design/react-fieldset": "^1.0.1",
     "@seed-design/react-file-upload": "^1.0.1",
     "@seed-design/react-image": "^1.1.0",
-    "@seed-design/react-menu": "^2.0.2",
+    "@seed-design/react-menu": "^2.0.3",
     "@seed-design/react-middle-truncate": "^1.0.1",
-    "@seed-design/react-navigation-menu": "^2.0.1",
+    "@seed-design/react-navigation-menu": "^2.0.2",
     "@seed-design/react-popover": "^2.0.1",
     "@seed-design/react-portal": "^2.0.1",
     "@seed-design/react-primitive": "^2.0.1",
@@ -68,7 +68,7 @@
     "@seed-design/react-radio-group": "^2.0.1",
     "@seed-design/react-scale-feedback": "^1.0.0",
     "@seed-design/react-segmented-control": "^2.0.2",
-    "@seed-design/react-select": "^1.0.1",
+    "@seed-design/react-select": "^1.0.2",
     "@seed-design/react-side-navigation": "^1.0.1",
     "@seed-design/react-slider": "^2.0.1",
     "@seed-design/react-snackbar": "^2.0.1",

package/src/components/AGENTS.md

@@ -1,21 +1,17 @@
 # packages/react/src/components
 
-## 디렉토리 개요
+`@seed-design/react` 컴포넌트 구현 디렉터리다. 컴포넌트마다 `PascalCase` 폴더에 `{ComponentName}.tsx`와 `index.ts`를 둔다.
 
-`packages/react`의 실제 컴포넌트 구현이 모여 있는 핵심 디렉토리다. 상위 `packages/react/AGENTS.md`의 공통 규칙 위에서, 컴포넌트별 public surface와 내부 구현 경계를 더 구체적으로 다룬다.
+## 규칙
 
-## 파일 작성 컨벤션
+### Public surface
 
-- 컴포넌트별 디렉토리는 `PascalCase`를 사용한다. 단일 컴포넌트는 `{ComponentName}.tsx`와 `index.ts`를 기본으로 둔다.
-- compound component에서 public namespace 단축 이름이 필요할 때만 `{ComponentName}.namespace.ts`를 추가한다.
-- 실제 구현은 `{ComponentName}.tsx` 또는 역할별 구현 파일에 두고, 공개 re-export는 `index.ts`와 필요한 namespace 파일에서 관리한다.
+- 구현은 `{ComponentName}.tsx`나 역할별 구현 파일에 두고, 공개 re-export는 `index.ts`와 namespace 파일에서만 한다. `{ComponentName}.namespace.ts`는 compound 컴포넌트에 namespace 단축 이름이 필요할 때만 추가한다.
+- export는 사용자에게 의미가 분명한 slot만 노출한다. animation·layout helper slot은 namespace에서도 숨기고, direct composition이나 styling escape hatch 같은 사용자 시나리오가 있을 때만 공개한다.
+- compound 컴포넌트를 설계·변경함 → React API만 닫지 말고 `docs/registry/react/ui/` snippet이 어떤 convenience layer를 줄지 함께 정한다.
 
-## 코드 작성 컨벤션
+### Headless 재사용
 
-- public export는 사용자에게 의미가 분명한 slot만 기본 노출한다.
-- namespace export도 같은 기준을 따른다. 짧은 이름이 필요하더라도 animation/layout helper slot은 기본적으로 숨긴다.
-- helper slot을 공개하려면 direct composition이나 styling escape hatch 같은 명확한 사용자 시나리오가 있어야 한다.
-- compound component를 설계할 때는 React API만 닫지 말고 `docs/registry/react/ui` snippet surface가 어떤 convenience layer를 제공할지도 함께 생각한다.
-- headless context가 제공하는 `stateProps`/slot props는 styled layer에서 다시 계산하지 않는다. `createWithStateProps([useHeadlessContext])`처럼 기존 context를 직접 재사용하고, 동일한 `data-*` props를 위한 중복 helper export는 만들지 않는다.
-- headless primitive wrapper의 props는 hook props를 재사용한다. `ComponentItemProps extends UseComponentItemProps`처럼 한 source를 확장하고, 같은 prop을 컴포넌트 props에 다시 선언하지 않는다.
-- headless hook prop이 discriminated union이면 styled wrapper도 union contract를 보존한다. mode별로 hook props를 재조합해야 할 때는 branch를 나누어 특정 mode에서 무효한 prop이 섞이지 않게 한다.
+- headless context의 `stateProps`·slot props → styled layer에서 다시 계산하지 않는다. `createWithStateProps([useHeadlessContext])`(`../../utils/createWithStateProps`)로 기존 context를 재사용하고, 같은 `data-*` props용 helper를 따로 export하지 않는다. 예: `NavigationMenu/NavigationMenu.tsx`.
+- headless primitive wrapper의 props → `ComponentItemProps extends UseComponentItemProps`처럼 훅 props를 확장한다. 같은 prop을 다시 선언하지 않는다.
+- headless 훅 prop이 discriminated union → styled wrapper도 union contract를 유지한다. mode별로 훅 props를 다시 조합해야 하면 branch를 나눠 특정 mode에서 무효한 prop이 섞이지 않게 한다.

package/src/components/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,68 @@
+import { vars } from "@seed-design/css/vars";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "bun:test";
+import { createRef } from "react";
+import { Skeleton } from "./Skeleton";
+
+describe("Skeleton", () => {
+  it.each(["t4", "t4Static"] as const)("resolves lineHeight.%s", (token) => {
+    const { getByTestId } = render(
+      <Skeleton data-testid="skeleton" height={`lineHeight.${token}`} />,
+    );
+
+    expect(getByTestId("skeleton").style.getPropertyValue("--seed-box-height-base")).toBe(
+      vars.$lineHeight[token],
+    );
+  });
+
+  it("supports line-height and dimension tokens in responsive heights", () => {
+    const { getByTestId } = render(
+      <Skeleton
+        data-testid="skeleton"
+        height={{ base: "lineHeight.t4", sm: undefined, md: "lineHeight.t5", lg: "x8" }}
+      />,
+    );
+    const { style } = getByTestId("skeleton");
+
+    expect(style.getPropertyValue("--seed-box-height-base")).toBe(vars.$lineHeight.t4);
+    expect(style.getPropertyValue("--seed-box-height-sm")).toBe("");
+    expect(style.getPropertyValue("--seed-box-height-md")).toBe(vars.$lineHeight.t5);
+    expect(style.getPropertyValue("--seed-box-height-lg")).toBe(vars.$dimension.x8);
+  });
+
+  it.each([
+    [undefined, ""],
+    ["x4", vars.$dimension.x4],
+    ["24px", "24px"],
+    ["var(--custom-height)", "var(--custom-height)"],
+    ["lineHeight.invalid", "lineHeight.invalid"],
+    ["lineHeight.constructor", "lineHeight.constructor"],
+  ])("preserves existing height %s", (height, expected) => {
+    const { getByTestId } = render(<Skeleton data-testid="skeleton" height={height} />);
+
+    expect(getByTestId("skeleton").style.getPropertyValue("--seed-box-height-base")).toBe(expected);
+  });
+
+  it("preserves styles, className and ref with asChild", () => {
+    const ref = createRef<HTMLDivElement>();
+    const { getByTestId } = render(
+      <Skeleton
+        ref={ref}
+        asChild
+        height="lineHeight.t4"
+        width="x8"
+        className="custom"
+        style={{ height: "32px" }}
+      >
+        <div data-testid="skeleton" />
+      </Skeleton>,
+    );
+    const element = getByTestId("skeleton");
+
+    expect<HTMLElement | null>(ref.current).toBe(element);
+    expect(element).toHaveClass("custom");
+    expect(element.style.height).toBe("32px");
+    expect(element.style.getPropertyValue("--seed-box-width-base")).toBe(vars.$dimension.x8);
+    expect(element).not.toHaveAttribute("height");
+  });
+});

package/src/components/Skeleton/Skeleton.tsx

@@ -1,15 +1,47 @@
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { skeleton, type SkeletonVariantProps } from "@seed-design/css/recipes/skeleton";
+import { vars, type LineHeight } from "@seed-design/css/vars";
 import type * as React from "react";
+import { forwardRef } from "react";
+import {
+  isResponsiveObject,
+  type ResponsiveValue,
+  type UnwrapResponsive,
+} from "../../types/responsive";
 import { createRecipeContext } from "../../utils/createRecipeContext";
-import { withStyleProps, type StyleProps } from "../../utils/styled";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
 
 const { withContext } = createRecipeContext(skeleton);
 
 export interface SkeletonProps
   extends SkeletonVariantProps,
     PrimitiveProps,
-    Pick<StyleProps, "height" | "width">,
-    Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {}
+    Pick<StyleProps, "width">,
+    Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+  height?: ResponsiveValue<UnwrapResponsive<StyleProps["height"]> | `lineHeight.${LineHeight}`>;
+}
 
-export const Skeleton = withContext<HTMLDivElement, SkeletonProps>(withStyleProps(Primitive.div));
+function handleHeight(height: string | undefined) {
+  if (!height?.startsWith("lineHeight.")) return height;
+
+  const value = vars.$lineHeight[height.slice("lineHeight.".length) as LineHeight];
+
+  return typeof value === "string" ? value : height;
+}
+
+export const Skeleton = withContext<HTMLDivElement, SkeletonProps>(
+  forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton({ height, ...props }, ref) {
+    const { style, restProps } = useStyleProps({
+      ...props,
+      height: isResponsiveObject(height)
+        ? Object.fromEntries(
+            Object.entries(height).map(([key, value]) => [key, handleHeight(value)]),
+          )
+        : handleHeight(height),
+    });
+
+    return <Primitive.div ref={ref} style={style} {...restProps} />;
+  }),
+);
+
+Skeleton.displayName = "Skeleton";