@sckyzo/cosmos-react 0.0.1 → 0.0.3

package/CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to `@sckyzo/cosmos-react` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.3](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-react@0.0.2...@sckyzo/cosmos-react@0.0.3) (2026-07-17)
+
+
+### Bug Fixes
+
+* **react:** accessibility of overlay components ([d9ca403](https://github.com/SckyzO/cosmos/commit/d9ca40360bd7e7d7f61a6a23d406018996b6dee5))
+* **react:** add menu semantics and keyboard nav to Dropdown ([f60d06f](https://github.com/SckyzO/cosmos/commit/f60d06fe451af570967824d970a359001d9ba0a1))
+* **react:** export the 7 unreachable page components ([1b7d60c](https://github.com/SckyzO/cosmos/commit/1b7d60c647d609b02ea704374fca56aa3a7018b5))
+* **react:** give ConfirmationModal a unique title id and focus trap ([0a703c4](https://github.com/SckyzO/cosmos/commit/0a703c43e13a514b061d31dc8aeda2cbd9ee5b86))
+* **react:** trap focus and name Modal and Drawer dialogs ([53564d1](https://github.com/SckyzO/cosmos/commit/53564d1a65e96c29849e8581b1b22c25d04545bd))
+
+## [0.0.2] - 2026-05-21
+
+Packaging/metadata only — no component or API changes.
+
+### Changed
+
+- Sharper npm package description.
+- First release published via npm OIDC trusted publishing (provenance attached).
+
 ## [0.0.1] - 2026-05-20
 
 First test release.

package/README.md

@@ -1,33 +1,72 @@
 # @sckyzo/cosmos-react
 
-React 19 component library — Cosmos design system.
+[![npm](https://img.shields.io/npm/v/@sckyzo/cosmos-react)](https://www.npmjs.com/package/@sckyzo/cosmos-react)
 
-**Status: Phase 1 (extraction in progress)** — components are being extracted from
-[rackscope](https://github.com/SckyzO/rackscope) `EmptyPage.tsx` and
-`TemplateDefaultPage.tsx`. See parent repo [`cosmos`](https://github.com/SckyzO/cosmos)
-for the roadmap.
+React 19 component library for the Cosmos design system. 135+ themeable,
+accessible components, built with Tailwind 4 and shipped as ESM + CJS + types.
+
+Browse the full catalog in the [live Storybook](https://sckyzo.github.io/cosmos/).
 
 ## Install
 
 ```bash
 pnpm add @sckyzo/cosmos-react @sckyzo/cosmos-theme
-# Required peers (likely already in your app):
-pnpm add react react-dom
+pnpm add react react-dom   # peers, react 19+
 ```
 
-## Usage
+`@sckyzo/cosmos-theme` carries the CSS (tokens, fonts, light/dark vars). The
+components render unstyled without it.
+
+## Set up the styles
+
+Components are styled with Tailwind 4 utility classes, so your app's Tailwind
+build has to generate those classes. Tailwind only scans your own source by
+default, so you **must** point `@source` at the installed package. Without it no
+Cosmos utility classes are generated and every component renders unstyled.
+
+In your main CSS file:
+
+```css
+@import 'tailwindcss';
+
+/* Required: let Tailwind scan the compiled components for class names.
+   The path is relative to this CSS file; adjust the depth to your layout. */
+@source '../node_modules/@sckyzo/cosmos-react/dist/**/*.{js,cjs}';
+
+/* Cosmos tokens (the @theme block) then the light/dark CSS vars. */
+@import '@sckyzo/cosmos-theme/tailwind';
+@import '@sckyzo/cosmos-theme/vars';
+
+/* Optional: the Outfit + JetBrains Mono webfonts. */
+@import '@sckyzo/cosmos-theme/fonts';
+```
+
+If you also use `@sckyzo/cosmos-charts`, add a second `@source` line for its
+`dist` the same way.
+
+## Use
 
 ```tsx
-// Apps must import the theme CSS once:
-import '@sckyzo/cosmos-theme/fonts';
-import '@sckyzo/cosmos-theme/tailwind';
-import 'tailwindcss';
-import '@sckyzo/cosmos-theme/vars';
-
-// Then use components:
-import {} from /* coming in Phase 1 */ '@sckyzo/cosmos-react';
+import { useState } from 'react';
+import { Button, Modal } from '@sckyzo/cosmos-react';
+
+function Example() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open</Button>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <Modal.Header title="Hello from Cosmos" onClose={() => setOpen(false)} />
+        <Modal.Body>A themed, focus-trapped dialog.</Modal.Body>
+      </Modal>
+    </>
+  );
+}
 ```
 
+Charts live in a separate package, [`@sckyzo/cosmos-charts`](../charts), so apps
+that don't render charts don't ship the ApexCharts bundle.
+
 ## License
 
 MIT — see [LICENSE](../../LICENSE).