@coreui/react 4.0.0-rc.1

package/dist/components/card/CCardSubtitle.d.ts

@@ -0,0 +1,14 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+export interface CCardSubtitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+     *
+     * @default 'h6'
+     */
+    component?: string | ElementType;
+}
+export declare const CCardSubtitle: React.ForwardRefExoticComponent<CCardSubtitleProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/card/CCardText.d.ts

@@ -0,0 +1,14 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+export interface CCardTextProps extends HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+     *
+     * @default 'p'
+     */
+    component?: string | ElementType;
+}
+export declare const CCardText: React.ForwardRefExoticComponent<CCardTextProps & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/card/CCardTitle.d.ts

@@ -0,0 +1,14 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+export interface CCardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+     *
+     * @default 'h5'
+     */
+    component?: string | ElementType;
+}
+export declare const CCardTitle: React.ForwardRefExoticComponent<CCardTitleProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/carousel/CCarousel.d.ts

@@ -0,0 +1,53 @@
+import React, { HTMLAttributes } from 'react';
+export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Set 'animate' variable for created context. [docs]
+     */
+    animate?: boolean;
+    /**
+     * A string of all className you want applied to the base component. [docs]
+     */
+    className?: string;
+    /**
+     * Adding in the previous and next controls. [docs]
+     */
+    controls?: boolean;
+    /**
+     * Add darker controls, indicators, and captions. [docs]
+     */
+    dark?: boolean;
+    /**
+     * The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. [docs]
+     */
+    interval?: boolean | number;
+    /**
+     * index of the active item. [docs]
+     */
+    index?: number;
+    /**
+     * Adding indicators at the bottom of the carousel for each item. [docs]
+     */
+    indicators?: boolean;
+    /**
+     * On slide change callback. [docs]
+     */
+    onSlideChange?: (a: number | string | null) => void;
+    /**
+     * On slide change callback. [docs]
+     *
+     * @type {'slide' | 'crossfade'}
+     * @default 'slide'
+     */
+    transition?: 'slide' | 'crossfade';
+}
+export interface ContextProps {
+    itemsNumber: number;
+    state: [number | null, number, string?];
+    animating: boolean;
+    animate?: boolean;
+    setItemsNumber: (a: number) => void;
+    setAnimating: (a: boolean) => void;
+    setState: (a: [number | null, number, string?]) => void;
+}
+export declare const CCarouselContext: React.Context<ContextProps>;
+export declare const CCarousel: React.ForwardRefExoticComponent<CCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/carousel/CCarouselCaption.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface CCarouselCaptionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string of all className you want applied to the base component. [docs]
+     */
+    className?: string;
+}
+export declare const CCarouselCaption: React.ForwardRefExoticComponent<CCarouselCaptionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/carousel/CCarouselControl.d.ts

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from 'react';
+declare type Direction = 'prev' | 'next';
+export interface CCarouselControlProps extends HTMLAttributes<HTMLButtonElement> {
+    /**
+     * A string of all className you want applied to the base component. [docs]
+     */
+    className?: string;
+    /**
+     *  Direction. [docs]
+     *
+     * @type 'prev' | 'next'
+     */
+    direction: Direction;
+}
+export declare const CCarouselControl: React.ForwardRefExoticComponent<CCarouselControlProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/carousel/CCarouselIndicators.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react';
+export interface CCarouselIndicatorsProps extends HTMLAttributes<HTMLOListElement> {
+    /**
+     * A string of all className you want applied to the base component. [docs]
+     */
+    className?: string;
+    /**
+     * Indicators section user classes. [docs]
+     */
+    indicatorsClass?: string;
+}
+export declare const CCarouselIndicators: React.ForwardRefExoticComponent<CCarouselIndicatorsProps & React.RefAttributes<HTMLOListElement>>;

package/dist/components/carousel/CCarouselInner.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface CCarouselInnerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string of all className you want applied to the base component. [docs]
+     */
+    className?: string;
+}
+export declare const CCarouselInner: React.ForwardRefExoticComponent<CCarouselInnerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/carousel/CCarouselItem.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react';
+export interface CCarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string of all className you want applied to the base component. [docs]
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    idx?: number;
+}
+export declare const CCarouselItem: React.ForwardRefExoticComponent<CCarouselItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/close-button/CCloseButton.d.ts

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from 'react';
+export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    /**
+     * A string of all className you want applied to the base component. [docs]
+     */
+    className?: string;
+    /**
+     * Toggle the disabled state for the component. [docs]
+     */
+    disabled?: boolean;
+    /**
+     * Change the default color to white. [docs]
+     */
+    white?: boolean;
+}
+export declare const CCloseButton: React.ForwardRefExoticComponent<CCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/collapse/CCollapse.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react';
+export interface CCollapseProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string of all className you want applied to the base component. [docs]
+     */
+    className?: string;
+    /**
+     * Toggle the visibility of component. [docs]
+     */
+    visible?: boolean;
+}
+export declare const CCollapse: React.ForwardRefExoticComponent<CCollapseProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/dropdown/CDropdown.d.ts

@@ -0,0 +1,72 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+import { Placements } from '../Types';
+export declare type Directions = 'start' | 'end';
+export declare type Breakpoints = {
+    xs: Directions;
+} | {
+    sm: Directions;
+} | {
+    md: Directions;
+} | {
+    lg: Directions;
+} | {
+    xl: Directions;
+} | {
+    xxl: Directions;
+};
+export declare type Alignments = Directions | Breakpoints;
+export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
+    /**
+     * @type { 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'} }
+     */
+    alignment?: Alignments;
+    /**
+     * A string of all className you want applied to the base component. [docs]
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+     *
+     * @default 'div'
+     */
+    component?: string | ElementType;
+    /**
+     * Sets a darker color scheme to match a dark navbar.
+     */
+    dark?: boolean;
+    /**
+     * Sets a specified  direction and location of the dropdown menu. [docs]
+     *
+     * @type 'dropup' | 'dropend' | 'dropstart'
+     */
+    direction?: 'dropup' | 'dropend' | 'dropstart';
+    /**
+     * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. [docs]
+     *
+     * @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
+     * @default 'bottom-start'
+     */
+    placement?: Placements;
+    /**
+     * If you want to disable dynamic positioning set this property to `true`.
+     */
+    popper?: boolean;
+    /**
+     * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. [docs]
+     *
+     * @default 'btn-group'
+     */
+    variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item';
+    /**
+     * Toggle the visibility of dropdown menu component. [docs]
+     *
+     * @default false
+     */
+    visible?: boolean;
+}
+interface ContextProps extends CDropdownProps {
+    setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+}
+export declare const CDropdownContext: React.Context<ContextProps>;
+export declare const CDropdown: React.ForwardRefExoticComponent<CDropdownProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
+export {};

package/dist/components/dropdown/CDropdownDivider.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface CDropdownDividerProps extends HTMLAttributes<HTMLHRElement> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+}
+export declare const CDropdownDivider: React.ForwardRefExoticComponent<CDropdownDividerProps & React.RefAttributes<HTMLHRElement>>;

package/dist/components/dropdown/CDropdownHeader.d.ts

@@ -0,0 +1,14 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+export interface CDropdownHeaderProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+     *
+     * @default 'h6'
+     */
+    component?: string | ElementType;
+}
+export declare const CDropdownHeader: React.ForwardRefExoticComponent<CDropdownHeaderProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/dropdown/CDropdownItem.d.ts

@@ -0,0 +1,15 @@
+import React, { ElementType } from 'react';
+import { CLinkProps } from '../link/CLink';
+export interface CDropdownItemProps extends CLinkProps {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+     *
+     * @default 'a'
+     */
+    component?: string | ElementType;
+}
+export declare const CDropdownItem: React.ForwardRefExoticComponent<CDropdownItemProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/dropdown/CDropdownItemPlain.d.ts

@@ -0,0 +1,14 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+export interface CDropdownItemPlainProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+     *
+     * @default 'span'
+     */
+    component?: string | ElementType;
+}
+export declare const CDropdownItemPlain: React.ForwardRefExoticComponent<CDropdownItemPlainProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/dropdown/CDropdownMenu.d.ts

@@ -0,0 +1,15 @@
+import { ElementType, FC, HTMLAttributes } from 'react';
+import { PopperChildrenProps } from 'react-popper';
+export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement>, Omit<PopperChildrenProps, 'arrowProps' | 'forceUpdate' | 'placement' | 'ref' | 'style' | 'update'> {
+    /**
+     * A string of all className you want applied to the base component. [docs]
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+     *
+     * @default 'ul'
+     */
+    component?: string | ElementType;
+}
+export declare const CDropdownMenu: FC<CDropdownMenuProps>;

package/dist/components/dropdown/CDropdownToggle.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { Triggers } from '../Types';
+import { CButtonProps } from '../button/CButton';
+export interface CDropdownToggleProps extends CButtonProps {
+    /**
+     * Enables pseudo element caret on toggler. [docs]
+     *
+     * @default true
+     */
+    caret?: boolean;
+    /**
+     * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. [docs]
+     */
+    split?: boolean;
+    /**
+     * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. [docs]
+     */
+    trigger?: Triggers | Triggers[];
+}
+export declare const CDropdownToggle: FC<CDropdownToggleProps>;

package/dist/components/footer/CFooter.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react';
+export interface CFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string of all className you want applied to the base component. [docs]
+     */
+    className?: string;
+    /**
+     * Place footer in non-static positions. [docs]
+     */
+    position?: 'fixed' | 'sticky';
+}
+export declare const CFooter: React.ForwardRefExoticComponent<CFooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/form/CForm.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react';
+export interface CFormProps extends HTMLAttributes<HTMLFormElement> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component.
+     */
+    validated?: boolean;
+}
+export declare const CForm: React.ForwardRefExoticComponent<CFormProps & React.RefAttributes<HTMLFormElement>>;

package/dist/components/form/CFormCheck.d.ts

@@ -0,0 +1,68 @@
+import React, { InputHTMLAttributes, ReactNode } from 'react';
+import { Colors, Shapes } from '../Types';
+export declare type ButtonObject = {
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+     *
+     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+     */
+    color?: Colors;
+    /**
+     * Select the shape of the component. [docs]
+     *
+     * @type 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string
+     */
+    shape?: Shapes;
+    /**
+     * Size the component small or large. [docs]
+     *
+     * @type 'sm' | 'lg'
+     */
+    size?: 'sm' | 'lg';
+    /**
+     * Set the button variant to an outlined button or a ghost button. [docs]
+     */
+    variant?: 'outline' | 'ghost';
+};
+export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Create button-like checkboxes and radio buttons. [docs]
+     */
+    button?: ButtonObject;
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Sets hit area to the full area of the component. [docs]
+     */
+    hitArea?: 'full';
+    /**
+     * The id global attribute defines an identifier (ID) that must be unique in the whole document. [docs]
+     */
+    id?: string;
+    /**
+     * Group checkboxes or radios on the same horizontal row by adding. [docs]
+     */
+    inline?: boolean;
+    /**
+     * Set component validation state to invalid. [docs]
+     */
+    invalid?: boolean;
+    /**
+     * The element represents a caption for a component. [docs]
+     */
+    label?: string | ReactNode;
+    /**
+     * Specifies the type of component. [docs]
+     *
+     * @type checkbox' | 'radio'
+     * @default 'checkbox'
+     */
+    type?: 'checkbox' | 'radio';
+    /**
+     * Set component validation state to valid. [docs]
+     */
+    valid?: boolean;
+}
+export declare const CFormCheck: React.ForwardRefExoticComponent<CFormCheckProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/form/CFormFeedback.d.ts

@@ -0,0 +1,26 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+export interface CFormFeedbackProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component. [docs]
+     *
+     * @default 'div'
+     */
+    component?: string | ElementType;
+    /**
+     * Method called immediately after the `value` prop changes. [docs]
+     */
+    invalid?: boolean;
+    /**
+     * If your form layout allows it, you can display validation feedback in a styled tooltip. [docs]
+     */
+    tooltip?: boolean;
+    /**
+     * Set component validation state to valid. [docs]
+     */
+    valid?: boolean;
+}
+export declare const CFormFeedback: React.ForwardRefExoticComponent<CFormFeedbackProps & React.RefAttributes<HTMLDivElement | HTMLSpanElement>>;

package/dist/components/form/CFormFloating.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface CFormFloatingProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+}
+export declare const CFormFloating: React.ForwardRefExoticComponent<CFormFloatingProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/form/CFormInput.d.ts

@@ -0,0 +1,51 @@
+import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
+export interface CFormInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Toggle the disabled state for the component. [docs]
+     */
+    disabled?: boolean;
+    /**
+     * Set component validation state to invalid. [docs]
+     */
+    invalid?: boolean;
+    /**
+     * Method called immediately after the `value` prop changes. [docs]
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` [docs]
+     */
+    plainText?: boolean;
+    /**
+     * Toggle the readonly state for the component. [docs]
+     */
+    readOnly?: boolean;
+    /**
+     * Size the component small or large. [docs]
+     *
+     * @type 'sm' | 'lg'
+     */
+    size?: 'sm' | 'lg';
+    /**
+     * Specifies the type of component. [docs]
+     *
+     * @type 'color' | 'file' | 'text' | string
+     * @default 'text'
+     */
+    type?: 'color' | 'file' | 'text' | string;
+    /**
+     * Set component validation state to valid. [docs]
+     */
+    valid?: boolean;
+    /**
+     * The `value` attribute of component. [docs]
+     *
+     * @controllable onChange
+     * */
+    value?: string | string[] | number;
+}
+export declare const CFormInput: React.ForwardRefExoticComponent<CFormInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/form/CFormLabel.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react';
+export interface CFormLabelProps extends HTMLAttributes<HTMLLabelElement> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * A string of all className you want to be applied to the component, and override standard className value. [docs]
+     */
+    customClassName?: string;
+}
+export declare const CFormLabel: React.ForwardRefExoticComponent<CFormLabelProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/form/CFormRange.d.ts

@@ -0,0 +1,38 @@
+import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
+export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Toggle the disabled state for the component. [docs]
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the maximum value for the component. [docs]
+     */
+    max?: number;
+    /**
+     * Specifies the minimum value for the component. [docs]
+     */
+    min?: number;
+    /**
+     * Method called immediately after the `value` prop changes. [docs]
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Toggle the readonly state for the component. [docs]
+     */
+    readOnly?: boolean;
+    /**
+     * Specifies the interval between legal numbers in the component. [docs]
+     */
+    steps: number;
+    /**
+     * The `value` attribute of component. [docs]
+     *
+     * @controllable onChange
+     * */
+    value?: string | string[] | number;
+}
+export declare const CFormRange: React.ForwardRefExoticComponent<CFormRangeProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/form/CFormSelect.d.ts

@@ -0,0 +1,26 @@
+import React, { InputHTMLAttributes } from 'react';
+export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /**
+     * A string of all className you want applied to the component. [docs]
+     */
+    className?: string;
+    /**
+     * Specifies the number of visible options in a drop-down list. [docs]
+     */
+    htmlSize?: number;
+    /**
+     * Set component validation state to invalid. [docs]
+     */
+    invalid?: boolean;
+    /**
+     * Size the component small or large. [docs]
+     *
+     * @type 'sm' | 'lg'
+     */
+    size?: 'sm' | 'lg';
+    /**
+     * Set component validation state to valid. [docs]
+     */
+    valid?: boolean;
+}
+export declare const CFormSelect: React.ForwardRefExoticComponent<CFormSelectProps & React.RefAttributes<HTMLSelectElement>>;