@wavv/ui 2.0.0-alpha.0 → 2.0.0-alpha.2

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputFocusEvent, ThemeProp } from './types';
+import { InputFocusEvent, MarginPadding, ThemeProp, WidthHeight } from './types';
 type FocusCallBack = (event?: InputFocusEvent) => void;
 export declare const useInputFocus: (onFocus?: FocusCallBack, onBlur?: FocusCallBack, focusCondition?: boolean) => {
     focused: boolean;
@@ -7,6 +7,21 @@ export declare const useInputFocus: (onFocus?: FocusCallBack, onBlur?: FocusCall
     handleBlur: (event?: InputFocusEvent) => void;
 };
 export declare const isInputFilled: (value?: string | number) => boolean;
+export type InputContainerProps = {
+    backgroundColor?: string;
+    borderRadius?: number | string;
+    borderless?: boolean;
+    borderColor?: string;
+    fontSize?: number | string;
+    placeholderColor?: string;
+    pointer?: boolean;
+    readOnly?: boolean;
+    textOnly?: boolean;
+    focused?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    hasLabel?: boolean;
+} & WidthHeight & MarginPadding & ThemeProp;
 export declare const InputContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -15,6 +30,8 @@ export declare const InputContainer: import("@emotion/styled").StyledComponent<{
     borderRadius?: string | number | undefined;
     borderless?: boolean | undefined;
     borderColor?: string | undefined;
+    fontSize?: string | number | undefined;
+    placeholderColor?: string | undefined;
     pointer?: boolean | undefined;
     readOnly?: boolean | undefined;
     textOnly?: boolean | undefined;
@@ -52,6 +69,8 @@ declare const _default: {
         borderRadius?: string | number | undefined;
         borderless?: boolean | undefined;
         borderColor?: string | undefined;
+        fontSize?: string | number | undefined;
+        placeholderColor?: string | undefined;
         pointer?: boolean | undefined;
         readOnly?: boolean | undefined;
         textOnly?: boolean | undefined;

package/build/esm/types/components/Select.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="react" />
+import { OptionItem } from './Dropdown/DropdownUtils';
+import { Margin, WidthHeight } from './types';
+type SelectProps<OptionType> = {
+    /** The function to be called when an option is selected */
+    onChange?: (item: OptionType | null) => void;
+    /** The value of the Select */
+    value?: string;
+    /** The function to be called when the Select is opened */
+    afterShow?: () => void;
+    /** The function to be called when the Select is closed */
+    afterHide?: () => void;
+    /** Sets the input placeholder text */
+    placeholder?: string;
+    /** Sets the input placeholder color */
+    placeholderColor?: string;
+    /** The options to be displayed */
+    options?: OptionType[];
+    /** Removes the border from the Select input */
+    borderless?: boolean;
+    /** Sets the input borderColor */
+    borderColor?: string;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string;
+    /** Removes the border and background-color from the Select input */
+    textOnly?: boolean;
+    /** Adds a label to the Select input */
+    label?: string;
+    /** Sets the id of the Select input or trigger */
+    id?: string;
+    /** Sets the Select fontSize */
+    fontSize?: number | string;
+    /** Places a description message below the Select */
+    description?: string;
+    /** Disables the Select */
+    disabled?: boolean;
+    /** Sets the Select's bottom border and description text to red */
+    invalid?: boolean;
+    /** zIndex of the menu's portal container */
+    zIndex?: number;
+    /** Controls the open state of the menu */
+    open?: boolean;
+} & WidthHeight & Margin;
+declare const Select: <OptionType extends OptionItem>({ onChange, afterShow, afterHide, placeholder, placeholderColor, value, options, borderless, borderColor, backgroundColor, textOnly, width, label, id, fontSize, description, disabled, invalid, zIndex, open, ...props }: SelectProps<OptionType>) => import("react/jsx-runtime").JSX.Element;
+export declare const Trigger: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    backgroundColor?: string | undefined;
+    borderRadius?: string | number | undefined;
+    borderless?: boolean | undefined;
+    borderColor?: string | undefined;
+    fontSize?: string | number | undefined;
+    placeholderColor?: 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 & import("./types").Padding & import("./types").ThemeProp & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export default Select;

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

@@ -29,36 +29,37 @@ export { default as Pagination } from './components/Pagination';
 export { default as PieChart } from './components/PieChart';
 export { default as Progress } from './components/Progress';
 export { default as Radio } from './components/Radio';
-export { default as ResetStyles } from './global-styles/ResetStyles';
-export { default as ScrollbarStyles } from './global-styles/ScrollbarStyles';
-export { default as ToastStyles } from './global-styles/ToastStyles';
+export { default as Select } from './components/Select';
 export { default as Slider } from './components/Slider';
 export { default as Spacer } from './components/Spacer';
 export { default as Spinner } from './components/Spinner';
-export { default as TransferList } from './components/TransferList';
 export { default as Table } from './components/Table';
+export { default as Tabs } from './components/Tabs';
 export { default as Toggle } from './components/Toggle';
 export { default as Tooltip } from './components/Tooltip';
-export { default as Tabs } from './components/Tabs';
+export { default as TransferList } from './components/TransferList';
+export { default as ResetStyles } from './global-styles/ResetStyles';
+export { default as ScrollbarStyles } from './global-styles/ScrollbarStyles';
+export { default as ToastStyles } from './global-styles/ToastStyles';
 export { default as theme } from './theme';
 export { default as colors } from './theme/colors';
 export { default as darkScale } from './theme/darkScale';
 export { default as lightScale } from './theme/lightScale';
-export type { ITheme, ThemeProp } from './theme/ThemeTypes';
+export type { DropdownOption } from './components/Dropdown';
 export type { IconNames } from './components/Icon/icons';
 export type { TabItem } from './components/Tabs';
-export type { DropdownOption } from './components/Dropdown';
-export type { Item as TransferItem, Action as TransferAction, Next as TransferNext } from './components/TransferList';
-export type { AudioRef, DraftEditorRef, InputRef, MultiSelectRef, Margin, Padding, Position, MinWidth, MaxWidth, MinHeight, MaxHeight, MinWidthHeight, MaxWidthHeight, Width, Height, WidthHeight, MarginPadding, FlexPosition, AsProp as As, } from './components/types';
+export type { Action as TransferAction, Item as TransferItem, Next as TransferNext } from './components/TransferList';
+export type { AsProp as As, AudioRef, DraftEditorRef, FlexPosition, Height, InputRef, Margin, MarginPadding, MaxHeight, MaxWidth, MaxWidthHeight, MinHeight, MinWidth, MinWidthHeight, MultiSelectRef, Padding, Position, Width, WidthHeight, } from './components/types';
+export type { ITheme, ThemeProp } from './theme/ThemeTypes';
+export { default as useConfirm } from './hooks/useConfirm';
+export { default as useElementObserver } from './hooks/useElementObserver';
 export { default as useEventListener } from './hooks/useEventListener';
 export { default as useOnClickOutside } from './hooks/useOnClickOutside';
+export { default as usePrevious } from './hooks/usePrevious';
 export { default as useSelect } from './hooks/useSelect';
 export { default as useSelectAll } from './hooks/useSelectAll';
 export { default as useWindowSize } from './hooks/useWindowSize';
-export { default as useConfirm } from './hooks/useConfirm';
-export { default as useElementObserver } from './hooks/useElementObserver';
-export { default as usePrevious } from './hooks/usePrevious';
-export { default as formatDate } from './utils/formatDate';
+export { marginProps, paddingProps, positionProps, widthHeightProps } from './components/helpers/styledProps';
 export { default as copyToClipboard } from './utils/copyToClipboard';
+export { default as formatDate } from './utils/formatDate';
 export { default as numberWithCommas } from './utils/numberWithCommas';
-export { widthHeightProps, paddingProps, marginProps, positionProps } from './components/helpers/styledProps';

package/build/index.d.ts

@@ -2034,6 +2034,8 @@ declare const _default: {
         borderRadius?: string | number | undefined;
         borderless?: boolean | undefined;
         borderColor?: string | undefined;
+        fontSize?: string | number | undefined;
+        placeholderColor?: string | undefined;
         pointer?: boolean | undefined;
         readOnly?: boolean | undefined;
         textOnly?: boolean | undefined;
@@ -2378,17 +2380,47 @@ type RadioProps = {
 } & Margin & AsProp & HTMLProps<HTMLInputElement>;
 declare const Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: RadioProps) => react_jsx_runtime.JSX.Element;
 
-type ResetStylesProps = {
-    /** An array of font families to pass to the font loader */
-    families?: string[];
-    /** The default font family to set */
-    fontFamily?: string;
-};
-declare const ResetStyles: ({ families, fontFamily }: ResetStylesProps) => react_jsx_runtime.JSX.Element;
-
-declare const ScrollbarStyles: () => react_jsx_runtime.JSX.Element;
-
-declare const ToastStyles: () => react_jsx_runtime.JSX.Element;
+type SelectProps<OptionType> = {
+    /** The function to be called when an option is selected */
+    onChange?: (item: OptionType | null) => void;
+    /** The value of the Select */
+    value?: string;
+    /** The function to be called when the Select is opened */
+    afterShow?: () => void;
+    /** The function to be called when the Select is closed */
+    afterHide?: () => void;
+    /** Sets the input placeholder text */
+    placeholder?: string;
+    /** Sets the input placeholder color */
+    placeholderColor?: string;
+    /** The options to be displayed */
+    options?: OptionType[];
+    /** Removes the border from the Select input */
+    borderless?: boolean;
+    /** Sets the input borderColor */
+    borderColor?: string;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string;
+    /** Removes the border and background-color from the Select input */
+    textOnly?: boolean;
+    /** Adds a label to the Select input */
+    label?: string;
+    /** Sets the id of the Select input or trigger */
+    id?: string;
+    /** Sets the Select fontSize */
+    fontSize?: number | string;
+    /** Places a description message below the Select */
+    description?: string;
+    /** Disables the Select */
+    disabled?: boolean;
+    /** Sets the Select's bottom border and description text to red */
+    invalid?: boolean;
+    /** zIndex of the menu's portal container */
+    zIndex?: number;
+    /** Controls the open state of the menu */
+    open?: boolean;
+} & WidthHeight & Margin;
+declare const Select: <OptionType extends OptionItem>({ onChange, afterShow, afterHide, placeholder, placeholderColor, value, options, borderless, borderColor, backgroundColor, textOnly, width, label, id, fontSize, description, disabled, invalid, zIndex, open, ...props }: SelectProps<OptionType>) => react_jsx_runtime.JSX.Element;
 
 type SliderProps = {
     /** The current position of the slider knob */
@@ -2423,50 +2455,6 @@ type SpinnerProps = {
 } & Margin & Position;
 declare const Spinner: ({ size, color, center, background, zIndex, margin, marginTop, marginBottom, marginRight, marginLeft, position, top, bottom, right, left, ...props }: SpinnerProps) => react_jsx_runtime.JSX.Element;
 
-type Color = ColorNames | CSSProperties['color'];
-type Item = {
-    /** Unique ID of the item */
-    id: number | string;
-    /** The text displayed for the transfer item */
-    label: string;
-    /** Used as the data of the item */
-    value?: unknown;
-    /** If both `header` and `body` are provided, this text will be styled as the transfer item's header */
-    header?: string;
-    /** If both `header` and `body` are provided, this text will be styled as the transfer item's body */
-    body?: string;
-    /** Any element to be displayed to the left of the item's label/header/body */
-    leftElement?: ReactElement;
-    /** Any element to be displayed to the right of the item's label/header/body */
-    rightElement?: ReactElement;
-    /** The left border color of the transfer item */
-    color?: Color;
-    /** Used to preselect an item */
-    selected?: boolean;
-    [key: string]: unknown;
-};
-type Action = 'select' | 'remove';
-type Next = (item?: Item) => void;
-type TransferListProps = {
-    /** Array of objects that will be rendered as individual items in the list */
-    items: Item[];
-    /** The function called when an item is selected or removed. It passes the entire list of selected items. */
-    onChange: (list: Item[]) => void;
-    /** The function called before an item is selected or removed */
-    beforeItemChange?: (item: Item, action: Action, next: Next) => void;
-    /** The header title of the transfer list */
-    listTitle?: string;
-    /** The text to display in a readOnly state where there are no selected items */
-    noItemsMessage?: string;
-    /** Disables moving items and only displays the list of selected items */
-    readOnly?: boolean;
-    /** Hides the select all button */
-    hideSelectAll?: boolean;
-    /** Hides the remove all button */
-    hideRemoveAll?: boolean;
-} & Width & Margin;
-declare const TransferList: ({ items, onChange, beforeItemChange, listTitle, noItemsMessage, hideSelectAll, hideRemoveAll, readOnly, width, margin, marginTop, marginBottom, marginRight, marginLeft, }: TransferListProps) => react_jsx_runtime.JSX.Element;
-
 type Data = {
     [key: string]: unknown;
 };
@@ -2533,22 +2521,6 @@ declare const Table: {
     } & Omit<react.HTMLProps<HTMLDivElement>, "as"> & AsProp) => react_jsx_runtime.JSX.Element;
 };
 
-type ToggleProps = {
-    /** Id of the input element */
-    id?: string;
-    /** Places a label element beside the toggle. The value will set the text of the label */
-    label?: string;
-    /** Sets the label on the left or right of the toggle */
-    labelPosition?: 'left' | 'right';
-    /** Disables the toggle */
-    disabled?: boolean;
-    /** Controls the checked property of the toggle */
-    checked?: boolean;
-    /** The function called with the toggle value after the toggle is changed */
-    onChange: (val: boolean) => void;
-} & Margin & AsProp & CheckboxAttributes;
-declare const Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: ToggleProps) => react_jsx_runtime.JSX.Element;
-
 type TabItem = {
     /** The id of the tab */
     id: string | number;
@@ -2577,6 +2549,78 @@ type Props$1<ItemType> = {
 } & Margin;
 declare const Tabs: <ItemType extends TabItem>({ items, activeItem, itemWidth, itemGap, onChange, ...props }: Props$1<ItemType>) => react_jsx_runtime.JSX.Element;
 
+type ToggleProps = {
+    /** Id of the input element */
+    id?: string;
+    /** Places a label element beside the toggle. The value will set the text of the label */
+    label?: string;
+    /** Sets the label on the left or right of the toggle */
+    labelPosition?: 'left' | 'right';
+    /** Disables the toggle */
+    disabled?: boolean;
+    /** Controls the checked property of the toggle */
+    checked?: boolean;
+    /** The function called with the toggle value after the toggle is changed */
+    onChange: (val: boolean) => void;
+} & Margin & AsProp & CheckboxAttributes;
+declare const Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: ToggleProps) => react_jsx_runtime.JSX.Element;
+
+type Color = ColorNames | CSSProperties['color'];
+type Item = {
+    /** Unique ID of the item */
+    id: number | string;
+    /** The text displayed for the transfer item */
+    label: string;
+    /** Used as the data of the item */
+    value?: unknown;
+    /** If both `header` and `body` are provided, this text will be styled as the transfer item's header */
+    header?: string;
+    /** If both `header` and `body` are provided, this text will be styled as the transfer item's body */
+    body?: string;
+    /** Any element to be displayed to the left of the item's label/header/body */
+    leftElement?: ReactElement;
+    /** Any element to be displayed to the right of the item's label/header/body */
+    rightElement?: ReactElement;
+    /** The left border color of the transfer item */
+    color?: Color;
+    /** Used to preselect an item */
+    selected?: boolean;
+    [key: string]: unknown;
+};
+type Action = 'select' | 'remove';
+type Next = (item?: Item) => void;
+type TransferListProps = {
+    /** Array of objects that will be rendered as individual items in the list */
+    items: Item[];
+    /** The function called when an item is selected or removed. It passes the entire list of selected items. */
+    onChange: (list: Item[]) => void;
+    /** The function called before an item is selected or removed */
+    beforeItemChange?: (item: Item, action: Action, next: Next) => void;
+    /** The header title of the transfer list */
+    listTitle?: string;
+    /** The text to display in a readOnly state where there are no selected items */
+    noItemsMessage?: string;
+    /** Disables moving items and only displays the list of selected items */
+    readOnly?: boolean;
+    /** Hides the select all button */
+    hideSelectAll?: boolean;
+    /** Hides the remove all button */
+    hideRemoveAll?: boolean;
+} & Width & Margin;
+declare const TransferList: ({ items, onChange, beforeItemChange, listTitle, noItemsMessage, hideSelectAll, hideRemoveAll, readOnly, width, margin, marginTop, marginBottom, marginRight, marginLeft, }: TransferListProps) => react_jsx_runtime.JSX.Element;
+
+type ResetStylesProps = {
+    /** An array of font families to pass to the font loader */
+    families?: string[];
+    /** The default font family to set */
+    fontFamily?: string;
+};
+declare const ResetStyles: ({ families, fontFamily }: ResetStylesProps) => react_jsx_runtime.JSX.Element;
+
+declare const ScrollbarStyles: () => react_jsx_runtime.JSX.Element;
+
+declare const ToastStyles: () => react_jsx_runtime.JSX.Element;
+
 declare const darkScale: {
     scale0: string;
     scale1: string;
@@ -2621,10 +2665,32 @@ declare const lightScale: {
     background5: string;
 };
 
+type Props = {
+    header?: string;
+    text?: string;
+    cancelText?: string;
+    confirmText?: string;
+    input?: boolean;
+    inputLabel?: string;
+    inputPlaceholder?: string;
+    inputValue?: string;
+    negative?: boolean;
+};
+declare const useConfirm: ({ header, text, cancelText, confirmText, negative, input, inputLabel, inputPlaceholder, inputValue, }?: Props) => readonly [() => Promise<boolean | string>, () => react_jsx_runtime.JSX.Element];
+
+/**
+ * A React hook that fires a callback whenever ResizeObserver detects a change to its size
+ * @param target A React ref created by useRef()
+ * @param callback Invoked with a single HTMLElement any time the target resizes
+ */
+declare const useElementObserver: <T extends HTMLElement>(target: RefObject<T>, callback: (node: T) => void) => void;
+
 declare const useEventListener: <T extends Event>(element: MutableRefObject<HTMLElement> | HTMLElement | Document | Window, type: keyof WindowEventMap, listener: (event: T) => void, condition?: boolean, dependencies?: unknown[]) => void;
 
 declare const useOnClickOutside: <T extends HTMLElement>(onClickOutside: () => void, condition?: boolean, exclusions?: string[]) => MutableRefObject<T | null>;
 
+declare const usePrevious: <T>(value: T) => T;
+
 type UseSelectProps<OptionType> = {
     /** The options that will be displayed in the list */
     options: OptionType[];
@@ -2661,39 +2727,6 @@ declare const useWindowSize: () => {
     height: number | null;
 };
 
-type Props = {
-    header?: string;
-    text?: string;
-    cancelText?: string;
-    confirmText?: string;
-    input?: boolean;
-    inputLabel?: string;
-    inputPlaceholder?: string;
-    inputValue?: string;
-    negative?: boolean;
-};
-declare const useConfirm: ({ header, text, cancelText, confirmText, negative, input, inputLabel, inputPlaceholder, inputValue, }?: Props) => readonly [() => Promise<boolean | string>, () => react_jsx_runtime.JSX.Element];
-
-/**
- * A React hook that fires a callback whenever ResizeObserver detects a change to its size
- * @param target A React ref created by useRef()
- * @param callback Invoked with a single HTMLElement any time the target resizes
- */
-declare const useElementObserver: <T extends HTMLElement>(target: RefObject<T>, callback: (node: T) => void) => void;
-
-declare const usePrevious: <T>(value: T) => T;
-
-type TimeSpec = 'onlyTime' | 'withTime' | 'relative';
-type TimeOptions = {
-    time?: TimeSpec;
-    lowercase?: boolean;
-};
-declare const formatDate: (value: Date, option?: TimeSpec | TimeOptions) => string;
-
-declare const copyToClipboard: (text: string) => void;
-
-declare const numberWithCommas: (number: number) => string;
-
 declare const widthHeightProps: ({ width, height }: WidthHeight) => {
     width: string | number | undefined;
     height: string | number | undefined;
@@ -2720,4 +2753,15 @@ declare const positionProps: ({ position, top, bottom, right, left }: Position)
     left: string | number | undefined;
 };
 
-export { Accordion, type AsProp as As, Audio, type AudioRef, BarChart, Button, Calendar, Checkbox, Code, Table$1 as DocTable, DraftEditor, type DraftEditorRef, Dropdown, DropdownMenu, type OptionItem as DropdownOption, type FlexPosition, Form, Grid, type Height, type ITheme, Icon, type IconNames, ImageViewer, InlineCode, Input, type InputRef, _default as InputUtils, Label, LineChart, type Margin, type MarginPadding, type MaxHeight, type MaxWidth, type MaxWidthHeight, Menu, Message, MessageHr, type MinHeight, type MinWidth, type MinWidthHeight, Modal, MultiSelect, type MultiSelectRef, Notification, Options, type Padding, Pagination, PieChart, type Position, Progress, Radio, ResetStyles, ScrollbarStyles, Slider, Spacer, Spinner, type TabItem, Table, Tabs, type ThemeProp, ToastStyles, Toggle, Tooltip, type Action as TransferAction, type Item as TransferItem, TransferList, type Next as TransferNext, type Width, type WidthHeight, colors, copyToClipboard, darkScale, formatDate, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, useConfirm, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelect, useSelectAll, useWindowSize, widthHeightProps };
+declare const copyToClipboard: (text: string) => void;
+
+type TimeSpec = 'onlyTime' | 'withTime' | 'relative';
+type TimeOptions = {
+    time?: TimeSpec;
+    lowercase?: boolean;
+};
+declare const formatDate: (value: Date, option?: TimeSpec | TimeOptions) => string;
+
+declare const numberWithCommas: (number: number) => string;
+
+export { Accordion, type AsProp as As, Audio, type AudioRef, BarChart, Button, Calendar, Checkbox, Code, Table$1 as DocTable, DraftEditor, type DraftEditorRef, Dropdown, DropdownMenu, type OptionItem as DropdownOption, type FlexPosition, Form, Grid, type Height, type ITheme, Icon, type IconNames, ImageViewer, InlineCode, Input, type InputRef, _default as InputUtils, Label, LineChart, type Margin, type MarginPadding, type MaxHeight, type MaxWidth, type MaxWidthHeight, Menu, Message, MessageHr, type MinHeight, type MinWidth, type MinWidthHeight, Modal, MultiSelect, type MultiSelectRef, Notification, Options, type Padding, Pagination, PieChart, type Position, Progress, Radio, ResetStyles, ScrollbarStyles, Select, Slider, Spacer, Spinner, type TabItem, Table, Tabs, type ThemeProp, ToastStyles, Toggle, Tooltip, type Action as TransferAction, type Item as TransferItem, TransferList, type Next as TransferNext, type Width, type WidthHeight, colors, copyToClipboard, darkScale, formatDate, lightScale, marginProps, numberWithCommas, paddingProps, positionProps, theme, useConfirm, useElementObserver, useEventListener, useOnClickOutside, usePrevious, useSelect, useSelectAll, useWindowSize, widthHeightProps };

package/build/types/components/InputHelpers.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputFocusEvent, ThemeProp } from './types';
+import { InputFocusEvent, MarginPadding, ThemeProp, WidthHeight } from './types';
 type FocusCallBack = (event?: InputFocusEvent) => void;
 export declare const useInputFocus: (onFocus?: FocusCallBack, onBlur?: FocusCallBack, focusCondition?: boolean) => {
     focused: boolean;
@@ -7,6 +7,21 @@ export declare const useInputFocus: (onFocus?: FocusCallBack, onBlur?: FocusCall
     handleBlur: (event?: InputFocusEvent) => void;
 };
 export declare const isInputFilled: (value?: string | number) => boolean;
+export type InputContainerProps = {
+    backgroundColor?: string;
+    borderRadius?: number | string;
+    borderless?: boolean;
+    borderColor?: string;
+    fontSize?: number | string;
+    placeholderColor?: string;
+    pointer?: boolean;
+    readOnly?: boolean;
+    textOnly?: boolean;
+    focused?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    hasLabel?: boolean;
+} & WidthHeight & MarginPadding & ThemeProp;
 export declare const InputContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
@@ -15,6 +30,8 @@ export declare const InputContainer: import("@emotion/styled").StyledComponent<{
     borderRadius?: string | number | undefined;
     borderless?: boolean | undefined;
     borderColor?: string | undefined;
+    fontSize?: string | number | undefined;
+    placeholderColor?: string | undefined;
     pointer?: boolean | undefined;
     readOnly?: boolean | undefined;
     textOnly?: boolean | undefined;
@@ -52,6 +69,8 @@ declare const _default: {
         borderRadius?: string | number | undefined;
         borderless?: boolean | undefined;
         borderColor?: string | undefined;
+        fontSize?: string | number | undefined;
+        placeholderColor?: string | undefined;
         pointer?: boolean | undefined;
         readOnly?: boolean | undefined;
         textOnly?: boolean | undefined;

package/build/types/components/Select.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="react" />
+import { OptionItem } from './Dropdown/DropdownUtils';
+import { Margin, WidthHeight } from './types';
+type SelectProps<OptionType> = {
+    /** The function to be called when an option is selected */
+    onChange?: (item: OptionType | null) => void;
+    /** The value of the Select */
+    value?: string;
+    /** The function to be called when the Select is opened */
+    afterShow?: () => void;
+    /** The function to be called when the Select is closed */
+    afterHide?: () => void;
+    /** Sets the input placeholder text */
+    placeholder?: string;
+    /** Sets the input placeholder color */
+    placeholderColor?: string;
+    /** The options to be displayed */
+    options?: OptionType[];
+    /** Removes the border from the Select input */
+    borderless?: boolean;
+    /** Sets the input borderColor */
+    borderColor?: string;
+    /** Sets the input backgroundColor */
+    backgroundColor?: string;
+    /** Removes the border and background-color from the Select input */
+    textOnly?: boolean;
+    /** Adds a label to the Select input */
+    label?: string;
+    /** Sets the id of the Select input or trigger */
+    id?: string;
+    /** Sets the Select fontSize */
+    fontSize?: number | string;
+    /** Places a description message below the Select */
+    description?: string;
+    /** Disables the Select */
+    disabled?: boolean;
+    /** Sets the Select's bottom border and description text to red */
+    invalid?: boolean;
+    /** zIndex of the menu's portal container */
+    zIndex?: number;
+    /** Controls the open state of the menu */
+    open?: boolean;
+} & WidthHeight & Margin;
+declare const Select: <OptionType extends OptionItem>({ onChange, afterShow, afterHide, placeholder, placeholderColor, value, options, borderless, borderColor, backgroundColor, textOnly, width, label, id, fontSize, description, disabled, invalid, zIndex, open, ...props }: SelectProps<OptionType>) => import("react/jsx-runtime").JSX.Element;
+export declare const Trigger: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    backgroundColor?: string | undefined;
+    borderRadius?: string | number | undefined;
+    borderless?: boolean | undefined;
+    borderColor?: string | undefined;
+    fontSize?: string | number | undefined;
+    placeholderColor?: 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 & import("./types").Padding & import("./types").ThemeProp & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export default Select;

package/build/types/index.d.ts

@@ -29,36 +29,37 @@ export { default as Pagination } from './components/Pagination';
 export { default as PieChart } from './components/PieChart';
 export { default as Progress } from './components/Progress';
 export { default as Radio } from './components/Radio';
-export { default as ResetStyles } from './global-styles/ResetStyles';
-export { default as ScrollbarStyles } from './global-styles/ScrollbarStyles';
-export { default as ToastStyles } from './global-styles/ToastStyles';
+export { default as Select } from './components/Select';
 export { default as Slider } from './components/Slider';
 export { default as Spacer } from './components/Spacer';
 export { default as Spinner } from './components/Spinner';
-export { default as TransferList } from './components/TransferList';
 export { default as Table } from './components/Table';
+export { default as Tabs } from './components/Tabs';
 export { default as Toggle } from './components/Toggle';
 export { default as Tooltip } from './components/Tooltip';
-export { default as Tabs } from './components/Tabs';
+export { default as TransferList } from './components/TransferList';
+export { default as ResetStyles } from './global-styles/ResetStyles';
+export { default as ScrollbarStyles } from './global-styles/ScrollbarStyles';
+export { default as ToastStyles } from './global-styles/ToastStyles';
 export { default as theme } from './theme';
 export { default as colors } from './theme/colors';
 export { default as darkScale } from './theme/darkScale';
 export { default as lightScale } from './theme/lightScale';
-export type { ITheme, ThemeProp } from './theme/ThemeTypes';
+export type { DropdownOption } from './components/Dropdown';
 export type { IconNames } from './components/Icon/icons';
 export type { TabItem } from './components/Tabs';
-export type { DropdownOption } from './components/Dropdown';
-export type { Item as TransferItem, Action as TransferAction, Next as TransferNext } from './components/TransferList';
-export type { AudioRef, DraftEditorRef, InputRef, MultiSelectRef, Margin, Padding, Position, MinWidth, MaxWidth, MinHeight, MaxHeight, MinWidthHeight, MaxWidthHeight, Width, Height, WidthHeight, MarginPadding, FlexPosition, AsProp as As, } from './components/types';
+export type { Action as TransferAction, Item as TransferItem, Next as TransferNext } from './components/TransferList';
+export type { AsProp as As, AudioRef, DraftEditorRef, FlexPosition, Height, InputRef, Margin, MarginPadding, MaxHeight, MaxWidth, MaxWidthHeight, MinHeight, MinWidth, MinWidthHeight, MultiSelectRef, Padding, Position, Width, WidthHeight, } from './components/types';
+export type { ITheme, ThemeProp } from './theme/ThemeTypes';
+export { default as useConfirm } from './hooks/useConfirm';
+export { default as useElementObserver } from './hooks/useElementObserver';
 export { default as useEventListener } from './hooks/useEventListener';
 export { default as useOnClickOutside } from './hooks/useOnClickOutside';
+export { default as usePrevious } from './hooks/usePrevious';
 export { default as useSelect } from './hooks/useSelect';
 export { default as useSelectAll } from './hooks/useSelectAll';
 export { default as useWindowSize } from './hooks/useWindowSize';
-export { default as useConfirm } from './hooks/useConfirm';
-export { default as useElementObserver } from './hooks/useElementObserver';
-export { default as usePrevious } from './hooks/usePrevious';
-export { default as formatDate } from './utils/formatDate';
+export { marginProps, paddingProps, positionProps, widthHeightProps } from './components/helpers/styledProps';
 export { default as copyToClipboard } from './utils/copyToClipboard';
+export { default as formatDate } from './utils/formatDate';
 export { default as numberWithCommas } from './utils/numberWithCommas';
-export { widthHeightProps, paddingProps, marginProps, positionProps } from './components/helpers/styledProps';