@atlaskit/form 14.3.2 → 14.4.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/form
 
+## 14.4.0
+
+### Minor Changes
+
+- [`c19181795ec37`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c19181795ec37) -
+  Introduces `CharacterCounterField`, a new field component that provides automatic character count
+  validation and display. This component wraps the standard `Field` with built-in support for
+  minimum and maximum character limits, displaying a real-time character counter to users.
+
+  **Key features:**
+  - Automatic validation for `minCharacters` and `maxCharacters` limits
+  - Integrated character counter display with error states
+  - Customizable messaging for character limit violations via `overMaximumMessage`,
+    `underMaximumMessage`, and `underMinimumMessage` props
+  - Seamless integration with existing Field validation through the `validate` prop
+  - Full accessibility support with proper ARIA announcements for screen readers
+  - Supports both `TextField` and `TextArea` components via render prop pattern
+
+  **Example usage:**
+
+  ```javascript
+  <CharacterCounterField
+  	name="description"
+  	label="Description"
+  	maxCharacters={200}
+  	minCharacters={10}
+  	helperMessage="Provide a brief description"
+  >
+  	{({ fieldProps }) => <TextArea {...fieldProps} />}
+  </CharacterCounterField>
+  ```
+
+  This component simplifies the implementation of character-limited inputs by combining validation,
+  error handling, and counter display in a single, accessible component.
+
 ## 14.3.2
 
 ### Patch Changes

package/dist/cjs/character-counter-field.compiled.css

@@ -0,0 +1,3 @@
+._14uxze3t label[id$=-label]{margin-block-end:var(--ds-space-0,0)}
+._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
+._6ul5ze3t [id$=-helper]{margin-block-start:var(--ds-space-0,0)}

package/dist/cjs/character-counter-field.js

@@ -0,0 +1,142 @@
+/* character-counter-field.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CharacterCounterField;
+require("./character-counter-field.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _characterCounter = require("./character-counter");
+var _field = _interopRequireDefault(require("./field"));
+var _messages = require("./messages");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Override label specific margin block end to fix double spacing issue
+var fieldWrapperStyles = {
+  root: "_14uxze3t"
+};
+
+// Override helper message margins to fix inconsistent spacing issue
+var helperMessageWrapperStyles = {
+  root: "_6rth1b66 _6ul5ze3t"
+};
+/**
+ * __Character Counter Field__
+ *
+ * A field component that wraps the standard Field with automatic character count validation.
+ * Validates minimum and maximum character limits and displays a character counter.
+ */
+function CharacterCounterField(_ref) {
+  var maxCharacters = _ref.maxCharacters,
+    minCharacters = _ref.minCharacters,
+    children = _ref.children,
+    userValidate = _ref.validate,
+    overMaximumMessage = _ref.overMaximumMessage,
+    underMaximumMessage = _ref.underMaximumMessage,
+    underMinimumMessage = _ref.underMinimumMessage,
+    helperMessage = _ref.helperMessage,
+    defaultValue = _ref.defaultValue,
+    id = _ref.id,
+    isRequired = _ref.isRequired,
+    isDisabled = _ref.isDisabled,
+    label = _ref.label,
+    elementAfterLabel = _ref.elementAfterLabel,
+    name = _ref.name,
+    testId = _ref.testId;
+  // Default validation function for character limits
+  // __TOO_SHORT__ and __TOO_LONG__ are default error codes recognised by the CharacterCounter component
+  var validateCharacterCount = function validateCharacterCount(value) {
+    var stringValue = String(value || '');
+    var length = stringValue.length;
+
+    // Check minimum length
+    if (minCharacters !== undefined && length < minCharacters) {
+      return '__TOO_SHORT__';
+    }
+
+    // Check maximum length
+    if (maxCharacters !== undefined && length > maxCharacters) {
+      return '__TOO_LONG__';
+    }
+    return undefined;
+  };
+
+  // Combine user validation and character validation
+  // Any user defined validation takes priority over character validation
+  // If there is no user defined validation for character limits e.g. used maxLength prior to CharacterCounterField,
+  // use the default error codes and display the appropriate error message
+  var combinedValidate = function combinedValidate(value, formState, fieldState) {
+    // First run character validation
+    var characterError = validateCharacterCount(value);
+
+    // Then run user's custom validation if provided
+    var userError = userValidate === null || userValidate === void 0 ? void 0 : userValidate(value, formState, fieldState);
+
+    // If user validation returns a promise, handle it
+    if (userError instanceof Promise) {
+      return userError.then(function (error) {
+        // User error takes priority over character validation
+        return error || characterError;
+      });
+    }
+
+    // User error takes priority over character validation
+    return userError || characterError;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([fieldWrapperStyles.root])
+  }, /*#__PURE__*/React.createElement(_field.default, {
+    defaultValue: defaultValue,
+    id: id,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    label: label,
+    elementAfterLabel: elementAfterLabel,
+    name: name,
+    testId: testId,
+    validate: combinedValidate
+  }, function (_ref2) {
+    var extendedFieldProps = _ref2.fieldProps,
+      error = _ref2.error,
+      valid = _ref2.valid,
+      meta = _ref2.meta;
+    // Determine if error is a character count violation (handled by CharacterCounter)
+    // or an external validation error (needs ErrorMessage)
+    var isCharacterCountViolation = error === '__TOO_SHORT__' || error === '__TOO_LONG__';
+    var showExternalError = error && !isCharacterCountViolation;
+    var showCharacterCounter = (maxCharacters !== undefined || minCharacters !== undefined) && !showExternalError;
+
+    // Extend aria-describedby to reference the appropriate message component
+    var fieldPropsWithCounter = _objectSpread(_objectSpread({}, extendedFieldProps), {}, {
+      'aria-describedby': showCharacterCounter ? "".concat(extendedFieldProps['aria-describedby'], " ").concat(extendedFieldProps.id, "-character-counter").trim() : extendedFieldProps['aria-describedby']
+    });
+    return /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_messages.MessageWrapper, null, helperMessage && /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)([helperMessageWrapperStyles.root])
+    }, /*#__PURE__*/React.createElement(_messages.HelperMessage, {
+      testId: "".concat(testId, "-helper")
+    }, helperMessage))), children({
+      fieldProps: fieldPropsWithCounter,
+      error: error,
+      valid: valid,
+      meta: meta
+    }), /*#__PURE__*/React.createElement(_messages.MessageWrapper, null, showExternalError && /*#__PURE__*/React.createElement(_messages.ErrorMessage, {
+      testId: "".concat(testId, "-error")
+    }, error)), showCharacterCounter && /*#__PURE__*/React.createElement(_characterCounter.CharacterCounter, {
+      maxCharacters: maxCharacters,
+      minCharacters: minCharacters,
+      currentValue: String(extendedFieldProps.value || ''),
+      shouldShowAsError: isCharacterCountViolation,
+      overMaximumMessage: overMaximumMessage,
+      underMaximumMessage: underMaximumMessage,
+      underMinimumMessage: underMinimumMessage,
+      testId: "".concat(testId, "-character-counter")
+    }));
+  }));
+}

package/dist/cjs/character-counter.compiled.css

@@ -0,0 +1,8 @@
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._1bah1q9y{justify-content:baseline}
+._1e0c1txw{display:flex}
+._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}
+._syaze6sf{color:var(--ds-text-danger,#ae2a19)}

package/dist/cjs/character-counter.js

@@ -0,0 +1,130 @@
+/* character-counter.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CharacterCounter = void 0;
+require("./character-counter.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _statusErrorError = _interopRequireDefault(require("@atlaskit/icon/core/migration/status-error--error"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _fieldIdContext = require("./field-id-context");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// Extracted styles for character counter message container
+var messageContainerStyles = null;
+
+// Extracted styles for error icon wrapper
+var errorIconWrapperStyles = null;
+
+// Error icon with wrapper for character count violations
+var ErrorIconWithWrapper = function ErrorIconWithWrapper() {
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_1e0c1txw _4t3i7vkz _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(_statusErrorError.default, {
+    LEGACY_margin: "0 -2px 0 0",
+    LEGACY_size: "small",
+    label: "error",
+    size: "small"
+  }));
+};
+// Helper to pluralise "character(s)"
+var pluralize = function pluralize(count) {
+  return "character".concat(count !== 1 ? 's' : '');
+};
+
+/**
+ * __Character Counter__
+ *
+ * A character counter component that displays remaining characters for text input.
+ * Displays messages for over or under the maximum or minimum character limits.
+ */
+var CharacterCounter = exports.CharacterCounter = function CharacterCounter(_ref) {
+  var maxCharacters = _ref.maxCharacters,
+    minCharacters = _ref.minCharacters,
+    currentValue = _ref.currentValue,
+    overMaximumMessage = _ref.overMaximumMessage,
+    underMaximumMessage = _ref.underMaximumMessage,
+    underMinimumMessage = _ref.underMinimumMessage,
+    _ref$shouldShowAsErro = _ref.shouldShowAsError,
+    shouldShowAsError = _ref$shouldShowAsErro === void 0 ? true : _ref$shouldShowAsErro,
+    inputId = _ref.inputId,
+    testId = _ref.testId;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    announcementText = _useState2[0],
+    setAnnouncementText = _useState2[1];
+  var debounceTimeoutRef = (0, _react.useRef)(null);
+
+  // Resolve the field ID from context (form use) or inputId prop (standalone use)
+  var contextFieldId = (0, _react.useContext)(_fieldIdContext.FieldId);
+  var resolvedFieldId = contextFieldId || inputId;
+  var currentLength = (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) || 0;
+
+  // Check if character count violates limits
+  var isTooShort = minCharacters !== undefined && currentLength < minCharacters;
+  var isTooLong = maxCharacters !== undefined && currentLength > maxCharacters;
+
+  // Determine what to display based on the current value, the maximum and minimum character limits, and any custom messages
+  var getMessage = function getMessage() {
+    // Below minimum so show custom message or default
+    if (isTooShort) {
+      var needed = minCharacters - currentLength;
+      return underMinimumMessage || "".concat(needed, " more ").concat(pluralize(needed), " needed");
+    }
+
+    // Over maximum so show custom message or default
+    if (isTooLong) {
+      var over = currentLength - maxCharacters;
+      return overMaximumMessage || "".concat(over, " ").concat(pluralize(over), " too many");
+    }
+
+    // Within limits - show remaining count (if max is defined)
+    if (maxCharacters) {
+      var remaining = maxCharacters - currentLength;
+      return underMaximumMessage || "".concat(remaining, " ").concat(pluralize(remaining), " remaining");
+    }
+
+    // No message to show (min only limit satisfied)
+    return null;
+  };
+  var displayText = getMessage();
+
+  // Determine if the current character count violates limits
+  var displayAsError = (isTooShort || isTooLong) && shouldShowAsError;
+
+  // Debounce screen reader announcements so that it only reads the message when it input has settled
+  (0, _react.useEffect)(function () {
+    // Debounce by 1 second to avoid announcing every keystroke
+    debounceTimeoutRef.current = setTimeout(function () {
+      setAnnouncementText(displayText || '');
+    }, 1000);
+
+    // Cleanup function clears the timeout when displayText changes or component unmounts
+    return function () {
+      clearTimeout(debounceTimeoutRef.current);
+    };
+  }, [displayText]);
+
+  // Don't render if there's no message to display (min only limit satisfied)
+  if (!displayText) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _syaze6sf _1pfh1b66"])
+  }, displayAsError && /*#__PURE__*/React.createElement(ErrorIconWithWrapper, null), /*#__PURE__*/React.createElement(_compiled.Text, {
+    color: displayAsError ? 'color.text.danger' : 'color.text.subtlest',
+    size: "small",
+    id: resolvedFieldId ? "".concat(resolvedFieldId, "-character-counter") : undefined
+  }, displayText)), /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement("div", {
+    "aria-live": "polite"
+  }, announcementText)));
+};

package/dist/cjs/index.js

@@ -4,6 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "CharacterCounterField", {
+  enumerable: true,
+  get: function get() {
+    return _characterCounterField.default;
+  }
+});
 Object.defineProperty(exports, "CheckboxField", {
   enumerable: true,
   get: function get() {
@@ -111,4 +117,5 @@ var _label = require("./label");
 var _messages = require("./messages");
 var _fieldset = _interopRequireDefault(require("./fieldset"));
 var _requiredAsterisk = _interopRequireDefault(require("./required-asterisk"));
-var _useFormState = require("./use-form-state");
+var _useFormState = require("./use-form-state");
+var _characterCounterField = _interopRequireDefault(require("./character-counter-field"));

package/dist/es2019/character-counter-field.compiled.css

@@ -0,0 +1,3 @@
+._14uxze3t label[id$=-label]{margin-block-end:var(--ds-space-0,0)}
+._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
+._6ul5ze3t [id$=-helper]{margin-block-start:var(--ds-space-0,0)}

package/dist/es2019/character-counter-field.js

@@ -0,0 +1,133 @@
+/* character-counter-field.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./character-counter-field.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment } from 'react';
+import { CharacterCounter } from './character-counter';
+import Field from './field';
+import { ErrorMessage, HelperMessage, MessageWrapper } from './messages';
+// Override label specific margin block end to fix double spacing issue
+const fieldWrapperStyles = {
+  root: "_14uxze3t"
+};
+
+// Override helper message margins to fix inconsistent spacing issue
+const helperMessageWrapperStyles = {
+  root: "_6rth1b66 _6ul5ze3t"
+};
+/**
+ * __Character Counter Field__
+ *
+ * A field component that wraps the standard Field with automatic character count validation.
+ * Validates minimum and maximum character limits and displays a character counter.
+ */
+export default function CharacterCounterField({
+  maxCharacters,
+  minCharacters,
+  children,
+  validate: userValidate,
+  overMaximumMessage,
+  underMaximumMessage,
+  underMinimumMessage,
+  helperMessage,
+  defaultValue,
+  id,
+  isRequired,
+  isDisabled,
+  label,
+  elementAfterLabel,
+  name,
+  testId
+}) {
+  // Default validation function for character limits
+  // __TOO_SHORT__ and __TOO_LONG__ are default error codes recognised by the CharacterCounter component
+  const validateCharacterCount = value => {
+    const stringValue = String(value || '');
+    const length = stringValue.length;
+
+    // Check minimum length
+    if (minCharacters !== undefined && length < minCharacters) {
+      return '__TOO_SHORT__';
+    }
+
+    // Check maximum length
+    if (maxCharacters !== undefined && length > maxCharacters) {
+      return '__TOO_LONG__';
+    }
+    return undefined;
+  };
+
+  // Combine user validation and character validation
+  // Any user defined validation takes priority over character validation
+  // If there is no user defined validation for character limits e.g. used maxLength prior to CharacterCounterField,
+  // use the default error codes and display the appropriate error message
+  const combinedValidate = (value, formState, fieldState) => {
+    // First run character validation
+    const characterError = validateCharacterCount(value);
+
+    // Then run user's custom validation if provided
+    const userError = userValidate === null || userValidate === void 0 ? void 0 : userValidate(value, formState, fieldState);
+
+    // If user validation returns a promise, handle it
+    if (userError instanceof Promise) {
+      return userError.then(error => {
+        // User error takes priority over character validation
+        return error || characterError;
+      });
+    }
+
+    // User error takes priority over character validation
+    return userError || characterError;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([fieldWrapperStyles.root])
+  }, /*#__PURE__*/React.createElement(Field, {
+    defaultValue: defaultValue,
+    id: id,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    label: label,
+    elementAfterLabel: elementAfterLabel,
+    name: name,
+    testId: testId,
+    validate: combinedValidate
+  }, ({
+    fieldProps: extendedFieldProps,
+    error,
+    valid,
+    meta
+  }) => {
+    // Determine if error is a character count violation (handled by CharacterCounter)
+    // or an external validation error (needs ErrorMessage)
+    const isCharacterCountViolation = error === '__TOO_SHORT__' || error === '__TOO_LONG__';
+    const showExternalError = error && !isCharacterCountViolation;
+    const showCharacterCounter = (maxCharacters !== undefined || minCharacters !== undefined) && !showExternalError;
+
+    // Extend aria-describedby to reference the appropriate message component
+    const fieldPropsWithCounter = {
+      ...extendedFieldProps,
+      'aria-describedby': showCharacterCounter ? `${extendedFieldProps['aria-describedby']} ${extendedFieldProps.id}-character-counter`.trim() : extendedFieldProps['aria-describedby']
+    };
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageWrapper, null, helperMessage && /*#__PURE__*/React.createElement("div", {
+      className: ax([helperMessageWrapperStyles.root])
+    }, /*#__PURE__*/React.createElement(HelperMessage, {
+      testId: `${testId}-helper`
+    }, helperMessage))), children({
+      fieldProps: fieldPropsWithCounter,
+      error,
+      valid,
+      meta
+    }), /*#__PURE__*/React.createElement(MessageWrapper, null, showExternalError && /*#__PURE__*/React.createElement(ErrorMessage, {
+      testId: `${testId}-error`
+    }, error)), showCharacterCounter && /*#__PURE__*/React.createElement(CharacterCounter, {
+      maxCharacters: maxCharacters,
+      minCharacters: minCharacters,
+      currentValue: String(extendedFieldProps.value || ''),
+      shouldShowAsError: isCharacterCountViolation,
+      overMaximumMessage: overMaximumMessage,
+      underMaximumMessage: underMaximumMessage,
+      underMinimumMessage: underMinimumMessage,
+      testId: `${testId}-character-counter`
+    }));
+  }));
+}

package/dist/es2019/character-counter.compiled.css

@@ -0,0 +1,8 @@
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._1bah1q9y{justify-content:baseline}
+._1e0c1txw{display:flex}
+._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}
+._syaze6sf{color:var(--ds-text-danger,#ae2a19)}

package/dist/es2019/character-counter.js

@@ -0,0 +1,114 @@
+/* character-counter.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./character-counter.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
+import ErrorIcon from '@atlaskit/icon/core/migration/status-error--error';
+import { Text } from '@atlaskit/primitives/compiled';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { FieldId } from './field-id-context';
+
+// Extracted styles for character counter message container
+const messageContainerStyles = null;
+
+// Extracted styles for error icon wrapper
+const errorIconWrapperStyles = null;
+
+// Error icon with wrapper for character count violations
+const ErrorIconWithWrapper = () => /*#__PURE__*/React.createElement("span", {
+  className: ax(["_1e0c1txw _4t3i7vkz _4cvr1h6o"])
+}, /*#__PURE__*/React.createElement(ErrorIcon, {
+  LEGACY_margin: "0 -2px 0 0",
+  LEGACY_size: "small",
+  label: "error",
+  size: "small"
+}));
+// Helper to pluralise "character(s)"
+const pluralize = count => `character${count !== 1 ? 's' : ''}`;
+
+/**
+ * __Character Counter__
+ *
+ * A character counter component that displays remaining characters for text input.
+ * Displays messages for over or under the maximum or minimum character limits.
+ */
+export const CharacterCounter = ({
+  maxCharacters,
+  minCharacters,
+  currentValue,
+  overMaximumMessage,
+  underMaximumMessage,
+  underMinimumMessage,
+  shouldShowAsError = true,
+  inputId,
+  testId
+}) => {
+  const [announcementText, setAnnouncementText] = useState('');
+  const debounceTimeoutRef = useRef(null);
+
+  // Resolve the field ID from context (form use) or inputId prop (standalone use)
+  const contextFieldId = useContext(FieldId);
+  const resolvedFieldId = contextFieldId || inputId;
+  const currentLength = (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) || 0;
+
+  // Check if character count violates limits
+  const isTooShort = minCharacters !== undefined && currentLength < minCharacters;
+  const isTooLong = maxCharacters !== undefined && currentLength > maxCharacters;
+
+  // Determine what to display based on the current value, the maximum and minimum character limits, and any custom messages
+  const getMessage = () => {
+    // Below minimum so show custom message or default
+    if (isTooShort) {
+      const needed = minCharacters - currentLength;
+      return underMinimumMessage || `${needed} more ${pluralize(needed)} needed`;
+    }
+
+    // Over maximum so show custom message or default
+    if (isTooLong) {
+      const over = currentLength - maxCharacters;
+      return overMaximumMessage || `${over} ${pluralize(over)} too many`;
+    }
+
+    // Within limits - show remaining count (if max is defined)
+    if (maxCharacters) {
+      const remaining = maxCharacters - currentLength;
+      return underMaximumMessage || `${remaining} ${pluralize(remaining)} remaining`;
+    }
+
+    // No message to show (min only limit satisfied)
+    return null;
+  };
+  const displayText = getMessage();
+
+  // Determine if the current character count violates limits
+  const displayAsError = (isTooShort || isTooLong) && shouldShowAsError;
+
+  // Debounce screen reader announcements so that it only reads the message when it input has settled
+  useEffect(() => {
+    // Debounce by 1 second to avoid announcing every keystroke
+    debounceTimeoutRef.current = setTimeout(() => {
+      setAnnouncementText(displayText || '');
+    }, 1000);
+
+    // Cleanup function clears the timeout when displayText changes or component unmounts
+    return () => {
+      clearTimeout(debounceTimeoutRef.current);
+    };
+  }, [displayText]);
+
+  // Don't render if there's no message to display (min only limit satisfied)
+  if (!displayText) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _syaze6sf _1pfh1b66"])
+  }, displayAsError && /*#__PURE__*/React.createElement(ErrorIconWithWrapper, null), /*#__PURE__*/React.createElement(Text, {
+    color: displayAsError ? 'color.text.danger' : 'color.text.subtlest',
+    size: "small",
+    id: resolvedFieldId ? `${resolvedFieldId}-character-counter` : undefined
+  }, displayText)), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("div", {
+    "aria-live": "polite"
+  }, announcementText)));
+};

package/dist/es2019/index.js

@@ -9,4 +9,5 @@ export { Label, Legend } from './label';
 export { HelperMessage, ErrorMessage, MessageWrapper, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset';
 export { default as RequiredAsterisk } from './required-asterisk';
-export { useFormState } from './use-form-state';
+export { useFormState } from './use-form-state';
+export { default as CharacterCounterField } from './character-counter-field';

package/dist/esm/character-counter-field.compiled.css

@@ -0,0 +1,3 @@
+._14uxze3t label[id$=-label]{margin-block-end:var(--ds-space-0,0)}
+._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
+._6ul5ze3t [id$=-helper]{margin-block-start:var(--ds-space-0,0)}

package/dist/esm/character-counter-field.js

@@ -0,0 +1,133 @@
+/* character-counter-field.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./character-counter-field.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Fragment } from 'react';
+import { CharacterCounter } from './character-counter';
+import Field from './field';
+import { ErrorMessage, HelperMessage, MessageWrapper } from './messages';
+// Override label specific margin block end to fix double spacing issue
+var fieldWrapperStyles = {
+  root: "_14uxze3t"
+};
+
+// Override helper message margins to fix inconsistent spacing issue
+var helperMessageWrapperStyles = {
+  root: "_6rth1b66 _6ul5ze3t"
+};
+/**
+ * __Character Counter Field__
+ *
+ * A field component that wraps the standard Field with automatic character count validation.
+ * Validates minimum and maximum character limits and displays a character counter.
+ */
+export default function CharacterCounterField(_ref) {
+  var maxCharacters = _ref.maxCharacters,
+    minCharacters = _ref.minCharacters,
+    children = _ref.children,
+    userValidate = _ref.validate,
+    overMaximumMessage = _ref.overMaximumMessage,
+    underMaximumMessage = _ref.underMaximumMessage,
+    underMinimumMessage = _ref.underMinimumMessage,
+    helperMessage = _ref.helperMessage,
+    defaultValue = _ref.defaultValue,
+    id = _ref.id,
+    isRequired = _ref.isRequired,
+    isDisabled = _ref.isDisabled,
+    label = _ref.label,
+    elementAfterLabel = _ref.elementAfterLabel,
+    name = _ref.name,
+    testId = _ref.testId;
+  // Default validation function for character limits
+  // __TOO_SHORT__ and __TOO_LONG__ are default error codes recognised by the CharacterCounter component
+  var validateCharacterCount = function validateCharacterCount(value) {
+    var stringValue = String(value || '');
+    var length = stringValue.length;
+
+    // Check minimum length
+    if (minCharacters !== undefined && length < minCharacters) {
+      return '__TOO_SHORT__';
+    }
+
+    // Check maximum length
+    if (maxCharacters !== undefined && length > maxCharacters) {
+      return '__TOO_LONG__';
+    }
+    return undefined;
+  };
+
+  // Combine user validation and character validation
+  // Any user defined validation takes priority over character validation
+  // If there is no user defined validation for character limits e.g. used maxLength prior to CharacterCounterField,
+  // use the default error codes and display the appropriate error message
+  var combinedValidate = function combinedValidate(value, formState, fieldState) {
+    // First run character validation
+    var characterError = validateCharacterCount(value);
+
+    // Then run user's custom validation if provided
+    var userError = userValidate === null || userValidate === void 0 ? void 0 : userValidate(value, formState, fieldState);
+
+    // If user validation returns a promise, handle it
+    if (userError instanceof Promise) {
+      return userError.then(function (error) {
+        // User error takes priority over character validation
+        return error || characterError;
+      });
+    }
+
+    // User error takes priority over character validation
+    return userError || characterError;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([fieldWrapperStyles.root])
+  }, /*#__PURE__*/React.createElement(Field, {
+    defaultValue: defaultValue,
+    id: id,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    label: label,
+    elementAfterLabel: elementAfterLabel,
+    name: name,
+    testId: testId,
+    validate: combinedValidate
+  }, function (_ref2) {
+    var extendedFieldProps = _ref2.fieldProps,
+      error = _ref2.error,
+      valid = _ref2.valid,
+      meta = _ref2.meta;
+    // Determine if error is a character count violation (handled by CharacterCounter)
+    // or an external validation error (needs ErrorMessage)
+    var isCharacterCountViolation = error === '__TOO_SHORT__' || error === '__TOO_LONG__';
+    var showExternalError = error && !isCharacterCountViolation;
+    var showCharacterCounter = (maxCharacters !== undefined || minCharacters !== undefined) && !showExternalError;
+
+    // Extend aria-describedby to reference the appropriate message component
+    var fieldPropsWithCounter = _objectSpread(_objectSpread({}, extendedFieldProps), {}, {
+      'aria-describedby': showCharacterCounter ? "".concat(extendedFieldProps['aria-describedby'], " ").concat(extendedFieldProps.id, "-character-counter").trim() : extendedFieldProps['aria-describedby']
+    });
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageWrapper, null, helperMessage && /*#__PURE__*/React.createElement("div", {
+      className: ax([helperMessageWrapperStyles.root])
+    }, /*#__PURE__*/React.createElement(HelperMessage, {
+      testId: "".concat(testId, "-helper")
+    }, helperMessage))), children({
+      fieldProps: fieldPropsWithCounter,
+      error: error,
+      valid: valid,
+      meta: meta
+    }), /*#__PURE__*/React.createElement(MessageWrapper, null, showExternalError && /*#__PURE__*/React.createElement(ErrorMessage, {
+      testId: "".concat(testId, "-error")
+    }, error)), showCharacterCounter && /*#__PURE__*/React.createElement(CharacterCounter, {
+      maxCharacters: maxCharacters,
+      minCharacters: minCharacters,
+      currentValue: String(extendedFieldProps.value || ''),
+      shouldShowAsError: isCharacterCountViolation,
+      overMaximumMessage: overMaximumMessage,
+      underMaximumMessage: underMaximumMessage,
+      underMinimumMessage: underMinimumMessage,
+      testId: "".concat(testId, "-character-counter")
+    }));
+  }));
+}

package/dist/esm/character-counter.compiled.css

@@ -0,0 +1,8 @@
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._1bah1q9y{justify-content:baseline}
+._1e0c1txw{display:flex}
+._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}
+._syaze6sf{color:var(--ds-text-danger,#ae2a19)}

package/dist/esm/character-counter.js

@@ -0,0 +1,122 @@
+/* character-counter.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./character-counter.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
+import ErrorIcon from '@atlaskit/icon/core/migration/status-error--error';
+import { Text } from '@atlaskit/primitives/compiled';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { FieldId } from './field-id-context';
+
+// Extracted styles for character counter message container
+var messageContainerStyles = null;
+
+// Extracted styles for error icon wrapper
+var errorIconWrapperStyles = null;
+
+// Error icon with wrapper for character count violations
+var ErrorIconWithWrapper = function ErrorIconWithWrapper() {
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_1e0c1txw _4t3i7vkz _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
+    LEGACY_margin: "0 -2px 0 0",
+    LEGACY_size: "small",
+    label: "error",
+    size: "small"
+  }));
+};
+// Helper to pluralise "character(s)"
+var pluralize = function pluralize(count) {
+  return "character".concat(count !== 1 ? 's' : '');
+};
+
+/**
+ * __Character Counter__
+ *
+ * A character counter component that displays remaining characters for text input.
+ * Displays messages for over or under the maximum or minimum character limits.
+ */
+export var CharacterCounter = function CharacterCounter(_ref) {
+  var maxCharacters = _ref.maxCharacters,
+    minCharacters = _ref.minCharacters,
+    currentValue = _ref.currentValue,
+    overMaximumMessage = _ref.overMaximumMessage,
+    underMaximumMessage = _ref.underMaximumMessage,
+    underMinimumMessage = _ref.underMinimumMessage,
+    _ref$shouldShowAsErro = _ref.shouldShowAsError,
+    shouldShowAsError = _ref$shouldShowAsErro === void 0 ? true : _ref$shouldShowAsErro,
+    inputId = _ref.inputId,
+    testId = _ref.testId;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    announcementText = _useState2[0],
+    setAnnouncementText = _useState2[1];
+  var debounceTimeoutRef = useRef(null);
+
+  // Resolve the field ID from context (form use) or inputId prop (standalone use)
+  var contextFieldId = useContext(FieldId);
+  var resolvedFieldId = contextFieldId || inputId;
+  var currentLength = (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) || 0;
+
+  // Check if character count violates limits
+  var isTooShort = minCharacters !== undefined && currentLength < minCharacters;
+  var isTooLong = maxCharacters !== undefined && currentLength > maxCharacters;
+
+  // Determine what to display based on the current value, the maximum and minimum character limits, and any custom messages
+  var getMessage = function getMessage() {
+    // Below minimum so show custom message or default
+    if (isTooShort) {
+      var needed = minCharacters - currentLength;
+      return underMinimumMessage || "".concat(needed, " more ").concat(pluralize(needed), " needed");
+    }
+
+    // Over maximum so show custom message or default
+    if (isTooLong) {
+      var over = currentLength - maxCharacters;
+      return overMaximumMessage || "".concat(over, " ").concat(pluralize(over), " too many");
+    }
+
+    // Within limits - show remaining count (if max is defined)
+    if (maxCharacters) {
+      var remaining = maxCharacters - currentLength;
+      return underMaximumMessage || "".concat(remaining, " ").concat(pluralize(remaining), " remaining");
+    }
+
+    // No message to show (min only limit satisfied)
+    return null;
+  };
+  var displayText = getMessage();
+
+  // Determine if the current character count violates limits
+  var displayAsError = (isTooShort || isTooLong) && shouldShowAsError;
+
+  // Debounce screen reader announcements so that it only reads the message when it input has settled
+  useEffect(function () {
+    // Debounce by 1 second to avoid announcing every keystroke
+    debounceTimeoutRef.current = setTimeout(function () {
+      setAnnouncementText(displayText || '');
+    }, 1000);
+
+    // Cleanup function clears the timeout when displayText changes or component unmounts
+    return function () {
+      clearTimeout(debounceTimeoutRef.current);
+    };
+  }, [displayText]);
+
+  // Don't render if there's no message to display (min only limit satisfied)
+  if (!displayText) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _syaze6sf _1pfh1b66"])
+  }, displayAsError && /*#__PURE__*/React.createElement(ErrorIconWithWrapper, null), /*#__PURE__*/React.createElement(Text, {
+    color: displayAsError ? 'color.text.danger' : 'color.text.subtlest',
+    size: "small",
+    id: resolvedFieldId ? "".concat(resolvedFieldId, "-character-counter") : undefined
+  }, displayText)), /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("div", {
+    "aria-live": "polite"
+  }, announcementText)));
+};

package/dist/esm/index.js

@@ -9,4 +9,5 @@ export { Label, Legend } from './label';
 export { HelperMessage, ErrorMessage, MessageWrapper, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset';
 export { default as RequiredAsterisk } from './required-asterisk';
-export { useFormState } from './use-form-state';
+export { useFormState } from './use-form-state';
+export { default as CharacterCounterField } from './character-counter-field';

package/dist/types/character-counter-field.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type FieldComponentProps, type FieldProps, type Meta } from './field';
+type SupportedElements = HTMLInputElement | HTMLTextAreaElement;
+export interface CharacterCounterFieldProps<FieldValue = string, Element extends SupportedElements = HTMLInputElement> extends Omit<FieldComponentProps<FieldValue, Element>, 'children' | 'component' | 'helperMessage' | 'errorMessage' | 'validMessage' | 'transform'> {
+    /**
+     * The input component to render. Use a render function that receives `fieldProps`, `error`, `valid`, and `meta` state.
+     * Spread `fieldProps` onto your input element (such as `TextField` or `TextArea`).
+     */
+    children: (args: {
+        fieldProps: FieldProps<FieldValue, Element>;
+        error?: string;
+        valid: boolean;
+        meta: Meta;
+    }) => ReactNode;
+    /**
+     * Helper text displayed above the input to provide additional context or instructions.
+     */
+    helperMessage?: ReactNode;
+    /**
+     * Maximum number of characters allowed. When exceeded, the field displays an error message or the message provided by `overMaximumMessage`.
+     */
+    maxCharacters?: number;
+    /**
+     * Minimum number of characters required. When not met, the character counter displays an error message or the message provided by `underMinimumMessage`.
+     */
+    minCharacters?: number;
+    /**
+     * Custom message displayed when input exceeds the maximum character limit. Use this to provide context-specific guidance or localized messages. Overrides the default "X characters too many" message.
+     */
+    overMaximumMessage?: string;
+    /**
+     * Custom message displayed when input is under the maximum limit. Use this to provide context-specific guidance or localized messages. Overrides the default "X characters remaining" message.
+     */
+    underMaximumMessage?: string;
+    /**
+     * Custom message displayed when input is under the minimum requirement. Use this to guide users on how much more they need to type. Overrides the default "Minimum of X characters required" message.
+     */
+    underMinimumMessage?: string;
+}
+/**
+ * __Character Counter Field__
+ *
+ * A field component that wraps the standard Field with automatic character count validation.
+ * Validates minimum and maximum character limits and displays a character counter.
+ */
+export default function CharacterCounterField<FieldValue = string, Element extends SupportedElements = HTMLInputElement>({ maxCharacters, minCharacters, children, validate: userValidate, overMaximumMessage, underMaximumMessage, underMinimumMessage, helperMessage, defaultValue, id, isRequired, isDisabled, label, elementAfterLabel, name, testId, }: CharacterCounterFieldProps<FieldValue, Element>): JSX.Element;
+export {};

package/dist/types/character-counter.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+export interface CharacterCounterProps {
+    /**
+     * Maximum number of characters allowed (optional)
+     */
+    maxCharacters?: number;
+    /**
+     * Minimum number of characters required (optional)
+     */
+    minCharacters?: number;
+    /**
+     * Current value of the input field
+     */
+    currentValue?: string;
+    /**
+     * Optional custom message to display when character limit is exceeded
+     */
+    overMaximumMessage?: string;
+    /**
+     * Optional custom message to display when character limit is not exceeded
+     */
+    underMaximumMessage?: string;
+    /**
+     * Optional custom message to display when minimum character requirement is not met
+     */
+    underMinimumMessage?: string;
+    /**
+     * Whether to style violations as errors (red text + icon).
+     * By default, violations are automatically styled as errors.
+     *
+     * In forms, set this to false to suppress error styling when
+     * the form hasn't flagged an error yet (e.g., field not touched).
+     *
+     * // Standalone: smart default (violations = errors)
+     * <CharacterCounter currentValue={value} maxCharacters={100} />
+     *
+     * // Form: align with final-form error state
+     * <CharacterCounter
+     *   currentValue={value}
+     *   maxCharacters={100}
+     *   shouldShowAsError={isCharacterCountViolation}
+     * />
+     */
+    shouldShowAsError?: boolean;
+    /**
+     * ID of the associated input for accessibility.
+     * Not needed if the character counter is used within CharacterCounterField.
+     * When provided, the character counter will have an ID of `${inputId}-character-counter`
+     * which should be referenced in the input's `aria-describedby` attribute.
+     * If not provided, will attempt to use InputId context from Form.
+     */
+    inputId?: string;
+    /**
+     * A testId prop is provided for specified elements, which is a unique string
+     * that appears as a data attribute data-testid in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+}
+/**
+ * __Character Counter__
+ *
+ * A character counter component that displays remaining characters for text input.
+ * Displays messages for over or under the maximum or minimum character limits.
+ */
+export declare const CharacterCounter: ({ maxCharacters, minCharacters, currentValue, overMaximumMessage, underMaximumMessage, underMinimumMessage, shouldShowAsError, inputId, testId, }: CharacterCounterProps) => JSX.Element | null;

package/dist/types/index.d.ts

@@ -16,3 +16,5 @@ export { default as Fieldset } from './fieldset';
 export { default as RequiredAsterisk } from './required-asterisk';
 export type { OnSubmitHandler, FormApi } from './types';
 export { useFormState } from './use-form-state';
+export { default as CharacterCounterField } from './character-counter-field';
+export type { CharacterCounterFieldProps } from './character-counter-field';

package/dist/types-ts4.5/character-counter-field.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+import { type FieldComponentProps, type FieldProps, type Meta } from './field';
+type SupportedElements = HTMLInputElement | HTMLTextAreaElement;
+export interface CharacterCounterFieldProps<FieldValue = string, Element extends SupportedElements = HTMLInputElement> extends Omit<FieldComponentProps<FieldValue, Element>, 'children' | 'component' | 'helperMessage' | 'errorMessage' | 'validMessage' | 'transform'> {
+    /**
+     * The input component to render. Use a render function that receives `fieldProps`, `error`, `valid`, and `meta` state.
+     * Spread `fieldProps` onto your input element (such as `TextField` or `TextArea`).
+     */
+    children: (args: {
+        fieldProps: FieldProps<FieldValue, Element>;
+        error?: string;
+        valid: boolean;
+        meta: Meta;
+    }) => ReactNode;
+    /**
+     * Helper text displayed above the input to provide additional context or instructions.
+     */
+    helperMessage?: ReactNode;
+    /**
+     * Maximum number of characters allowed. When exceeded, the field displays an error message or the message provided by `overMaximumMessage`.
+     */
+    maxCharacters?: number;
+    /**
+     * Minimum number of characters required. When not met, the character counter displays an error message or the message provided by `underMinimumMessage`.
+     */
+    minCharacters?: number;
+    /**
+     * Custom message displayed when input exceeds the maximum character limit. Use this to provide context-specific guidance or localized messages. Overrides the default "X characters too many" message.
+     */
+    overMaximumMessage?: string;
+    /**
+     * Custom message displayed when input is under the maximum limit. Use this to provide context-specific guidance or localized messages. Overrides the default "X characters remaining" message.
+     */
+    underMaximumMessage?: string;
+    /**
+     * Custom message displayed when input is under the minimum requirement. Use this to guide users on how much more they need to type. Overrides the default "Minimum of X characters required" message.
+     */
+    underMinimumMessage?: string;
+}
+/**
+ * __Character Counter Field__
+ *
+ * A field component that wraps the standard Field with automatic character count validation.
+ * Validates minimum and maximum character limits and displays a character counter.
+ */
+export default function CharacterCounterField<FieldValue = string, Element extends SupportedElements = HTMLInputElement>({ maxCharacters, minCharacters, children, validate: userValidate, overMaximumMessage, underMaximumMessage, underMinimumMessage, helperMessage, defaultValue, id, isRequired, isDisabled, label, elementAfterLabel, name, testId, }: CharacterCounterFieldProps<FieldValue, Element>): JSX.Element;
+export {};

package/dist/types-ts4.5/character-counter.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+export interface CharacterCounterProps {
+    /**
+     * Maximum number of characters allowed (optional)
+     */
+    maxCharacters?: number;
+    /**
+     * Minimum number of characters required (optional)
+     */
+    minCharacters?: number;
+    /**
+     * Current value of the input field
+     */
+    currentValue?: string;
+    /**
+     * Optional custom message to display when character limit is exceeded
+     */
+    overMaximumMessage?: string;
+    /**
+     * Optional custom message to display when character limit is not exceeded
+     */
+    underMaximumMessage?: string;
+    /**
+     * Optional custom message to display when minimum character requirement is not met
+     */
+    underMinimumMessage?: string;
+    /**
+     * Whether to style violations as errors (red text + icon).
+     * By default, violations are automatically styled as errors.
+     *
+     * In forms, set this to false to suppress error styling when
+     * the form hasn't flagged an error yet (e.g., field not touched).
+     *
+     * // Standalone: smart default (violations = errors)
+     * <CharacterCounter currentValue={value} maxCharacters={100} />
+     *
+     * // Form: align with final-form error state
+     * <CharacterCounter
+     *   currentValue={value}
+     *   maxCharacters={100}
+     *   shouldShowAsError={isCharacterCountViolation}
+     * />
+     */
+    shouldShowAsError?: boolean;
+    /**
+     * ID of the associated input for accessibility.
+     * Not needed if the character counter is used within CharacterCounterField.
+     * When provided, the character counter will have an ID of `${inputId}-character-counter`
+     * which should be referenced in the input's `aria-describedby` attribute.
+     * If not provided, will attempt to use InputId context from Form.
+     */
+    inputId?: string;
+    /**
+     * A testId prop is provided for specified elements, which is a unique string
+     * that appears as a data attribute data-testid in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+}
+/**
+ * __Character Counter__
+ *
+ * A character counter component that displays remaining characters for text input.
+ * Displays messages for over or under the maximum or minimum character limits.
+ */
+export declare const CharacterCounter: ({ maxCharacters, minCharacters, currentValue, overMaximumMessage, underMaximumMessage, underMinimumMessage, shouldShowAsError, inputId, testId, }: CharacterCounterProps) => JSX.Element | null;

package/dist/types-ts4.5/index.d.ts

@@ -16,3 +16,5 @@ export { default as Fieldset } from './fieldset';
 export { default as RequiredAsterisk } from './required-asterisk';
 export type { OnSubmitHandler, FormApi } from './types';
 export { useFormState } from './use-form-state';
+export { default as CharacterCounterField } from './character-counter-field';
+export type { CharacterCounterFieldProps } from './character-counter-field';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "14.3.2",
+	"version": "14.4.0",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,9 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/tokens": "^8.4.0",
+		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.6",
 		"final-form": "^4.20.3",
 		"final-form-focus": "^1.1.2",
 		"lodash": "^4.17.21"
@@ -45,21 +47,21 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/banner": "^14.0.0",
-		"@atlaskit/button": "^23.6.0",
-		"@atlaskit/checkbox": "^17.1.0",
+		"@atlaskit/button": "^23.7.0",
+		"@atlaskit/checkbox": "^17.2.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/datetime-picker": "^17.1.0",
+		"@atlaskit/datetime-picker": "^17.2.0",
 		"@atlaskit/docs": "^11.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.1.0",
-		"@atlaskit/modal-dialog": "^14.7.0",
+		"@atlaskit/modal-dialog": "^14.8.0",
 		"@atlaskit/radio": "^8.3.0",
-		"@atlaskit/range": "^9.2.0",
-		"@atlaskit/section-message": "^8.9.0",
-		"@atlaskit/select": "^21.4.0",
-		"@atlaskit/textarea": "^8.1.0",
-		"@atlaskit/textfield": "^8.1.0",
-		"@atlaskit/toggle": "^15.1.0",
+		"@atlaskit/range": "^9.3.0",
+		"@atlaskit/section-message": "^8.10.0",
+		"@atlaskit/select": "^21.5.0",
+		"@atlaskit/textarea": "^8.2.0",
+		"@atlaskit/textfield": "^8.2.0",
+		"@atlaskit/toggle": "^15.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@testing-library/react": "^13.4.0",