@xsolla/xui-b2b-notification-panel 0.147.1

package/native/index.mjs

@@ -0,0 +1,344 @@
+// src/NotificationPanel.tsx
+import { cloneElement, isValidElement } from "react";
+
+// ../../foundation/primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "react/jsx-runtime";
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// src/NotificationPanel.tsx
+import { useResolvedTheme } from "@xsolla/xui-core";
+import {
+  IconButton
+} from "@xsolla/xui-button";
+import { Typography } from "@xsolla/xui-typography";
+import {
+  ExclamationMarkSq,
+  InfoSq,
+  CheckCr,
+  Remove
+} from "@xsolla/xui-icons-base";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var NotificationPanel = ({
+  type = "neutral",
+  title,
+  description,
+  showIcon = true,
+  icon,
+  actionButton,
+  showCloseButton = true,
+  onClose,
+  closeButtonAlign = "top",
+  testID,
+  themeMode,
+  themeProductContext
+}) => {
+  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+  const config = theme.sizing.notificationPanel();
+  const typeConfig = {
+    alert: {
+      panelBg: theme.colors.overlay.alert,
+      iconFrameBg: theme.colors.overlay.alert,
+      iconColor: theme.colors.content.primary,
+      buttonTone: "alert",
+      IconComponent: ExclamationMarkSq
+    },
+    warning: {
+      panelBg: theme.colors.overlay.warning,
+      iconFrameBg: theme.colors.background.warning.primary,
+      iconColor: theme.colors.content.primary,
+      buttonTone: "mono",
+      IconComponent: ExclamationMarkSq
+    },
+    success: {
+      panelBg: theme.colors.overlay.success,
+      iconFrameBg: theme.colors.background.success.primary,
+      iconColor: theme.colors.content.primary,
+      buttonTone: "brandExtra",
+      IconComponent: CheckCr
+    },
+    neutral: {
+      panelBg: theme.colors.overlay.mono,
+      iconFrameBg: theme.colors.overlay.mono,
+      iconColor: theme.colors.content.primary,
+      buttonTone: "mono",
+      IconComponent: InfoSq
+    },
+    brand: {
+      panelBg: theme.colors.overlay.brand,
+      iconFrameBg: theme.colors.overlay.brand,
+      iconColor: theme.colors.content.primary,
+      buttonTone: "brand",
+      IconComponent: InfoSq
+    }
+  };
+  const currentConfig = typeConfig[type];
+  const IconComponent = currentConfig.IconComponent;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      backgroundColor: currentConfig.panelBg,
+      borderRadius: config.borderRadius,
+      flexDirection: "row",
+      alignItems: "stretch",
+      overflow: "hidden",
+      testID,
+      role: type === "alert" ? "alert" : "status",
+      "aria-label": `${type} notification`,
+      children: [
+        showIcon && /* @__PURE__ */ jsx2(
+          Box,
+          {
+            backgroundColor: currentConfig.iconFrameBg,
+            width: config.iconFrameWidth,
+            alignItems: "center",
+            justifyContent: "center",
+            style: {
+              borderTopLeftRadius: config.borderRadius,
+              borderBottomLeftRadius: config.borderRadius
+            },
+            children: icon || /* @__PURE__ */ jsx2(
+              IconComponent,
+              {
+                size: config.iconSize,
+                color: currentConfig.iconColor,
+                variant: "solid"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: config.bodyPaddingHorizontal,
+            paddingVertical: config.bodyPaddingVertical,
+            gap: config.contentGap,
+            children: [
+              /* @__PURE__ */ jsxs(Box, { flex: 1, gap: config.textGap, children: [
+                title && /* @__PURE__ */ jsx2(
+                  Typography,
+                  {
+                    variant: "bodyMdAccent",
+                    color: theme.colors.content.primary,
+                    children: title
+                  }
+                ),
+                description && /* @__PURE__ */ jsx2(Typography, { variant: "bodySm", color: theme.colors.content.tertiary, children: description })
+              ] }),
+              (actionButton || showCloseButton) && /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  flexDirection: "row",
+                  alignSelf: closeButtonAlign === "top" ? "stretch" : "center",
+                  alignItems: closeButtonAlign === "top" ? "flex-start" : "center",
+                  justifyContent: "flex-start",
+                  paddingVertical: closeButtonAlign === "top" ? 4 : 0,
+                  gap: config.buttonsGap,
+                  children: [
+                    isValidElement(actionButton) && cloneElement(actionButton, {
+                      size: "xs",
+                      variant: "secondary"
+                    }),
+                    showCloseButton && /* @__PURE__ */ jsx2(
+                      IconButton,
+                      {
+                        variant: "tertiary",
+                        tone: "mono",
+                        size: "xs",
+                        onPress: onClose,
+                        "aria-label": "Close notification",
+                        icon: /* @__PURE__ */ jsx2(Remove, { size: 18 }),
+                        hoverBackground: "none"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+NotificationPanel.displayName = "NotificationPanel";
+export {
+  NotificationPanel
+};
+//# sourceMappingURL=index.mjs.map

package/native/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/NotificationPanel.tsx","../../../../foundation/primitives-native/src/Box.tsx"],"sourcesContent":["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":";AAAA,SAAgB,cAAc,sBAAsB;;;ACCpD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AA2ID;AAxIC,IAAM,MAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,CAAC,aAAkC;AAAA,IAC3D,iBACE,WAAW,YAAY,kBACnB,WAAW,kBACX;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAI;AAAA,EACN;AAEA,QAAM,cAAc,cAAc;AAIlC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAGJ,MAAI,OAAO,SAAS,KAAK;AACvB,UAAM,aAAyB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,KAAK,IAAI;AAAA,QACnB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAW;AAAA,QACV,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,CAAC,EAAE,QAAQ,MAAM,kBAAkB,OAAO;AAAA,QACjD,QAAQ;AAAA,QACP,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,kBAAkB;AAAA,MACzB,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;AD7LA,SAAS,wBAAiD;AAC1D;AAAA,EACE;AAAA,OAGK;AACP,SAAS,kBAAkB;AAC3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA2HK,gBAAAA,MAmBJ,YAnBI;AA3FL,IAAM,oBAAsD,CAAC;AAAA,EAClE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,QAAM,SAAS,MAAM,OAAO,kBAAkB;AAE9C,QAAM,aASF;AAAA,IACF,OAAO;AAAA,MACL,SAAS,MAAM,OAAO,QAAQ;AAAA,MAC9B,aAAa,MAAM,OAAO,QAAQ;AAAA,MAClC,WAAW,MAAM,OAAO,QAAQ;AAAA,MAChC,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,IACA,SAAS;AAAA,MACP,SAAS,MAAM,OAAO,QAAQ;AAAA,MAC9B,aAAa,MAAM,OAAO,WAAW,QAAQ;AAAA,MAC7C,WAAW,MAAM,OAAO,QAAQ;AAAA,MAChC,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,IACA,SAAS;AAAA,MACP,SAAS,MAAM,OAAO,QAAQ;AAAA,MAC9B,aAAa,MAAM,OAAO,WAAW,QAAQ;AAAA,MAC7C,WAAW,MAAM,OAAO,QAAQ;AAAA,MAChC,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,IACA,SAAS;AAAA,MACP,SAAS,MAAM,OAAO,QAAQ;AAAA,MAC9B,aAAa,MAAM,OAAO,QAAQ;AAAA,MAClC,WAAW,MAAM,OAAO,QAAQ;AAAA,MAChC,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,IACA,OAAO;AAAA,MACL,SAAS,MAAM,OAAO,QAAQ;AAAA,MAC9B,aAAa,MAAM,OAAO,QAAQ;AAAA,MAClC,WAAW,MAAM,OAAO,QAAQ;AAAA,MAChC,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,gBAAgB,WAAW,IAAI;AACrC,QAAM,gBAAgB,cAAc;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB,cAAc;AAAA,MAC/B,cAAc,OAAO;AAAA,MACrB,eAAc;AAAA,MACd,YAAW;AAAA,MACX,UAAS;AAAA,MACT;AAAA,MACA,MAAM,SAAS,UAAU,UAAU;AAAA,MACnC,cAAY,GAAG,IAAI;AAAA,MAGlB;AAAA,oBACC,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,iBAAiB,cAAc;AAAA,YAC/B,OAAO,OAAO;AAAA,YACd,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,OAAO;AAAA,cACL,qBAAqB,OAAO;AAAA,cAC5B,wBAAwB,OAAO;AAAA,YACjC;AAAA,YAEC,kBACC,gBAAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM,OAAO;AAAA,gBACb,OAAO,cAAc;AAAA,gBACrB,SAAQ;AAAA;AAAA,YACV;AAAA;AAAA,QAEJ;AAAA,QAIF;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,eAAc;AAAA,YACd,YAAW;AAAA,YACX,mBAAmB,OAAO;AAAA,YAC1B,iBAAiB,OAAO;AAAA,YACxB,KAAK,OAAO;AAAA,YAGZ;AAAA,mCAAC,OAAI,MAAM,GAAG,KAAK,OAAO,SACvB;AAAA,yBACC,gBAAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,MAAM,OAAO,QAAQ;AAAA,oBAE3B;AAAA;AAAA,gBACH;AAAA,gBAED,eACC,gBAAAA,KAAC,cAAW,SAAQ,UAAS,OAAO,MAAM,OAAO,QAAQ,UACtD,uBACH;AAAA,iBAEJ;AAAA,eAGE,gBAAgB,oBAChB;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAc;AAAA,kBACd,WAAW,qBAAqB,QAAQ,YAAY;AAAA,kBACpD,YAAY,qBAAqB,QAAQ,eAAe;AAAA,kBACxD,gBAAe;AAAA,kBACf,iBAAiB,qBAAqB,QAAQ,IAAI;AAAA,kBAClD,KAAK,OAAO;AAAA,kBAEX;AAAA,mCAAe,YAAY,KAC1B,aAAa,cAAqC;AAAA,sBAChD,MAAM;AAAA,sBACN,SAAS;AAAA,oBACX,CAAC;AAAA,oBAEF,mBACC,gBAAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,SAAQ;AAAA,wBACR,MAAK;AAAA,wBACL,MAAK;AAAA,wBACL,SAAS;AAAA,wBACT,cAAW;AAAA,wBACX,MAAM,gBAAAA,KAAC,UAAO,MAAM,IAAI;AAAA,wBACxB,iBAAgB;AAAA;AAAA,oBAClB;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,cAAc;","names":["jsx"]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@xsolla/xui-b2b-notification-panel",
+  "version": "0.147.1",
+  "main": "./web/index.js",
+  "module": "./web/index.mjs",
+  "types": "./web/index.d.ts",
+  "scripts": {
+    "build": "yarn build:web && yarn build:native",
+    "build:web": "PLATFORM=web tsup",
+    "build:native": "PLATFORM=native tsup",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@xsolla/xui-button": "0.147.1",
+    "@xsolla/xui-core": "0.147.1",
+    "@xsolla/xui-icons-base": "0.147.1",
+    "@xsolla/xui-primitives-core": "0.147.1",
+    "@xsolla/xui-typography": "0.147.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16",
+    "styled-components": ">=4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.1.2",
+    "@vitest/coverage-v8": "^4.0.18",
+    "jsdom": "^24.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "vitest": "^4.0.18"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "react-native": "./native/index.js",
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./native/index.d.ts",
+        "import": "./native/index.mjs",
+        "require": "./native/index.js"
+      },
+      "import": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.mjs"
+      },
+      "require": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.js"
+      },
+      "default": {
+        "types": "./web/index.d.ts",
+        "default": "./web/index.js"
+      }
+    }
+  }
+}

package/web/index.d.mts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+import { ButtonProps, IconButtonProps } from '@xsolla/xui-button';
+
+type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps>;
+interface NotificationPanelProps extends ThemeOverrideProps {
+    /** Visual variant/tone of the notification */
+    type?: "alert" | "warning" | "success" | "neutral" | "brand";
+    /** Title text (optional) */
+    title?: string;
+    /** Description text (optional) */
+    description?: string;
+    /** Show/hide the icon frame */
+    showIcon?: boolean;
+    /** Custom icon override (optional) */
+    icon?: React.ReactNode;
+    /**
+     * Action button (optional - pass any Button/IconButton component).
+     * The `tone`, `size`, and `variant` props will be automatically set.
+     */
+    actionButton?: React.ReactElement;
+    /** Show/hide close button */
+    showCloseButton?: boolean;
+    /** Close button click handler */
+    onClose?: () => void;
+    /** Vertical alignment of the close button — "top" (default) or "center" */
+    closeButtonAlign?: "center" | "top";
+    /** Test ID for testing frameworks */
+    testID?: string;
+}
+declare const NotificationPanel: React.FC<NotificationPanelProps>;
+
+export { type ActionButtonElement, NotificationPanel, type NotificationPanelProps };

package/web/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+import { ButtonProps, IconButtonProps } from '@xsolla/xui-button';
+
+type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps>;
+interface NotificationPanelProps extends ThemeOverrideProps {
+    /** Visual variant/tone of the notification */
+    type?: "alert" | "warning" | "success" | "neutral" | "brand";
+    /** Title text (optional) */
+    title?: string;
+    /** Description text (optional) */
+    description?: string;
+    /** Show/hide the icon frame */
+    showIcon?: boolean;
+    /** Custom icon override (optional) */
+    icon?: React.ReactNode;
+    /**
+     * Action button (optional - pass any Button/IconButton component).
+     * The `tone`, `size`, and `variant` props will be automatically set.
+     */
+    actionButton?: React.ReactElement;
+    /** Show/hide close button */
+    showCloseButton?: boolean;
+    /** Close button click handler */
+    onClose?: () => void;
+    /** Vertical alignment of the close button — "top" (default) or "center" */
+    closeButtonAlign?: "center" | "top";
+    /** Test ID for testing frameworks */
+    testID?: string;
+}
+declare const NotificationPanel: React.FC<NotificationPanelProps>;
+
+export { type ActionButtonElement, NotificationPanel, type NotificationPanelProps };