@nypl/design-system-react-components 0.25.13 → 0.26.0

package/dist/components/Pagination/Pagination.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 export interface PaginationProps {
     /** Additional className. */
     className?: string;
@@ -23,5 +23,5 @@ export interface PaginationProps {
 /**
  * A component that provides a navigational list of page items.
  */
-declare const Pagination: React.FC<PaginationProps>;
+export declare const Pagination: import("@chakra-ui/react").ChakraComponent<(props: PaginationProps) => JSX.Element, {}>;
 export default Pagination;

package/dist/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
+/// <reference types="react" />
 import { ProgressIndicatorSizes, ProgressIndicatorTypes } from "./ProgressIndicatorTypes";
 export interface ProgressIndicatorProps {
     /** Flag to render the component in a dark background. */
     darkMode?: boolean;
     /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+    id: string;
     /** Whether the `ProgressIndicator` should be linear or circular. */
     indicatorType?: ProgressIndicatorTypes;
     /** Whether the progress animation should display because the `value` prop is
@@ -25,5 +25,5 @@ export interface ProgressIndicatorProps {
  * time to complete or consists of multiple steps. Examples include downloading,
  * uploading, or processing.
  */
-declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export declare const ProgressIndicator: import("@chakra-ui/react").ChakraComponent<(props: ProgressIndicatorProps) => JSX.Element, {}>;
 export default ProgressIndicator;

package/dist/components/Radio/Radio.d.ts

@@ -6,7 +6,7 @@ export interface RadioProps {
     /** Optional string to populate the HelperErrorText for the standard state. */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the HelperErrorText for the error state
      * when `isInvalid` is true.
      */
@@ -16,12 +16,10 @@ export interface RadioProps {
      * Learn more about controlled and uncontrolled form fields: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
     isChecked?: boolean;
     /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
-     * This also makes the text italic and color scheme gray.
-     */
+     * This also makes the text italic and color scheme gray. */
     isDisabled?: boolean;
     /** Adds the 'aria-invalid' attribute to the input when true. This also makes
-     * the color theme "NYPL error" red for the button and text.
-     */
+     * the color theme "NYPL error" red for the button and text. */
     isInvalid?: boolean;
     /** Adds the 'required' attribute to the input when true. */
     isRequired?: boolean;
@@ -41,5 +39,5 @@ export interface RadioProps {
     /** Populates the value of the input. */
     value?: string;
 }
-declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>, {}>;
 export default Radio;

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -9,7 +9,7 @@ export interface RadioGroupProps {
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the HelperErrorText for error state */
     invalidText?: HelperErrorTextType;
     /** Adds the 'disabled' prop to the input when true. */
@@ -30,16 +30,22 @@ export interface RadioGroupProps {
     name: string;
     /** The action to perform on the `<input>`'s onChange function  */
     onChange?: (value: string) => void;
-    /** Whether or not to display "Required"/"Optional" in the label text. */
-    optReqFlag?: boolean;
     /** Offers the ability to hide the helper/invalid text. */
     showHelperInvalidText?: boolean;
     /** Offers the ability to show the group's legend onscreen or hide it. Refer
      * to the `labelText` property for more information. */
     showLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
 }
-export declare const onChangeDefault: () => void;
-declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & {
+/**
+ * RadioGroup is a wrapper for DS `Radio` components that renders as a fieldset
+ * HTML element along with optional helper text. The `name` prop is essential
+ * for this form group element and is not needed for individual DS `Radio`
+ * components when `RadioGroup` is used.
+ */
+export declare const RadioGroup: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<RadioGroupProps & {
     children?: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>>;
+} & React.RefAttributes<HTMLInputElement>>, {}>;
 export default RadioGroup;

package/dist/components/SearchBar/SearchBar.d.ts

@@ -4,13 +4,13 @@ interface BaseProps {
     labelText: string;
     name: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    value?: string;
 }
 export interface SelectProps extends BaseProps {
     optionsData: string[];
 }
 export interface TextInputProps extends BaseProps {
     placeholder?: string;
-    value?: string;
 }
 export interface SearchBarProps {
     /** Adds 'action' property to the `form` element. */
@@ -26,7 +26,7 @@ export interface SearchBarProps {
     /** The text to display below the form in a `HelperErrorText` component. */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the `HelperErrorText` for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
@@ -56,5 +56,5 @@ export interface SearchBarProps {
  * Renders a wrapper `form` element to be used with `Select` (optional),
  * `Input`, and `Button` components together.
  */
-export default function SearchBar(props: SearchBarProps): JSX.Element;
-export {};
+export declare const SearchBar: import("@chakra-ui/react").ChakraComponent<(props: SearchBarProps) => JSX.Element, {}>;
+export default SearchBar;

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { SelectTypes } from "./SelectTypes";
+import { SelectTypes, LabelPositions } from "./SelectTypes";
 export interface SelectProps {
     /** Optionally pass in additional Chakra-based styles. */
     additionalStyles?: {
@@ -11,7 +11,7 @@ export interface SelectProps {
     /** Optional string to populate the `HelperErrorText` for the standard state. */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the `HelperErrorText` for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
@@ -22,6 +22,9 @@ export interface SelectProps {
     isInvalid?: boolean;
     /** Adds the `required` and `aria-required` attributes to the input when true. */
     isRequired?: boolean;
+    /** Optional value to render the label inline, rather than the default (on top)
+     * of the select element. */
+    labelPosition?: LabelPositions;
     /** Provides text for a `Label` component if `showLabel` is set to `true`;
      * populates an `aria-label` attribute on the select input if `showLabel` is
      * set to `false`. */
@@ -40,8 +43,9 @@ export interface SelectProps {
     /** Offers the ability to show the select's label onscreen or hide it. Refer
      * to the `labelText` property for more information. */
     showLabel?: boolean;
-    /** Whether or not to display the "Required"/"Optional" text in the label text. */
-    showOptReqLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
     /** The value of the selected option.
      * Should be passed along with `onChange` for controlled components. */
     value?: string;
@@ -50,7 +54,7 @@ export interface SelectProps {
  * Component that renders Chakra's `Select` component along with an accessible
  * `Label` and optional `HelperErrorText` component.
  */
-declare const Select: React.ForwardRefExoticComponent<SelectProps & {
+export declare const Select: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SelectProps & {
     children?: React.ReactNode;
-} & React.RefAttributes<HTMLSelectElement>>;
+} & React.RefAttributes<HTMLSelectElement>>, {}>;
 export default Select;

package/dist/components/Select/SelectTypes.d.ts

@@ -2,3 +2,7 @@ export declare enum SelectTypes {
     Default = "default",
     SearchBar = "searchbar"
 }
+export declare enum LabelPositions {
+    Default = "default",
+    Inline = "inline"
+}

package/dist/components/SkeletonLoader/SkeletonLoader.d.ts

@@ -2,8 +2,6 @@ import * as React from "react";
 import { SkeletonLoaderImageRatios } from "./SkeletonLoaderTypes";
 import { LayoutTypes } from "../../helpers/enums";
 export interface SkeletonLoaderProps {
-    /** Optional boolean value to control visibility of border around skeleton loader. */
-    border?: boolean;
     /** Additional class name for the Skeleton component. */
     className?: string;
     /** Optional numeric value to control the number of lines for content
@@ -15,6 +13,8 @@ export interface SkeletonLoaderProps {
     /** Optional value to control the aspect ratio of the image placeholder;
      * default value is `SkeletonLoaderImageRatios.Square`. */
     imageAspectRatio?: SkeletonLoaderImageRatios;
+    /** Optional boolean value to control visibility of border around skeleton loader. */
+    isBordered?: boolean;
     /** Optional value to control the position of the image placeholder;
      * default value is `LayoutTypes.Column`. */
     layout?: LayoutTypes;
@@ -35,4 +35,5 @@ export interface SkeletonLoaderProps {
  * The `SkeletonLoader` component renders a placeholder to be used while
  * dynamic content is loading.
  */
-export default function SkeletonLoader(props: React.PropsWithChildren<SkeletonLoaderProps>): JSX.Element;
+export declare const SkeletonLoader: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SkeletonLoaderProps>) => JSX.Element, {}>;
+export default SkeletonLoader;

package/dist/components/Slider/Slider.d.ts

@@ -10,7 +10,7 @@ export interface SliderProps {
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
+    id: string;
     /** Optional string to populate the `HelperErrorText` for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
@@ -36,8 +36,6 @@ export interface SliderProps {
     name?: string;
     /** Callback function that gets the value(s) selected. */
     onChange?: (val: number | number[]) => void;
-    /** Whether or not to display the "Required"/"Optional" text in the label text. */
-    optReqFlag?: boolean;
     /** Offers the ability to hide the `TextInput` boxes. */
     showBoxes?: boolean;
     /** Offers the ability to hide the helper/invalid text. */
@@ -45,6 +43,9 @@ export interface SliderProps {
     /** Offers the ability to show the label onscreen or hide it. Refer
      * to the `labelText` property for more information. */
     showLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
     /** Offers the ability to hide the static min/max values. */
     showValues?: boolean;
     /** The amount to increase or decrease when using the slider thumb(s). */
@@ -55,4 +56,5 @@ export interface SliderProps {
  * with a min and max value. The value(s) can be updated through the slider
  * thumb(s) or through the text input(s) elements.
  */
-export default function Slider(props: React.PropsWithChildren<SliderProps>): JSX.Element;
+export declare const Slider: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<SliderProps>) => JSX.Element, {}>;
+export default Slider;

package/dist/components/StatusBadge/StatusBadge.d.ts

@@ -9,5 +9,9 @@ export interface StatusBadgeProps {
      * `StatusBadgeTypes.Low`. */
     level?: StatusBadgeTypes;
 }
-declare function StatusBadge(props: React.PropsWithChildren<StatusBadgeProps>): JSX.Element;
+/**
+ * The `StatusBadge` component is used to display a visual badge for three
+ * different status levels.
+ */
+export declare const StatusBadge: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<StatusBadgeProps>) => JSX.Element, {}>;
 export default StatusBadge;

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

@@ -24,5 +24,5 @@ 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 default function StructuredContent(props: React.PropsWithChildren<StructuredContentProps>): JSX.Element;
-export {};
+export declare const StructuredContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<StructuredContentProps>) => JSX.Element, {}>;
+export default StructuredContent;

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

@@ -25,5 +25,5 @@ export interface TableProps {
  * Basic `Table` component used to organize and display tabular data in
  * rows and columns.
  */
-declare function Table(props: React.PropsWithChildren<TableProps>): JSX.Element;
+export declare const Table: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TableProps>) => JSX.Element, {}>;
 export default Table;

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

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

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

@@ -43,7 +43,7 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
  * The main top-level parent component that wraps all template-related
  * components.
  */
-declare const Template: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
+declare const Template: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TemplateProps>) => JSX.Element, {}>;
 /**
  * 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
@@ -119,5 +119,6 @@ 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`.
  */
-declare const TemplateAppContainer: (props: React.PropsWithChildren<TemplateAppContainerProps>) => JSX.Element;
-export { TemplateAppContainer, Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, };
+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 default TemplateAppContainer;

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

@@ -12,5 +12,5 @@ export interface TextProps {
     /** Optional prop to control the text styling */
     size?: TextSizes;
 }
-declare function Text(props: React.PropsWithChildren<TextProps>): JSX.Element;
+export declare const Text: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<TextProps>) => JSX.Element, {}>;
 export default Text;

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

@@ -17,7 +17,7 @@ export interface InputProps {
     /** Populates the HelperErrorText for the standard state */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Populates the HelperErrorText for the error state */
     invalidText?: HelperErrorTextType;
     /** Adds the `disabled` and `aria-disabled` prop to the input when true */
@@ -40,9 +40,9 @@ export interface InputProps {
     /** Offers the ability to show the label onscreen or hide it. Refer to the
      * `labelText` property for more information. */
     showLabel?: boolean;
-    /** Offers the ability to show the "Required"/"Optional" label onscreen or
-     * hide it. True by default. */
-    showOptReqLabel?: boolean;
+    /** Whether or not to display the "(Required)" text in the label text.
+     * True by default. */
+    showRequiredLabel?: boolean;
     /** The amount to increase or decrease when using the number type. */
     step?: number;
     /** FOR INTERNAL DS USE ONLY: the input variant to display. */
@@ -62,5 +62,5 @@ export declare type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
  * element. All types will render an accessible `Label` component and an
  * optional `HelperErrorText` component.
  */
-declare const TextInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInputRefType>>;
+export declare const TextInput: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInputRefType>>, {}>;
 export default TextInput;

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

@@ -12,7 +12,7 @@ export interface ToggleProps {
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
+    id: string;
     /** Optional string to populate the HelperErrorText for the error state
      * when `isInvalid` is true. */
     invalidText?: HelperErrorTextType;
@@ -28,8 +28,7 @@ export interface ToggleProps {
     isInvalid?: boolean;
     /** Adds the 'required' attribute to the input when true. */
     isRequired?: boolean;
-    /** The toggle's label. This will serve as the text content for a `<label>`
-     * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
+    /** The toggle's label. This will serve as the text content for the `<label>` element */
     labelText: string;
     /** The name prop indicates the `Toggle`'s form element name. If none is
      * specified, 'default' will be used. */
@@ -43,5 +42,5 @@ export declare const onChangeDefault: () => void;
 /**
  * Component that renders Chakra's `Switch` component along with NYPL defaults.
  */
-declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Toggle: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>, {}>;
 export default Toggle;

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

@@ -33,4 +33,5 @@ export interface VideoPlayerProps {
     /** Required. Used to specify which video service is being used. */
     videoType?: VideoPlayerTypes;
 }
-export default function VideoPlayer(props: React.PropsWithChildren<VideoPlayerProps>): JSX.Element;
+export declare const VideoPlayer: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<VideoPlayerProps>) => JSX.Element, {}>;
+export default VideoPlayer;