@tulipfarm/sprout 0.3.0 → 0.3.1

package/README.md

@@ -98,7 +98,7 @@ for notes on each one.
 
 <!-- bundle-size:start -->
 
-Full library: **786.3 kB** gzip. Each component path is smaller. Sizes are minified, with React and other peer dependencies left out.
+Full library: **786.4 kB** gzip. Each component path is smaller. Sizes are minified, with React and other peer dependencies left out.
 
 <details>
 <summary>Size of each component</summary>
@@ -168,7 +168,7 @@ Full library: **786.3 kB** gzip. Each component path is smaller. Sizes are minif
 | `radio-group`       |  80.8 kB |  27.9 kB |  24.7 kB |
 | `reasoning-effort`  |  35.5 kB |  12.0 kB |  10.5 kB |
 | `resizable`         |  39.4 kB |  13.4 kB |  11.8 kB |
-| `result-card`       | 240.1 kB |  85.1 kB |  72.1 kB |
+| `result-card`       | 240.3 kB |  85.1 kB |  72.1 kB |
 | `review-card`       |  61.6 kB |  21.0 kB |  18.4 kB |
 | `rich-text-editor`  | 442.5 kB | 140.2 kB | 119.8 kB |
 | `schema-diagram`    | 247.9 kB |  82.9 kB |  71.2 kB |

package/dist/components/chat-confirmation.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 export declare const chatConfirmationStateNames: readonly ["pending", "submitting", "approved", "rejected", "expired", "cancelled", "error"];
 export type ChatConfirmationDecision = "approve" | "reject";
 export type ConfirmationState = {
@@ -33,10 +33,12 @@ export interface ChatConfirmationProps extends Omit<ComponentProps<"div">, "titl
     onDecision: (decision: ChatConfirmationDecision) => void;
     /** Locks both buttons, such as while the request is refreshing or cannot be verified. */
     disabled?: boolean | undefined;
+    /** Names the action on the approve button, such as “Approve 3 drafts”. */
+    approveLabel?: ReactNode;
 }
 /**
  * Asks someone in chat to approve or decline an action an agent proposed.
  * Built on `ReviewCard`: it folds once decided, and when the decision was
  * made from inside the card, focus moves to the outcome.
  */
-export declare function ChatConfirmation({ title, description, details, state, onDecision, disabled, className, ...props }: ChatConfirmationProps): import("react").JSX.Element;
+export declare function ChatConfirmation({ title, description, details, state, onDecision, disabled, approveLabel, className, ...props }: ChatConfirmationProps): import("react").JSX.Element;

package/dist/components/chat-confirmation.js

@@ -41,7 +41,7 @@ const outcomes = {
  * Built on `ReviewCard`: it folds once decided, and when the decision was
  * made from inside the card, focus moves to the outcome.
  */
-export function ChatConfirmation({ title, description, details, state, onDecision, disabled = false, className, ...props }) {
+export function ChatConfirmation({ title, description, details, state, onDecision, disabled = false, approveLabel = "Approve action", className, ...props }) {
     const done = settledKinds.has(state.kind);
     const section = useRef(null);
     const result = useRef(null);
@@ -58,5 +58,5 @@ export function ChatConfirmation({ title, description, details, state, onDecisio
     const submitting = state.kind === "submitting";
     const busy = (decision) => state.kind === "submitting" && state.decision === decision;
     const outcome = outcomes[state.kind];
-    return (_jsx("div", { ref: section, "data-slot": "chat-confirmation", "data-state": state.kind, ...props, className: cn("sprout-chat-confirmation", className), children: _jsxs(ReviewCard, { icon: _jsx(ShieldUser, { size: 16 }), title: title, badge: badges[state.kind], settled: done, status: state.kind === "error" || outcome ? (_jsxs(_Fragment, { children: [state.kind === "error" && (_jsx("p", { role: "alert", className: "sprout-chat-confirmation-error", children: state.message })), outcome && (_jsx("p", { ref: result, tabIndex: -1, role: "status", className: "sprout-chat-confirmation-result", children: outcome }))] })) : undefined, actions: done ? undefined : (_jsxs(_Fragment, { children: [_jsxs(Button, { disabled: disabled || submitting, "aria-busy": busy("approve"), onClick: () => onDecision("approve"), children: [busy("approve") && _jsx(Spinner, { "aria-hidden": "true" }), "Approve action"] }), _jsxs(Button, { variant: "ghost", disabled: disabled || submitting, "aria-busy": busy("reject"), onClick: () => onDecision("reject"), children: [busy("reject") && _jsx(Spinner, { "aria-hidden": "true" }), "Decline"] })] })), children: [_jsx("p", { className: "sprout-chat-confirmation-description", children: description }), _jsx(ReviewRows, { children: details.map((detail) => (_jsx(ReviewRow, { label: detail.label, children: detail.value }, detail.label))) })] }) }));
+    return (_jsx("div", { ref: section, "data-slot": "chat-confirmation", "data-state": state.kind, ...props, className: cn("sprout-chat-confirmation", className), children: _jsxs(ReviewCard, { icon: _jsx(ShieldUser, { size: 16 }), title: title, badge: badges[state.kind], settled: done, status: state.kind === "error" || outcome ? (_jsxs(_Fragment, { children: [state.kind === "error" && (_jsx("p", { role: "alert", className: "sprout-chat-confirmation-error", children: state.message })), outcome && (_jsx("p", { ref: result, tabIndex: -1, role: "status", className: "sprout-chat-confirmation-result", children: outcome }))] })) : undefined, actions: done ? undefined : (_jsxs(_Fragment, { children: [_jsxs(Button, { disabled: disabled || submitting, "aria-busy": busy("approve"), onClick: () => onDecision("approve"), children: [busy("approve") && _jsx(Spinner, { "aria-hidden": "true" }), approveLabel] }), _jsxs(Button, { variant: "ghost", disabled: disabled || submitting, "aria-busy": busy("reject"), onClick: () => onDecision("reject"), children: [busy("reject") && _jsx(Spinner, { "aria-hidden": "true" }), "Decline"] })] })), children: [_jsx("p", { className: "sprout-chat-confirmation-description", children: description }), _jsx(ReviewRows, { children: details.map((detail) => (_jsx(ReviewRow, { label: detail.label, children: detail.value }, detail.label))) })] }) }));
 }

package/dist/components/result-card.d.ts

@@ -10,10 +10,15 @@ export type ResultAppAction = {
     label: string;
     state: ResultAppActionState;
 };
-/** One app that took part in a result. `brand: null` shows a generic plug. */
+/**
+ * One app that took part in a result. `brand: null` shows `icon`, or a
+ * generic plug when no icon is given.
+ */
 export type ResultApp = {
     brand: Brand | null;
     name: string;
+    /** Shown when `brand` is null, such as a table icon for your own data. */
+    icon?: ReactNode;
     actions: readonly ResultAppAction[];
 };
 export type ResultCardAction = {

package/dist/components/result-card.js

@@ -77,12 +77,12 @@ function AppActionsPopover({ apps, overflow = false, disabled, }) {
     const title = overflow
         ? `${apps.length} more ${apps.length === 1 ? "app" : "apps"}`
         : `${first.name} actions`;
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { openOnHover: true, delay: 800, closeDelay: 200, render: _jsx(BrandTile, { size: "action", render: _jsx(Button, { variant: "ghost", size: "icon", disabled: disabled }) }), "aria-label": title, children: overflow ? (_jsxs("span", { className: "sprout-result-card-overflow", children: ["+", apps.length] })) : first.brand ? (_jsx(BrandIcon, { brand: first.brand, size: "fill" })) : (_jsx(Plug, { size: 18, "aria-hidden": "true" })) }), _jsxs(PopoverContent, { size: "app-actions", align: "start", sideOffset: 8, initialFocus: (interaction) => interaction !== "mouse", children: [_jsx(PopoverTitle, { children: title }), _jsx(ResultAppActions, { apps: apps, showAppNames: overflow })] })] }));
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { openOnHover: true, delay: 800, closeDelay: 200, render: _jsx(BrandTile, { size: "action", render: _jsx(Button, { variant: "ghost", size: "icon", disabled: disabled }) }), "aria-label": title, children: overflow ? (_jsxs("span", { className: "sprout-result-card-overflow", children: ["+", apps.length] })) : first.brand ? (_jsx(BrandIcon, { brand: first.brand, size: "fill" })) : first.icon ? (_jsx("span", { "aria-hidden": "true", className: "sprout-result-app-icon", children: first.icon })) : (_jsx(Plug, { size: 18, "aria-hidden": "true" })) }), _jsxs(PopoverContent, { size: "app-actions", align: "start", sideOffset: 8, initialFocus: (interaction) => interaction !== "mouse", children: [_jsx(PopoverTitle, { children: title }), _jsx(ResultAppActions, { apps: apps, showAppNames: overflow })] })] }));
 }
 /**
  * The actions each app took, grouped by app. A check marks completed
  * actions; every other state is spelled out, such as “Unconfirmed:”.
  */
 export function ResultAppActions({ apps, showAppNames = true, className, ...props }) {
-    return (_jsx("div", { "data-slot": "result-app-actions", ...props, className: cn("sprout-result-app-actions", className), children: apps.map((app) => (_jsxs("section", { "aria-label": app.name, className: "sprout-result-app", children: [showAppNames && (_jsxs("div", { className: "sprout-result-app-name", children: [app.brand ? (_jsx(BrandIcon, { brand: app.brand, size: "glyph" })) : (_jsx(Plug, { size: 20, "aria-hidden": "true" })), _jsx("h4", { children: app.name })] })), app.actions.length === 0 ? (_jsx("p", { className: "sprout-result-app-empty", children: "No action details were recorded." })) : (_jsx("ul", { className: "sprout-result-app-list", children: app.actions.map((action, index) => (_jsxs("li", { "data-state": action.state, className: "sprout-result-app-action", children: [action.state === "completed" ? (_jsxs("span", { className: "sprout-result-app-check", children: [_jsx(Check, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sprout-result-sr-only", children: "Completed:" })] })) : (_jsx("span", { className: "sprout-result-app-prefix", children: actionPrefixes[action.state] })), _jsx("span", { className: "sprout-result-app-label", children: action.label })] }, `${action.label}:${index}`))) }))] }, app.brand ?? app.name))) }));
+    return (_jsx("div", { "data-slot": "result-app-actions", ...props, className: cn("sprout-result-app-actions", className), children: apps.map((app) => (_jsxs("section", { "aria-label": app.name, className: "sprout-result-app", children: [showAppNames && (_jsxs("div", { className: "sprout-result-app-name", children: [app.brand ? (_jsx(BrandIcon, { brand: app.brand, size: "glyph" })) : app.icon ? (_jsx("span", { "aria-hidden": "true", className: "sprout-result-app-icon", children: app.icon })) : (_jsx(Plug, { size: 20, "aria-hidden": "true" })), _jsx("h4", { children: app.name })] })), app.actions.length === 0 ? (_jsx("p", { className: "sprout-result-app-empty", children: "No action details were recorded." })) : (_jsx("ul", { className: "sprout-result-app-list", children: app.actions.map((action, index) => (_jsxs("li", { "data-state": action.state, className: "sprout-result-app-action", children: [action.state === "completed" ? (_jsxs("span", { className: "sprout-result-app-check", children: [_jsx(Check, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sprout-result-sr-only", children: "Completed:" })] })) : (_jsx("span", { className: "sprout-result-app-prefix", children: actionPrefixes[action.state] })), _jsx("span", { className: "sprout-result-app-label", children: action.label })] }, `${action.label}:${index}`))) }))] }, app.brand ?? app.name))) }));
 }

package/dist/styles/result-card.css

@@ -150,6 +150,20 @@
   .sprout-result-app-name > svg {
     flex-shrink: 0;
   }
+  .sprout-result-app-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+  }
+  .sprout-result-app-name > .sprout-result-app-icon {
+    width: 20px;
+    height: 20px;
+  }
+  .sprout-result-app-icon > svg {
+    width: 100%;
+    height: 100%;
+  }
   .sprout-result-app-name h4 {
     margin: 0;
     color: var(--sprout-text);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tulipfarm/sprout",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Considered React controls. Built with Base UI and Tailwind CSS.",
   "license": "MIT",
   "type": "module",