@webmcpui/react 0.3.0

package/README.md

@@ -0,0 +1,90 @@
+# @webmcpui/react
+
+Idiomatic, typed **React** components for [webmcpui](https://webmcpui.com) —
+WebMCP-native, accessible, shadcn/Tailwind-aligned.
+
+Each component wraps the corresponding [`@webmcpui/core`](https://www.npmjs.com/package/@webmcpui/core)
+custom element via [`@lit/react`](https://www.npmjs.com/package/@lit/react), so
+the WebMCP tool exposure, form association, and accessibility live **once** (in
+core) and you get typed props, `ref` forwarding, and `on*` event handlers.
+
+## Install
+
+```bash
+pnpm add @webmcpui/react @webmcpui/core react react-dom
+# optional theme (shadcn-aligned):
+pnpm add @webmcpui/tokens
+```
+
+## Usage
+
+```tsx
+import { Button, Input, Dialog, Tabs } from '@webmcpui/react';
+import '@webmcpui/tokens/css'; // omit for an unstyled baseline (see below)
+
+function Example() {
+  const [email, setEmail] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button variant="primary" onClick={() => setOpen(true)}>Book</Button>
+
+      {/* form control — expose it and an agent can fill it */}
+      <Input label="Email" type="email" value={email}
+             onInput={(e) => setEmail(e.currentTarget.value)} expose />
+
+      {/* the agent opens it; the human confirms */}
+      <Dialog open={open} label="Confirm" onClose={() => setOpen(false)} expose>
+        <Button variant="primary" onClick={() => setOpen(false)}>Confirm</Button>
+      </Dialog>
+    </>
+  );
+}
+```
+
+Every component takes `expose` (+ optional `toolName` / `toolDescription`) to
+register its [WebMCP](https://webmcpui.com/docs/webmcp) tool — a click, a fill,
+an open — that an agent can call. With no agent present it's a no-op.
+
+## Components
+
+`Button` · `Input` · `Dialog` · `Tabs` — more land each release as the core kit
+grows. Props mirror the [element attributes](https://webmcpui.com/docs) (camelCased):
+`variant`, `size`, `value`, `type`, `open`, `active`, `disabled`, `expose`, `toolName`, …
+
+Imperative handles come through the `ref` — e.g. `dialogRef.current.show()`.
+
+## Styling
+
+Themed through the [design tokens](https://www.npmjs.com/package/@webmcpui/tokens)
+(CSS custom properties, shadcn-aligned, light + dark). Two modes:
+
+- **Themed** — `import '@webmcpui/tokens/css'` once at your app root.
+- **Unstyled** — don't import the tokens CSS. The elements render with neutral
+  inline fallbacks; style them yourself via the CSS custom properties or the
+  `::part()` selectors each element exposes.
+
+## Server rendering (Next.js, Remix, …)
+
+These are **client-rendered custom elements** — importing them evaluates
+`class extends HTMLElement`, which has no meaning on the server. In an SSR/RSC
+framework, load them client-side:
+
+```tsx
+'use client';
+import dynamic from 'next/dynamic';
+const Button = dynamic(() => import('@webmcpui/react').then((m) => m.Button), {
+  ssr: false,
+});
+```
+
+(`'use client'` alone isn't enough — Next still renders client components on the
+server. Use `ssr: false`, or add a DOM shim such as
+[`@lit-labs/ssr-dom-shim`](https://www.npmjs.com/package/@lit-labs/ssr-dom-shim)
+if you want them in the server render.) The elements upgrade and hydrate on the
+client normally.
+
+## Docs
+
+Full docs, live demos, and `llms.txt` at **[webmcpui.com](https://webmcpui.com)**.

package/dist/index.d.ts

@@ -0,0 +1,85 @@
+import * as _lit_react from '@lit/react';
+import { WmcpButton, WmcpInput, WmcpDialog, WmcpTabs, WmcpSwitch, WmcpBadge, WmcpSeparator, WmcpTooltip, WmcpAlert, WmcpProgress, WmcpAvatar } from '@webmcpui/core';
+export { WmcpAlertVariant, WmcpBadgeVariant, WmcpButtonSize, WmcpButtonType, WmcpButtonVariant, WmcpInputType } from '@webmcpui/core';
+
+/**
+ * `<Button>` — an idiomatic, typed React wrapper over `<wmcp-button>`.
+ *
+ * All the behavior (form-associated submit/reset, WebMCP action exposure, a11y)
+ * lives in `@webmcpui/core`; this adds React ergonomics: typed props
+ * (`variant`, `size`, `type`, `disabled`, `expose`, `toolName`, …), `ref`
+ * forwarding to the element, and the composed `click` surfaced as `onClick`.
+ *
+ * ```tsx
+ * import { Button } from '@webmcpui/react';
+ * import '@webmcpui/tokens/css';
+ *
+ * <Button variant="primary" onClick={save}>Save</Button>
+ * <Button expose toolName="book_appointment">Book</Button>
+ * ```
+ */
+declare const Button: _lit_react.ReactWebComponent<WmcpButton, {
+    onClick: string;
+}>;
+
+/**
+ * `<Input>` — a typed React wrapper over `<wmcp-input>`. Form association,
+ * Standard Schema validation, and WebMCP `fill_*` exposure live in core; this
+ * surfaces the element's props (`value`, `type`, `label`, `required`, `schema`,
+ * `expose`, …) plus `onInput` / `onChange`. Control it with `value` + `onInput`.
+ */
+declare const Input: _lit_react.ReactWebComponent<WmcpInput, {
+    onInput: string;
+    onChange: string;
+}>;
+
+/**
+ * `<Dialog>` — a typed React wrapper over `<wmcp-dialog>`. The modal behavior
+ * (native `<dialog>`, focus trap, WebMCP `open_*` exposure) lives in core.
+ * Drive it with the `open` prop or a `ref` (`ref.current.show()` / `.close()`);
+ * `onOpen` / `onClose` fire on state changes.
+ */
+declare const Dialog: _lit_react.ReactWebComponent<WmcpDialog, {
+    onOpen: string;
+    onClose: string;
+}>;
+
+/**
+ * `<Tabs>` — a typed React wrapper over `<wmcp-tabs>`. Holds the persistent
+ * `active` tab and exposes the WebMCP `switch_*` tool (in core). Pass the
+ * panels as children (`<section tab="…" tab-label="…">`); read/track the active
+ * tab via the `active` prop and `onChange`.
+ */
+declare const Tabs: _lit_react.ReactWebComponent<WmcpTabs, {
+    onChange: string;
+}>;
+
+/** `<Switch>` — a typed React wrapper over `<wmcp-switch>` (boolean form
+ *  control, WebMCP `fill_*` exposure in core). Control with `checked` + `onChange`. */
+declare const Switch: _lit_react.ReactWebComponent<WmcpSwitch, {
+    onInput: string;
+    onChange: string;
+}>;
+
+/** `<Badge>` — a presentational status pill (`variant` + children). No WebMCP tool. */
+declare const Badge: _lit_react.ReactWebComponent<WmcpBadge, {}>;
+
+/** `<Separator>` — a presentational divider (`orientation`). No WebMCP tool. */
+declare const Separator: _lit_react.ReactWebComponent<WmcpSeparator, {}>;
+
+/** `<Tooltip>` — a typed React wrapper over `<wmcp-Tooltip>`. */
+declare const Tooltip: _lit_react.ReactWebComponent<WmcpTooltip, {
+    onOpen: string;
+    onClose: string;
+}>;
+
+/** `<Alert>` — a typed React wrapper over `<wmcp-Alert>`. */
+declare const Alert: _lit_react.ReactWebComponent<WmcpAlert, {}>;
+
+/** `<Progress>` — a typed React wrapper over `<wmcp-Progress>`. */
+declare const Progress: _lit_react.ReactWebComponent<WmcpProgress, {}>;
+
+/** `<Avatar>` — a typed React wrapper over `<wmcp-Avatar>`. */
+declare const Avatar: _lit_react.ReactWebComponent<WmcpAvatar, {}>;
+
+export { Alert, Avatar, Badge, Button, Dialog, Input, Progress, Separator, Switch, Tabs, Tooltip };

package/dist/index.js

@@ -0,0 +1,153 @@
+// src/button.tsx
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import { WmcpButton } from "@webmcpui/core";
+
+// src/define.ts
+function defineOnce(tagName, elementClass) {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, elementClass);
+  }
+}
+
+// src/button.tsx
+defineOnce(WmcpButton.tagName, WmcpButton);
+var Button = createComponent({
+  tagName: WmcpButton.tagName,
+  elementClass: WmcpButton,
+  react: React,
+  events: {
+    onClick: "click"
+  }
+});
+Button.displayName = "Button";
+
+// src/input.tsx
+import * as React2 from "react";
+import { createComponent as createComponent2 } from "@lit/react";
+import { WmcpInput } from "@webmcpui/core";
+defineOnce(WmcpInput.tagName, WmcpInput);
+var Input = createComponent2({
+  tagName: WmcpInput.tagName,
+  elementClass: WmcpInput,
+  react: React2,
+  events: {
+    onInput: "input",
+    onChange: "change"
+  }
+});
+Input.displayName = "Input";
+
+// src/dialog.tsx
+import * as React3 from "react";
+import { createComponent as createComponent3 } from "@lit/react";
+import { WmcpDialog } from "@webmcpui/core";
+defineOnce(WmcpDialog.tagName, WmcpDialog);
+var Dialog = createComponent3({
+  tagName: WmcpDialog.tagName,
+  elementClass: WmcpDialog,
+  react: React3,
+  events: {
+    onOpen: "open",
+    onClose: "close"
+  }
+});
+Dialog.displayName = "Dialog";
+
+// src/tabs.tsx
+import * as React4 from "react";
+import { createComponent as createComponent4 } from "@lit/react";
+import { WmcpTabs } from "@webmcpui/core";
+defineOnce(WmcpTabs.tagName, WmcpTabs);
+var Tabs = createComponent4({
+  tagName: WmcpTabs.tagName,
+  elementClass: WmcpTabs,
+  react: React4,
+  events: {
+    onChange: "change"
+  }
+});
+Tabs.displayName = "Tabs";
+
+// src/switch.tsx
+import * as React5 from "react";
+import { createComponent as createComponent5 } from "@lit/react";
+import { WmcpSwitch } from "@webmcpui/core";
+defineOnce(WmcpSwitch.tagName, WmcpSwitch);
+var Switch = createComponent5({
+  tagName: WmcpSwitch.tagName,
+  elementClass: WmcpSwitch,
+  react: React5,
+  events: { onInput: "input", onChange: "change" }
+});
+Switch.displayName = "Switch";
+
+// src/badge.tsx
+import * as React6 from "react";
+import { createComponent as createComponent6 } from "@lit/react";
+import { WmcpBadge } from "@webmcpui/core";
+defineOnce(WmcpBadge.tagName, WmcpBadge);
+var Badge = createComponent6({
+  tagName: WmcpBadge.tagName,
+  elementClass: WmcpBadge,
+  react: React6
+});
+Badge.displayName = "Badge";
+
+// src/separator.tsx
+import * as React7 from "react";
+import { createComponent as createComponent7 } from "@lit/react";
+import { WmcpSeparator } from "@webmcpui/core";
+defineOnce(WmcpSeparator.tagName, WmcpSeparator);
+var Separator = createComponent7({
+  tagName: WmcpSeparator.tagName,
+  elementClass: WmcpSeparator,
+  react: React7
+});
+Separator.displayName = "Separator";
+
+// src/tooltip.tsx
+import * as React8 from "react";
+import { createComponent as createComponent8 } from "@lit/react";
+import { WmcpTooltip } from "@webmcpui/core";
+defineOnce(WmcpTooltip.tagName, WmcpTooltip);
+var Tooltip = createComponent8({ tagName: WmcpTooltip.tagName, elementClass: WmcpTooltip, react: React8, events: { onOpen: "open", onClose: "close" } });
+Tooltip.displayName = "Tooltip";
+
+// src/alert.tsx
+import * as React9 from "react";
+import { createComponent as createComponent9 } from "@lit/react";
+import { WmcpAlert } from "@webmcpui/core";
+defineOnce(WmcpAlert.tagName, WmcpAlert);
+var Alert = createComponent9({ tagName: WmcpAlert.tagName, elementClass: WmcpAlert, react: React9 });
+Alert.displayName = "Alert";
+
+// src/progress.tsx
+import * as React10 from "react";
+import { createComponent as createComponent10 } from "@lit/react";
+import { WmcpProgress } from "@webmcpui/core";
+defineOnce(WmcpProgress.tagName, WmcpProgress);
+var Progress = createComponent10({ tagName: WmcpProgress.tagName, elementClass: WmcpProgress, react: React10 });
+Progress.displayName = "Progress";
+
+// src/avatar.tsx
+import * as React11 from "react";
+import { createComponent as createComponent11 } from "@lit/react";
+import { WmcpAvatar } from "@webmcpui/core";
+defineOnce(WmcpAvatar.tagName, WmcpAvatar);
+var Avatar = createComponent11({ tagName: WmcpAvatar.tagName, elementClass: WmcpAvatar, react: React11 });
+Avatar.displayName = "Avatar";
+export {
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Dialog,
+  Input,
+  Progress,
+  Separator,
+  Switch,
+  Tabs,
+  Tooltip
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@webmcpui/react",
+  "version": "0.3.0",
+  "description": "Idiomatic, typed React components for webmcpui — WebMCP-native, accessible, shadcn/Tailwind-aligned. Wraps @webmcpui/core.",
+  "license": "MIT",
+  "author": "Gary Pfaff (Pfaff Digital)",
+  "homepage": "https://webmcpui.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webmcpui/webmcpui.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/webmcpui/webmcpui/issues"
+  },
+  "keywords": [
+    "webmcp",
+    "react",
+    "ai-agents",
+    "components",
+    "shadcn",
+    "web-components"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@lit/react": "^1.0.7"
+  },
+  "peerDependencies": {
+    "@webmcpui/core": ">=0.3.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@webmcpui/core": "workspace:*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}