@autoguru/overdrive 4.12.4 → 4.13.0
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/components/Box/argTypes.d.ts.map +1 -1
- package/dist/components/Box/argTypes.js +7 -0
- package/dist/components/SliderProgress/ProgressStep.css.d.ts +7 -0
- package/dist/components/SliderProgress/ProgressStep.css.d.ts.map +1 -0
- package/dist/components/SliderProgress/ProgressStep.css.js +38 -0
- package/dist/components/SliderProgress/ProgressStep.d.ts +13 -0
- package/dist/components/SliderProgress/ProgressStep.d.ts.map +1 -0
- package/dist/components/SliderProgress/ProgressStep.js +49 -0
- package/dist/components/SliderProgress/SliderProgress.css.d.ts +3 -0
- package/dist/components/SliderProgress/SliderProgress.css.d.ts.map +1 -0
- package/dist/components/SliderProgress/SliderProgress.css.js +18 -0
- package/dist/components/SliderProgress/SliderProgress.d.ts +13 -0
- package/dist/components/SliderProgress/SliderProgress.d.ts.map +1 -0
- package/dist/components/SliderProgress/SliderProgress.js +36 -0
- package/dist/components/SliderProgress/index.d.ts +2 -0
- package/dist/components/SliderProgress/index.d.ts.map +1 -0
- package/dist/components/SliderProgress/index.js +3 -0
- package/dist/components/SliderProgress/stories.js +44 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -1
- package/dist/hooks/useAnimationEvents/index.d.ts +2 -0
- package/dist/hooks/useAnimationEvents/index.d.ts.map +1 -0
- package/dist/hooks/useAnimationEvents/index.js +3 -0
- package/dist/hooks/useAnimationEvents/useAnimationEvents.d.ts +11 -0
- package/dist/hooks/useAnimationEvents/useAnimationEvents.d.ts.map +1 -0
- package/dist/hooks/useAnimationEvents/useAnimationEvents.js +34 -0
- package/dist/themes/base/tokens.d.ts +1 -0
- package/dist/themes/base/tokens.d.ts.map +1 -1
- package/dist/themes/base/tokens.js +2 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"argTypes.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/argTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"argTypes.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/argTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAWrD,CAAC;AAoCF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,CAwErE,CAAC"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
4
4
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
5
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
+
import { defaultGamut } from "../../themes/base/tokens.js";
|
|
6
7
|
export const scaleOptions = ['none', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
|
7
8
|
const scaledProps = ['padding', 'paddingX', 'paddingY', 'paddingTop', 'paddingRight', 'paddingLeft', 'margin', 'marginX', 'marginY', 'marginTop', 'marginRight', 'marginLeft'];
|
|
8
9
|
const boxShadowOptions = ['none', '1', '2', '3', '4', '5'];
|
|
@@ -10,6 +11,12 @@ const borderRadiusOptions = ['none', '1', 'min', 'full', 'pill'];
|
|
|
10
11
|
const widthOptions = ['full', 'none'];
|
|
11
12
|
const oderOptions = [0, 1, 2];
|
|
12
13
|
export const boxArgTypes = _objectSpread({
|
|
14
|
+
backgroundColour: {
|
|
15
|
+
options: Object.keys(defaultGamut),
|
|
16
|
+
control: {
|
|
17
|
+
type: 'select'
|
|
18
|
+
}
|
|
19
|
+
},
|
|
13
20
|
boxShadow: {
|
|
14
21
|
options: boxShadowOptions,
|
|
15
22
|
control: {
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const empty: string;
|
|
2
|
+
export declare const item: string;
|
|
3
|
+
export declare const fill: string;
|
|
4
|
+
export declare const active: string;
|
|
5
|
+
export declare const paused: string;
|
|
6
|
+
export declare const passed: string;
|
|
7
|
+
//# sourceMappingURL=ProgressStep.css.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressStep.css.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/ProgressStep.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,QAEhB,CAAC;AAWH,eAAO,MAAM,IAAI,QAKf,CAAC;AAEH,eAAO,MAAM,IAAI,QAKf,CAAC;AAEH,eAAO,MAAM,MAAM,QAEjB,CAAC;AAEH,eAAO,MAAM,MAAM,QAEjB,CAAC;AAEH,eAAO,MAAM,MAAM,QAEjB,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
|
|
4
|
+
__vanilla_filescope__.setFileScope("lib/components/SliderProgress/ProgressStep.css.ts", "@autoguru/overdrive");
|
|
5
|
+
import { keyframes, style } from '@vanilla-extract/css';
|
|
6
|
+
export const empty = style({
|
|
7
|
+
opacity: 0.4
|
|
8
|
+
}, "empty");
|
|
9
|
+
const scaleAnim = keyframes({
|
|
10
|
+
'0%': {
|
|
11
|
+
transform: 'scale(0, 1)'
|
|
12
|
+
},
|
|
13
|
+
'100%': {
|
|
14
|
+
transform: 'scale(1, 1)'
|
|
15
|
+
}
|
|
16
|
+
}, "scaleAnim");
|
|
17
|
+
export const item = style({
|
|
18
|
+
top: 0,
|
|
19
|
+
right: 0,
|
|
20
|
+
bottom: 0,
|
|
21
|
+
left: 0
|
|
22
|
+
}, "item");
|
|
23
|
+
export const fill = style({
|
|
24
|
+
animationTimingFunction: 'linear',
|
|
25
|
+
transformOrigin: '0% center',
|
|
26
|
+
animationPlayState: 'paused',
|
|
27
|
+
animationName: scaleAnim
|
|
28
|
+
}, "fill");
|
|
29
|
+
export const active = style({
|
|
30
|
+
animationPlayState: 'running'
|
|
31
|
+
}, "active");
|
|
32
|
+
export const paused = style({
|
|
33
|
+
animationPlayState: 'paused'
|
|
34
|
+
}, "paused");
|
|
35
|
+
export const passed = style({
|
|
36
|
+
animation: 'none'
|
|
37
|
+
}, "passed");
|
|
38
|
+
__vanilla_filescope__.endFileScope();
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ComponentProps, NamedExoticComponent } from 'react';
|
|
2
|
+
import { Box } from '../Box';
|
|
3
|
+
interface Props extends Pick<ComponentProps<typeof Box>, 'backgroundColour'> {
|
|
4
|
+
className?: string;
|
|
5
|
+
paused: boolean;
|
|
6
|
+
isActive: boolean;
|
|
7
|
+
hasPassed: boolean;
|
|
8
|
+
duration: string;
|
|
9
|
+
onFinished(): void;
|
|
10
|
+
}
|
|
11
|
+
export declare const ProgressStep: NamedExoticComponent<Props>;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=ProgressStep.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/ProgressStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAe,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAEjB,UAAU,IAAI,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,KAAK,CAoDpD,CAAC"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { memo, useCallback } from 'react';
|
|
5
|
+
import { useAnimationEvents } from "../../hooks/useAnimationEvents/index.js";
|
|
6
|
+
import { Box } from "../Box/index.js";
|
|
7
|
+
import * as styles from "./ProgressStep.css.js";
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
export const ProgressStep = memo(_ref => {
|
|
11
|
+
let {
|
|
12
|
+
className = '',
|
|
13
|
+
paused,
|
|
14
|
+
isActive,
|
|
15
|
+
hasPassed,
|
|
16
|
+
duration,
|
|
17
|
+
backgroundColour = 'white',
|
|
18
|
+
onFinished
|
|
19
|
+
} = _ref;
|
|
20
|
+
const {
|
|
21
|
+
elementRef
|
|
22
|
+
} = useAnimationEvents({
|
|
23
|
+
onAnimationEnd: useCallback(() => !hasPassed && isActive && onFinished(), [isActive, hasPassed, onFinished])
|
|
24
|
+
});
|
|
25
|
+
return _jsxs(Box, {
|
|
26
|
+
className: className,
|
|
27
|
+
position: "relative",
|
|
28
|
+
children: [_jsx(Box, {
|
|
29
|
+
ref: elementRef,
|
|
30
|
+
position: "absolute",
|
|
31
|
+
display: hasPassed ? 'none' : 'block',
|
|
32
|
+
className: [styles.item, styles.empty],
|
|
33
|
+
backgroundColour: backgroundColour
|
|
34
|
+
}), _jsx(Box, {
|
|
35
|
+
ref: elementRef,
|
|
36
|
+
position: "absolute",
|
|
37
|
+
display: isActive || hasPassed ? 'block' : 'none',
|
|
38
|
+
className: [styles.item, styles.fill, {
|
|
39
|
+
[styles.passed]: hasPassed,
|
|
40
|
+
[styles.active]: isActive,
|
|
41
|
+
[styles.paused]: isActive && paused
|
|
42
|
+
}],
|
|
43
|
+
backgroundColour: backgroundColour,
|
|
44
|
+
style: {
|
|
45
|
+
animationDuration: duration
|
|
46
|
+
}
|
|
47
|
+
})]
|
|
48
|
+
});
|
|
49
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderProgress.css.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/SliderProgress.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
|
|
4
|
+
__vanilla_filescope__.setFileScope("lib/components/SliderProgress/SliderProgress.css.ts", "@autoguru/overdrive");
|
|
5
|
+
import { style } from '@vanilla-extract/css';
|
|
6
|
+
import { themeContractVars as vars } from "../../themes/theme.css.js";
|
|
7
|
+
export const root = style({
|
|
8
|
+
display: 'grid',
|
|
9
|
+
gridGap: vars.space['1'],
|
|
10
|
+
padding: "".concat(vars.space['3'], " ").concat(vars.space['4']),
|
|
11
|
+
alignContent: 'center',
|
|
12
|
+
justifyContent: 'center',
|
|
13
|
+
alignItems: 'center'
|
|
14
|
+
}, "root");
|
|
15
|
+
export const step = style({
|
|
16
|
+
height: '2px'
|
|
17
|
+
}, "step");
|
|
18
|
+
__vanilla_filescope__.endFileScope();
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ComponentProps, NamedExoticComponent } from 'react';
|
|
2
|
+
import { Box } from '../Box';
|
|
3
|
+
interface Props extends Pick<ComponentProps<typeof Box>, 'backgroundColour'> {
|
|
4
|
+
className?: string;
|
|
5
|
+
paused: boolean;
|
|
6
|
+
totalCount: number;
|
|
7
|
+
activeIndex: number;
|
|
8
|
+
duration: string;
|
|
9
|
+
onRequestNext(): void;
|
|
10
|
+
}
|
|
11
|
+
export declare const SliderProgress: NamedExoticComponent<Props>;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=SliderProgress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliderProgress.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/SliderProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAK7B,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IAEjB,aAAa,IAAI,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,KAAK,CAgCtD,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { memo } from 'react';
|
|
6
|
+
import { ProgressStep } from "./ProgressStep.js";
|
|
7
|
+
import * as styles from "./SliderProgress.css.js";
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
export const SliderProgress = memo(_ref => {
|
|
10
|
+
let {
|
|
11
|
+
className = '',
|
|
12
|
+
paused,
|
|
13
|
+
totalCount,
|
|
14
|
+
activeIndex,
|
|
15
|
+
duration,
|
|
16
|
+
backgroundColour,
|
|
17
|
+
onRequestNext
|
|
18
|
+
} = _ref;
|
|
19
|
+
return _jsx("div", {
|
|
20
|
+
className: clsx(className, styles.root),
|
|
21
|
+
style: {
|
|
22
|
+
gridTemplateColumns: "repeat(".concat(totalCount, ", 1fr)")
|
|
23
|
+
},
|
|
24
|
+
children: Array.from({
|
|
25
|
+
length: totalCount
|
|
26
|
+
}).fill('').map((_, index) => _jsx(ProgressStep, {
|
|
27
|
+
className: styles.step,
|
|
28
|
+
paused: paused,
|
|
29
|
+
duration: duration,
|
|
30
|
+
backgroundColour: backgroundColour,
|
|
31
|
+
hasPassed: index < activeIndex,
|
|
32
|
+
isActive: index === activeIndex,
|
|
33
|
+
onFinished: onRequestNext
|
|
34
|
+
}, index))
|
|
35
|
+
});
|
|
36
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
4
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
+
import { action } from '@storybook/addon-actions';
|
|
7
|
+
import * as React from 'react';
|
|
8
|
+
import { Box } from "../Box/index.js";
|
|
9
|
+
import { boxArgTypes } from "../Box/argTypes.js";
|
|
10
|
+
import { SliderProgress } from "./index.js";
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
export default {
|
|
13
|
+
title: 'Components/Progress/SliderProgress',
|
|
14
|
+
component: SliderProgress,
|
|
15
|
+
argTypes: {
|
|
16
|
+
backgroundColour: boxArgTypes.backgroundColour
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
const template = args => _jsx(Box, {
|
|
20
|
+
paddingY: "8",
|
|
21
|
+
paddingX: "3",
|
|
22
|
+
backgroundColour: "gray800",
|
|
23
|
+
children: _jsx(SliderProgress, _objectSpread({}, args))
|
|
24
|
+
});
|
|
25
|
+
const standardProps = {
|
|
26
|
+
paused: false,
|
|
27
|
+
totalCount: 3,
|
|
28
|
+
activeIndex: 1,
|
|
29
|
+
duration: '1s',
|
|
30
|
+
onRequestNext: () => action('onRequestNext')
|
|
31
|
+
};
|
|
32
|
+
export const standard = template.bind(standardProps);
|
|
33
|
+
standard.args = standardProps;
|
|
34
|
+
const withBackgroundColourProps = _objectSpread(_objectSpread({}, standardProps), {}, {
|
|
35
|
+
backgroundColour: 'yellow500'
|
|
36
|
+
});
|
|
37
|
+
export const withBackgroundColour = template.bind(withBackgroundColourProps);
|
|
38
|
+
withBackgroundColour.args = withBackgroundColourProps;
|
|
39
|
+
const withManySlidesProps = _objectSpread(_objectSpread({}, standardProps), {}, {
|
|
40
|
+
activeIndex: 5,
|
|
41
|
+
totalCount: 20
|
|
42
|
+
});
|
|
43
|
+
export const withManySlides = template.bind(withManySlidesProps);
|
|
44
|
+
withManySlides.args = withManySlidesProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -56,4 +56,5 @@ export * from "./NumberBubble/index.js";
|
|
|
56
56
|
export * from "./TextBubble/index.js";
|
|
57
57
|
export * from "./ColourInput/index.js";
|
|
58
58
|
export * from "./DividerLine/index.js";
|
|
59
|
-
export * from "./ThemeOverrideProvider/index.js";
|
|
59
|
+
export * from "./ThemeOverrideProvider/index.js";
|
|
60
|
+
export * from "./SliderProgress/index.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useAnimationEvents/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { MutableRefObject } from 'react';
|
|
2
|
+
interface UseImageLoadingProps {
|
|
3
|
+
elementRef?: MutableRefObject<any>;
|
|
4
|
+
onAnimationStart?(e?: AnimationEvent): void;
|
|
5
|
+
onAnimationEnd?(e?: AnimationEvent): void;
|
|
6
|
+
}
|
|
7
|
+
export declare const useAnimationEvents: <T>({ onAnimationStart: incomingOnAnimationStart, onAnimationEnd: incomingOnAnimationEnd, elementRef: incomingRef, }: UseImageLoadingProps) => {
|
|
8
|
+
elementRef: any;
|
|
9
|
+
};
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=useAnimationEvents.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAnimationEvents.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useAnimationEvents/useAnimationEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAqB,MAAM,OAAO,CAAC;AAE5D,UAAU,oBAAoB;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAEnC,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAE5C,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;CAC1C;AAUD,eAAO,MAAM,kBAAkB,wHAI5B,oBAAoB;;CAoCtB,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useRef } from 'react';
|
|
4
|
+
const finishEvents = ['animationend', 'transitionend', 'transitioncancel'];
|
|
5
|
+
const startEvents = ['animationstart', 'transitionrun'];
|
|
6
|
+
export const useAnimationEvents = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
onAnimationStart: incomingOnAnimationStart = () => void 0,
|
|
9
|
+
onAnimationEnd: incomingOnAnimationEnd = () => void 0,
|
|
10
|
+
elementRef: incomingRef
|
|
11
|
+
} = _ref;
|
|
12
|
+
const elementRef = incomingRef !== null && incomingRef !== void 0 && incomingRef.current ? incomingRef : useRef();
|
|
13
|
+
const onAnimationStart = useRef(incomingOnAnimationStart);
|
|
14
|
+
const onAnimationEnd = useRef(incomingOnAnimationEnd);
|
|
15
|
+
onAnimationEnd.current = incomingOnAnimationEnd;
|
|
16
|
+
onAnimationStart.current = incomingOnAnimationStart;
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
const startHandler = e => onAnimationStart.current(e);
|
|
19
|
+
const endHandler = e => onAnimationEnd.current(e);
|
|
20
|
+
if (elementRef.current) {
|
|
21
|
+
startEvents.forEach(event => elementRef.current.addEventListener(event, startHandler));
|
|
22
|
+
finishEvents.forEach(event => elementRef.current.addEventListener(event, endHandler));
|
|
23
|
+
}
|
|
24
|
+
return () => {
|
|
25
|
+
if (elementRef.current) {
|
|
26
|
+
startEvents.forEach(event => elementRef.current.removeEventListener(event, startHandler));
|
|
27
|
+
finishEvents.forEach(event => elementRef.current.removeEventListener(event, endHandler));
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}, [elementRef.current]);
|
|
31
|
+
return {
|
|
32
|
+
elementRef
|
|
33
|
+
};
|
|
34
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,MAAM,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,MAAM,EAAE,MAAM,WAAW,CAAC;AAgE9C,eAAO,MAAM,YAAY,iDAA4B,CAAC;AAItD,eAAO,MAAM,MAAM,EAAE,MAuNpB,CAAC"}
|
|
@@ -61,6 +61,7 @@ const colours = {
|
|
|
61
61
|
'100': '#fdf4f4'
|
|
62
62
|
}
|
|
63
63
|
};
|
|
64
|
+
export const defaultGamut = buildColourGamut(colours);
|
|
64
65
|
const white = '#fff';
|
|
65
66
|
const secondaryForeground = colours.gray['700'];
|
|
66
67
|
export const tokens = {
|
|
@@ -87,7 +88,7 @@ export const tokens = {
|
|
|
87
88
|
none: '0px'
|
|
88
89
|
},
|
|
89
90
|
colours: {
|
|
90
|
-
gamut: _objectSpread(_objectSpread({},
|
|
91
|
+
gamut: _objectSpread(_objectSpread({}, defaultGamut), {}, {
|
|
91
92
|
white
|
|
92
93
|
}),
|
|
93
94
|
foreground: {
|