@botiverse/raft-ui 0.53.0 → 0.54.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 +15 -0
- package/dist/components/inbox-item/inbox-item-leading-badge.d.mts +3 -2
- package/dist/components/inbox-item/inbox-item-leading-badge.mjs +3 -2
- package/dist/components/save-status/index.d.mts +2 -0
- package/dist/components/save-status/save-status.d.mts +23 -0
- package/dist/components/save-status/save-status.mjs +65 -0
- package/dist/wip.d.mts +3 -1
- package/dist/wip.mjs +2 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
## [0.54.0](https://github.com/botiverse/raft-design/compare/v0.53.0...v0.54.0) (2026-10-30)
|
|
2
|
+
|
|
3
|
+
### Added
|
|
4
|
+
|
|
5
|
+
- **SaveStatus** (wip, + `SaveStatusSaved`, `SaveStatusError`): the result line under a setting that applies at once. It always keeps one footnote line of height, so "Saved" appearing or going never resizes the card or moves a switch, and it sits 4px under a select, a segmented control or a settings row's description alike. ([#906](https://github.com/botiverse/raft-design/pull/906))
|
|
6
|
+
|
|
7
|
+
### Design System
|
|
8
|
+
|
|
9
|
+
- **A setting that applies at once shows its result on a reserved line 4px under the control** (stdrc, 2026-10-30). ([#906](https://github.com/botiverse/raft-design/pull/906))
|
|
10
|
+
- Docs: https://raft-design.botiverse.build/patterns/forms/
|
|
11
|
+
- **Activity thread and task rows lead with their own mark; the channel's icon goes in the corner badge** (cindyz, stdrc, 2026-10-30). `InboxItemLeadingBadge` holds any one icon. ([#905](https://github.com/botiverse/raft-design/pull/905))
|
|
12
|
+
- Docs: https://raft-design.botiverse.build/components/inbox-item/
|
|
13
|
+
- **Icon meanings:** one meaning per icon on a screen, one Lucide drawing per concept, More is ⋯ in a row of actions and ⋮ for one object's menu, Back is an arrow, success `circle-check` and error `triangle-alert`, Reopen is not restart, outline only. `CreateTaskIcon` is deprecated. ([#903](https://github.com/botiverse/raft-design/pull/903))
|
|
14
|
+
- Docs: https://raft-design.botiverse.build/foundations/iconography/
|
|
15
|
+
|
|
1
16
|
## [0.53.0](https://github.com/botiverse/raft-design/compare/v0.52.4...v0.53.0) (2026-10-30)
|
|
2
17
|
|
|
3
18
|
### Changed
|
|
@@ -3,8 +3,9 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
3
3
|
export type InboxItemLeadingBadgeProps = useRender.ComponentProps<"span">;
|
|
4
4
|
/**
|
|
5
5
|
* A small badge in the bottom-right corner of `InboxItemLeading`, the corner a
|
|
6
|
-
* presence light takes: on a thread
|
|
7
|
-
*
|
|
6
|
+
* presence light takes, holding one icon: on a thread or task row in a
|
|
7
|
+
* channel, the channel's own icon on the thread's or task's `IconTile`; in a
|
|
8
|
+
* direct message, the thread's or task's mark on the other side's `Avatar`. Put it inside
|
|
8
9
|
* `InboxItemLeading`, after the tile or avatar, with one icon as its child;
|
|
9
10
|
* leave the avatar's `AvatarBadge` out, since the corner holds one mark. It
|
|
10
11
|
* is hidden from assistive technology unless given a `role`.
|
|
@@ -4,8 +4,9 @@ import { useRender } from "@base-ui/react/use-render";
|
|
|
4
4
|
//#region src/components/inbox-item/inbox-item-leading-badge.tsx
|
|
5
5
|
/**
|
|
6
6
|
* A small badge in the bottom-right corner of `InboxItemLeading`, the corner a
|
|
7
|
-
* presence light takes: on a thread
|
|
8
|
-
*
|
|
7
|
+
* presence light takes, holding one icon: on a thread or task row in a
|
|
8
|
+
* channel, the channel's own icon on the thread's or task's `IconTile`; in a
|
|
9
|
+
* direct message, the thread's or task's mark on the other side's `Avatar`. Put it inside
|
|
9
10
|
* `InboxItemLeading`, after the tile or avatar, with one icon as its child;
|
|
10
11
|
* leave the avatar's `AvatarBadge` out, since the corner holds one mark. It
|
|
11
12
|
* is hidden from assistive technology unless given a `role`.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ComponentPropsWithRef } from "react";
|
|
2
|
+
//#region src/components/save-status/save-status.d.ts
|
|
3
|
+
export type SaveStatusProps = ComponentPropsWithRef<"span">;
|
|
4
|
+
/**
|
|
5
|
+
* The reserved line itself. Render it whatever the setting's state, and put
|
|
6
|
+
* `SaveStatusSaved` or `SaveStatusError` inside. A `span` (shown as a block),
|
|
7
|
+
* like every ListRow part, so it stays valid inside a row's body.
|
|
8
|
+
*/
|
|
9
|
+
export declare function SaveStatus({ className, ...props }: SaveStatusProps): import("react").JSX.Element;
|
|
10
|
+
export type SaveStatusSavedProps = ComponentPropsWithRef<"span">;
|
|
11
|
+
/**
|
|
12
|
+
* The polite live region that says the change is stored. Keep it mounted,
|
|
13
|
+
* empty, while nothing has happened, so a screen reader announces the words
|
|
14
|
+
* when they arrive; the check shows only with them.
|
|
15
|
+
*/
|
|
16
|
+
export declare function SaveStatusSaved({ className, children, ...props }: SaveStatusSavedProps): import("react").JSX.Element;
|
|
17
|
+
export type SaveStatusErrorProps = ComponentPropsWithRef<"span">;
|
|
18
|
+
/**
|
|
19
|
+
* What failed, in place of `SaveStatusSaved`. It is an alert, announced when
|
|
20
|
+
* it appears, and stays until the next change.
|
|
21
|
+
*/
|
|
22
|
+
export declare function SaveStatusError({ className, role, ...props }: SaveStatusErrorProps): import("react").JSX.Element;
|
|
23
|
+
//#endregion
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { tv } from "../../lib/tv.mjs";
|
|
2
|
+
import { Check } from "lucide-react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/save-status/save-status.tsx
|
|
5
|
+
const saveStatus = tv({ slots: {
|
|
6
|
+
root: [
|
|
7
|
+
"block min-h-lh min-w-0",
|
|
8
|
+
"mt-1 [[data-slot=field]>&]:-mt-0.5 [[data-slot=list-row-body]>&]:mt-0.5",
|
|
9
|
+
"text-footnote"
|
|
10
|
+
],
|
|
11
|
+
saved: [
|
|
12
|
+
"flex min-w-0 items-center gap-1",
|
|
13
|
+
"text-foreground-muted",
|
|
14
|
+
"[&>svg]:size-3.5 [&>svg]:shrink-0"
|
|
15
|
+
],
|
|
16
|
+
error: ["block wrap-anywhere", "text-danger-strong"]
|
|
17
|
+
} });
|
|
18
|
+
/**
|
|
19
|
+
* The reserved line itself. Render it whatever the setting's state, and put
|
|
20
|
+
* `SaveStatusSaved` or `SaveStatusError` inside. A `span` (shown as a block),
|
|
21
|
+
* like every ListRow part, so it stays valid inside a row's body.
|
|
22
|
+
*/
|
|
23
|
+
function SaveStatus({ className, ...props }) {
|
|
24
|
+
const { root } = saveStatus();
|
|
25
|
+
return /* @__PURE__ */ jsx("span", {
|
|
26
|
+
"data-slot": "save-status",
|
|
27
|
+
className: root({ className }),
|
|
28
|
+
...props
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* The polite live region that says the change is stored. Keep it mounted,
|
|
33
|
+
* empty, while nothing has happened, so a screen reader announces the words
|
|
34
|
+
* when they arrive; the check shows only with them.
|
|
35
|
+
*/
|
|
36
|
+
function SaveStatusSaved({ className, children, ...props }) {
|
|
37
|
+
const { saved } = saveStatus();
|
|
38
|
+
const hasContent = children !== null && children !== void 0 && children !== false && children !== "";
|
|
39
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
40
|
+
"data-slot": "save-status-saved",
|
|
41
|
+
role: "status",
|
|
42
|
+
"aria-live": "polite",
|
|
43
|
+
className: saved({ className }),
|
|
44
|
+
...props,
|
|
45
|
+
children: [hasContent ? /* @__PURE__ */ jsx(Check, {
|
|
46
|
+
"aria-hidden": "true",
|
|
47
|
+
"data-slot": "save-status-icon"
|
|
48
|
+
}) : null, children]
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* What failed, in place of `SaveStatusSaved`. It is an alert, announced when
|
|
53
|
+
* it appears, and stays until the next change.
|
|
54
|
+
*/
|
|
55
|
+
function SaveStatusError({ className, role = "alert", ...props }) {
|
|
56
|
+
const { error } = saveStatus();
|
|
57
|
+
return /* @__PURE__ */ jsx("span", {
|
|
58
|
+
"data-slot": "save-status-error",
|
|
59
|
+
role,
|
|
60
|
+
className: error({ className }),
|
|
61
|
+
...props
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
//#endregion
|
|
65
|
+
export { SaveStatus, SaveStatusError, SaveStatusSaved };
|
package/dist/wip.d.mts
CHANGED
|
@@ -58,4 +58,6 @@ import { PullToRefreshIndicator, PullToRefreshIndicatorProps } from "./component
|
|
|
58
58
|
import "./components/pull-to-refresh/index.mjs";
|
|
59
59
|
import { ChoiceList, ChoiceListGroup, ChoiceListItem, ChoiceListMultipleProps, ChoiceListProps, ChoiceListSingleProps } from "./components/choice-list/choice-list.mjs";
|
|
60
60
|
import "./components/choice-list/index.mjs";
|
|
61
|
-
|
|
61
|
+
import { SaveStatus, SaveStatusError, SaveStatusErrorProps, SaveStatusProps, SaveStatusSaved, SaveStatusSavedProps } from "./components/save-status/save-status.mjs";
|
|
62
|
+
import "./components/save-status/index.mjs";
|
|
63
|
+
export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, type AvatarGroupButtonProps, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, type DialogCommitProps, DialogFooterNote, type DialogFooterNoteProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, FilterChip, FilterChipLabel, type FilterChipLabelProps, type FilterChipProps, FilterChipRemove, type FilterChipRemoveProps, type HoldThenMoveOptions, HoldThenMoveTouchSensor, InboxItemLeadingBadge, type InboxItemLeadingBadgeProps, InboxItemSkeleton, InboxItemSkeletonList, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, LIFT_CLASS, ListRowSkeleton, type ListRowSkeletonProps, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, ModeBar, ModeBarAction, type ModeBarActionProps, ModeBarContent, type ModeBarContentProps, ModeBarDescription, type ModeBarDescriptionProps, type ModeBarProps, ModeBarTitle, type ModeBarTitleProps, MouseOnlyPointerSensor, ORIGIN_OPACITY, type OverlayLayerKind, OverlayLayerProvider, type OverlayLayerProviderProps, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, SaveStatus, SaveStatusError, type SaveStatusErrorProps, type SaveStatusProps, SaveStatusSaved, type SaveStatusSavedProps, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, type UseCommentMarginFitsOptions, type UseDragListsOptions, type UsePullToRefreshOptions, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
|
package/dist/wip.mjs
CHANGED
|
@@ -40,4 +40,5 @@ import { PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH
|
|
|
40
40
|
import { PULL_TO_REFRESH_POINTER_QUERY, usePullToRefresh } from "./components/pull-to-refresh/use-pull-to-refresh.mjs";
|
|
41
41
|
import { PullToRefreshIndicator } from "./components/pull-to-refresh/pull-to-refresh-indicator.mjs";
|
|
42
42
|
import { ChoiceList } from "./components/choice-list/choice-list.mjs";
|
|
43
|
-
|
|
43
|
+
import { SaveStatus, SaveStatusError, SaveStatusSaved } from "./components/save-status/save-status.mjs";
|
|
44
|
+
export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemSkeleton, InboxItemSkeletonList, LIFT_CLASS, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, SaveStatus, SaveStatusError, SaveStatusSaved, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
|