@xsolla/xui-markdown 0.150.0 → 0.151.0

package/README.md

@@ -1,154 +1,103 @@
 # Markdown
 
-A React component that renders markdown content with consistent, theme-aware styling. Uses `react-markdown` under the hood.
+A React component that renders markdown content with theme-aware typography (web only — built on `react-markdown` and `styled-components`).
 
 ## Installation
 
 ```bash
 npm install @xsolla/xui-markdown
-# or
-yarn add @xsolla/xui-markdown
 ```
 
-## Demo
-
-### Basic Markdown
+## Imports
 
 ```tsx
-import * as React from 'react';
 import { Markdown } from '@xsolla/xui-markdown';
-
-export default function BasicMarkdown() {
-  const content = `
-# Hello World
-
-This is a paragraph with **bold** and *italic* text.
-
-- Item one
-- Item two
-- Item three
-  `;
-
-  return <Markdown>{content}</Markdown>;
-}
 ```
 
-### Headings and Paragraphs
+## Quick start
 
 ```tsx
 import * as React from 'react';
 import { Markdown } from '@xsolla/xui-markdown';
 
-export default function HeadingsDemo() {
-  const content = `
-# Heading 1
-## Heading 2
-### Heading 3
-#### Heading 4
-
-This is a regular paragraph with some text content.
-
-Another paragraph following the first one.
-  `;
-
-  return <Markdown>{content}</Markdown>;
+export default function QuickStart() {
+  return <Markdown>{`# Hello\n\nThis is **bold** text.`}</Markdown>;
 }
 ```
 
-### Code Blocks
-
-```tsx
-import * as React from 'react';
-import { Markdown } from '@xsolla/xui-markdown';
+## API Reference
 
-export default function CodeDemo() {
-  const content = `
-Inline code: \`const x = 1;\`
+### `<Markdown>` (web only)
 
-Code block:
-\`\`\`javascript
-function greet(name) {
-  return \`Hello, \${name}!\`;
-}
-\`\`\`
-  `;
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `string` | — | **Required.** Markdown source to render. |
+| `className` | `string` | — | CSS class for the container. |
 
-  return <Markdown>{content}</Markdown>;
-}
-```
+Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
 
-## Anatomy
+The component pulls heading and body fonts from the resolved theme (`theme.fonts.heading`, `theme.fonts.body`, falling back to `theme.fonts.primary`) and uses `theme.colors.content.primary`, `theme.colors.border.brand`, and `theme.colors.control.link.primary` for styling.
 
-```jsx
-import { Markdown } from '@xsolla/xui-markdown';
+### Supported syntax
 
-<Markdown
-  className="custom-markdown"  // CSS class
->
-  {markdownContent}
-</Markdown>
-```
+| Element | Syntax |
+| --- | --- |
+| Headings (h1–h4) | `# text` … `#### text` |
+| Bold | `**text**` |
+| Italic | `*text*` |
+| Link | `[text](https://example.com)` |
+| Image | `![alt](https://example.com/image.png)` |
+| Inline code | `` `code` `` |
+| Code block | ` ```language ` |
+| Blockquote | `> quote` |
+| Unordered list | `- item` |
+| Ordered list | `1. item` |
 
 ## Examples
 
-### Rich Content
+### Rich content
 
 ```tsx
 import * as React from 'react';
 import { Markdown } from '@xsolla/xui-markdown';
 
 export default function RichContent() {
-  const content = `
-# Product Documentation
-
-## Getting Started
+  const content = `# Product documentation
 
-Follow these steps to integrate our SDK:
+## Getting started
 
 1. Install the package
 2. Configure your API keys
-3. Initialize the SDK
-
-> **Note:** Make sure to keep your API keys secure and never commit them to version control.
+3. Initialise the SDK
 
-### Code Example
+> **Note:** keep keys out of source control.
 
 \`\`\`javascript
 import { SDK } from '@example/sdk';
-
-const client = new SDK({
-  apiKey: process.env.API_KEY,
-});
-
+const client = new SDK({ apiKey: process.env.API_KEY });
 await client.initialize();
 \`\`\`
 
-### Links and Images
-
-Visit our [documentation](https://docs.example.com) for more details.
-
-![Example diagram](https://example.com/diagram.png)
-  `;
+Visit our [documentation](https://docs.example.com).`;
 
   return <Markdown>{content}</Markdown>;
 }
 ```
 
-### Dynamic Content
+### Live preview
 
 ```tsx
 import * as React from 'react';
 import { Markdown } from '@xsolla/xui-markdown';
 
-export default function DynamicContent() {
+export default function LivePreview() {
   const [content, setContent] = React.useState('# Hello\n\nStart typing...');
-
   return (
     <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
       <textarea
         value={content}
         onChange={(e) => setContent(e.target.value)}
-        style={{ height: 300, fontFamily: 'monospace' }}
+        style={{ height: 240, fontFamily: 'monospace' }}
       />
       <div style={{ background: '#1a1a1a', padding: 16, borderRadius: 8 }}>
         <Markdown>{content}</Markdown>
@@ -158,106 +107,9 @@ export default function DynamicContent() {
 }
 ```
 
-### Article Display
-
-```tsx
-import * as React from 'react';
-import { Markdown } from '@xsolla/xui-markdown';
-
-export default function ArticleDisplay() {
-  const article = `
-# Understanding Game Monetization
-
-## Introduction
-
-Game monetization is a critical aspect of game development that determines how a game generates revenue.
-
-## Key Strategies
-
-### In-App Purchases
-
-In-app purchases (IAP) allow players to buy virtual goods:
-
-- Cosmetic items
-- Power-ups
-- Premium currency
-- Battle passes
-
-### Subscription Models
-
-Subscription models provide ongoing value:
-
-1. **Monthly subscriptions** - Regular content updates
-2. **Season passes** - Time-limited content access
-3. **Premium tiers** - Enhanced features
-
-> "The best monetization strategies provide value to players while generating sustainable revenue."
-
-## Conclusion
-
-Choose a monetization strategy that aligns with your game design and player expectations.
-  `;
-
-  return (
-    <article style={{ maxWidth: 800, margin: '0 auto' }}>
-      <Markdown>{article}</Markdown>
-    </article>
-  );
-}
-```
-
-## API Reference
-
-### Markdown
-
-**MarkdownProps:**
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| children | `string` | - | Markdown content to render. |
-| className | `string` | - | CSS class name for the container. |
-
-## Supported Markdown Syntax
-
-| Element | Syntax |
-| :------ | :----- |
-| Heading 1 | `# Heading` |
-| Heading 2 | `## Heading` |
-| Heading 3 | `### Heading` |
-| Heading 4 | `#### Heading` |
-| Bold | `**text**` |
-| Italic | `*text*` |
-| Link | `[text](url)` |
-| Image | `![alt](url)` |
-| Inline code | `` `code` `` |
-| Code block | ```` ```language ```` |
-| Blockquote | `> quote` |
-| Unordered list | `- item` |
-| Ordered list | `1. item` |
-
-## Typography Styles
-
-| Element | Font Size | Line Height | Weight |
-| :------ | :-------- | :---------- | :----- |
-| h1 | 40px | 48px | 700 |
-| h2 | 32px | 38px | 700 |
-| h3 | 28px | 34px | 700 |
-| h4 | 24px | 28px | 700 |
-| p | 16px | 22px | 400 |
-| li | 16px | 22px | 400 |
-
-## Theming
-
-The Markdown component automatically uses theme colors from `XUIProvider`:
-
-- Text color from `content.primary`
-- Link color from `control.link.primary`
-- Blockquote border from `border.brand`
-- Code background with subtle transparency
-
 ## Accessibility
 
-- Headings create a proper document outline
-- Links are styled with visible focus states
-- Images require alt text in markdown syntax
-- Code blocks are contained in `<pre>` elements for proper semantics
+- Headings produce a proper document outline.
+- Links inherit the theme's link colour and underline on hover/focus.
+- Provide alt text via standard markdown image syntax.
+- Code blocks use semantic `<pre><code>` for screen readers.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-markdown",
-  "version": "0.150.0",
+  "version": "0.151.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.150.0",
-    "@xsolla/xui-primitives-core": "0.150.0",
+    "@xsolla/xui-core": "0.151.0",
+    "@xsolla/xui-primitives-core": "0.151.0",
     "react-markdown": "^9.0.0"
   },
   "peerDependencies": {