@nypl/design-system-react-components 1.5.4 → 1.6.0-vite-rc-2

package/dist/{components → src/components}/SkeletonLoader/SkeletonLoader.d.ts

@@ -1,41 +1,42 @@
-import React from "react";
-import { LayoutTypes } from "../../helpers/types";
-export declare type SkeletonLoaderImageRatios = "landscape" | "portrait" | "square";
-export interface SkeletonLoaderProps {
-    /** Additional class name for the Skeleton component. */
-    className?: string;
-    /** Optional numeric value to control the number of lines for content
-     * placeholder; default value is `3`. */
-    contentSize?: number;
-    /** Optional numeric value to control the number of lines for heading
-     * placeholder; default value is `1`. */
-    headingSize?: number;
-    /** Optional value to control the aspect ratio of the image placeholder;
-     * default value is `"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 `"column"`. */
-    layout?: LayoutTypes;
-    /** Optional boolean value to control visibility of button placeholder. */
-    showButton?: boolean;
-    /** Optional boolean value to control visibility of content placeholder. */
-    showContent?: boolean;
-    /** Optional boolean value to control visibility of heading placeholder. */
-    showHeading?: boolean;
-    /** Optional boolean value to control visibility of image placeholder. */
-    showImage?: boolean;
-    /** Optional width value. This value should be entered with the same
-     * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`).
-     * If omitted, the skeleton loader will have a default width of 100%. */
-    width?: string;
-}
-/**
- * The `SkeletonLoader` component renders a placeholder to be used while
- * dynamic content is loading.
- */
-export declare const SkeletonLoader: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SkeletonLoaderProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default SkeletonLoader;
+import React from "react";
+import { LayoutTypes } from "../../helpers/types";
+export declare const skeletonLoaderImageRatiosArray: readonly ["landscape", "portrait", "square"];
+export type SkeletonLoaderImageRatios = typeof skeletonLoaderImageRatiosArray[number];
+export interface SkeletonLoaderProps {
+    /** Additional class name for the Skeleton component. */
+    className?: string;
+    /** Optional numeric value to control the number of lines for content
+     * placeholder; default value is `3`. */
+    contentSize?: number;
+    /** Optional numeric value to control the number of lines for heading
+     * placeholder; default value is `1`. */
+    headingSize?: number;
+    /** Optional value to control the aspect ratio of the image placeholder;
+     * default value is `"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 `"column"`. */
+    layout?: LayoutTypes;
+    /** Optional boolean value to control visibility of button placeholder. */
+    showButton?: boolean;
+    /** Optional boolean value to control visibility of content placeholder. */
+    showContent?: boolean;
+    /** Optional boolean value to control visibility of heading placeholder. */
+    showHeading?: boolean;
+    /** Optional boolean value to control visibility of image placeholder. */
+    showImage?: boolean;
+    /** Optional width value. This value should be entered with the same
+     * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`).
+     * If omitted, the skeleton loader will have a default width of 100%. */
+    width?: string;
+}
+/**
+ * The `SkeletonLoader` component renders a placeholder to be used while
+ * dynamic content is loading.
+ */
+export declare const SkeletonLoader: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SkeletonLoaderProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default SkeletonLoader;

package/dist/{components → src/components}/SkipNavigation/SkipNavigation.d.ts

@@ -1,19 +1,19 @@
-import React from "react";
-interface SkipNavigationProps {
-    /** Additional CSS class name to render in the `nav` element. */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-    /** The anchor target for the main skip link. The default is "#mainContent". */
-    target?: string;
-}
-/**
- * SkipNavigation is a component that is used to provide a navigational list of
- * links. The first link is used to skip to the main content of the page using
- * the `#mainContent` id, and the second link points to accessibility information
- * on NYPL.org. These links are visually hidden but can be read by screenreaders.
- */
-export declare const SkipNavigation: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SkipNavigationProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default SkipNavigation;
+import React from "react";
+interface SkipNavigationProps {
+    /** Additional CSS class name to render in the `nav` element. */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** The anchor target for the main skip link. The default is "#mainContent". */
+    target?: string;
+}
+/**
+ * SkipNavigation is a component that is used to provide a navigational list of
+ * links. The first link is used to skip to the main content of the page using
+ * the `#mainContent` id, and the second link points to accessibility information
+ * on NYPL.org. These links are visually hidden but can be read by screenreaders.
+ */
+export declare const SkipNavigation: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SkipNavigationProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default SkipNavigation;

package/dist/{components → src/components}/Slider/Slider.d.ts

@@ -1,65 +1,65 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export interface SliderProps {
-    /** Additional class name for the Slider component. */
-    className?: string;
-    /** The initial value for the single `Slider` or an array of two number
-     * values for the `isRangeSlider` case. */
-    defaultValue?: number | number[];
-    /** Optional string to populate the HelperErrorText for standard state */
-    helperText?: HelperErrorTextType;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id: string;
-    /** Optional string to populate the `HelperErrorText` for the error state
-     * when `isInvalid` is true. */
-    invalidText?: HelperErrorTextType;
-    /** Adds the 'disabled' state to the slider and text input(s) when true. */
-    isDisabled?: boolean;
-    /** Adds the 'invalid' state to the slider and text input(s) when true. */
-    isInvalid?: boolean;
-    /** Offers the ability to render a slider with one value or
-     * a range slider with two values. */
-    isRangeSlider?: boolean;
-    /** Adds the 'required' attribute to the input(s) when true. */
-    isRequired?: boolean;
-    /** The `Slider`'s label. In the default single slider, this will be linked to
-     * the only `TextInput` component. In the range slider, this will be linked to
-     * the first `TextInput` component. If `showLabel` is false, then this value
-     * will be set in the `Slider`'s `aria-label` attribute. */
-    labelText: string;
-    /** Maximum value allowed. */
-    max?: number;
-    /** Minimum value allowed. */
-    min?: number;
-    /** The name prop indicates into which form this component belongs to. */
-    name?: string;
-    /** Callback function that gets the value(s) selected. */
-    onChange?: (val: number | number[]) => void;
-    /** Callback function when the user is done selecting a new value. */
-    onChangeEnd?: (val: number | number[]) => void;
-    /** Offers the ability to hide the `TextInput` boxes. */
-    showBoxes?: boolean;
-    /** Offers the ability to hide the helper/invalid text. */
-    showHelperInvalidText?: boolean;
-    /** 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). */
-    step?: number;
-    /** The value(s) to programmatically update the Slider or RangeSlider. */
-    value?: number | number[];
-}
-/**
- * The `Slider` component renders a singular value slider or a range slider
- * 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 declare const Slider: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SliderProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default Slider;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export interface SliderProps {
+    /** Additional class name for the Slider component. */
+    className?: string;
+    /** The initial value for the single `Slider` or an array of two number
+     * values for the `isRangeSlider` case. */
+    defaultValue?: number | number[];
+    /** Optional string to populate the HelperErrorText for standard state */
+    helperText?: HelperErrorTextType;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id: string;
+    /** Optional string to populate the `HelperErrorText` for the error state
+     * when `isInvalid` is true. */
+    invalidText?: HelperErrorTextType;
+    /** Adds the 'disabled' state to the slider and text input(s) when true. */
+    isDisabled?: boolean;
+    /** Adds the 'invalid' state to the slider and text input(s) when true. */
+    isInvalid?: boolean;
+    /** Offers the ability to render a slider with one value or
+     * a range slider with two values. */
+    isRangeSlider?: boolean;
+    /** Adds the 'required' attribute to the input(s) when true. */
+    isRequired?: boolean;
+    /** The `Slider`'s label. In the default single slider, this will be linked to
+     * the only `TextInput` component. In the range slider, this will be linked to
+     * the first `TextInput` component. If `showLabel` is false, then this value
+     * will be set in the `Slider`'s `aria-label` attribute. */
+    labelText: string;
+    /** Maximum value allowed. */
+    max?: number;
+    /** Minimum value allowed. */
+    min?: number;
+    /** The name prop indicates into which form this component belongs to. */
+    name?: string;
+    /** Callback function that gets the value(s) selected. */
+    onChange?: (val: number | number[]) => void;
+    /** Callback function when the user is done selecting a new value. */
+    onChangeEnd?: (val: number | number[]) => void;
+    /** Offers the ability to hide the `TextInput` boxes. */
+    showBoxes?: boolean;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** 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). */
+    step?: number;
+    /** The value(s) to programmatically update the Slider or RangeSlider. */
+    value?: number | number[];
+}
+/**
+ * The `Slider` component renders a singular value slider or a range slider
+ * 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 declare const Slider: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SliderProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default Slider;

package/dist/{components → src/components}/StatusBadge/StatusBadge.d.ts

@@ -1,18 +1,19 @@
-import React from "react";
-export declare type StatusBadgeTypes = "low" | "medium" | "high";
-export interface StatusBadgeProps {
-    /** Additional class for the component */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-    /** Level of the status badge. Defaults to `"low"`. */
-    level?: StatusBadgeTypes;
-}
-/**
- * The `StatusBadge` component is used to display a visual badge for three
- * different status levels.
- */
-export declare const StatusBadge: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<StatusBadgeProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default StatusBadge;
+import React from "react";
+export declare const statusBadgeTypeArray: readonly ["low", "medium", "high"];
+export type StatusBadgeTypes = typeof statusBadgeTypeArray[number];
+export interface StatusBadgeProps {
+    /** Additional class for the component */
+    className?: string;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** Level of the status badge. Defaults to `"low"`. */
+    level?: StatusBadgeTypes;
+}
+/**
+ * The `StatusBadge` component is used to display a visual badge for three
+ * different status levels.
+ */
+export declare const StatusBadge: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<StatusBadgeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default StatusBadge;

package/dist/{components → src/components}/StructuredContent/StructuredContent.d.ts

@@ -1,30 +1,30 @@
-import React from "react";
-import { ComponentImageProps } from "../Image/Image";
-export declare type StructuredContentImagePosition = "left" | "right" | "center";
-interface StructuredContentImageProps extends ComponentImageProps {
-    /** Optional value to control the positioning of the internal `Image` component.
-     * Defaults to `"left"`. */
-    position?: StructuredContentImagePosition;
-}
-export interface StructuredContentProps {
-    /** Optional value to set the text for the callout heading text. */
-    calloutText?: string;
-    /** Additional class name for the `StructuredContent` component. */
-    className?: string;
-    /** Optional value to set the text for the main heading text. */
-    headingText?: string;
-    /** ID that other components can cross reference for accessibility purposes. */
-    id?: string;
-    /** Object used to create and render the `Image` component. */
-    imageProps?: StructuredContentImageProps;
-    /** Required value to set the text for the body content. */
-    bodyContent: string | JSX.Element;
-}
-/**
- * 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<React.ForwardRefExoticComponent<StructuredContentProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>, {}>;
-export default StructuredContent;
+import React from "react";
+import { ComponentImageProps } from "../Image/Image";
+export type StructuredContentImagePosition = "left" | "right" | "center";
+interface StructuredContentImageProps extends ComponentImageProps {
+    /** Optional value to control the positioning of the internal `Image` component.
+     * Defaults to `"left"`. */
+    position?: StructuredContentImagePosition;
+}
+export interface StructuredContentProps {
+    /** Optional value to set the text for the callout heading text. */
+    calloutText?: string;
+    /** Additional class name for the `StructuredContent` component. */
+    className?: string;
+    /** Optional value to set the text for the main heading text. */
+    headingText?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Object used to create and render the `Image` component. */
+    imageProps?: StructuredContentImageProps;
+    /** Required value to set the text for the body content. */
+    bodyContent: string | JSX.Element;
+}
+/**
+ * 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<React.ForwardRefExoticComponent<StructuredContentProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>, {}>;
+export default StructuredContent;