@ttoss/ui 1.30.5 → 1.30.7

package/dist/esm/index.js

@@ -2568,27 +2568,9 @@ import { Image } from "theme-ui";
 init_tsup_inject();
 import React5 from "react";
 import { Input as InputUI } from "theme-ui";
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var renderIcon2 = (icon) => {
-  if (typeof icon === "string" || typeof icon === "object" && !!icon?.body) {
-    return /* @__PURE__ */ jsx4(Icon2, { icon });
-  }
-  return /* @__PURE__ */ jsx4(Fragment3, { children: icon });
-};
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var Input = React5.forwardRef(
   ({ leadingIcon, trailingIcon, sx, ...inputProps }, ref) => {
-    const leadingIconElement = React5.useMemo(() => {
-      if (!leadingIcon) {
-        return null;
-      }
-      return renderIcon2(leadingIcon);
-    }, [leadingIcon]);
-    const trailingIconElement = React5.useMemo(() => {
-      if (!trailingIcon) {
-        return null;
-      }
-      return renderIcon2(trailingIcon);
-    }, [trailingIcon]);
     return /* @__PURE__ */ jsxs3(Flex, { sx: { position: "relative" }, children: [
       leadingIcon && /* @__PURE__ */ jsx4(
         Text,
@@ -2597,11 +2579,11 @@ var Input = React5.forwardRef(
             position: "absolute",
             alignSelf: "center",
             fontSize: "lg",
-            left: "lg",
+            left: "1rem",
             lineHeight: 0
           },
           variant: "leading-icon",
-          children: leadingIconElement
+          children: /* @__PURE__ */ jsx4(Icon2, { icon: leadingIcon })
         }
       ),
       /* @__PURE__ */ jsx4(
@@ -2621,13 +2603,13 @@ var Input = React5.forwardRef(
         {
           sx: {
             position: "absolute",
-            right: "lg",
+            right: "1rem",
             alignSelf: "center",
             fontSize: "lg",
             lineHeight: 0
           },
           variant: "trailing-icon",
-          children: trailingIconElement
+          children: /* @__PURE__ */ jsx4(Icon2, { icon: trailingIcon })
         }
       )
     ] });

package/dist/index.d.ts

@@ -4,8 +4,8 @@ export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Co
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 import * as React from 'react';
 import React__default from 'react';
-import { IconifyIcon } from '@iconify/types';
 import { IconifyIconProps, IconifyIconHTMLElement } from '@iconify-icon/react';
+import { IconifyIcon } from '@iconify/types';
 
 type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -25,16 +25,16 @@ type ButtonProps = ButtonProps$1 & {
 };
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type IconType = string | React__default.ReactNode | IconifyIcon;
 type InputProps = InputProps$1 & {
     leadingIcon?: IconType;
     trailingIcon?: IconType;
 };
 declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
+type IconType = string | IconifyIcon;
 type IconProps = Omit<IconifyIconProps, 'ref'>;
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconifyIconHTMLElement | null>>;
 
 declare const InfiniteLinearProgress: () => JSX.Element;
 
-export { Button, ButtonProps, Icon, IconProps, InfiniteLinearProgress, Input, InputProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { Button, ButtonProps, Icon, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -2605,26 +2605,8 @@ init_tsup_inject();
 var import_react4 = __toESM(require("react"));
 var import_theme_ui11 = require("theme-ui");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var renderIcon2 = (icon) => {
-  if (typeof icon === "string" || typeof icon === "object" && !!icon?.body) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2, { icon });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: icon });
-};
 var Input = import_react4.default.forwardRef(
   ({ leadingIcon, trailingIcon, sx, ...inputProps }, ref) => {
-    const leadingIconElement = import_react4.default.useMemo(() => {
-      if (!leadingIcon) {
-        return null;
-      }
-      return renderIcon2(leadingIcon);
-    }, [leadingIcon]);
-    const trailingIconElement = import_react4.default.useMemo(() => {
-      if (!trailingIcon) {
-        return null;
-      }
-      return renderIcon2(trailingIcon);
-    }, [trailingIcon]);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_theme_ui7.Flex, { sx: { position: "relative" }, children: [
       leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_theme_ui15.Text,
@@ -2633,11 +2615,11 @@ var Input = import_react4.default.forwardRef(
             position: "absolute",
             alignSelf: "center",
             fontSize: "lg",
-            left: "lg",
+            left: "1rem",
             lineHeight: 0
           },
           variant: "leading-icon",
-          children: leadingIconElement
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2, { icon: leadingIcon })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -2657,13 +2639,13 @@ var Input = import_react4.default.forwardRef(
         {
           sx: {
             position: "absolute",
-            right: "lg",
+            right: "1rem",
             alignSelf: "center",
             fontSize: "lg",
             lineHeight: 0
           },
           variant: "trailing-icon",
-          children: trailingIconElement
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2, { icon: trailingIcon })
         }
       )
     ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.30.5",
+  "version": "1.30.7",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -30,11 +30,11 @@
   },
   "devDependencies": {
     "@iconify-icon/react": "^1.0.5",
-    "@ttoss/config": "^1.28.2",
-    "@ttoss/test-utils": "^1.20.4",
-    "@ttoss/theme": "^1.2.5",
+    "@ttoss/config": "^1.28.3",
+    "@ttoss/test-utils": "^1.20.5",
+    "@ttoss/theme": "^1.2.6",
     "@types/jest": "^29.4.0",
-    "jest": "^29.4.3",
+    "jest": "^29.5.0",
     "tsup": "^6.6.3"
   },
   "keywords": [
@@ -45,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9a1d05dc6546c74a3f83835e4dcef00bc7040b6b"
+  "gitHead": "56e8cfde36a962deaa5514453618280699824b4f"
 }

package/src/components/Icon.tsx

@@ -4,6 +4,9 @@ import {
   IconifyIconHTMLElement,
   IconifyIconProps,
 } from '@iconify-icon/react';
+import type { IconifyIcon as IconifyIconType } from '@iconify/types';
+
+export type IconType = string | IconifyIconType;
 
 export type IconProps = Omit<IconifyIconProps, 'ref'>;
 

package/src/components/Input.tsx

@@ -1,45 +1,15 @@
-import { Flex, Icon, Text } from '..';
+import { Flex, Icon, type IconType, Text } from '..';
 import React from 'react';
-import type { IconifyIcon } from '@iconify/types';
 
 import { type InputProps as InputPropsUI, Input as InputUI } from 'theme-ui';
 
-type IconType = string | React.ReactNode | IconifyIcon;
-
 export type InputProps = InputPropsUI & {
   leadingIcon?: IconType;
   trailingIcon?: IconType;
 };
 
-const renderIcon = (icon: IconType) => {
-  if (
-    typeof icon === 'string' ||
-    (typeof icon === 'object' && !!(icon as IconifyIcon)?.body)
-  ) {
-    return <Icon icon={icon as string | IconifyIcon} />;
-  }
-
-  return <>{icon}</>;
-};
-
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ leadingIcon, trailingIcon, sx, ...inputProps }, ref) => {
-    const leadingIconElement = React.useMemo(() => {
-      if (!leadingIcon) {
-        return null;
-      }
-
-      return renderIcon(leadingIcon);
-    }, [leadingIcon]);
-
-    const trailingIconElement = React.useMemo(() => {
-      if (!trailingIcon) {
-        return null;
-      }
-
-      return renderIcon(trailingIcon);
-    }, [trailingIcon]);
-
     return (
       <Flex sx={{ position: 'relative' }}>
         {leadingIcon && (
@@ -48,12 +18,12 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               position: 'absolute',
               alignSelf: 'center',
               fontSize: 'lg',
-              left: 'lg',
+              left: '1rem',
               lineHeight: 0,
             }}
             variant="leading-icon"
           >
-            {leadingIconElement}
+            <Icon icon={leadingIcon} />
           </Text>
         )}
         <InputUI
@@ -70,14 +40,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           <Text
             sx={{
               position: 'absolute',
-              right: 'lg',
+              right: '1rem',
               alignSelf: 'center',
               fontSize: 'lg',
               lineHeight: 0,
             }}
             variant="trailing-icon"
           >
-            {trailingIconElement}
+            <Icon icon={trailingIcon} />
           </Text>
         )}
       </Flex>

package/src/index.ts

@@ -24,7 +24,7 @@ export { Text, type TextProps } from './components/Text';
 export { Select, type SelectProps } from './components/Select';
 export { Spinner, type SpinnerProps } from './components/Spinner';
 export { Radio, type RadioProps } from './components/Radio';
-export { Icon, type IconProps } from './components/Icon';
+export { Icon, type IconProps, type IconType } from './components/Icon';
 export { Slider, type SliderProps } from './components/Slider';
 export { Checkbox, type CheckboxProps } from './components/Checkbox';
 export { InfiniteLinearProgress } from './components/InfiniteLinearProgress';