@hanwenbo/x-taro-ui 0.0.1

package/es/components/notification/notification.js

@@ -0,0 +1,532 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import { usePressable } from "../../patterns";
+import { useTheme, withOpacity } from "../../theme";
+import { classNames } from "../../utils";
+import { resolveTaroAccessibilityProps } from "../../utils/taroProps";
+import { useConfigProvider } from "../configProvider";
+import { Icon } from "../icon";
+import { getNotificationPresentation, notificationIconMap, notificationTypography } from "./tokens";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var controllers = [];
+function registerController(controller) {
+  controllers.push(controller);
+  return function () {
+    var remainingControllers = controllers.filter(function (item) {
+      return item !== controller;
+    });
+    controllers.splice.apply(controllers, [0, controllers.length].concat(_toConsumableArray(remainingControllers)));
+  };
+}
+function activeController() {
+  for (var index = controllers.length - 1; index >= 0; index -= 1) {
+    if (controllers[index].fixed) return controllers[index];
+  }
+  return controllers[controllers.length - 1];
+}
+function normalizeTone(value) {
+  if (value === 'fail') return 'error';
+  if (value === 'default' || value === 'info' || value === 'success' || value === 'warning' || value === 'error') {
+    return value;
+  }
+  return 'info';
+}
+function renderNode(content, textStyle) {
+  if (typeof content === 'string' || typeof content === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: textStyle,
+      children: content
+    });
+  }
+  return content;
+}
+function getNodeLabel(content, fallback) {
+  return typeof content === 'string' || typeof content === 'number' ? String(content) : fallback;
+}
+var NotificationControl = function NotificationControl(_ref) {
+  var ariaLabel = _ref.ariaLabel,
+    children = _ref.children,
+    className = _ref.className,
+    dataSlot = _ref.dataSlot,
+    onPress = _ref.onPress,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 0.97 : _ref$scale,
+    style = _ref.style;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
+  var pressable = usePressable({
+    onPress: onPress,
+    scale: scale
+  });
+  return /*#__PURE__*/_jsx(View, _objectSpread(_objectSpread(_objectSpread({
+    "data-slot": dataSlot,
+    "data-state": pressable.pressed ? 'pressed' : 'idle'
+  }, resolveTaroAccessibilityProps('button', ariaLabel)), {}, {
+    tabIndex: 0,
+    className: className,
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
+    onKeyDown: function onKeyDown(event) {
+      var _preventDefault, _ref2;
+      var key = event.key;
+      if (key !== 'Enter' && key !== ' ' && key !== 'Spacebar') return;
+      (_preventDefault = (_ref2 = event).preventDefault) === null || _preventDefault === void 0 || _preventDefault.call(_ref2);
+      onPress();
+    }
+  }, pressable.handlers), {}, {
+    style: _objectSpread(_objectSpread(_objectSpread({}, style), pressable.style), {}, {
+      cursor: 'pointer',
+      boxShadow: focused ? "0 0 0 2px ".concat(withOpacity(theme.colors.ring, 0.28)) : 'none'
+    }),
+    children: children
+  }));
+};
+export var InternalNotification = function InternalNotification(props) {
+  var _ref3;
+  var _props$messageKey = props.messageKey,
+    messageKey = _props$messageKey === void 0 ? 'notification' : _props$messageKey,
+    title = props.title,
+    description = props.description,
+    content = props.content,
+    icon = props.icon,
+    _props$tone = props.tone,
+    tone = _props$tone === void 0 ? 'default' : _props$tone,
+    type = props.type,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'soft' : _props$variant,
+    _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 3000 : _props$duration,
+    visible = props.visible,
+    _props$fixed = props.fixed,
+    fixed = _props$fixed === void 0 ? false : _props$fixed,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'top' : _props$placement,
+    _props$closable = props.closable,
+    closable = _props$closable === void 0 ? false : _props$closable,
+    _props$actions = props.actions,
+    actions = _props$actions === void 0 ? [] : _props$actions,
+    items = props.items,
+    _props$emptyText = props.emptyText,
+    emptyText = _props$emptyText === void 0 ? '暂无通知' : _props$emptyText,
+    onClose = props.onClose,
+    onActionClick = props.onActionClick,
+    children = props.children,
+    className = props.className,
+    style = props.style;
+  var config = useConfigProvider();
+  var _useTheme2 = useTheme(),
+    theme = _useTheme2.theme;
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hiddenKeys = _useState4[0],
+    setHiddenKeys = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    imperativeParams = _useState6[0],
+    setImperativeParams = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    imperativeVisible = _useState8[0],
+    setImperativeVisible = _useState8[1];
+  var imperativeParamsRef = useRef(null);
+  var imperativeResetTimerRef = useRef(null);
+  var declarativeDescription = (_ref3 = content !== null && content !== void 0 ? content : description) !== null && _ref3 !== void 0 ? _ref3 : children;
+  var declarativeTone = normalizeTone(type !== null && type !== void 0 ? type : tone);
+  var controlledVisibility = visible !== undefined;
+  var hasItemCollection = items !== undefined;
+  var previousVisibleRef = useRef(visible);
+  var clearImperativeResetTimer = useCallback(function () {
+    if (!imperativeResetTimerRef.current) return;
+    clearTimeout(imperativeResetTimerRef.current);
+    imperativeResetTimerRef.current = null;
+  }, []);
+  var scheduleImperativeReset = useCallback(function () {
+    clearImperativeResetTimer();
+    imperativeResetTimerRef.current = setTimeout(function () {
+      imperativeParamsRef.current = null;
+      setImperativeParams(null);
+      imperativeResetTimerRef.current = null;
+    }, notificationTypography.transitionDuration);
+  }, [clearImperativeResetTimer]);
+  var closeImperative = useCallback(function (notify) {
+    var current = imperativeParamsRef.current;
+    if (!current) return;
+    setImperativeVisible(false);
+    if (notify) {
+      var _current$onClose;
+      (_current$onClose = current.onClose) === null || _current$onClose === void 0 || _current$onClose.call(current);
+      onClose === null || onClose === void 0 || onClose('notification-imperative');
+    }
+    scheduleImperativeReset();
+  }, [onClose, scheduleImperativeReset]);
+  var controller = useMemo(function () {
+    return {
+      fixed: fixed,
+      show: function show(params) {
+        clearImperativeResetTimer();
+        setHiddenKeys([]);
+        var nextParams = _objectSpread({
+          duration: 3000
+        }, params);
+        imperativeParamsRef.current = nextParams;
+        setImperativeParams(nextParams);
+        setImperativeVisible(true);
+      },
+      hide: function hide() {
+        setHiddenKeys([]);
+        closeImperative(false);
+      }
+    };
+  }, [clearImperativeResetTimer, closeImperative, fixed]);
+  useEffect(function () {
+    return registerController(controller);
+  }, [controller]);
+  useEffect(function () {
+    return function () {
+      clearImperativeResetTimer();
+    };
+  }, [clearImperativeResetTimer]);
+  useEffect(function () {
+    if (visible === true && previousVisibleRef.current === false) {
+      setHiddenKeys([]);
+    }
+    previousVisibleRef.current = visible;
+  }, [visible]);
+  var resolvedItems = useMemo(function () {
+    if (imperativeParams) {
+      return [{
+        key: 'notification-imperative',
+        title: imperativeParams.title,
+        description: imperativeParams.content,
+        tone: normalizeTone(imperativeParams.type),
+        duration: imperativeParams.duration,
+        closable: false
+      }];
+    }
+    if (items !== null && items !== void 0 && items.length) {
+      return items.map(function (item) {
+        var _ref4, _item$type;
+        return _objectSpread(_objectSpread({}, item), {}, {
+          tone: normalizeTone((_ref4 = (_item$type = item.type) !== null && _item$type !== void 0 ? _item$type : item.tone) !== null && _ref4 !== void 0 ? _ref4 : declarativeTone)
+        });
+      });
+    }
+    if (title === undefined && declarativeDescription === undefined) {
+      return [];
+    }
+    return [{
+      key: messageKey,
+      title: title,
+      description: declarativeDescription,
+      icon: icon,
+      tone: declarativeTone,
+      variant: variant,
+      duration: duration,
+      closable: closable,
+      actions: actions
+    }];
+  }, [actions, closable, declarativeDescription, declarativeTone, duration, icon, imperativeParams, items, messageKey, title, variant]);
+  useEffect(function () {
+    var currentKeys = new Set(resolvedItems.map(function (item) {
+      return item.key;
+    }));
+    setHiddenKeys(function (previous) {
+      var next = previous.filter(function (key) {
+        return currentKeys.has(key);
+      });
+      return next.length === previous.length ? previous : next;
+    });
+  }, [resolvedItems]);
+  var notifyClosed = useCallback(function (key) {
+    onClose === null || onClose === void 0 || onClose(key);
+  }, [onClose]);
+  var closeNotification = useCallback(function (key) {
+    if (key === 'notification-imperative') {
+      closeImperative(true);
+      return;
+    }
+    if (controlledVisibility && !hasItemCollection) {
+      notifyClosed(key);
+      return;
+    }
+    setHiddenKeys(function (previous) {
+      return Array.from(new Set([].concat(_toConsumableArray(previous), [key])));
+    });
+    notifyClosed(key);
+  }, [closeImperative, controlledVisibility, hasItemCollection, notifyClosed]);
+  var visibleItems = useMemo(function () {
+    return resolvedItems.filter(function (item) {
+      return !hiddenKeys.includes(item.key);
+    });
+  }, [hiddenKeys, resolvedItems]);
+  var isHostVisible = imperativeParams !== null ? imperativeVisible : visible !== null && visible !== void 0 ? visible : visibleItems.length > 0;
+  useEffect(function () {
+    if (!isHostVisible) return undefined;
+    var timers = visibleItems.map(function (item) {
+      var _item$duration;
+      var currentDuration = (_item$duration = item.duration) !== null && _item$duration !== void 0 ? _item$duration : duration;
+      if (!currentDuration || currentDuration <= 0) return undefined;
+      return setTimeout(function () {
+        return closeNotification(item.key);
+      }, currentDuration);
+    }).filter(Boolean);
+    return function () {
+      return timers.forEach(function (timer) {
+        return clearTimeout(timer);
+      });
+    };
+  }, [closeNotification, duration, isHostVisible, visibleItems]);
+  var shouldShow = imperativeParams !== null || (fixed ? resolvedItems.length > 0 : visible !== null && visible !== void 0 ? visible : resolvedItems.length > 0);
+  if (resolvedItems.length === 0) {
+    var shouldShowEmpty = Array.isArray(items) && !fixed && (visible !== null && visible !== void 0 ? visible : true);
+    if (!shouldShowEmpty) return null;
+    return /*#__PURE__*/_jsx(View, {
+      "data-slot": "notification-empty",
+      className: classNames("".concat(config.prefixCls, "-notification"), className),
+      style: style,
+      children: renderNode(emptyText, {
+        color: theme.colors['muted-foreground'],
+        fontSize: 14
+      })
+    });
+  }
+  if (!shouldShow) return null;
+  var fixedPositionStyle = placement === 'bottom' ? {
+    bottom: 20,
+    transform: "translateY(".concat(isHostVisible ? -notificationTypography.transitionOffset : notificationTypography.transitionOffset, "px)")
+  } : {
+    top: 20,
+    transform: "translateY(".concat(isHostVisible ? notificationTypography.transitionOffset : -notificationTypography.transitionOffset, "px)")
+  };
+  return /*#__PURE__*/_jsx(View, {
+    "data-slot": "notification-host",
+    "data-placement": fixed ? placement : 'inline',
+    "data-visible": isHostVisible ? 'true' : 'false',
+    className: classNames("".concat(config.prefixCls, "-notification"), fixed && "".concat(config.prefixCls, "-notification--fixed"), fixed && "".concat(config.prefixCls, "-notification--").concat(placement), className),
+    style: _objectSpread(_objectSpread({
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: fixed ? 'center' : 'stretch',
+      width: '100%',
+      minWidth: 0,
+      gap: 12
+    }, fixed ? _objectSpread({
+      position: 'fixed',
+      left: 0,
+      right: 0,
+      zIndex: 1200,
+      pointerEvents: 'none',
+      opacity: isHostVisible ? 1 : 0,
+      transition: 'opacity var(--x-duration-overlayDefault) var(--x-easing-standard), transform var(--x-duration-overlayDefault) var(--x-easing-standard)'
+    }, fixedPositionStyle) : {}), style),
+    children: visibleItems.map(function (item) {
+      var _item$type2, _item$variant, _item$icon, _item$actions, _item$closable;
+      var currentTone = normalizeTone((_item$type2 = item.type) !== null && _item$type2 !== void 0 ? _item$type2 : item.tone);
+      var currentVariant = (_item$variant = item.variant) !== null && _item$variant !== void 0 ? _item$variant : variant;
+      var presentation = getNotificationPresentation(currentTone, currentVariant, theme.colors);
+      var descriptionContent = item.description;
+      return /*#__PURE__*/_jsxs(View, {
+        "data-slot": "notification-card",
+        "data-type": currentTone === 'error' ? 'fail' : currentTone,
+        "data-tone": currentTone,
+        "data-variant": currentVariant,
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: "".concat(config.prefixCls, "-notification__item"),
+        style: _objectSpread({
+          boxSizing: 'border-box',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          width: fixed ? 'auto' : '100%',
+          minWidth: fixed ? 300 : 0,
+          maxWidth: 448,
+          marginLeft: fixed ? 14 : 0,
+          marginRight: fixed ? 14 : 0,
+          gap: notificationTypography.gap,
+          paddingLeft: notificationTypography.paddingX,
+          paddingRight: notificationTypography.paddingX,
+          paddingTop: notificationTypography.paddingY,
+          paddingBottom: notificationTypography.paddingY,
+          fontSize: notificationTypography.contentFontSize,
+          lineHeight: '22px',
+          borderRadius: notificationTypography.radius,
+          borderWidth: 1,
+          borderStyle: 'solid',
+          pointerEvents: 'auto',
+          backdropFilter: 'blur(4px)',
+          WebkitBackdropFilter: 'blur(4px)'
+        }, presentation.cardStyle),
+        children: [/*#__PURE__*/_jsx(View, {
+          "data-slot": "notification-icon",
+          className: "".concat(config.prefixCls, "-notification__icon"),
+          style: {
+            width: notificationTypography.iconSize,
+            height: notificationTypography.iconSize,
+            marginTop: 1.75,
+            flexShrink: 0
+          },
+          children: (_item$icon = item.icon) !== null && _item$icon !== void 0 ? _item$icon : /*#__PURE__*/_jsx(Icon, {
+            name: notificationIconMap[currentTone],
+            size: notificationTypography.iconSize,
+            color: presentation.iconColor,
+            block: true
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          className: "".concat(config.prefixCls, "-notification__body"),
+          style: {
+            flex: 1,
+            minWidth: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: notificationTypography.contentGap,
+            fontSize: notificationTypography.contentFontSize,
+            lineHeight: notificationTypography.contentLineHeight
+          },
+          children: [item.title !== undefined && item.title !== null ? /*#__PURE__*/_jsx(View, {
+            "data-slot": "notification-title",
+            className: "".concat(config.prefixCls, "-notification__title"),
+            style: {
+              fontSize: notificationTypography.titleFontSize,
+              lineHeight: notificationTypography.titleLineHeight,
+              overflowWrap: 'anywhere',
+              wordBreak: 'break-word'
+            },
+            children: renderNode(item.title, {
+              fontSize: notificationTypography.titleFontSize,
+              fontWeight: 600,
+              lineHeight: notificationTypography.titleLineHeight,
+              overflowWrap: 'anywhere',
+              wordBreak: 'break-word',
+              color: presentation.titleColor
+            })
+          }) : null, descriptionContent !== undefined && descriptionContent !== null ? /*#__PURE__*/_jsx(View, {
+            "data-slot": "notification-content",
+            className: "".concat(config.prefixCls, "-notification__content"),
+            style: {
+              fontSize: notificationTypography.contentFontSize,
+              lineHeight: notificationTypography.contentLineHeight,
+              overflowWrap: 'anywhere',
+              wordBreak: 'break-word'
+            },
+            children: renderNode(descriptionContent, {
+              fontSize: notificationTypography.contentFontSize,
+              lineHeight: notificationTypography.contentLineHeight,
+              overflowWrap: 'anywhere',
+              wordBreak: 'break-word',
+              color: presentation.contentColor
+            })
+          }) : null, (_item$actions = item.actions) !== null && _item$actions !== void 0 && _item$actions.length ? /*#__PURE__*/_jsx(View, {
+            "data-slot": "notification-actions",
+            style: {
+              display: 'flex',
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              gap: notificationTypography.actionsGap,
+              marginTop: notificationTypography.actionsTop
+            },
+            children: item.actions.map(function (action) {
+              return /*#__PURE__*/_jsx(NotificationControl, {
+                dataSlot: "notification-action",
+                ariaLabel: getNodeLabel(action.label, "\u901A\u77E5\u64CD\u4F5C ".concat(action.key)),
+                onPress: function onPress() {
+                  return onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick(action.key, item.key);
+                },
+                style: {
+                  paddingTop: 8,
+                  paddingBottom: 8,
+                  paddingLeft: 14,
+                  paddingRight: 14,
+                  borderRadius: 'var(--x-radius-full)',
+                  borderWidth: 1,
+                  borderStyle: 'solid',
+                  borderColor: presentation.actionBorderColor,
+                  backgroundColor: presentation.actionBackgroundColor,
+                  color: action.danger ? theme.colors.destructive : presentation.titleColor
+                },
+                children: renderNode(action.label, {
+                  fontSize: notificationTypography.actionFontSize,
+                  textAlign: 'center',
+                  overflowWrap: 'anywhere',
+                  color: action.danger ? theme.colors.destructive : presentation.titleColor
+                })
+              }, action.key);
+            })
+          }) : null]
+        }), ((_item$closable = item.closable) !== null && _item$closable !== void 0 ? _item$closable : closable) ? /*#__PURE__*/_jsx(NotificationControl, {
+          dataSlot: "notification-close",
+          ariaLabel: "\u5173\u95ED\u901A\u77E5",
+          scale: 0.94,
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 24,
+            height: 24,
+            marginTop: 0,
+            flexShrink: 0,
+            borderRadius: 'var(--x-radius-sm)'
+          },
+          onPress: function onPress() {
+            return closeNotification(item.key);
+          },
+          children: /*#__PURE__*/_jsx(Icon, {
+            name: "X",
+            size: notificationTypography.closeIconSize,
+            color: presentation.closeColor,
+            block: true
+          })
+        }) : null]
+      }, item.key);
+    })
+  });
+};
+InternalNotification.displayName = 'InternalNotification';
+export var Notification = InternalNotification;
+Notification.show = function (params) {
+  var _activeController;
+  (_activeController = activeController()) === null || _activeController === void 0 || _activeController.show(params);
+};
+Notification.hide = function () {
+  var _activeController2;
+  (_activeController2 = activeController()) === null || _activeController2 === void 0 || _activeController2.hide();
+};
+export var NotificationPortalHost = function NotificationPortalHost(_ref5) {
+  var _ref5$zIndex = _ref5.zIndex,
+    zIndex = _ref5$zIndex === void 0 ? 1200 : _ref5$zIndex;
+  return /*#__PURE__*/_jsx(Notification, {
+    fixed: true,
+    style: {
+      zIndex: zIndex
+    }
+  });
+};
+Notification.displayName = 'Notification';
+export default Notification;

package/es/components/notification/tokens.d.ts

@@ -0,0 +1,43 @@
+import type { ThemeColors } from '../../theme/types';
+import type { NotificationTone, NotificationVariant } from './types';
+export declare const notificationIconMap: {
+    readonly default: "Bell";
+    readonly info: "Info";
+    readonly success: "CheckCircle2";
+    readonly warning: "AlertCircle";
+    readonly error: "XCircle";
+};
+export declare function getToneAccentColor(tone: NotificationTone, colors: ThemeColors): string;
+export declare function getNotificationPresentation(tone: NotificationTone, variant: NotificationVariant, colors: ThemeColors): {
+    accent: string;
+    cardStyle: {
+        backgroundColor: string;
+        borderColor: string;
+        boxShadow: string;
+    };
+    titleColor: string;
+    contentColor: string;
+    iconColor: string;
+    closeColor: string;
+    actionBorderColor: string;
+    actionBackgroundColor: string;
+};
+export declare const notificationTypography: {
+    readonly titleFontSize: 14;
+    readonly contentFontSize: 14;
+    readonly actionFontSize: 12;
+    readonly titleLineHeight: "20px";
+    readonly contentLineHeight: `${number}px`;
+    readonly iconSize: 17.5;
+    readonly closeIconSize: 16;
+    readonly radius: "var(--x-notification-radius)";
+    readonly paddingX: 14;
+    readonly paddingY: 10.5;
+    readonly gap: 10.5;
+    readonly contentGap: 1.75;
+    readonly actionsGap: 12;
+    readonly actionsTop: 12;
+    readonly transitionOffset: 14;
+    readonly transitionDuration: 300;
+};
+//# sourceMappingURL=tokens.d.ts.map

package/es/components/notification/tokens.js

@@ -0,0 +1,95 @@
+import { designSystemTypography, withOpacity } from "../../theme";
+import { mixSolidColors } from "../../theme/runtime/componentTokens";
+export var notificationIconMap = {
+  default: 'Bell',
+  info: 'Info',
+  success: 'CheckCircle2',
+  warning: 'AlertCircle',
+  error: 'XCircle'
+};
+function mixAccentColor(accent, base, weight) {
+  return mixSolidColors(accent, base, weight);
+}
+export function getToneAccentColor(tone, colors) {
+  switch (tone) {
+    case 'info':
+      return colors.primary;
+    case 'success':
+      return colors.success;
+    case 'warning':
+      return colors.warning;
+    case 'error':
+      return colors.destructive;
+    case 'default':
+    default:
+      return colors.foreground;
+  }
+}
+export function getNotificationPresentation(tone, variant, colors) {
+  var accent = getToneAccentColor(tone, colors);
+  var shadow = 'var(--x-notification-shadow)';
+  if (variant === 'solid') {
+    return {
+      accent: accent,
+      cardStyle: {
+        backgroundColor: accent,
+        borderColor: accent,
+        boxShadow: shadow
+      },
+      titleColor: colors['primary-foreground'],
+      contentColor: colors['primary-foreground'],
+      iconColor: colors['primary-foreground'],
+      closeColor: colors['primary-foreground'],
+      actionBorderColor: withOpacity(colors.background, 0.35),
+      actionBackgroundColor: withOpacity(colors.background, 0.08)
+    };
+  }
+  if (variant === 'outline') {
+    return {
+      accent: accent,
+      cardStyle: {
+        backgroundColor: colors.background,
+        borderColor: mixAccentColor(accent, colors.border, 0.45),
+        boxShadow: shadow
+      },
+      titleColor: colors.foreground,
+      contentColor: colors['muted-foreground'],
+      iconColor: accent,
+      closeColor: colors['muted-foreground'],
+      actionBorderColor: mixAccentColor(accent, colors.border, 0.45),
+      actionBackgroundColor: colors.background
+    };
+  }
+  return {
+    accent: accent,
+    cardStyle: {
+      backgroundColor: mixAccentColor(accent, colors.card, 0.1),
+      borderColor: mixAccentColor(accent, colors.border, 0.28),
+      boxShadow: shadow
+    },
+    titleColor: colors.foreground,
+    contentColor: colors['muted-foreground'],
+    iconColor: accent,
+    closeColor: colors['muted-foreground'],
+    actionBorderColor: mixAccentColor(accent, colors.border, 0.28),
+    actionBackgroundColor: colors.background
+  };
+}
+export var notificationTypography = {
+  titleFontSize: designSystemTypography.sizes.sm,
+  contentFontSize: designSystemTypography.sizes.sm,
+  actionFontSize: designSystemTypography.sizes.xs,
+  titleLineHeight: '20px',
+  contentLineHeight: "".concat(26 * (14 / 16), "px"),
+  iconSize: 17.5,
+  closeIconSize: 16,
+  radius: 'var(--x-notification-radius)',
+  paddingX: 14,
+  paddingY: 10.5,
+  gap: 10.5,
+  contentGap: 1.75,
+  actionsGap: 12,
+  actionsTop: 12,
+  transitionOffset: 14,
+  transitionDuration: 300
+};