@seed-design/react 2.4.1 → 2.5.0

package/lib/components/SidePanel/SidePanel.d.ts

@@ -29,7 +29,19 @@ export declare const SidePanelTitle: React.ForwardRefExoticComponent<SidePanelTi
 export interface SidePanelDescriptionProps extends Drawer.DescriptionProps {
 }
 export declare const SidePanelDescription: React.ForwardRefExoticComponent<SidePanelDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
-export interface SidePanelBodyProps extends PrimitiveProps, Pick<StyleProps, "paddingX" | "height" | "maxHeight" | "minHeight" | "justifyContent" | "alignItems">, React.HTMLAttributes<HTMLDivElement> {
+export interface SidePanelBodyProps extends PrimitiveProps, Pick<StyleProps, "paddingX" | "justifyContent" | "alignItems">, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로 이 prop은 효과가 없습니다. 콘텐츠의 높이를 지정하려면 본문 안에 `Box`를 두고 `height`를 지정하세요.
+     */
+    height?: StyleProps["height"];
+    /**
+     * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로, 남은 높이보다 큰 값을 주면 푸터가 패널 밖으로 밀려납니다. 콘텐츠의 최소 높이를 지정하려면 본문 안에 `Box`를 두고 `minHeight`를 지정하세요.
+     */
+    minHeight?: StyleProps["minHeight"];
+    /**
+     * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로, 남은 높이보다 작은 값을 주면 푸터가 패널 중간에 뜹니다. 콘텐츠의 최대 높이를 지정하려면 본문 안에 `Box`를 두고 `maxHeight`를 지정하세요.
+     */
+    maxHeight?: StyleProps["maxHeight"];
 }
 export declare const SidePanelBody: React.ForwardRefExoticComponent<SidePanelBodyProps & React.RefAttributes<HTMLDivElement>>;
 export interface SidePanelFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {

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

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../src/components/SidePanel/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5F,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAI9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAiC,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAQpF,MAAM,WAAW,kBACf,SAAQ,qBAAqB,EAC3B,IAAI,CACF,MAAM,CAAC,SAAS,EACd,UAAU,GACV,MAAM,GACN,aAAa,GACb,cAAc,GACd,OAAO,GACP,aAAa,GACb,eAAe,GACf,wBAAwB,GACxB,WAAW,GACX,eAAe,GACf,gBAAgB,CACnB;IACH,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAgBtD;AAID,MAAM,WAAW,qBAAsB,SAAQ,MAAM,CAAC,YAAY;CAAG;AAErE,eAAO,MAAM,gBAAgB,+FAAiB,CAAC;AAI/C,MAAM,WAAW,wBAAyB,SAAQ,MAAM,CAAC,eAAe;CAAG;AAE3E,eAAO,MAAM,mBAAmB,iGAG/B,CAAC;AAIF,MAAM,WAAW,sBAAuB,SAAQ,MAAM,CAAC,aAAa;CAAG;AAEvE,eAAO,MAAM,iBAAiB,+FAG7B,CAAC;AAIF,MAAM,WAAW,qBACf,SAAQ,MAAM,CAAC,YAAY,EACzB,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,CAAC;CAAG;AAE7C,eAAO,MAAM,gBAAgB,8FAG5B,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,MAAM,CAAC,WAAW;CAAG;AAEnE,eAAO,MAAM,eAAe,6FAc3B,CAAC;AAMF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,CAAC,UAAU;CAAG;AAEjE,eAAO,MAAM,cAAc,gGAG1B,CAAC;AAMF,MAAM,WAAW,yBAA0B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE7E,eAAO,MAAM,oBAAoB,wGAGhC,CAAC;AAMF,MAAM,WAAW,kBACf,SAAQ,cAAc,EACpB,IAAI,CACF,UAAU,EACV,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,GAAG,gBAAgB,GAAG,YAAY,CACpF,EACD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,aAAa,2FAqCzB,CAAC;AAMF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,eAAe,6FAG3B,CAAC;AAIF,MAAM,WAAW,yBAA0B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE7E,eAAO,MAAM,oBAAoB,qGAchC,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../src/components/SidePanel/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5F,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAI9E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAiC,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAQpF,MAAM,WAAW,kBACf,SAAQ,qBAAqB,EAC3B,IAAI,CACF,MAAM,CAAC,SAAS,EACd,UAAU,GACV,MAAM,GACN,aAAa,GACb,cAAc,GACd,OAAO,GACP,aAAa,GACb,eAAe,GACf,wBAAwB,GACxB,WAAW,GACX,eAAe,GACf,gBAAgB,CACnB;IACH,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAgBtD;AAID,MAAM,WAAW,qBAAsB,SAAQ,MAAM,CAAC,YAAY;CAAG;AAErE,eAAO,MAAM,gBAAgB,+FAAiB,CAAC;AAI/C,MAAM,WAAW,wBAAyB,SAAQ,MAAM,CAAC,eAAe;CAAG;AAE3E,eAAO,MAAM,mBAAmB,iGAG/B,CAAC;AAIF,MAAM,WAAW,sBAAuB,SAAQ,MAAM,CAAC,aAAa;CAAG;AAEvE,eAAO,MAAM,iBAAiB,+FAG7B,CAAC;AAIF,MAAM,WAAW,qBACf,SAAQ,MAAM,CAAC,YAAY,EACzB,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,CAAC;CAAG;AAE7C,eAAO,MAAM,gBAAgB,8FAG5B,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,MAAM,CAAC,WAAW;CAAG;AAEnE,eAAO,MAAM,eAAe,6FAc3B,CAAC;AAMF,MAAM,WAAW,mBAAoB,SAAQ,MAAM,CAAC,UAAU;CAAG;AAEjE,eAAO,MAAM,cAAc,gGAG1B,CAAC;AAMF,MAAM,WAAW,yBAA0B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE7E,eAAO,MAAM,oBAAoB,wGAGhC,CAAC;AAMF,MAAM,WAAW,kBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,gBAAgB,GAAG,YAAY,CAAC,EAC9D,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAE9B;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;CACrC;AAED,eAAO,MAAM,aAAa,2FAqCzB,CAAC;AAMF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,eAAe,6FAG3B,CAAC;AAIF,MAAM,WAAW,yBAA0B,SAAQ,MAAM,CAAC,gBAAgB;CAAG;AAE7E,eAAO,MAAM,oBAAoB,qGAchC,CAAC"}

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.1",
+  "version": "2.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -83,7 +83,7 @@
     "unicode-segmenter": "^0.17.3"
   },
   "peerDependencies": {
-    "@seed-design/css": "^2.6.0",
+    "@seed-design/css": "^2.8.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/src/components/AGENTS.md

@@ -6,9 +6,9 @@
 
 ## 파일 작성 컨벤션
 
-- 컴포넌트별 디렉토리는 `PascalCase`를 사용하고, 기본 파일은 `{ComponentName}.tsx`, `{ComponentName}.namespace.ts`, `index.ts` 조합을 따른다.
-- 실제 구현은 `{ComponentName}.tsx`에 두고, namespace 단축 이름은 `{ComponentName}.namespace.ts`, 공개 re-export는 `index.ts`에 둔다.
-- helper slot이 내부 구현에만 필요하면 별도 파일 분리보다 같은 구현 파일 안에 두고 export surface에서 숨기는 쪽을 우선 검토한다.
+- 컴포넌트별 디렉토리는 `PascalCase`를 사용한다. 단일 컴포넌트는 `{ComponentName}.tsx`와 `index.ts`를 기본으로 둔다.
+- compound component에서 public namespace 단축 이름이 필요할 때만 `{ComponentName}.namespace.ts`를 추가한다.
+- 실제 구현은 `{ComponentName}.tsx` 또는 역할별 구현 파일에 두고, 공개 re-export는 `index.ts`와 필요한 namespace 파일에서 관리한다.
 
 ## 코드 작성 컨벤션
 

package/src/components/SidePanel/SidePanel.tsx

@@ -137,11 +137,23 @@ SidePanelDescription.displayName = "SidePanelDescription";
 
 export interface SidePanelBodyProps
   extends PrimitiveProps,
-    Pick<
-      StyleProps,
-      "paddingX" | "height" | "maxHeight" | "minHeight" | "justifyContent" | "alignItems"
-    >,
-    React.HTMLAttributes<HTMLDivElement> {}
+    Pick<StyleProps, "paddingX" | "justifyContent" | "alignItems">,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로 이 prop은 효과가 없습니다. 콘텐츠의 높이를 지정하려면 본문 안에 `Box`를 두고 `height`를 지정하세요.
+   */
+  height?: StyleProps["height"];
+
+  /**
+   * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로, 남은 높이보다 큰 값을 주면 푸터가 패널 밖으로 밀려납니다. 콘텐츠의 최소 높이를 지정하려면 본문 안에 `Box`를 두고 `minHeight`를 지정하세요.
+   */
+  minHeight?: StyleProps["minHeight"];
+
+  /**
+   * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로, 남은 높이보다 작은 값을 주면 푸터가 패널 중간에 뜹니다. 콘텐츠의 최대 높이를 지정하려면 본문 안에 `Box`를 두고 `maxHeight`를 지정하세요.
+   */
+  maxHeight?: StyleProps["maxHeight"];
+}
 
 export const SidePanelBody = React.forwardRef<HTMLDivElement, SidePanelBodyProps>(
   (props, forwardedRef) => {

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(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";