@chayns-components/devalue-slider 5.0.0-beta.766 → 5.0.0-beta.768
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/timer/Timer.js +1 -1
- package/lib/cjs/components/timer/Timer.js.map +1 -1
- package/lib/cjs/components/timer/Timer.styles.js +7 -19
- package/lib/cjs/components/timer/Timer.styles.js.map +1 -1
- package/lib/esm/components/timer/Timer.js +2 -2
- package/lib/esm/components/timer/Timer.js.map +1 -1
- package/lib/esm/components/timer/Timer.styles.js +6 -18
- package/lib/esm/components/timer/Timer.styles.js.map +1 -1
- package/lib/types/components/timer/Timer.styles.d.ts +1 -0
- package/package.json +2 -2
|
@@ -64,7 +64,7 @@ const Timer = ({
|
|
|
64
64
|
$textColor: textColor,
|
|
65
65
|
$backgroundColor: color,
|
|
66
66
|
onPointerDownCapture: handlePointerDownCapture
|
|
67
|
-
}, label);
|
|
67
|
+
}, /*#__PURE__*/_react.default.createElement(_Timer.Time, null, label));
|
|
68
68
|
};
|
|
69
69
|
var _default = exports.default = Timer;
|
|
70
70
|
//# sourceMappingURL=Timer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timer.js","names":["_dateFns","require","_react","_interopRequireWildcard","_chaynsApi","_locale","_Timer","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Timer","devalueTime","color","textColor","refDate","useRef","Date","distance","setDistance","useState","intervalToDuration","start","end","minutesShowValue","useMemo","Math","max","minutes","toString","secondsShowValue","seconds","useEffect","current","interval","setInterval","clearInterval","handlePointerDownCapture","useCallback","vibrate","pattern","iOSFeedbackVibration","label","text","differenceInHours","distanceLabel","formatDistanceToNow","addSuffix","locale","de","charAt","toUpperCase","slice","differenceInMinutes","replace","format","createElement","Container","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture","_default","exports"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import {\n differenceInHours,\n differenceInMinutes,\n format,\n formatDistanceToNow,\n intervalToDuration,\n} from 'date-fns';\nimport React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { vibrate } from 'chayns-api';\n\nimport { de } from 'date-fns/locale';\nimport { Container } from './Timer.styles';\n\nexport type TimerProps = {\n color: string;\n devalueTime: Date;\n textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n const refDate = useRef(new Date());\n const [distance, setDistance] = useState(\n intervalToDuration({\n start: devalueTime,\n end: new Date(),\n }),\n );\n const minutesShowValue = useMemo(\n () => Math.max(distance.minutes ?? 0, 0).toString(),\n [distance.minutes],\n );\n const secondsShowValue = useMemo(\n () => Math.max(distance.seconds ?? 0, 0).toString(),\n [distance.seconds],\n );\n\n useEffect(() => {\n refDate.current = new Date();\n const interval = setInterval(() => {\n refDate.current = new Date();\n setDistance(\n intervalToDuration({\n start: devalueTime,\n end: refDate.current,\n }),\n );\n }, 500);\n return () => clearInterval(interval);\n }, [devalueTime]);\n\n const handlePointerDownCapture = useCallback(() => {\n void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n }, []);\n\n const label = useMemo(() => {\n let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n if (differenceInHours(refDate.current, devalueTime) > 0) {\n const distanceLabel =\n formatDistanceToNow(devalueTime, {\n addSuffix: true,\n locale: de,\n })\n .charAt(0)\n .toUpperCase() +\n formatDistanceToNow(devalueTime, { addSuffix: true, locale: de }).slice(1);\n text = `${distanceLabel} (##TIME## Uhr)`;\n } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n }\n\n return text\n .replace('##MINUTES##', minutesShowValue)\n .replace('##SECONDS##', secondsShowValue)\n .replace('##TIME##', format(devalueTime, 'HH:mm'));\n }, [minutesShowValue, secondsShowValue, devalueTime]);\n\n return (\n <Container\n $baseFontSize={17}\n $borderSize={2}\n $height={50}\n $color={color}\n $textColor={textColor}\n $backgroundColor={color}\n onPointerDownCapture={handlePointerDownCapture}\n >\n {label}
|
|
1
|
+
{"version":3,"file":"Timer.js","names":["_dateFns","require","_react","_interopRequireWildcard","_chaynsApi","_locale","_Timer","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Timer","devalueTime","color","textColor","refDate","useRef","Date","distance","setDistance","useState","intervalToDuration","start","end","minutesShowValue","useMemo","Math","max","minutes","toString","secondsShowValue","seconds","useEffect","current","interval","setInterval","clearInterval","handlePointerDownCapture","useCallback","vibrate","pattern","iOSFeedbackVibration","label","text","differenceInHours","distanceLabel","formatDistanceToNow","addSuffix","locale","de","charAt","toUpperCase","slice","differenceInMinutes","replace","format","createElement","Container","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture","Time","_default","exports"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import {\n differenceInHours,\n differenceInMinutes,\n format,\n formatDistanceToNow,\n intervalToDuration,\n} from 'date-fns';\nimport React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { vibrate } from 'chayns-api';\n\nimport { de } from 'date-fns/locale';\nimport { Container, Time } from './Timer.styles';\n\nexport type TimerProps = {\n color: string;\n devalueTime: Date;\n textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n const refDate = useRef(new Date());\n const [distance, setDistance] = useState(\n intervalToDuration({\n start: devalueTime,\n end: new Date(),\n }),\n );\n const minutesShowValue = useMemo(\n () => Math.max(distance.minutes ?? 0, 0).toString(),\n [distance.minutes],\n );\n const secondsShowValue = useMemo(\n () => Math.max(distance.seconds ?? 0, 0).toString(),\n [distance.seconds],\n );\n\n useEffect(() => {\n refDate.current = new Date();\n const interval = setInterval(() => {\n refDate.current = new Date();\n setDistance(\n intervalToDuration({\n start: devalueTime,\n end: refDate.current,\n }),\n );\n }, 500);\n return () => clearInterval(interval);\n }, [devalueTime]);\n\n const handlePointerDownCapture = useCallback(() => {\n void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n }, []);\n\n const label = useMemo(() => {\n let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n if (differenceInHours(refDate.current, devalueTime) > 0) {\n const distanceLabel =\n formatDistanceToNow(devalueTime, {\n addSuffix: true,\n locale: de,\n })\n .charAt(0)\n .toUpperCase() +\n formatDistanceToNow(devalueTime, { addSuffix: true, locale: de }).slice(1);\n text = `${distanceLabel} (##TIME## Uhr)`;\n } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n }\n\n return text\n .replace('##MINUTES##', minutesShowValue)\n .replace('##SECONDS##', secondsShowValue)\n .replace('##TIME##', format(devalueTime, 'HH:mm'));\n }, [minutesShowValue, secondsShowValue, devalueTime]);\n\n return (\n <Container\n $baseFontSize={17}\n $borderSize={2}\n $height={50}\n $color={color}\n $textColor={textColor}\n $backgroundColor={color}\n onPointerDownCapture={handlePointerDownCapture}\n >\n <Time>{label}</Time>\n </Container>\n );\n};\n\nexport default Timer;\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.Container = void 0;
|
|
6
|
+
exports.Time = exports.Container = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
var _Slider = require("../slider/Slider.styles");
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -18,25 +18,13 @@ const Container = exports.Container = (0, _styledComponents.default)(_Slider.Tra
|
|
|
18
18
|
flex-direction: row;
|
|
19
19
|
align-items: center;
|
|
20
20
|
justify-content: center;
|
|
21
|
-
font-size: 4.5vw;
|
|
22
|
-
font-weight: 700;
|
|
23
21
|
cursor: pointer;
|
|
24
22
|
color: white;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
font-size: 2vw;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
@media (min-width: 1024px) {
|
|
35
|
-
font-size: 1.5vw;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
@media (min-width: 1200px) {
|
|
39
|
-
font-size: 25px;
|
|
40
|
-
}
|
|
23
|
+
container-type: inline-size;
|
|
24
|
+
`;
|
|
25
|
+
const Time = exports.Time = _styledComponents.default.div`
|
|
26
|
+
font-size: 6cqw;
|
|
27
|
+
font-weight: 700;
|
|
28
|
+
color: white;
|
|
41
29
|
`;
|
|
42
30
|
//# sourceMappingURL=Timer.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timer.styles.js","names":["_styledComponents","_interopRequireDefault","require","_Slider","e","__esModule","default","Container","exports","styled","Track","$height","$color"],"sources":["../../../../src/components/timer/Timer.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Track } from '../slider/Slider.styles';\n\nexport const Container = styled(Track)<{\n $color: string;\n $textColor: string;\n $baseFontSize: number;\n}>`\n height: ${({ $height }) => $height}px !important;\n background-color: ${({ $color }) => $color};\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n
|
|
1
|
+
{"version":3,"file":"Timer.styles.js","names":["_styledComponents","_interopRequireDefault","require","_Slider","e","__esModule","default","Container","exports","styled","Track","$height","$color","Time","div"],"sources":["../../../../src/components/timer/Timer.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Track } from '../slider/Slider.styles';\n\nexport const Container = styled(Track)<{\n $color: string;\n $textColor: string;\n $baseFontSize: number;\n}>`\n height: ${({ $height }) => $height}px !important;\n background-color: ${({ $color }) => $color};\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: white;\n container-type: inline-size;\n`;\n\nexport const Time = styled.div`\n font-size: 6cqw;\n font-weight: 700;\n color: white;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAAgD,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEzC,MAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,yBAAM,EAACC,aAAK,CAInC;AACF,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC,wBAAwB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,IAAI,GAAAL,OAAA,CAAAK,IAAA,GAAGJ,yBAAM,CAACK,GAAG;AAC9B;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@ import { differenceInHours, differenceInMinutes, format, formatDistanceToNow, in
|
|
|
2
2
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { vibrate } from 'chayns-api';
|
|
4
4
|
import { de } from 'date-fns/locale';
|
|
5
|
-
import { Container } from './Timer.styles';
|
|
5
|
+
import { Container, Time } from './Timer.styles';
|
|
6
6
|
const Timer = _ref => {
|
|
7
7
|
let {
|
|
8
8
|
devalueTime,
|
|
@@ -57,7 +57,7 @@ const Timer = _ref => {
|
|
|
57
57
|
$textColor: textColor,
|
|
58
58
|
$backgroundColor: color,
|
|
59
59
|
onPointerDownCapture: handlePointerDownCapture
|
|
60
|
-
}, label);
|
|
60
|
+
}, /*#__PURE__*/React.createElement(Time, null, label));
|
|
61
61
|
};
|
|
62
62
|
export default Timer;
|
|
63
63
|
//# sourceMappingURL=Timer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timer.js","names":["differenceInHours","differenceInMinutes","format","formatDistanceToNow","intervalToDuration","React","useCallback","useEffect","useMemo","useRef","useState","vibrate","de","Container","Timer","_ref","devalueTime","color","textColor","refDate","Date","distance","setDistance","start","end","minutesShowValue","Math","max","minutes","toString","secondsShowValue","seconds","current","interval","setInterval","clearInterval","handlePointerDownCapture","pattern","iOSFeedbackVibration","label","text","distanceLabel","addSuffix","locale","charAt","toUpperCase","slice","replace","createElement","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import {\n differenceInHours,\n differenceInMinutes,\n format,\n formatDistanceToNow,\n intervalToDuration,\n} from 'date-fns';\nimport React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { vibrate } from 'chayns-api';\n\nimport { de } from 'date-fns/locale';\nimport { Container } from './Timer.styles';\n\nexport type TimerProps = {\n color: string;\n devalueTime: Date;\n textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n const refDate = useRef(new Date());\n const [distance, setDistance] = useState(\n intervalToDuration({\n start: devalueTime,\n end: new Date(),\n }),\n );\n const minutesShowValue = useMemo(\n () => Math.max(distance.minutes ?? 0, 0).toString(),\n [distance.minutes],\n );\n const secondsShowValue = useMemo(\n () => Math.max(distance.seconds ?? 0, 0).toString(),\n [distance.seconds],\n );\n\n useEffect(() => {\n refDate.current = new Date();\n const interval = setInterval(() => {\n refDate.current = new Date();\n setDistance(\n intervalToDuration({\n start: devalueTime,\n end: refDate.current,\n }),\n );\n }, 500);\n return () => clearInterval(interval);\n }, [devalueTime]);\n\n const handlePointerDownCapture = useCallback(() => {\n void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n }, []);\n\n const label = useMemo(() => {\n let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n if (differenceInHours(refDate.current, devalueTime) > 0) {\n const distanceLabel =\n formatDistanceToNow(devalueTime, {\n addSuffix: true,\n locale: de,\n })\n .charAt(0)\n .toUpperCase() +\n formatDistanceToNow(devalueTime, { addSuffix: true, locale: de }).slice(1);\n text = `${distanceLabel} (##TIME## Uhr)`;\n } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n }\n\n return text\n .replace('##MINUTES##', minutesShowValue)\n .replace('##SECONDS##', secondsShowValue)\n .replace('##TIME##', format(devalueTime, 'HH:mm'));\n }, [minutesShowValue, secondsShowValue, devalueTime]);\n\n return (\n <Container\n $baseFontSize={17}\n $borderSize={2}\n $height={50}\n $color={color}\n $textColor={textColor}\n $backgroundColor={color}\n onPointerDownCapture={handlePointerDownCapture}\n >\n {label}
|
|
1
|
+
{"version":3,"file":"Timer.js","names":["differenceInHours","differenceInMinutes","format","formatDistanceToNow","intervalToDuration","React","useCallback","useEffect","useMemo","useRef","useState","vibrate","de","Container","Time","Timer","_ref","devalueTime","color","textColor","refDate","Date","distance","setDistance","start","end","minutesShowValue","Math","max","minutes","toString","secondsShowValue","seconds","current","interval","setInterval","clearInterval","handlePointerDownCapture","pattern","iOSFeedbackVibration","label","text","distanceLabel","addSuffix","locale","charAt","toUpperCase","slice","replace","createElement","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import {\n differenceInHours,\n differenceInMinutes,\n format,\n formatDistanceToNow,\n intervalToDuration,\n} from 'date-fns';\nimport React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { vibrate } from 'chayns-api';\n\nimport { de } from 'date-fns/locale';\nimport { Container, Time } from './Timer.styles';\n\nexport type TimerProps = {\n color: string;\n devalueTime: Date;\n textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n const refDate = useRef(new Date());\n const [distance, setDistance] = useState(\n intervalToDuration({\n start: devalueTime,\n end: new Date(),\n }),\n );\n const minutesShowValue = useMemo(\n () => Math.max(distance.minutes ?? 0, 0).toString(),\n [distance.minutes],\n );\n const secondsShowValue = useMemo(\n () => Math.max(distance.seconds ?? 0, 0).toString(),\n [distance.seconds],\n );\n\n useEffect(() => {\n refDate.current = new Date();\n const interval = setInterval(() => {\n refDate.current = new Date();\n setDistance(\n intervalToDuration({\n start: devalueTime,\n end: refDate.current,\n }),\n );\n }, 500);\n return () => clearInterval(interval);\n }, [devalueTime]);\n\n const handlePointerDownCapture = useCallback(() => {\n void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n }, []);\n\n const label = useMemo(() => {\n let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n if (differenceInHours(refDate.current, devalueTime) > 0) {\n const distanceLabel =\n formatDistanceToNow(devalueTime, {\n addSuffix: true,\n locale: de,\n })\n .charAt(0)\n .toUpperCase() +\n formatDistanceToNow(devalueTime, { addSuffix: true, locale: de }).slice(1);\n text = `${distanceLabel} (##TIME## Uhr)`;\n } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n }\n\n return text\n .replace('##MINUTES##', minutesShowValue)\n .replace('##SECONDS##', secondsShowValue)\n .replace('##TIME##', format(devalueTime, 'HH:mm'));\n }, [minutesShowValue, secondsShowValue, devalueTime]);\n\n return (\n <Container\n $baseFontSize={17}\n $borderSize={2}\n $height={50}\n $color={color}\n $textColor={textColor}\n $backgroundColor={color}\n onPointerDownCapture={handlePointerDownCapture}\n >\n <Time>{label}</Time>\n </Container>\n );\n};\n\nexport default Timer;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -17,25 +17,13 @@ export const Container = styled(Track)`
|
|
|
17
17
|
flex-direction: row;
|
|
18
18
|
align-items: center;
|
|
19
19
|
justify-content: center;
|
|
20
|
-
font-size: 4.5vw;
|
|
21
|
-
font-weight: 700;
|
|
22
20
|
cursor: pointer;
|
|
23
21
|
color: white;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
font-size: 2vw;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
@media (min-width: 1024px) {
|
|
34
|
-
font-size: 1.5vw;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
@media (min-width: 1200px) {
|
|
38
|
-
font-size: 25px;
|
|
39
|
-
}
|
|
22
|
+
container-type: inline-size;
|
|
23
|
+
`;
|
|
24
|
+
export const Time = styled.div`
|
|
25
|
+
font-size: 6cqw;
|
|
26
|
+
font-weight: 700;
|
|
27
|
+
color: white;
|
|
40
28
|
`;
|
|
41
29
|
//# sourceMappingURL=Timer.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timer.styles.js","names":["styled","Track","Container","_ref","$height","_ref2","$color"],"sources":["../../../../src/components/timer/Timer.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Track } from '../slider/Slider.styles';\n\nexport const Container = styled(Track)<{\n $color: string;\n $textColor: string;\n $baseFontSize: number;\n}>`\n height: ${({ $height }) => $height}px !important;\n background-color: ${({ $color }) => $color};\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n
|
|
1
|
+
{"version":3,"file":"Timer.styles.js","names":["styled","Track","Container","_ref","$height","_ref2","$color","Time","div"],"sources":["../../../../src/components/timer/Timer.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Track } from '../slider/Slider.styles';\n\nexport const Container = styled(Track)<{\n $color: string;\n $textColor: string;\n $baseFontSize: number;\n}>`\n height: ${({ $height }) => $height}px !important;\n background-color: ${({ $color }) => $color};\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: white;\n container-type: inline-size;\n`;\n\nexport const Time = styled.div`\n font-size: 6cqw;\n font-weight: 700;\n color: white;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,KAAK,QAAQ,yBAAyB;AAE/C,OAAO,MAAMC,SAAS,GAAGF,MAAM,CAACC,KAAK,CAInC;AACF,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,IAAA;EAAA,OAAKC,OAAO;AAAA;AACtC,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,IAAI,GAAGP,MAAM,CAACQ,GAAG;AAC9B;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -265,3 +265,4 @@ export declare const Container: import("styled-components/dist/types").IStyledCo
|
|
|
265
265
|
$textColor: string;
|
|
266
266
|
$baseFontSize: number;
|
|
267
267
|
}>> & string;
|
|
268
|
+
export declare const Time: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/devalue-slider",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.768",
|
|
4
4
|
"description": "A slider to devalue something.",
|
|
5
5
|
"siteEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -80,5 +80,5 @@
|
|
|
80
80
|
"publishConfig": {
|
|
81
81
|
"access": "public"
|
|
82
82
|
},
|
|
83
|
-
"gitHead": "
|
|
83
|
+
"gitHead": "f2aedacca74538472f2b9e39bcf004dea355b2e5"
|
|
84
84
|
}
|