@ttoss/ui 3.1.2 → 3.1.4

package/dist/esm/index.js

@@ -261,43 +261,75 @@ import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-run
 var Select = /*#__PURE__*/React4.forwardRef(({
   arrow,
   sx,
+  leadingIcon,
+  trailingIcon,
   ...props
 }, ref) => {
+  const hasError = props["aria-invalid"] === "true";
+  const refEl = React4.useRef({});
+  React4.useImperativeHandle(ref, () => {
+    return refEl.current;
+  });
+  React4.useEffect(() => {
+    const parentEl = refEl.current?.parentElement;
+    if (parentEl) {
+      parentEl.style.position = "relative";
+    }
+  }, []);
   return /* @__PURE__ */jsx7(SelectUi, {
     arrow: /* @__PURE__ */jsxs6(Fragment2, {
-      children: [arrow ?? /* @__PURE__ */jsx7(Text, {
+      children: [leadingIcon && /* @__PURE__ */jsx7(Text, {
         sx: {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          marginLeft: ({
-            space
-          }) => {
-            return space?.["2xl"] ? "-2xl" : "-28px";
-          },
           alignSelf: "center",
           pointerEvents: "none",
           lineHeight: 0,
-          fontSize: "base"
+          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: "picker-down"
+          icon: leadingIcon
         })
-      }), props["aria-invalid"] === "true" && /* @__PURE__ */jsx7(Text, {
-        className: "error-icon",
+      }), /* @__PURE__ */jsxs6(Flex, {
         sx: {
+          gap: "lg",
+          position: "absolute",
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          marginLeft: ({
+          right: ({
             space
           }) => {
-            return space?.["2xl"] ? `calc(-${space["2xl"]} - 10px)` : "-44px";
+            const xlSpace = space?.["xl"] || "16px";
+            return xlSpace;
           },
           alignSelf: "center",
-          pointerEvents: "none",
-          lineHeight: 0,
-          fontSize: "base"
+          pointerEvents: "none"
         },
-        children: /* @__PURE__ */jsx7(Icon5, {
-          icon: "warning-alt"
-        })
+        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"
+          })
+        })]
       })]
     }),
     sx: {
@@ -305,9 +337,35 @@ var Select = /*#__PURE__*/React4.forwardRef(({
       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;
+      },
+      // 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})`;
+      },
       ...sx
     },
-    ref,
+    ref: refEl,
     ...props
   });
 });

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 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, 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, SelectProps, 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, 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';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 export { Keyframes, keyframes } from '@emotion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -50,6 +50,10 @@ type LinkProps = LinkProps$1 & {
 };
 declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
+type SelectProps = SelectProps$1 & {
+    leadingIcon?: IconType;
+    trailingIcon?: IconType;
+};
 declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -100,4 +104,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, 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, SelectProps, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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, 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, SelectProps, 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, 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';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 export { Keyframes, keyframes } from '@emotion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -50,6 +50,10 @@ type LinkProps = LinkProps$1 & {
 };
 declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
+type SelectProps = SelectProps$1 & {
+    leadingIcon?: IconType;
+    trailingIcon?: IconType;
+};
 declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -100,4 +104,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, 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, SelectProps, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -337,43 +337,75 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 var Select = React4.forwardRef(({
   arrow,
   sx,
+  leadingIcon,
+  trailingIcon,
   ...props
 }, ref) => {
+  const hasError = props["aria-invalid"] === "true";
+  const refEl = React4.useRef({});
+  React4.useImperativeHandle(ref, () => {
+    return refEl.current;
+  });
+  React4.useEffect(() => {
+    const parentEl = refEl.current?.parentElement;
+    if (parentEl) {
+      parentEl.style.position = "relative";
+    }
+  }, []);
   return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui17.Select, {
     arrow: /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, {
-      children: [arrow ?? /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+      children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
         sx: {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          marginLeft: ({
-            space
-          }) => {
-            return space?.["2xl"] ? "-2xl" : "-28px";
-          },
           alignSelf: "center",
           pointerEvents: "none",
           lineHeight: 0,
-          fontSize: "base"
+          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: "picker-down"
+          icon: leadingIcon
         })
-      }), props["aria-invalid"] === "true" && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
-        className: "error-icon",
+      }), /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_theme_ui8.Flex, {
         sx: {
+          gap: "lg",
+          position: "absolute",
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          marginLeft: ({
+          right: ({
             space
           }) => {
-            return space?.["2xl"] ? `calc(-${space["2xl"]} - 10px)` : "-44px";
+            const xlSpace = space?.["xl"] || "16px";
+            return xlSpace;
           },
           alignSelf: "center",
-          pointerEvents: "none",
-          lineHeight: 0,
-          fontSize: "base"
+          pointerEvents: "none"
         },
-        children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
-          icon: "warning-alt"
-        })
+        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"
+          })
+        })]
       })]
     }),
     sx: {
@@ -381,9 +413,35 @@ var Select = React4.forwardRef(({
       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;
+      },
+      // 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})`;
+      },
       ...sx
     },
-    ref,
+    ref: refEl,
     ...props
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -22,7 +22,7 @@
   "dependencies": {
     "@theme-ui/match-media": "^0.16.0",
     "theme-ui": "^0.16.0",
-    "@ttoss/theme": "^1.6.2"
+    "@ttoss/theme": "^1.6.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11",

package/src/components/Select.tsx

@@ -1,53 +1,100 @@
 import * as React from 'react';
-import { Icon } from '@ttoss/react-icons';
-import { type SelectProps, Select as SelectUi } from 'theme-ui';
-import { Text } from '..';
+import { Flex, Text } from '..';
+import { Icon, IconType } from '@ttoss/react-icons';
+import {
+  type SelectProps as SelectPropsUi,
+  Select as SelectUi,
+} from 'theme-ui';
 
-export { SelectProps };
+export type SelectProps = SelectPropsUi & {
+  leadingIcon?: IconType;
+  trailingIcon?: IconType;
+};
 
 export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({ arrow, sx, ...props }, ref) => {
+  ({ arrow, sx, leadingIcon, trailingIcon, ...props }, ref) => {
+    const hasError = props['aria-invalid'] === 'true';
+
+    const refEl = React.useRef<HTMLSelectElement>({} as HTMLSelectElement);
+
+    React.useImperativeHandle(ref, () => {
+      return refEl.current;
+    });
+
+    React.useEffect(() => {
+      const parentEl = refEl.current?.parentElement;
+
+      if (parentEl) {
+        parentEl.style.position = 'relative';
+      }
+    }, []);
+
     return (
       <SelectUi
         // https://theme-ui.com/components/select#custom-arrow-icon
         arrow={
           <>
-            {arrow ?? (
+            {leadingIcon && (
               <Text
                 sx={{
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  marginLeft: ({ space }: any) => {
-                    return space?.['2xl'] ? '-2xl' : '-28px';
-                  },
                   alignSelf: 'center',
                   pointerEvents: 'none',
                   lineHeight: 0,
                   fontSize: 'base',
-                }}
-              >
-                <Icon icon="picker-down" />
-              </Text>
-            )}
-
-            {props['aria-invalid'] === 'true' && (
-              <Text
-                className="error-icon"
-                sx={{
+                  position: 'absolute',
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  marginLeft: ({ space }: any) => {
-                    return space?.['2xl']
-                      ? `calc(-${space['2xl']} - 10px)`
-                      : '-44px';
+                  left: ({ space }: any) => {
+                    const leftSpaceValue = space?.['xl'] || '16px';
+
+                    return leftSpaceValue;
                   },
-                  alignSelf: 'center',
-                  pointerEvents: 'none',
-                  lineHeight: 0,
-                  fontSize: 'base',
                 }}
               >
-                <Icon icon="warning-alt" />
+                <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={{
@@ -55,9 +102,33 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
           width: '100%',
           paddingY: 'lg',
           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,
         }}
-        ref={ref}
+        ref={refEl}
         {...props}
       />
     );