@peculiar/react-components 0.6.7 → 1.0.0

package/dist/esnext/NativeSelect/native_select.js

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { Typography } from '../Typography';
+import { ArrowDropDownIcon } from '../icons';
+/**
+ *
+ */
+/**
+ * Styles.
+ */
+const NativeSelectRoot = styled('select')((props) => ({
+    fontFamily: 'inherit',
+    outline: 'none',
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    width: '100%',
+    borderRadius: '4px',
+    padding: '0 calc(var(--pv-size-base-2) + 24px) 0 var(--pv-size-base-2)',
+    backgroundColor: 'var(--pv-color-gray-1)',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    transition: 'background-color 200ms, color 200ms, border-color 200ms',
+    display: 'block',
+    appearance: 'none',
+    fontWeight: 'var(--pv-text-c1-weight)',
+    fontSize: 'var(--pv-text-c1-size)',
+    lineHeight: 'var(--pv-text-c1-height)',
+    letterSpacing: 'var(--pv-text-c1-spacing)',
+    ...(props.selectSize === 'small' && {
+        height: 'var(--pv-size-base-6)',
+    }),
+    ...(props.selectSize === 'medium' && {
+        height: 'var(--pv-size-base-7)',
+    }),
+    ...(props.selectSize === 'large' && {
+        height: 'var(--pv-size-base-8)',
+    }),
+}), (props) => {
+    const isDark = props.theme.mode === 'dark';
+    const color = isDark
+        ? 'var(--pv-color-white)'
+        : 'var(--pv-color-black)';
+    let borderColor = 'var(--pv-color-gray-8)';
+    let borderColorHover = 'var(--pv-color-gray-7)';
+    let borderColorDisabled = 'var(--pv-color-gray-5)';
+    let colorDisabled = 'var(--pv-color-gray-7)';
+    let invalidBackgroundColor = 'var(--pv-color-wrong-tint-5)';
+    let invalidBorderColor = 'var(--pv-color-wrong-tint-3)';
+    let backgroundColorFocus = 'var(--pv-color-secondary-tint-5)';
+    let borderColorFocus = 'var(--pv-color-secondary-tint-3)';
+    if (isDark) {
+        borderColor = 'var(--pv-color-gray-5)';
+        borderColorHover = 'var(--pv-color-gray-4)';
+        borderColorDisabled = 'var(--pv-color-gray-4)';
+        colorDisabled = 'var(--pv-color-gray-4)';
+        invalidBackgroundColor = 'var(--pv-color-wrong-shade-4)';
+        invalidBorderColor = 'var(--pv-color-wrong-shade-1)';
+        backgroundColorFocus = 'var(--pv-color-secondary-shade-4)';
+        borderColorFocus = 'var(--pv-color-secondary-shade-1)';
+    }
+    return ({
+        color,
+        borderColor,
+        '&:hover': {
+            backgroundColor: 'var(--pv-color-gray-3)',
+            borderColor: borderColorHover,
+        },
+        '&:disabled': {
+            cursor: 'not-allowed',
+            backgroundColor: 'var(--pv-color-gray-1)',
+            borderColor: borderColorDisabled,
+            color: colorDisabled,
+        },
+        '&:not(:disabled)': {
+            '&[aria-invalid]': {
+                backgroundColor: invalidBackgroundColor,
+                borderColor: invalidBorderColor,
+            },
+            '&:focus-visible': {
+                backgroundColor: backgroundColorFocus,
+                borderColor: borderColorFocus,
+            },
+        },
+    });
+});
+const NativeSelectLabel = styled('label')({
+    marginBottom: '2px',
+    display: 'inline-block',
+});
+const NativeSelectErrorMessage = styled(Typography)({
+    marginTop: '2px',
+});
+const NativeSelectContainer = styled('div')({
+    position: 'relative',
+});
+const NativeSelectArrowIcon = styled(ArrowDropDownIcon)((props) => ({
+    position: 'absolute',
+    right: '0px',
+    top: 'calc(50% - 12px)',
+    pointerEvents: 'none',
+    margin: '0px var(--pv-size-base)',
+    color: 'var(--pv-color-gray-10)',
+    ...(props.disabled && {
+        color: 'var(--pv-color-gray-7)',
+    }),
+}));
+/**
+ *
+ */
+export const NativeSelect = React.forwardRef((props, ref) => {
+    const { options, size, label, inputProps, disabled, defaultValue, id, value, placeholder, required, name, inputRef, error, errorText, autoFocus, onChange, ...other } = props;
+    return (React.createElement("div", { ref: ref, ...other },
+        label && (React.createElement(NativeSelectLabel, { htmlFor: id },
+            React.createElement(Typography, { component: "span", variant: "c2", color: "gray-10" }, label))),
+        React.createElement(NativeSelectContainer, null,
+            React.createElement(NativeSelectRoot, { selectSize: size, disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, 
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus: autoFocus, "aria-invalid": error || undefined, onChange: onChange, ...inputProps },
+                placeholder && (React.createElement("option", { value: "" }, placeholder)),
+                options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label)))),
+            React.createElement(NativeSelectArrowIcon, { disabled: disabled, "aria-hidden": true })),
+        error && errorText && (React.createElement(NativeSelectErrorMessage, { variant: "c2", color: "wrong" }, errorText))));
+});
+NativeSelect.displayName = 'NativeSelect';
+NativeSelect.defaultProps = {
+    disabled: false,
+    size: 'medium',
+};
+//# sourceMappingURL=native_select.js.map

package/dist/esnext/NativeSelect/native_select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native_select.js","sourceRoot":"","sources":["../../../src/NativeSelect/native_select.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Select/select.js

@@ -1,17 +1,22 @@
-import * as React from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
+import { useAutocomplete, } from '../hooks';
+import { Popover } from '../Popover';
+import { TextField } from '../TextField';
 import { Typography } from '../Typography';
-import { ArrowDropDownIcon } from '../icons';
+import { Box } from '../Box';
+import { Chip } from '../Chip';
+import { Button } from '../Button';
+import { ArrowDropDownIcon, PlusIcon } from '../icons';
+import { MenuItem } from '../MenuList';
 /**
  *
  */
 /**
  * Styles.
  */
-const SelectRoot = styled('select')((props) => ({
-    fontFamily: 'inherit',
+const SelectField = styled(Typography)((props) => ({
     outline: 'none',
-    cursor: 'pointer',
     boxSizing: 'border-box',
     width: '100%',
     borderRadius: '4px',
@@ -20,20 +25,22 @@ const SelectRoot = styled('select')((props) => ({
     borderStyle: 'solid',
     borderWidth: '1px',
     transition: 'background-color 200ms, color 200ms, border-color 200ms',
-    display: 'block',
     appearance: 'none',
-    fontWeight: 'var(--pv-text-c1-weight)',
-    fontSize: 'var(--pv-text-c1-size)',
-    lineHeight: 'var(--pv-text-c1-height)',
-    letterSpacing: 'var(--pv-text-c1-spacing)',
-    ...(props.selectSize === 'small' && {
+    userSelect: 'none',
+    textAlign: 'left',
+    cursor: 'pointer',
+    fontFamily: 'inherit',
+    height: 'var(--pv-size-base-8)',
+    position: 'relative',
+    ...(props.size === 'small' && {
         height: 'var(--pv-size-base-6)',
     }),
-    ...(props.selectSize === 'medium' && {
+    ...(props.size === 'medium' && {
         height: 'var(--pv-size-base-7)',
     }),
-    ...(props.selectSize === 'large' && {
-        height: 'var(--pv-size-base-8)',
+    ...(props.multiple === true && {
+        display: 'inline-flex',
+        alignItems: 'center',
     }),
 }), (props) => {
     const isDark = props.theme.mode === 'dark';
@@ -41,6 +48,7 @@ const SelectRoot = styled('select')((props) => ({
         ? 'var(--pv-color-white)'
         : 'var(--pv-color-black)';
     let borderColor = 'var(--pv-color-gray-8)';
+    let colorPlaceholder = 'var(--pv-color-gray-9)';
     let borderColorHover = 'var(--pv-color-gray-7)';
     let borderColorDisabled = 'var(--pv-color-gray-5)';
     let colorDisabled = 'var(--pv-color-gray-7)';
@@ -50,6 +58,7 @@ const SelectRoot = styled('select')((props) => ({
     let borderColorFocus = 'var(--pv-color-secondary-tint-3)';
     if (isDark) {
         borderColor = 'var(--pv-color-gray-5)';
+        colorPlaceholder = 'var(--pv-color-gray-6)';
         borderColorHover = 'var(--pv-color-gray-4)';
         borderColorDisabled = 'var(--pv-color-gray-4)';
         colorDisabled = 'var(--pv-color-gray-4)';
@@ -59,7 +68,6 @@ const SelectRoot = styled('select')((props) => ({
         borderColorFocus = 'var(--pv-color-secondary-shade-1)';
     }
     return ({
-        color,
         borderColor,
         '&:hover': {
             backgroundColor: 'var(--pv-color-gray-3)',
@@ -72,6 +80,10 @@ const SelectRoot = styled('select')((props) => ({
             color: colorDisabled,
         },
         '&:not(:disabled)': {
+            color,
+            '&[aria-placeholder]': {
+                color: colorPlaceholder,
+            },
             '&[aria-invalid]': {
                 backgroundColor: invalidBackgroundColor,
                 borderColor: invalidBorderColor,
@@ -83,47 +95,175 @@ const SelectRoot = styled('select')((props) => ({
         },
     });
 });
-const SelectLabel = styled('label')({
-    marginBottom: '2px',
-    display: 'inline-block',
-});
-const SelectErrorMessage = styled(Typography)({
-    marginTop: '2px',
-});
-const SelectContainer = styled('div')({
-    position: 'relative',
-});
-const SelectArrowIcon = styled(ArrowDropDownIcon)((props) => ({
+const SelectArrowIcon = styled(ArrowDropDownIcon)({
     position: 'absolute',
     right: '0px',
     top: 'calc(50% - 12px)',
-    pointerEvents: 'none',
     margin: '0px var(--pv-size-base)',
     color: 'var(--pv-color-gray-10)',
-    ...(props.disabled && {
-        color: 'var(--pv-color-gray-7)',
+    '&[aria-disabled="true"]': {
+        color: 'inherit',
+    },
+});
+const SelectNativeInput = styled('input')({
+    bottom: 0,
+    left: 0,
+    height: '100%',
+    position: 'absolute',
+    opacity: 0,
+    pointerEvents: 'none',
+    width: '100%',
+    boxSizing: 'border-box',
+});
+const SelectDropdownStateItem = styled('div')({
+    padding: 'var(--pv-size-base-3) var(--pv-size-base-2)',
+});
+const SelectDropdownList = styled('ul')({
+    maxHeight: '36vh',
+    overflowY: 'auto',
+    margin: 0,
+    listStyleType: 'none',
+    position: 'relative',
+    padding: '10px 0',
+});
+const SelectDropdownGroupName = styled(Typography)((props) => ({
+    padding: 'var(--pv-size-base-2)',
+    color: props.theme.mode === 'dark'
+        ? 'var(--pv-color-gray-6)'
+        : 'var(--pv-color-gray-9)',
+}));
+const SelectDropdownGroupList = styled('ul')({
+    padding: 0,
+    listStyleType: 'none',
+});
+const SelectDropdownGroupListItem = styled(MenuItem)((props) => ({
+    ...(props.inGroup && {
+        padding: '0px var(--pv-size-base-2) 0 var(--pv-size-base-3)',
     }),
 }));
+const SelectPopover = styled(Popover)({
+    minWidth: 240,
+});
+const SelectTagsList = styled('div')({
+    overflow: 'hidden',
+    width: '100%',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(0, max-content))',
+    gap: 'var(--pv-size-base)',
+});
+const SelectTag = styled(Chip)((props) => ({
+    label: 'Select-tag',
+    borderRadius: '3px',
+    margin: 0,
+    ...(props.size === 'small' && {
+        height: 'var(--pv-size-base-5)',
+    }),
+}));
+const SelectTagSize = styled(Typography)({
+    margin: '0 var(--pv-size-base-2)',
+});
+const SelectSearchInput = styled(TextField)({
+    padding: 'var(--pv-size-base-3) var(--pv-size-base-3) var(--pv-size-base-2)',
+});
+const SelectCreateNewButton = styled(Button)({
+    width: '100%',
+    borderRadius: 0,
+    justifyContent: 'left',
+    padding: '0px var(--pv-size-base-2)',
+});
+const SelectError = styled(Typography)({
+    marginTop: '2px',
+});
+const SelectLabel = styled('label')({
+    label: 'TextField-label',
+    marginBottom: '2px',
+    display: 'inline-block',
+});
 /**
  *
  */
-export const Select = React.forwardRef((props, ref) => {
-    const { options, size, label, inputProps, disabled, defaultValue, id, value, placeholder, required, name, inputRef, error, errorText, autoFocus, onChange, ...other } = props;
-    return (React.createElement("div", { ref: ref, ...other },
-        label && (React.createElement(SelectLabel, { htmlFor: id },
+export const Select = (props) => {
+    const { className, size, placeholder, label, disableSearch, disabled = false, noOptionsText, loading, loadingText, limitTags = 2, name, required, multiple = false, readOnly, createOptionText, allowCreateOption, error, errorText, renderRoot: renderRootProp, renderOption: renderOptionProp, getLimitTagsText = (more) => `${more} more`, groupBy, onCreate, } = props;
+    const { id, value, searchValue, groupedOptions, getRootProps, getInputLabelProps, getInputProps, getListboxProps, getOptionProps, getPopoverProps, getTagProps, getOptionLabel, } = useAutocomplete(props);
+    const { onChange, ...otherInputProps } = getInputProps();
+    const popoverProps = getPopoverProps();
+    const handleCreate = (event) => {
+        if (onCreate) {
+            onCreate(event, searchValue);
+        }
+        popoverProps.onClose(event);
+    };
+    const defaultRenderOption = (propsOption, option) => (React.createElement(SelectDropdownGroupListItem, { ...propsOption, inGroup: Boolean(groupBy) }, getOptionLabel(option)));
+    const renderGroup = (params) => (React.createElement("li", { key: params.key },
+        React.createElement(SelectDropdownGroupName, { variant: "c1", color: "gray-10" }, params.group),
+        React.createElement(SelectDropdownGroupList, null, params.children)));
+    const renderValue = () => {
+        if (!value || (Array.isArray(value) && value.length === 0)) {
+            return null;
+        }
+        if (Array.isArray(value)) {
+            const more = (value.length > limitTags) ? (value.length - limitTags) : 0;
+            const valueLimits = more > 0 ? value.slice(0, limitTags) : value;
+            return (React.createElement(React.Fragment, null,
+                React.createElement(SelectTagsList, null, valueLimits.map((v, index) => (React.createElement(SelectTag, { ...getTagProps(v, index), color: "secondary", variant: "contained", size: size }, getOptionLabel(v))))),
+                !!more && (React.createElement(SelectTagSize, { variant: "c2", color: "gray-9" }, getLimitTagsText(more)))));
+        }
+        return getOptionLabel(value);
+    };
+    const renderedValue = renderValue();
+    const isValueEmpty = renderedValue === null;
+    const defaultRenderRoot = (propsRoot, valueRoot) => (React.createElement(SelectField, { ...propsRoot, noWrap: true, 
+        // @ts-ignore
+        component: "button", type: "button", variant: size === 'small' ? 'c1' : 'b3', "aria-invalid": error || undefined, "aria-placeholder": isValueEmpty || undefined, multiple: multiple, size: size },
+        isValueEmpty ? placeholder : renderedValue,
+        React.createElement(SelectArrowIcon, { "aria-disabled": disabled, "aria-hidden": true }),
+        React.createElement(SelectNativeInput, { type: "text", value: isValueEmpty ? '' : JSON.stringify(valueRoot), tabIndex: -1, "aria-hidden": "true", disabled: disabled, autoComplete: "off", id: id, name: name, required: required, readOnly: readOnly, onChange: () => { } })));
+    const renderOption = renderOptionProp || defaultRenderOption;
+    const renderRoot = renderRootProp || defaultRenderRoot;
+    const renderListOption = (option, index) => {
+        const optionProps = getOptionProps(option, index);
+        return renderOption(optionProps, option);
+    };
+    return (React.createElement("div", { className: className },
+        label && (React.createElement(SelectLabel, { ...getInputLabelProps() },
             React.createElement(Typography, { component: "span", variant: "c2", color: "gray-10" }, label))),
-        React.createElement(SelectContainer, null,
-            React.createElement(SelectRoot, { selectSize: size, disabled: disabled, defaultValue: defaultValue, id: id, value: value, required: required, name: name, ref: inputRef, 
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus: autoFocus, "aria-invalid": error || undefined, onChange: onChange, ...inputProps },
-                placeholder && (React.createElement("option", { value: "" }, placeholder)),
-                options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label)))),
-            React.createElement(SelectArrowIcon, { disabled: disabled, "aria-hidden": true })),
-        error && errorText && (React.createElement(SelectErrorMessage, { variant: "c2", color: "wrong" }, errorText))));
-});
-Select.displayName = 'Select';
+        renderRoot({
+            ...getRootProps(),
+            disabled,
+        }, value, getTagProps),
+        error && errorText && (React.createElement(SelectError, { variant: "c2", color: "wrong" }, errorText)),
+        React.createElement(SelectPopover, { placement: "bottom-start", allowUseSameWidth: true, ...popoverProps },
+            !disableSearch && (React.createElement(Box, { borderColor: "gray-3", borderPosition: "bottom", borderStyle: "solid", borderWidth: 1 },
+                React.createElement(SelectSearchInput, { id: otherInputProps.id, inputProps: otherInputProps, onChange: onChange, placeholder: "Search", disabled: loading }))),
+            loading && groupedOptions.length === 0 && (React.createElement(SelectDropdownStateItem, null, typeof loadingText === 'string' ? (React.createElement(Typography, { variant: "b2", color: "gray-10" }, loadingText)) : loadingText)),
+            groupedOptions.length === 0 && !loading && (React.createElement(SelectDropdownStateItem, null, typeof noOptionsText === 'string' ? (React.createElement(Typography, { variant: "b2", color: "gray-10" }, noOptionsText)) : noOptionsText)),
+            groupedOptions.length > 0 && (React.createElement(SelectDropdownList, { ...getListboxProps() }, groupedOptions
+                // @ts-ignore
+                .map((option, index) => {
+                // @ts-ignore
+                if (groupBy && 'options' in option) {
+                    return renderGroup({
+                        key: option.key,
+                        group: option.group,
+                        // @ts-ignore
+                        children: option.options.map((option2, index2) => (renderListOption(option2, option.index + index2))),
+                    });
+                }
+                return renderListOption(option, index);
+            }))),
+            (allowCreateOption && searchValue.length > 0 && !loading) && (React.createElement(Box, { borderColor: "gray-3", borderPosition: "top", borderStyle: "solid", borderWidth: 1 },
+                React.createElement(SelectCreateNewButton, { color: "secondary", textVariant: "b3", onClick: handleCreate, startIcon: React.createElement(PlusIcon, null) }, createOptionText.replace('{{value}}', searchValue)))))));
+};
+// @ts-ignore
 Select.defaultProps = {
-    disabled: false,
+    disableSearch: false,
+    noOptionsText: 'No options',
+    loading: false,
+    loadingText: 'Loading...',
+    limitTags: 2,
+    required: false,
+    allowCreateOption: false,
+    createOptionText: 'Create "{{value}}"',
     size: 'medium',
 };
 //# sourceMappingURL=select.js.map

package/dist/esnext/Select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/Select/select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/Select/select.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Toast/toast.js

@@ -17,7 +17,7 @@ export const Toast = (props) => {
             };
         }
         return undefined;
-    });
+    }, []);
     return (React.createElement(Fade, { in: true },
         React.createElement(Alert, { ...alertProps, onClose: isClosable ? handleClose : undefined }, children)));
 };

package/dist/esnext/Toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/Toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AA+B/B;;GAEG;AAEH,MAAM,CAAC,MAAM,KAAK,GAA4B,CAAC,KAAK,EAAE,EAAE;IACtD,MAAM,EACJ,EAAE,EACF,QAAQ,EACR,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,OAAO,CAAC,EAAE,CAAC,CAAC;IACd,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,GAAG,CAAC,EAAE;YAChB,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAC/B,WAAW,EACX,QAAQ,CACT,CAAC;YAEF,OAAO,GAAG,EAAE;gBACV,YAAY,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,IAAI,IAAC,EAAE;QACN,oBAAC,KAAK,OACA,UAAU,EACd,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IAE5C,QAAQ,CACH,CACH,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,KAAK,CAAC,YAAY,GAAG;IACnB,QAAQ,EAAE,IAAI;CACf,CAAC"}
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/Toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AA+B/B;;GAEG;AAEH,MAAM,CAAC,MAAM,KAAK,GAA4B,CAAC,KAAK,EAAE,EAAE;IACtD,MAAM,EACJ,EAAE,EACF,QAAQ,EACR,UAAU,EACV,UAAU,EACV,QAAQ,EACR,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,OAAO,CAAC,EAAE,CAAC,CAAC;IACd,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,GAAG,CAAC,EAAE;YAChB,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAC/B,WAAW,EACX,QAAQ,CACT,CAAC;YAEF,OAAO,GAAG,EAAE;gBACV,YAAY,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,IAAI,IAAC,EAAE;QACN,oBAAC,KAAK,OACA,UAAU,EACd,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IAE5C,QAAQ,CACH,CACH,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,KAAK,CAAC,YAAY,GAAG;IACnB,QAAQ,EAAE,IAAI;CACf,CAAC"}

package/dist/esnext/index.js

@@ -20,9 +20,9 @@ export * from './Popper';
 export * from './Popover';
 export * from './Portal';
 export * from './Radio';
-export * from './Select';
+export * from './NativeSelect';
 export * from './Skeleton';
-export * from './Autocomplete';
+export * from './Select';
 export * from './Slide';
 export * from './Slider';
 export * from './Switch';

package/dist/esnext/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC"}

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

@@ -0,0 +1 @@
+export { NativeSelect } from './native_select';

package/dist/types/NativeSelect/native_select.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+/**
+ * Types.
+ */
+declare type NativeSelectOwnProps = {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the select.
+     */
+    size?: ('small' | 'medium' | 'large');
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Attributes applied to the `input` element.
+     */
+    inputProps?: React.SelectHTMLAttributes<HTMLSelectElement>;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: string;
+    /**
+     * The id of the `input` element.
+     */
+    id?: string;
+    /**
+     * The label of the input. It is only used for layout.
+     */
+    label?: string;
+    /**
+     * The value of the `input` element, required for a controlled component.
+     */
+    value?: string;
+    /**
+     * The short hint displayed in the `input` before the user enters a value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the `input` element is required.
+     */
+    required?: boolean;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * Pass a ref to the `input` element.
+     */
+    inputRef?: React.ForwardedRef<HTMLSelectElement>;
+    /**
+     * If `true`, the `input` element is focused during the first mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * If `true`, the `input` will indicate an error.
+     */
+    error?: boolean;
+    errorText?: string;
+    /**
+     * Callback fired when the value is changed.
+     */
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+};
+/**
+ *
+ */
+export declare const NativeSelect: React.ForwardRefExoticComponent<NativeSelectOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
+export {};