shelving 1.262.1 → 1.263.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.262.1",
+	"version": "1.263.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/form/Button.md

@@ -60,6 +60,8 @@ import { getButtonClass } from "shelving/ui";
 | `--button-radius` | Corner radius | `var(--radius-xsmall)` (8px) |
 | `--button-padding` | Inner padding | `var(--space-small)` (12px) |
 | `--button-small-padding` | Inner padding when `small` | `var(--space-xxsmall)` (4px) |
+| `--button-gap` | Gap between icon and label | `var(--space-small)` (12px) |
+| `--button-small-gap` | Gap between icon and label when `small` | `var(--space-xxsmall)` (4px) |
 | `--button-space` | Outer block margin | `var(--space-small)` (12px) |
 | `--button-font` | Font family | `var(--font-body)` |
 | `--button-weight` | Font weight | `var(--weight-strong)` (700) |

package/ui/form/Button.module.css

@@ -28,6 +28,7 @@
 		/* Content */
 		overflow: hidden;
 		word-break: normal;
+		gap: var(--button-gap, var(--space-small));
 		justify-content: center;
 		align-items: center;
 
@@ -61,6 +62,7 @@
 
 		/* Variants */
 		&.small {
+			gap: var(--button-small-gap, var(--space-xxsmall));
 			padding-block: var(--button-small-padding, var(--space-xxsmall));
 			padding-inline: var(--button-small-padding, var(--space-xxsmall));
 		}

package/ui/misc/Catcher.d.ts

@@ -73,9 +73,7 @@ export declare function ErrorNotice({ reason }: ErrorProps): ReactElement;
  */
 export declare function PageCatcher({ children }: ChildProps): ReactElement;
 /**
- * Render a caught error as a full-page `<Page>` with an error `<Card>` and retry button.
- *
- * - Uses `getMessage()` to extract a human-readable message, falling back to `"Unknown error"`.
+ * Render a caught error as a full-page `<Page>` with a centered `<ErrorNotice>`.
  *
  * @kind component
  * @see https://shelving.cc/ui/ErrorPage

package/ui/misc/Catcher.js

@@ -2,15 +2,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { ArrowPathIcon } from "@heroicons/react/24/solid";
 import { Component, createContext, use } from "react";
 import { getMessage } from "../../util/error.js";
-import { Card } from "../block/Card.js";
 import { Paragraph } from "../block/Paragraph.js";
-import { Row } from "../block/Row.js";
-import { Subheading } from "../block/Subheading.js";
 import { Button } from "../form/Button.js";
 import { CenteredLayout } from "../layout/CenteredLayout.js";
 import { Notice } from "../notice/Notice.js";
 import { Page } from "../page/Page.js";
-import { Icon } from "./Icon.js";
 const RetryContext = createContext(undefined);
 RetryContext.displayName = "RetryContext";
 const RETRY_CHILDREN = (_jsxs(_Fragment, { children: [_jsx(ArrowPathIcon, {}), "Retry"] }));
@@ -82,14 +78,11 @@ export function PageCatcher({ children }) {
     return _jsx(Catcher, { as: ErrorPage, children: children });
 }
 /**
- * Render a caught error as a full-page `<Page>` with an error `<Card>` and retry button.
- *
- * - Uses `getMessage()` to extract a human-readable message, falling back to `"Unknown error"`.
+ * Render a caught error as a full-page `<Page>` with a centered `<ErrorNotice>`.
  *
  * @kind component
  * @see https://shelving.cc/ui/ErrorPage
  */
 export function ErrorPage({ reason }) {
-    const message = getMessage(reason) ?? "Unknown error";
-    return (_jsx(Page, { title: "Error", children: _jsx(CenteredLayout, { children: _jsxs(Card, { status: "error", children: [_jsx(Subheading, { children: _jsxs(Row, { left: true, children: [_jsx(Icon, { status: "error" }), " ", message] }) }), _jsx(RetryButton, {})] }) }) }));
+    return (_jsx(Page, { title: "Error", children: _jsx(CenteredLayout, { children: _jsx(ErrorNotice, { reason: reason }) }) }));
 }

package/ui/misc/Catcher.tsx

@@ -2,16 +2,12 @@ import { ArrowPathIcon } from "@heroicons/react/24/solid";
 import { Component, createContext, type ReactElement, type ReactNode, use } from "react";
 import { getMessage } from "../../util/error.js";
 import type { Callback } from "../../util/function.js";
-import { Card } from "../block/Card.js";
 import { Paragraph } from "../block/Paragraph.js";
-import { Row } from "../block/Row.js";
-import { Subheading } from "../block/Subheading.js";
 import { Button, type ButtonVariants } from "../form/Button.js";
 import { CenteredLayout } from "../layout/CenteredLayout.js";
 import { Notice } from "../notice/Notice.js";
 import { Page } from "../page/Page.js";
 import type { ChildProps, OptionalChildProps } from "../util/props.js";
-import { Icon } from "./Icon.js";
 
 const RetryContext = createContext<Callback | undefined>(undefined);
 RetryContext.displayName = "RetryContext";
@@ -137,26 +133,16 @@ export function PageCatcher({ children }: ChildProps): ReactElement {
 }
 
 /**
- * Render a caught error as a full-page `<Page>` with an error `<Card>` and retry button.
- *
- * - Uses `getMessage()` to extract a human-readable message, falling back to `"Unknown error"`.
+ * Render a caught error as a full-page `<Page>` with a centered `<ErrorNotice>`.
  *
  * @kind component
  * @see https://shelving.cc/ui/ErrorPage
  */
 export function ErrorPage({ reason }: ErrorProps): ReactElement {
-	const message = getMessage(reason) ?? "Unknown error";
 	return (
 		<Page title="Error">
 			<CenteredLayout>
-				<Card status="error">
-					<Subheading>
-						<Row left>
-							<Icon status="error" /> {message}
-						</Row>
-					</Subheading>
-					<RetryButton />
-				</Card>
+				<ErrorNotice reason={reason} />
 			</CenteredLayout>
 		</Page>
 	);