@react-spectrum/s2 1.3.1 → 1.4.0

package/dist/private/NotificationBadge.cjs

@@ -48,71 +48,71 @@ const $cd7301fb33ba8690$var$badge = function anonymous(props, overrides) {
         if (p[1] === "Z") width = true;
         rules += p[0];
     }
-    if (props.isDisabled) rules += ' sk13';
-    else rules += ' sd13';
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
+    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.size === "XL") {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c131';
+        rules += ' vx131';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b131';
+        rules += ' vx131';
     } else if (props.size === "M") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a131';
+        rules += ' vx131';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a131';
+        rules += ' vx131';
     }
-    rules += ' xb13';
-    rules += ' _xa13';
-    rules += ' _Fd13';
-    rules += ' _FnuYUweb13';
-    if (props.isStaticColor) rules += ' ph13';
-    else rules += ' px13';
-    rules += ' plb13';
-    rules += ' _jlf13';
-    rules += ' _klb13';
-    rules += ' hlb13';
-    rules += ' mlb13';
-    rules += ' llb13';
-    rules += ' ila13';
-    rules += ' _Ca13';
-    rules += ' eb13';
-    rules += ' gqMFGYc13';
-    rules += ' FRuFGYc13';
-    if (props.isSingleDigit) rules += ' fa13';
-    else if (props.isIndicatorOnly) rules += ' fa13';
-    if (!width) rules += ' ZK13';
-    if (props.isDoubleDigit) rules += ' Sv13';
-    if (props.isDoubleDigit) rules += ' Rv13';
-    rules += ' oh13';
-    rules += ' nh13';
-    rules += ' kh13';
-    rules += ' jh13';
-    if (props.isStaticColor) rules += ' -g_-g_c13';
-    else rules += ' -g_-g213';
-    rules += ' -g_-lgb13';
+    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';
     if (props.size === "XL") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c13';
-        else rules += ' -F_-Fm13';
+        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c131';
+        else rules += ' -F_-Fm131';
     } else if (props.size === "L") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c13';
-        else rules += ' -F_-Ft13';
+        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c131';
+        else rules += ' -F_-Ft131';
     } else if (props.size === "M") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fi13';
-        else rules += ' -F_-FLb8KJ13';
+        if (props.isIndicatorOnly) rules += ' -F_-Fi131';
+        else rules += ' -F_-FLb8KJ131';
     } else if (props.size === "S") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fi13';
-        else rules += ' -F_-Fk13';
+        if (props.isIndicatorOnly) rules += ' -F_-Fi131';
+        else rules += ' -F_-Fk131';
     }
     return rules;
 };

package/dist/private/NotificationBadge.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAqCM,MAAM,0DAA2B,CAAA,GAAA,0BAAY,EAAqF;AAEzI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEC,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAA6B,EAAE,GAA2B;IACnH,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,YACP,KAAK,cACL,aAAa,oBACb,WAAW,EACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,sCAAQ;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,8CAAc,EAAE,QAAQ,MAAM,CAAC,KAAK,GAAG,CAAC,OAAO;QACpE,IAAI,SAAS,KAAK,GAAG,CAAC,SAAS,KAAK,QAAQ,MAAM,KAAK,MAAM,GAAG,IAAI,GAAI,4GAA4G;QACpL,IAAI,WAAW,GACb,gBAAgB;aACX,IAAI,WAAW,GACpB,gBAAgB;QAGlB,IAAI,QAAQ,IACV,iBAAiB,gBAAgB,MAAM,CAAC,0BAA0B;YAAC,eAAe;QAAc;IAEpG;IAEA,IAAI,YAAY,KAAK,CAAC,aAAa,IAAI;IACvC,IAAI,cAAc,aAAa,iBAC7B,YAAY,gBAAgB,MAAM,CAAC;IAGrC,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,6CAAa,EAAE,YAAY;YAAC,WAAW;QAAI,EAAE;QACjD,MAAM,aAAa;QACnB,cAAY;QACZ,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;kBAAC;6BAAM;2BAAiB;2BAAe;wBAAe;YAAY,eAAe,CAAC,CAAC;QAAW,GAAG,MAAM,MAAM;QAC/J,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 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 = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style({\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}, getAllowedOverrides());\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {\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', {notifications: formattedValue});\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={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}\n      style={props.UNSAFE_style}\n      ref={domRef}>\n      {formattedValue}\n    </span>\n  );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAsCM,MAAM,0DACX,CAAA,GAAA,0BAAY,EACV;AAGJ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEC,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,MACnD,KAA6B,EAC7B,GAA2B;IAE3B,IAAI,kBAAkB,CAAA,GAAA,uEAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,YACP,KAAK,cACL,aAAa,oBACb,WAAW,EACX,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,sCAAQ;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,8CAAc,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,gCAAC;QACE,GAAG,CAAA,GAAA,6CAAa,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.cjs.map"}

package/dist/private/NotificationBadge.css

@@ -1,217 +1,217 @@
 @layer _.a {
-  .sd13 {
+  .sd131 {
     display: flex;
   }
 
-  .sk13 {
+  .sk131 {
     display: none;
   }
 
-  .uk13 {
+  .uk131 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-a13 {
+  .-_6BNtrc-a131 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b13 {
+  .-_6BNtrc-b131 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-c13 {
+  .-_6BNtrc-c131 {
     --fs: pow(1.125, 0);
   }
 
-  .vx13 {
+  .vx131 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb13 {
+  .xb131 {
     font-weight: 400;
   }
 
-  ._xa13 {
+  ._xa131 {
     font-synthesis-weight: none;
   }
 
-  ._Fd13 {
+  ._Fd131 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .px13 {
+  .px131 {
     color: #fff;
   }
 
-  .ph13 {
+  .ph131 {
     color: lch(from var(--g, var(--s2-container-bg)) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  ._Ca13 {
+  ._Ca131 {
     justify-content: center;
   }
 
-  .eb13 {
+  .eb131 {
     align-items: center;
   }
 
-  .gqMFGYc13 {
+  .gqMFGYc131 {
     background-color: var(--g);
   }
 
-  .FRuFGYc13 {
+  .FRuFGYc131 {
     height: var(--F);
   }
 
-  .fa13 {
+  .fa131 {
     aspect-ratio: 1;
     aspect-ratio: 1;
   }
 
-  .ZK13 {
+  .ZK131 {
     width: max-content;
   }
 
-  .Sv13 {
+  .Sv131 {
     padding-inline-start: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .Rv13 {
+  .Rv131 {
     padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .oh13 {
+  .oh131 {
     border-start-start-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .nh13 {
+  .nh131 {
     border-start-end-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .kh13 {
+  .kh131 {
     border-end-start-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .jh13 {
+  .jh131 {
     border-end-end-radius: calc(var(--F, var(--M, 9999px)) / 2);
   }
 
-  .-g_-g213 {
+  .-g_-g2131 {
     --g: light-dark(#3b63fb, #4069fd);
   }
 
-  .-g_-g_c13 {
+  .-g_-g_c131 {
     --g: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  .-F_-Fk13 {
+  .-F_-Fk131 {
     --F: calc(.75rem * var(--s2-scale));
   }
 
-  .-F_-FLb8KJ13 {
+  .-F_-FLb8KJ131 {
     --F: 1.28571em;
   }
 
-  .-F_-Fi13 {
+  .-F_-Fi131 {
     --F: calc(.5rem * var(--s2-scale));
   }
 
-  .-F_-Ft13 {
+  .-F_-Ft131 {
     --F: calc(1rem * var(--s2-scale));
   }
 
-  .-F_-Fm13 {
+  .-F_-Fm131 {
     --F: calc(1.125rem * var(--s2-scale));
   }
 
-  .-F_-Fspvr8c13 {
+  .-F_-Fspvr8c131 {
     --F: .857143em;
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb13:lang(ar) {
+  .ucJ9TBTb131:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb131: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 {
-  .ud3Euai13:lang(he) {
+  .ud3Euai131:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea13:lang(ja) {
+  .uea131: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 {
-  .ugb13:lang(ko) {
+  .ugb131:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd13:lang(zh) {
+  .uhd131:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje13:lang(zh-hant) {
+  .uje131: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 {
-  .u2NhKxcl13:lang(zh-HK) {
+  .u2NhKxcl131: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 {
-  .uic13:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic131: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) {
-    .plb13 {
+    .plb131 {
       color: buttontext;
     }
 
-    ._jlf13 {
+    ._jlf131 {
       border-style: solid;
     }
 
-    ._klb13 {
+    ._klb131 {
       border-top-width: 1px;
     }
 
-    .hlb13 {
+    .hlb131 {
       border-bottom-width: 1px;
     }
 
-    .mlb13 {
+    .mlb131 {
       border-inline-start-width: 1px;
     }
 
-    .llb13 {
+    .llb131 {
       border-inline-end-width: 1px;
     }
 
-    .ila13 {
+    .ila131 {
       border-color: buttonborder;
     }
 
-    .-g_-lgb13 {
+    .-g_-lgb131 {
       --g: ButtonFace;
     }
   }

package/dist/private/NotificationBadge.css.map

@@ -1 +1 @@
-{"mappings":"AAiDc;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 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 = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style({\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}, getAllowedOverrides());\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {\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', {notifications: formattedValue});\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={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}\n      style={props.UNSAFE_style}\n      ref={domRef}>\n      {formattedValue}\n    </span>\n  );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.css.map"}
+{"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"}

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 += ' sk13';
-    else rules += ' sd13';
-    rules += ' uk13';
-    rules += ' ucJ9TBTb13';
-    rules += ' ud3Euai13';
-    rules += ' uea13';
-    rules += ' ugb13';
-    rules += ' uhd13';
-    rules += ' uje13';
-    rules += ' u2NhKxcl13';
-    rules += ' uic13';
+    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.size === "XL") {
-        rules += ' -_6BNtrc-c13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-c131';
+        rules += ' vx131';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-b13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-b131';
+        rules += ' vx131';
     } else if (props.size === "M") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a131';
+        rules += ' vx131';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-a13';
-        rules += ' vx13';
+        rules += ' -_6BNtrc-a131';
+        rules += ' vx131';
     }
-    rules += ' xb13';
-    rules += ' _xa13';
-    rules += ' _Fd13';
-    rules += ' _FnuYUweb13';
-    if (props.isStaticColor) rules += ' ph13';
-    else rules += ' px13';
-    rules += ' plb13';
-    rules += ' _jlf13';
-    rules += ' _klb13';
-    rules += ' hlb13';
-    rules += ' mlb13';
-    rules += ' llb13';
-    rules += ' ila13';
-    rules += ' _Ca13';
-    rules += ' eb13';
-    rules += ' gqMFGYc13';
-    rules += ' FRuFGYc13';
-    if (props.isSingleDigit) rules += ' fa13';
-    else if (props.isIndicatorOnly) rules += ' fa13';
-    if (!width) rules += ' ZK13';
-    if (props.isDoubleDigit) rules += ' Sv13';
-    if (props.isDoubleDigit) rules += ' Rv13';
-    rules += ' oh13';
-    rules += ' nh13';
-    rules += ' kh13';
-    rules += ' jh13';
-    if (props.isStaticColor) rules += ' -g_-g_c13';
-    else rules += ' -g_-g213';
-    rules += ' -g_-lgb13';
+    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';
     if (props.size === "XL") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c13';
-        else rules += ' -F_-Fm13';
+        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c131';
+        else rules += ' -F_-Fm131';
     } else if (props.size === "L") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c13';
-        else rules += ' -F_-Ft13';
+        if (props.isIndicatorOnly) rules += ' -F_-Fspvr8c131';
+        else rules += ' -F_-Ft131';
     } else if (props.size === "M") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fi13';
-        else rules += ' -F_-FLb8KJ13';
+        if (props.isIndicatorOnly) rules += ' -F_-Fi131';
+        else rules += ' -F_-FLb8KJ131';
     } else if (props.size === "S") {
-        if (props.isIndicatorOnly) rules += ' -F_-Fi13';
-        else rules += ' -F_-Fk13';
+        if (props.isIndicatorOnly) rules += ' -F_-Fi131';
+        else rules += ' -F_-Fk131';
     }
     return rules;
 };

package/dist/private/NotificationBadge.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;AAqCM,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAAqF;AAEzI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEC,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAA6B,EAAE,GAA2B;IACnH,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,KAAK,GAAG,CAAC,SAAS,KAAK,QAAQ,MAAM,KAAK,MAAM,GAAG,IAAI,GAAI,4GAA4G;QACpL,IAAI,WAAW,GACb,gBAAgB;aACX,IAAI,WAAW,GACpB,gBAAgB;QAGlB,IAAI,QAAQ,IACV,iBAAiB,gBAAgB,MAAM,CAAC,0BAA0B;YAAC,eAAe;QAAc;IAEpG;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,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;kBAAC;6BAAM;2BAAiB;2BAAe;wBAAe;YAAY,eAAe,CAAC,CAAC;QAAW,GAAG,MAAM,MAAM;QAC/J,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 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 = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style({\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}, getAllowedOverrides());\n\n/**\n * Notification badges are used to indicate new or pending activity .\n */\nexport const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {\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', {notifications: formattedValue});\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={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}\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;;;;;;;;;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"}