@nypl/design-system-react-components 1.0.5 → 1.0.8

package/dist/components/StructuredContent/StructuredContent.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { ComponentImageProps } from "../Image/Image";
 export declare type StructuredContentImagePosition = "left" | "right" | "center";
 interface StructuredContentImageProps extends ComponentImageProps {
@@ -24,5 +24,7 @@ export interface StructuredContentProps {
  * The `StructuredContent` component that displays a heading, callout content,
  * an image, and body content. All are optional except for body content.
  */
-export declare const StructuredContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<StructuredContentProps>) => JSX.Element, {}>;
+export declare const StructuredContent: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<StructuredContentProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default StructuredContent;

package/dist/components/StyleGuide/ColorCard.d.ts

@@ -1,29 +1,33 @@
 import * as React from "react";
-export interface ColorCardProps {
-    /** The backgroundColor of the color card. */
-    backgroundColor: string;
-    /** The name of a color's javascript theme object. */
-    colorName: string;
-    /** The name of the color that the current color is based on. */
-    colorSource: string;
+export interface DataTableProps {
+    /** Contrast and WCAG compliance data related to the color gray.xxxx-dark when
+     * used with the current color. */
+    dataBgPageColor: string[];
+    /** Contrast and WCAG compliance data related to the color gray.xxx-dark when
+     * used with the current color. */
+    dataBgDefaultColor: string[];
     /** Contrast and WCAG compliance data related to the color black when used
      * with the current color. */
-    dataBlack: string[];
+    dataBlackColor: string[];
+    /** Contrast and WCAG compliance data related to the default color for
+     * heading elements when used with the current color. */
+    dataHeadingColor?: string[];
+    /** Contrast and WCAG compliance data related to the default color for basic
+     * text elements when used with the current color. */
+    dataBodyColor?: string[];
     /** Contrast and WCAG compliance data related to the color white when used
      * with the current color. */
-    dataWhite: string[];
+    dataWhiteColor: string[];
     /** The color to use for text in the color card. */
     textColor: string;
 }
-export interface DataTableProps {
-    /** Contrast and WCAG compliance data related to the color black when used
-     * with the current color. */
-    dataBlack: string[];
-    /** Contrast and WCAG compliance data related to the color white when used
-     * with the current color. */
-    dataWhite: string[];
-    /** color to use for text in color card */
-    textColor: string;
+export interface ColorCardProps extends DataTableProps {
+    /** The backgroundColor of the color card. */
+    backgroundColor: string;
+    /** The name of a color's javascript theme object. */
+    colorName: string;
+    /** The name of the color that the current color is based on. */
+    colorSource: string;
 }
 export declare const DataTable: (props: React.PropsWithChildren<DataTableProps>) => JSX.Element;
 export declare const ColorCard: (props: React.PropsWithChildren<ColorCardProps>) => JSX.Element;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export interface TableProps {
     /** Additional class name for the `Table` component. */
     className?: string;
@@ -26,5 +26,7 @@ export interface TableProps {
  * Basic `Table` component used to organize and display tabular data in
  * rows and columns.
  */
-export declare const Table: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TableProps>) => JSX.Element, {}>;
+export declare const Table: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TableProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLTableElement>>, {}>;
 export default Table;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
-import * as React from "react";
+import React from "react";
 export interface TabsDataProps {
     label: string;
     content: string | React.ReactNode;
@@ -21,6 +21,8 @@ export interface TabsProps {
  * Renders Chakra's `Tab` component with specific variants, props,
  * and controlled styling.
  */
-export declare const Tabs: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TabsProps>) => JSX.Element, {}>;
+export declare const Tabs: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TabsProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export { TabList, Tab, TabPanels, TabPanel };
 export default Tabs;

package/dist/components/Template/Template.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export interface TemplateProps {
 }
 export interface TemplateHeaderProps {
@@ -28,6 +28,8 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
     /** ID used for the `main` HTML element. Defaults to "mainContent". Useful
      * anchor for the application skip navigation. */
     contentId?: string;
+    /** DOM that will be rendered in the `TemplateContentBottom` component section. */
+    contentBottom?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
     contentPrimary?: React.ReactElement;
     /** DOM that will be rendered in the `TemplateContentSidebar` component section. */
@@ -45,7 +47,9 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
  * The main top-level parent component that wraps all template-related
  * components.
  */
-declare const Template: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TemplateProps>) => JSX.Element, {}>;
+declare const Template: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TemplateProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 /**
  * This optional component renders its children from edge-to-edge and should
  * be used for alerts or notifications that are typically site-wide. This must
@@ -64,9 +68,10 @@ declare const TemplateAboveHeader: (props: React.PropsWithChildren<TemplateProps
  */
 declare const TemplateHeader: ({ children, renderHeaderElement, }: React.PropsWithChildren<TemplateHeaderProps>) => JSX.Element;
 /**
- * This optional component should be used inside the `TemplateHeader` component.
- * This is meant to render its children from edge to edge and is most useful
- * for the `Breadcrumbs` and `Hero` components, and other banner-like components.
+ * This component should be used inside the `Template` component to contain both
+ * the `TemplateAboveHeader` and `TemplateHeader` components. This is meant to
+ * render its children from edge to edge and is most useful for the headers,
+ * `Breadcrumbs`, and `Hero` components or other banner-like components.
  */
 declare const TemplateBreakout: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
 /**
@@ -86,6 +91,13 @@ declare const TemplateContent: (props: React.PropsWithChildren<TemplateContentPr
  * above the primary component and the sidebar component (if any).
  */
 declare const TemplateContentTop: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+/**
+ * This optional component must be used inside the `TemplateContent` component
+ * and after the `TemplateContentPrimary` or `TemplateContentSidebar` component.
+ * This renders content in the main width of the container and should always
+ * render below the primary component and the sidebar component (if any).
+ */
+declare const TemplateContentBottom: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
 /**
  * This component is used to render content in a column when there must be a
  * sidebar component on either its left or right side. It must go inside the
@@ -121,6 +133,8 @@ declare const TemplateFooter: ({ children, renderFooterElement, }: React.PropsWi
  * be rendered. For example, if you want to render content in the
  * `TemplateContentPrimary` section, then pass it as a prop to `contentPrimary`.
  */
-export declare const TemplateAppContainer: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TemplateAppContainerProps>) => JSX.Element, {}>;
-export { Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, };
+export declare const TemplateAppContainer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TemplateAppContainerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export { Template, TemplateAboveHeader, TemplateBreakout, TemplateContent, TemplateContentBottom, TemplateContentPrimary, TemplateContentSidebar, TemplateContentTop, TemplateFooter, TemplateHeader, };
 export default TemplateAppContainer;

package/dist/components/Text/Text.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export declare type TextSizes = "default" | "caption" | "tag" | "mini";
 export interface TextProps {
     /** Additional class name to render in the `Text` component. */
@@ -18,5 +18,7 @@ export interface TextProps {
     /** Optional prop to control the text styling */
     size?: TextSizes;
 }
-export declare const Text: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TextProps>) => JSX.Element, {}>;
+export declare const Text: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<TextProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default Text;

package/dist/components/TextInput/TextInput.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare type TextInputTypes = "email" | "hidden" | "number" | "password" | "text" | "textarea" | "tel" | "url";
 export declare const TextInputFormats: {

package/dist/components/Toggle/Toggle.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare type ToggleSizes = "default" | "small";
 export interface ToggleProps {

package/dist/components/VideoPlayer/VideoPlayer.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export declare type VideoPlayerTypes = "vimeo" | "youtube";
 export declare type VideoPlayerAspectRatios = "fourByThree" | "sixteenByNine" | "square";
@@ -34,5 +34,7 @@ export interface VideoPlayerProps {
     /** Required. Used to specify which video service is being used. */
     videoType?: VideoPlayerTypes;
 }
-export declare const VideoPlayer: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<VideoPlayerProps>) => JSX.Element, {}>;
+export declare const VideoPlayer: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<VideoPlayerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
 export default VideoPlayer;