@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.
- package/dist/{data-display/accordion → components}/accordion.d.ts +6 -6
- package/dist/components/avatar.d.ts +9 -0
- package/dist/components/button.d.ts +9 -0
- package/dist/components/card.d.ts +1 -1
- package/dist/{forms/checkbox → components}/checkbox.d.ts +2 -2
- package/dist/components/dialog.d.ts +12 -0
- package/dist/{data-display/diff-changes → components}/diff-changes.d.ts +1 -2
- package/dist/components/dropdown-menu.d.ts +80 -0
- package/dist/components/icon-button.d.ts +10 -0
- package/dist/{icons/icon/additional-icons.d.ts → components/icon.d.ts} +8 -8
- package/dist/components/keybind.d.ts +6 -0
- package/dist/components/list.d.ts +1 -1
- package/dist/{feedback/progress-circle → components}/progress-circle.d.ts +0 -2
- package/dist/components/radio-group.d.ts +16 -0
- package/dist/components/scroll-view.d.ts +3 -3
- package/dist/components/select.d.ts +21 -0
- package/dist/{forms/switch → components}/switch.d.ts +2 -4
- package/dist/{navigation/tabs → components}/tabs.d.ts +8 -15
- package/dist/components/tag.d.ts +5 -0
- package/dist/{typography/text-shimmer → components}/text-shimmer.d.ts +0 -1
- package/dist/components/toast.d.ts +56 -0
- package/dist/components/tooltip.d.ts +17 -0
- package/dist/context/i18n.d.ts +7 -10
- package/dist/i18n/ar.d.ts +2 -0
- package/dist/i18n/bg.d.ts +2 -0
- package/dist/i18n/br.d.ts +2 -0
- package/dist/i18n/bs.d.ts +2 -0
- package/dist/i18n/da.d.ts +2 -0
- package/dist/i18n/de.d.ts +2 -0
- package/dist/i18n/en.d.ts +1 -209
- package/dist/i18n/es.d.ts +2 -0
- package/dist/i18n/fr.d.ts +2 -0
- package/dist/i18n/ja.d.ts +2 -0
- package/dist/i18n/km.d.ts +2 -0
- package/dist/i18n/ko.d.ts +2 -0
- package/dist/i18n/lo.d.ts +2 -0
- package/dist/i18n/mk.d.ts +2 -0
- package/dist/i18n/mn.d.ts +2 -0
- package/dist/i18n/my.d.ts +2 -0
- package/dist/i18n/pl.d.ts +2 -0
- package/dist/i18n/ru.d.ts +2 -0
- package/dist/i18n/sr.d.ts +2 -0
- package/dist/i18n/tg.d.ts +2 -0
- package/dist/i18n/th.d.ts +2 -0
- package/dist/i18n/tr.d.ts +2 -0
- package/dist/i18n/zh.d.ts +2 -0
- package/dist/i18n/zht.d.ts +2 -0
- package/dist/v2/components/accordion-v2.d.ts +26 -0
- package/dist/{data-display/avatar/avatar.d.ts → v2/components/avatar-v2.d.ts} +1 -1
- package/dist/v2/components/badge-v2.d.ts +6 -0
- package/dist/v2/components/button-v2.d.ts +10 -0
- package/dist/v2/components/checkbox-v2.d.ts +10 -0
- package/dist/{overlays/dialog/dialog.d.ts → v2/components/dialog-v2.d.ts} +2 -1
- package/dist/v2/components/diff-changes-v2.d.ts +11 -0
- package/dist/v2/components/divider-v2.d.ts +5 -0
- package/dist/{forms/field/field.d.ts → v2/components/field-v2.d.ts} +10 -4
- package/dist/v2/components/icon-button-v2.d.ts +11 -0
- package/dist/{icons/icon → v2/components}/icon.d.ts +1 -16
- package/dist/v2/components/inline-input-v2.d.ts +21 -0
- package/dist/v2/components/keybind-v2.d.ts +7 -0
- package/dist/{data-display/line-comment/line-comment.d.ts → v2/components/line-comment-v2.d.ts} +9 -9
- package/dist/v2/components/loader-v2.d.ts +3 -0
- package/dist/v2/components/menu-v2.d.ts +52 -0
- package/dist/v2/components/progress-circle-v2.d.ts +8 -0
- package/dist/{data-display/project-avatar/project-avatar.d.ts → v2/components/project-avatar-v2.d.ts} +1 -1
- package/dist/v2/components/radio-v2.d.ts +16 -0
- package/dist/{navigation/segmented-control/segmented-control.d.ts → v2/components/segmented-control-v2.d.ts} +5 -5
- package/dist/{forms/select/select.d.ts → v2/components/select-v2.d.ts} +6 -4
- package/dist/v2/components/split-button-v2.d.ts +5 -0
- package/dist/v2/components/switch-v2.d.ts +7 -0
- package/dist/v2/components/tabs-v2.d.ts +34 -0
- package/dist/{forms/text-input/text-input.d.ts → v2/components/text-input-v2.d.ts} +3 -3
- package/dist/v2/components/text-shimmer-v2.d.ts +9 -0
- package/dist/v2/components/textarea-v2.d.ts +7 -0
- package/dist/v2/components/toast-v2.d.ts +57 -0
- package/dist/v2/components/tooltip-v2.d.ts +13 -0
- package/dist/v2/components/wordmark-v2.d.ts +2 -0
- package/package.json +13 -131
- package/src/{data-display/accordion → components}/accordion.css +26 -1
- package/src/{data-display/accordion → components}/accordion.tsx +14 -14
- package/src/components/animated-number.css +11 -29
- package/src/components/animated-number.tsx +2 -2
- package/src/components/avatar.css +49 -0
- package/src/components/avatar.tsx +55 -0
- package/src/components/button.css +194 -0
- package/src/components/button.tsx +33 -0
- package/src/components/card.css +23 -2
- package/src/components/card.tsx +4 -4
- package/src/{forms/checkbox → components}/checkbox.css +7 -1
- package/src/{forms/checkbox → components}/checkbox.tsx +13 -13
- package/src/components/collapsible.tsx +1 -1
- package/src/components/dialog.css +181 -0
- package/src/components/dialog.tsx +72 -0
- package/src/{data-display/diff-changes → components}/diff-changes.css +19 -22
- package/src/components/diff-changes.tsx +115 -0
- package/src/components/dropdown-menu.css +135 -0
- package/src/components/dropdown-menu.tsx +308 -0
- package/src/components/icon-button.css +181 -0
- package/src/components/icon-button.tsx +29 -0
- package/src/components/icon.css +39 -0
- package/src/{icons/icon/additional-icons.ts → components/icon.tsx} +74 -8
- package/src/components/image-preview.tsx +2 -3
- package/src/components/keybind.css +18 -0
- package/src/components/keybind.tsx +20 -0
- package/src/components/list.css +5 -5
- package/src/components/list.tsx +5 -7
- package/src/components/popover.tsx +2 -3
- package/src/components/progress-circle.css +16 -0
- package/src/components/progress-circle.tsx +64 -0
- package/src/components/provider-icon.tsx +1 -1
- package/src/components/radio-group.css +187 -0
- package/src/components/radio-group.tsx +83 -0
- package/src/components/scroll-view.tsx +20 -5
- package/src/components/select.css +201 -0
- package/src/components/select.tsx +174 -0
- package/src/components/sticky-accordion-header.tsx +1 -1
- package/src/components/switch.css +136 -0
- package/src/components/switch.tsx +29 -0
- package/src/{navigation/tabs → components}/tabs.css +229 -39
- package/src/components/tabs.tsx +126 -0
- package/src/components/tag.css +37 -0
- package/src/components/tag.tsx +22 -0
- package/src/components/text-field.tsx +4 -12
- package/src/{typography/text-shimmer → components}/text-shimmer.css +1 -2
- package/src/{typography/text-shimmer → components}/text-shimmer.tsx +0 -1
- package/src/components/toast.css +236 -0
- package/src/components/toast.tsx +185 -0
- package/src/components/tooltip.css +74 -0
- package/src/components/tooltip.tsx +163 -0
- package/src/context/i18n.tsx +14 -17
- package/src/hooks/create-auto-scroll.tsx +0 -20
- package/src/i18n/am.ts +2 -0
- package/src/i18n/ar.ts +2 -0
- package/src/i18n/az.ts +2 -0
- package/src/i18n/bg.ts +2 -0
- package/src/i18n/bn.ts +2 -0
- package/src/i18n/br.ts +2 -0
- package/src/i18n/bs.ts +2 -0
- package/src/i18n/ca.ts +2 -0
- package/src/i18n/cs.ts +2 -0
- package/src/i18n/da.ts +2 -0
- package/src/i18n/de.ts +2 -0
- package/src/i18n/dv.ts +2 -0
- package/src/i18n/dz.ts +2 -0
- package/src/i18n/el.ts +2 -0
- package/src/i18n/en.ts +4 -18
- package/src/i18n/es.ts +2 -0
- package/src/i18n/et.ts +2 -0
- package/src/i18n/fa.ts +2 -0
- package/src/i18n/fi.ts +2 -0
- package/src/i18n/fo.ts +2 -0
- package/src/i18n/fr.ts +2 -0
- package/src/i18n/hi.ts +2 -0
- package/src/i18n/hr.ts +2 -0
- package/src/i18n/hu.ts +2 -0
- package/src/i18n/hy.ts +2 -0
- package/src/i18n/id.ts +2 -0
- package/src/i18n/is.ts +2 -0
- package/src/i18n/it.ts +2 -0
- package/src/i18n/ja.ts +2 -0
- package/src/i18n/ka.ts +2 -0
- package/src/i18n/km.ts +2 -0
- package/src/i18n/ko.ts +2 -0
- package/src/i18n/lo.ts +2 -0
- package/src/i18n/lt.ts +2 -0
- package/src/i18n/lv.ts +2 -0
- package/src/i18n/mk.ts +2 -0
- package/src/i18n/mn.ts +2 -0
- package/src/i18n/ms.ts +2 -0
- package/src/i18n/my.ts +2 -0
- package/src/i18n/ne.ts +2 -0
- package/src/i18n/nl.ts +2 -0
- package/src/i18n/no.ts +2 -0
- package/src/i18n/pa.ts +2 -0
- package/src/i18n/pl.ts +2 -0
- package/src/i18n/ro.ts +2 -0
- package/src/i18n/ru.ts +2 -0
- package/src/i18n/si.ts +2 -0
- package/src/i18n/sk.ts +2 -0
- package/src/i18n/sl.ts +2 -0
- package/src/i18n/sq.ts +2 -0
- package/src/i18n/sr.ts +2 -0
- package/src/i18n/sv.ts +2 -0
- package/src/i18n/tg.ts +2 -0
- package/src/i18n/th.ts +2 -0
- package/src/i18n/tk.ts +2 -0
- package/src/i18n/tr.ts +2 -0
- package/src/i18n/uk.ts +2 -0
- package/src/i18n/ur.ts +2 -0
- package/src/i18n/uz.ts +2 -0
- package/src/i18n/vi.ts +2 -0
- package/src/i18n/zh.ts +2 -0
- package/src/i18n/zht.ts +2 -0
- package/src/styles/index.css +20 -4
- package/src/styles/tailwind/index.css +1 -15
- package/src/theme/context.tsx +11 -19
- package/src/theme/themes/oc-2.json +1 -1
- package/src/v2/components/accordion-v2.css +139 -0
- package/src/v2/components/accordion-v2.tsx +86 -0
- package/src/{data-display/avatar/avatar.tsx → v2/components/avatar-v2.tsx} +1 -1
- package/src/{data-display/badge/badge.css → v2/components/badge-v2.css} +0 -19
- package/src/{data-display/badge/badge.tsx → v2/components/badge-v2.tsx} +4 -6
- package/src/{actions/button/button.tsx → v2/components/button-v2.tsx} +8 -8
- package/src/v2/components/checkbox-v2.css +184 -0
- package/src/v2/components/checkbox-v2.tsx +65 -0
- package/src/{overlays/dialog/dialog.css → v2/components/dialog-v2.css} +0 -3
- package/src/{overlays/dialog/dialog.tsx → v2/components/dialog-v2.tsx} +13 -11
- package/src/v2/components/diff-changes-v2.css +26 -0
- package/src/{data-display/diff-changes/diff-changes.tsx → v2/components/diff-changes-v2.tsx} +2 -7
- package/src/{layout/divider/divider.tsx → v2/components/divider-v2.tsx} +3 -3
- package/src/{forms/field/field.tsx → v2/components/field-v2.tsx} +11 -9
- package/src/v2/components/icon-button-v2.tsx +37 -0
- package/src/{icons/icon → v2/components}/icon.tsx +9 -42
- package/src/v2/components/inline-input-v2.css +225 -0
- package/src/v2/components/inline-input-v2.tsx +107 -0
- package/src/{data-display/keybind/keybind.css → v2/components/keybind-v2.css} +1 -1
- package/src/{data-display/keybind/keybind.tsx → v2/components/keybind-v2.tsx} +3 -3
- package/src/{data-display/line-comment/line-comment.tsx → v2/components/line-comment-v2.tsx} +15 -17
- package/src/{feedback/loader/loader.tsx → v2/components/loader-v2.tsx} +2 -2
- package/src/{navigation/menu/menu.css → v2/components/menu-v2.css} +0 -121
- package/src/{navigation/menu/menu.tsx → v2/components/menu-v2.tsx} +32 -96
- package/src/v2/components/progress-circle-v2.css +13 -0
- package/src/v2/components/progress-circle-v2.tsx +52 -0
- package/src/{data-display/project-avatar/project-avatar.tsx → v2/components/project-avatar-v2.tsx} +1 -1
- package/src/{forms/radio/radio.tsx → v2/components/radio-v2.tsx} +20 -30
- package/src/{navigation/segmented-control/segmented-control.tsx → v2/components/segmented-control-v2.tsx} +8 -9
- package/src/{forms/select/select.css → v2/components/select-v2.css} +8 -2
- package/src/{forms/select/select.tsx → v2/components/select-v2.tsx} +32 -38
- package/src/{actions/split-button/split-button.css → v2/components/split-button-v2.css} +6 -1
- package/src/{actions/split-button/split-button.tsx → v2/components/split-button-v2.tsx} +4 -4
- package/src/{forms/switch/switch.css → v2/components/switch-v2.css} +0 -110
- package/src/v2/components/switch-v2.tsx +28 -0
- package/src/{navigation/tabs/tabs-current.css → v2/components/tabs-v2.css} +9 -24
- package/src/v2/components/tabs-v2.tsx +149 -0
- package/src/{forms/text-input/text-input.tsx → v2/components/text-input-v2.tsx} +4 -4
- package/src/v2/components/text-shimmer-v2.css +125 -0
- package/src/v2/components/text-shimmer-v2.tsx +63 -0
- package/src/{forms/textarea/textarea.tsx → v2/components/textarea-v2.tsx} +3 -3
- package/src/{feedback/toast/toast.tsx → v2/components/toast-v2.tsx} +58 -60
- package/src/{overlays/tooltip/tooltip.css → v2/components/tooltip-v2.css} +0 -26
- package/src/{overlays/tooltip/tooltip.tsx → v2/components/tooltip-v2.tsx} +14 -18
- package/src/{typography/wordmark/wordmark.tsx → v2/components/wordmark-v2.tsx} +1 -1
- package/src/{styles/tokens → v2/styles}/theme.css +12 -0
- package/dist/actions/button/button.d.ts +0 -10
- package/dist/actions/icon-button/icon-button.d.ts +0 -11
- package/dist/actions/split-button/split-button.d.ts +0 -5
- package/dist/data-display/badge/badge.d.ts +0 -7
- package/dist/data-display/keybind/keybind.d.ts +0 -7
- package/dist/feedback/loader/loader.d.ts +0 -3
- package/dist/feedback/toast/toast.d.ts +0 -57
- package/dist/forms/radio/radio.d.ts +0 -16
- package/dist/forms/textarea/textarea.d.ts +0 -7
- package/dist/i18n/he.d.ts +0 -197
- package/dist/layout/divider/divider.d.ts +0 -5
- package/dist/navigation/menu/menu.d.ts +0 -59
- package/dist/overlays/tooltip/tooltip.d.ts +0 -14
- package/dist/typography/wordmark/wordmark.d.ts +0 -2
- package/src/actions/icon-button/icon-button.tsx +0 -32
- package/src/feedback/progress-circle/progress-circle.css +0 -28
- package/src/feedback/progress-circle/progress-circle.tsx +0 -64
- package/src/forms/switch/switch.tsx +0 -34
- package/src/i18n/he.ts +0 -199
- package/src/icons/icon/icon.css +0 -3
- package/src/navigation/tabs/tabs.tsx +0 -194
- /package/dist/{forms/inline-input → components}/inline-input.d.ts +0 -0
- /package/dist/{navigation → v2/components}/tab-state-indicator.d.ts +0 -0
- /package/src/{forms/inline-input → components}/inline-input.css +0 -0
- /package/src/{forms/inline-input → components}/inline-input.tsx +0 -0
- /package/src/{data-display/avatar/avatar.css → v2/components/avatar-v2.css} +0 -0
- /package/src/{actions/button/button.css → v2/components/button-v2.css} +0 -0
- /package/src/{layout/divider/divider.css → v2/components/divider-v2.css} +0 -0
- /package/src/{forms/field/field.css → v2/components/field-v2.css} +0 -0
- /package/src/{styles/file-tree.css → v2/components/file-tree-v2.css} +0 -0
- /package/src/{actions/icon-button/icon-button.css → v2/components/icon-button-v2.css} +0 -0
- /package/src/{data-display/line-comment/line-comment.css → v2/components/line-comment-v2.css} +0 -0
- /package/src/{feedback/loader/loader.css → v2/components/loader-v2.css} +0 -0
- /package/src/{data-display/project-avatar/project-avatar.css → v2/components/project-avatar-v2.css} +0 -0
- /package/src/{forms/radio/radio.css → v2/components/radio-v2.css} +0 -0
- /package/src/{navigation/segmented-control/segmented-control.css → v2/components/segmented-control-v2.css} +0 -0
- /package/src/{navigation → v2/components}/tab-state-indicator.tsx +0 -0
- /package/src/{forms/text-input/text-input.css → v2/components/text-input-v2.css} +0 -0
- /package/src/{forms/textarea/textarea.css → v2/components/textarea-v2.css} +0 -0
- /package/src/{feedback/toast/toast.css → v2/components/toast-v2.css} +0 -0
- /package/src/{styles/tokens → v2/styles}/colors.css +0 -0
- /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
|
|
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
|
|
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 "
|
|
8
|
-
import "./toast.css"
|
|
7
|
+
import "./button-v2.css"
|
|
8
|
+
import "./toast-v2.css"
|
|
9
9
|
|
|
10
|
-
export interface
|
|
10
|
+
export interface ToastV2RegionProps extends ToasterProps {}
|
|
11
11
|
|
|
12
|
-
function
|
|
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
|
|
70
|
+
const ToastV2Context = createContext<number>()
|
|
71
71
|
|
|
72
|
-
export interface
|
|
72
|
+
export interface ToastV2RootComponentProps {
|
|
73
73
|
toastId: number
|
|
74
74
|
children?: JSX.Element
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
function
|
|
78
|
-
return <
|
|
77
|
+
function ToastV2Root(props: ToastV2RootComponentProps) {
|
|
78
|
+
return <ToastV2Context.Provider value={props.toastId}>{props.children}</ToastV2Context.Provider>
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
function
|
|
81
|
+
function ToastV2Icon(props: ComponentProps<"div">) {
|
|
82
82
|
return <div data-slot="toast-v2-icon" {...props} />
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
function
|
|
85
|
+
function ToastV2Content(props: ComponentProps<"div">) {
|
|
86
86
|
return <div data-slot="toast-v2-content" {...props} />
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
function
|
|
89
|
+
function ToastV2Title(props: ComponentProps<"div">) {
|
|
90
90
|
return <div data-slot="toast-v2-title" {...props} />
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
function
|
|
93
|
+
function ToastV2Description(props: ComponentProps<"div">) {
|
|
94
94
|
return <div data-slot="toast-v2-description" {...props} />
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
function
|
|
97
|
+
function ToastV2Actions(props: ComponentProps<"div">) {
|
|
98
98
|
return <div data-slot="toast-v2-actions" {...props} />
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
function
|
|
101
|
+
function ToastV2CloseButton(props: ComponentProps<"button">) {
|
|
102
102
|
const i18n = useI18n()
|
|
103
|
-
const toastId = useContext(
|
|
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)
|
|
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
|
|
131
|
-
Region:
|
|
132
|
-
Icon:
|
|
133
|
-
Content:
|
|
134
|
-
Title:
|
|
135
|
-
Description:
|
|
136
|
-
Actions:
|
|
137
|
-
CloseButton:
|
|
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
|
|
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
|
-
|
|
156
|
-
|
|
155
|
+
activeToastV2ByKey.clear()
|
|
156
|
+
activeToastV2ById.clear()
|
|
157
157
|
} else {
|
|
158
|
-
|
|
158
|
+
releaseToastV2(activeToastV2ById.get(toastId))
|
|
159
159
|
}
|
|
160
160
|
return toast.dismiss(toastId)
|
|
161
161
|
},
|
|
162
162
|
}
|
|
163
163
|
|
|
164
|
-
export interface
|
|
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
|
|
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?:
|
|
177
|
+
actions?: ToastV2Action[]
|
|
178
178
|
}
|
|
179
179
|
|
|
180
|
-
interface
|
|
180
|
+
interface ActiveToastV2 {
|
|
181
181
|
id: number
|
|
182
182
|
key: string
|
|
183
|
-
options:
|
|
183
|
+
options: ToastV2Options
|
|
184
184
|
actions?: JSX.Element
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
const
|
|
188
|
-
const
|
|
187
|
+
const activeToastV2ByKey = new Map<string, ActiveToastV2>()
|
|
188
|
+
const activeToastV2ById = new Map<number, ActiveToastV2>()
|
|
189
189
|
|
|
190
|
-
export function
|
|
191
|
-
const opts:
|
|
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 =
|
|
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
|
-
|
|
206
|
-
|
|
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))
|
|
211
|
-
|
|
210
|
+
if (active && toasts.some((item) => item.id === active.id)) toasterV2.dismiss(active.id)
|
|
211
|
+
releaseToastV2(active)
|
|
212
212
|
|
|
213
|
-
const entry:
|
|
214
|
-
entry.actions =
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
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
|
|
222
|
-
const release = () =>
|
|
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
|
|
238
|
+
function createToastV2Actions(entry: ActiveToastV2) {
|
|
239
239
|
if (!entry.options.actions?.length) return undefined
|
|
240
240
|
return (
|
|
241
|
-
<
|
|
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
|
-
|
|
252
|
+
toasterV2.dismiss(entry.id)
|
|
255
253
|
}}
|
|
256
254
|
>
|
|
257
255
|
{action.label}
|
|
258
256
|
</button>
|
|
259
257
|
))}
|
|
260
|
-
</
|
|
258
|
+
</ToastV2.Actions>
|
|
261
259
|
)
|
|
262
260
|
}
|
|
263
261
|
|
|
264
|
-
function
|
|
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
|
|
271
|
+
function releaseToastV2(entry: ActiveToastV2 | undefined) {
|
|
274
272
|
if (!entry) return
|
|
275
|
-
if (
|
|
276
|
-
if (
|
|
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
|
|
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 {
|
|
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
|
|
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
|
|
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
|
-
<
|
|
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={
|
|
96
|
+
open={local.forceOpen || state.open}
|
|
100
97
|
onOpenChange={(open) => {
|
|
101
|
-
if (
|
|
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
|
-
</
|
|
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
|
|
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;
|