@react-spectrum/s2 0.9.0 → 0.9.2

package/dist/NumberField.css

@@ -1,397 +1,397 @@
 @layer _.a {
-  .-SFnbic-_Jb9 {
+  .-SFnbic-_Jb91 {
     --size: 1;
   }
 
-  .-SFnbic-_JICefdd9 {
+  .-SFnbic-_JICefdd91 {
     --size: .790123;
   }
 
-  .-SFnbic-_JJOW22b9 {
+  .-SFnbic-_JJOW22b91 {
     --size: .888889;
   }
 
-  .-SFnbic-_J0K2hn9 {
+  .-SFnbic-_J0K2hn91 {
     --size: 1.125;
   }
 
-  .-SFnbic-_JaP8ec9 {
+  .-SFnbic-_JaP8ec91 {
     --size: 1.26563;
   }
 
-  .-Bu7z1c-oa9 {
+  .-Bu7z1c-oa91 {
     --radius: .25rem;
   }
 
-  .oj9 {
+  .oj91 {
     border-start-start-radius: round(var(--radius) * var(--size), 1px);
   }
 
-  .nj9 {
+  .nj91 {
     border-start-end-radius: round(var(--radius) * var(--size), 1px);
   }
 
-  .kj9 {
+  .kj91 {
     border-end-start-radius: round(var(--radius) * var(--size), 1px);
   }
 
-  .jj9 {
+  .jj91 {
     border-end-end-radius: round(var(--radius) * var(--size), 1px);
   }
 
-  ._Le9 {
+  ._Le91 {
     outline-style: none;
   }
 
-  ._Wa9 {
+  ._Wa91 {
     text-align: center;
   }
 
-  ._je9 {
+  ._je91 {
     border-style: none;
   }
 
-  .eb9 {
+  .eb91 {
     align-items: center;
   }
 
-  ._Ca9 {
+  ._Ca91 {
     justify-content: center;
   }
 
-  .Zu9 {
+  .Zu91 {
     width: calc(1rem * var(--s2-scale));
   }
 
-  .Zm9 {
+  .Zm91 {
     width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Zo9 {
+  .Zo91 {
     width: calc(1.5rem * var(--s2-scale));
   }
 
-  .ZC9 {
+  .ZC91 {
     width: calc(2rem * var(--s2-scale));
   }
 
-  .Fd9 {
+  .Fd91 {
     height: auto;
   }
 
-  .Iw9 {
+  .Iw91 {
     margin-inline-start: .714286em;
   }
 
-  .Iy9 {
+  .Iy91 {
     margin-inline-start: 0;
   }
 
-  .fa9 {
+  .fa91 {
     aspect-ratio: 1;
   }
 
-  .Ma9 {
+  .Ma91 {
     min-height: 0;
   }
 
-  .Yd9 {
+  .Yd91 {
     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;
   }
 
-  .Xb9 {
+  .Xb91 {
     transition-duration: .15s;
   }
 
-  ._2b9 {
+  ._2b91 {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  .gF9 {
+  .gF91 {
     background-color: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
   }
 
-  .gH9 {
+  .gH91 {
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .pt9 {
+  .pt91 {
     color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .po9 {
+  .po91 {
     color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  .pp9 {
+  .pp91 {
     color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
-  .ri9 {
+  .ri91 {
     cursor: default;
   }
 
-  ._va9 {
+  ._va91 {
     flex-shrink: 0;
   }
 
-  .-_8sjo0b-t5ZbAob9 {
+  .-_8sjo0b-t5ZbAob91 {
     --iconPrimary: currentColor;
   }
 
-  .sd9 {
+  .sd91 {
     display: flex;
   }
 
-  ._tc9 {
+  ._tc91 {
     flex-direction: row;
   }
 
-  .Ub9 {
+  .Ub91 {
     row-gap: .25rem;
   }
 
-  .Ue9 {
+  .Ue91 {
     row-gap: .5rem;
   }
 
-  .qb9 {
+  .qb91 {
     column-gap: .25rem;
   }
 
-  .qe9 {
+  .qe91 {
     column-gap: .5rem;
   }
 
-  .Hr9 {
+  .Hr91 {
     margin-inline-end: .125rem;
   }
 
-  .Hs9 {
+  .Hs91 {
     margin-inline-end: .25rem;
   }
 
-  .HWJpoB9 {
+  .HWJpoB91 {
     margin-inline-end: .375rem;
   }
 
-  .se9 {
+  .se91 {
     display: grid;
   }
 
-  .z2mU9 {
+  .z2mU91 {
     grid-column-start: 1;
   }
 
-  .yvoofG9 {
+  .yvoofG91 {
     grid-column-end: span 2;
   }
 
-  .DM8Mfn9 {
+  .DM8Mfn91 {
     grid-template-columns: 1fr;
   }
 
-  .DPlN5qb9 {
+  .DPlN5qb91 {
     grid-template-columns: auto 1fr;
   }
 
-  .DLwlgod9 {
+  .DLwlgod91 {
     grid-template-columns: subgrid;
   }
 
-  .E4w1sLc9 {
+  .E4w1sLc91 {
     grid-template-rows: auto 1fr auto;
   }
 
-  .EPlN5qb9 {
+  .EPlN5qb91 {
     grid-template-rows: auto 1fr;
   }
 
-  .Cxaocre9 {
+  .Cxaocre91 {
     grid-template-areas: "label"
                          "input"
                          "helptext";
   }
 
-  .CbRM95c9 {
+  .CbRM95c91 {
     grid-template-areas: "label input"
                          "label helptext";
   }
 
-  .vd9 {
+  .vd91 {
     font-size: .875rem;
   }
 
-  .va9 {
+  .va91 {
     font-size: .6875rem;
   }
 
-  .vb9 {
+  .vb91 {
     font-size: .75rem;
   }
 
-  .vp9 {
+  .vp91 {
     font-size: 1rem;
   }
 
-  .vg9 {
+  .vg91 {
     font-size: 1.125rem;
   }
 
-  .ea9 {
+  .ea91 {
     align-items: baseline;
   }
 
-  ._Fa9 {
+  ._Fa91 {
     line-height: 1.3;
   }
 
-  .-BhX7R-Fx9 {
+  .-BhX7R-Fx91 {
     --field-height: calc(2rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fn9 {
+  .-BhX7R-Fn91 {
     --field-height: calc(1.25rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fp9 {
+  .-BhX7R-Fp91 {
     --field-height: calc(1.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fv9 {
+  .-BhX7R-Fv91 {
     --field-height: calc(2.5rem * var(--s2-scale));
   }
 
-  .-BhX7R-Fz9 {
+  .-BhX7R-Fz91 {
     --field-height: calc(3rem * var(--s2-scale));
   }
 
-  .-AJjOLd-UVkF0Db9 {
+  .-AJjOLd-UVkF0Db91 {
     --field-gap: calc((var(--field-height)  - var(--_k, 0px)  - var(--h, 0px)  - 1lh) / 2);
   }
 
-  .qg9 {
+  .qg91 {
     column-gap: .75rem;
   }
 
-  .__ca9 {
+  .__ca91 {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .zXcEWr9 {
+  .zXcEWr91 {
     grid-column-start: input;
   }
 
-  .yXcEWr9 {
+  .yXcEWr91 {
     grid-column-end: input;
   }
 
-  .BXcEWr9 {
+  .BXcEWr91 {
     grid-row-start: input;
   }
 
-  .AXcEWr9 {
+  .AXcEWr91 {
     grid-row-end: input;
   }
 
-  .Nk9 {
+  .Nk91 {
     min-width: calc(2rem * var(--s2-scale));
   }
 
-  .Ne9 {
+  .Ne91 {
     min-width: calc(1.25rem * var(--s2-scale));
   }
 
-  .Nf9 {
+  .Nf91 {
     min-width: calc(1.5rem * var(--s2-scale));
   }
 
-  .Nj9 {
+  .Nj91 {
     min-width: calc(2.5rem * var(--s2-scale));
   }
 
-  .Nl9 {
+  .Nl91 {
     min-width: calc(3rem * var(--s2-scale));
   }
 
-  ._qd9 {
+  ._qd91 {
     contain: none;
   }
 
-  .-Anxdcc-Z3fn9H9 {
+  .-Anxdcc-Z3fn9H91 {
     --defaultWidth: calc(13rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zr9 {
+  .-Anxdcc-Zr91 {
     --defaultWidth: calc(12rem * var(--s2-scale));
   }
 
-  .-Anxdcc-ZStdtne9 {
+  .-Anxdcc-ZStdtne91 {
     --defaultWidth: calc(14rem * var(--s2-scale));
   }
 
-  .-Anxdcc-Zt9 {
+  .-Anxdcc-Zt91 {
     --defaultWidth: calc(15rem * var(--s2-scale));
   }
 
-  .__v6TNLWb9 {
+  .__v6TNLWb91 {
     contain-intrinsic-width: calc(var(--defaultWidth)  - var(--S, 0px)  - var(--R, 0px)  - var(--m, 0px)  - var(--l, 0px));
   }
 
-  .SMBFGYc9 {
+  .SMBFGYc91 {
     padding-inline-start: var(--S);
   }
 
-  .RfBFGYc9 {
+  .RfBFGYc91 {
     padding-inline-end: var(--R);
   }
 
-  .-S_-Sv9 {
+  .-S_-Sv91 {
     --S: calc(var(--F, var(--M)) * 3 / 8);
   }
 
-  .-R_-Rd9 {
+  .-R_-Rd91 {
     --R: 0px;
   }
 
-  .-R_-Rv9 {
+  .-R_-Rv91 {
     --R: calc(var(--F, var(--M)) * 3 / 8);
   }
 }
 
 @layer _.b {
-  ._Ffb9:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._Ffb91:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 }
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Yle9 {
+    .Yle91 {
       transition-property: none;
     }
 
-    .Xlb9 {
+    .Xlb91 {
       transition-duration: .15s;
     }
 
-    ._2lb9 {
+    ._2lb91 {
       transition-timing-function: cubic-bezier(.45, 0, .4, 1);
     }
 
-    .glc9 {
+    .glc91 {
       background-color: buttontext;
     }
 
-    .gle9 {
+    .gle91 {
       background-color: highlight;
     }
 
-    .gld9 {
+    .gld91 {
       background-color: graytext;
     }
 
-    .pla9 {
+    .pla91 {
       color: buttonface;
     }
   }
@@ -399,23 +399,23 @@
 
 @layer _.b.s {
   @media not ((hover: hover) and (pointer: fine)) {
-    .vsf9 {
+    .vsf91 {
       font-size: 1.0625rem;
     }
 
-    .vsc9 {
+    .vsc91 {
       font-size: .8125rem;
     }
 
-    .vse9 {
+    .vse91 {
       font-size: .9375rem;
     }
 
-    .vsh9 {
+    .vsh91 {
       font-size: 1.1875rem;
     }
 
-    .vsj9 {
+    .vsj91 {
       font-size: 1.375rem;
     }
   }
@@ -423,7 +423,7 @@
 
 @layer _.b.t {
   @supports (contain-intrinsic-width: 1px) {
-    ._qtb9 {
+    ._qtb91 {
       contain: inline-size;
     }
   }

package/dist/NumberField.css.map

@@ -1 +1 @@
-{"mappings":"AC2DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;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;;;;EAkEK;;;;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;;;;;AAnJN;EA2HgB;;;;;AA3HhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA2HgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBV;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  ButtonRenderProps,\n  ContextValue,\n  InputContext,\n  Text,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\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 '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\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<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  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// 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;;;;EAiDD;;;;EAAA;;;;EAQY;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkEK;;;;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;;;;;AAnJN;EA2HgB;;;;;AA3HhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA2HgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBV;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  ButtonRenderProps,\n  ContextValue,\n  InputContext,\n  useContextProps\n} from 'react-aria-components';\nimport {baseColor, space, style} from '../style' with {type: 'macro'};\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 '@react-spectrum/utils';\nimport Dash from '../ui-icons/Dash';\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<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  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                <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"}