@uipath/apollo-wind 2.72.2 → 2.73.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/dist/components/ui/alert-dialog.cjs +1 -1
  2. package/dist/components/ui/alert-dialog.js +1 -1
  3. package/dist/components/ui/attachment.cjs +40 -8
  4. package/dist/components/ui/attachment.d.ts +11 -1
  5. package/dist/components/ui/attachment.js +43 -11
  6. package/dist/components/ui/bubble.cjs +1 -1
  7. package/dist/components/ui/bubble.d.ts +6 -0
  8. package/dist/components/ui/bubble.js +1 -1
  9. package/dist/components/ui/chat-composer.cjs +8 -2
  10. package/dist/components/ui/chat-composer.d.ts +6 -0
  11. package/dist/components/ui/chat-composer.js +9 -3
  12. package/dist/components/ui/citation.cjs +5 -3
  13. package/dist/components/ui/citation.d.ts +6 -0
  14. package/dist/components/ui/citation.js +5 -3
  15. package/dist/components/ui/code-block.cjs +6 -6
  16. package/dist/components/ui/code-block.d.ts +6 -0
  17. package/dist/components/ui/code-block.js +6 -6
  18. package/dist/components/ui/context-menu.cjs +2 -2
  19. package/dist/components/ui/context-menu.js +2 -2
  20. package/dist/components/ui/dialog.cjs +18 -5
  21. package/dist/components/ui/dialog.d.ts +15 -0
  22. package/dist/components/ui/dialog.js +16 -6
  23. package/dist/components/ui/disclosure-tree.cjs +269 -0
  24. package/dist/components/ui/disclosure-tree.d.ts +45 -0
  25. package/dist/components/ui/disclosure-tree.js +235 -0
  26. package/dist/components/ui/dropdown-menu.cjs +2 -2
  27. package/dist/components/ui/dropdown-menu.js +2 -2
  28. package/dist/components/ui/dropzone-overlay.cjs +21 -5
  29. package/dist/components/ui/dropzone-overlay.d.ts +12 -1
  30. package/dist/components/ui/dropzone-overlay.js +21 -5
  31. package/dist/components/ui/empty-state.cjs +28 -10
  32. package/dist/components/ui/empty-state.d.ts +9 -0
  33. package/dist/components/ui/empty-state.js +30 -12
  34. package/dist/components/ui/hover-card.cjs +1 -1
  35. package/dist/components/ui/hover-card.js +1 -1
  36. package/dist/components/ui/index.cjs +221 -208
  37. package/dist/components/ui/index.d.ts +1 -0
  38. package/dist/components/ui/index.js +1 -0
  39. package/dist/components/ui/markdown.cjs +129 -22
  40. package/dist/components/ui/markdown.d.ts +23 -4
  41. package/dist/components/ui/markdown.js +129 -22
  42. package/dist/components/ui/message-actions.cjs +1 -1
  43. package/dist/components/ui/message-actions.d.ts +3 -0
  44. package/dist/components/ui/message-actions.js +1 -1
  45. package/dist/components/ui/message.cjs +4 -4
  46. package/dist/components/ui/message.d.ts +7 -0
  47. package/dist/components/ui/message.js +4 -4
  48. package/dist/components/ui/popover.cjs +1 -1
  49. package/dist/components/ui/popover.js +1 -1
  50. package/dist/components/ui/search.cjs +16 -5
  51. package/dist/components/ui/search.d.ts +9 -0
  52. package/dist/components/ui/search.js +13 -5
  53. package/dist/components/ui/select.cjs +1 -1
  54. package/dist/components/ui/select.js +1 -1
  55. package/dist/components/ui/sheet.cjs +12 -2
  56. package/dist/components/ui/sheet.d.ts +7 -0
  57. package/dist/components/ui/sheet.js +10 -3
  58. package/dist/components/ui/sources.cjs +1 -1
  59. package/dist/components/ui/sources.d.ts +6 -0
  60. package/dist/components/ui/sources.js +1 -1
  61. package/dist/components/ui/thinking-indicator.cjs +5 -3
  62. package/dist/components/ui/thinking-indicator.d.ts +6 -0
  63. package/dist/components/ui/thinking-indicator.js +5 -3
  64. package/dist/components/ui/tool-call.cjs +10 -7
  65. package/dist/components/ui/tool-call.d.ts +6 -0
  66. package/dist/components/ui/tool-call.js +10 -7
  67. package/dist/components/ui/tooltip.cjs +1 -1
  68. package/dist/components/ui/tooltip.js +1 -1
  69. package/dist/index.cjs +14 -1
  70. package/dist/index.d.ts +10 -6
  71. package/dist/index.js +5 -4
  72. package/dist/lib/disclosure-row.cjs +36 -0
  73. package/dist/lib/disclosure-row.d.ts +1 -0
  74. package/dist/lib/disclosure-row.js +2 -0
  75. package/dist/lib/use-ancestor-density.cjs +65 -0
  76. package/dist/lib/use-ancestor-density.d.ts +8 -0
  77. package/dist/lib/use-ancestor-density.js +31 -0
  78. package/dist/styles.css +679 -52
  79. package/dist/tailwind.utilities.css +173 -0
  80. package/package.json +1 -1
@@ -0,0 +1,235 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { ChevronRight } from "lucide-react";
4
+ import { createContext, forwardRef, useCallback, useContext, useId, useMemo, useRef, useState } from "react";
5
+ import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "./tooltip.js";
6
+ import { cn } from "../../lib/index.js";
7
+ import { disclosureRowClassName } from "../../lib/disclosure-row.js";
8
+ const TreeContext = /*#__PURE__*/ createContext(null);
9
+ const isExpandable = (item)=>'function' == typeof item.children ? !!item.expandable : !!item.children?.length;
10
+ const DisclosureTree = /*#__PURE__*/ forwardRef(({ items, expanded, onExpandedChange, className, onKeyDown, ...props }, ref)=>{
11
+ const [overrides, setOverrides] = useState(new Map());
12
+ const [activeId, setActiveId] = useState();
13
+ const rows = useRef(new Map());
14
+ const built = useRef(new WeakMap());
15
+ const childrenOf = useCallback((item)=>{
16
+ if ('function' != typeof item.children) return item.children ?? [];
17
+ let children = built.current.get(item);
18
+ if (!children) {
19
+ children = item.children();
20
+ built.current.set(item, children);
21
+ }
22
+ return children;
23
+ }, []);
24
+ const isExpanded = useCallback((item)=>isExpandable(item) && (expanded ? expanded.includes(item.id) : overrides.get(item.id) ?? item.defaultExpanded ?? false), [
25
+ expanded,
26
+ overrides
27
+ ]);
28
+ const setExpanded = useCallback((item, next)=>{
29
+ if (!isExpandable(item) || isExpanded(item) === next) return;
30
+ if (!expanded) setOverrides((previous)=>new Map(previous).set(item.id, next));
31
+ onExpandedChange?.(item.id, next);
32
+ }, [
33
+ expanded,
34
+ isExpanded,
35
+ onExpandedChange
36
+ ]);
37
+ const visible = useMemo(()=>{
38
+ const list = [];
39
+ const walk = (level, parentId)=>{
40
+ for (const item of level){
41
+ const expandable = isExpandable(item);
42
+ list.push({
43
+ item,
44
+ parentId,
45
+ expandable
46
+ });
47
+ if (expandable && isExpanded(item)) walk(childrenOf(item), item.id);
48
+ }
49
+ };
50
+ walk(items, void 0);
51
+ return list;
52
+ }, [
53
+ items,
54
+ isExpanded,
55
+ childrenOf
56
+ ]);
57
+ const tabbableId = visible.some((row)=>row.item.id === activeId) ? activeId : visible[0]?.item.id;
58
+ const focusRow = (id)=>{
59
+ if (void 0 === id) return;
60
+ setActiveId(id);
61
+ rows.current.get(id)?.focus();
62
+ };
63
+ const handleKeyDown = (event)=>{
64
+ onKeyDown?.(event);
65
+ if (event.defaultPrevented) return;
66
+ const id = event.target.dataset.treeItemId;
67
+ const index = visible.findIndex((row)=>row.item.id === id);
68
+ if (index < 0) return;
69
+ const row = visible[index];
70
+ const open = row.expandable && isExpanded(row.item);
71
+ switch(event.key){
72
+ case 'ArrowDown':
73
+ focusRow(visible[index + 1]?.item.id);
74
+ break;
75
+ case 'ArrowUp':
76
+ focusRow(visible[index - 1]?.item.id);
77
+ break;
78
+ case 'Home':
79
+ focusRow(visible[0]?.item.id);
80
+ break;
81
+ case 'End':
82
+ focusRow(visible[visible.length - 1]?.item.id);
83
+ break;
84
+ case 'ArrowRight':
85
+ if (!row.expandable) return;
86
+ if (open) {
87
+ if (visible[index + 1]?.parentId === row.item.id) focusRow(visible[index + 1].item.id);
88
+ } else setExpanded(row.item, true);
89
+ break;
90
+ case 'ArrowLeft':
91
+ if (open) setExpanded(row.item, false);
92
+ else focusRow(row.parentId);
93
+ break;
94
+ case 'Enter':
95
+ case ' ':
96
+ if (!row.expandable) return;
97
+ setExpanded(row.item, !open);
98
+ break;
99
+ default:
100
+ return;
101
+ }
102
+ event.preventDefault();
103
+ };
104
+ const context = useMemo(()=>({
105
+ isExpanded,
106
+ toggle: (item)=>setExpanded(item, !isExpanded(item)),
107
+ childrenOf,
108
+ tabbableId,
109
+ setActiveId,
110
+ registerRow: (id, node)=>{
111
+ if (node) rows.current.set(id, node);
112
+ else rows.current.delete(id);
113
+ }
114
+ }), [
115
+ isExpanded,
116
+ setExpanded,
117
+ childrenOf,
118
+ tabbableId
119
+ ]);
120
+ return /*#__PURE__*/ jsx(TreeContext.Provider, {
121
+ value: context,
122
+ children: /*#__PURE__*/ jsx(TooltipProvider, {
123
+ delayDuration: 300,
124
+ children: /*#__PURE__*/ jsx("div", {
125
+ ref: ref,
126
+ role: "tree",
127
+ "data-slot": "disclosure-tree",
128
+ className: cn('flex min-w-0 flex-col', className),
129
+ onKeyDown: handleKeyDown,
130
+ ...props,
131
+ children: items.map((item, index)=>/*#__PURE__*/ jsx(DisclosureTreeRow, {
132
+ item: item,
133
+ level: 1,
134
+ position: index + 1,
135
+ setSize: items.length
136
+ }, item.id))
137
+ })
138
+ })
139
+ });
140
+ });
141
+ DisclosureTree.displayName = 'DisclosureTree';
142
+ function DisclosureTreeRow({ item, level, position, setSize }) {
143
+ const tree = useContext(TreeContext);
144
+ if (!tree) throw new Error('DisclosureTreeRow must be used within DisclosureTree');
145
+ const id = useId();
146
+ const [tooltipOpen, setTooltipOpen] = useState(false);
147
+ const expandable = isExpandable(item);
148
+ const open = tree.isExpanded(item);
149
+ const children = open ? tree.childrenOf(item) : [];
150
+ const labelId = `${id}-label`;
151
+ const descriptionId = `${id}-description`;
152
+ const row = /*#__PURE__*/ jsxs("div", {
153
+ "data-slot": "disclosure-tree-row",
154
+ onClick: expandable ? ()=>tree.toggle(item) : void 0,
155
+ className: cn(disclosureRowClassName, expandable && 'cursor-pointer hover:text-foreground'),
156
+ children: [
157
+ /*#__PURE__*/ jsx(ChevronRight, {
158
+ "aria-hidden": "true",
159
+ className: cn('size-4 shrink-0 transition-transform motion-reduce:transition-none', open && 'rotate-90', !expandable && 'invisible')
160
+ }),
161
+ null != item.icon && /*#__PURE__*/ jsx("span", {
162
+ "data-slot": "disclosure-tree-icon",
163
+ className: "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4",
164
+ children: item.icon
165
+ }),
166
+ /*#__PURE__*/ jsx("span", {
167
+ id: labelId,
168
+ "data-slot": "disclosure-tree-label",
169
+ className: "min-w-0 truncate",
170
+ children: item.label
171
+ }),
172
+ null != item.trailing && /*#__PURE__*/ jsx("span", {
173
+ "data-slot": "disclosure-tree-trailing",
174
+ className: "ml-auto shrink-0 pl-2 text-muted-foreground",
175
+ children: item.trailing
176
+ })
177
+ ]
178
+ });
179
+ return /*#__PURE__*/ jsxs("div", {
180
+ ref: (node)=>tree.registerRow(item.id, node),
181
+ role: "treeitem",
182
+ "data-slot": "disclosure-tree-item",
183
+ "data-tree-item-id": item.id,
184
+ "aria-level": level,
185
+ "aria-posinset": position,
186
+ "aria-setsize": setSize,
187
+ "aria-expanded": expandable ? open : void 0,
188
+ "aria-labelledby": labelId,
189
+ "aria-describedby": item.description ? descriptionId : void 0,
190
+ tabIndex: tree.tabbableId === item.id ? 0 : -1,
191
+ onFocus: (event)=>{
192
+ if (event.target !== event.currentTarget) return;
193
+ tree.setActiveId(item.id);
194
+ if (item.description) setTooltipOpen(true);
195
+ },
196
+ onBlur: (event)=>{
197
+ if (event.target === event.currentTarget) setTooltipOpen(false);
198
+ },
199
+ className: "min-w-0 outline-hidden [&:focus-visible>[data-slot=disclosure-tree-row]]:ring-2 [&:focus-visible>[data-slot=disclosure-tree-row]]:ring-ring",
200
+ children: [
201
+ item.description ? /*#__PURE__*/ jsxs(Tooltip, {
202
+ open: tooltipOpen,
203
+ onOpenChange: setTooltipOpen,
204
+ children: [
205
+ /*#__PURE__*/ jsx(TooltipTrigger, {
206
+ asChild: true,
207
+ children: row
208
+ }),
209
+ /*#__PURE__*/ jsx(TooltipPortal, {
210
+ children: /*#__PURE__*/ jsx(TooltipContent, {
211
+ align: "start",
212
+ children: item.description
213
+ })
214
+ })
215
+ ]
216
+ }) : row,
217
+ item.description && /*#__PURE__*/ jsx("span", {
218
+ id: descriptionId,
219
+ hidden: true,
220
+ children: item.description
221
+ }),
222
+ children.length > 0 && /*#__PURE__*/ jsx("div", {
223
+ role: "group",
224
+ className: "ml-7 flex min-w-0 flex-col",
225
+ children: children.map((child, index)=>/*#__PURE__*/ jsx(DisclosureTreeRow, {
226
+ item: child,
227
+ level: level + 1,
228
+ position: index + 1,
229
+ setSize: children.length
230
+ }, child.id))
231
+ })
232
+ ]
233
+ });
234
+ }
235
+ export { DisclosureTree };
@@ -107,7 +107,7 @@ DropdownMenuSubTrigger.displayName = react_dropdown_menu_namespaceObject.SubTrig
107
107
  const DropdownMenuSubContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dropdown_menu_namespaceObject.SubContent, {
108
108
  ref: ref,
109
109
  "data-slot": "dropdown-menu-sub-content",
110
- className: (0, index_cjs_namespaceObject.cn)('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]', className),
110
+ className: (0, index_cjs_namespaceObject.cn)('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)', className),
111
111
  ...props
112
112
  }));
113
113
  DropdownMenuSubContent.displayName = react_dropdown_menu_namespaceObject.SubContent.displayName;
@@ -121,7 +121,7 @@ const DropdownMenuContent = /*#__PURE__*/ external_react_namespaceObject.forward
121
121
  ref: ref,
122
122
  "data-slot": "dropdown-menu-content",
123
123
  sideOffset: sideOffset,
124
- className: (0, index_cjs_namespaceObject.cn)('z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]', className),
124
+ className: (0, index_cjs_namespaceObject.cn)('z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)', className),
125
125
  ...props
126
126
  })
127
127
  })
@@ -65,7 +65,7 @@ DropdownMenuSubTrigger.displayName = SubTrigger.displayName;
65
65
  const DropdownMenuSubContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(SubContent, {
66
66
  ref: ref,
67
67
  "data-slot": "dropdown-menu-sub-content",
68
- className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]', className),
68
+ className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)', className),
69
69
  ...props
70
70
  }));
71
71
  DropdownMenuSubContent.displayName = SubContent.displayName;
@@ -79,7 +79,7 @@ const DropdownMenuContent = /*#__PURE__*/ forwardRef(({ className, sideOffset =
79
79
  ref: ref,
80
80
  "data-slot": "dropdown-menu-content",
81
81
  sideOffset: sideOffset,
82
- className: cn('z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]', className),
82
+ className: cn('z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md future:rounded-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin)', className),
83
83
  ...props
84
84
  })
85
85
  })
@@ -34,8 +34,16 @@ const external_react_namespaceObject = require("react");
34
34
  const index_cjs_namespaceObject = require("../../lib/index.cjs");
35
35
  const external_file_validation_cjs_namespaceObject = require("./file-validation.cjs");
36
36
  const DEFAULT_DROPZONE_OVERLAY_STRINGS = {
37
- dropHint: 'Drop files to attach'
37
+ dropHint: 'Drop files to attach',
38
+ typesHint: '',
39
+ sizeHint: '',
40
+ countHint: ''
38
41
  };
42
+ const LIMITS = [
43
+ 'types',
44
+ 'size',
45
+ 'count'
46
+ ];
39
47
  function hasFiles(dataTransfer) {
40
48
  return Array.from(dataTransfer?.types ?? []).includes('Files');
41
49
  }
@@ -63,13 +71,14 @@ const DropzoneOverlay = /*#__PURE__*/ external_react_namespaceObject.forwardRef(
63
71
  disabled
64
72
  ]);
65
73
  const deliver = (files)=>{
66
- if (0 === files.length) return;
74
+ if (0 === files.length) return 0;
67
75
  const { accepted, rejected } = (0, external_file_validation_cjs_namespaceObject.validateFiles)(files, {
68
76
  accept,
69
77
  maxSize,
70
78
  maxFiles
71
79
  });
72
80
  onFiles?.(accepted, rejected);
81
+ return accepted.length;
73
82
  };
74
83
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
75
84
  ref: ref,
@@ -108,8 +117,9 @@ const DropzoneOverlay = /*#__PURE__*/ external_react_namespaceObject.forwardRef(
108
117
  if (disabled || !enablePaste || event.defaultPrevented) return;
109
118
  const files = filesFrom(event.clipboardData);
110
119
  if (0 === files.length) return;
111
- event.preventDefault();
112
- deliver(files);
120
+ const accepted = deliver(files);
121
+ const hasText = Array.from(event.clipboardData?.types ?? []).includes('text/plain');
122
+ if (accepted > 0 || !hasText) event.preventDefault();
113
123
  },
114
124
  ...props,
115
125
  children: [
@@ -124,7 +134,13 @@ const DropzoneOverlay = /*#__PURE__*/ external_react_namespaceObject.forwardRef(
124
134
  }),
125
135
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
126
136
  children: text.dropHint
127
- })
137
+ }),
138
+ LIMITS.filter((limit)=>text[`${limit}Hint`]).map((limit)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
139
+ "data-slot": "dropzone-overlay-limit",
140
+ "data-limit": limit,
141
+ className: "text-xs font-normal text-muted-foreground",
142
+ children: text[`${limit}Hint`]
143
+ }, limit))
128
144
  ]
129
145
  })
130
146
  ]
@@ -8,6 +8,13 @@ import { type FileRejection, type FileValidationOptions } from './file-validatio
8
8
  export interface DropzoneOverlayStrings {
9
9
  /** Shown on the overlay while files are dragged over the region. */
10
10
  dropHint: string;
11
+ /**
12
+ * Lines under the hint describing the limits, such as "Allowed file types: PDF, PNG". They carry
13
+ * values the host formats, so they are empty, and not shown, unless given.
14
+ */
15
+ typesHint: string;
16
+ sizeHint: string;
17
+ countHint: string;
11
18
  }
12
19
  export declare const DEFAULT_DROPZONE_OVERLAY_STRINGS: DropzoneOverlayStrings;
13
20
  export interface DropzoneOverlayProps extends React.HTMLAttributes<HTMLDivElement>, FileValidationOptions {
@@ -18,7 +25,11 @@ export interface DropzoneOverlayProps extends React.HTMLAttributes<HTMLDivElemen
18
25
  onFiles?: (accepted: File[], rejected: FileRejection[]) => void;
19
26
  /** Ignores drags, drops and pastes. */
20
27
  disabled?: boolean;
21
- /** Also takes files pasted anywhere inside the region. Pastes without files are left alone. */
28
+ /**
29
+ * Also takes files pasted anywhere inside the region. A paste with files is kept from the field
30
+ * unless none was accepted and it also carries text, so that text still lands. Pastes without
31
+ * files are left alone.
32
+ */
22
33
  enablePaste?: boolean;
23
34
  /** Overrides for any subset of the English strings. */
24
35
  strings?: Partial<DropzoneOverlayStrings>;
@@ -5,8 +5,16 @@ import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
5
5
  import { cn } from "../../lib/index.js";
6
6
  import { validateFiles } from "./file-validation.js";
7
7
  const DEFAULT_DROPZONE_OVERLAY_STRINGS = {
8
- dropHint: 'Drop files to attach'
8
+ dropHint: 'Drop files to attach',
9
+ typesHint: '',
10
+ sizeHint: '',
11
+ countHint: ''
9
12
  };
13
+ const LIMITS = [
14
+ 'types',
15
+ 'size',
16
+ 'count'
17
+ ];
10
18
  function hasFiles(dataTransfer) {
11
19
  return Array.from(dataTransfer?.types ?? []).includes('Files');
12
20
  }
@@ -34,13 +42,14 @@ const DropzoneOverlay = /*#__PURE__*/ forwardRef(({ className, children, onFiles
34
42
  disabled
35
43
  ]);
36
44
  const deliver = (files)=>{
37
- if (0 === files.length) return;
45
+ if (0 === files.length) return 0;
38
46
  const { accepted, rejected } = validateFiles(files, {
39
47
  accept,
40
48
  maxSize,
41
49
  maxFiles
42
50
  });
43
51
  onFiles?.(accepted, rejected);
52
+ return accepted.length;
44
53
  };
45
54
  return /*#__PURE__*/ jsxs("div", {
46
55
  ref: ref,
@@ -79,8 +88,9 @@ const DropzoneOverlay = /*#__PURE__*/ forwardRef(({ className, children, onFiles
79
88
  if (disabled || !enablePaste || event.defaultPrevented) return;
80
89
  const files = filesFrom(event.clipboardData);
81
90
  if (0 === files.length) return;
82
- event.preventDefault();
83
- deliver(files);
91
+ const accepted = deliver(files);
92
+ const hasText = Array.from(event.clipboardData?.types ?? []).includes('text/plain');
93
+ if (accepted > 0 || !hasText) event.preventDefault();
84
94
  },
85
95
  ...props,
86
96
  children: [
@@ -95,7 +105,13 @@ const DropzoneOverlay = /*#__PURE__*/ forwardRef(({ className, children, onFiles
95
105
  }),
96
106
  /*#__PURE__*/ jsx("span", {
97
107
  children: text.dropHint
98
- })
108
+ }),
109
+ LIMITS.filter((limit)=>text[`${limit}Hint`]).map((limit)=>/*#__PURE__*/ jsx("span", {
110
+ "data-slot": "dropzone-overlay-limit",
111
+ "data-limit": limit,
112
+ className: "text-xs font-normal text-muted-foreground",
113
+ children: text[`${limit}Hint`]
114
+ }, limit))
99
115
  ]
100
116
  })
101
117
  ]
@@ -30,38 +30,56 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
30
30
  const external_react_namespaceObject = require("react");
31
31
  const external_button_cjs_namespaceObject = require("./button.cjs");
32
32
  const index_cjs_namespaceObject = require("../../lib/index.cjs");
33
- const EmptyState = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ icon, code, title, description, action, secondaryAction, className, children, ...props }, ref)=>{
33
+ const use_ancestor_density_cjs_namespaceObject = require("../../lib/use-ancestor-density.cjs");
34
+ const EmptyState = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ icon, code, title, description, action, secondaryAction, size, className, children, ...props }, ref)=>{
35
+ const local = external_react_namespaceObject.useRef(null);
36
+ const setRef = external_react_namespaceObject.useMemo(()=>(0, index_cjs_namespaceObject.composeRefs)(ref, local), [
37
+ ref
38
+ ]);
39
+ const ancestorDensity = (0, use_ancestor_density_cjs_namespaceObject.useAncestorDensity)(local, null == size);
34
40
  const hasSimpleActions = !children && (action || secondaryAction);
41
+ const compact = (size ?? ancestorDensity) === 'compact';
42
+ const buttonSize = compact ? 'sm' : void 0;
43
+ const actionsClassName = compact ? 'mt-4 flex flex-wrap items-center justify-center gap-2' : 'mt-6 flex flex-wrap items-center justify-center gap-2';
35
44
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
36
- ref: ref,
45
+ ref: setRef,
37
46
  "data-slot": "empty-state",
38
- className: (0, index_cjs_namespaceObject.cn)('flex flex-col items-center justify-center p-8 text-center', className),
47
+ "data-size": compact ? 'compact' : void 0,
48
+ className: (0, index_cjs_namespaceObject.cn)(compact ? 'flex flex-col items-center justify-center px-4 py-8 text-center' : 'flex flex-col items-center justify-center p-8 text-center', className),
39
49
  ...props,
40
50
  children: [
41
51
  icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
42
- className: "mb-6 flex items-center justify-center",
52
+ className: compact ? 'mb-3 flex items-center justify-center' : 'mb-6 flex items-center justify-center',
43
53
  children: icon
44
54
  }),
45
- code && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h1", {
55
+ code && (compact ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
56
+ className: "mb-2 text-2xl font-bold leading-none",
57
+ children: code
58
+ }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h1", {
46
59
  className: "text-[40px] font-bold tracking-[-0.8px] leading-none mb-4",
47
60
  children: code
48
- }),
49
- /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
61
+ })),
62
+ compact ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
63
+ className: "text-sm text-foreground",
64
+ children: title
65
+ }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
50
66
  className: "text-xl font-semibold tracking-tight",
51
67
  children: title
52
68
  }),
53
69
  description && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
54
- className: "mt-3 max-w-md text-sm text-muted-foreground leading-relaxed",
70
+ className: compact ? 'mt-1 max-w-md text-xs text-muted-foreground' : 'mt-3 max-w-md text-sm text-muted-foreground leading-relaxed',
55
71
  children: description
56
72
  }),
57
73
  hasSimpleActions && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
58
- className: "mt-6 flex flex-wrap items-center justify-center gap-2",
74
+ className: actionsClassName,
59
75
  children: [
60
76
  action && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
77
+ size: buttonSize,
61
78
  onClick: action.onClick,
62
79
  children: action.label
63
80
  }),
64
81
  secondaryAction && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
82
+ size: buttonSize,
65
83
  variant: "outline",
66
84
  onClick: secondaryAction.onClick,
67
85
  children: secondaryAction.label
@@ -69,7 +87,7 @@ const EmptyState = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ ic
69
87
  ]
70
88
  }),
71
89
  children && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
72
- className: "mt-6 flex flex-wrap items-center justify-center gap-2",
90
+ className: actionsClassName,
73
91
  children: children
74
92
  })
75
93
  ]
@@ -18,6 +18,15 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
18
18
  label: string;
19
19
  onClick: () => void;
20
20
  };
21
+ /**
22
+ * `compact` fits inside a panel or list: smaller type and spacing. It renders no heading element
23
+ * (the title and any code are paragraphs): inside a panel the empty message is content of the
24
+ * panel's own section, and a heading there would add a stray entry to the page outline.
25
+ * Without a `size`, it is compact under an ancestor with `data-density="compact"` (a compact chat
26
+ * panel), like the other chat primitives. The heading changes element, which a CSS variant
27
+ * cannot do, so this is decided after mount; an explicit `size` always wins.
28
+ */
29
+ size?: 'default' | 'compact';
21
30
  }
22
31
  declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
23
32
  export { EmptyState };
@@ -1,39 +1,57 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { forwardRef } from "react";
2
+ import { forwardRef, useMemo, useRef } from "react";
3
3
  import { Button } from "./button.js";
4
- import { cn } from "../../lib/index.js";
5
- const EmptyState = /*#__PURE__*/ forwardRef(({ icon, code, title, description, action, secondaryAction, className, children, ...props }, ref)=>{
4
+ import { cn, composeRefs } from "../../lib/index.js";
5
+ import { useAncestorDensity } from "../../lib/use-ancestor-density.js";
6
+ const EmptyState = /*#__PURE__*/ forwardRef(({ icon, code, title, description, action, secondaryAction, size, className, children, ...props }, ref)=>{
7
+ const local = useRef(null);
8
+ const setRef = useMemo(()=>composeRefs(ref, local), [
9
+ ref
10
+ ]);
11
+ const ancestorDensity = useAncestorDensity(local, null == size);
6
12
  const hasSimpleActions = !children && (action || secondaryAction);
13
+ const compact = (size ?? ancestorDensity) === 'compact';
14
+ const buttonSize = compact ? 'sm' : void 0;
15
+ const actionsClassName = compact ? 'mt-4 flex flex-wrap items-center justify-center gap-2' : 'mt-6 flex flex-wrap items-center justify-center gap-2';
7
16
  return /*#__PURE__*/ jsxs("div", {
8
- ref: ref,
17
+ ref: setRef,
9
18
  "data-slot": "empty-state",
10
- className: cn('flex flex-col items-center justify-center p-8 text-center', className),
19
+ "data-size": compact ? 'compact' : void 0,
20
+ className: cn(compact ? 'flex flex-col items-center justify-center px-4 py-8 text-center' : 'flex flex-col items-center justify-center p-8 text-center', className),
11
21
  ...props,
12
22
  children: [
13
23
  icon && /*#__PURE__*/ jsx("div", {
14
- className: "mb-6 flex items-center justify-center",
24
+ className: compact ? 'mb-3 flex items-center justify-center' : 'mb-6 flex items-center justify-center',
15
25
  children: icon
16
26
  }),
17
- code && /*#__PURE__*/ jsx("h1", {
27
+ code && (compact ? /*#__PURE__*/ jsx("p", {
28
+ className: "mb-2 text-2xl font-bold leading-none",
29
+ children: code
30
+ }) : /*#__PURE__*/ jsx("h1", {
18
31
  className: "text-[40px] font-bold tracking-[-0.8px] leading-none mb-4",
19
32
  children: code
20
- }),
21
- /*#__PURE__*/ jsx("h3", {
33
+ })),
34
+ compact ? /*#__PURE__*/ jsx("p", {
35
+ className: "text-sm text-foreground",
36
+ children: title
37
+ }) : /*#__PURE__*/ jsx("h3", {
22
38
  className: "text-xl font-semibold tracking-tight",
23
39
  children: title
24
40
  }),
25
41
  description && /*#__PURE__*/ jsx("p", {
26
- className: "mt-3 max-w-md text-sm text-muted-foreground leading-relaxed",
42
+ className: compact ? 'mt-1 max-w-md text-xs text-muted-foreground' : 'mt-3 max-w-md text-sm text-muted-foreground leading-relaxed',
27
43
  children: description
28
44
  }),
29
45
  hasSimpleActions && /*#__PURE__*/ jsxs("div", {
30
- className: "mt-6 flex flex-wrap items-center justify-center gap-2",
46
+ className: actionsClassName,
31
47
  children: [
32
48
  action && /*#__PURE__*/ jsx(Button, {
49
+ size: buttonSize,
33
50
  onClick: action.onClick,
34
51
  children: action.label
35
52
  }),
36
53
  secondaryAction && /*#__PURE__*/ jsx(Button, {
54
+ size: buttonSize,
37
55
  variant: "outline",
38
56
  onClick: secondaryAction.onClick,
39
57
  children: secondaryAction.label
@@ -41,7 +59,7 @@ const EmptyState = /*#__PURE__*/ forwardRef(({ icon, code, title, description, a
41
59
  ]
42
60
  }),
43
61
  children && /*#__PURE__*/ jsx("div", {
44
- className: "mt-6 flex flex-wrap items-center justify-center gap-2",
62
+ className: actionsClassName,
45
63
  children: children
46
64
  })
47
65
  ]
@@ -53,7 +53,7 @@ const HoverCardContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef
53
53
  "data-slot": "hover-card-content",
54
54
  align: align,
55
55
  sideOffset: sideOffset,
56
- className: (0, index_cjs_namespaceObject.cn)('z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]', className),
56
+ className: (0, index_cjs_namespaceObject.cn)('z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-hover-card-content-transform-origin)', className),
57
57
  ...props
58
58
  })
59
59
  });
@@ -23,7 +23,7 @@ const HoverCardContent = /*#__PURE__*/ forwardRef(({ className, align = 'center'
23
23
  "data-slot": "hover-card-content",
24
24
  align: align,
25
25
  sideOffset: sideOffset,
26
- className: cn('z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]', className),
26
+ className: cn('z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-hover-card-content-transform-origin)', className),
27
27
  ...props
28
28
  })
29
29
  });