@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/message.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentProps, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+export declare const messageAlignNames: readonly ["start", "end"];
+export declare const messageBubbleVariantNames: readonly ["default", "secondary", "muted", "tinted", "outline", "ghost", "destructive"];
+export declare const messageReactionsSideNames: readonly ["top", "bottom"];
+export type MessageAlign = (typeof messageAlignNames)[number];
+export type MessageBubbleVariant = (typeof messageBubbleVariantNames)[number];
+export type MessageReactionsSide = (typeof messageReactionsSideNames)[number];
+export type MessageGroupProps = ComponentProps<"div">;
+/** Stacks messages 8px apart. */
+export declare function MessageGroup({ className, ...props }: MessageGroupProps): import("react").JSX.Element;
+export interface MessageProps extends ComponentProps<"div"> {
+    /** `"end"` puts the message on the trailing side, for your own messages. */
+    align?: MessageAlign;
+}
+/** One chat message: an optional avatar beside its content. */
+export declare function Message({ align, className, ...props }: MessageProps): import("react").JSX.Element;
+export type MessageAvatarProps = ComponentProps<"div">;
+/** Holds an avatar at the bottom of the message, beside the last bubble. */
+export declare function MessageAvatar({ className, ...props }: MessageAvatarProps): import("react").JSX.Element;
+export type MessageContentProps = ComponentProps<"div">;
+/** The column of header, bubbles, cards, and footer. Slotted children follow `align`. */
+export declare function MessageContent({ className, ...props }: MessageContentProps): import("react").JSX.Element;
+export type MessageHeaderProps = ComponentProps<"div">;
+/** A small muted line above the content, such as a name and time. */
+export declare function MessageHeader({ className, ...props }: MessageHeaderProps): import("react").JSX.Element;
+export type MessageFooterProps = ComponentProps<"div">;
+/** A small muted line below the content, such as delivery or reply status. */
+export declare function MessageFooter({ className, ...props }: MessageFooterProps): import("react").JSX.Element;
+export interface MessageBubbleState extends Record<string, unknown> {
+    slot: "message-bubble";
+    variant: MessageBubbleVariant;
+}
+export type MessageBubbleProps = useRender.ComponentProps<"div", MessageBubbleState> & {
+    /** Fill. `"ghost"` drops the fill and padding and may span the full width. */
+    variant?: MessageBubbleVariant | undefined;
+    /** A `MessageReactions` pill pinned over the bubble's edge. */
+    reactions?: ReactNode;
+};
+/** A filled chat bubble. Use `render` for a `button` or `a` to make the whole bubble act. */
+export declare function MessageBubble({ variant, reactions, className, render, ref, ...props }: MessageBubbleProps): import("react").JSX.Element;
+export interface MessageReactionsProps extends ComponentProps<"div"> {
+    /** Edge of the bubble the pill overlaps. */
+    side?: MessageReactionsSide | undefined;
+    /** Corner of that edge, 12px in from the bubble's side. */
+    align?: MessageAlign | undefined;
+}
+/** A small pill of reactions for the `reactions` prop of `MessageBubble`. */
+export declare function MessageReactions({ side, align, className, ...props }: MessageReactionsProps): import("react").JSX.Element;

package/dist/components/message.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../internal/classes.js";
+export const messageAlignNames = ["start", "end"];
+export const messageBubbleVariantNames = [
+    "default",
+    "secondary",
+    "muted",
+    "tinted",
+    "outline",
+    "ghost",
+    "destructive",
+];
+export const messageReactionsSideNames = ["top", "bottom"];
+/** Stacks messages 8px apart. */
+export function MessageGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-group", className: cn("sprout-message-group", className), ...props }));
+}
+/** One chat message: an optional avatar beside its content. */
+export function Message({ align = "start", className, ...props }) {
+    return (_jsx("div", { "data-slot": "message", "data-align": align, className: cn("sprout-message", className), ...props }));
+}
+/** Holds an avatar at the bottom of the message, beside the last bubble. */
+export function MessageAvatar({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-avatar", className: cn("sprout-message-avatar", className), ...props }));
+}
+/** The column of header, bubbles, cards, and footer. Slotted children follow `align`. */
+export function MessageContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-content", className: cn("sprout-message-content", className), ...props }));
+}
+/** A small muted line above the content, such as a name and time. */
+export function MessageHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-header", className: cn("sprout-message-header", className), ...props }));
+}
+/** A small muted line below the content, such as delivery or reply status. */
+export function MessageFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-footer", className: cn("sprout-message-footer", className), ...props }));
+}
+/** A filled chat bubble. Use `render` for a `button` or `a` to make the whole bubble act. */
+export function MessageBubble({ variant = "default", reactions, className, render, ref, ...props }) {
+    const bubble = useRender({
+        defaultTagName: "div",
+        ref,
+        render,
+        props: mergeProps({
+            className: cn("sprout-message-bubble", `sprout-message-bubble-${variant}`, className),
+        }, props),
+        state: { slot: "message-bubble", variant },
+    });
+    if (reactions == null || reactions === false)
+        return bubble;
+    // Reactions often hold buttons, which can't sit inside a bubble rendered as a button or link.
+    return (_jsxs("div", { "data-slot": "message-bubble-frame", "data-variant": variant, className: "sprout-message-bubble-frame", children: [bubble, reactions] }));
+}
+/** A small pill of reactions for the `reactions` prop of `MessageBubble`. */
+export function MessageReactions({ side = "bottom", align = "end", className, ...props }) {
+    return (_jsx("div", { "data-slot": "message-reactions", "data-align": align, "data-side": side, className: cn("sprout-message-reactions", className), ...props }));
+}

package/dist/components/navigation-menu.d.ts

@@ -0,0 +1,45 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+type Align = NonNullable<NavigationMenuPrimitive.Positioner.Props["align"]>;
+export interface NavigationMenuProps extends NavigationMenuPrimitive.Root.Props {
+    /** Where the shared panel lines up with the open trigger. Defaults to `"start"`. */
+    align?: Align;
+}
+/**
+ * A row of site links where some items open a panel of more links. It
+ * renders the shared panel itself, so put `NavigationMenuList` directly inside.
+ */
+export declare function NavigationMenu({ align, className, children, ...props }: NavigationMenuProps): import("react").JSX.Element;
+export type NavigationMenuListProps = NavigationMenuPrimitive.List.Props;
+export declare function NavigationMenuList({ className, ...props }: NavigationMenuListProps): import("react").JSX.Element;
+export type NavigationMenuItemProps = NavigationMenuPrimitive.Item.Props;
+export declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): import("react").JSX.Element;
+/**
+ * Returns the trigger class string. Add it to a top-level `NavigationMenuLink`
+ * (or any link) so it matches the triggers beside it.
+ */
+export declare function navigationMenuTriggerStyle(className?: string): string;
+export type NavigationMenuTriggerProps = NavigationMenuPrimitive.Trigger.Props;
+/** Opens its item's `NavigationMenuContent`. A chevron turns while open. */
+export declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps): import("react").JSX.Element;
+export type NavigationMenuContentProps = NavigationMenuPrimitive.Content.Props;
+/** The panel for one item. It is moved into the shared popup while open. */
+export declare function NavigationMenuContent({ className, ...props }: NavigationMenuContentProps): import("react").JSX.Element;
+export type NavigationMenuPositionerProps = NavigationMenuPrimitive.Positioner.Props;
+/**
+ * The portal, positioner, popup, and viewport that show the open panel.
+ * `NavigationMenu` already renders one; use this only to build a root by hand.
+ */
+export declare function NavigationMenuPositioner({ className, side, sideOffset, align, alignOffset, collisionPadding, ...props }: NavigationMenuPositionerProps): import("react").JSX.Element;
+export type NavigationMenuLinkProps = NavigationMenuPrimitive.Link.Props;
+/**
+ * A link in the list or inside a panel. Pass `active` for the current page
+ * (sets `aria-current="page"`) and your router link through `render`.
+ */
+export declare function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps): import("react").JSX.Element;
+export type NavigationMenuIndicatorProps = NavigationMenuPrimitive.Icon.Props;
+/**
+ * A small pointer under an item's trigger that shows while its panel is open.
+ * Place it inside `NavigationMenuItem`, after the trigger.
+ */
+export declare function NavigationMenuIndicator({ className, children, ...props }: NavigationMenuIndicatorProps): import("react").JSX.Element;
+export {};

package/dist/components/navigation-menu.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { cn, stateClassName } from "../internal/classes.js";
+/**
+ * A row of site links where some items open a panel of more links. It
+ * renders the shared panel itself, so put `NavigationMenuList` directly inside.
+ */
+export function NavigationMenu({ align = "start", className, children, ...props }) {
+    return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", ...props, className: stateClassName("sprout-navigation-menu", className), children: [children, _jsx(NavigationMenuPositioner, { align: align })] }));
+}
+export function NavigationMenuList({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.List, { "data-slot": "navigation-menu-list", ...props, className: stateClassName("sprout-navigation-menu-list", className) }));
+}
+export function NavigationMenuItem({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", ...props, className: stateClassName("sprout-navigation-menu-item", className) }));
+}
+/**
+ * Returns the trigger class string. Add it to a top-level `NavigationMenuLink`
+ * (or any link) so it matches the triggers beside it.
+ */
+export function navigationMenuTriggerStyle(className) {
+    return cn("sprout-navigation-menu-trigger", className);
+}
+/** Opens its item's `NavigationMenuContent`. A chevron turns while open. */
+export function NavigationMenuTrigger({ className, children, ...props }) {
+    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", ...props, className: stateClassName("sprout-navigation-menu-trigger", className), children: [children, _jsx(NavigationMenuPrimitive.Icon, { "data-slot": "navigation-menu-chevron", className: "sprout-navigation-menu-chevron", children: _jsx(ChevronDown, {}) })] }));
+}
+/** The panel for one item. It is moved into the shared popup while open. */
+export function NavigationMenuContent({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", ...props, className: stateClassName("sprout-navigation-menu-content", className) }));
+}
+/**
+ * The portal, positioner, popup, and viewport that show the open panel.
+ * `NavigationMenu` already renders one; use this only to build a root by hand.
+ */
+export function NavigationMenuPositioner({ className, side = "bottom", sideOffset = 8, align = "start", alignOffset = 0, collisionPadding = 8, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Portal, { "data-slot": "navigation-menu-portal", children: _jsx(NavigationMenuPrimitive.Positioner, { "data-slot": "navigation-menu-positioner", side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, collisionPadding: collisionPadding, ...props, className: stateClassName("sprout-navigation-menu-positioner", className), children: _jsx(NavigationMenuPrimitive.Popup, { "data-slot": "navigation-menu-popup", className: "sprout-navigation-menu-popup", children: _jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: "sprout-navigation-menu-viewport" }) }) }) }));
+}
+/**
+ * A link in the list or inside a panel. Pass `active` for the current page
+ * (sets `aria-current="page"`) and your router link through `render`.
+ */
+export function NavigationMenuLink({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", ...props, className: stateClassName("sprout-navigation-menu-link", className) }));
+}
+/**
+ * A small pointer under an item's trigger that shows while its panel is open.
+ * Place it inside `NavigationMenuItem`, after the trigger.
+ */
+export function NavigationMenuIndicator({ className, children, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Icon, { "data-slot": "navigation-menu-indicator", ...props, className: stateClassName("sprout-navigation-menu-indicator", className), children: children ?? _jsx("span", { className: "sprout-navigation-menu-indicator-arrow" }) }));
+}

package/dist/components/notice-banner.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps, ReactNode } from "react";
+export interface NoticeBannerProps extends Omit<ComponentProps<"section">, "children"> {
+    /** The message. Put `role="status"` or `role="alert"` on it when it changes. */
+    children: ReactNode;
+    /** Controls for the notice, such as buttons or a select. They wrap. */
+    actions?: ReactNode;
+}
+/**
+ * A full-width strip at the top of a page for something that needs action,
+ * such as an integration that needs authorization. The message and actions
+ * stack on narrow screens and sit on one row from 640px. Name the region
+ * with `aria-label`.
+ */
+export declare function NoticeBanner({ children, actions, className, ...props }: NoticeBannerProps): import("react").JSX.Element;

package/dist/components/notice-banner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../internal/classes.js";
+/**
+ * A full-width strip at the top of a page for something that needs action,
+ * such as an integration that needs authorization. The message and actions
+ * stack on narrow screens and sit on one row from 640px. Name the region
+ * with `aria-label`.
+ */
+export function NoticeBanner({ children, actions, className, ...props }) {
+    return (_jsxs("section", { "data-slot": "notice-banner", className: cn("sprout-notice-banner", className), ...props, children: [_jsx("div", { "data-slot": "notice-banner-content", className: "sprout-notice-banner-content", children: children }), actions != null && actions !== false && (_jsx("div", { "data-slot": "notice-banner-actions", className: "sprout-notice-banner-actions", children: actions }))] }));
+}

package/dist/components/page-content.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+export type PageContentProps = ComponentProps<"div">;
+/**
+ * The padded column that holds a page's header and sections. Direct children
+ * are stacked 16px apart. Put it inside your own scroll region.
+ */
+export declare function PageContent({ className, ...props }: PageContentProps): import("react").JSX.Element;

package/dist/components/page-content.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../internal/classes.js";
+/**
+ * The padded column that holds a page's header and sections. Direct children
+ * are stacked 16px apart. Put it inside your own scroll region.
+ */
+export function PageContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "page-content", className: cn("sprout-page-content", className), ...props }));
+}

package/dist/components/page-header.d.ts

@@ -0,0 +1,37 @@
+import { type ReactElement, type ReactNode, type Ref } from "react";
+export interface PageChrome {
+    /** App header element that receives the back link and page title. */
+    title: HTMLElement | null;
+    /** App header element that receives page actions. */
+    actions: HTMLElement | null;
+    /** Formats `document.title` from a string page title. Omit to leave it alone. */
+    documentTitle?: ((title: string) => string) | undefined;
+}
+export declare const PageChromeContext: import("react").Context<PageChrome>;
+export interface PageLink {
+    /** Visible text, and the accessible name when the back label is hidden. */
+    label: string;
+    /** Link element to render, such as `<a href />` or a router link. */
+    link: ReactElement;
+}
+export interface PageHeaderProps {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    /** Back link above the title. Below 640px only its chevron shows. */
+    back?: PageLink | undefined;
+    /** Shows the title as the last step of a breadcrumb under this parent page. */
+    parent?: PageLink | undefined;
+    titleId?: string | undefined;
+    titleRef?: Ref<HTMLHeadingElement> | undefined;
+    /** Lets code move focus to the title, for example after navigation. */
+    focusable?: boolean | undefined;
+    className?: string | undefined;
+}
+export declare function PageHeader({ title, description, actions, back, parent, titleId, titleRef, focusable, className, }: PageHeaderProps): import("react").JSX.Element;
+export interface PageActionsProps {
+    children: ReactNode;
+    className?: string | undefined;
+}
+/** Page-level actions without a header: moved into the app header when one is provided. */
+export declare function PageActions({ children, className }: PageActionsProps): import("react").JSX.Element;

package/dist/components/page-header.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, } from "react";
+import { createPortal } from "react-dom";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronLeft } from "reicon-react/icons/ChevronLeft";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+export const PageChromeContext = createContext({
+    title: null,
+    actions: null,
+});
+function ParentLink({ link, label }) {
+    return useRender({
+        defaultTagName: "a",
+        render: link,
+        props: {
+            "data-slot": "page-breadcrumb-link",
+            className: "sprout-page-header-breadcrumb-link",
+            children: label,
+        },
+    });
+}
+export function PageHeader({ title, description, actions, back, parent, titleId, titleRef, focusable, className, }) {
+    const chrome = useContext(PageChromeContext);
+    const format = chrome.documentTitle;
+    const text = typeof title === "string" ? title : null;
+    useEffect(() => {
+        if (!text || !format)
+            return;
+        const previous = document.title;
+        document.title = format(text);
+        return () => {
+            document.title = previous;
+        };
+    }, [text, format]);
+    const inChrome = !!(chrome.title && chrome.actions);
+    const placement = inChrome ? "chrome" : "page";
+    const heading = (_jsx("h1", { id: titleId, ref: titleRef, tabIndex: focusable ? -1 : undefined, "data-slot": "page-title", "data-placement": placement, className: "sprout-page-header-title", children: title }));
+    const trail = parent && (_jsx("nav", { "aria-label": "Breadcrumb", "data-slot": "page-breadcrumb", "data-placement": placement, className: "sprout-page-header-breadcrumb", children: _jsxs("ol", { className: "sprout-page-header-breadcrumb-list", children: [_jsx("li", { className: "sprout-page-header-breadcrumb-item", children: _jsx(ParentLink, { ...parent }) }), _jsx("li", { role: "presentation", "aria-hidden": "true", className: "sprout-page-header-breadcrumb-separator", children: _jsx(ChevronRight, { size: 14 }) }), _jsx("li", { "aria-current": "page", className: "sprout-page-header-breadcrumb-item sprout-page-header-breadcrumb-current", children: heading })] }) }));
+    const backButton = back && (_jsxs(Button, { variant: "ghost", size: "back", nativeButton: false, render: back.link, "data-slot": "page-back", className: "sprout-page-header-back", children: [_jsx(ChevronLeft, { "data-icon": "inline-start", "aria-hidden": "true" }), _jsx("span", { className: "sprout-page-header-back-label", children: back.label })] }));
+    if (inChrome) {
+        return (_jsxs(_Fragment, { children: [createPortal(_jsxs(_Fragment, { children: [backButton, trail ?? heading] }), chrome.title), actions &&
+                    createPortal(_jsx("div", { "data-slot": "page-actions", "data-placement": "chrome", className: "sprout-page-header-actions", children: actions }), chrome.actions), description && (_jsx("p", { "data-slot": "page-description", className: cn("sprout-page-header-description", className), children: description }))] }));
+    }
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("sprout-page-header", className), children: [backButton, _jsxs("div", { className: "sprout-page-header-row", children: [_jsxs("div", { className: "sprout-page-header-text", children: [trail ?? heading, description && (_jsx("p", { "data-slot": "page-description", className: "sprout-page-header-description", children: description }))] }), actions && (_jsx("div", { "data-slot": "page-actions", "data-placement": "page", className: "sprout-page-header-actions", children: actions }))] })] }));
+}
+/** Page-level actions without a header: moved into the app header when one is provided. */
+export function PageActions({ children, className }) {
+    const { actions } = useContext(PageChromeContext);
+    return actions ? (createPortal(_jsx("div", { "data-slot": "page-actions", "data-placement": "chrome", className: cn("sprout-page-header-actions", className), children: children }), actions)) : (_jsx("div", { "data-slot": "page-actions", "data-placement": "inline", className: cn("sprout-page-header-actions", className), children: children }));
+}

package/dist/components/pagination.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps } from "react";
+import { type ButtonProps, type ButtonSize } from "./button.js";
+export type PaginationProps = ComponentProps<"nav">;
+export declare function Pagination({ className, "aria-label": label, ...props }: PaginationProps): import("react").JSX.Element;
+export type PaginationContentProps = ComponentProps<"ul">;
+export declare function PaginationContent({ className, ...props }: PaginationContentProps): import("react").JSX.Element;
+export type PaginationItemProps = ComponentProps<"li">;
+export declare function PaginationItem({ className, ...props }: PaginationItemProps): import("react").JSX.Element;
+export interface PaginationLinkProps extends Omit<ComponentProps<"a">, "className"> {
+    className?: string;
+    /** Marks the current page: outline style and `aria-current="page"`. */
+    isActive?: boolean;
+    /** Any Sprout `Button` size. Page numbers default to `icon`. */
+    size?: ButtonSize;
+    /** Sets `aria-disabled`, removes the link from the tab order, and blocks clicks. */
+    disabled?: boolean;
+    /** Swap the `a` for a router link, as with Base UI `render`. */
+    render?: ButtonProps["render"];
+}
+export declare function PaginationLink({ className, isActive, size, render, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export interface PaginationDirectionProps extends PaginationLinkProps {
+    /** Visible label. It is hidden below 640px, where only the chevron shows. */
+    text?: string;
+}
+export declare function PaginationPrevious({ className, text, ...props }: PaginationDirectionProps): import("react").JSX.Element;
+export declare function PaginationNext({ className, text, ...props }: PaginationDirectionProps): import("react").JSX.Element;
+export type PaginationEllipsisProps = ComponentProps<"span">;
+/** Marks skipped pages. It is hidden from screen readers. */
+export declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react").JSX.Element;

package/dist/components/pagination.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft } from "reicon-react/icons/ChevronLeft";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { MoreH } from "reicon-react/icons/MoreH";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+export function Pagination({ className, "aria-label": label = "pagination", ...props }) {
+    return (_jsx("nav", { role: "navigation", "aria-label": label, "data-slot": "pagination", className: cn("sprout-pagination", className), ...props }));
+}
+export function PaginationContent({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "pagination-content", className: cn("sprout-pagination-content", className), ...props }));
+}
+export function PaginationItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "pagination-item", className: cn("sprout-pagination-item", className), ...props }));
+}
+export function PaginationLink({ className, isActive, size = "icon", render, ...props }) {
+    return (_jsx(Button, { variant: isActive ? "outline" : "ghost", size: size, nativeButton: false, render: render, ...props, "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive ? "true" : undefined, className: cn("sprout-pagination-link", className) }));
+}
+export function PaginationPrevious({ className, text = "Previous", ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("sprout-pagination-previous", className), ...props, children: [_jsx(ChevronLeft, { "data-icon": "inline-start", "aria-hidden": "true" }), _jsx("span", { className: "sprout-pagination-label", children: text })] }));
+}
+export function PaginationNext({ className, text = "Next", ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("sprout-pagination-next", className), ...props, children: [_jsx("span", { className: "sprout-pagination-label", children: text }), _jsx(ChevronRight, { "data-icon": "inline-end", "aria-hidden": "true" })] }));
+}
+/** Marks skipped pages. It is hidden from screen readers. */
+export function PaginationEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "aria-hidden": "true", "data-slot": "pagination-ellipsis", className: cn("sprout-pagination-ellipsis", className), ...props, children: [_jsx(MoreH, {}), _jsx("span", { className: "sprout-pagination-sr-only", children: "More pages" })] }));
+}

package/dist/components/plan-outline.d.ts

@@ -0,0 +1,60 @@
+import { type ComponentProps, type ReactNode } from "react";
+export declare const planOutlineMarkNames: readonly ["pending", "running", "attention", "blocked", "done", "failed", "cancelled"];
+/** How a task row is marked. Every mark is paired with a text label; color is never the only signal. */
+export type PlanOutlineMark = (typeof planOutlineMarkNames)[number];
+export declare const planOutlineToneNames: readonly ["active", "attention", "done", "failed", "neutral"];
+/** The color of the plan's status badge. */
+export type PlanOutlineTone = (typeof planOutlineToneNames)[number];
+export type PlanOutlineDependency = {
+    /** The `id` of the task this one waits for. The title links to its row. */
+    id: string;
+    title: string;
+    /** That task's state in words, such as “Done” or “Working”. */
+    label: string;
+};
+export type PlanOutlineTask = {
+    id: string;
+    title: string;
+    mark: PlanOutlineMark;
+    /** The state in words, shown at the end of the row. */
+    label: string;
+    /** Who does the task. Shown under the title with a person icon. */
+    assignee?: string | undefined;
+    /** What the task is about. Groups show it above their tasks. */
+    brief?: string | undefined;
+    /** Shown as “Done when”. */
+    criteria?: readonly string[] | undefined;
+    /** Shown as “Starts after”, each linking to its row. */
+    dependencies?: readonly PlanOutlineDependency[] | undefined;
+    /** Why the task is blocked or failed. Failed reasons use the danger color. */
+    reason?: string | undefined;
+    /** Buttons or extra content at the end of the task's details. */
+    action?: ReactNode;
+    /** Makes the row a group. Groups start open and list these tasks. */
+    children?: readonly PlanOutlineTask[] | undefined;
+};
+export interface PlanOutlineProps extends Omit<ComponentProps<"section">, "title" | "children"> {
+    /** The plan name. It names the section and shows as an `h3`. */
+    title: string;
+    /** One paragraph under the title. */
+    brief?: string | undefined;
+    /** The plan's state in words, shown in a badge. */
+    status: string;
+    /** The badge color for `status`. */
+    tone: PlanOutlineTone;
+    /** Progress in words under the bar, such as “3 of 8 done · 1 working”. */
+    progress: string;
+    /** Alerts or sections under the progress, such as why the plan paused. */
+    notice?: ReactNode;
+    /** Tasks and groups, in order. With none, the outline says so. */
+    tasks: readonly PlanOutlineTask[];
+    /** A note that the plan shown is out of date, under the notice. */
+    stale?: ReactNode;
+}
+/**
+ * A read-only task outline for an agent's plan. People can expand rows and
+ * follow links; they cannot tick, edit, reorder, or assign tasks. Groups list
+ * their tasks and start open; tasks reveal their brief, completion criteria,
+ * dependencies, reason, and actions on demand.
+ */
+export declare function PlanOutline({ title, brief, status, tone, progress, notice, tasks, stale, className, ...props }: PlanOutlineProps): import("react").JSX.Element;

package/dist/components/plan-outline.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { createContext, useContext, useId, } from "react";
+import { Ban } from "reicon-react/icons/Ban";
+import { Check } from "reicon-react/icons/Check";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { Clock } from "reicon-react/icons/Clock";
+import { HelpCircle } from "reicon-react/icons/HelpCircle";
+import { Lock } from "reicon-react/icons/Lock";
+import { User } from "reicon-react/icons/User";
+import { Warning } from "reicon-react/icons/Warning";
+import { cn } from "../internal/classes.js";
+import { Badge } from "./badge.js";
+import { Spinner } from "./spinner.js";
+export const planOutlineMarkNames = [
+    "pending",
+    "running",
+    "attention",
+    "blocked",
+    "done",
+    "failed",
+    "cancelled",
+];
+export const planOutlineToneNames = [
+    "active",
+    "attention",
+    "done",
+    "failed",
+    "neutral",
+];
+const markIcons = {
+    pending: _jsx(Clock, { size: 14 }),
+    attention: _jsx(HelpCircle, { size: 14 }),
+    blocked: _jsx(Lock, { size: 14 }),
+    done: _jsx(Check, { size: 14 }),
+    failed: _jsx(Warning, { size: 14 }),
+    cancelled: _jsx(Ban, { size: 14 }),
+};
+const toneBadges = {
+    active: "info",
+    attention: "warning",
+    done: "success",
+    failed: "destructive",
+    neutral: "secondary",
+};
+function leaves(tasks) {
+    return tasks.flatMap((task) => task.children
+        ? leaves(task.children)
+        : task.mark === "cancelled"
+            ? []
+            : [task]);
+}
+const Scope = createContext("plan");
+function useTaskId() {
+    const scope = useContext(Scope);
+    return (id) => `${scope}-task-${id}`;
+}
+/**
+ * A read-only task outline for an agent's plan. People can expand rows and
+ * follow links; they cannot tick, edit, reorder, or assign tasks. Groups list
+ * their tasks and start open; tasks reveal their brief, completion criteria,
+ * dependencies, reason, and actions on demand.
+ */
+export function PlanOutline({ title, brief, status, tone, progress, notice, tasks, stale, className, ...props }) {
+    const scope = `plan-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    const work = leaves(tasks);
+    return (_jsx(Scope, { value: scope, children: _jsxs("section", { "data-slot": "plan-outline", "aria-label": title, ...props, className: cn("sprout-plan-outline", className), children: [_jsxs("header", { className: "sprout-plan-outline-header", children: [_jsxs("div", { className: "sprout-plan-outline-heading", children: [_jsx("h3", { className: "sprout-plan-outline-title", children: title }), _jsx(Badge, { variant: toneBadges[tone], "data-tone": tone, className: "sprout-plan-outline-status", children: status })] }), brief && _jsx("p", { className: "sprout-plan-outline-brief", children: brief }), _jsxs("div", { className: "sprout-plan-outline-progress", children: [work.length > 0 && (_jsx("div", { "aria-hidden": "true", "data-slot": "plan-outline-rail", className: "sprout-plan-outline-rail", children: work.map((task) => (_jsx("span", { "data-mark": task.mark, className: "sprout-plan-outline-segment" }, task.id))) })), _jsx("p", { className: "sprout-plan-outline-progress-text", children: progress })] }), notice, stale] }), tasks.length === 0 ? (_jsx("p", { className: "sprout-plan-outline-empty", children: "No tasks have been added yet." })) : (_jsx(TaskList, { tasks: tasks, label: "Tasks", level: 0 }))] }) }));
+}
+function TaskList({ tasks, label, level, }) {
+    return (_jsx("ol", { "aria-label": label, "data-level": level, className: level === 0
+            ? "sprout-plan-outline-list"
+            : "sprout-plan-outline-list sprout-plan-outline-sublist", children: tasks.map((task) => (_jsx(TaskRow, { task: task, level: level }, task.id))) }));
+}
+function Mark({ mark }) {
+    return (_jsx("span", { "aria-hidden": "true", className: "sprout-plan-outline-mark", children: mark === "running" ? _jsx(Spinner, { "aria-hidden": "true" }) : markIcons[mark] }));
+}
+function TaskRow({ task, level }) {
+    const taskId = useTaskId();
+    const group = !!task.children;
+    const hasDetail = group ||
+        !!(task.brief ||
+            task.criteria?.length ||
+            task.dependencies?.length ||
+            task.reason ||
+            task.action);
+    const head = (_jsxs(_Fragment, { children: [_jsx(Mark, { mark: task.mark }), _jsxs("span", { className: "sprout-plan-outline-text", children: [_jsx("span", { className: "sprout-plan-outline-task-title", children: task.title }), task.assignee && (_jsxs("span", { className: "sprout-plan-outline-assignee", children: [_jsx(User, { size: 12, "aria-hidden": "true" }), _jsx("span", { children: task.assignee })] }))] }), _jsx("span", { className: "sprout-plan-outline-label", children: task.label }), hasDetail && (_jsx(ChevronRight, { size: 14, "aria-hidden": "true", className: "sprout-plan-outline-chevron" }))] }));
+    const rowProps = {
+        id: taskId(task.id),
+        tabIndex: -1,
+        "data-slot": "plan-outline-task",
+        "data-kind": group ? "group" : "task",
+        "data-mark": task.mark,
+        "data-level": level,
+        className: "sprout-plan-outline-task",
+    };
+    if (!hasDetail)
+        return (_jsx("li", { ...rowProps, children: _jsx("div", { className: "sprout-plan-outline-row", children: head }) }));
+    return (_jsxs(Collapsible.Root, { defaultOpen: group, render: _jsx("li", { ...rowProps }), children: [_jsx(Collapsible.Trigger, { className: "sprout-plan-outline-row sprout-plan-outline-trigger", children: head }), _jsx(Collapsible.Panel, { hiddenUntilFound: group, "data-slot": "plan-outline-panel", className: "sprout-plan-outline-panel", children: group ? (_jsxs(_Fragment, { children: [task.brief && (_jsx("p", { className: "sprout-plan-outline-group-brief", children: task.brief })), task.children.length ? (_jsx(TaskList, { tasks: task.children, label: `${task.title} tasks`, level: level + 1 })) : (_jsx("p", { className: "sprout-plan-outline-group-empty", children: "This group has no tasks yet." }))] })) : (_jsx(TaskDetail, { task: task })) })] }));
+}
+// The browser follows the link, which also opens a closed group; then focus moves to the row.
+function followDependency(target) {
+    requestAnimationFrame(() => document.getElementById(target)?.focus({ preventScroll: true }));
+}
+function TaskDetail({ task }) {
+    const taskId = useTaskId();
+    return (_jsxs("div", { "data-slot": "plan-outline-detail", className: "sprout-plan-outline-detail", children: [task.reason && (_jsx("p", { className: "sprout-plan-outline-reason", children: task.reason })), task.brief && (_jsx("p", { className: "sprout-plan-outline-task-brief", children: task.brief })), !!task.criteria?.length && (_jsxs("div", { className: "sprout-plan-outline-field", children: [_jsx("p", { className: "sprout-plan-outline-field-title", children: "Done when" }), _jsx("ul", { className: "sprout-plan-outline-criteria", children: task.criteria.map((item, index) => (_jsx("li", { children: item }, index))) })] })), !!task.dependencies?.length && (_jsxs("div", { className: "sprout-plan-outline-field", children: [_jsx("p", { className: "sprout-plan-outline-field-title", children: "Starts after" }), _jsx("ul", { className: "sprout-plan-outline-dependencies", children: task.dependencies.map((dependency) => (_jsxs("li", { children: [_jsx("a", { href: `#${taskId(dependency.id)}`, onClick: () => followDependency(taskId(dependency.id)), className: "sprout-plan-outline-link", children: dependency.title }), _jsx("span", { className: "sprout-plan-outline-dependency-label", children: dependency.label })] }, dependency.id))) })] })), task.action && (_jsx("div", { className: "sprout-plan-outline-action", children: task.action }))] }));
+}

package/dist/components/popover.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentProps } from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+export declare const popoverContentSizeNames: readonly ["default", "menu", "picker", "panel", "work-list", "app-actions", "bud"];
+export type PopoverContentSize = (typeof popoverContentSizeNames)[number];
+export type PopoverProps = PopoverPrimitive.Root.Props;
+export declare function Popover(props: PopoverProps): import("react").JSX.Element;
+export type PopoverTriggerProps = PopoverPrimitive.Trigger.Props;
+export declare function PopoverTrigger(props: PopoverTriggerProps): import("react").JSX.Element;
+type PositionerProps = Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "anchor" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+export interface PopoverContentProps extends PopoverPrimitive.Popup.Props, PositionerProps {
+    /**
+     * `default` is an 18rem padded panel for text. `menu`, `picker`, and `panel`
+     * are unpadded hosts for search lists and forms. `work-list` caps the height
+     * for a header, a scrolling list, and a footer. `app-actions` is a padded
+     * 20rem panel that scrolls. `bud` is a fixed-height quick chat window.
+     */
+    size?: PopoverContentSize;
+    /** Keep the content in the DOM while closed, for example to preserve chat state. */
+    keepMounted?: PopoverPrimitive.Portal.Props["keepMounted"];
+    /** Where the portal renders. Defaults to `document.body`. */
+    container?: PopoverPrimitive.Portal.Props["container"];
+}
+/**
+ * The floating panel. It renders its own portal and positioner, so place it
+ * directly inside `Popover`.
+ */
+export declare function PopoverContent({ align, alignOffset, side, sideOffset, collisionPadding, collisionAvoidance, sticky, positionMethod, anchor, size, keepMounted, container, className, ...props }: PopoverContentProps): import("react").JSX.Element;
+export type PopoverHeaderProps = ComponentProps<"div">;
+export declare function PopoverHeader({ className, ...props }: PopoverHeaderProps): import("react").JSX.Element;
+export type PopoverTitleProps = PopoverPrimitive.Title.Props;
+export declare function PopoverTitle({ className, ...props }: PopoverTitleProps): import("react").JSX.Element;
+export type PopoverDescriptionProps = PopoverPrimitive.Description.Props;
+export declare function PopoverDescription({ className, ...props }: PopoverDescriptionProps): import("react").JSX.Element;
+export {};