@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/view-switcher.js

@@ -0,0 +1,114 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { useEffect, useId, useLayoutEffect, useRef, } from 'react';
+import { Check } from 'reicon-react/icons/Check';
+import { Plus } from 'reicon-react/icons/Plus';
+import { X } from 'reicon-react/icons/X';
+import { cn } from '../internal/classes.js';
+import { Button } from './button.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown-menu.js';
+import { Tabs, TabsList, TabsTrigger } from './tabs.js';
+/** The `id` of a view's tab, for the panel's `aria-labelledby`. Needs the same `panelId` as the switcher. */
+export function viewSwitcherTabId(panelId, viewId) {
+    return `${panelId}-tab-${viewId}`;
+}
+const fade = 24;
+/**
+ * The bar of a table's open views, with an "Add view" menu. It is fully
+ * controlled: the app owns which views exist, are open, or can close.
+ */
+export function ViewSwitcher({ views, value, onValueChange, options, onAdd, onClose, label = 'Views', addLabel = 'Add view', actions, panelId, className, }) {
+    const baseId = useId();
+    const listRef = useRef(null);
+    const tabs = useRef(new Map());
+    const pendingFocus = useRef(null);
+    const open = new Set(views.map(view => view.id));
+    const tabId = (id) => (panelId ? viewSwitcherTabId(panelId, id) : `${baseId}-tab-${id}`);
+    function close(index) {
+        const view = views[index];
+        if (!view || !view.closable || !onClose)
+            return;
+        const tab = tabs.current.get(view.id);
+        if (tab && tab === document.activeElement) {
+            pendingFocus.current = { closed: view.id, neighbour: (views[index + 1] ?? views[index - 1])?.id };
+        }
+        onClose(view.id);
+    }
+    function onTabKeyDown(event, index) {
+        if (event.key !== 'Delete' && event.key !== 'Backspace')
+            return;
+        event.preventDefault();
+        close(index);
+    }
+    useLayoutEffect(() => {
+        const pending = pendingFocus.current;
+        if (!pending || open.has(pending.closed))
+            return;
+        pendingFocus.current = null;
+        const target = value !== pending.closed && open.has(value) ? value : pending.neighbour;
+        if (target)
+            tabs.current.get(target)?.focus();
+    }, [views, value]);
+    useLayoutEffect(() => {
+        const list = listRef.current;
+        const tab = tabs.current.get(value);
+        if (!list || !tab || list.scrollWidth <= list.clientWidth)
+            return;
+        const bounds = list.getBoundingClientRect();
+        const rect = tab.getBoundingClientRect();
+        if (rect.left < bounds.left + fade)
+            list.scrollLeft -= bounds.left + fade - rect.left;
+        else if (rect.right > bounds.right - fade)
+            list.scrollLeft += rect.right - (bounds.right - fade);
+    }, [value, views]);
+    useEffect(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const update = () => {
+            const scrolled = Math.abs(list.scrollLeft);
+            const max = list.scrollWidth - list.clientWidth;
+            list.toggleAttribute('data-overflow-start', scrolled > 1);
+            list.toggleAttribute('data-overflow-end', max - scrolled > 1);
+        };
+        update();
+        list.addEventListener('scroll', update, { passive: true });
+        const observer = new ResizeObserver(update);
+        observer.observe(list);
+        for (const child of list.children)
+            observer.observe(child);
+        return () => {
+            list.removeEventListener('scroll', update);
+            observer.disconnect();
+        };
+    }, [views]);
+    return (_jsxs("div", { "data-slot": "view-switcher", className: cn('sprout-view-switcher', className), children: [_jsx(Tabs, { className: "sprout-view-switcher-tabs", value: open.has(value) ? value : null, onValueChange: next => {
+                    if (typeof next === 'string')
+                        onValueChange(next);
+                }, children: _jsxs(TabsList, { ref: listRef, variant: "line", activateOnFocus: true, loopFocus: false, "aria-label": label, className: "sprout-view-switcher-list", children: [views.map((view, index) => {
+                            const Icon = view.icon;
+                            const closable = Boolean(view.closable && onClose);
+                            return (_jsxs(TabsTrigger, { value: view.id, id: tabId(view.id), ref: (node) => {
+                                    if (node)
+                                        tabs.current.set(view.id, node);
+                                    else
+                                        tabs.current.delete(view.id);
+                                }, className: "sprout-view-switcher-tab", "data-closable": closable || undefined, "aria-keyshortcuts": closable ? 'Delete' : undefined, ...(panelId ? { 'aria-controls': panelId } : {}), onKeyDown: event => onTabKeyDown(event, index), children: [_jsx("span", { className: "sprout-view-switcher-icon", "aria-hidden": "true", children: _jsx(Icon, { size: 14 }) }), _jsx("span", { className: "sprout-view-switcher-label", children: view.label }), closable && (_jsx("span", { "aria-hidden": "true", title: `Close ${view.label}`, "data-slot": "view-switcher-close", className: "sprout-view-switcher-close", onPointerDown: event => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                        }, onMouseDown: event => event.preventDefault(), onClick: event => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            close(index);
+                                        }, children: _jsx(X, { size: 12 }) }))] }, view.id));
+                        }), _jsx(BaseTabs.Indicator, { className: "sprout-view-switcher-indicator" })] }) }), options && (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "sm", className: "sprout-view-switcher-add" }), "data-slot": "view-switcher-add", children: [_jsx(Plus, { size: 14, "aria-hidden": "true", "data-icon": "inline-start" }), _jsx("span", { className: "sprout-view-switcher-add-label", children: addLabel })] }), _jsx(DropdownMenuContent, { align: "start", size: "menu", className: "sprout-view-switcher-menu", children: _jsx("div", { className: "sprout-view-switcher-options", children: options.map(option => (_jsx(ViewOption, { option: option, baseId: baseId, isOpen: open.has(option.id), onSelect: () => onAdd?.(option.id) }, option.id))) }) })] })), actions != null && actions !== false && (_jsx("div", { "data-slot": "view-switcher-actions", className: "sprout-view-switcher-actions", children: actions }))] }));
+}
+function ViewOption({ option, baseId, isOpen, onSelect, }) {
+    const Icon = option.icon;
+    const unavailable = Boolean(option.unavailable);
+    const titleId = `${baseId}-option-${option.id}-title`;
+    const noteId = `${baseId}-option-${option.id}-note`;
+    const openId = `${baseId}-option-${option.id}-open`;
+    return (_jsxs(DropdownMenuItem, { "data-slot": "view-switcher-option", className: "sprout-view-switcher-option", disabled: unavailable, "data-open": isOpen || undefined, "aria-labelledby": titleId, "aria-describedby": isOpen ? `${openId} ${noteId}` : noteId, onClick: unavailable ? undefined : onSelect, children: [_jsx("span", { className: "sprout-view-switcher-tile", "aria-hidden": "true", children: _jsx(Icon, { size: 16 }) }), _jsxs("span", { className: "sprout-view-switcher-option-text", children: [_jsx("span", { id: titleId, className: "sprout-view-switcher-option-title", children: option.label }), _jsx("span", { id: noteId, className: "sprout-view-switcher-option-note", "data-kind": unavailable ? 'unavailable' : 'description', children: option.unavailable || option.description })] }), isOpen && (_jsxs("span", { className: "sprout-view-switcher-check", children: [_jsx(Check, { size: 16, "aria-hidden": "true" }), _jsx("span", { id: openId, className: "sprout-view-switcher-sr-only", children: "Already open." })] }))] }));
+}

package/dist/index.d.ts

@@ -1,93 +1,98 @@
-export * from "./components/accordion.js";
-export * from "./components/agent-fanout.js";
-export * from "./components/alert.js";
-export * from "./components/alert-dialog.js";
-export * from "./components/aspect-ratio.js";
-export * from "./components/attachment.js";
-export * from "./components/avatar.js";
-export * from "./components/badge.js";
-export * from "./components/brand-icon.js";
-export * from "./components/breadcrumb.js";
-export * from "./components/button.js";
-export * from "./components/button-group.js";
-export * from "./components/calendar.js";
-export * from "./components/canvas.js";
-export * from "./components/card.js";
-export * from "./components/carousel.js";
-export * from "./components/chart.js";
-export * from "./components/chat-confirmation.js";
-export * from "./components/chat-input.js";
-export * from "./components/chat-plan.js";
-export * from "./components/chat-sources.js";
-export * from "./components/checkbox.js";
-export * from "./components/choice-list.js";
-export * from "./components/code-block.js";
-export * from "./components/collapsible.js";
-export * from "./components/combobox.js";
-export * from "./components/command.js";
-export * from "./components/context-menu.js";
-export * from "./components/dialog.js";
-export * from "./components/direction.js";
-export * from "./components/dropdown-menu.js";
-export * from "./components/field.js";
-export * from "./components/file-explorer.js";
-export * from "./components/file-viewer.js";
-export * from "./components/form.js";
-export * from "./components/glass-banner.js";
-export * from "./components/gradient-banner.js";
-export * from "./components/hover-card.js";
-export * from "./components/input.js";
-export * from "./components/input-group.js";
-export * from "./components/input-otp.js";
-export * from "./components/kbd.js";
-export * from "./components/label.js";
-export * from "./components/mention-list.js";
-export * from "./components/menubar.js";
-export * from "./components/message.js";
-export * from "./components/message-actions.js";
-export * from "./components/message-response.js";
-export * from "./components/message-scroller.js";
-export * from "./components/navigation-menu.js";
-export * from "./components/notice-banner.js";
-export * from "./components/page-content.js";
-export * from "./components/page-header.js";
-export * from "./components/pagination.js";
-export * from "./components/plan-outline.js";
-export * from "./components/popover.js";
-export * from "./components/presence-cursor.js";
-export * from "./components/progress.js";
-export * from "./components/prompt-list.js";
-export * from "./components/questionnaire.js";
-export * from "./components/radio-group.js";
-export * from "./components/reasoning-effort.js";
-export * from "./components/resizable.js";
-export * from "./components/result-card.js";
-export * from "./components/review-card.js";
-export * from "./components/rich-text-editor.js";
-export * from "./components/schema-diagram.js";
-export * from "./components/sql-viewer.js";
-export * from "./components/scroll-area.js";
-export * from "./components/search-dialog.js";
-export * from "./components/search-field.js";
-export * from "./components/select.js";
-export * from "./components/selection-slot.js";
-export * from "./components/separator.js";
-export * from "./components/settings-list.js";
-export * from "./components/sheet.js";
-export * from "./components/sidebar.js";
-export * from "./components/skeleton.js";
-export * from "./components/slider.js";
-export * from "./components/spinner.js";
-export * from "./components/state-panel.js";
-export * from "./components/state-sample.js";
-export * from "./components/switch.js";
-export * from "./components/table.js";
-export * from "./components/tabs.js";
-export * from "./components/textarea.js";
-export * from "./components/toast.js";
-export * from "./components/toggle.js";
-export * from "./components/toggle-group.js";
-export * from "./components/tool-activity.js";
-export * from "./components/toolbar-status.js";
-export * from "./components/tooltip.js";
-export * from "./components/typed-text.js";
+export * from './components/accordion.js';
+export * from './components/agent-fanout.js';
+export * from './components/alert.js';
+export * from './components/alert-dialog.js';
+export * from './components/aspect-ratio.js';
+export * from './components/attachment.js';
+export * from './components/avatar.js';
+export * from './components/badge.js';
+export * from './components/board.js';
+export * from './components/brand-icon.js';
+export * from './components/breadcrumb.js';
+export * from './components/button.js';
+export * from './components/button-group.js';
+export * from './components/calendar.js';
+export * from './components/canvas.js';
+export * from './components/card.js';
+export * from './components/carousel.js';
+export * from './components/chart.js';
+export * from './components/timeline.js';
+export * from './components/chat-confirmation.js';
+export * from './components/chat-input.js';
+export * from './components/chat-plan.js';
+export * from './components/chat-sources.js';
+export * from './components/checkbox.js';
+export * from './components/choice-list.js';
+export * from './components/code-block.js';
+export * from './components/collapsible.js';
+export * from './components/combobox.js';
+export * from './components/command.js';
+export * from './components/context-menu.js';
+export * from './components/dialog.js';
+export * from './components/direction.js';
+export * from './components/dropdown-menu.js';
+export * from './components/field.js';
+export * from './components/file-explorer.js';
+export * from './components/file-viewer.js';
+export * from './components/form.js';
+export * from './components/glass-banner.js';
+export * from './components/gradient-banner.js';
+export * from './components/hover-card.js';
+export * from './components/input.js';
+export * from './components/input-group.js';
+export * from './components/input-otp.js';
+export * from './components/kbd.js';
+export * from './components/label.js';
+export * from './components/mention-list.js';
+export * from './components/menubar.js';
+export * from './components/message.js';
+export * from './components/message-actions.js';
+export * from './components/message-response.js';
+export * from './components/message-scroller.js';
+export * from './components/navigation-menu.js';
+export * from './components/notice-banner.js';
+export * from './components/page-content.js';
+export * from './components/page-header.js';
+export * from './components/pagination.js';
+export * from './components/plan-outline.js';
+export * from './components/popover.js';
+export * from './components/presence-cursor.js';
+export * from './components/progress.js';
+export * from './components/prompt-list.js';
+export * from './components/questionnaire.js';
+export * from './components/radio-group.js';
+export * from './components/reasoning-effort.js';
+export * from './components/record-list.js';
+export * from './components/resizable.js';
+export * from './components/result-card.js';
+export * from './components/result-notice.js';
+export * from './components/review-card.js';
+export * from './components/rich-text-editor.js';
+export * from './components/schema-diagram.js';
+export * from './components/sql-viewer.js';
+export * from './components/scroll-area.js';
+export * from './components/search-dialog.js';
+export * from './components/search-field.js';
+export * from './components/select.js';
+export * from './components/selection-slot.js';
+export * from './components/separator.js';
+export * from './components/settings-list.js';
+export * from './components/sheet.js';
+export * from './components/sidebar.js';
+export * from './components/skeleton.js';
+export * from './components/slider.js';
+export * from './components/spinner.js';
+export * from './components/state-panel.js';
+export * from './components/state-sample.js';
+export * from './components/switch.js';
+export * from './components/table.js';
+export * from './components/tabs.js';
+export * from './components/textarea.js';
+export * from './components/toast.js';
+export * from './components/toggle.js';
+export * from './components/toggle-group.js';
+export * from './components/tool-activity.js';
+export * from './components/toolbar-status.js';
+export * from './components/tooltip.js';
+export * from './components/typed-text.js';
+export * from './components/view-switcher.js';

package/dist/index.js

@@ -1,93 +1,98 @@
-export * from "./components/accordion.js";
-export * from "./components/agent-fanout.js";
-export * from "./components/alert.js";
-export * from "./components/alert-dialog.js";
-export * from "./components/aspect-ratio.js";
-export * from "./components/attachment.js";
-export * from "./components/avatar.js";
-export * from "./components/badge.js";
-export * from "./components/brand-icon.js";
-export * from "./components/breadcrumb.js";
-export * from "./components/button.js";
-export * from "./components/button-group.js";
-export * from "./components/calendar.js";
-export * from "./components/canvas.js";
-export * from "./components/card.js";
-export * from "./components/carousel.js";
-export * from "./components/chart.js";
-export * from "./components/chat-confirmation.js";
-export * from "./components/chat-input.js";
-export * from "./components/chat-plan.js";
-export * from "./components/chat-sources.js";
-export * from "./components/checkbox.js";
-export * from "./components/choice-list.js";
-export * from "./components/code-block.js";
-export * from "./components/collapsible.js";
-export * from "./components/combobox.js";
-export * from "./components/command.js";
-export * from "./components/context-menu.js";
-export * from "./components/dialog.js";
-export * from "./components/direction.js";
-export * from "./components/dropdown-menu.js";
-export * from "./components/field.js";
-export * from "./components/file-explorer.js";
-export * from "./components/file-viewer.js";
-export * from "./components/form.js";
-export * from "./components/glass-banner.js";
-export * from "./components/gradient-banner.js";
-export * from "./components/hover-card.js";
-export * from "./components/input.js";
-export * from "./components/input-group.js";
-export * from "./components/input-otp.js";
-export * from "./components/kbd.js";
-export * from "./components/label.js";
-export * from "./components/mention-list.js";
-export * from "./components/menubar.js";
-export * from "./components/message.js";
-export * from "./components/message-actions.js";
-export * from "./components/message-response.js";
-export * from "./components/message-scroller.js";
-export * from "./components/navigation-menu.js";
-export * from "./components/notice-banner.js";
-export * from "./components/page-content.js";
-export * from "./components/page-header.js";
-export * from "./components/pagination.js";
-export * from "./components/plan-outline.js";
-export * from "./components/popover.js";
-export * from "./components/presence-cursor.js";
-export * from "./components/progress.js";
-export * from "./components/prompt-list.js";
-export * from "./components/questionnaire.js";
-export * from "./components/radio-group.js";
-export * from "./components/reasoning-effort.js";
-export * from "./components/resizable.js";
-export * from "./components/result-card.js";
-export * from "./components/review-card.js";
-export * from "./components/rich-text-editor.js";
-export * from "./components/schema-diagram.js";
-export * from "./components/sql-viewer.js";
-export * from "./components/scroll-area.js";
-export * from "./components/search-dialog.js";
-export * from "./components/search-field.js";
-export * from "./components/select.js";
-export * from "./components/selection-slot.js";
-export * from "./components/separator.js";
-export * from "./components/settings-list.js";
-export * from "./components/sheet.js";
-export * from "./components/sidebar.js";
-export * from "./components/skeleton.js";
-export * from "./components/slider.js";
-export * from "./components/spinner.js";
-export * from "./components/state-panel.js";
-export * from "./components/state-sample.js";
-export * from "./components/switch.js";
-export * from "./components/table.js";
-export * from "./components/tabs.js";
-export * from "./components/textarea.js";
-export * from "./components/toast.js";
-export * from "./components/toggle.js";
-export * from "./components/toggle-group.js";
-export * from "./components/tool-activity.js";
-export * from "./components/toolbar-status.js";
-export * from "./components/tooltip.js";
-export * from "./components/typed-text.js";
+export * from './components/accordion.js';
+export * from './components/agent-fanout.js';
+export * from './components/alert.js';
+export * from './components/alert-dialog.js';
+export * from './components/aspect-ratio.js';
+export * from './components/attachment.js';
+export * from './components/avatar.js';
+export * from './components/badge.js';
+export * from './components/board.js';
+export * from './components/brand-icon.js';
+export * from './components/breadcrumb.js';
+export * from './components/button.js';
+export * from './components/button-group.js';
+export * from './components/calendar.js';
+export * from './components/canvas.js';
+export * from './components/card.js';
+export * from './components/carousel.js';
+export * from './components/chart.js';
+export * from './components/timeline.js';
+export * from './components/chat-confirmation.js';
+export * from './components/chat-input.js';
+export * from './components/chat-plan.js';
+export * from './components/chat-sources.js';
+export * from './components/checkbox.js';
+export * from './components/choice-list.js';
+export * from './components/code-block.js';
+export * from './components/collapsible.js';
+export * from './components/combobox.js';
+export * from './components/command.js';
+export * from './components/context-menu.js';
+export * from './components/dialog.js';
+export * from './components/direction.js';
+export * from './components/dropdown-menu.js';
+export * from './components/field.js';
+export * from './components/file-explorer.js';
+export * from './components/file-viewer.js';
+export * from './components/form.js';
+export * from './components/glass-banner.js';
+export * from './components/gradient-banner.js';
+export * from './components/hover-card.js';
+export * from './components/input.js';
+export * from './components/input-group.js';
+export * from './components/input-otp.js';
+export * from './components/kbd.js';
+export * from './components/label.js';
+export * from './components/mention-list.js';
+export * from './components/menubar.js';
+export * from './components/message.js';
+export * from './components/message-actions.js';
+export * from './components/message-response.js';
+export * from './components/message-scroller.js';
+export * from './components/navigation-menu.js';
+export * from './components/notice-banner.js';
+export * from './components/page-content.js';
+export * from './components/page-header.js';
+export * from './components/pagination.js';
+export * from './components/plan-outline.js';
+export * from './components/popover.js';
+export * from './components/presence-cursor.js';
+export * from './components/progress.js';
+export * from './components/prompt-list.js';
+export * from './components/questionnaire.js';
+export * from './components/radio-group.js';
+export * from './components/reasoning-effort.js';
+export * from './components/record-list.js';
+export * from './components/resizable.js';
+export * from './components/result-card.js';
+export * from './components/result-notice.js';
+export * from './components/review-card.js';
+export * from './components/rich-text-editor.js';
+export * from './components/schema-diagram.js';
+export * from './components/sql-viewer.js';
+export * from './components/scroll-area.js';
+export * from './components/search-dialog.js';
+export * from './components/search-field.js';
+export * from './components/select.js';
+export * from './components/selection-slot.js';
+export * from './components/separator.js';
+export * from './components/settings-list.js';
+export * from './components/sheet.js';
+export * from './components/sidebar.js';
+export * from './components/skeleton.js';
+export * from './components/slider.js';
+export * from './components/spinner.js';
+export * from './components/state-panel.js';
+export * from './components/state-sample.js';
+export * from './components/switch.js';
+export * from './components/table.js';
+export * from './components/tabs.js';
+export * from './components/textarea.js';
+export * from './components/toast.js';
+export * from './components/toggle.js';
+export * from './components/toggle-group.js';
+export * from './components/tool-activity.js';
+export * from './components/toolbar-status.js';
+export * from './components/tooltip.js';
+export * from './components/typed-text.js';
+export * from './components/view-switcher.js';