jfs-components 0.0.69 → 0.0.71
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/CHANGELOG.md +20 -0
- package/lib/commonjs/components/CardAdvisory/CardAdvisory.js +203 -0
- package/lib/commonjs/components/CardCTA/CardCTA.js +198 -16
- package/lib/commonjs/components/CircularProgressBar/CircularProgressBar.js +147 -0
- package/lib/commonjs/components/CircularProgressBarDoted/CircularProgressBarDoted.js +258 -0
- package/lib/commonjs/components/CircularRating/CircularRating.js +161 -0
- package/lib/commonjs/components/Gauge/Gauge.js +223 -0
- package/lib/commonjs/components/ListGroup/ListGroup.js +3 -1
- package/lib/commonjs/components/MediaCard/GlassFill.js +62 -0
- package/lib/commonjs/components/MediaCard/GlassFill.web.js +48 -0
- package/lib/commonjs/components/MediaCard/MediaCard.js +28 -31
- package/lib/commonjs/components/Nudge/Nudge.js +179 -87
- package/lib/commonjs/components/index.js +35 -0
- package/lib/commonjs/design-tokens/Coin Variables-variables-full.json +1 -1
- package/lib/commonjs/icons/registry.js +1 -1
- package/lib/module/components/CardAdvisory/CardAdvisory.js +197 -0
- package/lib/module/components/CardCTA/CardCTA.js +199 -17
- package/lib/module/components/CircularProgressBar/CircularProgressBar.js +141 -0
- package/lib/module/components/CircularProgressBarDoted/CircularProgressBarDoted.js +253 -0
- package/lib/module/components/CircularRating/CircularRating.js +155 -0
- package/lib/module/components/Gauge/Gauge.js +217 -0
- package/lib/module/components/ListGroup/ListGroup.js +3 -1
- package/lib/module/components/MediaCard/GlassFill.js +57 -0
- package/lib/module/components/MediaCard/GlassFill.web.js +43 -0
- package/lib/module/components/MediaCard/MediaCard.js +29 -32
- package/lib/module/components/Nudge/Nudge.js +178 -87
- package/lib/module/components/index.js +5 -0
- package/lib/module/design-tokens/Coin Variables-variables-full.json +1 -1
- package/lib/module/icons/registry.js +1 -1
- package/lib/typescript/src/components/CardAdvisory/CardAdvisory.d.ts +49 -0
- package/lib/typescript/src/components/CardCTA/CardCTA.d.ts +16 -1
- package/lib/typescript/src/components/CircularProgressBar/CircularProgressBar.d.ts +27 -0
- package/lib/typescript/src/components/CircularProgressBarDoted/CircularProgressBarDoted.d.ts +48 -0
- package/lib/typescript/src/components/CircularRating/CircularRating.d.ts +49 -0
- package/lib/typescript/src/components/Gauge/Gauge.d.ts +53 -0
- package/lib/typescript/src/components/MediaCard/GlassFill.d.ts +47 -0
- package/lib/typescript/src/components/MediaCard/GlassFill.web.d.ts +20 -0
- package/lib/typescript/src/components/MediaCard/MediaCard.d.ts +17 -13
- package/lib/typescript/src/components/Nudge/Nudge.d.ts +14 -11
- package/lib/typescript/src/components/index.d.ts +6 -1
- package/lib/typescript/src/icons/registry.d.ts +1 -1
- package/package.json +3 -2
- package/src/components/CardAdvisory/CardAdvisory.tsx +283 -0
- package/src/components/CardCTA/CardCTA.tsx +236 -13
- package/src/components/CircularProgressBar/CircularProgressBar.tsx +190 -0
- package/src/components/CircularProgressBarDoted/CircularProgressBarDoted.tsx +357 -0
- package/src/components/CircularRating/CircularRating.tsx +241 -0
- package/src/components/Gauge/Gauge.tsx +303 -0
- package/src/components/ListGroup/ListGroup.tsx +3 -1
- package/src/components/MediaCard/GlassFill.tsx +89 -0
- package/src/components/MediaCard/GlassFill.web.tsx +53 -0
- package/src/components/MediaCard/MediaCard.tsx +29 -48
- package/src/components/Nudge/Nudge.tsx +222 -82
- package/src/components/index.ts +6 -1
- package/src/design-tokens/Coin Variables-variables-full.json +1 -1
- package/src/icons/registry.ts +1 -1
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
|
|
3
|
+
type CardAdvisoryBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
|
|
4
|
+
export type CardAdvisoryProps = CardAdvisoryBaseProps & {
|
|
5
|
+
/** Main heading text. */
|
|
6
|
+
title?: string;
|
|
7
|
+
/** Description shown below the heading. */
|
|
8
|
+
description?: string;
|
|
9
|
+
/** Progress score displayed in the circular progress bar. */
|
|
10
|
+
value?: number;
|
|
11
|
+
/** Optional formatted score label. */
|
|
12
|
+
valueLabel?: string;
|
|
13
|
+
/** Show the info icon beside the title. */
|
|
14
|
+
showInfoIcon?: boolean;
|
|
15
|
+
/** Show the bottom advisory nudge. */
|
|
16
|
+
showNudge?: boolean;
|
|
17
|
+
/** Body text for the default nudge. */
|
|
18
|
+
nudgeBody?: string;
|
|
19
|
+
/** Button label for the default nudge. */
|
|
20
|
+
nudgeButtonLabel?: string;
|
|
21
|
+
/** Callback for the default nudge button. */
|
|
22
|
+
onPressNudgeButton?: () => void;
|
|
23
|
+
/** Optional slot replacing the title info icon. Receives `modes` recursively. */
|
|
24
|
+
titleEndSlot?: React.ReactNode;
|
|
25
|
+
/** Optional slot replacing the circular progress bar. Receives `modes` recursively. */
|
|
26
|
+
progressSlot?: React.ReactNode;
|
|
27
|
+
/** Optional slot replacing the bottom nudge. Receives `modes` recursively. */
|
|
28
|
+
nudgeSlot?: React.ReactNode;
|
|
29
|
+
/** Design token modes forwarded to token lookups and child components. */
|
|
30
|
+
modes?: Record<string, any>;
|
|
31
|
+
/** Optional container style override. */
|
|
32
|
+
style?: StyleProp<ViewStyle>;
|
|
33
|
+
/** Optional main content row style override. */
|
|
34
|
+
mainContentStyle?: StyleProp<ViewStyle>;
|
|
35
|
+
/** Optional title text style override. */
|
|
36
|
+
titleStyle?: StyleProp<TextStyle>;
|
|
37
|
+
/** Optional description text style override. */
|
|
38
|
+
descriptionStyle?: StyleProp<TextStyle>;
|
|
39
|
+
/** Optional progress wrapper style override. */
|
|
40
|
+
progressStyle?: StyleProp<ViewStyle>;
|
|
41
|
+
/** Optional nudge style override. */
|
|
42
|
+
nudgeStyle?: StyleProp<ViewStyle>;
|
|
43
|
+
/** Accessibility label for the full card. */
|
|
44
|
+
accessibilityLabel?: string;
|
|
45
|
+
};
|
|
46
|
+
declare function CardAdvisory({ title, description, value, valueLabel, showInfoIcon, showNudge, nudgeBody, nudgeButtonLabel, onPressNudgeButton, titleEndSlot, progressSlot, nudgeSlot, modes: propModes, style, mainContentStyle, titleStyle, descriptionStyle, progressStyle, nudgeStyle, accessibilityLabel, ...rest }: CardAdvisoryProps): import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
declare const _default: React.MemoExoticComponent<typeof CardAdvisory>;
|
|
48
|
+
export default _default;
|
|
49
|
+
//# sourceMappingURL=CardAdvisory.d.ts.map
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type ViewStyle, type StyleProp } from 'react-native';
|
|
3
|
+
export type CardCTAType = 'cta' | 'rating';
|
|
3
4
|
export type CardCTAProps = {
|
|
5
|
+
/** Visual layout variant */
|
|
6
|
+
type?: CardCTAType;
|
|
4
7
|
/** Title text */
|
|
5
8
|
title?: string;
|
|
6
9
|
/** Body / subtitle text */
|
|
@@ -11,15 +14,27 @@ export type CardCTAProps = {
|
|
|
11
14
|
buttonLabel?: string;
|
|
12
15
|
/** Callback for the default Button press */
|
|
13
16
|
onPressButton?: () => void;
|
|
17
|
+
/** Label shown in the rating badge */
|
|
18
|
+
ratingLabel?: string;
|
|
19
|
+
/** Show like/dislike actions in the rating footer */
|
|
20
|
+
showRatingActions?: boolean;
|
|
21
|
+
/** Callback for the default like action */
|
|
22
|
+
onPressLike?: () => void;
|
|
23
|
+
/** Callback for the default dislike action */
|
|
24
|
+
onPressDislike?: () => void;
|
|
14
25
|
/** Mode configuration for design token resolution */
|
|
15
26
|
modes?: Record<string, any>;
|
|
16
27
|
/** Slot: replaces the default icon area (right side) */
|
|
17
28
|
iconSlot?: React.ReactNode;
|
|
18
29
|
/** Slot: replaces the default Button */
|
|
19
30
|
buttonSlot?: React.ReactNode;
|
|
31
|
+
/** Slot: replaces the default rating badge */
|
|
32
|
+
ratingBadgeSlot?: React.ReactNode;
|
|
33
|
+
/** Slot: replaces the default like/dislike action group */
|
|
34
|
+
ratingActionsSlot?: React.ReactNode;
|
|
20
35
|
/** Container style overrides */
|
|
21
36
|
style?: StyleProp<ViewStyle>;
|
|
22
37
|
};
|
|
23
|
-
declare function CardCTA({ title, body, iconName, buttonLabel, onPressButton, modes: propModes, iconSlot, buttonSlot, style, }: CardCTAProps): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
declare function CardCTA({ type, title, body, iconName, buttonLabel, onPressButton, ratingLabel, showRatingActions, onPressLike, onPressDislike, modes: propModes, iconSlot, buttonSlot, ratingBadgeSlot, ratingActionsSlot, style, }: CardCTAProps): import("react/jsx-runtime").JSX.Element;
|
|
24
39
|
export default CardCTA;
|
|
25
40
|
//# sourceMappingURL=CardCTA.d.ts.map
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
|
|
3
|
+
type CircularProgressBarBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
|
|
4
|
+
export type CircularProgressBarState = 'Active' | 'Inactive';
|
|
5
|
+
export type CircularProgressBarProps = CircularProgressBarBaseProps & {
|
|
6
|
+
/** Current progress value. Clamped between 0 and 100. */
|
|
7
|
+
value?: number;
|
|
8
|
+
/** Active shows progress and value; inactive shows the track and minus icon. */
|
|
9
|
+
state?: CircularProgressBarState | boolean;
|
|
10
|
+
/** Optional formatted value shown in the active state. */
|
|
11
|
+
valueLabel?: string;
|
|
12
|
+
/** Design token modes forwarded to token lookups. */
|
|
13
|
+
modes?: Record<string, any>;
|
|
14
|
+
/** Container style override. */
|
|
15
|
+
style?: StyleProp<ViewStyle>;
|
|
16
|
+
/** Track stroke style override. */
|
|
17
|
+
trackStyle?: StyleProp<ViewStyle>;
|
|
18
|
+
/** Progress stroke style override. */
|
|
19
|
+
progressStyle?: StyleProp<ViewStyle>;
|
|
20
|
+
/** Value text style override. */
|
|
21
|
+
valueStyle?: StyleProp<TextStyle>;
|
|
22
|
+
/** Accessibility label for the whole progress component. */
|
|
23
|
+
accessibilityLabel?: string;
|
|
24
|
+
};
|
|
25
|
+
declare function CircularProgressBar({ value, state, valueLabel, modes: propModes, style, trackStyle, progressStyle, valueStyle, accessibilityLabel, ...rest }: CircularProgressBarProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export default CircularProgressBar;
|
|
27
|
+
//# sourceMappingURL=CircularProgressBar.d.ts.map
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
|
|
3
|
+
type CircularProgressBarDotedBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
|
|
4
|
+
export type CircularProgressBarDotedProps = CircularProgressBarDotedBaseProps & {
|
|
5
|
+
/** Progress value. Clamped between 0 and 100. */
|
|
6
|
+
value?: number;
|
|
7
|
+
/** Number of dots in the ring. */
|
|
8
|
+
dotCount?: number;
|
|
9
|
+
/** Small label above the score. */
|
|
10
|
+
label?: string;
|
|
11
|
+
/** Text below the score. */
|
|
12
|
+
tierLabel?: string;
|
|
13
|
+
/** Show or hide the chevron after the tier label. */
|
|
14
|
+
showChevron?: boolean;
|
|
15
|
+
/** Called when the component is pressed. */
|
|
16
|
+
onPress?: () => void;
|
|
17
|
+
/** Called when the tier row is pressed. */
|
|
18
|
+
onTierPress?: () => void;
|
|
19
|
+
/** Design token modes forwarded to token lookups and slot children. */
|
|
20
|
+
modes?: Record<string, any>;
|
|
21
|
+
/** Slot rendered in the center of the dotted ring. Receives `modes` recursively. */
|
|
22
|
+
children?: React.ReactNode;
|
|
23
|
+
/** Container style override. */
|
|
24
|
+
style?: StyleProp<ViewStyle>;
|
|
25
|
+
/** Ring wrapper style override. */
|
|
26
|
+
ringStyle?: StyleProp<ViewStyle>;
|
|
27
|
+
/** Track dot style override. */
|
|
28
|
+
trackDotStyle?: StyleProp<ViewStyle>;
|
|
29
|
+
/** Progress dot style override. */
|
|
30
|
+
progressDotStyle?: StyleProp<ViewStyle>;
|
|
31
|
+
/** Center content style override. */
|
|
32
|
+
contentStyle?: StyleProp<ViewStyle>;
|
|
33
|
+
/** Score tier stack style override. */
|
|
34
|
+
scoreTierStyle?: StyleProp<ViewStyle>;
|
|
35
|
+
/** Score trend row style override. */
|
|
36
|
+
scoreTrendStyle?: StyleProp<ViewStyle>;
|
|
37
|
+
/** Label text style override. */
|
|
38
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
39
|
+
/** Score text style override. */
|
|
40
|
+
scoreLabelStyle?: StyleProp<TextStyle>;
|
|
41
|
+
/** Tier text style override. */
|
|
42
|
+
tierLabelStyle?: StyleProp<TextStyle>;
|
|
43
|
+
/** Accessibility label for the whole progress component. */
|
|
44
|
+
accessibilityLabel?: string;
|
|
45
|
+
};
|
|
46
|
+
declare function CircularProgressBarDoted({ value, dotCount, label, tierLabel, showChevron, onPress, onTierPress, modes: propModes, children, style, ringStyle, trackDotStyle, progressDotStyle, contentStyle, scoreTierStyle, scoreTrendStyle, labelStyle, scoreLabelStyle, tierLabelStyle, accessibilityLabel, onLayout, ...rest }: CircularProgressBarDotedProps): import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
export default CircularProgressBarDoted;
|
|
48
|
+
//# sourceMappingURL=CircularProgressBarDoted.d.ts.map
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
|
|
3
|
+
type CircularRatingBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
|
|
4
|
+
export type CircularRatingProps = CircularRatingBaseProps & {
|
|
5
|
+
/** Rating value. Clamped by CircularProgressBarDoted between 0 and 100. */
|
|
6
|
+
value?: number;
|
|
7
|
+
/** Number of dots rendered around the rating ring. */
|
|
8
|
+
dotCount?: number;
|
|
9
|
+
/** Small label above the score. */
|
|
10
|
+
label?: string;
|
|
11
|
+
/** Text below the score. */
|
|
12
|
+
tierLabel?: string;
|
|
13
|
+
/** Footer timestamp/copy shown below the rating. */
|
|
14
|
+
footerText?: string;
|
|
15
|
+
/** Show the footer info icon. */
|
|
16
|
+
showFooterIcon?: boolean;
|
|
17
|
+
/** Show the bottom inline nudge. */
|
|
18
|
+
showNudge?: boolean;
|
|
19
|
+
/** Body text for the default bottom nudge. */
|
|
20
|
+
nudgeBody?: string;
|
|
21
|
+
/** Button label for the default bottom nudge. */
|
|
22
|
+
nudgeButtonLabel?: string;
|
|
23
|
+
/** Called when the nudge button is pressed. */
|
|
24
|
+
onPressNudgeButton?: () => void;
|
|
25
|
+
/** Called when the rating tier row is pressed. */
|
|
26
|
+
onTierPress?: () => void;
|
|
27
|
+
/** Optional footer slot. Receives `modes` recursively. */
|
|
28
|
+
footerSlot?: React.ReactNode;
|
|
29
|
+
/** Optional nudge slot. Receives `modes` recursively. */
|
|
30
|
+
nudgeSlot?: React.ReactNode;
|
|
31
|
+
/** Design token modes forwarded to token lookups and child components. */
|
|
32
|
+
modes?: Record<string, any>;
|
|
33
|
+
/** Optional container style overrides. */
|
|
34
|
+
style?: StyleProp<ViewStyle>;
|
|
35
|
+
/** Optional rating ring wrapper style overrides. */
|
|
36
|
+
ratingStyle?: StyleProp<ViewStyle>;
|
|
37
|
+
/** Optional footer row style overrides. */
|
|
38
|
+
footerStyle?: StyleProp<ViewStyle>;
|
|
39
|
+
/** Optional footer text style overrides. */
|
|
40
|
+
footerTextStyle?: StyleProp<TextStyle>;
|
|
41
|
+
/** Optional nudge style overrides. */
|
|
42
|
+
nudgeStyle?: StyleProp<ViewStyle>;
|
|
43
|
+
/** Accessibility label for the whole component. */
|
|
44
|
+
accessibilityLabel?: string;
|
|
45
|
+
};
|
|
46
|
+
declare function CircularRating({ value, dotCount, label, tierLabel, footerText, showFooterIcon, showNudge, nudgeBody, nudgeButtonLabel, onPressNudgeButton, onTierPress, footerSlot, nudgeSlot, modes: propModes, style, ratingStyle, footerStyle, footerTextStyle, nudgeStyle, accessibilityLabel, ...rest }: CircularRatingProps): import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
declare const _default: React.MemoExoticComponent<typeof CircularRating>;
|
|
48
|
+
export default _default;
|
|
49
|
+
//# sourceMappingURL=CircularRating.d.ts.map
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
|
|
3
|
+
import { type SupportTextProps } from '../SupportText/SupportText';
|
|
4
|
+
type GaugeBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
|
|
5
|
+
export type GaugeProps = GaugeBaseProps & {
|
|
6
|
+
/** Current gauge value. Interpreted against `min` and `max`. */
|
|
7
|
+
value?: number;
|
|
8
|
+
/** Lower bound used to normalize progress. */
|
|
9
|
+
min?: number;
|
|
10
|
+
/** Upper bound used to normalize progress. */
|
|
11
|
+
max?: number;
|
|
12
|
+
/** Optional formatted value shown in the default readout. */
|
|
13
|
+
valueLabel?: string;
|
|
14
|
+
/** Heading above the arc. */
|
|
15
|
+
title?: string;
|
|
16
|
+
/** Caption below the arc. */
|
|
17
|
+
caption?: string;
|
|
18
|
+
/** Support text shown in the default readout. */
|
|
19
|
+
supportText?: string;
|
|
20
|
+
/** Status passed to the default SupportText component. */
|
|
21
|
+
supportTextStatus?: SupportTextProps['status'];
|
|
22
|
+
/** Hides the heading while keeping the rest of the layout intact. */
|
|
23
|
+
showTitle?: boolean;
|
|
24
|
+
/** Hides the caption while keeping the rest of the layout intact. */
|
|
25
|
+
showCaption?: boolean;
|
|
26
|
+
/** Hides default support text when no custom readout slot is provided. */
|
|
27
|
+
showSupportText?: boolean;
|
|
28
|
+
/** Design token modes forwarded to token lookups and slot children. */
|
|
29
|
+
modes?: Record<string, any>;
|
|
30
|
+
/** Slot rendered in the center of the gauge arc. Receives `modes` recursively. */
|
|
31
|
+
children?: React.ReactNode;
|
|
32
|
+
/** Container style override. */
|
|
33
|
+
style?: StyleProp<ViewStyle>;
|
|
34
|
+
/** Arc wrapper style override. */
|
|
35
|
+
arcStyle?: StyleProp<ViewStyle>;
|
|
36
|
+
/** Readout container style override. */
|
|
37
|
+
readoutStyle?: StyleProp<ViewStyle>;
|
|
38
|
+
/** Title text style override. */
|
|
39
|
+
titleStyle?: StyleProp<TextStyle>;
|
|
40
|
+
/** Value text style override. */
|
|
41
|
+
valueStyle?: StyleProp<TextStyle>;
|
|
42
|
+
/** Caption text style override. */
|
|
43
|
+
captionStyle?: StyleProp<TextStyle>;
|
|
44
|
+
/** Track stroke style override. */
|
|
45
|
+
trackStyle?: StyleProp<ViewStyle>;
|
|
46
|
+
/** Progress stroke style override. */
|
|
47
|
+
progressStyle?: StyleProp<ViewStyle>;
|
|
48
|
+
/** Accessibility label for the whole gauge. */
|
|
49
|
+
accessibilityLabel?: string;
|
|
50
|
+
};
|
|
51
|
+
declare function Gauge({ value, min, max, valueLabel, title, caption, supportText, supportTextStatus, showTitle, showCaption, showSupportText, modes: propModes, children, style, arcStyle, readoutStyle, titleStyle, valueStyle, captionStyle, trackStyle, progressStyle, accessibilityLabel, ...rest }: GaugeProps): import("react/jsx-runtime").JSX.Element;
|
|
52
|
+
export default Gauge;
|
|
53
|
+
//# sourceMappingURL=Gauge.d.ts.map
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { type ViewStyle, type StyleProp } from 'react-native';
|
|
2
|
+
export type GlassTint = 'dark' | 'light';
|
|
3
|
+
export interface GlassFillProps {
|
|
4
|
+
/**
|
|
5
|
+
* Visual tint of the glass surface. Maps to `BlurView`'s `blurType`
|
|
6
|
+
* (`'dark'` | `'light'`). The library also drives the appropriate
|
|
7
|
+
* `reducedTransparencyFallbackColor` from this so iOS gracefully degrades
|
|
8
|
+
* when "Reduce Transparency" is enabled in system accessibility settings.
|
|
9
|
+
*/
|
|
10
|
+
tint?: GlassTint;
|
|
11
|
+
/**
|
|
12
|
+
* Blur strength as a 0–100 "intensity" value (kept compatible with the
|
|
13
|
+
* previous `expo-blur` API so consumers don't need to relearn the scale).
|
|
14
|
+
* Internally mapped to `@react-native-community/blur`'s `blurAmount`,
|
|
15
|
+
* which is roughly 0–32 on iOS / Android.
|
|
16
|
+
*/
|
|
17
|
+
intensity?: number;
|
|
18
|
+
/**
|
|
19
|
+
* Token-derived color tint laid OVER the live blur (Figma `blur/minimal/background`).
|
|
20
|
+
* Painted as a translucent overlay so the glass keeps the design system
|
|
21
|
+
* color signature even when the platform blur quality varies.
|
|
22
|
+
*/
|
|
23
|
+
overlayColor?: string;
|
|
24
|
+
/** Container style overrides. Defaults to `StyleSheet.absoluteFill`. */
|
|
25
|
+
style?: StyleProp<ViewStyle>;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Glass / frosted surface for native (iOS + Android).
|
|
29
|
+
*
|
|
30
|
+
* Why this lives in its own platform-split file:
|
|
31
|
+
* - `@react-native-community/blur` is a native-only module. Importing it on
|
|
32
|
+
* web throws because the JS shim references native components that aren't
|
|
33
|
+
* registered there. By using Metro's platform-extension resolution
|
|
34
|
+
* (`GlassFill.tsx` for native, `GlassFill.web.tsx` for web), we keep the
|
|
35
|
+
* web bundle free of any native-only imports.
|
|
36
|
+
* - Centralizes the `intensity` (0–100) -> `blurAmount` (0–32) mapping so
|
|
37
|
+
* callers can keep the Figma token semantics they already know.
|
|
38
|
+
*
|
|
39
|
+
* On iOS this is a real `UIVisualEffectView` (true OS-level live blur).
|
|
40
|
+
* On Android this uses the community blur view (RealtimeBlurView). On devices
|
|
41
|
+
* where realtime blur is unavailable, `reducedTransparencyFallbackColor` (and
|
|
42
|
+
* the explicit `overlayColor`) ensure the surface still renders as a
|
|
43
|
+
* translucent tinted scrim instead of disappearing.
|
|
44
|
+
*/
|
|
45
|
+
declare function GlassFill({ tint, intensity, overlayColor, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
|
|
46
|
+
export default GlassFill;
|
|
47
|
+
//# sourceMappingURL=GlassFill.d.ts.map
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { type ViewStyle, type StyleProp } from 'react-native';
|
|
2
|
+
export type GlassTint = 'dark' | 'light';
|
|
3
|
+
export interface GlassFillProps {
|
|
4
|
+
tint?: GlassTint;
|
|
5
|
+
intensity?: number;
|
|
6
|
+
overlayColor?: string;
|
|
7
|
+
style?: StyleProp<ViewStyle>;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Web counterpart of `GlassFill`.
|
|
11
|
+
*
|
|
12
|
+
* `@react-native-community/blur` does not ship a web implementation, so for
|
|
13
|
+
* the web bundle we render a translucent `View` with `backdrop-filter: blur()`
|
|
14
|
+
* — which is exactly how 0.0.67 and earlier shipped the glass effect on web.
|
|
15
|
+
* Native bundles pick up `GlassFill.tsx` instead via Metro's platform
|
|
16
|
+
* resolver; the web bundle picks up this file.
|
|
17
|
+
*/
|
|
18
|
+
declare function GlassFill({ tint, intensity, overlayColor, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export default GlassFill;
|
|
20
|
+
//# sourceMappingURL=GlassFill.web.d.ts.map
|
|
@@ -83,20 +83,24 @@ export declare function Title({ children, style, modes: propModes }: {
|
|
|
83
83
|
* Glass Footer — pinned to the bottom of the card, **always** on top of the
|
|
84
84
|
* Header (`zIndex: 2`).
|
|
85
85
|
*
|
|
86
|
-
* Glass implementation
|
|
87
|
-
* - **iOS
|
|
88
|
-
*
|
|
89
|
-
* `
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
94
|
-
*
|
|
95
|
-
*
|
|
96
|
-
* - **Web:** `BlurView` on web is implemented as `backdrop-filter: blur()`,
|
|
97
|
-
* which already worked in the previous version. Same component, same API.
|
|
86
|
+
* Glass implementation:
|
|
87
|
+
* - **iOS / Android:** `<GlassFill>` (this folder) wraps
|
|
88
|
+
* `@react-native-community/blur`'s `BlurView`. iOS gets a real
|
|
89
|
+
* `UIVisualEffectView` (live OS blur); Android gets the community
|
|
90
|
+
* `RealtimeBlurView` with a token-driven tinted scrim fallback for
|
|
91
|
+
* devices where realtime blur is unavailable.
|
|
92
|
+
* - **Web:** the platform-extension file `GlassFill.web.tsx` renders a
|
|
93
|
+
* translucent View with `backdrop-filter: blur()` — Metro picks the
|
|
94
|
+
* correct file automatically, so the web bundle never imports the
|
|
95
|
+
* native-only blur module.
|
|
98
96
|
*
|
|
99
|
-
*
|
|
97
|
+
* Why we don't use `expo-blur`: it requires Expo Modules autolinking on the
|
|
98
|
+
* consumer side (`use_expo_modules!` / `ExpoModulesPackage`), which silently
|
|
99
|
+
* breaks bare React Native apps that just install this library and run
|
|
100
|
+
* `pod install`. `@react-native-community/blur` is a regular RN native
|
|
101
|
+
* module — autolinking handles it with no additional setup.
|
|
102
|
+
*
|
|
103
|
+
* Tokens still drive the tint color, blur intensity and inner spacing.
|
|
100
104
|
*/
|
|
101
105
|
export declare function Footer({ children, style, modes: propModes }: {
|
|
102
106
|
children?: React.ReactNode;
|
|
@@ -1,31 +1,34 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type ViewStyle, type StyleProp } from 'react-native';
|
|
3
|
+
export type NudgeType = 'stacked-prominent' | 'stacked-detailed' | 'inline-compact';
|
|
3
4
|
export type NudgeProps = {
|
|
4
5
|
/**
|
|
5
|
-
* Controls the layout
|
|
6
|
-
* - "
|
|
7
|
-
* - "
|
|
6
|
+
* Controls the layout type.
|
|
7
|
+
* - "stacked-prominent": icon + title/body/button content
|
|
8
|
+
* - "inline-compact": icon + body/button in one row
|
|
9
|
+
* - "stacked-detailed": header + children detail slot
|
|
8
10
|
*/
|
|
9
|
-
|
|
11
|
+
type?: NudgeType;
|
|
10
12
|
/** Title text displayed in the nudge */
|
|
11
13
|
title?: string;
|
|
12
|
-
/** Body text displayed
|
|
14
|
+
/** Body text displayed in prominent and compact types when no children are provided */
|
|
13
15
|
body?: string;
|
|
14
|
-
/** Label for the default button
|
|
16
|
+
/** Label for the default button when no buttonSlot is provided */
|
|
15
17
|
buttonLabel?: string;
|
|
16
18
|
/** Callback for the default button press */
|
|
17
19
|
onPressButton?: () => void;
|
|
18
|
-
/** Custom button slot
|
|
20
|
+
/** Custom button slot, overrides buttonLabel/onPressButton */
|
|
19
21
|
buttonSlot?: React.ReactNode;
|
|
20
|
-
/** Optional leading slot for
|
|
21
|
-
startSlot?: React.ReactNode;
|
|
22
|
-
/** Content slot — overrides
|
|
22
|
+
/** Optional leading slot. Omit for the token-driven sparkle icon, pass null/false to hide. */
|
|
23
|
+
startSlot?: React.ReactNode | false;
|
|
24
|
+
/** Content slot — overrides default content, or provides detailed list content */
|
|
23
25
|
children?: React.ReactNode;
|
|
24
26
|
/** Mode configuration for design token resolution */
|
|
25
27
|
modes?: Record<string, any>;
|
|
26
28
|
/** Optional container style overrides */
|
|
27
29
|
style?: StyleProp<ViewStyle>;
|
|
28
30
|
};
|
|
29
|
-
declare function
|
|
31
|
+
declare function NudgeImpl({ type, title, body, buttonLabel, onPressButton, buttonSlot, startSlot, children, modes: propModes, style, }: NudgeProps): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
declare const Nudge: React.MemoExoticComponent<typeof NudgeImpl>;
|
|
30
33
|
export default Nudge;
|
|
31
34
|
//# sourceMappingURL=Nudge.d.ts.map
|
|
@@ -7,6 +7,7 @@ export { default as BottomNav } from './BottomNav/BottomNav';
|
|
|
7
7
|
export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
|
|
8
8
|
export { default as Button, type ButtonProps } from './Button/Button';
|
|
9
9
|
export { default as Card } from './Card/Card';
|
|
10
|
+
export { default as CardAdvisory, type CardAdvisoryProps } from './CardAdvisory/CardAdvisory';
|
|
10
11
|
export { default as Carousel } from './Carousel/Carousel';
|
|
11
12
|
export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
|
|
12
13
|
export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
|
|
@@ -14,12 +15,16 @@ export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/
|
|
|
14
15
|
export { default as Disclaimer } from './Disclaimer/Disclaimer';
|
|
15
16
|
export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
|
|
16
17
|
export { default as Drawer } from './Drawer/Drawer';
|
|
17
|
-
export { default as CardCTA, type CardCTAProps } from './CardCTA/CardCTA';
|
|
18
|
+
export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA';
|
|
18
19
|
export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
|
|
19
20
|
export { default as FilterBar } from './FilterBar/FilterBar';
|
|
20
21
|
export { default as Form, type FormProps } from './Form/Form';
|
|
21
22
|
export { useFormContext } from './Form/Form';
|
|
22
23
|
export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
|
|
24
|
+
export { default as CircularProgressBar, type CircularProgressBarProps } from './CircularProgressBar/CircularProgressBar';
|
|
25
|
+
export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps } from './CircularProgressBarDoted/CircularProgressBarDoted';
|
|
26
|
+
export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating';
|
|
27
|
+
export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
|
|
23
28
|
export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
|
|
24
29
|
export { default as HStack, type HStackProps } from './HStack/HStack';
|
|
25
30
|
export { default as IconButton } from './IconButton/IconButton';
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Auto-generated from SVG files in src/icons/
|
|
5
5
|
* DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
|
|
6
6
|
*
|
|
7
|
-
* Generated: 2026-04-
|
|
7
|
+
* Generated: 2026-04-30T09:22:52.462Z
|
|
8
8
|
*/
|
|
9
9
|
export declare const iconRegistry: Record<string, {
|
|
10
10
|
path: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jfs-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.71",
|
|
4
4
|
"description": "React Native Jio Finance Components Library",
|
|
5
5
|
"author": "sunshuaiqi@gmail.com",
|
|
6
6
|
"license": "MIT",
|
|
@@ -86,7 +86,6 @@
|
|
|
86
86
|
"ajv": "^8.17.1",
|
|
87
87
|
"ajv-keywords": "^5.1.0",
|
|
88
88
|
"expo": "^54.0.33",
|
|
89
|
-
"expo-blur": "~15.0.8",
|
|
90
89
|
"patch-package": "^8.0.1",
|
|
91
90
|
"react-native-gesture-handler": "^2.29.1",
|
|
92
91
|
"react-native-reanimated": "3.18.1",
|
|
@@ -96,6 +95,7 @@
|
|
|
96
95
|
"react-native-worklets": "0.5.1"
|
|
97
96
|
},
|
|
98
97
|
"peerDependencies": {
|
|
98
|
+
"@react-native-community/blur": ">=4.4.0",
|
|
99
99
|
"react": "*",
|
|
100
100
|
"react-native": "*"
|
|
101
101
|
},
|
|
@@ -106,6 +106,7 @@
|
|
|
106
106
|
"@babel/preset-react": "^7.28.5",
|
|
107
107
|
"@babel/runtime": "^7.28.4",
|
|
108
108
|
"@babel/traverse": "^7.28.5",
|
|
109
|
+
"@react-native-community/blur": "^4.4.1",
|
|
109
110
|
"@react-native-community/cli": "20.0.2",
|
|
110
111
|
"@react-native-community/cli-platform-android": "20.0.2",
|
|
111
112
|
"@react-native-community/cli-platform-ios": "20.0.2",
|