@react-spectrum/s2 3.0.0-nightly-fd7075c5f-250128 → 3.0.0-nightly-e3ed3c7f6-250130

package/dist/ColorSlider.css

@@ -1,80 +1,80 @@
 @layer _.a {
-  .l___u {
+  .k___u {
     width: calc(12rem * var(--s2-scale));
   }
 
-  .k___u {
+  .j___u {
     height: calc(12rem * var(--s2-scale));
   }
 
-  ._0f {
+  ._3f {
     display: grid;
   }
 
-  ._0a {
+  ._3a {
     display: block;
   }
 
-  .__i-15pd573 {
+  .__l-15pd573 {
     grid-template-columns: 1fr auto;
   }
 
-  .__k-1kch5qg {
+  .__n-1kch5qg {
     grid-template-areas: "label output"
                          "track track";
   }
 
-  .ic {
+  .hc {
     row-gap: .25rem;
   }
 
-  .__b-ny5g4a {
+  .__e-ny5g4a {
     grid-column-start: output;
   }
 
-  .__c-ny5g4a {
+  .__f-ny5g4a {
     grid-column-end: output;
   }
 
-  .__d-ny5g4a {
+  .__g-ny5g4a {
     grid-row-start: output;
   }
 
-  .__e-ny5g4a {
+  .__h-ny5g4a {
     grid-row-end: output;
   }
 
-  ._da {
+  ._ga {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._ee {
+  ._he {
     font-size: .875rem;
   }
 
-  ._ea {
+  ._ha {
     font-size: .6875rem;
   }
 
-  ._ec {
+  ._hc {
     font-size: .75rem;
   }
 
-  ._eg {
+  ._hg {
     font-size: 1rem;
   }
 
-  ._ei {
+  ._hi {
     font-size: 1.125rem;
   }
 
-  ._fb {
+  ._ib {
     font-variation-settings: "wght" 400;
     font-synthesis-weight: none;
     font-weight: 400;
   }
 
-  ._ga {
+  ._ja {
     line-height: 1.3;
   }
 
@@ -90,75 +90,75 @@
     color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
-  .__Ib {
+  .__Lb {
     cursor: default;
   }
 
-  .__b-n9hk5a {
+  .__e-n9hk5a {
     grid-column-start: track;
   }
 
-  .__c-n9hk5a {
+  .__f-n9hk5a {
     grid-column-end: track;
   }
 
-  .__d-n9hk5a {
+  .__g-n9hk5a {
     grid-row-start: track;
   }
 
-  .__e-n9hk5a {
+  .__h-n9hk5a {
     grid-row-end: track;
   }
 
-  .lb {
+  .kb {
     width: 100%;
   }
 
-  .lM {
+  .kM {
     width: calc(1.5rem * var(--s2-scale));
   }
 
-  .kM {
+  .jM {
     height: calc(1.5rem * var(--s2-scale));
   }
 
-  .kb {
+  .jb {
     height: 100%;
   }
 
-  ._wc {
+  ._zc {
     border-start-start-radius: .5rem;
   }
 
-  ._xc {
+  ._Ac {
     border-start-end-radius: .5rem;
   }
 
-  ._yc {
+  ._Bc {
     border-end-start-radius: .5rem;
   }
 
-  ._zc {
+  ._Cc {
     border-end-end-radius: .5rem;
   }
 
-  .dp10 {
+  .cp10 {
     outline-color: var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #ffffff1a);
   }
 
-  ._Ob {
+  ._Rb {
     outline-width: 1px;
   }
 
-  ._N-3hmpv {
+  ._Q-3hmpv {
     outline-offset: -1px;
   }
 
-  ._Mb {
+  ._Pb {
     outline-style: solid;
   }
 
-  ._Ma {
+  ._Pa {
     outline-style: none;
   }
 
@@ -168,70 +168,70 @@
 }
 
 @layer _.b {
-  ._d-enzrfpb:lang(ar) {
+  ._g-enzrfpb:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._g-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._j-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 }
 
 @layer _.c {
-  ._d-enzwzjc:lang(he) {
+  ._g-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  ._d-enzykdd:lang(ja) {
+  ._g-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 {
-  ._d-enzzrge:lang(ko) {
+  ._g-enzzrge:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  ._d-eo0c6sf:lang(zh) {
+  ._g-eo0c6sf:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  ._d-1uotwbwg:lang(zh-hant) {
+  ._g-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 {
-  ._d-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._g-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 _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
-    ._ebf {
+    ._hbf {
       font-size: 1.0625rem;
     }
 
-    ._ebb {
+    ._hbb {
       font-size: .8125rem;
     }
 
-    ._ebd {
+    ._hbd {
       font-size: .9375rem;
     }
 
-    ._ebh {
+    ._hbh {
       font-size: 1.1875rem;
     }
 
-    ._ebj {
+    ._hbj {
       font-size: 1.375rem;
     }
   }
@@ -239,7 +239,7 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____I {
+    .ca_____I {
       outline-color: buttonborder;
     }
   }

package/dist/ColorSlider.mjs

@@ -39,19 +39,19 @@ const $495db619596088aa$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $3i9ps$forwa
         "aria-label": props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined),
         className: (renderProps)=>UNSAFE_className + function anonymous(props, overrides) {
                 let rules = " .";
-                let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
+                let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q)[^\s]+/g) || [];
                 rules += matches.join('');
-                let $l = false;
-                for (let p of matches)if (/^\s*l/.test(p)) $l = true;
-                if (!$l) {
-                    if (props.orientation === "horizontal") rules += ' l___u';
+                let $k = false;
+                for (let p of matches)if (/^\s*k/.test(p)) $k = true;
+                if (!$k) {
+                    if (props.orientation === "horizontal") rules += ' k___u';
                 }
-                if (props.orientation === "vertical") rules += ' k___u';
-                if (props.orientation === "vertical") rules += ' _0a';
-                else if (props.orientation === "horizontal") rules += ' _0f';
-                rules += ' __i-15pd573';
-                rules += ' __k-1kch5qg';
-                rules += ' ic';
+                if (props.orientation === "vertical") rules += ' j___u';
+                if (props.orientation === "vertical") rules += ' _3a';
+                else if (props.orientation === "horizontal") rules += ' _3f';
+                rules += ' __l-15pd573';
+                rules += ' __n-1kch5qg';
+                rules += ' hc';
                 return rules;
             }(renderProps, styles),
         children: ({ isDisabled: isDisabled, orientation: orientation, state: state })=>/*#__PURE__*/ (0, $3i9ps$jsxs)((0, $3i9ps$Fragment), {
@@ -68,37 +68,37 @@ const $495db619596088aa$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $3i9ps$forwa
                     orientation === 'horizontal' && /*#__PURE__*/ (0, $3i9ps$jsx)((0, $3i9ps$SliderOutput), {
                         className: function anonymous(props) {
                             let rules = " .";
-                            rules += ' __b-ny5g4a';
-                            rules += ' __c-ny5g4a';
-                            rules += ' __d-ny5g4a';
                             rules += ' __e-ny5g4a';
-                            rules += ' _d-bc1l9oh';
-                            rules += ' _d-1uotwbwg';
-                            rules += ' _d-eo0c6sf';
-                            rules += ' _d-enzzrge';
-                            rules += ' _d-enzykdd';
-                            rules += ' _d-enzwzjc';
-                            rules += ' _d-enzrfpb';
-                            rules += ' _da';
+                            rules += ' __f-ny5g4a';
+                            rules += ' __g-ny5g4a';
+                            rules += ' __h-ny5g4a';
+                            rules += ' _g-bc1l9oh';
+                            rules += ' _g-1uotwbwg';
+                            rules += ' _g-eo0c6sf';
+                            rules += ' _g-enzzrge';
+                            rules += ' _g-enzykdd';
+                            rules += ' _g-enzwzjc';
+                            rules += ' _g-enzrfpb';
+                            rules += ' _ga';
                             if (props.size === "XL") {
-                                rules += ' _ebj';
-                                rules += ' _ei';
+                                rules += ' _hbj';
+                                rules += ' _hi';
                             } else if (props.size === "L") {
-                                rules += ' _ebh';
-                                rules += ' _eg';
+                                rules += ' _hbh';
+                                rules += ' _hg';
                             } else if (props.size === "S") {
-                                rules += ' _ebd';
-                                rules += ' _ec';
+                                rules += ' _hbd';
+                                rules += ' _hc';
                             } else if (props.size === "XS") {
-                                rules += ' _ebb';
-                                rules += ' _ea';
+                                rules += ' _hbb';
+                                rules += ' _ha';
                             } else {
-                                rules += ' _ebf';
-                                rules += ' _ee';
+                                rules += ' _hbf';
+                                rules += ' _he';
                             }
-                            rules += ' _fb';
-                            rules += ' _g-1x99dlob';
-                            rules += ' _ga';
+                            rules += ' _ib';
+                            rules += ' _j-1x99dlob';
+                            rules += ' _ja';
                             if (props.isDisabled) rules += ' aj';
                             else {
                                 if (props.isPressed) rules += ' an';
@@ -106,7 +106,7 @@ const $495db619596088aa$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $3i9ps$forwa
                                 else if (props.isHovered) rules += ' an';
                                 else rules += ' am';
                             }
-                            rules += ' __Ib';
+                            rules += ' __Lb';
                             return rules;
                         }
                     }),
@@ -117,24 +117,24 @@ const $495db619596088aa$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $3i9ps$forwa
                             }),
                         className: function anonymous(props) {
                             let rules = " .";
-                            rules += ' __b-n9hk5a';
-                            rules += ' __c-n9hk5a';
-                            rules += ' __d-n9hk5a';
                             rules += ' __e-n9hk5a';
-                            if (props.orientation === "vertical") rules += ' lM';
-                            else if (props.orientation === "horizontal") rules += ' lb';
-                            if (props.orientation === "vertical") rules += ' kb';
-                            else if (props.orientation === "horizontal") rules += ' kM';
-                            rules += ' _wc';
-                            rules += ' _xc';
-                            rules += ' _yc';
+                            rules += ' __f-n9hk5a';
+                            rules += ' __g-n9hk5a';
+                            rules += ' __h-n9hk5a';
+                            if (props.orientation === "vertical") rules += ' kM';
+                            else if (props.orientation === "horizontal") rules += ' kb';
+                            if (props.orientation === "vertical") rules += ' jb';
+                            else if (props.orientation === "horizontal") rules += ' jM';
                             rules += ' _zc';
-                            rules += ' da_____I';
-                            rules += ' dp10';
-                            rules += ' _Ob';
-                            rules += ' _N-3hmpv';
-                            if (props.isDisabled) rules += ' _Ma';
-                            else rules += ' _Mb';
+                            rules += ' _Ac';
+                            rules += ' _Bc';
+                            rules += ' _Cc';
+                            rules += ' ca_____I';
+                            rules += ' cp10';
+                            rules += ' _Rb';
+                            rules += ' _Q-3hmpv';
+                            if (props.isDisabled) rules += ' _Pa';
+                            else rules += ' _Pb';
                             if (props.isDisabled) rules += ' bg';
                             return rules;
                         },

package/dist/ColorSwatch.cjs

@@ -49,19 +49,13 @@ const $8b1ea085cefae738$export$cae13e90592f246a = /*#__PURE__*/ (0, $7Qhsa$react
             }),
         className: function anonymous(props, overrides) {
             let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
+            let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q|j|n|o)[^\s]+/g) || [];
             rules += matches.join('');
-            let $l = false;
             let $k = false;
+            let $j = false;
             for (let p of matches){
-                if (/^\s*l/.test(p)) $l = true;
                 if (/^\s*k/.test(p)) $k = true;
-            }
-            if (!$l) {
-                if (props.size === "L") rules += ' l2';
-                else if (props.size === "M") rules += ' lU';
-                else if (props.size === "S") rules += ' lM';
-                else if (props.size === "XS") rules += ' lE';
+                if (/^\s*j/.test(p)) $j = true;
             }
             if (!$k) {
                 if (props.size === "L") rules += ' k2';
@@ -69,26 +63,35 @@ const $8b1ea085cefae738$export$cae13e90592f246a = /*#__PURE__*/ (0, $7Qhsa$react
                 else if (props.size === "S") rules += ' kM';
                 else if (props.size === "XS") rules += ' kE';
             }
-            if (props.rounding === "full") rules += ' _wf';
-            else if (props.rounding === "none") rules += ' _wa';
-            else if (props.rounding === "default") rules += ' _wb';
-            if (props.rounding === "full") rules += ' _xf';
-            else if (props.rounding === "none") rules += ' _xa';
-            else if (props.rounding === "default") rules += ' _xb';
-            if (props.rounding === "full") rules += ' _yf';
-            else if (props.rounding === "none") rules += ' _ya';
-            else if (props.rounding === "default") rules += ' _yb';
+            if (!$j) {
+                if (props.size === "L") rules += ' j2';
+                else if (props.size === "M") rules += ' jU';
+                else if (props.size === "S") rules += ' jM';
+                else if (props.size === "XS") rules += ' jE';
+            }
             if (props.rounding === "full") rules += ' _zf';
             else if (props.rounding === "none") rules += ' _za';
             else if (props.rounding === "default") rules += ' _zb';
-            rules += ' cp42';
+            if (props.rounding === "full") rules += ' _Af';
+            else if (props.rounding === "none") rules += ' _Aa';
+            else if (props.rounding === "default") rules += ' _Ab';
+            if (props.rounding === "full") rules += ' _Bf';
+            else if (props.rounding === "none") rules += ' _Ba';
+            else if (props.rounding === "default") rules += ' _Bb';
+            if (props.rounding === "full") rules += ' _Cf';
+            else if (props.rounding === "none") rules += ' _Ca';
+            else if (props.rounding === "default") rules += ' _Cb';
+            rules += ' xp42';
+            rules += ' yp42';
+            rules += ' vp42';
+            rules += ' wp42';
+            rules += ' tb';
             rules += ' ub';
-            rules += ' vb';
+            rules += ' rb';
             rules += ' sb';
-            rules += ' tb';
-            rules += ' wa';
-            rules += ' __oa';
-            rules += ' _Ab';
+            rules += ' za';
+            rules += ' __ra';
+            rules += ' _Db';
             rules += ' -_14u0212_a-O';
             return rules;
         }({

package/dist/ColorSwatch.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AACtG,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,qCAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.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  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAmCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AACtG,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QACF,OAAO,KAAK,QAAQ,eACpB,WAAW,KAAK,YAAY,kBAC5B,KAAK,EACN,GAAG;IACJ,IAAI,eAAe,SAAS;IAC5B,QAAQ,CAAA,GAAA,oBAAM,EAAE,IAAM,OAAO,iBAAiB,WAAW,CAAA,GAAA,qCAAS,EAAE,gBAAgB,cAAc;QAAC;KAAa;IAEhH,IAAI,uBACF,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,OAAO;QACP,KAAK;QACL,OAAO,CAAC,SAAC,KAAK,EAAC,GAAM,CAAA;gBACnB,oFAAoF;gBACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;YACN,CAAA;QACA,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyB6B;kBAAC;sBAAM;QAAQ,GAAG,MAAM,MAAM;;IAG1E,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/s2/src/ColorSwatch.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  ColorSwatch as AriaColorSwatch,\n  ColorSwatchProps as AriaColorSwatchProps,\n  ContextValue,\n  parseColor\n} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchProps extends Omit<AriaColorSwatchProps, 'className' | 'style'>, UnsafeStyles {\n  /**\n   * The size of the ColorSwatch.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the ColorSwatch.\n   * @default 'default'\n   */\n  rounding?: 'default' | 'none' | 'full',\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight\n}\n\ninterface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size' | 'rounding'> {\n  useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);\nexport const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);\n  let domRef = useDOMRef(ref);\n  let ctx = useContext(InternalColorSwatchContext);\n  let {\n    size = ctx?.size || 'M',\n    rounding = ctx?.rounding || 'default',\n    color\n  } = props;\n  let nonNullValue = color || '#fff0';\n  color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);\n\n  let swatch = (\n    <AriaColorSwatch\n      {...props}\n      color={color}\n      ref={domRef}\n      style={({color}) => ({\n        // TODO: should there be a distinction between transparent and no value (e.g. null)?\n        background: color.getChannelValue('alpha') > 0\n          ? `linear-gradient(${color}, ${color}), repeating-conic-gradient(#e6e6e6 0% 25%, white 0% 50%) 0% 50% / 16px 16px`\n          // Red slash to indicate there is no selected color.\n          : 'linear-gradient(to bottom right, transparent calc(50% - 2px), var(--slash-color) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n      })}\n      className={style({\n        size: {\n          size: {\n            XS: 16,\n            S: 24,\n            M: 32,\n            L: 40\n          }\n        },\n        borderRadius: {\n          rounding: {\n            default: 'sm',\n            none: 'none',\n            full: 'full'\n          }\n        },\n        borderColor: 'gray-1000/42',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        boxSizing: 'border-box',\n        forcedColorAdjust: 'none',\n        '--slash-color': {\n          type: 'color',\n          value: 'red-900'\n        }\n      }, getAllowedOverrides({height: true}))({size, rounding}, props.styles)} />\n  );\n\n  // ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.\n  if (ctx) {\n    return ctx.useWrapper(swatch, color, rounding);\n  }\n\n  return swatch;\n});\n"],"names":[],"version":3,"file":"ColorSwatch.cjs.map"}