@valpro-labs/ui 1.4.1 → 1.4.3
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.
|
@@ -4,6 +4,8 @@ interface LevelBorderProps {
|
|
|
4
4
|
level?: number | string;
|
|
5
5
|
/** URL for the account level border art. */
|
|
6
6
|
borderIcon?: string;
|
|
7
|
+
/** Scale applied only to the border art behind the level text. */
|
|
8
|
+
borderScale?: number;
|
|
7
9
|
/** Extra classes merged onto the outer wrapper. */
|
|
8
10
|
className?: string;
|
|
9
11
|
/** Extra inline style for positioning or layout. */
|
|
@@ -13,7 +15,7 @@ interface LevelBorderProps {
|
|
|
13
15
|
* VALORANT account level badge: border art with the level centered on top.
|
|
14
16
|
* Consumers provide the already-resolved border asset URL.
|
|
15
17
|
*/
|
|
16
|
-
declare function LevelBorder({ level, borderIcon, className, style }: LevelBorderProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare function LevelBorder({ level, borderIcon, borderScale, className, style, }: LevelBorderProps): import("react/jsx-runtime").JSX.Element;
|
|
17
19
|
export { LevelBorder };
|
|
18
20
|
export type { LevelBorderProps };
|
|
19
21
|
//# sourceMappingURL=level-border.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"level-border.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/level-border.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"level-border.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/level-border.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWzD,UAAU,gBAAgB;IACxB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;GAGG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,UAAU,EACV,WAAwC,EACxC,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,2CAwClB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -1,24 +1,29 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import { OwnedItemCard } from '../../components/blocks/owned-item-card';
|
|
4
4
|
import { Text } from '../../components/ui/text';
|
|
5
5
|
import { cn } from '../../lib/utils';
|
|
6
6
|
const LEVEL_BORDER_WIDTH = 76;
|
|
7
7
|
const LEVEL_BORDER_HEIGHT = 32;
|
|
8
|
+
const DEFAULT_LEVEL_BORDER_SCALE = 1.12;
|
|
8
9
|
/**
|
|
9
10
|
* VALORANT account level badge: border art with the level centered on top.
|
|
10
11
|
* Consumers provide the already-resolved border asset URL.
|
|
11
12
|
*/
|
|
12
|
-
function LevelBorder({ level, borderIcon, className, style }) {
|
|
13
|
+
function LevelBorder({ level, borderIcon, borderScale = DEFAULT_LEVEL_BORDER_SCALE, className, style, }) {
|
|
14
|
+
const isOverThousand = Number(level) >= 1000;
|
|
15
|
+
const artWidth = LEVEL_BORDER_WIDTH * borderScale;
|
|
16
|
+
const artHeight = LEVEL_BORDER_HEIGHT * borderScale;
|
|
13
17
|
return (_jsxs(View, { pointerEvents: "none", style: [
|
|
14
18
|
{
|
|
15
19
|
width: LEVEL_BORDER_WIDTH,
|
|
16
20
|
height: LEVEL_BORDER_HEIGHT,
|
|
17
|
-
alignItems: 'center',
|
|
18
|
-
justifyContent: 'center',
|
|
19
21
|
},
|
|
20
22
|
style,
|
|
21
|
-
], className: cn(className), children: [
|
|
23
|
+
], className: cn('relative', className), children: [_jsx(View, { className: "absolute inset-0 items-center justify-center", pointerEvents: "none", children: _jsx(View, { style: {
|
|
24
|
+
width: artWidth,
|
|
25
|
+
height: artHeight,
|
|
26
|
+
}, children: _jsx(OwnedItemCard, { iconUrl: borderIcon, fill: false, className: "h-full w-full aspect-auto rounded-none bg-transparent" }) }) }), level !== undefined ? (_jsx(View, { className: "absolute inset-0 items-center justify-center", pointerEvents: "none", children: _jsx(Text, { style: isOverThousand ? { fontSize: 10 } : undefined, className: "text-val-white text-xs font-bold", children: level }) })) : null] }));
|
|
22
27
|
}
|
|
23
28
|
export { LevelBorder };
|
|
24
29
|
//# sourceMappingURL=level-border.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"level-border.js","sourceRoot":"","sources":["../../../src/components/blocks/level-border.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"level-border.js","sourceRoot":"","sources":["../../../src/components/blocks/level-border.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAC9B,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAC/B,MAAM,0BAA0B,GAAG,IAAI,CAAC;AAexC;;;GAGG;AACH,SAAS,WAAW,CAAC,EACnB,KAAK,EACL,UAAU,EACV,WAAW,GAAG,0BAA0B,EACxC,SAAS,EACT,KAAK,GACY;IACjB,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;IAC7C,MAAM,QAAQ,GAAG,kBAAkB,GAAG,WAAW,CAAC;IAClD,MAAM,SAAS,GAAG,mBAAmB,GAAG,WAAW,CAAC;IAEpD,OAAO,CACL,MAAC,IAAI,IACH,aAAa,EAAC,MAAM,EACpB,KAAK,EAAE;YACL;gBACE,KAAK,EAAE,kBAAkB;gBACzB,MAAM,EAAE,mBAAmB;aAC5B;YACD,KAAK;SACN,EACD,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,aACpC,KAAC,IAAI,IAAC,SAAS,EAAC,8CAA8C,EAAC,aAAa,EAAC,MAAM,YACjF,KAAC,IAAI,IACH,KAAK,EAAE;wBACL,KAAK,EAAE,QAAQ;wBACf,MAAM,EAAE,SAAS;qBAClB,YACD,KAAC,aAAa,IACZ,OAAO,EAAE,UAAU,EACnB,IAAI,EAAE,KAAK,EACX,SAAS,EAAC,uDAAuD,GACjE,GACG,GACF,EACN,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,KAAC,IAAI,IAAC,SAAS,EAAC,8CAA8C,EAAC,aAAa,EAAC,MAAM,YACjF,KAAC,IAAI,IACH,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EACpD,SAAS,EAAC,kCAAkC,YAC3C,KAAK,GACD,GACF,CACR,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
|