@wavv/ui 1.0.0

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

@@ -0,0 +1,48 @@
+import { ElementType, FocusEvent } from 'react';
+export type { ThemeProp } from '../theme';
+export declare type Margin = {
+    margin?: number | string;
+    marginTop?: number | string;
+    marginBottom?: number | string;
+    marginRight?: number | string;
+    marginLeft?: number | string;
+};
+export declare type Padding = {
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingBottom?: number | string;
+    paddingRight?: number | string;
+    paddingLeft?: number | string;
+};
+export declare type Width = {
+    width?: number | string;
+};
+export declare type Height = {
+    height?: number | string;
+};
+export declare type WidthHeight = Width & Height;
+export declare type MarginPadding = Margin & Padding;
+export declare type FlexPosition = 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+export declare type As = {
+    as?: ElementType<unknown>;
+};
+export declare type InputFocusEvent = FocusEvent<HTMLInputElement>;
+export declare type MergeField = {
+    id: string;
+    label: string;
+    value?: string;
+};
+export declare type InputRef = {
+    focus: () => void;
+    blur: () => void;
+    hasFocus: boolean;
+};
+export declare type AudioRef = {
+    play?: () => void;
+    pause?: () => void;
+    stop?: () => void;
+};
+export declare type DraftEditorRef = {
+    insertField: (field: MergeField) => void;
+    focusAtEnd: () => void;
+};

package/dist/esm/types/global-styles/ResetStyles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import 'sanitize.css';
+declare type ResetStylesProps = {
+    /** An array of font families to pass to the font loader */
+    families?: string[];
+    /** The default font family to set */
+    fontFamily?: string;
+};
+declare const ResetStyles: ({ families, fontFamily }: ResetStylesProps) => JSX.Element;
+export default ResetStyles;

package/dist/esm/types/global-styles/ScrollbarStyles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ScrollbarStyles: () => JSX.Element;
+export default ScrollbarStyles;

package/dist/esm/types/global-styles/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ScrollbarStyles } from './ScrollbarStyles';
+export { default as ResetStyles } from './ResetStyles';

package/dist/esm/types/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { default as useOnClickOutside } from './useOnClickOutside';
+export { default as useWindowSize } from './useWindowSize';
+export { default as useSelectAll } from './useSelectAll';
+export { default as useEventListener } from './useEventListener';
+export { default as useSelect } from './useSelect';

package/dist/esm/types/hooks/useEventListener.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const useEventListener: <T extends Event>(element: MutableRefObject<HTMLElement> | HTMLElement | Document | Window, type: keyof WindowEventMap, listener: (event: T) => void, condition?: boolean, dependencies?: unknown[]) => void;
+export default useEventListener;

package/dist/esm/types/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const useOnClickOutside: <T extends HTMLElement>(onClickOutside: () => void, condition?: boolean, exclusions?: string[]) => MutableRefObject<T | null>;
+export default useOnClickOutside;

package/dist/esm/types/hooks/useSelect.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { OptionItem } from '../components/Dropdown/DropdownUtils';
+declare type UseSelectProps = {
+    /** The options that will be displayed in the list */
+    options: OptionItem[];
+    /** The function called when an option is selected */
+    select: (option: OptionItem | string | null) => void;
+    /** The function to close the open option list */
+    close: Function;
+    /** The function to open the closed option list */
+    open: Function;
+    /** The condition for when the list of options is open */
+    isOpen: boolean;
+    /** The condition for when the select element is focused */
+    isFocused?: boolean;
+    /** The text from a search Droppdown */
+    searchText?: string;
+};
+declare const useSelect: ({ options, select, close, open, searchText, isOpen, isFocused }: UseSelectProps) => readonly [number, import("react").RefObject<HTMLDivElement>];
+export default useSelect;

package/dist/esm/types/hooks/useSelectAll.d.ts

@@ -0,0 +1,12 @@
+declare type ListItem = {
+    id: number | string;
+    [otherProps: string]: unknown;
+};
+declare const useSelectAll: (items: ListItem[], defaultSelected?: boolean) => {
+    list: ListItem[];
+    partial: boolean;
+    allSelected: boolean;
+    onSelectAll: (selectAll: boolean) => void;
+    onChildChange: (val: boolean, id: number | string) => void;
+};
+export default useSelectAll;

package/dist/esm/types/hooks/useWindowSize.d.ts

@@ -0,0 +1,5 @@
+declare const useWindowSize: () => {
+    width: number | null;
+    height: number | null;
+};
+export default useWindowSize;

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

@@ -0,0 +1,48 @@
+export { default as Audio } from './components/Audio';
+export { default as Button } from './components/Button';
+export { default as Calendar } from './components/Calendar';
+export { default as Checkbox } from './components/Checkbox';
+export { default as Code } from './components/Code';
+export { default as DocTable } from './components/DocTable';
+export { default as DraftEditor } from './components/DraftEditor';
+export { default as Dropdown } from './components/Dropdown';
+export { default as Form } from './components/Form';
+export { default as Grid } from './components/Grid';
+export { default as Icon } from './components/Icon';
+export { default as ImageViewer } from './components/ImageViewer';
+export { default as InlineCode } from './components/InlineCode';
+export { default as Input } from './components/Input';
+export { default as InputUtils } from './components/InputHelpers';
+export { default as Label } from './components/Label';
+export { default as Menu } from './components/Menu';
+export { default as Message } from './components/Message';
+export { default as MessageHr } from './components/MessageHr';
+export { default as Modal } from './components/Modal';
+export { default as MultiSelect } from './components/MultiSelect';
+export { default as Notification } from './components/Notification';
+export { default as Options } from './components/Options';
+export { default as Pagination } from './components/Pagination';
+export { default as Progress } from './components/Progress';
+export { default as Radio } from './components/Radio';
+export { default as ResetStyles } from './global-styles/ResetStyles';
+export { default as ScrollbarStyles } from './global-styles/ScrollbarStyles';
+export { default as Slider } from './components/Slider';
+export { default as Spacer } from './components/Spacer';
+export { default as Spinner } from './components/Spinner';
+export { default as TransferList } from './components/TransferList';
+export { default as Table } from './components/Table';
+export { default as Toggle } from './components/Toggle';
+export { default as Tooltip } from './components/Tooltip';
+export { default as theme } from './theme';
+export type { ITheme, ThemeProp } from './theme/ThemeTypes';
+export type { IconNames } from './components/Icon/icons';
+export type { DropdownOption } from './components/Dropdown';
+export type { Item as TransferItem, Action as TransferAction, Next as TransferNext } from './components/TransferList';
+export type { AudioRef, DraftEditorRef, InputRef } from './components/types';
+export { default as useEventListener } from './hooks/useEventListener';
+export { default as useOnClickOutside } from './hooks/useOnClickOutside';
+export { default as useSelect } from './hooks/useSelect';
+export { default as useSelectAll } from './hooks/useSelectAll';
+export { default as useWindowSize } from './hooks/useWindowSize';
+export { default as formatDate } from './utils/formatDate';
+export { default as copyToClipboard } from './utils/copyToClipboard';

package/dist/esm/types/theme/ThemeTypes.d.ts

@@ -0,0 +1,277 @@
+import { IColors } from './colors';
+declare type ButtonSize = {
+    height: number;
+    iconSize: number;
+    font: number;
+    padding: number;
+    iconOnlyPadding: number;
+};
+declare type LinkColors = {
+    secondaryColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    positiveColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    negativeColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    cautionColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+};
+export declare type ButtonState = {
+    color: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    outlineColor: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    background: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    outlineBackground: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    border: {
+        default: string;
+        hover: string;
+        active: string;
+    };
+    divider: string;
+};
+export interface ITheme {
+    name: 'light' | 'dark';
+    accent: string;
+    accentShade: string;
+    background0: string;
+    background1: string;
+    background2: string;
+    background3: string;
+    background4: string;
+    background5: string;
+    /** 5% opacity */
+    scale0: string;
+    /** 10% opacity */
+    scale1: string;
+    /** 20% opacity */
+    scale2: string;
+    /** 30% opacity */
+    scale3: string;
+    /** 40% opacity */
+    scale4: string;
+    /** 50% opacity */
+    scale5: string;
+    /** 60% opacity */
+    scale6: string;
+    /** 70% opacity */
+    scale7: string;
+    /** 80% opacity */
+    scale8: string;
+    /** 90% opacity */
+    scale9: string;
+    /** 100% opacity */
+    scale10: string;
+    button: {
+        small: ButtonSize;
+        medium: ButtonSize;
+        large: ButtonSize;
+        primary: ButtonState;
+        secondary: ButtonState;
+        negative: ButtonState;
+        positive: ButtonState;
+        caution: ButtonState;
+        subtle: ButtonState & LinkColors;
+        link: ButtonState & LinkColors;
+        disabled: ButtonState;
+        color: {
+            default: string;
+        };
+    };
+    calendar: {
+        background: {
+            container: string;
+            hover: string;
+            active: string;
+            activeHover: string;
+        };
+        color: {
+            disabled: string;
+            default: string;
+            active: string;
+            current: string;
+            outside: string;
+            weekday: string;
+            monthYear: string;
+            iconDefault: string;
+            iconHover: string;
+        };
+    };
+    color: IColors;
+    defaultBorder: string;
+    /** '0px 2px 4px 2px rgba(0, 0, 0, 0.05)' */
+    elevation0: string;
+    /** '0px 2px 4px 2px rgba(0, 0, 0, 0.1)' */
+    elevation1: string;
+    /** '0px 2px 4px 2px rgba(0, 0, 0, 0.15)' */
+    elevation2: string;
+    /** '0px 4px 8px 2px rgba(0, 0, 0, 0.2)' */
+    elevation3: string;
+    /** '0px 4px 8px 2px rgba(0, 0, 0, 0.25)' */
+    elevation4: string;
+    size: {
+        /** 4px */
+        xs: number;
+        /** 8px */
+        sm: number;
+        /** 16px */
+        md: number;
+        /** 24px */
+        lg: number;
+    };
+    font: {
+        weight: {
+            /** 400 */
+            default: number;
+            /** 500 */
+            medium: number;
+            /** 600 */
+            semiBold: number;
+            /** 700 */
+            bold: number;
+        };
+        size: {
+            /** 10px */
+            xs: number;
+            /** 12px */
+            sm: number;
+            /** 14px */
+            md: number;
+            /** 16px */
+            lg: number;
+            /** 18px */
+            xl: number;
+        };
+        family: {
+            /** "'Roboto', sans-serif" */
+            default: string;
+            /** "'Roboto', sans-serif" */
+            medium: string;
+            /** "'Roboto', sans-serif" */
+            light: string;
+        };
+    };
+    formControl: {
+        color: {
+            default: string;
+            hover: string;
+            active: string;
+            activeHover: string;
+            disabled: string;
+        };
+    };
+    input: {
+        borderRadius: number;
+        background: {
+            default: string;
+            hover: string;
+            focused: string;
+            disabled: string;
+        };
+        color: {
+            default: string;
+            disabled: string;
+            placeholder: string;
+            description: string;
+            descriptionError: string;
+        };
+        borderColor: {
+            default: string;
+            hover: string;
+            focused: string;
+            disabled: string;
+            error: string;
+        };
+        labelColor: {
+            default: string;
+            hover: string;
+            filled: string;
+            focused: string;
+            disabled: string;
+        };
+    };
+    menu: {
+        background: string;
+    };
+    menuItem: {
+        borderColor: string;
+        background: {
+            active: string;
+            hover: string;
+            inactive: string;
+        };
+        color: {
+            active: string;
+            hover: string;
+            inactive: string;
+        };
+    };
+    modal: {
+        background: string;
+        color: {
+            header: string;
+            body: string;
+        };
+    };
+    options: {
+        background: string;
+    };
+    optionItem: {
+        background: {
+            active: string;
+            inactive: string;
+        };
+        color: {
+            active: string;
+            inactive: string;
+            accent: string;
+        };
+    };
+    table: {
+        color: {
+            header: string;
+            body: string;
+        };
+        borderColor: string;
+    };
+    toggle: {
+        slider: string;
+    };
+    tooltip: {
+        background: string;
+        color: {
+            default: string;
+            subtext: string;
+        };
+    };
+}
+export declare type ThemeProp = {
+    theme?: ITheme;
+};
+export {};

package/dist/esm/types/theme/colors.d.ts

@@ -0,0 +1,201 @@
+declare const colors: {
+    logo1: string;
+    logo2: string;
+    logo3: string;
+    brand: string;
+    brandShade1: string;
+    brandShade2: string;
+    brandDark: string;
+    brandDarkShade1: string;
+    brandTint0: string;
+    brandTint1: string;
+    brandTint2: string;
+    brandTint3: string;
+    brandTint4: string;
+    brandBackground0: string;
+    brandBackground1: string;
+    brandBackground2: string;
+    brandBackground3: string;
+    brandBackground4: string;
+    brandBackground5: string;
+    error: string;
+    errorShade1: string;
+    errorShade2: string;
+    errorTint0: string;
+    errorTint1: string;
+    errorTint2: string;
+    warning: string;
+    warningShade1: string;
+    warningShade2: string;
+    warningTint0: string;
+    warningTint1: string;
+    warningTint2: string;
+    alert: string;
+    alertShade1: string;
+    alertShade2: string;
+    alertTint0: string;
+    alertTint1: string;
+    alertTint2: string;
+    success: string;
+    successShade1: string;
+    successShade2: string;
+    successTint0: string;
+    successTint1: string;
+    successTint2: string;
+    grayscale0: string;
+    grayscale1: string;
+    grayscale2: string;
+    grayscale3: string;
+    grayscale4: string;
+    grayscale5: string;
+    grayscale6: string;
+    grayscale7: string;
+    grayscale8: string;
+    grayscale9: string;
+    grayscale10: string;
+    contrast0: string;
+    contrast1: string;
+    contrast2: string;
+    contrast3: string;
+    contrast4: string;
+    contrast5: string;
+    contrast6: string;
+    contrast7: string;
+    contrast8: string;
+    contrast9: string;
+    contrast10: string;
+};
+export default colors;
+export interface IColors {
+    /** #0074F4 */
+    logo1: string;
+    /** #00A9E2 */
+    logo2: string;
+    /** #67C728 */
+    logo3: string;
+    /** #0074F4 */
+    brand: string;
+    /** #0068DC */
+    brandShade1: string;
+    /** #005DC3 */
+    brandShade2: string;
+    /** #4C9EF7 */
+    brandDark: string;
+    /** #5EA8F8 */
+    brandDarkShade1: string;
+    /** 5% of #0074F4 */
+    brandTint0: string;
+    /** 10% of #0074F4 */
+    brandTint1: string;
+    /** 20% of #0074F4 */
+    brandTint2: string;
+    /** 30% of #0074F4 */
+    brandTint3: string;
+    /** 40% of #0074F4 */
+    brandTint4: string;
+    /** #001828 */
+    brandBackground0: string;
+    /** #0D2433 */
+    brandBackground1: string;
+    /** #192F3D */
+    brandBackground2: string;
+    /** #334653 */
+    brandBackground3: string;
+    /** #475964 */
+    brandBackground4: string;
+    /** #596A74 */
+    brandBackground5: string;
+    /** #FF6068 */
+    error: string;
+    /** #E6565E */
+    errorShade1: string;
+    /** #CC4D53 */
+    errorShade2: string;
+    /** 5% of #FF6068 */
+    errorTint0: string;
+    /** 10% of #FF6068 */
+    errorTint1: string;
+    /** 20% of #FF6068 */
+    errorTint2: string;
+    /** #FF9900 */
+    warning: string;
+    /** #E68A00 */
+    warningShade1: string;
+    /** #CC7A00 */
+    warningShade2: string;
+    /** 5% of #FF9900 */
+    warningTint0: string;
+    /** 10% of #FF9900 */
+    warningTint1: string;
+    /** 20% of #FF9900 */
+    warningTint2: string;
+    /** #F0BB00 */
+    alert: string;
+    /** #E4B200 */
+    alertShade1: string;
+    /** #C09600 */
+    alertShade2: string;
+    /** 5% of #F0BB00 */
+    alertTint0: string;
+    /** 10% of #F0BB00 */
+    alertTint1: string;
+    /** 20% of #F0BB00 */
+    alertTint2: string;
+    /** #00C242 */
+    success: string;
+    /** #00AF3B */
+    successShade1: string;
+    /** #009B35 */
+    successShade2: string;
+    /** 5% of #00C242 */
+    successTint0: string;
+    /** 10% of #00C242 */
+    successTint1: string;
+    /** 20% of #00C242 */
+    successTint2: string;
+    /** 5% of #001D32 */
+    grayscale0: string;
+    /** 10% of #001D32 */
+    grayscale1: string;
+    /** 20% of #001D32 */
+    grayscale2: string;
+    /** 30% of #001D32 */
+    grayscale3: string;
+    /** 40% of #001D32 */
+    grayscale4: string;
+    /** 50% of #001D32 */
+    grayscale5: string;
+    /** 60% of #001D32 */
+    grayscale6: string;
+    /** 70% of #001D32 */
+    grayscale7: string;
+    /** 80% of #001D32 */
+    grayscale8: string;
+    /** 90% of #001D32 */
+    grayscale9: string;
+    /** #001D32 */
+    grayscale10: string;
+    /** 5% of #FFFFFF */
+    contrast0: string;
+    /** 10% of #FFFFFF */
+    contrast1: string;
+    /** 20% of #FFFFFF */
+    contrast2: string;
+    /** 30% of #FFFFFF */
+    contrast3: string;
+    /** 40% of #FFFFFF */
+    contrast4: string;
+    /** 50% of #FFFFFF */
+    contrast5: string;
+    /** 60% of #FFFFFF */
+    contrast6: string;
+    /** 70% of #FFFFFF */
+    contrast7: string;
+    /** 80% of #FFFFFF */
+    contrast8: string;
+    /** 90% of #FFFFFF */
+    contrast9: string;
+    /** #FFFFFF */
+    contrast10: string;
+}
+export declare type ColorNames = keyof typeof colors;

package/dist/esm/types/theme/common/button.d.ts

@@ -0,0 +1,24 @@
+declare const _default: {
+    small: {
+        height: number;
+        iconSize: number;
+        font: number;
+        padding: number;
+        iconOnlyPadding: number;
+    };
+    medium: {
+        height: number;
+        iconSize: number;
+        font: number;
+        padding: number;
+        iconOnlyPadding: number;
+    };
+    large: {
+        height: number;
+        iconSize: number;
+        font: number;
+        padding: number;
+        iconOnlyPadding: number;
+    };
+};
+export default _default;