@epicbagel/saas-kit 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,243 @@
+"use client";
+import {
+  Badge
+} from "../chunk-D4ZL2OEQ.js";
+import {
+  Button
+} from "../chunk-HQRWRRZJ.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/connection-status-bar.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import {
+  AlertCircle,
+  CheckCircle2,
+  ChevronDown,
+  ExternalLink,
+  Plug,
+  RefreshCw
+} from "lucide-react";
+import {
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var statePresentation = {
+  disconnected: { icon: Plug, iconClassName: "text-muted-foreground" },
+  syncing: { icon: RefreshCw, iconClassName: "text-blue-600 dark:text-blue-400" },
+  connected: { icon: CheckCircle2, iconClassName: "text-emerald-600 dark:text-emerald-400" },
+  error: { icon: AlertCircle, iconClassName: "text-destructive" }
+};
+function StatusAction({
+  action,
+  state
+}) {
+  const external = action.external || action.target === "_blank";
+  const ariaLabel = action.ariaLabel ?? (typeof action.label === "string" ? action.label : void 0);
+  const showSyncIcon = !external && (state === "connected" || state === "syncing");
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    showSyncIcon ? /* @__PURE__ */ jsx(
+      RefreshCw,
+      {
+        "aria-hidden": "true",
+        className: state === "syncing" ? "animate-spin" : void 0
+      }
+    ) : null,
+    action.iconOnly ? null : action.label,
+    external ? /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": "true" }) : null
+  ] });
+  const className = cn(
+    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__ */ jsx(Button, { asChild: true, variant, size, className, children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: action.href,
+        target: 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;
+          }
+          action.onClick?.();
+        },
+        children: content
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    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] = useState(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 = actions ?? (action ? [action] : []);
+  const setOpen = (nextOpen) => {
+    if (!controlled) setUncontrolledOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  };
+  return /* @__PURE__ */ jsxs(
+    CollapsiblePrimitive.Root,
+    {
+      open: isOpen,
+      onOpenChange: setOpen,
+      "data-slot": "connection-status-bar",
+      "data-status": state,
+      className: cn(
+        "overflow-hidden rounded-xl border border-border bg-background shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "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__ */ jsxs(
+                "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__ */ jsx("span", { className: "flex h-11 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
+                      StateIcon,
+                      {
+                        "aria-hidden": "true",
+                        className: cn(
+                          "size-5",
+                          state === "syncing" && "animate-spin",
+                          presentation.iconClassName
+                        )
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3 sm:min-h-11 sm:gap-4", children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex min-w-0 shrink items-center truncate whitespace-nowrap text-sm font-semibold leading-none text-foreground", children: name }),
+                      description || facts?.length ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "h-5 w-px shrink-0 bg-border" }) : null,
+                      description || facts?.length ? /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          "data-slot": "connection-status-summary",
+                          className: "flex min-w-0 flex-1 flex-nowrap items-center gap-2 overflow-hidden",
+                          children: [
+                            description ? /* @__PURE__ */ jsx("div", { className: "min-w-0 truncate whitespace-nowrap text-sm leading-none text-muted-foreground", children: description }) : null,
+                            facts?.map((fact, index) => /* @__PURE__ */ jsx(
+                              Badge,
+                              {
+                                "data-status-fact": "true",
+                                variant: fact.variant ?? "default",
+                                size: "micro",
+                                padding: "roomy",
+                                weight: "semibold",
+                                shrink: true,
+                                transform: "uppercase",
+                                className: "whitespace-nowrap tabular-nums",
+                                children: fact.label
+                              },
+                              index
+                            ))
+                          ]
+                        }
+                      ) : null
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2 sm:gap-3", children: [
+                state === "syncing" ? /* @__PURE__ */ jsx(
+                  "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__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "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__ */ jsx(
+                  StatusAction,
+                  {
+                    action: visibleAction,
+                    state
+                  },
+                  visibleAction.ariaLabel ?? (typeof visibleAction.label === "string" ? visibleAction.label : index)
+                )),
+                children ? /* @__PURE__ */ jsx(CollapsiblePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "quiet",
+                    size: "icon-sm",
+                    "aria-label": isOpen ? "Hide connection details" : "Show connection details",
+                    "aria-expanded": isOpen,
+                    children: /* @__PURE__ */ jsx(
+                      ChevronDown,
+                      {
+                        "aria-hidden": "true",
+                        className: cn("transition-transform", isOpen && "rotate-180")
+                      }
+                    )
+                  }
+                ) }) : null
+              ] })
+            ]
+          }
+        ),
+        children ? /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, { children: /* @__PURE__ */ jsx("div", { "data-slot": "connection-status-details", className: "border-t border-border px-5 py-4", children }) }) : null
+      ]
+    }
+  );
+}
+export {
+  ConnectionStatusBar
+};

package/dist/primitives/connection.cjs

@@ -0,0 +1,206 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _chunk2HTYXBDUcjs = require('../chunk-2HTYXBDU.cjs');
+
+
+var _chunkWQJKUKBLcjs = require('../chunk-WQJKUKBL.cjs');
+
+
+
+
+
+
+var _chunkWDXEJDMOcjs = require('../chunk-WDXEJDMO.cjs');
+require('../chunk-ZAITUDYD.cjs');
+
+
+var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
+
+
+var _chunkCTYOW3V2cjs = require('../chunk-CTYOW3V2.cjs');
+require('../chunk-I6GUOEBO.cjs');
+
+
+
+var _chunk667ZCM4Xcjs = require('../chunk-667ZCM4X.cjs');
+
+
+
+
+
+
+
+
+
+var _chunk23UMHZ4Scjs = require('../chunk-23UMHZ4S.cjs');
+
+
+var _chunkL4DH72UFcjs = require('../chunk-L4DH72UF.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/connection.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var STATUS = {
+  connected: { label: "Connected", tone: "success" },
+  syncing: { label: "Syncing", tone: "info" },
+  error: { label: "Error", tone: "error" },
+  disconnected: { label: "Not connected", tone: "neutral" }
+};
+function Connection({
+  name,
+  logo,
+  status = "disconnected",
+  statusLabel,
+  meta,
+  description,
+  primaryAction,
+  children,
+  actions,
+  error,
+  className
+}) {
+  const [primaryDialogOpen, setPrimaryDialogOpen] = _react.useState.call(void 0, false);
+  const [confirmIdx, setConfirmIdx] = _react.useState.call(void 0, null);
+  const [formIdx, setFormIdx] = _react.useState.call(void 0, null);
+  const s = STATUS[status];
+  const hasActions = Boolean(actions && actions.length > 0);
+  const confirming = confirmIdx == null ? null : _optionalChain([actions, 'optionalAccess', _ => _[confirmIdx]]);
+  const formAction = formIdx == null ? null : _optionalChain([actions, 'optionalAccess', _2 => _2[formIdx]]);
+  const confirmation = _optionalChain([confirming, 'optionalAccess', _3 => _3.confirm]);
+  const formDialog = _optionalChain([formAction, 'optionalAccess', _4 => _4.dialog]);
+  const responsiveActions = [
+    ...primaryAction ? [
+      {
+        id: "connection-primary",
+        label: primaryAction.label,
+        variant: "default",
+        priority: "primary",
+        disabled: primaryAction.disabled,
+        onSelect: () => {
+          if (primaryAction.dialog) setPrimaryDialogOpen(true);
+          else _optionalChain([primaryAction, 'access', _5 => _5.onClick, 'optionalCall', _6 => _6()]);
+        }
+      }
+    ] : [],
+    ...hasActions ? [
+      {
+        id: "connection-settings",
+        label: "Settings",
+        variant: "outline",
+        priority: "secondary",
+        items: actions.map((action, index) => ({
+          id: `connection-setting-${index}`,
+          label: action.label,
+          icon: action.icon,
+          description: action.description,
+          disabled: action.disabled,
+          tone: action.destructive ? "destructive" : "default",
+          separatorBefore: index > 0,
+          onSelect: () => {
+            if (action.dialog) setFormIdx(index);
+            else if (action.confirm) setConfirmIdx(index);
+            else _optionalChain([action, 'access', _7 => _7.onClick, 'optionalCall', _8 => _8()]);
+          }
+        }))
+      }
+    ] : []
+  ];
+  const hasSecondary = Boolean(meta || description || children || error);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "connection",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "flex flex-col gap-3 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+          logo && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-background text-muted-foreground", children: logo }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "truncate text-base font-medium text-foreground", children: name }),
+            hasSecondary && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-0.5 flex flex-col gap-2", children: [
+              description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { variant: "small", className: "text-muted-foreground", children: description }),
+              meta && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk373W6VADcjs.Text, { variant: "small", className: "truncate text-muted-foreground", children: meta }),
+              children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCTYOW3V2cjs.Callout, { padding: "sm", className: "mt-1 flex flex-col gap-2", children }),
+              error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk667ZCM4Xcjs.Alert, { variant: "destructive", className: "mt-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk667ZCM4Xcjs.AlertDescription, { children: error }) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "div",
+          {
+            "data-slot": "connection-controls",
+            className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+              "flex w-full shrink-0 items-center justify-between gap-2 sm:w-auto sm:justify-end",
+              logo && "pl-12 sm:pl-0"
+            ),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2HTYXBDUcjs.StatusBadge, { tone: s.tone, children: _nullishCoalesce(statusLabel, () => ( s.label)) }),
+              responsiveActions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWQJKUKBLcjs.PageHeaderActions, { actions: responsiveActions, mobileLabel: "Actions" })
+            ]
+          }
+        ),
+        _optionalChain([primaryAction, 'optionalAccess', _9 => _9.dialog]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.Dialog, { open: primaryDialogOpen, onOpenChange: setPrimaryDialogOpen, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWDXEJDMOcjs.DialogContent, { children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWDXEJDMOcjs.DialogHeader, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.DialogTitle, { children: _nullishCoalesce(primaryAction.dialog.title, () => ( primaryAction.label)) }),
+            primaryAction.dialog.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.DialogDescription, { children: primaryAction.dialog.description })
+          ] }),
+          primaryAction.dialog.content(() => setPrimaryDialogOpen(false))
+        ] }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunk23UMHZ4Scjs.AlertDialog,
+          {
+            open: confirming != null,
+            onOpenChange: (open) => !open && setConfirmIdx(null),
+            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk23UMHZ4Scjs.AlertDialogContent, { children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk23UMHZ4Scjs.AlertDialogHeader, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23UMHZ4Scjs.AlertDialogTitle, { children: _nullishCoalesce(_optionalChain([confirmation, 'optionalAccess', _10 => _10.title]), () => ( "Are you sure?")) }),
+                _optionalChain([confirmation, 'optionalAccess', _11 => _11.description]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23UMHZ4Scjs.AlertDialogDescription, { children: confirmation.description })
+              ] }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk23UMHZ4Scjs.AlertDialogFooter, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk23UMHZ4Scjs.AlertDialogCancel, { children: _nullishCoalesce(_optionalChain([confirmation, 'optionalAccess', _12 => _12.cancelLabel]), () => ( "Cancel")) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _chunk23UMHZ4Scjs.AlertDialogAction,
+                  {
+                    onClick: () => {
+                      _optionalChain([confirming, 'optionalAccess', _13 => _13.onClick, 'optionalCall', _14 => _14()]);
+                      setConfirmIdx(null);
+                    },
+                    className: _optionalChain([confirming, 'optionalAccess', _15 => _15.destructive]) ? _chunkL4DH72UFcjs.buttonVariants.call(void 0, { variant: "destructive" }) : void 0,
+                    children: _nullishCoalesce(_optionalChain([confirmation, 'optionalAccess', _16 => _16.confirmLabel]), () => ( _optionalChain([confirming, 'optionalAccess', _17 => _17.label])))
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkWDXEJDMOcjs.Dialog,
+          {
+            open: formAction != null,
+            onOpenChange: (open) => !open && setFormIdx(null),
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.DialogContent, { children: formDialog && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWDXEJDMOcjs.DialogHeader, { children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.DialogTitle, { children: _nullishCoalesce(formDialog.title, () => ( _optionalChain([formAction, 'optionalAccess', _18 => _18.label]))) }),
+                formDialog.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWDXEJDMOcjs.DialogDescription, { children: formDialog.description })
+              ] }),
+              formDialog.content(() => setFormIdx(null))
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function ConnectionList({ children, className }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "divide-y divide-border", className), children });
+}
+
+
+
+exports.Connection = Connection; exports.ConnectionList = ConnectionList;

package/dist/primitives/connection.d.cts

@@ -0,0 +1,126 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ConnectionStatus = "connected" | "disconnected" | "syncing" | "error";
+interface ConnectionAction {
+    label: ReactNode;
+    onClick?: () => void;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Muted sub-line under the label (e.g. "Re-fetch the last 90 days"). */
+    description?: ReactNode;
+    disabled?: boolean;
+    /**
+     * Red treatment in the menu, and a destructive (red) confirm button. The
+     * common treatment for Disconnect / Remove / Revoke.
+     */
+    destructive?: boolean;
+    /**
+     * Require confirmation before `onClick` fires. Just pass the dialog copy —
+     * the menu item opens an AlertDialog and `onClick` runs only on confirm.
+     * Pair with `destructive` for the standard Disconnect pattern.
+     */
+    confirm?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        confirmLabel?: ReactNode;
+        cancelLabel?: ReactNode;
+    };
+    /**
+     * Open a form dialog when the menu item is selected — for setup that needs
+     * input (an API key, a webhook generator). `content` receives a `close`
+     * callback to dismiss the dialog (call it after a successful connect).
+     * Use this for configuration that belongs under the standard Settings menu.
+     */
+    dialog?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        content: (close: () => void) => ReactNode;
+    };
+}
+interface ConnectionPrimaryAction {
+    label: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Standard setup dialog opened by the primary action. */
+    dialog?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        content: (close: () => void) => ReactNode;
+    };
+}
+interface ConnectionProps {
+    /** Service name, e.g. "Gmail". */
+    name: ReactNode;
+    /** Logo / icon shown left of the name (a brand mark, lucide icon, …). */
+    logo?: ReactNode;
+    /** Status — drives the badge. Defaults to "disconnected". */
+    status?: ConnectionStatus;
+    /** Override the badge text (e.g. "Sign-in required"). */
+    statusLabel?: ReactNode;
+    /** Secondary line — e.g. "you@example.com · last synced 2h ago". */
+    meta?: ReactNode;
+    /** Help / description text under the header. */
+    description?: ReactNode;
+    /**
+     * The one visible row action, normally Connect. Connection owns its
+     * placement and sizing so every integration uses the same action pattern.
+     */
+    primaryAction?: ConnectionPrimaryAction;
+    /**
+     * Optional supporting content. Primary Connect and Settings controls belong
+     * in `primaryAction` and `actions`; do not recreate them here.
+     */
+    children?: ReactNode;
+    /**
+     * Management actions (Sync, Re-sync, Disconnect, …) collapsed into the
+     * visible Settings menu on the right of the row. Mark Disconnect with
+     * `{ destructive: true, confirm: { … } }` for the standard guarded treatment.
+     */
+    actions?: ConnectionAction[];
+    /** Error — rendered as a destructive Alert under the row. */
+    error?: ReactNode;
+    className?: string;
+}
+/**
+ * Connection — one external service in a settings/onboarding connections list.
+ *
+ * Handles every state from one shape: **disconnected** (a visible Connect
+ * action), **connected** (status + meta + a Settings menu of management
+ * `actions`), **syncing**, and **error** (a destructive Alert).
+ * Local config — logo, name, description, status label — is all per-connection
+ * props, so the same primitive serves Gmail, Outlook, an API-key integration,
+ * anything. Stack several inside `<ConnectionList>`.
+ *
+ * ```tsx
+ * <Connection
+ *   name="Gmail"
+ *   logo={<Mail className="h-5 w-5" />}
+ *   status="connected"
+ *   meta="you@example.com · last synced 2h ago"
+ *   primaryAction={{ label: "Connect", onClick: connect }}
+ *   actions={[
+ *     { label: "Sync now", onClick: sync },
+ *     {
+ *       label: "Disconnect",
+ *       onClick: disconnect,
+ *       destructive: true,
+ *       confirm: {
+ *         title: "Disconnect Gmail?",
+ *         description: "Syncing stops. You can reconnect anytime.",
+ *         confirmLabel: "Disconnect",
+ *       },
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare function Connection({ name, logo, status, statusLabel, meta, description, primaryAction, children, actions, error, className, }: ConnectionProps): react_jsx_runtime.JSX.Element;
+interface ConnectionListProps {
+    children: ReactNode;
+    className?: string;
+}
+/** A divided stack of `<Connection>`s. */
+declare function ConnectionList({ children, className }: ConnectionListProps): react_jsx_runtime.JSX.Element;
+
+export { Connection, type ConnectionAction, ConnectionList, type ConnectionListProps, type ConnectionPrimaryAction, type ConnectionProps, type ConnectionStatus };