@ttoss/ui 1.30.4 → 1.30.6

package/dist/esm/index.js

@@ -2566,7 +2566,56 @@ 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 { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Input = React5.forwardRef(
+  ({ leadingIcon, trailingIcon, sx, ...inputProps }, ref) => {
+    return /* @__PURE__ */ jsxs3(Flex, { sx: { position: "relative" }, children: [
+      leadingIcon && /* @__PURE__ */ jsx4(
+        Text,
+        {
+          sx: {
+            position: "absolute",
+            alignSelf: "center",
+            fontSize: "lg",
+            left: "1rem",
+            lineHeight: 0
+          },
+          variant: "leading-icon",
+          children: /* @__PURE__ */ jsx4(Icon2, { icon: leadingIcon })
+        }
+      ),
+      /* @__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: "1rem",
+            alignSelf: "center",
+            fontSize: "lg",
+            lineHeight: 0
+          },
+          variant: "trailing-icon",
+          children: /* @__PURE__ */ jsx4(Icon2, { icon: trailingIcon })
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
 
 // src/components/Label.tsx
 init_tsup_inject();
@@ -2608,12 +2657,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 +2683,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 React__default from 'react';
 import { IconifyIconProps, IconifyIconHTMLElement } from '@iconify-icon/react';
+import { IconifyIcon } from '@iconify/types';
 
 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 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, ThemeProvider, ThemeProviderProps, useTheme };
+export { Button, ButtonProps, Icon, IconProps, IconType, 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,56 @@ 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 Input = import_react4.default.forwardRef(
+  ({ leadingIcon, trailingIcon, sx, ...inputProps }, ref) => {
+    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: "1rem",
+            lineHeight: 0
+          },
+          variant: "leading-icon",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2, { icon: leadingIcon })
+        }
+      ),
+      /* @__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: "1rem",
+            alignSelf: "center",
+            fontSize: "lg",
+            lineHeight: 0
+          },
+          variant: "trailing-icon",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2, { icon: trailingIcon })
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
 
 // src/components/Label.tsx
 init_tsup_inject();
@@ -2642,12 +2691,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 +2717,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.6",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -45,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d07df43f2a4a997636e950f5362a7a8090705c99"
+  "gitHead": "0a6b947e6dc4386ff80861cbed8c119c6bd39f47"
 }

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

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