@epicbagel/saas-kit 1.32.0 → 1.34.0

package/dist/primitives/floating-action-button.js

@@ -0,0 +1,65 @@
+"use client";
+"use client";
+import {
+  Button
+} from "../chunk-W326GKML.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/floating-action-button.tsx
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var FloatingActionButton = forwardRef(function FloatingActionButton2({
+  label,
+  icon,
+  visible = true,
+  bottom = "bottom-6",
+  side = "right",
+  asChild = false,
+  children,
+  className,
+  variant = "default",
+  size,
+  ...rest
+}, ref) {
+  const iconOnly = !asChild && label == null;
+  const labelNode = !iconOnly && label != null && /* @__PURE__ */ jsx("span", { className: icon ? "ml-1.5" : void 0, children: label });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": !visible,
+      className: cn(
+        "fixed z-40 transition-all duration-300 ease-out motion-reduce:transition-opacity",
+        bottom,
+        side === "right" && "right-6 md:right-8",
+        side === "left" && "left-6 md:left-8",
+        side === "center" && "left-1/2 -translate-x-1/2",
+        visible ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-3 pointer-events-none"
+      ),
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          asChild,
+          variant,
+          size: size ?? (iconOnly ? "icon" : "default"),
+          className: cn(
+            "shadow-lg",
+            iconOnly ? "rounded-full h-14 w-14" : "rounded-full px-5 h-12",
+            className
+          ),
+          tabIndex: visible ? void 0 : -1,
+          ...rest,
+          children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            labelNode
+          ] })
+        }
+      )
+    }
+  );
+});
+export {
+  FloatingActionButton
+};

package/dist/primitives/form-section.cjs

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/form-section.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+function FormSection({
+  label,
+  meta,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "space-y-3", className), children: [
+    (label || meta) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "font-mono text-[0.65rem] uppercase tracking-[0.18em] text-muted-foreground", children: label }),
+      meta && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "font-mono text-[0.65rem] uppercase tracking-wider text-muted-foreground", children: meta })
+    ] }),
+    children
+  ] });
+}
+function FormSectionList({ children, className }) {
+  const items = _react.Children.toArray(children).filter(Boolean);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "space-y-6", className), children: items.map((child, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: i === 0 ? void 0 : "border-t border-border pt-6",
+      children: child
+    },
+    i
+  )) });
+}
+
+
+
+exports.FormSection = FormSection; exports.FormSectionList = FormSectionList;

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

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FormSectionProps {
+    /**
+     * Mono uppercase tracking-wide label. Distinct from
+     * <SettingsSection>'s larger h2 heading — FormSection is sized for
+     * sub-areas inside a single pane (composer right-rail, sidebar form,
+     * multi-area editor) where the label reads as a field-group caption
+     * rather than a page heading.
+     */
+    label: ReactNode;
+    /**
+     * Right-aligned meta slot, baseline-aligned with the label. Use for
+     * small status hints: counts ("4 rules"), pending text ("Saving…"),
+     * a reset link. Heavier controls belong inside `children`.
+     */
+    meta?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Labelled section primitive for form panes. Compose inside a
+ * <FormSectionList> to get horizontal dividers + consistent vertical
+ * rhythm between adjacent sections.
+ */
+declare function FormSection({ label, meta, children, className, }: FormSectionProps): react_jsx_runtime.JSX.Element;
+interface FormSectionListProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Vertical stack of <FormSection>s with a light horizontal divider
+ * between adjacent items — same structural cue as a settings page,
+ * scaled for the compact form-pane label style.
+ *
+ * Filters out null/false children, so conditional sections
+ * (`{condition && <FormSection .../>}`) don't produce empty divider
+ * rows.
+ */
+declare function FormSectionList({ children, className }: FormSectionListProps): react_jsx_runtime.JSX.Element | null;
+
+export { FormSection, FormSectionList, type FormSectionListProps, type FormSectionProps };

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

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FormSectionProps {
+    /**
+     * Mono uppercase tracking-wide label. Distinct from
+     * <SettingsSection>'s larger h2 heading — FormSection is sized for
+     * sub-areas inside a single pane (composer right-rail, sidebar form,
+     * multi-area editor) where the label reads as a field-group caption
+     * rather than a page heading.
+     */
+    label: ReactNode;
+    /**
+     * Right-aligned meta slot, baseline-aligned with the label. Use for
+     * small status hints: counts ("4 rules"), pending text ("Saving…"),
+     * a reset link. Heavier controls belong inside `children`.
+     */
+    meta?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Labelled section primitive for form panes. Compose inside a
+ * <FormSectionList> to get horizontal dividers + consistent vertical
+ * rhythm between adjacent sections.
+ */
+declare function FormSection({ label, meta, children, className, }: FormSectionProps): react_jsx_runtime.JSX.Element;
+interface FormSectionListProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Vertical stack of <FormSection>s with a light horizontal divider
+ * between adjacent items — same structural cue as a settings page,
+ * scaled for the compact form-pane label style.
+ *
+ * Filters out null/false children, so conditional sections
+ * (`{condition && <FormSection .../>}`) don't produce empty divider
+ * rows.
+ */
+declare function FormSectionList({ children, className }: FormSectionListProps): react_jsx_runtime.JSX.Element | null;
+
+export { FormSection, FormSectionList, type FormSectionListProps, type FormSectionProps };

package/dist/primitives/form-section.js

@@ -0,0 +1,38 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/form-section.tsx
+import { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormSection({
+  label,
+  meta,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-3", className), children: [
+    (label || meta) && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("h2", { className: "font-mono text-[0.65rem] uppercase tracking-[0.18em] text-muted-foreground", children: label }),
+      meta && /* @__PURE__ */ jsx("div", { className: "font-mono text-[0.65rem] uppercase tracking-wider text-muted-foreground", children: meta })
+    ] }),
+    children
+  ] });
+}
+function FormSectionList({ children, className }) {
+  const items = Children.toArray(children).filter(Boolean);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children: items.map((child, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: i === 0 ? void 0 : "border-t border-border pt-6",
+      children: child
+    },
+    i
+  )) });
+}
+export {
+  FormSection,
+  FormSectionList
+};

package/dist/primitives/key-value-grid.cjs

@@ -0,0 +1,52 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/key-value-grid.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function KeyValueGrid({
+  items,
+  columns = 2,
+  size = "xs",
+  className
+}) {
+  const colsClass = columns === 3 ? "grid-cols-3" : "grid-cols-2";
+  const textClass = size === "xs" ? "text-xs" : "text-sm";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "dl",
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "grid gap-x-3 gap-y-0.5",
+        colsClass,
+        textClass,
+        className
+      ),
+      children: items.map((item, i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "contents", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "dt",
+          {
+            className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+              "text-muted-foreground",
+              item.emphasis && "font-medium text-foreground"
+            ),
+            children: item.label
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "dd",
+          {
+            className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+              "text-right tabular-nums",
+              item.emphasis && "font-medium"
+            ),
+            children: item.value
+          }
+        )
+      ] }, i))
+    }
+  );
+}
+
+
+exports.KeyValueGrid = KeyValueGrid;

package/dist/primitives/key-value-grid.d.cts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface KeyValueGridItem {
+    label: ReactNode;
+    value: ReactNode;
+    /** Render with `font-medium` for a totals/summary row. */
+    emphasis?: boolean;
+}
+interface KeyValueGridProps {
+    items: KeyValueGridItem[];
+    /** Number of columns. Defaults to 2. */
+    columns?: 2 | 3;
+    /** Visual size. `xs` matches dense popovers; `sm` matches cards. */
+    size?: "xs" | "sm";
+    className?: string;
+}
+declare function KeyValueGrid({ items, columns, size, className, }: KeyValueGridProps): react_jsx_runtime.JSX.Element;
+
+export { KeyValueGrid, type KeyValueGridItem, type KeyValueGridProps };

package/dist/primitives/key-value-grid.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface KeyValueGridItem {
+    label: ReactNode;
+    value: ReactNode;
+    /** Render with `font-medium` for a totals/summary row. */
+    emphasis?: boolean;
+}
+interface KeyValueGridProps {
+    items: KeyValueGridItem[];
+    /** Number of columns. Defaults to 2. */
+    columns?: 2 | 3;
+    /** Visual size. `xs` matches dense popovers; `sm` matches cards. */
+    size?: "xs" | "sm";
+    className?: string;
+}
+declare function KeyValueGrid({ items, columns, size, className, }: KeyValueGridProps): react_jsx_runtime.JSX.Element;
+
+export { KeyValueGrid, type KeyValueGridItem, type KeyValueGridProps };

package/dist/primitives/key-value-grid.js

@@ -0,0 +1,52 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/key-value-grid.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function KeyValueGrid({
+  items,
+  columns = 2,
+  size = "xs",
+  className
+}) {
+  const colsClass = columns === 3 ? "grid-cols-3" : "grid-cols-2";
+  const textClass = size === "xs" ? "text-xs" : "text-sm";
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      className: cn(
+        "grid gap-x-3 gap-y-0.5",
+        colsClass,
+        textClass,
+        className
+      ),
+      children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+        /* @__PURE__ */ jsx(
+          "dt",
+          {
+            className: cn(
+              "text-muted-foreground",
+              item.emphasis && "font-medium text-foreground"
+            ),
+            children: item.label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            className: cn(
+              "text-right tabular-nums",
+              item.emphasis && "font-medium"
+            ),
+            children: item.value
+          }
+        )
+      ] }, i))
+    }
+  );
+}
+export {
+  KeyValueGrid
+};

package/dist/primitives/marketing-footer.cjs

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/marketing-footer.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function MarketingFooter({
+  brand,
+  links = [],
+  meta,
+  renderLink,
+  className
+}) {
+  const cls = "transition-colors hover:text-foreground";
+  const link = (l) => {
+    if (renderLink)
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: renderLink({ href: l.href, children: l.label, className: cls }) }, l.href);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: l.href, className: cls, children: l.label }, l.href);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "footer", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "border-t border-border", className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mx-auto flex w-full max-w-5xl flex-wrap items-center justify-between gap-4 px-4 py-6 md:px-6", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center", children: brand }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-4 font-mono text-xs text-muted-foreground", children: [
+      links.map(link),
+      meta && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        links.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground/40", children: "\xB7" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: meta })
+      ] })
+    ] })
+  ] }) });
+}
+
+
+exports.MarketingFooter = MarketingFooter;

package/dist/primitives/marketing-footer.d.cts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type MarketingFooterLink = {
+    href: string;
+    label: ReactNode;
+};
+type RenderLink = (props: {
+    href: string;
+    children: ReactNode;
+    className?: string;
+}) => ReactNode;
+/**
+ * MarketingFooter — brand on the left, a row of meta links + a meta
+ * note (version / copyright) on the right, in the shared mono-muted
+ * treatment. Routing injected via `renderLink` (falls back to <a>).
+ * Server-component-safe.
+ */
+interface MarketingFooterProps {
+    brand?: ReactNode;
+    links?: MarketingFooterLink[];
+    /** Trailing meta — e.g. "v0.1 · beta" or "© 2026". */
+    meta?: ReactNode;
+    renderLink?: RenderLink;
+    className?: string;
+}
+declare function MarketingFooter({ brand, links, meta, renderLink, className, }: MarketingFooterProps): react_jsx_runtime.JSX.Element;
+
+export { MarketingFooter, type MarketingFooterLink, type MarketingFooterProps };

package/dist/primitives/marketing-footer.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type MarketingFooterLink = {
+    href: string;
+    label: ReactNode;
+};
+type RenderLink = (props: {
+    href: string;
+    children: ReactNode;
+    className?: string;
+}) => ReactNode;
+/**
+ * MarketingFooter — brand on the left, a row of meta links + a meta
+ * note (version / copyright) on the right, in the shared mono-muted
+ * treatment. Routing injected via `renderLink` (falls back to <a>).
+ * Server-component-safe.
+ */
+interface MarketingFooterProps {
+    brand?: ReactNode;
+    links?: MarketingFooterLink[];
+    /** Trailing meta — e.g. "v0.1 · beta" or "© 2026". */
+    meta?: ReactNode;
+    renderLink?: RenderLink;
+    className?: string;
+}
+declare function MarketingFooter({ brand, links, meta, renderLink, className, }: MarketingFooterProps): react_jsx_runtime.JSX.Element;
+
+export { MarketingFooter, type MarketingFooterLink, type MarketingFooterProps };

package/dist/primitives/marketing-footer.js

@@ -0,0 +1,34 @@
+"use client";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/marketing-footer.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function MarketingFooter({
+  brand,
+  links = [],
+  meta,
+  renderLink,
+  className
+}) {
+  const cls = "transition-colors hover:text-foreground";
+  const link = (l) => {
+    if (renderLink)
+      return /* @__PURE__ */ jsx("span", { children: renderLink({ href: l.href, children: l.label, className: cls }) }, l.href);
+    return /* @__PURE__ */ jsx("a", { href: l.href, className: cls, children: l.label }, l.href);
+  };
+  return /* @__PURE__ */ jsx("footer", { className: cn("border-t border-border", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-5xl flex-wrap items-center justify-between gap-4 px-4 py-6 md:px-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center", children: brand }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 font-mono text-xs text-muted-foreground", children: [
+      links.map(link),
+      meta && /* @__PURE__ */ jsxs(Fragment, { children: [
+        links.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { children: meta })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  MarketingFooter
+};

package/dist/primitives/marketing-header.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunk5PHOKJCTcjs = require('../chunk-5PHOKJCT.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.MarketingHeader = _chunk5PHOKJCTcjs.MarketingHeader;

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

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type MarketingNavLink = {
+    href: string;
+    label: ReactNode;
+};
+type RenderLink = (props: {
+    href: string;
+    children: ReactNode;
+    className?: string;
+}) => ReactNode;
+/**
+ * MarketingHeader — the sticky landing-page top bar: brand on the left,
+ * nav links + a trailing slot (theme switch, auth buttons) on the right.
+ * Routing is injected via `renderLink` (falls back to <a>), so the kit
+ * stays framework-agnostic. Server-component-safe.
+ */
+interface MarketingHeaderProps {
+    brand?: ReactNode;
+    links?: MarketingNavLink[];
+    /** Right-aligned slot — e.g. <ThemeModeSwitch /> + sign-in/up buttons. */
+    trailing?: ReactNode;
+    renderLink?: RenderLink;
+    /** "mono" gives the editorial uppercase-mono nav treatment. */
+    variant?: "default" | "mono";
+    className?: string;
+}
+declare function MarketingHeader({ brand, links, trailing, renderLink, variant, className, }: MarketingHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { MarketingHeader, type MarketingHeaderProps, type MarketingNavLink };

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

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type MarketingNavLink = {
+    href: string;
+    label: ReactNode;
+};
+type RenderLink = (props: {
+    href: string;
+    children: ReactNode;
+    className?: string;
+}) => ReactNode;
+/**
+ * MarketingHeader — the sticky landing-page top bar: brand on the left,
+ * nav links + a trailing slot (theme switch, auth buttons) on the right.
+ * Routing is injected via `renderLink` (falls back to <a>), so the kit
+ * stays framework-agnostic. Server-component-safe.
+ */
+interface MarketingHeaderProps {
+    brand?: ReactNode;
+    links?: MarketingNavLink[];
+    /** Right-aligned slot — e.g. <ThemeModeSwitch /> + sign-in/up buttons. */
+    trailing?: ReactNode;
+    renderLink?: RenderLink;
+    /** "mono" gives the editorial uppercase-mono nav treatment. */
+    variant?: "default" | "mono";
+    className?: string;
+}
+declare function MarketingHeader({ brand, links, trailing, renderLink, variant, className, }: MarketingHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { MarketingHeader, type MarketingHeaderProps, type MarketingNavLink };

package/dist/primitives/marketing-header.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  MarketingHeader
+} from "../chunk-W5L6LQI3.js";
+import "../chunk-G6SRSWXB.js";
+export {
+  MarketingHeader
+};

package/dist/primitives/marketing-section.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkHTTRUJQUcjs = require('../chunk-HTTRUJQU.cjs');
+require('../chunk-KWLSBTB2.cjs');
+
+
+exports.MarketingSection = _chunkHTTRUJQUcjs.MarketingSection;

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { HTMLAttributes, ElementType } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * MarketingSection — the canonical container every landing-page section
+ * sits in. Codifies the shared rhythm across the app portfolio: a
+ * centered max-width inner column, responsive horizontal padding, a
+ * vertical padding scale, and the three background "tones" the apps
+ * alternate between (default / muted band / inverted dark band).
+ *
+ * Server-safe; compose the section primitives (Hero, FeatureGrid, …)
+ * or arbitrary children inside it.
+ */
+declare const sectionVariants: (props?: ({
+    tone?: "default" | "muted" | "inverted" | null | undefined;
+    padding?: "none" | "sm" | "lg" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const widthClass: {
+    readonly narrow: "max-w-3xl";
+    readonly wide: "max-w-5xl";
+    readonly widest: "max-w-6xl";
+};
+interface MarketingSectionProps extends HTMLAttributes<HTMLElement>, VariantProps<typeof sectionVariants> {
+    /** Inner column max-width. narrow=prose/hero, wide=header/footer, widest=grids. */
+    width?: keyof typeof widthClass;
+    /** Override the rendered element. Defaults to <section>. */
+    as?: ElementType;
+    /** Extra classes on the centered inner column (not the full-bleed band). */
+    innerClassName?: string;
+}
+declare const MarketingSection: React.ForwardRefExoticComponent<MarketingSectionProps & React.RefAttributes<HTMLElement>>;
+
+export { MarketingSection, type MarketingSectionProps };