jfs-components 0.0.56 → 0.0.57

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.
Files changed (9) hide show
  1. package/lib/commonjs/components/TransactionBubble/TransactionBubble.js +24 -20
  2. package/lib/commonjs/icons/registry.js +1 -1
  3. package/lib/module/components/TransactionBubble/TransactionBubble.js +24 -20
  4. package/lib/module/icons/registry.js +1 -1
  5. package/lib/typescript/src/components/TransactionBubble/TransactionBubble.d.ts +9 -6
  6. package/lib/typescript/src/icons/registry.d.ts +1 -1
  7. package/package.json +1 -1
  8. package/src/components/TransactionBubble/TransactionBubble.tsx +17 -14
  9. package/src/icons/registry.ts +1 -1
package/lib/typescript/src/components/TransactionBubble/TransactionBubble.d.ts CHANGED
@@ -20,16 +20,19 @@ export type TransactionBubbleProps = {
20
20
  /**
21
21
  * TransactionBubble — Figma node 1517:1155.
22
22
  *
23
- * Layout (single horizontal row inside a rounded bordered pill):
23
+ * Layout (vertical stack inside a rounded bordered pill):
24
24
  *
25
25
  * ┌──────────────────────────────────────────────┐
26
- * │ Description Status · Date │
27
- * │ ₹56 › │
26
+ * │ Description │
27
+ * │ ₹56 │
28
+ * │ [slot / children content] │
29
+ * │ ⚠ Expired · 20 Mar 2025 › │
28
30
  * └──────────────────────────────────────────────┘
29
31
  *
30
- * Left column: description text + MoneyValue, stacked vertically with `transactionBubble/gap`.
31
- * Right column: TransactionStatus + NavArrow, stacked vertically with `transactionBubble/statusWrap/gap`,
32
- * right-aligned.
32
+ * moneyValueWrap: description + MoneyValue, vertical with `transactionBubble/wrap/gap`.
33
+ * slotWrap: children (optional), rendered between moneyValueWrap and statusWrap.
34
+ * statusWrap: TransactionStatus + NavArrow, horizontal row with `transactionBubble/statusWrap/gap`.
35
+ * Container gap between sections: `transactionBubble/gap`.
33
36
  */
34
37
  declare function TransactionBubble({ description, value, currency, status, date, statusSlot, children, modes, onPress, style, accessibilityLabel, accessibilityHint, webAccessibilityProps, ...rest }: TransactionBubbleProps): import("react/jsx-runtime").JSX.Element;
35
38
  export default TransactionBubble;
package/lib/typescript/src/icons/registry.d.ts CHANGED
@@ -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-14T12:07:25.514Z
7
+ * Generated: 2026-04-14T14:14:19.990Z
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.56",
3
+ "version": "0.0.57",
4
4
  "description": "React Native Jio Finance Components Library",
5
5
  "author": "sunshuaiqi@gmail.com",
6
6
  "license": "MIT",
package/src/components/TransactionBubble/TransactionBubble.tsx CHANGED
@@ -27,16 +27,19 @@ export type TransactionBubbleProps = {
27
27
  /**
28
28
  * TransactionBubble — Figma node 1517:1155.
29
29
  *
30
- * Layout (single horizontal row inside a rounded bordered pill):
30
+ * Layout (vertical stack inside a rounded bordered pill):
31
31
  *
32
32
  * ┌──────────────────────────────────────────────┐
33
- * │ Description Status · Date │
34
- * │ ₹56 › │
33
+ * │ Description │
34
+ * │ ₹56 │
35
+ * │ [slot / children content] │
36
+ * │ ⚠ Expired · 20 Mar 2025 › │
35
37
  * └──────────────────────────────────────────────┘
36
38
  *
37
- * Left column: description text + MoneyValue, stacked vertically with `transactionBubble/gap`.
38
- * Right column: TransactionStatus + NavArrow, stacked vertically with `transactionBubble/statusWrap/gap`,
39
- * right-aligned.
39
+ * moneyValueWrap: description + MoneyValue, vertical with `transactionBubble/wrap/gap`.
40
+ * slotWrap: children (optional), rendered between moneyValueWrap and statusWrap.
41
+ * statusWrap: TransactionStatus + NavArrow, horizontal row with `transactionBubble/statusWrap/gap`.
42
+ * Container gap between sections: `transactionBubble/gap`.
40
43
  */
41
44
  function TransactionBubble({
42
45
  description = 'Payment to Uber India',
@@ -65,7 +68,7 @@ function TransactionBubble({
65
68
  const backgroundColor = getVariableByName('transactionBubble/background', resolvedModes) || '#ffffff'
66
69
  const borderColor = getVariableByName('transactionBubble/border/color', resolvedModes) || '#e5e5e5'
67
70
  const bubbleGap = Number(getVariableByName('transactionBubble/gap', resolvedModes)) || 8
68
- const wrapGap = Number(getVariableByName('transactionBubble/wrap/gap', resolvedModes)) || 8
71
+ const moneyValueWrapGap = Number(getVariableByName('transactionBubble/wrap/gap', resolvedModes)) || 8
69
72
 
70
73
  const descriptionColor = getVariableByName('transactionBubble/description/color', resolvedModes) || '#24262b'
71
74
  const descriptionFontSize = Number(getVariableByName('transactionBubble/description/fontSize', resolvedModes)) || 14
@@ -73,6 +76,7 @@ function TransactionBubble({
73
76
  const descriptionFontFamily = getVariableByName('transactionBubble/description/fontFamily', resolvedModes) || 'JioType Var'
74
77
 
75
78
  const statusWrapGap = Number(getVariableByName('transactionBubble/statusWrap/gap', resolvedModes)) || 4
79
+ const statusWrapHeight = Number(getVariableByName('transactionBubble/statusWrap/height', resolvedModes)) || 18
76
80
 
77
81
  const containerStyle: ViewStyle = {
78
82
  padding,
@@ -107,20 +111,21 @@ function TransactionBubble({
107
111
  webAccessibilityProps,
108
112
  })
109
113
 
110
- const rightColumn = processedStatusSlot || (
111
- <View style={{ alignItems: 'flex-end', justifyContent: 'flex-end', gap: statusWrapGap }}>
114
+ const statusRow = processedStatusSlot || (
115
+ <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: statusWrapGap, height: statusWrapHeight }}>
112
116
  <TransactionStatus status={status} date={date} modes={resolvedModes} />
113
117
  <NavArrow direction="Forward" modes={resolvedModes} />
114
118
  </View>
115
119
  )
116
120
 
117
121
  const mainContent = (
118
- <View style={{ flexDirection: 'row', gap: wrapGap }}>
119
- <View style={{ flex: 1, gap: bubbleGap }}>
122
+ <View style={{ gap: bubbleGap }}>
123
+ <View style={{ gap: moneyValueWrapGap }}>
120
124
  <Text style={descriptionStyle} numberOfLines={1}>{description}</Text>
121
125
  <MoneyValue value={value} currency={currency} modes={resolvedModes} />
122
126
  </View>
123
- {rightColumn}
127
+ {processedChildren}
128
+ {statusRow}
124
129
  </View>
125
130
  )
126
131
 
@@ -136,7 +141,6 @@ function TransactionBubble({
136
141
  {...rest}
137
142
  >
138
143
  {mainContent}
139
- {processedChildren}
140
144
  </Pressable>
141
145
  )
142
146
  }
@@ -144,7 +148,6 @@ function TransactionBubble({
144
148
  return (
145
149
  <View style={[containerStyle, style]} accessibilityLabel={defaultAccessibilityLabel} accessibilityHint={accessibilityHint}>
146
150
  {mainContent}
147
- {processedChildren}
148
151
  </View>
149
152
  )
150
153
  }
package/src/icons/registry.ts CHANGED
@@ -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-14T12:07:25.514Z
7
+ * Generated: 2026-04-14T14:14:19.990Z
8
8
  */
9
9
 
10
10
  // Icon name to SVG data mapping