@pantheon-systems/pds-toolkit-react 2.0.0-alpha.34 → 2.0.0-alpha.36

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/basic.input.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+	Spinner,
+	Avatar,
+	StatusIndicator,
+	Badge,
+	Tooltip,
+} from '@pantheon-systems/pds-toolkit-react';
+import { IconButton as PdsIconButton } from '@pantheon-systems/pds-toolkit-react';
+
+// String literals — should be updated
+const A = () => <Spinner size='sm' />;
+const B = () => <Spinner size='md' />;
+const C = () => <Spinner size='lg' />;
+const D = () => <Avatar size='sm' />;
+const E = () => <Avatar size='lg' />;
+// StatusIndicator has a different mapping: sm→xs, md→s
+const F = () => <StatusIndicator size='sm' />;
+const G = () => <StatusIndicator size='md' />;
+// Aliased import
+const H = () => <PdsIconButton size='sm' />;
+
+// JSX expression container — should also be updated
+const I = () => <Badge size={'sm'} />;
+
+// Already correct — should be left alone
+const J = () => <Spinner size='s' />;
+// Variable — cannot be transformed at compile time, leave as-is
+const mySize = 'sm';
+const K = () => <Spinner size={mySize} />;
+
+// Non-PDS component — should be left alone
+const L = () => <div size='sm' />;
+
+// Tooltip uses a different prop name: triggerIconSize
+const M = () => <Tooltip triggerIconSize='sm' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/basic.output.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+	Spinner,
+	Avatar,
+	StatusIndicator,
+	Badge,
+	Tooltip,
+} from '@pantheon-systems/pds-toolkit-react';
+import { IconButton as PdsIconButton } from '@pantheon-systems/pds-toolkit-react';
+
+// String literals — should be updated
+const A = () => <Spinner size='s' />;
+const B = () => <Spinner size='m' />;
+const C = () => <Spinner size='l' />;
+const D = () => <Avatar size='s' />;
+const E = () => <Avatar size='m' />;
+// StatusIndicator has a different mapping: sm→xs, md→s
+const F = () => <StatusIndicator size='xs' />;
+const G = () => <StatusIndicator size='s' />;
+// Aliased import
+const H = () => <PdsIconButton size='s' />;
+
+// JSX expression container — should also be updated
+const I = () => <Badge size={'s'} />;
+
+// Already correct — should be left alone
+const J = () => <Spinner size='s' />;
+// Variable — cannot be transformed at compile time, leave as-is
+const mySize = 'sm';
+const K = () => <Spinner size={mySize} />;
+
+// Non-PDS component — should be left alone
+const L = () => <div size='sm' />;
+
+// Tooltip uses a different prop name: triggerIconSize
+const M = () => <Tooltip triggerIconSize='s' />;

package/codemods/v1-to-v2/transforms/__tests__/prop-value-standardization.test.js

@@ -0,0 +1,6 @@
+const { defineTest } = require('jscodeshift/src/testUtils');
+
+const transform = 'prop-value-standardization';
+const fixtures = `${__dirname}/../__testfixtures__/${transform}`;
+
+defineTest(__dirname, transform, null, `${transform}/basic`, { parser: 'tsx' });

package/codemods/v1-to-v2/transforms/prop-value-standardization.js

@@ -0,0 +1,112 @@
+/**
+ * Codemod: prop-value-standardization
+ *
+ * Standardizes size-related prop values across PDS v1→v2.
+ * Driven entirely by props.typeChanges[].migration in mappings.json.
+ *
+ * Usage:
+ *   npx jscodeshift -t codemods/v1-to-v2/transforms/prop-value-standardization.js \
+ *     --extensions=tsx,ts,jsx,js \
+ *     src/
+ */
+
+const path = require('path');
+const mappings = require(path.join(__dirname, '../mappings.json'));
+
+// Build lookup: { 'ComponentName.propName': { oldValue: newValue } }
+// Skips entries that are notes or no-ops.
+function buildMigrationLookup() {
+	const lookup = {};
+
+	for (const entry of mappings.props.typeChanges) {
+		const { component, prop, migration } = entry;
+		if (!migration || typeof migration !== 'object' || Array.isArray(migration))
+			continue;
+
+		const map = {};
+		for (const [from, to] of Object.entries(migration)) {
+			if (from === 'note') continue;
+			// Strip parenthetical notes e.g. "s (removed, use 's' instead)" → "s"
+			const cleanTo = to.split(' ')[0];
+			// Skip no-op entries where value is unchanged
+			if (cleanTo === from) continue;
+			map[from] = cleanTo;
+		}
+
+		if (Object.keys(map).length > 0) {
+			lookup[`${component}.${prop}`] = map;
+		}
+	}
+
+	return lookup;
+}
+
+const MIGRATION_LOOKUP = buildMigrationLookup();
+
+module.exports = function transform(file, api) {
+	const j = api.jscodeshift;
+	const root = j(file.source);
+
+	// Map local import name → exported component name
+	// Handles aliased imports: import { Spinner as MySpinner } → { MySpinner: 'Spinner' }
+	const localToExported = new Map();
+
+	root.find(j.ImportDeclaration).forEach((nodePath) => {
+		if (nodePath.node.source.value !== '@pantheon-systems/pds-toolkit-react')
+			return;
+		nodePath.node.specifiers.forEach((spec) => {
+			if (spec.type === 'ImportSpecifier') {
+				localToExported.set(spec.local.name, spec.imported.name);
+			}
+		});
+	});
+
+	if (localToExported.size === 0) return;
+
+	let changed = false;
+
+	root.find(j.JSXOpeningElement).forEach((nodePath) => {
+		const nameNode = nodePath.node.name;
+		// Skip member expressions like <Foo.Bar />
+		if (nameNode.type !== 'JSXIdentifier') return;
+
+		const exportedName = localToExported.get(nameNode.name);
+		if (!exportedName) return;
+
+		nodePath.node.attributes.forEach((attr) => {
+			if (attr.type !== 'JSXAttribute' || !attr.value) return;
+
+			const propName = attr.name.name;
+			if (typeof propName !== 'string') return;
+
+			const map = MIGRATION_LOOKUP[`${exportedName}.${propName}`];
+			if (!map) return;
+
+			// size="sm"
+			if (attr.value.type === 'StringLiteral') {
+				const newValue = map[attr.value.value];
+				if (newValue) {
+					attr.value = j.stringLiteral(newValue);
+					changed = true;
+				}
+				return;
+			}
+
+			// size={"sm"}
+			if (
+				attr.value.type === 'JSXExpressionContainer' &&
+				attr.value.expression.type === 'StringLiteral'
+			) {
+				const newValue = map[attr.value.expression.value];
+				if (newValue) {
+					attr.value.expression = j.stringLiteral(newValue);
+					changed = true;
+				}
+			}
+		});
+	});
+
+	return changed ? root.toSource() : undefined;
+};
+
+module.exports.parser = 'tsx';

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

@@ -1,6 +1,20 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './table.css';
 export type SortOrder = 'asc' | 'desc';
+export type DetailPanelContext = {
+    /** Whether there is a next row to navigate to. */
+    hasNext: boolean;
+    /** Whether there is a previous row to navigate to. */
+    hasPrev: boolean;
+    /** Close the detail panel. */
+    onClose: () => void;
+    /** Navigate to the next row. */
+    onNext: () => void;
+    /** Navigate to the previous row. */
+    onPrev: () => void;
+    /** Stable ID of the currently inspected row. */
+    rowId: string;
+};
 export interface TableColumn {
     /** Content to display in the header cell. */
     header: ReactNode;
@@ -17,6 +31,11 @@ export interface TableColumn {
 export interface TableProps extends ComponentPropsWithoutRef<'table'> {
     /** Additional class names */
     className?: string;
+    /**
+     * Accessible label for the detail panel close button.
+     * Defaults to `'Close detail panel'`. Override for translation.
+     */
+    closeDetailPanelLabel?: string;
     /** Column definitions. Each column requires a stable `id`. */
     columns: TableColumn[];
     /**
@@ -35,6 +54,23 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * Only applies in uncontrolled sort mode.
      */
     defaultSortOrder?: SortOrder;
+    /**
+     * When `true` (default), renders built-in prev/next navigation buttons in
+     * the detail panel footer. Set to `false` to hide the footer entirely.
+     * Has no effect when `renderDetailPanelFooter` is provided — the custom
+     * footer always takes precedence.
+     */
+    detailPanelNav?: boolean;
+    /**
+     * Optional title displayed in the detail panel header, to the left of the
+     * close button.
+     */
+    detailPanelTitle?: ReactNode;
+    /**
+     * Custom width for the detail panel. Accepts any valid CSS value (e.g. `'20rem'`, `'400px'`).
+     * Defaults to `'20rem'`.
+     */
+    detailPanelWidth?: string;
     /**
      * Custom empty state rendered when `rowData` is empty and `isLoading` is false.
      * When provided, takes precedence over `emptyStateHeading` and `emptyStateMessage`.
@@ -49,12 +85,24 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * Optional message displayed below the heading in the default empty state.
      */
     emptyStateMessage?: string;
+    /**
+     * Optional content rendered below the table, outside the scroll area.
+     * Use for status bars, custom controls, or other table-level UI. Renders
+     * independently of and below the pagination footer when both are present.
+     */
+    footer?: ReactNode;
     /**
      * Returns the accessible label for each option in the rows-per-page selector.
      * Defaults to `(size) => \`Show ${size} rows per page\``.
      * Override for translation.
      */
     getPageSizeLabel?: (size: number) => string;
+    /**
+     * Returns an additional CSS class name to apply to a row's `<tr>` element.
+     * Use for per-row status coloring or other conditional styling.
+     * Receives the row data object and its stable row ID (from `getRowId`).
+     */
+    getRowClassName?: (row: Record<string, ReactNode>, rowId: string) => string | null | undefined;
     /**
      * Derives a stable string ID from a row object for selection tracking.
      * Defaults to the row's array index. Provide this when using pagination
@@ -75,6 +123,12 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * Override for translation.
      */
     getSortLabel?: (columnHeader: string) => string;
+    /**
+     * ID of the currently inspected row. When provided, that row receives a
+     * highlighted background. Use the same ID space as `getRowId`. Only
+     * meaningful when `onRowInspect` or `renderDetailPanel` is also provided.
+     */
+    inspectedRowId?: string;
     /**
      * When true, renders skeleton rows instead of data. Use while data is loading.
      */
@@ -89,6 +143,21 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * Number of skeleton rows to render when `isLoading` is true. Defaults to 5.
      */
     loadingRowCount?: number;
+    /**
+     * Accessible label for the detail panel "next row" button.
+     * Defaults to `'Next row'`. Override for translation.
+     */
+    nextDetailPanelRowLabel?: string;
+    /**
+     * Called after the detail panel navigates to the next row. Use for side
+     * effects (fetching data, analytics) — the built-in navigation still runs.
+     */
+    onDetailPanelNext?: (row: Record<string, ReactNode>, rowId: string) => void;
+    /**
+     * Called after the detail panel navigates to the previous row. Use for side
+     * effects (fetching data, analytics) — the built-in navigation still runs.
+     */
+    onDetailPanelPrev?: (row: Record<string, ReactNode>, rowId: string) => void;
     /**
      * Callback fired when the user navigates to a new page. Receives the new
      * 1-based page number. Providing this prop enables controlled pagination mode.
@@ -100,6 +169,12 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * In uncontrolled mode the Table manages page size internally.
      */
     onPageSizeChange?: (size: number) => void;
+    /**
+     * Callback fired when a row is clicked for inspection. Providing this prop
+     * makes rows clickable and enables the row detail drawer pattern.
+     * Receives the row data object and its stable row ID (from `getRowId`).
+     */
+    onRowInspect?: (row: Record<string, ReactNode>, rowId: string) => void;
     /**
      * Callback fired when row selection changes. Providing this prop enables
      * the checkbox column. Receives the full array of currently selected row IDs.
@@ -114,11 +189,42 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * internally and expects the parent to pass pre-sorted data.
      */
     onSort?: (key: string, order: SortOrder) => void;
+    /**
+     * Render prop for the detail panel content. When provided, clicking a row
+     * slides in an inline detail panel alongside the table. Receives the row
+     * data and a context object with navigation callbacks and state.
+     * See the [Row detail panel](/docs/components-table--row-detail-panel) story.
+     */
     /**
      * Available page size options rendered in the rows-per-page selector.
      * When provided, the selector is shown to the left of the pagination controls.
      */
     pageSizeOptions?: number[];
+    /**
+     * When true, renders the table inside a Panel with no padding. Automatically
+     * applies first-column spacing and removes the last row's bottom border so
+     * it doesn't double up against the footer border.
+     */
+    panel?: boolean;
+    /**
+     * Accessible label for the detail panel "previous row" button.
+     * Defaults to `'Previous row'`. Override for translation.
+     */
+    prevDetailPanelRowLabel?: string;
+    /**
+     * Render prop for the detail panel content. When provided, clicking a row
+     * slides in an inline detail panel alongside the table. Receives the row
+     * data and a context object with navigation callbacks and state.
+     * See the [Row detail panel](/docs/components-table--row-detail-panel) story.
+     */
+    renderDetailPanel?: (row: Record<string, ReactNode>, context: DetailPanelContext) => ReactNode;
+    /**
+     * Optional content rendered at the bottom of the detail panel, outside the
+     * scrollable content area. Use for navigation controls, action buttons, or
+     * other panel-level UI. The consumer is responsible for all styling including
+     * any separator between content and footer.
+     */
+    renderDetailPanelFooter?: (row: Record<string, ReactNode>, context: DetailPanelContext) => ReactNode;
     /**
      * Row data as an array of records keyed by column id.
      * In controlled pagination mode, pass only the current page's rows.
@@ -148,4 +254,4 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      */
     totalItemCount?: number;
 }
-export declare const Table: ({ className, columns, currentPage, defaultSortKey, defaultSortOrder, emptyState, emptyStateHeading, emptyStateMessage, getPageSizeLabel, getRowId, getSelectRowLabel, getSortLabel, isLoading, itemsPerPage, loadingRowCount, onPageChange, onPageSizeChange, onRowSelectionChange, onSort, pageSizeOptions, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ className, closeDetailPanelLabel, columns, currentPage, defaultSortKey, defaultSortOrder, detailPanelNav, detailPanelTitle, detailPanelWidth, emptyState, emptyStateHeading, emptyStateMessage, footer, getPageSizeLabel, getRowClassName, getRowId, getSelectRowLabel, getSortLabel, inspectedRowId, isLoading, itemsPerPage, loadingRowCount, nextDetailPanelRowLabel, onDetailPanelNext, onDetailPanelPrev, onPageChange, onPageSizeChange, onRowInspect, onRowSelectionChange, onSort, pageSizeOptions, panel, prevDetailPanelRowLabel, renderDetailPanel, renderDetailPanelFooter, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/Button/Button.d.ts

@@ -1,5 +1,7 @@
 import React, { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
+import { StatusDotType } from '../../../libs/components/StatusDot/StatusDot';
 import { ButtonDisplayType, ButtonSize, ButtonType, ButtonVariant } from '../../../libs/types/custom-types';
+import { TallyProps } from '../../badges/Tally/Tally';
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './button.css';
 interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
@@ -56,6 +58,19 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
      * @default 's'
      */
     size?: ButtonSize;
+    /**
+     * A status dot displayed in the left icon slot. Mutually exclusive with `iconName` when `displayType` is `icon-start`.
+     * Only valid on `primary`, `secondary`, and `subtle` variants.
+     */
+    statusDot?: StatusDotType;
+    /**
+     * A tally badge displayed in the right icon slot. Mutually exclusive with `iconName` when `displayType` is `icon-end`.
+     * Only valid on `primary`, `secondary`, `subtle`, and `highlight` variants.
+     */
+    tally?: {
+        label: TallyProps['label'];
+        type: TallyProps['type'];
+    };
     /**
      * Text for an optional tooltip to be displayed when the button is `disabled`, `isLoading`, or `isWorking`.
      */

package/dist/components/buttons/MenuButton/MenuButton.d.ts

@@ -1,5 +1,7 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
+import { StatusDotType } from '../../../libs/components/StatusDot/StatusDot';
 import { ButtonVariant, HeadingItemType, LinkItemType, MenuItemType, NodeItemType, SeparatorItemType } from '../../../libs/types/custom-types';
+import { TallyProps } from '../../badges/Tally/Tally';
 import { PDSIcon } from '../../icons/Icon/Icon';
 import '@components/Dropdown/dropdown.css';
 import './menu-button.css';
@@ -17,13 +19,13 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      */
     disabled?: boolean;
     /**
-     * How the button is displayed.
+     * Icon name for icon-only mode.
      */
-    displayType?: 'icon-end' | 'icon-only';
+    iconName?: PDSIcon;
     /**
-     * Icon name for icon-only buttons.
+     * Render as an icon-only button (no label, no angle-down). Not compatible with `tally` or `statusDot`.
      */
-    iconName?: PDSIcon;
+    iconOnly?: boolean;
     /**
      * ID value for this component.
      */
@@ -52,6 +54,17 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      * Which size of button to render.
      */
     size?: MenuButtonSize;
+    /**
+     * A status dot displayed in the left icon slot. Not available in `iconOnly` mode.
+     */
+    statusDot?: StatusDotType;
+    /**
+     * A tally badge displayed between the label and the angle-down icon. Not available in `iconOnly` mode.
+     */
+    tally?: {
+        label: TallyProps['label'];
+        type: TallyProps['type'];
+    };
     /**
      *  Optional `data-testid` value for this component.
      */
@@ -61,12 +74,12 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      */
     undefinedLabel?: string;
     /**
-     * Which variant of button to render — only valid for icon-end (default) display type.
+     * Which variant of button to render. Not available in `iconOnly` mode.
      */
-    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle'>;
+    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle' | 'highlight'>;
 }
 /**
  * MenuButton UI component
  */
-export declare const MenuButton: ({ className, disabled, displayType, iconName, id, isSplitButton, label, menuItems, menuPosition, onClick, size, testId, undefinedLabel, variant, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuButton: ({ className, disabled, iconName, iconOnly, id, isSplitButton, label, menuItems, menuPosition, onClick, size, statusDot, tally, testId, undefinedLabel, variant, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/SegmentedButton/SegmentedButton.d.ts

@@ -19,7 +19,7 @@ interface OptionType {
  */
 export interface SegmentedButtonProps {
     /**
-     * Additional class names
+     * Additional class names.
      */
     className?: string;
     /**
@@ -27,7 +27,7 @@ export interface SegmentedButtonProps {
      */
     defaultValue?: string;
     /**
-     * Is the SegmentedButton disabled?
+     * Disables all options in the SegmentedButton.
      */
     disabled?: boolean;
     /**
@@ -39,11 +39,12 @@ export interface SegmentedButtonProps {
      */
     label: string;
     /**
-     * Callback function that will return the updated value from the instance when it changes.
+     * Callback fired when the selected option changes.
      */
     onChange?: (value: string) => void;
     /**
-     * Array of button options — must be between 2 and 6 options.
+     * Array of button options — must be between 2 and 6 options. Each option
+     * may include an optional icon displayed before the label.
      */
     options: OptionType[];
     /**
@@ -51,7 +52,7 @@ export interface SegmentedButtonProps {
      */
     size?: 's' | 'm';
     /**
-     * Value of the Segmented Button. Used to set the value of the field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
+     * Controlled value. Cannot be used together with `defaultValue`.
      */
     value?: string;
 }

package/dist/components/buttons/SplitButton/SplitButton.d.ts

@@ -33,7 +33,7 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
     /**
      * Which variant of button to render
      */
-    variant?: Extract<ButtonVariant, 'primary' | 'secondary'>;
+    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'highlight'>;
 }
 /**
  * A component used to render a button with a primary action and a menu of additional options

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-05-28T21:43:58.268Z
+ * Generated: 2026-07-02T02:04:49.319Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };
@@ -29,6 +29,13 @@ export declare const iconData: {
         readonly svgPathData: "M241.5 239c9.4 9.4 9.4 24.6 0 33.9L81.5 433c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l143-143-143-143c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l160 160z";
         readonly width: 256;
     };
+    readonly anglesDown: {
+        readonly aliases: readonly ["chevrons down", "double down", "scroll to bottom"];
+        readonly categories: readonly ["arrows"];
+        readonly height: 512;
+        readonly svgPathData: "M369.5 113l-160 160c-9.4 9.4-24.6 9.4-33.9 0L15.5 113c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zm0 192l-160 160c-9.4 9.4-24.6 9.4-33.9 0L15.5 305c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z";
+        readonly width: 384;
+    };
     readonly anglesLeft: {
         readonly aliases: readonly ["chevrons left", "double left"];
         readonly categories: readonly ["arrows"];
@@ -43,6 +50,13 @@ export declare const iconData: {
         readonly svgPathData: "M81.5 433l160-160c9.4-9.4 9.4-24.6 0-33.9L81.5 79c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l143 143-143 143c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0zm192 0l160-160c9.4-9.4 9.4-24.6 0-33.9L273.5 79c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l143 143-143 143c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0z";
         readonly width: 448;
     };
+    readonly anglesUp: {
+        readonly aliases: readonly ["chevrons up", "double up", "scroll to top"];
+        readonly categories: readonly ["arrows"];
+        readonly height: 512;
+        readonly svgPathData: "M209.5 47c-9.4-9.4-24.6-9.4-33.9 0L15.5 207c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l143-143 143 143c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L209.5 47zm160 352l-160-160c-9.4-9.4-24.6-9.4-33.9 0L15.5 399c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l143-143 143 143c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9z";
+        readonly width: 384;
+    };
     readonly angleUp: {
         readonly aliases: readonly ["chevron up"];
         readonly categories: readonly ["arrows"];
@@ -1493,7 +1507,7 @@ export declare const iconData: {
         readonly width: 576;
     };
 };
-export declare const iconList: readonly ["angleDown", "angleLeft", "angleRight", "anglesLeft", "anglesRight", "angleUp", "arrowDownLeftAndArrowUpRightToCenter", "arrowDownToLine", "arrowLeft", "arrowRight", "arrowsRetweet", "arrowsUpDownLeftRight", "asterisk", "banBug", "bars", "barsFilter", "barsStaggered", "bell", "billboard", "bitbucket", "bluesky", "bolt", "boltPantheon", "boltSolid", "book", "books", "bracketRight", "bracketsSquare", "brainCircuit", "broomWide", "building", "buildings", "bullhorn", "calendarDays", "caretDown", "caretLeft", "caretRight", "caretUp", "ccAmex", "ccApplePay", "ccDiscover", "ccGeneric", "ccMC", "ccPaypal", "ccVisa", "chartLine", "chartNetwork", "chartSimple", "check", "circle", "circleCheck", "circleExclamation", "circleExclamationSolid", "circleInfo", "circleInfoSolid", "circleMinus", "circleNotch", "circlePlus", "circleQuestion", "circleQuestionSolid", "circleUser", "circleXmark", "cloud", "cloudArrowDown", "cloudArrowUp", "cloudPlus", "code", "codeBranch", "codeMerge", "command", "comment", "compress", "copy", "desktop", "diamondExclamation", "diamonds4", "discourse", "display", "dollarSign", "download", "drupal", "ellipsis", "ellipsisVertical", "emptySet", "envelope", "envelopeOpen", "exclamation", "expand", "expandFromCenter", "externalLink", "eye", "eyeSlash", "facebook", "file", "fileCheck", "fileContract", "fileCSV", "fileDiff", "fileExport", "fileImport", "fileLines", "filePDF", "fileZip", "folder", "folderTree", "gear", "gem", "github", "gitlab", "globe", "graduationCap", "grid", "gripDots", "gripDotsVertical", "heart", "heartSolid", "house", "idCard", "image", "inputText", "instagram", "keySkeleton", "landmark", "laptop", "laptopCode", "leaf", "lifeRing", "linkedin", "linkSimple", "linkSimpleSlash", "listCheck", "locationCrosshairs", "lock", "lockOpen", "magnifyingGlass", "medal", "memo", "messages", "minus", "moon", "nextJs", "paperclip", "paperPlane", "pause", "pen", "penField", "phone", "play", "plus", "question", "quotesLeft", "quotesRight", "rectangleList", "reply", "robot", "rocketLaunch", "rotate", "rotateClock", "rotateLeft", "rotateRight", "rss", "save", "server", "shareNodes", "shield", "shieldQuartered", "shovel", "sidebar", "siren", "sirenOn", "sitemap", "slack", "slashForward", "slidersSimple", "snowflake", "sparkles", "squareCheck", "squareCode", "squareMinus", "squarePen", "squareQuestion", "squareTerminal", "star", "starSolid", "sun", "sunBright", "table", "tableRows", "terminal", "text", "threads", "thumbsDown", "thumbsUp", "trash", "triangleExclamation", "twitter", "upload", "user", "userAstronaut", "userGear", "userPlus", "users", "video", "wavePulse", "windowRestore", "wordpress", "wreathLaurel", "wrench", "xmark", "xmarkLarge", "xTwitter", "youtube"];
+export declare const iconList: readonly ["angleDown", "angleLeft", "angleRight", "anglesDown", "anglesLeft", "anglesRight", "anglesUp", "angleUp", "arrowDownLeftAndArrowUpRightToCenter", "arrowDownToLine", "arrowLeft", "arrowRight", "arrowsRetweet", "arrowsUpDownLeftRight", "asterisk", "banBug", "bars", "barsFilter", "barsStaggered", "bell", "billboard", "bitbucket", "bluesky", "bolt", "boltPantheon", "boltSolid", "book", "books", "bracketRight", "bracketsSquare", "brainCircuit", "broomWide", "building", "buildings", "bullhorn", "calendarDays", "caretDown", "caretLeft", "caretRight", "caretUp", "ccAmex", "ccApplePay", "ccDiscover", "ccGeneric", "ccMC", "ccPaypal", "ccVisa", "chartLine", "chartNetwork", "chartSimple", "check", "circle", "circleCheck", "circleExclamation", "circleExclamationSolid", "circleInfo", "circleInfoSolid", "circleMinus", "circleNotch", "circlePlus", "circleQuestion", "circleQuestionSolid", "circleUser", "circleXmark", "cloud", "cloudArrowDown", "cloudArrowUp", "cloudPlus", "code", "codeBranch", "codeMerge", "command", "comment", "compress", "copy", "desktop", "diamondExclamation", "diamonds4", "discourse", "display", "dollarSign", "download", "drupal", "ellipsis", "ellipsisVertical", "emptySet", "envelope", "envelopeOpen", "exclamation", "expand", "expandFromCenter", "externalLink", "eye", "eyeSlash", "facebook", "file", "fileCheck", "fileContract", "fileCSV", "fileDiff", "fileExport", "fileImport", "fileLines", "filePDF", "fileZip", "folder", "folderTree", "gear", "gem", "github", "gitlab", "globe", "graduationCap", "grid", "gripDots", "gripDotsVertical", "heart", "heartSolid", "house", "idCard", "image", "inputText", "instagram", "keySkeleton", "landmark", "laptop", "laptopCode", "leaf", "lifeRing", "linkedin", "linkSimple", "linkSimpleSlash", "listCheck", "locationCrosshairs", "lock", "lockOpen", "magnifyingGlass", "medal", "memo", "messages", "minus", "moon", "nextJs", "paperclip", "paperPlane", "pause", "pen", "penField", "phone", "play", "plus", "question", "quotesLeft", "quotesRight", "rectangleList", "reply", "robot", "rocketLaunch", "rotate", "rotateClock", "rotateLeft", "rotateRight", "rss", "save", "server", "shareNodes", "shield", "shieldQuartered", "shovel", "sidebar", "siren", "sirenOn", "sitemap", "slack", "slashForward", "slidersSimple", "snowflake", "sparkles", "squareCheck", "squareCode", "squareMinus", "squarePen", "squareQuestion", "squareTerminal", "star", "starSolid", "sun", "sunBright", "table", "tableRows", "terminal", "text", "threads", "thumbsDown", "thumbsUp", "trash", "triangleExclamation", "twitter", "upload", "user", "userAstronaut", "userGear", "userPlus", "users", "video", "wavePulse", "windowRestore", "wordpress", "wreathLaurel", "wrench", "xmark", "xmarkLarge", "xTwitter", "youtube"];
 export type PDSIconName = (typeof iconList)[number];
 export declare const categoryList: readonly ["actions", "arrows", "brands", "communication", "custom", "data", "development", "documents", "financial", "media", "navigation", "objects", "security", "status", "users"];
 export type IconCategory = (typeof categoryList)[number];

package/dist/components/inputs/Datepicker/Datepicker.d.ts

@@ -1,16 +1,21 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { Locale } from 'date-fns';
 import { DateRange } from 'react-day-picker';
+import { ValidationStatus } from '../../../libs/types/input-types';
 import 'react-day-picker/dist/style.css';
 import './datepicker.css';
-type PresetType = 'today' | 'current-week' | 'current-month' | 'last-week' | 'last-month';
+export type PresetType = 'today' | 'current-week' | 'current-month' | 'last-week' | 'last-month';
 export interface CustomPresetConfig {
-    active?: boolean;
     custom?: () => DateRange;
     days?: number;
     label: string;
     type?: PresetType;
 }
+/**
+ * Converts a preset config to a DateRange. Use this alongside an external
+ * SegmentedButton, Select, or other control to compose preset date pickers.
+ */
+export declare const getPresetDateRange: (preset: CustomPresetConfig) => DateRange;
 export interface DatepickerTranslationStrings {
     clearButton?: string;
     doneButton?: string;
@@ -21,6 +26,7 @@ export interface DatepickerTranslationStrings {
     selectedDateRange?: string;
     selectedStartDate?: string;
     to?: string;
+    todayButton?: string;
 }
 /**
  * Prop types for Datepicker.
@@ -61,6 +67,10 @@ export interface DatepickerProps extends DatepickerHTMLProps {
      * Maximum selectable date.
      */
     maxDate?: Date;
+    /**
+     * Helper text displayed below the input.
+     */
+    message?: string | ReactNode;
     /**
      * Minimum selectable date.
      */
@@ -69,19 +79,10 @@ export interface DatepickerProps extends DatepickerHTMLProps {
      * onChange handler
      */
     onChange?: (value: DateRange | Date | undefined) => void;
-    /**
-     * Callback fired once on mount when an active preset is applied.
-     * Only fires if no initial value is provided and a preset has active: true.
-     */
-    onInitialize?: (value: DateRange | Date | undefined) => void;
     /**
      * Placeholder text for the trigger button.
      */
     placeholder?: string;
-    /**
-     * Optional preset date ranges (only available when hasDateRange is true).
-     */
-    presets?: CustomPresetConfig[];
     /**
      * Is this field required?
      */
@@ -98,6 +99,14 @@ export interface DatepickerProps extends DatepickerHTMLProps {
      * Translation strings for labels.
      */
     translationStrings?: DatepickerTranslationStrings;
+    /**
+     * Validation message that takes priority over `message` when set.
+     */
+    validationMessage?: string;
+    /**
+     * Validation status. Controls error/success styling and message display.
+     */
+    validationStatus?: ValidationStatus;
     /**
      * Selected date or date range.
      */
@@ -106,5 +115,5 @@ export interface DatepickerProps extends DatepickerHTMLProps {
 /**
  * Datepicker UI component.
  */
-export declare const Datepicker: ({ className, disabled, hasDateRange, id, inputWidth, label, locale, maxDate, minDate, onChange, onInitialize, placeholder, presets, required, showLabel, tooltipText, translationStrings, value, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Datepicker: ({ className, disabled, hasDateRange, id, inputWidth, label, locale, maxDate, message, minDate, onChange, placeholder, required, showLabel, tooltipText, translationStrings: translationStringsProp, validationMessage, validationStatus, value, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};