@appquality/unguess-design-system 0.3.5 → 2.2.0

package/build/stories/buttons/button/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { ButtonArgs } from "./_types";
+/**
+ * Buttons let users take action quickly.
+ * Use a Button to enable actions or decisions that are important to a user’s workflow.
+ * <hr>
+ * Used for this:
+   - To enable user action
+   - To draw attention to relevant actions in a user's workflow
+ */
+declare const Button: {
+    (props: ButtonArgs): JSX.Element;
+    StartIcon: {
+        (props: import("@zendeskgarden/react-buttons").IButtonStartIconProps): JSX.Element;
+        displayName: string;
+    };
+    EndIcon: {
+        (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
+        displayName: string;
+    };
+};
+export { Button };

package/build/stories/buttons/button/index.stories.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { ButtonArgs } from "./_types";
+export declare const Default: Story<ButtonArgs>;
+export declare const Basic: Story<ButtonArgs>;
+export declare const Primary: Story<ButtonArgs>;
+export declare const WithIcon: Story<ButtonArgs>;
+declare const _default: ComponentMeta<{
+    (props: ButtonArgs): JSX.Element;
+    StartIcon: {
+        (props: import("@zendeskgarden/react-buttons").IButtonStartIconProps): JSX.Element;
+        displayName: string;
+    };
+    EndIcon: {
+        (props: import("@zendeskgarden/react-buttons").IButtonEndIconProps): JSX.Element;
+        displayName: string;
+    };
+}>;
+export default _default;

package/build/stories/buttons/button-group/_types.d.ts

@@ -0,0 +1,5 @@
+import { IButtonGroupProps } from "@zendeskgarden/react-buttons";
+export interface ButtonGroupArgs extends IButtonGroupProps {
+    /** Defines the currently selected button in the group */
+    selectedItem?: any;
+}

package/build/stories/buttons/button-group/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ButtonGroupArgs } from "./_types";
+/**
+A Button group lets users make a selection from a set of options.
+
+This is a legacy component and may be deprecated in the future. UNGUESS does not presently recommend the use of Button groups.
+**/
+declare const ButtonGroup: (props: ButtonGroupArgs) => JSX.Element;
+export { ButtonGroup };

package/build/stories/buttons/button-group/index.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { ButtonGroupArgs } from "./_types";
+interface ButtonGroupProps extends ButtonGroupArgs {
+    /**
+     The children of the button group.
+     @default []
+    */
+    items: any[];
+}
+export declare const TwoItems: Story<ButtonGroupProps>;
+export declare const WithBorders: Story<ButtonGroupProps>;
+export declare const RoundedItems: Story<ButtonGroupProps>;
+declare const _default: ComponentMeta<(props: ButtonGroupArgs) => JSX.Element>;
+export default _default;

package/build/stories/buttons/icon-button/_types.d.ts

@@ -0,0 +1,19 @@
+import { IIconButtonProps } from "@zendeskgarden/react-buttons";
+export interface IconButtonArgs extends IIconButtonProps {
+    /** Applies neutral button styling */
+    isNeutral?: boolean;
+    /** Applies primary button styling */
+    isPrimary?: boolean;
+    /** Applies danger button styling */
+    isDanger?: boolean;
+    /** Applies basic button styling */
+    isBasic?: boolean;
+    /** Applies pill button styling */
+    isPill?: boolean;
+    /** Applies inset `box-shadow` styling on focus */
+    focusInset?: boolean;
+    /** Rotates icon 180 degrees */
+    isRotated?: boolean;
+    /** Specifies icon button size */
+    size?: 'small' | 'medium' | 'large';
+}

package/build/stories/buttons/icon-button/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IconButtonArgs } from "./_types";
+/**
+Icon buttons (like Buttons) let users take action.
+They are used for repeated or persistent actions on a page and lack visible labels to simplify the UI.
+<br>
+Do this: <b>Include a Tooltip to help any users who may be unfamiliar with the icon.</b>
+<hr>
+Used for this
+ - To simplify the appearance of repeated or persistent actions on a page
+ - To enable action in a toolbar
+**/
+declare const IconButton: (props: IconButtonArgs) => JSX.Element;
+export { IconButton };

package/build/stories/buttons/icon-button/index.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { IconButtonArgs } from "./_types";
+export declare const Default: Story<IconButtonArgs>;
+export declare const Danger: Story<IconButtonArgs>;
+export declare const Disabled: Story<IconButtonArgs>;
+export declare const Shape: Story<IconButtonArgs>;
+declare const _default: ComponentMeta<(props: IconButtonArgs) => JSX.Element>;
+export default _default;

package/build/stories/buttons/shared/_shared.d.ts

@@ -0,0 +1,2 @@
+declare const paddingDefault: import("styled-components").FlattenSimpleInterpolation;
+export { paddingDefault };

package/build/stories/buttons/split-button/_types.d.ts

@@ -0,0 +1,2 @@
+export interface SplitButtonArgs {
+}

package/build/stories/buttons/split-button/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SplitButtonArgs } from "./_types";
+/**
+A Split button is a hybrid between a Dropdown Menu and a Button. It lets users choose from parallel actions and take action on their choice.
+<hr>
+Used for this:
+- To let users select from multiple parallel actions. Actions are parallel when each represents a path forward for the user and none cancel the action.
+- To reduce visual complexity when there are multiple actions a user can take
+**/
+declare const SplitButton: (props: SplitButtonArgs) => JSX.Element;
+export { SplitButton };

package/build/stories/buttons/split-button/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { SplitButtonArgs } from "./_types";
+export declare const Default: Story<SplitButtonArgs>;
+declare const _default: ComponentMeta<(props: import("../icon-button/_types").IconButtonArgs) => JSX.Element>;
+export default _default;

package/build/stories/buttons/utils/useButtonVariant.d.ts

@@ -0,0 +1,5 @@
+import { ButtonArgs } from "../button/_types";
+declare const getButtonVariant: (args: ButtonArgs) => {
+    isBasic?: boolean | undefined;
+};
+export { getButtonVariant };

package/build/stories/cards/_types.d.ts

@@ -0,0 +1,7 @@
+import { IWellProps } from "@zendeskgarden/react-notifications";
+export interface CardProps extends IWellProps {
+    /** Applies a background color */
+    isRecessed?: boolean;
+    /** Applies a drop shadow */
+    isFloating?: boolean;
+}

package/build/stories/cards/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CardProps } from './_types';
+/**
+ * A Card is a container that groups related content.
+ * <hr>
+ * Used for this:
+    - To group related content
+ */
+declare const Card: (props: CardProps) => JSX.Element;
+export { Card };

package/build/stories/cards/index.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { CardProps } from "./_types";
+interface CardStoryProps extends CardProps {
+    title: string;
+    content: string;
+}
+export declare const Default: Story<CardStoryProps>;
+export declare const Floating: Story<CardStoryProps>;
+declare const _default: ComponentMeta<(props: CardProps) => JSX.Element>;
+export default _default;

package/build/stories/close/_types.d.ts

@@ -0,0 +1,3 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface CloseArgs extends ButtonHTMLAttributes<HTMLButtonElement> {
+}

package/build/stories/close/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CloseArgs } from "./_types";
+/**
+ * Title is a basic component used to display a title. Often used in card headers.
+ */
+declare const Close: (props: CloseArgs) => JSX.Element;
+export { Close };

package/build/stories/close/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { CloseArgs } from "./_types";
+export declare const Default: Story<CloseArgs>;
+declare const _default: ComponentMeta<(props: CloseArgs) => JSX.Element>;
+export default _default;

package/build/stories/dropdowns/select/_types.d.ts

@@ -0,0 +1,27 @@
+import { IDropdownProps, ISelectProps } from "@zendeskgarden/react-dropdowns";
+export interface DropdownArgs extends IDropdownProps {
+    /** Opens the dropdown */
+    isOpen?: boolean;
+    /** Identifies the currently selected item */
+    selectedItem?: any;
+    /** Identifies the currently selected items */
+    selectedItems?: any[];
+    /** Highlights an element at a selected index */
+    highlightedIndex?: number;
+    /** Sets the value of the input element*/
+    inputValue?: string;
+}
+export interface SelectArgs extends ISelectProps {
+    /** Applies compact styling */
+    isCompact?: boolean;
+    /** Removes borders and padding */
+    isBare?: boolean;
+    /** Indicates that the element is not interactive */
+    disabled?: boolean;
+    /** Applies inset `box-shadow` styling on focus */
+    focusInset?: boolean;
+    /** Defines the element's validation state */
+    validation?: 'success' | 'warning' | 'error';
+    /** Defines the icon rendered before the element's content */
+    start?: any;
+}

package/build/stories/field/_types.d.ts

@@ -0,0 +1,3 @@
+import { IFieldProps } from "@zendeskgarden/react-forms";
+export interface FieldArgs extends IFieldProps {
+}

package/build/stories/field/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FieldArgs } from "./_types";
+/**
+   * A Field is a wrapper for input elements
+   **/
+declare const Field: (props: FieldArgs) => JSX.Element;
+export { Field };

package/build/stories/field/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { FieldArgs } from "./_types";
+export declare const Default: Story<FieldArgs>;
+declare const _default: ComponentMeta<(props: FieldArgs) => JSX.Element>;
+export default _default;

package/build/stories/forms/checkbox/_types.d.ts

@@ -0,0 +1,8 @@
+import { ICheckboxProps } from "@zendeskgarden/react-forms";
+export interface CheckboxArgs extends ICheckboxProps {
+    /**
+     * Sets the checkbox state to
+     * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes)
+     */
+    indeterminate?: boolean;
+}

package/build/stories/forms/checkbox/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { CheckboxArgs } from "./_types";
+/**
+   * A Checkbox lets users select and unselect options from a list.
+   * <hr>
+   * Used for this:
+   *  - To let users compare options from a list and select all, any, or none of those items
+   *  - To turn a single option on or off
+   * Not for this:
+   *  - To give the user a mutually exclusive choice, use the Radio component instead
+   *  - To let users activate an option that takes effect immediately, use a Toggle instead
+   **/
+declare const Checkbox: (props: CheckboxArgs) => JSX.Element;
+export { Checkbox };

package/build/stories/forms/checkbox/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { CheckboxArgs } from "./_types";
+export declare const Default: Story<CheckboxArgs>;
+declare const _default: ComponentMeta<(props: CheckboxArgs) => JSX.Element>;
+export default _default;

package/build/stories/forms/input/_types.d.ts

@@ -0,0 +1,9 @@
+import { IInputProps } from "@zendeskgarden/react-forms";
+export interface InputArgs extends IInputProps {
+    /** Removes borders and padding */
+    isBare?: boolean;
+    /** Applies inset `box-shadow` styling on focus */
+    focusInset?: boolean;
+    /** Applies validation state styling */
+    validation?: 'success' | 'warning' | 'error';
+}

package/build/stories/forms/input/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { InputArgs } from "./_types";
+/**
+   * An Input lets users enter text into a field.
+   * <hr>
+   * Used for this:
+   *  - To let the user enter data into a field
+   *  - To enter multiline text, use a Textarea
+   **/
+declare const Input: (props: InputArgs) => JSX.Element;
+export { Input };

package/build/stories/forms/input/index.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { InputArgs } from "./_types";
+export declare const Default: Story<InputArgs>;
+export declare const Success: Story<InputArgs>;
+export declare const Warning: Story<InputArgs>;
+export declare const Error: Story<InputArgs>;
+declare const _default: ComponentMeta<(props: InputArgs) => JSX.Element>;
+export default _default;

package/build/stories/grid/col/_types.d.ts

@@ -0,0 +1,77 @@
+import { IColProps, GRID_NUMBER, BREAKPOINT, ALIGN_SELF, TEXT_ALIGN } from "@zendeskgarden/react-grid";
+export interface ColArgs extends IColProps {
+    /** Sets the total number of grid `columns` that the column spans on all screen sizes */
+    size?: GRID_NUMBER;
+    /** Defines the column size on extra-small screens.
+     *  See [breakpoints](/components/theme-object#default_theme).
+     */
+    xs?: BREAKPOINT;
+    /** Defines the column size on small screens*/
+    sm?: BREAKPOINT;
+    /** Defines the column size on medium screens */
+    md?: BREAKPOINT;
+    /** Defines the column size on large screens */
+    lg?: BREAKPOINT;
+    /** Defines the column size on extra-large screens */
+    xl?: BREAKPOINT;
+    /**
+     * Applies the `align-self` flex item property, overriding `Row alignItems`
+     * vertical alignment on all screen sizes
+     */
+    alignSelf?: ALIGN_SELF;
+    /** Applies the `align-self` flex item property to the column on extra-small screens */
+    alignSelfXs?: ALIGN_SELF;
+    /** Applies the `align-self` flex item property to the column on small screens */
+    alignSelfSm?: ALIGN_SELF;
+    /** Applies the `align-self` flex item property to the column on medium screens */
+    alignSelfMd?: ALIGN_SELF;
+    /** Applies the `align-self` flex item property to the column on large screens */
+    alignSelfLg?: ALIGN_SELF;
+    /** Applies the `align-self` flex item property to the column on extra-large screens */
+    alignSelfXl?: ALIGN_SELF;
+    /**
+     * Applies the RTL-aware `text-align` property to the column on all screen sizes
+     */
+    textAlign?: TEXT_ALIGN;
+    /** Applies the `text-align` property to the column on extra-small screens */
+    textAlignXs?: TEXT_ALIGN;
+    /** Applies the `text-align` property to the column on small screens */
+    textAlignSm?: TEXT_ALIGN;
+    /** Applies the `text-align` property to the column on medium screens */
+    textAlignMd?: TEXT_ALIGN;
+    /** Applies the `text-align` property to the column on large screens */
+    textAlignLg?: TEXT_ALIGN;
+    /** Applies the `text-align` property to the column on extra-large screens */
+    textAlignXl?: TEXT_ALIGN;
+    /**
+     * Offsets the column relative to the total number of `columns` in the
+     * grid on all screen sizes
+     */
+    offset?: GRID_NUMBER;
+    /** Applies offset to the column on extra-small screens */
+    offsetXs?: GRID_NUMBER;
+    /** Applies offset to the column on small screens */
+    offsetSm?: GRID_NUMBER;
+    /** Applies offset to the column on medium screens */
+    offsetMd?: GRID_NUMBER;
+    /** Applies offset to the column on large screens */
+    offsetLg?: GRID_NUMBER;
+    /** Applies offset to the column on extra-large screens */
+    offsetXl?: GRID_NUMBER;
+    /**
+     * Applies the `order` flex item property to the column on all screen sizes. Note that
+     * order modification can introduce accessibility problems by
+     * confusing tab ordering. Rely on semantic DOM ordering whenever possible.
+     */
+    order?: GRID_NUMBER;
+    /** Sets the `order` flex item property of the column on extra-small screens */
+    orderXs?: GRID_NUMBER;
+    /** Sets the `order` flex item property of the column on small screens */
+    orderSm?: GRID_NUMBER;
+    /** Sets the `order` flex item property of the column on medium screens */
+    orderMd?: GRID_NUMBER;
+    /** Sets the `order` flex item property of the column on large screens */
+    orderLg?: GRID_NUMBER;
+    /** Sets the `order` flex item property of the column on extra-large screens */
+    orderXl?: GRID_NUMBER;
+}

package/build/stories/grid/col/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ColArgs } from "./_types";
+declare const Col: (props: ColArgs) => JSX.Element;
+export { Col };

package/build/stories/grid/col/index.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { ColArgs } from "./_types";
+export declare const Basic: Story<(props: ColArgs) => JSX.Element>;
+export declare const Breaks: Story<(props: ColArgs) => JSX.Element>;
+export declare const Offset: Story<(props: ColArgs) => JSX.Element>;
+declare const _default: ComponentMeta<(props: ColArgs) => JSX.Element>;
+export default _default;

package/build/stories/grid/grid/_types.d.ts

@@ -0,0 +1,9 @@
+import { IGridProps, GRID_NUMBER, SPACE } from "@zendeskgarden/react-grid";
+export interface GridArgs extends IGridProps {
+    /** Defines the number of individual columns that the grid contains */
+    columns?: GRID_NUMBER;
+    /** Specifies the grid column gutter width. The value `false` collapses the gutters */
+    gutters?: SPACE;
+    /** Highlights the columns for layout debugging */
+    debug?: boolean;
+}

package/build/stories/grid/grid/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { GridArgs } from './_types';
+/**
+ * The Grid component is a framework for building modular layouts.
+ * <hr>
+ * Used for this:
+    - To structure the layout of a page
+ */
+declare const Grid: (props: GridArgs) => JSX.Element;
+export { Grid };

package/build/stories/grid/grid/index.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { RowStoryArg } from "../row/index.stories";
+import { GridArgs } from "./_types";
+interface GridProps extends GridArgs {
+    rows: Array<RowStoryArg>;
+}
+export declare const Default: Story<GridProps>;
+export declare const EqualColumns: Story<GridProps>;
+export declare const OneWiderColumn: Story<GridProps>;
+declare const _default: ComponentMeta<(props: GridArgs) => JSX.Element>;
+export default _default;

package/build/stories/grid/row/_types.d.ts

@@ -0,0 +1,48 @@
+import { IRowProps, ALIGN_ITEMS, JUSTIFY_CONTENT, WRAP } from "@zendeskgarden/react-grid";
+export interface RowArgs extends IRowProps {
+    /**
+     * Applies the `align-items` flex container property to the row.
+     * This affects vertical `Col` alignment on all screen sizes.
+     */
+    alignItems?: ALIGN_ITEMS;
+    /** Applies the `align-items` flex container property to the row on extra-small screens */
+    alignItemsXs?: ALIGN_ITEMS;
+    /** Applies the `align-items` flex container property to the row on small screens */
+    alignItemsSm?: ALIGN_ITEMS;
+    /** Applies the `align-items` flex container property to the row on medium screens */
+    alignItemsMd?: ALIGN_ITEMS;
+    /** Applies the `align-items` flex container property to the row on large screens */
+    alignItemsLg?: ALIGN_ITEMS;
+    /** Applies the `align-items` flex container property to the row on extra-large screens */
+    alignItemsXl?: ALIGN_ITEMS;
+    /**
+     * Applies the `justify-content` flex container property to the row.
+     * This affects horizontal `Col` alignment on all screen sizes.
+     */
+    justifyContent?: JUSTIFY_CONTENT;
+    /** Applies the `justify-content` flex container property to the row on extra-small screens */
+    justifyContentXs?: JUSTIFY_CONTENT;
+    /** Applies the `justify-content` flex container property to the row on small screens */
+    justifyContentSm?: JUSTIFY_CONTENT;
+    /** Applies the `justify-content` flex container property to the row on medium screens */
+    justifyContentMd?: JUSTIFY_CONTENT;
+    /** Applies the `justify-content` flex container property to the row on large screens */
+    justifyContentLg?: JUSTIFY_CONTENT;
+    /** Applies the `justify-content` flex container property to the row on extra-large screens */
+    justifyContentXl?: JUSTIFY_CONTENT;
+    /**
+     * Applies the `flex-wrap` container property to the row. This affects `Col` wrapping on
+     * all screen sizes.
+     */
+    wrap?: WRAP;
+    /** Applies the `flex-wrap` container property to the row on extra-small screens */
+    wrapXs?: WRAP;
+    /** Applies the `flex-wrap` container property to the row on small screens */
+    wrapSm?: WRAP;
+    /** Applies the `flex-wrap` container property to the row on medium screens */
+    wrapMd?: WRAP;
+    /** Applies the `flex-wrap` container property to the row on large screens */
+    wrapLg?: WRAP;
+    /** Applies the `flex-wrap` container property to the row on extra-large screens */
+    wrapXl?: WRAP;
+}

package/build/stories/grid/row/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { RowArgs } from "./_types";
+declare const Row: (props: RowArgs) => JSX.Element;
+export { Row };

package/build/stories/grid/row/index.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { RowArgs } from "./_types";
+import { ColArgs } from "../col/_types";
+export interface RowStoryArg extends RowArgs {
+    cols: Array<ColArgs>;
+}
+export declare const Basic: Story<RowStoryArg>;
+declare const _default: ComponentMeta<(props: RowArgs) => JSX.Element>;
+export default _default;

package/build/stories/label/_types.d.ts

@@ -0,0 +1,5 @@
+import { ILabelProps } from "@zendeskgarden/react-forms";
+export interface LabelArgs extends ILabelProps {
+    /** Applies regular (non-bold) font weight */
+    isRegular?: boolean;
+}

package/build/stories/label/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LabelArgs } from "./_types";
+/**
+   * A Label is used to specify a title for an input.
+   * <hr>
+   **/
+declare const Label: (props: LabelArgs) => JSX.Element;
+export { Label };

package/build/stories/label/index.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { LabelArgs } from "./_types";
+export declare const Basic: Story<LabelArgs>;
+export declare const Bold: Story<LabelArgs>;
+declare const _default: ComponentMeta<(props: LabelArgs) => JSX.Element>;
+export default _default;

package/build/stories/loaders/progress/_types.d.ts

@@ -0,0 +1,12 @@
+import { IProgressProps } from '@zendeskgarden/react-loaders';
+export interface ProgressArgs extends IProgressProps {
+    /** Sets the progress as a value between 0 and 100 */
+    value?: number;
+    /**
+     * Sets the foreground bar's fill color.
+     * Defaults to the `successHue` [theme](/components/theme-object#colors) value.
+     */
+    color?: string;
+    /** Adjusts the height */
+    size?: 'small' | 'medium' | 'large';
+}

package/build/stories/loaders/progress/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ProgressArgs } from './_types';
+/**
+ * A Progress loader communicates progress when downloading or uploading content.
+ * <hr>
+ * Used for this:
+ * - To communicate the amount of time left when downloading or uploading content
+ *
+   Not for this:
+    - When the loading time is unknown, use a Spinner instead
+    - When loading page content, use a Skeleton loader instead
+ */
+declare const Progress: (props: ProgressArgs) => JSX.Element;
+export { Progress };

package/build/stories/loaders/progress/index.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentMeta, Story } from "@storybook/react";
+import { ProgressArgs } from "./_types";
+export declare const Default: Story<ProgressArgs>;
+declare const _default: ComponentMeta<(props: ProgressArgs) => JSX.Element>;
+export default _default;

package/build/stories/loaders/skeleton/_types.d.ts

@@ -0,0 +1,9 @@
+import { ISkeletonProps } from '@zendeskgarden/react-loaders';
+export interface SkeletonArgs extends ISkeletonProps {
+    /** Sets the width in px or in percentage of the the parent element's width */
+    width?: string;
+    /** Sets the height in px or in percentage of parent element's height if the height is not already inherited by `line-height` */
+    height?: string;
+    /** Inverts the color for use on dark backgrounds */
+    isLight?: boolean;
+}

package/build/stories/loaders/skeleton/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SkeletonArgs } from './_types';
+/**
+ * A Skeleton loader shows users a blank version of a page or section of a page into which content is gradually loaded. It provides a visual estimate of the space needed.
+ * <hr>
+ * Used for this:
+    - Skeleton is the default loader, used whenever the system can predict the format of the loading content
+    - To progressively load different parts of a page
+    - To avoid large layout shifts
+ 
+ * Not for this:
+   - When the system doesn’t have control over the content that is loading, use a Spinner instead
+   - To indicate that a component (like a button or search input) is busy, use Dots instead
+   - To communicate a typing status, use Inline instead
+ */
+declare const Skeleton: (props: SkeletonArgs) => JSX.Element;
+export { Skeleton };