@mcp-b/react-components 0.19.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/dist/{AgentChat-ClxViuUM.d.ts → AgentChat-CaQaT0LF.d.ts} +1 -1
  2. package/dist/{Button-DLGzHsjc.d.ts → Button-yRInko9u.d.ts} +0 -1
  3. package/dist/{CodeBlock-gV4kZeCI.d.ts → CodeBlock-Bbls1CnA.d.ts} +1 -1
  4. package/dist/{Combobox-CYc37s5l.d.ts → Combobox-xEEF6fUb.d.ts} +0 -1
  5. package/dist/{PromptInput-Bdh9pqlo.d.ts → PromptInput-Cq-8RoXD.d.ts} +6 -4
  6. package/dist/{Tabs-ColWK-XA.d.ts → Tabs-C49J5m0Q.d.ts} +16 -2
  7. package/dist/{ThinkChatActivity-Bzot45kX.d.ts → ThinkChatActivity-CnIJPvV5.d.ts} +1 -1
  8. package/dist/{Workspace-Jez8ffUj.d.ts → Workspace-CWtust-2.d.ts} +1 -1
  9. package/dist/{WorkspaceExplorer-B9dQWNVK.d.ts → WorkspaceExplorer-DGigwsgH.d.ts} +1 -1
  10. package/dist/{WorkspaceFile-CzyHnESE.d.ts → WorkspaceFile-D8Un_xge.d.ts} +1 -1
  11. package/dist/components/AgentAttention.d.ts +1 -1
  12. package/dist/components/AgentChat.d.ts +1 -1
  13. package/dist/components/AgentChatMessageEditor.js +1 -0
  14. package/dist/components/AgentConnection.js +14 -11
  15. package/dist/components/AlertDialog.d.ts +24 -5
  16. package/dist/components/AlertDialog.js +15 -4
  17. package/dist/components/AppTopBar.js +1 -0
  18. package/dist/components/Artifact.d.ts +1 -1
  19. package/dist/components/Badge.d.ts +7 -10
  20. package/dist/components/Badge.js +14 -48
  21. package/dist/components/Button.d.ts +1 -1
  22. package/dist/components/Button.js +1 -3
  23. package/dist/components/Checkbox.d.ts +2 -5
  24. package/dist/components/Checkbox.js +0 -1
  25. package/dist/components/CodeBlock.d.ts +1 -1
  26. package/dist/components/Combobox.d.ts +1 -1
  27. package/dist/components/Combobox.js +1 -2
  28. package/dist/components/Commit.d.ts +1 -1
  29. package/dist/components/Context.js +8 -1
  30. package/dist/components/Conversation.d.ts +1 -1
  31. package/dist/components/Dialog.d.ts +1 -0
  32. package/dist/components/Dialog.js +14 -3
  33. package/dist/components/EnvironmentVariables.d.ts +1 -1
  34. package/dist/components/IconButton.d.ts +1 -1
  35. package/dist/components/InlineCitation.js +1 -0
  36. package/dist/components/Marker.d.ts +3 -11
  37. package/dist/components/Marker.js +15 -43
  38. package/dist/components/MediaPreviewCard.js +1 -1
  39. package/dist/components/Menubar.d.ts +5 -1
  40. package/dist/components/Menubar.js +9 -2
  41. package/dist/components/Message.d.ts +1 -1
  42. package/dist/components/MessageScroller.d.ts +1 -1
  43. package/dist/components/ModelSelector.d.ts +1 -1
  44. package/dist/components/NavigationMenu.d.ts +2 -6
  45. package/dist/components/Popover.d.ts +6 -1
  46. package/dist/components/Popover.js +12 -4
  47. package/dist/components/PromptInput.d.ts +1 -1
  48. package/dist/components/Queue.d.ts +1 -1
  49. package/dist/components/RadioGroup.d.ts +1 -3
  50. package/dist/components/ResponsiveSidebarShell.js +1 -1
  51. package/dist/components/ScrollArea.d.ts +19 -8
  52. package/dist/components/ScrollArea.js +17 -8
  53. package/dist/components/Select.js +2 -2
  54. package/dist/components/Slider.d.ts +1 -3
  55. package/dist/components/Stepper.d.ts +6 -20
  56. package/dist/components/Stepper.js +31 -129
  57. package/dist/components/SubagentRunDetails.js +1 -0
  58. package/dist/components/Tabs.d.ts +1 -1
  59. package/dist/components/Tabs.js +8 -8
  60. package/dist/components/Terminal.d.ts +2 -2
  61. package/dist/components/ThinkChat.d.ts +5 -5
  62. package/dist/components/ThinkChatActivity.d.ts +1 -1
  63. package/dist/components/ThinkFullApp.d.ts +2 -2
  64. package/dist/components/ThinkFullApp.js +1 -1
  65. package/dist/components/ThinkRoutineLibrary.js +1 -1
  66. package/dist/components/Toast.d.ts +1 -0
  67. package/dist/components/Toast.js +9 -2
  68. package/dist/components/Toggle.js +7 -7
  69. package/dist/components/Toolbar.d.ts +10 -2
  70. package/dist/components/Toolbar.js +17 -4
  71. package/dist/components/WebPreview.d.ts +1 -1
  72. package/dist/components/Workspace.d.ts +1 -1
  73. package/dist/components/WorkspaceBrowser.d.ts +1 -1
  74. package/dist/components/WorkspaceExplorer.d.ts +3 -3
  75. package/dist/components/WorkspaceExplorer.js +1 -1
  76. package/dist/components/WorkspaceFile.d.ts +1 -1
  77. package/dist/components/WorkspaceFileView.d.ts +1 -1
  78. package/dist/{copy-button-D7aAYA-2.d.ts → copy-button-BrvQ7z4W.d.ts} +1 -1
  79. package/dist/{merge-refs-DF_7w2x_.js → merge-refs-KlanQB7A.js} +1 -1
  80. package/dist/styles/accordion.css +3 -3
  81. package/dist/styles/activity.css +4 -4
  82. package/dist/styles/agent-chat.css +1 -1
  83. package/dist/styles/agent-connection.css +3 -3
  84. package/dist/styles/agent-tool-detail.css +1 -1
  85. package/dist/styles/alert-dialog.css +1 -107
  86. package/dist/styles/approval.css +1 -1
  87. package/dist/styles/artifact.css +1 -6
  88. package/dist/styles/badge.css +2 -2
  89. package/dist/styles/base-ui-motion.css +26 -13
  90. package/dist/styles/base.css +1 -1
  91. package/dist/styles/browser-run-panel.css +2 -2
  92. package/dist/styles/button.css +2 -2
  93. package/dist/styles/chain-of-thought.css +1 -1
  94. package/dist/styles/chatgpt-sign-in-screen.css +1 -1
  95. package/dist/styles/checkbox.css +2 -2
  96. package/dist/styles/codex-model-selector.css +3 -3
  97. package/dist/styles/collapsible.css +1 -1
  98. package/dist/styles/context.css +1 -1
  99. package/dist/styles/dialog.css +1 -54
  100. package/dist/styles/field.css +6 -6
  101. package/dist/styles/inline-citation.css +2 -2
  102. package/dist/styles/label.css +3 -6
  103. package/dist/styles/marker.css +1 -1
  104. package/dist/styles/mcp-server-picker.css +1 -1
  105. package/dist/styles/media-preview-card.css +1 -1
  106. package/dist/styles/menubar.css +2 -41
  107. package/dist/styles/message.css +0 -7
  108. package/dist/styles/motion-reduction.css +2 -4
  109. package/dist/styles/navigation-menu.css +6 -1
  110. package/dist/styles/number-field.css +8 -8
  111. package/dist/styles/plan.css +2 -2
  112. package/dist/styles/popover.css +2 -38
  113. package/dist/styles/pricing-page.css +1 -1
  114. package/dist/styles/progress.css +4 -4
  115. package/dist/styles/prompt-input.css +1 -1
  116. package/dist/styles/radio.css +2 -2
  117. package/dist/styles/recipes.css +93 -18
  118. package/dist/styles/scroll-area.css +0 -18
  119. package/dist/styles/select.css +5 -8
  120. package/dist/styles/slider.css +0 -1
  121. package/dist/styles/stepper.css +4 -4
  122. package/dist/styles/streamdown.css +1 -1
  123. package/dist/styles/subagent-run.css +2 -9
  124. package/dist/styles/switch.css +2 -2
  125. package/dist/styles/tabs.css +59 -4
  126. package/dist/styles/task.css +1 -1
  127. package/dist/styles/terminal.css +1 -5
  128. package/dist/styles/theme-mode-control.css +1 -1
  129. package/dist/styles/think-thread-picker.css +1 -1
  130. package/dist/styles/toast.css +1 -30
  131. package/dist/styles/toggle.css +5 -19
  132. package/dist/styles/toolbar.css +17 -74
  133. package/dist/styles/tooltip.css +1 -1
  134. package/dist/styles/workspace-explorer.css +0 -9
  135. package/dist/utils/structured-code.d.ts +1 -1
  136. package/package.json +2 -2
@@ -1,5 +1,5 @@
1
1
  import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-CyD2UB3V.js";
2
- import { $ as PromptInputDictationProps, A as PromptInputCommandDefinition, X as PromptInputContextSelectorProps, gt as PromptInputReference, n as PermissionMode, ut as PromptInputMessage } from "./PromptInput-Bdh9pqlo.js";
2
+ import { $ as PromptInputDictationProps, A as PromptInputCommandDefinition, X as PromptInputContextSelectorProps, gt as PromptInputReference, n as PermissionMode, ut as PromptInputMessage } from "./PromptInput-Cq-8RoXD.js";
3
3
  import * as React from "react";
4
4
  import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
5
5
  import { PendingApproval, Think } from "@cloudflare/think";
@@ -92,7 +92,6 @@ declare function Button$1({
92
92
  size,
93
93
  iconOnly,
94
94
  className,
95
- nativeButton,
96
95
  ref,
97
96
  ...props
98
97
  }: ButtonProps & {
@@ -1,5 +1,5 @@
1
1
  import { m as SelectProps, t as Select } from "./Select-B_13gg_J.js";
2
- import { t as CopyButtonProps } from "./copy-button-D7aAYA-2.js";
2
+ import { t as CopyButtonProps } from "./copy-button-BrvQ7z4W.js";
3
3
  import * as React from "react";
4
4
  import { BundledLanguage, ThemedToken } from "shiki";
5
5
 
@@ -32,7 +32,6 @@ declare function ComboboxPositioner({
32
32
  }): React.JSX.Element;
33
33
  declare function ComboboxPopup({
34
34
  className,
35
- tabIndex,
36
35
  ref,
37
36
  ...props
38
37
  }: React.ComponentPropsWithRef<typeof Combobox.Popup> & {
@@ -1,7 +1,7 @@
1
- import { r as ButtonProps } from "./Button-DLGzHsjc.js";
1
+ import { r as ButtonProps } from "./Button-yRInko9u.js";
2
2
  import { _ as SelectSeparatorProps, a as SelectIconProps, c as SelectItemTextProps, d as SelectPopupProps, g as SelectScrollUpArrowProps, h as SelectScrollDownArrowProps, i as SelectGroupProps, l as SelectLabelProps, m as SelectProps, n as SelectBackdropProps, o as SelectItemIndicatorProps, p as SelectPositionerProps, r as SelectGroupLabelProps, s as SelectItemProps, t as Select, u as SelectListProps, v as SelectTriggerProps, y as SelectValueProps } from "./Select-B_13gg_J.js";
3
- import { a as TabsListProps, n as TabProps, r as Tabs, t as TabPanelProps } from "./Tabs-ColWK-XA.js";
4
- import { t as Combobox } from "./Combobox-CYc37s5l.js";
3
+ import { a as TabsListProps, n as TabProps, r as Tabs, t as TabPanelProps } from "./Tabs-C49J5m0Q.js";
4
+ import { t as Combobox } from "./Combobox-xEEF6fUb.js";
5
5
  import { d as MenuProps, s as MenuItemProps, t as Menu } from "./Menu-L6MZm-7N.js";
6
6
  import * as React from "react";
7
7
  import { ChatAddToolApproveResponseFunction, ChatStatus, DynamicToolUIPart, FileUIPart, ToolUIPart, UIMessage } from "ai";
@@ -578,6 +578,7 @@ type PromptInputTabsListProps = React.ComponentPropsWithoutRef<typeof Tabs.List>
578
578
  declare const PromptInputTabsList: ({
579
579
  className,
580
580
  variant,
581
+ unstyled,
581
582
  ref,
582
583
  ...props
583
584
  }: TabsListProps & {
@@ -586,6 +587,7 @@ declare const PromptInputTabsList: ({
586
587
  type PromptInputTabProps = React.ComponentPropsWithoutRef<typeof Tabs.Tab>;
587
588
  declare const PromptInputTab: ({
588
589
  className,
590
+ unstyled,
589
591
  ref,
590
592
  ...props
591
593
  }: TabProps & {
@@ -594,6 +596,7 @@ declare const PromptInputTab: ({
594
596
  type PromptInputTabBodyProps = React.ComponentPropsWithoutRef<typeof Tabs.Panel>;
595
597
  declare const PromptInputTabBody: ({
596
598
  className,
599
+ unstyled,
597
600
  ref,
598
601
  ...props
599
602
  }: TabPanelProps & {
@@ -649,7 +652,6 @@ declare const PromptInputCommand: {
649
652
  }) => React.JSX.Element;
650
653
  Popup: ({
651
654
  className,
652
- tabIndex,
653
655
  ref,
654
656
  ...props
655
657
  }: React.ComponentPropsWithRef<typeof import("@base-ui/react").ComboboxPopup> & {
@@ -8,12 +8,22 @@ interface TabsProps extends Tabs.Root.Props {
8
8
  * @default 'default'
9
9
  */
10
10
  variant?: "default" | "bordered";
11
+ /** Skip the default Tabs classes for internal composition. */
12
+ unstyled?: boolean;
11
13
  }
12
14
  interface TabsListProps extends Tabs.List.Props {
13
15
  variant?: "default" | "line" | null;
16
+ /** Skip the default Tabs classes for internal composition. */
17
+ unstyled?: boolean;
18
+ }
19
+ interface TabProps extends Tabs.Tab.Props {
20
+ /** Skip the default Tabs classes for internal composition. */
21
+ unstyled?: boolean;
22
+ }
23
+ interface TabPanelProps extends Tabs.Panel.Props {
24
+ /** Skip the default Tabs classes for internal composition. */
25
+ unstyled?: boolean;
14
26
  }
15
- interface TabProps extends Tabs.Tab.Props {}
16
- interface TabPanelProps extends Tabs.Panel.Props {}
17
27
  interface TabsIndicatorProps extends Tabs.Indicator.Props {}
18
28
  /**
19
29
  * A tabs component for organizing content into separate views.
@@ -36,6 +46,7 @@ declare function TabsRoot({
36
46
  orientation,
37
47
  variant,
38
48
  className,
49
+ unstyled,
39
50
  ref,
40
51
  ...props
41
52
  }: TabsProps & {
@@ -44,6 +55,7 @@ declare function TabsRoot({
44
55
  declare function TabsList({
45
56
  className,
46
57
  variant,
58
+ unstyled,
47
59
  ref,
48
60
  ...props
49
61
  }: TabsListProps & {
@@ -51,6 +63,7 @@ declare function TabsList({
51
63
  }): React.JSX.Element;
52
64
  declare function Tab({
53
65
  className,
66
+ unstyled,
54
67
  ref,
55
68
  ...props
56
69
  }: TabProps & {
@@ -65,6 +78,7 @@ declare function TabsIndicator({
65
78
  }): React.JSX.Element;
66
79
  declare function TabPanel({
67
80
  className,
81
+ unstyled,
68
82
  ref,
69
83
  ...props
70
84
  }: TabPanelProps & {
@@ -1,5 +1,5 @@
1
1
  import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-CyD2UB3V.js";
2
- import { r as AgentChatProps } from "./AgentChat-ClxViuUM.js";
2
+ import { r as AgentChatProps } from "./AgentChat-CaQaT0LF.js";
3
3
  import { l as ThinkChatPart } from "./ThinkChatToolParts-CSzVwMXf.js";
4
4
  import * as React from "react";
5
5
  import { DynamicToolUIPart, ToolUIPart, UIMessage } from "ai";
@@ -1,4 +1,4 @@
1
- import { a as WorkspaceMediaInfo, i as WorkspaceFileState, r as WorkspaceFileAssetResolver, t as WorkspaceFileAsset } from "./WorkspaceFile-CzyHnESE.js";
1
+ import { a as WorkspaceMediaInfo, i as WorkspaceFileState, r as WorkspaceFileAssetResolver, t as WorkspaceFileAsset } from "./WorkspaceFile-D8Un_xge.js";
2
2
  import { WorkspaceLike } from "@cloudflare/think";
3
3
  import { FileInfo, Workspace } from "@cloudflare/shell";
4
4
 
@@ -1,5 +1,5 @@
1
1
  import { l as WorkspaceNavigationAdapter } from "./WorkspaceLink-O-EBKUJ8.js";
2
- import { o as WorkspaceState } from "./Workspace-Jez8ffUj.js";
2
+ import { o as WorkspaceState } from "./Workspace-CWtust-2.js";
3
3
  import * as React from "react";
4
4
 
5
5
  //#region src/components/WorkspaceExplorer.d.ts
@@ -1,4 +1,4 @@
1
- import { A as CodeBlockLanguage } from "./CodeBlock-gV4kZeCI.js";
1
+ import { A as CodeBlockLanguage } from "./CodeBlock-Bbls1CnA.js";
2
2
  import { SkillParseResult } from "agent-skills-ts-sdk";
3
3
  import { FileInfo } from "@cloudflare/shell";
4
4
 
@@ -1,4 +1,4 @@
1
- import { r as ButtonProps } from "../Button-DLGzHsjc.js";
1
+ import { r as ButtonProps } from "../Button-yRInko9u.js";
2
2
  import * as React from "react";
3
3
 
4
4
  //#region src/components/AgentAttention.d.ts
@@ -1,2 +1,2 @@
1
- import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-ClxViuUM.js";
1
+ import { a as PermissionModeControl, i as AgentChatRenderMessageContext, n as AgentChatComposerDraft, r as AgentChatProps, t as AgentChat } from "../AgentChat-CaQaT0LF.js";
2
2
  export { AgentChat, AgentChatComposerDraft, AgentChatProps, AgentChatRenderMessageContext, PermissionModeControl };
@@ -69,6 +69,7 @@ function AgentChatMessageEditor({ message, originalText, onCancel, onSubmit, onS
69
69
  error ? /* @__PURE__ */ jsx(Field.Errors, { errors: [error] }) : null
70
70
  ]
71
71
  }), /* @__PURE__ */ jsxs("div", {
72
+ "data-slot": "message-edit-actions",
72
73
  className: "message__edit-actions",
73
74
  children: [/* @__PURE__ */ jsx(Button, {
74
75
  type: "button",
@@ -292,17 +292,20 @@ function isCredentialAuthField(field) {
292
292
  * Compact popover trigger for showing AgentConnectionPanel inline.
293
293
  */
294
294
  function AgentConnectionPopover({ className, ...props }) {
295
- return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, { render: /* @__PURE__ */ jsxs(Button, {
296
- type: "button",
297
- color: "neutral",
298
- variant: "outline",
299
- size: "sm",
300
- className: cx("agent-connect-trigger", className),
301
- children: [/* @__PURE__ */ jsx(LinkIcon, {
302
- size: 16,
303
- strokeWidth: 2
304
- }), /* @__PURE__ */ jsx("span", { children: "Connect agent" })]
305
- }) }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
295
+ return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
296
+ unstyled: true,
297
+ render: /* @__PURE__ */ jsxs(Button, {
298
+ type: "button",
299
+ color: "neutral",
300
+ variant: "outline",
301
+ size: "sm",
302
+ className: cx("agent-connect-trigger", className),
303
+ children: [/* @__PURE__ */ jsx(LinkIcon, {
304
+ size: 16,
305
+ strokeWidth: 2
306
+ }), /* @__PURE__ */ jsx("span", { children: "Connect agent" })]
307
+ })
308
+ }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
306
309
  side: "top",
307
310
  align: "start",
308
311
  sideOffset: 10,
@@ -1,3 +1,4 @@
1
+ import { a as ButtonVariant, i as ButtonSize, n as ButtonColor } from "../Button-yRInko9u.js";
1
2
  import * as React from "react";
2
3
  import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
3
4
 
@@ -15,12 +16,27 @@ interface AlertDialogPopupProps extends React.ComponentPropsWithRef<typeof Alert
15
16
  }
16
17
  interface AlertDialogTitleProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Title> {}
17
18
  interface AlertDialogDescriptionProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Description> {}
18
- interface AlertDialogCloseProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Close> {
19
+ type BaseAlertDialogCloseProps = React.ComponentPropsWithRef<typeof AlertDialog$1.Close>;
20
+ /**
21
+ * Canonical Button axes style the default close element. When `render` is
22
+ * provided, the composed control owns its visual chrome.
23
+ */
24
+ interface AlertDialogCloseProps extends Omit<BaseAlertDialogCloseProps, "color"> {
25
+ /**
26
+ * The visual style of the default close button.
27
+ * @default 'normal'
28
+ */
29
+ variant?: ButtonVariant;
19
30
  /**
20
- * The variant of the close button.
21
- * @default 'secondary'
31
+ * The semantic color of the default close button.
32
+ * @default 'neutral'
22
33
  */
23
- variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost";
34
+ color?: ButtonColor;
35
+ /**
36
+ * The size of the default close button.
37
+ * @default 'sm'
38
+ */
39
+ size?: ButtonSize;
24
40
  }
25
41
  interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
26
42
  interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
@@ -43,7 +59,7 @@ interface AlertDialogMediaProps extends React.HTMLAttributes<HTMLDivElement> {}
43
59
  * </AlertDialog.Description>
44
60
  * <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
45
61
  * <AlertDialog.Close>Cancel</AlertDialog.Close>
46
- * <AlertDialog.Close variant="destructive">Delete</AlertDialog.Close>
62
+ * <AlertDialog.Close color="destructive">Delete</AlertDialog.Close>
47
63
  * </div>
48
64
  * </AlertDialog.Popup>
49
65
  * </AlertDialog.Viewport>
@@ -119,6 +135,9 @@ declare function AlertDialogDescription({
119
135
  }): React.JSX.Element;
120
136
  declare function AlertDialogClose({
121
137
  variant,
138
+ color,
139
+ size,
140
+ render,
122
141
  className,
123
142
  ref,
124
143
  ...props
@@ -1,4 +1,5 @@
1
1
  import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
2
+ import { buttonVariants } from "./Button.js";
2
3
  import "react";
3
4
  import { jsx } from "react/jsx-runtime";
4
5
  import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
@@ -21,7 +22,7 @@ import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
21
22
  * </AlertDialog.Description>
22
23
  * <div style={{ display: "flex", gap: "0.5rem", justifyContent: "flex-end" }}>
23
24
  * <AlertDialog.Close>Cancel</AlertDialog.Close>
24
- * <AlertDialog.Close variant="destructive">Delete</AlertDialog.Close>
25
+ * <AlertDialog.Close color="destructive">Delete</AlertDialog.Close>
25
26
  * </div>
26
27
  * </AlertDialog.Popup>
27
28
  * </AlertDialog.Viewport>
@@ -59,7 +60,11 @@ function AlertDialogViewport({ className, ref, ...props }) {
59
60
  });
60
61
  }
61
62
  function AlertDialogPopup({ size = "md", className, ref, ...props }) {
62
- const classes = mergeBaseClassName(["alert-dialog__popup", size !== "md" && `alert-dialog__popup--${size}`].filter(Boolean).join(" "), className);
63
+ const classes = mergeBaseClassName([
64
+ "alert-dialog__popup",
65
+ "base-ui-modal-popup",
66
+ size !== "md" && `alert-dialog__popup--${size}`
67
+ ].filter(Boolean).join(" "), className);
63
68
  return /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
64
69
  ref,
65
70
  "data-slot": "alert-dialog-content",
@@ -109,11 +114,17 @@ function AlertDialogDescription({ className, ref, ...props }) {
109
114
  ...props
110
115
  });
111
116
  }
112
- function AlertDialogClose({ variant = "secondary", className, ref, ...props }) {
113
- const classes = mergeBaseClassName(["alert-dialog__action", `alert-dialog__action--${variant}`].filter(Boolean).join(" "), className);
117
+ function AlertDialogClose({ variant = "normal", color = "neutral", size = "sm", render, className, ref, ...props }) {
118
+ const classes = mergeBaseClassName(render == null ? buttonVariants({
119
+ variant,
120
+ color,
121
+ size,
122
+ className: "alert-dialog__action"
123
+ }) : "alert-dialog__action", className);
114
124
  return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
115
125
  ref,
116
126
  "data-slot": "alert-dialog-close",
127
+ render,
117
128
  className: classes,
118
129
  ...props
119
130
  });
@@ -43,6 +43,7 @@ function AppTopBarTrailing({ className, ...props }) {
43
43
  }
44
44
  function AppTopBarControl({ className, ...props }) {
45
45
  return /* @__PURE__ */ jsx(Toolbar.Button, {
46
+ unstyled: true,
46
47
  className: mergeBaseClassName("app-top-bar__button", className),
47
48
  ...props
48
49
  });
@@ -1,4 +1,4 @@
1
- import { r as ButtonProps } from "../Button-DLGzHsjc.js";
1
+ import { r as ButtonProps } from "../Button-yRInko9u.js";
2
2
  import * as React from "react";
3
3
 
4
4
  //#region src/components/Artifact.d.ts
@@ -1,4 +1,4 @@
1
- import * as React from "react";
1
+ import { useRender } from "@base-ui/react/use-render";
2
2
 
3
3
  //#region src/components/Badge.d.ts
4
4
  type BadgeVariant = "normal" | "outline" | "ghost" | "link";
@@ -15,10 +15,12 @@ declare function badgeVariants({
15
15
  size,
16
16
  className
17
17
  }?: BadgeVariantsOptions): string;
18
- type SlottableBadgeProps = React.HTMLAttributes<HTMLElement> & {
19
- ref?: React.Ref<HTMLElement>;
18
+ type BadgeRenderState = {
19
+ slot: "badge";
20
+ variant: BadgeVariant;
21
+ size: "sm" | "md";
20
22
  };
21
- interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
23
+ interface BadgeProps extends Omit<useRender.ComponentProps<"span", BadgeRenderState>, "color"> {
22
24
  /**
23
25
  * The visual rendering style of the badge.
24
26
  * @default 'normal'
@@ -34,8 +36,6 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
34
36
  * @default 'md'
35
37
  */
36
38
  size?: "sm" | "md";
37
- /** Replaces the default span while preserving badge props and styles. */
38
- render?: React.ReactElement<SlottableBadgeProps>;
39
39
  }
40
40
  /**
41
41
  * A badge component for highlighting status, labels, or categories.
@@ -55,11 +55,8 @@ declare function Badge({
55
55
  size,
56
56
  className,
57
57
  render,
58
- children,
59
58
  ref,
60
59
  ...props
61
- }: BadgeProps & {
62
- ref?: React.Ref<HTMLSpanElement>;
63
- }): React.JSX.Element;
60
+ }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
64
61
  //#endregion
65
62
  export { Badge, BadgeColor, BadgeProps, BadgeVariant, BadgeVariantsOptions, badgeVariants };
@@ -1,6 +1,4 @@
1
- import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
2
- import * as React from "react";
3
- import { jsx } from "react/jsx-runtime";
1
+ import { useRender } from "@base-ui/react/use-render";
4
2
  //#region src/components/Badge.tsx
5
3
  const BADGE_VARIANT_DEFAULT_COLOR = {
6
4
  normal: "primary",
@@ -18,34 +16,6 @@ function badgeVariants({ variant = "normal", color, size = "md", className } = {
18
16
  className
19
17
  ].filter(Boolean).join(" ");
20
18
  }
21
- function isEventHandler(propName, value) {
22
- return /^on[A-Z]/.test(propName) && typeof value === "function";
23
- }
24
- function mergeSlottedBadgeProps(childProps, badgeProps) {
25
- const mergedProps = {
26
- ...childProps,
27
- ...badgeProps
28
- };
29
- const badgePropsRecord = badgeProps;
30
- for (const propName of Object.keys(childProps)) {
31
- const childValue = childProps[propName];
32
- const badgeValue = badgePropsRecord[propName];
33
- if (isEventHandler(propName, childValue) && isEventHandler(propName, badgeValue)) mergedProps[propName] = (...args) => {
34
- childValue(...args);
35
- badgeValue(...args);
36
- };
37
- }
38
- mergedProps.className = [childProps.className, badgeProps.className].filter(Boolean).join(" ");
39
- mergedProps.style = childProps.style || badgeProps.style ? {
40
- ...childProps.style,
41
- ...badgeProps.style
42
- } : void 0;
43
- mergedProps.ref = mergeRefs(childProps.ref, badgeProps.ref);
44
- mergedProps["data-slot"] = "badge";
45
- mergedProps["data-variant"] = badgeProps["data-variant"];
46
- mergedProps["data-size"] = badgeProps["data-size"];
47
- return mergedProps;
48
- }
49
19
  /**
50
20
  * A badge component for highlighting status, labels, or categories.
51
21
  *
@@ -58,7 +28,7 @@ function mergeSlottedBadgeProps(childProps, badgeProps) {
58
28
  * <Badge render={<a href="/docs" />}>Docs</Badge>
59
29
  * ```
60
30
  */
61
- function Badge({ variant = "normal", color, size = "md", className, render, children, ref, ...props }) {
31
+ function Badge({ variant = "normal", color, size = "md", className, render, ref, ...props }) {
62
32
  const badgeVariant = variant ?? "normal";
63
33
  const classes = badgeVariants({
64
34
  variant,
@@ -66,23 +36,19 @@ function Badge({ variant = "normal", color, size = "md", className, render, chil
66
36
  size,
67
37
  className
68
38
  });
69
- if (React.isValidElement(render)) return React.cloneElement(render, mergeSlottedBadgeProps(render.props, {
70
- ...props,
71
- ref,
72
- className: classes,
73
- "data-slot": "badge",
74
- "data-variant": badgeVariant,
75
- "data-size": size,
76
- children
77
- }));
78
- return /* @__PURE__ */ jsx("span", {
39
+ return useRender({
40
+ defaultTagName: "span",
41
+ render,
79
42
  ref,
80
- "data-slot": "badge",
81
- "data-variant": badgeVariant,
82
- "data-size": size,
83
- className: classes,
84
- ...props,
85
- children
43
+ props: {
44
+ ...props,
45
+ className: classes
46
+ },
47
+ state: {
48
+ slot: "badge",
49
+ variant: badgeVariant,
50
+ size
51
+ }
86
52
  });
87
53
  }
88
54
  //#endregion
@@ -1,2 +1,2 @@
1
- import { a as ButtonVariant, i as ButtonSize, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as buttonVariants, t as Button } from "../Button-DLGzHsjc.js";
1
+ import { a as ButtonVariant, i as ButtonSize, n as ButtonColor, o as ButtonVariantsOptions, r as ButtonProps, s as buttonVariants, t as Button } from "../Button-yRInko9u.js";
2
2
  export { Button, ButtonColor, ButtonProps, ButtonSize, ButtonVariant, ButtonVariantsOptions, buttonVariants };
@@ -29,19 +29,17 @@ function buttonVariants({ variant = "normal", color = "primary", size = "sm", cl
29
29
  *
30
30
  * @see {@link https://base-ui.com/react/components/button | Base UI Button}
31
31
  */
32
- function Button({ variant = "normal", color = "primary", size = "sm", iconOnly = false, className, nativeButton, ref, ...props }) {
32
+ function Button({ variant = "normal", color = "primary", size = "sm", iconOnly = false, className, ref, ...props }) {
33
33
  const classes = mergeBaseClassName(buttonVariants({
34
34
  variant,
35
35
  color,
36
36
  size
37
37
  }), className);
38
- const resolvedNativeButton = nativeButton ?? props.render == null;
39
38
  return /* @__PURE__ */ jsx(Button$1, {
40
39
  ref,
41
40
  "data-slot": "button",
42
41
  "data-icon-only": iconOnly ? "" : void 0,
43
42
  className: classes,
44
- nativeButton: resolvedNativeButton,
45
43
  ...props
46
44
  });
47
45
  }
@@ -1,4 +1,3 @@
1
- import * as React from "react";
2
1
  import { Checkbox as Checkbox$1, CheckboxRootProps } from "@base-ui/react/checkbox";
3
2
 
4
3
  //#region src/components/Checkbox.d.ts
@@ -25,14 +24,12 @@ declare function CheckboxRoot({
25
24
  className,
26
25
  ref,
27
26
  ...props
28
- }: CheckboxProps & {
29
- ref?: React.Ref<HTMLButtonElement>;
30
- }): React.JSX.Element;
27
+ }: CheckboxProps): import("react").JSX.Element;
31
28
  declare function CheckboxIndicator({
32
29
  children,
33
30
  className,
34
31
  ...props
35
- }: Checkbox$1.Indicator.Props): React.JSX.Element;
32
+ }: Checkbox$1.Indicator.Props): import("react").JSX.Element;
36
33
  declare const Checkbox: {
37
34
  Root: typeof CheckboxRoot;
38
35
  Indicator: typeof CheckboxIndicator;
@@ -1,6 +1,5 @@
1
1
  import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
2
2
  import { u as CheckIcon } from "../icons-DKXiSepE.js";
3
- import "react";
4
3
  import { jsx } from "react/jsx-runtime";
5
4
  import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
6
5
  //#region src/components/Checkbox.tsx
@@ -1,2 +1,2 @@
1
- import { A as CodeBlockLanguage, C as CodeBlockLanguageSelectorValueProps, D as TokenizedCode, E as CodeBlockTitleProps, O as highlightCode, S as CodeBlockLanguageSelectorValue, T as CodeBlockTitle, _ as CodeBlockLanguageSelectorItem, a as CodeBlockContainerProps, b as CodeBlockLanguageSelectorTrigger, c as CodeBlockCopyButton, d as CodeBlockFilenameProps, f as CodeBlockHeader, g as CodeBlockLanguageSelectorContentProps, h as CodeBlockLanguageSelectorContent, i as CodeBlockContainer, k as CODE_BLOCK_LANGUAGES, l as CodeBlockCopyButtonProps, m as CodeBlockLanguageSelector, n as CodeBlockActions, o as CodeBlockContent, p as CodeBlockHeaderProps, r as CodeBlockActionsProps, s as CodeBlockContentProps, t as CodeBlock, u as CodeBlockFilename, v as CodeBlockLanguageSelectorItemProps, w as CodeBlockProps, x as CodeBlockLanguageSelectorTriggerProps, y as CodeBlockLanguageSelectorProps } from "../CodeBlock-gV4kZeCI.js";
1
+ import { A as CodeBlockLanguage, C as CodeBlockLanguageSelectorValueProps, D as TokenizedCode, E as CodeBlockTitleProps, O as highlightCode, S as CodeBlockLanguageSelectorValue, T as CodeBlockTitle, _ as CodeBlockLanguageSelectorItem, a as CodeBlockContainerProps, b as CodeBlockLanguageSelectorTrigger, c as CodeBlockCopyButton, d as CodeBlockFilenameProps, f as CodeBlockHeader, g as CodeBlockLanguageSelectorContentProps, h as CodeBlockLanguageSelectorContent, i as CodeBlockContainer, k as CODE_BLOCK_LANGUAGES, l as CodeBlockCopyButtonProps, m as CodeBlockLanguageSelector, n as CodeBlockActions, o as CodeBlockContent, p as CodeBlockHeaderProps, r as CodeBlockActionsProps, s as CodeBlockContentProps, t as CodeBlock, u as CodeBlockFilename, v as CodeBlockLanguageSelectorItemProps, w as CodeBlockProps, x as CodeBlockLanguageSelectorTriggerProps, y as CodeBlockLanguageSelectorProps } from "../CodeBlock-Bbls1CnA.js";
2
2
  export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockActionsProps, CodeBlockContainer, CodeBlockContainerProps, CodeBlockContent, CodeBlockContentProps, CodeBlockCopyButton, CodeBlockCopyButtonProps, CodeBlockFilename, CodeBlockFilenameProps, CodeBlockHeader, CodeBlockHeaderProps, type CodeBlockLanguage, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorContentProps, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorItemProps, CodeBlockLanguageSelectorProps, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorTriggerProps, CodeBlockLanguageSelectorValue, CodeBlockLanguageSelectorValueProps, CodeBlockProps, CodeBlockTitle, CodeBlockTitleProps, TokenizedCode, highlightCode };
@@ -1,2 +1,2 @@
1
- import { n as useComboboxAnchor, t as Combobox } from "../Combobox-CYc37s5l.js";
1
+ import { n as useComboboxAnchor, t as Combobox } from "../Combobox-xEEF6fUb.js";
2
2
  export { Combobox, useComboboxAnchor };
@@ -39,12 +39,11 @@ function ComboboxPositioner({ className, ref, ...props }) {
39
39
  ...props
40
40
  });
41
41
  }
42
- function ComboboxPopup({ className, tabIndex = 0, ref, ...props }) {
42
+ function ComboboxPopup({ className, ref, ...props }) {
43
43
  const classes = mergeBaseClassName(["combobox__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
44
44
  return /* @__PURE__ */ jsx(Combobox$1.Popup, {
45
45
  ref,
46
46
  "data-slot": "combobox-content",
47
- tabIndex,
48
47
  className: classes,
49
48
  ...props
50
49
  });
@@ -1,5 +1,5 @@
1
1
  import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
2
- import { t as CopyButtonProps } from "../copy-button-D7aAYA-2.js";
2
+ import { t as CopyButtonProps } from "../copy-button-BrvQ7z4W.js";
3
3
  import * as React from "react";
4
4
 
5
5
  //#region src/components/Commit.d.ts
@@ -68,12 +68,19 @@ function ContextTrigger({ className, children, ...props }) {
68
68
  const { usedTokens, maxTokens } = useContextContext();
69
69
  const percent = maxTokens > 0 ? usedTokens / maxTokens * 100 : 0;
70
70
  if (React.isValidElement(children)) return /* @__PURE__ */ jsx(Popover.Trigger, {
71
+ unstyled: true,
71
72
  className: cx("context__trigger", className),
72
73
  ...props,
73
74
  render: children
74
75
  });
75
- if (children) return /* @__PURE__ */ jsx(Popover.Trigger, { children });
76
+ if (children) return /* @__PURE__ */ jsx(Popover.Trigger, {
77
+ unstyled: true,
78
+ className: cx("context__trigger", className),
79
+ ...props,
80
+ children
81
+ });
76
82
  return /* @__PURE__ */ jsx(Popover.Trigger, {
83
+ unstyled: true,
77
84
  className: cx("context__trigger", className),
78
85
  "aria-label": `Context usage: ${percent.toFixed(0)}%`,
79
86
  ...props,
@@ -1,4 +1,4 @@
1
- import { t as Button } from "../Button-DLGzHsjc.js";
1
+ import { t as Button } from "../Button-yRInko9u.js";
2
2
  import { MessageScrollerButtonProps, MessageScrollerItemProps } from "./MessageScroller.js";
3
3
  import * as React from "react";
4
4
  import { UIMessage } from "ai";
@@ -93,6 +93,7 @@ declare function DialogDescription({
93
93
  ref?: React.Ref<HTMLParagraphElement>;
94
94
  }): React.JSX.Element;
95
95
  declare function DialogClose({
96
+ render,
96
97
  className,
97
98
  ref,
98
99
  ...props
@@ -1,4 +1,5 @@
1
1
  import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
2
+ import { buttonVariants } from "./Button.js";
2
3
  import "react";
3
4
  import { jsx } from "react/jsx-runtime";
4
5
  import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
@@ -50,7 +51,11 @@ function DialogViewport({ className, ref, ...props }) {
50
51
  });
51
52
  }
52
53
  function DialogPopup({ size = "md", className, ref, ...props }) {
53
- const classes = mergeBaseClassName(["dialog__popup", size !== "md" && `dialog__popup--${size}`].filter(Boolean).join(" "), className);
54
+ const classes = mergeBaseClassName([
55
+ "dialog__popup",
56
+ "base-ui-modal-popup",
57
+ size !== "md" && `dialog__popup--${size}`
58
+ ].filter(Boolean).join(" "), className);
54
59
  return /* @__PURE__ */ jsx(Dialog$1.Popup, {
55
60
  ref,
56
61
  "data-slot": "dialog-content",
@@ -92,11 +97,17 @@ function DialogDescription({ className, ref, ...props }) {
92
97
  ...props
93
98
  });
94
99
  }
95
- function DialogClose({ className, ref, ...props }) {
96
- const classes = mergeBaseClassName(["dialog__close"].filter(Boolean).join(" "), className);
100
+ function DialogClose({ render, className, ref, ...props }) {
101
+ const classes = mergeBaseClassName(render == null ? buttonVariants({
102
+ variant: "normal",
103
+ color: "neutral",
104
+ size: "sm",
105
+ className: "dialog__close"
106
+ }) : "dialog__close", className);
97
107
  return /* @__PURE__ */ jsx(Dialog$1.Close, {
98
108
  ref,
99
109
  "data-slot": "dialog-close",
110
+ render,
100
111
  className: classes,
101
112
  ...props
102
113
  });