@chayns-components/color-picker 5.0.0-beta.607 → 5.0.0-beta.609
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/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js +4 -3
- package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js.map +1 -1
- package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js +34 -6
- package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js.map +1 -1
- package/lib/esm/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js +5 -4
- package/lib/esm/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js.map +1 -1
- package/lib/esm/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js +43 -12
- package/lib/esm/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js.map +1 -1
- package/lib/types/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.d.ts +4 -0
- package/package.json +3 -3
|
@@ -36,10 +36,11 @@ const ColorPickerWrapper = ({
|
|
|
36
36
|
}), [onPresetColorAdd, onPresetColorRemove, presetColors, shouldShowMoreOptions, shouldShowPresetColors, shouldShowTransparencySlider]);
|
|
37
37
|
return /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapper, null, shouldShowAsPopup ? /*#__PURE__*/_react.default.createElement(_core.Popup, {
|
|
38
38
|
content: content
|
|
39
|
-
}, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfo, null, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.
|
|
40
|
-
$color: selectedColor,
|
|
39
|
+
}, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfo, null, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoColorWrapper, {
|
|
41
40
|
$shouldShowRoundPreviewColor: shouldShowRoundPreviewColor
|
|
42
|
-
}
|
|
41
|
+
}, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoColorBackground, null), /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoColor, {
|
|
42
|
+
$color: selectedColor
|
|
43
|
+
})), shouldShowPreviewColorString && /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoText, null, selectedColor))) : content);
|
|
43
44
|
};
|
|
44
45
|
ColorPickerWrapper.displayName = 'ColorPickerWrapper';
|
|
45
46
|
var _default = exports.default = ColorPickerWrapper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerWrapper.js","names":["_core","require","_react","_interopRequireWildcard","_ColorPickerProvider","_ColorPickerPopup","_interopRequireDefault","_ColorPickerWrapper","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerWrapper","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","selectedColor","useContext","ColorPickerContext","content","useMemo","createElement","StyledColorPickerWrapper","Popup","StyledColorPickerWrapperInfo","
|
|
1
|
+
{"version":3,"file":"ColorPickerWrapper.js","names":["_core","require","_react","_interopRequireWildcard","_ColorPickerProvider","_ColorPickerPopup","_interopRequireDefault","_ColorPickerWrapper","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerWrapper","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","selectedColor","useContext","ColorPickerContext","content","useMemo","createElement","StyledColorPickerWrapper","Popup","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColorWrapper","$shouldShowRoundPreviewColor","StyledColorPickerWrapperInfoColorBackground","StyledColorPickerWrapperInfoColor","$color","StyledColorPickerWrapperInfoText","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup } from '@chayns-components/core';\nimport React, { useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport ColorPickerPopup from './color-picker-popup/ColorPickerPopup';\nimport {\n StyledColorPickerWrapper,\n StyledColorPickerWrapperInfo,\n StyledColorPickerWrapperInfoColor,\n StyledColorPickerWrapperInfoColorBackground,\n StyledColorPickerWrapperInfoColorWrapper,\n StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n presetColors?: IPresetColor[];\n shouldShowPresetColors: boolean;\n onPresetColorAdd?: (presetColor: IPresetColor) => void;\n onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n shouldShowTransparencySlider: boolean;\n shouldShowMoreOptions: boolean;\n shouldShowAsPopup: boolean;\n shouldShowPreviewColorString: boolean;\n shouldShowRoundPreviewColor: boolean;\n}\n\nconst ColorPickerWrapper = ({\n presetColors,\n onPresetColorRemove,\n onPresetColorAdd,\n shouldShowPresetColors,\n shouldShowAsPopup,\n shouldShowTransparencySlider,\n shouldShowMoreOptions,\n shouldShowRoundPreviewColor,\n shouldShowPreviewColorString,\n}: ColorPickerWrapperProps) => {\n const { selectedColor } = useContext(ColorPickerContext);\n\n const content = useMemo(\n () => (\n <ColorPickerPopup\n shouldShowPresetColors={shouldShowPresetColors}\n onPresetColorRemove={onPresetColorRemove}\n onPresetColorAdd={onPresetColorAdd}\n presetColors={presetColors}\n shouldShowMoreOptions={shouldShowMoreOptions}\n shouldShowTransparencySlider={shouldShowTransparencySlider}\n />\n ),\n [\n onPresetColorAdd,\n onPresetColorRemove,\n presetColors,\n shouldShowMoreOptions,\n shouldShowPresetColors,\n shouldShowTransparencySlider,\n ],\n );\n\n return (\n <StyledColorPickerWrapper>\n {shouldShowAsPopup ? (\n <Popup content={content}>\n <StyledColorPickerWrapperInfo>\n <StyledColorPickerWrapperInfoColorWrapper\n $shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n >\n <StyledColorPickerWrapperInfoColorBackground />\n <StyledColorPickerWrapperInfoColor $color={selectedColor} />\n </StyledColorPickerWrapperInfoColorWrapper>\n\n {shouldShowPreviewColorString && (\n <StyledColorPickerWrapperInfoText>\n {selectedColor}\n </StyledColorPickerWrapperInfoText>\n )}\n </StyledColorPickerWrapperInfo>\n </Popup>\n ) : (\n content\n )}\n </StyledColorPickerWrapper>\n );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledColorPickerWrapperInfoText = exports.StyledColorPickerWrapperInfoColor = exports.StyledColorPickerWrapperInfo = exports.StyledColorPickerWrapper = void 0;
|
|
6
|
+
exports.StyledColorPickerWrapperInfoText = exports.StyledColorPickerWrapperInfoColorWrapper = exports.StyledColorPickerWrapperInfoColorBackground = exports.StyledColorPickerWrapperInfoColor = exports.StyledColorPickerWrapperInfo = exports.StyledColorPickerWrapper = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
9
|
const StyledColorPickerWrapper = exports.StyledColorPickerWrapper = _styledComponents.default.div``;
|
|
@@ -12,6 +12,36 @@ const StyledColorPickerWrapperInfo = exports.StyledColorPickerWrapperInfo = _sty
|
|
|
12
12
|
align-items: center;
|
|
13
13
|
gap: 8px;
|
|
14
14
|
`;
|
|
15
|
+
const StyledColorPickerWrapperInfoColorWrapper = exports.StyledColorPickerWrapperInfoColorWrapper = _styledComponents.default.div`
|
|
16
|
+
border-radius: ${({
|
|
17
|
+
$shouldShowRoundPreviewColor
|
|
18
|
+
}) => $shouldShowRoundPreviewColor ? '50px' : '0px'};
|
|
19
|
+
border: 1px ${({
|
|
20
|
+
theme
|
|
21
|
+
}) => theme.text} solid;
|
|
22
|
+
|
|
23
|
+
width: 15px;
|
|
24
|
+
aspect-ratio: 1;
|
|
25
|
+
position: relative;
|
|
26
|
+
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
`;
|
|
29
|
+
const StyledColorPickerWrapperInfoColorBackground = exports.StyledColorPickerWrapperInfoColorBackground = _styledComponents.default.div`
|
|
30
|
+
position: absolute;
|
|
31
|
+
background-color: #fff;
|
|
32
|
+
background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),
|
|
33
|
+
linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),
|
|
34
|
+
linear-gradient(-45deg, #0000 75%, #a0a0a0 0);
|
|
35
|
+
background-position:
|
|
36
|
+
0 0,
|
|
37
|
+
0 4px,
|
|
38
|
+
4px -4px,
|
|
39
|
+
-4px 0;
|
|
40
|
+
background-repeat: repeat;
|
|
41
|
+
background-size: 8px 8px;
|
|
42
|
+
height: 100%;
|
|
43
|
+
width: 100%;
|
|
44
|
+
`;
|
|
15
45
|
const StyledColorPickerWrapperInfoColor = exports.StyledColorPickerWrapperInfoColor = _styledComponents.default.div.attrs(({
|
|
16
46
|
$color
|
|
17
47
|
}) => ({
|
|
@@ -19,11 +49,9 @@ const StyledColorPickerWrapperInfoColor = exports.StyledColorPickerWrapperInfoCo
|
|
|
19
49
|
backgroundColor: $color
|
|
20
50
|
}
|
|
21
51
|
}))`
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
$shouldShowRoundPreviewColor
|
|
26
|
-
}) => $shouldShowRoundPreviewColor ? '50px' : '0px'};
|
|
52
|
+
height: 100%;
|
|
53
|
+
width: 100%;
|
|
54
|
+
position: absolute;
|
|
27
55
|
`;
|
|
28
56
|
const StyledColorPickerWrapperInfoText = exports.StyledColorPickerWrapperInfoText = _styledComponents.default.div`
|
|
29
57
|
border-bottom-style: dashed;
|
package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerWrapper.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledColorPickerWrapper","exports","styled","div","StyledColorPickerWrapperInfo","
|
|
1
|
+
{"version":3,"file":"ColorPickerWrapper.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledColorPickerWrapper","exports","styled","div","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColorWrapper","$shouldShowRoundPreviewColor","theme","text","StyledColorPickerWrapperInfoColorBackground","StyledColorPickerWrapperInfoColor","attrs","$color","style","backgroundColor","StyledColorPickerWrapperInfoText"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledColorPickerWrapper = styled.div``;\n\nexport const StyledColorPickerWrapperInfo = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n`;\n\ntype StyledColorPickerWrapperInfoColorProps = WithTheme<{\n $color?: string;\n}>;\n\ntype StyledColorPickerWrapperInfoColorWrapperProps = WithTheme<{\n $shouldShowRoundPreviewColor: boolean;\n}>;\n\nexport const StyledColorPickerWrapperInfoColorWrapper = styled.div<StyledColorPickerWrapperInfoColorWrapperProps>`\n border-radius: ${({ $shouldShowRoundPreviewColor }) =>\n $shouldShowRoundPreviewColor ? '50px' : '0px'};\n border: 1px ${({ theme }: StyledColorPickerWrapperInfoColorProps) => theme.text} solid;\n\n width: 15px;\n aspect-ratio: 1;\n position: relative;\n\n overflow: hidden;\n`;\n\nexport const StyledColorPickerWrapperInfoColorBackground = styled.div`\n position: absolute;\n background-color: #fff;\n background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n background-position:\n 0 0,\n 0 4px,\n 4px -4px,\n -4px 0;\n background-repeat: repeat;\n background-size: 8px 8px;\n height: 100%;\n width: 100%;\n`;\n\nexport const StyledColorPickerWrapperInfoColor = styled.div.attrs<StyledColorPickerWrapperInfoColorProps>(\n ({ $color }) => ({\n style: {\n backgroundColor: $color,\n },\n }),\n)`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledColorPickerWrapperInfoTextProps = WithTheme<unknown>;\n\nexport const StyledColorPickerWrapperInfoText = styled.div<StyledColorPickerWrapperInfoTextProps>`\n border-bottom-style: dashed;\n border-bottom-width: 1px;\n\n color: ${({ theme }: StyledColorPickerWrapperInfoTextProps) => theme.text};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAGE,yBAAM,CAACC,GAAI,EAAC;AAE7C,MAAMC,4BAA4B,GAAAH,OAAA,CAAAG,4BAAA,GAAGF,yBAAM,CAACC,GAAI;AACvD;AACA;AACA;AACA,CAAC;AAUM,MAAME,wCAAwC,GAAAJ,OAAA,CAAAI,wCAAA,GAAGH,yBAAM,CAACC,GAAmD;AAClH,qBAAqB,CAAC;EAAEG;AAA6B,CAAC,KAC9CA,4BAA4B,GAAG,MAAM,GAAG,KAAM;AACtD,kBAAkB,CAAC;EAAEC;AAA8C,CAAC,KAAKA,KAAK,CAACC,IAAK;AACpF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2CAA2C,GAAAR,OAAA,CAAAQ,2CAAA,GAAGP,yBAAM,CAACC,GAAI;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMO,iCAAiC,GAAAT,OAAA,CAAAS,iCAAA,GAAGR,yBAAM,CAACC,GAAG,CAACQ,KAAK,CAC7D,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHC,eAAe,EAAEF;EACrB;AACJ,CAAC,CACL,CAAE;AACF;AACA;AACA;AACA,CAAC;AAIM,MAAMG,gCAAgC,GAAAd,OAAA,CAAAc,gCAAA,GAAGb,yBAAM,CAACC,GAA2C;AAClG;AACA;AACA;AACA,aAAa,CAAC;EAAEI;AAA6C,CAAC,KAAKA,KAAK,CAACC,IAAK;AAC9E,CAAC","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@ import { Popup } from '@chayns-components/core';
|
|
|
2
2
|
import React, { useContext, useMemo } from 'react';
|
|
3
3
|
import { ColorPickerContext } from '../../ColorPickerProvider';
|
|
4
4
|
import ColorPickerPopup from './color-picker-popup/ColorPickerPopup';
|
|
5
|
-
import { StyledColorPickerWrapper, StyledColorPickerWrapperInfo, StyledColorPickerWrapperInfoColor, StyledColorPickerWrapperInfoText } from './ColorPickerWrapper.styles';
|
|
5
|
+
import { StyledColorPickerWrapper, StyledColorPickerWrapperInfo, StyledColorPickerWrapperInfoColor, StyledColorPickerWrapperInfoColorBackground, StyledColorPickerWrapperInfoColorWrapper, StyledColorPickerWrapperInfoText } from './ColorPickerWrapper.styles';
|
|
6
6
|
const ColorPickerWrapper = _ref => {
|
|
7
7
|
let {
|
|
8
8
|
presetColors,
|
|
@@ -28,10 +28,11 @@ const ColorPickerWrapper = _ref => {
|
|
|
28
28
|
}), [onPresetColorAdd, onPresetColorRemove, presetColors, shouldShowMoreOptions, shouldShowPresetColors, shouldShowTransparencySlider]);
|
|
29
29
|
return /*#__PURE__*/React.createElement(StyledColorPickerWrapper, null, shouldShowAsPopup ? /*#__PURE__*/React.createElement(Popup, {
|
|
30
30
|
content: content
|
|
31
|
-
}, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfo, null, /*#__PURE__*/React.createElement(
|
|
32
|
-
$color: selectedColor,
|
|
31
|
+
}, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfo, null, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoColorWrapper, {
|
|
33
32
|
$shouldShowRoundPreviewColor: shouldShowRoundPreviewColor
|
|
34
|
-
}
|
|
33
|
+
}, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoColorBackground, null), /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoColor, {
|
|
34
|
+
$color: selectedColor
|
|
35
|
+
})), shouldShowPreviewColorString && /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoText, null, selectedColor))) : content);
|
|
35
36
|
};
|
|
36
37
|
ColorPickerWrapper.displayName = 'ColorPickerWrapper';
|
|
37
38
|
export default ColorPickerWrapper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerWrapper.js","names":["Popup","React","useContext","useMemo","ColorPickerContext","ColorPickerPopup","StyledColorPickerWrapper","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","StyledColorPickerWrapperInfoText","ColorPickerWrapper","_ref","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","selectedColor","content","createElement","$
|
|
1
|
+
{"version":3,"file":"ColorPickerWrapper.js","names":["Popup","React","useContext","useMemo","ColorPickerContext","ColorPickerPopup","StyledColorPickerWrapper","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","StyledColorPickerWrapperInfoColorBackground","StyledColorPickerWrapperInfoColorWrapper","StyledColorPickerWrapperInfoText","ColorPickerWrapper","_ref","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","selectedColor","content","createElement","$shouldShowRoundPreviewColor","$color","displayName"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup } from '@chayns-components/core';\nimport React, { useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types/colorPicker';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport ColorPickerPopup from './color-picker-popup/ColorPickerPopup';\nimport {\n StyledColorPickerWrapper,\n StyledColorPickerWrapperInfo,\n StyledColorPickerWrapperInfoColor,\n StyledColorPickerWrapperInfoColorBackground,\n StyledColorPickerWrapperInfoColorWrapper,\n StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n presetColors?: IPresetColor[];\n shouldShowPresetColors: boolean;\n onPresetColorAdd?: (presetColor: IPresetColor) => void;\n onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n shouldShowTransparencySlider: boolean;\n shouldShowMoreOptions: boolean;\n shouldShowAsPopup: boolean;\n shouldShowPreviewColorString: boolean;\n shouldShowRoundPreviewColor: boolean;\n}\n\nconst ColorPickerWrapper = ({\n presetColors,\n onPresetColorRemove,\n onPresetColorAdd,\n shouldShowPresetColors,\n shouldShowAsPopup,\n shouldShowTransparencySlider,\n shouldShowMoreOptions,\n shouldShowRoundPreviewColor,\n shouldShowPreviewColorString,\n}: ColorPickerWrapperProps) => {\n const { selectedColor } = useContext(ColorPickerContext);\n\n const content = useMemo(\n () => (\n <ColorPickerPopup\n shouldShowPresetColors={shouldShowPresetColors}\n onPresetColorRemove={onPresetColorRemove}\n onPresetColorAdd={onPresetColorAdd}\n presetColors={presetColors}\n shouldShowMoreOptions={shouldShowMoreOptions}\n shouldShowTransparencySlider={shouldShowTransparencySlider}\n />\n ),\n [\n onPresetColorAdd,\n onPresetColorRemove,\n presetColors,\n shouldShowMoreOptions,\n shouldShowPresetColors,\n shouldShowTransparencySlider,\n ],\n );\n\n return (\n <StyledColorPickerWrapper>\n {shouldShowAsPopup ? (\n <Popup content={content}>\n <StyledColorPickerWrapperInfo>\n <StyledColorPickerWrapperInfoColorWrapper\n $shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n >\n <StyledColorPickerWrapperInfoColorBackground />\n <StyledColorPickerWrapperInfoColor $color={selectedColor} />\n </StyledColorPickerWrapperInfoColorWrapper>\n\n {shouldShowPreviewColorString && (\n <StyledColorPickerWrapperInfoText>\n {selectedColor}\n </StyledColorPickerWrapperInfoText>\n )}\n </StyledColorPickerWrapperInfo>\n </Popup>\n ) : (\n content\n )}\n </StyledColorPickerWrapper>\n );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,yBAAyB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAElD,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,OAAOC,gBAAgB,MAAM,uCAAuC;AACpE,SACIC,wBAAwB,EACxBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,2CAA2C,EAC3CC,wCAAwC,EACxCC,gCAAgC,QAC7B,6BAA6B;AAcpC,MAAMC,kBAAkB,GAAGC,IAAA,IAUI;EAAA,IAVH;IACxBC,YAAY;IACZC,mBAAmB;IACnBC,gBAAgB;IAChBC,sBAAsB;IACtBC,iBAAiB;IACjBC,4BAA4B;IAC5BC,qBAAqB;IACrBC,2BAA2B;IAC3BC;EACqB,CAAC,GAAAT,IAAA;EACtB,MAAM;IAAEU;EAAc,CAAC,GAAGrB,UAAU,CAACE,kBAAkB,CAAC;EAExD,MAAMoB,OAAO,GAAGrB,OAAO,CACnB,mBACIF,KAAA,CAAAwB,aAAA,CAACpB,gBAAgB;IACbY,sBAAsB,EAAEA,sBAAuB;IAC/CF,mBAAmB,EAAEA,mBAAoB;IACzCC,gBAAgB,EAAEA,gBAAiB;IACnCF,YAAY,EAAEA,YAAa;IAC3BM,qBAAqB,EAAEA,qBAAsB;IAC7CD,4BAA4B,EAAEA;EAA6B,CAC9D,CACJ,EACD,CACIH,gBAAgB,EAChBD,mBAAmB,EACnBD,YAAY,EACZM,qBAAqB,EACrBH,sBAAsB,EACtBE,4BAA4B,CAEpC,CAAC;EAED,oBACIlB,KAAA,CAAAwB,aAAA,CAACnB,wBAAwB,QACpBY,iBAAiB,gBACdjB,KAAA,CAAAwB,aAAA,CAACzB,KAAK;IAACwB,OAAO,EAAEA;EAAQ,gBACpBvB,KAAA,CAAAwB,aAAA,CAAClB,4BAA4B,qBACzBN,KAAA,CAAAwB,aAAA,CAACf,wCAAwC;IACrCgB,4BAA4B,EAAEL;EAA4B,gBAE1DpB,KAAA,CAAAwB,aAAA,CAAChB,2CAA2C,MAAE,CAAC,eAC/CR,KAAA,CAAAwB,aAAA,CAACjB,iCAAiC;IAACmB,MAAM,EAAEJ;EAAc,CAAE,CACrB,CAAC,EAE1CD,4BAA4B,iBACzBrB,KAAA,CAAAwB,aAAA,CAACd,gCAAgC,QAC5BY,aAC6B,CAEZ,CAC3B,CAAC,GAERC,OAEkB,CAAC;AAEnC,CAAC;AAEDZ,kBAAkB,CAACgB,WAAW,GAAG,oBAAoB;AAErD,eAAehB,kBAAkB","ignoreList":[]}
|
|
@@ -5,33 +5,64 @@ export const StyledColorPickerWrapperInfo = styled.div`
|
|
|
5
5
|
align-items: center;
|
|
6
6
|
gap: 8px;
|
|
7
7
|
`;
|
|
8
|
-
export const
|
|
8
|
+
export const StyledColorPickerWrapperInfoColorWrapper = styled.div`
|
|
9
|
+
border-radius: ${_ref => {
|
|
9
10
|
let {
|
|
10
|
-
$
|
|
11
|
+
$shouldShowRoundPreviewColor
|
|
11
12
|
} = _ref;
|
|
13
|
+
return $shouldShowRoundPreviewColor ? '50px' : '0px';
|
|
14
|
+
}};
|
|
15
|
+
border: 1px ${_ref2 => {
|
|
16
|
+
let {
|
|
17
|
+
theme
|
|
18
|
+
} = _ref2;
|
|
19
|
+
return theme.text;
|
|
20
|
+
}} solid;
|
|
21
|
+
|
|
22
|
+
width: 15px;
|
|
23
|
+
aspect-ratio: 1;
|
|
24
|
+
position: relative;
|
|
25
|
+
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
`;
|
|
28
|
+
export const StyledColorPickerWrapperInfoColorBackground = styled.div`
|
|
29
|
+
position: absolute;
|
|
30
|
+
background-color: #fff;
|
|
31
|
+
background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),
|
|
32
|
+
linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),
|
|
33
|
+
linear-gradient(-45deg, #0000 75%, #a0a0a0 0);
|
|
34
|
+
background-position:
|
|
35
|
+
0 0,
|
|
36
|
+
0 4px,
|
|
37
|
+
4px -4px,
|
|
38
|
+
-4px 0;
|
|
39
|
+
background-repeat: repeat;
|
|
40
|
+
background-size: 8px 8px;
|
|
41
|
+
height: 100%;
|
|
42
|
+
width: 100%;
|
|
43
|
+
`;
|
|
44
|
+
export const StyledColorPickerWrapperInfoColor = styled.div.attrs(_ref3 => {
|
|
45
|
+
let {
|
|
46
|
+
$color
|
|
47
|
+
} = _ref3;
|
|
12
48
|
return {
|
|
13
49
|
style: {
|
|
14
50
|
backgroundColor: $color
|
|
15
51
|
}
|
|
16
52
|
};
|
|
17
53
|
})`
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
let {
|
|
22
|
-
$shouldShowRoundPreviewColor
|
|
23
|
-
} = _ref2;
|
|
24
|
-
return $shouldShowRoundPreviewColor ? '50px' : '0px';
|
|
25
|
-
}};
|
|
54
|
+
height: 100%;
|
|
55
|
+
width: 100%;
|
|
56
|
+
position: absolute;
|
|
26
57
|
`;
|
|
27
58
|
export const StyledColorPickerWrapperInfoText = styled.div`
|
|
28
59
|
border-bottom-style: dashed;
|
|
29
60
|
border-bottom-width: 1px;
|
|
30
61
|
|
|
31
|
-
color: ${
|
|
62
|
+
color: ${_ref4 => {
|
|
32
63
|
let {
|
|
33
64
|
theme
|
|
34
|
-
} =
|
|
65
|
+
} = _ref4;
|
|
35
66
|
return theme.text;
|
|
36
67
|
}};
|
|
37
68
|
`;
|
package/lib/esm/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerWrapper.styles.js","names":["styled","StyledColorPickerWrapper","div","StyledColorPickerWrapperInfo","
|
|
1
|
+
{"version":3,"file":"ColorPickerWrapper.styles.js","names":["styled","StyledColorPickerWrapper","div","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColorWrapper","_ref","$shouldShowRoundPreviewColor","_ref2","theme","text","StyledColorPickerWrapperInfoColorBackground","StyledColorPickerWrapperInfoColor","attrs","_ref3","$color","style","backgroundColor","StyledColorPickerWrapperInfoText","_ref4"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledColorPickerWrapper = styled.div``;\n\nexport const StyledColorPickerWrapperInfo = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n`;\n\ntype StyledColorPickerWrapperInfoColorProps = WithTheme<{\n $color?: string;\n}>;\n\ntype StyledColorPickerWrapperInfoColorWrapperProps = WithTheme<{\n $shouldShowRoundPreviewColor: boolean;\n}>;\n\nexport const StyledColorPickerWrapperInfoColorWrapper = styled.div<StyledColorPickerWrapperInfoColorWrapperProps>`\n border-radius: ${({ $shouldShowRoundPreviewColor }) =>\n $shouldShowRoundPreviewColor ? '50px' : '0px'};\n border: 1px ${({ theme }: StyledColorPickerWrapperInfoColorProps) => theme.text} solid;\n\n width: 15px;\n aspect-ratio: 1;\n position: relative;\n\n overflow: hidden;\n`;\n\nexport const StyledColorPickerWrapperInfoColorBackground = styled.div`\n position: absolute;\n background-color: #fff;\n background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n background-position:\n 0 0,\n 0 4px,\n 4px -4px,\n -4px 0;\n background-repeat: repeat;\n background-size: 8px 8px;\n height: 100%;\n width: 100%;\n`;\n\nexport const StyledColorPickerWrapperInfoColor = styled.div.attrs<StyledColorPickerWrapperInfoColorProps>(\n ({ $color }) => ({\n style: {\n backgroundColor: $color,\n },\n }),\n)`\n height: 100%;\n width: 100%;\n position: absolute;\n`;\n\ntype StyledColorPickerWrapperInfoTextProps = WithTheme<unknown>;\n\nexport const StyledColorPickerWrapperInfoText = styled.div<StyledColorPickerWrapperInfoTextProps>`\n border-bottom-style: dashed;\n border-bottom-width: 1px;\n\n color: ${({ theme }: StyledColorPickerWrapperInfoTextProps) => theme.text};\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,wBAAwB,GAAGD,MAAM,CAACE,GAAI,EAAC;AAEpD,OAAO,MAAMC,4BAA4B,GAAGH,MAAM,CAACE,GAAI;AACvD;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAME,wCAAwC,GAAGJ,MAAM,CAACE,GAAmD;AAClH,qBAAqBG,IAAA;EAAA,IAAC;IAAEC;EAA6B,CAAC,GAAAD,IAAA;EAAA,OAC9CC,4BAA4B,GAAG,MAAM,GAAG,KAAK;AAAA,CAAC;AACtD,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAA8C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AACpF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2CAA2C,GAAGV,MAAM,CAACE,GAAI;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMS,iCAAiC,GAAGX,MAAM,CAACE,GAAG,CAACU,KAAK,CAC7DC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAM;IACbE,KAAK,EAAE;MACHC,eAAe,EAAEF;IACrB;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMG,gCAAgC,GAAGjB,MAAM,CAACE,GAA2C;AAClG;AACA;AACA;AACA,aAAagB,KAAA;EAAA,IAAC;IAAEV;EAA6C,CAAC,GAAAU,KAAA;EAAA,OAAKV,KAAK,CAACC,IAAI;AAAA,CAAC;AAC9E,CAAC","ignoreList":[]}
|
package/lib/types/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.d.ts
CHANGED
|
@@ -4,8 +4,12 @@ export declare const StyledColorPickerWrapper: import("styled-components/dist/ty
|
|
|
4
4
|
export declare const StyledColorPickerWrapperInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
5
5
|
type StyledColorPickerWrapperInfoColorProps = WithTheme<{
|
|
6
6
|
$color?: string;
|
|
7
|
+
}>;
|
|
8
|
+
type StyledColorPickerWrapperInfoColorWrapperProps = WithTheme<{
|
|
7
9
|
$shouldShowRoundPreviewColor: boolean;
|
|
8
10
|
}>;
|
|
11
|
+
export declare const StyledColorPickerWrapperInfoColorWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledColorPickerWrapperInfoColorWrapperProps>> & string;
|
|
12
|
+
export declare const StyledColorPickerWrapperInfoColorBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
9
13
|
export declare const StyledColorPickerWrapperInfoColor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
10
14
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
11
15
|
}>, StyledColorPickerWrapperInfoColorProps>, never>> & string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/color-picker",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.609",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"typescript": "^5.4.5"
|
|
68
68
|
},
|
|
69
69
|
"dependencies": {
|
|
70
|
-
"@chayns-components/core": "^5.0.0-beta.
|
|
70
|
+
"@chayns-components/core": "^5.0.0-beta.609",
|
|
71
71
|
"@chayns/colors": "^2.0.0"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
"publishConfig": {
|
|
81
81
|
"access": "public"
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "06683bfffc93701eba4fa1cedd105ad1aef585b6"
|
|
84
84
|
}
|