@povio/ui 2.3.3 → 3.0.0-rc.2

package/dist/components/overlays/Tooltip/tooltip.cva.d.ts

@@ -1,21 +1,49 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const tooltipCva: (props?: ({
-    color?: "default" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TooltipVariantProps extends VariantProps<typeof tooltipCva> {
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const tooltipDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly color: {
+            readonly default: ["bg-interactive-contained-secondary-idle"];
+            readonly error: ["w-max bg-elevation-fill-error-1"];
+        };
+    }>;
+};
+export type TooltipConfig = NonNullable<typeof tooltipDefinition.config>;
+export interface TooltipVariantProps extends UIOverrides.VariantProps<TooltipConfig> {
 }
-export declare const tooltipPointerHorizontalCva: (props?: ({
-    color?: "default" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TooltipPointerHorizontalVariantProps extends VariantProps<typeof tooltipPointerHorizontalCva> {
+export declare const tooltipPointerHorizontalDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly color: {
+            readonly default: ["text-interactive-contained-secondary-idle"];
+            readonly error: ["text-elevation-fill-error-1"];
+        };
+    }>;
+};
+export type TooltipPointerHorizontalConfig = NonNullable<typeof tooltipPointerHorizontalDefinition.config>;
+export interface TooltipPointerHorizontalVariantProps extends UIOverrides.VariantProps<TooltipPointerHorizontalConfig> {
 }
-export declare const tooltipPointerVerticalCva: (props?: ({
-    color?: "default" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TooltipPointerVerticalVariantProps extends VariantProps<typeof tooltipPointerVerticalCva> {
+export declare const tooltipPointerVerticalDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly color: {
+            readonly default: ["text-interactive-contained-secondary-idle"];
+            readonly error: ["text-elevation-fill-error-1"];
+        };
+    }>;
+};
+export type TooltipPointerVerticalConfig = NonNullable<typeof tooltipPointerVerticalDefinition.config>;
+export interface TooltipPointerVerticalVariantProps extends UIOverrides.VariantProps<TooltipPointerVerticalConfig> {
 }
-export declare const tooltipTextCva: (props?: ({
-    color?: "default" | "error" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TooltipTextVariantProps extends VariantProps<typeof tooltipTextCva> {
+export declare const tooltipTextDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly color: {
+            readonly default: ["text-interactive-contained-secondary-on-idle"];
+            readonly error: ["text-text-error-inverted-1"];
+        };
+    }>;
+};
+export type TooltipTextConfig = NonNullable<typeof tooltipTextDefinition.config>;
+export interface TooltipTextVariantProps extends UIOverrides.VariantProps<TooltipTextConfig> {
 }

package/dist/components/overlays/Tooltip/tooltip.cva.js

@@ -1,32 +1,44 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 //#region src/components/overlays/Tooltip/tooltip.cva.ts
-var tooltipCva = cva(["group max-w-64 rounded-tooltip-rounding-default px-tooltip-side-default py-tooltip-height-default shadow-2"], {
-	variants: { color: {
-		default: ["bg-interactive-contained-secondary-idle"],
-		error: ["w-max bg-elevation-fill-error-1"]
-	} },
-	defaultVariants: { color: "default" }
+var tooltipDefinition = UIOverrides.defineConfig({
+	base: ["group max-w-64 rounded-tooltip-rounding-default px-tooltip-side-default py-tooltip-height-default shadow-2"],
+	config: {
+		variants: { color: {
+			default: ["bg-interactive-contained-secondary-idle"],
+			error: ["w-max bg-elevation-fill-error-1"]
+		} },
+		defaultVariants: { color: "default" }
+	}
 });
-var tooltipPointerHorizontalCva = cva(["h-2-5 w-5 group-placement-left:hidden group-placement-right:hidden group-placement-top:rotate-180"], {
-	variants: { color: {
-		default: ["text-interactive-contained-secondary-idle"],
-		error: ["text-elevation-fill-error-1"]
-	} },
-	defaultVariants: { color: "default" }
+var tooltipPointerHorizontalDefinition = UIOverrides.defineConfig({
+	base: ["h-2-5 w-5 group-placement-left:hidden group-placement-right:hidden group-placement-top:rotate-180"],
+	config: {
+		variants: { color: {
+			default: ["text-interactive-contained-secondary-idle"],
+			error: ["text-elevation-fill-error-1"]
+		} },
+		defaultVariants: { color: "default" }
+	}
 });
-var tooltipPointerVerticalCva = cva(["h-5 w-2-5 group-placement-bottom:hidden group-placement-top:hidden group-placement-left:rotate-180"], {
-	variants: { color: {
-		default: ["text-interactive-contained-secondary-idle"],
-		error: ["text-elevation-fill-error-1"]
-	} },
-	defaultVariants: { color: "default" }
+var tooltipPointerVerticalDefinition = UIOverrides.defineConfig({
+	base: ["h-5 w-2-5 group-placement-bottom:hidden group-placement-top:hidden group-placement-left:rotate-180"],
+	config: {
+		variants: { color: {
+			default: ["text-interactive-contained-secondary-idle"],
+			error: ["text-elevation-fill-error-1"]
+		} },
+		defaultVariants: { color: "default" }
+	}
 });
-var tooltipTextCva = cva([], {
-	variants: { color: {
-		default: ["text-interactive-contained-secondary-on-idle"],
-		error: ["text-text-error-inverted-1"]
-	} },
-	defaultVariants: { color: "default" }
+var tooltipTextDefinition = UIOverrides.defineConfig({
+	base: [],
+	config: {
+		variants: { color: {
+			default: ["text-interactive-contained-secondary-on-idle"],
+			error: ["text-text-error-inverted-1"]
+		} },
+		defaultVariants: { color: "default" }
+	}
 });
 //#endregion
-export { tooltipCva, tooltipPointerHorizontalCva, tooltipPointerVerticalCva, tooltipTextCva };
+export { tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition };

package/dist/components/segment/Segment.js

@@ -1,84 +1,245 @@
-import { UIStyle } from "../../config/uiStyle.context.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { FormField } from "../inputs/FormField/FormField.js";
-import { segmentCva } from "./segment.cva.js";
+import { segmentDefinition } from "./segment.cva.js";
 import { SegmentItem } from "./SegmentItem.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Fragment as Fragment$1, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, useRef } from "react";
 import { ToggleButtonGroup } from "react-aria-components";
 import { useToggleButtonGroup } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
 //#region src/components/segment/Segment.tsx
-var SegmentBase = ({ className, items, error, onChange, value, defaultValue, segmentItemClassName, ...rest }) => {
-	const props = {
-		...rest,
-		defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
-		selectedKeys: value ? Array.isArray(value) ? value : [value] : void 0
-	};
+var SegmentBase = (t0) => {
+	const $ = c(49);
+	let className;
+	let defaultValue;
+	let error;
+	let items;
+	let onChange;
+	let rest;
+	let segmentItemClassName;
+	let value;
+	if ($[0] !== t0) {
+		({className, items, error, onChange, value, defaultValue, segmentItemClassName, ...rest} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = defaultValue;
+		$[3] = error;
+		$[4] = items;
+		$[5] = onChange;
+		$[6] = rest;
+		$[7] = segmentItemClassName;
+		$[8] = value;
+	} else {
+		className = $[1];
+		defaultValue = $[2];
+		error = $[3];
+		items = $[4];
+		onChange = $[5];
+		rest = $[6];
+		segmentItemClassName = $[7];
+		value = $[8];
+	}
+	let t1;
+	if ($[9] !== defaultValue) {
+		t1 = defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0;
+		$[9] = defaultValue;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== value) {
+		t2 = value ? Array.isArray(value) ? value : [value] : void 0;
+		$[11] = value;
+		$[12] = t2;
+	} else t2 = $[12];
+	let t3;
+	if ($[13] !== rest || $[14] !== t1 || $[15] !== t2) {
+		t3 = {
+			...rest,
+			defaultSelectedKeys: t1,
+			selectedKeys: t2
+		};
+		$[13] = rest;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+	} else t3 = $[16];
+	const props = t3;
 	const buttonGroupRef = useRef(null);
 	const state = useToggleGroupState(props);
 	const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
-	const segmentCva$1 = UIStyle.useCva("segment.cva", segmentCva);
-	const formFieldProps = {
-		error,
-		label: "",
-		hideLabel: true,
-		isDisabled: props.isDisabled
-	};
-	const onSelectionChange = (keys) => {
-		if (props.selectionMode === "multiple") onChange?.(Array.from(keys.values()));
-		else onChange?.(Array.from(keys.values())[0]);
-	};
-	const gridTemplateColumns = useMemo(() => {
-		return items.length > 2 ? Array.from({ length: items.length * 2 - 1 }, (_, i) => i % 2 === 0 ? "1fr" : "auto").join(" ") : `repeat(${items.length}, 1fr)`;
-	}, [items.length]);
-	return /* @__PURE__ */ jsx(FormField, {
-		...formFieldProps,
-		className: clsx("relative w-full", className),
-		children: /* @__PURE__ */ jsx(ToggleButtonGroup, {
+	const segmentCva = UIOverrides.useCva("segment.cva", segmentDefinition);
+	let t4;
+	if ($[17] !== error || $[18] !== props.isDisabled) {
+		t4 = {
+			error,
+			label: "",
+			hideLabel: true,
+			isDisabled: props.isDisabled
+		};
+		$[17] = error;
+		$[18] = props.isDisabled;
+		$[19] = t4;
+	} else t4 = $[19];
+	const formFieldProps = t4;
+	let t5;
+	if ($[20] !== onChange || $[21] !== props.selectionMode) {
+		t5 = (keys) => {
+			if (props.selectionMode === "multiple") onChange?.(Array.from(keys.values()));
+			else onChange?.(Array.from(keys.values())[0]);
+		};
+		$[20] = onChange;
+		$[21] = props.selectionMode;
+		$[22] = t5;
+	} else t5 = $[22];
+	const onSelectionChange = t5;
+	let t6;
+	if ($[23] !== items.length) {
+		t6 = items.length > 2 ? Array.from({ length: items.length * 2 - 1 }, _temp).join(" ") : `repeat(${items.length}, 1fr)`;
+		$[23] = items.length;
+		$[24] = t6;
+	} else t6 = $[24];
+	const gridTemplateColumns = t6;
+	let t7;
+	if ($[25] !== className) {
+		t7 = clsx("relative w-full", className);
+		$[25] = className;
+		$[26] = t7;
+	} else t7 = $[26];
+	let t8;
+	if ($[27] !== className || $[28] !== props || $[29] !== segmentCva) {
+		t8 = segmentCva({
+			...props,
+			className
+		});
+		$[27] = className;
+		$[28] = props;
+		$[29] = segmentCva;
+		$[30] = t8;
+	} else t8 = $[30];
+	let t9;
+	if ($[31] !== gridTemplateColumns) {
+		t9 = { gridTemplateColumns };
+		$[31] = gridTemplateColumns;
+		$[32] = t9;
+	} else t9 = $[32];
+	let t10;
+	if ($[33] !== items || $[34] !== props.isDisabled || $[35] !== segmentItemClassName || $[36] !== state) {
+		t10 = items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SegmentItem, {
+			...item,
+			className: clsx(item.className, segmentItemClassName),
+			isDisabled: item.isDisabled || props.isDisabled,
+			isSelected: state.selectedKeys.has(item.id),
+			onPress: () => {
+				state.toggleKey(item.id);
+			}
+		}), index !== items.length - 1 && items.length > 2 && /* @__PURE__ */ jsx("div", {
+			className: clsx("h-5 w-px rounded-2xl", !state.selectedKeys.has(item.id) && !state.selectedKeys.has(items[index + 1].id) && "bg-elevation-outline-default-1"),
+			children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-px" })
+		})] }, item.id));
+		$[33] = items;
+		$[34] = props.isDisabled;
+		$[35] = segmentItemClassName;
+		$[36] = state;
+		$[37] = t10;
+	} else t10 = $[37];
+	let t11;
+	if ($[38] !== groupProps || $[39] !== onSelectionChange || $[40] !== props || $[41] !== t10 || $[42] !== t8 || $[43] !== t9) {
+		t11 = /* @__PURE__ */ jsx(ToggleButtonGroup, {
 			...props,
 			...groupProps,
 			ref: buttonGroupRef,
 			onSelectionChange,
-			className: segmentCva$1({
-				...props,
-				className
-			}),
-			style: { gridTemplateColumns },
-			children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SegmentItem, {
-				...item,
-				className: clsx(item.className, segmentItemClassName),
-				isDisabled: item.isDisabled || props.isDisabled,
-				isSelected: state.selectedKeys.has(item.id),
-				onPress: () => {
-					state.toggleKey(item.id);
-				}
-			}), index !== items.length - 1 && items.length > 2 && /* @__PURE__ */ jsx("div", {
-				className: clsx("h-5 w-px rounded-2xl", !state.selectedKeys.has(item.id) && !state.selectedKeys.has(items[index + 1].id) && "bg-elevation-outline-default-1"),
-				children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-px" })
-			})] }, item.id))
-		})
-	});
+			className: t8,
+			style: t9,
+			children: t10
+		});
+		$[38] = groupProps;
+		$[39] = onSelectionChange;
+		$[40] = props;
+		$[41] = t10;
+		$[42] = t8;
+		$[43] = t9;
+		$[44] = t11;
+	} else t11 = $[44];
+	let t12;
+	if ($[45] !== formFieldProps || $[46] !== t11 || $[47] !== t7) {
+		t12 = /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			className: t7,
+			children: t11
+		});
+		$[45] = formFieldProps;
+		$[46] = t11;
+		$[47] = t7;
+		$[48] = t12;
+	} else t12 = $[48];
+	return t12;
 };
 var Segment = (props) => {
+	const $ = c(15);
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref, ...innerProps } = props;
-		return /* @__PURE__ */ jsx(Controller, {
-			control: formControl.control,
-			name: formControl.name,
-			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(SegmentBase, {
-				...innerProps,
-				ref: mergeRefs(ref, field.ref),
-				value: field.value,
-				onChange: field.onChange,
-				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
-			})
-		});
+		let formControl;
+		let innerProps;
+		let ref;
+		if ($[0] !== props) {
+			({formControl, ref, ...innerProps} = props);
+			$[0] = props;
+			$[1] = formControl;
+			$[2] = innerProps;
+			$[3] = ref;
+		} else {
+			formControl = $[1];
+			innerProps = $[2];
+			ref = $[3];
+		}
+		let t0;
+		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
+			t0 = (t1) => {
+				const { field, fieldState: t2 } = t1;
+				const { error } = t2;
+				return /* @__PURE__ */ jsx(SegmentBase, {
+					...innerProps,
+					ref: mergeRefs(ref, field.ref),
+					value: field.value,
+					onChange: field.onChange,
+					isDisabled: field.disabled || props.isDisabled,
+					error: props.error ?? error?.message
+				});
+			};
+			$[4] = innerProps;
+			$[5] = props.error;
+			$[6] = props.isDisabled;
+			$[7] = ref;
+			$[8] = t0;
+		} else t0 = $[8];
+		let t1;
+		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Controller, {
+				control: formControl.control,
+				name: formControl.name,
+				render: t0
+			});
+			$[9] = formControl.control;
+			$[10] = formControl.name;
+			$[11] = t0;
+			$[12] = t1;
+		} else t1 = $[12];
+		return t1;
 	}
-	return /* @__PURE__ */ jsx(SegmentBase, { ...props });
+	let t0;
+	if ($[13] !== props) {
+		t0 = /* @__PURE__ */ jsx(SegmentBase, { ...props });
+		$[13] = props;
+		$[14] = t0;
+	} else t0 = $[14];
+	return t0;
 };
+function _temp(_, i) {
+	return i % 2 === 0 ? "1fr" : "auto";
+}
 //#endregion
 export { Segment };

package/dist/components/segment/SegmentItem.js

@@ -1,28 +1,85 @@
-import { UIStyle } from "../../config/uiStyle.context.js";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 import { Typography } from "../text/Typography/Typography.js";
-import { segmentItemCva } from "./segment.cva.js";
+import { segmentItemDefinition } from "./segment.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
 //#region src/components/segment/SegmentItem.tsx
-var SegmentItem = ({ label, icon, id, isDisabled, className, ...props }) => {
+var SegmentItem = (t0) => {
+	const $ = c(23);
+	let className;
+	let icon;
+	let id;
+	let isDisabled;
+	let label;
+	let props;
+	if ($[0] !== t0) {
+		({label, icon, id, isDisabled, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = icon;
+		$[3] = id;
+		$[4] = isDisabled;
+		$[5] = label;
+		$[6] = props;
+	} else {
+		className = $[1];
+		icon = $[2];
+		id = $[3];
+		isDisabled = $[4];
+		label = $[5];
+		props = $[6];
+	}
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
-	const segmentItemCva$1 = UIStyle.useCva("segment.itemCva", segmentItemCva);
-	return /* @__PURE__ */ jsxs(ToggleButton, {
-		...props,
-		id,
-		className: segmentItemCva$1({
+	const segmentItemCva = UIOverrides.useCva("segment.itemCva", segmentItemDefinition);
+	let t1;
+	if ($[7] !== className || $[8] !== iconOnly || $[9] !== segmentItemCva) {
+		t1 = segmentItemCva({
 			iconOnly,
 			className
-		}),
-		isDisabled,
-		children: [icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }), label && /* @__PURE__ */ jsx(Typography, {
+		});
+		$[7] = className;
+		$[8] = iconOnly;
+		$[9] = segmentItemCva;
+		$[10] = t1;
+	} else t1 = $[10];
+	let t2;
+	if ($[11] !== IconComponent || $[12] !== icon) {
+		t2 = icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" });
+		$[11] = IconComponent;
+		$[12] = icon;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] !== label) {
+		t3 = label && /* @__PURE__ */ jsx(Typography, {
 			size: "label-2",
 			as: "span",
 			className: "overflow-hidden text-ellipsis text-center",
 			children: label
-		})]
-	});
+		});
+		$[14] = label;
+		$[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	if ($[16] !== id || $[17] !== isDisabled || $[18] !== props || $[19] !== t1 || $[20] !== t2 || $[21] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(ToggleButton, {
+			...props,
+			id,
+			className: t1,
+			isDisabled,
+			children: [t2, t3]
+		});
+		$[16] = id;
+		$[17] = isDisabled;
+		$[18] = props;
+		$[19] = t1;
+		$[20] = t2;
+		$[21] = t3;
+		$[22] = t4;
+	} else t4 = $[22];
+	return t4;
 };
 //#endregion
 export { SegmentItem };

package/dist/components/segment/segment.cva.d.ts

@@ -1,9 +1,20 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const segmentCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
-export interface SegmentVariantProps extends VariantProps<typeof segmentCva> {
+import { UIOverrides } from '../../config/uiOverrides.context';
+export declare const segmentDefinition: {
+    base: string[];
+    config?: import("../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+};
+export type SegmentConfig = NonNullable<typeof segmentDefinition.config>;
+export interface SegmentVariantProps extends UIOverrides.VariantProps<SegmentConfig> {
 }
-export declare const segmentItemCva: (props?: ({
-    iconOnly?: boolean | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface SegmentItemVariantProps extends VariantProps<typeof segmentItemCva> {
+export declare const segmentItemDefinition: {
+    base: string[];
+    config: import("../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly iconOnly: {
+            readonly true: "px-segmented-control-height-segment";
+            readonly false: "px-segmented-control-side-segment";
+        };
+    }>;
+};
+export type SegmentItemConfig = NonNullable<typeof segmentItemDefinition.config>;
+export interface SegmentItemVariantProps extends UIOverrides.VariantProps<SegmentItemConfig> {
 }

package/dist/components/segment/segment.cva.js

@@ -1,27 +1,30 @@
-import { cva } from "class-variance-authority";
+import { UIOverrides } from "../../config/uiOverrides.context.js";
 //#region src/components/segment/segment.cva.ts
-var segmentCva = cva([
+var segmentDefinition = UIOverrides.defineConfig({ base: [
 	"group/segment grid w-fit items-center gap-segmented-control-side-segmented-control p-segmented-control-side-segmented-control",
 	"bg-elevation-fill-default-3",
 	"rounded-segmented-control-rounding-segmented-control"
-]);
-var segmentItemCva = cva([
-	"flex items-center justify-center gap-segmented-control-gap-content-icon-to-text transition-all duration-200",
-	"border border-support-transparent-outline",
-	"py-segmented-control-height-segment",
-	"rounded-segmented-control-rounding-segment",
-	"text-interactive-subtle-secondary-on-idle",
-	"hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
-	"pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
-	"disabled:border-support-transparent-outline disabled:text-interactive-subtle-secondary-on-disabled",
-	"selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
-	"selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
-], {
-	variants: { iconOnly: {
-		true: "px-segmented-control-height-segment",
-		false: "px-segmented-control-side-segment"
-	} },
-	defaultVariants: { iconOnly: false }
+] });
+var segmentItemDefinition = UIOverrides.defineConfig({
+	base: [
+		"flex items-center justify-center gap-segmented-control-gap-content-icon-to-text transition-all duration-200",
+		"border border-support-transparent-outline",
+		"py-segmented-control-height-segment",
+		"rounded-segmented-control-rounding-segment",
+		"text-interactive-subtle-secondary-on-idle",
+		"hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+		"pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+		"disabled:border-support-transparent-outline disabled:text-interactive-subtle-secondary-on-disabled",
+		"selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
+		"selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
+	],
+	config: {
+		variants: { iconOnly: {
+			true: "px-segmented-control-height-segment",
+			false: "px-segmented-control-side-segment"
+		} },
+		defaultVariants: { iconOnly: false }
+	}
 });
 //#endregion
-export { segmentCva, segmentItemCva };
+export { segmentDefinition, segmentItemDefinition };