@996-design/996-components 1.0.0

package/es/notification/style/index.d.ts

@@ -0,0 +1,112 @@
+import type { FullToken, GenerateStyle, GenStyleFn } from '../../theme/internal';
+type WidthKey<Token extends NotificationToken> = {
+    [Key in keyof Token]: Token[Key] extends number | string ? Key : never;
+}[keyof Token];
+interface SharedStyleConfig<Token extends NotificationToken> {
+    listWidthKey?: WidthKey<Token>;
+    stackVisibleCount?: number;
+    itemStyle?: GenerateStyle<Token>;
+}
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+    /**
+     * @desc 提醒框 z-index
+     * @descEN z-index of Notification
+     */
+    zIndexPopup: number;
+    /**
+     * @desc 提醒框宽度
+     * @descEN Width of Notification
+     */
+    width: number | string;
+    /**
+     * @desc 提醒框进度条背景色
+     * @descEN Background color of Notification progress bar
+     */
+    progressBg: string;
+    /**
+     * @desc 成功提醒框容器背景色
+     * @descEN Background color of success notification container
+     */
+    colorSuccessBg?: string;
+    /**
+     * @desc 错误提醒框容器背景色
+     * @descEN Background color of error notification container
+     */
+    colorErrorBg?: string;
+    /**
+     * @desc 信息提醒框容器背景色
+     * @descEN Background color of info notification container
+     */
+    colorInfoBg?: string;
+    /**
+     * @desc 警告提醒框容器背景色
+     * @descEN Background color of warning notification container
+     */
+    colorWarningBg?: string;
+}
+/**
+ * @desc Notification 组件的 Token
+ * @descEN Token for Notification component
+ */
+export interface NotificationToken extends FullToken<'Notification'> {
+    /**
+     * @desc 提醒框背景色
+     * @descEN Background color of Notification
+     */
+    notificationBg: string;
+    /**
+     * @desc 提醒框内边距
+     * @descEN Padding of Notification
+     */
+    notificationPadding: string;
+    /**
+     * @desc 提醒框垂直内边距
+     * @descEN Vertical padding of Notification
+     */
+    notificationPaddingVertical: number | string;
+    /**
+     * @desc 提醒框水平内边距
+     * @descEN Horizontal padding of Notification
+     */
+    notificationPaddingHorizontal: number;
+    /**
+     * @desc 提醒框图标尺寸
+     * @descEN Icon size of Notification
+     */
+    notificationIconSize: number | string;
+    /**
+     * @desc 提醒框关闭按钮尺寸
+     * @descEN Close button size of Notification
+     */
+    notificationCloseButtonSize: number | string;
+    /**
+     * @desc 提醒框底部外边距
+     * @descEN Bottom margin of Notification
+     */
+    notificationMarginBottom: number;
+    /**
+     * @desc 提醒框边缘外边距
+     * @descEN Edge margin of Notification
+     */
+    notificationMarginEdge: number;
+    /**
+     * @desc 提醒框进度条高度
+     * @descEN Height of Notification progress bar
+     */
+    notificationProgressHeight: number;
+    /**
+     * @desc 提醒框入场动画偏移
+     * @descEN Motion offset of Notification
+     */
+    notificationMotionOffset: number;
+}
+/** Derive internal Notification style tokens from alias and component tokens. */
+export declare const prepareNotificationToken: (token: Parameters<GenStyleFn<'Notification'>>[0]) => NotificationToken;
+/** Register the PurePanel sub-style component for Notification. */
+export declare const PurePanelStyle: import("react").FunctionComponent<import("@996-design/996-cssinjs-utils/lib/util/genStyleUtils").SubStyleComponentProps>;
+/** Compose the shared list, item, and placement styles. */
+export declare const sharedGenerateStyle: <Token extends NotificationToken>(token: Token, config: SharedStyleConfig<Token>) => ReturnType<GenerateStyle<Token>>;
+/** Register the main style hook for Notification. */
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
+export default _default;

package/es/notification/style/index.js

@@ -0,0 +1,135 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { unit } from '@996-design/996-cssinjs';
+import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/index.js';
+import { resetComponent } from '../../style/index.js';
+import { genStyleHooks, genSubStyleComponent, mergeToken } from '../../theme/internal.js';
+import genNotificationStyle, { genPurePanelStyle } from './notification.js';
+import genNotificationPlacementStyle from './placement.js';
+var DEFAULT_COLLAPSED_STACK_VISIBLE_COUNT = 3;
+// =============================== Token ===============================
+/** Provide default public ComponentToken values for Notification. */
+var prepareComponentToken = function prepareComponentToken(token) {
+  return {
+    zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
+    width: 384,
+    progressBg: "linear-gradient(90deg, ".concat(token.colorPrimaryBorderHover, ", ").concat(token.colorPrimary, ")"),
+    // Fix notification background color issue
+    // https://github.com/ant-design/ant-design/issues/55649
+    // https://github.com/ant-design/ant-design/issues/56055
+    colorSuccessBg: undefined,
+    colorErrorBg: undefined,
+    colorInfoBg: undefined,
+    colorWarningBg: undefined
+  };
+};
+/** Derive internal Notification style tokens from alias and component tokens. */
+export var prepareNotificationToken = function prepareNotificationToken(token) {
+  var notificationPaddingVertical = token.paddingMD;
+  var notificationPaddingHorizontal = token.paddingLG;
+  var notificationToken = mergeToken(token, {
+    notificationBg: token.colorBgElevated,
+    notificationPaddingVertical: notificationPaddingVertical,
+    notificationPaddingHorizontal: notificationPaddingHorizontal,
+    notificationIconSize: token.calc(token.fontSizeLG).mul(token.lineHeightLG).equal(),
+    notificationCloseButtonSize: token.calc(token.controlHeightLG).mul(0.55).equal(),
+    notificationMarginBottom: token.margin,
+    notificationPadding: "".concat(unit(token.paddingMD), " ").concat(unit(token.paddingContentHorizontalLG)),
+    notificationMarginEdge: token.marginLG,
+    notificationProgressHeight: 2,
+    notificationMotionOffset: 64
+  });
+  return notificationToken;
+};
+// =============================== List ================================
+/** Build a clip-path inset that keeps stack shadows visible. */
+var getStackNoticeClipPath = function getStackNoticeClipPath(offset) {
+  return "inset(".concat(offset, " ").concat(offset, " ").concat(offset, " ").concat(offset, ")");
+};
+/** Generate shared list content and motion base styles. */
+var genNotificationListContentStyle = function genNotificationListContentStyle(token) {
+  var componentCls = token.componentCls,
+    motionDurationMid = token.motionDurationMid,
+    motionDurationSlow = token.motionDurationSlow,
+    motionEaseInOut = token.motionEaseInOut;
+  var listCls = "".concat(componentCls, "-list");
+  var listContentCls = "".concat(listCls, "-content");
+  return _defineProperty(_defineProperty({}, listContentCls, _defineProperty({
+    position: 'relative',
+    display: 'flex',
+    flexShrink: 0,
+    flexDirection: 'column',
+    gap: token.notificationMarginBottom,
+    width: '100%',
+    willChange: 'height, transform',
+    transition: 'none'
+  }, "&".concat(listContentCls, "-decrease"), {
+    transition: "height calc(".concat(motionDurationSlow, " * 2) ").concat(motionEaseInOut, " ").concat(motionDurationMid)
+  })), "".concat(componentCls, "-fade"), {
+    backfaceVisibility: 'hidden',
+    willChange: 'transform, opacity'
+  });
+};
+/** Generate the root holder, list, stack, and RTL styles for notifications. */
+var genNotificationListStyle = function genNotificationListStyle(token, config) {
+  var _config$stackVisibleC;
+  var componentCls = token.componentCls,
+    notificationMarginEdge = token.notificationMarginEdge;
+  var notificationMarginEdgeVar = '--notification-margin-edge';
+  var noticeCls = "".concat(componentCls, "-notice");
+  var listCls = "".concat(componentCls, "-list");
+  var listWidth = config.listWidthKey ? token.calc(token[config.listWidthKey]).add(token.calc(notificationMarginEdge).mul(2)).equal() : '100%';
+  var stackVisibleCount = (_config$stackVisibleC = config.stackVisibleCount) !== null && _config$stackVisibleC !== void 0 ? _config$stackVisibleC : DEFAULT_COLLAPSED_STACK_VISIBLE_COUNT;
+  var noticeBeyondStackVisibleCountCls = "".concat(noticeCls, ":nth-last-child(n + ").concat(stackVisibleCount + 1, ")");
+  var stackShadowClipOffset = unit(token.calc(token.marginXXL).mul(-1).equal());
+  var stackNoticeClipPath = getStackNoticeClipPath(stackShadowClipOffset);
+  return _defineProperty({}, componentCls, _objectSpread(_objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, notificationMarginEdgeVar, unit(notificationMarginEdge)), "position", 'fixed'), "zIndex", token.zIndexPopup), "width", listWidth), "maxWidth", '100vw'), "height", '100vh'), "overflow", 'hidden'), "overscrollBehavior", 'contain'), "".concat(componentCls, "-hook-holder"), {
+    position: 'relative'
+  }), "&".concat(listCls), {
+    maxHeight: '100vh',
+    padding: "var(".concat(notificationMarginEdgeVar, ")"),
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    overscrollBehavior: 'contain',
+    scrollbarWidth: 'none',
+    msOverflowStyle: 'none',
+    pointerEvents: 'none',
+    '&::-webkit-scrollbar': {
+      display: 'none',
+      width: 0,
+      height: 0
+    }
+  }), genNotificationListContentStyle(token)), {}, _defineProperty(_defineProperty({}, "&".concat(componentCls, "-stack"), _defineProperty(_defineProperty({}, noticeCls, {
+    clipPath: stackNoticeClipPath
+  }), "&:not(".concat(componentCls, "-stack-expanded)"), _defineProperty(_defineProperty(_defineProperty({}, noticeCls, {
+    '--notification-scale': 'calc(1 - min(var(--notification-index, 0), 2) * 0.06)'
+  }), "".concat(noticeCls, ":not(").concat(noticeCls, "-stack-in-threshold)"), {
+    opacity: 0,
+    pointerEvents: 'none'
+  }), noticeBeyondStackVisibleCountCls, {
+    opacity: 0,
+    pointerEvents: 'none'
+  }))), '&-rtl', _defineProperty({
+    direction: 'rtl'
+  }, "".concat(noticeCls, "-actions"), {
+    float: 'left'
+  }))));
+};
+// ============================== Export ==============================
+/** Register the PurePanel sub-style component for Notification. */
+export var PurePanelStyle = genSubStyleComponent(['Notification', 'PurePanel'], function (token) {
+  return genPurePanelStyle(prepareNotificationToken(token));
+}, prepareComponentToken);
+/** Compose the shared list, item, and placement styles. */
+export var sharedGenerateStyle = function sharedGenerateStyle(token, config) {
+  var _config$itemStyle;
+  var itemStyle = (_config$itemStyle = config.itemStyle) !== null && _config$itemStyle !== void 0 ? _config$itemStyle : genNotificationStyle;
+  return [genNotificationListStyle(token, config), itemStyle(token), genNotificationPlacementStyle(token)];
+};
+/** Register the main style hook for Notification. */
+export default genStyleHooks('Notification', function (token) {
+  var notificationToken = prepareNotificationToken(token);
+  return sharedGenerateStyle(notificationToken, {
+    listWidthKey: 'width'
+  });
+}, prepareComponentToken);

package/es/notification/style/notification.d.ts

@@ -0,0 +1,19 @@
+import type { CSSObject } from '@996-design/996-cssinjs';
+import type { GenerateStyle } from '../../theme/internal';
+import type { NotificationToken } from '.';
+interface NotificationItemSharedStyleConfig {
+    width: number | string;
+    iconFontSize: number | string;
+    titleFontSize: number | string;
+    titleLineHeight: number | string;
+    contentStyle: CSSObject;
+    noticeStyle?: CSSObject;
+    typeStyle?: boolean;
+}
+/** Generate item styles shared by Notification and Message notice cards. */
+export declare const genListItemSharedStyle: (token: NotificationToken, config: NotificationItemSharedStyleConfig) => CSSObject;
+/** Generate standalone PurePanel styles for Notification. */
+export declare const genPurePanelStyle: (token: NotificationToken) => CSSObject;
+/** Wrap Notification item styles under the component root selector. */
+declare const genNotificationStyle: GenerateStyle<NotificationToken, CSSObject>;
+export default genNotificationStyle;

package/es/notification/style/notification.js

@@ -0,0 +1,223 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { unit } from '@996-design/996-cssinjs';
+import { genFocusStyle } from '../../style/index.js';
+import { genCssVar } from '../../theme/util/genStyleUtils.js';
+// ============================== Shared ==============================
+/** Generate motion transitions shared by notification-like notice cards. */
+var genNotificationItemMotionStyle = function genNotificationItemMotionStyle(token) {
+  var motionDurationMid = token.motionDurationMid,
+    motionEaseInOut = token.motionEaseInOut;
+  var transition = "".concat(motionDurationMid, " ").concat(motionEaseInOut);
+  return {
+    transform: 'scale(var(--notification-scale, 1))',
+    transition: ['transform', 'inset', 'clip-path', 'opacity'].map(function (property) {
+      return "".concat(property, " ").concat(transition);
+    }).join(', ')
+  };
+};
+/** Generate item styles shared by Notification and Message notice cards. */
+export var genListItemSharedStyle = function genListItemSharedStyle(token, config) {
+  var _objectSpread2;
+  var componentCls = token.componentCls,
+    antCls = token.antCls,
+    colorSuccess = token.colorSuccess,
+    colorInfo = token.colorInfo,
+    colorWarning = token.colorWarning,
+    colorError = token.colorError,
+    colorTextHeading = token.colorTextHeading,
+    colorText = token.colorText,
+    boxShadow = token.boxShadow,
+    borderRadiusLG = token.borderRadiusLG,
+    fontSize = token.fontSize,
+    lineHeight = token.lineHeight,
+    notificationBg = token.notificationBg,
+    notificationPadding = token.notificationPadding,
+    notificationMarginEdge = token.notificationMarginEdge,
+    margin = token.margin,
+    calc = token.calc;
+  var noticeCls = "".concat(componentCls, "-notice");
+  var _genCssVar = genCssVar(antCls, 'notification'),
+    _genCssVar2 = _slicedToArray(_genCssVar, 2),
+    varName = _genCssVar2[0],
+    varRef = _genCssVar2[1];
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, noticeCls, _objectSpread(_objectSpread(_objectSpread((_objectSpread2 = {
+    // ============================== Base ==============================
+    position: 'absolute',
+    width: config.width,
+    maxWidth: "calc(100vw - ".concat(unit(calc(notificationMarginEdge).mul(2).equal()), ")"),
+    padding: notificationPadding,
+    pointerEvents: 'auto'
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread2, varName('icon-font-size'), config.iconFontSize), varName('title-font-size'), config.titleFontSize), varName('title-line-height'), config.titleLineHeight), "boxSizing", 'border-box'), "color", colorText), "background", notificationBg), "borderRadius", borderRadiusLG), "boxShadow", boxShadow), "fontSize", fontSize), "lineHeight", lineHeight), _defineProperty(_defineProperty(_objectSpread2, "wordWrap", 'break-word'), "overflow", 'visible')), genNotificationItemMotionStyle(token)), config.noticeStyle), {}, {
+    '&::after': {
+      position: 'absolute',
+      insetInline: 0,
+      top: calc(margin).mul(-1).equal(),
+      height: margin,
+      content: '""'
+    }
+  }, config.typeStyle && {
+    '&-success': {
+      background: varRef('color-success-bg', notificationBg)
+    },
+    '&-error': {
+      background: varRef('color-error-bg', notificationBg)
+    },
+    '&-info': {
+      background: varRef('color-info-bg', notificationBg)
+    },
+    '&-warning': {
+      background: varRef('color-warning-bg', notificationBg)
+    }
+  })), "".concat(noticeCls, "-wrapper"), _objectSpread({
+    display: 'flex'
+  }, config.contentStyle)), "".concat(noticeCls, "-title"), {
+    color: colorTextHeading,
+    fontSize: varRef('title-font-size'),
+    lineHeight: varRef('title-line-height')
+  }), "".concat(noticeCls, "-icon"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    flex: 'none',
+    fontSize: varRef('icon-font-size'),
+    lineHeight: 1
+  }, "&".concat(noticeCls, "-icon-success"), {
+    color: colorSuccess
+  }), "&".concat(noticeCls, "-icon-info, &").concat(noticeCls, "-icon-loading"), {
+    color: colorInfo
+  }), "&".concat(noticeCls, "-icon-warning"), {
+    color: colorWarning
+  }), "&".concat(noticeCls, "-icon-error"), {
+    color: colorError
+  }));
+};
+// =========================== Notification ===========================
+/** Generate the complete notice item styles for Notification. */
+var genNotificationItemStyle = function genNotificationItemStyle(token) {
+  var componentCls = token.componentCls,
+    progressBg = token.progressBg,
+    notificationProgressHeight = token.notificationProgressHeight,
+    fontSize = token.fontSize,
+    borderRadiusLG = token.borderRadiusLG,
+    width = token.width,
+    notificationIconSize = token.notificationIconSize,
+    colorText = token.colorText,
+    motionDurationMid = token.motionDurationMid,
+    fontSizeLG = token.fontSizeLG,
+    lineHeightLG = token.lineHeightLG,
+    marginSM = token.marginSM,
+    marginXS = token.marginXS,
+    paddingLG = token.paddingLG,
+    notificationPaddingVertical = token.notificationPaddingVertical,
+    notificationPaddingHorizontal = token.notificationPaddingHorizontal,
+    notificationCloseButtonSize = token.notificationCloseButtonSize,
+    colorIcon = token.colorIcon,
+    borderRadiusSM = token.borderRadiusSM,
+    colorIconHover = token.colorIconHover,
+    colorBgTextHover = token.colorBgTextHover,
+    colorBgTextActive = token.colorBgTextActive;
+  var noticeCls = "".concat(componentCls, "-notice");
+  return _objectSpread(_objectSpread({}, genListItemSharedStyle(token, {
+    width: width,
+    iconFontSize: notificationIconSize,
+    titleFontSize: fontSizeLG,
+    titleLineHeight: lineHeightLG,
+    contentStyle: {
+      alignItems: 'flex-start',
+      gap: marginSM
+    },
+    typeStyle: true
+  })), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(noticeCls, "-section"), {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 'auto',
+    gap: marginXS,
+    minWidth: 0
+  }), "".concat(noticeCls, "-description"), {
+    color: colorText,
+    fontSize: fontSize
+  }), "".concat(noticeCls, "-closable"), _defineProperty(_defineProperty({}, "".concat(noticeCls, "-title, ").concat(noticeCls, "-description"), {
+    paddingInlineEnd: paddingLG
+  }), "".concat(noticeCls, "-title + ").concat(noticeCls, "-description"), {
+    paddingInlineEnd: 0
+  })), "".concat(noticeCls, "-close"), _objectSpread({
+    position: 'absolute',
+    top: notificationPaddingVertical,
+    insetInlineEnd: notificationPaddingHorizontal,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: notificationCloseButtonSize,
+    height: notificationCloseButtonSize,
+    color: colorIcon,
+    background: 'none',
+    border: 'none',
+    borderRadius: borderRadiusSM,
+    outline: 'none',
+    transition: ['color', 'background-color'].map(function (prop) {
+      return "".concat(prop, " ").concat(motionDurationMid);
+    }).join(', '),
+    '&:hover': {
+      color: colorIconHover,
+      backgroundColor: colorBgTextHover
+    },
+    '&:active': {
+      backgroundColor: colorBgTextActive
+    }
+  }, genFocusStyle(token))), "".concat(noticeCls, "-progress"), {
+    position: 'absolute',
+    bottom: 0,
+    display: 'block',
+    appearance: 'none',
+    inlineSize: "calc(100% - ".concat(unit(borderRadiusLG), " * 2)"),
+    blockSize: notificationProgressHeight,
+    border: 0,
+    left: {
+      _skip_check_: true,
+      value: borderRadiusLG
+    },
+    right: {
+      _skip_check_: true,
+      value: borderRadiusLG
+    },
+    '&, &::-webkit-progress-bar': {
+      borderRadius: borderRadiusLG,
+      backgroundColor: 'rgba(0, 0, 0, 0.04)'
+    },
+    '&::-moz-progress-bar': {
+      background: progressBg
+    },
+    '&::-webkit-progress-value': {
+      borderRadius: borderRadiusLG,
+      background: progressBg
+    }
+  }), "".concat(noticeCls, "-actions"), {
+    float: 'right',
+    marginTop: marginSM
+  }));
+};
+/** Generate standalone PurePanel styles for Notification. */
+export var genPurePanelStyle = function genPurePanelStyle(token) {
+  var componentCls = token.componentCls,
+    width = token.width;
+  var noticeCls = "".concat(componentCls, "-notice");
+  var actionsCls = "".concat(noticeCls, "-actions");
+  var notificationItemStyle = genNotificationItemStyle(token);
+  return _defineProperty({}, "".concat(noticeCls, "-pure-panel"), _objectSpread(_objectSpread({
+    width: width,
+    maxWidth: '100%'
+  }, notificationItemStyle), {}, _defineProperty(_defineProperty({}, noticeCls, _objectSpread(_objectSpread({}, notificationItemStyle[noticeCls]), {}, {
+    position: 'relative',
+    width: '100%',
+    maxWidth: '100%'
+  })), actionsCls, _objectSpread(_objectSpread({}, notificationItemStyle[actionsCls]), {}, {
+    float: 'none',
+    textAlign: 'end'
+  }))));
+};
+// ============================== Export ==============================
+/** Wrap Notification item styles under the component root selector. */
+var genNotificationStyle = function genNotificationStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty({}, componentCls, genNotificationItemStyle(token));
+};
+export default genNotificationStyle;

package/es/notification/style/placement.d.ts

@@ -0,0 +1,6 @@
+import type { CSSObject } from '@996-design/996-cssinjs';
+import type { NotificationToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+/** Wrap placement styles under the component root selector. */
+declare const genNotificationPlacementStyle: GenerateStyle<NotificationToken, CSSObject>;
+export default genNotificationPlacementStyle;

package/es/notification/style/placement.js

@@ -0,0 +1,139 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { unit } from '@996-design/996-cssinjs';
+import { NotificationPlacements } from '../interface.js';
+var notificationMarginEdgeVar = '--notification-margin-edge';
+// ============================== Shared ==============================
+/** Resolve the opposite block and inline edges for a placement. */
+var getPlacementOffset = function getPlacementOffset(vertical, horizontal) {
+  return {
+    blockEnd: vertical === 'top' ? 'bottom' : 'top',
+    inlineEnd: horizontal === 'left' ? 'right' : 'left'
+  };
+};
+/** Convert placement offsets into the transform used by notice motion. */
+var getMotionTransform = function getMotionTransform(motionOffset) {
+  var _motionOffset$x, _motionOffset$y;
+  var x = (_motionOffset$x = motionOffset === null || motionOffset === void 0 ? void 0 : motionOffset.x) !== null && _motionOffset$x !== void 0 ? _motionOffset$x : '0';
+  var y = (_motionOffset$y = motionOffset === null || motionOffset === void 0 ? void 0 : motionOffset.y) !== null && _motionOffset$y !== void 0 ? _motionOffset$y : '0';
+  return "translate3d(".concat(x, ", ").concat(y, ", 0) scale(var(--notification-scale, 1))");
+};
+/** Build the placement metadata used by position and motion styles. */
+var getPlacementStyleConfig = function getPlacementStyleConfig(placement, motionOffset) {
+  var vertical = placement.startsWith('bottom') ? 'bottom' : 'top';
+  var horizontal = placement.endsWith('Right') ? 'right' : 'left';
+  var _getPlacementOffset = getPlacementOffset(vertical, horizontal),
+    blockEnd = _getPlacementOffset.blockEnd,
+    inlineEnd = _getPlacementOffset.inlineEnd;
+  var isCenterPlacement = placement === 'top' || placement === 'bottom';
+  var offset = placement === 'top' || placement.endsWith('Left') ? "-".concat(motionOffset) : motionOffset;
+  return {
+    placement: placement,
+    vertical: vertical,
+    blockEnd: blockEnd,
+    horizontal: horizontal,
+    inlineEnd: inlineEnd,
+    motionOffset: isCenterPlacement ? {
+      x: '-50%',
+      y: offset
+    } : {
+      x: offset
+    },
+    baseMotionOffset: isCenterPlacement ? {
+      x: '-50%'
+    } : undefined,
+    isCenterPlacement: isCenterPlacement
+  };
+};
+/** Get the list direction for a vertical placement. */
+var getPlacementFlexDirection = function getPlacementFlexDirection(vertical) {
+  return vertical === 'bottom' ? 'column-reverse' : 'column';
+};
+/** Keep configured top/bottom as the visible notice edge while list padding preserves shadows. */
+var getPlacementInset = function getPlacementInset(vertical) {
+  var marginEdge = "var(".concat(notificationMarginEdgeVar, ", 0px)");
+  return "calc(var(--notification-".concat(vertical, ", ").concat(marginEdge, ") - ").concat(marginEdge, ")");
+};
+/** Get the transform origin used by stacked notice scaling. */
+var getPlacementTransformOrigin = function getPlacementTransformOrigin(vertical) {
+  return vertical === 'bottom' ? 'center top' : 'center bottom';
+};
+/** Calculate the clip offset that preserves stack shadows. */
+var getStackShadowClipOffset = function getStackShadowClipOffset(token) {
+  return unit(token.calc(token.marginXXL).mul(-1).equal());
+};
+/** Build the default stack clip-path for a visible notice. */
+var getStackNoticeClipPath = function getStackNoticeClipPath(token) {
+  var offset = getStackShadowClipOffset(token);
+  return "inset(".concat(offset, " ").concat(offset, " ").concat(offset, " ").concat(offset, ")");
+};
+/** Build the collapsed stack clip-path for a placement. */
+var getPlacementStackClipPath = function getPlacementStackClipPath(token, vertical) {
+  var offset = getStackShadowClipOffset(token);
+  return vertical === 'bottom' ? "inset(".concat(offset, " ").concat(offset, " 50% ").concat(offset, ")") : "inset(50% ".concat(offset, " ").concat(offset, " ").concat(offset, ")");
+};
+// ============================= Placement =============================
+/** Generate styles for a single notification placement. */
+var genPlacementStyle = function genPlacementStyle(token, config) {
+  var componentCls = token.componentCls;
+  var placement = config.placement,
+    vertical = config.vertical,
+    blockEnd = config.blockEnd,
+    horizontal = config.horizontal,
+    inlineEnd = config.inlineEnd,
+    isCenterPlacement = config.isCenterPlacement;
+  var noticeCls = "".concat(componentCls, "-notice");
+  var noticeMotionCls = "".concat(noticeCls).concat(componentCls, "-fade");
+  // Transform used for enter start and leave end states.
+  var enterTransform = getMotionTransform(config.motionOffset);
+  // Transform used when fully visible; top/bottom keep translateX(-50%) for centering.
+  var baseTransform = getMotionTransform(config.baseMotionOffset);
+  var transformOrigin = getPlacementTransformOrigin(vertical);
+  return _defineProperty({}, "&".concat(componentCls, "-").concat(placement), _objectSpread(_objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, vertical, getPlacementInset(vertical)), blockEnd, 'auto'), "display", 'flex'), "flexDirection", getPlacementFlexDirection(vertical)), isCenterPlacement ? {
+    marginInline: 0,
+    left: '50%',
+    right: 'auto',
+    transform: 'translateX(-50%)'
+  } : _defineProperty(_defineProperty({}, horizontal, 0), inlineEnd, 'auto')), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, noticeCls, _objectSpread(_objectSpread(_defineProperty({}, vertical, 'var(--notification-y, 0)'), isCenterPlacement ? {
+    left: '50%',
+    transform: baseTransform
+  } : _defineProperty({}, horizontal, 'var(--notification-x, 0)')), {}, {
+    transformOrigin: transformOrigin
+  })), "".concat(noticeMotionCls, "-appear-prepare, ").concat(noticeMotionCls, "-enter-prepare"), {
+    opacity: 0,
+    transform: enterTransform,
+    transition: 'none'
+  }), "".concat(noticeMotionCls, "-appear-start, ").concat(noticeMotionCls, "-enter-start"), {
+    opacity: 0,
+    transform: enterTransform
+  }), "".concat(noticeMotionCls, "-appear-active, ").concat(noticeMotionCls, "-enter-active"), {
+    opacity: 1,
+    transform: baseTransform
+  }), "".concat(noticeMotionCls, "-leave-start"), {
+    opacity: 1,
+    transform: baseTransform
+  }), "".concat(noticeMotionCls, "-leave-active"), {
+    opacity: 0,
+    transform: enterTransform
+  }), "&".concat(componentCls, "-stack:not(").concat(componentCls, "-stack-expanded)"), _defineProperty(_defineProperty({}, noticeCls, {
+    clipPath: getPlacementStackClipPath(token, vertical)
+  }), "".concat(noticeCls, "[data-notification-index='0']"), {
+    clipPath: getStackNoticeClipPath(token)
+  }))));
+};
+/** Generate placement styles for all enabled notification placements. */
+var genNotificationPlacementRootStyle = function genNotificationPlacementRootStyle(token) {
+  var placements = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : NotificationPlacements;
+  var notificationMotionOffset = token.notificationMotionOffset;
+  var motionOffset = unit(notificationMotionOffset);
+  return _objectSpread({}, placements.reduce(function (styles, placement) {
+    return _objectSpread(_objectSpread({}, styles), genPlacementStyle(token, getPlacementStyleConfig(placement, motionOffset)));
+  }, {}));
+};
+// ============================== Export ==============================
+/** Wrap placement styles under the component root selector. */
+var genNotificationPlacementStyle = function genNotificationPlacementStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty({}, componentCls, genNotificationPlacementRootStyle(token));
+};
+export default genNotificationPlacementStyle;

package/es/notification/style.d.ts

@@ -0,0 +1,2 @@
+export * from './style/index';
+export { default } from './style/index';

package/es/notification/style.js

@@ -0,0 +1,3 @@
+import * as moduleNamespace from './style/index.js';
+export * from './style/index.js';
+export default moduleNamespace.default;

package/es/notification/useNotification.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { NotificationConfig, NotificationInstance } from './interface';
+type HolderProps = NotificationConfig & {
+    onAllRemoved?: VoidFunction;
+};
+export declare function useInternalNotification(notificationConfig?: HolderProps): readonly [NotificationInstance, React.ReactElement];
+export default function useNotification(notificationConfig?: NotificationConfig): readonly [NotificationInstance, React.ReactElement<unknown, string | React.JSXElementConstructor<any>>];
+export {};