@cosxai/ui 0.25.0 → 1.0.0-alpha.1

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 (165) hide show
  1. package/CHANGELOG.md +597 -0
  2. package/NOTICE +11 -0
  3. package/README.md +52 -0
  4. package/package.json +57 -7
  5. package/src/brand.css +13 -0
  6. package/src/components/Badge.tsx +68 -0
  7. package/src/components/Button.tsx +178 -0
  8. package/src/components/Card.tsx +42 -0
  9. package/src/components/Checkbox.tsx +67 -0
  10. package/src/components/Dialog.tsx +111 -0
  11. package/src/components/Field.tsx +66 -0
  12. package/src/components/Figure.tsx +30 -0
  13. package/src/components/Icon.tsx +32 -0
  14. package/src/components/IconButton.tsx +55 -0
  15. package/src/components/Input.tsx +74 -0
  16. package/src/components/Logo.tsx +62 -0
  17. package/src/components/Marker.tsx +26 -0
  18. package/src/components/MetaLabel.tsx +38 -0
  19. package/src/components/Radio.tsx +72 -0
  20. package/src/components/Select.tsx +351 -0
  21. package/src/components/Spinner.tsx +20 -0
  22. package/src/components/Switch.tsx +67 -0
  23. package/src/components/Table.tsx +196 -0
  24. package/src/components/Tabs.tsx +124 -0
  25. package/src/components/Tag.tsx +35 -0
  26. package/src/components/Textarea.tsx +46 -0
  27. package/src/components/ThemeProvider.tsx +80 -0
  28. package/src/components/Toast.tsx +159 -0
  29. package/src/components/Tooltip.tsx +57 -0
  30. package/src/components/core.test.tsx +242 -0
  31. package/src/components/forms-control.ts +36 -0
  32. package/src/components/forms.test.tsx +280 -0
  33. package/src/components/logo-art.ts +4 -0
  34. package/src/components/overlays.test.tsx +245 -0
  35. package/src/components/useButtonAction.ts +57 -0
  36. package/src/fonts.css +20 -0
  37. package/src/index.ts +34 -24
  38. package/src/lib/cn.ts +23 -6
  39. package/src/modes.css +10 -0
  40. package/src/styles.css +19 -0
  41. package/src/theme.css +143 -0
  42. package/src/tokens/colors.css +112 -0
  43. package/src/tokens/compat.css +36 -0
  44. package/src/tokens/elevation.css +14 -0
  45. package/src/tokens/motion.css +42 -0
  46. package/src/tokens/spacing.css +55 -0
  47. package/src/tokens/typography-cjk.css +42 -0
  48. package/src/tokens/typography.css +81 -0
  49. package/src/actionbar/ActionBar.tsx +0 -837
  50. package/src/actionbar/ActionBarButton.tsx +0 -111
  51. package/src/actionbar/ActionBarMenuGroup.tsx +0 -116
  52. package/src/actionbar/ActionBarModeHandle.tsx +0 -171
  53. package/src/actionbar/ActionBarProvider.tsx +0 -91
  54. package/src/actionbar/actionbar-context.ts +0 -45
  55. package/src/actionbar/index.ts +0 -28
  56. package/src/actionbar/types.ts +0 -147
  57. package/src/actionbar/useActionBarItems.ts +0 -60
  58. package/src/actionbar/useActionBarMode.ts +0 -144
  59. package/src/actionbar/useActionBarPanel.ts +0 -56
  60. package/src/actionbar/useActionBarStatusDot.ts +0 -49
  61. package/src/actionbar/useActionBarToast.ts +0 -33
  62. package/src/ambient/AmbientBackdrop.tsx +0 -74
  63. package/src/ambient/CommandInput.tsx +0 -107
  64. package/src/ambient/SuperbarStrip.tsx +0 -36
  65. package/src/ambient/index.ts +0 -6
  66. package/src/bento/BentoCell.tsx +0 -66
  67. package/src/bento/BentoGrid.tsx +0 -42
  68. package/src/bento/index.ts +0 -2
  69. package/src/command/CommandPalette.tsx +0 -329
  70. package/src/command/CommandProvider.tsx +0 -57
  71. package/src/command/command-context.ts +0 -12
  72. package/src/command/index.ts +0 -6
  73. package/src/command/rank.ts +0 -50
  74. package/src/command/types.ts +0 -37
  75. package/src/command/useCommandSource.ts +0 -37
  76. package/src/dialogs/DialogsProvider.tsx +0 -216
  77. package/src/dialogs/Modal.tsx +0 -260
  78. package/src/dialogs/Toast.tsx +0 -85
  79. package/src/dialogs/dialogs-context.ts +0 -6
  80. package/src/dialogs/index.ts +0 -10
  81. package/src/dialogs/types.ts +0 -37
  82. package/src/dialogs/useDialogs.ts +0 -8
  83. package/src/editorial/EditorialSpotlight.tsx +0 -63
  84. package/src/editorial/Folio.tsx +0 -52
  85. package/src/editorial/PlateMarker.tsx +0 -33
  86. package/src/editorial/RomanSection.tsx +0 -65
  87. package/src/editorial/RunningMarginalia.tsx +0 -65
  88. package/src/editorial/index.ts +0 -10
  89. package/src/hooks/index.ts +0 -5
  90. package/src/hooks/useKeyboardHotkey.ts +0 -93
  91. package/src/hooks/useReducedMotion.ts +0 -20
  92. package/src/hooks/useViewport.ts +0 -61
  93. package/src/layout/Breadcrumb.tsx +0 -74
  94. package/src/layout/LeftNavRail.tsx +0 -139
  95. package/src/layout/MobileTabBar.tsx +0 -101
  96. package/src/layout/NavItem.tsx +0 -128
  97. package/src/layout/NavSearchTrigger.tsx +0 -88
  98. package/src/layout/NavSection.tsx +0 -40
  99. package/src/layout/RightSidebarPanel.tsx +0 -111
  100. package/src/layout/Shell.tsx +0 -91
  101. package/src/layout/SidePanel.tsx +0 -316
  102. package/src/layout/StickyBanner.tsx +0 -83
  103. package/src/layout/Topbar.tsx +0 -68
  104. package/src/layout/index.ts +0 -24
  105. package/src/layout/useNavRailState.ts +0 -69
  106. package/src/lib/time-utils.ts +0 -44
  107. package/src/neobrutalism/Marquee.tsx +0 -81
  108. package/src/neobrutalism/Sticker.tsx +0 -71
  109. package/src/neobrutalism/index.ts +0 -4
  110. package/src/primitives/Avatar.tsx +0 -53
  111. package/src/primitives/Button.tsx +0 -67
  112. package/src/primitives/Card.tsx +0 -41
  113. package/src/primitives/Checkbox.tsx +0 -87
  114. package/src/primitives/Chip.tsx +0 -191
  115. package/src/primitives/Combobox.tsx +0 -507
  116. package/src/primitives/CopyField.tsx +0 -139
  117. package/src/primitives/CountBadge.tsx +0 -50
  118. package/src/primitives/Input.tsx +0 -204
  119. package/src/primitives/Kbd.tsx +0 -45
  120. package/src/primitives/MentionCombobox.tsx +0 -612
  121. package/src/primitives/MultiCombobox.tsx +0 -327
  122. package/src/primitives/PageHeader.tsx +0 -77
  123. package/src/primitives/Radio.tsx +0 -131
  124. package/src/primitives/SegmentedControl.tsx +0 -135
  125. package/src/primitives/Select.tsx +0 -779
  126. package/src/primitives/SignaturePad.tsx +0 -461
  127. package/src/primitives/Tag.tsx +0 -56
  128. package/src/primitives/Textarea.tsx +0 -62
  129. package/src/primitives/ToggleSwitch.tsx +0 -79
  130. package/src/primitives/Tooltip.tsx +0 -213
  131. package/src/primitives/index.ts +0 -53
  132. package/src/pwa/InstallPromptBanner.tsx +0 -132
  133. package/src/pwa/index.ts +0 -4
  134. package/src/pwa/manifest.template.json +0 -20
  135. package/src/pwa/registerSW.ts +0 -55
  136. package/src/riso/Halftone.tsx +0 -85
  137. package/src/riso/Misregister.tsx +0 -63
  138. package/src/riso/RisoStamp.tsx +0 -76
  139. package/src/riso/index.ts +0 -3
  140. package/src/sketch/HandUnderline.tsx +0 -53
  141. package/src/sketch/RoughArrow.tsx +0 -91
  142. package/src/sketch/RoughBox.tsx +0 -73
  143. package/src/sketch/StickyNote.tsx +0 -56
  144. package/src/sketch/index.ts +0 -4
  145. package/src/styles/base.css +0 -186
  146. package/src/styles/chrome-ambient.css +0 -235
  147. package/src/styles/chrome-bento.css +0 -192
  148. package/src/styles/chrome-editorial.css +0 -168
  149. package/src/styles/chrome-neobrutalism.css +0 -326
  150. package/src/styles/chrome-riso.css +0 -339
  151. package/src/styles/chrome-sketch.css +0 -362
  152. package/src/styles/chrome-swiss.css +0 -265
  153. package/src/styles/chrome-terminal.css +0 -272
  154. package/src/styles/fonts.css +0 -1034
  155. package/src/styles/index.css +0 -343
  156. package/src/styles/tokens.css +0 -941
  157. package/src/terminal/AsciiBox.tsx +0 -65
  158. package/src/terminal/BrailleSpinner.tsx +0 -46
  159. package/src/terminal/index.ts +0 -4
  160. package/src/theme/ThemeProvider.tsx +0 -99
  161. package/src/theme/index.ts +0 -6
  162. package/src/theme/inline-script.ts +0 -40
  163. package/src/theme/theme-context.ts +0 -7
  164. package/src/theme/types.ts +0 -39
  165. 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
- }