@tulipfarm/sprout 0.3.1 → 0.5.0

package/dist/components/input-otp.js

@@ -1,43 +1,43 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useId, } from "react";
-import { OTPField } from "@base-ui/react/otp-field";
-import { Minus } from "reicon-react/icons/Minus";
-import { cn, stateClassName } from "../internal/classes.js";
+import { createContext, useContext, useId } from 'react';
+import { OTPField } from '@base-ui/react/otp-field';
+import { Minus } from 'reicon-react/icons/Minus';
+import { cn, stateClassName } from '../internal/classes.js';
+export const inputOTPSizeNames = ['md', 'sm', 'lg'];
 const InputOTPContext = createContext(null);
-const isInvalid = (value) => value === true || value === "true";
+const isInvalid = (value) => value === true || value === 'true';
 /**
  * A one-time code field on Base UI `OTPField`. Each slot is a real input, so
  * typing, paste, autofill (`autoComplete="one-time-code"`), arrow keys, Home,
  * End, Backspace, and Delete all work. `aria-label` names the whole code and
  * its first slot; later slots are announced as "Character 2 of 6".
  */
-export function InputOTP({ maxLength, onChange, onValueChange, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-invalid": ariaInvalid, validationType = "numeric", ...props }) {
+export function InputOTP({ maxLength, size, onChange, onValueChange, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, validationType = 'numeric', ...props }) {
     const generated = useId();
     const labelId = ariaLabelledBy ?? (ariaLabel ? `${generated}-label` : undefined);
     const invalid = isInvalid(ariaInvalid);
-    return (_jsx(InputOTPContext.Provider, { value: { length: maxLength, labelId, invalid }, children: _jsxs(OTPField.Root, { "data-slot": "input-otp", "data-invalid": invalid ? "" : undefined, length: maxLength, validationType: validationType, "aria-labelledby": labelId, onValueChange: (value, details) => {
+    const scale = size ?? 'md';
+    return (_jsx(InputOTPContext.Provider, { value: { length: maxLength, labelId, invalid }, children: _jsxs(OTPField.Root, { "data-slot": "input-otp", "data-size": scale, "data-invalid": invalid ? '' : undefined, length: maxLength, validationType: validationType, "aria-labelledby": labelId, onValueChange: (value, details) => {
                 onValueChange?.(value, details);
                 onChange?.(value);
-            }, ...props, className: stateClassName("sprout-input-otp", className), children: [ariaLabel && !ariaLabelledBy ? (_jsx("span", { id: labelId, className: "sprout-input-otp-sr-only", children: ariaLabel })) : null, children] }) }));
+            }, ...props, className: stateClassName(cn('sprout-input-otp', `sprout-input-otp-size-${scale}`), className), children: [ariaLabel && !ariaLabelledBy ? (_jsx("span", { id: labelId, className: "sprout-input-otp-sr-only", children: ariaLabel })) : null, children] }) }));
 }
 /** Joins adjacent slots into one bordered segment. */
 export function InputOTPGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "input-otp-group", ...props, className: cn("sprout-input-otp-group", className) }));
+    return _jsx("div", { "data-slot": "input-otp-group", ...props, className: cn('sprout-input-otp-group', className) });
 }
 /**
  * One character of the code. Render slots in index order; Base UI tracks
  * focus and value by their DOM order.
  */
-export function InputOTPSlot({ index, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-invalid": ariaInvalid, ...props }) {
+export function InputOTPSlot({ index, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, ...props }) {
     const context = useContext(InputOTPContext);
     const length = context?.length ?? index + 1;
     const invalid = ariaInvalid === undefined ? context?.invalid : isInvalid(ariaInvalid);
-    return (_jsx(OTPField.Input, { "data-slot": "input-otp-slot", "data-index": index, "aria-labelledby": ariaLabelledBy ?? (index === 0 ? context?.labelId : undefined), "aria-label": index === 0
-            ? undefined
-            : (ariaLabel ?? `Character ${index + 1} of ${length}`), "aria-invalid": invalid || undefined, ...props, className: stateClassName("sprout-input-otp-slot", className) }));
+    return (_jsx(OTPField.Input, { "data-slot": "input-otp-slot", "data-index": index, "aria-labelledby": ariaLabelledBy ?? (index === 0 ? context?.labelId : undefined), "aria-label": index === 0 ? undefined : (ariaLabel ?? `Character ${index + 1} of ${length}`), "aria-invalid": invalid || undefined, ...props, className: stateClassName('sprout-input-otp-slot', className) }));
 }
 /** A dash between slot groups, such as `123–456`. */
 export function InputOTPSeparator({ className, children, ...props }) {
-    return (_jsx(OTPField.Separator, { "data-slot": "input-otp-separator", orientation: "vertical", ...props, className: stateClassName("sprout-input-otp-separator", className), children: children ?? _jsx(Minus, { "aria-hidden": "true" }) }));
+    return (_jsx(OTPField.Separator, { "data-slot": "input-otp-separator", orientation: "vertical", ...props, className: stateClassName('sprout-input-otp-separator', className), children: children ?? _jsx(Minus, { "aria-hidden": "true" }) }));
 }

package/dist/components/input.d.ts

@@ -1,9 +1,9 @@
-import { Input as BaseInput } from "@base-ui/react/input";
-export declare const inputScaleNames: readonly ["default", "lg"];
+import { Input as BaseInput } from '@base-ui/react/input';
+export declare const inputScaleNames: readonly ["md", "sm", "lg"];
 export type InputScale = (typeof inputScaleNames)[number];
 export type InputState = BaseInput.State;
 export interface InputProps extends BaseInput.Props {
-    /** `default` is 32px tall with 14px text. `lg` is 44px with 16px text. */
+    /** `sm` is 28px, `md` is 32px (`--sprout-control-height`), and `lg` is 36px. */
     scale?: InputScale | null;
 }
 /**

package/dist/components/input.js

@@ -1,9 +1,9 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Input as BaseInput } from "@base-ui/react/input";
-import { cn, stateClassName } from "../internal/classes.js";
-import { useFieldControl } from "./field.js";
-export const inputScaleNames = ["default", "lg"];
+import { Input as BaseInput } from '@base-ui/react/input';
+import { cn, stateClassName } from '../internal/classes.js';
+import { useFieldControl } from './field.js';
+export const inputScaleNames = ['md', 'sm', 'lg'];
 /**
  * A single-line text field on Base UI `Input`. It takes every native input
  * prop, such as `type`, `value`, `required`, and `ref`. Inside a Base UI
@@ -13,6 +13,6 @@ export const inputScaleNames = ["default", "lg"];
  */
 export function Input({ scale, className, ...rest }) {
     const props = useFieldControl(rest);
-    const size = scale ?? "default";
-    return (_jsx(BaseInput, { "data-slot": "input", "data-scale": size, ...props, className: stateClassName(cn("sprout-input", `sprout-input-scale-${size}`), className) }));
+    const size = scale ?? 'md';
+    return (_jsx(BaseInput, { "data-slot": "input", "data-scale": size, ...props, className: stateClassName(cn('sprout-input', `sprout-input-scale-${size}`), className) }));
 }

package/dist/components/kbd.d.ts

@@ -1,12 +1,12 @@
-import type { ComponentProps } from "react";
+import type { ComponentProps } from 'react';
 export declare const kbdVariantNames: readonly ["default", "outline"];
 export type KbdVariant = (typeof kbdVariantNames)[number];
-export interface KbdProps extends ComponentProps<"kbd"> {
+export interface KbdProps extends ComponentProps<'kbd'> {
     /** `"outline"` adds a border on the surface color, for hints on tinted strips and selected rows. */
     variant?: KbdVariant;
 }
 /** One keyboard key, such as `⌘`, `Enter`, or `Esc`. */
 export declare function Kbd({ variant, className, ...props }: KbdProps): import("react").JSX.Element;
-export type KbdGroupProps = ComponentProps<"kbd">;
+export type KbdGroupProps = ComponentProps<'kbd'>;
 /** Keys pressed together, such as `⌘` `K`. */
 export declare function KbdGroup({ className, ...props }: KbdGroupProps): import("react").JSX.Element;

package/dist/components/kbd.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../internal/classes.js";
-export const kbdVariantNames = ["default", "outline"];
+import { cn } from '../internal/classes.js';
+export const kbdVariantNames = ['default', 'outline'];
 /** One keyboard key, such as `⌘`, `Enter`, or `Esc`. */
-export function Kbd({ variant = "default", className, ...props }) {
-    return (_jsx("kbd", { "data-slot": "kbd", "data-variant": variant, className: cn("sprout-kbd", className), ...props }));
+export function Kbd({ variant = 'default', className, ...props }) {
+    return _jsx("kbd", { "data-slot": "kbd", "data-variant": variant, className: cn('sprout-kbd', className), ...props });
 }
 /** Keys pressed together, such as `⌘` `K`. */
 export function KbdGroup({ className, ...props }) {
-    return (_jsx("kbd", { "data-slot": "kbd-group", className: cn("sprout-kbd-group", className), ...props }));
+    return _jsx("kbd", { "data-slot": "kbd-group", className: cn('sprout-kbd-group', className), ...props });
 }

package/dist/components/label.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps } from "react";
-export type LabelProps = ComponentProps<"label">;
+import type { ComponentProps } from 'react';
+export type LabelProps = ComponentProps<'label'>;
 /**
  * Names one form control. Point `htmlFor` at a control's `id`, or wrap a
  * checkbox, switch, or radio with its text. A label wrapping a text control,

package/dist/components/label.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../internal/classes.js";
+import { cn } from '../internal/classes.js';
 /**
  * Names one form control. Point `htmlFor` at a control's `id`, or wrap a
  * checkbox, switch, or radio with its text. A label wrapping a text control,
  * such as a textarea, stacks the text above it.
  */
 export function Label({ className, ...props }) {
-    return (_jsx("label", { "data-slot": "label", className: cn("sprout-label", className), ...props }));
+    return _jsx("label", { "data-slot": "label", className: cn('sprout-label', className), ...props });
 }

package/dist/components/mention-list.d.ts

@@ -1,7 +1,7 @@
-import { type ComponentProps, type ReactNode } from "react";
+import { type ComponentProps, type ReactNode } from 'react';
 export declare const mentionStatusToneNames: readonly ["loading", "empty", "error"];
 export type MentionStatusTone = (typeof mentionStatusToneNames)[number];
-export interface MentionListProps extends Omit<ComponentProps<"div">, "id" | "children"> {
+export interface MentionListProps extends Omit<ComponentProps<'div'>, 'id' | 'children'> {
     /** The listbox id. Point the text field's `aria-controls` at it. */
     id: string;
     /** Names the listbox, such as “Files you can add”. */
@@ -21,7 +21,7 @@ export interface MentionListProps extends Omit<ComponentProps<"div">, "id" | "ch
  * owns the arrow keys; it points `aria-activedescendant` at the active option.
  */
 export declare function MentionList({ id, label, status, announcement, children, className, ...props }: MentionListProps): import("react").JSX.Element;
-export interface MentionOptionProps extends Omit<ComponentProps<"li">, "id" | "title" | "children" | "onSelect"> {
+export interface MentionOptionProps extends Omit<ComponentProps<'li'>, 'id' | 'title' | 'children' | 'onSelect'> {
     /** Unique id the text field uses in `aria-activedescendant`. */
     id: string;
     /** The keyboard-highlighted option. It scrolls into view when it becomes active. */

package/dist/components/mention-list.js

@@ -1,25 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, } from "react";
-import { cn } from "../internal/classes.js";
-import { Button } from "./button.js";
-import { Spinner } from "./spinner.js";
-export const mentionStatusToneNames = ["loading", "empty", "error"];
+import { useEffect, useId, useRef } from 'react';
+import { cn } from '../internal/classes.js';
+import { Button } from './button.js';
+import { Spinner } from './spinner.js';
+export const mentionStatusToneNames = ['loading', 'empty', 'error'];
 /**
  * A suggestion panel for `@` and `/` triggers. The text field keeps focus and
  * owns the arrow keys; it points `aria-activedescendant` at the active option.
  */
 export function MentionList({ id, label, status, announcement, children, className, ...props }) {
-    return (_jsxs("div", { "data-slot": "mention-list", className: cn("sprout-mention-list", className), ...props, children: [_jsx("ul", { id: id, role: "listbox", "aria-label": label, className: "sprout-mention-list-options", children: children }), status, _jsx("p", { role: "status", className: "sprout-mention-list-announcement", children: announcement })] }));
+    return (_jsxs("div", { "data-slot": "mention-list", className: cn('sprout-mention-list', className), ...props, children: [_jsx("ul", { id: id, role: "listbox", "aria-label": label, className: "sprout-mention-list-options", children: children }), status, _jsx("p", { role: "status", className: "sprout-mention-list-announcement", children: announcement })] }));
 }
 export function MentionOption({ id, active, onSelect, media, title, description, className, ...props }) {
     const option = useRef(null);
     useEffect(() => {
         if (active)
-            option.current?.scrollIntoView?.({ block: "nearest" });
+            option.current?.scrollIntoView?.({ block: 'nearest' });
     }, [active]);
-    return (_jsxs("li", { ref: option, id: id, role: "option", "aria-selected": active, "data-slot": "mention-option", "data-active": active ? "" : undefined, className: cn("sprout-mention-option", className), ...props, 
+    return (_jsxs("li", { ref: option, id: id, role: "option", "aria-selected": active, "data-slot": "mention-option", "data-active": active ? '' : undefined, className: cn('sprout-mention-option', className), ...props, 
         // Keeps focus (and the caret) in the text field.
-        onMouseDown: (event) => event.preventDefault(), onClick: onSelect, children: [media != null && media !== false && (_jsx("span", { "data-slot": "mention-option-media", className: "sprout-mention-option-media", children: media })), _jsxs("span", { className: "sprout-mention-option-text", children: [_jsx("span", { className: "sprout-mention-option-title", title: title, children: title }), description && (_jsx("span", { className: "sprout-mention-option-description", children: description }))] })] }));
+        onMouseDown: event => event.preventDefault(), onClick: onSelect, children: [media != null && media !== false && (_jsx("span", { "data-slot": "mention-option-media", className: "sprout-mention-option-media", children: media })), _jsxs("span", { className: "sprout-mention-option-text", children: [_jsx("span", { className: "sprout-mention-option-title", title: title, children: title }), description && _jsx("span", { className: "sprout-mention-option-description", children: description })] })] }));
 }
 /** A labelled run of options inside the same listbox, so arrow keys move across groups. */
 export function MentionGroup({ label, children }) {
@@ -27,5 +27,5 @@ export function MentionGroup({ label, children }) {
     return (_jsxs("li", { role: "presentation", "data-slot": "mention-group", className: "sprout-mention-group", children: [_jsx("span", { id: id, "aria-hidden": "true", className: "sprout-mention-group-label", children: label }), _jsx("ul", { role: "group", "aria-labelledby": id, className: "sprout-mention-group-options", children: children })] }));
 }
 export function MentionStatus({ tone, children, action }) {
-    return (_jsxs("div", { "data-slot": "mention-status", "data-tone": tone, role: tone === "error" ? "alert" : "status", className: "sprout-mention-status", children: [tone === "loading" && _jsx(Spinner, { "aria-hidden": "true" }), _jsx("span", { className: "sprout-mention-status-text", children: children }), action && (_jsx(Button, { size: "sm", variant: "outline", className: "sprout-mention-status-action", onMouseDown: (event) => event.preventDefault(), onClick: action.onAction, children: action.label }))] }));
+    return (_jsxs("div", { "data-slot": "mention-status", "data-tone": tone, role: tone === 'error' ? 'alert' : 'status', className: "sprout-mention-status", children: [tone === 'loading' && _jsx(Spinner, { "aria-hidden": "true" }), _jsx("span", { className: "sprout-mention-status-text", children: children }), action && (_jsx(Button, { size: "sm", variant: "outline", className: "sprout-mention-status-action", onMouseDown: event => event.preventDefault(), onClick: action.onAction, children: action.label }))] }));
 }

package/dist/components/menubar.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentProps } from "react";
-import { Menu as MenuPrimitive } from "@base-ui/react/menu";
-import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
+import type { ComponentProps } from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
 export declare const menubarItemVariantNames: readonly ["default", "destructive"];
 export type MenubarItemVariant = (typeof menubarItemVariantNames)[number];
 export type MenubarProps = MenubarPrimitive.Props;
@@ -16,10 +16,10 @@ export type MenubarPortalProps = MenuPrimitive.Portal.Props;
 export declare function MenubarPortal(props: MenubarPortalProps): import("react").JSX.Element;
 export type MenubarTriggerProps = MenuPrimitive.Trigger.Props;
 export declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react").JSX.Element;
-type PositionerProps = Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "collisionPadding" | "collisionAvoidance" | "sticky" | "positionMethod">;
+type PositionerProps = Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'collisionPadding' | 'collisionAvoidance' | 'sticky' | 'positionMethod'>;
 export interface MenubarContentProps extends MenuPrimitive.Popup.Props, PositionerProps {
     /** Where the portal renders. Defaults to `document.body`. */
-    container?: MenuPrimitive.Portal.Props["container"];
+    container?: MenuPrimitive.Portal.Props['container'];
 }
 /**
  * The menu surface. It renders its own portal and positioner, so place it
@@ -50,7 +50,7 @@ export interface MenubarRadioItemProps extends MenuPrimitive.RadioItem.Props, In
 export declare function MenubarRadioItem({ className, inset, children, ...props }: MenubarRadioItemProps): import("react").JSX.Element;
 export type MenubarSeparatorProps = MenuPrimitive.Separator.Props;
 export declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react").JSX.Element;
-export type MenubarShortcutProps = ComponentProps<"span">;
+export type MenubarShortcutProps = ComponentProps<'span'>;
 /** Right-aligned hint text, such as a keyboard shortcut. It does not bind keys. */
 export declare function MenubarShortcut({ className, ...props }: MenubarShortcutProps): import("react").JSX.Element;
 export type MenubarSubProps = MenuPrimitive.SubmenuRoot.Props;

package/dist/components/menubar.js

@@ -1,17 +1,17 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Menu as MenuPrimitive } from "@base-ui/react/menu";
-import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
-import { Check } from "reicon-react/icons/Check";
-import { ChevronRight } from "reicon-react/icons/ChevronRight";
-import { cn, stateClassName } from "../internal/classes.js";
-export const menubarItemVariantNames = ["default", "destructive"];
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
+import { Check } from 'reicon-react/icons/Check';
+import { ChevronRight } from 'reicon-react/icons/ChevronRight';
+import { cn, stateClassName } from '../internal/classes.js';
+export const menubarItemVariantNames = ['default', 'destructive'];
 /**
  * A row of menus, like an app's File and View menus. Left and Right move
  * between triggers, and Down opens the focused menu.
  */
 export function Menubar({ className, ...props }) {
-    return (_jsx(MenubarPrimitive, { "data-slot": "menubar", ...props, className: stateClassName("sprout-menubar", className) }));
+    return (_jsx(MenubarPrimitive, { "data-slot": "menubar", ...props, className: stateClassName('sprout-menubar', className) }));
 }
 /** One menu in the bar. Place a `MenubarTrigger` and `MenubarContent` inside. */
 export function MenubarMenu(props) {
@@ -21,48 +21,48 @@ export function MenubarPortal(props) {
     return _jsx(MenuPrimitive.Portal, { "data-slot": "menubar-portal", ...props });
 }
 export function MenubarTrigger({ className, ...props }) {
-    return (_jsx(MenuPrimitive.Trigger, { "data-slot": "menubar-trigger", ...props, className: stateClassName("sprout-menubar-trigger", className) }));
+    return (_jsx(MenuPrimitive.Trigger, { "data-slot": "menubar-trigger", ...props, className: stateClassName('sprout-menubar-trigger', className) }));
 }
 /**
  * The menu surface. It renders its own portal and positioner, so place it
  * directly inside `MenubarMenu`. It lines up with the bar's inner edge.
  */
-export function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", sideOffset = 8, collisionPadding = 8, collisionAvoidance, sticky, positionMethod, container, className, ...props }) {
-    return (_jsx(MenuPrimitive.Portal, { container: container, children: _jsx(MenuPrimitive.Positioner, { className: "sprout-menubar-positioner", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, sticky: sticky, positionMethod: positionMethod, children: _jsx(MenuPrimitive.Popup, { "data-slot": "menubar-content", ...props, className: stateClassName("sprout-menubar-content", className) }) }) }));
+export function MenubarContent({ align = 'start', alignOffset = -4, side = 'bottom', sideOffset = 8, collisionPadding = 8, collisionAvoidance, sticky, positionMethod, container, className, ...props }) {
+    return (_jsx(MenuPrimitive.Portal, { container: container, children: _jsx(MenuPrimitive.Positioner, { className: "sprout-menubar-positioner", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, sticky: sticky, positionMethod: positionMethod, children: _jsx(MenuPrimitive.Popup, { "data-slot": "menubar-content", ...props, className: stateClassName('sprout-menubar-content', className) }) }) }));
 }
 export function MenubarGroup(props) {
     return _jsx(MenuPrimitive.Group, { "data-slot": "menubar-group", ...props });
 }
 export function MenubarLabel({ className, inset, ...props }) {
-    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "menubar-label", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-menubar-label", className) }));
+    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "menubar-label", "data-inset": inset || undefined, ...props, className: stateClassName('sprout-menubar-label', className) }));
 }
-export function MenubarItem({ className, inset, variant = "default", ...props }) {
-    return (_jsx(MenuPrimitive.Item, { "data-slot": "menubar-item", "data-inset": inset || undefined, "data-variant": variant, ...props, className: stateClassName("sprout-menubar-item", className) }));
+export function MenubarItem({ className, inset, variant = 'default', ...props }) {
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "menubar-item", "data-inset": inset || undefined, "data-variant": variant, ...props, className: stateClassName('sprout-menubar-item', className) }));
 }
 /** A toggle row. The check sits at the start, so the label lines up with `inset` rows. */
 export function MenubarCheckboxItem({ className, inset, children, ...props }) {
-    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-menubar-item sprout-menubar-choice", className), children: [_jsx("span", { className: "sprout-menubar-indicator", "data-slot": "menubar-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(Check, { size: 16, "aria-hidden": "true" }) }) }), children] }));
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset || undefined, ...props, className: stateClassName('sprout-menubar-item sprout-menubar-choice', className), children: [_jsx("span", { className: "sprout-menubar-indicator", "data-slot": "menubar-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(Check, { size: 16, "aria-hidden": "true" }) }) }), children] }));
 }
 export function MenubarRadioGroup(props) {
-    return (_jsx(MenuPrimitive.RadioGroup, { "data-slot": "menubar-radio-group", ...props }));
+    return _jsx(MenuPrimitive.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
 }
 export function MenubarRadioItem({ className, inset, children, ...props }) {
-    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-menubar-item sprout-menubar-choice", className), children: [_jsx("span", { className: "sprout-menubar-indicator", "data-slot": "menubar-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(Check, { size: 16, "aria-hidden": "true" }) }) }), children] }));
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset || undefined, ...props, className: stateClassName('sprout-menubar-item sprout-menubar-choice', className), children: [_jsx("span", { className: "sprout-menubar-indicator", "data-slot": "menubar-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(Check, { size: 16, "aria-hidden": "true" }) }) }), children] }));
 }
 export function MenubarSeparator({ className, ...props }) {
-    return (_jsx(MenuPrimitive.Separator, { "data-slot": "menubar-separator", ...props, className: stateClassName("sprout-menubar-separator", className) }));
+    return (_jsx(MenuPrimitive.Separator, { "data-slot": "menubar-separator", ...props, className: stateClassName('sprout-menubar-separator', className) }));
 }
 /** Right-aligned hint text, such as a keyboard shortcut. It does not bind keys. */
 export function MenubarShortcut({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "menubar-shortcut", ...props, className: cn("sprout-menubar-shortcut", className) }));
+    return _jsx("span", { "data-slot": "menubar-shortcut", ...props, className: cn('sprout-menubar-shortcut', className) });
 }
 export function MenubarSub(props) {
     return _jsx(MenuPrimitive.SubmenuRoot, { ...props });
 }
 export function MenubarSubTrigger({ className, inset, children, ...props }) {
-    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset || undefined, ...props, className: stateClassName("sprout-menubar-item sprout-menubar-sub-trigger", className), children: [children, _jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "sprout-menubar-sub-chevron" })] }));
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset || undefined, ...props, className: stateClassName('sprout-menubar-item sprout-menubar-sub-trigger', className), children: [children, _jsx(ChevronRight, { size: 16, "aria-hidden": "true", className: "sprout-menubar-sub-chevron" })] }));
 }
 /** A nested menu surface. It opens to the side and sizes to its content. */
-export function MenubarSubContent({ align = "start", alignOffset = -5, side = "right", sideOffset = 0, className, ...props }) {
-    return (_jsx(MenubarContent, { "data-slot": "menubar-sub-content", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props, className: stateClassName("sprout-menubar-sub-content", className) }));
+export function MenubarSubContent({ align = 'start', alignOffset = -5, side = 'right', sideOffset = 0, className, ...props }) {
+    return (_jsx(MenubarContent, { "data-slot": "menubar-sub-content", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props, className: stateClassName('sprout-menubar-sub-content', className) }));
 }

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

@@ -1,6 +1,6 @@
 export declare const messageActionsAuthorNames: readonly ["assistant", "human"];
 export type MessageActionsAuthor = (typeof messageActionsAuthorNames)[number];
-export type MessageFeedback = "up" | "down";
+export type MessageFeedback = 'up' | 'down';
 export interface MessageActionsProps {
     /** The Markdown the message was written in. Copy turns links into `label (url)` plain text. */
     text: string;
@@ -31,4 +31,4 @@ export interface MessageBranchProps {
     className?: string | undefined;
 }
 /** Steps between regenerated versions of one response. */
-export declare function MessageBranch({ index, total, onChange, className, }: MessageBranchProps): import("react").JSX.Element;
+export declare function MessageBranch({ index, total, onChange, className }: MessageBranchProps): import("react").JSX.Element;

package/dist/components/message-actions.js

@@ -1,68 +1,66 @@
-"use client";
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Check } from "reicon-react/icons/Check";
-import { ChevronLeft } from "reicon-react/icons/ChevronLeft";
-import { ChevronRight } from "reicon-react/icons/ChevronRight";
-import { Copy } from "reicon-react/icons/Copy";
-import { ThumbsDown } from "reicon-react/icons/ThumbsDown";
-import { ThumbsUp } from "reicon-react/icons/ThumbsUp";
-import { cn } from "../internal/classes.js";
-import { Button } from "./button.js";
-export const messageActionsAuthorNames = ["assistant", "human"];
+import { useState } from 'react';
+import { Check } from 'reicon-react/icons/Check';
+import { ChevronLeft } from 'reicon-react/icons/ChevronLeft';
+import { ChevronRight } from 'reicon-react/icons/ChevronRight';
+import { Copy } from 'reicon-react/icons/Copy';
+import { ThumbsDown } from 'reicon-react/icons/ThumbsDown';
+import { ThumbsUp } from 'reicon-react/icons/ThumbsUp';
+import { cn } from '../internal/classes.js';
+import { Button } from './button.js';
+export const messageActionsAuthorNames = ['assistant', 'human'];
 const markdownLink = /\[([^\]]*)\]\(<?([^)\s>]+)>?(?:\s+"[^"]*")?\)/g;
 function plainTextFromMarkdown(markdown) {
     return markdown
-        .replace(markdownLink, (_, label, url) => !label || label === url ? url : `${label} (${url})`)
-        .replace(/<(https?:\/\/[^>\s]+)>/g, "$1");
+        .replace(markdownLink, (_, label, url) => (!label || label === url ? url : `${label} (${url})`))
+        .replace(/<(https?:\/\/[^>\s]+)>/g, '$1');
 }
 function formatDate(options, date) {
-    return Number.isNaN(date.getTime())
-        ? date.toString()
-        : new Intl.DateTimeFormat([], options).format(date);
+    return Number.isNaN(date.getTime()) ? date.toString() : new Intl.DateTimeFormat([], options).format(date);
 }
 const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
 function messageTime(iso, now = new Date()) {
     const date = new Date(iso);
-    const time = formatDate({ hour: "numeric", minute: "2-digit" }, date);
+    const time = formatDate({ hour: 'numeric', minute: '2-digit' }, date);
     const days = Math.round((startOfDay(now) - startOfDay(date)) / 86_400_000);
     if (days === 0)
         return time;
     if (days === 1)
         return `Yesterday ${time}`;
     const day = formatDate(date.getFullYear() === now.getFullYear()
-        ? { month: "short", day: "numeric" }
-        : { month: "short", day: "numeric", year: "numeric" }, date);
+        ? { month: 'short', day: 'numeric' }
+        : { month: 'short', day: 'numeric', year: 'numeric' }, date);
     return `${day}, ${time}`;
 }
 /** Copy, send time, feedback, and regenerate for one chat message. */
-export function MessageActions({ text, author = "assistant", createdAt, html, hover = false, feedback, onFeedback, onRetry, disabled = false, className, }) {
-    const [copy, setCopy] = useState("idle");
-    const noun = author === "human" ? "message" : "response";
-    const Noun = author === "human" ? "Message" : "Response";
+export function MessageActions({ text, author = 'assistant', createdAt, html, hover = false, feedback, onFeedback, onRetry, disabled = false, className, }) {
+    const [copy, setCopy] = useState('idle');
+    const noun = author === 'human' ? 'message' : 'response';
+    const Noun = author === 'human' ? 'Message' : 'Response';
     const copyText = async () => {
         const plain = plainTextFromMarkdown(text);
         const rich = html?.();
         try {
-            if (rich && typeof ClipboardItem !== "undefined")
+            if (rich && typeof ClipboardItem !== 'undefined')
                 await navigator.clipboard.write([
                     new ClipboardItem({
-                        "text/html": new Blob([rich], { type: "text/html" }),
-                        "text/plain": new Blob([plain], { type: "text/plain" }),
+                        'text/html': new Blob([rich], { type: 'text/html' }),
+                        'text/plain': new Blob([plain], { type: 'text/plain' }),
                     }),
                 ]);
             else
                 await navigator.clipboard.writeText(plain);
-            setCopy("copied");
+            setCopy('copied');
         }
         catch {
-            setCopy("error");
+            setCopy('error');
         }
     };
     const rate = (value) => onFeedback?.(feedback === value ? null : value);
-    return (_jsxs("div", { "data-slot": "message-actions", "data-author": author, className: cn("sprout-message-actions", className), children: [_jsxs("div", { role: "group", "aria-label": `${Noun} actions`, "data-hover": hover ? "" : undefined, className: "sprout-message-actions-row", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", disabled: disabled, "aria-label": copy === "copied" ? `${Noun} copied` : `Copy ${noun}`, title: `Copy ${noun}`, "data-copied": copy === "copied" ? "" : undefined, onClick: () => void copyText(), children: copy === "copied" ? (_jsx(Check, { size: 16, "aria-hidden": "true" })) : (_jsx(Copy, { size: 16, "aria-hidden": "true" })) }), createdAt && (_jsx("time", { className: "sprout-message-actions-time", dateTime: createdAt, title: formatDate({ dateStyle: "full", timeStyle: "medium" }, new Date(createdAt)), children: messageTime(createdAt) })), onFeedback && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: feedback === "up" ? "secondary" : "ghost", size: "icon-sm", disabled: disabled, "aria-label": "Helpful response", "aria-pressed": feedback === "up", title: "Helpful", onClick: () => rate("up"), children: _jsx(ThumbsUp, { size: 16, "aria-hidden": "true" }) }), _jsx(Button, { variant: feedback === "down" ? "secondary" : "ghost", size: "icon-sm", disabled: disabled, "aria-label": "Unhelpful response", "aria-pressed": feedback === "down", title: "Unhelpful", onClick: () => rate("down"), children: _jsx(ThumbsDown, { size: 16, "aria-hidden": "true" }) })] })), onRetry && (_jsx(Button, { variant: "ghost", size: "sm", disabled: disabled, onClick: onRetry, children: "Regenerate" }))] }), copy === "error" && (_jsxs("p", { role: "alert", className: "sprout-message-actions-error", children: ["Couldn't copy. Select the ", noun, " text or try again."] })), _jsx("span", { role: "status", className: "sprout-message-actions-sr-only", children: copy === "copied" ? `${Noun} copied to clipboard.` : "" })] }));
+    return (_jsxs("div", { "data-slot": "message-actions", "data-author": author, className: cn('sprout-message-actions', className), children: [_jsxs("div", { role: "group", "aria-label": `${Noun} actions`, "data-hover": hover ? '' : undefined, className: "sprout-message-actions-row", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", disabled: disabled, "aria-label": copy === 'copied' ? `${Noun} copied` : `Copy ${noun}`, title: `Copy ${noun}`, "data-copied": copy === 'copied' ? '' : undefined, onClick: () => void copyText(), children: copy === 'copied' ? _jsx(Check, { size: 16, "aria-hidden": "true" }) : _jsx(Copy, { size: 16, "aria-hidden": "true" }) }), createdAt && (_jsx("time", { className: "sprout-message-actions-time", dateTime: createdAt, title: formatDate({ dateStyle: 'full', timeStyle: 'medium' }, new Date(createdAt)), children: messageTime(createdAt) })), onFeedback && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: feedback === 'up' ? 'secondary' : 'ghost', size: "icon-sm", disabled: disabled, "aria-label": "Helpful response", "aria-pressed": feedback === 'up', title: "Helpful", onClick: () => rate('up'), children: _jsx(ThumbsUp, { size: 16, "aria-hidden": "true" }) }), _jsx(Button, { variant: feedback === 'down' ? 'secondary' : 'ghost', size: "icon-sm", disabled: disabled, "aria-label": "Unhelpful response", "aria-pressed": feedback === 'down', title: "Unhelpful", onClick: () => rate('down'), children: _jsx(ThumbsDown, { size: 16, "aria-hidden": "true" }) })] })), onRetry && (_jsx(Button, { variant: "ghost", size: "sm", disabled: disabled, onClick: onRetry, children: "Regenerate" }))] }), copy === 'error' && (_jsxs("p", { role: "alert", className: "sprout-message-actions-error", children: ["Couldn't copy. Select the ", noun, " text or try again."] })), _jsx("span", { role: "status", className: "sprout-message-actions-sr-only", children: copy === 'copied' ? `${Noun} copied to clipboard.` : '' })] }));
 }
 /** Steps between regenerated versions of one response. */
-export function MessageBranch({ index, total, onChange, className, }) {
-    return (_jsxs("div", { "data-slot": "message-branch", role: "group", "aria-label": "Response versions", className: cn("sprout-message-branch", className), children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Previous response", disabled: index <= 0, onClick: () => onChange(index - 1), children: _jsx(ChevronLeft, { size: 14, "aria-hidden": "true" }) }), _jsxs("span", { "aria-live": "polite", className: "sprout-message-branch-count", children: [index + 1, " / ", total] }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next response", disabled: index >= total - 1, onClick: () => onChange(index + 1), children: _jsx(ChevronRight, { size: 14, "aria-hidden": "true" }) })] }));
+export function MessageBranch({ index, total, onChange, className }) {
+    return (_jsxs("div", { "data-slot": "message-branch", role: "group", "aria-label": "Response versions", className: cn('sprout-message-branch', className), children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Previous response", disabled: index <= 0, onClick: () => onChange(index - 1), children: _jsx(ChevronLeft, { size: 14, "aria-hidden": "true" }) }), _jsxs("span", { "aria-live": "polite", className: "sprout-message-branch-count", children: [index + 1, " / ", total] }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next response", disabled: index >= total - 1, onClick: () => onChange(index + 1), children: _jsx(ChevronRight, { size: 14, "aria-hidden": "true" }) })] }));
 }

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

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from 'react';
 /** Renders one Markdown link. Return a plain `<a>` for links you do not handle. */
 export type MessageResponseRenderLink = (href: string, children: ReactNode) => ReactNode;
 export interface MessageTableViewportProps {
@@ -7,8 +7,8 @@ export interface MessageTableViewportProps {
     children?: ReactNode;
 }
 /** Sets how tall the tables in the responses inside it may grow. */
-export declare function MessageTableViewport({ bounded, children, }: MessageTableViewportProps): import("react").JSX.Element;
-export interface MessageResponseProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+export declare function MessageTableViewport({ bounded, children }: MessageTableViewportProps): import("react").JSX.Element;
+export interface MessageResponseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Markdown with GitHub extensions. Raw HTML is dropped and images are not shown. */
     children: string;
     /** Marks the response busy and shows a caret after the text. */

package/dist/components/message-response.js

@@ -1,46 +1,46 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, } from "react";
-import Markdown, {} from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { cn } from "../internal/classes.js";
-import { CodeBlock } from "./code-block.js";
+import { createContext, useContext, useMemo } from 'react';
+import Markdown, {} from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { cn } from '../internal/classes.js';
+import { CodeBlock } from './code-block.js';
 const LinkContext = createContext(undefined);
 const TableContext = createContext(false);
 /** Sets how tall the tables in the responses inside it may grow. */
-export function MessageTableViewport({ bounded, children, }) {
+export function MessageTableViewport({ bounded, children }) {
     return _jsx(TableContext, { value: bounded, children: children });
 }
 const ResponseTable = ({ children }) => {
     const bounded = useContext(TableContext);
-    return (_jsx("div", { className: "sprout-message-response-table", "data-bounded": bounded ? "" : undefined, tabIndex: 0, role: "region", "aria-label": "Response table", children: _jsx("table", { children: children }) }));
+    return (_jsx("div", { className: "sprout-message-response-table", "data-bounded": bounded ? '' : undefined, tabIndex: 0, role: "region", "aria-label": "Response table", children: _jsx("table", { children: children }) }));
 };
 function ResponseLink({ href, children }) {
     const render = useContext(LinkContext);
-    return render ? (render(href ?? "", children)) : (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", children: children }));
+    return render ? (render(href ?? '', children)) : (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", children: children }));
 }
 const components = {
     pre({ node, children }) {
         const code = node?.children[0];
-        if (code?.type !== "element" || code.tagName !== "code")
+        if (code?.type !== 'element' || code.tagName !== 'code')
             return _jsx("pre", { children: children });
         const classes = code.properties.className;
         const language = Array.isArray(classes)
-            ? classes.find((value) => typeof value === "string" && value.startsWith("language-"))
+            ? classes.find((value) => typeof value === 'string' && value.startsWith('language-'))
             : undefined;
         const text = code.children
-            .map((child) => (child.type === "text" ? child.value : ""))
-            .join("")
-            .replace(/\n$/, "");
-        return (_jsx(CodeBlock, { code: text, language: language ? language.slice(9) : "text" }));
+            .map(child => (child.type === 'text' ? child.value : ''))
+            .join('')
+            .replace(/\n$/, '');
+        return _jsx(CodeBlock, { code: text, language: language ? language.slice(9) : 'text' });
     },
     a: ResponseLink,
     table: ResponseTable,
     // GFM task list boxes have no label of their own; the item text follows them.
-    input: ({ node: _node, ...props }) => props.type === "checkbox" ? (_jsx("input", { ...props, "aria-label": "Task" })) : (_jsx("input", { ...props })),
+    input: ({ node: _node, ...props }) => props.type === 'checkbox' ? _jsx("input", { ...props, "aria-label": "Task" }) : _jsx("input", { ...props }),
 };
 /** Renders an assistant's Markdown reply: headings, lists, quotes, tables, task lists, and code blocks. */
 export function MessageResponse({ children, streaming = false, renderLink, className, ...props }) {
-    const markdown = useMemo(() => (_jsx(Markdown, { remarkPlugins: [remarkGfm], components: components, skipHtml: true, disallowedElements: ["img"], children: children })), [children]);
-    return (_jsxs("div", { "data-slot": "message-response", "data-streaming": streaming ? "" : undefined, "aria-busy": streaming, ...props, className: cn("sprout-message-response", className), children: [_jsx(LinkContext, { value: renderLink, children: markdown }), streaming && (_jsx("span", { "aria-hidden": "true", className: "sprout-message-response-caret" }))] }));
+    const markdown = useMemo(() => (_jsx(Markdown, { remarkPlugins: [remarkGfm], components: components, skipHtml: true, disallowedElements: ['img'], children: children })), [children]);
+    return (_jsxs("div", { "data-slot": "message-response", "data-streaming": streaming ? '' : undefined, "aria-busy": streaming, ...props, className: cn('sprout-message-response', className), children: [_jsx(LinkContext, { value: renderLink, children: markdown }), streaming && _jsx("span", { "aria-hidden": "true", className: "sprout-message-response-caret" })] }));
 }