react-bank-logo 0.1.1 → 2.0.0

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/README.md CHANGED
@@ -1,14 +1,14 @@
1
1
  # react-bank-logo
2
2
 
3
- A beautiful, reusable, and optimized React component for displaying Indonesian bank & e-wallet logos. Perfect for wedding invitations, donation pages, or payment gateways.
3
+ A beautiful, reusable, and optimized React component for displaying bank & e-wallet logos. Perfect for wedding invitations, donation pages, or payment gateways.
4
4
 
5
5
  [![npm version](https://img.shields.io/npm/v/react-bank-logo.svg)](https://www.npmjs.com/package/react-bank-logo)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
7
 
8
8
  ## Features
9
9
 
10
- - **Comprehensive Registry**: Supports major Indonesian banks and e-wallets.
11
- - **SVG & PNG Support**: High-quality vectors and optimized raster fallbacks.
10
+ - **SVG First**: High-quality vector logos provided by default.
11
+ - **Custom Logo Support**: Easily use your own logos via the `src` prop (supports SVG, PNG, JPG).
12
12
  - **Lazy Loading**: Built-in lazy loading for better performance.
13
13
  - **TypeScript Ready**: Full type safety for bank names and props.
14
14
  - **Customizable**: Easy to style with `className` and `style` props.
@@ -31,14 +31,14 @@ import { BankLogo } from "react-bank-logo";
31
31
  function MyComponent() {
32
32
  return (
33
33
  <div>
34
- {/* Basic usage using bank name */}
34
+ {/* Basic usage using bank name (renders SVG) */}
35
35
  <BankLogo name="bca" width={100} />
36
36
 
37
37
  {/* Using E-Wallet name */}
38
38
  <BankLogo name="gopay" width={120} />
39
39
 
40
- {/* Custom source fallback */}
41
- <BankLogo name="mandiri" src="/my-custom-mandiri-logo.png" />
40
+ {/* Custom source (supports PNG/JPG) */}
41
+ <BankLogo src="/my-custom-logo.png" />
42
42
  </div>
43
43
  );
44
44
  }
@@ -48,22 +48,21 @@ function MyComponent() {
48
48
 
49
49
  ### `BankLogo` Props
50
50
 
51
- | Prop | Type | Default | Description |
52
- | :---------- | :------------------ | :----------------- | :---------------------------------------------------------- |
53
- | `name` | `BankName` | - | The key of the bank (e.g., 'bca', 'mandiri', 'gopay'). |
54
- | `src` | `string` | - | Custom image source. Overrides the `name` prop if provided. |
55
- | `width` | `number` | `120` | Width of the logo in pixels. |
56
- | `height` | `number` | `auto` | Height of the logo in pixels. |
57
- | `format` | `'svg' \| 'png'` | `registry default` | Force a specific image format. |
58
- | `className` | `string` | `""` | Additional CSS classes for the container/image. |
59
- | `style` | `CSSProperties` | `{}` | Inline styles for the image. |
60
- | `alt` | `string` | `Bank Name` | Alt text for the image. |
61
- | `fallback` | `ReactNode` | `Bank Name Text` | Content to show if the logo fails to load. |
62
- | `loading` | `'lazy' \| 'eager'` | `'lazy'` | Image loading strategy. |
51
+ | Prop | Type | Default | Description |
52
+ | :---------- | :------------------ | :--------------- | :---------------------------------------------------------- |
53
+ | `name` | `BankName` | - | The key of the bank (e.g., 'bca', 'mandiri', 'gopay'). |
54
+ | `src` | `string` | - | Custom image source. Overrides the `name` prop if provided. |
55
+ | `width` | `number` | `120` | Width of the logo in pixels. |
56
+ | `height` | `number` | `auto` | Height of the logo in pixels. |
57
+ | `className` | `string` | `""` | Additional CSS classes for the container/image. |
58
+ | `style` | `CSSProperties` | `{}` | Inline styles for the image. |
59
+ | `alt` | `string` | `Bank Name` | Alt text for the image. |
60
+ | `fallback` | `ReactNode` | `Bank Name Text` | Content to show if the logo fails to load. |
61
+ | `loading` | `'lazy' \| 'eager'` | `'lazy'` | Image loading strategy. |
63
62
 
64
63
  ## Supported Banks & E-Wallets
65
64
 
66
- Below are some of the supported keys for the `name` prop:
65
+ Below are some of the supported keys for the `name` prop (including regional and international banks):
67
66
 
68
67
  - **Banks**: `bca`, `mandiri`, `bni`, `bri`, `cimb`, `permata`, `danamon`, `maybank`, `ocbc`, `hsbc`, `citibank`, `standard-chartered`, `panin`, `btn`, `mega`, `mega-syariah`, `seabank`.
69
68
  - **E-Wallets**: `gopay`, `ovo`, `dana`, `shopeepay`, `linkaja`.
package/dist/index.d.mts CHANGED
@@ -1,13 +1,10 @@
1
1
  import React$1 from 'react';
2
2
 
3
3
  type BankName = "bca" | "mandiri" | "bni" | "bri" | "cimb" | "permata" | "danamon" | "maybank" | "ocbc" | "hsbc" | "citibank" | "standard-chartered" | "panin" | "btn" | "mega" | "mega-syariah" | "seabank" | "gopay" | "ovo" | "dana" | "shopeepay" | "linkaja";
4
- type LogoFormat = "svg" | "png";
5
4
  interface BankLogoData {
6
5
  name: BankName;
7
6
  displayName: string;
8
7
  svg?: string;
9
- png?: string;
10
- defaultFormat: LogoFormat;
11
8
  }
12
9
  interface BankLogoProps {
13
10
  /**
@@ -15,7 +12,7 @@ interface BankLogoProps {
15
12
  */
16
13
  name?: BankName;
17
14
  /**
18
- * Custom logo source (overrides name)
15
+ * Custom logo source (overrides name). Supports SVG, PNG, JPG.
19
16
  */
20
17
  src?: string;
21
18
  /**
@@ -26,10 +23,6 @@ interface BankLogoProps {
26
23
  * Height in pixels (auto-calculated if not provided)
27
24
  */
28
25
  height?: number;
29
- /**
30
- * Preferred format (defaults to registry default)
31
- */
32
- format?: LogoFormat;
33
26
  /**
34
27
  * Additional CSS class
35
28
  */
@@ -81,12 +74,12 @@ declare function getBankLogo(name: BankName): BankLogoData | undefined;
81
74
  declare function getAvailableBanks(): BankName[];
82
75
 
83
76
  /**
84
- * Resolve the correct logo path based on bank name and format
77
+ * Resolve the correct logo path based on bank name
85
78
  */
86
- declare function resolveLogoPath(name: BankName, format?: LogoFormat): string | undefined;
79
+ declare function resolveLogoPath(name: BankName): string | undefined;
87
80
  /**
88
81
  * Get display name for a bank
89
82
  */
90
83
  declare function getBankDisplayName(name: BankName): string;
91
84
 
92
- export { BANK_LOGO_REGISTRY, BankLogo, type BankLogoData, type BankLogoProps, type BankName, type LogoFormat, getAvailableBanks, getBankDisplayName, getBankLogo, resolveLogoPath };
85
+ export { BANK_LOGO_REGISTRY, BankLogo, type BankLogoData, type BankLogoProps, type BankName, getAvailableBanks, getBankDisplayName, getBankLogo, resolveLogoPath };
package/dist/index.d.ts CHANGED
@@ -1,13 +1,10 @@
1
1
  import React$1 from 'react';
2
2
 
3
3
  type BankName = "bca" | "mandiri" | "bni" | "bri" | "cimb" | "permata" | "danamon" | "maybank" | "ocbc" | "hsbc" | "citibank" | "standard-chartered" | "panin" | "btn" | "mega" | "mega-syariah" | "seabank" | "gopay" | "ovo" | "dana" | "shopeepay" | "linkaja";
4
- type LogoFormat = "svg" | "png";
5
4
  interface BankLogoData {
6
5
  name: BankName;
7
6
  displayName: string;
8
7
  svg?: string;
9
- png?: string;
10
- defaultFormat: LogoFormat;
11
8
  }
12
9
  interface BankLogoProps {
13
10
  /**
@@ -15,7 +12,7 @@ interface BankLogoProps {
15
12
  */
16
13
  name?: BankName;
17
14
  /**
18
- * Custom logo source (overrides name)
15
+ * Custom logo source (overrides name). Supports SVG, PNG, JPG.
19
16
  */
20
17
  src?: string;
21
18
  /**
@@ -26,10 +23,6 @@ interface BankLogoProps {
26
23
  * Height in pixels (auto-calculated if not provided)
27
24
  */
28
25
  height?: number;
29
- /**
30
- * Preferred format (defaults to registry default)
31
- */
32
- format?: LogoFormat;
33
26
  /**
34
27
  * Additional CSS class
35
28
  */
@@ -81,12 +74,12 @@ declare function getBankLogo(name: BankName): BankLogoData | undefined;
81
74
  declare function getAvailableBanks(): BankName[];
82
75
 
83
76
  /**
84
- * Resolve the correct logo path based on bank name and format
77
+ * Resolve the correct logo path based on bank name
85
78
  */
86
- declare function resolveLogoPath(name: BankName, format?: LogoFormat): string | undefined;
79
+ declare function resolveLogoPath(name: BankName): string | undefined;
87
80
  /**
88
81
  * Get display name for a bank
89
82
  */
90
83
  declare function getBankDisplayName(name: BankName): string;
91
84
 
92
- export { BANK_LOGO_REGISTRY, BankLogo, type BankLogoData, type BankLogoProps, type BankName, type LogoFormat, getAvailableBanks, getBankDisplayName, getBankLogo, resolveLogoPath };
85
+ export { BANK_LOGO_REGISTRY, BankLogo, type BankLogoData, type BankLogoProps, type BankName, getAvailableBanks, getBankDisplayName, getBankLogo, resolveLogoPath };
package/dist/index.js CHANGED
@@ -73,134 +73,112 @@ var BANK_LOGO_REGISTRY = {
73
73
  bca: {
74
74
  name: "bca",
75
75
  displayName: "BCA",
76
- svg: bca_default,
77
- defaultFormat: "svg"
76
+ svg: bca_default
78
77
  },
79
78
  mandiri: {
80
79
  name: "mandiri",
81
80
  displayName: "Bank Mandiri",
82
- svg: mandiri_default,
83
- defaultFormat: "svg"
81
+ svg: mandiri_default
84
82
  },
85
83
  bni: {
86
84
  name: "bni",
87
85
  displayName: "BNI",
88
- svg: bni_default,
89
- defaultFormat: "svg"
86
+ svg: bni_default
90
87
  },
91
88
  bri: {
92
89
  name: "bri",
93
90
  displayName: "BRI",
94
- svg: bri_default,
95
- defaultFormat: "svg"
91
+ svg: bri_default
96
92
  },
97
93
  cimb: {
98
94
  name: "cimb",
99
95
  displayName: "CIMB Niaga",
100
- svg: cimb_default,
101
- defaultFormat: "svg"
96
+ svg: cimb_default
102
97
  },
103
98
  permata: {
104
99
  name: "permata",
105
100
  displayName: "Bank Permata",
106
- svg: permata_default,
107
- defaultFormat: "svg"
101
+ svg: permata_default
108
102
  },
109
103
  danamon: {
110
104
  name: "danamon",
111
105
  displayName: "Bank Danamon",
112
- svg: danamon_default,
113
- defaultFormat: "svg"
106
+ svg: danamon_default
114
107
  },
115
108
  maybank: {
116
109
  name: "maybank",
117
110
  displayName: "Maybank",
118
- svg: maybank_default,
119
- defaultFormat: "svg"
111
+ svg: maybank_default
120
112
  },
121
113
  ocbc: {
122
114
  name: "ocbc",
123
115
  displayName: "OCBC NISP",
124
- svg: ocbc_default,
125
- defaultFormat: "svg"
116
+ svg: ocbc_default
126
117
  },
127
118
  hsbc: {
128
119
  name: "hsbc",
129
120
  displayName: "HSBC",
130
- svg: hsbc_default,
131
- defaultFormat: "svg"
121
+ svg: hsbc_default
132
122
  },
133
123
  citibank: {
134
124
  name: "citibank",
135
125
  displayName: "Citibank",
136
- svg: citibank_default,
137
- defaultFormat: "svg"
126
+ svg: citibank_default
138
127
  },
139
128
  "standard-chartered": {
140
129
  name: "standard-chartered",
141
130
  displayName: "Standard Chartered",
142
- svg: standard_chartered_default,
143
- defaultFormat: "svg"
131
+ svg: standard_chartered_default
144
132
  },
145
133
  panin: {
146
134
  name: "panin",
147
135
  displayName: "Bank Panin",
148
- svg: panin_default,
149
- defaultFormat: "svg"
136
+ svg: panin_default
150
137
  },
151
138
  btn: {
152
139
  name: "btn",
153
140
  displayName: "BTN",
154
- svg: btn_default,
155
- defaultFormat: "svg"
141
+ svg: btn_default
156
142
  },
157
143
  mega: {
158
144
  name: "mega",
159
145
  displayName: "Bank Mega",
160
- svg: mega_default,
161
- defaultFormat: "svg"
146
+ svg: mega_default
162
147
  },
163
148
  "mega-syariah": {
164
149
  name: "mega-syariah",
165
150
  displayName: "Bank Mega Syariah",
166
- svg: mega_syariah_default,
167
- defaultFormat: "svg"
151
+ svg: mega_syariah_default
168
152
  },
169
153
  seabank: {
170
154
  name: "seabank",
171
155
  displayName: "Bank Seabank",
172
- svg: seabank_default,
173
- defaultFormat: "svg"
156
+ svg: seabank_default
174
157
  },
175
158
  gopay: {
176
159
  name: "gopay",
177
160
  displayName: "GoPay",
178
- svg: gopay_default,
179
- defaultFormat: "svg"
161
+ svg: gopay_default
180
162
  },
181
163
  ovo: {
182
164
  name: "ovo",
183
165
  displayName: "OVO",
184
- svg: ovo_default,
185
- defaultFormat: "svg"
166
+ svg: ovo_default
186
167
  },
187
168
  dana: {
188
169
  name: "dana",
189
170
  displayName: "DANA",
190
- svg: dana_default,
191
- defaultFormat: "svg"
171
+ svg: dana_default
192
172
  },
193
173
  shopeepay: {
194
174
  name: "shopeepay",
195
175
  displayName: "ShopeePay",
196
- svg: shopeepay_default,
197
- defaultFormat: "svg"
176
+ svg: shopeepay_default
198
177
  },
199
178
  linkaja: {
200
179
  name: "linkaja",
201
180
  displayName: "LinkAja",
202
- svg: linkaja_default,
203
- defaultFormat: "svg"
181
+ svg: linkaja_default
204
182
  }
205
183
  };
206
184
  function getBankLogo(name) {
@@ -211,11 +189,10 @@ function getAvailableBanks() {
211
189
  }
212
190
 
213
191
  // src/utils/logoResolver.ts
214
- function resolveLogoPath(name, format) {
192
+ function resolveLogoPath(name) {
215
193
  const logoData = getBankLogo(name);
216
194
  if (!logoData) return void 0;
217
- const selectedFormat = format || logoData.defaultFormat;
218
- return selectedFormat === "svg" ? logoData.svg : logoData.png;
195
+ return logoData.svg;
219
196
  }
220
197
  function getBankDisplayName(name) {
221
198
  const logoData = getBankLogo(name);
@@ -226,14 +203,13 @@ var BankLogo = ({
226
203
  src,
227
204
  width = 120,
228
205
  height,
229
- format,
230
206
  className = "",
231
207
  style = {},
232
208
  alt,
233
209
  fallback,
234
210
  loading = "lazy"
235
211
  }) => {
236
- const logoSrc = src || (name ? resolveLogoPath(name, format) : void 0);
212
+ const logoSrc = src || (name ? resolveLogoPath(name) : void 0);
237
213
  const displayName = name ? getBankDisplayName(name) : "Bank Logo";
238
214
  const altText = alt || displayName;
239
215
  if (!logoSrc) {
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/registry/bankLogoMap.ts","../src/utils/logoResolver.ts","../src/components/BankLogo.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","sourcesContent":["import bcaSvg from \"../assets/banks/bca.svg\";\r\nimport bniSvg from \"../assets/banks/bni.svg\";\r\nimport briSvg from \"../assets/banks/bri.svg\";\r\nimport btnSvg from \"../assets/banks/btn.svg\";\r\nimport cimbSvg from \"../assets/banks/cimb.svg\";\r\nimport citibankSvg from \"../assets/banks/citibank.svg\";\r\nimport danaSvg from \"../assets/banks/dana.svg\";\r\nimport danamonSvg from \"../assets/banks/danamon.svg\";\r\nimport gopaySvg from \"../assets/banks/gopay.svg\";\r\nimport hsbcSvg from \"../assets/banks/hsbc.svg\";\r\nimport linkajaSvg from \"../assets/banks/linkaja.svg\";\r\nimport mandiriSvg from \"../assets/banks/mandiri.svg\";\r\nimport maybankSvg from \"../assets/banks/maybank.svg\";\r\nimport megaSyariahSvg from \"../assets/banks/mega-syariah.svg\";\r\nimport megaSvg from \"../assets/banks/mega.svg\";\r\nimport ocbcSvg from \"../assets/banks/ocbc.svg\";\r\nimport ovoSvg from \"../assets/banks/ovo.svg\";\r\nimport paninSvg from \"../assets/banks/panin.svg\";\r\nimport permataSvg from \"../assets/banks/permata.svg\";\r\nimport seabankSvg from \"../assets/banks/seabank.svg\";\r\nimport shopeepaySvg from \"../assets/banks/shopeepay.svg\";\r\nimport standardCharteredSvg from \"../assets/banks/standard-chartered.svg\";\r\nimport { BankLogoData, BankName } from \"../types\";\r\n\r\n/**\r\n * Central registry of all bank logos\r\n * Add new banks here - logo files should match the key names\r\n */\r\nexport const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData> = {\r\n bca: {\r\n name: \"bca\",\r\n displayName: \"BCA\",\r\n svg: bcaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n mandiri: {\r\n name: \"mandiri\",\r\n displayName: \"Bank Mandiri\",\r\n svg: mandiriSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n bni: {\r\n name: \"bni\",\r\n displayName: \"BNI\",\r\n svg: bniSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n bri: {\r\n name: \"bri\",\r\n displayName: \"BRI\",\r\n svg: briSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n cimb: {\r\n name: \"cimb\",\r\n displayName: \"CIMB Niaga\",\r\n svg: cimbSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n permata: {\r\n name: \"permata\",\r\n displayName: \"Bank Permata\",\r\n svg: permataSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n danamon: {\r\n name: \"danamon\",\r\n displayName: \"Bank Danamon\",\r\n svg: danamonSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n maybank: {\r\n name: \"maybank\",\r\n displayName: \"Maybank\",\r\n svg: maybankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n ocbc: {\r\n name: \"ocbc\",\r\n displayName: \"OCBC NISP\",\r\n svg: ocbcSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n hsbc: {\r\n name: \"hsbc\",\r\n displayName: \"HSBC\",\r\n svg: hsbcSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n citibank: {\r\n name: \"citibank\",\r\n displayName: \"Citibank\",\r\n svg: citibankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n \"standard-chartered\": {\r\n name: \"standard-chartered\",\r\n displayName: \"Standard Chartered\",\r\n svg: standardCharteredSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n panin: {\r\n name: \"panin\",\r\n displayName: \"Bank Panin\",\r\n svg: paninSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n btn: {\r\n name: \"btn\",\r\n displayName: \"BTN\",\r\n svg: btnSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n mega: {\r\n name: \"mega\",\r\n displayName: \"Bank Mega\",\r\n svg: megaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n \"mega-syariah\": {\r\n name: \"mega-syariah\",\r\n displayName: \"Bank Mega Syariah\",\r\n svg: megaSyariahSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n seabank: {\r\n name: \"seabank\",\r\n displayName: \"Bank Seabank\",\r\n svg: seabankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n gopay: {\r\n name: \"gopay\",\r\n displayName: \"GoPay\",\r\n svg: gopaySvg,\r\n defaultFormat: \"svg\",\r\n },\r\n ovo: {\r\n name: \"ovo\",\r\n displayName: \"OVO\",\r\n svg: ovoSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n dana: {\r\n name: \"dana\",\r\n displayName: \"DANA\",\r\n svg: danaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n shopeepay: {\r\n name: \"shopeepay\",\r\n displayName: \"ShopeePay\",\r\n svg: shopeepaySvg,\r\n defaultFormat: \"svg\",\r\n },\r\n linkaja: {\r\n name: \"linkaja\",\r\n displayName: \"LinkAja\",\r\n svg: linkajaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n};\r\n\r\n/**\r\n * Get logo data by bank name\r\n */\r\nexport function getBankLogo(name: BankName): BankLogoData | undefined {\r\n return BANK_LOGO_REGISTRY[name];\r\n}\r\n\r\n/**\r\n * Get all available bank names\r\n */\r\nexport function getAvailableBanks(): BankName[] {\r\n return Object.keys(BANK_LOGO_REGISTRY) as BankName[];\r\n}\r\n","import { getBankLogo } from \"../registry/bankLogoMap\";\r\nimport { BankName, LogoFormat } from \"../types\";\r\n\r\n/**\r\n * Resolve the correct logo path based on bank name and format\r\n */\r\nexport function resolveLogoPath(\r\n name: BankName,\r\n format?: LogoFormat,\r\n): string | undefined {\r\n const logoData = getBankLogo(name);\r\n if (!logoData) return undefined;\r\n\r\n const selectedFormat = format || logoData.defaultFormat;\r\n return selectedFormat === \"svg\" ? logoData.svg : logoData.png;\r\n}\r\n\r\n/**\r\n * Get display name for a bank\r\n */\r\nexport function getBankDisplayName(name: BankName): string {\r\n const logoData = getBankLogo(name);\r\n return logoData?.displayName || name;\r\n}\r\n","import React from \"react\";\r\nimport { BankLogoProps } from \"../types\";\r\nimport { getBankDisplayName, resolveLogoPath } from \"../utils/logoResolver\";\r\n\r\n/**\r\n * BankLogo Component\r\n *\r\n * Displays bank logos with automatic format detection and fallback handling.\r\n * Optimized for wedding invitation gift/payment sections.\r\n *\r\n * @example\r\n * ```tsx\r\n * <BankLogo name=\"bca\" width={120} />\r\n * <BankLogo src=\"/custom/logo.png\" width={100} />\r\n * ```\r\n */\r\nexport const BankLogo: React.FC<BankLogoProps> = ({\r\n name,\r\n src,\r\n width = 120,\r\n height,\r\n format,\r\n className = \"\",\r\n style = {},\r\n alt,\r\n fallback,\r\n loading = \"lazy\",\r\n}) => {\r\n // Resolve logo source\r\n const logoSrc = src || (name ? resolveLogoPath(name, format) : undefined);\r\n const displayName = name ? getBankDisplayName(name) : \"Bank Logo\";\r\n const altText = alt || displayName;\r\n\r\n // Fallback if logo not found\r\n if (!logoSrc) {\r\n if (fallback) {\r\n return <>{fallback}</>;\r\n }\r\n return (\r\n <div\r\n className={`bank-logo-fallback ${className}`}\r\n style={{\r\n width,\r\n height: height || \"auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"#f3f4f6\",\r\n borderRadius: \"4px\",\r\n color: \"#6b7280\",\r\n fontSize: \"12px\",\r\n fontWeight: 500,\r\n ...style,\r\n }}\r\n >\r\n {displayName}\r\n </div>\r\n );\r\n }\r\n\r\n // Calculate height if not provided (maintain aspect ratio)\r\n const imgHeight = height || \"auto\";\r\n\r\n // Base styles\r\n const imgStyle: React.CSSProperties = {\r\n width,\r\n height: imgHeight,\r\n objectFit: \"contain\",\r\n ...style,\r\n };\r\n\r\n return (\r\n <img\r\n src={logoSrc}\r\n alt={altText}\r\n className={`bank-logo ${className}`}\r\n style={imgStyle}\r\n loading={loading}\r\n />\r\n );\r\n};\r\n\r\nBankLogo.displayName = \"BankLogo\";\r\n"]}
1
+ {"version":3,"sources":["../src/registry/bankLogoMap.ts","../src/utils/logoResolver.ts","../src/components/BankLogo.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","sourcesContent":["import bcaSvg from \"../assets/banks/bca.svg\";\nimport bniSvg from \"../assets/banks/bni.svg\";\nimport briSvg from \"../assets/banks/bri.svg\";\nimport btnSvg from \"../assets/banks/btn.svg\";\nimport cimbSvg from \"../assets/banks/cimb.svg\";\nimport citibankSvg from \"../assets/banks/citibank.svg\";\nimport danaSvg from \"../assets/banks/dana.svg\";\nimport danamonSvg from \"../assets/banks/danamon.svg\";\nimport gopaySvg from \"../assets/banks/gopay.svg\";\nimport hsbcSvg from \"../assets/banks/hsbc.svg\";\nimport linkajaSvg from \"../assets/banks/linkaja.svg\";\nimport mandiriSvg from \"../assets/banks/mandiri.svg\";\nimport maybankSvg from \"../assets/banks/maybank.svg\";\nimport megaSyariahSvg from \"../assets/banks/mega-syariah.svg\";\nimport megaSvg from \"../assets/banks/mega.svg\";\nimport ocbcSvg from \"../assets/banks/ocbc.svg\";\nimport ovoSvg from \"../assets/banks/ovo.svg\";\nimport paninSvg from \"../assets/banks/panin.svg\";\nimport permataSvg from \"../assets/banks/permata.svg\";\nimport seabankSvg from \"../assets/banks/seabank.svg\";\nimport shopeepaySvg from \"../assets/banks/shopeepay.svg\";\nimport standardCharteredSvg from \"../assets/banks/standard-chartered.svg\";\nimport { BankLogoData, BankName } from \"../types\";\n\n/**\n * Central registry of all bank logos\n * Add new banks here - logo files should match the key names\n */\nexport const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData> = {\n bca: {\n name: \"bca\",\n displayName: \"BCA\",\n svg: bcaSvg,\n },\n mandiri: {\n name: \"mandiri\",\n displayName: \"Bank Mandiri\",\n svg: mandiriSvg,\n },\n bni: {\n name: \"bni\",\n displayName: \"BNI\",\n svg: bniSvg,\n },\n bri: {\n name: \"bri\",\n displayName: \"BRI\",\n svg: briSvg,\n },\n cimb: {\n name: \"cimb\",\n displayName: \"CIMB Niaga\",\n svg: cimbSvg,\n },\n permata: {\n name: \"permata\",\n displayName: \"Bank Permata\",\n svg: permataSvg,\n },\n danamon: {\n name: \"danamon\",\n displayName: \"Bank Danamon\",\n svg: danamonSvg,\n },\n maybank: {\n name: \"maybank\",\n displayName: \"Maybank\",\n svg: maybankSvg,\n },\n ocbc: {\n name: \"ocbc\",\n displayName: \"OCBC NISP\",\n svg: ocbcSvg,\n },\n hsbc: {\n name: \"hsbc\",\n displayName: \"HSBC\",\n svg: hsbcSvg,\n },\n citibank: {\n name: \"citibank\",\n displayName: \"Citibank\",\n svg: citibankSvg,\n },\n \"standard-chartered\": {\n name: \"standard-chartered\",\n displayName: \"Standard Chartered\",\n svg: standardCharteredSvg,\n },\n panin: {\n name: \"panin\",\n displayName: \"Bank Panin\",\n svg: paninSvg,\n },\n btn: {\n name: \"btn\",\n displayName: \"BTN\",\n svg: btnSvg,\n },\n mega: {\n name: \"mega\",\n displayName: \"Bank Mega\",\n svg: megaSvg,\n },\n \"mega-syariah\": {\n name: \"mega-syariah\",\n displayName: \"Bank Mega Syariah\",\n svg: megaSyariahSvg,\n },\n seabank: {\n name: \"seabank\",\n displayName: \"Bank Seabank\",\n svg: seabankSvg,\n },\n gopay: {\n name: \"gopay\",\n displayName: \"GoPay\",\n svg: gopaySvg,\n },\n ovo: {\n name: \"ovo\",\n displayName: \"OVO\",\n svg: ovoSvg,\n },\n dana: {\n name: \"dana\",\n displayName: \"DANA\",\n svg: danaSvg,\n },\n shopeepay: {\n name: \"shopeepay\",\n displayName: \"ShopeePay\",\n svg: shopeepaySvg,\n },\n linkaja: {\n name: \"linkaja\",\n displayName: \"LinkAja\",\n svg: linkajaSvg,\n },\n};\n\n/**\n * Get logo data by bank name\n */\nexport function getBankLogo(name: BankName): BankLogoData | undefined {\n return BANK_LOGO_REGISTRY[name];\n}\n\n/**\n * Get all available bank names\n */\nexport function getAvailableBanks(): BankName[] {\n return Object.keys(BANK_LOGO_REGISTRY) as BankName[];\n}\n","import { getBankLogo } from \"../registry/bankLogoMap\";\r\nimport { BankName } from \"../types\";\r\n\r\n/**\r\n * Resolve the correct logo path based on bank name\r\n */\r\nexport function resolveLogoPath(name: BankName): string | undefined {\r\n const logoData = getBankLogo(name);\r\n if (!logoData) return undefined;\r\n\r\n return logoData.svg;\r\n}\r\n\r\n/**\r\n * Get display name for a bank\r\n */\r\nexport function getBankDisplayName(name: BankName): string {\r\n const logoData = getBankLogo(name);\r\n return logoData?.displayName || name;\r\n}\r\n","import React from \"react\";\r\nimport { BankLogoProps } from \"../types\";\r\nimport { getBankDisplayName, resolveLogoPath } from \"../utils/logoResolver\";\r\n\r\n/**\r\n * BankLogo Component\r\n *\r\n * Displays bank logos with automatic format detection and fallback handling.\r\n * Optimized for wedding invitation gift/payment sections.\r\n *\r\n * @example\r\n * ```tsx\r\n * <BankLogo name=\"bca\" width={120} />\r\n * <BankLogo src=\"/custom/logo.png\" width={100} />\r\n * ```\r\n */\r\nexport const BankLogo: React.FC<BankLogoProps> = ({\r\n name,\r\n src,\r\n width = 120,\r\n height,\r\n className = \"\",\r\n style = {},\r\n alt,\r\n fallback,\r\n loading = \"lazy\",\r\n}) => {\r\n // Resolve logo source\r\n const logoSrc = src || (name ? resolveLogoPath(name) : undefined);\r\n const displayName = name ? getBankDisplayName(name) : \"Bank Logo\";\r\n const altText = alt || displayName;\r\n\r\n // Fallback if logo not found\r\n if (!logoSrc) {\r\n if (fallback) {\r\n return <>{fallback}</>;\r\n }\r\n return (\r\n <div\r\n className={`bank-logo-fallback ${className}`}\r\n style={{\r\n width,\r\n height: height || \"auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"#f3f4f6\",\r\n borderRadius: \"4px\",\r\n color: \"#6b7280\",\r\n fontSize: \"12px\",\r\n fontWeight: 500,\r\n ...style,\r\n }}\r\n >\r\n {displayName}\r\n </div>\r\n );\r\n }\r\n\r\n // Calculate height if not provided (maintain aspect ratio)\r\n const imgHeight = height || \"auto\";\r\n\r\n // Base styles\r\n const imgStyle: React.CSSProperties = {\r\n width,\r\n height: imgHeight,\r\n objectFit: \"contain\",\r\n ...style,\r\n };\r\n\r\n return (\r\n <img\r\n src={logoSrc}\r\n alt={altText}\r\n className={`bank-logo ${className}`}\r\n style={imgStyle}\r\n loading={loading}\r\n />\r\n );\r\n};\r\n\r\nBankLogo.displayName = \"BankLogo\";\r\n"]}
package/dist/index.mjs CHANGED
@@ -71,134 +71,112 @@ var BANK_LOGO_REGISTRY = {
71
71
  bca: {
72
72
  name: "bca",
73
73
  displayName: "BCA",
74
- svg: bca_default,
75
- defaultFormat: "svg"
74
+ svg: bca_default
76
75
  },
77
76
  mandiri: {
78
77
  name: "mandiri",
79
78
  displayName: "Bank Mandiri",
80
- svg: mandiri_default,
81
- defaultFormat: "svg"
79
+ svg: mandiri_default
82
80
  },
83
81
  bni: {
84
82
  name: "bni",
85
83
  displayName: "BNI",
86
- svg: bni_default,
87
- defaultFormat: "svg"
84
+ svg: bni_default
88
85
  },
89
86
  bri: {
90
87
  name: "bri",
91
88
  displayName: "BRI",
92
- svg: bri_default,
93
- defaultFormat: "svg"
89
+ svg: bri_default
94
90
  },
95
91
  cimb: {
96
92
  name: "cimb",
97
93
  displayName: "CIMB Niaga",
98
- svg: cimb_default,
99
- defaultFormat: "svg"
94
+ svg: cimb_default
100
95
  },
101
96
  permata: {
102
97
  name: "permata",
103
98
  displayName: "Bank Permata",
104
- svg: permata_default,
105
- defaultFormat: "svg"
99
+ svg: permata_default
106
100
  },
107
101
  danamon: {
108
102
  name: "danamon",
109
103
  displayName: "Bank Danamon",
110
- svg: danamon_default,
111
- defaultFormat: "svg"
104
+ svg: danamon_default
112
105
  },
113
106
  maybank: {
114
107
  name: "maybank",
115
108
  displayName: "Maybank",
116
- svg: maybank_default,
117
- defaultFormat: "svg"
109
+ svg: maybank_default
118
110
  },
119
111
  ocbc: {
120
112
  name: "ocbc",
121
113
  displayName: "OCBC NISP",
122
- svg: ocbc_default,
123
- defaultFormat: "svg"
114
+ svg: ocbc_default
124
115
  },
125
116
  hsbc: {
126
117
  name: "hsbc",
127
118
  displayName: "HSBC",
128
- svg: hsbc_default,
129
- defaultFormat: "svg"
119
+ svg: hsbc_default
130
120
  },
131
121
  citibank: {
132
122
  name: "citibank",
133
123
  displayName: "Citibank",
134
- svg: citibank_default,
135
- defaultFormat: "svg"
124
+ svg: citibank_default
136
125
  },
137
126
  "standard-chartered": {
138
127
  name: "standard-chartered",
139
128
  displayName: "Standard Chartered",
140
- svg: standard_chartered_default,
141
- defaultFormat: "svg"
129
+ svg: standard_chartered_default
142
130
  },
143
131
  panin: {
144
132
  name: "panin",
145
133
  displayName: "Bank Panin",
146
- svg: panin_default,
147
- defaultFormat: "svg"
134
+ svg: panin_default
148
135
  },
149
136
  btn: {
150
137
  name: "btn",
151
138
  displayName: "BTN",
152
- svg: btn_default,
153
- defaultFormat: "svg"
139
+ svg: btn_default
154
140
  },
155
141
  mega: {
156
142
  name: "mega",
157
143
  displayName: "Bank Mega",
158
- svg: mega_default,
159
- defaultFormat: "svg"
144
+ svg: mega_default
160
145
  },
161
146
  "mega-syariah": {
162
147
  name: "mega-syariah",
163
148
  displayName: "Bank Mega Syariah",
164
- svg: mega_syariah_default,
165
- defaultFormat: "svg"
149
+ svg: mega_syariah_default
166
150
  },
167
151
  seabank: {
168
152
  name: "seabank",
169
153
  displayName: "Bank Seabank",
170
- svg: seabank_default,
171
- defaultFormat: "svg"
154
+ svg: seabank_default
172
155
  },
173
156
  gopay: {
174
157
  name: "gopay",
175
158
  displayName: "GoPay",
176
- svg: gopay_default,
177
- defaultFormat: "svg"
159
+ svg: gopay_default
178
160
  },
179
161
  ovo: {
180
162
  name: "ovo",
181
163
  displayName: "OVO",
182
- svg: ovo_default,
183
- defaultFormat: "svg"
164
+ svg: ovo_default
184
165
  },
185
166
  dana: {
186
167
  name: "dana",
187
168
  displayName: "DANA",
188
- svg: dana_default,
189
- defaultFormat: "svg"
169
+ svg: dana_default
190
170
  },
191
171
  shopeepay: {
192
172
  name: "shopeepay",
193
173
  displayName: "ShopeePay",
194
- svg: shopeepay_default,
195
- defaultFormat: "svg"
174
+ svg: shopeepay_default
196
175
  },
197
176
  linkaja: {
198
177
  name: "linkaja",
199
178
  displayName: "LinkAja",
200
- svg: linkaja_default,
201
- defaultFormat: "svg"
179
+ svg: linkaja_default
202
180
  }
203
181
  };
204
182
  function getBankLogo(name) {
@@ -209,11 +187,10 @@ function getAvailableBanks() {
209
187
  }
210
188
 
211
189
  // src/utils/logoResolver.ts
212
- function resolveLogoPath(name, format) {
190
+ function resolveLogoPath(name) {
213
191
  const logoData = getBankLogo(name);
214
192
  if (!logoData) return void 0;
215
- const selectedFormat = format || logoData.defaultFormat;
216
- return selectedFormat === "svg" ? logoData.svg : logoData.png;
193
+ return logoData.svg;
217
194
  }
218
195
  function getBankDisplayName(name) {
219
196
  const logoData = getBankLogo(name);
@@ -224,14 +201,13 @@ var BankLogo = ({
224
201
  src,
225
202
  width = 120,
226
203
  height,
227
- format,
228
204
  className = "",
229
205
  style = {},
230
206
  alt,
231
207
  fallback,
232
208
  loading = "lazy"
233
209
  }) => {
234
- const logoSrc = src || (name ? resolveLogoPath(name, format) : void 0);
210
+ const logoSrc = src || (name ? resolveLogoPath(name) : void 0);
235
211
  const displayName = name ? getBankDisplayName(name) : "Bank Logo";
236
212
  const altText = alt || displayName;
237
213
  if (!logoSrc) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/registry/bankLogoMap.ts","../src/utils/logoResolver.ts","../src/components/BankLogo.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import bcaSvg from \"../assets/banks/bca.svg\";\r\nimport bniSvg from \"../assets/banks/bni.svg\";\r\nimport briSvg from \"../assets/banks/bri.svg\";\r\nimport btnSvg from \"../assets/banks/btn.svg\";\r\nimport cimbSvg from \"../assets/banks/cimb.svg\";\r\nimport citibankSvg from \"../assets/banks/citibank.svg\";\r\nimport danaSvg from \"../assets/banks/dana.svg\";\r\nimport danamonSvg from \"../assets/banks/danamon.svg\";\r\nimport gopaySvg from \"../assets/banks/gopay.svg\";\r\nimport hsbcSvg from \"../assets/banks/hsbc.svg\";\r\nimport linkajaSvg from \"../assets/banks/linkaja.svg\";\r\nimport mandiriSvg from \"../assets/banks/mandiri.svg\";\r\nimport maybankSvg from \"../assets/banks/maybank.svg\";\r\nimport megaSyariahSvg from \"../assets/banks/mega-syariah.svg\";\r\nimport megaSvg from \"../assets/banks/mega.svg\";\r\nimport ocbcSvg from \"../assets/banks/ocbc.svg\";\r\nimport ovoSvg from \"../assets/banks/ovo.svg\";\r\nimport paninSvg from \"../assets/banks/panin.svg\";\r\nimport permataSvg from \"../assets/banks/permata.svg\";\r\nimport seabankSvg from \"../assets/banks/seabank.svg\";\r\nimport shopeepaySvg from \"../assets/banks/shopeepay.svg\";\r\nimport standardCharteredSvg from \"../assets/banks/standard-chartered.svg\";\r\nimport { BankLogoData, BankName } from \"../types\";\r\n\r\n/**\r\n * Central registry of all bank logos\r\n * Add new banks here - logo files should match the key names\r\n */\r\nexport const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData> = {\r\n bca: {\r\n name: \"bca\",\r\n displayName: \"BCA\",\r\n svg: bcaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n mandiri: {\r\n name: \"mandiri\",\r\n displayName: \"Bank Mandiri\",\r\n svg: mandiriSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n bni: {\r\n name: \"bni\",\r\n displayName: \"BNI\",\r\n svg: bniSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n bri: {\r\n name: \"bri\",\r\n displayName: \"BRI\",\r\n svg: briSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n cimb: {\r\n name: \"cimb\",\r\n displayName: \"CIMB Niaga\",\r\n svg: cimbSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n permata: {\r\n name: \"permata\",\r\n displayName: \"Bank Permata\",\r\n svg: permataSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n danamon: {\r\n name: \"danamon\",\r\n displayName: \"Bank Danamon\",\r\n svg: danamonSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n maybank: {\r\n name: \"maybank\",\r\n displayName: \"Maybank\",\r\n svg: maybankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n ocbc: {\r\n name: \"ocbc\",\r\n displayName: \"OCBC NISP\",\r\n svg: ocbcSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n hsbc: {\r\n name: \"hsbc\",\r\n displayName: \"HSBC\",\r\n svg: hsbcSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n citibank: {\r\n name: \"citibank\",\r\n displayName: \"Citibank\",\r\n svg: citibankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n \"standard-chartered\": {\r\n name: \"standard-chartered\",\r\n displayName: \"Standard Chartered\",\r\n svg: standardCharteredSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n panin: {\r\n name: \"panin\",\r\n displayName: \"Bank Panin\",\r\n svg: paninSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n btn: {\r\n name: \"btn\",\r\n displayName: \"BTN\",\r\n svg: btnSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n mega: {\r\n name: \"mega\",\r\n displayName: \"Bank Mega\",\r\n svg: megaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n \"mega-syariah\": {\r\n name: \"mega-syariah\",\r\n displayName: \"Bank Mega Syariah\",\r\n svg: megaSyariahSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n seabank: {\r\n name: \"seabank\",\r\n displayName: \"Bank Seabank\",\r\n svg: seabankSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n gopay: {\r\n name: \"gopay\",\r\n displayName: \"GoPay\",\r\n svg: gopaySvg,\r\n defaultFormat: \"svg\",\r\n },\r\n ovo: {\r\n name: \"ovo\",\r\n displayName: \"OVO\",\r\n svg: ovoSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n dana: {\r\n name: \"dana\",\r\n displayName: \"DANA\",\r\n svg: danaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n shopeepay: {\r\n name: \"shopeepay\",\r\n displayName: \"ShopeePay\",\r\n svg: shopeepaySvg,\r\n defaultFormat: \"svg\",\r\n },\r\n linkaja: {\r\n name: \"linkaja\",\r\n displayName: \"LinkAja\",\r\n svg: linkajaSvg,\r\n defaultFormat: \"svg\",\r\n },\r\n};\r\n\r\n/**\r\n * Get logo data by bank name\r\n */\r\nexport function getBankLogo(name: BankName): BankLogoData | undefined {\r\n return BANK_LOGO_REGISTRY[name];\r\n}\r\n\r\n/**\r\n * Get all available bank names\r\n */\r\nexport function getAvailableBanks(): BankName[] {\r\n return Object.keys(BANK_LOGO_REGISTRY) as BankName[];\r\n}\r\n","import { getBankLogo } from \"../registry/bankLogoMap\";\r\nimport { BankName, LogoFormat } from \"../types\";\r\n\r\n/**\r\n * Resolve the correct logo path based on bank name and format\r\n */\r\nexport function resolveLogoPath(\r\n name: BankName,\r\n format?: LogoFormat,\r\n): string | undefined {\r\n const logoData = getBankLogo(name);\r\n if (!logoData) return undefined;\r\n\r\n const selectedFormat = format || logoData.defaultFormat;\r\n return selectedFormat === \"svg\" ? logoData.svg : logoData.png;\r\n}\r\n\r\n/**\r\n * Get display name for a bank\r\n */\r\nexport function getBankDisplayName(name: BankName): string {\r\n const logoData = getBankLogo(name);\r\n return logoData?.displayName || name;\r\n}\r\n","import React from \"react\";\r\nimport { BankLogoProps } from \"../types\";\r\nimport { getBankDisplayName, resolveLogoPath } from \"../utils/logoResolver\";\r\n\r\n/**\r\n * BankLogo Component\r\n *\r\n * Displays bank logos with automatic format detection and fallback handling.\r\n * Optimized for wedding invitation gift/payment sections.\r\n *\r\n * @example\r\n * ```tsx\r\n * <BankLogo name=\"bca\" width={120} />\r\n * <BankLogo src=\"/custom/logo.png\" width={100} />\r\n * ```\r\n */\r\nexport const BankLogo: React.FC<BankLogoProps> = ({\r\n name,\r\n src,\r\n width = 120,\r\n height,\r\n format,\r\n className = \"\",\r\n style = {},\r\n alt,\r\n fallback,\r\n loading = \"lazy\",\r\n}) => {\r\n // Resolve logo source\r\n const logoSrc = src || (name ? resolveLogoPath(name, format) : undefined);\r\n const displayName = name ? getBankDisplayName(name) : \"Bank Logo\";\r\n const altText = alt || displayName;\r\n\r\n // Fallback if logo not found\r\n if (!logoSrc) {\r\n if (fallback) {\r\n return <>{fallback}</>;\r\n }\r\n return (\r\n <div\r\n className={`bank-logo-fallback ${className}`}\r\n style={{\r\n width,\r\n height: height || \"auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"#f3f4f6\",\r\n borderRadius: \"4px\",\r\n color: \"#6b7280\",\r\n fontSize: \"12px\",\r\n fontWeight: 500,\r\n ...style,\r\n }}\r\n >\r\n {displayName}\r\n </div>\r\n );\r\n }\r\n\r\n // Calculate height if not provided (maintain aspect ratio)\r\n const imgHeight = height || \"auto\";\r\n\r\n // Base styles\r\n const imgStyle: React.CSSProperties = {\r\n width,\r\n height: imgHeight,\r\n objectFit: \"contain\",\r\n ...style,\r\n };\r\n\r\n return (\r\n <img\r\n src={logoSrc}\r\n alt={altText}\r\n className={`bank-logo ${className}`}\r\n style={imgStyle}\r\n loading={loading}\r\n />\r\n );\r\n};\r\n\r\nBankLogo.displayName = \"BankLogo\";\r\n"]}
1
+ {"version":3,"sources":["../src/registry/bankLogoMap.ts","../src/utils/logoResolver.ts","../src/components/BankLogo.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import bcaSvg from \"../assets/banks/bca.svg\";\nimport bniSvg from \"../assets/banks/bni.svg\";\nimport briSvg from \"../assets/banks/bri.svg\";\nimport btnSvg from \"../assets/banks/btn.svg\";\nimport cimbSvg from \"../assets/banks/cimb.svg\";\nimport citibankSvg from \"../assets/banks/citibank.svg\";\nimport danaSvg from \"../assets/banks/dana.svg\";\nimport danamonSvg from \"../assets/banks/danamon.svg\";\nimport gopaySvg from \"../assets/banks/gopay.svg\";\nimport hsbcSvg from \"../assets/banks/hsbc.svg\";\nimport linkajaSvg from \"../assets/banks/linkaja.svg\";\nimport mandiriSvg from \"../assets/banks/mandiri.svg\";\nimport maybankSvg from \"../assets/banks/maybank.svg\";\nimport megaSyariahSvg from \"../assets/banks/mega-syariah.svg\";\nimport megaSvg from \"../assets/banks/mega.svg\";\nimport ocbcSvg from \"../assets/banks/ocbc.svg\";\nimport ovoSvg from \"../assets/banks/ovo.svg\";\nimport paninSvg from \"../assets/banks/panin.svg\";\nimport permataSvg from \"../assets/banks/permata.svg\";\nimport seabankSvg from \"../assets/banks/seabank.svg\";\nimport shopeepaySvg from \"../assets/banks/shopeepay.svg\";\nimport standardCharteredSvg from \"../assets/banks/standard-chartered.svg\";\nimport { BankLogoData, BankName } from \"../types\";\n\n/**\n * Central registry of all bank logos\n * Add new banks here - logo files should match the key names\n */\nexport const BANK_LOGO_REGISTRY: Record<BankName, BankLogoData> = {\n bca: {\n name: \"bca\",\n displayName: \"BCA\",\n svg: bcaSvg,\n },\n mandiri: {\n name: \"mandiri\",\n displayName: \"Bank Mandiri\",\n svg: mandiriSvg,\n },\n bni: {\n name: \"bni\",\n displayName: \"BNI\",\n svg: bniSvg,\n },\n bri: {\n name: \"bri\",\n displayName: \"BRI\",\n svg: briSvg,\n },\n cimb: {\n name: \"cimb\",\n displayName: \"CIMB Niaga\",\n svg: cimbSvg,\n },\n permata: {\n name: \"permata\",\n displayName: \"Bank Permata\",\n svg: permataSvg,\n },\n danamon: {\n name: \"danamon\",\n displayName: \"Bank Danamon\",\n svg: danamonSvg,\n },\n maybank: {\n name: \"maybank\",\n displayName: \"Maybank\",\n svg: maybankSvg,\n },\n ocbc: {\n name: \"ocbc\",\n displayName: \"OCBC NISP\",\n svg: ocbcSvg,\n },\n hsbc: {\n name: \"hsbc\",\n displayName: \"HSBC\",\n svg: hsbcSvg,\n },\n citibank: {\n name: \"citibank\",\n displayName: \"Citibank\",\n svg: citibankSvg,\n },\n \"standard-chartered\": {\n name: \"standard-chartered\",\n displayName: \"Standard Chartered\",\n svg: standardCharteredSvg,\n },\n panin: {\n name: \"panin\",\n displayName: \"Bank Panin\",\n svg: paninSvg,\n },\n btn: {\n name: \"btn\",\n displayName: \"BTN\",\n svg: btnSvg,\n },\n mega: {\n name: \"mega\",\n displayName: \"Bank Mega\",\n svg: megaSvg,\n },\n \"mega-syariah\": {\n name: \"mega-syariah\",\n displayName: \"Bank Mega Syariah\",\n svg: megaSyariahSvg,\n },\n seabank: {\n name: \"seabank\",\n displayName: \"Bank Seabank\",\n svg: seabankSvg,\n },\n gopay: {\n name: \"gopay\",\n displayName: \"GoPay\",\n svg: gopaySvg,\n },\n ovo: {\n name: \"ovo\",\n displayName: \"OVO\",\n svg: ovoSvg,\n },\n dana: {\n name: \"dana\",\n displayName: \"DANA\",\n svg: danaSvg,\n },\n shopeepay: {\n name: \"shopeepay\",\n displayName: \"ShopeePay\",\n svg: shopeepaySvg,\n },\n linkaja: {\n name: \"linkaja\",\n displayName: \"LinkAja\",\n svg: linkajaSvg,\n },\n};\n\n/**\n * Get logo data by bank name\n */\nexport function getBankLogo(name: BankName): BankLogoData | undefined {\n return BANK_LOGO_REGISTRY[name];\n}\n\n/**\n * Get all available bank names\n */\nexport function getAvailableBanks(): BankName[] {\n return Object.keys(BANK_LOGO_REGISTRY) as BankName[];\n}\n","import { getBankLogo } from \"../registry/bankLogoMap\";\r\nimport { BankName } from \"../types\";\r\n\r\n/**\r\n * Resolve the correct logo path based on bank name\r\n */\r\nexport function resolveLogoPath(name: BankName): string | undefined {\r\n const logoData = getBankLogo(name);\r\n if (!logoData) return undefined;\r\n\r\n return logoData.svg;\r\n}\r\n\r\n/**\r\n * Get display name for a bank\r\n */\r\nexport function getBankDisplayName(name: BankName): string {\r\n const logoData = getBankLogo(name);\r\n return logoData?.displayName || name;\r\n}\r\n","import React from \"react\";\r\nimport { BankLogoProps } from \"../types\";\r\nimport { getBankDisplayName, resolveLogoPath } from \"../utils/logoResolver\";\r\n\r\n/**\r\n * BankLogo Component\r\n *\r\n * Displays bank logos with automatic format detection and fallback handling.\r\n * Optimized for wedding invitation gift/payment sections.\r\n *\r\n * @example\r\n * ```tsx\r\n * <BankLogo name=\"bca\" width={120} />\r\n * <BankLogo src=\"/custom/logo.png\" width={100} />\r\n * ```\r\n */\r\nexport const BankLogo: React.FC<BankLogoProps> = ({\r\n name,\r\n src,\r\n width = 120,\r\n height,\r\n className = \"\",\r\n style = {},\r\n alt,\r\n fallback,\r\n loading = \"lazy\",\r\n}) => {\r\n // Resolve logo source\r\n const logoSrc = src || (name ? resolveLogoPath(name) : undefined);\r\n const displayName = name ? getBankDisplayName(name) : \"Bank Logo\";\r\n const altText = alt || displayName;\r\n\r\n // Fallback if logo not found\r\n if (!logoSrc) {\r\n if (fallback) {\r\n return <>{fallback}</>;\r\n }\r\n return (\r\n <div\r\n className={`bank-logo-fallback ${className}`}\r\n style={{\r\n width,\r\n height: height || \"auto\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"#f3f4f6\",\r\n borderRadius: \"4px\",\r\n color: \"#6b7280\",\r\n fontSize: \"12px\",\r\n fontWeight: 500,\r\n ...style,\r\n }}\r\n >\r\n {displayName}\r\n </div>\r\n );\r\n }\r\n\r\n // Calculate height if not provided (maintain aspect ratio)\r\n const imgHeight = height || \"auto\";\r\n\r\n // Base styles\r\n const imgStyle: React.CSSProperties = {\r\n width,\r\n height: imgHeight,\r\n objectFit: \"contain\",\r\n ...style,\r\n };\r\n\r\n return (\r\n <img\r\n src={logoSrc}\r\n alt={altText}\r\n className={`bank-logo ${className}`}\r\n style={imgStyle}\r\n loading={loading}\r\n />\r\n );\r\n};\r\n\r\nBankLogo.displayName = \"BankLogo\";\r\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-bank-logo",
3
- "version": "0.1.1",
3
+ "version": "2.0.0",
4
4
  "description": "Reusable bank logo component for React applications",
5
5
  "private": false,
6
6
  "main": "./dist/index.js",