@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/Switch.mjs

@@ -1,12 +1,13 @@
 import "./Switch.css";
 import {CenterBaseline as $1f4b04be3f24aae3$export$768dac55bb57081d} from "./CenterBaseline.mjs";
 import {FormContext as $9b916426527cebe7$export$c24727297075ec6a, useFormProps as $9b916426527cebe7$export$a6b5be5c6b451665} from "./Form.mjs";
+import {HelpText as $9afd80978c252040$export$a67c0bc59081311a} from "./Field.mjs";
 import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
 import {useFocusableRef as $80ecb974df713a30$export$96a734597687c040} from "./useDOMRef.mjs";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../../icons/useSpectrumContextProps.mjs";
 import {jsx as $8aRsI$jsx, jsxs as $8aRsI$jsxs, Fragment as $8aRsI$Fragment} from "react/jsx-runtime";
-import {Switch as $8aRsI$Switch} from "react-aria-components/Switch";
 import {createContext as $8aRsI$createContext, forwardRef as $8aRsI$forwardRef, useRef as $8aRsI$useRef, useContext as $8aRsI$useContext} from "react";
+import {SwitchField as $8aRsI$SwitchField, SwitchButton as $8aRsI$SwitchButton} from "react-aria-components/Switch";
 import {useLocale as $8aRsI$useLocale} from "react-aria/I18nProvider";
 
 /*
@@ -28,8 +29,9 @@ import {useLocale as $8aRsI$useLocale} from "react-aria/I18nProvider";
 
 
 
+
 const $8926b17b75ae985d$export$8699e3b644d5a28a = /*#__PURE__*/ (0, $8aRsI$createContext)(null);
-const $8926b17b75ae985d$var$wrapper = function anonymous(props, overrides) {
+const $8926b17b75ae985d$var$field = function anonymous(props, overrides) {
     let rules = " ";
     let width = false;
     let gridColumnStart = false;
@@ -39,210 +41,230 @@ const $8926b17b75ae985d$var$wrapper = function anonymous(props, overrides) {
         if (p[1] === "z") gridColumnStart = true;
         rules += p[0];
     }
-    rules += ' sd13';
-    rules += ' qf13';
-    rules += ' ea13';
-    if (!width) rules += ' ZJ13';
+    rules += ' se15';
+    if (props.isNoVisibleLabel) rules += ' DtyCQZ15';
+    else rules += ' DE5iebb15';
+    rules += ' qf15';
+    if (!width) rules += ' ZJ15';
     if (props.size === "XL") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else if (props.size === "L") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else if (props.size === "S") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else if (props.size === "XS") {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     } else {
-        rules += ' uk13';
-        rules += ' ucJ9TBTb13';
-        rules += ' ud3Euai13';
-        rules += ' uea13';
-        rules += ' ugb13';
-        rules += ' uhd13';
-        rules += ' uje13';
-        rules += ' u2NhKxcl13';
-        rules += ' uic13';
+        rules += ' uk15';
+        rules += ' ucJ9TBTb15';
+        rules += ' ud3Euai15';
+        rules += ' uea15';
+        rules += ' ugb15';
+        rules += ' uhd15';
+        rules += ' uje15';
+        rules += ' u2NhKxcl15';
+        rules += ' uic15';
     }
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-e15';
+        rules += ' vx15';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-d15';
+        rules += ' vx15';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b15';
+        rules += ' vx15';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a15';
+        rules += ' vx15';
     } else {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c15';
+        rules += ' vx15';
     }
     if (props.size === "XL") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else if (props.size === "L") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else if (props.size === "S") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else if (props.size === "XS") {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     } else {
-        rules += ' xb13';
-        rules += ' _xa13';
+        rules += ' xb15';
+        rules += ' _xa15';
     }
     if (props.size === "XL") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else if (props.size === "L") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else if (props.size === "S") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else if (props.size === "XS") {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
     } else {
-        rules += ' _Fd13';
-        rules += ' _FnuYUweb13';
+        rules += ' _Fd15';
+        rules += ' _FnuYUweb15';
+    }
+    if (props.size === "XL") rules += ' pt15';
+    else if (props.size === "L") rules += ' pt15';
+    else if (props.size === "S") rules += ' pt15';
+    else if (props.size === "XS") rules += ' pt15';
+    else rules += ' pt15';
+    if (props.size === "XL") rules += ' -BhX7R-Fz15';
+    else if (props.size === "L") rules += ' -BhX7R-Fv15';
+    else if (props.size === "S") rules += ' -BhX7R-Fp15';
+    else if (props.size === "XS") rules += ' -BhX7R-Fn15';
+    else rules += ' -BhX7R-Fx15';
+    rules += ' UVxyPec15';
+    if (props.isInForm) {
+        if (!gridColumnStart) rules += ' zhJUGr15';
     }
+    return rules;
+};
+const $8926b17b75ae985d$var$wrapper = function anonymous(props) {
+    let rules = " ";
+    rules += ' se15';
+    rules += ' DLwlgod15';
+    rules += ' z2mU15';
+    rules += ' yzZKy15';
+    rules += ' ea15';
+    rules += ' Yc15';
+    rules += ' Xb15';
+    rules += ' _2b15';
     if (props.isDisabled) {
-        rules += ' pp13';
-        rules += ' plc13';
+        rules += ' pp15';
+        rules += ' plc15';
     } else {
-        if (props.isPressed) rules += ' po13';
-        else if (props.isFocusVisible) rules += ' po13';
-        else if (props.isHovered) rules += ' po13';
-        else rules += ' pt13';
-        rules += ' plb13';
-    }
-    rules += ' Yc13';
-    rules += ' Xb13';
-    rules += ' _2b13';
-    if (props.isInForm) {
-        if (!gridColumnStart) rules += ' zhJUGr13';
+        if (props.isPressed) rules += ' po15';
+        else if (props.isFocusVisible) rules += ' po15';
+        else if (props.isHovered) rules += ' po15';
+        else rules += ' pt15';
     }
-    rules += ' __ca13';
+    rules += ' __ca15';
     return rules;
 };
 const $8926b17b75ae985d$var$track = function anonymous(props) {
     let rules = " ";
-    if (props.isFocusVisible) rules += ' _Lf13';
-    else rules += ' _Le13';
-    rules += ' Oh13';
-    rules += ' Olc13';
-    rules += ' _Mc13';
-    rules += ' _Kd13';
-    rules += ' og13';
-    rules += ' ng13';
-    rules += ' kg13';
-    rules += ' jg13';
-    rules += ' -ERv7Xb-ZmDIzbc13';
-    if (props.size === "XL") rules += ' -LsrJQc-Fn13';
-    else if (props.size === "L") rules += ' -LsrJQc-Fm13';
-    else if (props.size === "S") rules += ' -LsrJQc-Fl13';
-    else rules += ' -LsrJQc-Ft13';
-    rules += ' ZAkyXj13';
-    rules += ' Fpk5ROc13';
-    rules += ' _oa13';
-    rules += ' _kc13';
-    rules += ' hc13';
-    rules += ' mc13';
-    rules += ' lc13';
-    rules += ' _jf13';
-    rules += ' Yd13';
-    rules += ' Xb13';
-    rules += ' _2b13';
-    rules += ' _yb13';
-    if (props.isSelected) rules += ' iA13';
+    if (props.isFocusVisible) rules += ' _Lf15';
+    else rules += ' _Le15';
+    rules += ' Oh15';
+    rules += ' Olc15';
+    rules += ' _Mc15';
+    rules += ' _Kd15';
+    rules += ' og15';
+    rules += ' ng15';
+    rules += ' kg15';
+    rules += ' jg15';
+    rules += ' -ERv7Xb-ZmDIzbc15';
+    if (props.size === "XL") rules += ' -LsrJQc-Fn15';
+    else if (props.size === "L") rules += ' -LsrJQc-Fm15';
+    else if (props.size === "S") rules += ' -LsrJQc-Fl15';
+    else rules += ' -LsrJQc-Ft15';
+    rules += ' ZAkyXj15';
+    rules += ' Fpk5ROc15';
+    rules += ' _oa15';
+    rules += ' _kc15';
+    rules += ' hc15';
+    rules += ' mc15';
+    rules += ' lc15';
+    rules += ' _jf15';
+    rules += ' Yd15';
+    rules += ' Xb15';
+    rules += ' _2b15';
+    rules += ' _yb15';
+    if (props.isSelected) rules += ' iA15';
     else if (props.isDisabled) {
-        rules += ' io13';
-        rules += ' ilc13';
+        rules += ' io15';
+        rules += ' ilc15';
     } else {
-        if (props.isPressed) rules += ' in13';
-        else if (props.isFocusVisible) rules += ' in13';
-        else if (props.isHovered) rules += ' in13';
-        else rules += ' iv13';
-        rules += ' ila13';
+        if (props.isPressed) rules += ' in15';
+        else if (props.isFocusVisible) rules += ' in15';
+        else if (props.isHovered) rules += ' in15';
+        else rules += ' iv15';
+        rules += ' ila15';
     }
     if (props.isSelected) {
         if (props.isDisabled) {
-            rules += ' gw13';
-            rules += ' gld13';
+            rules += ' gw15';
+            rules += ' gld15';
         } else {
             if (props.isEmphasized) {
-                if (props.isPressed) rules += ' gY13';
-                else if (props.isFocusVisible) rules += ' gY13';
-                else if (props.isHovered) rules += ' gY13';
-                else rules += ' g313';
+                if (props.isPressed) rules += ' gY15';
+                else if (props.isFocusVisible) rules += ' gY15';
+                else if (props.isHovered) rules += ' gY15';
+                else rules += ' g315';
             } else {
-                if (props.isPressed) rules += ' gu13';
-                else if (props.isFocusVisible) rules += ' gu13';
-                else if (props.isHovered) rules += ' gu13';
-                else rules += ' g013';
+                if (props.isPressed) rules += ' gu15';
+                else if (props.isFocusVisible) rules += ' gu15';
+                else if (props.isHovered) rules += ' gu15';
+                else rules += ' g015';
             }
-            rules += ' gle13';
+            rules += ' gle15';
         }
-    } else rules += ' gX13';
+    } else rules += ' gX15';
     return rules;
 };
 const $8926b17b75ae985d$var$handle = function anonymous(props) {
     let rules = " ";
-    rules += ' Fb13';
-    rules += ' fa13';
-    rules += ' og13';
-    rules += ' ng13';
-    rules += ' kg13';
-    rules += ' jg13';
-    if (props.isSelected) rules += ' gX13';
+    rules += ' Fb15';
+    rules += ' fa15';
+    rules += ' og15';
+    rules += ' ng15';
+    rules += ' kg15';
+    rules += ' jg15';
+    if (props.isSelected) rules += ' gX15';
     else if (props.isDisabled) {
-        rules += ' gw13';
-        rules += ' gld13';
+        rules += ' gw15';
+        rules += ' gld15';
     } else {
-        if (props.isPressed) rules += ' gu13';
-        else if (props.isFocusVisible) rules += ' gu13';
-        else if (props.isHovered) rules += ' gu13';
-        else rules += ' g013';
+        if (props.isPressed) rules += ' gu15';
+        else if (props.isFocusVisible) rules += ' gu15';
+        else if (props.isHovered) rules += ' gu15';
+        else rules += ' g015';
     }
-    rules += ' Yd13';
-    rules += ' Xb13';
-    rules += ' _2b13';
+    rules += ' Yd15';
+    rules += ' Xb15';
+    rules += ' _2b15';
     return rules;
 };
 // Use an inline style to calculate the transform so we can combine it with the press scale.
@@ -279,36 +301,57 @@ const $8926b17b75ae985d$export$b5d5cf8927ab7262 = /*#__PURE__*/ (0, $8aRsI$forwa
     let isInForm = !!(0, $8aRsI$useContext)((0, $9b916426527cebe7$export$c24727297075ec6a));
     let { direction: direction } = (0, $8aRsI$useLocale)();
     props = (0, $9b916426527cebe7$export$a6b5be5c6b451665)(props);
-    return /*#__PURE__*/ (0, $8aRsI$jsx)((0, $8aRsI$Switch), {
+    return /*#__PURE__*/ (0, $8aRsI$jsx)((0, $8aRsI$SwitchField), {
         ...props,
         ref: domRef,
         inputRef: inputRef,
         style: UNSAFE_style,
-        className: (renderProps)=>UNSAFE_className + $8926b17b75ae985d$var$wrapper({
+        className: (renderProps)=>UNSAFE_className + $8926b17b75ae985d$var$field({
                 ...renderProps,
                 isInForm: isInForm,
-                size: props.size || 'M'
+                size: props.size || 'M',
+                isNoVisibleLabel: !children
             }, props.styles),
-        children: (renderProps)=>/*#__PURE__*/ (0, $8aRsI$jsxs)((0, $8aRsI$Fragment), {
+        children: ({ isDisabled: isDisabled, isInvalid: isInvalid })=>/*#__PURE__*/ (0, $8aRsI$jsxs)((0, $8aRsI$Fragment), {
                 children: [
-                    /*#__PURE__*/ (0, $8aRsI$jsx)((0, $1f4b04be3f24aae3$export$768dac55bb57081d), {
-                        children: /*#__PURE__*/ (0, $8aRsI$jsx)("div", {
-                            className: $8926b17b75ae985d$var$track({
+                    /*#__PURE__*/ (0, $8aRsI$jsx)((0, $8aRsI$SwitchButton), {
+                        className: (renderProps)=>$8926b17b75ae985d$var$wrapper({
                                 ...renderProps,
-                                size: props.size || 'M',
-                                isEmphasized: props.isEmphasized
+                                isInForm: isInForm,
+                                size: props.size || 'M'
                             }),
-                            children: /*#__PURE__*/ (0, $8aRsI$jsx)("div", {
-                                ref: handleRef,
-                                style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(handleRef, $8926b17b75ae985d$var$transformStyle)({
-                                    ...renderProps,
-                                    direction: direction
-                                }),
-                                className: $8926b17b75ae985d$var$handle(renderProps)
+                        children: (renderProps)=>/*#__PURE__*/ (0, $8aRsI$jsxs)((0, $8aRsI$Fragment), {
+                                children: [
+                                    /*#__PURE__*/ (0, $8aRsI$jsx)((0, $1f4b04be3f24aae3$export$768dac55bb57081d), {
+                                        children: /*#__PURE__*/ (0, $8aRsI$jsx)("div", {
+                                            className: $8926b17b75ae985d$var$track({
+                                                ...renderProps,
+                                                size: props.size || 'M',
+                                                isEmphasized: props.isEmphasized
+                                            }),
+                                            children: /*#__PURE__*/ (0, $8aRsI$jsx)("div", {
+                                                ref: handleRef,
+                                                style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(handleRef, $8926b17b75ae985d$var$transformStyle)({
+                                                    ...renderProps,
+                                                    direction: direction
+                                                }),
+                                                className: $8926b17b75ae985d$var$handle(renderProps)
+                                            })
+                                        })
+                                    }),
+                                    children
+                                ]
                             })
-                        })
                     }),
-                    children
+                    /*#__PURE__*/ (0, $8aRsI$jsx)((0, $9afd80978c252040$export$a67c0bc59081311a), {
+                        size: props.size || 'M',
+                        styles: " z2mU15 Td15",
+                        isDisabled: isDisabled,
+                        isInvalid: isInvalid,
+                        description: props.description,
+                        showErrorIcon: true,
+                        children: props.errorMessage
+                    })
                 ]
             })
     });

package/dist/private/Switch.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAmCM,MAAM,0DAAgB,CAAA,GAAA,oBAAY,EAA2E;AAEpH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAeN,4FAA4F;AAC5F,MAAM,uCAAiB,CAAC,cAAC,UAAU,aAAE,SAAS,EAA6C;IACzF,wHAAwH;IACxH,0GAA0G;IAC1G,8GAA8G;IAC9G,sHAAsH;IACtH,uHAAuH;IACvH,mDAAmD;IACnD,EAAE;IACF,qDAAqD;IACrD,EAAE;IACF,uFAAuF;IACvF,EAAE;IACF,6DAA6D;IAC7D,8DAA8D;IAC9D,EAAE;IACF,+FAA+F;IAC/F,EAAE;IACF,4CAA4C;IAC5C,mDAAmD;IACnD,MAAM,YACJ,cAAc,QAEV,wHACA;IACN,OAAO;QACL,WAAW,aAAa,YAAY;IACtC;AACF;AAMO,MAAM,4CAAS,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,OAAO,KAAkB,EAAE,GAAmC;IACpH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACtC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,qBACE,gBAAC,CAAA,GAAA,aAAS;QACP,GAAG,KAAK;QACT,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;gBAAU,MAAM,MAAM,IAAI,IAAI;YAAG,GAAG,MAAM,MAAM;kBACrH,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAa;kCACZ,cAAA,gBAAC;4BACC,WAAW,4BAAM;gCACf,GAAG,WAAW;gCACd,MAAM,MAAM,IAAI,IAAI;gCACpB,cAAc,MAAM,YAAY;4BAClC;sCACA,cAAA,gBAAC;gCACC,KAAK;gCACL,OAAO,CAAA,GAAA,yCAAS,EAAE,WAAW,sCAAgB;oCAAC,GAAG,WAAW;+CAAE;gCAAS;gCACvE,WAAW,6BAAO;;;;oBAGvB;;;;AAKX","sources":["packages/@react-spectrum/s2/src/Switch.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Switch as AriaSwitch, SwitchProps as AriaSwitchProps, SwitchRenderProps} from 'react-aria-components/Switch';\n\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {Direction, FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface SwitchStyleProps {\n  /**\n   * The size of the Switch.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Switch should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RenderProps extends SwitchRenderProps, SwitchStyleProps {}\n\nexport interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'render' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | keyof GlobalDOMAttributes>, StyleProps, SwitchStyleProps {\n  children?: ReactNode\n}\n\nexport const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: controlFont(),\n  transition: 'colors',\n  color: {\n    default: baseColor('neutral'),\n    forcedColors: 'ButtonText',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst track = style<RenderProps>({\n  ...focusRing(),\n  borderRadius: 'full',\n  '--trackWidth': {\n    type: 'width',\n    value: fontRelative(26)\n  },\n  '--trackHeight': {\n    type: 'height',\n    value: controlSize('sm')\n  },\n  width: '--trackWidth',\n  height: '--trackHeight',\n  boxSizing: 'border-box',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  },\n  backgroundColor: {\n    default: 'gray-25',\n    isSelected: {\n      default: baseColor('neutral'),\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  }\n});\n\nconst handle = style<RenderProps>({\n  height: 'full',\n  aspectRatio: 'square',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: baseColor('neutral'),\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'gray-25'\n  },\n  transition: 'default'\n});\n\n// Use an inline style to calculate the transform so we can combine it with the press scale.\nconst transformStyle = ({isSelected, direction}: SwitchRenderProps & {direction: Direction}) => {\n  // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.\n  // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,\n  // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the\n  // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide\n  // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve\n  // the desired effect. Given the following formula:\n  //\n  //   scale = perspective / (perspective - translateZ)\n  //\n  // and desired scale factors (accounting for the 2px border on each side of the track):\n  //\n  //   defaultScale = (trackHeight - 8px) / (trackHeight - 4px)\n  //   selectedScale = (trackHeight - 6px) / (trackHeight - 4px)\n  //\n  // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:\n  //\n  //    defaultPerspective = trackHeight - 8px\n  //    selectedPerspective = 2 * (trackHeight - 6px)\n  const placement =\n    direction === 'ltr'\n      ? // The selected state also translates the X position to the end of the track (minus the borders).\n        'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'\n      : 'translateX(calc(100% - var(--trackWidth) + 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)';\n  return {\n    transform: isSelected ? placement : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n  };\n};\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nexport const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let handleRef = useRef(null);\n  let isInForm = !!useContext(FormContext);\n  let {direction} = useLocale();\n  props = useFormProps(props);\n  return (\n    <AriaSwitch\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              className={track({\n                ...renderProps,\n                size: props.size || 'M',\n                isEmphasized: props.isEmphasized\n              })}>\n              <div\n                ref={handleRef}\n                style={pressScale(handleRef, transformStyle)({...renderProps, direction})}\n                className={handle(renderProps)} />\n            </div>\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaSwitch>\n  );\n});\n"],"names":[],"version":3,"file":"Switch.mjs.map"}
+{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAmEM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAEV;AAEJ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBN,MAAM;;;;;;;;;;;;;;;;;;;;;;AAiBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAeN,4FAA4F;AAC5F,MAAM,uCAAiB,CAAC,cAAC,UAAU,aAAE,SAAS,EAA6C;IACzF,wHAAwH;IACxH,0GAA0G;IAC1G,8GAA8G;IAC9G,sHAAsH;IACtH,uHAAuH;IACvH,mDAAmD;IACnD,EAAE;IACF,qDAAqD;IACrD,EAAE;IACF,uFAAuF;IACvF,EAAE;IACF,6DAA6D;IAC7D,8DAA8D;IAC9D,EAAE;IACF,+FAA+F;IAC/F,EAAE;IACF,4CAA4C;IAC5C,mDAAmD;IACnD,MAAM,YACJ,cAAc,QAEV,wHACA;IACN,OAAO;QACL,WAAW,aACP,YACA;IACN;AACF;AAMO,MAAM,4CAAS,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,OACtD,KAAkB,EAClB,GAAmD;IAEnD,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACtC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,qBACE,gBAAC,CAAA,GAAA,kBAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cACT,mBACA,4BACE;gBAAC,GAAG,WAAW;0BAAE;gBAAU,MAAM,MAAM,IAAI,IAAI;gBAAK,kBAAkB,CAAC;YAAQ,GAC/E,MAAM,MAAM;kBAGf,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC,iBACvB;;kCACE,gBAAC,CAAA,GAAA,mBAAW;wBACV,WAAW,CAAA,cAAe,8BAAQ;gCAAC,GAAG,WAAW;0CAAE;gCAAU,MAAM,MAAM,IAAI,IAAI;4BAAG;kCACnF,CAAA,4BACC;;kDACE,gBAAC,CAAA,GAAA,yCAAa;kDACZ,cAAA,gBAAC;4CACC,WAAW,4BAAM;gDACf,GAAG,WAAW;gDACd,MAAM,MAAM,IAAI,IAAI;gDACpB,cAAc,MAAM,YAAY;4CAClC;sDACA,cAAA,gBAAC;gDACC,KAAK;gDACL,OAAO,CAAA,GAAA,yCAAS,EAAE,WAAW,sCAAgB;oDAAC,GAAG,WAAW;+DAAE;gDAAS;gDACvE,WAAW,6BAAO;;;;oCAIvB;;;;kCAIP,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM,MAAM,IAAI,IAAI;wBACpB,MAAM;wBAIN,YAAY;wBACZ,WAAW;wBACX,aAAa,MAAM,WAAW;wBAC9B,aAAa;kCACZ,MAAM,YAAY;;;;;AAM/B","sources":["packages/@react-spectrum/s2/src/Switch.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {\n  controlFont,\n  controlSize,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {\n  Direction,\n  FocusableRef,\n  FocusableRefValue,\n  GlobalDOMAttributes,\n  HelpTextProps\n} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpText} from './Field';\nimport {pressScale} from './pressScale';\nimport {\n  SwitchButton,\n  SwitchField,\n  SwitchFieldProps,\n  SwitchRenderProps\n} from 'react-aria-components/Switch';\nimport {useFocusableRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface SwitchStyleProps {\n  /**\n   * The size of the Switch.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /**\n   * Whether the Switch should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean;\n}\n\ninterface RenderProps extends SwitchRenderProps, SwitchStyleProps {}\n\nexport interface SwitchProps\n  extends\n    Omit<\n      SwitchFieldProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | keyof GlobalDOMAttributes\n    >,\n    HelpTextProps,\n    StyleProps,\n    SwitchStyleProps {\n  children?: ReactNode;\n}\n\nexport const SwitchContext =\n  createContext<\n    ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLInputElement, HTMLDivElement>>\n  >(null);\n\nconst field = style(\n  {\n    display: 'grid',\n    gridTemplateColumns: {\n      default: ['max-content', '1fr'],\n      isNoVisibleLabel: ['max-content']\n    },\n    columnGap: 'text-to-control',\n    width: 'fit',\n    font: controlFont(),\n    '--field-height': {\n      type: 'height',\n      value: controlSize()\n    },\n    rowGap: 'calc(var(--field-height) - 1lh)',\n    gridColumnStart: {\n      isInForm: 'field'\n    }\n  },\n  getAllowedOverrides()\n);\n\nconst wrapper = style({\n  display: 'grid',\n  gridTemplateColumns: 'subgrid',\n  gridColumnStart: 1,\n  gridColumnEnd: -1,\n  alignItems: 'baseline',\n  transition: 'colors',\n  color: {\n    default: baseColor('neutral'),\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  disableTapHighlight: true\n});\n\nconst track = style<RenderProps>({\n  ...focusRing(),\n  borderRadius: 'full',\n  '--trackWidth': {\n    type: 'width',\n    value: fontRelative(26)\n  },\n  '--trackHeight': {\n    type: 'height',\n    value: controlSize('sm')\n  },\n  width: '--trackWidth',\n  height: '--trackHeight',\n  boxSizing: 'border-box',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  },\n  backgroundColor: {\n    default: 'gray-25',\n    isSelected: {\n      default: baseColor('neutral'),\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  }\n});\n\nconst handle = style<RenderProps>({\n  height: 'full',\n  aspectRatio: 'square',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: baseColor('neutral'),\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'gray-25'\n  },\n  transition: 'default'\n});\n\n// Use an inline style to calculate the transform so we can combine it with the press scale.\nconst transformStyle = ({isSelected, direction}: SwitchRenderProps & {direction: Direction}) => {\n  // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.\n  // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,\n  // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the\n  // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide\n  // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve\n  // the desired effect. Given the following formula:\n  //\n  //   scale = perspective / (perspective - translateZ)\n  //\n  // and desired scale factors (accounting for the 2px border on each side of the track):\n  //\n  //   defaultScale = (trackHeight - 8px) / (trackHeight - 4px)\n  //   selectedScale = (trackHeight - 6px) / (trackHeight - 4px)\n  //\n  // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:\n  //\n  //    defaultPerspective = trackHeight - 8px\n  //    selectedPerspective = 2 * (trackHeight - 6px)\n  const placement =\n    direction === 'ltr'\n      ? // The selected state also translates the X position to the end of the track (minus the borders).\n        'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'\n      : 'translateX(calc(100% - var(--trackWidth) + 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)';\n  return {\n    transform: isSelected\n      ? placement\n      : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n  };\n};\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nexport const Switch = /*#__PURE__*/ forwardRef(function Switch(\n  props: SwitchProps,\n  ref: FocusableRef<HTMLInputElement, HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let handleRef = useRef(null);\n  let isInForm = !!useContext(FormContext);\n  let {direction} = useLocale();\n  props = useFormProps(props);\n  return (\n    <SwitchField\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps =>\n        UNSAFE_className +\n        field(\n          {...renderProps, isInForm, size: props.size || 'M', isNoVisibleLabel: !children},\n          props.styles\n        )\n      }>\n      {({isDisabled, isInvalid}) => (\n        <>\n          <SwitchButton\n            className={renderProps => wrapper({...renderProps, isInForm, size: props.size || 'M'})}>\n            {renderProps => (\n              <>\n                <CenterBaseline>\n                  <div\n                    className={track({\n                      ...renderProps,\n                      size: props.size || 'M',\n                      isEmphasized: props.isEmphasized\n                    })}>\n                    <div\n                      ref={handleRef}\n                      style={pressScale(handleRef, transformStyle)({...renderProps, direction})}\n                      className={handle(renderProps)}\n                    />\n                  </div>\n                </CenterBaseline>\n                {children}\n              </>\n            )}\n          </SwitchButton>\n          <HelpText\n            size={props.size || 'M'}\n            styles={style({\n              gridColumnStart: 1,\n              paddingTop: 0\n            })}\n            isDisabled={isDisabled}\n            isInvalid={isInvalid}\n            description={props.description}\n            showErrorIcon>\n            {props.errorMessage}\n          </HelpText>\n        </>\n      )}\n    </SwitchField>\n  );\n});\n"],"names":[],"version":3,"file":"Switch.mjs.map"}