@wavv/ui 1.0.1 → 1.1.0-beta.1

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

@@ -3,10 +3,10 @@ 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 = {
+declare type DropdownProps<OptionType> = {
     children?: ReactNode;
     /** The function to be called when an option is selected */
-    onChange?: (item: OptionItem | null) => void;
+    onChange?: (item: OptionType | null) => void;
     /** The function to be called when the search input is updated */
     onTextChange?: (text: string) => void;
     /** The value of the Dropdown */
@@ -26,7 +26,7 @@ declare type DropdownProps = {
     /** Sets the input placeholder color */
     placeholderColor?: string;
     /** The options to be displayed */
-    options?: OptionItem[];
+    options?: OptionType[];
     /** Removes the border from the Dropdown input */
     borderless?: boolean;
     /** Sets the input borderColor */
@@ -79,7 +79,7 @@ declare type DropdownProps = {
     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;
+    <OptionType extends OptionItem>({ 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<OptionType>): JSX.Element;
+    Item<OptionType_1 extends OptionItem>({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: DropdownItemProps<OptionType_1>): JSX.Element;
 };
 export default Dropdown;

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

@@ -11,8 +11,8 @@ export declare type OptionItem = {
     value?: unknown;
     [key: string]: unknown;
 };
-export declare type DropdownItemProps = {
-    setValue?: (v: OptionItem) => void;
+export declare type DropdownItemProps<OptionType> = {
+    setValue?: (v: OptionType) => void;
     close?: () => void;
     children: ReactNode;
     /** Sets the value of the option that will be returned in the object */
@@ -30,7 +30,7 @@ export declare type DropdownItemProps = {
     /** The id of the Item element */
     id: number | string;
 };
-declare type setValueFunc = (selection: OptionItem | string | null) => void;
+export declare type setValueFunc = <OptionType extends OptionItem>(selection: OptionType | string | null) => void;
 declare type toggleFunc = (event?: MouseEvent) => void;
 declare type StatePieces = {
     selected: number;
@@ -39,8 +39,8 @@ declare type StatePieces = {
     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 declare const getFilteredOptions: <OptionType extends OptionItem>(options: OptionType[], state: FilterState) => OptionType[];
+export declare const getOptionsFromArray: <OptionType extends OptionItem>(options: OptionType[], setValue: setValueFunc, toggle: toggleFunc, state: FilterState) => JSX.Element[];
+export declare const getOptionsFromChildren: <OptionType extends OptionItem>(children: ReactNode, setValue: setValueFunc, toggle: toggleFunc) => (React.ReactElement<DropdownItemProps<OptionType>, string | React.JSXElementConstructor<any>> | null)[];
+export declare const getCombinedChildren: <OptionType extends OptionItem>(options: OptionType[], children: ReactNode, setValue: setValueFunc, toggle: toggleFunc, state: StatePieces) => (React.ReactElement<any, string | React.JSXElementConstructor<any>> | null)[];
 export {};

package/dist/cjs/types/components/Form.d.ts

@@ -29,7 +29,7 @@ declare const Form: {
         width?: string | number | undefined;
         height?: string | number | undefined;
         containerRef?: import("react").MutableRefObject<HTMLDivElement> | undefined;
-        value: string | number;
+        value?: string | number | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
         preventFocus?: boolean | undefined;
@@ -42,10 +42,10 @@ declare const Form: {
         onClear?: (() => void) | undefined;
     } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & import("./types").As & {
         phone?: undefined;
-        onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+        onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>) => void) | undefined;
     } & import("./types").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 import("./types").Margin | "placeholderColor" | "description" | "isLoading" | "iconLeft" | "iconRight" | "containerRef" | "preventFocus" | "onClear" | keyof {
         phone?: undefined;
-        onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+        onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>) => void) | undefined;
     }> | Pick<{
         id?: string | undefined;
         label?: string | undefined;
@@ -64,7 +64,7 @@ declare const Form: {
         width?: string | number | undefined;
         height?: string | number | undefined;
         containerRef?: import("react").MutableRefObject<HTMLDivElement> | undefined;
-        value: string | number;
+        value?: string | number | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
         preventFocus?: boolean | undefined;
@@ -77,15 +77,15 @@ declare const Form: {
         onClear?: (() => void) | undefined;
     } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & import("./types").As & {
         phone: true;
-        onChange: (event: import("react").ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void;
+        onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void) | undefined;
     } & import("./types").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 import("./types").Margin | "placeholderColor" | "description" | "isLoading" | "iconLeft" | "iconRight" | "containerRef" | "preventFocus" | "onClear" | keyof {
         phone: true;
-        onChange: (event: import("react").ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void;
+        onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void) | undefined;
     }>) & import("react").RefAttributes<import("./types").InputRef>>;
     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 }: {
+        <OptionType extends import("./Dropdown").DropdownOption>({ 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 }: {
             children?: ReactNode;
-            onChange?: ((item: import("./Dropdown").DropdownOption | null) => void) | undefined;
+            onChange?: ((item: OptionType | null) => void) | undefined;
             onTextChange?: ((text: string) => void) | undefined;
             value?: string | number | undefined;
             afterShow?: (() => void) | undefined;
@@ -95,7 +95,7 @@ declare const Form: {
             onError?: ((invalid: boolean) => void) | undefined;
             placeholder?: string | undefined;
             placeholderColor?: string | undefined;
-            options?: import("./Dropdown").DropdownOption[] | undefined;
+            options?: OptionType[] | undefined;
             borderless?: boolean | undefined;
             borderColor?: string | undefined;
             backgroundColor?: string | undefined;
@@ -506,7 +506,7 @@ declare const Form: {
             preventFocus?: boolean | undefined;
             onClear?: (() => void) | undefined;
         }): JSX.Element;
-        Item({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: import("./Dropdown/DropdownUtils").DropdownItemProps): JSX.Element;
+        Item<OptionType_1 extends import("./Dropdown").DropdownOption>({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: import("./Dropdown/DropdownUtils").DropdownItemProps<OptionType_1>): JSX.Element;
     };
     Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
         id?: string | undefined;

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

@@ -8,11 +8,11 @@ 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;
+    onChange?: OnChangeDefault;
 };
 declare type Phone = {
     phone: true;
-    onChange: OnChangePhone;
+    onChange?: OnChangePhone;
 };
 declare type InputTypes = Default | Phone;
 declare type DefaultInputProps = Omit<HTMLProps<HTMLInputElement>, 'onChange' | 'as'> & As;
@@ -52,7 +52,7 @@ export declare type InputProps = {
     /** A ref to the input's container element */
     containerRef?: MutableRefObject<HTMLDivElement>;
     /** Value of the input */
-    value: string | number;
+    value?: string | number;
     /** Disables the input */
     disabled?: boolean;
     /** Prevents the input from being clicked, focused, hovered, or edited  */
@@ -110,7 +110,7 @@ declare const Input: import("react").ForwardRefExoticComponent<(Pick<{
     /** A ref to the input's container element */
     containerRef?: MutableRefObject<HTMLDivElement> | undefined;
     /** Value of the input */
-    value: string | number;
+    value?: string | number | undefined;
     /** Disables the input */
     disabled?: boolean | undefined;
     /** Prevents the input from being clicked, focused, hovered, or edited  */
@@ -167,7 +167,7 @@ declare const Input: import("react").ForwardRefExoticComponent<(Pick<{
     /** A ref to the input's container element */
     containerRef?: MutableRefObject<HTMLDivElement> | undefined;
     /** Value of the input */
-    value: string | number;
+    value?: string | number | undefined;
     /** Disables the input */
     disabled?: boolean | undefined;
     /** Prevents the input from being clicked, focused, hovered, or edited  */

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

@@ -6,7 +6,7 @@ export declare const useInputFocus: (onFocus?: FocusCallBack, onBlur?: FocusCall
     handleFocus: (event?: InputFocusEvent) => void;
     handleBlur: (event?: InputFocusEvent) => void;
 };
-export declare const isInputFilled: (value: string | number) => boolean;
+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;
@@ -73,6 +73,6 @@ declare const _default: {
         handleFocus: (event?: InputFocusEvent | undefined) => void;
         handleBlur: (event?: InputFocusEvent | undefined) => void;
     };
-    isInputFilled: (value: string | number) => boolean;
+    isInputFilled: (value?: string | number | undefined) => boolean;
 };
 export default _default;

package/dist/cjs/types/components/Table/Body.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, ReactNode } from 'react';
+import { Height } from '../types';
+declare type BodyProps = {
+    children: ReactNode;
+} & Height & HTMLProps<HTMLTableSectionElement>;
+declare const Body: ({ children, height }: BodyProps) => JSX.Element;
+export default Body;

package/dist/cjs/types/components/Table/Column.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { FlexPosition, ThemeProp } from '../types';
+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 Column: ({ children, contentPosition, defaultValue }: TableColumn) => JSX.Element;
+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 Column;

package/dist/cjs/types/components/Table/Content.d.ts

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

package/dist/cjs/types/components/Table/Header.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TableHeaderRow } from './types';
+declare const Header: ({ children, columns, ...rest }: TableHeaderRow) => JSX.Element;
+export default Header;

package/dist/cjs/types/components/Table/HeaderCell.d.ts

@@ -0,0 +1,16 @@
+import { MouseEvent, ReactNode } from 'react';
+import { FlexPosition } from '../types';
+declare type SortDir = 'asc' | 'desc' | 'inactive';
+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?: SortDir;
+    /** The property of the data object to sort by */
+    sortKey?: string;
+};
+declare const HeaderCell: ({ children, onClick, contentPosition, sorted, sortKey }: HeaderCellProps) => JSX.Element;
+export default HeaderCell;

package/dist/cjs/types/components/Table/Row.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TableHeaderRow } from './types';
+declare const Row: ({ children, columns, onClick, ...rest }: TableHeaderRow) => JSX.Element;
+export default Row;

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Data, TableProps } from './types';
+declare const Table: {
+    <DataType extends Data>({ children, columns, data, ...rest }: TableProps<DataType>): JSX.Element;
+    Header: ({ children, columns, ...rest }: import("./types").TableHeaderRow) => JSX.Element;
+    HeaderCell: ({ children, onClick, contentPosition, sorted, sortKey }: {
+        children?: ReactNode;
+        contentPosition?: import("../types").FlexPosition | undefined;
+        onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+        sorted?: ("desc" | "inactive" | "asc") | undefined;
+        sortKey?: string | undefined;
+    }) => JSX.Element;
+    Body: ({ children, height }: {
+        children: ReactNode;
+    } & import("../types").Height & import("react").HTMLProps<HTMLTableSectionElement>) => JSX.Element;
+    Row: ({ children, columns, onClick, ...rest }: import("./types").TableHeaderRow) => JSX.Element;
+    Column: ({ children, contentPosition, defaultValue }: {
+        children?: ReactNode;
+        contentPosition?: import("../types").FlexPosition | undefined;
+        defaultValue?: string | undefined;
+    }) => JSX.Element;
+};
+export default Table;

package/dist/cjs/types/components/Table/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Context, Data } from './types';
+declare const TableContext: import("react").Context<Context<Data>>;
+export default TableContext;

package/dist/cjs/types/components/Table/index.d.ts

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

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

@@ -0,0 +1,38 @@
+import React, { HTMLProps, ReactNode } from 'react';
+import { As, MarginPadding, Width, ThemeProp, Padding } from '../types';
+export declare type Data = {
+    [key: string]: unknown;
+};
+export declare type SetData<DataType> = React.Dispatch<React.SetStateAction<DataType[]>>;
+export declare type SetColumn = React.Dispatch<React.SetStateAction<string>>;
+export declare type Columns = number | string;
+export declare type SortedChildFunc<DataType> = (data: DataType[]) => ReactNode;
+declare type Default = {
+    data?: never;
+    children: ReactNode;
+};
+declare type Sorted<DataType> = {
+    /** The data the table should use to add column sort functionality */
+    data: DataType[];
+    children: SortedChildFunc<DataType>;
+};
+declare type TableTypes<DataType> = Default | Sorted<DataType>;
+declare type DefaultTableProps = Omit<HTMLProps<HTMLTableElement>, 'as' | 'children' | 'data'> & As;
+declare type TableBase = {
+    /** If a number, columns creates n number columns of an equal size. If a string, columns sets the gridTemplateColumns property   */
+    columns?: Columns;
+} & Width & MarginPadding;
+export declare type TableProps<DataType> = TableBase & TableTypes<DataType> & DefaultTableProps;
+export declare type TableHeaderRow = TableBase & HTMLProps<HTMLTableRowElement>;
+export declare type TableElements = {
+    as?: string;
+} & ThemeProp & Padding;
+export declare type Context<DataType> = {
+    data?: DataType[];
+    originalData?: DataType[];
+    parentColumns?: Columns;
+    setData?: SetData<DataType>;
+    activeColumn?: string;
+    setActiveColumn?: SetColumn;
+};
+export {};

package/dist/cjs/types/components/Table/utils.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const wrappedChildren: (children: ReactNode, type: string) => (JSX.Element | null)[];

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { OptionItem } from '../components/Dropdown/DropdownUtils';
-declare type UseSelectProps = {
+declare type UseSelectProps<OptionType> = {
     /** The options that will be displayed in the list */
-    options: OptionItem[];
+    options: OptionType[];
     /** The function called when an option is selected */
-    select: (option: OptionItem | string | null) => void;
+    select: (option: OptionType | string | null) => void;
     /** The function to close the open option list */
     close: Function;
     /** The function to open the closed option list */
@@ -16,5 +16,5 @@ declare type UseSelectProps = {
     /** 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>];
+declare const useSelect: <OptionType extends OptionItem>({ options, select, close, open, searchText, isOpen, isFocused, }: UseSelectProps<OptionType>) => readonly [number, import("react").RefObject<HTMLDivElement>];
 export default useSelect;