@xsolla/xui-icons-payment 0.148.0 → 0.148.2

package/README.md

@@ -0,0 +1,243 @@
+# Icons Payment
+
+A cross-platform React payment icons package containing logos for major credit cards and payment providers. Renders as scalable SVGs.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-icons-payment
+# or
+yarn add @xsolla/xui-icons-payment
+```
+
+## Demo
+
+### Credit Card Icons
+
+```tsx
+import * as React from 'react';
+import { Visa, Mastercard, AmericanExpress, Discover } from '@xsolla/xui-icons-payment';
+
+export default function CreditCardIcons() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Visa size={40} />
+      <Mastercard size={40} />
+      <AmericanExpress size={40} />
+      <Discover size={40} />
+    </div>
+  );
+}
+```
+
+### Payment Providers
+
+```tsx
+import * as React from 'react';
+import { Paypal, Unionpay, Jcb, Maestro } from '@xsolla/xui-icons-payment';
+
+export default function PaymentProviders() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Paypal size={40} />
+      <Unionpay size={40} />
+      <Jcb size={40} />
+      <Maestro size={40} />
+    </div>
+  );
+}
+```
+
+### Icon Sizes
+
+```tsx
+import * as React from 'react';
+import { Visa } from '@xsolla/xui-icons-payment';
+
+export default function PaymentSizes() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+      <Visa size={24} />
+      <Visa size={32} />
+      <Visa size={40} />
+      <Visa size={56} />
+    </div>
+  );
+}
+```
+
+## Anatomy
+
+```jsx
+import { Visa } from '@xsolla/xui-icons-payment';
+
+<Visa
+  size={40}                    // Size in pixels
+  className="payment-icon"     // CSS class
+  style={{ margin: 4 }}        // Inline styles
+  aria-label="Visa"            // Accessible label
+/>
+```
+
+## Examples
+
+### Accepted Payment Methods
+
+```tsx
+import * as React from 'react';
+import {
+  Visa,
+  Mastercard,
+  AmericanExpress,
+  Paypal,
+  Discover,
+} from '@xsolla/xui-icons-payment';
+
+export default function AcceptedPayments() {
+  return (
+    <div>
+      <p style={{ marginBottom: 8, fontSize: 14, color: '#666' }}>
+        We accept
+      </p>
+      <div style={{ display: 'flex', gap: 8 }}>
+        <Visa size={32} aria-label="Visa" />
+        <Mastercard size={32} aria-label="Mastercard" />
+        <AmericanExpress size={32} aria-label="American Express" />
+        <Discover size={32} aria-label="Discover" />
+        <Paypal size={32} aria-label="PayPal" />
+      </div>
+    </div>
+  );
+}
+```
+
+### Payment Method Selector
+
+```tsx
+import * as React from 'react';
+import { Visa, Mastercard, AmericanExpress, Paypal } from '@xsolla/xui-icons-payment';
+
+export default function PaymentSelector() {
+  const [selected, setSelected] = React.useState('visa');
+
+  const methods = [
+    { id: 'visa', name: 'Visa', Icon: Visa },
+    { id: 'mastercard', name: 'Mastercard', Icon: Mastercard },
+    { id: 'amex', name: 'American Express', Icon: AmericanExpress },
+    { id: 'paypal', name: 'PayPal', Icon: Paypal },
+  ];
+
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      {methods.map(({ id, name, Icon }) => (
+        <button
+          key={id}
+          onClick={() => setSelected(id)}
+          style={{
+            padding: '12px 16px',
+            border: selected === id ? '2px solid #007bff' : '1px solid #ddd',
+            borderRadius: 8,
+            background: 'white',
+            cursor: 'pointer',
+          }}
+          aria-pressed={selected === id}
+        >
+          <Icon size={40} aria-label={name} />
+        </button>
+      ))}
+    </div>
+  );
+}
+```
+
+### Card Input Display
+
+```tsx
+import * as React from 'react';
+import { Visa, Mastercard, AmericanExpress } from '@xsolla/xui-icons-payment';
+import { Input } from '@xsolla/xui-input';
+
+export default function CardInputDisplay() {
+  const [cardNumber, setCardNumber] = React.useState('');
+
+  const getCardIcon = () => {
+    if (cardNumber.startsWith('4')) return <Visa size={24} />;
+    if (cardNumber.startsWith('5')) return <Mastercard size={24} />;
+    if (cardNumber.startsWith('3')) return <AmericanExpress size={24} />;
+    return null;
+  };
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <Input
+        value={cardNumber}
+        onChange={(e) => setCardNumber(e.target.value)}
+        placeholder="Card number"
+        style={{ flex: 1 }}
+      />
+      {getCardIcon()}
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### Payment Icon Components
+
+Each payment icon component accepts the same props:
+
+**PaymentIconProps:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| size | `number` | `24` | Size in pixels. |
+| className | `string` | - | CSS class name. |
+| style | `CSSProperties` | - | Inline styles. |
+| data-testid | `string` | - | Test ID (web). |
+| testID | `string` | - | Test ID (React Native). |
+| aria-label | `string` | - | Accessible label. |
+| aria-hidden | `boolean` | `true` if no aria-label | Hide from screen readers. |
+
+## Available Icons
+
+| Component | Payment Method |
+| :-------- | :------------- |
+| `AmericanExpress` | American Express |
+| `Aura` | Aura |
+| `CartesBancaires` | Cartes Bancaires |
+| `Cirrus` | Cirrus |
+| `Dankort` | Dankort |
+| `Dinersclub` | Diners Club |
+| `Discover` | Discover |
+| `Elo` | Elo |
+| `Hipercard` | Hipercard |
+| `Jcb` | JCB |
+| `Maestro` | Maestro |
+| `Mastercard` | Mastercard |
+| `Mir` | Mir |
+| `Naranja` | Naranja |
+| `Paypal` | PayPal |
+| `Sodexo` | Sodexo |
+| `Uatp` | UATP |
+| `Unionpay` | UnionPay |
+| `Visa` | Visa |
+
+## Tree Shaking
+
+Import individual icons for optimal bundle size:
+
+```tsx
+// Good - only imports needed icons
+import { Visa, Mastercard } from '@xsolla/xui-icons-payment';
+
+// Avoid - imports all icons
+import * as PaymentIcons from '@xsolla/xui-icons-payment';
+```
+
+## Accessibility
+
+- Icons are hidden from screen readers by default
+- Use `aria-label` when the icon conveys meaningful information
+- For decorative payment badges, keep the default hidden behavior
+- When used in buttons/links, the parent element should have the accessible label

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-icons-payment",
-  "version": "0.148.0",
+  "version": "0.148.2",
   "main": "./web/index.js",
   "types": "./web/index.d.ts",
   "exports": {