@jalvin/ui 2.0.24 → 2.0.25

package/dist/__tests__/setup.d.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+//# sourceMappingURL=setup.d.ts.map

package/dist/__tests__/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/__tests__/setup.js

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+//# sourceMappingURL=setup.js.map

package/dist/__tests__/setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.js","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/__tests__/text.test.d.ts

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

package/dist/__tests__/text.test.d.ts.map

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

package/dist/__tests__/text.test.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Text } from "../text.js";
+import { TextStyle } from "../typography.js";
+describe("Text", () => {
+    it("renders a span by default", () => {
+        const { container } = render(React.createElement(Text, { text: "hello" }));
+        expect(container.querySelector("span")).not.toBeNull();
+    });
+    it("renders text from the text prop", () => {
+        render(React.createElement(Text, { text: "hello world" }));
+        expect(screen.getByText("hello world")).toBeTruthy();
+    });
+    it("renders text from children", () => {
+        render(React.createElement(Text, null, "from children"));
+        expect(screen.getByText("from children")).toBeTruthy();
+    });
+    it("text prop takes priority over children when both provided", () => {
+        render(React.createElement(Text, { text: "explicit" }, "child"));
+        expect(screen.getByText("explicit")).toBeTruthy();
+        expect(screen.queryByText("child")).toBeNull();
+    });
+    it("applies color prop as inline style", () => {
+        const { container } = render(React.createElement(Text, { text: "hi", color: "red" }));
+        const el = container.querySelector("span");
+        expect(el.style.color).toBe("red");
+    });
+    it("applies TextStyle.h1 typography via style prop", () => {
+        const { container } = render(React.createElement(Text, { text: "headline", style: TextStyle.h1 }));
+        const el = container.querySelector("span");
+        expect(el.style.fontSize).toBe("2rem");
+        expect(el.style.fontWeight).toBe("bold");
+    });
+    it("applies TextStyle.bodyLarge via style prop", () => {
+        const { container } = render(React.createElement(Text, { text: "body", style: TextStyle.bodyLarge }));
+        const el = container.querySelector("span");
+        expect(el.style.fontSize).toBe("1rem");
+    });
+    it("applies maxLines clamp styles", () => {
+        const { container } = render(React.createElement(Text, { text: "clamp me", maxLines: 2 }));
+        const el = container.querySelector("span");
+        expect(el.style.overflow).toBe("hidden");
+        expect(el.style.webkitLineClamp).toBe("2");
+    });
+    it("color prop overrides style color", () => {
+        const { container } = render(React.createElement(Text, {
+            text: "hi",
+            style: { fontSize: "1rem", fontWeight: 400, lineHeight: "1.5rem", color: "blue" },
+            color: "green",
+        }));
+        const el = container.querySelector("span");
+        expect(el.style.color).toBe("green");
+    });
+    it("does not render any tag other than span", () => {
+        const { container } = render(React.createElement(Text, { text: "x" }));
+        expect(container.querySelector("p")).toBeNull();
+        expect(container.querySelector("h1")).toBeNull();
+        expect(container.querySelector("pre")).toBeNull();
+    });
+});
+//# sourceMappingURL=text.test.js.map

package/dist/__tests__/text.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.test.js","sourceRoot":"","sources":["../../src/__tests__/text.test.tsx"],"names":[],"mappings":"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"}

package/dist/text.d.ts

@@ -7,12 +7,11 @@ export interface TextProps {
     /** Shorthand for text content when no JSX children needed */
     text?: string;
     modifier?: Modifier;
+    /** Typography style — use TextStyle tokens (e.g. TextStyle.headlineLarge) */
     style?: TextStyleDef | CSSProperties;
     color?: string;
     maxLines?: number;
-    /** HTML tag to render — defaults to "span" */
-    as?: "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "code" | "pre" | "strong" | "em";
 }
 /** Text element — analogous to Compose's Text. */
-export declare function Text({ children, text, modifier, style, color, maxLines, as: Tag, }: TextProps): React.ReactElement;
+export declare function Text({ children, text, modifier, style, color, maxLines, }: TextProps): React.ReactElement;
 //# sourceMappingURL=text.d.ts.map

package/dist/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../src/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAkB,MAAM,iBAAiB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,CAAC;CAC1G;AAED,kDAAkD;AAClD,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,GAAY,GACjB,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAoBhC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../src/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAkB,MAAM,iBAAiB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,kDAAkD;AAClD,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CAmBhC"}

package/dist/text.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { textStyleToCSS } from "./typography.js";
 /** Text element — analogous to Compose's Text. */
-export function Text({ children, text, modifier, style, color, maxLines, as: Tag = "span", }) {
+export function Text({ children, text, modifier, style, color, maxLines, }) {
     const modProps = modifier?.toProps() ?? {};
     const textStyle = style ? textStyleToCSS(style) : {};
     const clampStyle = maxLines !== undefined ? {
@@ -10,7 +10,7 @@ export function Text({ children, text, modifier, style, color, maxLines, as: Tag
         WebkitBoxOrient: "vertical",
         overflow: "hidden",
     } : {};
-    return React.createElement(Tag, {
+    return React.createElement("span", {
         ...modProps,
         style: {
             ...textStyle,

package/dist/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sourceRoot":"","sources":["../src/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAepE,kDAAkD;AAClD,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,GAAG,GAAG,MAAM,GACN;IACV,MAAM,QAAQ,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAC3C,MAAM,SAAS,GAAkB,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,KAAqB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpF,MAAM,UAAU,GAAkB,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC;QACzD,OAAO,EAAE,aAAa;QACtB,eAAe,EAAE,QAAQ;QACzB,eAAe,EAAE,UAAU;QAC3B,QAAQ,EAAE,QAAQ;KACnB,CAAC,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE;QAC9B,GAAG,QAAQ;QACX,KAAK,EAAE;YACL,GAAG,SAAS;YACZ,KAAK,EAAE,KAAK,IAAI,SAAS,CAAC,KAAK;YAC/B,GAAG,UAAU;YACb,GAAG,QAAQ,CAAC,KAAK;SAClB;KACF,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC;AACvB,CAAC"}
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../src/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAcpE,kDAAkD;AAClD,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,GACE;IACV,MAAM,QAAQ,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAC3C,MAAM,SAAS,GAAkB,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,KAAqB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACpF,MAAM,UAAU,GAAkB,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC;QACzD,OAAO,EAAE,aAAa;QACtB,eAAe,EAAE,QAAQ;QACzB,eAAe,EAAE,UAAU;QAC3B,QAAQ,EAAE,QAAQ;KACnB,CAAC,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;QACjC,GAAG,QAAQ;QACX,KAAK,EAAE;YACL,GAAG,SAAS;YACZ,KAAK,EAAE,KAAK,IAAI,SAAS,CAAC,KAAK;YAC/B,GAAG,UAAU;YACb,GAAG,QAAQ,CAAC,KAAK;SAClB;KACF,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC;AACvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jalvin/ui",
-  "version": "2.0.24",
+  "version": "2.0.25",
   "description": "Jalvin UI — Compose-style component library (Column, Row, Box, Button, Text, …)",
   "type": "module",
   "main": "dist/index.js",
@@ -21,14 +21,20 @@
     "react": ">=18.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
+    "jsdom": "^29.1.1",
     "react": "^19.2.5",
-    "typescript": "^5.4.0"
+    "typescript": "^5.4.0",
+    "vitest": "^2.1.9"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }