@react-spectrum/s2 0.2.1-nightly.4979

package/dist/ColorSlider.cjs

@@ -0,0 +1,175 @@
+require("./ColorSlider.css");
+var $5b07976eb9e358fe$exports = require("./ColorHandle.cjs");
+var $a0b996a550bb0891$exports = require("./Field.cjs");
+var $hkRua$reactjsxruntime = require("react/jsx-runtime");
+var $hkRua$reactariacomponents = require("react-aria-components");
+var $hkRua$react = require("react");
+var $hkRua$reactspectrumutils = require("@react-spectrum/utils");
+
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "ColorSlider", () => $fdd6f3d03620d438$export$44fd664bcca5b6fb);
+/*
+ * 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.
+ */ 
+
+
+
+
+
+function $fdd6f3d03620d438$var$ColorSlider(props, ref) {
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles } = props;
+    let containerRef = (0, $hkRua$reactspectrumutils.useDOMRef)(ref);
+    let trackRef = (0, $hkRua$react.useRef)(null);
+    let { locale: locale } = (0, $hkRua$reactariacomponents.useLocale)();
+    return /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $hkRua$reactariacomponents.ColorSlider), {
+        ...props,
+        ref: containerRef,
+        style: UNSAFE_style,
+        // The visual label is hidden when vertical, so make it an aria-label instead.
+        "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|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;
+                for (let p of matches)if (/^\s*l/.test(p)) $l = true;
+                if (!$l) {
+                    if (props.orientation === "horizontal") {
+                        rules += ' lbO';
+                        rules += ' lN';
+                    }
+                }
+                if (props.orientation === "vertical") {
+                    rules += ' kbO';
+                    rules += ' kN';
+                }
+                if (props.orientation === "vertical") rules += ' _Za';
+                else if (props.orientation === "horizontal") rules += ' _Zf';
+                rules += ' __h-1egg2pz';
+                rules += ' __j-1roc9nk';
+                rules += ' ib';
+                return rules;
+            }(renderProps, styles),
+        children: ({ isDisabled: isDisabled, orientation: orientation, state: state })=>/*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsxs)((0, $hkRua$reactjsxruntime.Fragment), {
+                children: [
+                    orientation === 'horizontal' && (props.label || props.label === undefined && !props['aria-label'] && !props['aria-labelledby']) && // If no external label, aria-label or aria-labelledby is provided,
+                    // default to displaying the localized channel value.
+                    // Specifically check if label is undefined. If label is `null` then display no visible label.
+                    // A default aria-label is provided by useColorSlider in that case.
+                    /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $a0b996a550bb0891$exports.FieldLabel), {
+                        isDisabled: isDisabled,
+                        contextualHelp: props.contextualHelp,
+                        children: props.label || state.value.getChannelName(props.channel, locale)
+                    }),
+                    orientation === 'horizontal' && /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $hkRua$reactariacomponents.SliderOutput), {
+                        className: function anonymous(props) {
+                            let rules = " .";
+                            rules += ' __a-5czzau';
+                            rules += ' __b-5czzau';
+                            rules += ' __c-5czzau';
+                            rules += ' __d-5czzau';
+                            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 += ' aj';
+                            else {
+                                if (props.isPressed) rules += ' an';
+                                else if (props.isFocusVisible) rules += ' an';
+                                else if (props.isHovered) rules += ' an';
+                                else rules += ' am';
+                            }
+                            rules += ' __Hb';
+                            return rules;
+                        }
+                    }),
+                    /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $hkRua$reactariacomponents.SliderTrack), {
+                        ref: trackRef,
+                        style: ({ defaultStyle: defaultStyle, isDisabled: isDisabled })=>({
+                                background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`
+                            }),
+                        className: function anonymous(props) {
+                            let rules = " .";
+                            rules += ' __a-4ka10a';
+                            rules += ' __b-4ka10a';
+                            rules += ' __c-4ka10a';
+                            rules += ' __d-4ka10a';
+                            if (props.orientation === "vertical") {
+                                rules += ' lbl';
+                                rules += ' lk';
+                            } else if (props.orientation === "horizontal") rules += ' l2';
+                            if (props.orientation === "vertical") rules += ' k2';
+                            else if (props.orientation === "horizontal") {
+                                rules += ' kbl';
+                                rules += ' kk';
+                            }
+                            rules += ' _vc';
+                            rules += ' _wc';
+                            rules += ' _xc';
+                            rules += ' _yc';
+                            rules += ' da_____v';
+                            rules += ' dp10';
+                            rules += ' _Nb';
+                            rules += ' _M-3hmpv';
+                            if (props.isDisabled) rules += ' _La';
+                            else rules += ' _Lb';
+                            if (props.isDisabled) rules += ' bg';
+                            return rules;
+                        },
+                        children: /*#__PURE__*/ (0, $hkRua$reactjsxruntime.jsx)((0, $5b07976eb9e358fe$exports.ColorHandle), {
+                            containerRef: trackRef,
+                            getPosition: ()=>{
+                                let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;
+                                let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);
+                                return {
+                                    x: x,
+                                    y: y
+                                };
+                            }
+                        })
+                    })
+                ]
+            })
+    });
+}
+/**
+ * A ColorSlider allows users to adjust an individual channel of a color value.
+ */ let $fdd6f3d03620d438$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $hkRua$react.forwardRef)($fdd6f3d03620d438$var$ColorSlider);
+
+
+//# sourceMappingURL=ColorSlider.cjs.map

package/dist/ColorSlider.cjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqBD,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACpD,IAAI,eAAe,CAAA,GAAA,mCAAQ,EAAE;IAC7B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAEvB,qBACE,gCAAC,CAAA,GAAA,sCAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,8EAA8E;QAC9E,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,MAAM,WAAW,KAAK,aAAa,MAAM,KAAK,GAAG,SAAQ;QAC7F,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;;;;;;;cAuBnB,aAAa;kBACtC,CAAC,cAAC,UAAU,eAAE,WAAW,SAAE,KAAK,EAAC,iBAAM;;oBACrC,gBAAgB,gBAAiB,CAAA,MAAM,KAAK,IAAK,MAAM,KAAK,KAAK,aAAa,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAC9H,mEAAmE;oBACnE,qDAAqD;oBACrD,8FAA8F;oBAC9F,mEAAmE;kCACnE,gCAAC,CAAA,GAAA,oCAAS;wBAAE,YAAY;wBAAY,gBAAgB,MAAM,cAAc;kCACrE,MAAM,KAAK,IAAI,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;;oBAG7D,gBAAgB,8BACf,gCAAC,CAAA,GAAA,uCAAW;wBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAUJ,gCAAC,CAAA,GAAA,sCAAU;wBACT,KAAK;wBACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,CAAC,EAAE,aAAa,UAAU,CAAC,wEAAwE,CAAC;4BAC3I,CAAA;wBACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCA6BA,cAAA,gCAAC,CAAA,GAAA,qCAAU;4BACT,cAAc;4BACd,aAAa;gCACX,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,eAAe,CAAC,KAAK;gCACxE,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,IAAI,MAAM,eAAe,CAAC;gCAC7E,OAAO;uCAAC;uCAAG;gCAAC;4BACd;;;;;;AAKZ;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ColorSlider.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  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps,\n  SliderOutput,\n  SliderTrack,\n  useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {DOMRef, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {forwardRef, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nfunction ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {locale} = useLocale();\n\n  return (\n    <AriaColorSlider \n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>\n        )}\n        {orientation === 'horizontal' && \n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: 'control',\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle \n            containerRef={trackRef}\n            getPosition={() => {\n              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>\n  );\n}\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n"],"names":[],"version":3,"file":"ColorSlider.cjs.map"}

package/dist/ColorSlider.css

@@ -0,0 +1,269 @@
+@layer _.a {
+  .lN {
+    width: 12rem;
+  }
+
+  .kN {
+    height: 12rem;
+  }
+
+  ._Zf {
+    display: grid;
+  }
+
+  ._Za {
+    display: block;
+  }
+
+  .__h-1egg2pz {
+    grid-template-columns: 1fr auto;
+  }
+
+  .__j-1roc9nk {
+    grid-template-areas: "label output"
+                         "track track";
+  }
+
+  .ib {
+    row-gap: .25rem;
+  }
+
+  .__a-5czzau {
+    grid-column-start: output;
+  }
+
+  .__b-5czzau {
+    grid-column-end: output;
+  }
+
+  .__c-5czzau {
+    grid-row-start: output;
+  }
+
+  .__d-5czzau {
+    grid-row-end: output;
+  }
+
+  ._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;
+  }
+
+  .am {
+    color: var(--lightningcss-light, #505050) var(--lightningcss-dark, #afafaf);
+  }
+
+  .an {
+    color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
+  }
+
+  .aj {
+    color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
+  }
+
+  .__Hb {
+    cursor: default;
+  }
+
+  .__a-4ka10a {
+    grid-column-start: track;
+  }
+
+  .__b-4ka10a {
+    grid-column-end: track;
+  }
+
+  .__c-4ka10a {
+    grid-row-start: track;
+  }
+
+  .__d-4ka10a {
+    grid-row-end: track;
+  }
+
+  .l2 {
+    width: 100%;
+  }
+
+  .lk {
+    width: 1.5rem;
+  }
+
+  .kk {
+    height: 1.5rem;
+  }
+
+  .k2 {
+    height: 100%;
+  }
+
+  ._vc {
+    border-start-start-radius: .5rem;
+  }
+
+  ._wc {
+    border-start-end-radius: .5rem;
+  }
+
+  ._xc {
+    border-end-start-radius: .5rem;
+  }
+
+  ._yc {
+    border-end-end-radius: .5rem;
+  }
+
+  .dp10 {
+    outline-color: var(--lightningcss-light, #0000001a) var(--lightningcss-dark, #ffffff1a);
+  }
+
+  ._Nb {
+    outline-width: 1px;
+  }
+
+  ._M-3hmpv {
+    outline-offset: -1px;
+  }
+
+  ._Lb {
+    outline-style: solid;
+  }
+
+  ._La {
+    outline-style: none;
+  }
+
+  .bg {
+    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
+  }
+}
+
+@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 UNSAFE_overrides;
+
+@layer _.b.b {
+  @media not ((hover: hover) and (pointer: fine)) {
+    .lbO {
+      width: 15rem;
+    }
+
+    .kbO {
+      height: 15rem;
+    }
+
+    ._dbf {
+      font-size: 1.0625rem;
+    }
+
+    ._dbb {
+      font-size: .8125rem;
+    }
+
+    ._dbd {
+      font-size: .9375rem;
+    }
+
+    ._dbh {
+      font-size: 1.1875rem;
+    }
+
+    ._dbj {
+      font-size: 1.375rem;
+    }
+
+    .lbl {
+      width: 1.875rem;
+    }
+
+    .kbl {
+      height: 1.875rem;
+    }
+  }
+}
+
+@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;
+  }
+}
+
+.\.:not(#a#b) {
+  all: revert-layer;
+}
+
+@layer _.b.a {
+  @media (forced-colors: active) {
+    .da_____v {
+      outline-color: buttonborder;
+    }
+  }
+}
+/*# sourceMappingURL=ColorSlider.css.map */

package/dist/ColorSlider.css.map

@@ -0,0 +1 @@
+{"mappings":"AC4CmD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAoC5B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnD8B;EAoC5B;;;;EAAA;;;;;AApC4B;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAoC5B;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAeF;;;;IAAA;;;;;;AAfE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAeF;;;;AAAA;EAAA;IAAA","sources":["14771332a5b9bbc4","packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["@import \"d6c5746f419c314b\";\n@import \"59869632975fb938\";\n@import \"927ebdef839461cd\";\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  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps,\n  SliderOutput,\n  SliderTrack,\n  useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {DOMRef, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {forwardRef, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nfunction ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {locale} = useLocale();\n\n  return (\n    <AriaColorSlider \n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>\n        )}\n        {orientation === 'horizontal' && \n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: 'control',\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle \n            containerRef={trackRef}\n            getPosition={() => {\n              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>\n  );\n}\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n"],"names":[],"version":3,"file":"ColorSlider.css.map"}

package/dist/ColorSlider.mjs

@@ -0,0 +1,170 @@
+import "./ColorSlider.css";
+import {ColorHandle as $b4f7db7c45cd3de9$export$92862704de639678} from "./ColorHandle.mjs";
+import {FieldLabel as $9afd80978c252040$export$1acdcf5a973a8414} from "./Field.mjs";
+import {jsx as $3i9ps$jsx, jsxs as $3i9ps$jsxs, Fragment as $3i9ps$Fragment} from "react/jsx-runtime";
+import {useLocale as $3i9ps$useLocale, ColorSlider as $3i9ps$ColorSlider, SliderOutput as $3i9ps$SliderOutput, SliderTrack as $3i9ps$SliderTrack} from "react-aria-components";
+import {useRef as $3i9ps$useRef, forwardRef as $3i9ps$forwardRef} from "react";
+import {useDOMRef as $3i9ps$useDOMRef} 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.
+ */ 
+
+
+
+
+
+function $495db619596088aa$var$ColorSlider(props, ref) {
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles } = props;
+    let containerRef = (0, $3i9ps$useDOMRef)(ref);
+    let trackRef = (0, $3i9ps$useRef)(null);
+    let { locale: locale } = (0, $3i9ps$useLocale)();
+    return /*#__PURE__*/ (0, $3i9ps$jsx)((0, $3i9ps$ColorSlider), {
+        ...props,
+        ref: containerRef,
+        style: UNSAFE_style,
+        // The visual label is hidden when vertical, so make it an aria-label instead.
+        "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|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;
+                for (let p of matches)if (/^\s*l/.test(p)) $l = true;
+                if (!$l) {
+                    if (props.orientation === "horizontal") {
+                        rules += ' lbO';
+                        rules += ' lN';
+                    }
+                }
+                if (props.orientation === "vertical") {
+                    rules += ' kbO';
+                    rules += ' kN';
+                }
+                if (props.orientation === "vertical") rules += ' _Za';
+                else if (props.orientation === "horizontal") rules += ' _Zf';
+                rules += ' __h-1egg2pz';
+                rules += ' __j-1roc9nk';
+                rules += ' ib';
+                return rules;
+            }(renderProps, styles),
+        children: ({ isDisabled: isDisabled, orientation: orientation, state: state })=>/*#__PURE__*/ (0, $3i9ps$jsxs)((0, $3i9ps$Fragment), {
+                children: [
+                    orientation === 'horizontal' && (props.label || props.label === undefined && !props['aria-label'] && !props['aria-labelledby']) && // If no external label, aria-label or aria-labelledby is provided,
+                    // default to displaying the localized channel value.
+                    // Specifically check if label is undefined. If label is `null` then display no visible label.
+                    // A default aria-label is provided by useColorSlider in that case.
+                    /*#__PURE__*/ (0, $3i9ps$jsx)((0, $9afd80978c252040$export$1acdcf5a973a8414), {
+                        isDisabled: isDisabled,
+                        contextualHelp: props.contextualHelp,
+                        children: props.label || state.value.getChannelName(props.channel, locale)
+                    }),
+                    orientation === 'horizontal' && /*#__PURE__*/ (0, $3i9ps$jsx)((0, $3i9ps$SliderOutput), {
+                        className: function anonymous(props) {
+                            let rules = " .";
+                            rules += ' __a-5czzau';
+                            rules += ' __b-5czzau';
+                            rules += ' __c-5czzau';
+                            rules += ' __d-5czzau';
+                            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 += ' aj';
+                            else {
+                                if (props.isPressed) rules += ' an';
+                                else if (props.isFocusVisible) rules += ' an';
+                                else if (props.isHovered) rules += ' an';
+                                else rules += ' am';
+                            }
+                            rules += ' __Hb';
+                            return rules;
+                        }
+                    }),
+                    /*#__PURE__*/ (0, $3i9ps$jsx)((0, $3i9ps$SliderTrack), {
+                        ref: trackRef,
+                        style: ({ defaultStyle: defaultStyle, isDisabled: isDisabled })=>({
+                                background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`
+                            }),
+                        className: function anonymous(props) {
+                            let rules = " .";
+                            rules += ' __a-4ka10a';
+                            rules += ' __b-4ka10a';
+                            rules += ' __c-4ka10a';
+                            rules += ' __d-4ka10a';
+                            if (props.orientation === "vertical") {
+                                rules += ' lbl';
+                                rules += ' lk';
+                            } else if (props.orientation === "horizontal") rules += ' l2';
+                            if (props.orientation === "vertical") rules += ' k2';
+                            else if (props.orientation === "horizontal") {
+                                rules += ' kbl';
+                                rules += ' kk';
+                            }
+                            rules += ' _vc';
+                            rules += ' _wc';
+                            rules += ' _xc';
+                            rules += ' _yc';
+                            rules += ' da_____v';
+                            rules += ' dp10';
+                            rules += ' _Nb';
+                            rules += ' _M-3hmpv';
+                            if (props.isDisabled) rules += ' _La';
+                            else rules += ' _Lb';
+                            if (props.isDisabled) rules += ' bg';
+                            return rules;
+                        },
+                        children: /*#__PURE__*/ (0, $3i9ps$jsx)((0, $b4f7db7c45cd3de9$export$92862704de639678), {
+                            containerRef: trackRef,
+                            getPosition: ()=>{
+                                let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;
+                                let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);
+                                return {
+                                    x: x,
+                                    y: y
+                                };
+                            }
+                        })
+                    })
+                ]
+            })
+    });
+}
+/**
+ * A ColorSlider allows users to adjust an individual channel of a color value.
+ */ let $495db619596088aa$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $3i9ps$forwardRef)($495db619596088aa$var$ColorSlider);
+
+
+export {$495db619596088aa$export$44fd664bcca5b6fb as ColorSlider};
+//# sourceMappingURL=ColorSlider.mjs.map

package/dist/ColorSlider.mjs.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAqBD,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACpD,IAAI,eAAe,CAAA,GAAA,gBAAQ,EAAE;IAC7B,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAEvB,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,8EAA8E;QAC9E,cAAY,KAAK,CAAC,aAAa,IAAK,CAAA,MAAM,WAAW,KAAK,aAAa,MAAM,KAAK,GAAG,SAAQ;QAC7F,WAAW,CAAA,cAAe,mBAAmB;;;;;;;;;;;;;;;;;;;;;;cAuBnB,aAAa;kBACtC,CAAC,cAAC,UAAU,eAAE,WAAW,SAAE,KAAK,EAAC,iBAAM;;oBACrC,gBAAgB,gBAAiB,CAAA,MAAM,KAAK,IAAK,MAAM,KAAK,KAAK,aAAa,CAAC,KAAK,CAAC,aAAa,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAC9H,mEAAmE;oBACnE,qDAAqD;oBACrD,8FAA8F;oBAC9F,mEAAmE;kCACnE,gBAAC,CAAA,GAAA,yCAAS;wBAAE,YAAY;wBAAY,gBAAgB,MAAM,cAAc;kCACrE,MAAM,KAAK,IAAI,MAAM,KAAK,CAAC,cAAc,CAAC,MAAM,OAAO,EAAE;;oBAG7D,gBAAgB,8BACf,gBAAC,CAAA,GAAA,mBAAW;wBACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAUJ,gBAAC,CAAA,GAAA,kBAAU;wBACT,KAAK;wBACL,OAAO,CAAC,gBAAC,YAAY,cAAE,UAAU,EAAC,GAAM,CAAA;gCACtC,YAAY,aAAa,YAAY,CAAC,EAAE,aAAa,UAAU,CAAC,wEAAwE,CAAC;4BAC3I,CAAA;wBACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCA6BA,cAAA,gBAAC,CAAA,GAAA,yCAAU;4BACT,cAAc;4BACd,aAAa;gCACX,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,eAAe,CAAC,KAAK;gCACxE,IAAI,IAAI,MAAM,WAAW,KAAK,eAAe,MAAM,IAAI,MAAM,eAAe,CAAC;gCAC7E,OAAO;uCAAC;uCAAG;gCAAC;4BACd;;;;;;AAKZ;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ColorSlider.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  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps,\n  SliderOutput,\n  SliderTrack,\n  useLocale\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {DOMRef, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {forwardRef, useRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style'>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nfunction ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {locale} = useLocale();\n\n  return (\n    <AriaColorSlider \n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>\n        )}\n        {orientation === 'horizontal' && \n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: 'control',\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle \n            containerRef={trackRef}\n            getPosition={() => {\n              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>\n  );\n}\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nlet _ColorSlider = forwardRef(ColorSlider);\nexport {_ColorSlider as ColorSlider};\n"],"names":[],"version":3,"file":"ColorSlider.mjs.map"}