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

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

@@ -1,43 +1,43 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export interface RadioProps {
-    /** Additional class name. */
-    className?: string;
-    /** Optional string to populate the HelperErrorText for the 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;
-    /** When using the Radio as a "controlled" form element, you can specify the
-     * `Radio`'s checked state using this prop. You must also pass an onChange prop.
-     * 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. */
-    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. */
-    isInvalid?: boolean;
-    /** Adds the 'required' attribute to the input when true. */
-    isRequired?: boolean;
-    /** The radio button's label. This will serve as the text content for the
-     * `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel`
-     * is false. */
-    labelText: string | JSX.Element;
-    /** Used to reference the input element in forms. */
-    name?: string;
-    /** Should be passed along with `isChecked` for controlled components. */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Offers the ability to hide the helper/invalid text. */
-    showHelperInvalidText?: boolean;
-    /** Offers the ability to show the radio's label onscreen or hide it. Refer
-     * to the `labelText` property for more information. */
-    showLabel?: boolean;
-    /** Populates the value of the input. */
-    value?: string;
-}
-export declare const Radio: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>, {}>;
-export default Radio;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export interface RadioProps {
+    /** Additional class name. */
+    className?: string;
+    /** Optional string to populate the HelperErrorText for the 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;
+    /** When using the Radio as a "controlled" form element, you can specify the
+     * `Radio`'s checked state using this prop. You must also pass an onChange prop.
+     * 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. */
+    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. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The radio button's label. This will serve as the text content for the
+     * `<label>` element if `showlabel` is true, or an "aria-label" if `showLabel`
+     * is false. */
+    labelText: string | JSX.Element;
+    /** Used to reference the input element in forms. */
+    name?: string;
+    /** Should be passed along with `isChecked` for controlled components. */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the radio's label onscreen or hide it. Refer
+     * to the `labelText` property for more information. */
+    showLabel?: boolean;
+    /** Populates the value of the input. */
+    value?: string;
+}
+export declare const Radio: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>, {}>;
+export default Radio;

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

@@ -1,51 +1,51 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { LayoutTypes } from "../../helpers/types";
-export interface RadioGroupProps {
-    /** Additional class name. */
-    className?: string;
-    /** Populates the initial value of the input */
-    defaultValue?: string;
-    /** 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 error state */
-    invalidText?: HelperErrorTextType;
-    /** Adds the 'disabled' prop to the input when true. */
-    isDisabled?: boolean;
-    /** Set's the `Radio`s' wrapper to be full width. */
-    isFullWidth?: boolean;
-    /** Adds the 'aria-invalid' attribute to the input and
-     * sets the error state when true. */
-    isInvalid?: boolean;
-    /** Adds the 'required' attribute to the input when true. */
-    isRequired?: boolean;
-    /** The radio group label displayed in a `legend` element if `showlabel` is
-     * true, or an "aria-label" if `showLabel` is false. */
-    labelText: string;
-    /** Renders the Radio buttons in a row or column (default). */
-    layout?: LayoutTypes;
-    /** The `name` prop indicates the form group for all the Radio children. */
-    name: string;
-    /** The action to perform on the `<input>`'s onChange function  */
-    onChange?: (value: string) => void;
-    /** 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;
-}
-/**
- * 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<HTMLDivElement>>, {}>;
-export default RadioGroup;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { LayoutTypes } from "../../helpers/types";
+export interface RadioGroupProps {
+    /** Additional class name. */
+    className?: string;
+    /** Populates the initial value of the input */
+    defaultValue?: string;
+    /** 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 error state */
+    invalidText?: HelperErrorTextType;
+    /** Adds the 'disabled' prop to the input when true. */
+    isDisabled?: boolean;
+    /** Set's the `Radio`s' wrapper to be full width. */
+    isFullWidth?: boolean;
+    /** Adds the 'aria-invalid' attribute to the input and
+     * sets the error state when true. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The radio group label displayed in a `legend` element if `showlabel` is
+     * true, or an "aria-label" if `showLabel` is false. */
+    labelText: string;
+    /** Renders the Radio buttons in a row or column (default). */
+    layout?: LayoutTypes;
+    /** The `name` prop indicates the form group for all the Radio children. */
+    name: string;
+    /** The action to perform on the `<input>`'s onChange function  */
+    onChange?: (value: string) => void;
+    /** 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;
+}
+/**
+ * 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<HTMLDivElement>>, {}>;
+export default RadioGroup;

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

@@ -1,58 +1,58 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-import { SelectProps as InitialSelectProps } from "../Select/Select";
-import { InputProps as InitialInputProps } from "../TextInput/TextInput";
-interface SelectOptionsProps {
-    text: string;
-    value: string;
-}
-export declare type SelectProps = Partial<Pick<InitialSelectProps, "id" | "labelText" | "name" | "onChange" | "value">> & {
-    optionsData: SelectOptionsProps[];
-};
-export declare type TextInputProps = Pick<InitialInputProps, "labelText" | "name"> & Partial<Pick<InitialInputProps, "defaultValue" | "id" | "isClearable" | "isClearableCallback" | "max" | "maxLength" | "min" | "onChange" | "pattern" | "placeholder" | "value">>;
-export interface SearchBarProps {
-    /** Adds 'action' property to the `form` element. */
-    action?: string;
-    /** The onClick callback function for the `Button` component. */
-    buttonOnClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
-    /** A class name for the `form` element. */
-    className?: string;
-    /** Optional string for the SearchBar's description above the component. */
-    descriptionText?: string;
-    /** Optional string for the SearchBar's heading text above the component. */
-    headingText?: string;
-    /** 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;
-    /** Optional string to populate the `HelperErrorText` for the error state
-     * when `isInvalid` is true. */
-    invalidText?: HelperErrorTextType;
-    /** Sets children form components in the disabled state. */
-    isDisabled?: boolean;
-    /** Sets children form components in the error state. */
-    isInvalid?: boolean;
-    /** Sets children form components in the required state. */
-    isRequired?: boolean;
-    /** Populates the `aria-label` attribute on the form element. */
-    labelText: string;
-    /** Adds 'method' property to the `form` element. */
-    method?: string;
-    /** Sets the `Button` variant type to `noBrand` when true;
-     * false by default which sets the type to `primary`. */
-    noBrandButtonType?: boolean;
-    /** Handler function when the form is submitted. */
-    onSubmit: (event: React.FormEvent) => void;
-    /** Required props to render a `Select` element. */
-    selectProps?: SelectProps | undefined;
-    /** Custom input element to render instead of a `TextInput` element. */
-    textInputElement?: JSX.Element;
-    /** Required props to render a `TextInput` element. */
-    textInputProps?: TextInputProps | undefined;
-}
-/**
- * Renders a wrapper `form` element to be used with `Select` (optional),
- * `Input`, and `Button` components together.
- */
-export declare const SearchBar: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLDivElement>>, {}>;
-export default SearchBar;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+import { SelectProps as InitialSelectProps } from "../Select/Select";
+import { InputProps as InitialInputProps } from "../TextInput/TextInput";
+interface SelectOptionsProps {
+    text: string;
+    value: string;
+}
+export type SelectProps = Partial<Pick<InitialSelectProps, "id" | "labelText" | "name" | "onChange" | "value">> & {
+    optionsData: SelectOptionsProps[];
+};
+export type TextInputProps = Pick<InitialInputProps, "labelText" | "name"> & Partial<Pick<InitialInputProps, "defaultValue" | "id" | "isClearable" | "isClearableCallback" | "max" | "maxLength" | "min" | "onChange" | "pattern" | "placeholder" | "value">>;
+export interface SearchBarProps {
+    /** Adds 'action' property to the `form` element. */
+    action?: string;
+    /** The onClick callback function for the `Button` component. */
+    buttonOnClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** A class name for the `form` element. */
+    className?: string;
+    /** Optional string for the SearchBar's description above the component. */
+    descriptionText?: string;
+    /** Optional string for the SearchBar's heading text above the component. */
+    headingText?: string;
+    /** 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;
+    /** Optional string to populate the `HelperErrorText` for the error state
+     * when `isInvalid` is true. */
+    invalidText?: HelperErrorTextType;
+    /** Sets children form components in the disabled state. */
+    isDisabled?: boolean;
+    /** Sets children form components in the error state. */
+    isInvalid?: boolean;
+    /** Sets children form components in the required state. */
+    isRequired?: boolean;
+    /** Populates the `aria-label` attribute on the form element. */
+    labelText: string;
+    /** Adds 'method' property to the `form` element. */
+    method?: string;
+    /** Sets the `Button` variant type to `noBrand` when true;
+     * false by default which sets the type to `primary`. */
+    noBrandButtonType?: boolean;
+    /** Handler function when the form is submitted. */
+    onSubmit: (event: React.FormEvent) => void;
+    /** Required props to render a `Select` element. */
+    selectProps?: SelectProps | undefined;
+    /** Custom input element to render instead of a `TextInput` element. */
+    textInputElement?: JSX.Element;
+    /** Required props to render a `TextInput` element. */
+    textInputProps?: TextInputProps | undefined;
+}
+/**
+ * Renders a wrapper `form` element to be used with `Select` (optional),
+ * `Input`, and `Button` components together.
+ */
+export declare const SearchBar: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLDivElement>>, {}>;
+export default SearchBar;

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

@@ -1,57 +1,57 @@
-import React from "react";
-import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-export declare type SelectTypes = "default" | "searchbar";
-export declare type LabelPositions = "default" | "inline";
-export interface SelectProps {
-    /** A class name for the `div` parent element. */
-    className?: string;
-    /** Optional string to populate the `HelperErrorText` for the 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` and `aria-disabled` attributes to the select when true */
-    isDisabled?: boolean;
-    /** Adds the `aria-invalid` attribute to the select when true. This also makes
-     * the color theme "NYPL error" red for the select and text. */
-    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`. */
-    labelText: string;
-    /** Used to reference the select element in forms. */
-    name: string;
-    /** The callback function to get the selected value.
-     * Should be passed along with `value` for controlled components. */
-    onChange?: (event: React.FormEvent) => void;
-    /** Placeholder text in the select element. */
-    placeholder?: string;
-    /** The variant to display. */
-    selectType?: SelectTypes;
-    /** Offers the ability to hide the helper/invalid text. */
-    showHelperInvalidText?: boolean;
-    /** 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)" 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;
-}
-/**
- * Component that renders Chakra's `Select` component along with an accessible
- * `Label` and optional `HelperErrorText` component.
- */
-export declare const Select: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SelectProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLSelectElement>>, {}>;
-export default Select;
+import React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+export type SelectTypes = "default" | "searchbar";
+export type LabelPositions = "default" | "inline";
+export interface SelectProps {
+    /** A class name for the `div` parent element. */
+    className?: string;
+    /** Optional string to populate the `HelperErrorText` for the 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` and `aria-disabled` attributes to the select when true */
+    isDisabled?: boolean;
+    /** Adds the `aria-invalid` attribute to the select when true. This also makes
+     * the color theme "NYPL error" red for the select and text. */
+    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`. */
+    labelText: string;
+    /** Used to reference the select element in forms. */
+    name: string;
+    /** The callback function to get the selected value.
+     * Should be passed along with `value` for controlled components. */
+    onChange?: (event: React.FormEvent) => void;
+    /** Placeholder text in the select element. */
+    placeholder?: string;
+    /** The variant to display. */
+    selectType?: SelectTypes;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** 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)" 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;
+}
+/**
+ * Component that renders Chakra's `Select` component along with an accessible
+ * `Label` and optional `HelperErrorText` component.
+ */
+export declare const Select: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SelectProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSelectElement>>, {}>;
+export default Select;

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

@@ -1,41 +1,41 @@
-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 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;

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;