@progressiveui/react 1.22.0

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

@@ -0,0 +1,92 @@
+interface PaginationProps {
+    /**
+     * The description for the backward icon.
+     */
+    backwardText?: string;
+    /**
+     * The CSS class names.
+     */
+    className?: string;
+    /**
+     * The function returning a translatable text showing where the current page is,
+     * in a manner of the range of items.
+     */
+    itemRangeText?: (min: number, max: number, total: number) => string;
+    /**
+     * The description for the forward icon.
+     */
+    forwardText?: string;
+    /**
+     * The unique ID of this component instance.
+     */
+    id?: string | number;
+    /**
+     * The translatable text indicating the number of items per page.
+     */
+    itemsPerPageText?: string;
+    /**
+     * A variant of `itemsPerPageText`, with a sign indicating that the number follows, e.g. ':'.
+     */
+    itemsPerPageFollowsText?: string;
+    /**
+     * A variant of `itemRangeText`, used if the total number of items is unknown.
+     */
+    itemText?: (min: number, max: number) => string;
+    /**
+     * The callback function called when the current page changes.
+     */
+    onChange?: (params: {
+        page: number;
+        pageSize: number;
+    }) => void;
+    /**
+     * A function returning PII showing where the current page is.
+     */
+    pageRangeText?: (current: number, total: number) => string;
+    /**
+     * The translatable text showing the current page.
+     */
+    pageText?: (page: number) => string;
+    /**
+     * The choices for `pageSize`.
+     */
+    pageSizes: number[];
+    /**
+     * `true` if ture the pageSizes should be not visible.
+     */
+    pageSizesDisabled?: boolean;
+    /**
+     * The total number of items.
+     */
+    totalItems?: number;
+    /**
+     * `true` if the backward/forward buttons should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The current page.
+     */
+    page?: number;
+    /**
+     * The number dictating how many items a page contains.
+     */
+    pageSize?: number;
+    pageNumberText?: string;
+    /**
+     * `true` if the total number of items is unknown.
+     */
+    pagesUnknown?: boolean;
+    /**
+     * `true` if the current page should be the last page.
+     */
+    isLastPage?: boolean;
+    /**
+     * `true` if the select box to change the page should be disabled.
+     */
+    pageInputDisabled?: boolean;
+}
+declare const Pagination: {
+    (props: PaginationProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Pagination;

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

@@ -0,0 +1 @@
+export { default } from "./Pagination";

package/lib/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { InputProps } from "../Input";
+interface RadioButtonProps extends InputProps, Omit<React.ComponentPropsWithRef<"input">, "onChange"> {
+    /**
+     * Specify whether the <RadioButton> is currently checked
+     */
+    checked?: boolean;
+    /**
+     * Specify whether the <RadioButton> should be checked by default
+     */
+    defaultChecked?: boolean;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide an optional `onChange` hook that is called each time the value of
+     * the underlying `input` changes
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string | number, name?: string) => void;
+    /**
+     * Specify the value of the <RadioButton>
+     */
+    value: string | number;
+}
+declare const RadioButton: React.FC<RadioButtonProps>;
+export default RadioButton;

package/lib/dist/components/RadioButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./RadioButton";
+export { default } from "./RadioButton";

package/lib/dist/components/ReadMore/ReadMore.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+export interface ReadMoreProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Specify an optional className to be applied to the wrapper node
+     */
+    className?: string;
+    /**
+     * The content of the collapsed content (optional)
+     */
+    collapsed?: boolean;
+    /**
+     * A custom link for collapsing
+     */
+    collapseLink?: React.ReactNode;
+    /**
+     * Custom text for collapsing
+     */
+    collapseText?: React.ReactNode;
+    /**
+     * Disable the scroll into view on expanding
+     */
+    disableAutoscroll?: boolean;
+    /**
+     * A custom link for expanding
+     */
+    expandLink?: React.ReactNode;
+    /**
+     * Custom text for expanding
+     */
+    expandText?: React.ReactNode;
+    /**
+     * Enables the fade effect when the content is collapsed (optional) when enabled collapsed will be ignored
+     */
+    fade?: boolean;
+    /**
+     * The maximum height when the content is collapsed (optional)
+     */
+    maxHeight?: number;
+}
+/** ReadMore component is a simple way to keep longer content from cluttering up your page, giving you more control over how much content is displayed to visitor */
+declare function ReadMore({ collapseLink, collapseText, children, collapsed, className, disableAutoscroll, expandLink, expandText, fade, maxHeight, }: ReadMoreProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ReadMore {
+    var displayName: string;
+}
+export default ReadMore;

package/lib/dist/components/ReadMore/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./ReadMore";

package/lib/dist/components/Search/Search.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { InputProps } from "../Input";
+interface SearchProps extends InputProps, React.ComponentPropsWithRef<"input"> {
+    defaultValue?: string | number;
+    /**
+     * Specify an optional className to be applied to the form-item node
+     */
+    formItemClassName?: string;
+    inputWrapperClassName?: string;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    children?: React.ReactNode | string;
+    light?: boolean;
+    /**
+     * The text for the close Button
+     */
+    closeButtonLabelText?: string;
+    /**
+     * Specify if the control should be disabled, or not
+     */
+    disabled?: boolean;
+    id?: string;
+    hideControls?: boolean;
+    /**
+     * Specify a style for the search input
+     */
+    kind?: "large" | "small" | "main" | "light" | "banner";
+    /**
+     * The new value is available first arg 'searchValue' and evt object if needed is on second arg.
+     * i.e.
+     * const handleChange = (searchValue, evt) => {
+     * console.log("searchValue", searchValue); // a string
+     * console.log("evt", evt); // the whole event object
+     * }
+     */
+    onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: string) => void;
+    onSearchIconClick?: () => void;
+    /**
+     * `true` to use the small version of Search
+     */
+    small?: boolean;
+    value?: string;
+    className?: string;
+    rounded?: boolean;
+}
+/** Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation. */
+declare const Search: React.FC<SearchProps>;
+export default Search;

package/lib/dist/components/Search/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Search';

package/lib/dist/components/SecondaryNavigation/SecondaryNavigation.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+/** The SecondaryNavigation shows the page title and and optional tab navigation. */
+export interface SecondaryNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    /**
+     * Specify the max-width on desktop devices (same as \`Wrapper\` component)
+     */
+    pageWidth?: "sm" | "md" | "lg" | "full";
+    /**
+     * The CSS class name to be placed on the wrapping element
+     */
+    wrapperClassName?: string;
+    id?: string;
+    additional?: React.ReactNode;
+}
+export declare function SecondaryNavigation({ additional, children, className, id, pageWidth, ...other }: SecondaryNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SecondaryNavigation {
+    var displayName: string;
+}

package/lib/dist/components/SecondaryNavigation/SecondaryNavigationTitle.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface SecondaryNavigationTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+export declare function SecondaryNavigationTitle({ className, children, }: SecondaryNavigationTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SecondaryNavigationTitle {
+    var displayName: string;
+}

package/lib/dist/components/SecondaryNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export { SecondaryNavigation } from "./SecondaryNavigation";
+export { SecondaryNavigationTitle } from "./SecondaryNavigationTitle";

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { InputProps } from "../Input";
+interface SelectProps extends InputProps, React.ComponentPropsWithRef<"select"> {
+    /**
+     * Specify whether you want the inline version of this control
+     */
+    inline?: boolean;
+    /**
+     * Optionally provide the default value of the `<select>`
+     */
+    defaultValue?: string;
+    /**
+     * Provide a description for the twistie icon that can be read by screen readers
+     */
+    iconDescription?: string;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+    children?: React.ReactNode;
+}
+/** The select component allows users to choose one option from a list. It is used in forms for users to submit data. */
+declare const Select: React.FC<SelectProps>;
+export default Select;

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

@@ -0,0 +1 @@
+export { default } from './Select';

package/lib/dist/components/SelectItem/SelectItem.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+interface SelectItemProps extends React.ComponentPropsWithRef<"option"> {
+    /**
+     * Specify the value of the <SelectItem>
+     */
+    value?: string | number;
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+    /**
+     * Specify whether the <SelectItem> should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the <SelectItem> is hidden
+     */
+    hidden?: boolean;
+    /**
+     * Provide the contents of your <SelectItem>
+     */
+    text: string;
+}
+declare function SelectItem({ className, value, disabled, hidden, text, ...other }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectItem {
+    var displayName: string;
+}
+export default SelectItem;

package/lib/dist/components/SelectItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SelectItem';

package/lib/dist/components/SelectItemGroup/SelectItemGroup.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+interface SelectItemGroupProps extends React.ComponentPropsWithRef<"optgroup"> {
+    /**
+     * Provide the contents of your <SelectItemGroup>
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the node
+     */
+    className?: string;
+    /**
+     * Specify whether the <SelectItemGroup> should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the label to be displayed
+     */
+    label: string;
+}
+declare function SelectItemGroup({ children, className, disabled, label, ...other }: SelectItemGroupProps): import("react/jsx-runtime").JSX.Element;
+export default SelectItemGroup;

package/lib/dist/components/SelectItemGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SelectItemGroup';

package/lib/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import type { PropsWithChildren } from "react";
+type SidebarProps = PropsWithChildren<{
+    /**
+     The `active` prop show the content section when an item is clicked. It's useful in mobile view
+   */
+    active?: boolean | string | number;
+    /**
+     The Sidebar is usually where the sidebar items will be.
+     `<SidebarHeader/>` can be called in `Sidebar` and example search can be used in here
+   */
+    sidebar?: React.ReactNode;
+    /**
+       The sidebarMobileHeader is shwon when view is in mobile version.
+       `<SidebarBackButton/>` can used in the `sidebarMobileHeader` prop
+    */
+    sidebarMobileHeader?: React.ReactNode;
+    className?: string;
+}>;
+declare const Sidebar: React.FC<SidebarProps>;
+export interface SidebarHeaderProps {
+    /**
+     Disable the default padding of the SidebarHeader
+   */
+    noPadding?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const SidebarHeader: React.FC<SidebarHeaderProps>;
+type SidebarContentHeaderProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare const SidebarContentHeader: React.FC<SidebarContentHeaderProps>;
+type SidebarContentBodyProps = PropsWithChildren<{
+    className?: string;
+}>;
+declare const SidebarContentBody: React.FC<SidebarContentBodyProps>;
+interface SidebarScrollProps {
+    children?: React.ReactNode;
+}
+declare const SidebarScroll: React.FC<SidebarScrollProps>;
+interface SidebarBackButtonProps {
+    children?: React.ReactNode;
+}
+declare const SidebarBackButton: React.FC<SidebarBackButtonProps>;
+export { Sidebar, SidebarHeader, SidebarContentHeader, SidebarContentBody, SidebarScroll, SidebarBackButton, };

package/lib/dist/components/Sidebar/index.d.ts

@@ -0,0 +1 @@
+export { Sidebar, SidebarHeader, SidebarContentHeader, SidebarContentBody, SidebarScroll, SidebarBackButton, } from './Sidebar';

package/lib/dist/components/SkeletonText/SkeletonText.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export interface SkeletonTextProps {
+    /**
+     * will generate multiple lines of text
+     */
+    paragraph?: boolean;
+    /**
+     * the number of lines in a paragraph
+     */
+    lineCount?: number;
+    /**
+     * width (in px or %) of single line of text or max-width of paragraph lines
+     */
+    width?: string | number;
+    /**
+     * generates skeleton text at a larger size
+     */
+    heading?: boolean;
+    className?: string;
+}
+declare const SkeletonText: React.FC<SkeletonTextProps>;
+export default SkeletonText;

package/lib/dist/components/SkeletonText/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SkeletonText';

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

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { InputProps } from "../Input";
+/** Sliders provide a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value. */
+interface SliderProps extends InputProps, React.ComponentPropsWithRef<"input"> {
+    /**
+     * Specify an optional className to be applied to the form-item node
+     */
+    formItemClassName?: string;
+    /**
+     * Specify if the control should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * The minimum value.
+     */
+    min: number;
+    /**
+     * The label associated with the minimum value.
+     */
+    minLabel?: string;
+    /**
+     * The maximum value.
+     */
+    max: number;
+    /**
+     * The label associated with the maximum value.
+     */
+    maxLabel?: string;
+    /**
+     * The callback to format the label associated with the minimum/maximum value.
+     */
+    formatLabel?: () => void;
+    /**
+     * The `name` attribute of the `<input>`.
+     */
+    name?: string;
+    /**
+     * The `type` attribute of the `<input>`.
+     */
+    inputType?: string;
+    /**
+     * The `ariaLabel` for the `<input>`.
+     */
+    ariaLabelInput?: string;
+    /**
+     * A value determining how much the value should increase/decrease by moving the thumb by mouse.
+     */
+    step?: number;
+    /**
+     * Specify the value of the input, if undefined or null the value is empty
+     */
+    value?: number | "";
+    /**
+     * `true` to hide the number input box.
+     */
+    hideTextInput?: boolean;
+    /**
+     * Use the width of the parent element
+     */
+    fullWidth?: boolean;
+    /**
+     * `true` to hide the controls on slider.
+     */
+    hideControls?: boolean;
+}
+declare const Slider: React.FC<SliderProps>;
+export default Slider;

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

@@ -0,0 +1 @@
+export { default } from "./Slider";

package/lib/dist/components/StepNavigation/StepNavigation.Skeleton.d.ts

@@ -0,0 +1,2 @@
+declare const TabsSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export default TabsSkeleton;

package/lib/dist/components/StepNavigation/StepNavigation.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+/** Step Navigation provide indications to help users reach their destination from their current position */
+interface StepNavigationProps {
+    /**
+     * Provide the contents of your StepNavigation
+     */
+    children: React.ReactNode;
+    /**
+     * Provide a className that is applied to the root <nav> component for the
+     * <Tabs>
+     */
+    className?: string;
+    /**
+     * Specify whether the StepNavigation will be displayed small
+     */
+    small?: boolean;
+    /**
+     * Specify whether the StepNavigation will be displayed vertically
+     */
+    vertical?: boolean;
+    /**
+     * Specify whether the StepNavigation will be displayed inline
+     */
+    inline?: boolean;
+    /**
+     * By default, this value is "navigation". You can also provide an alternate
+     * role if it makes sense from the accessibility-side
+     */
+    role: string;
+    /**
+     * Provide an optional handler that is called whenever the selection
+     * changes. This method is called with the index of the tab that was
+     * selected
+     */
+    onSelectionChange?: React.SetStateAction<number>;
+    /**
+     * Optionally provide an index for the currently selected <Tab>
+     */
+    selectedPage?: number;
+}
+declare function StepNavigation({ inline, small, vertical, className, role, children, }: StepNavigationProps): import("react/jsx-runtime").JSX.Element;
+export default StepNavigation;

package/lib/dist/components/StepNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StepNavigation.Skeleton';
+export { default } from './StepNavigation';

package/lib/dist/components/StepNavigationItem/StepNavigationItem.d.ts

@@ -0,0 +1,55 @@
+import * as React from "react";
+import type { PropsWithChildren } from "react";
+type StepNavigationItemProps = PropsWithChildren<{
+    /**
+     * Provide a className that is applied to the StepNavigation component
+     *
+     */
+    className?: string;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     *
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Provide the index of the each item
+     *
+     */
+    index?: number;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this control
+     *
+     */
+    label?: string;
+    /**
+     * By default, this value is "presentation". You can also provide an alternate
+     * role if it makes sense from the accessibility-side
+     */
+    role?: string;
+    /**
+     * Optionally provide an index for the currently selected <Tab>
+     */
+    selectedPage?: number;
+    /**
+     * The page number of the step.
+     **/
+    page?: number;
+    /**
+     * Provide status one of these status prop type to your step to give more meaning.
+     *
+     */
+    status?: string;
+    /**
+     * An optional parameter to allow overriding the anchor rendering.
+     * Useful for using Tab along with react-router or other client
+     * side router libraries.
+     */
+    renderAnchor?: (p: object) => {};
+    /**
+     * On click handler to change the currently active item.
+     **/
+    onClick?: (e: object) => {};
+    handleTabClick?: (e?: any, index?: number, label?: string) => {};
+}>;
+declare const StepNavigationItem: React.FC<StepNavigationItemProps>;
+export default StepNavigationItem;

package/lib/dist/components/StepNavigationItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from './StepNavigationItem';

package/lib/dist/components/Story/Story.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+/** The Story component adds a default style, formatting and spacing for a longer text with main focus on readability. */
+export interface StoryProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+declare const Story: React.FC<StoryProps>;
+export default Story;

package/lib/dist/components/Story/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Story';

package/lib/dist/components/SubNavigation/SubNavigation.d.ts

@@ -0,0 +1,5 @@
+/** The SubNavigation is a toogleable part of the MainNavigation */
+export declare const SubNavigation: ({ children, ...other }: {
+    [x: string]: any;
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/dist/components/SubNavigation/SubNavigationContent.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+interface SubNavigationContentProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Specify a the content of the SubNavigationContent
+     */
+    children?: React.ReactNode;
+}
+export declare const SubNavigationContent: ({ children, className, ...other }: SubNavigationContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/dist/components/SubNavigation/SubNavigationFilter.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+interface SubNavigationFilterProps extends React.ComponentPropsWithoutRef<"div"> {
+    /**
+     * Specify a the content of the SubNavigationFilter
+     */
+    children?: React.ReactNode;
+}
+export declare const SubNavigationFilter: ({ children, className, ...other }: SubNavigationFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};