@botiverse/raft-ui 0.60.2 → 0.61.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
## [0.61.0](https://github.com/botiverse/raft-design/compare/v0.60.3...v0.61.0) (2026-11-04)
|
|
2
|
+
|
|
3
|
+
### Changed
|
|
4
|
+
|
|
5
|
+
- **AvatarGroup** and **AvatarGroupButton**: faces overlap directly, with no ring of the surface color between them; the seam sits on a face's straight edge, never in its corner. The "+N" chip has the faces' ink edge. ([#988](https://github.com/botiverse/raft-design/pull/988))
|
|
6
|
+
- Why: the ring read as a gap between faces, and the app's own stacks (Working now, typing, thread followers) had none, so the same stack looked two ways (stdrc, #proj-raft-ui:7531279d).
|
|
7
|
+
- Affects: every AvatarGroup, AvatarGroupButton and CommentMarker stack. Geometry is unchanged: 19px and 14px faces, 5px overlap (the smallest that clears the 4px corner), so fixed widths built on it still hold. Hover on AvatarGroupButton now fills only around the stack.
|
|
8
|
+
- Docs: https://raft-design.botiverse.build/components/avatar/
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **AvatarGroup**: a `render` prop, so a stack can render inside a `<p>` or a button.
|
|
13
|
+
|
|
14
|
+
### Removed
|
|
15
|
+
|
|
16
|
+
- **`--avatar-group-surface`**: the variable that colored the ring. Setting it no longer has any effect; remove it.
|
|
17
|
+
|
|
18
|
+
## [0.60.3](https://github.com/botiverse/raft-design/compare/v0.60.2...v0.60.3) (2026-11-04)
|
|
19
|
+
|
|
20
|
+
### Fixed
|
|
21
|
+
|
|
22
|
+
- **Tooltip**: a tooltip whose only child is a component (the reaction tooltip's names) no longer gets an empty text slot and 6px of extra space on the right. ([#986](https://github.com/botiverse/raft-design/pull/986))
|
|
23
|
+
- Why: TooltipContent treats any component child as a possible leading icon, since lucide icons are components. With nothing after it, the names went into the icon slot, followed by an empty text slot and the 6px gap, so the padding read 10px on the left and 16px on the right.
|
|
24
|
+
- Affects: a tooltip with a single component child now renders it as plain content. An icon followed by text, and a leading Kbd, are unchanged.
|
|
25
|
+
- Docs: https://raft-design.botiverse.build/components/tooltip/
|
|
26
|
+
|
|
1
27
|
## [0.60.2](https://github.com/botiverse/raft-design/compare/v0.60.1...v0.60.2) (2026-11-04)
|
|
2
28
|
|
|
3
29
|
### Fixed
|
|
@@ -156,8 +156,8 @@ export type AvatarBadgeProps = useRender.ComponentProps<"span"> & {
|
|
|
156
156
|
offset?: AvatarBadgeOffset;
|
|
157
157
|
};
|
|
158
158
|
export declare function AvatarBadge({ className, render, offset, presence, ...props }: AvatarBadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
159
|
-
export type AvatarGroupProps =
|
|
160
|
-
export declare function AvatarGroup({ className, ...props }: AvatarGroupProps): import("react").
|
|
159
|
+
export type AvatarGroupProps = useRender.ComponentProps<"div">;
|
|
160
|
+
export declare function AvatarGroup({ className, render, ...props }: AvatarGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
161
161
|
export type AvatarGroupButtonProps = StyledProps<Button.Props> & DataAttributes;
|
|
162
162
|
export declare function AvatarGroupButton({ className, render, nativeButton, ...props }: AvatarGroupButtonProps): import("react").JSX.Element;
|
|
163
163
|
export type AvatarGroupCountProps = ComponentPropsWithRef<"span"> & {
|
|
@@ -60,20 +60,11 @@ const avatar = tv({
|
|
|
60
60
|
"group-data-[size=xl]/avatar:border-2",
|
|
61
61
|
"group-data-[size=xs]/avatar:border group-data-[size=2xs]/avatar:border group-data-[size=3xs]/avatar:border"
|
|
62
62
|
],
|
|
63
|
-
group: [
|
|
64
|
-
"group/avatar-group flex items-center",
|
|
65
|
-
"stack-x-[-5px]",
|
|
66
|
-
"*:data-[slot=avatar]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
|
|
67
|
-
"*:data-[slot=avatar-group-count]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]"
|
|
68
|
-
],
|
|
63
|
+
group: ["group/avatar-group flex items-center", "stack-x-[-5px]"],
|
|
69
64
|
groupButton: [
|
|
70
65
|
"relative inline-flex shrink-0 cursor-pointer items-center p-1",
|
|
71
66
|
"rounded-chip border-0 bg-transparent",
|
|
72
|
-
"transition-colors
|
|
73
|
-
"enabled:hover:*:data-[slot=avatar]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--fill-medium),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
|
|
74
|
-
"enabled:hover:*:data-[slot=avatar-group-count]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--fill-medium),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
|
|
75
|
-
"enabled:active:*:data-[slot=avatar]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--fill-medium),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
|
|
76
|
-
"enabled:active:*:data-[slot=avatar-group-count]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--fill-medium),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
|
|
67
|
+
"transition-colors enabled:hover:bg-fill-medium enabled:active:bg-fill-medium",
|
|
77
68
|
"outline-none focus-visible:shadow-focus",
|
|
78
69
|
"disabled:cursor-default"
|
|
79
70
|
]
|
|
@@ -268,12 +259,13 @@ function AvatarBadge({ className, render, offset, presence = "online", ...props
|
|
|
268
259
|
state: { slot: "avatar-badge" }
|
|
269
260
|
});
|
|
270
261
|
}
|
|
271
|
-
function AvatarGroup({ className, ...props }) {
|
|
262
|
+
function AvatarGroup({ className, render, ...props }) {
|
|
272
263
|
const { group } = avatar();
|
|
273
|
-
return
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
264
|
+
return useRender({
|
|
265
|
+
defaultTagName: "div",
|
|
266
|
+
render,
|
|
267
|
+
props: mergeProps({ className: group({ className }) }, props),
|
|
268
|
+
state: { slot: "avatar-group" }
|
|
277
269
|
});
|
|
278
270
|
}
|
|
279
271
|
function AvatarGroupButton({ className, render, nativeButton, ...props }) {
|
|
@@ -290,7 +282,7 @@ function AvatarGroupCount({ size, className, ...props }) {
|
|
|
290
282
|
const { root } = avatar({ size });
|
|
291
283
|
return /* @__PURE__ */ jsx("span", {
|
|
292
284
|
"data-slot": "avatar-group-count",
|
|
293
|
-
className: root({ class: ["
|
|
285
|
+
className: root({ class: ["bg-fill-muted font-mono text-mono-meta font-bold tabular-nums text-foreground-muted", className] }),
|
|
294
286
|
...props
|
|
295
287
|
});
|
|
296
288
|
}
|
|
@@ -43,11 +43,10 @@ const comment = tv({
|
|
|
43
43
|
"relative inline-flex h-6 shrink-0 items-center gap-1 align-top whitespace-nowrap",
|
|
44
44
|
"rounded-chip border border-line-hairline py-0 ps-[3px] pe-1.5",
|
|
45
45
|
"font-mono text-mono-meta font-bold tabular-nums text-foreground",
|
|
46
|
-
"bg-layer-card
|
|
46
|
+
"bg-layer-card",
|
|
47
47
|
"cursor-pointer hover:overlay-medium active:overlay-medium",
|
|
48
48
|
"data-active:border-[1.5px] data-active:border-line-strong data-active:bg-brand-soft data-active:ps-[2.5px] data-active:pe-[5.5px]",
|
|
49
49
|
"data-popup-open:border-[1.5px] data-popup-open:border-line-strong data-popup-open:bg-brand-soft data-popup-open:ps-[2.5px] data-popup-open:pe-[5.5px]",
|
|
50
|
-
"data-active:[--avatar-group-surface:var(--brand-soft)] data-popup-open:[--avatar-group-surface:var(--brand-soft)]",
|
|
51
50
|
"outline-none focus-visible:shadow-focus",
|
|
52
51
|
"after:absolute after:-inset-x-1 after:-inset-y-2.5"
|
|
53
52
|
]
|