@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/Button.css.map

@@ -1 +1 @@
-{"mappings":"ACsEe;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmME;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAkIQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmEF;;;;EAAA;;;;EAAA;;;;EAKsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7ZP;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;;;;IAmME;;;;;;AAnMF;EAAA;IAAA;;;;;;AAqNS;;;;;;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 {ButtonRenderProps, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {control, getAllowedOverrides, staticColor, StyleProps} 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 extends Omit<RACButtonProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'render' | 'children' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\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: baseColor('transparent-overlay-800'),\n            premium: 'white',\n            genai: 'white'\n          }\n        },\n        outline: {\n          variant: {\n            premium: 'white',\n            genai: 'white'\n          },\n          default: baseColor('transparent-overlay-800')\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}, getAllowedOverrides());\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('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n        isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n        isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n        isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n      },\n      genai: {\n        default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n        isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n        isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n        isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\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(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isPending = false,\n    variant = 'primary',\n    fillStyle = 'fill',\n    size = 'M',\n    staticColor\n  } = 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 => (props.UNSAFE_className || '') + button({\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      }, props.styles)}>\n      {(renderProps) => (<>\n        {variant === 'genai' || variant === 'premium'\n          ? (\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            [TextContext, {\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            [IconContext, {\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          {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            </div>\n          }\n        </Provider>\n      </>)}\n    </RACButton>\n  );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n  props = useFormProps(props);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n  let {\n    fillStyle = 'fill',\n    size = 'M',\n    variant = 'primary',\n    staticColor,\n    styles,\n    children\n  } = props;\n\n  return (\n    <Link\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\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      }, styles)}>\n      {(renderProps) => (<>\n        {variant === 'genai' || variant === 'premium'\n          ? (\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            [TextContext, {\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            [IconContext, {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n            }]\n          ]}>\n          {typeof children === 'string' ? <Text>{children}</Text> : children}\n        </Provider>\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;;;;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'};\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"}