npm - @xsolla/xui-b2b-notification-panel - Versions diffs - 0.176.1 → 0.177.0 - Mend

@xsolla/xui-b2b-notification-panel 0.176.1 → 0.177.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md CHANGED Viewed

@@ -2,6 +2,11 @@
 A full-width horizontal notification bar for persistent inline feedback within B2B page layouts. Stays in place until dismissed and is designed to sit inline within a page or panel rather than as a floating overlay.
+Two layout variants are available via the `variant` prop:
+- **`notification`** (default) — a taller banner with an icon frame on the left and a stacked title/description.
+- **`announcement`** — a slim, single-line bar with an inline icon and the title/description on one row. Best for lightweight, page-level notices.
 For the base (non-B2B) variant, see [`@xsolla/xui-notification-panel`](./notification-panel.md).
 ## Installation
@@ -38,15 +43,16 @@ import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
+| `variant` | `"notification" \| "announcement"` | `"notification"` | Layout. `notification` is the taller banner with an icon frame; `announcement` is the slim, single-line bar. |
 | `type` | `"alert" \| "warning" \| "success" \| "neutral" \| "brand"` | `"neutral"` | Visual tone of the panel. Controls background, default icon, and `role`. |
 | `title` | `string` | — | Bold title text. |
 | `description` | `string` | — | Secondary description text. |
-| `showIcon` | `boolean` | `true` | Show or hide the icon frame on the left. |
+| `showIcon` | `boolean` | `true` | Show or hide the icon (the icon frame for `notification`, the inline icon for `announcement`). |
 | `icon` | `ReactNode` | — | Custom icon to replace the default type icon. |
-| `actionButton` | `ActionButtonElement` | — | A `Button` or `IconButton` element. `size="xs"` and `variant="secondary"` are injected via `cloneElement`; **`tone` is not** — set it yourself if needed. |
+| `actionButton` | `ActionButtonElement` | — | A `Button`, `IconButton`, or `FlexButton` element. The panel injects styling via `cloneElement` (see below). |
 | `showCloseButton` | `boolean` | `true` | Show or hide the dismiss (×) button. |
 | `onClose` | `() => void` | — | Called when the close button is pressed. |
-| `closeButtonAlign` | `"top" \| "center"` | `"top"` | Vertical alignment of the close button. Use `"center"` for single-line panels. |
+| `closeButtonAlign` | `"top" \| "center"` | `"top"` | Vertical alignment of the close button. Applies to the `notification` variant only (`announcement` is always centered). |
 | `testID` | `string` | — | Test ID for testing frameworks. |
 Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
@@ -54,10 +60,15 @@ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
 ### `ActionButtonElement`
 ```ts
-type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps>;
+type ActionButtonElement = React.ReactElement<
+  ButtonProps | IconButtonProps | FlexButtonProps
+>;
 ```
-The element passed to `actionButton`. Only `size` and `variant` are overridden when the panel renders it; everything else (including `tone`, `onPress`, `icon`, etc.) is forwarded as authored.
+The element passed to `actionButton`. The panel overrides a small set of props via `cloneElement` so the button matches the design; everything else (`onPress`, `icon`, `children`, etc.) is forwarded as authored. The injected props depend on `variant`:
+- **`notification`** — `size="xs"`, `variant="tertiary"`, `tone="mono"`. Pass a `Button`.
+- **`announcement`** — `size="xs"`, `variant="primary"`, `background={false}`. Pass a [`FlexButton`](./button.md) so it renders text-only with the designed subtle hover. (`FlexButton` has no `tone`; the Primary palette gives `content.primary` text.)
 ## Examples
@@ -77,7 +88,7 @@ import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
 ### With action button
-Pick a `tone` that complements the panel's `type` — the panel does not auto-tone the button.
+The panel styles the button to match the design (`size`, `variant`, and `tone`/`background` — see [`ActionButtonElement`](#actionbuttonelement)), so pass a plain `Button`.
 ```tsx
 import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
@@ -87,11 +98,25 @@ import { Button } from '@xsolla/xui-button';
   type="warning"
   title="Session expiring"
   description="Your session will expire in 5 minutes."
-  actionButton={
-    <Button tone="mono" onPress={() => extendSession()}>
-      Extend session
-    </Button>
-  }
+  actionButton={<Button onPress={() => extendSession()}>Extend session</Button>}
+  onClose={() => dismiss()}
+/>;
+```
+### Announcement variant
+A slim, single-line bar. Pass a [`FlexButton`](./button.md) as the action so it renders text-only.
+```tsx
+import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
+import { FlexButton } from '@xsolla/xui-button';
+<NotificationPanel
+  variant="announcement"
+  type="alert"
+  title="Alert notification"
+  description="Remove all product restrictions"
+  actionButton={<FlexButton onPress={() => openSettings()}>Button</FlexButton>}
   onClose={() => dismiss()}
 />;
 ```
@@ -155,6 +180,6 @@ import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
 ## Accessibility
 - `role="alert"` for `type="alert"`; `role="status"` for all other types.
-- `aria-label` on the root is `"<type> notification"` (e.g. `"warning notification"`).
+- `aria-label` on the root is `"<type> <variant>"` (e.g. `"warning notification"`, `"alert announcement"`).
 - The close button is an `IconButton` with `aria-label="Close notification"`.
 - The default type icons are decorative — pass `aria-hidden` on any custom `icon` you supply.

package/native/index.d.mts CHANGED Viewed

@@ -1,9 +1,17 @@
 import React from 'react';
 import { ThemeOverrideProps } from '@xsolla/xui-core';
-import { ButtonProps, IconButtonProps } from '@xsolla/xui-button';
+import { ButtonProps, IconButtonProps, FlexButtonProps } from '@xsolla/xui-button';
-type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps>;
+type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps | FlexButtonProps>;
 interface NotificationPanelProps extends ThemeOverrideProps {
+    /**
+     * Layout variant.
+     * - `notification` (default): full-height banner with an icon frame and a
+     *   stacked title/description.
+     * - `announcement`: slim, single-line bar with an inline icon and the
+     *   title/description on one row.
+     */
+    variant?: "notification" | "announcement";
     /** Visual variant/tone of the notification */
     type?: "alert" | "warning" | "success" | "neutral" | "brand";
     /** Title text (optional) */

package/native/index.d.ts CHANGED Viewed

@@ -1,9 +1,17 @@
 import React from 'react';
 import { ThemeOverrideProps } from '@xsolla/xui-core';
-import { ButtonProps, IconButtonProps } from '@xsolla/xui-button';
+import { ButtonProps, IconButtonProps, FlexButtonProps } from '@xsolla/xui-button';
-type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps>;
+type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps | FlexButtonProps>;
 interface NotificationPanelProps extends ThemeOverrideProps {
+    /**
+     * Layout variant.
+     * - `notification` (default): full-height banner with an icon frame and a
+     *   stacked title/description.
+     * - `announcement`: slim, single-line bar with an inline icon and the
+     *   title/description on one row.
+     */
+    variant?: "notification" | "announcement";
     /** Visual variant/tone of the notification */
     type?: "alert" | "warning" | "success" | "neutral" | "brand";
     /** Title text (optional) */

package/native/index.js CHANGED Viewed

@@ -208,6 +208,7 @@ var import_xui_typography = require("@xsolla/xui-typography");
 var import_xui_icons_base = require("@xsolla/xui-icons-base");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var NotificationPanel = ({
+  variant = "notification",
   type = "neutral",
   title,
   description,
@@ -226,6 +227,7 @@ var NotificationPanel = ({
   const typeConfig = {
     alert: {
       panelBg: theme.colors.overlay.alert,
+      announcementBg: theme.colors.background.alert.secondary,
       iconFrameBg: theme.colors.overlay.alert,
       iconColor: theme.colors.content.primary,
       buttonTone: "alert",
@@ -233,6 +235,7 @@ var NotificationPanel = ({
     },
     warning: {
       panelBg: theme.colors.overlay.warning,
+      announcementBg: theme.colors.background.warning.secondary,
       iconFrameBg: theme.colors.background.warning.primary,
       iconColor: theme.colors.content.primary,
       buttonTone: "mono",
@@ -240,6 +243,7 @@ var NotificationPanel = ({
     },
     success: {
       panelBg: theme.colors.overlay.success,
+      announcementBg: theme.colors.background.success.secondary,
       iconFrameBg: theme.colors.background.success.primary,
       iconColor: theme.colors.content.primary,
       buttonTone: "brandExtra",
@@ -247,6 +251,7 @@ var NotificationPanel = ({
     },
     neutral: {
       panelBg: theme.colors.overlay.mono,
+      announcementBg: theme.colors.background.neutral.secondary,
       iconFrameBg: theme.colors.overlay.mono,
       iconColor: theme.colors.content.primary,
       buttonTone: "mono",
@@ -254,6 +259,7 @@ var NotificationPanel = ({
     },
     brand: {
       panelBg: theme.colors.overlay.brand,
+      announcementBg: theme.colors.background.brand.secondary,
       iconFrameBg: theme.colors.overlay.brand,
       iconColor: theme.colors.content.primary,
       buttonTone: "brand",
@@ -262,6 +268,93 @@ var NotificationPanel = ({
   };
   const currentConfig = typeConfig[type];
   const IconComponent = currentConfig.IconComponent;
+  const ariaProps = {
+    role: type === "alert" ? "alert" : "status",
+    "aria-label": `${type} ${variant}`
+  };
+  if (variant === "announcement") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      Box,
+      {
+        backgroundColor: currentConfig.announcementBg,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: config.announcementPadding,
+        gap: config.announcementGap,
+        overflow: "hidden",
+        testID,
+        style: {
+          backdropFilter: `blur(${config.announcementBlurRadius}px)`
+        },
+        ...ariaProps,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            Box,
+            {
+              flex: 1,
+              minWidth: 0,
+              overflow: "hidden",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: config.announcementContentGap,
+              children: [
+                showIcon && (icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  IconComponent,
+                  {
+                    size: config.announcementIconSize,
+                    color: currentConfig.iconColor,
+                    variant: "solid"
+                  }
+                )),
+                title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_xui_typography.Typography,
+                  {
+                    variant: "bodyXsAccent",
+                    color: theme.colors.content.primary,
+                    children: title
+                  }
+                ),
+                description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_typography.Typography, { variant: "bodyXs", color: theme.colors.content.secondary, children: description })
+              ]
+            }
+          ),
+          (actionButton || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            Box,
+            {
+              flexShrink: 0,
+              flexDirection: "row",
+              alignItems: "center",
+              gap: config.announcementButtonsGap,
+              children: [
+                (0, import_react.isValidElement)(actionButton) && (0, import_react.cloneElement)(actionButton, {
+                  size: "xs",
+                  // Announcement uses a text-only FlexButton (Primary palette →
+                  // content.primary text, no fill), per the Figma "Flex Button"
+                  // node. hoverBackground is left at its default so the subtle
+                  // mono hover overlay from the design is preserved.
+                  variant: "primary",
+                  background: false
+                }),
+                showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_xui_button.IconButton,
+                  {
+                    variant: "tertiary",
+                    tone: "mono",
+                    size: "xs",
+                    onPress: onClose,
+                    "aria-label": "Close notification",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Remove, { size: config.announcementCloseIconSize }),
+                    hoverBackground: "none"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     Box,
     {
@@ -271,8 +364,7 @@ var NotificationPanel = ({
       alignItems: "stretch",
       overflow: "hidden",
       testID,
-      role: type === "alert" ? "alert" : "status",
-      "aria-label": `${type} notification`,
+      ...ariaProps,
       children: [
         showIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           Box,
@@ -328,7 +420,8 @@ var NotificationPanel = ({
                   children: [
                     (0, import_react.isValidElement)(actionButton) && (0, import_react.cloneElement)(actionButton, {
                       size: "xs",
-                      variant: "secondary"
+                      variant: "tertiary",
+                      tone: "mono"
                     }),
                     showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       import_xui_button.IconButton,

package/native/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/index.tsx","../../src/NotificationPanel.tsx","../../../../foundation/primitives-native/src/Box.tsx"],"sourcesContent":["export { NotificationPanel } from \"./NotificationPanel\";\nexport type {\n NotificationPanelProps,\n ActionButtonElement,\n} from \"./NotificationPanel\";\n","import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n IconButton,\n type ButtonProps,\n type IconButtonProps,\n} from \"@xsolla/xui-button\";\nimport { Typography } from \"@xsolla/xui-typography\";\nimport {\n ExclamationMarkSq,\n InfoSq,\n CheckCr,\n Remove,\n type BaseIconComponent,\n} from \"@xsolla/xui-icons-base\";\n\nexport type ActionButtonElement = React.ReactElement<\n ButtonProps \| IconButtonProps\n>;\n\nexport interface NotificationPanelProps extends ThemeOverrideProps {\n /** Visual variant/tone of the notification /\n type?: \"alert\" \| \"warning\" \| \"success\" \| \"neutral\" \| \"brand\";\n /* Title text (optional) /\n title?: string;\n /* Description text (optional) /\n description?: string;\n /* Show/hide the icon frame /\n showIcon?: boolean;\n /* Custom icon override (optional) /\n icon?: React.ReactNode;\n /\n Action button (optional - pass any Button/IconButton component).\n * The `tone`, `size`, and `variant` props will be automatically set.\n /\n actionButton?: React.ReactElement;\n /* Show/hide close button /\n showCloseButton?: boolean;\n /* Close button click handler /\n onClose?: () => void;\n /* Vertical alignment of the close button — \"top\" (default) or \"center\" /\n closeButtonAlign?: \"center\" \| \"top\";\n /* Test ID for testing frameworks /\n testID?: string;\n}\n\nexport const NotificationPanel: React.FC<NotificationPanelProps> = ({\n type = \"neutral\",\n title,\n description,\n showIcon = true,\n icon,\n actionButton,\n showCloseButton = true,\n onClose,\n closeButtonAlign = \"top\",\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const config = theme.sizing.notificationPanel();\n\n const typeConfig: Record<\n NonNullable<NotificationPanelProps[\"type\"]>,\n {\n panelBg: string;\n iconFrameBg: string;\n iconColor: string;\n buttonTone: \"brand\" \| \"brandExtra\" \| \"alert\" \| \"mono\";\n IconComponent: BaseIconComponent;\n }\n > = {\n alert: {\n panelBg: theme.colors.overlay.alert,\n iconFrameBg: theme.colors.overlay.alert,\n iconColor: theme.colors.content.primary,\n buttonTone: \"alert\",\n IconComponent: ExclamationMarkSq,\n },\n warning: {\n panelBg: theme.colors.overlay.warning,\n iconFrameBg: theme.colors.background.warning.primary,\n iconColor: theme.colors.content.primary,\n buttonTone: \"mono\",\n IconComponent: ExclamationMarkSq,\n },\n success: {\n panelBg: theme.colors.overlay.success,\n iconFrameBg: theme.colors.background.success.primary,\n iconColor: theme.colors.content.primary,\n buttonTone: \"brandExtra\",\n IconComponent: CheckCr,\n },\n neutral: {\n panelBg: theme.colors.overlay.mono,\n iconFrameBg: theme.colors.overlay.mono,\n iconColor: theme.colors.content.primary,\n buttonTone: \"mono\",\n IconComponent: InfoSq,\n },\n brand: {\n panelBg: theme.colors.overlay.brand,\n iconFrameBg: theme.colors.overlay.brand,\n iconColor: theme.colors.content.primary,\n buttonTone: \"brand\",\n IconComponent: InfoSq,\n },\n };\n\n const currentConfig = typeConfig[type];\n const IconComponent = currentConfig.IconComponent;\n\n return (\n <Box\n backgroundColor={currentConfig.panelBg}\n borderRadius={config.borderRadius}\n flexDirection=\"row\"\n alignItems=\"stretch\"\n overflow=\"hidden\"\n testID={testID}\n role={type === \"alert\" ? \"alert\" : \"status\"}\n aria-label={`${type} notification`}\n >\n {/ Icon Frame /}\n {showIcon && (\n <Box\n backgroundColor={currentConfig.iconFrameBg}\n width={config.iconFrameWidth}\n alignItems=\"center\"\n justifyContent=\"center\"\n style={{\n borderTopLeftRadius: config.borderRadius,\n borderBottomLeftRadius: config.borderRadius,\n }}\n >\n {icon \|\| (\n <IconComponent\n size={config.iconSize}\n color={currentConfig.iconColor}\n variant=\"solid\"\n />\n )}\n </Box>\n )}\n\n {/ Body /}\n <Box\n flex={1}\n flexDirection=\"row\"\n alignItems=\"center\"\n paddingHorizontal={config.bodyPaddingHorizontal}\n paddingVertical={config.bodyPaddingVertical}\n gap={config.contentGap}\n >\n {/ Text Content /}\n <Box flex={1} gap={config.textGap}>\n {title && (\n <Typography\n variant=\"bodyMdAccent\"\n color={theme.colors.content.primary}\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography variant=\"bodySm\" color={theme.colors.content.tertiary}>\n {description}\n </Typography>\n )}\n </Box>\n\n {/ Buttons */}\n {(actionButton \|\| showCloseButton) && (\n <Box\n flexDirection=\"row\"\n alignSelf={closeButtonAlign === \"top\" ? \"stretch\" : \"center\"}\n alignItems={closeButtonAlign === \"top\" ? \"flex-start\" : \"center\"}\n justifyContent=\"flex-start\"\n paddingVertical={closeButtonAlign === \"top\" ? 4 : 0}\n gap={config.buttonsGap}\n >\n {isValidElement(actionButton) &&\n cloneElement(actionButton as ActionButtonElement, {\n size: \"xs\",\n variant: \"secondary\",\n })}\n\n {showCloseButton && (\n <IconButton\n variant=\"tertiary\"\n tone=\"mono\"\n size=\"xs\"\n onPress={onClose}\n aria-label=\"Close notification\"\n icon={<Remove size={18} />}\n hoverBackground=\"none\"\n />\n )}\n </Box>\n )}\n </Box>\n </Box>\n );\n};\n\nNotificationPanel.displayName = \"NotificationPanel\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId \|\| testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n"],"mappings":"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","names":["import_jsx_runtime"]}
1	+ {"version":3,"sources":["../../src/index.tsx","../../src/NotificationPanel.tsx","../../../../foundation/primitives-native/src/Box.tsx"],"sourcesContent":["export { NotificationPanel } from \"./NotificationPanel\";\nexport type {\n NotificationPanelProps,\n ActionButtonElement,\n} from \"./NotificationPanel\";\n","import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n IconButton,\n type ButtonProps,\n type IconButtonProps,\n type FlexButtonProps,\n} from \"@xsolla/xui-button\";\nimport { Typography } from \"@xsolla/xui-typography\";\nimport {\n ExclamationMarkSq,\n InfoSq,\n CheckCr,\n Remove,\n type BaseIconComponent,\n} from \"@xsolla/xui-icons-base\";\n\nexport type ActionButtonElement = React.ReactElement<\n ButtonProps \| IconButtonProps \| FlexButtonProps\n>;\n\nexport interface NotificationPanelProps extends ThemeOverrideProps {\n /*\n Layout variant.\n * - `notification` (default): full-height banner with an icon frame and a\n * stacked title/description.\n * - `announcement`: slim, single-line bar with an inline icon and the\n * title/description on one row.\n /\n variant?: \"notification\" \| \"announcement\";\n /* Visual variant/tone of the notification /\n type?: \"alert\" \| \"warning\" \| \"success\" \| \"neutral\" \| \"brand\";\n /* Title text (optional) /\n title?: string;\n /* Description text (optional) /\n description?: string;\n /* Show/hide the icon frame /\n showIcon?: boolean;\n /* Custom icon override (optional) /\n icon?: React.ReactNode;\n /\n Action button (optional - pass any Button/IconButton component).\n * The `tone`, `size`, and `variant` props will be automatically set.\n /\n actionButton?: React.ReactElement;\n /* Show/hide close button /\n showCloseButton?: boolean;\n /* Close button click handler /\n onClose?: () => void;\n /* Vertical alignment of the close button — \"top\" (default) or \"center\" /\n closeButtonAlign?: \"center\" \| \"top\";\n /* Test ID for testing frameworks /\n testID?: string;\n}\n\nexport const NotificationPanel: React.FC<NotificationPanelProps> = ({\n variant = \"notification\",\n type = \"neutral\",\n title,\n description,\n showIcon = true,\n icon,\n actionButton,\n showCloseButton = true,\n onClose,\n closeButtonAlign = \"top\",\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const config = theme.sizing.notificationPanel();\n\n const typeConfig: Record<\n NonNullable<NotificationPanelProps[\"type\"]>,\n {\n panelBg: string;\n /* Background of the slim announcement bar (and inline icon area). /\n announcementBg: string;\n iconFrameBg: string;\n iconColor: string;\n buttonTone: \"brand\" \| \"brandExtra\" \| \"alert\" \| \"mono\";\n IconComponent: BaseIconComponent;\n }\n > = {\n alert: {\n panelBg: theme.colors.overlay.alert,\n announcementBg: theme.colors.background.alert.secondary,\n iconFrameBg: theme.colors.overlay.alert,\n iconColor: theme.colors.content.primary,\n buttonTone: \"alert\",\n IconComponent: ExclamationMarkSq,\n },\n warning: {\n panelBg: theme.colors.overlay.warning,\n announcementBg: theme.colors.background.warning.secondary,\n iconFrameBg: theme.colors.background.warning.primary,\n iconColor: theme.colors.content.primary,\n buttonTone: \"mono\",\n IconComponent: ExclamationMarkSq,\n },\n success: {\n panelBg: theme.colors.overlay.success,\n announcementBg: theme.colors.background.success.secondary,\n iconFrameBg: theme.colors.background.success.primary,\n iconColor: theme.colors.content.primary,\n buttonTone: \"brandExtra\",\n IconComponent: CheckCr,\n },\n neutral: {\n panelBg: theme.colors.overlay.mono,\n announcementBg: theme.colors.background.neutral.secondary,\n iconFrameBg: theme.colors.overlay.mono,\n iconColor: theme.colors.content.primary,\n buttonTone: \"mono\",\n IconComponent: InfoSq,\n },\n brand: {\n panelBg: theme.colors.overlay.brand,\n announcementBg: theme.colors.background.brand.secondary,\n iconFrameBg: theme.colors.overlay.brand,\n iconColor: theme.colors.content.primary,\n buttonTone: \"brand\",\n IconComponent: InfoSq,\n },\n };\n\n const currentConfig = typeConfig[type];\n const IconComponent = currentConfig.IconComponent;\n\n const ariaProps = {\n role: type === \"alert\" ? \"alert\" : \"status\",\n \"aria-label\": `${type} ${variant}`,\n } as const;\n\n if (variant === \"announcement\") {\n return (\n <Box\n backgroundColor={currentConfig.announcementBg}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n padding={config.announcementPadding}\n gap={config.announcementGap}\n overflow=\"hidden\"\n testID={testID}\n style={{\n backdropFilter: `blur(${config.announcementBlurRadius}px)`,\n }}\n {...ariaProps}\n >\n {/ Inline content: icon + title + description on a single row /}\n <Box\n flex={1}\n minWidth={0}\n overflow=\"hidden\"\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.announcementContentGap}\n >\n {showIcon &&\n (icon \|\| (\n <IconComponent\n size={config.announcementIconSize}\n color={currentConfig.iconColor}\n variant=\"solid\"\n />\n ))}\n {title && (\n <Typography\n variant=\"bodyXsAccent\"\n color={theme.colors.content.primary}\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography variant=\"bodyXs\" color={theme.colors.content.secondary}>\n {description}\n </Typography>\n )}\n </Box>\n\n {/ Buttons /}\n {(actionButton \|\| showCloseButton) && (\n <Box\n flexShrink={0}\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={config.announcementButtonsGap}\n >\n {isValidElement(actionButton) &&\n cloneElement(actionButton as ActionButtonElement, {\n size: \"xs\",\n // Announcement uses a text-only FlexButton (Primary palette →\n // content.primary text, no fill), per the Figma \"Flex Button\"\n // node. hoverBackground is left at its default so the subtle\n // mono hover overlay from the design is preserved.\n variant: \"primary\",\n background: false,\n })}\n\n {showCloseButton && (\n <IconButton\n variant=\"tertiary\"\n tone=\"mono\"\n size=\"xs\"\n onPress={onClose}\n aria-label=\"Close notification\"\n icon={<Remove size={config.announcementCloseIconSize} />}\n hoverBackground=\"none\"\n />\n )}\n </Box>\n )}\n </Box>\n );\n }\n\n return (\n <Box\n backgroundColor={currentConfig.panelBg}\n borderRadius={config.borderRadius}\n flexDirection=\"row\"\n alignItems=\"stretch\"\n overflow=\"hidden\"\n testID={testID}\n {...ariaProps}\n >\n {/ Icon Frame /}\n {showIcon && (\n <Box\n backgroundColor={currentConfig.iconFrameBg}\n width={config.iconFrameWidth}\n alignItems=\"center\"\n justifyContent=\"center\"\n style={{\n borderTopLeftRadius: config.borderRadius,\n borderBottomLeftRadius: config.borderRadius,\n }}\n >\n {icon \|\| (\n <IconComponent\n size={config.iconSize}\n color={currentConfig.iconColor}\n variant=\"solid\"\n />\n )}\n </Box>\n )}\n\n {/ Body /}\n <Box\n flex={1}\n flexDirection=\"row\"\n alignItems=\"center\"\n paddingHorizontal={config.bodyPaddingHorizontal}\n paddingVertical={config.bodyPaddingVertical}\n gap={config.contentGap}\n >\n {/ Text Content /}\n <Box flex={1} gap={config.textGap}>\n {title && (\n <Typography\n variant=\"bodyMdAccent\"\n color={theme.colors.content.primary}\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography variant=\"bodySm\" color={theme.colors.content.tertiary}>\n {description}\n </Typography>\n )}\n </Box>\n\n {/ Buttons */}\n {(actionButton \|\| showCloseButton) && (\n <Box\n flexDirection=\"row\"\n alignSelf={closeButtonAlign === \"top\" ? \"stretch\" : \"center\"}\n alignItems={closeButtonAlign === \"top\" ? \"flex-start\" : \"center\"}\n justifyContent=\"flex-start\"\n paddingVertical={closeButtonAlign === \"top\" ? 4 : 0}\n gap={config.buttonsGap}\n >\n {isValidElement(actionButton) &&\n cloneElement(actionButton as ActionButtonElement, {\n size: \"xs\",\n variant: \"tertiary\",\n tone: \"mono\",\n })}\n\n {showCloseButton && (\n <IconButton\n variant=\"tertiary\"\n tone=\"mono\"\n size=\"xs\"\n onPress={onClose}\n aria-label=\"Close notification\"\n icon={<Remove size={18} />}\n hoverBackground=\"none\"\n />\n )}\n </Box>\n )}\n </Box>\n </Box>\n );\n};\n\nNotificationPanel.displayName = \"NotificationPanel\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId \|\| testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/native/index.mjs CHANGED Viewed

@@ -193,6 +193,7 @@ import {
 } from "@xsolla/xui-icons-base";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var NotificationPanel = ({
+  variant = "notification",
   type = "neutral",
   title,
   description,
@@ -211,6 +212,7 @@ var NotificationPanel = ({
   const typeConfig = {
     alert: {
       panelBg: theme.colors.overlay.alert,
+      announcementBg: theme.colors.background.alert.secondary,
       iconFrameBg: theme.colors.overlay.alert,
       iconColor: theme.colors.content.primary,
       buttonTone: "alert",
@@ -218,6 +220,7 @@ var NotificationPanel = ({
     },
     warning: {
       panelBg: theme.colors.overlay.warning,
+      announcementBg: theme.colors.background.warning.secondary,
       iconFrameBg: theme.colors.background.warning.primary,
       iconColor: theme.colors.content.primary,
       buttonTone: "mono",
@@ -225,6 +228,7 @@ var NotificationPanel = ({
     },
     success: {
       panelBg: theme.colors.overlay.success,
+      announcementBg: theme.colors.background.success.secondary,
       iconFrameBg: theme.colors.background.success.primary,
       iconColor: theme.colors.content.primary,
       buttonTone: "brandExtra",
@@ -232,6 +236,7 @@ var NotificationPanel = ({
     },
     neutral: {
       panelBg: theme.colors.overlay.mono,
+      announcementBg: theme.colors.background.neutral.secondary,
       iconFrameBg: theme.colors.overlay.mono,
       iconColor: theme.colors.content.primary,
       buttonTone: "mono",
@@ -239,6 +244,7 @@ var NotificationPanel = ({
     },
     brand: {
       panelBg: theme.colors.overlay.brand,
+      announcementBg: theme.colors.background.brand.secondary,
       iconFrameBg: theme.colors.overlay.brand,
       iconColor: theme.colors.content.primary,
       buttonTone: "brand",
@@ -247,6 +253,93 @@ var NotificationPanel = ({
   };
   const currentConfig = typeConfig[type];
   const IconComponent = currentConfig.IconComponent;
+  const ariaProps = {
+    role: type === "alert" ? "alert" : "status",
+    "aria-label": `${type} ${variant}`
+  };
+  if (variant === "announcement") {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        backgroundColor: currentConfig.announcementBg,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: config.announcementPadding,
+        gap: config.announcementGap,
+        overflow: "hidden",
+        testID,
+        style: {
+          backdropFilter: `blur(${config.announcementBlurRadius}px)`
+        },
+        ...ariaProps,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              flex: 1,
+              minWidth: 0,
+              overflow: "hidden",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: config.announcementContentGap,
+              children: [
+                showIcon && (icon || /* @__PURE__ */ jsx2(
+                  IconComponent,
+                  {
+                    size: config.announcementIconSize,
+                    color: currentConfig.iconColor,
+                    variant: "solid"
+                  }
+                )),
+                title && /* @__PURE__ */ jsx2(
+                  Typography,
+                  {
+                    variant: "bodyXsAccent",
+                    color: theme.colors.content.primary,
+                    children: title
+                  }
+                ),
+                description && /* @__PURE__ */ jsx2(Typography, { variant: "bodyXs", color: theme.colors.content.secondary, children: description })
+              ]
+            }
+          ),
+          (actionButton || showCloseButton) && /* @__PURE__ */ jsxs(
+            Box,
+            {
+              flexShrink: 0,
+              flexDirection: "row",
+              alignItems: "center",
+              gap: config.announcementButtonsGap,
+              children: [
+                isValidElement(actionButton) && cloneElement(actionButton, {
+                  size: "xs",
+                  // Announcement uses a text-only FlexButton (Primary palette →
+                  // content.primary text, no fill), per the Figma "Flex Button"
+                  // node. hoverBackground is left at its default so the subtle
+                  // mono hover overlay from the design is preserved.
+                  variant: "primary",
+                  background: false
+                }),
+                showCloseButton && /* @__PURE__ */ jsx2(
+                  IconButton,
+                  {
+                    variant: "tertiary",
+                    tone: "mono",
+                    size: "xs",
+                    onPress: onClose,
+                    "aria-label": "Close notification",
+                    icon: /* @__PURE__ */ jsx2(Remove, { size: config.announcementCloseIconSize }),
+                    hoverBackground: "none"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -256,8 +349,7 @@ var NotificationPanel = ({
       alignItems: "stretch",
       overflow: "hidden",
       testID,
-      role: type === "alert" ? "alert" : "status",
-      "aria-label": `${type} notification`,
+      ...ariaProps,
       children: [
         showIcon && /* @__PURE__ */ jsx2(
           Box,
@@ -313,7 +405,8 @@ var NotificationPanel = ({
                   children: [
                     isValidElement(actionButton) && cloneElement(actionButton, {
                       size: "xs",
-                      variant: "secondary"
+                      variant: "tertiary",
+                      tone: "mono"
                     }),
                     showCloseButton && /* @__PURE__ */ jsx2(
                       IconButton,