@xsolla/xui-notification-panel 0.131.0 → 0.132.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
  1. package/README.md +1 -0
  2. package/native/index.d.mts +2 -0
  3. package/native/index.d.ts +2 -0
  4. package/native/index.js +33 -27
  5. package/native/index.js.map +1 -1
  6. package/native/index.mjs +34 -28
  7. package/native/index.mjs.map +1 -1
  8. package/package.json +5 -5
  9. package/web/index.d.mts +2 -0
  10. package/web/index.d.ts +2 -0
  11. package/web/index.js +33 -27
  12. package/web/index.js.map +1 -1
  13. package/web/index.mjs +34 -28
  14. package/web/index.mjs.map +1 -1
package/README.md CHANGED
@@ -208,6 +208,7 @@ export default function PersistentNotificationPanel() {
208
208
  | actionButton | `React.ReactElement` | - | Action button (Button or IconButton). `tone`, `size`, and `variant` are auto-applied. |
209
209
  | showCloseButton | `boolean` | `true` | Show/hide close button. |
210
210
  | onClose | `() => void` | - | Close button click handler. |
211
+ | closeButtonAlign | `"top" \| "center"` | `"top"` | Vertical alignment of the close button. Use `"center"` for single-line notifications where centered alignment is preferred. |
211
212
  | testID | `string` | - | Test ID for testing frameworks. |
212
213
 
213
214
  ### Auto-Applied Button Props
package/native/index.d.mts CHANGED
@@ -28,6 +28,8 @@ interface NotificationPanelProps extends ThemeOverrideProps {
28
28
  showCloseButton?: boolean;
29
29
  /** Close button click handler */
30
30
  onClose?: () => void;
31
+ /** Vertical alignment of the close button — "top" (default) or "center" */
32
+ closeButtonAlign?: "center" | "top";
31
33
  /** Test ID for testing frameworks */
32
34
  testID?: string;
33
35
  }
package/native/index.d.ts CHANGED
@@ -28,6 +28,8 @@ interface NotificationPanelProps extends ThemeOverrideProps {
28
28
  showCloseButton?: boolean;
29
29
  /** Close button click handler */
30
30
  onClose?: () => void;
31
+ /** Vertical alignment of the close button — "top" (default) or "center" */
32
+ closeButtonAlign?: "center" | "top";
31
33
  /** Test ID for testing frameworks */
32
34
  testID?: string;
33
35
  }
package/native/index.js CHANGED
@@ -278,6 +278,7 @@ var NotificationPanel = ({
278
278
  actionButton,
279
279
  showCloseButton = true,
280
280
  onClose,
281
+ closeButtonAlign = "top",
281
282
  testID,
282
283
  themeMode,
283
284
  themeProductContext
@@ -371,9 +372,10 @@ var NotificationPanel = ({
371
372
  Text,
372
373
  {
373
374
  color: theme.colors.content.primary,
374
- fontSize: config.titleFontSize,
375
- lineHeight: config.titleLineHeight,
376
- fontWeight: "500",
375
+ fontSize: theme.typographyTokens.basic["body-md"].fontSize,
376
+ lineHeight: theme.typographyTokens.basic["body-md"].lineHeight,
377
+ fontWeight: theme.typographyTokens.basic["body-md"].accent?.fontWeight ?? 500,
378
+ fontFamily: theme.fonts.body,
377
379
  children: title
378
380
  }
379
381
  ),
@@ -381,39 +383,43 @@ var NotificationPanel = ({
381
383
  Text,
382
384
  {
383
385
  color: theme.colors.content.tertiary,
384
- fontSize: config.descriptionFontSize,
385
- lineHeight: config.descriptionLineHeight,
386
+ fontSize: theme.typographyTokens.basic["body-sm"].fontSize,
387
+ lineHeight: theme.typographyTokens.basic["body-sm"].paragraph?.lineHeight ?? theme.typographyTokens.basic["body-sm"].lineHeight,
388
+ fontWeight: theme.typographyTokens.basic["body-sm"].fontWeight,
389
+ fontFamily: theme.fonts.body,
386
390
  children: description
387
391
  }
388
392
  )
389
393
  ] }),
390
- (actionButton || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: config.buttonsGap, children: [
391
- (0, import_react.isValidElement)(actionButton) && (0, import_react.cloneElement)(actionButton, {
392
- tone: currentConfig.buttonTone,
393
- size: "xs",
394
- variant: "secondary"
395
- }),
396
- showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
397
- Box,
398
- {
399
- width: config.closeButtonSize,
400
- height: config.closeButtonSize,
401
- alignItems: "center",
402
- justifyContent: "center",
403
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
404
- import_xui_button.FlexButton,
394
+ (actionButton || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
395
+ Box,
396
+ {
397
+ flexDirection: "row",
398
+ alignSelf: closeButtonAlign === "top" ? "stretch" : "center",
399
+ alignItems: closeButtonAlign === "top" ? "flex-start" : "center",
400
+ justifyContent: "flex-start",
401
+ paddingVertical: closeButtonAlign === "top" ? 4 : 0,
402
+ gap: config.buttonsGap,
403
+ children: [
404
+ (0, import_react.isValidElement)(actionButton) && (0, import_react.cloneElement)(actionButton, {
405
+ size: "xs",
406
+ variant: "secondary"
407
+ }),
408
+ showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
409
+ import_xui_button.IconButton,
405
410
  {
406
- variant: "primary",
407
- size: "sm",
411
+ variant: "tertiary",
412
+ tone: "mono",
413
+ size: "xs",
408
414
  onPress: onClose,
409
415
  "aria-label": "Close notification",
410
- iconRight: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_xui_icons_base.Remove, {}),
411
- children: null
416
+ icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_xui_icons_base.Remove, { size: 18 }),
417
+ hoverBackground: "none"
412
418
  }
413
419
  )
414
- }
415
- )
416
- ] })
420
+ ]
421
+ }
422
+ )
417
423
  ]
418
424
  }
419
425
  )
package/native/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/NotificationPanel.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["export { NotificationPanel } from \"./NotificationPanel\";\nexport type { NotificationPanelProps } from \"./NotificationPanel\";\n","import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n FlexButton,\n type ButtonProps,\n type IconButtonProps,\n} from \"@xsolla/xui-button\";\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 * @example\n * ```tsx\n * <NotificationPanel\n * type=\"alert\"\n * actionButton={<Button onPress={handleAction}>Open documentation</Button>}\n * />\n * ```\n */\n actionButton?: React.ReactElement;\n /** Show/hide close button */\n showCloseButton?: boolean;\n /** Close button click handler */\n onClose?: () => void;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\n/**\n * NotificationPanel - A full-width notification bar for displaying contextual feedback.\n *\n * Unlike the Notification component (designed for toast popups), NotificationPanel\n * is a horizontal banner intended for persistent inline notifications within page layouts.\n *\n * ## Features\n * - 5 visual variants: alert, warning, success, neutral, brand\n * - Optional icon frame with type-specific coloring\n * - Optional action button with type-matched styling\n * - Optional close button\n * - Accessible: uses role=\"status\" for screen reader announcements\n *\n * ## Usage\n * ```tsx\n * // Simple usage\n * <NotificationPanel\n * type=\"success\"\n * title=\"Success!\"\n * description=\"Your changes have been saved.\"\n * actionButton={<Button onPress={() => {}}>Undo</Button>}\n * onClose={() => dismiss()}\n * />\n *\n * // With IconButton\n * <NotificationPanel\n * type=\"warning\"\n * description=\"Check our guide to view all webhooks\"\n * actionButton={<IconButton icon={<ArrowRight />} onPress={() => {}} />}\n * />\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 testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const config = theme.sizing.notificationPanel();\n\n // Type-specific styling configuration\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=\"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 <Text\n color={theme.colors.content.primary}\n fontSize={config.titleFontSize}\n lineHeight={config.titleLineHeight}\n fontWeight=\"500\"\n >\n {title}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={config.descriptionFontSize}\n lineHeight={config.descriptionLineHeight}\n >\n {description}\n </Text>\n )}\n </Box>\n\n {/* Buttons */}\n {(actionButton || showCloseButton) && (\n <Box flexDirection=\"row\" alignItems=\"center\" gap={config.buttonsGap}>\n {isValidElement(actionButton) &&\n cloneElement(actionButton as ActionButtonElement, {\n tone: currentConfig.buttonTone,\n size: \"xs\",\n variant: \"secondary\",\n })}\n\n {showCloseButton && (\n <Box\n width={config.closeButtonSize}\n height={config.closeButtonSize}\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n <FlexButton\n variant=\"primary\"\n size=\"sm\"\n onPress={onClose}\n aria-label=\"Close notification\"\n iconRight={<Remove />}\n children={null}\n />\n </Box>\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","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/NotificationPanel.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["export { NotificationPanel } from \"./NotificationPanel\";\nexport type { NotificationPanelProps } from \"./NotificationPanel\";\n","import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } 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 {\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 * @example\n * ```tsx\n * <NotificationPanel\n * type=\"alert\"\n * actionButton={<Button onPress={handleAction}>Open documentation</Button>}\n * />\n * ```\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\n/**\n * NotificationPanel - A full-width notification bar for displaying contextual feedback.\n *\n * Unlike the Notification component (designed for toast popups), NotificationPanel\n * is a horizontal banner intended for persistent inline notifications within page layouts.\n *\n * ## Features\n * - 5 visual variants: alert, warning, success, neutral, brand\n * - Optional icon frame with type-specific coloring\n * - Optional action button with type-matched styling\n * - Optional close button\n * - Accessible: uses role=\"status\" for screen reader announcements\n *\n * ## Usage\n * ```tsx\n * // Simple usage\n * <NotificationPanel\n * type=\"success\"\n * title=\"Success!\"\n * description=\"Your changes have been saved.\"\n * actionButton={<Button onPress={() => {}}>Undo</Button>}\n * onClose={() => dismiss()}\n * />\n *\n * // With IconButton\n * <NotificationPanel\n * type=\"warning\"\n * description=\"Check our guide to view all webhooks\"\n * actionButton={<IconButton icon={<ArrowRight />} onPress={() => {}} />}\n * />\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 // Type-specific styling configuration\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=\"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 <Text\n color={theme.colors.content.primary}\n fontSize={theme.typographyTokens.basic[\"body-md\"].fontSize}\n lineHeight={theme.typographyTokens.basic[\"body-md\"].lineHeight}\n fontWeight={\n theme.typographyTokens.basic[\"body-md\"].accent?.fontWeight ??\n 500\n }\n fontFamily={theme.fonts.body}\n >\n {title}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={theme.typographyTokens.basic[\"body-sm\"].fontSize}\n lineHeight={\n theme.typographyTokens.basic[\"body-sm\"].paragraph?.lineHeight ??\n theme.typographyTokens.basic[\"body-sm\"].lineHeight\n }\n fontWeight={theme.typographyTokens.basic[\"body-sm\"].fontWeight}\n fontFamily={theme.fonts.body}\n >\n {description}\n </Text>\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","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["import_react_native","import_jsx_runtime","RNText","import_jsx_runtime"]}
package/native/index.mjs CHANGED
@@ -248,7 +248,7 @@ var Text = ({
248
248
  // src/NotificationPanel.tsx
249
249
  import { useResolvedTheme } from "@xsolla/xui-core";
250
250
  import {
251
- FlexButton
251
+ IconButton
252
252
  } from "@xsolla/xui-button";
253
253
  import {
254
254
  ExclamationMarkSq,
@@ -266,6 +266,7 @@ var NotificationPanel = ({
266
266
  actionButton,
267
267
  showCloseButton = true,
268
268
  onClose,
269
+ closeButtonAlign = "top",
269
270
  testID,
270
271
  themeMode,
271
272
  themeProductContext
@@ -359,9 +360,10 @@ var NotificationPanel = ({
359
360
  Text,
360
361
  {
361
362
  color: theme.colors.content.primary,
362
- fontSize: config.titleFontSize,
363
- lineHeight: config.titleLineHeight,
364
- fontWeight: "500",
363
+ fontSize: theme.typographyTokens.basic["body-md"].fontSize,
364
+ lineHeight: theme.typographyTokens.basic["body-md"].lineHeight,
365
+ fontWeight: theme.typographyTokens.basic["body-md"].accent?.fontWeight ?? 500,
366
+ fontFamily: theme.fonts.body,
365
367
  children: title
366
368
  }
367
369
  ),
@@ -369,39 +371,43 @@ var NotificationPanel = ({
369
371
  Text,
370
372
  {
371
373
  color: theme.colors.content.tertiary,
372
- fontSize: config.descriptionFontSize,
373
- lineHeight: config.descriptionLineHeight,
374
+ fontSize: theme.typographyTokens.basic["body-sm"].fontSize,
375
+ lineHeight: theme.typographyTokens.basic["body-sm"].paragraph?.lineHeight ?? theme.typographyTokens.basic["body-sm"].lineHeight,
376
+ fontWeight: theme.typographyTokens.basic["body-sm"].fontWeight,
377
+ fontFamily: theme.fonts.body,
374
378
  children: description
375
379
  }
376
380
  )
377
381
  ] }),
378
- (actionButton || showCloseButton) && /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: config.buttonsGap, children: [
379
- isValidElement(actionButton) && cloneElement(actionButton, {
380
- tone: currentConfig.buttonTone,
381
- size: "xs",
382
- variant: "secondary"
383
- }),
384
- showCloseButton && /* @__PURE__ */ jsx3(
385
- Box,
386
- {
387
- width: config.closeButtonSize,
388
- height: config.closeButtonSize,
389
- alignItems: "center",
390
- justifyContent: "center",
391
- children: /* @__PURE__ */ jsx3(
392
- FlexButton,
382
+ (actionButton || showCloseButton) && /* @__PURE__ */ jsxs(
383
+ Box,
384
+ {
385
+ flexDirection: "row",
386
+ alignSelf: closeButtonAlign === "top" ? "stretch" : "center",
387
+ alignItems: closeButtonAlign === "top" ? "flex-start" : "center",
388
+ justifyContent: "flex-start",
389
+ paddingVertical: closeButtonAlign === "top" ? 4 : 0,
390
+ gap: config.buttonsGap,
391
+ children: [
392
+ isValidElement(actionButton) && cloneElement(actionButton, {
393
+ size: "xs",
394
+ variant: "secondary"
395
+ }),
396
+ showCloseButton && /* @__PURE__ */ jsx3(
397
+ IconButton,
393
398
  {
394
- variant: "primary",
395
- size: "sm",
399
+ variant: "tertiary",
400
+ tone: "mono",
401
+ size: "xs",
396
402
  onPress: onClose,
397
403
  "aria-label": "Close notification",
398
- iconRight: /* @__PURE__ */ jsx3(Remove, {}),
399
- children: null
404
+ icon: /* @__PURE__ */ jsx3(Remove, { size: 18 }),
405
+ hoverBackground: "none"
400
406
  }
401
407
  )
402
- }
403
- )
404
- ] })
408
+ ]
409
+ }
410
+ )
405
411
  ]
406
412
  }
407
413
  )
package/native/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/NotificationPanel.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n FlexButton,\n type ButtonProps,\n type IconButtonProps,\n} from \"@xsolla/xui-button\";\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 * @example\n * ```tsx\n * <NotificationPanel\n * type=\"alert\"\n * actionButton={<Button onPress={handleAction}>Open documentation</Button>}\n * />\n * ```\n */\n actionButton?: React.ReactElement;\n /** Show/hide close button */\n showCloseButton?: boolean;\n /** Close button click handler */\n onClose?: () => void;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\n/**\n * NotificationPanel - A full-width notification bar for displaying contextual feedback.\n *\n * Unlike the Notification component (designed for toast popups), NotificationPanel\n * is a horizontal banner intended for persistent inline notifications within page layouts.\n *\n * ## Features\n * - 5 visual variants: alert, warning, success, neutral, brand\n * - Optional icon frame with type-specific coloring\n * - Optional action button with type-matched styling\n * - Optional close button\n * - Accessible: uses role=\"status\" for screen reader announcements\n *\n * ## Usage\n * ```tsx\n * // Simple usage\n * <NotificationPanel\n * type=\"success\"\n * title=\"Success!\"\n * description=\"Your changes have been saved.\"\n * actionButton={<Button onPress={() => {}}>Undo</Button>}\n * onClose={() => dismiss()}\n * />\n *\n * // With IconButton\n * <NotificationPanel\n * type=\"warning\"\n * description=\"Check our guide to view all webhooks\"\n * actionButton={<IconButton icon={<ArrowRight />} onPress={() => {}} />}\n * />\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 testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const config = theme.sizing.notificationPanel();\n\n // Type-specific styling configuration\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=\"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 <Text\n color={theme.colors.content.primary}\n fontSize={config.titleFontSize}\n lineHeight={config.titleLineHeight}\n fontWeight=\"500\"\n >\n {title}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={config.descriptionFontSize}\n lineHeight={config.descriptionLineHeight}\n >\n {description}\n </Text>\n )}\n </Box>\n\n {/* Buttons */}\n {(actionButton || showCloseButton) && (\n <Box flexDirection=\"row\" alignItems=\"center\" gap={config.buttonsGap}>\n {isValidElement(actionButton) &&\n cloneElement(actionButton as ActionButtonElement, {\n tone: currentConfig.buttonTone,\n size: \"xs\",\n variant: \"secondary\",\n })}\n\n {showCloseButton && (\n <Box\n width={config.closeButtonSize}\n height={config.closeButtonSize}\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n <FlexButton\n variant=\"primary\"\n size=\"sm\"\n onPress={onClose}\n aria-label=\"Close notification\"\n iconRight={<Remove />}\n children={null}\n />\n </Box>\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","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["jsx","jsx"]}
1
+ {"version":3,"sources":["../../src/NotificationPanel.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } 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 {\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 * @example\n * ```tsx\n * <NotificationPanel\n * type=\"alert\"\n * actionButton={<Button onPress={handleAction}>Open documentation</Button>}\n * />\n * ```\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\n/**\n * NotificationPanel - A full-width notification bar for displaying contextual feedback.\n *\n * Unlike the Notification component (designed for toast popups), NotificationPanel\n * is a horizontal banner intended for persistent inline notifications within page layouts.\n *\n * ## Features\n * - 5 visual variants: alert, warning, success, neutral, brand\n * - Optional icon frame with type-specific coloring\n * - Optional action button with type-matched styling\n * - Optional close button\n * - Accessible: uses role=\"status\" for screen reader announcements\n *\n * ## Usage\n * ```tsx\n * // Simple usage\n * <NotificationPanel\n * type=\"success\"\n * title=\"Success!\"\n * description=\"Your changes have been saved.\"\n * actionButton={<Button onPress={() => {}}>Undo</Button>}\n * onClose={() => dismiss()}\n * />\n *\n * // With IconButton\n * <NotificationPanel\n * type=\"warning\"\n * description=\"Check our guide to view all webhooks\"\n * actionButton={<IconButton icon={<ArrowRight />} onPress={() => {}} />}\n * />\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 // Type-specific styling configuration\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=\"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 <Text\n color={theme.colors.content.primary}\n fontSize={theme.typographyTokens.basic[\"body-md\"].fontSize}\n lineHeight={theme.typographyTokens.basic[\"body-md\"].lineHeight}\n fontWeight={\n theme.typographyTokens.basic[\"body-md\"].accent?.fontWeight ??\n 500\n }\n fontFamily={theme.fonts.body}\n >\n {title}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={theme.typographyTokens.basic[\"body-sm\"].fontSize}\n lineHeight={\n theme.typographyTokens.basic[\"body-sm\"].paragraph?.lineHeight ??\n theme.typographyTokens.basic[\"body-sm\"].lineHeight\n }\n fontWeight={theme.typographyTokens.basic[\"body-sm\"].fontWeight}\n fontFamily={theme.fonts.body}\n >\n {description}\n </Text>\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","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string | number | undefined\n): number | undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" ||\n resolvedFontFamily === \"Pilat Wide Bold\" ||\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number | string | undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number | string | undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n"],"mappings":"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","names":["jsx","jsx"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-notification-panel",
3
- "version": "0.131.0",
3
+ "version": "0.132.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -13,10 +13,10 @@
13
13
  "test:coverage": "vitest run --coverage"
14
14
  },
15
15
  "dependencies": {
16
- "@xsolla/xui-button": "0.131.0",
17
- "@xsolla/xui-core": "0.131.0",
18
- "@xsolla/xui-icons-base": "0.131.0",
19
- "@xsolla/xui-primitives-core": "0.131.0"
16
+ "@xsolla/xui-button": "0.132.0",
17
+ "@xsolla/xui-core": "0.132.0",
18
+ "@xsolla/xui-icons-base": "0.132.0",
19
+ "@xsolla/xui-primitives-core": "0.132.0"
20
20
  },
21
21
  "peerDependencies": {
22
22
  "react": ">=16.8.0",
package/web/index.d.mts CHANGED
@@ -28,6 +28,8 @@ interface NotificationPanelProps extends ThemeOverrideProps {
28
28
  showCloseButton?: boolean;
29
29
  /** Close button click handler */
30
30
  onClose?: () => void;
31
+ /** Vertical alignment of the close button — "top" (default) or "center" */
32
+ closeButtonAlign?: "center" | "top";
31
33
  /** Test ID for testing frameworks */
32
34
  testID?: string;
33
35
  }
package/web/index.d.ts CHANGED
@@ -28,6 +28,8 @@ interface NotificationPanelProps extends ThemeOverrideProps {
28
28
  showCloseButton?: boolean;
29
29
  /** Close button click handler */
30
30
  onClose?: () => void;
31
+ /** Vertical alignment of the close button — "top" (default) or "center" */
32
+ closeButtonAlign?: "center" | "top";
31
33
  /** Test ID for testing frameworks */
32
34
  testID?: string;
33
35
  }
package/web/index.js CHANGED
@@ -255,6 +255,7 @@ var NotificationPanel = ({
255
255
  actionButton,
256
256
  showCloseButton = true,
257
257
  onClose,
258
+ closeButtonAlign = "top",
258
259
  testID,
259
260
  themeMode,
260
261
  themeProductContext
@@ -348,9 +349,10 @@ var NotificationPanel = ({
348
349
  Text,
349
350
  {
350
351
  color: theme.colors.content.primary,
351
- fontSize: config.titleFontSize,
352
- lineHeight: config.titleLineHeight,
353
- fontWeight: "500",
352
+ fontSize: theme.typographyTokens.basic["body-md"].fontSize,
353
+ lineHeight: theme.typographyTokens.basic["body-md"].lineHeight,
354
+ fontWeight: theme.typographyTokens.basic["body-md"].accent?.fontWeight ?? 500,
355
+ fontFamily: theme.fonts.body,
354
356
  children: title
355
357
  }
356
358
  ),
@@ -358,39 +360,43 @@ var NotificationPanel = ({
358
360
  Text,
359
361
  {
360
362
  color: theme.colors.content.tertiary,
361
- fontSize: config.descriptionFontSize,
362
- lineHeight: config.descriptionLineHeight,
363
+ fontSize: theme.typographyTokens.basic["body-sm"].fontSize,
364
+ lineHeight: theme.typographyTokens.basic["body-sm"].paragraph?.lineHeight ?? theme.typographyTokens.basic["body-sm"].lineHeight,
365
+ fontWeight: theme.typographyTokens.basic["body-sm"].fontWeight,
366
+ fontFamily: theme.fonts.body,
363
367
  children: description
364
368
  }
365
369
  )
366
370
  ] }),
367
- (actionButton || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: config.buttonsGap, children: [
368
- (0, import_react2.isValidElement)(actionButton) && (0, import_react2.cloneElement)(actionButton, {
369
- tone: currentConfig.buttonTone,
370
- size: "xs",
371
- variant: "secondary"
372
- }),
373
- showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
374
- Box,
375
- {
376
- width: config.closeButtonSize,
377
- height: config.closeButtonSize,
378
- alignItems: "center",
379
- justifyContent: "center",
380
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
381
- import_xui_button.FlexButton,
371
+ (actionButton || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
372
+ Box,
373
+ {
374
+ flexDirection: "row",
375
+ alignSelf: closeButtonAlign === "top" ? "stretch" : "center",
376
+ alignItems: closeButtonAlign === "top" ? "flex-start" : "center",
377
+ justifyContent: "flex-start",
378
+ paddingVertical: closeButtonAlign === "top" ? 4 : 0,
379
+ gap: config.buttonsGap,
380
+ children: [
381
+ (0, import_react2.isValidElement)(actionButton) && (0, import_react2.cloneElement)(actionButton, {
382
+ size: "xs",
383
+ variant: "secondary"
384
+ }),
385
+ showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
386
+ import_xui_button.IconButton,
382
387
  {
383
- variant: "primary",
384
- size: "sm",
388
+ variant: "tertiary",
389
+ tone: "mono",
390
+ size: "xs",
385
391
  onPress: onClose,
386
392
  "aria-label": "Close notification",
387
- iconRight: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_xui_icons_base.Remove, {}),
388
- children: null
393
+ icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_xui_icons_base.Remove, { size: 18 }),
394
+ hoverBackground: "none"
389
395
  }
390
396
  )
391
- }
392
- )
393
- ] })
397
+ ]
398
+ }
399
+ )
394
400
  ]
395
401
  }
396
402
  )
package/web/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/NotificationPanel.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["export { NotificationPanel } from \"./NotificationPanel\";\nexport type { NotificationPanelProps } from \"./NotificationPanel\";\n","import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n FlexButton,\n type ButtonProps,\n type IconButtonProps,\n} from \"@xsolla/xui-button\";\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 * @example\n * ```tsx\n * <NotificationPanel\n * type=\"alert\"\n * actionButton={<Button onPress={handleAction}>Open documentation</Button>}\n * />\n * ```\n */\n actionButton?: React.ReactElement;\n /** Show/hide close button */\n showCloseButton?: boolean;\n /** Close button click handler */\n onClose?: () => void;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\n/**\n * NotificationPanel - A full-width notification bar for displaying contextual feedback.\n *\n * Unlike the Notification component (designed for toast popups), NotificationPanel\n * is a horizontal banner intended for persistent inline notifications within page layouts.\n *\n * ## Features\n * - 5 visual variants: alert, warning, success, neutral, brand\n * - Optional icon frame with type-specific coloring\n * - Optional action button with type-matched styling\n * - Optional close button\n * - Accessible: uses role=\"status\" for screen reader announcements\n *\n * ## Usage\n * ```tsx\n * // Simple usage\n * <NotificationPanel\n * type=\"success\"\n * title=\"Success!\"\n * description=\"Your changes have been saved.\"\n * actionButton={<Button onPress={() => {}}>Undo</Button>}\n * onClose={() => dismiss()}\n * />\n *\n * // With IconButton\n * <NotificationPanel\n * type=\"warning\"\n * description=\"Check our guide to view all webhooks\"\n * actionButton={<IconButton icon={<ArrowRight />} onPress={() => {}} />}\n * />\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 testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const config = theme.sizing.notificationPanel();\n\n // Type-specific styling configuration\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=\"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 <Text\n color={theme.colors.content.primary}\n fontSize={config.titleFontSize}\n lineHeight={config.titleLineHeight}\n fontWeight=\"500\"\n >\n {title}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={config.descriptionFontSize}\n lineHeight={config.descriptionLineHeight}\n >\n {description}\n </Text>\n )}\n </Box>\n\n {/* Buttons */}\n {(actionButton || showCloseButton) && (\n <Box flexDirection=\"row\" alignItems=\"center\" gap={config.buttonsGap}>\n {isValidElement(actionButton) &&\n cloneElement(actionButton as ActionButtonElement, {\n tone: currentConfig.buttonTone,\n size: \"xs\",\n variant: \"secondary\",\n })}\n\n {showCloseButton && (\n <Box\n width={config.closeButtonSize}\n height={config.closeButtonSize}\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n <FlexButton\n variant=\"primary\"\n size=\"sm\"\n onPress={onClose}\n aria-label=\"Close notification\"\n iconRight={<Remove />}\n children={null}\n />\n </Box>\n )}\n </Box>\n )}\n </Box>\n </Box>\n );\n};\n\nNotificationPanel.displayName = \"NotificationPanel\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth || \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight || \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n"],"mappings":"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","names":["import_react","styled","React","import_styled_components","import_jsx_runtime","styled","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/NotificationPanel.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["export { NotificationPanel } from \"./NotificationPanel\";\nexport type { NotificationPanelProps } from \"./NotificationPanel\";\n","import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } 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 {\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 * @example\n * ```tsx\n * <NotificationPanel\n * type=\"alert\"\n * actionButton={<Button onPress={handleAction}>Open documentation</Button>}\n * />\n * ```\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\n/**\n * NotificationPanel - A full-width notification bar for displaying contextual feedback.\n *\n * Unlike the Notification component (designed for toast popups), NotificationPanel\n * is a horizontal banner intended for persistent inline notifications within page layouts.\n *\n * ## Features\n * - 5 visual variants: alert, warning, success, neutral, brand\n * - Optional icon frame with type-specific coloring\n * - Optional action button with type-matched styling\n * - Optional close button\n * - Accessible: uses role=\"status\" for screen reader announcements\n *\n * ## Usage\n * ```tsx\n * // Simple usage\n * <NotificationPanel\n * type=\"success\"\n * title=\"Success!\"\n * description=\"Your changes have been saved.\"\n * actionButton={<Button onPress={() => {}}>Undo</Button>}\n * onClose={() => dismiss()}\n * />\n *\n * // With IconButton\n * <NotificationPanel\n * type=\"warning\"\n * description=\"Check our guide to view all webhooks\"\n * actionButton={<IconButton icon={<ArrowRight />} onPress={() => {}} />}\n * />\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 // Type-specific styling configuration\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=\"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 <Text\n color={theme.colors.content.primary}\n fontSize={theme.typographyTokens.basic[\"body-md\"].fontSize}\n lineHeight={theme.typographyTokens.basic[\"body-md\"].lineHeight}\n fontWeight={\n theme.typographyTokens.basic[\"body-md\"].accent?.fontWeight ??\n 500\n }\n fontFamily={theme.fonts.body}\n >\n {title}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={theme.typographyTokens.basic[\"body-sm\"].fontSize}\n lineHeight={\n theme.typographyTokens.basic[\"body-sm\"].paragraph?.lineHeight ??\n theme.typographyTokens.basic[\"body-sm\"].lineHeight\n }\n fontWeight={theme.typographyTokens.basic[\"body-sm\"].fontWeight}\n fontFamily={theme.fonts.body}\n >\n {description}\n </Text>\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 styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth || \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight || \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n"],"mappings":"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","names":["import_react","styled","React","import_styled_components","import_jsx_runtime","styled","import_jsx_runtime"]}
package/web/index.mjs CHANGED
@@ -208,7 +208,7 @@ var Text = ({
208
208
  // src/NotificationPanel.tsx
209
209
  import { useResolvedTheme } from "@xsolla/xui-core";
210
210
  import {
211
- FlexButton
211
+ IconButton
212
212
  } from "@xsolla/xui-button";
213
213
  import {
214
214
  ExclamationMarkSq,
@@ -226,6 +226,7 @@ var NotificationPanel = ({
226
226
  actionButton,
227
227
  showCloseButton = true,
228
228
  onClose,
229
+ closeButtonAlign = "top",
229
230
  testID,
230
231
  themeMode,
231
232
  themeProductContext
@@ -319,9 +320,10 @@ var NotificationPanel = ({
319
320
  Text,
320
321
  {
321
322
  color: theme.colors.content.primary,
322
- fontSize: config.titleFontSize,
323
- lineHeight: config.titleLineHeight,
324
- fontWeight: "500",
323
+ fontSize: theme.typographyTokens.basic["body-md"].fontSize,
324
+ lineHeight: theme.typographyTokens.basic["body-md"].lineHeight,
325
+ fontWeight: theme.typographyTokens.basic["body-md"].accent?.fontWeight ?? 500,
326
+ fontFamily: theme.fonts.body,
325
327
  children: title
326
328
  }
327
329
  ),
@@ -329,39 +331,43 @@ var NotificationPanel = ({
329
331
  Text,
330
332
  {
331
333
  color: theme.colors.content.tertiary,
332
- fontSize: config.descriptionFontSize,
333
- lineHeight: config.descriptionLineHeight,
334
+ fontSize: theme.typographyTokens.basic["body-sm"].fontSize,
335
+ lineHeight: theme.typographyTokens.basic["body-sm"].paragraph?.lineHeight ?? theme.typographyTokens.basic["body-sm"].lineHeight,
336
+ fontWeight: theme.typographyTokens.basic["body-sm"].fontWeight,
337
+ fontFamily: theme.fonts.body,
334
338
  children: description
335
339
  }
336
340
  )
337
341
  ] }),
338
- (actionButton || showCloseButton) && /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: config.buttonsGap, children: [
339
- isValidElement(actionButton) && cloneElement(actionButton, {
340
- tone: currentConfig.buttonTone,
341
- size: "xs",
342
- variant: "secondary"
343
- }),
344
- showCloseButton && /* @__PURE__ */ jsx3(
345
- Box,
346
- {
347
- width: config.closeButtonSize,
348
- height: config.closeButtonSize,
349
- alignItems: "center",
350
- justifyContent: "center",
351
- children: /* @__PURE__ */ jsx3(
352
- FlexButton,
342
+ (actionButton || showCloseButton) && /* @__PURE__ */ jsxs(
343
+ Box,
344
+ {
345
+ flexDirection: "row",
346
+ alignSelf: closeButtonAlign === "top" ? "stretch" : "center",
347
+ alignItems: closeButtonAlign === "top" ? "flex-start" : "center",
348
+ justifyContent: "flex-start",
349
+ paddingVertical: closeButtonAlign === "top" ? 4 : 0,
350
+ gap: config.buttonsGap,
351
+ children: [
352
+ isValidElement(actionButton) && cloneElement(actionButton, {
353
+ size: "xs",
354
+ variant: "secondary"
355
+ }),
356
+ showCloseButton && /* @__PURE__ */ jsx3(
357
+ IconButton,
353
358
  {
354
- variant: "primary",
355
- size: "sm",
359
+ variant: "tertiary",
360
+ tone: "mono",
361
+ size: "xs",
356
362
  onPress: onClose,
357
363
  "aria-label": "Close notification",
358
- iconRight: /* @__PURE__ */ jsx3(Remove, {}),
359
- children: null
364
+ icon: /* @__PURE__ */ jsx3(Remove, { size: 18 }),
365
+ hoverBackground: "none"
360
366
  }
361
367
  )
362
- }
363
- )
364
- ] })
368
+ ]
369
+ }
370
+ )
365
371
  ]
366
372
  }
367
373
  )
package/web/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/NotificationPanel.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n FlexButton,\n type ButtonProps,\n type IconButtonProps,\n} from \"@xsolla/xui-button\";\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 * @example\n * ```tsx\n * <NotificationPanel\n * type=\"alert\"\n * actionButton={<Button onPress={handleAction}>Open documentation</Button>}\n * />\n * ```\n */\n actionButton?: React.ReactElement;\n /** Show/hide close button */\n showCloseButton?: boolean;\n /** Close button click handler */\n onClose?: () => void;\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\n/**\n * NotificationPanel - A full-width notification bar for displaying contextual feedback.\n *\n * Unlike the Notification component (designed for toast popups), NotificationPanel\n * is a horizontal banner intended for persistent inline notifications within page layouts.\n *\n * ## Features\n * - 5 visual variants: alert, warning, success, neutral, brand\n * - Optional icon frame with type-specific coloring\n * - Optional action button with type-matched styling\n * - Optional close button\n * - Accessible: uses role=\"status\" for screen reader announcements\n *\n * ## Usage\n * ```tsx\n * // Simple usage\n * <NotificationPanel\n * type=\"success\"\n * title=\"Success!\"\n * description=\"Your changes have been saved.\"\n * actionButton={<Button onPress={() => {}}>Undo</Button>}\n * onClose={() => dismiss()}\n * />\n *\n * // With IconButton\n * <NotificationPanel\n * type=\"warning\"\n * description=\"Check our guide to view all webhooks\"\n * actionButton={<IconButton icon={<ArrowRight />} onPress={() => {}} />}\n * />\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 testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const config = theme.sizing.notificationPanel();\n\n // Type-specific styling configuration\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=\"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 <Text\n color={theme.colors.content.primary}\n fontSize={config.titleFontSize}\n lineHeight={config.titleLineHeight}\n fontWeight=\"500\"\n >\n {title}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={config.descriptionFontSize}\n lineHeight={config.descriptionLineHeight}\n >\n {description}\n </Text>\n )}\n </Box>\n\n {/* Buttons */}\n {(actionButton || showCloseButton) && (\n <Box flexDirection=\"row\" alignItems=\"center\" gap={config.buttonsGap}>\n {isValidElement(actionButton) &&\n cloneElement(actionButton as ActionButtonElement, {\n tone: currentConfig.buttonTone,\n size: \"xs\",\n variant: \"secondary\",\n })}\n\n {showCloseButton && (\n <Box\n width={config.closeButtonSize}\n height={config.closeButtonSize}\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n <FlexButton\n variant=\"primary\"\n size=\"sm\"\n onPress={onClose}\n aria-label=\"Close notification\"\n iconRight={<Remove />}\n children={null}\n />\n </Box>\n )}\n </Box>\n )}\n </Box>\n </Box>\n );\n};\n\nNotificationPanel.displayName = \"NotificationPanel\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth || \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight || \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n"],"mappings":"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","names":["styled","jsx","jsx"]}
1
+ {"version":3,"sources":["../../src/NotificationPanel.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } 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 {\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 * @example\n * ```tsx\n * <NotificationPanel\n * type=\"alert\"\n * actionButton={<Button onPress={handleAction}>Open documentation</Button>}\n * />\n * ```\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\n/**\n * NotificationPanel - A full-width notification bar for displaying contextual feedback.\n *\n * Unlike the Notification component (designed for toast popups), NotificationPanel\n * is a horizontal banner intended for persistent inline notifications within page layouts.\n *\n * ## Features\n * - 5 visual variants: alert, warning, success, neutral, brand\n * - Optional icon frame with type-specific coloring\n * - Optional action button with type-matched styling\n * - Optional close button\n * - Accessible: uses role=\"status\" for screen reader announcements\n *\n * ## Usage\n * ```tsx\n * // Simple usage\n * <NotificationPanel\n * type=\"success\"\n * title=\"Success!\"\n * description=\"Your changes have been saved.\"\n * actionButton={<Button onPress={() => {}}>Undo</Button>}\n * onClose={() => dismiss()}\n * />\n *\n * // With IconButton\n * <NotificationPanel\n * type=\"warning\"\n * description=\"Check our guide to view all webhooks\"\n * actionButton={<IconButton icon={<ArrowRight />} onPress={() => {}} />}\n * />\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 // Type-specific styling configuration\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=\"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 <Text\n color={theme.colors.content.primary}\n fontSize={theme.typographyTokens.basic[\"body-md\"].fontSize}\n lineHeight={theme.typographyTokens.basic[\"body-md\"].lineHeight}\n fontWeight={\n theme.typographyTokens.basic[\"body-md\"].accent?.fontWeight ??\n 500\n }\n fontFamily={theme.fonts.body}\n >\n {title}\n </Text>\n )}\n {description && (\n <Text\n color={theme.colors.content.tertiary}\n fontSize={theme.typographyTokens.basic[\"body-sm\"].fontSize}\n lineHeight={\n theme.typographyTokens.basic[\"body-sm\"].paragraph?.lineHeight ??\n theme.typographyTokens.basic[\"body-sm\"].lineHeight\n }\n fontWeight={theme.typographyTokens.basic[\"body-sm\"].fontWeight}\n fontFamily={theme.fonts.body}\n >\n {description}\n </Text>\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 styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth || \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight || \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n"],"mappings":"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","names":["styled","jsx","jsx"]}