npm - @react-spectrum/s2 - Versions diffs - 3.0.0-nightly-4b2c6e76f-250325 → 3.0.0-nightly-d7511d723-250327 - Mend

@react-spectrum/s2 3.0.0-nightly-4b2c6e76f-250325 → 3.0.0-nightly-d7511d723-250327

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/ActionButton.cjs +25 -7
package/dist/ActionButton.cjs.map +1 -1
package/dist/ActionButton.css +78 -18
package/dist/ActionButton.css.map +1 -1
package/dist/ActionButton.mjs +25 -7
package/dist/ActionButton.mjs.map +1 -1
package/dist/NotificationBadge.cjs +155 -0
package/dist/NotificationBadge.cjs.map +1 -0
package/dist/NotificationBadge.css +211 -0
package/dist/NotificationBadge.css.map +1 -0
package/dist/NotificationBadge.mjs +149 -0
package/dist/NotificationBadge.mjs.map +1 -0
package/dist/en-US.cjs +2 -0
package/dist/en-US.cjs.map +1 -1
package/dist/en-US.mjs +2 -0
package/dist/en-US.mjs.map +1 -1
package/dist/main.cjs +4 -0
package/dist/main.cjs.map +1 -1
package/dist/module.mjs +3 -1
package/dist/module.mjs.map +1 -1
package/dist/types.d.ts +20 -1
package/dist/types.d.ts.map +1 -1
package/package.json +19 -18
package/src/ActionButton.tsx +36 -2
package/src/NotificationBadge.tsx +160 -0
package/src/index.ts +2 -0

package/dist/ActionButton.cjs CHANGED Viewed

@@ -3,6 +3,7 @@ var $7a26131f6144af2b$exports = require("./ActionButtonGroup.cjs");
 var $38071d9ce246d4cf$exports = require("./Avatar.cjs");
 var $e991cbcdf82ced71$exports = require("./CenterBaseline.cjs");
 var $bde97c91243ed164$exports = require("../icons/Icon.cjs");
+var $cd7301fb33ba8690$exports = require("./NotificationBadge.cjs");
 var $2061c83559b50a66$exports = require("./pressScale.cjs");
 var $5eb75e0c130e0669$exports = require("../icons/Skeleton.cjs");
 var $6367bc87eb7d24ad$exports = require("./Content.cjs");
@@ -44,8 +45,10 @@ $parcel$export(module.exports, "ActionButton", () => $6e265ff388155b91$export$cf
 // These styles handle both ActionButton and ToggleButton
 const $6e265ff388155b91$var$iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';
+const $6e265ff388155b91$var$textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';
 const $6e265ff388155b91$export$446543cff2a0f496 = function anonymous(props, overrides) {
     let rules = " .";
     let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
@@ -137,13 +140,7 @@ const $6e265ff388155b91$export$446543cff2a0f496 = function anonymous(props, over
     }
     rules += ' __Ea';
     rules += ' k-375toq';
-    if (!$q) {
-        if (props.size === "XL") rules += ' qj';
-        else if (props.size === "L") rules += ' qi';
-        else if (props.size === "S") rules += ' qh';
-        else if (props.size === "XS") rules += ' qg';
-        else rules += ' qf';
-    }
+    if (!$q) rules += ' q-375tow';
     rules += ' _Pa';
     rules += ' _R-375x7f';
     rules += ' _Sa';
@@ -181,6 +178,15 @@ const $6e265ff388155b91$export$446543cff2a0f496 = function anonymous(props, over
         if (props.isFocusVisible) rules += ' __R-3t1z';
     }
     rules += ' __S-yksgrp';
+    rules += ' -_1v78fj9_Y--17ppb3qa';
+    rules += ' -_1v78fj9_Y--1imc51y-5w6sh5';
+    rules += ' -_1v78fj9_Y--5w6sh5';
+    rules += ' -_1rtgbwq_C--1imc51ya';
+    rules += ' -_1rtgbwq_C--1x05cyt';
+    rules += ' -_17zm1mw_l--1sthc3k';
+    rules += ' -_17brfqf_l--17ppb3qb';
+    rules += ' -_17brfqf_l--1imc51y-pgyx2q';
+    rules += ' -_17brfqf_l--2loc28';
     if (props.isSelected) {
         if (props.isDisabled) rules += ' -_375toh_b-a_____J';
         else rules += ' -_375toh_b-a_____M';
@@ -228,6 +234,11 @@ const $6e265ff388155b91$export$446543cff2a0f496 = function anonymous(props, over
     else if (props.size === "S") rules += ' -_375toq_k-h';
     else if (props.size === "XS") rules += ' -_375toq_k-g';
     else rules += ' -_375toq_k-f';
+    if (props.size === "XL") rules += ' -_375tow_q-j';
+    else if (props.size === "L") rules += ' -_375tow_q-i';
+    else if (props.size === "S") rules += ' -_375tow_q-h';
+    else if (props.size === "XS") rules += ' -_375tow_q-g';
+    else rules += ' -_375tow_q-f';
     return rules;
 };
 // Matching icon sizes. TBD.
@@ -293,6 +304,13 @@ const $6e265ff388155b91$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $9ZEgK$react
                         size: $6e265ff388155b91$var$avatarSize[size],
                         styles: " y-oelgqu _9-3t1x __B-3t1x"
                     }
+                ],
+                [
+                    (0, $cd7301fb33ba8690$exports.NotificationBadgeContext),
+                    {
+                        size: props.size === 'XS' ? undefined : props.size,
+                        styles: " Va Y-1v78fj9 W-8959nl A-1q7bl7b y-1q7bl7b"
+                    }
                 ]
             ],
             children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $9ZEgK$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {

package/dist/ActionButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAiDD,yDAAyD;AACzD,MAAM,iCAAW;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgKb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAEZ,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,uCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["/\n Copyright 2024 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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /\n The size of the ActionButton.\n \n @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the ActionButton appears over a color background. /\n staticColor?: 'black' \| 'white' \| 'auto',\n /* Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). /\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /* Whether the ActionButton should be selected (controlled). /\n isSelected?: boolean,\n /* Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). /\n isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' \| 'compact',\n orientation?: 'horizontal' \| 'vertical',\n isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange' \| 'isPending'>, StyleProps, ActionButtonStyleProps {\n /* The content to display in the ActionButton. /\n children: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: 'neutral',\n isEmphasized: 'accent',\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n paddingX: {\n default: 'edge-to-text',\n [iconOnly]: 0\n },\n paddingY: 0,\n borderTopStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':first-child': 'control'\n }\n }\n },\n borderTopEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': 'control'\n },\n vertical: {\n ':first-child': 'control'\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': 'control'\n },\n vertical: {\n ':last-child': 'control'\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':last-child': 'control'\n }\n }\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/\n ActionButtons allow users to perform an action.\n * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size \|\| 'M',\n isDisabled = props.isDisabled\n } = ctx \|\| {};\n\n return (\n <RACButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }],\n [AvatarContext, {\n size: avatarSize[size],\n styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.cjs.map"}
1	+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkDD,yDAAyD;AACzD,MAAM,iCAAW;AACjB,MAAM,iCAAW;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Lb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAGZ,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,uCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,kDAAuB;oBAAG;wBACzB,MAAM,MAAM,IAAI,KAAK,OAAO,YAAY,MAAM,IAAI;wBAClD,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["/\n Copyright 2024 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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\nimport {NotificationBadgeContext} from './NotificationBadge';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /\n The size of the ActionButton.\n \n @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the ActionButton appears over a color background. /\n staticColor?: 'black' \| 'white' \| 'auto',\n /* Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). /\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /* Whether the ActionButton should be selected (controlled). /\n isSelected?: boolean,\n /* Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). /\n isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' \| 'compact',\n orientation?: 'horizontal' \| 'vertical',\n isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange' \| 'isPending'>, StyleProps, ActionButtonStyleProps {\n /* The content to display in the ActionButton. /\n children: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: 'neutral',\n isEmphasized: 'accent',\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n paddingX: {\n default: 'edge-to-text',\n [iconOnly]: 0\n },\n paddingY: 0,\n borderTopStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':first-child': 'control'\n }\n }\n },\n borderTopEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': 'control'\n },\n vertical: {\n ':first-child': 'control'\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': 'control'\n },\n vertical: {\n ':last-child': 'control'\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':last-child': 'control'\n }\n }\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true,\n '--badgeTop': {\n type: 'top',\n value: {\n default: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n [iconOnly]: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n [textOnly]: 0\n }\n },\n '--buttonPaddingX': {\n type: 'paddingStart',\n value: {\n default: '[calc(self(height, self(minHeight)) 3 / 8)]',\n [iconOnly]: 0\n }\n },\n '--iconWidth': {\n type: 'width',\n value: fontRelative(20)\n },\n '--badgePosition': {\n type: 'width',\n value: {\n default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',\n [iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',\n [textOnly]: 'full'\n }\n }\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/*\n ActionButtons allow users to perform an action.\n * They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.\n /\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size \|\| 'M',\n isDisabled = props.isDisabled\n } = ctx \|\| {};\n\n\n return (\n <RACButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }],\n [AvatarContext, {\n size: avatarSize[size],\n styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n }],\n [NotificationBadgeContext, {\n size: props.size === 'XS' ? undefined : props.size,\n styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.cjs.map"}

package/dist/ActionButton.css CHANGED Viewed

@@ -138,24 +138,8 @@
     height: var(--k);
   }
-  .qf {
-    min-width: calc(2rem * var(--s2-scale));
-  }
-  .qg {
-    min-width: calc(1.25rem * var(--s2-scale));
-  }
-  .qh {
-    min-width: calc(1.5rem * var(--s2-scale));
-  }
-  .qi {
-    min-width: calc(2.5rem * var(--s2-scale));
-  }
-  .qj {
-    min-width: calc(3rem * var(--s2-scale));
+  .q-375tow {
+    min-width: var(--q);
   }
   ._Pa {
@@ -246,6 +230,22 @@
     -webkit-tap-highlight-color: #0000;
   }
+  .-_1v78fj9_Y--5w6sh5 {
+    --badgeTop: calc(var(--k) / 2 - var(--iconWidth) / 2);
+  }
+  .-_1rtgbwq_C--1x05cyt {
+    --buttonPaddingX: calc(var(--k, var(--o)) * 3 / 8);
+  }
+  .-_17zm1mw_l--1sthc3k {
+    --iconWidth: 1.42857em;
+  }
+  .-_17brfqf_l--2loc28 {
+    --badgePosition: calc(var(--buttonPaddingX)  + var(--iconWidth));
+  }
   .-_375toh_b-h {
     --b: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
   }
@@ -310,6 +310,26 @@
     --k: calc(3rem * var(--s2-scale));
   }
+  .-_375tow_q-f {
+    --q: calc(2rem * var(--s2-scale));
+  }
+  .-_375tow_q-g {
+    --q: calc(1.25rem * var(--s2-scale));
+  }
+  .-_375tow_q-h {
+    --q: calc(1.5rem * var(--s2-scale));
+  }
+  .-_375tow_q-i {
+    --q: calc(2.5rem * var(--s2-scale));
+  }
+  .-_375tow_q-j {
+    --q: calc(3rem * var(--s2-scale));
+  }
   .E-1gogtue {
     padding-top: var(--labelPadding);
   }
@@ -357,6 +377,26 @@
   .__B-3t1x {
     order: 0;
   }
+  .Va {
+    position: absolute;
+  }
+  .Y-1v78fj9 {
+    top: var(--badgeTop);
+  }
+  .W-8959nl {
+    inset-inline-start: var(--badgePosition);
+  }
+  .A-1q7bl7b {
+    margin-top: calc((var(--k) * -1) / 2);
+  }
+  .y-1q7bl7b {
+    margin-inline-start: calc((var(--k) * -1) / 2);
+  }
 }
 @layer _.b {
@@ -395,12 +435,32 @@
   .-oelgqu_A--1imc51ya:has([slot="icon"], [slot="avatar"]):not(:has([data-rsp-slot="text"])) {
     --iconMargin: 0rem;
   }
+  .-_1v78fj9_Y--1imc51y-5w6sh5:has([slot="icon"], [slot="avatar"]):not(:has([data-rsp-slot="text"])) {
+    --badgeTop: calc(var(--k) / 2 - var(--iconWidth) / 2);
+  }
+  .-_1rtgbwq_C--1imc51ya:has([slot="icon"], [slot="avatar"]):not(:has([data-rsp-slot="text"])) {
+    --buttonPaddingX: 0rem;
+  }
+  .-_17brfqf_l--1imc51y-pgyx2q:has([slot="icon"], [slot="avatar"]):not(:has([data-rsp-slot="text"])) {
+    --badgePosition: calc(var(--q) / 2 + var(--iconWidth) / 2);
+  }
 }
 @layer _.c {
   ._d-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
+  .-_1v78fj9_Y--17ppb3qa:has([data-rsp-slot="text"]):not(:has([slot="icon"], [slot="avatar"])) {
+    --badgeTop: 0rem;
+  }
+  .-_17brfqf_l--17ppb3qb:has([data-rsp-slot="text"]):not(:has([slot="icon"], [slot="avatar"])) {
+    --badgePosition: 100%;
+  }
 }
 @layer _.d {

package/dist/ActionButton.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AC6DyB;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;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsNQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAGb;;;;EAAA;;;;EAIA;;;;EAAA;;;;EAAA;;;;;AA7NK;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["2931924df01dc677","packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["@import \"3cf237010a171787\";\n@import \"c38bef69f8745925\";\n@import \"3059048d79d64c86\";\n@import \"9bc41819d7d08688\";\n@import \"013b65d3da939c1f\";\n","/\n Copyright 2024 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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /\n The size of the ActionButton.\n \n @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the ActionButton appears over a color background. /\n staticColor?: 'black' \| 'white' \| 'auto',\n /* Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). /\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /* Whether the ActionButton should be selected (controlled). /\n isSelected?: boolean,\n /* Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). /\n isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' \| 'compact',\n orientation?: 'horizontal' \| 'vertical',\n isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange' \| 'isPending'>, StyleProps, ActionButtonStyleProps {\n /* The content to display in the ActionButton. /\n children: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: 'neutral',\n isEmphasized: 'accent',\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n paddingX: {\n default: 'edge-to-text',\n [iconOnly]: 0\n },\n paddingY: 0,\n borderTopStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':first-child': 'control'\n }\n }\n },\n borderTopEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': 'control'\n },\n vertical: {\n ':first-child': 'control'\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': 'control'\n },\n vertical: {\n ':last-child': 'control'\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':last-child': 'control'\n }\n }\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/\n ActionButtons allow users to perform an action.\n * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size \|\| 'M',\n isDisabled = props.isDisabled\n } = ctx \|\| {};\n\n return (\n <RACButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }],\n [AvatarContext, {\n size: avatarSize[size],\n styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.css.map"}
1	+ {"mappings":"AC+DyB;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;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkPQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAGb;;;;EAAA;;;;EAIA;;;;EAAA;;;;EAAA;;;;EAIA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7PK;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["2931924df01dc677","packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["@import \"3cf237010a171787\";\n@import \"c38bef69f8745925\";\n@import \"3059048d79d64c86\";\n@import \"9bc41819d7d08688\";\n@import \"013b65d3da939c1f\";\n@import \"972afc4b5ba1159d\";\n","/\n Copyright 2024 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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\nimport {NotificationBadgeContext} from './NotificationBadge';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /\n The size of the ActionButton.\n \n @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the ActionButton appears over a color background. /\n staticColor?: 'black' \| 'white' \| 'auto',\n /* Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). /\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /* Whether the ActionButton should be selected (controlled). /\n isSelected?: boolean,\n /* Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). /\n isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' \| 'compact',\n orientation?: 'horizontal' \| 'vertical',\n isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange' \| 'isPending'>, StyleProps, ActionButtonStyleProps {\n /* The content to display in the ActionButton. /\n children: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: 'neutral',\n isEmphasized: 'accent',\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n paddingX: {\n default: 'edge-to-text',\n [iconOnly]: 0\n },\n paddingY: 0,\n borderTopStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':first-child': 'control'\n }\n }\n },\n borderTopEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': 'control'\n },\n vertical: {\n ':first-child': 'control'\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': 'control'\n },\n vertical: {\n ':last-child': 'control'\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':last-child': 'control'\n }\n }\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true,\n '--badgeTop': {\n type: 'top',\n value: {\n default: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n [iconOnly]: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n [textOnly]: 0\n }\n },\n '--buttonPaddingX': {\n type: 'paddingStart',\n value: {\n default: '[calc(self(height, self(minHeight)) 3 / 8)]',\n [iconOnly]: 0\n }\n },\n '--iconWidth': {\n type: 'width',\n value: fontRelative(20)\n },\n '--badgePosition': {\n type: 'width',\n value: {\n default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',\n [iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',\n [textOnly]: 'full'\n }\n }\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/*\n ActionButtons allow users to perform an action.\n * They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.\n /\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size \|\| 'M',\n isDisabled = props.isDisabled\n } = ctx \|\| {};\n\n\n return (\n <RACButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }],\n [AvatarContext, {\n size: avatarSize[size],\n styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n }],\n [NotificationBadgeContext, {\n size: props.size === 'XS' ? undefined : props.size,\n styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.css.map"}

package/dist/ActionButton.mjs CHANGED Viewed

@@ -3,6 +3,7 @@ import {ActionButtonGroupContext as $10401bdc118cbc90$export$33f5f2f2cb85d743} f
 import {AvatarContext as $3ffa2cd930156220$export$a20dad690e1279e2} from "./Avatar.mjs";
 import {centerBaseline as $1f4b04be3f24aae3$export$9d7e2342a7e53afa} from "./CenterBaseline.mjs";
 import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../icons/Icon.mjs";
+import {NotificationBadgeContext as $bfb270fb056fefc5$export$9ab75c96ebaa396c} from "./NotificationBadge.mjs";
 import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
 import {SkeletonContext as $5ad421ec19460c48$export$74e166679b1f49ee} from "../icons/Skeleton.mjs";
 import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
@@ -36,8 +37,10 @@ import {useFocusableRef as $hl1Zj$useFocusableRef} from "@react-spectrum/utils";
 // These styles handle both ActionButton and ToggleButton
 const $da878a05ab4a403e$var$iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';
+const $da878a05ab4a403e$var$textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';
 const $da878a05ab4a403e$export$446543cff2a0f496 = function anonymous(props, overrides) {
     let rules = " .";
     let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
@@ -129,13 +132,7 @@ const $da878a05ab4a403e$export$446543cff2a0f496 = function anonymous(props, over
     }
     rules += ' __Ea';
     rules += ' k-375toq';
-    if (!$q) {
-        if (props.size === "XL") rules += ' qj';
-        else if (props.size === "L") rules += ' qi';
-        else if (props.size === "S") rules += ' qh';
-        else if (props.size === "XS") rules += ' qg';
-        else rules += ' qf';
-    }
+    if (!$q) rules += ' q-375tow';
     rules += ' _Pa';
     rules += ' _R-375x7f';
     rules += ' _Sa';
@@ -173,6 +170,15 @@ const $da878a05ab4a403e$export$446543cff2a0f496 = function anonymous(props, over
         if (props.isFocusVisible) rules += ' __R-3t1z';
     }
     rules += ' __S-yksgrp';
+    rules += ' -_1v78fj9_Y--17ppb3qa';
+    rules += ' -_1v78fj9_Y--1imc51y-5w6sh5';
+    rules += ' -_1v78fj9_Y--5w6sh5';
+    rules += ' -_1rtgbwq_C--1imc51ya';
+    rules += ' -_1rtgbwq_C--1x05cyt';
+    rules += ' -_17zm1mw_l--1sthc3k';
+    rules += ' -_17brfqf_l--17ppb3qb';
+    rules += ' -_17brfqf_l--1imc51y-pgyx2q';
+    rules += ' -_17brfqf_l--2loc28';
     if (props.isSelected) {
         if (props.isDisabled) rules += ' -_375toh_b-a_____J';
         else rules += ' -_375toh_b-a_____M';
@@ -220,6 +226,11 @@ const $da878a05ab4a403e$export$446543cff2a0f496 = function anonymous(props, over
     else if (props.size === "S") rules += ' -_375toq_k-h';
     else if (props.size === "XS") rules += ' -_375toq_k-g';
     else rules += ' -_375toq_k-f';
+    if (props.size === "XL") rules += ' -_375tow_q-j';
+    else if (props.size === "L") rules += ' -_375tow_q-i';
+    else if (props.size === "S") rules += ' -_375tow_q-h';
+    else if (props.size === "XS") rules += ' -_375tow_q-g';
+    else rules += ' -_375tow_q-f';
     return rules;
 };
 // Matching icon sizes. TBD.
@@ -285,6 +296,13 @@ const $da878a05ab4a403e$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $hl1Zj$forwa
                         size: $da878a05ab4a403e$var$avatarSize[size],
                         styles: " y-oelgqu _9-3t1x __B-3t1x"
                     }
+                ],
+                [
+                    (0, $bfb270fb056fefc5$export$9ab75c96ebaa396c),
+                    {
+                        size: props.size === 'XS' ? undefined : props.size,
+                        styles: " Va Y-1v78fj9 W-8959nl A-1q7bl7b y-1q7bl7b"
+                    }
                 ]
             ],
             children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $hl1Zj$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {

package/dist/ActionButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAiDD,yDAAyD;AACzD,MAAM,iCAAW;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgKb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,iBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,iCAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,wBAAgB,EAAE,CAAA,GAAA,yCAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAEZ,qBACE,gBAAC,CAAA,GAAA,aAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,yCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,yCAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["/\n Copyright 2024 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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /\n The size of the ActionButton.\n \n @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the ActionButton appears over a color background. /\n staticColor?: 'black' \| 'white' \| 'auto',\n /* Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). /\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /* Whether the ActionButton should be selected (controlled). /\n isSelected?: boolean,\n /* Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). /\n isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' \| 'compact',\n orientation?: 'horizontal' \| 'vertical',\n isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange' \| 'isPending'>, StyleProps, ActionButtonStyleProps {\n /* The content to display in the ActionButton. /\n children: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: 'neutral',\n isEmphasized: 'accent',\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n paddingX: {\n default: 'edge-to-text',\n [iconOnly]: 0\n },\n paddingY: 0,\n borderTopStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':first-child': 'control'\n }\n }\n },\n borderTopEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': 'control'\n },\n vertical: {\n ':first-child': 'control'\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': 'control'\n },\n vertical: {\n ':last-child': 'control'\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':last-child': 'control'\n }\n }\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/\n ActionButtons allow users to perform an action.\n * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size \|\| 'M',\n isDisabled = props.isDisabled\n } = ctx \|\| {};\n\n return (\n <RACButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }],\n [AvatarContext, {\n size: avatarSize[size],\n styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.mjs.map"}
1	+ {"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkDD,yDAAyD;AACzD,MAAM,iCAAW;AACjB,MAAM,iCAAW;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Lb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,iBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,iCAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,wBAAgB,EAAE,CAAA,GAAA,yCAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAGZ,qBACE,gBAAC,CAAA,GAAA,aAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,yCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,yCAAuB;oBAAG;wBACzB,MAAM,MAAM,IAAI,KAAK,OAAO,YAAY,MAAM,IAAI;wBAClD,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,yCAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["/\n Copyright 2024 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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\nimport {NotificationBadgeContext} from './NotificationBadge';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /\n The size of the ActionButton.\n \n @default 'M'\n /\n size?: 'XS' \| 'S' \| 'M' \| 'L' \| 'XL',\n /* The static color style to apply. Useful when the ActionButton appears over a color background. /\n staticColor?: 'black' \| 'white' \| 'auto',\n /* Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). /\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /* Whether the ActionButton should be selected (controlled). /\n isSelected?: boolean,\n /* Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). /\n isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' \| 'compact',\n orientation?: 'horizontal' \| 'vertical',\n isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' \| 'style' \| 'children' \| 'onHover' \| 'onHoverStart' \| 'onHoverEnd' \| 'onHoverChange' \| 'isPending'>, StyleProps, ActionButtonStyleProps {\n /* The content to display in the ActionButton. /\n children: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: 'neutral',\n isEmphasized: 'accent',\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n paddingX: {\n default: 'edge-to-text',\n [iconOnly]: 0\n },\n paddingY: 0,\n borderTopStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':first-child': 'control'\n }\n }\n },\n borderTopEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': 'control'\n },\n vertical: {\n ':first-child': 'control'\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': 'control'\n },\n vertical: {\n ':last-child': 'control'\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':last-child': 'control'\n }\n }\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true,\n '--badgeTop': {\n type: 'top',\n value: {\n default: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n [iconOnly]: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n [textOnly]: 0\n }\n },\n '--buttonPaddingX': {\n type: 'paddingStart',\n value: {\n default: '[calc(self(height, self(minHeight)) 3 / 8)]',\n [iconOnly]: 0\n }\n },\n '--iconWidth': {\n type: 'width',\n value: fontRelative(20)\n },\n '--badgePosition': {\n type: 'width',\n value: {\n default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',\n [iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',\n [textOnly]: 'full'\n }\n }\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/*\n ActionButtons allow users to perform an action.\n * They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.\n /\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size \|\| 'M',\n isDisabled = props.isDisabled\n } = ctx \|\| {};\n\n\n return (\n <RACButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className \|\| '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered \|\| overlayTriggerState?.isOpen \|\| false,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }],\n [AvatarContext, {\n size: avatarSize[size],\n styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n }],\n [NotificationBadgeContext, {\n size: props.size === 'XS' ? undefined : props.size,\n styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.mjs.map"}

package/dist/NotificationBadge.cjs ADDED Viewed

@@ -0,0 +1,155 @@
+require("./NotificationBadge.css");
+var $4526404114e78c80$exports = require("./intlStrings.cjs");
+var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
+var $62rny$reactjsxruntime = require("react/jsx-runtime");
+var $62rny$reactariautils = require("@react-aria/utils");
+var $62rny$internationalizednumber = require("@internationalized/number");
+var $62rny$react = require("react");
+var $62rny$reactspectrumutils = require("@react-spectrum/utils");
+var $62rny$reactariai18n = require("@react-aria/i18n");
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+$parcel$export(module.exports, "NotificationBadgeContext", () => $cd7301fb33ba8690$export$9ab75c96ebaa396c);
+$parcel$export(module.exports, "NotificationBadge", () => $cd7301fb33ba8690$export$529cab0ca6be204e);
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+const $cd7301fb33ba8690$export$9ab75c96ebaa396c = /*#__PURE__*/ (0, $62rny$react.createContext)(null);
+const $cd7301fb33ba8690$var$badge = function anonymous(props, overrides) {
+    let rules = " .";
+    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
+    rules += matches.join('');
+    let $l = false;
+    for (let p of matches)if (/^\s*l/.test(p)) $l = true;
+    rules += ' _0d';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
+    if (props.size === "XL") {
+        rules += ' _ebf';
+        rules += ' _ee';
+    } else if (props.size === "L") {
+        rules += ' _ebd';
+        rules += ' _ec';
+    } else if (props.size === "M") {
+        rules += ' _ebb';
+        rules += ' _ea';
+    } else if (props.size === "S") {
+        rules += ' _ebb';
+        rules += ' _ea';
+    }
+    rules += ' _fb';
+    rules += ' _g-1x99dlob';
+    rules += ' _ga';
+    rules += ' aa_____K';
+    rules += ' ac';
+    rules += ' waa';
+    rules += ' ua-375yri';
+    rules += ' va-375yri';
+    rules += ' sa-375yri';
+    rules += ' ta-375yri';
+    rules += ' ca_____I';
+    rules += ' _3d';
+    rules += ' _2c';
+    rules += ' ba_____J';
+    if (props.isPressed) rules += ' b_____S';
+    else if (props.isFocusVisible) rules += ' b_____S';
+    else if (props.isHovered) rules += ' b_____S';
+    else rules += ' b_____R';
+    rules += ' k-375toq';
+    if (props.isSingleDigit) rules += ' _cb';
+    else if (props.isIndicatorOnly) rules += ' _cb';
+    if (!$l) rules += ' le';
+    if (props.isDoubleDigit) rules += ' CI';
+    if (props.isDoubleDigit) rules += ' DI';
+    rules += ' _wg';
+    rules += ' _xg';
+    rules += ' _yg';
+    rules += ' _zg';
+    if (props.size === "XL") {
+        if (props.isIndicatorOnly) rules += ' -_375toq_k--1916w3k';
+        else rules += ' -_375toq_k-G';
+    } else if (props.size === "L") {
+        if (props.isIndicatorOnly) rules += ' -_375toq_k--1916w3k';
+        else rules += ' -_375toq_k-E';
+    } else if (props.size === "M") {
+        if (props.isIndicatorOnly) rules += ' -_375toq_k-w';
+        else rules += ' -_375toq_k--8p5mjn';
+    } else if (props.size === "S") {
+        if (props.isIndicatorOnly) rules += ' -_375toq_k-w';
+        else rules += ' -_375toq_k-A';
+    }
+    return rules;
+};
+const $cd7301fb33ba8690$export$529cab0ca6be204e = /*#__PURE__*/ (0, $62rny$react.forwardRef)(function Badge(props, ref) {
+    let stringFormatter = (0, $62rny$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($4526404114e78c80$exports))), '@react-spectrum/s2');
+    [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $cd7301fb33ba8690$export$9ab75c96ebaa396c);
+    let { size: size = 'S', value: value, ...otherProps } = props;
+    let domRef = (0, $62rny$reactspectrumutils.useDOMRef)(ref);
+    let { locale: locale } = (0, $62rny$reactariai18n.useLocale)();
+    let formattedValue = '';
+    let isIndicatorOnly = false;
+    let isSingleDigit = false;
+    let isDoubleDigit = false;
+    if (value == null) isIndicatorOnly = true;
+    else if (value <= 0) throw new Error('Value cannot be negative or zero');
+    else if (!Number.isInteger(value)) throw new Error('Value must be a positive integer');
+    else {
+        formattedValue = new (0, $62rny$internationalizednumber.NumberFormatter)(locale).format(Math.min(value, 99));
+        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)
+        if (length === 1) isSingleDigit = true;
+        else if (length === 2) isDoubleDigit = true;
+        if (value > 99) formattedValue = stringFormatter.format('notificationbadge.plus', {
+            notifications: formattedValue
+        });
+    }
+    let ariaLabel = props['aria-label'] || undefined;
+    if (ariaLabel === undefined && isIndicatorOnly) ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');
+    return /*#__PURE__*/ (0, $62rny$reactjsxruntime.jsx)("span", {
+        ...(0, $62rny$reactariautils.filterDOMProps)(otherProps, {
+            labelable: true
+        }),
+        role: ariaLabel && 'img',
+        "aria-label": ariaLabel,
+        className: (props.UNSAFE_className || '') + $cd7301fb33ba8690$var$badge({
+            size: size,
+            isIndicatorOnly: isIndicatorOnly,
+            isSingleDigit: isSingleDigit,
+            isDoubleDigit: isDoubleDigit
+        }, props.styles),
+        style: props.UNSAFE_style,
+        ref: domRef,
+        children: formattedValue
+    });
+});
+//# sourceMappingURL=NotificationBadge.cjs.map

package/dist/NotificationBadge.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+BM,MAAM,0DAA2B,CAAA,GAAA,0BAAY,EAA8E;AAElI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEC,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAA6B,EAAE,GAA2B;IACnH,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,YACP,KAAK,EACL,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,8BAAQ;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,oCAAa,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;QAAa,GAAG,MAAM,MAAM;QACrH,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';\nimport {filterDOMProps} from '@react-aria/utils';\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 '@react-spectrum/utils';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\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\nexport const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style({\n display: 'flex',\n font: 'control',\n color: {\n default: 'white',\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 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: 'fit',\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 ...otherProps\n } = props;\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}, props.styles)}\n style={props.UNSAFE_style}\n ref={domRef}>\n {formattedValue}\n </span>\n );\n});\n"],"names":[],"version":3,"file":"NotificationBadge.cjs.map"}