@xsolla/xui-notification 0.99.0 → 0.101.0

package/README.md

@@ -1,40 +1,188 @@
-# @xsolla/xui-notification
+# Notification
 
-Inline and toast-style notification banner with tone variants and optional action.
+A cross-platform React notification component for displaying alerts, success messages, warnings, and errors. Supports both toast and inline display modes.
 
 ## Installation
 
 ```bash
+npm install @xsolla/xui-notification
+# or
 yarn add @xsolla/xui-notification
 ```
 
-## Usage
+## Demo
+
+### Basic Notification
+
+```tsx
+import * as React from 'react';
+import { Notification } from '@xsolla/xui-notification';
+
+export default function BasicNotification() {
+  return (
+    <Notification
+      title="Success"
+      message="Your changes have been saved."
+      tone="success"
+    />
+  );
+}
+```
+
+### Notification Tones
+
+```tsx
+import * as React from 'react';
+import { Notification } from '@xsolla/xui-notification';
+
+export default function NotificationTones() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Notification tone="neutral" title="Info" message="This is an informational message." />
+      <Notification tone="success" title="Success" message="Operation completed successfully." />
+      <Notification tone="warning" title="Warning" message="Please review before proceeding." />
+      <Notification tone="alert" title="Error" message="Something went wrong." />
+    </div>
+  );
+}
+```
+
+### Notification Types (Toast vs Inline)
+
+```tsx
+import * as React from 'react';
+import { Notification } from '@xsolla/xui-notification';
+
+export default function NotificationTypes() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Notification
+        type="toast"
+        tone="success"
+        title="Toast Notification"
+        message="This is a toast-style notification."
+      />
+      <Notification
+        type="inline"
+        tone="warning"
+        title="Inline Notification"
+        message="This is an inline-style notification."
+      />
+    </div>
+  );
+}
+```
+
+### Dismissible Notification
+
+```tsx
+import * as React from 'react';
+import { Notification } from '@xsolla/xui-notification';
+
+export default function DismissibleNotification() {
+  const [visible, setVisible] = React.useState(true);
+
+  if (!visible) return null;
+
+  return (
+    <Notification
+      title="Notification"
+      message="Click the X to dismiss this notification."
+      onClose={() => setVisible(false)}
+    />
+  );
+}
+```
+
+### Notification with Action
+
+```tsx
+import * as React from 'react';
+import { Notification } from '@xsolla/xui-notification';
+
+export default function ActionNotification() {
+  return (
+    <Notification
+      tone="alert"
+      title="Session Expiring"
+      message="Your session will expire in 5 minutes."
+      actionLabel="Extend Session"
+      onAction={() => console.log('Session extended')}
+      onClose={() => console.log('Dismissed')}
+    />
+  );
+}
+```
+
+### Hide Close Button
 
 ```tsx
+import * as React from 'react';
 import { Notification } from '@xsolla/xui-notification';
 
-const Example = () => (
-  <Notification
-    tone="success"
-    type="inline"
-    title="Changes saved"
-    message="Your profile has been updated."
-    onClose={() => console.log('closed')}
-  />
-);
+export default function PersistentNotification() {
+  return (
+    <Notification
+      tone="warning"
+      title="Important"
+      message="This notification cannot be dismissed."
+      showClose={false}
+    />
+  );
+}
 ```
 
-## Props
+## API Reference
 
 ### Notification
 
+**Notification Props:**
+
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `tone` | `"neutral" \| "success" \| "warning" \| "alert"` | `"neutral"` | Colour theme of the notification |
-| `type` | `"toast" \| "inline"` | `"toast"` | Layout style; `inline` is single-row, `toast` is stacked |
-| `title` | `string` | — | Bold heading text |
-| `message` | `string` | — | Secondary body text |
-| `actionLabel` | `string` | — | Label for the inline action link |
-| `onAction` | `() => void` | — | Called when the action link is pressed |
-| `onClose` | `() => void` | — | Called when the close button is pressed |
-| `showClose` | `boolean` | `true` | Whether to render the close button |
+| :--- | :--- | :------ | :---------- |
+| tone | `"neutral" \| "success" \| "warning" \| "alert"` | `"neutral"` | Semantic color tone of the notification. |
+| type | `"toast" \| "inline"` | `"toast"` | Display mode - toast for floating notifications, inline for embedded. |
+| title | `string` | - | Notification title text. |
+| message | `string` | - | Notification message/description text. |
+| actionLabel | `string` | - | Text for the action button (optional). |
+| onAction | `() => void` | - | Callback when action button is clicked. |
+| onClose | `() => void` | - | Callback when close button is clicked. |
+| showClose | `boolean` | `true` | Whether to show the close button. |
+
+### Tone Values
+
+| Tone | Use Case |
+| :--- | :------- |
+| `neutral` | General information, default state |
+| `success` | Positive outcomes, confirmations |
+| `warning` | Caution, requires attention |
+| `alert` | Errors, critical issues |
+
+### Type Values
+
+| Type | Description |
+| :--- | :---------- |
+| `toast` | Floating notification style, typically used for temporary messages |
+| `inline` | Embedded notification style, integrated into the page layout |
+
+## Theming
+
+```typescript
+// Tone-specific colors accessed via theme
+theme.colors.background.neutral.secondary  // Neutral background
+theme.colors.background.success.secondary  // Success background
+theme.colors.background.warning.secondary  // Warning background
+theme.colors.background.alert.secondary    // Alert/error background
+
+theme.colors.content.neutral.primary       // Neutral icon color
+theme.colors.content.success.primary       // Success icon color
+theme.colors.content.warning.primary       // Warning icon color
+theme.colors.content.alert.primary         // Alert icon color
+```
+
+## Accessibility
+
+- Uses semantic color tones for visual distinction
+- Close button is keyboard accessible
+- Icons are decorative and hidden from screen readers
+- Action buttons are focusable and clickable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-notification",
-  "version": "0.99.0",
+  "version": "0.101.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,9 +10,9 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.99.0",
-    "@xsolla/xui-icons": "0.99.0",
-    "@xsolla/xui-primitives-core": "0.99.0"
+    "@xsolla/xui-core": "0.101.0",
+    "@xsolla/xui-icons": "0.101.0",
+    "@xsolla/xui-primitives-core": "0.101.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",