@flowstack-ui/brick 0.1.0 → 0.1.1

package/docs/guides/installation.md

@@ -1,11 +1,15 @@
 # Installation
 
-Install Brick with its Atom and React peer dependencies:
+Install Brick in an existing React application:
 
 ```bash
-npm install @flowstack-ui/brick @flowstack-ui/atom react react-dom
+npm install @flowstack-ui/brick
 ```
 
+Brick installs its compatible `@flowstack-ui/atom` version automatically; do
+not install Atom separately. React and React DOM 18 or newer are peer
+dependencies and must be provided by the consuming application.
+
 Import the complete stylesheet once from the application root:
 
 ```ts
@@ -37,3 +41,25 @@ import "@flowstack-ui/brick/tokens.css";
 
 Do not import both `tokens.css` and `styles.css`; the complete stylesheet
 already contains the tokens.
+
+## Optional route-aware CSS
+
+Applications with measured all-component CSS cost may load the shared visual
+foundation once and select component styles by the same names as Brick's
+JavaScript subpaths:
+
+```ts
+import "@flowstack-ui/brick/styles/core.css";
+import "@flowstack-ui/brick/styles/button.css";
+import "@flowstack-ui/brick/styles/card.css";
+```
+
+`core.css` contains Brick's layer order, default tokens, and component-scoped
+foundations. Import it before component styles. Each component stylesheet owns
+that component's rules and any private shared recipe it requires; it does not
+repeat tokens or foundations.
+
+Do not combine modular component styles with `styles.css` or `tokens.css`.
+Choose the complete stylesheet for the simplest and safest installation.
+Choose modular styles only when the application can reliably own every style
+import and production measurement shows that route-level selection matters.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowstack-ui/brick",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Opinionated styled React components built on @flowstack-ui/atom.",
   "type": "module",
   "license": "MIT",
@@ -328,6 +328,7 @@
       "default": "./dist/sidebar.js"
     },
     "./styles.css": "./dist/styles.css",
+    "./styles/*.css": "./dist/styles/*.css",
     "./tokens.css": "./dist/tokens.css",
     "./reset.css": "./dist/reset.css"
   },