@xsolla/xui-icons-product 0.141.0 → 0.147.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-icons-product",
-  "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,270 +0,0 @@
-# Icons Product
-
-A cross-platform React product icons package containing Xsolla product and service symbols for use in dashboards, documentation, and marketing materials.
-
-## Installation
-
-```bash
-npm install @xsolla/xui-icons-product
-# or
-yarn add @xsolla/xui-icons-product
-```
-
-## Demo
-
-### All Product Icons
-
-```tsx
-import * as React from 'react';
-import {
-  PayStation,
-  Login,
-  InGameStore,
-  Launcher,
-} from '@xsolla/xui-icons-product';
-
-export default function AllProducts() {
-  return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <PayStation size={32} />
-      <Login size={32} />
-      <InGameStore size={32} />
-      <Launcher size={32} />
-    </div>
-  );
-}
-```
-
-### Different Sizes
-
-```tsx
-import * as React from 'react';
-import { PayStation } from '@xsolla/xui-icons-product';
-
-export default function Sizes() {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <PayStation size={24} />
-      <PayStation size={32} />
-      <PayStation size={48} />
-      <PayStation size={64} />
-    </div>
-  );
-}
-```
-
-### With Custom Color
-
-```tsx
-import * as React from 'react';
-import { Login, InGameStore } from '@xsolla/xui-icons-product';
-
-export default function CustomColor() {
-  return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <Login size={32} color="#6366F1" />
-      <InGameStore size={32} color="#10B981" />
-    </div>
-  );
-}
-```
-
-## Anatomy
-
-```jsx
-import { PayStation } from '@xsolla/xui-icons-product';
-
-<PayStation
-  size={24}                  // Size in pixels
-  color="#000"               // Icon color
-  className="product-icon"   // CSS class
-  style={{ margin: 4 }}      // Inline styles
-  aria-label="Pay Station"   // Accessible label
-/>
-```
-
-## Examples
-
-### Product Feature List
-
-```tsx
-import * as React from 'react';
-import {
-  PayStation,
-  Login,
-  InGameStore,
-  AntiFraud,
-  Subscriptions,
-} from '@xsolla/xui-icons-product';
-
-export default function FeatureList() {
-  const features = [
-    { icon: PayStation, name: 'Pay Station', desc: 'Payment processing' },
-    { icon: Login, name: 'Login', desc: 'User authentication' },
-    { icon: InGameStore, name: 'In-Game Store', desc: 'Virtual goods' },
-    { icon: AntiFraud, name: 'Anti-Fraud', desc: 'Payment protection' },
-    { icon: Subscriptions, name: 'Subscriptions', desc: 'Recurring payments' },
-  ];
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      {features.map(({ icon: Icon, name, desc }) => (
-        <div key={name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-          <Icon size={32} aria-hidden />
-          <div>
-            <strong>{name}</strong>
-            <p style={{ margin: 0, color: '#666' }}>{desc}</p>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
-### Product Dashboard Cards
-
-```tsx
-import * as React from 'react';
-import { PayStation, Login, InGameStore, Launcher } from '@xsolla/xui-icons-product';
-
-export default function DashboardCards() {
-  const products = [
-    { icon: PayStation, name: 'Pay Station', status: 'Active' },
-    { icon: Login, name: 'Login', status: 'Active' },
-    { icon: InGameStore, name: 'In-Game Store', status: 'Setup Required' },
-    { icon: Launcher, name: 'Launcher', status: 'Not Configured' },
-  ];
-
-  return (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
-      {products.map(({ icon: Icon, name, status }) => (
-        <div
-          key={name}
-          style={{
-            padding: 16,
-            border: '1px solid #e0e0e0',
-            borderRadius: 8,
-            display: 'flex',
-            alignItems: 'center',
-            gap: 12,
-          }}
-        >
-          <Icon size={40} />
-          <div>
-            <strong>{name}</strong>
-            <p style={{ margin: 0, fontSize: 12, color: '#666' }}>{status}</p>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-```
-
-### Navigation Menu
-
-```tsx
-import * as React from 'react';
-import {
-  PayStation,
-  InGameStore,
-  PlayerInventory,
-  Documentation,
-} from '@xsolla/xui-icons-product';
-
-export default function NavigationMenu() {
-  const [selected, setSelected] = React.useState('paystation');
-
-  const menuItems = [
-    { id: 'paystation', icon: PayStation, label: 'Pay Station' },
-    { id: 'store', icon: InGameStore, label: 'Store' },
-    { id: 'inventory', icon: PlayerInventory, label: 'Inventory' },
-    { id: 'docs', icon: Documentation, label: 'Documentation' },
-  ];
-
-  return (
-    <nav style={{ width: 240, padding: 8 }}>
-      {menuItems.map(({ id, icon: Icon, label }) => (
-        <button
-          key={id}
-          onClick={() => setSelected(id)}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 12,
-            width: '100%',
-            padding: '12px 16px',
-            border: 'none',
-            borderRadius: 8,
-            background: selected === id ? '#E3F2FD' : 'transparent',
-            cursor: 'pointer',
-            textAlign: 'left',
-          }}
-        >
-          <Icon size={20} color={selected === id ? '#1976D2' : '#666'} />
-          <span style={{ color: selected === id ? '#1976D2' : '#333' }}>{label}</span>
-        </button>
-      ))}
-    </nav>
-  );
-}
-```
-
-## API Reference
-
-### Product Icon Components
-
-Each product icon component accepts the same props:
-
-**ProductIconProps:**
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| size | `number` | `24` | Size in pixels. |
-| color | `string` | - | Icon color (uses original colors if not set). |
-| 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 | Product |
-| :-------- | :------ |
-| `Accelerator` | Xsolla Accelerator |
-| `AntiFraud` | Anti-Fraud protection |
-| `BuyButton` | Buy Button widget |
-| `Documentation` | Documentation portal |
-| `Funding` | Game funding |
-| `Gip` | Game Inventory Platform |
-| `InGameStore` | In-Game Store |
-| `Launcher` | Game Launcher |
-| `Login` | Login & authentication |
-| `PartnerNetwork` | Partner Network |
-| `PayStation` | Pay Station payments |
-| `PlayerInventory` | Player Inventory |
-| `Publisher` | Publisher Account |
-| `SiteBuilder` | Site Builder |
-| `Subscriptions` | Subscriptions |
-
-## Tree Shaking
-
-Import individual icons for optimal bundle size:
-
-```tsx
-// Good - only imports needed icons
-import { PayStation, Login } from '@xsolla/xui-icons-product';
-
-// Avoid - imports all icons
-import * as ProductIcons from '@xsolla/xui-icons-product';
-```
-
-## Accessibility
-
-- Icons are hidden from screen readers by default (`aria-hidden="true"`)
-- Use `aria-label` when the icon conveys meaningful information
-- When used in navigation or buttons, the parent element should have the accessible label
-- For decorative product badges, keep the default hidden behavior