jfs-components 0.0.71 → 0.0.72
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 +49 -0
- package/lib/commonjs/components/CardAdvisory/CardAdvisory.js +2 -2
- package/lib/commonjs/components/CardFinancialCondition/CardFinancialCondition.js +213 -0
- package/lib/commonjs/components/Carousel/Carousel.js +9 -7
- package/lib/commonjs/components/HoldingsCard/HoldingsCard.js +2 -2
- package/lib/commonjs/components/InstitutionBadge/InstitutionBadge.js +132 -0
- package/lib/commonjs/components/Radio/Radio.js +194 -0
- package/lib/commonjs/components/RadioButton/RadioButton.js +21 -188
- package/lib/commonjs/components/index.js +21 -0
- package/lib/commonjs/icons/registry.js +1 -1
- package/lib/module/components/CardAdvisory/CardAdvisory.js +2 -2
- package/lib/module/components/CardFinancialCondition/CardFinancialCondition.js +207 -0
- package/lib/module/components/Carousel/Carousel.js +9 -7
- package/lib/module/components/HoldingsCard/HoldingsCard.js +2 -2
- package/lib/module/components/InstitutionBadge/InstitutionBadge.js +127 -0
- package/lib/module/components/Radio/Radio.js +188 -0
- package/lib/module/components/RadioButton/RadioButton.js +20 -185
- package/lib/module/components/index.js +7 -0
- package/lib/module/icons/registry.js +1 -1
- package/lib/typescript/src/components/CardFinancialCondition/CardFinancialCondition.d.ts +50 -0
- package/lib/typescript/src/components/InstitutionBadge/InstitutionBadge.d.ts +30 -0
- package/lib/typescript/src/components/Radio/Radio.d.ts +30 -0
- package/lib/typescript/src/components/RadioButton/RadioButton.d.ts +20 -28
- package/lib/typescript/src/components/index.d.ts +7 -0
- package/lib/typescript/src/icons/registry.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/CardAdvisory/CardAdvisory.tsx +2 -2
- package/src/components/CardFinancialCondition/CardFinancialCondition.tsx +366 -0
- package/src/components/Carousel/Carousel.tsx +14 -6
- package/src/components/HoldingsCard/HoldingsCard.tsx +2 -2
- package/src/components/InstitutionBadge/InstitutionBadge.tsx +216 -0
- package/src/components/Radio/Radio.tsx +227 -0
- package/src/components/RadioButton/RadioButton.tsx +23 -225
- package/src/components/index.ts +7 -0
- package/src/icons/registry.ts +1 -1
|
@@ -3,192 +3,25 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.RadioButton =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
style,
|
|
28
|
-
testID
|
|
29
|
-
}) {
|
|
30
|
-
// ---- Refs & State ----
|
|
31
|
-
const [hovered, setHovered] = (0, _react.useState)(false);
|
|
32
|
-
const [focused, setFocused] = (0, _react.useState)(false);
|
|
33
|
-
const [pressed, setPressed] = (0, _react.useState)(false);
|
|
34
|
-
|
|
35
|
-
// ---- Dimensions ----
|
|
36
|
-
const widthStr = (0, _figmaVariablesResolver.getVariableByName)('radio/width', modes) || '18';
|
|
37
|
-
const heightStr = (0, _figmaVariablesResolver.getVariableByName)('radio/height', modes) || '18';
|
|
38
|
-
const selectorSizeStr = (0, _figmaVariablesResolver.getVariableByName)('radio/selector/size', modes) || '10';
|
|
39
|
-
const width = parseFloat(widthStr?.toString() || '18');
|
|
40
|
-
const height = parseFloat(heightStr?.toString() || '18');
|
|
41
|
-
const selectorSize = parseFloat(selectorSizeStr?.toString() || '10');
|
|
42
|
-
|
|
43
|
-
// ---- State Logic ----
|
|
44
|
-
// Priority: Disabled -> Focused -> Hover/Pressed -> Idle
|
|
45
|
-
// Note: Design treats Active (Pressed) similar to Selected for some styles,
|
|
46
|
-
// but usually in Radio Buttons, Pressed is a transient state.
|
|
47
|
-
// We will map:
|
|
48
|
-
// - Disabled -> 'disabled'
|
|
49
|
-
// - Focused -> 'focus'
|
|
50
|
-
// - Hovered -> 'hover'
|
|
51
|
-
// - Idle -> 'idle'
|
|
52
|
-
|
|
53
|
-
// We handle `selected` as a separate dimension derived from state.
|
|
54
|
-
|
|
55
|
-
let visualState = 'idle';
|
|
56
|
-
if (disabled) {
|
|
57
|
-
visualState = 'disabled';
|
|
58
|
-
} else if (focused) {
|
|
59
|
-
visualState = 'focus';
|
|
60
|
-
} else if (hovered || pressed) {
|
|
61
|
-
visualState = 'hover';
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
// Construct token paths based on state + selected
|
|
65
|
-
let prefix = `radio/${visualState}`;
|
|
66
|
-
if (visualState === 'idle' && selected) {
|
|
67
|
-
prefix = `radio/selected`;
|
|
68
|
-
} else if (selected) {
|
|
69
|
-
prefix = `radio/${visualState}Selected`;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
// ---- Colors & Border ----
|
|
73
|
-
|
|
74
|
-
const resolveColor = (path, fallback) => {
|
|
75
|
-
return (0, _figmaVariablesResolver.getVariableByName)(path, modes) || fallback;
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
// Background Color
|
|
79
|
-
let bgColorVar = `${prefix}/background/color`;
|
|
80
|
-
// Fix for disabledSelected weirdness if needed
|
|
81
|
-
if (visualState === 'disabled' && selected) {
|
|
82
|
-
// Check specific path from dump: `radio/disabledSelected/background`
|
|
83
|
-
if (!(0, _figmaVariablesResolver.getVariableByName)(`${prefix}/background/color`, modes)) {
|
|
84
|
-
bgColorVar = `${prefix}/background`;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
// Border Color
|
|
89
|
-
let borderColorVar = `${prefix}/border/color`;
|
|
90
|
-
|
|
91
|
-
// Border Width
|
|
92
|
-
let borderWidthVar = `${prefix}/border/size`;
|
|
93
|
-
// Fix for huge path: `radio/disabled/radio/disabled/border/size`
|
|
94
|
-
if (visualState === 'disabled' && !selected) {
|
|
95
|
-
if ((0, _figmaVariablesResolver.getVariableByName)('radio/disabled/radio/disabled/border/size', modes)) {
|
|
96
|
-
borderWidthVar = 'radio/disabled/radio/disabled/border/size';
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// Selector Color
|
|
101
|
-
let selectorBgVar = `${prefix}/selector/background/color`;
|
|
102
|
-
if (!selected) {
|
|
103
|
-
selectorBgVar = 'transparent';
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
// Shadows (Glow)
|
|
107
|
-
let shadowSizeVar = `${prefix}/boxShadow/size`;
|
|
108
|
-
let shadowColorVar = `${prefix}/shadow/color`;
|
|
109
|
-
|
|
110
|
-
// Resolve Values
|
|
111
|
-
const backgroundColor = resolveColor(bgColorVar, 'transparent');
|
|
112
|
-
const borderColor = resolveColor(borderColorVar, 'transparent');
|
|
113
|
-
const borderWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)(borderWidthVar, modes)?.toString() || '1');
|
|
114
|
-
const selectorColor = resolveColor(selectorBgVar, 'transparent');
|
|
115
|
-
const shadowSize = parseFloat((0, _figmaVariablesResolver.getVariableByName)(shadowSizeVar, modes)?.toString() || '0');
|
|
116
|
-
const shadowColor = resolveColor(shadowColorVar, 'transparent');
|
|
117
|
-
|
|
118
|
-
// Styles
|
|
119
|
-
const containerStyle = {
|
|
120
|
-
width,
|
|
121
|
-
height,
|
|
122
|
-
borderRadius: width / 2,
|
|
123
|
-
// 9999px -> circle
|
|
124
|
-
borderWidth,
|
|
125
|
-
borderColor,
|
|
126
|
-
backgroundColor,
|
|
127
|
-
justifyContent: 'center',
|
|
128
|
-
alignItems: 'center',
|
|
129
|
-
// Web shadow (ring)
|
|
130
|
-
...(_reactNative.Platform.OS === 'web' && shadowSize > 0 ? {
|
|
131
|
-
boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`
|
|
132
|
-
} : {})
|
|
133
|
-
};
|
|
134
|
-
const selectorStyle = {
|
|
135
|
-
width: selectorSize,
|
|
136
|
-
height: selectorSize,
|
|
137
|
-
borderRadius: selectorSize / 2,
|
|
138
|
-
backgroundColor: selectorColor
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
// Dummy block for token extraction (static analysis)
|
|
142
|
-
if (false) {
|
|
143
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/idle/background/color');
|
|
144
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/idle/border/color');
|
|
145
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/selector/size');
|
|
146
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/width');
|
|
147
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/height');
|
|
148
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/background/color');
|
|
149
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/hover/background/color');
|
|
150
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/hover/border/color');
|
|
151
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/hover/boxShadow/size');
|
|
152
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/hover/shadow/color');
|
|
153
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/selected/background/color');
|
|
154
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/selected/border/color');
|
|
155
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/selected/selector/background/color');
|
|
156
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/background/color');
|
|
157
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/border/color');
|
|
158
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/boxShadow/size');
|
|
159
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/shadow/color');
|
|
160
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/hoverSelected/selector/background/color');
|
|
161
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/focus/background/color');
|
|
162
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/focus/border/color');
|
|
163
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/focus/border/size');
|
|
164
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/focus/boxShadow/size');
|
|
165
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/focus/shadow/color');
|
|
166
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/background/color');
|
|
167
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/selector/background/color');
|
|
168
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/focusSelected/border/size');
|
|
169
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/disabled/radio/disabled/border/size');
|
|
170
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/disabled/background/color');
|
|
171
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/disabled/border/color');
|
|
172
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/disabledSelected/selector/background/color');
|
|
173
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/disabledSelected/background');
|
|
174
|
-
(0, _figmaVariablesResolver.getVariableByName)('radio/disabledSelected/border/color');
|
|
175
|
-
}
|
|
176
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
177
|
-
testID: testID,
|
|
178
|
-
disabled: disabled,
|
|
179
|
-
onPress: onPress,
|
|
180
|
-
onHoverIn: () => setHovered(true),
|
|
181
|
-
onHoverOut: () => setHovered(false),
|
|
182
|
-
onFocus: () => setFocused(true),
|
|
183
|
-
onBlur: () => setFocused(false),
|
|
184
|
-
onPressIn: () => setPressed(true),
|
|
185
|
-
onPressOut: () => setPressed(false),
|
|
186
|
-
style: ({
|
|
187
|
-
pressed: isPressed
|
|
188
|
-
}) => [containerStyle, style],
|
|
189
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
190
|
-
style: selectorStyle
|
|
191
|
-
})
|
|
192
|
-
});
|
|
193
|
-
}
|
|
6
|
+
exports.default = exports.RadioButton = void 0;
|
|
7
|
+
var _Radio = require("../Radio/Radio");
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated `RadioButton` has been renamed to `Radio`.
|
|
10
|
+
*
|
|
11
|
+
* This file is kept as a backward-compatibility shim for teams that may be
|
|
12
|
+
* importing `RadioButton` directly from this deep path:
|
|
13
|
+
*
|
|
14
|
+
* import RadioButton from 'jfs-components/src/components/RadioButton/RadioButton'
|
|
15
|
+
* import { RadioButton, RadioButtonProps } from '...'
|
|
16
|
+
*
|
|
17
|
+
* The recommended public import is now:
|
|
18
|
+
*
|
|
19
|
+
* import { Radio, type RadioProps } from 'jfs-components'
|
|
20
|
+
*
|
|
21
|
+
* Going forward, this component is called `Radio`. This shim only re-exports
|
|
22
|
+
* the new `Radio` component under the old `RadioButton` names; please migrate
|
|
23
|
+
* existing usages to `Radio` at your earliest convenience.
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
const RadioButton = exports.RadioButton = _Radio.Radio;
|
|
194
27
|
var _default = exports.default = RadioButton;
|
|
@@ -105,6 +105,12 @@ Object.defineProperty(exports, "CardFeedback", {
|
|
|
105
105
|
return _CardFeedback.default;
|
|
106
106
|
}
|
|
107
107
|
});
|
|
108
|
+
Object.defineProperty(exports, "CardFinancialCondition", {
|
|
109
|
+
enumerable: true,
|
|
110
|
+
get: function () {
|
|
111
|
+
return _CardFinancialCondition.default;
|
|
112
|
+
}
|
|
113
|
+
});
|
|
108
114
|
Object.defineProperty(exports, "CardProviderInfo", {
|
|
109
115
|
enumerable: true,
|
|
110
116
|
get: function () {
|
|
@@ -243,6 +249,12 @@ Object.defineProperty(exports, "InputSearch", {
|
|
|
243
249
|
return _InputSearch.default;
|
|
244
250
|
}
|
|
245
251
|
});
|
|
252
|
+
Object.defineProperty(exports, "InstitutionBadge", {
|
|
253
|
+
enumerable: true,
|
|
254
|
+
get: function () {
|
|
255
|
+
return _InstitutionBadge.default;
|
|
256
|
+
}
|
|
257
|
+
});
|
|
246
258
|
Object.defineProperty(exports, "LazyList", {
|
|
247
259
|
enumerable: true,
|
|
248
260
|
get: function () {
|
|
@@ -345,6 +357,12 @@ Object.defineProperty(exports, "ProgressBadge", {
|
|
|
345
357
|
return _ProgressBadge.default;
|
|
346
358
|
}
|
|
347
359
|
});
|
|
360
|
+
Object.defineProperty(exports, "Radio", {
|
|
361
|
+
enumerable: true,
|
|
362
|
+
get: function () {
|
|
363
|
+
return _Radio.default;
|
|
364
|
+
}
|
|
365
|
+
});
|
|
348
366
|
Object.defineProperty(exports, "RadioButton", {
|
|
349
367
|
enumerable: true,
|
|
350
368
|
get: function () {
|
|
@@ -556,6 +574,7 @@ var _CardAdvisory = _interopRequireDefault(require("./CardAdvisory/CardAdvisory"
|
|
|
556
574
|
var _Carousel = _interopRequireDefault(require("./Carousel/Carousel"));
|
|
557
575
|
var _Checkbox = _interopRequireDefault(require("./Checkbox/Checkbox"));
|
|
558
576
|
var _CardFeedback = _interopRequireDefault(require("./CardFeedback/CardFeedback"));
|
|
577
|
+
var _CardFinancialCondition = _interopRequireDefault(require("./CardFinancialCondition/CardFinancialCondition"));
|
|
559
578
|
var _Disclaimer = _interopRequireDefault(require("./Disclaimer/Disclaimer"));
|
|
560
579
|
var _Divider = _interopRequireDefault(require("./Divider/Divider"));
|
|
561
580
|
var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
|
|
@@ -608,8 +627,10 @@ var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup/ButtonGroup"));
|
|
|
608
627
|
var _CardProviderInfo = _interopRequireDefault(require("./CardProviderInfo/CardProviderInfo"));
|
|
609
628
|
var _ChipSelect = _interopRequireDefault(require("./ChipSelect/ChipSelect"));
|
|
610
629
|
var _InputSearch = _interopRequireDefault(require("./InputSearch/InputSearch"));
|
|
630
|
+
var _InstitutionBadge = _interopRequireDefault(require("./InstitutionBadge/InstitutionBadge"));
|
|
611
631
|
var _SupportText = _interopRequireDefault(require("./SupportText/SupportText"));
|
|
612
632
|
var _SupportTextIcon = _interopRequireDefault(require("./SupportText/SupportTextIcon"));
|
|
633
|
+
var _Radio = _interopRequireDefault(require("./Radio/Radio"));
|
|
613
634
|
var _RadioButton = _interopRequireDefault(require("./RadioButton/RadioButton"));
|
|
614
635
|
var _RechargeCard = _interopRequireDefault(require("./RechargeCard/RechargeCard"));
|
|
615
636
|
var _Tabs = _interopRequireDefault(require("./Tabs/Tabs"));
|