@ttoss/ui 1.30.3 → 1.30.5

package/dist/esm/index.js

@@ -491,13 +491,14 @@ import { Box } from "theme-ui";
 
 // src/components/Button.tsx
 init_tsup_inject();
-import * as React3 from "react";
+import * as React4 from "react";
 import {
   Button as ButtonUi
 } from "theme-ui";
 
 // src/components/Icon.tsx
 init_tsup_inject();
+import * as React3 from "react";
 
 // ../../node_modules/@iconify-icon/react/dist/iconify.mjs
 init_tsup_inject();
@@ -2492,9 +2493,12 @@ var Icon = React2.forwardRef(
 
 // src/components/Icon.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var Icon2 = (props) => {
-  return /* @__PURE__ */ jsx2(Icon, { ...props });
-};
+var Icon2 = React3.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx2(Icon, { ref, "data-testid": "iconify-icon", ...props });
+  }
+);
+Icon2.displayName = "Icon";
 
 // src/components/Button.tsx
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -2507,8 +2511,8 @@ var RenderIcon = ({ icon }) => {
   }
   return /* @__PURE__ */ jsx3(Fragment2, { children: icon });
 };
-var MemoizedRenderIcon = React3.memo(RenderIcon);
-var Button = React3.forwardRef(
+var MemoizedRenderIcon = React4.memo(RenderIcon);
+var Button = React4.forwardRef(
   (props, ref) => {
     const { children, leftIcon, rightIcon, ...restProps } = props;
     return /* @__PURE__ */ jsxs2(
@@ -2562,7 +2566,74 @@ import { Image } from "theme-ui";
 
 // src/components/Input.tsx
 init_tsup_inject();
-import { Input } from "theme-ui";
+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 });
+};
+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,
+        {
+          sx: {
+            position: "absolute",
+            alignSelf: "center",
+            fontSize: "lg",
+            left: "lg",
+            lineHeight: 0
+          },
+          variant: "leading-icon",
+          children: leadingIconElement
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        InputUI,
+        {
+          ref,
+          sx: {
+            paddingLeft: leadingIcon ? "3xl" : void 0,
+            paddingRight: trailingIcon ? "3xl" : void 0,
+            ...sx
+          },
+          ...inputProps
+        }
+      ),
+      trailingIcon && /* @__PURE__ */ jsx4(
+        Text,
+        {
+          sx: {
+            position: "absolute",
+            right: "lg",
+            alignSelf: "center",
+            fontSize: "lg",
+            lineHeight: 0
+          },
+          variant: "trailing-icon",
+          children: trailingIconElement
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
 
 // src/components/Label.tsx
 init_tsup_inject();
@@ -2604,12 +2675,12 @@ import { Checkbox } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
 init_tsup_inject();
-import * as React4 from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import * as React6 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React4.useState(0);
-  React4.useEffect(() => {
+  const [progress, setProgress] = React6.useState(0);
+  React6.useEffect(() => {
     const timer = setInterval(() => {
       setProgress((oldProgress) => {
         if (oldProgress === MAX_PROGRESS) {
@@ -2630,7 +2701,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */ jsx4(Progress, { max: MAX_PROGRESS, value: progress, role: "progressbar" });
+  return /* @__PURE__ */ jsx5(Progress, { max: MAX_PROGRESS, value: progress, role: "progressbar" });
 };
 
 // src/components/Textarea.tsx

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 import * as theme_ui from 'theme-ui';
-import { Theme, ButtonProps as ButtonProps$1 } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Input, InputProps, 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, ButtonProps as ButtonProps$1, InputProps as InputProps$1 } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, 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';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 import * as React from 'react';
-import { IconifyIconProps } from '@iconify-icon/react';
+import React__default from 'react';
+import { IconifyIcon } from '@iconify/types';
+import { IconifyIconProps, IconifyIconHTMLElement } from '@iconify-icon/react';
 
 type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -23,9 +25,16 @@ type ButtonProps = ButtonProps$1 & {
 };
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-type IconProps = Pick<IconifyIconProps, 'preserveAspectRatio' | 'rotate' | 'cite' | 'data' | 'form' | 'label' | 'slot' | 'span' | 'style' | 'summary' | 'title' | 'pattern' | 'accept' | 'acceptCharset' | 'action' | 'allowFullScreen' | 'allowTransparency' | 'alt' | 'as' | 'async' | 'autoComplete' | 'autoFocus' | 'autoPlay' | 'capture' | 'cellPadding' | 'cellSpacing' | 'charSet' | 'challenge' | 'checked' | 'classID' | 'cols' | 'colSpan' | 'content' | 'controls' | 'coords' | 'crossOrigin' | 'dateTime' | 'default' | 'defer' | 'disabled' | 'download' | 'encType' | 'formAction' | 'formEncType' | 'formMethod' | 'formNoValidate' | 'formTarget' | 'frameBorder' | 'headers' | 'height' | 'high' | 'href' | 'hrefLang' | 'htmlFor' | 'httpEquiv' | 'integrity' | 'keyParams' | 'keyType' | 'kind' | 'list' | 'loop' | 'low' | 'manifest' | 'marginHeight' | 'marginWidth' | 'max' | 'maxLength' | 'media' | 'mediaGroup' | 'method' | 'min' | 'minLength' | 'multiple' | 'muted' | 'name' | 'noValidate' | 'open' | 'optimum' | 'placeholder' | 'playsInline' | 'poster' | 'preload' | 'readOnly' | 'rel' | 'required' | 'reversed' | 'rows' | 'rowSpan' | 'sandbox' | 'scope' | 'scoped' | 'scrolling' | 'seamless' | 'selected' | 'shape' | 'size' | 'sizes' | 'src' | 'srcDoc' | 'srcLang' | 'srcSet' | 'start' | 'step' | 'target' | 'type' | 'useMap' | 'value' | 'width' | 'wmode' | 'wrap' | 'defaultChecked' | 'defaultValue' | 'suppressContentEditableWarning' | 'suppressHydrationWarning' | 'accessKey' | 'className' | 'contentEditable' | 'contextMenu' | 'dir' | 'draggable' | 'hidden' | 'id' | 'lang' | 'nonce' | 'spellCheck' | 'tabIndex' | 'translate' | 'radioGroup' | 'role' | 'about' | 'datatype' | 'inlist' | 'prefix' | 'property' | 'resource' | 'typeof' | 'vocab' | 'autoCapitalize' | 'autoCorrect' | 'autoSave' | 'color' | 'itemProp' | 'itemScope' | 'itemType' | 'itemID' | 'itemRef' | 'results' | 'security' | 'unselectable' | 'inputMode' | 'is' | 'aria-activedescendant' | 'aria-atomic' | 'aria-autocomplete' | 'aria-busy' | 'aria-checked' | 'aria-colcount' | 'aria-colindex' | 'aria-colspan' | 'aria-controls' | 'aria-current' | 'aria-describedby' | 'aria-details' | 'aria-disabled' | 'aria-dropeffect' | 'aria-errormessage' | 'aria-expanded' | 'aria-flowto' | 'aria-grabbed' | 'aria-haspopup' | 'aria-hidden' | 'aria-invalid' | 'aria-keyshortcuts' | 'aria-label' | 'aria-labelledby' | 'aria-level' | 'aria-live' | 'aria-modal' | 'aria-multiline' | 'aria-multiselectable' | 'aria-orientation' | 'aria-owns' | 'aria-placeholder' | 'aria-posinset' | 'aria-pressed' | 'aria-readonly' | 'aria-relevant' | 'aria-required' | 'aria-roledescription' | 'aria-rowcount' | 'aria-rowindex' | 'aria-rowspan' | 'aria-selected' | 'aria-setsize' | 'aria-sort' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'aria-valuetext' | 'children' | 'dangerouslySetInnerHTML' | 'onCopy' | 'onCopyCapture' | 'onCut' | 'onCutCapture' | 'onPaste' | 'onPasteCapture' | 'onCompositionEnd' | 'onCompositionEndCapture' | 'onCompositionStart' | 'onCompositionStartCapture' | 'onCompositionUpdate' | 'onCompositionUpdateCapture' | 'onFocus' | 'onFocusCapture' | 'onBlur' | 'onBlurCapture' | 'onChange' | 'onChangeCapture' | 'onBeforeInput' | 'onBeforeInputCapture' | 'onInput' | 'onInputCapture' | 'onReset' | 'onResetCapture' | 'onSubmit' | 'onSubmitCapture' | 'onInvalid' | 'onInvalidCapture' | 'onLoad' | 'onLoadCapture' | 'onError' | 'onErrorCapture' | 'onKeyDown' | 'onKeyDownCapture' | 'onKeyPress' | 'onKeyPressCapture' | 'onKeyUp' | 'onKeyUpCapture' | 'onAbort' | 'onAbortCapture' | 'onCanPlay' | 'onCanPlayCapture' | 'onCanPlayThrough' | 'onCanPlayThroughCapture' | 'onDurationChange' | 'onDurationChangeCapture' | 'onEmptied' | 'onEmptiedCapture' | 'onEncrypted' | 'onEncryptedCapture' | 'onEnded' | 'onEndedCapture' | 'onLoadedData' | 'onLoadedDataCapture' | 'onLoadedMetadata' | 'onLoadedMetadataCapture' | 'onLoadStart' | 'onLoadStartCapture' | 'onPause' | 'onPauseCapture' | 'onPlay' | 'onPlayCapture' | 'onPlaying' | 'onPlayingCapture' | 'onProgress' | 'onProgressCapture' | 'onRateChange' | 'onRateChangeCapture' | 'onResize' | 'onResizeCapture' | 'onSeeked' | 'onSeekedCapture' | 'onSeeking' | 'onSeekingCapture' | 'onStalled' | 'onStalledCapture' | 'onSuspend' | 'onSuspendCapture' | 'onTimeUpdate' | 'onTimeUpdateCapture' | 'onVolumeChange' | 'onVolumeChangeCapture' | 'onWaiting' | 'onWaitingCapture' | 'onAuxClick' | 'onAuxClickCapture' | 'onClick' | 'onClickCapture' | 'onContextMenu' | 'onContextMenuCapture' | 'onDoubleClick' | 'onDoubleClickCapture' | 'onDrag' | 'onDragCapture' | 'onDragEnd' | 'onDragEndCapture' | 'onDragEnter' | 'onDragEnterCapture' | 'onDragExit' | 'onDragExitCapture' | 'onDragLeave' | 'onDragLeaveCapture' | 'onDragOver' | 'onDragOverCapture' | 'onDragStart' | 'onDragStartCapture' | 'onDrop' | 'onDropCapture' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove' | 'onMouseMoveCapture' | 'onMouseOut' | 'onMouseOutCapture' | 'onMouseOver' | 'onMouseOverCapture' | 'onMouseUp' | 'onMouseUpCapture' | 'onSelect' | 'onSelectCapture' | 'onTouchCancel' | 'onTouchCancelCapture' | 'onTouchEnd' | 'onTouchEndCapture' | 'onTouchMove' | 'onTouchMoveCapture' | 'onTouchStart' | 'onTouchStartCapture' | 'onPointerDown' | 'onPointerDownCapture' | 'onPointerMove' | 'onPointerMoveCapture' | 'onPointerUp' | 'onPointerUpCapture' | 'onPointerCancel' | 'onPointerCancelCapture' | 'onPointerEnter' | 'onPointerEnterCapture' | 'onPointerLeave' | 'onPointerLeaveCapture' | 'onPointerOver' | 'onPointerOverCapture' | 'onPointerOut' | 'onPointerOutCapture' | 'onGotPointerCapture' | 'onGotPointerCaptureCapture' | 'onLostPointerCapture' | 'onLostPointerCaptureCapture' | 'onScroll' | 'onScrollCapture' | 'onWheel' | 'onWheelCapture' | 'onAnimationStart' | 'onAnimationStartCapture' | 'onAnimationEnd' | 'onAnimationEndCapture' | 'onAnimationIteration' | 'onAnimationIterationCapture' | 'onTransitionEnd' | 'onTransitionEndCapture' | 'key' | 'icon' | 'mode' | 'inline' | 'flip'>;
-declare const Icon: (props: IconProps) => JSX.Element;
+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 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, ThemeProvider, ThemeProviderProps, useTheme };
+export { Button, ButtonProps, Icon, IconProps, InfiniteLinearProgress, Input, InputProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -168,7 +168,7 @@ __export(src_exports, {
   Icon: () => Icon2,
   Image: () => import_theme_ui10.Image,
   InfiniteLinearProgress: () => InfiniteLinearProgress,
-  Input: () => import_theme_ui11.Input,
+  Input: () => Input,
   Label: () => import_theme_ui12.Label,
   LinearProgress: () => import_theme_ui14.Progress,
   Link: () => import_theme_ui13.Link,
@@ -529,11 +529,12 @@ var import_theme_ui3 = require("theme-ui");
 
 // src/components/Button.tsx
 init_tsup_inject();
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_theme_ui4 = require("theme-ui");
 
 // src/components/Icon.tsx
 init_tsup_inject();
+var React3 = __toESM(require("react"));
 
 // ../../node_modules/@iconify-icon/react/dist/iconify.mjs
 init_tsup_inject();
@@ -2528,9 +2529,12 @@ var Icon = import_react2.default.forwardRef(
 
 // src/components/Icon.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Icon2 = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { ...props });
-};
+var Icon2 = React3.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { ref, "data-testid": "iconify-icon", ...props });
+  }
+);
+Icon2.displayName = "Icon";
 
 // src/components/Button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -2543,8 +2547,8 @@ var RenderIcon = ({ icon }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: icon });
 };
-var MemoizedRenderIcon = React3.memo(RenderIcon);
-var Button = React3.forwardRef(
+var MemoizedRenderIcon = React4.memo(RenderIcon);
+var Button = React4.forwardRef(
   (props, ref) => {
     const { children, leftIcon, rightIcon, ...restProps } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -2598,7 +2602,74 @@ var import_theme_ui10 = require("theme-ui");
 
 // src/components/Input.tsx
 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,
+        {
+          sx: {
+            position: "absolute",
+            alignSelf: "center",
+            fontSize: "lg",
+            left: "lg",
+            lineHeight: 0
+          },
+          variant: "leading-icon",
+          children: leadingIconElement
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_theme_ui11.Input,
+        {
+          ref,
+          sx: {
+            paddingLeft: leadingIcon ? "3xl" : void 0,
+            paddingRight: trailingIcon ? "3xl" : void 0,
+            ...sx
+          },
+          ...inputProps
+        }
+      ),
+      trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_theme_ui15.Text,
+        {
+          sx: {
+            position: "absolute",
+            right: "lg",
+            alignSelf: "center",
+            fontSize: "lg",
+            lineHeight: 0
+          },
+          variant: "trailing-icon",
+          children: trailingIconElement
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
 
 // src/components/Label.tsx
 init_tsup_inject();
@@ -2638,12 +2709,12 @@ var import_theme_ui20 = require("theme-ui");
 
 // src/components/InfiniteLinearProgress.tsx
 init_tsup_inject();
-var React4 = __toESM(require("react"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var React6 = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React4.useState(0);
-  React4.useEffect(() => {
+  const [progress, setProgress] = React6.useState(0);
+  React6.useEffect(() => {
     const timer = setInterval(() => {
       setProgress((oldProgress) => {
         if (oldProgress === MAX_PROGRESS) {
@@ -2664,7 +2735,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_theme_ui14.Progress, { max: MAX_PROGRESS, value: progress, role: "progressbar" });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_theme_ui14.Progress, { max: MAX_PROGRESS, value: progress, role: "progressbar" });
 };
 
 // src/components/Textarea.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.30.3",
+  "version": "1.30.5",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -45,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8ba4361ab9cf6c0ab275ee771a371d4c2ba8cebe"
+  "gitHead": "9a1d05dc6546c74a3f83835e4dcef00bc7040b6b"
 }

package/src/components/Icon.tsx

@@ -1,377 +1,16 @@
-import { Icon as IconUI, IconifyIconProps } from '@iconify-icon/react';
-
-export type IconProps = Pick<
+import * as React from 'react';
+import {
+  Icon as IconifyIcon,
+  IconifyIconHTMLElement,
   IconifyIconProps,
-  | 'preserveAspectRatio'
-  | 'rotate'
-  | 'cite'
-  | 'data'
-  | 'form'
-  | 'label'
-  | 'slot'
-  | 'span'
-  | 'style'
-  | 'summary'
-  | 'title'
-  | 'pattern'
-  | 'accept'
-  | 'acceptCharset'
-  | 'action'
-  | 'allowFullScreen'
-  | 'allowTransparency'
-  | 'alt'
-  | 'as'
-  | 'async'
-  | 'autoComplete'
-  | 'autoFocus'
-  | 'autoPlay'
-  | 'capture'
-  | 'cellPadding'
-  | 'cellSpacing'
-  | 'charSet'
-  | 'challenge'
-  | 'checked'
-  | 'classID'
-  | 'cols'
-  | 'colSpan'
-  | 'content'
-  | 'controls'
-  | 'coords'
-  | 'crossOrigin'
-  | 'dateTime'
-  | 'default'
-  | 'defer'
-  | 'disabled'
-  | 'download'
-  | 'encType'
-  | 'formAction'
-  | 'formEncType'
-  | 'formMethod'
-  | 'formNoValidate'
-  | 'formTarget'
-  | 'frameBorder'
-  | 'headers'
-  | 'height'
-  | 'high'
-  | 'href'
-  | 'hrefLang'
-  | 'htmlFor'
-  | 'httpEquiv'
-  | 'integrity'
-  | 'keyParams'
-  | 'keyType'
-  | 'kind'
-  | 'list'
-  | 'loop'
-  | 'low'
-  | 'manifest'
-  | 'marginHeight'
-  | 'marginWidth'
-  | 'max'
-  | 'maxLength'
-  | 'media'
-  | 'mediaGroup'
-  | 'method'
-  | 'min'
-  | 'minLength'
-  | 'multiple'
-  | 'muted'
-  | 'name'
-  | 'noValidate'
-  | 'open'
-  | 'optimum'
-  | 'placeholder'
-  | 'playsInline'
-  | 'poster'
-  | 'preload'
-  | 'readOnly'
-  | 'rel'
-  | 'required'
-  | 'reversed'
-  | 'rows'
-  | 'rowSpan'
-  | 'sandbox'
-  | 'scope'
-  | 'scoped'
-  | 'scrolling'
-  | 'seamless'
-  | 'selected'
-  | 'shape'
-  | 'size'
-  | 'sizes'
-  | 'src'
-  | 'srcDoc'
-  | 'srcLang'
-  | 'srcSet'
-  | 'start'
-  | 'step'
-  | 'target'
-  | 'type'
-  | 'useMap'
-  | 'value'
-  | 'width'
-  | 'wmode'
-  | 'wrap'
-  | 'defaultChecked'
-  | 'defaultValue'
-  | 'suppressContentEditableWarning'
-  | 'suppressHydrationWarning'
-  | 'accessKey'
-  | 'className'
-  | 'contentEditable'
-  | 'contextMenu'
-  | 'dir'
-  | 'draggable'
-  | 'hidden'
-  | 'id'
-  | 'lang'
-  | 'nonce'
-  | 'spellCheck'
-  | 'tabIndex'
-  | 'translate'
-  | 'radioGroup'
-  | 'role'
-  | 'about'
-  | 'datatype'
-  | 'inlist'
-  | 'prefix'
-  | 'property'
-  | 'resource'
-  | 'typeof'
-  | 'vocab'
-  | 'autoCapitalize'
-  | 'autoCorrect'
-  | 'autoSave'
-  | 'color'
-  | 'itemProp'
-  | 'itemScope'
-  | 'itemType'
-  | 'itemID'
-  | 'itemRef'
-  | 'results'
-  | 'security'
-  | 'unselectable'
-  | 'inputMode'
-  | 'is'
-  | 'aria-activedescendant'
-  | 'aria-atomic'
-  | 'aria-autocomplete'
-  | 'aria-busy'
-  | 'aria-checked'
-  | 'aria-colcount'
-  | 'aria-colindex'
-  | 'aria-colspan'
-  | 'aria-controls'
-  | 'aria-current'
-  | 'aria-describedby'
-  | 'aria-details'
-  | 'aria-disabled'
-  | 'aria-dropeffect'
-  | 'aria-errormessage'
-  | 'aria-expanded'
-  | 'aria-flowto'
-  | 'aria-grabbed'
-  | 'aria-haspopup'
-  | 'aria-hidden'
-  | 'aria-invalid'
-  | 'aria-keyshortcuts'
-  | 'aria-label'
-  | 'aria-labelledby'
-  | 'aria-level'
-  | 'aria-live'
-  | 'aria-modal'
-  | 'aria-multiline'
-  | 'aria-multiselectable'
-  | 'aria-orientation'
-  | 'aria-owns'
-  | 'aria-placeholder'
-  | 'aria-posinset'
-  | 'aria-pressed'
-  | 'aria-readonly'
-  | 'aria-relevant'
-  | 'aria-required'
-  | 'aria-roledescription'
-  | 'aria-rowcount'
-  | 'aria-rowindex'
-  | 'aria-rowspan'
-  | 'aria-selected'
-  | 'aria-setsize'
-  | 'aria-sort'
-  | 'aria-valuemax'
-  | 'aria-valuemin'
-  | 'aria-valuenow'
-  | 'aria-valuetext'
-  | 'children'
-  | 'dangerouslySetInnerHTML'
-  | 'onCopy'
-  | 'onCopyCapture'
-  | 'onCut'
-  | 'onCutCapture'
-  | 'onPaste'
-  | 'onPasteCapture'
-  | 'onCompositionEnd'
-  | 'onCompositionEndCapture'
-  | 'onCompositionStart'
-  | 'onCompositionStartCapture'
-  | 'onCompositionUpdate'
-  | 'onCompositionUpdateCapture'
-  | 'onFocus'
-  | 'onFocusCapture'
-  | 'onBlur'
-  | 'onBlurCapture'
-  | 'onChange'
-  | 'onChangeCapture'
-  | 'onBeforeInput'
-  | 'onBeforeInputCapture'
-  | 'onInput'
-  | 'onInputCapture'
-  | 'onReset'
-  | 'onResetCapture'
-  | 'onSubmit'
-  | 'onSubmitCapture'
-  | 'onInvalid'
-  | 'onInvalidCapture'
-  | 'onLoad'
-  | 'onLoadCapture'
-  | 'onError'
-  | 'onErrorCapture'
-  | 'onKeyDown'
-  | 'onKeyDownCapture'
-  | 'onKeyPress'
-  | 'onKeyPressCapture'
-  | 'onKeyUp'
-  | 'onKeyUpCapture'
-  | 'onAbort'
-  | 'onAbortCapture'
-  | 'onCanPlay'
-  | 'onCanPlayCapture'
-  | 'onCanPlayThrough'
-  | 'onCanPlayThroughCapture'
-  | 'onDurationChange'
-  | 'onDurationChangeCapture'
-  | 'onEmptied'
-  | 'onEmptiedCapture'
-  | 'onEncrypted'
-  | 'onEncryptedCapture'
-  | 'onEnded'
-  | 'onEndedCapture'
-  | 'onLoadedData'
-  | 'onLoadedDataCapture'
-  | 'onLoadedMetadata'
-  | 'onLoadedMetadataCapture'
-  | 'onLoadStart'
-  | 'onLoadStartCapture'
-  | 'onPause'
-  | 'onPauseCapture'
-  | 'onPlay'
-  | 'onPlayCapture'
-  | 'onPlaying'
-  | 'onPlayingCapture'
-  | 'onProgress'
-  | 'onProgressCapture'
-  | 'onRateChange'
-  | 'onRateChangeCapture'
-  | 'onResize'
-  | 'onResizeCapture'
-  | 'onSeeked'
-  | 'onSeekedCapture'
-  | 'onSeeking'
-  | 'onSeekingCapture'
-  | 'onStalled'
-  | 'onStalledCapture'
-  | 'onSuspend'
-  | 'onSuspendCapture'
-  | 'onTimeUpdate'
-  | 'onTimeUpdateCapture'
-  | 'onVolumeChange'
-  | 'onVolumeChangeCapture'
-  | 'onWaiting'
-  | 'onWaitingCapture'
-  | 'onAuxClick'
-  | 'onAuxClickCapture'
-  | 'onClick'
-  | 'onClickCapture'
-  | 'onContextMenu'
-  | 'onContextMenuCapture'
-  | 'onDoubleClick'
-  | 'onDoubleClickCapture'
-  | 'onDrag'
-  | 'onDragCapture'
-  | 'onDragEnd'
-  | 'onDragEndCapture'
-  | 'onDragEnter'
-  | 'onDragEnterCapture'
-  | 'onDragExit'
-  | 'onDragExitCapture'
-  | 'onDragLeave'
-  | 'onDragLeaveCapture'
-  | 'onDragOver'
-  | 'onDragOverCapture'
-  | 'onDragStart'
-  | 'onDragStartCapture'
-  | 'onDrop'
-  | 'onDropCapture'
-  | 'onMouseDown'
-  | 'onMouseDownCapture'
-  | 'onMouseEnter'
-  | 'onMouseLeave'
-  | 'onMouseMove'
-  | 'onMouseMoveCapture'
-  | 'onMouseOut'
-  | 'onMouseOutCapture'
-  | 'onMouseOver'
-  | 'onMouseOverCapture'
-  | 'onMouseUp'
-  | 'onMouseUpCapture'
-  | 'onSelect'
-  | 'onSelectCapture'
-  | 'onTouchCancel'
-  | 'onTouchCancelCapture'
-  | 'onTouchEnd'
-  | 'onTouchEndCapture'
-  | 'onTouchMove'
-  | 'onTouchMoveCapture'
-  | 'onTouchStart'
-  | 'onTouchStartCapture'
-  | 'onPointerDown'
-  | 'onPointerDownCapture'
-  | 'onPointerMove'
-  | 'onPointerMoveCapture'
-  | 'onPointerUp'
-  | 'onPointerUpCapture'
-  | 'onPointerCancel'
-  | 'onPointerCancelCapture'
-  | 'onPointerEnter'
-  | 'onPointerEnterCapture'
-  | 'onPointerLeave'
-  | 'onPointerLeaveCapture'
-  | 'onPointerOver'
-  | 'onPointerOverCapture'
-  | 'onPointerOut'
-  | 'onPointerOutCapture'
-  | 'onGotPointerCapture'
-  | 'onGotPointerCaptureCapture'
-  | 'onLostPointerCapture'
-  | 'onLostPointerCaptureCapture'
-  | 'onScroll'
-  | 'onScrollCapture'
-  | 'onWheel'
-  | 'onWheelCapture'
-  | 'onAnimationStart'
-  | 'onAnimationStartCapture'
-  | 'onAnimationEnd'
-  | 'onAnimationEndCapture'
-  | 'onAnimationIteration'
-  | 'onAnimationIterationCapture'
-  | 'onTransitionEnd'
-  | 'onTransitionEndCapture'
-  | 'key'
-  | 'icon'
-  | 'mode'
-  | 'inline'
-  | 'flip'
->;
+} from '@iconify-icon/react';
+
+export type IconProps = Omit<IconifyIconProps, 'ref'>;
+
+export const Icon = React.forwardRef<IconifyIconHTMLElement | null, IconProps>(
+  (props, ref) => {
+    return <IconifyIcon ref={ref} data-testid="iconify-icon" {...props} />;
+  }
+);
 
-export const Icon = (props: IconProps) => {
-  return <IconUI {...props} />;
-};
+Icon.displayName = 'Icon';

package/src/components/Input.tsx

@@ -1 +1,88 @@
-export { Input, type InputProps } from 'theme-ui';
+import { Flex, Icon, 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 && (
+          <Text
+            sx={{
+              position: 'absolute',
+              alignSelf: 'center',
+              fontSize: 'lg',
+              left: 'lg',
+              lineHeight: 0,
+            }}
+            variant="leading-icon"
+          >
+            {leadingIconElement}
+          </Text>
+        )}
+        <InputUI
+          ref={ref}
+          sx={{
+            paddingLeft: leadingIcon ? '3xl' : undefined,
+            paddingRight: trailingIcon ? '3xl' : undefined,
+            ...sx,
+          }}
+          {...inputProps}
+        />
+
+        {trailingIcon && (
+          <Text
+            sx={{
+              position: 'absolute',
+              right: 'lg',
+              alignSelf: 'center',
+              fontSize: 'lg',
+              lineHeight: 0,
+            }}
+            variant="trailing-icon"
+          >
+            {trailingIconElement}
+          </Text>
+        )}
+      </Flex>
+    );
+  }
+);
+
+Input.displayName = 'Input';