@cube-dev/ui-kit 0.204.0 → 0.206.0

package/dist/components/fields/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/fields/FilterListBox/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { StyledHeader } from "../../actions/Menu/styled.js";
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from "../TextInput/TextInputBase.js";
 import { mergeStyles, tasty } from "@tenphi/tasty";

package/dist/components/fields/FilterPicker/FilterPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { mergeStyleLayers } from "../../../utils/styles.js";
 import { Text as _Text } from "../../content/Text.js";
 import { isTextOnly } from "../../../utils/react/isTextOnly.js";

package/dist/components/fields/FilterPicker/FilterTree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/Input/Input.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { FileInput as _FileInput } from "../FileInput/FileInput.js";
 import { NumberInput as _NumberInput } from "../NumberInput/NumberInput.js";
 import { PasswordInput as _PasswordInput } from "../PasswordInput/PasswordInput.js";

package/dist/components/fields/ListBox/DraggableListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { DraggableCollection } from "../../shared/DraggableCollection.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/ListBox/ListBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useWarn } from "../../../_internal/hooks/use-warn.js";

package/dist/components/fields/ListBox/optionId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 //#region src/components/fields/ListBox/optionId.ts
 /**
 * The DOM id of the option with `key` in the listbox whose id is `listBoxId`,

package/dist/components/fields/ListBoxPopover/ListBoxPopover.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { mergeRefs as mergeRefs$1 } from "../../../utils/react/useCombinedRefs.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";

package/dist/components/fields/ListBoxPopover/listNavigation.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 //#region src/components/fields/ListBoxPopover/listNavigation.ts
 /**
 * Walks a collection (possibly nested under sections) and collects the keys of

package/dist/components/fields/ListBoxPopover/useCompositeFocus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";

package/dist/components/fields/NumberInput/NumberInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { settleOverlayKey } from "../../../utils/react/overlayKeyPropagation.js";

package/dist/components/fields/NumberInput/StepButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { Button } from "../../actions/Button/Button.js";
 import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { c } from "react/compiler-runtime";

package/dist/components/fields/PasswordInput/PasswordInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useBufferedValue } from "../../../utils/react/useBufferedValue.js";

package/dist/components/fields/Picker/Picker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { mergeStyleLayers } from "../../../utils/styles.js";
 import { Text as _Text } from "../../content/Text.js";
 import { isTextOnly } from "../../../utils/react/isTextOnly.js";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.206.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getDisabledElementProps, getInertInputProps } from "../../../utils/react/disabledProps.js";
@@ -10,11 +10,12 @@ import { getValidationMods, getValidationTheme } from "../../form/validation/res
 import { INLINE_LABEL_STYLES } from "../../form/Label.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { HiddenInput } from "../../HiddenInput.js";
+import { SEGMENTED_SEGMENT_STYLES } from "../../navigation/Tabs/segmented-styles.js";
 import { RADIO_SIZE_MAP } from "../../navigation/Tabs/types.js";
 import { useRadioProvider } from "./context.js";
 import { RadioGroup as _RadioGroup } from "./RadioGroup.js";
 import { c } from "react/compiler-runtime";
-import { CONTAINER_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
+import { CONTAINER_STYLES, OUTER_STYLES, filterBaseProps, mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useHover, useRadio as useRadio$1 } from "react-aria";
@@ -31,9 +32,8 @@ const RADIO_BUTTON_COLUMNS = "max-content max-content minmax(0, max-content) max
 const RadioButtonElement = tasty(_Item, {
 	qa: "RadioButton",
 	as: "label",
-	styles: {
-		preset: "t3m",
-		lineHeight: "1em",
+	styles: mergeStyles({
+		preset: "t3m / tight",
 		flexGrow: 1,
 		gridTemplate: {
 			"": `"icon prefix label suffix rightIcon actions" auto / ${RADIO_BUTTON_COLUMNS}`,
@@ -42,19 +42,7 @@ const RadioButtonElement = tasty(_Item, {
 			"description=block": `"icon prefix label suffix rightIcon actions" auto "description description description description description description" auto / max-content max-content max-content max-content max-content max-content`
 		},
 		placeContent: "center",
-		shadow: {
-			"": false,
-			"tabs & selected": "$item-shadow",
-			"tabs & selected & disabled": false
-		},
-		fill: {
-			"selected & tabs": "#surface",
-			"selected & tabs & disabled": "#surface.6"
-		},
-		color: {
-			"selected & tabs": "#dark",
-			"selected & tabs & disabled": "#dark.3"
-		},
+		shadow: { "": false },
 		radius: {
 			"": true,
 			"!tabs & !:last-child": "1r left",
@@ -65,12 +53,18 @@ const RadioButtonElement = tasty(_Item, {
 			"": 0,
 			"!tabs & !:first-child": "-1bw left"
 		},
-		zIndex: { "!tabs & selected": 1 },
+		zIndex: {
+			"": "auto",
+			"!tabs & selected": 1
+		},
 		Label: { placeSelf: {
 			"": "center start",
 			"!has-prefix & !has-suffix & !has-icon & !has-right-icon": "center"
 		} }
-	}
+	}, SEGMENTED_SEGMENT_STYLES, { color: {
+		"segmented & invalid & !selected & !disabled": "#danger-accent-text-soft",
+		"segmented & valid & !selected & !disabled": "#success-accent-text-soft"
+	} })
 });
 const RadioWrapperElement = tasty({
 	as: "label",
@@ -215,7 +209,7 @@ const ITEM_PROPS = [
 	"labelRef"
 ];
 function Radio(props, ref) {
-	const $ = c(84);
+	const $ = c(82);
 	const ownIsDisabled = props.isDisabled;
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -242,12 +236,13 @@ function Radio(props, ref) {
 	if (!state) throw new Error("CubeUI: The Radio button is used outside the RadioGroup.");
 	const effectiveType = type ?? contextType ?? "radio";
 	const isButton = effectiveType === "button" || effectiveType === "tabs";
+	const isSegmented = effectiveType === "tabs";
 	const styles = extractStyles(otherProps, isButton ? CONTAINER_STYLES : OUTER_STYLES);
 	let effectiveSize = size ?? contextSize ?? "medium";
-	if (effectiveType === "tabs" && isButton) effectiveSize = RADIO_SIZE_MAP[effectiveSize === "large" ? "large" : "medium"];
+	if (isSegmented) effectiveSize = RADIO_SIZE_MAP[effectiveSize === "large" ? "large" : "medium"];
 	let effectiveButtonType;
 	let forceSelectedMod = false;
-	if (effectiveType === "tabs") effectiveButtonType = "clear";
+	if (isSegmented) effectiveButtonType = "clear";
 	else {
 		const baseButtonType = buttonType ?? contextButtonType ?? "outline";
 		if (baseButtonType === "primary") {
@@ -336,10 +331,9 @@ function Radio(props, ref) {
 		$[20] = isValid;
 		$[21] = t9;
 	} else t9 = $[21];
-	const t10 = effectiveType === "tabs";
-	let t11;
-	if ($[22] !== isButton || $[23] !== isFocused || $[24] !== isHovered || $[25] !== isRadioDisabled || $[26] !== isRadioSelected || $[27] !== isReadOnly || $[28] !== t10 || $[29] !== t9) {
-		t11 = {
+	let t10;
+	if ($[22] !== isButton || $[23] !== isFocused || $[24] !== isHovered || $[25] !== isRadioDisabled || $[26] !== isRadioSelected || $[27] !== isReadOnly || $[28] !== isSegmented || $[29] !== t9) {
+		t10 = {
 			checked: isRadioSelected,
 			...t9,
 			disabled: isRadioDisabled,
@@ -347,7 +341,9 @@ function Radio(props, ref) {
 			hovered: isHovered,
 			button: isButton,
 			focused: isFocused,
-			tabs: t10
+			"focus-visible": isFocused,
+			tabs: isSegmented,
+			segmented: isSegmented
 		};
 		$[22] = isButton;
 		$[23] = isFocused;
@@ -355,56 +351,49 @@ function Radio(props, ref) {
 		$[25] = isRadioDisabled;
 		$[26] = isRadioSelected;
 		$[27] = isReadOnly;
-		$[28] = t10;
+		$[28] = isSegmented;
 		$[29] = t9;
-		$[30] = t11;
-	} else t11 = $[30];
-	const mods = t11;
+		$[30] = t10;
+	} else t10 = $[30];
+	const mods = t10;
+	const segmentFocusProps = isSegmented ? focusProps : void 0;
 	if (isButton) {
-		const t12 = effectiveButtonType;
-		let t13;
+		const t11 = effectiveButtonType;
+		let t12;
 		if ($[31] !== isInvalid || $[32] !== isValid) {
-			t13 = getValidationTheme("default", {
+			t12 = getValidationTheme("default", {
 				isInvalid,
 				isValid
 			}, { includeValid: true });
 			$[31] = isInvalid;
 			$[32] = isValid;
-			$[33] = t13;
-		} else t13 = $[33];
-		const t14 = effectiveSize;
-		let t15;
+			$[33] = t12;
+		} else t12 = $[33];
+		let t13;
 		if ($[34] !== forceSelectedMod || $[35] !== isRadioDisabled) {
-			t15 = forceSelectedMod && !isRadioDisabled ? { selected: true } : {};
+			t13 = forceSelectedMod && !isRadioDisabled ? { selected: true } : {};
 			$[34] = forceSelectedMod;
 			$[35] = isRadioDisabled;
-			$[36] = t15;
-		} else t15 = $[36];
-		let t16;
-		if ($[37] !== mods || $[38] !== t15) {
-			t16 = {
+			$[36] = t13;
+		} else t13 = $[36];
+		let t14;
+		if ($[37] !== mods || $[38] !== t13) {
+			t14 = {
 				...mods,
-				...t15
+				...t13
 			};
 			$[37] = mods;
-			$[38] = t15;
-			$[39] = t16;
-		} else t16 = $[39];
-		let t17;
-		if ($[40] !== focusProps || $[41] !== hoverProps) {
-			t17 = mergeProps$1(hoverProps, focusProps);
-			$[40] = focusProps;
-			$[41] = hoverProps;
-			$[42] = t17;
-		} else t17 = $[42];
-		let t18;
-		if ($[43] !== ariaLabel || $[44] !== autoFocus || $[45] !== getInputProps || $[46] !== isButton || $[47] !== isRadioDisabled || $[48] !== isReadOnly || $[49] !== qa) {
-			t18 = (tooltipFocusProps, isItemTooltipActive) => /* @__PURE__ */ jsx(HiddenInput, {
+			$[38] = t13;
+			$[39] = t14;
+		} else t14 = $[39];
+		let t15;
+		if ($[40] !== ariaLabel || $[41] !== autoFocus || $[42] !== getInputProps || $[43] !== isButton || $[44] !== isRadioDisabled || $[45] !== isReadOnly || $[46] !== qa || $[47] !== segmentFocusProps) {
+			t15 = (tooltipFocusProps, isItemTooltipActive) => /* @__PURE__ */ jsx(HiddenInput, {
 				qa: qa || "Radio",
 				"data-input-type": "radio",
 				"aria-label": ariaLabel,
 				...autoFocus ? { "data-autofocus": "" } : void 0,
-				...mergeTooltipFocusProps(getInputProps(isItemTooltipActive), tooltipFocusProps),
+				...mergeTooltipFocusProps(mergeProps$1(getInputProps(isItemTooltipActive), segmentFocusProps), tooltipFocusProps),
 				ref: inputRef,
 				mods: {
 					button: isButton,
@@ -412,51 +401,52 @@ function Radio(props, ref) {
 					readonly: isReadOnly
 				}
 			});
-			$[43] = ariaLabel;
-			$[44] = autoFocus;
-			$[45] = getInputProps;
-			$[46] = isButton;
-			$[47] = isRadioDisabled;
-			$[48] = isReadOnly;
-			$[49] = qa;
-			$[50] = t18;
-		} else t18 = $[50];
-		let t19;
-		if ($[51] !== domRef || $[52] !== effectiveButtonType || $[53] !== effectiveSize || $[54] !== isRadioDisabled || $[55] !== isRadioSelected || $[56] !== itemProps || $[57] !== label || $[58] !== styles || $[59] !== t13 || $[60] !== t16 || $[61] !== t17 || $[62] !== t18) {
-			t19 = /* @__PURE__ */ jsx(RadioButtonElement, {
+			$[40] = ariaLabel;
+			$[41] = autoFocus;
+			$[42] = getInputProps;
+			$[43] = isButton;
+			$[44] = isRadioDisabled;
+			$[45] = isReadOnly;
+			$[46] = qa;
+			$[47] = segmentFocusProps;
+			$[48] = t15;
+		} else t15 = $[48];
+		let t16;
+		if ($[49] !== domRef || $[50] !== effectiveButtonType || $[51] !== effectiveSize || $[52] !== hoverProps || $[53] !== isRadioDisabled || $[54] !== isRadioSelected || $[55] !== itemProps || $[56] !== label || $[57] !== styles || $[58] !== t12 || $[59] !== t14 || $[60] !== t15) {
+			t16 = /* @__PURE__ */ jsx(RadioButtonElement, {
 				ref: domRef,
-				type: t12,
-				theme: t13,
-				size: t14,
+				type: t11,
+				theme: t12,
+				size: effectiveSize,
 				...itemProps,
 				isSelected: isRadioSelected,
 				isDisabled: isRadioDisabled,
-				mods: t16,
+				mods: t14,
 				styles,
-				...t17,
+				...hoverProps,
 				isDynamicLabel: true,
-				hiddenContent: t18,
+				hiddenContent: t15,
 				children: label
 			});
-			$[51] = domRef;
-			$[52] = effectiveButtonType;
-			$[53] = effectiveSize;
-			$[54] = isRadioDisabled;
-			$[55] = isRadioSelected;
-			$[56] = itemProps;
-			$[57] = label;
-			$[58] = styles;
-			$[59] = t13;
-			$[60] = t16;
-			$[61] = t17;
-			$[62] = t18;
-			$[63] = t19;
-		} else t19 = $[63];
-		return t19;
+			$[49] = domRef;
+			$[50] = effectiveButtonType;
+			$[51] = effectiveSize;
+			$[52] = hoverProps;
+			$[53] = isRadioDisabled;
+			$[54] = isRadioSelected;
+			$[55] = itemProps;
+			$[56] = label;
+			$[57] = styles;
+			$[58] = t12;
+			$[59] = t14;
+			$[60] = t15;
+			$[61] = t16;
+		} else t16 = $[61];
+		return t16;
 	}
-	let t12;
-	if ($[64] !== ariaLabel || $[65] !== autoFocus || $[66] !== domRef || $[67] !== focusProps || $[68] !== getInputProps || $[69] !== hoverProps || $[70] !== isButton || $[71] !== isRadioDisabled || $[72] !== isReadOnly || $[73] !== isTooltipActive || $[74] !== label || $[75] !== labelProps || $[76] !== labelStyles || $[77] !== mods || $[78] !== qa || $[79] !== renderWithTooltip || $[80] !== styles || $[81] !== tooltipLabelRef || $[82] !== type) {
-		t12 = renderWithTooltip((tooltipTriggerProps, tooltipRef) => {
+	let t11;
+	if ($[62] !== ariaLabel || $[63] !== autoFocus || $[64] !== domRef || $[65] !== focusProps || $[66] !== getInputProps || $[67] !== hoverProps || $[68] !== isButton || $[69] !== isRadioDisabled || $[70] !== isReadOnly || $[71] !== isTooltipActive || $[72] !== label || $[73] !== labelProps || $[74] !== labelStyles || $[75] !== mods || $[76] !== qa || $[77] !== renderWithTooltip || $[78] !== styles || $[79] !== tooltipLabelRef || $[80] !== type) {
+		t11 = renderWithTooltip((tooltipTriggerProps, tooltipRef) => {
 			const { pointerProps, focusProps: tooltipFocusProps_0 } = splitTooltipTriggerProps(tooltipTriggerProps);
 			return /* @__PURE__ */ jsxs(RadioWrapperElement, {
 				styles,
@@ -497,28 +487,28 @@ function Radio(props, ref) {
 				]
 			});
 		}, "top");
-		$[64] = ariaLabel;
-		$[65] = autoFocus;
-		$[66] = domRef;
-		$[67] = focusProps;
-		$[68] = getInputProps;
-		$[69] = hoverProps;
-		$[70] = isButton;
-		$[71] = isRadioDisabled;
-		$[72] = isReadOnly;
-		$[73] = isTooltipActive;
-		$[74] = label;
-		$[75] = labelProps;
-		$[76] = labelStyles;
-		$[77] = mods;
-		$[78] = qa;
-		$[79] = renderWithTooltip;
-		$[80] = styles;
-		$[81] = tooltipLabelRef;
-		$[82] = type;
-		$[83] = t12;
-	} else t12 = $[83];
-	return t12;
+		$[62] = ariaLabel;
+		$[63] = autoFocus;
+		$[64] = domRef;
+		$[65] = focusProps;
+		$[66] = getInputProps;
+		$[67] = hoverProps;
+		$[68] = isButton;
+		$[69] = isRadioDisabled;
+		$[70] = isReadOnly;
+		$[71] = isTooltipActive;
+		$[72] = label;
+		$[73] = labelProps;
+		$[74] = labelStyles;
+		$[75] = mods;
+		$[76] = qa;
+		$[77] = renderWithTooltip;
+		$[78] = styles;
+		$[79] = tooltipLabelRef;
+		$[80] = type;
+		$[81] = t11;
+	} else t11 = $[81];
+	return t11;
 }
 /**
 * Radio buttons allow users to select a single option from a list of mutually exclusive options.