@pantheon-systems/pds-toolkit-react 2.0.0-beta.6 → 2.0.0-beta.7

package/dist/components/Table/Table.d.ts

@@ -39,12 +39,14 @@ export type DetailPanelContext = {
 export interface TableColumn {
     /**
      * When true, this column's cell content is shown on the compact card
-     * rendered at mobile widths, in addition to the full detail view. The
-     * first card-visible column reads as the card's title; any further ones
-     * render as a secondary line. Columns without this flag are omitted from
-     * the card front but still appear in the full detail view (the row's
-     * `renderDetailPanel` content, or the auto-generated one — see
-     * `hasMobileDetailSheet`). Has no effect above the mobile breakpoint.
+     * rendered at mobile widths, in addition to the full detail view. With
+     * the default `cardLayout="stacked"`, the first card-visible column reads
+     * as the card's title and any further ones render as a secondary line
+     * below it; with `cardLayout="inline"` every card-visible column is a
+     * peer in one row instead (see `cardLayout`). Columns without this flag
+     * are omitted from the card front but still appear in the full detail
+     * view (the row's `renderDetailPanel` content, or the auto-generated one
+     * — see `hasMobileDetailSheet`). Has no effect above the mobile breakpoint.
      */
     cardVisible?: boolean;
     /**
@@ -76,6 +78,16 @@ export interface TableColumn {
     sortKey?: string;
 }
 export interface TableProps extends ComponentPropsWithoutRef<'table'> {
+    /**
+     * Layout of a mobile card's `cardVisible` columns (see `hasMobileCards`).
+     * `'stacked'` (default) gives the first one a bold title treatment with
+     * the rest in a smaller secondary line below it. `'inline'` drops that
+     * distinction and lays out every `cardVisible` column as an equal peer in
+     * one row — for a card whose "title" is really a visual chip (a card
+     * network logo, an avatar) rather than a name, where forcing a
+     * title/subtext hierarchy onto it doesn't make sense.
+     */
+    cardLayout?: 'stacked' | 'inline';
     /** Additional class names */
     className?: string;
     /**
@@ -130,6 +142,11 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * When provided, takes precedence over `emptyStateHeading` and `emptyStateMessage`.
      */
     emptyState?: ReactNode;
+    /**
+     * Optional action (e.g. a Button or link) rendered below the message in
+     * the default empty state. Ignored when `emptyState` is provided.
+     */
+    emptyStateAction?: ReactNode;
     /**
      * Heading text for the default empty state. Defaults to `"No results found."`
      * Override for translation or context-specific messaging.
@@ -393,4 +410,4 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      */
     totalItemCount?: number;
 }
-export declare const Table: ({ className, closeDetailPanelLabel, columns, currentPage, defaultSortKey, defaultSortOrder, density, detailPanelNav, detailPanelTitle, detailPanelWidth, emptyState, emptyStateHeading, emptyStateMessage, footer, getDetailPanelPositionLabel, getPageSizeLabel, getRowClassName, getRowId, getRowSelectDisabledReason, getSelectRowLabel, getSortLabel, hasDesktopDetailPanel, hasMobileCards, hasMobileDetailSheet, hasPanel, inspectedRowId, isLoading, isRowSelectable, itemsPerPage, loadingRowCount, maxHeight, minHeight, nextDetailPanelRowLabel, onDetailPanelNext, onDetailPanelPrev, onPageChange, onPageSizeChange, onRowInspect, onRowSelectionChange, onSort, pageSizeOptions, pageSizeSelectLabel, paginationLabels, prevDetailPanelRowLabel, renderDetailPanel, renderDetailPanelFooter, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ cardLayout, className, closeDetailPanelLabel, columns, currentPage, defaultSortKey, defaultSortOrder, density, detailPanelNav, detailPanelTitle, detailPanelWidth, emptyState, emptyStateAction, emptyStateHeading, emptyStateMessage, footer, getDetailPanelPositionLabel, getPageSizeLabel, getRowClassName, getRowId, getRowSelectDisabledReason, getSelectRowLabel, getSortLabel, hasDesktopDetailPanel, hasMobileCards, hasMobileDetailSheet, hasPanel, inspectedRowId, isLoading, isRowSelectable, itemsPerPage, loadingRowCount, maxHeight, minHeight, nextDetailPanelRowLabel, onDetailPanelNext, onDetailPanelPrev, onPageChange, onPageSizeChange, onRowInspect, onRowSelectionChange, onSort, pageSizeOptions, pageSizeSelectLabel, paginationLabels, prevDetailPanelRowLabel, renderDetailPanel, renderDetailPanelFooter, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/empty-states/VerticalEmptyState/VerticalEmptyState.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { HeadingLevel } from '../../../libs/types/custom-types';
+import { PDSIllustration } from '../../media/Illustration/Illustration';
 import './vertical-empty-state.css';
 /**
  * Prop types for VerticalEmptyState
@@ -14,6 +15,20 @@ export interface VerticalEmptyStateProps extends ComponentPropsWithoutRef<'div'>
      * This should be a Button, ButtonLink, or two items wrapped in a `pds-button-group` div.
      */
     ctaRegion?: ReactNode;
+    /**
+     * Grows this component to fill its parent's available height and
+     * vertically centers its content within it — for a full-page empty state
+     * (404, access denied, etc.) that should sit centered in the remaining
+     * viewport rather than top-aligned.
+     *
+     * Only takes effect when the immediate parent is itself a flex container
+     * with room to grow into (e.g. `AppLayout`'s `main-inner`) — otherwise
+     * `flex: 1` has nothing to act on and this is a no-op. Prefer this over
+     * hand-rolled centering CSS (a guessed `height`/`min-height` calc, or
+     * wrapping in `FlexContainer`), which breaks whenever real content grows
+     * taller than the guess.
+     */
+    fillHeight?: boolean;
     /**
      * heading to explain the empty state.
      */
@@ -23,20 +38,43 @@ export interface VerticalEmptyStateProps extends ComponentPropsWithoutRef<'div'>
      */
     headingLevel?: HeadingLevel;
     /**
-     * PDS illustration image to display above the heading.
-     * Can be a string (a link to an SVG file, either from Brandfolder or
-     * local) or a React node (e.g. a Spinner, for in-progress empty states).
-     * See full documentation for details.
+     * Which illustration to show above the heading, using the toolkit's
+     * `Illustration` component — the preferred way to provide media here.
+     * Decorative (no accessible name). Takes precedence over `image` if both
+     * are set.
+     */
+    illustration?: PDSIllustration;
+    /**
+     * Width of `illustration` (CSS value). Height follows automatically from
+     * its aspect ratio.
+     */
+    illustrationWidth?: string;
+    /**
+     * Media to display above the heading. Can be a string (a link to an SVG
+     * file, either from Brandfolder or local) or a React node, such as
+     * `Picture` for a raster image. Prefer `illustration`/`isLoading` for a
+     * new illustration or loading state — `image` is a legacy fallback for
+     * anything else, slated for eventual deprecation.
+     *
+     * `imageWidth`/`imageHeight` size the container a string `image` renders
+     * into; it fills that container's height, scaling width proportionally.
+     * Any React node is responsible for its own sizing within it (pass
+     * matching `width`/`height` if you want it to fill the container).
      */
     image?: string | ReactNode;
     /**
-     * Height of the image (CSS value like '200px', '50%', etc.)
+     * Height of the image container (CSS value like '120px', '50%', etc.)
      */
     imageHeight?: string;
     /**
-     * Width of the image (CSS value like '200px', '50%', etc.)
+     * Width of the image container (CSS value like '200px', '50%', etc.)
      */
     imageWidth?: string;
+    /**
+     * Shows a loading spinner instead of `illustration`/`image`, for an
+     * in-progress empty state. Takes precedence over both.
+     */
+    isLoading?: boolean;
     /**
      * Message to display below the heading.
      */
@@ -45,4 +83,4 @@ export interface VerticalEmptyStateProps extends ComponentPropsWithoutRef<'div'>
 /**
  * VerticalEmptyState UI component
  */
-export declare const VerticalEmptyState: ({ className, ctaRegion, heading, headingLevel, image, imageHeight, imageWidth, message, ...props }: VerticalEmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalEmptyState: ({ className, ctaRegion, fillHeight, heading, headingLevel, illustration, illustrationWidth, image, imageHeight, imageWidth, isLoading, message, ...props }: VerticalEmptyStateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/Icon/generated-icon-data.d.ts

@@ -3,7 +3,7 @@
  *
  * Generated by: npm run generate:icon-data
  * Source: icon-registry.ts + Font Awesome packages + custom-icons.tsx
- * Generated: 2026-10-02T19:35:35.857Z
+ * Generated: 2026-10-05T22:37:57.616Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };

package/dist/components/media/Illustration/Illustration.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { type PDSIllustrationName } from './generated-illustration-data';
+import './illustration.css';
+export type PDSIllustration = PDSIllustrationName;
+/**
+ * Prop types for Illustration
+ */
+export interface IllustrationProps extends ComponentPropsWithoutRef<'svg'> {
+    /**
+     * Accessible name for the illustration. Defaults to '' (decorative,
+     * hidden from assistive tech). When provided, renders an SVG <title>
+     * and exposes the illustration as role="img" with that accessible name.
+     */
+    alt?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Optional height (CSS value). If not provided, the illustration is
+     * sized by its intrinsic viewBox, same as Picture.
+     */
+    height?: string | number;
+    /**
+     * Which illustration to render.
+     */
+    name: PDSIllustration;
+    /**
+     * Optional width (CSS value). If not provided, the illustration is
+     * sized by its intrinsic viewBox, same as Picture.
+     */
+    width?: string | number;
+}
+/**
+ * Illustration UI component
+ */
+export declare const Illustration: ({ alt, className, height, name, width, ...props }: IllustrationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/media/Illustration/generated-illustration-data.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Auto-generated illustration data - DO NOT EDIT MANUALLY
+ *
+ * Generated by: npm run generate:illustration-data
+ * Source: illustration-registry.ts + illustrations/*.svg
+ * Generated: 2026-10-05T22:37:58.277Z
+ */
+import React from 'react';
+export interface IllustrationData {
+    height: number;
+    render: () => React.ReactNode;
+    width: number;
+}
+export declare const illustrationData: Record<string, IllustrationData>;
+export declare const illustrationList: readonly ["createEnvLive", "createEnvTest", "underConstruction"];
+export type PDSIllustrationName = (typeof illustrationList)[number];

package/dist/components/media/Illustration/illustration-registry.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Illustration Registry - Source of truth for PDS illustration mappings.
+ *
+ * Maps PDS camelCase illustration names to their raw SVG source file.
+ *
+ * To add an illustration:
+ *   1. Export the polished SVG from Figma into illustrations/<kebab-case-name>.svg
+ *   2. Run: npm run generate:illustration
+ *      (prompts for a PDS name — suggests one from the filename — adds the
+ *      entry below, and runs generate:illustration-data for you)
+ *   3. Commit the SVG, this file, and generated-illustration-data.tsx
+ *
+ * To add an entry manually instead: add it below, then run
+ * npm run generate:illustration-data yourself.
+ */
+export interface IllustrationRegistryEntry {
+    file: string;
+}
+export declare const illustrationRegistry: Record<string, IllustrationRegistryEntry>;

package/dist/css/component-css/pds-horizontal-empty-state.css

@@ -1 +1 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-horizontal-empty-state{color:var(--pds-color-foreground-default);display:flex;font-family:var(--pds-typography-ff-default);gap:var(--pds-spacing-xl);width:100%}.pds-horizontal-empty-state--top{align-items:flex-start}.pds-horizontal-empty-state--center{align-items:center}.pds-horizontal-empty-state__content{display:flex;flex-direction:column;padding-inline-end:var(--pds-spacing-l);row-gap:var(--pds-spacing-xl);width:60%}.pds-horizontal-empty-state__heading{margin-block-end:0}.pds-horizontal-empty-state__message{margin-block-start:0}.pds-horizontal-empty-state__message :where(:not(.visually-hidden))+:where(:not(p,ul,ol,li)){margin-block-start:var(--pds-spacing-2xl)}.pds-horizontal-empty-state__media{width:40%}.pds-horizontal-empty-state__image{height:auto;width:100%}.pds-horizontal-empty-state--indented-content .pds-horizontal-empty-state__content{padding-inline-start:var(--pds-spacing-xl)}.pds-horizontal-empty-state--video .pds-horizontal-empty-state__content,.pds-horizontal-empty-state--video .pds-horizontal-empty-state__media{width:50%}.pds-horizontal-empty-state__media--video .pds-video-embed{border-radius:var(--pds-border-radius-panel)}[data-pds-mobile] .pds-horizontal-empty-state{flex-direction:column}[data-pds-mobile] .pds-horizontal-empty-state .pds-horizontal-empty-state__content,[data-pds-mobile] .pds-horizontal-empty-state .pds-horizontal-empty-state__media{width:100%}[data-pds-mobile] .pds-horizontal-empty-state .pds-horizontal-empty-state__content{padding-inline-end:0}[data-pds-mobile] .pds-horizontal-empty-state .pds-horizontal-empty-state__media--image{display:none}[data-pds-mobile] .pds-horizontal-empty-state .pds-horizontal-empty-state__media--video{order:-1}}
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-horizontal-empty-state{color:var(--pds-color-foreground-default);display:flex;font-family:var(--pds-typography-ff-default);gap:var(--pds-spacing-xl);width:100%}.pds-horizontal-empty-state--top{align-items:flex-start}.pds-horizontal-empty-state--center{align-items:center}.pds-horizontal-empty-state__content{display:flex;flex-direction:column;padding-inline-end:var(--pds-spacing-l);row-gap:var(--pds-spacing-xl);width:60%}.pds-horizontal-empty-state__heading{margin-block-end:0}.pds-horizontal-empty-state__message{margin-block-start:0}.pds-horizontal-empty-state__message :where(:not(.visually-hidden))+:where(:not(p,ul,ol,li)){margin-block-start:var(--pds-spacing-2xl)}.pds-horizontal-empty-state__cta .pds-button{--button-font-size:var(--pds-typography-size-m);--button-gap-inline:var(--pds-spacing-button-gap-inline-m);--button-height:var(--pds-spacing-button-height-m);--button-padding-inline:var(--pds-spacing-button-padding-inline-m)}.pds-horizontal-empty-state__media{width:40%}.pds-horizontal-empty-state__image{height:auto;width:100%}.pds-horizontal-empty-state--indented-content .pds-horizontal-empty-state__content{padding-inline-start:var(--pds-spacing-xl)}.pds-horizontal-empty-state--video .pds-horizontal-empty-state__content,.pds-horizontal-empty-state--video .pds-horizontal-empty-state__media{width:50%}.pds-horizontal-empty-state__media--video .pds-video-embed{border-radius:var(--pds-border-radius-panel)}[data-pds-mobile] .pds-horizontal-empty-state{flex-direction:column}[data-pds-mobile] .pds-horizontal-empty-state .pds-horizontal-empty-state__content,[data-pds-mobile] .pds-horizontal-empty-state .pds-horizontal-empty-state__media{width:100%}[data-pds-mobile] .pds-horizontal-empty-state .pds-horizontal-empty-state__content{padding-inline-end:0}[data-pds-mobile] .pds-horizontal-empty-state .pds-horizontal-empty-state__media--image{display:none}[data-pds-mobile] .pds-horizontal-empty-state .pds-horizontal-empty-state__media--video{order:-1}}

package/dist/css/component-css/pds-illustration.css

@@ -0,0 +1 @@
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-illustration{display:inline-block;height:auto;max-width:100%}}