@pantheon-systems/pds-toolkit-react 1.0.0-dev.98 → 1.0.0-dev.9998

package/_dist/components/Picture/Picture.d.ts

@@ -0,0 +1,37 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './picture.css';
+/**
+ * Prop types for Picture
+ */
+export interface PictureProps extends ComponentPropsWithoutRef<'img'> {
+    /**
+     * The WebP image source (preferred for modern browsers)
+     */
+    srcWebp: string;
+    /**
+     * The fallback image source (e.g., PNG or JPG)
+     */
+    srcFallback: string;
+    /**
+     * Alt text for the image. Defaults to empty string for decorative images.
+     */
+    alt?: string;
+    /**
+     * Optional width for the image (CSS value, e.g., '100px', '50%', 'auto').
+     * If not provided, the image will be sized responsively by its container.
+     */
+    width?: string | number;
+    /**
+     * Optional height for the image (CSS value, e.g., '100px', '50%', 'auto').
+     * If not provided, the image will be sized responsively by its container.
+     */
+    height?: string | number;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Picture UI component
+ */
+export declare const Picture: ({ srcWebp, srcFallback, alt, width, height, className, ...props }: PictureProps) => React.JSX.Element;

package/_dist/components/Popover/Popover.d.ts

@@ -0,0 +1,66 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { FuiPlacement } from '@libs/types/custom-types';
+import './popover.css';
+interface PopoverProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'> {
+    /**
+     * Content to display in the popover.
+     */
+    content?: ReactNode;
+    /**
+     * Text for close button aria-label attribute. Only used if hasCloseButton is true.
+     */
+    closeButtonLabel?: string;
+    /**
+     * Text or HTML content to use as the trigger instead of an icon. Leave null to use the icon. This allows passing HTML content to customize the trigger appearance or functionality.
+     */
+    customTrigger?: ReactNode;
+    /**
+     * Indicates if close button will be shown.
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Additional spacing between the trigger and the popover. Only applies to popovers with a custom trigger. Icon triggers have a fixed spacing.
+     */
+    offsetValue?: number;
+    /**
+     * Callback function that triggers when closing Popover.
+     */
+    onClose?: () => void;
+    /**
+     * Preferred placement of the popover in relation to the trigger. Will be modified if there is not enough space.
+     */
+    placement?: FuiPlacement;
+    /**
+     * Text for popover title.
+     */
+    title?: string;
+    /**
+     * The accessible text for the trigger. Only necessary when the trigger is an icon.
+     */
+    triggerAccessibleText?: string;
+    /**
+     * The icon to use as the trigger.
+     */
+    triggerIcon?: 'circleInfo' | 'circleQuestion';
+    /**
+     * Boolean to determine if the Popover is open by default.
+     */
+    popoverIsOpen?: boolean;
+    /**
+     * Function to set Popover open state.
+     */
+    setPopoverIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Additional class names for the Popover Container.
+     */
+    classNameContainer?: string;
+}
+/**
+ * Popover UI component
+ */
+export declare const Popover: ({ content, closeButtonLabel, customTrigger, hasCloseButton, offsetValue, onClose, placement, title, triggerIcon, triggerAccessibleText, popoverIsOpen, setPopoverIsOpen, className, classNameContainer, ...props }: PopoverProps) => React.JSX.Element;
+export {};

package/_dist/components/PullQuote/PullQuote.d.ts

@@ -0,0 +1,34 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './pull-quote.css';
+interface Attribution {
+    name: string;
+    title: string;
+    org: string;
+}
+interface PullQuoteProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Attribution for the quote
+     */
+    attribution?: Attribution;
+    /**
+     * Image src. For stand-alone layout only, will not render for inline layout.
+     */
+    image?: string;
+    /**
+     * The layout type for the pull quote
+     */
+    layoutType?: 'stand-alone' | 'inline';
+    /**
+     * The quote text
+     */
+    quote: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * PullQuote UI component
+ */
+export declare const PullQuote: ({ attribution, image, layoutType, quote, className, ...props }: PullQuoteProps) => React.JSX.Element;
+export {};

package/_dist/components/RefreshChecker/RefreshChecker.d.ts

@@ -0,0 +1,54 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './refresh-checker.css';
+/**
+ * Enum for RefreshChecker states
+ */
+export declare enum RefreshCheckerState {
+    DEFAULT = "default",
+    WORKING = "working",
+    CHECKED = "checked"
+}
+/**
+ * Prop types for RefreshChecker
+ */
+interface RefreshCheckerProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Alignment of the component. Default is left.
+     */
+    alignment?: 'left' | 'right';
+    /**
+     * Custom width in rems for the component. This will override the default.
+     */
+    componentWidth?: number;
+    /**
+     * Internationalization props for labels.
+     */
+    labelStrings?: {
+        checkForUpdates?: string;
+        checking?: string;
+        checked?: string;
+        tooltipContent?: string;
+        ariaLabel?: string;
+    };
+    /**
+     * Last checked timestamp
+     */
+    lastChecked?: null | Date;
+    /**
+     * Callback function when check is triggered
+     */
+    onCheck?: () => void;
+    /**
+     * State of the component
+     */
+    state?: `${RefreshCheckerState}`;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * RefreshChecker UI component
+ */
+export declare const RefreshChecker: ({ alignment, componentWidth, labelStrings, lastChecked, onCheck, state, className, ...props }: RefreshCheckerProps) => React.JSX.Element;
+export {};

package/_dist/components/SiteDashboardHeading/SiteDashboardHeading.d.ts

@@ -0,0 +1,57 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Popover } from '@components/Popover/Popover';
+import { SitePlanLevel, SiteType } from '@libs/types/custom-types';
+import './site-dashboard-heading.css';
+/**
+ * Prop types for SiteDashboardHeading
+ */
+export interface SiteDashboardHeadingProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Function to handle upgrade click.
+     */
+    handleUpgradeClick?: () => void;
+    /**
+     * Function to handle popover content.
+     */
+    popoverContent?: ReactNode;
+    /**
+     * Title for the popover.
+     */
+    popoverTitle?: string;
+    /**
+     * Function to handle popover open state.
+     */
+    popoverIsOpen?: boolean;
+    /**
+     * Function to set popover open state.
+     */
+    setPopoverIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Name of the site.
+     */
+    siteName: string;
+    /**
+     * Site plan level.
+     */
+    sitePlanLevel?: SitePlanLevel;
+    /**
+     * Site type.
+     */
+    siteType?: SiteType;
+    /**
+     * Additional props to pass to the trigger component.
+     */
+    triggerProps?: Omit<ComponentPropsWithoutRef<typeof Popover>, 'content' | 'title' | 'placement' | 'triggerIcon'>;
+    /**
+     * Label for the upgrade button.
+     */
+    upgradeLabel: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SiteDashboardHeading UI component
+ */
+export declare const SiteDashboardHeading: ({ popoverContent, popoverIsOpen, popoverTitle, handleUpgradeClick, setPopoverIsOpen, siteName, sitePlanLevel, siteType, triggerProps, upgradeLabel, className, ...props }: SiteDashboardHeadingProps) => React.JSX.Element;

package/_dist/components/Skiplink/Skiplink.d.ts

@@ -0,0 +1,21 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './skiplink.css';
+interface SkiplinkProps extends ComponentPropsWithoutRef<'a'> {
+    /**
+     * The ID of the element to skip to.
+     */
+    destination: string;
+    /**
+     * The text of the skip link.
+     */
+    text: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Skiplink UI component
+ */
+export declare const Skiplink: ({ destination, text, className, ...props }: SkiplinkProps) => React.JSX.Element;
+export {};

package/_dist/components/SocialLinks/SocialLinks.d.ts

@@ -0,0 +1,23 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import './social-links.css';
+interface SocialLinksProps extends ComponentPropsWithoutRef<'ul'> {
+    /**
+     * Array of social media links
+     */
+    linkItems?: (keyof typeof socialData)[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+declare const socialData: Record<string, {
+    icon: PDSIcon;
+    url: string;
+    label: string;
+}>;
+/**
+ * SocialLinks UI component
+ */
+export declare const SocialLinks: ({ linkItems, className, ...props }: SocialLinksProps) => React.JSX.Element;
+export {};

package/_dist/components/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,24 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './status-indicator.css';
+export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     *  Status label text
+     */
+    label: string;
+    /**
+     * Sets the size
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Sets status type
+     */
+    type: 'critical' | 'info' | 'neutral' | 'new' | 'success' | 'warning' | 'working';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * StatusIndicator UI component
+ */
+export declare const StatusIndicator: ({ label, size, type, className, ...props }: StatusIndicatorProps) => React.JSX.Element;

package/_dist/components/Table/Table.d.ts

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './table.css';
+/**
+ * Prop types for Table
+ */
+interface TableProps extends ComponentPropsWithoutRef<'table'> {
+    /**
+     * Table headers
+     */
+    headers?: Array<{
+        title: string;
+        sortable?: boolean;
+    }>;
+    /**
+     * Table row data
+     */
+    rowData?: ReactNode[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Table UI component
+ */
+export declare const Table: ({ headers, rowData, className, ...props }: TableProps) => React.JSX.Element;
+export {};

package/_dist/components/TableOfContents/TableOfContents.d.ts

@@ -0,0 +1,45 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { HeadingLevelCommon } from '@libs/types/custom-types';
+import './table-of-contents.css';
+/**
+ * Prop types for TableOfContents
+ */
+interface TableOfContentsProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Whether to append the id to the URL when a link is clicked.
+     */
+    appendIds?: boolean;
+    /**
+     * aria-label for the TOC.
+     */
+    ariaLabel?: string;
+    /**
+     * Whether the heading should be visible or not. If not visible it will still be presented to screen readers.
+     */
+    showHeading?: boolean;
+    /**
+     * Heading level for TOC heading.
+     */
+    headingLevel?: HeadingLevelCommon;
+    /**
+     * Text for the TOC heading.
+     */
+    headingText?: string;
+    /**
+     * Class name for designating headers to ignore.
+     */
+    ignoreClass?: string;
+    /**
+     * ID name of content region to be indexed.
+     */
+    sourceID?: string;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * TableOfContents UI component
+ */
+export declare const TableOfContents: ({ appendIds, ariaLabel, headingLevel, headingText, ignoreClass, showHeading, sourceID, className, ...props }: TableOfContentsProps) => React.JSX.Element;
+export {};

package/_dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,63 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import './tabs.css';
+interface Tabs {
+    /**
+     * Is the tab disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Sets optional tab icon.
+     */
+    icon?: PDSIcon;
+    /**
+     * Sets content inside tab
+     */
+    panelContent: ReactNode;
+    /**
+     * Sets tab label
+     */
+    tabLabel: string | ReactNode;
+    /**
+     * Sets id for tab.
+     */
+    tabId?: string;
+    /**
+     * Sets optional tab tally.
+     */
+    tally?: {
+        label: string | number;
+        type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
+    };
+}
+interface TabsProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Function to call when the active tab changes
+     */
+    onActiveTabChange?: (activeTabIndex: number) => void;
+    /**
+     * Sets tabset aria label
+     */
+    ariaLabel: string;
+    /**
+     * Sets default selected tab using a zero-based index, defaults to 0
+     */
+    defaultSelected?: number;
+    /**
+     * Sets currently selected tab using a zero-based index
+     */
+    selectedTab?: number;
+    /**
+     * Array of objects for tab data
+     */
+    tabs: Tabs[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Tabs UI component
+ */
+export declare const Tabs: ({ ariaLabel, defaultSelected, onActiveTabChange, selectedTab, tabs, className, ...props }: TabsProps) => React.JSX.Element;
+export {};

package/_dist/components/Tag/Tag.d.ts

@@ -0,0 +1,39 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './tag.css';
+export declare const tagColors: string[];
+type TagColor = (typeof tagColors)[number];
+interface TagProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Should the tag be a link? If yes, provide a link element.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Should the tag be removable?
+     */
+    isRemovable?: boolean;
+    /**
+     * Function to execute when the tag is removed.
+     */
+    onRemove?: () => void;
+    /**
+     * Label for the remove button. Tag text will be appended to this label.
+     */
+    removeLabel?: string;
+    /**
+     * Tag color. Will use random color if not selected.
+     */
+    tagColor?: TagColor;
+    /**
+     * Tag text
+     */
+    tagLabel: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Tag UI component
+ */
+export declare const Tag: ({ linkContent, isRemovable, onRemove, removeLabel, tagColor, tagLabel, className, ...props }: TagProps) => React.JSX.Element;
+export {};

package/_dist/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -0,0 +1,32 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './theme-switcher.css';
+/**
+ * Prop types for ThemeSwitcher
+ */
+export interface ThemeSwitcherProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    /**
+     * The current theme
+     */
+    theme?: 'light' | 'dark' | 'system';
+    /**
+     * Callback triggered when the theme changes
+     */
+    onChange?: (theme: 'light' | 'dark' | 'system') => void;
+    /**
+     * Translation strings for theme options
+     */
+    translations?: {
+        light: string;
+        dark: string;
+        system: string;
+        tooltip?: string;
+    };
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ThemeSwitcher UI component
+ */
+export declare const ThemeSwitcher: ({ theme, onChange, translations, className, ...props }: ThemeSwitcherProps) => React.JSX.Element;

package/_dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,51 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Placement } from '@floating-ui/react';
+import { FuiOffset } from '@libs/types/custom-types';
+import './tooltip.css';
+interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Text to display in tooltip container.
+     */
+    content: string;
+    /**
+     * String or HTML content to use as the trigger instead of an icon. Leave null to use the icon.
+     */
+    customTrigger?: ReactNode;
+    /**
+     * The spacing between the trigger and the tooltip in pixels. Use the default value (in most cases) when using an icon trigger.
+     */
+    offsetValue?: FuiOffset;
+    /**
+     * The preferred placement of the tooltip relative to the trigger.
+     */
+    preferredPlacement?: Placement;
+    /**
+     * The accessible text for the trigger. Only necessary when the trigger is an icon.
+     */
+    triggerAccessibleText?: string;
+    /**
+     * Icon to trigger tooltip
+     */
+    triggerIcon?: 'circleInfo' | 'circleQuestion' | 'circleExclamation';
+    /**
+     * Color of the trigger icon. Uses PDS default text color options.
+     */
+    triggerIconColor?: 'default' | 'default-secondary' | 'critical';
+    /**
+     * Size of the trigger icon. Uses PDS Icon sizing.
+     */
+    triggerIconSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Z-index value for the tooltip container. In most cases, the default value should be retained.
+     */
+    zIndex?: number;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Tooltip UI component
+ */
+export declare const Tooltip: ({ content, customTrigger, offsetValue, preferredPlacement, triggerAccessibleText, triggerIcon, triggerIconColor, triggerIconSize, zIndex, className, ...props }: TooltipProps) => React.JSX.Element;
+export {};

package/_dist/components/VideoEmbed/VideoEmbed.d.ts

@@ -0,0 +1,28 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './video-embed.css';
+/**
+ * Prop types for VideoEmbed
+ */
+export interface VideoEmbedProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Video hosting platform.
+     */
+    platform: 'vimeo' | 'wistia' | 'youtube';
+    /**
+     * Video ID to embed.
+     */
+    videoId: string;
+    /**
+     * Video title to display. This is for the title prop on the video iframe.
+     * If none is provided it will default to `"[platform] video player"`
+     */
+    videoTitle?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * VideoEmbed UI component
+ */
+export declare const VideoEmbed: ({ platform, videoId, videoTitle, className, ...props }: VideoEmbedProps) => React.JSX.Element;

package/_dist/components/badges/IndicatorBadge/IndicatorBadge.d.ts

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './indicator-badge.css';
+/**
+ * IndicatorBadge component props
+ */
+export interface IndicatorBadgeProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Badge color
+     */
+    color: 'critical' | 'info' | 'success' | 'warning' | 'neutral' | 'brand' | 'silver' | 'gold' | 'platinum' | 'diamond';
+    /**
+     * Badge text.
+     */
+    label: string;
+    /**
+     * Badge size
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * IndicatorBadge UI component
+ */
+export declare const IndicatorBadge: ({ label, size, color, className, ...props }: IndicatorBadgeProps) => React.JSX.Element;

package/_dist/components/badges/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,35 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './status-badge.css';
+/**
+ * StatusBadge component props
+ */
+export interface StatusBadgeProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Background color for badge
+     */
+    color?: 'transparent' | 'neutral' | 'reverse';
+    /**
+     * Should the badge show a status indicator.
+     */
+    hasStatusIndicator?: boolean;
+    /**
+     * Text for badge.
+     */
+    label: string;
+    /**
+     * Translatable text for status indicator — for screen readers.
+     */
+    statusIndicatorText?: string;
+    /**
+     * Status type for badge. Only renders if `hasStatusIndicator` is true.
+     */
+    statusType?: 'success' | 'info' | 'frozen' | 'critical' | 'warning' | 'discovery' | 'disabled';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * StatusBadge UI component
+ */
+export declare const StatusBadge: ({ color, hasStatusIndicator, label, statusIndicatorText, statusType, className, ...props }: StatusBadgeProps) => React.JSX.Element;