@cube-dev/ui-kit 0.182.0 → 0.184.0

package/dist/components/form/Label.js

@@ -1,8 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { extractStyles } from "../../utils/styles.js";
 import { useProviderProps } from "../../provider.js";
 import { useI18n } from "../../i18n/useI18n.js";
 import { getValidationMods } from "./validation/resolve-validation-props.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -57,23 +58,60 @@ const NecessityLabelElement = tasty({
 * `isRequired` or `isOptional`.
 */
 function NecessityIndicatorMark(props) {
-	const { isRequired, isOptional, necessityIndicator = "icon", includeNecessityIndicatorInAccessibilityName = false } = props;
+	const $ = c(11);
+	const { isRequired, isOptional, necessityIndicator: t0, includeNecessityIndicatorInAccessibilityName: t1 } = props;
+	const necessityIndicator = t0 === void 0 ? "icon" : t0;
+	const includeNecessityIndicatorInAccessibilityName = t1 === void 0 ? false : t1;
 	const { t } = useI18n();
-	const requiredLabel = t("form.required", "(required)");
-	const separator = " ​";
+	let t2;
+	if ($[0] !== t) {
+		t2 = t("form.required", "(required)");
+		$[0] = t;
+		$[1] = t2;
+	} else t2 = $[1];
+	const requiredLabel = t2;
 	if (necessityIndicator !== "icon" && necessityIndicator !== "label") return null;
 	if (isRequired) {
-		if (necessityIndicator === "icon") return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx("span", {
-			"aria-label": includeNecessityIndicatorInAccessibilityName ? requiredLabel : void 0,
-			children: REQUIRED_ICON
-		})] });
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx(NecessityLabelElement, {
-			"aria-hidden": !includeNecessityIndicatorInAccessibilityName ? true : void 0,
-			children: requiredLabel
-		})] });
+		if (necessityIndicator === "icon") {
+			const t3 = includeNecessityIndicatorInAccessibilityName ? requiredLabel : void 0;
+			let t4;
+			if ($[2] !== t3) {
+				t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [" ​", /* @__PURE__ */ jsx("span", {
+					"aria-label": t3,
+					children: REQUIRED_ICON
+				})] });
+				$[2] = t3;
+				$[3] = t4;
+			} else t4 = $[3];
+			return t4;
+		}
+		const t3 = !includeNecessityIndicatorInAccessibilityName ? true : void 0;
+		let t4;
+		if ($[4] !== requiredLabel || $[5] !== t3) {
+			t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [" ​", /* @__PURE__ */ jsx(NecessityLabelElement, {
+				"aria-hidden": t3,
+				children: requiredLabel
+			})] });
+			$[4] = requiredLabel;
+			$[5] = t3;
+			$[6] = t4;
+		} else t4 = $[6];
+		return t4;
 	}
 	if (!isOptional) return null;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [separator, /* @__PURE__ */ jsx(NecessityLabelElement, { children: t("form.optional", "(optional)") })] });
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("form.optional", "(optional)");
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [" ​", /* @__PURE__ */ jsx(NecessityLabelElement, { children: t3 })] });
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
 }
 const INLINE_LABEL_STYLES = {
 	preset: "t3",
@@ -104,33 +142,85 @@ const LabelElement = tasty({
 	styles: LABEL_STYLES
 });
 function Label(props, ref) {
+	const $ = c(24);
 	props = useProviderProps(props);
-	const { t } = useI18n();
-	let { as, qa, children, labelPosition = "top", isRequired, isOptional, necessityIndicator, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, isInvalid, isValid, size = "medium", for: labelFor, ...otherProps } = props;
-	let domRef = useObjectRef(ref);
+	useI18n();
+	const { as, qa, children, labelPosition: t0, isRequired, isOptional, necessityIndicator, includeNecessityIndicatorInAccessibilityName: t1, htmlFor, isDisabled, isInvalid, isValid, size: t2, for: labelFor, ...otherProps } = props;
+	const labelPosition = t0 === void 0 ? "top" : t0;
+	const includeNecessityIndicatorInAccessibilityName = t1 === void 0 ? false : t1;
+	const size = t2 === void 0 ? "medium" : t2;
+	const domRef = useObjectRef(ref);
 	const styles = extractStyles(otherProps, CONTAINER_STYLES);
-	const mark = /* @__PURE__ */ jsx(NecessityIndicatorMark, {
-		isRequired,
-		isOptional,
-		necessityIndicator,
-		includeNecessityIndicatorInAccessibilityName
-	});
-	return /* @__PURE__ */ jsx(LabelElement, {
-		...filterBaseProps(otherProps),
-		ref: domRef,
-		styles,
-		htmlFor: labelFor || htmlFor,
-		"data-size": size,
-		mods: {
-			side: labelPosition === "side",
+	let t3;
+	if ($[0] !== includeNecessityIndicatorInAccessibilityName || $[1] !== isOptional || $[2] !== isRequired || $[3] !== necessityIndicator) {
+		t3 = /* @__PURE__ */ jsx(NecessityIndicatorMark, {
+			isRequired,
+			isOptional,
+			necessityIndicator,
+			includeNecessityIndicatorInAccessibilityName
+		});
+		$[0] = includeNecessityIndicatorInAccessibilityName;
+		$[1] = isOptional;
+		$[2] = isRequired;
+		$[3] = necessityIndicator;
+		$[4] = t3;
+	} else t3 = $[4];
+	const mark = t3;
+	const T0 = LabelElement;
+	const t4 = filterBaseProps(otherProps);
+	const t5 = labelFor || htmlFor;
+	const t6 = labelPosition === "side";
+	let t7;
+	if ($[5] !== isInvalid || $[6] !== isValid) {
+		t7 = getValidationMods({
+			isInvalid,
+			isValid
+		});
+		$[5] = isInvalid;
+		$[6] = isValid;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== isDisabled || $[9] !== t6 || $[10] !== t7) {
+		t8 = {
+			side: t6,
 			disabled: isDisabled,
-			...getValidationMods({
-				isInvalid,
-				isValid
-			})
-		},
-		children: typeof children !== "string" ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [children, mark] })
-	});
+			...t7
+		};
+		$[8] = isDisabled;
+		$[9] = t6;
+		$[10] = t7;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== children || $[13] !== mark) {
+		t9 = typeof children !== "string" ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [children, mark] });
+		$[12] = children;
+		$[13] = mark;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== T0 || $[16] !== domRef || $[17] !== size || $[18] !== styles || $[19] !== t4 || $[20] !== t5 || $[21] !== t8 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsx(T0, {
+			...t4,
+			ref: domRef,
+			styles,
+			htmlFor: t5,
+			"data-size": size,
+			mods: t8,
+			children: t9
+		});
+		$[15] = T0;
+		$[16] = domRef;
+		$[17] = size;
+		$[18] = styles;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t8;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	return t10;
 }
 let _Label = forwardRef(Label);
 _Label.displayName = "Label";

package/dist/components/form/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useI18n } from '../../i18n';\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationProps,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nimport { getValidationMods } from './validation/index';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\n/**\n * The `(required)` / `(optional)` note. Deliberately quieter than the label it\n * follows: it is an aside about the field, not part of its name.\n *\n * `t4` / `#dark-03` is the same tier `FieldWrapper` already gives `description`\n * and `message`, so the note joins the established secondary text rather than\n * inventing a size of its own. The weight is dropped back to 400 — `t4` carries\n * 500, the same weight as the label — because that contrast is what makes the\n * note read as an aside at a glance.\n */\nconst NecessityLabelElement = tasty({\n  as: 'span',\n  qa: 'NecessityLabel',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    fontWeight: 400,\n  },\n});\n\nexport interface CubeNecessityIndicatorProps {\n  /**\n   * `'icon'` renders the asterisk, `'label'` the `(required)` / `(optional)`\n   * text. Defaults to `'icon'`, which has no optional form and so only ever\n   * marks a required field. `null` suppresses the indicator entirely.\n   */\n  necessityIndicator?: NecessityIndicator | null;\n  /**\n   * Marks the label as required. Only an `isRequired` authored on the input,\n   * the label or the `Form` reaches this — a `required` validation rule drives\n   * validation and `aria-required` without decorating the label.\n   */\n  isRequired?: boolean;\n  /**\n   * Marks the label as optional. Purely presentational, and ignored when the\n   * field is required.\n   */\n  isOptional?: boolean;\n  /**\n   * Whether the indicator contributes to the field's accessible name. Off by\n   * default because a required field already announces `aria-required`, and\n   * repeating it in the name is noise.\n   */\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n}\n\n/**\n * The `*` or `(required)` / `(optional)` marker that follows a field label.\n *\n * Its own component because two places render it and both need the same\n * strings: `Label` when it is given plain text, and `FieldWrapper`, which\n * builds a element tree around the label and therefore has to place the marker\n * beside the label text itself rather than after the whole tree.\n *\n * Both marks are opt-in: nothing renders unless the call site passed\n * `isRequired` or `isOptional`.\n */\nexport function NecessityIndicatorMark(props: CubeNecessityIndicatorProps) {\n  const {\n    isRequired,\n    isOptional,\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n  } = props;\n  const { t } = useI18n();\n\n  const requiredLabel = t('form.required', '(required)');\n\n  // A plain space would collapse against the label text in a flex container,\n  // and the zero-width space keeps the pair from being split across lines.\n  const separator = ' ​';\n\n  // Anything that is not one of the two shapes means \"no indicator\" — `null`,\n  // and also any stray falsy value a caller might still be passing.\n  if (necessityIndicator !== 'icon' && necessityIndicator !== 'label') {\n    return null;\n  }\n\n  if (isRequired) {\n    if (necessityIndicator === 'icon') {\n      return (\n        <>\n          {separator}\n          <span\n            aria-label={\n              includeNecessityIndicatorInAccessibilityName\n                ? requiredLabel\n                : undefined\n            }\n          >\n            {REQUIRED_ICON}\n          </span>\n        </>\n      );\n    }\n\n    // Hidden from screen readers by default, because `aria-required` on the\n    // input already announces it and repeating it in the name is noise.\n    return (\n      <>\n        {separator}\n        <NecessityLabelElement\n          aria-hidden={\n            !includeNecessityIndicatorInAccessibilityName ? true : undefined\n          }\n        >\n          {requiredLabel}\n        </NecessityLabelElement>\n      </>\n    );\n  }\n\n  // There is no icon form of \"optional\", so the note is rendered whichever\n  // indicator was asked for. Nothing else tells a screen reader the field is\n  // optional, so this one stays in the accessible name.\n  if (!isOptional) return null;\n\n  return (\n    <>\n      {separator}\n      <NecessityLabelElement>\n        {t('form.optional', '(optional)')}\n      </NecessityLabelElement>\n    </>\n  );\n}\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps\n  extends BaseProps,\n    ContainerStyleProps,\n    ValidationProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator | null;\n  isRequired?: boolean;\n  isOptional?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  const { t } = useI18n();\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    isOptional,\n    necessityIndicator,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useObjectRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  const mark = (\n    <NecessityIndicatorMark\n      isRequired={isRequired}\n      isOptional={isOptional}\n      necessityIndicator={necessityIndicator}\n      includeNecessityIndicatorInAccessibilityName={\n        includeNecessityIndicatorInAccessibilityName\n      }\n    />\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n    >\n      {/*\n        A non-string child is a tree the caller laid out \\u2014 `FieldWrapper`'s\n        full-width `Flex`, for one \\u2014 and appending the marker after it would put\n        it at the far end of that layout rather than next to the label text. So\n        the marker is only appended here for plain-text labels; callers that\n        build their own tree place `NecessityIndicatorMark` where it belongs.\n      */}\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {mark}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,gBACJ,oBAAC;CACC,OAAM;CACN,SAAQ;CACR,GAAE;CACF,GAAE;CACF,SAAQ;CACR,OAAO;EAEL,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;WAED,oBAAC,sBACC,oBAAC,iBACC,oBAAC;EACC,MAAK;EACL,QAAO;GACP,GACA,GACG;EACL;;;;;;;;;;;AAaR,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,OAAO;EACP,YAAY;EACb;CACF,CAAC;;;;;;;;;;;;AAuCF,SAAgB,uBAAuB,OAAoC;CACzE,MAAM,EACJ,YACA,YACA,qBAAqB,QACrB,+CAA+C,UAC7C;CACJ,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,gBAAgB,EAAE,iBAAiB,aAAa;CAItD,MAAM,YAAY;AAIlB,KAAI,uBAAuB,UAAU,uBAAuB,QAC1D,QAAO;AAGT,KAAI,YAAY;AACd,MAAI,uBAAuB,OACzB,QACE,8CACG,WACD,oBAAC;GACC,cACE,+CACI,gBACA;aAGL;IACI,IACN;AAMP,SACE,8CACG,WACD,oBAAC;GACC,eACE,CAAC,+CAA+C,OAAO;aAGxD;IACqB,IACvB;;AAOP,KAAI,CAAC,WAAY,QAAO;AAExB,QACE,8CACG,WACD,oBAAC,mCACE,EAAE,iBAAiB,aAAa,GACX,IACvB;;AAIP,MAAa,sBAA8B;CACzC,QAAQ;CACR,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACF;AAED,MAAa,eAAuB;CAClC,SAAS;CACT,QAAQ;EACN,IAAI;EACJ,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,SAAS;EACV;CACD,OAAO;EACL,IAAI;EACJ,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,IAAI;CACJ,QAAQ;CACT,CAAC;AAgBF,SAAS,MAAM,OAAuB,KAAK;AACzC,SAAQ,iBAAiC,MAAM;CAE/C,MAAM,EAAE,MAAM,SAAS;CAEvB,IAAI,EACF,IACA,IACA,UACA,gBAAgB,OAChB,YACA,YACA,oBACA,+CAA+C,OAC/C,SACA,YACA,WACA,SACA,OAAO,UACP,KAAK,UACL,GAAG,eACD;CAEJ,IAAI,SAAS,aAAa,IAAI;CAE9B,MAAM,SAAS,cAAc,YAAY,iBAAiB;CAE1D,MAAM,OACJ,oBAAC;EACa;EACA;EACQ;EAElB;GAEF;AAGJ,QACE,oBAAC;EACC,GAAI,gBAAgB,WAAW;EAC/B,KAAK;EACG;EACR,SAAS,YAAY;EACrB,aAAW;EACX,MAAM;GACJ,MAAM,kBAAkB;GACxB,UAAU;GACV,GAAG,kBAAkB;IAAE;IAAW;IAAS,CAAC;GAC7C;YASA,OAAO,aAAa,WACnB,WAEA,8CACG,UACA,QACA;GAEQ;;AAInB,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}
+{"version":3,"file":"Label.js","names":["useObjectRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","filterBaseProps","Styles","tasty","forwardRef","useI18n","useProviderProps","LabelPosition","NecessityIndicator","ValidationProps","extractStyles","getValidationMods","REQUIRED_ICON","enableBackground","width","height","transform","NecessityLabelElement","as","qa","styles","preset","color","fontWeight","CubeNecessityIndicatorProps","necessityIndicator","isRequired","isOptional","includeNecessityIndicatorInAccessibilityName","NecessityIndicatorMark","props","$","_c","t0","t1","undefined","t","t2","requiredLabel","t3","t4","separator","INLINE_LABEL_STYLES","invalid","const","LABEL_STYLES","display","side","split","LabelElement","CubeLabelProps","labelPosition","htmlFor","for","size","Label","ref","children","isDisabled","isInvalid","isValid","labelFor","otherProps","domRef","mark","T0","t5","t6","t7","t8","disabled","t9","t10","_Label","displayName"],"sources":["../../../src/components/form/Label.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\n\nimport { useI18n } from '../../i18n';\nimport { useProviderProps } from '../../provider';\nimport {\n  LabelPosition,\n  NecessityIndicator,\n  ValidationProps,\n} from '../../shared/index';\nimport { extractStyles } from '../../utils/styles';\n\nimport { getValidationMods } from './validation/index';\n\nconst REQUIRED_ICON = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    version=\"1.1\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 125\"\n    style={{\n      // @ts-ignore\n      enableBackground: 'new 0 0 100 100',\n      width: '.8em',\n      height: '.8em',\n      transform: 'rotate(-5deg)',\n    }}\n  >\n    <switch>\n      <g>\n        <polygon\n          fill=\"currentColor\"\n          points=\"97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57\"\n        />\n      </g>\n    </switch>\n  </svg>\n);\n\n/**\n * The `(required)` / `(optional)` note. Deliberately quieter than the label it\n * follows: it is an aside about the field, not part of its name.\n *\n * `t4` / `#dark-03` is the same tier `FieldWrapper` already gives `description`\n * and `message`, so the note joins the established secondary text rather than\n * inventing a size of its own. The weight is dropped back to 400 — `t4` carries\n * 500, the same weight as the label — because that contrast is what makes the\n * note read as an aside at a glance.\n */\nconst NecessityLabelElement = tasty({\n  as: 'span',\n  qa: 'NecessityLabel',\n  styles: {\n    preset: 't4',\n    color: '#dark-03',\n    fontWeight: 400,\n  },\n});\n\nexport interface CubeNecessityIndicatorProps {\n  /**\n   * `'icon'` renders the asterisk, `'label'` the `(required)` / `(optional)`\n   * text. Defaults to `'icon'`, which has no optional form and so only ever\n   * marks a required field. `null` suppresses the indicator entirely.\n   */\n  necessityIndicator?: NecessityIndicator | null;\n  /**\n   * Marks the label as required. Only an `isRequired` authored on the input,\n   * the label or the `Form` reaches this — a `required` validation rule drives\n   * validation and `aria-required` without decorating the label.\n   */\n  isRequired?: boolean;\n  /**\n   * Marks the label as optional. Purely presentational, and ignored when the\n   * field is required.\n   */\n  isOptional?: boolean;\n  /**\n   * Whether the indicator contributes to the field's accessible name. Off by\n   * default because a required field already announces `aria-required`, and\n   * repeating it in the name is noise.\n   */\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n}\n\n/**\n * The `*` or `(required)` / `(optional)` marker that follows a field label.\n *\n * Its own component because two places render it and both need the same\n * strings: `Label` when it is given plain text, and `FieldWrapper`, which\n * builds a element tree around the label and therefore has to place the marker\n * beside the label text itself rather than after the whole tree.\n *\n * Both marks are opt-in: nothing renders unless the call site passed\n * `isRequired` or `isOptional`.\n */\nexport function NecessityIndicatorMark(props: CubeNecessityIndicatorProps) {\n  const {\n    isRequired,\n    isOptional,\n    necessityIndicator = 'icon',\n    includeNecessityIndicatorInAccessibilityName = false,\n  } = props;\n  const { t } = useI18n();\n\n  const requiredLabel = t('form.required', '(required)');\n\n  // A plain space would collapse against the label text in a flex container,\n  // and the zero-width space keeps the pair from being split across lines.\n  const separator = ' ​';\n\n  // Anything that is not one of the two shapes means \"no indicator\" — `null`,\n  // and also any stray falsy value a caller might still be passing.\n  if (necessityIndicator !== 'icon' && necessityIndicator !== 'label') {\n    return null;\n  }\n\n  if (isRequired) {\n    if (necessityIndicator === 'icon') {\n      return (\n        <>\n          {separator}\n          <span\n            aria-label={\n              includeNecessityIndicatorInAccessibilityName\n                ? requiredLabel\n                : undefined\n            }\n          >\n            {REQUIRED_ICON}\n          </span>\n        </>\n      );\n    }\n\n    // Hidden from screen readers by default, because `aria-required` on the\n    // input already announces it and repeating it in the name is noise.\n    return (\n      <>\n        {separator}\n        <NecessityLabelElement\n          aria-hidden={\n            !includeNecessityIndicatorInAccessibilityName ? true : undefined\n          }\n        >\n          {requiredLabel}\n        </NecessityLabelElement>\n      </>\n    );\n  }\n\n  // There is no icon form of \"optional\", so the note is rendered whichever\n  // indicator was asked for. Nothing else tells a screen reader the field is\n  // optional, so this one stays in the accessible name.\n  if (!isOptional) return null;\n\n  return (\n    <>\n      {separator}\n      <NecessityLabelElement>\n        {t('form.optional', '(optional)')}\n      </NecessityLabelElement>\n    </>\n  );\n}\n\nexport const INLINE_LABEL_STYLES: Styles = {\n  preset: 't3',\n  color: {\n    '': '#dark-02',\n    invalid: '#danger-text',\n  },\n} as const;\n\nexport const LABEL_STYLES: Styles = {\n  display: 'block',\n  preset: {\n    '': 't3m',\n    'size=small': 't4',\n  },\n  color: {\n    '': '#dark',\n    invalid: '#danger-text',\n  },\n  width: {\n    '': 'initial',\n    side: '($label-width, initial)',\n    split: 'initial',\n  },\n};\n\nconst LabelElement = tasty({\n  as: 'label',\n  qa: 'Label',\n  styles: LABEL_STYLES,\n});\n\nexport interface CubeLabelProps\n  extends BaseProps,\n    ContainerStyleProps,\n    ValidationProps {\n  labelPosition?: LabelPosition;\n  necessityIndicator?: NecessityIndicator | null;\n  isRequired?: boolean;\n  isOptional?: boolean;\n  includeNecessityIndicatorInAccessibilityName?: boolean;\n  htmlFor?: string;\n  for?: string;\n  size?: 'medium' | 'small';\n}\n\nfunction Label(props: CubeLabelProps, ref) {\n  props = useProviderProps<CubeLabelProps>(props);\n\n  const { t } = useI18n();\n\n  let {\n    as,\n    qa,\n    children,\n    labelPosition = 'top',\n    isRequired,\n    isOptional,\n    necessityIndicator,\n    includeNecessityIndicatorInAccessibilityName = false,\n    htmlFor,\n    isDisabled,\n    isInvalid,\n    isValid,\n    size = 'medium',\n    for: labelFor,\n    ...otherProps\n  } = props;\n\n  let domRef = useObjectRef(ref);\n\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  const mark = (\n    <NecessityIndicatorMark\n      isRequired={isRequired}\n      isOptional={isOptional}\n      necessityIndicator={necessityIndicator}\n      includeNecessityIndicatorInAccessibilityName={\n        includeNecessityIndicatorInAccessibilityName\n      }\n    />\n  );\n\n  return (\n    <LabelElement\n      {...filterBaseProps(otherProps)}\n      ref={domRef}\n      styles={styles}\n      htmlFor={labelFor || htmlFor}\n      data-size={size}\n      mods={{\n        side: labelPosition === 'side',\n        disabled: isDisabled,\n        ...getValidationMods({ isInvalid, isValid }),\n      }}\n    >\n      {/*\n        A non-string child is a tree the caller laid out \\u2014 `FieldWrapper`'s\n        full-width `Flex`, for one \\u2014 and appending the marker after it would put\n        it at the far end of that layout rather than next to the label text. So\n        the marker is only appended here for plain-text labels; callers that\n        build their own tree place `NecessityIndicatorMark` where it belongs.\n      */}\n      {typeof children !== 'string' ? (\n        children\n      ) : (\n        <>\n          {children}\n          {mark}\n        </>\n      )}\n    </LabelElement>\n  );\n}\n\nlet _Label = forwardRef(Label);\n\n_Label.displayName = 'Label';\n\nexport { _Label as Label };\n"],"mappings":"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"}

package/dist/components/form/legacy-tooltip.js

@@ -0,0 +1,28 @@
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
+import { warn } from "../../utils/warnings.js";
+
+//#region src/components/form/legacy-tooltip.ts
+let hasWarnedAboutLegacyTooltip = false;
+/**
+* `tooltip` used to be the field-level prop for the label's info badge. It is
+* `labelTooltip` now, and TypeScript flags every old call site — but not a JS
+* caller, an `as any`, or an untyped spread. Those would lose the badge
+* without a word, so say it once.
+*
+* Called by `wrapWithField` once it knows a label renders (without one the old
+* prop did nothing either), and by the legacy `Field` and `FieldWrapper`,
+* which a caller can reach without going through `wrapWithField`.
+*
+* A migration aid; remove once consumers are off `tooltip`.
+*/
+function warnAboutLegacyTooltip(props) {
+	if (hasWarnedAboutLegacyTooltip) return;
+	const { tooltip } = props;
+	if (tooltip == null || tooltip === false) return;
+	hasWarnedAboutLegacyTooltip = true;
+	warn("A field received `tooltip`, which no longer renders the info badge next to its label. Pass the badge content as `labelTooltip` instead.");
+}
+
+//#endregion
+export { warnAboutLegacyTooltip };
+//# sourceMappingURL=legacy-tooltip.js.map

package/dist/components/form/legacy-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legacy-tooltip.js","names":["warn","hasWarnedAboutLegacyTooltip","warnAboutLegacyTooltip","props","tooltip"],"sources":["../../../src/components/form/legacy-tooltip.ts"],"sourcesContent":["import { warn } from '../../utils/warnings';\n\nlet hasWarnedAboutLegacyTooltip = false;\n\n/**\n * `tooltip` used to be the field-level prop for the label's info badge. It is\n * `labelTooltip` now, and TypeScript flags every old call site — but not a JS\n * caller, an `as any`, or an untyped spread. Those would lose the badge\n * without a word, so say it once.\n *\n * Called by `wrapWithField` once it knows a label renders (without one the old\n * prop did nothing either), and by the legacy `Field` and `FieldWrapper`,\n * which a caller can reach without going through `wrapWithField`.\n *\n * A migration aid; remove once consumers are off `tooltip`.\n */\nexport function warnAboutLegacyTooltip(props: object) {\n  if (hasWarnedAboutLegacyTooltip) return;\n\n  const { tooltip } = props as { tooltip?: unknown };\n\n  if (tooltip == null || tooltip === false) return;\n\n  hasWarnedAboutLegacyTooltip = true;\n\n  warn(\n    'A field received `tooltip`, which no longer renders the info badge next to its label. Pass the badge content as `labelTooltip` instead.',\n  );\n}\n"],"mappings":";;;;AAEA,IAAIC,8BAA8B;;;;;;;;;;;;;AAclC,SAAgBC,uBAAuBC,OAAe;AACpD,KAAIF,4BAA6B;CAEjC,MAAM,EAAEG,YAAYD;AAEpB,KAAIC,WAAW,QAAQA,YAAY,MAAO;AAE1CH,+BAA8B;AAE9BD,MACE,0IACD"}

package/dist/components/form/validation/ValidationIndicator.js

@@ -1,8 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { hasValidationState } from "./resolve-validation-props.js";
 import { InvalidIcon } from "../../shared/InvalidIcon.js";
 import { ValidIcon } from "../../shared/ValidIcon.js";
+import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/form/validation/ValidationIndicator.tsx
@@ -24,12 +25,26 @@ function hasValidationIndicator(props) {
 * loading indicator.
 */
 function ValidationIndicator(props) {
+	const $ = c(5);
 	const { isLoading } = props;
 	if (!hasValidationIndicator(props)) return null;
-	return /* @__PURE__ */ jsx("div", {
-		"data-element": "State",
-		children: isLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" }) : getValidationIcon(props)
-	});
+	let t0;
+	if ($[0] !== isLoading || $[1] !== props) {
+		t0 = isLoading ? /* @__PURE__ */ jsx(LoadingIcon, { "data-element": "InputIcon" }) : getValidationIcon(props);
+		$[0] = isLoading;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			"data-element": "State",
+			children: t0
+		});
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 
 //#endregion

package/dist/components/form/validation/ValidationIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationIndicator.js","names":[],"sources":["../../../../src/components/form/validation/ValidationIndicator.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { ValidationProps } from '../../../shared/index';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\n\nimport { hasValidationState } from './resolve-validation-props';\n\nexport interface ValidationIndicatorProps extends ValidationProps {\n  isLoading?: boolean;\n}\n\n/** The validation icon for the current state, or `null` when there is nothing to show */\nexport function getValidationIcon({\n  isInvalid,\n  isValid,\n}: ValidationProps): ReactElement | null {\n  if (isInvalid) return InvalidIcon;\n  if (isValid) return ValidIcon;\n\n  return null;\n}\n\n/**\n * Whether an input needs to render the `data-element=\"State\"` block. The loading indicator replaces the\n * validation icon while the input is loading.\n */\nexport function hasValidationIndicator(props: ValidationIndicatorProps) {\n  return !!props.isLoading || hasValidationState(props);\n}\n\n/**\n * Renders the validation state of an input as a suffix: either the validation icon or, while loading, the\n * loading indicator.\n */\nexport function ValidationIndicator(props: ValidationIndicatorProps) {\n  const { isLoading } = props;\n\n  if (!hasValidationIndicator(props)) {\n    return null;\n  }\n\n  return (\n    <div data-element=\"State\">\n      {isLoading ? (\n        <LoadingIcon data-element=\"InputIcon\" />\n      ) : (\n        getValidationIcon(props)\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAcA,SAAgB,kBAAkB,EAChC,WACA,WACuC;AACvC,KAAI,UAAW,QAAO;AACtB,KAAI,QAAS,QAAO;AAEpB,QAAO;;;;;;AAOT,SAAgB,uBAAuB,OAAiC;AACtE,QAAO,CAAC,CAAC,MAAM,aAAa,mBAAmB,MAAM;;;;;;AAOvD,SAAgB,oBAAoB,OAAiC;CACnE,MAAM,EAAE,cAAc;AAEtB,KAAI,CAAC,uBAAuB,MAAM,CAChC,QAAO;AAGT,QACE,oBAAC;EAAI,gBAAa;YACf,YACC,oBAAC,eAAY,gBAAa,cAAc,GAExC,kBAAkB,MAAM;GAEtB"}
+{"version":3,"file":"ValidationIndicator.js","names":["ReactElement","LoadingIcon","ValidationProps","InvalidIcon","ValidIcon","hasValidationState","ValidationIndicatorProps","isLoading","getValidationIcon","isInvalid","isValid","hasValidationIndicator","props","ValidationIndicator","$","_c","t0","t1"],"sources":["../../../../src/components/form/validation/ValidationIndicator.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { LoadingIcon } from '../../../icons/LoadingIcon';\nimport { ValidationProps } from '../../../shared/index';\nimport { InvalidIcon } from '../../shared/InvalidIcon';\nimport { ValidIcon } from '../../shared/ValidIcon';\n\nimport { hasValidationState } from './resolve-validation-props';\n\nexport interface ValidationIndicatorProps extends ValidationProps {\n  isLoading?: boolean;\n}\n\n/** The validation icon for the current state, or `null` when there is nothing to show */\nexport function getValidationIcon({\n  isInvalid,\n  isValid,\n}: ValidationProps): ReactElement | null {\n  if (isInvalid) return InvalidIcon;\n  if (isValid) return ValidIcon;\n\n  return null;\n}\n\n/**\n * Whether an input needs to render the `data-element=\"State\"` block. The loading indicator replaces the\n * validation icon while the input is loading.\n */\nexport function hasValidationIndicator(props: ValidationIndicatorProps) {\n  return !!props.isLoading || hasValidationState(props);\n}\n\n/**\n * Renders the validation state of an input as a suffix: either the validation icon or, while loading, the\n * loading indicator.\n */\nexport function ValidationIndicator(props: ValidationIndicatorProps) {\n  const { isLoading } = props;\n\n  if (!hasValidationIndicator(props)) {\n    return null;\n  }\n\n  return (\n    <div data-element=\"State\">\n      {isLoading ? (\n        <LoadingIcon data-element=\"InputIcon\" />\n      ) : (\n        getValidationIcon(props)\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AAcA,SAAgBQ,kBAAkB,EAChCC,WACAC,WACuC;AACvC,KAAID,UAAW,QAAON;AACtB,KAAIO,QAAS,QAAON;AAEpB,QAAO;;;;;;AAOT,SAAgBO,uBAAuBC,OAAiC;AACtE,QAAO,CAAC,CAACA,MAAML,aAAaF,mBAAmBO,MAAM;;;;;;AAOvD,SAAOC,oBAAAD,OAAA;CAAA,MAAAE,IAAAC,EAAA,EAAA;CACL,MAAA,EAAAR,cAAsBK;AAEtB,KAAI,CAACD,uBAAuBC,MAAM,CAAA,QACzB;CACR,IAAAI;AAAA,KAAAF,EAAA,OAAAP,aAAAO,EAAA,OAAAF,OAAA;AAIII,OAAAT,YACC,oBAAC,eAAyB,gBAAA,cAG3B,GADCC,kBAAkBI,MACnB;AAAAE,IAAA,KAAAP;AAAAO,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAAA,IAAAG;AAAA,KAAAH,EAAA,OAAAE,IAAA;AALHC,OAAA,oBAAA;GAAkB,gBAAA;aACfD;IAKG;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAAA,QANNG"}

package/dist/components/form/validation/resolve-validation-props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 //#region src/components/form/validation/resolve-validation-props.ts
 /**
 * Normalizes the validation props of a field into a pair of booleans.

package/dist/components/form/validation/resolve-validation-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolve-validation-props.js","names":[],"sources":["../../../../src/components/form/validation/resolve-validation-props.ts"],"sourcesContent":["import { ValidationProps, ValidationState } from '../../../shared/index';\n\nexport interface ResolvableValidationProps extends ValidationProps {\n  /** @deprecated Use `isInvalid` / `isValid` instead. */\n  validationState?: ValidationState;\n}\n\nexport interface ResolvedValidationProps {\n  isInvalid: boolean | undefined;\n  isValid: boolean | undefined;\n}\n\n/**\n * Normalizes the validation props of a field into a pair of booleans.\n *\n * When none of `isInvalid`, `isValid` and the deprecated `validationState` is provided, both flags stay\n * `undefined` so the caller can fall back to a derived state (form errors, `showValid`, …). As soon as any\n * of them is provided, both flags become definite booleans and no fallback applies.\n *\n * `isInvalid` always wins over `isValid`.\n */\nexport function resolveValidationProps(\n  props: ResolvableValidationProps,\n): ResolvedValidationProps {\n  const { isInvalid, isValid, validationState } = props;\n\n  if (\n    isInvalid === undefined &&\n    isValid === undefined &&\n    validationState === undefined\n  ) {\n    return { isInvalid: undefined, isValid: undefined };\n  }\n\n  const resolvedIsInvalid = isInvalid ?? validationState === 'invalid';\n\n  return {\n    isInvalid: resolvedIsInvalid,\n    isValid: resolvedIsInvalid ? false : isValid ?? validationState === 'valid',\n  };\n}\n\n/** Whether the field has a validation state worth rendering an indicator for */\nexport function hasValidationState({\n  isInvalid,\n  isValid,\n}: ValidationProps): boolean {\n  return !!isInvalid || !!isValid;\n}\n\n/** Tasty modifiers for the validation state. Use instead of hand-writing `invalid`/`valid` mods. */\nexport function getValidationMods({ isInvalid, isValid }: ValidationProps) {\n  return {\n    invalid: !!isInvalid,\n    valid: !!isValid && !isInvalid,\n  };\n}\n\n/**\n * Maps the validation state onto a theme name for triggers and items.\n *\n * By default only the invalid state is mapped, which keeps neutral triggers neutral while the suffix icon\n * communicates the valid state. Pass `includeValid` to also map the valid state onto `success`.\n */\nexport function getValidationTheme<T extends string | undefined>(\n  theme: T,\n  { isInvalid, isValid }: ValidationProps,\n  options: { includeValid?: boolean } = {},\n): T | 'danger' | 'success' {\n  if (isInvalid) return 'danger';\n  if (options.includeValid && isValid) return 'success';\n\n  return theme;\n}\n"],"mappings":";;;;;;;;;;;AAqBA,SAAgB,uBACd,OACyB;CACzB,MAAM,EAAE,WAAW,SAAS,oBAAoB;AAEhD,KACE,cAAc,UACd,YAAY,UACZ,oBAAoB,OAEpB,QAAO;EAAE,WAAW;EAAW,SAAS;EAAW;CAGrD,MAAM,oBAAoB,aAAa,oBAAoB;AAE3D,QAAO;EACL,WAAW;EACX,SAAS,oBAAoB,QAAQ,WAAW,oBAAoB;EACrE;;;AAIH,SAAgB,mBAAmB,EACjC,WACA,WAC2B;AAC3B,QAAO,CAAC,CAAC,aAAa,CAAC,CAAC;;;AAI1B,SAAgB,kBAAkB,EAAE,WAAW,WAA4B;AACzE,QAAO;EACL,SAAS,CAAC,CAAC;EACX,OAAO,CAAC,CAAC,WAAW,CAAC;EACtB;;;;;;;;AASH,SAAgB,mBACd,OACA,EAAE,WAAW,WACb,UAAsC,EAAE,EACd;AAC1B,KAAI,UAAW,QAAO;AACtB,KAAI,QAAQ,gBAAgB,QAAS,QAAO;AAE5C,QAAO"}
+{"version":3,"file":"resolve-validation-props.js","names":["ValidationProps","ValidationState","ResolvableValidationProps","validationState","ResolvedValidationProps","isInvalid","isValid","resolveValidationProps","props","undefined","resolvedIsInvalid","hasValidationState","getValidationMods","invalid","valid","getValidationTheme","theme","T","options","includeValid"],"sources":["../../../../src/components/form/validation/resolve-validation-props.ts"],"sourcesContent":["import { ValidationProps, ValidationState } from '../../../shared/index';\n\nexport interface ResolvableValidationProps extends ValidationProps {\n  /** @deprecated Use `isInvalid` / `isValid` instead. */\n  validationState?: ValidationState;\n}\n\nexport interface ResolvedValidationProps {\n  isInvalid: boolean | undefined;\n  isValid: boolean | undefined;\n}\n\n/**\n * Normalizes the validation props of a field into a pair of booleans.\n *\n * When none of `isInvalid`, `isValid` and the deprecated `validationState` is provided, both flags stay\n * `undefined` so the caller can fall back to a derived state (form errors, `showValid`, …). As soon as any\n * of them is provided, both flags become definite booleans and no fallback applies.\n *\n * `isInvalid` always wins over `isValid`.\n */\nexport function resolveValidationProps(\n  props: ResolvableValidationProps,\n): ResolvedValidationProps {\n  const { isInvalid, isValid, validationState } = props;\n\n  if (\n    isInvalid === undefined &&\n    isValid === undefined &&\n    validationState === undefined\n  ) {\n    return { isInvalid: undefined, isValid: undefined };\n  }\n\n  const resolvedIsInvalid = isInvalid ?? validationState === 'invalid';\n\n  return {\n    isInvalid: resolvedIsInvalid,\n    isValid: resolvedIsInvalid ? false : isValid ?? validationState === 'valid',\n  };\n}\n\n/** Whether the field has a validation state worth rendering an indicator for */\nexport function hasValidationState({\n  isInvalid,\n  isValid,\n}: ValidationProps): boolean {\n  return !!isInvalid || !!isValid;\n}\n\n/** Tasty modifiers for the validation state. Use instead of hand-writing `invalid`/`valid` mods. */\nexport function getValidationMods({ isInvalid, isValid }: ValidationProps) {\n  return {\n    invalid: !!isInvalid,\n    valid: !!isValid && !isInvalid,\n  };\n}\n\n/**\n * Maps the validation state onto a theme name for triggers and items.\n *\n * By default only the invalid state is mapped, which keeps neutral triggers neutral while the suffix icon\n * communicates the valid state. Pass `includeValid` to also map the valid state onto `success`.\n */\nexport function getValidationTheme<T extends string | undefined>(\n  theme: T,\n  { isInvalid, isValid }: ValidationProps,\n  options: { includeValid?: boolean } = {},\n): T | 'danger' | 'success' {\n  if (isInvalid) return 'danger';\n  if (options.includeValid && isValid) return 'success';\n\n  return theme;\n}\n"],"mappings":";;;;;;;;;;;AAqBA,SAAgBO,uBACdC,OACyB;CACzB,MAAM,EAAEH,WAAWC,SAASH,oBAAoBK;AAEhD,KACEH,cAAcI,UACdH,YAAYG,UACZN,oBAAoBM,OAEpB,QAAO;EAAEJ,WAAWI;EAAWH,SAASG;EAAW;CAGrD,MAAMC,oBAAoBL,aAAaF,oBAAoB;AAE3D,QAAO;EACLE,WAAWK;EACXJ,SAASI,oBAAoB,QAAQJ,WAAWH,oBAAoB;EACrE;;;AAIH,SAAgBQ,mBAAmB,EACjCN,WACAC,WAC2B;AAC3B,QAAO,CAAC,CAACD,aAAa,CAAC,CAACC;;;AAI1B,SAAgBM,kBAAkB,EAAEP,WAAWC,WAA4B;AACzE,QAAO;EACLO,SAAS,CAAC,CAACR;EACXS,OAAO,CAAC,CAACR,WAAW,CAACD;EACtB;;;;;;;;AASH,SAAgBU,mBACdC,OACA,EAAEX,WAAWC,WACbY,UAAsC,EAAE,EACd;AAC1B,KAAIb,UAAW,QAAO;AACtB,KAAIa,QAAQC,gBAAgBb,QAAS,QAAO;AAE5C,QAAOU"}

package/dist/components/form/validation/use-validation-props.js

@@ -1,6 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { useWarn } from "../../../_internal/hooks/use-warn.js";
 import { resolveValidationProps } from "./resolve-validation-props.js";
+import { c } from "react-compiler-runtime";
 
 //#region src/components/form/validation/use-validation-props.ts
 /**
@@ -12,16 +13,41 @@ import { resolveValidationProps } from "./resolve-validation-props.js";
 * check of an all-optional constraint.
 */
 function useValidationProps(props) {
-	useWarn(props.validationState !== void 0, {
-		key: "validation-state-deprecated",
-		args: ["The \"validationState\" property is deprecated. Use \"isInvalid\" and \"isValid\" instead."]
-	});
+	const $ = c(8);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			key: "validation-state-deprecated",
+			args: ["The \"validationState\" property is deprecated. Use \"isInvalid\" and \"isValid\" instead."]
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	useWarn(props.validationState !== void 0, t0);
 	if (props.validationState === void 0 && props.isInvalid === void 0 && props.isValid === void 0) return props;
-	const { validationState: _validationState, ...rest } = props;
-	return {
-		...rest,
-		...resolveValidationProps(props)
-	};
+	let rest;
+	if ($[1] !== props) {
+		const { validationState: _validationState, ...t1 } = props;
+		rest = t1;
+		$[1] = props;
+		$[2] = rest;
+	} else rest = $[2];
+	let t1;
+	if ($[3] !== props) {
+		t1 = resolveValidationProps(props);
+		$[3] = props;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== rest || $[6] !== t1) {
+		t2 = {
+			...rest,
+			...t1
+		};
+		$[5] = rest;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 }
 
 //#endregion

package/dist/components/form/validation/use-validation-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-validation-props.js","names":[],"sources":["../../../../src/components/form/validation/use-validation-props.ts"],"sourcesContent":["import { useWarn } from '../../../_internal/index';\n\nimport {\n  ResolvableValidationProps,\n  resolveValidationProps,\n} from './resolve-validation-props';\n\n/**\n * Resolves `isInvalid` / `isValid` from the props and removes the deprecated `validationState` prop, so\n * component bodies only ever deal with booleans.\n *\n * The validation props are intersected into the parameter instead of constraining `T`, because prop types\n * built with `Omit` over a `Props` index signature expose no named properties and would fail the weak type\n * check of an all-optional constraint.\n */\nexport function useValidationProps<T>(props: T & ResolvableValidationProps): T {\n  useWarn(props.validationState !== undefined, {\n    key: 'validation-state-deprecated',\n    args: [\n      'The \"validationState\" property is deprecated. Use \"isInvalid\" and \"isValid\" instead.',\n    ],\n  });\n\n  if (\n    props.validationState === undefined &&\n    props.isInvalid === undefined &&\n    props.isValid === undefined\n  ) {\n    return props;\n  }\n\n  const { validationState: _validationState, ...rest } = props;\n\n  return { ...rest, ...resolveValidationProps(props) } as T;\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAgB,mBAAsB,OAAyC;AAC7E,SAAQ,MAAM,oBAAoB,QAAW;EAC3C,KAAK;EACL,MAAM,CACJ,6FACD;EACF,CAAC;AAEF,KACE,MAAM,oBAAoB,UAC1B,MAAM,cAAc,UACpB,MAAM,YAAY,OAElB,QAAO;CAGT,MAAM,EAAE,iBAAiB,kBAAkB,GAAG,SAAS;AAEvD,QAAO;EAAE,GAAG;EAAM,GAAG,uBAAuB,MAAM;EAAE"}
+{"version":3,"file":"use-validation-props.js","names":["useWarn","ResolvableValidationProps","resolveValidationProps","useValidationProps","props","$","_c","t0","Symbol","for","key","args","validationState","undefined","isInvalid","isValid","rest","_validationState","t1","t2","T"],"sources":["../../../../src/components/form/validation/use-validation-props.ts"],"sourcesContent":["import { useWarn } from '../../../_internal/index';\n\nimport {\n  ResolvableValidationProps,\n  resolveValidationProps,\n} from './resolve-validation-props';\n\n/**\n * Resolves `isInvalid` / `isValid` from the props and removes the deprecated `validationState` prop, so\n * component bodies only ever deal with booleans.\n *\n * The validation props are intersected into the parameter instead of constraining `T`, because prop types\n * built with `Omit` over a `Props` index signature expose no named properties and would fail the weak type\n * check of an all-optional constraint.\n */\nexport function useValidationProps<T>(props: T & ResolvableValidationProps): T {\n  useWarn(props.validationState !== undefined, {\n    key: 'validation-state-deprecated',\n    args: [\n      'The \"validationState\" property is deprecated. Use \"isInvalid\" and \"isValid\" instead.',\n    ],\n  });\n\n  if (\n    props.validationState === undefined &&\n    props.isInvalid === undefined &&\n    props.isValid === undefined\n  ) {\n    return props;\n  }\n\n  const { validationState: _validationState, ...rest } = props;\n\n  return { ...rest, ...resolveValidationProps(props) } as T;\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAOG,mBAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAG,OAAAC,IAAA,4BAAA,EAAA;AACwCF,OAAA;GAAAG,KACtC;GAA6BC,MAC5B,CACJ,6FAAsF;GAEzF;AAAAN,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AALDL,SAAQI,MAAKQ,oBAAqBC,QAAWN,GAK3C;AAEF,KACEH,MAAKQ,oBAAqBC,UAC1BT,MAAKU,cAAeD,UACpBT,MAAKW,YAAaF,OAAS,QAEpBT;CACR,IAAAY;AAAA,KAAAX,EAAA,OAAAD,OAAA;EAED,MAAA,EAAAQ,iBAAAK,kBAAA,GAAAC,OAAuDd;AAAvDY,SAAAE;AAA6Db,IAAA,KAAAD;AAAAC,IAAA,KAAAW;OAAAA,QAAAX,EAAA;CAAA,IAAAa;AAAA,KAAAb,EAAA,OAAAD,OAAA;AAExCc,OAAAhB,uBAAuBE,MAAM;AAAAC,IAAA,KAAAD;AAAAC,IAAA,KAAAa;OAAAA,MAAAb,EAAA;CAAA,IAAAc;AAAA,KAAAd,EAAA,OAAAW,QAAAX,EAAA,OAAAa,IAAA;AAA3CC,OAAA;GAAA,GAAKH;GAAI,GAAKE;GAA+B;AAAAb,IAAA,KAAAW;AAAAX,IAAA,KAAAa;AAAAb,IAAA,KAAAc;OAAAA,MAAAd,EAAA;AAAA,QAA7Cc"}

package/dist/components/form/wrapper.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.184.0 | Cube Dev Team */
 import { mergeProps } from "../../utils/react/mergeProps.js";
+import { warnAboutLegacyTooltip } from "./legacy-tooltip.js";
 import { FieldWrapper } from "./FieldWrapper/FieldWrapper.js";
 import { jsx } from "react/jsx-runtime";
 
@@ -9,8 +10,9 @@ import { jsx } from "react/jsx-runtime";
 * Only the field wrapper props are forwarded, so callers can pass their whole props object as is.
 */
 function wrapWithField(component, ref, props) {
-	let { forceField, label, extra, labelPosition = "top", labelStyles, isRequired, isOptional, isDisabled, necessityIndicator, message, messageStyles, description, errorMessage, isInvalid, isValid, labelProps, fieldProps, fieldStyles, requiredMark = true, tooltip, isHidden, labelSuffix } = props;
+	let { forceField, label, extra, labelPosition = "top", labelStyles, isRequired, isOptional, isDisabled, necessityIndicator, message, messageStyles, description, errorMessage, isInvalid, isValid, labelProps, fieldProps, fieldStyles, requiredMark = true, labelTooltip, isHidden, labelSuffix } = props;
 	if (!label && !forceField) return component;
+	warnAboutLegacyTooltip(props);
 	const mergedFieldProps = fieldStyles ? mergeProps(fieldProps, { styles: fieldStyles }) : fieldProps;
 	const mergedLabelProps = labelStyles ? mergeProps(labelProps, { styles: labelStyles }) : labelProps;
 	const { id: _id, ...fieldPropsWithoutId } = mergedFieldProps || {};
@@ -31,7 +33,7 @@ function wrapWithField(component, ref, props) {
 		isInvalid,
 		isValid,
 		requiredMark,
-		tooltip,
+		labelTooltip,
 		isHidden,
 		labelSuffix,
 		Component: component,

package/dist/components/form/wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapper.js","names":[],"sources":["../../../src/components/form/wrapper.tsx"],"sourcesContent":["import { DOMRef, FocusableRef } from '@react-types/shared';\nimport { BaseProps } from '@tenphi/tasty';\nimport { ReactElement, RefObject } from 'react';\n\nimport { FieldBaseProps, FormBaseProps } from '../../shared/index';\nimport { mergeProps } from '../../utils/react/index';\n\nimport { FieldWrapper } from './FieldWrapper/index';\n\n// `children` is intentionally omitted: the input is passed as `component`, never through props.\ninterface WrapWithFieldProps\n  extends FieldBaseProps,\n    Omit<BaseProps, 'children'>,\n    FormBaseProps {}\n\n/**\n * Wraps an input with the field chrome (label, description, message) when it has a `label` or `forceField`.\n * Only the field wrapper props are forwarded, so callers can pass their whole props object as is.\n */\nexport function wrapWithField<T extends WrapWithFieldProps>(\n  component: ReactElement,\n  ref: RefObject<unknown> | FocusableRef<HTMLElement> | DOMRef<HTMLElement>,\n  props: T,\n) {\n  let {\n    forceField,\n    label,\n    extra,\n    labelPosition = 'top',\n    labelStyles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    necessityIndicator,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    isInvalid,\n    isValid,\n    labelProps,\n    fieldProps,\n    fieldStyles,\n    requiredMark = true,\n    tooltip,\n    isHidden,\n    labelSuffix,\n  } = props;\n\n  if (!label && !forceField) {\n    return component;\n  }\n\n  // Merge fieldStyles as shorthand for fieldProps.styles (fieldStyles takes priority)\n  const mergedFieldProps = fieldStyles\n    ? mergeProps(fieldProps, { styles: fieldStyles })\n    : fieldProps;\n\n  // Merge labelStyles as shorthand for labelProps.styles (labelStyles takes priority)\n  const mergedLabelProps = labelStyles\n    ? mergeProps(labelProps, { styles: labelStyles })\n    : labelProps;\n\n  // Remove id from fieldProps to avoid duplication (id should be on the input element, not the field wrapper)\n  const { id: _id, ...fieldPropsWithoutId } = (mergedFieldProps as any) || {};\n\n  return (\n    <FieldWrapper\n      {...{\n        label,\n        extra,\n        labelPosition,\n        isRequired,\n        isOptional,\n        isDisabled,\n        necessityIndicator,\n        labelProps: mergedLabelProps,\n        fieldProps: fieldPropsWithoutId,\n        message,\n        messageStyles,\n        description,\n        errorMessage,\n        isInvalid,\n        isValid,\n        requiredMark,\n        tooltip,\n        isHidden,\n        labelSuffix,\n        Component: component,\n        ref,\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,cACd,WACA,KACA,OACA;CACA,IAAI,EACF,YACA,OACA,OACA,gBAAgB,OAChB,aACA,YACA,YACA,YACA,oBACA,SACA,eACA,aACA,cACA,WACA,SACA,YACA,YACA,aACA,eAAe,MACf,SACA,UACA,gBACE;AAEJ,KAAI,CAAC,SAAS,CAAC,WACb,QAAO;CAIT,MAAM,mBAAmB,cACrB,WAAW,YAAY,EAAE,QAAQ,aAAa,CAAC,GAC/C;CAGJ,MAAM,mBAAmB,cACrB,WAAW,YAAY,EAAE,QAAQ,aAAa,CAAC,GAC/C;CAGJ,MAAM,EAAE,IAAI,KAAK,GAAG,wBAAyB,oBAA4B,EAAE;AAE3E,QACE,oBAAC;EAEG;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAAY;EACZ,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX;GAEF"}
+{"version":3,"file":"wrapper.js","names":["DOMRef","FocusableRef","BaseProps","ReactElement","RefObject","FieldBaseProps","FormBaseProps","mergeProps","FieldWrapper","warnAboutLegacyTooltip","WrapWithFieldProps","Omit","wrapWithField","component","ref","HTMLElement","props","T","forceField","label","extra","labelPosition","labelStyles","isRequired","isOptional","isDisabled","necessityIndicator","message","messageStyles","description","errorMessage","isInvalid","isValid","labelProps","fieldProps","fieldStyles","requiredMark","labelTooltip","isHidden","labelSuffix","mergedFieldProps","styles","mergedLabelProps","id","_id","fieldPropsWithoutId","Component"],"sources":["../../../src/components/form/wrapper.tsx"],"sourcesContent":["import { DOMRef, FocusableRef } from '@react-types/shared';\nimport { BaseProps } from '@tenphi/tasty';\nimport { ReactElement, RefObject } from 'react';\n\nimport { FieldBaseProps, FormBaseProps } from '../../shared/index';\nimport { mergeProps } from '../../utils/react/index';\n\nimport { FieldWrapper } from './FieldWrapper/index';\nimport { warnAboutLegacyTooltip } from './legacy-tooltip';\n\n// `children` is intentionally omitted: the input is passed as `component`, never through props.\ninterface WrapWithFieldProps\n  extends FieldBaseProps,\n    Omit<BaseProps, 'children'>,\n    FormBaseProps {}\n\n/**\n * Wraps an input with the field chrome (label, description, message) when it has a `label` or `forceField`.\n * Only the field wrapper props are forwarded, so callers can pass their whole props object as is.\n */\nexport function wrapWithField<T extends WrapWithFieldProps>(\n  component: ReactElement,\n  ref: RefObject<unknown> | FocusableRef<HTMLElement> | DOMRef<HTMLElement>,\n  props: T,\n) {\n  let {\n    forceField,\n    label,\n    extra,\n    labelPosition = 'top',\n    labelStyles,\n    isRequired,\n    isOptional,\n    isDisabled,\n    necessityIndicator,\n    message,\n    messageStyles,\n    description,\n    errorMessage,\n    isInvalid,\n    isValid,\n    labelProps,\n    fieldProps,\n    fieldStyles,\n    requiredMark = true,\n    labelTooltip,\n    isHidden,\n    labelSuffix,\n  } = props;\n\n  if (!label && !forceField) {\n    return component;\n  }\n\n  warnAboutLegacyTooltip(props);\n\n  // Merge fieldStyles as shorthand for fieldProps.styles (fieldStyles takes priority)\n  const mergedFieldProps = fieldStyles\n    ? mergeProps(fieldProps, { styles: fieldStyles })\n    : fieldProps;\n\n  // Merge labelStyles as shorthand for labelProps.styles (labelStyles takes priority)\n  const mergedLabelProps = labelStyles\n    ? mergeProps(labelProps, { styles: labelStyles })\n    : labelProps;\n\n  // Remove id from fieldProps to avoid duplication (id should be on the input element, not the field wrapper)\n  const { id: _id, ...fieldPropsWithoutId } = (mergedFieldProps as any) || {};\n\n  return (\n    <FieldWrapper\n      {...{\n        label,\n        extra,\n        labelPosition,\n        isRequired,\n        isOptional,\n        isDisabled,\n        necessityIndicator,\n        labelProps: mergedLabelProps,\n        fieldProps: fieldPropsWithoutId,\n        message,\n        messageStyles,\n        description,\n        errorMessage,\n        isInvalid,\n        isValid,\n        requiredMark,\n        labelTooltip,\n        isHidden,\n        labelSuffix,\n        Component: component,\n        ref,\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;AAoBA,SAAgBY,cACdC,WACAC,KACAE,OACA;CACA,IAAI,EACFE,YACAC,OACAC,OACAC,gBAAgB,OAChBC,aACAC,YACAC,YACAC,YACAC,oBACAC,SACAC,eACAC,aACAC,cACAC,WACAC,SACAC,YACAC,YACAC,aACAC,eAAe,MACfC,cACAC,UACAC,gBACEvB;AAEJ,KAAI,CAACG,SAAS,CAACD,WACb,QAAOL;AAGTJ,wBAAuBO,MAAM;CAG7B,MAAMwB,mBAAmBL,cACrB5B,WAAW2B,YAAY,EAAEO,QAAQN,aAAa,CAAC,GAC/CD;CAGJ,MAAMQ,mBAAmBpB,cACrBf,WAAW0B,YAAY,EAAEQ,QAAQnB,aAAa,CAAC,GAC/CW;CAGJ,MAAM,EAAEU,IAAIC,KAAK,GAAGC,wBAAyBL,oBAA4B,EAAE;AAE3E,QACE,oBAAC;EAEGrB;EACAC;EACAC;EACAE;EACAC;EACAC;EACAC;EACAO,YAAYS;EACZR,YAAYW;EACZlB;EACAC;EACAC;EACAC;EACAC;EACAC;EACAI;EACAC;EACAC;EACAC;EACAO,WAAWjC;EACXC;GAEF"}