@veracity/vui 5.4.0-alpha.manual.2609080740 → 5.4.0

package/dist/tagToggle/theme.js

@@ -81,5 +81,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/textField/consts.js

@@ -27,9 +27,8 @@ const clearIconSize = {
 	lg: "sm",
 	xl: "md"
 };
-const helpTextMargin = "60px";
 
 //#endregion
-export { clearIconSize, displayValueOnlyTextSize, fieldColors, helpTextMargin };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+export { clearIconSize, displayValueOnlyTextSize, fieldColors };
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=consts.js.map

package/dist/textField/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","names":[],"sources":["../../src/textField/consts.ts"],"sourcesContent":["// Values sourced from the VUI v5 Figma \"Text field\" component (node 1691:2232), verified against\n// core/vuiProvider/consts.ts CSS variables. Where the semantic --vui-control-*/--vui-feedback-* var has\n// drifted from the current design, the raw --vui-color-* palette var is used instead.\nexport const fieldColors = {\n  border: 'var(--vui-control-border-default)',\n  placeholder: 'var(--vui-control-placeholder)',\n  inputText: 'var(--vui-control-foreground-default)',\n  helpText: 'var(--vui-control-helper)',\n  icons: 'var(--vui-foreground-muted)',\n  disabledBackground: 'var(--vui-color-sandstone-90)',\n  disabledForeground: 'var(--vui-color-sandstone-60)',\n  // no Figma-verified readOnly token yet; same sandstone step as the old xstyled tokens, just as a CSS var\n  readOnlyBackground: 'var(--vui-color-sandstone-97)',\n  readOnlyBorder: 'var(--vui-color-sandstone-55)',\n  focus: 'var(--vui-utility-focus)',\n  error: 'var(--vui-action-danger-solid)',\n  loading: 'var(--vui-color-sea-blue-80)',\n  loadingBar: 'var(--vui-color-sea-blue-60)',\n  success: 'var(--vui-feedback-success-solid)',\n} as const\n\nexport const displayValueOnlyTextSize = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n  xl: 'lg',\n} as const\n\nexport const clearIconSize = {\n  sm: 'sm',\n  md: 'sm',\n  lg: 'sm',\n  xl: 'md',\n} as const\n\nexport const helpTextMargin = '60px' as const\n"],"mappings":";AAGA,MAAa,cAAc;CACzB,QAAQ;CACR,aAAa;CACb,WAAW;CACX,UAAU;CACV,OAAO;CACP,oBAAoB;CACpB,oBAAoB;CAEpB,oBAAoB;CACpB,gBAAgB;CAChB,OAAO;CACP,OAAO;CACP,SAAS;CACT,YAAY;CACZ,SAAS;AACX;AAEA,MAAa,2BAA2B;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,gBAAgB;CAC3B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,iBAAiB"}
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/textField/consts.ts"],"sourcesContent":["// Values sourced from the VUI v5 Figma \"Text field\" component (node 1691:2232), verified against\n// core/vuiProvider/consts.ts CSS variables. Where the semantic --vui-control-*/--vui-feedback-* var has\n// drifted from the current design, the raw --vui-color-* palette var is used instead.\nexport const fieldColors = {\n  border: 'var(--vui-control-border-default)',\n  placeholder: 'var(--vui-control-placeholder)',\n  inputText: 'var(--vui-control-foreground-default)',\n  helpText: 'var(--vui-control-helper)',\n  icons: 'var(--vui-foreground-muted)',\n  disabledBackground: 'var(--vui-color-sandstone-90)',\n  disabledForeground: 'var(--vui-color-sandstone-60)',\n  // no Figma-verified readOnly token yet; same sandstone step as the old xstyled tokens, just as a CSS var\n  readOnlyBackground: 'var(--vui-color-sandstone-97)',\n  readOnlyBorder: 'var(--vui-color-sandstone-55)',\n  focus: 'var(--vui-utility-focus)',\n  error: 'var(--vui-action-danger-solid)',\n  loading: 'var(--vui-color-sea-blue-80)',\n  loadingBar: 'var(--vui-color-sea-blue-60)',\n  success: 'var(--vui-feedback-success-solid)',\n} as const\n\nexport const displayValueOnlyTextSize = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n  xl: 'lg',\n} as const\n\nexport const clearIconSize = {\n  sm: 'sm',\n  md: 'sm',\n  lg: 'sm',\n  xl: 'md',\n} as const\n\nexport const containerGap = '4px' as const\n\nexport const helpRowGap = '8px' as const\n"],"mappings":";AAGA,MAAa,cAAc;CACzB,QAAQ;CACR,aAAa;CACb,WAAW;CACX,UAAU;CACV,OAAO;CACP,oBAAoB;CACpB,oBAAoB;CAEpB,oBAAoB;CACpB,gBAAgB;CAChB,OAAO;CACP,OAAO;CACP,SAAS;CACT,YAAY;CACZ,SAAS;AACX;AAEA,MAAa,2BAA2B;CACtC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAa,gBAAgB;CAC3B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN"}

package/dist/textField/context.js

@@ -5,5 +5,5 @@ const [TextFieldProvider, useTextFieldContext] = createContext({ isOptional: tru
 
 //#endregion
 export { TextFieldProvider, useTextFieldContext };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=context.js.map

package/dist/textField/helpers.js

@@ -1,5 +1,4 @@
 import { isString } from "../utils/assertion.js";
-import { helpTextMargin } from "./consts.js";
 import { Label } from "../label/label.js";
 import { cloneElement, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -10,10 +9,6 @@ function getInitialCount(props) {
 	const { defaultValue, value } = props;
 	return defaultValue?.toString().length ?? value?.toString().length ?? 0;
 }
-/** Reserves horizontal space for the counter so help/error text doesn't run underneath it. */
-function getHelpTextMargin(showCount) {
-	return showCount ? helpTextMargin : void 0;
-}
 /** Truncates a value to `maxLength`, if set. */
 function clampValue(value, maxLength) {
 	return maxLength ? value.slice(0, maxLength) : value;
@@ -51,6 +46,6 @@ function resolveLabel(label, id, disabled, labelMarkOptional, labelTooltipText,
 }
 
 //#endregion
-export { clampValue, createSyntheticChangeEvent, filterAutoCompleteOption, getHelpTextMargin, getInitialCount, resolveLabel };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+export { clampValue, createSyntheticChangeEvent, filterAutoCompleteOption, getInitialCount, resolveLabel };
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=helpers.js.map

package/dist/textField/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":[],"sources":["../../src/textField/helpers.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react'\n\nimport { cloneElement, isValidElement } from 'react'\n\nimport type { TextFieldProps } from './textField.types'\n\nimport Label from '../label'\nimport { isString } from '../utils'\nimport { helpTextMargin } from './consts'\n\n/** Returns length of the initial field's value. */\nexport function getInitialCount(props: TextFieldProps) {\n  const { defaultValue, value } = props\n\n  return defaultValue?.toString().length ?? value?.toString().length ?? 0\n}\n\n/** Reserves horizontal space for the counter so help/error text doesn't run underneath it. */\nexport function getHelpTextMargin(showCount: boolean | undefined) {\n  return showCount ? helpTextMargin : undefined\n}\n\n/** Truncates a value to `maxLength`, if set. */\nexport function clampValue(value: string, maxLength?: number) {\n  return maxLength ? value.slice(0, maxLength) : value\n}\n\n/** Builds a minimal synthetic change event carrying just the given value. */\nexport function createSyntheticChangeEvent(value: string, type: string) {\n  return { target: { value }, type }\n}\n\n/** Predicate for filtering autocomplete options against the field's current value. */\nexport function filterAutoCompleteOption(currentValue: string, option: string) {\n  return currentValue === option ? false : !currentValue || option.toLowerCase().includes(currentValue.toLowerCase())\n}\n\n/** Matches `Label` elements, including thin wrappers (styled/memo) that preserve the `Label` display name. */\nfunction isLabelElement(label: ReactNode): label is ReactElement<{ htmlFor?: string }> {\n  if (!isValidElement<{ htmlFor?: string }>(label)) return false\n\n  const type = label.type as { displayName?: string }\n\n  return label.type === Label || type?.displayName === Label.displayName\n}\n\n/** Resolves the `label` prop: wraps strings in `Label`, auto-wires `htmlFor` onto `Label` elements. */\nexport function resolveLabel(\n  label: ReactNode,\n  id: string,\n  disabled: boolean | undefined,\n  labelMarkOptional: boolean | undefined,\n  labelTooltipText: ReactNode,\n  labelStyles: Record<string, unknown>,\n) {\n  if (isString(label)) {\n    return (\n      <Label\n        aria-disabled={disabled}\n        className=\"vui-textFieldLabel\"\n        htmlFor={id}\n        markAsOptional={labelMarkOptional}\n        text={label}\n        tooltipText={labelTooltipText}\n        {...labelStyles}\n      />\n    )\n  }\n\n  if (isLabelElement(label)) {\n    return cloneElement(label, { htmlFor: label.props.htmlFor ?? id })\n  }\n\n  return label\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,gBAAgB,OAAuB;CACrD,MAAM,EAAE,cAAc,UAAU;CAEhC,OAAO,cAAc,SAAS,CAAC,CAAC,UAAU,OAAO,SAAS,CAAC,CAAC,UAAU;AACxE;;AAGA,SAAgB,kBAAkB,WAAgC;CAChE,OAAO,YAAY,iBAAiB;AACtC;;AAGA,SAAgB,WAAW,OAAe,WAAoB;CAC5D,OAAO,YAAY,MAAM,MAAM,GAAG,SAAS,IAAI;AACjD;;AAGA,SAAgB,2BAA2B,OAAe,MAAc;CACtE,OAAO;EAAE,QAAQ,EAAE,MAAM;EAAG;CAAK;AACnC;;AAGA,SAAgB,yBAAyB,cAAsB,QAAgB;CAC7E,OAAO,iBAAiB,SAAS,QAAQ,CAAC,gBAAgB,OAAO,YAAY,CAAC,CAAC,SAAS,aAAa,YAAY,CAAC;AACpH;;AAGA,SAAS,eAAe,OAA+D;CACrF,IAAI,CAAC,eAAqC,KAAK,GAAG,OAAO;CAEzD,MAAM,OAAO,MAAM;CAEnB,OAAO,MAAM,SAAS,SAAS,MAAM,gBAAgB,MAAM;AAC7D;;AAGA,SAAgB,aACd,OACA,IACA,UACA,mBACA,kBACA,aACA;CACA,IAAI,SAAS,KAAK,GAChB,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,WAAU;EACV,SAAS;EACT,gBAAgB;EAChB,MAAM;EACN,aAAa;EACb,GAAI;CACL;CAIL,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAAO,EAAE,SAAS,MAAM,MAAM,WAAW,GAAG,CAAC;CAGnE,OAAO;AACT"}
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/textField/helpers.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react'\n\nimport { cloneElement, isValidElement } from 'react'\n\nimport type { TextFieldProps } from './textField.types'\n\nimport Label from '../label'\nimport { isString } from '../utils'\n\n/** Returns length of the initial field's value. */\nexport function getInitialCount(props: TextFieldProps) {\n  const { defaultValue, value } = props\n\n  return defaultValue?.toString().length ?? value?.toString().length ?? 0\n}\n\n/** Truncates a value to `maxLength`, if set. */\nexport function clampValue(value: string, maxLength?: number) {\n  return maxLength ? value.slice(0, maxLength) : value\n}\n\n/** Builds a minimal synthetic change event carrying just the given value. */\nexport function createSyntheticChangeEvent(value: string, type: string) {\n  return { target: { value }, type }\n}\n\n/** Predicate for filtering autocomplete options against the field's current value. */\nexport function filterAutoCompleteOption(currentValue: string, option: string) {\n  return currentValue === option ? false : !currentValue || option.toLowerCase().includes(currentValue.toLowerCase())\n}\n\n/** Matches `Label` elements, including thin wrappers (styled/memo) that preserve the `Label` display name. */\nfunction isLabelElement(label: ReactNode): label is ReactElement<{ htmlFor?: string }> {\n  if (!isValidElement<{ htmlFor?: string }>(label)) return false\n\n  const type = label.type as { displayName?: string }\n\n  return label.type === Label || type?.displayName === Label.displayName\n}\n\n/** Resolves the `label` prop: wraps strings in `Label`, auto-wires `htmlFor` onto `Label` elements. */\nexport function resolveLabel(\n  label: ReactNode,\n  id: string,\n  disabled: boolean | undefined,\n  labelMarkOptional: boolean | undefined,\n  labelTooltipText: ReactNode,\n  labelStyles: Record<string, unknown>,\n) {\n  if (isString(label)) {\n    return (\n      <Label\n        aria-disabled={disabled}\n        className=\"vui-textFieldLabel\"\n        htmlFor={id}\n        markAsOptional={labelMarkOptional}\n        text={label}\n        tooltipText={labelTooltipText}\n        {...labelStyles}\n      />\n    )\n  }\n\n  if (isLabelElement(label)) {\n    return cloneElement(label, { htmlFor: label.props.htmlFor ?? id })\n  }\n\n  return label\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,gBAAgB,OAAuB;CACrD,MAAM,EAAE,cAAc,UAAU;CAEhC,OAAO,cAAc,SAAS,CAAC,CAAC,UAAU,OAAO,SAAS,CAAC,CAAC,UAAU;AACxE;;AAGA,SAAgB,WAAW,OAAe,WAAoB;CAC5D,OAAO,YAAY,MAAM,MAAM,GAAG,SAAS,IAAI;AACjD;;AAGA,SAAgB,2BAA2B,OAAe,MAAc;CACtE,OAAO;EAAE,QAAQ,EAAE,MAAM;EAAG;CAAK;AACnC;;AAGA,SAAgB,yBAAyB,cAAsB,QAAgB;CAC7E,OAAO,iBAAiB,SAAS,QAAQ,CAAC,gBAAgB,OAAO,YAAY,CAAC,CAAC,SAAS,aAAa,YAAY,CAAC;AACpH;;AAGA,SAAS,eAAe,OAA+D;CACrF,IAAI,CAAC,eAAqC,KAAK,GAAG,OAAO;CAEzD,MAAM,OAAO,MAAM;CAEnB,OAAO,MAAM,SAAS,SAAS,MAAM,gBAAgB,MAAM;AAC7D;;AAGA,SAAgB,aACd,OACA,IACA,UACA,mBACA,kBACA,aACA;CACA,IAAI,SAAS,KAAK,GAChB,OACE,oBAAC,OAAD;EACE,iBAAe;EACf,WAAU;EACV,SAAS;EACT,gBAAgB;EAChB,MAAM;EACN,aAAa;EACb,GAAI;CACL;CAIL,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAAO,EAAE,SAAS,MAAM,MAAM,WAAW,GAAG,CAAC;CAGnE,OAAO;AACT"}

package/dist/textField/textField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textField.d.ts","names":[],"sources":["../../src/textField/textField.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;cA4Ba,kDAAoB,mDAAA,cAApB,iBAAoB,uBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,oBAAA,eAAA,oBAAA,oBAAA,oBAAA,eAAA,eAAA,sBAAA,sBAAA,mBAAA,mBAAA,YAAA,iBAAA,eAAA,iBAAA,kBAAA,eAAA,kBAAA,oBAAA,sBAAA,oBAAA,gBAAA,gBAAA,kBAAA,iBAAA,qBAAA,YAAA,mBAAA,iBAAA,aAAA,WAAA,WAAA,WAAA,iBAAA,cAAA,kBAAA,eAAA,oBAAA,uBAAA,oBAAA,2BAAA,wBAAA,yBAAA,gBAAA,kBAAA,cAAA,qBAAA,cAAA,kBAAA,mBAAA,aAAA,iBAAA,gBAAA,iBAAA,iBAAA,gBAAA,cAAA,WAAA,aAAA,cAAA,YAAA,kBAAA,0BAAA,iBAAA,gBAAA,aAAA,cAAA,gBAAA,iBAAA,gBAAA,iBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,eAAA,eAAA,eAAA,kBAAA,oBAAA,qBAAA,mBAAA,gBAAA,gBAAA,cAAA,cAAA,qBAAA,qBAAA,sBAAA,mBAAA,iBAAA,uBAAA,kBAAA,kBAAA,cAAA,aAAA,aAAA,aAAA,cAAA,cAAA,kBAAA,0BAAA,0BAAA,gCAAA,uBAAA,kBAAA,gBAAA,iBAAA,kBAAA,kBAAA,aAAA,qBAAA,sBAAA,iBAAA,qBAAA,qBAAA,kBAAA,oBAAA,qBAAA,yBAAA;EAAgC;;cAwCpD,gDAAkB;cAiBlB,mDAAqB,wDAAA,cAAA;;;;;;;cAsBrB,WA0SP,oBAAoB;EACxB,qBAAqB;EACrB,iBAAiB;EACjB,aAAa"}
+{"version":3,"file":"textField.d.ts","names":[],"sources":["../../src/textField/textField.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;cA2Ba,kDAAoB,mDAAA,cAApB,iBAAoB,uBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,sBAAA,wBAAA,yBAAA,uBAAA,mBAAA,oBAAA,eAAA,oBAAA,oBAAA,oBAAA,eAAA,eAAA,sBAAA,sBAAA,mBAAA,mBAAA,YAAA,iBAAA,eAAA,iBAAA,kBAAA,eAAA,kBAAA,oBAAA,sBAAA,oBAAA,gBAAA,gBAAA,kBAAA,iBAAA,qBAAA,YAAA,mBAAA,iBAAA,aAAA,WAAA,WAAA,WAAA,iBAAA,cAAA,kBAAA,eAAA,oBAAA,uBAAA,oBAAA,2BAAA,wBAAA,yBAAA,gBAAA,kBAAA,cAAA,qBAAA,cAAA,kBAAA,mBAAA,aAAA,iBAAA,gBAAA,iBAAA,iBAAA,gBAAA,cAAA,WAAA,aAAA,cAAA,YAAA,kBAAA,0BAAA,iBAAA,gBAAA,aAAA,cAAA,gBAAA,iBAAA,gBAAA,iBAAA,cAAA,iBAAA,mBAAA,oBAAA,kBAAA,eAAA,eAAA,eAAA,kBAAA,oBAAA,qBAAA,mBAAA,gBAAA,gBAAA,cAAA,cAAA,qBAAA,qBAAA,sBAAA,mBAAA,iBAAA,uBAAA,kBAAA,kBAAA,cAAA,aAAA,aAAA,aAAA,cAAA,cAAA,kBAAA,0BAAA,0BAAA,gCAAA,uBAAA,kBAAA,gBAAA,iBAAA,kBAAA,kBAAA,aAAA,qBAAA,sBAAA,iBAAA,qBAAA,qBAAA,kBAAA,oBAAA,qBAAA,yBAAA;EAAgC;;cA8CpD,gDAAkB;cAiBlB,mDAAqB,wDAAA,cAAA;;;;;;;cAyDrB,WAsRP,oBAAoB;EACxB,qBAAqB;EACrB,iBAAiB;EACjB,aAAa"}

package/dist/textField/textField.js

@@ -9,7 +9,7 @@ import { Box } from "../box/box.js";
 import { T } from "../t/t.js";
 import { IconButton } from "../button/buttons.js";
 import { TextFieldProvider } from "./context.js";
-import { clampValue, createSyntheticChangeEvent, filterAutoCompleteOption, getHelpTextMargin, getInitialCount, resolveLabel } from "./helpers.js";
+import { clampValue, createSyntheticChangeEvent, filterAutoCompleteOption, getInitialCount, resolveLabel } from "./helpers.js";
 import { TextFieldAutoComplete } from "./textFieldAutoComplete.js";
 import { TextFieldHelpText } from "./textFieldHelpText.js";
 import { TextFieldIcon } from "./textFieldIcon.js";
@@ -47,6 +47,12 @@ const TextFieldControlBase = styled.divBox`
     }
   }
 
+  /* nested adornment buttons (itemLeft/itemRight, clear) rely on this container's own focus-within ring */
+  & button:focus-visible {
+    --x-ring-color: transparent;
+    outline: none;
+  }
+
   ${({ $multiline }) => $multiline && `
     align-items: stretch;
     flex-direction: column;
@@ -85,6 +91,31 @@ const TextFieldTextareaBase = styled.textareaBox`
     cursor: not-allowed;
   }
 `;
+/** Renders the help/error text alongside the character counter in a single row. */
+function TextFieldFooter({ count, descriptionId, errorText, helpText, maxLength, showCount }) {
+	if (!helpText && !errorText && !showCount) return null;
+	const message = errorText ?? helpText;
+	return /* @__PURE__ */ jsxs(Box, {
+		alignItems: "flex-start",
+		gap: "8px",
+		children: [/* @__PURE__ */ jsx(Box, {
+			flex: "1",
+			children: message && /* @__PURE__ */ jsx(TextFieldHelpText, {
+				id: descriptionId,
+				isError: !!errorText,
+				children: message
+			})
+		}), showCount && /* @__PURE__ */ jsxs(TextFieldHelpText, {
+			className: "vui-textFieldCount",
+			isError: !!maxLength && count > maxLength,
+			children: [
+				count,
+				" ",
+				maxLength ? `/ ${maxLength}` : null
+			]
+		})]
+	});
+}
 /**
 * Displays a text field wrapped in a div to allow extra content, like counter, side icons or buttons.
 * Renders a native `<input>` when `rows` is unset or `<= 1`, and a `<textarea>` when `rows > 1`.
@@ -92,7 +123,7 @@ const TextFieldTextareaBase = styled.textareaBox`
 * Exposes some props to the children via context.
 */
 const TextField = vui((props, ref) => {
-	const { ariaLabel, autoComplete, autoFocus, className, id: idProp, name, disabled, readOnly, required, defaultValue, value, onChange: onChangeProp, onBlur, onFocus, max, maxLength, min, minLength, pattern, placeholder, step, type = "text", cols, resize, rows, label, labelMarkOptional, labelTooltipText, helpText, errorText, loading, showCount, displayValueOnly, allowClear, startIcon, endIcon, itemLeft, itemRight, autoCompleteOptions, autoCompleteMaxHeight, field, fieldProps, fieldRef, size = "lg", variant, ...rest } = props;
+	const { ariaLabel, autoComplete, autoFocus, className, id: idProp, name, disabled, readOnly, required, defaultValue, value, onChange: onChangeProp, onBlur, onFocus, max, maxLength, min, minLength, pattern, placeholder, step, type = "text", cols, resize, rows, label, labelMarkOptional, labelTooltipText, helpText, errorText, loading, showCount, displayValueOnly, allowClear, startIcon, itemLeft, itemRight, autoCompleteOptions, autoCompleteMaxHeight, field, fieldProps, fieldRef, size = "lg", variant, ...rest } = props;
 	const isMultiline = (rows ?? 0) > 1;
 	const generatedId = useId();
 	const [count, setCount] = useState(() => getInitialCount(props));
@@ -141,14 +172,12 @@ const TextField = vui((props, ref) => {
 		"aria-disabled": disabled,
 		"aria-label": ariaLabel
 	});
-	const helpTextId = helpText ? `${id}-help-text` : void 0;
-	const errorTextId = errorText ? `${id}-error-text` : void 0;
-	const ariaDescribedBy = [helpTextId, errorTextId].filter(Boolean).join(" ") || void 0;
+	const descriptionId = helpText || errorText ? `${id}-description` : void 0;
 	const commonFieldProps = {
 		value: valueInternal,
 		...styles.field,
 		...fieldAliasedProps,
-		"aria-describedby": ariaDescribedBy,
+		"aria-describedby": descriptionId,
 		"aria-invalid": errorText ? true : void 0
 	};
 	const sharedFieldProps = {
@@ -190,19 +219,6 @@ const TextField = vui((props, ref) => {
 	}, [value]);
 	const filterAutoCompleteOptions = (i) => filterAutoCompleteOption(`${valueInternal}`, i);
 	const resolvedLabel = resolveLabel(label, id, disabled, labelMarkOptional, labelTooltipText, styles.label);
-	const counterNode = showCount && /* @__PURE__ */ jsxs(T, {
-		className: "vui-textFieldCount",
-		color: maxLength && count > maxLength ? fieldColors.error : fieldColors.helpText,
-		position: "absolute",
-		right: 0,
-		size: "sm",
-		top: "100%",
-		children: [
-			count,
-			" ",
-			maxLength ? `/ ${maxLength}` : null
-		]
-	});
 	if (type === "hidden") return /* @__PURE__ */ jsx("input", {
 		defaultValue,
 		id,
@@ -252,7 +268,6 @@ const TextField = vui((props, ref) => {
 								...inputFieldProps
 							})),
 							!isMultiline && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-								isString(endIcon) ? /* @__PURE__ */ jsx(TextFieldIcon, { name: endIcon }) : endIcon,
 								itemRight,
 								loading && /* @__PURE__ */ jsx(TextFieldIcon, {
 									animation: "vui-spin 0.6s linear infinite",
@@ -266,20 +281,16 @@ const TextField = vui((props, ref) => {
 									title: "Clear",
 									variant: "tertiary"
 								})
-							] }),
-							counterNode
+							] })
 						]
 					}),
-					!!helpText && /* @__PURE__ */ jsx(TextFieldHelpText, {
-						id: helpTextId,
-						mr: getHelpTextMargin(showCount),
-						children: helpText
-					}),
-					!!errorText && /* @__PURE__ */ jsx(TextFieldHelpText, {
-						id: errorTextId,
-						isError: true,
-						mr: getHelpTextMargin(showCount),
-						children: errorText
+					/* @__PURE__ */ jsx(TextFieldFooter, {
+						count,
+						descriptionId,
+						errorText,
+						helpText,
+						maxLength,
+						showCount
 					})
 				]
 			})
@@ -289,9 +300,9 @@ const TextField = vui((props, ref) => {
 TextField.AutoComplete = TextFieldAutoComplete;
 TextField.HelpText = TextFieldHelpText;
 TextField.Icon = TextFieldIcon;
-TextField.displayName = "Text Field";
+TextField.displayName = "TextField";
 
 //#endregion
 export { TextField, TextField as default, TextFieldControlBase, TextFieldInputBase, TextFieldTextareaBase };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=textField.js.map

package/dist/textField/textField.js.map

@@ -1 +1 @@
-{"version":3,"file":"textField.js","names":[],"sources":["../../src/textField/textField.tsx"],"sourcesContent":["import type { RefObject } from 'react'\n\nimport { useEffect, useId, useMemo, useState } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SystemProps } from '../system'\nimport type { ChangeEvent, PropsOf } from '../utils'\nimport type { TextFieldProps } from './textField.types'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs, filterUndefined, isString } from '../utils'\nimport { clearIconSize, displayValueOnlyTextSize, fieldColors } from './consts'\nimport { TextFieldProvider } from './context'\nimport {\n  clampValue,\n  createSyntheticChangeEvent,\n  filterAutoCompleteOption,\n  getHelpTextMargin,\n  getInitialCount,\n  resolveLabel,\n} from './helpers'\nimport TextFieldAutoComplete from './textFieldAutoComplete'\nimport TextFieldHelpText from './textFieldHelpText'\nimport TextFieldIcon from './textFieldIcon'\n\nexport const TextFieldControlBase = styled.divBox<{ $multiline?: boolean }>`\n  align-items: center;\n  color: ${fieldColors.inputText};\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  gap: 8px;\n  outline: none;\n  padding: 0 8px;\n  position: relative;\n  transform: translate3d(0, 0, 0);\n  transition-duration: 0s;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ${fieldColors.disabledBackground};\n    border-color: ${fieldColors.disabledBackground};\n    color: ${fieldColors.disabledForeground};\n    & > .vui-icon {\n      color: ${fieldColors.disabledForeground};\n    }\n    & > .vui-icon > path {\n      fill: ${fieldColors.disabledForeground};\n    }\n  }\n\n  ${({ $multiline }) =>\n    $multiline &&\n    `\n    align-items: stretch;\n    flex-direction: column;\n    gap: 0;\n    padding: 0;\n  `}\n`\n\nexport const TextFieldInputBase = styled.input`\n  align-self: stretch;\n  background-color: transparent;\n  border: none;\n  border-radius: none;\n  color: inherit;\n  flex: 1;\n  font-size: inherit;\n  min-width: 0;\n  outline: none;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    cursor: not-allowed;\n  }\n`\n\nexport const TextFieldTextareaBase = styled.textareaBox`\n  background-color: transparent;\n  border: none;\n  color: inherit;\n  flex: 1 1 auto;\n  font-size: inherit;\n  outline: none;\n  padding: 4px;\n  resize: none;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n`\n\n/**\n * Displays a text field wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Renders a native `<input>` when `rows` is unset or `<= 1`, and a `<textarea>` when `rows > 1`.\n * Forwards many relevant props to the inner field. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const TextField = vui<'div', TextFieldProps>((props, ref) => {\n  const {\n    // identity & native attributes\n    ariaLabel,\n    autoComplete,\n    autoFocus,\n    className,\n    id: idProp,\n    name,\n    disabled,\n    readOnly,\n    required,\n\n    // value & change handling\n    defaultValue,\n    value,\n    onChange: onChangeProp,\n    onBlur,\n    onFocus,\n\n    // native field constraints\n    max,\n    maxLength,\n    min,\n    minLength,\n    pattern,\n    placeholder,\n    step,\n    type = 'text',\n\n    // multiline-only\n    cols,\n    resize,\n    rows,\n\n    // label\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n\n    // help/error/loading/counter states\n    helpText,\n    errorText,\n    loading,\n    showCount,\n    displayValueOnly,\n\n    // adornments (input-only)\n    allowClear,\n    startIcon,\n    endIcon,\n    itemLeft,\n    itemRight,\n\n    // autocomplete (input-only)\n    autoCompleteOptions,\n    autoCompleteMaxHeight,\n\n    // custom field override\n    field,\n    fieldProps,\n    fieldRef,\n\n    // sizing/theming\n    size = 'lg',\n    variant,\n\n    ...rest\n  } = props\n\n  const isMultiline = (rows ?? 0) > 1\n\n  const generatedId = useId()\n  const [count, setCount] = useState(() => getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(value ?? defaultValue ?? '')\n  // caps the resize handle to the textarea's `rows`-driven height plus its padding/border\n  const minHeight = isMultiline && resize && rows ? `calc(${rows} * 1lh + 10px)` : undefined\n  // errorText forces the red variant; loading forces the grey variant\n  const effectiveVariant = errorText ? 'red' : loading ? 'grey' : variant\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', { ...props, variant: effectiveVariant })\n  // the theme's fixed `h` is single-line only; multiline height comes from the native `rows` attribute\n  const { h: _containerHeight, ...containerStylesMultiline } = styles.container ?? {}\n  const containerStyles = isMultiline ? containerStylesMultiline : styles.container\n\n  // sub-components (Icon, HelpText) resolve styles from the same effective variant as the container,\n  // so error/loading overrides are reflected in their styling too\n  const context = useMemo(\n    () => filterUndefined({ disabled, id, size, variant: effectiveVariant }),\n    [disabled, id, size, effectiveVariant],\n  )\n\n  function onChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n    const value = clampValue(e.target.value, maxLength)\n\n    setValueInternal(value)\n    setCount(value?.length)\n    // keep the forwarded event consistent with the clamped internal state, so a controlled\n    // parent reading `e.target.value` can't diverge from what the field displays\n    if (value !== e.target.value) {\n      e.target.value = value\n    }\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    onChange(createSyntheticChangeEvent(value, 'autoCompleteSelect') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  function onClear() {\n    setValueInternal('')\n    setCount(0)\n    onChange(createSyntheticChangeEvent('', 'onClear') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    // disabled overrides everything (state, readOnly); readOnly only overrides when there's no active state\n    bg: disabled ? fieldColors.disabledBackground : readOnly ? fieldColors.readOnlyBackground : undefined,\n    borderColor: disabled\n      ? fieldColors.disabledBackground\n      : readOnly && !loading\n        ? fieldColors.readOnlyBorder\n        : undefined,\n  })\n\n  const fieldAliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n  })\n\n  // link the field to its help/error text so screen readers announce it\n  const helpTextId = helpText ? `${id}-help-text` : undefined\n  const errorTextId = errorText ? `${id}-error-text` : undefined\n  const ariaDescribedBy = [helpTextId, errorTextId].filter(Boolean).join(' ') || undefined\n\n  const commonFieldProps = {\n    value: valueInternal,\n    ...styles.field,\n    ...fieldAliasedProps,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': errorText ? true : undefined,\n  }\n\n  // valid on both <input> and <textarea>\n  const sharedFieldProps = {\n    autoFocus,\n    disabled,\n    id,\n    maxLength,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    readOnly,\n    required,\n  }\n\n  const textareaFieldProps = {\n    ...sharedFieldProps,\n    cols,\n    rows,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'textarea', SystemProps>),\n  }\n\n  const inputFieldProps = {\n    ...sharedFieldProps,\n    max,\n    min,\n    minLength,\n    pattern,\n    step,\n    type,\n    autoComplete: autoCompleteOptions?.length ? 'off' : autoComplete,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'input', SystemProps>),\n  }\n\n  useEffect(() => {\n    if (value === undefined && defaultValue !== undefined) return\n    setValueInternal(value ?? '')\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  const filterAutoCompleteOptions = (i: string) => filterAutoCompleteOption(`${valueInternal}`, i)\n\n  const resolvedLabel = resolveLabel(label, id, disabled, labelMarkOptional, labelTooltipText, styles.label)\n\n  const counterNode = showCount && (\n    <T\n      className=\"vui-textFieldCount\"\n      color={maxLength && count > maxLength ? fieldColors.error : fieldColors.helpText}\n      position=\"absolute\"\n      right={0}\n      size=\"sm\"\n      top=\"100%\"\n    >\n      {count} {maxLength ? `/ ${maxLength}` : null}\n    </T>\n  )\n\n  // hidden type needs no visible container; render only the native input, but still forward\n  // refs, props and change handling so it behaves like any other TextField\n  if (type === 'hidden') {\n    return (\n      <input\n        defaultValue={defaultValue}\n        id={id}\n        name={name}\n        onChange={onChange}\n        ref={fieldRef as RefObject<HTMLInputElement | null> | undefined}\n        type=\"hidden\"\n        value={valueInternal as string}\n        {...(fieldProps as PropsOf<'input', SystemProps>)}\n      />\n    )\n  }\n\n  return (\n    <TextFieldProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-textField-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <TextFieldAutoComplete\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={isMultiline ? undefined : autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-textFieldContainer\" column gap=\"4px\" ref={ref} {...rest}>\n            {resolvedLabel}\n\n            <TextFieldControlBase\n              $multiline={isMultiline}\n              className={cs('vui-textField', className)}\n              minH={isMultiline && resize ? minHeight : undefined}\n              overflow={isMultiline && resize ? 'auto' : undefined}\n              resize={isMultiline && resize ? 'vertical' : undefined}\n              {...containerStyles}\n              {...aliasedProps}\n            >\n              {!isMultiline && (\n                <>\n                  {itemLeft}\n                  {isString(startIcon) ? <TextFieldIcon name={startIcon} /> : startIcon}\n                </>\n              )}\n              {field ??\n                (isMultiline ? (\n                  <TextFieldTextareaBase className=\"vui-textFieldField\" ref={fieldRef} {...textareaFieldProps} />\n                ) : (\n                  <TextFieldInputBase className=\"vui-textFieldField\" ref={fieldRef} {...inputFieldProps} />\n                ))}\n              {!isMultiline && (\n                <>\n                  {isString(endIcon) ? <TextFieldIcon name={endIcon} /> : endIcon}\n                  {itemRight}\n                  {loading && (\n                    <TextFieldIcon\n                      animation=\"vui-spin 0.6s linear infinite\"\n                      name=\"uiSpinnerThird\"\n                      pathFill={[fieldColors.loading, fieldColors.loadingBar]}\n                    />\n                  )}\n                  {allowClear && !!valueInternal && (\n                    <IconButton\n                      icon=\"uiTimes\"\n                      onClick={onClear}\n                      size={clearIconSize[size]}\n                      title=\"Clear\"\n                      variant=\"tertiary\"\n                    />\n                  )}\n                </>\n              )}\n              {counterNode}\n            </TextFieldControlBase>\n            {!!helpText && (\n              <TextFieldHelpText id={helpTextId} mr={getHelpTextMargin(showCount)}>\n                {helpText}\n              </TextFieldHelpText>\n            )}\n            {!!errorText && (\n              <TextFieldHelpText id={errorTextId} isError mr={getHelpTextMargin(showCount)}>\n                {errorText}\n              </TextFieldHelpText>\n            )}\n          </Box>\n        </TextFieldAutoComplete>\n      )}\n    </TextFieldProvider>\n  )\n}) as VuiComponent<'div', TextFieldProps> & {\n  AutoComplete: typeof TextFieldAutoComplete\n  HelpText: typeof TextFieldHelpText\n  Icon: typeof TextFieldIcon\n}\n\nTextField.AutoComplete = TextFieldAutoComplete\nTextField.HelpText = TextFieldHelpText\nTextField.Icon = TextFieldIcon\nTextField.displayName = 'Text Field'\n\nexport default TextField\n"],"mappings":"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"}
+{"version":3,"file":"textField.js","names":[],"sources":["../../src/textField/textField.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react'\n\nimport { useEffect, useId, useMemo, useState } from 'react'\n\nimport type { VuiComponent } from '../core'\nimport type { SystemProps } from '../system'\nimport type { ChangeEvent, PropsOf } from '../utils'\nimport type { TextFieldProps } from './textField.types'\n\nimport Box from '../box'\nimport { IconButton } from '../button'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs, filterUndefined, isString } from '../utils'\nimport { clearIconSize, containerGap, displayValueOnlyTextSize, fieldColors, helpRowGap } from './consts'\nimport { TextFieldProvider } from './context'\nimport {\n  clampValue,\n  createSyntheticChangeEvent,\n  filterAutoCompleteOption,\n  getInitialCount,\n  resolveLabel,\n} from './helpers'\nimport TextFieldAutoComplete from './textFieldAutoComplete'\nimport TextFieldHelpText from './textFieldHelpText'\nimport TextFieldIcon from './textFieldIcon'\n\nexport const TextFieldControlBase = styled.divBox<{ $multiline?: boolean }>`\n  align-items: center;\n  color: ${fieldColors.inputText};\n  background-color: white;\n  border-radius: none;\n  border-width: 1px;\n  display: flex;\n  flex-shrink: 0;\n  gap: 8px;\n  outline: none;\n  padding: 0 8px;\n  position: relative;\n  transform: translate3d(0, 0, 0);\n  transition-duration: 0s;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: ${fieldColors.disabledBackground};\n    border-color: ${fieldColors.disabledBackground};\n    color: ${fieldColors.disabledForeground};\n    & > .vui-icon {\n      color: ${fieldColors.disabledForeground};\n    }\n    & > .vui-icon > path {\n      fill: ${fieldColors.disabledForeground};\n    }\n  }\n\n  /* nested adornment buttons (itemLeft/itemRight, clear) rely on this container's own focus-within ring */\n  & button:focus-visible {\n    --x-ring-color: transparent;\n    outline: none;\n  }\n\n  ${({ $multiline }) =>\n    $multiline &&\n    `\n    align-items: stretch;\n    flex-direction: column;\n    gap: 0;\n    padding: 0;\n  `}\n`\n\nexport const TextFieldInputBase = styled.input`\n  align-self: stretch;\n  background-color: transparent;\n  border: none;\n  border-radius: none;\n  color: inherit;\n  flex: 1;\n  font-size: inherit;\n  min-width: 0;\n  outline: none;\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']::placeholder {\n    cursor: not-allowed;\n  }\n`\n\nexport const TextFieldTextareaBase = styled.textareaBox`\n  background-color: transparent;\n  border: none;\n  color: inherit;\n  flex: 1 1 auto;\n  font-size: inherit;\n  outline: none;\n  padding: 4px;\n  resize: none;\n  width: 100%;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n`\n\ntype TextFieldFooterProps = {\n  count: number\n  descriptionId?: string\n  errorText?: ReactNode\n  helpText?: ReactNode\n  maxLength?: number\n  showCount?: boolean\n}\n\n/** Renders the help/error text alongside the character counter in a single row. */\nfunction TextFieldFooter({ count, descriptionId, errorText, helpText, maxLength, showCount }: TextFieldFooterProps) {\n  if (!helpText && !errorText && !showCount) return null\n\n  // errorText overrides helpText; both share the same slot\n  const message = errorText ?? helpText\n  const isCountOverMax = !!maxLength && count > maxLength\n\n  return (\n    <Box alignItems=\"flex-start\" gap={helpRowGap}>\n      <Box flex=\"1\">\n        {message && (\n          <TextFieldHelpText id={descriptionId} isError={!!errorText}>\n            {message}\n          </TextFieldHelpText>\n        )}\n      </Box>\n      {showCount && (\n        <TextFieldHelpText className=\"vui-textFieldCount\" isError={isCountOverMax}>\n          {count} {maxLength ? `/ ${maxLength}` : null}\n        </TextFieldHelpText>\n      )}\n    </Box>\n  )\n}\n\n/**\n * Displays a text field wrapped in a div to allow extra content, like counter, side icons or buttons.\n * Renders a native `<input>` when `rows` is unset or `<= 1`, and a `<textarea>` when `rows > 1`.\n * Forwards many relevant props to the inner field. Handles different states, like loading or error.\n * Exposes some props to the children via context.\n */\nexport const TextField = vui<'div', TextFieldProps>((props, ref) => {\n  const {\n    // identity & native attributes\n    ariaLabel,\n    autoComplete,\n    autoFocus,\n    className,\n    id: idProp,\n    name,\n    disabled,\n    readOnly,\n    required,\n\n    // value & change handling\n    defaultValue,\n    value,\n    onChange: onChangeProp,\n    onBlur,\n    onFocus,\n\n    // native field constraints\n    max,\n    maxLength,\n    min,\n    minLength,\n    pattern,\n    placeholder,\n    step,\n    type = 'text',\n\n    // multiline-only\n    cols,\n    resize,\n    rows,\n\n    // label\n    label,\n    labelMarkOptional,\n    labelTooltipText,\n\n    // help/error/loading/counter states\n    helpText,\n    errorText,\n    loading,\n    showCount,\n    displayValueOnly,\n\n    // adornments (input-only)\n    allowClear,\n    startIcon,\n    itemLeft,\n    itemRight,\n\n    // autocomplete (input-only)\n    autoCompleteOptions,\n    autoCompleteMaxHeight,\n\n    // custom field override\n    field,\n    fieldProps,\n    fieldRef,\n\n    // sizing/theming\n    size = 'lg',\n    variant,\n\n    ...rest\n  } = props\n\n  const isMultiline = (rows ?? 0) > 1\n\n  const generatedId = useId()\n  const [count, setCount] = useState(() => getInitialCount(props))\n  const [valueInternal, setValueInternal] = useState(value ?? defaultValue ?? '')\n  // caps the resize handle to the textarea's `rows`-driven height plus its padding/border\n  const minHeight = isMultiline && resize && rows ? `calc(${rows} * 1lh + 10px)` : undefined\n  // errorText forces the red variant; loading forces the grey variant\n  const effectiveVariant = errorText ? 'red' : loading ? 'grey' : variant\n\n  const id = idProp || generatedId\n\n  const styles = useStyleConfig('Input', { ...props, variant: effectiveVariant })\n  // the theme's fixed `h` is single-line only; multiline height comes from the native `rows` attribute\n  const { h: _containerHeight, ...containerStylesMultiline } = styles.container ?? {}\n  const containerStyles = isMultiline ? containerStylesMultiline : styles.container\n\n  // sub-components (Icon, HelpText) resolve styles from the same effective variant as the container,\n  // so error/loading overrides are reflected in their styling too\n  const context = useMemo(\n    () => filterUndefined({ disabled, id, size, variant: effectiveVariant }),\n    [disabled, id, size, effectiveVariant],\n  )\n\n  function onChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n    const value = clampValue(e.target.value, maxLength)\n\n    setValueInternal(value)\n    setCount(value?.length)\n    // keep the forwarded event consistent with the clamped internal state, so a controlled\n    // parent reading `e.target.value` can't diverge from what the field displays\n    if (value !== e.target.value) {\n      e.target.value = value\n    }\n    onChangeProp?.(e)\n  }\n\n  function onAutoCompleteSelect(value: string) {\n    onChange(createSyntheticChangeEvent(value, 'autoCompleteSelect') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  function onClear() {\n    setValueInternal('')\n    setCount(0)\n    onChange(createSyntheticChangeEvent('', 'onClear') as unknown as ChangeEvent<HTMLInputElement>)\n  }\n\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    // disabled overrides everything (state, readOnly); readOnly only overrides when there's no active state\n    bg: disabled ? fieldColors.disabledBackground : readOnly ? fieldColors.readOnlyBackground : undefined,\n    borderColor: disabled\n      ? fieldColors.disabledBackground\n      : readOnly && !loading\n        ? fieldColors.readOnlyBorder\n        : undefined,\n  })\n\n  const fieldAliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n  })\n\n  // link the field to its help/error text so screen readers announce it; errorText overrides helpText\n  const descriptionId = helpText || errorText ? `${id}-description` : undefined\n\n  const commonFieldProps = {\n    value: valueInternal,\n    ...styles.field,\n    ...fieldAliasedProps,\n    'aria-describedby': descriptionId,\n    'aria-invalid': errorText ? true : undefined,\n  }\n\n  // valid on both <input> and <textarea>\n  const sharedFieldProps = {\n    autoFocus,\n    disabled,\n    id,\n    maxLength,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    placeholder,\n    readOnly,\n    required,\n  }\n\n  const textareaFieldProps = {\n    ...sharedFieldProps,\n    cols,\n    rows,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'textarea', SystemProps>),\n  }\n\n  const inputFieldProps = {\n    ...sharedFieldProps,\n    max,\n    min,\n    minLength,\n    pattern,\n    step,\n    type,\n    autoComplete: autoCompleteOptions?.length ? 'off' : autoComplete,\n    ...commonFieldProps,\n    ...(fieldProps as PropsOf<'input', SystemProps>),\n  }\n\n  useEffect(() => {\n    if (value === undefined && defaultValue !== undefined) return\n    setValueInternal(value ?? '')\n    setCount(value?.toString()?.length ? `${value}`.length : 0)\n  }, [value])\n\n  const filterAutoCompleteOptions = (i: string) => filterAutoCompleteOption(`${valueInternal}`, i)\n\n  const resolvedLabel = resolveLabel(label, id, disabled, labelMarkOptional, labelTooltipText, styles.label)\n\n  // hidden type needs no visible container; render only the native input, but still forward\n  // refs, props and change handling so it behaves like any other TextField\n  if (type === 'hidden') {\n    return (\n      <input\n        defaultValue={defaultValue}\n        id={id}\n        name={name}\n        onChange={onChange}\n        ref={fieldRef as RefObject<HTMLInputElement | null> | undefined}\n        type=\"hidden\"\n        value={valueInternal as string}\n        {...(fieldProps as PropsOf<'input', SystemProps>)}\n      />\n    )\n  }\n\n  return (\n    <TextFieldProvider value={context}>\n      {displayValueOnly ? (\n        <T className={cs('vui-textField-value', className)} size={displayValueOnlyTextSize[size]}>\n          {value || defaultValue}\n        </T>\n      ) : (\n        <TextFieldAutoComplete\n          autoCompleteMaxHeight={autoCompleteMaxHeight}\n          autoCompleteOptions={isMultiline ? undefined : autoCompleteOptions}\n          filterAutoCompleteOptions={filterAutoCompleteOptions}\n          onAutoCompleteSelect={onAutoCompleteSelect}\n        >\n          <Box className=\"vui-textFieldContainer\" column gap={containerGap} ref={ref} {...rest}>\n            {resolvedLabel}\n\n            <TextFieldControlBase\n              $multiline={isMultiline}\n              className={cs('vui-textField', className)}\n              minH={isMultiline && resize ? minHeight : undefined}\n              overflow={isMultiline && resize ? 'auto' : undefined}\n              resize={isMultiline && resize ? 'vertical' : undefined}\n              {...containerStyles}\n              {...aliasedProps}\n            >\n              {!isMultiline && (\n                <>\n                  {itemLeft}\n                  {isString(startIcon) ? <TextFieldIcon name={startIcon} /> : startIcon}\n                </>\n              )}\n              {field ??\n                (isMultiline ? (\n                  <TextFieldTextareaBase className=\"vui-textFieldField\" ref={fieldRef} {...textareaFieldProps} />\n                ) : (\n                  <TextFieldInputBase className=\"vui-textFieldField\" ref={fieldRef} {...inputFieldProps} />\n                ))}\n              {!isMultiline && (\n                <>\n                  {itemRight}\n                  {loading && (\n                    <TextFieldIcon\n                      animation=\"vui-spin 0.6s linear infinite\"\n                      name=\"uiSpinnerThird\"\n                      pathFill={[fieldColors.loading, fieldColors.loadingBar]}\n                    />\n                  )}\n                  {allowClear && !!valueInternal && (\n                    <IconButton\n                      icon=\"uiTimes\"\n                      onClick={onClear}\n                      size={clearIconSize[size]}\n                      title=\"Clear\"\n                      variant=\"tertiary\"\n                    />\n                  )}\n                </>\n              )}\n            </TextFieldControlBase>\n            <TextFieldFooter\n              count={count}\n              descriptionId={descriptionId}\n              errorText={errorText}\n              helpText={helpText}\n              maxLength={maxLength}\n              showCount={showCount}\n            />\n          </Box>\n        </TextFieldAutoComplete>\n      )}\n    </TextFieldProvider>\n  )\n}) as VuiComponent<'div', TextFieldProps> & {\n  AutoComplete: typeof TextFieldAutoComplete\n  HelpText: typeof TextFieldHelpText\n  Icon: typeof TextFieldIcon\n}\n\nTextField.AutoComplete = TextFieldAutoComplete\nTextField.HelpText = TextFieldHelpText\nTextField.Icon = TextFieldIcon\nTextField.displayName = 'TextField'\n\nexport default TextField\n"],"mappings":"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"}

package/dist/textField/textField.types.d.ts

@@ -52,8 +52,6 @@ type TextFieldProps = Omit<SystemProps, 'resize'> & ThemingProps<'Input'> & {
   helpText?: ReactNode;
   /** Icon displayed on the leading (left) side of the field. Ignored when `rows > 1`. */
   startIcon?: IconProp | JSX.Element;
-  /** Icon displayed on the trailing (right) side of the field. Ignored when `rows > 1`. */
-  endIcon?: IconProp | JSX.Element;
   /** Socket rendering a custom field element, replacing the default input/textarea. */
   field?: ReactNode;
   /** Props object passed to the inner field. */

package/dist/textField/textField.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textField.types.d.ts","names":[],"sources":["../../src/textField/textField.types.ts"],"mappings":";;;;;;;;;;;;KAQY;;EAEV;;EAEA;;EAEA,UAAU,IAAI;;EAEd,4BAA4B,eAAe,eAAe;EAC1D,uBAAuB;;KAGb,yBAAyB;EACnC;;KAGU;KAeA,iBAAiB,KAAK,yBAChC;;EAEE;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,YAAY;;EAEZ,WAAW;;EAEX,YAAY,WAAW,IAAI;;EAE3B,UAAU,WAAW,IAAI;;EAEzB,QAAQ;;EAER,aAAa,iBAAiB,eAAe,oBAAoB;;EAEjE,WAAW,UAAU,mBAAmB;;EAExC,WAAW;;EAEX,YAAY;;EAEZ,QAAQ;;EAER;;EAEA,mBAAmB;;EAEnB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,SAAS,kBAAkB,mBAAmB;;EAE9C,WAAW,mBAAmB,mBAAmB;;EAEjD,UAAU,kBAAkB,mBAAmB;;EAE/C;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,OAAO;;EAEP"}
+{"version":3,"file":"textField.types.d.ts","names":[],"sources":["../../src/textField/textField.types.ts"],"mappings":";;;;;;;;;;;;KAQY;;EAEV;;EAEA;;EAEA,UAAU,IAAI;;EAEd,4BAA4B,eAAe,eAAe;EAC1D,uBAAuB;;KAGb,yBAAyB;EACnC;;KAGU;KAeA,iBAAiB,KAAK,yBAChC;;EAEE;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,YAAY;;EAEZ,WAAW;;EAEX,YAAY,WAAW,IAAI;;EAE3B,QAAQ;;EAER,aAAa,iBAAiB,eAAe,oBAAoB;;EAEjE,WAAW,UAAU,mBAAmB;;EAExC,WAAW;;EAEX,YAAY;;EAEZ,QAAQ;;EAER;;EAEA,mBAAmB;;EAEnB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,SAAS,kBAAkB,mBAAmB;;EAE9C,WAAW,mBAAmB,mBAAmB;;EAEjD,UAAU,kBAAkB,mBAAmB;;EAE/C;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,OAAO;;EAEP"}

package/dist/textField/textFieldAutoComplete.js

@@ -35,5 +35,5 @@ const TextFieldAutoComplete = memo(function TextFieldAutoComplete({ autoComplete
 
 //#endregion
 export { TextFieldAutoComplete, TextFieldAutoComplete as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=textFieldAutoComplete.js.map

package/dist/textField/textFieldHelpText.js

@@ -4,7 +4,7 @@ import { fieldColors } from "./consts.js";
 import { useStyleConfig } from "../core/theme.js";
 import vui from "../core/vui.js";
 import { Box } from "../box/box.js";
-import { P } from "../p/p.js";
+import { T } from "../t/t.js";
 import { useTextFieldContext } from "./context.js";
 import { jsx } from "react/jsx-runtime";
 
@@ -28,7 +28,7 @@ const TextFieldHelpText = vui((props, ref) => {
 		...rest,
 		children
 	});
-	return /* @__PURE__ */ jsx(P, {
+	return /* @__PURE__ */ jsx(T, {
 		alignItems: "flex-start",
 		className: cs("vui-textFieldHelpText", className),
 		color,
@@ -36,6 +36,7 @@ const TextFieldHelpText = vui((props, ref) => {
 		mb: 0,
 		ref,
 		size: "sm",
+		variant: "caption",
 		...styles.helpText,
 		...rest,
 		children
@@ -45,5 +46,5 @@ TextFieldHelpText.displayName = "TextFieldHelpText";
 
 //#endregion
 export { TextFieldHelpText, TextFieldHelpText as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=textFieldHelpText.js.map

package/dist/textField/textFieldHelpText.js.map

@@ -1 +1 @@
-{"version":3,"file":"textFieldHelpText.js","names":[],"sources":["../../src/textField/textFieldHelpText.tsx"],"sourcesContent":["import type { TextFieldHelpTextProps } from './textField.types'\n\nimport Box from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport P from '../p'\nimport { cs, isJsx } from '../utils'\nimport { fieldColors } from './consts'\nimport { useTextFieldContext } from './context'\n\n/** Displaying help text below the field. */\nexport const TextFieldHelpText = vui<'div', TextFieldHelpTextProps>((props, ref) => {\n  const { className, children, isError, ...rest } = props\n  const fieldProps = useTextFieldContext()\n  const mergedProps = { ...fieldProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n\n  const color = isError ? fieldColors.error : fieldColors.helpText\n\n  if (isJsx(children)) {\n    return (\n      <Box\n        alignItems=\"flex-start\"\n        className={cs('vui-textFieldHelpText', className)}\n        color={color}\n        display=\"flex\"\n        ref={ref}\n        {...styles.helpText}\n        {...rest}\n      >\n        {children}\n      </Box>\n    )\n  }\n  // Fallback for string children\n  return (\n    <P\n      alignItems=\"flex-start\"\n      className={cs('vui-textFieldHelpText', className)}\n      color={color}\n      display=\"flex\"\n      mb={0}\n      ref={ref}\n      size=\"sm\"\n      {...styles.helpText}\n      {...rest}\n    >\n      {children}\n    </P>\n  )\n})\n\nTextFieldHelpText.displayName = 'TextFieldHelpText'\nexport default TextFieldHelpText\n"],"mappings":";;;;;;;;;;;;AAUA,MAAa,oBAAoB,KAAoC,OAAO,QAAQ;CAClF,MAAM,EAAE,WAAW,UAAU,SAAS,GAAG,SAAS;CAElD,MAAM,cAAc;EAAE,GADH,oBACe;EAAG,GAAG;CAAM;CAC9C,MAAM,SAAS,eAAe,SAAS,WAAW;CAElD,MAAM,QAAQ,UAAU,YAAY,QAAQ,YAAY;CAExD,IAAI,MAAM,QAAQ,GAChB,OACE,oBAAC,KAAD;EACE,YAAW;EACX,WAAW,GAAG,yBAAyB,SAAS;EACzC;EACP,SAAQ;EACH;EACL,GAAI,OAAO;EACX,GAAI;EAEH;CACE;CAIT,OACE,oBAAC,GAAD;EACE,YAAW;EACX,WAAW,GAAG,yBAAyB,SAAS;EACzC;EACP,SAAQ;EACR,IAAI;EACC;EACL,MAAK;EACL,GAAI,OAAO;EACX,GAAI;EAEH;CACA;AAEP,CAAC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"textFieldHelpText.js","names":[],"sources":["../../src/textField/textFieldHelpText.tsx"],"sourcesContent":["import type { TextFieldHelpTextProps } from './textField.types'\n\nimport Box from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { T } from '../t'\nimport { cs, isJsx } from '../utils'\nimport { fieldColors } from './consts'\nimport { useTextFieldContext } from './context'\n\n/** Displaying help text below the field. */\nexport const TextFieldHelpText = vui<'div', TextFieldHelpTextProps>((props, ref) => {\n  const { className, children, isError, ...rest } = props\n  const fieldProps = useTextFieldContext()\n  const mergedProps = { ...fieldProps, ...props }\n  const styles = useStyleConfig('Input', mergedProps)\n\n  const color = isError ? fieldColors.error : fieldColors.helpText\n\n  if (isJsx(children)) {\n    return (\n      <Box\n        alignItems=\"flex-start\"\n        className={cs('vui-textFieldHelpText', className)}\n        color={color}\n        display=\"flex\"\n        ref={ref}\n        {...styles.helpText}\n        {...rest}\n      >\n        {children}\n      </Box>\n    )\n  }\n  // Fallback for string children\n  return (\n    <T\n      alignItems=\"flex-start\"\n      className={cs('vui-textFieldHelpText', className)}\n      color={color}\n      display=\"flex\"\n      mb={0}\n      ref={ref}\n      size=\"sm\"\n      variant=\"caption\"\n      {...styles.helpText}\n      {...rest}\n    >\n      {children}\n    </T>\n  )\n})\n\nTextFieldHelpText.displayName = 'TextFieldHelpText'\nexport default TextFieldHelpText\n"],"mappings":";;;;;;;;;;;;AAUA,MAAa,oBAAoB,KAAoC,OAAO,QAAQ;CAClF,MAAM,EAAE,WAAW,UAAU,SAAS,GAAG,SAAS;CAElD,MAAM,cAAc;EAAE,GADH,oBACe;EAAG,GAAG;CAAM;CAC9C,MAAM,SAAS,eAAe,SAAS,WAAW;CAElD,MAAM,QAAQ,UAAU,YAAY,QAAQ,YAAY;CAExD,IAAI,MAAM,QAAQ,GAChB,OACE,oBAAC,KAAD;EACE,YAAW;EACX,WAAW,GAAG,yBAAyB,SAAS;EACzC;EACP,SAAQ;EACH;EACL,GAAI,OAAO;EACX,GAAI;EAEH;CACE;CAIT,OACE,oBAAC,GAAD;EACE,YAAW;EACX,WAAW,GAAG,yBAAyB,SAAS;EACzC;EACP,SAAQ;EACR,IAAI;EACC;EACL,MAAK;EACL,SAAQ;EACR,GAAI,OAAO;EACX,GAAI;EAEH;CACA;AAEP,CAAC;AAED,kBAAkB,cAAc"}

package/dist/textField/textFieldIcon.js

@@ -25,5 +25,5 @@ TextFieldIcon.displayName = "TextFieldIcon";
 
 //#endregion
 export { TextFieldIcon, TextFieldIcon as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=textFieldIcon.js.map

package/dist/textField/theme.js

@@ -85,5 +85,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/textarea/textarea.js

@@ -26,5 +26,5 @@ Textarea.displayName = "Textarea";
 
 //#endregion
 export { Textarea, Textarea as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=textarea.js.map

package/dist/textarea/theme.js

@@ -55,5 +55,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=theme.js.map

package/dist/theme/components.d.ts

@@ -432,43 +432,51 @@ declare const _default: {
   Checkbox: {
     baseStyle: {
       control: {
-        color: "sandstone.60";
-        hoverColor: "seaBlue.20";
-      };
-      container: {
-        alignItems: string;
+        color: "var(--vui-control-border-default)";
+        hoverColor: "var(--vui-action-brand-solid-hover)";
+        pressedColor: "var(--vui-action-brand-solid-pressed)";
       };
+      container: {};
     };
     defaultProps: {
       size: string;
     };
     parts: string[];
     sizes: {
-      sm: {
-        control: {
-          h: number;
-          w: number;
+      readonly xs: {
+        readonly control: {
+          readonly h: 16;
+          readonly w: 16;
         };
-        label: {
-          size: string;
+        readonly label: {
+          readonly size: 'xs';
         };
       };
-      md: {
-        control: {
-          h: number;
-          w: number;
+      readonly sm: {
+        readonly control: {
+          readonly h: 20;
+          readonly w: 20;
         };
-        label: {
-          size: string;
+        readonly label: {
+          readonly size: 'sm';
         };
       };
-      lg: {
-        control: {
-          h: number;
-          w: number;
+      readonly md: {
+        readonly control: {
+          readonly h: 24;
+          readonly w: 24;
         };
-        label: {
-          size: string;
+        readonly label: {
+          readonly size: 'md';
+        };
+      };
+      readonly lg: {
+        readonly control: {
+          readonly h: 24;
+          readonly w: 24;
+        };
+        readonly label: {
+          readonly size: 'md';
         };
       };
     };
@@ -1727,8 +1735,9 @@ declare const _default: {
   Radio: {
     baseStyle: {
       control: {
-        color: "sandstone.60";
-        hoverColor: "seaBlue.20";
+        color: "var(--vui-control-border-default)";
+        hoverColor: "var(--vui-action-brand-solid-hover)";
+        pressedColor: "var(--vui-action-brand-solid-pressed)";
       };
     };
     defaultProps: {
@@ -1736,31 +1745,40 @@ declare const _default: {
     };
     parts: string[];
     sizes: {
-      sm: {
-        control: {
-          h: number;
-          w: number;
+      readonly xs: {
+        readonly control: {
+          readonly h: 16;
+          readonly w: 16;
         };
-        label: {
-          size: string;
+        readonly label: {
+          readonly size: 'xs';
         };
       };
-      md: {
-        control: {
-          h: number;
-          w: number;
+      readonly sm: {
+        readonly control: {
+          readonly h: 20;
+          readonly w: 20;
         };
-        label: {
-          size: string;
+        readonly label: {
+          readonly size: 'sm';
         };
       };
-      lg: {
-        control: {
-          h: number;
-          w: number;
+      readonly md: {
+        readonly control: {
+          readonly h: 24;
+          readonly w: 24;
         };
-        label: {
-          size: string;
+        readonly label: {
+          readonly size: 'md';
+        };
+      };
+      readonly lg: {
+        readonly control: {
+          readonly h: 24;
+          readonly w: 24;
+        };
+        readonly label: {
+          readonly size: 'md';
         };
       };
     };

package/dist/theme/components.js

@@ -124,5 +124,5 @@ var components_default = {
 
 //#endregion
 export { components_default as default };
-globalThis.__vuiVersion__ = "5.4.0-alpha"
+globalThis.__vuiVersion__ = "5.4.0"
 //# sourceMappingURL=components.js.map