@epicbagel/saas-kit 0.0.0-stage → 1.0.0

package/dist/primitives/confirm-bar.cjs

@@ -0,0 +1,101 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+"use client";
+
+
+var _chunkL4DH72UFcjs = require('../chunk-L4DH72UF.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/confirm-bar.tsx
+var _react = require('react');
+var _reactdom = require('react-dom');
+var _jsxruntime = require('react/jsx-runtime');
+function ConfirmBar({
+  open,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  confirmVariant = "default",
+  onConfirm,
+  onCancel,
+  countdown: initialCountdown,
+  paused = false,
+  expandableDescription = false,
+  containerClassName = "max-w-3xl",
+  className
+}) {
+  const [remaining, setRemaining] = _react.useState.call(void 0, _nullishCoalesce(initialCountdown, () => ( 0)));
+  const timerRef = _react.useRef.call(void 0, null);
+  const [mounted, setMounted] = _react.useState.call(void 0, false);
+  const [expanded, setExpanded] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    setMounted(true);
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    if (!open) setExpanded(false);
+  }, [open]);
+  const timerPaused = paused || expanded;
+  _react.useEffect.call(void 0, () => {
+    if (!open || !initialCountdown || timerPaused) {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+      return;
+    }
+    setRemaining(initialCountdown);
+    timerRef.current = setInterval(() => {
+      setRemaining((prev) => {
+        if (prev <= 1) {
+          clearInterval(timerRef.current);
+          timerRef.current = null;
+          onCancel();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [open, initialCountdown, timerPaused]);
+  if (!mounted || !open) return null;
+  return _reactdom.createPortal.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: `fixed inset-x-0 bottom-0 z-50 border-t bg-background shadow-lg pb-[env(safe-area-inset-bottom)] animate-in slide-in-from-bottom-full duration-200 ${_nullishCoalesce(className, () => ( ""))}`,
+        onClick: (e) => e.stopPropagation(),
+        onPointerDown: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `mx-auto px-5 py-4 flex items-center gap-4 ${containerClassName}`, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-base font-medium", children: title }),
+            description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: `text-sm text-muted-foreground mt-0.5 ${expandableDescription && !expanded ? "truncate" : ""}`, children: description }),
+            expandableDescription && description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                onClick: () => setExpanded((v) => !v),
+                className: "text-xs text-foreground/70 hover:text-foreground underline underline-offset-2 mt-1",
+                children: expanded ? "See less" : "See more"
+              }
+            )
+          ] }),
+          initialCountdown && !timerPaused && remaining > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-xs text-muted-foreground tabular-nums shrink-0", children: [
+            remaining,
+            "s"
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL4DH72UFcjs.Button, { size: "sm", variant: "ghost", onClick: onCancel, className: "shrink-0", children: cancelLabel }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL4DH72UFcjs.Button, { size: "sm", variant: confirmVariant, onClick: onConfirm, className: "shrink-0", children: confirmLabel })
+        ] })
+      }
+    ),
+    document.body
+  );
+}
+
+
+exports.ConfirmBar = ConfirmBar;

package/dist/primitives/confirm-bar.d.cts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface ConfirmBarProps {
+    /** Whether the bar is visible. */
+    open: boolean;
+    /** Primary question — e.g. "No to Tom Harris?" */
+    title: ReactNode;
+    /** Supporting detail — e.g. the transcript or reason. */
+    description?: ReactNode;
+    /** Label for the confirm button. Defaults to "Confirm". */
+    confirmLabel?: ReactNode;
+    /** Label for the cancel button. Defaults to "Cancel". */
+    cancelLabel?: ReactNode;
+    /** Visual style of the confirm button. */
+    confirmVariant?: "default" | "destructive";
+    /** Called when the user confirms (or the countdown expires). */
+    onConfirm: () => void;
+    /** Called when the user cancels. */
+    onCancel: () => void;
+    /**
+     * Auto-dismiss countdown in seconds. When set, the bar shows a
+     * countdown and auto-fires onCancel (dismiss) when it reaches zero.
+     * The user must explicitly click Confirm to act. Omit for no timer.
+     */
+    countdown?: number;
+    /**
+     * Pause the countdown without dismissing the bar. Useful while the
+     * user is reading more detail so it doesn't auto-dismiss out from
+     * under them. Combine with internal expand if needed.
+     */
+    paused?: boolean;
+    /**
+     * When true, the description is truncated to one line with a
+     * "See more" toggle that expands the full text and pauses the
+     * countdown while expanded. Use for long AI explanations that don't
+     * fit on small screens.
+     */
+    expandableDescription?: boolean;
+    /** Outer container max-width class. Defaults to `max-w-3xl`. */
+    containerClassName?: string;
+    className?: string;
+}
+/**
+ * Fixed bottom confirmation bar — slides up to confirm or cancel an
+ * action. Optionally counts down and auto-fires if the user doesn't
+ * respond.
+ *
+ * Use when the system has inferred an action from user input (voice
+ * note → reject, bulk import → archive duplicates, AI suggestion →
+ * apply) and wants to surface the suggestion for explicit confirmation.
+ * The countdown auto-dismisses (not auto-confirms) — the user must
+ * actively click to act.
+ *
+ * For form save state, use `<SaveBar>` instead. For multi-select
+ * batch actions, use `<BatchActionBar>`.
+ */
+declare function ConfirmBar({ open, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, onCancel, countdown: initialCountdown, paused, expandableDescription, containerClassName, className, }: ConfirmBarProps): React.ReactPortal | null;
+
+export { ConfirmBar, type ConfirmBarProps };

package/dist/primitives/confirm-bar.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface ConfirmBarProps {
+    /** Whether the bar is visible. */
+    open: boolean;
+    /** Primary question — e.g. "No to Tom Harris?" */
+    title: ReactNode;
+    /** Supporting detail — e.g. the transcript or reason. */
+    description?: ReactNode;
+    /** Label for the confirm button. Defaults to "Confirm". */
+    confirmLabel?: ReactNode;
+    /** Label for the cancel button. Defaults to "Cancel". */
+    cancelLabel?: ReactNode;
+    /** Visual style of the confirm button. */
+    confirmVariant?: "default" | "destructive";
+    /** Called when the user confirms (or the countdown expires). */
+    onConfirm: () => void;
+    /** Called when the user cancels. */
+    onCancel: () => void;
+    /**
+     * Auto-dismiss countdown in seconds. When set, the bar shows a
+     * countdown and auto-fires onCancel (dismiss) when it reaches zero.
+     * The user must explicitly click Confirm to act. Omit for no timer.
+     */
+    countdown?: number;
+    /**
+     * Pause the countdown without dismissing the bar. Useful while the
+     * user is reading more detail so it doesn't auto-dismiss out from
+     * under them. Combine with internal expand if needed.
+     */
+    paused?: boolean;
+    /**
+     * When true, the description is truncated to one line with a
+     * "See more" toggle that expands the full text and pauses the
+     * countdown while expanded. Use for long AI explanations that don't
+     * fit on small screens.
+     */
+    expandableDescription?: boolean;
+    /** Outer container max-width class. Defaults to `max-w-3xl`. */
+    containerClassName?: string;
+    className?: string;
+}
+/**
+ * Fixed bottom confirmation bar — slides up to confirm or cancel an
+ * action. Optionally counts down and auto-fires if the user doesn't
+ * respond.
+ *
+ * Use when the system has inferred an action from user input (voice
+ * note → reject, bulk import → archive duplicates, AI suggestion →
+ * apply) and wants to surface the suggestion for explicit confirmation.
+ * The countdown auto-dismisses (not auto-confirms) — the user must
+ * actively click to act.
+ *
+ * For form save state, use `<SaveBar>` instead. For multi-select
+ * batch actions, use `<BatchActionBar>`.
+ */
+declare function ConfirmBar({ open, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, onCancel, countdown: initialCountdown, paused, expandableDescription, containerClassName, className, }: ConfirmBarProps): React.ReactPortal | null;
+
+export { ConfirmBar, type ConfirmBarProps };

package/dist/primitives/confirm-bar.js

@@ -0,0 +1,101 @@
+"use client";
+"use client";
+import {
+  Button
+} from "../chunk-HQRWRRZJ.js";
+import "../chunk-G6SRSWXB.js";
+
+// src/primitives/confirm-bar.tsx
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ConfirmBar({
+  open,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  confirmVariant = "default",
+  onConfirm,
+  onCancel,
+  countdown: initialCountdown,
+  paused = false,
+  expandableDescription = false,
+  containerClassName = "max-w-3xl",
+  className
+}) {
+  const [remaining, setRemaining] = useState(initialCountdown ?? 0);
+  const timerRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!open) setExpanded(false);
+  }, [open]);
+  const timerPaused = paused || expanded;
+  useEffect(() => {
+    if (!open || !initialCountdown || timerPaused) {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+      return;
+    }
+    setRemaining(initialCountdown);
+    timerRef.current = setInterval(() => {
+      setRemaining((prev) => {
+        if (prev <= 1) {
+          clearInterval(timerRef.current);
+          timerRef.current = null;
+          onCancel();
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [open, initialCountdown, timerPaused]);
+  if (!mounted || !open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `fixed inset-x-0 bottom-0 z-50 border-t bg-background shadow-lg pb-[env(safe-area-inset-bottom)] animate-in slide-in-from-bottom-full duration-200 ${className ?? ""}`,
+        onClick: (e) => e.stopPropagation(),
+        onPointerDown: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxs("div", { className: `mx-auto px-5 py-4 flex items-center gap-4 ${containerClassName}`, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-base font-medium", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: `text-sm text-muted-foreground mt-0.5 ${expandableDescription && !expanded ? "truncate" : ""}`, children: description }),
+            expandableDescription && description && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setExpanded((v) => !v),
+                className: "text-xs text-foreground/70 hover:text-foreground underline underline-offset-2 mt-1",
+                children: expanded ? "See less" : "See more"
+              }
+            )
+          ] }),
+          initialCountdown && !timerPaused && remaining > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground tabular-nums shrink-0", children: [
+            remaining,
+            "s"
+          ] }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onCancel, className: "shrink-0", children: cancelLabel }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: confirmVariant, onClick: onConfirm, className: "shrink-0", children: confirmLabel })
+        ] })
+      }
+    ),
+    document.body
+  );
+}
+export {
+  ConfirmBar
+};

package/dist/primitives/connection-status-bar.cjs

@@ -0,0 +1,243 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+var _chunkI6GUOEBOcjs = require('../chunk-I6GUOEBO.cjs');
+
+
+var _chunkL4DH72UFcjs = require('../chunk-L4DH72UF.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/connection-status-bar.tsx
+var _reactcollapsible = require('@radix-ui/react-collapsible'); var CollapsiblePrimitive = _interopRequireWildcard(_reactcollapsible);
+
+
+
+
+
+
+
+var _lucidereact = require('lucide-react');
+
+
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var statePresentation = {
+  disconnected: { icon: _lucidereact.Plug, iconClassName: "text-muted-foreground" },
+  syncing: { icon: _lucidereact.RefreshCw, iconClassName: "text-blue-600 dark:text-blue-400" },
+  connected: { icon: _lucidereact.CheckCircle2, iconClassName: "text-emerald-600 dark:text-emerald-400" },
+  error: { icon: _lucidereact.AlertCircle, iconClassName: "text-destructive" }
+};
+function StatusAction({
+  action,
+  state
+}) {
+  const external = action.external || action.target === "_blank";
+  const ariaLabel = _nullishCoalesce(action.ariaLabel, () => ( (typeof action.label === "string" ? action.label : void 0)));
+  const showSyncIcon = !external && (state === "connected" || state === "syncing");
+  const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    showSyncIcon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _lucidereact.RefreshCw,
+      {
+        "aria-hidden": "true",
+        className: state === "syncing" ? "animate-spin" : void 0
+      }
+    ) : null,
+    action.iconOnly ? null : action.label,
+    external ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ExternalLink, { "aria-hidden": "true" }) : null
+  ] });
+  const className = _chunkKWLSBTB2cjs.cn.call(void 0, 
+    state === "disconnected" && "bg-foreground text-background hover:bg-foreground/90",
+    state === "error" && "border-destructive/30 text-destructive hover:bg-destructive/5 hover:text-destructive"
+  );
+  const variant = state === "disconnected" ? "default" : action.iconOnly ? "quiet" : "outline";
+  const size = action.iconOnly ? "icon-sm" : "sm";
+  if (action.href) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL4DH72UFcjs.Button, { asChild: true, variant, size, className, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "a",
+      {
+        href: action.href,
+        target: _nullishCoalesce(action.target, () => ( (action.external ? "_blank" : void 0))),
+        rel: external ? "noreferrer" : void 0,
+        "aria-label": action.iconOnly ? ariaLabel : void 0,
+        title: action.iconOnly ? ariaLabel : void 0,
+        "aria-disabled": action.disabled || void 0,
+        onClick: (event) => {
+          if (action.disabled) {
+            event.preventDefault();
+            return;
+          }
+          _optionalChain([action, 'access', _ => _.onClick, 'optionalCall', _2 => _2()]);
+        },
+        children: content
+      }
+    ) });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkL4DH72UFcjs.Button,
+    {
+      type: "button",
+      variant,
+      size,
+      className,
+      "aria-label": action.iconOnly ? ariaLabel : void 0,
+      title: action.iconOnly ? ariaLabel : void 0,
+      disabled: action.disabled,
+      onClick: action.onClick,
+      children: content
+    }
+  );
+}
+function ConnectionStatusBar({
+  state,
+  name,
+  description,
+  facts,
+  action,
+  actions,
+  progress,
+  progressLabel = "Sync progress",
+  children,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = _react.useState.call(void 0, defaultOpen);
+  const controlled = open !== void 0;
+  const isOpen = controlled ? open : uncontrolledOpen;
+  const presentation = statePresentation[state];
+  const StateIcon = presentation.icon;
+  const clampedProgress = progress === void 0 ? void 0 : Math.min(100, Math.max(0, progress));
+  const visibleActions = _nullishCoalesce(actions, () => ( (action ? [action] : [])));
+  const setOpen = (nextOpen) => {
+    if (!controlled) setUncontrolledOpen(nextOpen);
+    _optionalChain([onOpenChange, 'optionalCall', _3 => _3(nextOpen)]);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    CollapsiblePrimitive.Root,
+    {
+      open: isOpen,
+      onOpenChange: setOpen,
+      "data-slot": "connection-status-bar",
+      "data-status": state,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "overflow-hidden rounded-xl border border-border bg-background shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            "data-slot": "connection-status-row",
+            className: "flex min-h-[4.75rem] flex-row items-center gap-3 px-4 py-4 sm:gap-5 sm:px-5",
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                "div",
+                {
+                  "data-slot": "connection-status-leading",
+                  className: "flex min-w-0 flex-1 items-center gap-3 sm:min-h-11 sm:gap-4",
+                  children: [
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex h-11 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      StateIcon,
+                      {
+                        "aria-hidden": "true",
+                        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                          "size-5",
+                          state === "syncing" && "animate-spin",
+                          presentation.iconClassName
+                        )
+                      }
+                    ) }),
+                    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 items-center gap-3 sm:min-h-11 sm:gap-4", children: [
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-w-0 shrink items-center truncate whitespace-nowrap text-sm font-semibold leading-none text-foreground", children: name }),
+                      description || _optionalChain([facts, 'optionalAccess', _4 => _4.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "aria-hidden": "true", className: "h-5 w-px shrink-0 bg-border" }) : null,
+                      description || _optionalChain([facts, 'optionalAccess', _5 => _5.length]) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+                        "div",
+                        {
+                          "data-slot": "connection-status-summary",
+                          className: "flex min-w-0 flex-1 flex-nowrap items-center gap-2 overflow-hidden",
+                          children: [
+                            description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 truncate whitespace-nowrap text-sm leading-none text-muted-foreground", children: description }) : null,
+                            _optionalChain([facts, 'optionalAccess', _6 => _6.map, 'call', _7 => _7((fact, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                              _chunkI6GUOEBOcjs.Badge,
+                              {
+                                "data-status-fact": "true",
+                                variant: _nullishCoalesce(fact.variant, () => ( "default")),
+                                size: "micro",
+                                padding: "roomy",
+                                weight: "semibold",
+                                shrink: true,
+                                transform: "uppercase",
+                                className: "whitespace-nowrap tabular-nums",
+                                children: fact.label
+                              },
+                              index
+                            ))])
+                          ]
+                        }
+                      ) : null
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex shrink-0 items-center justify-end gap-2 sm:gap-3", children: [
+                state === "syncing" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "div",
+                  {
+                    role: "progressbar",
+                    "aria-label": progressLabel,
+                    "aria-valuemin": clampedProgress === void 0 ? void 0 : 0,
+                    "aria-valuemax": clampedProgress === void 0 ? void 0 : 100,
+                    "aria-valuenow": clampedProgress,
+                    className: "h-1.5 w-16 overflow-hidden rounded-full bg-muted sm:w-28",
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      "div",
+                      {
+                        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                          "h-full rounded-full bg-blue-600/70 transition-[width] dark:bg-blue-400/70",
+                          clampedProgress === void 0 && "w-3/5 animate-pulse"
+                        ),
+                        style: clampedProgress === void 0 ? void 0 : { width: `${clampedProgress}%` }
+                      }
+                    )
+                  }
+                ) : null,
+                visibleActions.map((visibleAction, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  StatusAction,
+                  {
+                    action: visibleAction,
+                    state
+                  },
+                  _nullishCoalesce(visibleAction.ariaLabel, () => ( (typeof visibleAction.label === "string" ? visibleAction.label : index)))
+                )),
+                children ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapsiblePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _chunkL4DH72UFcjs.Button,
+                  {
+                    type: "button",
+                    variant: "quiet",
+                    size: "icon-sm",
+                    "aria-label": isOpen ? "Hide connection details" : "Show connection details",
+                    "aria-expanded": isOpen,
+                    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      _lucidereact.ChevronDown,
+                      {
+                        "aria-hidden": "true",
+                        className: _chunkKWLSBTB2cjs.cn.call(void 0, "transition-transform", isOpen && "rotate-180")
+                      }
+                    )
+                  }
+                ) }) : null
+              ] })
+            ]
+          }
+        ),
+        children ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollapsiblePrimitive.Content, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "connection-status-details", className: "border-t border-border px-5 py-4", children }) }) : null
+      ]
+    }
+  );
+}
+
+
+exports.ConnectionStatusBar = ConnectionStatusBar;

package/dist/primitives/connection-status-bar.d.cts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, HTMLAttributeAnchorTarget } from 'react';
+import { BadgeVariant } from './badge.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type ConnectionStatusBarState = "disconnected" | "syncing" | "connected" | "error";
+interface ConnectionStatusBarAction {
+    label: ReactNode;
+    ariaLabel?: string;
+    onClick?: () => void;
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
+    external?: boolean;
+    iconOnly?: boolean;
+    disabled?: boolean;
+}
+interface ConnectionStatusBarFact {
+    label: ReactNode;
+    variant?: BadgeVariant;
+}
+interface ConnectionStatusBarProps {
+    state: ConnectionStatusBarState;
+    /** Integration name, or the setup prompt before a source is connected. */
+    name: ReactNode;
+    /** Current activity or health summary. */
+    description?: ReactNode;
+    /** Compact, structured values displayed as separate data badges. */
+    facts?: readonly ConnectionStatusBarFact[];
+    /** One primary action retained for backwards compatibility. */
+    action?: ConnectionStatusBarAction;
+    /** Compact action group, rendered in the supplied order. */
+    actions?: readonly ConnectionStatusBarAction[];
+    /** A real 0–100 value. Omit it for an indeterminate syncing treatment. */
+    progress?: number;
+    /** Accessible label for the progress indicator. */
+    progressLabel?: string;
+    /** Optional supporting content revealed by the trailing chevron. */
+    children?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/**
+ * A single, shared status row for data-source connections. It covers setup,
+ * active syncing, healthy connections, and recoverable errors without making
+ * each product recreate the layout or semantic colour treatment.
+ */
+declare function ConnectionStatusBar({ state, name, description, facts, action, actions, progress, progressLabel, children, open, defaultOpen, onOpenChange, className, }: ConnectionStatusBarProps): react_jsx_runtime.JSX.Element;
+
+export { ConnectionStatusBar, type ConnectionStatusBarAction, type ConnectionStatusBarFact, type ConnectionStatusBarProps, type ConnectionStatusBarState };

package/dist/primitives/connection-status-bar.d.ts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, HTMLAttributeAnchorTarget } from 'react';
+import { BadgeVariant } from './badge.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type ConnectionStatusBarState = "disconnected" | "syncing" | "connected" | "error";
+interface ConnectionStatusBarAction {
+    label: ReactNode;
+    ariaLabel?: string;
+    onClick?: () => void;
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
+    external?: boolean;
+    iconOnly?: boolean;
+    disabled?: boolean;
+}
+interface ConnectionStatusBarFact {
+    label: ReactNode;
+    variant?: BadgeVariant;
+}
+interface ConnectionStatusBarProps {
+    state: ConnectionStatusBarState;
+    /** Integration name, or the setup prompt before a source is connected. */
+    name: ReactNode;
+    /** Current activity or health summary. */
+    description?: ReactNode;
+    /** Compact, structured values displayed as separate data badges. */
+    facts?: readonly ConnectionStatusBarFact[];
+    /** One primary action retained for backwards compatibility. */
+    action?: ConnectionStatusBarAction;
+    /** Compact action group, rendered in the supplied order. */
+    actions?: readonly ConnectionStatusBarAction[];
+    /** A real 0–100 value. Omit it for an indeterminate syncing treatment. */
+    progress?: number;
+    /** Accessible label for the progress indicator. */
+    progressLabel?: string;
+    /** Optional supporting content revealed by the trailing chevron. */
+    children?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/**
+ * A single, shared status row for data-source connections. It covers setup,
+ * active syncing, healthy connections, and recoverable errors without making
+ * each product recreate the layout or semantic colour treatment.
+ */
+declare function ConnectionStatusBar({ state, name, description, facts, action, actions, progress, progressLabel, children, open, defaultOpen, onOpenChange, className, }: ConnectionStatusBarProps): react_jsx_runtime.JSX.Element;
+
+export { ConnectionStatusBar, type ConnectionStatusBarAction, type ConnectionStatusBarFact, type ConnectionStatusBarProps, type ConnectionStatusBarState };