feat: React Native support via shared design tokens (hightide-native)

[felixevers]

What & why

This turns hightide into a hybrid design system that serves both React (web) and React Native, sharing one design language. It is purely additive — the existing web library, its build, lint, tests and publish pipeline are untouched.

Addresses the brief: package hightide's key components for React Native, give it a readable structure + Storybook, think about the architecture first, exclude desktop-web components (AppPage, Carousel, …), and answer "can we package both with the same versioning?".

📖 Read first: docs/native/ARCHITECTURE.md — the rationale, the survey of how other hybrid libraries do it, and the npm/versioning model.

Architecture (the short version)

Three packages, one repo, single source of truth for design at the center:

@helpwave/hightide-tokens   ← colors · typography · spacing · radii · coloring model · presets (0 deps)
        ▲              ▲
        │              │
@helpwave/hightide   @helpwave/hightide-native
   (web, root)            (react native)

• @helpwave/hightide-tokens — platform-agnostic tokens (pure TS, no React/DOM/RN), transcribed from the web CSS theme. Feeds web Tailwind, NativeWind and RN StyleSheet alike, so the platforms can't drift.
• @helpwave/hightide-native — the React Native components (basic app building blocks).
• The web library stays where it is; a documented follow-up is to make it consume the tokens package too.

Why this shape (decisions documented in the ADR)

• Separate, scoped packages over one combined package — native needs react-native/nativewind, web needs react-dom; merging forces each platform's installs/bundlers to carry the other's deps. The ecosystem (gluestack, Tamagui) ships coordinated packages, not one.
• Themed StyleSheet core, NativeWind-ready not NativeWind-required — a foundational library should render with zero build setup (the Rename Package #1 friction teams hit with NativeWind-only libs). We still ship the NativeWind preset + global.css + forward className, so utility-class styling is an opt-in layer. The web coloring-{solid,tonal,outline,text,tonal-outline} semantics are reproduced exactly.
• Lockstep versioning — all three release on the same version via scripts/sync-versions.mjs; npm workspaces are a documented one-line opt-in (kept out of this PR so the web npm ci is unaffected).

What's in the box

hightide-native components: Text (typography primitive), Button, IconButton, Card/ActionCard, Chip/ChipList, Avatar/AvatarGroup/AvatarWithStatus, Switch, Checkbox, Badge, Spinner, Divider — plus HightideThemeProvider (light/dark) and the styling layer (resolveColoring, resolveElement).

Explicitly excluded (desktop-web): AppPage, Carousel, Table, navigation, data-grid filtering, date pickers, process-model, markdown, … See COMPONENT-INVENTORY.md for the full ported / planned / web-only breakdown.

Storybook: react-native-web-vite config + stories for every component (same Vite-based approach as the web Storybook).

Verification done

• @helpwave/hightide-tokens: tsc --noEmit ✅ and tsup build (cjs+esm+dts) ✅; token outputs spot-checked.
• @helpwave/hightide-native: tsc --noEmit ✅ (against react-native types) and tsup build ✅; global.css generated from tokens.
• Web library: unchanged — packages/** is already ESLint-ignored; the root tsup/tsconfig only build src/.

Note: the native package is a foundational layer. On-device Storybook and wiring into an app/CI are the natural next steps (listed in the ADR). Local dev resolves the inter-package dependency via the documented workspaces opt-in.

Review pointers

• docs/native/ARCHITECTURE.md and docs/native/COMPONENT-INVENTORY.md first.
• packages/hightide-tokens/src/ — the token model (start at semantic.ts, coloring.ts).
• packages/hightide-native/src/styling/coloring.ts — the web→native coloring port.

🤖 Generated with Claude Code

---

Generated by Claude Code

[cloudflare-workers-and-pages]

Deploying hightide with    Cloudflare Pages

Latest commit:	48aa3e3
Status:	✅  Deploy successful!
Preview URL:	https://8a15c67e.hightide-7id.pages.dev
Branch Preview URL:	https://claude-hightide-react-native.hightide-7id.pages.dev

View logs