@react-spectrum/button 3.0.0-nightly-641446f65-240905

package/dist/vars.4fe44343.css.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@adobe/spectrum-css-temp/components/button/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.4fe44343.css.map"}

package/dist/zh-CN.main.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "pending": `\u{5F85}\u{5904}\u{7406}`
+};
+
+
+//# sourceMappingURL=zh-CN.main.js.map

package/dist/zh-CN.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-CN.json"],"sourcesContent":["{\n  \"pending\": \"待处理\"\n}\n"],"names":[],"version":3,"file":"zh-CN.main.js.map"}

package/dist/zh-CN.mjs

@@ -0,0 +1,8 @@
+var $6e4b63af77288b7a$exports = {};
+$6e4b63af77288b7a$exports = {
+    "pending": `\u{5F85}\u{5904}\u{7406}`
+};
+
+
+export {$6e4b63af77288b7a$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js

@@ -0,0 +1,8 @@
+var $6e4b63af77288b7a$exports = {};
+$6e4b63af77288b7a$exports = {
+    "pending": `\u{5F85}\u{5904}\u{7406}`
+};
+
+
+export {$6e4b63af77288b7a$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-CN.json"],"sourcesContent":["{\n  \"pending\": \"待处理\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}

package/dist/zh-TW.main.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "pending": `\u{5F85}\u{8655}\u{7406}`
+};
+
+
+//# sourceMappingURL=zh-TW.main.js.map

package/dist/zh-TW.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-TW.json"],"sourcesContent":["{\n  \"pending\": \"待處理\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}

package/dist/zh-TW.mjs

@@ -0,0 +1,8 @@
+var $be993a68bccef72a$exports = {};
+$be993a68bccef72a$exports = {
+    "pending": `\u{5F85}\u{8655}\u{7406}`
+};
+
+
+export {$be993a68bccef72a$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -0,0 +1,8 @@
+var $be993a68bccef72a$exports = {};
+$be993a68bccef72a$exports = {
+    "pending": `\u{5F85}\u{8655}\u{7406}`
+};
+
+
+export {$be993a68bccef72a$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,wBAAG,CAAC;AACpC","sources":["packages/@react-spectrum/button/intl/zh-TW.json"],"sourcesContent":["{\n  \"pending\": \"待處理\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@react-spectrum/button",
+  "version": "3.0.0-nightly-641446f65-240905",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "targets": {
+    "main": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    },
+    "module": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-aria/button": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/focus": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/i18n": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/interactions": "^3.0.0-nightly-641446f65-240905",
+    "@react-aria/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-spectrum/progress": "^3.0.0-nightly-641446f65-240905",
+    "@react-spectrum/text": "^3.0.0-nightly-641446f65-240905",
+    "@react-spectrum/utils": "^3.0.0-nightly-641446f65-240905",
+    "@react-stately/toggle": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/button": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@spectrum-icons/ui": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
+  },
+  "devDependencies": {
+    "@adobe/spectrum-css-temp": "3.0.0-alpha.1",
+    "@react-spectrum/test-utils-internal": "3.0.0-alpha.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "peerDependencies": {
+    "@react-spectrum/provider": "^3.0.0-nightly-641446f65-240905",
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "3.16.6"
+}

package/src/ActionButton.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {classNames, ClearSlots, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import CornerTriangle from '@spectrum-icons/ui/CornerTriangle';
+import {FocusableRef} from '@react-types/shared';
+import {FocusRing} from '@react-aria/focus';
+import {mergeProps} from '@react-aria/utils';
+import React from 'react';
+import {SpectrumActionButtonProps} from '@react-types/button';
+import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
+import {Text} from '@react-spectrum/text';
+import {useButton} from '@react-aria/button';
+import {useHover} from '@react-aria/interactions';
+import {useProviderProps} from '@react-spectrum/provider';
+
+function ActionButton(props: SpectrumActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+  props = useProviderProps(props);
+  props = useSlotProps(props, 'actionButton');
+  let textProps = useSlotProps({UNSAFE_className: classNames(styles, 'spectrum-ActionButton-label')}, 'text');
+
+  let {
+    isQuiet,
+    isDisabled,
+    staticColor,
+    children,
+    autoFocus,
+    // @ts-ignore (private)
+    holdAffordance,
+    // @ts-ignore (private)
+    hideButtonText,
+    ...otherProps
+  } = props;
+
+  let domRef = useFocusableRef(ref);
+  let {buttonProps, isPressed} = useButton(props, domRef);
+  let {hoverProps, isHovered} = useHover({isDisabled});
+  let {styleProps} = useStyleProps(otherProps);
+  let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));
+
+  return (
+    <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>
+      <button
+        {...styleProps}
+        {...mergeProps(buttonProps, hoverProps)}
+        ref={domRef}
+        className={
+          classNames(
+            styles,
+            'spectrum-ActionButton',
+            {
+              'spectrum-ActionButton--quiet': isQuiet,
+              'spectrum-ActionButton--staticColor': !!staticColor,
+              'spectrum-ActionButton--staticWhite': staticColor === 'white',
+              'spectrum-ActionButton--staticBlack': staticColor === 'black',
+              'is-active': isPressed,
+              'is-disabled': isDisabled,
+              'is-hovered': isHovered
+            },
+            styleProps.className
+          )
+        }>
+        {holdAffordance &&
+          <CornerTriangle UNSAFE_className={classNames(styles, 'spectrum-ActionButton-hold')} />
+        }
+        <ClearSlots>
+          <SlotProvider
+            slots={{
+              icon: {
+                size: 'S',
+                UNSAFE_className: classNames(
+                  styles,
+                  'spectrum-Icon',
+                  {
+                    'spectrum-ActionGroup-itemIcon': hideButtonText
+                  }
+                )
+              },
+              text: {
+                ...textProps
+              }
+            }}>
+            {typeof children === 'string' || isTextOnly
+              ? <Text>{children}</Text>
+              : children}
+          </SlotProvider>
+        </ClearSlots>
+      </button>
+    </FocusRing>
+  );
+}
+
+/**
+ * ActionButtons allow users to perform an action.
+ * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
+ */
+let _ActionButton = React.forwardRef(ActionButton);
+export {_ActionButton as ActionButton};

package/src/Button.tsx

@@ -0,0 +1,210 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {
+  classNames,
+  SlotProvider,
+  useFocusableRef,
+  useHasChild,
+  useSlotProps,
+  useStyleProps
+} from '@react-spectrum/utils';
+import {FocusableRef} from '@react-types/shared';
+import {FocusRing} from '@react-aria/focus';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {isAppleDevice, isFirefox, mergeProps, useId} from '@react-aria/utils';
+import {ProgressCircle} from '@react-spectrum/progress';
+import React, {ElementType, ReactElement, useEffect, useState} from 'react';
+import {SpectrumButtonProps} from '@react-types/button';
+import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
+import {Text} from '@react-spectrum/text';
+import {useButton} from '@react-aria/button';
+import {useFocus, useHover} from '@react-aria/interactions';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useProviderProps} from '@react-spectrum/provider';
+
+function disablePendingProps(props) {
+  // Don't allow interaction while isPending is true
+  if (props.isPending) {
+    props.onPress = undefined;
+    props.onPressStart = undefined;
+    props.onPressEnd = undefined;
+    props.onPressChange = undefined;
+    props.onPressUp = undefined;
+    props.onKeyDown = undefined;
+    props.onKeyUp = undefined;
+    props.onClick = undefined;
+    props.href = undefined;
+  }
+  return props;
+}
+
+function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>, ref: FocusableRef<HTMLElement>) {
+  props = useProviderProps(props);
+  props = useSlotProps(props, 'button');
+  props = disablePendingProps(props);
+  let {
+    elementType: Element = 'button',
+    children,
+    variant,
+    style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',
+    staticColor,
+    isDisabled,
+    isPending,
+    autoFocus,
+    ...otherProps
+  } = props;
+  let domRef = useFocusableRef(ref);
+  let {buttonProps, isPressed} = useButton(props, domRef);
+  let {hoverProps, isHovered} = useHover({isDisabled});
+  let [isFocused, onFocusChange] = useState(false);
+  let {focusProps} = useFocus({onFocusChange, isDisabled});
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');
+  let {styleProps} = useStyleProps(otherProps);
+  let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);
+  let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);
+  // an aria label will block children and their labels from being read, this is undesirable for pending state
+  let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];
+  let [isProgressVisible, setIsProgressVisible] = useState(false);
+  let backupButtonId = useId();
+  let buttonId = buttonProps.id || backupButtonId;
+  let iconId = useId();
+  let textId = useId();
+  let spinnerId = useId();
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+
+    if (isPending) {
+      // Start timer when isPending is set to true.
+      timeout = setTimeout(() => {
+        setIsProgressVisible(true);
+      }, 1000);
+    } else {
+      // Exit loading state when isPending is set to false. */
+      setIsProgressVisible(false);
+    }
+    return () => {
+      // Clean up on unmount or when user removes isPending prop before entering loading state.
+      clearTimeout(timeout);
+    };
+  }, [isPending]);
+
+  if (variant === 'cta') {
+    variant = 'accent';
+  } else if (variant === 'overBackground') {
+    variant = 'primary';
+    staticColor = 'white';
+  }
+
+  const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();
+  const isPendingAriaLiveLabelledby = hasAriaLabel ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId) : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();
+
+  let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';
+  if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {
+    ariaLive = 'off';
+  }
+
+  let isPendingProps = isPending ? {
+    onClick: (e) => {
+      if (e.currentTarget instanceof HTMLButtonElement) {
+        e.preventDefault();
+      }
+    }
+  } : {
+    // no-op. 
+    // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.
+    onClick: () => {}
+  };
+
+  return (
+    <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>
+      <Element
+        {...styleProps}
+        {...mergeProps(buttonProps, hoverProps, focusProps, isPendingProps)}
+        id={buttonId}
+        ref={domRef}
+        data-variant={variant}
+        data-style={style}
+        data-static-color={staticColor || undefined}
+        aria-disabled={isPending ? 'true' : undefined}
+        aria-label={isPending ? isPendingAriaLiveLabel : buttonProps['aria-label']}
+        aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}
+        className={
+          classNames(
+            styles,
+            'spectrum-Button',
+            {
+              'spectrum-Button--iconOnly': hasIcon && !hasLabel,
+              'is-disabled': isDisabled || isProgressVisible,
+              'is-active': isPressed,
+              'is-hovered': isHovered,
+              'spectrum-Button--pending': isProgressVisible
+            },
+            styleProps.className
+          )
+        }>
+        <SlotProvider
+          slots={{
+            icon: {
+              id: iconId,
+              size: 'S',
+              UNSAFE_className: classNames(styles, 'spectrum-Icon')
+            },
+            text: {
+              id: textId,
+              UNSAFE_className: classNames(styles, 'spectrum-Button-label')
+            }
+          }}>
+          {typeof children === 'string'
+            ? <Text>{children}</Text>
+            : children}
+          {isPending && (
+            <div
+              aria-hidden="true"
+              style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}
+              className={classNames(styles, 'spectrum-Button-circleLoader')}>
+              <ProgressCircle
+                aria-label={isPendingAriaLiveLabel}
+                isIndeterminate
+                size="S"
+                staticColor={staticColor} />
+            </div>
+          )}
+          {isPending &&
+            <>
+              <div aria-live={isFocused ? ariaLive : 'off'}>
+                {isProgressVisible &&
+                  <div role="img" aria-labelledby={isPendingAriaLiveLabelledby} />
+                }
+              </div>
+              {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.
+              Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button
+              https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari
+              The aria-live may cause extra announcements in other browsers. */}
+              <div id={spinnerId} role="img" aria-label={isPendingAriaLiveLabel} />
+            </>
+          }
+        </SlotProvider>
+      </Element>
+    </FocusRing>
+  );
+}
+
+/**
+ * Buttons allow users to perform an action or to navigate to another page.
+ * They have multiple styles for various needs, and are ideal for calling attention to
+ * where a user needs to do something in order to move forward in a flow.
+ */
+let _Button = React.forwardRef(Button) as <T extends ElementType = 'button'>(props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
+export {_Button as Button};

package/src/ClearButton.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaButtonElementTypeProps, ButtonProps} from '@react-types/button';
+import {classNames, useFocusableRef, useStyleProps} from '@react-spectrum/utils';
+import CrossSmall from '@spectrum-icons/ui/CrossSmall';
+import {DOMProps, FocusableRef, StyleProps} from '@react-types/shared';
+import {FocusRing} from '@react-aria/focus';
+import {mergeProps} from '@react-aria/utils';
+import React, {ElementType} from 'react';
+import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
+import {useButton} from '@react-aria/button';
+import {useHover} from '@react-aria/interactions';
+
+interface ClearButtonProps<T extends ElementType = 'button'> extends ButtonProps, AriaButtonElementTypeProps<T>, DOMProps, StyleProps {
+  focusClassName?: string,
+  variant?: 'overBackground',
+  excludeFromTabOrder?: boolean,
+  preventFocus?: boolean
+}
+
+function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+  let {
+    children = <CrossSmall UNSAFE_className={styles['spectrum-Icon']} />,
+    focusClassName,
+    variant,
+    autoFocus,
+    isDisabled,
+    preventFocus,
+    elementType = preventFocus ? 'div' : 'button' as ElementType,
+    ...otherProps
+  } = props;
+  let domRef = useFocusableRef(ref);
+  let {buttonProps, isPressed} = useButton({...props, elementType}, domRef);
+  let {hoverProps, isHovered} = useHover({isDisabled});
+  let {styleProps} = useStyleProps(otherProps);
+
+  // For cases like the clear button in a search field, remove the tabIndex so
+  // iOS 14 with VoiceOver doesn't focus the button and hide the keyboard when
+  // moving the cursor over the clear button.
+  if (preventFocus) {
+    delete buttonProps.tabIndex;
+  }
+
+  let ElementType = elementType;
+  return (
+    <FocusRing focusRingClass={classNames(styles, 'focus-ring', focusClassName)} autoFocus={autoFocus}>
+      <ElementType
+        {...styleProps}
+        {...mergeProps(buttonProps, hoverProps)}
+        ref={domRef}
+        className={
+          classNames(
+            styles,
+            'spectrum-ClearButton',
+            {
+              [`spectrum-ClearButton--${variant}`]: variant,
+              'is-disabled': isDisabled,
+              'is-active': isPressed,
+              'is-hovered': isHovered
+            },
+            styleProps.className
+          )
+        }>
+        {children}
+      </ElementType>
+    </FocusRing>
+  );
+}
+
+let _ClearButton = React.forwardRef(ClearButton);
+export {_ClearButton as ClearButton};

package/src/FieldButton.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ButtonProps} from '@react-types/button';
+import {classNames, SlotProvider, useFocusableRef, useSlotProps, useStyleProps} from '@react-spectrum/utils';
+import {DOMProps, FocusableRef, RefObject, StyleProps} from '@react-types/shared';
+import {FocusRing} from '@react-aria/focus';
+import {mergeProps} from '@react-aria/utils';
+import React from 'react';
+import styles from '@adobe/spectrum-css-temp/components/button/vars.css';
+import {useButton} from '@react-aria/button';
+import {useHover} from '@react-aria/interactions';
+
+interface FieldButtonProps extends ButtonProps, DOMProps, StyleProps {
+  isQuiet?: boolean,
+  isActive?: boolean,
+  validationState?: 'valid' | 'invalid',
+  isInvalid?: boolean,
+  focusRingClass?: string
+}
+
+// @private
+function FieldButton(props: FieldButtonProps, ref: FocusableRef) {
+  props = useSlotProps(props, 'button');
+  let {
+    isQuiet,
+    isDisabled,
+    validationState,
+    isInvalid,
+    children,
+    autoFocus,
+    isActive,
+    focusRingClass,
+    ...otherProps
+  } = props;
+  let domRef = useFocusableRef(ref) as RefObject<HTMLButtonElement | null>;
+  let {buttonProps, isPressed} = useButton(props, domRef);
+  let {hoverProps, isHovered} = useHover({isDisabled});
+  let {styleProps} = useStyleProps(otherProps);
+
+  return (
+    <FocusRing focusRingClass={classNames(styles, 'focus-ring', focusRingClass)} autoFocus={autoFocus}>
+      <button
+        {...mergeProps(buttonProps, hoverProps)}
+        ref={domRef}
+        className={
+          classNames(
+            styles,
+            'spectrum-FieldButton',
+            {
+              'spectrum-FieldButton--quiet': isQuiet,
+              'is-active': isActive || isPressed,
+              'is-disabled': isDisabled,
+              'spectrum-FieldButton--invalid': isInvalid || validationState === 'invalid',
+              'is-hovered': isHovered
+            },
+            styleProps.className
+          )
+        }>
+        <SlotProvider
+          slots={{
+            icon: {
+              size: 'S',
+              UNSAFE_className: classNames(styles, 'spectrum-Icon')
+            }
+          }}>
+          {children}
+        </SlotProvider>
+      </button>
+    </FocusRing>
+  );
+}
+
+let _FieldButton = React.forwardRef(FieldButton);
+export {_FieldButton as FieldButton};