+
);
},
);
diff --git a/packages/ui/src/Container/Container.test.ts b/packages/ui/src/Container/Container.test.tsx
similarity index 64%
rename from packages/ui/src/Container/Container.test.ts
rename to packages/ui/src/Container/Container.test.tsx
index ddafebf..5606d99 100644
--- a/packages/ui/src/Container/Container.test.ts
+++ b/packages/ui/src/Container/Container.test.tsx
@@ -1,21 +1,18 @@
import { render, screen } from "@testing-library/react";
-import { createElement } from "react";
import { describe, expect, it } from "vitest";
import { Container } from "./Container";
describe("Container", () => {
describe("Rendering", () => {
it("renders a container element", () => {
- render(
- createElement(Container, { "data-testid": "container" }, "Content"),
- );
+ render(
+ {code}
+
+ {showCopy && (
+
+ )}
+
+ {children}
+
);
},
);
diff --git a/packages/ui/src/Header/Header.test.ts b/packages/ui/src/Header/Header.test.tsx
similarity index 69%
rename from packages/ui/src/Header/Header.test.ts
rename to packages/ui/src/Header/Header.test.tsx
index 8354d9b..516e675 100644
--- a/packages/ui/src/Header/Header.test.ts
+++ b/packages/ui/src/Header/Header.test.tsx
@@ -1,19 +1,18 @@
import { render, screen } from "@testing-library/react";
-import { createElement } from "react";
import { describe, expect, it } from "vitest";
import { Header } from "./Header";
describe("Header", () => {
describe("Rendering", () => {
it("renders a header element", () => {
- render(createElement(Header, { "data-testid": "header" }));
+ render(
+ TPMJS
+
+ }
+ actions={
+
+
+
+
+ }
+ />,
);
expect(screen.getByText("TPMJS")).toBeInTheDocument();
expect(screen.getByText("Docs")).toBeInTheDocument();
diff --git a/packages/ui/src/Header/Header.ts b/packages/ui/src/Header/Header.ts
deleted file mode 100644
index 795848d..0000000
--- a/packages/ui/src/Header/Header.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { cn } from "@tpmjs/utils/cn";
-import { createElement, forwardRef } from "react";
-import type { HeaderProps } from "./types";
-import {
- headerActionsVariants,
- headerTitleVariants,
- headerVariants,
-} from "./variants";
-
-/**
- * Header component
- *
- * A flexible header bar with title and action slots.
- * Supports sticky positioning and responsive sizing.
- * Built with .ts-only React using createElement.
- *
- * @example
- * ```typescript
- * import { Header } from '@tpmjs/ui/Header/Header';
- * import { Button } from '@tpmjs/ui/Button/Button';
- * import { createElement } from 'react';
- *
- * function MyComponent() {
- * return createElement(Header, {
- * title: 'TPMJS Registry',
- * actions: createElement(Button, { variant: 'ghost' }, 'Sign In'),
- * size: 'md',
- * sticky: true,
- * });
- * }
- * ```
- */
-export const Header = forwardRef
+ {title}
+
+ )}
+ {children && (
+
+ {children}
+
+ )}
+ {actions && (
+
+ {actions}
+
+ )}
+
+
+
+
,
);
const label = container.querySelector("label");
@@ -435,21 +293,13 @@ describe("Label", () => {
});
it("clicking label focuses associated input", () => {
- const { container } = render(
- createElement(
- "div",
- null,
- createElement(
- Label,
- { htmlFor: "focus-input", "data-testid": "label" },
- "Click me",
- ),
- createElement("input", {
- id: "focus-input",
- type: "text",
- "data-testid": "input",
- }),
- ),
+ render(
+
+
+
+
,
);
const label = screen.getByTestId("label");
diff --git a/packages/ui/src/Label/Label.ts b/packages/ui/src/Label/Label.tsx
similarity index 55%
rename from packages/ui/src/Label/Label.ts
rename to packages/ui/src/Label/Label.tsx
index e005439..b8e9420 100644
--- a/packages/ui/src/Label/Label.ts
+++ b/packages/ui/src/Label/Label.tsx
@@ -1,5 +1,5 @@
import { cn } from "@tpmjs/utils/cn";
-import { createElement, forwardRef } from "react";
+import { forwardRef } from "react";
import type { LabelProps } from "./types";
import { labelVariants } from "./variants";
@@ -7,18 +7,13 @@ import { labelVariants } from "./variants";
* Label component
*
* A label component for form inputs with proper accessibility.
- * Built with .ts-only React using createElement.
*
* @example
- * ```typescript
+ * ```tsx
* import { Label } from '@tpmjs/ui/Label/Label';
- * import { createElement } from 'react';
*
* function MyComponent() {
- * return createElement(Label, {
- * htmlFor: 'email',
- * children: 'Email Address',
- * });
+ * return ;
* }
* ```
*/
@@ -34,30 +29,26 @@ export const Label = forwardRef
+
+
+ );
+ }
+
+ return (
+
+
+ );
+ },
+);
+
+ProgressBar.displayName = "ProgressBar";
diff --git a/packages/ui/src/Tabs/Tabs.test.ts b/packages/ui/src/Tabs/Tabs.test.tsx
similarity index 70%
rename from packages/ui/src/Tabs/Tabs.test.ts
rename to packages/ui/src/Tabs/Tabs.test.tsx
index eb7950f..5012a64 100644
--- a/packages/ui/src/Tabs/Tabs.test.ts
+++ b/packages/ui/src/Tabs/Tabs.test.tsx
@@ -1,5 +1,4 @@
import { render, screen } from "@testing-library/react";
-import { createElement } from "react";
import { describe, expect, it, vi } from "vitest";
import { Tabs } from "./Tabs";
import type { Tab } from "./types";
@@ -15,12 +14,12 @@ describe("Tabs", () => {
it("renders tabs container", () => {
const handleChange = vi.fn();
render(
- createElement(Tabs, {
- tabs: mockTabs,
- activeTab: "all",
- onTabChange: handleChange,
- "data-testid": "tabs",
- }),
+
+
+
+
+ {Math.round(clampedValue)}%
+
+
+ {tabs.map((tab) => {
+ const isActive = tab.id === activeTab;
+
+ return (
+
+ );
+ })}
+
+ );
+ },
+);
+
+Tabs.displayName = "Tabs";
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
index c44c86e..7888df4 100644
--- a/packages/ui/tsup.config.ts
+++ b/packages/ui/tsup.config.ts
@@ -4,11 +4,12 @@ import { defineConfig } from "tsup";
/**
* Auto-discover all component entry points
- * Looks for src/ComponentName/ComponentName.ts files where the folder name matches the file name
+ * Looks for src/ComponentName/ComponentName.tsx files where the folder name matches the file name
*/
-const allFiles = glob.sync("src/**/[A-Z]*.ts", {
+const allFiles = glob.sync("src/**/[A-Z]*.{ts,tsx}", {
ignore: [
"**/*.test.ts",
+ "**/*.test.tsx",
"**/*.stories.ts",
"**/types.ts",
"**/tokens.ts",
@@ -21,11 +22,11 @@ const allFiles = glob.sync("src/**/[A-Z]*.ts", {
});
// Filter to only include files where the folder name matches the file name
-// e.g., src/Button/Button.ts is included, but src/Button/helpers.ts is not
+// e.g., src/Button/Button.tsx is included, but src/Button/helpers.ts is not
const entries = allFiles.filter((file) => {
const dir = path.dirname(file);
const folderName = path.basename(dir);
- const fileName = path.basename(file, ".ts");
+ const fileName = path.basename(file).replace(/\.(ts|tsx)$/, "");
return folderName === fileName;
});