@cueplusplus/ui 0.7.0 → 0.9.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.
- package/CHANGELOG.md +272 -0
- package/README.md +49 -0
- package/dist/chat/message-list.js +2 -1
- package/dist/configurator/_export.d.ts +1 -1
- package/dist/configurator/_export.js +53 -13
- package/dist/configurator/_overrides.d.ts +25 -6
- package/dist/configurator/_overrides.js +30 -17
- package/dist/configurator/configurator.js +8 -3
- package/dist/configurator/panel-sections.js +43 -13
- package/dist/elements/command-palette.js +1 -1
- package/dist/elements/flow-graph.js +2 -2
- package/dist/elements/markdown.js +1 -1
- package/dist/elements/surfaces.js +4 -3
- package/dist/index.d.ts +5 -2
- package/dist/index.js +2 -1
- package/dist/instruments/_ledger-disclosure.js +103 -0
- package/dist/instruments/_ledger.d.ts +21 -0
- package/dist/instruments/_ledger.js +5 -0
- package/dist/instruments/ledger.d.ts +112 -13
- package/dist/instruments/ledger.js +128 -38
- package/dist/midi/piano-keyboard.js +5 -1
- package/dist/primitives/chip.d.ts +1 -1
- package/dist/styles.css +23 -1
- package/dist/system/density.d.ts +17 -8
- package/dist/system/density.js +39 -16
- package/dist/system/index.d.ts +5 -2
- package/dist/system/index.js +2 -1
- package/dist/system/overrides.d.ts +43 -0
- package/dist/system/overrides.js +238 -0
- package/dist/system/portal.d.ts +4 -2
- package/dist/system/portal.js +34 -3
- package/dist/system/prepaint.d.ts +58 -7
- package/dist/system/prepaint.js +72 -20
- package/dist/system/theme-provider.d.ts +133 -8
- package/dist/system/theme-provider.js +203 -72
- package/dist/system/theme-registry.d.ts +53 -0
- package/dist/system/theme-registry.js +66 -0
- package/dist/system/use-density.d.ts +13 -5
- package/dist/system/use-density.js +142 -13
- package/dist/system/use-theme.d.ts +5 -3
- package/dist/system/use-theme.js +5 -3
- package/dist/system/vocabulary.d.ts +15 -0
- package/dist/system/vocabulary.js +111 -0
- package/dist/theming/contrast.d.ts +2 -122
- package/dist/theming/contrast.js +2 -194
- package/dist/theming/create-theme.d.ts +37 -11
- package/dist/theming/create-theme.js +54 -17
- package/dist/theming/index.d.ts +3 -4
- package/dist/theming/index.js +3 -4
- package/dist/theming/serialize.d.ts +24 -11
- package/dist/theming/serialize.js +16 -18
- package/manifest/components/colors-section.json +2 -3
- package/manifest/components/cue-portal-frame.json +1 -1
- package/manifest/components/data-tree.json +1 -0
- package/manifest/components/density.json +1 -1
- package/manifest/components/export-dialog.json +0 -3
- package/manifest/components/ledger.json +82 -7
- package/manifest/components/preset-section.json +2 -3
- package/manifest/components/shape-section.json +2 -3
- package/manifest/components/theme-configurator.json +0 -3
- package/manifest/components/theme-provider.json +24 -9
- package/manifest/components/token-editor.json +0 -3
- package/manifest/manifest.json +148 -27
- package/manifest/tokens.json +121 -11
- package/package.json +15 -6
- package/dist/theming/_presets.d.ts +0 -11
- package/dist/theming/_presets.js +0 -678
package/manifest/manifest.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 1,
|
|
3
3
|
"library": "@cueplusplus/ui",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.9.0",
|
|
5
5
|
"generatedAt": "1970-01-01T00:00:00.000Z",
|
|
6
6
|
"themes": [
|
|
7
7
|
"cue",
|
|
8
|
-
"terminal",
|
|
9
|
-
"signal",
|
|
10
|
-
"venu",
|
|
11
|
-
"hivehub",
|
|
12
8
|
"dusk",
|
|
9
|
+
"hivehub",
|
|
13
10
|
"luma",
|
|
14
|
-
"
|
|
11
|
+
"quotamate",
|
|
15
12
|
"requestport",
|
|
16
|
-
"
|
|
13
|
+
"signal",
|
|
14
|
+
"snuffle",
|
|
15
|
+
"terminal",
|
|
16
|
+
"venu"
|
|
17
17
|
],
|
|
18
18
|
"densities": [
|
|
19
19
|
"ultra-compact",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
],
|
|
30
30
|
"tokens": {
|
|
31
31
|
"path": "./tokens.json",
|
|
32
|
-
"sha256": "
|
|
32
|
+
"sha256": "9617100824c432bcc25ae23fa602b60493d056a86e8f21bc80a71c5d43ed5c51"
|
|
33
33
|
},
|
|
34
34
|
"systemApis": [
|
|
35
35
|
{
|
|
@@ -57,16 +57,26 @@
|
|
|
57
57
|
"kind": "component",
|
|
58
58
|
"signature": "({ density, children, className, style }: DensityProps): React.JSX.Element"
|
|
59
59
|
},
|
|
60
|
+
{
|
|
61
|
+
"name": "DensityEntry",
|
|
62
|
+
"kind": "type",
|
|
63
|
+
"signature": "DensityEntry"
|
|
64
|
+
},
|
|
60
65
|
{
|
|
61
66
|
"name": "DensityLevel",
|
|
62
67
|
"kind": "type",
|
|
63
|
-
"signature": "
|
|
68
|
+
"signature": "keyof DensityRegistry"
|
|
64
69
|
},
|
|
65
70
|
{
|
|
66
71
|
"name": "DensityProps",
|
|
67
72
|
"kind": "type",
|
|
68
73
|
"signature": "DensityProps"
|
|
69
74
|
},
|
|
75
|
+
{
|
|
76
|
+
"name": "FontEntry",
|
|
77
|
+
"kind": "type",
|
|
78
|
+
"signature": "FontEntry"
|
|
79
|
+
},
|
|
70
80
|
{
|
|
71
81
|
"name": "FontFamilies",
|
|
72
82
|
"kind": "type",
|
|
@@ -75,7 +85,7 @@
|
|
|
75
85
|
{
|
|
76
86
|
"name": "FontName",
|
|
77
87
|
"kind": "type",
|
|
78
|
-
"signature": "
|
|
88
|
+
"signature": "keyof FontRegistry"
|
|
79
89
|
},
|
|
80
90
|
{
|
|
81
91
|
"name": "Mode",
|
|
@@ -112,21 +122,36 @@
|
|
|
112
122
|
"kind": "type",
|
|
113
123
|
"signature": "ThemeContextValue"
|
|
114
124
|
},
|
|
125
|
+
{
|
|
126
|
+
"name": "ThemeManifest",
|
|
127
|
+
"kind": "type",
|
|
128
|
+
"signature": "ThemeManifest"
|
|
129
|
+
},
|
|
115
130
|
{
|
|
116
131
|
"name": "ThemeName",
|
|
117
132
|
"kind": "type",
|
|
118
|
-
"signature": "
|
|
133
|
+
"signature": "string"
|
|
119
134
|
},
|
|
120
135
|
{
|
|
121
136
|
"name": "ThemeProvider",
|
|
122
137
|
"kind": "component",
|
|
123
|
-
"signature": "({ theme: themeProp, density: densityProp, mode: modeProp, font: fontProp, fontScale, fontFamilies, storageKey, persistPreferences, asChild, className, style: styleProp, children, }: ThemeProviderProps): React.JSX.Element"
|
|
138
|
+
"signature": "({ themes: themesProp, theme: themeProp, density: densityProp, mode: modeProp, font: fontProp, fontScale, fontFamilies, overrides, storageKey, persistPreferences, asChild, className, style: styleProp, children, }: ThemeProviderProps): React.JSX.Element"
|
|
124
139
|
},
|
|
125
140
|
{
|
|
126
141
|
"name": "ThemeProviderProps",
|
|
127
142
|
"kind": "type",
|
|
128
143
|
"signature": "ThemeProviderProps"
|
|
129
144
|
},
|
|
145
|
+
{
|
|
146
|
+
"name": "ThemeRegistry",
|
|
147
|
+
"kind": "type",
|
|
148
|
+
"signature": "ThemeRegistry"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"name": "TokenOverrides",
|
|
152
|
+
"kind": "type",
|
|
153
|
+
"signature": "TokenOverrides"
|
|
154
|
+
},
|
|
130
155
|
{
|
|
131
156
|
"name": "useControlHeight",
|
|
132
157
|
"kind": "function",
|
|
@@ -137,15 +162,30 @@
|
|
|
137
162
|
"kind": "function",
|
|
138
163
|
"signature": "(): { container?: HTMLElement; }"
|
|
139
164
|
},
|
|
165
|
+
{
|
|
166
|
+
"name": "useDensities",
|
|
167
|
+
"kind": "function",
|
|
168
|
+
"signature": "(): readonly DensityEntry[]"
|
|
169
|
+
},
|
|
140
170
|
{
|
|
141
171
|
"name": "useDensity",
|
|
142
172
|
"kind": "function",
|
|
143
173
|
"signature": "(): Density"
|
|
144
174
|
},
|
|
175
|
+
{
|
|
176
|
+
"name": "useFonts",
|
|
177
|
+
"kind": "function",
|
|
178
|
+
"signature": "(): readonly FontEntry[]"
|
|
179
|
+
},
|
|
145
180
|
{
|
|
146
181
|
"name": "useTheme",
|
|
147
182
|
"kind": "function",
|
|
148
183
|
"signature": "(): ThemeContextValue"
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"name": "useThemes",
|
|
187
|
+
"kind": "function",
|
|
188
|
+
"signature": "(): readonly ThemeManifest[]"
|
|
149
189
|
}
|
|
150
190
|
],
|
|
151
191
|
"components": [
|
|
@@ -693,7 +733,7 @@
|
|
|
693
733
|
"mdUrl": "/docs/components/colors-section.md",
|
|
694
734
|
"jsonUrl": "/r/components/colors-section.json",
|
|
695
735
|
"path": "./components/colors-section.json",
|
|
696
|
-
"sha256": "
|
|
736
|
+
"sha256": "aee1db0a17dc7b6697bcc48b25ff2b147c64b9ba32b7cd4d928addcfc5caeb47"
|
|
697
737
|
},
|
|
698
738
|
{
|
|
699
739
|
"name": "ExportDialog",
|
|
@@ -706,7 +746,7 @@
|
|
|
706
746
|
"mdUrl": "/docs/components/export-dialog.md",
|
|
707
747
|
"jsonUrl": "/r/components/export-dialog.json",
|
|
708
748
|
"path": "./components/export-dialog.json",
|
|
709
|
-
"sha256": "
|
|
749
|
+
"sha256": "6a688f576d6620bbf2cd245f2025d97d09ff22e085a21318d0d8a2de50cf899d"
|
|
710
750
|
},
|
|
711
751
|
{
|
|
712
752
|
"name": "PresetSection",
|
|
@@ -719,7 +759,7 @@
|
|
|
719
759
|
"mdUrl": "/docs/components/preset-section.md",
|
|
720
760
|
"jsonUrl": "/r/components/preset-section.json",
|
|
721
761
|
"path": "./components/preset-section.json",
|
|
722
|
-
"sha256": "
|
|
762
|
+
"sha256": "c00d2287b050eed89864805225d0ba01def1f6f5c975c86d8d4c7a759e5c26e8"
|
|
723
763
|
},
|
|
724
764
|
{
|
|
725
765
|
"name": "ShapeSection",
|
|
@@ -732,7 +772,7 @@
|
|
|
732
772
|
"mdUrl": "/docs/components/shape-section.md",
|
|
733
773
|
"jsonUrl": "/r/components/shape-section.json",
|
|
734
774
|
"path": "./components/shape-section.json",
|
|
735
|
-
"sha256": "
|
|
775
|
+
"sha256": "3655d6e1fc61d5e3bbbeff060e81d6eb7aed5525a9c59587198c260d241680eb"
|
|
736
776
|
},
|
|
737
777
|
{
|
|
738
778
|
"name": "ThemeConfigurator",
|
|
@@ -745,7 +785,7 @@
|
|
|
745
785
|
"mdUrl": "/docs/components/theme-configurator.md",
|
|
746
786
|
"jsonUrl": "/r/components/theme-configurator.json",
|
|
747
787
|
"path": "./components/theme-configurator.json",
|
|
748
|
-
"sha256": "
|
|
788
|
+
"sha256": "c359cd0ddd65a4500e701618468b91f8fd8bf9f737ae3438d11fdb1ca39a62a7"
|
|
749
789
|
},
|
|
750
790
|
{
|
|
751
791
|
"name": "TokenEditor",
|
|
@@ -758,7 +798,7 @@
|
|
|
758
798
|
"mdUrl": "/docs/components/token-editor.md",
|
|
759
799
|
"jsonUrl": "/r/components/token-editor.json",
|
|
760
800
|
"path": "./components/token-editor.json",
|
|
761
|
-
"sha256": "
|
|
801
|
+
"sha256": "7ae4f105d7118a1e543c6c5dbbd75539dba1e6de298ffb49ee4bca8817844fa1"
|
|
762
802
|
},
|
|
763
803
|
{
|
|
764
804
|
"name": "Calendar",
|
|
@@ -3501,7 +3541,7 @@
|
|
|
3501
3541
|
"mdUrl": "/docs/components/data-tree.md",
|
|
3502
3542
|
"jsonUrl": "/r/components/data-tree.json",
|
|
3503
3543
|
"path": "./components/data-tree.json",
|
|
3504
|
-
"sha256": "
|
|
3544
|
+
"sha256": "3e68587c9fde809009a4a9661636a7b64dbe72b519cde4d6093bd36996106bdf"
|
|
3505
3545
|
},
|
|
3506
3546
|
{
|
|
3507
3547
|
"name": "GroupBar",
|
|
@@ -3521,13 +3561,13 @@
|
|
|
3521
3561
|
"slug": "ledger",
|
|
3522
3562
|
"group": "instruments",
|
|
3523
3563
|
"importPath": "@cueplusplus/ui",
|
|
3524
|
-
"summary": "Grouped dense rows under sticky tier headings and gutter slugs, with
|
|
3564
|
+
"summary": "Grouped dense rows under sticky tier headings and gutter slugs, with an opt-in disclosure that folds a heading without leaving the outline.",
|
|
3525
3565
|
"status": "stable",
|
|
3526
3566
|
"url": "/docs/components/ledger",
|
|
3527
3567
|
"mdUrl": "/docs/components/ledger.md",
|
|
3528
3568
|
"jsonUrl": "/r/components/ledger.json",
|
|
3529
3569
|
"path": "./components/ledger.json",
|
|
3530
|
-
"sha256": "
|
|
3570
|
+
"sha256": "52cc7f45dbf809e5be6eb04fc2420038143ee199d4f8bef29033d78197c20da6"
|
|
3531
3571
|
},
|
|
3532
3572
|
{
|
|
3533
3573
|
"name": "LogViewer",
|
|
@@ -4281,7 +4321,7 @@
|
|
|
4281
4321
|
"mdUrl": "/docs/components/cue-portal-frame.md",
|
|
4282
4322
|
"jsonUrl": "/r/components/cue-portal-frame.json",
|
|
4283
4323
|
"path": "./components/cue-portal-frame.json",
|
|
4284
|
-
"sha256": "
|
|
4324
|
+
"sha256": "95735c67da860ba0026b836e39652b400a185f9be5c5f21fdbd686c46de70b52"
|
|
4285
4325
|
},
|
|
4286
4326
|
{
|
|
4287
4327
|
"name": "Density",
|
|
@@ -4294,7 +4334,7 @@
|
|
|
4294
4334
|
"mdUrl": "/docs/components/density.md",
|
|
4295
4335
|
"jsonUrl": "/r/components/density.json",
|
|
4296
4336
|
"path": "./components/density.json",
|
|
4297
|
-
"sha256": "
|
|
4337
|
+
"sha256": "2f715ec155cee6f6d2258b6a42daf16df96f8648dda8d5036271a5903e53f128"
|
|
4298
4338
|
},
|
|
4299
4339
|
{
|
|
4300
4340
|
"name": "ThemeProvider",
|
|
@@ -4307,7 +4347,7 @@
|
|
|
4307
4347
|
"mdUrl": "/docs/components/theme-provider.md",
|
|
4308
4348
|
"jsonUrl": "/r/components/theme-provider.json",
|
|
4309
4349
|
"path": "./components/theme-provider.json",
|
|
4310
|
-
"sha256": "
|
|
4350
|
+
"sha256": "f71351ef200988435f92e7a540ecfb5cde1d68dd89b06936c6e08f5582818c1f"
|
|
4311
4351
|
}
|
|
4312
4352
|
],
|
|
4313
4353
|
"hooks": [
|
|
@@ -4708,7 +4748,7 @@
|
|
|
4708
4748
|
"importPath": "@cueplusplus/ui",
|
|
4709
4749
|
"peerDependencies": [],
|
|
4710
4750
|
"clientOnly": true,
|
|
4711
|
-
"description": "The pixel height of a control at the ambient density — what a virtualiser or a\ncanvas renderer needs when it cannot ask CSS.\n\nMeasured from a throwaway `document.body` probe stamped with the ambient\ndensity
|
|
4751
|
+
"description": "The pixel height of a control at the ambient density — what a virtualiser or a\ncanvas renderer needs when it cannot ask CSS.\n\nMeasured from a throwaway `document.body` probe stamped with the ambient\ndensity *and the ambient theme*, so app-wide token overrides, the `@media\n(pointer: coarse)` re-raise of `ultra-compact`, and a rung a theme adds are\nall honoured. Overrides scoped to a subtree the probe is not in are still\nnot: the probe hangs off `document.body`, outside every provider root.\n\nFalls back to the authored ladder × 16px during SSR and before the first\nlayout effect, which keeps hydration stable. A rung the ambient theme does\nnot declare falls back to the default ladder with a development warning\nrather than throwing — the probe corrects it on the next tick either way.\n\nSafe outside a `<ThemeProvider>`: it reads the theme and the registry from\ncontext directly instead of through `useTheme()`, which throws.",
|
|
4712
4752
|
"signature": "(size?: ControlSize): number",
|
|
4713
4753
|
"params": [
|
|
4714
4754
|
{
|
|
@@ -4740,7 +4780,7 @@
|
|
|
4740
4780
|
"importPath": "@cueplusplus/ui",
|
|
4741
4781
|
"peerDependencies": [],
|
|
4742
4782
|
"clientOnly": true,
|
|
4743
|
-
"description": "Props to spread onto a Base UI `Portal` part so the portal root inherits the\ncaller's theme, density, font pairing and mode.\n\nReturns a `container` element appended to `document.body` and stamped with\n`data-theme` / `data-density` / `data-font` / `data-mode` (plus\n`--cue-font-scale`) copied from the nearest provider and density island, and\nwith `data-cue-skin` / `data-cue-fidelity` when the caller sits inside an\n`AgentSurface` island. The container is\n`display: contents`, so it changes no layout and creates no containing block —\nfixed-position overlay content behaves exactly as if it were a direct child of\n`<body>`.\n\nBefore the container exists (server render, first client render) the object is\nempty, which leaves the Base UI default (`document.body`) in place.\n\nEvery overlay in this system spreads this. It is the single fix for the\nnested-density portal bug (spec §6).",
|
|
4783
|
+
"description": "Props to spread onto a Base UI `Portal` part so the portal root inherits the\ncaller's theme, density, font pairing and mode.\n\nReturns a `container` element appended to `document.body` and stamped with\n`data-theme` / `data-density` / `data-font` / `data-mode` (plus\n`--cue-font-scale` and any `ThemeProvider` `overrides` colour or font\nproperty) copied from the nearest provider and density island, and\nwith `data-cue-skin` / `data-cue-fidelity` when the caller sits inside an\n`AgentSurface` island. The container is\n`display: contents`, so it changes no layout and creates no containing block —\nfixed-position overlay content behaves exactly as if it were a direct child of\n`<body>`.\n\nBefore the container exists (server render, first client render) the object is\nempty, which leaves the Base UI default (`document.body`) in place.\n\nEvery overlay in this system spreads this. It is the single fix for the\nnested-density portal bug (spec §6).",
|
|
4744
4784
|
"signature": "(): { container?: HTMLElement; }",
|
|
4745
4785
|
"params": [],
|
|
4746
4786
|
"returns": "`{ container }` once mounted, `{}` otherwise.",
|
|
@@ -4760,6 +4800,33 @@
|
|
|
4760
4800
|
"url": "/docs/components/use-cue-portal-props",
|
|
4761
4801
|
"mdUrl": "/docs/components/use-cue-portal-props.md"
|
|
4762
4802
|
},
|
|
4803
|
+
{
|
|
4804
|
+
"name": "useDensities",
|
|
4805
|
+
"slug": "use-densities",
|
|
4806
|
+
"group": "system",
|
|
4807
|
+
"importPath": "@cueplusplus/ui",
|
|
4808
|
+
"peerDependencies": [],
|
|
4809
|
+
"clientOnly": true,
|
|
4810
|
+
"description": "The rungs an app may offer right now: the base five, then the ACTIVE theme's\nadditions.\n\nActive, not registered: a rung a theme adds is emitted under that theme's\n`[data-theme]`, so offering another theme's rung would offer a control that\nchanges nothing. Switch theme and this list changes with it.",
|
|
4811
|
+
"signature": "(): readonly DensityEntry[]",
|
|
4812
|
+
"params": [],
|
|
4813
|
+
"returns": "",
|
|
4814
|
+
"throws": "If called outside a `<ThemeProvider>`.",
|
|
4815
|
+
"summary": "The rungs an app may offer right now: the base five, then the ACTIVE theme's additions.",
|
|
4816
|
+
"examples": [
|
|
4817
|
+
{
|
|
4818
|
+
"title": "Usage",
|
|
4819
|
+
"code": "const rungs = useDensities();\nconst { density, setDensity } = useTheme();\n<Select\n items={rungs.map((d) => ({ value: d.name, label: d.name }))}\n value={density}\n onValueChange={setDensity}\n/>",
|
|
4820
|
+
"language": "tsx"
|
|
4821
|
+
}
|
|
4822
|
+
],
|
|
4823
|
+
"whenToUse": [],
|
|
4824
|
+
"whenNotToUse": [],
|
|
4825
|
+
"commonMistakes": [],
|
|
4826
|
+
"status": "stable",
|
|
4827
|
+
"url": "/docs/components/use-densities",
|
|
4828
|
+
"mdUrl": "/docs/components/use-densities.md"
|
|
4829
|
+
},
|
|
4763
4830
|
{
|
|
4764
4831
|
"name": "useDensity",
|
|
4765
4832
|
"slug": "use-density",
|
|
@@ -4787,6 +4854,33 @@
|
|
|
4787
4854
|
"url": "/docs/components/use-density",
|
|
4788
4855
|
"mdUrl": "/docs/components/use-density.md"
|
|
4789
4856
|
},
|
|
4857
|
+
{
|
|
4858
|
+
"name": "useFonts",
|
|
4859
|
+
"slug": "use-fonts",
|
|
4860
|
+
"group": "system",
|
|
4861
|
+
"importPath": "@cueplusplus/ui",
|
|
4862
|
+
"peerDependencies": [],
|
|
4863
|
+
"clientOnly": true,
|
|
4864
|
+
"description": "The font pairings, by the same rule: the base eight, then the active theme's.",
|
|
4865
|
+
"signature": "(): readonly FontEntry[]",
|
|
4866
|
+
"params": [],
|
|
4867
|
+
"returns": "",
|
|
4868
|
+
"throws": "If called outside a `<ThemeProvider>`.",
|
|
4869
|
+
"summary": "The font pairings, by the same rule: the base eight, then the active theme's.",
|
|
4870
|
+
"examples": [
|
|
4871
|
+
{
|
|
4872
|
+
"title": "Usage",
|
|
4873
|
+
"code": "// The stacks a pairing resolves to, for a specimen that renders its own row.\nconst { font } = useTheme();\nconst sans = useFonts().find((f) => f.name === font)?.stacks[\"font-sans\"];",
|
|
4874
|
+
"language": "tsx"
|
|
4875
|
+
}
|
|
4876
|
+
],
|
|
4877
|
+
"whenToUse": [],
|
|
4878
|
+
"whenNotToUse": [],
|
|
4879
|
+
"commonMistakes": [],
|
|
4880
|
+
"status": "stable",
|
|
4881
|
+
"url": "/docs/components/use-fonts",
|
|
4882
|
+
"mdUrl": "/docs/components/use-fonts.md"
|
|
4883
|
+
},
|
|
4790
4884
|
{
|
|
4791
4885
|
"name": "useTheme",
|
|
4792
4886
|
"slug": "use-theme",
|
|
@@ -4794,7 +4888,7 @@
|
|
|
4794
4888
|
"importPath": "@cueplusplus/ui",
|
|
4795
4889
|
"peerDependencies": [],
|
|
4796
4890
|
"clientOnly": true,
|
|
4797
|
-
"description": "Read and drive the ambient theme state.\n\nReturns `{ theme, density, mode, font, resolvedMode, setTheme,
|
|
4891
|
+
"description": "Read and drive the ambient theme state.\n\nReturns `{ theme, manifest, density, mode, font, resolvedMode, setTheme,\nsetDensity, setMode, setFont }`.\n`density` here is the *provider's* level — a nested `<Density>` island does not\nchange it; use `useDensity()` when you want the level that actually applies\nwhere you are. `font` is the pairing the provider holds; it has no island, so\nit is always the one in force. `manifest` is the active theme's, or `null`\nwhen that name is not in the provider's `themes` — which is every name in an\napp that has registered none; `useThemes()` is what was registered.",
|
|
4798
4892
|
"signature": "(): ThemeContextValue",
|
|
4799
4893
|
"params": [],
|
|
4800
4894
|
"returns": "",
|
|
@@ -4813,6 +4907,33 @@
|
|
|
4813
4907
|
"status": "stable",
|
|
4814
4908
|
"url": "/docs/components/use-theme",
|
|
4815
4909
|
"mdUrl": "/docs/components/use-theme.md"
|
|
4910
|
+
},
|
|
4911
|
+
{
|
|
4912
|
+
"name": "useThemes",
|
|
4913
|
+
"slug": "use-themes",
|
|
4914
|
+
"group": "system",
|
|
4915
|
+
"importPath": "@cueplusplus/ui",
|
|
4916
|
+
"peerDependencies": [],
|
|
4917
|
+
"clientOnly": true,
|
|
4918
|
+
"description": "Every registered manifest, in registration order.\n\nThe array a picker enumerates. It is the `themes` prop the nearest provider\nwas handed, not a copy: registration is an application decision, and this\nlibrary never discovers a theme by itself.",
|
|
4919
|
+
"signature": "(): readonly ThemeManifest[]",
|
|
4920
|
+
"params": [],
|
|
4921
|
+
"returns": "",
|
|
4922
|
+
"throws": "If called outside a `<ThemeProvider>`, like `useTheme()`.",
|
|
4923
|
+
"summary": "Every registered manifest, in registration order.",
|
|
4924
|
+
"examples": [
|
|
4925
|
+
{
|
|
4926
|
+
"title": "Usage",
|
|
4927
|
+
"code": "const themes = useThemes();\nconst { theme, setTheme } = useTheme();\nreturn themes.map((m) => (\n <Chip key={m.name} selected={m.name === theme} onClick={() => setTheme(m.name)}>\n {m.name}\n </Chip>\n));",
|
|
4928
|
+
"language": "tsx"
|
|
4929
|
+
}
|
|
4930
|
+
],
|
|
4931
|
+
"whenToUse": [],
|
|
4932
|
+
"whenNotToUse": [],
|
|
4933
|
+
"commonMistakes": [],
|
|
4934
|
+
"status": "stable",
|
|
4935
|
+
"url": "/docs/components/use-themes",
|
|
4936
|
+
"mdUrl": "/docs/components/use-themes.md"
|
|
4816
4937
|
}
|
|
4817
4938
|
]
|
|
4818
4939
|
}
|
package/manifest/tokens.json
CHANGED
|
@@ -1,18 +1,128 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": 1,
|
|
3
3
|
"library": "@cueplusplus/tokens",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.9.0",
|
|
5
5
|
"themes": [
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
6
|
+
{
|
|
7
|
+
"name": "cue",
|
|
8
|
+
"package": "@cueplusplus/theme-cue",
|
|
9
|
+
"supportsLight": true,
|
|
10
|
+
"densities": [
|
|
11
|
+
"ultra-compact",
|
|
12
|
+
"compact",
|
|
13
|
+
"normal",
|
|
14
|
+
"large",
|
|
15
|
+
"ultra-large"
|
|
16
|
+
]
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "dusk",
|
|
20
|
+
"package": "@cueplusplus/theme-dusk",
|
|
21
|
+
"supportsLight": true,
|
|
22
|
+
"densities": [
|
|
23
|
+
"ultra-compact",
|
|
24
|
+
"compact",
|
|
25
|
+
"normal",
|
|
26
|
+
"large",
|
|
27
|
+
"ultra-large"
|
|
28
|
+
]
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"name": "hivehub",
|
|
32
|
+
"package": "@cueplusplus/theme-hivehub",
|
|
33
|
+
"supportsLight": true,
|
|
34
|
+
"densities": [
|
|
35
|
+
"ultra-compact",
|
|
36
|
+
"compact",
|
|
37
|
+
"normal",
|
|
38
|
+
"large",
|
|
39
|
+
"ultra-large"
|
|
40
|
+
]
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"name": "luma",
|
|
44
|
+
"package": "@cueplusplus/theme-luma",
|
|
45
|
+
"supportsLight": true,
|
|
46
|
+
"densities": [
|
|
47
|
+
"ultra-compact",
|
|
48
|
+
"compact",
|
|
49
|
+
"normal",
|
|
50
|
+
"large",
|
|
51
|
+
"ultra-large"
|
|
52
|
+
]
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "quotamate",
|
|
56
|
+
"package": "@cueplusplus/theme-quotamate",
|
|
57
|
+
"supportsLight": true,
|
|
58
|
+
"densities": [
|
|
59
|
+
"ultra-compact",
|
|
60
|
+
"compact",
|
|
61
|
+
"normal",
|
|
62
|
+
"large",
|
|
63
|
+
"ultra-large"
|
|
64
|
+
]
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"name": "requestport",
|
|
68
|
+
"package": "@cueplusplus/theme-requestport",
|
|
69
|
+
"supportsLight": true,
|
|
70
|
+
"densities": [
|
|
71
|
+
"ultra-compact",
|
|
72
|
+
"compact",
|
|
73
|
+
"normal",
|
|
74
|
+
"large",
|
|
75
|
+
"ultra-large"
|
|
76
|
+
]
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": "signal",
|
|
80
|
+
"package": "@cueplusplus/theme-signal",
|
|
81
|
+
"supportsLight": true,
|
|
82
|
+
"densities": [
|
|
83
|
+
"ultra-compact",
|
|
84
|
+
"compact",
|
|
85
|
+
"normal",
|
|
86
|
+
"large",
|
|
87
|
+
"ultra-large"
|
|
88
|
+
]
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"name": "snuffle",
|
|
92
|
+
"package": "@cueplusplus/theme-snuffle",
|
|
93
|
+
"supportsLight": true,
|
|
94
|
+
"densities": [
|
|
95
|
+
"ultra-compact",
|
|
96
|
+
"compact",
|
|
97
|
+
"normal",
|
|
98
|
+
"large",
|
|
99
|
+
"ultra-large"
|
|
100
|
+
]
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"name": "terminal",
|
|
104
|
+
"package": "@cueplusplus/theme-terminal",
|
|
105
|
+
"supportsLight": true,
|
|
106
|
+
"densities": [
|
|
107
|
+
"ultra-compact",
|
|
108
|
+
"compact",
|
|
109
|
+
"normal",
|
|
110
|
+
"large",
|
|
111
|
+
"ultra-large"
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"name": "venu",
|
|
116
|
+
"package": "@cueplusplus/theme-venu",
|
|
117
|
+
"supportsLight": true,
|
|
118
|
+
"densities": [
|
|
119
|
+
"ultra-compact",
|
|
120
|
+
"compact",
|
|
121
|
+
"normal",
|
|
122
|
+
"large",
|
|
123
|
+
"ultra-large"
|
|
124
|
+
]
|
|
125
|
+
}
|
|
16
126
|
],
|
|
17
127
|
"densities": [
|
|
18
128
|
"ultra-compact",
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cueplusplus/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "CUE++ design system components: Tailwind v4 styled wrappers over Base UI, driven by @cueplusplus/tokens.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
|
-
"url": "https://github.com/cueplusplus/product-design-system"
|
|
9
|
+
"url": "https://github.com/cueplusplus/product-design-system",
|
|
10
|
+
"directory": "packages/ui"
|
|
10
11
|
},
|
|
11
12
|
"publishConfig": {
|
|
12
13
|
"registry": "https://registry.npmjs.org"
|
|
@@ -134,13 +135,15 @@
|
|
|
134
135
|
"files": [
|
|
135
136
|
"dist",
|
|
136
137
|
"manifest",
|
|
138
|
+
"README.md",
|
|
137
139
|
"CHANGELOG.md"
|
|
138
140
|
],
|
|
139
141
|
"dependencies": {
|
|
140
142
|
"clsx": "^2.1.1",
|
|
141
143
|
"culori": "^4.0.2",
|
|
142
144
|
"tailwind-merge": "^3.6.0",
|
|
143
|
-
"@cueplusplus/
|
|
145
|
+
"@cueplusplus/theme-base": "^1.0.0",
|
|
146
|
+
"@cueplusplus/tokens": "0.9.0"
|
|
144
147
|
},
|
|
145
148
|
"peerDependencies": {
|
|
146
149
|
"@assistant-ui/react": "^0.15.16",
|
|
@@ -237,6 +240,7 @@
|
|
|
237
240
|
"anser": "^2.3.5",
|
|
238
241
|
"date-fns": "^4.4.0",
|
|
239
242
|
"embla-carousel-react": "^8.6.0",
|
|
243
|
+
"eslint": "^9.17.0",
|
|
240
244
|
"heat-graph": "^0.0.15",
|
|
241
245
|
"jsdom": "^30.0.1",
|
|
242
246
|
"lucide-react": "^1.31.0",
|
|
@@ -253,14 +257,19 @@
|
|
|
253
257
|
"tsdown": "0.22.14",
|
|
254
258
|
"typescript": "^5.7.0",
|
|
255
259
|
"vitest": "^4.1.10",
|
|
260
|
+
"@repo/docgen": "0.0.0",
|
|
261
|
+
"@cueplusplus/theme-tools": "1.0.0",
|
|
256
262
|
"@repo/typescript-config": "0.0.0",
|
|
257
|
-
"@repo/
|
|
263
|
+
"@repo/eslint-config": "0.0.0"
|
|
258
264
|
},
|
|
259
265
|
"scripts": {
|
|
260
266
|
"build": "pnpm run check:manifest && tsdown",
|
|
261
|
-
"manifest": "node ../docgen/dist/package-manifest-cli.mjs",
|
|
262
267
|
"check:manifest": "node ../docgen/dist/package-manifest-cli.mjs --check",
|
|
268
|
+
"check:publish": "pnpm run check:manifest && publint && attw --pack .",
|
|
269
|
+
"lint": "eslint . --max-warnings 0",
|
|
270
|
+
"manifest": "node ../docgen/dist/package-manifest-cli.mjs",
|
|
263
271
|
"test": "vitest run",
|
|
264
|
-
"
|
|
272
|
+
"test:fixtures": "node ../theme-tools/dist/cli.mjs build --config test/fixtures/theme-foo.config.ts --out test/fixtures/theme-foo && rm test/fixtures/theme-foo/index.js test/fixtures/theme-foo/index.d.ts",
|
|
273
|
+
"typecheck": "tsc --noEmit"
|
|
265
274
|
}
|
|
266
275
|
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Density, ThemeName } from "@cueplusplus/tokens";
|
|
2
|
-
//#region src/theming/_presets.d.ts
|
|
3
|
-
/**
|
|
4
|
-
* The colour tokens every theme block declares, in the order the tokens build
|
|
5
|
-
* emits them. A generated theme is complete exactly when it covers this list.
|
|
6
|
-
*/
|
|
7
|
-
declare const THEME_COLOR_TOKENS: readonly ["bg", "sunken", "surface-1", "surface-2", "surface-3", "fg", "fg-muted", "fg-subtle", "border", "border-strong", "border-overlay", "accent", "accent-hover", "accent-fg", "ok", "busy", "warn", "warn-fg", "danger", "danger-fg", "info", "stream", "selection", "focus", "data-ground", "scrim"];
|
|
8
|
-
/** One of the colour tokens a theme block owns. */
|
|
9
|
-
type ThemeColorToken = (typeof THEME_COLOR_TOKENS)[number];
|
|
10
|
-
//#endregion
|
|
11
|
-
export { THEME_COLOR_TOKENS, ThemeColorToken };
|