@react-spectrum/s2 1.4.0 → 1.5.0

package/dist/private/Button.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.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 {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {\n  ButtonRenderProps,\n  Button as RACButton,\n  ButtonProps as RACButtonProps\n} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  control,\n  getAllowedOverrides,\n  staticColor,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {linearGradient} from '../style/spectrum-theme' with {type: 'macro'};\n// @ts-ignore\nimport {Link, LinkProps} from 'react-aria-components/Link';\nimport {OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai';\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline';\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto';\n}\n\nexport interface ButtonProps\n  extends\n    Omit<\n      RACButtonProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | 'onClick'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode;\n}\n\nexport interface LinkButtonProps\n  extends\n    Omit<\n      LinkProps,\n      'className' | 'style' | 'render' | 'children' | 'onClick' | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode;\n}\n\nexport const ButtonContext =\n  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext =\n  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    ...control({shape: 'pill', wrap: true, icon: true}),\n    position: 'relative',\n    justifyContent: 'center',\n    textAlign: 'start',\n    fontWeight: 'bold',\n    userSelect: 'none',\n    width: 'fit',\n    textDecoration: 'none', // for link buttons\n    transition: 'default',\n    borderStyle: 'solid',\n    borderWidth: {\n      fillStyle: {\n        fill: 0,\n        outline: 2\n      },\n      variant: {\n        premium: 0,\n        genai: 0\n      }\n    },\n    borderColor: {\n      variant: {\n        primary: baseColor('gray-800'),\n        secondary: baseColor('gray-300')\n      },\n      isDisabled: 'disabled',\n      isStaticColor: {\n        variant: {\n          primary: baseColor('transparent-overlay-800'),\n          secondary: baseColor('transparent-overlay-300')\n        },\n        isDisabled: 'transparent-overlay-300'\n      },\n      forcedColors: {\n        default: 'ButtonBorder',\n        isHovered: 'Highlight',\n        isDisabled: 'GrayText'\n      }\n    },\n    backgroundColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor('neutral'),\n            secondary: baseColor('gray-100'),\n            accent: {\n              default: lightDark('accent-900', 'accent-700'),\n              isHovered: lightDark('accent-1000', 'accent-600'),\n              isPressed: lightDark('accent-1000', 'accent-600'),\n              isFocusVisible: lightDark('accent-1000', 'accent-600')\n            },\n            negative: {\n              default: lightDark('negative-900', 'negative-700'),\n              isHovered: lightDark('negative-1000', 'negative-600'),\n              isPressed: lightDark('negative-1000', 'negative-600'),\n              isFocusVisible: lightDark('negative-1000', 'negative-600')\n            },\n            premium: 'gray-100',\n            genai: 'gray-100'\n          },\n          isDisabled: 'disabled'\n        },\n        outline: {\n          variant: {\n            premium: 'gray-100',\n            genai: 'gray-100'\n          },\n          default: 'transparent',\n          isHovered: 'gray-100',\n          isPressed: 'gray-100',\n          isFocusVisible: 'gray-100',\n          isDisabled: {\n            default: 'transparent',\n            variant: {\n              premium: 'gray-100',\n              genai: 'gray-100'\n            }\n          }\n        }\n      },\n      isStaticColor: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-overlay-800'),\n              secondary: baseColor('transparent-overlay-100'),\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            },\n            isDisabled: 'transparent-overlay-100'\n          },\n          outline: {\n            variant: {\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            },\n            default: 'transparent',\n            isHovered: 'transparent-overlay-100',\n            isPressed: 'transparent-overlay-100',\n            isFocusVisible: 'transparent-overlay-100',\n            isDisabled: {\n              default: 'transparent',\n              variant: {\n                premium: 'transparent-overlay-100',\n                genai: 'transparent-overlay-100'\n              }\n            }\n          }\n        }\n      },\n      forcedColors: {\n        fillStyle: {\n          fill: {\n            default: 'ButtonText',\n            isHovered: 'Highlight',\n            isDisabled: 'GrayText'\n          },\n          outline: 'ButtonFace'\n        }\n      }\n    },\n    color: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: 'gray-25',\n            secondary: baseColor('neutral'),\n            accent: 'white',\n            negative: 'white',\n            premium: 'white',\n            genai: 'white'\n          },\n          isDisabled: 'disabled'\n        },\n        outline: {\n          default: baseColor('neutral'),\n          variant: {\n            premium: 'white',\n            genai: 'white'\n          },\n          isDisabled: 'disabled'\n        }\n      },\n      isStaticColor: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'auto',\n              secondary: 'white',\n              premium: 'white',\n              genai: 'white'\n            }\n          },\n          outline: {\n            variant: {\n              premium: 'white',\n              genai: 'white'\n            },\n            default: 'white'\n          }\n        },\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        fillStyle: {\n          fill: {\n            default: 'ButtonFace',\n            isDisabled: 'HighlightText'\n          },\n          outline: {\n            default: 'ButtonText',\n            isDisabled: 'GrayText'\n          }\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    forcedColorAdjust: 'none',\n    disableTapHighlight: true\n  },\n  getAllowedOverrides()\n);\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: -1,\n  transition: 'default',\n  borderRadius: 'inherit',\n  backgroundImage: {\n    variant: {\n      premium: {\n        default: linearGradient(\n          'to bottom right',\n          ['fuchsia-900', 0],\n          ['indigo-900', 66],\n          ['blue-900', 100]\n        ),\n        isHovered: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        ),\n        isPressed: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        ),\n        isFocusVisible: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        )\n      },\n      genai: {\n        default: linearGradient(\n          'to bottom right',\n          ['red-900', 0],\n          ['magenta-900', 33],\n          ['indigo-900', 100]\n        ),\n        isHovered: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        ),\n        isPressed: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        ),\n        isFocusVisible: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        )\n      }\n    },\n    isDisabled: 'none',\n    forcedColors: 'none'\n  },\n  // Force gradient colors to remain static between light and dark theme.\n  colorScheme: {\n    variant: {\n      premium: 'light',\n      genai: 'light'\n    }\n  }\n});\n\nexport function usePendingState(isPending: boolean) {\n  let [isProgressVisible, setIsProgressVisible] = useState(false);\n  useEffect(() => {\n    let timeout: ReturnType<typeof setTimeout>;\n    if (isPending) {\n      timeout = setTimeout(() => {\n        setIsProgressVisible(true);\n      }, 1000);\n    } else {\n      setIsProgressVisible(false);\n    }\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isPending]);\n  return {isProgressVisible};\n}\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {isPending = false, variant = 'primary', fillStyle = 'fill', size = 'M', staticColor} = props;\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  let {isProgressVisible} = usePendingState(isPending);\n\n  return (\n    <RACButton\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        button(\n          {\n            ...renderProps,\n            // Retain hover styles when an overlay is open.\n            isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n            isDisabled: renderProps.isDisabled || isProgressVisible,\n            variant,\n            fillStyle,\n            size,\n            staticColor,\n            isStaticColor: !!staticColor\n          },\n          props.styles\n        )\n      }>\n      {renderProps => (\n        <>\n          {variant === 'genai' || variant === 'premium' ? (\n            <span\n              className={gradient({\n                ...renderProps,\n                // Retain hover styles when an overlay is open.\n                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n                isDisabled: renderProps.isDisabled || isProgressVisible,\n                variant\n              })}\n            />\n          ) : null}\n          <Provider\n            values={[\n              [SkeletonContext, null],\n              [\n                TextContext,\n                {\n                  styles: style({\n                    paddingY: '--labelPadding',\n                    order: 1,\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible}),\n                  // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n                  'data-rsp-slot': 'text'\n                }\n              ],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    flexShrink: 0,\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\n              ]\n            ]}>\n            {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            {isPending && (\n              <div\n                className={style({\n                  position: 'absolute',\n                  top: '50%',\n                  left: '50%',\n                  transform: 'translate(-50%, -50%)',\n                  visibility: {\n                    default: 'hidden',\n                    isProgressVisible: 'visible'\n                  }\n                })({isProgressVisible, isPending})}>\n                <ProgressCircle\n                  isIndeterminate\n                  aria-label={stringFormatter.format('button.pending')}\n                  size=\"S\"\n                  staticColor={staticColor}\n                  styles={style({\n                    size: {\n                      size: {\n                        S: 14,\n                        M: 18,\n                        L: 20,\n                        XL: 24\n                      }\n                    }\n                  })({size})}\n                />\n              </div>\n            )}\n          </Provider>\n        </>\n      )}\n    </RACButton>\n  );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for\n * allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(\n  props: LinkButtonProps,\n  ref: FocusableRef<HTMLAnchorElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n  props = useFormProps(props);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n  let {fillStyle = 'fill', size = 'M', variant = 'primary', staticColor, styles, children} = props;\n\n  return (\n    <Link\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        button(\n          {\n            ...renderProps,\n            // Retain hover styles when an overlay is open.\n            isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n            variant,\n            fillStyle,\n            size,\n            staticColor,\n            isStaticColor: !!staticColor,\n            isPending: false\n          },\n          styles\n        )\n      }>\n      {renderProps => (\n        <>\n          {variant === 'genai' || variant === 'premium' ? (\n            <span\n              className={gradient({\n                ...renderProps,\n                // Retain hover styles when an overlay is open.\n                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n                variant\n              })}\n            />\n          ) : null}\n          <Provider\n            values={[\n              [SkeletonContext, null],\n              [\n                TextContext,\n                {\n                  styles: style({paddingY: '--labelPadding', order: 1}),\n                  // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n                  'data-rsp-slot': 'text'\n                }\n              ],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    flexShrink: 0\n                  })\n                }\n              ]\n            ]}>\n            {typeof children === 'string' ? <Text>{children}</Text> : children}\n          </Provider>\n        </>\n      )}\n    </Link>\n  );\n});\n"],"names":[],"version":3,"file":"Button.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.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 {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {\n  ButtonRenderProps,\n  Button as RACButton,\n  ButtonProps as RACButtonProps\n} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  control,\n  getAllowedOverrides,\n  staticColor,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {linearGradient} from '../style/spectrum-theme' with {type: 'macro'};\nimport {Link, LinkProps} from 'react-aria-components/Link';\nimport {OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai';\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline';\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto';\n}\n\nexport interface ButtonProps\n  extends\n    Omit<\n      RACButtonProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | 'onClick'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode;\n}\n\nexport interface LinkButtonProps\n  extends\n    Omit<\n      LinkProps,\n      'className' | 'style' | 'render' | 'children' | 'onClick' | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode;\n}\n\nexport const ButtonContext =\n  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext =\n  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    ...control({shape: 'pill', wrap: true, icon: true}),\n    position: 'relative',\n    justifyContent: 'center',\n    textAlign: 'start',\n    fontWeight: 'bold',\n    userSelect: 'none',\n    width: 'fit',\n    textDecoration: 'none', // for link buttons\n    transition: 'default',\n    borderStyle: 'solid',\n    borderWidth: {\n      fillStyle: {\n        fill: 0,\n        outline: 2\n      },\n      variant: {\n        premium: 0,\n        genai: 0\n      }\n    },\n    borderColor: {\n      variant: {\n        primary: baseColor('gray-800'),\n        secondary: baseColor('gray-300')\n      },\n      isDisabled: 'disabled',\n      isStaticColor: {\n        variant: {\n          primary: baseColor('transparent-overlay-800'),\n          secondary: baseColor('transparent-overlay-300')\n        },\n        isDisabled: 'transparent-overlay-300'\n      },\n      forcedColors: {\n        default: 'ButtonBorder',\n        isHovered: 'Highlight',\n        isDisabled: 'GrayText'\n      }\n    },\n    backgroundColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor('neutral'),\n            secondary: baseColor('gray-100'),\n            accent: {\n              default: lightDark('accent-900', 'accent-700'),\n              isHovered: lightDark('accent-1000', 'accent-600'),\n              isPressed: lightDark('accent-1000', 'accent-600'),\n              isFocusVisible: lightDark('accent-1000', 'accent-600')\n            },\n            negative: {\n              default: lightDark('negative-900', 'negative-700'),\n              isHovered: lightDark('negative-1000', 'negative-600'),\n              isPressed: lightDark('negative-1000', 'negative-600'),\n              isFocusVisible: lightDark('negative-1000', 'negative-600')\n            },\n            premium: 'gray-100',\n            genai: 'gray-100'\n          },\n          isDisabled: 'disabled'\n        },\n        outline: {\n          variant: {\n            premium: 'gray-100',\n            genai: 'gray-100'\n          },\n          default: 'transparent',\n          isHovered: 'gray-100',\n          isPressed: 'gray-100',\n          isFocusVisible: 'gray-100',\n          isDisabled: {\n            default: 'transparent',\n            variant: {\n              premium: 'gray-100',\n              genai: 'gray-100'\n            }\n          }\n        }\n      },\n      isStaticColor: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-overlay-800'),\n              secondary: baseColor('transparent-overlay-100'),\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            },\n            isDisabled: 'transparent-overlay-100'\n          },\n          outline: {\n            variant: {\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            },\n            default: 'transparent',\n            isHovered: 'transparent-overlay-100',\n            isPressed: 'transparent-overlay-100',\n            isFocusVisible: 'transparent-overlay-100',\n            isDisabled: {\n              default: 'transparent',\n              variant: {\n                premium: 'transparent-overlay-100',\n                genai: 'transparent-overlay-100'\n              }\n            }\n          }\n        }\n      },\n      forcedColors: {\n        fillStyle: {\n          fill: {\n            default: 'ButtonText',\n            isHovered: 'Highlight',\n            isDisabled: 'GrayText'\n          },\n          outline: 'ButtonFace'\n        }\n      }\n    },\n    color: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: 'gray-25',\n            secondary: baseColor('neutral'),\n            accent: 'white',\n            negative: 'white',\n            premium: 'white',\n            genai: 'white'\n          },\n          isDisabled: 'disabled'\n        },\n        outline: {\n          default: baseColor('neutral'),\n          variant: {\n            premium: 'white',\n            genai: 'white'\n          },\n          isDisabled: 'disabled'\n        }\n      },\n      isStaticColor: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'auto',\n              secondary: 'white',\n              premium: 'white',\n              genai: 'white'\n            }\n          },\n          outline: {\n            variant: {\n              premium: 'white',\n              genai: 'white'\n            },\n            default: 'white'\n          }\n        },\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        fillStyle: {\n          fill: {\n            default: 'ButtonFace',\n            isDisabled: 'HighlightText'\n          },\n          outline: {\n            default: 'ButtonText',\n            isDisabled: 'GrayText'\n          }\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    forcedColorAdjust: 'none',\n    disableTapHighlight: true\n  },\n  getAllowedOverrides()\n);\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: -1,\n  transition: 'default',\n  borderRadius: 'inherit',\n  backgroundImage: {\n    variant: {\n      premium: {\n        default: linearGradient(\n          'to bottom right',\n          ['fuchsia-900', 0],\n          ['indigo-900', 66],\n          ['blue-900', 100]\n        ),\n        isHovered: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        ),\n        isPressed: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        ),\n        isFocusVisible: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        )\n      },\n      genai: {\n        default: linearGradient(\n          'to bottom right',\n          ['red-900', 0],\n          ['magenta-900', 33],\n          ['indigo-900', 100]\n        ),\n        isHovered: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        ),\n        isPressed: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        ),\n        isFocusVisible: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        )\n      }\n    },\n    isDisabled: 'none',\n    forcedColors: 'none'\n  },\n  // Force gradient colors to remain static between light and dark theme.\n  colorScheme: {\n    variant: {\n      premium: 'light',\n      genai: 'light'\n    }\n  }\n});\n\nexport function usePendingState(isPending: boolean) {\n  let [isProgressVisible, setIsProgressVisible] = useState(false);\n  useEffect(() => {\n    let timeout: ReturnType<typeof setTimeout>;\n    if (isPending) {\n      timeout = setTimeout(() => {\n        setIsProgressVisible(true);\n      }, 1000);\n    } else {\n      setIsProgressVisible(false);\n    }\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isPending]);\n  return {isProgressVisible};\n}\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {isPending = false, variant = 'primary', fillStyle = 'fill', size = 'M', staticColor} = props;\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  let {isProgressVisible} = usePendingState(isPending);\n\n  return (\n    <RACButton\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        button(\n          {\n            ...renderProps,\n            // Retain hover styles when an overlay is open.\n            isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n            isDisabled: renderProps.isDisabled || isProgressVisible,\n            variant,\n            fillStyle,\n            size,\n            staticColor,\n            isStaticColor: !!staticColor\n          },\n          props.styles\n        )\n      }>\n      {renderProps => (\n        <>\n          {variant === 'genai' || variant === 'premium' ? (\n            <span\n              className={gradient({\n                ...renderProps,\n                // Retain hover styles when an overlay is open.\n                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n                isDisabled: renderProps.isDisabled || isProgressVisible,\n                variant\n              })}\n            />\n          ) : null}\n          <Provider\n            values={[\n              [SkeletonContext, null],\n              [\n                TextContext,\n                {\n                  styles: style({\n                    paddingY: '--labelPadding',\n                    order: 1,\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible}),\n                  // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n                  'data-rsp-slot': 'text'\n                }\n              ],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    flexShrink: 0,\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\n              ]\n            ]}>\n            {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            {isPending && (\n              <div\n                className={style({\n                  position: 'absolute',\n                  top: '50%',\n                  left: '50%',\n                  transform: 'translate(-50%, -50%)',\n                  visibility: {\n                    default: 'hidden',\n                    isProgressVisible: 'visible'\n                  }\n                })({isProgressVisible, isPending})}>\n                <ProgressCircle\n                  isIndeterminate\n                  aria-label={stringFormatter.format('button.pending')}\n                  size=\"S\"\n                  staticColor={staticColor}\n                  styles={style({\n                    size: {\n                      size: {\n                        S: 14,\n                        M: 18,\n                        L: 20,\n                        XL: 24\n                      }\n                    }\n                  })({size})}\n                />\n              </div>\n            )}\n          </Provider>\n        </>\n      )}\n    </RACButton>\n  );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for\n * allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(\n  props: LinkButtonProps,\n  ref: FocusableRef<HTMLAnchorElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n  props = useFormProps(props);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n  let {fillStyle = 'fill', size = 'M', variant = 'primary', staticColor, styles, children} = props;\n\n  return (\n    <Link\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        button(\n          {\n            ...renderProps,\n            // Retain hover styles when an overlay is open.\n            isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n            variant,\n            fillStyle,\n            size,\n            staticColor,\n            isStaticColor: !!staticColor,\n            isPending: false\n          },\n          styles\n        )\n      }>\n      {renderProps => (\n        <>\n          {variant === 'genai' || variant === 'premium' ? (\n            <span\n              className={gradient({\n                ...renderProps,\n                // Retain hover styles when an overlay is open.\n                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n                variant\n              })}\n            />\n          ) : null}\n          <Provider\n            values={[\n              [SkeletonContext, null],\n              [\n                TextContext,\n                {\n                  styles: style({paddingY: '--labelPadding', order: 1}),\n                  // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n                  'data-rsp-slot': 'text'\n                }\n              ],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    flexShrink: 0\n                  })\n                }\n              ]\n            ]}>\n            {typeof children === 'string' ? <Text>{children}</Text> : children}\n          </Provider>\n        </>\n      )}\n    </Link>\n  );\n});\n"],"names":[],"version":3,"file":"Button.mjs.map"}

package/dist/private/ButtonGroup.cjs

@@ -41,32 +41,35 @@ const $e1016b8947dbadb8$export$4c574c91bb0be0e2 = /*#__PURE__*/ (0, $5rFNy$react
 const $e1016b8947dbadb8$var$buttongroup = function anonymous(props, overrides) {
     let rules = " ";
     let position = false;
+    let maxWidth = false;
     let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
+        if (p[1] === "L") maxWidth = true;
         rules += p[0];
     }
-    rules += ' sh131';
-    if (!position) rules += ' _Pc131';
-    if (props.size === "XL") rules += ' Ug131';
-    else if (props.size === "L") rules += ' Ug131';
-    else if (props.size === "M") rules += ' Ug131';
-    else if (props.size === "S") rules += ' Ue131';
-    if (props.size === "XL") rules += ' qg131';
-    else if (props.size === "L") rules += ' qg131';
-    else if (props.size === "M") rules += ' qg131';
-    else if (props.size === "S") rules += ' qe131';
-    if (props.orientation === "vertical") rules += ' _ta131';
-    else rules += ' _tc131';
+    rules += ' sh15';
+    if (!position) rules += ' _Pc15';
+    if (!maxWidth) rules += ' La15';
+    if (props.size === "XL") rules += ' Ug15';
+    else if (props.size === "L") rules += ' Ug15';
+    else if (props.size === "M") rules += ' Ug15';
+    else if (props.size === "S") rules += ' Ue15';
+    if (props.size === "XL") rules += ' qg15';
+    else if (props.size === "L") rules += ' qg15';
+    else if (props.size === "M") rules += ' qg15';
+    else if (props.size === "S") rules += ' qe15';
+    if (props.orientation === "vertical") rules += ' _ta15';
+    else rules += ' _tc15';
     if (props.orientation === "vertical") {
-        if (props.align === "center") rules += ' eb131';
-        else if (props.align === "end") rules += ' ec131';
-        else rules += ' ed131';
-    } else rules += ' eb131';
+        if (props.align === "center") rules += ' eb15';
+        else if (props.align === "end") rules += ' ec15';
+        else rules += ' ed15';
+    } else rules += ' eb15';
     if (props.orientation === "vertical") {
-        if (props.align === "center") rules += ' _Ca131';
-        else if (props.align === "end") rules += ' _Cb131';
-        else rules += ' _Cg131';
+        if (props.align === "center") rules += ' _Ca15';
+        else if (props.align === "end") rules += ' _Cb15';
+        else rules += ' _Cg15';
     }
     return rules;
 };
@@ -120,7 +123,7 @@ const $e1016b8947dbadb8$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $5rFNy$react
     });
     if (props.isHidden) return null;
     let context = {
-        styles: " _va131",
+        styles: " _va15",
         size: size,
         isDisabled: isDisabled
     };

package/dist/private/ButtonGroup.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAE5C,CAAC;AAEH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDC,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAC7C,KAAuB,EACvB,GAA2B;IAE3B,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,EACV,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,yDAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,wBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IACE,oBAAoB,IAAI,CACtB,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OAG1E,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEF,uDAAuD;IACzD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,2DAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAsB;IACxC,CAAA,GAAA,2DAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAE/C,uDAAuD;IACzD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,+DAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,6CAAa,EAAE,WAAW;QAC9B,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WACE,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAC5B,kCACE;mBACE;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GACA,MAAM,MAAM;kBAGhB,cAAA,gCAAC,CAAA,GAAA,wCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,uCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,2CAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {useValueEffect} from 'react-aria/private/utils/useValueEffect';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center';\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode;\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean;\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean;\n}\n\nexport const ButtonGroupContext = createContext<\n  ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>\n>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>(\n  {\n    display: 'inline-flex',\n    position: 'relative',\n    gap: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 12,\n        XL: 12\n      }\n    },\n    flexDirection: {\n      default: 'row',\n      orientation: {\n        vertical: 'column'\n      }\n    },\n    alignItems: {\n      default: 'center',\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    },\n    justifyContent: {\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(\n  props: ButtonGroupProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled,\n    ...otherProps\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (\n          buttonGroupChildren.some(\n            child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX\n          )\n        ) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        buttongroup(\n          {\n            align,\n            orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n            size\n          },\n          props.styles\n        )\n      }>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAE5C,CAAC;AAEH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDC,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAC7C,KAAuB,EACvB,GAA2B;IAE3B,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,EACV,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,yDAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,wBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IACE,oBAAoB,IAAI,CACtB,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OAG1E,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEF,uDAAuD;IACzD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,2DAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAsB;IACxC,CAAA,GAAA,2DAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAE/C,uDAAuD;IACzD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,+DAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,6CAAa,EAAE,WAAW;QAC9B,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WACE,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAC5B,kCACE;mBACE;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GACA,MAAM,MAAM;kBAGhB,cAAA,gCAAC,CAAA,GAAA,wCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,uCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,2CAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {useValueEffect} from 'react-aria/private/utils/useValueEffect';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center';\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode;\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean;\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean;\n}\n\nexport const ButtonGroupContext = createContext<\n  ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>\n>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>(\n  {\n    display: 'inline-flex',\n    position: 'relative',\n    maxWidth: 'full',\n    gap: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 12,\n        XL: 12\n      }\n    },\n    flexDirection: {\n      default: 'row',\n      orientation: {\n        vertical: 'column'\n      }\n    },\n    alignItems: {\n      default: 'center',\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    },\n    justifyContent: {\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(\n  props: ButtonGroupProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled,\n    ...otherProps\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (\n          buttonGroupChildren.some(\n            child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX\n          )\n        ) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        buttongroup(\n          {\n            align,\n            orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n            size\n          },\n          props.styles\n        )\n      }>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.cjs.map"}

package/dist/private/ButtonGroup.css

@@ -1,61 +1,65 @@
 @layer _.a {
-  .sh131 {
+  .sh15 {
     display: inline-flex;
   }
 
-  ._Pc131 {
+  ._Pc15 {
     position: relative;
   }
 
-  .Ue131 {
+  .La15 {
+    max-width: 100%;
+  }
+
+  .Ue15 {
     row-gap: .5rem;
   }
 
-  .Ug131 {
+  .Ug15 {
     row-gap: .75rem;
   }
 
-  .qe131 {
+  .qe15 {
     column-gap: .5rem;
   }
 
-  .qg131 {
+  .qg15 {
     column-gap: .75rem;
   }
 
-  ._tc131 {
+  ._tc15 {
     flex-direction: row;
   }
 
-  ._ta131 {
+  ._ta15 {
     flex-direction: column;
   }
 
-  .ed131 {
+  .ed15 {
     align-items: start;
   }
 
-  .ec131 {
+  .ec15 {
     align-items: end;
   }
 
-  .eb131 {
+  .eb15 {
     align-items: center;
   }
 
-  ._Cg131 {
+  ._Cg15 {
     justify-content: start;
   }
 
-  ._Cb131 {
+  ._Cb15 {
     justify-content: end;
   }
 
-  ._Ca131 {
+  ._Ca15 {
     justify-content: center;
   }
 
-  ._va131 {
+  ._va15 {
     flex-shrink: 0;
   }
 }

package/dist/private/ButtonGroup.css.map

@@ -1 +1 @@
-{"mappings":"AC+DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkHK","sources":["46da5d9d2ee61a4a","packages/@react-spectrum/s2/src/ButtonGroup.tsx"],"sourcesContent":["@import \"8be38106edd06864\";\n@import \"d77a01524490dd5a\";\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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {useValueEffect} from 'react-aria/private/utils/useValueEffect';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center';\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode;\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean;\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean;\n}\n\nexport const ButtonGroupContext = createContext<\n  ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>\n>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>(\n  {\n    display: 'inline-flex',\n    position: 'relative',\n    gap: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 12,\n        XL: 12\n      }\n    },\n    flexDirection: {\n      default: 'row',\n      orientation: {\n        vertical: 'column'\n      }\n    },\n    alignItems: {\n      default: 'center',\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    },\n    justifyContent: {\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(\n  props: ButtonGroupProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled,\n    ...otherProps\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (\n          buttonGroupChildren.some(\n            child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX\n          )\n        ) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        buttongroup(\n          {\n            align,\n            orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n            size\n          },\n          props.styles\n        )\n      }>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.css.map"}
+{"mappings":"AC+DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmHK","sources":["46da5d9d2ee61a4a","packages/@react-spectrum/s2/src/ButtonGroup.tsx"],"sourcesContent":["@import \"8be38106edd06864\";\n@import \"d77a01524490dd5a\";\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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {useValueEffect} from 'react-aria/private/utils/useValueEffect';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center';\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode;\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean;\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean;\n}\n\nexport const ButtonGroupContext = createContext<\n  ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>\n>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>(\n  {\n    display: 'inline-flex',\n    position: 'relative',\n    maxWidth: 'full',\n    gap: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 12,\n        XL: 12\n      }\n    },\n    flexDirection: {\n      default: 'row',\n      orientation: {\n        vertical: 'column'\n      }\n    },\n    alignItems: {\n      default: 'center',\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    },\n    justifyContent: {\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(\n  props: ButtonGroupProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled,\n    ...otherProps\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (\n          buttonGroupChildren.some(\n            child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX\n          )\n        ) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        buttongroup(\n          {\n            align,\n            orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n            size\n          },\n          props.styles\n        )\n      }>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.css.map"}

package/dist/private/ButtonGroup.mjs

@@ -34,32 +34,35 @@ const $472eaa9a9b344b9a$export$4c574c91bb0be0e2 = /*#__PURE__*/ (0, $bnJX2$creat
 const $472eaa9a9b344b9a$var$buttongroup = function anonymous(props, overrides) {
     let rules = " ";
     let position = false;
+    let maxWidth = false;
     let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
+        if (p[1] === "L") maxWidth = true;
         rules += p[0];
     }
-    rules += ' sh131';
-    if (!position) rules += ' _Pc131';
-    if (props.size === "XL") rules += ' Ug131';
-    else if (props.size === "L") rules += ' Ug131';
-    else if (props.size === "M") rules += ' Ug131';
-    else if (props.size === "S") rules += ' Ue131';
-    if (props.size === "XL") rules += ' qg131';
-    else if (props.size === "L") rules += ' qg131';
-    else if (props.size === "M") rules += ' qg131';
-    else if (props.size === "S") rules += ' qe131';
-    if (props.orientation === "vertical") rules += ' _ta131';
-    else rules += ' _tc131';
+    rules += ' sh15';
+    if (!position) rules += ' _Pc15';
+    if (!maxWidth) rules += ' La15';
+    if (props.size === "XL") rules += ' Ug15';
+    else if (props.size === "L") rules += ' Ug15';
+    else if (props.size === "M") rules += ' Ug15';
+    else if (props.size === "S") rules += ' Ue15';
+    if (props.size === "XL") rules += ' qg15';
+    else if (props.size === "L") rules += ' qg15';
+    else if (props.size === "M") rules += ' qg15';
+    else if (props.size === "S") rules += ' qe15';
+    if (props.orientation === "vertical") rules += ' _ta15';
+    else rules += ' _tc15';
     if (props.orientation === "vertical") {
-        if (props.align === "center") rules += ' eb131';
-        else if (props.align === "end") rules += ' ec131';
-        else rules += ' ed131';
-    } else rules += ' eb131';
+        if (props.align === "center") rules += ' eb15';
+        else if (props.align === "end") rules += ' ec15';
+        else rules += ' ed15';
+    } else rules += ' eb15';
     if (props.orientation === "vertical") {
-        if (props.align === "center") rules += ' _Ca131';
-        else if (props.align === "end") rules += ' _Cb131';
-        else rules += ' _Cg131';
+        if (props.align === "center") rules += ' _Ca15';
+        else if (props.align === "end") rules += ' _Cb15';
+        else rules += ' _Cg15';
     }
     return rules;
 };
@@ -113,7 +116,7 @@ const $472eaa9a9b344b9a$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $bnJX2$forwa
     });
     if (props.isHidden) return null;
     let context = {
-        styles: " _va131",
+        styles: " _va15",
         size: size,
         isDisabled: isDisabled
     };

package/dist/private/ButtonGroup.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAE5C,CAAC;AAEH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC7C,KAAuB,EACvB,GAA2B;IAE3B,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,EACV,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,kBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IACE,oBAAoB,IAAI,CACtB,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OAG1E,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEF,uDAAuD;IACzD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,sBAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,aAAK,EAAsB;IACxC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAE/C,uDAAuD;IACzD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,wBAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC9B,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WACE,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAC5B,kCACE;mBACE;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GACA,MAAM,MAAM;kBAGhB,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,yCAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {useValueEffect} from 'react-aria/private/utils/useValueEffect';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center';\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode;\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean;\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean;\n}\n\nexport const ButtonGroupContext = createContext<\n  ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>\n>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>(\n  {\n    display: 'inline-flex',\n    position: 'relative',\n    gap: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 12,\n        XL: 12\n      }\n    },\n    flexDirection: {\n      default: 'row',\n      orientation: {\n        vertical: 'column'\n      }\n    },\n    alignItems: {\n      default: 'center',\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    },\n    justifyContent: {\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(\n  props: ButtonGroupProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled,\n    ...otherProps\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (\n          buttonGroupChildren.some(\n            child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX\n          )\n        ) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        buttongroup(\n          {\n            align,\n            orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n            size\n          },\n          props.styles\n        )\n      }>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.mjs.map"}
+{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAE5C,CAAC;AAEH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAC7C,KAAuB,EACvB,GAA2B;IAE3B,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,yCAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,EACV,GAAG,YACJ,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,kBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IACE,oBAAoB,IAAI,CACtB,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OAG1E,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEF,uDAAuD;IACzD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,sBAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,aAAK,EAAsB;IACxC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAE/C,uDAAuD;IACzD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,wBAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gBAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC9B,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WACE,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAC5B,kCACE;mBACE;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GACA,MAAM,MAAM;kBAGhB,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,yCAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components/slots';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nimport {useValueEffect} from 'react-aria/private/utils/useValueEffect';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center';\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode;\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean;\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean;\n}\n\nexport const ButtonGroupContext = createContext<\n  ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>\n>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>(\n  {\n    display: 'inline-flex',\n    position: 'relative',\n    maxWidth: 'full',\n    gap: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 12,\n        XL: 12\n      }\n    },\n    flexDirection: {\n      default: 'row',\n      orientation: {\n        vertical: 'column'\n      }\n    },\n    alignItems: {\n      default: 'center',\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    },\n    justifyContent: {\n      orientation: {\n        vertical: {\n          default: 'start',\n          align: {\n            end: 'end',\n            center: 'center'\n          }\n        }\n      }\n    }\n  },\n  getAllowedOverrides()\n);\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(\n  props: ButtonGroupProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled,\n    ...otherProps\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (\n          buttonGroupChildren.some(\n            child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX\n          )\n        ) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      {...filterDOMProps(otherProps)}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={\n        (props.UNSAFE_className || '') +\n        buttongroup(\n          {\n            align,\n            orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n            size\n          },\n          props.styles\n        )\n      }>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.mjs.map"}