@wavv/ui 1.0.0

package/dist/esm/types/components/Label.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { Margin } from './types';
+import { IconType } from './helpers/getIcon';
+declare type LabelProps = {
+    children?: ReactNode;
+    /** The name of the icon that should appear on the left side of the input */
+    iconLeft?: IconType;
+    /** The name of the icon that should appear on the right side of the input */
+    iconRight?: IconType;
+    /** Styles the Label as a pill */
+    pill?: boolean;
+    /** Reduces the emphasis of the Pill colors */
+    disabled?: boolean;
+} & Margin;
+declare const Label: ({ children, iconLeft, iconRight, disabled, pill, ...rest }: LabelProps) => JSX.Element;
+export default Label;

package/dist/esm/types/components/Menu.d.ts

@@ -0,0 +1,53 @@
+import { MouseEvent, ReactNode } from 'react';
+import { Padding, WidthHeight } from './types';
+declare type MenuProps = {
+    /** Displays the menu as a vertical, stacked menu */
+    vertical?: boolean;
+    /** If true, a border will be displayed around the menu */
+    border?: boolean;
+    /** If true, a border will be displayed on top of the menu */
+    borderTop?: boolean;
+    /** If true, a border will be displayed on bottom of the menu */
+    borderBottom?: boolean;
+    /** If true, a border will be displayed to the left of the menu */
+    borderLeft?: boolean;
+    /** If true, a border will be displayed to the right of the menu */
+    borderRight?: boolean;
+    /** Sets the borderTopLeftRadius of the menu */
+    borderTopLeftRadius?: number | string;
+    /** Sets the borderTopRightRadius of the menu */
+    borderTopRightRadius?: number | string;
+    /** Sets the borderBottomLeftRadius of the menu */
+    borderBottomLeftRadius?: number | string;
+    /** Sets the borderBottomRightRadius of the menu */
+    borderBottomRightRadius?: number | string;
+    children?: ReactNode;
+    /** Sets the backgroundColor of the menu */
+    backgroundColor?: string;
+} & WidthHeight & Padding;
+declare const Menu: {
+    ({ vertical, width, height, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, border, borderTop, borderBottom, borderLeft, borderRight, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, backgroundColor, children, }: MenuProps): JSX.Element;
+    Item: ({ vertical, selected, disabled, contentPosition, onClick, id, children, indent }: MenuItemProps) => JSX.Element;
+    Group: ({ label, defaultOpen, vertical, selected, disabled, contentPosition, onClick, id, children, indent, backgroundColor, }: MenuGroupProps) => JSX.Element;
+};
+declare type MenuItemProps = {
+    children: ReactNode;
+    vertical?: boolean;
+    /** The id of the Menu Item */
+    id?: string;
+    /** Controls whether the Menu Item appears to be active */
+    selected: boolean;
+    /** Prevents the Menu Item from being clicked */
+    disabled?: boolean;
+    /** The flex positioning of the Item contents */
+    contentPosition?: 'start' | 'end';
+    /** The function to be called when the Menu Item is clicked */
+    onClick: (event: MouseEvent) => void;
+    indent?: number;
+};
+declare type MenuGroupProps = {
+    label: string | ReactNode;
+    defaultOpen?: boolean;
+    backgroundColor?: string;
+} & Partial<MenuItemProps>;
+export default Menu;

package/dist/esm/types/components/Message.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { Margin, ThemeProp, Width } from './types';
+declare type MessageProps = {
+    children?: ReactNode;
+    /** Sets the colors and icon of the Message */
+    type?: 'info' | 'error' | 'success' | 'warning';
+    /** Sets the text of the button */
+    content?: string;
+    /** Displays a close icon in the top right of the Message */
+    closeIcon?: boolean;
+    /** The function called when the Message is closed */
+    onClose?: () => void;
+} & Width & Margin;
+declare const Message: {
+    ({ type, content, closeIcon, onClose, width, margin, marginTop, marginBottom, marginRight, marginLeft, children, }: MessageProps): JSX.Element;
+    Header: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default Message;

package/dist/esm/types/components/MessageHr.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const MessageHr: ({ text, color, style, }: {
+    /** The text to be displayed */
+    text: string | number;
+    /** The color of the text displayed */
+    color?: string | undefined;
+    /** Sets the style prop of the text */
+    style?: {
+        [key: string]: string | number;
+    } | undefined;
+}) => JSX.Element;
+export default MessageHr;

package/dist/esm/types/components/Modal.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+import { ThemeProp } from '../theme';
+import { FlexPosition, Height, Margin, Padding, WidthHeight } from './types';
+declare type ModalProps = {
+    children: ReactNode;
+    /** The selector (id or className) of the app's root element */
+    rootSelector?: string;
+    /** Controls whether or not the Modal is open */
+    visible: boolean;
+    /** The function called when the Modal is closed */
+    onClose: () => void;
+    /** Displays a close icon in the top right of the Modal */
+    closeIcon?: boolean;
+    /** Prevents the Modal from closing if the overlay outside the modal is clicked */
+    preventOverlayClose?: boolean;
+    /** Sets the color of the modal overlay */
+    overlayColor?: string;
+    /** Overrides the backgroundColor of the modal container */
+    backgroundColor?: string;
+    /** Styles the Modal as an actionable toast */
+    small?: boolean;
+    /** Removes the overlay background, and allows the modal to be positioned anywhere on the page */
+    noOverlay?: boolean;
+    /** Centers the horizontal position of the Modal. Used in conjunction with `noOverlay` */
+    centerX?: boolean;
+    /** Centers the vertical position of the Modal. Used in conjunction with `noOverlay` */
+    centerY?: boolean;
+    /** Sets the `top` position of the modal. Used in conjunction with `noOverlay` */
+    top?: number | string;
+    /** Sets the `bottom` position of the modal. Used in conjunction with `noOverlay` */
+    bottom?: number | string;
+    /** Sets the `right` position of the modal. Used in conjunction with `noOverlay` */
+    right?: number | string;
+    /** Sets the `left` position of the modal. Used in conjunction with `noOverlay` */
+    left?: number | string;
+} & WidthHeight & Padding;
+declare const Modal: {
+    ({ children, rootSelector, visible, width, height, onClose, closeIcon, preventOverlayClose, overlayColor, backgroundColor, small, noOverlay, centerX, centerY, top, bottom, right, left, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, }: ModalProps): import("react").ReactPortal | null;
+    Header: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        /** Controls whether or not the Modal is open */
+        as?: import("react").ElementType<any> | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Text: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        /** Controls whether or not the Modal is open */
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        primary?: boolean | undefined;
+        fontSize?: string | number | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        /** Controls whether or not the Modal is open */
+        as?: import("react").ElementType<any> | undefined;
+    } & Height & Margin, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Footer: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        /** Controls whether or not the Modal is open */
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        justify?: FlexPosition | undefined;
+        inline?: boolean | undefined;
+    } & Margin, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default Modal;

package/dist/esm/types/components/MultiSelect.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { DropdownOption } from './Dropdown';
+import { Width, Margin } from './types';
+declare type MultiSelectProps = {
+    /** The list of dropdown options to display */
+    options: DropdownOption[];
+    /** The list of selected options */
+    items: DropdownOption[];
+    /** A function that gives control of the list items to the user */
+    children?: (listOpen: boolean) => ReactNode;
+    /** Text to display in front of the list of selected items */
+    listText?: string;
+    /** The name of the items list to display (1/5 items) */
+    itemsTitle?: string;
+    /** The maximum number of items allowed to be selected */
+    maxItems?: number;
+    /** Sets the input placeholder text */
+    placeholder?: string;
+    /** As the dropdown is searched, the options narrow down according to the search value */
+    filter?: boolean;
+    /** Prevents the Dropdown from accepting any input other than what matches the provided options */
+    restrictInput?: boolean | ((text: string) => boolean);
+    /** Disables the Dropdown */
+    disabled?: boolean;
+    /** Function called after an item is selected */
+    addItem: (item: DropdownOption | null) => void;
+    /** Function called after an item is removed */
+    removeItem: (item: DropdownOption | null) => void;
+    /** The function to be called when the input is updated */
+    onTextChange?: (text: string) => void;
+} & Width & Margin;
+declare const MultiSelect: ({ children, options, items, listText, itemsTitle, maxItems, placeholder, width, filter, restrictInput, disabled, addItem, removeItem, onTextChange, ...props }: MultiSelectProps) => JSX.Element;
+export default MultiSelect;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Margin, ThemeProp } from './types';
+declare const Notification: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    color?: string | undefined;
+    position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
+    number?: boolean | undefined;
+    top?: string | number | undefined;
+    bottom?: string | number | undefined;
+    right?: string | number | undefined;
+    left?: string | number | undefined;
+} & ThemeProp & Margin, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default Notification;

package/dist/esm/types/components/Options.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode, MouseEvent, RefObject } from 'react';
+import { FlexPosition, Width } from './types';
+declare type OptionsProps = {
+    children: ReactNode;
+    /** The id of the Options container */
+    id?: string;
+    /** A ref to the Options container element */
+    containerRef?: RefObject<HTMLDivElement>;
+    /** Offsets the vertical position of the Options */
+    offsetY?: number;
+    /** Offsets the horizontal position of the Options */
+    offsetX?: number;
+    /** Centers the vertical position of the Options relative to the Options trigger */
+    centerY?: boolean;
+    /** Centers the horizontal position of the Options relative to the Options trigger */
+    centerX?: boolean;
+    /** The direction, in relation to the trigger, the options should open */
+    direction?: 'left' | 'right' | 'top' | 'bottom';
+    /** Overrides the default maxHeight of 200px */
+    maxHeight?: number;
+    /** The selector (id or className) of the element the options should open in relataion to */
+    parentSelector?: string;
+} & Width;
+declare const Options: {
+    ({ id, children, containerRef, parentSelector, width, maxHeight, offsetY, offsetX, centerY, centerX, direction, }: OptionsProps): JSX.Element;
+    Item({ children, id, onClick, selected, noSelect, contentPosition, color, accented, ...props }: OptionsItemProps): JSX.Element;
+};
+declare type OptionsItemProps = {
+    children?: ReactNode;
+    /** The id of the Option item */
+    id?: number | string;
+    /** The function to be called when the Option item is clicked */
+    onClick: (event: MouseEvent) => void;
+    /** Controls whether the Option appears to be hovered */
+    selected?: boolean;
+    /** Prevents the Option from appearing to be hovered */
+    noSelect?: boolean;
+    /** The flex positioning of the Option contents */
+    contentPosition?: FlexPosition;
+    /** The color of the Option text */
+    color?: string;
+    /** Sets the Option text color to theme.accent */
+    accented?: boolean;
+};
+export default Options;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Margin, Width } from './types';
+declare type PaginationProps = {
+    /** The callback function that responds with the active page */
+    onPageNav: (page: number) => void;
+    /** The number of page items */
+    totalPages: number;
+    /** The current page the component should display */
+    page?: number;
+    /** The max number of page items to display */
+    maxVisibleNumbers?: number;
+} & Margin & Width;
+declare const Pagination: ({ onPageNav, page, totalPages, maxVisibleNumbers, width, ...props }: PaginationProps) => JSX.Element;
+export default Pagination;

package/dist/esm/types/components/Progress/CirclePercent.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties as CSS } from 'react';
+import { Margin } from '../types';
+declare type Props = {
+    percent: number;
+    size?: number;
+    thickness?: number;
+    color?: CSS['backgroundColor'];
+} & Margin;
+declare const CirclePercent: ({ percent, size, thickness, color, margin, marginTop, marginBottom, marginRight, marginLeft, }: Props) => JSX.Element;
+export default CirclePercent;

package/dist/esm/types/components/Progress/Progress.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties as CSS } from 'react';
+import { Margin, WidthHeight } from '../types';
+declare type CircleProps = ({
+    circle?: false;
+    size?: never;
+} & WidthHeight) | {
+    /** Styles the Progress component as a circle */
+    circle: true;
+    /** The width and height of the circle */
+    size?: number;
+    width?: never;
+    height?: never;
+};
+declare type ProgressProps = {
+    /** The percent completed (0-100) */
+    percent: number;
+    /** The color of the progress bar */
+    color?: CSS['backgroundColor'];
+    /** The thickness of the bar or circle */
+    thickness?: number;
+} & CircleProps & Margin;
+declare const Progress: ({ percent, color, circle, width, height, size, thickness, margin, marginTop, marginBottom, marginRight, marginLeft, }: ProgressProps) => JSX.Element;
+export default Progress;

package/dist/esm/types/components/Progress/index.d.ts

@@ -0,0 +1,2 @@
+import Progress from './Progress';
+export default Progress;

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

@@ -0,0 +1,16 @@
+import { HTMLProps } from 'react';
+import { Margin, As } from './types';
+declare type RadioProps = {
+    /** Id of the input element */
+    id?: string;
+    /** Places a label element beside the radio. The value will set the text of the label */
+    label?: string;
+    /** Sets the label on the left or right of the radio */
+    labelPosition?: 'left' | 'right';
+    /** Disables the radio */
+    disabled?: boolean;
+    /** Controls the checked property of the radio */
+    checked?: boolean;
+} & Margin & As & HTMLProps<HTMLInputElement>;
+declare const Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: RadioProps) => JSX.Element;
+export default Radio;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { Margin, WidthHeight } from './types';
+declare type SliderProps = {
+    /** The current position of the slider knob */
+    value: number;
+    /** The max value of the slider */
+    max?: number;
+    /** The number by which the slider should increment/decrement */
+    step?: number;
+    /** Disables the slider */
+    disabled?: boolean;
+    /** The function that is called when the slider knob is changed */
+    onChange?: (progressValue: number) => void;
+} & WidthHeight & Margin;
+declare const Slider: ({ value, max, step, width, height, disabled, onChange, ...props }: SliderProps) => JSX.Element;
+export default Slider;

package/dist/esm/types/components/Spacer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const Spacer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("./types").Width & import("./types").Height, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default Spacer;

package/dist/esm/types/components/Spinner.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Sizes } from './Icon/Icon';
+import { Margin } from './types';
+declare type SpinnerProps = {
+    /** The size of the loading icon */
+    size?: Sizes;
+    /** The color of the loading icon */
+    color?: string;
+} & Margin;
+declare const Spinner: ({ size, color, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: SpinnerProps) => JSX.Element;
+export default Spinner;

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

@@ -0,0 +1,53 @@
+import { HTMLProps, MouseEvent, ReactNode } from 'react';
+import { ThemeProp, MarginPadding, Height, Width, FlexPosition, As } from './types';
+/** Table component */
+declare type TableBase = {
+    children?: ReactNode;
+    /** If a number, columns creates n number columns of an equal size. If a string, columns sets the gridTemplateColumns property   */
+    columns?: number | string;
+} & Width & MarginPadding;
+declare type DefaultTableProps = Omit<HTMLProps<HTMLTableElement>, 'as'> & As;
+declare const Table: {
+    ({ children, columns, ...rest }: TableBase & DefaultTableProps): JSX.Element;
+    /** Table.Header component */
+    Header({ children, columns, parentColumns, ...rest }: TableHeaderRow): JSX.Element;
+    HeaderCell: ({ children, onClick, contentPosition, sorted }: HeaderCellProps) => JSX.Element;
+    Body({ children, parentColumns, height }: BodyProps): JSX.Element;
+    /** Table.Row component */
+    Row({ children, columns, parentColumns, ...rest }: TableHeaderRow): JSX.Element;
+    Column({ children, contentPosition, defaultValue }: TableColumn): JSX.Element;
+};
+declare type TableHeaderRow = {
+    parentColumns?: number | string;
+} & TableBase & HTMLProps<HTMLTableRowElement>;
+/** Table.HeaderCell component */
+declare type HeaderCellProps = {
+    children?: ReactNode;
+    /** The flex positioning of the HeaderCell contents */
+    contentPosition?: FlexPosition;
+    /** The function to be called when the HeaderCell is clicked */
+    onClick?: (event: MouseEvent) => void;
+    /** Controls the direction of the sort icon indicating the direction of the data */
+    sorted?: 'asc' | 'desc' | 'inactive';
+};
+/** Table.Body component */
+declare type BodyProps = Omit<TableHeaderRow, 'columns'> & Height & HTMLProps<HTMLTableSectionElement>;
+/** Table.Column component */
+declare type TableColumn = {
+    children?: ReactNode;
+    /** The flex positioning of the Column contents */
+    contentPosition?: FlexPosition;
+    /** The string value to display if the child text is undefined (i.e. "N/A", "—") */
+    defaultValue?: string;
+};
+declare const TableColumn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    contentPosition?: FlexPosition | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    showDefault?: boolean | undefined;
+} & ThemeProp, {}, {}>;
+export default Table;

package/dist/esm/types/components/Toggle.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { CheckboxAttributes } from './FormControl';
+import { As, Margin } from './types';
+declare type ToggleProps = {
+    /** Id of the input element */
+    id?: string;
+    /** Places a label element beside the toggle. The value will set the text of the label */
+    label?: string;
+    /** Sets the label on the left or right of the toggle */
+    labelPosition?: 'left' | 'right';
+    /** Disables the toggle */
+    disabled?: boolean;
+    /** Controls the checked property of the toggle */
+    checked?: boolean;
+    /** The function called with the toggle value after the toggle is changed */
+    onChange: (val: boolean) => void;
+} & Margin & As & CheckboxAttributes;
+declare const Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: ToggleProps) => JSX.Element;
+export default Toggle;

package/dist/esm/types/components/Tooltip.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { ThemeProp } from './types';
+declare type Position = 'top' | 'bottom' | 'right' | 'left' | 'top left' | 'bottom left' | 'top right' | 'bottom right';
+export declare type TooltipProps = {
+    children?: ReactNode;
+    /** The element that will trigger the opening of the Tooltip */
+    trigger: ReactNode;
+    /** Sets the instigator of the Tooltip opening */
+    on?: 'hover' | 'click';
+    /** The text content of the Tooltip */
+    content?: string;
+    /** The style prop of the Tooltip container */
+    style?: {
+        [key: string]: string | number;
+    };
+    /** The position of the Tooltip body and arrow in relation to the trigger */
+    position?: Position;
+    /** Offsets the vertical position of the Tooltip */
+    offsetY?: number;
+    /** Offsets the horizontal position of the Tooltip arrow */
+    offsetArrowX?: number;
+    /** Offsets the horizontal position of the Tooltip */
+    offsetX?: number;
+    /** The width of the Tooltip container */
+    containerWidth?: number | string;
+    /** The width of the Tooltip element */
+    width?: number | string;
+    /** The maxWidth of the Tooltip element */
+    maxWidth?: number | string;
+    /** The textAlignment of the Tooltip text */
+    textAlign?: 'left' | 'right' | 'center';
+    /** Prevents the Tooltip from opening */
+    disabled?: boolean;
+    /** The id of the Tooltip element */
+    id?: string;
+    /** The function called after the Tooltip opens */
+    afterShow?: () => void;
+    /** The function called after the Tooltip closes */
+    afterHide?: () => void;
+    /** The backgroundColor of the Tooltip element */
+    bgColor?: string;
+    /** The text color of the Tooltip element */
+    color?: string;
+};
+declare const Tooltip: {
+    ({ trigger, on, children, content, style, position, offsetY, offsetArrowX, offsetX, containerWidth, width, maxWidth, textAlign, disabled, id, afterShow, afterHide, bgColor, color, }: TooltipProps): JSX.Element;
+    Header: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Body: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default Tooltip;

package/dist/esm/types/components/TransferList.d.ts

@@ -0,0 +1,47 @@
+import { CSSProperties as CSS, ReactElement } from 'react';
+import { ColorNames } from '../theme/colors';
+import { Margin, Width } from './types';
+declare type Color = ColorNames | CSS['color'];
+export declare type Item = {
+    /** Unique ID of the item */
+    id: number | string;
+    /** The text displayed for the transfer item */
+    label: string;
+    /** Used as the data of the item */
+    value?: unknown;
+    /** If both `header` and `body` are provided, this text will be styled as the transfer item's header */
+    header?: string;
+    /** If both `header` and `body` are provided, this text will be styled as the transfer item's body */
+    body?: string;
+    /** Any element to be displayed to the left of the item's label/header/body */
+    leftElement?: ReactElement;
+    /** Any element to be displayed to the right of the item's label/header/body */
+    rightElement?: ReactElement;
+    /** The left border color of the transfer item */
+    color?: Color;
+    /** Used to preselect an item */
+    selected?: boolean;
+    [key: string]: unknown;
+};
+export declare type Action = 'select' | 'remove';
+export declare type Next = (item?: Item) => void;
+declare type TransferListProps = {
+    /** Array of objects that will be rendered as individual items in the list */
+    items: Item[];
+    /** The function called when an item is selected or removed. It passes the entire list of selected items. */
+    onChange: (list: Item[]) => void;
+    /** The function called before an item is selected or removed */
+    beforeItemChange?: (item: Item, action: Action, next: Next) => void;
+    /** The header title of the transfer list */
+    listTitle?: string;
+    /** The text to display in a readOnly state where there are no selected items */
+    noItemsMessage?: string;
+    /** Disables moving items and only displays the list of selected items */
+    readOnly?: boolean;
+    /** Hides the select all button */
+    hideSelectAll?: boolean;
+    /** Hides the remove all button */
+    hideRemoveAll?: boolean;
+} & Width & Margin;
+declare const TransferList: ({ items, onChange, beforeItemChange, listTitle, noItemsMessage, hideSelectAll, hideRemoveAll, readOnly, width, margin, marginTop, marginBottom, marginRight, marginLeft, }: TransferListProps) => JSX.Element;
+export default TransferList;

package/dist/esm/types/components/draftUtils.d.ts

@@ -0,0 +1,49 @@
+import { EditorState, CompositeDecorator, RawDraftContentState, ContentState, RawDraftEntity } from 'draft-js';
+import { MergeField } from './types';
+export declare const decorator: CompositeDecorator;
+export declare const decode: (data: RawDraftContentState) => string;
+export declare const encode: (text: string, fields: MergeField[], displayValue: boolean) => ContentState;
+/**
+ * Returns a new EditorState using the content passed in.
+ * @param {string} value - The string of text to go in the editor
+ * @param {array} fields - Array of field objects
+ * @param {boolean} displayValue - Flag to display the merge fields value or label
+ */
+export declare const createStateWithContent: (value: string, fields: MergeField[], displayValue: boolean) => EditorState;
+/**
+ * Returns the raw form of the Editor content.
+ * @param {EditorState} state - The current state of the editor
+ * @param {boolean} decoded - Whether or not the state is to be decoded into plain text
+ */
+export declare const getRawState: (state: EditorState, decoded?: boolean) => string | RawDraftContentState;
+/**
+ * Returns an array of entities contained in the EditorState.
+ * @param {EditorState} state - The current state of the editor
+ */
+export declare const getEntities: (state: EditorState) => RawDraftEntity<{
+    [key: string]: any;
+}>[];
+/**
+ * Checks if the editor contains any merged but unknown fields. Returns a true or false
+ * @param {EditorState} state - The current state of the editor
+ */
+export declare const hasMissingEntities: (state: EditorState) => boolean;
+/**
+ * Returns a new EditorState with a merge field inserted at the cursor, then places the cursor at the end of the newly inserted text.
+ * @param {object} field - The merge field object to be inserted
+ * @param {array} fields - Array of field objects
+ * @param {EditorState} state - The current state of the editor
+ * @param {boolean} displayValue - Flag to display the merge fields value or label
+ */
+export declare const insertFieldEntity: (field: MergeField, fields: MergeField[], state: EditorState, displayValue: boolean) => EditorState;
+/**
+ * Returns a new EditorState with the cursor focused at the end of the text.
+ * @param {EditorState} state - The current state of the editor
+ */
+export declare const getFocusStateAtEnd: (state: EditorState) => EditorState;
+/**
+ * Returns a new EditorState with the pasted content merged in with the current state.
+ * @param {string} text - The text string being pasted
+ * @param {EditorState} state - The current state of the editor
+ */
+export declare const getPastedState: (text: string, state: EditorState) => EditorState;

package/dist/esm/types/components/helpers/getIcon.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { IconProps } from '../Icon/Icon';
+import { IconNames } from '../Icon/icons';
+import { TooltipProps } from '../Tooltip';
+export declare type IconType = IconNames | IconProps | ReactElement<IconProps> | ReactElement<TooltipProps>;
+declare type ReducedIconProps = Omit<IconProps, 'name' | 'svg'>;
+declare const getIcon: (icon: IconType, props?: ReducedIconProps) => ReactElement<IconProps | TooltipProps>;
+export default getIcon;