@fluentui/react-spinbutton 9.0.7 → 9.0.9

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,UADF,EAEE,yBAFF,EAGE,oBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP","sourcesContent":["export {\n  SpinButton,\n  renderSpinButton_unstable,\n  spinButtonClassNames,\n  useSpinButtonStyles_unstable,\n  useSpinButton_unstable,\n} from './SpinButton';\nexport type {\n  SpinButtonOnChangeData,\n  SpinButtonChangeEvent,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonBounds,\n} from './SpinButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinbutton/src/index.ts"],"names":[],"mappings":"AAAA,SACE,UADF,EAEE,yBAFF,EAGE,oBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAiBA,SAAS,eAAe,IAAI,wBAA5B,EAAsD,yBAAtD,QAAuF,mBAAvF","sourcesContent":["export {\n  SpinButton,\n  renderSpinButton_unstable,\n  spinButtonClassNames,\n  useSpinButtonStyles_unstable,\n  useSpinButton_unstable,\n} from './SpinButton';\nexport type {\n  SpinButtonOnChangeData,\n  SpinButtonChangeEvent,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonBounds,\n} from './SpinButton';\n\nexport { SpinButtonField as SpinButtonField_unstable, spinButtonFieldClassNames } from './SpinButtonField';\nexport type { SpinButtonFieldProps as SpinButtonFieldProps_unstable } from './SpinButtonField';\n"],"sourceRoot":"../src/"}

package/lib/utils/clamp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/clamp.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,KAAK,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAsD;EACzE,IAAI,SAAS,GAAG,KAAhB;;EACA,IAAI,GAAG,KAAK,SAAZ,EAAuB;IACrB,IAAI,GAAG,KAAK,SAAR,IAAqB,GAAG,GAAG,GAA/B,EAAoC;MAClC,MAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;;MACA,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;QACzC;QACA,OAAO,CAAC,KAAR,CACE,CACE,gBAAgB,GAAG,kCAAkC,GAAG,IAD1D,EAEE,4CAFF,EAGE,oBAAoB,KAAK,IAH3B,EAIE,KAAK,CAAC,KAJR,EAKE,IALF,EADF;MAQD;;MACD,OAAO,KAAP;IACD;;IAED,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;EACD;;EAED,IAAI,GAAG,KAAK,SAAZ,EAAuB;IACrB,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;EACD;;EAED,OAAO,SAAP;AACD,CA3BM","sourcesContent":["export const clamp = (value: number, min?: number, max?: number): number => {\n  let nextValue = value;\n  if (min !== undefined) {\n    if (max !== undefined && min > max) {\n      const error = new Error();\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            `\"min\" value \"${min}\" is greater than \"max\" value \"${max}\".`,\n            '\"min\" must be less than or equal to \"max\".',\n            `Returning value \"${value}\".`,\n            error.stack,\n          ].join(),\n        );\n      }\n      return value;\n    }\n\n    nextValue = Math.max(min, nextValue);\n  }\n\n  if (max !== undefined) {\n    nextValue = Math.min(max, nextValue);\n  }\n\n  return nextValue;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinbutton/src/utils/clamp.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,KAAK,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAsD;EACzE,IAAI,SAAS,GAAG,KAAhB;;EACA,IAAI,GAAG,KAAK,SAAZ,EAAuB;IACrB,IAAI,GAAG,KAAK,SAAR,IAAqB,GAAG,GAAG,GAA/B,EAAoC;MAClC,MAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;;MACA,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;QACzC;QACA,OAAO,CAAC,KAAR,CACE,CACE,gBAAgB,GAAG,kCAAkC,GAAG,IAD1D,EAEE,4CAFF,EAGE,oBAAoB,KAAK,IAH3B,EAIE,KAAK,CAAC,KAJR,EAKE,IALF,EADF;MAQD;;MACD,OAAO,KAAP;IACD;;IAED,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;EACD;;EAED,IAAI,GAAG,KAAK,SAAZ,EAAuB;IACrB,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;EACD;;EAED,OAAO,SAAP;AACD,CA3BM","sourcesContent":["export const clamp = (value: number, min?: number, max?: number): number => {\n  let nextValue = value;\n  if (min !== undefined) {\n    if (max !== undefined && min > max) {\n      const error = new Error();\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            `\"min\" value \"${min}\" is greater than \"max\" value \"${max}\".`,\n            '\"min\" must be less than or equal to \"max\".',\n            `Returning value \"${value}\".`,\n            error.stack,\n          ].join(),\n        );\n      }\n      return value;\n    }\n\n    nextValue = Math.max(min, nextValue);\n  }\n\n  if (max !== undefined) {\n    nextValue = Math.min(max, nextValue);\n  }\n\n  return nextValue;\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/getBound.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/getBound.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAgE;EACtF,IAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;IACtC,IAAI,GAAG,KAAK,GAAZ,EAAiB;MACf,OAAO,MAAP;IACD;;IACD,OAAO,KAAP;EACD,CALD,MAKO,IAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;IAC7C,OAAO,KAAP;EACD;;EAED,OAAO,MAAP;AACD,CAXM","sourcesContent":["import type { SpinButtonBounds } from '../SpinButton';\n\nexport const getBound = (value: number, min?: number, max?: number): SpinButtonBounds => {\n  if (min !== undefined && value === min) {\n    if (max === min) {\n      return 'both';\n    }\n    return 'min';\n  } else if (max !== undefined && value === max) {\n    return 'max';\n  }\n\n  return 'none';\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinbutton/src/utils/getBound.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAgE;EACtF,IAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;IACtC,IAAI,GAAG,KAAK,GAAZ,EAAiB;MACf,OAAO,MAAP;IACD;;IACD,OAAO,KAAP;EACD,CALD,MAKO,IAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;IAC7C,OAAO,KAAP;EACD;;EAED,OAAO,MAAP;AACD,CAXM","sourcesContent":["import type { SpinButtonBounds } from '../SpinButton';\n\nexport const getBound = (value: number, min?: number, max?: number): SpinButtonBounds => {\n  if (min !== undefined && value === min) {\n    if (max === min) {\n      return 'both';\n    }\n    return 'min';\n  } else if (max !== undefined && value === max) {\n    return 'max';\n  }\n\n  return 'none';\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC","sourcesContent":["export * from './clamp';\nexport * from './getBound';\nexport * from './precision';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC","sourcesContent":["export * from './clamp';\nexport * from './getBound';\nexport * from './precision';\n"]}

package/lib/utils/precision.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/precision.ts"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACH,OAAM,SAAU,kBAAV,CAA6B,KAA7B,EAAmD;EACvD;;;;;AAKG;EACH,MAAM,MAAM,GAAG,0BAA0B,IAA1B,CAA+B,MAAM,CAAC,KAAD,CAArC,CAAf;;EACA,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,CAAP;EACD;;EACD,IAAI,MAAM,CAAC,CAAD,CAAV,EAAe;IACb,OAAO,CAAC,MAAM,CAAC,CAAD,CAAN,CAAU,MAAlB;EACD;;EACD,IAAI,MAAM,CAAC,CAAD,CAAV,EAAe;IACb,OAAO,MAAM,CAAC,CAAD,CAAN,CAAU,MAAjB;EACD;;EACD,OAAO,CAAP;AACD;AAED;;;;AAIG;;AACH,OAAM,SAAU,cAAV,CAAyB,KAAzB,EAAwC,SAAxC,EAA2D,IAAA,GAAe,EAA1E,EAA4E;EAChF,MAAM,GAAG,GAAG,IAAI,CAAC,GAAL,CAAS,IAAT,EAAe,SAAf,CAAZ;EACA,OAAO,IAAI,CAAC,KAAL,CAAW,KAAK,GAAG,GAAnB,IAA0B,GAAjC;AACD","sourcesContent":["/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value: number | string): number {\n  /**\n   * Group 1:\n   * [1-9]([0]+$) matches trailing zeros\n   * Group 2:\n   * \\.([0-9]*) matches all digits after a decimal point.\n   */\n  const groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n  if (!groups) {\n    return 0;\n  }\n  if (groups[1]) {\n    return -groups[1].length;\n  }\n  if (groups[2]) {\n    return groups[2].length;\n  }\n  return 0;\n}\n\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value: number, precision: number, base: number = 10): number {\n  const exp = Math.pow(base, precision);\n  return Math.round(value * exp) / exp;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinbutton/src/utils/precision.ts"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACH,OAAM,SAAU,kBAAV,CAA6B,KAA7B,EAAmD;EACvD;;;;;AAKG;EACH,MAAM,MAAM,GAAG,0BAA0B,IAA1B,CAA+B,MAAM,CAAC,KAAD,CAArC,CAAf;;EACA,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,CAAP;EACD;;EACD,IAAI,MAAM,CAAC,CAAD,CAAV,EAAe;IACb,OAAO,CAAC,MAAM,CAAC,CAAD,CAAN,CAAU,MAAlB;EACD;;EACD,IAAI,MAAM,CAAC,CAAD,CAAV,EAAe;IACb,OAAO,MAAM,CAAC,CAAD,CAAN,CAAU,MAAjB;EACD;;EACD,OAAO,CAAP;AACD;AAED;;;;AAIG;;AACH,OAAM,SAAU,cAAV,CAAyB,KAAzB,EAAwC,SAAxC,EAA2D,IAAA,GAAe,EAA1E,EAA4E;EAChF,MAAM,GAAG,GAAG,IAAI,CAAC,GAAL,CAAS,IAAT,EAAe,SAAf,CAAZ;EACA,OAAO,IAAI,CAAC,KAAL,CAAW,KAAK,GAAG,GAAnB,IAA0B,GAAjC;AACD","sourcesContent":["/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value: number | string): number {\n  /**\n   * Group 1:\n   * [1-9]([0]+$) matches trailing zeros\n   * Group 2:\n   * \\.([0-9]*) matches all digits after a decimal point.\n   */\n  const groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n  if (!groups) {\n    return 0;\n  }\n  if (groups[1]) {\n    return -groups[1].length;\n  }\n  if (groups[2]) {\n    return groups[2].length;\n  }\n  return 0;\n}\n\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value: number, precision: number, base: number = 10): number {\n  const exp = Math.pow(base, precision);\n  return Math.round(value * exp) / exp;\n}\n"],"sourceRoot":"../src/"}

package/lib-amd/SpinButton.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/SpinButton/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=SpinButton.js.map

package/lib-amd/SpinButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinbutton/src/SpinButton.ts"],"names":[],"mappings":";;;IAAA,uCAA8C","sourcesContent":["export * from './components/SpinButton/index';\n"]}

package/lib-amd/SpinButtonField.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/SpinButtonField/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=SpinButtonField.js.map

package/lib-amd/SpinButtonField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinButtonField.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinbutton/src/SpinButtonField.ts"],"names":[],"mappings":";;;IAAA,uCAAmD","sourcesContent":["export * from './components/SpinButtonField/index';\n"]}

package/lib-amd/components/SpinButton/SpinButton.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useSpinButton", "./renderSpinButton", "./useSpinButtonStyles"], function (require, exports, React, useSpinButton_1, renderSpinButton_1, useSpinButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SpinButton = void 0;
+    /**
+     * A SpinButton allows someone to incrementally adjust a value in small steps.
+     */
+    exports.SpinButton = React.forwardRef(function (props, ref) {
+        var state = useSpinButton_1.useSpinButton_unstable(props, ref);
+        useSpinButtonStyles_1.useSpinButtonStyles_unstable(state);
+        return renderSpinButton_1.renderSpinButton_unstable(state);
+    });
+    exports.SpinButton.displayName = 'SpinButton';
+});
+//# sourceMappingURL=SpinButton.js.map

package/lib-amd/components/SpinButton/SpinButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,UAAU,GAAyC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,sCAAsB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEjD,kDAA4B,CAAC,KAAK,CAAC,CAAC;QACpC,OAAO,4CAAyB,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles';\nimport type { SpinButtonProps } from './SpinButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A SpinButton allows someone to incrementally adjust a value in small steps.\n */\nexport const SpinButton: ForwardRefComponent<SpinButtonProps> = React.forwardRef((props, ref) => {\n  const state = useSpinButton_unstable(props, ref);\n\n  useSpinButtonStyles_unstable(state);\n  return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"]}

package/lib-amd/components/SpinButton/SpinButton.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=SpinButton.types.js.map

package/lib-amd/components/SpinButton/SpinButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinButton.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n// import { Input } from '@fluentui/react-input';\nimport * as React from 'react';\n\nexport type SpinButtonSlots = {\n  /**\n   * The root element of SpinButton is a container `<div>`.\n   * The root slot receives the `className` and `style` specified on the `<SpinButton>`.\n   * All other native props are applied to the primary slot: `input`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * Input that displays the current value and accepts direct input from the user.\n   * Displayed value is formatted.\n   *\n   * This is the primary slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * Renders the increment control.\n   */\n  incrementButton: NonNullable<Slot<'button'>>;\n\n  /**\n   * Renders the decrement control.\n   */\n  decrementButton: NonNullable<Slot<'button'>>;\n};\n\n/**\n * SpinButton Props\n */\nexport type SpinButtonProps = Omit<\n  ComponentProps<Partial<SpinButtonSlots>, 'input'>,\n  'defaultValue' | 'onChange' | 'size' | 'value'\n> & {\n  /**\n   * Controls the colors and borders of the input.\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.\n   *\n   * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its\n   * own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)\n   *\n   * Use `null` to indicate the control has no value.\n   */\n  defaultValue?: number | null;\n\n  /**\n   * String representation of `value`.\n   *\n   * Use this when displaying the value to users as something other than a plain number.\n   * For example, when displaying currency values this might be \"$1.00\" when value is `1`.\n   *\n   * Only provide this if the SpinButton is a controlled component where you are maintaining its\n   * current state and passing updates based on change events. When SpinButton is used as an\n   * uncontrolled component this prop is ignored.\n   */\n  displayValue?: string;\n\n  /**\n   * Max value of the control. If not provided, the control has no maximum value.\n   */\n  max?: number;\n\n  /**\n   * Min value of the control. If not provided, the control has no minimum value.\n   */\n  min?: number;\n\n  /**\n   * Callback for when the committed value changes.\n   * - User presses the up/down buttons (on single press or every spin)\n   * - User presses the up/down arrow keys (on single press or every spin)\n   * - User *commits* edits to the input text by focusing away (blurring) or pressing enter.\n   *   Note that this is NOT called for every key press while the user is editing.\n   */\n  onChange?: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;\n\n  /**\n   * How many decimal places the value should be rounded to.\n   *\n   * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.\n   * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.\n   */\n  precision?: number;\n\n  /**\n   * Size of the input.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * Difference between two adjacent values of the control.\n   * This value is used to calculate the precision of the input if no `precision` is given.\n   * The precision calculated this way will always be greater than or equal 0.\n   * @default 1\n   */\n  step?: number;\n\n  /**\n   * Large difference between two values. This should be greater than `step` and is used\n   * when users hit the Page Up or Page Down keys.\n   * @default 1\n   */\n  stepPage?: number;\n\n  /**\n   * Current value of the control (assumed to be valid).\n   *\n   * Only provide this if the SpinButton is a controlled component where you are maintaining its\n   * current state and passing updates based on change events; otherwise, use the `defaultValue`\n   * property.\n   *\n   * Use `null` to indicate the control has no value.\n   *\n   * Mutually exclusive with `defaultValue`.\n   */\n  value?: number | null;\n};\n\n/**\n * State used in rendering SpinButton\n */\nexport type SpinButtonState = ComponentState<SpinButtonSlots> &\n  Required<Pick<SpinButtonProps, 'appearance' | 'size'>> & {\n    /**\n     * State used to track which direction, if any, SpinButton is currently spinning.\n     * @default 'rest'\n     */\n    spinState: SpinButtonSpinState;\n\n    /**\n     * State used to track if the value is at the range bounds of [min-max].\n     * @default 'none'\n     */\n    atBound: SpinButtonBounds;\n  };\n\nexport type SpinButtonChangeEvent =\n  | React.MouseEvent<HTMLButtonElement>\n  | React.ChangeEvent<HTMLElement>\n  | React.FocusEvent<HTMLInputElement>\n  | React.KeyboardEvent<HTMLInputElement>;\n\nexport type SpinButtonOnChangeData = {\n  value?: number | null;\n  displayValue?: string;\n};\n\nexport type SpinButtonSpinState = 'rest' | 'up' | 'down';\nexport type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';\n"]}

package/lib-amd/components/SpinButton/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./SpinButton", "./SpinButton.types", "./renderSpinButton", "./useSpinButton", "./useSpinButtonStyles"], function (require, exports, tslib_1, SpinButton_1, SpinButton_types_1, renderSpinButton_1, useSpinButton_1, useSpinButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(SpinButton_1, exports);
+    tslib_1.__exportStar(SpinButton_types_1, exports);
+    tslib_1.__exportStar(renderSpinButton_1, exports);
+    tslib_1.__exportStar(useSpinButton_1, exports);
+    tslib_1.__exportStar(useSpinButtonStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/SpinButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/index.ts"],"names":[],"mappings":";;;IAAA,4CAA6B;IAC7B,kDAAmC;IACnC,kDAAmC;IACnC,+CAAgC;IAChC,qDAAsC","sourcesContent":["export * from './SpinButton';\nexport * from './SpinButton.types';\nexport * from './renderSpinButton';\nexport * from './useSpinButton';\nexport * from './useSpinButtonStyles';\n"]}

package/lib-amd/components/SpinButton/renderSpinButton.js

@@ -0,0 +1,36 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderSpinButton_unstable = void 0;
+    /**
+     * Render the final JSX of SpinButton
+     */
+    var renderSpinButton_unstable = function (state) {
+        // Leaving this here for now.
+        // This is the approach using react-input's Input component.
+        // It has some Typescript problems and feels hacky.
+        // const { slots, slotProps } = getSlots<SpinButtonSlots>(state);
+        // const { contentAfter, ...otherInputSlotProps } = slotProps.input as SpinButtonSlots['input'];
+        // const inputContentAfter = {
+        //   ...contentAfter,
+        //   children: (
+        //     <>
+        //       <slots.incrementButton {...slotProps.incrementButton} />
+        //       <slots.decrementButton {...slotProps.decrementButton} />
+        //     </>
+        //   ),
+        // };
+        // return (
+        //   <slots.root {...slotProps.root}>
+        //     <slots.input {...otherInputSlotProps} contentAfter={inputContentAfter}/>
+        //   </slots.root>
+        // );
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            React.createElement(slots.input, tslib_1.__assign({}, slotProps.input)),
+            React.createElement(slots.incrementButton, tslib_1.__assign({}, slotProps.incrementButton)),
+            React.createElement(slots.decrementButton, tslib_1.__assign({}, slotProps.decrementButton))));
+    };
+    exports.renderSpinButton_unstable = renderSpinButton_unstable;
+});
+//# sourceMappingURL=renderSpinButton.js.map

package/lib-amd/components/SpinButton/renderSpinButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderSpinButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/renderSpinButton.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,yBAAyB,GAAG,UAAC,KAAsB;QAC9D,6BAA6B;QAC7B,4DAA4D;QAC5D,mDAAmD;QACnD,iEAAiE;QAEjE,gGAAgG;QAChG,8BAA8B;QAC9B,qBAAqB;QACrB,gBAAgB;QAChB,SAAS;QACT,iEAAiE;QACjE,iEAAiE;QACjE,UAAU;QACV,OAAO;QACP,KAAK;QAEL,WAAW;QACX,qCAAqC;QACrC,+EAA+E;QAC/E,kBAAkB;QAClB,KAAK;QAEC,IAAA,KAAuB,0BAAQ,CAAkB,KAAK,CAAC,EAArD,KAAK,WAAA,EAAE,SAAS,eAAqC,CAAC;QAE9D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACpC,oBAAC,KAAK,CAAC,eAAe,uBAAK,SAAS,CAAC,eAAe,EAAI;YACxD,oBAAC,KAAK,CAAC,eAAe,uBAAK,SAAS,CAAC,eAAe,EAAI,CAC7C,CACd,CAAC;IACJ,CAAC,CAAC;IAhCW,QAAA,yBAAyB,6BAgCpC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinButtonState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonState) => {\n  // Leaving this here for now.\n  // This is the approach using react-input's Input component.\n  // It has some Typescript problems and feels hacky.\n  // const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  // const { contentAfter, ...otherInputSlotProps } = slotProps.input as SpinButtonSlots['input'];\n  // const inputContentAfter = {\n  //   ...contentAfter,\n  //   children: (\n  //     <>\n  //       <slots.incrementButton {...slotProps.incrementButton} />\n  //       <slots.decrementButton {...slotProps.decrementButton} />\n  //     </>\n  //   ),\n  // };\n\n  // return (\n  //   <slots.root {...slotProps.root}>\n  //     <slots.input {...otherInputSlotProps} contentAfter={inputContentAfter}/>\n  //   </slots.root>\n  // );\n\n  const { slots, slotProps } = getSlots<SpinButtonSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      <slots.incrementButton {...slotProps.incrementButton} />\n      <slots.decrementButton {...slotProps.decrementButton} />\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/SpinButton/useSpinButton.js

@@ -0,0 +1,252 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/keyboard-keys", "../../utils/index", "@fluentui/react-icons"], function (require, exports, tslib_1, React, react_utilities_1, Keys, index_1, react_icons_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSpinButton_unstable = void 0;
+    var DEFAULT_SPIN_DELAY_MS = 150;
+    var MIN_SPIN_DELAY_MS = 80;
+    var MAX_SPIN_TIME_MS = 1000;
+    // This is here to give an ease the mouse held down case.
+    // Exact easing it to be defined. Once it is we'll likely
+    // pull this out into a util function in the SpinButton package.
+    var lerp = function (start, end, percent) { return start + (end - start) * percent; };
+    /**
+     * Create the state required to render SpinButton.
+     *
+     * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,
+     * before being passed to renderSpinButton_unstable.
+     *
+     * @param props - props from this instance of SpinButton
+     * @param ref - reference to root HTMLElement of SpinButton
+     */
+    var useSpinButton_unstable = function (props, ref) {
+        var _a;
+        var nativeProps = react_utilities_1.getPartitionedNativeProps({
+            props: props,
+            primarySlotTagName: 'input',
+            excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],
+        });
+        var value = props.value, displayValue = props.displayValue, defaultValue = props.defaultValue, min = props.min, max = props.max, _b = props.step, step = _b === void 0 ? 1 : _b, _c = props.stepPage, stepPage = _c === void 0 ? 1 : _c, precisionFromProps = props.precision, onChange = props.onChange, _d = props.size, size = _d === void 0 ? 'medium' : _d, _e = props.appearance, appearance = _e === void 0 ? 'outline' : _e, root = props.root, input = props.input, incrementButton = props.incrementButton, decrementButton = props.decrementButton;
+        var precision = React.useMemo(function () {
+            return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max(index_1.calculatePrecision(step), 0);
+        }, [precisionFromProps, step]);
+        var _f = react_utilities_1.useControllableState({
+            state: value,
+            defaultState: defaultValue,
+            initialState: 0,
+        }), currentValue = _f[0], setCurrentValue = _f[1];
+        var isControlled = value !== undefined;
+        var _g = React.useState(undefined), textValue = _g[0], setTextValue = _g[1];
+        var _h = React.useState('rest'), keyboardSpinState = _h[0], setKeyboardSpinState = _h[1];
+        var internalState = React.useRef({
+            value: currentValue,
+            spinState: 'rest',
+            spinTime: 0,
+            spinDelay: DEFAULT_SPIN_DELAY_MS,
+            atBound: currentValue !== null ? index_1.getBound(index_1.precisionRound(currentValue, precision), min, max) : 'none',
+        });
+        var _j = react_utilities_1.useTimeout(), setStepTimeout = _j[0], clearStepTimeout = _j[1];
+        var stepValue = function (e, direction, startFrom) {
+            var startValue = internalState.current.value;
+            if (startFrom) {
+                var num = parseFloat(startFrom);
+                if (!isNaN(num)) {
+                    startValue = num;
+                }
+            }
+            var val = startValue;
+            var dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
+            var stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
+            if (val === null) {
+                var stepStart = min === undefined ? 0 : min;
+                var nullStep = index_1.clamp(stepStart + stepSize * dir, min, max);
+                commit(e, nullStep);
+                return;
+            }
+            var newValue = val + stepSize * dir;
+            if (!Number.isNaN(newValue)) {
+                newValue = index_1.clamp(newValue, min, max);
+            }
+            commit(e, newValue);
+            if (internalState.current.spinState !== 'rest') {
+                setStepTimeout(function () {
+                    // Ease the step speed a bit
+                    internalState.current.spinTime += internalState.current.spinDelay;
+                    internalState.current.spinDelay = lerp(DEFAULT_SPIN_DELAY_MS, MIN_SPIN_DELAY_MS, internalState.current.spinTime / MAX_SPIN_TIME_MS);
+                    stepValue(e, direction);
+                }, internalState.current.spinDelay);
+            }
+        };
+        var handleInputChange = function (e) {
+            if (!internalState.current.previousTextValue) {
+                internalState.current.previousTextValue = textValue;
+            }
+            var newValue = e.target.value;
+            setTextValue(newValue);
+        };
+        var handleIncrementMouseDown = function (e) {
+            internalState.current.spinState = 'up';
+            stepValue(e, 'up');
+        };
+        var handleDecrementMouseDown = function (e) {
+            internalState.current.spinState = 'down';
+            stepValue(e, 'down');
+        };
+        var handleStepMouseUpOrLeave = function (e) {
+            clearStepTimeout();
+            internalState.current.spinState = 'rest';
+            internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;
+            internalState.current.spinTime = 0;
+        };
+        var handleBlur = function (e) {
+            commit(e, currentValue, textValue);
+            internalState.current.previousTextValue = undefined;
+        };
+        var handleKeyDown = function (e) {
+            var nextKeyboardSpinState = 'rest';
+            if (e.key === Keys.ArrowUp) {
+                stepValue(e, 'up', textValue);
+                nextKeyboardSpinState = 'up';
+            }
+            else if (e.key === Keys.ArrowDown) {
+                stepValue(e, 'down', textValue);
+                nextKeyboardSpinState = 'down';
+            }
+            else if (e.key === Keys.PageUp) {
+                e.preventDefault();
+                stepValue(e, 'upPage', textValue);
+                nextKeyboardSpinState = 'up';
+            }
+            else if (e.key === Keys.PageDown) {
+                e.preventDefault();
+                stepValue(e, 'downPage', textValue);
+                nextKeyboardSpinState = 'down';
+            }
+            else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {
+                commit(e, min);
+                nextKeyboardSpinState = 'down';
+            }
+            else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {
+                commit(e, max);
+                nextKeyboardSpinState = 'up';
+            }
+            else if (e.key === Keys.Enter) {
+                commit(e, currentValue, textValue);
+                internalState.current.previousTextValue = undefined;
+            }
+            else if (e.key === Keys.Escape) {
+                if (internalState.current.previousTextValue) {
+                    setTextValue(undefined);
+                    internalState.current.previousTextValue = undefined;
+                }
+            }
+            if (keyboardSpinState !== nextKeyboardSpinState) {
+                setKeyboardSpinState(nextKeyboardSpinState);
+            }
+        };
+        var handleKeyUp = function (e) {
+            if (keyboardSpinState !== 'rest') {
+                setKeyboardSpinState('rest');
+                internalState.current.spinState = 'rest';
+            }
+        };
+        var commit = function (e, newValue, newDisplayValue) {
+            var valueChanged = newValue !== undefined && currentValue !== newValue;
+            var displayValueChanged = newDisplayValue !== undefined &&
+                internalState.current.previousTextValue !== undefined &&
+                internalState.current.previousTextValue !== newDisplayValue;
+            var roundedValue;
+            if (valueChanged) {
+                roundedValue = index_1.precisionRound(newValue, precision);
+                setCurrentValue(roundedValue);
+            }
+            else if (displayValueChanged && !isControlled) {
+                var nextValue = parseFloat(newDisplayValue);
+                if (!isNaN(nextValue)) {
+                    setCurrentValue(index_1.precisionRound(nextValue, precision));
+                }
+            }
+            if (valueChanged || displayValueChanged) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(e, { value: roundedValue, displayValue: newDisplayValue });
+            }
+            setTextValue(undefined);
+        };
+        var state = {
+            size: size,
+            appearance: appearance,
+            spinState: keyboardSpinState,
+            atBound: internalState.current.atBound,
+            components: {
+                root: 'span',
+                input: 'input',
+                incrementButton: 'button',
+                decrementButton: 'button',
+            },
+            root: react_utilities_1.resolveShorthand(root, {
+                required: true,
+                defaultProps: nativeProps.root,
+            }),
+            input: react_utilities_1.resolveShorthand(input, {
+                required: true,
+                defaultProps: tslib_1.__assign({ ref: ref, autoComplete: 'off', role: 'spinbutton', appearance: appearance, type: 'text' }, nativeProps.primary),
+            }),
+            incrementButton: react_utilities_1.resolveShorthand(incrementButton, {
+                required: true,
+                defaultProps: {
+                    tabIndex: -1,
+                    children: React.createElement(react_icons_1.ChevronUp16Regular, null),
+                    disabled: nativeProps.primary.disabled,
+                    'aria-label': 'Increment value',
+                    type: 'button',
+                },
+            }),
+            decrementButton: react_utilities_1.resolveShorthand(decrementButton, {
+                required: true,
+                defaultProps: {
+                    tabIndex: -1,
+                    children: React.createElement(react_icons_1.ChevronDown16Regular, null),
+                    disabled: nativeProps.primary.disabled,
+                    'aria-label': 'Decrement value',
+                    type: 'button',
+                },
+            }),
+        };
+        var valueToDisplay;
+        if (textValue !== undefined) {
+            valueToDisplay = textValue;
+        }
+        else if (value === null || currentValue === null) {
+            valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : '';
+            internalState.current.value = null;
+            internalState.current.atBound = 'none';
+        }
+        else {
+            var roundedValue = index_1.precisionRound(currentValue, precision);
+            internalState.current.value = roundedValue;
+            internalState.current.atBound = index_1.getBound(roundedValue, min, max);
+            if (isControlled) {
+                valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
+            }
+            else {
+                valueToDisplay = String(roundedValue);
+            }
+        }
+        state.input.value = valueToDisplay;
+        state.input['aria-valuemin'] = min;
+        state.input['aria-valuemax'] = max;
+        state.input['aria-valuenow'] = currentValue !== null && currentValue !== void 0 ? currentValue : undefined;
+        state.input['aria-valuetext'] = (_a = state.input['aria-valuetext']) !== null && _a !== void 0 ? _a : ((value !== undefined && displayValue) || undefined);
+        state.input.onChange = react_utilities_1.mergeCallbacks(state.input.onChange, handleInputChange);
+        state.input.onBlur = react_utilities_1.mergeCallbacks(state.input.onBlur, handleBlur);
+        state.input.onKeyDown = react_utilities_1.mergeCallbacks(state.input.onKeyDown, handleKeyDown);
+        state.input.onKeyUp = react_utilities_1.mergeCallbacks(state.input.onKeyUp, handleKeyUp);
+        state.incrementButton.onMouseDown = react_utilities_1.mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);
+        state.incrementButton.onMouseUp = react_utilities_1.mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);
+        state.incrementButton.onMouseLeave = react_utilities_1.mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+        state.decrementButton.onMouseDown = react_utilities_1.mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);
+        state.decrementButton.onMouseUp = react_utilities_1.mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);
+        state.decrementButton.onMouseLeave = react_utilities_1.mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);
+        return state;
+    };
+    exports.useSpinButton_unstable = useSpinButton_unstable;
+});
+//# sourceMappingURL=useSpinButton.js.map

package/lib-amd/components/SpinButton/useSpinButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSpinButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  resolveShorthand,\n  useControllableState,\n  useTimeout,\n} from '@fluentui/react-utilities';\nimport * as Keys from '@fluentui/keyboard-keys';\nimport {\n  SpinButtonProps,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonChangeEvent,\n  SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n  value: number | null;\n  spinState: SpinButtonSpinState;\n  spinTime: number;\n  spinDelay: number;\n  previousTextValue?: string;\n  atBound: SpinButtonBounds;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\n  });\n\n  const {\n    value,\n    displayValue,\n    defaultValue,\n    min,\n    max,\n    step = 1,\n    stepPage = 1,\n    precision: precisionFromProps,\n    onChange,\n    size = 'medium',\n    appearance = 'outline',\n    root,\n    input,\n    incrementButton,\n    decrementButton,\n  } = props;\n\n  const precision = React.useMemo(() => {\n    return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n  }, [precisionFromProps, step]);\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value,\n    defaultState: defaultValue,\n    initialState: 0,\n  });\n\n  const isControlled = value !== undefined;\n\n  const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n  const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n  const internalState = React.useRef<InternalState>({\n    value: currentValue,\n    spinState: 'rest',\n    spinTime: 0,\n    spinDelay: DEFAULT_SPIN_DELAY_MS,\n    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n  });\n\n  const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n  const stepValue = (\n    e: SpinButtonChangeEvent,\n    direction: 'up' | 'down' | 'upPage' | 'downPage',\n    startFrom?: string,\n  ) => {\n    let startValue = internalState.current.value;\n    if (startFrom) {\n      const num = parseFloat(startFrom);\n      if (!isNaN(num)) {\n        startValue = num;\n      }\n    }\n    const val = startValue;\n    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n    if (val === null) {\n      const stepStart = min === undefined ? 0 : min;\n      const nullStep = clamp(stepStart + stepSize * dir, min, max);\n      commit(e, nullStep);\n      return;\n    }\n\n    let newValue = val + stepSize * dir;\n    if (!Number.isNaN(newValue)) {\n      newValue = clamp(newValue, min, max);\n    }\n\n    commit(e, newValue);\n\n    if (internalState.current.spinState !== 'rest') {\n      setStepTimeout(() => {\n        // Ease the step speed a bit\n        internalState.current.spinTime += internalState.current.spinDelay;\n        internalState.current.spinDelay = lerp(\n          DEFAULT_SPIN_DELAY_MS,\n          MIN_SPIN_DELAY_MS,\n          internalState.current.spinTime / MAX_SPIN_TIME_MS,\n        );\n        stepValue(e, direction);\n      }, internalState.current.spinDelay);\n    }\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!internalState.current.previousTextValue) {\n      internalState.current.previousTextValue = textValue;\n    }\n    const newValue = e.target.value;\n    setTextValue(newValue);\n  };\n\n  const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    internalState.current.spinState = 'up';\n    stepValue(e, 'up');\n  };\n\n  const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    internalState.current.spinState = 'down';\n    stepValue(e, 'down');\n  };\n\n  const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    clearStepTimeout();\n    internalState.current.spinState = 'rest';\n    internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n    internalState.current.spinTime = 0;\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.previousTextValue = undefined;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n    if (e.key === Keys.ArrowUp) {\n      stepValue(e, 'up', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Keys.ArrowDown) {\n      stepValue(e, 'down', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (e.key === Keys.PageUp) {\n      e.preventDefault();\n      stepValue(e, 'upPage', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Keys.PageDown) {\n      e.preventDefault();\n      stepValue(e, 'downPage', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n      commit(e, min);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n      commit(e, max);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Keys.Enter) {\n      commit(e, currentValue, textValue);\n      internalState.current.previousTextValue = undefined;\n    } else if (e.key === Keys.Escape) {\n      if (internalState.current.previousTextValue) {\n        setTextValue(undefined);\n        internalState.current.previousTextValue = undefined;\n      }\n    }\n\n    if (keyboardSpinState !== nextKeyboardSpinState) {\n      setKeyboardSpinState(nextKeyboardSpinState);\n    }\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (keyboardSpinState !== 'rest') {\n      setKeyboardSpinState('rest');\n      internalState.current.spinState = 'rest';\n    }\n  };\n\n  const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n    const valueChanged = newValue !== undefined && currentValue !== newValue;\n    const displayValueChanged =\n      newDisplayValue !== undefined &&\n      internalState.current.previousTextValue !== undefined &&\n      internalState.current.previousTextValue !== newDisplayValue;\n\n    let roundedValue;\n    if (valueChanged) {\n      roundedValue = precisionRound(newValue!, precision);\n      setCurrentValue(roundedValue);\n    } else if (displayValueChanged && !isControlled) {\n      const nextValue = parseFloat(newDisplayValue as string);\n      if (!isNaN(nextValue)) {\n        setCurrentValue(precisionRound(nextValue, precision));\n      }\n    }\n\n    if (valueChanged || displayValueChanged) {\n      onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n    }\n\n    setTextValue(undefined);\n  };\n\n  const state: SpinButtonState = {\n    size,\n    appearance,\n    spinState: keyboardSpinState,\n    atBound: internalState.current.atBound,\n\n    components: {\n      root: 'span',\n      input: 'input',\n      incrementButton: 'button',\n      decrementButton: 'button',\n    },\n    root: resolveShorthand(root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n    input: resolveShorthand(input, {\n      required: true,\n      defaultProps: {\n        ref,\n        autoComplete: 'off',\n        role: 'spinbutton',\n        appearance,\n        type: 'text',\n        ...nativeProps.primary,\n      },\n    }),\n    incrementButton: resolveShorthand(incrementButton, {\n      required: true,\n      defaultProps: {\n        tabIndex: -1,\n        children: <ChevronUp16Regular />,\n        disabled: nativeProps.primary.disabled,\n        'aria-label': 'Increment value',\n        type: 'button',\n      },\n    }),\n    decrementButton: resolveShorthand(decrementButton, {\n      required: true,\n      defaultProps: {\n        tabIndex: -1,\n        children: <ChevronDown16Regular />,\n        disabled: nativeProps.primary.disabled,\n        'aria-label': 'Decrement value',\n        type: 'button',\n      },\n    }),\n  };\n\n  let valueToDisplay;\n  if (textValue !== undefined) {\n    valueToDisplay = textValue;\n  } else if (value === null || currentValue === null) {\n    valueToDisplay = displayValue ?? '';\n    internalState.current.value = null;\n    internalState.current.atBound = 'none';\n  } else {\n    const roundedValue = precisionRound(currentValue, precision);\n    internalState.current.value = roundedValue;\n    internalState.current.atBound = getBound(roundedValue, min, max);\n    if (isControlled) {\n      valueToDisplay = displayValue ?? String(roundedValue);\n    } else {\n      valueToDisplay = String(roundedValue);\n    }\n  }\n\n  state.input.value = valueToDisplay;\n  state.input['aria-valuemin'] = min;\n  state.input['aria-valuemax'] = max;\n  state.input['aria-valuenow'] = currentValue ?? undefined;\n  state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n  state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n  state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n  state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n  state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n  state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n  state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  return state;\n};\n"]}