@ttoss/ui 3.1.6 → 4.0.0

package/dist/esm/index.js

@@ -256,117 +256,172 @@ import { Text } from "theme-ui";
 // src/components/Select.tsx
 import * as React4 from "react";
 import { Icon as Icon5 } from "@ttoss/react-icons";
-import { Select as SelectUi } from "theme-ui";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var Select = /*#__PURE__*/React4.forwardRef(({
-  arrow,
-  sx,
-  leadingIcon,
-  trailingIcon,
+import ReactSelect, { components } from "react-select";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var Control = props => {
+  const isDisabled = props.selectProps.isDisabled;
+  const hasError = props.selectProps["aria-invalid"] === "true";
+  const border = (() => {
+    if (isDisabled) {
+      return "muted";
+    }
+    if (hasError) {
+      return "danger";
+    }
+    return "interaction";
+  })();
+  const backgroundColor = (() => {
+    if (isDisabled) {
+      return "muted";
+    }
+    return "surface";
+  })();
+  return /* @__PURE__ */jsx7(Box, {
+    sx: {
+      ".react-select__control": {
+        border,
+        backgroundColor,
+        paddingX: "xl",
+        paddingY: "lg",
+        borderRadius: "action"
+      }
+    },
+    children: /* @__PURE__ */jsx7(components.Control, {
+      ...props
+    })
+  });
+};
+var DropdownIndicator = props => {
+  const isDisabled = props.selectProps.isDisabled;
+  const color = (() => {
+    if (isDisabled) {
+      return "onMuted";
+    }
+    return "text";
+  })();
+  return /* @__PURE__ */jsx7(Text, {
+    sx: {
+      fontSize: "base",
+      color,
+      alignSelf: "center",
+      display: "flex",
+      alignItems: "center"
+    },
+    children: /* @__PURE__ */jsx7(Icon5, {
+      icon: "picker-down"
+    })
+  });
+};
+var IndicatorsContainer = ({
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ...props
-}, ref) => {
-  const hasError = props["aria-invalid"] === "true";
-  const refEl = React4.useRef({});
-  React4.useImperativeHandle(ref, () => {
-    return refEl.current;
+}) => {
+  return /* @__PURE__ */jsx7(Box, {
+    sx: {
+      marginLeft: "lg",
+      border: "none"
+    },
+    children
+  });
+};
+var Placeholder = ({
+  children
+}) => {
+  return /* @__PURE__ */jsx7(Text, {
+    sx: {
+      color: "onMuted",
+      alignSelf: "center"
+    },
+    children
+  });
+};
+var SelectContainer = ({
+  children,
+  ...props
+}) => {
+  const {
+    sx,
+    css: css2
+  } = props.selectProps;
+  return /* @__PURE__ */jsx7(Box, {
+    sx,
+    css: css2,
+    children: /* @__PURE__ */jsx7(components.SelectContainer, {
+      ...props,
+      children
+    })
   });
-  React4.useEffect(() => {
-    const parentEl = refEl.current?.parentElement;
-    if (parentEl) {
-      parentEl.style.position = "relative";
+};
+var ValueContainer = ({
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ...props
+}) => {
+  const {
+    leadingIcon,
+    trailingIcon
+  } = props.selectProps;
+  const hasError = props.selectProps["aria-invalid"] === "true";
+  const trailingIconColor = (() => {
+    if (hasError) {
+      return "danger";
     }
-  }, []);
-  return /* @__PURE__ */jsx7(SelectUi, {
-    arrow: /* @__PURE__ */jsxs6(Fragment2, {
-      children: [leadingIcon && /* @__PURE__ */jsx7(Text, {
-        sx: {
-          alignSelf: "center",
-          pointerEvents: "none",
-          lineHeight: 0,
-          fontSize: "base",
-          position: "absolute",
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          left: ({
-            space
-          }) => {
-            const leftSpaceValue = space?.["xl"] || "16px";
-            return leftSpaceValue;
-          }
-        },
-        children: /* @__PURE__ */jsx7(Icon5, {
-          icon: leadingIcon
-        })
-      }), /* @__PURE__ */jsxs6(Flex, {
-        sx: {
-          gap: "lg",
-          position: "absolute",
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          right: ({
-            space
-          }) => {
-            const xlSpace = space?.["xl"] || "16px";
-            return xlSpace;
-          },
-          alignSelf: "center",
-          pointerEvents: "none"
-        },
-        children: [(trailingIcon || hasError) && /* @__PURE__ */jsx7(Text, {
-          className: hasError ? "error-icon" : "",
-          sx: {
-            alignSelf: "center",
-            pointerEvents: "none",
-            lineHeight: 0,
-            fontSize: "base"
-          },
-          children: /* @__PURE__ */jsx7(Icon5, {
-            icon: hasError ? "warning-alt" : trailingIcon
-          })
-        }), arrow ?? /* @__PURE__ */jsx7(Text, {
-          sx: {
-            lineHeight: 0,
-            fontSize: "base"
-          },
-          children: /* @__PURE__ */jsx7(Icon5, {
-            icon: "picker-down"
-          })
-        })]
-      })]
-    }),
+    return "text";
+  })();
+  return /* @__PURE__ */jsxs6(Flex, {
     sx: {
-      fontFamily: "body",
-      width: "100%",
-      paddingY: "lg",
-      paddingX: "xl",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      paddingLeft: ({
-        space,
-        fontSizes
-      }) => {
-        const xlSpace = space?.["xl"] || "16px";
-        const iconSize = fontSizes?.["base"] || "16px";
-        const lgSpace = space?.["lg"] || "16px";
-        if (leadingIcon) {
-          return `calc(${xlSpace} + ${iconSize} +  ${lgSpace})`;
-        }
-        return xlSpace;
+      gap: "lg",
+      flex: 1
+    },
+    children: [leadingIcon && /* @__PURE__ */jsx7(Text, {
+      sx: {
+        alignSelf: "center",
+        pointerEvents: "none",
+        lineHeight: 0,
+        fontSize: "base"
       },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      paddingRight: ({
-        space,
-        fontSizes
-      }) => {
-        const xlSpace = space?.["xl"] || "16px";
-        const iconSize = fontSizes?.["base"] || "16px";
-        const lgSpace = space?.["lg"] || "16px";
-        if (trailingIcon || hasError) {
-          return `calc(${lgSpace} + ${iconSize} + ${lgSpace} + ${iconSize} + ${xlSpace})`;
-        }
-        return `calc(${lgSpace} + ${iconSize} + ${xlSpace})`;
+      children: /* @__PURE__ */jsx7(Icon5, {
+        icon: leadingIcon
+      })
+    }), /* @__PURE__ */jsx7(Flex, {
+      sx: {
+        flex: 1,
+        alignItems: "center"
       },
-      ...sx
+      children
+    }), (trailingIcon || hasError) && /* @__PURE__ */jsx7(Text, {
+      className: hasError ? "error-icon" : "",
+      sx: {
+        alignSelf: "center",
+        pointerEvents: "none",
+        lineHeight: 0,
+        fontSize: "base",
+        color: trailingIconColor
+      },
+      children: /* @__PURE__ */jsx7(Icon5, {
+        icon: hasError ? "warning-alt" : trailingIcon
+      })
+    })]
+  });
+};
+var Select = /*#__PURE__*/React4.forwardRef(({
+  ...props
+}, ref) => {
+  return /* @__PURE__ */jsx7(ReactSelect, {
+    ref,
+    components: {
+      Control,
+      DropdownIndicator,
+      IndicatorsContainer,
+      Placeholder,
+      SelectContainer,
+      ValueContainer,
+      ...props.components
     },
-    ref: refEl,
-    ...props
+    isDisabled: props.disabled,
+    ...props,
+    classNamePrefix: "react-select"
   });
 });
 Select.displayName = "Select";

package/dist/index.d.mts

@@ -1,11 +1,15 @@
 import * as theme_ui from 'theme-ui';
-import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SelectProps as SelectProps$1, IconButtonProps, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SxProp, Text, TextProps, Theme } from 'theme-ui';
+import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SxProp, IconButtonProps, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 export { Keyframes, keyframes } from '@emotion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { IconType } from '@ttoss/react-icons';
+import * as react_select_dist_declarations_src_useStateManager from 'react-select/dist/declarations/src/useStateManager';
+import * as react_select_dist_declarations_src_Select from 'react-select/dist/declarations/src/Select';
+import * as react_select from 'react-select';
+import { Props } from 'react-select';
 
 type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -50,11 +54,28 @@ type LinkProps = LinkProps$1 & {
 };
 declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
-type SelectProps = SelectProps$1 & {
+type SelectOption = {
+    label: string;
+    value: string | number;
+};
+type SelectOptions = SelectOption[];
+/**
+ * TODO: remove this when we accept multi select.
+ */
+type IsMulti = false;
+type SelectProps = Props<SelectOption, IsMulti> & SxProp & {
+    disabled?: boolean;
     leadingIcon?: IconType;
     trailingIcon?: IconType;
 };
-declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+/**
+ * https://react-select.com/home
+ */
+declare const Select: React.ForwardRefExoticComponent<Omit<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>, "onChange" | "value" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<SelectOption> & SxProp & {
+    disabled?: boolean | undefined;
+    leadingIcon?: IconType | undefined;
+    trailingIcon?: IconType | undefined;
+} & React.RefAttributes<any>>;
 
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
@@ -104,4 +125,4 @@ type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'>
 };
 declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, Container, HelpText, HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, SelectProps, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, Container, HelpText, HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, SelectOption, SelectOptions, SelectProps, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.d.ts

@@ -1,11 +1,15 @@
 import * as theme_ui from 'theme-ui';
-import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SelectProps as SelectProps$1, IconButtonProps, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SxProp, Text, TextProps, Theme } from 'theme-ui';
+import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SxProp, IconButtonProps, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 export { Keyframes, keyframes } from '@emotion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { IconType } from '@ttoss/react-icons';
+import * as react_select_dist_declarations_src_useStateManager from 'react-select/dist/declarations/src/useStateManager';
+import * as react_select_dist_declarations_src_Select from 'react-select/dist/declarations/src/Select';
+import * as react_select from 'react-select';
+import { Props } from 'react-select';
 
 type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -50,11 +54,28 @@ type LinkProps = LinkProps$1 & {
 };
 declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
-type SelectProps = SelectProps$1 & {
+type SelectOption = {
+    label: string;
+    value: string | number;
+};
+type SelectOptions = SelectOption[];
+/**
+ * TODO: remove this when we accept multi select.
+ */
+type IsMulti = false;
+type SelectProps = Props<SelectOption, IsMulti> & SxProp & {
+    disabled?: boolean;
     leadingIcon?: IconType;
     trailingIcon?: IconType;
 };
-declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+/**
+ * https://react-select.com/home
+ */
+declare const Select: React.ForwardRefExoticComponent<Omit<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>, "onChange" | "value" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<react_select_dist_declarations_src_Select.PublicBaseSelectProps<SelectOption, false, react_select.GroupBase<SelectOption>>> & react_select_dist_declarations_src_useStateManager.StateManagerAdditionalProps<SelectOption> & SxProp & {
+    disabled?: boolean | undefined;
+    leadingIcon?: IconType | undefined;
+    trailingIcon?: IconType | undefined;
+} & React.RefAttributes<any>>;
 
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
@@ -104,4 +125,4 @@ type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'>
 };
 declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, Container, HelpText, HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, SelectProps, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, Container, HelpText, HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, SelectOption, SelectOptions, SelectProps, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -40,16 +40,16 @@ var src_exports = {};
 __export(src_exports, {
   ActionButton: () => ActionButton,
   Badge: () => Badge,
-  BaseStyles: () => import_theme_ui27.BaseStyles,
+  BaseStyles: () => import_theme_ui26.BaseStyles,
   Box: () => import_theme_ui4.Box,
   Button: () => Button,
   Card: () => import_theme_ui6.Card,
-  Checkbox: () => import_theme_ui22.Checkbox,
+  Checkbox: () => import_theme_ui21.Checkbox,
   CloseButton: () => CloseButton,
   Container: () => Container,
   Divider: () => import_theme_ui7.Divider,
   Flex: () => import_theme_ui8.Flex,
-  Global: () => import_theme_ui27.Global,
+  Global: () => import_theme_ui26.Global,
   Grid: () => import_theme_ui9.Grid,
   Heading: () => import_theme_ui10.Heading,
   HelpText: () => HelpText,
@@ -62,11 +62,11 @@ __export(src_exports, {
   Label: () => Label,
   LinearProgress: () => import_theme_ui15.Progress,
   Link: () => Link,
-  Paragraph: () => import_theme_ui26.Paragraph,
-  Radio: () => import_theme_ui19.Radio,
+  Paragraph: () => import_theme_ui25.Paragraph,
+  Radio: () => import_theme_ui18.Radio,
   Select: () => Select,
-  Slider: () => import_theme_ui21.Slider,
-  Spinner: () => import_theme_ui18.Spinner,
+  Slider: () => import_theme_ui20.Slider,
+  Spinner: () => import_theme_ui17.Spinner,
   Stack: () => Stack,
   Text: () => import_theme_ui16.Text,
   Textarea: () => Textarea,
@@ -77,7 +77,7 @@ __export(src_exports, {
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(src_exports);
-var import_theme_ui27 = require("theme-ui");
+var import_theme_ui26 = require("theme-ui");
 var import_match_media = require("@theme-ui/match-media");
 var import_react2 = require("@emotion/react");
 
@@ -332,133 +332,188 @@ var import_theme_ui16 = require("theme-ui");
 // src/components/Select.tsx
 var React4 = __toESM(require("react"));
 var import_react_icons5 = require("@ttoss/react-icons");
-var import_theme_ui17 = require("theme-ui");
+var import_react_select = __toESM(require("react-select"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Select = React4.forwardRef(({
-  arrow,
-  sx,
-  leadingIcon,
-  trailingIcon,
+var Control = props => {
+  const isDisabled = props.selectProps.isDisabled;
+  const hasError = props.selectProps["aria-invalid"] === "true";
+  const border = (() => {
+    if (isDisabled) {
+      return "muted";
+    }
+    if (hasError) {
+      return "danger";
+    }
+    return "interaction";
+  })();
+  const backgroundColor = (() => {
+    if (isDisabled) {
+      return "muted";
+    }
+    return "surface";
+  })();
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui4.Box, {
+    sx: {
+      ".react-select__control": {
+        border,
+        backgroundColor,
+        paddingX: "xl",
+        paddingY: "lg",
+        borderRadius: "action"
+      }
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_select.components.Control, {
+      ...props
+    })
+  });
+};
+var DropdownIndicator = props => {
+  const isDisabled = props.selectProps.isDisabled;
+  const color = (() => {
+    if (isDisabled) {
+      return "onMuted";
+    }
+    return "text";
+  })();
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+    sx: {
+      fontSize: "base",
+      color,
+      alignSelf: "center",
+      display: "flex",
+      alignItems: "center"
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
+      icon: "picker-down"
+    })
+  });
+};
+var IndicatorsContainer = ({
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ...props
-}, ref) => {
-  const hasError = props["aria-invalid"] === "true";
-  const refEl = React4.useRef({});
-  React4.useImperativeHandle(ref, () => {
-    return refEl.current;
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui4.Box, {
+    sx: {
+      marginLeft: "lg",
+      border: "none"
+    },
+    children
+  });
+};
+var Placeholder = ({
+  children
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+    sx: {
+      color: "onMuted",
+      alignSelf: "center"
+    },
+    children
   });
-  React4.useEffect(() => {
-    const parentEl = refEl.current?.parentElement;
-    if (parentEl) {
-      parentEl.style.position = "relative";
+};
+var SelectContainer = ({
+  children,
+  ...props
+}) => {
+  const {
+    sx,
+    css: css2
+  } = props.selectProps;
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui4.Box, {
+    sx,
+    css: css2,
+    children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_select.components.SelectContainer, {
+      ...props,
+      children
+    })
+  });
+};
+var ValueContainer = ({
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ...props
+}) => {
+  const {
+    leadingIcon,
+    trailingIcon
+  } = props.selectProps;
+  const hasError = props.selectProps["aria-invalid"] === "true";
+  const trailingIconColor = (() => {
+    if (hasError) {
+      return "danger";
     }
-  }, []);
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui17.Select, {
-    arrow: /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, {
-      children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
-        sx: {
-          alignSelf: "center",
-          pointerEvents: "none",
-          lineHeight: 0,
-          fontSize: "base",
-          position: "absolute",
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          left: ({
-            space
-          }) => {
-            const leftSpaceValue = space?.["xl"] || "16px";
-            return leftSpaceValue;
-          }
-        },
-        children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
-          icon: leadingIcon
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_theme_ui8.Flex, {
-        sx: {
-          gap: "lg",
-          position: "absolute",
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          right: ({
-            space
-          }) => {
-            const xlSpace = space?.["xl"] || "16px";
-            return xlSpace;
-          },
-          alignSelf: "center",
-          pointerEvents: "none"
-        },
-        children: [(trailingIcon || hasError) && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
-          className: hasError ? "error-icon" : "",
-          sx: {
-            alignSelf: "center",
-            pointerEvents: "none",
-            lineHeight: 0,
-            fontSize: "base"
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
-            icon: hasError ? "warning-alt" : trailingIcon
-          })
-        }), arrow ?? /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
-          sx: {
-            lineHeight: 0,
-            fontSize: "base"
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
-            icon: "picker-down"
-          })
-        })]
-      })]
-    }),
+    return "text";
+  })();
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_theme_ui8.Flex, {
     sx: {
-      fontFamily: "body",
-      width: "100%",
-      paddingY: "lg",
-      paddingX: "xl",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      paddingLeft: ({
-        space,
-        fontSizes
-      }) => {
-        const xlSpace = space?.["xl"] || "16px";
-        const iconSize = fontSizes?.["base"] || "16px";
-        const lgSpace = space?.["lg"] || "16px";
-        if (leadingIcon) {
-          return `calc(${xlSpace} + ${iconSize} +  ${lgSpace})`;
-        }
-        return xlSpace;
+      gap: "lg",
+      flex: 1
+    },
+    children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+      sx: {
+        alignSelf: "center",
+        pointerEvents: "none",
+        lineHeight: 0,
+        fontSize: "base"
       },
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      paddingRight: ({
-        space,
-        fontSizes
-      }) => {
-        const xlSpace = space?.["xl"] || "16px";
-        const iconSize = fontSizes?.["base"] || "16px";
-        const lgSpace = space?.["lg"] || "16px";
-        if (trailingIcon || hasError) {
-          return `calc(${lgSpace} + ${iconSize} + ${lgSpace} + ${iconSize} + ${xlSpace})`;
-        }
-        return `calc(${lgSpace} + ${iconSize} + ${xlSpace})`;
+      children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
+        icon: leadingIcon
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui8.Flex, {
+      sx: {
+        flex: 1,
+        alignItems: "center"
       },
-      ...sx
+      children
+    }), (trailingIcon || hasError) && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+      className: hasError ? "error-icon" : "",
+      sx: {
+        alignSelf: "center",
+        pointerEvents: "none",
+        lineHeight: 0,
+        fontSize: "base",
+        color: trailingIconColor
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
+        icon: hasError ? "warning-alt" : trailingIcon
+      })
+    })]
+  });
+};
+var Select = React4.forwardRef(({
+  ...props
+}, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_select.default, {
+    ref,
+    components: {
+      Control,
+      DropdownIndicator,
+      IndicatorsContainer,
+      Placeholder,
+      SelectContainer,
+      ValueContainer,
+      ...props.components
     },
-    ref: refEl,
-    ...props
+    isDisabled: props.disabled,
+    ...props,
+    classNamePrefix: "react-select"
   });
 });
 Select.displayName = "Select";
 
 // src/components/Spinner.tsx
-var import_theme_ui18 = require("theme-ui");
+var import_theme_ui17 = require("theme-ui");
 
 // src/components/Radio.tsx
-var import_theme_ui19 = require("theme-ui");
+var import_theme_ui18 = require("theme-ui");
 
 // src/components/IconButton.tsx
 var React5 = __toESM(require("react"));
-var import_theme_ui20 = require("theme-ui");
+var import_theme_ui19 = require("theme-ui");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var IconButton = React5.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui20.IconButton, {
+  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui19.IconButton, {
     type: "button",
     ...props,
     ref
@@ -467,10 +522,10 @@ var IconButton = React5.forwardRef((props, ref) => {
 IconButton.displayName = "IconButton";
 
 // src/components/Slider.tsx
-var import_theme_ui21 = require("theme-ui");
+var import_theme_ui20 = require("theme-ui");
 
 // src/components/Checkbox.tsx
-var import_theme_ui22 = require("theme-ui");
+var import_theme_ui21 = require("theme-ui");
 
 // src/components/InfiniteLinearProgress.tsx
 var React6 = __toESM(require("react"));
@@ -509,7 +564,7 @@ var InfiniteLinearProgress = () => {
 // src/components/Textarea.tsx
 var React7 = __toESM(require("react"));
 var import_react_icons6 = require("@ttoss/react-icons");
-var import_theme_ui23 = require("theme-ui");
+var import_theme_ui22 = require("theme-ui");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Textarea = React7.forwardRef(({
   trailingIcon,
@@ -525,7 +580,7 @@ var Textarea = React7.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [/* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui23.Textarea, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui22.Textarea, {
       ref,
       sx: {
         fontFamily: "body",
@@ -554,10 +609,10 @@ Textarea.displayName = "Textarea";
 
 // src/components/Container.tsx
 var React8 = __toESM(require("react"));
-var import_theme_ui24 = require("theme-ui");
+var import_theme_ui23 = require("theme-ui");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Container = React8.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui24.Container, {
+  return /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui23.Container, {
     ref,
     ...props
   });
@@ -631,7 +686,7 @@ CloseButton.displayName = "CloseButton";
 // src/components/InputNumber.tsx
 var React10 = __toESM(require("react"));
 var import_react_icons8 = require("@ttoss/react-icons");
-var import_theme_ui25 = require("theme-ui");
+var import_theme_ui24 = require("theme-ui");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var InputNumber = React10.forwardRef(({
   sx,
@@ -703,7 +758,7 @@ var InputNumber = React10.forwardRef(({
     },
     ref,
     "aria-invalid": inputProps["aria-invalid"],
-    children: [/* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui25.Input, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui24.Input, {
       ref,
       variant: "forms.inputNumber",
       sx: sxProps,
@@ -770,7 +825,7 @@ var Stack = React11.forwardRef((props, ref) => {
 Stack.displayName = "Stack";
 
 // src/components/Paragraph.tsx
-var import_theme_ui26 = require("theme-ui");
+var import_theme_ui25 = require("theme-ui");
 
 // src/components/InputPassword/InputPassword.tsx
 var React13 = __toESM(require("react"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "3.1.6",
+  "version": "4.0.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -21,25 +21,26 @@
   "typings": "dist/index.d.ts",
   "dependencies": {
     "@theme-ui/match-media": "^0.16.1",
+    "react-select": "^5.8.0",
     "theme-ui": "^0.16.1",
-    "@ttoss/theme": "^1.6.5"
+    "@ttoss/theme": "^1.6.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.2.0"
+    "@ttoss/react-icons": "^0.2.1"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
     "@iconify-icons/mdi-light": "^1.2.5",
     "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.27",
+    "@types/react": "^18.2.29",
     "jest": "^29.7.0",
     "react": "^18.2.0",
     "tsup": "^7.2.0",
     "@ttoss/config": "^1.31.0",
-    "@ttoss/react-icons": "^0.2.0",
-    "@ttoss/test-utils": "^1.24.0"
+    "@ttoss/react-icons": "^0.2.1",
+    "@ttoss/test-utils": "^1.24.1"
   },
   "keywords": [
     "React",

package/src/components/Select.tsx

@@ -1,137 +1,250 @@
+/**
+ * We're using React Select component to build ttoss Select.
+ * More info about React Select: https://react-select.com/home
+ * ttoss Figma: https://www.figma.com/file/VrB76VkH4hKCDUe9iYhpYu/_Component-%2F-Forms-%2F-Select?type=design&mode=design&t=ZBIeOpqcvQn3yq2t-0
+ */
 import * as React from 'react';
-import { Flex, Text } from '..';
+import { Box, Flex, Text } from '..';
 import { Icon, IconType } from '@ttoss/react-icons';
-import {
-  type SelectProps as SelectPropsUi,
-  Select as SelectUi,
-} from 'theme-ui';
-
-export type SelectProps = SelectPropsUi & {
-  leadingIcon?: IconType;
-  trailingIcon?: IconType;
+import { type SxProp } from 'theme-ui';
+import ReactSelect, {
+  type ContainerProps,
+  type ControlProps,
+  type DropdownIndicatorProps,
+  type IndicatorsContainerProps,
+  type PlaceholderProps,
+  type Props as ReactSelectProps,
+  type ValueContainerProps,
+  components,
+} from 'react-select';
+
+export type SelectOption = {
+  label: string;
+  value: string | number;
 };
 
-export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({ arrow, sx, leadingIcon, trailingIcon, ...props }, ref) => {
-    const hasError = props['aria-invalid'] === 'true';
+export type SelectOptions = SelectOption[];
 
-    const refEl = React.useRef<HTMLSelectElement>({} as HTMLSelectElement);
+/**
+ * TODO: remove this when we accept multi select.
+ */
+type IsMulti = false;
 
-    React.useImperativeHandle(ref, () => {
-      return refEl.current;
-    });
+export type SelectProps = ReactSelectProps<SelectOption, IsMulti> &
+  SxProp & {
+    disabled?: boolean;
+    leadingIcon?: IconType;
+    trailingIcon?: IconType;
+  };
 
-    React.useEffect(() => {
-      const parentEl = refEl.current?.parentElement;
+const Control = (props: ControlProps<SelectOption, IsMulti>) => {
+  const isDisabled = props.selectProps.isDisabled;
 
-      if (parentEl) {
-        parentEl.style.position = 'relative';
-      }
-    }, []);
+  const hasError = props.selectProps['aria-invalid'] === 'true';
 
-    return (
-      <SelectUi
-        // https://theme-ui.com/components/select#custom-arrow-icon
-        arrow={
-          <>
-            {leadingIcon && (
-              <Text
-                sx={{
-                  alignSelf: 'center',
-                  pointerEvents: 'none',
-                  lineHeight: 0,
-                  fontSize: 'base',
-                  position: 'absolute',
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  left: ({ space }: any) => {
-                    const leftSpaceValue = space?.['xl'] || '16px';
-
-                    return leftSpaceValue;
-                  },
-                }}
-              >
-                <Icon icon={leadingIcon} />
-              </Text>
-            )}
-
-            <Flex
-              sx={{
-                gap: 'lg',
-                position: 'absolute',
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                right: ({ space }: any) => {
-                  const xlSpace = space?.['xl'] || '16px';
-
-                  return xlSpace;
-                },
-                alignSelf: 'center',
-                pointerEvents: 'none',
-              }}
-            >
-              {(trailingIcon || hasError) && (
-                <Text
-                  className={hasError ? 'error-icon' : ''}
-                  sx={{
-                    alignSelf: 'center',
-                    pointerEvents: 'none',
-                    lineHeight: 0,
-                    fontSize: 'base',
-                  }}
-                >
-                  <Icon
-                    icon={hasError ? 'warning-alt' : (trailingIcon as IconType)}
-                  />
-                </Text>
-              )}
-
-              {arrow ?? (
-                <Text
-                  sx={{
-                    lineHeight: 0,
-                    fontSize: 'base',
-                  }}
-                >
-                  <Icon icon="picker-down" />
-                </Text>
-              )}
-            </Flex>
-          </>
-        }
-        sx={{
-          fontFamily: 'body',
-          width: '100%',
-          paddingY: 'lg',
+  const border = (() => {
+    if (isDisabled) {
+      return 'muted';
+    }
+
+    if (hasError) {
+      return 'danger';
+    }
+
+    return 'interaction';
+  })();
+
+  const backgroundColor = (() => {
+    if (isDisabled) {
+      return 'muted';
+    }
+
+    return 'surface';
+  })();
+
+  return (
+    <Box
+      sx={{
+        '.react-select__control': {
+          border,
+          backgroundColor,
           paddingX: 'xl',
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          paddingLeft: ({ space, fontSizes }: any) => {
-            const xlSpace = space?.['xl'] || '16px';
-            const iconSize = fontSizes?.['base'] || '16px';
-            const lgSpace = space?.['lg'] || '16px';
-
-            if (leadingIcon) {
-              return `calc(${xlSpace} + ${iconSize} +  ${lgSpace})`;
-            }
-
-            return xlSpace;
-          },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          paddingRight: ({ space, fontSizes }: any) => {
-            const xlSpace = space?.['xl'] || '16px';
-            const iconSize = fontSizes?.['base'] || '16px';
-            const lgSpace = space?.['lg'] || '16px';
-
-            if (trailingIcon || hasError) {
-              return `calc(${lgSpace} + ${iconSize} + ${lgSpace} + ${iconSize} + ${xlSpace})`;
-            }
-
-            return `calc(${lgSpace} + ${iconSize} + ${xlSpace})`;
-          },
-          ...sx,
+          paddingY: 'lg',
+          borderRadius: 'action',
+        },
+      }}
+    >
+      <components.Control {...props} />
+    </Box>
+  );
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const DropdownIndicator = (
+  props: DropdownIndicatorProps<SelectOption, IsMulti>
+) => {
+  const isDisabled = props.selectProps.isDisabled;
+
+  const color = (() => {
+    if (isDisabled) {
+      return 'onMuted';
+    }
+
+    return 'text';
+  })();
+
+  return (
+    <Text
+      sx={{
+        fontSize: 'base',
+        color,
+        alignSelf: 'center',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Icon icon="picker-down" />
+    </Text>
+  );
+};
+
+const IndicatorsContainer = ({
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ...props
+}: IndicatorsContainerProps<SelectOption, IsMulti>) => {
+  return (
+    <Box
+      sx={{
+        marginLeft: 'lg',
+        border: 'none',
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+const Placeholder = ({ children }: PlaceholderProps<SelectOption, IsMulti>) => {
+  return (
+    <Text
+      sx={{
+        color: 'onMuted',
+        alignSelf: 'center',
+      }}
+    >
+      {children}
+    </Text>
+  );
+};
+
+const SelectContainer = ({
+  children,
+  ...props
+}: ContainerProps<SelectOption, IsMulti>) => {
+  const { sx, css } = props.selectProps as SelectProps;
+
+  return (
+    <Box sx={sx} css={css}>
+      <components.SelectContainer {...props}>
+        {children}
+      </components.SelectContainer>
+    </Box>
+  );
+};
+
+const ValueContainer = ({
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ...props
+}: ValueContainerProps<SelectOption, IsMulti>) => {
+  const { leadingIcon, trailingIcon } = props.selectProps as SelectProps;
+
+  const hasError = props.selectProps['aria-invalid'] === 'true';
+
+  const trailingIconColor = (() => {
+    if (hasError) {
+      return 'danger';
+    }
+
+    return 'text';
+  })();
+
+  return (
+    <Flex
+      sx={{
+        gap: 'lg',
+        flex: 1,
+      }}
+    >
+      {leadingIcon && (
+        <Text
+          sx={{
+            alignSelf: 'center',
+            pointerEvents: 'none',
+            lineHeight: 0,
+            fontSize: 'base',
+          }}
+        >
+          <Icon icon={leadingIcon} />
+        </Text>
+      )}
+      <Flex
+        sx={{
+          flex: 1,
+          alignItems: 'center',
+        }}
+      >
+        {children}
+      </Flex>
+      {(trailingIcon || hasError) && (
+        <Text
+          className={hasError ? 'error-icon' : ''}
+          sx={{
+            alignSelf: 'center',
+            pointerEvents: 'none',
+            lineHeight: 0,
+            fontSize: 'base',
+            color: trailingIconColor,
+          }}
+        >
+          <Icon icon={hasError ? 'warning-alt' : (trailingIcon as IconType)} />
+        </Text>
+      )}
+    </Flex>
+  );
+};
+
+/**
+ * https://react-select.com/home
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Select = React.forwardRef<any, SelectProps>(
+  ({ ...props }, ref) => {
+    return (
+      <ReactSelect<SelectOption, IsMulti>
+        ref={ref}
+        /**
+         * https://react-select.com/components
+         */
+        components={{
+          Control,
+          DropdownIndicator,
+          IndicatorsContainer,
+          Placeholder,
+          SelectContainer,
+          ValueContainer,
+          ...props.components,
         }}
-        ref={refEl}
+        isDisabled={props.disabled}
         {...props}
+        /**
+         * https://react-select.com/styles#the-classnameprefix-prop
+         */
+        classNamePrefix="react-select"
       />
     );
   }
 );
+
 Select.displayName = 'Select';

package/src/index.ts

@@ -1,4 +1,10 @@
-export { BaseStyles, type Theme, Global, type SxProp } from 'theme-ui';
+export {
+  BaseStyles,
+  type Theme,
+  Global,
+  type SxProp,
+  type ThemeUIStyleObject,
+} from 'theme-ui';
 export { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media';
 export { keyframes, type Keyframes } from '@emotion/react';
 
@@ -23,7 +29,12 @@ export {
   type LinearProgressProps,
 } from './components/LinearProgress';
 export { Text, type TextProps } from './components/Text';
-export { Select, type SelectProps } from './components/Select';
+export {
+  Select,
+  type SelectProps,
+  type SelectOptions,
+  type SelectOption,
+} from './components/Select';
 export { Spinner, type SpinnerProps } from './components/Spinner';
 export { Radio, type RadioProps } from './components/Radio';
 export { IconButton, type IconButtonProps } from './components/IconButton';