@sckyzo/cosmos-react 0.0.3 → 0.2.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 (9) hide show
  1. package/CHANGELOG.md +72 -0
  2. package/README.md +43 -2
  3. package/dist/index.cjs +1323 -476
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.cts +357 -68
  6. package/dist/index.d.ts +357 -68
  7. package/dist/index.js +1316 -477
  8. package/dist/index.js.map +1 -1
  9. package/package.json +18 -16
package/CHANGELOG.md CHANGED
@@ -5,6 +5,78 @@ All notable changes to `@sckyzo/cosmos-react` are documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [0.2.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-react@0.1.0...@sckyzo/cosmos-react@0.2.0) (2026-10-21)
9
+
10
+
11
+ ### ⚠ BREAKING CHANGES
12
+
13
+ * **react:** remove the unused PageCard
14
+
15
+ ### Features
16
+
17
+ * **react:** add a built-in collapse button to Sidebar ([3c0a686](https://github.com/SckyzO/cosmos/commit/3c0a686c31995ac740e310228ed3a4395851818a)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
18
+ * **react:** add a comfortable density to DataTable ([1b373b8](https://github.com/SckyzO/cosmos/commit/1b373b8a0bddee77443ea4b546bbc11028de571d)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
19
+ * **react:** add a folder variant to Tabs ([120883f](https://github.com/SckyzO/cosmos/commit/120883f9c1357a4f40996a4b4cffd172c9bd3fd4)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
20
+ * **react:** add a title line to Tooltip ([d0b9cf8](https://github.com/SckyzO/cosmos/commit/d0b9cf85b584fafe2026fa55aa05b37428dfc435)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
21
+ * **react:** add an alternating Timeline variant ([f2e177a](https://github.com/SckyzO/cosmos/commit/f2e177a584281022a25ce36529bd2d0890792b28)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
22
+ * **react:** add arrow and delay props to Tooltip ([8c8f010](https://github.com/SckyzO/cosmos/commit/8c8f010908a19cc8a7c1daca7adffae56abe9fdb)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
23
+ * **react:** add EventCalendar month view ([35d0972](https://github.com/SckyzO/cosmos/commit/35d097276b9cbdb7a4fb2deb1207880c4b97c6ae)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
24
+ * **react:** add font and text size pickers to AppearanceSettings ([54c19e6](https://github.com/SckyzO/cosmos/commit/54c19e681b16a6cf6355f040c0aa4a120af92dad)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
25
+ * **react:** add font and text size to applyAppearance ([91274a4](https://github.com/SckyzO/cosmos/commit/91274a48dd1a590b41b91fcc09b571b368a03024)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
26
+ * **react:** add group and meta fields to Timeline items ([10d3ad4](https://github.com/SckyzO/cosmos/commit/10d3ad4d0101e51ca4f92a3a480803fb78a5201a)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
27
+ * **react:** add success, warning and danger Tooltip variants ([efb3d2c](https://github.com/SckyzO/cosmos/commit/efb3d2c659837eb38e47c459ab44398cddb346af)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
28
+ * **react:** let CodeBlock take a highlight function ([8ca9d7d](https://github.com/SckyzO/cosmos/commit/8ca9d7d4b7e40d10d4fb7128770f70b952ef4933))
29
+ * **react:** let Shell put the collapse control in the sidebar ([5b2e820](https://github.com/SckyzO/cosmos/commit/5b2e8208a4ddba03ac5fa9e1dc2d62eb66491141)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
30
+ * **react:** nest Sidebar sub-menus and indent them automatically ([478b553](https://github.com/SckyzO/cosmos/commit/478b553f2202d32be282c434b01f7cc23f8dd726)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
31
+ * **react:** open collapsed Sidebar sub-menus in a side panel ([51fe834](https://github.com/SckyzO/cosmos/commit/51fe834574686b71cff0e51cb2fac91eedeb933e)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
32
+ * **react:** show keyboard shortcuts in Tooltip ([a3b8e32](https://github.com/SckyzO/cosmos/commit/a3b8e32077f709a1f6debf196c813683665c363d)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
33
+
34
+
35
+ ### Bug Fixes
36
+
37
+ * **react:** draw the Navbar menu button focus ring in the accent colour ([73171ef](https://github.com/SckyzO/cosmos/commit/73171efbe804c24d46dddd86eccadda6de93d3a3)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
38
+ * **react:** drop the straight divider between Stepper panels ([3f0aa26](https://github.com/SckyzO/cosmos/commit/3f0aa267b84f2bd95cd5853cedbd878fc52a5d39)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
39
+ * **react:** focus OtpInput on mount without scrolling the page ([5be2f51](https://github.com/SckyzO/cosmos/commit/5be2f5159e217588451c6a123615a89f896bdc3c)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
40
+ * **react:** give the dark Navbar its own text colour ([99f3fca](https://github.com/SckyzO/cosmos/commit/99f3fcaaa2e84168fa97e2a25845f854ad9570e4)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
41
+ * **react:** give the light Navbar menu button dark-theme colours ([63ecfb3](https://github.com/SckyzO/cosmos/commit/63ecfb39355c37a46d113c6b17cc7f8e47418a6a)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
42
+ * **react:** keep ContentStackedList meta items on one line ([54c53b6](https://github.com/SckyzO/cosmos/commit/54c53b648f13042c3a29529cada28ade045d6d6d)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
43
+ * **react:** keep PageHeader meta icons at full size ([a041e37](https://github.com/SckyzO/cosmos/commit/a041e378a1faf7283fb213a8b0b244813e521896)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
44
+ * **react:** keep StackedList trailing actions above the row link ([fc1b669](https://github.com/SckyzO/cosmos/commit/fc1b6693fbf9aabb60f6f23b37a10bd06f222d56)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
45
+ * **react:** keep the active Navbar item unchanged on hover ([1ae1615](https://github.com/SckyzO/cosmos/commit/1ae1615f461c2d0839b450d56743209144bb5e0e)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
46
+ * **react:** keep the StepperInput arrows inside the control ([2db4de4](https://github.com/SckyzO/cosmos/commit/2db4de49641717b59e02a439fbe5cf34a3a52574))
47
+ * **react:** let Navbar parts inherit the theme of their Navbar ([59df5a6](https://github.com/SckyzO/cosmos/commit/59df5a61db52f7b1c0b27ddce88a05ec03fba9f7)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
48
+ * **react:** let the AppearanceMenu panel scroll on short screens ([8a8a9a3](https://github.com/SckyzO/cosmos/commit/8a8a9a32635cb680ad99a2920848f7330e16e289)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
49
+ * **react:** make the NarrowStackedList header opaque in dark themes ([3b9e8d8](https://github.com/SckyzO/cosmos/commit/3b9e8d80523e4d68e49ac77a6c3e38c918542e43)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
50
+ * **react:** open Tooltip on keyboard focus and close it on Escape ([0e0df6d](https://github.com/SckyzO/cosmos/commit/0e0df6de85b776e5044f6a7ff2d24f51d3d2f75a)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
51
+ * **react:** render NarrowStackedList trailing next to a description ([6702de7](https://github.com/SckyzO/cosmos/commit/6702de7f9fb6c442052de9979f8e25eb0fd15149)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
52
+ * **react:** round the outer corner of each GridList footer action ([b2aa540](https://github.com/SckyzO/cosmos/commit/b2aa540688582a0e77abfaff50caddcb6c4e6f3b)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
53
+ * **react:** show focus on the StepperInput ([05ad9c2](https://github.com/SckyzO/cosmos/commit/05ad9c29c78557116b2ee2c43658f5d328d51c55))
54
+ * **react:** stop circular Buttons from squeezing their icon ([e5f803a](https://github.com/SckyzO/cosmos/commit/e5f803a54d6223a649cee2556e8eaf9a1ee0d946))
55
+ * **react:** wrap PageHeader actions under the title when narrow ([3ea70ff](https://github.com/SckyzO/cosmos/commit/3ea70ffc83a46e898247048c652848e1dda12d2e)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
56
+
57
+
58
+ ### Code Refactoring
59
+
60
+ * **react:** remove the unused PageCard ([b307885](https://github.com/SckyzO/cosmos/commit/b307885d42cb8df9c84a19455d642bf65bf86676)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
61
+
62
+ ## [0.1.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-react@0.0.3...@sckyzo/cosmos-react@0.1.0) (2026-10-20)
63
+
64
+
65
+ ### ⚠ BREAKING CHANGES
66
+
67
+ * **react:** ThemeToggleTri's 'oled' mode is now 'deep-blue' and the oledLabel prop is replaced by deepBlueLabel.
68
+
69
+ ### Features
70
+
71
+ * **react:** add align and aria-label to Popover.Content ([d4c39bd](https://github.com/SckyzO/cosmos/commit/d4c39bd28e9b0e27fadd08f932aa6debbecaff01))
72
+ * **react:** add AppearanceMenu for picking theme and accent in a top bar ([5181ad7](https://github.com/SckyzO/cosmos/commit/5181ad7eb3d06c693fbc602500901536383978a6))
73
+ * **react:** add AppearanceSettings and deep-blue ThemeToggleTri mode ([597f714](https://github.com/SckyzO/cosmos/commit/597f714ba4a22076dd9d11ffeffca222b34d0df6))
74
+
75
+
76
+ ### Bug Fixes
77
+
78
+ * **react:** stretch PaletteCard label rows to the card's height ([de3aba7](https://github.com/SckyzO/cosmos/commit/de3aba7397b0ceb8bb8540e47997fe8ec9168b7f))
79
+
8
80
  ## [0.0.3](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-react@0.0.2...@sckyzo/cosmos-react@0.0.3) (2026-07-17)
9
81
 
10
82
 
package/README.md CHANGED
@@ -14,7 +14,7 @@ pnpm add @sckyzo/cosmos-react @sckyzo/cosmos-theme
14
14
  pnpm add react react-dom # peers, react 19+
15
15
  ```
16
16
 
17
- `@sckyzo/cosmos-theme` carries the CSS (tokens, fonts, light/dark vars). The
17
+ `@sckyzo/cosmos-theme` carries the CSS (tokens, fonts, theme and accent vars). The
18
18
  components render unstyled without it.
19
19
 
20
20
  ## Set up the styles
@@ -33,7 +33,7 @@ In your main CSS file:
33
33
  The path is relative to this CSS file; adjust the depth to your layout. */
34
34
  @source '../node_modules/@sckyzo/cosmos-react/dist/**/*.{js,cjs}';
35
35
 
36
- /* Cosmos tokens (the @theme block) then the light/dark CSS vars. */
36
+ /* Cosmos tokens (the @theme block) then the theme and accent CSS vars. */
37
37
  @import '@sckyzo/cosmos-theme/tailwind';
38
38
  @import '@sckyzo/cosmos-theme/vars';
39
39
 
@@ -64,6 +64,47 @@ function Example() {
64
64
  }
65
65
  ```
66
66
 
67
+ ## Themes and accents
68
+
69
+ The theme is a class on `<html>`; the accent, the font and the text size are
70
+ the `data-accent`, `data-font` and `data-text-size` attributes, see the
71
+ [theme README](../theme#themes--accents). `AppearanceSettings` renders a picker
72
+ for each, and `applyAppearance` sets them on the document:
73
+
74
+ ```tsx
75
+ import { useEffect, useState } from 'react';
76
+ import { AppearanceSettings, applyAppearance, type CosmosAppearance } from '@sckyzo/cosmos-react';
77
+
78
+ function Appearance() {
79
+ const [appearance, setAppearance] = useState<CosmosAppearance>({
80
+ theme: 'light',
81
+ accent: 'blue',
82
+ font: 'outfit',
83
+ textSize: 'md',
84
+ });
85
+ useEffect(() => applyAppearance(appearance), [appearance]);
86
+ const update = (patch: Partial<CosmosAppearance>) => setAppearance((a) => ({ ...a, ...patch }));
87
+ return (
88
+ <AppearanceSettings
89
+ {...appearance}
90
+ onThemeChange={(theme) => update({ theme })}
91
+ onAccentChange={(accent) => update({ accent })}
92
+ onFontChange={(font) => update({ font })}
93
+ onTextSizeChange={(textSize) => update({ textSize })}
94
+ />
95
+ );
96
+ }
97
+ ```
98
+
99
+ The font and text size groups show only when their handlers are set. Pass
100
+ `fonts` to offer only the fonts whose CSS the app imports
101
+ (`@sckyzo/cosmos-theme/fonts/<name>`).
102
+
103
+ For a top bar, `AppearanceMenu` takes the same props and puts the pickers in a
104
+ panel behind an icon button, for example in `Topbar`'s `rightActions`.
105
+
106
+ Saving the choice (local storage, user profile) is left to the app.
107
+
67
108
  Charts live in a separate package, [`@sckyzo/cosmos-charts`](../charts), so apps
68
109
  that don't render charts don't ship the ApexCharts bundle.
69
110