@campo-design/react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Joshua Litchfield
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,146 @@
-# Temporary Holding Version
+# @campo-design/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Campo's components for React 19. In the browser, each one is Web Awesome's own
+React wrapper, unchanged; on the server it renders its element with its
+attributes (see *Server rendering*). Its types are generated from Campo's
+[component contracts](../webawesome/contracts). Your editor and compiler
+reject what Campo doesn't style:
+
+```tsx
+<WaButton variant="brand">Save</WaButton>                     // ✓ the main action
+<WaButton variant="neutral" appearance="outlined">Cancel</WaButton> // ✓
+<WaButton variant="danger" appearance="accent">Delete</WaButton>    // ✗ a gap: solid feedback fills
+<WaIcon name="circle-check" />                                // ✗ a Font Awesome name; Phosphor's is check-circle
+```
+
+Hovering a component shows the contract's description, each supported
+combination with when to use it, and each gap with what to use instead.
+
+## Why this package exists
+
+[Web Awesome](https://webawesome.com) already ships React wrappers
+(`@awesome.me/webawesome/dist/react/<name>`, made with
+[`@lit/react`](https://lit.dev/docs/frameworks/react/)), so this package
+doesn't wrap anything again. What upstream can't know is what Campo has
+decided:
+
+- **Which combinations Campo styles.** In the docs and site, `pnpm check`
+  fails on a gap. A product in React gets the same check from TypeScript.
+- **That icons are Phosphor.** A Font Awesome name draws nothing, with no
+  error. Here it doesn't compile.
+- **Which components Campo has checked.** Only components with a contract are
+  exported. A new one appears when its contract lands.
+- **The fixed setup**, as one call.
+
+## Setup
+
+```sh
+npm install @campo-design/react @campo-design/webawesome @campo-design/tokens @campo-design/css @awesome.me/webawesome react
+```
+
+1. Put the theme classes on `<html>` (in Next.js, in the root layout):
+
+   ```html
+   <html class="wa-theme-default campo-wa">
+   ```
+
+2. Import the CSS once, in this order, in your app's entry or global stylesheet:
+
+   ```js
+   import '@campo-design/tokens/css';
+   import '@campo-design/tokens/css/theme-dark.css';
+   import '@campo-design/css';
+   import '@campo-design/webawesome/theme.css';
+   ```
+
+3. Call `setupCampo()` once, before the first render. It registers Campo's
+   icons and keeps Web Awesome's color scheme in step with `data-theme`. It
+   does nothing on the server, and warns if step 1 is missing.
+
+   ```js
+   import { setupCampo } from '@campo-design/react';
+   setupCampo();
+   ```
+
+## Use
+
+Import each component from its own path. That loads only the components you
+use, as the rest of Campo does (there's no autoloader):
+
+```tsx
+import { WaButton } from '@campo-design/react/button';
+import { WaCallout } from '@campo-design/react/callout';
+import { WaIcon } from '@campo-design/react/icon';
+
+<WaCallout variant="success">
+  <WaIcon slot="icon" name="check-circle" />
+  Your changes were saved.
+</WaCallout>
+```
+
+Names match Web Awesome's: `<wa-radio-group>` is `WaRadioGroup` from
+`@campo-design/react/radio-group`. Attributes, slots and events are Web
+Awesome's, so its docs and `llms.txt` still apply. Events are camel-cased
+props (`wa-hide` is `onWaHide`), and `ref` is typed to the element.
+
+Everything in [*Building with Campo*](../../AGENTS.md#building-with-campo)
+still holds: semantic tokens for your own layout, no `--wa-*` overrides, and
+no dark-mode handling of your own.
+
+## Server rendering
+
+The components can be server-rendered (in Next.js, Remix or React Router,
+or with `renderToString` yourself). On the server, each one renders its
+element with every prop that has an HTML attribute written as that
+attribute: `<WaButton variant="brand" withCaret>` becomes
+`<wa-button variant="brand" with-caret="">`. Handlers, refs and object
+props wait for the browser. When the component's JavaScript loads, the
+element upgrades from those attributes, so it already has the right variant
+before React hydrates, and hydrating raises no warnings.
+
+Why it's needed: Web Awesome's wrappers set props as element properties,
+which exist only in the browser, so on the server they render a bare
+`<wa-button>`. In a server-rendered app, a brand button would draw as
+neutral until hydration.
+
+What it doesn't do: the shadow DOM still draws in the browser, once the
+component's JavaScript loads, as for any web component. Rendering it on the
+server too (declarative shadow DOM) needs Lit's experimental framework
+plugins, which Campo doesn't take on. `setupCampo()` does nothing on the
+server, so call it in code that runs in the browser too (in Next.js, a
+client component).
+
+## What's checked
+
+- `pnpm --filter @campo-design/react check` writes the modules, then compiles
+  every combination Web Awesome allows for each contracted component. A gap
+  must fail to compile, and a supported combination must compile. It fails
+  either way the types and the contract disagree.
+- `pnpm --filter @campo-design/react test` covers the generator, and what a
+  server render writes (`scripts/server-render.test.js`).
+- `pnpm test` renders the package through React 19 in Chromium
+  (`packages/browser-tests/tests/react.spec.js`). Every module must render an
+  upgraded `<wa-*>` element. A button's props must reach it with Campo's look
+  in both themes. `onClick`, Web Awesome events such as `onWaTabShow` and
+  `ref` must work. `setupCampo()` must follow `data-theme`, draw Phosphor
+  icons, run once and warn about missing classes. A small screen rendered
+  this way is scanned by axe in both themes. A screen rendered on the server
+  must keep Campo's look before React hydrates, then hydrate onto the same
+  DOM with no errors. The bundle reads this package's
+  `dist/`, so a new contract's module is tested without anyone adding it.
+- How each binding looks is the bridge's job, and the bridge tests cover it
+  element by element. The React test checks one binding, to prove the look
+  survives the trip through React.
+
+## Not covered yet
+
+- **React 18.** Not supported: the types and tests assume React 19. It's a
+  *Not yet* in [`CONTRIBUTING.md`](../../CONTRIBUTING.md#not-yet), with what
+  would reopen it.
+- **Declarative shadow DOM on the server.** See *Server rendering*.
+
+## Generated, not written
+
+`dist/` is generated by `pnpm build` from the contracts
+(`scripts/build.js`, using `lib/generate.js`). Don't edit it: change the
+contract, and the types follow.

package/dist/badge.d.ts

@@ -0,0 +1,36 @@
+// Generated by @campo-design/react's scripts/build.js from badge.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/badge/index.js';
+
+/**
+ * The variant × appearance combinations Campo styles (badge.contract.json).
+ *
+ * Not styled by Campo, so they don't type-check:
+ * - variant=brand appearance=filled|filled-outlined: Uses Web Awesome's normal brand fill. Campo's action.primary covers the loud fill only. Use variant="brand" appearance="outlined" instead.
+ * - variant=neutral appearance=filled-outlined: Uses Web Awesome's normal neutral border, which the bridge doesn't map. Use variant="neutral" appearance="filled" instead.
+ * - variant=success|warning|danger appearance=accent|filled|filled-outlined: Solid feedback fills. Campo's feedback tokens cover the quiet style only. This includes the default appearance, accent. Use appearance="outlined" instead.
+ */
+export type WaBadgeCombination =
+  /** Draws the eye to something new or featured, such as New on a menu item. Use sparingly: it's as loud as a primary button. */
+  | { variant?: 'brand'; appearance?: 'accent' }
+  /** Information that shouldn't compete with the content, such as Beta. */
+  | { variant?: 'brand'; appearance: 'outlined' }
+  /** A strong neutral marker, such as a count on a tab. */
+  | { variant: 'neutral'; appearance?: 'accent' }
+  /** A quiet label, such as a tag or a category. */
+  | { variant: 'neutral'; appearance: 'filled' }
+  /** The quietest label, such as Draft. */
+  | { variant: 'neutral'; appearance: 'outlined' }
+  /** A good status, such as Published or Paid. */
+  | { variant: 'success'; appearance: 'outlined' }
+  /** A status that needs attention, such as Expiring. */
+  | { variant: 'warning'; appearance: 'outlined' }
+  /** A failed or blocked status, such as Failed or Overdue. */
+  | { variant: 'danger'; appearance: 'outlined' };
+
+export type WaBadgeProps = Omit<ComponentProps<typeof Base>, 'variant' | 'appearance'> & WaBadgeCombination;
+
+/** A short label that marks something's status or count, such as New or 3. Keep it to a word or a number; for a sentence, use a callout. */
+export declare const WaBadge: ForwardRefExoticComponent<WaBadgeProps>;
+export default WaBadge;

package/dist/badge.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from badge.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/badge/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaBadge = withServerAttributes(Base, 'wa-badge', {"variant":"variant","appearance":"appearance","pill":"pill","attention":"attention","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaBadge, WaBadge as default };

package/dist/button.d.ts

@@ -0,0 +1,46 @@
+// Generated by @campo-design/react's scripts/build.js from button.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/button/index.js';
+
+/**
+ * The variant × appearance combinations Campo styles (button.contract.json).
+ *
+ * Not styled by Campo, so they don't type-check:
+ * - variant=neutral|brand appearance=filled-outlined: Uses Web Awesome's normal fill and border, which the bridge maps for neutral fills only and for no variant's border. Use appearance="outlined" instead.
+ * - variant=brand appearance=filled: Uses Web Awesome's normal brand fill. Campo's action.primary covers the loud fill only. Use variant="brand" appearance="accent" instead.
+ * - variant=success|warning|danger appearance=accent|filled|filled-outlined: Solid feedback fills. Campo's feedback tokens cover the quiet style only. Use appearance="outlined" (the loudest Campo styles) or "plain" instead.
+ */
+export type WaButtonCombination =
+  /** The main action in a view, such as Save or Publish. Keep to one per view. */
+  | { variant: 'brand'; appearance?: 'accent' }
+  /** A main-action style that should weigh less than a filled one, such as a second call to action on a landing page. */
+  | { variant: 'brand'; appearance: 'outlined' }
+  /** A low-weight action in the brand colour, such as Learn more inside a callout. */
+  | { variant: 'brand'; appearance: 'plain' }
+  /** An emphasised action that isn't the main one, such as Export in a toolbar. Web Awesome's default, so a bare <wa-button> looks like this. Weighs more than outlined: next to a brand accent button, prefer outlined. */
+  | { variant?: 'neutral'; appearance?: 'accent' }
+  /** A supporting action next to a primary one, such as Back. Campo's action.secondary style. */
+  | { variant?: 'neutral'; appearance: 'filled' }
+  /** A supporting action, such as Save draft or Cancel. The usual partner to a brand accent button. */
+  | { variant?: 'neutral'; appearance: 'outlined' }
+  /** The lightest action, such as Cancel in a dialog or a toolbar action. */
+  | { variant?: 'neutral'; appearance: 'plain' }
+  /** An action that confirms a good outcome and needs more weight than plain, such as Approve. */
+  | { variant: 'success'; appearance: 'outlined' }
+  /** An action that needs care and more weight than plain, such as Override settings. */
+  | { variant: 'warning'; appearance: 'outlined' }
+  /** A destructive action that should be easy to find but not the main action, such as Delete project. */
+  | { variant: 'danger'; appearance: 'outlined' }
+  /** A low-weight action that confirms a good outcome, such as Mark as resolved. */
+  | { variant: 'success'; appearance: 'plain' }
+  /** A low-weight action that needs care, such as Override. */
+  | { variant: 'warning'; appearance: 'plain' }
+  /** A destructive action that should stay quiet, such as Remove in a list row. */
+  | { variant: 'danger'; appearance: 'plain' };
+
+export type WaButtonProps = Omit<ComponentProps<typeof Base>, 'variant' | 'appearance'> & WaButtonCombination;
+
+/** Triggers an action. Pick the variant and appearance by the action's weight: one brand accent button for the main action in a view, neutral outlined or plain for the rest. Use a link, not a button, to go somewhere. */
+export declare const WaButton: ForwardRefExoticComponent<WaButtonProps>;
+export default WaButton;

package/dist/button.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from button.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/button/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaButton = withServerAttributes(Base, 'wa-button', {"title":"title","variant":"variant","appearance":"appearance","size":"size","withCaret":"with-caret","withStart":"with-start","withEnd":"with-end","disabled":"disabled","loading":"loading","pill":"pill","type":"type","name":"name","value":"value","href":"href","target":"target","rel":"rel","download":"download","formAction":"formaction","formEnctype":"formenctype","formMethod":"formmethod","formNoValidate":"formnovalidate","formTarget":"formtarget","customError":"custom-error","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaButton, WaButton as default };

package/dist/callout.d.ts

@@ -0,0 +1,67 @@
+// Generated by @campo-design/react's scripts/build.js from callout.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/callout/index.js';
+
+/**
+ * The variant × appearance combinations Campo styles (callout.contract.json).
+ *
+ * Not styled by Campo, so they don't type-check:
+ * - variant=neutral appearance=(unset)|filled|filled-outlined: Uses Web Awesome's quiet neutral fill and normal neutral border, which the bridge doesn't map. This includes leaving appearance unset. Use variant="neutral" appearance="outlined", or variant="brand" for information instead.
+ * - variant=success|warning|danger appearance=accent: Solid feedback fills. Campo's feedback tokens cover the quiet style only. Use leave appearance unset instead.
+ */
+export type WaCalloutCombination =
+  /** Information or a tip. The usual choice: brand is how Web Awesome shows information, and Campo maps it to feedback.info on purpose (#27). */
+  | { variant?: 'brand'; appearance?: undefined }
+  /** The same as leaving appearance unset. Prefer unset. */
+  | { variant?: 'brand'; appearance: 'filled-outlined' }
+  /** Information without an edge, such as inside a card that already has one. */
+  | { variant?: 'brand'; appearance: 'filled' }
+  /** Information on a surface where a fill would be heavy. */
+  | { variant?: 'brand'; appearance: 'outlined' }
+  /** An inline note, with only the icon in colour. */
+  | { variant?: 'brand'; appearance: 'plain' }
+  /** An announcement that must be seen, such as a page-wide notice. As loud as a primary button, so one per page at most. */
+  | { variant?: 'brand'; appearance: 'accent' }
+  /** A strong message with no status, such as a cookie notice. */
+  | { variant: 'neutral'; appearance: 'accent' }
+  /** A message with no status, set apart from the content around it. */
+  | { variant: 'neutral'; appearance: 'outlined' }
+  /** An aside with no status, such as a footnote with an icon. */
+  | { variant: 'neutral'; appearance: 'plain' }
+  /** A completed action, such as Saved. The usual choice. */
+  | { variant: 'success'; appearance?: undefined }
+  /** A completed action, such as Saved. The same as leaving appearance unset. Prefer unset. */
+  | { variant: 'success'; appearance: 'filled-outlined' }
+  /** A completed action, such as Saved, without an edge, such as inside a card that already has one. */
+  | { variant: 'success'; appearance: 'filled' }
+  /** A completed action, such as Saved, on a surface where a fill would be heavy. */
+  | { variant: 'success'; appearance: 'outlined' }
+  /** A completed action, such as Saved, as an inline note with only the icon in colour. */
+  | { variant: 'success'; appearance: 'plain' }
+  /** Something that needs attention but doesn't block, such as an expiring plan. The usual choice. */
+  | { variant: 'warning'; appearance?: undefined }
+  /** Something that needs attention but doesn't block, such as an expiring plan. The same as leaving appearance unset. Prefer unset. */
+  | { variant: 'warning'; appearance: 'filled-outlined' }
+  /** Something that needs attention but doesn't block, such as an expiring plan, without an edge, such as inside a card that already has one. */
+  | { variant: 'warning'; appearance: 'filled' }
+  /** Something that needs attention but doesn't block, such as an expiring plan, on a surface where a fill would be heavy. */
+  | { variant: 'warning'; appearance: 'outlined' }
+  /** Something that needs attention but doesn't block, such as an expiring plan, as an inline note with only the icon in colour. */
+  | { variant: 'warning'; appearance: 'plain' }
+  /** An error or a destructive consequence, such as Payment failed. The usual choice. */
+  | { variant: 'danger'; appearance?: undefined }
+  /** An error or a destructive consequence, such as Payment failed. The same as leaving appearance unset. Prefer unset. */
+  | { variant: 'danger'; appearance: 'filled-outlined' }
+  /** An error or a destructive consequence, such as Payment failed, without an edge, such as inside a card that already has one. */
+  | { variant: 'danger'; appearance: 'filled' }
+  /** An error or a destructive consequence, such as Payment failed, on a surface where a fill would be heavy. */
+  | { variant: 'danger'; appearance: 'outlined' }
+  /** An error or a destructive consequence, such as Payment failed, as an inline note with only the icon in colour. */
+  | { variant: 'danger'; appearance: 'plain' };
+
+export type WaCalloutProps = Omit<ComponentProps<typeof Base>, 'variant' | 'appearance'> & WaCalloutCombination;
+
+/** A message in the flow of the page: what happened, or what to know, and what to do next. Pick the variant by meaning: brand for information, success, warning or danger for outcomes. Leave appearance unset unless the message needs more or less weight. For a word or a number on its own, such as a status or a count, use a badge. For a decision that has to be made before going on, such as confirming a delete, use a dialog. */
+export declare const WaCallout: ForwardRefExoticComponent<WaCalloutProps>;
+export default WaCallout;

package/dist/callout.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from callout.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/callout/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaCallout = withServerAttributes(Base, 'wa-callout', {"variant":"variant","appearance":"appearance","size":"size","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaCallout, WaCallout as default };

package/dist/card.d.ts

@@ -0,0 +1,24 @@
+// Generated by @campo-design/react's scripts/build.js from card.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/card/index.js';
+
+/**
+ * The appearance combinations Campo styles (card.contract.json).
+ *
+ * Not styled by Campo, so they don't type-check:
+ * - appearance=filled|filled-outlined: Uses Web Awesome's quiet neutral fill, which the bridge doesn't map. Use appearance="outlined" instead.
+ */
+export type WaCardCombination =
+  /** The usual card: an edge on the page's own background. */
+  | { appearance?: 'outlined' }
+  /** Content grouped by layout alone, with no edge or fill. */
+  | { appearance: 'plain' }
+  /** A card that must stand out, such as a featured plan. It inverts the page, so use one at most. */
+  | { appearance: 'accent' };
+
+export type WaCardProps = Omit<ComponentProps<typeof Base>, 'appearance'> & WaCardCombination;
+
+/** A surface that groups related content, such as a summary with its actions. Leave appearance as its default, outlined, unless the card needs more or less weight. */
+export declare const WaCard: ForwardRefExoticComponent<WaCardProps>;
+export default WaCard;

package/dist/card.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from card.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/card/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaCard = withServerAttributes(Base, 'wa-card', {"appearance":"appearance","withHeader":"with-header","withMedia":"with-media","withFooter":"with-footer","withHeaderActions":"with-header-actions","withFooterActions":"with-footer-actions","orientation":"orientation","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaCard, WaCard as default };

package/dist/checkbox.d.ts

@@ -0,0 +1,10 @@
+// Generated by @campo-design/react's scripts/build.js from checkbox.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/checkbox/index.js';
+
+export type WaCheckboxProps = ComponentProps<typeof Base>;
+
+/** Turns one option on or off, as part of a form the person submits. For a setting that takes effect at once, use a switch. */
+export declare const WaCheckbox: ForwardRefExoticComponent<WaCheckboxProps>;
+export default WaCheckbox;

package/dist/checkbox.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from checkbox.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/checkbox/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaCheckbox = withServerAttributes(Base, 'wa-checkbox', {"title":"title","value":"value","size":"size","disabled":"disabled","indeterminate":"indeterminate","defaultChecked":"checked","required":"required","hint":"hint","name":"name","customError":"custom-error","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaCheckbox, WaCheckbox as default };

package/dist/dialog.d.ts

@@ -0,0 +1,10 @@
+// Generated by @campo-design/react's scripts/build.js from dialog.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/dialog/index.js';
+
+export type WaDialogProps = ComponentProps<typeof Base>;
+
+/** Asks for a decision or details that must be dealt with before going back to the page, such as confirming a delete. Give it a label, and put its actions in the footer slot. For information that doesn't need an answer, use a callout in the page instead. */
+export declare const WaDialog: ForwardRefExoticComponent<WaDialogProps>;
+export default WaDialog;

package/dist/dialog.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from dialog.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/dialog/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaDialog = withServerAttributes(Base, 'wa-dialog', {"open":"open","label":"label","withoutHeader":"without-header","lightDismiss":"light-dismiss","withFooter":"with-footer","withLabel":"with-label","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaDialog, WaDialog as default };

package/dist/icon.d.ts

@@ -0,0 +1,16 @@
+// Generated by @campo-design/react's scripts/build.js from icon.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/icon/index.js';
+import type { IconName, IconWeight } from '@campo-design/icons';
+
+export type WaIconProps = Omit<ComponentProps<typeof Base>, 'name' | 'variant'> & {
+  /** A Phosphor icon name, such as `check-circle` (not Font Awesome's `circle-check`). */
+  name?: IconName;
+  /** The Phosphor weight. Campo's default is `regular`. */
+  variant?: IconWeight;
+};
+
+/** A Phosphor icon, named by Phosphor's names. It takes the colour of the text around it. Give it a label only when it's the only thing carrying the meaning. */
+export declare const WaIcon: ForwardRefExoticComponent<WaIconProps>;
+export default WaIcon;

package/dist/icon.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from icon.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/icon/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaIcon = withServerAttributes(Base, 'wa-icon', {"name":"name","family":"family","variant":"variant","canvas":"canvas","autoWidth":"auto-width","swapOpacity":"swap-opacity","src":"src","label":"label","library":"library","rotate":"rotate","flip":"flip","animation":"animation","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaIcon, WaIcon as default };

package/dist/input.d.ts

@@ -0,0 +1,20 @@
+// Generated by @campo-design/react's scripts/build.js from input.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/input/index.js';
+
+/**
+ * The appearance combinations Campo styles (input.contract.json).
+ *
+ * Not styled by Campo, so they don't type-check:
+ * - appearance=filled|filled-outlined: Uses Web Awesome's quiet neutral fill, which the bridge doesn't map for form controls. Use appearance="outlined", or leave it unset instead.
+ */
+export type WaInputCombination =
+  /** The usual field. Web Awesome's default. */
+  | { appearance?: 'outlined' };
+
+export type WaInputProps = Omit<ComponentProps<typeof Base>, 'appearance'> & WaInputCombination;
+
+/** A single line of text the person types, such as a name or an email address. Give it a label. For text that may run to several lines, such as a message, use a textarea. */
+export declare const WaInput: ForwardRefExoticComponent<WaInputProps>;
+export default WaInput;

package/dist/input.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from input.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/input/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaInput = withServerAttributes(Base, 'wa-input', {"title":"title","type":"type","defaultValue":"value","size":"size","appearance":"appearance","pill":"pill","label":"label","hint":"hint","withClear":"with-clear","placeholder":"placeholder","readonly":"readonly","passwordToggle":"password-toggle","passwordVisible":"password-visible","withoutSpinButtons":"without-spin-buttons","required":"required","pattern":"pattern","minlength":"minlength","maxlength":"maxlength","min":"min","max":"max","step":"step","autocapitalize":"autocapitalize","autocorrect":"autocorrect","autocomplete":"autocomplete","autofocus":"autofocus","enterkeyhint":"enterkeyhint","spellcheck":"spellcheck","inputmode":"inputmode","withLabel":"with-label","withHint":"with-hint","name":"name","disabled":"disabled","customError":"custom-error","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaInput, WaInput as default };

package/dist/option.d.ts

@@ -0,0 +1,10 @@
+// Generated by @campo-design/react's scripts/build.js from option.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/option/index.js';
+
+export type WaOptionProps = ComponentProps<typeof Base>;
+
+/** One choice inside a select. */
+export declare const WaOption: ForwardRefExoticComponent<WaOptionProps>;
+export default WaOption;

package/dist/option.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from option.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/option/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaOption = withServerAttributes(Base, 'wa-option', {"value":"value","disabled":"disabled","defaultSelected":"selected","label":"label","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaOption, WaOption as default };

package/dist/progress-bar.d.ts

@@ -0,0 +1,10 @@
+// Generated by @campo-design/react's scripts/build.js from progress-bar.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/progress-bar/index.js';
+
+export type WaProgressBarProps = ComponentProps<typeof Base>;
+
+/** Shows how far a task of known length has got, such as an upload. Give it a label that says what's in progress. For a wait of unknown length, set indeterminate rather than guessing a value. */
+export declare const WaProgressBar: ForwardRefExoticComponent<WaProgressBarProps>;
+export default WaProgressBar;

package/dist/progress-bar.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from progress-bar.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/progress-bar/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaProgressBar = withServerAttributes(Base, 'wa-progress-bar', {"value":"value","indeterminate":"indeterminate","label":"label","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaProgressBar, WaProgressBar as default };

package/dist/radio-group.d.ts

@@ -0,0 +1,10 @@
+// Generated by @campo-design/react's scripts/build.js from radio-group.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/radio-group/index.js';
+
+export type WaRadioGroupProps = ComponentProps<typeof Base>;
+
+/** Choosing exactly one option from a few, with every option visible at once, such as a delivery speed. Give it a label. For more than about five options, use a select; for a single yes or no, use a checkbox. */
+export declare const WaRadioGroup: ForwardRefExoticComponent<WaRadioGroupProps>;
+export default WaRadioGroup;

package/dist/radio-group.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from radio-group.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/radio-group/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaRadioGroup = withServerAttributes(Base, 'wa-radio-group', {"label":"label","hint":"hint","name":"name","disabled":"disabled","orientation":"orientation","defaultValue":"value","size":"size","required":"required","withLabel":"with-label","withHint":"with-hint","customError":"custom-error","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaRadioGroup, WaRadioGroup as default };

package/dist/radio.d.ts

@@ -0,0 +1,19 @@
+// Generated by @campo-design/react's scripts/build.js from radio.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/radio/index.js';
+
+/**
+ * The appearance combinations Campo styles (radio.contract.json).
+ */
+export type WaRadioCombination =
+  /** The usual choice, in forms. Checked, the circle and its dot take action.primary.bg. */
+  | { appearance?: 'default' }
+  /** A small set of choices that reads like a row of buttons, such as a list or grid view switch. Checked, it fills with feedback.info.bg and its edge takes action.primary.bg. */
+  | { appearance: 'button' };
+
+export type WaRadioProps = Omit<ComponentProps<typeof Base>, 'appearance'> & WaRadioCombination;
+
+/** One option in a radio group. A radio is only checked inside a <wa-radio-group>, which sets it from the group's value, so never use one on its own. */
+export declare const WaRadio: ForwardRefExoticComponent<WaRadioProps>;
+export default WaRadio;

package/dist/radio.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from radio.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/radio/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaRadio = withServerAttributes(Base, 'wa-radio', {"value":"value","appearance":"appearance","size":"size","disabled":"disabled","name":"name","customError":"custom-error","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaRadio, WaRadio as default };

package/dist/select.d.ts

@@ -0,0 +1,20 @@
+// Generated by @campo-design/react's scripts/build.js from select.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/select/index.js';
+
+/**
+ * The appearance combinations Campo styles (select.contract.json).
+ *
+ * Not styled by Campo, so they don't type-check:
+ * - appearance=filled|filled-outlined: Uses Web Awesome's quiet neutral fill, which the bridge doesn't map for form controls. Use appearance="outlined", or leave it unset instead.
+ */
+export type WaSelectCombination =
+  /** The usual field. Web Awesome's default. */
+  | { appearance?: 'outlined' };
+
+export type WaSelectProps = Omit<ComponentProps<typeof Base>, 'appearance'> & WaSelectCombination;
+
+/** A choice from a list of options, such as a country. Give it a label; for a handful of options that should all be visible, use a radio group instead. */
+export declare const WaSelect: ForwardRefExoticComponent<WaSelectProps>;
+export default WaSelect;

package/dist/select.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from select.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/select/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaSelect = withServerAttributes(Base, 'wa-select', {"name":"name","value":"value","size":"size","placeholder":"placeholder","multiple":"multiple","maxOptionsVisible":"max-options-visible","disabled":"disabled","withClear":"with-clear","open":"open","appearance":"appearance","pill":"pill","label":"label","placement":"placement","hint":"hint","withLabel":"with-label","withHint":"with-hint","required":"required","customError":"custom-error","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaSelect, WaSelect as default };

package/dist/switch.d.ts

@@ -0,0 +1,10 @@
+// Generated by @campo-design/react's scripts/build.js from switch.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/switch/index.js';
+
+export type WaSwitchProps = ComponentProps<typeof Base>;
+
+/** Turns a setting on or off, taking effect at once, such as Reduce motion. For an option in a form the person submits, use a checkbox. */
+export declare const WaSwitch: ForwardRefExoticComponent<WaSwitchProps>;
+export default WaSwitch;

package/dist/switch.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from switch.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/switch/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaSwitch = withServerAttributes(Base, 'wa-switch', {"title":"title","name":"name","value":"value","size":"size","disabled":"disabled","defaultChecked":"checked","required":"required","hint":"hint","withHint":"with-hint","customError":"custom-error","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaSwitch, WaSwitch as default };

package/dist/tab-group.d.ts

@@ -0,0 +1,10 @@
+// Generated by @campo-design/react's scripts/build.js from tab-group.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/tab-group/index.js';
+
+export type WaTabGroupProps = ComponentProps<typeof Base>;
+
+/** Switches between views of the same thing without leaving the page, such as the sections of a settings page. Each <wa-tab> names a <wa-tab-panel>. To move between pages, use links. */
+export declare const WaTabGroup: ForwardRefExoticComponent<WaTabGroupProps>;
+export default WaTabGroup;

package/dist/tab-group.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from tab-group.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/tab-group/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaTabGroup = withServerAttributes(Base, 'wa-tab-group', {"active":"active","placement":"placement","activation":"activation","withoutScrollControls":"without-scroll-controls","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaTabGroup, WaTabGroup as default };

package/dist/tab-panel.d.ts

@@ -0,0 +1,10 @@
+// Generated by @campo-design/react's scripts/build.js from tab-panel.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/tab-panel/index.js';
+
+export type WaTabPanelProps = ComponentProps<typeof Base>;
+
+/** The content for one tab in a tab group. Its name matches its tab's panel attribute. */
+export declare const WaTabPanel: ForwardRefExoticComponent<WaTabPanelProps>;
+export default WaTabPanel;

package/dist/tab-panel.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from tab-panel.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/tab-panel/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaTabPanel = withServerAttributes(Base, 'wa-tab-panel', {"name":"name","active":"active","role":"role","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaTabPanel, WaTabPanel as default };

package/dist/tab.d.ts

@@ -0,0 +1,10 @@
+// Generated by @campo-design/react's scripts/build.js from tab.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/tab/index.js';
+
+export type WaTabProps = ComponentProps<typeof Base>;
+
+/** One tab in a tab group. Its label says what the panel shows, in a word or two, and its panel attribute names the <wa-tab-panel> it opens. The tab group marks the open tab, in feedback.info.text: don't set that yourself. */
+export declare const WaTab: ForwardRefExoticComponent<WaTabProps>;
+export default WaTab;

package/dist/tab.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from tab.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/tab/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaTab = withServerAttributes(Base, 'wa-tab', {"panel":"panel","disabled":"disabled","role":"role","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaTab, WaTab as default };

package/dist/textarea.d.ts

@@ -0,0 +1,20 @@
+// Generated by @campo-design/react's scripts/build.js from textarea.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/textarea/index.js';
+
+/**
+ * The appearance combinations Campo styles (textarea.contract.json).
+ *
+ * Not styled by Campo, so they don't type-check:
+ * - appearance=filled|filled-outlined: Uses Web Awesome's quiet neutral fill, which the bridge doesn't map for form controls. Use appearance="outlined", or leave it unset instead.
+ */
+export type WaTextareaCombination =
+  /** The usual field. Web Awesome's default. */
+  | { appearance?: 'outlined' };
+
+export type WaTextareaProps = Omit<ComponentProps<typeof Base>, 'appearance'> & WaTextareaCombination;
+
+/** Several lines of text the person types, such as a message. Give it a label. For a short value on one line, such as a name or an email address, use an input. */
+export declare const WaTextarea: ForwardRefExoticComponent<WaTextareaProps>;
+export default WaTextarea;

package/dist/textarea.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from textarea.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/textarea/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaTextarea = withServerAttributes(Base, 'wa-textarea', {"title":"title","name":"name","defaultValue":"value","size":"size","appearance":"appearance","label":"label","hint":"hint","placeholder":"placeholder","rows":"rows","resize":"resize","disabled":"disabled","readonly":"readonly","required":"required","minlength":"minlength","maxlength":"maxlength","autocapitalize":"autocapitalize","autocorrect":"autocorrect","autocomplete":"autocomplete","autofocus":"autofocus","enterkeyhint":"enterkeyhint","spellcheck":"spellcheck","inputmode":"inputmode","withLabel":"with-label","withHint":"with-hint","withCount":"with-count","customError":"custom-error","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaTextarea, WaTextarea as default };

package/dist/tooltip.d.ts

@@ -0,0 +1,10 @@
+// Generated by @campo-design/react's scripts/build.js from tooltip.contract.json. Do not edit.
+
+import type { ComponentProps, ForwardRefExoticComponent } from 'react';
+import type Base from '@awesome.me/webawesome/dist/react/tooltip/index.js';
+
+export type WaTooltipProps = ComponentProps<typeof Base>;
+
+/** A short name for a control whose purpose its icon alone doesn't make clear, shown on hover and focus. Never put anything a person needs in order to act in a tooltip: it can't be reached on touch screens, and it disappears. */
+export declare const WaTooltip: ForwardRefExoticComponent<WaTooltipProps>;
+export default WaTooltip;

package/dist/tooltip.js

@@ -0,0 +1,7 @@
+// Generated by @campo-design/react's scripts/build.js from tooltip.contract.json. Do not edit.
+
+import Base from '@awesome.me/webawesome/dist/react/tooltip/index.js';
+import { withServerAttributes } from '../src/server-attributes.js';
+
+const WaTooltip = withServerAttributes(Base, 'wa-tooltip', {"placement":"placement","disabled":"disabled","distance":"distance","open":"open","skidding":"skidding","showDelay":"show-delay","hideDelay":"hide-delay","trigger":"trigger","withoutArrow":"without-arrow","for":"for","dir":"dir","lang":"lang","didSSR":"did-ssr"});
+export { WaTooltip, WaTooltip as default };

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "@campo-design/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Campo's components for React 19: Web Awesome's React wrappers, typed from Campo's contracts so unsupported combinations and non-Phosphor icon names fail to compile, plus Campo's setup in one call.",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/setup.d.ts",
+      "default": "./src/setup.js"
+    },
+    "./package.json": "./package.json",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    }
+  },
+  "sideEffects": [
+    "./dist/*.js"
+  ],
+  "dependencies": {
+    "@campo-design/icons": "^0.1.0"
+  },
+  "peerDependencies": {
+    "@awesome.me/webawesome": "^3.14.0",
+    "@campo-design/tokens": ">=0.3.0 <1.0.0",
+    "@campo-design/webawesome": ">=0.3.0 <1.0.0",
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@awesome.me/webawesome": "3.14.0",
+    "@types/react": "^19.1.10",
+    "react": "^19.1.1",
+    "react-dom": "^19.3.1",
+    "typescript": "^5.9.0",
+    "@campo-design/tokens": "^0.3.1",
+    "@campo-design/webawesome": "^0.4.0"
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "check": "node scripts/check-types.js",
+    "test": "node --test scripts/*.test.js",
+    "clean": "rm -rf dist .check"
+  }
 }

package/src/server-attributes.js

@@ -0,0 +1,53 @@
+/*
+ * Server rendering for Web Awesome's React wrappers.
+ *
+ * Web Awesome's wrappers (made with @lit/react) set a component's props as
+ * element properties, which only exist in the browser. On the server they
+ * drop them, so <WaButton variant="brand"> renders as a bare <wa-button>, and
+ * in a server-rendered app the button can draw as neutral between the
+ * component loading and React hydrating.
+ *
+ * So on the server each Campo module renders the element itself, with every
+ * prop that has an HTML attribute written as that attribute
+ * (`variant="brand"`, `withCaret` as `with-caret`). In the browser it is Web
+ * Awesome's wrapper itself, unchanged, which marks its element
+ * suppressHydrationWarning, so the attributes from the server don't warn.
+ *
+ * The shadow DOM still draws only once the component's JavaScript loads.
+ * Rendering that on the server too (declarative shadow DOM) needs Lit's
+ * framework plugins, which Campo doesn't take on.
+ */
+import { createElement, forwardRef } from 'react';
+
+const isServer = typeof document === 'undefined';
+
+/** A prop that only means something to the live element: an event handler, a callback or an object. */
+const browserOnly = (key, value) =>
+  /^on[A-Z]/.test(key) || typeof value === 'function' || (value !== null && typeof value === 'object' && key !== 'style');
+
+/**
+ * `Component` in the browser; on the server, a component that renders `tag`
+ * with its attributes.
+ *
+ * @param {import('react').ComponentType<any>} Component Web Awesome's wrapper.
+ * @param {string} tag The element, such as `wa-button`.
+ * @param {Record<string, string>} attributes Each prop that has an attribute → the attribute (`withCaret` → `with-caret`).
+ */
+export function withServerAttributes(Component, tag, attributes) {
+  if (!isServer) return Component;
+  const Server = forwardRef(function Server({ children, ...props }, _ref) {
+    const element = {};
+    for (const [key, value] of Object.entries(props)) {
+      if (key in attributes) {
+        // HTML's rules: a true boolean is the attribute with no value; false or unset is no attribute.
+        if (value === true) element[attributes[key]] = '';
+        else if (typeof value === 'string' || typeof value === 'number') element[attributes[key]] = String(value);
+      } else if (value !== undefined && !browserOnly(key, value)) {
+        element[key] = value;
+      }
+    }
+    return createElement(tag, element, children);
+  });
+  Server.displayName = Component.displayName;
+  return Server;
+}

package/src/setup.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Campo's fixed setup for a React app: registers Campo's icons (Phosphor) and
+ * keeps Web Awesome's color scheme in step with Campo's `data-theme`. Call it
+ * once in the app's entry file, before the first render. It does nothing on
+ * the server, and nothing if it has already run.
+ *
+ * The app still adds `class="wa-theme-default campo-wa"` to `<html>` and
+ * imports `@campo-design/webawesome/theme.css`; it warns if the classes are
+ * missing.
+ *
+ * @param options.icons Passed to `registerCampoIcons()`: `base` self-hosts the
+ *   icons instead of using the CDN.
+ * @param options.root Passed to `connectColorScheme()`. Defaults to `<html>`.
+ * @returns A function that stops following the color scheme.
+ */
+export declare function setupCampo(options?: { icons?: { base?: string }; root?: Element }): () => void;

package/src/setup.js

@@ -0,0 +1,42 @@
+/*
+ * Campo's fixed setup, for a React app, in one call.
+ *
+ * Call setupCampo() once in the app's entry file, before the first render, so
+ * icons are registered before anything draws one. It runs only in a browser,
+ * so a server render can import it safely. It doesn't import theme.css: CSS
+ * imports work differently in each bundler, so the app imports that itself.
+ */
+import { connectColorScheme } from '@campo-design/webawesome';
+import { registerCampoIcons } from '@campo-design/webawesome/icons';
+
+const CLASSES = ['wa-theme-default', 'campo-wa'];
+let stop = null;
+
+/**
+ * Register Campo's icons and keep Web Awesome's color scheme in step with
+ * Campo's `data-theme`. Calling it again does nothing until the returned
+ * function has been called.
+ *
+ * @param {{ icons?: { base?: string }, root?: Element }} [options]
+ * @returns {() => void} Stops following the color scheme.
+ */
+export function setupCampo(options = {}) {
+  if (typeof document === 'undefined') return () => {};
+  if (stop) return stop;
+
+  registerCampoIcons(options.icons);
+  const disconnect = connectColorScheme(options.root);
+  stop = () => {
+    disconnect();
+    stop = null;
+  };
+
+  const missing = CLASSES.filter((c) => !document.documentElement.classList.contains(c));
+  if (missing.length) {
+    console.warn(
+      `Campo: <html> is missing class ${missing.join(' and ')}, so Web Awesome components won't take Campo's look. ` +
+        `Add class="${CLASSES.join(' ')}" to <html> (in Next.js, in the root layout).`,
+    );
+  }
+  return stop;
+}