@botiverse/raft-ui 0.51.0 → 0.52.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [0.52.0](https://github.com/botiverse/raft-design/compare/v0.51.0...v0.52.0) (2026-10-29)
+
+### Added
+
+- **PanelSplitAction** (wip): an action and its menu drawn as one control (`PanelSplitActionMain`, `PanelSplitActionToggle`, `PanelSplitActionMenu`), e.g. Comment and its ▾. The menu part is narrow and gets a 44×44 target on touch. ([#885](https://github.com/botiverse/raft-design/pull/885))
+- **TextSelectionToolbar** (+ `TextSelectionToolbarButton`, `TextSelectionToolbarSeparator`, `createTextSelectionAnchor`): the generic name for the toolbar on selected text. The `MessageTextSelectionToolbar*` names stay as deprecated aliases. ([#885](https://github.com/botiverse/raft-design/pull/885))
+
+### Changed
+
+- **Tree-shakable build:** raft-ui ships one ESM module per source file and declares `sideEffects` (CSS, the entries, and the drag Escape guard, which now installs when raft-ui loads). Unused components drop out of consumers' bundles: a Button-only app went from 131.6 KB to 91.0 KB gzip. Entry points and exports are unchanged. ([#886](https://github.com/botiverse/raft-design/pull/886))
+
+### Design System
+
+- **Joined parts hover as one control:** the part under the pointer gets `fill-medium`, its joined neighbour `fill-subtle`. ([#885](https://github.com/botiverse/raft-design/pull/885))
+  - Docs: https://raft-design.botiverse.build/foundations/states/
+- **Descriptive links take sentence case:** Title Case is for labels that name an action; "From a message in #general" is a phrase. ([#887](https://github.com/botiverse/raft-design/pull/887))
+  - Docs: https://raft-design.botiverse.build/content/writing/
+- **Entry points on an edge take a band:** an always-present entry on a region's edge gets its own full-width band; the content never narrows around it and is never covered. ([#887](https://github.com/botiverse/raft-design/pull/887))
+  - Docs: https://raft-design.botiverse.build/foundations/elevation/
+
 ## [0.51.0](https://github.com/botiverse/raft-design/compare/v0.50.0...v0.51.0) (2026-10-29)
 
 ### Changed

package/dist/components/activity-inbox/activity-inbox-shell.d.mts

@@ -0,0 +1,12 @@
+import { Panel } from "../panel/panel.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/activity-inbox/activity-inbox-shell.d.ts
+export type ActivityInboxPanelProps = ComponentPropsWithRef<typeof Panel>;
+export declare function ActivityInboxPanel({ className, ...props }: ActivityInboxPanelProps): import("react").JSX.Element;
+export type ActivityInboxViewportProps = ComponentPropsWithRef<"div">;
+/** The list's scroller. It publishes its scrollbar's width for the item
+ *  cells (useScrollbarSize), so their fills sit 8px from both edges. */
+export declare function ActivityInboxViewport({ className, ref, ...props }: ActivityInboxViewportProps): import("react").JSX.Element;
+export type ActivityInboxLoadingMoreProps = ComponentPropsWithRef<"div">;
+export declare function ActivityInboxLoadingMore({ className, ...props }: ActivityInboxLoadingMoreProps): import("react").JSX.Element;
+//#endregion

package/dist/components/activity-inbox/activity-inbox-shell.mjs

@@ -0,0 +1,39 @@
+import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { Panel } from "../panel/panel.mjs";
+import { useScrollbarSize } from "../../lib/use-scrollbar-size.mjs";
+import { activityInboxShell } from "./activity-inbox-shell.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/activity-inbox/activity-inbox-shell.tsx
+function ActivityInboxPanel({ className, ...props }) {
+	const { panel } = activityInboxShell();
+	return /* @__PURE__ */ jsx(Panel, {
+		render: /* @__PURE__ */ jsx("div", {}),
+		edge: "inset",
+		"data-slot": "activity-inbox-root",
+		className: panel({ className }),
+		...props
+	});
+}
+/** The list's scroller. It publishes its scrollbar's width for the item
+*  cells (useScrollbarSize), so their fills sit 8px from both edges. */
+function ActivityInboxViewport({ className, ref, ...props }) {
+	const { viewport } = activityInboxShell();
+	const scrollbarRef = useScrollbarSize();
+	const [setRef] = useMergedRef(ref, scrollbarRef);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "activity-inbox-viewport",
+		className: viewport({ className }),
+		...props,
+		ref: setRef
+	});
+}
+function ActivityInboxLoadingMore({ className, ...props }) {
+	const { loadingMore } = activityInboxShell();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "activity-inbox-loading-more",
+		className: loadingMore({ className }),
+		...props
+	});
+}
+//#endregion
+export { ActivityInboxLoadingMore, ActivityInboxPanel, ActivityInboxViewport };

package/dist/components/activity-inbox/activity-inbox-shell.recipe.mjs

@@ -0,0 +1,14 @@
+import { listColumnMargin } from "../../lib/head-edges.mjs";
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/activity-inbox/activity-inbox-shell.recipe.ts
+const activityInboxShell = tv({ slots: {
+	panel: [
+		"flex h-full min-h-0 flex-1 flex-col overflow-hidden",
+		"bg-layer-canvas font-sans text-foreground",
+		listColumnMargin
+	],
+	viewport: ["relative flex flex-1 flex-col gap-0.5 overflow-y-auto scrollbar-list *:shrink-0", "bg-layer-canvas px-0 pt-2 pb-[calc(8px+env(safe-area-inset-bottom,0px))]"],
+	loadingMore: ["py-3 text-center", "text-caption text-foreground-hint"]
+} });
+//#endregion
+export { activityInboxShell };

package/dist/components/activity-inbox/activity-inbox-sidebar.d.mts

@@ -0,0 +1,6 @@
+import { SidebarRoot } from "../sidebar/sidebar.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/activity-inbox/activity-inbox-sidebar.d.ts
+export type ActivityInboxSidebarProps = ComponentPropsWithRef<typeof SidebarRoot>;
+export declare function ActivityInboxSidebar({ className, children, ...props }: ActivityInboxSidebarProps): import("react").JSX.Element;
+//#endregion

package/dist/components/activity-inbox/activity-inbox-sidebar.mjs

@@ -0,0 +1,22 @@
+import { SidebarBody, SidebarContent, SidebarRoot } from "../sidebar/sidebar.mjs";
+import { activityInboxSidebar } from "./activity-inbox-sidebar.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/activity-inbox/activity-inbox-sidebar.tsx
+function ActivityInboxSidebar({ className, children, ...props }) {
+	const { sidebar, sidebarBody, sidebarContent } = activityInboxSidebar();
+	return /* @__PURE__ */ jsx(SidebarRoot, {
+		render: /* @__PURE__ */ jsx("aside", {}),
+		"data-slot": "activity-inbox-sidebar",
+		className: sidebar({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx(SidebarBody, {
+			className: sidebarBody(),
+			children: /* @__PURE__ */ jsx(SidebarContent, {
+				className: sidebarContent(),
+				children
+			})
+		})
+	});
+}
+//#endregion
+export { ActivityInboxSidebar };

package/dist/components/activity-inbox/activity-inbox-sidebar.recipe.mjs

@@ -0,0 +1,22 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/activity-inbox/activity-inbox-sidebar.recipe.ts
+const activityInboxSidebar = tv({ slots: {
+	sidebar: [
+		"shrink-0",
+		"max-md:hidden",
+		"md:flex",
+		"w-56 border-r border-line-seam bg-layer-canvas"
+	],
+	sidebarBody: ["bg-layer-canvas"],
+	sidebarContent: [
+		"py-0",
+		"[&_[data-slot=sidebar-group-label]]:mt-3 [&_[data-slot=sidebar-group-label]]:mb-0",
+		"**:data-[slot=sidebar-group-label]:flex **:data-[slot=sidebar-group-label]:items-center [&_[data-slot=sidebar-group-label]]:gap-2",
+		"[&_[data-slot=sidebar-group-label]]:px-5 [&_[data-slot=sidebar-group-label]]:py-0",
+		"**:data-[slot=sidebar-group-label]:font-sans **:data-[slot=sidebar-group-label]:text-footnote [&_[data-slot=sidebar-group-label]]:font-bold",
+		"**:data-[slot=sidebar-group-label]:text-foreground-hint **:data-[slot=sidebar-group-label]:normal-case [&_[data-slot=sidebar-group-label]]:tracking-normal",
+		"**:data-activity-inbox-show-all:whitespace-nowrap"
+	]
+} });
+//#endregion
+export { activityInboxSidebar };

package/dist/components/activity-inbox/activity-inbox-toolbar.d.mts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/activity-inbox/activity-inbox-toolbar.d.ts
+export type ActivityInboxControlsProps = ComponentPropsWithRef<"div">;
+export declare function ActivityInboxControls({ className, ...props }: ActivityInboxControlsProps): import("react").JSX.Element;
+export type ActivityInboxSelectionToolbarProps = ComponentPropsWithRef<"div">;
+export declare function ActivityInboxSelectionToolbar({ className, ...props }: ActivityInboxSelectionToolbarProps): import("react").JSX.Element;
+export type ActivityInboxSelectionCountProps = ComponentPropsWithRef<"span">;
+export declare function ActivityInboxSelectionCount({ className, ...props }: ActivityInboxSelectionCountProps): import("react").JSX.Element;
+//#endregion

package/dist/components/activity-inbox/activity-inbox-toolbar.mjs

@@ -0,0 +1,29 @@
+import { activityInboxToolbar } from "./activity-inbox-toolbar.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/activity-inbox/activity-inbox-toolbar.tsx
+function ActivityInboxControls({ className, ...props }) {
+	const { controls } = activityInboxToolbar();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "activity-inbox-controls",
+		className: controls({ className }),
+		...props
+	});
+}
+function ActivityInboxSelectionToolbar({ className, ...props }) {
+	const { selectionToolbar } = activityInboxToolbar();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "activity-inbox-selection-toolbar",
+		className: selectionToolbar({ className }),
+		...props
+	});
+}
+function ActivityInboxSelectionCount({ className, ...props }) {
+	const { selectionCount } = activityInboxToolbar();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "activity-inbox-selection-count",
+		className: selectionCount({ className }),
+		...props
+	});
+}
+//#endregion
+export { ActivityInboxControls, ActivityInboxSelectionCount, ActivityInboxSelectionToolbar };

package/dist/components/activity-inbox/activity-inbox-toolbar.recipe.mjs

@@ -0,0 +1,14 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/activity-inbox/activity-inbox-toolbar.recipe.ts
+const activityInboxToolbar = tv({ slots: {
+	controls: ["flex shrink-0 flex-nowrap items-center gap-2", "bg-layer-canvas px-(--column-margin) py-3"],
+	selectionToolbar: [
+		"flex min-h-11 shrink-0 flex-wrap items-center gap-2 pt-1.5 pb-[5px]",
+		"border-b border-line-hairline bg-layer-canvas px-(--column-margin)",
+		"**:data-[activity-inbox-action=sort]:text-foreground-muted",
+		"**:data-[activity-inbox-action=sort]:hover:text-foreground"
+	],
+	selectionCount: ["mr-1", "text-footnote font-bold text-foreground"]
+} });
+//#endregion
+export { activityInboxToolbar };

package/dist/components/activity-inbox/index.d.mts

@@ -0,0 +1,4 @@
+import { ActivityInboxLoadingMore, ActivityInboxLoadingMoreProps, ActivityInboxPanel, ActivityInboxPanelProps, ActivityInboxViewport, ActivityInboxViewportProps } from "./activity-inbox-shell.mjs";
+import { ActivityInboxSidebar, ActivityInboxSidebarProps } from "./activity-inbox-sidebar.mjs";
+import { ActivityInboxControls, ActivityInboxControlsProps, ActivityInboxSelectionCount, ActivityInboxSelectionCountProps, ActivityInboxSelectionToolbar, ActivityInboxSelectionToolbarProps } from "./activity-inbox-toolbar.mjs";
+export { ActivityInboxControls, ActivityInboxControlsProps, ActivityInboxLoadingMore, ActivityInboxLoadingMoreProps, ActivityInboxPanel, ActivityInboxPanelProps, ActivityInboxSelectionCount, ActivityInboxSelectionCountProps, ActivityInboxSelectionToolbar, ActivityInboxSelectionToolbarProps, ActivityInboxSidebar, ActivityInboxSidebarProps, ActivityInboxViewport, ActivityInboxViewportProps };

package/dist/components/alert-dialog/alert-dialog.d.mts

@@ -0,0 +1,41 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ButtonProps } from "../button/button.mjs";
+import "../button/index.mjs";
+import { Dialog } from "@base-ui/react/dialog";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/alert-dialog/alert-dialog.d.ts
+export type AlertDialogProps = Dialog.Root.Props;
+export declare function AlertDialog({ children, ...props }: AlertDialogProps): import("react").JSX.Element;
+export type AlertDialogTriggerProps = Dialog.Trigger.Props;
+export declare function AlertDialogTrigger(props: AlertDialogTriggerProps): import("react").JSX.Element;
+export type AlertDialogPortalProps = Dialog.Portal.Props;
+export declare function AlertDialogPortal(props: AlertDialogPortalProps): import("react").JSX.Element;
+export type AlertDialogCloseProps = Omit<Dialog.Close.Props, "render"> & Pick<ButtonProps, "variant" | "size"> & {
+  className?: string;
+  children?: ReactNode;
+};
+export declare function AlertDialogClose({ className, variant, size, children, "aria-label": ariaLabel, ...props }: AlertDialogCloseProps): import("react").JSX.Element;
+export type AlertDialogOverlayProps = StyledProps<Dialog.Backdrop.Props>;
+export declare function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps): import("react").JSX.Element;
+export type AlertDialogContentProps = StyledProps<Dialog.Popup.Props> & {
+  portalProps?: AlertDialogPortalProps;
+  overlay?: false | AlertDialogOverlayProps;
+};
+export declare function AlertDialogContent({ className, children, portalProps, overlay, ...props }: AlertDialogContentProps): import("react").JSX.Element;
+export type AlertDialogHeaderProps = ComponentPropsWithRef<"div">;
+export declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): import("react").JSX.Element;
+export type AlertDialogBodyProps = ComponentPropsWithRef<"div">;
+export declare function AlertDialogBody({ className, ...props }: AlertDialogBodyProps): import("react").JSX.Element;
+export type AlertDialogFooterProps = ComponentPropsWithRef<"div">;
+export declare function AlertDialogFooter({ className, ref, ...props }: AlertDialogFooterProps): import("react").JSX.Element;
+export type AlertDialogTitleProps = StyledProps<Dialog.Title.Props>;
+export declare function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): import("react").JSX.Element;
+export type AlertDialogDescriptionProps = StyledProps<Dialog.Description.Props>;
+export declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): import("react").JSX.Element;
+export type AlertDialogActionProps = ButtonProps;
+export declare function AlertDialogAction(props: AlertDialogActionProps): import("react").JSX.Element;
+export type AlertDialogCancelProps = Omit<Dialog.Close.Props, "render"> & Pick<ButtonProps, "variant" | "size"> & {
+  className?: string;
+};
+export declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialogCancelProps): import("react").JSX.Element;
+//#endregion

package/dist/components/alert-dialog/alert-dialog.mjs

@@ -0,0 +1,163 @@
+import { cn } from "../../cn.mjs";
+import { decisionWidth } from "../../lib/decision-width.mjs";
+import { headEdgePull } from "../../lib/head-edges.mjs";
+import { stackedActions, useStackedActions } from "../../lib/stacked-actions.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { useParentOverlayKind, withOverlayLayer } from "../../lib/overlay-depth.mjs";
+import { Button } from "../button/button.mjs";
+import { DialogSheetReset } from "../dialog/dialog-sheet-context.mjs";
+import { Dialog } from "@base-ui/react/dialog";
+import { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/alert-dialog/alert-dialog.tsx
+const alertDialog = tv({
+	slots: {
+		overlay: ["fixed inset-0 z-50 bg-layer-backdrop"],
+		content: [
+			"fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] -translate-1/2 outline-none",
+			decisionWidth,
+			"overflow-clip rounded-dialog bg-layer-popover text-foreground",
+			"shadow-float ring-1 ring-line-seam"
+		],
+		header: [
+			"grid grid-cols-[minmax(0,1fr)_max-content] items-center min-w-0",
+			"gap-2 px-5 pt-5",
+			headEdgePull
+		],
+		body: [
+			"min-w-0",
+			"px-5 pt-1.5 pb-5 first:pt-5",
+			"font-sans text-subhead text-foreground-muted"
+		],
+		footer: [
+			"flex min-w-0 items-center justify-end",
+			...stackedActions,
+			"gap-2 px-5 pb-5 first:pt-5 [[data-slot=alert-dialog-header]+&]:pt-5"
+		],
+		title: ["m-0 min-w-0 text-foreground", "font-sans text-headline font-bold"],
+		description: ["m-0", "font-sans text-subhead text-foreground-muted"]
+	},
+	variants: { nested: {
+		false: {},
+		true: { overlay: ["bg-layer-backdrop-nested"] }
+	} }
+});
+function AlertDialog({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "alert-dialog",
+		...props,
+		children: withOverlayLayer("dialog", props.modal !== false, children)
+	});
+}
+function AlertDialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+function AlertDialogPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function AlertDialogClose({ className, variant, size, children, "aria-label": ariaLabel, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "alert-dialog-close",
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: variant ?? "ghost",
+			size: size ?? "icon-md",
+			"aria-label": ariaLabel ?? "Close",
+			className: cn("-my-1.5", className)
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4.5" })
+	});
+}
+function AlertDialogOverlay({ className, ...props }) {
+	const nested = useParentOverlayKind() != null;
+	const { overlay } = alertDialog({ nested });
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		"data-nested": nested ? "" : void 0,
+		forceRender: true,
+		className: overlay({ className }),
+		...props
+	});
+}
+function AlertDialogContent({ className, children, portalProps, overlay, ...props }) {
+	const { content } = alertDialog();
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, {
+		...portalProps,
+		children: [overlay === false ? null : /* @__PURE__ */ jsx(AlertDialogOverlay, { ...overlay }), /* @__PURE__ */ jsx(Dialog.Popup, {
+			"data-slot": "alert-dialog-content",
+			className: content({ className }),
+			...props,
+			role: "alertdialog",
+			children: /* @__PURE__ */ jsx(DialogSheetReset, { children })
+		})]
+	});
+}
+function AlertDialogHeader({ className, ...props }) {
+	const { header } = alertDialog();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: header({ className }),
+		...props
+	});
+}
+function AlertDialogBody({ className, ...props }) {
+	const { body } = alertDialog();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-body",
+		className: body({ className }),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ref, ...props }) {
+	const { footer } = alertDialog();
+	const [stacked, rowRef] = useStackedActions(ref);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		ref: rowRef,
+		className: footer({ className }),
+		...stacked ? { "data-stacked": "" } : {},
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	const { title } = alertDialog();
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: title({ className }),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	const { description } = alertDialog();
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: description({ className }),
+		...props
+	});
+}
+function AlertDialogAction(props) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "alert-dialog-action",
+		...props
+	});
+}
+function AlertDialogCancel({ className, variant, size, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "alert-dialog-cancel",
+		render: /* @__PURE__ */ jsx(Button, {
+			className,
+			variant: variant ?? "ghost",
+			size: size ?? "md"
+		}),
+		...props
+	});
+}
+//#endregion
+export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/alert-dialog/index.d.mts

@@ -0,0 +1,2 @@
+import { AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogBody, AlertDialogBodyProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogClose, AlertDialogCloseProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogOverlay, AlertDialogOverlayProps, AlertDialogPortal, AlertDialogPortalProps, AlertDialogProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps } from "./alert-dialog.mjs";
+export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogBody, type AlertDialogBodyProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogClose, type AlertDialogCloseProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, type AlertDialogPortalProps, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps };

package/dist/components/announcement-dialog/announcement-dialog.d.mts

@@ -0,0 +1,18 @@
+import { ButtonProps } from "../button/button.mjs";
+import "../button/index.mjs";
+import { Dialog, DialogClose, DialogContentProps, DialogTitleProps, DialogTrigger } from "../dialog/dialog.mjs";
+import "../dialog/index.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/announcement-dialog/announcement-dialog.d.ts
+export declare function AnnouncementDialogContent({ className, initialFocus, ref, ...props }: DialogContentProps): import("react").JSX.Element;
+export declare function AnnouncementDialogBody({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogLabel({ className, children, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
+export declare function AnnouncementDialogPicture({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogText({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogFooter({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+export declare function AnnouncementDialogAction({ className, ...props }: Omit<ButtonProps, "variant">): import("react").JSX.Element;
+export declare function AnnouncementDialogSecondaryAction({ className, ...props }: Omit<ButtonProps, "variant">): import("react").JSX.Element;
+//#endregion
+export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger };

package/dist/components/announcement-dialog/announcement-dialog.mjs

@@ -0,0 +1,121 @@
+import { tv } from "../../lib/tv.mjs";
+import { Button } from "../button/button.mjs";
+import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from "../dialog/dialog.mjs";
+import { useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/announcement-dialog/announcement-dialog.tsx
+const announcement = tv({ slots: {
+	content: ["@container/announcement max-w-xl gap-0 overflow-clip p-0"],
+	body: [
+		"min-h-0 max-h-[70dvh] overflow-y-auto pb-5",
+		"[&_[data-slot=announcement-picture]+[data-slot=announcement-text]]:mt-5",
+		"px-5 pt-5"
+	],
+	header: ["flex min-w-0 items-center justify-between gap-3"],
+	label: ["flex min-w-0 items-center gap-2 wrap-break-word", "text-caption text-foreground-muted"],
+	dot: ["shrink-0", "size-2.5 rounded-[2px] border-[1.5px] border-sticker-ink bg-attention-400"],
+	title: ["mt-3 wrap-break-word normal-case", "text-headline font-bold tracking-normal"],
+	picture: ["mt-5 h-44 w-full overflow-hidden border border-line-hairline [&_img]:size-full  [&_img]:object-contain", "rounded-container bg-fill-muted"],
+	text: [
+		"mt-3 min-w-0 wrap-break-word [&_p+p]:mt-3",
+		"[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5 [&_h1]:text-xl [&_h2]:text-lg [&_h3]:text-base [&_h1]:font-bold [&_h2]:font-bold [&_h3]:font-bold [&_pre]:max-w-full [&_pre]:overflow-x-auto",
+		"text-subhead text-foreground-muted"
+	],
+	footer: ["flex shrink-0 flex-wrap items-center justify-between gap-3 border-line-hairline py-4 @max-[28rem]/announcement:flex-col", "border-t-0 px-5 pt-0 pb-5"],
+	action: ["ml-auto h-auto min-h-8 min-w-0 max-w-full py-1 whitespace-normal text-center font-bold @max-[28rem]/announcement:ml-0 @max-[28rem]/announcement:w-full"],
+	secondary: ["min-w-0 max-w-full whitespace-normal @max-[28rem]/announcement:w-full"]
+} });
+function AnnouncementDialogContent({ className, initialFocus, ref, ...props }) {
+	const localRef = useRef(null);
+	const setRef = useCallback((node) => {
+		localRef.current = node;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [ref]);
+	const focusAction = useCallback(() => localRef.current?.querySelector("[data-announcement-action]:not(:disabled)") ?? true, []);
+	const { content } = announcement();
+	return /* @__PURE__ */ jsx(DialogContent, {
+		ref: setRef,
+		initialFocus: initialFocus ?? focusAction,
+		className: content({ className }),
+		...props
+	});
+}
+function AnnouncementDialogBody({ className, ...props }) {
+	const { body } = announcement();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "announcement-body",
+		className: body({ className }),
+		...props
+	});
+}
+function AnnouncementDialogHeader({ className, ...props }) {
+	const { header } = announcement();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "announcement-header",
+		className: header({ className }),
+		...props
+	});
+}
+function AnnouncementDialogLabel({ className, children, ...props }) {
+	const { label, dot } = announcement();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "announcement-label",
+		className: label({ className }),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: dot()
+		}), children]
+	});
+}
+function AnnouncementDialogTitle({ className, ...props }) {
+	const { title } = announcement();
+	return /* @__PURE__ */ jsx(DialogTitle, {
+		className: title({ className }),
+		...props
+	});
+}
+function AnnouncementDialogPicture({ className, ...props }) {
+	const { picture } = announcement();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "announcement-picture",
+		className: picture({ className }),
+		...props
+	});
+}
+function AnnouncementDialogText({ className, ...props }) {
+	const { text } = announcement();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "announcement-text",
+		className: text({ className }),
+		...props
+	});
+}
+function AnnouncementDialogFooter({ className, ...props }) {
+	const { footer } = announcement();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "announcement-footer",
+		className: footer({ className }),
+		...props
+	});
+}
+function AnnouncementDialogAction({ className, ...props }) {
+	const { action } = announcement();
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "accent",
+		"data-announcement-action": true,
+		className: action({ className }),
+		...props
+	});
+}
+function AnnouncementDialogSecondaryAction({ className, ...props }) {
+	const { secondary } = announcement();
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		className: secondary({ className }),
+		...props
+	});
+}
+//#endregion
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger };

package/dist/components/announcement-dialog/index.d.mts

@@ -0,0 +1,3 @@
+import { Dialog, DialogClose, DialogTrigger } from "../dialog/dialog.mjs";
+import { AnnouncementDialogAction, AnnouncementDialogBody, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle } from "./announcement-dialog.mjs";
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger };

package/dist/components/app-rail/app-rail.d.mts

@@ -0,0 +1,31 @@
+import { StatusProps } from "../status/status.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/app-rail/app-rail.d.ts
+export type AppRailRootProps = useRender.ComponentProps<"div">;
+export declare function AppRailRoot({ className, render, ...props }: AppRailRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AppRailHeaderProps = useRender.ComponentProps<"div">;
+export declare function AppRailHeader({ className, render, ...props }: AppRailHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AppRailNavProps = useRender.ComponentProps<"nav">;
+export declare function AppRailNav({ className, render, ...props }: AppRailNavProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AppRailItemProps = useRender.ComponentProps<"button"> & {
+  nativeButton?: boolean;
+  selected?: boolean;
+};
+export declare function AppRailItem({ nativeButton, selected, disabled, className, render, ...props }: AppRailItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AppRailItemIconProps = useRender.ComponentProps<"span">;
+export declare function AppRailItemIcon({ className, render, ...props }: AppRailItemIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** The pink pixel on a rail item: something there waits for you. */
+export type AppRailItemAttentionProps = {
+  /** Read to assistive tech; the pixel itself is decorative. */
+  title?: string;
+};
+export declare function AppRailItemAttention({ title }: AppRailItemAttentionProps): import("react").JSX.Element;
+export type AppRailItemLabelProps = useRender.ComponentProps<"span">;
+export declare function AppRailItemLabel({ className, render, ...props }: AppRailItemLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AppRailItemBadgeProps = useRender.ComponentProps<"span">;
+export declare function AppRailItemBadge({ className, render, ...props }: AppRailItemBadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type AppRailItemIndicatorProps = StatusProps;
+export declare function AppRailItemIndicator({ className, size, variant, ...props }: AppRailItemIndicatorProps): import("react").JSX.Element;
+export type AppRailFooterProps = useRender.ComponentProps<"div">;
+export declare function AppRailFooter({ className, render, ...props }: AppRailFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion