@react-spectrum/color 3.0.2 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ColorArea.main.js +2 -5
- package/dist/ColorArea.main.js.map +1 -1
- package/dist/ColorArea.mjs +2 -5
- package/dist/ColorArea.module.js +2 -5
- package/dist/ColorArea.module.js.map +1 -1
- package/dist/ColorEditor.main.js +2 -5
- package/dist/ColorEditor.main.js.map +1 -1
- package/dist/ColorEditor.mjs +2 -5
- package/dist/ColorEditor.module.js +2 -5
- package/dist/ColorEditor.module.js.map +1 -1
- package/dist/ColorField.main.js +2 -5
- package/dist/ColorField.main.js.map +1 -1
- package/dist/ColorField.mjs +2 -5
- package/dist/ColorField.module.js +2 -5
- package/dist/ColorField.module.js.map +1 -1
- package/dist/ColorPicker.main.js +2 -5
- package/dist/ColorPicker.main.js.map +1 -1
- package/dist/ColorPicker.mjs +2 -5
- package/dist/ColorPicker.module.js +2 -5
- package/dist/ColorPicker.module.js.map +1 -1
- package/dist/ColorSlider.main.js +3 -6
- package/dist/ColorSlider.main.js.map +1 -1
- package/dist/ColorSlider.mjs +3 -6
- package/dist/ColorSlider.module.js +3 -6
- package/dist/ColorSlider.module.js.map +1 -1
- package/dist/ColorSwatch.main.js +2 -5
- package/dist/ColorSwatch.main.js.map +1 -1
- package/dist/ColorSwatch.mjs +3 -6
- package/dist/ColorSwatch.module.js +3 -6
- package/dist/ColorSwatch.module.js.map +1 -1
- package/dist/ColorSwatchPicker.main.js +2 -5
- package/dist/ColorSwatchPicker.main.js.map +1 -1
- package/dist/ColorSwatchPicker.mjs +2 -5
- package/dist/ColorSwatchPicker.module.js +2 -5
- package/dist/ColorSwatchPicker.module.js.map +1 -1
- package/dist/ColorWheel.main.js +2 -5
- package/dist/ColorWheel.main.js.map +1 -1
- package/dist/ColorWheel.mjs +2 -5
- package/dist/ColorWheel.module.js +2 -5
- package/dist/ColorWheel.module.js.map +1 -1
- package/dist/types.d.ts +7 -7
- package/dist/types.d.ts.map +1 -1
- package/dist/{vars.d78ec0e6.css → vars.a54898d8.css} +2 -2
- package/dist/{vars.d78ec0e6.css.map → vars.a54898d8.css.map} +1 -1
- package/package.json +20 -20
- package/src/ColorArea.tsx +5 -8
- package/src/ColorEditor.tsx +5 -8
- package/src/ColorField.tsx +5 -8
- package/src/ColorPicker.tsx +5 -8
- package/src/ColorSlider.tsx +5 -8
- package/src/ColorSwatch.tsx +5 -8
- package/src/ColorSwatchPicker.tsx +5 -8
- package/src/ColorWheel.tsx +5 -8
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ColorThumb as $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc} from "./ColorThumb.module.js";
|
|
2
|
-
import "./vars.
|
|
2
|
+
import "./vars.a54898d8.css";
|
|
3
3
|
import $fxUYb$colorslider_vars_cssmodulejs from "./colorslider_vars_css.module.js";
|
|
4
4
|
import {useFocusableRef as $fxUYb$useFocusableRef, useStyleProps as $fxUYb$useStyleProps, classNames as $fxUYb$classNames, SlotProvider as $fxUYb$SlotProvider} from "@react-spectrum/utils";
|
|
5
5
|
import {useContextProps as $fxUYb$useContextProps, ColorSliderContext as $fxUYb$ColorSliderContext} from "react-aria-components";
|
|
@@ -36,7 +36,7 @@ function $parcel$interopDefault(a) {
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
const $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $fxUYb$react).forwardRef(function ColorSlider(props, ref) {
|
|
40
40
|
props = (0, $fxUYb$useProviderProps)(props);
|
|
41
41
|
let inputRef = (0, $fxUYb$useRef)(null);
|
|
42
42
|
let trackRef = (0, $fxUYb$useRef)(null);
|
|
@@ -114,10 +114,7 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
|
|
|
114
114
|
ref: inputRef,
|
|
115
115
|
className: (0, $fxUYb$classNames)((0, ($parcel$interopDefault($fxUYb$colorslider_vars_cssmodulejs))), 'spectrum-ColorSlider-slider')
|
|
116
116
|
}))));
|
|
117
|
-
}
|
|
118
|
-
/**
|
|
119
|
-
* ColorSliders allow users to adjust an individual channel of a color value.
|
|
120
|
-
*/ let $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $fxUYb$react).forwardRef($3870e4ce67ed7ee1$var$ColorSlider);
|
|
117
|
+
});
|
|
121
118
|
|
|
122
119
|
|
|
123
120
|
export {$3870e4ce67ed7ee1$export$44fd664bcca5b6fb as ColorSlider};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AAmBM,MAAM,0DAAc,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,YAAY,KAA+B,EAAE,GAAiC;IACjI,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE,KAAK;IAClC,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,yBAAiB;IAElE,IAAI,cACF,UAAU,WACV,OAAO,eACP,WAAW,SACX,KAAK,kBACL,cAAc,EACd,cAAc,SAAS,EACxB,GAAG;IACJ,IAAI,WAAW,gBAAgB;IAE/B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAEvB,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;QAAC,GAAG,KAAK;gBAAE;IAAM;IAEjD,wEAAwE;IACxE,IAAI,YAAY,OAAO;QACrB,YAAY,aAAc,CAAA,OAAO,UAAU,WAAW,QAAQ,SAAQ;QACtE,QAAQ;IACV;IAEA,mEAAmE;IACnE,qDAAqD;IACrD,8FAA8F;IAC9F,mEAAmE;IACnE,IAAI,UAAU,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,kBAAkB,IAAI,CAAC,UACrE,QAAQ,MAAM,KAAK,CAAC,cAAc,CAAC,SAAS;IAG9C,8DAA8D;IAC9D,IAAI,kBAAkB,MACpB,iBAAiB,CAAC,CAAC;IAGrB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,cAAE,UAAU,eAAE,WAAW,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACjF,GAAG,KAAK;eACR;QACA,cAAc;kBACd;kBACA;IACF,GAAG;IAEH,IAAI,kBAAC,cAAc,EAAC,GAAG,CAAA,GAAA,sBAAc;IACrC,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,eAAO,EAAE;IACzC,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;oBAC1B;QACA,eAAe;IACjB;IAEA,qBACE,gCAAC;QACC,KAAK;QACJ,GAAG,UAAU;QACd,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,6DAAK,GACL;YACE,8CAA8C,CAAC;YAC/C,4CAA4C;QAC9C;OAED,uBACC,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAK,GAAG;qBACjC,gCAAC,CAAA,GAAA,YAAI,GAAM,YAAa,QACvB,MAAM,cAAc,kBACnB,gCAAC,CAAA,GAAA,mBAAW;QACV,OAAO;YACL,cAAc;gBACZ,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAK,GAAG;YACvC;QACF;OACC,MAAM,cAAc,GAGxB,gCACC,gCAAC,CAAA,GAAA,YAAI;QAAE,aAAY;QAAO,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAK,GAAG;qBAC7D,gCAAC,UAAW,aAAc,MAAM,KAAK,CAAC,kBAAkB,CAAC,SAAS,0BAK1E,gCAAC;QACE,GAAG,UAAU;QACd,KAAK;QACL,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,6DAAK,GACL,wBAAwB;YACtB,eAAe;YACf,kCAAkC;QACpC;qBAGF,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW,aAAa;QACxB,YAAY;QACZ,YAAY,MAAM,eAAe,CAAC;QAClC,cAAc;QACd,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QAAO,GAAG,UAAU;QAAG,GAAG,UAAU;QAAE,KAAK;QAAU,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,6DAAK,GAAG;;AAK9F","sources":["packages/@react-spectrum/color/src/ColorSlider.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, SlotProvider, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorSliderContext, useContextProps} from 'react-aria-components';\nimport {ColorThumb} from './ColorThumb';\nimport {FocusableRef} from '@react-types/shared';\nimport {Label} from '@react-spectrum/label';\nimport React, {useRef, useState} from 'react';\nimport {SpectrumColorSliderProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorslider/vars.css';\nimport {useColorSlider} from '@react-aria/color';\nimport {useColorSliderState} from '@react-stately/color';\nimport {useFocus, useFocusVisible} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProviderProps} from '@react-spectrum/provider';\n\n/**\n * ColorSliders allow users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = React.forwardRef(function ColorSlider(props: SpectrumColorSliderProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let trackRef = useRef(null);\n let domRef = useFocusableRef(ref, inputRef);\n [props, domRef] = useContextProps(props, domRef, ColorSliderContext);\n\n let {\n isDisabled,\n channel,\n orientation,\n label,\n showValueLabel,\n 'aria-label': ariaLabel\n } = props;\n let vertical = orientation === 'vertical';\n\n let {styleProps} = useStyleProps(props);\n let {locale} = useLocale();\n\n let state = useColorSliderState({...props, locale});\n\n // If vertical and a label is provided, use it as an aria-label instead.\n if (vertical && label) {\n ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);\n label = null;\n }\n\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 if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) {\n label = state.value.getChannelName(channel, locale);\n }\n\n // Show the value label by default if there is a visible label\n if (showValueLabel == null) {\n showValueLabel = !!label;\n }\n\n let {inputProps, thumbProps, trackProps, labelProps, outputProps} = useColorSlider({\n ...props,\n label,\n 'aria-label': ariaLabel,\n trackRef,\n inputRef\n }, state);\n\n let {isFocusVisible} = useFocusVisible();\n let [isFocused, setIsFocused] = useState(false);\n let {focusProps} = useFocus({\n isDisabled,\n onFocusChange: setIsFocused\n });\n\n return (\n <div\n ref={domRef}\n {...styleProps}\n className={classNames(\n styles,\n {\n 'spectrum-ColorSlider-container--horizontal': !vertical,\n 'spectrum-ColorSlider-container--vertical': vertical\n }\n )}>\n {label &&\n <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>\n <Label {...labelProps}>{label}</Label>\n {props.contextualHelp &&\n <SlotProvider\n slots={{\n actionButton: {\n UNSAFE_className: classNames(styles, 'spectrum-ColorSlider-contextualHelp')\n }\n }}>\n {props.contextualHelp}\n </SlotProvider>\n }\n {showValueLabel && (\n <Label elementType=\"span\" UNSAFE_className={classNames(styles, 'spectrum-ColorSlider-valueLabel')}>\n <output {...outputProps}>{state.value.formatChannelValue(channel, locale)}</output>\n </Label>\n )}\n </div>\n }\n <div\n {...trackProps}\n ref={trackRef}\n className={classNames(\n styles,\n 'spectrum-ColorSlider', {\n 'is-disabled': isDisabled,\n 'spectrum-ColorSlider--vertical': vertical\n }\n )\n }>\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocused && isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isThumbDragging(0)}\n containerRef={trackRef}\n className={classNames(styles, 'spectrum-ColorSlider-handle')}\n {...thumbProps}>\n <input {...inputProps} {...focusProps} ref={inputRef} className={classNames(styles, 'spectrum-ColorSlider-slider')} />\n </ColorThumb>\n </div>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorSlider.module.js.map"}
|
package/dist/ColorSwatch.main.js
CHANGED
|
@@ -30,7 +30,7 @@ $parcel$export(module.exports, "ColorSwatch", () => $f076f5c85640192a$export$cae
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
const $f076f5c85640192a$export$8529d7908a78c058 = /*#__PURE__*/ (0, $ikjCA$react.createContext)(null);
|
|
33
|
-
|
|
33
|
+
const $f076f5c85640192a$export$cae13e90592f246a = /*#__PURE__*/ (0, $ikjCA$react.forwardRef)(function ColorSwatch(props, ref) {
|
|
34
34
|
let domRef = (0, $ikjCA$reactspectrumutils.useDOMRef)(ref);
|
|
35
35
|
[props, domRef] = (0, $ikjCA$reactariacomponents.useContextProps)(props, domRef, (0, $ikjCA$reactariacomponents.ColorSwatchContext));
|
|
36
36
|
let { colorSwatchProps: colorSwatchProps, color: color } = (0, $ikjCA$reactariacolor.useColorSwatch)(props);
|
|
@@ -85,10 +85,7 @@ function $f076f5c85640192a$var$ColorSwatch(props, ref) {
|
|
|
85
85
|
// ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
|
|
86
86
|
if (ctx) return ctx.useWrapper(swatch, color, rounding);
|
|
87
87
|
return swatch;
|
|
88
|
-
}
|
|
89
|
-
/**
|
|
90
|
-
* A ColorSwatch displays a preview of a selected color.
|
|
91
|
-
*/ let $f076f5c85640192a$export$cae13e90592f246a = /*#__PURE__*/ (0, $ikjCA$react.forwardRef)($f076f5c85640192a$var$ColorSwatch);
|
|
88
|
+
});
|
|
92
89
|
|
|
93
90
|
|
|
94
91
|
//# sourceMappingURL=ColorSwatch.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AA2BM,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AA2BM,MAAM,0DAA6B,CAAA,GAAA,0BAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAA+B,EAAE,GAA2B;IACrH,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,6CAAiB;IAClE,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,oCAAa,EAAE;IAC/C,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IACjC,IAAI,MAAM,CAAA,GAAA,uBAAS,EAAE;IACrB,IAAI,QACF,OAAO,CAAA,gBAAA,0BAAA,IAAK,IAAI,KAAI,eACpB,WAAW,CAAA,gBAAA,0BAAA,IAAK,QAAQ,KAAI,WAC7B,GAAG;IAEJ,IAAI,uBACF,0DAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,UAAU;QACd,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,oFAAoF;YACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;QACN;QACA,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuB/B;kBAAC;sBAAM;QAAQ;;IAGtB,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/color/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 {AriaColorSwatchProps, useColorSwatch} from '@react-aria/color';\nimport {Color} from '@react-types/color';\nimport {ColorSwatchContext, useContextProps} from 'react-aria-components';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef, useStyleProps} from '@react-spectrum/utils';\n\nexport interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {\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}\n\ninterface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps, 'size' | 'rounding'> {\n useWrapper: (swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n let domRef = useDOMRef(ref);\n [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);\n let {colorSwatchProps, color} = useColorSwatch(props);\n let {styleProps} = useStyleProps(props);\n let ctx = useContext(SpectrumColorSwatchContext);\n let {\n size = ctx?.size || 'M',\n rounding = ctx?.rounding || 'default'\n } = props;\n\n let swatch = (\n <div\n {...colorSwatchProps}\n {...styleProps}\n ref={domRef}\n style={{\n ...styleProps.style,\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(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n }}\n className={styleProps.className + style({\n size: {\n size: {\n XS: 4,\n S: 6,\n M: 8,\n L: 10\n }\n },\n borderRadius: {\n rounding: {\n default: 'default',\n none: 'none',\n full: 'full'\n }\n },\n // Trick to create a partially transparent color from a variable.\n // Ideally we'd use relative color syntax for this but it's not in Firefox yet.\n borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',\n borderWidth: 1,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n forcedColorAdjust: 'none'\n })({size, rounding})} />\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.main.js.map"}
|
package/dist/ColorSwatch.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "./ColorSwatch.fabed858.css";
|
|
2
2
|
import {useColorSwatch as $5Pjc1$useColorSwatch} from "@react-aria/color";
|
|
3
3
|
import {useContextProps as $5Pjc1$useContextProps, ColorSwatchContext as $5Pjc1$ColorSwatchContext} from "react-aria-components";
|
|
4
|
-
import $5Pjc1$react, {createContext as $5Pjc1$createContext,
|
|
4
|
+
import $5Pjc1$react, {createContext as $5Pjc1$createContext, forwardRef as $5Pjc1$forwardRef, useContext as $5Pjc1$useContext} from "react";
|
|
5
5
|
import {useDOMRef as $5Pjc1$useDOMRef, useStyleProps as $5Pjc1$useStyleProps} from "@react-spectrum/utils";
|
|
6
6
|
|
|
7
7
|
/*
|
|
@@ -19,7 +19,7 @@ import {useDOMRef as $5Pjc1$useDOMRef, useStyleProps as $5Pjc1$useStyleProps} fr
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
const $d68786ae409fa722$export$8529d7908a78c058 = /*#__PURE__*/ (0, $5Pjc1$createContext)(null);
|
|
22
|
-
|
|
22
|
+
const $d68786ae409fa722$export$cae13e90592f246a = /*#__PURE__*/ (0, $5Pjc1$forwardRef)(function ColorSwatch(props, ref) {
|
|
23
23
|
let domRef = (0, $5Pjc1$useDOMRef)(ref);
|
|
24
24
|
[props, domRef] = (0, $5Pjc1$useContextProps)(props, domRef, (0, $5Pjc1$ColorSwatchContext));
|
|
25
25
|
let { colorSwatchProps: colorSwatchProps, color: color } = (0, $5Pjc1$useColorSwatch)(props);
|
|
@@ -74,10 +74,7 @@ function $d68786ae409fa722$var$ColorSwatch(props, ref) {
|
|
|
74
74
|
// ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
|
|
75
75
|
if (ctx) return ctx.useWrapper(swatch, color, rounding);
|
|
76
76
|
return swatch;
|
|
77
|
-
}
|
|
78
|
-
/**
|
|
79
|
-
* A ColorSwatch displays a preview of a selected color.
|
|
80
|
-
*/ let $d68786ae409fa722$export$cae13e90592f246a = /*#__PURE__*/ (0, $5Pjc1$forwardRef)($d68786ae409fa722$var$ColorSwatch);
|
|
77
|
+
});
|
|
81
78
|
|
|
82
79
|
|
|
83
80
|
export {$d68786ae409fa722$export$8529d7908a78c058 as SpectrumColorSwatchContext, $d68786ae409fa722$export$cae13e90592f246a as ColorSwatch};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "./ColorSwatch.fabed858.css";
|
|
2
2
|
import {useColorSwatch as $5Pjc1$useColorSwatch} from "@react-aria/color";
|
|
3
3
|
import {useContextProps as $5Pjc1$useContextProps, ColorSwatchContext as $5Pjc1$ColorSwatchContext} from "react-aria-components";
|
|
4
|
-
import $5Pjc1$react, {createContext as $5Pjc1$createContext,
|
|
4
|
+
import $5Pjc1$react, {createContext as $5Pjc1$createContext, forwardRef as $5Pjc1$forwardRef, useContext as $5Pjc1$useContext} from "react";
|
|
5
5
|
import {useDOMRef as $5Pjc1$useDOMRef, useStyleProps as $5Pjc1$useStyleProps} from "@react-spectrum/utils";
|
|
6
6
|
|
|
7
7
|
/*
|
|
@@ -19,7 +19,7 @@ import {useDOMRef as $5Pjc1$useDOMRef, useStyleProps as $5Pjc1$useStyleProps} fr
|
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
const $d68786ae409fa722$export$8529d7908a78c058 = /*#__PURE__*/ (0, $5Pjc1$createContext)(null);
|
|
22
|
-
|
|
22
|
+
const $d68786ae409fa722$export$cae13e90592f246a = /*#__PURE__*/ (0, $5Pjc1$forwardRef)(function ColorSwatch(props, ref) {
|
|
23
23
|
let domRef = (0, $5Pjc1$useDOMRef)(ref);
|
|
24
24
|
[props, domRef] = (0, $5Pjc1$useContextProps)(props, domRef, (0, $5Pjc1$ColorSwatchContext));
|
|
25
25
|
let { colorSwatchProps: colorSwatchProps, color: color } = (0, $5Pjc1$useColorSwatch)(props);
|
|
@@ -74,10 +74,7 @@ function $d68786ae409fa722$var$ColorSwatch(props, ref) {
|
|
|
74
74
|
// ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
|
|
75
75
|
if (ctx) return ctx.useWrapper(swatch, color, rounding);
|
|
76
76
|
return swatch;
|
|
77
|
-
}
|
|
78
|
-
/**
|
|
79
|
-
* A ColorSwatch displays a preview of a selected color.
|
|
80
|
-
*/ let $d68786ae409fa722$export$cae13e90592f246a = /*#__PURE__*/ (0, $5Pjc1$forwardRef)($d68786ae409fa722$var$ColorSwatch);
|
|
77
|
+
});
|
|
81
78
|
|
|
82
79
|
|
|
83
80
|
export {$d68786ae409fa722$export$8529d7908a78c058 as SpectrumColorSwatchContext, $d68786ae409fa722$export$cae13e90592f246a as ColorSwatch};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;AA2BM,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;
|
|
1
|
+
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;AA2BM,MAAM,0DAA6B,CAAA,GAAA,oBAAY,EAA0C;AAKzF,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAA+B,EAAE,GAA2B;IACrH,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,CAAC,OAAO,OAAO,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,QAAQ,CAAA,GAAA,yBAAiB;IAClE,IAAI,oBAAC,gBAAgB,SAAE,KAAK,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;IAC/C,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,MAAM,CAAA,GAAA,iBAAS,EAAE;IACrB,IAAI,QACF,OAAO,CAAA,gBAAA,0BAAA,IAAK,IAAI,KAAI,eACpB,WAAW,CAAA,gBAAA,0BAAA,IAAK,QAAQ,KAAI,WAC7B,GAAG;IAEJ,IAAI,uBACF,gCAAC;QACE,GAAG,gBAAgB;QACnB,GAAG,UAAU;QACd,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,oFAAoF;YACpF,YAAY,MAAM,eAAe,CAAC,WAAW,IACzC,CAAC,gBAAgB,EAAE,MAAM,EAAE,EAAE,MAAM,4EAA4E,CAAC,GAEhH;QACN;QACA,WAAW,WAAW,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuB/B;kBAAC;sBAAM;QAAQ;;IAGtB,+DAA+D;IAC/D,IAAI,KACF,OAAO,IAAI,UAAU,CAAC,QAAQ,OAAO;IAGvC,OAAO;AACT","sources":["packages/@react-spectrum/color/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 {AriaColorSwatchProps, useColorSwatch} from '@react-aria/color';\nimport {Color} from '@react-types/color';\nimport {ColorSwatchContext, useContextProps} from 'react-aria-components';\nimport {DOMRef, StyleProps} from '@react-types/shared';\nimport React, {createContext, forwardRef, JSX, ReactElement, useContext} from 'react';\nimport {style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {useDOMRef, useStyleProps} from '@react-spectrum/utils';\n\nexport interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StyleProps {\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}\n\ninterface SpectrumColorSwatchContextValue extends Pick<SpectrumColorSwatchProps, 'size' | 'rounding'> {\n useWrapper: (swatch: ReactElement, color: Color, rounding: SpectrumColorSwatchProps['rounding']) => JSX.Element\n}\n\nexport const SpectrumColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);\n\n/**\n * A ColorSwatch displays a preview of a selected color.\n */\nexport const ColorSwatch = forwardRef(function ColorSwatch(props: SpectrumColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {\n let domRef = useDOMRef(ref);\n [props, domRef] = useContextProps(props, domRef, ColorSwatchContext);\n let {colorSwatchProps, color} = useColorSwatch(props);\n let {styleProps} = useStyleProps(props);\n let ctx = useContext(SpectrumColorSwatchContext);\n let {\n size = ctx?.size || 'M',\n rounding = ctx?.rounding || 'default'\n } = props;\n\n let swatch = (\n <div\n {...colorSwatchProps}\n {...styleProps}\n ref={domRef}\n style={{\n ...styleProps.style,\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(--spectrum-red-900) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat'\n }}\n className={styleProps.className + style({\n size: {\n size: {\n XS: 4,\n S: 6,\n M: 8,\n L: 10\n }\n },\n borderRadius: {\n rounding: {\n default: 'default',\n none: 'none',\n full: 'full'\n }\n },\n // Trick to create a partially transparent color from a variable.\n // Ideally we'd use relative color syntax for this but it's not in Firefox yet.\n borderColor: '[color-mix(in srgb, var(--spectrum-gray-900), transparent 49%)]',\n borderWidth: 1,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n forcedColorAdjust: 'none'\n })({size, rounding})} />\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.module.js.map"}
|
|
@@ -28,7 +28,7 @@ $parcel$export(module.exports, "ColorSwatchPicker", () => $ba9a184bcae9b225$expo
|
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
const $ba9a184bcae9b225$export$b46792416e3d8515 = /*#__PURE__*/ (0, $iY2T3$react.forwardRef)(function ColorSwatchPicker(props, ref) {
|
|
32
32
|
let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
|
|
33
33
|
let { styleProps: styleProps } = (0, $iY2T3$reactspectrumutils.useStyleProps)(props);
|
|
34
34
|
let domRef = (0, $iY2T3$reactspectrumutils.useDOMRef)(ref);
|
|
@@ -57,10 +57,7 @@ function $ba9a184bcae9b225$var$ColorSwatchPicker(props, ref) {
|
|
|
57
57
|
rounding: rounding
|
|
58
58
|
}
|
|
59
59
|
}, props.children));
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
|
|
63
|
-
*/ let $ba9a184bcae9b225$export$b46792416e3d8515 = /*#__PURE__*/ (0, $iY2T3$react.forwardRef)($ba9a184bcae9b225$var$ColorSwatchPicker);
|
|
60
|
+
});
|
|
64
61
|
function $ba9a184bcae9b225$var$useWrapper(swatch, color, rounding) {
|
|
65
62
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($iY2T3$react))).createElement((0, $iY2T3$reactariacomponents.ColorSwatchPickerItem), {
|
|
66
63
|
color: color,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;
|
|
1
|
+
{"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"}
|
|
@@ -18,7 +18,7 @@ import {useStyleProps as $1TpDU$useStyleProps, useDOMRef as $1TpDU$useDOMRef} fr
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
const $4919bc07654f325c$export$b46792416e3d8515 = /*#__PURE__*/ (0, $1TpDU$forwardRef)(function ColorSwatchPicker(props, ref) {
|
|
22
22
|
let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
|
|
23
23
|
let { styleProps: styleProps } = (0, $1TpDU$useStyleProps)(props);
|
|
24
24
|
let domRef = (0, $1TpDU$useDOMRef)(ref);
|
|
@@ -47,10 +47,7 @@ function $4919bc07654f325c$var$ColorSwatchPicker(props, ref) {
|
|
|
47
47
|
rounding: rounding
|
|
48
48
|
}
|
|
49
49
|
}, props.children));
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
|
|
53
|
-
*/ let $4919bc07654f325c$export$b46792416e3d8515 = /*#__PURE__*/ (0, $1TpDU$forwardRef)($4919bc07654f325c$var$ColorSwatchPicker);
|
|
50
|
+
});
|
|
54
51
|
function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
|
|
55
52
|
return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPickerItem), {
|
|
56
53
|
color: color,
|
|
@@ -18,7 +18,7 @@ import {useStyleProps as $1TpDU$useStyleProps, useDOMRef as $1TpDU$useDOMRef} fr
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
const $4919bc07654f325c$export$b46792416e3d8515 = /*#__PURE__*/ (0, $1TpDU$forwardRef)(function ColorSwatchPicker(props, ref) {
|
|
22
22
|
let { density: density = 'regular', size: size = 'M', rounding: rounding = 'none', ...otherProps } = props;
|
|
23
23
|
let { styleProps: styleProps } = (0, $1TpDU$useStyleProps)(props);
|
|
24
24
|
let domRef = (0, $1TpDU$useDOMRef)(ref);
|
|
@@ -47,10 +47,7 @@ function $4919bc07654f325c$var$ColorSwatchPicker(props, ref) {
|
|
|
47
47
|
rounding: rounding
|
|
48
48
|
}
|
|
49
49
|
}, props.children));
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
|
|
53
|
-
*/ let $4919bc07654f325c$export$b46792416e3d8515 = /*#__PURE__*/ (0, $1TpDU$forwardRef)($4919bc07654f325c$var$ColorSwatchPicker);
|
|
50
|
+
});
|
|
54
51
|
function $4919bc07654f325c$var$useWrapper(swatch, color, rounding) {
|
|
55
52
|
return /*#__PURE__*/ (0, $1TpDU$react).createElement((0, $1TpDU$ColorSwatchPickerItem), {
|
|
56
53
|
color: color,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;
|
|
1
|
+
{"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/ColorWheel.main.js
CHANGED
|
@@ -41,7 +41,7 @@ $parcel$export(module.exports, "ColorWheel", () => $63a2864687444ae1$export$f806
|
|
|
41
41
|
|
|
42
42
|
|
|
43
43
|
const $63a2864687444ae1$var$WHEEL_THICKNESS = 24;
|
|
44
|
-
|
|
44
|
+
const $63a2864687444ae1$export$f80663f808113381 = /*#__PURE__*/ (0, ($parcel$interopDefault($gEgjt$react))).forwardRef(function ColorWheel(props, ref) {
|
|
45
45
|
props = (0, $gEgjt$reactspectrumprovider.useProviderProps)(props);
|
|
46
46
|
let inputRef = (0, $gEgjt$react.useRef)(null);
|
|
47
47
|
let containerRef = (0, $gEgjt$reactspectrumutils.useFocusableRef)(ref, inputRef);
|
|
@@ -108,10 +108,7 @@ function $63a2864687444ae1$var$ColorWheel(props, ref) {
|
|
|
108
108
|
...inputProps,
|
|
109
109
|
ref: inputRef
|
|
110
110
|
})));
|
|
111
|
-
}
|
|
112
|
-
/**
|
|
113
|
-
* ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
|
|
114
|
-
*/ let $63a2864687444ae1$export$f80663f808113381 = /*#__PURE__*/ (0, ($parcel$interopDefault($gEgjt$react))).forwardRef($63a2864687444ae1$var$ColorWheel);
|
|
111
|
+
});
|
|
115
112
|
|
|
116
113
|
|
|
117
114
|
//# sourceMappingURL=ColorWheel.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,MAAM,wCAAkB;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAiC;IAC9H,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,yCAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,0CAAc,EAAE,OAAO,cAAc,CAAA,GAAA,4CAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,wCAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAGjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,wBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OAAO,gBAAgB,CAAC,aAAa,OAAO,EACzD,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,sBAAQ,EAAE;QACR,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,uCAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,2CAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mCAAY,EAAE;QACvD,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GAAG,OAAO;IAEV,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,kCAAW;IAE9C,qBACE,0DAAC;QACC,WACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,SAAS;YACT,UAAU;QACZ;qBACA,0DAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBACnD,0DAAC,CAAA,GAAA,oCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,0DAAC;QAAO,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAAgC,GAAG,UAAU;QAAE,KAAK;;AAIjH","sources":["packages/@react-spectrum/color/src/ColorWheel.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, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext, useContextProps} from 'react-aria-components';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window.getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel({\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n 'width': size,\n 'height': size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.main.js.map"}
|
package/dist/ColorWheel.mjs
CHANGED
|
@@ -35,7 +35,7 @@ function $parcel$interopDefault(a) {
|
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
const $3aac1c27203f04b5$var$WHEEL_THICKNESS = 24;
|
|
38
|
-
|
|
38
|
+
const $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ (0, $bv4AR$react).forwardRef(function ColorWheel(props, ref) {
|
|
39
39
|
props = (0, $bv4AR$useProviderProps)(props);
|
|
40
40
|
let inputRef = (0, $bv4AR$useRef)(null);
|
|
41
41
|
let containerRef = (0, $bv4AR$useFocusableRef)(ref, inputRef);
|
|
@@ -102,10 +102,7 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
|
|
|
102
102
|
...inputProps,
|
|
103
103
|
ref: inputRef
|
|
104
104
|
})));
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
* ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
|
|
108
|
-
*/ let $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ (0, $bv4AR$react).forwardRef($3aac1c27203f04b5$var$ColorWheel);
|
|
105
|
+
});
|
|
109
106
|
|
|
110
107
|
|
|
111
108
|
export {$3aac1c27203f04b5$export$f80663f808113381 as ColorWheel};
|
|
@@ -35,7 +35,7 @@ function $parcel$interopDefault(a) {
|
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
const $3aac1c27203f04b5$var$WHEEL_THICKNESS = 24;
|
|
38
|
-
|
|
38
|
+
const $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ (0, $bv4AR$react).forwardRef(function ColorWheel(props, ref) {
|
|
39
39
|
props = (0, $bv4AR$useProviderProps)(props);
|
|
40
40
|
let inputRef = (0, $bv4AR$useRef)(null);
|
|
41
41
|
let containerRef = (0, $bv4AR$useFocusableRef)(ref, inputRef);
|
|
@@ -102,10 +102,7 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
|
|
|
102
102
|
...inputProps,
|
|
103
103
|
ref: inputRef
|
|
104
104
|
})));
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
* ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
|
|
108
|
-
*/ let $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ (0, $bv4AR$react).forwardRef($3aac1c27203f04b5$var$ColorWheel);
|
|
105
|
+
});
|
|
109
106
|
|
|
110
107
|
|
|
111
108
|
export {$3aac1c27203f04b5$export$f80663f808113381 as ColorWheel};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,MAAM,wCAAkB;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAeD,MAAM,wCAAkB;AAKjB,MAAM,0DAAa,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC,SAAS,WAAW,KAA8B,EAAE,GAAiC;IAC9H,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,eAAe,CAAA,GAAA,sBAAc,EAAE,KAAK;IACxC,CAAC,OAAO,aAAa,GAAG,CAAA,GAAA,sBAAc,EAAE,OAAO,cAAc,CAAA,GAAA,wBAAgB;IAE7E,IAAI,cAAC,UAAU,EAAC,GAAG;IACnB,IAAI,OAAO,MAAM,IAAI,IAAI,CAAA,GAAA,qBAAa,EAAE,MAAM,IAAI;IAClD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAGjC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO,EAAU;IACrD,IAAI,CAAC,gBAAgB,kBAAkB,GAAG,CAAA,GAAA,eAAO,EAAE;IAEnD,IAAI,gBAAgB,CAAA,GAAA,kBAAU,EAAE;QAC9B,IAAI,aAAa,OAAO,EAAE;YACxB,eAAe,aAAa,OAAO,CAAC,WAAW,GAAG;YAClD,IAAI,YAAY,OAAO,gBAAgB,CAAC,aAAa,OAAO,EACzD,gBAAgB,CAAC;YACpB,IAAI,WACF,kBAAkB,SAAS,WAAW;QAE1C;IACF,GAAG;QAAC;QAAc;QAAgB;KAAkB;IAEpD,CAAA,GAAA,gBAAQ,EAAE;QACR,gFAAgF;QAChF,IAAI,gBAAgB,GAClB;IAEJ,GAAG;QAAC;QAAa;KAAc;IAE/B,CAAA,GAAA,wBAAgB,EAAE;QAChB,KAAK;QACL,UAAU;IACZ;IAEA,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAE/B,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;QACvD,GAAG,KAAK;QACR,aAAa,cAAc;QAC3B,aAAa;IACf,GAAG,OAAO;IAEV,IAAI,cAAC,UAAU,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,qBACE,gCAAC;QACC,WACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,4DAAK,GACL,uBACA;YACE,eAAe;QACjB,GACA,WAAW,SAAS;QAGxB,KAAK;QACL,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,sEAAsE;YACtE,SAAS;YACT,UAAU;QACZ;qBACA,gCAAC;QAAK,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAK,GAAG;sBACnD,gCAAC,CAAA,GAAA,wCAAS;QACR,OAAO,MAAM,eAAe;QAC5B,WAAW;QACX,YAAY;QACZ,YAAY,MAAM,UAAU;QAC5B,cAAc;QACd,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAK,GAAG;QAC7B,GAAG,UAAU;qBACd,gCAAC;QAAO,GAAG,UAAU;QAAE,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,4DAAK,GAAG;QAAgC,GAAG,UAAU;QAAE,KAAK;;AAIjH","sources":["packages/@react-spectrum/color/src/ColorWheel.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, dimensionValue, useFocusableRef, useStyleProps} from '@react-spectrum/utils';\nimport {ColorThumb} from './ColorThumb';\nimport {ColorWheelContext, useContextProps} from 'react-aria-components';\nimport {FocusableRef} from '@react-types/shared';\nimport React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {SpectrumColorWheelProps} from '@react-types/color';\nimport styles from '@adobe/spectrum-css-temp/components/colorwheel/vars.css';\nimport {useColorWheel} from '@react-aria/color';\nimport {useColorWheelState} from '@react-stately/color';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useResizeObserver} from '@react-aria/utils';\n\nconst WHEEL_THICKNESS = 24;\n\n/**\n * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = React.forwardRef(function ColorWheel(props: SpectrumColorWheelProps, ref: FocusableRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let inputRef = useRef(null);\n let containerRef = useFocusableRef(ref, inputRef);\n [props, containerRef] = useContextProps(props, containerRef, ColorWheelContext);\n\n let {isDisabled} = props;\n let size = props.size && dimensionValue(props.size);\n let {styleProps} = useStyleProps(props);\n\n\n let [wheelRadius, setWheelRadius] = useState<number>(0);\n let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);\n\n let resizeHandler = useCallback(() => {\n if (containerRef.current) {\n setWheelRadius(containerRef.current.offsetWidth / 2);\n let thickness = window.getComputedStyle(containerRef.current)\n .getPropertyValue('--spectrum-colorwheel-track-thickness');\n if (thickness) {\n setWheelThickness(parseInt(thickness, 10));\n }\n }\n }, [containerRef, setWheelRadius, setWheelThickness]);\n\n useEffect(() => {\n // the size observer's fallback to the window resize event doesn't fire on mount\n if (wheelRadius === 0) {\n resizeHandler();\n }\n }, [wheelRadius, resizeHandler]);\n\n useResizeObserver({\n ref: containerRef,\n onResize: resizeHandler\n });\n\n let state = useColorWheelState(props);\n\n let {trackProps, inputProps, thumbProps} = useColorWheel({\n ...props,\n innerRadius: wheelRadius - wheelThickness,\n outerRadius: wheelRadius\n }, state, inputRef);\n\n let {focusProps, isFocusVisible} = useFocusRing();\n\n return (\n <div\n className={\n classNames(\n styles,\n 'spectrum-ColorWheel',\n {\n 'is-disabled': isDisabled\n },\n styleProps.className\n )\n }\n ref={containerRef}\n style={{\n ...styleProps.style,\n // Workaround around https://github.com/adobe/spectrum-css/issues/1032\n 'width': size,\n 'height': size\n }}>\n <div {...trackProps} className={classNames(styles, 'spectrum-ColorWheel-gradient')} />\n <ColorThumb\n value={state.getDisplayColor()}\n isFocused={isFocusVisible}\n isDisabled={isDisabled}\n isDragging={state.isDragging}\n containerRef={containerRef}\n className={classNames(styles, 'spectrum-ColorWheel-handle')}\n {...thumbProps}>\n <input {...focusProps} className={classNames(styles, 'spectrum-ColorWheel-slider')} {...inputProps} ref={inputRef} />\n </ColorThumb>\n </div>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.module.js.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -7,17 +7,17 @@ import { Color } from "react-aria-components";
|
|
|
7
7
|
/**
|
|
8
8
|
* ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
|
|
9
9
|
*/
|
|
10
|
-
export
|
|
10
|
+
export const ColorArea: (props: SpectrumColorAreaProps & {
|
|
11
11
|
ref?: FocusableRef<HTMLDivElement>;
|
|
12
12
|
}) => ReactElement;
|
|
13
13
|
/**
|
|
14
14
|
* ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
|
|
15
15
|
*/
|
|
16
|
-
export
|
|
16
|
+
export const ColorWheel: React.ForwardRefExoticComponent<SpectrumColorWheelProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>>;
|
|
17
17
|
/**
|
|
18
18
|
* ColorSliders allow users to adjust an individual channel of a color value.
|
|
19
19
|
*/
|
|
20
|
-
export
|
|
20
|
+
export const ColorSlider: React.ForwardRefExoticComponent<SpectrumColorSliderProps & React.RefAttributes<FocusableRefValue<HTMLDivElement, HTMLDivElement>>>;
|
|
21
21
|
/**
|
|
22
22
|
* A color field allows users to edit a hex color or individual color channel value.
|
|
23
23
|
*/
|
|
@@ -37,7 +37,7 @@ export interface SpectrumColorSwatchProps extends AriaColorSwatchProps, StylePro
|
|
|
37
37
|
/**
|
|
38
38
|
* A ColorSwatch displays a preview of a selected color.
|
|
39
39
|
*/
|
|
40
|
-
export
|
|
40
|
+
export const ColorSwatch: React.ForwardRefExoticComponent<SpectrumColorSwatchProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
|
|
41
41
|
export interface SpectrumColorPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps {
|
|
42
42
|
/** A visual label for the color picker. */
|
|
43
43
|
label?: ReactNode;
|
|
@@ -57,7 +57,7 @@ export interface SpectrumColorPickerProps extends ValueBase<string | Color, Colo
|
|
|
57
57
|
/**
|
|
58
58
|
* A ColorPicker combines a swatch with a customizable popover for editing a color.
|
|
59
59
|
*/
|
|
60
|
-
export
|
|
60
|
+
export const ColorPicker: React.ForwardRefExoticComponent<SpectrumColorPickerProps & React.RefAttributes<FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
|
|
61
61
|
export interface SpectrumColorEditorProps {
|
|
62
62
|
/** Whether to hide the alpha channel color slider and color field. */
|
|
63
63
|
hideAlphaChannel?: boolean;
|
|
@@ -65,7 +65,7 @@ export interface SpectrumColorEditorProps {
|
|
|
65
65
|
/**
|
|
66
66
|
* ColorEditor provides a default UI for editing colors within a ColorPicker.
|
|
67
67
|
*/
|
|
68
|
-
export
|
|
68
|
+
export const ColorEditor: React.ForwardRefExoticComponent<SpectrumColorEditorProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
|
|
69
69
|
export interface SpectrumColorSwatchPickerProps extends ValueBase<string | _Color1, _Color1>, StyleProps {
|
|
70
70
|
/** The ColorSwatches within the ColorSwatchPicker. */
|
|
71
71
|
children: ReactNode;
|
|
@@ -88,7 +88,7 @@ export interface SpectrumColorSwatchPickerProps extends ValueBase<string | _Colo
|
|
|
88
88
|
/**
|
|
89
89
|
* A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
|
|
90
90
|
*/
|
|
91
|
-
export
|
|
91
|
+
export const ColorSwatchPicker: React.ForwardRefExoticComponent<SpectrumColorSwatchPickerProps & React.RefAttributes<DOMRefValue<HTMLDivElement>>>;
|
|
92
92
|
export { parseColor, getColorChannels } from '@react-stately/color';
|
|
93
93
|
export type { SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps } from '@react-types/color';
|
|
94
94
|
export type { Color, ColorSpace, ColorFormat } from '@react-types/color';
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;
|
|
1
|
+
{"mappings":";;;;;;ACyBA;;GAEG;AACH,OAAO,MAAM,WA0DP,CAAC,KAAK,EAAE,sBAAsB,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,cAAc,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AC3D7F;;GAEG;AACH,OAAO,MAAM,6IA+EX,CAAC;ACnFH;;GAEG;AACH,OAAO,MAAM,+IA+GX,CAAC;ACnHH;;GAEG;AACH,OAAO,MAAM,0HAaX,CAAC;ACrBH,yCAA0C,SAAQ,oBAAoB,EAAE,UAAU;IAChF;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;CACvC;AAQD;;GAEG;AACH,OAAO,MAAM,yHAwDX,CAAC;AC5EH,yCAA0C,SAAQ,UAAU,MAAM,GAAG,KAAK,EAAE,KAAK,CAAC,EAAE,iBAAiB;IACnG,2CAA2C;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;CACvC;AAED;;GAEG;AACH,OAAO,MAAM,qJA6EX,CAAC;ACzGH;IACE,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;GAEG;AACH,OAAO,MAAM,yHAqCX,CAAC;ACvCH,+CAAgD,SAAQ,UAAU,MAAM,GAAG,OAAK,EAAE,OAAK,CAAC,EAAE,UAAU;IAClG,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAA;CACvC;AAED;;GAEG;AACH,OAAO,MAAM,qIA+BX,CAAC;ACrDH,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAClE,YAAY,EAAC,sBAAsB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,EAAC,MAAM,oBAAoB,CAAC;AAK3I,YAAY,EAAC,KAAK,EAAE,UAAU,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC","sources":["packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorThumb.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorArea.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorWheel.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSlider.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorField.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSwatch.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorPicker.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorEditor.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/ColorSwatchPicker.tsx","packages/@react-spectrum/color/src/packages/@react-spectrum/color/src/index.ts","packages/@react-spectrum/color/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\nexport {ColorArea} from './ColorArea';\nexport {ColorWheel} from './ColorWheel';\nexport {ColorSlider} from './ColorSlider';\nexport {ColorField} from './ColorField';\nexport {ColorSwatch} from './ColorSwatch';\nexport {ColorPicker} from './ColorPicker';\nexport {ColorEditor} from './ColorEditor';\nexport {ColorSwatchPicker} from './ColorSwatchPicker';\nexport {parseColor, getColorChannels} from '@react-stately/color';\nexport type {SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps} from '@react-types/color';\nexport type {SpectrumColorSwatchProps} from './ColorSwatch';\nexport type {SpectrumColorPickerProps} from './ColorPicker';\nexport type {SpectrumColorEditorProps} from './ColorEditor';\nexport type {SpectrumColorSwatchPickerProps} from './ColorSwatchPicker';\nexport type {Color, ColorSpace, ColorFormat} from '@react-types/color';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.uf4eyW_spectrum-ColorSlider {
|
|
24
|
+
width: 100%;
|
|
24
25
|
height: var(--spectrum-colorslider-height, var(--spectrum-global-dimension-size-300));
|
|
25
26
|
border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
26
27
|
-webkit-user-select: none;
|
|
27
28
|
user-select: none;
|
|
28
29
|
touch-action: none;
|
|
29
30
|
cursor: default;
|
|
30
|
-
width: 100%;
|
|
31
31
|
display: block;
|
|
32
32
|
position: relative;
|
|
33
33
|
}
|
|
@@ -117,4 +117,4 @@
|
|
|
117
117
|
--spectrum-colorarea-border-color: ButtonText;
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
|
-
/*# sourceMappingURL=vars.
|
|
120
|
+
/*# sourceMappingURL=vars.a54898d8.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAYA;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;;AAaE;;;;AAKA;;;;;;;;;;AAiBA;;;;AAIA;;;;AAKF;;;;;;AAME;;;;;AAMF;;;;;AAIE;;;;;;AAeF;;;;;;;AAOA;;;;;;AAMA;;;;;AAKA;;;;;AAIE;;;;AAIA;;;;;AAMF;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorslider/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.
|
|
1
|
+
{"mappings":"AAYA;;;;;;;;;;;;AAYA;;;;AAIA;;;;;;AAMA;;;;;;;;;;;;AAaE;;;;AAKA;;;;;;;;;;AAiBA;;;;AAIA;;;;AAKF;;;;;;AAME;;;;;AAMF;;;;;AAIE;;;;;;AAeF;;;;;;;AAOA;;;;;;AAMA;;;;;AAKA;;;;;AAIE;;;;AAIA;;;;;AAMF;EACE","sources":["packages/@adobe/spectrum-css-temp/components/colorslider/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.a54898d8.css.map"}
|