@epicbagel/saas-kit 1.32.0 → 1.34.0

package/dist/primitives/responsive-dialog.cjs

@@ -9,9 +9,9 @@
 
 
 
-var _chunkAO56ET4Fcjs = require('../chunk-AO56ET4F.cjs');
-require('../chunk-WDXEJDMO.cjs');
+var _chunkBTHYGHOHcjs = require('../chunk-BTHYGHOH.cjs');
 require('../chunk-2BHI5ZWJ.cjs');
+require('../chunk-WDXEJDMO.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 
@@ -23,4 +23,4 @@ require('../chunk-KWLSBTB2.cjs');
 
 
 
-exports.ResponsiveDialog = _chunkAO56ET4Fcjs.ResponsiveDialog; exports.ResponsiveDialogBody = _chunkAO56ET4Fcjs.ResponsiveDialogBody; exports.ResponsiveDialogClose = _chunkAO56ET4Fcjs.ResponsiveDialogClose; exports.ResponsiveDialogContent = _chunkAO56ET4Fcjs.ResponsiveDialogContent; exports.ResponsiveDialogDescription = _chunkAO56ET4Fcjs.ResponsiveDialogDescription; exports.ResponsiveDialogFooter = _chunkAO56ET4Fcjs.ResponsiveDialogFooter; exports.ResponsiveDialogHeader = _chunkAO56ET4Fcjs.ResponsiveDialogHeader; exports.ResponsiveDialogTitle = _chunkAO56ET4Fcjs.ResponsiveDialogTitle; exports.ResponsiveDialogTrigger = _chunkAO56ET4Fcjs.ResponsiveDialogTrigger;
+exports.ResponsiveDialog = _chunkBTHYGHOHcjs.ResponsiveDialog; exports.ResponsiveDialogBody = _chunkBTHYGHOHcjs.ResponsiveDialogBody; exports.ResponsiveDialogClose = _chunkBTHYGHOHcjs.ResponsiveDialogClose; exports.ResponsiveDialogContent = _chunkBTHYGHOHcjs.ResponsiveDialogContent; exports.ResponsiveDialogDescription = _chunkBTHYGHOHcjs.ResponsiveDialogDescription; exports.ResponsiveDialogFooter = _chunkBTHYGHOHcjs.ResponsiveDialogFooter; exports.ResponsiveDialogHeader = _chunkBTHYGHOHcjs.ResponsiveDialogHeader; exports.ResponsiveDialogTitle = _chunkBTHYGHOHcjs.ResponsiveDialogTitle; exports.ResponsiveDialogTrigger = _chunkBTHYGHOHcjs.ResponsiveDialogTrigger;

package/dist/primitives/responsive-dialog.js

@@ -9,9 +9,9 @@ import {
   ResponsiveDialogHeader,
   ResponsiveDialogTitle,
   ResponsiveDialogTrigger
-} from "../chunk-CRZ4INEJ.js";
-import "../chunk-3QT5VYZ3.js";
+} from "../chunk-JTI4244T.js";
 import "../chunk-4HWCNRK4.js";
+import "../chunk-3QT5VYZ3.js";
 import "../chunk-G6SRSWXB.js";
 export {
   ResponsiveDialog,

package/dist/primitives/responsive-embed.cjs

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/responsive-embed.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function ResponsiveEmbed({
+  src,
+  title,
+  allow,
+  allowFullScreen = true,
+  marginTop = "none",
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "aspect-video overflow-hidden rounded-lg border border-border bg-muted", marginTop === "md" && "mt-4", className), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "iframe",
+    {
+      src,
+      title,
+      allow,
+      allowFullScreen,
+      className: "h-full w-full border-0"
+    }
+  ) });
+}
+
+
+exports.ResponsiveEmbed = ResponsiveEmbed;

package/dist/primitives/responsive-embed.d.cts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ResponsiveEmbedProps {
+    src: string;
+    title: string;
+    allow?: string;
+    allowFullScreen?: boolean;
+    className?: string;
+    marginTop?: "none" | "md";
+}
+/** Generic 16:9 iframe container for trusted external media embeds. */
+declare function ResponsiveEmbed({ src, title, allow, allowFullScreen, marginTop, className, }: ResponsiveEmbedProps): react_jsx_runtime.JSX.Element;
+
+export { ResponsiveEmbed, type ResponsiveEmbedProps };

package/dist/primitives/responsive-embed.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ResponsiveEmbedProps {
+    src: string;
+    title: string;
+    allow?: string;
+    allowFullScreen?: boolean;
+    className?: string;
+    marginTop?: "none" | "md";
+}
+/** Generic 16:9 iframe container for trusted external media embeds. */
+declare function ResponsiveEmbed({ src, title, allow, allowFullScreen, marginTop, className, }: ResponsiveEmbedProps): react_jsx_runtime.JSX.Element;
+
+export { ResponsiveEmbed, type ResponsiveEmbedProps };

package/dist/primitives/responsive-embed.js

@@ -0,0 +1,29 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/responsive-embed.tsx
+import { jsx } from "react/jsx-runtime";
+function ResponsiveEmbed({
+  src,
+  title,
+  allow,
+  allowFullScreen = true,
+  marginTop = "none",
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("aspect-video overflow-hidden rounded-lg border border-border bg-muted", marginTop === "md" && "mt-4", className), children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src,
+      title,
+      allow,
+      allowFullScreen,
+      className: "h-full w-full border-0"
+    }
+  ) });
+}
+export {
+  ResponsiveEmbed
+};

package/dist/primitives/save-bar.cjs

@@ -0,0 +1,91 @@
+"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 _chunkJDEXZGIYcjs = require('../chunk-JDEXZGIY.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/save-bar.tsx
+var _react = require('react');
+var _reactdom = require('react-dom');
+var _jsxruntime = require('react/jsx-runtime');
+function SaveBar({
+  isDirty,
+  saving = false,
+  onSave,
+  onDiscard,
+  saveLabel = "Save changes",
+  savingLabel = "Saving\u2026",
+  discardLabel = "Discard",
+  status,
+  containerClassName,
+  className,
+  width = "wide"
+}) {
+  const [mounted, setMounted] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => setMounted(true), []);
+  if (!mounted) return null;
+  const bar = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      role: "region",
+      "aria-label": "Save changes",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-sm",
+        // Lift above iOS home indicator / Safari URL bar
+        "pb-[env(safe-area-inset-bottom)]",
+        className
+      ),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+            "mx-auto px-4 md:px-6 py-3 flex items-center justify-between gap-3",
+            _nullishCoalesce(containerClassName, () => ( (width === "narrow" ? "max-w-3xl" : "max-w-5xl")))
+          ),
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "span",
+              {
+                className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                  "text-sm truncate transition-colors",
+                  isDirty ? "text-foreground" : "text-muted-foreground"
+                ),
+                children: _nullishCoalesce(status, () => ( (isDirty ? "Unsaved changes" : "All changes saved")))
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 shrink-0", children: [
+              onDiscard && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkJDEXZGIYcjs.Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: onDiscard,
+                  disabled: saving || !isDirty,
+                  children: discardLabel
+                }
+              ),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkJDEXZGIYcjs.Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  onClick: onSave,
+                  disabled: saving || !isDirty,
+                  children: saving ? savingLabel : saveLabel
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+  return _reactdom.createPortal.call(void 0, bar, document.body);
+}
+
+
+exports.SaveBar = SaveBar;

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface SaveBarProps {
+    /**
+     * Whether the form has unsaved changes. Controls the bar's active
+     * vs muted visual state and the enabled state of Save / Discard.
+     */
+    isDirty: boolean;
+    /** Whether a save is in flight. Disables both buttons. */
+    saving?: boolean;
+    /** Primary action — wired to your save handler. */
+    onSave: () => void;
+    /**
+     * Optional discard handler. When provided, renders a ghost "Discard"
+     * button alongside the save. Typically resets controlled state back to
+     * the initial server-supplied values.
+     */
+    onDiscard?: () => void;
+    saveLabel?: ReactNode;
+    /** Label shown while `saving` is true. Defaults to "Saving…". */
+    savingLabel?: ReactNode;
+    discardLabel?: ReactNode;
+    /**
+     * Status caption shown on the left. Defaults to "Unsaved changes"
+     * (when dirty) or "All changes saved" (when clean). Override for
+     * app-specific copy.
+     */
+    status?: ReactNode;
+    /** Outer container max-width class. Defaults to `max-w-5xl`. */
+    containerClassName?: string;
+    className?: string;
+    width?: "narrow" | "wide";
+}
+/**
+ * Sticky bottom action bar for editable form pages. ALWAYS visible on
+ * settings/form pages — a muted "All changes saved" state when clean,
+ * an active "Unsaved changes" state when dirty. One bar per page —
+ * fragmenting saves between sections forces users to think about
+ * partial commits.
+ *
+ * Why always-visible: users need to know a page is editable without
+ * having to type something first to discover the save affordance.
+ *
+ * For read-only pages (e.g. an API token display + rotate button), do
+ * NOT use this — use inline action buttons next to their context.
+ *
+ * The component is positioned `fixed inset-x-0 bottom-0` with safe-area
+ * padding for iOS home indicator / browser chrome. Add `pb-28` (or
+ * similar) to the page content so the bar doesn't cover the last
+ * section.
+ */
+declare function SaveBar({ isDirty, saving, onSave, onDiscard, saveLabel, savingLabel, discardLabel, status, containerClassName, className, width, }: SaveBarProps): React.ReactPortal | null;
+
+export { SaveBar, type SaveBarProps };

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface SaveBarProps {
+    /**
+     * Whether the form has unsaved changes. Controls the bar's active
+     * vs muted visual state and the enabled state of Save / Discard.
+     */
+    isDirty: boolean;
+    /** Whether a save is in flight. Disables both buttons. */
+    saving?: boolean;
+    /** Primary action — wired to your save handler. */
+    onSave: () => void;
+    /**
+     * Optional discard handler. When provided, renders a ghost "Discard"
+     * button alongside the save. Typically resets controlled state back to
+     * the initial server-supplied values.
+     */
+    onDiscard?: () => void;
+    saveLabel?: ReactNode;
+    /** Label shown while `saving` is true. Defaults to "Saving…". */
+    savingLabel?: ReactNode;
+    discardLabel?: ReactNode;
+    /**
+     * Status caption shown on the left. Defaults to "Unsaved changes"
+     * (when dirty) or "All changes saved" (when clean). Override for
+     * app-specific copy.
+     */
+    status?: ReactNode;
+    /** Outer container max-width class. Defaults to `max-w-5xl`. */
+    containerClassName?: string;
+    className?: string;
+    width?: "narrow" | "wide";
+}
+/**
+ * Sticky bottom action bar for editable form pages. ALWAYS visible on
+ * settings/form pages — a muted "All changes saved" state when clean,
+ * an active "Unsaved changes" state when dirty. One bar per page —
+ * fragmenting saves between sections forces users to think about
+ * partial commits.
+ *
+ * Why always-visible: users need to know a page is editable without
+ * having to type something first to discover the save affordance.
+ *
+ * For read-only pages (e.g. an API token display + rotate button), do
+ * NOT use this — use inline action buttons next to their context.
+ *
+ * The component is positioned `fixed inset-x-0 bottom-0` with safe-area
+ * padding for iOS home indicator / browser chrome. Add `pb-28` (or
+ * similar) to the page content so the bar doesn't cover the last
+ * section.
+ */
+declare function SaveBar({ isDirty, saving, onSave, onDiscard, saveLabel, savingLabel, discardLabel, status, containerClassName, className, width, }: SaveBarProps): React.ReactPortal | null;
+
+export { SaveBar, type SaveBarProps };

package/dist/primitives/save-bar.js

@@ -0,0 +1,91 @@
+"use client";
+"use client";
+import {
+  Button
+} from "../chunk-W326GKML.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/save-bar.tsx
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SaveBar({
+  isDirty,
+  saving = false,
+  onSave,
+  onDiscard,
+  saveLabel = "Save changes",
+  savingLabel = "Saving\u2026",
+  discardLabel = "Discard",
+  status,
+  containerClassName,
+  className,
+  width = "wide"
+}) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+  const bar = /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": "Save changes",
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 backdrop-blur-sm",
+        // Lift above iOS home indicator / Safari URL bar
+        "pb-[env(safe-area-inset-bottom)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "mx-auto px-4 md:px-6 py-3 flex items-center justify-between gap-3",
+            containerClassName ?? (width === "narrow" ? "max-w-3xl" : "max-w-5xl")
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-sm truncate transition-colors",
+                  isDirty ? "text-foreground" : "text-muted-foreground"
+                ),
+                children: status ?? (isDirty ? "Unsaved changes" : "All changes saved")
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+              onDiscard && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: onDiscard,
+                  disabled: saving || !isDirty,
+                  children: discardLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  onClick: onSave,
+                  disabled: saving || !isDirty,
+                  children: saving ? savingLabel : saveLabel
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+  return createPortal(bar, document.body);
+}
+export {
+  SaveBar
+};

package/dist/primitives/section.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkLELBCBDTcjs = require('../chunk-LELBCBDT.cjs');
+var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
 
 
-var _chunk373W6VADcjs = require('../chunk-373W6VAD.cjs');
+var _chunkLELBCBDTcjs = require('../chunk-LELBCBDT.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');

package/dist/primitives/section.js

@@ -1,10 +1,10 @@
 "use client";
-import {
-  Heading
-} from "../chunk-H2O6NMLZ.js";
 import {
   Text
 } from "../chunk-EIY5LLSP.js";
+import {
+  Heading
+} from "../chunk-H2O6NMLZ.js";
 import {
   cn
 } from "../chunk-G6SRSWXB.js";

package/dist/primitives/settings-list.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+"use client";
+
+
+
+var _chunkCXAFTEEPcjs = require('../chunk-CXAFTEEP.cjs');
+
+
+
+exports.SettingsList = _chunkCXAFTEEPcjs.SettingsList; exports.SettingsListContext = _chunkCXAFTEEPcjs.SettingsListContext;

package/dist/primitives/settings-list.d.cts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+declare const SettingsListContext: React.Context<{
+    /**
+     * True when the parent `<SettingsList>` contains exactly one section.
+     * Sections check this to suppress their own heading — the page's
+     * `<PageHeader>` already serves as the heading for a single-section
+     * page, and rendering a second one is "nested headers".
+     */
+    single: boolean;
+}>;
+interface SettingsListProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Wraps a vertical list of `<SettingsSection>`s.
+ *
+ * - One section: renders the section's content alone (heading suppressed
+ *   via context — the `<PageHeader>` already names the page).
+ * - Two or more: renders each section with `py-8` breathing room and a
+ *   `divide-y` horizontal line between them.
+ *
+ * Use this for EVERY settings/form page, even when there's only one
+ * section — the component decides whether to show structure.
+ */
+declare function SettingsList({ children, className }: SettingsListProps): react_jsx_runtime.JSX.Element | null;
+
+export { SettingsList, SettingsListContext, type SettingsListProps };

package/dist/primitives/settings-list.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+declare const SettingsListContext: React.Context<{
+    /**
+     * True when the parent `<SettingsList>` contains exactly one section.
+     * Sections check this to suppress their own heading — the page's
+     * `<PageHeader>` already serves as the heading for a single-section
+     * page, and rendering a second one is "nested headers".
+     */
+    single: boolean;
+}>;
+interface SettingsListProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Wraps a vertical list of `<SettingsSection>`s.
+ *
+ * - One section: renders the section's content alone (heading suppressed
+ *   via context — the `<PageHeader>` already names the page).
+ * - Two or more: renders each section with `py-8` breathing room and a
+ *   `divide-y` horizontal line between them.
+ *
+ * Use this for EVERY settings/form page, even when there's only one
+ * section — the component decides whether to show structure.
+ */
+declare function SettingsList({ children, className }: SettingsListProps): react_jsx_runtime.JSX.Element | null;
+
+export { SettingsList, SettingsListContext, type SettingsListProps };

package/dist/primitives/settings-list.js

@@ -0,0 +1,10 @@
+"use client";
+"use client";
+import {
+  SettingsList,
+  SettingsListContext
+} from "../chunk-2DCJ2SFU.js";
+export {
+  SettingsList,
+  SettingsListContext
+};

package/dist/primitives/settings-section.cjs

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkCXAFTEEPcjs = require('../chunk-CXAFTEEP.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/settings-section.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+function SettingsSection({
+  heading,
+  description,
+  action,
+  children,
+  className
+}) {
+  const { single } = _react.useContext.call(void 0, _chunkCXAFTEEPcjs.SettingsListContext);
+  const showHeader = !single && (heading || action || description);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "space-y-4", className), children: [
+    showHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-2", children: [
+      (heading || action) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-4", children: [
+        heading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-lg font-medium tracking-tight min-w-0", children: heading }),
+        action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "shrink-0", children: action })
+      ] }),
+      description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children })
+  ] });
+}
+
+
+exports.SettingsSection = SettingsSection;

package/dist/primitives/settings-section.d.cts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface SettingsSectionProps {
+    /**
+     * Section heading. Sentence-case, scannable, h2-level. Rendered to the
+     * LEFT of the action slot. Suppressed automatically when this section
+     * is the only child of a `<SettingsList>` — the page's `<PageHeader>`
+     * already serves that role in that case.
+     */
+    heading?: ReactNode;
+    /**
+     * One-line context shown under the heading. Use sparingly — most
+     * sections explain themselves through their input labels.
+     */
+    description?: ReactNode;
+    /**
+     * Right-aligned action slot, vertically aligned with the heading.
+     * Typically a `<CopyButton>`, link, or small icon button.
+     */
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * The atom for every settings/form page. ALWAYS this shape:
+ *
+ * ┌─────────────────────────────────────┐
+ * │ heading              [action right] │
+ * │ description (optional)              │
+ * └─────────────────────────────────────┘
+ *  content below
+ *
+ * Wrap one or more of these in a `<SettingsList>` so dividers, padding,
+ * and single-section heading suppression all flow from one place.
+ *
+ * Pages that have only one concern should still wrap their single
+ * section in `<SettingsList>` — the list quietly hides the heading and
+ * the PageHeader handles it instead. Keeps the consumer code uniform
+ * regardless of how many sections the page ends up with.
+ */
+declare function SettingsSection({ heading, description, action, children, className, }: SettingsSectionProps): react_jsx_runtime.JSX.Element;
+
+export { SettingsSection, type SettingsSectionProps };

package/dist/primitives/settings-section.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface SettingsSectionProps {
+    /**
+     * Section heading. Sentence-case, scannable, h2-level. Rendered to the
+     * LEFT of the action slot. Suppressed automatically when this section
+     * is the only child of a `<SettingsList>` — the page's `<PageHeader>`
+     * already serves that role in that case.
+     */
+    heading?: ReactNode;
+    /**
+     * One-line context shown under the heading. Use sparingly — most
+     * sections explain themselves through their input labels.
+     */
+    description?: ReactNode;
+    /**
+     * Right-aligned action slot, vertically aligned with the heading.
+     * Typically a `<CopyButton>`, link, or small icon button.
+     */
+    action?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * The atom for every settings/form page. ALWAYS this shape:
+ *
+ * ┌─────────────────────────────────────┐
+ * │ heading              [action right] │
+ * │ description (optional)              │
+ * └─────────────────────────────────────┘
+ *  content below
+ *
+ * Wrap one or more of these in a `<SettingsList>` so dividers, padding,
+ * and single-section heading suppression all flow from one place.
+ *
+ * Pages that have only one concern should still wrap their single
+ * section in `<SettingsList>` — the list quietly hides the heading and
+ * the PageHeader handles it instead. Keeps the consumer code uniform
+ * regardless of how many sections the page ends up with.
+ */
+declare function SettingsSection({ heading, description, action, children, className, }: SettingsSectionProps): react_jsx_runtime.JSX.Element;
+
+export { SettingsSection, type SettingsSectionProps };