@opencode-ai/ui 0.0.0-dev-17746 → 0.0.0-dev-202608201733

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 (285) hide show
  1. package/dist/{data-display/accordion → components}/accordion.d.ts +6 -6
  2. package/dist/components/avatar.d.ts +9 -0
  3. package/dist/components/button.d.ts +9 -0
  4. package/dist/components/card.d.ts +1 -1
  5. package/dist/{forms/checkbox → components}/checkbox.d.ts +2 -2
  6. package/dist/components/dialog.d.ts +12 -0
  7. package/dist/{data-display/diff-changes → components}/diff-changes.d.ts +1 -2
  8. package/dist/components/dropdown-menu.d.ts +80 -0
  9. package/dist/components/icon-button.d.ts +10 -0
  10. package/dist/{icons/icon/additional-icons.d.ts → components/icon.d.ts} +8 -8
  11. package/dist/components/keybind.d.ts +6 -0
  12. package/dist/components/list.d.ts +1 -1
  13. package/dist/{feedback/progress-circle → components}/progress-circle.d.ts +0 -2
  14. package/dist/components/radio-group.d.ts +16 -0
  15. package/dist/components/scroll-view.d.ts +3 -3
  16. package/dist/components/select.d.ts +21 -0
  17. package/dist/{forms/switch → components}/switch.d.ts +2 -4
  18. package/dist/{navigation/tabs → components}/tabs.d.ts +8 -15
  19. package/dist/components/tag.d.ts +5 -0
  20. package/dist/{typography/text-shimmer → components}/text-shimmer.d.ts +0 -1
  21. package/dist/components/toast.d.ts +56 -0
  22. package/dist/components/tooltip.d.ts +17 -0
  23. package/dist/context/i18n.d.ts +7 -10
  24. package/dist/i18n/ar.d.ts +2 -0
  25. package/dist/i18n/bg.d.ts +2 -0
  26. package/dist/i18n/br.d.ts +2 -0
  27. package/dist/i18n/bs.d.ts +2 -0
  28. package/dist/i18n/da.d.ts +2 -0
  29. package/dist/i18n/de.d.ts +2 -0
  30. package/dist/i18n/en.d.ts +1 -209
  31. package/dist/i18n/es.d.ts +2 -0
  32. package/dist/i18n/fr.d.ts +2 -0
  33. package/dist/i18n/ja.d.ts +2 -0
  34. package/dist/i18n/km.d.ts +2 -0
  35. package/dist/i18n/ko.d.ts +2 -0
  36. package/dist/i18n/lo.d.ts +2 -0
  37. package/dist/i18n/mk.d.ts +2 -0
  38. package/dist/i18n/mn.d.ts +2 -0
  39. package/dist/i18n/my.d.ts +2 -0
  40. package/dist/i18n/pl.d.ts +2 -0
  41. package/dist/i18n/ru.d.ts +2 -0
  42. package/dist/i18n/sr.d.ts +2 -0
  43. package/dist/i18n/tg.d.ts +2 -0
  44. package/dist/i18n/th.d.ts +2 -0
  45. package/dist/i18n/tr.d.ts +2 -0
  46. package/dist/i18n/zh.d.ts +2 -0
  47. package/dist/i18n/zht.d.ts +2 -0
  48. package/dist/v2/components/accordion-v2.d.ts +26 -0
  49. package/dist/{data-display/avatar/avatar.d.ts → v2/components/avatar-v2.d.ts} +1 -1
  50. package/dist/v2/components/badge-v2.d.ts +6 -0
  51. package/dist/v2/components/button-v2.d.ts +10 -0
  52. package/dist/v2/components/checkbox-v2.d.ts +10 -0
  53. package/dist/{overlays/dialog/dialog.d.ts → v2/components/dialog-v2.d.ts} +2 -1
  54. package/dist/v2/components/diff-changes-v2.d.ts +11 -0
  55. package/dist/v2/components/divider-v2.d.ts +5 -0
  56. package/dist/{forms/field/field.d.ts → v2/components/field-v2.d.ts} +10 -4
  57. package/dist/v2/components/icon-button-v2.d.ts +11 -0
  58. package/dist/{icons/icon → v2/components}/icon.d.ts +1 -16
  59. package/dist/v2/components/inline-input-v2.d.ts +21 -0
  60. package/dist/v2/components/keybind-v2.d.ts +7 -0
  61. package/dist/{data-display/line-comment/line-comment.d.ts → v2/components/line-comment-v2.d.ts} +9 -9
  62. package/dist/v2/components/loader-v2.d.ts +3 -0
  63. package/dist/v2/components/menu-v2.d.ts +52 -0
  64. package/dist/v2/components/progress-circle-v2.d.ts +8 -0
  65. package/dist/{data-display/project-avatar/project-avatar.d.ts → v2/components/project-avatar-v2.d.ts} +1 -1
  66. package/dist/v2/components/radio-v2.d.ts +16 -0
  67. package/dist/{navigation/segmented-control/segmented-control.d.ts → v2/components/segmented-control-v2.d.ts} +5 -5
  68. package/dist/{forms/select/select.d.ts → v2/components/select-v2.d.ts} +6 -4
  69. package/dist/v2/components/split-button-v2.d.ts +5 -0
  70. package/dist/v2/components/switch-v2.d.ts +7 -0
  71. package/dist/v2/components/tabs-v2.d.ts +34 -0
  72. package/dist/{forms/text-input/text-input.d.ts → v2/components/text-input-v2.d.ts} +3 -3
  73. package/dist/v2/components/text-shimmer-v2.d.ts +9 -0
  74. package/dist/v2/components/textarea-v2.d.ts +7 -0
  75. package/dist/v2/components/toast-v2.d.ts +57 -0
  76. package/dist/v2/components/tooltip-v2.d.ts +13 -0
  77. package/dist/v2/components/wordmark-v2.d.ts +2 -0
  78. package/package.json +13 -131
  79. package/src/{data-display/accordion → components}/accordion.css +26 -1
  80. package/src/{data-display/accordion → components}/accordion.tsx +14 -14
  81. package/src/components/animated-number.css +11 -29
  82. package/src/components/animated-number.tsx +2 -2
  83. package/src/components/avatar.css +49 -0
  84. package/src/components/avatar.tsx +55 -0
  85. package/src/components/button.css +194 -0
  86. package/src/components/button.tsx +33 -0
  87. package/src/components/card.css +23 -2
  88. package/src/components/card.tsx +4 -4
  89. package/src/{forms/checkbox → components}/checkbox.css +7 -1
  90. package/src/{forms/checkbox → components}/checkbox.tsx +13 -13
  91. package/src/components/collapsible.tsx +1 -1
  92. package/src/components/dialog.css +181 -0
  93. package/src/components/dialog.tsx +72 -0
  94. package/src/{data-display/diff-changes → components}/diff-changes.css +19 -22
  95. package/src/components/diff-changes.tsx +115 -0
  96. package/src/components/dropdown-menu.css +135 -0
  97. package/src/components/dropdown-menu.tsx +308 -0
  98. package/src/components/icon-button.css +181 -0
  99. package/src/components/icon-button.tsx +29 -0
  100. package/src/components/icon.css +39 -0
  101. package/src/{icons/icon/additional-icons.ts → components/icon.tsx} +74 -8
  102. package/src/components/image-preview.tsx +2 -3
  103. package/src/components/keybind.css +18 -0
  104. package/src/components/keybind.tsx +20 -0
  105. package/src/components/list.css +5 -5
  106. package/src/components/list.tsx +5 -7
  107. package/src/components/popover.tsx +2 -3
  108. package/src/components/progress-circle.css +16 -0
  109. package/src/components/progress-circle.tsx +64 -0
  110. package/src/components/provider-icon.tsx +1 -1
  111. package/src/components/radio-group.css +187 -0
  112. package/src/components/radio-group.tsx +83 -0
  113. package/src/components/scroll-view.tsx +20 -5
  114. package/src/components/select.css +201 -0
  115. package/src/components/select.tsx +174 -0
  116. package/src/components/sticky-accordion-header.tsx +1 -1
  117. package/src/components/switch.css +136 -0
  118. package/src/components/switch.tsx +29 -0
  119. package/src/{navigation/tabs → components}/tabs.css +229 -39
  120. package/src/components/tabs.tsx +126 -0
  121. package/src/components/tag.css +37 -0
  122. package/src/components/tag.tsx +22 -0
  123. package/src/components/text-field.tsx +4 -12
  124. package/src/{typography/text-shimmer → components}/text-shimmer.css +1 -2
  125. package/src/{typography/text-shimmer → components}/text-shimmer.tsx +0 -1
  126. package/src/components/toast.css +236 -0
  127. package/src/components/toast.tsx +185 -0
  128. package/src/components/tooltip.css +74 -0
  129. package/src/components/tooltip.tsx +163 -0
  130. package/src/context/i18n.tsx +14 -17
  131. package/src/hooks/create-auto-scroll.tsx +0 -20
  132. package/src/i18n/am.ts +2 -0
  133. package/src/i18n/ar.ts +2 -0
  134. package/src/i18n/az.ts +2 -0
  135. package/src/i18n/bg.ts +2 -0
  136. package/src/i18n/bn.ts +2 -0
  137. package/src/i18n/br.ts +2 -0
  138. package/src/i18n/bs.ts +2 -0
  139. package/src/i18n/ca.ts +2 -0
  140. package/src/i18n/cs.ts +2 -0
  141. package/src/i18n/da.ts +2 -0
  142. package/src/i18n/de.ts +2 -0
  143. package/src/i18n/dv.ts +2 -0
  144. package/src/i18n/dz.ts +2 -0
  145. package/src/i18n/el.ts +2 -0
  146. package/src/i18n/en.ts +4 -18
  147. package/src/i18n/es.ts +2 -0
  148. package/src/i18n/et.ts +2 -0
  149. package/src/i18n/fa.ts +2 -0
  150. package/src/i18n/fi.ts +2 -0
  151. package/src/i18n/fo.ts +2 -0
  152. package/src/i18n/fr.ts +2 -0
  153. package/src/i18n/hi.ts +2 -0
  154. package/src/i18n/hr.ts +2 -0
  155. package/src/i18n/hu.ts +2 -0
  156. package/src/i18n/hy.ts +2 -0
  157. package/src/i18n/id.ts +2 -0
  158. package/src/i18n/is.ts +2 -0
  159. package/src/i18n/it.ts +2 -0
  160. package/src/i18n/ja.ts +2 -0
  161. package/src/i18n/ka.ts +2 -0
  162. package/src/i18n/km.ts +2 -0
  163. package/src/i18n/ko.ts +2 -0
  164. package/src/i18n/lo.ts +2 -0
  165. package/src/i18n/lt.ts +2 -0
  166. package/src/i18n/lv.ts +2 -0
  167. package/src/i18n/mk.ts +2 -0
  168. package/src/i18n/mn.ts +2 -0
  169. package/src/i18n/ms.ts +2 -0
  170. package/src/i18n/my.ts +2 -0
  171. package/src/i18n/ne.ts +2 -0
  172. package/src/i18n/nl.ts +2 -0
  173. package/src/i18n/no.ts +2 -0
  174. package/src/i18n/pa.ts +2 -0
  175. package/src/i18n/pl.ts +2 -0
  176. package/src/i18n/ro.ts +2 -0
  177. package/src/i18n/ru.ts +2 -0
  178. package/src/i18n/si.ts +2 -0
  179. package/src/i18n/sk.ts +2 -0
  180. package/src/i18n/sl.ts +2 -0
  181. package/src/i18n/sq.ts +2 -0
  182. package/src/i18n/sr.ts +2 -0
  183. package/src/i18n/sv.ts +2 -0
  184. package/src/i18n/tg.ts +2 -0
  185. package/src/i18n/th.ts +2 -0
  186. package/src/i18n/tk.ts +2 -0
  187. package/src/i18n/tr.ts +2 -0
  188. package/src/i18n/uk.ts +2 -0
  189. package/src/i18n/ur.ts +2 -0
  190. package/src/i18n/uz.ts +2 -0
  191. package/src/i18n/vi.ts +2 -0
  192. package/src/i18n/zh.ts +2 -0
  193. package/src/i18n/zht.ts +2 -0
  194. package/src/styles/index.css +20 -4
  195. package/src/styles/tailwind/index.css +1 -15
  196. package/src/theme/context.tsx +11 -19
  197. package/src/theme/themes/oc-2.json +1 -1
  198. package/src/v2/components/accordion-v2.css +139 -0
  199. package/src/v2/components/accordion-v2.tsx +86 -0
  200. package/src/{data-display/avatar/avatar.tsx → v2/components/avatar-v2.tsx} +1 -1
  201. package/src/{data-display/badge/badge.css → v2/components/badge-v2.css} +0 -19
  202. package/src/{data-display/badge/badge.tsx → v2/components/badge-v2.tsx} +4 -6
  203. package/src/{actions/button/button.tsx → v2/components/button-v2.tsx} +8 -8
  204. package/src/v2/components/checkbox-v2.css +184 -0
  205. package/src/v2/components/checkbox-v2.tsx +65 -0
  206. package/src/{overlays/dialog/dialog.css → v2/components/dialog-v2.css} +0 -3
  207. package/src/{overlays/dialog/dialog.tsx → v2/components/dialog-v2.tsx} +13 -11
  208. package/src/v2/components/diff-changes-v2.css +26 -0
  209. package/src/{data-display/diff-changes/diff-changes.tsx → v2/components/diff-changes-v2.tsx} +2 -7
  210. package/src/{layout/divider/divider.tsx → v2/components/divider-v2.tsx} +3 -3
  211. package/src/{forms/field/field.tsx → v2/components/field-v2.tsx} +11 -9
  212. package/src/v2/components/icon-button-v2.tsx +37 -0
  213. package/src/{icons/icon → v2/components}/icon.tsx +9 -42
  214. package/src/v2/components/inline-input-v2.css +225 -0
  215. package/src/v2/components/inline-input-v2.tsx +107 -0
  216. package/src/{data-display/keybind/keybind.css → v2/components/keybind-v2.css} +1 -1
  217. package/src/{data-display/keybind/keybind.tsx → v2/components/keybind-v2.tsx} +3 -3
  218. package/src/{data-display/line-comment/line-comment.tsx → v2/components/line-comment-v2.tsx} +15 -17
  219. package/src/{feedback/loader/loader.tsx → v2/components/loader-v2.tsx} +2 -2
  220. package/src/{navigation/menu/menu.css → v2/components/menu-v2.css} +0 -121
  221. package/src/{navigation/menu/menu.tsx → v2/components/menu-v2.tsx} +32 -96
  222. package/src/v2/components/progress-circle-v2.css +13 -0
  223. package/src/v2/components/progress-circle-v2.tsx +52 -0
  224. package/src/{data-display/project-avatar/project-avatar.tsx → v2/components/project-avatar-v2.tsx} +1 -1
  225. package/src/{forms/radio/radio.tsx → v2/components/radio-v2.tsx} +20 -30
  226. package/src/{navigation/segmented-control/segmented-control.tsx → v2/components/segmented-control-v2.tsx} +8 -9
  227. package/src/{forms/select/select.css → v2/components/select-v2.css} +8 -2
  228. package/src/{forms/select/select.tsx → v2/components/select-v2.tsx} +32 -38
  229. package/src/{actions/split-button/split-button.css → v2/components/split-button-v2.css} +6 -1
  230. package/src/{actions/split-button/split-button.tsx → v2/components/split-button-v2.tsx} +4 -4
  231. package/src/{forms/switch/switch.css → v2/components/switch-v2.css} +0 -110
  232. package/src/v2/components/switch-v2.tsx +28 -0
  233. package/src/{navigation/tabs/tabs-current.css → v2/components/tabs-v2.css} +9 -24
  234. package/src/v2/components/tabs-v2.tsx +149 -0
  235. package/src/{forms/text-input/text-input.tsx → v2/components/text-input-v2.tsx} +4 -4
  236. package/src/v2/components/text-shimmer-v2.css +125 -0
  237. package/src/v2/components/text-shimmer-v2.tsx +63 -0
  238. package/src/{forms/textarea/textarea.tsx → v2/components/textarea-v2.tsx} +3 -3
  239. package/src/{feedback/toast/toast.tsx → v2/components/toast-v2.tsx} +58 -60
  240. package/src/{overlays/tooltip/tooltip.css → v2/components/tooltip-v2.css} +0 -26
  241. package/src/{overlays/tooltip/tooltip.tsx → v2/components/tooltip-v2.tsx} +14 -18
  242. package/src/{typography/wordmark/wordmark.tsx → v2/components/wordmark-v2.tsx} +1 -1
  243. package/src/{styles/tokens → v2/styles}/theme.css +12 -0
  244. package/dist/actions/button/button.d.ts +0 -10
  245. package/dist/actions/icon-button/icon-button.d.ts +0 -11
  246. package/dist/actions/split-button/split-button.d.ts +0 -5
  247. package/dist/data-display/badge/badge.d.ts +0 -7
  248. package/dist/data-display/keybind/keybind.d.ts +0 -7
  249. package/dist/feedback/loader/loader.d.ts +0 -3
  250. package/dist/feedback/toast/toast.d.ts +0 -57
  251. package/dist/forms/radio/radio.d.ts +0 -16
  252. package/dist/forms/textarea/textarea.d.ts +0 -7
  253. package/dist/i18n/he.d.ts +0 -197
  254. package/dist/layout/divider/divider.d.ts +0 -5
  255. package/dist/navigation/menu/menu.d.ts +0 -59
  256. package/dist/overlays/tooltip/tooltip.d.ts +0 -14
  257. package/dist/typography/wordmark/wordmark.d.ts +0 -2
  258. package/src/actions/icon-button/icon-button.tsx +0 -32
  259. package/src/feedback/progress-circle/progress-circle.css +0 -28
  260. package/src/feedback/progress-circle/progress-circle.tsx +0 -64
  261. package/src/forms/switch/switch.tsx +0 -34
  262. package/src/i18n/he.ts +0 -199
  263. package/src/icons/icon/icon.css +0 -3
  264. package/src/navigation/tabs/tabs.tsx +0 -194
  265. /package/dist/{forms/inline-input → components}/inline-input.d.ts +0 -0
  266. /package/dist/{navigation → v2/components}/tab-state-indicator.d.ts +0 -0
  267. /package/src/{forms/inline-input → components}/inline-input.css +0 -0
  268. /package/src/{forms/inline-input → components}/inline-input.tsx +0 -0
  269. /package/src/{data-display/avatar/avatar.css → v2/components/avatar-v2.css} +0 -0
  270. /package/src/{actions/button/button.css → v2/components/button-v2.css} +0 -0
  271. /package/src/{layout/divider/divider.css → v2/components/divider-v2.css} +0 -0
  272. /package/src/{forms/field/field.css → v2/components/field-v2.css} +0 -0
  273. /package/src/{styles/file-tree.css → v2/components/file-tree-v2.css} +0 -0
  274. /package/src/{actions/icon-button/icon-button.css → v2/components/icon-button-v2.css} +0 -0
  275. /package/src/{data-display/line-comment/line-comment.css → v2/components/line-comment-v2.css} +0 -0
  276. /package/src/{feedback/loader/loader.css → v2/components/loader-v2.css} +0 -0
  277. /package/src/{data-display/project-avatar/project-avatar.css → v2/components/project-avatar-v2.css} +0 -0
  278. /package/src/{forms/radio/radio.css → v2/components/radio-v2.css} +0 -0
  279. /package/src/{navigation/segmented-control/segmented-control.css → v2/components/segmented-control-v2.css} +0 -0
  280. /package/src/{navigation → v2/components}/tab-state-indicator.tsx +0 -0
  281. /package/src/{forms/text-input/text-input.css → v2/components/text-input-v2.css} +0 -0
  282. /package/src/{forms/textarea/textarea.css → v2/components/textarea-v2.css} +0 -0
  283. /package/src/{feedback/toast/toast.css → v2/components/toast-v2.css} +0 -0
  284. /package/src/{styles/tokens → v2/styles}/colors.css +0 -0
  285. /package/src/{styles/tokens/index.css → v2/styles/tailwind.css} +0 -0
@@ -0,0 +1,125 @@
1
+ * {
2
+ -webkit-font-smoothing: antialiased;
3
+ -moz-osx-font-smoothing: grayscale;
4
+ text-rendering: geometricPrecision;
5
+ }
6
+
7
+ [data-component="text-shimmer-v2"] {
8
+ --_step: 45ms;
9
+ --_duration: 1200ms;
10
+ --_swap: 220ms;
11
+ --_index: 0;
12
+ --_angle: 90deg;
13
+ --_spread: 5.2ch;
14
+ --_size: 360%;
15
+ --_base-color: var(--v2-text-text-muted);
16
+ --_peak-color: var(--v2-text-text-base);
17
+ --_sweep: linear-gradient(
18
+ var(--_angle),
19
+ transparent calc(50% - var(--_spread)),
20
+ var(--_peak-color) 50%,
21
+ transparent calc(50% + var(--_spread))
22
+ );
23
+ --_base: linear-gradient(var(--_base-color), var(--_base-color));
24
+
25
+ display: inline-flex;
26
+ align-items: baseline;
27
+ font: inherit;
28
+ letter-spacing: inherit;
29
+ line-height: inherit;
30
+ user-select: none;
31
+ }
32
+
33
+ [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-char"] {
34
+ display: inline-grid;
35
+ white-space: pre;
36
+ font: inherit;
37
+ letter-spacing: inherit;
38
+ line-height: inherit;
39
+ }
40
+
41
+ [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
42
+ [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
43
+ grid-area: 1 / 1;
44
+ white-space: pre;
45
+ transition: opacity var(--_swap) ease-out;
46
+ font: inherit;
47
+ letter-spacing: inherit;
48
+ line-height: inherit;
49
+ }
50
+
51
+ [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
52
+ color: inherit;
53
+ opacity: 1;
54
+ }
55
+
56
+ [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
57
+ color: var(--_base-color);
58
+ opacity: 0;
59
+ }
60
+
61
+ [data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-shimmer"] {
62
+ opacity: 1;
63
+ }
64
+
65
+ [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"][data-run="true"] {
66
+ animation-name: text-shimmer-v2-sweep;
67
+ animation-duration: var(--_duration);
68
+ animation-iteration-count: infinite;
69
+ animation-timing-function: linear;
70
+ animation-fill-mode: both;
71
+ animation-delay: calc(var(--_step) * var(--_index) * -1);
72
+ will-change: background-position;
73
+ }
74
+
75
+ @keyframes text-shimmer-v2-sweep {
76
+ 0% {
77
+ background-position:
78
+ 100% 0,
79
+ 0 0;
80
+ }
81
+ 100% {
82
+ background-position:
83
+ 0% 0,
84
+ 0 0;
85
+ }
86
+ }
87
+
88
+ @supports ((-webkit-background-clip: text) or (background-clip: text)) {
89
+ [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
90
+ color: transparent;
91
+ -webkit-text-fill-color: transparent;
92
+ background-image: var(--_sweep), var(--_base);
93
+ background-size:
94
+ var(--_size) 100%,
95
+ 100% 100%;
96
+ background-position:
97
+ 100% 0,
98
+ 0 0;
99
+ background-repeat: no-repeat;
100
+ -webkit-background-clip: text;
101
+ background-clip: text;
102
+ }
103
+
104
+ [data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-base"] {
105
+ opacity: 0;
106
+ }
107
+ }
108
+
109
+ @media (prefers-reduced-motion: reduce) {
110
+ [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
111
+ [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
112
+ transition-duration: 0ms;
113
+ }
114
+
115
+ [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
116
+ animation: none !important;
117
+ color: inherit;
118
+ -webkit-text-fill-color: currentColor;
119
+ background-image: none;
120
+ }
121
+
122
+ [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
123
+ opacity: 1 !important;
124
+ }
125
+ }
@@ -0,0 +1,63 @@
1
+ import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
2
+ import { Dynamic } from "solid-js/web"
3
+ import "./text-shimmer-v2.css"
4
+
5
+ export const TextShimmerV2 = <T extends ValidComponent = "span">(props: {
6
+ text: string
7
+ class?: string
8
+ as?: T
9
+ active?: boolean
10
+ offset?: number
11
+ }) => {
12
+ const text = createMemo(() => props.text ?? "")
13
+ const active = createMemo(() => props.active ?? true)
14
+ const offset = createMemo(() => props.offset ?? 0)
15
+ const [run, setRun] = createSignal(active())
16
+ const swap = 220
17
+ let timer: ReturnType<typeof setTimeout> | undefined
18
+
19
+ createEffect(() => {
20
+ if (timer) {
21
+ clearTimeout(timer)
22
+ timer = undefined
23
+ }
24
+
25
+ if (active()) {
26
+ setRun(true)
27
+ return
28
+ }
29
+
30
+ timer = setTimeout(() => {
31
+ timer = undefined
32
+ setRun(false)
33
+ }, swap)
34
+ })
35
+
36
+ onCleanup(() => {
37
+ if (!timer) return
38
+ clearTimeout(timer)
39
+ })
40
+
41
+ return (
42
+ <Dynamic
43
+ component={props.as ?? "span"}
44
+ data-component="text-shimmer-v2"
45
+ data-active={active() ? "true" : "false"}
46
+ class={props.class}
47
+ aria-label={text()}
48
+ style={{
49
+ "--_swap": `${swap}ms`,
50
+ "--_index": `${offset()}`,
51
+ }}
52
+ >
53
+ <span data-slot="text-shimmer-v2-char">
54
+ <span data-slot="text-shimmer-v2-base" aria-hidden="true">
55
+ {text()}
56
+ </span>
57
+ <span data-slot="text-shimmer-v2-shimmer" data-run={run() ? "true" : "false"} aria-hidden="true">
58
+ {text()}
59
+ </span>
60
+ </span>
61
+ </Dynamic>
62
+ )
63
+ }
@@ -1,12 +1,12 @@
1
1
  import { type ComponentProps, splitProps } from "solid-js"
2
- import "./textarea.css"
2
+ import "./textarea-v2.css"
3
3
 
4
- export interface TextareaProps extends ComponentProps<"textarea"> {
4
+ export interface TextareaV2Props extends ComponentProps<"textarea"> {
5
5
  /** Error styling for the field and value text. */
6
6
  invalid?: boolean
7
7
  }
8
8
 
9
- export function Textarea(props: TextareaProps) {
9
+ export function TextareaV2(props: TextareaV2Props) {
10
10
  const [local, textareaProps] = splitProps(props, ["class", "classList", "invalid", "disabled", "rows"])
11
11
 
12
12
  return (
@@ -4,12 +4,12 @@ import type { ComponentProps, JSX } from "solid-js"
4
4
  import { createContext, onCleanup, onMount, splitProps, useContext } from "solid-js"
5
5
  import { Portal } from "solid-js/web"
6
6
  import { useI18n } from "../../context/i18n"
7
- import "../../actions/button/button.css"
8
- import "./toast.css"
7
+ import "./button-v2.css"
8
+ import "./toast-v2.css"
9
9
 
10
- export interface ToastRegionProps extends ToasterProps {}
10
+ export interface ToastV2RegionProps extends ToasterProps {}
11
11
 
12
- function ToastRegion(props: ToastRegionProps) {
12
+ function ToastV2Region(props: ToastV2RegionProps) {
13
13
  const i18n = useI18n()
14
14
  const [local, rest] = splitProps(props, ["class", "className", "style", "toastOptions", "swipeDirections"])
15
15
  onMount(() => {
@@ -67,40 +67,40 @@ function ToastRegion(props: ToastRegionProps) {
67
67
  )
68
68
  }
69
69
 
70
- const ToastContext = createContext<number>()
70
+ const ToastV2Context = createContext<number>()
71
71
 
72
- export interface ToastRootComponentProps {
72
+ export interface ToastV2RootComponentProps {
73
73
  toastId: number
74
74
  children?: JSX.Element
75
75
  }
76
76
 
77
- function ToastRoot(props: ToastRootComponentProps) {
78
- return <ToastContext.Provider value={props.toastId}>{props.children}</ToastContext.Provider>
77
+ function ToastV2Root(props: ToastV2RootComponentProps) {
78
+ return <ToastV2Context.Provider value={props.toastId}>{props.children}</ToastV2Context.Provider>
79
79
  }
80
80
 
81
- function ToastIcon(props: ComponentProps<"div">) {
81
+ function ToastV2Icon(props: ComponentProps<"div">) {
82
82
  return <div data-slot="toast-v2-icon" {...props} />
83
83
  }
84
84
 
85
- function ToastContent(props: ComponentProps<"div">) {
85
+ function ToastV2Content(props: ComponentProps<"div">) {
86
86
  return <div data-slot="toast-v2-content" {...props} />
87
87
  }
88
88
 
89
- function ToastTitle(props: ComponentProps<"div">) {
89
+ function ToastV2Title(props: ComponentProps<"div">) {
90
90
  return <div data-slot="toast-v2-title" {...props} />
91
91
  }
92
92
 
93
- function ToastDescription(props: ComponentProps<"div">) {
93
+ function ToastV2Description(props: ComponentProps<"div">) {
94
94
  return <div data-slot="toast-v2-description" {...props} />
95
95
  }
96
96
 
97
- function ToastActions(props: ComponentProps<"div">) {
97
+ function ToastV2Actions(props: ComponentProps<"div">) {
98
98
  return <div data-slot="toast-v2-actions" {...props} />
99
99
  }
100
100
 
101
- function ToastCloseButton(props: ComponentProps<"button">) {
101
+ function ToastV2CloseButton(props: ComponentProps<"button">) {
102
102
  const i18n = useI18n()
103
- const toastId = useContext(ToastContext)
103
+ const toastId = useContext(ToastV2Context)
104
104
  const [local, rest] = splitProps(props, ["children", "onClick"])
105
105
  return (
106
106
  <button
@@ -110,7 +110,7 @@ function ToastCloseButton(props: ComponentProps<"button">) {
110
110
  {...rest}
111
111
  onClick={(event) => {
112
112
  if (typeof local.onClick === "function") local.onClick(event)
113
- if (!event.defaultPrevented && toastId !== undefined) toaster.dismiss(toastId)
113
+ if (!event.defaultPrevented && toastId !== undefined) toasterV2.dismiss(toastId)
114
114
  }}
115
115
  >
116
116
  {local.children ?? <CloseIcon />}
@@ -127,19 +127,19 @@ function CloseIcon() {
127
127
  )
128
128
  }
129
129
 
130
- export const Toast = Object.assign(ToastRoot, {
131
- Region: ToastRegion,
132
- Icon: ToastIcon,
133
- Content: ToastContent,
134
- Title: ToastTitle,
135
- Description: ToastDescription,
136
- Actions: ToastActions,
137
- CloseButton: ToastCloseButton,
130
+ export const ToastV2 = Object.assign(ToastV2Root, {
131
+ Region: ToastV2Region,
132
+ Icon: ToastV2Icon,
133
+ Content: ToastV2Content,
134
+ Title: ToastV2Title,
135
+ Description: ToastV2Description,
136
+ Actions: ToastV2Actions,
137
+ CloseButton: ToastV2CloseButton,
138
138
  })
139
139
 
140
140
  let toastV2Id = 0
141
141
 
142
- export const toaster = {
142
+ export const toasterV2 = {
143
143
  show(render: (props: { toastId: number }) => JSX.Element, options?: { duration?: number; persistent?: boolean }) {
144
144
  const toastId = --toastV2Id
145
145
  toast.custom((id) => render({ toastId: Number(id) }), {
@@ -152,43 +152,43 @@ export const toaster = {
152
152
  },
153
153
  dismiss(toastId?: number) {
154
154
  if (toastId === undefined) {
155
- activeToastByKey.clear()
156
- activeToastById.clear()
155
+ activeToastV2ByKey.clear()
156
+ activeToastV2ById.clear()
157
157
  } else {
158
- releaseToast(activeToastById.get(toastId))
158
+ releaseToastV2(activeToastV2ById.get(toastId))
159
159
  }
160
160
  return toast.dismiss(toastId)
161
161
  },
162
162
  }
163
163
 
164
- export interface ToastAction {
164
+ export interface ToastV2Action {
165
165
  label: string
166
166
  variant?: "primary" | "secondary"
167
167
  onClick: "dismiss" | (() => void)
168
168
  }
169
169
 
170
- export interface ToastOptions {
170
+ export interface ToastV2Options {
171
171
  title?: string
172
172
  description?: string
173
173
  icon?: JSX.Element
174
174
  variant?: "default" | "success" | "error" | "loading"
175
175
  duration?: number
176
176
  persistent?: boolean
177
- actions?: ToastAction[]
177
+ actions?: ToastV2Action[]
178
178
  }
179
179
 
180
- interface ActiveToast {
180
+ interface ActiveToastV2 {
181
181
  id: number
182
182
  key: string
183
- options: ToastOptions
183
+ options: ToastV2Options
184
184
  actions?: JSX.Element
185
185
  }
186
186
 
187
- const activeToastByKey = new Map<string, ActiveToast>()
188
- const activeToastById = new Map<number, ActiveToast>()
187
+ const activeToastV2ByKey = new Map<string, ActiveToastV2>()
188
+ const activeToastV2ById = new Map<number, ActiveToastV2>()
189
189
 
190
- export function showToast(options: ToastOptions | string) {
191
- const opts: ToastOptions = typeof options === "string" ? { description: options } : options
190
+ export function showToastV2(options: ToastV2Options | string) {
191
+ const opts: ToastV2Options = typeof options === "string" ? { description: options } : options
192
192
  const key = JSON.stringify({
193
193
  title: opts.title,
194
194
  description: opts.description,
@@ -197,29 +197,29 @@ export function showToast(options: ToastOptions | string) {
197
197
  persistent: opts.persistent,
198
198
  actions: opts.actions?.map((action) => [action.label, action.variant]),
199
199
  })
200
- const active = activeToastByKey.get(key)
200
+ const active = activeToastV2ByKey.get(key)
201
201
  const toasts = toast.getToasts()
202
202
 
203
203
  if (active && toasts.at(-1)?.id === active.id) {
204
204
  active.options = opts
205
- publishToast(active)
206
- pulseToast(active.id)
205
+ publishToastV2(active)
206
+ pulseToastV2(active.id)
207
207
  return active.id
208
208
  }
209
209
 
210
- if (active && toasts.some((item) => item.id === active.id)) toaster.dismiss(active.id)
211
- releaseToast(active)
210
+ if (active && toasts.some((item) => item.id === active.id)) toasterV2.dismiss(active.id)
211
+ releaseToastV2(active)
212
212
 
213
- const entry: ActiveToast = { id: --toastV2Id, key, options: opts }
214
- entry.actions = createToastActions(entry)
215
- activeToastByKey.set(key, entry)
216
- activeToastById.set(entry.id, entry)
217
- publishToast(entry)
213
+ const entry: ActiveToastV2 = { id: --toastV2Id, key, options: opts }
214
+ entry.actions = createToastV2Actions(entry)
215
+ activeToastV2ByKey.set(key, entry)
216
+ activeToastV2ById.set(entry.id, entry)
217
+ publishToastV2(entry)
218
218
  return entry.id
219
219
  }
220
220
 
221
- function publishToast(entry: ActiveToast) {
222
- const release = () => releaseToast(entry)
221
+ function publishToastV2(entry: ActiveToastV2) {
222
+ const release = () => releaseToastV2(entry)
223
223
  toast(entry.options.title ?? "", {
224
224
  id: entry.id,
225
225
  description: entry.options.description,
@@ -235,12 +235,10 @@ function publishToast(entry: ActiveToast) {
235
235
  })
236
236
  }
237
237
 
238
- function createToastActions(entry: ActiveToast) {
238
+ function createToastV2Actions(entry: ActiveToastV2) {
239
239
  if (!entry.options.actions?.length) return undefined
240
240
  return (
241
- <Toast.Actions>
242
- {/* Static map, not <For>: this JSX is created imperatively outside any Solid
243
- root, where a <For> computation would never be disposed. */}
241
+ <ToastV2.Actions>
244
242
  {entry.options.actions.map((action, index) => (
245
243
  <button
246
244
  type="button"
@@ -251,17 +249,17 @@ function createToastActions(entry: ActiveToast) {
251
249
  onClick={() => {
252
250
  const onClick = entry.options.actions?.[index]?.onClick
253
251
  if (typeof onClick === "function") onClick()
254
- toaster.dismiss(entry.id)
252
+ toasterV2.dismiss(entry.id)
255
253
  }}
256
254
  >
257
255
  {action.label}
258
256
  </button>
259
257
  ))}
260
- </Toast.Actions>
258
+ </ToastV2.Actions>
261
259
  )
262
260
  }
263
261
 
264
- function pulseToast(toastId: number) {
262
+ function pulseToastV2(toastId: number) {
265
263
  if (typeof document === "undefined" || typeof requestAnimationFrame === "undefined") return
266
264
  requestAnimationFrame(() => {
267
265
  const element = document.querySelector<HTMLElement>(`[data-testid="toast-v2-${toastId}"]`)
@@ -270,13 +268,13 @@ function pulseToast(toastId: number) {
270
268
  })
271
269
  }
272
270
 
273
- function releaseToast(entry: ActiveToast | undefined) {
271
+ function releaseToastV2(entry: ActiveToastV2 | undefined) {
274
272
  if (!entry) return
275
- if (activeToastByKey.get(entry.key) === entry) activeToastByKey.delete(entry.key)
276
- if (activeToastById.get(entry.id) === entry) activeToastById.delete(entry.id)
273
+ if (activeToastV2ByKey.get(entry.key) === entry) activeToastV2ByKey.delete(entry.key)
274
+ if (activeToastV2ById.get(entry.id) === entry) activeToastV2ById.delete(entry.id)
277
275
  }
278
276
 
279
- export interface ToastPromiseOptions<T, U = unknown> {
277
+ export interface ToastV2PromiseOptions<T, U = unknown> {
280
278
  loading?: JSX.Element
281
279
  success?: (data: T) => JSX.Element
282
280
  error?: (error: U) => JSX.Element
@@ -39,32 +39,6 @@
39
39
  }
40
40
  }
41
41
 
42
- [data-component="tooltip-v2"][data-appearance="standard"] {
43
- display: block;
44
- max-width: 320px;
45
- padding: 2px 8px;
46
- border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
47
- border-radius: var(--radius-sm);
48
- background: var(--surface-float-base);
49
- color: var(--text-invert-strong);
50
- box-shadow: var(--shadow-md);
51
- font-family: var(--font-family-sans);
52
- font-size: var(--font-size-small);
53
- font-style: normal;
54
- font-weight: var(--font-weight-medium);
55
- line-height: var(--line-height-large);
56
- letter-spacing: var(--letter-spacing-normal);
57
- font-variant-numeric: normal;
58
- font-variation-settings: normal;
59
- user-select: text;
60
- animation: none;
61
-
62
- &[data-closed]:not([data-force-open="true"]) {
63
- opacity: 0;
64
- animation: none;
65
- }
66
- }
67
-
68
42
  @keyframes tooltipV2In {
69
43
  from {
70
44
  opacity: 0;
@@ -1,12 +1,11 @@
1
- import { Content, Portal, Root, Trigger } from "@kobalte/core/tooltip"
1
+ import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
2
2
  import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
3
3
  import type { ComponentProps } from "solid-js"
4
4
  import { createStore } from "solid-js/store"
5
- import "./tooltip.css"
5
+ import "./tooltip-v2.css"
6
6
 
7
- export interface TooltipProps extends ComponentProps<typeof Root> {
7
+ export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
8
8
  value: JSX.Element
9
- appearance?: "standard" | "compact"
10
9
  class?: string
11
10
  contentClass?: string
12
11
  contentStyle?: JSX.CSSProperties
@@ -14,7 +13,7 @@ export interface TooltipProps extends ComponentProps<typeof Root> {
14
13
  forceOpen?: boolean
15
14
  }
16
15
 
17
- export function Tooltip(props: TooltipProps) {
16
+ export function TooltipV2(props: TooltipV2Props) {
18
17
  let ref: HTMLDivElement | undefined
19
18
  const [state, setState] = createStore({
20
19
  open: false,
@@ -23,7 +22,6 @@ export function Tooltip(props: TooltipProps) {
23
22
  })
24
23
  const [local, others] = splitProps(props, [
25
24
  "children",
26
- "appearance",
27
25
  "class",
28
26
  "contentClass",
29
27
  "contentStyle",
@@ -34,7 +32,6 @@ export function Tooltip(props: TooltipProps) {
34
32
  ])
35
33
 
36
34
  const close = () => setState("open", false)
37
- const controlled = () => local.forceOpen !== undefined
38
35
 
39
36
  const inside = () => {
40
37
  const active = document.activeElement
@@ -89,16 +86,16 @@ export function Tooltip(props: TooltipProps) {
89
86
  <Switch>
90
87
  <Match when={local.inactive}>{local.children}</Match>
91
88
  <Match when={true}>
92
- <Root
89
+ <KobalteTooltip
93
90
  gutter={4}
94
91
  openDelay={400}
95
92
  skipDelayDuration={300}
96
93
  {...others}
97
94
  closeDelay={0}
98
95
  ignoreSafeArea={local.ignoreSafeArea ?? true}
99
- open={controlled() ? local.forceOpen : state.open}
96
+ open={local.forceOpen || state.open}
100
97
  onOpenChange={(open) => {
101
- if (controlled()) return
98
+ if (local.forceOpen) return
102
99
  if (state.block && open) return
103
100
  if (justClickedTrigger) {
104
101
  justClickedTrigger = false
@@ -107,7 +104,7 @@ export function Tooltip(props: TooltipProps) {
107
104
  setState("open", open)
108
105
  }}
109
106
  >
110
- <Trigger
107
+ <KobalteTooltip.Trigger
111
108
  ref={ref}
112
109
  as="div"
113
110
  data-component="tooltip-v2-trigger"
@@ -121,15 +118,14 @@ export function Tooltip(props: TooltipProps) {
121
118
  onFocusOut={() => requestAnimationFrame(() => drop())}
122
119
  >
123
120
  {local.children}
124
- </Trigger>
125
- <Portal>
126
- <Content
121
+ </KobalteTooltip.Trigger>
122
+ <KobalteTooltip.Portal>
123
+ <KobalteTooltip.Content
127
124
  ref={(el) => {
128
125
  const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
129
126
  if (theme) el.setAttribute("data-theme", theme)
130
127
  }}
131
128
  data-component="tooltip-v2"
132
- data-appearance={local.appearance ?? "compact"}
133
129
  data-placement={props.placement}
134
130
  data-force-open={local.forceOpen}
135
131
  class={local.contentClass}
@@ -142,9 +138,9 @@ export function Tooltip(props: TooltipProps) {
142
138
  }}
143
139
  >
144
140
  {local.value}
145
- </Content>
146
- </Portal>
147
- </Root>
141
+ </KobalteTooltip.Content>
142
+ </KobalteTooltip.Portal>
143
+ </KobalteTooltip>
148
144
  </Match>
149
145
  </Switch>
150
146
  )
@@ -1,6 +1,6 @@
1
1
  import { createUniqueId, type ComponentProps } from "solid-js"
2
2
 
3
- export function Wordmark(props: Pick<ComponentProps<"svg">, "class">) {
3
+ export function WordmarkV2(props: Pick<ComponentProps<"svg">, "class">) {
4
4
  const mask = createUniqueId()
5
5
  const maskGradient = createUniqueId()
6
6
 
@@ -1,4 +1,16 @@
1
1
  @layer theme {
2
+ html[data-theme="oc-2"] body:not([data-new-layout]) {
3
+ --text-diff-add-base: light-dark(#167517, #c4ffc0);
4
+ --text-diff-delete-base: light-dark(#fa3012, #ec2f14);
5
+ --syntax-comment: light-dark(#7a7a7a, #8f8f8f);
6
+ --syntax-keyword: light-dark(#a753ae, #edb2f1);
7
+ --syntax-string: #00ceb9;
8
+ --syntax-primitive: light-dark(#034cff, #8cb0ff);
9
+ --syntax-property: light-dark(#a753ae, #fab283);
10
+ --syntax-type: light-dark(#8a6f00, #fcd53a);
11
+ --syntax-critical: light-dark(#ff8c00, #fab283);
12
+ }
13
+
2
14
  :root {
3
15
  color-scheme: light;
4
16
 
@@ -1,10 +0,0 @@
1
- import { Root } from "@kobalte/core/button";
2
- import { type ComponentProps } from "solid-js";
3
- import { type IconProps } from "@opencode-ai/ui/icon";
4
- import "./button.css";
5
- export interface ButtonProps extends ComponentProps<typeof Root>, Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
6
- size?: "small" | "normal" | "large";
7
- variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading";
8
- icon?: IconProps["name"];
9
- }
10
- export declare function Button(props: ButtonProps): import("solid-js").JSX.Element;
@@ -1,11 +0,0 @@
1
- import { Root } from "@kobalte/core/button";
2
- import { type ComponentProps } from "solid-js";
3
- import { JSX } from "solid-js";
4
- import "./icon-button.css";
5
- export interface IconButtonProps extends ComponentProps<typeof Root>, Pick<ComponentProps<"button">, "class" | "classList"> {
6
- icon?: JSX.Element;
7
- size?: "small" | "normal" | "large";
8
- variant?: "neutral" | "contrast" | "ghost" | "ghost-muted";
9
- state?: "rest" | "hover" | "pressed";
10
- }
11
- export declare function IconButton(props: ComponentProps<"button"> & IconButtonProps): JSX.Element;
@@ -1,5 +0,0 @@
1
- import { type ComponentProps, type ParentProps } from "solid-js";
2
- import "./split-button.css";
3
- export declare function SplitButton(props: ParentProps<ComponentProps<"div">>): import("solid-js").JSX.Element;
4
- export declare function SplitButtonAction(props: ComponentProps<"button">): import("solid-js").JSX.Element;
5
- export declare function SplitButtonMenuTrigger(props: ComponentProps<"button">): import("solid-js").JSX.Element;
@@ -1,7 +0,0 @@
1
- import { type ComponentProps } from "solid-js";
2
- import "./badge.css";
3
- export interface BadgeProps extends ComponentProps<"span"> {
4
- appearance?: "standard" | "compact";
5
- variant?: "neutral" | "accent";
6
- }
7
- export declare function Badge(props: BadgeProps): import("solid-js").JSX.Element;
@@ -1,7 +0,0 @@
1
- import { type ComponentProps } from "solid-js";
2
- import "./keybind.css";
3
- export interface KeybindProps extends ComponentProps<"div"> {
4
- keys: string[];
5
- variant?: "neutral" | "ghost";
6
- }
7
- export declare function Keybind(props: KeybindProps): import("solid-js").JSX.Element;
@@ -1,3 +0,0 @@
1
- import { type ComponentProps } from "solid-js";
2
- import "./loader.css";
3
- export declare function Loader(props: ComponentProps<"svg">): import("solid-js").JSX.Element;