@pantheon-systems/pds-toolkit-react 2.0.0-alpha.11 → 2.0.0-alpha.13

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,140 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { UseDropdownOptions } from '../../utilities/hooks/useDropdown';
+import './dropdown.css';
+export interface DropdownProps extends UseDropdownOptions {
+    /**
+     * Dropdown sub-components (Trigger, Panel, etc.).
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names for the root wrapper.
+     */
+    className?: string;
+    /**
+     * Use inline-block display instead of block.
+     * Useful when the dropdown trigger should size to its content
+     * (e.g., UserMenu, MenuButton) rather than fill the parent width.
+     */
+    inline?: boolean;
+}
+/**
+ * Root Dropdown component. Provides dropdown context to sub-components.
+ */
+export declare const Dropdown: {
+    ({ children, className, inline, ...options }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, showTriggerIcon, ...props }: DropdownTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ children, className, ...props }: DropdownPanelProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, className, description, disabled, icon, index, isActive, isCritical, onClick, trailingIcon, ...props }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ children, className, ...props }: DropdownHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ className, ...props }: DropdownSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+    Filter: ({ className, filterIcon, label, noResultsText, onFilterChange, placeholder, showNoResults, ...props }: DropdownFilterProps) => import("react/jsx-runtime").JSX.Element;
+};
+export interface DropdownTriggerProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Trigger content (label text, icon, etc.).
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Show a directional icon on the trigger that indicates the dropdown can be expanded.
+     */
+    showTriggerIcon?: boolean;
+}
+export interface DropdownPanelProps extends ComponentPropsWithoutRef<'ul'> {
+    /**
+     * Panel content (Items, Headings, Separators, Filter, etc.).
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+export interface DropdownItemProps extends ComponentPropsWithoutRef<'li'> {
+    /**
+     * Item content — label text, or a link element for navigation items.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Secondary text displayed below the label.
+     */
+    description?: ReactNode;
+    /**
+     * Disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * Leading content — PDSIcon name, or custom ReactNode (Avatar, etc.).
+     */
+    icon?: ReactNode;
+    /**
+     * Index of this item in the list (required for keyboard navigation).
+     */
+    index: number;
+    /**
+     * Selected or current state.
+     */
+    isActive?: boolean;
+    /**
+     * Destructive action styling.
+     */
+    isCritical?: boolean;
+    /**
+     * Trailing content — check icon, lock icon, or custom ReactNode.
+     */
+    trailingIcon?: ReactNode;
+}
+export interface DropdownHeadingProps extends ComponentPropsWithoutRef<'li'> {
+    /**
+     * Heading text.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+export interface DropdownSeparatorProps extends ComponentPropsWithoutRef<'li'> {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+export type DropdownFilterIcon = 'filter' | 'none' | 'search';
+export interface DropdownFilterProps extends ComponentPropsWithoutRef<'li'> {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Icon to display inside the filter input.
+     */
+    filterIcon?: DropdownFilterIcon;
+    /**
+     * Label for the filter input (screen readers).
+     */
+    label?: string;
+    /**
+     * Text shown when no items match the filter.
+     */
+    noResultsText?: string;
+    /**
+     * Callback when the filter value changes.
+     */
+    onFilterChange?: (value: string) => void;
+    /**
+     * Placeholder text for the filter input.
+     */
+    placeholder?: string;
+    /**
+     * Whether to show the "no results" message.
+     */
+    showNoResults?: boolean;
+}

package/dist/components/Dropdown/DropdownSelectedIcon.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Selected-state check mark icon for dropdown items.
+ * Used alongside the pds-dropdown__selected-icon CSS class.
+ */
+export declare const DropdownSelectedIcon: ({ className, }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Popover/Popover.d.ts

@@ -58,8 +58,12 @@ export interface PopoverProps extends Omit<ComponentPropsWithoutRef<'div'>, 'con
      * The icon to use as the trigger.
      */
     triggerIcon?: 'circleInfo' | 'circleQuestion';
+    /**
+     * Size of the trigger icon. Uses PDS Icon sizing.
+     */
+    triggerIconSize?: 's' | 'm' | 'l';
 }
 /**
  * Popover UI component
  */
-export declare const Popover: ({ className, classNameContainer, closeButtonLabel, content, customTrigger, hasCloseButton, offsetValue, onClose, placement, popoverIsOpen, setPopoverIsOpen, title, triggerAccessibleText, triggerIcon, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Popover: ({ className, classNameContainer, closeButtonLabel, content, customTrigger, hasCloseButton, offsetValue, onClose, placement, popoverIsOpen, setPopoverIsOpen, title, triggerAccessibleText, triggerIcon, triggerIconSize, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,27 +1,18 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './table.css';
-/**
- * Prop types for Table
- */
-interface TableProps extends ComponentPropsWithoutRef<'table'> {
-    /**
-     * Additional class names
-     */
+export interface TableProps extends ComponentPropsWithoutRef<'table'> {
+    /** Additional class names */
     className?: string;
-    /**
-     * Table headers
-     */
+    /** Column index (0-based) to sort by on initial render. */
+    defaultSortKey?: number;
+    /** Initial sort direction when defaultSortKey is set. Defaults to 'asc'. */
+    defaultSortOrder?: 'asc' | 'desc';
+    /** Table headers */
     headers?: Array<{
         sortable?: boolean;
         title: ReactNode;
     }>;
-    /**
-     * Table row data - array of rows, where each row is an array of cell values
-     */
+    /** Table row data - array of rows, where each row is an array of cell values */
     rowData?: Array<Array<string | ReactNode>>;
 }
-/**
- * Table UI component
- */
-export declare const Table: ({ className, headers, rowData, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Table: ({ className, defaultSortKey, defaultSortOrder, headers, rowData, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
 import './theme-switcher.css';
+type Theme = 'light' | 'dark' | 'system';
 /**
  * Prop types for ThemeSwitcher
  */
@@ -9,24 +10,29 @@ export interface ThemeSwitcherProps extends Omit<ComponentPropsWithoutRef<'div'>
      */
     className?: string;
     /**
-     * Callback triggered when the theme changes
+     * ID for the menu button. Must be unique if multiple ThemeSwitchers are rendered.
      */
-    onChange?: (theme: 'light' | 'dark' | 'system') => void;
-    /**
-     * The current theme
-     */
-    theme?: 'light' | 'dark' | 'system';
+    id?: string;
     /**
      * Translation strings for theme options
      */
-    translations?: {
+    labelStrings?: {
         dark: string;
         light: string;
         system: string;
         tooltip?: string;
     };
+    /**
+     * Callback triggered when the theme changes
+     */
+    onChange?: (theme: Theme) => void;
+    /**
+     * The current theme
+     */
+    theme?: Theme;
 }
 /**
  * ThemeSwitcher UI component
  */
-export declare const ThemeSwitcher: ({ className, onChange, theme, translations, ...props }: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeSwitcher: ({ className, id, labelStrings, onChange, theme, ...props }: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -20,6 +20,10 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
      * Is the button disabled?
      */
     disabled?: boolean;
+    /**
+     * Show a visible border around the button.
+     */
+    hasBorder?: boolean;
     /**
      * Show tooltip on hover. If false, the title attribute will be used.
      */

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

@@ -1,6 +1,7 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { ButtonVariant, HeadingItemType, LinkItemType, MenuItemType, NodeItemType, SeparatorItemType } from '../../../libs/types/custom-types';
 import { PDSIcon } from '../../icons/Icon/Icon';
+import '@components/Dropdown/dropdown.css';
 import './menu-button.css';
 type MenuButtonSize = 's' | 'm';
 /**

package/dist/components/charts/BarChart/BarChart.d.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithoutRef } from 'react';
+import type { BaseChartProps } from '../shared/types';
+import '../shared/chart-wrapper.css';
+import './bar-chart.css';
+export type BarChartLayout = 'horizontal' | 'vertical';
+export type BarChartVariant = 'grouped' | 'stacked';
+export interface BarChartProps extends BaseChartProps, Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Border radius on bars (default: 2) */
+    barRadius?: number;
+    /** Bar orientation — horizontal (default, bars go up) or vertical (bars go sideways) */
+    layout?: BarChartLayout;
+    /** Bar layout variant (default: 'stacked') */
+    variant?: BarChartVariant;
+}
+/**
+ * BarChart UI component
+ *
+ * Renders a responsive bar chart with support for stacked or grouped layouts,
+ * multiple series, tooltips, and an accessible data table.
+ */
+export declare const BarChart: ({ accessibleDescription, barRadius, chartHeight, chartWidth, className, colorPalette, data, emptyStateHeading, emptyStateMessage, isLoading, isThumbnail, layout, legendTableHeader, legendVariant, loadingLabel, onTimePeriodChange, selectedTimePeriod, series, showAccessibleTable, showAxisLines, showGrid, showLegend, showTooltip, timePeriodOptions, variant, xAxisLabel, yAxisFormatter, yAxisLabel, ...props }: BarChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/LineChart/LineChart.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef } from 'react';
+import type { AnnotationConfig, BaseChartProps, ReferenceLineConfig } from '../shared/types';
+import '../shared/chart-wrapper.css';
+import './line-chart.css';
+export type LineStyle = 'smooth' | 'straight';
+export interface LineChartProps extends BaseChartProps, Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Annotation markers (e.g., "TODAY") */
+    annotations?: AnnotationConfig[];
+    /** Line curve style (default: 'smooth') */
+    lineStyle?: LineStyle;
+    /** Reference lines (e.g., contract limit) */
+    referenceLines?: ReferenceLineConfig[];
+    /** Show data points on lines (default: true) */
+    showDataPoints?: boolean;
+}
+/**
+ * LineChart UI component
+ *
+ * Renders a responsive line chart with support for multiple series,
+ * reference lines, annotations, tooltips, and an accessible data table.
+ */
+export declare const LineChart: ({ accessibleDescription, annotations, chartHeight, chartWidth, className, colorPalette, data, emptyStateHeading, emptyStateMessage, isLoading, isThumbnail, legendTableHeader, legendVariant, lineStyle, loadingLabel, onTimePeriodChange, referenceLines, selectedTimePeriod, series, showAccessibleTable, showAxisLines, showDataPoints, showGrid, showLegend, showTooltip, timePeriodOptions, xAxisLabel, yAxisFormatter, yAxisLabel, ...props }: LineChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/shared/ChartAccessibleTable.d.ts

@@ -0,0 +1,17 @@
+import type { ChartDataPoint, SeriesConfig } from './types';
+interface ChartAccessibleTableProps {
+    /** Chart data points */
+    data: ChartDataPoint[];
+    /** Accessible description for the table */
+    description: string;
+    /** Series definitions */
+    series: SeriesConfig[];
+    /** Optional value formatter */
+    valueFormatter?: (value: number) => string;
+}
+/**
+ * Renders a visually-hidden HTML table containing chart data
+ * for screen reader accessibility.
+ */
+export declare const ChartAccessibleTable: ({ data, description, series, valueFormatter, }: ChartAccessibleTableProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/charts/shared/ChartLegend.d.ts

@@ -0,0 +1,25 @@
+import type { ChartDataPoint, SeriesConfig } from './types';
+import './chart-legend.css';
+export type LegendVariant = 'inline' | 'table';
+interface ChartLegendProps {
+    /** Chart data — used to calculate totals for table variant */
+    data?: ChartDataPoint[];
+    /** Series definitions */
+    series: SeriesConfig[];
+    /** Colors resolved from tokens */
+    seriesColors: string[];
+    /** Table header for the totals column */
+    tableHeader?: string;
+    /** Formatter for total values in table variant */
+    valueFormatter?: (value: number) => string;
+    /** Legend display style (default: 'inline') */
+    variant?: LegendVariant;
+}
+/**
+ * ChartLegend component
+ *
+ * Renders a chart legend in either inline (horizontal list) or
+ * table (rows with totals) format.
+ */
+export declare const ChartLegend: ({ data, series, seriesColors, tableHeader, valueFormatter, variant, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/charts/shared/chart-colors.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+import type { ColorPalette } from './types';
+/**
+ * Get color for a series by index, cycling through palette if needed.
+ * Priority: customColor (hex) > paletteIndex (theme-aware) > auto-assigned.
+ */
+export declare const getSeriesColor: (index: number, palette: string[], customColor?: string, paletteIndex?: number) => string;
+/**
+ * Resolve palette token colors from computed styles on an element.
+ * Falls back to hex values if tokens are not available.
+ */
+export declare const resolveTokenColors: (element: HTMLElement | null, paletteName: ColorPalette) => string[];
+/**
+ * Hook to resolve chart colors from design tokens at runtime.
+ * Falls back to hex values when tokens are not loaded (e.g., SSR).
+ * Re-resolves when the theme changes (via data-theme attribute).
+ */
+export declare const useChartColors: (containerRef: RefObject<HTMLElement | null>, paletteName?: ColorPalette) => string[];

package/dist/components/charts/shared/chart-styles.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Shared Recharts style configuration using PDS design tokens.
+ * Keeps all chart styling in one place rather than split between CSS and JS.
+ */
+export declare const axisTickStyle: {
+    fill: string;
+    fontFamily: string;
+    fontSize: string;
+};
+export declare const axisLabelStyle: {
+    fill: string;
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+};
+export declare const gridStroke = "var(--pds-color-border-default)";

package/dist/components/charts/shared/formatters.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Format a number with K/M/B suffixes for chart axis labels.
+ */
+export declare const formatCompactNumber: (value: number) => string;
+/**
+ * Format a number with locale-aware thousand separators.
+ */
+export declare const formatLocaleNumber: (value: number) => string;
+/**
+ * Format a number as a percentage.
+ */
+export declare const formatPercent: (value: number) => string;

package/dist/components/charts/shared/types.d.ts

@@ -0,0 +1,97 @@
+export interface ChartDataPoint {
+    /** One or more numeric series values, keyed by series name */
+    [key: string]: number | string;
+    /** X-axis label */
+    label: string;
+}
+export type StrokeStyle = 'dashed' | 'solid';
+export interface SeriesConfig {
+    /** Override default token color (CSS custom property or hex). Not theme-aware — use paletteIndex for theme-aware overrides. */
+    color?: string;
+    /** Key matching a property in ChartDataPoint */
+    dataKey: string;
+    /** Display label for legend/tooltip */
+    label: string;
+    /** Pick a specific color from the selected palette by position (1-based). Theme-aware — automatically adjusts for light/dark mode. */
+    paletteIndex?: number;
+    /** Line style (LineChart only) */
+    strokeStyle?: StrokeStyle;
+}
+export interface ReferenceLineConfig {
+    /** Color override */
+    color?: string;
+    /** Display label */
+    label: string;
+    /** Line style */
+    strokeStyle?: StrokeStyle;
+    /** Y-axis value where line appears */
+    value: number;
+}
+export interface AnnotationConfig {
+    /** X-axis label value to annotate */
+    atLabel: string;
+    /** Color override */
+    color?: string;
+    /** Line style */
+    strokeStyle?: StrokeStyle;
+    /** Display text */
+    text: string;
+}
+export interface TimePeriodOption {
+    /** Display label ("Last 30 Days") */
+    label: string;
+    /** Value identifier */
+    value: string;
+}
+export type ColorPalette = 'alert' | 'brand' | 'categorical' | 'diverging' | 'sequential';
+export type LegendVariant = 'inline' | 'table';
+export interface BaseChartProps {
+    /** Accessible description for screen readers */
+    accessibleDescription?: string;
+    /** Height of the chart area in pixels. Does not include the legend, header, or accessible table. */
+    chartHeight?: number;
+    /** Maximum width of the chart component in pixels. The chart is responsive and will shrink within this constraint. */
+    chartWidth?: number;
+    /** Color palette to use for series colors (default: 'categorical') */
+    colorPalette?: ColorPalette;
+    /** Chart data points */
+    data: ChartDataPoint[];
+    /** Show empty state when data is empty */
+    emptyStateHeading?: string;
+    /** Empty state message */
+    emptyStateMessage?: string;
+    /** Show loading state */
+    isLoading?: boolean;
+    /** Thumbnail mode — hides grid, axes, legend, tooltips, and reduces chart height. Individual show* props can override. */
+    isThumbnail?: boolean;
+    /** Table header for the totals column when legendVariant is 'table' */
+    legendTableHeader?: string;
+    /** Legend display style (default: 'inline') */
+    legendVariant?: LegendVariant;
+    /** Loading label for screen readers */
+    loadingLabel?: string;
+    /** Callback when time period changes */
+    onTimePeriodChange?: (value: string) => void;
+    /** Currently selected time period */
+    selectedTimePeriod?: string;
+    /** Series definitions */
+    series: SeriesConfig[];
+    /** Show accessible data table (visually hidden, default: true) */
+    showAccessibleTable?: boolean;
+    /** Show axis baseline lines (default: true) */
+    showAxisLines?: boolean;
+    /** Show grid lines (default: true) */
+    showGrid?: boolean;
+    /** Show legend (default: true) */
+    showLegend?: boolean;
+    /** Show tooltip on hover (default: true) */
+    showTooltip?: boolean;
+    /** Time period options for built-in selector */
+    timePeriodOptions?: TimePeriodOption[];
+    /** X-axis label */
+    xAxisLabel?: string;
+    /** Custom Y-axis tick formatter */
+    yAxisFormatter?: (value: number) => string;
+    /** Y-axis label */
+    yAxisLabel?: string;
+}

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-03-31T01:56:17.582Z
+ * Generated: 2026-04-23T17:57:23.894Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };
@@ -953,6 +953,13 @@ export declare const iconData: {
         readonly svgPathData: "M290.5 287.7L491.4 86.9 359 456.3 290.5 287.7zM457.4 53L256.6 253.8 88 185.3 457.4 53zM38.1 216.8l205.8 83.6 83.6 205.8c5.3 13.1 18.1 21.7 32.3 21.7 14.7 0 27.8-9.2 32.8-23.1L570.6 8c3.5-9.8 1-20.6-6.3-28s-18.2-9.8-28-6.3L39.4 151.7c-13.9 5-23.1 18.1-23.1 32.8 0 14.2 8.6 27 21.7 32.3z";
         readonly width: 576;
     };
+    readonly pause: {
+        readonly aliases: readonly ["stop", "hold"];
+        readonly categories: readonly ["actions", "media"];
+        readonly height: 512;
+        readonly svgPathData: "M48 80l0 352 64 0 0-352-64 0zM0 80C0 53.5 21.5 32 48 32l64 0c26.5 0 48 21.5 48 48l0 352c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48L0 80zm272 0l0 352 64 0 0-352-64 0zm-48 0c0-26.5 21.5-48 48-48l64 0c26.5 0 48 21.5 48 48l0 352c0 26.5-21.5 48-48 48l-64 0c-26.5 0-48-21.5-48-48l0-352z";
+        readonly width: 384;
+    };
     readonly pen: {
         readonly aliases: readonly ["edit", "write", "modify"];
         readonly categories: readonly ["actions"];
@@ -1423,7 +1430,7 @@ export declare const iconData: {
         readonly width: 576;
     };
 };
-export declare const iconList: readonly ["angleDown", "angleLeft", "angleRight", "anglesLeft", "anglesRight", "angleUp", "arrowDownToLine", "arrowLeft", "arrowRight", "arrowsRetweet", "asterisk", "banBug", "bars", "barsFilter", "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", "circleInfo", "circleMinus", "circleNotch", "circlePlus", "circleQuestion", "circleUser", "circleXmark", "cloud", "cloudArrowDown", "cloudArrowUp", "cloudPlus", "code", "codeBranch", "codeMerge", "command", "comment", "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", "laptop", "laptopCode", "leaf", "lifeRing", "linkedin", "linkSimple", "linkSimpleSlash", "listCheck", "locationCrosshairs", "lock", "lockOpen", "magnifyingGlass", "medal", "memo", "messages", "minus", "moon", "nextJs", "paperclip", "paperPlane", "pen", "penField", "phone", "play", "plus", "question", "quotesLeft", "quotesRight", "rectangleList", "reply", "robot", "rocketLaunch", "rotate", "rotateClock", "rotateLeft", "rotateRight", "rss", "save", "server", "shareNodes", "shield", "shieldQuartered", "shovel", "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", "anglesLeft", "anglesRight", "angleUp", "arrowDownToLine", "arrowLeft", "arrowRight", "arrowsRetweet", "asterisk", "banBug", "bars", "barsFilter", "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", "circleInfo", "circleMinus", "circleNotch", "circlePlus", "circleQuestion", "circleUser", "circleXmark", "cloud", "cloudArrowDown", "cloudArrowUp", "cloudPlus", "code", "codeBranch", "codeMerge", "command", "comment", "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", "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", "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/Combobox/Combobox.d.ts

@@ -1,6 +1,7 @@
-import React, { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
+import React, { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ValidationStatus } from '../../../libs/types/input-types';
 import './combobox.css';
+export type ComboboxSize = 's' | 'm' | 'l';
 type LabelStrings = {
     clearButton?: string;
     inputInstructions?: string;
@@ -14,10 +15,15 @@ export type ComboboxOption = {
     searchIndex?: string[];
     value: string;
 };
+export type ComboboxOptionGroup = {
+    groupLabel: string;
+    options: ComboboxOption[];
+};
+export type ComboboxOptionsType = (ComboboxOption | ComboboxOptionGroup)[];
 /**
  * Prop types for Combobox
  */
-export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
+export interface ComboboxProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onFocus' | 'onBlur'> {
     /**
      * Additional class names
      */
@@ -79,9 +85,9 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
      */
     noResultsText?: string;
     /**
-     * onBlur event handler.
+     * onBlur event handler to provide the current value of the input.
      */
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (currentValue: string) => void;
     /**
      * onChange event handler.
      */
@@ -91,9 +97,9 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
      */
     onClear?: () => void;
     /**
-     * onFocus event handler.
+     * onFocus event handler to provide the current value of the input.
      */
-    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (currentValue: string) => void;
     /**
      * Callback when an option is selected. Returns the selected option object.
      */
@@ -119,6 +125,10 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
      * When true, clicking or focusing the input will show all available options before typing.
      */
     showUnfilteredOptions?: boolean;
+    /**
+     * Size of the combobox field.
+     */
+    size?: ComboboxSize;
     /**
      * Optional tooltip text to display additional information.
      */

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

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './combobox-multiselect.css';
+export type ComboboxMultiselectSize = 's' | 'm' | 'l';
 type LabelStrings = {
     aiBadgeLabel?: string;
     aiPanelButton?: string;
@@ -16,7 +17,7 @@ export interface OptionProps {
     id: string;
     label: string;
 }
-interface AuxiliaryPanel {
+interface AiSuggestionsPanel {
     content?: ReactNode;
     disableRefresh?: boolean;
     isFetching?: boolean;
@@ -30,9 +31,9 @@ type DivProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;
  */
 export interface ComboboxMultiselectProps extends DivProps {
     /**
-     * Optional auxiliary panel configuration (e.g., for AI suggestions)
+     * AI suggestions panel configuration. When provided, shows a sparkle button that opens a floating suggestions panel.
      */
-    auxiliaryPanel?: AuxiliaryPanel;
+    aiSuggestions?: AiSuggestionsPanel;
     /**
      * Additional class names
      */
@@ -97,9 +98,13 @@ export interface ComboboxMultiselectProps extends DivProps {
      * Should the label be visible? If false, it will render for screen readers only.
      */
     showLabel?: boolean;
+    /**
+     * Size of the combobox multiselect field.
+     */
+    size?: ComboboxMultiselectSize;
 }
 /**
  * ComboboxMultiselect UI component
  */
-export declare const ComboboxMultiselect: ({ auxiliaryPanel, className, disabled, id, initialSelectedItems, inputWidth, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showAllTags, showLabel, ...props }: ComboboxMultiselectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxMultiselect: ({ aiSuggestions, className, disabled, id, initialSelectedItems, inputWidth, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showAllTags, showLabel, size, ...props }: ComboboxMultiselectProps) => import("react/jsx-runtime").JSX.Element;
 export {};