@cosxai/ui 0.24.0 → 1.0.0-alpha.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 (133) hide show
  1. package/CHANGELOG.md +577 -0
  2. package/NOTICE +11 -0
  3. package/README.md +52 -0
  4. package/package.json +33 -7
  5. package/src/fonts.css +20 -0
  6. package/src/index.ts +8 -25
  7. package/src/lib/cn.ts +23 -6
  8. package/src/styles.css +17 -0
  9. package/src/theme.css +132 -0
  10. package/src/tokens/colors.css +112 -0
  11. package/src/tokens/compat.css +36 -0
  12. package/src/tokens/elevation.css +14 -0
  13. package/src/tokens/motion.css +42 -0
  14. package/src/tokens/spacing.css +55 -0
  15. package/src/tokens/typography-cjk.css +42 -0
  16. package/src/tokens/typography.css +81 -0
  17. package/src/actionbar/ActionBar.tsx +0 -837
  18. package/src/actionbar/ActionBarButton.tsx +0 -111
  19. package/src/actionbar/ActionBarMenuGroup.tsx +0 -116
  20. package/src/actionbar/ActionBarModeHandle.tsx +0 -171
  21. package/src/actionbar/ActionBarProvider.tsx +0 -91
  22. package/src/actionbar/actionbar-context.ts +0 -45
  23. package/src/actionbar/index.ts +0 -28
  24. package/src/actionbar/types.ts +0 -147
  25. package/src/actionbar/useActionBarItems.ts +0 -60
  26. package/src/actionbar/useActionBarMode.ts +0 -144
  27. package/src/actionbar/useActionBarPanel.ts +0 -56
  28. package/src/actionbar/useActionBarStatusDot.ts +0 -49
  29. package/src/actionbar/useActionBarToast.ts +0 -33
  30. package/src/ambient/AmbientBackdrop.tsx +0 -74
  31. package/src/ambient/CommandInput.tsx +0 -107
  32. package/src/ambient/SuperbarStrip.tsx +0 -36
  33. package/src/ambient/index.ts +0 -6
  34. package/src/bento/BentoCell.tsx +0 -66
  35. package/src/bento/BentoGrid.tsx +0 -42
  36. package/src/bento/index.ts +0 -2
  37. package/src/command/CommandPalette.tsx +0 -329
  38. package/src/command/CommandProvider.tsx +0 -57
  39. package/src/command/command-context.ts +0 -12
  40. package/src/command/index.ts +0 -6
  41. package/src/command/rank.ts +0 -50
  42. package/src/command/types.ts +0 -37
  43. package/src/command/useCommandSource.ts +0 -37
  44. package/src/dialogs/DialogsProvider.tsx +0 -216
  45. package/src/dialogs/Modal.tsx +0 -260
  46. package/src/dialogs/Toast.tsx +0 -85
  47. package/src/dialogs/dialogs-context.ts +0 -6
  48. package/src/dialogs/index.ts +0 -10
  49. package/src/dialogs/types.ts +0 -37
  50. package/src/dialogs/useDialogs.ts +0 -8
  51. package/src/editorial/EditorialSpotlight.tsx +0 -63
  52. package/src/editorial/Folio.tsx +0 -52
  53. package/src/editorial/PlateMarker.tsx +0 -33
  54. package/src/editorial/RomanSection.tsx +0 -65
  55. package/src/editorial/RunningMarginalia.tsx +0 -65
  56. package/src/editorial/index.ts +0 -10
  57. package/src/hooks/index.ts +0 -5
  58. package/src/hooks/useKeyboardHotkey.ts +0 -93
  59. package/src/hooks/useReducedMotion.ts +0 -20
  60. package/src/hooks/useViewport.ts +0 -61
  61. package/src/layout/Breadcrumb.tsx +0 -74
  62. package/src/layout/LeftNavRail.tsx +0 -139
  63. package/src/layout/MobileTabBar.tsx +0 -101
  64. package/src/layout/NavItem.tsx +0 -128
  65. package/src/layout/NavSearchTrigger.tsx +0 -88
  66. package/src/layout/NavSection.tsx +0 -40
  67. package/src/layout/RightSidebarPanel.tsx +0 -111
  68. package/src/layout/Shell.tsx +0 -91
  69. package/src/layout/SidePanel.tsx +0 -316
  70. package/src/layout/StickyBanner.tsx +0 -83
  71. package/src/layout/Topbar.tsx +0 -68
  72. package/src/layout/index.ts +0 -24
  73. package/src/layout/useNavRailState.ts +0 -69
  74. package/src/lib/time-utils.ts +0 -44
  75. package/src/neobrutalism/Marquee.tsx +0 -81
  76. package/src/neobrutalism/Sticker.tsx +0 -71
  77. package/src/neobrutalism/index.ts +0 -4
  78. package/src/primitives/Avatar.tsx +0 -53
  79. package/src/primitives/Button.tsx +0 -67
  80. package/src/primitives/Card.tsx +0 -41
  81. package/src/primitives/Checkbox.tsx +0 -87
  82. package/src/primitives/Chip.tsx +0 -177
  83. package/src/primitives/Combobox.tsx +0 -475
  84. package/src/primitives/CopyField.tsx +0 -139
  85. package/src/primitives/CountBadge.tsx +0 -50
  86. package/src/primitives/Input.tsx +0 -161
  87. package/src/primitives/Kbd.tsx +0 -45
  88. package/src/primitives/MentionCombobox.tsx +0 -612
  89. package/src/primitives/MultiCombobox.tsx +0 -179
  90. package/src/primitives/PageHeader.tsx +0 -77
  91. package/src/primitives/Radio.tsx +0 -131
  92. package/src/primitives/SegmentedControl.tsx +0 -135
  93. package/src/primitives/Select.tsx +0 -779
  94. package/src/primitives/SignaturePad.tsx +0 -461
  95. package/src/primitives/Tag.tsx +0 -56
  96. package/src/primitives/Textarea.tsx +0 -62
  97. package/src/primitives/ToggleSwitch.tsx +0 -79
  98. package/src/primitives/Tooltip.tsx +0 -213
  99. package/src/primitives/index.ts +0 -48
  100. package/src/pwa/InstallPromptBanner.tsx +0 -132
  101. package/src/pwa/index.ts +0 -4
  102. package/src/pwa/manifest.template.json +0 -20
  103. package/src/pwa/registerSW.ts +0 -55
  104. package/src/riso/Halftone.tsx +0 -85
  105. package/src/riso/Misregister.tsx +0 -63
  106. package/src/riso/RisoStamp.tsx +0 -76
  107. package/src/riso/index.ts +0 -3
  108. package/src/sketch/HandUnderline.tsx +0 -53
  109. package/src/sketch/RoughArrow.tsx +0 -91
  110. package/src/sketch/RoughBox.tsx +0 -73
  111. package/src/sketch/StickyNote.tsx +0 -56
  112. package/src/sketch/index.ts +0 -4
  113. package/src/styles/base.css +0 -186
  114. package/src/styles/chrome-ambient.css +0 -235
  115. package/src/styles/chrome-bento.css +0 -192
  116. package/src/styles/chrome-editorial.css +0 -168
  117. package/src/styles/chrome-neobrutalism.css +0 -326
  118. package/src/styles/chrome-riso.css +0 -339
  119. package/src/styles/chrome-sketch.css +0 -362
  120. package/src/styles/chrome-swiss.css +0 -265
  121. package/src/styles/chrome-terminal.css +0 -272
  122. package/src/styles/fonts.css +0 -1034
  123. package/src/styles/index.css +0 -306
  124. package/src/styles/tokens.css +0 -941
  125. package/src/terminal/AsciiBox.tsx +0 -65
  126. package/src/terminal/BrailleSpinner.tsx +0 -46
  127. package/src/terminal/index.ts +0 -4
  128. package/src/theme/ThemeProvider.tsx +0 -99
  129. package/src/theme/index.ts +0 -6
  130. package/src/theme/inline-script.ts +0 -40
  131. package/src/theme/theme-context.ts +0 -7
  132. package/src/theme/types.ts +0 -39
  133. package/src/theme/useTheme.ts +0 -8
package/src/styles/chrome-terminal.css DELETED
@@ -1,272 +0,0 @@
1
- /* Terminal chrome — component overrides.
2
- Tokens.css supplies the palette and forces font-display +
3
- font-sans to point at font-mono. This file strips every
4
- primitive of its softness: square corners, 1 px borders, no
5
- shadows, monospace everywhere. */
6
-
7
- html[data-ck-chrome="terminal"] body {
8
- font-family: var(--ck-font-mono);
9
- font-weight: 400;
10
- font-feature-settings: "tnum", "zero", "calt" 0;
11
- letter-spacing: 0;
12
- }
13
-
14
- /* ===== Typography =========================================== */
15
-
16
- html[data-ck-chrome="terminal"] h1,
17
- html[data-ck-chrome="terminal"] .ck-h1 {
18
- font-family: var(--ck-font-mono);
19
- font-weight: 600;
20
- letter-spacing: -0.01em;
21
- line-height: 1.1;
22
- }
23
- html[data-ck-chrome="terminal"] h2,
24
- html[data-ck-chrome="terminal"] .ck-h2 {
25
- font-family: var(--ck-font-mono);
26
- font-weight: 600;
27
- letter-spacing: 0;
28
- line-height: 1.2;
29
- }
30
- html[data-ck-chrome="terminal"] h3,
31
- html[data-ck-chrome="terminal"] .ck-h3 {
32
- font-family: var(--ck-font-mono);
33
- font-weight: 600;
34
- }
35
-
36
- html[data-ck-chrome="terminal"] .ck-eyebrow,
37
- html[data-ck-chrome="terminal"] .ck-tag {
38
- letter-spacing: 0;
39
- font-family: var(--ck-font-mono);
40
- }
41
-
42
- html[data-ck-chrome="terminal"] code {
43
- background: var(--ck-bg-surface-2);
44
- border: 1px solid var(--ck-border-subtle);
45
- border-radius: 2px;
46
- padding: 1px 6px;
47
- }
48
- html[data-ck-chrome="terminal"] pre {
49
- background: var(--ck-bg-surface);
50
- border: 1px solid var(--ck-border-subtle);
51
- border-radius: 2px;
52
- }
53
-
54
- /* ===== Buttons ============================================== */
55
-
56
- html[data-ck-chrome="terminal"] .ck-btn,
57
- html[data-ck-chrome="terminal"] .ck-actionbar-btn {
58
- border-radius: 2px;
59
- font-family: var(--ck-font-mono);
60
- font-weight: 500;
61
- letter-spacing: 0;
62
- text-transform: none;
63
- box-shadow: none !important;
64
- border: 1px solid var(--ck-border-subtle);
65
- }
66
- html[data-ck-chrome="terminal"] .ck-btn--primary {
67
- background: var(--ck-text-primary);
68
- color: var(--ck-bg-canvas);
69
- border-color: var(--ck-text-primary);
70
- }
71
- html[data-ck-chrome="terminal"] .ck-btn--primary:hover:not(:disabled) {
72
- background: var(--ck-bg-canvas);
73
- color: var(--ck-text-primary);
74
- }
75
- html[data-ck-chrome="terminal"] .ck-btn--secondary {
76
- background: transparent;
77
- color: var(--ck-text-primary);
78
- border-color: var(--ck-border-subtle);
79
- }
80
- html[data-ck-chrome="terminal"] .ck-btn--secondary:hover:not(:disabled) {
81
- border-color: var(--ck-border-strong);
82
- background: var(--ck-bg-surface);
83
- }
84
- html[data-ck-chrome="terminal"] .ck-btn--ghost {
85
- background: transparent;
86
- border: 1px solid transparent;
87
- }
88
- html[data-ck-chrome="terminal"] .ck-btn--ghost:hover:not(:disabled) {
89
- border-color: var(--ck-border-subtle);
90
- }
91
-
92
- /* ===== Inputs ============================================== */
93
-
94
- html[data-ck-chrome="terminal"] .ck-input,
95
- html[data-ck-chrome="terminal"] .ck-textarea {
96
- background: var(--ck-bg-surface-2);
97
- border: 1px solid var(--ck-border-subtle) !important;
98
- border-radius: 2px !important;
99
- font-family: var(--ck-font-mono);
100
- color: var(--ck-text-primary);
101
- }
102
- html[data-ck-chrome="terminal"] .ck-input:focus-visible,
103
- html[data-ck-chrome="terminal"] .ck-textarea:focus-visible {
104
- outline: none;
105
- border-color: var(--ck-border-strong) !important;
106
- border-top-color: var(--ck-accent) !important;
107
- box-shadow: none !important;
108
- }
109
-
110
- /* Select trigger + popover — mirror the input look so a chrome
111
- feels consistent across form controls. */
112
- html[data-ck-chrome="terminal"] .ck-select-trigger {
113
- background: var(--ck-bg-surface-2);
114
- border: 1px solid var(--ck-border-subtle) !important;
115
- border-radius: 2px !important;
116
- font-family: var(--ck-font-mono);
117
- color: var(--ck-text-primary);
118
- }
119
- html[data-ck-chrome="terminal"] .ck-select-trigger:focus-visible {
120
- outline: none;
121
- border-color: var(--ck-border-strong) !important;
122
- border-top-color: var(--ck-accent) !important;
123
- box-shadow: none !important;
124
- }
125
- html[data-ck-chrome="terminal"] .ck-select-popover {
126
- background: var(--ck-bg-surface-2);
127
- border: 1px solid var(--ck-border-strong);
128
- border-radius: 2px;
129
- font-family: var(--ck-font-mono);
130
- }
131
- html[data-ck-chrome="terminal"] .ck-select-option {
132
- border-radius: 0;
133
- }
134
- html[data-ck-chrome="terminal"] .ck-select-option--active {
135
- background: var(--ck-bg-muted) !important;
136
- }
137
-
138
- /* ===== Cards ================================================ */
139
-
140
- html[data-ck-chrome="terminal"] .ck-card {
141
- background: var(--ck-bg-surface);
142
- border: 1px solid var(--ck-border-subtle);
143
- border-radius: 2px;
144
- box-shadow: none;
145
- }
146
- html[data-ck-chrome="terminal"] .ck-card__head {
147
- border-bottom: 1px solid var(--ck-border-subtle);
148
- padding: 12px 16px;
149
- }
150
- html[data-ck-chrome="terminal"] .ck-card__body {
151
- padding: 14px 16px;
152
- }
153
- html[data-ck-chrome="terminal"] .ck-card__foot {
154
- border-top: 1px solid var(--ck-border-subtle);
155
- background: transparent;
156
- padding: 10px 16px;
157
- }
158
-
159
- /* ===== Tags — bracketed text + coloured dot ================ */
160
-
161
- html[data-ck-chrome="terminal"] [data-ck-tag] {
162
- background: transparent !important;
163
- border: none !important;
164
- padding: 0 !important;
165
- box-shadow: none !important;
166
- font-family: var(--ck-font-mono) !important;
167
- font-weight: 500 !important;
168
- letter-spacing: 0 !important;
169
- text-transform: none !important;
170
- font-size: 12px !important;
171
- display: inline-flex !important;
172
- align-items: center !important;
173
- }
174
- html[data-ck-chrome="terminal"] [data-ck-tag]::before {
175
- content: "[● ";
176
- color: currentColor;
177
- }
178
- html[data-ck-chrome="terminal"] [data-ck-tag]::after {
179
- content: " ]";
180
- color: var(--ck-text-secondary);
181
- }
182
- html[data-ck-chrome="terminal"] [data-ck-tag][data-tone="accent"] {
183
- color: var(--ck-term-cyan) !important;
184
- }
185
- html[data-ck-chrome="terminal"] [data-ck-tag][data-tone="success"] {
186
- color: var(--ck-term-green) !important;
187
- }
188
- html[data-ck-chrome="terminal"] [data-ck-tag][data-tone="warning"] {
189
- color: var(--ck-term-amber) !important;
190
- }
191
- html[data-ck-chrome="terminal"] [data-ck-tag][data-tone="critical"] {
192
- color: var(--ck-term-red) !important;
193
- }
194
- html[data-ck-chrome="terminal"] [data-ck-tag][data-tone="neutral"] {
195
- color: var(--ck-text-secondary) !important;
196
- }
197
-
198
- /* ===== Layout chrome ======================================== */
199
-
200
- html[data-ck-chrome="terminal"] [data-ck-leftnav] {
201
- background: var(--ck-bg-canvas) !important;
202
- border-right: 1px solid var(--ck-border-subtle);
203
- }
204
- html[data-ck-chrome="terminal"] [data-ck-topbar] {
205
- background: var(--ck-bg-canvas) !important;
206
- border-bottom: 1px solid var(--ck-border-subtle);
207
- font-family: var(--ck-font-mono);
208
- }
209
-
210
- /* ===== NavItem — TUI inverted selection on active =========== */
211
-
212
- html[data-ck-chrome="terminal"] [data-ck-navitem] {
213
- background: transparent !important;
214
- border: 1px solid transparent !important;
215
- border-radius: 2px !important;
216
- font-family: var(--ck-font-mono) !important;
217
- font-weight: 400 !important;
218
- color: var(--ck-text-secondary) !important;
219
- padding: 6px 10px !important;
220
- }
221
- html[data-ck-chrome="terminal"] [data-ck-navitem]:not([data-active="true"]):hover {
222
- background: var(--ck-bg-surface) !important;
223
- color: var(--ck-text-primary) !important;
224
- }
225
- /* Classic TUI selection — invert. */
226
- html[data-ck-chrome="terminal"] [data-ck-navitem][data-active="true"] {
227
- background: var(--ck-text-primary) !important;
228
- color: var(--ck-bg-canvas) !important;
229
- font-weight: 500 !important;
230
- }
231
-
232
- /* ===== Search trigger ====================================== */
233
-
234
- html[data-ck-chrome="terminal"] [data-ck-search-trigger] {
235
- background: var(--ck-bg-surface) !important;
236
- border: 1px solid var(--ck-border-subtle) !important;
237
- border-radius: 2px !important;
238
- box-shadow: none !important;
239
- font-family: var(--ck-font-mono) !important;
240
- }
241
-
242
- /* ===== Action bar ========================================== */
243
-
244
- html[data-ck-chrome="terminal"] [data-ck-actionbar] {
245
- background: var(--ck-bg-surface) !important;
246
- border: 1px solid var(--ck-border-subtle);
247
- border-radius: 2px;
248
- box-shadow: none !important;
249
- font-family: var(--ck-font-mono);
250
- }
251
-
252
- /* ===== Modal =============================================== */
253
-
254
- html[data-ck-chrome="terminal"] [role="dialog"] > div:first-child {
255
- background: rgba(0, 0, 0, 0.6);
256
- backdrop-filter: none;
257
- }
258
- html[data-ck-chrome="terminal"] [role="dialog"] > div > div {
259
- border-radius: 2px;
260
- border: 1px solid var(--ck-border-strong);
261
- box-shadow: none;
262
- font-family: var(--ck-font-mono);
263
- }
264
-
265
- html[data-ck-chrome="terminal"] .ck-actionbar-panel,
266
- html[data-ck-chrome="terminal"] .ck-actionbar-toast {
267
- background: var(--ck-bg-surface);
268
- border: 1px solid var(--ck-border-subtle);
269
- border-radius: 2px;
270
- box-shadow: none;
271
- font-family: var(--ck-font-mono);
272
- }