@wavv/ui 1.0.0

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

@@ -0,0 +1,55 @@
+import { ReactNode } from 'react';
+import { StyledComponent } from '@emotion/styled';
+import { MarginPadding, WidthHeight } from './types';
+export declare type GridProps = {
+    /** If a number, rows creates n number rows of an equal size. If a string, rows sets the gridTemplateRows property   */
+    rows?: string | number;
+    /** The amount of pixels between each row */
+    rowGap?: number;
+    /** If a number, columns creates n number columns of an equal size. If a string, columns sets the gridTemplateColumns property   */
+    columns?: string | number;
+    /** The amount of pixels between each column */
+    columnGap?: number;
+    /** Sets the gridGap property */
+    gap?: number;
+    /** Sets the gridTemplate property */
+    template?: string;
+    /** Sets the alignContent property */
+    alignContent?: string;
+    /** Sets the alignItems property */
+    alignItems?: string;
+    /** Sets the justifyContent property */
+    justifyContent?: string;
+    /** Sets the justifyItems property */
+    justifyItems?: string;
+    children?: ReactNode;
+} & WidthHeight & MarginPadding;
+declare type ItemProps = {
+    /** Sets the gridRow property */
+    row?: number;
+    /** Sets the gridRowStart property */
+    rowStart?: number;
+    /** Sets the gridRowEnd property */
+    rowEnd?: number;
+    /** Sets the gridColumn property */
+    column?: number;
+    /** Sets the gridColumnStart property */
+    columnStart?: number;
+    /** Sets the gridColumnEnd property */
+    columnEnd?: number;
+    /** Sets the gridArea property */
+    area?: number;
+    /** Sets the alignSelf property */
+    alignSelf?: string;
+    /** Sets the justifySelf property */
+    justifySelf?: string;
+    /** Sets the placeSelf property */
+    placeSelf?: string;
+    /** Sets the border property */
+    border?: string;
+} & MarginPadding;
+interface GridType extends StyledComponent<GridProps> {
+    Item?: StyledComponent<ItemProps>;
+}
+declare const Grid: GridType;
+export default Grid;

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

@@ -0,0 +1,36 @@
+import { HTMLProps, ReactNode } from 'react';
+import { IconNames } from './icons';
+import { As, MarginPadding } from '../types';
+export declare type Sizes = number | 'small' | 'medium' | 'large';
+declare type DivAttributes = Omit<HTMLProps<HTMLDivElement>, 'size'>;
+declare type ConditionalProps = {
+    /** Name of the specific icon to use */
+    name: IconNames;
+    svg?: never;
+} | {
+    /** The SVG element to wrap with the Icon component */
+    svg: ReactNode | (() => JSX.Element);
+    name?: never;
+};
+export declare type IconProps = {
+    /** Sets the width and height of the icon */
+    size?: Sizes;
+    /** Sets the width of the icon */
+    width?: number | string;
+    /** Sets the height of the icon */
+    height?: number | string;
+    /** Sets the color of the icon */
+    color?: string;
+    /** Sets the color of the icon when hovered */
+    hoverColor?: string;
+    /** Sets the cursor as a pointer when hovered */
+    pointer?: boolean;
+    /** Sets the color of the icon to the parent element's color */
+    inheritColor?: boolean;
+    /** Sets the style prop of the Icon wrapper element */
+    style?: {
+        [key: string]: string | number;
+    };
+} & ConditionalProps & MarginPadding & As & DivAttributes;
+declare const Icon: ({ name, svg, size, width, height, color, hoverColor, pointer, inheritColor, style, onClick, ...props }: IconProps) => JSX.Element | null;
+export default Icon;

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

@@ -0,0 +1,208 @@
+/// <reference types="react" />
+import ActivityHistory from '../../assets/icons/ActivityHistory';
+import Add from '../../assets/icons/Add';
+import AddCircle from '../../assets/icons/AddCircle';
+import AddCircleOutline from '../../assets/icons/AddCircleOutline';
+import AddPerson from '../../assets/icons/AddPerson';
+import ArrowDown from '../../assets/icons/ArrowDown';
+import ArrowLeft from '../../assets/icons/ArrowLeft';
+import ArrowRight from '../../assets/icons/ArrowRight';
+import ArrowUp from '../../assets/icons/ArrowUp';
+import Attachment from '../../assets/icons/Attachment';
+import Calendar from '../../assets/icons/Calendar';
+import Camera from '../../assets/icons/Camera';
+import Card from '../../assets/icons/Card';
+import CaretDown from '../../assets/icons/CaretDown';
+import CaretUp from '../../assets/icons/CaretUp';
+import CheckCircle from '../../assets/icons/CheckCircle';
+import CheckCircleOutline from '../../assets/icons/CheckCircleOutline';
+import Checkbox from '../../assets/icons/Checkbox';
+import CheckboxOff from '../../assets/icons/CheckboxOff';
+import CheckboxPartial from '../../assets/icons/CheckboxPartial';
+import ChevronDown from '../../assets/icons/ChevronDown';
+import ChevronLeft from '../../assets/icons/ChevronLeft';
+import ChevronRight from '../../assets/icons/ChevronRight';
+import ChevronUp from '../../assets/icons/ChevronUp';
+import Clapperboard from '../../assets/icons/Clapperboard';
+import ClapperboardOpen from '../../assets/icons/ClapperboardOpen';
+import Close from '../../assets/icons/Close';
+import CloseCircle from '../../assets/icons/CloseCircle';
+import CloseCircleOutline from '../../assets/icons/CloseCircleOutline';
+import Copy from '../../assets/icons/Copy';
+import Devices from '../../assets/icons/Devices';
+import Dialpad from '../../assets/icons/Dialpad';
+import DoubleArrowLeft from '../../assets/icons/DoubleArrowLeft';
+import DoubleArrowRight from '../../assets/icons/DoubleArrowRight';
+import Download from '../../assets/icons/Download';
+import Edit from '../../assets/icons/Edit';
+import Emoji from '../../assets/icons/Emoji';
+import EyeOff from '../../assets/icons/EyeOff';
+import EyeOn from '../../assets/icons/EyeOn';
+import Facebook from '../../assets/icons/Facebook';
+import Filter from '../../assets/icons/Filter';
+import Flask from '../../assets/icons/Flask';
+import Group from '../../assets/icons/Group';
+import Heart from '../../assets/icons/Heart';
+import HeartOutline from '../../assets/icons/HeartOutline';
+import Help from '../../assets/icons/Help';
+import Hourglass from '../../assets/icons/Hourglass';
+import Info from '../../assets/icons/Info';
+import Instagram from '../../assets/icons/Instagram';
+import KebabMenu from '../../assets/icons/KebabMenu';
+import Link from '../../assets/icons/Link';
+import Linkedin from '../../assets/icons/Linkedin';
+import Loading from '../../assets/icons/Loading';
+import Maximize from '../../assets/icons/Maximize';
+import Menu from '../../assets/icons/Menu';
+import MergeField from '../../assets/icons/MergeField';
+import Message from '../../assets/icons/Message';
+import Mic from '../../assets/icons/Mic';
+import MicOff from '../../assets/icons/MicOff';
+import Minimize from '../../assets/icons/Minimize';
+import Mobile from '../../assets/icons/Mobile';
+import NotAllowed from '../../assets/icons/NotAllowed';
+import Open from '../../assets/icons/Open';
+import Pause from '../../assets/icons/Pause';
+import PauseOutline from '../../assets/icons/PauseOutline';
+import Person from '../../assets/icons/Person';
+import Phone from '../../assets/icons/Phone';
+import PhoneBlocked from '../../assets/icons/PhoneBlocked';
+import PhoneEnd from '../../assets/icons/PhoneEnd';
+import PhoneHistory from '../../assets/icons/PhoneHistory';
+import PhoneTalk from '../../assets/icons/PhoneTalk';
+import Play from '../../assets/icons/Play';
+import PlayOutline from '../../assets/icons/PlayOutline';
+import ProfileUser from '../../assets/icons/ProfileUser';
+import RadioButton from '../../assets/icons/RadioButton';
+import RadioButtonOff from '../../assets/icons/RadioButtonOff';
+import Record from '../../assets/icons/Record';
+import Refresh from '../../assets/icons/Refresh';
+import Rocket from '../../assets/icons/Rocket';
+import Schedule from '../../assets/icons/Schedule';
+import ScheduleOutline from '../../assets/icons/ScheduleOutline';
+import Search from '../../assets/icons/Search';
+import Settings from '../../assets/icons/Settings';
+import Sort from '../../assets/icons/Sort';
+import Spotify from '../../assets/icons/Spotify';
+import Star from '../../assets/icons/Star';
+import StarOutline from '../../assets/icons/StarOutline';
+import Stop from '../../assets/icons/Stop';
+import StopOutline from '../../assets/icons/StopOutline';
+import Template from '../../assets/icons/Template';
+import ToggleOff from '../../assets/icons/ToggleOff';
+import ToggleOn from '../../assets/icons/ToggleOn';
+import Trash from '../../assets/icons/Trash';
+import Twitter from '../../assets/icons/Twitter';
+import Upload from '../../assets/icons/Upload';
+import Video from '../../assets/icons/Video';
+import Voicemail from '../../assets/icons/Voicemail';
+import VolOn from '../../assets/icons/VolOn';
+import Warning from '../../assets/icons/Warning';
+import WarningCircleOutline from '../../assets/icons/WarningCircleOutline';
+import Youtube from '../../assets/icons/Youtube';
+declare const icons: {
+    'activity-history': typeof ActivityHistory;
+    add: typeof Add;
+    'add-circle': typeof AddCircle;
+    'add-circle-outline': typeof AddCircleOutline;
+    'add-person': typeof AddPerson;
+    'arrow-down': typeof ArrowDown;
+    'arrow-left': typeof ArrowLeft;
+    'arrow-right': typeof ArrowRight;
+    'arrow-up': typeof ArrowUp;
+    attachment: typeof Attachment;
+    calendar: typeof Calendar;
+    camera: typeof Camera;
+    card: typeof Card;
+    'caret-down': typeof CaretDown;
+    'caret-up': typeof CaretUp;
+    'check-circle': typeof CheckCircle;
+    'check-circle-outline': typeof CheckCircleOutline;
+    checkbox: typeof Checkbox;
+    'checkbox-off': typeof CheckboxOff;
+    'checkbox-partial': typeof CheckboxPartial;
+    'chevron-down': typeof ChevronDown;
+    'chevron-left': typeof ChevronLeft;
+    'chevron-right': typeof ChevronRight;
+    'chevron-up': typeof ChevronUp;
+    clapperboard: typeof Clapperboard;
+    'clapperboard-open': typeof ClapperboardOpen;
+    close: typeof Close;
+    'close-circle': typeof CloseCircle;
+    'close-circle-outline': typeof CloseCircleOutline;
+    copy: typeof Copy;
+    devices: typeof Devices;
+    dialpad: typeof Dialpad;
+    'double-arrow-left': typeof DoubleArrowLeft;
+    'double-arrow-right': typeof DoubleArrowRight;
+    download: typeof Download;
+    edit: typeof Edit;
+    emoji: typeof Emoji;
+    'eye-off': typeof EyeOff;
+    'eye-on': typeof EyeOn;
+    facebook: typeof Facebook;
+    filter: typeof Filter;
+    flask: typeof Flask;
+    group: typeof Group;
+    heart: typeof Heart;
+    'heart-outline': typeof HeartOutline;
+    help: typeof Help;
+    hourglass: typeof Hourglass;
+    info: typeof Info;
+    instagram: typeof Instagram;
+    'kebab-menu': typeof KebabMenu;
+    link: typeof Link;
+    linkedin: typeof Linkedin;
+    loading: typeof Loading;
+    maximize: typeof Maximize;
+    menu: typeof Menu;
+    'merge-field': typeof MergeField;
+    message: typeof Message;
+    mic: typeof Mic;
+    'mic-off': typeof MicOff;
+    minimize: typeof Minimize;
+    mobile: typeof Mobile;
+    'not-allowed': typeof NotAllowed;
+    open: typeof Open;
+    pause: typeof Pause;
+    'pause-outline': typeof PauseOutline;
+    person: typeof Person;
+    phone: typeof Phone;
+    'phone-blocked': typeof PhoneBlocked;
+    'phone-end': typeof PhoneEnd;
+    'phone-history': typeof PhoneHistory;
+    'phone-talk': typeof PhoneTalk;
+    play: typeof Play;
+    'play-outline': typeof PlayOutline;
+    'profile-user': typeof ProfileUser;
+    'radio-button': typeof RadioButton;
+    'radio-button-off': typeof RadioButtonOff;
+    record: typeof Record;
+    refresh: typeof Refresh;
+    rocket: typeof Rocket;
+    schedule: typeof Schedule;
+    'schedule-outline': typeof ScheduleOutline;
+    search: typeof Search;
+    settings: typeof Settings;
+    share: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    sort: typeof Sort;
+    spotify: typeof Spotify;
+    star: typeof Star;
+    'star-outline': typeof StarOutline;
+    stop: typeof Stop;
+    'stop-outline': typeof StopOutline;
+    template: typeof Template;
+    'toggle-off': typeof ToggleOff;
+    'toggle-on': typeof ToggleOn;
+    trash: typeof Trash;
+    twitter: typeof Twitter;
+    upload: typeof Upload;
+    video: typeof Video;
+    voicemail: typeof Voicemail;
+    'vol-on': typeof VolOn;
+    warning: typeof Warning;
+    'warning-circle-outline': typeof WarningCircleOutline;
+    youtube: typeof Youtube;
+};
+export declare type IconNames = keyof typeof icons;
+export default icons;

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

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

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+declare type ImageViewerProps = {
+    /** Controls whether or not the ImageViewer is open */
+    visible: boolean;
+    /** The function called when the ImageViewer is closed */
+    close: () => void;
+    /** The array of image urls to display */
+    images: string[];
+    /** The index of the images array to initially display */
+    startIndex: number;
+    /** The alt property of the current image */
+    alt?: string;
+    /** The maxWidth of the image inside the ImageViewer */
+    maxWidth?: number | string;
+    /** The maxHeight of the image inside the ImageViewer */
+    maxHeight?: number | string;
+    /** The opacity of the ImageViewer background */
+    opacity?: number;
+};
+declare const ImageViewer: ({ visible, close, images, startIndex, alt, maxWidth, maxHeight, opacity }: ImageViewerProps) => JSX.Element | null;
+export default ImageViewer;

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

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

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

@@ -0,0 +1,192 @@
+import { ChangeEvent, MutableRefObject, MouseEvent, HTMLProps } from 'react';
+import { As, InputFocusEvent, InputRef, Margin } from './types';
+import { IconType } from './helpers/getIcon';
+declare type OnClear = () => void;
+declare type OnChangeDefault = (event: ChangeEvent<HTMLInputElement>) => void;
+declare type OnChangePhone = (event: ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void;
+declare type Default = {
+    /** Auto-formats the input to a US phone number */
+    phone?: never;
+    /** A callback function that is run upon changing the contents of the input */
+    onChange: OnChangeDefault;
+};
+declare type Phone = {
+    phone: true;
+    onChange: OnChangePhone;
+};
+declare type InputTypes = Default | Phone;
+declare type DefaultInputProps = Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as'> & As;
+export declare type InputProps = {
+    /** The id of the input element */
+    id?: string;
+    /** Places a label element above the input. The value will set the text of the label */
+    label?: string;
+    /** Sets the input placeholder text */
+    placeholder?: string;
+    /** Sets the input placeholder color */
+    placeholderColor?: string;
+    /** Places a description message below the input */
+    description?: string;
+    /** Displays a spinner icon on the right side of the input */
+    isLoading?: boolean;
+    /** 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;
+    /** Sets the Input's bottom border and description text to red */
+    invalid?: boolean;
+    /** Removes the input border */
+    borderless?: boolean;
+    /** Sets the input borderRadius */
+    borderRadius?: number | string;
+    /** Sets the input borderColor */
+    borderColor?: string;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string;
+    /** Sets the input fontSize */
+    fontSize?: number | string;
+    /** Width of the input */
+    width?: number | string;
+    /** Height of the input */
+    height?: number | string;
+    /** A ref to the input's container element */
+    containerRef?: MutableRefObject<HTMLDivElement>;
+    /** Value of the input */
+    value: string | number;
+    /** Disables the input */
+    disabled?: boolean;
+    /** Prevents the input from being clicked, focused, hovered, or edited  */
+    readOnly?: boolean;
+    /** Prevents the input from being clicked or focused  */
+    preventFocus?: boolean;
+    /** Sets the cursor to pointer for the input container */
+    pointer?: boolean;
+    /** Removes the padding from the input */
+    textOnly?: boolean;
+    /** Adds a search icon to the left of the input and a clear icon and funcitonality to the right */
+    search?: boolean;
+    /** Callback run after onFocus event */
+    onFocus?: (event?: InputFocusEvent) => void;
+    /** Callback run after onBlur event */
+    onBlur?: (event?: InputFocusEvent) => void;
+    /** A callback function that is run upon clicking the input container */
+    onClick?: (event?: MouseEvent) => void;
+    /** A callback function that is run upon clicking the clear icon */
+    onClear?: OnClear;
+} & DefaultInputProps & InputTypes & Margin;
+declare const Input: import("react").ForwardRefExoticComponent<(Pick<{
+    /** The id of the input element */
+    id?: string | undefined;
+    /** Places a label element above the input. The value will set the text of the label */
+    label?: string | undefined;
+    /** Sets the input placeholder text */
+    placeholder?: string | undefined;
+    /** Sets the input placeholder color */
+    placeholderColor?: string | undefined;
+    /** Places a description message below the input */
+    description?: string | undefined;
+    /** Displays a spinner icon on the right side of the input */
+    isLoading?: boolean | undefined;
+    /** The name of the icon that should appear on the left side of the input */
+    iconLeft?: IconType | undefined;
+    /** The name of the icon that should appear on the right side of the input */
+    iconRight?: IconType | undefined;
+    /** Sets the Input's bottom border and description text to red */
+    invalid?: boolean | undefined;
+    /** Removes the input border */
+    borderless?: boolean | undefined;
+    /** Sets the input borderRadius */
+    borderRadius?: string | number | undefined;
+    /** Sets the input borderColor */
+    borderColor?: string | undefined;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string | undefined;
+    /** Sets the input fontSize */
+    fontSize?: string | number | undefined;
+    /** Width of the input */
+    width?: string | number | undefined;
+    /** Height of the input */
+    height?: string | number | undefined;
+    /** A ref to the input's container element */
+    containerRef?: MutableRefObject<HTMLDivElement> | undefined;
+    /** Value of the input */
+    value: string | number;
+    /** Disables the input */
+    disabled?: boolean | undefined;
+    /** Prevents the input from being clicked, focused, hovered, or edited  */
+    readOnly?: boolean | undefined;
+    /** Prevents the input from being clicked or focused  */
+    preventFocus?: boolean | undefined;
+    /** Sets the cursor to pointer for the input container */
+    pointer?: boolean | undefined;
+    /** Removes the padding from the input */
+    textOnly?: boolean | undefined;
+    /** Adds a search icon to the left of the input and a clear icon and funcitonality to the right */
+    search?: boolean | undefined;
+    /** Callback run after onFocus event */
+    onFocus?: ((event?: InputFocusEvent) => void) | undefined;
+    /** Callback run after onBlur event */
+    onBlur?: ((event?: InputFocusEvent) => void) | undefined;
+    /** A callback function that is run upon clicking the input container */
+    onClick?: ((event?: MouseEvent) => void) | undefined;
+    /** A callback function that is run upon clicking the clear icon */
+    onClear?: OnClear | undefined;
+} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Default & Margin, "search" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "size" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "pointer" | "backgroundColor" | "fontSize" | "borderColor" | "borderRadius" | "borderless" | "textOnly" | "invalid" | keyof Margin | "placeholderColor" | "description" | "isLoading" | "iconLeft" | "iconRight" | "containerRef" | "preventFocus" | "onClear" | keyof Default> | Pick<{
+    /** The id of the input element */
+    id?: string | undefined;
+    /** Places a label element above the input. The value will set the text of the label */
+    label?: string | undefined;
+    /** Sets the input placeholder text */
+    placeholder?: string | undefined;
+    /** Sets the input placeholder color */
+    placeholderColor?: string | undefined;
+    /** Places a description message below the input */
+    description?: string | undefined;
+    /** Displays a spinner icon on the right side of the input */
+    isLoading?: boolean | undefined;
+    /** The name of the icon that should appear on the left side of the input */
+    iconLeft?: IconType | undefined;
+    /** The name of the icon that should appear on the right side of the input */
+    iconRight?: IconType | undefined;
+    /** Sets the Input's bottom border and description text to red */
+    invalid?: boolean | undefined;
+    /** Removes the input border */
+    borderless?: boolean | undefined;
+    /** Sets the input borderRadius */
+    borderRadius?: string | number | undefined;
+    /** Sets the input borderColor */
+    borderColor?: string | undefined;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string | undefined;
+    /** Sets the input fontSize */
+    fontSize?: string | number | undefined;
+    /** Width of the input */
+    width?: string | number | undefined;
+    /** Height of the input */
+    height?: string | number | undefined;
+    /** A ref to the input's container element */
+    containerRef?: MutableRefObject<HTMLDivElement> | undefined;
+    /** Value of the input */
+    value: string | number;
+    /** Disables the input */
+    disabled?: boolean | undefined;
+    /** Prevents the input from being clicked, focused, hovered, or edited  */
+    readOnly?: boolean | undefined;
+    /** Prevents the input from being clicked or focused  */
+    preventFocus?: boolean | undefined;
+    /** Sets the cursor to pointer for the input container */
+    pointer?: boolean | undefined;
+    /** Removes the padding from the input */
+    textOnly?: boolean | undefined;
+    /** Adds a search icon to the left of the input and a clear icon and funcitonality to the right */
+    search?: boolean | undefined;
+    /** Callback run after onFocus event */
+    onFocus?: ((event?: InputFocusEvent) => void) | undefined;
+    /** Callback run after onBlur event */
+    onBlur?: ((event?: InputFocusEvent) => void) | undefined;
+    /** A callback function that is run upon clicking the input container */
+    onClick?: ((event?: MouseEvent) => void) | undefined;
+    /** A callback function that is run upon clicking the clear icon */
+    onClear?: OnClear | undefined;
+} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Phone & Margin, "search" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "size" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "pointer" | "backgroundColor" | "fontSize" | "borderColor" | "borderRadius" | "borderless" | "textOnly" | "invalid" | keyof Margin | "placeholderColor" | "description" | "isLoading" | "iconLeft" | "iconRight" | "containerRef" | "preventFocus" | "onClear" | keyof Phone>) & import("react").RefAttributes<InputRef>>;
+export default Input;

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

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+import { Margin, ThemeProp, InputFocusEvent } from './types';
+declare type FocusCallBack = (event?: InputFocusEvent) => void;
+export declare const useInputFocus: (onFocus?: FocusCallBack, onBlur?: FocusCallBack, focusCondition?: boolean) => {
+    focused: boolean;
+    handleFocus: (event?: InputFocusEvent) => void;
+    handleBlur: (event?: InputFocusEvent) => void;
+};
+export declare const isInputFilled: (value: string | number) => boolean;
+export declare const InputContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    backgroundColor?: string | undefined;
+    borderRadius?: string | number | undefined;
+    borderless?: boolean | undefined;
+    borderColor?: string | undefined;
+    pointer?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    textOnly?: boolean | undefined;
+    focused?: boolean | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    hasLabel?: boolean | undefined;
+} & import("./types").Width & import("./types").Height & Margin & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    readOnly?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    filled?: boolean | undefined;
+    focused?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & ThemeProp, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+declare const _default: {
+    Container: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        backgroundColor?: string | undefined;
+        borderRadius?: string | number | undefined;
+        borderless?: boolean | undefined;
+        borderColor?: string | undefined;
+        pointer?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        textOnly?: boolean | undefined;
+        focused?: boolean | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        hasLabel?: boolean | undefined;
+    } & import("./types").Width & import("./types").Height & Margin & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Wrapper: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        readOnly?: boolean | undefined;
+    }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+    Label: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & {
+        filled?: boolean | undefined;
+        focused?: boolean | undefined;
+        disabled?: boolean | undefined;
+    } & ThemeProp, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+    useInputFocus: (onFocus?: FocusCallBack | undefined, onBlur?: FocusCallBack | undefined, focusCondition?: boolean) => {
+        focused: boolean;
+        handleFocus: (event?: InputFocusEvent | undefined) => void;
+        handleBlur: (event?: InputFocusEvent | undefined) => void;
+    };
+    isInputFilled: (value: string | number) => boolean;
+};
+export default _default;