@fluentui/react-spinbutton 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/CHANGELOG.md

@@ -1,23 +1,121 @@
 # Change Log - @fluentui/react-spinbutton
 
-This log was last generated on Thu, 22 Jan 2026 16:12:46 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Jul 2026 17:34:17 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [9.72.9-experimental.component-base-hooks.20260122-49fc330360.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
+## [9.74.3-experimental.esm.20260709-49ee7a20cf.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
 
-Thu, 22 Jan 2026 16:12:46 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.5.12..@fluentui/react-spinbutton_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
+Thu, 09 Jul 2026 17:34:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.6.4..@fluentui/react-spinbutton_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
 
 ### Changes
 
-- Release 9.72.9-experimental.component-base-hooks.20260122-49fc330360 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-field to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-theme to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-utilities to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
+- Release 9.74.3-experimental.esm.20260709-49ee7a20cf ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-field to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-theme to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-utilities to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+
+## [9.6.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.6.4)
+
+Wed, 24 Jun 2026 11:09:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.6.3..@fluentui/react-spinbutton_v9.6.4)
+
+### Patches
+
+- fix: move Field control props to base hooks ([PR #36312](https://github.com/microsoft/fluentui/pull/36312) by dmytrokirpa@microsoft.com)
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
+## [9.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.6.3)
+
+Tue, 26 May 2026 09:39:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.6.2..@fluentui/react-spinbutton_v9.6.3)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.6.2)
+
+Thu, 23 Apr 2026 14:21:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.6.1..@fluentui/react-spinbutton_v9.6.2)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
+## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.6.1)
+
+Wed, 01 Apr 2026 15:52:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.6.0..@fluentui/react-spinbutton_v9.6.1)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.6.0)
+
+Mon, 30 Mar 2026 14:37:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.5.16..@fluentui/react-spinbutton_v9.6.0)
+
+### Minor changes
+
+- feat(react-spinbutton): add useSpinButtonBase_unstable hook ([PR #35907](https://github.com/microsoft/fluentui/pull/35907) by dmytrokirpa@microsoft.com)
+
+## [9.5.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.5.16)
+
+Wed, 11 Mar 2026 09:22:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.5.15..@fluentui/react-spinbutton_v9.5.16)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
+
+## [9.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.5.15)
+
+Wed, 25 Feb 2026 13:32:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.5.14..@fluentui/react-spinbutton_v9.5.15)
+
+### Patches
+
+- fix: fix read-only functionality ([PR #35761](https://github.com/microsoft/fluentui/pull/35761) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.4.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+
+## [9.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.5.14)
+
+Thu, 12 Feb 2026 10:46:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.5.13..@fluentui/react-spinbutton_v9.5.14)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.14 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+
+## [9.5.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.5.13)
+
+Thu, 22 Jan 2026 17:06:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.5.12..@fluentui/react-spinbutton_v9.5.13)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.13 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
 
 ## [9.5.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.5.12)
 

package/dist/index.d.cts

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

package/dist/index.d.ts

@@ -1,21 +1,26 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * Render the final JSX of SpinButton
  */
-export declare const renderSpinButton_unstable: (state: SpinButtonState) => JSXElement;
+export declare const renderSpinButton_unstable: (state: SpinButtonBaseState) => JSXElement;
 
 /**
  * A SpinButton allows someone to incrementally adjust a value in small steps.
  */
 export declare const SpinButton: ForwardRefComponent<SpinButtonProps>;
 
+export declare type SpinButtonBaseProps = DistributiveOmit<SpinButtonProps, 'appearance' | 'size'>;
+
+export declare type SpinButtonBaseState = DistributiveOmit<SpinButtonState, 'appearance' | 'size'>;
+
 export declare type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';
 
 export declare type SpinButtonChangeEvent = React_2.MouseEvent<HTMLButtonElement> | React_2.ChangeEvent<HTMLElement> | React_2.FocusEvent<HTMLInputElement> | React_2.KeyboardEvent<HTMLInputElement>;
@@ -164,6 +169,14 @@ export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Required
  */
 export declare const useSpinButton_unstable: (props: SpinButtonProps, ref: React_2.Ref<HTMLInputElement>) => SpinButtonState;
 
+/**
+ * Create the base state required to render SpinButton without design-specific props.
+ *
+ * @param props - props from this instance of SpinButton (without appearance/size)
+ * @param ref - reference to root HTMLElement of SpinButton
+ */
+export declare const useSpinButtonBase_unstable: (props: SpinButtonBaseProps, ref: React_2.Ref<HTMLInputElement>) => SpinButtonBaseState;
+
 /**
  * Apply styling to the SpinButton slots based on the state
  */

package/lib/SpinButton.js

@@ -1 +1 @@
-export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButton_unstable } from './components/SpinButton/index';
+export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButtonBase_unstable, useSpinButton_unstable } from "./components/SpinButton/index.js";

package/lib/SpinButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SpinButton.ts"],"sourcesContent":["export type {\n  SpinButtonBounds,\n  SpinButtonChangeEvent,\n  SpinButtonOnChangeData,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonSpinState,\n  SpinButtonState,\n} from './components/SpinButton/index';\nexport {\n  SpinButton,\n  renderSpinButton_unstable,\n  spinButtonClassNames,\n  useSpinButtonStyles_unstable,\n  useSpinButton_unstable,\n} from './components/SpinButton/index';\n"],"names":["SpinButton","renderSpinButton_unstable","spinButtonClassNames","useSpinButtonStyles_unstable","useSpinButton_unstable"],"mappings":"AASA,SACEA,UAAU,EACVC,yBAAyB,EACzBC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
+{"version":3,"sources":["../src/SpinButton.ts"],"sourcesContent":["export type {\n  SpinButtonBaseProps,\n  SpinButtonBaseState,\n  SpinButtonBounds,\n  SpinButtonChangeEvent,\n  SpinButtonOnChangeData,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonSpinState,\n  SpinButtonState,\n} from './components/SpinButton/index';\nexport {\n  SpinButton,\n  renderSpinButton_unstable,\n  spinButtonClassNames,\n  useSpinButtonStyles_unstable,\n  useSpinButtonBase_unstable,\n  useSpinButton_unstable,\n} from './components/SpinButton/index';\n"],"names":["SpinButton","renderSpinButton_unstable","spinButtonClassNames","useSpinButtonStyles_unstable","useSpinButtonBase_unstable","useSpinButton_unstable"],"mappings":"AAWA,SACEA,UAAU,EACVC,yBAAyB,EACzBC,oBAAoB,EACpBC,4BAA4B,EAC5BC,0BAA0B,EAC1BC,sBAAsB,QACjB,mCAAgC"}

package/lib/components/SpinButton/SpinButton.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useSpinButton_unstable } from './useSpinButton';
-import { renderSpinButton_unstable } from './renderSpinButton';
-import { useSpinButtonStyles_unstable } from './useSpinButtonStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useSpinButton_unstable } from "./useSpinButton.js";
+import { renderSpinButton_unstable } from "./renderSpinButton.js";
+import { useSpinButtonStyles_unstable } from "./useSpinButtonStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * A SpinButton allows someone to incrementally adjust a value in small steps.
  */ export const SpinButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SpinButton/SpinButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles.styles';\nimport type { SpinButtonProps } from './SpinButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useSpinButtonStyles_unstable')(state);\n\n  return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"],"names":["React","useSpinButton_unstable","renderSpinButton_unstable","useSpinButtonStyles_unstable","useCustomStyleHook_unstable","SpinButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/SpinButton/SpinButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles.styles';\nimport type { SpinButtonProps } from './SpinButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useSpinButtonStyles_unstable')(state);\n\n  return renderSpinButton_unstable(state);\n});\n\nSpinButton.displayName = 'SpinButton';\n"],"names":["React","useSpinButton_unstable","renderSpinButton_unstable","useSpinButtonStyles_unstable","useCustomStyleHook_unstable","SpinButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,kCAA+B;AAG5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAE7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

@@ -1 +1 @@
-import * as React from 'react';
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SpinButton/SpinButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/SpinButton/SpinButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type * 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  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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\nexport type SpinButtonBaseProps = DistributiveOmit<SpinButtonProps, 'appearance' | 'size'>;\nexport type SpinButtonBaseState = DistributiveOmit<SpinButtonState, 'appearance' | 'size'>;\n"],"names":[],"mappings":"AAiKA,WAA2F"}

package/lib/components/SpinButton/index.js

@@ -1,4 +1,4 @@
-export { SpinButton } from './SpinButton';
-export { renderSpinButton_unstable } from './renderSpinButton';
-export { useSpinButton_unstable } from './useSpinButton';
-export { spinButtonClassNames, useSpinButtonStyles_unstable } from './useSpinButtonStyles.styles';
+export { SpinButton } from "./SpinButton.js";
+export { renderSpinButton_unstable } from "./renderSpinButton.js";
+export { useSpinButtonBase_unstable, useSpinButton_unstable } from "./useSpinButton.js";
+export { spinButtonClassNames, useSpinButtonStyles_unstable } from "./useSpinButtonStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SpinButton/index.ts"],"sourcesContent":["export { SpinButton } from './SpinButton';\nexport type {\n  SpinButtonBounds,\n  SpinButtonChangeEvent,\n  SpinButtonOnChangeData,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonSpinState,\n  SpinButtonState,\n} from './SpinButton.types';\nexport { renderSpinButton_unstable } from './renderSpinButton';\nexport { useSpinButton_unstable } from './useSpinButton';\nexport { spinButtonClassNames, useSpinButtonStyles_unstable } from './useSpinButtonStyles.styles';\n"],"names":["SpinButton","renderSpinButton_unstable","useSpinButton_unstable","spinButtonClassNames","useSpinButtonStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAU1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
+{"version":3,"sources":["../src/components/SpinButton/index.ts"],"sourcesContent":["export { SpinButton } from './SpinButton';\nexport type {\n  SpinButtonBaseProps,\n  SpinButtonBaseState,\n  SpinButtonBounds,\n  SpinButtonChangeEvent,\n  SpinButtonOnChangeData,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonSpinState,\n  SpinButtonState,\n} from './SpinButton.types';\nexport { renderSpinButton_unstable } from './renderSpinButton';\nexport { useSpinButtonBase_unstable, useSpinButton_unstable } from './useSpinButton';\nexport { spinButtonClassNames, useSpinButtonStyles_unstable } from './useSpinButtonStyles.styles';\n"],"names":["SpinButton","renderSpinButton_unstable","useSpinButtonBase_unstable","useSpinButton_unstable","spinButtonClassNames","useSpinButtonStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,kBAAe;AAY1C,SAASC,yBAAyB,QAAQ,wBAAqB;AAC/D,SAASC,0BAA0B,EAAEC,sBAAsB,QAAQ,qBAAkB;AACrF,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,kCAA+B"}

package/lib/components/SpinButton/renderSpinButton.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of SpinButton
  */ export const renderSpinButton_unstable = (state)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SpinButton/renderSpinButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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): JSXElement => {\n  assertSlots<SpinButtonSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.incrementButton />\n      <state.decrementButton />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSpinButton_unstable","state","root","input","incrementButton","decrementButton"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,eAAe;0BACtB,KAACH,MAAMI,eAAe;;;AAG5B,EAAE"}
+{"version":3,"sources":["../src/components/SpinButton/renderSpinButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SpinButtonBaseState, SpinButtonSlots } from './SpinButton.types';\n\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = (state: SpinButtonBaseState): JSXElement => {\n  assertSlots<SpinButtonSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.incrementButton />\n      <state.decrementButton />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSpinButton_unstable","state","root","input","incrementButton","decrementButton"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,eAAe;0BACtB,KAACH,MAAMI,eAAe;;;AAG5B,EAAE"}