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

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

@@ -9,6 +9,10 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Children to render in the layout.
      */
     children: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * PDS container width.
      */
@@ -61,13 +65,9 @@ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * 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) => import("react/jsx-runtime").JSX.Element;
+export declare const AppLayout: ({ children, className, containerWidth, hasSidebarToggle, isSidebarCollapsed, labels, mainContentElement, mainContentProps, onSidebarToggle, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarExpandedWidthMin, sidebarProps, ...props }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,17 +9,17 @@ interface ContainerProps extends ComponentPropsWithoutRef<'div'> {
      * Container content.
      */
     children?: ReactNode;
-    /**
-     * Width of the container.
-     */
-    width?: ContainerWidth;
     /**
      * Additional class names
      */
     className?: string;
+    /**
+     * Width of the container.
+     */
+    width?: ContainerWidth;
 }
 /**
  * Container UI component
  */
-export declare const Container: ({ children, width, className, ...props }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Container: ({ children, className, width, ...props }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,25 +10,29 @@ interface DashboardGlobalProps extends ComponentPropsWithoutRef<'div'> {
      */
     children: ReactNode;
     /**
-     * Is the dashboard in admin mode?
+     * Additional class names. Will be merged with existing component root classes.
      */
-    isAdmin?: boolean;
+    className?: string;
     /**
-     * Is the sidebar expanded?
+     * Whether to include a sidebar toggle button.
      */
-    isSidebarExpanded?: boolean;
+    hasSidebarToggle?: boolean;
     /**
-     * Function to set the sidebar expanded state.
+     * Is the dashboard in admin mode?
      */
-    setIsSidebarExpanded?: (isOpen: boolean) => void;
+    isAdmin?: boolean;
     /**
-     * Whether to include a sidebar toggle button.
+     * Is the sidebar expanded?
      */
-    hasSidebarToggle?: boolean;
+    isSidebarExpanded?: 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;
+    /**
+     * Function to set the sidebar expanded state.
+     */
+    setIsSidebarExpanded?: (isOpen: boolean) => void;
     /**
      * Width of the sidebar when collapsed in rems. This should not need to be modified.
      */
@@ -45,13 +49,9 @@ interface DashboardGlobalProps extends ComponentPropsWithoutRef<'div'> {
      * 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) => import("react/jsx-runtime").JSX.Element;
+export declare const DashboardGlobal: ({ children, className, hasSidebarToggle, isAdmin, isSidebarExpanded, logoLinkContent, setIsSidebarExpanded, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarToggleLabel, skiplinkText, ...props }: DashboardGlobalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,6 +8,10 @@ interface DashboardInnerProps extends ComponentPropsWithoutRef<'div'> {
      * Child elements to be assigned to named slots.
      */
     children: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Whether to apply bottom spacing to the second-to-last content child.
      * This prop provides flexibility for different dashboard layouts:
@@ -17,13 +21,9 @@ interface DashboardInnerProps extends ComponentPropsWithoutRef<'div'> {
      * @default false
      */
     hasContentSpacing?: boolean;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * DashboardInner UI component
  */
-export declare const DashboardInner: ({ children, hasContentSpacing, className, ...props }: DashboardInnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DashboardInner: ({ children, className, hasContentSpacing, ...props }: DashboardInnerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,22 +9,22 @@ interface DocsLayoutProps extends ComponentPropsWithoutRef<'div'> {
      */
     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).
+     * Additional class names
      */
-    sidebarWidth?: string;
+    className?: 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
+     * 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).
      */
-    className?: string;
+    sidebarWidth?: string;
 }
 /**
  * DocsLayout UI component
  */
-export declare const DocsLayout: ({ children, sidebarWidth, sidebarMinWidth, className, ...props }: DocsLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DocsLayout: ({ children, className, sidebarMinWidth, sidebarWidth, ...props }: DocsLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -16,6 +16,14 @@ interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
      * Aligns items on the cross axis.
      */
     alignItems?: FlexAlignItems;
+    /**
+     * Container content.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Establishes the main-axis, thus defining the direction flex items are placed in the flex container.
      */
@@ -56,17 +64,9 @@ interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
      * 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) => import("react/jsx-runtime").JSX.Element;
+export declare const FlexContainer: ({ alignContent, alignItems, children, className, flexDirection, flexWrap, gap, justifyContent, mobileAlignContent, mobileAlignItems, mobileFlexDirection, mobileFlexWrap, mobileGap, mobileJustifyContent, ...props }: FlexContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactNode } from 'react';
 /**
  * Prop types for GlobalWrapper
  */
@@ -6,7 +6,7 @@ interface GlobalWrapperProps {
     /**
      * Child components
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      *  Mobile menu will be enabled when viewport is at or below this number in pixels.
      */

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

@@ -8,6 +8,10 @@ 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;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Gap between grid items
      */
@@ -24,13 +28,9 @@ interface SidebarLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * 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) => import("react/jsx-runtime").JSX.Element;
+export declare const SidebarLayout: ({ children, className, gridGap, sidebarLocation, sidebarMobileLocation, sidebarWidth, ...props }: SidebarLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,6 +10,10 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Item content.
      */
     children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Width of gap between items.
      */
@@ -18,13 +22,9 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Vertical alignment of items.
      */
     verticalAlign?: VerticalAlignOptions;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * ThreeItemLayout UI component.
  */
-export declare const ThreeItemLayout: ({ children, gridGap, verticalAlign, className, ...props }: TwoItemLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThreeItemLayout: ({ children, className, gridGap, verticalAlign, ...props }: TwoItemLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,6 +10,10 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * Item content.
      */
     children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Width of gap between items.
      */
@@ -22,13 +26,9 @@ interface TwoItemLayoutProps extends ComponentPropsWithoutRef<'div'> {
      * 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) => import("react/jsx-runtime").JSX.Element;
+export declare const TwoItemLayout: ({ children, className, gridGap, layoutVariant, verticalAlign, ...props }: TwoItemLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

@@ -8,20 +8,20 @@ export type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'brand' | 'bran
 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;
+    crossAxis?: number;
+    mainAxis?: number;
 };
 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;
+    /**
+     * Label for a menu item
+     */
+    label: string;
 };
 export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
 export type HeadingLevelCommon = Exclude<HeadingLevel, 'h1' | 'h5' | 'h6'>;

package/_dist/utilities/color/color-preview-swatches.d.ts

@@ -1,7 +1,7 @@
 import './color-preview-swatches.css';
 export declare const SwatchButton: ({ clipboardText, color, type, }: {
-    color: string;
     clipboardText: string;
+    color: string;
     type: "background" | "foreground" | "border";
 }) => import("react/jsx-runtime").JSX.Element;
 interface ColorPreviewSwatchesProps {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "1.0.0-alpha.9",
+	"version": "1.0.0-beta.0",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",
@@ -64,8 +64,8 @@
 		"pretest:vrt:update": "npm run build:css",
 		"test:vrt:update": "npm run test:vrt -- --update-snapshots",
 		"pretest:a11y:generate": "npm run build:css",
-		"test:a11y:generate": "npm run storybook:build && npx sb extract && node __tests__/a11y/a11y.generate-tests.js",
-		"test:a11y": "playwright test --project 'a11y'",
+		"test:a11y:generate": "DISABLE_A11Y_ADDON=true npm run storybook:build && node __tests__/a11y/a11y.generate-tests.js",
+		"test:a11y": "USE_STATIC_STORYBOOK=true DISABLE_A11Y_ADDON=true playwright test --project 'a11y'",
 		"test:a11y:results": "npx http-server ./__tests__/a11y/results/",
 		"predeploy:pantheon": "npm run build:css",
 		"deploy:pantheon": "storybook build",
@@ -76,11 +76,12 @@
 		"generate:utility": "plop utility",
 		"prepare": "husky install",
 		"build-storybook": "storybook build",
-		"vite": "vite"
+		"vite": "vite",
+		"pack:local": "bash scripts/pack-local.sh"
 	},
 	"devDependencies": {
 		"@arethetypeswrong/cli": "^0.15.3",
-		"@axe-core/playwright": "^4.7.0",
+		"@axe-core/playwright": "^4.11.0",
 		"@babel/preset-env": "^7.21.5",
 		"@babel/preset-react": "^7.18.6",
 		"@csstools/postcss-design-tokens": "^2.0.4",
@@ -94,8 +95,8 @@
 		"@storybook/react-webpack5": "^9.1.12",
 		"@types/prismjs": "^1.26.5",
 		"@types/react": "^19.2.2",
-		"@typescript-eslint/eslint-plugin": "^7.7.0",
-		"@typescript-eslint/parser": "^7.7.0",
+		"@typescript-eslint/eslint-plugin": "^8.47.0",
+		"@typescript-eslint/parser": "^8.47.0",
 		"@vitejs/plugin-react": "^4.3.0",
 		"@vueless/storybook-dark-mode": "^9.0.9",
 		"axe-html-reporter": "^2.2.3",
@@ -103,9 +104,14 @@
 		"cssnano": "^6.0.1",
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
+		"eslint-import-resolver-typescript": "^4.4.4",
+		"eslint-plugin-import": "^2.32.0",
 		"eslint-plugin-prettier": "^5.1.3",
 		"eslint-plugin-react": "^7.32.2",
+		"eslint-plugin-simple-import-sort": "^12.1.1",
+		"eslint-plugin-sort-destructure-keys": "^2.0.0",
 		"eslint-plugin-storybook": "^9.1.12",
+		"eslint-plugin-typescript-sort-keys": "^3.3.0",
 		"fast-glob": "^3.3.2",
 		"husky": "^8.0.3",
 		"lint-staged": "^13.2.3",
@@ -123,7 +129,7 @@
 		"react-dom": "^18.2.0",
 		"storybook": "^9.1.12",
 		"typescript": "^5.4.5",
-		"vite": "^5.2.11",
+		"vite": "^7.2.2",
 		"vite-plugin-lib-inject-css": "^2.1.1",
 		"vite-tsconfig-paths": "^4.3.2"
 	},
@@ -136,12 +142,14 @@
 		"@floating-ui/react-dom": "~1.3.0",
 		"@pantheon-systems/pds-design-tokens": "^1.0.0",
 		"@reactuses/core": "^5.0.15",
+		"date-fns": "^4.1.0",
 		"downshift": "^9.0.8",
 		"focus-trap-react": "^10.2.1",
 		"hash-sum": "^2.0.0",
 		"prism-react-renderer": "^2.4.1",
 		"prismjs": "^1.29.0",
 		"react-code-block": "^1.1.1",
+		"react-day-picker": "^9.11.1",
 		"react-device-detect": "^2.2.3",
 		"react-hotkeys-hook": "^4.5.1",
 		"react-router-dom": "^6.13.0",