@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/NotificationBadge.css

@@ -1,217 +1,217 @@
 @layer _.a {
-  .sd131 {
+  .sd151 {
     display: flex;
   }
 
-  .sk131 {
+  .sk151 {
     display: none;
   }
 
-  .uk131 {
+  .uk151 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-a131 {
+  .-_6BNtrc-a151 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b131 {
+  .-_6BNtrc-b151 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-c131 {
+  .-_6BNtrc-c151 {
     --fs: pow(1.125, 0);
   }
 
-  .vx131 {
+  .vx151 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb131 {
+  .xb151 {
     font-weight: 400;
   }
 
-  ._xa131 {
+  ._xa151 {
     font-synthesis-weight: none;
   }
 
-  ._Fd131 {
+  ._Fd151 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .px131 {
+  .px151 {
     color: #fff;
   }
 
-  .ph131 {
+  .ph151 {
     color: lch(from var(--g, var(--s2-container-bg)) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  ._Ca131 {
+  ._Ca151 {
     justify-content: center;
   }
 
-  .eb131 {
+  .eb151 {
     align-items: center;
   }
 
-  .gqMFGYc131 {
+  .gqMFGYc151 {
     background-color: var(--g);
   }
 
-  .FRuFGYc131 {
+  .FRuFGYc151 {
     height: var(--F);
   }
 
-  .fa131 {
+  .fa151 {
     aspect-ratio: 1;
     aspect-ratio: 1;
   }
 
-  .ZK131 {
+  .ZK151 {
     width: max-content;
   }
 
-  .Sv131 {
+  .Sv151 {
     padding-inline-start: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .Rv131 {
+  .Rv151 {
     padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .oh131 {
+  .oh151 {
     border-start-start-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .nh131 {
+  .nh151 {
     border-start-end-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .kh131 {
+  .kh151 {
     border-end-start-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .jh131 {
+  .jh151 {
     border-end-end-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .-g_-g2131 {
+  .-g_-g2151 {
     --g: light-dark(#3b63fb, #4069fd);
   }
 
-  .-g_-g_c131 {
+  .-g_-g_c151 {
     --g: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  .-F_-Fk131 {
+  .-F_-Fk151 {
     --F: calc(.75rem * var(--s2-scale));
   }
 
-  .-F_-FLb8KJ131 {
+  .-F_-FLb8KJ151 {
     --F: 1.28571em;
   }
 
-  .-F_-Fi131 {
+  .-F_-Fi151 {
     --F: calc(.5rem * var(--s2-scale));
   }
 
-  .-F_-Ft131 {
+  .-F_-Ft151 {
     --F: calc(1rem * var(--s2-scale));
   }
 
-  .-F_-Fm131 {
+  .-F_-Fm151 {
     --F: calc(1.125rem * var(--s2-scale));
   }
 
-  .-F_-Fspvr8c131 {
+  .-F_-Fspvr8c151 {
     --F: .857143em;
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb131:lang(ar) {
+  .ucJ9TBTb151:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUweb131:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb151:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }
 
 @layer _.c {
-  .ud3Euai131:lang(he) {
+  .ud3Euai151:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea131:lang(ja) {
+  .uea151:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb131:lang(ko) {
+  .ugb151:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd131:lang(zh) {
+  .uhd151:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje131:lang(zh-hant) {
+  .uje151:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl131:lang(zh-HK) {
+  .u2NhKxcl151:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic131:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic151:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .plb131 {
+    .plb151 {
       color: buttontext;
     }
 
-    ._jlf131 {
+    ._jlf151 {
       border-style: solid;
     }
 
-    ._klb131 {
+    ._klb151 {
       border-top-width: 1px;
     }
 
-    .hlb131 {
+    .hlb151 {
       border-bottom-width: 1px;
     }
 
-    .mlb131 {
+    .mlb151 {
       border-inline-start-width: 1px;
     }
 
-    .llb131 {
+    .llb151 {
       border-inline-end-width: 1px;
     }
 
-    .ila131 {
+    .ila151 {
       border-color: buttonborder;
     }
 
-    .-g_-lgb131 {
+    .-g_-lgb151 {
       --g: ButtonFace;
     }
   }

package/dist/private/NotificationBadge.css.map

@@ -1 +1 @@
-{"mappings":"AAqDc;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/NotificationBadge.tsx"],"sourcesContent":["/*\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFormatter} from '@internationalized/number';\nimport React, {createContext, forwardRef} from 'react';\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface NotificationBadgeStyleProps {\n  /**\n   * The size of the notification badge.\n   *\n   * @default 'S'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface NotificationBadgeProps\n  extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {\n  /**\n   * The value to be displayed in the notification badge.\n   */\n  value?: number | null;\n}\n\ninterface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {\n  isDisabled?: boolean;\n  staticColor?: 'black' | 'white' | 'auto';\n}\n\nexport const NotificationBadgeContext =\n  createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(\n    null\n  );\n\nconst badge = style(\n  {\n    display: {\n      default: 'flex',\n      isDisabled: 'none'\n    },\n    font: 'ui',\n    color: {\n      default: 'white',\n      isStaticColor: 'auto',\n      forcedColors: 'ButtonText'\n    },\n    fontSize: {\n      size: {\n        S: 'ui-xs',\n        M: 'ui-xs',\n        L: 'ui-sm',\n        XL: 'ui'\n      }\n    },\n    borderStyle: {\n      forcedColors: 'solid'\n    },\n    borderWidth: {\n      forcedColors: '[1px]'\n    },\n    borderColor: {\n      forcedColors: 'ButtonBorder'\n    },\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: {\n      default: 'accent',\n      isStaticColor: 'transparent-overlay-1000',\n      forcedColors: 'ButtonFace'\n    },\n    height: {\n      size: {\n        S: {\n          default: 12,\n          isIndicatorOnly: 8\n        },\n        M: {\n          default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible\n          isIndicatorOnly: 8\n        },\n        L: {\n          default: 16,\n          isIndicatorOnly: fontRelative(12)\n        },\n        XL: {\n          default: 18,\n          isIndicatorOnly: fontRelative(12)\n        }\n      }\n    },\n    aspectRatio: {\n      isIndicatorOnly: 'square',\n      isSingleDigit: 'square'\n    },\n    width: 'max',\n    paddingX: {\n      isDoubleDigit: 'edge-to-text'\n    },\n    borderRadius: 'pill'\n  },\n  getAllowedOverrides()\n);\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(\n  props: NotificationBadgeProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);\n  let {\n    size = 'S',\n    value,\n    isDisabled = false,\n    staticColor,\n    ...otherProps\n  } = props as NotificationBadgeContextProps;\n  let domRef = useDOMRef(ref);\n  let {locale} = useLocale();\n  let formattedValue = '';\n\n  let isIndicatorOnly = false;\n  let isSingleDigit = false;\n  let isDoubleDigit = false;\n\n  if (value == null) {\n    isIndicatorOnly = true;\n  } else if (value <= 0) {\n    throw new Error('Value cannot be negative or zero');\n  } else if (!Number.isInteger(value)) {\n    throw new Error('Value must be a positive integer');\n  } else {\n    formattedValue = new NumberFormatter(locale).format(Math.min(value, 99));\n    let length = (Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1) | 0; // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)\n    if (length === 1) {\n      isSingleDigit = true;\n    } else if (length === 2) {\n      isDoubleDigit = true;\n    }\n\n    if (value > 99) {\n      formattedValue = stringFormatter.format('notificationbadge.plus', {\n        notifications: formattedValue\n      });\n    }\n  }\n\n  let ariaLabel = props['aria-label'] || undefined;\n  if (ariaLabel === undefined && isIndicatorOnly) {\n    ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');\n  }\n\n  return (\n    <span\n      {...filterDOMProps(otherProps, {labelable: true})}\n      role={ariaLabel && 'img'}\n      aria-label={ariaLabel}\n      className={\n        (props.UNSAFE_className || '') +\n        badge(\n          {\n            size,\n            isIndicatorOnly,\n            isSingleDigit,\n            isDoubleDigit,\n            isDisabled,\n            isStaticColor: !!staticColor\n          },\n          props.styles\n        )\n      }\n      style={props.UNSAFE_style}\n      ref={domRef}>\n      {formattedValue}\n    </span>\n  );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.css.map"}
+{"mappings":"AAoDc;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/NotificationBadge.tsx"],"sourcesContent":["/*\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport intlMessages from '../intl/*.json';\nimport {NumberFormatter} from '@internationalized/number';\nimport React, {createContext, forwardRef} from 'react';\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface NotificationBadgeStyleProps {\n  /**\n   * The size of the notification badge.\n   *\n   * @default 'S'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface NotificationBadgeProps\n  extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {\n  /**\n   * The value to be displayed in the notification badge.\n   */\n  value?: number | null;\n}\n\ninterface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {\n  isDisabled?: boolean;\n  staticColor?: 'black' | 'white' | 'auto';\n}\n\nexport const NotificationBadgeContext =\n  createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(\n    null\n  );\n\nconst badge = style(\n  {\n    display: {\n      default: 'flex',\n      isDisabled: 'none'\n    },\n    font: 'ui',\n    color: {\n      default: 'white',\n      isStaticColor: 'auto',\n      forcedColors: 'ButtonText'\n    },\n    fontSize: {\n      size: {\n        S: 'ui-xs',\n        M: 'ui-xs',\n        L: 'ui-sm',\n        XL: 'ui'\n      }\n    },\n    borderStyle: {\n      forcedColors: 'solid'\n    },\n    borderWidth: {\n      forcedColors: '[1px]'\n    },\n    borderColor: {\n      forcedColors: 'ButtonBorder'\n    },\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: {\n      default: 'accent',\n      isStaticColor: 'transparent-overlay-1000',\n      forcedColors: 'ButtonFace'\n    },\n    height: {\n      size: {\n        S: {\n          default: 12,\n          isIndicatorOnly: 8\n        },\n        M: {\n          default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible\n          isIndicatorOnly: 8\n        },\n        L: {\n          default: 16,\n          isIndicatorOnly: fontRelative(12)\n        },\n        XL: {\n          default: 18,\n          isIndicatorOnly: fontRelative(12)\n        }\n      }\n    },\n    aspectRatio: {\n      isIndicatorOnly: 'square',\n      isSingleDigit: 'square'\n    },\n    width: 'max',\n    paddingX: {\n      isDoubleDigit: 'edge-to-text'\n    },\n    borderRadius: 'pill'\n  },\n  getAllowedOverrides()\n);\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(\n  props: NotificationBadgeProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);\n  let {\n    size = 'S',\n    value,\n    isDisabled = false,\n    staticColor,\n    ...otherProps\n  } = props as NotificationBadgeContextProps;\n  let domRef = useDOMRef(ref);\n  let {locale} = useLocale();\n  let formattedValue = '';\n\n  let isIndicatorOnly = false;\n  let isSingleDigit = false;\n  let isDoubleDigit = false;\n\n  if (value == null) {\n    isIndicatorOnly = true;\n  } else if (value <= 0) {\n    throw new Error('Value cannot be negative or zero');\n  } else if (!Number.isInteger(value)) {\n    throw new Error('Value must be a positive integer');\n  } else {\n    formattedValue = new NumberFormatter(locale).format(Math.min(value, 99));\n    let length = (Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1) | 0; // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)\n    if (length === 1) {\n      isSingleDigit = true;\n    } else if (length === 2) {\n      isDoubleDigit = true;\n    }\n\n    if (value > 99) {\n      formattedValue = stringFormatter.format('notificationbadge.plus', {\n        notifications: formattedValue\n      });\n    }\n  }\n\n  let ariaLabel = props['aria-label'] || undefined;\n  if (ariaLabel === undefined && isIndicatorOnly) {\n    ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');\n  }\n\n  return (\n    <span\n      {...filterDOMProps(otherProps, {labelable: true})}\n      role={ariaLabel && 'img'}\n      aria-label={ariaLabel}\n      className={\n        (props.UNSAFE_className || '') +\n        badge(\n          {\n            size,\n            isIndicatorOnly,\n            isSingleDigit,\n            isDoubleDigit,\n            isDisabled,\n            isStaticColor: !!staticColor\n          },\n          props.styles\n        )\n      }\n      style={props.UNSAFE_style}\n      ref={domRef}>\n      {formattedValue}\n    </span>\n  );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.css.map"}

package/dist/private/NotificationBadge.mjs

@@ -41,71 +41,71 @@ const $bfb270fb056fefc5$var$badge = function anonymous(props, overrides) {
         if (p[1] === "Z") width = true;
         rules += p[0];
     }
-    if (props.isDisabled) rules += ' sk131';
-    else rules += ' sd131';
-    rules += ' uk131';
-    rules += ' ucJ9TBTb131';
-    rules += ' ud3Euai131';
-    rules += ' uea131';
-    rules += ' ugb131';
-    rules += ' uhd131';
-    rules += ' uje131';
-    rules += ' u2NhKxcl131';
-    rules += ' uic131';
+    if (props.isDisabled) rules += ' sk151';
+    else rules += ' sd151';
+    rules += ' uk151';
+    rules += ' ucJ9TBTb151';
+    rules += ' ud3Euai151';
+    rules += ' uea151';
+    rules += ' ugb151';
+    rules += ' uhd151';
+    rules += ' uje151';
+    rules += ' u2NhKxcl151';
+    rules += ' uic151';
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-c131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-c151';
+        rules += ' vx151';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-b131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-b151';
+        rules += ' vx151';
     } else if (props.size === "M") {
-        rules += ' -_6BNtrc-a131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-a151';
+        rules += ' vx151';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-a131';
-        rules += ' vx131';
+        rules += ' -_6BNtrc-a151';
+        rules += ' vx151';
     }
-    rules += ' xb131';
-    rules += ' _xa131';
-    rules += ' _Fd131';
-    rules += ' _FnuYUweb131';
-    if (props.isStaticColor) rules += ' ph131';
-    else rules += ' px131';
-    rules += ' plb131';
-    rules += ' _jlf131';
-    rules += ' _klb131';
-    rules += ' hlb131';
-    rules += ' mlb131';
-    rules += ' llb131';
-    rules += ' ila131';
-    rules += ' _Ca131';
-    rules += ' eb131';
-    rules += ' gqMFGYc131';
-    rules += ' FRuFGYc131';
-    if (props.isSingleDigit) rules += ' fa131';
-    else if (props.isIndicatorOnly) rules += ' fa131';
-    if (!width) rules += ' ZK131';
-    if (props.isDoubleDigit) rules += ' Sv131';
-    if (props.isDoubleDigit) rules += ' Rv131';
-    rules += ' oh131';
-    rules += ' nh131';
-    rules += ' kh131';
-    rules += ' jh131';
-    if (props.isStaticColor) rules += ' -g_-g_c131';
-    else rules += ' -g_-g2131';
-    rules += ' -g_-lgb131';
+    rules += ' xb151';
+    rules += ' _xa151';
+    rules += ' _Fd151';
+    rules += ' _FnuYUweb151';
+    if (props.isStaticColor) rules += ' ph151';
+    else rules += ' px151';
+    rules += ' plb151';
+    rules += ' _jlf151';
+    rules += ' _klb151';
+    rules += ' hlb151';
+    rules += ' mlb151';
+    rules += ' llb151';
+    rules += ' ila151';
+    rules += ' _Ca151';
+    rules += ' eb151';
+    rules += ' gqMFGYc151';
+    rules += ' FRuFGYc151';
+    if (props.isSingleDigit) rules += ' fa151';
+    else if (props.isIndicatorOnly) rules += ' fa151';
+    if (!width) rules += ' ZK151';
+    if (props.isDoubleDigit) rules += ' Sv151';
+    if (props.isDoubleDigit) rules += ' Rv151';
+    rules += ' oh151';
+    rules += ' nh151';
+    rules += ' kh151';
+    rules += ' jh151';
+    if (props.isStaticColor) rules += ' -g_-g_c151';
+    else rules += ' -g_-g2151';
+    rules += ' -g_-lgb151';
     if (props.size === "XL") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c131';
-        else rules += ' -F_-Fm131';
+        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c151';
+        else rules += ' -F_-Fm151';
     } else if (props.size === "L") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c131';
-        else rules += ' -F_-Ft131';
+        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c151';
+        else rules += ' -F_-Ft151';
     } else if (props.size === "M") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fi131';
-        else rules += ' -F_-FLb8KJ131';
+        if (props.isIndicatorOnly) rules += ' -F_-Fi151';
+        else rules += ' -F_-FLb8KJ151';
     } else if (props.size === "S") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fi131';
-        else rules += ' -F_-Fk131';
+        if (props.isIndicatorOnly) rules += ' -F_-Fi151';
+        else rules += ' -F_-Fk151';
     }
     return rules;
 };

package/dist/private/NotificationBadge.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAsCM,MAAM,0DACX,CAAA,GAAA,oBAAY,EACV;AAGJ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEC,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,MACnD,KAA6B,EAC7B,GAA2B;IAE3B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,YACP,KAAK,cACL,aAAa,oBACb,WAAW,EACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,iBAAiB;IAErB,IAAI,kBAAkB;IACtB,IAAI,gBAAgB;IACpB,IAAI,gBAAgB;IAEpB,IAAI,SAAS,MACX,kBAAkB;SACb,IAAI,SAAS,GAClB,MAAM,IAAI,MAAM;SACX,IAAI,CAAC,OAAO,SAAS,CAAC,QAC3B,MAAM,IAAI,MAAM;SACX;QACL,iBAAiB,IAAI,CAAA,GAAA,sBAAc,EAAE,QAAQ,MAAM,CAAC,KAAK,GAAG,CAAC,OAAO;QACpE,IAAI,SAAS,AAAC,KAAK,GAAG,CAAC,SAAS,KAAK,QAAQ,MAAM,KAAK,MAAM,GAAG,IAAK,GAAG,4GAA4G;QACrL,IAAI,WAAW,GACb,gBAAgB;aACX,IAAI,WAAW,GACpB,gBAAgB;QAGlB,IAAI,QAAQ,IACV,iBAAiB,gBAAgB,MAAM,CAAC,0BAA0B;YAChE,eAAe;QACjB;IAEJ;IAEA,IAAI,YAAY,KAAK,CAAC,aAAa,IAAI;IACvC,IAAI,cAAc,aAAa,iBAC7B,YAAY,gBAAgB,MAAM,CAAC;IAGrC,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,YAAY;YAAC,WAAW;QAAI,EAAE;QACjD,MAAM,aAAa;QACnB,cAAY;QACZ,WACE,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAC5B,4BACE;kBACE;6BACA;2BACA;2BACA;wBACA;YACA,eAAe,CAAC,CAAC;QACnB,GACA,MAAM,MAAM;QAGhB,OAAO,MAAM,YAAY;QACzB,KAAK;kBACJ;;AAGP","sources":["packages/@react-spectrum/s2/src/NotificationBadge.tsx"],"sourcesContent":["/*\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {NumberFormatter} from '@internationalized/number';\nimport React, {createContext, forwardRef} from 'react';\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface NotificationBadgeStyleProps {\n  /**\n   * The size of the notification badge.\n   *\n   * @default 'S'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface NotificationBadgeProps\n  extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {\n  /**\n   * The value to be displayed in the notification badge.\n   */\n  value?: number | null;\n}\n\ninterface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {\n  isDisabled?: boolean;\n  staticColor?: 'black' | 'white' | 'auto';\n}\n\nexport const NotificationBadgeContext =\n  createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(\n    null\n  );\n\nconst badge = style(\n  {\n    display: {\n      default: 'flex',\n      isDisabled: 'none'\n    },\n    font: 'ui',\n    color: {\n      default: 'white',\n      isStaticColor: 'auto',\n      forcedColors: 'ButtonText'\n    },\n    fontSize: {\n      size: {\n        S: 'ui-xs',\n        M: 'ui-xs',\n        L: 'ui-sm',\n        XL: 'ui'\n      }\n    },\n    borderStyle: {\n      forcedColors: 'solid'\n    },\n    borderWidth: {\n      forcedColors: '[1px]'\n    },\n    borderColor: {\n      forcedColors: 'ButtonBorder'\n    },\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: {\n      default: 'accent',\n      isStaticColor: 'transparent-overlay-1000',\n      forcedColors: 'ButtonFace'\n    },\n    height: {\n      size: {\n        S: {\n          default: 12,\n          isIndicatorOnly: 8\n        },\n        M: {\n          default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible\n          isIndicatorOnly: 8\n        },\n        L: {\n          default: 16,\n          isIndicatorOnly: fontRelative(12)\n        },\n        XL: {\n          default: 18,\n          isIndicatorOnly: fontRelative(12)\n        }\n      }\n    },\n    aspectRatio: {\n      isIndicatorOnly: 'square',\n      isSingleDigit: 'square'\n    },\n    width: 'max',\n    paddingX: {\n      isDoubleDigit: 'edge-to-text'\n    },\n    borderRadius: 'pill'\n  },\n  getAllowedOverrides()\n);\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(\n  props: NotificationBadgeProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);\n  let {\n    size = 'S',\n    value,\n    isDisabled = false,\n    staticColor,\n    ...otherProps\n  } = props as NotificationBadgeContextProps;\n  let domRef = useDOMRef(ref);\n  let {locale} = useLocale();\n  let formattedValue = '';\n\n  let isIndicatorOnly = false;\n  let isSingleDigit = false;\n  let isDoubleDigit = false;\n\n  if (value == null) {\n    isIndicatorOnly = true;\n  } else if (value <= 0) {\n    throw new Error('Value cannot be negative or zero');\n  } else if (!Number.isInteger(value)) {\n    throw new Error('Value must be a positive integer');\n  } else {\n    formattedValue = new NumberFormatter(locale).format(Math.min(value, 99));\n    let length = (Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1) | 0; // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)\n    if (length === 1) {\n      isSingleDigit = true;\n    } else if (length === 2) {\n      isDoubleDigit = true;\n    }\n\n    if (value > 99) {\n      formattedValue = stringFormatter.format('notificationbadge.plus', {\n        notifications: formattedValue\n      });\n    }\n  }\n\n  let ariaLabel = props['aria-label'] || undefined;\n  if (ariaLabel === undefined && isIndicatorOnly) {\n    ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');\n  }\n\n  return (\n    <span\n      {...filterDOMProps(otherProps, {labelable: true})}\n      role={ariaLabel && 'img'}\n      aria-label={ariaLabel}\n      className={\n        (props.UNSAFE_className || '') +\n        badge(\n          {\n            size,\n            isIndicatorOnly,\n            isSingleDigit,\n            isDoubleDigit,\n            isDisabled,\n            isStaticColor: !!staticColor\n          },\n          props.styles\n        )\n      }\n      style={props.UNSAFE_style}\n      ref={domRef}>\n      {formattedValue}\n    </span>\n  );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAqCM,MAAM,0DACX,CAAA,GAAA,oBAAY,EACV;AAGJ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEC,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,MACnD,KAA6B,EAC7B,GAA2B;IAE3B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,YACP,KAAK,cACL,aAAa,oBACb,WAAW,EACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,iBAAiB;IAErB,IAAI,kBAAkB;IACtB,IAAI,gBAAgB;IACpB,IAAI,gBAAgB;IAEpB,IAAI,SAAS,MACX,kBAAkB;SACb,IAAI,SAAS,GAClB,MAAM,IAAI,MAAM;SACX,IAAI,CAAC,OAAO,SAAS,CAAC,QAC3B,MAAM,IAAI,MAAM;SACX;QACL,iBAAiB,IAAI,CAAA,GAAA,sBAAc,EAAE,QAAQ,MAAM,CAAC,KAAK,GAAG,CAAC,OAAO;QACpE,IAAI,SAAS,AAAC,KAAK,GAAG,CAAC,SAAS,KAAK,QAAQ,MAAM,KAAK,MAAM,GAAG,IAAK,GAAG,4GAA4G;QACrL,IAAI,WAAW,GACb,gBAAgB;aACX,IAAI,WAAW,GACpB,gBAAgB;QAGlB,IAAI,QAAQ,IACV,iBAAiB,gBAAgB,MAAM,CAAC,0BAA0B;YAChE,eAAe;QACjB;IAEJ;IAEA,IAAI,YAAY,KAAK,CAAC,aAAa,IAAI;IACvC,IAAI,cAAc,aAAa,iBAC7B,YAAY,gBAAgB,MAAM,CAAC;IAGrC,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,YAAY;YAAC,WAAW;QAAI,EAAE;QACjD,MAAM,aAAa;QACnB,cAAY;QACZ,WACE,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAC5B,4BACE;kBACE;6BACA;2BACA;2BACA;wBACA;YACA,eAAe,CAAC,CAAC;QACnB,GACA,MAAM,MAAM;QAGhB,OAAO,MAAM,YAAY;QACzB,KAAK;kBACJ;;AAGP","sources":["packages/@react-spectrum/s2/src/NotificationBadge.tsx"],"sourcesContent":["/*\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {fontRelative, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport intlMessages from '../intl/*.json';\nimport {NumberFormatter} from '@internationalized/number';\nimport React, {createContext, forwardRef} from 'react';\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface NotificationBadgeStyleProps {\n  /**\n   * The size of the notification badge.\n   *\n   * @default 'S'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface NotificationBadgeProps\n  extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {\n  /**\n   * The value to be displayed in the notification badge.\n   */\n  value?: number | null;\n}\n\ninterface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {\n  isDisabled?: boolean;\n  staticColor?: 'black' | 'white' | 'auto';\n}\n\nexport const NotificationBadgeContext =\n  createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(\n    null\n  );\n\nconst badge = style(\n  {\n    display: {\n      default: 'flex',\n      isDisabled: 'none'\n    },\n    font: 'ui',\n    color: {\n      default: 'white',\n      isStaticColor: 'auto',\n      forcedColors: 'ButtonText'\n    },\n    fontSize: {\n      size: {\n        S: 'ui-xs',\n        M: 'ui-xs',\n        L: 'ui-sm',\n        XL: 'ui'\n      }\n    },\n    borderStyle: {\n      forcedColors: 'solid'\n    },\n    borderWidth: {\n      forcedColors: '[1px]'\n    },\n    borderColor: {\n      forcedColors: 'ButtonBorder'\n    },\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: {\n      default: 'accent',\n      isStaticColor: 'transparent-overlay-1000',\n      forcedColors: 'ButtonFace'\n    },\n    height: {\n      size: {\n        S: {\n          default: 12,\n          isIndicatorOnly: 8\n        },\n        M: {\n          default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible\n          isIndicatorOnly: 8\n        },\n        L: {\n          default: 16,\n          isIndicatorOnly: fontRelative(12)\n        },\n        XL: {\n          default: 18,\n          isIndicatorOnly: fontRelative(12)\n        }\n      }\n    },\n    aspectRatio: {\n      isIndicatorOnly: 'square',\n      isSingleDigit: 'square'\n    },\n    width: 'max',\n    paddingX: {\n      isDoubleDigit: 'edge-to-text'\n    },\n    borderRadius: 'pill'\n  },\n  getAllowedOverrides()\n);\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(\n  props: NotificationBadgeProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);\n  let {\n    size = 'S',\n    value,\n    isDisabled = false,\n    staticColor,\n    ...otherProps\n  } = props as NotificationBadgeContextProps;\n  let domRef = useDOMRef(ref);\n  let {locale} = useLocale();\n  let formattedValue = '';\n\n  let isIndicatorOnly = false;\n  let isSingleDigit = false;\n  let isDoubleDigit = false;\n\n  if (value == null) {\n    isIndicatorOnly = true;\n  } else if (value <= 0) {\n    throw new Error('Value cannot be negative or zero');\n  } else if (!Number.isInteger(value)) {\n    throw new Error('Value must be a positive integer');\n  } else {\n    formattedValue = new NumberFormatter(locale).format(Math.min(value, 99));\n    let length = (Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1) | 0; // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)\n    if (length === 1) {\n      isSingleDigit = true;\n    } else if (length === 2) {\n      isDoubleDigit = true;\n    }\n\n    if (value > 99) {\n      formattedValue = stringFormatter.format('notificationbadge.plus', {\n        notifications: formattedValue\n      });\n    }\n  }\n\n  let ariaLabel = props['aria-label'] || undefined;\n  if (ariaLabel === undefined && isIndicatorOnly) {\n    ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');\n  }\n\n  return (\n    <span\n      {...filterDOMProps(otherProps, {labelable: true})}\n      role={ariaLabel && 'img'}\n      aria-label={ariaLabel}\n      className={\n        (props.UNSAFE_className || '') +\n        badge(\n          {\n            size,\n            isIndicatorOnly,\n            isSingleDigit,\n            isDoubleDigit,\n            isDisabled,\n            isStaticColor: !!staticColor\n          },\n          props.styles\n        )\n      }\n      style={props.UNSAFE_style}\n      ref={domRef}>\n      {formattedValue}\n    </span>\n  );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.mjs.map"}