@valpro-labs/ui 1.10.0 → 1.11.1
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/blocks/rank-card.d.ts +19 -3
- package/dist/components/blocks/rank-card.d.ts.map +1 -1
- package/dist/components/blocks/rank-card.js +35 -3
- package/dist/components/blocks/rank-card.js.map +1 -1
- package/dist/components/blocks/rank-tier-card-skeleton.d.ts +5 -3
- package/dist/components/blocks/rank-tier-card-skeleton.d.ts.map +1 -1
- package/dist/components/blocks/rank-tier-card-skeleton.js +4 -4
- package/dist/components/blocks/rank-tier-card-skeleton.js.map +1 -1
- package/dist/components/blocks/rank-tier-card.d.ts +5 -1
- package/dist/components/blocks/rank-tier-card.d.ts.map +1 -1
- package/dist/components/blocks/rank-tier-card.js +9 -3
- package/dist/components/blocks/rank-tier-card.js.map +1 -1
- package/dist/components/ui/progress.d.ts +3 -1
- package/dist/components/ui/progress.d.ts.map +1 -1
- package/dist/components/ui/progress.js +6 -6
- package/dist/components/ui/progress.js.map +1 -1
- package/dist/components/ui/progress.web.d.ts +3 -2
- package/dist/components/ui/progress.web.d.ts.map +1 -1
- package/dist/components/ui/progress.web.js +10 -7
- package/dist/components/ui/progress.web.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type RankPyramidTier } from '../../components/blocks/rank-pyramid';
|
|
3
|
+
interface RankProgress {
|
|
4
|
+
/** Current progress value. For normal ranked tiers this is usually the current RR. */
|
|
5
|
+
value: number;
|
|
6
|
+
/** Maximum progress value. Defaults to `100` for normal RR tiers. */
|
|
7
|
+
max?: number;
|
|
8
|
+
/** Left-side label below the bar. Defaults to `"RANK RATING"`. */
|
|
9
|
+
label?: string;
|
|
10
|
+
/** Right-side value below the bar. Defaults to `"value/max"`. */
|
|
11
|
+
valueLabel?: string;
|
|
12
|
+
}
|
|
3
13
|
interface RankCardProps {
|
|
4
14
|
/** Season header shown above the tier icon, e.g. `"E11 A2"`. */
|
|
5
15
|
seasonTitle: string;
|
|
@@ -7,10 +17,14 @@ interface RankCardProps {
|
|
|
7
17
|
tierIcon?: string;
|
|
8
18
|
/** Tier name, e.g. `"Diamond 2"`. */
|
|
9
19
|
tierName?: string;
|
|
20
|
+
/** Tier name accent color from the competitive tier API, with or without the leading `#`. */
|
|
21
|
+
tierColor?: string;
|
|
10
22
|
/** Ranked Rating value. */
|
|
11
23
|
rankedRating?: number;
|
|
12
24
|
/** Suffix shown after the RR value (default `"RR"`). Pass `""` to hide. */
|
|
13
25
|
rrLabel?: string;
|
|
26
|
+
/** Optional full-width rank-rating rail shown below the rank summary row. */
|
|
27
|
+
rankProgress?: RankProgress;
|
|
14
28
|
/** Header shown above the pyramid, e.g. `"ACT RANK"`. */
|
|
15
29
|
actRankLabel: string;
|
|
16
30
|
/** Pre-sorted (highest first) filled-slot list forwarded to the pyramid. */
|
|
@@ -25,7 +39,9 @@ interface RankCardProps {
|
|
|
25
39
|
onPress?: () => void;
|
|
26
40
|
/** Show the skeleton placeholder for the tier column; the pyramid shows its empty-state. */
|
|
27
41
|
isLoading?: boolean;
|
|
28
|
-
/**
|
|
42
|
+
/** Show the rank-rating rail placeholder while loading. */
|
|
43
|
+
showRankProgressSkeleton?: boolean;
|
|
44
|
+
/** Extra classes merged onto the outer wrapper. */
|
|
29
45
|
className?: string;
|
|
30
46
|
}
|
|
31
47
|
/**
|
|
@@ -36,7 +52,7 @@ interface RankCardProps {
|
|
|
36
52
|
* Data-free: the consumer resolves tier metadata, pre-sorts the pyramid's
|
|
37
53
|
* filled-slot list, and supplies the chevron icon and navigation handler.
|
|
38
54
|
*/
|
|
39
|
-
declare function RankCard({ seasonTitle, tierIcon, tierName, rankedRating, rrLabel, actRankLabel, filledTiers, borderIcon, pyramidSize, chevron, onPress, isLoading, className, }: RankCardProps): import("react/jsx-runtime").JSX.Element;
|
|
55
|
+
declare function RankCard({ seasonTitle, tierIcon, tierName, tierColor, rankedRating, rrLabel, rankProgress, actRankLabel, filledTiers, borderIcon, pyramidSize, chevron, onPress, isLoading, showRankProgressSkeleton, className, }: RankCardProps): import("react/jsx-runtime").JSX.Element;
|
|
40
56
|
export { RankCard };
|
|
41
|
-
export type { RankCardProps };
|
|
57
|
+
export type { RankCardProps, RankProgress };
|
|
42
58
|
//# sourceMappingURL=rank-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rank-card.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/rank-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"rank-card.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/rank-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAWrF,UAAU,YAAY;IACpB,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,aAAa;IACrB,gEAAgE;IAChE,WAAW,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,yDAAyD;IACzD,YAAY,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAC7C,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gGAAgG;IAChG,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iGAAiG;IACjG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD;;;;;;;GAOG;AACH,iBAAS,QAAQ,CAAC,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,WAAgB,EAChB,OAAO,EACP,OAAO,EACP,SAAiB,EACjB,wBAA+B,EAC/B,SAAS,GACV,EAAE,aAAa,2CAgGf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -1,9 +1,28 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { Pressable, View } from 'react-native';
|
|
3
3
|
import { RankPyramid } from '../../components/blocks/rank-pyramid';
|
|
4
4
|
import { RankTierCard } from '../../components/blocks/rank-tier-card';
|
|
5
|
+
import { Progress } from '../../components/ui/progress';
|
|
6
|
+
import { Skeleton } from '../../components/ui/skeleton';
|
|
5
7
|
import { Text } from '../../components/ui/text';
|
|
6
8
|
import { cn } from '../../lib/utils';
|
|
9
|
+
const RANK_SUMMARY_MIN_HEIGHT = 108;
|
|
10
|
+
const CHEVRON_WIDTH = 14;
|
|
11
|
+
const CHEVRON_RIGHT_OFFSET = 12;
|
|
12
|
+
function normalizeHex(input) {
|
|
13
|
+
if (!input)
|
|
14
|
+
return undefined;
|
|
15
|
+
return input.startsWith('#') ? input : `#${input}`;
|
|
16
|
+
}
|
|
17
|
+
function getProgressPercent(progress) {
|
|
18
|
+
const max = progress.max ?? 100;
|
|
19
|
+
if (max <= 0)
|
|
20
|
+
return 0;
|
|
21
|
+
return Math.min(100, Math.max(0, (progress.value / max) * 100));
|
|
22
|
+
}
|
|
23
|
+
function getProgressValueLabel(progress) {
|
|
24
|
+
return progress.valueLabel ?? `${progress.value}/${progress.max ?? 100}`;
|
|
25
|
+
}
|
|
7
26
|
/**
|
|
8
27
|
* Career rank card — composes `RankTierCard` (season + tier icon + RR) next to
|
|
9
28
|
* `RankPyramid` (act-rank wins), with an optional chevron + tap handler for
|
|
@@ -12,8 +31,21 @@ import { cn } from '../../lib/utils';
|
|
|
12
31
|
* Data-free: the consumer resolves tier metadata, pre-sorts the pyramid's
|
|
13
32
|
* filled-slot list, and supplies the chevron icon and navigation handler.
|
|
14
33
|
*/
|
|
15
|
-
function RankCard({ seasonTitle, tierIcon, tierName, rankedRating, rrLabel, actRankLabel, filledTiers, borderIcon, pyramidSize = 80, chevron, onPress, isLoading = false, className, }) {
|
|
16
|
-
const
|
|
34
|
+
function RankCard({ seasonTitle, tierIcon, tierName, tierColor, rankedRating, rrLabel, rankProgress, actRankLabel, filledTiers, borderIcon, pyramidSize = 80, chevron, onPress, isLoading = false, showRankProgressSkeleton = true, className, }) {
|
|
35
|
+
const color = normalizeHex(tierColor);
|
|
36
|
+
const progressPercent = rankProgress ? getProgressPercent(rankProgress) : undefined;
|
|
37
|
+
const showProgressSkeleton = isLoading && showRankProgressSkeleton;
|
|
38
|
+
const showProgressRail = showProgressSkeleton || (!isLoading && !!rankProgress);
|
|
39
|
+
const showChevron = !!chevron && !!onPress;
|
|
40
|
+
const content = (_jsxs(View, { className: cn('relative px-4 py-3', className), children: [_jsx(View, { className: "flex-row items-center", style: { minHeight: RANK_SUMMARY_MIN_HEIGHT }, children: _jsxs(View, { className: "flex-1 flex-row items-start justify-center gap-x-6", children: [_jsx(RankTierCard, { className: "w-36", seasonTitle: seasonTitle, tierIcon: tierIcon, tierName: tierName, tierColor: tierColor, rankedRating: rankedRating, rrLabel: rrLabel, showRankedRating: !rankProgress && !showProgressSkeleton, isLoading: isLoading }), _jsxs(View, { className: "items-center self-stretch", children: [_jsx(Text, { className: "text-muted-foreground mb-1 text-xs font-medium tracking-widest uppercase", children: actRankLabel }), _jsx(View, { className: "flex-1 justify-center", children: _jsx(RankPyramid, { filledTiers: isLoading ? undefined : filledTiers, borderIcon: isLoading ? undefined : borderIcon, size: pyramidSize }) })] })] }) }), showProgressRail ? (_jsxs(View, { className: "mt-3", children: [showProgressSkeleton ? (_jsx(Skeleton, { className: "h-1.5 w-full rounded-full" })) : (_jsx(Progress, { value: progressPercent, className: "bg-muted/70 h-1.5", indicatorStyle: color ? { backgroundColor: color } : undefined })), _jsx(View, { className: "mt-1 flex-row items-center justify-between", children: showProgressSkeleton ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-4 w-20 rounded-md" }), _jsx(Skeleton, { className: "h-4 w-10 rounded-md" })] })) : rankProgress ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-muted-foreground text-xs font-medium tracking-wide uppercase", children: rankProgress.label ?? 'RANK RATING' }), _jsx(Text, { className: "text-muted-foreground text-xs font-semibold tabular-nums", children: getProgressValueLabel(rankProgress) })] })) : null })] })) : null, showChevron ? (_jsx(View, { pointerEvents: "none", style: {
|
|
41
|
+
position: 'absolute',
|
|
42
|
+
top: 0,
|
|
43
|
+
right: CHEVRON_RIGHT_OFFSET,
|
|
44
|
+
bottom: 0,
|
|
45
|
+
width: CHEVRON_WIDTH,
|
|
46
|
+
alignItems: 'center',
|
|
47
|
+
justifyContent: 'center',
|
|
48
|
+
}, children: chevron })) : null] }));
|
|
17
49
|
if (onPress) {
|
|
18
50
|
return (_jsx(Pressable, { onPress: onPress, style: ({ pressed }) => (pressed ? { opacity: 0.6 } : null), children: content }));
|
|
19
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rank-card.js","sourceRoot":"","sources":["../../../src/components/blocks/rank-card.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAwB,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"rank-card.js","sourceRoot":"","sources":["../../../src/components/blocks/rank-card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
interface RankTierCardSkeletonProps {
|
|
2
|
+
/** Show the ranked rating placeholder row. */
|
|
3
|
+
showRankedRating?: boolean;
|
|
2
4
|
/** Extra classes merged onto the outer column wrapper. */
|
|
3
5
|
className?: string;
|
|
4
6
|
}
|
|
5
7
|
/**
|
|
6
8
|
* Loading placeholder for `RankTierCard`. Mirrors the season label, 64×64 tier
|
|
7
|
-
* icon, tier name, and RR
|
|
8
|
-
* resolves.
|
|
9
|
+
* icon, tier name, and optional RR row so the layout doesn't shift once rank
|
|
10
|
+
* data resolves.
|
|
9
11
|
*/
|
|
10
|
-
declare function RankTierCardSkeleton({ className }: RankTierCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function RankTierCardSkeleton({ showRankedRating, className }: RankTierCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
11
13
|
export { RankTierCardSkeleton };
|
|
12
14
|
export type { RankTierCardSkeletonProps };
|
|
13
15
|
//# sourceMappingURL=rank-tier-card-skeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rank-tier-card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/rank-tier-card-skeleton.tsx"],"names":[],"mappings":"AAKA,UAAU,yBAAyB;IACjC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE,yBAAyB,
|
|
1
|
+
{"version":3,"file":"rank-tier-card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/rank-tier-card-skeleton.tsx"],"names":[],"mappings":"AAKA,UAAU,yBAAyB;IACjC,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,iBAAS,oBAAoB,CAAC,EAAE,gBAAuB,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAS9F;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAChC,YAAY,EAAE,yBAAyB,EAAE,CAAC"}
|
|
@@ -4,11 +4,11 @@ import { Skeleton } from '../../components/ui/skeleton';
|
|
|
4
4
|
import { cn } from '../../lib/utils';
|
|
5
5
|
/**
|
|
6
6
|
* Loading placeholder for `RankTierCard`. Mirrors the season label, 64×64 tier
|
|
7
|
-
* icon, tier name, and RR
|
|
8
|
-
* resolves.
|
|
7
|
+
* icon, tier name, and optional RR row so the layout doesn't shift once rank
|
|
8
|
+
* data resolves.
|
|
9
9
|
*/
|
|
10
|
-
function RankTierCardSkeleton({ className }) {
|
|
11
|
-
return (_jsxs(View, { className: cn('items-center', className), children: [_jsx(Skeleton, { className: "mb-1 h-4 w-12 rounded-md" }), _jsx(Skeleton, { style: { width: 64, height: 64 }, className: "rounded-md" }), _jsx(Skeleton, { className: "mt-1 h-6 w-24 rounded-md" }), _jsx(Skeleton, { className: "mt-0.5 h-5 w-14 rounded-md" })] }));
|
|
10
|
+
function RankTierCardSkeleton({ showRankedRating = true, className }) {
|
|
11
|
+
return (_jsxs(View, { className: cn('items-center', className), children: [_jsx(Skeleton, { className: "mb-1 h-4 w-12 rounded-md" }), _jsx(Skeleton, { style: { width: 64, height: 64 }, className: "rounded-md" }), _jsx(Skeleton, { className: "mt-1 h-6 w-24 rounded-md" }), showRankedRating ? _jsx(Skeleton, { className: "mt-0.5 h-5 w-14 rounded-md" }) : null] }));
|
|
12
12
|
}
|
|
13
13
|
export { RankTierCardSkeleton };
|
|
14
14
|
//# sourceMappingURL=rank-tier-card-skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rank-tier-card-skeleton.js","sourceRoot":"","sources":["../../../src/components/blocks/rank-tier-card-skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"rank-tier-card-skeleton.js","sourceRoot":"","sources":["../../../src/components/blocks/rank-tier-card-skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AASjC;;;;GAIG;AACH,SAAS,oBAAoB,CAAC,EAAE,gBAAgB,GAAG,IAAI,EAAE,SAAS,EAA6B;IAC7F,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,aAC5C,KAAC,QAAQ,IAAC,SAAS,EAAC,0BAA0B,GAAG,EACjD,KAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,YAAY,GAAG,EACrE,KAAC,QAAQ,IAAC,SAAS,EAAC,0BAA0B,GAAG,EAChD,gBAAgB,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,SAAS,EAAC,4BAA4B,GAAG,CAAC,CAAC,CAAC,IAAI,IACzE,CACR,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -5,10 +5,14 @@ interface RankTierCardProps {
|
|
|
5
5
|
tierIcon?: string;
|
|
6
6
|
/** Tier name, e.g. `"Diamond 2"`. */
|
|
7
7
|
tierName?: string;
|
|
8
|
+
/** Tier name accent color from the competitive tier API, with or without the leading `#`. */
|
|
9
|
+
tierColor?: string;
|
|
8
10
|
/** Ranked Rating value. */
|
|
9
11
|
rankedRating?: number;
|
|
10
12
|
/** Suffix shown after the RR value (default `"RR"`). Pass `""` to hide. */
|
|
11
13
|
rrLabel?: string;
|
|
14
|
+
/** Show the ranked rating row under the tier name. */
|
|
15
|
+
showRankedRating?: boolean;
|
|
12
16
|
/** Show the skeleton placeholder instead of the real content. */
|
|
13
17
|
isLoading?: boolean;
|
|
14
18
|
/** Extra classes merged onto the outer column wrapper. */
|
|
@@ -21,7 +25,7 @@ interface RankTierCardProps {
|
|
|
21
25
|
*
|
|
22
26
|
* Data-free: the consumer resolves tier metadata.
|
|
23
27
|
*/
|
|
24
|
-
declare function RankTierCard({ seasonTitle, tierIcon, tierName, rankedRating, rrLabel, isLoading, className, }: RankTierCardProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
declare function RankTierCard({ seasonTitle, tierIcon, tierName, tierColor, rankedRating, rrLabel, showRankedRating, isLoading, className, }: RankTierCardProps): import("react/jsx-runtime").JSX.Element;
|
|
25
29
|
export { RankTierCard };
|
|
26
30
|
export type { RankTierCardProps };
|
|
27
31
|
//# sourceMappingURL=rank-tier-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rank-tier-card.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/rank-tier-card.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;
|
|
1
|
+
{"version":3,"file":"rank-tier-card.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/rank-tier-card.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,2DAA2D;IAC3D,WAAW,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD;;;;;;GAMG;AACH,iBAAS,YAAY,CAAC,EACpB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAc,EACd,gBAAuB,EACvB,SAAiB,EACjB,SAAS,GACV,EAAE,iBAAiB,2CAuCnB;AAED,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -4,6 +4,11 @@ import { RankTierCardSkeleton } from '../../components/blocks/rank-tier-card-ske
|
|
|
4
4
|
import { Image } from '../../components/ui/image';
|
|
5
5
|
import { Text } from '../../components/ui/text';
|
|
6
6
|
import { cn } from '../../lib/utils';
|
|
7
|
+
function normalizeHex(input) {
|
|
8
|
+
if (!input)
|
|
9
|
+
return undefined;
|
|
10
|
+
return input.startsWith('#') ? input : `#${input}`;
|
|
11
|
+
}
|
|
7
12
|
/**
|
|
8
13
|
* Rank tier summary column — season label, tier icon, tier name, and RR,
|
|
9
14
|
* stacked and horizontally centered. Composes into the career rank card or
|
|
@@ -11,11 +16,12 @@ import { cn } from '../../lib/utils';
|
|
|
11
16
|
*
|
|
12
17
|
* Data-free: the consumer resolves tier metadata.
|
|
13
18
|
*/
|
|
14
|
-
function RankTierCard({ seasonTitle, tierIcon, tierName, rankedRating, rrLabel = 'RR', isLoading = false, className, }) {
|
|
19
|
+
function RankTierCard({ seasonTitle, tierIcon, tierName, tierColor, rankedRating, rrLabel = 'RR', showRankedRating = true, isLoading = false, className, }) {
|
|
15
20
|
if (isLoading) {
|
|
16
|
-
return _jsx(RankTierCardSkeleton, { className: className });
|
|
21
|
+
return _jsx(RankTierCardSkeleton, { showRankedRating: showRankedRating, className: className });
|
|
17
22
|
}
|
|
18
|
-
|
|
23
|
+
const color = normalizeHex(tierColor);
|
|
24
|
+
return (_jsxs(View, { className: cn('items-center', className), children: [_jsx(Text, { className: "text-muted-foreground mb-1 text-xs font-medium tracking-widest uppercase", children: seasonTitle }), _jsx(View, { className: "h-16 w-16", children: tierIcon ? (_jsx(Image, { source: tierIcon, style: { width: '100%', height: '100%' }, contentFit: "contain" })) : null }), tierName ? (_jsx(Text, { className: "text-foreground mt-1 text-base font-bold tracking-wide uppercase", style: color ? { color } : undefined, numberOfLines: 1, adjustsFontSizeToFit: true, children: tierName })) : null, showRankedRating ? (_jsxs(Text, { className: "text-muted-foreground mt-0.5 text-sm font-medium", children: [rankedRating ?? 0, rrLabel ? ` ${rrLabel}` : ''] })) : null] }));
|
|
19
25
|
}
|
|
20
26
|
export { RankTierCard };
|
|
21
27
|
//# sourceMappingURL=rank-tier-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rank-tier-card.js","sourceRoot":"","sources":["../../../src/components/blocks/rank-tier-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"rank-tier-card.js","sourceRoot":"","sources":["../../../src/components/blocks/rank-tier-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAuBjC,SAAS,YAAY,CAAC,KAAc;IAClC,IAAI,CAAC,KAAK;QAAE,OAAO,SAAS,CAAC;IAC7B,OAAO,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC;AACrD,CAAC;AAED;;;;;;GAMG;AACH,SAAS,YAAY,CAAC,EACpB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,GAAG,IAAI,EACd,gBAAgB,GAAG,IAAI,EACvB,SAAS,GAAG,KAAK,EACjB,SAAS,GACS;IAClB,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,KAAC,oBAAoB,IAAC,gBAAgB,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;IAC5F,CAAC;IAED,MAAM,KAAK,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAEtC,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,aAC5C,KAAC,IAAI,IAAC,SAAS,EAAC,0EAA0E,YACvF,WAAW,GACP,EACP,KAAC,IAAI,IAAC,SAAS,EAAC,WAAW,YACxB,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,KAAK,IACJ,MAAM,EAAE,QAAQ,EAChB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EACxC,UAAU,EAAC,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,IAAI,GACH,EACN,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,IAAI,IACH,SAAS,EAAC,kEAAkE,EAC5E,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EACpC,aAAa,EAAE,CAAC,EAChB,oBAAoB,kBAEnB,QAAQ,GACJ,CACR,CAAC,CAAC,CAAC,IAAI,EACP,gBAAgB,CAAC,CAAC,CAAC,CAClB,MAAC,IAAI,IAAC,SAAS,EAAC,kDAAkD,aAC/D,YAAY,IAAI,CAAC,EACjB,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,IACxB,CACR,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
2
3
|
import * as ProgressPrimitive from '@rn-primitives/progress';
|
|
3
4
|
type ProgressProps = ProgressPrimitive.RootProps & React.RefAttributes<ProgressPrimitive.RootRef> & {
|
|
4
5
|
indicatorClassName?: string;
|
|
6
|
+
indicatorStyle?: StyleProp<ViewStyle>;
|
|
5
7
|
};
|
|
6
|
-
declare function Progress({ className, value, indicatorClassName, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function Progress({ className, value, indicatorClassName, indicatorStyle, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
|
|
7
9
|
export { Progress };
|
|
8
10
|
export type { ProgressProps };
|
|
9
11
|
//# sourceMappingURL=progress.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAkB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9E,OAAO,KAAK,iBAAiB,MAAM,yBAAyB,CAAC;AAW7D,KAAK,aAAa,GAAG,iBAAiB,CAAC,SAAS,GAC9C,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEJ,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAQlG;AAuDD,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -3,16 +3,16 @@ import { Platform, View } from 'react-native';
|
|
|
3
3
|
import * as ProgressPrimitive from '@rn-primitives/progress';
|
|
4
4
|
import Animated, { Extrapolation, interpolate, useAnimatedStyle, useDerivedValue, withSpring, } from 'react-native-reanimated';
|
|
5
5
|
import { cn } from '../../lib/utils';
|
|
6
|
-
function Progress({ className, value, indicatorClassName, ...props }) {
|
|
7
|
-
return (_jsx(ProgressPrimitive.Root, { className: cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className), ...props, children: _jsx(Indicator, { value: value, className: indicatorClassName }) }));
|
|
6
|
+
function Progress({ className, value, indicatorClassName, indicatorStyle, ...props }) {
|
|
7
|
+
return (_jsx(ProgressPrimitive.Root, { className: cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className), ...props, children: _jsx(Indicator, { value: value, className: indicatorClassName, style: indicatorStyle }) }));
|
|
8
8
|
}
|
|
9
|
-
function WebIndicator({ value, className }) {
|
|
9
|
+
function WebIndicator({ value, className, style }) {
|
|
10
10
|
if (Platform.OS !== 'web') {
|
|
11
11
|
return null;
|
|
12
12
|
}
|
|
13
|
-
return (_jsx(View, { className: cn('bg-primary h-full w-full flex-1 transition-all', className), style: { transform: `translateX(-${100 - (value ?? 0)}%)` }, children: _jsx(ProgressPrimitive.Indicator, { className: cn('h-full w-full', className) }) }));
|
|
13
|
+
return (_jsx(View, { className: cn('bg-primary h-full w-full flex-1 transition-all', className), style: [{ transform: `translateX(-${100 - (value ?? 0)}%)` }, style], children: _jsx(ProgressPrimitive.Indicator, { className: cn('h-full w-full', className) }) }));
|
|
14
14
|
}
|
|
15
|
-
function NativeIndicator({ value, className }) {
|
|
15
|
+
function NativeIndicator({ value, className, style }) {
|
|
16
16
|
const progress = useDerivedValue(() => value ?? 0);
|
|
17
17
|
const indicator = useAnimatedStyle(() => {
|
|
18
18
|
return {
|
|
@@ -22,7 +22,7 @@ function NativeIndicator({ value, className }) {
|
|
|
22
22
|
if (Platform.OS === 'web') {
|
|
23
23
|
return null;
|
|
24
24
|
}
|
|
25
|
-
return (_jsx(ProgressPrimitive.Indicator, { asChild: true, children: _jsx(Animated.View, { style: indicator, className: cn('bg-foreground h-full', className) }) }));
|
|
25
|
+
return (_jsx(ProgressPrimitive.Indicator, { asChild: true, children: _jsx(Animated.View, { style: [indicator, style], className: cn('bg-foreground h-full', className) }) }));
|
|
26
26
|
}
|
|
27
27
|
function NullIndicator(_props) {
|
|
28
28
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAkC,MAAM,cAAc,CAAC;AAE9E,OAAO,KAAK,iBAAiB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,QAAQ,EAAE,EACf,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,UAAU,GACX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAQjC,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,GAAG,KAAK,EAAiB;IACjG,OAAO,CACL,KAAC,iBAAiB,CAAC,IAAI,IACrB,SAAS,EAAE,EAAE,CAAC,gEAAgE,EAAE,SAAS,CAAC,KACtF,KAAK,YACT,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,KAAK,EAAE,cAAc,GAAI,GAC1D,CAC1B,CAAC;AACJ,CAAC;AAQD,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAkB;IAC/D,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC,gDAAgD,EAAE,SAAS,CAAC,EAC1E,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAG,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,EAAY,EAAE,KAAK,CAAC,YAC9E,KAAC,iBAAiB,CAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,GAAI,GACrE,CACR,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAkB;IAClE,MAAM,QAAQ,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IAEnD,MAAM,SAAS,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACtC,OAAO;YACL,KAAK,EAAE,UAAU,CACf,GAAG,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,EAC1E,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAC5B;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,iBAAiB,CAAC,SAAS,IAAC,OAAO,kBAClC,KAAC,QAAQ,CAAC,IAAI,IAAC,KAAK,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,GAAI,GAClE,CAC/B,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,MAAsB;IAC3C,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC;IAChC,GAAG,EAAE,YAAY;IACjB,MAAM,EAAE,eAAe;IACvB,OAAO,EAAE,aAAa;CACvB,CAAC,CAAC;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { type ViewProps } from 'react-native';
|
|
1
|
+
import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
|
|
2
2
|
type ProgressProps = ViewProps & {
|
|
3
3
|
/** 0–100 */
|
|
4
4
|
value?: number | null;
|
|
5
5
|
indicatorClassName?: string;
|
|
6
|
+
indicatorStyle?: StyleProp<ViewStyle>;
|
|
6
7
|
};
|
|
7
8
|
/**
|
|
8
9
|
* Web-only Progress implementation.
|
|
@@ -10,7 +11,7 @@ type ProgressProps = ViewProps & {
|
|
|
10
11
|
* The native sibling (`progress.tsx`) keeps the animated + accessible
|
|
11
12
|
* @rn-primitives implementation for iOS/Android.
|
|
12
13
|
*/
|
|
13
|
-
declare function Progress({ className, value, indicatorClassName, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare function Progress({ className, value, indicatorClassName, indicatorStyle, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
export { Progress };
|
|
15
16
|
export type { ProgressProps };
|
|
16
17
|
//# sourceMappingURL=progress.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.web.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.web.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"progress.web.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.web.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpF,KAAK,aAAa,GAAG,SAAS,GAAG;IAC/B,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC,CAAC;AAEF;;;;;GAKG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAwBlG;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -7,14 +7,17 @@ import { cn } from '../../lib/utils';
|
|
|
7
7
|
* The native sibling (`progress.tsx`) keeps the animated + accessible
|
|
8
8
|
* @rn-primitives implementation for iOS/Android.
|
|
9
9
|
*/
|
|
10
|
-
function Progress({ className, value, indicatorClassName, ...props }) {
|
|
10
|
+
function Progress({ className, value, indicatorClassName, indicatorStyle, ...props }) {
|
|
11
11
|
const clamped = Math.max(0, Math.min(100, value ?? 0));
|
|
12
|
-
return (_jsx(View, { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": clamped, className: cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className), ...props, children: _jsx(View, { className: cn('bg-primary h-full', indicatorClassName), style:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
return (_jsx(View, { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": clamped, className: cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className), ...props, children: _jsx(View, { className: cn('bg-primary h-full', indicatorClassName), style: [
|
|
13
|
+
{
|
|
14
|
+
width: `${clamped}%`,
|
|
15
|
+
// `transition` goes through to the underlying DOM element via
|
|
16
|
+
// react-native-web; on native this prop is ignored.
|
|
17
|
+
transition: 'width 0.3s ease-out',
|
|
18
|
+
},
|
|
19
|
+
indicatorStyle,
|
|
20
|
+
] }) }));
|
|
18
21
|
}
|
|
19
22
|
export { Progress };
|
|
20
23
|
//# sourceMappingURL=progress.web.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.web.js","sourceRoot":"","sources":["../../../src/components/ui/progress.web.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"progress.web.js","sourceRoot":"","sources":["../../../src/components/ui/progress.web.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAkD,MAAM,cAAc,CAAC;AAEpF,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AASjC;;;;;GAKG;AACH,SAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,GAAG,KAAK,EAAiB;IACjG,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC;IACvD,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAC,aAAa,mBACH,CAAC,mBACD,GAAG,mBACH,OAAO,EACtB,SAAS,EAAE,EAAE,CAAC,gEAAgE,EAAE,SAAS,CAAC,KACtF,KAAK,YACT,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,CAAC,EACtD,KAAK,EAAE;gBACL;oBACE,KAAK,EAAE,GAAG,OAAO,GAAG;oBACpB,8DAA8D;oBAC9D,oDAAoD;oBACpD,UAAU,EAAE,qBAAqB;iBACxB;gBACX,cAAc;aACf,GACD,GACG,CACR,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|