@react-spectrum/s2 0.2.1-nightly.4979

package/dist/Switch.css

@@ -0,0 +1,348 @@
+@layer _.a {
+  ._Zd {
+    display: flex;
+  }
+
+  .jE {
+    column-gap: .714286em;
+  }
+
+  ._1d {
+    align-items: baseline;
+  }
+
+  .l6 {
+    width: fit-content;
+  }
+
+  ._ca {
+    font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._de {
+    font-size: .875rem;
+  }
+
+  ._da {
+    font-size: .6875rem;
+  }
+
+  ._dc {
+    font-size: .75rem;
+  }
+
+  ._dg {
+    font-size: 1rem;
+  }
+
+  ._di {
+    font-size: 1.125rem;
+  }
+
+  ._eb {
+    font-variation-settings: "wght" 400;
+    font-synthesis-weight: none;
+    font-weight: 400;
+  }
+
+  ._fa {
+    line-height: 1.3;
+  }
+
+  .an {
+    color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .ao {
+    color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .aj {
+    color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
+  }
+
+  ._Ob {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  }
+
+  .__a-4a7c5l {
+    grid-column-start: field;
+  }
+
+  .__R-yksgrp {
+    -webkit-tap-highlight-color: #0000;
+  }
+
+  ._La {
+    outline-style: none;
+  }
+
+  ._Lb {
+    outline-style: solid;
+  }
+
+  .dx {
+    outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #456efe);
+  }
+
+  ._Nc {
+    outline-width: 2px;
+  }
+
+  ._M-3t1z {
+    outline-offset: 2px;
+  }
+
+  .-rcxrzo_l--unb2ci {
+    --trackWidth: 1.85714em;
+  }
+
+  .-_14pdrm5_k-h {
+    --trackHeight: 1rem;
+  }
+
+  .-_14pdrm5_k-7 {
+    --trackHeight: .875rem;
+  }
+
+  .-_14pdrm5_k-9 {
+    --trackHeight: 1.125rem;
+  }
+
+  .-_14pdrm5_k-i {
+    --trackHeight: 1.25rem;
+  }
+
+  .l-rcxrzo {
+    width: var(--trackWidth);
+  }
+
+  .k-14pdrm5 {
+    height: var(--trackHeight);
+  }
+
+  .__na {
+    box-sizing: border-box;
+  }
+
+  .uc {
+    border-top-width: 2px;
+  }
+
+  .vc {
+    border-bottom-width: 2px;
+  }
+
+  .sc {
+    border-inline-start-width: 2px;
+  }
+
+  .tc {
+    border-inline-end-width: 2px;
+  }
+
+  .wa {
+    border-style: solid;
+  }
+
+  ._zb {
+    forced-color-adjust: none;
+  }
+
+  .cn {
+    border-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .co {
+    border-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .cj {
+    border-color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
+  }
+
+  .ca {
+    border-color: #0000;
+  }
+
+  .by {
+    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #5681ff);
+  }
+
+  .bz {
+    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #6995fe);
+  }
+
+  .k2 {
+    height: 100%;
+  }
+
+  ._bb {
+    aspect-ratio: 1;
+  }
+
+  ._vf {
+    border-start-start-radius: 9999px;
+  }
+
+  ._wf {
+    border-start-end-radius: 9999px;
+  }
+
+  ._xf {
+    border-end-start-radius: 9999px;
+  }
+
+  ._yf {
+    border-end-end-radius: 9999px;
+  }
+
+  .bn {
+    background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .bo {
+    background-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
+  }
+
+  .bj {
+    background-color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
+  }
+
+  .bd {
+    background-color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
+  }
+
+  ._Oa {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+  }
+
+  ._Q-375x7f {
+    transition-duration: .15s;
+  }
+
+  ._Ra {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+}
+
+@layer _.b {
+  ._c-enzrfpb:lang(ar) {
+    font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
+  }
+
+  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+    line-height: 1.5;
+  }
+}
+
+@layer _.c {
+  ._c-enzwzjc:lang(he) {
+    font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
+  }
+}
+
+@layer _.d {
+  ._c-enzykdd:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
+}
+
+@layer _.e {
+  ._c-enzzrge:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
+}
+
+@layer _.f {
+  ._c-eo0c6sf:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.g {
+  ._c-1uotwbwg:lang(zh-hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
+}
+
+@layer _.h {
+  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
+}
+
+@layer UNSAFE_overrides;
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    ._dbf {
+      font-size: 1.0625rem;
+    }
+
+    ._dbb {
+      font-size: .8125rem;
+    }
+
+    ._dbd {
+      font-size: .9375rem;
+    }
+
+    ._dbh {
+      font-size: 1.1875rem;
+    }
+
+    ._dbj {
+      font-size: 1.375rem;
+    }
+
+    .-_14pdrm5_k-bi {
+      --trackHeight: 1.25rem;
+    }
+
+    .-_14pdrm5_k-b8 {
+      --trackHeight: 1.09375rem;
+    }
+
+    .-_14pdrm5_k-b_a {
+      --trackHeight: 1.40625rem;
+    }
+
+    .-_14pdrm5_k-bj {
+      --trackHeight: 1.5625rem;
+    }
+  }
+}
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .aa_____B {
+      color: graytext;
+    }
+
+    .da_____z {
+      outline-color: highlight;
+    }
+
+    .ca_____v {
+      border-color: buttonborder;
+    }
+
+    .ca_____B {
+      border-color: graytext;
+    }
+
+    .ba_____z {
+      background-color: highlight;
+    }
+
+    .ba_____B {
+      background-color: graytext;
+    }
+  }
+}
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+/*# sourceMappingURL=Switch.css.map */

package/dist/Switch.css.map

@@ -0,0 +1 @@
+{"mappings":"AC6CgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7DC;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAoBF;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AApBE;EAAA;IAAA;;;;IAoBF;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","sources":["dcb0a1e1b828d584","packages/@react-spectrum/s2/src/Switch.tsx"],"sourcesContent":["@import \"b4e99f1579042857\";\n@import \"8f3fcc7ad85a1ee6\";\n@import \"a22e7952bd491c56\";\n","/*\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 {\n  Switch as AriaSwitch,\n  SwitchProps as AriaSwitchProps,\n  SwitchRenderProps\n} from 'react-aria-components';\nimport {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\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' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {\n  children?: ReactNode\n}\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\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: 'control-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: '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: '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}: SwitchRenderProps) => ({\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  transform: isSelected\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    : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n});\n\nfunction Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let domRef = useFocusableRef(ref);\n  let handleRef = useRef(null);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  return (\n    <AriaSwitch\n      {...props}\n      ref={domRef}\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)}\n                className={handle(renderProps)} />\n            </div>\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaSwitch>\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 */\nlet _Switch = /*#__PURE__*/ forwardRef(Switch);\nexport {_Switch as Switch};\n"],"names":[],"version":3,"file":"Switch.css.map"}

package/dist/Switch.mjs

@@ -0,0 +1,244 @@
+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 {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.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";
+import {useRef as $8aRsI$useRef, useContext as $8aRsI$useContext, forwardRef as $8aRsI$forwardRef} from "react";
+import {useFocusableRef as $8aRsI$useFocusableRef} from "@react-spectrum/utils";
+
+/*
+ * 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.
+ */ 
+
+
+
+
+
+
+const $8926b17b75ae985d$var$wrapper = function anonymous(props, overrides) {
+    let rules = " .";
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|l|q|r|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W)[^\s]+/g) || [];
+    rules += matches.join('');
+    let $l = false;
+    let $__a = false;
+    for (let p of matches){
+        if (/^\s*l/.test(p)) $l = true;
+        if (/^\s*__a/.test(p)) $__a = true;
+    }
+    rules += ' _Zd';
+    rules += ' jE';
+    rules += ' _1d';
+    if (!$l) rules += ' l6';
+    rules += ' _c-bc1l9oh';
+    rules += ' _c-1uotwbwg';
+    rules += ' _c-eo0c6sf';
+    rules += ' _c-enzzrge';
+    rules += ' _c-enzykdd';
+    rules += ' _c-enzwzjc';
+    rules += ' _c-enzrfpb';
+    rules += ' _ca';
+    if (props.size === "XL") {
+        rules += ' _dbj';
+        rules += ' _di';
+    } else if (props.size === "L") {
+        rules += ' _dbh';
+        rules += ' _dg';
+    } else if (props.size === "S") {
+        rules += ' _dbd';
+        rules += ' _dc';
+    } else if (props.size === "XS") {
+        rules += ' _dbb';
+        rules += ' _da';
+    } else {
+        rules += ' _dbf';
+        rules += ' _de';
+    }
+    rules += ' _eb';
+    rules += ' _f-1x99dlob';
+    rules += ' _fa';
+    if (props.isDisabled) {
+        rules += ' aa_____B';
+        rules += ' aj';
+    } else {
+        if (props.isPressed) rules += ' ao';
+        else if (props.isFocusVisible) rules += ' ao';
+        else if (props.isHovered) rules += ' ao';
+        else rules += ' an';
+    }
+    rules += ' _Ob';
+    rules += ' _Q-375x7f';
+    rules += ' _Ra';
+    if (!$__a) {
+        if (props.isInForm) rules += ' __a-4a7c5l';
+    }
+    rules += ' __R-yksgrp';
+    return rules;
+};
+const $8926b17b75ae985d$var$track = function anonymous(props) {
+    let rules = " .";
+    if (props.isFocusVisible) rules += ' _Lb';
+    else rules += ' _La';
+    rules += ' da_____z';
+    rules += ' dx';
+    rules += ' _Nc';
+    rules += ' _M-3t1z';
+    rules += ' _vf';
+    rules += ' _wf';
+    rules += ' _xf';
+    rules += ' _yf';
+    rules += ' -rcxrzo_l--unb2ci';
+    if (props.size === "XL") {
+        rules += ' -_14pdrm5_k-bj';
+        rules += ' -_14pdrm5_k-i';
+    } else if (props.size === "L") {
+        rules += ' -_14pdrm5_k-b_a';
+        rules += ' -_14pdrm5_k-9';
+    } else if (props.size === "S") {
+        rules += ' -_14pdrm5_k-b8';
+        rules += ' -_14pdrm5_k-7';
+    } else {
+        rules += ' -_14pdrm5_k-bi';
+        rules += ' -_14pdrm5_k-h';
+    }
+    rules += ' l-rcxrzo';
+    rules += ' k-14pdrm5';
+    rules += ' __na';
+    rules += ' uc';
+    rules += ' vc';
+    rules += ' sc';
+    rules += ' tc';
+    rules += ' wa';
+    rules += ' _Oa';
+    rules += ' _Q-375x7f';
+    rules += ' _Ra';
+    rules += ' _zb';
+    if (props.isSelected) rules += ' ca';
+    else if (props.isDisabled) {
+        rules += ' ca_____B';
+        rules += ' cj';
+    } else {
+        rules += ' ca_____v';
+        if (props.isPressed) rules += ' co';
+        else if (props.isFocusVisible) rules += ' co';
+        else if (props.isHovered) rules += ' co';
+        else rules += ' cn';
+    }
+    if (props.isSelected) {
+        if (props.isDisabled) {
+            rules += ' ba_____B';
+            rules += ' bj';
+        } else {
+            rules += ' ba_____z';
+            if (props.isEmphasized) {
+                if (props.isPressed) rules += ' bz';
+                else if (props.isFocusVisible) rules += ' bz';
+                else if (props.isHovered) rules += ' bz';
+                else rules += ' by';
+            } else {
+                if (props.isPressed) rules += ' bo';
+                else if (props.isFocusVisible) rules += ' bo';
+                else if (props.isHovered) rules += ' bo';
+                else rules += ' bn';
+            }
+        }
+    } else rules += ' bd';
+    return rules;
+};
+const $8926b17b75ae985d$var$handle = function anonymous(props) {
+    let rules = " .";
+    rules += ' k2';
+    rules += ' _bb';
+    rules += ' _vf';
+    rules += ' _wf';
+    rules += ' _xf';
+    rules += ' _yf';
+    if (props.isSelected) rules += ' bd';
+    else if (props.isDisabled) {
+        rules += ' ba_____B';
+        rules += ' bj';
+    } else {
+        if (props.isPressed) rules += ' bo';
+        else if (props.isFocusVisible) rules += ' bo';
+        else if (props.isHovered) rules += ' bo';
+        else rules += ' bn';
+    }
+    rules += ' _Oa';
+    rules += ' _Q-375x7f';
+    rules += ' _Ra';
+    return rules;
+};
+// Use an inline style to calculate the transform so we can combine it with the press scale.
+const $8926b17b75ae985d$var$transformStyle = ({ isSelected: isSelected })=>({
+        // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.
+        // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,
+        // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the
+        // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide
+        // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve
+        // the desired effect. Given the following formula:
+        //
+        //   scale = perspective / (perspective - translateZ)
+        //
+        // and desired scale factors (accounting for the 2px border on each side of the track):
+        //
+        //   defaultScale = (trackHeight - 8px) / (trackHeight - 4px)
+        //   selectedScale = (trackHeight - 6px) / (trackHeight - 4px)
+        //
+        // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:
+        //
+        //    defaultPerspective = trackHeight - 8px
+        //    selectedPerspective = 2 * (trackHeight - 6px)
+        transform: isSelected ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)' : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'
+    });
+function $8926b17b75ae985d$var$Switch(props, ref) {
+    let { children: children, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style } = props;
+    let domRef = (0, $8aRsI$useFocusableRef)(ref);
+    let handleRef = (0, $8aRsI$useRef)(null);
+    let isInForm = !!(0, $8aRsI$useContext)((0, $9b916426527cebe7$export$c24727297075ec6a));
+    props = (0, $9b916426527cebe7$export$a6b5be5c6b451665)(props);
+    return /*#__PURE__*/ (0, $8aRsI$jsx)((0, $8aRsI$Switch), {
+        ...props,
+        ref: domRef,
+        style: UNSAFE_style,
+        className: (renderProps)=>UNSAFE_className + $8926b17b75ae985d$var$wrapper({
+                ...renderProps,
+                isInForm: isInForm,
+                size: props.size || 'M'
+            }, props.styles),
+        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),
+                                className: $8926b17b75ae985d$var$handle(renderProps)
+                            })
+                        })
+                    }),
+                    children
+                ]
+            })
+    });
+}
+/**
+ * Switches allow users to turn an individual option on or off.
+ * They are usually used to activate or deactivate a specific setting.
+ */ let $8926b17b75ae985d$export$b5d5cf8927ab7262 = /*#__PURE__*/ (0, $8aRsI$forwardRef)($8926b17b75ae985d$var$Switch);
+
+
+export {$8926b17b75ae985d$export$b5d5cf8927ab7262 as Switch};
+//# sourceMappingURL=Switch.mjs.map

package/dist/Switch.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAmCD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAeN,4FAA4F;AAC5F,MAAM,uCAAiB,CAAC,cAAC,UAAU,EAAoB,GAAM,CAAA;QAC3D,wHAAwH;QACxH,0GAA0G;QAC1G,8GAA8G;QAC9G,sHAAsH;QACtH,uHAAuH;QACvH,mDAAmD;QACnD,EAAE;QACF,qDAAqD;QACrD,EAAE;QACF,uFAAuF;QACvF,EAAE;QACF,6DAA6D;QAC7D,8DAA8D;QAC9D,EAAE;QACF,+FAA+F;QAC/F,EAAE;QACF,4CAA4C;QAC5C,mDAAmD;QACnD,WAAW,aAEP,wHACA;IACN,CAAA;AAEA,SAAS,6BAAO,KAAkB,EAAE,GAAmC;IACrE,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACtC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,qBACE,gBAAC,CAAA,GAAA,aAAS;QACP,GAAG,KAAK;QACT,KAAK;QACL,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;gCAC7C,WAAW,6BAAO;;;;oBAGvB;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAU,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","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 {\n  Switch as AriaSwitch,\n  SwitchProps as AriaSwitchProps,\n  SwitchRenderProps\n} from 'react-aria-components';\nimport {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {FocusableRef} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\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' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {\n  children?: ReactNode\n}\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\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: 'control-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: '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: '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}: SwitchRenderProps) => ({\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  transform: isSelected\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    : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n});\n\nfunction Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let domRef = useFocusableRef(ref);\n  let handleRef = useRef(null);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  return (\n    <AriaSwitch\n      {...props}\n      ref={domRef}\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)}\n                className={handle(renderProps)} />\n            </div>\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaSwitch>\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 */\nlet _Switch = /*#__PURE__*/ forwardRef(Switch);\nexport {_Switch as Switch};\n"],"names":[],"version":3,"file":"Switch.mjs.map"}