@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/_chunk/switch.js

@@ -1,15 +1,30 @@
-import { useProviderProps } from "../provider/index.js";
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Switch.tsx
+import { a as useProviderProps } from "./provider.js";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps } from "./spectrum-context.js";
-import { CenterBaseline } from "../icon/center-baseline.js";
-import { s as Text } from "./text.js";
 import { a as useIsInForm, i as useFormProps } from "./form.js";
+import { CenterBaseline } from "../icon/center-baseline.js";
+import { s as Text$1 } from "./text.js";
 import { t as AlertTriangleIcon } from "./AlertTriangleIcon.js";
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, style, template, use } from "solid-js/web";
-import { Show, createContext, createMemo, mergeProps as mergeProps$1, splitProps, useContext } from "solid-js";
-import { useLocale } from "@proyecto-viviana/solidaria";
-import { SwitchButton, SwitchField, ToggleButton, ToggleButtonGroup } from "@proyecto-viviana/solidaria-components";
+import { SegmentedControl, SegmentedControlItem } from "../segmentedcontrol/index.js";
+import { className, createComponent, effect, getNextElement, insert, memo, mergeProps, readShallow, ref, style, template } from "@solidjs/web";
+import { Show, createContext, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+import { SwitchButton, SwitchField } from "@proyecto-viviana/solidaria-components";
+import { mergeProps as mergeProps$2, useLocale } from "@proyecto-viviana/solidaria";
 //#region src/switch/ToggleSwitch.tsx
-var _tmpl$$1 = /*#__PURE__*/ template(`<span>`), _tmpl$2$1 = /*#__PURE__*/ template(`<div><div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><div>`);
 const switchFieldStyle = function anonymous(props, overrides) {
 	let rules = " ";
 	let width = false;
@@ -20,255 +35,276 @@ const switchFieldStyle = function anonymous(props, overrides) {
 		if (p[1] === "z") gridColumnStart = true;
 		rules += p[0];
 	}
-	rules += " se151";
-	if (props.isNoVisibleLabel) rules += " DtyCQZ151";
-	else rules += " DE5iebb151";
-	rules += " qf151";
-	if (!width) rules += " ZJ151";
-	if (props.size === "XL") rules += " uxe7h4151";
-	else if (props.size === "L") rules += " uxe7h4151";
-	else if (props.size === "S") rules += " uxe7h4151";
-	else if (props.size === "XS") rules += " uxe7h4151";
-	else rules += " uxe7h4151";
+	rules += " se17";
+	if (props.isNoVisibleLabel) rules += " DtyCQZ17";
+	else rules += " DE5iebb17";
+	rules += " qf17";
+	if (!width) rules += " ZJ17";
+	if (props.size === "XL") rules += " uxe7h417";
+	else if (props.size === "L") rules += " uxe7h417";
+	else if (props.size === "S") rules += " uxe7h417";
+	else if (props.size === "XS") rules += " uxe7h417";
+	else rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
 	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.size === "XL") rules += " pHKLAu151";
-	else if (props.size === "L") rules += " pHKLAu151";
-	else if (props.size === "S") rules += " pHKLAu151";
-	else if (props.size === "XS") rules += " pHKLAu151";
-	else rules += " pHKLAu151";
-	if (props.size === "XL") rules += " -BhX7R-Fz151";
-	else if (props.size === "L") rules += " -BhX7R-Fv151";
-	else if (props.size === "S") rules += " -BhX7R-Fp151";
-	else if (props.size === "XS") rules += " -BhX7R-Fn151";
-	else rules += " -BhX7R-Fx151";
-	rules += " UVxyPec151";
+	if (props.size === "XL") rules += " pmiKvLd17";
+	else if (props.size === "L") rules += " pmiKvLd17";
+	else if (props.size === "S") rules += " pmiKvLd17";
+	else if (props.size === "XS") rules += " pmiKvLd17";
+	else rules += " pmiKvLd17";
+	if (props.size === "XL") rules += " -BhX7R-Fz17";
+	else if (props.size === "L") rules += " -BhX7R-Fv17";
+	else if (props.size === "S") rules += " -BhX7R-Fp17";
+	else if (props.size === "XS") rules += " -BhX7R-Fn17";
+	else rules += " -BhX7R-Fx17";
+	rules += " UVxyPec17";
 	if (props.isInForm) {
-		if (!gridColumnStart) rules += " zhJUGr151";
+		if (!gridColumnStart) rules += " zhJUGr17";
 	}
 	return rules;
 };
 const wrapper = function anonymous(props) {
 	let rules = " ";
-	rules += " se151";
-	rules += " DLwlgod151";
-	rules += " z2mU151";
-	rules += " yzZKy151";
-	rules += " ea151";
-	rules += " Yc151";
-	rules += " Xb151";
-	rules += " _2b151";
+	rules += " se17";
+	rules += " DLwlgod17";
+	rules += " z2mU17";
+	rules += " yzZKy17";
+	rules += " ea17";
+	rules += " Yc17";
+	rules += " Xb17";
+	rules += " _2b17";
 	if (props.isDisabled) {
-		rules += " pUvnvv151";
-		rules += " plc151";
-	} else if (props.isPressed) rules += " pMwyHo151";
-	else if (props.isFocusVisible) rules += " pMwyHo151";
-	else if (props.isHovered) rules += " pMwyHo151";
-	else rules += " pHKLAu151";
-	rules += " __ca151";
+		rules += " p8H6Pad17";
+		rules += " plc17";
+	} else if (props.isPressed) rules += " pBJTC6c17";
+	else if (props.isFocusVisible) rules += " pBJTC6c17";
+	else if (props.isHovered) rules += " pBJTC6c17";
+	else rules += " pmiKvLd17";
+	rules += " __ca17";
 	return rules;
 };
 const track = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " -ERv7Xb-ZmDIzbc151";
-	if (props.size === "XL") rules += " -LsrJQc-Fn151";
-	else if (props.size === "L") rules += " -LsrJQc-Fm151";
-	else if (props.size === "S") rules += " -LsrJQc-Fl151";
-	else rules += " -LsrJQc-Ft151";
-	rules += " ZAkyXj151";
-	rules += " Fpk5ROc151";
-	rules += " _oa151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mb151";
-	rules += " lb151";
-	rules += " _jf151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	rules += " _yb151";
-	if (props.isSelected) rules += " iA151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	if (props.size === "S") rules += " od17";
+	else rules += " og17";
+	if (props.size === "S") rules += " nd17";
+	else rules += " ng17";
+	if (props.size === "S") rules += " kd17";
+	else rules += " kg17";
+	if (props.size === "S") rules += " jd17";
+	else rules += " jg17";
+	if (props.size === "S") rules += " -ERv7Xb-ZZhCJ817";
+	else rules += " -ERv7Xb-ZmDIzbc17";
+	if (props.size === "XL") rules += " -LsrJQc-Fn17";
+	else if (props.size === "L") rules += " -LsrJQc-Fm17";
+	else if (props.size === "S") rules += " -LsrJQc-Fm17";
+	else rules += " -LsrJQc-Ft17";
+	rules += " ZAkyXj17";
+	rules += " Fpk5ROc17";
+	if (props.size === "S") rules += " Tj17";
+	else rules += " Td17";
+	if (props.size === "S") rules += " Qj17";
+	else rules += " Qd17";
+	if (props.size === "S") rules += " Sj17";
+	else rules += " Sd17";
+	if (props.size === "S") rules += " Rj17";
+	else rules += " Rd17";
+	rules += " _oa17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mb17";
+	rules += " lb17";
+	rules += " _jf17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	rules += " _yb17";
+	if (props.isSelected) rules += " iA17";
 	else if (props.isDisabled) {
-		rules += " iUvnvv151";
-		rules += " ilc151";
+		rules += " i8H6Pad17";
+		rules += " ilc17";
 	} else {
-		if (props.isPressed) rules += " iMwyHo151";
-		else if (props.isFocusVisible) rules += " iMwyHo151";
-		else if (props.isHovered) rules += " iMwyHo151";
-		else rules += " iHKLAu151";
-		rules += " ila151";
+		if (props.isPressed) rules += " iBJTC6c17";
+		else if (props.isFocusVisible) rules += " iBJTC6c17";
+		else if (props.isHovered) rules += " iBJTC6c17";
+		else rules += " imiKvLd17";
+		rules += " ila17";
 	}
-	if (props.isSelected) if (props.isDisabled) {
-		rules += " gUvnvv151";
-		rules += " gld151";
-	} else {
-		if (props.isEmphasized) if (props.isPressed) rules += " gqIKDAe151";
-		else if (props.isFocusVisible) rules += " gqIKDAe151";
-		else if (props.isHovered) rules += " gqIKDAe151";
-		else rules += " gOzYCcc151";
-		else if (props.isPressed) rules += " gOzYCcc151";
-		else if (props.isFocusVisible) rules += " gOzYCcc151";
-		else if (props.isHovered) rules += " gOzYCcc151";
-		else rules += " g5dxOg151";
-		rules += " gle151";
-	}
-	else rules += " gLZZSrd151";
+	if (props.isSelected) {
+		if (props.isDisabled) {
+			rules += " g8H6Pad17";
+			rules += " gld17";
+		} else {
+			if (props.isEmphasized) {
+				if (props.isPressed) rules += " gWlmQWc17";
+				else if (props.isFocusVisible) rules += " gWlmQWc17";
+				else if (props.isHovered) rules += " gWlmQWc17";
+				else rules += " g7mEcOd17";
+			} else if (props.isPressed) rules += " g7mEcOd17";
+			else if (props.isFocusVisible) rules += " g7mEcOd17";
+			else if (props.isHovered) rules += " g7mEcOd17";
+			else rules += " gwOLUue17";
+			rules += " gle17";
+		}
+	} else rules += " g4T7hrb17";
 	return rules;
 };
 const handle = function anonymous(props) {
 	let rules = " ";
-	rules += " Fb151";
-	rules += " fa151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	if (props.isSelected) rules += " gLZZSrd151";
+	if (props.size === "S") rules += " Fk17";
+	else rules += " Fb17";
+	rules += " fa17";
+	if (props.size === "S") rules += " od17";
+	else rules += " og17";
+	if (props.size === "S") rules += " nd17";
+	else rules += " ng17";
+	if (props.size === "S") rules += " kd17";
+	else rules += " kg17";
+	if (props.size === "S") rules += " jd17";
+	else rules += " jg17";
+	if (props.isSelected) rules += " g4T7hrb17";
 	else if (props.isDisabled) {
-		rules += " gUvnvv151";
-		rules += " gld151";
-	} else if (props.isPressed) rules += " gMwyHo151";
-	else if (props.isFocusVisible) rules += " gMwyHo151";
-	else if (props.isHovered) rules += " gMwyHo151";
-	else rules += " gHKLAu151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
+		rules += " g8H6Pad17";
+		rules += " gld17";
+	} else if (props.isPressed) rules += " gBJTC6c17";
+	else if (props.isFocusVisible) rules += " gBJTC6c17";
+	else if (props.isHovered) rules += " gBJTC6c17";
+	else rules += " gmiKvLd17";
+	rules += " Yd17";
+	rules += " XmoEin17";
+	rules += " XdklsgcXUMfn17";
+	rules += " _2iWc5fc17";
 	return rules;
 };
 const switchHelpText = function anonymous(props) {
 	let rules = " ";
-	rules += " z2mU151";
-	rules += " yzBWQ8d151";
-	rules += " BzBWQ8d151";
-	rules += " AzBWQ8d151";
-	rules += " sd151";
-	rules += " ea151";
-	rules += " Uc151";
-	rules += " Usd151";
-	rules += " qc151";
-	rules += " qsd151";
-	if (props.size === "XL") rules += " uxe7h4151";
-	else if (props.size === "L") rules += " uxe7h4151";
-	else if (props.size === "S") rules += " uxe7h4151";
-	else if (props.size === "XS") rules += " uxe7h4151";
-	else rules += " uxe7h4151";
+	rules += " z2mU17";
+	rules += " yzBWQ8d17";
+	rules += " BzBWQ8d17";
+	rules += " AzBWQ8d17";
+	rules += " sd17";
+	rules += " ea17";
+	rules += " Uc17";
+	rules += " Usd17";
+	rules += " qc17";
+	rules += " qsd17";
+	if (props.size === "XL") rules += " uxe7h417";
+	else if (props.size === "L") rules += " uxe7h417";
+	else if (props.size === "S") rules += " uxe7h417";
+	else if (props.size === "XS") rules += " uxe7h417";
+	else rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
 	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
 	if (props.isDisabled) {
-		rules += " pUvnvv151";
-		rules += " plc151";
+		rules += " p8H6Pad17";
+		rules += " plc17";
 	} else if (props.isInvalid) {
-		rules += " pYjUhNc151";
-		rules += " plQBRyrc151";
-	} else rules += " pUUi0Fe151";
-	rules += " -_8sjo0b-t5ZbAob151";
-	rules += " _qb151";
-	if (props.isDisabled) rules += " ri151";
-	else rules += " rD151";
-	rules += " Td151";
+		rules += " plIkJnc17";
+		rules += " plQBRyrc17";
+	} else rules += " pLw1gcc17";
+	rules += " -_8sjo0b-t5ZbAob17";
+	rules += " _qb17";
+	if (props.isDisabled) rules += " ri17";
+	else rules += " rD17";
+	rules += " Td17";
 	return rules;
 };
 function normalizeSwitchSize(size) {
@@ -283,11 +319,12 @@ function normalizeSwitchSize(size) {
 		default: return "M";
 	}
 }
-function switchHandleTransform(isSelected, direction) {
+function switchHandleTransform(isSelected, direction, size) {
+	if (size === "S") return { transform: isSelected ? direction === "ltr" ? "translateX(calc(var(--trackWidth) - 100% - 6px))" : "translateX(calc(100% - var(--trackWidth) + 6px))" : "none" };
 	return { transform: isSelected ? direction === "ltr" ? "translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)" : "translateX(calc(100% - var(--trackWidth) + 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)" : "perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)" };
 }
-function switchHandlePressStyle(element, renderProps, direction) {
-	const pressStyle = { ...switchHandleTransform(renderProps.isSelected, direction) };
+function switchHandlePressStyle(element, renderProps, direction, size) {
+	const pressStyle = { ...switchHandleTransform(renderProps.isSelected, direction, size) };
 	const styleRecord = pressStyle;
 	styleRecord["will-change"] = `${styleRecord["will-change"] ?? ""} transform`.trim();
 	if (renderProps.isPressed && element) {
@@ -306,12 +343,20 @@ function switchHandlePressStyle(element, renderProps, direction) {
 * Composes the RAC-1.19 form-field split faithfully to upstream S2 `Switch`:
 * a `SwitchField` grid wrapper (owns state/validation/help text) containing a
 * `SwitchButton` subgrid control (label + track/handle indicator) + `HelpText`.
-*/
-function ToggleSwitch(props) {
+*/ function ToggleSwitch(props) {
 	const isInForm = useIsInForm();
 	const providerProps = useProviderProps(useFormProps(props));
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useContext(SwitchContext), props.slot);
-	const [local, headlessProps] = splitProps(mergeProps$1(providerProps, contextProps ?? {}, props), [
+	const merged = mergeProps$2(flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(merged, [
 		"size",
 		"isEmphasized",
 		"styles",
@@ -344,10 +389,12 @@ function ToggleSwitch(props) {
 	].filter(Boolean).join(" ");
 	const renderHelpText = (fieldRenderProps) => [createComponent(Show, {
 		get when() {
-			return memo(() => !!local.description)() && !fieldRenderProps.isInvalid;
+			return memo(() => {
+				return !!local.description;
+			})() ? !fieldRenderProps.isInvalid : local.description;
 		},
 		get children() {
-			return createComponent(Text, {
+			return createComponent(Text$1, {
 				slot: "description",
 				get styles() {
 					return switchHelpText({
@@ -362,10 +409,12 @@ function ToggleSwitch(props) {
 		}
 	}), createComponent(Show, {
 		get when() {
-			return memo(() => !!fieldRenderProps.isInvalid)() && local.errorMessage;
+			return memo(() => {
+				return !!fieldRenderProps.isInvalid;
+			})() ? local.errorMessage : fieldRenderProps.isInvalid;
 		},
 		get children() {
-			return createComponent(Text, {
+			return createComponent(Text$1, {
 				slot: "errorMessage",
 				get styles() {
 					return switchHelpText({
@@ -378,8 +427,10 @@ function ToggleSwitch(props) {
 					return [createComponent(CenterBaseline, { get children() {
 						return createComponent(AlertTriangleIcon, { "aria-hidden": "true" });
 					} }), (() => {
-						var _el$ = getNextElement(_tmpl$$1);
-						insert(_el$, () => local.errorMessage);
+						var _el$ = getNextElement(_tmpl$);
+						insert(_el$, () => {
+							return local.errorMessage;
+						});
 						return _el$;
 					})()];
 				}
@@ -390,151 +441,84 @@ function ToggleSwitch(props) {
 		get slot() {
 			return local.slot ?? void 0;
 		},
-		"class": getFieldClassName,
+		class: getFieldClassName,
 		get style() {
 			return mergedUnsafeStyle();
 		},
 		children: (fieldRenderProps) => [createComponent(SwitchButton, {
-			"class": (renderProps) => wrapper({
+			class: (renderProps) => wrapper({
 				...renderProps,
 				isInForm,
 				size: size()
 			}),
 			children: (renderProps) => [createComponent(CenterBaseline, { get children() {
-				var _el$2 = getNextElement(_tmpl$2$1), _el$3 = _el$2.firstChild;
+				var _el$2 = getNextElement(_tmpl$2);
+				var _el$3 = _el$2.firstChild;
 				var _ref$ = handleElement;
-				typeof _ref$ === "function" ? use(_ref$, _el$3) : handleElement = _el$3;
-				effect((_p$) => {
-					var _v$ = track({
-						...renderProps,
-						size: size(),
-						isEmphasized: isEmphasized()
-					}), _v$2 = handle({
-						...renderProps,
-						size: size(),
-						isEmphasized: isEmphasized()
-					}), _v$3 = switchHandlePressStyle(handleElement, renderProps, direction());
-					_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-					_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
-					_p$.a = style(_el$3, _v$3, _p$.a);
-					return _p$;
-				}, {
-					e: void 0,
-					t: void 0,
-					a: void 0
+				typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => {
+					return _ref$;
+				}, _el$3) : handleElement = _el$3;
+				effect(() => {
+					return {
+						e: readShallow(track({
+							...renderProps,
+							size: size(),
+							isEmphasized: isEmphasized()
+						})),
+						t: readShallow(handle({
+							...renderProps,
+							size: size(),
+							isEmphasized: isEmphasized()
+						})),
+						a: readShallow(switchHandlePressStyle(handleElement, renderProps, direction(), size()))
+					};
+				}, ({ e, t, a }, _p$) => {
+					className(_el$2, e, _p$?.e);
+					className(_el$3, t, _p$?.t);
+					style(_el$3, a, _p$?.a);
 				});
 				return _el$2;
-			} }), memo(() => local.children)]
-		}), memo(() => renderHelpText(fieldRenderProps))]
+			} }), memo(() => {
+				return local.children;
+			})]
+		}), memo(() => {
+			return renderHelpText(fieldRenderProps);
+		})]
 	}));
 }
 //#endregion
 //#region src/switch/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div><div class=" _Pa151 Wr151 Fx151 _9b151 grpxFp151 _neYWWze151 og151 ng151 kg151 jg151 Yd151 Xb151 _2b151"></div><!$><!/>`), _tmpl$2 = /*#__PURE__*/ template(`<span>`);
 const SwitchContext = createContext(null);
-const trackStyles = " _Pc151 gW36Rud151 _jf151 _kb151 hb151 mb151 lb151 irHHOgb151 _oa151 og151 ng151 kg151 jg151 ZGY4nn151";
-const groupStyles = " _Pc151 _9G1Ky151 se151 Fx151";
-const buttonStyles = function anonymous(props) {
-	let rules = " ";
-	rules += " _Pc151";
-	rules += " _9G1Ky151";
-	rules += " sd151";
-	rules += " _Ca151";
-	rules += " eb151";
-	rules += " g9151";
-	rules += " _je151";
-	rules += " Td151";
-	rules += " Qd151";
-	rules += " Sd151";
-	rules += " Rd151";
-	rules += " ry151";
-	rules += " og151";
-	rules += " ng151";
-	rules += " kg151";
-	rules += " jg151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	rules += " uxe7h4151";
-	rules += " -_6BNtrc-d151";
-	rules += " vx151";
-	if (props.isSelected) {
-		rules += " xe151";
-		rules += " _xa151";
-		rules += " xX0cczbd151";
-		rules += " _xX0cczba151";
-	} else {
-		rules += " xc151";
-		rules += " _xa151";
-	}
-	rules += " _Fd151";
-	rules += " _FnuYUweb151";
-	if (props.isSelected) rules += " pHKLAu151";
-	else rules += " pUUi0Fe151";
-	return rules;
-};
 /**
-* A tab-style switch that allows users to select between two options.
-* Behavior is delegated to headless ToggleButtonGroup/ToggleButton primitives.
+* Deprecated mapping wrapper onto {@link SegmentedControl}. Prefer SegmentedControl for new call sites.
+*
+* @deprecated Use {@link SegmentedControl}
 */
 function TabSwitch(props) {
-	const options = createMemo(() => props.options.slice(0, 2));
-	const selectedValue = createMemo(() => {
-		return options().find((option) => option.value === props.value)?.value ?? options()[0]?.value;
-	});
-	const selectedIndex = createMemo(() => {
-		const index = options().findIndex((option) => option.value === selectedValue());
-		return index >= 0 ? index : 0;
-	});
-	const selectedKeys = createMemo(() => {
-		const value = selectedValue();
-		return value ? new Set([value]) : /* @__PURE__ */ new Set();
-	});
-	const optionCount = createMemo(() => Math.max(options().length, 1));
-	const indicatorStyle = createMemo(() => ({
-		left: "0",
-		width: `calc(100% / ${optionCount()})`,
-		transform: `translateX(${selectedIndex() * 100}%)`
+	return createComponent(SegmentedControl, mergeProps({
+		get "aria-label"() {
+			return props["aria-label"];
+		},
+		get "class"() {
+			return props.class;
+		}
+	}, () => {
+		return props.value !== void 0 ? { selectedKey: props.value } : {};
+	}, {
+		onSelectionChange: (id) => {
+			props.onChange?.(String(id));
+		},
+		get children() {
+			return props.options.map((option) => createComponent(SegmentedControlItem, {
+				get id() {
+					return option.value;
+				},
+				get children() {
+					return option.label;
+				}
+			}));
+		}
 	}));
-	const layoutStyle = createMemo(() => ({ "grid-template-columns": `repeat(${optionCount()}, minmax(0, 1fr))` }));
-	return (() => {
-		var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, [_el$4, _co$] = getNextMarker(_el$3.nextSibling);
-		insert(_el$, createComponent(ToggleButtonGroup, {
-			selectionMode: "single",
-			get selectedKeys() {
-				return selectedKeys();
-			},
-			"class": groupStyles,
-			get style() {
-				return layoutStyle();
-			},
-			"aria-label": "View mode",
-			get children() {
-				return options().map((option) => createComponent(ToggleButton, {
-					get toggleKey() {
-						return option.value;
-					},
-					onClick: () => props.onChange?.(option.value),
-					"class": () => buttonStyles({ isSelected: selectedValue() === option.value }),
-					get children() {
-						var _el$5 = getNextElement(_tmpl$2);
-						insert(_el$5, () => option.label);
-						return _el$5;
-					}
-				}));
-			}
-		}), _el$4, _co$);
-		effect((_p$) => {
-			var _v$ = [trackStyles, props.class].filter(Boolean).join(" "), _v$2 = indicatorStyle();
-			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
-			_p$.t = style(_el$2, _v$2, _p$.t);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		});
-		return _el$;
-	})();
 }
 //#endregion
 export { TabSwitch as n, ToggleSwitch as r, SwitchContext as t };