@seed-design/react 2.4.2 → 2.5.0

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.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

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