raft-ui 0.0.6 → 0.0.7

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 (131) hide show
  1. package/CHANGELOG.md +2 -8
  2. package/{src → dist}/styles.css +0 -2
  3. package/package.json +3 -4
  4. package/src/components/alert-dialog/alert-dialog.tsx +0 -215
  5. package/src/components/alert-dialog/index.ts +0 -30
  6. package/src/components/avatar/avatar.tsx +0 -375
  7. package/src/components/avatar/index.ts +0 -17
  8. package/src/components/badge/badge.tsx +0 -393
  9. package/src/components/badge/index.ts +0 -2
  10. package/src/components/banner/banner.tsx +0 -269
  11. package/src/components/banner/index.ts +0 -8
  12. package/src/components/bottom-sheet/bottom-sheet.tsx +0 -152
  13. package/src/components/bottom-sheet/index.ts +0 -22
  14. package/src/components/button/button.tsx +0 -499
  15. package/src/components/button/index.ts +0 -2
  16. package/src/components/checkbox/checkbox-indicator.tsx +0 -128
  17. package/src/components/checkbox/checkbox.tsx +0 -350
  18. package/src/components/checkbox/index.ts +0 -2
  19. package/src/components/combobox/combobox.tsx +0 -603
  20. package/src/components/combobox/index.ts +0 -52
  21. package/src/components/context-menu/context-menu.tsx +0 -380
  22. package/src/components/context-menu/index.ts +0 -34
  23. package/src/components/conversation-preview-card/conversation-preview-card.tsx +0 -336
  24. package/src/components/conversation-preview-card/index.ts +0 -32
  25. package/src/components/description-list/description-list.tsx +0 -116
  26. package/src/components/description-list/index.ts +0 -14
  27. package/src/components/dialog/dialog.tsx +0 -152
  28. package/src/components/dialog/index.ts +0 -26
  29. package/src/components/dropdown-menu/dropdown-menu.tsx +0 -405
  30. package/src/components/dropdown-menu/index.ts +0 -38
  31. package/src/components/empty-state/empty-state.tsx +0 -177
  32. package/src/components/empty-state/index.ts +0 -16
  33. package/src/components/field/field.tsx +0 -125
  34. package/src/components/field/index.ts +0 -18
  35. package/src/components/inline-code/index.ts +0 -2
  36. package/src/components/inline-code/inline-code.tsx +0 -35
  37. package/src/components/input/index.ts +0 -2
  38. package/src/components/input/input.tsx +0 -76
  39. package/src/components/input-group/index.ts +0 -7
  40. package/src/components/input-group/input-group.tsx +0 -215
  41. package/src/components/kbd/index.ts +0 -2
  42. package/src/components/kbd/kbd.tsx +0 -43
  43. package/src/components/label/index.ts +0 -2
  44. package/src/components/label/label.tsx +0 -99
  45. package/src/components/lightbox/index.ts +0 -24
  46. package/src/components/lightbox/lightbox.tsx +0 -245
  47. package/src/components/list-item/index.ts +0 -20
  48. package/src/components/list-item/list-item.tsx +0 -263
  49. package/src/components/media-list-item/index.ts +0 -20
  50. package/src/components/media-list-item/media-list-item.tsx +0 -169
  51. package/src/components/notification-center/index.ts +0 -39
  52. package/src/components/notification-center/notification-center.tsx +0 -558
  53. package/src/components/panel-header/index.ts +0 -22
  54. package/src/components/panel-header/panel-header.tsx +0 -199
  55. package/src/components/popover/index.ts +0 -30
  56. package/src/components/popover/popover.tsx +0 -248
  57. package/src/components/preview-shell/index.ts +0 -2
  58. package/src/components/preview-shell/preview-shell.tsx +0 -51
  59. package/src/components/quoted-message-card/index.ts +0 -36
  60. package/src/components/quoted-message-card/quoted-message-card.tsx +0 -391
  61. package/src/components/radio-group/index.ts +0 -2
  62. package/src/components/radio-group/radio-group.tsx +0 -119
  63. package/src/components/section-header/index.ts +0 -16
  64. package/src/components/section-header/section-header.tsx +0 -117
  65. package/src/components/section-label/index.ts +0 -2
  66. package/src/components/section-label/section-label.tsx +0 -38
  67. package/src/components/segmented-control/index.ts +0 -12
  68. package/src/components/segmented-control/segmented-control.tsx +0 -129
  69. package/src/components/select/index.ts +0 -40
  70. package/src/components/select/select.tsx +0 -382
  71. package/src/components/separator/index.ts +0 -2
  72. package/src/components/separator/separator.tsx +0 -40
  73. package/src/components/spinner/index.ts +0 -2
  74. package/src/components/spinner/spinner.tsx +0 -228
  75. package/src/components/status/index.ts +0 -2
  76. package/src/components/status/status.tsx +0 -152
  77. package/src/components/tabs/index.ts +0 -24
  78. package/src/components/tabs/tabs.tsx +0 -451
  79. package/src/components/text/index.ts +0 -2
  80. package/src/components/text/text.tsx +0 -131
  81. package/src/components/textarea/index.ts +0 -2
  82. package/src/components/textarea/textarea.tsx +0 -136
  83. package/src/components/toggle-group/index.ts +0 -7
  84. package/src/components/toggle-group/toggle-group.tsx +0 -111
  85. package/src/components/tooltip/index.ts +0 -8
  86. package/src/components/tooltip/tooltip.tsx +0 -212
  87. package/src/index.ts +0 -429
  88. package/src/legacy/AttentionDot.tsx +0 -28
  89. package/src/legacy/AvatarListRow.tsx +0 -87
  90. package/src/legacy/AvatarSlot.tsx +0 -157
  91. package/src/legacy/Badge.tsx +0 -95
  92. package/src/legacy/Banner.tsx +0 -74
  93. package/src/legacy/BottomSheet.tsx +0 -76
  94. package/src/legacy/CheckMarker.tsx +0 -72
  95. package/src/legacy/Checkbox.tsx +0 -81
  96. package/src/legacy/ConversationPreviewCard.tsx +0 -169
  97. package/src/legacy/DismissBackdrop.tsx +0 -68
  98. package/src/legacy/EmptyState.tsx +0 -63
  99. package/src/legacy/ExperimentalBadge.tsx +0 -19
  100. package/src/legacy/FormField.tsx +0 -106
  101. package/src/legacy/KeyValueRow.tsx +0 -67
  102. package/src/legacy/Lightbox.tsx +0 -119
  103. package/src/legacy/NotificationCenter.tsx +0 -217
  104. package/src/legacy/PanelHeader.tsx +0 -94
  105. package/src/legacy/PreviewShell.tsx +0 -40
  106. package/src/legacy/QuotedMessageCard.tsx +0 -181
  107. package/src/legacy/ReorderablePanelTabs.tsx +0 -156
  108. package/src/legacy/SandboxedPreviewFrame.tsx +0 -59
  109. package/src/legacy/SearchInput.tsx +0 -23
  110. package/src/legacy/SectionEyebrow.tsx +0 -60
  111. package/src/legacy/SectionHeader.tsx +0 -68
  112. package/src/legacy/SegmentedControl.tsx +0 -74
  113. package/src/legacy/SlugInput.tsx +0 -29
  114. package/src/legacy/Spinner.tsx +0 -89
  115. package/src/legacy/StatusDot.tsx +0 -51
  116. package/src/legacy/SurfaceListItem.tsx +0 -32
  117. package/src/legacy/Textarea.tsx +0 -137
  118. package/src/legacy/button.tsx +0 -100
  119. package/src/legacy/context-menu-divider.tsx +0 -12
  120. package/src/legacy/menu-item.tsx +0 -66
  121. package/src/legacy/selection-popover.tsx +0 -212
  122. package/src/legacy/server-switcher-menu.tsx +0 -203
  123. package/src/legacy/source.css +0 -240
  124. package/src/lib/cn.ts +0 -1
  125. package/src/lib/styled-props.ts +0 -11
  126. package/src/lib/theme/theme-context.ts +0 -28
  127. package/src/lib/theme/theme-provider.tsx +0 -181
  128. package/src/lib/theme/use-theme.ts +0 -12
  129. package/src/lib/tv.ts +0 -29
  130. package/src/lib/without-children.ts +0 -6
  131. package/src/wip.ts +0 -291
package/src/index.ts DELETED
@@ -1,429 +0,0 @@
1
- export { Button, buttonVariants } from "./components/button/index";
2
- export type { ButtonProps } from "./components/button/index";
3
-
4
- export { Checkbox } from "./components/checkbox/index";
5
- export type { CheckboxProps } from "./components/checkbox/index";
6
-
7
- export {
8
- ContextMenu,
9
- ContextMenuCheckboxItem,
10
- ContextMenuCheckboxItemIndicator,
11
- ContextMenuContent,
12
- ContextMenuItem,
13
- ContextMenuLabel,
14
- ContextMenuPortal,
15
- ContextMenuRadioGroup,
16
- ContextMenuRadioItem,
17
- ContextMenuRadioItemIndicator,
18
- ContextMenuSeparator,
19
- ContextMenuShortcut,
20
- ContextMenuSubmenu,
21
- ContextMenuSubmenuTrigger,
22
- ContextMenuTrigger,
23
- } from "./components/context-menu/index";
24
- export type {
25
- ContextMenuCheckboxItemIndicatorProps,
26
- ContextMenuCheckboxItemProps,
27
- ContextMenuContentProps,
28
- ContextMenuItemProps,
29
- ContextMenuLabelProps,
30
- ContextMenuPortalProps,
31
- ContextMenuProps,
32
- ContextMenuRadioGroupProps,
33
- ContextMenuRadioItemIndicatorProps,
34
- ContextMenuRadioItemProps,
35
- ContextMenuSeparatorProps,
36
- ContextMenuShortcutProps,
37
- ContextMenuSubmenuProps,
38
- ContextMenuSubmenuTriggerProps,
39
- ContextMenuTriggerProps,
40
- } from "./components/context-menu/index";
41
-
42
- export {
43
- DropdownMenu,
44
- DropdownMenuCheckboxItem,
45
- DropdownMenuCheckboxItemIndicator,
46
- DropdownMenuContent,
47
- DropdownMenuItem,
48
- DropdownMenuItemCount,
49
- DropdownMenuLabel,
50
- DropdownMenuPopup,
51
- DropdownMenuPortal,
52
- DropdownMenuRadioGroup,
53
- DropdownMenuRadioItem,
54
- DropdownMenuRadioItemIndicator,
55
- DropdownMenuSeparator,
56
- DropdownMenuShortcut,
57
- DropdownMenuSubmenu,
58
- DropdownMenuSubmenuTrigger,
59
- DropdownMenuTrigger,
60
- } from "./components/dropdown-menu/index";
61
- export type {
62
- DropdownMenuCheckboxItemIndicatorProps,
63
- DropdownMenuCheckboxItemProps,
64
- DropdownMenuContentProps,
65
- DropdownMenuItemCountProps,
66
- DropdownMenuItemProps,
67
- DropdownMenuLabelProps,
68
- DropdownMenuPopupProps,
69
- DropdownMenuPortalProps,
70
- DropdownMenuProps,
71
- DropdownMenuRadioGroupProps,
72
- DropdownMenuRadioItemIndicatorProps,
73
- DropdownMenuRadioItemProps,
74
- DropdownMenuSeparatorProps,
75
- DropdownMenuShortcutProps,
76
- DropdownMenuSubmenuProps,
77
- DropdownMenuSubmenuTriggerProps,
78
- DropdownMenuTriggerProps,
79
- } from "./components/dropdown-menu/index";
80
-
81
- export {
82
- Tooltip,
83
- TooltipContent,
84
- TooltipPortal,
85
- TooltipProvider,
86
- TooltipTrigger,
87
- } from "./components/tooltip/index";
88
- export type {
89
- TooltipContentProps,
90
- TooltipPortalProps,
91
- TooltipProps,
92
- TooltipProviderProps,
93
- TooltipTriggerProps,
94
- } from "./components/tooltip/index";
95
-
96
- export {
97
- Popover,
98
- PopoverArrow,
99
- PopoverBackdrop,
100
- PopoverClose,
101
- PopoverContent,
102
- PopoverDescription,
103
- PopoverHeader,
104
- PopoverPopup,
105
- PopoverPortal,
106
- PopoverSeparator,
107
- PopoverTitle,
108
- PopoverTrigger,
109
- PopoverViewport,
110
- } from "./components/popover/index";
111
- export type {
112
- PopoverArrowProps,
113
- PopoverBackdropProps,
114
- PopoverCloseProps,
115
- PopoverContentProps,
116
- PopoverDescriptionProps,
117
- PopoverHeaderProps,
118
- PopoverPopupProps,
119
- PopoverPortalProps,
120
- PopoverProps,
121
- PopoverSeparatorProps,
122
- PopoverTitleProps,
123
- PopoverTriggerProps,
124
- PopoverViewportProps,
125
- } from "./components/popover/index";
126
-
127
- export { Label, LabelAsterisk, LabelOptional, LabelSub } from "./components/label/index";
128
- export type {
129
- LabelAsteriskProps,
130
- LabelOptionalProps,
131
- LabelProps,
132
- LabelSubProps,
133
- } from "./components/label/index";
134
-
135
- export { Input } from "./components/input/index";
136
- export type { InputProps } from "./components/input/index";
137
-
138
- export {
139
- Field,
140
- FieldControl,
141
- FieldDescription,
142
- FieldError,
143
- FieldItem,
144
- FieldLabel,
145
- FieldValidity,
146
- } from "./components/field/index";
147
- export type {
148
- FieldControlProps,
149
- FieldDescriptionProps,
150
- FieldErrorProps,
151
- FieldItemProps,
152
- FieldLabelProps,
153
- FieldProps,
154
- FieldValidityProps,
155
- } from "./components/field/index";
156
-
157
- export { InputGroup, InputGroupAddon, InputGroupInput } from "./components/input-group/index";
158
- export type {
159
- InputGroupAddonProps,
160
- InputGroupAddonTextProps,
161
- InputGroupInputProps,
162
- InputGroupProps,
163
- } from "./components/input-group/index";
164
-
165
- export {
166
- Combobox,
167
- ComboboxChip,
168
- ComboboxChipRemove,
169
- ComboboxChips,
170
- ComboboxClear,
171
- ComboboxCollection,
172
- ComboboxControl,
173
- ComboboxContent,
174
- ComboboxEmpty,
175
- ComboboxGroup,
176
- ComboboxGroupLabel,
177
- ComboboxHeader,
178
- ComboboxInput,
179
- ComboboxInputGroup,
180
- ComboboxItem,
181
- ComboboxItemIndicator,
182
- ComboboxLabel,
183
- ComboboxList,
184
- ComboboxPopup,
185
- ComboboxPortal,
186
- ComboboxRow,
187
- ComboboxSeparator,
188
- ComboboxTrigger,
189
- ComboboxTriggerIndicator,
190
- ComboboxValue,
191
- } from "./components/combobox/index";
192
- export type {
193
- ComboboxChipProps,
194
- ComboboxChipRemoveProps,
195
- ComboboxChipsProps,
196
- ComboboxClearProps,
197
- ComboboxCollectionProps,
198
- ComboboxControlProps,
199
- ComboboxContentProps,
200
- ComboboxEmptyProps,
201
- ComboboxGroupLabelProps,
202
- ComboboxGroupProps,
203
- ComboboxHeaderProps,
204
- ComboboxInputGroupProps,
205
- ComboboxInputProps,
206
- ComboboxItemIndicatorProps,
207
- ComboboxItemProps,
208
- ComboboxLabelProps,
209
- ComboboxListProps,
210
- ComboboxPopupProps,
211
- ComboboxPortalProps,
212
- ComboboxProps,
213
- ComboboxRowProps,
214
- ComboboxSeparatorProps,
215
- ComboboxTriggerIndicatorProps,
216
- ComboboxTriggerProps,
217
- ComboboxValueProps,
218
- } from "./components/combobox/index";
219
-
220
- export {
221
- Select,
222
- SelectArrow,
223
- SelectContent,
224
- SelectGroup,
225
- SelectGroupLabel,
226
- SelectIcon,
227
- SelectItem,
228
- SelectItemIndicator,
229
- SelectItemText,
230
- SelectLabel,
231
- SelectList,
232
- SelectPopup,
233
- SelectPortal,
234
- SelectScrollDownArrow,
235
- SelectScrollUpArrow,
236
- SelectSeparator,
237
- SelectTrigger,
238
- SelectValue,
239
- } from "./components/select/index";
240
- export type {
241
- SelectArrowProps,
242
- SelectContentProps,
243
- SelectGroupLabelProps,
244
- SelectGroupProps,
245
- SelectIconProps,
246
- SelectItemIndicatorProps,
247
- SelectItemProps,
248
- SelectItemTextProps,
249
- SelectLabelProps,
250
- SelectListProps,
251
- SelectPopupProps,
252
- SelectPortalProps,
253
- SelectProps,
254
- SelectScrollDownArrowProps,
255
- SelectScrollUpArrowProps,
256
- SelectSeparatorProps,
257
- SelectTriggerProps,
258
- SelectValueProps,
259
- } from "./components/select/index";
260
-
261
- export { RadioGroup, RadioGroupIndicator, RadioGroupItem } from "./components/radio-group/index";
262
- export type {
263
- RadioGroupIndicatorProps,
264
- RadioGroupItemProps,
265
- RadioGroupProps,
266
- } from "./components/radio-group/index";
267
-
268
- export {
269
- SegmentedControl,
270
- SegmentedControlCount,
271
- SegmentedControlItem,
272
- SegmentedControlLabel,
273
- } from "./components/segmented-control/index";
274
- export type {
275
- SegmentedControlCountProps,
276
- SegmentedControlItemProps,
277
- SegmentedControlLabelProps,
278
- SegmentedControlProps,
279
- } from "./components/segmented-control/index";
280
-
281
- export { Textarea, TextareaCounter, TextareaGroup } from "./components/textarea/index";
282
- export type {
283
- TextareaCounterProps,
284
- TextareaGroupProps,
285
- TextareaProps,
286
- } from "./components/textarea/index";
287
-
288
- export { Badge } from "./components/badge/index";
289
- export type { BadgeProps } from "./components/badge/index";
290
-
291
- export {
292
- Avatar,
293
- AvatarBadge,
294
- AvatarFallback,
295
- AvatarGroup,
296
- AvatarGroupCount,
297
- AvatarImage,
298
- type AvatarSize,
299
- } from "./components/avatar/index";
300
- export type {
301
- AvatarBadgeProps,
302
- AvatarFallbackProps,
303
- AvatarGroupCountProps,
304
- AvatarGroupProps,
305
- AvatarImageProps,
306
- AvatarProps,
307
- } from "./components/avatar/index";
308
-
309
- export { InlineCode } from "./components/inline-code/index";
310
- export type { InlineCodeProps } from "./components/inline-code/index";
311
-
312
- export { Kbd, KbdGroup } from "./components/kbd/index";
313
- export type { KbdGroupProps, KbdProps } from "./components/kbd/index";
314
-
315
- export { Text, TextHeading, TextMono, TextSans } from "./components/text/index";
316
- export type { TextHeadingProps, TextMonoProps, TextSansProps } from "./components/text/index";
317
-
318
- export { Status } from "./components/status/index";
319
- export type { StatusProps } from "./components/status/index";
320
-
321
- export { Spinner } from "./components/spinner/index";
322
- export type { SpinnerProps } from "./components/spinner/index";
323
-
324
- export { Banner, BannerAction, BannerDescription, BannerTitle } from "./components/banner/index";
325
- export type {
326
- BannerActionProps,
327
- BannerDescriptionProps,
328
- BannerProps,
329
- BannerStatus,
330
- BannerTitleProps,
331
- } from "./components/banner/index";
332
-
333
- export {
334
- EmptyState,
335
- EmptyStateActions,
336
- EmptyStateContent,
337
- EmptyStateDescription,
338
- EmptyStateIcon,
339
- EmptyStateTitle,
340
- } from "./components/empty-state/index";
341
- export type {
342
- EmptyStateActionsProps,
343
- EmptyStateContentProps,
344
- EmptyStateDescriptionProps,
345
- EmptyStateIconProps,
346
- EmptyStateProps,
347
- EmptyStateTitleProps,
348
- } from "./components/empty-state/index";
349
-
350
- export {
351
- NotificationCenter,
352
- NotificationCenterActionButton,
353
- NotificationCenterCount,
354
- NotificationCenterEmptyState,
355
- NotificationCenterHeader,
356
- NotificationCenterItem,
357
- NotificationCenterItemActions,
358
- NotificationCenterItemBody,
359
- NotificationCenterItemContent,
360
- NotificationCenterItemIcon,
361
- NotificationCenterItemRow,
362
- NotificationCenterItemTitle,
363
- NotificationCenterList,
364
- NotificationCenterPopup,
365
- NotificationCenterScroller,
366
- NotificationCenterTitle,
367
- NotificationCenterTrigger,
368
- } from "./components/notification-center/index";
369
- export type {
370
- NotificationCenterActionButtonProps,
371
- NotificationCenterCountProps,
372
- NotificationCenterEmptyStateProps,
373
- NotificationCenterHeaderProps,
374
- NotificationCenterItemActionsProps,
375
- NotificationCenterItemBodyProps,
376
- NotificationCenterItemContentProps,
377
- NotificationCenterItemIconProps,
378
- NotificationCenterItemProps,
379
- NotificationCenterItemRowProps,
380
- NotificationCenterItemTitleProps,
381
- NotificationCenterListProps,
382
- NotificationCenterPopupProps,
383
- NotificationCenterPortalProps,
384
- NotificationCenterProps,
385
- NotificationCenterScrollerProps,
386
- NotificationCenterTitleProps,
387
- NotificationCenterTriggerProps,
388
- } from "./components/notification-center/index";
389
-
390
- export {
391
- SortableTabsList,
392
- SortableTabsTab,
393
- Tabs,
394
- TabsBackground,
395
- TabsIndicator,
396
- TabsLabel,
397
- TabsList,
398
- TabsPanel,
399
- TabsTab,
400
- useOrderedTabs,
401
- } from "./components/tabs/index";
402
- export type {
403
- OrderedTabItem,
404
- SortableTabsListProps,
405
- SortableTabsTabProps,
406
- TabsBackgroundProps,
407
- TabsIndicatorProps,
408
- TabsLabelProps,
409
- TabsListProps,
410
- TabsPanelProps,
411
- TabsProps,
412
- TabsTabProps,
413
- } from "./components/tabs/index";
414
-
415
- export { Separator } from "./components/separator/index";
416
- export type { SeparatorProps } from "./components/separator/index";
417
-
418
- export { cn } from "./lib/cn";
419
- export { ThemeProvider } from "./lib/theme/theme-provider";
420
- export type { ThemeProviderProps } from "./lib/theme/theme-provider";
421
- export { useTheme, useThemeFamily } from "./lib/theme/use-theme";
422
- export type {
423
- ResolvedThemeMode,
424
- SetTheme,
425
- SetThemeOptions,
426
- Theme,
427
- ThemeMode,
428
- ThemeState,
429
- } from "./lib/theme/theme-context";
@@ -1,28 +0,0 @@
1
- import type { HTMLAttributes } from "react";
2
-
3
- type SpanPassthroughProps = HTMLAttributes<HTMLSpanElement> &
4
- Record<`data-${string}`, string | undefined>;
5
-
6
- export interface AttentionDotProps extends Omit<SpanPassthroughProps, "children"> {
7
- size?: "sm" | "lg";
8
- tone?: string;
9
- }
10
-
11
- const SIZE_CLASS: Record<NonNullable<AttentionDotProps["size"]>, string> = {
12
- sm: "size-1",
13
- lg: "size-2.5",
14
- };
15
-
16
- export default function AttentionDot({
17
- size = "lg",
18
- tone = "bg-brutal-pink",
19
- className,
20
- ...rest
21
- }: AttentionDotProps) {
22
- return (
23
- <span
24
- {...rest}
25
- className={`inline-block shrink-0 rounded-full border border-black ${SIZE_CLASS[size]} ${tone} ${className ?? ""}`}
26
- />
27
- );
28
- }
@@ -1,87 +0,0 @@
1
- import type { HTMLAttributes, ReactNode } from "react";
2
- import SurfaceListItem from "./SurfaceListItem";
3
-
4
- export interface AvatarListRowProps {
5
- avatar: ReactNode;
6
- name: ReactNode;
7
- subtitle?: ReactNode;
8
- rightContent?: ReactNode;
9
- onClick?: () => void;
10
- selected?: boolean;
11
- align?: "start" | "center";
12
- actionContent?: ReactNode;
13
- className?: string;
14
- buttonProps?: HTMLAttributes<HTMLButtonElement> & Record<`data-${string}`, string | undefined>;
15
- }
16
-
17
- export default function AvatarListRow({
18
- avatar,
19
- name,
20
- subtitle,
21
- rightContent,
22
- onClick,
23
- selected = false,
24
- align = "center",
25
- actionContent,
26
- className = "",
27
- buttonProps,
28
- }: AvatarListRowProps) {
29
- const interactive = onClick !== undefined;
30
- const itemsAlignClass = align === "start" ? "items-start" : "items-center";
31
- const textColumn = (
32
- <div className="min-w-0 flex-1">
33
- {align === "start" ? (
34
- <div className="flex min-w-0 flex-col gap-1">
35
- <span className="truncate text-sm font-bold text-black">{name}</span>
36
- {subtitle != null && subtitle !== false && (
37
- <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs font-mono text-black/50">
38
- {subtitle}
39
- </span>
40
- )}
41
- </div>
42
- ) : (
43
- <div className="flex min-w-0 flex-wrap items-baseline gap-x-2">
44
- <span className="truncate text-sm font-bold text-black">{name}</span>
45
- {subtitle != null && subtitle !== false && (
46
- <span className="text-xs font-mono text-black/50">{subtitle}</span>
47
- )}
48
- </div>
49
- )}
50
- </div>
51
- );
52
- const body = (
53
- <>
54
- {avatar}
55
- {textColumn}
56
- {rightContent != null && rightContent !== false && (
57
- <div className="flex shrink-0 self-center items-center gap-1.5">{rightContent}</div>
58
- )}
59
- </>
60
- );
61
- const hasAction = actionContent != null && actionContent !== false;
62
- return (
63
- <SurfaceListItem
64
- selected={selected}
65
- interactive={interactive}
66
- className={`group px-3 py-2 ${className}`}
67
- >
68
- <div className={`flex w-full min-w-0 gap-3 ${itemsAlignClass}`}>
69
- {interactive ? (
70
- <button
71
- {...buttonProps}
72
- type="button"
73
- onClick={onClick}
74
- className={`flex min-w-0 flex-1 gap-3 text-left ${itemsAlignClass}`}
75
- >
76
- {body}
77
- </button>
78
- ) : (
79
- <div className={`flex min-w-0 flex-1 gap-3 ${itemsAlignClass}`}>{body}</div>
80
- )}
81
- {hasAction && (
82
- <div className="flex shrink-0 self-center items-center gap-1.5">{actionContent}</div>
83
- )}
84
- </div>
85
- </SurfaceListItem>
86
- );
87
- }
@@ -1,157 +0,0 @@
1
- import { User } from "lucide-react";
2
-
3
- export type AvatarContext =
4
- | "profile-tile"
5
- | "account-tile"
6
- | "mention-card"
7
- | "panel-header"
8
- | "surface-list"
9
- | "members-row"
10
- | "creator-link"
11
- | "sidebar-list"
12
- | "compact-list"
13
- | "preview-mini";
14
-
15
- type ContextSpec = {
16
- size: string;
17
- border: string;
18
- agentPixel: number;
19
- gravatarSize: number;
20
- gravatarIcon: number;
21
- placeholderIcon: number;
22
- };
23
-
24
- const SPEC: Record<AvatarContext, ContextSpec> = {
25
- "profile-tile": {
26
- size: "size-16",
27
- border: "border-2",
28
- agentPixel: 60,
29
- gravatarSize: 60,
30
- gravatarIcon: 32,
31
- placeholderIcon: 32,
32
- },
33
- "account-tile": {
34
- size: "size-14",
35
- border: "border-2",
36
- agentPixel: 52,
37
- gravatarSize: 52,
38
- gravatarIcon: 24,
39
- placeholderIcon: 24,
40
- },
41
- "mention-card": {
42
- size: "size-12",
43
- border: "border-2",
44
- agentPixel: 44,
45
- gravatarSize: 44,
46
- gravatarIcon: 24,
47
- placeholderIcon: 24,
48
- },
49
- "panel-header": {
50
- size: "size-9",
51
- border: "border-2",
52
- agentPixel: 32,
53
- gravatarSize: 32,
54
- gravatarIcon: 16,
55
- placeholderIcon: 18,
56
- },
57
- "surface-list": {
58
- size: "size-8",
59
- border: "border-2",
60
- agentPixel: 28,
61
- gravatarSize: 28,
62
- gravatarIcon: 16,
63
- placeholderIcon: 16,
64
- },
65
- "members-row": {
66
- size: "size-7",
67
- border: "border",
68
- agentPixel: 26,
69
- gravatarSize: 24,
70
- gravatarIcon: 14,
71
- placeholderIcon: 14,
72
- },
73
- "creator-link": {
74
- size: "size-[22px]",
75
- border: "border",
76
- agentPixel: 20,
77
- gravatarSize: 20,
78
- gravatarIcon: 12,
79
- placeholderIcon: 12,
80
- },
81
- "sidebar-list": {
82
- size: "size-[18px]",
83
- border: "border",
84
- agentPixel: 16,
85
- gravatarSize: 16,
86
- gravatarIcon: 10,
87
- placeholderIcon: 10,
88
- },
89
- "compact-list": {
90
- size: "size-5",
91
- border: "border",
92
- agentPixel: 18,
93
- gravatarSize: 18,
94
- gravatarIcon: 12,
95
- placeholderIcon: 12,
96
- },
97
- "preview-mini": {
98
- size: "size-[14px]",
99
- border: "border",
100
- agentPixel: 14,
101
- gravatarSize: 14,
102
- gravatarIcon: 10,
103
- placeholderIcon: 10,
104
- },
105
- };
106
-
107
- export type AvatarSlotProps = {
108
- context: AvatarContext;
109
- type: "agent" | "human";
110
- agentAvatarUrl?: string | null;
111
- gravatarHash?: string | null;
112
- humanAvatarUrl?: string | null;
113
- email?: string | null;
114
- humanPlaceholder?: boolean;
115
- className?: string;
116
- };
117
-
118
- export default function AvatarSlot({
119
- context,
120
- type,
121
- agentAvatarUrl,
122
- humanAvatarUrl,
123
- humanPlaceholder,
124
- className = "",
125
- }: AvatarSlotProps) {
126
- const spec = SPEC[context];
127
- const fallbackBg = type === "agent" ? "bg-brutal-cyan" : "bg-brutal-lavender";
128
- const baseClass = `flex shrink-0 items-center justify-center overflow-hidden ${spec.size} ${spec.border} border-black ${fallbackBg}`;
129
-
130
- if (type === "agent") {
131
- return (
132
- <div className={`${baseClass} ${className}`.trim()}>
133
- {agentAvatarUrl ? (
134
- <img src={agentAvatarUrl} alt="Agent avatar" className="h-full w-full object-cover" />
135
- ) : (
136
- <User size={spec.placeholderIcon} />
137
- )}
138
- </div>
139
- );
140
- }
141
-
142
- const humanBase = `${baseClass} text-black`;
143
-
144
- if (humanAvatarUrl && !humanPlaceholder) {
145
- return (
146
- <div className={`${humanBase} ${className}`.trim()}>
147
- <img src={humanAvatarUrl} alt="" className="h-full w-full object-cover" />
148
- </div>
149
- );
150
- }
151
-
152
- return (
153
- <div className={`${humanBase} ${className}`.trim()}>
154
- <User size={humanPlaceholder ? spec.placeholderIcon : spec.gravatarIcon} />
155
- </div>
156
- );
157
- }