@nypl/design-system-react-components 1.0.1 → 1.0.3

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+export declare type NotificationTypes = "standard" | "announcement" | "warning";
+interface BaseProps {
+    /** Optional prop to control text alignment in `NotificationContent` */
+    alignText?: boolean;
+    /** Optional custom `Icon` that will override the default `Icon`. */
+    icon?: JSX.Element;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Optional prop to control horizontal alignment of the `Notification` content */
+    isCentered?: boolean;
+    /** Optional prop to control the coloring of the `Notification` text and the
+     * visibility of an applicable icon. */
+    notificationType?: NotificationTypes;
+}
+declare type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
+declare type BasePropsWithoutIsCentered = Omit<BaseProps, "isCentered">;
+export interface NotificationProps extends BasePropsWithoutAlignText {
+    /** Label used to describe the `Notification`'s aside HTML element. */
+    ariaLabel?: string;
+    /** Additional `className` to add.  */
+    className?: string;
+    /** Optional prop to control whether a `Notification` can be dismissed
+     * (closed) by a user. */
+    dismissible?: boolean;
+    /** Optional custom `Icon` that will override the default `Icon`. */
+    icon?: JSX.Element;
+    /** Optional prop to control the margin around the `Notification` component. */
+    noMargin?: boolean;
+    /** Content to be rendered in a `NotificationContent` component. */
+    notificationContent: string | JSX.Element;
+    /** Content to be rendered in a `NotificationHeading` component. */
+    notificationHeading?: string;
+    /** Prop to display the `Notification` icon. Defaults to `true`. */
+    showIcon?: boolean;
+}
+/**
+ * NotificationHeading child-component.
+ */
+export declare const NotificationHeading: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<BasePropsWithoutAlignText>) => JSX.Element, {}>;
+/**
+ * NotificationContent child-component.
+ */
+export declare const NotificationContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<BasePropsWithoutIsCentered>) => JSX.Element, {}>;
+/**
+ * Component used to present users with three different levels of notifications:
+ * standard, announcement, and warning.
+ */
+export declare const Notification: import("@chakra-ui/react").ChakraComponent<(props: NotificationProps) => JSX.Element, {}>;
+export default Notification;

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export interface PaginationProps {
+    /** Additional className. */
+    className?: string;
+    /** The currentPage can be used to programatically force the selected page to change
+     * without the user explicitly requesting it – for example, if the user should be
+     * brought back to the first page of a set of results after a new search. */
+    currentPage?: number;
+    /** The callback function that takes a page number and returns a string
+     * to use for a link's `href` attribute. This is used when the current
+     * page should refresh when navigating. */
+    getPageHref?: undefined | ((pageNumber: number) => string);
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** The initially selected page (default value is 1). */
+    initialPage?: number;
+    /** The callback function called when an item is selected and the current
+     * page should not refresh. */
+    onPageChange?: (selected: number) => void;
+    /** The total number of pages. */
+    pageCount: number;
+}
+/**
+ * A component that provides a navigational list of page items.
+ */
+export declare const Pagination: import("@chakra-ui/react").ChakraComponent<(props: PaginationProps) => JSX.Element, {}>;
+export default Pagination;

package/dist/components/Placeholder/Placeholder.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface PlaceholderProps {
+    /** Modifier string for the classname. */
+    variant?: string;
+}
+/** Creates a gray box with an editable string for dropping in spaces
+ * within components or on templates where a component will be but
+ * that hasn't been created yet
+ */
+export default function Placeholder({ children, variant, }: React.PropsWithChildren<PlaceholderProps>): JSX.Element;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare type ProgressIndicatorSizes = "default" | "small";
+export declare type ProgressIndicatorTypes = "circular" | "linear";
+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;
+    /** Whether the `ProgressIndicator` should be linear or circular. */
+    indicatorType?: ProgressIndicatorTypes;
+    /** Whether the progress animation should display because the `value` prop is
+     * not known. When this is set to `true`, the `value` prop will be ignored. */
+    isIndeterminate?: boolean;
+    /** The text to display in an HTML `label` element. */
+    labelText: string;
+    /** Visually show or hide the label text. When set to `false`, then the label
+     * text will be added to the parent component as its `aria-label` attribute. */
+    showLabel?: boolean;
+    /** The size of the linear or circular progress. */
+    size?: ProgressIndicatorSizes;
+    /** A number between 0 to 100 that defines the progress' value. */
+    value?: number;
+}
+/**
+ * A component that displays a progress status for any task that takes a long
+ * time to complete or consists of multiple steps. Examples include downloading,
+ * uploading, or processing.
+ */
+export declare const ProgressIndicator: import("@chakra-ui/react").ChakraComponent<(props: ProgressIndicatorProps) => JSX.Element, {}>;
+export default ProgressIndicator;

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

@@ -0,0 +1,43 @@
+import * as 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/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,51 @@
+import * as 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<HTMLInputElement>>, {}>;
+export default RadioGroup;

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

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
+interface BaseProps {
+    labelText: string;
+    name: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    value?: string;
+}
+export interface SelectProps extends BaseProps {
+    optionsData: string[];
+    onChange?: (event: React.FormEvent) => void;
+}
+export interface TextInputProps extends BaseProps {
+    placeholder?: string;
+}
+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<(props: SearchBarProps) => JSX.Element, {}>;
+export default SearchBar;

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

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

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

@@ -0,0 +1,39 @@
+import * as 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<(props: React.PropsWithChildren<SkeletonLoaderProps>) => JSX.Element, {}>;
+export default SkeletonLoader;

package/dist/components/SkipNavigation/SkipNavigation.d.ts

@@ -0,0 +1,17 @@
+import * as 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<(props: React.PropsWithChildren<SkipNavigationProps>) => JSX.Element, {}>;
+export default SkipNavigation;

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

@@ -0,0 +1,59 @@
+import * as 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;
+    /** 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 `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<(props: React.PropsWithChildren<SliderProps>) => JSX.Element, {}>;
+export default Slider;

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

@@ -0,0 +1,16 @@
+import * as 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<(props: React.PropsWithChildren<StatusBadgeProps>) => JSX.Element, {}>;
+export default StatusBadge;

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

@@ -0,0 +1,28 @@
+import * as 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<(props: React.PropsWithChildren<StructuredContentProps>) => JSX.Element, {}>;
+export default StructuredContent;

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface ColorCardProps {
+    /** backgroundColor of the color card */
+    backgroundColor: string;
+    /** name of the CSS var */
+    colorName: string;
+}
+/**
+ * ColorCard
+ * Component only used for Storybook.
+ */
+export default function ColorCard(props: React.PropsWithChildren<ColorCardProps>): JSX.Element;

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+export interface TableProps {
+    /** Additional class name for the `Table` component. */
+    className?: string;
+    /** Array of string values used to populate the `Table` column headers.
+     * For improved accessibility, column headers are required. */
+    columnHeaders: string[];
+    /** Hex value to set the background color of the column headers. */
+    columnHeadersBackgroundColor?: string;
+    /** Hex value to set the text color of the column headers. */
+    columnHeadersTextColor?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** If true, a border will be displayed between each row in the `Table`
+     * component. The default value is false. */
+    showRowDividers?: boolean;
+    /** Two-dimensional array used to populate the table rows. */
+    tableData: (string | JSX.Element)[][];
+    /** Displays `Table` title element. */
+    titleText?: string;
+    /** If true, the first cell of each row in the `Table` component will be
+     * visually styled as a header. The default value is false */
+    useRowHeaders?: boolean;
+}
+/**
+ * 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 default Table;

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

@@ -0,0 +1,26 @@
+import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
+import * as React from "react";
+export interface TabsDataProps {
+    label: string;
+    content: string | React.ReactNode;
+}
+export interface TabsProps {
+    /** The index of the tab to display for controlled situations. */
+    defaultIndex?: number;
+    /** ID that other components can cross reference for accessibility purposes */
+    id?: string;
+    /** The callback function invoked on every tab change event. */
+    onChange?: (index: number) => any;
+    /** Array of data to display */
+    tabsData?: TabsDataProps[];
+    /** Render a hash in the url for each tab. Only available when data is
+     * passed through the `data` props. */
+    useHash?: boolean;
+}
+/**
+ * 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 { TabList, Tab, TabPanels, TabPanel };
+export default Tabs;