@fluentui/react-spinbutton 0.0.0-nightly-20220421-0418.1

package/lib/components/SpinButton/useSpinButtonStyles.js

@@ -0,0 +1,367 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useInputStyles_unstable } from '@fluentui/react-input';
+export const spinButtonClassNames = {
+  root: 'fui-SpinButton',
+  input: 'fui-SpinButton__input',
+  incrementButton: 'fui-SpinButton__incrementButton',
+  decrementButton: 'fui-SpinButton__decrementButton'
+};
+const spinButtonExtraClassNames = {
+  buttonActive: 'fui-SpinButton__button_active'
+}; // TODO(sharing) use theme values once available
+
+const horizontalSpacing = {
+  xs: '4px'
+};
+
+const useRootStyles = /*#__PURE__*/__styles({
+  "base": {
+    "mc9l5x": "fwk3njj",
+    "Budl1dq": "f1sr6ibj",
+    "wkccdc": "fio9c21",
+    "i8kkvl": "f1q8lukm",
+    "Belr9w4": "f1sff6ri",
+    "z189sj": ["fhxju0i", "f1cnd47f"],
+    "qhf8xq": "f10pi13n",
+    "B4j52fo": "fre7gi1",
+    "Bekrc4i": ["f1358rze", "f1rvrf73"],
+    "Bn0qgzm": "fqdk4by",
+    "ibv6hh": ["f1rvrf73", "f1358rze"],
+    "gd4gdo": "f1ngn1p8",
+    "Ftih45": "f1wl9k8s",
+    "Bcvre1j": "fyl8oag",
+    "Brfgrao": "f1j7ml58",
+    "Bciustq": "ffi060y",
+    "mdwyqc": ["f1f351id", "f1fzr1x6"],
+    "lawp4y": "fchca7p",
+    "Fbdkly": ["f1fzr1x6", "f1f351id"],
+    "Budzafs": ["f1pl9g23", "f3orl67"],
+    "r59vdv": ["f3orl67", "f1pl9g23"],
+    "n07z76": ["f2gop1n", "f11nyhth"],
+    "ck0cow": ["f11nyhth", "f2gop1n"],
+    "Cgzuqd": "fxuihnu",
+    "Ehzi8l": "fzjygzn",
+    "cnmfks": ["f15lyva8", "f1cvlmu2"],
+    "Bj55yzk": "fw2wsqs",
+    "jc51t6": ["f1cvlmu2", "f15lyva8"],
+    "Bunff0j": "f17tkotb"
+  },
+  "outline": {
+    "B0qfbqy": "f1fjh9ub",
+    "B4f6apu": ["ff9c942", "f6rdg5o"],
+    "y0oebl": "fdw6hkg",
+    "uvfttm": ["f6rdg5o", "ff9c942"],
+    "Bdkvgpv": "f163fonl",
+    "m598lv": ["f1yq6w5o", "f1jpmc5p"],
+    "qa3bma": "f11yjt3y",
+    "Bbv0w2i": ["f1jpmc5p", "f1yq6w5o"],
+    "Bq4z7u6": "f10tv6oz",
+    "Bk5zm6e": ["f16xp3sf", "f1seuxxq"],
+    "Bqjgrrk": "fchs65t",
+    "Bm6vgfq": ["f1seuxxq", "f16xp3sf"]
+  },
+  "outlineInteractive": {
+    "Bo3r8zu": "f1w2y1rc",
+    "Hpvxnh": ["f1gofhvl", "f18htlvq"],
+    "Bx11ytk": "ffcnd28",
+    "B1rg0w0": ["f18htlvq", "f1gofhvl"],
+    "Bsg1tlv": "f6lmxco",
+    "Brjw370": ["fcoc0mf", "f15r4wkl"],
+    "xcfy85": "f1ipdth8",
+    "Bcc6kan": ["f15r4wkl", "fcoc0mf"]
+  },
+  "underline": {
+    "Budzafs": ["fw32bj", "fziivox"],
+    "r59vdv": ["fziivox", "fw32bj"],
+    "n07z76": ["feccbv4", "f1jqz70h"],
+    "ck0cow": ["f1jqz70h", "feccbv4"],
+    "y0oebl": "fdw6hkg",
+    "qa3bma": "f11yjt3y",
+    "Bqjgrrk": "fchs65t"
+  },
+  "underlineInteractive": {
+    "Bx11ytk": "ffcnd28",
+    "xcfy85": "f1ipdth8"
+  },
+  "filled": {
+    "B0qfbqy": "f1fjh9ub",
+    "B4f6apu": ["ff9c942", "f6rdg5o"],
+    "y0oebl": "fdw6hkg",
+    "uvfttm": ["f6rdg5o", "ff9c942"],
+    "Bdkvgpv": "f163fonl",
+    "m598lv": ["f1yq6w5o", "f1jpmc5p"],
+    "qa3bma": "f11yjt3y",
+    "Bbv0w2i": ["f1jpmc5p", "f1yq6w5o"],
+    "Bq4z7u6": "f7dgwnz",
+    "Bk5zm6e": ["f1edeodt", "fszsv3f"],
+    "Bqjgrrk": "f1172wan",
+    "Bm6vgfq": ["fszsv3f", "f1edeodt"]
+  },
+  "filledInteractive": {
+    "B05mzqr": "f1xqt08",
+    "tb9y6h": ["fzt5lgo", "f8tv3r9"],
+    "jcehpj": "fyhrops",
+    "B23o0hn": ["f8tv3r9", "fzt5lgo"]
+  },
+  "disabled": {
+    "Bjwas2f": "fg455y9",
+    "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
+    "Bxeuatn": "f1cwzwz",
+    "n51gp8": ["f14g86mu", "f1rvyvqg"]
+  },
+  "outlineDisabled": {
+    "B0qfbqy": "f1fjh9ub",
+    "B4f6apu": ["ff9c942", "f6rdg5o"],
+    "y0oebl": "fdw6hkg",
+    "uvfttm": ["f6rdg5o", "ff9c942"],
+    "Bdkvgpv": "f163fonl",
+    "m598lv": ["f1yq6w5o", "f1jpmc5p"],
+    "qa3bma": "f11yjt3y",
+    "Bbv0w2i": ["f1jpmc5p", "f1yq6w5o"],
+    "Bq4z7u6": "f1a0lfh7",
+    "Bk5zm6e": ["f1p2ejm6", "fmzytvz"],
+    "Bqjgrrk": "fas2e61",
+    "Bm6vgfq": ["fmzytvz", "f1p2ejm6"],
+    "Budzafs": ["f1pl9g23", "f3orl67"],
+    "r59vdv": ["f3orl67", "f1pl9g23"],
+    "n07z76": ["f2gop1n", "f11nyhth"],
+    "ck0cow": ["f11nyhth", "f2gop1n"]
+  },
+  "underlineDisabled": {
+    "y0oebl": "fdw6hkg",
+    "qa3bma": "f11yjt3y",
+    "Bqjgrrk": "f1syzi09"
+  },
+  "filledDisabled": {
+    "B0qfbqy": "f1fjh9ub",
+    "B4f6apu": ["ff9c942", "f6rdg5o"],
+    "y0oebl": "fdw6hkg",
+    "uvfttm": ["f6rdg5o", "ff9c942"],
+    "Bdkvgpv": "f163fonl",
+    "m598lv": ["f1yq6w5o", "f1jpmc5p"],
+    "qa3bma": "f11yjt3y",
+    "Bbv0w2i": ["f1jpmc5p", "f1yq6w5o"],
+    "Bq4z7u6": "fd35vam",
+    "Bk5zm6e": ["f1n48vvu", "f7wchoe"],
+    "Bqjgrrk": "f1syzi09",
+    "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;}", ".f15lyva8:after{right:0;}", ".f1cvlmu2:after{left:0;}", ".fw2wsqs:after{bottom:0;}", ".f17tkotb: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;}}"]
+});
+
+const useInputStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Br312pm": "fwpfdsa",
+    "Bw0ie65": "f1e2fz10",
+    "Ijaq50": "f16hsg94",
+    "nk6f5a": "fcu02xx",
+    "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;}"]
+});
+
+const useButtonStyles = /*#__PURE__*/__styles({
+  "base": {
+    "mc9l5x": "ftuwxu6",
+    "a9b677": "fq4mcun",
+    "Bt984gj": "f122n59",
+    "Brf1p80": "f4d9j23",
+    "B4j52fo": "fre7gi1",
+    "Bekrc4i": ["f1358rze", "f1rvrf73"],
+    "Bn0qgzm": "fqdk4by",
+    "ibv6hh": ["f1rvrf73", "f1358rze"],
+    "qhf8xq": "f1euv43f",
+    "oeaueh": "f1s6fcnf",
+    "Bqenvij": "f1l02sjl",
+    "Bfnh471": "fe4wpbb",
+    "zwc60e": "fb0xa7e",
+    "ezr58z": "f9f7vaa"
+  },
+  "incrementButton": {
+    "Br312pm": "fd46tj4",
+    "Bw0ie65": "fz1yyy6",
+    "Ijaq50": "f16hsg94",
+    "nk6f5a": "f88nxoq",
+    "Bbmb7ep": ["f1krrbdw", "f1deotkl"],
+    "Beyfa6y": ["f1deotkl", "f1krrbdw"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["f1ozlkrg", "f10ostut"]
+  },
+  "incrementButtonSmall": {
+    "z8tnut": "f1khb0e9",
+    "z189sj": ["fwiuce9", "f15vdbe4"],
+    "Byoj8tv": "f1ov4xf1",
+    "uwmqm3": ["f15vdbe4", "fwiuce9"]
+  },
+  "incrementButtonMedium": {
+    "z8tnut": "f10ra9hq",
+    "z189sj": ["fwiuce9", "f15vdbe4"],
+    "Byoj8tv": "f1brlhvm",
+    "uwmqm3": ["f15vdbe4", "fwiuce9"]
+  },
+  "decrementButton": {
+    "Br312pm": "fd46tj4",
+    "Bw0ie65": "fz1yyy6",
+    "Ijaq50": "faunodf",
+    "nk6f5a": "fcu02xx",
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f1deotkl", "f1krrbdw"],
+    "B7oj6ja": ["f10ostut", "f1ozlkrg"],
+    "Btl43ni": ["f1ozlkrg", "f10ostut"]
+  },
+  "decrementButtonSmall": {
+    "z8tnut": "f1nbblvp",
+    "z189sj": ["fwiuce9", "f15vdbe4"],
+    "Byoj8tv": "f1jnq6q7",
+    "uwmqm3": ["f15vdbe4", "fwiuce9"]
+  },
+  "decrementButtonMedium": {
+    "z8tnut": "f1sl3k7w",
+    "z189sj": ["fwiuce9", "f15vdbe4"],
+    "Byoj8tv": "f1y2xyjm",
+    "uwmqm3": ["f15vdbe4", "fwiuce9"]
+  },
+  "outline": {
+    "De3pzq": "f3rmtva",
+    "sj55zd": "f11d4kpn",
+    "r4wkhp": "f1no7wuu",
+    "B95qlz1": "f1bifk9c",
+    "p743kt": "fp1zg4s",
+    "B7xitij": "fo6hitd",
+    "B6siaa6": "f1wiab75",
+    "Ba9qmo4": "fj9zm5z",
+    "Dyrjrp": "f1cqwcg4"
+  },
+  "underline": {
+    "De3pzq": "f3rmtva",
+    "sj55zd": "f11d4kpn",
+    "r4wkhp": "f1no7wuu",
+    "B95qlz1": "f1bifk9c",
+    "p743kt": "fp1zg4s",
+    "B7xitij": "fo6hitd",
+    "B6siaa6": "f1wiab75",
+    "Ba9qmo4": "fj9zm5z",
+    "Dyrjrp": "f1cqwcg4"
+  },
+  "filledDarker": {
+    "De3pzq": "f3rmtva",
+    "sj55zd": "f11d4kpn",
+    "r4wkhp": "f1no7wuu",
+    "B95qlz1": "fwwxidx",
+    "p743kt": "fp1zg4s",
+    "B7xitij": "f14i52sd",
+    "B6siaa6": "f1wiab75",
+    "Ba9qmo4": "fwry2ka",
+    "Dyrjrp": "f1cqwcg4"
+  },
+  "filledLighter": {
+    "De3pzq": "f3rmtva",
+    "sj55zd": "f11d4kpn",
+    "r4wkhp": "f1no7wuu",
+    "B95qlz1": "f1yywxnv",
+    "drw0cw": "fzaa11h",
+    "idzz8t": "f4fpmm9",
+    "Dyrjrp": "f1cqwcg4"
+  }
+}, {
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fq4mcun{width:24px;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1euv43f{position:absolute;}", ".f1s6fcnf{outline-style:none;}", ".f1l02sjl{height:100%;}", ".fe4wpbb:enabled:hover{cursor:pointer;}", ".f9f7vaa:disabled{cursor:not-allowed;}", ".fd46tj4{grid-column-start:2;}", ".fz1yyy6{grid-column-end:3;}", ".f16hsg94{grid-row-start:1;}", ".f88nxoq{grid-row-end:2;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ozlkrg{border-top-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1khb0e9{padding-top:3px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}", ".f1ov4xf1{padding-bottom:0px;}", ".f10ra9hq{padding-top:4px;}", ".f1brlhvm{padding-bottom:1px;}", ".faunodf{grid-row-start:2;}", ".fcu02xx{grid-row-end:3;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1nbblvp{padding-top:0px;}", ".f1jnq6q7{padding-bottom:3px;}", ".f1sl3k7w{padding-top:1px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f3rmtva{background-color:transparent;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1no7wuu:enabled:hover{color:var(--colorNeutralForeground3Hover);}", ".f1bifk9c:enabled:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fp1zg4s:enabled:active{color:var(--colorNeutralForeground3Pressed);}", ".fo6hitd:enabled:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1wiab75:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForeground3Pressed);}", ".fj9zm5z:enabled.fui-SpinButton__button_active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1cqwcg4:disabled{color:var(--colorNeutralForegroundDisabled);}", ".fwwxidx:enabled:hover{background-color:var(--colorNeutralBackground3Hover);}", ".f14i52sd:enabled:active{background-color:var(--colorNeutralBackground3Pressed);}", ".fwry2ka:enabled.fui-SpinButton__button_active{background-color:var(--colorNeutralBackground3Pressed);}", ".f1yywxnv:enabled:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fzaa11h:enabled:active,.fzaa11h.fui-SpinButton__button_active{color:var(--colorNeutralForeground3Pressed);}", ".f4fpmm9:enabled:active,.f4fpmm9.fui-SpinButton__button_active{background-color:var(--colorNeutralBackground1Pressed);}"],
+  "a": [".fb0xa7e:active{outline-style:none;}"]
+}); // Cannot just disable button as they need to remain
+// exposed to ATs like screen readers.
+
+
+const useButtonDisabledStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bceei9c": "fdrzuqr",
+    "eoavqd": "fphbwmw"
+  },
+  "outline": {
+    "sj55zd": "f1s2aq7o",
+    "r4wkhp": "few7wvn",
+    "B95qlz1": "f110wuh6",
+    "p743kt": "f9s4mys",
+    "B7xitij": "f10404rc",
+    "B6siaa6": "fwzu9cz",
+    "Ba9qmo4": "f1snwkb6"
+  },
+  "underline": {
+    "sj55zd": "f1s2aq7o",
+    "r4wkhp": "few7wvn",
+    "B95qlz1": "f110wuh6",
+    "p743kt": "f9s4mys",
+    "B7xitij": "f10404rc",
+    "B6siaa6": "fwzu9cz",
+    "Ba9qmo4": "f1snwkb6"
+  },
+  "filledDarker": {
+    "sj55zd": "f1s2aq7o",
+    "r4wkhp": "few7wvn",
+    "B95qlz1": "f110wuh6",
+    "p743kt": "f9s4mys",
+    "B7xitij": "f10404rc",
+    "B6siaa6": "fwzu9cz",
+    "Ba9qmo4": "f1snwkb6"
+  },
+  "filledLighter": {
+    "sj55zd": "f1s2aq7o",
+    "r4wkhp": "few7wvn",
+    "B95qlz1": "f110wuh6",
+    "p743kt": "f9s4mys",
+    "B7xitij": "f10404rc",
+    "B6siaa6": "fwzu9cz",
+    "Ba9qmo4": "f1snwkb6"
+  }
+}, {
+  "d": [".fdrzuqr{cursor:not-allowed;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".few7wvn:enabled:hover{color:var(--colorNeutralForegroundDisabled);}", ".f110wuh6:enabled:hover{background-color:transparent;}", ".f9s4mys:enabled:active{color:var(--colorNeutralForegroundDisabled);}", ".f10404rc:enabled:active{background-color:transparent;}", ".fwzu9cz:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForegroundDisabled);}", ".f1snwkb6:enabled.fui-SpinButton__button_active{background-color:transparent;}"],
+  "h": [".fphbwmw:hover{cursor:not-allowed;}"]
+});
+/**
+ * Apply styling to the SpinButton slots based on the state
+ */
+
+
+export const useSpinButtonStyles_unstable = state => {
+  const {
+    appearance,
+    atBound,
+    size
+  } = state;
+  const disabled = state.input.disabled;
+  const filled = appearance.startsWith('filled');
+  const rootStyles = useRootStyles();
+  const buttonStyles = useButtonStyles();
+  const buttonDisabledStyles = useButtonDisabledStyles();
+  const inputStyles = useInputStyles(); // Grab the root className here so we can be sure to merge is last
+
+  const rootClassName = state.root.className;
+  state.root.className = undefined; // Reuse react-input's styles without re-using the Input component.
+
+  useInputStyles_unstable({
+    size,
+    appearance,
+    input: state.input,
+    root: state.root,
+    components: {
+      root: 'span',
+      input: 'input',
+      contentBefore: 'span',
+      contentAfter: 'span'
+    }
+  });
+  state.root.className = mergeClasses(state.root.className, // Get the classes from useInputStyles_unstable
+  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 = mergeClasses(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 = mergeClasses(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.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);
+  return state;
+};
+//# sourceMappingURL=useSpinButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"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\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    // TODO: change this to `::after`. Needs to be changed at the same time as react-input.\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/"}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButton_unstable, } from './SpinButton';
+export type { SpinButtonOnChangeData, SpinButtonChangeEvent, SpinButtonCommons, SpinButtonProps, SpinButtonSlots, SpinButtonState, SpinButtonSpinState, SpinButtonBounds, SpinButtonStrings, } from './SpinButton';

package/lib/index.js

@@ -0,0 +1,2 @@
+export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButton_unstable } from './SpinButton';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,UADF,EAEE,yBAFF,EAGE,oBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP","sourcesContent":["export {\n  SpinButton,\n  renderSpinButton_unstable,\n  spinButtonClassNames,\n  useSpinButtonStyles_unstable,\n  useSpinButton_unstable,\n} from './SpinButton';\nexport type {\n  SpinButtonOnChangeData,\n  SpinButtonChangeEvent,\n  SpinButtonCommons,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonBounds,\n  SpinButtonStrings,\n} from './SpinButton';\n"],"sourceRoot":"../src/"}

package/lib/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.18.1"
+    }
+  ]
+}

package/lib/utils/clamp.d.ts

@@ -0,0 +1 @@
+export declare const clampWhenInRange: (oldValue: number, newValue: number, min?: number | undefined, max?: number | undefined) => number;

package/lib/utils/clamp.js

@@ -0,0 +1,31 @@
+export 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) {
+    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());
+      }
+
+      return newValue;
+    }
+
+    nextValue = Math.max(min, nextValue);
+  }
+
+  if (max !== undefined && oldValue <= max) {
+    nextValue = Math.min(max, nextValue);
+  }
+
+  return nextValue;
+};
+//# sourceMappingURL=clamp.js.map

package/lib/utils/clamp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/clamp.ts"],"names":[],"mappings":"AAAA,OAAO,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","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/"}

package/lib/utils/getBound.d.ts

@@ -0,0 +1,2 @@
+import type { SpinButtonBounds } from '../SpinButton';
+export declare const getBound: (value: number, min?: number | undefined, max?: number | undefined) => SpinButtonBounds;

package/lib/utils/getBound.js

@@ -0,0 +1,14 @@
+export const getBound = (value, min, max) => {
+  if (min !== undefined && value === min) {
+    if (max === min) {
+      return 'both';
+    }
+
+    return 'min';
+  } else if (max !== undefined && value === max) {
+    return 'max';
+  }
+
+  return 'none';
+};
+//# sourceMappingURL=getBound.js.map

package/lib/utils/getBound.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/getBound.ts"],"names":[],"mappings":"AAEA,OAAO,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","sourcesContent":["import type { SpinButtonBounds } from '../SpinButton';\n\nexport const getBound = (value: number, min?: number, max?: number): SpinButtonBounds => {\n  if (min !== undefined && value === min) {\n    if (max === min) {\n      return 'both';\n    }\n    return 'min';\n  } else if (max !== undefined && value === max) {\n    return 'max';\n  }\n\n  return 'none';\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './clamp';
+export * from './getBound';
+export * from './precision';

package/lib/utils/index.js

@@ -0,0 +1,4 @@
+export * from './clamp';
+export * from './getBound';
+export * from './precision';
+//# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

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

package/lib/utils/precision.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Calculates a number's precision based on the number of trailing
+ * zeros if the number does not have a decimal indicated by a negative
+ * precision. Otherwise, it calculates the number of digits after
+ * the decimal point indicated by a positive precision.
+ * @param value - the value to determine the precision of
+ */
+export declare function calculatePrecision(value: number | string): number;
+/**
+ * Rounds a number to a certain level of precision. Accepts negative precision.
+ * @param value - The value that is being rounded.
+ * @param precision - The number of decimal places to round the number to
+ */
+export declare function precisionRound(value: number, precision: number, base?: number): number;

package/lib/utils/precision.js

@@ -0,0 +1,41 @@
+/**
+ * Calculates a number's precision based on the number of trailing
+ * zeros if the number does not have a decimal indicated by a negative
+ * precision. Otherwise, it calculates the number of digits after
+ * the decimal point indicated by a positive precision.
+ * @param value - the value to determine the precision of
+ */
+export function calculatePrecision(value) {
+  /**
+   * Group 1:
+   * [1-9]([0]+$) matches trailing zeros
+   * Group 2:
+   * \.([0-9]*) matches all digits after a decimal point.
+   */
+  const groups = /[1-9]([0]+$)|\.([0-9]*)/.exec(String(value));
+
+  if (!groups) {
+    return 0;
+  }
+
+  if (groups[1]) {
+    return -groups[1].length;
+  }
+
+  if (groups[2]) {
+    return groups[2].length;
+  }
+
+  return 0;
+}
+/**
+ * Rounds a number to a certain level of precision. Accepts negative precision.
+ * @param value - The value that is being rounded.
+ * @param precision - The number of decimal places to round the number to
+ */
+
+export function precisionRound(value, precision, base = 10) {
+  const exp = Math.pow(base, precision);
+  return Math.round(value * exp) / exp;
+}
+//# sourceMappingURL=precision.js.map

package/lib/utils/precision.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/precision.ts"],"names":[],"mappings":"AAAA;;;;;;AAMG;AACH,OAAM,SAAU,kBAAV,CAA6B,KAA7B,EAAmD;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;AAED;;;;AAIG;;AACH,OAAM,SAAU,cAAV,CAAyB,KAAzB,EAAwC,SAAxC,EAA2D,IAAA,GAAe,EAA1E,EAA4E;AAChF,QAAM,GAAG,GAAG,IAAI,CAAC,GAAL,CAAS,IAAT,EAAe,SAAf,CAAZ;AACA,SAAO,IAAI,CAAC,KAAL,CAAW,KAAK,GAAG,GAAnB,IAA0B,GAAjC;AACD","sourcesContent":["/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value: number | string): number {\n  /**\n   * Group 1:\n   * [1-9]([0]+$) matches trailing zeros\n   * Group 2:\n   * \\.([0-9]*) matches all digits after a decimal point.\n   */\n  const groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n  if (!groups) {\n    return 0;\n  }\n  if (groups[1]) {\n    return -groups[1].length;\n  }\n  if (groups[2]) {\n    return groups[2].length;\n  }\n  return 0;\n}\n\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value: number, precision: number, base: number = 10): number {\n  const exp = Math.pow(base, precision);\n  return Math.round(value * exp) / exp;\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/SpinButton.d.ts

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

package/lib-commonjs/SpinButton.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/SpinButton/index"), exports);
+//# sourceMappingURL=SpinButton.js.map

package/lib-commonjs/SpinButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SpinButton.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SpinButton/index';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,6 @@
+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>;