jfs-components 0.1.12 → 0.1.17

package/src/components/TransactionDetails/TransactionDetails.tsx

@@ -52,21 +52,21 @@ function Item({
   const gap = getVariableByName('detailItem/gap', modes) ?? 4
 
   // Label typography tokens
-  const labelColor = getVariableByName('detailItem/label/color', modes) || '#0c0d10'
-  const labelFontSize = getVariableByName('detailItem/label/fontSize', modes) || 14
-  const labelFontFamily = getVariableByName('detailItem/label/fontFamily', modes) || 'System'
-  const labelLineHeight = getVariableByName('detailItem/label/lineHeight', modes) || 17
-  const labelFontWeightRaw = getVariableByName('detailItem/label/fontWeight', modes) || 500
+  const labelColor = getVariableByName('detailItem/label/color', modes)
+  const labelFontSize = getVariableByName('detailItem/label/fontSize', modes)
+  const labelFontFamily = getVariableByName('detailItem/label/fontFamily', modes)
+  const labelLineHeight = getVariableByName('detailItem/label/lineHeight', modes)
+  const labelFontWeightRaw = getVariableByName('detailItem/label/fontWeight', modes)
   const labelFontWeight = typeof labelFontWeightRaw === 'number'
     ? labelFontWeightRaw.toString()
     : labelFontWeightRaw
 
   // Value typography tokens
-  const valueColor = getVariableByName('detailItem/value/color', modes) || '#24262b'
-  const valueFontSize = getVariableByName('detailItem/value/fontSize', modes) || 14
-  const valueFontFamily = getVariableByName('detailItem/value/fontFamily', modes) || 'System'
-  const valueLineHeight = getVariableByName('detailItem/value/lineHeight', modes) || 17
-  const valueFontWeightRaw = getVariableByName('detailItem/value/fontWeight', modes) || 'Medium'
+  const valueColor = getVariableByName('detailItem/value/color', modes)
+  const valueFontSize = getVariableByName('detailItem/value/fontSize', modes)
+  const valueFontFamily = getVariableByName('detailItem/value/fontFamily', modes)
+  const valueLineHeight = getVariableByName('detailItem/value/lineHeight', modes)
+  const valueFontWeightRaw = getVariableByName('detailItem/value/fontWeight', modes)
   const valueFontWeight = typeof valueFontWeightRaw === 'number'
     ? valueFontWeightRaw.toString()
     : valueFontWeightRaw === 'Medium' ? '500' : valueFontWeightRaw

package/src/components/TransactionStatus/TransactionStatus.tsx

@@ -19,7 +19,7 @@ const StatusIcon = ({
     height = 15,
     color,
 }: StatusIconProps) => {
-    const resolvedColor = color || getVariableByName('transactionStatus/icon/color', modes) || '#F06D0F'
+    const resolvedColor = color || getVariableByName('transactionStatus/icon/color', modes)
 
     return (
         <Svg
@@ -66,16 +66,16 @@ export default function TransactionStatus({
     style,
     disableTruncation,
 }: TransactionStatusProps) {
-    const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes)) || 4
+    const gap = Number(getVariableByName('transactionBubble/statusWrap/gap', modes))
     // Using 'transactionStatus' tokens for text
-    const textColor = getVariableByName('transactionStatus/color', modes) || '#191b1e'
-    const fontSize = Number(getVariableByName('transactionStatus/fontSize', modes)) || 12
-    const lineHeight = Number(getVariableByName('transactionStatus/lineHeight', modes)) || 16
-    const fontFamily = getVariableByName('transactionStatus/fontFamily', modes) || 'System'
-    const fontWeight = getVariableByName('transactionStatus/fontWeight2', modes) || '500'
+    const textColor = getVariableByName('transactionStatus/color', modes)
+    const fontSize = Number(getVariableByName('transactionStatus/fontSize', modes))
+    const lineHeight = Number(getVariableByName('transactionStatus/lineHeight', modes))
+    const fontFamily = getVariableByName('transactionStatus/fontFamily', modes)
+    const fontWeight = getVariableByName('transactionStatus/fontWeight2', modes)
 
-    const iconColor = getVariableByName('transactionStatus/icon/color', modes) || '#f06d0f'
-    const iconSize = Number(getVariableByName('transactionStatus/iconSize', modes)) || 18
+    const iconColor = getVariableByName('transactionStatus/icon/color', modes)
+    const iconSize = Number(getVariableByName('transactionStatus/iconSize', modes))
 
     const containerStyle: ViewStyle = {
         flexDirection: 'row',

package/src/components/UpiHandle/UpiHandle.tsx

@@ -70,26 +70,26 @@ interface UpiHandleTokens {
 }
 
 function resolveUpiHandleTokens(modes: Modes): UpiHandleTokens {
-  const backgroundColor = (getVariableByName('upiHandle/background', modes) || '#f5f5f5') as string
-  const radius = (getVariableByName('upiHandle/radius', modes) || 99999) as number
-  const paddingLeft = (getVariableByName('upiHandle/padding/left', modes) || 4) as number
-  const paddingRight = (getVariableByName('upiHandle/padding/right', modes) || 14) as number
-  const paddingVertical = (getVariableByName('upiHandle/padding/vertical', modes) || 3) as number
-  const gap = (getVariableByName('upiHandle/gap', modes) || 6) as number
+  const backgroundColor = (getVariableByName('upiHandle/background', modes)) as string
+  const radius = (getVariableByName('upiHandle/radius', modes)) as number
+  const paddingLeft = (getVariableByName('upiHandle/padding/left', modes)) as number
+  const paddingRight = (getVariableByName('upiHandle/padding/right', modes)) as number
+  const paddingVertical = (getVariableByName('upiHandle/padding/vertical', modes)) as number
+  const gap = (getVariableByName('upiHandle/gap', modes)) as number
 
-  const avatarSize = (getVariableByName('upiHandle/image/size', modes) || 23) as number
-  const avatarRadius = (getVariableByName('upiHandle/image/radius', modes) || 99999) as number
+  const avatarSize = (getVariableByName('upiHandle/image/size', modes)) as number
+  const avatarRadius = (getVariableByName('upiHandle/image/radius', modes)) as number
 
-  const labelColor = (getVariableByName('upiHandle/label/color', modes) || '#0d0d0f') as string
-  const labelFontSize = (getVariableByName('upiHandle/label/fontSize', modes) || 12) as number
-  const labelLineHeight = (getVariableByName('upiHandle/label/lineHeight', modes) || 23) as number
-  const labelFontFamily = (getVariableByName('upiHandle/label/fontFamily', modes) || 'System') as string
-  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes) || 500
+  const labelColor = (getVariableByName('upiHandle/label/color', modes)) as string
+  const labelFontSize = (getVariableByName('upiHandle/label/fontSize', modes)) as number
+  const labelLineHeight = (getVariableByName('upiHandle/label/lineHeight', modes)) as number
+  const labelFontFamily = (getVariableByName('upiHandle/label/fontFamily', modes)) as string
+  const labelFontWeightRaw = getVariableByName('upiHandle/label/fontWeight', modes)
   const labelFontWeight =
     typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw
 
-  const iconColor = (getVariableByName('upiHandle/icon/color', modes) || '#0d0d0f') as string
-  const iconSize = (getVariableByName('upiHandle/icon/size', modes) || 12) as number
+  const iconColor = (getVariableByName('upiHandle/icon/color', modes)) as string
+  const iconSize = (getVariableByName('upiHandle/icon/size', modes)) as number
 
   return {
     containerStyle: {

package/src/components/index.ts

@@ -15,6 +15,7 @@ export { default as CardAdvisory, type CardAdvisoryProps } from './CardAdvisory/
 export { default as CardBankAccount, type CardBankAccountProps, type CardBankAccountItem } from './CardBankAccount/CardBankAccount';
 export { default as Carousel } from './Carousel/Carousel';
 export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
+export { default as CarouselCardAccounts, type CarouselCardAccountsProps } from './CarouselCardAccounts/CarouselCardAccounts';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
 export { default as CheckboxItem, type CheckboxItemProps } from './CheckboxItem/CheckboxItem';
 export { default as CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup/CheckboxGroup';
@@ -69,6 +70,7 @@ export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Nump
 export { default as Overlay, type OverlayProps } from './Overlay/Overlay';
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
+export { default as ScrollArea, type ScrollAreaProps, type ScrollDirection } from './ScrollArea/ScrollArea';
 export { default as Section } from './Section/Section';
 export { default as Slider, type SliderProps, type SliderHandle } from './Slider/Slider';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';