@ttoss/ui 1.30.4 → 1.30.5

package/dist/esm/index.js

@@ -2566,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();
@@ -2608,12 +2675,12 @@ import { Checkbox } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
 init_tsup_inject();
-import * as React5 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] = React5.useState(0);
-  React5.useEffect(() => {
+  const [progress, setProgress] = React6.useState(0);
+  React6.useEffect(() => {
     const timer = setInterval(() => {
       setProgress((oldProgress) => {
         if (oldProgress === MAX_PROGRESS) {
@@ -2634,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,8 +1,10 @@
 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 React__default from 'react';
+import { IconifyIcon } from '@iconify/types';
 import { IconifyIconProps, IconifyIconHTMLElement } from '@iconify-icon/react';
 
 type ThemeProviderProps = {
@@ -23,9 +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 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,
@@ -2602,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();
@@ -2642,12 +2709,12 @@ var import_theme_ui20 = require("theme-ui");
 
 // src/components/InfiniteLinearProgress.tsx
 init_tsup_inject();
-var React5 = __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] = React5.useState(0);
-  React5.useEffect(() => {
+  const [progress, setProgress] = React6.useState(0);
+  React6.useEffect(() => {
     const timer = setInterval(() => {
       setProgress((oldProgress) => {
         if (oldProgress === MAX_PROGRESS) {
@@ -2668,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.4",
+  "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": "d07df43f2a4a997636e950f5362a7a8090705c99"
+  "gitHead": "9a1d05dc6546c74a3f83835e4dcef00bc7040b6b"
 }

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';