@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/NumberField.css

@@ -1,401 +1,401 @@
 @layer _.a {
-  .-SFnbic-_Jb13 {
+  .-SFnbic-_Jb15 {
     --size: 1;
   }
 
-  .-SFnbic-_JICefdd13 {
+  .-SFnbic-_JICefdd15 {
     --size: .790123;
   }
 
-  .-SFnbic-_JJOW22b13 {
+  .-SFnbic-_JJOW22b15 {
     --size: .888889;
   }
 
-  .-SFnbic-_J0K2hn13 {
+  .-SFnbic-_J0K2hn15 {
     --size: 1.125;
   }
 
-  .-SFnbic-_JaP8ec13 {
+  .-SFnbic-_JaP8ec15 {
     --size: 1.26563;
   }
 
-  .-Bu7z1c-oa13 {
+  .-Bu7z1c-oa15 {
     --radius: .25rem;
   }
 
-  .oj13 {
+  .oj15 {
     border-start-start-radius: round(var(--radius) * var(--size), 1px);
   }
 
-  .nj13 {
+  .nj15 {
     border-start-end-radius: round(var(--radius) * var(--size), 1px);
   }
 
-  .kj13 {
+  .kj15 {
     border-end-start-radius: round(var(--radius) * var(--size), 1px);
   }
 
-  .jj13 {
+  .jj15 {
     border-end-end-radius: round(var(--radius) * var(--size), 1px);
   }
 
-  ._Le13 {
+  ._Le15 {
     outline-style: none;
   }
 
-  ._Wa13 {
+  ._Wa15 {
     text-align: center;
   }
 
-  ._je13 {
+  ._je15 {
     border-style: none;
   }
 
-  .eb13 {
+  .eb15 {
     align-items: center;
   }
 
-  ._Ca13 {
+  ._Ca15 {
     justify-content: center;
   }
 
-  .Zu13 {
+  .Zu15 {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .Zm13 {
+  .Zm15 {
     width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Zo13 {
+  .Zo15 {
     width: calc(1.5rem * var(--s2-scale));
   }
 
-  .ZC13 {
+  .ZC15 {
     width: calc(2rem * var(--s2-scale));
   }
 
-  .Fd13 {
+  .Fd15 {
     height: auto;
   }
 
-  .Iw13 {
+  .Iw15 {
     margin-inline-start: .714286em;
   }
 
-  .Iy13 {
+  .Iy15 {
     margin-inline-start: 0;
   }
 
-  .fa13 {
+  .fa15 {
     aspect-ratio: 1;
   }
 
-  .Ma13 {
+  .Ma15 {
     min-height: 0;
   }
 
-  .Yd13 {
+  .Yd15 {
     transition-property: color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
   }
 
-  .Xb13 {
+  .Xb15 {
     transition-duration: .15s;
   }
 
-  ._2b13 {
+  ._2b15 {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .gF13 {
+  .gF15 {
     background-color: light-dark(#e1e1e1, #323232);
   }
 
-  .gH13 {
+  .gH15 {
     background-color: light-dark(#e9e9e9, #2c2c2c);
   }
 
-  .pt13 {
+  .pt15 {
     color: light-dark(#292929, #dbdbdb);
   }
 
-  .po13 {
+  .po15 {
     color: light-dark(#131313, #f2f2f2);
   }
 
-  .pp13 {
+  .pp15 {
     color: light-dark(#c6c6c6, #444);
   }
 
-  .ri13 {
+  .ri15 {
     cursor: default;
   }
 
-  ._va13 {
+  ._va15 {
     flex-shrink: 0;
   }
 
-  .-_8sjo0b-t5ZbAob13 {
+  .-_8sjo0b-t5ZbAob15 {
     --iconPrimary: currentColor;
   }
 
-  .sd13 {
+  .sd15 {
     display: flex;
   }
 
-  ._tc13 {
+  ._tc15 {
     flex-direction: row;
   }
 
-  .Ub13 {
+  .Ub15 {
     row-gap: .25rem;
   }
 
-  .Ue13 {
+  .Ue15 {
     row-gap: .5rem;
   }
 
-  .qb13 {
+  .qb15 {
     column-gap: .25rem;
   }
 
-  .qe13 {
+  .qe15 {
     column-gap: .5rem;
   }
 
-  .Hr13 {
+  .Hr15 {
     margin-inline-end: .125rem;
   }
 
-  .Hs13 {
+  .Hs15 {
     margin-inline-end: .25rem;
   }
 
-  .HWJpoB13 {
+  .HWJpoB15 {
     margin-inline-end: .375rem;
   }
 
-  .se13 {
+  .se15 {
     display: grid;
   }
 
-  .z2mU13 {
+  .z2mU15 {
     grid-column-start: 1;
   }
 
-  .yvoofG13 {
+  .yvoofG15 {
     grid-column-end: span 2;
   }
 
-  .DM8Mfn13 {
+  .DM8Mfn15 {
     grid-template-columns: 1fr;
   }
 
-  .DPlN5qb13 {
+  .DPlN5qb15 {
     grid-template-columns: auto 1fr;
   }
 
-  .DLwlgod13 {
+  .DLwlgod15 {
     grid-template-columns: subgrid;
   }
 
-  .E4w1sLc13 {
+  .E4w1sLc15 {
     grid-template-rows: auto 1fr auto;
   }
 
-  .EPlN5qb13 {
+  .EPlN5qb15 {
     grid-template-rows: auto 1fr;
   }
 
-  .Cxaocre13 {
+  .Cxaocre15 {
     grid-template-areas: "label"
                          "input"
                          "helptext";
   }
 
-  .CbRM95c13 {
+  .CbRM95c15 {
     grid-template-areas: "label input"
                          "label helptext";
   }
 
-  .-_6BNtrc-c13 {
+  .-_6BNtrc-c15 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a13 {
+  .-_6BNtrc-a15 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b13 {
+  .-_6BNtrc-b15 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d13 {
+  .-_6BNtrc-d15 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e13 {
+  .-_6BNtrc-e15 {
     --fs: pow(1.125, 2);
   }
 
-  .vx13 {
+  .vx15 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .ea13 {
+  .ea15 {
     align-items: baseline;
   }
 
-  ._Fd13 {
+  ._Fd15 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .-BhX7R-Fx13 {
+  .-BhX7R-Fx15 {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fn13 {
+  .-BhX7R-Fn15 {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fp13 {
+  .-BhX7R-Fp15 {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fv13 {
+  .-BhX7R-Fv15 {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fz13 {
+  .-BhX7R-Fz15 {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-AJjOLd-UVkF0Db13 {
+  .-AJjOLd-UVkF0Db15 {
     --field-gap: calc((var(--field-height) - var(--_k, 0px) - var(--h, 0px) - 1lh) / 2);
   }
 
-  .qg13 {
+  .qg15 {
     column-gap: .75rem;
   }
 
-  .__ca13 {
+  .__ca15 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .zXcEWr13 {
+  .zXcEWr15 {
     grid-column-start: input;
   }
 
-  .yXcEWr13 {
+  .yXcEWr15 {
     grid-column-end: input;
   }
 
-  .BXcEWr13 {
+  .BXcEWr15 {
     grid-row-start: input;
   }
 
-  .AXcEWr13 {
+  .AXcEWr15 {
     grid-row-end: input;
   }
 
-  .Nk13 {
+  .Nk15 {
     min-width: calc(2rem * var(--s2-scale));
   }
 
-  .Ne13 {
+  .Ne15 {
     min-width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Nf13 {
+  .Nf15 {
     min-width: calc(1.5rem * var(--s2-scale));
   }
 
-  .Nj13 {
+  .Nj15 {
     min-width: calc(2.5rem * var(--s2-scale));
   }
 
-  .Nl13 {
+  .Nl15 {
     min-width: calc(3rem * var(--s2-scale));
   }
 
-  ._qd13 {
+  ._qd15 {
     contain: none;
   }
 
-  .-Anxdcc-Z3fn9H13 {
+  .-Anxdcc-Z3fn9H15 {
     --defaultWidth: calc(13rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zr13 {
+  .-Anxdcc-Zr15 {
     --defaultWidth: calc(12rem * var(--s2-scale));
   }
 
-  .-Anxdcc-ZStdtne13 {
+  .-Anxdcc-ZStdtne15 {
     --defaultWidth: calc(14rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zt13 {
+  .-Anxdcc-Zt15 {
     --defaultWidth: calc(15rem * var(--s2-scale));
   }
 
-  .__v6TNLWb13 {
+  .__v6TNLWb15 {
     contain-intrinsic-width: calc(var(--defaultWidth) - var(--S, 0px) - var(--R, 0px) - var(--m, 0px) - var(--l, 0px));
   }
 
-  .SMBFGYc13 {
+  .SMBFGYc15 {
     padding-inline-start: var(--S);
   }
 
-  .RfBFGYc13 {
+  .RfBFGYc15 {
     padding-inline-end: var(--R);
   }
 
-  .-S_-Sv13 {
+  .-S_-Sv15 {
     --S: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .-R_-Rd13 {
+  .-R_-Rd15 {
     --R: 0px;
   }
 
-  .-R_-Rv13 {
+  .-R_-Rv15 {
     --R: calc(var(--F, var(--M)) * 3 / 8);
   }
 }
 
 @layer _.b {
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Yle13 {
+    .Yle15 {
       transition-property: none;
     }
 
-    .Xlb13 {
+    .Xlb15 {
       transition-duration: .15s;
     }
 
-    ._2lb13 {
+    ._2lb15 {
       transition-timing-function: cubic-bezier(.45, 0, .4, 1);
     }
 
-    .glc13 {
+    .glc15 {
       background-color: buttontext;
     }
 
-    .gle13 {
+    .gle15 {
       background-color: highlight;
     }
 
-    .gld13 {
+    .gld15 {
       background-color: graytext;
     }
 
-    .pla13 {
+    .pla15 {
       color: buttonface;
     }
   }
@@ -403,7 +403,7 @@
 
 @layer _.b.t {
   @supports (contain-intrinsic-width: 1px) {
-    ._qtb13 {
+    ._qtb15 {
       contain: inline-size;
     }
   }

package/dist/private/NumberField.css.map

@@ -1 +1 @@
-{"mappings":"ACyDoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiDD;;;;EAAA;;;;EAQY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmEK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjJN;EA4HgB;;;;;AA5HhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiJM;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 {ButtonProps as AriaButtonProps, ButtonContext, ButtonRenderProps} from 'react-aria-components/Button';\nimport {NumberField as AriaNumberField, NumberFieldProps as AriaNumberFieldProps} from 'react-aria-components/NumberField';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {ContextValue, useContextProps} from 'react-aria-components/slots';\nimport {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';\nimport {createFocusableRef} from './useDOMRef';\nimport Dash from '../ui-icons/Dash';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FormContext, useFormProps} from './Form';\nimport {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {InputContext, InputProps} from 'react-aria-components/Input';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from './TextField';\nimport {useButton} from 'react-aria/useButton';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useHover} from 'react-aria/useHover';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface NumberFieldProps extends\n  Omit<AriaNumberFieldProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps,\n  Pick<InputProps, 'placeholder'> {\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<Partial<NumberFieldProps>, TextFieldRef>>(null);\n\nconst inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', type: 'decrement' | 'increment'}>({\n  ...controlBorderRadius('sm'),\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\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: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  },\n  cursor: 'default'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\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  marginEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: space(6),\n      XL: space(6)\n    }\n  }\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.\n */\nexport const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n  props = useFormProps(props);\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  return (\n    <AriaNumberField\n      ref={domRef}\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                  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                <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// 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":"AC2FoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmDD;;;;EAAA;;;;EAQY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyEvB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7JF;EAoIZ;;;;;AApIY;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA6JE;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  ButtonContext,\n  ButtonRenderProps\n} from 'react-aria-components/Button';\nimport {\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps\n} from 'react-aria-components/NumberField';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\nimport {ContextValue, useContextProps} from 'react-aria-components/slots';\nimport {\n  controlBorderRadius,\n  field,\n  fieldInput,\n  getAllowedOverrides,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {\n  createContext,\n  CSSProperties,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  Ref,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef\n} from 'react';\nimport {createFocusableRef} from './useDOMRef';\nimport Dash from '../ui-icons/Dash';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {filterDOMProps} from 'react-aria/filterDOMProps';\nimport {FormContext, useFormProps} from './Form';\nimport {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {InputContext, InputProps} from 'react-aria-components/Input';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {mergeRefs} from 'react-aria/mergeRefs';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from './TextField';\nimport {useButton} from 'react-aria/useButton';\nimport {useFocusRing} from 'react-aria/useFocusRing';\nimport {useHover} from 'react-aria/useHover';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface NumberFieldProps\n  extends\n    Omit<\n      AriaNumberFieldProps,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    SpectrumLabelableProps,\n    HelpTextProps,\n    Pick<InputProps, 'placeholder'> {\n  /**\n   * Whether to hide the increment and decrement buttons.\n   *\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   * The prefix to display in the NumberField. A non-interactive element that appears before the\n   * input.\n   */\n  prefix?: ReactNode;\n}\n\nexport const NumberFieldContext =\n  createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);\n\nconst inputButton = style<\n  ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL'; type: 'decrement' | 'increment'}\n>({\n  ...controlBorderRadius('sm'),\n  display: 'flex',\n  outlineStyle: 'none',\n  textAlign: 'center',\n  borderStyle: 'none',\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: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonFace'\n    }\n  },\n  cursor: 'default'\n});\n\nconst iconStyles = style({\n  flexShrink: 0,\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  marginEnd: {\n    size: {\n      S: 2,\n      M: 4,\n      L: space(6),\n      XL: space(6)\n    }\n  }\n});\n\n/**\n * NumberFields allow users to input number values with a keyboard or increment/decrement with step\n * buttons.\n */\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: Ref<TextFieldRef>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);\n  props = useFormProps(props);\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  return (\n    <AriaNumberField\n      ref={domRef}\n      isRequired={isRequired}\n      {...numberFieldProps}\n      style={UNSAFE_style}\n      className={\n        UNSAFE_className +\n        style(field(), getAllowedOverrides())(\n          {\n            isInForm: !!formContext,\n            labelPosition,\n            size\n          },\n          props.styles\n        )\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              prefix={props.prefix}\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\n                    value={{\n                      ...ctx,\n                      ref: mergeRefs((ctx as any)?.ref, inputRef)\n                    }}>\n                    <Input />\n                  </InputContext.Provider>\n                )}\n              </InputContext.Consumer>\n              {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n              {!hideStepper && (\n                <div className={stepperContainerStyles({size})}>\n                  <StepButton\n                    ref={decrementButtonRef}\n                    slot=\"decrement\"\n                    style={renderProps => pressScale(decrementButtonRef)(renderProps)}\n                    className={renderProps =>\n                      inputButton({\n                        ...renderProps,\n                        type: 'decrement',\n                        size\n                      })\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 =>\n                      inputButton({\n                        ...renderProps,\n                        type: 'increment',\n                        size\n                      })\n                    }>\n                    <Add size={size} className={iconStyles} />\n                  </StepButton>\n                </div>\n              )}\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n          </>\n        );\n      }}\n    </AriaNumberField>\n  );\n});\n\ninterface StepButtonProps extends AriaButtonProps {}\n\nconst additionalButtonHTMLAttributes = new Set([\n  'form',\n  'formAction',\n  'formEncType',\n  'formMethod',\n  'formNoValidate',\n  'formTarget',\n  'name',\n  'value'\n]);\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: {\n      isHovered,\n      isPressed,\n      isFocused,\n      isFocusVisible,\n      isDisabled: props.isDisabled || false\n    },\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// 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"}