feat(ui,sdk,shared): add UI test coverage and dual ESM+CJS builds

packages/sdk/package.json

@@ -26,8 +26,14 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
     }
   },
   "publishConfig": {
@@ -39,7 +45,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig.esm.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run"
   },

packages/sdk/tsconfig.esm.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "outDir": "dist/esm",
+    "rootDir": "src",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.test.tsx"]
+}

packages/sdk/tsconfig.json

@@ -1,7 +1,9 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "dist",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "outDir": "dist/cjs",
     "rootDir": "src"
   },
   "include": ["src/**/*"],

packages/shared/package.json

@@ -25,8 +25,14 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
     }
   },
   "publishConfig": {
@@ -38,7 +44,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig.esm.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run"
   },

packages/shared/tsconfig.esm.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "outDir": "dist/esm",
+    "rootDir": "src",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.test.tsx"]
+}

packages/shared/tsconfig.json

@@ -1,7 +1,9 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "dist",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "outDir": "dist/cjs",
     "rootDir": "src"
   },
   "include": ["src/**/*"],

packages/ui/package.json

@@ -28,12 +28,24 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
     },
     "./tailwind-preset": {
-      "types": "./dist/tailwind.preset.d.ts",
-      "default": "./dist/tailwind.preset.js"
+      "import": {
+        "types": "./dist/esm/tailwind.preset.d.ts",
+        "default": "./dist/esm/tailwind.preset.js"
+      },
+      "require": {
+        "types": "./dist/cjs/tailwind.preset.d.ts",
+        "default": "./dist/cjs/tailwind.preset.js"
+      }
     },
     "./tokens/design-tokens.css": "./src/tokens/design-tokens.css",
     "./tokens/design-tokens.json": "./src/tokens/design-tokens.json"
@@ -48,7 +60,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig.esm.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run"
   },

packages/ui/src/ui.test.tsx

@@ -4,6 +4,7 @@ import { createRef } from "react";
 import { cleanup, render } from "@testing-library/react";
 import { Badge } from "./components/Badge";
 import { Button } from "./components/Button";
+import { Card, CardBody, CardTitle } from "./components/Card";
 import { Input } from "./components/Input";
 import { cn } from "./cn";
 
@@ -38,6 +39,31 @@ describe("Button", () => {
     const { getByRole } = render(<Button ref={ref}>Ref test</Button>);
     expect(ref.current).toBe(getByRole("button", { name: "Ref test" }));
   });
+
+  it("applies the secondary variant classes", () => {
+    const { getByRole } = render(<Button variant="secondary">Save</Button>);
+    expect(getByRole("button").className).toContain("bg-ink-700");
+  });
+
+  it("applies the ghost variant classes", () => {
+    const { getByRole } = render(<Button variant="ghost">Cancel</Button>);
+    expect(getByRole("button").className).toContain("bg-transparent");
+  });
+
+  it("applies the sm size classes", () => {
+    const { getByRole } = render(<Button size="sm">Small</Button>);
+    expect(getByRole("button").className).toContain("h-8");
+  });
+
+  it("applies the md size classes by default", () => {
+    const { getByRole } = render(<Button>Medium</Button>);
+    expect(getByRole("button").className).toContain("h-10");
+  });
+
+  it("applies the lg size classes", () => {
+    const { getByRole } = render(<Button size="lg">Large</Button>);
+    expect(getByRole("button").className).toContain("h-12");
+  });
 });
 
 describe("Input", () => {
@@ -46,11 +72,93 @@ describe("Input", () => {
     const { getByRole } = render(<Input ref={ref} aria-label="test input" />);
     expect(ref.current).toBe(getByRole("textbox", { name: "test input" }));
   });
+
+  it("defaults type to 'text'", () => {
+    const { getByRole } = render(<Input aria-label="name" />);
+    expect(getByRole("textbox").getAttribute("type")).toBe("text");
+  });
+
+  it("forwards the placeholder attribute", () => {
+    const { getByPlaceholderText } = render(<Input placeholder="Enter value" />);
+    expect(getByPlaceholderText("Enter value")).toBeTruthy();
+  });
+
+  it("forwards the disabled attribute", () => {
+    const { getByRole } = render(<Input aria-label="disabled field" disabled />);
+    expect((getByRole("textbox") as HTMLInputElement).disabled).toBe(true);
+  });
+
+  it("merges a custom className", () => {
+    const { getByRole } = render(<Input aria-label="styled" className="custom-class" />);
+    expect(getByRole("textbox").className).toContain("custom-class");
+  });
+});
+
+describe("Card", () => {
+  it("renders its children", () => {
+    const { getByText } = render(<Card>Card content</Card>);
+    expect(getByText("Card content")).toBeTruthy();
+  });
+
+  it("merges a custom className", () => {
+    const { getByText } = render(<Card className="custom-card">Content</Card>);
+    expect(getByText("Content").className).toContain("custom-card");
+  });
+
+  it("forwards a ref to the underlying <div> element", () => {
+    const ref = createRef<HTMLDivElement>();
+    const { getByText } = render(<Card ref={ref}>Ref card</Card>);
+    expect(ref.current).toBe(getByText("Ref card"));
+  });
+});
+
+describe("CardTitle", () => {
+  it("renders its children", () => {
+    const { getByText } = render(<CardTitle>My Title</CardTitle>);
+    expect(getByText("My Title")).toBeTruthy();
+  });
+
+  it("merges a custom className", () => {
+    const { getByText } = render(<CardTitle className="custom-title">Title</CardTitle>);
+    expect(getByText("Title").className).toContain("custom-title");
+  });
+});
+
+describe("CardBody", () => {
+  it("renders its children", () => {
+    const { getByText } = render(<CardBody>Body text</CardBody>);
+    expect(getByText("Body text")).toBeTruthy();
+  });
+
+  it("merges a custom className", () => {
+    const { getByText } = render(<CardBody className="custom-body">Body</CardBody>);
+    expect(getByText("Body").className).toContain("custom-body");
+  });
 });
 
 describe("Badge", () => {
-  it("uses the requested semantic variant", () => {
+  it("uses the requested semantic variant — teal", () => {
     const { getByText } = render(<Badge variant="teal">Open</Badge>);
     expect(getByText("Open").className).toContain("bg-teal");
   });
+
+  it("applies the neutral variant by default", () => {
+    const { getByText } = render(<Badge>Default</Badge>);
+    expect(getByText("Default").className).toContain("bg-ink-700");
+  });
+
+  it("applies the lumen variant", () => {
+    const { getByText } = render(<Badge variant="lumen">Hot</Badge>);
+    expect(getByText("Hot").className).toContain("bg-lumen");
+  });
+
+  it("applies the coral variant", () => {
+    const { getByText } = render(<Badge variant="coral">Error</Badge>);
+    expect(getByText("Error").className).toContain("bg-coral");
+  });
+
+  it("applies the sky variant", () => {
+    const { getByText } = render(<Badge variant="sky">Info</Badge>);
+    expect(getByText("Info").className).toContain("bg-sky");
+  });
 });

packages/ui/tsconfig.esm.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "outDir": "dist/esm",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.test.tsx"]
+}

packages/ui/tsconfig.json

@@ -1,7 +1,9 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "dist",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "outDir": "dist/cjs",
     "rootDir": "src",
     "jsx": "react-jsx"
   },