@fluentui/react-checkbox 9.4.7 → 9.5.1

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-checkbox
 
-This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
+This log was last generated on Mon, 28 Jul 2025 18:44:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.1)
+
+Mon, 28 Jul 2025 18:44:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.5.0..@fluentui/react-checkbox_v9.5.1)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-label to v9.3.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-tabster to v9.26.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.5.0)
+
+Thu, 17 Jul 2025 13:49:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.4.7..@fluentui/react-checkbox_v9.5.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-label to v9.3.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.4.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.4.7)
 
-Fri, 11 Jul 2025 15:56:58 GMT 
+Fri, 11 Jul 2025 15:59:24 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.4.6..@fluentui/react-checkbox_v9.4.7)
 
 ### Patches

package/lib/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './components/Checkbox/index';\nexport {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './components/Checkbox/index';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}
+{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './components/Checkbox/index';\nexport {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './components/Checkbox/index';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"mappings":"AACA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}

package/lib/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useCheckbox_unstable(props, ref);\n\n  useCheckboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state);\n\n  return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","useCheckbox_unstable","renderCheckbox_unstable","useCheckboxStyles_unstable","useCustomStyleHook_unstable","Checkbox","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useCheckbox_unstable(props, ref);\n\n  useCheckboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state);\n\n  return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","useCheckbox_unstable","renderCheckbox_unstable","useCheckboxStyles_unstable","useCustomStyleHook_unstable","Checkbox","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The checkbox, with the checkmark icon as its child when checked.\n   */\n  // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n  // but changing the signature would be a breaking change\n  // TODO: change the default value to 'span' in the next major\n  indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * The controlled value for the checkbox.\n   *\n   * @default false\n   */\n  checked?: 'mixed' | boolean;\n\n  /**\n   * Checkboxes don't support children. To add a label, use the `label` prop.\n   */\n  children?: never;\n\n  /**\n   * Whether the checkbox should be rendered as checked by default.\n   */\n  defaultChecked?: 'mixed' | boolean;\n\n  /**\n   * The position of the label relative to the checkbox indicator.\n   *\n   * @default after\n   */\n  labelPosition?: 'before' | 'after';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n  /**\n   * The shape of the checkbox indicator.\n   *\n   * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   *\n   * @default square\n   */\n  shape?: 'square' | 'circular';\n\n  /**\n   * The size of the checkbox indicator.\n   *\n   * @default medium\n   */\n  size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n  Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The checkbox, with the checkmark icon as its child when checked.\n   */\n  // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n  // but changing the signature would be a breaking change\n  // TODO: change the default value to 'span' in the next major\n  indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * The controlled value for the checkbox.\n   *\n   * @default false\n   */\n  checked?: 'mixed' | boolean;\n\n  /**\n   * Checkboxes don't support children. To add a label, use the `label` prop.\n   */\n  children?: never;\n\n  /**\n   * Whether the checkbox should be rendered as checked by default.\n   */\n  defaultChecked?: 'mixed' | boolean;\n\n  /**\n   * The position of the label relative to the checkbox indicator.\n   *\n   * @default after\n   */\n  labelPosition?: 'before' | 'after';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n  /**\n   * The shape of the checkbox indicator.\n   *\n   * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   *\n   * @default square\n   */\n  shape?: 'square' | 'circular';\n\n  /**\n   * The size of the checkbox indicator.\n   *\n   * @default medium\n   */\n  size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n  Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/index.ts"],"sourcesContent":["export { Checkbox } from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox.types';\nexport { renderCheckbox_unstable } from './renderCheckbox';\nexport { useCheckbox_unstable } from './useCheckbox';\nexport { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\n"],"names":["Checkbox","renderCheckbox_unstable","useCheckbox_unstable","checkboxClassNames","useCheckboxStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
+{"version":3,"sources":["../src/components/Checkbox/index.ts"],"sourcesContent":["export { Checkbox } from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox.types';\nexport { renderCheckbox_unstable } from './renderCheckbox';\nexport { useCheckbox_unstable } from './useCheckbox';\nexport { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\n"],"names":["Checkbox","renderCheckbox_unstable","useCheckbox_unstable","checkboxClassNames","useCheckboxStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

package/lib/components/Checkbox/renderCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  assertSlots<CheckboxSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      {state.labelPosition === 'before' && state.label && <state.label />}\n      {state.indicator && <state.indicator />}\n      {state.labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC/DJ,MAAMK,SAAS,kBAAI,KAACL,MAAMK,SAAS;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAGrE,EAAE"}
+{"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  assertSlots<CheckboxSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      {state.labelPosition === 'before' && state.label && <state.label />}\n      {state.indicator && <state.indicator />}\n      {state.labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC/DJ,MAAMK,SAAS,kBAAI,KAACL,MAAMK,SAAS;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;;;AAGrE,EAAE"}

package/lib/components/Checkbox/useCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else if (checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    shape,\n    checked,\n    disabled,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label,\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n      elementType: 'span',\n    }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    label: slot.optional(props.label, {\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium', // Even if the checkbox itself is large\n      },\n      elementType: Label,\n    }),\n    indicator: slot.optional(props.indicator, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon,\n      },\n      elementType: 'div',\n    }),\n  };\n\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange?.(ev, { checked: val });\n    setChecked(val);\n  });\n\n  // Create a ref object for the input element so we can use it to set the indeterminate prop.\n  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n  const inputRef = useMergedRefs(state.input.ref);\n  state.input.ref = inputRef;\n\n  // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n  useIsomorphicLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = mixed;\n    }\n  }, [inputRef, mixed]);\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","components","root","input","indicator","label","always","defaultProps","elementType","type","optional","htmlFor","renderByDefault","children","ev","val","currentTarget","indeterminate","inputRef","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else if (checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    shape,\n    checked,\n    disabled,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label,\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n      elementType: 'span',\n    }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    label: slot.optional(props.label, {\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium', // Even if the checkbox itself is large\n      },\n      elementType: Label,\n    }),\n    indicator: slot.optional(props.indicator, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon,\n      },\n      elementType: 'div',\n    }),\n  };\n\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange?.(ev, { checked: val });\n    setChecked(val);\n  });\n\n  // Create a ref object for the input element so we can use it to set the indeterminate prop.\n  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n  const inputRef = useMergedRefs(state.input.ref);\n  state.input.ref = inputRef;\n\n  // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n  useIsomorphicLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = mixed;\n    }\n  }, [inputRef, mixed]);\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","components","root","input","indicator","label","always","defaultProps","elementType","type","optional","htmlFor","renderByDefault","children","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}

package/lib/components/Checkbox/useCheckboxStyles.styles.raw.js

@@ -0,0 +1,179 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const checkboxClassNames = {
+    root: 'fui-Checkbox',
+    label: 'fui-Checkbox__label',
+    input: 'fui-Checkbox__input',
+    indicator: 'fui-Checkbox__indicator'
+};
+// CSS variables used internally in Checkbox's styles
+const vars = {
+    indicatorColor: '--fui-Checkbox__indicator--color',
+    indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',
+    indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'
+};
+// The indicator size is used by the indicator and label styles
+const indicatorSizeMedium = '16px';
+const indicatorSizeLarge = '20px';
+const useRootBaseClassName = makeResetStyles({
+    position: 'relative',
+    display: 'inline-flex',
+    cursor: 'pointer',
+    verticalAlign: 'middle',
+    color: tokens.colorNeutralForeground3,
+    ...createFocusOutlineStyle({
+        style: {},
+        selector: 'focus-within'
+    })
+});
+const useRootStyles = makeStyles({
+    unchecked: {
+        ':hover': {
+            color: tokens.colorNeutralForeground2,
+            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover
+        },
+        ':active': {
+            color: tokens.colorNeutralForeground1,
+            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    checked: {
+        color: tokens.colorNeutralForeground1,
+        [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,
+        [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,
+        [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,
+        ':hover': {
+            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,
+            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover
+        },
+        ':active': {
+            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,
+            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed
+        }
+    },
+    mixed: {
+        color: tokens.colorNeutralForeground1,
+        [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,
+        [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,
+        ':hover': {
+            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,
+            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover
+        },
+        ':active': {
+            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,
+            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed
+        }
+    },
+    disabled: {
+        cursor: 'default',
+        color: tokens.colorNeutralForegroundDisabled,
+        [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,
+        [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText',
+            [vars.indicatorColor]: 'GrayText'
+        }
+    }
+});
+const useInputBaseClassName = makeResetStyles({
+    boxSizing: 'border-box',
+    cursor: 'inherit',
+    height: '100%',
+    margin: 0,
+    opacity: 0,
+    position: 'absolute',
+    top: 0,
+    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
+    // This is done so that clicking on that "empty space" still toggles the checkbox.
+    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`
+});
+const useInputStyles = makeStyles({
+    before: {
+        right: 0
+    },
+    after: {
+        left: 0
+    },
+    large: {
+        width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`
+    }
+});
+const useIndicatorBaseClassName = makeResetStyles({
+    alignSelf: 'flex-start',
+    boxSizing: 'border-box',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    color: `var(${vars.indicatorColor})`,
+    backgroundColor: `var(${vars.indicatorBackgroundColor})`,
+    borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,
+    borderStyle: 'solid',
+    borderWidth: tokens.strokeWidthThin,
+    borderRadius: tokens.borderRadiusSmall,
+    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,
+    fill: 'currentColor',
+    pointerEvents: 'none',
+    fontSize: '12px',
+    height: indicatorSizeMedium,
+    width: indicatorSizeMedium
+});
+const useIndicatorStyles = makeStyles({
+    large: {
+        fontSize: '16px',
+        height: indicatorSizeLarge,
+        width: indicatorSizeLarge
+    },
+    circular: {
+        borderRadius: tokens.borderRadiusCircular
+    }
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = makeStyles({
+    base: {
+        alignSelf: 'center',
+        color: 'inherit',
+        cursor: 'inherit',
+        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`
+    },
+    before: {
+        paddingRight: tokens.spacingHorizontalXS
+    },
+    after: {
+        paddingLeft: tokens.spacingHorizontalXS
+    },
+    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.
+    // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.
+    medium: {
+        marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,
+        marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`
+    },
+    large: {
+        marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,
+        marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`
+    }
+});
+/**
+ * Apply styling to the Checkbox slots based on the state
+ */ export const useCheckboxStyles_unstable = (state)=>{
+    'use no memo';
+    const { checked, disabled, labelPosition, shape, size } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    const indicatorStyles = useIndicatorStyles();
+    if (state.indicator) {
+        state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+    }
+    const labelStyles = useLabelStyles();
+    if (state.label) {
+        state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
+    }
+    return state;
+};

package/lib/components/Checkbox/useCheckboxStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/useCheckboxStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n  root: 'fui-Checkbox',\n  label: 'fui-Checkbox__label',\n  input: 'fui-Checkbox__input',\n  indicator: 'fui-Checkbox__indicator',\n};\n\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n  indicatorColor: '--fui-Checkbox__indicator--color',\n  indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n  indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor',\n} as const;\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  position: 'relative',\n  display: 'inline-flex',\n  cursor: 'pointer',\n  verticalAlign: 'middle',\n  color: tokens.colorNeutralForeground3,\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  unchecked: {\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      color: tokens.colorNeutralForeground1,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n\n  checked: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n\n    ':hover': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover,\n    },\n\n    ':active': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed,\n    },\n  },\n\n  mixed: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n    [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n\n    ':hover': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover,\n    },\n\n    ':active': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n\n  disabled: {\n    cursor: 'default',\n\n    color: tokens.colorNeutralForegroundDisabled,\n    [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      [vars.indicatorColor]: 'GrayText',\n    },\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'inherit',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n  top: 0,\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n  width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  alignSelf: 'flex-start',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  color: `var(${vars.indicatorColor})`,\n  backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n  borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n  borderStyle: 'solid',\n  borderWidth: tokens.strokeWidthThin,\n  borderRadius: tokens.borderRadiusSmall,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  fontSize: '12px',\n  height: indicatorSizeMedium,\n  width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: { borderRadius: tokens.borderRadiusCircular },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\n    cursor: 'inherit',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  'use no memo';\n\n  const { checked, disabled, labelPosition, shape, size } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    checkboxClassNames.root,\n    rootBaseClassName,\n    disabled\n      ? rootStyles.disabled\n      : checked === 'mixed'\n      ? rootStyles.mixed\n      : checked\n      ? rootStyles.checked\n      : rootStyles.unchecked,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputBaseClassName,\n    size === 'large' && inputStyles.large,\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorBaseClassName,\n      size === 'large' && indicatorStyles.large,\n      shape === 'circular' && indicatorStyles.circular,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      checkboxClassNames.label,\n      labelStyles.base,\n      labelStyles[size],\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","position","display","cursor","verticalAlign","color","colorNeutralForeground3","style","selector","useRootStyles","unchecked","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","checked","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","mixed","colorCompoundBrandStroke","colorCompoundBrandForeground1","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","disabled","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputBaseClassName","boxSizing","height","margin","opacity","top","width","spacingHorizontalS","useInputStyles","before","right","after","left","large","useIndicatorBaseClassName","alignSelf","flexShrink","alignItems","justifyContent","overflow","backgroundColor","borderColor","colorNeutralStrokeAccessible","borderStyle","borderWidth","strokeWidthThin","borderRadius","borderRadiusSmall","spacingVerticalS","fill","pointerEvents","fontSize","useIndicatorStyles","circular","borderRadiusCircular","useLabelStyles","base","padding","paddingRight","spacingHorizontalXS","paddingLeft","medium","marginTop","lineHeightBase300","marginBottom","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"rangeMappings":"","mappings":"AAAA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"mappings":"AAAA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa"}

package/lib-commonjs/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './components/Checkbox/index';\nexport {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './components/Checkbox/index';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,QAAQ;eAARA,eAAQ;;IACRC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,oBAAoB;eAApBA,2BAAoB;;;uBACf"}
+{"version":3,"sources":["../src/Checkbox.ts"],"sourcesContent":["export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './components/Checkbox/index';\nexport {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './components/Checkbox/index';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"mappings":";;;;;;;;;;;;eAEEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eACvBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,8BAA8B"}

package/lib-commonjs/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useCheckbox_unstable(props, ref);\n\n  useCheckboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state);\n\n  return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","forwardRef","props","ref","state","useCheckbox_unstable","useCheckboxStyles_unstable","useCustomStyleHook_unstable","renderCheckbox_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACc;gCACG;yCACG;qCAGC;AAMrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAE1CG,IAAAA,mDAAAA,EAA2BF;IAE3BG,IAAAA,gDAAAA,EAA4B,8BAA8BH;IAE1D,OAAOI,IAAAA,uCAAAA,EAAwBJ;AACjC;AAEAL,SAASU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCheckbox_unstable } from './useCheckbox';\nimport { renderCheckbox_unstable } from './renderCheckbox';\nimport { useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\nimport type { CheckboxProps } from './Checkbox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Checkboxes give people a way to select one or more items from a group,\n * or switch between two mutually exclusive options (checked or unchecked).\n */\nexport const Checkbox: ForwardRefComponent<CheckboxProps> = React.forwardRef((props, ref) => {\n  const state = useCheckbox_unstable(props, ref);\n\n  useCheckboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCheckboxStyles_unstable')(state);\n\n  return renderCheckbox_unstable(state);\n});\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","useCheckbox_unstable","renderCheckbox_unstable","useCheckboxStyles_unstable","useCustomStyleHook_unstable","Checkbox","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAYaK;;;;;;;iEAZU,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;qCAG5B,kCAAkC;AAMvE,iBAAMA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qCAAAA,EAAqBM,OAAOC;QAE1CL,mDAAAA,EAA2BM;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOP,uCAAAA,EAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

package/lib-commonjs/components/Checkbox/Checkbox.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The checkbox, with the checkmark icon as its child when checked.\n   */\n  // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n  // but changing the signature would be a breaking change\n  // TODO: change the default value to 'span' in the next major\n  indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * The controlled value for the checkbox.\n   *\n   * @default false\n   */\n  checked?: 'mixed' | boolean;\n\n  /**\n   * Checkboxes don't support children. To add a label, use the `label` prop.\n   */\n  children?: never;\n\n  /**\n   * Whether the checkbox should be rendered as checked by default.\n   */\n  defaultChecked?: 'mixed' | boolean;\n\n  /**\n   * The position of the label relative to the checkbox indicator.\n   *\n   * @default after\n   */\n  labelPosition?: 'before' | 'after';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n  /**\n   * The shape of the checkbox indicator.\n   *\n   * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   *\n   * @default square\n   */\n  shape?: 'square' | 'circular';\n\n  /**\n   * The size of the checkbox indicator.\n   *\n   * @default medium\n   */\n  size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n  Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CheckboxSlots = {\n  /**\n   * The root element of the Checkbox.\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Checkbox>`.\n   * All other native props will be applied to the primary slot: `input`\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The Checkbox's label.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * Hidden input that handles the checkbox's functionality.\n   *\n   * This is the PRIMARY slot: all native properties specified directly on `<Checkbox>` will be applied to this slot,\n   * except `className` and `style`, which remain on the root slot.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /**\n   * The checkbox, with the checkmark icon as its child when checked.\n   */\n  // FIXME: this should be 'span' by default, because you cannot have a 'div' inside of a 'span'\n  // but changing the signature would be a breaking change\n  // TODO: change the default value to 'span' in the next major\n  indicator: Slot<'div', 'span'>;\n};\n\n/**\n * Checkbox Props\n */\nexport type CheckboxProps = Omit<\n  ComponentProps<Partial<CheckboxSlots>, 'input'>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> & {\n  /**\n   * The controlled value for the checkbox.\n   *\n   * @default false\n   */\n  checked?: 'mixed' | boolean;\n\n  /**\n   * Checkboxes don't support children. To add a label, use the `label` prop.\n   */\n  children?: never;\n\n  /**\n   * Whether the checkbox should be rendered as checked by default.\n   */\n  defaultChecked?: 'mixed' | boolean;\n\n  /**\n   * The position of the label relative to the checkbox indicator.\n   *\n   * @default after\n   */\n  labelPosition?: 'before' | 'after';\n\n  /**\n   * Callback to be called when the checked state value changes.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: CheckboxOnChangeData) => void;\n\n  /**\n   * The shape of the checkbox indicator.\n   *\n   * The `circular` variant is only recommended to be used in a tasks-style UI (checklist),\n   * since it otherwise could be confused for a `RadioItem`.\n   *\n   * @default square\n   */\n  shape?: 'square' | 'circular';\n\n  /**\n   * The size of the checkbox indicator.\n   *\n   * @default medium\n   */\n  size?: 'medium' | 'large';\n};\n\n/**\n * Data for the onChange event for checkbox.\n */\nexport interface CheckboxOnChangeData {\n  checked: 'mixed' | boolean;\n}\n\n/**\n * State used in rendering Checkbox\n */\nexport type CheckboxState = ComponentState<CheckboxSlots> &\n  Required<Pick<CheckboxProps, 'checked' | 'disabled' | 'labelPosition' | 'shape' | 'size'>>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/components/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/index.ts"],"sourcesContent":["export { Checkbox } from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox.types';\nexport { renderCheckbox_unstable } from './renderCheckbox';\nexport { useCheckbox_unstable } from './useCheckbox';\nexport { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAIRC,kBAAkB;eAAlBA,2CAAkB;;IAFlBC,uBAAuB;eAAvBA,uCAAuB;;IAEHC,0BAA0B;eAA1BA,mDAA0B;;IAD9CC,oBAAoB;eAApBA,iCAAoB;;;0BAHJ;gCAEe;6BACH;yCAC0B"}
+{"version":3,"sources":["../src/components/Checkbox/index.ts"],"sourcesContent":["export { Checkbox } from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox.types';\nexport { renderCheckbox_unstable } from './renderCheckbox';\nexport { useCheckbox_unstable } from './useCheckbox';\nexport { checkboxClassNames, useCheckboxStyles_unstable } from './useCheckboxStyles.styles';\n"],"names":["Checkbox","renderCheckbox_unstable","useCheckbox_unstable","checkboxClassNames","useCheckboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAIRG,2CAAkB;;;eAFlBF,uCAAuB;;;eAEHG,mDAA0B;;;eAD9CF,iCAAoB;;;0BAHJ,aAAa;gCAEE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B"}

package/lib-commonjs/components/Checkbox/renderCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  assertSlots<CheckboxSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      {state.labelPosition === 'before' && state.label && <state.label />}\n      {state.indicator && <state.indicator />}\n      {state.labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["renderCheckbox_unstable","state","assertSlots","_jsxs","root","_jsx","input","labelPosition","label","indicator"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;4BALb;gCAE4B;AAGrB,MAAMA,0BAA0B,CAACC;IACtCC,IAAAA,2BAAAA,EAA2BD;IAE3B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;0BACTC,IAAAA,eAAA,EAACJ,MAAMK,KAAK,EAAA,CAAA;YACXL,MAAMM,aAAa,KAAK,YAAYN,MAAMO,KAAK,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACJ,MAAMO,KAAK,EAAA,CAAA;YAC/DP,MAAMQ,SAAS,IAAA,WAAA,GAAIJ,IAAAA,eAAA,EAACJ,MAAMQ,SAAS,EAAA,CAAA;YACnCR,MAAMM,aAAa,KAAK,WAAWN,MAAMO,KAAK,IAAA,WAAA,GAAIH,IAAAA,eAAA,EAACJ,MAAMO,KAAK,EAAA,CAAA;;;AAGrE"}
+{"version":3,"sources":["../src/components/Checkbox/renderCheckbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { CheckboxState, CheckboxSlots } from './Checkbox.types';\n\nexport const renderCheckbox_unstable = (state: CheckboxState) => {\n  assertSlots<CheckboxSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      {state.labelPosition === 'before' && state.label && <state.label />}\n      {state.indicator && <state.indicator />}\n      {state.labelPosition === 'after' && state.label && <state.label />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCheckbox_unstable","state","root","input","labelPosition","label","indicator"],"mappings":";;;;+BAMaC;;;;;;4BALb,iCAAiD;gCAErB,4BAA4B;AAGjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;YACXF,MAAMG,aAAa,KAAK,YAAYH,MAAMI,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;YAC/DJ,MAAMK,SAAS,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,SAAS,EAAA,CAAA;YACnCL,MAAMG,aAAa,KAAK,WAAWH,MAAMI,KAAK,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,KAAK,EAAA,CAAA;;;AAGrE,EAAE"}

package/lib-commonjs/components/Checkbox/useCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else if (checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    shape,\n    checked,\n    disabled,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label,\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n      elementType: 'span',\n    }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    label: slot.optional(props.label, {\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium', // Even if the checkbox itself is large\n      },\n      elementType: Label,\n    }),\n    indicator: slot.optional(props.indicator, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon,\n      },\n      elementType: 'div',\n    }),\n  };\n\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange?.(ev, { checked: val });\n    setChecked(val);\n  });\n\n  // Create a ref object for the input element so we can use it to set the indeterminate prop.\n  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n  const inputRef = useMergedRefs(state.input.ref);\n  state.input.ref = inputRef;\n\n  // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n  useIsomorphicLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = mixed;\n    }\n  }, [inputRef, mixed]);\n\n  return state;\n};\n"],"names":["useCheckbox_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","useControllableState","defaultState","defaultChecked","state","initialState","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","mixed","id","useId","primary","checkmarkIcon","React","createElement","CircleFilled","Square16Filled","Square12Filled","Checkmark16Filled","Checkmark12Filled","components","root","input","indicator","label","Label","slot","always","defaultProps","useFocusWithin","elementType","type","optional","htmlFor","renderByDefault","children","useEventCallback","ev","val","currentTarget","indeterminate","inputRef","useMergedRefs","useIsomorphicLayoutEffect","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/components/Checkbox/useCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport {\n  getPartitionedNativeProps,\n  useControllableState,\n  useEventCallback,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n  slot,\n} from '@fluentui/react-utilities';\nimport { CheckboxProps, CheckboxState } from './Checkbox.types';\nimport {\n  Checkmark12Filled,\n  Checkmark16Filled,\n  Square12Filled,\n  Square16Filled,\n  CircleFilled,\n} from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Checkbox.\n *\n * The returned state can be modified with hooks such as useCheckboxStyles_unstable,\n * before being passed to renderCheckbox_unstable.\n *\n * @param props - props from this instance of Checkbox\n * @param ref - reference to `<input>` element of Checkbox\n */\nexport const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n  const { disabled = false, required, shape = 'square', size = 'medium', labelPosition = 'after', onChange } = props;\n\n  const [checked, setChecked] = useControllableState({\n    defaultState: props.defaultChecked,\n    state: props.checked,\n    initialState: false,\n  });\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'size', 'onChange'],\n  });\n\n  const mixed = checked === 'mixed';\n  const id = useId('checkbox-', nativeProps.primary.id);\n\n  let checkmarkIcon;\n  if (mixed) {\n    if (shape === 'circular') {\n      checkmarkIcon = <CircleFilled />;\n    } else {\n      checkmarkIcon = size === 'large' ? <Square16Filled /> : <Square12Filled />;\n    }\n  } else if (checked) {\n    checkmarkIcon = size === 'large' ? <Checkmark16Filled /> : <Checkmark12Filled />;\n  }\n\n  const state: CheckboxState = {\n    shape,\n    checked,\n    disabled,\n    size,\n    labelPosition,\n    components: {\n      root: 'span',\n      input: 'input',\n      indicator: 'div',\n      label: Label,\n    },\n    root: slot.always(props.root, {\n      defaultProps: {\n        ref: useFocusWithin<HTMLSpanElement>(),\n        ...nativeProps.root,\n      },\n      elementType: 'span',\n    }),\n    input: slot.always(props.input, {\n      defaultProps: {\n        type: 'checkbox',\n        id,\n        ref,\n        checked: checked === true,\n        ...nativeProps.primary,\n      },\n      elementType: 'input',\n    }),\n    label: slot.optional(props.label, {\n      defaultProps: {\n        htmlFor: id,\n        disabled,\n        required,\n        size: 'medium', // Even if the checkbox itself is large\n      },\n      elementType: Label,\n    }),\n    indicator: slot.optional(props.indicator, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': true,\n        children: checkmarkIcon,\n      },\n      elementType: 'div',\n    }),\n  };\n\n  state.input.onChange = useEventCallback(ev => {\n    const val = ev.currentTarget.indeterminate ? 'mixed' : ev.currentTarget.checked;\n    onChange?.(ev, { checked: val });\n    setChecked(val);\n  });\n\n  // Create a ref object for the input element so we can use it to set the indeterminate prop.\n  // Use useMergedRefs, since the ref might be undefined or a function-ref (no .current)\n  const inputRef = useMergedRefs(state.input.ref);\n  state.input.ref = inputRef;\n\n  // Set the <input> element's checked and indeterminate properties based on our tri-state property.\n  // Since indeterminate can only be set via javascript, it has to be done in a layout effect.\n  useIsomorphicLayoutEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = mixed;\n    }\n  }, [inputRef, mixed]);\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useMergedRefs","slot","Checkmark12Filled","Checkmark16Filled","Square12Filled","Square16Filled","CircleFilled","Label","useFocusWithin","useCheckbox_unstable","props","ref","supportsLabelFor","supportsRequired","disabled","required","shape","size","labelPosition","onChange","checked","setChecked","defaultState","defaultChecked","state","initialState","nativeProps","primarySlotTagName","excludedPropNames","mixed","id","primary","checkmarkIcon","components","root","input","indicator","label","always","defaultProps","elementType","type","optional","htmlFor","renderByDefault","children","ev","val","currentTarget","indeterminate","inputRef","current"],"mappings":"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"}

package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n    root: 'fui-Checkbox',\n    label: 'fui-Checkbox__label',\n    input: 'fui-Checkbox__input',\n    indicator: 'fui-Checkbox__indicator'\n};\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n    indicatorColor: '--fui-Checkbox__indicator--color',\n    indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n    indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n    position: 'relative',\n    display: 'inline-flex',\n    cursor: 'pointer',\n    verticalAlign: 'middle',\n    color: tokens.colorNeutralForeground3,\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    unchecked: {\n        ':hover': {\n            color: tokens.colorNeutralForeground2,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForeground1,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    checked: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n        ':hover': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover\n        },\n        ':active': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed\n        }\n    },\n    mixed: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n        [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n        ':hover': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    disabled: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            [vars.indicatorColor]: 'GrayText'\n        }\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    cursor: 'inherit',\n    height: '100%',\n    margin: 0,\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n    // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0\n    },\n    after: {\n        left: 0\n    },\n    large: {\n        width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    color: `var(${vars.indicatorColor})`,\n    backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n    borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n    borderStyle: 'solid',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: tokens.borderRadiusSmall,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    fill: 'currentColor',\n    pointerEvents: 'none',\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n    large: {\n        fontSize: '16px',\n        height: indicatorSizeLarge,\n        width: indicatorSizeLarge\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        alignSelf: 'center',\n        color: 'inherit',\n        cursor: 'inherit',\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n    medium: {\n        marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`\n    },\n    large: {\n        marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`\n    }\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n    'use no memo';\n    const { checked, disabled, labelPosition, shape, size } = state;\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    if (state.indicator) {\n        state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n    }\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"names":["checkboxClassNames","useCheckboxStyles_unstable","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","__resetStyles","r","s","useRootStyles","__styles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","Bbusuzp","mrqfp9","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","p","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","B6of3ja","jrapky","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","mergeClasses","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useCheckboxStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const checkboxClassNames = {\n    root: 'fui-Checkbox',\n    label: 'fui-Checkbox__label',\n    input: 'fui-Checkbox__input',\n    indicator: 'fui-Checkbox__indicator'\n};\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n    indicatorColor: '--fui-Checkbox__indicator--color',\n    indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n    indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'\n};\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\nconst useRootBaseClassName = makeResetStyles({\n    position: 'relative',\n    display: 'inline-flex',\n    cursor: 'pointer',\n    verticalAlign: 'middle',\n    color: tokens.colorNeutralForeground3,\n    ...createFocusOutlineStyle({\n        style: {},\n        selector: 'focus-within'\n    })\n});\nconst useRootStyles = makeStyles({\n    unchecked: {\n        ':hover': {\n            color: tokens.colorNeutralForeground2,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForeground1,\n            [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    checked: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n        ':hover': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover\n        },\n        ':active': {\n            [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed\n        }\n    },\n    mixed: {\n        color: tokens.colorNeutralForeground1,\n        [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n        [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n        ':hover': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover\n        },\n        ':active': {\n            [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n            [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed\n        }\n    },\n    disabled: {\n        cursor: 'default',\n        color: tokens.colorNeutralForegroundDisabled,\n        [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n        [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText',\n            [vars.indicatorColor]: 'GrayText'\n        }\n    }\n});\nconst useInputBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    cursor: 'inherit',\n    height: '100%',\n    margin: 0,\n    opacity: 0,\n    position: 'absolute',\n    top: 0,\n    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n    // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n    width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`\n});\nconst useInputStyles = makeStyles({\n    before: {\n        right: 0\n    },\n    after: {\n        left: 0\n    },\n    large: {\n        width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`\n    }\n});\nconst useIndicatorBaseClassName = makeResetStyles({\n    alignSelf: 'flex-start',\n    boxSizing: 'border-box',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n    color: `var(${vars.indicatorColor})`,\n    backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n    borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n    borderStyle: 'solid',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: tokens.borderRadiusSmall,\n    margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n    fill: 'currentColor',\n    pointerEvents: 'none',\n    fontSize: '12px',\n    height: indicatorSizeMedium,\n    width: indicatorSizeMedium\n});\nconst useIndicatorStyles = makeStyles({\n    large: {\n        fontSize: '16px',\n        height: indicatorSizeLarge,\n        width: indicatorSizeLarge\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular\n    }\n});\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n    base: {\n        alignSelf: 'center',\n        color: 'inherit',\n        cursor: 'inherit',\n        padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`\n    },\n    before: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    after: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n    // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n    medium: {\n        marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`\n    },\n    large: {\n        marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n        marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`\n    }\n});\n/**\n * Apply styling to the Checkbox slots based on the state\n */ export const useCheckboxStyles_unstable = (state)=>{\n    'use no memo';\n    const { checked, disabled, labelPosition, shape, size } = state;\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);\n    const inputBaseClassName = useInputBaseClassName();\n    const inputStyles = useInputStyles();\n    state.input.className = mergeClasses(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);\n    const indicatorBaseClassName = useIndicatorBaseClassName();\n    const indicatorStyles = useIndicatorStyles();\n    if (state.indicator) {\n        state.indicator.className = mergeClasses(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);\n    }\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        state.label.className = mergeClasses(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","r","s","useRootStyles","unchecked","Bi91k9c","pv5h1i","lj723h","Hnthvo","checked","sj55zd","wkncrt","zxk7z7","Hmsnfy","e6czan","qbydtz","mixed","Bunfa6h","B15ykmv","disabled","Bceei9c","Bbusuzp","mrqfp9","h","a","d","m","useInputBaseClassName","useInputStyles","before","j35jbq","after","oyh7mz","large","a9b677","useIndicatorBaseClassName","useIndicatorStyles","Be2twd7","Bqenvij","circular","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","p","useLabelStyles","base","qb2dma","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","B6of3ja","jrapky","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":";;;;;;;;;;;IAGaK,kBAAkB;;;IA4JdoE,0BAA0B;;;;uBA/Je,gBAAgB;AAGnE,2BAA2B;IAC9BnE,IAAI,EAAE,cAAc;IACpBC,KAAK,EAAE,qBAAqB;IAC5BC,KAAK,EAAE,qBAAqB;IAC5BC,SAAS,EAAE;AACf,CAAC;AACD,qDAAA;AACA,MAAMC,IAAI,GAAG;IACTC,cAAc,EAAE,kCAAkC;IAClDC,oBAAoB,EAAE,wCAAwC;IAC9DC,wBAAwB,EAAE;AAC9B,CAAC;AACD,+DAAA;AACA,MAAMC,mBAAmB,GAAG,MAAM;AAClC,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,oBAAoB,GAAA,WAAA,OAAGhB,oBAAA,EAAA,YAAA,YAAA;IAAAiB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAU5B,CAAC;AACF,MAAMC,aAAa,GAAA,WAAA,OAAGlB,eAAA,EAAA;IAAAmB,SAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAR,MAAA,EAAA;QAAAS,MAAA,EAAA;QAAAP,MAAA,EAAA;IAAA;IAAAQ,KAAA,EAAA;QAAAN,MAAA,EAAA;QAAAG,MAAA,EAAA;QAAAD,MAAA,EAAA;QAAAN,MAAA,EAAA;QAAAW,OAAA,EAAA;QAAAT,MAAA,EAAA;QAAAU,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAV,MAAA,EAAA;QAAAG,MAAA,EAAA;QAAAD,MAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAgDrB,CAAC;AACF,MAAMC,qBAAqB,GAAA,WAAA,OAAG3C,oBAAA,EAAA,WAAA,MAAA;IAAA;CAW7B,CAAC;AACF,MAAM4C,cAAc,GAAA,WAAA,OAAG3C,eAAA,EAAA;IAAA4C,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAT,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUtB,CAAC;AACF,MAAMU,yBAAyB,GAAA,WAAA,OAAGnD,oBAAA,EAAA,WAAA,MAAA;IAAA;CAoBjC,CAAC;AACF,MAAMoD,kBAAkB,GAAA,WAAA,OAAGnD,eAAA,EAAA;IAAAgD,KAAA,EAAA;QAAAI,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAnB,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAoB,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAS1B,CAAC;AACF,mGAAA;AACA,MAAMC,cAAc,GAAA,WAAA,OAAG7D,eAAA,EAAA;IAAA8D,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAtC,MAAA,EAAA;QAAAU,OAAA,EAAA;QAAA6B,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAxB,MAAA,EAAA;QAAAsB,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAApB,KAAA,EAAA;QAAAmB,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAvB,KAAA,EAAA;QAAAsB,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAA/B,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAoB,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAuBtB,CAAC;AAGS,oCAAoCa,KAAK,IAAG;IACnD,aAAa;IACb,MAAM,EAAEjD,OAAO,EAAEU,QAAQ,EAAEwC,aAAa,EAAEC,KAAK,EAAEC,IAAAA,EAAM,GAAGH,KAAK;IAC/D,MAAMI,iBAAiB,GAAG9D,oBAAoB,CAAC,CAAC;IAChD,MAAM+D,UAAU,GAAG5D,aAAa,CAAC,CAAC;IAClCuD,KAAK,CAACpE,IAAI,CAAC0E,SAAS,OAAG9E,mBAAY,EAACG,kBAAkB,CAACC,IAAI,EAAEwE,iBAAiB,EAAE3C,QAAQ,GAAG4C,UAAU,CAAC5C,QAAQ,GAAGV,OAAO,KAAK,OAAO,GAAGsD,UAAU,CAAC/C,KAAK,GAAGP,OAAO,GAAGsD,UAAU,CAACtD,OAAO,GAAGsD,UAAU,CAAC3D,SAAS,EAAEsD,KAAK,CAACpE,IAAI,CAAC0E,SAAS,CAAC;IACpO,MAAMC,kBAAkB,GAAGtC,qBAAqB,CAAC,CAAC;IAClD,MAAMuC,WAAW,GAAGtC,cAAc,CAAC,CAAC;IACpC8B,KAAK,CAAClE,KAAK,CAACwE,SAAS,OAAG9E,mBAAY,EAACG,kBAAkB,CAACG,KAAK,EAAEyE,kBAAkB,EAAEJ,IAAI,KAAK,OAAO,IAAIK,WAAW,CAACjC,KAAK,EAAEiC,WAAW,CAACP,aAAa,CAAC,EAAED,KAAK,CAAClE,KAAK,CAACwE,SAAS,CAAC;IAC5K,MAAMG,sBAAsB,GAAGhC,yBAAyB,CAAC,CAAC;IAC1D,MAAMiC,eAAe,GAAGhC,kBAAkB,CAAC,CAAC;IAC5C,IAAIsB,KAAK,CAACjE,SAAS,EAAE;QACjBiE,KAAK,CAACjE,SAAS,CAACuE,SAAS,OAAG9E,mBAAY,EAACG,kBAAkB,CAACI,SAAS,EAAE0E,sBAAsB,EAAEN,IAAI,KAAK,OAAO,IAAIO,eAAe,CAACnC,KAAK,EAAE2B,KAAK,KAAK,UAAU,IAAIQ,eAAe,CAAC7B,QAAQ,EAAEmB,KAAK,CAACjE,SAAS,CAACuE,SAAS,CAAC;IAC1N;IACA,MAAMK,WAAW,GAAGvB,cAAc,CAAC,CAAC;IACpC,IAAIY,KAAK,CAACnE,KAAK,EAAE;QACbmE,KAAK,CAACnE,KAAK,CAACyE,SAAS,OAAG9E,mBAAY,EAACG,kBAAkB,CAACE,KAAK,EAAE8E,WAAW,CAACtB,IAAI,EAAEsB,WAAW,CAACR,IAAI,CAAC,EAAEQ,WAAW,CAACV,aAAa,CAAC,EAAED,KAAK,CAACnE,KAAK,CAACyE,SAAS,CAAC;IAC1J;IACA,OAAON,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.raw.js

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    checkboxClassNames: function() {
+        return checkboxClassNames;
+    },
+    useCheckboxStyles_unstable: function() {
+        return useCheckboxStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const checkboxClassNames = {
+    root: 'fui-Checkbox',
+    label: 'fui-Checkbox__label',
+    input: 'fui-Checkbox__input',
+    indicator: 'fui-Checkbox__indicator'
+};
+// CSS variables used internally in Checkbox's styles
+const vars = {
+    indicatorColor: '--fui-Checkbox__indicator--color',
+    indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',
+    indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor'
+};
+// The indicator size is used by the indicator and label styles
+const indicatorSizeMedium = '16px';
+const indicatorSizeLarge = '20px';
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    position: 'relative',
+    display: 'inline-flex',
+    cursor: 'pointer',
+    verticalAlign: 'middle',
+    color: _reacttheme.tokens.colorNeutralForeground3,
+    ...(0, _reacttabster.createFocusOutlineStyle)({
+        style: {},
+        selector: 'focus-within'
+    })
+});
+const useRootStyles = (0, _react.makeStyles)({
+    unchecked: {
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForeground2,
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+        },
+        ':active': {
+            color: _reacttheme.tokens.colorNeutralForeground1,
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+        }
+    },
+    checked: {
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        [vars.indicatorBackgroundColor]: _reacttheme.tokens.colorCompoundBrandBackground,
+        [vars.indicatorColor]: _reacttheme.tokens.colorNeutralForegroundInverted,
+        [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandBackground,
+        ':hover': {
+            [vars.indicatorBackgroundColor]: _reacttheme.tokens.colorCompoundBrandBackgroundHover,
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandBackgroundHover
+        },
+        ':active': {
+            [vars.indicatorBackgroundColor]: _reacttheme.tokens.colorCompoundBrandBackgroundPressed,
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandBackgroundPressed
+        }
+    },
+    mixed: {
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandStroke,
+        [vars.indicatorColor]: _reacttheme.tokens.colorCompoundBrandForeground1,
+        ':hover': {
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandStrokeHover,
+            [vars.indicatorColor]: _reacttheme.tokens.colorCompoundBrandForeground1Hover
+        },
+        ':active': {
+            [vars.indicatorBorderColor]: _reacttheme.tokens.colorCompoundBrandStrokePressed,
+            [vars.indicatorColor]: _reacttheme.tokens.colorCompoundBrandForeground1Pressed
+        }
+    },
+    disabled: {
+        cursor: 'default',
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        [vars.indicatorBorderColor]: _reacttheme.tokens.colorNeutralStrokeDisabled,
+        [vars.indicatorColor]: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText',
+            [vars.indicatorColor]: 'GrayText'
+        }
+    }
+});
+const useInputBaseClassName = (0, _react.makeResetStyles)({
+    boxSizing: 'border-box',
+    cursor: 'inherit',
+    height: '100%',
+    margin: 0,
+    opacity: 0,
+    position: 'absolute',
+    top: 0,
+    // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
+    // This is done so that clicking on that "empty space" still toggles the checkbox.
+    width: `calc(${indicatorSizeMedium} + 2 * ${_reacttheme.tokens.spacingHorizontalS})`
+});
+const useInputStyles = (0, _react.makeStyles)({
+    before: {
+        right: 0
+    },
+    after: {
+        left: 0
+    },
+    large: {
+        width: `calc(${indicatorSizeLarge} + 2 * ${_reacttheme.tokens.spacingHorizontalS})`
+    }
+});
+const useIndicatorBaseClassName = (0, _react.makeResetStyles)({
+    alignSelf: 'flex-start',
+    boxSizing: 'border-box',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    color: `var(${vars.indicatorColor})`,
+    backgroundColor: `var(${vars.indicatorBackgroundColor})`,
+    borderColor: `var(${vars.indicatorBorderColor}, ${_reacttheme.tokens.colorNeutralStrokeAccessible})`,
+    borderStyle: 'solid',
+    borderWidth: _reacttheme.tokens.strokeWidthThin,
+    borderRadius: _reacttheme.tokens.borderRadiusSmall,
+    margin: _reacttheme.tokens.spacingVerticalS + ' ' + _reacttheme.tokens.spacingHorizontalS,
+    fill: 'currentColor',
+    pointerEvents: 'none',
+    fontSize: '12px',
+    height: indicatorSizeMedium,
+    width: indicatorSizeMedium
+});
+const useIndicatorStyles = (0, _react.makeStyles)({
+    large: {
+        fontSize: '16px',
+        height: indicatorSizeLarge,
+        width: indicatorSizeLarge
+    },
+    circular: {
+        borderRadius: _reacttheme.tokens.borderRadiusCircular
+    }
+});
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = (0, _react.makeStyles)({
+    base: {
+        alignSelf: 'center',
+        color: 'inherit',
+        cursor: 'inherit',
+        padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS}`
+    },
+    before: {
+        paddingRight: _reacttheme.tokens.spacingHorizontalXS
+    },
+    after: {
+        paddingLeft: _reacttheme.tokens.spacingHorizontalXS
+    },
+    // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.
+    // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.
+    medium: {
+        marginTop: `calc((${indicatorSizeMedium} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`,
+        marginBottom: `calc((${indicatorSizeMedium} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`
+    },
+    large: {
+        marginTop: `calc((${indicatorSizeLarge} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`,
+        marginBottom: `calc((${indicatorSizeLarge} - ${_reacttheme.tokens.lineHeightBase300}) / 2)`
+    }
+});
+const useCheckboxStyles_unstable = (state)=>{
+    'use no memo';
+    const { checked, disabled, labelPosition, shape, size } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = (0, _react.mergeClasses)(checkboxClassNames.root, rootBaseClassName, disabled ? rootStyles.disabled : checked === 'mixed' ? rootStyles.mixed : checked ? rootStyles.checked : rootStyles.unchecked, state.root.className);
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    state.input.className = (0, _react.mergeClasses)(checkboxClassNames.input, inputBaseClassName, size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className);
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    const indicatorStyles = useIndicatorStyles();
+    if (state.indicator) {
+        state.indicator.className = (0, _react.mergeClasses)(checkboxClassNames.indicator, indicatorBaseClassName, size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className);
+    }
+    const labelStyles = useLabelStyles();
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(checkboxClassNames.label, labelStyles.base, labelStyles[size], labelStyles[labelPosition], state.label.className);
+    }
+    return state;
+};

package/lib-commonjs/components/Checkbox/useCheckboxStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/useCheckboxStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { CheckboxSlots, CheckboxState } from './Checkbox.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const checkboxClassNames: SlotClassNames<CheckboxSlots> = {\n  root: 'fui-Checkbox',\n  label: 'fui-Checkbox__label',\n  input: 'fui-Checkbox__input',\n  indicator: 'fui-Checkbox__indicator',\n};\n\n// CSS variables used internally in Checkbox's styles\nconst vars = {\n  indicatorColor: '--fui-Checkbox__indicator--color',\n  indicatorBorderColor: '--fui-Checkbox__indicator--borderColor',\n  indicatorBackgroundColor: '--fui-Checkbox__indicator--backgroundColor',\n} as const;\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSizeMedium = '16px';\nconst indicatorSizeLarge = '20px';\n\nconst useRootBaseClassName = makeResetStyles({\n  position: 'relative',\n  display: 'inline-flex',\n  cursor: 'pointer',\n  verticalAlign: 'middle',\n  color: tokens.colorNeutralForeground3,\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  unchecked: {\n    ':hover': {\n      color: tokens.colorNeutralForeground2,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    ':active': {\n      color: tokens.colorNeutralForeground1,\n      [vars.indicatorBorderColor]: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n\n  checked: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackground,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundInverted,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackground,\n\n    ':hover': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundHover,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundHover,\n    },\n\n    ':active': {\n      [vars.indicatorBackgroundColor]: tokens.colorCompoundBrandBackgroundPressed,\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandBackgroundPressed,\n    },\n  },\n\n  mixed: {\n    color: tokens.colorNeutralForeground1,\n    [vars.indicatorBorderColor]: tokens.colorCompoundBrandStroke,\n    [vars.indicatorColor]: tokens.colorCompoundBrandForeground1,\n\n    ':hover': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokeHover,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Hover,\n    },\n\n    ':active': {\n      [vars.indicatorBorderColor]: tokens.colorCompoundBrandStrokePressed,\n      [vars.indicatorColor]: tokens.colorCompoundBrandForeground1Pressed,\n    },\n  },\n\n  disabled: {\n    cursor: 'default',\n\n    color: tokens.colorNeutralForegroundDisabled,\n    [vars.indicatorBorderColor]: tokens.colorNeutralStrokeDisabled,\n    [vars.indicatorColor]: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n      [vars.indicatorColor]: 'GrayText',\n    },\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'inherit',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n  top: 0,\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the checkbox.\n  width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n  },\n  after: {\n    left: 0,\n  },\n\n  large: {\n    width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`,\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  alignSelf: 'flex-start',\n  boxSizing: 'border-box',\n  flexShrink: 0,\n\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  overflow: 'hidden',\n\n  color: `var(${vars.indicatorColor})`,\n  backgroundColor: `var(${vars.indicatorBackgroundColor})`,\n  borderColor: `var(${vars.indicatorBorderColor}, ${tokens.colorNeutralStrokeAccessible})`,\n  borderStyle: 'solid',\n  borderWidth: tokens.strokeWidthThin,\n  borderRadius: tokens.borderRadiusSmall,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  fill: 'currentColor',\n  pointerEvents: 'none',\n\n  fontSize: '12px',\n  height: indicatorSizeMedium,\n  width: indicatorSizeMedium,\n});\n\nconst useIndicatorStyles = makeStyles({\n  large: {\n    fontSize: '16px',\n    height: indicatorSizeLarge,\n    width: indicatorSizeLarge,\n  },\n\n  circular: { borderRadius: tokens.borderRadiusCircular },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    alignSelf: 'center',\n    color: 'inherit',\n    cursor: 'inherit',\n    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalS}`,\n  },\n\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n  // This prevents the label from expanding the height of the checkbox, but preserves line height if the label wraps.\n  medium: {\n    marginTop: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeMedium} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n  large: {\n    marginTop: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n    marginBottom: `calc((${indicatorSizeLarge} - ${tokens.lineHeightBase300}) / 2)`,\n  },\n});\n\n/**\n * Apply styling to the Checkbox slots based on the state\n */\nexport const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {\n  'use no memo';\n\n  const { checked, disabled, labelPosition, shape, size } = state;\n\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    checkboxClassNames.root,\n    rootBaseClassName,\n    disabled\n      ? rootStyles.disabled\n      : checked === 'mixed'\n      ? rootStyles.mixed\n      : checked\n      ? rootStyles.checked\n      : rootStyles.unchecked,\n    state.root.className,\n  );\n\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  state.input.className = mergeClasses(\n    checkboxClassNames.input,\n    inputBaseClassName,\n    size === 'large' && inputStyles.large,\n    inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  if (state.indicator) {\n    state.indicator.className = mergeClasses(\n      checkboxClassNames.indicator,\n      indicatorBaseClassName,\n      size === 'large' && indicatorStyles.large,\n      shape === 'circular' && indicatorStyles.circular,\n      state.indicator.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      checkboxClassNames.label,\n      labelStyles.base,\n      labelStyles[size],\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","createFocusOutlineStyle","tokens","checkboxClassNames","root","label","input","indicator","vars","indicatorColor","indicatorBorderColor","indicatorBackgroundColor","indicatorSizeMedium","indicatorSizeLarge","useRootBaseClassName","position","display","cursor","verticalAlign","color","colorNeutralForeground3","style","selector","useRootStyles","unchecked","colorNeutralForeground2","colorNeutralStrokeAccessibleHover","colorNeutralForeground1","colorNeutralStrokeAccessiblePressed","checked","colorCompoundBrandBackground","colorNeutralForegroundInverted","colorCompoundBrandBackgroundHover","colorCompoundBrandBackgroundPressed","mixed","colorCompoundBrandStroke","colorCompoundBrandForeground1","colorCompoundBrandStrokeHover","colorCompoundBrandForeground1Hover","colorCompoundBrandStrokePressed","colorCompoundBrandForeground1Pressed","disabled","colorNeutralForegroundDisabled","colorNeutralStrokeDisabled","useInputBaseClassName","boxSizing","height","margin","opacity","top","width","spacingHorizontalS","useInputStyles","before","right","after","left","large","useIndicatorBaseClassName","alignSelf","flexShrink","alignItems","justifyContent","overflow","backgroundColor","borderColor","colorNeutralStrokeAccessible","borderStyle","borderWidth","strokeWidthThin","borderRadius","borderRadiusSmall","spacingVerticalS","fill","pointerEvents","fontSize","useIndicatorStyles","circular","borderRadiusCircular","useLabelStyles","base","padding","paddingRight","spacingHorizontalXS","paddingLeft","medium","marginTop","lineHeightBase300","marginBottom","useCheckboxStyles_unstable","state","labelPosition","shape","size","rootBaseClassName","rootStyles","className","inputBaseClassName","inputStyles","indicatorBaseClassName","indicatorStyles","labelStyles"],"mappings":"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"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IACRC,kBAAkB;eAAlBA,4BAAkB;;IAClBC,uBAAuB;eAAvBA,iCAAuB;;IACvBC,0BAA0B;eAA1BA,oCAA0B;;IAC1BC,oBAAoB;eAApBA,8BAAoB;;;0BACf"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Checkbox,\n  checkboxClassNames,\n  renderCheckbox_unstable,\n  useCheckboxStyles_unstable,\n  useCheckbox_unstable,\n} from './Checkbox';\nexport type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox';\n"],"names":["Checkbox","checkboxClassNames","renderCheckbox_unstable","useCheckboxStyles_unstable","useCheckbox_unstable"],"mappings":";;;;;;;;;;;;eACEA,kBAAQ;;;eACRC,4BAAkB;;;eAClBC,iCAAuB;;;eACvBC,oCAA0B;;;eAC1BC,8BAAoB;;;0BACf,aAAa"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-checkbox",
-  "version": "9.4.7",
+  "version": "9.5.1",
   "description": "Fluent UI checkbox component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,14 +18,14 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "^9.3.7",
+    "@fluentui/react-field": "^9.4.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.1.2",
-    "@fluentui/react-label": "^9.2.2",
+    "@fluentui/react-jsx-runtime": "^9.1.3",
+    "@fluentui/react-label": "^9.3.1",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-tabster": "^9.25.3",
+    "@fluentui/react-tabster": "^9.26.1",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.22.0",
+    "@fluentui/react-utilities": "^9.23.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },