@tinybigui/react 0.13.0 → 0.14.0

package/dist/index.js

@@ -2113,277 +2113,332 @@ var FAB = forwardRef(
   }
 );
 FAB.displayName = "FAB";
-var textFieldContainerVariants = cva(
+var textFieldRootVariants = cva(["relative inline-flex flex-col"], {
+  variants: {
+    fullWidth: {
+      true: "w-full",
+      false: "w-auto"
+    }
+  },
+  defaultVariants: {
+    fullWidth: false
+  }
+});
+var textFieldFieldVariants = cva(
   [
-    // Base container styles
-    "relative inline-flex flex-col"
+    "relative flex items-center w-full min-h-14",
+    // Cursor — disabled via group-data
+    "group-data-[disabled]/text-field:cursor-not-allowed",
+    "group-data-[disabled]/text-field:pointer-events-none"
   ],
   {
     variants: {
-      fullWidth: {
-        true: "w-full",
-        false: "w-auto"
+      variant: {
+        filled: [
+          "rounded-t-xs bg-surface-container-highest",
+          // Disabled: background fades to on-surface/4
+          "group-data-[disabled]/text-field:bg-on-surface/4"
+        ],
+        outlined: ["rounded-xs bg-transparent"]
       }
     },
     defaultVariants: {
-      fullWidth: false
+      variant: "filled"
     }
   }
 );
-var textFieldWrapperVariants = cva(
+var textFieldStateLayerVariants = cva([
+  "absolute inset-0 rounded-t-xs pointer-events-none opacity-0",
+  "bg-on-surface",
+  // Effects transition — no spatial overshoot on opacity
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/text-field:opacity-8",
+  // Focus: 10% (focus wins over hover via cascade order — placed after)
+  "group-data-[focused]/text-field:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/text-field:hidden"
+]);
+var textFieldActiveIndicatorVariants = cva([
+  "absolute bottom-0 left-0 right-0 pointer-events-none",
+  // Spatial transition: height is a spatial property
+  "transition-[height,background-color]",
+  "duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+  // Base
+  "h-px bg-on-surface-variant",
+  // Hover
+  "group-data-[hovered]/text-field:bg-on-surface",
+  // Focused — 2px + primary color (focused placed after hovered to win cascade)
+  "group-data-[focused]/text-field:h-0.5 group-data-[focused]/text-field:bg-primary",
+  // Invalid
+  "group-data-[invalid]/text-field:bg-error",
+  // Invalid + focused
+  "group-data-[invalid]/text-field:group-data-[focused]/text-field:bg-error",
+  // Disabled: hidden
+  "group-data-[disabled]/text-field:hidden"
+]);
+var textFieldOutlineVariants = cva([
+  "absolute inset-0 rounded-xs m-0 px-2 pointer-events-none",
+  "border border-outline",
+  // Effects transition for color; spatial for border-width
+  "transition-[border-color,border-width]",
+  "duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover
+  "group-data-[hovered]/text-field:border-on-surface",
+  // Focused — 2px + primary color
+  "group-data-[focused]/text-field:border-2 group-data-[focused]/text-field:border-primary",
+  // Invalid
+  "group-data-[invalid]/text-field:border-error",
+  // Invalid + focused
+  "group-data-[invalid]/text-field:group-data-[focused]/text-field:border-2",
+  "group-data-[invalid]/text-field:group-data-[focused]/text-field:border-error",
+  // Disabled
+  "group-data-[disabled]/text-field:border-on-surface/12"
+]);
+var textFieldNotchVariants = cva([
+  "invisible whitespace-nowrap text-body-small px-1",
+  // 0 width when not floating (no gap)
+  "max-w-0 overflow-hidden",
+  // Full width when floating (gap opens)
+  "group-data-[float]/text-field:max-w-full",
+  // Spatial transition for max-width change
+  "transition-[max-width] duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial"
+]);
+var textFieldLabelVariants = cva(
   [
-    // Base wrapper styles
-    "relative inline-flex items-center w-full",
-    "transition-all duration-200",
-    "rounded-t"
+    "absolute pointer-events-none origin-top-left select-none",
+    "text-body-large text-on-surface-variant",
+    // Spatial + effects both use standard fast — no overshoot on font/color
+    "transition-[transform,font-size,color,line-height]",
+    "duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38",
+    // Invalid (placed after default, before focused so focused invalid wins)
+    "group-data-[invalid]/text-field:text-error",
+    // Focused (singly-chained wins by cascade order)
+    "group-data-[focused]/text-field:text-primary",
+    // Invalid + focused — doubly-chained, wins over single-chained focused
+    "group-data-[invalid]/text-field:group-data-[focused]/text-field:text-error"
   ],
   {
     variants: {
       variant: {
-        filled: ["bg-surface-container-highest", "border-b-2 border-on-surface-variant"],
-        outlined: ["bg-transparent", "border border-outline", "rounded-b"]
-      },
-      size: {
-        small: "min-h-10",
-        medium: "min-h-12",
-        large: "min-h-14"
-      },
-      disabled: {
-        true: ["cursor-not-allowed", "opacity-38"],
-        false: ""
-      },
-      error: {
-        true: "",
-        false: ""
-      },
-      focused: {
-        true: "",
-        false: ""
+        /**
+         * Filled: label rests at center (top-1/2 -translate-y-1/2).
+         * When floating: moves up to top-2 (8dp) with body-small size.
+         */
+        filled: [
+          "top-1/2 -translate-y-1/2 left-4",
+          // Floated position — sits in the top 8dp zone
+          "group-data-[float]/text-field:top-2 group-data-[float]/text-field:-translate-y-0",
+          "group-data-[float]/text-field:text-body-small",
+          // Leading-icon offset
+          "group-data-[with-leading-icon]/text-field:left-[52px]"
+        ],
+        /**
+         * Outlined: label rests at center (top-1/2 -translate-y-1/2).
+         * When floating: moves up to sit on the top border (-translate-y-1/2 from top-0).
+         */
+        outlined: [
+          "top-1/2 -translate-y-1/2 left-3",
+          // bg-surface ensures label text punches through the border
+          "bg-surface px-1",
+          // Floated: sits on the top border
+          "group-data-[float]/text-field:top-0 group-data-[float]/text-field:-translate-y-1/2",
+          "group-data-[float]/text-field:text-body-small",
+          // Leading-icon offset
+          "group-data-[with-leading-icon]/text-field:left-[52px]"
+        ]
       }
     },
-    compoundVariants: [
-      // FILLED VARIANT - Focused state
-      {
-        variant: "filled",
-        focused: true,
-        error: false,
-        className: "border-primary"
-      },
-      // FILLED VARIANT - Error state
-      {
-        variant: "filled",
-        error: true,
-        className: "border-error"
-      },
-      // FILLED VARIANT - Hover state (handled via group-hover in parent)
-      {
-        variant: "filled",
-        disabled: false,
-        className: "hover:bg-on-surface/[0.08]"
-      },
-      // OUTLINED VARIANT - Focused state
-      {
-        variant: "outlined",
-        focused: true,
-        error: false,
-        className: "border-2 border-primary"
-      },
-      // OUTLINED VARIANT - Error state
-      {
-        variant: "outlined",
-        error: true,
-        className: "border-2 border-error"
-      },
-      // OUTLINED VARIANT - Hover state
-      {
-        variant: "outlined",
-        disabled: false,
-        className: "hover:border-on-surface"
-      }
-    ],
     defaultVariants: {
-      variant: "filled",
-      size: "medium",
-      disabled: false,
-      error: false,
-      focused: false
+      variant: "filled"
     }
   }
 );
 var textFieldInputVariants = cva(
   [
-    // Base input styles
-    "w-full bg-transparent outline-none",
-    "text-on-surface text-base",
-    "placeholder:text-on-surface-variant placeholder:opacity-60",
-    "transition-colors duration-200"
+    "relative z-10 w-full bg-transparent outline-none border-none",
+    "text-body-large text-on-surface",
+    "placeholder:text-on-surface-variant",
+    // Placeholder hidden unless field is floating (avoids overlap with label)
+    "placeholder:opacity-0",
+    "group-data-[float]/text-field:placeholder:opacity-100",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38",
+    "group-data-[disabled]/text-field:cursor-not-allowed",
+    // Readonly
+    "group-data-[readonly]/text-field:cursor-default",
+    // Effects transition for color
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
     variants: {
       variant: {
-        filled: "px-4",
-        outlined: "px-4"
-      },
-      size: {
-        small: "h-10 py-2 text-sm",
-        medium: "h-12 py-3 text-base",
-        large: "h-14 py-4 text-lg"
-      },
-      disabled: {
-        true: "cursor-not-allowed",
-        false: ""
-      },
-      hasLeadingIcon: {
-        true: "pl-12",
-        false: ""
-      },
-      hasTrailingIcon: {
-        true: "pr-12",
-        false: ""
+        /**
+         * Filled: top padding creates room for floating label (label rests at 8dp).
+         * Horizontal padding: 16dp left / 16dp right — but yielded to prefix/suffix
+         * when they are present so the affix handles the edge spacing instead.
+         */
+        filled: [
+          "pt-6 pb-2 px-4",
+          // No label present: vertically center
+          "group-data-[no-label]/text-field:py-4",
+          // Leading icon horizontal offset
+          "group-data-[with-leading-icon]/text-field:pl-[52px]",
+          // Trailing icon horizontal offset
+          "group-data-[with-trailing-icon]/text-field:pr-[52px]",
+          // Prefix present: prefix handles left edge — remove input's left padding
+          "group-data-[with-prefix]/text-field:pl-0",
+          // Leading icon + prefix together: compound wins over both singles
+          "group-data-[with-leading-icon]/text-field:group-data-[with-prefix]/text-field:pl-0",
+          // Suffix present: suffix handles right edge — remove input's right padding
+          "group-data-[with-suffix]/text-field:pr-0",
+          // Trailing icon + suffix together: compound wins over both singles
+          "group-data-[with-trailing-icon]/text-field:group-data-[with-suffix]/text-field:pr-0"
+        ],
+        /**
+         * Outlined: label sits on the border, no extra top padding needed.
+         * Horizontal padding: 16dp — yielded to prefix/suffix when present.
+         */
+        outlined: [
+          "py-4 px-4",
+          // Leading icon horizontal offset
+          "group-data-[with-leading-icon]/text-field:pl-[52px]",
+          // Trailing icon horizontal offset
+          "group-data-[with-trailing-icon]/text-field:pr-[52px]",
+          // Prefix present: prefix handles left edge
+          "group-data-[with-prefix]/text-field:pl-0",
+          "group-data-[with-leading-icon]/text-field:group-data-[with-prefix]/text-field:pl-0",
+          // Suffix present: suffix handles right edge
+          "group-data-[with-suffix]/text-field:pr-0",
+          "group-data-[with-trailing-icon]/text-field:group-data-[with-suffix]/text-field:pr-0"
+        ]
       },
       multiline: {
-        true: "resize-y",
-        false: ""
+        true: "resize-y min-h-[1.5rem]",
+        false: "h-full"
       }
     },
     defaultVariants: {
       variant: "filled",
-      size: "medium",
-      disabled: false,
-      hasLeadingIcon: false,
-      hasTrailingIcon: false,
       multiline: false
     }
   }
 );
-var textFieldLabelVariants = cva(
+var textFieldIconVariants = cva(
   [
-    // Base label styles
-    "absolute left-4 transition-all duration-200 pointer-events-none",
-    "text-on-surface-variant origin-top-left"
+    "absolute z-10 flex items-center justify-center size-6 pointer-events-none",
+    "text-on-surface-variant",
+    // Effects transition
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38"
   ],
   {
     variants: {
-      variant: {
-        filled: "top-2.5",
-        outlined: "top-2.5 bg-surface px-1"
-      },
-      size: {
-        small: "text-sm",
-        medium: "text-base",
-        large: "text-lg"
-      },
-      floating: {
-        true: "-translate-y-5 scale-75",
-        false: "scale-100"
-      },
-      focused: {
-        true: "text-primary",
-        false: ""
-      },
-      error: {
-        true: "text-error",
-        false: ""
-      },
-      disabled: {
-        true: "text-on-surface/38",
-        false: ""
-      },
-      hasLeadingIcon: {
-        true: "left-12",
-        false: ""
+      position: {
+        leading: "left-3",
+        trailing: [
+          "right-3",
+          // Trailing → error color when invalid
+          "group-data-[invalid]/text-field:text-error"
+        ]
       }
     },
-    compoundVariants: [
-      // Outlined variant floating label positioning
-      {
-        variant: "outlined",
-        floating: true,
-        className: "top-2.5"
-      }
-    ],
     defaultVariants: {
-      variant: "filled",
-      size: "medium",
-      floating: false,
-      focused: false,
-      error: false,
-      disabled: false,
-      hasLeadingIcon: false
+      position: "leading"
     }
   }
 );
-var textFieldIconVariants = cva(
+var textFieldAffixVariants = cva(
   [
-    // Base icon styles
-    "absolute flex items-center justify-center",
-    "text-on-surface-variant transition-colors duration-200",
-    "pointer-events-none"
+    "relative z-10 text-body-large text-on-surface-variant select-none shrink-0",
+    "opacity-0 pointer-events-none",
+    // Visible once label is floated
+    "group-data-[float]/text-field:opacity-100 group-data-[float]/text-field:pointer-events-auto",
+    // Effects transition
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38"
   ],
   {
     variants: {
-      position: {
-        leading: "left-3",
-        trailing: "right-3"
-      },
-      size: {
-        small: "w-5 h-5",
-        medium: "w-6 h-6",
-        large: "w-7 h-7"
+      variant: {
+        /**
+         * Filled: mirror the input's pt-6 pb-2 so the text sits in the same
+         * vertical zone. When no label is present, the input uses py-4 — match
+         * that too so the affix stays centred with the input text.
+         */
+        filled: [
+          "pt-6 pb-2",
+          "group-data-[no-label]/text-field:pt-4 group-data-[no-label]/text-field:pb-4"
+        ],
+        /**
+         * Outlined: input uses py-4 and h-full; items-center on the content
+         * column already centres the naturally-sized affix at the same 28px
+         * midpoint as the input text. No extra vertical padding needed.
+         */
+        outlined: []
       },
-      disabled: {
-        true: "opacity-38",
-        false: ""
+      position: {
+        /**
+         * Prefix: sits before the input in the flex row.
+         * pl-4 aligns the left text edge to the 16dp field margin.
+         * With a leading icon that shifts to 52dp to clear the icon.
+         * pr-0.5 is a small gap between prefix text and the input cursor.
+         */
+        prefix: ["pl-4", "group-data-[with-leading-icon]/text-field:pl-[52px]", "pr-0.5"],
+        /**
+         * Suffix: sits after the input in the flex row.
+         * pl-0.5 is a small gap between the input text and the suffix.
+         * pr-4 keeps 16dp from the right field edge.
+         * With a trailing icon that shifts to 52dp to avoid overlap.
+         */
+        suffix: ["pl-0.5", "pr-4", "group-data-[with-trailing-icon]/text-field:pr-[52px]"]
       }
     },
     defaultVariants: {
-      position: "leading",
-      size: "medium",
-      disabled: false
+      variant: "filled",
+      position: "prefix"
     }
   }
 );
-var textFieldHelperTextVariants = cva(
+var textFieldSupportingRowVariants = cva([
+  "flex items-start justify-between w-full gap-4 px-4 pt-1"
+]);
+var textFieldSupportingTextVariants = cva(
   [
-    // Base helper text styles
-    "text-xs mt-1 px-4 transition-colors duration-200"
+    "text-body-small",
+    // Effects transition for color
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
     variants: {
       type: {
         description: "text-on-surface-variant",
         error: "text-error"
-      },
-      disabled: {
-        true: "opacity-38",
-        false: ""
       }
     },
     defaultVariants: {
-      type: "description",
-      disabled: false
+      type: "description"
     }
   }
 );
-var textFieldCharacterCountVariants = cva(
+var textFieldCounterVariants = cva(
   [
-    // Base character counter styles
-    "text-xs mt-1 px-4 text-right text-on-surface-variant transition-colors duration-200"
+    "text-body-small shrink-0 text-right",
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
     variants: {
       exceeded: {
         true: "text-error",
-        false: ""
-      },
-      disabled: {
-        true: "opacity-38",
-        false: ""
+        false: "text-on-surface-variant"
       }
     },
     defaultVariants: {
-      exceeded: false,
-      disabled: false
+      exceeded: false
     }
   }
 );
@@ -2495,12 +2550,13 @@ TextFieldHeadless.displayName = "TextFieldHeadless";
 var TextField = forwardRef(
   ({
     variant = "filled",
-    size = "medium",
     label,
     description,
     errorMessage,
     leadingIcon,
     trailingIcon,
+    prefix,
+    suffix,
     characterCount = false,
     maxLength,
     fullWidth = false,
@@ -2520,6 +2576,7 @@ var TextField = forwardRef(
     ...props
   }, ref) => {
     const spellCheckProp = spellCheck === void 0 ? void 0 : typeof spellCheck === "string" ? spellCheck === "true" : spellCheck;
+    const { isHovered, hoverProps } = useHover({ isDisabled });
     const headlessProps = {
       ...label !== void 0 ? { label } : {},
       ...description !== void 0 ? { description } : {},
@@ -2546,149 +2603,131 @@ var TextField = forwardRef(
       errorMessageProps,
       isInvalid: fieldIsInvalid,
       isFocused,
+      isFocusVisible,
       currentValue,
       inputRef
     }) => {
       const hasValue = currentValue.length > 0;
-      const shouldFloatLabel = isFocused || hasValue;
+      const hasPlaceholder = !!props.placeholder;
+      const hasPrefix = !!prefix;
+      const hasSuffix = !!suffix;
+      const shouldFloat = isFocused || hasValue || hasPlaceholder || hasPrefix;
       const characterLength = currentValue.length;
       const isCharacterLimitExceeded = maxLength ? characterLength > maxLength : false;
-      return /* @__PURE__ */ jsxs("div", { className: cn(textFieldContainerVariants({ fullWidth }), className), children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              textFieldWrapperVariants({
-                variant,
-                size,
-                disabled: isDisabled,
-                error: fieldIsInvalid,
-                focused: isFocused
-              })
-            ),
-            children: [
+      const hasLeadingIcon = !!leadingIcon;
+      const hasTrailingIcon = !!trailingIcon;
+      const hasLabel = !!label;
+      const showDescription = !!description && !fieldIsInvalid;
+      const showError = fieldIsInvalid && !!errorMessage;
+      const showCounter = characterCount && maxLength !== void 0;
+      const showSupportingRow = showDescription || showError || showCounter;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(textFieldRootVariants({ fullWidth }), "group/text-field", className),
+          ...getInteractionDataAttributes({
+            isHovered,
+            isFocusVisible,
+            isDisabled,
+            isReadOnly,
+            isInvalid: fieldIsInvalid
+          }),
+          "data-focused": isFocused ? "" : void 0,
+          "data-float": shouldFloat ? "" : void 0,
+          "data-with-leading-icon": hasLeadingIcon ? "" : void 0,
+          "data-with-trailing-icon": hasTrailingIcon ? "" : void 0,
+          "data-with-prefix": hasPrefix ? "" : void 0,
+          "data-with-suffix": hasSuffix ? "" : void 0,
+          "data-no-label": !hasLabel ? "" : void 0,
+          "data-multiline": multiline ? "" : void 0,
+          children: [
+            /* @__PURE__ */ jsxs("div", { ...hoverProps, className: cn(textFieldFieldVariants({ variant })), children: [
+              variant === "filled" && /* @__PURE__ */ jsx("span", { className: cn(textFieldStateLayerVariants()), "aria-hidden": "true" }),
               leadingIcon && /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: textFieldIconVariants({
-                    position: "leading",
-                    size,
-                    disabled: isDisabled
-                  }),
+                  className: cn(textFieldIconVariants({ position: "leading" })),
+                  "aria-hidden": "true",
                   children: leadingIcon
                 }
               ),
-              label && /* @__PURE__ */ jsxs(
-                "label",
+              /* @__PURE__ */ jsxs("div", { className: "relative flex h-full min-w-0 flex-1 items-center", children: [
+                label && /* @__PURE__ */ jsxs("label", { ...labelProps, className: cn(textFieldLabelVariants({ variant })), children: [
+                  label,
+                  isRequired && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2009*" })
+                ] }),
+                prefix && /* @__PURE__ */ jsx("span", { className: cn(textFieldAffixVariants({ variant, position: "prefix" })), children: prefix }),
+                multiline ? /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    ...inputProps,
+                    ref: inputRef,
+                    className: cn(textFieldInputVariants({ variant, multiline: true })),
+                    rows,
+                    spellCheck: spellCheckProp
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...inputProps,
+                    ref: inputRef,
+                    className: cn(textFieldInputVariants({ variant, multiline: false })),
+                    spellCheck: spellCheckProp
+                  }
+                ),
+                suffix && /* @__PURE__ */ jsx("span", { className: cn(textFieldAffixVariants({ variant, position: "suffix" })), children: suffix })
+              ] }),
+              trailingIcon && /* @__PURE__ */ jsx(
+                "span",
                 {
-                  ...labelProps,
-                  className: cn(
-                    textFieldLabelVariants({
-                      variant,
-                      size,
-                      floating: shouldFloatLabel,
-                      focused: isFocused,
-                      error: fieldIsInvalid,
-                      disabled: isDisabled,
-                      hasLeadingIcon: !!leadingIcon
-                    })
-                  ),
-                  children: [
-                    label,
-                    isRequired && " *"
-                  ]
+                  className: cn(textFieldIconVariants({ position: "trailing" })),
+                  "aria-hidden": "true",
+                  children: trailingIcon
                 }
               ),
-              multiline ? /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  ...inputProps,
-                  ref: inputRef,
-                  className: cn(
-                    textFieldInputVariants({
-                      variant,
-                      size,
-                      disabled: isDisabled,
-                      hasLeadingIcon: !!leadingIcon,
-                      hasTrailingIcon: !!trailingIcon,
-                      multiline: true
-                    }),
-                    label && "placeholder:opacity-0"
-                  ),
-                  rows,
-                  spellCheck: spellCheckProp
-                }
-              ) : /* @__PURE__ */ jsx(
-                "input",
+              variant === "filled" && /* @__PURE__ */ jsx("span", { className: cn(textFieldActiveIndicatorVariants()), "aria-hidden": "true" }),
+              variant === "outlined" && /* @__PURE__ */ jsx("fieldset", { "aria-hidden": "true", className: cn(textFieldOutlineVariants()), children: /* @__PURE__ */ jsx("legend", { className: cn(textFieldNotchVariants()), children: label && /* @__PURE__ */ jsxs("span", { children: [
+                label,
+                isRequired && "\u2009*"
+              ] }) }) })
+            ] }),
+            showSupportingRow && /* @__PURE__ */ jsxs("div", { className: cn(textFieldSupportingRowVariants()), children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                showDescription && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    ...descriptionProps,
+                    className: cn(textFieldSupportingTextVariants({ type: "description" })),
+                    children: description
+                  }
+                ),
+                showError && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    ...errorMessageProps,
+                    className: cn(textFieldSupportingTextVariants({ type: "error" })),
+                    children: errorMessage
+                  }
+                )
+              ] }),
+              showCounter && /* @__PURE__ */ jsxs(
+                "span",
                 {
-                  ...inputProps,
-                  ref: inputRef,
                   className: cn(
-                    textFieldInputVariants({
-                      variant,
-                      size,
-                      disabled: isDisabled,
-                      hasLeadingIcon: !!leadingIcon,
-                      hasTrailingIcon: !!trailingIcon,
-                      multiline: false
-                    }),
-                    label && "placeholder:opacity-0"
-                    // Hide placeholder when there's a value to prevent overlap with floating label
+                    textFieldCounterVariants({ exceeded: isCharacterLimitExceeded })
                   ),
-                  spellCheck: spellCheckProp
-                }
-              ),
-              trailingIcon && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: textFieldIconVariants({
-                    position: "trailing",
-                    size,
-                    disabled: isDisabled
-                  }),
-                  children: trailingIcon
+                  "aria-live": "polite",
+                  children: [
+                    characterLength,
+                    "\u2009/\u2009",
+                    maxLength
+                  ]
                 }
               )
-            ]
-          }
-        ),
-        description && !fieldIsInvalid && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...descriptionProps,
-            className: textFieldHelperTextVariants({
-              type: "description",
-              disabled: isDisabled
-            }),
-            children: description
-          }
-        ),
-        fieldIsInvalid && errorMessage && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...errorMessageProps,
-            className: textFieldHelperTextVariants({
-              type: "error",
-              disabled: isDisabled
-            }),
-            children: errorMessage
-          }
-        ),
-        characterCount && maxLength && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: textFieldCharacterCountVariants({
-              exceeded: isCharacterLimitExceeded,
-              disabled: isDisabled
-            }),
-            children: [
-              characterLength,
-              " / ",
-              maxLength
-            ]
-          }
-        )
-      ] });
+            ] })
+          ]
+        }
+      );
     } });
   }
 );