@epicbagel/saas-kit 0.0.0-stage → 1.0.0

package/dist/primitives/connection.d.ts

@@ -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 };

package/dist/primitives/connection.js

@@ -0,0 +1,206 @@
+"use client";
+import {
+  StatusBadge
+} from "../chunk-GMJWBGTJ.js";
+import {
+  PageHeaderActions
+} from "../chunk-QNZYQLNP.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "../chunk-3QT5VYZ3.js";
+import "../chunk-V4LE2HWP.js";
+import {
+  Text
+} from "../chunk-EIY5LLSP.js";
+import {
+  Callout
+} from "../chunk-GL5CV4FF.js";
+import "../chunk-D4ZL2OEQ.js";
+import {
+  Alert,
+  AlertDescription
+} from "../chunk-R4AIM3BQ.js";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "../chunk-FLPYZNWZ.js";
+import {
+  buttonVariants
+} from "../chunk-HQRWRRZJ.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/connection.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "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] = useState(false);
+  const [confirmIdx, setConfirmIdx] = useState(null);
+  const [formIdx, setFormIdx] = useState(null);
+  const s = STATUS[status];
+  const hasActions = Boolean(actions && actions.length > 0);
+  const confirming = confirmIdx == null ? null : actions?.[confirmIdx];
+  const formAction = formIdx == null ? null : actions?.[formIdx];
+  const confirmation = confirming?.confirm;
+  const formDialog = formAction?.dialog;
+  const responsiveActions = [
+    ...primaryAction ? [
+      {
+        id: "connection-primary",
+        label: primaryAction.label,
+        variant: "default",
+        priority: "primary",
+        disabled: primaryAction.disabled,
+        onSelect: () => {
+          if (primaryAction.dialog) setPrimaryDialogOpen(true);
+          else primaryAction.onClick?.();
+        }
+      }
+    ] : [],
+    ...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 action.onClick?.();
+          }
+        }))
+      }
+    ] : []
+  ];
+  const hasSecondary = Boolean(meta || description || children || error);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "connection",
+      className: cn(
+        "flex flex-col gap-3 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+          logo && /* @__PURE__ */ jsx("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__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-base font-medium text-foreground", children: name }),
+            hasSecondary && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-col gap-2", children: [
+              description && /* @__PURE__ */ jsx(Text, { variant: "small", className: "text-muted-foreground", children: description }),
+              meta && /* @__PURE__ */ jsx(Text, { variant: "small", className: "truncate text-muted-foreground", children: meta }),
+              children && /* @__PURE__ */ jsx(Callout, { padding: "sm", className: "mt-1 flex flex-col gap-2", children }),
+              error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", className: "mt-1", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "connection-controls",
+            className: cn(
+              "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__ */ jsx(StatusBadge, { tone: s.tone, children: statusLabel ?? s.label }),
+              responsiveActions.length > 0 && /* @__PURE__ */ jsx(PageHeaderActions, { actions: responsiveActions, mobileLabel: "Actions" })
+            ]
+          }
+        ),
+        primaryAction?.dialog && /* @__PURE__ */ jsx(Dialog, { open: primaryDialogOpen, onOpenChange: setPrimaryDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: primaryAction.dialog.title ?? primaryAction.label }),
+            primaryAction.dialog.description && /* @__PURE__ */ jsx(DialogDescription, { children: primaryAction.dialog.description })
+          ] }),
+          primaryAction.dialog.content(() => setPrimaryDialogOpen(false))
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          AlertDialog,
+          {
+            open: confirming != null,
+            onOpenChange: (open) => !open && setConfirmIdx(null),
+            children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+              /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+                /* @__PURE__ */ jsx(AlertDialogTitle, { children: confirmation?.title ?? "Are you sure?" }),
+                confirmation?.description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: confirmation.description })
+              ] }),
+              /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+                /* @__PURE__ */ jsx(AlertDialogCancel, { children: confirmation?.cancelLabel ?? "Cancel" }),
+                /* @__PURE__ */ jsx(
+                  AlertDialogAction,
+                  {
+                    onClick: () => {
+                      confirming?.onClick?.();
+                      setConfirmIdx(null);
+                    },
+                    className: confirming?.destructive ? buttonVariants({ variant: "destructive" }) : void 0,
+                    children: confirmation?.confirmLabel ?? confirming?.label
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            open: formAction != null,
+            onOpenChange: (open) => !open && setFormIdx(null),
+            children: /* @__PURE__ */ jsx(DialogContent, { children: formDialog && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                /* @__PURE__ */ jsx(DialogTitle, { children: formDialog.title ?? formAction?.label }),
+                formDialog.description && /* @__PURE__ */ jsx(DialogDescription, { children: formDialog.description })
+              ] }),
+              formDialog.content(() => setFormIdx(null))
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function ConnectionList({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("divide-y divide-border", className), children });
+}
+export {
+  Connection,
+  ConnectionList
+};

package/dist/primitives/contact-header.cjs

@@ -0,0 +1,60 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/contact-header.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function ContactHeader({
+  avatar,
+  name,
+  status,
+  meta,
+  actions,
+  onClose,
+  closeLabel = "Close",
+  className,
+  spacing = "default"
+}) {
+  const hasTrailing = !!actions || !!onClose;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex items-start gap-4", spacing === "default" && "mb-6", className), children: [
+    avatar && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "shrink-0", children: avatar }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "min-w-0 text-xl font-semibold tracking-tight md:text-2xl", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "inline-flex min-w-0 max-w-full items-center gap-2", children: [
+          name,
+          status
+        ] }) }),
+        hasTrailing && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex shrink-0 items-center gap-1.5", children: [
+          actions,
+          onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": closeLabel,
+              className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  className: "h-4 w-4",
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M18 6 6 18M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      meta && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: meta })
+    ] })
+  ] });
+}
+
+
+exports.ContactHeader = ContactHeader;

package/dist/primitives/contact-header.d.cts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ContactHeaderProps {
+    /** Avatar or avatar uploader. Sized by the caller; 44–48px reads best. */
+    avatar?: ReactNode;
+    /** The person's name — plain text, or an inline editor. */
+    name: ReactNode;
+    /**
+     * A marker that belongs ON the name line: an unread dot, a "needs contact"
+     * indicator, a verification tick. Kept out of `meta` so it can't be pushed
+     * onto the second line when the chips wrap.
+     */
+    status?: ReactNode;
+    /**
+     * Secondary identity under the name — role and company, typically as chips
+     * or inline editors. Wraps freely.
+     */
+    meta?: ReactNode;
+    /** Reach-out controls. Sits on the name line, right-aligned. */
+    actions?: ReactNode;
+    /** Renders a close control alongside the actions. Omit outside a panel. */
+    onClose?: () => void;
+    closeLabel?: string;
+    className?: string;
+    spacing?: "none" | "default";
+}
+/**
+ * The identity block at the top of a contact view — avatar, name, role and
+ * company, and the ways to reach them.
+ *
+ * Exists because composing this from a page header goes subtly wrong. A page
+ * header IS a row: title left, actions right, `justify-between` between them. Put it
+ * in a column beside an avatar and that row collapses to the column's width,
+ * so the actions have nowhere to go but underneath — a third stacked band with
+ * a lone icon in it, and a wide empty gutter to the right of the name. Its
+ * page-level `text-3xl` and `mb-6` are tuned for a route heading, not for
+ * sitting next to a 44px avatar.
+ *
+ * So this owns the whole composition instead:
+ *   - one row: avatar, then a column of (name + actions) over (meta)
+ *   - the actions share the name's line, which is what closes the gutter and
+ *     removes the orphaned band
+ *   - the close control joins the actions, so there's a single right-hand
+ *     cluster rather than a × floating in the corner
+ *   - the name steps down to text-xl/2xl — a contact is the subject of a
+ *     panel, not the title of a page
+ *
+ * Every slot is a ReactNode, so the same header serves a read-only card and a
+ * fully editable detail view without knowing which it is.
+ */
+declare function ContactHeader({ avatar, name, status, meta, actions, onClose, closeLabel, className, spacing, }: ContactHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { ContactHeader, type ContactHeaderProps };

package/dist/primitives/contact-header.d.ts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ContactHeaderProps {
+    /** Avatar or avatar uploader. Sized by the caller; 44–48px reads best. */
+    avatar?: ReactNode;
+    /** The person's name — plain text, or an inline editor. */
+    name: ReactNode;
+    /**
+     * A marker that belongs ON the name line: an unread dot, a "needs contact"
+     * indicator, a verification tick. Kept out of `meta` so it can't be pushed
+     * onto the second line when the chips wrap.
+     */
+    status?: ReactNode;
+    /**
+     * Secondary identity under the name — role and company, typically as chips
+     * or inline editors. Wraps freely.
+     */
+    meta?: ReactNode;
+    /** Reach-out controls. Sits on the name line, right-aligned. */
+    actions?: ReactNode;
+    /** Renders a close control alongside the actions. Omit outside a panel. */
+    onClose?: () => void;
+    closeLabel?: string;
+    className?: string;
+    spacing?: "none" | "default";
+}
+/**
+ * The identity block at the top of a contact view — avatar, name, role and
+ * company, and the ways to reach them.
+ *
+ * Exists because composing this from a page header goes subtly wrong. A page
+ * header IS a row: title left, actions right, `justify-between` between them. Put it
+ * in a column beside an avatar and that row collapses to the column's width,
+ * so the actions have nowhere to go but underneath — a third stacked band with
+ * a lone icon in it, and a wide empty gutter to the right of the name. Its
+ * page-level `text-3xl` and `mb-6` are tuned for a route heading, not for
+ * sitting next to a 44px avatar.
+ *
+ * So this owns the whole composition instead:
+ *   - one row: avatar, then a column of (name + actions) over (meta)
+ *   - the actions share the name's line, which is what closes the gutter and
+ *     removes the orphaned band
+ *   - the close control joins the actions, so there's a single right-hand
+ *     cluster rather than a × floating in the corner
+ *   - the name steps down to text-xl/2xl — a contact is the subject of a
+ *     panel, not the title of a page
+ *
+ * Every slot is a ReactNode, so the same header serves a read-only card and a
+ * fully editable detail view without knowing which it is.
+ */
+declare function ContactHeader({ avatar, name, status, meta, actions, onClose, closeLabel, className, spacing, }: ContactHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { ContactHeader, type ContactHeaderProps };

package/dist/primitives/contact-header.js

@@ -0,0 +1,60 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/contact-header.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ContactHeader({
+  avatar,
+  name,
+  status,
+  meta,
+  actions,
+  onClose,
+  closeLabel = "Close",
+  className,
+  spacing = "default"
+}) {
+  const hasTrailing = !!actions || !!onClose;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-4", spacing === "default" && "mb-6", className), children: [
+    avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("h1", { className: "min-w-0 text-xl font-semibold tracking-tight md:text-2xl", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 max-w-full items-center gap-2", children: [
+          name,
+          status
+        ] }) }),
+        hasTrailing && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+          actions,
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": closeLabel,
+              className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  className: "h-4 w-4",
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      meta && /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: meta })
+    ] })
+  ] });
+}
+export {
+  ContactHeader
+};

package/dist/primitives/copy-button.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkVKIGJNJRcjs = require('../chunk-VKIGJNJR.cjs');
+require('../chunk-L4DH72UF.cjs');
+require('../chunk-4LXN6GLZ.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.CopyButton = _chunkVKIGJNJRcjs.CopyButton;

package/dist/primitives/copy-button.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { ButtonProps } from './button.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface CopyButtonProps extends Omit<ButtonProps, "onClick" | "children"> {
+    /** The text to copy when clicked. */
+    text: string;
+    /** Optional label shown next to the icon. Omit for an icon-only button. */
+    label?: ReactNode;
+    /** Label shown after a successful copy. Defaults to `label`. */
+    copiedLabel?: ReactNode;
+    /** ms before the success state reverts. Defaults to 2000. */
+    resetAfter?: number;
+    /** Fired after `navigator.clipboard.writeText` resolves with success/failure. */
+    onCopied?: (success: boolean) => void;
+}
+declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { CopyButton, type CopyButtonProps };

package/dist/primitives/copy-button.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { ButtonProps } from './button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface CopyButtonProps extends Omit<ButtonProps, "onClick" | "children"> {
+    /** The text to copy when clicked. */
+    text: string;
+    /** Optional label shown next to the icon. Omit for an icon-only button. */
+    label?: ReactNode;
+    /** Label shown after a successful copy. Defaults to `label`. */
+    copiedLabel?: ReactNode;
+    /** ms before the success state reverts. Defaults to 2000. */
+    resetAfter?: number;
+    /** Fired after `navigator.clipboard.writeText` resolves with success/failure. */
+    onCopied?: (success: boolean) => void;
+}
+declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { CopyButton, type CopyButtonProps };

package/dist/primitives/copy-button.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  CopyButton
+} from "../chunk-NW3OWKBN.js";
+import "../chunk-HQRWRRZJ.js";
+import "../chunk-ZWZAAGQF.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  CopyButton
+};

package/dist/primitives/count-badge.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkVGTINL5Qcjs = require('../chunk-VGTINL5Q.cjs');
+require('../chunk-I6GUOEBO.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.CountBadge = _chunkVGTINL5Qcjs.CountBadge;

package/dist/primitives/count-badge.d.cts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BadgeProps } from './badge.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'react';
+
+interface CountBadgeProps extends Omit<BadgeProps, "as" | "children" | "size" | "shrink"> {
+    /** Theme colour. Defaults to destructive; use secondary for neutral totals. */
+    variant?: BadgeProps["variant"];
+    /** Number or compact count label, for example `12`, `9+`, or `…`. */
+    value: number | string;
+}
+/**
+ * Compact numeric status badge with stable geometry.
+ *
+ * A single character is a true 20px circle. Longer values grow horizontally
+ * while retaining a 20px height, centred text, and tabular numerals.
+ */
+declare function CountBadge({ value, variant, className, ...props }: CountBadgeProps): react_jsx_runtime.JSX.Element;
+
+export { CountBadge, type CountBadgeProps };