@vvedantb/ui 0.17.0 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +253 -3
- package/package.json +13 -5
- package/shell/src/SidebarResize.tsx +1 -4
- package/src/ai-elements/__snapshots__/queue.test.tsx.snap +11 -0
- package/src/ai-elements/activity-question-utils.ts +26 -0
- package/src/ai-elements/activity-question.tsx +159 -0
- package/src/ai-elements/activity-shared.tsx +459 -0
- package/src/ai-elements/activity-step-detail.tsx +115 -0
- package/src/ai-elements/activity-step-label.ts +981 -0
- package/src/ai-elements/activity-tasks-utils.ts +199 -0
- package/src/ai-elements/activity-tasks.tsx +770 -0
- package/src/ai-elements/artifact.tsx +162 -52
- package/src/ai-elements/attachments.tsx +62 -32
- package/src/ai-elements/code-block.tsx +76 -22
- package/src/ai-elements/context.tsx +370 -0
- package/src/ai-elements/conversation.tsx +186 -62
- package/src/ai-elements/file-chip.tsx +53 -0
- package/src/ai-elements/message.tsx +161 -50
- package/src/ai-elements/model-picker-content.tsx +505 -0
- package/src/ai-elements/model-picker-types.ts +56 -0
- package/src/ai-elements/model-picker.tsx +301 -0
- package/src/ai-elements/model-selector.tsx +102 -21
- package/src/ai-elements/plan.tsx +130 -0
- package/src/ai-elements/prompt-input-settings.tsx +144 -0
- package/src/ai-elements/prompt-input-speech.tsx +189 -0
- package/src/ai-elements/prompt-input-traits.tsx +281 -0
- package/src/ai-elements/prompt-input.tsx +320 -134
- package/src/ai-elements/provider-icon.tsx +133 -0
- package/src/ai-elements/queue.tsx +293 -9
- package/src/ai-elements/shimmer.tsx +72 -1
- package/src/ai-elements/simple-model-ladder.tsx +108 -0
- package/src/ai-elements/test-results.tsx +510 -0
- package/src/ai-elements/trace.tsx +243 -0
- package/src/ai-elements/use-streaming-disclosure.ts +50 -0
- package/src/ai-elements/web-preview.tsx +349 -0
- package/src/composer/input-area/ComposerSlashMenu.tsx +1 -1
- package/src/index.ts +66 -12
- package/src/kibo/avatar-stack.tsx +40 -0
- package/src/kibo/contribution-graph.tsx +539 -0
- package/src/kibo/cursor.tsx +72 -0
- package/src/kibo/gantt-features.tsx +439 -0
- package/src/kibo/gantt-header.tsx +181 -0
- package/src/kibo/gantt-provider.tsx +657 -0
- package/src/kibo/gantt-sidebar.tsx +157 -0
- package/src/kibo/gantt-timeline.tsx +154 -0
- package/src/kibo/index.ts +151 -0
- package/src/kibo/kanban.tsx +338 -0
- package/src/kibo/kanbanDropTarget.ts +25 -0
- package/src/kibo/list.tsx +162 -0
- package/src/kibo/theme-switcher.tsx +109 -0
- package/src/kibo/video-player.tsx +237 -0
- package/src/markdown/Markdown.tsx +112 -0
- package/src/markdown/MarkdownBlockquote.tsx +45 -0
- package/src/markdown/MarkdownCodeBlock.tsx +197 -0
- package/src/markdown/MarkdownInlineCode.tsx +40 -0
- package/src/markdown/MarkdownLink.tsx +92 -0
- package/src/markdown/codeFence.ts +57 -0
- package/src/markdown/codeHighlight.ts +138 -0
- package/src/markdown/incrementalBlocks.ts +182 -0
- package/src/markdown/index.ts +3 -0
- package/src/markdown/markdownClipboard.ts +178 -0
- package/src/markdown/mermaid.ts +155 -0
- package/src/markdown/rehypeGithubAlerts.ts +80 -0
- package/src/motion/presets.ts +24 -0
- package/src/ui/__snapshots__/alt-wrappers.test.tsx.snap +19 -0
- package/src/ui/__snapshots__/sonner-dom.test.tsx.snap +5 -0
- package/src/ui/_menu-parts.tsx +29 -0
- package/src/ui/accordion.alt.tsx +46 -53
- package/src/ui/accordion.tsx +59 -10
- package/src/ui/avatar.tsx +56 -0
- package/src/ui/badge.tsx +45 -21
- package/src/ui/border-beam.tsx +97 -0
- package/src/ui/button-group.tsx +50 -21
- package/src/ui/button.tsx +67 -45
- package/src/ui/calendar.tsx +48 -5
- package/src/ui/card.tsx +77 -8
- package/src/ui/carousel.tsx +60 -0
- package/src/ui/centered-spinner.tsx +30 -0
- package/src/ui/checkbox.tsx +34 -16
- package/src/ui/clear-input.alt.tsx +33 -75
- package/src/ui/clear-input.tsx +140 -15
- package/src/ui/collapsible.tsx +40 -2
- package/src/ui/command.tsx +143 -70
- package/src/ui/context-menu.tsx +159 -93
- package/src/ui/crossfade-icon.tsx +123 -0
- package/src/ui/dialog.tsx +154 -70
- package/src/ui/dropdown-menu.tsx +177 -117
- package/src/ui/hover-card.tsx +59 -17
- package/src/ui/input-group.alt.tsx +83 -83
- package/src/ui/input-group.tsx +129 -58
- package/src/ui/input.tsx +13 -4
- package/src/ui/label.tsx +11 -8
- package/src/ui/list-row.tsx +232 -0
- package/src/ui/loading-state.tsx +215 -0
- package/src/ui/popover.tsx +56 -23
- package/src/ui/progress.tsx +28 -16
- package/src/ui/refresh-spin-icon.tsx +41 -0
- package/src/ui/search-input.tsx +66 -15
- package/src/ui/select.tsx +171 -100
- package/src/ui/separator.tsx +23 -14
- package/src/ui/slider.tsx +21 -7
- package/src/ui/sonner.tsx +68 -30
- package/src/ui/spinner.tsx +229 -11
- package/src/ui/status-dot.tsx +84 -0
- package/src/ui/surface.tsx +49 -0
- package/src/ui/switch.tsx +29 -15
- package/src/ui/table.tsx +38 -16
- package/src/ui/tabs.tsx +123 -35
- package/src/ui/tabsSliding.ts +33 -1
- package/src/ui/textarea.tsx +13 -4
- package/src/ui/tooltip.tsx +50 -14
- package/src/ui/ui-config.tsx +149 -0
- package/src/utils/cat-color.ts +123 -0
- package/src/utils/dayjs.ts +6 -0
- package/src/utils/gesture.ts +59 -0
- package/src/utils/runtimeVisibility.ts +167 -0
- package/src/utils/sharedClock.ts +96 -0
- package/src/utils/surface-radius.ts +16 -0
- package/src/utils/useDragSensors.ts +58 -0
- package/tokens/examples/tokens-moved/Fixture.tsx +283 -0
- package/tokens/examples/tokens-moved/README.md +20 -0
- package/tokens/examples/tokens-moved/index.html +12 -0
- package/tokens/examples/tokens-moved/main.tsx +6 -0
- package/tokens/examples/tokens-moved/package.json +14 -0
- package/tokens/examples/tokens-moved/styles.css +12 -0
- package/tokens/examples/tokens-moved/tsconfig.json +14 -0
- package/tokens/examples/tokens-moved/vite.config.ts +11 -0
- package/tokens/src/css/border-beam.css +116 -0
- package/tokens/src/css/compat-shadcn-rgb.css +6 -0
- package/tokens/src/css/markdown.css +318 -0
package/src/index.ts
CHANGED
|
@@ -1,23 +1,42 @@
|
|
|
1
1
|
// Colour, radius, shadow and font tokens live in @vvedantb/ui/tokens. Import that
|
|
2
2
|
// stylesheet in the app. This package does not ship a second token set.
|
|
3
3
|
export { cn } from "./utils/cn";
|
|
4
|
+
export { UiConfigProvider, useUiConfig } from "./ui/ui-config";
|
|
5
|
+
export type { UiConfig, UiConfigProviderProps } from "./ui/ui-config";
|
|
4
6
|
export { floatingSurfaceClass } from "./ui/_menu-classes";
|
|
5
7
|
export { fieldFocusClass, fieldFocusWithinClass } from "./ui/_field-classes";
|
|
6
8
|
export * from "./ui/surface-classes";
|
|
7
9
|
export * from "./motion/presets";
|
|
8
10
|
export * from "./motion/panel-transition";
|
|
11
|
+
// Gesture physics and animation budget helpers (shared clock, on-screen and
|
|
12
|
+
// page-visibility pausing for infinite animations).
|
|
13
|
+
export { DRAG_ACTIVATION_DISTANCE_PX, projectVelocity, rubberband } from "./utils/gesture";
|
|
14
|
+
export {
|
|
15
|
+
bindRuntimeAnimation,
|
|
16
|
+
ensureRuntimeVisibility,
|
|
17
|
+
observeAnimVisibility,
|
|
18
|
+
useAnimOffscreenRef,
|
|
19
|
+
} from "./utils/runtimeVisibility";
|
|
20
|
+
export { msUntilNextBoundary, quantizedSnapshot, subscribeQuantized } from "./utils/sharedClock";
|
|
21
|
+
export { CAT_SLOT_COUNT, catColorForId, catColorForSlot, catSlotForId } from "./utils/cat-color";
|
|
22
|
+
export type { CatColorClasses, CatSlot } from "./utils/cat-color";
|
|
23
|
+
export { CONTROL_RADIUS_CLASS, SURFACE_RADIUS_CLASS } from "./utils/surface-radius";
|
|
9
24
|
export { restoreModalScrollLock } from "./ui/overlay-a11y";
|
|
10
25
|
|
|
26
|
+
export * from "./ui/avatar";
|
|
11
27
|
export * from "./ui/badge";
|
|
28
|
+
export * from "./ui/border-beam";
|
|
12
29
|
export * from "./ui/breadcrumb";
|
|
13
30
|
export * from "./ui/button";
|
|
14
31
|
export * from "./ui/button-group";
|
|
15
32
|
export * from "./ui/card";
|
|
16
33
|
export * from "./ui/carousel";
|
|
34
|
+
export * from "./ui/centered-spinner";
|
|
17
35
|
export * from "./ui/checkbox";
|
|
18
36
|
export * from "./ui/collapsible";
|
|
19
37
|
export * from "./ui/command";
|
|
20
38
|
export * from "./ui/context-menu";
|
|
39
|
+
export * from "./ui/crossfade-icon";
|
|
21
40
|
export * from "./ui/dialog";
|
|
22
41
|
export * from "./ui/alert-dialog";
|
|
23
42
|
export * from "./ui/confirm-dialog";
|
|
@@ -28,9 +47,12 @@ export * from "./ui/input";
|
|
|
28
47
|
export * from "./ui/label";
|
|
29
48
|
export * from "./ui/labeled-slider-row";
|
|
30
49
|
export * from "./ui/labeled-switch-row";
|
|
50
|
+
export * from "./ui/list-row";
|
|
51
|
+
export * from "./ui/loading-state";
|
|
31
52
|
export * from "./ui/pagination";
|
|
32
53
|
export * from "./ui/popover";
|
|
33
54
|
export * from "./ui/progress";
|
|
55
|
+
export * from "./ui/refresh-spin-icon";
|
|
34
56
|
export {
|
|
35
57
|
Select as RadixSelect,
|
|
36
58
|
SelectContent as RadixSelectContent,
|
|
@@ -52,6 +74,8 @@ export * from "./ui/slide-over-panel";
|
|
|
52
74
|
export * from "./ui/slider";
|
|
53
75
|
export * from "./ui/sonner";
|
|
54
76
|
export * from "./ui/spinner";
|
|
77
|
+
export * from "./ui/status-dot";
|
|
78
|
+
export * from "./ui/surface";
|
|
55
79
|
export * from "./ui/switch";
|
|
56
80
|
export * from "./ui/table";
|
|
57
81
|
export * from "./ui/tabs";
|
|
@@ -69,24 +93,25 @@ export * from "./ui/clearInputDissolve";
|
|
|
69
93
|
// Animated nav icons. Styles: `@vvedantb/ui/tokens/css/nav-icons.css`.
|
|
70
94
|
export * from "./icons";
|
|
71
95
|
|
|
72
|
-
// Dual copies: the richer file uses the plain name
|
|
96
|
+
// Dual copies: the richer file uses the plain name. The deprecated `Alt` exports
|
|
97
|
+
// (accordion, clear input, input group) wrap the main parts with the old markup.
|
|
73
98
|
export * from "./ui/accordion";
|
|
74
99
|
export {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
100
|
+
AccordionAlt,
|
|
101
|
+
AccordionItemAlt,
|
|
102
|
+
AccordionTriggerAlt,
|
|
103
|
+
AccordionContentAlt,
|
|
79
104
|
} from "./ui/accordion.alt";
|
|
80
105
|
export * from "./ui/clear-input";
|
|
81
|
-
export {
|
|
106
|
+
export { ClearInputAlt } from "./ui/clear-input.alt";
|
|
82
107
|
export * from "./ui/input-group";
|
|
83
108
|
export {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
109
|
+
InputGroupAlt,
|
|
110
|
+
InputGroupAddonAlt,
|
|
111
|
+
InputGroupButtonAlt,
|
|
112
|
+
InputGroupTextAlt,
|
|
113
|
+
InputGroupInputAlt,
|
|
114
|
+
InputGroupTextareaAlt,
|
|
90
115
|
} from "./ui/input-group.alt";
|
|
91
116
|
export * from "./ui/scroll-area";
|
|
92
117
|
export {
|
|
@@ -99,11 +124,15 @@ export * from "./ai-elements/attachments";
|
|
|
99
124
|
export * from "./ai-elements/chain-of-thought";
|
|
100
125
|
export * from "./ai-elements/code-block";
|
|
101
126
|
export * from "./ai-elements/conversation";
|
|
127
|
+
export * from "./ai-elements/file-chip";
|
|
102
128
|
export * from "./ai-elements/image";
|
|
103
129
|
export * from "./ai-elements/inline-citation";
|
|
104
130
|
export * from "./ai-elements/message";
|
|
105
131
|
export * from "./ai-elements/model-selector";
|
|
106
132
|
export * from "./ai-elements/prompt-input";
|
|
133
|
+
export * from "./ai-elements/prompt-input-settings";
|
|
134
|
+
export * from "./ai-elements/prompt-input-speech";
|
|
135
|
+
export * from "./ai-elements/prompt-input-traits";
|
|
107
136
|
export * from "./ai-elements/queue";
|
|
108
137
|
export * from "./ai-elements/reasoning";
|
|
109
138
|
export * from "./ai-elements/shimmer";
|
|
@@ -111,10 +140,35 @@ export * from "./ai-elements/sources";
|
|
|
111
140
|
export * from "./ai-elements/speech-input";
|
|
112
141
|
export * from "./ai-elements/suggestion";
|
|
113
142
|
|
|
143
|
+
// Agent activity and run surfaces (moved from eva): the activity timeline and
|
|
144
|
+
// its step model, Trace lines, plan, test results, web preview, context usage
|
|
145
|
+
// and the model picker.
|
|
146
|
+
export * from "./ai-elements/activity-shared";
|
|
147
|
+
export * from "./ai-elements/activity-question";
|
|
148
|
+
export * from "./ai-elements/activity-tasks";
|
|
149
|
+
export * from "./ai-elements/trace";
|
|
150
|
+
export * from "./ai-elements/use-streaming-disclosure";
|
|
151
|
+
export * from "./ai-elements/plan";
|
|
152
|
+
export * from "./ai-elements/test-results";
|
|
153
|
+
export * from "./ai-elements/web-preview";
|
|
154
|
+
export * from "./ai-elements/context";
|
|
155
|
+
export * from "./ai-elements/model-picker";
|
|
156
|
+
export * from "./ai-elements/provider-icon";
|
|
157
|
+
|
|
114
158
|
// Artifact viewers: frame with the state bridge, card, list, toolbar, viewer.
|
|
115
159
|
// The core (schemas, state ops, document wrapper) comes from `@vvedantb/server`.
|
|
116
160
|
export * from "./artifacts";
|
|
117
161
|
|
|
162
|
+
// Kibo UI blocks: gantt, kanban, list, contribution graph, video player,
|
|
163
|
+
// cursor, avatar stack, theme switcher. Kanban, list and gantt drag with
|
|
164
|
+
// `useDragSensors`, the shared dnd-kit sensor split.
|
|
165
|
+
export * from "./kibo";
|
|
166
|
+
export { useDragSensors } from "./utils/useDragSensors";
|
|
167
|
+
|
|
168
|
+
// Markdown renderer (Streamdown + code blocks, callouts, links, KaTeX).
|
|
169
|
+
// Styles: `@vvedantb/ui/tokens/css/markdown.css`.
|
|
170
|
+
export * from "./markdown";
|
|
171
|
+
|
|
118
172
|
export * from "./audio";
|
|
119
173
|
|
|
120
174
|
export * from "./composer";
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { Children, type ReactNode } from "react";
|
|
4
|
+
import { useCn } from "../ui/ui-config";
|
|
5
|
+
|
|
6
|
+
export type AvatarStackProps = {
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
className?: string;
|
|
9
|
+
size?: number;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const AvatarStack = ({
|
|
13
|
+
children,
|
|
14
|
+
className,
|
|
15
|
+
size = 24,
|
|
16
|
+
...props
|
|
17
|
+
}: AvatarStackProps) => {
|
|
18
|
+
const merge = useCn();
|
|
19
|
+
return (
|
|
20
|
+
<div className={merge("-space-x-1.5 flex items-center", className)} {...props}>
|
|
21
|
+
{Children.map(children, (child, index) => {
|
|
22
|
+
if (!child) return null;
|
|
23
|
+
return (
|
|
24
|
+
<div
|
|
25
|
+
className="shrink-0 overflow-hidden rounded-full"
|
|
26
|
+
style={{
|
|
27
|
+
width: size,
|
|
28
|
+
height: size,
|
|
29
|
+
maskImage: index
|
|
30
|
+
? `radial-gradient(circle ${size / 2}px at -${size / 4 + size / 10}px 50%, transparent 99%, white 100%)`
|
|
31
|
+
: "",
|
|
32
|
+
}}
|
|
33
|
+
>
|
|
34
|
+
{child}
|
|
35
|
+
</div>
|
|
36
|
+
);
|
|
37
|
+
})}
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
};
|