{"_id":"@caelum-house/design","name":"@caelum-house/design","dist-tags":{"latest":"0.4.0"},"versions":{"0.4.0":{"name":"@caelum-house/design","version":"0.4.0","description":"Caelum design system — shared tokens, brand assets, and React components for the website and the React Native app.","license":"UNLICENSED","homepage":"https://github.com/caelum-house/caelum-design-system#readme","repository":{"type":"git","url":"git+https://github.com/caelum-house/caelum-design-system.git"},"bugs":{"url":"https://github.com/caelum-house/caelum-design-system/issues"},"publishConfig":{"registry":"https://registry.npmjs.org","access":"public"},"private":false,"type":"module","sideEffects":false,"exports":{".":{"react-native":{"types":"./dist/index.native.d.ts","default":"./dist/index.native.js"},"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./tokens":{"types":"./dist/tokens/index.d.ts","import":"./dist/tokens/index.js","default":"./dist/tokens/index.js"},"./brand":{"types":"./dist/brand/index.d.ts","import":"./dist/brand/index.js","default":"./dist/brand/index.js"},"./components/*":{"react-native":{"types":"./dist/components/*.native.d.ts","default":"./dist/components/*.native.js"},"types":"./dist/components/*.d.ts","import":"./dist/components/*.js","default":"./dist/components/*.js"}},"main":"./dist/index.js","module":"./dist/index.js","react-native":"./dist/index.native.js","types":"./dist/index.d.ts","scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","lint":"eslint src --ext .ts,.tsx","format":"prettier --write \"src/**/*.{ts,tsx,json,md}\"","storybook":"storybook dev -p 6006","build-storybook":"storybook build","changeset":"changeset","version":"changeset version","release":"pnpm build && changeset publish"},"peerDependencies":{"react":">=18","react-dom":">=18","react-native":">=0.73","react-native-svg":">=15"},"peerDependenciesMeta":{"react-dom":{"optional":true},"react-native":{"optional":true},"react-native-svg":{"optional":true}},"devDependencies":{"@changesets/cli":"^2.27.7","@storybook/addon-essentials":"^8.3.0","@storybook/addon-interactions":"^8.3.0","@storybook/blocks":"^8.3.0","@storybook/react":"^8.3.0","@storybook/react-vite":"^8.3.0","@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@typescript-eslint/eslint-plugin":"^7.16.0","@typescript-eslint/parser":"^7.16.0","eslint":"^8.57.0","eslint-plugin-react":"^7.34.3","eslint-plugin-react-hooks":"^4.6.2","eslint-plugin-storybook":"^0.8.0","prettier":"^3.3.3","react":"^18.3.1","react-dom":"^18.3.1","react-native":"^0.74.3","react-native-reanimated":"^3.14.0","react-native-svg":"^15.4.0","storybook":"^8.3.0","tsup":"^8.2.4","typescript":"^5.5.3","vite":"^5.4.0"},"packageManager":"pnpm@11.1.1","_id":"@caelum-house/design@0.4.0","gitHead":"02773f4a6ae07e8f672d757b4292d5cfe4da7c1e","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-dJB0JSIMIia0T8xKNCcOPwnkcRaF1Alj/NFlePppfFFEvCLKPzPJvn1xjGRG3U6QMbrMZAwdPPAwdWbSYCrdEA==","shasum":"7d3528cb565c14c478fd600aeba4ac2694d77edd","tarball":"https://registry.npmjs.org/@caelum-house/design/-/design-0.4.0.tgz","fileCount":126,"unpackedSize":299417,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDcDtsDstE+q2DpJDxO2sfkzMTG1iVP7cN1KryVpsjWrgIgGWUMg08jyGC5N3az5UJlSrpBhlVPXqDnKgQJpA/0D90="}]},"_npmUser":{"name":"rmcs","email":"rmc.sprenkels@gmail.com"},"directories":{},"maintainers":[{"name":"rmcs","email":"rmc.sprenkels@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design_0.4.0_1787219293167_0.757158180495533"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-20T09:48:12.950Z","0.4.0":"2026-08-20T09:48:13.313Z","modified":"2026-08-20T09:48:13.508Z"},"maintainers":[{"name":"rmcs","email":"rmc.sprenkels@gmail.com"}],"description":"Caelum design system — shared tokens, brand assets, and React components for the website and the React Native app.","homepage":"https://github.com/caelum-house/caelum-design-system#readme","repository":{"type":"git","url":"git+https://github.com/caelum-house/caelum-design-system.git"},"bugs":{"url":"https://github.com/caelum-house/caelum-design-system/issues"},"license":"UNLICENSED","readme":"# @caelum-house/design\n\nCaelum design system. Tokens, brand assets, and components, shared between\nthe marketing site and the React Native app.\n\n> **Status:** v0.1 scaffold — Mark, Spinner, and the full token set.\n> Roadmap below for what comes next.\n\n## Install\n\nThe package is published to **GitHub Packages** under the `@caelum-house` scope.\nAuthenticate once, then install like any npm package.\n\n```sh\n# .npmrc (or ~/.npmrc) — once\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}\n@caelum-house:registry=https://npm.pkg.github.com\n\n# Then in either app\npnpm add @caelum-house/design\n# or\nnpm install @caelum-house/design\n```\n\nPeer dependencies:\n\n- `react` ≥ 18 (always)\n- `react-dom` ≥ 18 (web only)\n- `react-native` ≥ 0.73 (RN only)\n- `react-native-svg` ≥ 15 (RN only)\n- `react-native-reanimated` ≥ 3 (RN only — needed for the `Spinner`)\n\n## Use\n\n```tsx\nimport {\n  ThemeProvider,\n  Mark, Spinner, Card, CTAPrimary,\n  Heading, Body, Eyebrow,\n} from '@caelum-house/design';\n\n// Wrap your app once\n<ThemeProvider initial=\"dark\">\n  <App />\n</ThemeProvider>\n\n// Then use components anywhere — they read the active theme from context\n<Heading size=\"hero\">Built to glow</Heading>\n<Body>Caelum runs everything.</Body>\n<Card variant=\"elevated\">\n  <Mark size={48} />\n  <CTAPrimary href=\"/app\">Open app</CTAPrimary>\n</Card>\n```\n\nWeb and RN resolve to different files automatically:\n\n- Vite / Webpack / esbuild → `*.tsx`\n- Metro (RN)               → `*.native.tsx`\n\nvia React Native's platform-extension resolver and the `react-native`\nexport condition in `package.json`.\n\n### Components included\n\n| Component | Web | RN |\n|---|---|---|\n| `Mark` — brand C-arc | ✓ | ✓ |\n| `Spinner` — orbit-ring loader | ✓ | ✓ (via Reanimated) |\n| `Eyebrow` / `Label` / `Meta` — tracked uppercase | ✓ | ✓ |\n| `Heading` — display/hero/section sizes | ✓ | ✓ (fixed pixels on native) |\n| `Body` — sm/md/lg prose | ✓ | ✓ |\n| `CTAPrimary` / `CTASecondary` — buttons | ✓ | ✓ |\n| `Card` — default/elevated/soft surface | ✓ | ✓ |\n| `ThemeProvider` + `useTheme()` | ✓ | ✓ (same file) |\n\n## Structure\n\n```\nsrc/\n  tokens/       colors, typography, space, motion          (platform-agnostic)\n  brand/        SVG path constants, mark geometry          (platform-agnostic)\n  components/\n    Mark.tsx           ⇢ web build\n    Mark.native.tsx    ⇢ RN build\n    Spinner.tsx        ⇢ web build\n    Spinner.native.tsx ⇢ RN build\n    *.stories.tsx      ⇢ shared stories (one file, both Storybooks)\n```\n\n## Develop\n\n```sh\npnpm install\npnpm storybook       # http://localhost:6006\npnpm build           # dist/ via tsup\npnpm typecheck\npnpm lint\n```\n\nAdd a story for any new component (`Foo.stories.tsx`) — it'll auto-pick-up.\n\n## Release\n\nUses [Changesets](https://github.com/changesets/changesets).\n\n```sh\npnpm changeset       # describe the change, pick a bump\ngit commit && git push\n# CI opens a \"Version Packages\" PR — merge it to publish\n```\n\nReleases go to GitHub Packages on push to `main` once the version PR is\nmerged. Consumers update at their own pace via `pnpm update`.\n\n## Roadmap\n\n- [ ] React Native Storybook in the mobile app, consuming the same stories\n- [ ] Refraction sweep on the mark (web + RN via Reanimated path interpolation)\n- [ ] Button, Pill, Card components\n- [ ] Typography primitives (`<Title>`, `<Body>`, `<Eyebrow>`)\n- [ ] Theme provider — light/dark + system follow\n- [ ] Icon set (lucide-react / lucide-react-native wrappers)\n- [ ] Chromatic preview deploy\n\n## Why a separate repo\n\nThe website and the mobile app are deployed independently and move at\ndifferent speeds, but they need a single source of truth for what the\nbrand looks like. Pulling the design system out as its own package means\nboth apps consume the same versioned artefact, design changes get a\nproper review, and Storybook serves as the canonical visual reference.\n\nComponents that cannot be expressed identically on both platforms (CSS\neffects with no RN equivalent) live in platform-specific files and stay\nvisually in sync via the shared story specs.\n","readmeFilename":"README.md","_rev":"1-dd764173a55b5f151c90df5d0825b0ef"}