@ultraviolet/ui 3.0.0-beta.26 → 3.0.0-beta.28

package/dist/components/TagList/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useRef, useState, useMemo, useEffect } from "react";
 import { Popover } from "../Popover/index.js";
@@ -37,7 +37,10 @@ const TagList = ({
     while (tmpThreshold2 > 1 && tags.length > 0 && tags.slice(0, tmpThreshold2).reduce((acc, tag) => acc + getTagLabel(tag), "").length > maxLength) {
       tmpThreshold2 -= 1;
     }
-    const potentiallyVisibleTagsLength = Math.max(1, tags.length > tmpThreshold2 || false ? tmpThreshold2 : tags.length);
+    const potentiallyVisibleTagsLength = Math.max(
+      1,
+      tags.length > tmpThreshold2 || false ? tmpThreshold2 : tags.length
+    );
     const potentiallyVisibleTags2 = tags.slice(0, potentiallyVisibleTagsLength);
     const surelyHiddenTags2 = tags.slice(potentiallyVisibleTagsLength);
     return {
@@ -46,11 +49,7 @@ const TagList = ({
       tmpThreshold: tmpThreshold2
     };
   }, [maxLength, tags, threshold]);
-  const {
-    tmpThreshold,
-    potentiallyVisibleTags,
-    surelyHiddenTags
-  } = memoizedResult;
+  const { tmpThreshold, potentiallyVisibleTags, surelyHiddenTags } = memoizedResult;
   useEffect(() => {
     if (tags.length === 0 || !containerRef.current || !measureRef.current) {
       return;
@@ -64,29 +63,42 @@ const TagList = ({
     const parentWidth = containerRef.current.parentElement?.offsetWidth || 0;
     const toMeasureElements = measureRef.current.children[0].children;
     const [firstTag, ...restOfToMeasureElements] = [...toMeasureElements];
-    const {
-      measuredVisibleTags,
-      measuredHiddenTags
-    } = restOfToMeasureElements.reduce((accumulator, currentValue, index) => {
-      const newAccumulatedWidth = accumulator.accumulatedWidth + currentValue.offsetWidth + Number.parseInt(TAGS_GAP, 10);
-      return {
-        accumulatedWidth: newAccumulatedWidth,
-        measuredHiddenTags: [...accumulator.measuredHiddenTags, newAccumulatedWidth > parentWidth && tags[index + 1]].filter(Boolean),
-        measuredVisibleTags: [...accumulator.measuredVisibleTags, newAccumulatedWidth <= parentWidth && tags[index + 1]].filter(Boolean)
-      };
-    }, {
-      accumulatedWidth: firstTag.offsetWidth + Number.parseInt(TAGS_GAP, 10),
-      measuredHiddenTags: [],
-      measuredVisibleTags: [tags[0]]
-      // we need to always show one tag
-    });
+    const { measuredVisibleTags, measuredHiddenTags } = restOfToMeasureElements.reduce(
+      (accumulator, currentValue, index) => {
+        const newAccumulatedWidth = accumulator.accumulatedWidth + currentValue.offsetWidth + Number.parseInt(TAGS_GAP, 10);
+        return {
+          accumulatedWidth: newAccumulatedWidth,
+          measuredHiddenTags: [
+            ...accumulator.measuredHiddenTags,
+            newAccumulatedWidth > parentWidth && tags[index + 1]
+          ].filter(Boolean),
+          measuredVisibleTags: [
+            ...accumulator.measuredVisibleTags,
+            newAccumulatedWidth <= parentWidth && tags[index + 1]
+          ].filter(Boolean)
+        };
+      },
+      {
+        accumulatedWidth: firstTag.offsetWidth + Number.parseInt(TAGS_GAP, 10),
+        measuredHiddenTags: [],
+        measuredVisibleTags: [tags[0]]
+        // we need to always show one tag
+      }
+    );
     const finalHiddenTags = [...measuredHiddenTags, ...surelyHiddenTags];
     setVisibleTags(measuredVisibleTags);
     setHiddenTags(finalHiddenTags);
     if (finalHiddenTags.length === 0) {
       setIsReady(true);
     }
-  }, [multiline, potentiallyVisibleTags, surelyHiddenTags, tags, threshold, tmpThreshold]);
+  }, [
+    multiline,
+    potentiallyVisibleTags,
+    surelyHiddenTags,
+    tags,
+    threshold,
+    tmpThreshold
+  ]);
   useEffect(() => {
     if (!isReady && popoverTriggerRef.current?.offsetWidth) {
       const newPopoverTriggerWidth = popoverTriggerRef.current.offsetWidth;
@@ -95,8 +107,10 @@ const TagList = ({
       const tagsContainerWidth = containerRef.current?.offsetWidth || 0;
       const parentWidth = tagsContainer?.parentElement?.offsetWidth || 0;
       if (visibleTags.length > 1 && hiddenTags.length > 0 && tagsContainerWidth + newPopoverTriggerWidth > parentWidth) {
-        const visibleTagsCopy = visibleTags.filter((_, index) => index < visibleTags.length - 1);
-        const tagToMove = visibleTags[visibleTags.length - 1];
+        const visibleTagsCopy = visibleTags.filter(
+          (_, index) => index < visibleTags.length - 1
+        );
+        const tagToMove = visibleTags.at(-1) ?? "";
         setVisibleTags(visibleTagsCopy);
         setHiddenTags([tagToMove, ...hiddenTags]);
       }
@@ -124,39 +138,98 @@ const TagList = ({
       ]
     },
     `${getTagLabel(tag)}-${index}`
-  ) : /* @__PURE__ */ jsx(Tag, { className: isEllipsis ? "ellipsed" : "", copiable, copiedText, copyText, children: getTagLabel(tag) }, `${getTagLabel(tag)}-${index}`);
-  return /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${tagListContainer}`, "data-testid": dataTestId, style: {
-    visibility: isReady ? "visible" : "hidden",
-    ...style
-  }, children: [
-    /* @__PURE__ */ jsx("div", { className: `${tagContainer({
-      multiline
-    })} ${visibleTags.length === 1 && hiddenTags.length === 0 || popoverTriggerWidth ? ellipsisContainer : ""}`, "data-testid": `${dataTestId ?? "taglist"}-container`, ref: containerRef, style: assignInlineVars({
-      [popoverTriggerWidthVar]: `${popoverTriggerWidth || 0}px`
-    }), children: visibleTags.map((tag, index) => renderTag(
-      tag,
-      index,
-      // add ellipsis to last tag
-      index === visibleTags.length - 1
-    )) }),
-    /* @__PURE__ */ jsx("div", { ref: measureRef, style: {
-      position: "absolute",
-      visibility: "hidden",
-      whiteSpace: "nowrap"
-    }, children: /* @__PURE__ */ jsx("div", { className: tagContainer({
-      multiline
-    }), "data-testid": `${dataTestId ?? "taglist"}-measure-container`, children: potentiallyVisibleTags.map((tag, index) => renderTag(tag, index)) }) }),
-    hiddenTags.length > 0 && /* @__PURE__ */ jsx(Popover, { content: /* @__PURE__ */ jsx("div", { className: tagContainer({
-      multiline: true
-    }), children: hiddenTags.map((tag, index) => renderTag(tag, index)) }), maxHeight: popoverMaxHeight, onClose: () => setIsPopoverVisible(false), placement: popoverPlacement, size: "small", title: popoverTitle, visible: isPopoverVisible, children: /* @__PURE__ */ jsxs("span", { className: tagsWrapper, "data-testid": `${dataTestId ?? "taglist"}-open`, onClick: () => setIsPopoverVisible(true), onKeyDown: (event) => {
-      if ([" ", "Enter"].includes(event.key)) {
-        setIsPopoverVisible(true);
-      }
-    }, ref: popoverTriggerRef, tabIndex: 0, children: [
-      "+",
-      hiddenTags.length
-    ] }) })
-  ] });
+  ) : /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: isEllipsis ? "ellipsed" : "",
+      copiable,
+      copiedText,
+      copyText,
+      children: getTagLabel(tag)
+    },
+    `${getTagLabel(tag)}-${index}`
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${className ? `${className} ` : ""}${tagListContainer}`,
+      "data-testid": dataTestId,
+      style: { visibility: isReady ? "visible" : "hidden", ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${tagContainer({
+              multiline
+            })} ${visibleTags.length === 1 && hiddenTags.length === 0 || popoverTriggerWidth ? ellipsisContainer : ""}`,
+            "data-testid": `${dataTestId ?? "taglist"}-container`,
+            ref: containerRef,
+            style: assignInlineVars({
+              [popoverTriggerWidthVar]: `${popoverTriggerWidth || 0}px`
+            }),
+            children: visibleTags.map(
+              (tag, index) => renderTag(
+                tag,
+                index,
+                // add ellipsis to last tag
+                index === visibleTags.length - 1
+              )
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: measureRef,
+            style: {
+              position: "absolute",
+              visibility: "hidden",
+              whiteSpace: "nowrap"
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: tagContainer({ multiline }),
+                "data-testid": `${dataTestId ?? "taglist"}-measure-container`,
+                children: potentiallyVisibleTags.map((tag, index) => renderTag(tag, index))
+              }
+            )
+          }
+        ),
+        hiddenTags.length > 0 && /* @__PURE__ */ jsx(
+          Popover,
+          {
+            content: /* @__PURE__ */ jsx("div", { className: tagContainer({ multiline: true }), children: hiddenTags.map((tag, index) => renderTag(tag, index)) }),
+            maxHeight: popoverMaxHeight,
+            onClose: () => setIsPopoverVisible(false),
+            placement: popoverPlacement,
+            size: "small",
+            title: popoverTitle,
+            visible: isPopoverVisible,
+            children: /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: tagsWrapper,
+                "data-testid": `${dataTestId ?? "taglist"}-open`,
+                onClick: () => setIsPopoverVisible(true),
+                onKeyDown: (event) => {
+                  if ([" ", "Enter"].includes(event.key)) {
+                    setIsPopoverVisible(true);
+                  }
+                },
+                ref: popoverTriggerRef,
+                tabIndex: 0,
+                children: [
+                  "+",
+                  hiddenTags.length
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   TagList

package/dist/components/Text/constants.d.ts

@@ -0,0 +1,9 @@
+import { typography } from '../../theme';
+export declare const PROMINENCES: {
+    default: string;
+    strong: string;
+    stronger: string;
+    weak: string;
+};
+export type TextVariant = keyof typeof typography;
+export declare const textVariants: TextVariant[];

package/dist/components/Text/index.d.ts

@@ -1,12 +1,9 @@
 import type { CSSProperties, ElementType, ReactNode } from 'react';
 import type { ExtendedColor } from '../../theme';
-import { typography } from '../../theme';
-import type { PROMINENCES } from './constant';
+import type { PROMINENCES, TextVariant } from './constants';
 type ProminenceProps = keyof typeof PROMINENCES;
 type PlacementProps = CSSProperties['textAlign'];
 type WhiteSpaceProps = CSSProperties['whiteSpace'];
-type TextVariant = keyof typeof typography;
-export declare const textVariants: TextVariant[];
 type TextProps = {
     className?: string;
     children: ReactNode;
@@ -31,5 +28,5 @@ type TextProps = {
 /**
  * Text component is used to display text with different variants and sentiments.
  */
-export declare const Text: ({ variant, children, as: Component, sentiment, oneLine, placement, prominence, className, disabled, italic, underline, strikeThrough, id, dir, whiteSpace, htmlFor, "data-testid": dataTestId, "aria-hidden": ariaHidden, style, }: TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Text: ({ variant, children, as: Component, sentiment, oneLine, placement, prominence, className, disabled, italic, underline, strikeThrough, id, dir, whiteSpace, htmlFor, "data-testid": dataTestId, "aria-hidden": ariaHidden, style, }: TextProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Text/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useRef } from "react";
 import recursivelyGetChildrenString from "../../helpers/recursivelyGetChildrenString.js";
@@ -31,22 +31,26 @@ const Text = ({
   const elementRef = useRef(null);
   const isOverflowing = useIsOverflowing(elementRef);
   const finalStringChildren = recursivelyGetChildrenString(children);
-  return /* @__PURE__ */ jsx(Tooltip, { text: oneLine && isOverflowing ? finalStringChildren : "", children: /* @__PURE__ */ jsx(Component, { "aria-hidden": ariaHidden, className: `${className ? `${className} ` : ""}${text({
-    disabled,
-    italic,
-    oneLine,
-    prominence,
-    sentiment,
-    strikeThrough,
-    underline,
-    variant
-  })}`, "data-testid": dataTestId, dir, htmlFor, id, ref: elementRef, style: {
-    ...assignInlineVars({
-      [placementText]: placement,
-      [whiteSpaceText]: whiteSpace
-    }),
-    ...style
-  }, children }) });
+  return /* @__PURE__ */ jsx(Tooltip, { text: oneLine && isOverflowing ? finalStringChildren : "", children: /* @__PURE__ */ jsx(
+    Component,
+    {
+      "aria-hidden": ariaHidden,
+      className: `${className ? `${className} ` : ""}${text({ disabled, italic, oneLine, prominence, sentiment, strikeThrough, underline, variant })}`,
+      "data-testid": dataTestId,
+      dir,
+      htmlFor,
+      id,
+      ref: elementRef,
+      style: {
+        ...assignInlineVars({
+          [placementText]: placement,
+          [whiteSpaceText]: whiteSpace
+        }),
+        ...style
+      },
+      children
+    }
+  ) });
 };
 export {
   Text

package/dist/components/TextArea/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { CloseIcon, CheckCircleIcon, AlertCircleIcon } from "@ultraviolet/icons";
 import { useTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -13,111 +13,186 @@ import { Text } from "../Text/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { textareaWrapper, textArea, paddingRightVar, textAreaClearableContainer } from "./styles.css.js";
 const STATE_ICON_SIZE = "small";
-const TextArea = forwardRef(({
-  id,
-  className,
-  tabIndex,
-  value,
-  onChange,
-  placeholder,
-  rows = 3,
-  maxRows,
-  disabled = false,
-  readOnly = false,
-  success,
-  error,
-  helper,
-  minLength,
-  maxLength,
-  tooltip,
-  label,
-  autoFocus,
-  required = false,
-  "data-testid": dataTestId,
-  name,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  clearable = false,
-  labelDescription,
-  "aria-label": ariaLabel,
-  style
-}, ref) => {
-  const localId = useId();
-  const theme = useTheme();
-  const textAreaRef = useRef(null);
-  useImperativeHandle(ref, () => textAreaRef.current);
-  useEffect(() => {
-    const textArea2 = textAreaRef.current;
-    const padding = theme.space["1.5"];
-    if (!textArea2) {
-      return;
-    }
-    const updateHeight = () => {
-      if (textArea2 && rows === "auto" && !maxRows) {
-        textArea2.style.height = "auto";
-        textArea2.style.resize = "none";
-        textArea2.style.height = `${textArea2.scrollHeight + 2}px`;
-      } else if (textArea2 && maxRows) {
-        const lineHeight = Number.parseFloat(getComputedStyle(textArea2).lineHeight);
-        textArea2.style.height = "auto";
-        const maxHeight = maxRows * lineHeight;
-        textArea2.style.height = `${textArea2.scrollHeight + 2}px`;
-        textArea2.style.maxHeight = `calc(${maxHeight}px + 2*${padding})`;
-        if (typeof rows === "number") {
-          const minHeight = rows * lineHeight;
-          textArea2.style.minHeight = `calc(${minHeight}px + 2*${padding})`;
+const TextArea = forwardRef(
+  ({
+    id,
+    className,
+    tabIndex,
+    value,
+    onChange,
+    placeholder,
+    rows = 3,
+    maxRows,
+    disabled = false,
+    readOnly = false,
+    success,
+    error,
+    helper,
+    minLength,
+    maxLength,
+    tooltip,
+    label,
+    autoFocus,
+    required = false,
+    "data-testid": dataTestId,
+    name,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    clearable = false,
+    labelDescription,
+    "aria-label": ariaLabel,
+    style
+  }, ref) => {
+    const localId = useId();
+    const theme = useTheme();
+    const textAreaRef = useRef(null);
+    useImperativeHandle(ref, () => textAreaRef.current);
+    useEffect(() => {
+      const textArea2 = textAreaRef.current;
+      const padding = theme.space["1.5"];
+      if (!textArea2) {
+        return;
+      }
+      const updateHeight = () => {
+        if (textArea2 && rows === "auto" && !maxRows) {
+          textArea2.style.height = "auto";
+          textArea2.style.resize = "none";
+          textArea2.style.height = `${textArea2.scrollHeight + 2}px`;
+        } else if (textArea2 && maxRows) {
+          const lineHeight = Number.parseFloat(
+            getComputedStyle(textArea2).lineHeight
+          );
+          textArea2.style.height = "auto";
+          const maxHeight = maxRows * lineHeight;
+          textArea2.style.height = `${textArea2.scrollHeight + 2}px`;
+          textArea2.style.maxHeight = `calc(${maxHeight}px + 2*${padding})`;
+          if (typeof rows === "number") {
+            const minHeight = rows * lineHeight;
+            textArea2.style.minHeight = `calc(${minHeight}px + 2*${padding})`;
+          }
         }
+      };
+      requestAnimationFrame(updateHeight);
+    }, [value, rows, theme, maxRows, textAreaRef.current?.value]);
+    const sentiment = useMemo(() => {
+      if (error) {
+        return "danger";
+      }
+      if (success) {
+        return "success";
       }
-    };
-    requestAnimationFrame(updateHeight);
-  }, [value, rows, theme, maxRows, textAreaRef.current?.value]);
-  const sentiment = useMemo(() => {
-    if (error) {
-      return "danger";
-    }
-    if (success) {
-      return "success";
-    }
-    return "neutral";
-  }, [error, success]);
-  const notice = success || error || helper;
-  const computedClearable = clearable && !!value;
-  return /* @__PURE__ */ jsxs(Stack, { className, gap: "0.5", children: [
-    label || labelDescription ? /* @__PURE__ */ jsx(Label, { htmlFor: id ?? localId, labelDescription, required, children: label }) : null,
-    /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("div", { className: textareaWrapper, children: [
-      /* @__PURE__ */ jsx("textarea", { "aria-invalid": !!error, "aria-label": ariaLabel, autoFocus, className: textArea({
-        error: !!error,
-        success: !!success
-      }), "data-testid": dataTestId, disabled, id: id ?? localId, maxLength, minLength, name, onBlur, onChange: (event) => {
-        onChange(event.currentTarget.value);
-      }, onFocus, onKeyDown, placeholder, readOnly: !!readOnly, ref: textAreaRef, rows: rows !== "auto" ? rows : 1, style: {
-        ...assignInlineVars({
-          [paddingRightVar]: `calc(${theme.space[computedClearable && (!!success || !!error) ? "4" : "3"]} + ${computedClearable ? `${SIZE_HEIGHT.xsmall}px` : "0px"} + ${!!success || !!error ? `${STATE_ICON_SIZE}px` : "0px"})`
-        }),
-        ...style
-      }, tabIndex, value }),
-      /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: textAreaClearableContainer, direction: "row", gap: "1", children: [
-        computedClearable ? /* @__PURE__ */ jsx(Button, { "aria-label": "clear value", onClick: () => {
-          onChange("");
-        }, sentiment: "neutral", size: "xsmall", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null,
-        success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success", size: STATE_ICON_SIZE }) : null,
-        error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null
-      ] })
-    ] }) }),
-    notice || maxLength ? /* @__PURE__ */ jsxs(Row, { gap: "1", templateColumns: "minmax(0, 1fr) min-content", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        error || success || typeof helper === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", disabled, prominence: !error && !success ? "weak" : "default", sentiment, variant: "caption", children: error || success || helper }) : null,
-        !error && !success && typeof helper !== "string" && helper ? helper : null
-      ] }),
-      maxLength ? /* @__PURE__ */ jsxs(Text, { as: "div", prominence: "weak", sentiment: "neutral", variant: "caption", children: [
-        value?.length ?? 0,
-        "/",
-        maxLength
+      return "neutral";
+    }, [error, success]);
+    const notice = success || error || helper;
+    const computedClearable = clearable && !!value;
+    return /* @__PURE__ */ jsxs(Stack, { className, gap: "0.5", children: [
+      label || labelDescription ? /* @__PURE__ */ jsx(
+        Label,
+        {
+          htmlFor: id ?? localId,
+          labelDescription,
+          required,
+          children: label
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("div", { className: textareaWrapper, children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            "aria-invalid": !!error,
+            "aria-label": ariaLabel,
+            autoFocus,
+            className: textArea({
+              error: !!error,
+              success: !!success
+            }),
+            "data-testid": dataTestId,
+            disabled,
+            id: id ?? localId,
+            maxLength,
+            minLength,
+            name,
+            onBlur,
+            onChange: (event) => {
+              onChange(event.currentTarget.value);
+            },
+            onFocus,
+            onKeyDown,
+            placeholder,
+            readOnly: !!readOnly,
+            ref: textAreaRef,
+            rows: rows !== "auto" ? rows : 1,
+            style: {
+              ...assignInlineVars({
+                [paddingRightVar]: `calc(${theme.space[computedClearable && (!!success || !!error) ? "4" : "3"]} + ${computedClearable ? `${SIZE_HEIGHT.xsmall}px` : "0px"} + ${!!success || !!error ? `${STATE_ICON_SIZE}px` : "0px"})`
+              }),
+              ...style
+            },
+            tabIndex,
+            value
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            alignItems: "center",
+            className: textAreaClearableContainer,
+            direction: "row",
+            gap: "1",
+            children: [
+              computedClearable ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": "clear value",
+                  onClick: () => {
+                    onChange("");
+                  },
+                  sentiment: "neutral",
+                  size: "xsmall",
+                  variant: "ghost",
+                  children: /* @__PURE__ */ jsx(CloseIcon, {})
+                }
+              ) : null,
+              success && !error ? /* @__PURE__ */ jsx(CheckCircleIcon, { sentiment: "success", size: STATE_ICON_SIZE }) : null,
+              error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null
+            ]
+          }
+        )
+      ] }) }),
+      notice || maxLength ? /* @__PURE__ */ jsxs(Row, { gap: "1", templateColumns: "minmax(0, 1fr) min-content", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          error || success || typeof helper === "string" ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "p",
+              disabled,
+              prominence: !error && !success ? "weak" : "default",
+              sentiment,
+              variant: "caption",
+              children: error || success || helper
+            }
+          ) : null,
+          !error && !success && typeof helper !== "string" && helper ? helper : null
+        ] }),
+        maxLength ? /* @__PURE__ */ jsxs(
+          Text,
+          {
+            as: "div",
+            prominence: "weak",
+            sentiment: "neutral",
+            variant: "caption",
+            children: [
+              value?.length ?? 0,
+              "/",
+              maxLength
+            ]
+          }
+        ) : null
       ] }) : null
-    ] }) : null
-  ] });
-});
+    ] });
+  }
+);
 export {
   TextArea
 };

package/dist/components/TextInput/index.d.ts

@@ -26,4 +26,4 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<{
     value?: string;
     defaultValue?: string;
     onChangeValue?: (value: string) => void;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "name" | "role" | "tabIndex" | "aria-atomic" | "aria-label" | "aria-labelledby" | "aria-live" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "autoComplete" | "autoFocus" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "autoComplete" | "role" | "autoFocus" | "tabIndex" | "aria-atomic" | "aria-label" | "aria-labelledby" | "aria-live" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "name" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;