@bacon-pos/ui 0.8.0 → 0.9.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/lib/commonjs/components/Icon/icons.generated.js +1 -0
- package/lib/commonjs/components/Icon/icons.generated.js.map +1 -1
- package/lib/commonjs/components/ProgressBar/ProgressBar.js +114 -0
- package/lib/commonjs/components/ProgressBar/ProgressBar.js.map +1 -0
- package/lib/commonjs/components/ProgressBar/ProgressBar.stories.js +93 -0
- package/lib/commonjs/components/ProgressBar/ProgressBar.stories.js.map +1 -0
- package/lib/commonjs/components/ProgressBar/ProgressBar.test.js +70 -0
- package/lib/commonjs/components/ProgressBar/ProgressBar.test.js.map +1 -0
- package/lib/commonjs/components/ProgressBar/index.js +13 -0
- package/lib/commonjs/components/ProgressBar/index.js.map +1 -0
- package/lib/commonjs/components/index.js +20 -9
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/module/components/Icon/icons.generated.js +1 -0
- package/lib/module/components/Icon/icons.generated.js.map +1 -1
- package/lib/module/components/ProgressBar/ProgressBar.js +110 -0
- package/lib/module/components/ProgressBar/ProgressBar.js.map +1 -0
- package/lib/module/components/ProgressBar/ProgressBar.stories.js +89 -0
- package/lib/module/components/ProgressBar/ProgressBar.stories.js.map +1 -0
- package/lib/module/components/ProgressBar/ProgressBar.test.js +70 -0
- package/lib/module/components/ProgressBar/ProgressBar.test.js.map +1 -0
- package/lib/module/components/ProgressBar/index.js +4 -0
- package/lib/module/components/ProgressBar/index.js.map +1 -0
- package/lib/module/components/index.js +1 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/typescript/commonjs/components/Icon/icons.generated.d.ts +1 -0
- package/lib/typescript/commonjs/components/Icon/icons.generated.d.ts.map +1 -1
- package/lib/typescript/commonjs/components/ProgressBar/ProgressBar.d.ts +37 -0
- package/lib/typescript/commonjs/components/ProgressBar/ProgressBar.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/ProgressBar/index.d.ts +3 -0
- package/lib/typescript/commonjs/components/ProgressBar/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/components/index.d.ts +1 -0
- package/lib/typescript/commonjs/components/index.d.ts.map +1 -1
- package/lib/typescript/module/components/Icon/icons.generated.d.ts +1 -0
- package/lib/typescript/module/components/Icon/icons.generated.d.ts.map +1 -1
- package/lib/typescript/module/components/ProgressBar/ProgressBar.d.ts +37 -0
- package/lib/typescript/module/components/ProgressBar/ProgressBar.d.ts.map +1 -0
- package/lib/typescript/module/components/ProgressBar/index.d.ts +3 -0
- package/lib/typescript/module/components/ProgressBar/index.d.ts.map +1 -0
- package/lib/typescript/module/components/index.d.ts +1 -0
- package/lib/typescript/module/components/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Icon/icons.generated.ts +1 -0
- package/src/components/ProgressBar/ProgressBar.tsx +135 -0
- package/src/components/ProgressBar/index.ts +2 -0
- package/src/components/index.ts +1 -0
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useRef } from 'react';
|
|
4
|
+
import { Animated, Easing, View } from 'react-native';
|
|
5
|
+
import { useTheme } from "../../theme/index.js";
|
|
6
|
+
import { Text } from "../Text/Text.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
const clamp01 = n => n < 0 ? 0 : n > 1 ? 1 : n;
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Determinate progress bar — the Figma "Loader". Drive it with a `progress`
|
|
12
|
+
* (0–1) prop from whatever is loading; the fill animates to match. A supporting
|
|
13
|
+
* row underneath shows a customizable `label` (default "Downloading...") on the
|
|
14
|
+
* left and the percentage on the right. Colors, height and width are tokens/props.
|
|
15
|
+
*/
|
|
16
|
+
export function ProgressBar({
|
|
17
|
+
progress,
|
|
18
|
+
label = 'Downloading...',
|
|
19
|
+
showSupporting = true,
|
|
20
|
+
showValue = true,
|
|
21
|
+
formatValue,
|
|
22
|
+
height = 32,
|
|
23
|
+
width,
|
|
24
|
+
color,
|
|
25
|
+
trackColor,
|
|
26
|
+
borderColor,
|
|
27
|
+
animated = true,
|
|
28
|
+
style,
|
|
29
|
+
accessibilityLabel
|
|
30
|
+
}) {
|
|
31
|
+
const theme = useTheme();
|
|
32
|
+
const value = clamp01(progress);
|
|
33
|
+
const percent = Math.round(value * 100);
|
|
34
|
+
const anim = useRef(new Animated.Value(value)).current;
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
if (animated) {
|
|
37
|
+
Animated.timing(anim, {
|
|
38
|
+
toValue: value,
|
|
39
|
+
duration: 240,
|
|
40
|
+
easing: Easing.out(Easing.ease),
|
|
41
|
+
useNativeDriver: false // width can't use the native driver
|
|
42
|
+
}).start();
|
|
43
|
+
} else {
|
|
44
|
+
anim.setValue(value);
|
|
45
|
+
}
|
|
46
|
+
}, [value, animated, anim]);
|
|
47
|
+
const fillWidth = anim.interpolate({
|
|
48
|
+
inputRange: [0, 1],
|
|
49
|
+
outputRange: ['0%', '100%'],
|
|
50
|
+
extrapolate: 'clamp'
|
|
51
|
+
});
|
|
52
|
+
const inset = 2.5;
|
|
53
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
54
|
+
style: [{
|
|
55
|
+
gap: 12,
|
|
56
|
+
width: width ?? undefined,
|
|
57
|
+
alignSelf: width != null ? 'flex-start' : 'stretch'
|
|
58
|
+
}, style],
|
|
59
|
+
accessibilityRole: "progressbar",
|
|
60
|
+
accessibilityLabel: accessibilityLabel ?? label,
|
|
61
|
+
accessibilityValue: {
|
|
62
|
+
min: 0,
|
|
63
|
+
max: 100,
|
|
64
|
+
now: percent
|
|
65
|
+
},
|
|
66
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
67
|
+
style: {
|
|
68
|
+
height,
|
|
69
|
+
borderRadius: height / 2,
|
|
70
|
+
borderWidth: 1.5,
|
|
71
|
+
borderColor: borderColor ?? theme.colors.border.default,
|
|
72
|
+
backgroundColor: trackColor ?? theme.colors.background.subtle,
|
|
73
|
+
padding: inset,
|
|
74
|
+
justifyContent: 'center',
|
|
75
|
+
overflow: 'hidden'
|
|
76
|
+
},
|
|
77
|
+
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
78
|
+
style: {
|
|
79
|
+
width: fillWidth,
|
|
80
|
+
height: '100%',
|
|
81
|
+
borderRadius: height / 2,
|
|
82
|
+
backgroundColor: color ?? theme.colors.action.primary
|
|
83
|
+
}
|
|
84
|
+
})
|
|
85
|
+
}), showSupporting ? /*#__PURE__*/_jsxs(View, {
|
|
86
|
+
style: {
|
|
87
|
+
flexDirection: 'row',
|
|
88
|
+
alignItems: 'center',
|
|
89
|
+
justifyContent: 'space-between',
|
|
90
|
+
paddingHorizontal: 8,
|
|
91
|
+
gap: 8
|
|
92
|
+
},
|
|
93
|
+
children: [/*#__PURE__*/_jsx(Text, {
|
|
94
|
+
variant: "bodyLarge",
|
|
95
|
+
color: "secondary",
|
|
96
|
+
numberOfLines: 1,
|
|
97
|
+
style: {
|
|
98
|
+
flexShrink: 1
|
|
99
|
+
},
|
|
100
|
+
children: label
|
|
101
|
+
}), showValue ? /*#__PURE__*/_jsx(Text, {
|
|
102
|
+
variant: "bodyLarge",
|
|
103
|
+
color: "secondary",
|
|
104
|
+
numberOfLines: 1,
|
|
105
|
+
children: formatValue ? formatValue(value) : `${percent}%`
|
|
106
|
+
}) : null]
|
|
107
|
+
}) : null]
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","Animated","Easing","View","useTheme","Text","jsx","_jsx","jsxs","_jsxs","clamp01","n","ProgressBar","progress","label","showSupporting","showValue","formatValue","height","width","color","trackColor","borderColor","animated","style","accessibilityLabel","theme","value","percent","Math","round","anim","Value","current","timing","toValue","duration","easing","out","ease","useNativeDriver","start","setValue","fillWidth","interpolate","inputRange","outputRange","extrapolate","inset","gap","undefined","alignSelf","accessibilityRole","accessibilityValue","min","max","now","children","borderRadius","borderWidth","colors","border","default","backgroundColor","background","subtle","padding","justifyContent","overflow","action","primary","flexDirection","alignItems","paddingHorizontal","variant","numberOfLines","flexShrink"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/ProgressBar.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACzC,SAASC,QAAQ,EAAEC,MAAM,EAAEC,IAAI,QAAwC,cAAc;AACrF,SAASC,QAAQ,QAAQ,sBAAa;AACtC,SAASC,IAAI,QAAQ,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA+BpC,MAAMC,OAAO,GAAIC,CAAS,IAAMA,CAAC,GAAG,CAAC,GAAG,CAAC,GAAGA,CAAC,GAAG,CAAC,GAAG,CAAC,GAAGA,CAAE;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAAC;EAC1BC,QAAQ;EACRC,KAAK,GAAG,gBAAgB;EACxBC,cAAc,GAAG,IAAI;EACrBC,SAAS,GAAG,IAAI;EAChBC,WAAW;EACXC,MAAM,GAAG,EAAE;EACXC,KAAK;EACLC,KAAK;EACLC,UAAU;EACVC,WAAW;EACXC,QAAQ,GAAG,IAAI;EACfC,KAAK;EACLC;AACgB,CAAC,EAAE;EACnB,MAAMC,KAAK,GAAGtB,QAAQ,CAAC,CAAC;EACxB,MAAMuB,KAAK,GAAGjB,OAAO,CAACG,QAAQ,CAAC;EAC/B,MAAMe,OAAO,GAAGC,IAAI,CAACC,KAAK,CAACH,KAAK,GAAG,GAAG,CAAC;EAEvC,MAAMI,IAAI,GAAG/B,MAAM,CAAC,IAAIC,QAAQ,CAAC+B,KAAK,CAACL,KAAK,CAAC,CAAC,CAACM,OAAO;EACtDlC,SAAS,CAAC,MAAM;IACd,IAAIwB,QAAQ,EAAE;MACZtB,QAAQ,CAACiC,MAAM,CAACH,IAAI,EAAE;QACpBI,OAAO,EAAER,KAAK;QACdS,QAAQ,EAAE,GAAG;QACbC,MAAM,EAAEnC,MAAM,CAACoC,GAAG,CAACpC,MAAM,CAACqC,IAAI,CAAC;QAC/BC,eAAe,EAAE,KAAK,CAAE;MAC1B,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;IACZ,CAAC,MAAM;MACLV,IAAI,CAACW,QAAQ,CAACf,KAAK,CAAC;IACtB;EACF,CAAC,EAAE,CAACA,KAAK,EAAEJ,QAAQ,EAAEQ,IAAI,CAAC,CAAC;EAE3B,MAAMY,SAAS,GAAGZ,IAAI,CAACa,WAAW,CAAC;IACjCC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAClBC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC;IAC3BC,WAAW,EAAE;EACf,CAAC,CAAC;EAEF,MAAMC,KAAK,GAAG,GAAG;EAEjB,oBACEvC,KAAA,CAACN,IAAI;IACHqB,KAAK,EAAE,CAAC;MAAEyB,GAAG,EAAE,EAAE;MAAE9B,KAAK,EAAEA,KAAK,IAAI+B,SAAS;MAAEC,SAAS,EAAEhC,KAAK,IAAI,IAAI,GAAG,YAAY,GAAG;IAAU,CAAC,EAAEK,KAAK,CAAE;IAC5G4B,iBAAiB,EAAC,aAAa;IAC/B3B,kBAAkB,EAAEA,kBAAkB,IAAIX,KAAM;IAChDuC,kBAAkB,EAAE;MAAEC,GAAG,EAAE,CAAC;MAAEC,GAAG,EAAE,GAAG;MAAEC,GAAG,EAAE5B;IAAQ,CAAE;IAAA6B,QAAA,gBAEvDlD,IAAA,CAACJ,IAAI;MACHqB,KAAK,EAAE;QACLN,MAAM;QACNwC,YAAY,EAAExC,MAAM,GAAG,CAAC;QACxByC,WAAW,EAAE,GAAG;QAChBrC,WAAW,EAAEA,WAAW,IAAII,KAAK,CAACkC,MAAM,CAACC,MAAM,CAACC,OAAO;QACvDC,eAAe,EAAE1C,UAAU,IAAIK,KAAK,CAACkC,MAAM,CAACI,UAAU,CAACC,MAAM;QAC7DC,OAAO,EAAElB,KAAK;QACdmB,cAAc,EAAE,QAAQ;QACxBC,QAAQ,EAAE;MACZ,CAAE;MAAAX,QAAA,eAEFlD,IAAA,CAACN,QAAQ,CAACE,IAAI;QACZqB,KAAK,EAAE;UACLL,KAAK,EAAEwB,SAAS;UAChBzB,MAAM,EAAE,MAAM;UACdwC,YAAY,EAAExC,MAAM,GAAG,CAAC;UACxB6C,eAAe,EAAE3C,KAAK,IAAIM,KAAK,CAACkC,MAAM,CAACS,MAAM,CAACC;QAChD;MAAE,CACH;IAAC,CACE,CAAC,EAENvD,cAAc,gBACbN,KAAA,CAACN,IAAI;MACHqB,KAAK,EAAE;QACL+C,aAAa,EAAE,KAAK;QACpBC,UAAU,EAAE,QAAQ;QACpBL,cAAc,EAAE,eAAe;QAC/BM,iBAAiB,EAAE,CAAC;QACpBxB,GAAG,EAAE;MACP,CAAE;MAAAQ,QAAA,gBAEFlD,IAAA,CAACF,IAAI;QAACqE,OAAO,EAAC,WAAW;QAACtD,KAAK,EAAC,WAAW;QAACuD,aAAa,EAAE,CAAE;QAACnD,KAAK,EAAE;UAAEoD,UAAU,EAAE;QAAE,CAAE;QAAAnB,QAAA,EACpF3C;MAAK,CACF,CAAC,EACNE,SAAS,gBACRT,IAAA,CAACF,IAAI;QAACqE,OAAO,EAAC,WAAW;QAACtD,KAAK,EAAC,WAAW;QAACuD,aAAa,EAAE,CAAE;QAAAlB,QAAA,EAC1DxC,WAAW,GAAGA,WAAW,CAACU,KAAK,CAAC,GAAG,GAAGC,OAAO;MAAG,CAC7C,CAAC,GACL,IAAI;IAAA,CACJ,CAAC,GACL,IAAI;EAAA,CACJ,CAAC;AAEX","ignoreList":[]}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useState } from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import { ProgressBar } from "./ProgressBar.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
const meta = {
|
|
8
|
+
title: 'Components/ProgressBar',
|
|
9
|
+
component: ProgressBar
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
/** Static progress (Figma "Loader"). */
|
|
13
|
+
export const Default = {
|
|
14
|
+
render: () => /*#__PURE__*/_jsx(View, {
|
|
15
|
+
style: {
|
|
16
|
+
padding: 24,
|
|
17
|
+
width: 520
|
|
18
|
+
},
|
|
19
|
+
children: /*#__PURE__*/_jsx(ProgressBar, {
|
|
20
|
+
progress: 0.47
|
|
21
|
+
})
|
|
22
|
+
})
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
/** Live download — progress driven by a prop. */
|
|
26
|
+
export const Downloading = {
|
|
27
|
+
render: () => {
|
|
28
|
+
const [progress, setProgress] = useState(0);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
const id = setInterval(() => {
|
|
31
|
+
setProgress(p => p >= 1 ? 0 : Math.min(1, p + 0.07));
|
|
32
|
+
}, 500);
|
|
33
|
+
return () => clearInterval(id);
|
|
34
|
+
}, []);
|
|
35
|
+
return /*#__PURE__*/_jsx(View, {
|
|
36
|
+
style: {
|
|
37
|
+
padding: 24,
|
|
38
|
+
width: 520
|
|
39
|
+
},
|
|
40
|
+
children: /*#__PURE__*/_jsx(ProgressBar, {
|
|
41
|
+
progress: progress
|
|
42
|
+
})
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
/** Custom label. */
|
|
48
|
+
export const CustomLabel = {
|
|
49
|
+
render: () => /*#__PURE__*/_jsx(View, {
|
|
50
|
+
style: {
|
|
51
|
+
padding: 24,
|
|
52
|
+
width: 520
|
|
53
|
+
},
|
|
54
|
+
children: /*#__PURE__*/_jsx(ProgressBar, {
|
|
55
|
+
progress: 0.8,
|
|
56
|
+
label: "Uploading receipt\u2026"
|
|
57
|
+
})
|
|
58
|
+
})
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
/** Bar only — no supporting row. */
|
|
62
|
+
export const BarOnly = {
|
|
63
|
+
render: () => /*#__PURE__*/_jsx(View, {
|
|
64
|
+
style: {
|
|
65
|
+
padding: 24,
|
|
66
|
+
width: 520
|
|
67
|
+
},
|
|
68
|
+
children: /*#__PURE__*/_jsx(ProgressBar, {
|
|
69
|
+
progress: 0.35,
|
|
70
|
+
showSupporting: false
|
|
71
|
+
})
|
|
72
|
+
})
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
/** Custom format on the right (e.g. counts). */
|
|
76
|
+
export const CustomValue = {
|
|
77
|
+
render: () => /*#__PURE__*/_jsx(View, {
|
|
78
|
+
style: {
|
|
79
|
+
padding: 24,
|
|
80
|
+
width: 520
|
|
81
|
+
},
|
|
82
|
+
children: /*#__PURE__*/_jsx(ProgressBar, {
|
|
83
|
+
progress: 0.6,
|
|
84
|
+
label: "Syncing orders",
|
|
85
|
+
formatValue: p => `${Math.round(p * 120)}/120`
|
|
86
|
+
})
|
|
87
|
+
})
|
|
88
|
+
};
|
|
89
|
+
//# sourceMappingURL=ProgressBar.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useState","View","ProgressBar","jsx","_jsx","meta","title","component","Default","render","style","padding","width","children","progress","Downloading","setProgress","id","setInterval","p","Math","min","clearInterval","CustomLabel","label","BarOnly","showSupporting","CustomValue","formatValue","round"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/ProgressBar.stories.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,WAAW,QAAQ,kBAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5C,MAAMC,IAAI,GAAG;EACXC,KAAK,EAAE,wBAAwB;EAC/BC,SAAS,EAAEL;AACb,CAAoC;AAEpC,eAAeG,IAAI;AAGnB;AACA,OAAO,MAAMG,OAAc,GAAG;EAC5BC,MAAM,EAAEA,CAAA,kBACNL,IAAA,CAACH,IAAI;IAACS,KAAK,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,KAAK,EAAE;IAAI,CAAE;IAAAC,QAAA,eACvCT,IAAA,CAACF,WAAW;MAACY,QAAQ,EAAE;IAAK,CAAE;EAAC,CAC3B;AAEV,CAAC;;AAED;AACA,OAAO,MAAMC,WAAkB,GAAG;EAChCN,MAAM,EAAEA,CAAA,KAAM;IACZ,MAAM,CAACK,QAAQ,EAAEE,WAAW,CAAC,GAAGhB,QAAQ,CAAC,CAAC,CAAC;IAC3CD,SAAS,CAAC,MAAM;MACd,MAAMkB,EAAE,GAAGC,WAAW,CAAC,MAAM;QAC3BF,WAAW,CAAEG,CAAC,IAAMA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEF,CAAC,GAAG,IAAI,CAAE,CAAC;MAC1D,CAAC,EAAE,GAAG,CAAC;MACP,OAAO,MAAMG,aAAa,CAACL,EAAE,CAAC;IAChC,CAAC,EAAE,EAAE,CAAC;IACN,oBACEb,IAAA,CAACH,IAAI;MAACS,KAAK,EAAE;QAAEC,OAAO,EAAE,EAAE;QAAEC,KAAK,EAAE;MAAI,CAAE;MAAAC,QAAA,eACvCT,IAAA,CAACF,WAAW;QAACY,QAAQ,EAAEA;MAAS,CAAE;IAAC,CAC/B,CAAC;EAEX;AACF,CAAC;;AAED;AACA,OAAO,MAAMS,WAAkB,GAAG;EAChCd,MAAM,EAAEA,CAAA,kBACNL,IAAA,CAACH,IAAI;IAACS,KAAK,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,KAAK,EAAE;IAAI,CAAE;IAAAC,QAAA,eACvCT,IAAA,CAACF,WAAW;MAACY,QAAQ,EAAE,GAAI;MAACU,KAAK,EAAC;IAAoB,CAAE;EAAC,CACrD;AAEV,CAAC;;AAED;AACA,OAAO,MAAMC,OAAc,GAAG;EAC5BhB,MAAM,EAAEA,CAAA,kBACNL,IAAA,CAACH,IAAI;IAACS,KAAK,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,KAAK,EAAE;IAAI,CAAE;IAAAC,QAAA,eACvCT,IAAA,CAACF,WAAW;MAACY,QAAQ,EAAE,IAAK;MAACY,cAAc,EAAE;IAAM,CAAE;EAAC,CAClD;AAEV,CAAC;;AAED;AACA,OAAO,MAAMC,WAAkB,GAAG;EAChClB,MAAM,EAAEA,CAAA,kBACNL,IAAA,CAACH,IAAI;IAACS,KAAK,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,KAAK,EAAE;IAAI,CAAE;IAAAC,QAAA,eACvCT,IAAA,CAACF,WAAW;MACVY,QAAQ,EAAE,GAAI;MACdU,KAAK,EAAC,gBAAgB;MACtBI,WAAW,EAAGT,CAAC,IAAK,GAAGC,IAAI,CAACS,KAAK,CAACV,CAAC,GAAG,GAAG,CAAC;IAAO,CAClD;EAAC,CACE;AAEV,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { render, screen } from '@testing-library/react-native';
|
|
4
|
+
import { ThemeProvider } from "../../theme/index.js";
|
|
5
|
+
import { ProgressBar } from "./ProgressBar.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
function wrap(ui) {
|
|
8
|
+
return render(/*#__PURE__*/_jsx(ThemeProvider, {
|
|
9
|
+
children: ui
|
|
10
|
+
}));
|
|
11
|
+
}
|
|
12
|
+
describe('ProgressBar', () => {
|
|
13
|
+
it('shows the default label and the rounded percentage', () => {
|
|
14
|
+
wrap(/*#__PURE__*/_jsx(ProgressBar, {
|
|
15
|
+
progress: 0.47
|
|
16
|
+
}));
|
|
17
|
+
expect(screen.getByText('Downloading...')).toBeTruthy();
|
|
18
|
+
expect(screen.getByText('47%')).toBeTruthy();
|
|
19
|
+
});
|
|
20
|
+
it('uses a custom label', () => {
|
|
21
|
+
wrap(/*#__PURE__*/_jsx(ProgressBar, {
|
|
22
|
+
progress: 0.5,
|
|
23
|
+
label: "Uploading\u2026"
|
|
24
|
+
}));
|
|
25
|
+
expect(screen.getByText('Uploading…')).toBeTruthy();
|
|
26
|
+
expect(screen.queryByText('Downloading...')).toBeNull();
|
|
27
|
+
});
|
|
28
|
+
it('clamps progress to 0–100', () => {
|
|
29
|
+
const {
|
|
30
|
+
rerender
|
|
31
|
+
} = wrap(/*#__PURE__*/_jsx(ProgressBar, {
|
|
32
|
+
progress: 1.8
|
|
33
|
+
}));
|
|
34
|
+
expect(screen.getByText('100%')).toBeTruthy();
|
|
35
|
+
rerender(/*#__PURE__*/_jsx(ThemeProvider, {
|
|
36
|
+
children: /*#__PURE__*/_jsx(ProgressBar, {
|
|
37
|
+
progress: -0.5
|
|
38
|
+
})
|
|
39
|
+
}));
|
|
40
|
+
expect(screen.getByText('0%')).toBeTruthy();
|
|
41
|
+
});
|
|
42
|
+
it('supports a custom value formatter', () => {
|
|
43
|
+
wrap(/*#__PURE__*/_jsx(ProgressBar, {
|
|
44
|
+
progress: 0.5,
|
|
45
|
+
formatValue: p => `${Math.round(p * 120)}/120`
|
|
46
|
+
}));
|
|
47
|
+
expect(screen.getByText('60/120')).toBeTruthy();
|
|
48
|
+
});
|
|
49
|
+
it('hides the supporting row when showSupporting is false', () => {
|
|
50
|
+
wrap(/*#__PURE__*/_jsx(ProgressBar, {
|
|
51
|
+
progress: 0.5,
|
|
52
|
+
showSupporting: false
|
|
53
|
+
}));
|
|
54
|
+
expect(screen.queryByText('Downloading...')).toBeNull();
|
|
55
|
+
expect(screen.queryByText('50%')).toBeNull();
|
|
56
|
+
});
|
|
57
|
+
it('exposes the progress value for accessibility', () => {
|
|
58
|
+
wrap(/*#__PURE__*/_jsx(ProgressBar, {
|
|
59
|
+
progress: 0.3,
|
|
60
|
+
accessibilityLabel: "Download"
|
|
61
|
+
}));
|
|
62
|
+
const bar = screen.getByLabelText('Download');
|
|
63
|
+
expect(bar.props.accessibilityValue).toEqual({
|
|
64
|
+
min: 0,
|
|
65
|
+
max: 100,
|
|
66
|
+
now: 30
|
|
67
|
+
});
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
//# sourceMappingURL=ProgressBar.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["render","screen","ThemeProvider","ProgressBar","jsx","_jsx","wrap","ui","children","describe","it","progress","expect","getByText","toBeTruthy","label","queryByText","toBeNull","rerender","formatValue","p","Math","round","showSupporting","accessibilityLabel","bar","getByLabelText","props","accessibilityValue","toEqual","min","max","now"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/ProgressBar.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["ProgressBar"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/ProgressBar/index.ts"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,kBAAe","ignoreList":[]}
|
|
@@ -18,6 +18,7 @@ export * from "./Keypad/index.js";
|
|
|
18
18
|
export * from "./LinkButton/index.js";
|
|
19
19
|
export * from "./Menu/index.js";
|
|
20
20
|
export * from "./ProductCard/index.js";
|
|
21
|
+
export * from "./ProgressBar/index.js";
|
|
21
22
|
export * from "./QuantityStepper/index.js";
|
|
22
23
|
export * from "./Radio/index.js";
|
|
23
24
|
export * from "./Select/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,uBAAc;AAC5B,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,4BAAmB;AACjC,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,kBAAS;AACvB,cAAc,qBAAY","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,sBAAa;AAC3B,cAAc,sBAAa;AAC3B,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,uBAAc;AAC5B,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,uBAAc;AAC5B,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,wBAAe;AAC7B,cAAc,4BAAmB;AACjC,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,kBAAS;AACvB,cAAc,qBAAY","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.generated.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icon/icons.generated.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK
|
|
1
|
+
{"version":3,"file":"icons.generated.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icon/icons.generated.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6KgB,CAAC;AAEnC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
2
|
+
export interface ProgressBarProps {
|
|
3
|
+
/** Progress from 0 to 1. Drive it from whatever is loading (e.g. a download). */
|
|
4
|
+
progress: number;
|
|
5
|
+
/** Left-side label. Defaults to "Downloading...". */
|
|
6
|
+
label?: string;
|
|
7
|
+
/** Show the label + percentage row under the bar. Defaults to true. */
|
|
8
|
+
showSupporting?: boolean;
|
|
9
|
+
/** Show the percentage on the right. Defaults to true. */
|
|
10
|
+
showValue?: boolean;
|
|
11
|
+
/** Format the right-side value. Defaults to `47%`. */
|
|
12
|
+
formatValue?: (progress: number) => string;
|
|
13
|
+
/** Bar height. Defaults to 32 (Figma). */
|
|
14
|
+
height?: number;
|
|
15
|
+
/** Fixed width. Omit to fill the parent. */
|
|
16
|
+
width?: number;
|
|
17
|
+
/** Fill color. Defaults to `action.primary` (lime). */
|
|
18
|
+
color?: string;
|
|
19
|
+
/** Track background. Defaults to `background.subtle`. */
|
|
20
|
+
trackColor?: string;
|
|
21
|
+
/** Track border color. Defaults to `border.default`. */
|
|
22
|
+
borderColor?: string;
|
|
23
|
+
/** Animate width changes. Defaults to true. */
|
|
24
|
+
animated?: boolean;
|
|
25
|
+
/** Override the container style. */
|
|
26
|
+
style?: StyleProp<ViewStyle>;
|
|
27
|
+
/** Accessibility label. Defaults to `label`. */
|
|
28
|
+
accessibilityLabel?: string;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Determinate progress bar — the Figma "Loader". Drive it with a `progress`
|
|
32
|
+
* (0–1) prop from whatever is loading; the fill animates to match. A supporting
|
|
33
|
+
* row underneath shows a customizable `label` (default "Downloading...") on the
|
|
34
|
+
* left and the percentage on the right. Colors, height and width are tokens/props.
|
|
35
|
+
*/
|
|
36
|
+
export declare function ProgressBar({ progress, label, showSupporting, showValue, formatValue, height, width, color, trackColor, borderColor, animated, style, accessibilityLabel, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
//# sourceMappingURL=ProgressBar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAItF,MAAM,WAAW,gBAAgB;IAC/B,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAwB,EACxB,cAAqB,EACrB,SAAgB,EAChB,WAAW,EACX,MAAW,EACX,KAAK,EACL,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAe,EACf,KAAK,EACL,kBAAkB,GACnB,EAAE,gBAAgB,2CA8ElB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icons.generated.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icon/icons.generated.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK
|
|
1
|
+
{"version":3,"file":"icons.generated.d.ts","sourceRoot":"","sources":["../../../../../src/components/Icon/icons.generated.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6KgB,CAAC;AAEnC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
2
|
+
export interface ProgressBarProps {
|
|
3
|
+
/** Progress from 0 to 1. Drive it from whatever is loading (e.g. a download). */
|
|
4
|
+
progress: number;
|
|
5
|
+
/** Left-side label. Defaults to "Downloading...". */
|
|
6
|
+
label?: string;
|
|
7
|
+
/** Show the label + percentage row under the bar. Defaults to true. */
|
|
8
|
+
showSupporting?: boolean;
|
|
9
|
+
/** Show the percentage on the right. Defaults to true. */
|
|
10
|
+
showValue?: boolean;
|
|
11
|
+
/** Format the right-side value. Defaults to `47%`. */
|
|
12
|
+
formatValue?: (progress: number) => string;
|
|
13
|
+
/** Bar height. Defaults to 32 (Figma). */
|
|
14
|
+
height?: number;
|
|
15
|
+
/** Fixed width. Omit to fill the parent. */
|
|
16
|
+
width?: number;
|
|
17
|
+
/** Fill color. Defaults to `action.primary` (lime). */
|
|
18
|
+
color?: string;
|
|
19
|
+
/** Track background. Defaults to `background.subtle`. */
|
|
20
|
+
trackColor?: string;
|
|
21
|
+
/** Track border color. Defaults to `border.default`. */
|
|
22
|
+
borderColor?: string;
|
|
23
|
+
/** Animate width changes. Defaults to true. */
|
|
24
|
+
animated?: boolean;
|
|
25
|
+
/** Override the container style. */
|
|
26
|
+
style?: StyleProp<ViewStyle>;
|
|
27
|
+
/** Accessibility label. Defaults to `label`. */
|
|
28
|
+
accessibilityLabel?: string;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Determinate progress bar — the Figma "Loader". Drive it with a `progress`
|
|
32
|
+
* (0–1) prop from whatever is loading; the fill animates to match. A supporting
|
|
33
|
+
* row underneath shows a customizable `label` (default "Downloading...") on the
|
|
34
|
+
* left and the percentage on the right. Colors, height and width are tokens/props.
|
|
35
|
+
*/
|
|
36
|
+
export declare function ProgressBar({ progress, label, showSupporting, showValue, formatValue, height, width, color, trackColor, borderColor, animated, style, accessibilityLabel, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
//# sourceMappingURL=ProgressBar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAItF,MAAM,WAAW,gBAAgB;IAC/B,iFAAiF;IACjF,QAAQ,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAwB,EACxB,cAAqB,EACrB,SAAgB,EAChB,WAAW,EACX,MAAW,EACX,KAAK,EACL,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAe,EACf,KAAK,EACL,kBAAkB,GACnB,EAAE,gBAAgB,2CA8ElB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
|
package/package.json
CHANGED
|
@@ -45,6 +45,7 @@ export const icons = {
|
|
|
45
45
|
"coffee": "<svg viewBox=\"0 0 21.5 20.5001\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g transform=\"matrix(1 0 0 -1 0 20.5001)\"> <g id=\"elements\"> <path id=\"Vector 5682\" d=\"M17.0006 11.75H18.3904C20.2418 11.75 20.7922 11.4845 20.7476 10.1662C20.6738 7.98262 19.6891 5.44535 15.7501 4.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path id=\"Vector\" d=\"M4.69635 1.63553C1.32194 4.22996 0.824766 7.90995 0.751515 11.7499C0.719871 13.4087 1.20135 13.75 3.40927 13.75L14.0909 13.75C16.2988 13.75 16.7803 13.4087 16.7487 11.7499C16.6754 7.90995 16.1782 4.22996 12.8038 1.63553C11.8435 0.8972 11.0332 0.75 9.66944 0.75L7.83073 0.75C6.46694 0.75 5.65666 0.897199 4.69635 1.63553Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path id=\"Vector_2\" d=\"M10.059 19.75C9.51224 19.4114 8.75133 18.25 8.75133 16.75M6.28979 18.25C6.28979 18.25 5.75008 17.75 5.75008 16.75M12.7513 18.25C12.4779 18.0807 12.2501 17.25 12.2501 16.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </g> </g></svg>",
|
|
46
46
|
"coins": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"icon\"> <path id=\"Union\" d=\"M2.42871 10.3867C2.6547 10.081 3.08006 9.99032 3.41406 10.1885C3.76995 10.3999 3.88702 10.8597 3.67578 11.2158L3.46777 11.5947C3.00895 12.4973 2.75001 13.5189 2.75 14.6025C2.75005 18.2738 5.7262 21.25 9.39746 21.25C10.6357 21.25 11.793 20.9123 12.7842 20.3242L12.8525 20.2881C13.1972 20.1284 13.6133 20.2524 13.8115 20.5859C14.0229 20.9421 13.906 21.4029 13.5498 21.6143L13.3193 21.7451C12.1553 22.3855 10.8179 22.75 9.39746 22.75C4.89777 22.75 1.25005 19.1022 1.25 14.6025C1.25002 13.0876 1.66394 11.6667 2.38574 10.4502L2.42871 10.3867ZM14 1.25C18.8325 1.25 22.75 5.16751 22.75 10C22.75 14.8325 18.8325 18.75 14 18.75C9.16751 18.75 5.25 14.8325 5.25 10C5.25 5.16751 9.16751 1.25 14 1.25ZM14 2.75C9.99594 2.75 6.75 5.99594 6.75 10C6.75 14.0041 9.99594 17.25 14 17.25C18.0041 17.25 21.25 14.0041 21.25 10C21.25 5.99594 18.0041 2.75 14 2.75Z\" fill=\"currentColor\"/> </g> </svg>",
|
|
47
47
|
"computer-add": "<svg viewBox=\"0 0 21.5 21.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"elements\"> <path id=\"Vector 6709\" d=\"M10.2546 0.75H8.75385C5.47304 0.75 3.83264 0.75 2.66983 1.56382C2.23962 1.8649 1.86544 2.23891 1.56421 2.66891C0.75 3.83116 0.75 5.47077 0.75 8.75C0.75 12.0292 0.75 13.6688 1.56421 14.8311C1.86544 15.2611 2.23962 15.6351 2.66983 15.9362C3.83264 16.75 5.47304 16.75 8.75385 16.75H12.7558C16.0366 16.75 17.677 16.75 18.8398 15.9362C19.27 15.6351 19.6442 15.2611 19.9454 14.8311C20.5741 13.9337 20.7174 12.7517 20.75 10.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path id=\"Vector\" d=\"M12.75 4.75H16.75M16.75 4.75L20.75 4.75M16.75 4.75L16.75 0.75M16.75 4.75V8.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path id=\"Vector 3361\" d=\"M9.75 13.75H11.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> <path id=\"Vector 6773\" d=\"M10.75 16.75V20.75\" stroke=\"currentColor\" stroke-width=\"1.5\"/> <path id=\"Vector 3994\" d=\"M6.75 20.75H14.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> </g> </svg>",
|
|
48
|
+
"computer-check": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g transform=\"translate(1.25 1.25)\"> <path d=\"M20.749 9.7502C20.7406 12.3757 20.6627 13.7937 19.9362 14.8313C19.6351 15.2613 19.2611 15.6353 18.8311 15.9364C17.6688 16.7502 16.0292 16.7502 12.75 16.7502H8.75C5.47077 16.7502 3.83116 16.7502 2.66891 15.9364C2.23891 15.6353 1.8649 15.2613 1.56382 14.8313C0.75 13.669 0.75 12.0294 0.75 8.7502C0.75 5.47097 0.75 3.83136 1.56382 2.66911C1.8649 2.23911 2.23891 1.86511 2.66891 1.56402C3.83116 0.750204 5.47077 0.750204 8.75 0.750204H10.25\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path d=\"M12.75 4.7502C12.75 4.7502 13.75 4.7502 14.75 6.7502C14.75 6.7502 17.9265 1.7502 20.75 0.750204\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> <path d=\"M9.75 13.7502H11.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> <path d=\"M10.75 16.7502V20.7502\" stroke=\"currentColor\" stroke-width=\"1.5\"/> <path d=\"M6.75 20.7502H14.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> </g> </svg>",
|
|
48
49
|
"computer-settings": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g transform=\"translate(1.25 1.25)\"> <path d=\"M9.75294 0.750009H8.7562C5.47443 0.750009 3.83355 0.750009 2.67039 1.56383C2.24006 1.86491 1.86577 2.23892 1.56445 2.66892C0.75 3.83116 0.75 5.47078 0.75 8.75001C0.75 12.0292 0.75 13.6689 1.56445 14.8311C1.86577 15.2611 2.24006 15.6351 2.67039 15.9362C3.83355 16.75 5.47443 16.75 8.7562 16.75H12.7593C16.0411 16.75 17.682 16.75 18.8451 15.9362C19.2754 15.6351 19.6497 15.2611 19.9511 14.8311C20.5656 13.9542 20.7163 12.8441 20.75 11.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path d=\"M16.75 8.46428V9.75M16.75 8.46428C15.5932 8.46428 14.5741 7.89608 13.9763 7.03331M19.5238 3.46688C19.8773 3.97711 20.0833 4.59035 20.0833 5.25C20.0833 5.90973 19.8772 6.52304 19.5237 7.03331C18.9259 7.89608 17.9068 8.46428 16.75 8.46428M16.75 2.03571C17.9069 2.03571 18.9261 2.604 19.5238 3.46688M16.75 2.03571C15.5931 2.03571 14.5739 2.604 13.9762 3.46688M16.75 2.03571V0.75M20.75 2.67857L19.5238 3.46688M12.7504 7.82143L13.9763 7.03331M12.75 2.67857L13.9762 3.46688M20.7496 7.82143L19.5237 7.03331M13.9762 3.46688C13.6227 3.97711 13.4167 4.59035 13.4167 5.25C13.4167 5.90973 13.6228 6.52304 13.9763 7.03331\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> <path d=\"M9.75 13.75H11.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> <path d=\"M10.75 16.75V20.75\" stroke=\"currentColor\" stroke-width=\"1.5\"/> <path d=\"M6.75 20.75H14.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/> </g> </svg>",
|
|
49
50
|
"copy-01": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"icon\"> <path id=\"Union\" d=\"M9.5 1.25C11.1254 1.25 12.4104 1.24923 13.4248 1.36914C14.4557 1.49101 15.3047 1.74633 16.0137 2.32813C16.2541 2.52544 16.4746 2.74592 16.6719 2.98633C17.2232 3.65811 17.482 4.45566 17.6113 5.41504C17.7163 6.19414 17.7408 7.13229 17.7471 8.26172C18.3694 8.27466 18.9159 8.30227 19.3916 8.36621C20.2917 8.48723 21.0495 8.74672 21.6514 9.34863C22.2533 9.95055 22.5128 10.7083 22.6338 11.6084C22.7519 12.4869 22.75 13.6071 22.75 15V16C22.75 17.3929 22.7519 18.5131 22.6338 19.3916C22.5128 20.2917 22.2533 21.0495 21.6514 21.6514C21.0495 22.2533 20.2917 22.5128 19.3916 22.6338C18.5131 22.7519 17.3929 22.75 16 22.75H15C13.6071 22.75 12.4869 22.7519 11.6084 22.6338C10.7083 22.5128 9.95055 22.2533 9.34863 21.6514C8.74672 21.0495 8.48723 20.2917 8.36621 19.3916C8.30227 18.9159 8.27466 18.3694 8.26172 17.7471C7.13229 17.7408 6.19414 17.7163 5.41504 17.6113C4.45565 17.482 3.65811 17.2232 2.98633 16.6719C2.74592 16.4746 2.52544 16.2541 2.32813 16.0137C1.74633 15.3047 1.49101 14.4557 1.36914 13.4248C1.24923 12.4104 1.25 11.1254 1.25 9.5C1.25 7.87463 1.24923 6.58961 1.36914 5.5752C1.49101 4.54427 1.74633 3.69525 2.32813 2.98633C2.52544 2.74592 2.74592 2.52544 2.98633 2.32813C3.69525 1.74633 4.54427 1.49101 5.5752 1.36914C6.58961 1.24923 7.87463 1.25 9.5 1.25ZM15 9.75C13.5648 9.75 12.5639 9.75202 11.8086 9.85352C11.0748 9.95217 10.6859 10.1324 10.4092 10.4092C10.1324 10.6859 9.95217 11.0748 9.85352 11.8086C9.75202 12.5639 9.75 13.5648 9.75 15V16C9.75 17.4352 9.75202 18.4361 9.85352 19.1914C9.95217 19.9252 10.1324 20.3141 10.4092 20.5908C10.6859 20.8676 11.0748 21.0478 11.8086 21.1465C12.5639 21.248 13.5648 21.25 15 21.25H16C17.4352 21.25 18.4361 21.248 19.1914 21.1465C19.9252 21.0478 20.3141 20.8676 20.5908 20.5908C20.8676 20.3141 21.0478 19.9252 21.1465 19.1914C21.248 18.4361 21.25 17.4352 21.25 16V15C21.25 13.5648 21.248 12.5639 21.1465 11.8086C21.0478 11.0748 20.8676 10.6859 20.5908 10.4092C20.3141 10.1324 19.9252 9.95217 19.1914 9.85352C18.4361 9.75202 17.4352 9.75 16 9.75H15ZM9.5 2.75C7.83789 2.75 6.65689 2.75132 5.75098 2.8584C4.8621 2.9635 4.33579 3.16138 3.93848 3.4873C3.77392 3.62236 3.62236 3.77392 3.4873 3.93848C3.16138 4.33579 2.9635 4.8621 2.8584 5.75098C2.75132 6.65689 2.75 7.83789 2.75 9.5C2.75 11.1621 2.75132 12.3431 2.8584 13.249C2.9635 14.1379 3.16138 14.6642 3.4873 15.0615C3.62236 15.2261 3.77392 15.3776 3.93848 15.5127C4.31534 15.8218 4.80869 16.0162 5.61621 16.125C6.29513 16.2164 7.14017 16.2395 8.25 16.2461V15C8.25 13.6071 8.24812 12.4869 8.36621 11.6084C8.48723 10.7083 8.74672 9.95055 9.34863 9.34863C9.95055 8.74672 10.7083 8.48723 11.6084 8.36621C12.4869 8.24812 13.6071 8.25 15 8.25H16.2461C16.2395 7.14017 16.2164 6.29513 16.125 5.61621C16.0162 4.80869 15.8219 4.31534 15.5127 3.93848C15.3776 3.77392 15.2261 3.62236 15.0615 3.4873C14.6642 3.16138 14.1379 2.9635 13.249 2.8584C12.3431 2.75132 11.1621 2.75 9.5 2.75Z\" fill=\"currentColor\"/> </g> </svg>",
|
|
50
51
|
"credit-card": "<svg viewBox=\"0 0 21.5 17.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <g id=\"icon\"> <path id=\"Union\" d=\"M12.25 2.51451e-07C14.1117 2.51451e-07 15.5713 -0.000815228 16.7197 0.128907C17.8817 0.2602 18.8241 0.533739 19.6074 1.15234L19.7803 1.29492C19.9495 1.44088 20.1087 1.59749 20.2568 1.76367L20.3779 1.90625C20.9598 2.62542 21.2295 3.48682 21.3623 4.52832C21.5013 5.61866 21.5 7.00132 21.5 8.75C21.5 10.4987 21.5013 11.8813 21.3623 12.9717C21.2295 14.0132 20.9598 14.8746 20.3779 15.5938L20.2568 15.7363C20.1087 15.9025 19.9495 16.0591 19.7803 16.2051L19.6074 16.3477C18.8241 16.9663 17.8817 17.2398 16.7197 17.3711C15.5713 17.5008 14.1117 17.5 12.25 17.5H9.25C7.38832 17.5 5.92866 17.5008 4.78027 17.3711C3.69083 17.248 2.79424 17.0003 2.04102 16.46L1.89258 16.3477C1.71667 16.2087 1.55009 16.0592 1.39453 15.8994L1.24316 15.7363C0.57699 14.9891 0.279393 14.0828 0.137696 12.9717C-0.00129631 11.8813 8.71061e-07 10.4987 8.71061e-07 8.75C8.71045e-07 7.00132 -0.0012963 5.61866 0.137696 4.52832C0.279393 3.41717 0.57699 2.51089 1.24316 1.76367L1.39453 1.60059C1.55009 1.4408 1.71667 1.29127 1.89258 1.15234L2.04102 1.04004C2.79424 0.49971 3.69083 0.252001 4.78027 0.128907C5.92866 -0.000815229 7.38832 2.51451e-07 9.25 2.51451e-07H12.25ZM1.51563 6.5C1.50128 7.14611 1.5 7.88783 1.5 8.75C1.5 10.5385 1.50184 11.8087 1.62598 12.7822C1.74748 13.735 1.97568 14.3046 2.36231 14.7383L2.58203 14.9629C2.65878 15.0351 2.73876 15.105 2.82227 15.1709L3.00684 15.3027C3.45622 15.5961 4.04721 15.779 4.94922 15.8809C5.99376 15.9988 7.35327 16 9.25 16H12.25C14.1467 16 15.5062 15.9988 16.5508 15.8809C17.5815 15.7644 18.2065 15.543 18.6777 15.1709L18.918 14.9629C18.9946 14.8908 19.0682 14.8162 19.1377 14.7383L19.2754 14.5684C19.5798 14.1559 19.7677 13.6158 19.874 12.7822C19.9982 11.8087 20 10.5385 20 8.75C20 7.88783 19.9987 7.14611 19.9844 6.5H1.51563ZM10.25 12C10.6642 12 11 12.3358 11 12.75C11 13.1642 10.6642 13.5 10.25 13.5H8.75C8.33579 13.5 8 13.1642 8 12.75C8 12.3358 8.33579 12 8.75 12H10.25ZM16.75 12C17.1642 12 17.5 12.3358 17.5 12.75C17.5 13.1642 17.1642 13.5 16.75 13.5H13.25C12.8358 13.5 12.5 13.1642 12.5 12.75C12.5 12.3358 12.8358 12 13.25 12H16.75ZM9.25 1.5C7.35327 1.5 5.99376 1.50117 4.94922 1.61914C4.04721 1.72103 3.45622 1.90385 3.00684 2.19727L2.82227 2.3291C2.73876 2.39505 2.65878 2.46486 2.58203 2.53711L2.36231 2.76172C1.97568 3.19538 1.74748 3.76497 1.62598 4.71777C1.61433 4.80913 1.6053 4.90324 1.5957 5H19.9043C19.8947 4.90324 19.8857 4.80913 19.874 4.71777C19.7677 3.88425 19.5798 3.34408 19.2754 2.93164L19.1377 2.76172C19.0682 2.6838 18.9946 2.60921 18.918 2.53711L18.6777 2.3291C18.2065 1.95697 17.5815 1.73557 16.5508 1.61914C15.5062 1.50117 14.1467 1.5 12.25 1.5H9.25Z\" fill=\"currentColor\"/> </g> </svg>",
|