@react-spectrum/s2 0.2.1-nightly.4981 → 0.3.0

package/dist/NumberField.css

@@ -115,30 +115,10 @@
     width: 2rem;
   }
 
-  .lp {
-    width: 2.5rem;
-  }
-
   .k1 {
     height: auto;
   }
 
-  .kd {
-    height: .5rem;
-  }
-
-  .kf {
-    height: .75rem;
-  }
-
-  .kh {
-    height: 1rem;
-  }
-
-  .ki {
-    height: 1.25rem;
-  }
-
   .yE {
     margin-inline-start: .714286em;
   }
@@ -151,14 +131,6 @@
     aspect-ratio: 1;
   }
 
-  ._ba {
-    aspect-ratio: auto;
-  }
-
-  ._8-3t1y {
-    flex-shrink: 1;
-  }
-
   .oa {
     min-height: 0;
   }
@@ -195,6 +167,10 @@
     color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
+  .__Hb {
+    cursor: default;
+  }
+
   ._8-3t1x {
     flex-shrink: 0;
   }
@@ -223,10 +199,6 @@
     flex-direction: row;
   }
 
-  ._6d {
-    flex-direction: column-reverse;
-  }
-
   .ib {
     row-gap: .25rem;
   }
@@ -235,10 +207,6 @@
     row-gap: .5rem;
   }
 
-  .i-375zlr {
-    row-gap: 2px;
-  }
-
   .jb {
     column-gap: .25rem;
   }
@@ -247,36 +215,16 @@
     column-gap: .5rem;
   }
 
-  .j-375zlr {
-    column-gap: 2px;
-  }
-
-  .ph {
-    max-height: 1rem;
-  }
-
-  .pk {
-    max-height: 1.5rem;
+  .D-59f7mn {
+    padding-inline-end: .125rem;
   }
 
-  .po {
-    max-height: 2rem;
+  .Db {
+    padding-inline-end: .25rem;
   }
 
-  .pp {
-    max-height: 2.5rem;
-  }
-
-  .D-3761a9 {
-    padding-inline-end: 4px;
-  }
-
-  .D-3762yr {
-    padding-inline-end: 6px;
-  }
-
-  .D-375zlr {
-    padding-inline-end: 2px;
+  .D-6njx2e {
+    padding-inline-end: .375rem;
   }
 
   ._Zf {
@@ -450,10 +398,6 @@
     padding-inline-end: var(--D);
   }
 
-  .__Hb {
-    cursor: default;
-  }
-
   .-_375tnm_C-H {
     --C: calc(var(--k, var(--o)) * 3 / 8);
   }
@@ -461,6 +405,10 @@
   .-_375tnn_D-a {
     --D: 0rem;
   }
+
+  .-_375tnn_D-H {
+    --D: calc(var(--k, var(--o)) * 3 / 8);
+  }
 }
 
 @layer _.b {
@@ -489,44 +437,16 @@
       width: 2.5rem;
     }
 
-    .lbs {
-      width: 3.125rem;
-    }
-
-    .kbe {
-      height: .625rem;
-    }
-
-    .kbg {
-      height: .9375rem;
-    }
-
-    .kbi {
-      height: 1.25rem;
-    }
-
-    .kbj {
-      height: 1.5625rem;
-    }
-
     .oba {
       min-height: 0;
     }
 
-    .pbi {
-      max-height: 1.25rem;
-    }
-
-    .pbl {
-      max-height: 1.875rem;
-    }
-
-    .pbp {
-      max-height: 2.5rem;
+    .Db-13yuhxm {
+      padding-inline-end: .15625rem;
     }
 
-    .pbs {
-      max-height: 3.125rem;
+    .Db-1aa9md1 {
+      padding-inline-end: .46875rem;
     }
 
     ._dbf {

package/dist/NumberField.css.map

@@ -1 +1 @@
-{"mappings":"ACwDoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuGD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwFK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AArON;EA8MgB;;;;;AA9MhB;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAsHW;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAwFK;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAuBV;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AArON;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAuGD;;;;AA8HO;EAAA;IAAA","sources":["b68c88297d49b771","packages/@react-spectrum/s2/src/NumberField.tsx"],"sourcesContent":["@import \"86e54c0ad46f69c2\";\n@import \"81d36b1860c8fc73\";\n@import \"22edbea9646800a7\";\n@import \"c17a88ce1f4f53da\";\n@import \"e6f6c2ace019f265\";\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 Add from '../ui-icons/Add';\nimport {\n  ButtonProps as AriaButtonProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  ButtonContext,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createFocusableRef, useFocusableRef} from '@react-spectrum/utils';\nimport {CSSProperties, ForwardedRef, forwardRef, ReactNode, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FocusableRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext} from './Form';\nimport {pressScale} from './pressScale';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\n\n\nexport interface NumberFieldProps extends\n  AriaNumberFieldProps,\n  StyleProps,\n  Omit<SpectrumLabelableProps, 'contextualHelp'>,\n  HelpTextProps {\n  /**\n   * Whether the NumberField step buttons should be collapsed into a single column.\n   *\n   * @default \"false\"\n   */\n    isCollapsed?: boolean,\n  /**\n   * The size of the NumberField.\n   *\n   * @default \"M\"\n   */\n    size?: 'S' | 'M' | 'L' | 'XL',\n    label?: ReactNode\n}\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderTopRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      decrementStep: 'none'\n    }\n  },\n  borderBottomRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      incrementStep: 'none'\n    }\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: {\n        default: 16,\n        isCollapsed: 24\n      },\n      M: {\n        default: 20,\n        isCollapsed: 24\n      },\n      L: {\n        default: 24,\n        isCollapsed: 32\n      },\n      XL: {\n        default: 32,\n        isCollapsed: 40\n      }\n    }\n  },\n  height: {\n    default: 'auto',\n    isCollapsed: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 16,\n        XL: 20\n      }\n    }\n  },\n  marginStart: {\n    default: 'text-to-control',\n    type: {\n      increment: 0\n    }\n  },\n  aspectRatio: {\n    default: 'square',\n    isCollapsed: 'auto'\n  },\n  flexShrink: {\n    default: 0,\n    isCollapsed: 1\n  },\n  minHeight: {\n    isCollapsed: 0\n  },\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: {\n    default: 0,\n    type: {\n      incrementStep: 270,\n      decrementStep: 90\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst stepperContainerStyles = style({\n  display: 'flex',\n  flexDirection: {\n    default: 'row',\n    isCollapsed: 'column-reverse'\n  },\n  gap: {\n    default: {\n      size: {\n        S: 8,\n        M: 4,\n        L: 8,\n        XL: 8\n      }\n    },\n    isCollapsed: '[2px]'\n  },\n  maxHeight: {\n    isCollapsed: {\n      size: {\n        S: 16,\n        M: 24,\n        L: 32,\n        XL: 40 // 40\n      }\n    }\n  },\n  paddingEnd: {\n    default: {\n      size: {\n        S: '[2px]',\n        M: '[4px]',\n        L: '[6px]',\n        XL: '[6px]'\n      }\n    },\n    isCollapsed: '[2px]'\n  }\n});\n\ntype Size = 'XS' | 'S' | 'M' | 'L' | 'XL';\nconst chevronSize: Record<'S' | 'M' | 'L' | 'XL', Size> = {\n  S: 'XS',\n  M: 'S',\n  L: 'L',\n  XL: 'XL'\n};\n\nfunction NumberField(props: NumberFieldProps, ref: FocusableRef<HTMLDivElement>) {\n  let {\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    isCollapsed,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...numberFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let domRef = useFocusableRef(ref);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n  let incrementButtonRef = useRef<HTMLDivElement | null>(null);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n\n  return (\n    <AriaNumberField\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {\n          ({isDisabled, isInvalid}) => {\n            return  (\n              <>\n                <FieldLabel\n                  isDisabled={isDisabled}\n                  isRequired={isRequired}\n                  size={size}\n                  labelPosition={labelPosition}\n                  labelAlign={labelAlign}\n                  necessityIndicator={necessityIndicator}>\n                  {label}\n                </FieldLabel>\n                <FieldGroup\n                  role=\"presentation\"\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  size={size}\n                  styles={style({\n                    ...fieldInput(),\n                    paddingStart: 'edge-to-text',\n                    paddingEnd: 0,\n                    cursor: 'default'\n                  })({size})}>\n                  <InputContext.Consumer>\n                    {ctx => (\n                      <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                        <Input />\n                      </InputContext.Provider>\n                    )}\n                  </InputContext.Consumer>\n                  {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n                  <div className={stepperContainerStyles({isCollapsed, size})}>\n                    <StepButton\n                      ref={decrementButtonRef}\n                      slot=\"decrement\"\n                      style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: isCollapsed ? 'decrementStep' : 'decrement',\n                        isCollapsed,\n                        size\n                      })}>\n                      {\n                        isCollapsed\n                          ? <ChevronIcon size={chevronSize[size]} className={iconStyles({type: 'decrementStep'})} />\n                          : <Dash size={size} className={iconStyles({})} />\n                      }\n                    </StepButton>\n                    <StepButton\n                      ref={incrementButtonRef}\n                      slot=\"increment\"\n                      style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: isCollapsed ? 'incrementStep' : 'increment',\n                        isCollapsed,\n                        size\n                      })}>\n                      {\n                        isCollapsed\n                          ? <ChevronIcon size={chevronSize[size]} className={iconStyles({type: 'incrementStep'})} />\n                          : <Add size={size} className={iconStyles({})} />\n                      }\n                    </StepButton>\n                  </div>\n                </FieldGroup>\n                {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n                <HelpText\n                  size={size}\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  description={descriptionMessage}>\n                  {errorMessage}\n                </HelpText>\n              </>\n            );\n          }\n        }\n    </AriaNumberField>\n  );\n}\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  [props, ref] = useContextProps(props, ref, ButtonContext as any);\n  let ctx = props as any;\n  /**\n   * Must use div for now because Safari pointer event bugs on disabled form elements.\n   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n   */\n  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n  let {hoverProps, isHovered} = useHover(props);\n  let renderProps = useRenderProps({\n    ...props,\n    values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n    defaultClassName: 'react-aria-Button'\n  });\n  return (\n    <div\n      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n      {...mergeProps(buttonProps, focusProps, hoverProps)}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}\n      data-pressed={ctx.isPressed || isPressed || undefined}\n      data-hovered={isHovered || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined} />\n  );\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nlet _NumberField = forwardRef(NumberField);\nexport {_NumberField as NumberField};\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: CSSProperties | undefined;\n    let computedChildren: ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': ''\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.css.map"}
+{"mappings":"AC0DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0ED;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+DK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAhLN;EAwJgB;;;;;AAxJhB;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAyFW;;;;IAAA;;;;IA+DK;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAwBV;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAhLN;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA0ED;;;;AAsGO;EAAA;IAAA","sources":["b68c88297d49b771","packages/@react-spectrum/s2/src/NumberField.tsx"],"sourcesContent":["@import \"86e54c0ad46f69c2\";\n@import \"81d36b1860c8fc73\";\n@import \"22edbea9646800a7\";\n@import \"c17a88ce1f4f53da\";\n@import \"e6f6c2ace019f265\";\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 Add from '../ui-icons/Add';\nimport {\n  ButtonProps as AriaButtonProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  ButtonContext,\n  ContextValue,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n  Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n  /**\n   * Whether to hide the increment and decrement buttons.\n   * @default false\n   */\n  hideStepper?: boolean,\n  /**\n   * The size of the NumberField.\n   *\n   * @default \"M\"\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderTopRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      decrementStep: 'none'\n    }\n  },\n  borderBottomRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      incrementStep: 'none'\n    }\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: {\n    default: 'text-to-control',\n    type: {\n      increment: 0\n    }\n  },\n  aspectRatio: 'square',\n  flexShrink: 0,\n  minHeight: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  },\n  cursor: 'default'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: {\n    default: 0,\n    type: {\n      incrementStep: 270,\n      decrementStep: 90\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst stepperContainerStyles = style({\n  display: 'flex',\n  flexDirection: 'row',\n  gap: {\n    size: {\n      S: 8,\n      M: 4,\n      L: 8,\n      XL: 8\n    }\n  },\n  paddingEnd: {\n    size: {\n      S: size(2),\n      M: 4,\n      L: size(6),\n      XL: size(6)\n    }\n  }\n});\n\nfunction NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    hideStepper,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...numberFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let domRef = useRef<HTMLDivElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n  let incrementButtonRef = useRef<HTMLDivElement | null>(null);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n\n  return (\n    <AriaNumberField\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {\n          ({isDisabled, isInvalid}) => {\n            return  (\n              <>\n                <FieldLabel\n                  isDisabled={isDisabled}\n                  isRequired={isRequired}\n                  size={size}\n                  labelPosition={labelPosition}\n                  labelAlign={labelAlign}\n                  necessityIndicator={necessityIndicator}\n                  contextualHelp={contextualHelp}>\n                  {label}\n                </FieldLabel>\n                <FieldGroup\n                  role=\"presentation\"\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  size={size}\n                  styles={style({\n                    ...fieldInput(),\n                    paddingStart: 'edge-to-text',\n                    paddingEnd: {\n                      default: 0,\n                      isStepperHidden: 'edge-to-text'\n                    }\n                  })({size, isStepperHidden: hideStepper})}>\n                  <InputContext.Consumer>\n                    {ctx => (\n                      <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                        <Input />\n                      </InputContext.Provider>\n                    )}\n                  </InputContext.Consumer>\n                  {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n                  {!hideStepper && <div className={stepperContainerStyles({size})}>\n                    <StepButton\n                      ref={decrementButtonRef}\n                      slot=\"decrement\"\n                      style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'decrement',\n                        size\n                      })}>\n                      <Dash size={size} className={iconStyles({})} />\n                    </StepButton>\n                    <StepButton\n                      ref={incrementButtonRef}\n                      slot=\"increment\"\n                      style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'increment',\n                        size\n                      })}>\n                      <Add size={size} className={iconStyles({})} />\n                    </StepButton>\n                  </div>}\n                </FieldGroup>\n                {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n                <HelpText\n                  size={size}\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  description={descriptionMessage}>\n                  {errorMessage}\n                </HelpText>\n              </>\n            );\n          }\n        }\n    </AriaNumberField>\n  );\n}\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  [props, ref] = useContextProps(props, ref, ButtonContext as any);\n  let ctx = props as any;\n  /**\n   * Must use div for now because Safari pointer event bugs on disabled form elements.\n   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n   */\n  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n  let {hoverProps, isHovered} = useHover(props);\n  let renderProps = useRenderProps({\n    ...props,\n    values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n    defaultClassName: 'react-aria-Button'\n  });\n  return (\n    <div\n      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n      {...mergeProps(buttonProps, focusProps, hoverProps)}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}\n      data-pressed={ctx.isPressed || isPressed || undefined}\n      data-hovered={isHovered || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined} />\n  );\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nlet _NumberField = forwardRef(NumberField);\nexport {_NumberField as NumberField};\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: CSSProperties | undefined;\n    let computedChildren: ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': ''\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.css.map"}

package/dist/NumberField.mjs

@@ -1,14 +1,14 @@
 import "./NumberField.css";
 import $053de6aaf5f9b7bd$export$2e2bcd8739ae039 from "./Add.mjs";
-import $4b69f02ec06b9226$export$2e2bcd8739ae039 from "./Chevron.mjs";
 import $f17037051ff08dc2$export$2e2bcd8739ae039 from "./Dash.mjs";
 import {FieldErrorIcon as $9afd80978c252040$export$bda0d075e0e342c9, FieldGroup as $9afd80978c252040$export$f0fe469072bc6950, FieldLabel as $9afd80978c252040$export$1acdcf5a973a8414, HelpText as $9afd80978c252040$export$a67c0bc59081311a, Input as $9afd80978c252040$export$f5b8910cec6cf069} from "./Field.mjs";
 import {FormContext as $9b916426527cebe7$export$c24727297075ec6a} from "./Form.mjs";
 import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressScale.mjs";
+import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "./useSpectrumContextProps.mjs";
 import {jsx as $5qJVF$jsx, jsxs as $5qJVF$jsxs, Fragment as $5qJVF$Fragment} from "react/jsx-runtime";
 import {NumberField as $5qJVF$NumberField, InputContext as $5qJVF$InputContext, Text as $5qJVF$Text, useContextProps as $5qJVF$useContextProps, ButtonContext as $5qJVF$ButtonContext} from "react-aria-components";
-import {useFocusableRef as $5qJVF$useFocusableRef, createFocusableRef as $5qJVF$createFocusableRef} from "@react-spectrum/utils";
-import {useContext as $5qJVF$useContext, useRef as $5qJVF$useRef, useImperativeHandle as $5qJVF$useImperativeHandle, forwardRef as $5qJVF$forwardRef, useMemo as $5qJVF$useMemo} from "react";
+import {createContext as $5qJVF$createContext, useContext as $5qJVF$useContext, useRef as $5qJVF$useRef, useImperativeHandle as $5qJVF$useImperativeHandle, forwardRef as $5qJVF$forwardRef, useMemo as $5qJVF$useMemo} from "react";
+import {createFocusableRef as $5qJVF$createFocusableRef} from "@react-spectrum/utils";
 import {mergeRefs as $5qJVF$mergeRefs, filterDOMProps as $5qJVF$filterDOMProps, mergeProps as $5qJVF$mergeProps} from "@react-aria/utils";
 import {useButton as $5qJVF$useButton, useFocusRing as $5qJVF$useFocusRing, useHover as $5qJVF$useHover} from "react-aria";
 
@@ -34,6 +34,7 @@ import {useButton as $5qJVF$useButton, useFocusRing as $5qJVF$useFocusRing, useH
 
 
 
+const $675eca1a78ccd399$export$b414a48cf5dcbc11 = /*#__PURE__*/ (0, $5qJVF$createContext)(null);
 const $675eca1a78ccd399$var$inputButton = function anonymous(props) {
     let rules = " .";
     rules += ' _Zd';
@@ -71,63 +72,25 @@ const $675eca1a78ccd399$var$inputButton = function anonymous(props) {
     rules += ' _1c';
     rules += ' _2d';
     if (props.size === "XL") {
-        if (props.isCollapsed) {
-            rules += ' lbs';
-            rules += ' lp';
-        } else {
-            rules += ' lbp';
-            rules += ' lo';
-        }
+        rules += ' lbp';
+        rules += ' lo';
     } else if (props.size === "L") {
-        if (props.isCollapsed) {
-            rules += ' lbp';
-            rules += ' lo';
-        } else {
-            rules += ' lbl';
-            rules += ' lk';
-        }
+        rules += ' lbl';
+        rules += ' lk';
     } else if (props.size === "M") {
-        if (props.isCollapsed) {
-            rules += ' lbl';
-            rules += ' lk';
-        } else {
-            rules += ' lbj';
-            rules += ' li';
-        }
+        rules += ' lbj';
+        rules += ' li';
     } else if (props.size === "S") {
-        if (props.isCollapsed) {
-            rules += ' lbl';
-            rules += ' lk';
-        } else {
-            rules += ' lbi';
-            rules += ' lh';
-        }
+        rules += ' lbi';
+        rules += ' lh';
     }
-    if (props.isCollapsed) {
-        if (props.size === "XL") {
-            rules += ' kbj';
-            rules += ' ki';
-        } else if (props.size === "L") {
-            rules += ' kbi';
-            rules += ' kh';
-        } else if (props.size === "M") {
-            rules += ' kbg';
-            rules += ' kf';
-        } else if (props.size === "S") {
-            rules += ' kbe';
-            rules += ' kd';
-        }
-    } else rules += ' k1';
+    rules += ' k1';
     if (props.type === "increment") rules += ' ya';
     else rules += ' yE';
-    if (props.isCollapsed) rules += ' _ba';
-    else rules += ' _bb';
-    if (props.isCollapsed) rules += ' _8-3t1y';
-    else rules += ' _8-3t1x';
-    if (props.isCollapsed) {
-        rules += ' oba';
-        rules += ' oa';
-    }
+    rules += ' _bb';
+    rules += ' _8-3t1x';
+    rules += ' oba';
+    rules += ' oa';
     rules += ' _Oag';
     rules += ' _Oa';
     rules += ' _Qa-375x7f';
@@ -152,6 +115,7 @@ const $675eca1a78ccd399$var$inputButton = function anonymous(props) {
         else if (props.isHovered) rules += ' ao';
         else rules += ' an';
     }
+    rules += ' __Hb';
     return rules;
 };
 const $675eca1a78ccd399$var$iconStyles = function anonymous(props) {
@@ -166,56 +130,33 @@ const $675eca1a78ccd399$var$iconStyles = function anonymous(props) {
 const $675eca1a78ccd399$var$stepperContainerStyles = function anonymous(props) {
     let rules = " .";
     rules += ' _Zd';
-    if (props.isCollapsed) rules += ' _6d';
-    else rules += ' _6a';
-    if (props.isCollapsed) rules += ' i-375zlr';
-    else {
-        if (props.size === "XL") rules += ' ic';
-        else if (props.size === "L") rules += ' ic';
-        else if (props.size === "M") rules += ' ib';
-        else if (props.size === "S") rules += ' ic';
-    }
-    if (props.isCollapsed) rules += ' j-375zlr';
-    else {
-        if (props.size === "XL") rules += ' jc';
-        else if (props.size === "L") rules += ' jc';
-        else if (props.size === "M") rules += ' jb';
-        else if (props.size === "S") rules += ' jc';
-    }
-    if (props.isCollapsed) {
-        if (props.size === "XL") {
-            rules += ' pbs';
-            rules += ' pp';
-        } else if (props.size === "L") {
-            rules += ' pbp';
-            rules += ' po';
-        } else if (props.size === "M") {
-            rules += ' pbl';
-            rules += ' pk';
-        } else if (props.size === "S") {
-            rules += ' pbi';
-            rules += ' ph';
-        }
-    }
-    if (props.isCollapsed) rules += ' D-375zlr';
-    else {
-        if (props.size === "XL") rules += ' D-3762yr';
-        else if (props.size === "L") rules += ' D-3762yr';
-        else if (props.size === "M") rules += ' D-3761a9';
-        else if (props.size === "S") rules += ' D-375zlr';
+    rules += ' _6a';
+    if (props.size === "XL") rules += ' ic';
+    else if (props.size === "L") rules += ' ic';
+    else if (props.size === "M") rules += ' ib';
+    else if (props.size === "S") rules += ' ic';
+    if (props.size === "XL") rules += ' jc';
+    else if (props.size === "L") rules += ' jc';
+    else if (props.size === "M") rules += ' jb';
+    else if (props.size === "S") rules += ' jc';
+    if (props.size === "XL") {
+        rules += ' Db-1aa9md1';
+        rules += ' D-6njx2e';
+    } else if (props.size === "L") {
+        rules += ' Db-1aa9md1';
+        rules += ' D-6njx2e';
+    } else if (props.size === "M") rules += ' Db';
+    else if (props.size === "S") {
+        rules += ' Db-13yuhxm';
+        rules += ' D-59f7mn';
     }
     return rules;
 };
-const $675eca1a78ccd399$var$chevronSize = {
-    S: 'XS',
-    M: 'S',
-    L: 'L',
-    XL: 'XL'
-};
 function $675eca1a78ccd399$var$NumberField(props1, ref) {
-    let { label: label, description: descriptionMessage, errorMessage: errorMessage, isCollapsed: isCollapsed, isRequired: isRequired, size: size = 'M', labelPosition: labelPosition = 'top', necessityIndicator: necessityIndicator, labelAlign: labelAlign = 'start', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, ...numberFieldProps } = props1;
+    [props1, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props1, ref, $675eca1a78ccd399$export$b414a48cf5dcbc11);
+    let { label: label, contextualHelp: contextualHelp, description: descriptionMessage, errorMessage: errorMessage, hideStepper: hideStepper, isRequired: isRequired, size: size = 'M', labelPosition: labelPosition = 'top', necessityIndicator: necessityIndicator, labelAlign: labelAlign = 'start', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, ...numberFieldProps } = props1;
     let formContext = (0, $5qJVF$useContext)((0, $9b916426527cebe7$export$c24727297075ec6a));
-    let domRef = (0, $5qJVF$useFocusableRef)(ref);
+    let domRef = (0, $5qJVF$useRef)(null);
     let inputRef = (0, $5qJVF$useRef)(null);
     let decrementButtonRef = (0, $5qJVF$useRef)(null);
     let incrementButtonRef = (0, $5qJVF$useRef)(null);
@@ -235,7 +176,7 @@ function $675eca1a78ccd399$var$NumberField(props1, ref) {
         style: UNSAFE_style,
         className: UNSAFE_className + function anonymous(props, overrides) {
             let rules = " .";
-            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|l|q|r|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W)[^\s]+/g) || [];
+            let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
             rules += matches.join('');
             let $__a = false;
             let $__b = false;
@@ -315,6 +256,7 @@ function $675eca1a78ccd399$var$NumberField(props1, ref) {
                         labelPosition: labelPosition,
                         labelAlign: labelAlign,
                         necessityIndicator: necessityIndicator,
+                        contextualHelp: contextualHelp,
                         children: label
                     }),
                     /*#__PURE__*/ (0, $5qJVF$jsxs)((0, $9afd80978c252040$export$f0fe469072bc6950), {
@@ -362,12 +304,13 @@ function $675eca1a78ccd399$var$NumberField(props1, ref) {
                             rules += ' m-rwozxi';
                             rules += ' C-375tnm';
                             rules += ' D-375tnn';
-                            rules += ' __Hb';
                             rules += ' -_375tnm_C-H';
-                            rules += ' -_375tnn_D-a';
+                            if (props.isStepperHidden) rules += ' -_375tnn_D-H';
+                            else rules += ' -_375tnn_D-a';
                             return rules;
                         }({
-                            size: size
+                            size: size,
+                            isStepperHidden: hideStepper
                         }),
                         children: [
                             /*#__PURE__*/ (0, $5qJVF$jsx)((0, $5qJVF$InputContext).Consumer, {
@@ -382,9 +325,8 @@ function $675eca1a78ccd399$var$NumberField(props1, ref) {
                             isInvalid && /*#__PURE__*/ (0, $5qJVF$jsx)((0, $9afd80978c252040$export$bda0d075e0e342c9), {
                                 isDisabled: isDisabled
                             }),
-                            /*#__PURE__*/ (0, $5qJVF$jsxs)("div", {
+                            !hideStepper && /*#__PURE__*/ (0, $5qJVF$jsxs)("div", {
                                 className: $675eca1a78ccd399$var$stepperContainerStyles({
-                                    isCollapsed: isCollapsed,
                                     size: size
                                 }),
                                 children: [
@@ -394,16 +336,10 @@ function $675eca1a78ccd399$var$NumberField(props1, ref) {
                                         style: (renderProps)=>(0, $10ea7662e51a285b$export$56e8cba416805d8d)(decrementButtonRef)(renderProps),
                                         className: (renderProps)=>$675eca1a78ccd399$var$inputButton({
                                                 ...renderProps,
-                                                type: isCollapsed ? 'decrementStep' : 'decrement',
-                                                isCollapsed: isCollapsed,
+                                                type: 'decrement',
                                                 size: size
                                             }),
-                                        children: isCollapsed ? /*#__PURE__*/ (0, $5qJVF$jsx)((0, $4b69f02ec06b9226$export$2e2bcd8739ae039), {
-                                            size: $675eca1a78ccd399$var$chevronSize[size],
-                                            className: $675eca1a78ccd399$var$iconStyles({
-                                                type: 'decrementStep'
-                                            })
-                                        }) : /*#__PURE__*/ (0, $5qJVF$jsx)((0, $f17037051ff08dc2$export$2e2bcd8739ae039), {
+                                        children: /*#__PURE__*/ (0, $5qJVF$jsx)((0, $f17037051ff08dc2$export$2e2bcd8739ae039), {
                                             size: size,
                                             className: $675eca1a78ccd399$var$iconStyles({})
                                         })
@@ -414,16 +350,10 @@ function $675eca1a78ccd399$var$NumberField(props1, ref) {
                                         style: (renderProps)=>(0, $10ea7662e51a285b$export$56e8cba416805d8d)(incrementButtonRef)(renderProps),
                                         className: (renderProps)=>$675eca1a78ccd399$var$inputButton({
                                                 ...renderProps,
-                                                type: isCollapsed ? 'incrementStep' : 'increment',
-                                                isCollapsed: isCollapsed,
+                                                type: 'increment',
                                                 size: size
                                             }),
-                                        children: isCollapsed ? /*#__PURE__*/ (0, $5qJVF$jsx)((0, $4b69f02ec06b9226$export$2e2bcd8739ae039), {
-                                            size: $675eca1a78ccd399$var$chevronSize[size],
-                                            className: $675eca1a78ccd399$var$iconStyles({
-                                                type: 'incrementStep'
-                                            })
-                                        }) : /*#__PURE__*/ (0, $5qJVF$jsx)((0, $053de6aaf5f9b7bd$export$2e2bcd8739ae039), {
+                                        children: /*#__PURE__*/ (0, $5qJVF$jsx)((0, $053de6aaf5f9b7bd$export$2e2bcd8739ae039), {
                                             size: size,
                                             className: $675eca1a78ccd399$var$iconStyles({})
                                         })
@@ -543,5 +473,5 @@ function $675eca1a78ccd399$var$useRenderProps(props) {
 }
 
 
-export {$675eca1a78ccd399$export$63c5fa0b2fdccd2e as NumberField};
+export {$675eca1a78ccd399$export$b414a48cf5dcbc11 as NumberFieldContext, $675eca1a78ccd399$export$63c5fa0b2fdccd2e as NumberField};
 //# sourceMappingURL=NumberField.mjs.map

package/dist/NumberField.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/NumberField.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport Add from '../ui-icons/Add';\nimport {\n  ButtonProps as AriaButtonProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  ButtonContext,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createFocusableRef, useFocusableRef} from '@react-spectrum/utils';\nimport {CSSProperties, ForwardedRef, forwardRef, ReactNode, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FocusableRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext} from './Form';\nimport {pressScale} from './pressScale';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\n\n\nexport interface NumberFieldProps extends\n  AriaNumberFieldProps,\n  StyleProps,\n  Omit<SpectrumLabelableProps, 'contextualHelp'>,\n  HelpTextProps {\n  /**\n   * Whether the NumberField step buttons should be collapsed into a single column.\n   *\n   * @default \"false\"\n   */\n    isCollapsed?: boolean,\n  /**\n   * The size of the NumberField.\n   *\n   * @default \"M\"\n   */\n    size?: 'S' | 'M' | 'L' | 'XL',\n    label?: ReactNode\n}\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderTopRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      decrementStep: 'none'\n    }\n  },\n  borderBottomRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      incrementStep: 'none'\n    }\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: {\n        default: 16,\n        isCollapsed: 24\n      },\n      M: {\n        default: 20,\n        isCollapsed: 24\n      },\n      L: {\n        default: 24,\n        isCollapsed: 32\n      },\n      XL: {\n        default: 32,\n        isCollapsed: 40\n      }\n    }\n  },\n  height: {\n    default: 'auto',\n    isCollapsed: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 16,\n        XL: 20\n      }\n    }\n  },\n  marginStart: {\n    default: 'text-to-control',\n    type: {\n      increment: 0\n    }\n  },\n  aspectRatio: {\n    default: 'square',\n    isCollapsed: 'auto'\n  },\n  flexShrink: {\n    default: 0,\n    isCollapsed: 1\n  },\n  minHeight: {\n    isCollapsed: 0\n  },\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  }\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: {\n    default: 0,\n    type: {\n      incrementStep: 270,\n      decrementStep: 90\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst stepperContainerStyles = style({\n  display: 'flex',\n  flexDirection: {\n    default: 'row',\n    isCollapsed: 'column-reverse'\n  },\n  gap: {\n    default: {\n      size: {\n        S: 8,\n        M: 4,\n        L: 8,\n        XL: 8\n      }\n    },\n    isCollapsed: '[2px]'\n  },\n  maxHeight: {\n    isCollapsed: {\n      size: {\n        S: 16,\n        M: 24,\n        L: 32,\n        XL: 40 // 40\n      }\n    }\n  },\n  paddingEnd: {\n    default: {\n      size: {\n        S: '[2px]',\n        M: '[4px]',\n        L: '[6px]',\n        XL: '[6px]'\n      }\n    },\n    isCollapsed: '[2px]'\n  }\n});\n\ntype Size = 'XS' | 'S' | 'M' | 'L' | 'XL';\nconst chevronSize: Record<'S' | 'M' | 'L' | 'XL', Size> = {\n  S: 'XS',\n  M: 'S',\n  L: 'L',\n  XL: 'XL'\n};\n\nfunction NumberField(props: NumberFieldProps, ref: FocusableRef<HTMLDivElement>) {\n  let {\n    label,\n    description: descriptionMessage,\n    errorMessage,\n    isCollapsed,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...numberFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let domRef = useFocusableRef(ref);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n  let incrementButtonRef = useRef<HTMLDivElement | null>(null);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n\n  return (\n    <AriaNumberField\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {\n          ({isDisabled, isInvalid}) => {\n            return  (\n              <>\n                <FieldLabel\n                  isDisabled={isDisabled}\n                  isRequired={isRequired}\n                  size={size}\n                  labelPosition={labelPosition}\n                  labelAlign={labelAlign}\n                  necessityIndicator={necessityIndicator}>\n                  {label}\n                </FieldLabel>\n                <FieldGroup\n                  role=\"presentation\"\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  size={size}\n                  styles={style({\n                    ...fieldInput(),\n                    paddingStart: 'edge-to-text',\n                    paddingEnd: 0,\n                    cursor: 'default'\n                  })({size})}>\n                  <InputContext.Consumer>\n                    {ctx => (\n                      <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                        <Input />\n                      </InputContext.Provider>\n                    )}\n                  </InputContext.Consumer>\n                  {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n                  <div className={stepperContainerStyles({isCollapsed, size})}>\n                    <StepButton\n                      ref={decrementButtonRef}\n                      slot=\"decrement\"\n                      style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: isCollapsed ? 'decrementStep' : 'decrement',\n                        isCollapsed,\n                        size\n                      })}>\n                      {\n                        isCollapsed\n                          ? <ChevronIcon size={chevronSize[size]} className={iconStyles({type: 'decrementStep'})} />\n                          : <Dash size={size} className={iconStyles({})} />\n                      }\n                    </StepButton>\n                    <StepButton\n                      ref={incrementButtonRef}\n                      slot=\"increment\"\n                      style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: isCollapsed ? 'incrementStep' : 'increment',\n                        isCollapsed,\n                        size\n                      })}>\n                      {\n                        isCollapsed\n                          ? <ChevronIcon size={chevronSize[size]} className={iconStyles({type: 'incrementStep'})} />\n                          : <Add size={size} className={iconStyles({})} />\n                      }\n                    </StepButton>\n                  </div>\n                </FieldGroup>\n                {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n                <HelpText\n                  size={size}\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  description={descriptionMessage}>\n                  {errorMessage}\n                </HelpText>\n              </>\n            );\n          }\n        }\n    </AriaNumberField>\n  );\n}\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  [props, ref] = useContextProps(props, ref, ButtonContext as any);\n  let ctx = props as any;\n  /**\n   * Must use div for now because Safari pointer event bugs on disabled form elements.\n   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n   */\n  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n  let {hoverProps, isHovered} = useHover(props);\n  let renderProps = useRenderProps({\n    ...props,\n    values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n    defaultClassName: 'react-aria-Button'\n  });\n  return (\n    <div\n      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n      {...mergeProps(buttonProps, focusProps, hoverProps)}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}\n      data-pressed={ctx.isPressed || isPressed || undefined}\n      data-hovered={isHovered || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined} />\n  );\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nlet _NumberField = forwardRef(NumberField);\nexport {_NumberField as NumberField};\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: CSSProperties | undefined;\n    let computedChildren: ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': ''\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/NumberField.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport Add from '../ui-icons/Add';\nimport {\n  ButtonProps as AriaButtonProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  ButtonContext,\n  ContextValue,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useButton, useFocusRing, useHover} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n  Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n  /**\n   * Whether to hide the increment and decrement buttons.\n   * @default false\n   */\n  hideStepper?: boolean,\n  /**\n   * The size of the NumberField.\n   *\n   * @default \"M\"\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);\n\nconst inputButton = style({\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\n  borderTopRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      decrementStep: 'none'\n    }\n  },\n  borderBottomRadius: {\n    default: {\n      size: {\n        S: '[3px]',\n        M: '[4px]',\n        L: '[5px]',\n        XL: '[6px]'\n      }\n    },\n    type: {\n      incrementStep: 'none'\n    }\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: {\n    size: {\n      S: 16,\n      M: 20,\n      L: 24,\n      XL: 32\n    }\n  },\n  height: 'auto',\n  marginStart: {\n    default: 'text-to-control',\n    type: {\n      increment: 0\n    }\n  },\n  aspectRatio: 'square',\n  flexShrink: 0,\n  minHeight: 0,\n  transition: {\n    default: 'default',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    default: baseColor('gray-100'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  color: {\n    default: 'neutral',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  },\n  cursor: 'default'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\n  rotate: {\n    default: 0,\n    type: {\n      incrementStep: 270,\n      decrementStep: 90\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  }\n});\n\nconst stepperContainerStyles = style({\n  display: 'flex',\n  flexDirection: 'row',\n  gap: {\n    size: {\n      S: 8,\n      M: 4,\n      L: 8,\n      XL: 8\n    }\n  },\n  paddingEnd: {\n    size: {\n      S: size(2),\n      M: 4,\n      L: size(6),\n      XL: size(6)\n    }\n  }\n});\n\nfunction NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    hideStepper,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_className = '',\n    UNSAFE_style,\n    ...numberFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n  let domRef = useRef<HTMLDivElement | null>(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let decrementButtonRef = useRef<HTMLDivElement | null>(null);\n  let incrementButtonRef = useRef<HTMLDivElement | null>(null);\n\n  // Expose imperative interface for ref\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    select() {\n      if (inputRef.current) {\n        inputRef.current.select();\n      }\n    },\n    getInputElement() {\n      return inputRef.current;\n    }\n  }));\n\n\n  return (\n    <AriaNumberField\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, props.styles)}>\n      {\n          ({isDisabled, isInvalid}) => {\n            return  (\n              <>\n                <FieldLabel\n                  isDisabled={isDisabled}\n                  isRequired={isRequired}\n                  size={size}\n                  labelPosition={labelPosition}\n                  labelAlign={labelAlign}\n                  necessityIndicator={necessityIndicator}\n                  contextualHelp={contextualHelp}>\n                  {label}\n                </FieldLabel>\n                <FieldGroup\n                  role=\"presentation\"\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  size={size}\n                  styles={style({\n                    ...fieldInput(),\n                    paddingStart: 'edge-to-text',\n                    paddingEnd: {\n                      default: 0,\n                      isStepperHidden: 'edge-to-text'\n                    }\n                  })({size, isStepperHidden: hideStepper})}>\n                  <InputContext.Consumer>\n                    {ctx => (\n                      <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n                        <Input />\n                      </InputContext.Provider>\n                    )}\n                  </InputContext.Consumer>\n                  {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n                  {!hideStepper && <div className={stepperContainerStyles({size})}>\n                    <StepButton\n                      ref={decrementButtonRef}\n                      slot=\"decrement\"\n                      style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'decrement',\n                        size\n                      })}>\n                      <Dash size={size} className={iconStyles({})} />\n                    </StepButton>\n                    <StepButton\n                      ref={incrementButtonRef}\n                      slot=\"increment\"\n                      style={renderProps => pressScale(incrementButtonRef)(renderProps)}\n                      className={renderProps => inputButton({\n                        ...renderProps,\n                        type: 'increment',\n                        size\n                      })}>\n                      <Add size={size} className={iconStyles({})} />\n                    </StepButton>\n                  </div>}\n                </FieldGroup>\n                {descriptionMessage && <Text slot=\"description\">{descriptionMessage}</Text>}\n                <HelpText\n                  size={size}\n                  isDisabled={isDisabled}\n                  isInvalid={isInvalid}\n                  description={descriptionMessage}>\n                  {errorMessage}\n                </HelpText>\n              </>\n            );\n          }\n        }\n    </AriaNumberField>\n  );\n}\n\ninterface StepButtonProps extends AriaButtonProps {\n}\n\nconst additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);\n\nlet StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivElement>) => {\n  [props, ref] = useContextProps(props, ref, ButtonContext as any);\n  let ctx = props as any;\n  /**\n   * Must use div for now because Safari pointer event bugs on disabled form elements.\n   * Link https://bugs.webkit.org/show_bug.cgi?id=219188.\n   */\n  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);\n  let {focusProps, isFocused, isFocusVisible} = useFocusRing(props);\n  let {hoverProps, isHovered} = useHover(props);\n  let renderProps = useRenderProps({\n    ...props,\n    values: {isHovered, isPressed, isFocused, isFocusVisible, isDisabled: props.isDisabled || false},\n    defaultClassName: 'react-aria-Button'\n  });\n  return (\n    <div\n      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}\n      {...mergeProps(buttonProps, focusProps, hoverProps)}\n      {...renderProps}\n      ref={ref}\n      slot={props.slot || undefined}\n      data-disabled={props.isDisabled || undefined}\n      data-pressed={ctx.isPressed || isPressed || undefined}\n      data-hovered={isHovered || undefined}\n      data-focused={isFocused || undefined}\n      data-focus-visible={isFocusVisible || undefined} />\n  );\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nlet _NumberField = forwardRef(NumberField);\nexport {_NumberField as NumberField};\n\n// replace from RAC\nfunction useRenderProps(props: any) {\n  let {\n    className,\n    style,\n    children,\n    defaultClassName = undefined,\n    defaultChildren = undefined,\n    defaultStyle,\n    values\n  } = props;\n\n  return useMemo(() => {\n    let computedClassName: string | undefined;\n    let computedStyle: CSSProperties | undefined;\n    let computedChildren: ReactNode | undefined;\n\n    if (typeof className === 'function') {\n      computedClassName = className({...values, defaultClassName});\n    } else {\n      computedClassName = className;\n    }\n\n    if (typeof style === 'function') {\n      computedStyle = style({...values, defaultStyle: defaultStyle || {}});\n    } else {\n      computedStyle = style;\n    }\n\n    if (typeof children === 'function') {\n      computedChildren = children({...values, defaultChildren});\n    } else if (children == null) {\n      computedChildren = defaultChildren;\n    } else {\n      computedChildren = children;\n    }\n\n    return {\n      className: computedClassName ?? defaultClassName,\n      style: (computedStyle || defaultStyle) ? {...defaultStyle, ...computedStyle} : undefined,\n      children: computedChildren ?? defaultChildren,\n      'data-rac': ''\n    };\n  }, [className, style, children, defaultClassName, defaultChildren, defaultStyle, values]);\n}\n"],"names":[],"version":3,"file":"NumberField.mjs.map"}