@xsolla/xui-notification-panel 0.92.0-pr143.1771218288

package/native/index.d.mts

@@ -0,0 +1,83 @@
+import React from 'react';
+import { ButtonProps } from '@xsolla/xui-button';
+
+/** Props for the action button, excluding children which is set via actionLabel */
+type ActionButtonProps = Omit<ButtonProps, "children" | "size" | "variant" | "tone">;
+interface NotificationPanelProps {
+    /** 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 label (optional - hides button if not provided) */
+    actionLabel?: string;
+    /**
+     * Additional props to pass to the action Button component.
+     * Supports all Button props except children, size, variant, and tone (which are controlled by NotificationPanel).
+     * Use this to add icons, dividers, or other Button customizations.
+     * @example
+     * ```tsx
+     * <NotificationPanel
+     *   actionLabel="Open documentation"
+     *   actionProps={{
+     *     iconRight: <ArrowRight />,
+     *     divider: true,
+     *     onPress: () => openDocs()
+     *   }}
+     * />
+     * ```
+     */
+    actionProps?: ActionButtonProps;
+    /** Show/hide close button */
+    showCloseButton?: boolean;
+    /** Close button click handler */
+    onClose?: () => void;
+    /** Test ID for testing frameworks */
+    testID?: string;
+}
+/**
+ * NotificationPanel - A full-width notification bar for displaying contextual feedback.
+ *
+ * Unlike the Notification component (designed for toast popups), NotificationPanel
+ * is a horizontal banner intended for persistent inline notifications within page layouts.
+ *
+ * ## Features
+ * - 5 visual variants: alert, warning, success, neutral, brand
+ * - Optional icon frame with type-specific coloring
+ * - Optional action button with type-matched styling
+ * - Optional close button
+ * - Accessible: uses role="status" for screen reader announcements
+ *
+ * ## Usage
+ * ```tsx
+ * // Simple usage
+ * <NotificationPanel
+ *   type="success"
+ *   title="Success!"
+ *   description="Your changes have been saved."
+ *   actionLabel="Undo"
+ *   actionProps={{ onPress: () => handleUndo() }}
+ *   onClose={() => dismiss()}
+ * />
+ *
+ * // With button icon and divider
+ * <NotificationPanel
+ *   type="warning"
+ *   description="Check our guide to view all webhooks"
+ *   actionLabel="Open documentation"
+ *   actionProps={{
+ *     iconRight: <ArrowRight />,
+ *     divider: true,
+ *     onPress: () => openDocs()
+ *   }}
+ * />
+ * ```
+ */
+declare const NotificationPanel: React.FC<NotificationPanelProps>;
+
+export { type ActionButtonProps, NotificationPanel, type NotificationPanelProps };

package/native/index.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import { ButtonProps } from '@xsolla/xui-button';
+
+/** Props for the action button, excluding children which is set via actionLabel */
+type ActionButtonProps = Omit<ButtonProps, "children" | "size" | "variant" | "tone">;
+interface NotificationPanelProps {
+    /** 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 label (optional - hides button if not provided) */
+    actionLabel?: string;
+    /**
+     * Additional props to pass to the action Button component.
+     * Supports all Button props except children, size, variant, and tone (which are controlled by NotificationPanel).
+     * Use this to add icons, dividers, or other Button customizations.
+     * @example
+     * ```tsx
+     * <NotificationPanel
+     *   actionLabel="Open documentation"
+     *   actionProps={{
+     *     iconRight: <ArrowRight />,
+     *     divider: true,
+     *     onPress: () => openDocs()
+     *   }}
+     * />
+     * ```
+     */
+    actionProps?: ActionButtonProps;
+    /** Show/hide close button */
+    showCloseButton?: boolean;
+    /** Close button click handler */
+    onClose?: () => void;
+    /** Test ID for testing frameworks */
+    testID?: string;
+}
+/**
+ * NotificationPanel - A full-width notification bar for displaying contextual feedback.
+ *
+ * Unlike the Notification component (designed for toast popups), NotificationPanel
+ * is a horizontal banner intended for persistent inline notifications within page layouts.
+ *
+ * ## Features
+ * - 5 visual variants: alert, warning, success, neutral, brand
+ * - Optional icon frame with type-specific coloring
+ * - Optional action button with type-matched styling
+ * - Optional close button
+ * - Accessible: uses role="status" for screen reader announcements
+ *
+ * ## Usage
+ * ```tsx
+ * // Simple usage
+ * <NotificationPanel
+ *   type="success"
+ *   title="Success!"
+ *   description="Your changes have been saved."
+ *   actionLabel="Undo"
+ *   actionProps={{ onPress: () => handleUndo() }}
+ *   onClose={() => dismiss()}
+ * />
+ *
+ * // With button icon and divider
+ * <NotificationPanel
+ *   type="warning"
+ *   description="Check our guide to view all webhooks"
+ *   actionLabel="Open documentation"
+ *   actionProps={{
+ *     iconRight: <ArrowRight />,
+ *     divider: true,
+ *     onPress: () => openDocs()
+ *   }}
+ * />
+ * ```
+ */
+declare const NotificationPanel: React.FC<NotificationPanelProps>;
+
+export { type ActionButtonProps, NotificationPanel, type NotificationPanelProps };

package/native/index.js

@@ -0,0 +1,394 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  NotificationPanel: () => NotificationPanel
+});
+module.exports = __toCommonJS(index_exports);
+
+// ../primitives-native/src/Box.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("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,
+  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,
+    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__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native.View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  id,
+  role,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide Bold") {
+    resolvedFontFamily = void 0;
+  }
+  const style = {
+    color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style, testID: id, accessibilityRole, children });
+};
+
+// src/NotificationPanel.tsx
+var import_xui_core = require("@xsolla/xui-core");
+var import_xui_button = require("@xsolla/xui-button");
+var import_xui_icons_base = require("@xsolla/xui-icons-base");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var NotificationPanel = ({
+  type = "neutral",
+  title,
+  description,
+  showIcon = true,
+  icon,
+  actionLabel,
+  actionProps,
+  showCloseButton = true,
+  onClose,
+  testID
+}) => {
+  const { theme } = (0, import_xui_core.useDesignSystem)();
+  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: import_xui_icons_base.ExclamationMarkSq
+    },
+    warning: {
+      panelBg: theme.colors.overlay.warning,
+      iconFrameBg: theme.colors.background.warning.primary,
+      iconColor: theme.colors.content.primary,
+      buttonTone: "mono",
+      IconComponent: import_xui_icons_base.ExclamationMarkSq
+    },
+    success: {
+      panelBg: theme.colors.overlay.success,
+      iconFrameBg: theme.colors.background.success.primary,
+      iconColor: theme.colors.content.primary,
+      buttonTone: "brandExtra",
+      IconComponent: import_xui_icons_base.CheckCr
+    },
+    neutral: {
+      panelBg: theme.colors.overlay.mono,
+      iconFrameBg: theme.colors.overlay.mono,
+      iconColor: theme.colors.content.primary,
+      buttonTone: "mono",
+      IconComponent: import_xui_icons_base.InfoSq
+    },
+    brand: {
+      panelBg: theme.colors.overlay.brand,
+      iconFrameBg: theme.colors.overlay.brand,
+      iconColor: theme.colors.content.primary,
+      buttonTone: "brand",
+      IconComponent: import_xui_icons_base.InfoSq
+    }
+  };
+  const currentConfig = typeConfig[type];
+  const IconComponent = currentConfig.IconComponent;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    Box,
+    {
+      backgroundColor: currentConfig.panelBg,
+      borderRadius: config.borderRadius,
+      flexDirection: "row",
+      alignItems: "stretch",
+      overflow: "hidden",
+      testID,
+      role: "status",
+      "aria-label": `${type} notification`,
+      children: [
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Box,
+          {
+            backgroundColor: currentConfig.iconFrameBg,
+            width: config.iconFrameWidth,
+            alignItems: "center",
+            justifyContent: "center",
+            style: {
+              borderTopLeftRadius: config.borderRadius,
+              borderBottomLeftRadius: config.borderRadius
+            },
+            children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              IconComponent,
+              {
+                size: config.iconSize,
+                color: currentConfig.iconColor,
+                variant: "solid"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          Box,
+          {
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "center",
+            paddingHorizontal: config.bodyPaddingHorizontal,
+            paddingVertical: config.bodyPaddingVertical,
+            gap: config.contentGap,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box, { flex: 1, gap: config.textGap, children: [
+                title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  Text,
+                  {
+                    color: theme.colors.content.primary,
+                    fontSize: config.titleFontSize,
+                    lineHeight: config.titleLineHeight,
+                    fontWeight: "500",
+                    children: title
+                  }
+                ),
+                description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  Text,
+                  {
+                    color: theme.colors.content.tertiary,
+                    fontSize: config.descriptionFontSize,
+                    lineHeight: config.descriptionLineHeight,
+                    children: description
+                  }
+                )
+              ] }),
+              (actionLabel || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: config.buttonsGap, children: [
+                actionLabel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_xui_button.Button,
+                  {
+                    size: "xs",
+                    variant: "secondary",
+                    tone: currentConfig.buttonTone,
+                    ...actionProps,
+                    children: actionLabel
+                  }
+                ),
+                showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  Box,
+                  {
+                    width: config.closeButtonSize,
+                    height: config.closeButtonSize,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      import_xui_button.FlexButton,
+                      {
+                        variant: "primary",
+                        size: "sm",
+                        onPress: onClose,
+                        "aria-label": "Close notification",
+                        iconRight: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_xui_icons_base.Remove, {}),
+                        children: ""
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+NotificationPanel.displayName = "NotificationPanel";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NotificationPanel
+});
+//# sourceMappingURL=index.js.map

package/native/index.js.flow

@@ -0,0 +1,121 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import React from "react";
+import { ButtonProps } from "@xsolla/xui-button";
+
+/**
+ * Props for the action button, excluding children which is set via actionLabel
+ */
+declare type ActionButtonProps = $Diff<
+  ButtonProps,
+  { children: any, size: any, variant: any, tone: any }
+>;
+declare interface NotificationPanelProps {
+  /**
+   * 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 label (optional - hides button if not provided)
+   */
+  actionLabel?: string;
+
+  /**
+   * Additional props to pass to the action Button component.
+   * Supports all Button props except children, size, variant, and tone (which are controlled by NotificationPanel).
+   * Use this to add icons, dividers, or other Button customizations.
+   * @example ```tsx
+   * <NotificationPanel
+   *   actionLabel="Open documentation"
+   *   actionProps={{
+   *     iconRight: <ArrowRight />,
+   *     divider: true,
+   *     onPress: () => openDocs()
+   *   }}
+   * />
+   * ```
+   */
+  actionProps?: ActionButtonProps;
+
+  /**
+   * Show/hide close button
+   */
+  showCloseButton?: boolean;
+
+  /**
+   * Close button click handler
+   */
+  onClose?: () => void;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+}
+/**
+ * NotificationPanel - A full-width notification bar for displaying contextual feedback.
+ *
+ * Unlike the Notification component (designed for toast popups), NotificationPanel
+ * is a horizontal banner intended for persistent inline notifications within page layouts.
+ *
+ * ## Features
+ * - 5 visual variants: alert, warning, success, neutral, brand
+ * - Optional icon frame with type-specific coloring
+ * - Optional action button with type-matched styling
+ * - Optional close button
+ * - Accessible: uses role="status" for screen reader announcements
+ *
+ * ## Usage
+ * ```tsx
+ * // Simple usage
+ * <NotificationPanel
+ *   type="success"
+ *   title="Success!"
+ *   description="Your changes have been saved."
+ *   actionLabel="Undo"
+ *   actionProps={{ onPress: () => handleUndo() }}
+ *   onClose={() => dismiss()}
+ * />
+ *
+ * // With button icon and divider
+ * <NotificationPanel
+ *   type="warning"
+ *   description="Check our guide to view all webhooks"
+ *   actionLabel="Open documentation"
+ *   actionProps={{
+ *     iconRight: <ArrowRight />,
+ *     divider: true,
+ *     onPress: () => openDocs()
+ *   }}
+ * />
+ * ```
+ */
+declare var NotificationPanel: React.FC<NotificationPanelProps>;
+export type { ActionButtonProps, NotificationPanelProps };
+declare export { NotificationPanel };