@ttoss/ui 1.31.11 → 1.31.13

package/dist/esm/index.js

@@ -129,50 +129,54 @@ import { Heading } from "theme-ui";
 import { Image } from "theme-ui";
 
 // src/components/Input.tsx
-import React4 from "react";
 import { Input as InputUI } from "theme-ui";
+import React4 from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var Input = /*#__PURE__*/React4.forwardRef(({
   leadingIcon,
   trailingIcon,
+  className,
   sx,
   ...inputProps
 }, ref) => {
   return /* @__PURE__ */jsxs4(Flex, {
+    className,
     sx: {
+      ...sx,
       position: "relative",
-      width: "100%",
-      ...sx
+      padding: 0,
+      border: "none"
     },
     children: [leadingIcon && /* @__PURE__ */jsx5(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
-        fontSize: "base",
-        left: "1rem",
-        lineHeight: 0
+        left: "1rem"
       },
       variant: "leading-icon",
       children: /* @__PURE__ */jsx5(Icon, {
+        inline: true,
         icon: leadingIcon
       })
     }), /* @__PURE__ */jsx5(InputUI, {
       ref,
       sx: {
+        ...sx,
         paddingLeft: leadingIcon ? "3xl" : void 0,
-        paddingRight: trailingIcon ? "3xl" : void 0
+        paddingRight: trailingIcon ? "3xl" : void 0,
+        margin: 0
       },
+      className,
       ...inputProps
     }), trailingIcon && /* @__PURE__ */jsx5(Text, {
       sx: {
         position: "absolute",
         right: "1rem",
-        alignSelf: "center",
-        fontSize: "base",
-        lineHeight: 0
+        alignSelf: "center"
       },
       variant: "trailing-icon",
       children: /* @__PURE__ */jsx5(Icon, {
+        inline: true,
         icon: trailingIcon
       })
     })]
@@ -193,7 +197,51 @@ import { Progress } from "theme-ui";
 import { Text } from "theme-ui";
 
 // src/components/Select.tsx
-import { Select } from "theme-ui";
+import { Select as SelectUi } from "theme-ui";
+import React5 from "react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var Select = /*#__PURE__*/React5.forwardRef(({
+  arrow,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */jsx6(SelectUi, {
+    arrow: /* @__PURE__ */jsxs5(Fragment2, {
+      children: [arrow ?? /* @__PURE__ */jsx6(Text, {
+        sx: {
+          marginLeft: ({
+            space
+          }) => {
+            return space?.["2xl"] ? "-2xl" : "-28px";
+          },
+          alignSelf: "center",
+          pointerEvents: "none",
+          lineHeight: 0
+        },
+        children: /* @__PURE__ */jsx6(Icon, {
+          icon: "picker-down"
+        })
+      }), props["aria-invalid"] === "true" && /* @__PURE__ */jsx6(Text, {
+        className: "error-icon",
+        sx: {
+          marginLeft: ({
+            space
+          }) => {
+            return space?.["2xl"] ? `calc(-${space["2xl"]} - 10px)` : "-44px";
+          },
+          alignSelf: "center",
+          pointerEvents: "none",
+          lineHeight: 0
+        },
+        children: /* @__PURE__ */jsx6(Icon, {
+          icon: "error"
+        })
+      })]
+    }),
+    ref,
+    ...props
+  });
+});
+Select.displayName = "Select";
 
 // src/components/Spinner.tsx
 import { Spinner } from "theme-ui";
@@ -211,12 +259,12 @@ import { Slider } from "theme-ui";
 import { Checkbox } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
-import * as React5 from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import * as React6 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React5.useState(0);
-  React5.useEffect(() => {
+  const [progress, setProgress] = React6.useState(0);
+  React6.useEffect(() => {
     const timer = setInterval(() => {
       setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
@@ -237,7 +285,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */jsx6(Progress, {
+  return /* @__PURE__ */jsx7(Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -251,14 +299,14 @@ import { Textarea } from "theme-ui";
 import { Container } from "theme-ui";
 
 // src/components/HelpText.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var HelpText = ({
   disabled,
   negative,
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */jsx7(Text, {
+  return /* @__PURE__ */jsx8(Text, {
     variant,
     "aria-disabled": disabled ? "true" : void 0,
     ...props

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, TextProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButton, IconButtonProps, Image, ImageProps, Label, LabelProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Textarea, TextareaProps, Theme } from 'theme-ui';
+import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, SelectProps as SelectProps$1, TextProps } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButton, IconButtonProps, Image, ImageProps, Label, LabelProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Textarea, TextareaProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 import * as React from 'react';
 import React__default from 'react';
@@ -40,6 +40,9 @@ type InputProps = InputProps$1 & {
 };
 declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
+type SelectProps = SelectProps$1;
+declare const Select: React__default.ForwardRefExoticComponent<Omit<SelectProps$1, "ref"> & React__default.RefAttributes<HTMLSelectElement>>;
+
 declare const InfiniteLinearProgress: () => JSX.Element;
 
 type HelpTextProps = Omit<TextProps, 'variant'> & {
@@ -48,4 +51,4 @@ type HelpTextProps = Omit<TextProps, 'variant'> & {
 };
 declare const HelpText: ({ disabled, negative, ...props }: HelpTextProps) => JSX.Element;
 
-export { Badge, BadgeProps, Button, ButtonProps, HelpText, HelpTextProps, Icon, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { Badge, BadgeProps, Button, ButtonProps, HelpText, HelpTextProps, Icon, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, Select, SelectProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -59,7 +59,7 @@ __export(src_exports, {
   LinearProgress: () => import_theme_ui15.Progress,
   Link: () => import_theme_ui14.Link,
   Radio: () => import_theme_ui19.Radio,
-  Select: () => import_theme_ui17.Select,
+  Select: () => Select,
   Slider: () => import_theme_ui21.Slider,
   Spinner: () => import_theme_ui18.Spinner,
   Text: () => import_theme_ui16.Text,
@@ -198,50 +198,54 @@ var import_theme_ui10 = require("theme-ui");
 var import_theme_ui11 = require("theme-ui");
 
 // src/components/Input.tsx
-var import_react3 = __toESM(require("react"));
 var import_theme_ui12 = require("theme-ui");
+var import_react3 = __toESM(require("react"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Input = import_react3.default.forwardRef(({
   leadingIcon,
   trailingIcon,
+  className,
   sx,
   ...inputProps
 }, ref) => {
   return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_theme_ui8.Flex, {
+    className,
     sx: {
+      ...sx,
       position: "relative",
-      width: "100%",
-      ...sx
+      padding: 0,
+      border: "none"
     },
     children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
-        fontSize: "base",
-        left: "1rem",
-        lineHeight: 0
+        left: "1rem"
       },
       variant: "leading-icon",
       children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(Icon, {
+        inline: true,
         icon: leadingIcon
       })
     }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui12.Input, {
       ref,
       sx: {
+        ...sx,
         paddingLeft: leadingIcon ? "3xl" : void 0,
-        paddingRight: trailingIcon ? "3xl" : void 0
+        paddingRight: trailingIcon ? "3xl" : void 0,
+        margin: 0
       },
+      className,
       ...inputProps
     }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         right: "1rem",
-        alignSelf: "center",
-        fontSize: "base",
-        lineHeight: 0
+        alignSelf: "center"
       },
       variant: "trailing-icon",
       children: /* @__PURE__ */(0, import_jsx_runtime5.jsx)(Icon, {
+        inline: true,
         icon: trailingIcon
       })
     })]
@@ -263,6 +267,50 @@ var import_theme_ui16 = require("theme-ui");
 
 // src/components/Select.tsx
 var import_theme_ui17 = require("theme-ui");
+var import_react4 = __toESM(require("react"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Select = import_react4.default.forwardRef(({
+  arrow,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui17.Select, {
+    arrow: /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, {
+      children: [arrow ?? /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui16.Text, {
+        sx: {
+          marginLeft: ({
+            space
+          }) => {
+            return space?.["2xl"] ? "-2xl" : "-28px";
+          },
+          alignSelf: "center",
+          pointerEvents: "none",
+          lineHeight: 0
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime6.jsx)(Icon, {
+          icon: "picker-down"
+        })
+      }), props["aria-invalid"] === "true" && /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui16.Text, {
+        className: "error-icon",
+        sx: {
+          marginLeft: ({
+            space
+          }) => {
+            return space?.["2xl"] ? `calc(-${space["2xl"]} - 10px)` : "-44px";
+          },
+          alignSelf: "center",
+          pointerEvents: "none",
+          lineHeight: 0
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime6.jsx)(Icon, {
+          icon: "error"
+        })
+      })]
+    }),
+    ref,
+    ...props
+  });
+});
+Select.displayName = "Select";
 
 // src/components/Spinner.tsx
 var import_theme_ui18 = require("theme-ui");
@@ -280,12 +328,12 @@ var import_theme_ui21 = require("theme-ui");
 var import_theme_ui22 = require("theme-ui");
 
 // src/components/InfiniteLinearProgress.tsx
-var React5 = __toESM(require("react"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var React6 = __toESM(require("react"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React5.useState(0);
-  React5.useEffect(() => {
+  const [progress, setProgress] = React6.useState(0);
+  React6.useEffect(() => {
     const timer = setInterval(() => {
       setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
@@ -306,7 +354,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui15.Progress, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui15.Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -320,14 +368,14 @@ var import_theme_ui23 = require("theme-ui");
 var import_theme_ui24 = require("theme-ui");
 
 // src/components/HelpText.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var HelpText = ({
   disabled,
   negative,
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui16.Text, {
     variant,
     "aria-disabled": disabled ? "true" : void 0,
     ...props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.31.11",
+  "version": "1.31.13",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -24,7 +24,7 @@
     "@emotion/react": "^11.10.6",
     "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.15.5",
-    "@ttoss/theme": "^1.4.10",
+    "@ttoss/theme": "^1.4.12",
     "theme-ui": "^0.15.5"
   },
   "peerDependencies": {
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@ttoss/config": "^1.29.3",
-    "@ttoss/test-utils": "^1.21.1",
+    "@ttoss/test-utils": "^1.21.2",
     "@types/jest": "^29.5.0",
     "jest": "^29.5.0",
     "react": "^18.2.0",
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "39abc27c77c2587edc8d877ccb121783611791a4"
+  "gitHead": "2fda7636a4a10c1085a17df991fb3fc0ac28f816"
 }

package/src/components/Input.tsx

@@ -1,7 +1,6 @@
 import { Flex, Icon, type IconType, Text } from '..';
-import React from 'react';
-
 import { type InputProps as InputPropsUI, Input as InputUI } from 'theme-ui';
+import React from 'react';
 
 export type InputProps = InputPropsUI & {
   leadingIcon?: IconType;
@@ -9,29 +8,33 @@ export type InputProps = InputPropsUI & {
 };
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ leadingIcon, trailingIcon, sx, ...inputProps }, ref) => {
+  ({ leadingIcon, trailingIcon, className, sx, ...inputProps }, ref) => {
     return (
-      <Flex sx={{ position: 'relative', width: '100%', ...sx }}>
+      <Flex
+        className={className}
+        sx={{ ...sx, position: 'relative', padding: 0, border: 'none' }}
+      >
         {leadingIcon && (
           <Text
             sx={{
               position: 'absolute',
               alignSelf: 'center',
-              fontSize: 'base',
               left: '1rem',
-              lineHeight: 0,
             }}
             variant="leading-icon"
           >
-            <Icon icon={leadingIcon} />
+            <Icon inline icon={leadingIcon} />
           </Text>
         )}
         <InputUI
           ref={ref}
           sx={{
+            ...sx,
             paddingLeft: leadingIcon ? '3xl' : undefined,
             paddingRight: trailingIcon ? '3xl' : undefined,
+            margin: 0,
           }}
+          className={className}
           {...inputProps}
         />
 
@@ -41,12 +44,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               position: 'absolute',
               right: '1rem',
               alignSelf: 'center',
-              fontSize: 'base',
-              lineHeight: 0,
             }}
             variant="trailing-icon"
           >
-            <Icon icon={trailingIcon} />
+            <Icon inline icon={trailingIcon} />
           </Text>
         )}
       </Flex>

package/src/components/Select.tsx

@@ -1 +1,57 @@
-export { Select, type SelectProps } from 'theme-ui';
+import { Icon, Text } from '..';
+import {
+  type SelectProps as SelectPropsUi,
+  Select as SelectUi,
+} from 'theme-ui';
+import React from 'react';
+
+export type SelectProps = SelectPropsUi;
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ arrow, ...props }, ref) => {
+    return (
+      <SelectUi
+        // https://theme-ui.com/components/select#custom-arrow-icon
+        arrow={
+          <>
+            {arrow ?? (
+              <Text
+                sx={{
+                  marginLeft: ({ space }: any) => {
+                    return space?.['2xl'] ? '-2xl' : '-28px';
+                  },
+                  alignSelf: 'center',
+                  pointerEvents: 'none',
+                  lineHeight: 0,
+                }}
+              >
+                <Icon icon="picker-down" />
+              </Text>
+            )}
+
+            {props['aria-invalid'] === 'true' && (
+              <Text
+                className="error-icon"
+                sx={{
+                  marginLeft: ({ space }: any) => {
+                    return space?.['2xl']
+                      ? `calc(-${space['2xl']} - 10px)`
+                      : '-44px';
+                  },
+                  alignSelf: 'center',
+                  pointerEvents: 'none',
+                  lineHeight: 0,
+                }}
+              >
+                <Icon icon="error" />
+              </Text>
+            )}
+          </>
+        }
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Select.displayName = 'Select';