@cube-dev/ui-kit 0.181.0 → 0.183.0

package/dist/components/fields/RadioGroup/RadioGroup.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
@@ -6,6 +6,7 @@ import { FormScopeMask } from "../../form/Form/Form.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
 import { RadioContext } from "./context.js";
+import { c } from "react-compiler-runtime";
 import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -50,58 +51,158 @@ const RadioGroupElement = tasty({
 	}
 });
 function RadioGroup(props, ref) {
+	const $ = c(47);
 	let orientation = props.orientation;
-	props = castNullableStringValue(props);
-	props = useFieldProps(props, { defaultValidationTrigger: "onChange" });
-	let { qa, id, isDisabled, isRequired, labelPosition = "top", isInvalid, isValid, children, styles, groupStyles, insideForm, labelProps: baseLabelProps, size, buttonType, type, form, ...otherProps } = props;
-	let domRef = useObjectRef(ref);
+	let t0;
+	if ($[0] !== props) {
+		t0 = castNullableStringValue(props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	props = t0;
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { defaultValidationTrigger: "onChange" };
+		$[2] = t1;
+	} else t1 = $[2];
+	props = useFieldProps(props, t1);
+	let { qa, id, isDisabled, isRequired, labelPosition: t2, isInvalid, isValid, children, styles, groupStyles, insideForm, labelProps: baseLabelProps, size, buttonType, type, form, ...otherProps } = props;
+	const labelPosition = t2 === void 0 ? "top" : t2;
+	const domRef = useObjectRef(ref);
 	styles = extractStyles(otherProps, CONTAINER_STYLES, styles);
-	let state = useRadioGroupState(props);
+	const state = useRadioGroupState(props);
 	if (orientation == null) orientation = type === "button" || type === "tabs" ? "horizontal" : "vertical";
-	let { radioGroupProps: fieldProps, labelProps } = useRadioGroup({
-		...props,
-		orientation
-	}, state);
-	let { isFocusVisible: isFocusWithinVisible, focusProps: groupFocusProps } = useFocusRing({ within: true });
-	return wrapWithField(/* @__PURE__ */ jsx(RadioGroupElement, {
-		id,
-		qa: qa || "RadioGroup",
-		styles,
-		"data-input-type": "radiogroup",
-		"data-radio-button-group": type === "button" ? "" : void 0,
-		mods: {
-			horizontal: orientation === "horizontal",
+	let t3;
+	if ($[3] !== orientation || $[4] !== props) {
+		t3 = {
+			...props,
+			orientation
+		};
+		$[3] = orientation;
+		$[4] = props;
+		$[5] = t3;
+	} else t3 = $[5];
+	const { radioGroupProps: fieldProps, labelProps } = useRadioGroup(t3, state);
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = { within: true };
+		$[6] = t4;
+	} else t4 = $[6];
+	const { isFocusVisible: isFocusWithinVisible, focusProps: groupFocusProps } = useFocusRing(t4);
+	const t5 = qa || "RadioGroup";
+	const t6 = type === "button" ? "" : void 0;
+	const t7 = orientation === "horizontal";
+	const t8 = labelPosition === "side";
+	const t9 = type === "button";
+	const t10 = type === "tabs";
+	let t11;
+	if ($[7] !== insideForm || $[8] !== isFocusWithinVisible || $[9] !== t10 || $[10] !== t7 || $[11] !== t8 || $[12] !== t9) {
+		t11 = {
+			horizontal: t7,
 			"inside-form": insideForm,
-			"side-label": labelPosition === "side",
-			button: type === "button",
-			tabs: type === "tabs",
+			"side-label": t8,
+			button: t9,
+			tabs: t10,
 			focused: isFocusWithinVisible
-		},
-		...groupFocusProps,
-		children: /* @__PURE__ */ jsx(FormScopeMask, {
-			value: {
-				isRequired,
-				isInvalid,
-				isValid,
-				isDisabled
-			},
-			children: /* @__PURE__ */ jsx(RadioContext.Provider, {
-				value: {
-					state,
-					name: props.name,
-					size,
-					buttonType,
-					type,
-					isDisabled
-				},
-				children
-			})
-		})
-	}), domRef, {
-		...props,
-		fieldProps,
-		labelProps: mergeProps$1(baseLabelProps, labelProps)
-	});
+		};
+		$[7] = insideForm;
+		$[8] = isFocusWithinVisible;
+		$[9] = t10;
+		$[10] = t7;
+		$[11] = t8;
+		$[12] = t9;
+		$[13] = t11;
+	} else t11 = $[13];
+	let t12;
+	if ($[14] !== isDisabled || $[15] !== isInvalid || $[16] !== isRequired || $[17] !== isValid) {
+		t12 = {
+			isRequired,
+			isInvalid,
+			isValid,
+			isDisabled
+		};
+		$[14] = isDisabled;
+		$[15] = isInvalid;
+		$[16] = isRequired;
+		$[17] = isValid;
+		$[18] = t12;
+	} else t12 = $[18];
+	let t13;
+	if ($[19] !== buttonType || $[20] !== isDisabled || $[21] !== props.name || $[22] !== size || $[23] !== state || $[24] !== type) {
+		t13 = {
+			state,
+			name: props.name,
+			size,
+			buttonType,
+			type,
+			isDisabled
+		};
+		$[19] = buttonType;
+		$[20] = isDisabled;
+		$[21] = props.name;
+		$[22] = size;
+		$[23] = state;
+		$[24] = type;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== children || $[27] !== t13) {
+		t14 = /* @__PURE__ */ jsx(RadioContext.Provider, {
+			value: t13,
+			children
+		});
+		$[26] = children;
+		$[27] = t13;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== t12 || $[30] !== t14) {
+		t15 = /* @__PURE__ */ jsx(FormScopeMask, {
+			value: t12,
+			children: t14
+		});
+		$[29] = t12;
+		$[30] = t14;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== groupFocusProps || $[33] !== id || $[34] !== styles || $[35] !== t11 || $[36] !== t15 || $[37] !== t5 || $[38] !== t6) {
+		t16 = /* @__PURE__ */ jsx(RadioGroupElement, {
+			id,
+			qa: t5,
+			styles,
+			"data-input-type": "radiogroup",
+			"data-radio-button-group": t6,
+			mods: t11,
+			...groupFocusProps,
+			children: t15
+		});
+		$[32] = groupFocusProps;
+		$[33] = id;
+		$[34] = styles;
+		$[35] = t11;
+		$[36] = t15;
+		$[37] = t5;
+		$[38] = t6;
+		$[39] = t16;
+	} else t16 = $[39];
+	const radioGroup = t16;
+	let t17;
+	if ($[40] !== baseLabelProps || $[41] !== domRef || $[42] !== fieldProps || $[43] !== labelProps || $[44] !== props || $[45] !== radioGroup) {
+		t17 = wrapWithField(radioGroup, domRef, {
+			...props,
+			fieldProps,
+			labelProps: mergeProps$1(baseLabelProps, labelProps)
+		});
+		$[40] = baseLabelProps;
+		$[41] = domRef;
+		$[42] = fieldProps;
+		$[43] = labelProps;
+		$[44] = props;
+		$[45] = radioGroup;
+		$[46] = t17;
+	} else t17 = $[46];
+	return t17;
 }
 /**
 * Radio groups allow users to select a single option from a list of mutually exclusive options.

package/dist/components/fields/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["mergeProps"],"sources":["../../../../src/components/fields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaRadioGroupProps, useFocusRing, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps } from '../../content/Item/Item';\nimport { FormScopeMask, useFieldProps, wrapWithField } from '../../form';\n\nimport { RadioContext } from './context';\n\nexport interface CubeRadioGroupProps\n  extends BaseProps,\n    Omit<AriaRadioGroupProps, 'errorMessage' | 'form' | 'name'>,\n    ContainerStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  groupStyles?: Styles;\n  orientation?: 'horizontal' | 'vertical';\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /* Size for all radio buttons in the group */\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  /* Button type for all button-style radios (ignored in tabs mode). When set to 'primary', selected buttons use 'primary' and non-selected use 'outline' with isSelected appearance */\n  buttonType?: CubeItemProps['type'];\n  /* Visual type for all radios in the group: radio (default), button, or tabs */\n  type?: 'radio' | 'button' | 'tabs';\n}\n\nconst RadioGroupElement = tasty({\n  qa: 'RadioGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n      'horizontal & tabs': 'row',\n    },\n    padding: {\n      '': '0',\n      tabs: '.5x',\n    },\n    // The tabs layout is the only one with padding, and a caller that gives the\n    // group an explicit width (`width: 100%` inside a popover, say) means the\n    // box it can see. Without this the padding is added on top and the group\n    // overhangs its container by `1x`.\n    boxSizing: 'border-box',\n    radius: true,\n    fill: {\n      '': '#clear',\n      'tabs | disabled': '#surface-4',\n    },\n    width: 'max-content max-content initial',\n    flexShrink: 0,\n    gap: {\n      '': '1x',\n      button: 0,\n      tabs: '.5x',\n    },\n    whiteSpace: 'nowrap',\n    // Keyboard focus ring on the group, shown only for button/tabs layouts\n    // where individual items are visually merged (button-group) or share a\n    // single chrome (tabs) — the classic vertical radio list already shows\n    // a per-item focus ring on the radio circle.\n    outline: {\n      '': '1bw #primary-text.0 / 1bw',\n      'focused & (button | tabs)': '1bw #primary-text / 1bw',\n    },\n  },\n});\n\nfunction RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {\n  let orientation = props.orientation;\n\n  props = castNullableStringValue(props);\n  props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n  let {\n    qa,\n    id,\n    isDisabled,\n    isRequired,\n    labelPosition = 'top',\n    isInvalid,\n    isValid,\n    children,\n    styles,\n    groupStyles,\n    insideForm,\n    // orientation, // ignore orientation since it came from the form context\n    labelProps: baseLabelProps,\n    size,\n    buttonType,\n    type,\n    form,\n    ...otherProps\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  styles = extractStyles(otherProps, CONTAINER_STYLES, styles);\n\n  let state = useRadioGroupState(props);\n\n  // Set default orientation based on type\n  if (orientation == null) {\n    orientation =\n      type === 'button' || type === 'tabs' ? 'horizontal' : 'vertical';\n  }\n\n  let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(\n    { ...props, orientation },\n    state,\n  );\n\n  // Keyboard-only focus ring on the group container (button/tabs layouts).\n  // `within: true` tracks focus on any descendant radio. We read\n  // `isFocusVisible` (not `isFocused`), which is keyboard-gated — mouse\n  // clicks on a radio focus the input but leave `isFocusVisible` false.\n  let { isFocusVisible: isFocusWithinVisible, focusProps: groupFocusProps } =\n    useFocusRing({ within: true });\n\n  let radioGroup = (\n    <RadioGroupElement\n      id={id}\n      qa={qa || 'RadioGroup'}\n      styles={styles}\n      data-input-type=\"radiogroup\"\n      data-radio-button-group={type === 'button' ? '' : undefined}\n      mods={{\n        horizontal: orientation === 'horizontal',\n        'inside-form': insideForm,\n        'side-label': labelPosition === 'side',\n        button: type === 'button',\n        tabs: type === 'tabs',\n        focused: isFocusWithinVisible,\n      }}\n      {...groupFocusProps}\n    >\n      <FormScopeMask\n        value={{\n          isRequired,\n          isInvalid,\n          isValid,\n          isDisabled,\n        }}\n      >\n        <RadioContext.Provider\n          value={{\n            state,\n            name: props.name,\n            size,\n            buttonType,\n            type,\n            isDisabled,\n          }}\n        >\n          {children}\n        </RadioContext.Provider>\n      </FormScopeMask>\n    </RadioGroupElement>\n  );\n\n  return wrapWithField(radioGroup, domRef, {\n    ...props,\n    fieldProps,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _RadioGroup = forwardRef(RadioGroup);\n\n(_RadioGroup as any).cubeInputType = 'RadioGroup';\n_RadioGroup.displayName = 'RadioGroup';\n\nexport { _RadioGroup as RadioGroup };\n"],"mappings":";;;;;;;;;;;;;;;;AA0CA,MAAM,oBAAoB,MAAM;CAC9B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,cAAc;EACd,MAAM;GACJ,IAAI;GACJ,YAAY;GACZ,qBAAqB;GACtB;EACD,SAAS;GACP,IAAI;GACJ,MAAM;GACP;EAKD,WAAW;EACX,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,mBAAmB;GACpB;EACD,OAAO;EACP,YAAY;EACZ,KAAK;GACH,IAAI;GACJ,QAAQ;GACR,MAAM;GACP;EACD,YAAY;EAKZ,SAAS;GACP,IAAI;GACJ,6BAA6B;GAC9B;EACF;CACF,CAAC;AAEF,SAAS,WAAW,OAA+C,KAAK;CACtE,IAAI,cAAc,MAAM;AAExB,SAAQ,wBAAwB,MAAM;AACtC,SAAQ,cAAc,OAAO,EAAE,0BAA0B,YAAY,CAAC;CAEtE,IAAI,EACF,IACA,IACA,YACA,YACA,gBAAgB,OAChB,WACA,SACA,UACA,QACA,aACA,YAEA,YAAY,gBACZ,MACA,YACA,MACA,MACA,GAAG,eACD;CACJ,IAAI,SAAS,aAAa,IAAI;AAE9B,UAAS,cAAc,YAAY,kBAAkB,OAAO;CAE5D,IAAI,QAAQ,mBAAmB,MAAM;AAGrC,KAAI,eAAe,KACjB,eACE,SAAS,YAAY,SAAS,SAAS,eAAe;CAG1D,IAAI,EAAE,iBAAiB,YAAY,eAAe,cAChD;EAAE,GAAG;EAAO;EAAa,EACzB,MACD;CAMD,IAAI,EAAE,gBAAgB,sBAAsB,YAAY,oBACtD,aAAa,EAAE,QAAQ,MAAM,CAAC;AA2ChC,QAAO,cAxCL,oBAAC;EACK;EACJ,IAAI,MAAM;EACF;EACR,mBAAgB;EAChB,2BAAyB,SAAS,WAAW,KAAK;EAClD,MAAM;GACJ,YAAY,gBAAgB;GAC5B,eAAe;GACf,cAAc,kBAAkB;GAChC,QAAQ,SAAS;GACjB,MAAM,SAAS;GACf,SAAS;GACV;EACD,GAAI;YAEJ,oBAAC;GACC,OAAO;IACL;IACA;IACA;IACA;IACD;aAED,oBAAC,aAAa;IACZ,OAAO;KACL;KACA,MAAM,MAAM;KACZ;KACA;KACA;KACA;KACD;IAEA;KACqB;IACV;GACE,EAGW,QAAQ;EACvC,GAAG;EACH;EACA,YAAYA,aAAW,gBAAgB,WAAW;EACnD,CAAC;;;;;;AAOJ,MAAM,cAAc,WAAW,WAAW;AAE1C,AAAC,YAAoB,gBAAgB;AACrC,YAAY,cAAc"}
+{"version":3,"file":"RadioGroup.js","names":["useObjectRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","forwardRef","AriaRadioGroupProps","useFocusRing","useRadioGroup","useRadioGroupState","FieldBaseProps","mergeProps","castNullableStringValue","WithNullableValue","extractStyles","CubeItemProps","FormScopeMask","useFieldProps","wrapWithField","RadioContext","CubeRadioGroupProps","Omit","groupStyles","orientation","value","defaultValue","onChange","size","buttonType","type","RadioGroupElement","qa","styles","display","placeItems","placeContent","flow","horizontal","padding","tabs","boxSizing","radius","fill","width","flexShrink","gap","button","whiteSpace","outline","RadioGroup","props","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","id","isDisabled","isRequired","labelPosition","t2","isInvalid","isValid","children","insideForm","labelProps","baseLabelProps","form","otherProps","undefined","domRef","state","t3","radioGroupProps","fieldProps","t4","within","isFocusVisible","isFocusWithinVisible","focusProps","groupFocusProps","t5","t6","t7","t8","t9","t10","t11","focused","t12","t13","name","t14","t15","t16","radioGroup","t17","_RadioGroup","cubeInputType","displayName"],"sources":["../../../../src/components/fields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaRadioGroupProps, useFocusRing, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { CubeItemProps } from '../../content/Item/Item';\nimport { FormScopeMask, useFieldProps, wrapWithField } from '../../form';\n\nimport { RadioContext } from './context';\n\nexport interface CubeRadioGroupProps\n  extends BaseProps,\n    Omit<AriaRadioGroupProps, 'errorMessage' | 'form' | 'name'>,\n    ContainerStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  groupStyles?: Styles;\n  orientation?: 'horizontal' | 'vertical';\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  /* Size for all radio buttons in the group */\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  /* Button type for all button-style radios (ignored in tabs mode). When set to 'primary', selected buttons use 'primary' and non-selected use 'outline' with isSelected appearance */\n  buttonType?: CubeItemProps['type'];\n  /* Visual type for all radios in the group: radio (default), button, or tabs */\n  type?: 'radio' | 'button' | 'tabs';\n}\n\nconst RadioGroupElement = tasty({\n  qa: 'RadioGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'stretch',\n    placeContent: 'stretch',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n      'horizontal & tabs': 'row',\n    },\n    padding: {\n      '': '0',\n      tabs: '.5x',\n    },\n    // The tabs layout is the only one with padding, and a caller that gives the\n    // group an explicit width (`width: 100%` inside a popover, say) means the\n    // box it can see. Without this the padding is added on top and the group\n    // overhangs its container by `1x`.\n    boxSizing: 'border-box',\n    radius: true,\n    fill: {\n      '': '#clear',\n      'tabs | disabled': '#surface-4',\n    },\n    width: 'max-content max-content initial',\n    flexShrink: 0,\n    gap: {\n      '': '1x',\n      button: 0,\n      tabs: '.5x',\n    },\n    whiteSpace: 'nowrap',\n    // Keyboard focus ring on the group, shown only for button/tabs layouts\n    // where individual items are visually merged (button-group) or share a\n    // single chrome (tabs) — the classic vertical radio list already shows\n    // a per-item focus ring on the radio circle.\n    outline: {\n      '': '1bw #primary-text.0 / 1bw',\n      'focused & (button | tabs)': '1bw #primary-text / 1bw',\n    },\n  },\n});\n\nfunction RadioGroup(props: WithNullableValue<CubeRadioGroupProps>, ref) {\n  let orientation = props.orientation;\n\n  props = castNullableStringValue(props);\n  props = useFieldProps(props, { defaultValidationTrigger: 'onChange' });\n\n  let {\n    qa,\n    id,\n    isDisabled,\n    isRequired,\n    labelPosition = 'top',\n    isInvalid,\n    isValid,\n    children,\n    styles,\n    groupStyles,\n    insideForm,\n    // orientation, // ignore orientation since it came from the form context\n    labelProps: baseLabelProps,\n    size,\n    buttonType,\n    type,\n    form,\n    ...otherProps\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  styles = extractStyles(otherProps, CONTAINER_STYLES, styles);\n\n  let state = useRadioGroupState(props);\n\n  // Set default orientation based on type\n  if (orientation == null) {\n    orientation =\n      type === 'button' || type === 'tabs' ? 'horizontal' : 'vertical';\n  }\n\n  let { radioGroupProps: fieldProps, labelProps } = useRadioGroup(\n    { ...props, orientation },\n    state,\n  );\n\n  // Keyboard-only focus ring on the group container (button/tabs layouts).\n  // `within: true` tracks focus on any descendant radio. We read\n  // `isFocusVisible` (not `isFocused`), which is keyboard-gated — mouse\n  // clicks on a radio focus the input but leave `isFocusVisible` false.\n  let { isFocusVisible: isFocusWithinVisible, focusProps: groupFocusProps } =\n    useFocusRing({ within: true });\n\n  let radioGroup = (\n    <RadioGroupElement\n      id={id}\n      qa={qa || 'RadioGroup'}\n      styles={styles}\n      data-input-type=\"radiogroup\"\n      data-radio-button-group={type === 'button' ? '' : undefined}\n      mods={{\n        horizontal: orientation === 'horizontal',\n        'inside-form': insideForm,\n        'side-label': labelPosition === 'side',\n        button: type === 'button',\n        tabs: type === 'tabs',\n        focused: isFocusWithinVisible,\n      }}\n      {...groupFocusProps}\n    >\n      <FormScopeMask\n        value={{\n          isRequired,\n          isInvalid,\n          isValid,\n          isDisabled,\n        }}\n      >\n        <RadioContext.Provider\n          value={{\n            state,\n            name: props.name,\n            size,\n            buttonType,\n            type,\n            isDisabled,\n          }}\n        >\n          {children}\n        </RadioContext.Provider>\n      </FormScopeMask>\n    </RadioGroupElement>\n  );\n\n  return wrapWithField(radioGroup, domRef, {\n    ...props,\n    fieldProps,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Radio groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _RadioGroup = forwardRef(RadioGroup);\n\n(_RadioGroup as any).cubeInputType = 'RadioGroup';\n_RadioGroup.displayName = 'RadioGroup';\n\nexport { _RadioGroup as RadioGroup };\n"],"mappings":"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"}

package/dist/components/fields/RadioGroup/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/fields/RadioGroup/context.ts

package/dist/components/fields/RadioGroup/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/fields/RadioGroup/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { RadioGroupState } from 'react-stately';\n\nimport { CubeItemProps } from '../../content/Item/Item';\n\ninterface CubeRadioGroupState {\n  name?: string;\n  state: RadioGroupState;\n  size?: CubeItemProps['size'];\n  buttonType?: CubeItemProps['type'];\n  type?: 'radio' | 'button' | 'tabs';\n  isDisabled?: boolean;\n}\n\nexport const RadioContext = createContext<CubeRadioGroupState | null>(null);\n\nexport function useRadioProvider(): CubeRadioGroupState | null {\n  return useContext(RadioContext);\n}\n"],"mappings":";;;;AAcA,MAAa,eAAe,cAA0C,KAAK;AAE3E,SAAgB,mBAA+C;AAC7D,QAAO,WAAW,aAAa"}
+{"version":3,"file":"context.js","names":["createContext","useContext","RadioGroupState","CubeItemProps","CubeRadioGroupState","name","state","size","buttonType","type","isDisabled","RadioContext","useRadioProvider"],"sources":["../../../../src/components/fields/RadioGroup/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { RadioGroupState } from 'react-stately';\n\nimport { CubeItemProps } from '../../content/Item/Item';\n\ninterface CubeRadioGroupState {\n  name?: string;\n  state: RadioGroupState;\n  size?: CubeItemProps['size'];\n  buttonType?: CubeItemProps['type'];\n  type?: 'radio' | 'button' | 'tabs';\n  isDisabled?: boolean;\n}\n\nexport const RadioContext = createContext<CubeRadioGroupState | null>(null);\n\nexport function useRadioProvider(): CubeRadioGroupState | null {\n  return useContext(RadioContext);\n}\n"],"mappings":";;;;AAcA,MAAaW,eAAeX,cAA0C,KAAK;AAE3E,SAAOY,mBAAA;AAAA,QACEX,WAAWU,aAAa"}

package/dist/components/fields/SearchComboBox/SearchComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
@@ -20,6 +20,7 @@ import { SearchIcon } from "../../../icons/SearchIcon.js";
 import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
 import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
 import { filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, getVisibleKeys, markKeyboardFocus } from "../ListBoxPopover/listNavigation.js";
+import { c } from "react-compiler-runtime";
 import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -41,19 +42,33 @@ const PROP_STYLES = [
 	...COLOR_STYLES
 ];
 function useDelayedFlag(active, delay) {
+	const $ = c(4);
 	const [flag, setFlag] = useState(false);
-	useEffect(() => {
-		if (!active) {
-			setFlag(false);
-			return;
-		}
-		if (delay <= 0) {
-			setFlag(true);
-			return;
-		}
-		const id = setTimeout(() => setFlag(true), delay);
-		return () => clearTimeout(id);
-	}, [active, delay]);
+	let t0;
+	let t1;
+	if ($[0] !== active || $[1] !== delay) {
+		t0 = () => {
+			if (!active) {
+				setFlag(false);
+				return;
+			}
+			if (delay <= 0) {
+				setFlag(true);
+				return;
+			}
+			const id = setTimeout(() => setFlag(true), delay);
+			return () => clearTimeout(id);
+		};
+		t1 = [active, delay];
+		$[0] = active;
+		$[1] = delay;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
 	return flag;
 }
 const SearchComboBoxInput = forwardRef(function SearchComboBoxInput({ qa, inputRef, id, value, placeholder, isDisabled, isReadOnly, autoFocus, autoComplete, size, mods, inputStyles, keyboardProps, focusProps, onChange, onFocus, isExpanded, searchComboBoxId, listStateRef }, ref) {
@@ -126,7 +141,7 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 	});
 	const listStateRef = useRef(null);
 	const [, setFocusTick] = useState(0);
-	const bumpFocus = useEvent(() => setFocusTick((t) => t + 1));
+	const bumpFocus = useEvent(() => setFocusTick((t_0) => t_0 + 1));
 	const getItemLabel = useCallback((key) => {
 		return (localCollectionState?.collection?.getItem(key))?.textValue || String(key);
 	}, [localCollectionState?.collection]);
@@ -141,15 +156,15 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 	}, [localCollectionState?.collection, filterFn]);
 	const disabledKeySet = useMemo(() => new Set(disabledKeys ? Array.from(disabledKeys) : []), [disabledKeys]);
 	const visibleItemKeys = useMemo(() => {
-		const collection = localCollectionState?.collection;
+		const collection_0 = localCollectionState?.collection;
 		const keys = [];
-		if (!collection) return keys;
-		const walk = (nodes) => {
-			for (const node of nodes) if (node.type === "item") {
-				if (!disabledKeySet.has(node.key)) keys.push(node.key);
-			} else if (node.childNodes) walk(node.childNodes);
+		if (!collection_0) return keys;
+		const walk = (nodes_0) => {
+			for (const node_0 of nodes_0) if (node_0.type === "item") {
+				if (!disabledKeySet.has(node_0.key)) keys.push(node_0.key);
+			} else if (node_0.childNodes) walk(node_0.childNodes);
 		};
-		walk(filterFn(collection));
+		walk(filterFn(collection_0));
 		return keys;
 	}, [
 		localCollectionState?.collection,
@@ -181,10 +196,10 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 		}, 0);
 	});
 	const handleSelectionChange = useEvent((selection) => {
-		const key = Array.isArray(selection) ? selection[0] : selection;
-		if (key != null) {
-			const textValue = getItemLabel(key);
-			onSelect?.(String(key), textValue);
+		const key_0 = Array.isArray(selection) ? selection[0] : selection;
+		if (key_0 != null) {
+			const textValue = getItemLabel(key_0);
+			onSelect?.(String(key_0), textValue);
 		}
 		clearAndClose();
 	});
@@ -205,18 +220,18 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 		onClear?.();
 	});
 	const handleInputChange = useEvent((e) => {
-		const value = e.target.value;
-		if (!isControlledInput) setInternalInputValue(value);
-		onInputChange?.(value);
-		const trimmed = value.trim();
+		const value_0 = e.target.value;
+		if (!isControlledInput) setInternalInputValue(value_0);
+		onInputChange?.(value_0);
+		const trimmed = value_0.trim();
 		setIsFilterActive(trimmed.length > 0);
 		if (popoverTrigger !== "manual") {
 			if (trimmed && !isPopoverOpen) setIsPopoverOpen(true);
 			else if (!trimmed && isPopoverOpen && popoverTrigger === "input") setIsPopoverOpen(false);
 		}
 	});
-	const handleInputFocus = useEvent((e) => {
-		focusProps.onFocus?.(e);
+	const handleInputFocus = useEvent((e_0) => {
+		focusProps.onFocus?.(e_0);
 		if (suppressFocusOpenRef.current) return;
 		if (popoverTrigger === "focus" && !isPopoverOpen) setIsPopoverOpen(true);
 	});
@@ -232,10 +247,10 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 		onBlur: handleCompositeBlur,
 		isDisabled
 	});
-	const { keyboardProps } = useKeyboard({ onKeyDown: (e) => {
-		onKeyDown?.(e);
-		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-			e.preventDefault();
+	const { keyboardProps } = useKeyboard({ onKeyDown: (e_1) => {
+		onKeyDown?.(e_1);
+		if (e_1.key === "ArrowDown" || e_1.key === "ArrowUp") {
+			e_1.preventDefault();
 			if (!shouldShowPopover) {
 				if (!isPopoverOpen) {
 					if (!hasResults) setIsFilterActive(false);
@@ -245,50 +260,50 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 			}
 			const listState = listStateRef.current;
 			if (!listState) return;
-			const nextKey = getNextVisibleKey(listState, e.key === "ArrowDown" ? 1 : -1);
+			const nextKey = getNextVisibleKey(listState, e_1.key === "ArrowDown" ? 1 : -1);
 			if (nextKey != null) {
 				markKeyboardFocus(listState);
 				listState.selectionManager.setFocusedKey(nextKey);
 				bumpFocus();
 			}
-		} else if (e.key === "Enter") {
+		} else if (e_1.key === "Enter") {
 			if (shouldShowPopover) {
-				const listState = listStateRef.current;
-				const visibleKeys = listState ? getVisibleKeys(listState) : visibleItemKeys;
-				const focusedKey = listState?.selectionManager.focusedKey;
+				const listState_0 = listStateRef.current;
+				const visibleKeys = listState_0 ? getVisibleKeys(listState_0) : visibleItemKeys;
+				const focusedKey = listState_0?.selectionManager.focusedKey;
 				const keyToSelect = focusedKey != null && visibleKeys.includes(focusedKey) ? focusedKey : visibleKeys[0] ?? null;
 				if (keyToSelect != null) {
-					e.preventDefault();
-					if (listState) listState.selectionManager.select(keyToSelect, e);
+					e_1.preventDefault();
+					if (listState_0) listState_0.selectionManager.select(keyToSelect, e_1);
 					else handleSelectionChange(keyToSelect);
 					return;
 				}
 			}
-			const value = trimmedInput;
-			if (onSubmit && value) {
-				e.preventDefault();
-				handleSubmit(value);
+			const value_1 = trimmedInput;
+			if (onSubmit && value_1) {
+				e_1.preventDefault();
+				handleSubmit(value_1);
 				return;
 			}
-			e.preventDefault();
-		} else if (e.key === "Escape") {
+			e_1.preventDefault();
+		} else if (e_1.key === "Escape") {
 			if (isPopoverOpen) {
-				e.preventDefault();
+				e_1.preventDefault();
 				setIsPopoverOpen(false);
 				inputRef.current?.focus();
 			} else if (effectiveInputValue) {
-				e.preventDefault();
+				e_1.preventDefault();
 				if (isClearable) clearValue();
 			}
-		} else if (e.key === "Home" || e.key === "End") {
+		} else if (e_1.key === "Home" || e_1.key === "End") {
 			if (shouldShowPopover) {
-				e.preventDefault();
-				const listState = listStateRef.current;
-				if (!listState) return;
-				const targetKey = getEdgeVisibleKey(listState, e.key === "Home" ? "first" : "last");
+				e_1.preventDefault();
+				const listState_1 = listStateRef.current;
+				if (!listState_1) return;
+				const targetKey = getEdgeVisibleKey(listState_1, e_1.key === "Home" ? "first" : "last");
 				if (targetKey != null) {
-					markKeyboardFocus(listState);
-					listState.selectionManager.setFocusedKey(targetKey);
+					markKeyboardFocus(listState_1);
+					listState_1.selectionManager.setFocusedKey(targetKey);
 					bumpFocus();
 				}
 			}
@@ -332,14 +347,14 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 		let timer;
 		const applyFocus = () => {
 			if (!shouldShowPopover) return;
-			const listState = listStateRef.current;
-			if (listState) {
-				const keys = getVisibleKeys(listState);
-				if (keys.length > 0) {
-					const focusedKey = listState.selectionManager.focusedKey;
-					if (!(focusedKey != null && keys.includes(focusedKey))) {
-						markKeyboardFocus(listState);
-						listState.selectionManager.setFocusedKey(keys[0]);
+			const listState_2 = listStateRef.current;
+			if (listState_2) {
+				const keys_0 = getVisibleKeys(listState_2);
+				if (keys_0.length > 0) {
+					const focusedKey_0 = listState_2.selectionManager.focusedKey;
+					if (!(focusedKey_0 != null && keys_0.includes(focusedKey_0))) {
+						markKeyboardFocus(listState_2);
+						listState_2.selectionManager.setFocusedKey(keys_0[0]);
 						bumpFocus();
 					}
 					return;