@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/Button.css.map

@@ -1 +1 @@
-{"mappings":"ACwGe;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsME;;;;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;;;;;EAmLU;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0EA;;;;EAAA;;;;EAAA;;;;EAQsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA3dX;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAsME;;;;;;AAtMF;EAAA;IAAA;;;;;;AA2PS;;;;;;AAAA;;;;;;AAAA","sources":["47c518d02ef77298","packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["@import \"84fda4530d887d61\";\n@import \"58029840d81c849c\";\n@import \"741c49b4968f5e00\";\n@import \"d2d5d6a0faea83be\";\n@import \"7420f4e12e7ef59c\";\n@import \"b849e4ca63c3cc49\";\n@import \"36ff0e1e9ec0e357\";\n@import \"5ed629d4d0b8048c\";\n@import \"341672feb3593eb4\";\n@import \"e68e1721c6627faa\";\n@import \"42efd4ec8049a799\";\n@import \"95ab9abea37ea72d\";\n@import \"8b2fc5f468b9d46d\";\n@import \"52b2e217b498e7a2\";\n@import \"9ea4c114cf8bdeec\";\n@import \"ab8478361150f3f7\";\n@import \"981e6619126f3569\";\n@import \"bcbcf345b1725911\";\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 {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.css.map"}
+{"mappings":"ACuGe;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgNE;;;;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;;;;;EAmLU;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0EA;;;;EAAA;;;;EAAA;;;;EAQsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAreX;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAgNE;;;;;;AAhNF;EAAA;IAAA;;;;;;AAqQS;;;;;;AAAA;;;;;;AAAA","sources":["47c518d02ef77298","packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["@import \"84fda4530d887d61\";\n@import \"58029840d81c849c\";\n@import \"741c49b4968f5e00\";\n@import \"d2d5d6a0faea83be\";\n@import \"7420f4e12e7ef59c\";\n@import \"b849e4ca63c3cc49\";\n@import \"36ff0e1e9ec0e357\";\n@import \"5ed629d4d0b8048c\";\n@import \"341672feb3593eb4\";\n@import \"e68e1721c6627faa\";\n@import \"42efd4ec8049a799\";\n@import \"95ab9abea37ea72d\";\n@import \"8b2fc5f468b9d46d\";\n@import \"52b2e217b498e7a2\";\n@import \"9ea4c114cf8bdeec\";\n@import \"ab8478361150f3f7\";\n@import \"981e6619126f3569\";\n@import \"bcbcf345b1725911\";\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 {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: {\n                default: 'transparent-overlay-1000',\n                isHovered: 'transparent-overlay-1000',\n                isFocusVisible: 'transparent-overlay-1000',\n                isPressed: 'transparent-overlay-1000'\n              },\n              premium: 'white',\n              genai: 'white'\n            }\n          },\n          outline: {\n            variant: {\n              premium: 'white',\n              genai: 'white'\n            },\n            default: {\n              default: 'transparent-overlay-1000',\n              isHovered: 'transparent-overlay-1000',\n              isFocusVisible: 'transparent-overlay-1000',\n              isPressed: 'transparent-overlay-1000'\n            }\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.css.map"}