@cube-dev/ui-kit 0.200.1 → 0.202.0

package/dist/components/fields/RadioGroup/RadioGroup.d.ts

@@ -2,10 +2,11 @@
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { CubeItemBaseProps as CubeItemProps } from "../../content/Item/Item.js";
-import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
+import { BaseProps, Styles } from "@tenphi/tasty";
 import { AriaRadioGroupProps } from "react-aria";
 //#region src/components/fields/RadioGroup/RadioGroup.d.ts
-export interface CubeRadioGroupProps extends BaseProps, Omit<AriaRadioGroupProps, 'errorMessage' | 'form' | 'name'>, ContainerStyleProps, FieldBaseProps<string | null | undefined> {
+export interface CubeRadioGroupProps extends BaseProps, Omit<AriaRadioGroupProps, 'errorMessage' | 'form' | 'name'>, FieldLayoutStyleProps, FieldBaseProps<string | null | undefined> {
   groupStyles?: Styles;
   orientation?: 'horizontal' | 'vertical';
   value?: string;

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

@@ -1,13 +1,14 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { Provider } from "../../../provider.js";
 import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
 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 { splitFieldLayout } from "../../form/field-layout.js";
 import { RadioContext } from "./context.js";
 import { c } from "react/compiler-runtime";
-import { CONTAINER_STYLES, tasty } from "@tenphi/tasty";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useFocusRing, useRadioGroup } from "react-aria";
@@ -35,7 +36,10 @@ const RadioGroupElement = tasty({
 			"": "#clear",
 			"tabs | disabled": "#surface-4"
 		},
-		width: "max-content max-content initial",
+		width: {
+			"": "max-content max-content initial",
+			"fill-width": "auto"
+		},
 		flexShrink: 0,
 		gap: {
 			"": "1x",
@@ -59,7 +63,7 @@ function isFocusedDisabledRadio(value) {
 	return element instanceof HTMLInputElement && element.type === "radio" && element.value === value && element.getAttribute("aria-disabled") === "true";
 }
 function RadioGroup(rawProps, ref) {
-	const $ = c(52);
+	const $ = c(32);
 	let orientation = rawProps.orientation;
 	let t0;
 	if ($[0] !== rawProps) {
@@ -74,10 +78,11 @@ function RadioGroup(rawProps, ref) {
 		$[2] = t1;
 	} else t1 = $[2];
 	const props = useFieldProps(rawProps, t1);
-	let { qa, id, isDisabled, isRequired, labelPosition: t2, isInvalid, isValid, children, styles, groupStyles, insideForm, labelProps: baseLabelProps, size, buttonType, type, form, ...otherProps } = props;
+	let { qa, id, isDisabled, isReadOnly, isRequired, labelPosition: t2, isInvalid, isValid, children, styles, insideForm, labelProps: baseLabelProps, size, buttonType, type } = props;
 	const labelPosition = t2 === void 0 ? "top" : t2;
 	const domRef = useObjectRef(ref);
-	styles = extractStyles(otherProps, CONTAINER_STYLES, styles);
+	const fieldLayout = splitFieldLayout(props);
+	styles = fieldLayout.styles;
 	const baseState = useRadioGroupState(props);
 	const isArrowKeyRef = useRef(false);
 	let t3;
@@ -124,124 +129,93 @@ function RadioGroup(rawProps, ref) {
 		$[10] = t6;
 	} else t6 = $[10];
 	const { isFocusVisible: isFocusWithinVisible, focusProps: groupFocusProps } = useFocusRing(t6);
-	const T0 = RadioGroupElement;
-	const t7 = mergeProps$1(groupProps, groupFocusProps);
-	const t8 = qa || "RadioGroup";
-	const t9 = type === "button" ? "" : void 0;
-	const t10 = orientation === "horizontal";
-	const t11 = labelPosition === "side";
-	const t12 = type === "button";
-	const t13 = type === "tabs";
-	let t14;
-	if ($[11] !== insideForm || $[12] !== isFocusWithinVisible || $[13] !== t10 || $[14] !== t11 || $[15] !== t12 || $[16] !== t13) {
-		t14 = {
-			horizontal: t10,
-			"inside-form": insideForm,
-			"side-label": t11,
-			button: t12,
-			tabs: t13,
-			focused: isFocusWithinVisible
-		};
-		$[11] = insideForm;
-		$[12] = isFocusWithinVisible;
-		$[13] = t10;
-		$[14] = t11;
-		$[15] = t12;
-		$[16] = t13;
-		$[17] = t14;
-	} else t14 = $[17];
-	let t15;
-	if ($[18] !== isDisabled || $[19] !== isInvalid || $[20] !== isRequired || $[21] !== isValid) {
-		t15 = {
+	let t7;
+	if ($[11] !== isDisabled || $[12] !== isInvalid || $[13] !== isRequired || $[14] !== isValid) {
+		t7 = {
 			isRequired,
 			isInvalid,
 			isValid,
 			isDisabled
 		};
-		$[18] = isDisabled;
-		$[19] = isInvalid;
-		$[20] = isRequired;
-		$[21] = isValid;
-		$[22] = t15;
-	} else t15 = $[22];
-	let t16;
-	if ($[23] !== buttonType || $[24] !== isDisabled || $[25] !== props.name || $[26] !== size || $[27] !== state || $[28] !== type) {
-		t16 = {
+		$[11] = isDisabled;
+		$[12] = isInvalid;
+		$[13] = isRequired;
+		$[14] = isValid;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== buttonType || $[17] !== props.name || $[18] !== size || $[19] !== state || $[20] !== type) {
+		t8 = {
 			state,
 			name: props.name,
 			size,
 			buttonType,
-			type,
-			isDisabled
+			type
 		};
-		$[23] = buttonType;
-		$[24] = isDisabled;
-		$[25] = props.name;
-		$[26] = size;
-		$[27] = state;
-		$[28] = type;
-		$[29] = t16;
-	} else t16 = $[29];
-	let t17;
-	if ($[30] !== children || $[31] !== t16) {
-		t17 = /* @__PURE__ */ jsx(RadioContext.Provider, {
-			value: t16,
+		$[16] = buttonType;
+		$[17] = props.name;
+		$[18] = size;
+		$[19] = state;
+		$[20] = type;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== children || $[23] !== t8) {
+		t9 = /* @__PURE__ */ jsx(RadioContext.Provider, {
+			value: t8,
 			children
 		});
-		$[30] = children;
-		$[31] = t16;
-		$[32] = t17;
-	} else t17 = $[32];
-	let t18;
-	if ($[33] !== t15 || $[34] !== t17) {
-		t18 = /* @__PURE__ */ jsx(FormScopeMask, {
-			value: t15,
-			children: t17
+		$[22] = children;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[25] !== isDisabled || $[26] !== isReadOnly || $[27] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Provider, {
+			isDisabled,
+			isReadOnly,
+			children: t9
 		});
-		$[33] = t15;
-		$[34] = t17;
-		$[35] = t18;
-	} else t18 = $[35];
-	let t19;
-	if ($[36] !== T0 || $[37] !== domRef || $[38] !== id || $[39] !== onKeyDown || $[40] !== styles || $[41] !== t14 || $[42] !== t18 || $[43] !== t7 || $[44] !== t8 || $[45] !== t9) {
-		t19 = /* @__PURE__ */ jsx(T0, {
-			ref: domRef,
-			...t7,
-			onKeyDown,
-			id,
-			qa: t8,
-			styles,
-			"data-input-type": "radiogroup",
-			"data-radio-button-group": t9,
-			mods: t14,
-			children: t18
+		$[25] = isDisabled;
+		$[26] = isReadOnly;
+		$[27] = t9;
+		$[28] = t10;
+	} else t10 = $[28];
+	let t11;
+	if ($[29] !== t10 || $[30] !== t7) {
+		t11 = /* @__PURE__ */ jsx(FormScopeMask, {
+			value: t7,
+			children: t10
 		});
-		$[36] = T0;
-		$[37] = domRef;
-		$[38] = id;
-		$[39] = onKeyDown;
-		$[40] = styles;
-		$[41] = t14;
-		$[42] = t18;
-		$[43] = t7;
-		$[44] = t8;
-		$[45] = t9;
-		$[46] = t19;
-	} else t19 = $[46];
-	const radioGroup = t19;
-	let t20;
-	if ($[47] !== baseLabelProps || $[48] !== labelProps || $[49] !== props || $[50] !== radioGroup) {
-		t20 = wrapWithField(radioGroup, {
-			...props,
-			labelProps: mergeProps$1(baseLabelProps, labelProps)
-		});
-		$[47] = baseLabelProps;
-		$[48] = labelProps;
-		$[49] = props;
-		$[50] = radioGroup;
-		$[51] = t20;
-	} else t20 = $[51];
-	return t20;
+		$[29] = t10;
+		$[30] = t7;
+		$[31] = t11;
+	} else t11 = $[31];
+	const radioGroup = /* @__PURE__ */ jsx(RadioGroupElement, {
+		ref: domRef,
+		...mergeProps$1(groupProps, groupFocusProps),
+		onKeyDown,
+		id,
+		qa: qa || "RadioGroup",
+		styles,
+		"data-input-type": "radiogroup",
+		"data-radio-button-group": type === "button" ? "" : void 0,
+		mods: {
+			horizontal: orientation === "horizontal",
+			"inside-form": insideForm,
+			"side-label": labelPosition === "side",
+			button: type === "button",
+			tabs: type === "tabs",
+			focused: isFocusWithinVisible,
+			"fill-width": fieldLayout.fillWidth
+		},
+		children: t11
+	});
+	return wrapWithField(radioGroup, {
+		...props,
+		...fieldLayout.field,
+		labelProps: mergeProps$1(baseLabelProps, labelProps)
+	});
 }
 /**
 * 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":["getActiveElement","useObjectRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","forwardRef","useRef","AriaRadioGroupProps","useFocusRing","useRadioGroup","RadioGroupState","useRadioGroupState","FieldBaseProps","mergeProps","castNullableStringValue","WithNullableValue","extractStyles","CubeItemProps","FormScopeMask","useFieldProps","wrapWithField","RadioContext","KeyboardEvent","CubeRadioGroupProps","Omit","groupStyles","orientation","value","defaultValue","onChange","size","Exclude","buttonType","type","RadioGroupElement","qa","styles","display","placeItems","placeContent","flow","horizontal","padding","tabs","boxSizing","radius","fill","width","flexShrink","gap","button","whiteSpace","outline","isFocusedDisabledRadio","element","HTMLInputElement","getAttribute","RadioGroup","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","props","id","isDisabled","isRequired","labelPosition","t2","isInvalid","isValid","children","insideForm","labelProps","baseLabelProps","form","otherProps","undefined","domRef","baseState","isArrowKeyRef","t3","setSelectedValue","current","state","t4","radioGroupProps","onKeyDown","onArrowKey","groupProps","t5","event","t6","within","isFocusVisible","isFocusWithinVisible","focusProps","groupFocusProps","T0","t7","t8","t9","t10","t11","t12","t13","t14","focused","t15","t16","name","t17","t18","t19","radioGroup","t20","_RadioGroup","cubeInputType","displayName","_c","mergeProps"],"sources":["../../../../src/components/fields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { getActiveElement, useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaRadioGroupProps, useFocusRing, useRadioGroup } from 'react-aria';\nimport { RadioGroupState, 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\nimport type { KeyboardEvent } from 'react';\n\nexport interface CubeRadioGroupProps\n  extends\n    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?: Exclude<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      '': '$ring-width #primary-text.0 / $outline-offset',\n      'focused & (button | tabs)':\n        '$ring-width #primary-text / $outline-offset',\n    },\n  },\n});\n\n/**\n * Whether focus rests on the radio with this value while it is disabled. Only\n * a radio kept focusable for its tooltip can be: a natively disabled one never\n * takes focus (see `Radio`).\n */\nfunction isFocusedDisabledRadio(value: string | null) {\n  let element = getActiveElement();\n\n  return (\n    element instanceof HTMLInputElement &&\n    element.type === 'radio' &&\n    element.value === value &&\n    element.getAttribute('aria-disabled') === 'true'\n  );\n}\n\nfunction RadioGroup(rawProps: WithNullableValue<CubeRadioGroupProps>, ref) {\n  let orientation = rawProps.orientation;\n\n  // `null` is the radio group's own \"nothing selected\".\n  rawProps = castNullableStringValue(rawProps, null);\n  let props = useFieldProps(rawProps, { 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 baseState = useRadioGroupState(props);\n  // The arrow keys focus the next radio and select it. A disabled radio that\n  // keeps focus for its tooltip is reached that way too, and has to stop the\n  // selection the way a read-only group does: focus moves, the value stays.\n  // Only the arrow keys: a click elsewhere or a form reset still selects.\n  let isArrowKeyRef = useRef(false);\n  let state: RadioGroupState = {\n    ...baseState,\n    setSelectedValue(value) {\n      if (isArrowKeyRef.current && isFocusedDisabledRadio(value)) return;\n\n      baseState.setSelectedValue(value);\n    },\n  };\n\n  // Set default orientation based on type\n  if (orientation == null) {\n    orientation =\n      type === 'button' || type === 'tabs' ? 'horizontal' : 'vertical';\n  }\n\n  // React Aria hands `form` to every radio's input as the id of its `<form>`,\n  // so the form instance would render as `form=\"[object Object]\"` on each.\n  let { radioGroupProps, labelProps } = useRadioGroup(\n    { ...props, orientation, form: undefined },\n    state,\n  );\n\n  let { onKeyDown: onArrowKey, ...groupProps } = radioGroupProps;\n  let onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    isArrowKeyRef.current = true;\n    onArrowKey?.(event);\n    isArrowKeyRef.current = false;\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      ref={domRef}\n      // Keep semantics and keyboard handling on the group: `isBare` omits\n      // the field wrapper.\n      {...mergeProps(groupProps, groupFocusProps)}\n      onKeyDown={onKeyDown}\n      // `useRadioGroup` seeds its id once; the current one follows the form\n      // binding.\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    >\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, {\n    ...props,\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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"}
+{"version":3,"file":"RadioGroup.js","names":["getActiveElement","useObjectRef","BaseProps","Styles","tasty","forwardRef","useRef","AriaRadioGroupProps","useFocusRing","useRadioGroup","RadioGroupState","useRadioGroupState","Provider","FieldBaseProps","mergeProps","castNullableStringValue","WithNullableValue","CubeItemProps","FormScopeMask","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","RadioContext","KeyboardEvent","CubeRadioGroupProps","Omit","groupStyles","orientation","value","defaultValue","onChange","size","Exclude","buttonType","type","RadioGroupElement","qa","styles","display","placeItems","placeContent","flow","horizontal","padding","tabs","boxSizing","radius","fill","width","flexShrink","gap","button","whiteSpace","outline","isFocusedDisabledRadio","element","HTMLInputElement","getAttribute","RadioGroup","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","props","id","isDisabled","isReadOnly","isRequired","labelPosition","t2","isInvalid","isValid","children","insideForm","labelProps","baseLabelProps","undefined","domRef","fieldLayout","baseState","isArrowKeyRef","t3","setSelectedValue","current","state","t4","form","radioGroupProps","onKeyDown","onArrowKey","groupProps","t5","event","t6","within","isFocusVisible","isFocusWithinVisible","focusProps","groupFocusProps","t7","t8","name","t9","t10","t11","radioGroup","focused","fillWidth","field","_RadioGroup","cubeInputType","displayName","_c","mergeProps"],"sources":["../../../../src/components/fields/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { getActiveElement, useObjectRef } from '@react-aria/utils';\nimport { BaseProps, Styles, tasty } from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { AriaRadioGroupProps, useFocusRing, useRadioGroup } from 'react-aria';\nimport { RadioGroupState, useRadioGroupState } from 'react-stately';\n\nimport { Provider } from '../../../provider';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableStringValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { CubeItemProps } from '../../content/Item/Item';\nimport { FormScopeMask, useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\n\nimport { RadioContext } from './context';\n\nimport type { KeyboardEvent } from 'react';\n\nexport interface CubeRadioGroupProps\n  extends\n    BaseProps,\n    Omit<AriaRadioGroupProps, 'errorMessage' | 'form' | 'name'>,\n    FieldLayoutStyleProps,\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?: Exclude<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: {\n      '': 'max-content max-content initial',\n      // In a field its style props size, the group fills the field as every\n      // other input does.\n      'fill-width': 'auto',\n    },\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      '': '$ring-width #primary-text.0 / $outline-offset',\n      'focused & (button | tabs)':\n        '$ring-width #primary-text / $outline-offset',\n    },\n  },\n});\n\n/**\n * Whether focus rests on the radio with this value while it is disabled. Only\n * a radio kept focusable for its tooltip can be: a natively disabled one never\n * takes focus (see `Radio`).\n */\nfunction isFocusedDisabledRadio(value: string | null) {\n  let element = getActiveElement();\n\n  return (\n    element instanceof HTMLInputElement &&\n    element.type === 'radio' &&\n    element.value === value &&\n    element.getAttribute('aria-disabled') === 'true'\n  );\n}\n\nfunction RadioGroup(rawProps: WithNullableValue<CubeRadioGroupProps>, ref) {\n  let orientation = rawProps.orientation;\n\n  // `null` is the radio group's own \"nothing selected\".\n  rawProps = castNullableStringValue(rawProps, null);\n  let props = useFieldProps(rawProps, { defaultValidationTrigger: 'onChange' });\n\n  let {\n    qa,\n    id,\n    isDisabled,\n    isReadOnly,\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  } = props;\n  let domRef = useObjectRef(ref);\n\n  const fieldLayout = splitFieldLayout(props);\n\n  styles = fieldLayout.styles;\n\n  let baseState = useRadioGroupState(props);\n  // The arrow keys focus the next radio and select it. A disabled radio that\n  // keeps focus for its tooltip is reached that way too, and has to stop the\n  // selection the way a read-only group does: focus moves, the value stays.\n  // Only the arrow keys: a click elsewhere or a form reset still selects.\n  let isArrowKeyRef = useRef(false);\n  let state: RadioGroupState = {\n    ...baseState,\n    setSelectedValue(value) {\n      if (isArrowKeyRef.current && isFocusedDisabledRadio(value)) return;\n\n      baseState.setSelectedValue(value);\n    },\n  };\n\n  // Set default orientation based on type\n  if (orientation == null) {\n    orientation =\n      type === 'button' || type === 'tabs' ? 'horizontal' : 'vertical';\n  }\n\n  // React Aria hands `form` to every radio's input as the id of its `<form>`,\n  // so the form instance would render as `form=\"[object Object]\"` on each.\n  let { radioGroupProps, labelProps } = useRadioGroup(\n    { ...props, orientation, form: undefined },\n    state,\n  );\n\n  let { onKeyDown: onArrowKey, ...groupProps } = radioGroupProps;\n  let onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    isArrowKeyRef.current = true;\n    onArrowKey?.(event);\n    isArrowKeyRef.current = false;\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      ref={domRef}\n      // Keep semantics and keyboard handling on the group: `isBare` omits\n      // the field wrapper.\n      {...mergeProps(groupProps, groupFocusProps)}\n      onKeyDown={onKeyDown}\n      // `useRadioGroup` seeds its id once; the current one follows the form\n      // binding.\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        'fill-width': fieldLayout.fillWidth,\n      }}\n    >\n      <FormScopeMask\n        value={{\n          isRequired,\n          isInvalid,\n          isValid,\n          isDisabled,\n        }}\n      >\n        {/* Each radio is a field that reads the provider before the form\n            context, so the group's own state has to reach it here to beat an\n            enclosing disabled form. `<Provider>` skips `undefined`, so a group\n            that sets nothing keeps the form's state. */}\n        <Provider isDisabled={isDisabled} isReadOnly={isReadOnly}>\n          <RadioContext.Provider\n            value={{\n              state,\n              name: props.name,\n              size,\n              buttonType,\n              type,\n            }}\n          >\n            {children}\n          </RadioContext.Provider>\n        </Provider>\n      </FormScopeMask>\n    </RadioGroupElement>\n  );\n\n  return wrapWithField(radioGroup, {\n    ...props,\n    ...fieldLayout.field,\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.200.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 //#region src/components/fields/RadioGroup/context.ts
 const RadioContext = createContext(null);

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

@@ -1 +1 @@
-{"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,IAAI;AAE1E,SAAOY,mBAAA;CAAA,OACEX,WAAWU,YAAY;AAAC"}
+{"version":3,"file":"context.js","names":["createContext","useContext","RadioGroupState","CubeItemProps","CubeRadioGroupState","name","state","size","buttonType","type","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}\n\nexport const RadioContext = createContext<CubeRadioGroupState | null>(null);\n\nexport function useRadioProvider(): CubeRadioGroupState | null {\n  return useContext(RadioContext);\n}\n"],"mappings":";;;AAaA,MAAaU,eAAeV,cAA0C,IAAI;AAE1E,SAAOW,mBAAA;CAAA,OACEV,WAAWS,YAAY;AAAC"}

package/dist/components/fields/SearchComboBox/SearchComboBox.d.ts

@@ -2,14 +2,15 @@
 import { FieldBaseProps, TextFieldKeyboardProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { CollectionItem as _CollectionItem } from "../../CollectionItem.js";
-import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
+import { BasePropsWithoutChildren, Styles } from "@tenphi/tasty";
 import { ForwardedRef, ReactElement, ReactNode, RefObject } from "react";
 import { Section } from "react-stately";
 import { FocusableRef, Key as Key$1 } from "@react-types/shared";
 //#region src/components/fields/SearchComboBox/SearchComboBox.d.ts
 type FilterFn = (textValue: string, inputValue: string) => boolean;
 export type PopoverTriggerAction = 'focus' | 'input' | 'manual';
-export interface CubeSearchComboBoxProps<T> extends BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, Omit<FieldBaseProps, 'name' | 'form' | 'rules' | 'shouldUpdate' | 'validationDelay' | 'validateTrigger' | 'insideForm' | 'idPrefix'> {
+export interface CubeSearchComboBoxProps<T> extends BasePropsWithoutChildren, FieldLayoutStyleProps, Omit<FieldBaseProps, 'name' | 'form' | 'rules' | 'shouldUpdate' | 'validationDelay' | 'validateTrigger' | 'insideForm' | 'idPrefix'> {
   /**
    * Callback fired when the user picks a suggestion from the list.
    * Receives the option key and its text value. The input is cleared afterwards.
@@ -47,8 +48,12 @@ export interface CubeSearchComboBoxProps<T> extends BasePropsWithoutChildren, Ba
   /**
    * Callback fired when a key is pressed on the input, before the built-in
    * key handling. Receives React Aria's keyboard event: `e.preventDefault()`
-   * skips the built-in handling for the key, and propagation stops at the
-   * input unless the handler calls `e.continuePropagation()`.
+   * skips the built-in handling for the key. `Escape` and `Tab` go on to
+   * ancestors, such as a surrounding dialog, unless SearchComboBox acts on
+   * them or the handler prevents them. It acts on `Escape` while the list is
+   * open or the input has text: it closes the list, or clears the text, or,
+   * when not clearable, keeps the browser from clearing it. Other keys stop
+   * at the input unless the handler calls `e.continuePropagation()`.
    */
   onKeyDown?: TextFieldKeyboardProps['onKeyDown'];
   /** Popover trigger behavior: 'focus', 'input', or 'manual'. Defaults to 'input' */

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

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
@@ -11,11 +10,13 @@ import { useI18n } from "../../../i18n/useI18n.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { generateRandomId } from "../../../utils/random.js";
 import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { settleOverlayKey } from "../../../utils/react/overlayKeyPropagation.js";
 import { asksForFieldChrome, withFieldChrome } from "../../form/field-chrome.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { useValidationProps } from "../../form/validation/use-validation-props.js";
 import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { getListBoxOptionId } from "../ListBox/optionId.js";
 import { filterCollectionNodes, getEdgeVisibleKey, getNextVisibleKey, getVisibleKeys, markKeyboardFocus } from "../ListBoxPopover/listNavigation.js";
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
@@ -23,7 +24,7 @@ import { SearchIcon } from "../../../icons/SearchIcon.js";
 import { ListBoxPopover } from "../ListBoxPopover/ListBoxPopover.js";
 import { useCompositeFocus } from "../ListBoxPopover/useCompositeFocus.js";
 import { c } from "react/compiler-runtime";
-import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useFilter, useKeyboard } from "react-aria";
@@ -37,11 +38,6 @@ const InputElement = tasty({
 	as: "input",
 	styles: DEFAULT_INPUT_STYLES
 });
-const PROP_STYLES = [
-	...BASE_STYLES,
-	...OUTER_STYLES,
-	...COLOR_STYLES
-];
 function useDelayedFlag(active, delay) {
 	const $ = c(4);
 	const [flag, setFlag] = useState(false);
@@ -106,7 +102,7 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 	props = useProviderProps(props);
 	props = useValidationProps(props);
 	const { t } = useI18n();
-	let { qa, label, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, id, icon, prefix, isDisabled, autoFocus, autoComplete = "off", wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingDelay = 1e3, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, suffix, hideTrigger = true, message, description, size = "medium", direction = "bottom", shouldFlip = true, popoverTrigger = "input", suffixPosition = "before", filter, styles, labelSuffix, inputValue, defaultInputValue, onInputChange, isClearable = true, onClear, placeholder, emptyLabel, onSelect, onSubmit, items, children: renderChildren, sectionStyles, headingStyles, listGap, isReadOnly, overlayOffset = 8, containerPadding = 8, onOpenChange, onFocus, onBlur, onKeyDown, disabledKeys, ...otherProps } = props;
+	let { qa, label, labelStyles, isRequired, necessityIndicator, isInvalid, isValid, id, icon, prefix, isDisabled, autoFocus, autoComplete = "off", wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingDelay = 1e3, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, suffix, hideTrigger = true, message, description, size = "medium", direction = "bottom", shouldFlip = true, popoverTrigger = "input", suffixPosition = "before", filter, styles, labelSuffix, inputValue, defaultInputValue, onInputChange, isClearable = true, onClear, placeholder, emptyLabel, onSelect, onSubmit, items, children: renderChildren, sectionStyles, headingStyles, listGap, isReadOnly, overlayOffset = 8, containerPadding = 8, onOpenChange, onFocus, onBlur, onKeyDown, disabledKeys } = props;
 	const searchComboBoxId = useMemo(() => generateRandomId(), []);
 	wrapperRef = useCombinedRefs(wrapperRef, ref);
 	popoverRef = useCombinedRefs(popoverRef);
@@ -114,7 +110,8 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 	const [internalInputValue, setInternalInputValue] = useState(defaultInputValue ?? "");
 	const effectiveInputValue = isControlledInput ? inputValue : internalInputValue;
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-	styles = extractStyles(otherProps, PROP_STYLES, styles);
+	const fieldLayout = splitFieldLayout(props);
+	styles = fieldLayout.styles;
 	inputRef = useCombinedRefs(inputRef);
 	triggerRef = useCombinedRefs(triggerRef);
 	listBoxRef = useCombinedRefs(listBoxRef);
@@ -299,8 +296,7 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 	};
 	const { keyboardProps } = useKeyboard({ onKeyDown: (e_5) => {
 		onKeyDown?.(e_5);
-		if (e_5.isDefaultPrevented()) return;
-		switch (e_5.key) {
+		if (!e_5.isDefaultPrevented()) switch (e_5.key) {
 			case "ArrowDown":
 			case "ArrowUp":
 				handleArrowKey(e_5);
@@ -314,6 +310,7 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 			case "Home":
 			case "End": handleEdgeKey(e_5);
 		}
+		settleOverlayKey(e_5);
 	} });
 	if (icon === void 0) icon = /* @__PURE__ */ jsx(SearchIcon, {});
 	if (icon) {
@@ -325,27 +322,20 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 		else prefix = icon;
 	}
 	const showClearButton = isClearable && effectiveInputValue !== "" && !isDisabled && !isReadOnly;
-	const mods = useMemo(() => ({
+	const mods = {
 		...getValidationMods({
 			isInvalid,
 			isValid
 		}),
 		disabled: isDisabled,
+		readonly: !!isReadOnly,
 		hovered: false,
 		focused: isFocused,
 		loading: showLoading,
 		prefix: !!prefix,
 		suffix: true,
 		clearable: showClearButton
-	}), [
-		isInvalid,
-		isValid,
-		isDisabled,
-		isFocused,
-		showLoading,
-		prefix,
-		showClearButton
-	]);
+	};
 	const searchComboBoxWidth = wrapperRef?.current?.offsetWidth;
 	useLayoutEffect(() => {
 		if (!shouldShowPopover) return;
@@ -486,7 +476,10 @@ const SearchComboBox = forwardRef(function SearchComboBox(props, ref) {
 		]
 	});
 	const { children: _, ...propsWithoutChildren } = props;
-	return wrapWithField(searchComboBoxField, propsWithoutChildren);
+	return wrapWithField(searchComboBoxField, {
+		...propsWithoutChildren,
+		...fieldLayout.field
+	});
 });
 SearchComboBox.Item = _CollectionItem;
 SearchComboBox.Section = Section;