@fluentui/react-button 0.0.0-nightly-20220302-0405.1

package/lib/components/SplitButton/useSplitButtonStyles.js

@@ -0,0 +1,93 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const splitButtonClassName = 'fui-SplitButton';
+const SplitButtonClassNames = {
+  primaryActionButton: `${splitButtonClassName}-primaryActionButton`,
+  menuButton: `${splitButtonClassName}-menuButton`
+};
+
+const useFocusStyles = /*#__PURE__*/__styles({
+  "primaryActionButton": {
+    "B486eqv": "f2hkw1w",
+    "Bmrpcm6": ["fub8a6s", "f1g41uvt"],
+    "B8j0l6": ["f58hr3h", "f1u1mnrj"]
+  },
+  "menuButton": {
+    "B486eqv": "f2hkw1w",
+    "Bviepcv": ["fy9hclh", "f549e1y"],
+    "Beswxhl": ["f1g41uvt", "fub8a6s"],
+    "Ekyhi": ["f1u1mnrj", "f58hr3h"]
+  }
+}, {
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "d": ["[data-keyboard-nav] .fub8a6s:focus{border-top-right-radius:0;}", "[data-keyboard-nav] .f1g41uvt:focus{border-top-left-radius:0;}", "[data-keyboard-nav] .f58hr3h:focus{border-bottom-right-radius:0;}", "[data-keyboard-nav] .f1u1mnrj:focus{border-bottom-left-radius:0;}", "[data-keyboard-nav] .fy9hclh:focus{border-left-width:0;}", "[data-keyboard-nav] .f549e1y:focus{border-right-width:0;}"]
+});
+
+const useRootStyles = /*#__PURE__*/__styles({
+  "base": {
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "fsxf2b5",
+    "qhf8xq": "f10pi13n",
+    "ha4doy": "fmrv4ls",
+    "mfjwoh": ["fwj9yvy", "f1lzjiju"],
+    "ibxugx": ["f1a35zaw", "f1l6wyf7"],
+    "Bqvcgfq": ["f104opbk", "f147sopj"],
+    "Baxitl6": ["fxs6g7p", "f1moly3t"],
+    "zkjfwm": ["f1m1y7kk", "ff82swa"]
+  },
+  "block": {
+    "a9b677": "fly5x3f"
+  },
+  "outline": {},
+  "primary": {
+    "Bt6mj9": ["fptrtw7", "f51449u"],
+    "xhdd7j": ["f1n4yg8a", "fbebbjo"],
+    "Jxu9b0": ["fnmoi2n", "f1l3povx"]
+  },
+  "subtle": {
+    "Bt6mj9": ["fh2ci0", "f1us00qf"],
+    "xhdd7j": ["fj8butq", "fkv8iz"],
+    "Jxu9b0": ["fjmcta", "fm99moz"]
+  },
+  "transparent": {
+    "Bt6mj9": ["fh2ci0", "f1us00qf"],
+    "xhdd7j": ["fj8butq", "fkv8iz"],
+    "Jxu9b0": ["fjmcta", "fm99moz"]
+  },
+  "circular": {},
+  "rounded": {},
+  "square": {},
+  "disabled": {
+    "Bt6mj9": ["f1gu8nb8", "f7r8m4m"],
+    "xhdd7j": ["f3cl9o2", "f12vilfs"],
+    "Jxu9b0": ["f1lpnjjp", "f8nirj0"]
+  }
+}, {
+  "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fsxf2b5{-webkit-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".fwj9yvy .fui-SplitButton-primaryActionButton{border-top-right-radius:0;}", ".f1lzjiju .fui-SplitButton-primaryActionButton{border-top-left-radius:0;}", ".f1a35zaw .fui-SplitButton-primaryActionButton{border-bottom-right-radius:0;}", ".f1l6wyf7 .fui-SplitButton-primaryActionButton{border-bottom-left-radius:0;}", ".f104opbk .fui-SplitButton-menuButton{border-left-width:0;}", ".f147sopj .fui-SplitButton-menuButton{border-right-width:0;}", ".fxs6g7p .fui-SplitButton-menuButton{border-top-left-radius:0;}", ".f1moly3t .fui-SplitButton-menuButton{border-top-right-radius:0;}", ".f1m1y7kk .fui-SplitButton-menuButton{border-bottom-left-radius:0;}", ".ff82swa .fui-SplitButton-menuButton{border-bottom-right-radius:0;}", ".fly5x3f{width:100%;}", ".fptrtw7 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f51449u .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fh2ci0 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1us00qf .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1gu8nb8 .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f7r8m4m .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  "h": [".f1n4yg8a:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".fbebbjo:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fj8butq:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fkv8iz:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f3cl9o2:hover .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f12vilfs:hover .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  "a": [".fnmoi2n:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralForegroundInverted);}", ".f1l3povx:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralForegroundInverted);}", ".fjmcta:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fm99moz:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1lpnjjp:active .fui-SplitButton-primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f8nirj0:active .fui-SplitButton-primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"]
+});
+
+export const useSplitButtonStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const focusStyles = useFocusStyles();
+  const {
+    appearance,
+    block,
+    disabled,
+    disabledFocusable
+  } = state;
+  state.root.className = mergeClasses(splitButtonClassName, rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, state.root.className);
+
+  if (state.menuButton) {
+    state.menuButton.className = mergeClasses(SplitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
+  }
+
+  if (state.primaryActionButton) {
+    state.primaryActionButton.className = mergeClasses(SplitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
+  }
+
+  return state;
+};
+//# sourceMappingURL=useSplitButtonStyles.js.map

package/lib/components/SplitButton/useSplitButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/SplitButton/useSplitButtonStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP,MAAM,qBAAqB,GAAG;AAC5B,EAAA,mBAAmB,EAAE,GAAG,oBAAoB,sBADhB;AAE5B,EAAA,UAAU,EAAE,GAAG,oBAAoB;AAFP,CAA9B;;AAKA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAaA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAgHA,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,KAAd;AAAqB,IAAA,QAArB;AAA+B,IAAA;AAA/B,MAAqD,KAA3D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,oBADiC,EAEjC,UAAU,CAAC,IAFsB,EAGjC,KAAK,IAAI,UAAU,CAAC,KAHa,EAIjC,UAAU,IAAI,UAAU,CAAC,UAAD,CAJS,EAKjC,CAAC,QAAQ,IAAI,iBAAb,KAAmC,UAAU,CAAC,QALb,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,UAAV,EAAsB;AACpB,IAAA,KAAK,CAAC,UAAN,CAAiB,SAAjB,GAA6B,YAAY,CACvC,qBAAqB,CAAC,UADiB,EAEvC,WAAW,CAAC,UAF2B,EAGvC,KAAK,CAAC,UAAN,CAAiB,SAHsB,CAAzC;AAKD;;AAED,MAAI,KAAK,CAAC,mBAAV,EAA+B;AAC7B,IAAA,KAAK,CAAC,mBAAN,CAA0B,SAA1B,GAAsC,YAAY,CAChD,qBAAqB,CAAC,mBAD0B,EAEhD,WAAW,CAAC,mBAFoC,EAGhD,KAAK,CAAC,mBAAN,CAA0B,SAHsB,CAAlD;AAKD;;AAED,SAAO,KAAP;AACD,CAhCM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassName = 'fui-SplitButton';\n\nconst SplitButtonClassNames = {\n  primaryActionButton: `${splitButtonClassName}-primaryActionButton`,\n  menuButton: `${splitButtonClassName}-menuButton`,\n};\n\nconst useFocusStyles = makeStyles({\n  primaryActionButton: createCustomFocusIndicatorStyle({\n    borderTopRightRadius: 0,\n    borderBottomRightRadius: 0,\n  }),\n\n  menuButton: createCustomFocusIndicatorStyle({\n    borderLeftWidth: 0,\n    borderTopLeftRadius: 0,\n    borderBottomLeftRadius: 0,\n  }),\n});\n\nconst useRootStyles = makeStyles({\n  // Base rootStyles\n  base: {\n    display: 'inline-flex',\n    justifyContent: 'stretch',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    },\n\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.menuButton}`]: {\n      borderLeftWidth: 0,\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    },\n  },\n\n  // Block rootStyles\n  block: {\n    width: '100%',\n  },\n\n  // Appearance variations\n  outline: {\n    /* No rootStyles */\n  },\n  primary: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralForegroundInverted,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundInverted,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralForegroundInverted,\n      },\n    },\n  },\n  subtle: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n  },\n  transparent: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStroke1Hover,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStroke1Hover,\n      },\n    },\n  },\n\n  // Shape variations\n  circular: {},\n  rounded: {},\n  square: {},\n\n  // Disabled rootStyles\n  disabled: {\n    // Use classnames to increase specificy of rootStyles and avoid collisions.\n    [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n      borderRightColor: tokens.colorNeutralStrokeDisabled,\n    },\n\n    ':hover': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n\n    ':active': {\n      [`& .${SplitButtonClassNames.primaryActionButton}`]: {\n        borderRightColor: tokens.colorNeutralStrokeDisabled,\n      },\n    },\n  },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n\n  const { appearance, block, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    splitButtonClassName,\n    rootStyles.base,\n    block && rootStyles.block,\n    appearance && rootStyles[appearance],\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    state.root.className,\n  );\n\n  if (state.menuButton) {\n    state.menuButton.className = mergeClasses(\n      SplitButtonClassNames.menuButton,\n      focusStyles.menuButton,\n      state.menuButton.className,\n    );\n  }\n\n  if (state.primaryActionButton) {\n    state.primaryActionButton.className = mergeClasses(\n      SplitButtonClassNames.primaryActionButton,\n      focusStyles.primaryActionButton,\n      state.primaryActionButton.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,6 @@
+import type { ToggleButtonProps } from './ToggleButton.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * ToggleButtons are buttons that toggle between two defined states when triggered.
+ */
+export declare const ToggleButton: ForwardRefComponent<ToggleButtonProps>;

package/lib/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { renderToggleButton_unstable } from './renderToggleButton';
+import { useToggleButton_unstable } from './useToggleButton';
+import { useToggleButtonStyles_unstable } from './useToggleButtonStyles';
+/**
+ * ToggleButtons are buttons that toggle between two defined states when triggered.
+ */
+
+export const ToggleButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useToggleButton_unstable(props, ref);
+  useToggleButtonStyles_unstable(state);
+  return renderToggleButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
+});
+ToggleButton.displayName = 'ToggleButton';
+//# sourceMappingURL=ToggleButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,QAA4C,sBAA5C;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AACA,SAAS,8BAAT,QAA+C,yBAA/C;AAIA;;AAEG;;AACH,OAAO,MAAM,YAAY,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClG,QAAM,KAAK,GAAG,wBAAwB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AAEA,EAAA,8BAA8B,CAAC,KAAD,CAA9B;AAEA,SAAO,2BAA2B,CAAC,KAAD,CAAlC,CALkG,CAMlG;AACD,CAPmE,CAA7D;AASP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { renderToggleButton_unstable } from './renderToggleButton';\nimport { useToggleButton_unstable } from './useToggleButton';\nimport { useToggleButtonStyles_unstable } from './useToggleButtonStyles';\nimport type { ToggleButtonProps } from './ToggleButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * ToggleButtons are buttons that toggle between two defined states when triggered.\n */\nexport const ToggleButton: ForwardRefComponent<ToggleButtonProps> = React.forwardRef((props, ref) => {\n  const state = useToggleButton_unstable(props, ref);\n\n  useToggleButtonStyles_unstable(state);\n\n  return renderToggleButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToggleButtonProps>;\n\nToggleButton.displayName = 'ToggleButton';\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/ToggleButton.types.d.ts

@@ -0,0 +1,20 @@
+import type { ButtonProps, ButtonState } from '../Button/Button.types';
+declare type ToggleButtonCommons = {
+    /**
+     * Defines the controlled checked state of the `ToggleButton`.
+     * If passed, `ToggleButton` ignores the `defaultChecked` property.
+     * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
+     * correct value based on handling `onClick` events and re-rendering.
+     * @default false
+     */
+    checked: boolean;
+};
+export declare type ToggleButtonProps = ButtonProps & Partial<ToggleButtonCommons> & {
+    /**
+     * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.
+     * @default false
+     */
+    defaultChecked?: boolean;
+};
+export declare type ToggleButtonState = ButtonState & ToggleButtonCommons;
+export {};

package/lib/components/ToggleButton/ToggleButton.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ToggleButton.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.types.js","sourceRoot":"../src/","sources":["components/ToggleButton/ToggleButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonProps, ButtonState } from '../Button/Button.types';\n\ntype ToggleButtonCommons = {\n  /**\n   * Defines the controlled checked state of the `ToggleButton`.\n   * If passed, `ToggleButton` ignores the `defaultChecked` property.\n   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the\n   * correct value based on handling `onClick` events and re-rendering.\n   * @default false\n   */\n  checked: boolean;\n};\n\nexport type ToggleButtonProps = ButtonProps &\n  Partial<ToggleButtonCommons> & {\n    /**\n     * Defines whether the `ToggleButton` is initially in a checked state or not when rendered.\n     * @default false\n     */\n    defaultChecked?: boolean;\n  };\n\nexport type ToggleButtonState = ButtonState & ToggleButtonCommons;\n"]}

package/lib/components/ToggleButton/index.d.ts

@@ -0,0 +1,5 @@
+export * from './ToggleButton';
+export * from './ToggleButton.types';
+export * from './renderToggleButton';
+export * from './useToggleButton';
+export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';

package/lib/components/ToggleButton/index.js

@@ -0,0 +1,6 @@
+export * from './ToggleButton';
+export * from './ToggleButton.types';
+export * from './renderToggleButton';
+export * from './useToggleButton';
+export { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassName, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}

package/lib/components/ToggleButton/renderToggleButton.d.ts

@@ -0,0 +1 @@
+export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';

package/lib/components/ToggleButton/renderToggleButton.js

@@ -0,0 +1,2 @@
+export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';
+//# sourceMappingURL=renderToggleButton.js.map

package/lib/components/ToggleButton/renderToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderToggleButton.js","sourceRoot":"../src/","sources":["components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"]}

package/lib/components/ToggleButton/useToggleButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';
+/**
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
+ */
+export declare const useToggleButton_unstable: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;

package/lib/components/ToggleButton/useToggleButton.js

@@ -0,0 +1,52 @@
+import { useControllableState } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useButton_unstable } from '../Button/useButton';
+/**
+ * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns
+ * processed state.
+ * @param props - User provided props to the ToggleButton component.
+ * @param ref - User provided ref to be passed to the ToggleButton component.
+ */
+
+export const useToggleButton_unstable = ({
+  checked,
+  defaultChecked,
+  ...props
+}, ref) => {
+  const {
+    disabled,
+    disabledFocusable
+  } = props;
+  const buttonState = useButton_unstable(props, ref);
+  const {
+    role,
+    onClick
+  } = buttonState.root;
+  const [checkedValue, setCheckedValue] = useControllableState({
+    state: checked,
+    defaultState: defaultChecked,
+    initialState: false
+  });
+  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
+  return { // Button state
+    ...buttonState,
+    // State calculated from a set of props
+    checked: checkedValue,
+    // Slots definition
+    root: { ...buttonState.root,
+      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
+      onClick: React.useCallback(ev => {
+        if (!disabled && !disabledFocusable) {
+          onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+
+          if (ev.defaultPrevented) {
+            return;
+          }
+
+          setCheckedValue(!checkedValue);
+        }
+      }, [checkedValue, disabled, disabledFocusable, setCheckedValue, onClick])
+    }
+  };
+};
+//# sourceMappingURL=useToggleButton.js.map

package/lib/components/ToggleButton/useToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC;AAAE,EAAA,OAAF;AAAW,EAAA,cAAX;AAA2B,KAAG;AAA9B,CADsC,EAEtC,GAFsC,KAGjB;AACrB,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAAkC,KAAxC;AACA,QAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;AACA,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA;AAAR,MAAoB,WAAW,CAAC,IAAtC;AAEA,QAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;AAC3D,IAAA,KAAK,EAAE,OADoD;AAE3D,IAAA,YAAY,EAAE,cAF6C;AAG3D,IAAA,YAAY,EAAE;AAH6C,GAAD,CAA5D;AAMA,QAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;AAEA,SAAO,EACL;AACA,OAAG,WAFE;AAIL;AACA,IAAA,OAAO,EAAE,YALJ;AAOL;AACA,IAAA,IAAI,EAAE,EACJ,GAAG,WAAW,CAAC,IADX;AAEJ,OAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,YAFpD;AAGJ,MAAA,OAAO,EAAE,KAAK,CAAC,WAAN,CACP,EAAE,IAAG;AACH,YAAI,CAAC,QAAD,IAAa,CAAC,iBAAlB,EAAqC;AACnC,UAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAG,EAAH,CAAP;;AAEA,cAAI,EAAE,CAAC,gBAAP,EAAyB;AACvB;AACD;;AAED,UAAA,eAAe,CAAC,CAAC,YAAF,CAAf;AACD;AACF,OAXM,EAYP,CAAC,YAAD,EAAe,QAAf,EAAyB,iBAAzB,EAA4C,eAA5C,EAA6D,OAA7D,CAZO;AAHL;AARD,GAAP;AA2BD,CA3CM","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  { checked, defaultChecked, ...props }: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const { disabled, disabledFocusable } = props;\n  const buttonState = useButton_unstable(props, ref);\n  const { role, onClick } = buttonState.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  return {\n    // Button state\n    ...buttonState,\n\n    // State calculated from a set of props\n    checked: checkedValue,\n\n    // Slots definition\n    root: {\n      ...buttonState.root,\n      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n      onClick: React.useCallback(\n        ev => {\n          if (!disabled && !disabledFocusable) {\n            onClick?.(ev);\n\n            if (ev.defaultPrevented) {\n              return;\n            }\n\n            setCheckedValue(!checkedValue);\n          }\n        },\n        [checkedValue, disabled, disabledFocusable, setCheckedValue, onClick],\n      ),\n    },\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/useToggleButtonStyles.d.ts

@@ -0,0 +1,3 @@
+import type { ToggleButtonState } from './ToggleButton.types';
+export declare const toggleButtonClassName = "fui-ToggleButton";
+export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;

package/lib/components/ToggleButton/useToggleButtonStyles.js

@@ -0,0 +1,194 @@
+import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useButtonStyles_unstable } from '../Button/useButtonStyles';
+export const toggleButtonClassName = 'fui-ToggleButton';
+
+const useCheckedStyles = /*#__PURE__*/__styles({
+  "base": {
+    "De3pzq": "f1nfm20t",
+    "g2u3we": "fj3muxo",
+    "h3c5rm": ["f1akhkt", "f1lxtadh"],
+    "B9xav0g": "f1aperda",
+    "zhjwy3": ["f1lxtadh", "f1akhkt"],
+    "sj55zd": "f19n0e5",
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "Jwef8y": "f1knas48",
+    "Bgoe8wy": "fvcxoqz",
+    "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
+    "oetu4i": "f1xlaoq0",
+    "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
+    "Bi91k9c": "fax3udt",
+    "ecr2s2": "fb40n2d",
+    "B6oc9vd": "fvs00aa",
+    "ak43y8": ["f1assf6x", "f4ruux4"],
+    "wmxk5l": "fumykes",
+    "B50zh58": ["f4ruux4", "f1assf6x"],
+    "lj723h": "f1r2dosr"
+  },
+  "outline": {
+    "De3pzq": "f1q9pm1r",
+    "Jwef8y": "fjxutwb",
+    "ecr2s2": "fophhak"
+  },
+  "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",
+    "ecr2s2": "fsp1bjw",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f18otbis"
+  },
+  "subtle": {
+    "De3pzq": "fq5gl1p",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "sj55zd": "f1qj7y59",
+    "Jwef8y": "f1t94bn6",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "Bi91k9c": "f139oj5f",
+    "ecr2s2": "f1wfn5kd",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f19au66r"
+  },
+  "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",
+    "ecr2s2": "fophhak",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"],
+    "lj723h": "f19au66r"
+  }
+}, {
+  "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);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".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);}", ".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);}", ".fax3udt:hover{color:var(--colorNeutralForeground1);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".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);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}"],
+  "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fsp1bjw:active{background-color:var(--colorBrandBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}"]
+});
+
+const useDisabledStyles = /*#__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",
+    "ecr2s2": "f1ryyzvn",
+    "B6oc9vd": "fdi4vxw",
+    "ak43y8": ["f4ryxzl", "fkdgpbx"],
+    "wmxk5l": "fcmhn06",
+    "B50zh58": ["fkdgpbx", "f4ryxzl"],
+    "lj723h": "f19wldhg"
+  },
+  "outline": {},
+  "primary": {
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"]
+  },
+  "subtle": {
+    "De3pzq": "f3rmtva",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "Jwef8y": "f1cio4g9",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "ecr2s2": "f1rot6hk",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"]
+  },
+  "transparent": {
+    "De3pzq": "f3rmtva",
+    "g2u3we": "f1p3nwhy",
+    "h3c5rm": ["f11589ue", "f1pdflbu"],
+    "B9xav0g": "f1q5o8ev",
+    "zhjwy3": ["f1pdflbu", "f11589ue"],
+    "Jwef8y": "f1cio4g9",
+    "Bgoe8wy": "f1s2uweq",
+    "Bwzppfd": ["fr80ssc", "fecsdlb"],
+    "oetu4i": "f1ukrpxl",
+    "gg5e9n": ["fecsdlb", "fr80ssc"],
+    "ecr2s2": "f1rot6hk",
+    "B6oc9vd": "ff472gp",
+    "ak43y8": ["f4yyc7m", "ft2aflc"],
+    "wmxk5l": "fggejwh",
+    "B50zh58": ["ft2aflc", "f4yyc7m"]
+  }
+}, {
+  "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;}", ".f3rmtva{background-color:transparent;}"],
+  "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);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1cio4g9:hover{background-color:transparent;}"],
+  "a": [".f1ryyzvn:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f1rot6hk:active{background-color:transparent;}"]
+});
+
+export const useToggleButtonStyles_unstable = state => {
+  const checkedStyles = useCheckedStyles();
+  const disabledStyles = useDisabledStyles();
+  const {
+    appearance,
+    checked,
+    disabled,
+    disabledFocusable
+  } = state;
+  state.root.className = mergeClasses(toggleButtonClassName, // Checked styles
+  checked && checkedStyles.base, appearance && checked && checkedStyles[appearance], // Disabled styles
+  (disabled || disabledFocusable) && disabledStyles.base, appearance && (disabled || disabledFocusable) && disabledStyles[appearance], // User provided class name
+  state.root.className);
+  useButtonStyles_unstable(state);
+  return state;
+};
+//# sourceMappingURL=useToggleButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,wBAAT,QAAyC,2BAAzC;AAGA,OAAO,MAAM,qBAAqB,GAAG,kBAA9B;;AAEP,MAAM,gBAAgB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAzB;;AAuFA,MAAM,iBAAiB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AAiEA,OAAO,MAAM,8BAA8B,GAAI,KAAD,IAAgD;AAC5F,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,OAAd;AAAuB,IAAA,QAAvB;AAAiC,IAAA;AAAjC,MAAuD,KAA7D;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBADiC,EAGjC;AACA,EAAA,OAAO,IAAI,aAAa,CAAC,IAJQ,EAKjC,UAAU,IAAI,OAAd,IAAyB,aAAa,CAAC,UAAD,CALL,EAOjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,cAAc,CAAC,IARjB,EASjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,cAAc,CAAC,UAAD,CAT9B,EAWjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAZsB,CAAnC;AAeA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,KAAP;AACD,CAxBM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassName = 'fui-ToggleButton';\n\nconst useCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1,\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\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    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\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    ':active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n});\n\nconst useDisabledStyles = 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    ':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    ':active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  subtle: {\n    backgroundColor: 'transparent',\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':active': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: 'transparent',\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':active': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const checkedStyles = useCheckedStyles();\n  const disabledStyles = useDisabledStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassName,\n\n    // Checked styles\n    checked && checkedStyles.base,\n    appearance && checked && checkedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && disabledStyles.base,\n    appearance && (disabled || disabledFocusable) && disabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './CompoundButton';
+export * from './MenuButton';
+export * from './SplitButton';
+export * from './ToggleButton';

package/lib/index.js

@@ -0,0 +1,6 @@
+export * from './Button';
+export * from './CompoundButton';
+export * from './MenuButton';
+export * from './SplitButton';
+export * from './ToggleButton';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './Button';\nexport * from './CompoundButton';\nexport * from './MenuButton';\nexport * from './SplitButton';\nexport * from './ToggleButton';\n"]}

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-commonjs/Button.d.ts

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

package/lib-commonjs/Button.js

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

package/lib-commonjs/Button.js.map

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

package/lib-commonjs/CompoundButton.d.ts

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

package/lib-commonjs/CompoundButton.js

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

package/lib-commonjs/CompoundButton.js.map

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

package/lib-commonjs/MenuButton.d.ts

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

package/lib-commonjs/MenuButton.js

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

package/lib-commonjs/MenuButton.js.map

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

package/lib-commonjs/SplitButton.d.ts

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

package/lib-commonjs/SplitButton.js

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

package/lib-commonjs/SplitButton.js.map

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

package/lib-commonjs/ToggleButton.d.ts

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

package/lib-commonjs/ToggleButton.js

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