@react-spectrum/color 3.1.7 → 3.2.0

package/dist/ColorSwatchPicker.main.js

@@ -1,112 +0,0 @@
-require("./color.51750948.css");
-var $f076f5c85640192a$exports = require("./ColorSwatch.main.js");
-var $iY2T3$reactariacomponents = require("react-aria-components");
-var $iY2T3$react = require("react");
-var $iY2T3$reactspectrumutils = require("@react-spectrum/utils");
-
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-
-$parcel$export(module.exports, "ColorSwatchPicker", () => $ba9a184bcae9b225$export$b46792416e3d8515);
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-const $ba9a184bcae9b225$export$b46792416e3d8515 = /*#__PURE__*/ (0, $iY2T3$react.forwardRef)(function ColorSwatchPicker(props, ref) {
-    let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
-    let { styleProps: styleProps } = (0, $iY2T3$reactspectrumutils.useStyleProps)(props);
-    let domRef = (0, $iY2T3$reactspectrumutils.useDOMRef)(ref);
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($iY2T3$react))).createElement((0, $iY2T3$reactariacomponents.ColorSwatchPicker), {
-        ...otherProps,
-        style: styleProps.style,
-        ref: domRef,
-        className: styleProps.className + function anonymous(props) {
-            let rules = "";
-            rules += ' s1-_Ts1-d';
-            rules += ' s1-_1s1-a';
-            if (props.density === "spacious") rules += ' s1-ls1-c';
-            else if (props.density === "regular") rules += ' s1-ls1-b';
-            else if (props.density === "compact") rules += ' s1-ls1-F';
-            if (props.density === "spacious") rules += ' s1-ms1-c';
-            else if (props.density === "regular") rules += ' s1-ms1-b';
-            else if (props.density === "compact") rules += ' s1-ms1-F';
-            return rules;
-        }({
-            density: density
-        })
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($iY2T3$react))).createElement((0, $f076f5c85640192a$exports.SpectrumColorSwatchContext).Provider, {
-        value: {
-            useWrapper: $ba9a184bcae9b225$var$useWrapper,
-            size: size,
-            rounding: rounding
-        }
-    }, props.children));
-});
-function $ba9a184bcae9b225$var$useWrapper(swatch, color, rounding) {
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($iY2T3$react))).createElement((0, $iY2T3$reactariacomponents.ColorSwatchPickerItem), {
-        color: color,
-        className: (renderProps)=>(function anonymous(props) {
-                let rules = "";
-                if (props.isFocusVisible) rules += ' s1-_Fs1-b';
-                else rules += ' s1-_Fs1-a';
-                rules += ' s1-ds1-as1-___D';
-                rules += ' s1-ds1-___I';
-                rules += ' s1-_Hs1-c';
-                rules += ' s1-_Gs1-c';
-                rules += ' s1-Xs1-c';
-                if (props.rounding === "full") rules += ' s1-_qs1-f';
-                else if (props.rounding === "default") rules += ' s1-_qs1-c';
-                else if (props.rounding === "none") rules += ' s1-_qs1-a';
-                if (props.rounding === "full") rules += ' s1-_rs1-f';
-                else if (props.rounding === "default") rules += ' s1-_rs1-c';
-                else if (props.rounding === "none") rules += ' s1-_rs1-a';
-                if (props.rounding === "full") rules += ' s1-_ss1-f';
-                else if (props.rounding === "default") rules += ' s1-_ss1-c';
-                else if (props.rounding === "none") rules += ' s1-_ss1-a';
-                if (props.rounding === "full") rules += ' s1-_ts1-f';
-                else if (props.rounding === "default") rules += ' s1-_ts1-c';
-                else if (props.rounding === "none") rules += ' s1-_ts1-a';
-                return rules;
-            })({
-                ...renderProps,
-                rounding: rounding
-            })
-    }, ({ isSelected: isSelected })=>/*#__PURE__*/ (0, ($parcel$interopDefault($iY2T3$react))).createElement((0, ($parcel$interopDefault($iY2T3$react))).Fragment, null, swatch, isSelected && /*#__PURE__*/ (0, ($parcel$interopDefault($iY2T3$react))).createElement("div", {
-            "aria-hidden": true,
-            className: function anonymous(props) {
-                let rules = "";
-                rules += ' s1-Xs1-a';
-                rules += ' s1-__zs1-a';
-                rules += ' s1-0s1-a';
-                rules += ' s1-2s1-a';
-                rules += ' s1-1s1-a';
-                rules += ' s1-3s1-a';
-                rules += ' s1-_p-1icpv9v';
-                rules += ' s1-_us1-b';
-                rules += ' s1-_q-17zqamw';
-                rules += ' s1-_r-17zqamw';
-                rules += ' s1-_s-17zqamw';
-                rules += ' s1-_t-17zqamw';
-                return rules;
-            }()
-        })));
-}
-
-
-//# sourceMappingURL=ColorSwatchPicker.main.js.map

package/dist/ColorSwatchPicker.main.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAiCM,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBAAkB,KAAqC,EAAE,GAA2B;IACvI,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,0DAAC,CAAA,GAAA,4CAAoB;QAClB,GAAG,UAAU;QACd,OAAO,WAAW,KAAK;QACvB,KAAK;QACL,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;UAU/B;qBAAC;QAAO;qBACX,0DAAC,CAAA,GAAA,oDAAyB,EAAE,QAAQ;QAAC,OAAO;wBAAC;kBAAY;sBAAM;QAAQ;OACpE,MAAM,QAAQ;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAA8C;IACpG,qBACE,0DAAC,CAAA,GAAA,gDAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAgBvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;OAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM,sHACjB,QACA,4BACC,0DAAC;YACC,eAAA;YACA,WAAW;;;;;;;;;;;;;;;;;AAYvB","sources":["packages/@react-spectrum/color/src/ColorSwatchPicker.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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {DOMRef, StyleProps, ValueBase} from '@react-types/shared';\nimport React, {forwardRef, ReactElement, ReactNode} from 'react';\nimport {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef, useStyleProps} from '@react-spectrum/utils';\n\nexport interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default \"regular\"\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default \"M\"\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default \"none\"\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      style={styleProps.style}\n      ref={domRef}\n      className={styleProps.className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: 0.5,\n            regular: 1,\n            spacious: 2\n          }\n        }\n      })({density})}>\n      <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </SpectrumColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        outlineStyle: {\n          default: 'none',\n          isFocusVisible: 'solid'\n        },\n        outlineColor: 'focus-ring',\n        outlineWidth: 2,\n        outlineOffset: 2,\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'default',\n            full: 'full'\n          }\n        }\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxShadow: '[inset 0 0 0 2px var(--spectrum-gray-900), inset 0 0 0 4px var(--spectrum-gray-50)]',\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })()} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.main.js.map"}

package/dist/ColorSwatchPicker.mjs

@@ -1,103 +0,0 @@
-import "./color.51750948.css";
-import {SpectrumColorSwatchContext as $d68786ae409fa722$export$8529d7908a78c058} from "./ColorSwatch.mjs";
-import {ColorSwatchPicker as $1TpDU$ColorSwatchPicker, ColorSwatchPickerItem as $1TpDU$ColorSwatchPickerItem} from "react-aria-components";
-import $1TpDU$react, {forwardRef as $1TpDU$forwardRef} from "react";
-import {useStyleProps as $1TpDU$useStyleProps, useDOMRef as $1TpDU$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.
- */ 
-
-
-
-const $4919bc07654f325c$export$b46792416e3d8515 = /*#__PURE__*/ (0, $1TpDU$forwardRef)(function ColorSwatchPicker(props, ref) {
-    let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
-    let { styleProps: styleProps } = (0, $1TpDU$useStyleProps)(props);
-    let domRef = (0, $1TpDU$useDOMRef)(ref);
-    return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPicker), {
-        ...otherProps,
-        style: styleProps.style,
-        ref: domRef,
-        className: styleProps.className + function anonymous(props) {
-            let rules = "";
-            rules += ' s1-_Ts1-d';
-            rules += ' s1-_1s1-a';
-            if (props.density === "spacious") rules += ' s1-ls1-c';
-            else if (props.density === "regular") rules += ' s1-ls1-b';
-            else if (props.density === "compact") rules += ' s1-ls1-F';
-            if (props.density === "spacious") rules += ' s1-ms1-c';
-            else if (props.density === "regular") rules += ' s1-ms1-b';
-            else if (props.density === "compact") rules += ' s1-ms1-F';
-            return rules;
-        }({
-            density: density
-        })
-    }, /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $d68786ae409fa722$export$8529d7908a78c058).Provider, {
-        value: {
-            useWrapper: $4919bc07654f325c$var$useWrapper,
-            size: size,
-            rounding: rounding
-        }
-    }, props.children));
-});
-function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
-    return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPickerItem), {
-        color: color,
-        className: (renderProps)=>(function anonymous(props) {
-                let rules = "";
-                if (props.isFocusVisible) rules += ' s1-_Fs1-b';
-                else rules += ' s1-_Fs1-a';
-                rules += ' s1-ds1-as1-___D';
-                rules += ' s1-ds1-___I';
-                rules += ' s1-_Hs1-c';
-                rules += ' s1-_Gs1-c';
-                rules += ' s1-Xs1-c';
-                if (props.rounding === "full") rules += ' s1-_qs1-f';
-                else if (props.rounding === "default") rules += ' s1-_qs1-c';
-                else if (props.rounding === "none") rules += ' s1-_qs1-a';
-                if (props.rounding === "full") rules += ' s1-_rs1-f';
-                else if (props.rounding === "default") rules += ' s1-_rs1-c';
-                else if (props.rounding === "none") rules += ' s1-_rs1-a';
-                if (props.rounding === "full") rules += ' s1-_ss1-f';
-                else if (props.rounding === "default") rules += ' s1-_ss1-c';
-                else if (props.rounding === "none") rules += ' s1-_ss1-a';
-                if (props.rounding === "full") rules += ' s1-_ts1-f';
-                else if (props.rounding === "default") rules += ' s1-_ts1-c';
-                else if (props.rounding === "none") rules += ' s1-_ts1-a';
-                return rules;
-            })({
-                ...renderProps,
-                rounding: rounding
-            })
-    }, ({ isSelected: isSelected })=>/*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$react).Fragment, null, swatch, isSelected && /*#__PURE__*/ (0, $1TpDU$react).createElement("div", {
-            "aria-hidden": true,
-            className: function anonymous(props) {
-                let rules = "";
-                rules += ' s1-Xs1-a';
-                rules += ' s1-__zs1-a';
-                rules += ' s1-0s1-a';
-                rules += ' s1-2s1-a';
-                rules += ' s1-1s1-a';
-                rules += ' s1-3s1-a';
-                rules += ' s1-_p-1icpv9v';
-                rules += ' s1-_us1-b';
-                rules += ' s1-_q-17zqamw';
-                rules += ' s1-_r-17zqamw';
-                rules += ' s1-_s-17zqamw';
-                rules += ' s1-_t-17zqamw';
-                return rules;
-            }()
-        })));
-}
-
-
-export {$4919bc07654f325c$export$b46792416e3d8515 as ColorSwatchPicker};
-//# sourceMappingURL=ColorSwatchPicker.module.js.map

package/dist/ColorSwatchPicker.module.js

@@ -1,103 +0,0 @@
-import "./color.51750948.css";
-import {SpectrumColorSwatchContext as $d68786ae409fa722$export$8529d7908a78c058} from "./ColorSwatch.module.js";
-import {ColorSwatchPicker as $1TpDU$ColorSwatchPicker, ColorSwatchPickerItem as $1TpDU$ColorSwatchPickerItem} from "react-aria-components";
-import $1TpDU$react, {forwardRef as $1TpDU$forwardRef} from "react";
-import {useStyleProps as $1TpDU$useStyleProps, useDOMRef as $1TpDU$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.
- */ 
-
-
-
-const $4919bc07654f325c$export$b46792416e3d8515 = /*#__PURE__*/ (0, $1TpDU$forwardRef)(function ColorSwatchPicker(props, ref) {
-    let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
-    let { styleProps: styleProps } = (0, $1TpDU$useStyleProps)(props);
-    let domRef = (0, $1TpDU$useDOMRef)(ref);
-    return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPicker), {
-        ...otherProps,
-        style: styleProps.style,
-        ref: domRef,
-        className: styleProps.className + function anonymous(props) {
-            let rules = "";
-            rules += ' s1-_Ts1-d';
-            rules += ' s1-_1s1-a';
-            if (props.density === "spacious") rules += ' s1-ls1-c';
-            else if (props.density === "regular") rules += ' s1-ls1-b';
-            else if (props.density === "compact") rules += ' s1-ls1-F';
-            if (props.density === "spacious") rules += ' s1-ms1-c';
-            else if (props.density === "regular") rules += ' s1-ms1-b';
-            else if (props.density === "compact") rules += ' s1-ms1-F';
-            return rules;
-        }({
-            density: density
-        })
-    }, /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $d68786ae409fa722$export$8529d7908a78c058).Provider, {
-        value: {
-            useWrapper: $4919bc07654f325c$var$useWrapper,
-            size: size,
-            rounding: rounding
-        }
-    }, props.children));
-});
-function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
-    return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPickerItem), {
-        color: color,
-        className: (renderProps)=>(function anonymous(props) {
-                let rules = "";
-                if (props.isFocusVisible) rules += ' s1-_Fs1-b';
-                else rules += ' s1-_Fs1-a';
-                rules += ' s1-ds1-as1-___D';
-                rules += ' s1-ds1-___I';
-                rules += ' s1-_Hs1-c';
-                rules += ' s1-_Gs1-c';
-                rules += ' s1-Xs1-c';
-                if (props.rounding === "full") rules += ' s1-_qs1-f';
-                else if (props.rounding === "default") rules += ' s1-_qs1-c';
-                else if (props.rounding === "none") rules += ' s1-_qs1-a';
-                if (props.rounding === "full") rules += ' s1-_rs1-f';
-                else if (props.rounding === "default") rules += ' s1-_rs1-c';
-                else if (props.rounding === "none") rules += ' s1-_rs1-a';
-                if (props.rounding === "full") rules += ' s1-_ss1-f';
-                else if (props.rounding === "default") rules += ' s1-_ss1-c';
-                else if (props.rounding === "none") rules += ' s1-_ss1-a';
-                if (props.rounding === "full") rules += ' s1-_ts1-f';
-                else if (props.rounding === "default") rules += ' s1-_ts1-c';
-                else if (props.rounding === "none") rules += ' s1-_ts1-a';
-                return rules;
-            })({
-                ...renderProps,
-                rounding: rounding
-            })
-    }, ({ isSelected: isSelected })=>/*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$react).Fragment, null, swatch, isSelected && /*#__PURE__*/ (0, $1TpDU$react).createElement("div", {
-            "aria-hidden": true,
-            className: function anonymous(props) {
-                let rules = "";
-                rules += ' s1-Xs1-a';
-                rules += ' s1-__zs1-a';
-                rules += ' s1-0s1-a';
-                rules += ' s1-2s1-a';
-                rules += ' s1-1s1-a';
-                rules += ' s1-3s1-a';
-                rules += ' s1-_p-1icpv9v';
-                rules += ' s1-_us1-b';
-                rules += ' s1-_q-17zqamw';
-                rules += ' s1-_r-17zqamw';
-                rules += ' s1-_s-17zqamw';
-                rules += ' s1-_t-17zqamw';
-                return rules;
-            }()
-        })));
-}
-
-
-export {$4919bc07654f325c$export$b46792416e3d8515 as ColorSwatchPicker};
-//# sourceMappingURL=ColorSwatchPicker.module.js.map

package/dist/ColorSwatchPicker.module.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;AAiCM,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAAqC,EAAE,GAA2B;IACvI,IAAI,WACF,UAAU,iBACV,OAAO,eACP,WAAW,QACX,GAAG,YACJ,GAAG;IACJ,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,wBAAoB;QAClB,GAAG,UAAU;QACd,OAAO,WAAW,KAAK;QACvB,KAAK;QACL,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;UAU/B;qBAAC;QAAO;qBACX,gCAAC,CAAA,GAAA,yCAAyB,EAAE,QAAQ;QAAC,OAAO;wBAAC;kBAAY;sBAAM;QAAQ;OACpE,MAAM,QAAQ;AAIvB;AAEA,SAAS,iCAAW,MAAoB,EAAE,KAAY,EAAE,QAA8C;IACpG,qBACE,gCAAC,CAAA,GAAA,4BAAwB;QACvB,OAAO;QACP,WAAW,CAAA,cAAe;;;;;;;;;;;;;;;;;;;;;;eAgBvB;gBAAC,GAAG,WAAW;0BAAE;YAAQ;OAC3B,CAAC,cAAC,UAAU,EAAC,iBAAM,kEACjB,QACA,4BACC,gCAAC;YACC,eAAA;YACA,WAAW;;;;;;;;;;;;;;;;;AAYvB","sources":["packages/@react-spectrum/color/src/ColorSwatchPicker.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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {DOMRef, StyleProps, ValueBase} from '@react-types/shared';\nimport React, {forwardRef, ReactElement, ReactNode} from 'react';\nimport {SpectrumColorSwatchContext, SpectrumColorSwatchProps} from './ColorSwatch';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef, useStyleProps} from '@react-spectrum/utils';\n\nexport interface SpectrumColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps {\n  /** The ColorSwatches within the ColorSwatchPicker. */\n  children: ReactNode,\n  /**\n   * The amount of padding between the swatches.\n   * @default \"regular\"\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The size of the color swatches.\n   * @default \"M\"\n   */\n  size?: 'XS' | 'S' | 'M' | 'L',\n  /**\n   * The corner rounding of the color swatches.\n   * @default \"none\"\n   */\n  rounding?: 'none' | 'default' | 'full'\n}\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: SpectrumColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    density = 'regular',\n    size = 'M',\n    rounding = 'none',\n    ...otherProps\n  } = props;\n  let {styleProps} = useStyleProps(props);\n  let domRef = useDOMRef(ref);\n\n  return (\n    <AriaColorSwatchPicker\n      {...otherProps}\n      style={styleProps.style}\n      ref={domRef}\n      className={styleProps.className + style({\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: {\n          density: {\n            compact: 0.5,\n            regular: 1,\n            spacious: 2\n          }\n        }\n      })({density})}>\n      <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n        {props.children}\n      </SpectrumColorSwatchContext.Provider>\n    </AriaColorSwatchPicker>\n  );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) {\n  return (\n    <AriaColorSwatchPickerItem\n      color={color}\n      className={renderProps => style({\n        outlineStyle: {\n          default: 'none',\n          isFocusVisible: 'solid'\n        },\n        outlineColor: 'focus-ring',\n        outlineWidth: 2,\n        outlineOffset: 2,\n        position: 'relative',\n        borderRadius: {\n          rounding: {\n            none: 'none',\n            default: 'default',\n            full: 'full'\n          }\n        }\n      })({...renderProps, rounding})}>\n      {({isSelected}) => (<>\n        {swatch}\n        {isSelected && (\n          <div\n            aria-hidden\n            className={style({\n              position: 'absolute',\n              pointerEvents: 'none',\n              inset: 0,\n              boxShadow: '[inset 0 0 0 2px var(--spectrum-gray-900), inset 0 0 0 4px var(--spectrum-gray-50)]',\n              forcedColorAdjust: 'none',\n              borderRadius: '[inherit]'\n            })()} />\n        )}\n      </>)}\n    </AriaColorSwatchPickerItem>\n  );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.module.js.map"}

package/dist/ColorThumb.main.js

@@ -1,146 +0,0 @@
-require("./color.f801bfa3.css");
-var $f61d632765728b2e$exports = require("./colorhandle_vars_css.main.js");
-require("./color.ff589589.css");
-var $f65977ae56facfaa$exports = require("./colorloupe_vars_css.main.js");
-var $bRwD9$reactspectrumutils = require("@react-spectrum/utils");
-var $bRwD9$reactspectrumoverlays = require("@react-spectrum/overlays");
-var $bRwD9$react = require("react");
-var $bRwD9$reactariautils = require("@react-aria/utils");
-var $bRwD9$reactspectrumprovider = require("@react-spectrum/provider");
-
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-
-$parcel$export(module.exports, "ColorThumb", () => $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc);
-/*
- * Copyright 2020 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 $2b9adc23f6c7cae1$export$a3cc47cee1c1ccc(props) {
-    let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = '', style: style, containerRef: containerRef, ...otherProps } = props;
-    let valueCSS = value.toString('css');
-    let loupeRef = (0, $bRwD9$react.useRef)(null);
-    let provider = (0, $bRwD9$reactspectrumprovider.useProvider)();
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("div", {
-        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f61d632765728b2e$exports))), 'spectrum-ColorHandle', {
-            'is-focused': isFocused,
-            'is-disabled': isDisabled
-        }) + ' ' + className,
-        style: style,
-        ...otherProps
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("div", {
-        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f61d632765728b2e$exports))), 'spectrum-ColorHandle-color'),
-        style: {
-            backgroundColor: valueCSS
-        }
-    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement((0, $bRwD9$reactspectrumoverlays.Overlay), {
-        isOpen: isDragging && provider != null,
-        nodeRef: loupeRef
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement($2b9adc23f6c7cae1$var$ColorLoupe, {
-        valueCSS: valueCSS,
-        containerRef: containerRef,
-        loupeRef: loupeRef,
-        style: style
-    })), children);
-}
-// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).
-function $2b9adc23f6c7cae1$var$ColorLoupe({ isOpen: isOpen, valueCSS: valueCSS, containerRef: containerRef, loupeRef: loupeRef, style: style }) {
-    let patternId = (0, $bRwD9$reactariautils.useId)();
-    // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).
-    let [containerRect, setContainerRect] = (0, $bRwD9$react.useState)({
-        top: 0,
-        left: 0,
-        width: 0,
-        height: 0
-    });
-    (0, $bRwD9$reactariautils.useLayoutEffect)(()=>{
-        var _containerRef_current;
-        let rect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect();
-        setContainerRect({
-            top: (rect === null || rect === void 0 ? void 0 : rect.top) || 0,
-            left: (rect === null || rect === void 0 ? void 0 : rect.left) || 0,
-            width: (rect === null || rect === void 0 ? void 0 : rect.width) || 0,
-            height: (rect === null || rect === void 0 ? void 0 : rect.height) || 0
-        });
-    }, [
-        containerRef
-    ]);
-    // Compute the pixel position of the thumb.
-    let thumbTop = style.top || '50%';
-    if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;
-    else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) thumbTop = parseFloat(thumbTop);
-    let thumbLeft = style.left || '50%';
-    if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;
-    else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) thumbLeft = parseFloat(thumbLeft);
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("svg", {
-        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe', {
-            'is-open': isOpen
-        }),
-        style: {
-            // Position relative to the viewport.
-            position: 'fixed',
-            top: containerRect.top + thumbTop,
-            left: containerRect.left + thumbLeft
-        },
-        ref: loupeRef,
-        "aria-hidden": "true"
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("pattern", {
-        id: patternId,
-        x: "0",
-        y: "0",
-        width: "16",
-        height: "16",
-        patternUnits: "userSpaceOnUse"
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("rect", {
-        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-inner-background'),
-        x: "0",
-        y: "0",
-        width: "16",
-        height: "16"
-    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("rect", {
-        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-inner-checker'),
-        x: "0",
-        y: "0",
-        width: "8",
-        height: "8"
-    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("rect", {
-        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-inner-checker'),
-        x: "8",
-        y: "8",
-        width: "8",
-        height: "8"
-    })), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("path", {
-        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-inner'),
-        d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
-        fill: `url(#${patternId})`
-    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("path", {
-        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-inner'),
-        d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
-        fill: valueCSS
-    }), /*#__PURE__*/ (0, ($parcel$interopDefault($bRwD9$react))).createElement("path", {
-        className: (0, $bRwD9$reactspectrumutils.classNames)((0, ($parcel$interopDefault($f65977ae56facfaa$exports))), 'spectrum-ColorLoupe-outer'),
-        d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
-    }));
-}
-
-
-//# sourceMappingURL=ColorThumb.main.js.map

package/dist/ColorThumb.main.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/@react-spectrum/color/src/ColorThumb.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {classNames} from '@react-spectrum/utils';\nimport {Color} from '@react-types/color';\nimport {DOMProps, RefObject} from '@react-types/shared';\nimport {Overlay} from '@react-spectrum/overlays';\nimport React, {CSSProperties, JSX, ReactElement, useRef, useState} from 'react';\nimport stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';\nimport stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';\nimport {useId, useLayoutEffect} from '@react-aria/utils';\nimport {useProvider} from '@react-spectrum/provider';\n\ninterface ColorThumbProps extends DOMProps {\n  value: Color,\n  isDisabled?: boolean,\n  isDragging?: boolean, // shows the color loupe\n  isFocused?: boolean, // makes the circle larger\n  className?: string,\n  children?: ReactElement,\n  style?: CSSProperties,\n  containerRef?: RefObject<HTMLElement | null>\n}\n\nfunction ColorThumb(props: ColorThumbProps): JSX.Element {\n  let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;\n\n  let valueCSS = value.toString('css');\n  let loupeRef = useRef<HTMLElement | null>(null);\n  let provider = useProvider();\n\n  return (\n    <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>\n      <div className={classNames(stylesHandle, 'spectrum-ColorHandle-color')} style={{backgroundColor: valueCSS}} />\n      <Overlay isOpen={isDragging && provider != null} nodeRef={loupeRef}>\n        <ColorLoupe valueCSS={valueCSS} containerRef={containerRef} loupeRef={loupeRef} style={style} />\n      </Overlay>\n      {children}\n    </div>\n  );\n}\n\n// ColorLoupe is rendered in a portal so that it breaks out of clipped/scrolling containers (e.g. popovers).\nfunction ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {\n  let patternId = useId();\n\n  // Get the bounding rectangle of the container (e.g. ColorArea/ColorSlider).\n  let [containerRect, setContainerRect] = useState({top: 0, left: 0, width: 0, height: 0});\n  useLayoutEffect(() => {\n    let rect = containerRef.current?.getBoundingClientRect();\n    setContainerRect({\n      top: rect?.top || 0,\n      left: rect?.left || 0,\n      width: rect?.width || 0,\n      height: rect?.height || 0\n    });\n  }, [containerRef]);\n\n  // Compute the pixel position of the thumb.\n  let thumbTop = style.top || '50%';\n  if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {\n    thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;\n  } else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) {\n    thumbTop = parseFloat(thumbTop);\n  }\n\n  let thumbLeft = style.left || '50%';\n  if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {\n    thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;\n  } else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) {\n    thumbLeft = parseFloat(thumbLeft);\n  }\n\n  return (\n    <svg\n      className={classNames(stylesLoupe, 'spectrum-ColorLoupe',  {'is-open': isOpen})}\n      style={{\n        // Position relative to the viewport.\n        position: 'fixed',\n        top: containerRect.top + thumbTop,\n        left: containerRect.left + thumbLeft\n      }}\n      ref={loupeRef}\n      aria-hidden=\"true\">\n      <pattern id={patternId} x=\"0\" y=\"0\" width=\"16\" height=\"16\" patternUnits=\"userSpaceOnUse\">\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-background')} x=\"0\" y=\"0\" width=\"16\" height=\"16\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"0\" y=\"0\" width=\"8\" height=\"8\" />\n        <rect className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner-checker')} x=\"8\" y=\"8\" width=\"8\" height=\"8\" />\n      </pattern>\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={`url(#${patternId})`} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-inner')}\n        d=\"M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\"\n        fill={valueCSS} />\n      <path\n        className={classNames(stylesLoupe, 'spectrum-ColorLoupe-outer')}\n        d=\"M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z\" />\n    </svg>\n  );\n}\n\nexport {ColorThumb};\n"],"names":[],"version":3,"file":"ColorThumb.main.js.map"}