@xsolla/xui-icons-currency 0.141.0 → 0.147.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-icons-currency",
-  "version": "0.141.0",
+  "version": "0.147.1",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",

package/README.md

@@ -1,253 +0,0 @@
-# Icons Currency
-
-A cross-platform React virtual currency icons package containing Xsolla game currency symbols. Each icon supports colored and monochrome variants.
-
-## Installation
-
-```bash
-npm install @xsolla/xui-icons-currency
-# or
-yarn add @xsolla/xui-icons-currency
-```
-
-## Demo
-
-### All Currency Icons
-
-```tsx
-import * as React from 'react';
-import { PlayTime, XsollaGold, XsollaPoint, XsollaTicket } from '@xsolla/xui-icons-currency';
-
-export default function AllCurrencies() {
-  return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <PlayTime size={32} />
-      <XsollaGold size={32} />
-      <XsollaPoint size={32} />
-      <XsollaTicket size={32} />
-    </div>
-  );
-}
-```
-
-### Colored vs Monochrome
-
-```tsx
-import * as React from 'react';
-import { XsollaGold } from '@xsolla/xui-icons-currency';
-
-export default function Variants() {
-  return (
-    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
-      <div>
-        <p>Colored:</p>
-        <XsollaGold size={32} variant="colored" />
-      </div>
-      <div>
-        <p>Mono:</p>
-        <XsollaGold size={32} variant="mono" />
-      </div>
-      <div>
-        <p>Custom color:</p>
-        <XsollaGold size={32} variant="mono" color="#FFD700" />
-      </div>
-    </div>
-  );
-}
-```
-
-### Different Sizes
-
-```tsx
-import * as React from 'react';
-import { XsollaPoint } from '@xsolla/xui-icons-currency';
-
-export default function Sizes() {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <XsollaPoint size={16} />
-      <XsollaPoint size={24} />
-      <XsollaPoint size={32} />
-      <XsollaPoint size={48} />
-    </div>
-  );
-}
-```
-
-## Anatomy
-
-```jsx
-import { XsollaGold } from '@xsolla/xui-icons-currency';
-
-<XsollaGold
-  size={24}                  // Size in pixels
-  variant="colored"          // colored or mono
-  color="currentColor"       // Color (mono variant only)
-  className="currency-icon"  // CSS class
-  style={{ margin: 4 }}      // Inline styles
-  aria-label="Gold"          // Accessible label
-/>
-```
-
-## Examples
-
-### Currency Balance Display
-
-```tsx
-import * as React from 'react';
-import { XsollaGold, XsollaPoint, XsollaTicket } from '@xsolla/xui-icons-currency';
-
-export default function BalanceDisplay() {
-  const balances = [
-    { icon: XsollaGold, amount: 1250, label: 'Gold' },
-    { icon: XsollaPoint, amount: 500, label: 'Points' },
-    { icon: XsollaTicket, amount: 3, label: 'Tickets' },
-  ];
-
-  return (
-    <div style={{ display: 'flex', gap: 24 }}>
-      {balances.map(({ icon: Icon, amount, label }) => (
-        <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <Icon size={24} aria-hidden />
-          <span>{amount.toLocaleString()}</span>
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
-### Price Tag
-
-```tsx
-import * as React from 'react';
-import { XsollaGold } from '@xsolla/xui-icons-currency';
-
-export default function PriceTag() {
-  return (
-    <div style={{
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: 4,
-      padding: '4px 12px',
-      background: '#FFF8E1',
-      borderRadius: 16,
-    }}>
-      <XsollaGold size={20} />
-      <span style={{ fontWeight: 600 }}>500</span>
-    </div>
-  );
-}
-```
-
-### Shop Item Card
-
-```tsx
-import * as React from 'react';
-import { XsollaGold } from '@xsolla/xui-icons-currency';
-import { Button } from '@xsolla/xui-button';
-
-export default function ShopItem() {
-  return (
-    <div style={{
-      padding: 16,
-      border: '1px solid #e0e0e0',
-      borderRadius: 8,
-      width: 200,
-    }}>
-      <img
-        src="https://example.com/item.png"
-        alt="Sword of Fire"
-        style={{ width: '100%', height: 120, objectFit: 'cover' }}
-      />
-      <h3 style={{ margin: '12px 0 8px' }}>Sword of Fire</h3>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 12 }}>
-        <XsollaGold size={20} />
-        <span style={{ fontWeight: 600 }}>1,500</span>
-      </div>
-      <Button size="sm" fullWidth>Buy Now</Button>
-    </div>
-  );
-}
-```
-
-### Reward Notification
-
-```tsx
-import * as React from 'react';
-import { XsollaGold, XsollaTicket } from '@xsolla/xui-icons-currency';
-
-export default function RewardNotification() {
-  return (
-    <div style={{
-      display: 'flex',
-      alignItems: 'center',
-      gap: 16,
-      padding: 16,
-      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-      borderRadius: 12,
-      color: '#fff',
-    }}>
-      <div style={{ fontSize: 24 }}>Congratulations!</div>
-      <div style={{ display: 'flex', gap: 12 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-          <XsollaGold size={24} />
-          <span>+100</span>
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-          <XsollaTicket size={24} />
-          <span>+1</span>
-        </div>
-      </div>
-    </div>
-  );
-}
-```
-
-## API Reference
-
-### Currency Icon Components
-
-Each currency icon component accepts the same props:
-
-**CurrencyIconProps:**
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| size | `number` | `24` | Size in pixels. |
-| variant | `"colored" \| "mono"` | `"colored"` | Icon style variant. |
-| color | `string` | `"currentColor"` | Icon color (mono variant only). |
-| 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 | Description |
-| :-------- | :---------- |
-| `PlayTime` | Time-based game currency |
-| `XsollaGold` | Gold coin currency |
-| `XsollaPoint` | Points/credits currency |
-| `XsollaTicket` | Ticket/voucher currency |
-
-## Tree Shaking
-
-Import individual icons for optimal bundle size:
-
-```tsx
-// Good - only imports needed icons
-import { XsollaGold, XsollaPoint } from '@xsolla/xui-icons-currency';
-
-// Avoid - imports all icons
-import * as CurrencyIcons from '@xsolla/xui-icons-currency';
-```
-
-## Accessibility
-
-- Icons are hidden from screen readers by default (`aria-hidden="true"`)
-- Use `aria-label` when the currency icon conveys meaningful information
-- When displaying amounts, ensure the currency type is communicated to screen readers
-- Consider adding visually hidden text for accessibility: "1,500 Gold coins"