@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/message-scroller.d.ts

@@ -1,8 +1,8 @@
-import { type ComponentProps, type ReactNode } from "react";
-import { useRender } from "@base-ui/react/use-render";
-import { type MessageScrollerDefaultScrollPosition, type MessageScrollerScrollable, type MessageScrollerScrollOptions, type MessageScrollerVisibilityState } from "../internal/message-scroller.js";
-import { type ButtonSize, type ButtonVariant } from "./button.js";
-export type { MessageScrollerDefaultScrollPosition, MessageScrollerScrollAlign, MessageScrollerScrollable, MessageScrollerScrollOptions, MessageScrollerVisibilityState, } from "../internal/message-scroller.js";
+import { type ComponentProps, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type MessageScrollerDefaultScrollPosition, type MessageScrollerScrollable, type MessageScrollerScrollOptions, type MessageScrollerVisibilityState } from '../internal/message-scroller.js';
+import { type ButtonSize, type ButtonVariant } from './button.js';
+export type { MessageScrollerDefaultScrollPosition, MessageScrollerScrollAlign, MessageScrollerScrollable, MessageScrollerScrollOptions, MessageScrollerVisibilityState, } from '../internal/message-scroller.js';
 export declare const messageScrollerDefaultScrollPositionNames: readonly ["end", "start", "last-anchor"];
 export declare const messageScrollerButtonDirectionNames: readonly ["end", "start"];
 export declare const messageScrollerScrollAlignNames: readonly ["start", "center", "end", "nearest"];
@@ -22,22 +22,22 @@ export interface MessageScrollerProviderProps {
 }
 /** Owns the scroll state. Wrap the scroller and anything that calls the hooks, such as a composer. */
 export declare function MessageScrollerProvider({ children, autoScroll, defaultScrollPosition, scrollEdgeThreshold, scrollPreviousItemPeek, scrollMargin, }: MessageScrollerProviderProps): import("react").JSX.Element;
-export type MessageScrollerProps = ComponentProps<"div">;
+export type MessageScrollerProps = ComponentProps<'div'>;
 /** The positioned frame. Holds the viewport and the jump buttons, and fills its parent. */
 export declare function MessageScroller({ className, ref, ...props }: MessageScrollerProps): import("react").JSX.Element;
-export interface MessageScrollerViewportProps extends ComponentProps<"div"> {
+export interface MessageScrollerViewportProps extends ComponentProps<'div'> {
     /** Keep the message you are reading still when older messages load above it. */
     preserveScrollOnPrepend?: boolean | undefined;
 }
 /** The scrolling region. Focusable, named “Messages” unless you pass `aria-label`. */
-export declare function MessageScrollerViewport({ className, ref, role, tabIndex, preserveScrollOnPrepend, onKeyDown, onScroll, onTouchMove, onWheel, "aria-label": ariaLabel, ...props }: MessageScrollerViewportProps): import("react").JSX.Element;
-export interface MessageScrollerContentProps extends ComponentProps<"div"> {
+export declare function MessageScrollerViewport({ className, ref, role, tabIndex, preserveScrollOnPrepend, onKeyDown, onScroll, onTouchMove, onWheel, 'aria-label': ariaLabel, ...props }: MessageScrollerViewportProps): import("react").JSX.Element;
+export interface MessageScrollerContentProps extends ComponentProps<'div'> {
     /** Class for the hidden spacer that lets a pinned turn reach the top edge. */
     spacerClassName?: string | undefined;
 }
 /** The message column, a polite `log` that announces additions. Items sit 24px apart. */
-export declare function MessageScrollerContent({ className, children, ref, role, spacerClassName, "aria-relevant": ariaRelevant, ...props }: MessageScrollerContentProps): import("react").JSX.Element;
-export interface MessageScrollerItemProps extends ComponentProps<"div"> {
+export declare function MessageScrollerContent({ className, children, ref, role, spacerClassName, 'aria-relevant': ariaRelevant, ...props }: MessageScrollerContentProps): import("react").JSX.Element;
+export interface MessageScrollerItemProps extends ComponentProps<'div'> {
     /** Stable id used by `scrollToMessage` and visibility. */
     messageId?: string | undefined;
     /** Pin this item under the top edge when it is added, such as the newest user turn. */
@@ -49,7 +49,7 @@ export interface MessageScrollerButtonState extends Record<string, unknown> {
     active: boolean;
     direction: MessageScrollerButtonDirection;
 }
-export type MessageScrollerButtonProps = useRender.ComponentProps<"button", MessageScrollerButtonState> & {
+export type MessageScrollerButtonProps = useRender.ComponentProps<'button', MessageScrollerButtonState> & {
     /** Which edge the button scrolls to. `"start"` sits at the top with the arrow turned up. */
     direction?: MessageScrollerButtonDirection | undefined;
     /** `"smooth"` by default; becomes `"auto"` when reduced motion is set. */

package/dist/components/message-scroller.js

@@ -1,24 +1,15 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
-import { useRender } from "@base-ui/react/use-render";
-import { mergeProps } from "@base-ui/react/merge-props";
-import { ArrowDown } from "reicon-react/icons/ArrowDown";
-import { cn } from "../internal/classes.js";
-import { MessageScrollerController, scrollIntentKeys, } from "../internal/message-scroller.js";
-import { Button } from "./button.js";
-export const messageScrollerDefaultScrollPositionNames = [
-    "end",
-    "start",
-    "last-anchor",
-];
-export const messageScrollerButtonDirectionNames = ["end", "start"];
-export const messageScrollerScrollAlignNames = [
-    "start",
-    "center",
-    "end",
-    "nearest",
-];
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { ArrowDown } from 'reicon-react/icons/ArrowDown';
+import { cn } from '../internal/classes.js';
+import { MessageScrollerController, scrollIntentKeys, } from '../internal/message-scroller.js';
+import { Button } from './button.js';
+export const messageScrollerDefaultScrollPositionNames = ['end', 'start', 'last-anchor'];
+export const messageScrollerButtonDirectionNames = ['end', 'start'];
+export const messageScrollerScrollAlignNames = ['start', 'center', 'end', 'nearest'];
 const ScrollerContext = createContext(null);
 function useController(part) {
     const controller = useContext(ScrollerContext);
@@ -27,7 +18,7 @@ function useController(part) {
     return controller;
 }
 function assignRef(ref, value) {
-    if (typeof ref === "function")
+    if (typeof ref === 'function')
         ref(value);
     else if (ref)
         ref.current = value;
@@ -37,7 +28,7 @@ function usePendingDefaultScroll(controller) {
     return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
 /** Owns the scroll state. Wrap the scroller and anything that calls the hooks, such as a composer. */
-export function MessageScrollerProvider({ children, autoScroll = false, defaultScrollPosition = "end", scrollEdgeThreshold = 8, scrollPreviousItemPeek = 64, scrollMargin = 0, }) {
+export function MessageScrollerProvider({ children, autoScroll = false, defaultScrollPosition = 'end', scrollEdgeThreshold = 8, scrollPreviousItemPeek = 64, scrollMargin = 0, }) {
     const options = {
         autoScroll,
         defaultScrollPosition,
@@ -50,21 +41,21 @@ export function MessageScrollerProvider({ children, autoScroll = false, defaultS
     useLayoutEffect(() => controller.applyDefaultOrSettle(), [controller, defaultScrollPosition]);
     useLayoutEffect(() => controller.followOnAutoScroll(), [controller, autoScroll]);
     useEffect(() => controller.dispose, [controller]);
-    return (_jsx(ScrollerContext.Provider, { value: controller, children: children }));
+    return _jsx(ScrollerContext.Provider, { value: controller, children: children });
 }
 /** The positioned frame. Holds the viewport and the jump buttons, and fills its parent. */
 export function MessageScroller({ className, ref, ...props }) {
-    const controller = useController("MessageScroller");
+    const controller = useController('MessageScroller');
     const pending = usePendingDefaultScroll(controller);
     const setRef = useCallback((element) => {
         controller.setRoot(element);
         assignRef(ref, element);
     }, [controller, ref]);
-    return (_jsx("div", { "data-slot": "message-scroller", ref: setRef, className: cn("sprout-message-scroller", className), ...props, ...(pending ? { "data-pending-scroll": "" } : null) }));
+    return (_jsx("div", { "data-slot": "message-scroller", ref: setRef, className: cn('sprout-message-scroller', className), ...props, ...(pending ? { 'data-pending-scroll': '' } : null) }));
 }
 /** The scrolling region. Focusable, named “Messages” unless you pass `aria-label`. */
-export function MessageScrollerViewport({ className, ref, role, tabIndex, preserveScrollOnPrepend = true, onKeyDown, onScroll, onTouchMove, onWheel, "aria-label": ariaLabel, ...props }) {
-    const controller = useController("MessageScrollerViewport");
+export function MessageScrollerViewport({ className, ref, role, tabIndex, preserveScrollOnPrepend = true, onKeyDown, onScroll, onTouchMove, onWheel, 'aria-label': ariaLabel, ...props }) {
+    const controller = useController('MessageScrollerViewport');
     const pending = usePendingDefaultScroll(controller);
     controller.preserveScrollOnPrepend = preserveScrollOnPrepend;
     const setRef = useCallback((element) => {
@@ -73,7 +64,7 @@ export function MessageScrollerViewport({ className, ref, role, tabIndex, preser
     }, [controller, ref]);
     useEffect(() => {
         const viewport = controller.getViewport();
-        if (!viewport || typeof ResizeObserver === "undefined")
+        if (!viewport || typeof ResizeObserver === 'undefined')
             return;
         let frame = 0;
         const observer = new ResizeObserver(() => {
@@ -86,7 +77,7 @@ export function MessageScrollerViewport({ className, ref, role, tabIndex, preser
             observer.disconnect();
         };
     }, [controller]);
-    return (_jsx("div", { "data-slot": "message-scroller-viewport", ref: setRef, role: role ?? "region", "aria-label": ariaLabel ?? "Messages", tabIndex: tabIndex ?? 0, className: cn("sprout-message-scroller-viewport", className), onKeyDown: (event) => {
+    return (_jsx("div", { "data-slot": "message-scroller-viewport", ref: setRef, role: role ?? 'region', "aria-label": ariaLabel ?? 'Messages', tabIndex: tabIndex ?? 0, className: cn('sprout-message-scroller-viewport', className), onKeyDown: (event) => {
             if (scrollIntentKeys.has(event.key))
                 controller.userScrollIntent();
             onKeyDown?.(event);
@@ -99,11 +90,11 @@ export function MessageScrollerViewport({ className, ref, role, tabIndex, preser
         }, onWheel: (event) => {
             controller.userScrollIntent();
             onWheel?.(event);
-        }, ...props, ...(pending ? { "data-pending-scroll": "" } : null) }));
+        }, ...props, ...(pending ? { 'data-pending-scroll': '' } : null) }));
 }
 /** The message column, a polite `log` that announces additions. Items sit 24px apart. */
-export function MessageScrollerContent({ className, children, ref, role, spacerClassName, "aria-relevant": ariaRelevant, ...props }) {
-    const controller = useController("MessageScrollerContent");
+export function MessageScrollerContent({ className, children, ref, role, spacerClassName, 'aria-relevant': ariaRelevant, ...props }) {
+    const controller = useController('MessageScrollerContent');
     const element = useRef(null);
     const setRef = useCallback((node) => {
         element.current = node;
@@ -115,7 +106,7 @@ export function MessageScrollerContent({ className, children, ref, role, spacerC
         if (!node)
             return;
         controller.handleContentChange();
-        if (typeof MutationObserver === "undefined")
+        if (typeof MutationObserver === 'undefined')
             return;
         const observer = new MutationObserver(controller.handleContentChange);
         observer.observe(node, { childList: true });
@@ -123,7 +114,7 @@ export function MessageScrollerContent({ className, children, ref, role, spacerC
     }, [controller]);
     useEffect(() => {
         const node = element.current;
-        if (!node || typeof ResizeObserver === "undefined")
+        if (!node || typeof ResizeObserver === 'undefined')
             return;
         let frame = 0;
         const observer = new ResizeObserver(() => {
@@ -136,11 +127,11 @@ export function MessageScrollerContent({ className, children, ref, role, spacerC
             observer.disconnect();
         };
     }, [controller]);
-    return (_jsxs("div", { "data-slot": "message-scroller-content", ref: setRef, role: role ?? "log", "aria-relevant": ariaRelevant ?? "additions", className: cn("sprout-message-scroller-content", className), ...props, children: [children, _jsx("div", { ref: controller.setSpacer, "aria-hidden": "true", "data-message-scroller-spacer": "", hidden: true, className: spacerClassName })] }));
+    return (_jsxs("div", { "data-slot": "message-scroller-content", ref: setRef, role: role ?? 'log', "aria-relevant": ariaRelevant ?? 'additions', className: cn('sprout-message-scroller-content', className), ...props, children: [children, _jsx("div", { ref: controller.setSpacer, "aria-hidden": "true", "data-message-scroller-spacer": "", hidden: true, className: spacerClassName })] }));
 }
 /** One message or turn in the column. Off-screen items skip rendering work. */
 export function MessageScrollerItem({ className, ref, messageId, scrollAnchor = false, ...props }) {
-    const controller = useController("MessageScrollerItem");
+    const controller = useController('MessageScrollerItem');
     const previous = useRef(null);
     const setRef = useCallback((node) => {
         const before = previous.current;
@@ -149,33 +140,30 @@ export function MessageScrollerItem({ className, ref, messageId, scrollAnchor =
             controller.registerMessage(messageId, node, before);
         assignRef(ref, node);
     }, [controller, messageId, ref]);
-    return (_jsx("div", { "data-slot": "message-scroller-item", ref: setRef, "data-message-id": messageId, "data-scroll-anchor": scrollAnchor ? "true" : "false", className: cn("sprout-message-scroller-item", className), ...props }));
+    return (_jsx("div", { "data-slot": "message-scroller-item", ref: setRef, "data-message-id": messageId, "data-scroll-anchor": scrollAnchor ? 'true' : 'false', className: cn('sprout-message-scroller-item', className), ...props }));
 }
-const prefersReducedMotion = () => typeof matchMedia === "function" &&
-    matchMedia("(prefers-reduced-motion: reduce)").matches;
+const prefersReducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 /** A floating jump button that shows only while there is more history in its direction. */
-export function MessageScrollerButton({ className, children, render, ref, direction = "end", behavior = "smooth", variant = "secondary", size = "icon-sm", tabIndex, onClick, ...props }) {
-    const controller = useController("MessageScrollerButton");
+export function MessageScrollerButton({ className, children, render, ref, direction = 'end', behavior = 'smooth', variant = 'secondary', size = 'icon-sm', tabIndex, onClick, ...props }) {
+    const controller = useController('MessageScrollerButton');
     const store = controller.stateStore;
-    const read = useCallback(() => direction === "start"
-        ? store.getSnapshot().start
-        : store.getSnapshot().end, [direction, store]);
+    const read = useCallback(() => (direction === 'start' ? store.getSnapshot().start : store.getSnapshot().end), [direction, store]);
     const active = useSyncExternalStore(store.subscribe, read, read);
     const state = useMemo(() => ({ active, direction }), [active, direction]);
     return useRender({
-        defaultTagName: "button",
+        defaultTagName: 'button',
         render: render ?? _jsx(Button, { variant: variant, size: size }),
         ref,
         state,
         stateAttributesMapping: { active: () => null },
         props: mergeProps({
-            type: "button",
-            "data-slot": "message-scroller-button",
-            "data-active": active ? "true" : "false",
-            className: cn("sprout-message-scroller-button", className),
+            type: 'button',
+            'data-slot': 'message-scroller-button',
+            'data-active': active ? 'true' : 'false',
+            className: cn('sprout-message-scroller-button', className),
             inert: !active,
             tabIndex: active ? tabIndex : -1,
-            onClick: (event) => {
+            onClick: event => {
                 if (!active)
                     return;
                 onClick?.(event);
@@ -183,20 +171,20 @@ export function MessageScrollerButton({ className, children, render, ref, direct
                     return;
                 event.currentTarget.blur();
                 const scroll = {
-                    behavior: prefersReducedMotion() ? "auto" : behavior,
+                    behavior: prefersReducedMotion() ? 'auto' : behavior,
                 };
-                if (direction === "start")
+                if (direction === 'start')
                     controller.scrollToStart(scroll);
                 else
                     controller.scrollToEnd(scroll);
             },
-            children: children ?? (_jsxs(_Fragment, { children: [_jsx(ArrowDown, { "aria-hidden": "true" }), _jsx("span", { className: "sprout-message-scroller-sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })] })),
+            children: children ?? (_jsxs(_Fragment, { children: [_jsx(ArrowDown, { "aria-hidden": "true" }), _jsx("span", { className: "sprout-message-scroller-sr-only", children: direction === 'end' ? 'Scroll to end' : 'Scroll to start' })] })),
         }, props),
     });
 }
 /** Scroll the history from outside it, such as after sending or from a “jump to” link. */
 export function useMessageScroller() {
-    const controller = useController("useMessageScroller");
+    const controller = useController('useMessageScroller');
     return useMemo(() => ({
         scrollToEnd: controller.scrollToEnd,
         scrollToMessage: controller.scrollToMessage,
@@ -205,12 +193,12 @@ export function useMessageScroller() {
 }
 /** Whether there is more history above (`start`) or below (`end`) the current view. */
 export function useMessageScrollerScrollable() {
-    const store = useController("useMessageScrollerScrollable").stateStore;
+    const store = useController('useMessageScrollerScrollable').stateStore;
     return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
 /** The ids of items in view and the pinned turn under the top edge. Observes only while used. */
 export function useMessageScrollerVisibility() {
-    const controller = useController("useMessageScrollerVisibility");
+    const controller = useController('useMessageScrollerVisibility');
     const store = controller.visibilityStore;
     const subscribe = useCallback((listener) => store.subscribe(listener, controller.observeVisibility, controller.unobserveVisibility), [controller, store]);
     return useSyncExternalStore(subscribe, store.getSnapshot, store.getSnapshot);

package/dist/components/message.d.ts

@@ -1,37 +1,37 @@
-import type { ComponentProps, ReactNode } from "react";
-import { useRender } from "@base-ui/react/use-render";
+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">;
+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"> {
+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">;
+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">;
+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">;
+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">;
+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";
+    slot: 'message-bubble';
     variant: MessageBubbleVariant;
 }
-export type MessageBubbleProps = useRender.ComponentProps<"div", MessageBubbleState> & {
+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. */
@@ -39,7 +39,7 @@ export type MessageBubbleProps = useRender.ComponentProps<"div", MessageBubbleSt
 };
 /** 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"> {
+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. */

package/dist/components/message.js

@@ -1,52 +1,52 @@
 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"];
+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",
+    'default',
+    'secondary',
+    'muted',
+    'tinted',
+    'outline',
+    'ghost',
+    'destructive',
 ];
-export const messageReactionsSideNames = ["top", "bottom"];
+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 }));
+    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 }));
+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 }));
+    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 }));
+    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 }));
+    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 }));
+    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 }) {
+export function MessageBubble({ variant = 'default', reactions, className, render, ref, ...props }) {
     const bubble = useRender({
-        defaultTagName: "div",
+        defaultTagName: 'div',
         ref,
         render,
         props: mergeProps({
-            className: cn("sprout-message-bubble", `sprout-message-bubble-${variant}`, className),
+            className: cn('sprout-message-bubble', `sprout-message-bubble-${variant}`, className),
         }, props),
-        state: { slot: "message-bubble", variant },
+        state: { slot: 'message-bubble', variant },
     });
     if (reactions == null || reactions === false)
         return bubble;
@@ -54,6 +54,6 @@ export function MessageBubble({ variant = "default", reactions, className, rende
     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 }));
+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

@@ -1,5 +1,5 @@
-import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
-type Align = NonNullable<NavigationMenuPrimitive.Positioner.Props["align"]>;
+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;

package/dist/components/navigation-menu.js

@@ -1,54 +1,54 @@
-"use client";
+'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";
+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 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) }));
+    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) }));
+    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);
+    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, {}) })] }));
+    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) }));
+    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" }) }) }) }));
+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) }));
+    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" }) }));
+    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

@@ -1,5 +1,5 @@
-import type { ComponentProps, ReactNode } from "react";
-export interface NoticeBannerProps extends Omit<ComponentProps<"section">, "children"> {
+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. */

package/dist/components/notice-banner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../internal/classes.js";
+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
@@ -7,5 +7,5 @@ import { cn } from "../internal/classes.js";
  * 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 }))] }));
+    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

@@ -1,5 +1,5 @@
-import type { ComponentProps } from "react";
-export type PageContentProps = ComponentProps<"div">;
+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.

package/dist/components/page-content.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../internal/classes.js";
+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 }));
+    return _jsx("div", { "data-slot": "page-content", className: cn('sprout-page-content', className), ...props });
 }

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

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode, type Ref } from "react";
+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;