@pantheon-systems/pds-toolkit-react 1.0.0-alpha.9 → 1.0.0-beta.1

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

@@ -4,20 +4,28 @@ import './segmented-button.css';
  * Structure for each option in the SegmentedButton component.
  */
 interface OptionType {
-    id?: string;
-    value: string;
-    label: string;
     disabled?: boolean;
     iconName?: PDSIcon;
+    id?: string;
+    label: string;
     tally?: {
         label: string | number;
         type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
     };
+    value: string;
 }
 /**
  * Prop types for SegmentedButton
  */
 export interface SegmentedButtonProps {
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Optional initial selected option value.
+     */
+    defaultValue?: string;
     /**
      * Is the SegmentedButton disabled?
      */
@@ -26,10 +34,6 @@ export interface SegmentedButtonProps {
      * Unique ID for the SegmentedButton.
      */
     id: string;
-    /**
-     * Optional initial selected option value.
-     */
-    defaultValue?: string;
     /**
      * Label for the SegmentedButton — visually hidden, used for screen readers only.
      */
@@ -50,13 +54,9 @@ export interface SegmentedButtonProps {
      * Value of the Segmented Button. Used to set the value of the field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
      */
     value?: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * SegmentedButton UI component
  */
-export declare const SegmentedButton: ({ disabled, id, defaultValue, label, onChange, options, size, value, className, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedButton: ({ className, defaultValue, disabled, id, label, onChange, options, size, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,6 +9,10 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
      * Array of menu items
      */
     actionItems: Array<LinkItemType | MenuItemType>;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Is the button disabled?
      */
@@ -29,13 +33,9 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
      * Which variant of button to render
      */
     variant?: 'primary' | 'secondary';
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * A component used to render a button with a primary action and a menu of additional options
  */
-export declare const SplitButton: ({ actionItems, disabled, id, moreActionsLabel, size, variant, className, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SplitButton: ({ actionItems, className, disabled, id, moreActionsLabel, size, variant, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/components/buttons/UtilityButton/UtilityButton.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { PDSIcon } from '@components/icons/Icon/Icon';
 import './utility-button.css';
 /**
@@ -9,6 +9,10 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
      * Additional props for the button element.
      */
     buttonProps?: ComponentPropsWithoutRef<'button'>;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Is the button disabled?
      */
@@ -33,18 +37,24 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
      * Is the button in the process of an initial load?
      */
     isLoading?: boolean;
+    /**
+     * Should the button label use the monospace font?
+     */
+    isMonospace?: boolean;
     /**
      * Is the button in the process of performing a task and should be disabled?
      */
     isWorking?: boolean;
     /**
-     * Should the button label use the monospace font?
+     * The text of the button.
      */
-    isMonospace?: boolean;
+    label?: string;
     /**
-     * The text of the button.
+     * A link element using the router of your choice.
+     * Use `linkContent` to render a link instead of text.
+     * In this case, the `buttonProps`, `label`, and `onClick` props will be ignored.
      */
-    label: string;
+    linkContent?: ReactNode;
     /**
      * Click event handler callback.
      */
@@ -53,12 +63,8 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
      * Tooltip text.
      */
     tooltipText?: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * UtilityButton UI component
  */
-export declare const UtilityButton: ({ buttonProps, disabled, hasBorder, iconName, iconPosition, isCritical, isLoading, isWorking, isMonospace, label, onClick, tooltipText, className, ...props }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UtilityButton: ({ buttonProps, className, disabled, hasBorder, iconName, iconPosition, isCritical, isLoading, isMonospace, isWorking, label, linkContent, onClick, tooltipText, ...props }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/cards/Card/Card.d.ts

@@ -14,16 +14,16 @@ export interface CardProps extends ComponentPropsWithoutRef<'div'> {
      * Child elements to be assigned to named slots.
      */
     children: ReactNode;
-    /**
-     * Relative padding for the `main` slot.
-     */
-    padding?: GridGapOptions;
     /**
      * Additional class names
      */
     className?: string;
+    /**
+     * Relative padding for the `main` slot.
+     */
+    padding?: GridGapOptions;
 }
 /**
  * Card UI component
  */
-export declare const Card: ({ background, children, padding, className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ background, children, className, padding, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/cards/CardHeading/CardHeading.d.ts

@@ -4,6 +4,10 @@ import './card-heading.css';
  * Prop types for CardHeading
  */
 export interface CardHeadingProps {
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Font size of the heading. Default is `XL`.
      */
@@ -20,12 +24,8 @@ export interface CardHeadingProps {
      * Heading text.
      */
     text?: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * CardHeading UI component
  */
-export declare const CardHeading: ({ fontSize, fontWeight, level, text, className, ...props }: CardHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardHeading: ({ className, fontSize, fontWeight, level, text, ...props }: CardHeadingProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/cards/CardSelectGroup/CardSelectGroup.d.ts

@@ -1,6 +1,10 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './card-select-group.css';
 export interface CardOption {
+    /**
+     * Option description
+     */
+    description?: string | ReactNode;
     /**
      * Unique ID for the option
      * @default ''
@@ -10,16 +14,16 @@ export interface CardOption {
      * Option label
      */
     label: string | ReactNode;
-    /**
-     * Option description
-     */
-    description?: string | ReactNode;
     /**
      * Option value
      */
     value: string;
 }
 export interface CardSelectGroupProps extends Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Optional initial selected option value
      */
@@ -49,12 +53,8 @@ export interface CardSelectGroupProps extends Omit<ComponentPropsWithoutRef<'fie
      * Array of card options
      */
     options?: CardOption[];
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * CardSelectGroup UI component
  */
-export declare const CardSelectGroup: ({ id, defaultValue, label, labelDisplay, layout, onChange, options, className, ...props }: CardSelectGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardSelectGroup: ({ className, defaultValue, id, label, labelDisplay, layout, onChange, options, ...props }: CardSelectGroupProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/cards/EmptyStateCard/EmptyStateCard.d.ts

@@ -5,6 +5,10 @@ import './empty-state-card.css';
  * Prop types for EmptyStateCard
  */
 export interface EmptyStateCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      *  Heading level or `span`.
      */
@@ -25,12 +29,8 @@ export interface EmptyStateCardProps extends ComponentPropsWithoutRef<'div'> {
      * Summary paragraph.
      */
     summary: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * EmptyStateCard UI component
  */
-export declare const EmptyStateCard: ({ headingLevel, headingText, isLinkExternal, linkContent, summary, className, ...props }: EmptyStateCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyStateCard: ({ className, headingLevel, headingText, isLinkExternal, linkContent, summary, ...props }: EmptyStateCardProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/cards/LinksCard/LinksCard.d.ts

@@ -5,6 +5,10 @@ import './links-card.css';
  * Prop types for LinksCard
  */
 interface LinksCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Heading level
      */
@@ -17,13 +21,9 @@ interface LinksCardProps extends ComponentPropsWithoutRef<'div'> {
      * Array of links
      */
     linkItems?: ReactNode[];
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * Links Card UI component
  */
-export declare const LinksCard: ({ linkItems, headingLevel, headingText, className, ...props }: LinksCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LinksCard: ({ className, headingLevel, headingText, linkItems, ...props }: LinksCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/components/cards/NewSiteCard/NewSiteCard.d.ts

@@ -2,8 +2,8 @@ import { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { BadgeColor } from '@libs/types/custom-types';
 import './new-site-card.css';
 interface BadgeValueType {
-    label: string;
     color: BadgeColor;
+    label: string;
 }
 export declare const badgeTypes: {
     [key: string]: BadgeValueType;
@@ -17,6 +17,10 @@ interface NewSiteCardProps extends ComponentPropsWithoutRef<'div'> {
      * Optional indicator badge type. Choose from only early-access at this time.
      */
     badge?: 'early-access';
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Icon. Choose from only Platform Icons at this time.
      */
@@ -26,9 +30,9 @@ interface NewSiteCardProps extends ComponentPropsWithoutRef<'div'> {
      */
     newWindowString?: string;
     /**
-     * Card title
+     * The primary link for the selection card.
      */
-    title: string;
+    selectionLink: ReactElement;
     /**
      * Card subtitle
      */
@@ -37,21 +41,17 @@ interface NewSiteCardProps extends ComponentPropsWithoutRef<'div'> {
      * Card summary
      */
     summary?: string;
-    /**
-     * The primary link for the selection card.
-     */
-    selectionLink: ReactElement;
     /**
      * Array of supplemental links. Maximum of 2.
      */
     supplementalLinks?: ReactElement[];
     /**
-     * Additional class names
+     * Card title
      */
-    className?: string;
+    title: string;
 }
 /**
  * NewSiteCard UI component
  */
-export declare const NewSiteCard: ({ badge, icon, newWindowString, title, subtitle, summary, selectionLink, supplementalLinks, className, ...props }: NewSiteCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NewSiteCard: ({ badge, className, icon, newWindowString, selectionLink, subtitle, summary, supplementalLinks, title, ...props }: NewSiteCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/components/cards/PaymentCard/PaymentCard.d.ts

@@ -5,43 +5,43 @@ import './payment-card.css';
  */
 export interface PaymentCardProps extends ComponentPropsWithoutRef<'div'> {
     /**
-     * The type of payment icon to display.
+     * The name of the cardholder.
      */
-    cardType?: 'visa' | 'mastercard' | 'amex' | 'discover';
+    cardholderName?: string;
     /**
      * The last four digits of the card number.
      */
     cardNumber?: number;
     /**
-     * The name of the cardholder.
-     */
-    cardholderName?: string;
-    /**
-     * Expiration date of the card in MM/YY format.
+     * The type of payment icon to display.
      */
-    expDate?: string;
+    cardType?: 'visa' | 'mastercard' | 'amex' | 'discover';
     /**
      * A string for the lower left corner.
      */
     cardUsage?: string;
     /**
-     * Translation string for “view details”
+     * Additional class names
      */
-    detailsLabel?: string;
+    className?: string;
     /**
      * Function for when “view details” is clicked
      */
     detailsCallback?: () => void;
     /**
-     * Function for when this card is selected
+     * Translation string for “view details”
      */
-    selectionCallback?: () => void;
+    detailsLabel?: string;
     /**
-     * Additional class names
+     * Expiration date of the card in MM/YY format.
      */
-    className?: string;
+    expDate?: string;
+    /**
+     * Function for when this card is selected
+     */
+    selectionCallback?: () => void;
 }
 /**
  * PaymentCard UI component
  */
-export declare const PaymentCard: ({ cardType, cardNumber, cardholderName, expDate, cardUsage, detailsLabel, detailsCallback, selectionCallback, className, ...props }: PaymentCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaymentCard: ({ cardholderName, cardNumber, cardType, cardUsage, className, detailsCallback, detailsLabel, expDate, selectionCallback, ...props }: PaymentCardProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/cards/PricingCard/PricingCard.d.ts

@@ -2,31 +2,31 @@ import { ComponentPropsWithoutRef } from 'react';
 import { ListItems } from '@components/ComparisonList/ComparisonList';
 import './pricing-card.css';
 interface PrimaryCallToAction {
-    type?: 'button' | 'link';
-    variant?: 'primary' | 'secondary';
-    label?: string;
     buttonAction?: () => void;
-    linkUrl?: string;
-    linkTarget?: string;
     disabled?: boolean;
+    label?: string;
+    linkTarget?: string;
+    linkUrl?: string;
+    type?: 'button' | 'link';
+    variant?: 'primary' | 'secondary';
 }
 interface SecondaryCallToAction {
-    type?: 'button' | 'link';
-    label?: string;
     buttonAction?: () => void;
-    linkUrl?: string;
+    label?: string;
     linkTarget?: string;
+    linkUrl?: string;
+    type?: 'button' | 'link';
 }
 interface PlanPricingData {
     customActionLabel?: string;
     label?: string;
-    pricePrefix?: string;
+    listItems?: ListItems[];
+    listLabel?: string;
     price?: string;
     priceDetails?: string;
+    pricePrefix?: string;
     savingsBadgeLabel?: string;
     savingsDetails?: string;
-    listLabel?: string;
-    listItems?: ListItems[];
 }
 interface StatusBadgeLabels {
     currentPlan?: string;
@@ -41,6 +41,14 @@ interface PricingCardProps extends ComponentPropsWithoutRef<'div'> {
      * An optional secondary call to action.
      */
     actionSecondary?: SecondaryCallToAction;
+    /**
+     * Additional class names for the card item.
+     */
+    className?: string;
+    /**
+     * Additional class names for the card container.
+     */
+    containerClassName?: string;
     /**
      * Has comparison list. Will be rendered below the card if true.
      * Add corresponding `comparisonListId` to each planPricingData object.
@@ -74,17 +82,9 @@ interface PricingCardProps extends ComponentPropsWithoutRef<'div'> {
      * Status badge type. Leave empty for no badge. Only one badge of each type should be used in a group of Pricing Cards.
      */
     statusBadgeType?: 'currentPlan' | 'mostPopular';
-    /**
-     * Additional class names for the card item.
-     */
-    className?: string;
-    /**
-     * Additional class names for the card container.
-     */
-    containerClassName?: string;
 }
 /**
  * PricingCard UI component
  */
-export declare const PricingCard: ({ actionPrimary, actionSecondary, hasComparisonList, onTierChange, planDescription, planName, planPricingData, statusBadgeLabels, selectLabel, statusBadgeType, className, ...props }: PricingCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PricingCard: ({ actionPrimary, actionSecondary, className, hasComparisonList, onTierChange, planDescription, planName, planPricingData, selectLabel, statusBadgeLabels, statusBadgeType, ...props }: PricingCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/components/cards/SiteCard/SiteCard.d.ts

@@ -1,11 +1,14 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { HeadingLevelCommon } from '@libs/types/custom-types';
-import { SiteStatus } from '@libs/types/custom-types';
+import { HeadingLevelCommon, SiteStatus } from '@libs/types/custom-types';
 import './site-card.css';
 /**
  * Prop types for SiteCard
  */
 export interface SiteCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Translatable text for the "Go to" link.
      */
@@ -34,12 +37,8 @@ export interface SiteCardProps extends ComponentPropsWithoutRef<'div'> {
      * Status of the site.
      */
     siteStatus?: SiteStatus;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * SiteCard UI component
  */
-export declare const SiteCard: ({ gotoText, headingLevel, siteImage, siteLink, siteName, sitePlan, siteStatus, className, ...props }: SiteCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SiteCard: ({ className, gotoText, headingLevel, siteImage, siteLink, siteName, sitePlan, siteStatus, ...props }: SiteCardProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/empty-states/CompactEmptyState/CompactEmptyState.d.ts

@@ -1,11 +1,15 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { PDSIcon } from '@components/icons/Icon/Icon';
 import { HeadingLevelCommon } from '@libs/types/custom-types';
+import { PDSIcon } from '@components/icons/Icon/Icon';
 import './compact-empty-state.css';
 /**
  * Prop types for CompactEmptyState
  */
 export interface CompactEmptyStateProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * heading to explain the empty state.
      */
@@ -26,12 +30,8 @@ export interface CompactEmptyStateProps extends ComponentPropsWithoutRef<'div'>
      * Message to display below the heading.
      */
     message?: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * CompactEmptyState UI component
  */
-export declare const CompactEmptyState: ({ iconName, linkContent, message, heading, headingLevel, className, ...props }: CompactEmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CompactEmptyState: ({ className, heading, headingLevel, iconName, linkContent, message, ...props }: CompactEmptyStateProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/empty-states/HorizontalEmptyState/HorizontalEmptyState.d.ts

@@ -1,6 +1,6 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { VideoEmbedProps } from '@components/VideoEmbed/VideoEmbed';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { HeadingLevel } from '@libs/types/custom-types';
+import { VideoEmbedProps } from '@components/VideoEmbed/VideoEmbed';
 import './horizontal-empty-state.css';
 /**
  * Prop types for HorizontalEmptyState
@@ -10,30 +10,44 @@ export interface HorizontalEmptyStateProps extends ComponentPropsWithoutRef<'div
      * Vertical alignment of the content.
      */
     alignment?: 'top' | 'center';
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * A call-to-action region.
      * This should be a Button, ButtonLink, or two items wrapped in a `pds-button-group` div.
      */
     ctaRegion?: ReactNode;
+    /**
+     * heading to explain the empty state.
+     */
+    heading: string;
+    /**
+     *  Heading level.
+     */
+    headingLevel?: HeadingLevel;
     /**
      * Pantheon collage image to display next to the main content.
-     * Can be a string (image path/URL) or a React node (e.g., <Picture />).
+     * Can be a string (image path/URL) or a React node (e.g., the Picture component).
      * If a video is provided, this will be ignored.
      */
-    image?: string | React.ReactNode;
+    image?: string | ReactNode;
     /**
-     * Will this be rendered within a panel?
-     * If true, the image and heading will be scaled down to fit within the panel.
+     * Margin left of the image container (CSS value, e.g., '0', '10px', '20%').
+     * Default is '0'.
      */
-    isWithinPanel?: boolean;
+    imageMarginLeft?: string;
     /**
-     * heading to explain the empty state.
+     * Width of the image container (CSS value, e.g., '40%', '30%', '300px').
+     * Default is '40%'.
      */
-    heading: string;
+    imageWidth?: string;
     /**
-     *  Heading level.
+     * Will this be rendered within a panel?
+     * If true, the image and heading will be scaled down to fit within the panel.
      */
-    headingLevel?: HeadingLevel;
+    isWithinPanel?: boolean;
     /**
      * Message to display below the heading.
      */
@@ -48,22 +62,8 @@ export interface HorizontalEmptyStateProps extends ComponentPropsWithoutRef<'div
      * If a video is provided, the image will be ignored.
      */
     video?: VideoEmbedProps;
-    /**
-     * Width of the image container (CSS value, e.g., '40%', '30%', '300px').
-     * Default is '40%'.
-     */
-    imageWidth?: string;
-    /**
-     * Margin left of the image container (CSS value, e.g., '0', '10px', '20%').
-     * Default is '0'.
-     */
-    imageMarginLeft?: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * HorizontalEmptyState UI component
  */
-export declare const HorizontalEmptyState: ({ alignment, ctaRegion, image, isWithinPanel, heading, headingLevel, message, video, imageWidth, imageMarginLeft, className, ...props }: HorizontalEmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HorizontalEmptyState: ({ alignment, className, ctaRegion, heading, headingLevel, image, imageMarginLeft, imageWidth, isWithinPanel, message, video, ...props }: HorizontalEmptyStateProps) => import("react/jsx-runtime").JSX.Element;