@wavv/ui 1.0.1 → 1.0.2

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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;

package/dist/index.d.ts

@@ -575,8 +575,8 @@ declare type OptionItem = {
     value?: unknown;
     [key: string]: unknown;
 };
-declare type DropdownItemProps = {
-    setValue?: (v: OptionItem) => void;
+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 */
@@ -1233,11 +1233,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;
@@ -1277,7 +1277,7 @@ 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  */
@@ -1335,7 +1335,7 @@ declare const Input: 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  */
@@ -1392,7 +1392,7 @@ declare const Input: 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  */
@@ -1416,10 +1416,10 @@ declare const Input: react.ForwardRefExoticComponent<(Pick<{
 } & 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>) & react.RefAttributes<InputRef>>;
 
 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 */
@@ -1439,7 +1439,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 */
@@ -1492,8 +1492,8 @@ 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;
 };
 
 declare type GridProps = {
@@ -1577,7 +1577,7 @@ declare const Form: {
         width?: string | number | undefined;
         height?: string | number | undefined;
         containerRef?: react.MutableRefObject<HTMLDivElement> | undefined;
-        value: string | number;
+        value?: string | number | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
         preventFocus?: boolean | undefined;
@@ -1590,10 +1590,10 @@ declare const Form: {
         onClear?: (() => void) | undefined;
     } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & {
         phone?: undefined;
-        onChange: (event: react.ChangeEvent<HTMLInputElement>) => void;
+        onChange?: ((event: react.ChangeEvent<HTMLInputElement>) => void) | undefined;
     } & 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?: undefined;
-        onChange: (event: react.ChangeEvent<HTMLInputElement>) => void;
+        onChange?: ((event: react.ChangeEvent<HTMLInputElement>) => void) | undefined;
     }> | Pick<{
         id?: string | undefined;
         label?: string | undefined;
@@ -1612,7 +1612,7 @@ declare const Form: {
         width?: string | number | undefined;
         height?: string | number | undefined;
         containerRef?: react.MutableRefObject<HTMLDivElement> | undefined;
-        value: string | number;
+        value?: string | number | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
         preventFocus?: boolean | undefined;
@@ -1625,15 +1625,15 @@ declare const Form: {
         onClear?: (() => void) | undefined;
     } & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & {
         phone: true;
-        onChange: (event: react.ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void;
+        onChange?: ((event: react.ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void) | undefined;
     } & 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: true;
-        onChange: (event: react.ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void;
+        onChange?: ((event: react.ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void) | undefined;
     }>) & react.RefAttributes<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 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 }: {
             children?: ReactNode;
-            onChange?: ((item: OptionItem | null) => void) | undefined;
+            onChange?: ((item: OptionType | null) => void) | undefined;
             onTextChange?: ((text: string) => void) | undefined;
             value?: string | number | undefined;
             afterShow?: (() => void) | undefined;
@@ -1643,7 +1643,7 @@ declare const Form: {
             onError?: ((invalid: boolean) => void) | undefined;
             placeholder?: string | undefined;
             placeholderColor?: string | undefined;
-            options?: OptionItem[] | undefined;
+            options?: OptionType[] | undefined;
             borderless?: boolean | undefined;
             borderColor?: string | undefined;
             backgroundColor?: string | undefined;
@@ -2054,7 +2054,7 @@ declare const Form: {
             preventFocus?: boolean | undefined;
             onClear?: (() => void) | undefined;
         }): JSX.Element;
-        Item({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: DropdownItemProps): JSX.Element;
+        Item<OptionType_1 extends OptionItem>({ value, displayText, setValue, close, children, contentPosition, color, accented, onClick, id, }: DropdownItemProps<OptionType_1>): JSX.Element;
     };
     Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
         id?: string | undefined;
@@ -2164,7 +2164,7 @@ declare const _default: {
         handleFocus: (event?: InputFocusEvent | undefined) => void;
         handleBlur: (event?: InputFocusEvent | undefined) => void;
     };
-    isInputFilled: (value: string | number) => boolean;
+    isInputFilled: (value?: string | number | undefined) => boolean;
 };
 
 declare type LabelProps = {
@@ -2613,11 +2613,11 @@ declare const useEventListener: <T extends Event>(element: MutableRefObject<HTML
 
 declare const useOnClickOutside: <T extends HTMLElement>(onClickOutside: () => void, condition?: boolean, exclusions?: string[]) => MutableRefObject<T | null>;
 
-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 */
@@ -2629,7 +2629,7 @@ declare type UseSelectProps = {
     /** The text from a search Droppdown */
     searchText?: string;
 };
-declare const useSelect: ({ options, select, close, open, searchText, isOpen, isFocused }: UseSelectProps) => readonly [number, react.RefObject<HTMLDivElement>];
+declare const useSelect: <OptionType extends OptionItem>({ options, select, close, open, searchText, isOpen, isFocused, }: UseSelectProps<OptionType>) => readonly [number, react.RefObject<HTMLDivElement>];
 
 declare type ListItem = {
     id: number | string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"files": [
 		"dist/**/*"
 	],