@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/StatusLight.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA2CM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,UAAU,iBAAW,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACrG,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,yCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChE,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,KAAM,QAAQ,GAAG,CAAC,QAAQ,KAAK,cACzF,QAAQ,IAAI,CAAC;IAGf,qBACE,iBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gBAAC,CAAA,GAAA,yCAAa;0BACZ,cAAA,gBAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gBAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gBAAC,CAAA,GAAA,yCAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from './useDOMRef';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n  /**\n   * The variant changes the color of the status light.\n   * When status lights have a semantic meaning, they should use the variant for semantic colors.\n   *\n   * @default 'neutral'\n   */\n  variant?: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n  /**\n   * The size of the StatusLight.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display as the label.\n   */\n  children?: ReactNode,\n  /**\n   * An accessibility role for the status light. Should be set when the status\n   * can change at runtime, and no more than one status light will update simultaneously.\n   * For cases where multiple statuses can change at the same time, use a Toast instead.\n   */\n  role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n  display: 'flex',\n  gap: 'text-to-visual',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: controlFont(),\n  color: {\n    default: 'neutral',\n    variant: {\n      neutral: 'gray-600'\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n  size: {\n    size: {\n      S: 8,\n      M: 10,\n      L: 12,\n      XL: 14\n    }\n  },\n  fill: {\n    variant: {\n      informative: 'informative',\n      neutral: 'neutral',\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative',\n      celery: 'celery',\n      chartreuse: 'chartreuse',\n      cyan: 'cyan',\n      fuchsia: 'fuchsia',\n      purple: 'purple',\n      magenta: 'magenta',\n      indigo: 'indigo',\n      seafoam: 'seafoam',\n      yellow: 'yellow',\n      pink: 'pink',\n      turquoise: 'turquoise',\n      cinnamon: 'cinnamon',\n      brown: 'brown',\n      silver: 'silver'\n    },\n    isSkeleton: 'gray-200'\n  },\n  overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n  let {children, size = 'M', variant = 'neutral', role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let domRef = useDOMRef(ref);\n  let isSkeleton = useIsSkeleton();\n\n  if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n    console.warn('If no children are provided, an aria-label must be specified');\n  }\n\n  if (!role && (props['aria-label'] || props['aria-labelledby']) && process.env.NODE_ENV !== 'production') {\n    console.warn('A labelled StatusLight must have a role.');\n  }\n\n  return (\n    <div\n      {...filterDOMProps(props, {labelable: !!role})}\n      ref={domRef}\n      role={role}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({size, variant}, styles)}>\n      <CenterBaseline>\n        <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n          <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n        </svg>\n      </CenterBaseline>\n      <Text>{children}</Text>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"StatusLight.mjs.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+DM,MAAM,0DACX,CAAA,GAAA,oBAAY,EAAwE;AAEtF,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC3D,KAAuB,EACvB,GAA2B;IAE3B,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,QACR,OAAO,cACP,UAAU,iBACV,IAAI,oBACJ,mBAAmB,kBACnB,YAAY,UACZ,MAAM,EACP,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,yCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,IAAI,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAChE,QAAQ,IAAI,CAAC;IAGf,IACE,CAAC,QACA,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,KAC/C,QAAQ,GAAG,CAAC,QAAQ,KAAK,cAEzB,QAAQ,IAAI,CAAC;IAGf,qBACE,iBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gBAAC,CAAA,GAAA,yCAAa;0BACZ,cAAA,gBAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gBAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gBAAC,CAAA,GAAA,yCAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from './useDOMRef';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n  /**\n   * The variant changes the color of the status light.\n   * When status lights have a semantic meaning, they should use the variant for semantic colors.\n   *\n   * @default 'neutral'\n   */\n  variant?:\n    | 'informative'\n    | 'neutral'\n    | 'positive'\n    | 'notice'\n    | 'negative'\n    | 'celery'\n    | 'chartreuse'\n    | 'cyan'\n    | 'fuchsia'\n    | 'purple'\n    | 'magenta'\n    | 'indigo'\n    | 'seafoam'\n    | 'yellow'\n    | 'pink'\n    | 'turquoise'\n    | 'cinnamon'\n    | 'brown'\n    | 'silver';\n  /**\n   * The size of the StatusLight.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface StatusLightProps\n  extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display as the label.\n   */\n  children?: ReactNode;\n  /**\n   * An accessibility role for the status light. Should be set when the status\n   * can change at runtime, and no more than one status light will update simultaneously.\n   * For cases where multiple statuses can change at the same time, use a Toast instead.\n   */\n  role?: 'status';\n}\n\nexport const StatusLightContext =\n  createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>(\n  {\n    display: 'flex',\n    gap: 'text-to-visual',\n    alignItems: 'baseline',\n    width: 'fit',\n    font: controlFont(),\n    color: {\n      default: 'neutral',\n      variant: {\n        neutral: 'gray-600'\n      }\n    },\n    disableTapHighlight: true\n  },\n  getAllowedOverrides()\n);\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n  size: {\n    size: {\n      S: 8,\n      M: 10,\n      L: 12,\n      XL: 14\n    }\n  },\n  fill: {\n    variant: {\n      informative: 'informative',\n      neutral: 'neutral',\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative',\n      celery: 'celery',\n      chartreuse: 'chartreuse',\n      cyan: 'cyan',\n      fuchsia: 'fuchsia',\n      purple: 'purple',\n      magenta: 'magenta',\n      indigo: 'indigo',\n      seafoam: 'seafoam',\n      yellow: 'yellow',\n      pink: 'pink',\n      turquoise: 'turquoise',\n      cinnamon: 'cinnamon',\n      brown: 'brown',\n      silver: 'silver'\n    },\n    isSkeleton: 'gray-200'\n  },\n  overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(\n  props: StatusLightProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n  let {\n    children,\n    size = 'M',\n    variant = 'neutral',\n    role,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    styles\n  } = props;\n  let domRef = useDOMRef(ref);\n  let isSkeleton = useIsSkeleton();\n\n  if (!children && !props['aria-label'] && process.env.NODE_ENV !== 'production') {\n    console.warn('If no children are provided, an aria-label must be specified');\n  }\n\n  if (\n    !role &&\n    (props['aria-label'] || props['aria-labelledby']) &&\n    process.env.NODE_ENV !== 'production'\n  ) {\n    console.warn('A labelled StatusLight must have a role.');\n  }\n\n  return (\n    <div\n      {...filterDOMProps(props, {labelable: !!role})}\n      ref={domRef}\n      role={role}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({size, variant}, styles)}>\n      <CenterBaseline>\n        <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n          <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n        </svg>\n      </CenterBaseline>\n      <Text>{children}</Text>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"StatusLight.mjs.map"}

package/dist/private/Switch.cjs

@@ -1,12 +1,13 @@
 require("./Switch.css");
 var $e991cbcdf82ced71$exports = require("./CenterBaseline.cjs");
 var $bfa4962d90c8af48$exports = require("./Form.cjs");
+var $a0b996a550bb0891$exports = require("./Field.cjs");
 var $2061c83559b50a66$exports = require("./pressScale.cjs");
 var $150382364eecc4bc$exports = require("./useDOMRef.cjs");
 var $ac757a4c2bd72aee$exports = require("../../icons/useSpectrumContextProps.cjs");
 var $bxoLC$reactjsxruntime = require("react/jsx-runtime");
-var $bxoLC$reactariacomponentsSwitch = require("react-aria-components/Switch");
 var $bxoLC$react = require("react");
+var $bxoLC$reactariacomponentsSwitch = require("react-aria-components/Switch");
 var $bxoLC$reactariaI18nProvider = require("react-aria/I18nProvider");
 
 
@@ -35,8 +36,9 @@ $parcel$export(module.exports, "Switch", () => $0bb99ae32af8596c$export$b5d5cf89
 
 
 
+
 const $0bb99ae32af8596c$export$8699e3b644d5a28a = /*#__PURE__*/ (0, $bxoLC$react.createContext)(null);
-const $0bb99ae32af8596c$var$wrapper = function anonymous(props, overrides) {
+const $0bb99ae32af8596c$var$field = function anonymous(props, overrides) {
     let rules = " ";
     let width = false;
     let gridColumnStart = false;
@@ -46,210 +48,230 @@ const $0bb99ae32af8596c$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 $0bb99ae32af8596c$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 $0bb99ae32af8596c$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 $0bb99ae32af8596c$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.
@@ -286,36 +308,57 @@ const $0bb99ae32af8596c$export$b5d5cf8927ab7262 = /*#__PURE__*/ (0, $bxoLC$react
     let isInForm = !!(0, $bxoLC$react.useContext)((0, $bfa4962d90c8af48$exports.FormContext));
     let { direction: direction } = (0, $bxoLC$reactariaI18nProvider.useLocale)();
     props = (0, $bfa4962d90c8af48$exports.useFormProps)(props);
-    return /*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsx)((0, $bxoLC$reactariacomponentsSwitch.Switch), {
+    return /*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsx)((0, $bxoLC$reactariacomponentsSwitch.SwitchField), {
         ...props,
         ref: domRef,
         inputRef: inputRef,
         style: UNSAFE_style,
-        className: (renderProps)=>UNSAFE_className + $0bb99ae32af8596c$var$wrapper({
+        className: (renderProps)=>UNSAFE_className + $0bb99ae32af8596c$var$field({
                 ...renderProps,
                 isInForm: isInForm,
-                size: props.size || 'M'
+                size: props.size || 'M',
+                isNoVisibleLabel: !children
             }, props.styles),
-        children: (renderProps)=>/*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsxs)((0, $bxoLC$reactjsxruntime.Fragment), {
+        children: ({ isDisabled: isDisabled, isInvalid: isInvalid })=>/*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsxs)((0, $bxoLC$reactjsxruntime.Fragment), {
                 children: [
-                    /*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsx)((0, $e991cbcdf82ced71$exports.CenterBaseline), {
-                        children: /*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsx)("div", {
-                            className: $0bb99ae32af8596c$var$track({
+                    /*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsx)((0, $bxoLC$reactariacomponentsSwitch.SwitchButton), {
+                        className: (renderProps)=>$0bb99ae32af8596c$var$wrapper({
                                 ...renderProps,
-                                size: props.size || 'M',
-                                isEmphasized: props.isEmphasized
+                                isInForm: isInForm,
+                                size: props.size || 'M'
                             }),
-                            children: /*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsx)("div", {
-                                ref: handleRef,
-                                style: (0, $2061c83559b50a66$exports.pressScale)(handleRef, $0bb99ae32af8596c$var$transformStyle)({
-                                    ...renderProps,
-                                    direction: direction
-                                }),
-                                className: $0bb99ae32af8596c$var$handle(renderProps)
+                        children: (renderProps)=>/*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsxs)((0, $bxoLC$reactjsxruntime.Fragment), {
+                                children: [
+                                    /*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsx)((0, $e991cbcdf82ced71$exports.CenterBaseline), {
+                                        children: /*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsx)("div", {
+                                            className: $0bb99ae32af8596c$var$track({
+                                                ...renderProps,
+                                                size: props.size || 'M',
+                                                isEmphasized: props.isEmphasized
+                                            }),
+                                            children: /*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsx)("div", {
+                                                ref: handleRef,
+                                                style: (0, $2061c83559b50a66$exports.pressScale)(handleRef, $0bb99ae32af8596c$var$transformStyle)({
+                                                    ...renderProps,
+                                                    direction: direction
+                                                }),
+                                                className: $0bb99ae32af8596c$var$handle(renderProps)
+                                            })
+                                        })
+                                    }),
+                                    children
+                                ]
                             })
-                        })
                     }),
-                    children
+                    /*#__PURE__*/ (0, $bxoLC$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.HelpText), {
+                        size: props.size || 'M',
+                        styles: " z2mU15 Td15",
+                        isDisabled: isDisabled,
+                        isInvalid: isInvalid,
+                        description: props.description,
+                        showErrorIcon: true,
+                        children: props.errorMessage
+                    })
                 ]
             })
     });

package/dist/private/Switch.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAmCM,MAAM,0DAAgB,CAAA,GAAA,0BAAY,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,uBAAS,EAAE,SAAS,OAAO,KAAkB,EAAE,GAAmC;IACpH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,sCAAQ;IAC1B,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,qBACE,gCAAC,CAAA,GAAA,uCAAS;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,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,WAAW,4BAAM;gCACf,GAAG,WAAW;gCACd,MAAM,MAAM,IAAI,IAAI;gCACpB,cAAc,MAAM,YAAY;4BAClC;sCACA,cAAA,gCAAC;gCACC,KAAK;gCACL,OAAO,CAAA,GAAA,oCAAS,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.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAmEM,MAAM,0DACX,CAAA,GAAA,0BAAY,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,uBAAS,EAAE,SAAS,OACtD,KAAkB,EAClB,GAAmD;IAEnD,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,sCAAQ;IAC1B,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,qBACE,gCAAC,CAAA,GAAA,4CAAU;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,gCAAC,CAAA,GAAA,6CAAW;wBACV,WAAW,CAAA,cAAe,8BAAQ;gCAAC,GAAG,WAAW;0CAAE;gCAAU,MAAM,MAAM,IAAI,IAAI;4BAAG;kCACnF,CAAA,4BACC;;kDACE,gCAAC,CAAA,GAAA,wCAAa;kDACZ,cAAA,gCAAC;4CACC,WAAW,4BAAM;gDACf,GAAG,WAAW;gDACd,MAAM,MAAM,IAAI,IAAI;gDACpB,cAAc,MAAM,YAAY;4CAClC;sDACA,cAAA,gCAAC;gDACC,KAAK;gDACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW,sCAAgB;oDAAC,GAAG,WAAW;+DAAE;gDAAS;gDACvE,WAAW,6BAAO;;;;oCAIvB;;;;kCAIP,gCAAC,CAAA,GAAA,kCAAO;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.cjs.map"}