@hackcove/ui-react 0.8.1 → 0.8.2

package/dist/PageHeader.d.ts

@@ -5,7 +5,7 @@ export type PageHeaderProps = {
     breadcrumbs?: ReactNode;
     /** The page's `h1`. */
     title: ReactNode;
-    /** A muted line under the title. */
+    /** The lede under the title: a `Lead`, so it outranks the body text after it. */
     subtitle?: ReactNode;
     /** Right of the title on `sm` and up, below it on a phone. */
     actions?: ReactNode;

package/dist/PageHeader.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HeaderText, PageHeading } from "./typography.js";
+import { Lead, PageHeading } from "./typography.js";
 /** The header block without its bottom margin; PageHeader adds the margin (a `Stack` child drops it). */
 export function PageHeaderContent({ breadcrumbs, title, subtitle, actions, tabs, className, ...rest }) {
-    return (_jsxs("div", { ...rest, "data-page-header": "", className: className, children: [breadcrumbs && _jsx("div", { className: "mb-2", children: breadcrumbs }), _jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(PageHeading, { children: title }), subtitle && (_jsx("div", { className: "mt-1", children: _jsx(HeaderText, { children: subtitle }) }))] }), actions && _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })] }), tabs && _jsx("div", { className: "mt-4", children: tabs })] }));
+    return (_jsxs("div", { ...rest, "data-page-header": "", className: className, children: [breadcrumbs && _jsx("div", { className: "mb-2", children: breadcrumbs }), _jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(PageHeading, { children: title }), subtitle && (_jsx("div", { className: "mt-2 max-w-[60ch]", children: _jsx(Lead, { children: subtitle }) }))] }), actions && _jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })] }), tabs && _jsx("div", { className: "mt-4", children: tabs })] }));
 }
 /**
  * The top of a page: breadcrumbs, title, subtitle, actions and tabs. Its fixed bottom margin puts

package/dist/PageLayouts.d.ts

@@ -25,17 +25,25 @@ export declare function FormLayout({ actions, children, breadcrumbs, title, subt
     children: ReactNode;
 } & Unstyled<Omit<ComponentPropsWithoutRef<"form">, "title">>): ReactElement;
 /**
- * A text page: header, then `children` stacked `gap` apart (`md` by default), all in one `narrow`
- * (`max-w-3xl`) reading column that starts at the Container's left edge (it is not re-centred, so
- * the title does not jump). Unlike `FormLayout` the header sits inside the column, so its `actions`
- * stay beside the text instead of at the Container's far edge.
+ * A text page: header, then `children` stacked `gap` apart (`md` by default), all in one column that
+ * starts at the Container's left edge (it is not re-centred, so the title does not jump). `width`
+ * sets the column: `narrow` (`max-w-3xl`, the default) is a reading measure; `wide` (`max-w-5xl`) and
+ * `full` (the Container's whole width) suit a page that is not long prose, such as a pricing page.
+ * Paragraphs (`Text`) and the header's lede keep their own reading measure whatever the width.
+ * Unlike `FormLayout` the header sits inside the column, so its `actions` stay beside the text
+ * instead of at the Container's far edge.
  */
-export declare function ProseLayout({ gap, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }: PageHeaderProps & {
+export declare function ProseLayout({ width, gap, children, breadcrumbs, title, subtitle, actions, tabs, ...rest }: PageHeaderProps & {
     /**
      * The space between blocks: `xs` gap-2, `sm` gap-4, `md` gap-6, `lg` gap-8, `xl` gap-12 (gap-16 from `sm`).
      * @default md
      */
     gap?: StackGap | undefined;
+    /**
+     * The column's width: `narrow` max-w-3xl, `wide` max-w-5xl, `full` the Container's width.
+     * @default narrow
+     */
+    width?: "narrow" | "wide" | "full" | undefined;
     children?: ReactNode;
 } & Passthrough): ReactElement;
 declare const COLUMNS: {

package/dist/PageLayouts.js

@@ -20,13 +20,16 @@ export function FormLayout({ actions, children, breadcrumbs, title, subtitle, ta
     return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle, tabs: tabs }), _jsx("form", { ...form, className: "max-w-3xl", children: _jsxs(Stack, { children: [children, actions && _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions })] }) })] }));
 }
 /**
- * A text page: header, then `children` stacked `gap` apart (`md` by default), all in one `narrow`
- * (`max-w-3xl`) reading column that starts at the Container's left edge (it is not re-centred, so
- * the title does not jump). Unlike `FormLayout` the header sits inside the column, so its `actions`
- * stay beside the text instead of at the Container's far edge.
+ * A text page: header, then `children` stacked `gap` apart (`md` by default), all in one column that
+ * starts at the Container's left edge (it is not re-centred, so the title does not jump). `width`
+ * sets the column: `narrow` (`max-w-3xl`, the default) is a reading measure; `wide` (`max-w-5xl`) and
+ * `full` (the Container's whole width) suit a page that is not long prose, such as a pricing page.
+ * Paragraphs (`Text`) and the header's lede keep their own reading measure whatever the width.
+ * Unlike `FormLayout` the header sits inside the column, so its `actions` stay beside the text
+ * instead of at the Container's far edge.
  */
-export function ProseLayout({ gap = "md", children, breadcrumbs, title, subtitle, actions, tabs, ...rest }) {
-    return (_jsxs("div", { ...rest, className: STACK_WIDTH.narrow, children: [_jsx(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle, actions: actions, tabs: tabs }), _jsx(Stack, { gap: gap, children: children })] }));
+export function ProseLayout({ width = "narrow", gap = "md", children, breadcrumbs, title, subtitle, actions, tabs, ...rest }) {
+    return (_jsxs("div", { ...rest, className: STACK_WIDTH[width], children: [_jsx(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle, actions: actions, tabs: tabs }), _jsx(Stack, { gap: gap, children: children })] }));
 }
 const COLUMNS = {
     2: "lg:grid-cols-2",

package/dist/typography.d.ts

@@ -43,9 +43,8 @@ export type InlineTypographyProps<E extends ElementType> = Own & {
 /**
  * Marketing-scale headline — the one line at the top of a public page. `h1`,
  * text-4xl/tight semibold, primary text, growing to text-6xl on wider screens.
- * `PageHeading`'s scale is deliberately dev-tool sized; a brochure
- * hero needs a display scale, so it gets its own pinned role rather than callers
- * overriding PageHeading's size.
+ * `PageHeading` is the title of an ordinary page, a step below; a brochure hero needs a display
+ * scale, so it gets its own pinned role rather than callers overriding PageHeading's size.
  */
 export declare const Display: {
     <E extends ElementType = "h1">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
@@ -56,7 +55,10 @@ export declare const Lead: {
     <E extends ElementType = "p">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     displayName: string;
 };
-/** Page title. `h1`, text-2xl/8 semibold, primary text. */
+/**
+ * Page title. `h1`, text-3xl/9 bold (text-4xl/10 from `sm`), tight, primary text: well above the
+ * `Lead` under it and the body text after it, so the page's title reads first.
+ */
 export declare const PageHeading: {
     <E extends ElementType = "h1">(props: TypographyProps<E>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     displayName: string;
@@ -109,8 +111,8 @@ export declare function Text<E extends ElementType = "span">({ strong, preserveN
     preserveNewlines?: boolean;
 }): ReactElement;
 /**
- * The supporting line under a `PageHeader` or `Dialog` title: `Text as="p"` without the measure, so
- * it runs the width of its header. Internal; not exported from the package.
+ * The supporting line under a `Dialog` title: `Text as="p"` without the measure, so
+ * it runs the width of its dialog. Internal; not exported from the package.
  */
 export declare function HeaderText({ children }: {
     children: ReactNode;

package/dist/typography.js

@@ -57,15 +57,17 @@ function plainText(children) {
 /**
  * Marketing-scale headline — the one line at the top of a public page. `h1`,
  * text-4xl/tight semibold, primary text, growing to text-6xl on wider screens.
- * `PageHeading`'s scale is deliberately dev-tool sized; a brochure
- * hero needs a display scale, so it gets its own pinned role rather than callers
- * overriding PageHeading's size.
+ * `PageHeading` is the title of an ordinary page, a step below; a brochure hero needs a display
+ * scale, so it gets its own pinned role rather than callers overriding PageHeading's size.
  */
 export const Display = typography("Display", "h1", "text-4xl/[1.1] font-semibold tracking-tight sm:text-5xl/[1.05] lg:text-6xl/[1.05]", "default");
 /** The supporting sentence under a `Display`. `p`, text-lg/7 normal, secondary. */
 export const Lead = typography("Lead", "p", "text-lg/7 font-normal sm:text-xl/8", "secondary");
-/** Page title. `h1`, text-2xl/8 semibold, primary text. */
-export const PageHeading = typography("PageHeading", "h1", "text-2xl/8 font-semibold tracking-tight", "default");
+/**
+ * Page title. `h1`, text-3xl/9 bold (text-4xl/10 from `sm`), tight, primary text: well above the
+ * `Lead` under it and the body text after it, so the page's title reads first.
+ */
+export const PageHeading = typography("PageHeading", "h1", "text-3xl/9 font-bold tracking-tight sm:text-4xl/10", "default");
 /**
  * Top-level section header. `h2`, text-base/6 semibold, primary text. `rule` sets
  * a hairline under it (the `Divider` line colour) with the space either side of
@@ -107,8 +109,8 @@ export function Text({ strong, preserveNewlines, ...props }) {
     return pinned("span", textVariant(strong, preserveNewlines, true), strong ? "default" : "secondary", props);
 }
 /**
- * The supporting line under a `PageHeader` or `Dialog` title: `Text as="p"` without the measure, so
- * it runs the width of its header. Internal; not exported from the package.
+ * The supporting line under a `Dialog` title: `Text as="p"` without the measure, so
+ * it runs the width of its dialog. Internal; not exported from the package.
  */
 export function HeaderText({ children }) {
     return pinned("p", textVariant(false, false, false), "secondary", { children });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a @hackcove/theme-* package.",
   "keywords": [
     "components",