@xsolla/xui-logos-xsolla 0.141.0 → 0.141.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-logos-xsolla",
-  "version": "0.141.0",
+  "version": "0.141.1",
   "main": "./web/index.js",
   "types": "./web/index.d.ts",
   "exports": {

package/README.md

@@ -1,255 +0,0 @@
-# Logos Xsolla
-
-A cross-platform React component for displaying the official Xsolla logo with support for full logo (icon + text), text-only, and icon-only variants in multiple color options.
-
-## Installation
-
-```bash
-npm install @xsolla/xui-logos-xsolla
-# or
-yarn add @xsolla/xui-logos-xsolla
-```
-
-## Demo
-
-### Full Logo
-
-```tsx
-import * as React from 'react';
-import { Xsolla } from '@xsolla/xui-logos-xsolla';
-
-export default function FullLogo() {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <Xsolla variant="full" color="brand" />
-      <Xsolla variant="full" color="black" />
-      <Xsolla variant="full" color="white" />
-    </div>
-  );
-}
-```
-
-### Text Only
-
-```tsx
-import * as React from 'react';
-import { Xsolla } from '@xsolla/xui-logos-xsolla';
-
-export default function TextOnly() {
-  return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <Xsolla variant="text" color="brand" />
-      <Xsolla variant="text" color="black" />
-      <Xsolla variant="text" color="white" />
-    </div>
-  );
-}
-```
-
-### Icon Only
-
-```tsx
-import * as React from 'react';
-import { Xsolla } from '@xsolla/xui-logos-xsolla';
-
-export default function IconOnly() {
-  return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <Xsolla variant="icon" color="brand" />
-      <Xsolla variant="icon" color="black" />
-      <Xsolla variant="icon" color="white" />
-    </div>
-  );
-}
-```
-
-### Different Sizes
-
-```tsx
-import * as React from 'react';
-import { Xsolla } from '@xsolla/xui-logos-xsolla';
-
-export default function Sizes() {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <Xsolla size="xs" />
-      <Xsolla size="sm" />
-      <Xsolla size="md" />
-      <Xsolla size={48} />
-    </div>
-  );
-}
-```
-
-## Anatomy
-
-```jsx
-import { Xsolla } from '@xsolla/xui-logos-xsolla';
-
-<Xsolla
-  variant="full"            // full, text, or icon
-  color="brand"             // brand, black, or white
-  size="sm"                  // xs, sm, md, or custom number
-  className="logo"          // CSS class
-  style={{ margin: 8 }}     // Inline styles
-  aria-label="Xsolla"       // Accessible label
-/>
-```
-
-## Examples
-
-### Header Logo
-
-```tsx
-import * as React from 'react';
-import { Xsolla } from '@xsolla/xui-logos-xsolla';
-
-export default function HeaderLogo() {
-  return (
-    <header style={{
-      display: 'flex',
-      alignItems: 'center',
-      padding: '16px 24px',
-      background: '#1a1a1a',
-    }}>
-      <a href="/" aria-label="Xsolla Home">
-        <Xsolla variant="full" color="brand" size="md" />
-      </a>
-    </header>
-  );
-}
-```
-
-### Footer Logo
-
-```tsx
-import * as React from 'react';
-import { Xsolla } from '@xsolla/xui-logos-xsolla';
-
-export default function FooterLogo() {
-  return (
-    <footer style={{
-      padding: 24,
-      background: '#f5f5f5',
-      textAlign: 'center',
-    }}>
-      <Xsolla variant="full" color="black" size="sm" />
-      <p style={{ marginTop: 8, fontSize: 12, color: '#666' }}>
-        Powered by Xsolla
-      </p>
-    </footer>
-  );
-}
-```
-
-### Favicon/App Icon
-
-```tsx
-import * as React from 'react';
-import { Xsolla } from '@xsolla/xui-logos-xsolla';
-
-export default function AppIcon() {
-  return (
-    <div style={{
-      width: 48,
-      height: 48,
-      background: '#1a1a1a',
-      borderRadius: 8,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }}>
-      <Xsolla variant="icon" color="brand" size="md" />
-    </div>
-  );
-}
-```
-
-### Responsive Logo
-
-```tsx
-import * as React from 'react';
-import { Xsolla } from '@xsolla/xui-logos-xsolla';
-
-export default function ResponsiveLogo() {
-  const [width, setWidth] = React.useState(window.innerWidth);
-
-  React.useEffect(() => {
-    const handleResize = () => setWidth(window.innerWidth);
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  const getVariant = () => {
-    if (width < 480) return 'icon';
-    if (width < 768) return 'text';
-    return 'full';
-  };
-
-  return (
-    <Xsolla
-      variant={getVariant()}
-      color="brand"
-      size="md"
-    />
-  );
-}
-```
-
-## API Reference
-
-### Xsolla
-
-**XsollaLogoProps:**
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| variant | `"full" \| "text" \| "icon"` | `"full"` | Logo variant: full (icon + text), text only, or icon only. |
-| color | `"brand" \| "black" \| "white"` | `"brand"` | Logo color. |
-| size | `"xs" \| "sm" \| "md" \| number` | `"sm"` | Size preset or custom height in pixels. |
-| className | `string` | - | CSS class name. |
-| style | `CSSProperties` | - | Inline styles. |
-| data-testid | `string` | - | Test ID (web). |
-| aria-label | `string` | - | Accessible label. |
-| aria-hidden | `boolean` | - | Hide from screen readers. |
-| accessibilityLabel | `string` | - | React Native accessibility label. |
-
-## Size Presets
-
-| Preset | Height |
-| :----- | :----- |
-| `xs` | 18px |
-| `sm` | 24px |
-| `md` | 32px |
-
-## Color Values
-
-| Color | Hex Code |
-| :---- | :------- |
-| `brand` | #80EAFF |
-| `black` | #000000 |
-| `white` | #FFFFFF |
-
-## Variants
-
-The component supports three variants:
-
-- **full** - Complete logo with icon and "XSOLLA" text (default)
-- **text** - Text-only "XSOLLA" without the icon (useful for tight spaces or text-heavy layouts)
-- **icon** - Icon only, the distinctive Xsolla "X" symbol (useful for small spaces like favicons or compact headers)
-
-## Brand Guidelines
-
-- Use the `brand` color (cyan) on dark backgrounds for best visibility
-- Use `black` on light backgrounds
-- Use `white` on colored or dark photo backgrounds
-- Use the `text` variant when you need the wordmark without the icon
-- Use the `icon` variant for compact spaces where the full logo won't fit
-- Maintain clear space around the logo equal to the height of the "X" icon
-- Don't stretch, distort, or apply effects to the logo
-
-## Accessibility
-
-- When used as a link, wrap in an anchor tag with `aria-label`
-- For decorative logos, use `aria-hidden="true"`
-- The logo has appropriate contrast ratios for each color variant