@ttoss/ui 1.31.17 → 1.31.18

package/dist/esm/index.js

@@ -327,20 +327,59 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Textarea.tsx
-import { Textarea } from "theme-ui";
+import { Textarea as TextareaUI } from "theme-ui";
+import React8 from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var Textarea = /*#__PURE__*/React8.forwardRef(({
+  trailingIcon,
+  className,
+  sx,
+  ...textareaProps
+}, ref) => {
+  return /* @__PURE__ */jsxs7(Flex, {
+    className,
+    sx: {
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    },
+    children: [/* @__PURE__ */jsx10(TextareaUI, {
+      ref,
+      sx: {
+        ...sx,
+        paddingRight: trailingIcon ? "3xl" : void 0,
+        margin: 0
+      },
+      className,
+      ...textareaProps
+    }), trailingIcon && /* @__PURE__ */jsx10(Text, {
+      sx: {
+        position: "absolute",
+        right: "1.25rem",
+        top: "0.75rem"
+      },
+      children: /* @__PURE__ */jsx10(Icon, {
+        inline: true,
+        icon: trailingIcon
+      })
+    })]
+  });
+});
+Textarea.displayName = "Textarea";
 
 // src/components/Container.tsx
 import { Container } from "theme-ui";
 
 // src/components/HelpText.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var HelpText = ({
   disabled,
   negative,
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */jsx10(Text, {
+  return /* @__PURE__ */jsx11(Text, {
     variant,
     "aria-disabled": disabled ? "true" : void 0,
     ...props
@@ -349,14 +388,14 @@ var HelpText = ({
 
 // src/components/CloseButton.tsx
 import { Button as Button2 } from "theme-ui";
-import React8 from "react";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var CloseButton = /*#__PURE__*/React8.forwardRef(({
+import React9 from "react";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var CloseButton = /*#__PURE__*/React9.forwardRef(({
   label,
   sx,
   ...props
 }, ref) => {
-  return /* @__PURE__ */jsxs7(Button2, {
+  return /* @__PURE__ */jsxs8(Button2, {
     variant: "buttons.closeButton",
     type: "button",
     "aria-label": label,
@@ -367,7 +406,7 @@ var CloseButton = /*#__PURE__*/React8.forwardRef(({
     },
     ...props,
     ref,
-    children: [label, /* @__PURE__ */jsx11(Icon, {
+    children: [label, /* @__PURE__ */jsx12(Icon, {
       icon: "close"
     })]
   });

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

package/dist/index.js

@@ -64,7 +64,7 @@ __export(src_exports, {
   Slider: () => import_theme_ui21.Slider,
   Spinner: () => import_theme_ui18.Spinner,
   Text: () => import_theme_ui16.Text,
-  Textarea: () => import_theme_ui23.Textarea,
+  Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
@@ -398,19 +398,58 @@ var InfiniteLinearProgress = () => {
 
 // src/components/Textarea.tsx
 var import_theme_ui23 = require("theme-ui");
+var import_react5 = __toESM(require("react"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Textarea = import_react5.default.forwardRef(({
+  trailingIcon,
+  className,
+  sx,
+  ...textareaProps
+}, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsxs)(import_theme_ui8.Flex, {
+    className,
+    sx: {
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui23.Textarea, {
+      ref,
+      sx: {
+        ...sx,
+        paddingRight: trailingIcon ? "3xl" : void 0,
+        margin: 0
+      },
+      className,
+      ...textareaProps
+    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui16.Text, {
+      sx: {
+        position: "absolute",
+        right: "1.25rem",
+        top: "0.75rem"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime10.jsx)(Icon, {
+        inline: true,
+        icon: trailingIcon
+      })
+    })]
+  });
+});
+Textarea.displayName = "Textarea";
 
 // src/components/Container.tsx
 var import_theme_ui24 = require("theme-ui");
 
 // src/components/HelpText.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = 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_runtime10.jsx)(import_theme_ui16.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui16.Text, {
     variant,
     "aria-disabled": disabled ? "true" : void 0,
     ...props
@@ -419,14 +458,14 @@ var HelpText = ({
 
 // src/components/CloseButton.tsx
 var import_theme_ui25 = require("theme-ui");
-var import_react5 = __toESM(require("react"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var CloseButton = import_react5.default.forwardRef(({
+var import_react6 = __toESM(require("react"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var CloseButton = import_react6.default.forwardRef(({
   label,
   sx,
   ...props
 }, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_theme_ui25.Button, {
+  return /* @__PURE__ */(0, import_jsx_runtime12.jsxs)(import_theme_ui25.Button, {
     variant: "buttons.closeButton",
     type: "button",
     "aria-label": label,
@@ -437,7 +476,7 @@ var CloseButton = import_react5.default.forwardRef(({
     },
     ...props,
     ref,
-    children: [label, /* @__PURE__ */(0, import_jsx_runtime11.jsx)(Icon, {
+    children: [label, /* @__PURE__ */(0, import_jsx_runtime12.jsx)(Icon, {
       icon: "close"
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.31.17",
+  "version": "1.31.18",
   "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.7",
-    "@ttoss/theme": "^1.4.14",
+    "@ttoss/theme": "^1.4.15",
     "theme-ui": "^0.15.7"
   },
   "peerDependencies": {
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f7ce64308917a032fdd64066b00d26f12702ef83"
+  "gitHead": "3f398d2717a3ac8f7fecf4c79c028b35f0ef45fb"
 }

package/src/components/Textarea.tsx

@@ -1 +1,46 @@
-export { Textarea, type TextareaProps } from 'theme-ui';
+import { Flex, Icon, type IconType, Text } from '..';
+import {
+  type TextareaProps as TextareaPropsUI,
+  Textarea as TextareaUI,
+} from 'theme-ui';
+import React from 'react';
+
+export type TextareaProps = TextareaPropsUI & {
+  trailingIcon?: IconType;
+};
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ trailingIcon, className, sx, ...textareaProps }, ref) => {
+    return (
+      <Flex
+        className={className}
+        sx={{ ...sx, position: 'relative', padding: 0, border: 'none' }}
+      >
+        <TextareaUI
+          ref={ref}
+          sx={{
+            ...sx,
+            paddingRight: trailingIcon ? '3xl' : undefined,
+            margin: 0,
+          }}
+          className={className}
+          {...textareaProps}
+        />
+
+        {trailingIcon && (
+          <Text
+            sx={{
+              position: 'absolute',
+              right: '1.25rem',
+              top: '0.75rem',
+            }}
+          >
+            <Icon inline icon={trailingIcon} />
+          </Text>
+        )}
+      </Flex>
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';