@wavv/ui 1.0.0

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Margin } from '../types';
+import { BasicButtonProps, ButtonComponentProps } from './ButtonTypes';
+/** Button Component */
+declare const Button: {
+    (props: ButtonComponentProps): JSX.Element;
+    Group: ({ children, disabled, outline, size, small, large, secondary, negative, positive, caution, collapse, ...props }: {
+        children: (import("react").ReactElement<BasicButtonProps | ButtonComponentProps, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<import("../Tooltip").TooltipProps, string | import("react").JSXElementConstructor<any>>) | (import("react").ReactElement<BasicButtonProps | ButtonComponentProps, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<import("../Tooltip").TooltipProps, string | import("react").JSXElementConstructor<any>>)[];
+        disabled?: boolean | undefined;
+        size?: "small" | "medium" | "large" | undefined;
+        small?: boolean | undefined;
+        large?: boolean | undefined;
+        outline?: boolean | undefined;
+        collapse?: boolean | undefined;
+    } & import("./ButtonTypes").ButtonStyles & Margin & import("../types").Width) => JSX.Element | null;
+};
+export default Button;

package/dist/esm/types/components/Button/ButtonLoader.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const ButtonLoader: ({ size }: {
+    size?: number | undefined;
+}) => JSX.Element;
+export default ButtonLoader;

package/dist/esm/types/components/Button/ButtonTypes.d.ts

@@ -0,0 +1,118 @@
+import { HTMLProps, MouseEvent, ReactNode } from 'react';
+import { OptionItem } from '../Dropdown/DropdownUtils';
+import { IconNames } from '../Icon/icons';
+import { Margin, As } from '../types';
+declare type ButtonAttributes = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'size'> & {
+    type?: 'button' | 'reset' | 'submit';
+} & As;
+declare type ButtonBaseProps = {
+    children?: ReactNode;
+    joined?: 'left' | 'right' | 'middle';
+    preventPointerEvents?: boolean;
+    /** Gives the button a semi-transparent background with a solid border */
+    outline?: boolean;
+    /** Prevents the button from being clicked */
+    disabled?: boolean;
+    /** Adds an icon for the specific icon name to the button */
+    icon?: IconNames;
+    /** Positions the icon to the left or right of the button text */
+    iconPosition?: 'left' | 'right';
+    /** Defines the size of the button */
+    size?: 'small' | 'medium' | 'large';
+    /** Reduces the size of the button */
+    small?: boolean;
+    /** Increases the size of the button */
+    large?: boolean;
+    /** Adds a loading icon over the top of the button contents */
+    isLoading?: boolean;
+    /** Removes the text on a button if the button has an icon */
+    collapse?: boolean;
+    /** The function to be called when the button is clicked */
+    onClick?: (event: MouseEvent) => void;
+    /** Sets the text backgroundColor of the button */
+    backgroundColor?: string;
+    /** Sets the text color of the button */
+    color?: string;
+} & ButtonAttributes;
+declare type ButtonStyleProps = {
+    /** Displays a button with secondary colors */
+    secondary?: boolean;
+    /** Displays a red button */
+    negative?: boolean;
+    /** Displays a green button */
+    positive?: boolean;
+    /** Displays a yellow button */
+    caution?: boolean;
+    /** Displays a button with a background on hover or active */
+    subtle?: boolean;
+    /** Displays a button with no background or padding */
+    link?: boolean;
+    /** Displays a fully rounded button with a fixed width and height */
+    circle?: boolean;
+};
+declare type Primary = {
+    /** Displays a button with secondary colors */
+    secondary?: never;
+    /** Displays a red button */
+    negative?: never;
+    /** Displays a green button */
+    positive?: never;
+    /** Displays a yellow button */
+    caution?: never;
+};
+declare type Secondary = {
+    secondary?: boolean;
+    negative?: never;
+    positive?: never;
+    caution?: never;
+};
+declare type Negative = {
+    negative?: boolean;
+    secondary?: never;
+    positive?: never;
+    caution?: never;
+};
+declare type Positive = {
+    positive?: boolean;
+    negative?: never;
+    caution?: never;
+    secondary?: never;
+};
+declare type Caution = {
+    caution?: boolean;
+    positive?: never;
+    negative?: never;
+    secondary?: never;
+};
+export declare type ButtonStyles = Primary | Secondary | Negative | Positive | Caution;
+export declare type BasicButtonProps = ButtonBaseProps & ButtonStyleProps;
+export declare type DropdownProps = {
+    dropdown?: false;
+    options?: never;
+    direction?: never;
+    afterShow?: never;
+    afterHide?: never;
+} | {
+    /** Adds a dropdown button to the main button, allowing for multiple button options */
+    dropdown: true;
+    /** The dropdown options array of { id: string; label: string; action: () => void; } */
+    options: OptionItem[];
+    /** The direction the options should open in relation to the button  */
+    direction?: 'top' | 'bottom';
+    /** The function to be called when the options are opened */
+    afterShow?: () => void;
+    /** The function to be called when the options are closed */
+    afterHide?: () => void;
+};
+export declare type ButtonDropdownProps = {
+    options: OptionItem[];
+    direction?: 'top' | 'bottom';
+    afterShow?: () => void;
+    afterHide?: () => void;
+} & BasicButtonProps;
+export declare type ButtonComponentProps = {
+    /** Sets the text of the button */
+    content?: string;
+    joined?: never;
+} & BasicButtonProps & DropdownProps & Margin;
+export {};

package/dist/esm/types/components/Button/Group.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { BasicButtonProps, ButtonComponentProps, ButtonStyles } from './ButtonTypes';
+import { TooltipProps } from '../Tooltip';
+import { Margin, Width } from '../types';
+declare type ButtonChild = ReactElement<ButtonComponentProps | BasicButtonProps>;
+declare type TooltipChild = ReactElement<TooltipProps>;
+declare type GroupChild = ButtonChild | TooltipChild;
+declare type GroupProps = {
+    children: GroupChild | GroupChild[];
+    disabled?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    small?: boolean;
+    large?: boolean;
+    outline?: boolean;
+    collapse?: boolean;
+} & ButtonStyles & Margin & Width;
+declare const Group: ({ children, disabled, outline, size, small, large, secondary, negative, positive, caution, collapse, ...props }: GroupProps) => JSX.Element | null;
+export default Group;

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

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

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare type CalendarProps = {
+    /** Optional date the initial selected calendar day should be set to. */
+    date?: Date;
+    /** The function to be called when a date is selected */
+    onChange: (date: Date) => void;
+    /** Prevents selection of dates in the past (relative to the set date or current date). */
+    preventPast?: boolean | Date;
+    /** Prevents selection of dates in the futurepast (relative to the set date or current date). */
+    preventFuture?: boolean | Date;
+    /** Removes the Calendar's boxShadow */
+    noShadow?: boolean;
+};
+declare const Calendar: ({ date, onChange, preventPast, preventFuture, noShadow }: CalendarProps) => JSX.Element;
+export default Calendar;

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

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

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { Language } from 'prism-react-renderer';
+import { Margin } from '../types';
+declare type RestLanguage = 'rest-get' | 'rest-post' | 'rest-put' | 'rest-delete' | 'rest-options';
+declare type WithChildren = {
+    /** The string to be rendered in the code snippet */
+    children: string;
+    /** The alternative to passing the code snippet in as a child */
+    code?: never;
+};
+declare type WithCode = {
+    code: string;
+    children?: never;
+};
+declare type Children = WithChildren | WithCode;
+declare type CodeProps = {
+    /** The metadata string passed in by MDX */
+    className?: string;
+    /** The syntax language to be used for the code snippet */
+    lang?: Language | RestLanguage;
+    /** The line numbers in the code snippet that should be highlighted */
+    lineHighlights?: string;
+    /** Hides the line numbers in the code snippet */
+    noNumbers?: boolean;
+} & Children & Margin;
+declare const Code: ({ children, code, className: metaData, lang: langProp, lineHighlights: lineHighlightsProp, noNumbers: noNumbersProp, margin, marginTop, marginBottom, marginRight, marginLeft, }: CodeProps) => JSX.Element;
+export default Code;

package/dist/esm/types/components/Code/Copy.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Copy: ({ content }: {
+    content: string;
+}) => JSX.Element;
+export default Copy;

package/dist/esm/types/components/Code/Endpoint.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const Endpoint: ({ method, url }: {
+    method: string;
+    url: string;
+}) => JSX.Element;
+export default Endpoint;

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

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ThemeProp } from './types';
+declare const Table: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ThemeProp, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export default Table;

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

@@ -0,0 +1,51 @@
+import { KeyboardEvent, CSSProperties as CSS } from 'react';
+import { DraftEditorRef, InputFocusEvent, Margin, MergeField } from './types';
+declare const DraftEditor: import("react").ForwardRefExoticComponent<{
+    /** Controlled text value of the editor */
+    value: string;
+    /** Function called after editor change with the text value and boolean indicating missing merge fields */
+    onChange?: ((text: string, hasMissing: boolean) => void) | undefined;
+    /** Function called after the enter key is pressed */
+    onEnterKey?: ((e: KeyboardEvent) => void) | undefined;
+    /** Callback run after onFocus event */
+    onFocus?: ((event?: InputFocusEvent) => void) | undefined;
+    /** Callback run after onBlur event */
+    onBlur?: ((event?: InputFocusEvent) => void) | undefined;
+    /** Array of MergeFields ({ id: string, label: string, value?: string }) for the editor to use/parse */
+    mergeFields?: MergeField[] | undefined;
+    /** Placeholder text of editor when value is empty */
+    placeholder?: string | undefined;
+    /** Width of the editor */
+    width?: string | number | undefined;
+    /** Height of the editor */
+    height?: number | undefined;
+    /** Max Height of the editor. Editor contents will scroll after this height is reached */
+    maxHeight?: number | undefined;
+    /** Removes the border from the editor */
+    borderless?: boolean | undefined;
+    /** Removes the padding from the editor */
+    noPadding?: boolean | undefined;
+    /** Disables any editing capability of the editor */
+    readOnly?: boolean | undefined;
+    /** Displays the value of the merge field rather than the label */
+    displayMergedValues?: boolean | undefined;
+    /** Sets the text color of the editor */
+    color?: string | undefined;
+    /** Sets the overflow css value of the editor */
+    overflow?: CSS['overflow'];
+    /** Truncates the editor text to the number of lines specified and adds an ellipsis textOverflow */
+    clampLines?: number | undefined;
+    /** Places a label element above the input. The value will set the text of the label */
+    label?: string | undefined;
+    /** Disables the input */
+    disabled?: boolean | undefined;
+    /** Sets the input borderRadius */
+    borderRadius?: string | number | undefined;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string | undefined;
+    /** Sets the editor fontSize */
+    fontSize?: string | number | undefined;
+    /** Removes the border, padding, and backgroundColor from the DraftEditor */
+    textOnly?: boolean | undefined;
+} & Margin & import("react").RefAttributes<DraftEditorRef>>;
+export default DraftEditor;

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

@@ -0,0 +1,85 @@
+import { ReactNode, RefObject } from 'react';
+import { InputProps } from '../Input';
+import { Margin, WidthHeight, InputFocusEvent, InputRef } from '../types';
+import { OptionItem, DropdownItemProps } from './DropdownUtils';
+declare type RestInputProps = Omit<InputProps, 'value' | 'onChange' | 'onError'>;
+declare type DropdownProps = {
+    children?: ReactNode;
+    /** The function to be called when an option is selected */
+    onChange?: (item: OptionItem | null) => void;
+    /** The function to be called when the search input is updated */
+    onTextChange?: (text: string) => void;
+    /** The value of the Dropdown */
+    value?: string | number;
+    /** The function to be called when the Dropdown is opened */
+    afterShow?: () => void;
+    /** The function to be called when the Dropdown is closed */
+    afterHide?: () => void;
+    /** The function to be called when the Dropdown input is focused */
+    onFocus?: (event?: InputFocusEvent) => void;
+    /** The function to be called when the Dropdown input is blurred */
+    onBlur?: (event?: InputFocusEvent) => void;
+    /** The function to be called when the Dropdown input goes to or from an invalid state */
+    onError?: (invalid: boolean) => void;
+    /** Sets the input placeholder text */
+    placeholder?: string;
+    /** Sets the input placeholder color */
+    placeholderColor?: string;
+    /** The options to be displayed */
+    options?: OptionItem[];
+    /** Removes the border from the Dropdown input */
+    borderless?: boolean;
+    /** Sets the input borderColor */
+    borderColor?: string;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string;
+    /** Removes the caret icon from the right side of the Dropdown */
+    hideIcon?: boolean;
+    /** Displays a spinner icon on the right side of the input */
+    isLoading?: boolean;
+    /** Resets the selected text in the dropdown after an option is selected */
+    clearOnSelect?: boolean;
+    /** As the dropdown is searched, the options narrow down according to the search value */
+    filter?: boolean;
+    /** Removes the border and background-color from the Dropdown input */
+    textOnly?: boolean;
+    /** Adds a label to the Dropdown input */
+    label?: string;
+    /** Sets the id of the Dropdown input or trigger */
+    id?: string;
+    /** Sets the name of the Dropdown input */
+    name?: string;
+    /** An HTML element/React component to trigger the opening and closing of the dropdown instead of an input */
+    trigger?: ReactNode;
+    /** Center the Dropdown options vertically with the trigger */
+    centerY?: boolean;
+    /** Center the Dropdown options horizontally with the trigger */
+    centerX?: boolean;
+    /** Pixel amount the Dropdown options are offset vertically from the trigger */
+    offsetY?: number;
+    /** Pixel amount the Dropdown options are offset horizontally from the trigger */
+    offsetX?: number;
+    /** The direction the options should open in relation to the trigger  */
+    direction?: 'left' | 'right' | 'top' | 'bottom';
+    /** Sets the Dropdown fontSize */
+    fontSize?: number | string;
+    /** Places a description message below the Dropdown */
+    description?: string;
+    /** Disables the Dropdown */
+    disabled?: boolean;
+    /** Sets the Dropdown's bottom border and description text to red */
+    invalid?: boolean;
+    /** Allows the Dropdown input to be edited */
+    search?: boolean;
+    /** Prevents the search Dropdown from accepting any input other than what matches the provided options */
+    restrictInput?: boolean | ((text: string) => boolean);
+    /** The ref of the Dropdown's input */
+    inputRef?: RefObject<InputRef>;
+    /** The selector (id or className) of the element the options should open in relataion to */
+    optionsParent?: string;
+} & WidthHeight & Margin & RestInputProps;
+declare const Dropdown: {
+    ({ onChange, onTextChange, afterShow, afterHide, onFocus, onBlur, onError, placeholder, placeholderColor, value, options, children, borderless, borderColor, backgroundColor, hideIcon, clearOnSelect, textOnly, width, height, isLoading, margin, marginTop, marginBottom, marginRight, marginLeft, label, id, name, trigger, centerY, centerX, offsetY, offsetX, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, ...props }: DropdownProps): JSX.Element;
+    Item({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: DropdownItemProps): JSX.Element;
+};
+export default Dropdown;

package/dist/esm/types/components/Dropdown/DropdownUtils.d.ts

@@ -0,0 +1,46 @@
+import React, { MouseEvent, ReactElement, ReactNode } from 'react';
+import { FlexPosition } from '../types';
+export declare type OptionItem = {
+    id: number | string;
+    label: string;
+    header?: string;
+    body?: string;
+    leftElement?: ReactElement;
+    rightElement?: ReactElement;
+    onClick?: (event?: MouseEvent) => void;
+    value?: unknown;
+    [key: string]: unknown;
+};
+export declare type DropdownItemProps = {
+    setValue?: (v: OptionItem) => void;
+    close?: () => void;
+    children: ReactNode;
+    /** Sets the value of the option that will be returned in the object */
+    value?: number | string;
+    /** Sets the lable property of the object to be returned. Only required if the content of the Item is anything other than a string (icons, other elements) */
+    displayText?: string;
+    /** The flex positioning of the Item contents */
+    contentPosition?: FlexPosition;
+    /** The color of the Option text */
+    color?: string;
+    /** Sets the Option text color to theme.accent */
+    accented?: boolean;
+    /** Callback function to override the default onChange function of Dropdown. */
+    onClick?: (event: MouseEvent) => void;
+    /** The id of the Item element */
+    id: number | string;
+};
+declare type setValueFunc = (selection: OptionItem | string | null) => void;
+declare type toggleFunc = (event?: MouseEvent) => void;
+declare type StatePieces = {
+    selected: number;
+    search?: boolean;
+    filter?: boolean;
+    inputText?: string;
+};
+declare type FilterState = Omit<StatePieces, 'selected'>;
+export declare const getFilteredOptions: (options: OptionItem[], state: FilterState) => OptionItem[];
+export declare const getOptionsFromArray: (options: OptionItem[], setValue: setValueFunc, toggle: toggleFunc, state: FilterState) => JSX.Element[];
+export declare const getOptionsFromChildren: (children: ReactNode, setValue: setValueFunc, toggle: toggleFunc) => (React.ReactElement<DropdownItemProps, string | React.JSXElementConstructor<any>> | null)[];
+export declare const getCombinedChildren: (options: OptionItem[], children: ReactNode, setValue: setValueFunc, toggle: toggleFunc, state: StatePieces) => (React.ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];
+export {};

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

@@ -0,0 +1,3 @@
+import Dropdown from './Dropdown';
+export default Dropdown;
+export type { OptionItem as DropdownOption } from './DropdownUtils';