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

package/_dist/layouts/AppLayout/AppLayout.d.ts

@@ -0,0 +1,73 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ContainerWidth } from '@libs/types/custom-types';
+import './app-layout.css';
+/**
+ * Prop types for AppLayout
+ */
+interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Children to render in the layout.
+     */
+    children: ReactNode;
+    /**
+     * PDS container width.
+     */
+    containerWidth?: ContainerWidth;
+    /**
+     * Is the sidebar able to be collapsed and expanded by the user?
+     * If false or not provided, the sidebar will always be expanded.
+     */
+    hasSidebarToggle?: boolean;
+    /**
+     * Is the sidebar collapsed?
+     * This is only relevant if `hasSidebarToggle` is true.
+     */
+    isSidebarCollapsed?: boolean;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        collapseSidebar: string;
+        expandSidebar: string;
+    };
+    /**
+     * Element type for the main content area.
+     */
+    mainContentElement: 'div' | 'main';
+    /**
+     * Additional props for the main content element.
+     */
+    mainContentProps?: ComponentPropsWithoutRef<'div'> | ComponentPropsWithoutRef<'main'>;
+    /**
+     * Callback function to handle sidebar toggle.
+     * If not provided, the sidebar will use an internal function to manage collapsed state.
+     */
+    onSidebarToggle?: () => void;
+    /**
+     * Width of the sidebar when collapsed in rems. This should not need to be modified.
+     */
+    sidebarCollapsedWidth?: number;
+    /**
+     * Width of the sidebar when expanded as a percentage.
+     * This is also the width of the sidebar when it is not collapsable (hasSidebarToggle is false).
+     */
+    sidebarExpandedWidth?: string;
+    /**
+     * Minimum width of the sidebar when expanded in rems.
+     * This is also the min-width of the sidebar when it is not collapsable (hasSidebarToggle is false).
+     */
+    sidebarExpandedWidthMin?: number;
+    /**
+     * Additional props for the sidebar `<div>` element.
+     */
+    sidebarProps?: ComponentPropsWithoutRef<'div'>;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * AppLayout UI component
+ */
+export declare const AppLayout: ({ children, containerWidth, hasSidebarToggle, isSidebarCollapsed, labels, mainContentElement, mainContentProps, onSidebarToggle, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarExpandedWidthMin, sidebarProps, className, ...props }: AppLayoutProps) => React.JSX.Element;
+export {};

package/_dist/layouts/Container/Container.d.ts

@@ -0,0 +1,25 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ContainerWidth } from '@libs/types/custom-types';
+import '../../utilities/container.css';
+/**
+ * Prop types for Container
+ */
+interface ContainerProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Container content.
+     */
+    children?: ReactNode;
+    /**
+     * Width of the container.
+     */
+    width?: ContainerWidth;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Container UI component
+ */
+export declare const Container: ({ children, width, className, ...props }: ContainerProps) => React.JSX.Element;
+export {};

package/_dist/layouts/DashboardGlobal/DashboardGlobal.d.ts

@@ -0,0 +1,57 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+export declare const DashboardContext: React.Context<any>;
+import './dashboard-global.css';
+/**
+ * Prop types for DashboardGlobal
+ */
+interface DashboardGlobalProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Child elements to be assigned to named slots.
+     */
+    children: ReactNode;
+    /**
+     * Is the dashboard in admin mode?
+     */
+    isAdmin?: boolean;
+    /**
+     * Is the sidebar expanded?
+     */
+    isSidebarExpanded?: boolean;
+    /**
+     * Function to set the sidebar expanded state.
+     */
+    setIsSidebarExpanded?: (isOpen: boolean) => void;
+    /**
+     * Whether to include a sidebar toggle button.
+     */
+    hasSidebarToggle?: boolean;
+    /**
+     * A fully-formed link element using the router of your choice. The link text will be used as the aria-label. If the logo should not be a link, set to `null`.
+     */
+    logoLinkContent?: ReactNode;
+    /**
+     * Width of the sidebar when collapsed in rems. This should not need to be modified.
+     */
+    sidebarCollapsedWidth?: number;
+    /**
+     * Width of the sidebar when expanded in rems. This should not need to be modified, unless slightly to accommodate longer top-level navigation items.
+     */
+    sidebarExpandedWidth?: number;
+    /**
+     * Translatable string for sidebar toggle button.
+     */
+    sidebarToggleLabel?: string;
+    /**
+     * Translatable string for skiplink.
+     */
+    skiplinkText?: string;
+    /**
+     * Additional class names. Will be merged with existing component root classes.
+     */
+    className?: string;
+}
+/**
+ * DashboardGlobal UI component
+ */
+export declare const DashboardGlobal: ({ children, hasSidebarToggle, isAdmin, logoLinkContent, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarToggleLabel, skiplinkText, isSidebarExpanded, setIsSidebarExpanded, className, ...props }: DashboardGlobalProps) => React.JSX.Element;
+export {};

package/_dist/layouts/DashboardInner/DashboardInner.d.ts

@@ -0,0 +1,29 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './dashboard-inner.css';
+/**
+ * Prop types for DashboardInner
+ */
+interface DashboardInnerProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Child elements to be assigned to named slots.
+     */
+    children: ReactNode;
+    /**
+     * Whether to apply bottom spacing to the second-to-last content child.
+     * This prop provides flexibility for different dashboard layouts:
+     * - When true: Adds consistent spacing between content sections while preventing
+     *   unnecessary spacing after the last element
+     * - When false: Removes all content spacing for layouts that require custom spacing
+     * @default false
+     */
+    hasContentSpacing?: boolean;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * DashboardInner UI component
+ */
+export declare const DashboardInner: ({ children, hasContentSpacing, className, ...props }: DashboardInnerProps) => React.JSX.Element;
+export {};

package/_dist/layouts/DocsLayout/DocsLayout.d.ts

@@ -0,0 +1,30 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './docs-layout.css';
+/**
+ * Prop types for DocsLayout
+ */
+interface DocsLayoutProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Children to render in the layout.
+     */
+    children: ReactNode;
+    /**
+     * Width of the sidebar when expanded as a percentage.
+     * This is also the width of the sidebar when it is not collapsable (hasSidebarToggle is false).
+     */
+    sidebarWidth?: string;
+    /**
+     * Minimum width of the sidebar when expanded in rems.
+     * This is also the min-width of the sidebar when it is not collapsable (hasSidebarToggle is false).
+     */
+    sidebarMinWidth?: number;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * DocsLayout UI component
+ */
+export declare const DocsLayout: ({ children, sidebarWidth, sidebarMinWidth, className, ...props }: DocsLayoutProps) => React.JSX.Element;
+export {};

package/_dist/layouts/FlexContainer/FlexContainer.d.ts

@@ -0,0 +1,72 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GridGapOptions } from '@layouts/layout-types';
+import './flex-container.css';
+type FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
+type FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type FlexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+type FlexGapOptions = GridGapOptions | 'minimal' | 'none';
+interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Aligns content when there is extra space in the cross-axis.
+     */
+    alignContent?: FlexAlignContent;
+    /**
+     * Aligns items on the cross axis.
+     */
+    alignItems?: FlexAlignItems;
+    /**
+     * Establishes the main-axis, thus defining the direction flex items are placed in the flex container.
+     */
+    flexDirection?: FlexDirection;
+    /**
+     * If the items do not fit in one line (row or column, depending on flexDirection), how should they wrap.
+     */
+    flexWrap?: FlexWrap;
+    /**
+     * Gap between items.
+     */
+    gap?: FlexGapOptions;
+    /**
+     * Alignment along the main axis.
+     */
+    justifyContent?: FlexJustifyContent;
+    /**
+     * Align content on mobile. If not set, will default to the same value as `alignContent`.
+     */
+    mobileAlignContent?: FlexAlignContent;
+    /**
+     * Align items on mobile. If not set, will default to the same value as `alignItems`.
+     */
+    mobileAlignItems?: FlexAlignItems;
+    /**
+     * Flex direction for mobile.
+     */
+    mobileFlexDirection?: FlexDirection;
+    /**
+     * Flex wrap for mobile. If not set, will default to the same value as `flexWrap`.
+     */
+    mobileFlexWrap?: FlexWrap;
+    /**
+     * Gap between items on mobile. If not set, will default to the same value as `gap`.
+     */
+    mobileGap?: FlexGapOptions;
+    /**
+     * Justify content for mobile. If not set, will default to the same value as `justifyContent`.
+     */
+    mobileJustifyContent?: FlexJustifyContent;
+    /**
+     * Container content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Flex Container UI component
+ */
+export declare const FlexContainer: ({ alignContent, alignItems, flexDirection, flexWrap, gap, justifyContent, mobileAlignItems, mobileAlignContent, mobileFlexDirection, mobileFlexWrap, mobileGap, mobileJustifyContent, children, className, ...props }: FlexContainerProps) => React.JSX.Element;
+export {};

package/_dist/layouts/GlobalWrapper/GlobalWrapper.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+/**
+ * Prop types for GlobalWrapper
+ */
+interface GlobalWrapperProps {
+    /**
+     * Child components
+     */
+    children: React.ReactNode;
+    /**
+     *  Mobile menu will be enabled when viewport is at or below this number in pixels.
+     */
+    mobileMenuMaxWidth?: number;
+}
+/**
+ * GlobalWrapper wrapper component.
+ */
+export declare const GlobalWrapper: ({ children, mobileMenuMaxWidth, }: GlobalWrapperProps) => React.JSX.Element;
+export {};

package/_dist/layouts/SidebarLayout/SidebarLayout.d.ts

@@ -0,0 +1,36 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GridGapOptions } from '@layouts/layout-types';
+/**
+ * Prop types for SidebarLayout
+ */
+interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Children to render in the layout. All children must be assigned to a named slot — either 'sidebar' or 'content'.
+     */
+    children: ReactNode;
+    /**
+     * Gap between grid items
+     */
+    gridGap?: GridGapOptions;
+    /**
+     * Sidebar location.
+     */
+    sidebarLocation?: 'left' | 'right';
+    /**
+     * Sidebar location on mobile.
+     */
+    sidebarMobileLocation?: 'before' | 'after';
+    /**
+     * Sidebar width.
+     */
+    sidebarWidth?: 'narrow' | 'standard' | 'wide';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SidebarLayout UI component
+ */
+export declare const SidebarLayout: ({ children, gridGap, sidebarLocation, sidebarMobileLocation, sidebarWidth, className, ...props }: SidebarLayoutProps) => React.JSX.Element;
+export {};

package/_dist/layouts/StepperLayout/StepperLayout.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import './stepper-layout.css';
+/**
+ * Prop types for StepperLayout
+ */
+interface StepperLayoutProps {
+    /**
+     * Layout content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * StepperLayout UI component
+ */
+export declare const StepperLayout: ({ children, className, ...props }: StepperLayoutProps) => React.JSX.Element;
+export {};

package/_dist/layouts/ThreeItemLayout/ThreeItemLayout.d.ts

@@ -0,0 +1,30 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GridGapOptions, VerticalAlignOptions } from '@layouts/layout-types';
+import '../../utilities/grid/grid.css';
+import './three-item-layout.css';
+/**
+ * Prop types for TwoItemLayout
+ */
+interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Item content.
+     */
+    children?: ReactNode;
+    /**
+     * Width of gap between items.
+     */
+    gridGap?: GridGapOptions;
+    /**
+     * Vertical alignment of items.
+     */
+    verticalAlign?: VerticalAlignOptions;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ThreeItemLayout UI component.
+ */
+export declare const ThreeItemLayout: ({ children, gridGap, verticalAlign, className, ...props }: TwoItemLayoutProps) => React.JSX.Element;
+export {};

package/_dist/layouts/TwoItemLayout/TwoItemLayout.d.ts

@@ -0,0 +1,34 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GridGapOptions, VerticalAlignOptions } from '@layouts/layout-types';
+import '../../utilities/grid/grid.css';
+import './two-item-layout.css';
+/**
+ * Prop types for TwoItemLayout
+ */
+interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Item content.
+     */
+    children?: ReactNode;
+    /**
+     * Width of gap between items.
+     */
+    gridGap?: GridGapOptions;
+    /**
+     * Layout variant for column widths.
+     */
+    layoutVariant?: 'equal' | 'one-third-start' | 'one-third-end';
+    /**
+     * Vertical alignment of items.
+     */
+    verticalAlign?: VerticalAlignOptions;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * TwoItemLayout UI component.
+ */
+export declare const TwoItemLayout: ({ children, gridGap, layoutVariant, verticalAlign, className, ...props }: TwoItemLayoutProps) => React.JSX.Element;
+export {};

package/_dist/layouts/layout-types.d.ts

@@ -0,0 +1,2 @@
+export type GridGapOptions = 'wide' | 'standard' | 'narrow';
+export type VerticalAlignOptions = 'start' | 'center' | 'end';

package/_dist/libs/components/sb-docs-toc-layout.d.ts

@@ -0,0 +1,4 @@
+import React, { ReactNode } from 'react';
+export declare const SbDocsTocLayout: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

package/_dist/libs/components/utility-components.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { HeadingLevel } from '@libs/types/custom-types';
+interface HxProps {
+    baseClass?: string;
+    children?: ReactNode;
+    id?: string;
+    level: HeadingLevel;
+    className?: string;
+}
+export declare const Hx: ({ baseClass, children, id, level, className, ...props }: HxProps) => React.DetailedReactHTMLElement<{
+    className: any;
+    id: string;
+}, HTMLElement>;
+export declare const extractText: (node: ReactNode) => string;
+export {};

package/_dist/libs/components/utils.d.ts

@@ -0,0 +1,7 @@
+export function createRandomID(): string;
+export function getDescendants(node: any, collect: any): any;
+export function initiateSlots(children: any): {
+    __unslotted: any[];
+};
+export function mergeClasses(styles: any): any;
+export function isValidImageSrc(uri: any): boolean;

package/_dist/libs/types/custom-types.d.ts

@@ -0,0 +1,107 @@
+import { ReactNode } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+export type BadgeColor = 'success' | 'critical' | 'info' | 'warning' | 'neutral' | 'brand' | 'silver' | 'gold' | 'platinum' | 'diamond';
+export type ButtonDisplayType = 'label-only' | 'icon-start' | 'icon-end';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'brand-secondary' | 'critical' | 'navbar' | 'inline';
+export type ContainerWidth = 'narrow' | 'standard' | 'wide' | 'x-wide' | 'full';
+export type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell' | 'table-caption' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row-group' | 'list-item' | 'inherit' | 'initial' | 'revert' | 'unset';
+export type FuiOffset = number | {
+    mainAxis?: number;
+    crossAxis?: number;
+    alignmentAxis?: number | null;
+};
+export type FuiPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export type HeadingItemType = {
+    /**
+     * Label for a menu item
+     */
+    label: string;
+    /**
+     * Is the item a heading?
+     */
+    isHeading: boolean;
+};
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+export type HeadingLevelCommon = Exclude<HeadingLevel, 'h1' | 'h5' | 'h6'>;
+export type LinkItemType = {
+    /**
+     * Description of the item
+     */
+    description?: string;
+    /**
+     * Is this item disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Optional icon for this item. Choose from available icons in the Icon component.
+     */
+    iconName?: PDSIcon;
+    /**
+     * Is the item a link?
+     */
+    isLink: boolean;
+    /**
+     * The content of the link.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Optional `data-testid` value for this item.
+     */
+    testId?: string;
+};
+export type MenuItemType = {
+    /**
+     * (optional) Callback function to execute when menu item is activated
+     */
+    callback?: () => void;
+    /**
+     * Description of the item
+     */
+    description?: string;
+    /**
+     * Is this item disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Optional icon for this item. Choose from available icons in the Icon component.
+     */
+    iconName?: PDSIcon;
+    /**
+     * Optional ID value for this item.
+     */
+    id?: string;
+    /**
+     * Label for a menu item
+     */
+    label: string;
+    /**
+     * Optional `data-testid` value for this item.
+     */
+    testId?: string;
+};
+export type NodeItemType = {
+    /**
+     * Is the item a node?
+     */
+    isNode: boolean;
+    /**
+     * The content of the node.
+     */
+    nodeContent?: ReactNode;
+};
+export type SeparatorItemType = {
+    /**
+     * Is the item a separator?
+     */
+    isSeparator: boolean;
+};
+export type SitePlanLevel = 'sandbox' | 'basic' | 'performance-small' | 'performance-medium' | 'performance-large' | 'performance-xl' | 'performance-2xl' | 'elite';
+export declare const SitePlanLevelLabel: Record<SitePlanLevel, string>;
+export type SiteStatus = 'active' | 'frozen';
+export type SiteType = 'drupal' | 'wordpress' | 'gatsby' | 'nextjs';
+export declare const SiteTypeLabel: Record<SiteType, string>;
+export declare const SiteTypeIcon: Record<SiteType, PDSIcon>;
+export type SpacingScaleOptions = '6xs' | '5xs' | '4xs' | '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
+export type TypeScaleOptions = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';