@fluentui/react-spinbutton 9.0.0-beta.7 → 9.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useMergedEventCallbacks,\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 { spinButtonDefaultStrings } from './SpinButton.strings';\nimport { calculatePrecision, precisionRound, getBound, clampWhenInRange } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\n\ntype InternalState = {\n  value: number;\n  spinState: SpinButtonSpinState;\n  spinTime: number;\n  spinDelay: number;\n  previousTextValue?: string;\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: ['onChange', 'size', 'min', 'max'],\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    inputType = 'all',\n    strings = spinButtonDefaultStrings,\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  const [textValue, setTextValue] = React.useState(\n    value !== undefined && displayValue !== undefined ? displayValue : String(currentValue),\n  );\n  const [spinState, setSpinState] = React.useState<SpinButtonSpinState>('rest');\n  const [atBound, setAtBound] = React.useState<SpinButtonBounds>('none');\n\n  const internalState = React.useRef<InternalState>({\n    value: currentValue,\n    spinState,\n    spinTime: 0,\n    spinDelay: DEFAULT_SPIN_DELAY_MS,\n  });\n\n  const state: SpinButtonState = {\n    size,\n    appearance,\n    spinState,\n    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: 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': strings.incrementButtonLabel.replace('{step}', step.toString()),\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': strings.decrementButtonLabel.replace('{step}', step.toString()),\n      },\n    }),\n  };\n\n  const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n  React.useEffect(() => {\n    let newTextValue;\n    if (value !== undefined) {\n      const roundedValue = precisionRound(value, precision);\n      newTextValue = displayValue ?? String(roundedValue);\n      internalState.current.value = roundedValue;\n      setAtBound(getBound(roundedValue, min, max));\n    } else {\n      newTextValue = String(precisionRound(currentValue, precision));\n      internalState.current.value = currentValue;\n    }\n    setTextValue(newTextValue);\n  }, [value, displayValue, currentValue, precision, setAtBound, min, max]);\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (inputType === 'spinners-only') {\n      return;\n    }\n\n    if (!internalState.current.previousTextValue) {\n      internalState.current.previousTextValue = textValue;\n    }\n\n    const newValue = e.target.value;\n    setTextValue(newValue);\n  };\n\n  const stepValue = (e: SpinButtonChangeEvent, direction: 'up' | 'down' | 'upPage' | 'downPage') => {\n    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n    const val = internalState.current.value;\n\n    let newValue = val + stepSize * dir;\n    if (!Number.isNaN(newValue)) {\n      newValue = clampWhenInRange(val, 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 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    if (e.key === Keys.ArrowUp) {\n      stepValue(e, 'up');\n      setSpinState('up');\n    } else if (e.key === Keys.ArrowDown) {\n      stepValue(e, 'down');\n      setSpinState('down');\n    } else if (e.key === Keys.PageUp) {\n      e.preventDefault();\n      stepValue(e, 'upPage');\n      setSpinState('up');\n    } else if (e.key === Keys.PageDown) {\n      e.preventDefault();\n      stepValue(e, 'downPage');\n      setSpinState('down');\n    } else if (!e.shiftKey && e.key === Keys.Home && min !== undefined) {\n      commit(e, min);\n      setSpinState('down');\n    } else if (!e.shiftKey && e.key === Keys.End && max !== undefined) {\n      commit(e, max);\n      setSpinState('up');\n    } else if (e.key === Keys.Enter) {\n      commit(e, currentValue, textValue);\n      setSpinState('rest');\n    } else if (e.key === Keys.Escape) {\n      if (internalState.current.previousTextValue) {\n        setTextValue(internalState.current.previousTextValue);\n        internalState.current.previousTextValue = undefined;\n      }\n      setSpinState('rest');\n    } else {\n      setSpinState('rest');\n    }\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    setSpinState('rest');\n  };\n\n  const commit = (e: SpinButtonChangeEvent, newValue?: number, 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      internalState.current.value = roundedValue;\n      setAtBound(getBound(roundedValue, min, max));\n    }\n\n    if (valueChanged || displayValueChanged) {\n      onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n    }\n  };\n\n  state.input.value = textValue;\n  state.input['aria-valuemin'] = min;\n  state.input['aria-valuemax'] = max;\n  state.input['aria-valuenow'] = currentValue;\n  state.input['aria-valuetext'] = (value !== undefined && displayValue) || undefined;\n  state.input.onChange = useMergedEventCallbacks(state.input.onChange, handleInputChange);\n  state.input.onBlur = useMergedEventCallbacks(state.input.onBlur, handleBlur);\n  state.input.onKeyDown = useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);\n  state.input.onKeyUp = useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  state.incrementButton.onMouseDown = useMergedEventCallbacks(\n    handleIncrementMouseDown,\n    state.incrementButton.onMouseDown,\n  );\n  state.incrementButton.onMouseUp = useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.incrementButton.onMouseLeave = useMergedEventCallbacks(\n    state.incrementButton.onMouseLeave,\n    handleStepMouseUpOrLeave,\n  );\n\n  state.decrementButton.onMouseDown = useMergedEventCallbacks(\n    handleDecrementMouseDown,\n    state.decrementButton.onMouseDown,\n  );\n  state.decrementButton.onMouseUp = useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.decrementButton.onMouseLeave = useMergedEventCallbacks(\n    state.decrementButton.onMouseLeave,\n    handleStepMouseUpOrLeave,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/SpinButton/useSpinButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  resolveShorthand,\n  useControllableState,\n  useMergedEventCallbacks,\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: 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 = useMergedEventCallbacks(state.input.onChange, handleInputChange);\n  state.input.onBlur = useMergedEventCallbacks(state.input.onBlur, handleBlur);\n  state.input.onKeyDown = useMergedEventCallbacks(state.input.onKeyDown, handleKeyDown);\n  state.input.onKeyUp = useMergedEventCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  state.incrementButton.onMouseDown = useMergedEventCallbacks(\n    handleIncrementMouseDown,\n    state.incrementButton.onMouseDown,\n  );\n  state.incrementButton.onMouseUp = useMergedEventCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.incrementButton.onMouseLeave = useMergedEventCallbacks(\n    state.incrementButton.onMouseLeave,\n    handleStepMouseUpOrLeave,\n  );\n\n  state.decrementButton.onMouseDown = useMergedEventCallbacks(\n    handleDecrementMouseDown,\n    state.decrementButton.onMouseDown,\n  );\n  state.decrementButton.onMouseUp = useMergedEventCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.decrementButton.onMouseLeave = useMergedEventCallbacks(\n    state.decrementButton.onMouseLeave,\n    handleStepMouseUpOrLeave,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js

@@ -19,10 +19,6 @@ exports.spinButtonClassNames = {
 };
 const spinButtonExtraClassNames = {
   buttonActive: 'fui-SpinButton__button_active'
-}; // TODO(sharing) use theme values once available
-
-const horizontalSpacing = {
-  xs: '4px'
 };
 
 const useRootStyles = /*#__PURE__*/react_1.__styles({
@@ -30,7 +26,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "mc9l5x": "fwk3njj",
     "Budl1dq": "f1sr6ibj",
     "wkccdc": "fio9c21",
-    "i8kkvl": "f1q8lukm",
+    "i8kkvl": "f1ufnopg",
     "Belr9w4": "f1sff6ri",
     "z189sj": ["fhxju0i", "f1cnd47f"],
     "qhf8xq": "f10pi13n",
@@ -158,10 +154,18 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "Bm6vgfq": ["f7wchoe", "f1n48vvu"]
   }
 }, {
-  "d": [".fwk3njj{display:inline-grid;}", ".f1sr6ibj{grid-template-columns:1fr 24px;}", ".fio9c21{grid-template-rows:1fr 1fr;}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1sff6ri{row-gap:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f10pi13n{position:relative;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1ngn1p8{isolation:isolate;}", ".f1wl9k8s::before{content:\"\";}", ".fyl8oag::before{box-sizing:border-box;}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".fchca7p::before{bottom:0;}", ".f1pl9g23::before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f3orl67::before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2gop1n::before{border-top-right-radius:var(--borderRadiusMedium);}", ".f11nyhth::before{border-top-left-radius:var(--borderRadiusMedium);}", ".fxuihnu::before{pointer-events:none;}", ".fzjygzn::before{z-index:10;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".fo72kxq::after{bottom:0;}", ".f5yjgw6::after{z-index:20;}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fchs65t::before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fw32bj::before{border-bottom-right-radius:0;}", ".fziivox::before{border-bottom-left-radius:0;}", ".feccbv4::before{border-top-right-radius:0;}", ".f1jqz70h::before{border-top-left-radius:0;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1syzi09::before{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".fd35vam::before{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1n48vvu::before{border-right-color:var(--colorTransparentStrokeDisabled);}", ".f7wchoe::before{border-left-color:var(--colorTransparentStrokeDisabled);}"],
-  "h": [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1xqt08:hover,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}"],
-  "a": [".f6lmxco:active,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active,:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1ipdth8:active,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f15r4wkl:active,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}"],
-  "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}"]
+  "d": [".fwk3njj{display:inline-grid;}", ".f1sr6ibj{grid-template-columns:1fr 24px;}", ".fio9c21{grid-template-rows:1fr 1fr;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1sff6ri{row-gap:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f10pi13n{position:relative;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1ngn1p8{isolation:isolate;}", ".f1wl9k8s::before{content:\"\";}", ".fyl8oag::before{box-sizing:border-box;}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".fchca7p::before{bottom:0;}", ".f1pl9g23::before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f3orl67::before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2gop1n::before{border-top-right-radius:var(--borderRadiusMedium);}", ".f11nyhth::before{border-top-left-radius:var(--borderRadiusMedium);}", ".fxuihnu::before{pointer-events:none;}", ".fzjygzn::before{z-index:10;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".fo72kxq::after{bottom:0;}", ".f5yjgw6::after{z-index:20;}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fchs65t::before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fw32bj::before{border-bottom-right-radius:0;}", ".fziivox::before{border-bottom-left-radius:0;}", ".feccbv4::before{border-top-right-radius:0;}", ".f1jqz70h::before{border-top-left-radius:0;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1syzi09::before{border-bottom-color:var(--colorTransparentStrokeDisabled);}", ".fd35vam::before{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1n48vvu::before{border-right-color:var(--colorTransparentStrokeDisabled);}", ".f7wchoe::before{border-left-color:var(--colorTransparentStrokeDisabled);}"],
+  "h": [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1xqt08:hover,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
+  "a": [".f6lmxco:active,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1ipdth8:active,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
+  "m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
+    "m": "(forced-colors: active)"
+  }]]
 });
 
 const useInputStyles = /*#__PURE__*/react_1.__styles({
@@ -170,13 +174,14 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
     "Bw0ie65": "f1e2fz10",
     "Ijaq50": "f16hsg94",
     "nk6f5a": "fcu02xx",
+    "oeaueh": "f1s6fcnf",
     "z8tnut": "f1g0x7ka",
     "z189sj": ["fhxju0i", "f1cnd47f"],
     "Byoj8tv": "f1qch9an",
     "uwmqm3": ["f1cnd47f", "fhxju0i"]
   }
 }, {
-  "d": [".fwpfdsa{grid-column-start:1;}", ".f1e2fz10{grid-column-end:2;}", ".f16hsg94{grid-row-start:1;}", ".fcu02xx{grid-row-end:3;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}"]
+  "d": [".fwpfdsa{grid-column-start:1;}", ".f1e2fz10{grid-column-end:2;}", ".f16hsg94{grid-row-start:1;}", ".fcu02xx{grid-row-end:3;}", ".f1s6fcnf{outline-style:none;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}"]
 });
 
 const useButtonStyles = /*#__PURE__*/react_1.__styles({
@@ -262,7 +267,7 @@ const useButtonStyles = /*#__PURE__*/react_1.__styles({
     "Ba9qmo4": "fj9zm5z",
     "Dyrjrp": "f1cqwcg4"
   },
-  "filledDarker": {
+  "filled-darker": {
     "De3pzq": "f3rmtva",
     "sj55zd": "f11d4kpn",
     "r4wkhp": "f1no7wuu",
@@ -273,7 +278,7 @@ const useButtonStyles = /*#__PURE__*/react_1.__styles({
     "Ba9qmo4": "fwry2ka",
     "Dyrjrp": "f1cqwcg4"
   },
-  "filledLighter": {
+  "filled-lighter": {
     "De3pzq": "f3rmtva",
     "sj55zd": "f11d4kpn",
     "r4wkhp": "f1no7wuu",
@@ -312,7 +317,7 @@ const useButtonDisabledStyles = /*#__PURE__*/react_1.__styles({
     "B6siaa6": "fwzu9cz",
     "Ba9qmo4": "f1snwkb6"
   },
-  "filledDarker": {
+  "filled-darker": {
     "sj55zd": "f1s2aq7o",
     "r4wkhp": "few7wvn",
     "B95qlz1": "f110wuh6",
@@ -321,7 +326,7 @@ const useButtonDisabledStyles = /*#__PURE__*/react_1.__styles({
     "B6siaa6": "fwzu9cz",
     "Ba9qmo4": "f1snwkb6"
   },
-  "filledLighter": {
+  "filled-lighter": {
     "sj55zd": "f1s2aq7o",
     "r4wkhp": "few7wvn",
     "B95qlz1": "f110wuh6",
@@ -343,6 +348,7 @@ const useSpinButtonStyles_unstable = state => {
   const {
     appearance,
     atBound,
+    spinState,
     size
   } = state;
   const disabled = state.input.disabled;
@@ -369,8 +375,8 @@ const useSpinButtonStyles_unstable = state => {
   });
   state.root.className = react_1.mergeClasses(state.root.className, // Get the classes from useInputStyles_unstable
   exports.spinButtonClassNames.root, rootStyles.base, appearance === 'outline' && rootStyles.outline, appearance === 'underline' && rootStyles.underline, filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, disabled && rootStyles.disabled, disabled && appearance === 'outline' && rootStyles.outlineDisabled, disabled && appearance === 'underline' && rootStyles.underlineDisabled, disabled && filled && rootStyles.filledDisabled, rootClassName);
-  state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, buttonStyles.base, buttonStyles.incrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
-  state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, buttonStyles.base, buttonStyles.decrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
+  state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, buttonStyles.base, buttonStyles.incrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
+  state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, buttonStyles.base, buttonStyles.decrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
   state.input.className = react_1.mergeClasses(exports.spinButtonClassNames.input, state.input.className, inputStyles.base);
   return state;
 };

package/lib-commonjs/components/SpinButton/useSpinButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEa,OAAA,CAAA,oBAAA,GAAwD;AACnE,EAAA,IAAI,EAAE,gBAD6D;AAEnE,EAAA,KAAK,EAAE,uBAF4D;AAGnE,EAAA,eAAe,EAAE,iCAHkD;AAInE,EAAA,eAAe,EAAE;AAJkD,CAAxD;AAOb,MAAM,yBAAyB,GAAG;AAChC,EAAA,YAAY,EAAE;AADkB,CAAlC,C,CAIA;;AACA,MAAM,iBAAiB,GAAG;AACxB,EAAA,EAAE,EAAE;AADoB,CAA1B;;AAIA,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAmIA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAUA,MAAM,eAAe,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAxB,C,CAqJA;AACA;;;AACA,MAAM,uBAAuB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhC;AAkFA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;AACtF,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,OAAd;AAAuB,IAAA;AAAvB,MAAgC,KAAtC;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,KAAN,CAAY,QAA7B;AACA,QAAM,MAAM,GAAG,UAAU,CAAC,UAAX,CAAsB,QAAtB,CAAf;AAEA,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,YAAY,GAAG,eAAe,EAApC;AACA,QAAM,oBAAoB,GAAG,uBAAuB,EAApD;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC,CARsF,CAUtF;;AACA,QAAM,aAAa,GAAG,KAAK,CAAC,IAAN,CAAW,SAAjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,SAAvB,CAZsF,CAatF;;AACA,EAAA,aAAA,CAAA,uBAAA,CAAwB;AACtB,IAAA,IADsB;AAEtB,IAAA,UAFsB;AAGtB,IAAA,KAAK,EAAE,KAAK,CAAC,KAHS;AAItB,IAAA,IAAI,EAAE,KAAK,CAAC,IAJU;AAKtB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,KAAK,EAAE,OAFG;AAGV,MAAA,aAAa,EAAE,MAHL;AAIV,MAAA,YAAY,EAAE;AAJJ;AALU,GAAxB;AAaA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,KAAK,CAAC,IAAN,CAAW,SADU,EACC;AACtB,EAAA,OAAA,CAAA,oBAAA,CAAqB,IAFA,EAGrB,UAAU,CAAC,IAHU,EAIrB,UAAU,KAAK,SAAf,IAA4B,UAAU,CAAC,OAJlB,EAKrB,UAAU,KAAK,WAAf,IAA8B,UAAU,CAAC,SALpB,EAMrB,MAAM,IAAI,UAAU,CAAC,MANA,EAOrB,CAAC,QAAD,IAAa,UAAU,KAAK,SAA5B,IAAyC,UAAU,CAAC,kBAP/B,EAQrB,CAAC,QAAD,IAAa,UAAU,KAAK,WAA5B,IAA2C,UAAU,CAAC,oBARjC,EASrB,CAAC,QAAD,IAAa,MAAb,IAAuB,UAAU,CAAC,iBATb,EAUrB,QAAQ,IAAI,UAAU,CAAC,QAVF,EAWrB,QAAQ,IAAI,UAAU,KAAK,SAA3B,IAAwC,UAAU,CAAC,eAX9B,EAYrB,QAAQ,IAAI,UAAU,KAAK,WAA3B,IAA0C,UAAU,CAAC,iBAZhC,EAarB,QAAQ,IAAI,MAAZ,IAAsB,UAAU,CAAC,cAbZ,EAcrB,aAdqB,CAAvB;AAiBA,EAAA,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,OAAA,CAAA,YAAA,CAChC,OAAA,CAAA,oBAAA,CAAqB,eADW,EAEhC,KAAK,CAAC,SAAN,KAAoB,IAApB,IAA4B,GAAG,yBAAyB,CAAC,YAAY,EAFrC,EAGhC,YAAY,CAAC,IAHmB,EAIhC,YAAY,CAAC,eAJmB,EAKhC,YAAY,CAAC,UAAD,CALoB,EAMhC,IAAI,KAAK,OAAT,GAAmB,YAAY,CAAC,oBAAhC,GAAuD,YAAY,CAAC,qBANpC,EAOhC,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,IAPlC,EAQhC,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,UAAD,CARjC,EAShC,KAAK,CAAC,eAAN,CAAsB,SATU,CAAlC;AAWA,EAAA,KAAK,CAAC,eAAN,CAAsB,SAAtB,GAAkC,OAAA,CAAA,YAAA,CAChC,OAAA,CAAA,oBAAA,CAAqB,eADW,EAEhC,KAAK,CAAC,SAAN,KAAoB,MAApB,IAA8B,GAAG,yBAAyB,CAAC,YAAY,EAFvC,EAGhC,YAAY,CAAC,IAHmB,EAIhC,YAAY,CAAC,eAJmB,EAKhC,YAAY,CAAC,UAAD,CALoB,EAMhC,IAAI,KAAK,OAAT,GAAmB,YAAY,CAAC,oBAAhC,GAAuD,YAAY,CAAC,qBANpC,EAOhC,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,IAPlC,EAQhC,CAAC,OAAO,KAAK,KAAZ,IAAqB,OAAO,KAAK,MAAlC,KAA6C,oBAAoB,CAAC,UAAD,CARjC,EAShC,KAAK,CAAC,eAAN,CAAsB,SATU,CAAlC;AAYA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,KAAlC,EAAyC,KAAK,CAAC,KAAN,CAAY,SAArD,EAAgE,WAAW,CAAC,IAA5E,CAAxB;AAEA,SAAO,KAAP;AACD,CAtEM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n  root: 'fui-SpinButton',\n  input: 'fui-SpinButton__input',\n  incrementButton: 'fui-SpinButton__incrementButton',\n  decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n  buttonActive: 'fui-SpinButton__button_active',\n};\n\n// TODO(sharing) use theme values once available\nconst horizontalSpacing = {\n  xs: '4px',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: horizontalSpacing.xs,\n    rowGap: 0,\n    paddingRight: 0,\n    position: 'relative',\n    // Remove the border styles from react-input\n    ...shorthands.border('0'),\n    isolation: 'isolate',\n\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since react-input uses that\n    // for the selector styles.\n    // Using the pseudo element allows us to place the border\n    // above content in the component which ensures the buttons\n    // line up visually with the border as expected. Without this\n    // there is a bit of a gap which can become very noticeable\n    // at high zoom or when OS zoom levels are not divisible by 2\n    // (e.g., 150% on Windows in Firefox)\n    // This is most noticeable on the \"outline\" appearance which is\n    // also the default so it feels worth the extra ceremony to get right.\n    '::before': {\n      content: '\"\"',\n      boxSizing: 'border-box',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      pointerEvents: 'none',\n      zIndex: 10,\n    },\n\n    '::after': {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      zIndex: 20,\n    },\n  },\n\n  outline: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n\n  outlineInteractive: {\n    ':hover': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  underline: {\n    '::before': {\n      ...shorthands.borderRadius(0), // corners look strange if rounded\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    },\n  },\n\n  underlineInteractive: {\n    ':hover': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\n  },\n\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      '::before': {\n        // also handles pressed border color (:active)\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      },\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  outlineDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    },\n  },\n\n  underlineDisabled: {\n    '::before': {\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n\n  filledDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    ...shorthands.padding(0),\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.border(0),\n    position: 'absolute',\n\n    outlineStyle: 'none',\n    height: '100%',\n\n    ':enabled:hover': {\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      outlineStyle: 'none',\n    },\n\n    ':disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  incrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '1',\n    gridRowEnd: '2',\n    ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n  },\n\n  // TODO: revisit these padding numbers for aligning the icon.\n  // Padding values aren't perfect.\n  // The icon doesn't align perfectly with the Figma designs.\n  // It's set in a 16x16px square but the artwork is inset from that\n  // so I've had to compute the numbers by handle.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '5px', '0px', '5px'),\n  },\n\n  incrementButtonMedium: {\n    ...shorthands.padding('4px', '5px', '1px', '5px'),\n  },\n\n  decrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '2',\n    gridRowEnd: '3',\n    ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '5px', '3px', '5px'),\n  },\n\n  decrementButtonMedium: {\n    ...shorthands.padding('1px', '5px', '4px', '5px'),\n  },\n\n  outline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  underline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  filledDarker: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground3Hover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  filledLighter: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n      },\n      [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n  base: {\n    cursor: 'not-allowed',\n\n    ':hover': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  outline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  underline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  filledDarker: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  filledLighter: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n  const { appearance, atBound, size } = state;\n  const disabled = state.input.disabled;\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const buttonStyles = useButtonStyles();\n  const buttonDisabledStyles = useButtonDisabledStyles();\n  const inputStyles = useInputStyles();\n\n  // Grab the root className here so we can be sure to merge is last\n  const rootClassName = state.root.className;\n  state.root.className = undefined;\n  // Reuse react-input's styles without re-using the Input component.\n  useInputStyles_unstable({\n    size,\n    appearance,\n    input: state.input,\n    root: state.root,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n  });\n\n  state.root.className = mergeClasses(\n    state.root.className, // Get the classes from useInputStyles_unstable\n    spinButtonClassNames.root,\n    rootStyles.base,\n    appearance === 'outline' && rootStyles.outline,\n    appearance === 'underline' && rootStyles.underline,\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    disabled && rootStyles.disabled,\n    disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n    disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n    disabled && filled && rootStyles.filledDisabled,\n    rootClassName, // Make sure any original class name is applied last\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    state.spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.incrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.incrementButton.className,\n  );\n  state.decrementButton.className = mergeClasses(\n    spinButtonClassNames.decrementButton,\n    state.spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.decrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.decrementButton.className,\n  );\n\n  state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/SpinButton/useSpinButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n  root: 'fui-SpinButton',\n  input: 'fui-SpinButton__input',\n  incrementButton: 'fui-SpinButton__incrementButton',\n  decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n  buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    paddingRight: 0,\n    position: 'relative',\n    // Remove the border styles from react-input\n    ...shorthands.border('0'),\n    isolation: 'isolate',\n\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since react-input uses that\n    // for the selector styles.\n    // Using the pseudo element allows us to place the border\n    // above content in the component which ensures the buttons\n    // line up visually with the border as expected. Without this\n    // there is a bit of a gap which can become very noticeable\n    // at high zoom or when OS zoom levels are not divisible by 2\n    // (e.g., 150% on Windows in Firefox)\n    // This is most noticeable on the \"outline\" appearance which is\n    // also the default so it feels worth the extra ceremony to get right.\n    '::before': {\n      content: '\"\"',\n      boxSizing: 'border-box',\n      position: 'absolute',\n      top: 0,\n      right: 0,\n      bottom: 0,\n      left: 0,\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      pointerEvents: 'none',\n      zIndex: 10,\n    },\n\n    '::after': {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      zIndex: 20,\n    },\n  },\n\n  outline: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n\n  outlineInteractive: {\n    ':hover': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  underline: {\n    '::before': {\n      ...shorthands.borderRadius(0), // corners look strange if rounded\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    },\n  },\n\n  underlineInteractive: {\n    ':hover': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\n  },\n\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      '::before': {\n        // also handles pressed border color (:active)\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      },\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  outlineDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius\n    },\n  },\n\n  underlineDisabled: {\n    '::before': {\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n\n  filledDisabled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    outlineStyle: 'none',\n    ...shorthands.padding(0),\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.border(0),\n    position: 'absolute',\n\n    outlineStyle: 'none',\n    height: '100%',\n\n    ':enabled:hover': {\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      outlineStyle: 'none',\n    },\n\n    ':disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  incrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '1',\n    gridRowEnd: '2',\n    ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n  },\n\n  // TODO: revisit these padding numbers for aligning the icon.\n  // Padding values aren't perfect.\n  // The icon doesn't align perfectly with the Figma designs.\n  // It's set in a 16x16px square but the artwork is inset from that\n  // so I've had to compute the numbers by handle.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '5px', '0px', '5px'),\n  },\n\n  incrementButtonMedium: {\n    ...shorthands.padding('4px', '5px', '1px', '5px'),\n  },\n\n  decrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '2',\n    gridRowEnd: '3',\n    ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '5px', '3px', '5px'),\n  },\n\n  decrementButtonMedium: {\n    ...shorthands.padding('1px', '5px', '4px', '5px'),\n  },\n\n  outline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  underline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-darker': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground3Hover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-lighter': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n      },\n      [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n  base: {\n    cursor: 'not-allowed',\n\n    ':hover': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  outline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  underline: {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  'filled-darker': {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n\n  'filled-lighter': {\n    color: tokens.colorNeutralForegroundDisabled,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      ':active': {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n  const { appearance, atBound, spinState, size } = state;\n  const disabled = state.input.disabled;\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const buttonStyles = useButtonStyles();\n  const buttonDisabledStyles = useButtonDisabledStyles();\n  const inputStyles = useInputStyles();\n\n  // Grab the root className here so we can be sure to merge is last\n  const rootClassName = state.root.className;\n  state.root.className = undefined;\n  // Reuse react-input's styles without re-using the Input component.\n  useInputStyles_unstable({\n    size,\n    appearance,\n    input: state.input,\n    root: state.root,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n  });\n\n  state.root.className = mergeClasses(\n    state.root.className, // Get the classes from useInputStyles_unstable\n    spinButtonClassNames.root,\n    rootStyles.base,\n    appearance === 'outline' && rootStyles.outline,\n    appearance === 'underline' && rootStyles.underline,\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    disabled && rootStyles.disabled,\n    disabled && appearance === 'outline' && rootStyles.outlineDisabled,\n    disabled && appearance === 'underline' && rootStyles.underlineDisabled,\n    disabled && filled && rootStyles.filledDisabled,\n    rootClassName, // Make sure any original class name is applied last\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.incrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.incrementButton.className,\n  );\n  state.decrementButton.className = mergeClasses(\n    spinButtonClassNames.decrementButton,\n    spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.decrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.decrementButton.className,\n  );\n\n  state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,UAAA;AAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,yBAAA;AAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,oBAAA;AAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,4BAAA;AAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,YAAA,CAAA,sBAAA;AAAsB;AAAtB,CAAA","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  SpinButtonCommons,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonBounds,\n  SpinButtonStrings,\n} from './SpinButton';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,UAAA;EAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,4BAAA;EAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA","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/"}

package/lib-commonjs/utils/clamp.js

@@ -3,38 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.clampWhenInRange = void 0;
-
-const clampWhenInRange = (oldValue, newValue, min, max) => {
-  // When oldValue is in the range of [min, max] clamp newValue.
-  // Don't clamp values outside this range so users get a
-  // more natural behavior. For example, if the range is [5, 15]
-  // and the user types 1 into the input we don't want to clamp
-  // the value when they next press the increment button because
-  // clamping would snap the value to 5 rather than increment to 2.
-  let nextValue = newValue;
-
-  if (min !== undefined && oldValue >= min) {
+exports.clamp = void 0;
+
+const clamp = (value, min, max) => {
+  let nextValue = value;
+
+  if (min !== undefined) {
     if (max !== undefined && min > max) {
       const error = new Error();
 
       if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.error([`"min" value "${min}" is greater than "max" value "${max}".`, '"min" must be less than or equal to "max".', `Returning value "${newValue}".`, error.stack].join());
+        console.error([`"min" value "${min}" is greater than "max" value "${max}".`, '"min" must be less than or equal to "max".', `Returning value "${value}".`, error.stack].join());
       }
 
-      return newValue;
+      return value;
     }
 
     nextValue = Math.max(min, nextValue);
   }
 
-  if (max !== undefined && oldValue <= max) {
+  if (max !== undefined) {
     nextValue = Math.min(max, nextValue);
   }
 
   return nextValue;
 };
 
-exports.clampWhenInRange = clampWhenInRange;
+exports.clamp = clamp;
 //# sourceMappingURL=clamp.js.map

package/lib-commonjs/utils/clamp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/clamp.ts"],"names":[],"mappings":";;;;;;;AAAO,MAAM,gBAAgB,GAAG,CAAC,QAAD,EAAmB,QAAnB,EAAqC,GAArC,EAAmD,GAAnD,KAA2E;AACzG;AACA;AACA;AACA;AACA;AACA;AACA,MAAI,SAAS,GAAG,QAAhB;;AACA,MAAI,GAAG,KAAK,SAAR,IAAqB,QAAQ,IAAI,GAArC,EAA0C;AACxC,QAAI,GAAG,KAAK,SAAR,IAAqB,GAAG,GAAG,GAA/B,EAAoC;AAClC,YAAM,KAAK,GAAG,IAAI,KAAJ,EAAd;;AACA,UAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC;AACA,QAAA,OAAO,CAAC,KAAR,CACE,CACE,gBAAgB,GAAG,kCAAkC,GAAG,IAD1D,EAEE,4CAFF,EAGE,oBAAoB,QAAQ,IAH9B,EAIE,KAAK,CAAC,KAJR,EAKE,IALF,EADF;AAQD;;AACD,aAAO,QAAP;AACD;;AAED,IAAA,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;AACD;;AAED,MAAI,GAAG,KAAK,SAAR,IAAqB,QAAQ,IAAI,GAArC,EAA0C;AACxC,IAAA,SAAS,GAAG,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,SAAd,CAAZ;AACD;;AAED,SAAO,SAAP;AACD,CAjCM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["export const clampWhenInRange = (oldValue: number, newValue: number, min?: number, max?: number): number => {\n  // When oldValue is in the range of [min, max] clamp newValue.\n  // Don't clamp values outside this range so users get a\n  // more natural behavior. For example, if the range is [5, 15]\n  // and the user types 1 into the input we don't want to clamp\n  // the value when they next press the increment button because\n  // clamping would snap the value to 5 rather than increment to 2.\n  let nextValue = newValue;\n  if (min !== undefined && oldValue >= min) {\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 \"${newValue}\".`,\n            error.stack,\n          ].join(),\n        );\n      }\n      return newValue;\n    }\n\n    nextValue = Math.max(min, nextValue);\n  }\n\n  if (max !== undefined && oldValue <= max) {\n    nextValue = Math.min(max, nextValue);\n  }\n\n  return nextValue;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/clamp.ts"],"names":[],"mappings":";;;;;;;AAAO,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;;AAAM,OAAA,CAAA,KAAA,GAAK,KAAL","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-commonjs/utils/getBound.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/getBound.ts"],"names":[],"mappings":";;;;;;;AAEO,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAgB,GAAhB,EAA8B,GAA9B,KAAgE;AACtF,MAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;AACtC,QAAI,GAAG,KAAK,GAAZ,EAAiB;AACf,aAAO,MAAP;AACD;;AACD,WAAO,KAAP;AACD,GALD,MAKO,IAAI,GAAG,KAAK,SAAR,IAAqB,KAAK,KAAK,GAAnC,EAAwC;AAC7C,WAAO,KAAP;AACD;;AAED,SAAO,MAAP;AACD,CAXM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","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":["utils/getBound.ts"],"names":[],"mappings":";;;;;;;AAEO,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;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","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-commonjs/utils/precision.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/precision.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;AAMG;;AACH,SAAgB,kBAAhB,CAAmC,KAAnC,EAAyD;AACvD;;;;;AAKG;AACH,QAAM,MAAM,GAAG,0BAA0B,IAA1B,CAA+B,MAAM,CAAC,KAAD,CAArC,CAAf;;AACA,MAAI,CAAC,MAAL,EAAa;AACX,WAAO,CAAP;AACD;;AACD,MAAI,MAAM,CAAC,CAAD,CAAV,EAAe;AACb,WAAO,CAAC,MAAM,CAAC,CAAD,CAAN,CAAU,MAAlB;AACD;;AACD,MAAI,MAAM,CAAC,CAAD,CAAV,EAAe;AACb,WAAO,MAAM,CAAC,CAAD,CAAN,CAAU,MAAjB;AACD;;AACD,SAAO,CAAP;AACD;;AAlBD,OAAA,CAAA,kBAAA,GAAA,kBAAA;AAoBA;;;;AAIG;;AACH,SAAgB,cAAhB,CAA+B,KAA/B,EAA8C,SAA9C,EAAiE,IAAA,GAAe,EAAhF,EAAkF;AAChF,QAAM,GAAG,GAAG,IAAI,CAAC,GAAL,CAAS,IAAT,EAAe,SAAf,CAAZ;AACA,SAAO,IAAI,CAAC,KAAL,CAAW,KAAK,GAAG,GAAnB,IAA0B,GAAjC;AACD;;AAHD,OAAA,CAAA,cAAA,GAAA,cAAA","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":["utils/precision.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;;AAMG;;AACH,SAAgB,kBAAhB,CAAmC,KAAnC,EAAyD;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;;AAlBD,OAAA,CAAA,kBAAA,GAAA,kBAAA;AAoBA;;;;AAIG;;AACH,SAAgB,cAAhB,CAA+B,KAA/B,EAA8C,SAA9C,EAAiE,IAAA,GAAe,EAAhF,EAAkF;EAChF,MAAM,GAAG,GAAG,IAAI,CAAC,GAAL,CAAS,IAAT,EAAe,SAAf,CAAZ;EACA,OAAO,IAAI,CAAC,KAAL,CAAW,KAAK,GAAG,GAAnB,IAA0B,GAAjC;AACD;;AAHD,OAAA,CAAA,cAAA,GAAA,cAAA","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/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-spinbutton",
-  "version": "9.0.0-beta.7",
+  "version": "9.0.0",
   "description": "Fluent UI React SpinButton component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "typings": "dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -21,24 +21,24 @@
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-spinbutton/src && yarn docs",
-    "storybook": "node ../../scripts/storybook/runner",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-spinbutton/src && yarn docs",
+    "storybook": "node ../../../scripts/storybook/runner",
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.4",
-    "@fluentui/react-label": "9.0.0-beta.10",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.12",
+    "@fluentui/react-label": "^9.0.4",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@griffel/react": "1.0.3",
-    "@fluentui/keyboard-keys": "9.0.0-rc.4",
-    "@fluentui/react-icons": "^2.0.166-rc.3",
-    "@fluentui/react-input": "9.0.0-beta.7",
-    "@fluentui/react-theme": "9.0.0-rc.5",
-    "@fluentui/react-utilities": "9.0.0-rc.6",
+    "@griffel/react": "^1.2.3",
+    "@fluentui/keyboard-keys": "^9.0.0",
+    "@fluentui/react-icons": "^2.0.175",
+    "@fluentui/react-input": "^9.0.4",
+    "@fluentui/react-theme": "^9.0.0",
+    "@fluentui/react-utilities": "^9.0.2",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -50,8 +50,7 @@
   "beachball": {
     "disallowedChangeTypes": [
       "major",
-      "minor",
-      "patch"
+      "prerelease"
     ]
   },
   "exports": {

package/MIGRATION.md

@@ -1,67 +0,0 @@
-# SpinButton Migration
-
-## Migration from v8
-
-- `value: string` => `value: number`. `value` is now a number rather than a string.
-- `defaultValue: string` => `defaultValue: number`. `defaultValue` is now a number.
-- `min` => `min`
-- `max` => `max`
-- `step` => `step`
-- `precision` => `precision`
-- `onChange(event: React.SyntheticEvent<HTMLElement>, newValue? string)` => `onChange(event: SpinButtonChangeEvent, value: SpinButtonOnChangeData)`
-- `onValidate` => Not supported.
-- `onIncrement` => use `onChange`.
-- `onDecrement` => use `onChange`.
-- `label` => use `Label` control with `htmlFor` and `id`.
-- `labelPosition` => use `Label` control
-- `ariaLabel` => use `aria-label` instead.
-- `ariaDescribedBy` => use `aria-describedby` instead.
-- `ariaPositionInSet` => use `aria-posinset` instead.
-- `ariaSetSize` => use `aria-setsize` instead.
-- `ariaValueNow` => remove, set internally by SpinButton
-- `ariaValueText` => remove, set internally by SpinButton
-- `iconProps` => use `Icon` control
-
-### Migrating Custom Suffixes
-
-`SpinButton` v9 introduces a new prop called `displayValue` that may be used in conjunction with `value` to display a formatted value in `SpinButton`. To display a value with a custom suffix (or prefix or an entirely different name) just provide the `displayValue` prop to your `SpinButton`:
-
-```jsx
-const [value, setValue] = React.useState(0);
-const [displayValue, setDisplayValue] = React.useState('0 cm');
-
-const onChange = (e: SpinButtonChangeEvent, data: SpinButtonOnChangeData): void => {
-  if (data.value) {
-    setValue(data.value);
-    setDisplayValue(`${data.value} cm`);
-  }
-};
-
-<SpinButton value={value} displayValue={displayValue} onChange={onChange} />;
-```
-
-### Migrating onIncrement/onDecrement
-
-`SpinButton` v9 simply provides a change handler rather than handlers for change, increment and decrement. To handle increment and decrement cases compare the incoming value with the current value:
-
-```jsx
-const [value, setValue] = React.useState(0);
-
-const onChange = (e: SpinButtonChangeEvent, data: SpinButtonOnChangeData): void => {
-  if (data.value) {
-    if (data.value > value) {
-      // onIncrement(e, data);
-    } else {
-      // Don't need an if clause here as onChange only fires when the value changes
-      // so it must be different.
-      // onDecrement(e, data);
-    }
-  }
-};
-
-<SpinButton value={value} onChange={onChange} />;
-```
-
-## Migration from v0
-
-v0/Northstar does not have a `SpinButton` equivalent so there are no migration steps.

package/lib/SpinButton.d.ts

@@ -1 +0,0 @@
-export * from './components/SpinButton/index';

package/lib/components/SpinButton/SpinButton.d.ts

@@ -1,6 +0,0 @@
-import type { SpinButtonProps } from './SpinButton.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-/**
- * A SpinButton allows someone to incrementally adjust a value in small steps.
- */
-export declare const SpinButton: ForwardRefComponent<SpinButtonProps>;

package/lib/components/SpinButton/SpinButton.strings.d.ts

@@ -1,2 +0,0 @@
-import type { SpinButtonStrings } from './SpinButton.types';
-export declare const spinButtonDefaultStrings: SpinButtonStrings;

package/lib/components/SpinButton/SpinButton.strings.js

@@ -1,5 +0,0 @@
-export const spinButtonDefaultStrings = {
-  incrementButtonLabel: 'Increment by {step}',
-  decrementButtonLabel: 'Decrement by {step}'
-};
-//# sourceMappingURL=SpinButton.strings.js.map

package/lib/components/SpinButton/SpinButton.strings.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/SpinButton/SpinButton.strings.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,wBAAwB,GAAsB;AACzD,EAAA,oBAAoB,EAAE,qBADmC;AAEzD,EAAA,oBAAoB,EAAE;AAFmC,CAApD","sourcesContent":["import type { SpinButtonStrings } from './SpinButton.types';\n\nexport const spinButtonDefaultStrings: SpinButtonStrings = {\n  incrementButtonLabel: 'Increment by {step}',\n  decrementButtonLabel: 'Decrement by {step}',\n};\n"],"sourceRoot":"../src/"}