@a4ui/core 0.3.0 โ†’ 0.4.0

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 (8) hide show
  1. package/README.md +58 -7
  2. package/dist/index.d.ts +3 -1
  3. package/dist/index.js +1002 -712
  4. package/dist/layout/ThemedScenery.d.ts +20 -0
  5. package/dist/styles.css +399 -91
  6. package/dist/themes/index.d.ts +34 -0
  7. package/dist/themes/palettes.d.ts +42 -0
  8. package/package.json +18 -3
package/README.md CHANGED
@@ -6,6 +6,8 @@
6
6
  [![Lighthouse: Accessibility 100](https://img.shields.io/badge/A11y-100-success)](https://a4uikit.github.io/a4ui/)
7
7
  [![Lighthouse: Best Practices 100](https://img.shields.io/badge/Best_Practices-100-success)](https://a4uikit.github.io/a4ui/)
8
8
  [![Lighthouse: SEO 100](https://img.shields.io/badge/SEO-100-success)](https://a4uikit.github.io/a4ui/)
9
+ [![npm downloads](https://img.shields.io/npm/dm/@a4ui/core.svg)](https://www.npmjs.com/package/@a4ui/core)
10
+ [![minzipped size](https://img.shields.io/bundlephobia/minzip/@a4ui/core.svg)](https://bundlephobia.com/package/@a4ui/core)
9
11
 
10
12
  **Spatial Glass** โ€” a design system & component library for **SolidJS**
11
13
  (glassmorphism + starfield backdrop + light/dark themes). Named after the 4
@@ -15,11 +17,11 @@ people in the Rivera family. ๐Ÿ™‚
15
17
 
16
18
  Three layers, one identity:
17
19
 
18
- | Layer | What it gives | Tech |
19
- |-------|---------------|------|
20
- | Behavior / a11y | focus, keyboard, ARIA, portals | **Kobalte** |
21
- | Motion | transitions, count-up, calm mode | **solid-transition-group + solid-motionone** |
22
- | Visual | glass surfaces, tokens, glow, starfield | **Tailwind preset + `styles.css`** |
20
+ | Layer | What it gives | Tech |
21
+ | --------------- | --------------------------------------- | -------------------------------------------- |
22
+ | Behavior / a11y | focus, keyboard, ARIA, portals | **Kobalte** |
23
+ | Motion | transitions, count-up, calm mode | **solid-transition-group + solid-motionone** |
24
+ | Visual | glass surfaces, tokens, glow, starfield | **Tailwind preset + `styles.css`** |
23
25
 
24
26
  ## Install
25
27
 
@@ -48,6 +50,51 @@ import '@a4ui/core/styles.css'
48
50
  import { Button, Card, Modal } from '@a4ui/core'
49
51
  ```
50
52
 
53
+ ## Customization
54
+
55
+ Colors, radius and fonts are driven by CSS variables (the `@a4ui/core/preset`
56
+ maps Tailwind's semantic names to them). Override any token in your own CSS โ€”
57
+ scope it to `:root` (or `:root[data-theme='light']`) after importing the styles:
58
+
59
+ ```css
60
+ @import '@a4ui/core/styles.css';
61
+
62
+ :root {
63
+ --primary: 262 83% 58%; /* HSL channels โ€” makes everything primary purple */
64
+ --radius-xl: 0.75rem;
65
+ }
66
+ ```
67
+
68
+ Dark is the default; add `data-theme="light"` on `<html>` (or use the exported
69
+ `toggleTheme()` / `<ThemeToggle />`) for the light palette.
70
+
71
+ ### Themes
72
+
73
+ A **theme** is a full color palette (all 15 tokens, dark + light). A4ui ships
74
+ several โ€” `space` (the default), `dino`, `doctor`, `scientist`, `soccer` โ€” and
75
+ you can swap them at runtime; the whole UI recolors instantly and the choice is
76
+ remembered:
77
+
78
+ ```tsx
79
+ import { initTheme, selectTheme, themes } from '@a4ui/core'
80
+
81
+ initTheme() // once at startup โ€” restores the saved theme (or Space)
82
+ selectTheme('dino') // switch by name; also accepts a ThemeDefinition
83
+ ```
84
+
85
+ Build your own in the **[docs](https://a4uikit.github.io/a4ui/)** โ€” open the โš™๏ธŽ
86
+ theme-settings drawer (top bar), pick a color for any token and the whole site
87
+ recolors live, then copy the exported CSS or JSON and apply it as a
88
+ `ThemeDefinition`. This is separate from the light/dark `setTheme`/`toggleTheme`
89
+ mode switch โ€” a theme recolors underneath either mode.
90
+
91
+ ## Server rendering
92
+
93
+ A4ui is **client-first** โ€” the components render in the browser (the glass,
94
+ starfield and theme rely on the DOM/`localStorage`). Importing the package is
95
+ SSR-safe (no crash at import), but for **SolidStart** render the components on the
96
+ client, e.g. via `clientOnly(() => import('...'))`.
97
+
51
98
  ## What's inside
52
99
 
53
100
  ~40 components across actions, forms, data, overlays, feedback, navigation and
@@ -78,12 +125,16 @@ Drop this into your project's `AGENTS.md` / `CLAUDE.md` to prime your agent:
78
125
 
79
126
  ```bash
80
127
  npm install
81
- npm run build # library build (ESM + .d.ts)
82
128
  npm run preview # docs site (dev server)
83
129
  npm run typecheck
84
- npm test # Playwright suite (render + behavior, desktop + mobile)
130
+ npm run lint # ESLint ยท npm run format to auto-format
131
+ npm run test:unit # Vitest โ€” helper unit tests
132
+ npm test # Playwright โ€” docs render + behavior (desktop + mobile)
133
+ npm run build # library build (ESM + .d.ts + styles.css)
85
134
  ```
86
135
 
136
+ See **[CONTRIBUTING.md](./CONTRIBUTING.md)** and **[AGENTS.md](./AGENTS.md)**.
137
+
87
138
  ## License
88
139
 
89
140
  [MIT](./LICENSE) ยฉ Luis Alfredo Rivera Acuรฑa
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const A4UI_VERSION = "0.0.0";
1
+ export declare const A4UI_VERSION = "0.4.0";
2
2
  export { cn } from './lib/cn';
3
3
  export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
4
4
  export { useEffects, isCalm, setEffects } from './lib/effects';
@@ -48,6 +48,8 @@ export { ContextMenu, type ContextMenuItem } from './ui/ContextMenu';
48
48
  export { Combobox } from './ui/Combobox';
49
49
  export { AppShell } from './layout/AppShell';
50
50
  export { SpaceBackground } from './layout/SpaceBackground';
51
+ export { ThemedScenery, type ThemedSceneryProps } from './layout/ThemedScenery';
51
52
  export { ThemeToggle } from './layout/ThemeToggle';
52
53
  export { EffectsToggle } from './layout/EffectsToggle';
53
54
  export { NavGroup } from './layout/NavGroup';
55
+ export { themes, space, dino, doctor, scientist, soccer, activeTheme, selectTheme, applyThemeDefinition, initTheme, themeToCss, themeToJson, TOKEN_ORDER, type ThemeDefinition, type Palette, } from './themes';