@chayns-components/core 5.0.0-beta.170 → 5.0.0-beta.171

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.
Files changed (7) hide show
  1. package/lib/components/amount-control/AmountControl.d.ts +5 -4
  2. package/lib/components/amount-control/AmountControl.js +86 -12
  3. package/lib/components/amount-control/AmountControl.js.map +1 -1
  4. package/lib/components/amount-control/AmountControl.styles.d.ts +4 -1
  5. package/lib/components/amount-control/AmountControl.styles.js +16 -5
  6. package/lib/components/amount-control/AmountControl.styles.js.map +1 -1
  7. package/package.json +2 -2
package/lib/components/amount-control/AmountControl.d.ts CHANGED
@@ -1,17 +1,18 @@
1
1
  import { FC } from 'react';
2
+ export type DisplayState = 'default' | 'delete' | 'normal';
2
3
  export type AmountControlProps = {
3
4
  /**
4
5
  * The amount that should be displayed.
5
6
  */
6
7
  amount?: number;
7
8
  /**
8
- * The maximum allowed amount.
9
+ * A Text that should be displayed, if no amount is selected;
9
10
  */
10
- maxAmount?: number;
11
+ label?: string;
11
12
  /**
12
- * The minimum allowed amount.
13
+ * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.
13
14
  */
14
- minAmount?: number;
15
+ maxAmount?: number;
15
16
  /**
16
17
  * A Function that is executed when the amount is changed
17
18
  */
package/lib/components/amount-control/AmountControl.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
+ var _framerMotion = require("framer-motion");
7
8
  var _react = _interopRequireWildcard(require("react"));
8
9
  var _Icon = _interopRequireDefault(require("../icon/Icon"));
9
10
  var _AmountControl = require("./AmountControl.styles");
@@ -14,12 +15,30 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
14
15
  const AmountControl = _ref => {
15
16
  let {
16
17
  amount,
18
+ label,
17
19
  maxAmount,
18
- minAmount = 0,
19
20
  onChange
20
21
  } = _ref;
21
22
  const [amountValue, setAmountValue] = (0, _react.useState)(0);
22
23
  const [inputValue, setInputValue] = (0, _react.useState)('0');
24
+ const [displayState, setDisplayState] = (0, _react.useState)('default');
25
+ const minAmount = 0;
26
+
27
+ /**
28
+ * This function controls the displayState
29
+ */
30
+ (0, _react.useEffect)(() => {
31
+ switch (true) {
32
+ case maxAmount === 1 && amountValue === 1:
33
+ setDisplayState('delete');
34
+ return;
35
+ case amountValue > 0:
36
+ setDisplayState('normal');
37
+ return;
38
+ default:
39
+ setDisplayState('default');
40
+ }
41
+ }, [amountValue, maxAmount]);
23
42
 
24
43
  /**
25
44
  * Function that sets the amountValue to the amount
@@ -56,6 +75,13 @@ const AmountControl = _ref => {
56
75
  setAmountValue(prevState => prevState - 1);
57
76
  setInputValue(prevState => (Number(prevState) - 1).toString());
58
77
  };
78
+ const handleFirstAmount = (0, _react.useCallback)(() => {
79
+ if (amountValue !== 0) {
80
+ return;
81
+ }
82
+ setAmountValue(1);
83
+ setInputValue('1');
84
+ }, [amountValue]);
59
85
  const handleInputBlur = (0, _react.useCallback)(() => {
60
86
  setAmountValue(inputValue === '' ? 0 : Number(inputValue));
61
87
  if (inputValue === '') {
@@ -75,26 +101,74 @@ const AmountControl = _ref => {
75
101
  }
76
102
  setInputValue(checkedValue === 0 ? '' : checkedValue.toString());
77
103
  }, [maxAmount, minAmount]);
78
- return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControl, null, /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControlButton, {
104
+ const leftIcon = (0, _react.useMemo)(() => {
105
+ let item = null;
106
+ switch (displayState) {
107
+ case 'default':
108
+ item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
109
+ icons: ['fa fa-cart-shopping'],
110
+ size: 15
111
+ });
112
+ break;
113
+ case 'delete':
114
+ item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
115
+ icons: ['fa ts-trash'],
116
+ size: 25
117
+ });
118
+ break;
119
+ case 'normal':
120
+ item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
121
+ icons: ['fa fa-minus'],
122
+ size: 15,
123
+ color: "red"
124
+ });
125
+ break;
126
+ default:
127
+ break;
128
+ }
129
+ return item;
130
+ }, [displayState]);
131
+ return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControl, {
132
+ onClick: handleFirstAmount
133
+ }, /*#__PURE__*/_react.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
79
134
  onClick: handleAmountRemove,
80
- disabled: amountValue <= minAmount
81
- }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
82
- icons: ['fa fa-minus'],
83
- size: 15,
84
- color: "red"
85
- })), /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControlInput, {
135
+ disabled: amountValue !== 0 && amountValue <= minAmount
136
+ }, leftIcon), /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControlInput, {
137
+ displayState: displayState,
86
138
  onBlur: handleInputBlur,
87
139
  onChange: handleInputChange,
88
- value: inputValue,
89
- type: "number"
90
- }), /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControlButton, {
140
+ value: displayState === 'default' && label ? label : inputValue,
141
+ type: amountValue === 0 ? 'text' : 'number'
142
+ }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
143
+ initial: false
144
+ }, displayState === 'normal' && /*#__PURE__*/_react.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
145
+ key: "right_button",
146
+ initial: {
147
+ width: 0,
148
+ opacity: 0,
149
+ padding: 0
150
+ },
151
+ animate: {
152
+ width: 40,
153
+ opacity: 1,
154
+ padding: 0
155
+ },
156
+ exit: {
157
+ width: 0,
158
+ opacity: 0,
159
+ padding: 0
160
+ },
161
+ transition: {
162
+ duration: 0.2,
163
+ type: 'tween'
164
+ },
91
165
  onClick: handleAmountAdd,
92
166
  disabled: maxAmount ? amountValue >= maxAmount : false
93
167
  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
94
168
  icons: ['fa fa-plus'],
95
169
  size: 15,
96
170
  color: "green"
97
- }))), [amountValue, handleInputBlur, handleInputChange, inputValue, maxAmount, minAmount]);
171
+ })))), [amountValue, displayState, handleFirstAmount, handleInputBlur, handleInputChange, inputValue, label, leftIcon, maxAmount, minAmount]);
98
172
  };
99
173
  AmountControl.displayName = 'AmountControl';
100
174
  var _default = AmountControl;
package/lib/components/amount-control/AmountControl.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AmountControl.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_AmountControl","_amountControl","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AmountControl","_ref","amount","maxAmount","minAmount","onChange","amountValue","setAmountValue","useState","inputValue","setInputValue","useEffect","checkForValidAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleInputBlur","useCallback","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","useMemo","createElement","StyledAmountControl","StyledAmountControlButton","onClick","disabled","icons","size","color","StyledAmountControlInput","onBlur","type","displayName","_default","exports"],"sources":["../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlButton,\n StyledAmountControlInput,\n} from './AmountControl.styles';\nimport { checkForValidAmount } from './utils/amountControl';\n\nexport type AmountControlProps = {\n /**\n * The amount that should be displayed.\n */\n amount?: number;\n /**\n * The maximum allowed amount.\n */\n maxAmount?: number;\n /**\n * The minimum allowed amount.\n */\n minAmount?: number;\n /**\n * A Function that is executed when the amount is changed\n */\n onChange?: (amount: number) => void;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({ amount, maxAmount, minAmount = 0, onChange }) => {\n const [amountValue, setAmountValue] = useState(0);\n const [inputValue, setInputValue] = useState('0');\n\n /**\n * Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n /**\n * Function that updates the onChange event\n */\n useEffect(() => {\n if (onChange) {\n onChange(amountValue);\n }\n }, [amountValue, onChange]);\n\n const handleAmountAdd = () => {\n setAmountValue((prevState) => prevState + 1);\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n };\n\n const handleAmountRemove = () => {\n setAmountValue((prevState) => prevState - 1);\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n };\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n if (inputValue === '') {\n setInputValue('0');\n }\n }, [inputValue]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const valueBeforeCheck = Number(event.target.value);\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Number(event.target.value),\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount]\n );\n\n return useMemo(\n () => (\n <StyledAmountControl>\n <StyledAmountControlButton\n onClick={handleAmountRemove}\n disabled={amountValue <= minAmount}\n >\n <Icon icons={['fa fa-minus']} size={15} color=\"red\" />\n </StyledAmountControlButton>\n <StyledAmountControlInput\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={inputValue}\n type=\"number\"\n />\n <StyledAmountControlButton\n onClick={handleAmountAdd}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledAmountControlButton>\n </StyledAmountControl>\n ),\n [amountValue, handleInputBlur, handleInputChange, inputValue, maxAmount, minAmount]\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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"}
1
+ {"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_Icon","_interopRequireDefault","_AmountControl","_amountControl","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AmountControl","_ref","amount","label","maxAmount","onChange","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","useEffect","checkForValidAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","useCallback","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","useMemo","item","createElement","icons","size","color","StyledAmountControl","onClick","StyledMotionAmountControlButton","disabled","StyledAmountControlInput","onBlur","type","AnimatePresence","initial","width","opacity","padding","animate","exit","transition","duration","displayName","_default","exports"],"sources":["../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\nimport { checkForValidAmount } from './utils/amountControl';\n\nexport type DisplayState = 'default' | 'delete' | 'normal';\n\nexport type AmountControlProps = {\n /**\n * The amount that should be displayed.\n */\n amount?: number;\n /**\n * A Text that should be displayed, if no amount is selected;\n */\n label?: string;\n /**\n * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n */\n maxAmount?: number;\n /**\n * A Function that is executed when the amount is changed\n */\n onChange?: (amount: number) => void;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({ amount, label, maxAmount, onChange }) => {\n const [amountValue, setAmountValue] = useState(0);\n const [inputValue, setInputValue] = useState('0');\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const minAmount = 0;\n\n /**\n * This function controls the displayState\n */\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case amountValue > 0:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount]);\n\n /**\n * Function that sets the amountValue to the amount\n */\n useEffect(() => {\n if (!amount) {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n /**\n * Function that updates the onChange event\n */\n useEffect(() => {\n if (onChange) {\n onChange(amountValue);\n }\n }, [amountValue, onChange]);\n\n const handleAmountAdd = () => {\n setAmountValue((prevState) => prevState + 1);\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n };\n\n const handleAmountRemove = () => {\n setAmountValue((prevState) => prevState - 1);\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n };\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== 0) {\n return;\n }\n\n setAmountValue(1);\n setInputValue('1');\n }, [amountValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n if (inputValue === '') {\n setInputValue('0');\n }\n }, [inputValue]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const valueBeforeCheck = Number(event.target.value);\n\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Number(event.target.value),\n });\n\n if (valueBeforeCheck < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n },\n [maxAmount, minAmount]\n );\n\n const leftIcon = useMemo(() => {\n let item: ReactElement | null = null;\n\n switch (displayState) {\n case 'default':\n item = <Icon icons={['fa fa-cart-shopping']} size={15} />;\n break;\n case 'delete':\n item = <Icon icons={['fa ts-trash']} size={25} />;\n break;\n case 'normal':\n item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n break;\n default:\n break;\n }\n\n return item;\n }, [displayState]);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount}>\n <StyledMotionAmountControlButton\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n >\n {leftIcon}\n </StyledMotionAmountControlButton>\n <StyledAmountControlInput\n displayState={displayState}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n type={amountValue === 0 ? 'text' : 'number'}\n />\n <AnimatePresence initial={false}>\n {displayState === 'normal' && (\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{ width: 40, opacity: 1, padding: 0 }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountAdd}\n disabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n minAmount,\n ]\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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"}
package/lib/components/amount-control/AmountControl.styles.d.ts CHANGED
@@ -1,10 +1,13 @@
1
+ import type { DisplayState } from './AmountControl';
1
2
  export declare const StyledAmountControl: import("styled-components").StyledComponent<"div", any, {
2
3
  theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
3
4
  }, never>;
4
5
  export declare const StyledAmountControlInput: import("styled-components").StyledComponent<"input", any, {
6
+ displayState: DisplayState;
7
+ } & {
5
8
  theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
6
9
  }, never>;
7
- export declare const StyledAmountControlButton: import("styled-components").StyledComponent<"button", any, {
10
+ export declare const StyledMotionAmountControlButton: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, any, {
8
11
  disabled: boolean;
9
12
  } & {
10
13
  theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
package/lib/components/amount-control/AmountControl.styles.js CHANGED
@@ -3,7 +3,8 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledAmountControlInput = exports.StyledAmountControlButton = exports.StyledAmountControl = void 0;
6
+ exports.StyledMotionAmountControlButton = exports.StyledAmountControlInput = exports.StyledAmountControl = void 0;
7
+ var _framerMotion = require("framer-motion");
7
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
9
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
9
10
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -30,21 +31,31 @@ const StyledAmountControlInput = _styledComponents.default.input`
30
31
  height: 28px;
31
32
  width: 95px;
32
33
  text-align: center;
34
+ ${_ref3 => {
35
+ let {
36
+ displayState
37
+ } = _ref3;
38
+ return displayState !== 'normal' && (0, _styledComponents.css)`
39
+ border-bottom-right-radius: 3px;
40
+ border-top-right-radius: 3px;
41
+ `;
42
+ }}
33
43
  `;
34
44
  exports.StyledAmountControlInput = StyledAmountControlInput;
35
- const StyledAmountControlButton = _styledComponents.default.button`
45
+ const StyledMotionAmountControlButton = (0, _styledComponents.default)(_framerMotion.motion.button)`
46
+ overflow: hidden;
36
47
  background-color: rgba(255, 255, 255, 0.2);
37
48
  height: 28px;
38
49
  width: 40px;
39
50
 
40
- ${_ref3 => {
51
+ ${_ref4 => {
41
52
  let {
42
53
  disabled
43
- } = _ref3;
54
+ } = _ref4;
44
55
  return disabled && (0, _styledComponents.css)`
45
56
  opacity: 0.5;
46
57
  `;
47
58
  }}
48
59
  `;
49
- exports.StyledAmountControlButton = StyledAmountControlButton;
60
+ exports.StyledMotionAmountControlButton = StyledMotionAmountControlButton;
50
61
  //# sourceMappingURL=AmountControl.styles.js.map
package/lib/components/amount-control/AmountControl.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AmountControl.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledAmountControl","styled","div","_ref","theme","exports","StyledAmountControlInput","input","_ref2","StyledAmountControlButton","button","_ref3","disabled","css"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n display: flex;\n width: fit-content;\n border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<unknown>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n border: none;\n height: 28px;\n width: 95px;\n text-align: center;\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n disabled: boolean;\n}>;\n\nexport const StyledAmountControlButton = styled.button<StyledAmountControlButtonProps>`\n background-color: rgba(255, 255, 255, 0.2);\n height: 28px;\n width: 40px;\n\n ${({ disabled }) =>\n disabled &&\n css`\n opacity: 0.5;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAKzC,MAAMW,mBAAmB,GAAGC,yBAAM,CAACC,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAL,mBAAA,GAAAA,mBAAA;AAIK,MAAMM,wBAAwB,GAAGL,yBAAM,CAACM,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAC,wBAAA,GAAAA,wBAAA;AAMK,MAAMG,yBAAyB,GAAGR,yBAAM,CAACS,MAAuC;AACvF;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OACXC,QAAQ,IACR,IAAAC,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACR,OAAA,CAAAI,yBAAA,GAAAA,yBAAA"}
1
+ {"version":3,"file":"AmountControl.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledAmountControl","styled","div","_ref","theme","exports","StyledAmountControlInput","input","_ref2","_ref3","displayState","css","StyledMotionAmountControlButton","motion","button","_ref4","disabled"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n display: flex;\n width: fit-content;\n border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n displayState: DisplayState;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n border: none;\n height: 28px;\n width: 95px;\n text-align: center;\n ${({ displayState }) =>\n displayState !== 'normal' &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n disabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n motion.button\n)<StyledAmountControlButtonProps>`\n overflow: hidden;\n background-color: rgba(255, 255, 255, 0.2);\n height: 28px;\n width: 40px;\n\n ${({ disabled }) =>\n disabled &&\n css`\n opacity: 0.5;\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAF,wBAAAM,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAMzC,MAAMW,mBAAmB,GAAGC,yBAAM,CAACC,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAL,mBAAA,GAAAA,mBAAA;AAMK,MAAMM,wBAAwB,GAAGL,yBAAM,CAACM,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA,MAAMK,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,KAAK,QAAQ,IACzB,IAAAC,qBAAG,CAAC;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACN,OAAA,CAAAC,wBAAA,GAAAA,wBAAA;AAMK,MAAMM,+BAA+B,GAAG,IAAAX,yBAAM,EACjDY,oBAAM,CAACC,MACX,CAAkC;AAClC;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OACXC,QAAQ,IACR,IAAAL,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACN,OAAA,CAAAO,+BAAA,GAAAA,+BAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.170",
3
+ "version": "5.0.0-beta.171",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "keywords": [
6
6
  "chayns",
@@ -63,5 +63,5 @@
63
63
  "publishConfig": {
64
64
  "access": "public"
65
65
  },
66
- "gitHead": "dde180e58bf0e0c1f5de22b3c85bd5766ccfbef6"
66
+ "gitHead": "be76b0e95c1ebe6f21f2f9a365c068b8dd5cc0cf"
67
67
  }