shelving 1.253.6 → 1.254.0

package/package.json

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

package/ui/misc/Catcher.js

@@ -9,7 +9,7 @@ import { CenteredLayout } from "../layout/CenteredLayout.js";
 import { Notice } from "../notice/Notice.js";
 import { Page } from "../page/Page.js";
 import { Row } from "../style/Flex.js";
-import { StatusIcon } from "./StatusIcon.js";
+import { Icon } from "./Icon.js";
 const RetryContext = createContext(undefined);
 RetryContext.displayName = "RetryContext";
 const RETRY_CHILDREN = (_jsxs(_Fragment, { children: [_jsx(ArrowPathIcon, {}), "Retry"] }));
@@ -103,5 +103,5 @@ export function ErrorNotice({ reason }) {
  */
 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(StatusIcon, { status: "error", size: "xlarge" }), " ", message] }) }), _jsx(RetryButton, {})] }) }) }));
+    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, {})] }) }) }));
 }

package/ui/misc/Catcher.tsx

@@ -10,7 +10,7 @@ import { Notice } from "../notice/Notice.js";
 import { Page } from "../page/Page.js";
 import { Row } from "../style/Flex.js";
 import type { ChildProps, OptionalChildProps } from "../util/props.js";
-import { StatusIcon } from "./StatusIcon.js";
+import { Icon } from "./Icon.js";
 
 const RetryContext = createContext<Callback | undefined>(undefined);
 RetryContext.displayName = "RetryContext";
@@ -185,7 +185,7 @@ export function ErrorPage({ reason }: ErrorPageProps): ReactElement {
 				<Card status="error">
 					<Subheading>
 						<Row left>
-							<StatusIcon status="error" size="xlarge" /> {message}
+							<Icon status="error" /> {message}
 						</Row>
 					</Subheading>
 					<RetryButton />

package/ui/misc/Icon.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentType, ReactElement } from "react";
+import { type ColorVariants } from "../style/Color.js";
+import { type StatusVariants } from "../style/Status.js";
+import { type SizeVariant } from "../style/Typography.js";
+/**
+ * Props for `<StatusIcon>` — the `status` to represent and optional icon `size`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/misc/StatusIcon/StatusIconProps
+ */
+export interface IconProps extends ColorVariants, StatusVariants {
+    /**
+     * Set the icon to use. Defaults to appropriate icon matching for `status`
+     */
+    icon?: ComponentType<{
+        className?: string | undefined;
+    }>;
+    /**
+     * Size of the icon.
+     * @default 1lh
+     */
+    size?: SizeVariant;
+}
+/**
+ * Render the icon for a given status, coloured to match.
+ *
+ * - Picks a heroicon per status (`success`, `error`, `warning`, etc.), falling back to an info icon, and uses the animated `<Loading>` spinner for `"loading"`.
+ *
+ * @kind component
+ * @example <StatusIcon status="error" size="large" />
+ * @see https://dhoulb.github.io/shelving/ui/misc/StatusIcon/StatusIcon
+ */
+export declare function Icon(props: IconProps): ReactElement;

package/ui/misc/{StatusIcon.js → Icon.js}

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
-import statusStyles from "../style/Status.module.css";
-import { getModuleClass } from "../util/css.js";
+import { getColorClass } from "../style/Color.js";
+import { getStatusClass } from "../style/Status.js";
+import { getTypographyClass } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
+import ICON_CSS from "./Icon.module.css";
 import { Loading } from "./Loading.js";
-import styles from "./StatusIcon.module.css";
 const STATUS_ICONS = {
     loading: Loading,
     success: CheckCircleIcon,
@@ -16,14 +18,12 @@ const STATUS_ICONS = {
  *
  * - Picks a heroicon per status (`success`, `error`, `warning`, etc.), falling back to an info icon, and uses the animated `<Loading>` spinner for `"loading"`.
  *
- * @param status The status to represent (defaults to `"info"`).
- * @param size Optional icon size (defaults to the current line height).
- * @returns The status icon element.
  * @kind component
  * @example <StatusIcon status="error" size="large" />
  * @see https://dhoulb.github.io/shelving/ui/misc/StatusIcon/StatusIcon
  */
-export function StatusIcon({ status = "info", size }) {
-    const Icon = STATUS_ICONS[status] ?? InformationCircleIcon;
-    return _jsx(Icon, { className: `${getModuleClass(styles, "icon", size)} ${getModuleClass(statusStyles, status)}` });
+export function Icon(props) {
+    const { status = "info", icon: Element = STATUS_ICONS[status] ?? InformationCircleIcon } = props;
+    return (_jsx(Element, { className: getClass(getModuleClass(ICON_CSS, "icon"), //
+        getColorClass(props), getStatusClass(props), getTypographyClass(props)) }));
 }

package/ui/misc/Icon.md

@@ -0,0 +1,28 @@
+# Icon
+
+Renders an icon for a given status, coloured to match. Picks a heroicon per status (`success`, `error`, `warning`, etc.) and uses the animated `<Loading>` spinner for `"loading"`.
+
+**Things to know:**
+
+- `status` defaults to `"info"` (an info icon) when unset.
+- Size it via the `size` prop (`"small"`, `"normal"`, `"large"`, `"xlarge"`, or `"xxlarge"`); defaults to the current line height.
+- Paints from its status tint by default, so the icon colour matches the `status` — override `--icon-color` to force a specific colour.
+
+## Usage
+
+```tsx
+import { Icon } from "shelving/ui";
+
+<Icon status="success" size="large" />
+<Icon status="error" />
+<Icon status="loading" size="small" />
+```
+
+## Styling
+
+| Variable | Styles | Default |
+|---|---|---|
+| `--icon-color` | Icon colour | `var(--tint-50)` (the status tint, e.g. `--color-failure` for `status="error"`) |
+| `--icon-size` | Icon width / height | `1lh` (current line height) |
+
+**Global tokens it reads** — the status tint anchor `--tint-50`, plus the size tokens `--size-small` / `--size-normal` / `--size-large` / `--size-xlarge` / `--size-xxlarge` used by the `size` prop.

package/ui/misc/Icon.module.css

@@ -0,0 +1,18 @@
+@import "../style/layers.css";
+@import "../style/Typography.module.css";
+@import "../style/Color.module.css";
+@import "../style/Status.module.css";
+
+@layer defaults {
+	.icon {
+		width: var(--icon-size, 1lh);
+		height: var(--icon-size, 1lh);
+		color: var(--icon-color, var(--tint-50));
+	}
+}
+
+@layer overrides {
+	.icon {
+		flex: none;
+	}
+}

package/ui/misc/Icon.tsx

@@ -0,0 +1,58 @@
+import { CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
+import type { ComponentType, ReactElement } from "react";
+import { type ColorVariants, getColorClass } from "../style/Color.js";
+import { getStatusClass, type Status, type StatusVariants } from "../style/Status.js";
+import { getTypographyClass, type SizeVariant } from "../style/Typography.js";
+import { getClass, getModuleClass } from "../util/css.js";
+import ICON_CSS from "./Icon.module.css";
+import { Loading } from "./Loading.js";
+
+const STATUS_ICONS: {
+	[K in Status]?: ComponentType;
+} = {
+	loading: Loading,
+	success: CheckCircleIcon,
+	error: XCircleIcon,
+	warning: ExclamationTriangleIcon,
+	danger: ExclamationTriangleIcon,
+};
+
+/**
+ * Props for `<StatusIcon>` — the `status` to represent and optional icon `size`.
+ *
+ * @see https://dhoulb.github.io/shelving/ui/misc/StatusIcon/StatusIconProps
+ */
+export interface IconProps extends ColorVariants, StatusVariants {
+	/**
+	 * Set the icon to use. Defaults to appropriate icon matching for `status`
+	 */
+	icon?: ComponentType<{ className?: string | undefined }>;
+	/**
+	 * Size of the icon.
+	 * @default 1lh
+	 */
+	size?: SizeVariant;
+}
+
+/**
+ * Render the icon for a given status, coloured to match.
+ *
+ * - Picks a heroicon per status (`success`, `error`, `warning`, etc.), falling back to an info icon, and uses the animated `<Loading>` spinner for `"loading"`.
+ *
+ * @kind component
+ * @example <StatusIcon status="error" size="large" />
+ * @see https://dhoulb.github.io/shelving/ui/misc/StatusIcon/StatusIcon
+ */
+export function Icon(props: IconProps): ReactElement {
+	const { status = "info", icon: Element = STATUS_ICONS[status] ?? InformationCircleIcon } = props;
+	return (
+		<Element
+			className={getClass(
+				getModuleClass(ICON_CSS, "icon"), //
+				getColorClass(props),
+				getStatusClass(props),
+				getTypographyClass(props),
+			)}
+		/>
+	);
+}

package/ui/misc/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./Catcher.js";
+export * from "./Icon.js";
 export * from "./Loading.js";
 export * from "./Mapper.js";
 export * from "./Markup.js";
 export * from "./MetaContext.js";
-export * from "./StatusIcon.js";
 export * from "./Tag.js";

package/ui/misc/index.js

@@ -1,7 +1,7 @@
 export * from "./Catcher.js";
+export * from "./Icon.js";
 export * from "./Loading.js";
 export * from "./Mapper.js";
 export * from "./Markup.js";
 export * from "./MetaContext.js";
-export * from "./StatusIcon.js";
 export * from "./Tag.js";

package/ui/misc/index.tsx

@@ -1,7 +1,7 @@
 export * from "./Catcher.js";
+export * from "./Icon.js";
 export * from "./Loading.js";
 export * from "./Mapper.js";
 export * from "./Markup.js";
 export * from "./MetaContext.js";
-export * from "./StatusIcon.js";
 export * from "./Tag.js";

package/ui/notice/Notice.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getBlockClass } from "../block/Block.js";
-import { StatusIcon } from "../misc/StatusIcon.js";
+import { Icon } from "../misc/Icon.js";
 import { getFlexClass } from "../style/Flex.js";
 import { getStatusClass } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";
@@ -21,7 +21,7 @@ import NOTICE_CSS from "./Notice.module.css";
 export function Notice({ children, //
 icon, ...props }) {
     const { status } = props;
-    return (_jsxs("aside", { role: status === "danger" || status === "error" ? "alert" : "status", className: getClass(getBlockClass(props), getModuleClass(NOTICE_CSS, "notice", props), getFlexClass(props), getStatusClass(props)), children: [icon !== undefined ? icon : status && _jsx(StatusIcon, { status: status }), children] }));
+    return (_jsxs("aside", { role: status === "danger" || status === "error" ? "alert" : "status", className: getClass(getBlockClass(props), getModuleClass(NOTICE_CSS, "notice", props), getFlexClass(props), getStatusClass(props)), children: [icon !== undefined ? icon : status && _jsx(Icon, { status: status }), children] }));
 }
 /**
  * Shared loading `<Notice>` element showing the loading spinner.

package/ui/notice/Notice.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import { getBlockClass } from "../block/Block.js";
-import { StatusIcon } from "../misc/StatusIcon.js";
+import { Icon } from "../misc/Icon.js";
 import type { ColorVariants } from "../style/Color.js";
 import { type FlexVariants, getFlexClass } from "../style/Flex.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
@@ -42,7 +42,7 @@ export function Notice({
 			role={status === "danger" || status === "error" ? "alert" : "status"}
 			className={getClass(getBlockClass(props), getModuleClass(NOTICE_CSS, "notice", props), getFlexClass(props), getStatusClass(props))}
 		>
-			{icon !== undefined ? icon : status && <StatusIcon status={status} />}
+			{icon !== undefined ? icon : status && <Icon status={status} />}
 			{children}
 		</aside>
 	);

package/ui/misc/StatusIcon.d.ts

@@ -1,25 +0,0 @@
-import type { ReactElement } from "react";
-import type { Status } from "../style/Status.js";
-/**
- * Props for `<StatusIcon>` — the `status` to represent and optional icon `size`.
- *
- * @see https://dhoulb.github.io/shelving/ui/misc/StatusIcon/StatusIconProps
- */
-export interface StatusIconProps {
-    status?: Status;
-    /** Size of the icon (defaults to the current line height). */
-    size?: "small" | "normal" | "large" | "xlarge" | "xxlarge" | undefined;
-}
-/**
- * Render the icon for a given status, coloured to match.
- *
- * - Picks a heroicon per status (`success`, `error`, `warning`, etc.), falling back to an info icon, and uses the animated `<Loading>` spinner for `"loading"`.
- *
- * @param status The status to represent (defaults to `"info"`).
- * @param size Optional icon size (defaults to the current line height).
- * @returns The status icon element.
- * @kind component
- * @example <StatusIcon status="error" size="large" />
- * @see https://dhoulb.github.io/shelving/ui/misc/StatusIcon/StatusIcon
- */
-export declare function StatusIcon({ status, size }: StatusIconProps): ReactElement;

package/ui/misc/StatusIcon.md

@@ -1,28 +0,0 @@
-# StatusIcon
-
-Renders the icon for a given status, coloured to match. Picks a heroicon per status (`success`, `error`, `warning`, etc.) and uses the animated `<Loading>` spinner for `"loading"`.
-
-**Things to know:**
-
-- `status` defaults to `"info"` (an info icon) when unset.
-- Size it via the `size` prop (`"small"`, `"normal"`, `"large"`, `"xlarge"`, or `"xxlarge"`); defaults to the current line height.
-- Paints from its status tint by default, so the icon colour matches the `status` — override `--status-icon-color` to force a specific colour.
-
-## Usage
-
-```tsx
-import { StatusIcon } from "shelving/ui";
-
-<StatusIcon status="success" size="large" />
-<StatusIcon status="error" />
-<StatusIcon status="loading" size="small" />
-```
-
-## Styling
-
-| Variable | Styles | Default |
-|---|---|---|
-| `--status-icon-color` | Icon colour | `var(--tint-50)` (the status tint, e.g. `--color-failure` for `status="error"`) |
-| `--status-icon-size` | Icon width / height | `1lh` (current line height) |
-
-**Global tokens it reads** — the status tint anchor `--tint-50`, plus the size tokens `--size-small` / `--size-normal` / `--size-large` / `--size-xlarge` / `--size-xxlarge` used by the `size` prop.

package/ui/misc/StatusIcon.module.css

@@ -1,37 +0,0 @@
-@import "../style/layers.css";
-@import "../style/Typography.module.css";
-@import "../style/Tint.module.css";
-
-@layer components {
-	.icon {
-		flex: none;
-		border-radius: 999px;
-		width: var(--status-icon-size, 1lh);
-		height: var(--status-icon-size, 1lh);
-
-		/* Paint from the status tint anchor so e.g. `status="error"` renders red, `success` green, etc. */
-		color: var(--status-icon-color, var(--tint-50));
-
-		/* Variants */
-		&.small {
-			width: var(--status-icon-small-size, var(--size-small));
-			height: var(--status-icon-small-size, var(--size-small));
-		}
-		&.normal {
-			width: var(--status-icon-normal-size, var(--size-normal));
-			height: var(--status-icon-normal-size, var(--size-normal));
-		}
-		&.large {
-			width: var(--status-icon-large-size, var(--size-large));
-			height: var(--status-icon-large-size, var(--size-large));
-		}
-		&.xlarge {
-			width: var(--status-icon-xlarge-size, var(--size-xlarge));
-			height: var(--status-icon-xlarge-size, var(--size-xlarge));
-		}
-		&.xxlarge {
-			width: var(--status-icon-xxlarge-size, var(--size-xxlarge));
-			height: var(--status-icon-xxlarge-size, var(--size-xxlarge));
-		}
-	}
-}

package/ui/misc/StatusIcon.tsx

@@ -1,45 +0,0 @@
-import { CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/24/solid";
-import type { ComponentType, ReactElement } from "react";
-import type { Status } from "../style/Status.js";
-import statusStyles from "../style/Status.module.css";
-import { getModuleClass } from "../util/css.js";
-import { Loading } from "./Loading.js";
-import styles from "./StatusIcon.module.css";
-
-const STATUS_ICONS: {
-	[K in Status]?: ComponentType<Record<string, unknown>>;
-} = {
-	loading: Loading,
-	success: CheckCircleIcon,
-	error: XCircleIcon,
-	warning: ExclamationTriangleIcon,
-	danger: ExclamationTriangleIcon,
-};
-
-/**
- * Props for `<StatusIcon>` — the `status` to represent and optional icon `size`.
- *
- * @see https://dhoulb.github.io/shelving/ui/misc/StatusIcon/StatusIconProps
- */
-export interface StatusIconProps {
-	status?: Status;
-	/** Size of the icon (defaults to the current line height). */
-	size?: "small" | "normal" | "large" | "xlarge" | "xxlarge" | undefined;
-}
-
-/**
- * Render the icon for a given status, coloured to match.
- *
- * - Picks a heroicon per status (`success`, `error`, `warning`, etc.), falling back to an info icon, and uses the animated `<Loading>` spinner for `"loading"`.
- *
- * @param status The status to represent (defaults to `"info"`).
- * @param size Optional icon size (defaults to the current line height).
- * @returns The status icon element.
- * @kind component
- * @example <StatusIcon status="error" size="large" />
- * @see https://dhoulb.github.io/shelving/ui/misc/StatusIcon/StatusIcon
- */
-export function StatusIcon({ status = "info", size }: StatusIconProps): ReactElement {
-	const Icon = STATUS_ICONS[status] ?? InformationCircleIcon;
-	return <Icon className={`${getModuleClass(styles, "icon", size)} ${getModuleClass(statusStyles, status)}`} />;
-}