@phcdevworks/spectre-ui 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +10 -1
  2. package/dist/index.css +8 -0
  3. package/package.json +2 -1
package/README.md CHANGED
@@ -24,7 +24,16 @@ npm install @phcdevworks/spectre-ui
24
24
 
25
25
  ### 1. Import Spectre CSS
26
26
 
27
- Import the CSS bundles anywhere in your app, layout, or build pipeline.
27
+ Import the canonical bundle anywhere in your app, layout, or build pipeline.
28
+
29
+ ```ts
30
+ // Recommended: one-line Spectre UI bundle (tokens + base + components + utilities)
31
+ import "@phcdevworks/spectre-ui/index.css";
32
+ ```
33
+
34
+ `index.css` automatically loads the Spectre Tokens CSS, so you don't need to import `@phcdevworks/spectre-tokens` separately in most apps.
35
+
36
+ **Advanced layer control:** If you prefer to manage the layers individually, you can still import each file directly.
28
37
 
29
38
  ```css
30
39
  @import "@phcdevworks/spectre-ui/base.css";
package/dist/index.css ADDED
@@ -0,0 +1,8 @@
1
+ /* Spectre UI canonical bundle:
2
+ - Tokens first (defines --sp-* vars)
3
+ - Then UI base, components, utilities
4
+ */
5
+ @import "@phcdevworks/spectre-tokens/index.css";
6
+ @import "./base.css";
7
+ @import "./components.css";
8
+ @import "./utilities.css";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phcdevworks/spectre-ui",
3
- "version": "0.0.4",
3
+ "version": "0.0.5",
4
4
  "description": "Framework-agnostic UI layer for the Spectre design system. Provides base CSS, component classes, utilities, and a Tailwind preset powered by @phcdevworks/spectre-tokens.",
5
5
  "keywords": [
6
6
  "phcdevworks",
@@ -47,6 +47,7 @@
47
47
  "import": "./dist/index.js",
48
48
  "require": "./dist/index.cjs"
49
49
  },
50
+ "./index.css": "./dist/index.css",
50
51
  "./base.css": "./dist/base.css",
51
52
  "./components.css": "./dist/components.css",
52
53
  "./utilities.css": "./dist/utilities.css"