@tulipfarm/sprout 0.3.1 → 0.4.0

package/dist/components/calendar.js

@@ -1,46 +1,37 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, } from "react";
-import { DayPicker, getDefaultClassNames, useDayPicker, } from "react-day-picker";
-import { ChevronDown } from "reicon-react/icons/ChevronDown";
-import { ChevronLeft } from "reicon-react/icons/ChevronLeft";
-import { ChevronRight } from "reicon-react/icons/ChevronRight";
-import { cn } from "../internal/classes.js";
-import { Button, buttonVariants } from "./button.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "./select.js";
-export const calendarCaptionLayoutNames = [
-    "label",
-    "dropdown",
-    "dropdown-months",
-    "dropdown-years",
-];
+import { useEffect, useRef } from 'react';
+import { DayPicker, getDefaultClassNames, useDayPicker, } from 'react-day-picker';
+import { ChevronDown } from 'reicon-react/icons/ChevronDown';
+import { ChevronLeft } from 'reicon-react/icons/ChevronLeft';
+import { ChevronRight } from 'reicon-react/icons/ChevronRight';
+import { cn } from '../internal/classes.js';
+import { Button, buttonVariants } from './button.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select.js';
+export const calendarCaptionLayoutNames = ['label', 'dropdown', 'dropdown-months', 'dropdown-years'];
 function CalendarRoot({ className, rootRef, ...props }) {
-    return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: className, ...props }));
+    return _jsx("div", { "data-slot": "calendar", ref: rootRef, className: className, ...props });
 }
 function CalendarChevron({ className, orientation, size: _size, disabled: _disabled, ...props }) {
-    const Icon = orientation === "left"
-        ? ChevronLeft
-        : orientation === "right"
-            ? ChevronRight
-            : ChevronDown;
-    return (_jsx(Icon, { "aria-hidden": "true", className: cn("sprout-calendar-chevron", className), ...props }));
+    const Icon = orientation === 'left' ? ChevronLeft : orientation === 'right' ? ChevronRight : ChevronDown;
+    return _jsx(Icon, { "aria-hidden": "true", className: cn('sprout-calendar-chevron', className), ...props });
 }
 function CalendarWeekNumber({ children, week: _week, ...props }) {
     return (_jsx("th", { ...props, children: _jsx("div", { className: "sprout-calendar-week-number-cell", children: children }) }));
 }
 /** Month and year pickers use a Base UI select, never a native `<select>`. */
-function CalendarDropdown({ options = [], value, onChange, disabled, className, style, "aria-label": label, }) {
-    const items = options.map((option) => ({
+function CalendarDropdown({ options = [], value, onChange, disabled, className, style, 'aria-label': label, }) {
+    const items = options.map(option => ({
         value: option.value,
         label: option.label,
     }));
-    return (_jsxs(Select, { items: items, value: Number(value), disabled: disabled, onValueChange: (next) => {
+    return (_jsxs(Select, { items: items, value: Number(value), disabled: disabled, onValueChange: next => {
             if (next === null)
                 return;
             onChange?.({
                 target: { value: String(next) },
             });
-        }, children: [_jsx(SelectTrigger, { size: "sm", "aria-label": label, style: style, className: cn("sprout-calendar-dropdown", className), children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { className: "sprout-calendar-dropdown-content", children: options.map((option) => (_jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))) })] }));
+        }, children: [_jsx(SelectTrigger, { size: "sm", "aria-label": label, style: style, className: cn('sprout-calendar-dropdown', className), children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { className: "sprout-calendar-dropdown-content", children: options.map(option => (_jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))) })] }));
 }
 /**
  * A month grid for picking one date, several dates, or a range. It takes every
@@ -48,38 +39,38 @@ function CalendarDropdown({ options = [], value, onChange, disabled, className,
  * `defaultMonth`, `disabled`, `weekStartsOn`, `showWeekNumber`, and
  * `numberOfMonths`.
  */
-export function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
+export function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', locale, formatters, components, ...props }) {
     const defaults = getDefaultClassNames();
-    const navButton = cn(buttonVariants({ variant: buttonVariant, size: "icon-sm" }), "sprout-calendar-nav-button");
-    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("sprout-calendar", className), "data-button-variant": buttonVariant, "data-caption-layout": captionLayout, captionLayout: captionLayout, locale: locale, formatters: {
-            formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+    const navButton = cn(buttonVariants({ variant: buttonVariant, size: 'icon-sm' }), 'sprout-calendar-nav-button');
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('sprout-calendar', className), "data-button-variant": buttonVariant, "data-caption-layout": captionLayout, captionLayout: captionLayout, locale: locale, formatters: {
+            formatMonthDropdown: date => date.toLocaleString(locale?.code, { month: 'short' }),
             ...formatters,
         }, classNames: {
-            root: cn("sprout-calendar-root", defaults.root),
-            months: cn("sprout-calendar-months", defaults.months),
-            month: cn("sprout-calendar-month", defaults.month),
-            nav: cn("sprout-calendar-nav", defaults.nav),
+            root: cn('sprout-calendar-root', defaults.root),
+            months: cn('sprout-calendar-months', defaults.months),
+            month: cn('sprout-calendar-month', defaults.month),
+            nav: cn('sprout-calendar-nav', defaults.nav),
             button_previous: cn(navButton, defaults.button_previous),
             button_next: cn(navButton, defaults.button_next),
-            month_caption: cn("sprout-calendar-caption", defaults.month_caption),
-            dropdowns: cn("sprout-calendar-dropdowns", defaults.dropdowns),
-            dropdown_root: cn("sprout-calendar-dropdown-root", defaults.dropdown_root),
+            month_caption: cn('sprout-calendar-caption', defaults.month_caption),
+            dropdowns: cn('sprout-calendar-dropdowns', defaults.dropdowns),
+            dropdown_root: cn('sprout-calendar-dropdown-root', defaults.dropdown_root),
             dropdown: cn(defaults.dropdown),
-            caption_label: cn("sprout-calendar-caption-label", defaults.caption_label),
-            month_grid: cn("sprout-calendar-grid", defaults.month_grid),
-            weekdays: cn("sprout-calendar-weekdays", defaults.weekdays),
-            weekday: cn("sprout-calendar-weekday", defaults.weekday),
-            week: cn("sprout-calendar-week", defaults.week),
-            week_number_header: cn("sprout-calendar-week-number-header", defaults.week_number_header),
-            week_number: cn("sprout-calendar-week-number", defaults.week_number),
-            day: cn("sprout-calendar-day", defaults.day),
-            range_start: cn("sprout-calendar-range-start", defaults.range_start),
-            range_middle: cn("sprout-calendar-range-middle", defaults.range_middle),
-            range_end: cn("sprout-calendar-range-end", defaults.range_end),
-            today: cn("sprout-calendar-today", defaults.today),
-            outside: cn("sprout-calendar-outside", defaults.outside),
-            disabled: cn("sprout-calendar-disabled", defaults.disabled),
-            hidden: cn("sprout-calendar-hidden", defaults.hidden),
+            caption_label: cn('sprout-calendar-caption-label', defaults.caption_label),
+            month_grid: cn('sprout-calendar-grid', defaults.month_grid),
+            weekdays: cn('sprout-calendar-weekdays', defaults.weekdays),
+            weekday: cn('sprout-calendar-weekday', defaults.weekday),
+            week: cn('sprout-calendar-week', defaults.week),
+            week_number_header: cn('sprout-calendar-week-number-header', defaults.week_number_header),
+            week_number: cn('sprout-calendar-week-number', defaults.week_number),
+            day: cn('sprout-calendar-day', defaults.day),
+            range_start: cn('sprout-calendar-range-start', defaults.range_start),
+            range_middle: cn('sprout-calendar-range-middle', defaults.range_middle),
+            range_end: cn('sprout-calendar-range-end', defaults.range_end),
+            today: cn('sprout-calendar-today', defaults.today),
+            outside: cn('sprout-calendar-outside', defaults.outside),
+            disabled: cn('sprout-calendar-disabled', defaults.disabled),
+            hidden: cn('sprout-calendar-hidden', defaults.hidden),
             ...classNames,
         }, components: {
             Root: CalendarRoot,
@@ -103,5 +94,5 @@ export function CalendarDayButton({ className, day, modifiers, locale, ...props
             ref.current?.focus();
     }, [modifiers.focused]);
     const range = modifiers.range_start || modifiers.range_end || modifiers.range_middle;
-    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-slot": "calendar-day-button", "data-day": day.date.toLocaleDateString((locale ?? calendarLocale)?.code), "data-selected-single": Boolean(modifiers.selected && !range), "data-range-start": Boolean(modifiers.range_start), "data-range-end": Boolean(modifiers.range_end), "data-range-middle": Boolean(modifiers.range_middle), className: cn("sprout-calendar-day-button", getDefaultClassNames().day_button, className), ...props }));
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-slot": "calendar-day-button", "data-day": day.date.toLocaleDateString((locale ?? calendarLocale)?.code), "data-selected-single": Boolean(modifiers.selected && !range), "data-range-start": Boolean(modifiers.range_start), "data-range-end": Boolean(modifiers.range_end), "data-range-middle": Boolean(modifiers.range_middle), className: cn('sprout-calendar-day-button', getDefaultClassNames().day_button, className), ...props }));
 }

package/dist/components/canvas.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType, type ReactNode } from "react";
+import { type ComponentType, type ReactNode } from 'react';
 /** Below this split width (px), the canvas opens as a full-screen sheet. */
 export declare const canvasSplitMinWidth = 720;
 export interface CanvasTab {
@@ -25,7 +25,7 @@ export interface ChatSplitProps {
  * sheet. The canvas moves between both without remounting, so drafts,
  * reviews, and scroll survive.
  */
-export declare function ChatSplit({ open, onOpenChange, chat, canvas, layoutId, className, }: ChatSplitProps): import("react").JSX.Element;
+export declare function ChatSplit({ open, onOpenChange, chat, canvas, layoutId, className }: ChatSplitProps): import("react").JSX.Element;
 export interface CanvasPanelProps {
     /** Open results. With none, the header reads “Canvas”. */
     tabs: readonly CanvasTab[];
@@ -53,7 +53,7 @@ export interface CanvasToggleProps {
     className?: string | undefined;
 }
 /** A header button that shows or hides the canvas. */
-export declare function CanvasToggle({ open, count, onToggle, className, }: CanvasToggleProps): import("react").JSX.Element;
+export declare function CanvasToggle({ open, count, onToggle, className }: CanvasToggleProps): import("react").JSX.Element;
 export interface CanvasSectionProps {
     title?: string | undefined;
     /** A short line under the title, such as a row count, source, or URL. */
@@ -64,7 +64,7 @@ export interface CanvasSectionProps {
     className?: string | undefined;
 }
 /** Padded content for one result, with an optional title, meta, and actions. */
-export declare function CanvasSection({ title, meta, actions, children, className, }: CanvasSectionProps): import("react").JSX.Element;
+export declare function CanvasSection({ title, meta, actions, children, className }: CanvasSectionProps): import("react").JSX.Element;
 export interface CanvasFrameProps {
     src: string;
     /** Names the frame for assistive tech, such as the page title. */

package/dist/components/canvas.js

@@ -1,23 +1,23 @@
-"use client";
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
-import { createPortal } from "react-dom";
-import { ArrowLeft } from "reicon-react/icons/ArrowLeft";
-import { SidebarRight } from "reicon-react/icons/SidebarRight";
-import { X } from "reicon-react/icons/X";
-import { cn } from "../internal/classes.js";
-import { Button } from "./button.js";
-import { Spinner } from "./spinner.js";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup, useResizableLayout, } from "./resizable.js";
-import { Sheet, SheetContent, SheetDescription, SheetTitle } from "./sheet.js";
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from 'react';
+import { createPortal } from 'react-dom';
+import { ArrowLeft } from 'reicon-react/icons/ArrowLeft';
+import { SidebarRight } from 'reicon-react/icons/SidebarRight';
+import { X } from 'reicon-react/icons/X';
+import { cn } from '../internal/classes.js';
+import { Button } from './button.js';
+import { Spinner } from './spinner.js';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup, useResizableLayout } from './resizable.js';
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from './sheet.js';
 /** Below this split width (px), the canvas opens as a full-screen sheet. */
 export const canvasSplitMinWidth = 720;
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-const mobileQuery = "(max-width: 767px)";
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const mobileQuery = '(max-width: 767px)';
 function subscribeMobile(callback) {
     const media = window.matchMedia(mobileQuery);
-    media.addEventListener("change", callback);
-    return () => media.removeEventListener("change", callback);
+    media.addEventListener('change', callback);
+    return () => media.removeEventListener('change', callback);
 }
 function useViewportMobile() {
     return useSyncExternalStore(subscribeMobile, () => window.matchMedia(mobileQuery).matches, () => false);
@@ -29,12 +29,11 @@ const CanvasNarrowContext = createContext(null);
  * sheet. The canvas moves between both without remounting, so drafts,
  * reviews, and scroll survive.
  */
-export function ChatSplit({ open, onOpenChange, chat, canvas, layoutId = "chat-canvas", className, }) {
+export function ChatSplit({ open, onOpenChange, chat, canvas, layoutId = 'chat-canvas', className }) {
     const viewportMobile = useViewportMobile();
     const container = useRef(null);
     const [availableWidth, setAvailableWidth] = useState(null);
-    const mobile = viewportMobile ||
-        (availableWidth !== null && availableWidth < canvasSplitMinWidth);
+    const mobile = viewportMobile || (availableWidth !== null && availableWidth < canvasSplitMinWidth);
     const split = open && !mobile;
     useIsomorphicLayoutEffect(() => {
         const element = container.current;
@@ -48,15 +47,15 @@ export function ChatSplit({ open, onOpenChange, chat, canvas, layoutId = "chat-c
     }, []);
     const layout = useResizableLayout({
         id: layoutId,
-        panelIds: split ? ["chat", "canvas"] : ["chat"],
+        panelIds: split ? ['chat', 'canvas'] : ['chat'],
         onlySaveAfterUserInteractions: true,
     });
     const [desktopHost, setDesktopHost] = useState(null);
     const [mobileHost, setMobileHost] = useState(null);
     const [target, setTarget] = useState(null);
     useIsomorphicLayoutEffect(() => {
-        const element = document.createElement("div");
-        element.className = "sprout-canvas-host";
+        const element = document.createElement('div');
+        element.className = 'sprout-canvas-host';
         setTarget(element);
     }, []);
     useIsomorphicLayoutEffect(() => {
@@ -65,7 +64,7 @@ export function ChatSplit({ open, onOpenChange, chat, canvas, layoutId = "chat-c
         (mobile ? mobileHost : desktopHost)?.append(target);
         return () => target.remove();
     }, [mobile, open, target, mobileHost, desktopHost]);
-    return (_jsx(CanvasNarrowContext, { value: mobile, children: _jsxs("div", { ref: container, "data-slot": "chat-split", "data-layout": mobile ? "sheet" : "split", "data-open": open ? "" : undefined, className: cn("sprout-chat-split", className), children: [target && createPortal(canvas, target), _jsxs(ResizablePanelGroup, { orientation: "horizontal", defaultLayout: layout.defaultLayout, onLayoutChanged: layout.onLayoutChanged, children: [_jsx(ResizablePanel, { id: "chat", minSize: "40%", defaultSize: split ? "55%" : "100%", children: _jsx("div", { className: "sprout-chat-split-pane", children: chat }) }), split && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true, "aria-label": "Resize canvas" }), _jsx(ResizablePanel, { id: "canvas", minSize: "320px", defaultSize: "45%", children: _jsx("div", { ref: setDesktopHost, className: "sprout-chat-split-pane" }) })] }))] }), _jsx(Sheet, { open: open && mobile, onOpenChange: (next) => onOpenChange(next), children: _jsxs(SheetContent, { side: "right", size: "full", showCloseButton: false, keepMounted: true, finalFocus: !open, className: "sprout-canvas-sheet", children: [_jsxs("div", { className: "sprout-canvas-sr-only", children: [_jsx(SheetTitle, { children: "Canvas" }), _jsx(SheetDescription, { children: "Detailed result. Return to chat to continue the conversation." })] }), _jsx("div", { ref: setMobileHost, className: "sprout-chat-split-pane" })] }) })] }) }));
+    return (_jsx(CanvasNarrowContext, { value: mobile, children: _jsxs("div", { ref: container, "data-slot": "chat-split", "data-layout": mobile ? 'sheet' : 'split', "data-open": open ? '' : undefined, className: cn('sprout-chat-split', className), children: [target && createPortal(canvas, target), _jsxs(ResizablePanelGroup, { orientation: "horizontal", defaultLayout: layout.defaultLayout, onLayoutChanged: layout.onLayoutChanged, children: [_jsx(ResizablePanel, { id: "chat", minSize: "40%", defaultSize: split ? '55%' : '100%', children: _jsx("div", { className: "sprout-chat-split-pane", children: chat }) }), split && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true, "aria-label": "Resize canvas" }), _jsx(ResizablePanel, { id: "canvas", minSize: "320px", defaultSize: "45%", children: _jsx("div", { ref: setDesktopHost, className: "sprout-chat-split-pane" }) })] }))] }), _jsx(Sheet, { open: open && mobile, onOpenChange: next => onOpenChange(next), children: _jsxs(SheetContent, { side: "right", size: "full", showCloseButton: false, keepMounted: true, finalFocus: !open, className: "sprout-canvas-sheet", children: [_jsxs("div", { className: "sprout-canvas-sr-only", children: [_jsx(SheetTitle, { children: "Canvas" }), _jsx(SheetDescription, { children: "Detailed result. Return to chat to continue the conversation." })] }), _jsx("div", { ref: setMobileHost, className: "sprout-chat-split-pane" })] }) })] }) }));
 }
 /**
  * The canvas surface: a tab per open result, a close button, and the active
@@ -83,7 +82,7 @@ export function CanvasPanel({ tabs, activeId, onSelect, onCloseTab, onClose, chi
     const heading = useRef(null);
     const refocus = useRef(null);
     const [hovered, setHovered] = useState(null);
-    const activeIndex = tabs.findIndex((tab) => tab.id === activeId);
+    const activeIndex = tabs.findIndex(tab => tab.id === activeId);
     const tabId = (index) => `${base}-tab-${index}`;
     const bodyId = `${base}-body`;
     useEffect(() => {
@@ -104,9 +103,7 @@ export function CanvasPanel({ tabs, activeId, onSelect, onCloseTab, onClose, chi
             return;
         refocus.current = null;
         const next = tabs[Math.min(index, tabs.length - 1)];
-        const target = (next && tabButtons.current.get(next.id)) ??
-            closeButton.current ??
-            heading.current;
+        const target = (next && tabButtons.current.get(next.id)) ?? closeButton.current ?? heading.current;
         target?.focus();
     }, [tabs]);
     const closeTab = (index) => {
@@ -117,18 +114,18 @@ export function CanvasPanel({ tabs, activeId, onSelect, onCloseTab, onClose, chi
         onCloseTab(tab.id);
     };
     const onTabKeyDown = (event, index) => {
-        if (event.key === "Delete") {
+        if (event.key === 'Delete') {
             event.preventDefault();
             closeTab(index);
             return;
         }
-        const next = event.key === "ArrowRight"
+        const next = event.key === 'ArrowRight'
             ? index + 1
-            : event.key === "ArrowLeft"
+            : event.key === 'ArrowLeft'
                 ? index - 1
-                : event.key === "Home"
+                : event.key === 'Home'
                     ? 0
-                    : event.key === "End"
+                    : event.key === 'End'
                         ? tabs.length - 1
                         : null;
         if (next === null || tabs.length === 0)
@@ -140,41 +137,37 @@ export function CanvasPanel({ tabs, activeId, onSelect, onCloseTab, onClose, chi
         onSelect(target.id);
         tabButtons.current.get(target.id)?.focus();
     };
-    return (_jsxs("section", { "data-slot": "canvas", "data-layout": mobile ? "sheet" : "split", "aria-label": "Canvas", className: cn("sprout-canvas", className), onKeyDown: (event) => {
-            if (event.key === "Escape" && !event.defaultPrevented) {
+    return (_jsxs("section", { "data-slot": "canvas", "data-layout": mobile ? 'sheet' : 'split', "aria-label": "Canvas", className: cn('sprout-canvas', className), onKeyDown: event => {
+            if (event.key === 'Escape' && !event.defaultPrevented) {
                 event.preventDefault();
                 onClose();
             }
         }, children: [mobile && (_jsx("div", { className: "sprout-canvas-back", children: _jsxs(Button, { variant: "ghost", size: "sm", onClick: onClose, children: [_jsx(ArrowLeft, { size: 16, "aria-hidden": "true" }), "Back to chat"] }) })), _jsxs("header", { className: "sprout-canvas-header", children: [tabs.length === 0 ? (_jsx("h2", { ref: heading, tabIndex: -1, className: "sprout-canvas-heading", children: "Canvas" })) : (_jsxs("div", { ref: list, className: "sprout-canvas-tabs", children: [_jsx("div", { role: "tablist", "aria-label": "Open in canvas", className: "sprout-canvas-tablist", children: tabs.map((tab, index) => {
                                     const active = index === activeIndex;
                                     const Icon = tab.icon;
-                                    return (_jsxs("button", { type: "button", role: "tab", id: tabId(index), ref: (node) => {
+                                    return (_jsxs("button", { type: "button", role: "tab", id: tabId(index), ref: node => {
                                             if (node)
                                                 tabButtons.current.set(tab.id, node);
                                             else
                                                 tabButtons.current.delete(tab.id);
-                                        }, "data-slot": "canvas-tab", "data-active": active ? "" : undefined, "data-busy": tab.busy ? "" : undefined, "data-hover": hovered === tab.id ? "" : undefined, "aria-label": tab.busy ? `${tab.title}, loading` : undefined, "aria-selected": active, "aria-controls": bodyId, tabIndex: active || (activeIndex === -1 && index === 0) ? 0 : -1, style: { order: index * 2 }, onClick: () => onSelect(tab.id), onKeyDown: (event) => onTabKeyDown(event, index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab", children: [tab.busy ? (_jsx(Spinner, { size: "sm", "aria-hidden": "true" })) : (Icon && (_jsx("span", { "aria-hidden": "true", className: "sprout-canvas-tab-icon", children: _jsx(Icon, { size: 14 }) }))), _jsx("span", { className: "sprout-canvas-tab-title", children: tab.title })] }, tab.id));
+                                        }, "data-slot": "canvas-tab", "data-active": active ? '' : undefined, "data-busy": tab.busy ? '' : undefined, "data-hover": hovered === tab.id ? '' : undefined, "aria-label": tab.busy ? `${tab.title}, loading` : undefined, "aria-selected": active, "aria-controls": bodyId, tabIndex: active || (activeIndex === -1 && index === 0) ? 0 : -1, style: { order: index * 2 }, onClick: () => onSelect(tab.id), onKeyDown: event => onTabKeyDown(event, index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab", children: [tab.busy ? (_jsx(Spinner, { size: "sm", "aria-hidden": "true" })) : (Icon && (_jsx("span", { "aria-hidden": "true", className: "sprout-canvas-tab-icon", children: _jsx(Icon, { size: 14 }) }))), _jsx("span", { className: "sprout-canvas-tab-title", children: tab.title })] }, tab.id));
                                 }) }), tabs.map((tab, index) => {
                                 const active = index === activeIndex;
-                                return (_jsx("button", { type: "button", "aria-label": `Close ${tab.title}`, "data-active": active ? "" : undefined, "data-hover": hovered === tab.id ? "" : undefined, tabIndex: active ? 0 : -1, style: { order: index * 2 + 1 }, onClick: () => closeTab(index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab-close", children: _jsx(X, { size: 12, "aria-hidden": "true" }) }, tab.id));
-                            })] })), !mobile && (_jsx(Button, { ref: closeButton, variant: "ghost", size: "icon-sm", "aria-label": "Close canvas", title: "Close canvas (Esc)", onClick: onClose, children: _jsx(X, { size: 16, "aria-hidden": "true" }) }))] }), activity, _jsx("div", { id: bodyId, role: tabs.length ? "tabpanel" : undefined, "aria-labelledby": activeIndex === -1 ? undefined : tabId(activeIndex), tabIndex: tabs.length ? 0 : undefined, className: "sprout-canvas-body", children: children })] }));
+                                return (_jsx("button", { type: "button", "aria-label": `Close ${tab.title}`, "data-active": active ? '' : undefined, "data-hover": hovered === tab.id ? '' : undefined, tabIndex: active ? 0 : -1, style: { order: index * 2 + 1 }, onClick: () => closeTab(index), onPointerEnter: () => setHovered(tab.id), onPointerLeave: () => setHovered(null), className: "sprout-canvas-tab-close", children: _jsx(X, { size: 12, "aria-hidden": "true" }) }, tab.id));
+                            })] })), !mobile && (_jsx(Button, { ref: closeButton, variant: "ghost", size: "icon-sm", "aria-label": "Close canvas", title: "Close canvas (Esc)", onClick: onClose, children: _jsx(X, { size: 16, "aria-hidden": "true" }) }))] }), activity, _jsx("div", { id: bodyId, role: tabs.length ? 'tabpanel' : undefined, "aria-labelledby": activeIndex === -1 ? undefined : tabId(activeIndex), tabIndex: tabs.length ? 0 : undefined, className: "sprout-canvas-body", children: children })] }));
 }
 /** A header button that shows or hides the canvas. */
-export function CanvasToggle({ open, count, onToggle, className, }) {
-    return (_jsxs(Button, { variant: "ghost", size: "sm", "data-slot": "canvas-toggle", "aria-pressed": open, "aria-label": open
-            ? "Hide canvas"
-            : count
-                ? `Show canvas, ${count} open`
-                : "Show canvas", title: "Open detailed results without leaving your chat", onClick: onToggle, className: cn("sprout-canvas-toggle", className), children: [_jsx(SidebarRight, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sprout-canvas-toggle-label", children: open ? "Hide results" : "View results" }), count > 0 && (_jsx("span", { "aria-hidden": "true", className: "sprout-canvas-toggle-count", children: count }))] }));
+export function CanvasToggle({ open, count, onToggle, className }) {
+    return (_jsxs(Button, { variant: "ghost", size: "sm", "data-slot": "canvas-toggle", "aria-pressed": open, "aria-label": open ? 'Hide canvas' : count ? `Show canvas, ${count} open` : 'Show canvas', title: "Open detailed results without leaving your chat", onClick: onToggle, className: cn('sprout-canvas-toggle', className), children: [_jsx(SidebarRight, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sprout-canvas-toggle-label", children: open ? 'Hide results' : 'View results' }), count > 0 && (_jsx("span", { "aria-hidden": "true", className: "sprout-canvas-toggle-count", children: count }))] }));
 }
 /** Padded content for one result, with an optional title, meta, and actions. */
-export function CanvasSection({ title, meta, actions, children, className, }) {
-    return (_jsxs("div", { "data-slot": "canvas-section", className: cn("sprout-canvas-section", className), children: [(title || actions) && (_jsxs("div", { className: "sprout-canvas-section-header", children: [_jsxs("div", { className: "sprout-canvas-section-text", children: [title && _jsx("h3", { className: "sprout-canvas-section-title", children: title }), meta && _jsx("p", { className: "sprout-canvas-section-meta", children: meta })] }), actions && (_jsx("div", { className: "sprout-canvas-section-actions", children: actions }))] })), children] }));
+export function CanvasSection({ title, meta, actions, children, className }) {
+    return (_jsxs("div", { "data-slot": "canvas-section", className: cn('sprout-canvas-section', className), children: [(title || actions) && (_jsxs("div", { className: "sprout-canvas-section-header", children: [_jsxs("div", { className: "sprout-canvas-section-text", children: [title && _jsx("h3", { className: "sprout-canvas-section-title", children: title }), meta && _jsx("p", { className: "sprout-canvas-section-meta", children: meta })] }), actions && _jsx("div", { className: "sprout-canvas-section-actions", children: actions })] })), children] }));
 }
 /**
  * A sandboxed page preview. Scripts and popups run; same-origin access,
  * forms, and top navigation are blocked, and no referrer is sent.
  */
 export function CanvasFrame({ src, title, className }) {
-    return (_jsx("div", { "data-slot": "canvas-frame", className: cn("sprout-canvas-frame", className), children: _jsx("iframe", { src: src, title: title, sandbox: "allow-scripts allow-popups", referrerPolicy: "no-referrer", loading: "lazy" }) }));
+    return (_jsx("div", { "data-slot": "canvas-frame", className: cn('sprout-canvas-frame', className), children: _jsx("iframe", { src: src, title: title, sandbox: "allow-scripts allow-popups", referrerPolicy: "no-referrer", loading: "lazy" }) }));
 }

package/dist/components/card.d.ts

@@ -1,4 +1,4 @@
-import { useRender } from "@base-ui/react/use-render";
+import { useRender } from '@base-ui/react/use-render';
 export declare const cardSizeNames: readonly ["default", "sm"];
 export declare const cardSurfaceNames: readonly ["default", "raised"];
 export type CardSize = (typeof cardSizeNames)[number];
@@ -8,13 +8,13 @@ export interface CardVariantOptions {
     surface?: CardSurface | null;
     className?: string;
 }
-export declare function cardVariants({ size, surface, className, }?: CardVariantOptions): string;
+export declare function cardVariants({ size, surface, className }?: CardVariantOptions): string;
 export interface CardState extends Record<string, unknown> {
-    slot: "card";
+    slot: 'card';
     size: CardSize;
     surface: CardSurface;
 }
-export interface CardProps extends useRender.ComponentProps<"div", CardState> {
+export interface CardProps extends useRender.ComponentProps<'div', CardState> {
     /** `sm` tightens padding and gaps from 16px to 12px and shrinks the title. */
     size?: CardSize;
     /** `raised` lifts the card off a surface of the same color. */
@@ -25,11 +25,11 @@ export interface CardProps extends useRender.ComponentProps<"div", CardState> {
  * `CardHeader`, `CardContent`, and `CardFooter`.
  */
 export declare function Card({ className, size, surface, render, ref, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type PartSlot = "card-header" | "card-title" | "card-description" | "card-action" | "card-content" | "card-footer";
+type PartSlot = 'card-header' | 'card-title' | 'card-description' | 'card-action' | 'card-content' | 'card-footer';
 export interface CardPartState extends Record<string, unknown> {
     slot: PartSlot;
 }
-export type CardPartProps = useRender.ComponentProps<"div", CardPartState>;
+export type CardPartProps = useRender.ComponentProps<'div', CardPartState>;
 /** Lays out the title, description, and an optional `CardAction`. */
 export declare const CardHeader: ({ className, render, ref, ...props }: CardPartProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /** A `div` by default. Pass `render={<h3 />}` to put it in the outline. */

package/dist/components/card.js

@@ -1,28 +1,28 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { cn } from "../internal/classes.js";
-export const cardSizeNames = ["default", "sm"];
-export const cardSurfaceNames = ["default", "raised"];
-export function cardVariants({ size, surface, className, } = {}) {
-    return cn("sprout-card", size === "sm" && "sprout-card-sm", surface === "raised" && "sprout-card-raised", className);
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { cn } from '../internal/classes.js';
+export const cardSizeNames = ['default', 'sm'];
+export const cardSurfaceNames = ['default', 'raised'];
+export function cardVariants({ size, surface, className } = {}) {
+    return cn('sprout-card', size === 'sm' && 'sprout-card-sm', surface === 'raised' && 'sprout-card-raised', className);
 }
 /**
  * A bordered panel that groups related content. Compose it with
  * `CardHeader`, `CardContent`, and `CardFooter`.
  */
-export function Card({ className, size = "default", surface = "default", render, ref, ...props }) {
+export function Card({ className, size = 'default', surface = 'default', render, ref, ...props }) {
     return useRender({
-        defaultTagName: "div",
+        defaultTagName: 'div',
         ref,
         render,
         props: mergeProps({ className: cardVariants({ size, surface, className }) }, props),
-        state: { slot: "card", size, surface },
+        state: { slot: 'card', size, surface },
     });
 }
 function part(slot, base) {
     return function CardPart({ className, render, ref, ...props }) {
         return useRender({
-            defaultTagName: "div",
+            defaultTagName: 'div',
             ref,
             render,
             props: mergeProps({ className: cn(base, className) }, props),
@@ -31,12 +31,12 @@ function part(slot, base) {
     };
 }
 /** Lays out the title, description, and an optional `CardAction`. */
-export const CardHeader = part("card-header", "sprout-card-header");
+export const CardHeader = part('card-header', 'sprout-card-header');
 /** A `div` by default. Pass `render={<h3 />}` to put it in the outline. */
-export const CardTitle = part("card-title", "sprout-card-title");
-export const CardDescription = part("card-description", "sprout-card-description");
+export const CardTitle = part('card-title', 'sprout-card-title');
+export const CardDescription = part('card-description', 'sprout-card-description');
 /** Pins a badge or compact control to the header's top-right corner. */
-export const CardAction = part("card-action", "sprout-card-action");
-export const CardContent = part("card-content", "sprout-card-content");
+export const CardAction = part('card-action', 'sprout-card-action');
+export const CardContent = part('card-content', 'sprout-card-content');
 /** A tinted bar along the bottom edge for actions and status. */
-export const CardFooter = part("card-footer", "sprout-card-footer");
+export const CardFooter = part('card-footer', 'sprout-card-footer');

package/dist/components/carousel.d.ts

@@ -1,10 +1,10 @@
-import { type ComponentProps, type RefCallback } from "react";
-import { type ButtonProps } from "./button.js";
+import { type ComponentProps, type RefCallback } from 'react';
+import { type ButtonProps } from './button.js';
 export declare const carouselOrientationNames: readonly ["horizontal", "vertical"];
 export declare const carouselAlignNames: readonly ["start", "center", "end"];
 export type CarouselOrientation = (typeof carouselOrientationNames)[number];
 export type CarouselAlign = (typeof carouselAlignNames)[number];
-export type CarouselEvent = "select" | "reInit";
+export type CarouselEvent = 'select' | 'reInit';
 export interface CarouselOptions {
     /** Where a slide lands in the viewport when it is the current one. Default `start`. */
     align?: CarouselAlign | undefined;
@@ -28,7 +28,7 @@ export interface CarouselApi {
     on(event: CarouselEvent, listener: (api: CarouselApi) => void): CarouselApi;
     off(event: CarouselEvent, listener: (api: CarouselApi) => void): CarouselApi;
 }
-export interface CarouselProps extends ComponentProps<"div"> {
+export interface CarouselProps extends ComponentProps<'div'> {
     opts?: CarouselOptions | undefined;
     orientation?: CarouselOrientation | undefined;
     /** Receives the carousel API once it mounts. */
@@ -50,8 +50,8 @@ export interface CarouselContextValue {
 }
 export declare function useCarousel(): CarouselContextValue;
 export declare function Carousel({ orientation, opts, setApi, className, children, onKeyDownCapture, ...props }: CarouselProps): import("react").JSX.Element;
-export declare function CarouselContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
-export declare function CarouselItem({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
-export type CarouselButtonProps = Omit<ButtonProps, "state" | "pendingLabel">;
+export declare function CarouselContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function CarouselItem({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export type CarouselButtonProps = Omit<ButtonProps, 'state' | 'pendingLabel'>;
 export declare function CarouselPrevious({ className, variant, size, children, ...props }: CarouselButtonProps): import("react").JSX.Element;
 export declare function CarouselNext({ className, variant, size, children, ...props }: CarouselButtonProps): import("react").JSX.Element;