@fluentui/react-button 0.0.0-nightly-20230502-0418.1 → 0.0.0-nightly-20230504-0417.1

package/lib/components/ToggleButton/useToggleButtonStyles.styles.js

@@ -0,0 +1,386 @@
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';
+export const toggleButtonClassNames = {
+  root: 'fui-ToggleButton',
+  icon: 'fui-ToggleButton__icon'
+};
+const useRootCheckedStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "f1nfm20t",
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1aperda",
+    zhjwy3: ["f1lxtadh", "f1akhkt"],
+    sj55zd: "f14nttnl",
+    B4j52fo: "f192inf7",
+    Bekrc4i: ["f5tn483", "f1ojsxk5"],
+    Bn0qgzm: "f1vxd6vx",
+    ibv6hh: ["f1ojsxk5", "f5tn483"],
+    D0sxk3: "fxoiby5",
+    t6yez3: "f15q0o9g",
+    Jwef8y: "f1knas48",
+    Bgoe8wy: "fvcxoqz",
+    Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
+    oetu4i: "f1xlaoq0",
+    gg5e9n: ["f1m52nbi", "f1ub3y4t"],
+    Bi91k9c: "feu1g3u",
+    iro3zm: "f141de4g",
+    b661bw: "f11v6sdu",
+    Bk6r4ia: ["f9yn8i4", "f1ajwf28"],
+    B9zn80p: "f1uwu36w",
+    Bpld233: ["f1ajwf28", "f9yn8i4"],
+    B2d53fq: "f9olfzr"
+  },
+  highContrast: {
+    Bsw6fvg: "f1rirnrt",
+    Bjwas2f: "f132fbg1",
+    Bn1d65q: ["f1ene5x0", "fzbc999"],
+    Bxeuatn: "f6jgcol",
+    n51gp8: ["fzbc999", "f1ene5x0"],
+    Bbusuzp: "f1lkg8j3",
+    ycbfsm: "fkc42ay",
+    Bqrx1nm: "fq7113v",
+    pgvf35: "ff1wgvm",
+    Bh7lczh: ["fiob0tu", "f1x4h75k"],
+    dpv3f4: "f1j6scgf",
+    Bpnjhaq: ["f1x4h75k", "fiob0tu"],
+    ze5xyy: "f4xjyn1",
+    g2kj27: "fbgcvur",
+    Bf756sw: "f1ks1yx8",
+    Bow2dr7: ["f1o6qegi", "fmxjhhp"],
+    Bvhedfk: "fcnxywj",
+    Gye4lf: ["fmxjhhp", "f1o6qegi"],
+    pc6evw: "f9ddjv3",
+    Btyszwp: "f1j4zkqc",
+    B8jyv7h: ["f1ug3svw", "f10xfdm4"],
+    l9kbep: "f4xlnbu",
+    By5cl00: ["f10xfdm4", "f1ug3svw"],
+    abbn9y: "f1jhcl7q",
+    Bw5jppy: ["fokje0w", "fpctg2v"],
+    B0tp99d: "f1yfuj62",
+    B55dcl7: ["fpctg2v", "fokje0w"],
+    G867l3: "fk75khc",
+    gdbnj: ["f90nk7n", "f16eiqta"],
+    mxns5l: "fnz8tm1",
+    o3nasb: ["f16eiqta", "f90nk7n"],
+    B7d2ofm: "fkom8lu"
+  },
+  outline: {
+    De3pzq: "f1q9pm1r",
+    g2u3we: "fj3muxo",
+    h3c5rm: ["f1akhkt", "f1lxtadh"],
+    B9xav0g: "f1aperda",
+    zhjwy3: ["f1lxtadh", "f1akhkt"],
+    B4j52fo: "fgx37oo",
+    Bekrc4i: ["f130t4y6", "f1efpmoh"],
+    Bn0qgzm: "fv51ejd",
+    ibv6hh: ["f1efpmoh", "f130t4y6"],
+    Jwef8y: "fjxutwb",
+    iro3zm: "fwiml72",
+    Brovlpu: "ftqa4ok",
+    B486eqv: "f2hkw1w",
+    B8q5s1w: "fcaw57c",
+    Bci5o5g: ["fpwd27e", "f1999bjr"],
+    n8qw10: "f1hi52o4",
+    Bdrgwmp: ["f1999bjr", "fpwd27e"]
+  },
+  primary: {
+    De3pzq: "f8w4g0q",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    sj55zd: "f1phragk",
+    Jwef8y: "f15wkkf3",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bi91k9c: "f1rq72xc",
+    iro3zm: "fnp9lpt",
+    b661bw: "f1h0usnq",
+    Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
+    B9zn80p: "f16h9ulv",
+    Bpld233: ["fx2bmrt", "fs4ktlq"],
+    B2d53fq: "f1d6v5y2"
+  },
+  secondary: {},
+  subtle: {
+    De3pzq: "fq5gl1p",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    sj55zd: "f1eryozh",
+    Jwef8y: "f1t94bn6",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bi91k9c: "fnwyq0v",
+    iro3zm: "fsv2rcd",
+    b661bw: "f1h0usnq",
+    Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
+    B9zn80p: "f16h9ulv",
+    Bpld233: ["fx2bmrt", "fs4ktlq"],
+    B2d53fq: "f1omzyqd"
+  },
+  transparent: {
+    De3pzq: "f1q9pm1r",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    sj55zd: "f1qj7y59",
+    Jwef8y: "fjxutwb",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    Bi91k9c: "f139oj5f",
+    iro3zm: "fwiml72",
+    b661bw: "f1h0usnq",
+    Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
+    B9zn80p: "f16h9ulv",
+    Bpld233: ["fx2bmrt", "fs4ktlq"],
+    B2d53fq: "f1fg1p5m"
+  }
+}, {
+  d: [".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".fcaw57c[data-fui-focus-visible]{border-top-color:var(--colorNeutralStroke1);}", ".fpwd27e[data-fui-focus-visible]{border-right-color:var(--colorNeutralStroke1);}", ".f1999bjr[data-fui-focus-visible]{border-left-color:var(--colorNeutralStroke1);}", ".f1hi52o4[data-fui-focus-visible]{border-bottom-color:var(--colorNeutralStroke1);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1eryozh{color:var(--colorNeutralForeground2Selected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
+  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
+  m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f132fbg1{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ene5x0{border-right-color:Highlight;}.fzbc999{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f6jgcol{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fzbc999{border-left-color:Highlight;}.f1ene5x0{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fiob0tu:hover{border-right-color:Highlight;}.f1x4h75k:hover{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fbgcvur:hover:active{background-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ks1yx8:hover:active{border-top-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1o6qegi:hover:active{border-right-color:Highlight;}.fmxjhhp:hover:active{border-left-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fcnxywj:hover:active{border-bottom-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fmxjhhp:hover:active{border-left-color:Highlight;}.f1o6qegi:hover:active{border-right-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1j4zkqc:focus{border-top-width:1px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ug3svw:focus{border-right-width:1px;}.f10xfdm4:focus{border-left-width:1px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f4xlnbu:focus{border-bottom-width:1px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f10xfdm4:focus{border-left-width:1px;}.f1ug3svw:focus{border-right-width:1px;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1jhcl7q:focus{border-top-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fokje0w:focus{border-right-style:solid;}.fpctg2v:focus{border-left-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1yfuj62:focus{border-bottom-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fpctg2v:focus{border-left-style:solid;}.fokje0w:focus{border-right-style:solid;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fk75khc:focus{border-top-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f90nk7n:focus{border-right-color:HighlightText;}.f16eiqta:focus{border-left-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fnz8tm1:focus{border-bottom-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f16eiqta:focus{border-left-color:HighlightText;}.f90nk7n:focus{border-right-color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkom8lu:focus{outline-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }]],
+  f: [".ftqa4ok:focus{outline-style:none;}"],
+  i: [".f2hkw1w:focus-visible{outline-style:none;}"]
+});
+const useRootDisabledStyles = /*#__PURE__*/__styles({
+  base: {
+    De3pzq: "f1bg9a2p",
+    g2u3we: "f1jj8ep1",
+    h3c5rm: ["f15xbau", "fy0fskl"],
+    B9xav0g: "f4ikngz",
+    zhjwy3: ["fy0fskl", "f15xbau"],
+    sj55zd: "f1s2aq7o",
+    Jwef8y: "f1falr9n",
+    Bgoe8wy: "f12mpcsy",
+    Bwzppfd: ["f1gwvigk", "f18rmfxp"],
+    oetu4i: "f1jnshp0",
+    gg5e9n: ["f18rmfxp", "f1gwvigk"],
+    Bi91k9c: "fvgxktp",
+    iro3zm: "f1t6o4dc",
+    b661bw: "f10ztigi",
+    Bk6r4ia: ["f1ft5sdu", "f1gzf82w"],
+    B9zn80p: "f12zbtn2",
+    Bpld233: ["f1gzf82w", "f1ft5sdu"],
+    B2d53fq: "fcvwxyo"
+  },
+  outline: {},
+  primary: {
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    b661bw: "f1h0usnq",
+    Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
+    B9zn80p: "f16h9ulv",
+    Bpld233: ["fx2bmrt", "fs4ktlq"]
+  },
+  secondary: {},
+  subtle: {
+    De3pzq: "f1c21dwh",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    Jwef8y: "fjxutwb",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    iro3zm: "fwiml72",
+    b661bw: "f1h0usnq",
+    Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
+    B9zn80p: "f16h9ulv",
+    Bpld233: ["fx2bmrt", "fs4ktlq"]
+  },
+  transparent: {
+    De3pzq: "f1c21dwh",
+    g2u3we: "f1p3nwhy",
+    h3c5rm: ["f11589ue", "f1pdflbu"],
+    B9xav0g: "f1q5o8ev",
+    zhjwy3: ["f1pdflbu", "f11589ue"],
+    Jwef8y: "fjxutwb",
+    Bgoe8wy: "f1s2uweq",
+    Bwzppfd: ["fr80ssc", "fecsdlb"],
+    oetu4i: "f1ukrpxl",
+    gg5e9n: ["fecsdlb", "fr80ssc"],
+    iro3zm: "fwiml72",
+    b661bw: "f1h0usnq",
+    Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
+    B9zn80p: "f16h9ulv",
+    Bpld233: ["fx2bmrt", "fs4ktlq"]
+  }
+}, {
+  d: [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
+  h: [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}"]
+});
+const useIconCheckedStyles = /*#__PURE__*/__styles({
+  subtleOrTransparent: {
+    sj55zd: "f1qj7y59"
+  }
+}, {
+  d: [".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"]
+});
+const usePrimaryHighContrastStyles = /*#__PURE__*/__styles({
+  base: {
+    Bsw6fvg: "f4lkoma",
+    Bjwas2f: "f1bauw5b",
+    Bn1d65q: ["fbpknfk", "fedl69w"],
+    Bxeuatn: "f15s25nd",
+    n51gp8: ["fedl69w", "fbpknfk"],
+    Bbusuzp: "f1e4kh5",
+    ycbfsm: "fg4l7m0"
+  },
+  disabled: {
+    Bjwas2f: "fg455y9",
+    Bn1d65q: ["f1rvyvqg", "f14g86mu"],
+    Bxeuatn: "f1cwzwz",
+    n51gp8: ["f14g86mu", "f1rvyvqg"],
+    Bbusuzp: "f1dcs8yz",
+    G867l3: "fjwq6ea",
+    gdbnj: ["f1lr3nhc", "f1mbxvi6"],
+    mxns5l: "fn5gmvv",
+    o3nasb: ["f1mbxvi6", "f1lr3nhc"]
+  }
+}, {
+  m: [["@media (forced-colors: active){.f4lkoma{background-color:ButtonFace;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1bauw5b{border-top-color:ButtonBorder;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fbpknfk{border-right-color:ButtonBorder;}.fedl69w{border-left-color:ButtonBorder;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f15s25nd{border-bottom-color:ButtonBorder;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fedl69w{border-left-color:ButtonBorder;}.fbpknfk{border-right-color:ButtonBorder;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1e4kh5{color:ButtonText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}", {
+    m: "(forced-colors: active)"
+  }], ["@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)"
+  }], ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fjwq6ea:focus{border-top-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fn5gmvv:focus{border-bottom-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1mbxvi6:focus{border-left-color:GrayText;}.f1lr3nhc:focus{border-right-color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+export const useToggleButtonStyles_unstable = state => {
+  const rootCheckedStyles = useRootCheckedStyles();
+  const rootDisabledStyles = useRootDisabledStyles();
+  const iconCheckedStyles = useIconCheckedStyles();
+  const primaryHighContrastStyles = usePrimaryHighContrastStyles();
+  const {
+    appearance,
+    checked,
+    disabled,
+    disabledFocusable
+  } = state;
+  state.root.className = mergeClasses(toggleButtonClassNames.root,
+  // Primary high contrast styles
+  appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,
+  // Checked styles
+  checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance],
+  // Disabled styles
+  (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
+  // User provided class name
+  state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(toggleButtonClassNames.icon, (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, state.icon.className);
+  }
+  useButtonStyles_unstable(state);
+  return state;
+};
+//# sourceMappingURL=useToggleButtonStyles.styles.js.map

package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","iro3zm","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","highContrast","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","Btyszwp","B8jyv7h","l9kbep","By5cl00","abbn9y","Bw5jppy","B0tp99d","B55dcl7","G867l3","gdbnj","mxns5l","o3nasb","B7d2ofm","outline","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","f","i","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"sources":["../../../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        ...shorthands.border('1px', 'solid', 'HighlightText'),\n        outlineColor: 'Highlight',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconCheckedStyles = makeStyles({\n  // Appearance variations\n  subtleOrTransparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n  // Do not use primary variant high contrast styles for toggle buttons\n  // otherwise there isn't enough difference between on/off states\n  base: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'ButtonFace',\n      ...shorthands.borderColor('ButtonBorder'),\n      color: 'ButtonText',\n      forcedColorAdjust: 'auto',\n    },\n  },\n\n  disabled: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const rootCheckedStyles = useRootCheckedStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n  const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Primary high contrast styles\n    appearance === 'primary' && primaryHighContrastStyles.base,\n    appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/contexts/ButtonContext.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+const buttonContext = /*#__PURE__*/React.createContext(undefined);
+const buttonContextDefaultValue = {};
+/**
+ * @internal
+ * Internal context provider used to update default values between internal components
+ */
+export const ButtonContextProvider = buttonContext.Provider;
+var _React_useContext;
+/**
+ * @internal
+ * Internal context hook used to update default values between internal components
+ */
+export const useButtonContext = () => (_React_useContext = React.useContext(buttonContext)) !== null && _React_useContext !== void 0 ? _React_useContext : buttonContextDefaultValue;
+//# sourceMappingURL=ButtonContext.js.map

package/lib/contexts/ButtonContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","_React_useContext","useButtonContext","useContext"],"sources":["../../src/contexts/ButtonContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * @internal\n * Internal context value used to update default values between internal components\n */\nexport interface ButtonContextValue {\n  size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * @internal\n * Internal context provider used to update default values between internal components\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * @internal\n * Internal context hook used to update default values between internal components\n */\nexport const useButtonContext = () => React.useContext(buttonContext) ?? buttonContextDefaultValue;\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,MAAMC,aAAA,gBAAgBD,KAAA,CAAME,aAAa,CAAiCC,SAAA;AAU1E,MAAMC,yBAAA,GAAgD,CAAC;AAEvD;;;;AAIA,OAAO,MAAMC,qBAAA,GAAwBJ,aAAA,CAAcK,QAAQ;IAMrBC,iBAAA;AAJtC;;;;AAIA,OAAO,MAAMC,gBAAA,GAAmBA,CAAA,KAAM,CAAAD,iBAAA,GAAAP,KAAA,CAAMS,UAAU,CAACR,aAAA,eAAjBM,iBAAA,cAAAA,iBAAA,GAAmCH,yBAAyB"}

package/lib/contexts/index.js

@@ -0,0 +1,2 @@
+export * from './ButtonContext';
+//# sourceMappingURL=index.js.map

package/lib/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/contexts/index.ts"],"sourcesContent":["export * from './ButtonContext';\n"],"mappings":"AAAA,cAAc"}

package/lib/index.js

@@ -0,0 +1,8 @@
+export { Button, buttonClassNames, renderButton_unstable, useButtonStyles_unstable, useButton_unstable } from './Button';
+export { CompoundButton, compoundButtonClassNames, renderCompoundButton_unstable, useCompoundButtonStyles_unstable, useCompoundButton_unstable } from './CompoundButton';
+export { MenuButton, menuButtonClassNames, renderMenuButton_unstable, useMenuButtonStyles_unstable, useMenuButton_unstable } from './MenuButton';
+export { SplitButton, renderSplitButton_unstable, splitButtonClassNames, useSplitButtonStyles_unstable, useSplitButton_unstable } from './SplitButton';
+export { ToggleButton, renderToggleButton_unstable, toggleButtonClassNames, useToggleButtonStyles_unstable, useToggleButton_unstable } from './ToggleButton';
+export { useToggleState } from './utils/index';
+export { ButtonContextProvider, useButtonContext } from './contexts/index';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"sources":["../src/index.ts"],"sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb;AAEP,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB;AAEP,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,QACjB;AAEP,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,qBAAqB,EACrBC,6BAA6B,EAC7BC,uBAAuB,QAClB;AAEP,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB;AAGP,SAASC,cAAc,QAAQ;AAE/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ"}

package/lib/utils/index.js

@@ -0,0 +1,2 @@
+export * from './useToggleState';
+//# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/utils/index.ts"],"sourcesContent":["export * from './useToggleState';\n"],"mappings":"AAAA,cAAc"}

package/lib/utils/useToggleState.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';
+export function useToggleState(props, state) {
+  const {
+    checked,
+    defaultChecked,
+    disabled,
+    disabledFocusable
+  } = props;
+  const {
+    onClick,
+    role
+  } = state.root;
+  const [checkedValue, setCheckedValue] = useControllableState({
+    state: checked,
+    defaultState: defaultChecked,
+    initialState: false
+  });
+  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
+  const onToggleClick = React.useCallback(ev => {
+    if (!disabled && !disabledFocusable) {
+      if (ev.defaultPrevented) {
+        return;
+      }
+      setCheckedValue(!checkedValue);
+    }
+  }, [checkedValue, disabled, disabledFocusable, setCheckedValue]);
+  return {
+    ...state,
+    checked: checkedValue,
+    root: {
+      ...state.root,
+      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
+      onClick: useEventCallback(mergeCallbacks(onClick, onToggleClick))
+    }
+  };
+}
+//# sourceMappingURL=useToggleState.js.map

package/lib/utils/useToggleState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"sources":["../../src/utils/useToggleState.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n  TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>,\n  TButtonState extends Pick<ButtonState, 'root'>,\n  TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>,\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n  const { checked, defaultChecked, disabled, disabledFocusable } = props;\n  const { onClick, role } = state.root;\n\n  const [checkedValue, setCheckedValue] = useControllableState({\n    state: checked,\n    defaultState: defaultChecked,\n    initialState: false,\n  });\n\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  const onToggleClick = React.useCallback(\n    ev => {\n      if (!disabled && !disabledFocusable) {\n        if (ev.defaultPrevented) {\n          return;\n        }\n\n        setCheckedValue(!checkedValue);\n      }\n    },\n    [checkedValue, disabled, disabledFocusable, setCheckedValue],\n  );\n\n  return {\n    ...state,\n\n    checked: checkedValue,\n\n    root: {\n      ...state.root,\n      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n      onClick: useEventCallback(\n        mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n      ),\n    },\n  } as TToggleButtonState;\n}\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ;AAIvE,OAAO,SAASC,eAIdC,KAAyB,EAAEC,KAAmB,EAAsB;EACpE,MAAM;IAAEC,OAAA;IAASC,cAAA;IAAgBC,QAAA;IAAUC;EAAiB,CAAE,GAAGL,KAAA;EACjE,MAAM;IAAEM,OAAA;IAASC;EAAI,CAAE,GAAGN,KAAA,CAAMO,IAAI;EAEpC,MAAM,CAACC,YAAA,EAAcC,eAAA,CAAgB,GAAGb,oBAAA,CAAqB;IAC3DI,KAAA,EAAOC,OAAA;IACPS,YAAA,EAAcR,cAAA;IACdS,YAAA,EAAc;EAChB;EAEA,MAAMC,kBAAA,GAAqBN,IAAA,KAAS,sBAAsBA,IAAA,KAAS;EAEnE,MAAMO,aAAA,GAAgBnB,KAAA,CAAMoB,WAAW,CACrCC,EAAA,IAAM;IACJ,IAAI,CAACZ,QAAA,IAAY,CAACC,iBAAA,EAAmB;MACnC,IAAIW,EAAA,CAAGC,gBAAgB,EAAE;QACvB;MACF;MAEAP,eAAA,CAAgB,CAACD,YAAA;IACnB;EACF,GACA,CAACA,YAAA,EAAcL,QAAA,EAAUC,iBAAA,EAAmBK,eAAA,CAAgB;EAG9D,OAAO;IACL,GAAGT,KAAK;IAERC,OAAA,EAASO,YAAA;IAETD,IAAA,EAAM;MACJ,GAAGP,KAAA,CAAMO,IAAI;MACb,CAACK,kBAAA,GAAqB,iBAAiB,cAAc,GAAGJ,YAAA;MACxDH,OAAA,EAASR,gBAAA,CACPF,cAAA,CAAeU,OAAA,EAA2EQ,aAAA;IAE9F;EACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-button",
-  "version": "0.0.0-nightly-20230502-0418.1",
+  "version": "0.0.0-nightly-20230504-0417.1",
   "description": "Fluent UI React Button component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,19 +28,19 @@
     "@fluentui/a11y-testing": "^0.1.0",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230502-0418.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230504-0417.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-aria": "0.0.0-nightly-20230502-0418.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20230504-0417.1",
+    "@fluentui/react-aria": "0.0.0-nightly-20230504-0417.1",
     "@fluentui/react-icons": "^2.0.196",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230502-0418.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230502-0418.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20230504-0417.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230504-0417.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20230504-0417.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230504-0417.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230504-0417.1",
     "@griffel/react": "^1.5.2",
     "@swc/helpers": "^0.4.14"
   },

package/.swcrc

@@ -1,30 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc",
-  "exclude": [
-    "/testing",
-    "/**/*.cy.ts",
-    "/**/*.cy.tsx",
-    "/**/*.spec.ts",
-    "/**/*.spec.tsx",
-    "/**/*.test.ts",
-    "/**/*.test.tsx"
-  ],
-  "jsc": {
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true,
-      "decorators": false,
-      "dynamicImport": false
-    },
-    "externalHelpers": true,
-    "transform": {
-      "react": {
-        "runtime": "classic",
-        "useSpread": true
-      }
-    },
-    "target": "es2019"
-  },
-  "minify": false,
-  "sourceMaps": true
-}